diff --git a/components/RouteCards.tsx b/components/RouteCards.tsx
index d59f3df..22ac198 100644
--- a/components/RouteCards.tsx
+++ b/components/RouteCards.tsx
@@ -10,8 +10,9 @@ import { deleteRoute } 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 { useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { Input } from './ui/input';
+import { get, set } from 'lodash';
 
 export default function RouteCards({ routes }: { routes: Route[] }) {
 
@@ -41,7 +42,7 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
 
     return (
         <>
-            <EditRouteDialog route={route} />
+            {route && <EditRouteDialog route={route} />}
             {
                 routes.map((route, index) => (
                     <div key={index} className='p-2'>
@@ -68,49 +69,42 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
     )
 }
 
-export function EditRouteDialog({ route }: { route?: Route }) {
+export function EditRouteDialog({ route }: { route: Route }) {
+    const [modifiedRoute, setRoute] = useState(route);
+    let validHosts: any[] = getHosts(route);
+    let validUpstreams: any[] = getRouteUpstreams(route).map((upstream) => upstream.dial);
+
     const form = useForm({
-        defaultValues: {
-            handler: route?.handle[0].handler,
-            upstreams: route?.handle[0].upstreams,
-            //hosts: route?.match[0].host,
+        values: {
+            handler: route.handle[0].routes[0].handle[0].handler,
+            upstreams: validUpstreams,
+            hosts: validHosts,
         }
     });
 
-    let test: RouteHandle = {
-        handle: [
-            {
-                handler: 'subroutes',
-                routes: [
-                    {
-                        handle: [
-                            {
-                                handler: 'reverse_proxy',
-                                upstreams: [
-                                    {
-                                        dial: 'localhost:8080'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            }
-        ],
+    const { fields: upstreams, append: appendUpstreams } = useFieldArray({
+        control: form.control,
+        name: "upstreams",
+    })
 
-        match: [
-            {
-                host: [
-                    'example.com'
-                ]
-            }
-        ]
+    const { fields: hosts, append: appendHosts } = useFieldArray({
+        control: form.control,
+        name: "hosts",
+    })
+    
+    let onSubmit = ((data: any) => {
+
+    })
+
+    console.log(getHosts(route))
+
+    let handleChange = (value: any, path: any) => {
+        let updatedRoute = set(modifiedRoute, path, value.target.value);
+        setRoute(updatedRoute);
+        console.log(value.target.name, value.target.value)
+        form.setValue(value.target.name, value.target.value)
     }
 
-    let onSubmit = ((data: any) => {
-        console.log('Original Route', JSON.stringify(route))
-        console.log(data)
-    })
 
     return (
         <Dialog open={route as Route != null}>
@@ -124,46 +118,47 @@ export function EditRouteDialog({ route }: { route?: Route }) {
                                 <FormItem>
                                     <FormLabel>Handler</FormLabel>
                                     <FormControl>
-                                        <Input {...field} value={route?.handle[0].handler} />
+                                        <Input {...field} onChange={(value) => handleChange(value, `modifiedRoute.handle[0].handler`)} />
                                     </FormControl>
                                 </FormItem>
                             )}
 
                         ></FormField>
 
-                        {route ? getRouteUpstreams(route)?.map((upstream, index) => (
+                        {upstreams.map((upstream, index) => (
                             <FormField
-                                key={index}
+                                key={upstream.id}
                                 control={form.control}
-                                name="upstreams"
+                                name={`upstreams.${index}`}
                                 render={({ field }) => (
                                     <FormItem>
                                         <FormLabel>Upstream {index + 1}</FormLabel>
                                         <FormControl>
-                                            <Input {...field} value={upstream.dial} />
+                                            <Input {...field} onChange={(value) => handleChange(value, `modifiedRoute.handle[0].upstreams`)} />
                                         </FormControl>
                                     </FormItem>
                                 )}
                             >
                             </FormField>
-                        )) : <></>}
+                        ))}
 
-                        {route ? getHosts(route)?.map((host, index) => (
+                        {hosts.map((host, index) => (
                             <FormField
-                                key={index}
+                                key={host.id}
                                 control={form.control}
-                                name="hosts"
+                                name={`hosts.${index}`}
                                 render={({ field }) => (
                                     <FormItem>
                                         <FormLabel>Host {index + 1}</FormLabel>
                                         <FormControl>
-                                            <Input {...field} defaultValue={host} />
+                                            <Input {...field} onChange={(value) => handleChange(value, `modifiedRoute.handle[0].hosts`)} />
                                         </FormControl>
                                     </FormItem>
                                 )}
                             >
                             </FormField>
-                        )) : <></>}
+                        ))}
+
                         <Button type="submit">Save</Button>
                     </form>
                 </Form>
diff --git a/lib/types.ts b/lib/types.ts
index a00510d..c4ff3c1 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -15,8 +15,8 @@ interface Match {
 
 interface Handle {
     handler: string;
-    upstreams?: Upstream[];
-    routes?: Route[];
+    upstreams: Upstream[];
+    routes: Route[];
 }
 
 interface Upstream {
diff --git a/package.json b/package.json
index 0a1450c..6e02d00 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,12 @@
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@types/lodash": "^4.14.201",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "lodash": "^4.17.21",
+    "lodash.get": "^4.4.2",
+    "lodash.set": "^4.3.2",
     "next": "14.0.2",
     "next-themes": "^0.2.1",
     "react": "^18",