diff --git a/components/layout/footer-menu.tsx b/components/layout/footer-menu.tsx
index feeeec0b0..696f61fc0 100644
--- a/components/layout/footer-menu.tsx
+++ b/components/layout/footer-menu.tsx
@@ -18,9 +18,12 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
     <li className="mt-2 first:mt-1">
       <Link
         href={item.path}
-        className={clsx(' hover:text-black dark:hover:text-white', {
-          'text-black dark:text-white': active
-        })}
+        className={clsx(
+          'underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300',
+          {
+            'text-black dark:text-neutral-300': active
+          }
+        )}
       >
         {item.title}
       </Link>
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index e28947b99..e8367eabb 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -16,8 +16,8 @@ export default async function Footer() {
   const copyrightName = COMPANY_NAME || SITE_NAME || '';
 
   return (
-    <footer className="text-neutral-400 dark:text-neutral-500">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 xl:px-0">
+    <footer className="text-sm text-neutral-400 dark:text-neutral-600">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 xl:px-0">
         <div>
           <Link className="flex items-center gap-2 text-black dark:text-white" href="/">
             <LogoSquare size="sm" />
@@ -40,7 +40,7 @@ export default async function Footer() {
         </Suspense>
         <div className="md:ml-auto">
           <a
-            className="flex items-center gap-2 hover:text-black dark:hover:text-white"
+            className="flex items-center gap-2 hover:text-black dark:hover:text-neutral-300"
             aria-label="Github Repository"
             href="https://github.com/vercel/commerce"
           >
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index 7aff470be..8389d6894 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -35,7 +35,7 @@ export default async function Navbar() {
                 <li key={item.title}>
                   <Link
                     href={item.path}
-                    className="mr-3 text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-400 lg:mr-8"
+                    className="mr-3 text-neutral-400 underline-offset-4 hover:text-black hover:underline dark:text-neutral-600 dark:hover:text-neutral-300 lg:mr-8"
                   >
                     {item.title}
                   </Link>