diff --git a/src/app/snippets/[id]/page.tsx b/src/app/snippets/[id]/page.tsx
index 4719919..643f0be 100644
--- a/src/app/snippets/[id]/page.tsx
+++ b/src/app/snippets/[id]/page.tsx
@@ -2,6 +2,7 @@ import { db } from "@/db";
 import Link from "next/link";
 import * as actions from "@/actions";
 import { notFound } from "next/navigation";
+import SnippetShowForm from "@/components/snippet-show-form";
 
 interface SnippetShowPageProps {
   params: Promise<{
@@ -29,7 +30,10 @@ export default async function SnippetShowPage(props: SnippetShowPageProps) {
     <div>
       <div className="flex m-4 justify-between items-center">
         <h1 className="text-xl font-bold">{snippet.title}</h1>
-        <div className="flex gap-4">
+        <div className="flex gap-2">
+          <Link href="/" className="p-2 border rounded">
+            Home
+          </Link>
           <Link
             href={`/snippets/${snippet.id}/edit`}
             className="p-2 border rounded"
@@ -41,9 +45,9 @@ export default async function SnippetShowPage(props: SnippetShowPageProps) {
           </form>
         </div>
       </div>
-      <pre className="p-3 border rounded bg-gray-200 border-gray-200">
-        <code>{snippet.code}</code>
-      </pre>
+      <div>
+        <SnippetShowForm snippet={snippet} />
+      </div>
     </div>
   );
 }
diff --git a/src/components/snippet-show-form.tsx b/src/components/snippet-show-form.tsx
new file mode 100644
index 0000000..b31a665
--- /dev/null
+++ b/src/components/snippet-show-form.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Snippet } from "@prisma/client";
+import { Editor } from "@monaco-editor/react";
+
+interface SnippetShowFormProps {
+  snippet: Snippet;
+}
+
+export default function SnippetShowForm({ snippet }: SnippetShowFormProps) {
+  return (
+    <div>
+      <Editor
+        height="40vh"
+        theme="vs-light"
+        language="c"
+        defaultValue={snippet.code}
+        options={{ minimap: { enabled: false } }}
+      />
+    </div>
+  );
+}