diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index 190fccd279abce5d64d15af0b1f37371a4051f2a..ddde2de7b8bb7fcc00dca568c4658878d70f8ccb 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -88,7 +88,7 @@ export const Navbar = () => {
               </div>
             </PopoverTrigger>
 
-            <PopoverContent className="w-56 z-30 bg-white rounded-sm border-[1px] outline-none">
+            <PopoverContent className="w-56 z-30 bg-light rounded-sm border-[1px] outline-none">
               <div className="p-2 text-sm border-b">
                 <h2 className="font-bold">user: {authCache.username}</h2>
                 <h3 className="text-xs break-words">session: {authCache.sessionID}</h3>
diff --git a/libs/shared/lib/components/VisualizationTooltip/VisualizationTooltip.tsx b/libs/shared/lib/components/VisualizationTooltip/VisualizationTooltip.tsx
index 67ecc6be1e80fc0663d9e544d2f2740df0bde69e..a68b73f792771ab9a72042697637c88b88d5deab 100644
--- a/libs/shared/lib/components/VisualizationTooltip/VisualizationTooltip.tsx
+++ b/libs/shared/lib/components/VisualizationTooltip/VisualizationTooltip.tsx
@@ -9,7 +9,7 @@ export type VisualizationTooltipProps = {
 
 export const VisualizationTooltip: React.FC<VisualizationTooltipProps> = ({ name, colorHeader, children }) => {
   return (
-    <div className="border-1 border-sec-200 bg-white w-[12rem] -mx-2 -my-2">
+    <div className="border-1 border-sec-200 bg-light w-[12rem] -mx-2 -my-2">
       <div className="flex m-0 justify-start items-stretch border-b border-sec-200 relative">
         <div className="left-0 top-0 h-auto w-1.5" style={{ backgroundColor: colorHeader }}></div>
         <div className="px-2.5 py-1 truncate flex">
diff --git a/libs/shared/lib/vis/visualizations/mapvis/components/ActionBar.tsx b/libs/shared/lib/vis/visualizations/mapvis/components/ActionBar.tsx
index 975ebd3b166138edc864cb75b5b8a0a60e01e0c3..81d9723a3963b54c511ea1a9d44f04fa05b8cd70 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/components/ActionBar.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/components/ActionBar.tsx
@@ -15,10 +15,10 @@ export function ActionBar({ isSearching, setIsSearching, setSearchResult, setSel
   return (
     <div>
       <div className="absolute left-0 top-0 m-1">
-        <div className="cursor-pointer p-1 pb-0 bg-white shadow-md rounded" onClick={() => setSelectingRectangle(true)}>
+        <div className="cursor-pointer p-1 pb-0 bg-light shadow-md rounded" onClick={() => setSelectingRectangle(true)}>
           <Icon component="icon-[ic--baseline-highlight-alt]" />
         </div>
-        <div className="cursor-pointer p-1 mt-1 pb-0 bg-white shadow-md rounded" onClick={() => setIsSearching(!isSearching)}>
+        <div className="cursor-pointer p-1 mt-1 pb-0 bg-light shadow-md rounded" onClick={() => setIsSearching(!isSearching)}>
           <Icon component="icon-[ic--outline-search]" />
         </div>
       </div>
diff --git a/libs/shared/lib/vis/visualizations/mapvis/components/SearchBar.tsx b/libs/shared/lib/vis/visualizations/mapvis/components/SearchBar.tsx
index 8f53c2c128b3c8cc4471e08718f9a3ee87b563ae..98923a22c643259bb5c65d5c3fa88686e4d13e1c 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/components/SearchBar.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/components/SearchBar.tsx
@@ -35,7 +35,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
   };
 
   return (
-    <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 z-50 m-1 p-2 bg-white shadow-md rounded w-full max-w-xl">
+    <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 z-50 m-1 p-2 bg-light shadow-md rounded w-full max-w-xl">
       <div className="flex gap-2 items-center">
         <Input type="text" size="xs" value={query} onChange={(value) => setQuery(value)} />
         <Button label="Search" size="xs" onClick={handleSearch} disabled={isLoading} />