diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index 15820f87e3160eafce4388807611a946521b26d4..24843ddfaad80f3704a7e1addec540fd9a912f17 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -14,7 +14,6 @@ import logo from './gp-logo.svg';
 import { useAuthorizationCache, useAuth } from '@graphpolaris/shared/lib/data-access';
 import DatabaseSelector from './DatabaseManagement/dbConnectionSelector';
 import { DropdownItem, DropdownItemContainer } from '@graphpolaris/shared/lib/components/dropdowns';
-import ColorMode from '@graphpolaris/shared/lib/components/color-mode';
 import GpLogo from './gp-logo';
 
 export const Navbar = () => {
@@ -50,8 +49,6 @@ export const Navbar = () => {
         </div>
 
         <div>
-          {/* <SearchBar /> */}
-          <ColorMode />
           <div className="w-fit" ref={dropdownRef}>
             <div
               className="relative inline-flex items-center justify-center w-8 h-8 overflow-hidden bg-secondary-500 rounded-full hover:bg-secondary-600 transition-colors duration-150 ease-in-out cursor-pointer"
diff --git a/libs/shared/lib/info/infoPanel.tsx b/libs/shared/lib/info/infoPanel.tsx
index 52a08ca4c61ca45fbf4895af2c589a44a45bd801..9f52382d210e23e331925868cb15711ea2bf65d1 100644
--- a/libs/shared/lib/info/infoPanel.tsx
+++ b/libs/shared/lib/info/infoPanel.tsx
@@ -4,37 +4,41 @@ import { Addchart, Schema as SchemaIcon, Search as SearchIcon } from '@mui/icons
 import Schema from '../schema/panel';
 import Searchbar from './search/searchbar';
 import Settings from './settings';
+import ColorMode from '../components/color-mode';
 
 export default function InfoPanel({ auth, manager }: { auth: boolean; manager: any }) {
   const [tab, setTab] = useState('Schema');
 
   return (
     <div className="info-panel w-full h-full flex">
-      <div className="w-12 flex flex-col items-center">
-        <Button
-          type="secondary"
-          variant="ghost"
-          size="md"
-          iconComponent={<SearchIcon />}
-          onClick={() => setTab('Search')}
-          additionalClasses={tab === 'Search' ? 'bg-secondary-100' : ''}
-        />
-        <Button
-          type="secondary"
-          variant="ghost"
-          size="md"
-          iconComponent={<SchemaIcon />}
-          onClick={() => setTab('Schema')}
-          additionalClasses={tab === 'Schema' ? 'bg-secondary-100' : ''}
-        />
-        <Button
-          type="secondary"
-          variant="ghost"
-          size="md"
-          iconComponent={<Addchart />}
-          onClick={() => setTab('Visualization')}
-          additionalClasses={tab === 'Visualization' ? 'bg-secondary-100' : ''}
-        />
+      <div className="w-12 flex flex-col items-center justify-between">
+        <div>
+          <Button
+            type="secondary"
+            variant="ghost"
+            size="md"
+            iconComponent={<SearchIcon />}
+            onClick={() => setTab('Search')}
+            additionalClasses={tab === 'Search' ? 'bg-secondary-100' : ''}
+          />
+          <Button
+            type="secondary"
+            variant="ghost"
+            size="md"
+            iconComponent={<SchemaIcon />}
+            onClick={() => setTab('Schema')}
+            additionalClasses={tab === 'Schema' ? 'bg-secondary-100' : ''}
+          />
+          <Button
+            type="secondary"
+            variant="ghost"
+            size="md"
+            iconComponent={<Addchart />}
+            onClick={() => setTab('Visualization')}
+            additionalClasses={tab === 'Visualization' ? 'bg-secondary-100' : ''}
+          />
+        </div>
+        <ColorMode />
       </div>
       <div className="flex-1 border border-secondary-200 overflow-hidden">
         <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100  border-b border-secondary-200">