diff --git a/client/src/pages/[entity]/[id].vue b/client/src/pages/[entity]/[id].vue
deleted file mode 100644
index 9c7614b..0000000
--- a/client/src/pages/[entity]/[id].vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const props = $defineProps<{entity: string, id: string}>();
-const { entity, id } = $(props);
-
-const pageTypes: { [key: string]: any } = {
-  "rules": { title: "Rules" },
-  "addresses": { title: "Addresses"},
-};
-</script>
-<template>
-  <div>
-    <PageHeader :title="pageTypes[entity].title"/>
-    {{ entity }} {{ id }}
-  </div>
-</template>
diff --git a/client/src/pages/[entity]/index.vue b/client/src/pages/[entity]/index.vue
deleted file mode 100644
index ba8111e..0000000
--- a/client/src/pages/[entity]/index.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup lang="ts">
-const props = $defineProps<{entity: string}>();
-const { entity } = $(props);
-
-const pageTypes: { [key: string]: any } = {
-  "rules": { title: "Rules" },
-  "addresses": { title: "Addresses"},
-};
-
-let searchTerm = $ref("");
-</script>
-<template>
-  <div>
-    <PageHeader :title="pageTypes[entity].title">
-      <input class="search-bar" placeholder="Search..." v-model="searchTerm"/>
-      <button>
-        <i-material-symbols-add/>
-      </button>
-    </PageHeader>
-    <NiceTable :columns="{fname: 'First Name', lname: 'Last Name'}" :sort-self="true" :data="[
-      {
-        fname: 'Haynes',
-        lname: 'Chavez'
-      }, {
-        fname: 'Brennan',
-        lname: 'Bradley'
-      }, {
-        fname: 'Blanchard',
-        lname: 'Thornton'
-      }, {
-        fname: 'Benjamin',
-        lname: 'Nash'
-      }, {
-        fname: 'Jan',
-        lname: 'Bradford'
-      }, {
-        fname: 'Zelma',
-        lname: 'Spears'
-      }, {
-        fname: 'Freeman',
-        lname: 'Page'
-      }, {
-        fname: 'Wilson',
-        lname: 'Carlson'
-      }, {
-        fname: 'Lewis',
-        lname: 'Fuentes'
-      }, {
-        fname: 'Vega',
-        lname: 'Villarreal'
-      }, {
-        fname: 'Carolyn',
-        lname: 'Cardenas'
-      }, {
-        fname: 'Angie',
-        lname: 'Adams'
-      }, {
-        fname: 'Richards',
-        lname: 'Leon'
-      }, {
-        fname: 'Velma',
-        lname: 'Fields'
-      }, {
-        fname: 'Witt',
-        lname: 'Lowe'
-      }, {
-        fname: 'Waters',
-        lname: 'Leblanc'
-      }, {
-        fname: 'Henry',
-        lname: 'Lloyd'
-      }, {
-        fname: 'Boone',
-        lname: 'Greer'
-      }, {
-        fname: 'Willis',
-        lname: 'Stark'
-      }, {
-        fname: 'Dickson',
-        lname: 'Spencer'
-      }
-    ].filter(x => (`${x.fname} ${x.lname}`).toLowerCase().includes(searchTerm.toLowerCase()))"/>
-  </div>
-</template>
-
-<style scoped>
-.page-content {
-  overflow-y: auto;
-}
-</style>
\ No newline at end of file
diff --git a/client/src/pages/edit/[subsystem]/[entity]/[id].vue b/client/src/pages/edit/[subsystem]/[entity]/[id].vue
new file mode 100644
index 0000000..cdae9c5
--- /dev/null
+++ b/client/src/pages/edit/[subsystem]/[entity]/[id].vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import PillBar from "../../../../components/inputs/PillBar.vue";
+import TextBox from "../../../../components/inputs/TextBox.vue";
+import MultilineTextBox from "../../../../components/inputs/MultilineTextBox.vue";
+import CheckBox from "../../../../components/inputs/CheckBox.vue";
+
+const props = $defineProps<{subsystem: string, entity: string, id: string}>();
+const { subsystem, entity, id } = $(props);
+
+const editTypes: { [key: string]: {[key: string]: any} } = {
+  "firewall": {
+    "forwardrules": {
+      title: "Forward Rule",
+      fields: [
+        {key: "name", label: "Name", component: () => TextBox },
+        {key: "verdict", label: "Verdict", component: () => PillBar, props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
+        {key: "counter", label: "Counter", component: () => CheckBox },
+        {key: "comment", label: "Comment", component: () => MultilineTextBox },
+      ],
+    }
+  },
+  "network": {
+    "interfaces": {
+      title: "Interfaces",
+      fields: [
+        {key: "name", label: "Name", component: () => TextBox },
+        {key: "comment", label: "Comment", component: () => MultilineTextBox },
+      ],
+    }
+  },
+};
+
+async function update() {
+  
+}
+
+</script>
+<template>
+  <div v-if="editTypes[subsystem][entity]">
+    <PageHeader :title="'Edit ' + editTypes[subsystem][entity].title">
+      <button @click="update">Update</button>
+      <button @click="$router.go(-1)">Discard</button>
+    </PageHeader>
+    {{ subsystem }} {{ entity }} {{ id }}
+    <NiceForm class="scroll cl-secondary" title="Test" :fields="editTypes[subsystem][entity].fields"/>
+  </div>
+  <div v-else>
+    No edit for this Entity
+  </div>
+</template>
diff --git a/client/src/pages/edit/[subsystem]/[entity]/index.vue b/client/src/pages/edit/[subsystem]/[entity]/index.vue
new file mode 100644
index 0000000..7655028
--- /dev/null
+++ b/client/src/pages/edit/[subsystem]/[entity]/index.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = $defineProps<{entity: string}>();
+const { entity } = $(props);
+
+async function create() {
+  
+}
+
+</script>
+<template>
+  <div>
+    <PageHeader title="Create TODO">
+      <button @click="create">Create</button>
+      <button @click="$router.go(-1)">Discard</button>
+    </PageHeader>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file