diff --git a/src/app/(home)/_components/list-button.tsx b/src/app/(home)/_components/list-button.tsx
new file mode 100644
index 0000000..e4de4c7
--- /dev/null
+++ b/src/app/(home)/_components/list-button.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import {} from "@radix-ui/react-dropdown-menu";
+import { Dot, MoreHorizontal } from "lucide-react";
+import Link from "next/link";
+import { Button } from "~/app/_components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "~/app/_components/ui/dropdown-menu";
+import { api } from "~/trpc/react";
+
+export const ListButton = ({ id, name }: { id: number; name: string }) => {
+  const newName = "test new name";
+
+  const { mutate: updateMutation } = api.list.update.useMutation();
+  const { mutate: deleteMutation } = api.list.delete.useMutation();
+
+  const handleRename = () => updateMutation({ listId: id, name: newName });
+  const handleDelete = () => deleteMutation({ listId: id });
+
+  return (
+    <Button
+      asChild
+      variant="ghost"
+      className="w-full justify-start underline-offset-4 hover:underline"
+    >
+      <Link href="/test/table">
+        <Dot className="mr-2 h-4 w-4" />
+        {name}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              className="data-[state=open]:bg-muted ml-auto flex h-8 w-8 p-0"
+            >
+              <MoreHorizontal />
+              <span className="sr-only">Open menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-[160px]">
+            <DropdownMenuItem onClick={handleRename}>Rename</DropdownMenuItem>
+            <DropdownMenuItem onClick={handleDelete}>Delete</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Link>
+    </Button>
+  );
+};
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
new file mode 100644
index 0000000..7fb8e41
--- /dev/null
+++ b/src/app/(home)/page.tsx
@@ -0,0 +1,39 @@
+import { auth } from "~/server/auth";
+import { UserNav } from "~/app/_components/user-nav";
+import { Button } from "~/app/_components/ui/button";
+import { api } from "~/trpc/server";
+import { ListButton } from "~/app/(home)/_components/list-button";
+
+export default async function Home() {
+  const session = await auth();
+  if (!session) {
+    <main>
+      <h1>Not signed in</h1>
+    </main>;
+  }
+
+  const allLists = await api.list.getAll();
+
+  return (
+    <main className="my-20">
+      <h1 className="my-20 text-center text-2xl font-bold lowercase underline underline-offset-4">
+        {session?.user.name ? `${session.user.name}'s notes` : "notes"}
+      </h1>
+
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="flex h-full flex-1 flex-col space-y-8 p-8">
+          <div className="flex items-center justify-between space-y-2">
+            <Button>create a new list</Button>
+            <UserNav />
+          </div>
+
+          <div className="space-y-1">
+            {allLists.map(({ id, name }) => (
+              <ListButton key={id} id={id} name={name} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index 27421d5..0000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { auth } from "~/server/auth";
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "~/app/_components/ui/table";
-import { UserNav } from "~/app/_components/user-nav";
-import { DataTable } from "~/app/_components/data-table";
-import { z } from "zod";
-import { promises as fs } from "fs";
-import path from "path";
-import { columns } from "~/app/_components/columns";
-import { taskSchema } from "~/app/_components/schema";
-
-async function getTasks() {
-  const data = await fs.readFile(
-    path.join(process.cwd(), "src/app/_data/tasks.json"),
-  );
-
-  const tasks = JSON.parse(data.toString());
-
-  return z.array(taskSchema).parse(tasks);
-}
-
-export default async function Home() {
-  const session = await auth();
-  if (!session) {
-    <main>
-      <h1>Not signed in</h1>
-    </main>;
-  }
-
-  const tasks = await getTasks();
-
-  return (
-    <main className="my-20">
-      <h1 className="my-20 text-center text-2xl font-bold lowercase underline underline-offset-4">
-        {session?.user.name ? `${session.user.name}'s notes` : "notes"}
-      </h1>
-
-      <div className="mx-auto max-w-7xl px-6">
-        {/* <Table>
-          <TableCaption>A list of your recent invoices.</TableCaption>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[100px]">Invoice</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Method</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell className="font-medium">INV001</TableCell>
-              <TableCell>Paid</TableCell>
-              <TableCell>Credit Card</TableCell>
-              <TableCell className="text-right">$250.00</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table> */}
-        <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
-          <div className="flex items-center justify-between space-y-2">
-            <div>
-              <h2 className="text-2xl font-bold tracking-tight">
-                Welcome back!
-              </h2>
-              <p className="text-muted-foreground">
-                Here&apos;s a list of your tasks for this month!
-              </p>
-            </div>
-            <div className="flex items-center space-x-2">
-              <UserNav />
-            </div>
-          </div>
-          <DataTable data={tasks} columns={columns} />
-        </div>
-      </div>
-    </main>
-  );
-}