diff --git a/starterkits/saas/src/app/(web)/_components/footer.tsx b/starterkits/saas/src/app/(web)/_components/footer.tsx
index 84d4dda..c5e6e01 100644
--- a/starterkits/saas/src/app/(web)/_components/footer.tsx
+++ b/starterkits/saas/src/app/(web)/_components/footer.tsx
@@ -12,7 +12,7 @@ import Balancer from "react-wrap-balancer";
 export function WebFooter() {
     return (
         <div className="py-8">
-            <footer className="container grid grid-cols-2 gap-8 rounded-lg border border-border p-8">
+            <footer className="container grid grid-cols-2 gap-8 rounded-lg border border-border bg-background p-8">
                 <div className="grid place-content-between gap-2">
                     <div className="grid gap-2">
                         <Link
diff --git a/starterkits/saas/src/app/(web)/_components/header-nav.tsx b/starterkits/saas/src/app/(web)/_components/header-nav.tsx
index 395d1ad..7eddfde 100644
--- a/starterkits/saas/src/app/(web)/_components/header-nav.tsx
+++ b/starterkits/saas/src/app/(web)/_components/header-nav.tsx
@@ -5,7 +5,6 @@ import { usePathname } from "next/navigation";
 import { Badge } from "@/components/ui/badge";
 import { cn, isLinkActive } from "@/lib/utils";
 import { navigation } from "@/config/header";
-import { buttonVariants } from "@/components/ui/button";
 
 /**
  *  For adding a new navigation item:
@@ -18,30 +17,24 @@ export function WebHeaderNav() {
 
     return (
         <nav className="flex items-center justify-center">
-            <ul className="flex items-center gap-1">
+            <ul className="flex items-center gap-8">
                 {navigation.map((item) => (
                     <li key={item.id}>
                         <Link
                             href={item.href}
                             className={cn(
-                                buttonVariants({
-                                    variant: isLinkActive(item.href, pathname)
-                                        ? "secondary"
-                                        : "ghost",
-                                    size: "default",
-                                }),
+                                "text-sm  hover:underline hover:underline-offset-4",
+                                isLinkActive(item.href, pathname)
+                                    ? "font-semibold"
+                                    : "font-medium",
                             )}
                         >
                             <span>{item.label}</span>
                             {item.badge && (
                                 <Badge
-                                    variant={
-                                        isLinkActive(item.href, pathname)
-                                            ? "background"
-                                            : "secondary"
-                                    }
+                                    variant="outline"
                                     size="sm"
-                                    className="ml-2"
+                                    className="ml-1"
                                 >
                                     {item.badge}
                                 </Badge>