diff --git a/webui/src/components/Appliance/Appliances.vue b/webui/src/components/Appliance/Appliances.vue
index 6ca6792..720b55c 100644
--- a/webui/src/components/Appliance/Appliances.vue
+++ b/webui/src/components/Appliance/Appliances.vue
@@ -45,18 +45,33 @@
           <v-row justify="space-between" align="center">
             <v-col> {{ appliance.id }} </v-col>
             <v-col>
-              <v-btn icon variant="text">
-                <v-icon
-                  size="x-small"
-                  color="warning"
-                  @click="deleteApplianceWindowButton"
-                  id="deleteApplianceWindow"
-                  >mdi-close</v-icon
-                >
-                <v-tooltip activator="parent" location="end"
-                  >Click here to delete this memory appliance</v-tooltip
-                >
-              </v-btn>
+              <v-menu>
+                <template v-slot:activator="{ props }">
+                  <v-btn
+                    icon="mdi-dots-vertical"
+                    variant="text"
+                    v-bind="props"
+                    @click.stop="selectAppliance(appliance.id)"
+                  ></v-btn>
+                </template>
+                <v-list>
+                  <v-list-item
+                    v-for="(item, i) in applianceDropItems"
+                    :key="i"
+                    :value="item"
+                    :id="item.id"
+                    @click="item.function"
+                  >
+                    <template v-slot:prepend>
+                      <v-icon
+                        :icon="item.icon"
+                        :color="item.iconColor"
+                      ></v-icon>
+                    </template>
+                    <v-list-item-title>{{ item.text }}</v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
             </v-col>
           </v-row>
         </v-tab>
@@ -592,6 +607,150 @@
       </v-row>
     </v-dialog>
 
+    <!-- The dialog for renaming an appliance -->
+    <v-dialog v-model="dialogRenameAppliance" max-width="600px">
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Rename Appliance</span>
+        </v-card-title>
+        <v-divider></v-divider>
+        <v-card-text>
+          <v-container>
+            <v-row class="justify-center">
+              <v-col>
+                <div style="position: relative; width: 100%">
+                  <v-text-field
+                    v-model="selectedApplianceId"
+                    label="Current Appliance Name"
+                    :style="{ width: '100%' }"
+                    id="currentApplianceId"
+                    readonly
+                  ></v-text-field>
+                  <v-text-field
+                    v-model="renameApplianceCredentials.customId"
+                    label="New Appliance Name"
+                    :style="{ width: '100%' }"
+                    id="renameApplianceId"
+                    :rules="[rules.required]"
+                  ></v-text-field>
+                </div>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="#6ebe4a"
+            variant="text"
+            id="cancelAddRenameAppliance"
+            @click="dialogRenameAppliance = false"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            color="#6ebe4a"
+            variant="text"
+            id="confirmRenameNewAppliance"
+            @click="
+              renameApplianceConfirm(
+                selectedApplianceId,
+                renameApplianceCredentials.customId
+              )
+            "
+          >
+            Rename
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="dialogRenameApplianceSuccess" max-width="600px">
+      <v-sheet
+        elevation="12"
+        max-width="600"
+        rounded="lg"
+        width="100%"
+        class="pa-4 text-center mx-auto"
+      >
+        <v-icon
+          class="mb-5"
+          color="success"
+          icon="mdi-check-circle"
+          size="112"
+        ></v-icon>
+        <h2 class="text-h5 mb-6">Rename an appliance succeeded!</h2>
+        <p class="mb-4 text-medium-emphasis text-body-2">
+          New Appliance Id:
+          <br />{{ renamedApplianceId }}
+        </p>
+        <v-divider class="mb-4"></v-divider>
+        <div class="text-end">
+          <v-btn
+            class="text-none"
+            color="success"
+            rounded
+            variant="flat"
+            width="90"
+            id="renameApplianceSuccess"
+            @click="dialogRenameApplianceSuccess = false"
+          >
+            Done
+          </v-btn>
+        </div>
+      </v-sheet>
+    </v-dialog>
+
+    <v-dialog v-model="dialogRenameApplianceFailure" max-width="600px">
+      <v-sheet
+        elevation="12"
+        max-width="600"
+        rounded="lg"
+        width="100%"
+        class="pa-4 text-center mx-auto"
+      >
+        <v-icon
+          class="mb-5"
+          color="error"
+          icon="mdi-alert-circle"
+          size="112"
+        ></v-icon>
+        <h2 class="text-h5 mb-6">Rename an appliance failed!</h2>
+        <p class="mb-4 text-medium-emphasis text-body-2">
+          {{ renameApplianceError }}
+        </p>
+        <v-divider class="mb-4"></v-divider>
+        <div class="text-end">
+          <v-btn
+            class="text-none"
+            color="error"
+            rounded
+            variant="flat"
+            width="90"
+            id="renameApplianceFailure"
+            @click="dialogRenameApplianceFailure = false"
+          >
+            Done
+          </v-btn>
+        </div>
+      </v-sheet>
+    </v-dialog>
+
+    <v-dialog v-model="dialogRenameApplianceWait">
+      <v-row align-content="center" class="fill-height" justify="center">
+        <v-col cols="6">
+          <v-progress-linear color="#6ebe4a" height="50" indeterminate rounded>
+            <template v-slot:default>
+              <div class="text-center">
+                {{ renameApplianceProgressText }}
+              </div>
+            </template>
+          </v-progress-linear>
+        </v-col>
+      </v-row>
+    </v-dialog>
+
     <!-- The dialog for adding a new blade -->
     <v-dialog
       v-model="dialogNewBlade"
@@ -1065,6 +1224,7 @@ export default {
       addBladeProgressText: "Adding blade, please wait...",
       deleteBladeProgressText: "Deleting blade, please wait...",
       resyncBladeProgressText: "Resynchronizing the blade, please wait...",
+      renameApplianceProgressText: "Renaming appliance, please wait...",
 
       // The rules for the input fields when adding a new appliance/blade
       rules: {
@@ -1102,6 +1262,33 @@ export default {
       dialogDeleteApplianceFailure: false,
       dialogDeleteApplianceWait: false,
 
+      renameApplianceCredentials: {
+        customId: "",
+      },
+      renamedApplianceId: "", // Be used on success popup
+      dialogRenameAppliance: false,
+      renameApplianceError: null as unknown,
+      dialogRenameApplianceSuccess: false,
+      dialogRenameApplianceFailure: false,
+      dialogRenameApplianceWait: false,
+
+      applianceDropItems: [
+        {
+          text: "Delete",
+          icon: "mdi-delete",
+          function: this.deleteApplianceWindowButton,
+          id: "deleteApplianceWindow",
+          iconColor: "warning",
+        },
+        {
+          text: "Rename",
+          icon: "mdi-rename-box",
+          function: this.renameAppliance,
+          id: "renameApplianceWindow",
+          iconColor: "#6ebe4a",
+        },
+      ],
+
       newBladeCredentials: {
         username: "root",
         password: "0penBmc",
@@ -1221,6 +1408,46 @@ export default {
       }
     },
 
+    renameAppliance() {
+      this.dialogRenameAppliance = true;
+    },
+
+    /* Triggle the API appliancesUpdateById in appliance store to rename an appliance */
+    async renameApplianceConfirm(applianceId: string, newApplianceId: string) {
+      // Make the rename appliance popup disappear and waiting popup appear
+      this.dialogRenameAppliance = false;
+      this.dialogRenameApplianceWait = true;
+
+      const applianceStore = useApplianceStore();
+      const newAppliance = await applianceStore.renameAppliance(
+        applianceId,
+        newApplianceId
+      );
+
+      this.renameApplianceError = applianceStore.renameApplianceError as string;
+
+      if (!this.renameApplianceError) {
+        this.renamedApplianceId = newAppliance.id;
+
+        // Set the renamed appliance as the selected appliance
+        const appliances = computed(() => applianceStore.appliances);
+        if (appliances.value.length > 0) {
+          applianceStore.selectAppliance(newApplianceId);
+        }
+
+        this.dialogRenameApplianceWait = false;
+        this.dialogRenameApplianceSuccess = true;
+      } else {
+        this.dialogRenameApplianceWait = false;
+        this.dialogRenameApplianceFailure = true;
+      }
+
+      // Reset the credentials
+      this.renameApplianceCredentials = {
+        customId: "",
+      };
+    },
+
     /* Open the add blade popup */
     addNewBladeWindowButton() {
       this.dialogNewBlade = true;
diff --git a/webui/src/components/Stores/ApplianceStore.ts b/webui/src/components/Stores/ApplianceStore.ts
index 530647e..661f777 100644
--- a/webui/src/components/Stores/ApplianceStore.ts
+++ b/webui/src/components/Stores/ApplianceStore.ts
@@ -13,10 +13,41 @@ export const useApplianceStore = defineStore('appliance', {
         selectedApplianceId: null as unknown as string,
         addApplianceError: null as unknown,
         deleteApplianceError: null as unknown,
+        renameApplianceError: null as unknown,
         applianceIds: [] as { id: string, bladeIds: string[] }[],
     }),
 
     actions: {
+        async renameAppliance(applianceId: string, newApplianceId: string) {
+            this.renameApplianceError = "";
+            try {
+                const defaultApi = new DefaultApi(undefined, API_BASE_PATH);
+                const response = await defaultApi.appliancesUpdateById(applianceId, newApplianceId);
+
+                // Update the appliances array
+                if (response) {
+                    this.appliances = this.appliances.filter(
+                        (appliance) => appliance.id !== applianceId
+                    );
+                    this.appliances.push(response.data);
+                }
+
+                return response.data
+            } catch (error) {
+                if (axios.isAxiosError(error)) {
+                    this.renameApplianceError = error.message;
+
+                    if (error.response) {
+                        this.renameApplianceError = error.response?.data.status.message + " (" + error.response?.request.status + ")";
+                    }
+                }
+                else {
+                    this.renameApplianceError = error;
+                }
+                console.error("Error:", error);
+            }
+        },
+
         async fetchAppliances() {
             this.appliances = [];
             this.applianceIds = [];
@@ -66,6 +97,7 @@ export const useApplianceStore = defineStore('appliance', {
                 const defaultApi = new DefaultApi(undefined, API_BASE_PATH);
                 const response = await defaultApi.appliancesPost(newAppliance);
                 const addedAppliance = response.data;
+                console.log("added appliance", addedAppliance)
                 // Add the new appliance to the appliances array
                 this.appliances.push(addedAppliance);
                 return addedAppliance;