diff --git a/jsconfig.json b/jsconfig.json
index dd88096ec..b154aa300 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
       "baseUrl": "./src",
-      "checkJs": true,
+      "checkJs": false,
       "jsx": "react"
     },
     "exclude": ["node_modules", "**/node_modules", "dist", "build"]
diff --git a/package-lock.json b/package-lock.json
index b6437b2d9..f4da796a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "weverify-plugin",
-  "version": "0.81",
+  "version": "0.82",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "weverify-plugin",
-      "version": "0.81",
+      "version": "0.82",
       "license": "ISC",
       "dependencies": {
         "@date-io/moment": "^2.17.0",
diff --git a/package.json b/package.json
index 7a9d3b5bc..b58cafab7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "weverify-plugin",
-  "version": "0.81",
+  "version": "0.82",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/public/manifest.json b/public/manifest.json
index b2e68fb63..c69caba88 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Fake news debunker by InVID & WeVerify",
-  "version": "0.81",
+  "version": "0.82",
   "description": "InVID WeVerify extension",
   "short_name": "Verification Plugin",
   "action": {
diff --git a/src/App.jsx b/src/App.jsx
index aad73ee0a..165835ba7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { HashRouter, Route, Routes } from "react-router-dom";
 import PopUp from "./components/PopUp/PopUp";
-import NavBar from "./components/NavBar/NavBar";
 import useAuthenticationAPI from "./components/Shared/Authentication/useAuthenticationAPI";
 import { useDispatch } from "react-redux";
 import {
@@ -10,6 +9,7 @@ import {
   setErrorNetwork,
 } from "redux/reducers/errorReducer";
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
+import ApplicationLayout from "./components/ApplicationLayout";
 
 const theme = createTheme({
   palette: {
@@ -103,7 +103,7 @@ const App = () => {
       <ThemeProvider theme={theme}>
         <Routes>
           <Route index path="/" element={<PopUp />} />
-          <Route path={"/app/*"} element={<NavBar />} />
+          <Route path={"/app/*"} element={<ApplicationLayout />} />
         </Routes>
       </ThemeProvider>
     </HashRouter>
diff --git a/src/Hooks/useAnalytics.jsx b/src/Hooks/useAnalytics.jsx
index 932c2b50a..d040e3fdf 100644
--- a/src/Hooks/useAnalytics.jsx
+++ b/src/Hooks/useAnalytics.jsx
@@ -1,14 +1,14 @@
 import { useSelector } from "react-redux";
 import { useEffect } from "react";
 import {
-  trackPageView,
-  trackPageViewAnonymous,
   trackEvent,
   trackEventAnonymous,
+  trackPageView,
+  trackPageViewAnonymous,
 } from "../components/Shared/GoogleAnalytics/MatomoAnalytics";
 import { history } from "../components/Shared/History/History";
 
-export const useTrackPageView = (path, client_id, uid, index) => {
+export const useTrackPageView = (path, client_id, uid, toolName) => {
   const analytics = useSelector((state) => state.cookies.analytics);
   useEffect(() => {
     //console.log("general page view");
@@ -18,7 +18,7 @@ export const useTrackPageView = (path, client_id, uid, index) => {
     } else {
       trackPageViewAnonymous(path, history);
     }
-  }, [index]);
+  }, [toolName]);
 };
 
 export const useTrackEvent = (
diff --git a/src/components/ApplicationLayout/index.jsx b/src/components/ApplicationLayout/index.jsx
new file mode 100644
index 000000000..a83ed64f2
--- /dev/null
+++ b/src/components/ApplicationLayout/index.jsx
@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import NotificationSnackbar from "../NotificationSnackbar";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import TopMenu from "../TopMenu";
+import { TOP_MENU_ITEMS } from "../../constants/topMenuItems";
+import SideMenu from "../SideMenu";
+import { tools } from "../../constants/tools";
+import MainContent from "../MainContent";
+import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles";
+
+const ApplicationLayout = () => {
+  const theme = createTheme({
+    palette: {
+      primary: {
+        light: "#00926c",
+        main: "#00926c",
+        dark: "#00926c",
+        contrastText: "#fff",
+      },
+    },
+    components: {
+      MuiAppBar: {
+        styleOverrides: {
+          colorPrimary: {
+            backgroundColor: "#ffffff",
+          },
+          root: {
+            zIndex: 1300,
+            height: "87px",
+            boxShadow: "none",
+            paddingTop: "12px",
+          },
+        },
+      },
+      MuiListItem: {
+        styleOverrides: {
+          gutters: {
+            paddingLeft: "26px",
+          },
+        },
+      },
+      MuiAutocomplete: {
+        styleOverrides: {
+          popupIndicatorOpen: {
+            transform: "none!important",
+          },
+          popper: {
+            zIndex: 99999,
+          },
+        },
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            borderRadius: "10px!important",
+          },
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            padding: 0,
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            minWidth: "160px",
+          },
+        },
+      },
+    },
+  });
+
+  // Used to display warning messages
+  const [openAlert, setOpenAlert] = useState(false);
+
+  const classes = useMyStyles();
+
+  return (
+    <div className={classes.flex}>
+      <NotificationSnackbar openAlert={openAlert} setOpenAlert={setOpenAlert} />
+      <ThemeProvider theme={theme}>
+        <SideMenu tools={tools} setOpenAlert={setOpenAlert} />
+        <TopMenu topMenuItems={TOP_MENU_ITEMS} />
+        <MainContent tools={tools} />
+      </ThemeProvider>
+    </div>
+  );
+};
+
+export default ApplicationLayout;
diff --git a/src/components/MainContent/index.jsx b/src/components/MainContent/index.jsx
new file mode 100644
index 000000000..3ee3665bb
--- /dev/null
+++ b/src/components/MainContent/index.jsx
@@ -0,0 +1,194 @@
+import React from "react";
+import MainContentMenuTopMenuItems from "../NavBar/MainContentMenuTabItems/MainContentMenuTopMenuItems";
+import ScrollTop from "../Shared/ScrollTop/ScrollTop";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { Button, Fab, Snackbar } from "@mui/material";
+import { KeyboardArrowUp } from "@mui/icons-material";
+import MySnackbar from "../MySnackbar/MySnackbar";
+import {
+  cleanError,
+  cleanErrorNetwork,
+} from "../../redux/reducers/errorReducer";
+import { setFalse, setTrue } from "../../redux/reducers/cookiesReducers";
+import Feedback from "../Feedback/Feedback";
+import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles";
+import { TOOL_STATUS_ICON } from "../../constants/tools";
+import { useDispatch, useSelector } from "react-redux";
+import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace";
+import { TOP_MENU_ITEMS } from "../../constants/topMenuItems";
+
+/**
+ *
+ * @param tools {Tool[]}
+ * @returns {Element}
+ * @constructor
+ */
+const MainContent = ({ tools }) => {
+  const classes = useMyStyles();
+
+  const keyword = i18nLoadNamespace("components/NavBar");
+
+  const dispatch = useDispatch();
+
+  const currentLang = useSelector((state) => state.language);
+  const isCurrentLanguageLeftToRight = currentLang !== "ar";
+
+  const error = useSelector((state) => state.error.tools);
+  const errorNetwork = useSelector((state) => state.error.network);
+
+  const cookiesUsage = useSelector((state) => state.cookies);
+
+  const role = useSelector((state) => state.userSession.user.roles);
+
+  const toolsAllowedForRole = tools.filter((tool) => {
+    if (
+      !tool.rolesNeeded ||
+      tool.rolesNeeded.length === 0 ||
+      tool.rolesNeeded.includes(TOOL_STATUS_ICON.LOCK)
+    )
+      return true;
+    else if (tool.rolesNeeded.some((restriction) => role.includes(restriction)))
+      return true;
+    else return false;
+  });
+
+  const themeFab = createTheme({
+    palette: {
+      primary: {
+        light: "#00926c",
+        main: "#00926c",
+        dark: "#00926c",
+        contrastText: "#fff",
+      },
+    },
+    components: {
+      MuiAppBar: {
+        styleOverrides: {
+          colorPrimary: {
+            backgroundColor: "#ffffff",
+          },
+          root: {
+            zIndex: 1300,
+            height: "87px",
+            boxShadow: "none",
+            paddingTop: "12px",
+          },
+        },
+      },
+      MuiListItem: {
+        styleOverrides: {
+          gutters: {
+            paddingLeft: "26px",
+          },
+        },
+      },
+      MuiAutocomplete: {
+        styleOverrides: {
+          popupIndicatorOpen: {
+            transform: "none!important",
+          },
+          popper: {
+            zIndex: 99999,
+          },
+        },
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            borderRadius: "10px!important",
+          },
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            padding: 0,
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            minWidth: "160px",
+          },
+        },
+      },
+    },
+  });
+
+  return (
+    <main className={classes.content}>
+      <div className={classes.toolbar} id="back-to-top-anchor" />
+      <MainContentMenuTopMenuItems
+        className={classes.noMargin}
+        topMenuItems={TOP_MENU_ITEMS}
+        tools={toolsAllowedForRole}
+      />
+      <ScrollTop
+        {...{ isCurrentLanguageLeftToRight: isCurrentLanguageLeftToRight }}
+      >
+        <ThemeProvider theme={themeFab}>
+          <Fab
+            color="primary"
+            size="large"
+            aria-label="scroll back to top"
+            className={classes.fabTop}
+          >
+            <KeyboardArrowUp />
+          </Fab>
+        </ThemeProvider>
+      </ScrollTop>
+      {error !== null && (
+        <MySnackbar
+          variant="error"
+          message={error}
+          onClick={() => dispatch(cleanError())}
+          onClose={() => {}}
+          sx={{ mr: 8 }}
+        />
+      )}
+      {errorNetwork !== null && (
+        <MySnackbar
+          variant="error"
+          message={errorNetwork}
+          onClick={() => dispatch(cleanErrorNetwork())}
+          onClose={() => {}}
+          sx={{ mr: 8 }}
+        />
+      )}
+      {cookiesUsage.active === null && (
+        <Snackbar
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "center",
+          }}
+          open={true}
+          message={keyword("cookies_message")}
+          action={[
+            <Button
+              key={"cookies_decline"}
+              color={"secondary"}
+              size={"small"}
+              onClick={() => dispatch(setFalse())}
+            >
+              {" "}
+              {keyword("cookies_decline")}{" "}
+            </Button>,
+            <Button
+              key={"cookies_accept"}
+              color={"primary"}
+              size={"small"}
+              onClick={() => dispatch(setTrue())}
+            >
+              {" "}
+              {keyword("cookies_accept")}{" "}
+            </Button>,
+          ]}
+        />
+      )}
+      <Feedback />
+    </main>
+  );
+};
+
+export default MainContent;
diff --git a/src/components/NavBar/DrawerItem/DrawerItem.jsx b/src/components/NavBar/DrawerItem/DrawerItem.jsx
index 9bd7eece7..c0b9bea9d 100644
--- a/src/components/NavBar/DrawerItem/DrawerItem.jsx
+++ b/src/components/NavBar/DrawerItem/DrawerItem.jsx
@@ -1,164 +1,45 @@
 import React, { useEffect } from "react";
-import PropTypes from "prop-types";
 import { Container } from "@mui/material";
 import Fade from "@mui/material/Fade";
 import { useDispatch, useSelector } from "react-redux";
-import { selectTool } from "../../../redux/reducers/tools/toolReducer";
-import MainContentMenu from "../../NavItems/tools/Alltools/MainContentMenu";
-import Analysis from "../../NavItems/tools/Analysis/Analysis";
-import Keyframes from "../../NavItems/tools/Keyframes/Keyframes";
-import Thumbnails from "../../NavItems/tools/Thumbnails/Thumbnails";
-import TwitterAdvancedSearch from "../../NavItems/tools/TwitterAdvancedSearch/TwitterAdvancedSearch";
-import Magnifier from "../../NavItems/tools/Magnifier/Magnifier";
-import Metadata from "../../NavItems/tools/Metadata/Metadata";
-import VideoRights from "../../NavItems/tools/VideoRights/VideoRights";
-import Forensic from "../../NavItems/tools/Forensic/Forensic";
 import { Route, Routes, useLocation } from "react-router-dom";
-import { Footer, FOOTER_TYPES } from "../../Shared/Footer/Footer";
-import TwitterSna from "../../NavItems/tools/TwitterSna/TwitterSna";
-import OCR from "../../NavItems/tools/OCR/OCR";
-import CheckGif from "../../NavItems/tools/Gif/CheckGif";
-import DeepfakeImage from "../../NavItems/tools/Deepfake/DeepfakeImage";
-import DeepfakeVideo from "../../NavItems/tools/Deepfake/DeepfakeVideo";
-import SyntheticImageDetection from "../../NavItems/tools/SyntheticImageDetection";
-import Geolocation from "../../NavItems/tools/Geolocation/Geolocation";
 import useMyStyles from "../../Shared/MaterialUiStyles/useMyStyles";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
-import AnalysisImg from "../../NavItems/tools/Analysis_images/Analysis";
 import { getclientId } from "../../Shared/GoogleAnalytics/MatomoAnalytics";
 import { useTrackPageView } from "../../../Hooks/useAnalytics";
-import Archive from "../../NavItems/tools/Archive";
-import SemanticSearch from "../../NavItems/tools/SemanticSearch";
-import Loccus from "../../NavItems/tools/Loccus";
-
-const DrawerItem = ({ toolsList }) => {
-  const drawerItemsContent = [
-    {
-      content: <MainContentMenu tools={toolsList} />,
-      footer: <div />,
-    },
-    {
-      content: <Analysis />,
-      footer: <Footer type={FOOTER_TYPES.ITI} />,
-    },
-    {
-      content: <Keyframes />,
-      footer: <Footer type={FOOTER_TYPES.ITI} />,
-    },
-    {
-      content: <Thumbnails />,
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-    },
-    {
-      content: <VideoRights />,
-      footer: <Footer type={FOOTER_TYPES.GRIHO} />,
-    },
-    {
-      content: <Metadata mediaType={"video"} />,
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-    },
-    {
-      content: <DeepfakeVideo />,
-      footer: <Footer type={FOOTER_TYPES.ITI} />,
-    },
-    {
-      content: <AnalysisImg />,
-      footer: <Footer type={FOOTER_TYPES.ITI} />,
-    },
-    {
-      content: <Magnifier />,
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-    },
-    {
-      content: <Metadata mediaType={"image"} />,
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-    },
-
-    {
-      content: <Forensic />,
-      footer: <Footer type={FOOTER_TYPES.ITI_BORELLI_AFP} />,
-    },
-    {
-      content: <OCR />,
-      footer: <Footer type={FOOTER_TYPES.USFD} />,
-    },
-    {
-      content: <CheckGif />,
-      footer: <Footer type={FOOTER_TYPES.BORELLI_AFP} />,
-    },
-    {
-      content: <SyntheticImageDetection />,
-      footer: <Footer type={FOOTER_TYPES.ITI_UNINA} />,
-    },
-    {
-      content: <DeepfakeImage />,
-      footer: <Footer type={FOOTER_TYPES.ITI} />,
-    },
-    {
-      content: <Geolocation />,
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-    },
-    {
-      content: <Loccus />,
-      footer: <Footer type={FOOTER_TYPES.LOCCUS} />,
-    },
-    {
-      content: <TwitterAdvancedSearch />,
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-    },
-    {
-      content: <SemanticSearch />,
-      footer: <Footer type={FOOTER_TYPES.KINIT} />,
-    },
-    {
-      content: <TwitterSna />,
-      footer: <Footer type={FOOTER_TYPES.USFD_AFP_EU_DISINFOLAB} />,
-    },
-    {
-      content: <Archive />,
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-    },
-  ];
+import { selectTopMenuItem } from "../../../redux/reducers/navReducer";
+import { TOP_MENU_ITEMS } from "../../../constants/topMenuItems";
+import { selectTool } from "../../../redux/reducers/tools/toolReducer";
+import { TOOL_GROUPS, toolsHome } from "../../../constants/tools";
 
+/**
+ *
+ * @param toolsList {Tool[]}
+ * @returns {Element}
+ */
+const DrawerItem = ({ tools }) => {
   return (
     <Routes>
-      <Route
-        path={"*"}
-        element={
-          <DrawerItemContent index={0} drawContent={drawerItemsContent} />
-        }
-      />
-      {toolsList.map((item) => {
-        let index = item.id - 1;
-        if (item.path) {
+      {tools.map((tool, index) => {
+        if (tool.path === toolsHome.path) {
           return (
-            <Route path={item.path} key={index}>
-              <Route
-                index
-                element={
-                  <DrawerItemContent
-                    index={index}
-                    drawContent={drawerItemsContent}
-                  />
-                }
-              />
+            <Route
+              path={"*"}
+              key={index}
+              element={<DrawerItemContent tool={tool} />}
+            />
+          );
+        } else if (tool.path) {
+          return (
+            <Route path={tool.path} key={index}>
+              <Route index element={<DrawerItemContent tool={tool} />} />
               <Route
                 path={":url"}
-                element={
-                  <DrawerItemContent
-                    index={index}
-                    drawContent={drawerItemsContent}
-                  />
-                }
+                element={<DrawerItemContent tool={tool} />}
               />
               <Route
                 path={":url/:type"}
-                element={
-                  <DrawerItemContent
-                    index={index}
-                    drawContent={drawerItemsContent}
-                  />
-                }
+                element={<DrawerItemContent tool={tool} />}
               />
             </Route>
           );
@@ -168,7 +49,7 @@ const DrawerItem = ({ toolsList }) => {
     </Routes>
   );
 };
-const DrawerItemContent = ({ index, drawContent }) => {
+const DrawerItemContent = ({ tool }) => {
   const dispatch = useDispatch();
 
   //Style elements
@@ -221,19 +102,34 @@ const DrawerItemContent = ({ index, drawContent }) => {
 
   const session = useSelector((state) => state.userSession);
   const uid = session && session.user ? session.user.id : null;
-  useTrackPageView(path, client_id, uid, index);
+
+  const handleToolChange = (tool) => {
+    if (tool.toolGroup === TOOL_GROUPS.VERIFICATION)
+      dispatch(selectTopMenuItem(TOP_MENU_ITEMS[0].title));
+
+    if (tool.toolGroup === TOOL_GROUPS.MORE)
+      dispatch(selectTopMenuItem(TOP_MENU_ITEMS[5].title));
+
+    dispatch(selectTool(tool.titleKeyword));
+  };
+
+  useTrackPageView(path, client_id, uid, tool);
   useEffect(() => {
     //trackPageView(path, client_id, uid);
-    dispatch(selectTool(index));
-  }, [index]);
+    handleToolChange(tool);
+  }, [tool]);
 
   return (
-    <Container key={index} className={classes.noMargin} maxWidth={false}>
+    <Container
+      key={tool.titleKeyword}
+      className={classes.noMargin}
+      maxWidth={false}
+    >
       <Fade in={true}>
         <div>
           <ThemeProvider theme={theme}>
-            {drawContent[index].content}
-            {drawContent[index].footer}
+            {tool.content}
+            {tool.footer}
           </ThemeProvider>
         </div>
       </Fade>
@@ -241,13 +137,4 @@ const DrawerItemContent = ({ index, drawContent }) => {
   );
 };
 
-DrawerItem.propTypes = {
-  toolsList: PropTypes.any,
-};
-
-DrawerItemContent.propTypes = {
-  drawContent: PropTypes.array.isRequired,
-  index: PropTypes.number.isRequired,
-};
-
 export default DrawerItem;
diff --git a/src/components/NavBar/MainContentMenuTabItems/MainContentMenuTabItems.jsx b/src/components/NavBar/MainContentMenuTabItems/MainContentMenuTopMenuItems.jsx
similarity index 51%
rename from src/components/NavBar/MainContentMenuTabItems/MainContentMenuTabItems.jsx
rename to src/components/NavBar/MainContentMenuTabItems/MainContentMenuTopMenuItems.jsx
index 90c94994d..b87c00544 100644
--- a/src/components/NavBar/MainContentMenuTabItems/MainContentMenuTabItems.jsx
+++ b/src/components/NavBar/MainContentMenuTabItems/MainContentMenuTopMenuItems.jsx
@@ -4,32 +4,35 @@ import Fade from "@mui/material/Fade";
 import React, { useEffect } from "react";
 import DrawerItem from "../DrawerItem/DrawerItem";
 import { useDispatch, useSelector } from "react-redux";
-import { selectPage } from "../../../redux/reducers/navReducer";
 import { useTrackPageView } from "../../../Hooks/useAnalytics";
+import { toolsHome } from "../../../constants/tools";
+import { TOP_MENU_ITEMS } from "../../../constants/topMenuItems";
+import { selectTopMenuItem } from "../../../redux/reducers/navReducer";
 
 /**
- * Represents the group of tools to display and their tabs in the MainContentMenu
+ * Represents the group of tools to display and their tabs in the ToolsMenu
  *
- * @param tabItems An array with the list of tools categories
- * @param toolsList {[]} An array with the list of tools
+ * @param topMenuItems An array with the list of top menu items
+ * @param tools {Tool[]} An array with the list of tools
  * @returns {React.JSX.Element|null}
  *
  */
-const MainContentMenuTabItems = ({ tabItems, toolsList }) => {
-  if (!tabItems || tabItems.length === 0) return null;
+const MainContentMenuTopMenuItems = ({ topMenuItems, tools }) => {
+  if (!topMenuItems || topMenuItems.length === 0) return null;
+
   return (
     <Routes>
-      {tabItems.map((item, index) => {
+      {topMenuItems.map((topMenuItem, index) => {
         return (
           <Route
             key={index}
-            path={item.path + "/*"}
+            path={topMenuItem.path + "/*"}
             element={
               <TabContent
                 index={index}
-                path={item.path}
-                tabItems={tabItems}
-                toolsList={toolsList}
+                topMenuItem={topMenuItem}
+                topMenuItems={topMenuItems}
+                tools={tools}
               />
             }
           />
@@ -39,37 +42,45 @@ const MainContentMenuTabItems = ({ tabItems, toolsList }) => {
   );
 };
 
-const TabContent = ({ index, path, toolsList, tabItems }) => {
-  //console.log("path .... ", path);
+const TabContent = ({ index, topMenuItem, tools, topMenuItems }) => {
   const dispatch = useDispatch();
+
   useEffect(() => {
-    dispatch(selectPage(index));
-  }, [index]);
+    const topMenuItemSelected = TOP_MENU_ITEMS.find(
+      (t) => t.title === topMenuItem.title,
+    );
+
+    dispatch(selectTopMenuItem(topMenuItemSelected.title));
+  }, []);
 
-  switch (path) {
-    case "tools":
-      return <DrawerItem toolsList={toolsList} />;
+  switch (topMenuItem.path) {
+    case toolsHome.path:
+      return <DrawerItem tools={tools} />;
     case "assistant":
       return (
         <Routes>
           <Route path={"*"}>
             <Route
               index
-              element={<ContentContainer tabItems={tabItems} index={index} />}
+              element={
+                <ContentContainer topMenuItems={topMenuItems} index={index} />
+              }
             />
             <Route
               path={":url"}
-              element={<ContentContainer tabItems={tabItems} index={index} />}
+              element={
+                <ContentContainer topMenuItems={topMenuItems} index={index} />
+              }
             />
           </Route>
         </Routes>
       );
     default:
-      return <ContentContainer tabItems={tabItems} index={index} />;
+      return <ContentContainer topMenuItems={topMenuItems} index={index} />;
   }
 };
 
-const ContentContainer = ({ tabItems, index }) => {
+const ContentContainer = ({ topMenuItems, index }) => {
   let path = useLocation();
   // const cookies = useSelector((state) => state.cookies);
   // const clientId = cookies !== null ? cookies.id : null;
@@ -87,12 +98,12 @@ const ContentContainer = ({ tabItems, index }) => {
     <Container key={index}>
       <Fade in={true}>
         <div>
-          {tabItems[index].content}
-          {tabItems[index].footer}
+          {topMenuItems[index].content}
+          {topMenuItems[index].footer}
         </div>
       </Fade>
     </Container>
   );
 };
 
-export default MainContentMenuTabItems;
+export default MainContentMenuTopMenuItems;
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
deleted file mode 100644
index 12f19a3f5..000000000
--- a/src/components/NavBar/NavBar.jsx
+++ /dev/null
@@ -1,1953 +0,0 @@
-import React, { createRef, memo, useEffect, useState } from "react";
-
-import { useDispatch, useSelector } from "react-redux";
-import Languages from "../NavItems/languages/languages";
-import Tutorial from "../NavItems/tutorial/tutorial";
-import clsx from "clsx";
-
-import {
-  Alert,
-  AppBar,
-  Box,
-  Button,
-  Collapse,
-  Divider,
-  Drawer,
-  Fab,
-  Grid,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  ListSubheader,
-  Snackbar,
-  Stack,
-  SvgIcon,
-  Tab,
-  Tabs,
-  Toolbar,
-  Typography,
-} from "@mui/material";
-
-import {
-  Archive,
-  AudioFile,
-  Audiotrack,
-  ChevronLeft,
-  ChevronRight,
-  ExpandLess,
-  ExpandMore,
-  Gradient,
-  KeyboardArrowUp,
-  ManageSearch,
-  MoreHoriz,
-} from "@mui/icons-material";
-
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-
-import ScrollTop from "../Shared/ScrollTop/ScrollTop";
-import { cleanError, cleanErrorNetwork } from "redux/reducers/errorReducer";
-import MainContentMenuTabItems from "./MainContentMenuTabItems/MainContentMenuTabItems";
-import ClassRoom from "../NavItems/ClassRoom/ClassRoom";
-import Interactive from "../NavItems/Interactive/Interactive";
-import About from "../NavItems/About/About";
-import Assistant from "../NavItems/Assistant/Assistant";
-import MySnackbar from "../MySnackbar/MySnackbar";
-import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles";
-import { Footer, FOOTER_TYPES } from "../Shared/Footer/Footer";
-import Feedback from "../Feedback/Feedback";
-
-import AnalysisIcon from "./images/SVG/Video/Video_analysis.svg";
-import KeyframesIcon from "./images/SVG/Video/Keyframes.svg";
-import ThumbnailsIcon from "./images/SVG/Video/Thumbnails.svg";
-import VideoRightsIcon from "./images/SVG/Video/Video_rights.svg";
-
-import MetadataIcon from "./images/SVG/Image/Metadata.svg";
-import MagnifierIcon from "./images/SVG/Image/Magnifier.svg";
-import ForensicIcon from "./images/SVG/Image/Forensic.svg";
-import GifIcon from "./images/SVG/Image/Gif.svg";
-import OcrIcon from "./images/SVG/Image/OCR.svg";
-
-import AnalysisIconImage from "./images/SVG/Image/Image_analysis.svg";
-
-import TwitterSearchIcon from "./images/SVG/Search/Twitter_search.svg";
-import CovidSearchIcon from "./images/SVG/Search/Covid19.svg";
-import XnetworkIcon from "./images/SVG/Search/Xnetwork.svg";
-
-import TwitterSnaIcon from "./images/SVG/DataAnalysis/Twitter_sna.svg";
-import CsvSnaIcon from "./images/SVG/DataAnalysis/CSV_SNA.svg";
-import DeepfakeIcon from "./images/SVG/Image/Deepfake.svg";
-import GeolocationIcon from "./images/SVG/Image/Geolocation.svg";
-
-import ToolsIcon from "./images/SVG/Navbar/Tools.svg";
-import ClassroomIcon from "./images/SVG/Navbar/Classroom.svg";
-import InteractiveIcon from "./images/SVG/Navbar/Interactive.svg";
-
-import AboutIcon from "./images/SVG/Navbar/About.svg";
-import AssistantIcon from "./images/SVG/Navbar/Assistant.svg";
-import GuideIcon from "./images/SVG/Navbar/Guide.svg";
-
-import LogoVera from "./images/SVG/Navbar/vera-logo_black.svg";
-import LogoInVidWeverify from "./images/SVG/Navbar/invid_weverify.svg";
-
-import LogoEuCom from "./images/SVG/Navbar/ep-logo.svg";
-
-import VideoIcon from "./images/SVG/Video/Video.svg";
-import ImageIcon from "./images/SVG/Image/Images.svg";
-import SearchIcon from "./images/SVG/Search/Search.svg";
-import DataIcon from "./images/SVG/DataAnalysis/Data_analysis.svg";
-
-import { getSupportedBrowserLanguage } from "../Shared/Languages/getSupportedBrowserLanguage";
-
-import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
-
-import { setFalse, setTrue } from "../../redux/reducers/cookiesReducers";
-import { changeLanguage } from "../../redux/reducers/languageReducer";
-
-import { Link, useNavigate } from "react-router-dom";
-import AdvancedTools from "../NavItems/tools/Alltools/AdvancedTools/AdvancedTools";
-
-function a11yProps(index) {
-  return {
-    id: `scrollable-force-tab-${index}`,
-    "aria-controls": `scrollable-force-tabpanel-${index}`,
-  };
-}
-export const TOOLS_CATEGORIES = {
-  VIDEO: "navbar_category_video",
-  IMAGE: "navbar_category_image",
-  AUDIO: "navbar_category_audio",
-  SEARCH: "navbar_category_search",
-  DATA_ANALYSIS: "navbar_category_data",
-  OTHER: "navbar_category_other",
-
-  // Used to display the home page
-  ALL: "navbar_category_general",
-};
-
-const NavBar = () => {
-  const classes = useMyStyles();
-  const navigate = useNavigate();
-  const [isSideMenuOpen, setIsSideMenuOpen] = useState(true);
-  const [classWidthToolbar, setClassWidthToolbar] = useState(
-    classes.drawerWidth,
-  );
-  const LOGO_EU = process.env.REACT_APP_LOGO_EU;
-  const topMenuItemSelectedId = useSelector((state) => state.nav);
-
-  const sideMenuItemSelectedId = useSelector((state) => state.tool.selected);
-  const cookiesUsage = useSelector((state) => state.cookies);
-  const currentLang = useSelector((state) => state.language);
-  const defaultLanguage = useSelector((state) => state.defaultLanguage);
-  const isCurrentLanguageLeftToRight = currentLang !== "ar";
-  const dispatch = useDispatch();
-
-  const drawerRef = createRef();
-
-  // Set UI dicrection based on language reading direction
-  const direction = currentLang !== "ar" ? "ltr" : "rtl";
-
-  const handleTopMenuChange = (event, newValue) => {
-    let path = sideMenuItems[newValue].path;
-
-    if (topMenuItems[newValue].path === "tools") navigate("/app/tools/" + path);
-    //history.push("/app/tools/" + path);
-    else navigate("/app/" + topMenuItems[newValue].path);
-    //history.push("/app/" + topMenuItems[newValue].path)
-  };
-
-  const [openAlert, setOpenAlert] = useState(false);
-
-  const handleCloseAlert = (event, reason) => {
-    if (reason === "clickaway") {
-      return;
-    }
-    setOpenAlert(false);
-  };
-
-  const userAuthenticated = useSelector(
-    (state) => state.userSession && state.userSession.userAuthenticated,
-  );
-
-  const changeValue = (newValue, newValueType) => {
-    if (newValueType === "TOOL") {
-      if (
-        newValue.toolRestrictions !== undefined &&
-        newValue.toolRestrictions.includes(TOOL_STATUS_ICON.LOCK)
-      ) {
-        if (userAuthenticated) {
-          navigate("/app/tools/" + newValue.path);
-        } else {
-          setOpenAlert(true);
-        }
-      } else {
-        if (
-          newValue.path === "csvSna" ||
-          newValue.path === "factcheck" ||
-          newValue.path === "xnetwork"
-        )
-          window.open(
-            process.env.REACT_APP_TSNA_SERVER +
-              newValue.path +
-              "?lang=" +
-              currentLang,
-            "_blank",
-          );
-        else {
-          navigate("/app/tools/" + newValue.path);
-        }
-      }
-    } else if (newValueType === "OTHER") {
-      navigate("/app/" + newValue.path);
-      //history.push("/app/" + newValue.path)
-    }
-  };
-
-  const error = useSelector((state) => state.error.tools);
-  const errorNetwork = useSelector((state) => state.error.network);
-  const tWarning = i18nLoadNamespace("components/Shared/OnWarningInfo");
-  const keyword = i18nLoadNamespace("components/NavBar");
-
-  const toggleSideMenu = () => {
-    setIsSideMenuOpen(!isSideMenuOpen);
-
-    if (classWidthToolbar === classes.drawerWidth) {
-      setClassWidthToolbar(classes.drawerWidthClose);
-      setTimeout(function () {}, 194);
-    } else {
-      setClassWidthToolbar(classes.drawerWidth);
-    }
-  };
-
-  const role = useSelector((state) => state.userSession.user.roles);
-  const betaTester = role.includes("BETA_TESTER");
-
-  /**
-   * Represents the categories to which the tools belong
-   *
-   */
-
-  /**
-   * Represents the possible temporary states of the tools:
-   * - An experimental tool is not ready for production, and available to beta testers
-   * - A new tool is an experimental tool that was released to everyone
-   * - A locked tool is a tool available to registered users
-   * @type {{NEW: string, LOCK: string, EXPERIMENTAL: string}}
-   */
-  const TOOL_STATUS_ICON = {
-    EXPERIMENTAL: "experimental",
-    NEW: "new",
-    LOCK: "lock",
-  };
-
-  /**
-   * Represents the user roles that can be needed to access a given tool
-   * @type {{BETA_TESTER: string, ARCHIVE: string, LOCK: string}}
-   */
-  const TOOL_RESTRICTIONS = {
-    ARCHIVE: "ARCHIVE",
-    BETA_TESTER: "BETA_TESTER",
-    LOCK: "lock",
-  };
-
-  const sideMenuItems = [
-    {
-      id: 1,
-      title: "navbar_tools",
-      icon: (
-        <SvgIcon
-          component={ToolsIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 0
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      path: "all",
-      type: TOOLS_CATEGORIES.ALL,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-
-    {
-      id: 2,
-      title: "navbar_analysis_video",
-      description: "navbar_analysis_description",
-      icon: (
-        <SvgIcon
-          component={AnalysisIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 1
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <AnalysisIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_analysis_video")}
-        />
-      ),
-      path: "analysis",
-      type: TOOLS_CATEGORIES.VIDEO,
-      icons: [],
-      toolRestrictions: [],
-    },
-    {
-      id: 3,
-      title: "navbar_keyframes",
-      description: "navbar_keyframes_description",
-      icon: (
-        <SvgIcon
-          component={KeyframesIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 2
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <KeyframesIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_keyframes")}
-        />
-      ),
-
-      path: "keyframes",
-      type: TOOLS_CATEGORIES.VIDEO,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-    {
-      id: 4,
-      title: "navbar_thumbnails",
-      description: "navbar_thumbnails_description",
-      icon: (
-        <SvgIcon
-          component={ThumbnailsIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 3
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <ThumbnailsIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_thumbnails")}
-        />
-      ),
-
-      path: "thumbnails",
-      type: TOOLS_CATEGORIES.VIDEO,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-    {
-      id: 5,
-      title: "navbar_rights",
-      description: "navbar_rights_description",
-      icon: (
-        <SvgIcon
-          component={VideoRightsIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 4
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <VideoRightsIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_rights")}
-        />
-      ),
-
-      path: "copyright",
-      type: TOOLS_CATEGORIES.VIDEO,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-
-    {
-      id: 6,
-      title: "navbar_metadata",
-      description: "navbar_metadata_description",
-      icon: (
-        <SvgIcon
-          component={MetadataIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 5
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <MetadataIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_metadata")}
-        />
-      ),
-
-      path: "metadata",
-      type: TOOLS_CATEGORIES.VIDEO,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-
-    {
-      id: 7,
-      title: "navbar_deepfake_video",
-      description: "navbar_deepfake_video_description",
-      icon: (
-        <SvgIcon
-          component={DeepfakeIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 6
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <DeepfakeIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_deepfake_video")}
-        />
-      ),
-
-      path: "deepfakeVideo",
-      type: TOOLS_CATEGORIES.VIDEO,
-
-      icons: [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK],
-      toolRestrictions: [TOOL_RESTRICTIONS.BETA_TESTER],
-    },
-
-    {
-      id: 8,
-      title: "navbar_analysis_image",
-      description: "navbar_analysis_image_description",
-      icon: (
-        <SvgIcon
-          component={AnalysisIconImage}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 7
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-
-      iconColored: (
-        <AnalysisIconImage
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_analysis_image")}
-        />
-      ),
-
-      path: "analysisImage",
-      type: TOOLS_CATEGORIES.IMAGE,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-    {
-      id: 9,
-      title: "navbar_magnifier",
-      description: "navbar_magnifier_description",
-      icon: (
-        <SvgIcon
-          component={MagnifierIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 8
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-
-      iconColored: (
-        <MagnifierIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_magnifier")}
-        />
-      ),
-
-      path: "magnifier",
-      type: TOOLS_CATEGORIES.IMAGE,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-    {
-      id: 10,
-      title: "navbar_metadata",
-      description: "navbar_metadata_description",
-      icon: (
-        <SvgIcon
-          component={MetadataIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 9
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-
-      iconColored: (
-        <MetadataIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_metadata")}
-        />
-      ),
-
-      path: "metadata_image",
-      type: TOOLS_CATEGORIES.IMAGE,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-
-    {
-      id: 11,
-      title: "navbar_forensic",
-      description: "navbar_forensic_description",
-      icon: (
-        <SvgIcon
-          component={ForensicIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 10
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <ForensicIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_forensic")}
-        />
-      ),
-
-      path: "forensic",
-      type: TOOLS_CATEGORIES.IMAGE,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-    {
-      id: 12,
-      title: "navbar_ocr",
-      description: "navbar_ocr_description",
-      icon: (
-        <SvgIcon
-          component={OcrIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 11
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <OcrIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_ocr")}
-        />
-      ),
-
-      path: "ocr",
-      type: TOOLS_CATEGORIES.IMAGE,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-
-    {
-      id: 13,
-      title: "navbar_gif",
-      description: "navbar_gif_description",
-      icon: (
-        <SvgIcon
-          component={GifIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 12
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <GifIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_gif")}
-        />
-      ),
-
-      path: "gif",
-      type: TOOLS_CATEGORIES.IMAGE,
-
-      icons: [TOOL_STATUS_ICON.LOCK],
-      toolRestrictions: [TOOL_RESTRICTIONS.LOCK],
-    },
-    {
-      id: 14,
-      title: "navbar_synthetic_image_detection",
-      description: "navbar_synthetic_image_detection_description",
-      icon: (
-        <Gradient
-          style={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 13
-                ? "#00926c"
-                : "#4c4c4c",
-          }}
-        />
-      ),
-      iconColored: <Gradient style={{ fill: "#00926c" }} />,
-
-      path: "syntheticImageDetection",
-      type: TOOLS_CATEGORIES.IMAGE,
-
-      icons: [
-        TOOL_STATUS_ICON.NEW,
-        TOOL_STATUS_ICON.EXPERIMENTAL,
-        TOOL_STATUS_ICON.LOCK,
-      ],
-      toolRestrictions: [TOOL_RESTRICTIONS.BETA_TESTER],
-    },
-    {
-      id: 15,
-      title: "navbar_deepfake_image",
-      description: "navbar_deepfake_image_description",
-      icon: (
-        <SvgIcon
-          component={DeepfakeIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 14
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <DeepfakeIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_deepfake_image")}
-        />
-      ),
-
-      path: "deepfakeImage",
-      type: TOOLS_CATEGORIES.IMAGE,
-
-      icons: [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK],
-      toolRestrictions: [TOOL_RESTRICTIONS.BETA_TESTER],
-    },
-    {
-      id: 16,
-      title: "navbar_geolocation",
-      description: "navbar_geolocation_description",
-      icon: (
-        <SvgIcon
-          component={GeolocationIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 15
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <GeolocationIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_geolocation")}
-        />
-      ),
-
-      path: "geolocation",
-      type: TOOLS_CATEGORIES.IMAGE,
-
-      icons: [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK],
-      toolRestrictions: [TOOL_RESTRICTIONS.BETA_TESTER],
-    },
-    {
-      id: 17,
-      title: "navbar_loccus",
-      description: "navbar_loccus_description",
-      icon: (
-        <AudioFile
-          style={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 16
-                ? "#00926c"
-                : "#4c4c4c",
-          }}
-          title={keyword("navbar_loccus")}
-        />
-      ),
-      iconColored: (
-        <AudioFile
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_loccus")}
-        />
-      ),
-
-      path: "loccus",
-      type: TOOLS_CATEGORIES.AUDIO,
-
-      icons: [
-        TOOL_STATUS_ICON.NEW,
-        TOOL_STATUS_ICON.EXPERIMENTAL,
-        TOOL_STATUS_ICON.LOCK,
-      ],
-      toolRestrictions: [TOOL_RESTRICTIONS.BETA_TESTER],
-    },
-
-    {
-      id: 18,
-      title: "navbar_twitter",
-      description: "navbar_twitter_description",
-      icon: (
-        <SvgIcon
-          component={TwitterSearchIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 17
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-
-      iconColored: (
-        <TwitterSearchIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_twitter")}
-        />
-      ),
-
-      path: "twitter",
-      type: TOOLS_CATEGORIES.SEARCH,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-    {
-      id: 19,
-      title: "navbar_semantic_search",
-      description: "navbar_semantic_search_description",
-      icon: (
-        <ManageSearch
-          style={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 18
-                ? "#00926c"
-                : "#4c4c4c",
-          }}
-          title={keyword("navbar_semantic_search")}
-        />
-      ),
-      iconColored: (
-        <ManageSearch
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_semantic_search")}
-        />
-      ),
-
-      path: "semanticSearch",
-      type: TOOLS_CATEGORIES.SEARCH,
-
-      icons: [
-        TOOL_STATUS_ICON.EXPERIMENTAL,
-        TOOL_STATUS_ICON.NEW,
-        TOOL_STATUS_ICON.LOCK,
-      ],
-      toolRestrictions: [TOOL_RESTRICTIONS.LOCK],
-    },
-    {
-      id: 20,
-      title: "navbar_twitter_sna",
-      description: "navbar_twitter_sna_description",
-      icon: (
-        <SvgIcon
-          component={TwitterSnaIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 19
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <TwitterSnaIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_twitter_sna")}
-        />
-      ),
-
-      path: "twitterSna",
-      type: TOOLS_CATEGORIES.DATA_ANALYSIS,
-
-      icons: [TOOL_STATUS_ICON.LOCK],
-      toolRestrictions: [TOOL_RESTRICTIONS.LOCK],
-    },
-    {
-      id: 21,
-      title: "navbar_archiving",
-      description: "navbar_archiving_description",
-      icon: (
-        <Archive
-          style={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 20
-                ? "#00926c"
-                : "#4c4c4c",
-          }}
-        />
-      ),
-
-      iconColored: <Archive style={{ fill: "#00926c" }} />,
-
-      path: "archive",
-      type: TOOLS_CATEGORIES.OTHER,
-
-      icons: [
-        TOOL_STATUS_ICON.EXPERIMENTAL,
-        TOOL_STATUS_ICON.NEW,
-        TOOL_STATUS_ICON.LOCK,
-      ],
-      toolRestrictions: [TOOL_RESTRICTIONS.ARCHIVE],
-    },
-    {
-      id: 22,
-      title: "navbar_twitter_crowdtangle",
-      description: "navbar_twitter_crowdtangle_description",
-      icon: (
-        <SvgIcon
-          component={CsvSnaIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 21
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <CsvSnaIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_twitter_crowdtangle")}
-        />
-      ),
-
-      path: "csvSna",
-      type: TOOLS_CATEGORIES.DATA_ANALYSIS,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-    {
-      id: 23,
-      title: "navbar_covidsearch",
-      description: "navbar_covidsearch_description",
-      icon: (
-        <SvgIcon
-          component={CovidSearchIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 22
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <CovidSearchIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_covidsearch")}
-        />
-      ),
-
-      path: "factcheck",
-      type: TOOLS_CATEGORIES.SEARCH,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-    {
-      id: 24,
-      title: "navbar_xnetwork",
-      description: "navbar_xnetwork_description",
-      icon: (
-        <SvgIcon
-          component={XnetworkIcon}
-          sx={{
-            fill:
-              topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 23
-                ? "#00926c"
-                : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      iconColored: (
-        <XnetworkIcon
-          width="45px"
-          height="45px"
-          style={{ fill: "#00926c" }}
-          title={keyword("navbar_xnetwork")}
-        />
-      ),
-
-      path: "xnetwork",
-      type: TOOLS_CATEGORIES.SEARCH,
-
-      icons: [],
-      toolRestrictions: [],
-    },
-  ];
-
-  const topMenuItems = [
-    {
-      title: "navbar_tools",
-      icon: (
-        <SvgIcon
-          component={ToolsIcon}
-          sx={{
-            fill: topMenuItemSelectedId === 0 ? "#00926c" : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      content: <Box />,
-      path: "tools",
-      footer: <Box />,
-      typeTab: "verification",
-      type: TOOLS_CATEGORIES.ALL,
-    },
-    {
-      title: "navbar_assistant",
-      icon: (
-        <SvgIcon
-          component={AssistantIcon}
-          sx={{
-            fill: topMenuItemSelectedId === 1 ? "#00926c" : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-
-      content: <Assistant />,
-      path: "assistant",
-      footer: <Footer type={FOOTER_TYPES.USFD} />,
-      typeTab: "verification",
-      type: TOOLS_CATEGORIES.ALL,
-    },
-    {
-      title: "navbar_tuto",
-      icon: (
-        <SvgIcon
-          component={GuideIcon}
-          sx={{
-            fill: topMenuItemSelectedId === 2 ? "#00926c" : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      content: <Tutorial />,
-      path: "tutorial",
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-      typeTab: "learning",
-      type: TOOLS_CATEGORIES.ALL,
-    },
-    {
-      title: "navbar_quiz",
-      icon: (
-        <SvgIcon
-          component={InteractiveIcon}
-          sx={{
-            fill: topMenuItemSelectedId === 3 ? "#00926c" : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      content: <Interactive />,
-      path: "interactive",
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-      typeTab: "learning",
-      type: TOOLS_CATEGORIES.ALL,
-    },
-    {
-      title: "navbar_classroom",
-      icon: (
-        <SvgIcon
-          component={ClassroomIcon}
-          sx={{
-            fill: topMenuItemSelectedId === 4 ? "#00926c" : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      content: <ClassRoom />,
-      path: "classroom",
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-      typeTab: "learning",
-      type: TOOLS_CATEGORIES.ALL,
-    },
-    {
-      title: "navbar_about",
-      icon: (
-        <SvgIcon
-          component={AboutIcon}
-          sx={{
-            fill: topMenuItemSelectedId === 5 ? "#00926c" : "#4c4c4c",
-            fontSize: "24px",
-          }}
-          inheritViewBox
-        />
-      ),
-      content: <About />,
-      path: "about",
-      footer: <Footer type={FOOTER_TYPES.AFP} />,
-      typeTab: "more",
-    },
-  ];
-
-  const handleImageClick = () => {
-    navigate("/app/tools/all");
-    //history.push("/app/tools/all");
-  };
-
-  useEffect(() => {
-    let supportedBrowserLang = getSupportedBrowserLanguage();
-
-    if (defaultLanguage !== null) {
-      if (defaultLanguage !== currentLang) {
-        dispatch(changeLanguage(defaultLanguage));
-      }
-    } else if (
-      supportedBrowserLang !== undefined &&
-      supportedBrowserLang !== currentLang
-    ) {
-      dispatch(changeLanguage(supportedBrowserLang));
-    }
-  }, []);
-
-  useEffect(() => {
-    //select tool category
-    switch (sideMenuItems[sideMenuItemSelectedId].type) {
-      case TOOLS_CATEGORIES.VIDEO:
-        setOpenListVideo(true);
-        break;
-      case TOOLS_CATEGORIES.IMAGE:
-        setOpenListImage(true);
-        break;
-      case TOOLS_CATEGORIES.AUDIO:
-        setOpenListAudio(true);
-        break;
-      case TOOLS_CATEGORIES.SEARCH:
-        setOpenListSeach(true);
-        break;
-      case TOOLS_CATEGORIES.DATA_ANALYSIS:
-        setOpenListData(true);
-        break;
-      case TOOLS_CATEGORIES.OTHER:
-        setOpenListOtherTools(true);
-        break;
-      default:
-        break;
-    }
-  }, [sideMenuItemSelectedId]);
-
-  const themeFab = createTheme({
-    palette: {
-      primary: {
-        light: "#00926c",
-        main: "#00926c",
-        dark: "#00926c",
-        contrastText: "#fff",
-      },
-    },
-    components: {
-      MuiAppBar: {
-        styleOverrides: {
-          colorPrimary: {
-            backgroundColor: "#ffffff",
-          },
-          root: {
-            zIndex: 1300,
-            height: "87px",
-            boxShadow: "none",
-            paddingTop: "12px",
-          },
-        },
-      },
-      MuiListItem: {
-        styleOverrides: {
-          gutters: {
-            paddingLeft: "26px",
-          },
-        },
-      },
-      MuiAutocomplete: {
-        styleOverrides: {
-          popupIndicatorOpen: {
-            transform: "none!important",
-          },
-          popper: {
-            zIndex: 99999,
-          },
-        },
-      },
-      MuiCard: {
-        styleOverrides: {
-          root: {
-            borderRadius: "10px!important",
-          },
-        },
-      },
-      MuiIconButton: {
-        styleOverrides: {
-          root: {
-            padding: 0,
-          },
-        },
-      },
-      MuiTab: {
-        styleOverrides: {
-          root: {
-            minWidth: "160px",
-          },
-        },
-      },
-    },
-  });
-
-  //Video items
-  const drawerItemsVideo = sideMenuItems.filter(
-    (item) => item.type === TOOLS_CATEGORIES.VIDEO,
-  );
-  const [openListVideo, setOpenListVideo] = useState(false);
-  const [classBorderVideo, setClassBorderVideo] = useState(null);
-
-  const handleClickListVideo = () => {
-    setOpenListVideo(!openListVideo);
-    if (!classBorderVideo) {
-      setClassBorderVideo(classes.drawerCategoryBorder);
-    } else {
-      setClassBorderVideo(null);
-    }
-  };
-
-  //Image items
-  const drawerItemsImage = sideMenuItems.filter(
-    (item) => item.type === TOOLS_CATEGORIES.IMAGE,
-  );
-  const [openListImage, setOpenListImage] = useState(false);
-  const [classBorderImage, setClassBorderImage] = useState(null);
-
-  const handleClickListImage = () => {
-    setOpenListImage(!openListImage);
-    if (!openListImage) {
-      setClassBorderImage(classes.drawerCategoryBorder);
-    } else {
-      setClassBorderImage(null);
-    }
-  };
-
-  //Audio items
-  const drawerItemsAudio = sideMenuItems.filter(
-    (item) => item.type === TOOLS_CATEGORIES.AUDIO,
-  );
-  const [openListAudio, setOpenListAudio] = useState(false);
-  const [classBorderAudio, setClassBorderAudio] = useState(null);
-
-  const handleClickListAudio = () => {
-    setOpenListAudio(!openListAudio);
-    if (!openListAudio) {
-      setClassBorderAudio(classes.drawerCategoryBorder);
-    } else {
-      setClassBorderAudio(null);
-    }
-  };
-
-  //Search items
-  const drawerItemsSearch = sideMenuItems.filter(
-    (item) => item.type === TOOLS_CATEGORIES.SEARCH,
-  );
-  const [openListSeach, setOpenListSeach] = useState(false);
-  const [classBorderSearch, setClassBorderSearch] = useState(null);
-
-  const handleClickListSearch = () => {
-    setOpenListSeach(!openListSeach);
-    if (!openListSeach) {
-      setClassBorderSearch(classes.drawerCategoryBorder);
-    } else {
-      setClassBorderSearch(null);
-    }
-  };
-
-  //Data items
-  const drawerItemsData = sideMenuItems.filter(
-    (item) => item.type === TOOLS_CATEGORIES.DATA_ANALYSIS,
-  );
-  const [openListData, setOpenListData] = useState(false);
-  const [classBorderData, setClassBorderData] = useState(null);
-
-  const handleClickListData = () => {
-    setOpenListData(!openListData);
-    if (!openListData) {
-      setClassBorderData(classes.drawerCategoryBorder);
-    } else {
-      setClassBorderData(null);
-    }
-  };
-
-  const drawerItemsOtherTools = sideMenuItems.filter(
-    (item) => item.type === TOOLS_CATEGORIES.OTHER,
-  );
-  const [openListOtherTools, setOpenListOtherTools] = useState(false);
-  const [classBorderOtherTools, setClassBorderOtherTools] = useState(null);
-
-  const handleClickListOtherTools = () => {
-    setOpenListOtherTools(!openListOtherTools);
-    if (!openListOtherTools) {
-      setClassBorderOtherTools(classes.drawerCategoryBorder);
-    } else {
-      setClassBorderOtherTools(null);
-    }
-  };
-
-  let listItems = [];
-
-  const tmpListItems = [
-    {
-      title: TOOLS_CATEGORIES.VIDEO,
-      icon: (
-        <VideoIcon
-          width="24px"
-          height="24px"
-          style={{ fill: "#4c4c4c" }}
-          title={TOOLS_CATEGORIES.VIDEO}
-        />
-      ),
-      list: drawerItemsVideo,
-      variableOpen: openListVideo,
-      setVariableOpen: setOpenListVideo,
-      functionHandleClick: handleClickListVideo,
-      classBorder: classBorderVideo,
-    },
-    {
-      title: TOOLS_CATEGORIES.IMAGE,
-      icon: (
-        <ImageIcon
-          width="24px"
-          height="24px"
-          style={{ fill: "#4c4c4c" }}
-          title={TOOLS_CATEGORIES.IMAGE}
-        />
-      ),
-      list: drawerItemsImage,
-      variableOpen: openListImage,
-      setVariableOpen: setOpenListImage,
-      functionHandleClick: handleClickListImage,
-      classBorder: classBorderImage,
-    },
-    {
-      title: TOOLS_CATEGORIES.AUDIO,
-      icon: (
-        <Audiotrack
-          width="24px"
-          height="24px"
-          style={{ fill: "#4c4c4c" }}
-          title={TOOLS_CATEGORIES.AUDIO}
-        />
-      ),
-      list: drawerItemsAudio,
-      variableOpen: openListAudio,
-      setVariableOpen: setOpenListAudio,
-      functionHandleClick: handleClickListAudio,
-      classBorder: classBorderAudio,
-    },
-    {
-      title: TOOLS_CATEGORIES.SEARCH,
-      icon: (
-        <SearchIcon
-          width="24px"
-          height="24px"
-          style={{ fill: "#4c4c4c" }}
-          title={TOOLS_CATEGORIES.SEARCH}
-        />
-      ),
-      list: drawerItemsSearch,
-      variableOpen: openListSeach,
-      setVariableOpen: setOpenListSeach,
-      functionHandleClick: handleClickListSearch,
-      classBorder: classBorderSearch,
-    },
-    {
-      title: TOOLS_CATEGORIES.DATA_ANALYSIS,
-      icon: (
-        <DataIcon
-          width="24px"
-          height="24px"
-          style={{ fill: "#4c4c4c" }}
-          title={TOOLS_CATEGORIES.DATA_ANALYSIS}
-        />
-      ),
-      list: drawerItemsData,
-      variableOpen: openListData,
-      setVariableOpen: setOpenListData,
-      functionHandleClick: handleClickListData,
-      classBorder: classBorderData,
-    },
-    {
-      title: TOOLS_CATEGORIES.OTHER,
-      icon: <MoreHoriz style={{ fill: "#4c4c4c" }} />,
-      list: drawerItemsOtherTools,
-      variableOpen: openListOtherTools,
-      setVariableOpen: setOpenListOtherTools,
-      functionHandleClick: handleClickListOtherTools,
-      classBorder: classBorderOtherTools,
-    },
-  ];
-
-  tmpListItems.map((items) => {
-    const listTools = items.list;
-    for (let i = 0; i < listTools.length; i++) {
-      if (listTools[i].toolRestrictions.length === 0) {
-        listItems.push(items);
-        break;
-      } else if (
-        listTools[i].toolRestrictions.some((restriction) =>
-          role.includes(restriction),
-        )
-      ) {
-        listItems.push(items);
-        break;
-      } else if (
-        listTools[i].toolRestrictions.includes(TOOL_STATUS_ICON.LOCK)
-      ) {
-        listItems.push(items);
-        break;
-      }
-    }
-  });
-
-  const drawItemPerRole = sideMenuItems.filter((item) => {
-    if (
-      item.toolRestrictions.length === 0 ||
-      item.toolRestrictions.includes(TOOL_STATUS_ICON.LOCK)
-    )
-      return true;
-    if (item.toolRestrictions.some((restriction) => role.includes(restriction)))
-      return true;
-  });
-
-  const toolsItem = sideMenuItems.find((data) => data.title === "navbar_tools");
-  //const assistantItem = topMenuItems.find(data => data.title === 'navbar_assistant');
-  //const drawerItemsLearning = topMenuItems.filter(item => item.typeTab === "learning");
-  const drawerItemsMore = topMenuItems.filter(
-    (item) => item.typeTab === "more",
-  );
-
-  //const [value, setValue] = useState(null);
-
-  return (
-    <div className={classes.flex}>
-      <Snackbar
-        open={openAlert}
-        autoHideDuration={6000}
-        onClose={handleCloseAlert}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "right",
-        }}
-        sx={{ mr: 8 }}
-      >
-        <Alert onClose={handleCloseAlert} severity="warning">
-          {tWarning("warning_advanced_tools")}
-        </Alert>
-      </Snackbar>
-      <ThemeProvider theme={themeFab}>
-        <AppBar position="fixed" width={"100%"}>
-          <Toolbar
-            className={classes.toolbar}
-            style={{ borderBottom: "solid 1px #dedbdb" }}
-          >
-            <Grid
-              container
-              direction="row"
-              justifyContent="space-between"
-              alignItems="center"
-              spacing={{ sm: 1, md: 2 }}
-            >
-              <Grid item xs={2}>
-                <Stack
-                  direction="row"
-                  justifyContent="flex-start"
-                  alignItems="center"
-                  spacing={{ sm: 1, md: 2 }}
-                >
-                  {LOGO_EU ? (
-                    <LogoEuCom
-                      style={{
-                        height: "auto",
-                        minWidth: "48px",
-                        width: { sm: "48px", md: "80px" },
-                      }}
-                      alt="logo"
-                      className={classes.logoLeft}
-                      onClick={handleImageClick}
-                    />
-                  ) : (
-                    <LogoInVidWeverify
-                      style={{
-                        height: "auto",
-                        minWidth: "96px",
-                        width: { sm: "96px", md: "96px" },
-                      }}
-                      alt="logo"
-                      className={classes.logoLeft}
-                      onClick={handleImageClick}
-                    />
-                  )}
-                  <LogoVera
-                    style={{
-                      height: "auto",
-                      minWidth: "48px",
-                      width: { sm: "48px", md: "80px" },
-                    }}
-                    alt="logo"
-                    className={classes.logoRight}
-                    onClick={handleImageClick}
-                  />
-                </Stack>
-              </Grid>
-              <Grid item xs={7}>
-                <Tabs
-                  value={topMenuItemSelectedId}
-                  variant="scrollable"
-                  onChange={handleTopMenuChange}
-                  scrollButtons="auto"
-                  allowScrollButtonsMobile
-                  indicatorColor="primary"
-                  textColor="primary"
-                  aria-label="scrollable force tabs example"
-                  TabIndicatorProps={{
-                    style: { display: "none" },
-                  }}
-                  sx={{ color: "black" }}
-                >
-                  {topMenuItems.map((item, index) => {
-                    return (
-                      <Tab
-                        key={index}
-                        label={keyword(item.title)}
-                        icon={item.icon}
-                        {...a11yProps(index)}
-                        to={item.path}
-                        component={Link}
-                        sx={{ minWidth: "130px" }}
-                      />
-                    );
-                  })}
-                </Tabs>
-              </Grid>
-              <Grid item xs={2}>
-                <AdvancedTools />
-              </Grid>
-              <Grid item xs={1}>
-                <Languages />
-              </Grid>
-            </Grid>
-          </Toolbar>
-        </AppBar>
-
-        <Drawer
-          variant="permanent"
-          className={clsx(classes.drawer, {
-            [classes.drawerOpen]: isSideMenuOpen,
-            [classes.drawerClose]: !isSideMenuOpen,
-          })}
-          classes={{
-            paper: clsx({
-              [classes.drawerOpen]: isSideMenuOpen,
-              [classes.drawerClose]: !isSideMenuOpen,
-            }),
-          }}
-          ref={drawerRef}
-          open={isSideMenuOpen}
-        >
-          <List
-            style={{
-              marginTop: "80px",
-            }}
-          >
-            <ListSubheader
-              style={{
-                paddingTop: "16px",
-                paddingBottom: "16px",
-                backgroundColor: "#ffffff",
-                textAlign: "start",
-              }}
-            >
-              <Typography
-                style={{
-                  fontWeight: "500",
-                  fontSize: "10px",
-                  color: "#B0B0B0",
-                  textTransform: "uppercase",
-                }}
-              >
-                {isSideMenuOpen
-                  ? keyword("navbar_verification")
-                  : keyword("navbar_verification_short")}
-              </Typography>
-            </ListSubheader>
-            <ListItemButton
-              selected={
-                topMenuItemSelectedId === 0 && sideMenuItemSelectedId === 0
-              }
-              onClick={() => changeValue(toolsItem, "TOOL")}
-              component={Link}
-              to={"tools"}
-            >
-              {isSideMenuOpen ? (
-                <>
-                  <ListItemIcon
-                    sx={{
-                      marginRight: "12px",
-                      minWidth: "unset",
-                    }}
-                  >
-                    {toolsItem.icon}
-                  </ListItemIcon>
-                  <ListItemText
-                    primary={
-                      <Typography
-                        color={
-                          topMenuItemSelectedId === 0 &&
-                          sideMenuItemSelectedId === 0
-                            ? "primary"
-                            : ""
-                        }
-                        className={`${
-                          isSideMenuOpen
-                            ? classes.drawerListText
-                            : classes.hidden
-                        }`}
-                      >
-                        {keyword(toolsItem.title)}
-                      </Typography>
-                    }
-                  />
-                </>
-              ) : (
-                <Stack
-                  direction="row"
-                  alignItems="center"
-                  justifyContent="center"
-                  width="100%"
-                >
-                  {toolsItem.icon}
-                </Stack>
-              )}
-            </ListItemButton>
-            {listItems.map((item, key) => {
-              const element = (
-                <Box>
-                  <ListItemButton onClick={item.functionHandleClick}>
-                    {isSideMenuOpen ? (
-                      <>
-                        <ListItemIcon
-                          sx={{
-                            marginRight: "12px",
-                            minWidth: "unset",
-                          }}
-                        >
-                          {item.icon}
-                        </ListItemIcon>
-                        <ListItemText
-                          primary={
-                            <Typography className={classes.drawerListText}>
-                              {keyword(item.title)}
-                            </Typography>
-                          }
-                        />
-                        {item.variableOpen ? <ExpandLess /> : <ExpandMore />}
-                      </>
-                    ) : (
-                      <Stack
-                        direction="row"
-                        alignItems="center"
-                        justifyContent="center"
-                        width="100%"
-                      >
-                        {item.icon}
-                      </Stack>
-                    )}
-                  </ListItemButton>
-
-                  <Collapse in={item.variableOpen} timeout="auto" unmountOnExit>
-                    <List component="div" disablePadding>
-                      {item.list.map((itemList, keyList) => {
-                        let element = (
-                          <ListItemButton
-                            selected={
-                              topMenuItemSelectedId === 0 &&
-                              sideMenuItemSelectedId + 1 === itemList.id
-                            }
-                            key={keyList}
-                            onClick={() => changeValue(itemList, "TOOL")}
-                          >
-                            {isSideMenuOpen ? (
-                              <>
-                                <ListItemIcon
-                                  className={classes.drawerListNested}
-                                  sx={{
-                                    marginRight: "12px",
-                                    minWidth: "unset",
-                                  }}
-                                >
-                                  {itemList.icon}
-                                </ListItemIcon>
-                                <ListItemText
-                                  primary={
-                                    <Typography
-                                      color={
-                                        topMenuItemSelectedId === 0 &&
-                                        sideMenuItemSelectedId + 1 ===
-                                          itemList.id
-                                          ? "primary"
-                                          : ""
-                                      }
-                                      className={classes.drawerListText}
-                                    >
-                                      {keyword(itemList.title)}
-                                    </Typography>
-                                  }
-                                />
-                              </>
-                            ) : (
-                              <Stack
-                                direction="row"
-                                alignItems="center"
-                                justifyContent="center"
-                                width="100%"
-                              >
-                                {itemList.icon}
-                              </Stack>
-                            )}
-                          </ListItemButton>
-                        );
-
-                        if (itemList.toolRestrictions.includes("BETA_TESTER")) {
-                          if (betaTester) {
-                            return element;
-                          } else {
-                            return null;
-                          }
-                        } else {
-                          return element;
-                        }
-                      })}
-                    </List>
-                  </Collapse>
-                </Box>
-              );
-
-              return <Box key={key}>{element}</Box>;
-            })}
-            <Box m={2} />
-            <ListSubheader
-              style={{ paddingTop: "16px", paddingBottom: "16px" }}
-            >
-              <Typography
-                style={{
-                  fontWeight: "500",
-                  fontSize: "10px",
-                  color: "#B0B0B0",
-                  textTransform: "uppercase",
-                }}
-              >
-                {isSideMenuOpen
-                  ? keyword("navbar_more")
-                  : keyword("navbar_more_short")}
-              </Typography>
-            </ListSubheader>
-            {drawerItemsMore.map((item, key) => {
-              return (
-                <ListItemButton
-                  selected={topMenuItemSelectedId === 5}
-                  key={key}
-                  onClick={() => changeValue(item, "OTHER")}
-                >
-                  {isSideMenuOpen ? (
-                    <>
-                      <ListItemIcon
-                        sx={{
-                          marginRight: "12px",
-                          minWidth: "unset",
-                        }}
-                      >
-                        {item.icon}
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={
-                          <Typography
-                            color={topMenuItemSelectedId === 5 ? "primary" : ""}
-                            className={`${
-                              isSideMenuOpen
-                                ? classes.drawerListText
-                                : classes.hidden
-                            }`}
-                          >
-                            {keyword(item.title)}
-                          </Typography>
-                        }
-                      />
-                    </>
-                  ) : (
-                    <Stack
-                      direction="row"
-                      alignItems="center"
-                      justifyContent="center"
-                      width="100%"
-                    >
-                      {item.icon}
-                    </Stack>
-                  )}
-                </ListItemButton>
-              );
-            })}
-          </List>
-
-          <div className={classes.grow} />
-
-          <Box
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "stretch",
-              position: "sticky",
-              bottom: "0px",
-              backgroundColor: "#ffffff",
-              zIndex: "9",
-            }}
-          >
-            <Box p={1}>
-              <Divider />
-            </Box>
-
-            <Button
-              onClick={toggleSideMenu}
-              style={{ alignSelf: "center" }}
-              startIcon={
-                isSideMenuOpen ? (
-                  direction === "ltr" ? (
-                    <ChevronLeft />
-                  ) : (
-                    <ChevronRight />
-                  )
-                ) : null
-              }
-            >
-              {isSideMenuOpen ? (
-                keyword("navbar_collapse")
-              ) : direction === "ltr" ? (
-                <ChevronRight />
-              ) : (
-                <ChevronLeft />
-              )}
-            </Button>
-
-            <Box m={1} />
-          </Box>
-        </Drawer>
-
-        <main className={classes.content}>
-          <div className={classes.toolbar} id="back-to-top-anchor" />
-          <MainContentMenuTabItems
-            className={classes.noMargin}
-            tabItems={topMenuItems}
-            toolsList={drawItemPerRole}
-          />
-          <ScrollTop
-            {...{ isCurrentLanguageLeftToRight: isCurrentLanguageLeftToRight }}
-          >
-            <ThemeProvider theme={themeFab}>
-              <Fab
-                color="primary"
-                size="large"
-                aria-label="scroll back to top"
-                className={classes.fabTop}
-              >
-                <KeyboardArrowUp />
-              </Fab>
-            </ThemeProvider>
-          </ScrollTop>
-          {error !== null && (
-            <MySnackbar
-              variant="error"
-              message={error}
-              onClick={() => dispatch(cleanError())}
-              onClose={() => {}}
-              sx={{ mr: 8 }}
-            />
-          )}
-          {errorNetwork !== null && (
-            <MySnackbar
-              variant="error"
-              message={errorNetwork}
-              onClick={() => dispatch(cleanErrorNetwork())}
-              onClose={() => {}}
-              sx={{ mr: 8 }}
-            />
-          )}
-          {cookiesUsage.active === null && (
-            <Snackbar
-              anchorOrigin={{
-                vertical: "top",
-                horizontal: "center",
-              }}
-              open={true}
-              message={keyword("cookies_message")}
-              action={[
-                <Button
-                  key={"cookies_decline"}
-                  color={"secondary"}
-                  size={"small"}
-                  onClick={() => dispatch(setFalse())}
-                >
-                  {" "}
-                  {keyword("cookies_decline")}{" "}
-                </Button>,
-                <Button
-                  key={"cookies_accept"}
-                  color={"primary"}
-                  size={"small"}
-                  onClick={() => dispatch(setTrue())}
-                >
-                  {" "}
-                  {keyword("cookies_accept")}{" "}
-                </Button>,
-              ]}
-            />
-          )}
-          <Feedback />
-        </main>
-      </ThemeProvider>
-    </div>
-  );
-};
-export default memo(NavBar);
diff --git a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantMediaResult.jsx b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantMediaResult.jsx
index 9ede63bb8..0f5ad0266 100644
--- a/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantMediaResult.jsx
+++ b/src/components/NavItems/Assistant/AssistantScrapeResults/AssistantMediaResult.jsx
@@ -46,7 +46,7 @@ const AssistantMediaResult = () => {
   const imageList = useSelector((state) => state.assistant.imageList);
   const videoList = useSelector((state) => state.assistant.videoList);
 
-  // third party tool states
+  // third party topMenuItem states
   //const ocrLoading = useSelector(state=>state.assistant.ocrLoading)
   const dbkfMediaMatchLoading = useSelector(
     (state) => state.assistant.dbkfMediaMatchLoading,
diff --git a/src/components/NavItems/tools/Alltools/MainContentMenuItem.jsx b/src/components/NavItems/tools/Alltools/MainContentMenuItem.jsx
deleted file mode 100644
index 779570d1d..000000000
--- a/src/components/NavItems/tools/Alltools/MainContentMenuItem.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { Component } from "react";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import FiberNewIcon from "@mui/icons-material/FiberNew";
-import AuthenticationIcon from "./AdvancedTools/AuthenticationIcon";
-import ImprovedIcon from "../../../NavBar/images/SVG/Improved.svg";
-import ScienceIcon from "@mui/icons-material/Science";
-
-export class MainContentMenuItem extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hovered: false,
-    };
-  }
-
-  onMouseEnter = () => {
-    this.setState({ hovered: true });
-  };
-
-  onMouseLeave = () => {
-    this.setState({ hovered: false });
-  };
-
-  render() {
-    let showNew = false;
-    let showRedesign = false;
-    let showLock = false;
-    let showExperimental = false;
-
-    //console.log(this.props);
-
-    if (this.props.iconsAttributes !== undefined) {
-      if (this.props.iconsAttributes.includes("redesigned")) {
-        showRedesign = true;
-      }
-
-      if (this.props.iconsAttributes.includes("new")) {
-        showNew = true;
-      }
-
-      if (this.props.iconsAttributes.includes("lock")) {
-        showLock = true;
-      }
-
-      if (this.props.iconsAttributes.includes("experimental")) {
-        showExperimental = true;
-      }
-    }
-
-    const { hovered } = this.state;
-    const styleCard = hovered
-      ? {
-          border: "solid #90A4AE 2px",
-          borderRadius: "10px",
-          cursor: "pointer",
-          backgroundColor: "#ffffff",
-        }
-      : {
-          border: "solid #dce0e2 2px",
-          borderRadius: "10px",
-          cursor: "pointer",
-          backgroundColor: "#ffffff",
-        };
-
-    return (
-      <Box
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
-        style={styleCard}
-      >
-        <Box p={2}>
-          <Box mr={1}>
-            <Grid container direction="row" alignItems="center">
-              <Grid item>{this.props.icon}</Grid>
-              <Grid item>
-                <Box ml={1} />
-              </Grid>
-
-              <Grid item xs>
-                <Typography letiant="h6">{this.props.name}</Typography>
-              </Grid>
-
-              {showRedesign && (
-                <Grid item style={{ marginLeft: "auto", color: "#F44336" }}>
-                  <ImprovedIcon title="Upgraded" width="40px" height="40px" />
-                </Grid>
-              )}
-
-              {showNew && (
-                <Grid item style={{ marginLeft: "auto", color: "#F44336" }}>
-                  <FiberNewIcon />
-                </Grid>
-              )}
-
-              {showExperimental && (
-                <Grid item style={{ marginLeft: "auto", color: "#F44336" }}>
-                  <ScienceIcon />
-                </Grid>
-              )}
-
-              {showLock &&
-                !(
-                  this.state.userSession &&
-                  this.state.userSession.userAuthenticated
-                ) && (
-                  <Grid item style={{ marginLeft: "auto" }}>
-                    <Box ml={2}>
-                      <AuthenticationIcon />
-                    </Box>
-                  </Grid>
-                )}
-            </Grid>
-          </Box>
-
-          <Box m={1} />
-
-          <div style={{ minHeight: "45px" }}>
-            <span style={{ fontSize: "10px" }}>{this.props.description}</span>
-          </div>
-        </Box>
-      </Box>
-    );
-  }
-}
-
-export default MainContentMenuItem;
diff --git a/src/components/NavItems/tools/Alltools/MainContentMenu.jsx b/src/components/NavItems/tools/Alltools/ToolsMenu.jsx
similarity index 77%
rename from src/components/NavItems/tools/Alltools/MainContentMenu.jsx
rename to src/components/NavItems/tools/Alltools/ToolsMenu.jsx
index 3619b11fc..c45e21b59 100644
--- a/src/components/NavItems/tools/Alltools/MainContentMenu.jsx
+++ b/src/components/NavItems/tools/Alltools/ToolsMenu.jsx
@@ -12,6 +12,7 @@ import {
   SvgIcon,
   Tab,
   Tabs,
+  Typography,
 } from "@mui/material";
 
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
@@ -19,7 +20,7 @@ import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import Iframe from "react-iframe";
 import DialogActions from "@mui/material/DialogActions";
 import useMyStyles from "../../../Shared/MaterialUiStyles/useMyStyles";
-import MainContentMenuItem from "./MainContentMenuItem";
+import ToolsMenuItem from "./ToolsMenuItem";
 import ImageIcon from "../../../NavBar/images/SVG/Image/Images.svg";
 import VideoIcon from "../../../NavBar/images/SVG/Video/Video.svg";
 import SearchIcon from "../../../NavBar/images/SVG/Search/Search.svg";
@@ -29,8 +30,8 @@ import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
 import { Audiotrack } from "@mui/icons-material";
-import Typography from "@mui/material/Typography";
-import { TOOLS_CATEGORIES } from "components/NavBar/NavBar";
+import { ROLES, tools, TOOLS_CATEGORIES } from "../../../../constants/tools";
+
 function TabPanel(props) {
   const { children, value, index, ...other } = props;
 
@@ -51,33 +52,37 @@ function TabPanel(props) {
   );
 }
 
-const MainContentMenu = (props) => {
+/**
+ *
+ * @returns {Element}
+ * @constructor
+ */
+const ToolsMenu = () => {
   const navigate = useNavigate();
   const classes = useMyStyles();
   const keyword = i18nLoadNamespace("components/NavItems/tools/Alltools");
   const keywordNavbar = i18nLoadNamespace("components/NavBar");
   const keywordWarning = i18nLoadNamespace("components/Shared/OnWarningInfo");
 
-  const tools = props.tools;
   const [videoUrl, setVideoUrl] = useState(null);
 
   const userAuthenticated = useSelector(
     (state) => state.userSession && state.userSession.userAuthenticated,
   );
-  const [openAlert, setOpenAlert] = React.useState(false);
 
-  const handleClick = (path, restrictions) => {
-    //console.log(type);
+  const role = useSelector((state) => state.userSession.user.roles);
+  const betaTester = role.includes("BETA_TESTER");
+
+  const [openAlert, setOpenAlert] = React.useState(false);
 
-    if (restrictions !== undefined && restrictions.includes("lock")) {
+  const handleClick = (path, rolesNeeded) => {
+    if (rolesNeeded && rolesNeeded.includes("lock")) {
       if (userAuthenticated) {
-        //console.log("LOGGED");
         handlePush(path);
       } else {
         setOpenAlert(true);
       }
     } else {
-      //console.log(path);
       handlePush(path);
     }
   };
@@ -87,20 +92,45 @@ const MainContentMenu = (props) => {
       window.open(process.env.REACT_APP_TSNA_SERVER + path, "_blank");
     } else {
       navigate("/app/tools/" + path);
-      /* history.push({
-                                                                                                                                                                      pathname: "/app/tools/" + path,
-                                                                                                                                                                      state: { media: mediaTool }
-                                                                                                                                                                  })*/
     }
   };
 
-  //console.log(tools);
+  //TODO: Move this code somewhere else so that the component is easier to reuse
 
+  /**
+   *
+   * @type {Tool[]}
+   */
   const toolsVideo = [];
+
+  /**
+   *
+   * @type {Tool[]}
+   */
   const toolsImages = [];
+
+  /**
+   *
+   * @type {Tool[]}
+   */
   const toolsAudio = [];
+
+  /**
+   *
+   * @type {Tool[]}
+   */
   const toolsSearch = [];
+
+  /**
+   *
+   * @type {Tool[]}
+   */
   const toolsData = [];
+
+  /**
+   *
+   * @type {Tool[]}
+   */
   const otherTools = [];
 
   const categories = [
@@ -174,29 +204,40 @@ const MainContentMenu = (props) => {
     },
   ];
 
-  tools.forEach((value) => {
-    if (value.type === TOOLS_CATEGORIES.VIDEO) {
-      toolsVideo.push(value);
+  const canUserSeeTool = (tool) => {
+    return (
+      !tool.rolesNeeded ||
+      (role && tool.rolesNeeded && role.includes(...tool.rolesNeeded)) ||
+      tool.rolesNeeded.includes(ROLES.LOCK)
+    );
+  };
+
+  tools.forEach((tool) => {
+    if (tool.category === TOOLS_CATEGORIES.VIDEO && canUserSeeTool(tool)) {
+      toolsVideo.push(tool);
     }
 
-    if (value.type === TOOLS_CATEGORIES.IMAGE) {
-      toolsImages.push(value);
+    if (tool.category === TOOLS_CATEGORIES.IMAGE && canUserSeeTool(tool)) {
+      toolsImages.push(tool);
     }
 
-    if (value.type === TOOLS_CATEGORIES.AUDIO) {
-      toolsAudio.push(value);
+    if (tool.category === TOOLS_CATEGORIES.AUDIO && canUserSeeTool(tool)) {
+      toolsAudio.push(tool);
     }
 
-    if (value.type === TOOLS_CATEGORIES.SEARCH) {
-      toolsSearch.push(value);
+    if (tool.category === TOOLS_CATEGORIES.SEARCH && canUserSeeTool(tool)) {
+      toolsSearch.push(tool);
     }
 
-    if (value.type === TOOLS_CATEGORIES.DATA_ANALYSIS) {
-      toolsData.push(value);
+    if (
+      tool.category === TOOLS_CATEGORIES.DATA_ANALYSIS &&
+      canUserSeeTool(tool)
+    ) {
+      toolsData.push(tool);
     }
 
-    if (value.type === TOOLS_CATEGORIES.OTHER) {
-      otherTools.push(value);
+    if (tool.category === TOOLS_CATEGORIES.OTHER && canUserSeeTool(tool)) {
+      otherTools.push(tool);
     }
   });
 
@@ -213,8 +254,6 @@ const MainContentMenu = (props) => {
     setValue(newValue);
   };
 
-  const role = useSelector((state) => state.userSession.user.roles);
-  const betaTester = role.includes("BETA_TESTER");
   const categoriesAllowedForUser = categories.filter(
     (category) => category.value.length !== 0,
   );
@@ -271,6 +310,7 @@ const MainContentMenu = (props) => {
           {categoriesAllowedForUser.map((category, index) => {
             const tools = category.value;
             //if(tools.length !==0){
+
             return (
               <TabPanel value={value} index={index} key={index}>
                 <Grid
@@ -279,25 +319,21 @@ const MainContentMenu = (props) => {
                   spacing={2}
                   className={classes.toolCardsContainer}
                 >
-                  {tools.map((value, key) => {
+                  {tools.map((tool, key) => {
                     const element = (
                       <Grid
                         className={classes.toolCardStyle}
                         item
                         key={key}
-                        onClick={() =>
-                          handleClick(value.path, value.toolRestrictions)
-                        }
+                        onClick={() => handleClick(tool.path, tool.rolesNeeded)}
                       >
-                        <MainContentMenuItem
-                          name={keyword(value.title)}
-                          description={keyword(value.description)}
-                          icon={value.iconColored}
-                          iconsAttributes={value.icons}
-                        />
+                        <ToolsMenuItem tool={tool} />
                       </Grid>
                     );
-                    if (value.toolRestrictions.includes("BETA_TESTER")) {
+                    if (
+                      tool.rolesNeeded &&
+                      tool.rolesNeeded.includes("BETA_TESTER")
+                    ) {
                       if (betaTester) {
                         return element;
                       } else {
@@ -344,4 +380,4 @@ const MainContentMenu = (props) => {
     </>
   );
 };
-export default MainContentMenu;
+export default ToolsMenu;
diff --git a/src/components/NavItems/tools/Alltools/ToolsMenuItem.jsx b/src/components/NavItems/tools/Alltools/ToolsMenuItem.jsx
new file mode 100644
index 000000000..9b852829f
--- /dev/null
+++ b/src/components/NavItems/tools/Alltools/ToolsMenuItem.jsx
@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { Box, Grid, Typography } from "@mui/material/";
+import FiberNewIcon from "@mui/icons-material/FiberNew";
+import AuthenticationIcon from "./AdvancedTools/AuthenticationIcon";
+import ImprovedIcon from "../../../NavBar/images/SVG/Improved.svg";
+import ScienceIcon from "@mui/icons-material/Science";
+import { i18nLoadNamespace } from "../../../Shared/Languages/i18nLoadNamespace";
+import { useSelector } from "react-redux";
+
+/**
+ *
+ * @param tool {Tool}
+ * @returns {Element}
+ * @constructor
+ */
+const ToolsMenuItem = ({ tool }) => {
+  const keyword = i18nLoadNamespace("components/NavItems/tools/Alltools");
+
+  const userAuthenticated = useSelector(
+    (state) => state.userSession && state.userSession.userAuthenticated,
+  );
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const onMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const onMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const showNew = tool.rolesIcons && tool.rolesIcons.includes("new");
+  const showRedesign =
+    tool.rolesIcons && tool.rolesIcons.includes("redesigned");
+  const showLock = tool.rolesIcons && tool.rolesIcons.includes("lock");
+  const showExperimental =
+    tool.rolesIcons && tool.rolesIcons.includes("experimental");
+
+  const styleCard = isHovered
+    ? {
+        border: "solid #90A4AE 2px",
+        borderRadius: "10px",
+        cursor: "pointer",
+        backgroundColor: "#ffffff",
+      }
+    : {
+        border: "solid #dce0e2 2px",
+        borderRadius: "10px",
+        cursor: "pointer",
+        backgroundColor: "#ffffff",
+      };
+
+  return (
+    <Box
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      style={styleCard}
+    >
+      <Box p={2}>
+        <Box mr={1}>
+          <Grid container direction="row" alignItems="center">
+            <Grid item>
+              <tool.icon sx={{ color: "#00926c" }} />
+            </Grid>
+            <Grid item>
+              <Box ml={1} />
+            </Grid>
+
+            <Grid item xs>
+              <Typography letiant="h6">{keyword(tool.titleKeyword)}</Typography>
+            </Grid>
+
+            {showRedesign && (
+              <Grid item style={{ marginLeft: "auto", color: "#F44336" }}>
+                <ImprovedIcon title="Upgraded" width="40px" height="40px" />
+              </Grid>
+            )}
+
+            {showNew && (
+              <Grid item style={{ marginLeft: "auto", color: "#F44336" }}>
+                <FiberNewIcon />
+              </Grid>
+            )}
+
+            {showExperimental && (
+              <Grid item style={{ marginLeft: "auto", color: "#F44336" }}>
+                <ScienceIcon />
+              </Grid>
+            )}
+
+            {showLock && !userAuthenticated && (
+              <Grid item style={{ marginLeft: "auto" }}>
+                <Box ml={2}>
+                  <AuthenticationIcon />
+                </Box>
+              </Grid>
+            )}
+          </Grid>
+        </Box>
+
+        <Box m={1} />
+
+        <div style={{ minHeight: "45px" }}>
+          <span style={{ fontSize: "10px" }}>
+            {keyword(tool.descriptionKeyword)}
+          </span>
+        </div>
+      </Box>
+    </Box>
+  );
+};
+
+export default ToolsMenuItem;
diff --git a/src/components/NavItems/tools/Analysis/Hooks/useAnalysisWrapper.jsx b/src/components/NavItems/tools/Analysis/Hooks/useAnalysisWrapper.jsx
index f7f8aa40d..aee8652f3 100644
--- a/src/components/NavItems/tools/Analysis/Hooks/useAnalysisWrapper.jsx
+++ b/src/components/NavItems/tools/Analysis/Hooks/useAnalysisWrapper.jsx
@@ -127,7 +127,10 @@ export const useAnalysisWrapper = (
       axios
         .post(apiUrl)
         .then((response) => setData(response["data"]))
-        .catch((error) => handleError(error));
+        .catch((error) => {
+          console.log("error", error);
+          handleError("analysis_service_error");
+        });
     }
     // eslint-disable-next-line
   }, [apiUrl, processUrl]);
diff --git a/src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsImage.jsx b/src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsImage.jsx
index 715d2ba8e..ab2c1fd6b 100644
--- a/src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsImage.jsx
+++ b/src/components/NavItems/tools/Deepfake/Results/DeepfakeResultsImage.jsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Box from "@mui/material/Box";
 import useMyStyles from "../../../../Shared/MaterialUiStyles/useMyStyles";
 import Card from "@mui/material/Card";
 import CardHeader from "@mui/material/CardHeader";
-import { Grid, Typography, Stack, IconButton, Tooltip } from "@mui/material";
+import { Grid, IconButton, Stack, Tooltip, Typography } from "@mui/material";
 import { i18nLoadNamespace } from "components/Shared/Languages/i18nLoadNamespace";
 import { LinearProgressWithLabel } from "../../../../Shared/LinearProgressWithLabel/LinearProgressWithLabel";
 import { Close, Help } from "@mui/icons-material";
@@ -15,6 +15,7 @@ import { useTrackEvent } from "Hooks/useAnalytics";
 const DeepfakeResultsImage = (props) => {
   const classes = useMyStyles();
   const keyword = i18nLoadNamespace("components/NavItems/tools/Deepfake");
+
   class DeepfakeResult {
     constructor(methodName, predictionScore) {
       (this.methodName = methodName), (this.predictionScore = predictionScore);
@@ -250,7 +251,7 @@ const DeepfakeResultsImage = (props) => {
 
                 <img
                   src={url}
-                  alt={"Displays the results of the deepfake tool"}
+                  alt={"Displays the results of the deepfake topMenuItem"}
                   style={{
                     maxWidth: "100%",
                     maxHeight: "60vh",
diff --git a/src/components/NavItems/tools/SyntheticImageDetection/syntheticImageDetectionResults.jsx b/src/components/NavItems/tools/SyntheticImageDetection/syntheticImageDetectionResults.jsx
index 31193c469..f965dff76 100644
--- a/src/components/NavItems/tools/SyntheticImageDetection/syntheticImageDetectionResults.jsx
+++ b/src/components/NavItems/tools/SyntheticImageDetection/syntheticImageDetectionResults.jsx
@@ -298,7 +298,7 @@ const SyntheticImageDetectionResults = (props) => {
               >
                 <img
                   src={url}
-                  alt={"Displays the results of the deepfake tool"}
+                  alt={"Displays the results of the deepfake topMenuItem"}
                   style={{
                     maxWidth: "100%",
                     maxHeight: "60vh",
diff --git a/src/components/NotificationSnackbar/index.jsx b/src/components/NotificationSnackbar/index.jsx
new file mode 100644
index 000000000..5a96cdaf6
--- /dev/null
+++ b/src/components/NotificationSnackbar/index.jsx
@@ -0,0 +1,33 @@
+import { React } from "react";
+import { Alert, Snackbar } from "@mui/material";
+import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace";
+
+const NotificationSnackbar = ({ openAlert, setOpenAlert }) => {
+  const tWarning = i18nLoadNamespace("components/Shared/OnWarningInfo");
+
+  const handleCloseAlert = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setOpenAlert(false);
+  };
+
+  return (
+    <Snackbar
+      open={openAlert}
+      autoHideDuration={6000}
+      onClose={handleCloseAlert}
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "right",
+      }}
+      sx={{ mr: 8 }}
+    >
+      <Alert onClose={handleCloseAlert} severity="warning">
+        {tWarning("warning_advanced_tools")}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default NotificationSnackbar;
diff --git a/src/components/PopUp/PopUp.jsx b/src/components/PopUp/PopUp.jsx
index 1b72e20b0..67131adb5 100644
--- a/src/components/PopUp/PopUp.jsx
+++ b/src/components/PopUp/PopUp.jsx
@@ -124,7 +124,7 @@ const PopUp = () => {
             variant="outlined"
             color="primary"
             fullWidth={true}
-            onClick={() => window.open("/popup.html#/app/tools/all")}
+            onClick={() => window.open("/popup.html#/app/tools")}
           >
             {keyword("open_website")}
           </Button>
diff --git a/src/components/SideMenu/index.jsx b/src/components/SideMenu/index.jsx
new file mode 100644
index 000000000..21b31187d
--- /dev/null
+++ b/src/components/SideMenu/index.jsx
@@ -0,0 +1,734 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Box,
+  Button,
+  Collapse,
+  Divider,
+  Drawer,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  Stack,
+  Typography,
+} from "@mui/material";
+import clsx from "clsx";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  Audiotrack,
+  ChevronLeft,
+  ChevronRight,
+  ExpandLess,
+  ExpandMore,
+  MoreHoriz,
+} from "@mui/icons-material";
+import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles";
+import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace";
+import { useDispatch, useSelector } from "react-redux";
+import VideoIcon from "../NavBar/images/SVG/Video/Video.svg";
+import ImageIcon from "../NavBar/images/SVG/Image/Images.svg";
+import SearchIcon from "../NavBar/images/SVG/Search/Search.svg";
+import DataIcon from "../NavBar/images/SVG/DataAnalysis/Data_analysis.svg";
+import {
+  ROLES,
+  TOOL_GROUPS,
+  TOOL_STATUS_ICON,
+  TOOLS_CATEGORIES,
+} from "../../constants/tools";
+import { selectTopMenuItem } from "../../redux/reducers/navReducer";
+import { TOP_MENU_ITEMS } from "../../constants/topMenuItems";
+import { selectTool } from "../../redux/reducers/tools/toolReducer";
+
+const SideMenu = ({ tools, setOpenAlert }) => {
+  const classes = useMyStyles();
+  const keyword = i18nLoadNamespace("components/NavBar");
+
+  const topMenuItemSelected = useSelector((state) => state.nav);
+  const selectedToolTitleKeyword = useSelector((state) => state.tool.toolName);
+
+  const dispatch = useDispatch();
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    //Set the redux state if the tool was opened from URL
+    const pathArr = window.location.href.split("/");
+
+    const lastNonEmptyPath = pathArr[pathArr.length - 1]
+      ? pathArr[pathArr.length - 1]
+      : pathArr[pathArr.length - 2];
+
+    const path = lastNonEmptyPath.split("?")[0];
+
+    const toolWithPath = tools.find((tool) => tool.path === path);
+
+    if (toolWithPath) {
+      dispatch(selectTool(toolWithPath.titleKeyword));
+
+      //Now we open the drawer for the tool selected
+      const toolFromPath = listItems.find(
+        (i) => i.titleKeyword === toolWithPath.category,
+      );
+
+      if (toolFromPath) {
+        toolFromPath.handleOpenCategoryDrawer(true);
+      }
+    }
+  }, [navigate]);
+
+  const handleToolChange = (tool) => {
+    if (tool.toolGroup === TOOL_GROUPS.VERIFICATION)
+      dispatch(selectTopMenuItem(TOP_MENU_ITEMS[0].title));
+
+    if (tool.toolGroup === TOOL_GROUPS.MORE)
+      dispatch(selectTopMenuItem(TOP_MENU_ITEMS[5].title));
+
+    dispatch(selectTool(tool.titleKeyword));
+  };
+
+  const currentLang = useSelector((state) => state.language);
+  const userAuthenticated = useSelector(
+    (state) => state.userSession && state.userSession.userAuthenticated,
+  );
+  const role = useSelector((state) => state.userSession.user.roles);
+  const betaTester = role.includes("BETA_TESTER");
+
+  // Set UI direction based on language reading direction
+  const direction = currentLang !== "ar" ? "ltr" : "rtl";
+
+  const [isSideMenuOpen, setIsSideMenuOpen] = useState(true);
+
+  const drawerRef = useRef(null);
+
+  const [classWidthToolbar, setClassWidthToolbar] = useState(
+    classes.drawerWidth,
+  );
+
+  const toggleSideMenu = () => {
+    setIsSideMenuOpen(!isSideMenuOpen);
+
+    if (classWidthToolbar === classes.drawerWidth) {
+      setClassWidthToolbar(classes.drawerWidthClose);
+      setTimeout(function () {}, 194);
+    } else {
+      setClassWidthToolbar(classes.drawerWidth);
+    }
+  };
+
+  /**
+   * Fires when the user clicks on a topMenuItem
+   * @param tool {Tool}
+   */
+  const handleSideMenuToolClick = (tool) => {
+    if (
+      !userAuthenticated &&
+      tool.rolesNeeded &&
+      tool.rolesNeeded.includes(ROLES.LOCK)
+    ) {
+      setOpenAlert(true);
+      return;
+    }
+
+    if (
+      tool.path === "csvSna" ||
+      tool.path === "factcheck" ||
+      tool.path === "xnetwork"
+    ) {
+      window.open(
+        process.env.REACT_APP_TSNA_SERVER + tool.path + "?lang=" + currentLang,
+        "_blank",
+      );
+      return;
+    }
+
+    if (tool.category === TOOLS_CATEGORIES.OTHER) {
+      navigate("/app/tools/" + tool.path);
+      handleToolChange(tool);
+      return;
+    }
+
+    tool.toolGroup === TOOL_GROUPS.MORE
+      ? navigate("/app/" + tool.path)
+      : navigate("/app/tools/" + tool.path);
+
+    handleToolChange(tool);
+  };
+
+  const toolsItem = tools.find((tool) => tool.titleKeyword === "navbar_tools");
+  const drawerItemsMore = tools.filter(
+    (tool) => tool.toolGroup === TOOL_GROUPS.MORE,
+  );
+
+  //Video items
+  const drawerItemsVideo = tools.filter(
+    (tool) => tool.category === TOOLS_CATEGORIES.VIDEO,
+  );
+  const [openListVideo, setOpenListVideo] = useState(() => {
+    const tool = tools.filter(
+      (tool) => tool.titleKeyword === selectedToolTitleKeyword,
+    )[0];
+    return tool.category === TOOLS_CATEGORIES.VIDEO;
+  });
+  const [classBorderVideo, setClassBorderVideo] = useState(null);
+
+  const handleClickListVideo = (setOpen) => {
+    if (setOpen) setOpenListVideo(setOpen);
+    else setOpenListVideo((prevState) => !prevState);
+    if (!classBorderVideo) {
+      setClassBorderVideo(classes.drawerCategoryBorder);
+    } else {
+      setClassBorderVideo(null);
+    }
+  };
+
+  //Image items
+  const drawerItemsImage = tools.filter(
+    (tool) => tool.category === TOOLS_CATEGORIES.IMAGE,
+  );
+  const [openListImage, setOpenListImage] = useState(false);
+  const [classBorderImage, setClassBorderImage] = useState(null);
+
+  const handleClickListImage = (setOpen) => {
+    if (setOpen) setOpenListImage(setOpen);
+    else setOpenListImage((prev) => !prev);
+    if (!openListImage) {
+      setClassBorderImage(classes.drawerCategoryBorder);
+    } else {
+      setClassBorderImage(null);
+    }
+  };
+
+  //Audio items
+  const drawerItemsAudio = tools.filter(
+    (tool) => tool.category === TOOLS_CATEGORIES.AUDIO,
+  );
+  const [openListAudio, setOpenListAudio] = useState(false);
+  const [classBorderAudio, setClassBorderAudio] = useState(null);
+
+  const handleClickListAudio = (setOpen) => {
+    if (setOpen) setOpenListAudio(setOpen);
+    else setOpenListAudio((prevState) => !prevState);
+    if (!openListAudio) {
+      setClassBorderAudio(classes.drawerCategoryBorder);
+    } else {
+      setClassBorderAudio(null);
+    }
+  };
+
+  //Search items
+  const drawerItemsSearch = tools.filter(
+    (tool) => tool.category === TOOLS_CATEGORIES.SEARCH,
+  );
+  const [openListSearch, setOpenListSearch] = useState(false);
+  const [classBorderSearch, setClassBorderSearch] = useState(null);
+
+  const handleClickListSearch = (setOpen) => {
+    if (setOpen) setOpenListSearch(setOpen);
+    else setOpenListSearch((prevState) => !prevState);
+    if (!openListSearch) {
+      setClassBorderSearch(classes.drawerCategoryBorder);
+    } else {
+      setClassBorderSearch(null);
+    }
+  };
+
+  //Data items
+  const drawerItemsData = tools.filter(
+    (tool) => tool.category === TOOLS_CATEGORIES.DATA_ANALYSIS,
+  );
+
+  const [openListData, setOpenListData] = useState(false);
+  const [classBorderData, setClassBorderData] = useState(null);
+
+  const handleClickListData = (setOpen) => {
+    if (setOpen) setOpenListData(setOpen);
+    else setOpenListData((prevState) => !prevState);
+    if (!openListData) {
+      setClassBorderData(classes.drawerCategoryBorder);
+    } else {
+      setClassBorderData(null);
+    }
+  };
+
+  const drawerItemsOtherTools = tools.filter(
+    (tool) => tool.category === TOOLS_CATEGORIES.OTHER,
+  );
+  const [openListOtherTools, setOpenListOtherTools] = useState(false);
+  const [classBorderOtherTools, setClassBorderOtherTools] = useState(null);
+
+  const handleClickListOtherTools = (setOpen) => {
+    if (setOpen) setOpenListOtherTools(setOpen);
+    else setOpenListOtherTools((prevState) => !prevState);
+    if (!openListOtherTools) {
+      setClassBorderOtherTools(classes.drawerCategoryBorder);
+    } else {
+      setClassBorderOtherTools(null);
+    }
+  };
+
+  let listItems = [];
+
+  const tmpListItems = [
+    {
+      titleKeyword: TOOLS_CATEGORIES.VIDEO,
+      icon: (
+        <VideoIcon
+          width="24px"
+          height="24px"
+          style={{ fill: "#4c4c4c" }}
+          title={TOOLS_CATEGORIES.VIDEO}
+        />
+      ),
+      list: drawerItemsVideo,
+      variableOpen: openListVideo,
+      setVariableOpen: setOpenListVideo,
+      handleOpenCategoryDrawer: handleClickListVideo,
+      classBorder: classBorderVideo,
+    },
+    {
+      titleKeyword: TOOLS_CATEGORIES.IMAGE,
+      icon: (
+        <ImageIcon
+          width="24px"
+          height="24px"
+          style={{ fill: "#4c4c4c" }}
+          title={TOOLS_CATEGORIES.IMAGE}
+        />
+      ),
+      list: drawerItemsImage,
+      variableOpen: openListImage,
+      setVariableOpen: setOpenListImage,
+      handleOpenCategoryDrawer: handleClickListImage,
+      classBorder: classBorderImage,
+    },
+    {
+      titleKeyword: TOOLS_CATEGORIES.AUDIO,
+      icon: (
+        <Audiotrack
+          width="24px"
+          height="24px"
+          style={{ fill: "#4c4c4c" }}
+          title={TOOLS_CATEGORIES.AUDIO}
+        />
+      ),
+      list: drawerItemsAudio,
+      variableOpen: openListAudio,
+      setVariableOpen: setOpenListAudio,
+      handleOpenCategoryDrawer: handleClickListAudio,
+      classBorder: classBorderAudio,
+    },
+    {
+      titleKeyword: TOOLS_CATEGORIES.SEARCH,
+      icon: (
+        <SearchIcon
+          width="24px"
+          height="24px"
+          style={{ fill: "#4c4c4c" }}
+          title={TOOLS_CATEGORIES.SEARCH}
+        />
+      ),
+      list: drawerItemsSearch,
+      variableOpen: openListSearch,
+      setVariableOpen: setOpenListSearch,
+      handleOpenCategoryDrawer: handleClickListSearch,
+      classBorder: classBorderSearch,
+    },
+    {
+      titleKeyword: TOOLS_CATEGORIES.DATA_ANALYSIS,
+      icon: (
+        <DataIcon
+          width="24px"
+          height="24px"
+          style={{ fill: "#4c4c4c" }}
+          title={TOOLS_CATEGORIES.DATA_ANALYSIS}
+        />
+      ),
+      list: drawerItemsData,
+      variableOpen: openListData,
+      setVariableOpen: setOpenListData,
+      handleOpenCategoryDrawer: handleClickListData,
+      classBorder: classBorderData,
+    },
+    {
+      titleKeyword: TOOLS_CATEGORIES.OTHER,
+      icon: <MoreHoriz style={{ fill: "#4c4c4c" }} />,
+      list: drawerItemsOtherTools,
+      variableOpen: openListOtherTools,
+      setVariableOpen: setOpenListOtherTools,
+      handleOpenCategoryDrawer: handleClickListOtherTools,
+      classBorder: classBorderOtherTools,
+    },
+  ];
+
+  tmpListItems.map((items) => {
+    const listTools = items.list;
+
+    for (let i = 0; i < listTools.length; i++) {
+      if (!listTools[i].rolesNeeded || listTools[i].rolesNeeded.length === 0) {
+        listItems.push(items);
+        break;
+      } else if (
+        listTools[i].rolesNeeded.some((roles) => role.includes(roles))
+      ) {
+        listItems.push(items);
+        break;
+      } else if (listTools[i].rolesNeeded.includes(TOOL_STATUS_ICON.LOCK)) {
+        listItems.push(items);
+        break;
+      }
+    }
+  });
+
+  /**
+   * Changes the color of the icon dynamically if the topMenuItem is selected
+   * @param tool {Tool}
+   * @returns {{fontSize: string, fill: (string)}|{fontSize: string}}
+   */
+  const iconConditionalStyling = (tool) => {
+    if (!tool.titleKeyword)
+      return {
+        fontSize: "24px",
+      };
+
+    let isSelected;
+
+    // Case for the about topMenuItem
+    if (!tool.category) {
+      isSelected =
+        selectedToolTitleKeyword === tool.titleKeyword ||
+        topMenuItemSelected === tool.titleKeyword;
+    } else if (tool.category !== TOOLS_CATEGORIES.OTHER) {
+      isSelected =
+        selectedToolTitleKeyword === tool.titleKeyword &&
+        topMenuItemSelected === "navbar_tools";
+    } else {
+      isSelected = selectedToolTitleKeyword === tool.titleKeyword;
+    }
+
+    return {
+      fill: isSelected ? "#00926c" : "#4c4c4c",
+      color: isSelected ? "#00926c" : "#4c4c4c",
+      fontSize: "24px",
+    };
+  };
+
+  return (
+    <Drawer
+      variant="permanent"
+      className={clsx(classes.drawer, {
+        [classes.drawerOpen]: isSideMenuOpen,
+        [classes.drawerClose]: !isSideMenuOpen,
+      })}
+      classes={{
+        paper: clsx({
+          [classes.drawerOpen]: isSideMenuOpen,
+          [classes.drawerClose]: !isSideMenuOpen,
+        }),
+      }}
+      ref={drawerRef}
+      open={isSideMenuOpen}
+    >
+      <List
+        style={{
+          marginTop: "80px",
+        }}
+      >
+        <ListSubheader
+          style={{
+            paddingTop: "16px",
+            paddingBottom: "16px",
+            backgroundColor: "#ffffff",
+            textAlign: "start",
+          }}
+        >
+          <Typography
+            style={{
+              fontWeight: "500",
+              fontSize: "10px",
+              color: "#B0B0B0",
+              textTransform: "uppercase",
+            }}
+          >
+            {isSideMenuOpen
+              ? keyword("navbar_verification")
+              : keyword("navbar_verification_short")}
+          </Typography>
+        </ListSubheader>
+        <ListItemButton
+          selected={
+            topMenuItemSelected === toolsItem.titleKeyword &&
+            selectedToolTitleKeyword === toolsItem.titleKeyword
+          }
+          onClick={() => handleSideMenuToolClick(toolsItem)}
+          component={Link}
+          to={toolsItem.path}
+        >
+          {isSideMenuOpen ? (
+            <>
+              <ListItemIcon
+                sx={{
+                  marginRight: "12px",
+                  minWidth: "unset",
+                }}
+              >
+                <toolsItem.icon sx={iconConditionalStyling(toolsItem)} />
+              </ListItemIcon>
+              <ListItemText
+                primary={
+                  <Typography
+                    color={
+                      topMenuItemSelected === toolsItem.titleKeyword &&
+                      selectedToolTitleKeyword === toolsItem.titleKeyword
+                        ? "primary"
+                        : ""
+                    }
+                    className={`${
+                      isSideMenuOpen ? classes.drawerListText : classes.hidden
+                    }`}
+                  >
+                    {keyword(toolsItem.titleKeyword)}
+                  </Typography>
+                }
+              />
+            </>
+          ) : (
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="center"
+              width="100%"
+            >
+              <toolsItem.icon sx={iconConditionalStyling(toolsItem)} />
+            </Stack>
+          )}
+        </ListItemButton>
+        {listItems.map((item, key) => {
+          const element = (
+            <Box>
+              <ListItemButton onClick={() => item.handleOpenCategoryDrawer()}>
+                {isSideMenuOpen ? (
+                  <>
+                    <ListItemIcon
+                      sx={{
+                        marginRight: "12px",
+                        minWidth: "unset",
+                      }}
+                    >
+                      {item.icon}
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={
+                        <Typography className={classes.drawerListText}>
+                          {keyword(item.titleKeyword)}
+                        </Typography>
+                      }
+                    />
+                    {item.variableOpen ? <ExpandLess /> : <ExpandMore />}
+                  </>
+                ) : (
+                  <Stack
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="center"
+                    width="100%"
+                  >
+                    {item.icon}
+                  </Stack>
+                )}
+              </ListItemButton>
+
+              <Collapse in={item.variableOpen} timeout="auto" unmountOnExit>
+                <List component="div" disablePadding>
+                  {item.list.map((itemList, keyList) => {
+                    let element = (
+                      <ListItemButton
+                        selected={
+                          topMenuItemSelected === toolsItem.titleKeyword &&
+                          selectedToolTitleKeyword === itemList.titleKeyword
+                        }
+                        key={keyList}
+                        onClick={() => handleSideMenuToolClick(itemList)}
+                      >
+                        {isSideMenuOpen ? (
+                          <>
+                            <ListItemIcon
+                              className={classes.drawerListNested}
+                              sx={{
+                                marginRight: "12px",
+                                minWidth: "unset",
+                              }}
+                            >
+                              <itemList.icon
+                                sx={iconConditionalStyling(itemList)}
+                              />
+                            </ListItemIcon>
+                            <ListItemText
+                              primary={
+                                <Typography
+                                  color={
+                                    topMenuItemSelected ===
+                                      toolsItem.titleKeyword &&
+                                    selectedToolTitleKeyword ===
+                                      itemList.titleKeyword
+                                      ? "primary"
+                                      : ""
+                                  }
+                                  className={classes.drawerListText}
+                                >
+                                  {keyword(itemList.titleKeyword)}
+                                </Typography>
+                              }
+                            />
+                          </>
+                        ) : (
+                          <Stack
+                            direction="row"
+                            alignItems="center"
+                            justifyContent="center"
+                            width="100%"
+                          >
+                            <itemList.icon
+                              sx={iconConditionalStyling(itemList)}
+                            />
+                          </Stack>
+                        )}
+                      </ListItemButton>
+                    );
+
+                    if (
+                      itemList.rolesNeeded &&
+                      itemList.rolesNeeded.includes("BETA_TESTER")
+                    ) {
+                      if (betaTester) {
+                        return element;
+                      } else {
+                        return null;
+                      }
+                    } else {
+                      return element;
+                    }
+                  })}
+                </List>
+              </Collapse>
+            </Box>
+          );
+
+          return <Box key={key}>{element}</Box>;
+        })}
+        <Box m={2} />
+        <ListSubheader style={{ paddingTop: "16px", paddingBottom: "16px" }}>
+          <Typography
+            style={{
+              fontWeight: "500",
+              fontSize: "10px",
+              color: "#B0B0B0",
+              textTransform: "uppercase",
+            }}
+          >
+            {isSideMenuOpen
+              ? keyword("navbar_more")
+              : keyword("navbar_more_short")}
+          </Typography>
+        </ListSubheader>
+        {drawerItemsMore.map((item, key) => {
+          return (
+            <ListItemButton
+              selected={
+                topMenuItemSelected === item.titleKeyword ||
+                selectedToolTitleKeyword === item.titleKeyword
+              }
+              key={key}
+              onClick={() => handleSideMenuToolClick(item)}
+            >
+              {isSideMenuOpen ? (
+                <>
+                  <ListItemIcon
+                    sx={{
+                      marginRight: "12px",
+                      minWidth: "unset",
+                    }}
+                  >
+                    <item.icon sx={iconConditionalStyling(item)} />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary={
+                      <Typography
+                        color={
+                          topMenuItemSelected === item.titleKeyword ||
+                          selectedToolTitleKeyword === item.titleKeyword
+                            ? "primary"
+                            : ""
+                        }
+                        className={`${
+                          isSideMenuOpen
+                            ? classes.drawerListText
+                            : classes.hidden
+                        }`}
+                      >
+                        {keyword(item.titleKeyword)}
+                      </Typography>
+                    }
+                  />
+                </>
+              ) : (
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  justifyContent="center"
+                  width="100%"
+                >
+                  <item.icon sx={iconConditionalStyling(item)} />
+                </Stack>
+              )}
+            </ListItemButton>
+          );
+        })}
+      </List>
+
+      <div className={classes.grow} />
+
+      <Box
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "stretch",
+          position: "sticky",
+          bottom: "0px",
+          backgroundColor: "#ffffff",
+          zIndex: "9",
+        }}
+      >
+        <Box p={1}>
+          <Divider />
+        </Box>
+
+        <Button
+          onClick={toggleSideMenu}
+          style={{ alignSelf: "center" }}
+          startIcon={
+            isSideMenuOpen ? (
+              direction === "ltr" ? (
+                <ChevronLeft />
+              ) : (
+                <ChevronRight />
+              )
+            ) : null
+          }
+        >
+          {isSideMenuOpen ? (
+            keyword("navbar_collapse")
+          ) : direction === "ltr" ? (
+            <ChevronRight />
+          ) : (
+            <ChevronLeft />
+          )}
+        </Button>
+
+        <Box m={1} />
+      </Box>
+    </Drawer>
+  );
+};
+
+export default SideMenu;
diff --git a/src/components/TopMenu/index.jsx b/src/components/TopMenu/index.jsx
new file mode 100644
index 000000000..c4bf05d2e
--- /dev/null
+++ b/src/components/TopMenu/index.jsx
@@ -0,0 +1,146 @@
+import React from "react";
+import { AppBar, Grid, Stack, Tab, Tabs, Toolbar } from "@mui/material";
+import LogoEuCom from "../NavBar/images/SVG/Navbar/ep-logo.svg";
+import LogoInVidWeverify from "../NavBar/images/SVG/Navbar/invid_weverify.svg";
+import LogoVera from "../NavBar/images/SVG/Navbar/vera-logo_black.svg";
+import { Link, useNavigate } from "react-router-dom";
+import AdvancedTools from "../NavItems/tools/Alltools/AdvancedTools/AdvancedTools";
+import Languages from "../NavItems/languages/languages";
+import useMyStyles from "../Shared/MaterialUiStyles/useMyStyles";
+import { useDispatch, useSelector } from "react-redux";
+import { i18nLoadNamespace } from "../Shared/Languages/i18nLoadNamespace";
+import { selectTopMenuItem } from "../../redux/reducers/navReducer";
+import { toolsHome } from "../../constants/tools";
+import { resetToolSelected } from "../../redux/reducers/tools/toolReducer";
+
+const TopMenu = ({ topMenuItems }) => {
+  const classes = useMyStyles();
+
+  const keyword = i18nLoadNamespace("components/NavBar");
+
+  const dispatch = useDispatch();
+
+  const navigate = useNavigate();
+
+  const LOGO_EU = process.env.REACT_APP_LOGO_EU;
+
+  const topMenuItemSelected = useSelector((state) => state.nav);
+
+  const handleTopMenuChange = (event, newValue) => {
+    dispatch(selectTopMenuItem(newValue));
+
+    if (newValue !== toolsHome.titleKeyword) {
+      dispatch(resetToolSelected());
+    }
+  };
+
+  const handleHomeIconClick = () => {
+    navigate("/app/" + toolsHome.path);
+  };
+
+  const iconConditionalStyling = (toolName) => {
+    return {
+      fill: topMenuItemSelected === toolName ? "#00926c" : "#4c4c4c",
+      fontSize: "24px",
+    };
+  };
+
+  return (
+    <AppBar position="fixed" width={"100%"}>
+      <Toolbar
+        className={classes.toolbar}
+        style={{ borderBottom: "solid 1px #dedbdb" }}
+      >
+        <Grid
+          container
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          spacing={{ sm: 1, md: 2 }}
+        >
+          <Grid item xs={2}>
+            <Stack
+              direction="row"
+              justifyContent="flex-start"
+              alignItems="center"
+              spacing={{ sm: 1, md: 2 }}
+            >
+              {LOGO_EU ? (
+                <LogoEuCom
+                  style={{
+                    height: "auto",
+                    minWidth: "48px",
+                    width: { sm: "48px", md: "80px" },
+                  }}
+                  alt="logo"
+                  className={classes.logoLeft}
+                  onClick={handleHomeIconClick}
+                />
+              ) : (
+                <LogoInVidWeverify
+                  style={{
+                    height: "auto",
+                    minWidth: "96px",
+                    width: { sm: "96px", md: "96px" },
+                  }}
+                  alt="logo"
+                  className={classes.logoLeft}
+                  onClick={handleHomeIconClick}
+                />
+              )}
+              <LogoVera
+                style={{
+                  height: "auto",
+                  minWidth: "48px",
+                  width: { sm: "48px", md: "80px" },
+                }}
+                alt="logo"
+                className={classes.logoRight}
+                onClick={handleHomeIconClick}
+              />
+            </Stack>
+          </Grid>
+          <Grid item xs={7}>
+            <Tabs
+              value={topMenuItemSelected}
+              variant="scrollable"
+              onChange={handleTopMenuChange}
+              scrollButtons="auto"
+              allowScrollButtonsMobile
+              indicatorColor="primary"
+              textColor="primary"
+              TabIndicatorProps={{
+                style: { display: "none" },
+              }}
+              sx={{ color: "black" }}
+            >
+              {topMenuItems.map((item, index) => {
+                return (
+                  <Tab
+                    key={index}
+                    label={keyword(item.title)}
+                    icon={<item.icon sx={iconConditionalStyling(item.title)} />}
+                    to={item.path}
+                    component={Link}
+                    sx={{
+                      minWidth: "120px",
+                    }}
+                    value={item.title}
+                  />
+                );
+              })}
+            </Tabs>
+          </Grid>
+          <Grid item xs={2}>
+            <AdvancedTools />
+          </Grid>
+          <Grid item xs={1}>
+            <Languages />
+          </Grid>
+        </Grid>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default TopMenu;
diff --git a/src/constants/tools.jsx b/src/constants/tools.jsx
new file mode 100644
index 000000000..19d6ad90f
--- /dev/null
+++ b/src/constants/tools.jsx
@@ -0,0 +1,630 @@
+import React from "react";
+
+import { SvgIcon } from "@mui/material";
+import {
+  Archive as ArchiveIcon,
+  AudioFile,
+  Gradient,
+  ManageSearch,
+} from "@mui/icons-material";
+
+import ToolsIcon from "../components/NavBar/images/SVG/Navbar/Tools.svg";
+
+import AnalysisIcon from "../components/NavBar/images/SVG/Video/Video_analysis.svg";
+import KeyframesIcon from "../components/NavBar/images/SVG/Video/Keyframes.svg";
+import ThumbnailsIcon from "../components/NavBar/images/SVG/Video/Thumbnails.svg";
+import VideoRightsIcon from "../components/NavBar/images/SVG/Video/Video_rights.svg";
+
+import MetadataIcon from "../components/NavBar/images/SVG/Image/Metadata.svg";
+import DeepfakeIcon from "../components/NavBar/images/SVG/Image/Deepfake.svg";
+import ImageAnalysisIcon from "../components/NavBar/images/SVG/Image/Image_analysis.svg";
+import MagnifierIcon from "../components/NavBar/images/SVG/Image/Magnifier.svg";
+import ForensicIcon from "../components/NavBar/images/SVG/Image/Forensic.svg";
+import OcrIcon from "../components/NavBar/images/SVG/Image/OCR.svg";
+import GifIcon from "../components/NavBar/images/SVG/Image/Gif.svg";
+import GeolocationIcon from "../components/NavBar/images/SVG/Image/Geolocation.svg";
+
+import TwitterSearchIcon from "../components/NavBar/images/SVG/Search/Twitter_search.svg";
+import CovidSearchIcon from "../components/NavBar/images/SVG/Search/Covid19.svg";
+import XnetworkIcon from "../components/NavBar/images/SVG/Search/Xnetwork.svg";
+
+import TwitterSnaIcon from "../components/NavBar/images/SVG/DataAnalysis/Twitter_sna.svg";
+import CsvSnaIcon from "../components/NavBar/images/SVG/DataAnalysis/CSV_SNA.svg";
+import AboutIcon from "../components/NavBar/images/SVG/Navbar/About.svg";
+import ToolsMenu from "../components/NavItems/tools/Alltools/ToolsMenu";
+import Analysis from "../components/NavItems/tools/Analysis/Analysis";
+import { Footer, FOOTER_TYPES } from "../components/Shared/Footer/Footer";
+import Keyframes from "../components/NavItems/tools/Keyframes/Keyframes";
+import Thumbnails from "../components/NavItems/tools/Thumbnails/Thumbnails";
+import VideoRights from "../components/NavItems/tools/VideoRights/VideoRights";
+import Metadata from "../components/NavItems/tools/Metadata/Metadata";
+import DeepfakeVideo from "../components/NavItems/tools/Deepfake/DeepfakeVideo";
+import AnalysisImg from "../components/NavItems/tools/Analysis_images/Analysis";
+import Magnifier from "../components/NavItems/tools/Magnifier/Magnifier";
+import Forensic from "../components/NavItems/tools/Forensic/Forensic";
+import OCR from "../components/NavItems/tools/OCR/OCR";
+import CheckGif from "../components/NavItems/tools/Gif/CheckGif";
+import SyntheticImageDetection from "../components/NavItems/tools/SyntheticImageDetection";
+import DeepfakeImage from "../components/NavItems/tools/Deepfake/DeepfakeImage";
+import Geolocation from "../components/NavItems/tools/Geolocation/Geolocation";
+import Loccus from "../components/NavItems/tools/Loccus";
+import TwitterAdvancedSearch from "../components/NavItems/tools/TwitterAdvancedSearch/TwitterAdvancedSearch";
+import SemanticSearch from "../components/NavItems/tools/SemanticSearch";
+import TwitterSna from "../components/NavItems/tools/TwitterSna/TwitterSna";
+import Archive from "../components/NavItems/tools/Archive";
+import About from "../components/NavItems/About/About";
+
+/**
+ * Represents the categories to which the tools belong
+ * @typedef ToolsCategories
+ * @type {{OTHER: string, ALL: string, IMAGE: string, VIDEO: string, SEARCH: string, DATA_ANALYSIS: string, AUDIO: string}}
+ */
+export const TOOLS_CATEGORIES = {
+  VIDEO: "navbar_category_video",
+  IMAGE: "navbar_category_image",
+  AUDIO: "navbar_category_audio",
+  SEARCH: "navbar_category_search",
+  DATA_ANALYSIS: "navbar_category_data",
+  OTHER: "navbar_category_other",
+
+  // Used to display the home page
+  ALL: "navbar_category_general",
+};
+
+/**
+ * Represents the possible temporary states of the tools:
+ * - An experimental topMenuItem is not ready for production, and available to beta testers
+ * - A new topMenuItem is an experimental topMenuItem that was released to everyone
+ * - A locked topMenuItem is a topMenuItem available to registered users
+ * @typedef ToolsStatusIcon
+ * @type {{NEW: string, LOCK: string, EXPERIMENTAL: string}}
+ */
+export const TOOL_STATUS_ICON = {
+  EXPERIMENTAL: "experimental",
+  NEW: "new",
+  LOCK: "lock",
+};
+
+/**
+ * Represents the different segments of tools.
+ * Verification - The tools that can be used for Verification
+ * Learning - Resources to learn how to use the Verification Tools
+ * More - Settings and general information
+ * @typedef ToolGroups
+ * @type {{MORE: string, LEARNING: string, VERIFICATION: string}}
+ */
+export const TOOL_GROUPS = {
+  VERIFICATION: "verification",
+  LEARNING: "learning",
+  MORE: "more",
+};
+
+/**
+ * Represents the user roles that can be needed to access a given topMenuItem
+ * @typedef Roles
+ * @type {{BETA_TESTER: string, ARCHIVE: string, LOCK: string}}
+ */
+export const ROLES = {
+  ARCHIVE: "ARCHIVE",
+  BETA_TESTER: "BETA_TESTER",
+  LOCK: "lock",
+};
+
+/**
+ * Represents a topMenuItem that can be used by users
+ */
+class Tool {
+  /**
+   *
+   * @param titleKeyword {string} The keyword for the name of the topMenuItem
+   * @param descriptionKeyword {string=} The keyword for the topMenuItem description
+   * @param icon {SvgIconComponent | React.JSX.Element} The topMenuItem's icon
+   * @param category {ToolsCategories} The topMenuItem's category
+   * @param rolesIcons {?Array<ToolsStatusIcon>} Icons representing the development status of the topMenuItem
+   * @param rolesNeeded {?Array<Roles>} Role(s) needed to access the topMenuItem
+   * @param path {string} The url path to the topMenuItem
+   * @param toolGroup {ToolGroups} The group to which the topMenuItem belongs
+   * @param content The React Element to display for the topMenuItem
+   * @param footer The React element to display at the bottom of the topMenuItem React Element
+   */
+  constructor(
+    titleKeyword,
+    descriptionKeyword,
+    icon,
+    category,
+    rolesIcons,
+    rolesNeeded,
+    path,
+    toolGroup,
+    content,
+    footer,
+  ) {
+    this.titleKeyword = titleKeyword;
+    this.descriptionKeyword = descriptionKeyword;
+    this.icon = icon;
+    this.category = category;
+    this.rolesIcons = rolesIcons;
+    this.rolesNeeded = rolesNeeded;
+    this.path = path;
+    this.toolGroup = toolGroup;
+    this.content = content;
+    this.footer = footer;
+  }
+}
+
+const ToolsSvgIcon = (props) => {
+  return <SvgIcon component={ToolsIcon} inheritViewBox {...props} />;
+};
+
+const AnalysisSvgIcon = (props) => {
+  return <SvgIcon component={AnalysisIcon} inheritViewBox {...props} />;
+};
+
+const KeyframesSvgIcon = (props) => {
+  return <SvgIcon component={KeyframesIcon} inheritViewBox {...props} />;
+};
+
+const thumbnailsSvgIcon = (props) => {
+  return <SvgIcon component={ThumbnailsIcon} inheritViewBox {...props} />;
+};
+
+const videoRightsSvgIcon = (props) => {
+  return <SvgIcon component={VideoRightsIcon} inheritViewBox {...props} />;
+};
+
+const metadataSvgIcon = (props) => {
+  return <SvgIcon component={MetadataIcon} inheritViewBox {...props} />;
+};
+
+const deepfakeSvgIcon = (props) => {
+  return <SvgIcon component={DeepfakeIcon} inheritViewBox {...props} />;
+};
+
+const imageAnalysisSvgIcon = (props) => {
+  return <SvgIcon component={ImageAnalysisIcon} inheritViewBox {...props} />;
+};
+
+const magnifierSvgIcon = (props) => {
+  return <SvgIcon component={MagnifierIcon} inheritViewBox {...props} />;
+};
+
+const forensicSvgIcon = (props) => {
+  return <SvgIcon component={ForensicIcon} inheritViewBox {...props} />;
+};
+
+const ocrSvgIcon = (props) => {
+  return <SvgIcon component={OcrIcon} inheritViewBox {...props} />;
+};
+
+const gifSvgIcon = (props) => {
+  return <SvgIcon component={GifIcon} inheritViewBox {...props} />;
+};
+
+const syntheticImageSvgIcon = (props) => {
+  return <Gradient inheritViewBox {...props} />;
+};
+
+const geolocationSvgIcon = (props) => {
+  return <SvgIcon component={GeolocationIcon} inheritViewBox {...props} />;
+};
+
+const audioFileSvgIcon = (props) => {
+  return <AudioFile inheritViewBox {...props} />;
+};
+
+const twitterSearchSvgIcon = (props) => {
+  return <SvgIcon component={TwitterSearchIcon} inheritViewBox {...props} />;
+};
+
+const manageSearchSvgIcon = (props) => {
+  return <ManageSearch inheritViewBox {...props} />;
+};
+
+const covidSearchSvgIcon = (props) => {
+  return <SvgIcon component={CovidSearchIcon} inheritViewBox {...props} />;
+};
+
+const xnetworkSvgIcon = (props) => {
+  return <SvgIcon component={XnetworkIcon} inheritViewBox {...props} />;
+};
+
+const twitterSnaSvgIcon = (props) => {
+  return <SvgIcon component={TwitterSnaIcon} inheritViewBox {...props} />;
+};
+
+const csvSnaSvgIcon = (props) => {
+  return <SvgIcon component={CsvSnaIcon} inheritViewBox {...props} />;
+};
+
+const archiveSvgIcon = (props) => {
+  return <ArchiveIcon inheritViewBox {...props} />;
+};
+
+const aboutSvgIcon = (props) => {
+  return <SvgIcon component={AboutIcon} inheritViewBox {...props} />;
+};
+
+/**
+ * The Homepage that lists all the tools available
+ * @type {Tool}
+ */
+export const toolsHome = new Tool(
+  "navbar_tools",
+  "",
+  ToolsSvgIcon,
+  TOOLS_CATEGORIES.ALL,
+  null,
+  null,
+  "tools",
+  TOOL_GROUPS.VERIFICATION,
+  <ToolsMenu />,
+  <div />,
+);
+
+/**
+ * Video tools
+ **/
+
+const videoAnalysis = new Tool(
+  "navbar_analysis_video",
+  "navbar_analysis_description",
+  AnalysisSvgIcon,
+  TOOLS_CATEGORIES.VIDEO,
+  null,
+  null,
+  "analysis",
+  TOOL_GROUPS.VERIFICATION,
+  <Analysis />,
+  <Footer type={FOOTER_TYPES.ITI} />,
+);
+
+const keyframes = new Tool(
+  "navbar_keyframes",
+  "navbar_keyframes_description",
+  KeyframesSvgIcon,
+  TOOLS_CATEGORIES.VIDEO,
+  null,
+  null,
+  "keyframes",
+  TOOL_GROUPS.VERIFICATION,
+  <Keyframes />,
+  <Footer type={FOOTER_TYPES.ITI} />,
+);
+
+const thumbnails = new Tool(
+  "navbar_thumbnails",
+  "navbar_thumbnails_description",
+  thumbnailsSvgIcon,
+  TOOLS_CATEGORIES.VIDEO,
+  null,
+  null,
+  "thumbnails",
+  TOOL_GROUPS.VERIFICATION,
+  <Thumbnails />,
+  <Footer type={FOOTER_TYPES.AFP} />,
+);
+
+const videoRights = new Tool(
+  "navbar_rights",
+  "navbar_rights_description",
+  videoRightsSvgIcon,
+  TOOLS_CATEGORIES.VIDEO,
+  null,
+  null,
+  "copyright",
+  TOOL_GROUPS.VERIFICATION,
+  <VideoRights />,
+  <Footer type={FOOTER_TYPES.GRIHO} />,
+);
+
+const videoMetadata = new Tool(
+  "navbar_metadata_video",
+  "navbar_metadata_description",
+  metadataSvgIcon,
+  TOOLS_CATEGORIES.VIDEO,
+  null,
+  null,
+  "metadata",
+  TOOL_GROUPS.VERIFICATION,
+  <Metadata mediaType={"video"} />,
+  <Footer type={FOOTER_TYPES.AFP} />,
+);
+
+const videoDeepfake = new Tool(
+  "navbar_deepfake_video",
+  "navbar_deepfake_video_description",
+  deepfakeSvgIcon,
+  TOOLS_CATEGORIES.VIDEO,
+  [TOOL_STATUS_ICON.EXPERIMENTAL],
+  [ROLES.BETA_TESTER],
+  "deepfakeVideo",
+  TOOL_GROUPS.VERIFICATION,
+  <DeepfakeVideo />,
+  <Footer type={FOOTER_TYPES.ITI} />,
+);
+
+/**
+ * Image tools
+ **/
+
+const imageAnalysis = new Tool(
+  "navbar_analysis_image",
+  "navbar_analysis_image_description",
+  imageAnalysisSvgIcon,
+  TOOLS_CATEGORIES.IMAGE,
+  null,
+  null,
+  "analysisImage",
+  TOOL_GROUPS.VERIFICATION,
+  <AnalysisImg />,
+  <Footer type={FOOTER_TYPES.ITI} />,
+);
+
+const imageMagnifier = new Tool(
+  "navbar_magnifier",
+  "navbar_magnifier_description",
+  magnifierSvgIcon,
+  TOOLS_CATEGORIES.IMAGE,
+  null,
+  null,
+  "magnifier",
+  TOOL_GROUPS.VERIFICATION,
+  <Magnifier />,
+  <Footer type={FOOTER_TYPES.AFP} />,
+);
+
+const imageMetadata = new Tool(
+  "navbar_metadata_image",
+  "navbar_metadata_description",
+  metadataSvgIcon,
+  TOOLS_CATEGORIES.IMAGE,
+  null,
+  null,
+  "metadata_image",
+  TOOL_GROUPS.VERIFICATION,
+  <Metadata mediaType={"image"} />,
+  <Footer type={FOOTER_TYPES.AFP} />,
+);
+
+const imageForensic = new Tool(
+  "navbar_forensic",
+  "navbar_forensic_description",
+  forensicSvgIcon,
+  TOOLS_CATEGORIES.IMAGE,
+  null,
+  null,
+  "forensic",
+  TOOL_GROUPS.VERIFICATION,
+  <Forensic />,
+  <Footer type={FOOTER_TYPES.ITI_BORELLI_AFP} />,
+);
+
+const imageOcr = new Tool(
+  "navbar_ocr",
+  "navbar_ocr_description",
+  ocrSvgIcon,
+  TOOLS_CATEGORIES.IMAGE,
+  null,
+  null,
+  "ocr",
+  TOOL_GROUPS.VERIFICATION,
+  <OCR />,
+  <Footer type={FOOTER_TYPES.USFD} />,
+);
+
+const imageGif = new Tool(
+  "navbar_gif",
+  "navbar_gif_description",
+  gifSvgIcon,
+  TOOLS_CATEGORIES.IMAGE,
+  [TOOL_STATUS_ICON.LOCK],
+  [ROLES.LOCK],
+  "gif",
+  TOOL_GROUPS.VERIFICATION,
+  <CheckGif />,
+  <Footer type={FOOTER_TYPES.BORELLI_AFP} />,
+);
+
+const imageSyntheticDetection = new Tool(
+  "navbar_synthetic_image_detection",
+  "navbar_synthetic_image_detection_description",
+  syntheticImageSvgIcon,
+  TOOLS_CATEGORIES.IMAGE,
+  [TOOL_STATUS_ICON.NEW, TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK],
+  [ROLES.BETA_TESTER],
+  "syntheticImageDetection",
+  TOOL_GROUPS.VERIFICATION,
+  <SyntheticImageDetection />,
+  <Footer type={FOOTER_TYPES.ITI_UNINA} />,
+);
+
+const imageDeepfake = new Tool(
+  "navbar_deepfake_image",
+  "navbar_deepfake_image_description",
+  deepfakeSvgIcon,
+  TOOLS_CATEGORIES.IMAGE,
+  [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK],
+  [ROLES.BETA_TESTER],
+  "deepfakeImage",
+  TOOL_GROUPS.VERIFICATION,
+  <DeepfakeImage />,
+  <Footer type={FOOTER_TYPES.ITI} />,
+);
+
+const imageGeolocation = new Tool(
+  "navbar_geolocation",
+  "navbar_geolocation_description",
+  geolocationSvgIcon,
+  TOOLS_CATEGORIES.IMAGE,
+  [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK],
+  [ROLES.BETA_TESTER],
+  "geolocation",
+  TOOL_GROUPS.VERIFICATION,
+  <Geolocation />,
+  <Footer type={FOOTER_TYPES.AFP} />,
+);
+
+/**
+ * Audio tools
+ **/
+
+const audioLoccus = new Tool(
+  "navbar_loccus",
+  "navbar_loccus_description",
+  audioFileSvgIcon,
+  TOOLS_CATEGORIES.AUDIO,
+  [TOOL_STATUS_ICON.NEW, TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.LOCK],
+  [ROLES.BETA_TESTER],
+  "loccus",
+  TOOL_GROUPS.VERIFICATION,
+  <Loccus />,
+  <Footer type={FOOTER_TYPES.LOCCUS} />,
+);
+
+/**
+ * Search tools
+ **/
+
+const searchTwitter = new Tool(
+  "navbar_twitter",
+  "navbar_twitter_description",
+  twitterSearchSvgIcon,
+  TOOLS_CATEGORIES.SEARCH,
+  null,
+  null,
+  "twitter",
+  TOOL_GROUPS.VERIFICATION,
+  <TwitterAdvancedSearch />,
+  <Footer type={FOOTER_TYPES.AFP} />,
+);
+
+const searchSemantic = new Tool(
+  "navbar_semantic_search",
+  "navbar_semantic_search_description",
+  manageSearchSvgIcon,
+  TOOLS_CATEGORIES.SEARCH,
+  [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.NEW, TOOL_STATUS_ICON.LOCK],
+  [ROLES.LOCK],
+  "semanticSearch",
+  TOOL_GROUPS.VERIFICATION,
+  <SemanticSearch />,
+  <Footer type={FOOTER_TYPES.KINIT} />,
+);
+
+const searchCovid = new Tool(
+  "navbar_covidsearch",
+  "navbar_covidsearch_description",
+  covidSearchSvgIcon,
+  TOOLS_CATEGORIES.SEARCH,
+  null,
+  null,
+  "factcheck",
+  TOOL_GROUPS.VERIFICATION,
+  null,
+  null,
+);
+
+const searchXnetwork = new Tool(
+  "navbar_xnetwork",
+  "navbar_xnetwork_description",
+  xnetworkSvgIcon,
+  TOOLS_CATEGORIES.SEARCH,
+  null,
+  null,
+  "xnetwork",
+  TOOL_GROUPS.VERIFICATION,
+  null,
+  null,
+);
+
+/**
+ * Data Analysis tools
+ **/
+
+const dataAnalysisSna = new Tool(
+  "navbar_twitter_sna",
+  "navbar_twitter_sna_description",
+  twitterSnaSvgIcon,
+  TOOLS_CATEGORIES.DATA_ANALYSIS,
+  [TOOL_STATUS_ICON.LOCK],
+  [ROLES.LOCK],
+  "twitterSna",
+  TOOL_GROUPS.VERIFICATION,
+  <TwitterSna />,
+  <Footer type={FOOTER_TYPES.USFD_AFP_EU_DISINFOLAB} />,
+);
+
+const dataAnalysisCrowdtangle = new Tool(
+  "navbar_twitter_crowdtangle",
+  "navbar_twitter_crowdtangle_description",
+  csvSnaSvgIcon,
+  TOOLS_CATEGORIES.DATA_ANALYSIS,
+  null,
+  null,
+  "csvSna",
+  TOOL_GROUPS.VERIFICATION,
+  null,
+  null,
+);
+
+/**
+ * Other tools
+ **/
+
+const archiving = new Tool(
+  "navbar_archiving",
+  "navbar_archiving_description",
+  archiveSvgIcon,
+  TOOLS_CATEGORIES.OTHER,
+  [TOOL_STATUS_ICON.EXPERIMENTAL, TOOL_STATUS_ICON.NEW, TOOL_STATUS_ICON.LOCK],
+  [ROLES.ARCHIVE],
+  "archive",
+  TOOL_GROUPS.VERIFICATION,
+  <Archive />,
+  <Footer type={FOOTER_TYPES.AFP} />,
+);
+
+/**
+ *
+ * Other Group tools
+ */
+const about = new Tool(
+  "navbar_about",
+  "",
+  aboutSvgIcon,
+  null,
+  null,
+  null,
+  "about",
+  TOOL_GROUPS.MORE,
+  <About />,
+  null,
+);
+
+export const tools = Object.freeze([
+  toolsHome,
+  videoAnalysis,
+  keyframes,
+  thumbnails,
+  videoRights,
+  videoMetadata,
+  videoDeepfake,
+  imageAnalysis,
+  imageMagnifier,
+  imageMetadata,
+  imageForensic,
+  imageOcr,
+  imageGif,
+  imageSyntheticDetection,
+  imageDeepfake,
+  imageGeolocation,
+  audioLoccus,
+  searchTwitter,
+  searchSemantic,
+  searchCovid,
+  searchXnetwork,
+  dataAnalysisSna,
+  dataAnalysisCrowdtangle,
+  archiving,
+  about,
+]);
diff --git a/src/constants/topMenuItems.jsx b/src/constants/topMenuItems.jsx
new file mode 100644
index 000000000..09801a3bb
--- /dev/null
+++ b/src/constants/topMenuItems.jsx
@@ -0,0 +1,98 @@
+import React from "react";
+import { Box, SvgIcon } from "@mui/material";
+import ToolsIcon from "../components/NavBar/images/SVG/Navbar/Tools.svg";
+import Assistant from "../components/NavItems/Assistant/Assistant";
+import { Footer, FOOTER_TYPES } from "../components/Shared/Footer/Footer";
+import ClassRoom from "../components/NavItems/ClassRoom/ClassRoom";
+import About from "../components/NavItems/About/About";
+import Interactive from "../components/NavItems/Interactive/Interactive";
+import Tutorial from "../components/NavItems/tutorial/tutorial";
+import AssistantIcon from "../components/NavBar/images/SVG/Navbar/Assistant.svg";
+
+import ClassroomIcon from "../components/NavBar/images/SVG/Navbar/Classroom.svg";
+import InteractiveIcon from "../components/NavBar/images/SVG/Navbar/Interactive.svg";
+
+import AboutIcon from "../components/NavBar/images/SVG/Navbar/About.svg";
+import GuideIcon from "../components/NavBar/images/SVG/Navbar/Guide.svg";
+import { TOOLS_CATEGORIES } from "./tools";
+
+const ToolsSvgIcon = (props) => {
+  return <SvgIcon component={ToolsIcon} inheritViewBox {...props} />;
+};
+
+const AssistantSvgIcon = (props) => {
+  return <SvgIcon component={AssistantIcon} inheritViewBox {...props} />;
+};
+
+const GuideSvgIcon = (props) => {
+  return <SvgIcon component={GuideIcon} inheritViewBox {...props} />;
+};
+
+const InteractiveSvgIcon = (props) => {
+  return <SvgIcon component={InteractiveIcon} inheritViewBox {...props} />;
+};
+
+const ClassroomSvgIcon = (props) => {
+  return <SvgIcon component={ClassroomIcon} inheritViewBox {...props} />;
+};
+
+const AboutSvgIcon = (props) => {
+  return <SvgIcon component={AboutIcon} inheritViewBox {...props} />;
+};
+
+export const TOP_MENU_ITEMS = [
+  {
+    title: "navbar_tools",
+    icon: ToolsSvgIcon,
+    content: <Box />,
+    path: "tools",
+    footer: <Box />,
+    typeTab: "verification",
+    type: TOOLS_CATEGORIES.ALL,
+  },
+  {
+    title: "navbar_assistant",
+    icon: AssistantSvgIcon,
+
+    content: <Assistant />,
+    path: "assistant",
+    footer: <Footer type={FOOTER_TYPES.USFD} />,
+    typeTab: "verification",
+    type: TOOLS_CATEGORIES.ALL,
+  },
+  {
+    title: "navbar_tuto",
+    icon: GuideSvgIcon,
+    content: <Tutorial />,
+    path: "tutorial",
+    footer: <Footer type={FOOTER_TYPES.AFP} />,
+    typeTab: "learning",
+    type: TOOLS_CATEGORIES.ALL,
+  },
+  {
+    title: "navbar_quiz",
+    icon: InteractiveSvgIcon,
+    content: <Interactive />,
+    path: "interactive",
+    footer: <Footer type={FOOTER_TYPES.AFP} />,
+    typeTab: "learning",
+    type: TOOLS_CATEGORIES.ALL,
+  },
+  {
+    title: "navbar_classroom",
+    icon: ClassroomSvgIcon,
+    content: <ClassRoom />,
+    path: "classroom",
+    footer: <Footer type={FOOTER_TYPES.AFP} />,
+    typeTab: "learning",
+    type: TOOLS_CATEGORIES.ALL,
+  },
+  {
+    title: "navbar_about",
+    icon: AboutSvgIcon,
+    content: <About />,
+    path: "about",
+    footer: <Footer type={FOOTER_TYPES.AFP} />,
+    typeTab: "more",
+  },
+];
diff --git a/src/redux/actions/index.jsx b/src/redux/actions/index.jsx
index 66624334a..b5dcc1f74 100644
--- a/src/redux/actions/index.jsx
+++ b/src/redux/actions/index.jsx
@@ -27,7 +27,7 @@ export const addDictionary = (label, json) => {
 };
 
 //DEPRECATED
-//export const selectPage = createAction("SELECT_PAGE")
+//export const selectTopMenuItem = createAction("SELECT_PAGE")
 
 //DEPRECATED
 //export const selectTool = createAction("SELECT_TOOL")
diff --git a/src/redux/reducers/navReducer.jsx b/src/redux/reducers/navReducer.jsx
index dad51ab8c..6f2d0540d 100644
--- a/src/redux/reducers/navReducer.jsx
+++ b/src/redux/reducers/navReducer.jsx
@@ -1,25 +1,18 @@
 import { createSlice } from "@reduxjs/toolkit";
-const initialState = 0;
+import { TOP_MENU_ITEMS } from "../../constants/topMenuItems";
+
+const initialState = TOP_MENU_ITEMS[0].title;
 
 const navSlice = createSlice({
   name: "nav",
   initialState,
   reducers: {
-    selectPage(state, action) {
+    selectTopMenuItem(state, action) {
       return action.payload;
     },
   },
 });
-export const { selectPage } = navSlice.actions;
+export const { selectTopMenuItem } = navSlice.actions;
 const navReducer = navSlice.reducer;
 
-/*const navReducer = (state = 0, action) => {
-    switch (action.type) {
-        case "SELECT_PAGE":
-            console.log("nav ...", action.payload)
-            return action.payload;
-        default:
-            return state;
-    }
-};*/
 export default navReducer;
diff --git a/src/redux/reducers/tools/toolReducer.jsx b/src/redux/reducers/tools/toolReducer.jsx
index 7e9be789e..d3c93fd71 100644
--- a/src/redux/reducers/tools/toolReducer.jsx
+++ b/src/redux/reducers/tools/toolReducer.jsx
@@ -1,33 +1,22 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-  selected: 0,
+  toolName: "navbar_tools",
 };
 const toolSlice = createSlice({
   name: "tools",
   initialState,
   reducers: {
     selectTool(state, action) {
-      state.selected = action.payload;
+      state.toolName = action.payload;
     },
-    cleanTool() {
+    resetToolSelected() {
       return initialState;
     },
   },
 });
 
-export const { selectTool, cleanTool } = toolSlice.actions;
+export const { selectTool, resetToolSelected } = toolSlice.actions;
 const toolReducer = toolSlice.reducer;
 
-/*const toolReducer = (state = defaultState, action) => {
-    switch (action.type) {
-        case "SELECT_TOOL":
-            console.log("selected ", action.payload)
-            return {...state, selected:action.payload};
-        case "CLEAN_STATE":
-            return defaultState;
-        default:
-            return state;
-    }
-};*/
 export default toolReducer;