diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 9bf0e104f..a126c2851 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -418,6 +418,8 @@ export default {
         image: 'Image',
         imagePull: 'Image pull',
         imagePush: 'Image push',
+        imageDelete: 'Image delete',
+        imageDeleteTag: 'Image tag delete',
         repoName: 'Repo Name',
         imageName: 'Image name',
         pull: 'Pull',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 76c82902b..78fa970d0 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -446,6 +446,7 @@ export default {
         imagePull: '拉取镜像',
         imagePush: '推送镜像',
         imageDelete: '删除镜像',
+        imageDeleteTag: '删除 Tag',
         repoName: '仓库名',
         imageName: '镜像名',
         httpRepo: 'http 仓库添加授信需要重启 docker 服务',
diff --git a/frontend/src/views/container/image/build/index.vue b/frontend/src/views/container/image/build/index.vue
index 325f518b9..855cd4d41 100644
--- a/frontend/src/views/container/image/build/index.vue
+++ b/frontend/src/views/container/image/build/index.vue
@@ -129,6 +129,7 @@ const rules = reactive({
     dockerfile: [Rules.requiredInput, { validator: varifyPath, trigger: 'change', required: true }],
 });
 const acceptParams = async () => {
+    logVisiable.value = false;
     drawerVisiable.value = true;
     form.from = 'path';
     form.dockerfile = '';
diff --git a/frontend/src/views/container/image/delete/index.vue b/frontend/src/views/container/image/delete/index.vue
new file mode 100644
index 000000000..e152994e9
--- /dev/null
+++ b/frontend/src/views/container/image/delete/index.vue
@@ -0,0 +1,83 @@
+<template>
+    <el-drawer v-model="deleteVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
+        <template #header>
+            <DrawerHeader :header="$t('container.imageDelete')" :back="handleClose" />
+        </template>
+        <el-form :model="deleteForm" label-position="top">
+            <el-row type="flex" justify="center">
+                <el-col :span="22">
+                    <el-form-item :label="$t('container.imageDelete')" prop="tagName">
+                        <el-checkbox v-model="isByID" :label="deleteForm.id" @change="changeDeleteType" />
+                    </el-form-item>
+                    <el-form-item :label="$t('container.imageDeleteTag')" prop="tagName">
+                        <el-checkbox-group v-model="deleteForm.deleteTags">
+                            <el-checkbox v-for="item in deleteForm.tags" :key="item" :value="item" :label="item" />
+                        </el-checkbox-group>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="deleteVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" :disabled="deleteForm.deleteTags.length === 0" @click="batchDelete()">
+                    {{ $t('commons.button.delete') }}
+                </el-button>
+            </span>
+        </template>
+    </el-drawer>
+</template>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { ElForm } from 'element-plus';
+import { imageRemove } from '@/api/modules/container';
+import { useDeleteData } from '@/hooks/use-delete-data';
+import DrawerHeader from '@/components/drawer-header/index.vue';
+
+const deleteVisiable = ref(false);
+const isByID = ref();
+const deleteForm = reactive({
+    id: '',
+    tags: [] as Array<string>,
+    deleteTags: [] as Array<string>,
+});
+
+interface DialogProps {
+    id: string;
+    tags: Array<string>;
+}
+const acceptParams = (params: DialogProps) => {
+    deleteVisiable.value = true;
+    deleteForm.id = params.id.replaceAll('sha256:', '').substring(0, 12);
+    deleteForm.deleteTags = [];
+    deleteForm.tags = params.tags;
+};
+const handleClose = () => {
+    deleteVisiable.value = false;
+};
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+const changeDeleteType = () => {
+    if (isByID.value) {
+        deleteForm.deleteTags = deleteForm.tags;
+    }
+};
+
+const batchDelete = async () => {
+    let names: Array<string> = [];
+    if (!isByID.value) {
+        for (const item of deleteForm.deleteTags) {
+            names.push(item);
+        }
+    } else {
+        names.push(deleteForm.id);
+    }
+    await useDeleteData(imageRemove, { names: names }, 'commons.msg.delete');
+    deleteVisiable.value = false;
+    emit('search');
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index d862177d4..dd71f4fc5 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -69,29 +69,7 @@
         <Save ref="dialogSaveRef" @search="search" />
         <Load ref="dialogLoadRef" @search="search" />
         <Build ref="dialogBuildRef" @search="search" />
-
-        <el-dialog v-model="deleteVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
-            <template #header>
-                <div class="card-header">
-                    <span>{{ $t('container.imageDelete') }}</span>
-                </div>
-            </template>
-            <el-form :model="deleteForm" label-width="80px">
-                <el-form-item label="Tag" prop="tagName">
-                    <el-checkbox-group v-model="deleteForm.deleteTags">
-                        <el-checkbox v-for="item in deleteForm.tags" :key="item" :value="item" :label="item" />
-                    </el-checkbox-group>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="deleteVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button type="primary" :disabled="deleteForm.deleteTags.length === 0" @click="batchDelete()">
-                        {{ $t('commons.button.delete') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-dialog>
+        <Delete ref="dialogDeleteRef" @search="search" />
     </div>
 </template>
 
@@ -107,10 +85,9 @@ import Push from '@/views/container/image/push/index.vue';
 import Save from '@/views/container/image/save/index.vue';
 import Load from '@/views/container/image/load/index.vue';
 import Build from '@/views/container/image/build/index.vue';
-import { searchImage, listImageRepo, imageRemove, loadDockerStatus } from '@/api/modules/container';
+import Delete from '@/views/container/image/delete/index.vue';
+import { searchImage, listImageRepo, loadDockerStatus } from '@/api/modules/container';
 import i18n from '@/lang';
-import { ElForm } from 'element-plus';
-import { useDeleteData } from '@/hooks/use-delete-data';
 import router from '@/routers';
 
 const loading = ref(false);
@@ -143,12 +120,7 @@ const dialogPushRef = ref();
 const dialogLoadRef = ref();
 const dialogSaveRef = ref();
 const dialogBuildRef = ref();
-
-const deleteVisiable = ref(false);
-const deleteForm = reactive({
-    deleteTags: [] as Array<string>,
-    tags: [] as Array<string>,
-});
+const dialogDeleteRef = ref();
 
 const search = async () => {
     const repoSearch = {
@@ -181,16 +153,6 @@ const onOpenload = () => {
     dialogLoadRef.value!.acceptParams();
 };
 
-const batchDelete = async () => {
-    let names: Array<string> = [];
-    for (const item of deleteForm.deleteTags) {
-        names.push(item);
-    }
-    await useDeleteData(imageRemove, { names: names }, 'commons.msg.delete');
-    deleteVisiable.value = false;
-    search();
-};
-
 const buttons = [
     {
         label: 'Tag',
@@ -225,9 +187,11 @@ const buttons = [
     {
         label: i18n.global.t('commons.button.delete'),
         click: (row: Container.ImageInfo) => {
-            deleteForm.tags = row.tags;
-            deleteForm.deleteTags = [];
-            deleteVisiable.value = true;
+            let params = {
+                id: row.id,
+                tags: row.tags,
+            };
+            dialogDeleteRef.value!.acceptParams(params);
         },
     },
 ];
diff --git a/frontend/src/views/container/image/pull/index.vue b/frontend/src/views/container/image/pull/index.vue
index 809da3e1f..beb3bcb70 100644
--- a/frontend/src/views/container/image/pull/index.vue
+++ b/frontend/src/views/container/image/pull/index.vue
@@ -11,7 +11,7 @@
         </template>
         <el-row type="flex" justify="center">
             <el-col :span="22">
-                <el-form ref="formRef" label-position="top" :model="form" label-width="80px">
+                <el-form ref="formRef" label-position="top" :model="form">
                     <el-form-item :label="$t('container.from')">
                         <el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
                     </el-form-item>
@@ -100,6 +100,7 @@ interface DialogProps {
 const repos = ref();
 
 const acceptParams = async (params: DialogProps): Promise<void> => {
+    logVisiable.value = false;
     drawerVisiable.value = true;
     form.fromRepo = true;
     form.imageName = '';
diff --git a/frontend/src/views/container/image/push/index.vue b/frontend/src/views/container/image/push/index.vue
index 49756add3..d716a4268 100644
--- a/frontend/src/views/container/image/push/index.vue
+++ b/frontend/src/views/container/image/push/index.vue
@@ -108,6 +108,7 @@ const dialogData = ref<DialogProps>({
 });
 
 const acceptParams = async (params: DialogProps): Promise<void> => {
+    logVisiable.value = false;
     drawerVisiable.value = true;
     form.tags = params.tags;
     form.repoID = 1;