diff --git a/frontend/src/components/dialog/trash-dialog/index.css b/frontend/src/components/dialog/trash-dialog/index.css
index e10af00029..5b75028530 100644
--- a/frontend/src/components/dialog/trash-dialog/index.css
+++ b/frontend/src/components/dialog/trash-dialog/index.css
@@ -1,18 +1,38 @@
 .trash-dialog {
-  max-width: 1100px;
-  height: calc(100% - 56px);
-  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin: 0;
 }
 
 .trash-dialog .modal-content {
   height: 100%;
   overflow: hidden;
+  border: none;
+  border-radius: 0;
+}
+
+@media (min-width: 768px) {
+  .trash-dialog {
+    max-width: 1100px;
+    height: calc(100% - 56px);
+    overflow: hidden;
+    margin: 1.75rem auto;
+  }
+
+  .trash-dialog .modal-content {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+  }
 }
 
 .trash-dialog .modal-header {
   align-items: center;
 }
 
+.trash-dialog .back-icon {
+  color: #999;
+}
+
 .trash-dialog .modal-header .button-control {
   display: flex;
   justify-content: center;
@@ -45,6 +65,19 @@
   background: #dfdfdf;
 }
 
+.trash-dialog .path-container {
+  border-bottom: 1px solid #eee;
+  height: 40px;
+  padding: 0 .5rem 1rem;
+}
+
+@media (min-width: 768px) {
+  .trash-dialog .path-container {
+    border-bottom: none;
+    padding: 0 0 1rem;
+  }
+}
+
 @media (max-width: 768px) {
   .trash-dialog .modal-header .trash-dialog-old-page {
     font-size: 14px;
diff --git a/frontend/src/components/dialog/trash-dialog/index.js b/frontend/src/components/dialog/trash-dialog/index.js
index ec91350e4a..654ffc07d7 100644
--- a/frontend/src/components/dialog/trash-dialog/index.js
+++ b/frontend/src/components/dialog/trash-dialog/index.js
@@ -188,25 +188,38 @@ class TrashDialog extends React.Component {
     let title = gettext('{placeholder} Trash');
     title = title.replace('{placeholder}', '<span class="op-target text-truncate mr-1">' + Utils.HTMLescape(repoFolderName) + '</span>');
 
+    const isDesktop = Utils.isDesktop();
     return (
       <>
         <Modal className="trash-dialog" isOpen={showTrashDialog} toggle={toggleTrashDialog}>
           <ModalHeader
             close={
               <div className="button-control">
-                <a className="trash-dialog-old-page" href={oldTrashUrl}>{gettext('Visit old version page')}</a>
+                {isDesktop && <a className="trash-dialog-old-page" href={oldTrashUrl}>{gettext('Visit old version page')}</a>}
                 {(enableUserCleanTrash && !showFolder && isRepoAdmin) &&
                   <button className="btn btn-secondary clean flex-shrink-0 ml-4" onClick={this.cleanTrash}>{gettext('Clean')}</button>
                 }
-                <button type="button" className="close seahub-modal-btn" aria-label={gettext('Close')} onClick={toggleTrashDialog}>
-                  <span className="seahub-modal-btn-inner">
-                    <i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
-                  </span>
-                </button>
+                {isDesktop && (
+                  <button type="button" className="close seahub-modal-btn" aria-label={gettext('Close')} onClick={toggleTrashDialog}>
+                    <span className="seahub-modal-btn-inner">
+                      <i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
+                    </span>
+                  </button>
+                )}
               </div>
             }
           >
-            <div dangerouslySetInnerHTML={{ __html: title }}></div>
+            {!isDesktop &&
+              <span
+                role="button"
+                className="sf3-font sf3-font-arrow rotate-180 d-inline-block back-icon mr-2"
+                title={gettext('Back')}
+                aria-label={gettext('Back')}
+                onClick={toggleTrashDialog}
+              >
+              </span>
+            }
+            <span dangerouslySetInnerHTML={{ __html: title }}></span>
           </ModalHeader>
           <ModalBody>
             {isLoading && <Loading />}
@@ -214,15 +227,15 @@ class TrashDialog extends React.Component {
               <EmptyTip text={gettext('No file')} className="m-0" />
             }
             {!isLoading && items.length > 0 &&
-              <div>
-                <div className="path-container dir-view-path mb-2">
+              <>
+                <div className="path-container dir-view-path mw-100 pb-2">
                   <span className="path-label mr-1">{gettext('Current path: ')}</span>
                   {showFolder ?
                     this.renderFolderPath() :
                     <span className="last-path-item" title={repoFolderName}>{repoFolderName}</span>
                   }
                 </div>
-                <Table repoID={repoID} data={this.state} renderFolder={this.renderFolder} />
+                <Table repoID={repoID} data={this.state} renderFolder={this.renderFolder} isDesktop={isDesktop} />
                 <Paginator
                   gotoPreviousPage={this.getPreviousPage}
                   gotoNextPage={this.getNextPage}
@@ -232,7 +245,7 @@ class TrashDialog extends React.Component {
                   resetPerPage={this.resetPerPage}
                   noURLUpdate={true}
                 />
-              </div>
+              </>
             }
           </ModalBody>
         </Modal>
diff --git a/frontend/src/components/dialog/trash-dialog/table/file-records/file-record.js b/frontend/src/components/dialog/trash-dialog/table/file-records/file-record.js
index d12465b041..8f99fb69b6 100644
--- a/frontend/src/components/dialog/trash-dialog/table/file-records/file-record.js
+++ b/frontend/src/components/dialog/trash-dialog/table/file-records/file-record.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
+import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import { Utils, isMobile } from '../../../../../utils/utils';
 import { gettext, siteRoot } from '../../../../../utils/constants';
 import { seafileAPI } from '../../../../../utils/seafile-api';
@@ -12,10 +13,17 @@ class FileRecord extends React.Component {
     super(props);
     this.state = {
       restored: false,
-      isIconShown: false
+      isIconShown: false,
+      isOpMenuOpen: false // for mobile
     };
   }
 
+  toggleOpMenu = () => {
+    this.setState({
+      isOpMenuOpen: !this.state.isOpMenuOpen
+    });
+  };
+
   handleMouseOver = () => {
     this.setState({ isIconShown: true });
   };
@@ -24,8 +32,12 @@ class FileRecord extends React.Component {
     this.setState({ isIconShown: false });
   };
 
-  restoreItem = (e) => {
+  onRestoreClicked = (e) => {
     e.preventDefault();
+    this.restoreItem();
+  };
+
+  restoreItem = () => {
     const { record } = this.props;
     const { commit_id, parent_dir, obj_name, is_dir } = record;
     const path = parent_dir + obj_name;
@@ -55,40 +67,118 @@ class FileRecord extends React.Component {
   };
 
   render() {
-    const { record } = this.props;
+    const { record, isDesktop } = this.props;
     const { restored, isIconShown } = this.state;
 
     if (restored) return null;
 
-    return record.is_dir ? (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
-        <td className="pl-2 pr-2"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
-        <td><a href="#" onClick={this.renderFolder}>{record.obj_name}</a></td>
-        <td>{record.parent_dir}</td>
-        <td title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(record.deleted_time).format('YYYY-MM-DD')}</td>
-        <td></td>
-        <td>
-          <a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
-        </td>
-      </tr>
-    ) : (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
-        <td className="pl-2 pr-2"><img src={Utils.getFileIconUrl(record.obj_name)} alt={gettext('File')} width="24" /></td>
-        <td>
-          <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${record.commit_id}&base=${encodeURIComponent(record.parent_dir)}&p=${encodeURIComponent('/' + record.obj_name)}`} target="_blank" rel="noreferrer">
-            {record.obj_name}
-          </a>
-        </td>
-        <td>{record.parent_dir}</td>
-        <td title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>
-          {dayjs(record.deleted_time).format('YYYY-MM-DD')}
-        </td>
-        <td>{Utils.bytesToSize(record.size)}</td>
-        <td>
-          <a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
-        </td>
-      </tr>
-    );
+    if (isDesktop) {
+      return record.is_dir ? (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+          <td className="pl-2 pr-2"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
+          <td><a href="#" onClick={this.renderFolder}>{record.obj_name}</a></td>
+          <td>{record.parent_dir}</td>
+          <td title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(record.deleted_time).format('YYYY-MM-DD')}</td>
+          <td></td>
+          <td>
+            <a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.onRestoreClicked} role="button">{gettext('Restore')}</a>
+          </td>
+        </tr>
+      ) : (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+          <td className="pl-2 pr-2"><img src={Utils.getFileIconUrl(record.obj_name)} alt={gettext('File')} width="24" /></td>
+          <td>
+            <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${record.commit_id}&base=${encodeURIComponent(record.parent_dir)}&p=${encodeURIComponent('/' + record.obj_name)}`} target="_blank" rel="noreferrer">
+              {record.obj_name}
+            </a>
+          </td>
+          <td>{record.parent_dir}</td>
+          <td title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>
+            {dayjs(record.deleted_time).format('YYYY-MM-DD')}
+          </td>
+          <td>{Utils.bytesToSize(record.size)}</td>
+          <td>
+            <a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.onRestoreClicked} role="button">{gettext('Restore')}</a>
+          </td>
+        </tr>
+      );
+    } else { // for mobile
+      return record.is_dir ? (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+          <td
+            onClick={this.renderFolder}
+            className="text-center"
+          >
+            <img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" />
+          </td>
+          <td
+            onClick={this.renderFolder}
+          >
+            <a href="#" onClick={this.renderFolder}>{record.obj_name}</a>
+            <br />
+            <span className="item-meta-info">{record.parent_dir}</span>
+            <br />
+            <span className="item-meta-info" title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(record.deleted_time).format('YYYY-MM-DD')}</span>
+          </td>
+          <td>
+            <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
+              <DropdownToggle
+                tag="i"
+                className="sf-dropdown-toggle sf3-font sf3-font-more-vertical ml-0"
+                title={gettext('More operations')}
+                aria-label={gettext('More operations')}
+                data-toggle="dropdown"
+                aria-expanded={this.state.isOpMenuOpen}
+              />
+              <div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
+                <div className="mobile-operation-menu-bg-layer"></div>
+                <div className="mobile-operation-menu">
+                  <DropdownItem className="mobile-menu-item" onClick={this.restoreItem}>
+                    {gettext('Restore')}
+                  </DropdownItem>
+                </div>
+              </div>
+            </Dropdown>
+          </td>
+        </tr>
+      ) : (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+          <td className="text-center"><img src={Utils.getFileIconUrl(record.obj_name)} alt={gettext('File')} width="24" /></td>
+          <td>
+            <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${record.commit_id}&base=${encodeURIComponent(record.parent_dir)}&p=${encodeURIComponent('/' + record.obj_name)}`} target="_blank" rel="noreferrer">
+              {record.obj_name}
+            </a>
+            <br />
+            <span className="item-meta-info">{record.parent_dir}</span>
+            <br />
+            <span className="item-meta-info mr-2">{Utils.bytesToSize(record.size)}</span>
+            <span className="item-meta-info">
+              {dayjs(record.deleted_time).format('YYYY-MM-DD')}
+            </span>
+          </td>
+          <td>
+            <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
+              <DropdownToggle
+                tag="i"
+                className="sf-dropdown-toggle sf3-font sf3-font-more-vertical ml-0"
+                title={gettext('More operations')}
+                aria-label={gettext('More operations')}
+                data-toggle="dropdown"
+                aria-expanded={this.state.isOpMenuOpen}
+              />
+              <div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
+                <div className="mobile-operation-menu-bg-layer"></div>
+                <div className="mobile-operation-menu">
+                  <DropdownItem className="mobile-menu-item" onClick={this.restoreItem}>
+                    {gettext('Restore')}
+                  </DropdownItem>
+                </div>
+              </div>
+            </Dropdown>
+          </td>
+        </tr>
+      );
+    }
   }
 }
 
diff --git a/frontend/src/components/dialog/trash-dialog/table/file-records/index.js b/frontend/src/components/dialog/trash-dialog/table/file-records/index.js
index 4a7d4c3d5d..a871b23950 100644
--- a/frontend/src/components/dialog/trash-dialog/table/file-records/index.js
+++ b/frontend/src/components/dialog/trash-dialog/table/file-records/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import FileRecord from './file-record';
 
-const FileRecords = ({ records, repoID, renderFolder }) => {
+const FileRecords = ({ records, repoID, renderFolder, isDesktop }) => {
   if (!Array.isArray(records) || records.length === 0) return null;
   return records.map((record, index) => {
     return (
@@ -11,6 +11,7 @@ const FileRecords = ({ records, repoID, renderFolder }) => {
         record={record}
         repoID={repoID}
         renderFolder={renderFolder}
+        isDesktop={isDesktop}
       />
     );
   });
diff --git a/frontend/src/components/dialog/trash-dialog/table/folder-records/folder-record.js b/frontend/src/components/dialog/trash-dialog/table/folder-records/folder-record.js
index 193b50ebff..bf6d12ac0e 100644
--- a/frontend/src/components/dialog/trash-dialog/table/folder-records/folder-record.js
+++ b/frontend/src/components/dialog/trash-dialog/table/folder-records/folder-record.js
@@ -27,33 +27,68 @@ class FolderRecord extends React.Component {
   };
 
   render() {
-    const { commitID, baseDir, folderPath, record } = this.props;
+    const { commitID, baseDir, folderPath, record, isDesktop } = this.props;
 
-    return record.type == 'dir' ? (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td className="pl-2 pr-2"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
-        <td><a href="#" onClick={this.renderFolder}>{record.name}</a></td>
-        <td>{record.parent_dir}</td>
-        <td></td>
-        <td></td>
-        <td></td>
-      </tr>
-    ) : (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td className="pl-2 pr-2">
-          <img src={Utils.getFileIconUrl(record.name)} alt={gettext('File')} width="24" />
-        </td>
-        <td>
-          <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${commitID}&base=${encodeURIComponent(baseDir)}&p=${encodeURIComponent(Utils.joinPath(folderPath, record.name))}`} target="_blank" rel="noreferrer">
-            {record.name}
-          </a>
-        </td>
-        <td>{record.parent_dir}</td>
-        <td></td>
-        <td>{Utils.bytesToSize(record.size)}</td>
-        <td></td>
-      </tr>
-    );
+    if (isDesktop) {
+      return record.type == 'dir' ? (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td className="pl-2 pr-2"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
+          <td><a href="#" onClick={this.renderFolder}>{record.name}</a></td>
+          <td>{record.parent_dir}</td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+      ) : (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td className="pl-2 pr-2">
+            <img src={Utils.getFileIconUrl(record.name)} alt={gettext('File')} width="24" />
+          </td>
+          <td>
+            <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${commitID}&base=${encodeURIComponent(baseDir)}&p=${encodeURIComponent(Utils.joinPath(folderPath, record.name))}`} target="_blank" rel="noreferrer">
+              {record.name}
+            </a>
+          </td>
+          <td>{record.parent_dir}</td>
+          <td></td>
+          <td>{Utils.bytesToSize(record.size)}</td>
+          <td></td>
+        </tr>
+      );
+    } else { // for mobile
+      return record.type == 'dir' ? (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td
+            className="text-center"
+            onClick={this.renderFolder}
+          >
+            <img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" />
+          </td>
+          <td onClick={this.renderFolder}>
+            <a href="#" onClick={this.renderFolder}>{record.name}</a>
+            <br />
+            <span className="item-meta-info">{record.parent_dir}</span>
+          </td>
+          <td></td>
+        </tr>
+      ) : (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td className="text-center">
+            <img src={Utils.getFileIconUrl(record.name)} alt={gettext('File')} width="24" />
+          </td>
+          <td>
+            <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${commitID}&base=${encodeURIComponent(baseDir)}&p=${encodeURIComponent(Utils.joinPath(folderPath, record.name))}`} target="_blank" rel="noreferrer">
+              {record.name}
+            </a>
+            <br />
+            <span className="item-meta-info">{record.parent_dir}</span>
+            <br />
+            <span className="item-meta-info">{Utils.bytesToSize(record.size)}</span>
+          </td>
+          <td></td>
+        </tr>
+      );
+    }
   }
 }
 
diff --git a/frontend/src/components/dialog/trash-dialog/table/folder-records/index.js b/frontend/src/components/dialog/trash-dialog/table/folder-records/index.js
index c5e25f5ca7..54d0969b1e 100644
--- a/frontend/src/components/dialog/trash-dialog/table/folder-records/index.js
+++ b/frontend/src/components/dialog/trash-dialog/table/folder-records/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import FolderRecord from './folder-record';
 
-const FolderRecords = ({ records, repoID, commitID, baseDir, folderPath, renderFolder }) => {
+const FolderRecords = ({ records, repoID, commitID, baseDir, folderPath, renderFolder, isDesktop }) => {
   if (!Array.isArray(records) || records.length === 0) return null;
   return records.map((record, index) => {
     return (
@@ -14,6 +14,7 @@ const FolderRecords = ({ records, repoID, commitID, baseDir, folderPath, renderF
         baseDir={baseDir}
         folderPath={folderPath}
         renderFolder={renderFolder}
+        isDesktop={isDesktop}
       />
     );
   });
diff --git a/frontend/src/components/dialog/trash-dialog/table/index.js b/frontend/src/components/dialog/trash-dialog/table/index.js
index 760db85ffd..0a961040cb 100644
--- a/frontend/src/components/dialog/trash-dialog/table/index.js
+++ b/frontend/src/components/dialog/trash-dialog/table/index.js
@@ -4,8 +4,9 @@ import { gettext } from '../../../../utils/constants';
 import FolderRecords from './folder-records';
 import FileRecords from './file-records';
 import FixedWidthTable from '../../../common/fixed-width-table';
+import LibsMobileThead from '../../../../components/libs-mobile-thead';
 
-const Table = ({ repoID, renderFolder, data }) => {
+const Table = ({ repoID, renderFolder, data, isDesktop }) => {
   const headers = useMemo(() => [
     { isFixed: true, width: 40, className: 'pl-2 pr-2' },
     { isFixed: false, width: 0.25, children: gettext('Name') },
@@ -17,15 +18,33 @@ const Table = ({ repoID, renderFolder, data }) => {
 
   const { items, showFolder, commitID, baseDir, folderPath, folderItems } = data;
 
+  const tbodyContent = (
+    <>
+      {showFolder ? (
+        <FolderRecords records={folderItems} repoID={repoID} commitID={commitID} baseDir={baseDir} folderPath={folderPath} renderFolder={renderFolder} isDesktop={isDesktop} />
+      ) : (
+        <FileRecords records={items} repoID={repoID} renderFolder={renderFolder} isDesktop={isDesktop} />
+      )}
+    </>
+  );
+
   return (
     <div className="table-container p-0">
-      <FixedWidthTable className="table-hover" headers={headers}>
-        {showFolder ? (
-          <FolderRecords records={folderItems} repoID={repoID} commitID={commitID} baseDir={baseDir} folderPath={folderPath} renderFolder={renderFolder} />
-        ) : (
-          <FileRecords records={items} repoID={repoID} renderFolder={renderFolder} />
-        )}
-      </FixedWidthTable>
+      {isDesktop
+        ? (
+          <FixedWidthTable className="table-hover" headers={headers}>
+            {tbodyContent}
+          </FixedWidthTable>
+        )
+        : (
+          <table className="table-thead-hidden">
+            <LibsMobileThead />
+            <tbody>
+              {tbodyContent}
+            </tbody>
+          </table>
+        )
+      }
     </div>
   );
 };
diff --git a/frontend/src/repo-folder-trash.js b/frontend/src/repo-folder-trash.js
index 3bbf90903e..245b9ec7e2 100644
--- a/frontend/src/repo-folder-trash.js
+++ b/frontend/src/repo-folder-trash.js
@@ -444,4 +444,3 @@ FolderItem.propTypes = {
 
 const root = createRoot(document.getElementById('wrapper'));
 root.render(<RepoFolderTrash />);
-