diff --git a/README.md b/README.md
index 134d55b..59a8425 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 ## Example .env
 ``` 
+# If not using docker, use 0.0.0.0:8000
+DB_PORT=surrealdb:8000
 DB_USER=root
 DB_PASSWORD=root
 ```
diff --git a/package-lock.json b/package-lock.json
index d9ef68f..603b869 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@tanstack/react-table": "^8.12.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "dotenv": "^16.4.4",
         "next": "14.1.0",
         "next-themes": "^0.2.1",
         "react": "^18",
@@ -27,6 +28,7 @@
         "swr": "^2.2.4",
         "tailwind-merge": "^2.2.1",
         "tailwindcss-animate": "^1.0.7",
+        "ws": "^8.16.0",
         "zod": "^3.22.4"
       },
       "devDependencies": {
@@ -3164,6 +3166,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.4",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.4.tgz",
+      "integrity": "sha512-XvPXc8XAQThSjAbY6cQ/9PcBXmFoWuw1sQ3b8HqUCR6ziGXjkTi//kB9SWa2UwqlgdAIuRqAa/9hVljzPehbYg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -10932,26 +10945,6 @@
         "zod": "^3.22.4"
       }
     },
-    "node_modules/surrealdb.js/node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/swr": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz",
@@ -11371,7 +11364,24 @@
       "dev": true
     },
     "node_modules/ws": {
-      "peer": true
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
     },
     "node_modules/zod": {
       "version": "3.22.4",
diff --git a/package.json b/package.json
index 04455fa..cdcf632 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@tanstack/react-table": "^8.12.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "dotenv": "^16.4.4",
     "next": "14.1.0",
     "next-themes": "^0.2.1",
     "react": "^18",
@@ -28,6 +29,7 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "ws": "^8.16.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
diff --git a/src/app/create/db.tsx b/src/app/create/db.tsx
new file mode 100644
index 0000000..60574cb
--- /dev/null
+++ b/src/app/create/db.tsx
@@ -0,0 +1,19 @@
+"use server";
+import { z } from "zod";
+import { formSchema } from "./page";
+
+export async function querydb(values: z.infer<typeof formSchema>) {
+	// let db = await initConnection();
+	// let url = await db.query(`
+	// create url:[rand::string(8)] CONTENT {
+	// 		long_url: string::replace($long_url, "http://", "https://"),
+	// 		clicks: 0,
+	// 		date_added: time::now(),
+	// 		date_accessed: <future> { time::now() }
+	// } return id[0];
+	// `, { long_url: values.url });
+	let url = "test";
+
+	console.log(values.url, url)
+	return url;
+}
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index 294e437..912e6c2 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -16,18 +16,23 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useFormState } from "react-dom";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { querydb } from "./db";
 
-const formSchema = z.object({
+export const formSchema = z.object({
   url: z.string().min(4,
     { message: "The URL must be at least 4 characters long" }
   ).max(100
     , { message: "The URL must be at most 100 characters long" }),
-})
+});
+const initialState = {
+  message: null,
+}
 
 export default function Home() {
-
+  const [state, formAction] = useFormState(querydb, initialState);
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -35,10 +40,6 @@ export default function Home() {
     },
   })
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values)
-  }
-
   return (
     <div className="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-1 xl:grid-cols-1">
       <Card>
@@ -47,15 +48,15 @@ export default function Home() {
         </CardHeader>
         <CardContent>
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <form action={form.handleSubmit(querydb)} className="space-y-8">
               <FormField
                 control={form.control}
                 name="url"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Enter url</FormLabel>
+                    <FormLabel>Enter a url</FormLabel>
                     <FormControl>
-                      <Input placeholder="shadcn" {...field} />
+                      <Input placeholder="nexveridian.com" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -64,6 +65,7 @@ export default function Home() {
               <Button type="submit">Submit</Button>
             </form>
           </Form>
+
         </CardContent>
       </Card>
     </div >
diff --git a/src/app/page.tsx b/src/app/page.tsx
index cd4d4d0..a65aee8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import {
   Card,
   CardHeader,
diff --git a/src/components/dark-mode-toggle.tsx b/src/components/dark-mode-toggle.tsx
index b55fe3f..a3aab22 100644
--- a/src/components/dark-mode-toggle.tsx
+++ b/src/components/dark-mode-toggle.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";;
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 
diff --git a/src/components/db-utils.tsx b/src/components/db-utils.tsx
new file mode 100644
index 0000000..b7a25be
--- /dev/null
+++ b/src/components/db-utils.tsx
@@ -0,0 +1,23 @@
+import { Surreal } from 'surrealdb.js';
+require('dotenv');
+
+const db = new Surreal();
+
+export async function initConnection(): Promise<Surreal> {
+	try {
+		db.connect(process.env.DB_PORT + '/rpc', {
+			namespace: 'url',
+			database: 'url',
+
+			auth: {
+				username: process.env.DB_USER,
+				password: process.env.DB_PASSWORD,
+				scope: '',
+			},
+		});
+	} catch (e) {
+		console.error('ERROR', e);
+	}
+
+	return db;
+}
diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx
index ecf556a..6faac28 100644
--- a/src/components/theme-provider.tsx
+++ b/src/components/theme-provider.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";;
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { type ThemeProviderProps } from "next-themes/dist/types";