diff --git a/app/src/app.css b/app/src/app.css
index fbe77e4..c55ef9c 100644
--- a/app/src/app.css
+++ b/app/src/app.css
@@ -1,3 +1,11 @@
+:root {
+  font-size: 12px;
+}
+
+body {
+  max-inline-size: 80rem;
+}
+
 header {
   display: flex;
   align-items: center;
diff --git a/app/src/components/card.css b/app/src/components/card.css
new file mode 100644
index 0000000..ae66aca
--- /dev/null
+++ b/app/src/components/card.css
@@ -0,0 +1,22 @@
+.card {
+  margin: unset;
+  padding: 1rem;
+  aspect-ratio: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--nc-bg-2);
+  color: var(--nc-tx-2);
+  border-width: 0.75rem;
+  border-top-style: solid;
+  border-top-color: var(--nc-bg-3);
+  box-shadow: 0 1px var(--nc-bg-3);
+}
+
+.card h2 {
+  padding: unset;
+  font-size: unset;
+}
+
+.card p {
+  white-space: pre-wrap;
+}
diff --git a/app/src/components/card.tsx b/app/src/components/card.tsx
new file mode 100644
index 0000000..e061361
--- /dev/null
+++ b/app/src/components/card.tsx
@@ -0,0 +1,10 @@
+import "./card.css";
+
+export default (props: { id: number; title: string; text: string }) => {
+  return (
+    <article class="card">
+      <h2>{props.title}</h2>
+      <p>{props.text.slice(props.title.length + 1)}</p>
+    </article>
+  );
+};
diff --git a/app/src/components/cards.css b/app/src/components/cards.css
new file mode 100644
index 0000000..71a216b
--- /dev/null
+++ b/app/src/components/cards.css
@@ -0,0 +1,5 @@
+.cards {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+}
diff --git a/app/src/components/cards.tsx b/app/src/components/cards.tsx
new file mode 100644
index 0000000..6964e17
--- /dev/null
+++ b/app/src/components/cards.tsx
@@ -0,0 +1,6 @@
+import type { JSX } from "solid-js";
+import "./cards.css";
+
+export default (props: { children: JSX.Element }) => (
+  <div class="cards">{props.children}</div>
+);
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
index e36f075..60d28b7 100644
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@@ -1,5 +1,7 @@
-import { createResource } from "solid-js";
+import { createResource, For } from "solid-js";
 import type Pages from "../protocol/pages";
+import Cards from "../components/cards";
+import Card from "../components/card";
 
 async function fetchPages(): Promise<Pages.Response> {
   const res = await fetch(
@@ -14,7 +16,17 @@ export default () => {
 
   return (
     <main>
-      <pre>{() => JSON.stringify(pages(), null, " ")}</pre>
+      {() => (
+        <Cards>
+          <For each={pages()}>
+            {(page) => (
+              <a href={`/${page.id}`}>
+                <Card {...page} />
+              </a>
+            )}
+          </For>
+        </Cards>
+      )}
     </main>
   );
 };
diff --git a/app/src/pages/page.tsx b/app/src/pages/page.tsx
index 493a9d3..0344f96 100644
--- a/app/src/pages/page.tsx
+++ b/app/src/pages/page.tsx
@@ -1,6 +1,7 @@
 import { createResource } from "solid-js";
 import type Pages from "../protocol/pages";
 import Editor from "../components/editor";
+import Card from "../components/card";
 import beforeunload from "../helpers/beforeunload";
 import throttle from "../helpers/throttle";
 
@@ -51,7 +52,7 @@ export default (props: { id: number }) => {
   return (
     <main>
       <Editor id={props.id} onUpdatePage={onUpdatePage} />
-      <pre>{() => JSON.stringify(page(), null, " ")}</pre>
+      {() => <Card id={props.id} title="" text="" {...page()} />}
     </main>
   );
 };