diff --git a/package.json b/package.json
index 81ec94d2..fb4b8ad9 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "next-auth": "^4.24.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.11.0",
     "superjson": "^1.13.1",
     "zod": "^3.22.4"
   },
diff --git a/src/app/boards/[...id]/page.tsx b/src/app/boards/[...id]/page.tsx
new file mode 100644
index 00000000..5100a63b
--- /dev/null
+++ b/src/app/boards/[...id]/page.tsx
@@ -0,0 +1,3 @@
+export default function BoardPage() {
+  return <></>;
+}
diff --git a/src/app/boards/boards.tsx b/src/app/boards/boards.tsx
new file mode 100644
index 00000000..cca8a944
--- /dev/null
+++ b/src/app/boards/boards.tsx
@@ -0,0 +1,25 @@
+import Link from "next/link";
+
+import { api } from "~/trpc/server";
+
+export async function Boards() {
+  const boards = await api.board.all.query();
+
+  if (boards?.length === 0) return <></>;
+
+  return (
+    <div>
+      {boards?.map((board) => {
+        return (
+          <Link key={board.id} href={`boards/${board.id}`}>
+            <div className="align-center mr-5 flex w-72 justify-center rounded-md border border-dashed border-dark-600 bg-dark-100 p-14 hover:bg-dark-200">
+              <p className="text-md px-4 font-medium text-dark-1000">
+                {board.name}
+              </p>
+            </div>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/app/boards/layout.tsx b/src/app/boards/layout.tsx
index de16e8c2..68ddbbd3 100644
--- a/src/app/boards/layout.tsx
+++ b/src/app/boards/layout.tsx
@@ -20,7 +20,7 @@ const NavButton: React.FC<{
   <Link
     href={href}
     className={classNames(
-      current ? "bg-dark-400 text-white" : "bg-dark-400 text-white",
+      current ? "bg-dark-200 text-white" : "bg-dark-200 text-white",
       "group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-dark-1000",
     )}
   >
@@ -44,20 +44,7 @@ export default async function Layout(props: { children: React.ReactNode }) {
       </div>
 
       <div className="flex h-full w-full">
-        <nav className="w-64 border-r border-dark-600 px-5 py-5">
-          <button className="flex items-center">
-            {session?.user.image ? (
-              <Image
-                src={session?.user.image ?? ""}
-                className="h-8 w-8 rounded-full bg-gray-50"
-                width={30}
-                height={30}
-                alt=""
-              />
-            ) : null}
-            <p className="ml-2 text-sm text-dark-1000">{session?.user.name}</p>
-          </button>
-
+        <nav className="flex w-64 flex-col justify-between border-r border-dark-600 px-5 py-5">
           <div>
             <ul role="list" className="-mx-2 my-6 space-y-1">
               {navigation.map((item) => (
@@ -71,6 +58,21 @@ export default async function Layout(props: { children: React.ReactNode }) {
               ))}
             </ul>
           </div>
+
+          <button className="flex items-center">
+            {session?.user.image ? (
+              <Image
+                src={session?.user.image ?? ""}
+                className="h-8 w-8 rounded-full bg-gray-50"
+                width={30}
+                height={30}
+                alt=""
+              />
+            ) : null}
+            <p className="ml-2 truncate text-sm text-dark-1000">
+              {session?.user.email}
+            </p>
+          </button>
         </nav>
         <div className="w-full p-8">{props.children}</div>
       </div>
diff --git a/src/app/boards/page.tsx b/src/app/boards/page.tsx
index 5bc717aa..f95a92de 100644
--- a/src/app/boards/page.tsx
+++ b/src/app/boards/page.tsx
@@ -1,5 +1,30 @@
-"use client";
+import { HiOutlinePlusSmall } from "react-icons/hi2";
+import { Boards } from "./boards";
 
 export default function BoardsPage() {
-  return <div></div>;
+  return (
+    <div>
+      <div className="mb-8 flex w-full justify-between">
+        <h1 className="font-medium tracking-tight text-dark-1000 sm:text-[1.2rem]">
+          Boards
+        </h1>
+        <div>
+          <button
+            type="button"
+            className="inline-flex items-center gap-x-1.5 rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            <HiOutlinePlusSmall
+              className="-mr-0.5 h-5 w-5"
+              aria-hidden="true"
+            />
+            New
+          </button>
+        </div>
+      </div>
+
+      <div className="flex flex-row">
+        <Boards />
+      </div>
+    </div>
+  );
 }
diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts
index d2b50d31..a2f2aa17 100644
--- a/src/server/db/schema.ts
+++ b/src/server/db/schema.ts
@@ -17,12 +17,12 @@ import { type AdapterAccount } from "next-auth/adapters";
  *
  * @see https://orm.drizzle.team/docs/goodies#multi-project-schema
  */
-export const mysqlTable = mysqlTableCreator((name) => `kan_${name}`);
+export const mysqlTable = mysqlTableCreator((name) => `kan.${name}`);
 
 export const boards = mysqlTable(
   "board",
   {
-    id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
+    id: varchar("id", { length: 12 }).notNull().primaryKey(),
     name: varchar("name", { length: 255 }),
     createdBy: varchar("createdBy", { length: 255 }).notNull(),
     createdAt: timestamp("created_at")