diff --git a/src/containers/CodeStats.jsx b/src/containers/CodeStats.jsx
index 5bcbe82..a4dff4c 100644
--- a/src/containers/CodeStats.jsx
+++ b/src/containers/CodeStats.jsx
@@ -6,104 +6,109 @@ import LanguagesChart from "../components/LanguagesChart"
 import ProjectsChart from "../components/ProjectsChart"
 
 const convertSeconds = (secs) => {
-	return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m`
+  return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m`
 }
 
 const CodeStats = () => {
-	const { data, isLoading, error } = useQuery({
-		queryKey: ["codestats"],
-		queryFn: () =>
-			wakapiApi.get(`summary?interval=week`).then((res) => res.data),
-	})
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["codestats"],
+    queryFn: () =>
+      wakapiApi.get(`summary?interval=week`).then((res) => res.data),
+  })
 
-	const grandTotal = data?.projects.reduce((acc, curr) => acc + curr.total, 0)
-	const grandTotalFormatted = `${Math.floor(grandTotal / 3600)}h ${Math.floor((grandTotal % 3600) / 60)}m`
-	const os = data?.operating_systems
-	const osMetric = os ? (
-		<div className="text-sm">
-			{os[0]?.key}: {convertSeconds(os[0].total)}, {os[1]?.key}:{" "}
-			{convertSeconds(os[1].total)}
-		</div>
-	) : (
-		"Error"
-	)
+  const grandTotal = data?.projects.reduce((acc, curr) => acc + curr.total, 0)
+  const grandTotalFormatted = `${Math.floor(grandTotal / 3600)}h ${Math.floor((grandTotal % 3600) / 60)}m`
+  const os = data?.operating_systems
+  const osMetric = os ? (
+    <div className="text-sm">
+      {os[0]?.key}: {convertSeconds(os[0].total)}, {os[1]?.key}:{" "}
+      {convertSeconds(os[1].total)}
+    </div>
+  ) : (
+    "Error"
+  )
 
-	const personalProjects =
-		data && data?.projects.filter((project) => !project.key.includes("gp-"))
+  const personalProjects = (
+    data && data?.projects.filter((project) => !project.key.includes("gp-"))
+  ).sort((a, b) => b.total - a.total)
 
-	const mainProject = personalProjects?.sort((a, b) => a.total > b.total)[0].key
+  const mainProject = personalProjects[0].key
 
-	console.log(personalProjects)
+  console.log(personalProjects)
 
-	const languagesChartData = data?.languages
-		.map((lang) => ({
-			metric: lang.key,
-			language: lang.key,
-			hours: (lang.total / 3600).toFixed(1),
-			percentage: (
-				(lang.total / data.languages.reduce((sum, i) => sum + i.total, 0)) *
-				100
-			).toFixed(1),
-		}))
-		.slice(0, 4)
+  const languagesChartData = data?.languages
+    .map((lang) => ({
+      metric: lang.key,
+      language: lang.key,
+      hours: (lang.total / 3600).toFixed(1),
+      percentage: (
+        (lang.total / data.languages.reduce((sum, i) => sum + i.total, 0)) *
+        100
+      ).toFixed(1),
+    }))
+    .slice(0, 4)
 
-	const projectsChartData =
-		personalProjects &&
-		personalProjects.map((proj) => ({
-			metric: proj.key,
-			project: proj.key,
-			hours: (proj.total / 3600).toFixed(1),
-			percentage: (
-				(proj.total / personalProjects.reduce((sum, i) => sum + i.total, 0)) *
-				100
-			).toFixed(1),
-		}))
+  const projectsChartData =
+    personalProjects &&
+    personalProjects.map((proj) => ({
+      metric: proj.key,
+      project: proj.key,
+      hours: (proj.total / 3600).toFixed(1),
+      percentage: (
+        (proj.total / personalProjects.reduce((sum, i) => sum + i.total, 0)) *
+        100
+      ).toFixed(1),
+    }))
 
-	return (
-		<div className="container mx-auto p-4 grow">
-			<div className="space-my-8">
-				<section className="container">
-					<div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
-						<h2 className="text-2xl font-semibold mb-4 text-[#458588]! scanlined inline-block px-1">
-							code stats
-						</h2>
-						<div className="mb-4 text-sm text-muted">
-							{convertDateFriendly(data?.from)} -{" "}
-							{convertDateFriendly(data?.to)}
-						</div>
-					</div>
-					{/* Score-cards */}
-					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-						<Scorecard
-							title="time coding"
-							metric={
-								error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
-							}
-						/>
+  return (
+    <div className="container mx-auto p-4 grow">
+      <div className="space-my-8">
+        <section className="container">
+          <div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
+            <h2 className="text-2xl font-semibold mb-4 text-[#458588]! scanlined inline-block px-1">
+              code stats
+            </h2>
+            <div className="mb-4 text-sm text-muted">
+              {convertDateFriendly(data?.from)} -{" "}
+              {convertDateFriendly(data?.to)}
+            </div>
+          </div>
+          {/* Score-cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <Scorecard
+              title="time coding"
+              metric={
+                error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
+              }
+            />
 
-						<Scorecard
-							title="main project"
-							metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
-						/>
+            <Scorecard
+              title="main project"
+              metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
+            />
 
-						<Scorecard
-							title="OS"
-							metric={error ? "Error" : isLoading ? "Loading..." : osMetric}
-						/>
-					</div>
-					<LanguagesChart chartData={languagesChartData} error={error} />
-					<ProjectsChart chartData={projectsChartData} error={error} />
-					<div className="text-sm text-center text-muted-foreground">
-						Data sourced from my self-hosted{" "}
-						<a href="https://wakapi.dev/" target="__blank">
-							Wakapi
-						</a>{" "}
-						instance.
-					</div>
-				</section>
-			</div>
-		</div>
-	)
+            <Scorecard
+              title="OS"
+              metric={error ? "Error" : isLoading ? "Loading..." : osMetric}
+            />
+          </div>
+          <LanguagesChart chartData={languagesChartData} error={error} />
+          <ProjectsChart chartData={projectsChartData} error={error} />
+          <div className="text-sm text-center text-muted-foreground">
+            Data sourced from my self-hosted{" "}
+            <a
+              href="https://wakapi.dev/"
+              target="__blank"
+              className="underline decoration-1 hover:text-primary/80 underline-offset-4 text-primary"
+            >
+              Wakapi
+            </a>{" "}
+            instance.
+          </div>
+        </section>
+      </div>
+    </div>
+  )
 }
 
 export default CodeStats