diff --git a/astro.config.mjs b/astro.config.mjs
index 90f04ba..76ea6b6 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,11 +1,12 @@
 import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
-
 import tailwind from "@astrojs/tailwind";
 
+import svelte from "@astrojs/svelte";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://skyfall.dev",
-  integrations: [mdx(), sitemap(), tailwind()],
-});
+  integrations: [mdx(), sitemap(), tailwind(), svelte()]
+});
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index 918ac17..dfd9739 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 2bef714..7197abd 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,10 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/svelte": "^5.6.0",
+    "activity-calendar-widget": "^0.0.14",
+    "octokit": "^4.0.2",
+    "svelte": "^4.2.18",
     "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
diff --git a/src/components/homepage/GitHubHeatmap.svelte b/src/components/homepage/GitHubHeatmap.svelte
new file mode 100644
index 0000000..be2374e
--- /dev/null
+++ b/src/components/homepage/GitHubHeatmap.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import ActivityCalendarWidget from "activity-calendar-widget/svelte";
+  import { Octokit } from "octokit";
+
+  async function loadGitHubActivity() {
+    const octokit = new Octokit();
+    const events = await octokit.rest.activity.listPublicEventsForUser({
+      username: "SkyfallWasTaken",
+    });
+
+    const eventsMap: Map<string, number> = new Map();
+    events.data.forEach((event) => {
+      if (!event.created_at) return;
+
+      let count = eventsMap.get(event.created_at);
+      if (!count) {
+        eventsMap.set(event.created_at, 1);
+      } else {
+        count += 1;
+        eventsMap.set(event.created_at, count);
+      }
+    });
+
+    const array: { date: string; activities: any[] }[] = [];
+    eventsMap.forEach((value, key) => {
+      array.push({
+        date: key.slice(0, 11),
+        activities: Array(value).fill({}),
+      });
+    });
+    console.log(array);
+    return array;
+  }
+</script>
+
+<div class="w-full">
+  {#await loadGitHubActivity()}
+    <p>Give us a mo...</p>
+  {:then data}
+    <ActivityCalendarWidget daysToRender={365} {data} levelColorMode={"dark"} />
+  {/await}
+</div>
+
+<style>
+  img {
+    width: 82px;
+  }
+</style>
diff --git a/src/components/ui/Hr.astro b/src/components/ui/Hr.astro
new file mode 100644
index 0000000..8cf9491
--- /dev/null
+++ b/src/components/ui/Hr.astro
@@ -0,0 +1 @@
+<hr class="h-px my-12 bg-surface1 border-0" />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 86d093d..fe562dd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,6 +4,8 @@ import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import Button from "../components/ui/Button.astro";
+import Hr from "../components/ui/Hr.astro";
+import GitHubHeatmap from "../components/homepage/GitHubHeatmap.svelte";
 ---
 
 <!doctype html>
@@ -26,6 +28,10 @@ import Button from "../components/ui/Button.astro";
           <a href="/blog"><Button>Read my blog</Button></a>
         </div>
       </div>
+      <Hr />
+      <div class="flex flex-col gap-4 w-full lg:w-[40%]">
+        <GitHubHeatmap client:load />
+      </div>
     </main>
     <Footer />
   </body>
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..522c1ef
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+}
