diff --git a/webui/src/components/Appliance/Appliances.vue b/webui/src/components/Appliance/Appliances.vue
index 720b55c..f1abaed 100644
--- a/webui/src/components/Appliance/Appliances.vue
+++ b/webui/src/components/Appliance/Appliances.vue
@@ -48,6 +48,7 @@
               <v-menu>
                 <template v-slot:activator="{ props }">
                   <v-btn
+                    color="#6ebe4a"
                     icon="mdi-dots-vertical"
                     variant="text"
                     v-bind="props"
@@ -120,18 +121,43 @@
               <v-row justify="space-between" align="center">
                 <v-col> {{ blade.id }} </v-col>
                 <v-col>
-                  <v-btn icon variant="text">
-                    <v-icon
-                      color="warning"
-                      size="x-small"
-                      @click="deleteBladeWindowButton"
-                      id="deleteBladeWindowButton"
-                      >mdi-close</v-icon
-                    >
-                    <v-tooltip activator="parent" location="end"
-                      >Click here to delete this blade</v-tooltip
-                    >
-                  </v-btn>
+                  <v-menu>
+                    <template v-slot:activator="{ props }">
+                      <v-btn
+                        color="#6ebe4a"
+                        icon="mdi-dots-vertical"
+                        variant="text"
+                        v-bind="props"
+                        @click.stop="
+                          selectBlade(
+                            blade.id,
+                            blade.ipAddress,
+                            blade.port,
+                            Number(blade.totalMemoryAvailableMiB),
+                            Number(blade.totalMemoryAllocatedMiB),
+                            blade.status
+                          )
+                        "
+                      ></v-btn>
+                    </template>
+                    <v-list>
+                      <v-list-item
+                        v-for="(item, i) in bladeDropItems"
+                        :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>
@@ -644,7 +670,7 @@
           <v-btn
             color="#6ebe4a"
             variant="text"
-            id="cancelAddRenameAppliance"
+            id="cancelRenameAppliance"
             @click="dialogRenameAppliance = false"
           >
             Cancel
@@ -652,7 +678,7 @@
           <v-btn
             color="#6ebe4a"
             variant="text"
-            id="confirmRenameNewAppliance"
+            id="confirmRenameAppliance"
             @click="
               renameApplianceConfirm(
                 selectedApplianceId,
@@ -751,6 +777,151 @@
       </v-row>
     </v-dialog>
 
+    <!-- The dialog for renaming a blade -->
+    <v-dialog v-model="dialogRenameBlade" max-width="600px">
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Rename Blade</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="selectedBladeId"
+                    label="Current Blade Name"
+                    :style="{ width: '100%' }"
+                    id="currentBladeId"
+                    readonly
+                  ></v-text-field>
+                  <v-text-field
+                    v-model="renameBladeCredentials.customId"
+                    label="New Blade Name"
+                    :style="{ width: '100%' }"
+                    id="renameBladeId"
+                    :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="cancelRenameBlade"
+            @click="dialogRenameBlade = false"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            color="#6ebe4a"
+            variant="text"
+            id="confirmRenameBlade"
+            @click="
+              renameBladeConfirm(
+                selectedApplianceId,
+                selectedBladeId,
+                renameBladeCredentials.customId
+              )
+            "
+          >
+            Rename
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="dialogRenameBladeSuccess" 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 a Blade succeeded!</h2>
+        <p class="mb-4 text-medium-emphasis text-body-2">
+          New Blade Id:
+          <br />{{ renamedBladeId }}
+        </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="renameBladeSuccess"
+            @click="dialogRenameBladeSuccess = false"
+          >
+            Done
+          </v-btn>
+        </div>
+      </v-sheet>
+    </v-dialog>
+
+    <v-dialog v-model="dialogRenameBladeFailure" 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 a Blade failed!</h2>
+        <p class="mb-4 text-medium-emphasis text-body-2">
+          {{ renameBladeError }}
+        </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="renameBladeFailure"
+            @click="dialogRenameBladeFailure = false"
+          >
+            Done
+          </v-btn>
+        </div>
+      </v-sheet>
+    </v-dialog>
+
+    <v-dialog v-model="dialogRenameBladeWait">
+      <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">
+                {{ renameBladeProgressText }}
+              </div>
+            </template>
+          </v-progress-linear>
+        </v-col>
+      </v-row>
+    </v-dialog>
+
     <!-- The dialog for adding a new blade -->
     <v-dialog
       v-model="dialogNewBlade"
@@ -1225,6 +1396,7 @@ export default {
       deleteBladeProgressText: "Deleting blade, please wait...",
       resyncBladeProgressText: "Resynchronizing the blade, please wait...",
       renameApplianceProgressText: "Renaming appliance, please wait...",
+      renameBladeProgressText: "Renaming blade, please wait...",
 
       // The rules for the input fields when adding a new appliance/blade
       rules: {
@@ -1285,6 +1457,40 @@ export default {
           icon: "mdi-rename-box",
           function: this.renameAppliance,
           id: "renameApplianceWindow",
+          iconColor: "primary",
+        },
+      ],
+
+      renameBladeCredentials: {
+        customId: "",
+      },
+      renamedBladeId: "", // Be used on success popup
+      dialogRenameBlade: false,
+      renameBladeError: null as unknown,
+      dialogRenameBladeSuccess: false,
+      dialogRenameBladeFailure: false,
+      dialogRenameBladeWait: false,
+
+      bladeDropItems: [
+        {
+          text: "Delete",
+          icon: "mdi-delete",
+          function: this.deleteBladeWindowButton,
+          id: "deleteBladeWindow",
+          iconColor: "warning",
+        },
+        {
+          text: "Rename",
+          icon: "mdi-rename-box",
+          function: this.renameBlade,
+          id: "renameBladeWindow",
+          iconColor: "primary",
+        },
+        {
+          text: "Resync",
+          icon: "mdi-sync-circle",
+          function: this.resyncBladeWindowButton,
+          id: "resyncBladeWindow",
           iconColor: "#6ebe4a",
         },
       ],
@@ -1448,6 +1654,59 @@ export default {
       };
     },
 
+    renameBlade() {
+      this.dialogRenameBlade = true;
+    },
+
+    /* Triggle the API bladesUpdateById in appliance store to rename a blade */
+    async renameBladeConfirm(
+      applianceId: string,
+      bladeId: string,
+      newBladeId: string
+    ) {
+      // Make the rename blade popup disappear and waiting popup appear
+      this.dialogRenameBlade = false;
+      this.dialogRenameBladeWait = true;
+
+      const bladeStore = useBladeStore();
+      const newBlade = await bladeStore.renameBlade(
+        applianceId,
+        bladeId,
+        newBladeId
+      );
+
+      this.renameBladeError = bladeStore.renameBladeError as string;
+
+      if (!this.renameBladeError) {
+        this.renamedBladeId = newBlade.id;
+
+        // Set the renamed Blade as the selected Blade
+        const Blades = computed(() => bladeStore.blades);
+        if (Blades.value.length > 0) {
+          const defaultBlade = newBlade;
+          bladeStore.selectBlade(
+            defaultBlade!.id,
+            defaultBlade!.ipAddress,
+            defaultBlade!.port,
+            Number(defaultBlade!.totalMemoryAvailableMiB),
+            Number(defaultBlade!.totalMemoryAllocatedMiB),
+            defaultBlade!.status
+          );
+        }
+
+        this.dialogRenameBladeWait = false;
+        this.dialogRenameBladeSuccess = true;
+      } else {
+        this.dialogRenameBladeWait = false;
+        this.dialogRenameBladeFailure = true;
+      }
+
+      // Reset the credentials
+      this.renameBladeCredentials = {
+        customId: "",
+      };
+    },
+
     /* Open the add blade popup */
     addNewBladeWindowButton() {
       this.dialogNewBlade = true;
diff --git a/webui/src/components/Stores/BladeStore.ts b/webui/src/components/Stores/BladeStore.ts
index bddaee2..bdd30fe 100644
--- a/webui/src/components/Stores/BladeStore.ts
+++ b/webui/src/components/Stores/BladeStore.ts
@@ -18,6 +18,7 @@ export const useBladeStore = defineStore('blade', {
         addBladeError: null as unknown,
         deleteBladeError: null as unknown,
         resyncBladeError: null as unknown,
+        renameBladeError: null as unknown,
     }),
     actions: {
         async fetchBlades(applianceId: string) {
@@ -68,6 +69,37 @@ export const useBladeStore = defineStore('blade', {
             }
         },
 
+        async renameBlade(applianceId: string, bladeId: string, newBladeId: string) {
+            this.renameBladeError = "";
+            
+            try {
+                const defaultApi = new DefaultApi(undefined, API_BASE_PATH);
+                const response = await defaultApi.bladesUpdateById(applianceId, bladeId, newBladeId);
+
+                // Update the blades array
+                if (response) {
+                    this.blades = this.blades.filter(
+                        (blade) => blade.id !== bladeId
+                    );
+                    this.blades.push(response.data);
+                }
+
+                return response.data
+            } catch (error) {
+                if (axios.isAxiosError(error)) {
+                    this.renameBladeError = error.message;
+                    if (error.response) {
+                        this.renameBladeError = error.response?.data.status.message + " (" + error.response?.request.status + ")";
+                    }
+                }
+                else {
+                    this.renameBladeError = error;
+                }
+                console.error("Error:", error);
+            }
+        },
+
+
         async resyncBlade(applianceId: string, bladeId: string) {
             this.resyncBladeError = "";
             try {