diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c54da20..982ed57 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -76,7 +76,10 @@ export default function RootLayout({
         >
           <ProgressBar />
           <header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm">
-            <Link className="flex items-center gap-2" href="/">
+            <Link
+              className="flex items-center gap-2 hover:scale-105 transition-transform"
+              href="/"
+            >
               <h1>
                 <Image
                   src="/logo-with-text.png"
@@ -90,7 +93,11 @@ export default function RootLayout({
             <div role="navigation" aria-label="Menu" className="flex">
               <ul className="flex items-center text-sm">
                 <li>
-                  <Button variant="link" asChild className="-my-3">
+                  <Button
+                    variant="ghost"
+                    asChild
+                    className="-my-3 text-primary"
+                  >
                     <Link href="/groups">Groups</Link>
                   </Button>
                 </li>
@@ -103,7 +110,7 @@ export default function RootLayout({
 
           {children}
 
-          <footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-slate-800 border-t p-6 mt-8 flex flex-col space-y-2 text-xs [&_a]:underline">
+          <footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-card border-t p-6 mt-8 flex flex-col space-y-2 text-xs [&_a]:underline">
             <div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
               <Link className="flex items-center gap-2" href="/">
                 <Image
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7c7e276..1971b3a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -38,7 +38,7 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="bg-slate-50 dark:bg-slate-800 py-16 md:py-24 lg:py-32">
+      <section className="bg-slate-50 dark:bg-card py-16 md:py-24 lg:py-32">
         <div className="p-4 flex mx-auto max-w-screen-md flex-col items-center text-center">
           <h2 className="font-bold text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
             Features
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index bf45ffc..61245e4 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -17,7 +17,7 @@ export function ThemeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="link" size="icon">
+        <Button variant="ghost" size="icon" className="text-primary">
           <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>