diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 0284bd0..bea4401 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -46,18 +46,22 @@
 	{/if}
 </div>
 
-{#each data.blogArticles as article (article.slug)}
-	<div class="flex gap-2 px-4">
-		<a href={resolve('/blog/[slug]', { slug: article.slug })}>{article.title}</a>
-		{#if data.isAdmin && article.status === 'draft'}
-			<span class="text-xs uppercase text-orange-500">draft</span>
-			<a href={resolve('/blog/[slug]/edit', { slug: article.slug })} class="text-xs underline"
-				>edit</a
-			>
-		{/if}
-		<p>{article.createdAt?.toDateString()}</p>
-	</div>
-{/each}
+<div class="flex flex-col items-center gap-2">
+	{#each data.blogArticles as article (article.slug)}
+		<a href={resolve('/blog/[slug]', { slug: article.slug })}>
+			<div class="flex gap-2 py-2 px-4 border rounded min-w-100">
+				<p class="font-bold text-md">{article.title}</p>
+				{#if data.isAdmin && article.status === 'draft'}
+					<span class="text-xs uppercase text-orange-500">draft</span>
+					<a href={resolve('/blog/[slug]/edit', { slug: article.slug })} class="text-xs underline"
+						>edit</a
+					>
+				{/if}
+				<p>{article.createdAt?.toDateString()}</p>
+			</div>
+		</a>
+	{/each}
+</div>
 
 {#if createNewArticlePopup}
 	<div class="fixed inset-0 flex items-center justify-center bg-black/40">