diff --git a/frontend/src/components/accountPage/SSHKeysTable/SSHKeysTable.tsx b/frontend/src/components/accountPage/SSHKeysTable/SSHKeysTable.tsx
index 74bc718b5..6a708f7cd 100644
--- a/frontend/src/components/accountPage/SSHKeysTable/SSHKeysTable.tsx
+++ b/frontend/src/components/accountPage/SSHKeysTable/SSHKeysTable.tsx
@@ -1,15 +1,18 @@
 import { DeleteOutlined } from '@ant-design/icons';
-import { Popconfirm, Table } from 'antd';
+import { Table } from 'antd';
+import Button from 'antd-button-color';
 import Column from 'antd/lib/table/Column';
-import { FC } from 'react';
+import { FC, useState } from 'react';
+import { ModalAlert } from '../../common/ModalAlert';
 
 export interface ISSHKeysTableProps {
   sshKeys?: { name: string; key: string }[];
-  onDeleteKey?: (key: { name: string; key: string }) => void;
+  onDeleteKey: (key: { name: string; key: string }) => Promise<boolean>;
 }
 
 const SSHKeysTable: FC<ISSHKeysTableProps> = props => {
-  const { sshKeys } = props;
+  const { sshKeys, onDeleteKey } = props;
+  const [showDeleteModalConfirm, setShowDeleteModalConfirm] = useState(false);
   return (
     <Table
       dataSource={sshKeys}
@@ -42,13 +45,45 @@ const SSHKeysTable: FC<ISSHKeysTableProps> = props => {
         width={60}
         render={(_: any, record: { name: string; key: string }) =>
           sshKeys?.length && (
-            <Popconfirm
-              className="flex justify-center"
-              title="Confirm deletion?"
-              onConfirm={() => props.onDeleteKey?.(record)}
-            >
-              <DeleteOutlined style={{ color: 'red' }} />
-            </Popconfirm>
+            <>
+              <ModalAlert
+                headTitle={record.name}
+                message="Delete ssh key"
+                description="Do you really want to delete this key?"
+                type="warning"
+                buttons={[
+                  <Button
+                    key={0}
+                    shape="round"
+                    className="mr-2 w-24"
+                    type="primary"
+                    onClick={() => setShowDeleteModalConfirm(false)}
+                  >
+                    Close
+                  </Button>,
+                  <Button
+                    key={1}
+                    shape="round"
+                    className="ml-2 w-24"
+                    type="danger"
+                    onClick={() =>
+                      onDeleteKey(record)
+                        .then(() => setShowDeleteModalConfirm(false))
+                        .catch(err => null)
+                    }
+                  >
+                    Delete
+                  </Button>,
+                ]}
+                show={showDeleteModalConfirm}
+                setShow={setShowDeleteModalConfirm}
+              />
+
+              <DeleteOutlined
+                onClick={() => setShowDeleteModalConfirm(true)}
+                style={{ color: 'red' }}
+              />
+            </>
           )
         }
       />
diff --git a/frontend/src/components/accountPage/UserPanel/UserPanel.tsx b/frontend/src/components/accountPage/UserPanel/UserPanel.tsx
index dacc9880c..e60592991 100644
--- a/frontend/src/components/accountPage/UserPanel/UserPanel.tsx
+++ b/frontend/src/components/accountPage/UserPanel/UserPanel.tsx
@@ -14,22 +14,16 @@ export interface IUserPanelProps {
   username: string;
   email: string;
   sshKeys?: { name: string; key: string }[];
-  onDeleteKey?: (key: {
-    name: string;
-    key: string;
-  }) => boolean | Promise<boolean>;
-  onAddKey?: (key: { name: string; key: string }) => boolean | Promise<boolean>;
+  onDeleteKey: (key: { name: string; key: string }) => Promise<boolean>;
+  onAddKey: (key: { name: string; key: string }) => boolean | Promise<boolean>;
 }
 
 const UserPanel: FC<IUserPanelProps> = props => {
-  const { sshKeys, ...otherInfo } = props;
+  const { sshKeys, onDeleteKey, ...otherInfo } = props;
   const [showSSHModal, setShowSSHModal] = useState(false);
 
   const closeModal = () => setShowSSHModal(false);
 
-  const deleteKey = async (targetKey: { name: string; key: string }) => {
-    await props.onDeleteKey?.(targetKey);
-  };
   const addKey = async (newKey: { name: string; key: string }) => {
     if (await props.onAddKey?.(newKey)) {
       closeModal();
@@ -56,7 +50,7 @@ const UserPanel: FC<IUserPanelProps> = props => {
             <UserInfo {...otherInfo} />
           </TabPane>
           <TabPane tab="SSH Keys" key="2">
-            <SSHKeysTable sshKeys={sshKeys} onDeleteKey={deleteKey} />
+            <SSHKeysTable sshKeys={sshKeys} onDeleteKey={onDeleteKey} />
             <Button className="mt-3" onClick={() => setShowSSHModal(true)}>
               Add SSH key
             </Button>