diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index d16c061..0f85c27 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -42,26 +42,26 @@ try {
 	<body class={`bg-base text-text selection:bg-surface2 selection:text-text ${siteConfig.theme}`}>
         <div class="fixed inset-0 z-[-1] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-surface0 via-base to-base"></div>
 		
-        <nav class="max-w-6xl mx-auto px-6 py-8">
-            <header class="glass px-6 py-4 flex items-center justify-between">
+        <nav class="max-w-6xl mx-auto px-4 md:px-6 py-4 md:py-8">
+            <header class="glass px-4 py-3 md:px-6 md:py-4 flex items-center justify-between">
                 <div>
-                    <a href="/" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue block">
+                    <a href="/" class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue block">
                         {siteConfig.title}
                     </a>
-                    <p class="text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
+                    <p class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
                 </div>
-                <div class="flex gap-4 items-center">
+                <div class="flex gap-3 md:gap-4 items-center text-sm md:text-base">
                     <a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
                     <a href="/admin" class="text-subtext0 hover:text-mauve transition-colors">Admin</a>
                 </div>
             </header>
         </nav>
 
-        <main class="max-w-6xl mx-auto px-6 py-8">
+        <main class="max-w-6xl mx-auto px-4 md:px-6 py-4 md:py-8">
 		    <slot />
         </main>
 
-        <footer class="max-w-6xl mx-auto px-6 py-12 text-center text-sm text-subtext1 border-t border-white/5 mt-12">
+        <footer class="max-w-6xl mx-auto px-4 md:px-6 py-8 md:py-12 text-center text-xs md:text-sm text-subtext1 border-t border-white/5 mt-8 md:mt-12">
             <p class="mb-2">{siteConfig.footer}</p>
             <div class="text-subtext0 opacity-50">
                 &copy; {new Date().getFullYear()} {siteConfig.title}
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 5961e91..9df1af5 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -33,44 +33,42 @@ function formatSlug(slug: string) {
 ---
 
 <Layout title="Home">
-	<div class="space-y-8">
-		<section class="text-center py-12">
-			<h1 class="text-5xl font-extrabold mb-4 pb-4 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-mauve via-blue to-teal">
+	<div class="space-y-6 md:space-y-8">
+		<section class="text-center py-6 md:py-12">
+			<h1 class="text-3xl md:text-5xl font-extrabold mb-3 md:mb-4 pb-2 md:pb-4 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-mauve via-blue to-teal">
 				Welcome to my blog
 			</h1>
-			<p class="text-subtext1 text-lg max-w-2xl mx-auto">
+			<p class="text-subtext1 text-base md:text-lg max-w-2xl mx-auto px-4 md:px-0">
 				Thoughts on software, design, and building things with Rust and Astro.
 			</p>
 		</section>
 
-		<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+		<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
 			{error && (
-				<div class="glass p-6 text-red text-center border-red/20">
+				<div class="glass p-4 md:p-6 text-red text-center border-red/20 text-sm md:text-base">
 					{error}
 				</div>
 			)}
 			
 			{posts.length === 0 && !error && (
-				<div class="glass p-12 text-center text-subtext0">
+				<div class="glass p-8 md:p-12 text-center text-subtext0 text-sm md:text-base">
 					<p>No posts found yet. Add some .md files to the data/posts directory!</p>
 				</div>
 			)}
 
 			{posts.map((post) => (
-				<a href={`/posts/${post.slug}`} class="group">
-					<article class="glass p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99]">
-						<div class="flex justify-between items-start">
-							<div>
-								<h2 class="text-2xl font-bold text-lavender group-hover:text-mauve transition-colors mb-2">
-									{formatSlug(post.slug)}
-								</h2>
-								<p class="text-subtext0">
-									Read more about {formatSlug(post.slug)}...
-								</p>
-							</div>
-							<div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity">
-								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
-							</div>
+				<a href={`/posts/${post.slug}`} class="group block">
+					<article class="glass p-5 md:p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99] h-full flex flex-col justify-between">
+						<div>
+							<h2 class="text-xl md:text-2xl font-bold text-lavender group-hover:text-mauve transition-colors mb-1 md:mb-2 line-clamp-2">
+								{formatSlug(post.slug)}
+							</h2>
+							<p class="text-subtext0 text-sm md:text-base line-clamp-3">
+								Read more about {formatSlug(post.slug)}...
+							</p>
+						</div>
+						<div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end mt-4">
+							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-6 md:h-6"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
 						</div>
 					</article>
 				</a>
