diff --git a/app/api/caddy/routes/[route]/route.ts b/app/api/caddy/routes/[route]/route.ts
new file mode 100644
index 0000000..1a70931
--- /dev/null
+++ b/app/api/caddy/routes/[route]/route.ts
@@ -0,0 +1,42 @@
+import { updateRoute } from "@/lib/serverActions";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request, {params}: {params: {route: number}}) {
+    const slug = params.route;
+    const res = await fetch(`http://192.168.1.69:2019/config/apps/http/servers/srv0/routes/${slug}`, { cache: 'no-store' });
+    let route: Route = await res.json();
+
+    if (!res.ok) 
+      throw new Error('Failed to fetch caddy config. Please check the network and try again.');
+  
+    return new NextResponse(JSON.stringify(route), {
+        status: 200,
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    });
+}
+
+export async function PATCH(request: Request, {params}: {params: {route: number}}) {
+    const slug = params.route;
+    let route: Route = await request.json();
+
+    const res = await fetch(`http://192.168.1.69:2019/config/apps/http/servers/srv0/routes/${slug}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        cache: 'no-cache',
+        body: JSON.stringify(route)
+      })
+
+    if (!res.ok) 
+      throw new Error('Failed to fetch caddy config. Please check the network and try again.');
+    
+    return new NextResponse(JSON.stringify({error: false}), {
+        status: 200,
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    });
+}
\ No newline at end of file
diff --git a/components/RouteCards.tsx b/components/RouteCards.tsx
index ffd8f8f..c6629b0 100644
--- a/components/RouteCards.tsx
+++ b/components/RouteCards.tsx
@@ -6,13 +6,14 @@ import { getHosts, getRouteUpstreams } from '@/lib/utils';
 import { toast } from './ui/use-toast';
 import React, { useState } from 'react';
 import useSWRMutation from 'swr/mutation';
-import { deleteRoute } from '@/lib/clientActions';
+import { deleteRoute, updateRoute } from '@/lib/clientActions';
 import { Dialog, DialogContent, DialogHeader } from './ui/dialog';
 import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog';
 import { Form, FormControl, FormField, FormItem, FormLabel } from './ui/form';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { Input } from './ui/input';
 import { get, set } from 'lodash';
+import { getRoutes } from '@/lib/serverActions';
 
 export default function RouteCards({ routes }: { routes: Route[] }) {
 
@@ -70,7 +71,26 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
 }
 
 export function EditRouteDialog({ route }: { route: Route }) {
+    let index = getHosts(route).indexOf(route.match[0].host[0]);
+
     const [modifiedRoute, setRoute] = useState(route);
+    const { trigger: pushUpdate } = useSWRMutation(`/api/caddy/routes/${index}`, updateRoute, {
+        onError: () => {
+            return toast({
+                title: "Error",
+                description: "There was an error updating the route",
+                variant: "destructive"
+            });
+        },
+        onSuccess: () => {
+            toast({
+                title: "Success",
+                description: "Route updated successfully!",
+                variant: "success"
+            });
+        }
+    });
+
     let validHosts: any[] = getHosts(route);
     let validUpstreams: any[] = getRouteUpstreams(route).map((upstream) => upstream.dial);
 
@@ -93,14 +113,12 @@ export function EditRouteDialog({ route }: { route: Route }) {
     })
     
     let onSubmit = ((data: any) => {
-        console.log(modifiedRoute)
+        pushUpdate(modifiedRoute);
     })
 
 
     let handleChange = (value: any, path: any) => {
-        console.log(path)
         let updatedRoute = set(modifiedRoute, path, value.target.value);
-        console.log(updatedRoute)
         setRoute(updatedRoute);
         form.setValue(value.target.name, value.target.value)
     }
@@ -118,7 +136,7 @@ export function EditRouteDialog({ route }: { route: Route }) {
                                 <FormItem>
                                     <FormLabel>Handler</FormLabel>
                                     <FormControl>
-                                        <Input {...field} onChange={(value) => handleChange(value, `modifiedRoute.handle[0].handler`)} />
+                                        <Input {...field} onChange={(value) => handleChange(value, `handle[0].handler`)} />
                                     </FormControl>
                                 </FormItem>
                             )}
@@ -127,14 +145,14 @@ export function EditRouteDialog({ route }: { route: Route }) {
 
                         {upstreams.map((upstream, index) => (
                             <FormField
-                                key={upstream.id}
+                                key={index}
                                 control={form.control}
                                 name={`upstreams.${index}`}
                                 render={({ field }) => (
                                     <FormItem>
                                         <FormLabel>Upstream {index + 1}</FormLabel>
                                         <FormControl>
-                                            <Input {...field} onChange={(value) => handleChange(value, `handle[0].routes[0].handle[0].upstreams[${index}]`)} />
+                                            <Input {...field} onChange={(value) => handleChange(value, `handle[0].routes[0].handle[0].upstreams[${index}].dial`)} />
                                         </FormControl>
                                     </FormItem>
                                 )}
@@ -143,7 +161,7 @@ export function EditRouteDialog({ route }: { route: Route }) {
 
                         {hosts.map((host, index) => (
                             <FormField
-                                key={host.id}
+                                key={index}
                                 control={form.control}
                                 name={`hosts.${index}`}
                                 render={({ field }) => (
diff --git a/lib/clientActions.ts b/lib/clientActions.ts
index 7cd39ef..a34074a 100644
--- a/lib/clientActions.ts
+++ b/lib/clientActions.ts
@@ -48,6 +48,17 @@ export async function useConfig() {
     }).then((res) => res.json());
   }
 
+  export function updateRoute(url: any, { arg }: { arg: Route }) {
+    return fetch(url, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      cache: 'no-cache',
+      body: JSON.stringify(arg)
+    }).then((res) => res.json());
+  }
+
   
   export default async function fetcher<JSON = any>(
     input: RequestInfo,
diff --git a/lib/serverActions.ts b/lib/serverActions.ts
index bbea70a..513df27 100644
--- a/lib/serverActions.ts
+++ b/lib/serverActions.ts
@@ -50,4 +50,15 @@
     });
 
     return await res.json();
+  }
+
+  export async function updateRoute(index: number, route: Route) {
+    return fetch(`http://192.168.1.69:2019/config/apps/http/servers/srv0/routes/${index}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      cache: 'no-cache',
+      body: JSON.stringify(route)
+    }).then((res) => res.json()).catch((err) => console.log(err));
   }
\ No newline at end of file