diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 53e0718..181372f 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
 import { apiCall } from "../api";
+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";
 
 async function doShit(){
   apiCall("Firewall.GetForwardRules", {});
 }
 
-let name = $ref("");
-let comment = $ref("");
-let counter = $ref(false);
-let options = $ref([{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]);
+let fields = $ref([
+  {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 },
+]);
 
 </script>
 
@@ -17,18 +23,7 @@ let options = $ref([{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]);
     <PageHeader title="Dashboard">
       <button @click="doShit">Example Buttons</button>
     </PageHeader>
-    <form @submit="$event => $event.preventDefault()" class="cl-secondary">
-      <h3>Create Rule</h3>
-      <label for="name" v-text="'Name'"/>
-      <input name="name" v-model="name"/>
-      <label for="counter" v-text="'Counter'"/>
-      <input name="counter" type="checkbox" v-model="counter"/>
-      <label for="comment" v-text="'Comment'"/>
-      <textarea name="comment" v-model="comment"></textarea>
-      <label for="verdict" v-text="'Verdict'"/>
-      <pillbar :options="options" name="verdict" ></pillbar>
-      <button>Submit</button>
-    </form>
+    <NiceForm class="scroll cl-secondary" title="Testasdfdsfsdf" :fields="fields"/>
   </div>
 </template>