diff --git a/src/components/Header.astro b/src/components/Header.astro
index 9f9cace..327fef2 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,14 +1,14 @@
 ---
-import HeaderLink from './HeaderLink.astro';
 import ThemeIcon from './ThemeIcon.astro';
 ---
 
 <header>
 	<nav>
-		<h2 class="header-parent"><a href="https://khoj.dev"><img class="header-icon" src="/icons/logo_type.svg"></img></a></h2>
-		<div class="internal-links">
-			<HeaderLink href="/">Home</HeaderLink>
-			<HeaderLink href="/posts">Blog</HeaderLink>
+		<h2 class="header-parent">
+			<a href="https://khoj.dev"><img class="header-icon" src="/icons/logo_type.svg"></img></a>
+		</h2>
+		<div class="internal-links pb-2">
+			<span>Blog</span>
 		</div>
 		<div class="social-links">
 			<a href="https://twitter.com/khoj_ai" target="_blank">
@@ -16,13 +16,13 @@ import ThemeIcon from './ThemeIcon.astro';
 				<img
 					class="share-button"
 					src="/icons/twitter.svg"
-					width={32}
-					height={32}
+					width={24}
+					height={24}
 				/>
 			</a>
 			<a href="https://github.com/khoj-ai/khoj" target="_blank">
-				<span class="sr-only">Go to Khoj's GitHub repo</span>
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
+				<span class="sr-only">Follow Khoj Development on GitHub</span>
+				<svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24"
 					><path
 						fill="currentColor"
 						d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
@@ -40,8 +40,7 @@ import ThemeIcon from './ThemeIcon.astro';
 	}
 	
 	img.header-icon {
-		width: 52px;
-		height: 52px;
+		height: 28px;
 	}
 
 	header {
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
index fa033cb..c45847e 100644
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -3,7 +3,7 @@
 ---
 
 <button id="themeToggle">
-    <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <svg width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path
             class="sun"
             fill-rule="evenodd"
@@ -22,6 +22,7 @@
         border: 0;
         background: none;
         cursor: pointer;
+        padding: 0.75em 0.5em 1em;
     }
     .sun {
         fill: black;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c8e6fac..441e75a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,291 +1,61 @@
 ---
-import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
-import { SITE_TITLE, SITE_DESCRIPTION} from '../consts';
-import {background_config} from '../consts'
-import Particles from "astro-particles";
-
-const options: any = background_config
-
+import BaseHead from "../components/BaseHead.astro";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
+import { getCollection } from "astro:content";
+import FormattedDate from "../components/FormattedDate.astro";
+
+const posts = (await getCollection("posts")).sort(
+	(b, a) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
+);
 ---
 
 <!doctype html>
 <html lang="en">
-    <head>
-        <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-        <link rel="sitemap" href="/sitemap-index.xml" />
-        <script>
-            import { type Engine } from "tsparticles-engine";
-            import { loadFull } from "tsparticles";
-
-            window.particlesInit = async function (engine: Engine) {
-                await loadFull(engine);
-            }
-            window.particlesLoaded = function () {
-                console.log("particlesLoaded callback");
-            }
-        </script>
-    </head>
-    <body>
-        <Header />
-        <div id="content">
-            <main>
-                <canvas id="scene"></canvas>
-
-                <div id="text">
-                    <p>
-                        Welcome to the official Khoj blog. We'll document our thoughts here about personal AI, product development, and the future of work.
-                    </p>
-                    <p>
-                        Start experimenting with your own personal AI at <a href="https://khoj.dev">khoj.dev</a>.
-                    </p>
-                    <p>We're making core consumer AI applications to ensure the future of digital services is trustworthy, transparent, and deeply useful. The world is going to change a lot in the coming decade, and we want to make this shift happen responsibly and delightfully.</p>
-                    <p>Find our documentation at <a href="https://docs.khoj.dev">docs.khoj.dev</a>.</p>
-                    <p>
-                        If you want to reach out, give feedback, or have a question, <a href="https://discord.gg/BDgyabRM6e">join us on Discord</a> or consult us on <a href="https://github.com/khoj-ai/khoj/issues/">GitHub</a>.
-                    </p>
-                </div>
-            </main>
-            <Particles id="tsparticles" options={options} init="particlesInit" />
-        </div>
-        <Footer />
-    </body>
+	<head>
+		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+		<style>
+			main {
+				width: 960px;
+			}
+		</style>
+	</head>
+	<body>
+		<Header />
+		<main>
+			<section>
+				<div class="grid grid-cols-1 gap-4">
+					{
+						posts.map((post) => (
+							<a
+								href={`/posts/${post.slug}/`}
+								class="p-4rounded-lg flex flex-col md:flex-row gap-4"
+							>
+								<img
+									class="rounded-lg w-full md:w-48 h-48 md:h-full object-cover"
+									src={post.data.heroImage}
+									alt=""
+								/>
+								<div>
+									<h4 class="mt-2 text-slate-800 dark:text-slate-200">
+										{post.data.title}
+									</h4>
+									<p class="dark:text-slate-50 text-slate-900 text-sm">
+										<FormattedDate
+											date={post.data.pubDate}
+										/>
+									</p>
+									<p class="excerpt text-slate-800 dark:text-slate-200">
+										{post.data.description}
+									</p>
+								</div>
+							</a>
+						))
+					}
+				</div>
+			</section>
+		</main>
+		<Footer />
+	</body>
 </html>
-<style>
-    body {
-        position: relative;
-        overflow: hidden;
-        margin: 0;
-        padding: 0;
-    }
-    main {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        padding-top: 240px;
-    }
-    #content {
-        position: relative;
-        margin-bottom: -120px;
-    } 
-    #scene {
-        z-index: 10;
-        position: absolute;
-        top: 50px;
-        width: 150%;
-        max-width: 2000px;
-    }
-    #text {
-        display: flex;
-        flex-direction: column;
-        align-items: left;
-    }
-    footer {
-        position: relative;
-        bottom: 0;
-        width: 100%;
-        padding: 10px 0;
-        text-align: center;
-        background-color: #f1f1f1;
-    }
-    @media (max-width: 650px) {
-        main {
-            padding-top: 10px;
-        }
-        #tsparticles,
-        #scene {
-            display: none;
-        }
-    }
-
-    @media (min-width: 651px) {
-        main {
-            padding-top: 240px;
-        }
-    }
-
-    @media (max-width: 375px) {
-        main {
-            padding-top: 20px;
-        }
-        #text p {
-            font-size: 14px;
-        }
-        footer {
-            padding: 5px 0;
-            font-size: 5px;
-        }
-    }
-</style>
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const rootStyles = getComputedStyle(document.documentElement);
-        const lightBackgroundColor = rootStyles.getPropertyValue('--background-color-light').trim();
-        const darkBackgroundColor = rootStyles.getPropertyValue('--background-color-dark').trim();
-        const theme = localStorage.getItem('theme');
-        if (theme === 'dark') {
-            document.body.style.backgroundColor = darkBackgroundColor;
-        } else {
-            document.body.style.backgroundColor = lightBackgroundColor;
-        }
-    });
-
-    var canvas = document.querySelector("#scene") as HTMLCanvasElement,
-    ctx = canvas.getContext("2d")!,
-    particles: any = [],
-    amount = 0,
-    mouse = {x:0,y:0},
-    radius = 0.2;
-
-    const rootStyles = getComputedStyle(document.documentElement);
-    const colors = [
-        rootStyles.getPropertyValue('--color1').trim(),
-        rootStyles.getPropertyValue('--color2').trim(),
-        rootStyles.getPropertyValue('--color3').trim(),
-        rootStyles.getPropertyValue('--color4').trim(),
-        rootStyles.getPropertyValue('--color5').trim()
-    ];
-
-    
-    var ww = canvas.width = 100;
-    var wh = canvas.height = 100;
-
-    class Particle {
-        x: number;
-        y: number;
-        dest: { x: number, y: number };
-        r: number;
-        vx: number;
-        vy: number;
-        accX: number;
-        accY: number;   
-        friction: number;
-        color: string;
-
-        constructor(x: number, y: number) {
-            this.x = Math.random() * ww;
-            this.y = Math.random() * wh;
-            this.dest = { x, y };
-            this.r = Math.random() * 5 + 4;
-            this.vx = (Math.random() - 0.5) * 20;
-            this.vy = (Math.random() - 0.5) * 20;
-            this.accX = 0;
-            this.accY = 0;
-            this.friction = Math.random() * 0.05 + 0.94;
-            this.color = colors[Math.floor(Math.random() * 5)];
-        }
-
-        render() {
-            if (!ctx) return;
-            this.accX = (this.dest.x - this.x) / 1000;
-            this.accY = (this.dest.y - this.y) / 1000;
-            this.vx += this.accX;
-            this.vy += this.accY;
-            this.vx *= this.friction;
-            this.vy *= this.friction;
-
-            this.x += this.vx;
-            this.y += this.vy;
-
-            ctx.fillStyle = this.color;
-            ctx.beginPath();
-            ctx.arc(this.x, this.y, this.r, Math.PI * 2, 0);
-            ctx.fill();
-
-            var a = this.x - mouse.x;
-            var b = this.y - mouse.y;
-
-            var distance = Math.sqrt(a * a + b * b);
-            if (distance < (radius * 70)) {
-                this.accX = (this.x - mouse.x) / 100;
-                this.accY = (this.y - mouse.y) / 100;
-                this.vx += this.accX;
-                this.vy += this.accY;
-            }
-        }
-    }
-
-
-    function onMouseMove(e : MouseEvent){
-        mouse.x = e.clientX;
-        mouse.y = e.clientY;
-    }
-
-    function onTouchMove(e:TouchEvent){
-        if(e.touches.length > 0 ){
-            mouse.x = e.touches[0].clientX;
-            mouse.y = e.touches[0].clientY;
-        }
-    }
-
-    function onTouchEnd(){
-        mouse.x = -9999;
-        mouse.y = -9999;
-    }
-
-    function initScene(){
-        ww = canvas.width = 2000;
-        wh = canvas.height = 300;
-
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        ctx.font = "bold "+(ww/10)+"px sans-serif";
-        
-        ctx.textAlign = "center";
-        ctx.fillText("K h o j", ww/2, wh/2);
-
-        var data  = ctx.getImageData(0, 0, ww, wh).data;
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.globalCompositeOperation = "screen";
-
-        particles= [];
-        for(var i=0;i<ww;i+=Math.round(ww/150)){
-            for(var j=0;j<wh;j+=Math.round(ww/150)){
-            if(data[ ((i + j*ww)*4) + 3] > 150){
-                particles.push(new Particle(i,j));
-            }
-            }
-        }
-        amount = particles.length;
-
-    }
-
-    function onMouseClick(){
-        radius++;
-        if(radius ===5){
-            radius = 0;
-        }
-    }
-
-    function render() {
-        requestAnimationFrame(render);
-        ctx.clearRect(0, 0, canvas?.width, canvas?.height);
-        for (var i = 0; i < amount; i++) {
-            particles[i].render();
-        }
-    };
-
-    function handleEventListeners() {
-        if (window.innerWidth <= 650) {
-            initScene();
-            window.removeEventListener("mousemove", onMouseMove);
-            window.removeEventListener("touchmove", onTouchMove);
-            window.removeEventListener("click", onMouseClick);
-            window.removeEventListener("touchend", onTouchEnd);
-        } else {
-            window.addEventListener("mousemove", onMouseMove);
-            window.addEventListener("touchmove", onTouchMove);
-            window.addEventListener("click", onMouseClick);
-            window.addEventListener("touchend", onTouchEnd);
-        }
-    }
-
-    initScene();
-    handleEventListeners();
-    requestAnimationFrame(render);
-
-    window.addEventListener('resize', handleEventListeners);
-</script>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
deleted file mode 100644
index 8abdf8e..0000000
--- a/src/pages/posts/index.astro
+++ /dev/null
@@ -1,61 +0,0 @@
----
-import BaseHead from "../../components/BaseHead.astro";
-import Header from "../../components/Header.astro";
-import Footer from "../../components/Footer.astro";
-import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
-import { getCollection } from "astro:content";
-import FormattedDate from "../../components/FormattedDate.astro";
-
-const posts = (await getCollection("posts")).sort(
-	(b, a) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
-);
----
-
-<!doctype html>
-<html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-		<style>
-			main {
-				width: 960px;
-			}
-		</style>
-	</head>
-	<body>
-		<Header />
-		<main>
-			<section>
-				<div class="grid grid-cols-1 gap-4">
-					{
-						posts.map((post) => (
-							<a
-								href={`/posts/${post.slug}/`}
-								class="p-4rounded-lg flex flex-col md:flex-row gap-4"
-							>
-								<img
-									class="rounded-lg w-full md:w-48 h-48 md:h-full object-cover"
-									src={post.data.heroImage}
-									alt=""
-								/>
-								<div>
-									<h4 class="mt-2 text-slate-800 dark:text-slate-200">
-										{post.data.title}
-									</h4>
-									<p class="dark:text-slate-50 text-slate-900 text-sm">
-										<FormattedDate
-											date={post.data.pubDate}
-										/>
-									</p>
-									<p class="excerpt text-slate-800 dark:text-slate-200">
-										{post.data.description}
-									</p>
-								</div>
-							</a>
-						))
-					}
-				</div>
-			</section>
-		</main>
-		<Footer />
-	</body>
-</html>
diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js
index ab0a9fa..581dbac 100644
--- a/src/pages/rss.xml.js
+++ b/src/pages/rss.xml.js
@@ -10,7 +10,7 @@ export async function GET(context) {
 		site: context.site,
 		items: posts.map((post) => ({
 			...post.data,
-			link: `/posts/${post.slug}/`,
+			link: `/${post.slug}/`,
 		})),
 	});
 }
