diff --git a/web/components.d.ts b/web/components.d.ts
index 79bb902..6b4427f 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -5,14 +5,14 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module "vue" {
+declare module 'vue' {
   export interface GlobalComponents {
-    CategoryContainer: typeof import("./src/components/CategoryContainer.vue")["default"];
-    Clipboard: typeof import("./src/components/Clipboard.vue")["default"];
-    HeaderBar: typeof import("./src/components/HeaderBar.vue")["default"];
-    ListViewElement: typeof import("./src/components/ListViewElement.vue")["default"];
-    LoginPage: typeof import("./src/components/loginPage.vue")["default"];
-    MainPage: typeof import("./src/components/MainPage.vue")["default"];
-    UsersDialog: typeof import("./src/components/NavBarIcons/UsersDialog.vue")["default"];
+    CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
+    Clipboard: typeof import('./src/components/Clipboard.vue')['default']
+    HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
+    ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
+    LoginPage: typeof import('./src/components/loginPage.vue')['default']
+    MainPage: typeof import('./src/components/MainPage.vue')['default']
+    UsersDialog: typeof import('./src/components/NavBarIcons/UsersDialog.vue')['default']
   }
 }
diff --git a/web/src/components/CategoryContainer.vue b/web/src/components/CategoryContainer.vue
index f458970..fc72a13 100644
--- a/web/src/components/CategoryContainer.vue
+++ b/web/src/components/CategoryContainer.vue
@@ -12,15 +12,6 @@
         notes="license.notes"
       />
     </li>
-    <!-- <ListViewElement
-      licenseName="Jetbrains Ultimate 2024.2.1"
-      key=""
-      startDate=""
-      endDate=""
-      amount=""
-      tags=""
-      notes=""
-    /> -->
   </div>
 </template>
 
diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index e4e3a2c..af3bacf 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -113,18 +113,7 @@
                         label="Start Date (optional)"
                         variant="outlined"
                         prepend-icon=""
-                        prepend-inner-icon="mdi-calendar-check"
-                        clearable
-                        v-model="addStartDate"
-                        hide-details
-                      ></v-date-input>
-                    </div>
-                    <div class="mb-6">
-                      <v-date-input
-                        label="Stop Date (optional)"
-                        variant="outlined"
-                        prepend-icon=""
-                        prepend-inner-icon="mdi-calendar-remove"
+                        prepend-inner-icon="mdi-calenadddar-remove"
                         clearable
                         v-model="addStopDate"
                         hide-details
diff --git a/web/src/components/ListViewElement.vue b/web/src/components/ListViewElement.vue
index 5376117..487eb9b 100644
--- a/web/src/components/ListViewElement.vue
+++ b/web/src/components/ListViewElement.vue
@@ -75,9 +75,119 @@
               <!--              -->
               <!-- EDIT SECTION -->
               <!--              -->
-              <v-btn class="mr-3" flat size="small">
+              <v-btn class="mr-3" @click="edit" flat size="small">
                 <Pencil />
               </v-btn>
+              <v-dialog v-model="edit" width="600" persistent>
+                <v-card max-width="600">
+                  <v-form @submit.prevent="submitEdit">
+                    <v-card-title>
+                      <span class="headline">Add License</span>
+                    </v-card-title>
+                    <v-card-subtitle>
+                      <span> Add an extra License to the database</span>
+                    </v-card-subtitle>
+                    <v-card-text>
+                      <div>
+                        <v-text-field
+                          label="License Name *"
+                          v-model="editLicenseName"
+                          variant="outlined"
+                          required
+                          clearable
+                          :rules="editNameRules"
+                          class="mb-3"
+                        ></v-text-field>
+                        <v-text-field
+                          label="License Key *"
+                          v-model="editLicenseKey"
+                          variant="outlined"
+                          required
+                          clearable
+                          :rules="editNameRules"
+                          class="mb-3"
+                        ></v-text-field>
+                        <v-autocomplete
+                          clearable
+                          label="Select Group *"
+                          :items="Data"
+                          variant="outlined"
+                          :rules="editNameRules"
+                          class="mb-1"
+                          v-model="editLicenseGroup"
+                        ></v-autocomplete>
+                        <!-- Divider maybe remove -->
+                        <v-divider
+                          class="border-opacity-50"
+                          :thickness="2"
+                        ></v-divider>
+                        <div>
+                          <div class="mb-3 mt-3">
+                            <v-date-input
+                              label="Start Date (optional)"
+                              variant="outlined"
+                              prepend-icon=""
+                              prepend-inner-icon="mdi-calendar-check"
+                              clearable
+                              v-model="editStartDate"
+                              hide-details
+                            ></v-date-input>
+                          </div>
+                          <div class="mb-6">
+                            <v-date-input
+                              label="Stop Date (optional)"
+                              variant="outlined"
+                              prepend-icon=""
+                              prepend-inner-icon="mdi-calendar-remove"
+                              clearable
+                              v-model="editStopDate"
+                              hide-details
+                            ></v-date-input>
+                          </div>
+                        </div>
+                        <v-number-input
+                          label="Amount (optional)"
+                          users
+                          variant="outlined"
+                          clearable
+                          :min="0"
+                          v-model="editAmount"
+                        >
+                        </v-number-input>
+                        <v-text-field
+                          label="Notes (optional)"
+                          v-model="editNotes"
+                          variant="outlined"
+                          clearable
+                        ></v-text-field>
+                        <span class="dialogNote">
+                          all fields marked with * are required
+                        </span>
+                      </div>
+                    </v-card-text>
+                    <v-card-actions>
+                      <v-row>
+                        <v-col cols="10" align="right" no-gutters>
+                          <v-btn
+                            class="ms-auto"
+                            text="Cancel"
+                            color="blue darken-1"
+                            @click="edit = false"
+                          ></v-btn>
+                        </v-col>
+                        <v-col>
+                          <v-btn
+                            class="ms-auto"
+                            text="Add"
+                            type="submit"
+                            color="blue darken-1"
+                          ></v-btn>
+                        </v-col>
+                      </v-row>
+                    </v-card-actions>
+                  </v-form>
+                </v-card>
+              </v-dialog>
               <!--                 -->
               <!--   DELETE BTN    -->
               <!--                 -->
@@ -102,9 +212,13 @@ import {
   Trash,
 } from "lucide-vue-next";
 import { ref } from "vue";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/vue-query";
+import { axiosInstance } from "@/client";
+import { SubmitEventPromise } from "vuetify";
+import { LicenseGroup, UpdateLicenseDto } from "@/types";
 
 const props = defineProps<{
-  id: number;
+  id: string;
   licenseName: string;
   licenseKey: string;
   startDate: Date | null;
@@ -116,6 +230,81 @@ const props = defineProps<{
 //  EDIT SECTION
 
 const edit = ref(false);
+const editLicenseName = ref("");
+const editLicenseGroup = ref();
+const editAmount = ref();
+const editLicenseKey = ref("");
+const editStartDate = ref<Date | null>();
+const editStopDate = ref<Date | null>();
+const editNotes = ref<string | undefined>("");
+
+//Give initial values to the fields
+editLicenseName.value = props.licenseName;
+editLicenseKey.value = props.licenseKey;
+editAmount.value = props.amount;
+editStartDate.value = props.startDate;
+editStopDate.value = props.endDate;
+editNotes.value = props.notes;
+
+const editNameRules = [
+  (value: string) => {
+    if (value) return true;
+
+    return "YOU MUST ENTER (A GROUP NAME)";
+  },
+];
+
+async function submitEdit(event: SubmitEventPromise) {
+  const result = await event;
+  if (result.valid) {
+    const editData = {
+      name: editLicenseName.value,
+      group_id: editLicenseGroup.value,
+      amount: editAmount.value,
+      key: editLicenseKey.value,
+      start: editStartDate.value ?? null,
+      end: editStopDate.value ?? null,
+      notes: editNotes.value,
+    };
+    console.log(editData);
+    editMutate(editData);
+  } else {
+    console.log("Invalid");
+  }
+}
+
+const queryClient = useQueryClient();
+
+const gyros = props.id;
+
+const { mutate: editMutate } = useMutation({
+  mutationFn: async (newEdit: UpdateLicenseDto) => {
+    await axiosInstance.put(`/licenses/${gyros}`, newEdit);
+  },
+  onError: (error) => {
+    console.log(error);
+  },
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ["licenses"] });
+    edit.value = false;
+  },
+});
+
+const { data } = useQuery({
+  queryKey: ["licenses"],
+  queryFn: async () => {
+    const res = await axiosInstance.get<LicenseGroup[]>("/licenses");
+    return res.data;
+  },
+  select: (data) => {
+    return data.map((group) => {
+      return {
+        title: group.name,
+        value: group.id,
+      };
+    });
+  },
+});
 </script>
 
 <style scoped>
diff --git a/web/src/types.ts b/web/src/types.ts
index 70897af..a0d05b0 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -23,3 +23,5 @@ export interface CreateLicenseDto {
 }
 
 export type CreateGroupDto = Omit<LicenseGroup, "id" | "licenses">;
+
+export type UpdateLicenseDto = Omit<License, "id">;