diff --git a/project-app/components/Navbar/NavbarHome.jsx b/project-app/components/Navbar/NavbarHome.jsx
index 71ecc56..11f96a8 100644
--- a/project-app/components/Navbar/NavbarHome.jsx
+++ b/project-app/components/Navbar/NavbarHome.jsx
@@ -29,12 +29,13 @@ const NavbarHome = () => {
 
   const menu = (
     <Menu
+      className="!bg-[#004F54] !rounded-md"
       items={[
         {
           key: "1",
           label: (
             <a
-              className="text-md text-[#004F54]"
+              className="text-lg font-medium !text-[white] hover:!text-[#004F54]"
               rel="noopener noreferrer"
               href="/#about"
             >
@@ -46,7 +47,7 @@ const NavbarHome = () => {
           key: "2",
           label: (
             <a
-              className="text-md text-[#004F54]"
+              className="text-lg font-medium !text-white hover:!text-[#004F54]"
               rel="noopener noreferrer"
               href="/start-a-clean"
             >
@@ -57,7 +58,8 @@ const NavbarHome = () => {
         {
           key: "3",
           label: (
-            <a className="text-md text-[#004F54]" href="#map">
+            <a className="text-lg font-medium !text-white hover:!text-[#004F54]" 
+              href="#map">
               Join a Clean-up
             </a>
           ),
@@ -66,7 +68,7 @@ const NavbarHome = () => {
           key: "4",
           label: (
             <a
-              className="text-md text-[#004F54]"
+              className="text-lg font-medium !text-white hover:!text-[#004F54]"
               rel="noopener noreferrer"
               href="/log-a-clean"
             >
@@ -85,7 +87,7 @@ const NavbarHome = () => {
     return (
       <div className="fixed z-[1002]">
         <div className=" flex justify-between w-[100vw] bg-[#004F54] text-[white] ml-[0px] px-[1em] py-[1em]">
-          <div className=" rounded-sm p-[5px]  text-[#white] text-center text-[20px]">
+          <div className="rounded-sm p-[5px] text-[#white] text-center text-[20px]">
             Loading user profile...
           </div>
         </div>
diff --git a/project-app/components/Navbar/NavbarLogClean.jsx b/project-app/components/Navbar/NavbarLogClean.jsx
index bbf3395..b33ab64 100644
--- a/project-app/components/Navbar/NavbarLogClean.jsx
+++ b/project-app/components/Navbar/NavbarLogClean.jsx
@@ -30,11 +30,15 @@ const NavbarLogClean = () => {
 
   const menu = (
     <Menu
+      className="!bg-[#004F54] !rounded-md"
       items={[
         {
           key: "1",
           label: (
-            <a rel="noopener noreferrer" href="/#about">
+            <a 
+            className="text-lg font-medium !text-[white] hover:!text-[#004F54]"
+            rel="noopener noreferrer" 
+            href="/#about">
               About
             </a>
           ),
@@ -42,12 +46,17 @@ const NavbarLogClean = () => {
 
         {
           key: "2",
-          label: <a href="/#map">Join a Clean-up</a>,
+          label: <a 
+          className="text-lg font-medium !text-[white] hover:!text-[#004F54]"
+          href="/#map">Join a Clean-up</a>,
         },
         {
           key: "3",
           label: (
-            <a rel="noopener noreferrer" href="/start-a-clean">
+            <a 
+            className="text-lg font-medium !text-[white] hover:!text-[#004F54]"
+            rel="noopener noreferrer" 
+            href="/start-a-clean">
               Start a Clean-up
             </a>
           ),
@@ -55,6 +64,7 @@ const NavbarLogClean = () => {
       ]}
     />
   );
+  
   const { user, error, isLoading } = useUser();
 
   if (isLoading)
diff --git a/project-app/components/Navbar/NavbarStartClean.jsx b/project-app/components/Navbar/NavbarStartClean.jsx
index 1930923..8d1da5d 100644
--- a/project-app/components/Navbar/NavbarStartClean.jsx
+++ b/project-app/components/Navbar/NavbarStartClean.jsx
@@ -29,11 +29,15 @@ const NavbarStartClean = () => {
 
   const menu = (
     <Menu
+      className="!bg-[#004F54] !rounded-md"
       items={[
         {
           key: "1",
           label: (
-            <a rel="noopener noreferrer" href="/#about">
+            <a 
+            className="text-lg font-medium !text-[white] hover:!text-[#004F54]"
+            rel="noopener noreferrer" 
+            href="/#about">
               About
             </a>
           ),
@@ -41,12 +45,17 @@ const NavbarStartClean = () => {
 
         {
           key: "2",
-          label: <a href="/#map">Join a Clean-up</a>,
+          label: <a 
+          className="text-lg font-medium !text-[white] hover:!text-[#004F54]"
+          href="/#map">Join a Clean-up</a>,
         },
         {
           key: "3",
           label: (
-            <a rel="noopener noreferrer" href="/log-a-clean">
+            <a 
+            className="text-lg font-medium !text-[white] hover:!text-[#004F54]"
+            rel="noopener noreferrer" 
+            href="/log-a-clean">
               Log a Clean-up
             </a>
           ),