diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1aa43a0..8d73987 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,29 @@
 import { db } from "@/db";
+import Link from "next/link";
 
 export default async function HomePage() {
   const snippets = await db.snippet.findMany();
   const renderedSnippets = snippets.map((snippet) => {
-    return <div key={snippet.id}>{snippet.title}</div>;
+    return (
+      <Link
+        key={snippet.id}
+        href={`/snippets/${snippet.id}`}
+        className="flex justify-between items-center p-2 border rounded"
+      >
+        <div>{snippet.title}</div>
+        <div>View</div>
+      </Link>
+    );
   });
-  return <div>{renderedSnippets}</div>;
+  return (
+    <div>
+      <div className="flex m-2 justify-between items-center">
+        <h1 className="text-xl font-bold">Snippets</h1>
+        <Link href="/snippets/new" className="border p-2 rounded">
+          New
+        </Link>
+      </div>
+      <div className="flex flex-col gap-2">{renderedSnippets}</div>
+    </div>
+  );
 }