diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index 7a25461..2751807 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -76,8 +76,31 @@
                     :rules="licenseNameRules"
                     class="mb-3"
                   ></v-text-field>
+                  <v-text-field
+                    label="License Key *"
+                    v-model="addLicenseKey"
+                    variant="outlined"
+                    required
+                    clearable
+                    :rules="licenseKeyRules"
+                    class="mb-3"
+                  ></v-text-field>
+                  <v-autocomplete
+                    clearable
+                    label="Select Group *"
+                    :items="data"
+                    variant="outlined"
+                    :rules="selectGroupRules"
+                    class="mb-1"
+                    v-model="addLicenseGroup"
+                  ></v-autocomplete>
+                  <!-- Divider maybe remove -->
+                  <v-divider
+                    class="border-opacity-50"
+                    :thickness="2"
+                  ></v-divider>
                   <div>
-                    <div class="mb-3">
+                    <div class="mb-3 mt-3">
                       <v-date-input
                         label="Start Date (optional)"
                         variant="outlined"
@@ -85,9 +108,10 @@
                         prepend-inner-icon="mdi-calendar-check"
                         clearable
                         v-model="addStartDate"
+                        hide-details
                       ></v-date-input>
                     </div>
-                    <div class="mb-5">
+                    <div class="mb-6">
                       <v-date-input
                         label="Stop Date (optional)"
                         variant="outlined"
@@ -95,6 +119,7 @@
                         prepend-inner-icon="mdi-calendar-remove"
                         clearable
                         v-model="addStopDate"
+                        hide-details
                       ></v-date-input>
                     </div>
                   </div>
@@ -112,19 +137,6 @@
                     variant="outlined"
                     clearable
                   ></v-text-field>
-                  <v-select
-                    clearable
-                    label="Select Group *"
-                    :items="[
-                      'California',
-                      'Colorado',
-                      'Florida',
-                      'Georgia',
-                      'Texas',
-                      'Wyoming',
-                    ]"
-                    variant="outlined"
-                  ></v-select>
                   <span class="dialogNote">
                     all fields marked with * are required
                   </span>
@@ -210,6 +222,32 @@ import { store } from "@/store";
 import { SubmitEventPromise } from "vuetify";
 import { ref } from "vue";
 import { Plus, LogOut, Pencil, FolderPlus } from "lucide-vue-next";
+import { useQuery } from "@tanstack/vue-query";
+import axios from "axios";
+import { LicenseGroup } from "@/types";
+
+const { data } = useQuery({
+  queryKey: ["licenses"],
+  queryFn: async () => {
+    const res = await axios.get<LicenseGroup[]>(
+      import.meta.env.VITE_BACKEND_URL + "/licenses",
+      {
+        headers: {
+          Authorization: `Bearer ${store.token}`,
+        },
+      }
+    );
+    return res.data;
+  },
+  select: (data) => {
+    return data.map((group) => {
+      return {
+        title: group.name,
+        value: group.id,
+      };
+    });
+  },
+});
 
 function handlelogout() {
   store.setToken(null);
@@ -217,8 +255,21 @@ function handlelogout() {
 
 async function submit(event: SubmitEventPromise) {
   const result = await event;
-  console.log(result);
+  if (result.valid) {
+    console.log({
+      name: addLicenseName.value,
+      group_id: addLicenseGroup.value,
+      amount: addAmount.value,
+      key: addLicenseKey.value,
+      start: addStartDate.value,
+      stop: addStopDate.value,
+      notes: addNotes.value,
+    });
+  } else {
+    console.log("Invalid");
+  }
 }
+
 //
 // GROUP SECTION
 //
@@ -226,6 +277,7 @@ async function submit(event: SubmitEventPromise) {
 const group = ref(false); // Dialog for Group
 const groupLicenseName = ref<string>("");
 
+// Rules for Group Dialog
 const licenseGroupRules = [
   (value: string) => {
     if (value) return true;
@@ -239,6 +291,10 @@ const licenseGroupRules = [
 const add = ref(false);
 // References for Add License Dialog
 const addLicenseName = ref<string>("");
+const addLicenseKey = ref<string>("");
+const addLicenseGroup = ref<string>();
+
+// Rules for Add License Dialog
 const licenseNameRules = [
   (value: string) => {
     if (value) return true;
@@ -246,6 +302,22 @@ const licenseNameRules = [
     return "YOU MUST ENTER (A LICENSE NAME)";
   },
 ];
+const selectGroupRules = [
+  (value: string) => {
+    if (value) return true;
+
+    return "YOU MUST SELECT (A LICENSE GROUP)";
+  },
+];
+
+const licenseKeyRules = [
+  (value: string) => {
+    if (value) return true;
+
+    return "YOU MUST ENTER (A LICENSE KEY)";
+  },
+];
+// Optional Fields
 const addAmount = ref<number | undefined>();
 const addNotes = ref<string | undefined>("");
 
diff --git a/web/src/components/MainPage.vue b/web/src/components/MainPage.vue
index dce2feb..ac102b8 100644
--- a/web/src/components/MainPage.vue
+++ b/web/src/components/MainPage.vue
@@ -6,7 +6,10 @@
       <div v-else-if="isError">Error: {{ error?.message }}</div>
       <ul v-else-if="data">
         <li v-for="group in data" :key="group.id">
-          <CategoryContainer :licenseGroupName="group.name" :licenses="group.licenses" />
+          <CategoryContainer
+            :licenseGroupName="group.name"
+            :licenses="group.licenses"
+          />
         </li>
       </ul>
     </div>
@@ -19,37 +22,27 @@ import CategoryContainer from "./CategoryContainer.vue";
 import { useQuery } from "@tanstack/vue-query";
 import axios from "axios";
 import { store } from "@/store";
+import { LicenseGroup } from "@/types";
 
-interface LicenseGroup {
-  id: string,
-  name: string,
-  licenses: License[]
-}
-
-interface License {
-  name: string;
-  id: string;
-  start?: Date,
-  end?: Date,
-  key: string,
-  amount?: number,
-}
-
-const {isPending, isError, data, error} = useQuery({
+const { isPending, isError, data, error } = useQuery({
   queryKey: ["licenses"],
   queryFn: async () => {
-    const res = await axios.get<LicenseGroup[]>(import.meta.env.VITE_BACKEND_URL + "/licenses", {
-      headers: {
-        Authorization: `Bearer ${store.token}`
+    const res = await axios.get<LicenseGroup[]>(
+      import.meta.env.VITE_BACKEND_URL + "/licenses",
+      {
+        headers: {
+          Authorization: `Bearer ${store.token}`,
+        },
       }
-    })
-    return res.data
-  }
-})
+    );
+    return res.data;
+  },
+});
 </script>
 
 <style scoped>
-li, ul {
+li,
+ul {
   list-style-type: none;
 }
 </style>
diff --git a/web/src/types.ts b/web/src/types.ts
new file mode 100644
index 0000000..2454aaf
--- /dev/null
+++ b/web/src/types.ts
@@ -0,0 +1,14 @@
+export interface LicenseGroup {
+  id: string;
+  name: string;
+  licenses: License[];
+}
+
+export interface License {
+  name: string;
+  id: string;
+  start?: Date;
+  end?: Date;
+  key: string;
+  amount?: number;
+}