diff --git a/src/lib/blog.json b/src/lib/blog.json
new file mode 100644
index 0000000..6bc46ce
--- /dev/null
+++ b/src/lib/blog.json
@@ -0,0 +1,5 @@
+[
+	{ "id": 1, "title": "Hello, World!", "image": "/img/blogtest1.gif" },
+	{ "id": 2, "title": "Hardware", "image": "/img/blogtest2.gif" },
+	{ "id": 3, "title": "Test Post", "image": "/img/blogtest3.gif" }
+]
diff --git a/src/lib/components/Blog/ListedPost.svelte b/src/lib/components/Blog/ListedPost.svelte
index 91981f3..05b129b 100644
--- a/src/lib/components/Blog/ListedPost.svelte
+++ b/src/lib/components/Blog/ListedPost.svelte
@@ -1,18 +1,27 @@
 <script>
 	import { fade } from 'svelte/transition';
+	import Image from '../Image.svelte';
 
-	export let post = { id: 0, title: '', author: '', image: '' },
+	export let post = { id: 0, title: '', image: '' },
 		index = 0;
 </script>
 
-<a in:fade={{ delay: 50 * index }} href="/blog/{post.id}">
-	<div class="p-4 rounded-2xl bg-gray-500/10">
-		<enhanced:img
-			class="mb-2 bg-black rounded-xl aspect-video"
-			src={post.image}
-			alt="Blog post cover"
-		/>
-		<p class="text-2xl">{post.title}</p>
-		<p class="text-white/50">By {post.author}</p>
-	</div>
-</a>
+<a
+	in:fade={{ delay: 50 * index }}
+	href="/blog/{post.id}"
+	class="shadow-lg transition-all hover:-translate-y-1"
+>
+	<div
+		class="w-full rounded-lg aspect-video bg-gray-500/10"
+		style="background-image: url({post.image});   
+        background-repeat: repeat;
+        background-size: cover;"
+	>
+		<div class="flex w-full h-full bg-gradient-to-t from-black to-transparent rounded-lg">
+			<!-- <Image style="bg-black rounded-xl" src={post.image} alt="Blog post cover" /> -->
+			<p class="z-10 pb-2 mt-auto ml-2 text-2xl">
+				{post.title}
+			</p>
+		</div>
+	</div></a
+>
diff --git a/src/lib/components/Blog/ScaffoldListedPost.svelte b/src/lib/components/Blog/ScaffoldListedPost.svelte
index 77b8dd1..2eb84b2 100644
--- a/src/lib/components/Blog/ScaffoldListedPost.svelte
+++ b/src/lib/components/Blog/ScaffoldListedPost.svelte
@@ -1,5 +1,3 @@
 <div class="p-4 rounded-2xl bg-gray-500/10">
-	<div class="bg-neutral-200/20 h-[10.5rem] w-full rounded-xl animate-pulse mb-3"></div>
-	<div class="my-1 w-52 h-7 rounded-xl animate-pulse bg-neutral-200/20"></div>
-	<div class="w-20 h-5 rounded-lg animate-pulse bg-neutral-200/20"></div>
+	<div class="mb-3 w-full h-full rounded-xl animate-pulse bg-neutral-200/20"></div>
 </div>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 4c0f8f1..03d3009 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -10,7 +10,7 @@
 
 <div class="flex py-2 w-full h-full shadow-lg bg-gray-500/10">
 	<div class="container flex">
-		<div class="flex flex-col flex-1 my-auto text-sm text-neutral-500">
+		<div class="hidden flex-col flex-1 my-auto text-sm md:flex text-neutral-500">
 			<p class="font-bold">cirroskais.xyz ― cirro's website</p>
 			<div class="flex space-x-0.5">
 				<div class="my-auto w-5 h-5 font-bold">
@@ -32,12 +32,12 @@
 				</p>
 			</div>
 		</div>
-		<div class="flex flex-col flex-1 my-auto text-sm text-neutral-500">
+		<div class="hidden flex-col flex-1 my-auto text-sm xl:flex text-neutral-500">
 			<div class="mx-auto w-5 h-5 transition-colors hover:text-cirro">
 				<Heart></Heart>
 			</div>
 		</div>
-		<div class="flex flex-col flex-1 my-auto text-sm text-neutral-500">
+		<div class="hidden flex-col flex-1 my-auto text-sm md:flex text-neutral-500">
 			<div class="flex ml-auto space-x-1.5">
 				<p>Built with</p>
 				<a
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b0332c4..5a74dc9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -27,16 +27,16 @@
 	<meta name="theme-color" content="#c4bef3" />
 </svelte:head>
 
-<div class="w-screen h-[3.125rem] mb-2">
+<div class="w-screen h-[3.125rem] mb-4">
 	<Header></Header>
 </div>
 
 {#key $page.url}
-	<div in:fade class="container mx-auto min-h-[calc(100vh-4.125rem)]">
+	<div in:fade class="container mx-auto min-h-[calc(100vh-5.125rem)]">
 		<slot />
 	</div>
 {/key}
 
-<div class="mt-2 w-screen">
+<div class="hidden mt-4 w-screen md:block">
 	<Footer></Footer>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 917882d..66364ee 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,8 +17,8 @@
 	<title>{$page.data.discord?.username}/home</title>
 </svelte:head>
 
-<div class="hero w-full h-[calc(100vh-4.125rem)] rounded-lg mx-auto my-auto">
-	<div class="p-4 h-full rounded-lg md:flex">
+<div class="hero w-full h-[calc(100vh-5.125rem)] rounded-lg mx-auto my-auto">
+	<div class="flex p-4 h-full rounded-lg">
 		<div class="my-auto md:w-fit md:mx-auto min-h-max">
 			<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg">
 				<Image
@@ -94,6 +94,7 @@
 				<ImgButton href="https://www.mozilla.org/en-US/firefox/new/" src="/buttons/firefox.gif"
 				></ImgButton>
 				<ImgButton src="/buttons/lol.gif"></ImgButton>
+				<ImgButton src="/buttons/twopaws.png"></ImgButton>
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/api/blog/+server.js b/src/routes/api/blog/+server.js
deleted file mode 100644
index f88b725..0000000
--- a/src/routes/api/blog/+server.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import { error, json } from '@sveltejs/kit';
-
-const posts = [
-	{
-		id: 1,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 1,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 2,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	},
-	{
-		id: 3,
-		title: 'ima cat',
-		author: 'meow',
-		image:
-			'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
-	}
-];
-
-const pages = Math.ceil(posts.length / 12);
-
-/** @type { import("./$types").RequestHandler } */
-export async function GET({ url }) {
-	const index = Number(url.searchParams.get('index'));
-	if (isNaN(index)) error(400, 'Invalid Index');
-
-	return json({
-		index,
-		pages,
-		posts: posts.slice(0, 0)
-	});
-}
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 5e7904d..9290929 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { page } from '$app/stores';
+	import blog from '$lib/blog.json';
 
 	import ListedPost from '$lib/components/Blog/ListedPost.svelte';
 	import First from '$lib/components/Icons/First.svelte';
@@ -14,10 +15,7 @@
 
 	/** @param {number} index */
 	async function loadPosts(index) {
-		const response = await fetch(`/api/blog?index=${index}`);
-		const body = await response.json();
-
-		posts = body.posts;
+		posts = blog;
 	}
 
 	onMount(() => loadPosts(0));
diff --git a/static/buttons/twopaws.png b/static/buttons/twopaws.png
new file mode 100644
index 0000000..ea87982
Binary files /dev/null and b/static/buttons/twopaws.png differ
diff --git a/static/img/blogtest1.gif b/static/img/blogtest1.gif
new file mode 100644
index 0000000..eff020e
Binary files /dev/null and b/static/img/blogtest1.gif differ
diff --git a/static/img/blogtest2.gif b/static/img/blogtest2.gif
new file mode 100644
index 0000000..014e930
Binary files /dev/null and b/static/img/blogtest2.gif differ
diff --git a/static/img/blogtest3.gif b/static/img/blogtest3.gif
new file mode 100644
index 0000000..715f4fc
Binary files /dev/null and b/static/img/blogtest3.gif differ