diff --git a/components/AboutVersion.js b/components/AboutVersion.js
index 72d5488d..d37c2fd8 100644
--- a/components/AboutVersion.js
+++ b/components/AboutVersion.js
@@ -83,7 +83,13 @@ function AboutVersion({ isStartPage = false, collapsed, onClose }) {
 
   return (
     <>
-      <div className={`hover:opacity-70 ${collapsed && 'lg:hidden'}`}>
+      <div
+        className={`${collapsed && 'lg:hidden'} ${
+          modalsSidebarState.aboutVersion
+            ? 'text-th-text-primary'
+            : 'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary'
+        }`}
+      >
         {t('Version')} {packageJson.version}
       </div>
       {modalsSidebarState.aboutVersion && (
diff --git a/components/Account.js b/components/Account.js
index f3185153..6a628d81 100644
--- a/components/Account.js
+++ b/components/Account.js
@@ -41,6 +41,7 @@ function Account() {
 
   useEffect(() => {
     router.push(`?tab=${selectedTab}`, undefined, { shallow: true })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedTab])
 
   const tabs = ['Account', 'projects:Projects', 'projects:CreateProject']
diff --git a/components/AppBar.js b/components/AppBar.js
index 605d5425..4d01c933 100644
--- a/components/AppBar.js
+++ b/components/AppBar.js
@@ -53,9 +53,15 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) {
     <div className="bg-th-primary-100 sticky top-0 z-30">
       <div className="appbar" onClick={() => isOpenSideBar && setIsOpenSideBar(false)}>
         <div className="relative md:static flex items-center h-10 md:justify-start md:gap-7">
-          {!['/user-agreement', '/confession-steps', 'agreements'].includes(
-            router.pathname
-          ) && <SideBar setIsOpenSideBar={setIsOpenSideBar} access={access} />}
+          {![
+            '/user-agreement',
+            '/confession-steps',
+            '/agreements',
+            '/404',
+            '/privacy-policy',
+          ].includes(router.pathname) && (
+            <SideBar setIsOpenSideBar={setIsOpenSideBar} access={access} />
+          )}
           <div
             className={`flex justify-center w-full  ${
               access && !isStepPage ? 'lg:-ml-4 xl:-ml-6' : ''
diff --git a/components/ModalInSideBar.js b/components/ModalInSideBar.js
index 88a504bc..5c6d0a7c 100644
--- a/components/ModalInSideBar.js
+++ b/components/ModalInSideBar.js
@@ -11,11 +11,13 @@ function ModalInSideBar({
   return (
     <>
       <div
-        className={`cursor-pointer text-th-text-primary hover:opacity-70 ${
-          collapsed ? 'lg:hidden' : ''
-        }`}
+        className={`overflow-hidden ${
+          collapsed ? 'lg:w-0' : 'lg:w-auto'
+        } cursor-pointer ${
+          isOpen ? 'text-th-text-primary' : 'lg:text-th-secondary-300'
+        } group-hover:text-th-text-primary ${collapsed ? 'lg:hidden' : ''}`}
       >
-        {buttonTitle}
+        <span className="whitespace-nowrap">{buttonTitle}</span>
       </div>
 
       {isOpen && (
diff --git a/components/SideBar.js b/components/SideBar.js
index 6a8ea6e5..53ef8e2d 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -37,6 +37,11 @@ import Notes from 'public/notes.svg'
 import Users from 'public/users.svg'
 import About from 'public/about.svg'
 
+const activeIconClass =
+  'stroke-th-text-primary lg:stroke-th-secondary-300 group-hover:stroke-th-text-primary'
+const activeTextClass =
+  'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary'
+
 function SideBar({ setIsOpenSideBar, access }) {
   const { user } = useCurrentUser()
   const { t } = useTranslation(['common', 'projects', 'users', 'start-page'])
@@ -44,7 +49,6 @@ function SideBar({ setIsOpenSideBar, access }) {
 
   const [collapsed, setCollapsed] = useState(true)
   const [isLargeScreen, setIsLargeScreen] = useState(false)
-  const [isOpen, setIsOpen] = useState(false)
   const [showAbout, setShowAbout] = useState(false)
   const [showCreate, setShowCreate] = useState(false)
 
@@ -79,10 +83,6 @@ function SideBar({ setIsOpenSideBar, access }) {
     return () => window.removeEventListener('resize', checkScreenSize)
   }, [])
 
-  useEffect(() => {
-    setIsOpen(isLargeScreen)
-  }, [isLargeScreen])
-
   return (
     <Menu>
       {({ open, close }) => (
@@ -114,8 +114,8 @@ function SideBar({ setIsOpenSideBar, access }) {
             leave="transition-opacity duration-200"
           >
             <Menu.Items
-              className={`fixed flex flex-col w-full h-[calc(100vh-40px)] md:w-1/2 transition-all duration-150 gap-7 top-14 sm:top-20 lg:top-16 lg:h-[calc(100vh-64px)] lg:left-0 -mx-5 z-20 cursor-default sm:px-5 md:pr-3 ${
-                !collapsed ? 'lg:w-56' : 'lg:w-[50px] lg:ml-0 lg:p-0 2xl:mx-0'
+              className={`fixed flex flex-col w-full md:w-1/2 transition-all duration-150 gap-7 top-14 sm:top-20 lg:top-16 lg:h-[calc(100vh-64px)] lg:left-0 -mx-5 z-20 cursor-default sm:px-5 md:pr-3 ${
+                !collapsed ? 'lg:w-[23rem]' : 'lg:w-[3.25rem] lg:ml-0 lg:p-0 2xl:mx-0'
               }`}
               onClick={(e) => e.stopPropagation()}
               onMouseEnter={() => {
@@ -171,9 +171,9 @@ function SideBar({ setIsOpenSideBar, access }) {
                       <Menu.Item
                         as="div"
                         disabled
-                        className={`py-3 px-4 ${
+                        className={`group py-3 px-4 ${
                           router.query?.tab !== '0' ? 'opacity-70' : 'bg-th-secondary-200'
-                        }`}
+                        } hover:bg-th-secondary-200`}
                       >
                         <Link href="/account?tab=0" legacyBehavior>
                           <a
@@ -185,16 +185,22 @@ function SideBar({ setIsOpenSideBar, access }) {
                               setShowAbout(false)
                             }}
                           >
-                            <div className="rounded-[23rem] hover:opacity-70">
+                            <div className="rounded-[23rem]">
                               <Account
-                                className={`w-5 h-5 ${
+                                className={`w-4 ml-0.5 ${
                                   router.query?.tab === '0'
                                     ? 'stroke-th-text-primary'
-                                    : 'stroke-gray-500'
+                                    : activeIconClass
                                 }`}
                               />
                             </div>
-                            <span className={`hover:opacity-70 ${collapsedSideBar}`}>
+                            <span
+                              className={`${collapsedSideBar} ${
+                                router.query?.tab === '0'
+                                  ? 'text-th-text-primary'
+                                  : activeTextClass
+                              }`}
+                            >
                               {t('Account')}
                             </span>
                           </a>
@@ -204,9 +210,9 @@ function SideBar({ setIsOpenSideBar, access }) {
                       <Menu.Item
                         as="div"
                         disabled
-                        className={`py-3 px-4 ${
+                        className={`group py-3 px-4 ${
                           router.query?.tab !== '1' ? 'opacity-70' : 'bg-th-secondary-200'
-                        }`}
+                        } hover:bg-th-secondary-200`}
                       >
                         <Link href="/account?tab=1" legacyBehavior>
                           <a
@@ -218,16 +224,22 @@ function SideBar({ setIsOpenSideBar, access }) {
                               setShowAbout(false)
                             }}
                           >
-                            <div className="rounded-[23rem] hover:opacity-70">
+                            <div className="rounded-[23rem]">
                               <Projects
-                                className={`w-5 h-5 ${
+                                className={`w-5 ${
                                   router.query?.tab === '1'
                                     ? 'stroke-th-text-primary'
-                                    : 'stroke-gray-500'
+                                    : activeIconClass
                                 }`}
                               />
                             </div>
-                            <span className={`hover:opacity-70 ${collapsedSideBar}`}>
+                            <span
+                              className={`${collapsedSideBar} ${
+                                router.query?.tab === '1'
+                                  ? 'text-th-text-primary'
+                                  : activeTextClass
+                              }`}
+                            >
                               {t('Projects')}
                             </span>
                           </a>
@@ -238,11 +250,11 @@ function SideBar({ setIsOpenSideBar, access }) {
                         <Menu.Item
                           as="div"
                           disabled
-                          className={`hidden md:block py-3 px-4 ${
+                          className={`group hidden md:block py-3 px-4 ${
                             router.query?.tab !== '2'
                               ? 'opacity-70'
                               : 'bg-th-secondary-200'
-                          }`}
+                          } hover:bg-th-secondary-200`}
                         >
                           <Link href="/account?tab=2" legacyBehavior>
                             <a
@@ -254,18 +266,32 @@ function SideBar({ setIsOpenSideBar, access }) {
                                 setShowAbout(false)
                               }}
                             >
-                              <div className="rounded-[23rem] hover:opacity-70">
+                              <div className="rounded-[23rem]">
                                 <CreateProject
                                   className={`w-5 h-5 ${
                                     router.query?.tab === '2'
                                       ? 'stroke-th-text-primary'
-                                      : 'stroke-gray-500'
+                                      : activeIconClass
                                   }`}
                                 />
                               </div>
-                              <span className={`hover:opacity-70 ${collapsedSideBar}`}>
-                                {t('CreateProject')}
-                              </span>
+                              <div
+                                className={`overflow-hidden ${
+                                  collapsed
+                                    ? 'lg:w-0'
+                                    : 'lg:w-auto transition-all duration-700 delay-700'
+                                }`}
+                              >
+                                <span
+                                  className={`whitespace-nowrap ${collapsedSideBar} ${
+                                    router.query?.tab === '2'
+                                      ? 'text-th-text-primary'
+                                      : activeTextClass
+                                  }`}
+                                >
+                                  {t('CreateProject')}
+                                </span>
+                              </div>
                             </a>
                           </Link>
                         </Menu.Item>
@@ -289,9 +315,7 @@ function SideBar({ setIsOpenSideBar, access }) {
                             <div className="rounded-[23rem] hover:opacity-70">
                               <CreateProject
                                 className={`w-5 h-5 ${
-                                  showCreate
-                                    ? 'stroke-th-text-primary'
-                                    : 'stroke-gray-500'
+                                  showCreate ? 'stroke-th-text-primary' : activeIconClass
                                 }`}
                               />
                             </div>
@@ -311,11 +335,11 @@ function SideBar({ setIsOpenSideBar, access }) {
                       <Menu.Item
                         as="div"
                         disabled
-                        className={`py-3 px-4 flex items-center justify-between gap-2 cursor-default ${
+                        className={`group py-3 px-4 flex items-center justify-between gap-2 cursor-default ${
                           modalsSidebarState.notepad
                             ? 'bg-th-secondary-200'
                             : 'opacity-70'
-                        }`}
+                        } hover:bg-th-secondary-200`}
                       >
                         <div
                           className="flex w-full items-center gap-2 cursor-pointer"
@@ -324,12 +348,12 @@ function SideBar({ setIsOpenSideBar, access }) {
                             setShowAbout(false)
                           }}
                         >
-                          <div className="rounded-[23rem] hover:opacity-70">
+                          <div className="rounded-[23rem]">
                             <Notes
                               className={`w-5 h-5 ${
                                 modalsSidebarState.notepad
                                   ? 'stroke-th-text-primary'
-                                  : 'stroke-gray-500'
+                                  : 'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary'
                               }`}
                             />
                           </div>
@@ -356,11 +380,11 @@ function SideBar({ setIsOpenSideBar, access }) {
                         <Menu.Item
                           as="div"
                           disabled
-                          className={`py-3 px-4 ${
+                          className={`group py-3 px-4 ${
                             router.pathname === '/users'
                               ? 'bg-th-secondary-200'
                               : 'opacity-70'
-                          }`}
+                          } hover:bg-th-secondary-200`}
                         >
                           <Link href="/users" legacyBehavior>
                             <a
@@ -374,16 +398,28 @@ function SideBar({ setIsOpenSideBar, access }) {
                             >
                               <div className="rounded-[23rem]">
                                 <Users
-                                  className={`w-5 h-5 ${
+                                  className={`w-5 ${
                                     router.pathname === '/users'
                                       ? 'stroke-th-text-primary'
-                                      : 'stroke-gray-500'
+                                      : activeIconClass
                                   }`}
                                 />
                               </div>
-                              <span className={`hover:opacity-70 ${collapsedSideBar}`}>
-                                {t('users:UserManagement')}
-                              </span>
+                              <div
+                                className={`overflow-hidden ${
+                                  collapsed ? 'lg:w-0' : 'lg:w-auto'
+                                }`}
+                              >
+                                <span
+                                  className={`whitespace-nowrap ${collapsedSideBar} ${
+                                    router.pathname === '/users'
+                                      ? 'text-th-text-primary'
+                                      : activeTextClass
+                                  }`}
+                                >
+                                  {t('users:UserManagement')}
+                                </span>
+                              </div>
                             </a>
                           </Link>
                         </Menu.Item>
@@ -398,17 +434,21 @@ function SideBar({ setIsOpenSideBar, access }) {
                       <Menu.Item
                         as="div"
                         disabled
-                        className="py-2 px-4 flex items-center justify-between gap-2 cursor-default"
+                        className="group py-2 px-4 flex items-center justify-between gap-2 cursor-default "
                       >
                         <div className="flex items-center gap-2">
                           <div className="rounded-[23rem]">
                             <Localization
-                              className={`w-5 h-5 ${
-                                collapsed ? 'stroke-gray-500' : 'stroke-th-text-primary'
-                              }`}
+                              className={`w-5 h-5 ${activeIconClass} ${
+                                collapsed && 'opacity-70'
+                              } group-hover:opacity-70`}
                             />
                           </div>
-                          <span className={collapsedSideBar}>{t('Language')}</span>
+                          <span
+                            className={`${collapsedSideBar} ${activeTextClass} opacity-70 lg:opacity-100 group-hover:opacity-70`}
+                          >
+                            {t('Language')}
+                          </span>
                         </div>
                         <SwitchLocalization collapsed={collapsed} />
                       </Menu.Item>
@@ -416,9 +456,9 @@ function SideBar({ setIsOpenSideBar, access }) {
                       <Menu.Item
                         as="div"
                         disabled
-                        className={`py-3 px-4 flex items-center justify-between gap-2 cursor-default ${
+                        className={`group py-3 px-4 flex items-center justify-between gap-2 cursor-default ${
                           showAbout ? 'bg-th-secondary-200' : 'opacity-70'
-                        }`}
+                        } hover:bg-th-secondary-200`}
                       >
                         <div
                           className="flex w-full items-center gap-2 cursor-pointer"
@@ -427,11 +467,11 @@ function SideBar({ setIsOpenSideBar, access }) {
                             openModal()
                           }}
                         >
-                          <div className="rounded-[23rem] hover:opacity-70">
+                          <div className="rounded-[23rem]">
                             <About
-                              className={`w-5 h-5 ${
-                                showAbout ? 'stroke-th-text-primary' : 'stroke-gray-500'
-                              }`}
+                              className={`w-5 ${
+                                showAbout ? 'stroke-th-text-primary' : activeIconClass
+                              } ${collapsed ? 'opacity-70' : ''}`}
                             />
                           </div>
                           <ModalInSideBar
@@ -453,9 +493,11 @@ function SideBar({ setIsOpenSideBar, access }) {
                       <Menu.Item
                         as="div"
                         disabled
-                        className={`py-3 px-4 flex items-center justify-between gap-2 cursor-default ${
-                          modalsSidebarState.aboutVersion ? 'bg-th-secondary-200' : ''
-                        }`}
+                        className={`group py-3 px-4 flex items-center justify-between gap-2 cursor-default ${
+                          modalsSidebarState.aboutVersion
+                            ? 'bg-th-secondary-200'
+                            : 'opacity-70'
+                        } hover:bg-th-secondary-200`}
                       >
                         <div
                           className="flex w-full items-center gap-2 cursor-pointer"
@@ -464,13 +506,13 @@ function SideBar({ setIsOpenSideBar, access }) {
                             setShowAbout(false)
                           }}
                         >
-                          <div className="rounded-[23rem] hover:opacity-70">
+                          <div className="rounded-[23rem]">
                             <VersionLogo
                               className={`w-5 h-5 ${
                                 modalsSidebarState.aboutVersion
                                   ? 'stroke-th-text-primary'
-                                  : 'stroke-gray-500'
-                              }`}
+                                  : activeIconClass
+                              } ${collapsed ? 'opacity-70' : ''}`}
                             />
                           </div>
                           <AboutVersion
@@ -486,7 +528,7 @@ function SideBar({ setIsOpenSideBar, access }) {
                       <Menu.Item
                         as="div"
                         disabled
-                        className="flex items-center justify-between gap-2 cursor-default"
+                        className="group flex items-center justify-between gap-2 cursor-default hover:bg-th-secondary-200 rounded-b-2xl lg:rounded-b-none"
                       >
                         <SignOut collapsed={collapsed} />
                       </Menu.Item>
diff --git a/components/SignOut.js b/components/SignOut.js
index b4700f91..ec86f7a4 100644
--- a/components/SignOut.js
+++ b/components/SignOut.js
@@ -35,14 +35,19 @@ export default function SignOut({ collapsed }) {
         loading ? 'opacity-70' : ''
       }`}
     >
-      <div className="stroke-th-text-primary">
-        <LogOut
-          className={`w-5 h-4 ${
-            collapsed ? 'stroke-gray-500' : 'stroke-th-text-primary'
-          }`}
-        />
-      </div>
-      <p className={collapsed ? 'lg:hidden' : ''}>{t('users:SignOut')}</p>
+      <LogOut
+        className={`w-5 stroke-th-text-primary lg:stroke-th-secondary-300 group-hover:stroke-th-text-primary group-hover:opacity-70 ${
+          collapsed ? 'opacity-70' : ''
+        }`}
+      />
+
+      <p
+        className={`opacity-70 lg:text-th-secondary-300 ${
+          collapsed ? 'lg:hidden' : ''
+        } group-hover:text-th-text-primary group-hover:opacity-70`}
+      >
+        {t('users:SignOut')}
+      </p>
     </button>
   )
 }
diff --git a/components/SwitchLocalization.js b/components/SwitchLocalization.js
index 92c0b7f0..676c8a00 100644
--- a/components/SwitchLocalization.js
+++ b/components/SwitchLocalization.js
@@ -16,11 +16,11 @@ function SwitchLocalization({ collapsed }) {
     <div
       className={`relative max-w-min text-xs lg:text-sm font-bold ${
         collapsed ? 'lg:hidden' : ''
-      }`}
+      } z-10`}
     >
       <Menu>
         <Menu.Button
-          className="px-4 py-1 text-sm bg-th-secondary-100 rounded-[9rem] hover:opacity-70"
+          className="px-4 py-1 text-sm bg-th-text-primary rounded-[9rem] text-th-secondary-10"
           onClick={(e) => e.stopPropagation()}
         >
           {t(locale.toUpperCase())}
@@ -38,9 +38,13 @@ function SwitchLocalization({ collapsed }) {
                 onClick={(e) => {
                   push(asPath, undefined, { locale: loc })
                 }}
-                className="cursor-pointer px-4 py-2 hover:bg-th-primary-100-hover-backgroung last:rounded-b-2xl first:rounded-t-2xl hover:opacity-70 z-40"
+                className="cursor-pointer px-4 py-2 last:rounded-b-2xl first:rounded-t-2xl hover:opacity-70"
               >
-                <div className={`${locale === loc ? 'text-th-secondary-300' : ''}`}>
+                <div
+                  className={`${
+                    locale === loc ? 'text-th-secondary-10' : 'text-th-secondary-300'
+                  }`}
+                >
                   {t(loc.toUpperCase())}
                 </div>
               </Menu.Item>
diff --git a/components/ThemeSwitcher.js b/components/ThemeSwitcher.js
index 01a7f68d..3258738c 100644
--- a/components/ThemeSwitcher.js
+++ b/components/ThemeSwitcher.js
@@ -65,23 +65,42 @@ const ThemeSwitcher = ({ collapsed }) => {
     <Disclosure as="div">
       {({ open }) => (
         <>
-          <Disclosure.Button className="group flex justify-between items-center w-full px-4">
+          <Disclosure.Button
+            className={`group flex justify-between items-center w-full px-4 hover:bg-th-secondary-200 
+  ${!collapsed && !open ? 'opacity-70' : ''}`}
+          >
             <div className="flex gap-2 items-center">
               <div className="py-4">
                 <Theme
-                  className={`w-5 h-5 ${
-                    collapsed ? 'stroke-th-text-primary' : 'stroke-gray-500'
-                  }`}
+                  className={`w-5 h-5 
+    ${collapsed ? 'stroke-th-text-primary lg:stroke-th-secondary-300' : ''} 
+    ${
+      !collapsed
+        ? open
+          ? 'stroke-th-text-primary'
+          : 'stroke-th-secondary-300 group-hover:stroke-th-text-primary'
+        : ''
+    }`}
                 />
               </div>
-              <p className={collapsed ? 'lg:hidden' : ''}>{t('ChooseTheme')}</p>
+              <p
+                className={`${collapsed ? 'lg:hidden' : ''} 
+      ${
+        !open
+          ? 'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary'
+          : 'text-th-text-primary'
+      }`}
+              >
+                {t('ChooseTheme')}
+              </p>
             </div>
             <ArrowDown
-              className={`w-5 h-5 transition-all duration-150 ${
-                open ? 'rotate-180' : ''
-              } ${collapsed ? 'lg:hidden' : ''}`}
+              className={`w-5 h-5 transition-all duration-150 
+    ${open ? 'rotate-180' : ''} 
+    ${collapsed ? 'lg:hidden' : ''}`}
             />
           </Disclosure.Button>
+
           <Disclosure.Panel
             className={`flex space-x-2 box-border mx-1 pl-4 my-4 ${
               collapsed ? 'lg:hidden' : ''
diff --git a/components/Workspace.js b/components/Workspace.js
index 28a925c0..2cca8b40 100644
--- a/components/Workspace.js
+++ b/components/Workspace.js
@@ -12,7 +12,7 @@ import { inactiveState } from './state/atoms'
 
 import Dict from 'public/dictionary.svg'
 import TeamNote from 'public/team-note.svg'
-import Notepad from 'public/notepad.svg'
+import Notepad from 'public/notes.svg'
 import Retelling from 'public/audio.svg'
 import Pencil from 'public/editor-pencil.svg'
 import Info from 'public/info.svg'
@@ -29,7 +29,7 @@ const sizes = {
 const translateIcon = <Pencil className="w-5 inline" />
 
 const icons = {
-  personalNotes: <Notepad className="w-5 inline" />,
+  personalNotes: <Notepad className="w-[14px] inline" />,
   teamNotes: <TeamNote className="w-5 inline" />,
   dictionary: <Dict className="w-5 inline" />,
   retelling: <Retelling className="w-5 inline" />,
diff --git a/pages/_app.js b/pages/_app.js
index cd018b6c..39fa5f40 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -16,26 +16,26 @@ function MyApp({ Component, pageProps }) {
   const isIntranet = process.env.NEXT_PUBLIC_INTRANET ?? false
   const supabaseClient = useSupabaseClient()
   useGetTheme()
-  if (Component.layoutType == 'empty') {
+  const renderContent = () => {
+    if (Component.layoutType === 'empty') {
+      return <Component {...pageProps} />
+    }
+
+    const layoutProps = {
+      backgroundColor: Component.backgroundColor ?? 'bg-th-secondary-100',
+    }
+
     return (
-      <UserContextProvider supabaseClient={supabaseClient}>
-        <RecoilRoot>
-          <main className={isIntranet ? roboto.className : ''}>
-            <Component {...pageProps} />
-          </main>
-        </RecoilRoot>
-      </UserContextProvider>
+      <Layout {...layoutProps}>
+        <Component {...pageProps} />
+      </Layout>
     )
   }
 
   return (
     <UserContextProvider supabaseClient={supabaseClient}>
       <RecoilRoot>
-        <main className={isIntranet ? roboto.className : ''}>
-          <Layout backgroundColor={Component.backgroundColor ?? 'bg-th-secondary-100'}>
-            <Component {...pageProps} />
-          </Layout>
-        </main>
+        <main className={isIntranet ? roboto.className : ''}>{renderContent()}</main>
       </RecoilRoot>
     </UserContextProvider>
   )
diff --git a/pages/user-agreement.js b/pages/user-agreement.js
index 70286850..7331b05d 100644
--- a/pages/user-agreement.js
+++ b/pages/user-agreement.js
@@ -63,7 +63,6 @@ export default function UserAgreement() {
     </div>
   )
 }
-
 export async function getStaticProps({ locale }) {
   return {
     props: {
diff --git a/public/about.svg b/public/about.svg
index 0da5f6a0..b578e523 100644
--- a/public/about.svg
+++ b/public/about.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.25 9.25L9.291 9.23C9.41923 9.16594 9.56313 9.13997 9.70567 9.15516C9.8482 9.17035 9.9834 9.22606 10.0952 9.31571C10.2071 9.40536 10.2909 9.52518 10.3368 9.66099C10.3826 9.79679 10.3886 9.9429 10.354 10.082L9.646 12.918C9.61114 13.0572 9.61694 13.2034 9.66269 13.3394C9.70845 13.4754 9.79224 13.5954 9.90414 13.6852C10.016 13.775 10.1513 13.8308 10.294 13.846C10.4367 13.8612 10.5807 13.8352 10.709 13.771L10.75 13.75M19 10C19 11.1819 18.7672 12.3522 18.3149 13.4442C17.8626 14.5361 17.1997 15.5282 16.364 16.364C15.5282 17.1997 14.5361 17.8626 13.4442 18.3149C12.3522 18.7672 11.1819 19 10 19C8.8181 19 7.64778 18.7672 6.55585 18.3149C5.46392 17.8626 4.47177 17.1997 3.63604 16.364C2.80031 15.5282 2.13738 14.5361 1.68508 13.4442C1.23279 12.3522 1 11.1819 1 10C1 7.61305 1.94821 5.32387 3.63604 3.63604C5.32387 1.94821 7.61305 1 10 1C12.3869 1 14.6761 1.94821 16.364 3.63604C18.0518 5.32387 19 7.61305 19 10ZM10 6.25H10.008V6.258H10V6.25Z" stroke="current-color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/public/account.svg b/public/account.svg
index d1c6fe54..862832b2 100644
--- a/public/account.svg
+++ b/public/account.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+<svg  viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.99926 10.9048C11.7344 10.9048 13.9516 8.6875 13.9516 5.95238C13.9516 3.21726 11.7344 1 8.99926 1C6.26413 1 4.04688 3.21726 4.04688 5.95238C4.04688 8.6875 6.26413 10.9048 8.99926 10.9048Z" stroke="current-color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 18.5233C1 14.7138 4.04762 10.9043 9 10.9043C13.9524 10.9043 17 14.7138 17 18.5233" stroke="current-color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/notepad.svg b/public/notepad.svg
deleted file mode 100644
index b3975273..00000000
--- a/public/notepad.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 48 48" fill="currentColor"><path d="M24 45.4q-3.95-3.5-8.65-5.375t-9.6-1.875v-21.6q4.8 0 9.475 2.1T24 24.55q4.1-3.8 8.775-5.9 4.675-2.1 9.475-2.1v21.6q-4.9 0-9.6 1.875Q27.95 41.9 24 45.4Zm0-4.25q3.45-2.55 7.175-4.075Q34.9 35.55 38.85 35.15v-14.9q-3.4.5-7.125 2.65T24 28.85q-4.3-3.95-7.875-6.025T9.15 20.25v14.9q3.9.4 7.625 1.925T24 41.15Zm.15-23.75q-3.3 0-5.575-2.275Q16.3 12.85 16.3 9.55q0-3.3 2.275-5.575Q20.85 1.7 24.15 1.7q3.3 0 5.575 2.275Q32 6.25 32 9.55q0 3.3-2.275 5.575Q27.45 17.4 24.15 17.4Zm0-3.3q1.9 0 3.225-1.325Q28.7 11.45 28.7 9.55q0-1.9-1.325-3.225Q26.05 5 24.15 5q-1.9 0-3.225 1.35Q19.6 7.7 19.6 9.55q0 1.9 1.325 3.225Q22.25 14.1 24.15 14.1Zm-.05-4.65ZM24 30.7Z"/></svg>
diff --git a/public/notes.svg b/public/notes.svg
index 47f16fbc..c5f327aa 100644
--- a/public/notes.svg
+++ b/public/notes.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+<svg viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.28571 1V3M8.5 1V3M11.7143 1V3M9.57143 7H5.28571M11.7143 11H5.28571M4.42857 19H12.5714C13.7715 19 14.3716 19 14.83 18.782C15.2332 18.5903 15.561 18.2843 15.7664 17.908C16 17.4802 16 16.9201 16 15.8V5.2C16 4.0799 16 3.51984 15.7664 3.09202C15.561 2.71569 15.2332 2.40973 14.83 2.21799C14.3716 2 13.7715 2 12.5714 2H4.42857C3.22846 2 2.6284 2 2.17002 2.21799C1.76681 2.40973 1.439 2.71569 1.23356 3.09202C1 3.51984 1 4.07989 1 5.2V15.8C1 16.9201 1 17.4802 1.23356 17.908C1.439 18.2843 1.76681 18.5903 2.17002 18.782C2.6284 19 3.22845 19 4.42857 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/themes.svg b/public/themes.svg
index b4e0a161..0f16eb87 100644
--- a/public/themes.svg
+++ b/public/themes.svg
@@ -1,4 +1,4 @@
 <svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10"/>
-<path d="M8 20.5C9.5 20 11.594 19.0353 12.8916 17.2885C14.1892 15.5418 14.8882 13.4371 14.8882 11.2769C14.8882 9.1167 14.1892 7.01207 12.8916 5.26528C11.594 3.5185 9.76456 2.21944 7.66602 1.55469" stroke="currentColor" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" stroke="current-color" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M8 20.5C9.5 20 11.594 19.0353 12.8916 17.2885C14.1892 15.5418 14.8882 13.4371 14.8882 11.2769C14.8882 9.1167 14.1892 7.01207 12.8916 5.26528C11.594 3.5185 9.76456 2.21944 7.66602 1.55469" stroke="current-color" stroke-width="2" stroke-miterlimit="10"/>
 </svg>
diff --git a/public/version.svg b/public/version.svg
index b2f13e83..525d08e5 100644
--- a/public/version.svg
+++ b/public/version.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" stroke="currentColor"/><circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="160 96 128 176 96 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+<svg  viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 7L10.0602 15.4156C10.3794 16.2932 11.6206 16.2932 11.9398 15.4156L15 7" stroke="current-color" stroke-width="2" stroke-linecap="round"/>
+<path d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" stroke="current-color" stroke-width="2" stroke-miterlimit="10"/>
+</svg>
\ No newline at end of file