diff --git a/src/app/notes/page.tsx b/src/app/notes/page.tsx
index 0f2bbaf..f654347 100644
--- a/src/app/notes/page.tsx
+++ b/src/app/notes/page.tsx
@@ -1,3 +1,4 @@
+import Note from "@/components/Note";
 import prisma from "@/lib/db/prisma";
 import { auth } from "@clerk/nextjs";
 import { Metadata } from "next";
@@ -13,5 +14,16 @@ export default async function NotesPage() {
 
   const allNotes = await prisma.note.findMany({ where: { userId } });
 
-  return <div>{JSON.stringify(allNotes)}</div>;
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {allNotes.map((note) => (
+        <Note note={note} key={note.id} />
+      ))}
+      {allNotes.length === 0 && (
+        <div className="col-span-full text-center">
+          {"You don't have any notes yet. Why don't you create one?"}
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/src/components/Note.tsx b/src/components/Note.tsx
new file mode 100644
index 0000000..40b03ca
--- /dev/null
+++ b/src/components/Note.tsx
@@ -0,0 +1,35 @@
+import { Note as NoteModel } from "@prisma/client";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+
+interface NoteProps {
+  note: NoteModel;
+}
+
+export default function Note({ note }: NoteProps) {
+  const wasUpdated = note.updatedAt > note.createdAt;
+
+  const createdUpdatedAtTimestamp = (
+    wasUpdated ? note.updatedAt : note.createdAt
+  ).toDateString();
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{note.title}</CardTitle>
+        <CardDescription>
+          {createdUpdatedAtTimestamp}
+          {wasUpdated && " (updated)"}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="whitespace-pre-line">{note.content}</p>
+      </CardContent>
+    </Card>
+  );
+}