diff --git a/frontend/src/components/dialog/select-dirent-body.js b/frontend/src/components/dialog/select-dirent-body.js
index 74ac02ece6..869ecca6db 100644
--- a/frontend/src/components/dialog/select-dirent-body.js
+++ b/frontend/src/components/dialog/select-dirent-body.js
@@ -251,13 +251,15 @@ class SelectDirentBody extends React.Component {
                 autoFocus
               />
             ) : (
-              <div className='footer-left-btns'
+              <Button
+                className="footer-left-btns"
+                color="secondary"
                 onClick={this.onShowNewFolderInput}
-                style={{ display: mode === MODE_TYPE_MAP.SEARCH_RESULTS ? 'none' : 'block' }}
+                disabled={mode === MODE_TYPE_MAP.SEARCH_RESULTS}
               >
                 <i className='sf3-font-new sf3-font mr-2'></i>
                 <span>{gettext('New folder')}</span>
-              </div>
+              </Button>
             )}
             <div className='footer-right-btns'>
               <Button color="secondary m-1" onClick={this.onCancel}>{gettext('Cancel')}</Button>
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index 425ef6500b..6884ed8424 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -450,10 +450,15 @@
   justify-content: center;
   align-items: center;
   padding: 6px 12px;
+  border: 0;
   cursor: pointer;
 }
 
-.custom-modal .modal-footer .footer-left-btns:hover {
+.custom-modal .modal-footer .footer-left-btns.disabled {
+  cursor: not-allowed;
+}
+
+.custom-modal .modal-footer .footer-left-btns:not(.disabled):hover {
   background-color: #f0f0f0;
   border-radius: 3px;
 }