diff --git a/src/app.css b/src/app.css
index bb5792d..c1364a7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -6,45 +6,17 @@
 @tailwind utilities;
 
 body {
+    @apply text-gray-700;
+    
     font-family: Inter, sans-serif;
 }
 
-/* TODO: These aren't necessary */
-.text-gt {
-    background: linear-gradient(to top, hsl(211, 78%, 49%), hsl(256, 100%, 16%));
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-.text-gb {
-    background: linear-gradient(to bottom, hsl(211, 78%, 49%), hsl(256, 100%, 16%));
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-.text-gr {
-    background: linear-gradient(to right, hsl(211, 78%, 49%), hsl(256, 100%, 16%));
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-.text-gl {
-    background: linear-gradient(to left, hsl(211, 78%, 49%), hsl(256, 100%, 16%));
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-
 .markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
     @apply font-semibold mb-3;
 }
 
 .markdown h1, .markdown h2 {
-    @apply text-2xl sm:text-3xl mt-12 font-medium;
+    @apply text-2xl sm:text-3xl mt-8 sm:mt-12 font-medium;
 }
 
 .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
diff --git a/src/app.html b/src/app.html
index 62e1815..fc685ae 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,12 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover" class="text-gray-700">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+<head>
+    <meta charset="utf-8"/>
+    <link rel="icon" href="%sveltekit.assets%/favicon.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    %sveltekit.head%
+</head>
+<body data-sveltekit-preload-data="hover">
+<div style="display: contents">%sveltekit.body%</div>
+</body>
 </html>
diff --git a/src/lib/components/layout/blog-card.svelte b/src/lib/components/layout/blog-card.svelte
index 3d66e8b..f721b7b 100644
--- a/src/lib/components/layout/blog-card.svelte
+++ b/src/lib/components/layout/blog-card.svelte
@@ -1,34 +1,34 @@
 <script lang="ts">
 	import type { BlogPost } from '$lib/types/types';
+
 	import { getDateString } from '$lib/functions/functions';
+	import { MoveRight } from 'lucide-svelte';
 
 	import Button from '$lib/components/buttons/button.svelte';
 
 	export let data: BlogPost;
 </script>
 
-<div class="flex flex-col gap-1 rounded bg-gray-100 px-4 py-3.5">
-	<p class="text-sm font-medium">{getDateString(data.metadata.date)}</p>
-	<!-- TODO: Hover effects on links -->
-	<Button href="/blog/{data.metadata.slug}" classes="flex">
-		<span class="font-bold">{data.metadata.title}</span>
-	</Button>
-	<p class="">{data.intro}</p>
-	<!--
-    <div class="mb-8 flex gap-2">
-        {#each data.metadata.categories as category}
-            <Button onClick={() => {}} classes="bg-gray-100">
-                <p class="font-semibold">{category.name}</p>
-            </Button>
-        {/each}
-    </div>
-    <div class="flex">
-        <Button href="/blog/{data.metadata.slug}">
-            <span class="flex font-bold">
-                Read more &nbsp
-                <Icon icon="arrow_forward" />
-            </span>
-        </Button>
-    </div>
-    -->
-</div>
+<Button
+	href="/blog/{data.metadata.slug}"
+	classes="group flex gap-3 rounded bg-gray-100 px-4 py-3.5 sm:px-5 sm:py-4 md:px-6 md:py-5"
+>
+	<span class="flex-1">
+		<span class="mb-1 block text-sm text-gray-500 sm:text-base"
+			>{getDateString(data.metadata.date)}</span
+		>
+		<span class="mb-2.5 block font-bold sm:text-2xl">{data.metadata.title}</span>
+		<span class="block">
+			{data.intro.substring(0, 100)}
+			<span class="bg-gradient-to-r from-gray-700 to-white bg-clip-text text-transparent"
+				>{data.intro.substring(100, 110)}</span
+			>
+		</span>
+	</span>
+
+	<span
+		class="mr-3 hidden items-center text-gray-400 transition-all duration-300 group-hover:mr-1.5 group-hover:text-gray-600 sm:flex"
+	>
+		<MoveRight />
+	</span>
+</Button>
diff --git a/src/lib/components/layout/blog-header.svelte b/src/lib/components/layout/blog-header.svelte
index 0471722..6d2f6f3 100644
--- a/src/lib/components/layout/blog-header.svelte
+++ b/src/lib/components/layout/blog-header.svelte
@@ -7,7 +7,7 @@
 	export let data: BlogPost;
 </script>
 
-<div class="mb-2.5">
+<div class="mb-8 sm:mb-12">
 	<div class="flex flex-col gap-2.5 text-center sm:gap-3.5">
 		<p class="mb-0.5 text-sm leading-none sm:text-base">{getDateString(data.metadata.date)}</p>
 		<h1 class="text-3xl font-bold sm:text-5xl lg:text-6xl">
diff --git a/src/lib/components/layout/blog-list-header.svelte b/src/lib/components/layout/blog-list-header.svelte
index 5326e4c..b6dc654 100644
--- a/src/lib/components/layout/blog-list-header.svelte
+++ b/src/lib/components/layout/blog-list-header.svelte
@@ -6,7 +6,7 @@
 	let categories: string[] = ['.NET', 'Angular', 'C#', 'Svelte'];
 </script>
 
-<div class="mb-12 flex flex-col gap-2.5 text-center sm:gap-3.5">
+<div class="mb-8 flex flex-col gap-2.5 text-center sm:mb-12 sm:gap-3.5">
 	<p class="mb-0.5 text-sm leading-none sm:text-base">2 Found</p>
 	<h1 class="text-3xl font-bold sm:text-5xl lg:text-6xl">Blog Posts</h1>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f02fb60..fc4a4a4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -22,10 +22,13 @@
 	</p>
 </div>
 <div class="flex flex-col gap-4">
-	<Button href="blog" classes="group flex bg-gray-100 px-3.5 py-2.5 hover:bg-gray-200">
+	<Button
+		href="blog"
+		classes="group flex bg-gray-100 px-3.5 py-2.5 hover:bg-gray-200 sm:px-5 sm:py-4 md:px-6 md:py-5"
+	>
 		<span class="flex flex-1 flex-col">
-			<span class="font-semibold">Blog</span>
-			<span class="text-sm text-gray-500">Read my latest posts.</span>
+			<span class="font-bold sm:text-2xl">Blog</span>
+			<span class="text-sm text-gray-500 sm:text-base">Read my latest posts.</span>
 		</span>
 		<span
 			class="mr-3 flex items-center text-gray-400 transition-all duration-300 group-hover:mr-1.5 group-hover:text-gray-600"
@@ -33,10 +36,13 @@
 			<MoveRight />
 		</span>
 	</Button>
-	<Button href="projects" classes="group flex bg-gray-100 px-3.5 py-2.5 hover:bg-gray-200">
+	<Button
+		href="projects"
+		classes="group flex bg-gray-100 px-3.5 py-2.5 hover:bg-gray-200 sm:px-5 sm:py-4 md:px-6 md:py-5"
+	>
 		<span class="flex flex-1 flex-col">
-			<span class="font-semibold">Projects</span>
-			<span class="text-sm text-gray-500">See my past projects.</span>
+			<span class="font-bold sm:text-2xl">Projects</span>
+			<span class="text-sm text-gray-500 sm:text-base">See my past projects.</span>
 		</span>
 		<span
 			class="mr-3 flex items-center text-gray-400 transition-all duration-300 group-hover:mr-1.5 group-hover:text-gray-600"
@@ -44,10 +50,13 @@
 			<MoveRight />
 		</span>
 	</Button>
-	<Button href="about" classes="group flex bg-gray-100 px-3.5 py-2.5 hover:bg-gray-200">
+	<Button
+		href="about"
+		classes="group flex bg-gray-100 px-3.5 py-2.5 hover:bg-gray-200 sm:px-5 sm:py-4 md:px-6 md:py-5"
+	>
 		<span class="flex flex-1 flex-col">
-			<span class="font-semibold">About</span>
-			<span class="text-sm text-gray-500">Learn more about me.</span>
+			<span class="font-bold sm:text-2xl">About</span>
+			<span class="text-sm text-gray-500 sm:text-base">Learn more about me.</span>
 		</span>
 		<span
 			class="mr-3 flex items-center text-gray-400 transition-all duration-300 group-hover:mr-1.5 group-hover:text-gray-600"
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 586437a..d853441 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -14,7 +14,7 @@
 </svelte:head>
 
 <div class="md:flex md:gap-20">
-	<div class="mb-12 flex flex-col gap-4 md:mb-0">
+	<div class="mb-8 sm:mb-12 flex flex-col gap-4 md:mb-0">
 		<div
 			class="mx-auto h-[170px] w-[170px] rounded-full border border-gray-300 bg-cover md:mx-0"
 			style="background-image: url({url})"
@@ -42,7 +42,7 @@
 			</Button>
 		</div>
 	</div>
-	<div class="rounded bg-gray-100 p-4 md:flex-1">
+	<div class="rounded bg-gray-100 px-4 py-3.5 sm:px-5 sm:py-4 md:px-6 md:py-5 md:flex-1">
 		<p class="mb-5">
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
 			incididunt ut labore et dolore magna aliqua. Posuere urna nec tincidunt praesent semper
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 097a8f7..b1d8f37 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -14,12 +14,10 @@
 
 <BlogHeader {data} />
 
-<!--
 <div class="flex">
 	<div class="w-[5px] rounded-full bg-gradient-to-b from-blue-600 to-blue-950" />
 	<p class="max-w-prose flex-1 px-3 py-1 font-medium">{data.intro}</p>
 </div>
--->
 
 <div class="markdown box-content">
 	<SvelteMarkdown
diff --git a/static/posts/test.md b/static/posts/test.md
index b220316..9e963ba 100644
--- a/static/posts/test.md
+++ b/static/posts/test.md
@@ -5,7 +5,9 @@ slug: test
 categories: [ "dotnet", "csharp", "godot" ]
 ---
 
-Intro paragraph.
+Fermentum dui faucibus in ornare quam viverra orci. Non diam phasellus vestibulum lorem sed risus ultricies tristique
+nulla. Malesuada proin libero nunc consequat interdum varius sit amet. Pharetra pharetra massa massa ultricies mi. Est
+velit egestas dui id ornare arcu odio ut sem.
 
 <!--endintro-->
 
