diff --git a/src/components/PromptCard.astro b/src/components/PromptCard.astro
index 049ddee..cfd4903 100644
--- a/src/components/PromptCard.astro
+++ b/src/components/PromptCard.astro
@@ -23,7 +23,7 @@ const formatDate = (dateStr: string | undefined) => {
 };
 ---
 
-<div class="border rounded p-4 bg-gray-400 text-gray-800 shadow-sm flex flex-col gap-2">
+<div class="border rounded p-4 bg-gray-400 text-gray-800 shadow-sm flex flex-col gap-2 min-h-[12rem]">
   <div class="flex items-center justify-between">
     <h3 class="text-lg font-semibold">{title}</h3>
     <span class={`text-xs font-medium px-2 py-1 rounded ${
diff --git a/src/pages/add.astro b/src/pages/add.astro
new file mode 100644
index 0000000..fa02752
--- /dev/null
+++ b/src/pages/add.astro
@@ -0,0 +1,119 @@
+---
+import "../styles/global.css";
+
+const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
+const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
+---
+
+<html>
+  <head>
+    <title>Add Prompt</title>
+  </head>
+
+  <body class="font-sans antialiased bg-gray-800 text-gray-100">
+    <div
+      id="supabase-env"
+      data-url={supabaseUrl}
+      data-key={supabaseKey}
+      hidden
+    ></div>
+
+    <h1 class="text-2xl font-bold mb-4">Add New Prompt</h1>
+
+    <div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden">
+      Prompt added successfully!
+    </div>
+    <div id="error" class="bg-red-100 text-red-700 p-4 rounded mb-4 hidden"></div>
+
+    <form id="add-form" class="space-y-4">
+      <div>
+        <label for="title" class="block font-medium">Title</label>
+        <input name="title" id="title" required class="border p-2 w-full rounded" />
+        <input type="hidden" name="slug" id="slug" />
+      </div>
+
+      <!-- <div>
+        <label for="slug" class="block font-medium">Slug</label>
+        <input name="slug" id="slug" required class="border p-2 w-full rounded" />
+      </div> -->
+
+      <div>
+        <label for="type" class="block font-medium">Type</label>
+        <select name="type" id="type" required class="border border-gray-100 p-2 rounded w-full bg-gray-800">
+          <option value="System">System</option>
+          <option value="Task">Task</option>
+        </select>
+      </div>
+
+      <div>
+        <label for="description" class="block font-medium">Description</label>
+        <textarea name="description" id="description" rows="2" required class="border p-2 w-full rounded"></textarea>
+      </div>
+
+      <div>
+        <label for="tags" class="block font-medium">Tags (comma-separated)</label>
+        <input name="tags" id="tags" class="border p-2 w-full rounded" />
+      </div>
+
+      <div>
+        <label for="notes" class="block font-medium">Notes</label>
+        <textarea name="notes" id="notes" rows="3" class="border p-2 w-full rounded"></textarea>
+      </div>
+
+      <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">
+        Add Prompt
+      </button>
+    </form>
+
+    <script type="module">
+      import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
+
+      const SUPABASE_URL = document.getElementById('supabase-env').dataset.url;
+      const SUPABASE_ANON_KEY = document.getElementById('supabase-env').dataset.key;
+
+      const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+      document.addEventListener('DOMContentLoaded', () => {
+        const form = document.getElementById('add-form');
+        const successBox = document.getElementById('success');
+        const errorBox = document.getElementById('error');
+
+        document.getElementById('title').addEventListener('input', (e) => {
+          const value = e.target.value
+            .toLowerCase()
+            .replace(/[^\w\s-]/g, '')
+            .replace(/\s+/g, '-')
+            .trim();
+          document.getElementById('slug').value = value;
+        });
+
+        form.addEventListener('submit', async (e) => {
+          e.preventDefault();
+
+          successBox.style.display = 'none';
+          errorBox.style.display = 'none';
+
+          const formData = new FormData(form);
+          const payload = {
+            title: formData.get('title'),
+            slug: formData.get('slug'),
+            type: formData.get('type'),
+            description: formData.get('description'),
+            tags: formData.get('tags')?.split(',').map(t => t.trim()).filter(Boolean),
+            notes: formData.get('notes')
+          };
+
+          const { error } = await supabase.from('prompts').insert([payload]);
+
+          if (error) {
+            errorBox.innerText = error.message;
+            errorBox.style.display = 'block';
+          } else {
+            successBox.style.display = 'block';
+            form.reset();
+          }
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 77bb74b..54c7059 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -17,12 +17,12 @@ const allTags = Array.from(
 ---
 
 <MainLayout>
-  <div class="border-b p-4 bg-gray-800 text-gray-100">
+  <div class="border-b p-4">
     <h1 class="text-2xl font-bold">Prompt Catalog</h1>
     <p class="text-sm mt-1">Explore and filter AI prompts</p>
   </div>
 
-  <div class="flex h-screen bg-gray-800 text-gray-100">
+  <div class="flex h-screen">
     <SearchBar allTags={allTags} />
 
     <div class="flex-1 flex flex-col overflow-hidden">
