diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
index 6b93e2de..97baf512 100644
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -19,17 +19,22 @@ type LinkProps = {
 };
 
 // the logo and company name component
-const Logo = ({ setShelf, isMobile }: LinkProps) => {
+const Logo = ({ setShelf, isMobile, black }: LinkProps & { black?: boolean }) => {
   return (
     <Link
       href="/"
       onClick={() => {
         if (isMobile) setShelf(false);
       }}
-      className="flex items-center justify-between gap-2 pl-8 pr-8 max-sm:w-fit max-sm:justify-normal sm:max-lg:p-0"
+      className="flex items-center gap-2 pl-8 pr-8 max-sm:w-fit max-sm:justify-normal sm:max-lg:p-0"
     >
       <Image alt="company logo" src="/sidebar/logo.png" width={36} height={36} />
-      <h1 className="text-white font-[alternate-gothic] text-2xl max-sm:text-lg">PLANT IT AGAIN</h1>
+      <h1
+        className="text-white font-[alternate-gothic] text-2xl text-[white] max-lg:text-lg"
+        style={black ? { color: "black" } : {}}
+      >
+        PLANT IT AGAIN
+      </h1>
     </Link>
   );
 };
@@ -90,7 +95,7 @@ function Navigation({ children }: { children: React.ReactNode }) {
           height={24}
         />
         <div className="m-auto translate-x-[-20px]">
-          <Logo setShelf={setShelf} isMobile={isMobile} />
+          <Logo setShelf={setShelf} isMobile={isMobile} black />
         </div>
       </div>