diff --git a/surfsense_web/.env.example b/surfsense_web/.env.example
index 157bfaa37..b6936baf3 100644
--- a/surfsense_web/.env.example
+++ b/surfsense_web/.env.example
@@ -2,4 +2,6 @@ NEXT_PUBLIC_FASTAPI_BACKEND_URL=http://localhost:8000
 NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE=LOCAL or GOOGLE
 NEXT_PUBLIC_ETL_SERVICE=UNSTRUCTURED or LLAMACLOUD or DOCLING
 # Contact Form Vars - OPTIONAL
-DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.sdsf.supabase.co:5432/postgres
\ No newline at end of file
+DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.sdsf.supabase.co:5432/postgres
+NEXT_PUBLIC_GITHUB_REPO=SurfSense
+NEXT_PUBLIC_GITHUB_OWNER=MODSetter
\ No newline at end of file
diff --git a/surfsense_web/components/homepage/navbar.tsx b/surfsense_web/components/homepage/navbar.tsx
index cf921f1ae..a42ea960a 100644
--- a/surfsense_web/components/homepage/navbar.tsx
+++ b/surfsense_web/components/homepage/navbar.tsx
@@ -37,7 +37,7 @@ export const Navbar = () => {
 
 const DesktopNav = ({ navItems, isScrolled }: any) => {
 	const [hovered, setHovered] = useState<number | null>(null);
-	const {starts : githubStarts} = useGithubStarts();
+	const { compactFormat: githubStarts, loading: loadingGithubStarts } = useGithubStarts();
 	return (
 		<motion.div
 			onMouseLeave={() => {
@@ -88,7 +88,13 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
 					className="hidden rounded-full px-3 py-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors md:flex items-center gap-1.5"
 				>
 					<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
-					<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">9.5k</span>
+					{loadingGithubStarts ? (
+						<div className="w-6 h-5 dark:bg-neutral-800 animate-pulse"></div>
+					) : (
+						<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
+							{githubStarts}
+						</span>
+					)}
 				</Link>
 				<ThemeTogglerComponent />
 				<Link
@@ -104,6 +110,7 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
 
 const MobileNav = ({ navItems, isScrolled }: any) => {
 	const [open, setOpen] = useState(false);
+	const { compactFormat: githubStarts, loading: loadingGithubStarts } = useGithubStarts();
 
 	return (
 		<>
@@ -162,9 +169,13 @@ const MobileNav = ({ navItems, isScrolled }: any) => {
 									className="flex items-center gap-1.5 rounded-lg px-3 py-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
 								>
 									<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
-									<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
-										9.5k
-									</span>
+									{loadingGithubStarts ? (
+										<div className="w-6 h-5 dark:bg-neutral-800 animate-pulse"></div>
+									) : (
+										<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
+											{githubStarts}
+										</span>
+									)}
 								</Link>
 							</div>
 							<button className="w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black">
diff --git a/surfsense_web/hooks/use-github-starts.ts b/surfsense_web/hooks/use-github-starts.ts
index 5065ae4d0..bcec3fd86 100644
--- a/surfsense_web/hooks/use-github-starts.ts
+++ b/surfsense_web/hooks/use-github-starts.ts
@@ -1,42 +1,44 @@
 import { useCallback, useEffect, useState } from "react";
-import { apiClient } from "@/lib/api";
 
 export const useGithubStarts = () => {
-  const repo = process.env.NEXT_PUBLIC_GITHUB_REPO;
-  const owner = process.env.NEXT_PUBLIC_GITHUB_OWNER;
-  const token = process.env.NEXT_PUBLIC_GITHUB_TOKEN;
+	const repo = process.env.NEXT_PUBLIC_GITHUB_REPO;
+	const owner = process.env.NEXT_PUBLIC_GITHUB_OWNER;
 
-  const [starts, setStarts] = useState<number | null>(null);
+	const [starts, setStarts] = useState<number | null>(null);
+	const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    const getStarts = async () => {
-      try {
-        if (!repo || !owner || !token) {
-          throw new Error("Missing GitHub credentials");
-        }
-        const response = await apiClient.get<{ stargazers_count: number }>(
-          `https://api.github.com/repos/${owner}/${repo}`,
-          {
-            headers: {
-              Authorization: `Bearer ${token}`,
-            },
-          }
-        );
+	useEffect(() => {
+		const getStarts = async () => {
+			try {
+				if (!repo || !owner) {
+					throw new Error("Missing GitHub credentials");
+				}
 
-        setStarts(response.stargazers_count);
-      } catch (err) {
-        console.error("Error fetching starts:", err);
-        throw err;
-      }
-    };
+				const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
 
-    getStarts();
-  }, []);
+				if (!response.ok) {
+					throw new Error(`Failed to fetch starts: ${response.statusText}`);
+				}
 
-  return {
-    starts,
-    compactFormat: Intl.NumberFormat("en-US", {
-      notation: "compact",
-    }).format(starts || 0),
-  };
+				const data = await response.json();
+
+				setStarts(data?.stargazers_count);
+			} catch (err) {
+				console.error("Error fetching starts:", err);
+				throw err;
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		getStarts();
+	}, []);
+
+	return {
+		starts,
+		loading,
+		compactFormat: Intl.NumberFormat("en-US", {
+			notation: "compact",
+		}).format(starts || 0),
+	};
 };