diff --git a/client/src/main.ts b/client/src/main.ts
index 362bd1f..2aaaf05 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -5,6 +5,13 @@ import './global-styles/mlfe.css';
 import './global-styles/transitions.css';
 import 'vue-toast-notification/dist/theme-default.css';
 
+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";
+
+import { Form, Field, ErrorMessage  } from 'vee-validate';
+
 import App from './App.vue';
 import { createHead } from '@vueuse/head';
 import { createRouter, createWebHistory } from 'vue-router';
@@ -22,4 +29,13 @@ app.use(router);
 app.use(head);
 app.use(ToastPlugin);
 
+// Global Components
+app.component('PillBar', PillBar)
+app.component('TextBox', TextBox)
+app.component('MultilineTextBox', MultilineTextBox)
+app.component('CheckBox', CheckBox)
+app.component('ValidationForm', Form)
+app.component('Field', Field)
+app.component('ErrorMessage', ErrorMessage)
+
 app.mount('#app');
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 181372f..2c2b211 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -4,6 +4,7 @@ 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";
+import { Form as ValidationForm, Field, ErrorMessage  } from 'vee-validate';
 
 async function doShit(){
   apiCall("Firewall.GetForwardRules", {});
@@ -23,10 +24,26 @@ let fields = $ref([
     <PageHeader title="Dashboard">
       <button @click="doShit">Example Buttons</button>
     </PageHeader>
-    <NiceForm class="scroll cl-secondary" title="Testasdfdsfsdf" :fields="fields"/>
+    <ValidationForm class="form">
+      <Field name="email" as="TextBox" />
+      <ErrorMessage name="email" />
+      <Field name="email" as="MultilineTextBox" />
+      <ErrorMessage name="email" />
+    </ValidationForm>
   </div>
 </template>
 
 <style scoped>
-
+.form {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  padding: 0.5rem;
+  gap: 0.5rem;
+}
+.form > :is(button, .button, h2) {
+  grid-column: 1 / 3;
+}
+.form > :is(label) {
+  grid-column: 1;
+}
 </style>
\ No newline at end of file