diff --git a/src/app/snippets/[id]/edit/page.tsx b/src/app/snippets/[id]/edit/page.tsx
index 9f16eff..1608823 100644
--- a/src/app/snippets/[id]/edit/page.tsx
+++ b/src/app/snippets/[id]/edit/page.tsx
@@ -1,3 +1,7 @@
+import { db } from "@/db";
+import { notFound } from "next/navigation";
+import SnippetEditForm from "@/components/snippet-edit-form";
+
 interface SnippetEditPageProps {
   params: Promise<{
     id: string;
@@ -7,5 +11,16 @@ interface SnippetEditPageProps {
 export default async function SnippetEditPage(props: SnippetEditPageProps) {
   const params = await props.params;
   const id = parseInt(params.id);
-  return <div>Editing snippet with id {id}</div>;
+  const snippet = await db.snippet.findFirst({
+    where: { id },
+  });
+
+  if (!snippet) {
+    return notFound();
+  }
+  return (
+    <div>
+      <SnippetEditForm snippet={snippet} />
+    </div>
+  );
 }
diff --git a/src/components/snippet-edit-form.tsx b/src/components/snippet-edit-form.tsx
new file mode 100644
index 0000000..b6ac561
--- /dev/null
+++ b/src/components/snippet-edit-form.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { Snippet } from "@prisma/client";
+
+interface SnippetEditFormProps {
+  snippet: Snippet;
+}
+
+export default function SnippetEditForm({ snippet }: SnippetEditFormProps) {
+  return <div>Client component has snippet with title {snippet.title}</div>;
+}