diff --git a/frontend/src/components/common/common-undo-tool.js b/frontend/src/components/common/common-undo-tool.js
new file mode 100644
index 00000000000..493ec9506b6
--- /dev/null
+++ b/frontend/src/components/common/common-undo-tool.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+
+function CommonUndoTool(props) {
+  const style = {
+    color: 'rgb(71, 184, 129)',
+    marginLeft: '8px',
+    paddingBottom: '1px',
+    borderBottom: '1px solid rgb(71, 184, 129)',
+    cursor: 'pointer',
+  };
+  return (
+    <span onClick={(e) => {e.stopPropagation(); props.onUndoOperation(e);}} style={style}>{gettext('Undo')}</span>
+  );
+}
+
+CommonUndoTool.propTypes = {
+  onUndoOperation: PropTypes.func.isRequired,
+};
+
+export default CommonUndoTool;
diff --git a/frontend/src/pages/wiki2/side-panel.js b/frontend/src/pages/wiki2/side-panel.js
index 5eff2273665..5a98bedf6f3 100644
--- a/frontend/src/pages/wiki2/side-panel.js
+++ b/frontend/src/pages/wiki2/side-panel.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import deepCopy from 'deep-copy';
 import classNames from 'classnames';
-import { isWiki2, wikiId, wikiPermission } from '../../utils/constants';
+import { isWiki2, wikiId, wikiPermission, gettext } from '../../utils/constants';
 import toaster from '../../components/toast';
 import Loading from '../../components/loading';
 import WikiNav from './wiki-nav/index';
@@ -15,6 +15,7 @@ import WikiExternalOperations from './wiki-external-operations';
 import WikiTrashDialog from './wiki-trash-dialog';
 import { DEFAULT_PAGE_NAME } from './constant';
 import Wiki2Search from '../../components/search/wiki2-search';
+import CommonUndoTool from '../../components/common/common-undo-tool';
 
 import './side-panel.css';
 
@@ -40,7 +41,7 @@ class SidePanel extends PureComponent {
     };
   }
 
-  confirmDeletePage = (pageId) => {
+  onDeletePage = (pageId) => {
     const config = deepCopy(this.props.config);
     const { pages } = config;
     const index = PageUtils.getPageIndexById(pageId, pages);
@@ -48,6 +49,12 @@ class SidePanel extends PureComponent {
     wikiAPI.deleteWiki2Page(wikiId, pageId).then((res) => {
       if (res.data.success === true) {
         this.props.updateWikiConfig(config);
+        toaster.success(
+          <span>
+            {gettext('xxx page deleted').replace('xxx', pages[index].name)}
+            <CommonUndoTool onUndoOperation={() => this.revertWikiPage(pageId)} />
+          </span>
+        );
       }
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -59,6 +66,18 @@ class SidePanel extends PureComponent {
     }
   };
 
+  revertWikiPage = (pageId) => {
+    wikiAPI.revertTrashPage(wikiId, pageId).then(res => {
+      if (res.data.success === true) {
+        this.props.getWikiConfig();
+        toaster.success(gettext('Successfully restored 1 item.'));
+      }
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
   addPageInside = async ({ parentPageId, page_id, name, icon, path, docUuid, successCallback, errorCallback }) => {
     const newPage = new Page({ id: page_id, name, icon, path, docUuid });
     this.addPage(newPage, parentPageId, successCallback, errorCallback);
@@ -130,7 +149,7 @@ class SidePanel extends PureComponent {
             isEditMode={isWiki2}
             navigation={navigation}
             pages={pages}
-            onDeletePage={this.confirmDeletePage}
+            onDeletePage={this.onDeletePage}
             onUpdatePage={onUpdatePage}
             setCurrentPage={this.props.setCurrentPage}
             onMovePage={this.movePage}
diff --git a/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js b/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
index 6f3d9067a31..520f9cfc95f 100644
--- a/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
+++ b/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import NameEditPopover from '../../common/name-edit-popover';
 import NavItemIcon from '../../common/nav-item-icon';
 import PageDropdownMenu from './page-dropdownmenu';
-import DeleteDialog from '../../common/delete-dialog';
 import { gettext, wikiPermission } from '../../../../utils/constants';
 import AddNewPageDialog from '../add-new-page-dialog';
 import Icon from '../../../../components/icon';
@@ -20,7 +19,6 @@ class PageItem extends Component {
     this.state = {
       isShowNameEditor: false,
       isShowOperationDropdown: false,
-      isShowDeleteDialog: false,
       isShowInsertPage: false,
       isShowAddSiblingPage: false,
       insertPosition: '',
@@ -100,14 +98,6 @@ class PageItem extends Component {
     this.setState({ pageName: newName });
   };
 
-  openDeleteDialog = () => {
-    this.setState({ isShowDeleteDialog: true });
-  };
-
-  closeDeleteDialog = () => {
-    this.setState({ isShowDeleteDialog: false });
-  };
-
   toggleDropdown = () => {
     const isShowOperationDropdown = !this.state.isShowOperationDropdown;
     this.setState({ isShowOperationDropdown });
@@ -277,7 +267,7 @@ class PageItem extends Component {
                             toggle={this.toggleDropdown}
                             toggleNameEditor={this.toggleNameEditor}
                             duplicatePage={this.props.duplicatePage}
-                            onDeletePage={this.openDeleteDialog}
+                            onDeletePage={this.props.onDeletePage.bind(this, page.id)}
                             toggleInsertSiblingPage={this.toggleInsertSiblingPage}
                           />
                         }
@@ -288,12 +278,6 @@ class PageItem extends Component {
                     </>
                   }
                 </div>
-                {this.state.isShowDeleteDialog &&
-                  <DeleteDialog
-                    closeDeleteDialog={this.closeDeleteDialog}
-                    handleSubmit={this.props.onDeletePage.bind(this, page.id)}
-                  />
-                }
                 {this.state.isShowInsertPage &&
                   <AddNewPageDialog
                     toggle={this.toggleInsertPage}
diff --git a/frontend/src/pages/wiki2/wiki-trash-dialog.js b/frontend/src/pages/wiki2/wiki-trash-dialog.js
index a5cdc6f4024..a76e9290ebd 100644
--- a/frontend/src/pages/wiki2/wiki-trash-dialog.js
+++ b/frontend/src/pages/wiki2/wiki-trash-dialog.js
@@ -62,6 +62,7 @@ class WikiTrashDialog extends React.Component {
       this.getItems(1);
     });
   };
+
   cleanTrash = () => {
     this.toggleCleanTrashDialog();
   };
@@ -237,7 +238,6 @@ class Item extends React.Component {
     });
   };
 
-
   render() {
     const item = this.props.item;
     const { restored, isIconShown } = this.state;