diff --git a/drizzle.config.ts b/drizzle.config.ts
index ec6d8ac..bf2ea94 100644
--- a/drizzle.config.ts
+++ b/drizzle.config.ts
@@ -1,7 +1,6 @@
 import { type Config } from "drizzle-kit";
 import "./src/server/db/envConfig"
 
-
 export default {
   schema: "./src/server/db/schema.ts",
   dialect: "postgresql",
diff --git a/src/app/CreateWine.tsx b/src/app/CreateWine.tsx
index ce4ae1e..ace1b09 100644
--- a/src/app/CreateWine.tsx
+++ b/src/app/CreateWine.tsx
@@ -1,26 +1,56 @@
 "use client";
+import { ChangeEvent, FormEvent, useEffect, useState } from "react";
+import { addWine } from "../server/actions/addWine";
+import { getProducers } from "../server/actions/allProducers";
 
-import { FormEvent } from "react";
-import { useFormState } from "react-dom";
-import { allProducers, insertWine } from "~/server/db";
+interface Producer {
+  id: string;
+  name: string;
+  createdAt: Date;
+  country: string;
+  region: string;
+  email: string;
+}
 
-const initialState = {
-  message: null,
-};
+export default function CreateWine() {
+  const [name, setName] = useState("");
+  const [producer, setProducer] = useState("");
+  const [allProducers, setAllProducers] = useState<Producer[]>([]);
 
-export default function CreateWineForm() {
-  const [state, formAction] = useFormState(insertWine, { message: "" });
+  useEffect(() => {
+    const fetchProducers = async () => {
+      try {
+        const producers = await getProducers();
+        setAllProducers(producers);
+      } catch (error) {
+        console.error("Failed to fetch producers:", error);
+      }
+    };
+    fetchProducers();
+  }, []);
+
+  const handleName = (event: ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+  const handleProducer = (event: ChangeEvent<HTMLSelectElement>) => {
+    setProducer(event.target.value);
+  };
+  const handleAdd = async (event: FormEvent) => {
+    event.preventDefault();
+    addWine(producer, name);
+    setName("");
+  };
   return (
-    <form action={}>
-      <select name="producer" id="producer">
-        {allProducers.map((producer) => (
-          <option key={producer.id} value={producer.id}>
-            {producer.name}
+    <div>
+      <input type="text" onChange={handleName} value={name} />
+      <select name="producer" onSelect={handleProducer}>
+        {allProducers.map((item) => (
+          <option key={item.id} value={item.id}>
+            {item.name}
           </option>
         ))}
       </select>
-      <input type="text" name="name" id="name" />
-      <input type="datetime-local" name="createdAt" id="createdAt" />
-    </form>
+      <button onClick={handleAdd}>Submit wine</button>
+    </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a8d7ed2..157fd6f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,11 @@
-import { FormEvent } from "react";
-import { allWines, insertWine, allProducers } from "~/server/db";
+import { getProducers } from "~/server/actions/allProducers";
+import { getWines } from "../server/actions/allWines";
 import CreateWine from "./CreateWine";
-
 export const dynamic = "force-dynamic";
 
+const allWines = await getWines();
+const allProducers = await getProducers();
+
 function WineCards() {
   return (
     <>
@@ -21,7 +23,7 @@ export default async function HomePage() {
     <main className="">
       <div className="container ">
         <h1>Yes hello</h1>
-        {/* <CreateWine  /> */}
+        <CreateWine />
         <WineCards />
       </div>
     </main>
diff --git a/src/server/actions/addWine.ts b/src/server/actions/addWine.ts
new file mode 100644
index 0000000..0fa1113
--- /dev/null
+++ b/src/server/actions/addWine.ts
@@ -0,0 +1,11 @@
+'use server'
+import { db } from '../db/index'
+import { wines } from '../db/schema'
+
+export const addWine = async (producer: string, name: string) => {
+    await db.insert(wines).values({
+      producer: producer,
+      name: name,
+    })
+    .returning();
+  };
\ No newline at end of file
diff --git a/src/server/actions/allProducers.ts b/src/server/actions/allProducers.ts
new file mode 100644
index 0000000..4838261
--- /dev/null
+++ b/src/server/actions/allProducers.ts
@@ -0,0 +1,7 @@
+'use server'
+import { db } from "../db/index";
+
+
+export async function getProducers(){
+    return db.query.producers.findMany();
+}
\ No newline at end of file
diff --git a/src/server/actions/allWines.ts b/src/server/actions/allWines.ts
new file mode 100644
index 0000000..45bb29c
--- /dev/null
+++ b/src/server/actions/allWines.ts
@@ -0,0 +1,7 @@
+'use server'
+import { db } from "../db/index";
+
+
+export async function getWines(){
+    return db.query.wines.findMany();
+}
\ No newline at end of file
diff --git a/src/server/db/index.ts b/src/server/db/index.ts
index 8302c71..108c0bc 100644
--- a/src/server/db/index.ts
+++ b/src/server/db/index.ts
@@ -4,25 +4,3 @@ import { sql } from '@vercel/postgres';
 import * as schema from './schema';
 
 export const db = drizzle(sql, { schema });
-
-export const allWines = await db.query.wines.findMany();
-
-type NewWine = {
-    name: string;
-    producer: string;
-  };
-  
-export type Wine = {
-    id: string;
-    name: string;
-    producer: string;
-    createdAt: Date;
-    updatedAt: Date | null;
-  };
-
-
-export const insertWine = async (wine: NewWine) => {
-    return db.insert(schema.wines).values(wine);
-}
-
-export const allProducers = await db.query.producers.findMany();
diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts
index 15ed081..7fac292 100644
--- a/src/server/db/schema.ts
+++ b/src/server/db/schema.ts
@@ -1,5 +1,3 @@
-import { drizzle } from 'drizzle-orm/vercel-postgres';
-import { sql } from "@vercel/postgres";
 import {
   pgTableCreator,
   text,