diff --git a/src/lib/blog.json b/src/lib/blog.json
index 034abaf..646d30e 100644
--- a/src/lib/blog.json
+++ b/src/lib/blog.json
@@ -1,22 +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" },
-	{ "id": 4, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 5, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 6, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 7, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 8, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 9, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 10, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 11, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 12, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 13, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 14, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 15, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 16, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 17, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 18, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 19, "title": "Test Post", "image": "/img/blogtest3.gif" },
-	{ "id": 20, "title": "Test Post", "image": "/img/blogtest3.gif" }
+	{ "id": 1, "slug": "hello-world", "title": "Hello, World!", "image": "/img/blogtest1.gif" },
+	{ "id": 2, "slug": "hardware", "title": "Hardware", "image": "/img/blogtest2.gif" },
+	{ "id": 3, "slug": "test-post", "title": "Test Post", "image": "/img/blogtest3.gif" }
 ]
diff --git a/src/lib/components/Blog/ListedPost.svelte b/src/lib/components/Blog/ListedPost.svelte
index 5bc833f..95a58ef 100644
--- a/src/lib/components/Blog/ListedPost.svelte
+++ b/src/lib/components/Blog/ListedPost.svelte
@@ -1,14 +1,13 @@
 <script>
 	import { fade } from 'svelte/transition';
-	import Image from '../Image.svelte';
 
-	export let post = { id: 0, title: '', image: '' },
+	export let post = { id: 0, title: '', image: '', slug: '' },
 		index = 0;
 </script>
 
 <a
 	in:fade|global={{ delay: 50 * index }}
-	href="/blog/{post.id}"
+	href="/blog/{post.slug}"
 	class="shadow-lg transition-all focus:-translate-y-1 hover:-translate-y-1"
 >
 	<div
diff --git a/src/lib/components/Blog/ScaffoldListedPost.svelte b/src/lib/components/Blog/ScaffoldListedPost.svelte
index 029f4ff..8a10b36 100644
--- a/src/lib/components/Blog/ScaffoldListedPost.svelte
+++ b/src/lib/components/Blog/ScaffoldListedPost.svelte
@@ -4,6 +4,6 @@
 	export let index = 0;
 </script>
 
-<div in:fade|global={{ delay: 50 * index }} class="shadow-lg">
+<div in:fade|global={{ delay: 50 * index }} class="hidden shadow-lg md:block">
 	<div class="w-full rounded-lg aspect-video bg-gray-500/10"></div>
 </div>
diff --git a/src/lib/components/Icons/Back.svelte b/src/lib/components/Icons/Back.svelte
new file mode 100644
index 0000000..4d9da10
--- /dev/null
+++ b/src/lib/components/Icons/Back.svelte
@@ -0,0 +1,12 @@
+<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"
+	class="w-6 h-6 lucide lucide-chevron-left"><path d="m15 18-6-6 6-6" /></svg
+>
diff --git a/src/lib/components/Icons/First.svelte b/src/lib/components/Icons/First.svelte
deleted file mode 100644
index 9578755..0000000
--- a/src/lib/components/Icons/First.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	fill="none"
-	viewBox="0 0 24 24"
-	stroke-width="1.5"
-	stroke="currentColor"
-	class="w-6 h-6"
->
-	<path
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
-	/>
-</svg>
diff --git a/src/lib/components/Icons/Last.svelte b/src/lib/components/Icons/Last.svelte
deleted file mode 100644
index 0b919bd..0000000
--- a/src/lib/components/Icons/Last.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	fill="none"
-	viewBox="0 0 24 24"
-	stroke-width="1.5"
-	stroke="currentColor"
-	class="w-6 h-6"
->
-	<path
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
-	/>
-</svg>
diff --git a/src/lib/components/Icons/Next.svelte b/src/lib/components/Icons/Next.svelte
new file mode 100644
index 0000000..7af7309
--- /dev/null
+++ b/src/lib/components/Icons/Next.svelte
@@ -0,0 +1,10 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="w-6 h-6 lucide lucide-chevron-right"><path d="m9 18 6-6-6-6" /></svg
+>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index c55358e..dff933b 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -4,26 +4,27 @@
 	import blog from '$lib/blog.json';
 
 	import ListedPost from '$lib/components/Blog/ListedPost.svelte';
-	import First from '$lib/components/Icons/First.svelte';
-	import Last from '$lib/components/Icons/Last.svelte';
+	import Back from '$lib/components/Icons/Back.svelte';
+	import Next from '$lib/components/Icons/Next.svelte';
 	import ScaffoldListedPost from '$lib/components/Blog/ScaffoldListedPost.svelte';
 
 	/**  @type {any[]} */
 	let posts = loadPosts(0);
-	let pages = Math.ceil(blog.length / 12);
+	let pages = Math.ceil(blog.length / 16);
 	let selectedPage = writable(0);
 
 	/** @param {number} index */
 	function loadPosts(index) {
 		let page = Array.from(blog);
 		page.reverse();
-		page = page.slice(index * 12, (index + 1) * 12);
+		page = page.slice(index * 16, (index + 1) * 16);
 
-		while (page.length < 12) {
+		while (page.length < 16) {
 			page.push({
 				id: -1,
 				title: '',
-				image: ''
+				image: '',
+				slug: ''
 			});
 		}
 
@@ -39,32 +40,38 @@
 	<title>{$page.data.discord?.username}/blog</title>
 </svelte:head>
 
-<div class="">
-	<div
-		class="grid gap-2 md:grid-cols-2 md:grid-rows-5 lg:grid-cols-3 lg:grid-rows-4 xl:grid-cols-4 xl:grid-rows-3"
-	>
-		{#key posts}
-			{#each posts as post, i}
-				{#if post.id === -1}
-					<ScaffoldListedPost index={i}></ScaffoldListedPost>
-				{:else}
-					<ListedPost {post} index={i}></ListedPost>
-				{/if}
-			{/each}
-		{/key}
-	</div>
-	<div>
-		<p>{pages} pages</p>
-		<p>page {$selectedPage + 1}</p>
-		<button
-			on:click={() => {
-				$selectedPage -= 1;
-			}}>back</button
-		>
-		<button
-			on:click={() => {
-				$selectedPage += 1;
-			}}>forward</button
-		>
+<div class="flex flex-col w-full">
+	<div class="flex flex-col my-auto space-y-7">
+		<div class="grid gap-2 md:grid-rows-8 md:grid-cols-2 2xl:grid-cols-4 2xl:grid-rows-4">
+			{#key posts}
+				{#each posts as post, i}
+					{#if post.id === -1}
+						<ScaffoldListedPost index={i}></ScaffoldListedPost>
+					{:else}
+						<ListedPost {post} index={i}></ListedPost>
+					{/if}
+				{/each}
+			{/key}
+		</div>
+		<div class="flex mx-auto space-x-1 rounded-md bg-gray-500/10">
+			<button
+				class="p-2 my-auto transition-colors hover:text-cirro"
+				on:click={() => {
+					if ($selectedPage <= 0) return;
+					$selectedPage -= 1;
+				}}
+			>
+				<Back></Back>
+			</button>
+			<p class="p-2 my-auto">{$selectedPage + 1} / {pages}</p>
+			<button
+				class="p-2 my-auto transition-colors hover:text-cirro"
+				on:click={() => {
+					if ($selectedPage >= pages - 1) return;
+					$selectedPage += 1;
+				}}
+				><Next></Next>
+			</button>
+		</div>
 	</div>
 </div>