diff --git a/changelogs/fragments/8237.yml b/changelogs/fragments/8237.yml
new file mode 100644
index 000000000000..a4466d7b6500
--- /dev/null
+++ b/changelogs/fragments/8237.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix the UI of delete modal in the save objects(assets) page ([#8237](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8237))
\ No newline at end of file
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap
index 23f8a7b89724..0c49e4f7cb9e 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap
@@ -1,229 +1,302 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SavedObjectsTable delete should show a confirm modal 1`] = `
-<EuiConfirmModal
-  buttonColor="danger"
-  cancelButtonText={
-    <FormattedMessage
-      defaultMessage="Cancel"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
-      values={Object {}}
-    />
-  }
-  confirmButtonText={
-    <FormattedMessage
-      defaultMessage="Delete"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
-      values={Object {}}
+<EuiModal
+  maxWidth="50vw"
+  onClose={[Function]}
+>
+  <EuiModalHeader>
+    <EuiModalHeaderTitle>
+      <FormattedMessage
+        defaultMessage="Delete assets"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
+        values={Object {}}
+      />
+    </EuiModalHeaderTitle>
+  </EuiModalHeader>
+  <EuiModalBody>
+    <EuiText
+      size="s"
+    >
+      <p>
+        <FormattedMessage
+          defaultMessage="This action will delete the following assets:"
+          id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+          values={Object {}}
+        />
+      </p>
+    </EuiText>
+    <EuiInMemoryTable
+      columns={
+        Array [
+          Object {
+            "field": "type",
+            "name": "Type",
+            "render": [Function],
+            "width": "50px",
+          },
+          Object {
+            "field": "meta.title",
+            "name": "Title",
+          },
+          Object {
+            "field": "id",
+            "name": "ID",
+          },
+        ]
+      }
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "type": "index-pattern",
+          },
+          Object {
+            "id": "3",
+            "type": "dashboard",
+          },
+        ]
+      }
+      pagination={true}
+      responsive={true}
+      sorting={false}
+      tableLayout="fixed"
     />
-  }
-  defaultFocusedButton="confirm"
-  onCancel={[Function]}
-  onConfirm={[Function]}
-  title={
+  </EuiModalBody>
+  <EuiModalFooter>
+    <EuiButtonEmpty
+      onClick={[Function]}
+    >
+      <FormattedMessage
+        defaultMessage="Cancel"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
+        values={Object {}}
+      />
+    </EuiButtonEmpty>
+    <EuiButton
+      color="danger"
+      fill={true}
+      onClick={[Function]}
+      type="submit"
+    >
+      <FormattedMessage
+        defaultMessage="Delete"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
+        values={Object {}}
+      />
+    </EuiButton>
+  </EuiModalFooter>
+</EuiModal>
+`;
+
+exports[`SavedObjectsTable delete should show a confirm modal 2`] = `
+<EuiModalHeader>
+  <EuiModalHeaderTitle>
     <FormattedMessage
-      defaultMessage="Delete saved objects"
+      defaultMessage="Delete assets"
       id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
       values={Object {}}
     />
-  }
->
-  <EuiText
-    size="s"
-  >
-    <p>
-      <FormattedMessage
-        defaultMessage="This action will delete the following saved objects:"
-        id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
-        values={Object {}}
-      />
-    </p>
-  </EuiText>
-  <EuiInMemoryTable
-    columns={
-      Array [
-        Object {
-          "field": "type",
-          "name": "Type",
-          "render": [Function],
-          "width": "50px",
-        },
-        Object {
-          "field": "id",
-          "name": "Id",
-        },
-        Object {
-          "field": "meta.title",
-          "name": "Title",
-        },
-      ]
-    }
-    items={
-      Array [
-        Object {
-          "id": "1",
-          "type": "index-pattern",
-        },
-        Object {
-          "id": "3",
-          "type": "dashboard",
-        },
-      ]
-    }
-    pagination={true}
-    responsive={true}
-    sorting={false}
-    tableLayout="fixed"
-  />
-</EuiConfirmModal>
+  </EuiModalHeaderTitle>
+</EuiModalHeader>
 `;
 
-exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 1`] = `
-<EuiConfirmModal
-  buttonColor="danger"
-  cancelButtonText={
+exports[`SavedObjectsTable delete should show a confirm modal 3`] = `
+<EuiModalFooter>
+  <EuiButtonEmpty
+    onClick={[Function]}
+  >
     <FormattedMessage
       defaultMessage="Cancel"
       id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
       values={Object {}}
     />
-  }
-  confirmButtonText={
+  </EuiButtonEmpty>
+  <EuiButton
+    color="danger"
+    fill={true}
+    onClick={[Function]}
+    type="submit"
+  >
     <FormattedMessage
       defaultMessage="Delete"
       id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
       values={Object {}}
     />
-  }
-  defaultFocusedButton="confirm"
-  onCancel={[Function]}
-  onConfirm={[Function]}
-  title={
-    <FormattedMessage
-      defaultMessage="Delete saved objects"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
-      values={Object {}}
-    />
-  }
+  </EuiButton>
+</EuiModalFooter>
+`;
+
+exports[`SavedObjectsTable delete should show a confirm modal 4`] = `null`;
+
+exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 1`] = `
+<EuiModal
+  maxWidth="50vw"
+  onClose={[Function]}
 >
-  <EuiText
-    size="s"
-  >
-    <p>
+  <EuiModalHeader>
+    <EuiModalHeaderTitle>
       <FormattedMessage
-        defaultMessage="This action will delete the following saved objects:"
-        id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+        defaultMessage="Delete assets"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
         values={Object {}}
       />
-    </p>
-  </EuiText>
-  <EuiInMemoryTable
-    columns={
-      Array [
-        Object {
-          "field": "type",
-          "name": "Type",
-          "render": [Function],
-          "width": "50px",
-        },
-        Object {
-          "field": "id",
-          "name": "Id",
-        },
-        Object {
-          "field": "meta.title",
-          "name": "Title",
-        },
-      ]
-    }
-    items={
-      Array [
-        Object {
-          "id": "1",
-          "type": "index-pattern",
-        },
-      ]
-    }
-    pagination={true}
-    responsive={true}
-    sorting={false}
-    tableLayout="fixed"
-  />
-</EuiConfirmModal>
+    </EuiModalHeaderTitle>
+  </EuiModalHeader>
+  <EuiModalBody>
+    <EuiText
+      size="s"
+    >
+      <p>
+        <FormattedMessage
+          defaultMessage="This action will delete the following assets:"
+          id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+          values={Object {}}
+        />
+      </p>
+    </EuiText>
+    <EuiInMemoryTable
+      columns={
+        Array [
+          Object {
+            "field": "type",
+            "name": "Type",
+            "render": [Function],
+            "width": "50px",
+          },
+          Object {
+            "field": "meta.title",
+            "name": "Title",
+          },
+          Object {
+            "field": "id",
+            "name": "ID",
+          },
+        ]
+      }
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "type": "index-pattern",
+          },
+        ]
+      }
+      pagination={true}
+      responsive={true}
+      sorting={false}
+      tableLayout="fixed"
+    />
+  </EuiModalBody>
+  <EuiModalFooter>
+    <EuiButtonEmpty
+      onClick={[Function]}
+    >
+      <FormattedMessage
+        defaultMessage="Cancel"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
+        values={Object {}}
+      />
+    </EuiButtonEmpty>
+    <EuiButton
+      color="danger"
+      fill={true}
+      onClick={[Function]}
+      type="submit"
+    >
+      <FormattedMessage
+        defaultMessage="Delete"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
+        values={Object {}}
+      />
+    </EuiButton>
+  </EuiModalFooter>
+</EuiModal>
 `;
 
 exports[`SavedObjectsTable delete should show error toast when failing to delete saved objects 2`] = `
-<EuiConfirmModal
-  buttonColor="danger"
-  cancelButtonText={
-    <FormattedMessage
-      defaultMessage="Cancel"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
-      values={Object {}}
-    />
-  }
-  confirmButtonText={
-    <FormattedMessage
-      defaultMessage="Delete"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
-      values={Object {}}
-    />
-  }
-  defaultFocusedButton="confirm"
-  onCancel={[Function]}
-  onConfirm={[Function]}
-  title={
-    <FormattedMessage
-      defaultMessage="Delete saved objects"
-      id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
-      values={Object {}}
-    />
-  }
+<EuiModal
+  maxWidth="50vw"
+  onClose={[Function]}
 >
-  <EuiText
-    size="s"
-  >
-    <p>
+  <EuiModalHeader>
+    <EuiModalHeaderTitle>
       <FormattedMessage
-        defaultMessage="This action will delete the following saved objects:"
-        id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+        defaultMessage="Delete assets"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
         values={Object {}}
       />
-    </p>
-  </EuiText>
-  <EuiInMemoryTable
-    columns={
-      Array [
-        Object {
-          "field": "type",
-          "name": "Type",
-          "render": [Function],
-          "width": "50px",
-        },
-        Object {
-          "field": "id",
-          "name": "Id",
-        },
-        Object {
-          "field": "meta.title",
-          "name": "Title",
-        },
-      ]
-    }
-    items={
-      Array [
-        Object {
-          "id": "1",
-          "type": "index-pattern",
-        },
-      ]
-    }
-    pagination={true}
-    responsive={true}
-    sorting={false}
-    tableLayout="fixed"
-  />
-</EuiConfirmModal>
+    </EuiModalHeaderTitle>
+  </EuiModalHeader>
+  <EuiModalBody>
+    <EuiText
+      size="s"
+    >
+      <p>
+        <FormattedMessage
+          defaultMessage="This action will delete the following assets:"
+          id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+          values={Object {}}
+        />
+      </p>
+    </EuiText>
+    <EuiInMemoryTable
+      columns={
+        Array [
+          Object {
+            "field": "type",
+            "name": "Type",
+            "render": [Function],
+            "width": "50px",
+          },
+          Object {
+            "field": "meta.title",
+            "name": "Title",
+          },
+          Object {
+            "field": "id",
+            "name": "ID",
+          },
+        ]
+      }
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "type": "index-pattern",
+          },
+        ]
+      }
+      pagination={true}
+      responsive={true}
+      sorting={false}
+      tableLayout="fixed"
+    />
+  </EuiModalBody>
+  <EuiModalFooter>
+    <EuiButtonEmpty
+      onClick={[Function]}
+    >
+      <FormattedMessage
+        defaultMessage="Cancel"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
+        values={Object {}}
+      />
+    </EuiButtonEmpty>
+    <EuiButton
+      color="danger"
+      fill={true}
+      onClick={[Function]}
+      type="submit"
+    >
+      <FormattedMessage
+        defaultMessage="Delete"
+        id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
+        values={Object {}}
+      />
+    </EuiButton>
+  </EuiModalFooter>
+</EuiModal>
 `;
 
 exports[`SavedObjectsTable duplicate should allow the user to choose on header when duplicating all 1`] = `
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx
index b3e440460428..44c00b173bca 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.test.tsx
@@ -586,7 +586,10 @@ describe('SavedObjectsTable', () => {
       await component.instance().onDelete();
       component.update();
 
-      expect(component.find('EuiConfirmModal')).toMatchSnapshot();
+      expect(component.find('EuiModal')).toMatchSnapshot();
+      expect(component.find('EuiModalHeader')).toMatchSnapshot();
+      expect(component.find('EuiModalFooter')).toMatchSnapshot();
+      expect(component.find('Delete assets')).toMatchSnapshot();
     });
 
     it('should delete selected objects', async () => {
@@ -675,14 +678,14 @@ describe('SavedObjectsTable', () => {
       await component.instance().onDelete();
       component.update();
       expect(component.state('isShowingDeleteConfirmModal')).toBe(true);
-      expect(component.find('EuiConfirmModal')).toMatchSnapshot();
+      expect(component.find('EuiModal')).toMatchSnapshot();
 
       await component.instance().delete();
       component.update();
       expect(notifications.toasts.addDanger).toHaveBeenCalled();
       // If user fail to delete the saved objects, the delete modal will continue to display
       expect(component.state('isShowingDeleteConfirmModal')).toBe(true);
-      expect(component.find('EuiConfirmModal')).toMatchSnapshot();
+      expect(component.find('EuiModal')).toMatchSnapshot();
       expect(component.state('isDeleting')).toBe(false);
     });
   });
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
index 8c77f9dd3eff..75135ef5f059 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
@@ -37,16 +37,16 @@ import {
   Query,
   EuiInMemoryTable,
   EuiIcon,
-  EuiConfirmModal,
+  EuiButtonEmpty,
+  EuiModal,
   EuiLoadingSpinner,
   EuiOverlayMask,
-  EUI_MODAL_CONFIRM_BUTTON,
   EuiCompressedCheckboxGroup,
   EuiToolTip,
   EuiPageContent,
   EuiCompressedSwitch,
-  EuiModal,
   EuiModalHeader,
+  EuiButton,
   EuiModalBody,
   EuiModalFooter,
   EuiSmallButtonEmpty,
@@ -890,80 +890,84 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
       };
 
       modal = (
-        <EuiConfirmModal
-          title={
-            <FormattedMessage
-              id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
-              defaultMessage="Delete saved objects"
-            />
-          }
-          onCancel={onCancel}
-          onConfirm={onConfirm}
-          buttonColor="danger"
-          cancelButtonText={
-            <FormattedMessage
-              id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
-              defaultMessage="Cancel"
-            />
-          }
-          confirmButtonText={
-            isDeleting ? (
+        <EuiModal onClose={onCancel} maxWidth="50vw">
+          <EuiModalHeader>
+            <EuiModalHeaderTitle>
               <FormattedMessage
-                id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteProcessButtonLabel"
-                defaultMessage="Deleting…"
+                id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModalTitle"
+                defaultMessage="Delete assets"
               />
-            ) : (
-              <FormattedMessage
-                id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
-                defaultMessage="Delete"
-              />
-            )
-          }
-          defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
-        >
-          <EuiText size="s">
-            <p>
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+
+          <EuiModalBody>
+            <EuiText size="s">
+              <p>
+                <FormattedMessage
+                  id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
+                  defaultMessage="This action will delete the following assets:"
+                />
+              </p>
+            </EuiText>
+            <EuiInMemoryTable
+              items={selectedSavedObjects}
+              columns={[
+                {
+                  field: 'type',
+                  name: i18n.translate(
+                    'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.typeColumnName',
+                    { defaultMessage: 'Type' }
+                  ),
+                  width: '50px',
+                  render: (type, object) => (
+                    <EuiToolTip position="top" content={getSavedObjectLabel(type)}>
+                      <EuiIcon type={object.meta.icon || 'apps'} />
+                    </EuiToolTip>
+                  ),
+                },
+                {
+                  field: 'meta.title',
+                  name: i18n.translate(
+                    'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.titleColumnName',
+                    { defaultMessage: 'Title' }
+                  ),
+                },
+                {
+                  field: 'id',
+                  name: i18n.translate(
+                    'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.idColumnName',
+                    { defaultMessage: 'ID' }
+                  ),
+                },
+              ]}
+              pagination={true}
+              sorting={false}
+            />
+          </EuiModalBody>
+
+          <EuiModalFooter>
+            <EuiButtonEmpty onClick={onCancel}>
               <FormattedMessage
-                id="savedObjectsManagement.deleteSavedObjectsConfirmModalDescription"
-                defaultMessage="This action will delete the following saved objects:"
+                id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.cancelButtonLabel"
+                defaultMessage="Cancel"
               />
-            </p>
-          </EuiText>
-          <EuiInMemoryTable
-            items={selectedSavedObjects}
-            columns={[
-              {
-                field: 'type',
-                name: i18n.translate(
-                  'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.typeColumnName',
-                  { defaultMessage: 'Type' }
-                ),
-                width: '50px',
-                render: (type, object) => (
-                  <EuiToolTip position="top" content={getSavedObjectLabel(type)}>
-                    <EuiIcon type={object.meta.icon || 'apps'} />
-                  </EuiToolTip>
-                ),
-              },
-              {
-                field: 'id',
-                name: i18n.translate(
-                  'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.idColumnName',
-                  { defaultMessage: 'Id' }
-                ),
-              },
-              {
-                field: 'meta.title',
-                name: i18n.translate(
-                  'savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.titleColumnName',
-                  { defaultMessage: 'Title' }
-                ),
-              },
-            ]}
-            pagination={true}
-            sorting={false}
-          />
-        </EuiConfirmModal>
+            </EuiButtonEmpty>
+
+            <EuiButton type="submit" onClick={onConfirm} fill color="danger">
+              {isDeleting ? (
+                <FormattedMessage
+                  id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteProcessButtonLabel"
+                  defaultMessage="Deleting…"
+                />
+              ) : (
+                <FormattedMessage
+                  id="savedObjectsManagement.objectsTable.deleteSavedObjectsConfirmModal.deleteButtonLabel"
+                  defaultMessage="Delete"
+                />
+              )}
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
       );
     }