diff --git a/src/data/seed-snippets.json b/src/data/seed-snippets.json
index 0637a08..9f8ffb1 100644
--- a/src/data/seed-snippets.json
+++ b/src/data/seed-snippets.json
@@ -1 +1,65 @@
-[]
\ No newline at end of file
+[
+  {
+    "id": "seed-1",
+    "title": "React Counter Hook",
+    "description": "Basic state management with useState",
+    "code": "import { useState } from 'react'\n\nfunction Counter() {\n  const [count, setCount] = useState(0)\n  \n  return (\n    <div className=\"p-6 space-y-4\">\n      <p className=\"text-2xl font-bold\">Count: {count}</p>\n      <div className=\"flex gap-2\">\n        <button \n          onClick={() => setCount(count + 1)}\n          className=\"px-4 py-2 bg-primary text-primary-foreground rounded\"\n        >\n          Increment\n        </button>\n        <button \n          onClick={() => setCount(count - 1)}\n          className=\"px-4 py-2 bg-secondary text-secondary-foreground rounded\"\n        >\n          Decrement\n        </button>\n      </div>\n    </div>\n  )\n}\n\nexport default Counter",
+    "language": "tsx",
+    "category": "React Hooks",
+    "hasPreview": true,
+    "functionName": "Counter",
+    "inputParameters": [],
+    "createdAt": 0,
+    "updatedAt": 0
+  },
+  {
+    "id": "seed-2",
+    "title": "Todo List Component",
+    "description": "Complete todo list with add, toggle, and delete",
+    "code": "import { useState } from 'react'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Card } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Trash2 } from '@phosphor-icons/react'\n\nfunction TodoList() {\n  const [todos, setTodos] = useState([\n    { id: 1, text: 'Learn React', completed: false },\n    { id: 2, text: 'Build a project', completed: false }\n  ])\n  const [input, setInput] = useState('')\n\n  const addTodo = () => {\n    if (input.trim()) {\n      setTodos([...todos, { id: Date.now(), text: input, completed: false }])\n      setInput('')\n    }\n  }\n\n  const toggleTodo = (id) => {\n    setTodos(todos.map(todo => \n      todo.id === id ? { ...todo, completed: !todo.completed } : todo\n    ))\n  }\n\n  const deleteTodo = (id) => {\n    setTodos(todos.filter(todo => todo.id !== id))\n  }\n\n  return (\n    <Card className=\"p-6 max-w-md mx-auto\">\n      <h2 className=\"text-2xl font-bold mb-4\">My Todos</h2>\n      <div className=\"flex gap-2 mb-4\">\n        <Input\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          onKeyPress={(e) => e.key === 'Enter' && addTodo()}\n          placeholder=\"Add a new todo...\"\n        />\n        <Button onClick={addTodo}>Add</Button>\n      </div>\n      <div className=\"space-y-2\">\n        {todos.map(todo => (\n          <div key={todo.id} className=\"flex items-center gap-2 p-2 hover:bg-muted rounded\">\n            <Checkbox\n              checked={todo.completed}\n              onCheckedChange={() => toggleTodo(todo.id)}\n            />\n            <span className={todo.completed ? 'line-through text-muted-foreground flex-1' : 'flex-1'}>\n              {todo.text}\n            </span>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => deleteTodo(todo.id)}\n            >\n              <Trash2 size={16} />\n            </Button>\n          </div>\n        ))}\n      </div>\n    </Card>\n  )\n}\n\nexport default TodoList",
+    "language": "tsx",
+    "category": "Components",
+    "hasPreview": true,
+    "functionName": "TodoList",
+    "inputParameters": [],
+    "createdAt": 0,
+    "updatedAt": 0
+  },
+  {
+    "id": "seed-3",
+    "title": "Fetch Data Hook",
+    "description": "Custom hook for API data fetching",
+    "code": "import { useState, useEffect } from 'react'\n\nfunction useFetch(url) {\n  const [data, setData] = useState(null)\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState(null)\n\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        setLoading(true)\n        const response = await fetch(url)\n        if (!response.ok) throw new Error('Network response was not ok')\n        const json = await response.json()\n        setData(json)\n        setError(null)\n      } catch (err) {\n        setError(err.message)\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    fetchData()\n  }, [url])\n\n  return { data, loading, error }\n}",
+    "language": "tsx",
+    "category": "React Hooks",
+    "hasPreview": false,
+    "createdAt": 0,
+    "updatedAt": 0
+  },
+  {
+    "id": "seed-4",
+    "title": "Animated Card",
+    "description": "Card with hover animation using Framer Motion",
+    "code": "import { motion } from 'framer-motion'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'\n\nfunction AnimatedCard({ title = 'Animated Card', description = 'Hover to see the effect' }) {\n  return (\n    <motion.div\n      whileHover={{ scale: 1.05, rotateZ: 2 }}\n      whileTap={{ scale: 0.95 }}\n      transition={{ type: 'spring', stiffness: 300, damping: 20 }}\n    >\n      <Card className=\"cursor-pointer\">\n        <CardHeader>\n          <CardTitle>{title}</CardTitle>\n          <CardDescription>{description}</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>This card has smooth animations on hover and tap!</p>\n        </CardContent>\n      </Card>\n    </motion.div>\n  )\n}\n\nexport default AnimatedCard",
+    "language": "tsx",
+    "category": "Components",
+    "hasPreview": true,
+    "functionName": "AnimatedCard",
+    "inputParameters": [],
+    "createdAt": 0,
+    "updatedAt": 0
+  },
+  {
+    "id": "seed-5",
+    "title": "Form Validation",
+    "description": "Form with react-hook-form validation",
+    "code": "import { useForm } from 'react-hook-form'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Card } from '@/components/ui/card'\n\nfunction ContactForm() {\n  const { register, handleSubmit, formState: { errors } } = useForm()\n\n  const onSubmit = (data) => {\n    console.log('Form data:', data)\n    alert('Form submitted successfully!')\n  }\n\n  return (\n    <Card className=\"p-6 max-w-md mx-auto\">\n      <h2 className=\"text-2xl font-bold mb-4\">Contact Form</h2>\n      <form onSubmit={handleSubmit(onSubmit)} className=\"space-y-4\">\n        <div>\n          <Label htmlFor=\"name\">Name</Label>\n          <Input\n            id=\"name\"\n            {...register('name', { required: 'Name is required' })}\n          />\n          {errors.name && (\n            <p className=\"text-destructive text-sm mt-1\">{errors.name.message}</p>\n          )}\n        </div>\n\n        <div>\n          <Label htmlFor=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            {...register('email', {\n              required: 'Email is required',\n              pattern: {\n                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\\\.[A-Z]{2,}$/i,\n                message: 'Invalid email address'\n              }\n            })}\n          />\n          {errors.email && (\n            <p className=\"text-destructive text-sm mt-1\">{errors.email.message}</p>\n          )}\n        </div>\n\n        <Button type=\"submit\" className=\"w-full\">Submit</Button>\n      </form>\n    </Card>\n  )\n}\n\nexport default ContactForm",
+    "language": "tsx",
+    "category": "Forms",
+    "hasPreview": true,
+    "functionName": "ContactForm",
+    "inputParameters": [],
+    "createdAt": 0,
+    "updatedAt": 0
+  }
+]
\ No newline at end of file
diff --git a/src/data/seed-templates.json b/src/data/seed-templates.json
index 0637a08..445e0d8 100644
--- a/src/data/seed-templates.json
+++ b/src/data/seed-templates.json
@@ -1 +1,35 @@
-[]
\ No newline at end of file
+[
+  {
+    "id": "template-1",
+    "title": "Basic React Component",
+    "description": "Simple functional component template",
+    "code": "function MyComponent() {\n  return (\n    <div className=\"p-4\">\n      <h2 className=\"text-xl font-bold\">Hello World</h2>\n      <p>This is a basic component.</p>\n    </div>\n  )\n}\n\nexport default MyComponent",
+    "language": "tsx",
+    "category": "Templates",
+    "hasPreview": true,
+    "functionName": "MyComponent",
+    "inputParameters": []
+  },
+  {
+    "id": "template-2",
+    "title": "Component with Props",
+    "description": "Component template with configurable props",
+    "code": "function Greeting({ name = 'World', message = 'Hello' }) {\n  return (\n    <div className=\"p-4\">\n      <h2 className=\"text-xl font-bold\">{message}, {name}!</h2>\n    </div>\n  )\n}\n\nexport default Greeting",
+    "language": "tsx",
+    "category": "Templates",
+    "hasPreview": true,
+    "functionName": "Greeting",
+    "inputParameters": []
+  },
+  {
+    "id": "template-3",
+    "title": "useState Hook Template",
+    "description": "Component with state management",
+    "code": "import { useState } from 'react'\nimport { Button } from '@/components/ui/button'\n\nfunction StatefulComponent() {\n  const [value, setValue] = useState(0)\n\n  return (\n    <div className=\"p-4 space-y-4\">\n      <p className=\"text-lg\">Value: {value}</p>\n      <Button onClick={() => setValue(value + 1)}>\n        Increment\n      </Button>\n    </div>\n  )\n}\n\nexport default StatefulComponent",
+    "language": "tsx",
+    "category": "Templates",
+    "hasPreview": true,
+    "functionName": "StatefulComponent",
+    "inputParameters": []
+  }
+]
\ No newline at end of file
diff --git a/src/lib/db-snippets.ts b/src/lib/db-snippets.ts
index c3707d7..a28d8a4 100644
--- a/src/lib/db-snippets.ts
+++ b/src/lib/db-snippets.ts
@@ -6,6 +6,8 @@ import type { Snippet, SnippetTemplate } from './types'
 import { initDB, saveDB, getFlaskAdapter } from './db-core'
 import { mapRowToObject, mapRowsToObjects } from './db-mapper'
 import { ensureDefaultNamespace } from './db-namespaces'
+import seedSnippetsData from '@/data/seed-snippets.json'
+import seedTemplatesData from '@/data/seed-templates.json'
 
 export async function getAllSnippets(): Promise<Snippet[]> {
   const adapter = getFlaskAdapter()