diff --git a/app/page.tsx b/app/page.tsx
index 211cae9..a617254 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,14 +1,16 @@
+import { Container } from "@/components/container";
+import { Prose } from "@/components/prose";
 import { api } from "@/lib/api/server";
 
 export default async function Home() {
   const { data: health } = await api.health.get();
 
   return (
-    <main className="container mx-auto p-4 md:py-8">
-      <section className="prose prose-neutral max-w-none">
-        <h1 className="text-3xl font-bold">Hackathon Template</h1>
+    <Container>
+      <Prose>
+        <h1>Hackathon Template</h1>
         <pre>{JSON.stringify(health, null, 2)}</pre>
-      </section>
-    </main>
+      </Prose>
+    </Container>
   );
 }
diff --git a/components/container.tsx b/components/container.tsx
new file mode 100644
index 0000000..7510662
--- /dev/null
+++ b/components/container.tsx
@@ -0,0 +1,7 @@
+interface ContainerProps {
+  children: React.ReactNode;
+}
+
+export function Container({ children }: ContainerProps) {
+  return <div className="container mx-auto p-4 md:py-8">{children}</div>;
+}
diff --git a/components/prose.tsx b/components/prose.tsx
new file mode 100644
index 0000000..6170d48
--- /dev/null
+++ b/components/prose.tsx
@@ -0,0 +1,7 @@
+interface ProseProps {
+  children: React.ReactNode;
+}
+
+export function Prose({ children }: ProseProps) {
+  return <div className="prose prose-neutral max-w-none">{children}</div>;
+}