diff --git a/apps/www/src/app/(marketing)/page.tsx b/apps/www/src/app/(marketing)/page.tsx
index df7b94d..2fb8fff 100644
--- a/apps/www/src/app/(marketing)/page.tsx
+++ b/apps/www/src/app/(marketing)/page.tsx
@@ -1,4 +1,4 @@
-import { MarketingLayout } from "@/components/marketing-layout";
+import { MarketingLayout } from "@/components/layout/marketing-layout";
 
 export default function HomePage() {
     return (
@@ -7,3 +7,6 @@ export default function HomePage() {
         </MarketingLayout>
     );
 }
+
+export const dynamic = "force-static";
+export const revalidate = 60 * 60;
diff --git a/apps/www/src/app/saas-starterkit/page.tsx b/apps/www/src/app/saas-starterkit/page.tsx
new file mode 100644
index 0000000..3e1b101
--- /dev/null
+++ b/apps/www/src/app/saas-starterkit/page.tsx
@@ -0,0 +1,9 @@
+import { MarketingLayout } from "@/components/layout/marketing-layout";
+
+export default function SaasStarterKitPage() {
+    return (
+        <MarketingLayout>
+            <div>saas starter kit</div>
+        </MarketingLayout>
+    );
+}
diff --git a/apps/www/src/components/icons.tsx b/apps/www/src/components/icons.tsx
index b5faa47..7b3e585 100644
--- a/apps/www/src/components/icons.tsx
+++ b/apps/www/src/components/icons.tsx
@@ -2,7 +2,7 @@ import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
 import type { ElementType } from "react";
 
-export type IconProps = React.HTMLAttributes<SVGElement>;
+export type IconProps = React.SVGProps<SVGSVGElement>;
 
 export const Icons = {
     logo: ({
@@ -23,12 +23,7 @@ export const Icons = {
                     className={cn("h-6 w-6 fill-primary", iconProps?.className)}
                     {...iconProps}
                 />
-                <span
-                    className={cn(
-                        classNameText,
-                        "font-heading text-lg font-bold",
-                    )}
-                >
+                <span className={cn(classNameText, "text-lg font-bold")}>
                     {siteConfig.name}
                 </span>
             </Comp>
@@ -84,7 +79,7 @@ export const Icons = {
             ></path>
         </svg>
     ),
-    spinner: (props: React.SVGProps<SVGSVGElement>) => (
+    spinner: (props: IconProps) => (
         <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -174,4 +169,56 @@ export const Icons = {
             ></path>
         </svg>
     ),
+    star: (props: IconProps) => (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            color="currentColor"
+            fill="none"
+            {...props}
+        >
+            <path
+                d="M13.7276 3.44418L15.4874 6.99288C15.7274 7.48687 16.3673 7.9607 16.9073 8.05143L20.0969 8.58575C22.1367 8.92853 22.6167 10.4206 21.1468 11.8925L18.6671 14.3927C18.2471 14.8161 18.0172 15.6327 18.1471 16.2175L18.8571 19.3125C19.417 21.7623 18.1271 22.71 15.9774 21.4296L12.9877 19.6452C12.4478 19.3226 11.5579 19.3226 11.0079 19.6452L8.01827 21.4296C5.8785 22.71 4.57865 21.7522 5.13859 19.3125L5.84851 16.2175C5.97849 15.6327 5.74852 14.8161 5.32856 14.3927L2.84884 11.8925C1.389 10.4206 1.85895 8.92853 3.89872 8.58575L7.08837 8.05143C7.61831 7.9607 8.25824 7.48687 8.49821 6.99288L10.258 3.44418C11.2179 1.51861 12.7777 1.51861 13.7276 3.44418Z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    ),
+    chevronRight: (props: IconProps) => (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            color={"currentColor"}
+            fill={"none"}
+            {...props}
+        >
+            <path
+                d="M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    ),
+    circle: (props: IconProps) => (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            color={"currentColor"}
+            fill={"none"}
+            {...props}
+        >
+            <circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinejoin="round"
+            />
+        </svg>
+    ),
 };
diff --git a/apps/www/src/components/layout/marketing-header.tsx b/apps/www/src/components/layout/marketing-header.tsx
index d184511..0ccc6d9 100644
--- a/apps/www/src/components/layout/marketing-header.tsx
+++ b/apps/www/src/components/layout/marketing-header.tsx
@@ -1,32 +1,43 @@
 import { Icons } from "@/components/icons";
+import { MarketingMainNav } from "@/components/layout/marketing-nav";
 import { buttonVariants } from "@/components/ui/button";
 import { siteUrls } from "@/config/urls";
+import { getGithubRepoStars } from "@/server/actions/github";
 import Link from "next/link";
 
-export function MarketingHeader() {
+export async function MarketingHeader() {
+    const stars = await getGithubRepoStars();
+
     return (
         <header className="sticky top-0 flex h-16 w-full items-center justify-center border-b border-border bg-background">
             <div className="container flex items-center justify-between gap-6">
-                <Link href={siteUrls.marketing.base}>
-                    <Icons.logo />
-                </Link>
-
-                <div className="flex items-center gap-2">
-                    <Link
-                        className={buttonVariants({ size: "sm" })}
-                        href={siteUrls.docs.base}
-                    >
-                        Get Started
+                <div className="flex items-center gap-10">
+                    <Link href={siteUrls.marketing.base}>
+                        <Icons.logo />
                     </Link>
 
+                    <MarketingMainNav />
+                </div>
+
+                <div className="flex items-center gap-2">
                     <Link
                         className={buttonVariants({
                             size: "sm",
                             variant: "outline",
+                            className: "items-center gap-1.5",
                         })}
-                        href={siteUrls.marketing.pricing}
+                        href={siteUrls.socials.github}
+                    >
+                        <Icons.gitHub className="h-4 w-4" />
+                        <span className="text-sm text-muted-foreground">
+                            {stars}
+                        </span>
+                    </Link>
+                    <Link
+                        className={buttonVariants({ size: "sm" })}
+                        href={siteUrls.docs.base}
                     >
-                        Pricing
+                        Get Started
                     </Link>
                 </div>
             </div>
diff --git a/apps/www/src/components/marketing-layout.tsx b/apps/www/src/components/layout/marketing-layout.tsx
similarity index 100%
rename from apps/www/src/components/marketing-layout.tsx
rename to apps/www/src/components/layout/marketing-layout.tsx
diff --git a/apps/www/src/components/layout/marketing-mobile-nav.tsx b/apps/www/src/components/layout/marketing-mobile-nav.tsx
deleted file mode 100644
index 20432c3..0000000
--- a/apps/www/src/components/layout/marketing-mobile-nav.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import { Icons } from "@/components/icons";
-import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { navConfig } from "@/config/nav";
-import { siteUrls } from "@/config/urls";
-import { cn } from "@/lib/utils";
-import type { LinkProps } from "next/link";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import React from "react";
-
-export function MarketingMobileNav() {
-    const [isOpen, setIsOpen] = React.useState<boolean>(false);
-
-    return (
-        <Sheet open={isOpen} onOpenChange={(o: boolean) => setIsOpen(o)}>
-            <SheetTrigger asChild>
-                <Button
-                    variant="outline"
-                    size="iconSm"
-                    className="flex sm:hidden"
-                >
-                    <Icons.hamburger className="h-4 w-4" />
-                    <span className="sr-only">menu</span>
-                </Button>
-            </SheetTrigger>
-            <SheetContent side="left" className="pr-0">
-                <div className="mb-8">
-                    <Link
-                        href={siteUrls.marketing.base}
-                        className="left-4 z-10"
-                    >
-                        <Icons.logo
-                            iconProps={{
-                                className:
-                                    "w-6 h-6 sm:w-5 sm:h-5 fill-foreground",
-                            }}
-                        />
-                    </Link>
-                </div>
-
-                <div className="flex flex-col space-y-2">
-                    {navConfig.items.map((item) => (
-                        <MobileLink
-                            key={item.label}
-                            href={item.href}
-                            onOpenChange={setIsOpen}
-                            disabled={item.disabled}
-                            className={cn(
-                                "text-base text-muted-foreground hover:text-foreground/80",
-                                {
-                                    "text-foreground": false,
-                                },
-                            )}
-                        >
-                            {item.label}
-                        </MobileLink>
-                    ))}
-                </div>
-            </SheetContent>
-        </Sheet>
-    );
-}
-
-interface MobileLinkProps extends LinkProps {
-    onOpenChange?: (open: boolean) => void;
-    children: React.ReactNode;
-    className?: string;
-    disabled?: boolean;
-}
-
-function MobileLink({
-    href,
-    onOpenChange,
-    className,
-    children,
-    disabled,
-    ...props
-}: MobileLinkProps) {
-    const router = useRouter();
-    return (
-        <Link
-            href={href}
-            onClick={() => {
-                void router.push(String(href));
-                onOpenChange?.(false);
-            }}
-            className={cn(
-                disabled && "pointer-events-none opacity-60",
-                className,
-            )}
-            {...props}
-        >
-            {children}
-        </Link>
-    );
-}
diff --git a/apps/www/src/components/layout/marketing-nav.tsx b/apps/www/src/components/layout/marketing-nav.tsx
index aacdfbb..3caaf39 100644
--- a/apps/www/src/components/layout/marketing-nav.tsx
+++ b/apps/www/src/components/layout/marketing-nav.tsx
@@ -1,32 +1,82 @@
 "use client";
 
-import { navConfig } from "@/config/nav";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
+import { marketingPageConfig } from "@/config/pages";
+import { Icons } from "@/components/icons";
+import React from "react";
 
 export function MarketingMainNav() {
     const pathname = usePathname();
+    const [isHovered, setIsHovered] = React.useState<boolean>(false);
+    const [currentHovered, setCurrentHovered] = React.useState<string>("");
 
     return (
         <section className="hidden gap-6 sm:flex sm:items-center">
-            <nav className="flex items-center gap-2">
-                <ul className="flex items-center gap-5">
-                    {navConfig.items.map((item) => (
-                        <li key={item.label}>
+            <nav className="flex items-center gap-4">
+                <ul
+                    className="flex items-center gap-6"
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                >
+                    {marketingPageConfig.nav.map((item) => (
+                        <li
+                            key={item.label}
+                            onMouseEnter={() => {
+                                if (currentHovered === "") {
+                                    setCurrentHovered(item.href);
+                                }
+                            }}
+                            onMouseLeave={() => {
+                                if (currentHovered !== "") {
+                                    setCurrentHovered("");
+                                }
+                            }}
+                        >
                             <Link
                                 href={item.href}
                                 className={cn(
-                                    " text-sm text-muted-foreground hover:text-foreground/80",
-                                    {
-                                        "text-foreground":
-                                            pathname === item.href,
-                                    },
-                                    item.disabled &&
-                                        "pointer-events-none opacity-60",
+                                    "flex items-center gap-2 text-sm font-medium",
                                 )}
                             >
-                                {item.label}
+                                <span
+                                    className={cn(
+                                        "transition-colors",
+                                        isHovered &&
+                                            currentHovered !== item.href
+                                            ? "text-muted-foreground/80"
+                                            : "",
+                                    )}
+                                >
+                                    {item.label}
+                                </span>
+
+                                <span
+                                    className={cn(
+                                        "flex h-5 w-5 items-center justify-center rounded-sm border-2 border-border",
+                                        pathname === item.href
+                                            ? "bg-secondary"
+                                            : "",
+                                    )}
+                                >
+                                    <Icons.circle
+                                        className={cn(
+                                            "h-2.5 w-2.5 transition-all",
+                                            pathname === item.href
+                                                ? "block"
+                                                : "hidden",
+                                        )}
+                                    />
+                                    <Icons.chevronRight
+                                        className={cn(
+                                            "h-2.5 w-2.5 transition-all",
+                                            pathname === item.href
+                                                ? "hidden"
+                                                : "block",
+                                        )}
+                                    />
+                                </span>
                             </Link>
                         </li>
                     ))}
diff --git a/apps/www/src/components/ui/button.tsx b/apps/www/src/components/ui/button.tsx
index af5e4f5..636b860 100644
--- a/apps/www/src/components/ui/button.tsx
+++ b/apps/www/src/components/ui/button.tsx
@@ -15,7 +15,7 @@ const buttonVariants = cva(
                 destructive:
                     "bg-destructive text-destructive-foreground hover:bg-destructive/90",
                 outline:
-                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                    "border-2 border-input bg-background hover:bg-accent hover:text-accent-foreground",
                 secondary:
                     "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",
diff --git a/apps/www/src/config/nav.ts b/apps/www/src/config/nav.ts
deleted file mode 100644
index 4375587..0000000
--- a/apps/www/src/config/nav.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-interface NavItem {
-    label: string;
-    href: string;
-    disabled?: boolean;
-}
-
-interface NavConfig {
-    items: NavItem[];
-}
-
-export const navConfig: NavConfig = {
-    items: [
-        {
-            label: "SaaS StarterKit",
-            href: "/saas-starterkit",
-            disabled: true,
-        },
-        {
-            label: "Blocks",
-            href: "/blocks",
-            disabled: true,
-        },
-        {
-            label: "Docs",
-            href: "/docs",
-            disabled: true,
-        },
-        {
-            label: "GitHub",
-            href: "/gh",
-        },
-    ],
-};
diff --git a/apps/www/src/config/pages.ts b/apps/www/src/config/pages.ts
new file mode 100644
index 0000000..510d2d4
--- /dev/null
+++ b/apps/www/src/config/pages.ts
@@ -0,0 +1,30 @@
+import { siteUrls } from "@/config/urls";
+
+interface Page {
+    title: string;
+    description: string;
+    nav: { label: string; disabled?: boolean; href: string }[];
+}
+
+export const marketingPageConfig: Page = {
+    title: "Marketing",
+    description: "Marketing page",
+    nav: [
+        {
+            label: "SaaS Starterkit",
+            href: siteUrls.saasStarterkit.base,
+        },
+        {
+            label: "Pricing",
+            href: siteUrls.marketing.pricing,
+        },
+        {
+            label: "Blocks",
+            href: siteUrls.blocks.base,
+        },
+        {
+            label: "Blog",
+            href: siteUrls.marketing.blog,
+        },
+    ],
+};
diff --git a/apps/www/src/config/site.ts b/apps/www/src/config/site.ts
index 769ea62..788f6fb 100644
--- a/apps/www/src/config/site.ts
+++ b/apps/www/src/config/site.ts
@@ -1,3 +1,5 @@
 export const siteConfig = {
     name: "RapidLaunch",
+    githubOwner: "alifarooq9",
+    githubRepo: "rapidlaunch",
 } as const;
diff --git a/apps/www/src/server/actions/github.ts b/apps/www/src/server/actions/github.ts
new file mode 100644
index 0000000..ae37bf8
--- /dev/null
+++ b/apps/www/src/server/actions/github.ts
@@ -0,0 +1,15 @@
+import { siteConfig } from "@/config/site";
+
+export async function getGithubRepoStars() {
+    const response = await fetch(
+        `https://api.github.com/repos/${siteConfig.githubOwner}/${siteConfig.githubRepo}`,
+    );
+
+    const data: unknown = await response.json();
+    const stars: number = (data as { stargazers_count?: string })
+        ?.stargazers_count
+        ? Number((data as { stargazers_count?: string }).stargazers_count)
+        : 0;
+
+    return stars;
+}