diff --git a/app/context/StatsContext.tsx b/app/context/StatsContext.tsx
index 4f3076c..499ae00 100644
--- a/app/context/StatsContext.tsx
+++ b/app/context/StatsContext.tsx
@@ -8,6 +8,7 @@ import {
   calculateTotalForks,
   calculateTotalRepos,
   calculateTotalStars,
+  calculateTotalTopics,
   findLatestUpdatedRepo,
   findMostStarredRepo,
   findOldestRepo,
@@ -24,6 +25,7 @@ type StatsContextProps = {
   totalStars: number;
   totalGists: number;
   totalForks: number;
+  totalTopics: number;
   averageStarsPerRepo: number;
   starsPerRepo: Record<string, number>;
   languages: Record<string, number>;
@@ -63,13 +65,14 @@ export const StatsProvider: React.FC<{ children: React.ReactNode }> = ({
   const latestUpdatedRepo = findLatestUpdatedRepo(repos);
   const oldestRepo = findOldestRepo(repos);
   const updatePeriod = findRepoWithLongestUpdatePeriod(repos);
-
+  const totalTopics = calculateTotalTopics(repos);
   // Create the context value object
   const statsContextValue: StatsContextProps = {
     totalRepos,
     totalGists,
     totalStars,
     totalForks,
+    totalTopics,
     averageStarsPerRepo,
     starsPerRepo,
     languages,
diff --git a/components/stats/BarChartCardWrapper.tsx b/components/stats/BarChartCardWrapper.tsx
new file mode 100644
index 0000000..001e124
--- /dev/null
+++ b/components/stats/BarChartCardWrapper.tsx
@@ -0,0 +1,69 @@
+import { Box, Card, Heading, ScrollArea, Table } from "@radix-ui/themes";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { BarChart } from "@mui/x-charts/BarChart";
+
+export default function BarChartCardWrapper({
+  data,
+  title,
+}: {
+  data: Object;
+  title: string;
+}) {
+  const statsData = Object.entries(data).map(([year, count]) => ({
+    category: year,
+    value: count,
+  }));
+  if (Object.entries(data).length === 0) return null;
+  return (
+    <Card>
+      <Heading className="ml-3">{title}</Heading>
+      <Box className="h-[20rem] w-full rounded-2xl bg-gray-400 p-2">
+        <BarChart
+          xAxis={[
+            {
+              data: statsData.map((d) => d.category),
+              scaleType: "band",
+            },
+          ]}
+          series={[
+            {
+              data: statsData.map((d) => d.value),
+            },
+          ]}
+        />
+      </Box>
+      {Object.entries.length > 5 && (
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="item-1">
+            <AccordionTrigger>See All</AccordionTrigger>
+            <AccordionContent>
+              <Table.Root>
+                <ScrollArea className="h-[15rem] w-full rounded-2xl border p-4">
+                  <Table.Header>
+                    <Table.Row>
+                      <Table.ColumnHeaderCell>Year</Table.ColumnHeaderCell>
+                      <Table.ColumnHeaderCell>Count</Table.ColumnHeaderCell>
+                    </Table.Row>
+                  </Table.Header>
+                  <Table.Body>
+                    {statsData.map((data) => (
+                      <Table.Row key={data.value} className="hover:bg-black/30">
+                        <Table.Cell>{data.category}</Table.Cell>
+                        <Table.Cell>{data.value}</Table.Cell>
+                      </Table.Row>
+                    ))}
+                  </Table.Body>
+                </ScrollArea>
+              </Table.Root>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      )}
+    </Card>
+  );
+}
diff --git a/components/stats/ChartCardWrapper.tsx b/components/stats/ChartCardWrapper.tsx
index a416b3e..10787ba 100644
--- a/components/stats/ChartCardWrapper.tsx
+++ b/components/stats/ChartCardWrapper.tsx
@@ -70,7 +70,7 @@ export default function ChartCardWrapper({
       {Object.entries(data).length > 5 && (
         <Accordion type="single" collapsible className="w-full">
           <AccordionItem value="item-1">
-            <AccordionTrigger>See All {title}</AccordionTrigger>
+            <AccordionTrigger>See All</AccordionTrigger>
             <AccordionContent>
               <Table.Root>
                 <ScrollArea className="h-[15rem] w-full rounded-2xl border p-4">
diff --git a/components/stats/Charts/CreationDate.tsx b/components/stats/Charts/CreationDate.tsx
index c4bafba..49efbea 100644
--- a/components/stats/Charts/CreationDate.tsx
+++ b/components/stats/Charts/CreationDate.tsx
@@ -1,72 +1,14 @@
-import { Box, Card, Heading, ScrollArea, Table } from "@radix-ui/themes";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { BarChart } from "@mui/x-charts/BarChart";
 import { StatsContext } from "@/app/context/StatsContext";
 import { useContext } from "react";
+import BarChartCardWrapper from "../BarChartCardWrapper";
 
 export default function CreationDate() {
   const statsContext = useContext(StatsContext);
   const creationStats = statsContext?.creationStats || {};
-  const statsData = Object.entries(creationStats).map(([year, count]) => ({
-    category: year,
-    value: count,
-  }));
-  if (Object.entries(creationStats).length === 0) return null;
   return (
-    <>
-      <Card>
-        <Heading className="ml-3">Repository Creation Dates</Heading>
-        <Box className="h-[20rem] w-full rounded-2xl bg-gray-400 p-2">
-          <BarChart
-            xAxis={[
-              {
-                data: statsData.map((d) => d.category),
-                scaleType: "band",
-              },
-            ]}
-            series={[
-              {
-                data: statsData.map((d) => d.value),
-              },
-            ]}
-          />
-        </Box>
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="item-1">
-            <AccordionTrigger>See All Creation Dates</AccordionTrigger>
-            <AccordionContent>
-              <Table.Root>
-                <ScrollArea className="h-[15rem] w-full rounded-2xl border p-4">
-                  <Table.Header>
-                    <Table.Row>
-                      <Table.ColumnHeaderCell>Year</Table.ColumnHeaderCell>
-                      <Table.ColumnHeaderCell>Count</Table.ColumnHeaderCell>
-                    </Table.Row>
-                  </Table.Header>
-                  <Table.Body>
-                    {statsData
-                      .sort((a, b) => Number(b.value) - Number(a.value))
-                      .map((data) => (
-                        <Table.Row
-                          key={data.value}
-                          className="hover:bg-black/30"
-                        >
-                          <Table.Cell>{data.category}</Table.Cell>
-                          <Table.Cell>{data.value}</Table.Cell>
-                        </Table.Row>
-                      ))}
-                  </Table.Body>
-                </ScrollArea>
-              </Table.Root>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </Card>
-    </>
+    <BarChartCardWrapper
+      data={creationStats}
+      title="Repository Creation Dates"
+    />
   );
 }
diff --git a/components/stats/Charts/GistCreationDate.tsx b/components/stats/Charts/GistCreationDate.tsx
index 39d9045..44bce4c 100644
--- a/components/stats/Charts/GistCreationDate.tsx
+++ b/components/stats/Charts/GistCreationDate.tsx
@@ -1,73 +1,12 @@
-import { Box, Card, Heading, ScrollArea, Table } from "@radix-ui/themes";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { BarChart } from "@mui/x-charts/BarChart";
 import { StatsContext } from "@/app/context/StatsContext";
 import { useContext } from "react";
+import BarChartCardWrapper from "../BarChartCardWrapper";
 
 export default function GistCreationDate() {
   const statsContext = useContext(StatsContext);
   const gistCreationStats = statsContext?.gistCreationStats || {};
-  const statsData = Object.entries(gistCreationStats).map(([year, count]) => ({
-    category: year,
-    value: count,
-  }));
-
   if (Object.entries(gistCreationStats).length === 0) return null;
   return (
-    <>
-      <Card>
-        <Heading className="ml-3">Gist Creation Dates</Heading>
-        <Box className="h-[20rem] w-full rounded-2xl bg-gray-400 p-2">
-          <BarChart
-            xAxis={[
-              {
-                data: statsData.map((d) => d.category),
-                scaleType: "band",
-              },
-            ]}
-            series={[
-              {
-                data: statsData.map((d) => d.value),
-              },
-            ]}
-          />
-        </Box>
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="item-1">
-            <AccordionTrigger>See All Creation Dates</AccordionTrigger>
-            <AccordionContent>
-              <Table.Root>
-                <ScrollArea className="h-[15rem] w-full rounded-2xl border p-4">
-                  <Table.Header>
-                    <Table.Row>
-                      <Table.ColumnHeaderCell>Year</Table.ColumnHeaderCell>
-                      <Table.ColumnHeaderCell>Count</Table.ColumnHeaderCell>
-                    </Table.Row>
-                  </Table.Header>
-                  <Table.Body>
-                    {statsData
-                      .sort((a, b) => Number(b.value) - Number(a.value))
-                      .map((data) => (
-                        <Table.Row
-                          key={data.value}
-                          className="hover:bg-black/30"
-                        >
-                          <Table.Cell>{data.category}</Table.Cell>
-                          <Table.Cell>{data.value}</Table.Cell>
-                        </Table.Row>
-                      ))}
-                  </Table.Body>
-                </ScrollArea>
-              </Table.Root>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </Card>
-    </>
+    <BarChartCardWrapper data={gistCreationStats} title="Gist Creation Dates" />
   );
 }
diff --git a/components/stats/Charts/StarHistory.tsx b/components/stats/Charts/StarHistory.tsx
index 703c8a4..70a0d98 100644
--- a/components/stats/Charts/StarHistory.tsx
+++ b/components/stats/Charts/StarHistory.tsx
@@ -69,8 +69,8 @@ export default function StarHistory({
           <FaChartLine size={22} />
         </Dialog.Trigger>
         <Dialog.Content>
-          <Dialog.Title className="flex flex-row justify-between w-full">
-            <Box className="flex flex-row items-start justify-between w-full">
+          <Dialog.Title className="flex w-full flex-row justify-between">
+            <Box className="flex w-full flex-row items-start justify-between">
               <div> Star History </div>
               <Dialog.Close>
                 <Button className="cursor-pointer hover:underline">
@@ -81,7 +81,7 @@ export default function StarHistory({
           </Dialog.Title>
           {loading && <Loading />}
           {data.length > 0 && (
-            <Box className="h-[20rem] w-full rounded-2xl bg-gray-400 p-2">
+            <Box className="h-[25rem] w-full rounded-2xl bg-gray-400 p-2">
               <BarChart
                 xAxis={[
                   {
diff --git a/components/stats/Charts/StatTable.tsx b/components/stats/Charts/StatTable.tsx
index c402a47..3cb4574 100644
--- a/components/stats/Charts/StatTable.tsx
+++ b/components/stats/Charts/StatTable.tsx
@@ -1,6 +1,5 @@
 import { StatsContext } from "@/app/context/StatsContext";
 import "@/app/globals.css";
-import { formatNumber } from "@/lib/utils";
 import { Card, Grid, Heading, Text } from "@radix-ui/themes";
 import { useContext } from "react";
 
@@ -12,6 +11,7 @@ export default function StatTable({}: {}) {
     totalStars,
     totalGists,
     averageStarsPerRepo,
+    totalTopics,
   } = statsContext ?? {};
 
   return (
@@ -19,7 +19,7 @@ export default function StatTable({}: {}) {
       <Grid
         columns="2"
         width="auto"
-        className="p-2 rounded-xl hover:bg-black/30"
+        className="rounded-xl p-2 hover:bg-black/30"
       >
         <Heading size="4">Total Repositories</Heading>
         <Text>{totalRepos}</Text>
@@ -27,7 +27,7 @@ export default function StatTable({}: {}) {
       <Grid
         columns="2"
         width="auto"
-        className="p-2 rounded-xl hover:bg-black/30"
+        className="rounded-xl p-2 hover:bg-black/30"
       >
         <Heading size="4">Total Gists</Heading>
         <Text>{totalGists}</Text>
@@ -35,7 +35,7 @@ export default function StatTable({}: {}) {
       <Grid
         columns="2"
         width="auto"
-        className="p-2 rounded-xl hover:bg-black/30"
+        className="rounded-xl p-2 hover:bg-black/30"
       >
         <Heading size="4">Total Forks</Heading>
         <Text>{totalForks}</Text>
@@ -43,7 +43,7 @@ export default function StatTable({}: {}) {
       <Grid
         columns="2"
         width="auto"
-        className="p-2 rounded-xl hover:bg-black/30"
+        className="rounded-xl p-2 hover:bg-black/30"
       >
         <Heading size="4">Total Stars</Heading>
         <Text>{totalStars ?? 0}</Text>
@@ -51,7 +51,15 @@ export default function StatTable({}: {}) {
       <Grid
         columns="2"
         width="auto"
-        className="p-2 rounded-xl hover:bg-black/30"
+        className="rounded-xl p-2 hover:bg-black/30"
+      >
+        <Heading size="4">Total Topics</Heading>
+        <Text>{totalTopics ?? 0}</Text>
+      </Grid>
+      <Grid
+        columns="2"
+        width="auto"
+        className="rounded-xl p-2 hover:bg-black/30"
       >
         <Heading size="4">Average Stars Per Repository</Heading>
         <Text>{averageStarsPerRepo}</Text>
diff --git a/lib/utils/stats.ts b/lib/utils/stats.ts
index cbec299..7551971 100644
--- a/lib/utils/stats.ts
+++ b/lib/utils/stats.ts
@@ -219,3 +219,20 @@ export function getStarsPerRepo(repos: GitHubRepo[]) {
 
   return sortedStarsPerRepo;
 }
+
+/**
+ * Calculates the total number of unique topics across the given GitHub repos.
+ * Iterates through all repos, collects the topics for each repo into a Set to get
+ * unique values, and returns the size of the set.
+ */
+export const calculateTotalTopics = (repos: GitHubRepo[]): number => {
+  let uniqueTopics = new Set<string>();
+  repos.forEach((repo) => {
+    if (repo.topics) {
+      repo.topics.forEach((topic) => {
+        uniqueTopics.add(topic);
+      });
+    }
+  });
+  return uniqueTopics.size;
+};