diff --git a/app/page.tsx b/app/page.tsx
index e63bab1..f1568e0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -13,7 +13,7 @@ import { RouteDialog } from '@/components/RouteDialog';
 
 export default function Home() {
 
-  const [routeDialog, setRouteDialog] = useState(false);
+  const [route, setRoute] = useState<Route>();
   const { data: routes, error, isLoading } = useRoutes();
   let routesMap: Route[] = routes as Route[];
 
@@ -22,7 +22,7 @@ export default function Home() {
 
   return (
     <main>
-      {routeDialog && <RouteDialog route={routes as Route} />}
+      {route && <RouteDialog route={route} routeMap={routesMap} />}
       <div className='flex items-center justify-center p-6'>
         <Card className='flex'>
           <CardHeader>
@@ -35,7 +35,7 @@ export default function Home() {
             </div>
           </CardContent>
           <CardFooter>
-            <Button onClick={() => setRouteDialog(!routeDialog)} className='translate-y-2.5'>Create</Button>
+            <Button onClick={() => setRoute(route)} className='translate-y-2.5'>Create</Button>
           </CardFooter>
         </Card>
       </div>
diff --git a/components/RouteCards.tsx b/components/RouteCards.tsx
index f18d4bf..c15ee45 100644
--- a/components/RouteCards.tsx
+++ b/components/RouteCards.tsx
@@ -32,12 +32,13 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
 
 
     let editRoute = (route: Route) => {
+        console.log(routes)
         setRoute(route);
     }
 
     return (
         <>
-            {route && <RouteDialog route={route} />}
+            {route && <RouteDialog route={route} routesMap={routes} />}
             {
                 routes.map((route, index) => (
                     <div key={index} className='p-2'>
diff --git a/components/RouteDialog.tsx b/components/RouteDialog.tsx
index 25e666e..1543dbe 100644
--- a/components/RouteDialog.tsx
+++ b/components/RouteDialog.tsx
@@ -4,14 +4,14 @@ import { useState } from "react";
 import useSWRMutation from "swr/mutation";
 import { toast } from "./ui/use-toast";
 import { useFieldArray, useForm } from "react-hook-form";
-import { set } from "lodash";
+import { get, set } from "lodash";
 import { Dialog, DialogContent } from "./ui/dialog";
 import { Form, FormControl, FormField, FormItem, FormLabel } from "./ui/form";
 import { Input } from "./ui/input";
 import { Button } from "./ui/button";
 
-export function RouteDialog({ route }: { route: Route }) {
-    let index = getHosts(route).indexOf(route.match[0].host[0]);
+export function RouteDialog({ route, routesMap }: { route: Route, routesMap: Route[] }) {
+    let index = routesMap.indexOf(route);
 
     const [modifiedRoute, setRoute] = useState(route);
     const { trigger: pushUpdate } = useSWRMutation(`/api/caddy/routes/${index}`, updateRoute, {
@@ -36,9 +36,9 @@ export function RouteDialog({ route }: { route: Route }) {
 
     const form = useForm({
         values: {
-            handler: route.handle[0].routes[0].handle[0].handler,
-            upstreams: validUpstreams,
-            hosts: validHosts,
+            handler: route.handle[0].routes[0].handle[0].handler ?? "",
+            upstreams: validUpstreams ?? [],
+            hosts: validHosts ?? [],
         }
     });
 
@@ -53,7 +53,13 @@ export function RouteDialog({ route }: { route: Route }) {
     })
 
     let onSubmit = (() => {
-        pushUpdate(modifiedRoute);
+        let update = {
+            route: modifiedRoute,
+            index: index,
+            type: index == -1 ? 'PUT' : 'PATCH'
+        }
+        if (index == -1) update.index = routesMap.length + 1;
+        pushUpdate(update);
     })
 
 
@@ -115,8 +121,8 @@ export function RouteDialog({ route }: { route: Route }) {
                             />
                         ))}
                         <Button type="submit">Save</Button>
-                        <Button type='button' onClick={() => {appendUpstreams('')}}>Add Host</Button>
-                        <Button type='button' onClick={() => {appendHosts('')}}>Add Upstream</Button>
+                        <Button type='button' onClick={() => { appendUpstreams('') }}>Add Host</Button>
+                        <Button type='button' onClick={() => { appendHosts('') }}>Add Upstream</Button>
                     </form>
                 </Form>
             </DialogContent>
diff --git a/lib/clientActions.ts b/lib/clientActions.ts
index a34074a..3c555b3 100644
--- a/lib/clientActions.ts
+++ b/lib/clientActions.ts
@@ -48,15 +48,16 @@ export async function useConfig() {
     }).then((res) => res.json());
   }
 
-  export function updateRoute(url: any, { arg }: { arg: Route }) {
+  export function updateRoute(url: any, { arg }: { arg: { route: Route, index: number, type: string } }) {
+    console.log(arg.index)
     return fetch(url, {
-      method: 'PATCH',
+      method: arg.type,
       headers: {
         'Content-Type': 'application/json'
       },
       cache: 'no-cache',
-      body: JSON.stringify(arg)
-    }).then((res) => res.json());
+      body: JSON.stringify(arg.route)
+    }).then((res) => res.json()).catch((err) => console.log(err));
   }
 
   
diff --git a/lib/types.ts b/lib/types.ts
index 8d33018..c4ff3c1 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -16,7 +16,7 @@ interface Match {
 interface Handle {
     handler: string;
     upstreams: Upstream[];
-    routes?: Route[];
+    routes: Route[];
 }
 
 interface Upstream {