diff --git a/apps/web/src/components/Layout.tsx b/apps/web/src/components/Layout.tsx
index eef834cd..21444cf0 100644
--- a/apps/web/src/components/Layout.tsx
+++ b/apps/web/src/components/Layout.tsx
@@ -15,6 +15,7 @@ interface LayoutProps {
   title?: string;
   children: React.ReactNode;
   classNameShareButton?: string;
+  page?: "home" | "locationsettings" | "settings" | "contact";
 }
 
 /* If you use this component,
@@ -24,6 +25,7 @@ const Layout: React.FC<LayoutProps> = ({
   title,
   children,
   classNameShareButton,
+  page,
 }) => {
   const [navbarOpen, setNavbarOpen] = useState(false);
 
@@ -135,51 +137,51 @@ const Layout: React.FC<LayoutProps> = ({
         <div className="mx-auto grid h-full max-w-lg grid-cols-4 font-medium">
           <Link
             href="/home"
-            className="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800"
+            className={cn(
+              "inline-flex flex-col items-center justify-center px-5 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500",
+              {
+                "text-blue-600 dark:text-blue-500": page === "home",
+              },
+            )}
           >
-            <AiFillHome
-              className="mb-2 h-7 w-7 text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500"
-              aria-hidden="true"
-            />
-            <span className="text-sm text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500">
-              {translation("menu home")}
-            </span>
+            <AiFillHome className="mb-2 h-7 w-7" aria-hidden="true" />
+            <span className="text-sm">{translation("menu home")}</span>
           </Link>
           <Link
             href="/locationsettings"
-            className="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800"
+            className={cn(
+              "inline-flex flex-col items-center justify-center px-5 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500",
+              {
+                "text-blue-600 dark:text-blue-500": page === "locationsettings",
+              },
+            )}
           >
-            <FaMapMarkedAlt
-              className="mb-2 h-7 w-7 text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500"
-              aria-hidden="true"
-            />
-            <span className="text-sm text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500">
-              {translation("menu locations")}
-            </span>
+            <FaMapMarkedAlt className="mb-2 h-7 w-7" aria-hidden="true" />
+            <span className="text-sm">{translation("menu locations")}</span>
           </Link>
           <Link
             href="/settings"
-            className="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800"
+            className={cn(
+              "inline-flex flex-col items-center justify-center px-5 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500",
+              {
+                "text-blue-600 dark:text-blue-500": page === "settings",
+              },
+            )}
           >
-            <IoIosSettings
-              className="mb-2 h-7 w-7 text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500"
-              aria-hidden="true"
-            />
-            <span className="text-sm text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500">
-              {translation("menu settings")}
-            </span>
+            <IoIosSettings className="mb-2 h-7 w-7 " aria-hidden="true" />
+            <span className="text-sm">{translation("menu settings")}</span>
           </Link>
           <Link
             href="/contact"
-            className="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800"
+            className={cn(
+              "inline-flex flex-col items-center justify-center px-5 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500",
+              {
+                "text-blue-600 dark:text-blue-500": page === "contact",
+              },
+            )}
           >
-            <IoMdContact
-              className="mb-2 h-7 w-7 text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500"
-              aria-hidden="true"
-            />
-            <span className="text-sm text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500">
-              {translation("menu contact")}
-            </span>
+            <IoMdContact className="mb-2 h-7 w-7" aria-hidden="true" />
+            <span className="text-sm">{translation("menu contact")}</span>
           </Link>
         </div>
       </div>
diff --git a/apps/web/src/pages/contact/index.tsx b/apps/web/src/pages/contact/index.tsx
index b1219bb6..39530961 100644
--- a/apps/web/src/pages/contact/index.tsx
+++ b/apps/web/src/pages/contact/index.tsx
@@ -67,6 +67,7 @@ const ContactUs = () => {
       <Layout
         title={translationCommon("menu contact")}
         classNameShareButton="mt-24 md:mt-28"
+        page="contact"
       >
         <div className="flex w-full flex-col items-center">
           <h1 className="mt-10 flex justify-center text-4xl font-bold">
diff --git a/apps/web/src/pages/home/index.tsx b/apps/web/src/pages/home/index.tsx
index c48900c8..c1b6e5b9 100644
--- a/apps/web/src/pages/home/index.tsx
+++ b/apps/web/src/pages/home/index.tsx
@@ -275,7 +275,7 @@ const InternalHome = observer(() => {
   ];
 
   return (
-    <Layout classNameShareButton="mt-44">
+    <Layout classNameShareButton="mt-44" page="home">
       <div className="mt-24 flex flex-col items-center">
         <h1 className="text-center text-4xl sm:text-5xl md:text-7xl">
           {activeCity$.name.get()}
diff --git a/apps/web/src/pages/locationsettings/index.tsx b/apps/web/src/pages/locationsettings/index.tsx
index 745fda10..5c67bcc1 100644
--- a/apps/web/src/pages/locationsettings/index.tsx
+++ b/apps/web/src/pages/locationsettings/index.tsx
@@ -153,7 +153,10 @@ const LocationSettings = observer(() => {
 
   return (
     <>
-      <Layout title={translationCommon("menu locations")}>
+      <Layout
+        title={translationCommon("menu locations")}
+        page="locationsettings"
+      >
         <div className="flex w-full flex-col items-center">
           <h1 className="mt-10 flex justify-center text-4xl font-bold">
             {translationCommon("menu locations")}
diff --git a/apps/web/src/pages/settings/index.tsx b/apps/web/src/pages/settings/index.tsx
index 6b38e96a..36ab36ce 100644
--- a/apps/web/src/pages/settings/index.tsx
+++ b/apps/web/src/pages/settings/index.tsx
@@ -33,7 +33,7 @@ const Settings = observer(() => {
 
   return (
     <>
-      <Layout title={translationCommon("menu settings")}>
+      <Layout title={translationCommon("menu settings")} page="settings">
         <div className="flex w-full flex-col items-center">
           <h1 className="mt-10 flex justify-center text-4xl font-bold">
             {translationCommon("menu settings")}