diff --git a/frontend/src/components/dirent-list-view/dirent-none-view.js b/frontend/src/components/dirent-list-view/dirent-none-view.js
index 42601ae907..241e1485c6 100644
--- a/frontend/src/components/dirent-list-view/dirent-none-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-none-view.js
@@ -5,7 +5,7 @@ import Loading from '../loading';
 import ModalPortal from '../modal-portal';
 import CreateFile from '../../components/dialog/create-file-dialog';
 
-import '../../css/tip-for-new-md.css';
+import '../../css/tip-for-new-file.css';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -53,23 +53,18 @@ class DirentNodeView extends React.Component {
 
     return (
       <Fragment>
-        <div className="tip-for-new-file">
-          <p className="text-center">{gettext('This folder has no content at this time.')}</p>
-          <p className="text-center">{gettext('You can create files quickly')}{' +'}</p>
-          <div className="big-new-file-button-group">
-            <div className="d-flex justify-content-center">
-              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.md')}>
-                {'+ Markdown'}</button>
-              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.pptx')}>
-                {'+ PPT'}</button>
-            </div>
-            <div className="d-flex justify-content-center">
-              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.docx')}>
-                {'+ Word'}</button>
-              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.xlsx')}>
-                {'+ Excel'}</button>
-            </div>
-          </div>
+        <div className="tip-for-new-file text-center">
+          <p className="text-secondary">{gettext('This folder has no content at this time.')}</p>
+          <p className="text-secondary">{gettext('You can create files quickly')}{' +'}</p>
+          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.md')}>
+            {'+ Markdown'}</button>
+          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.pptx')}>
+            {'+ PPT'}</button>
+          <br />
+          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.docx')}>
+            {'+ Word'}</button>
+          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.xlsx')}>
+            {'+ Excel'}</button>
         </div>
         {this.state.isCreateFileDialogShow && (
           <ModalPortal>
diff --git a/frontend/src/css/tip-for-new-md.css b/frontend/src/css/tip-for-new-file.css
similarity index 64%
rename from frontend/src/css/tip-for-new-md.css
rename to frontend/src/css/tip-for-new-file.css
index 758eb0fe98..5ee370ad9d 100644
--- a/frontend/src/css/tip-for-new-md.css
+++ b/frontend/src/css/tip-for-new-file.css
@@ -1,23 +1,24 @@
 .tip-for-new-file {
   margin: 0 auto;
-  padding: 5em 8em; 
+  padding: 2em 1em;
   align-self: flex-start; /* for repo wiki mode */
 }
+@media (min-width: 768px) {
+  .tip-for-new-file {
+    padding: 5em 8em;
+  }
+}
 .big-new-file-button {
   padding: .9em 2em 1em; 
   border-radius: 8px; 
-  margin: 0 1.5em 1.5em 0;
+  margin: 0 0.75em 1.5em;
   cursor: pointer;
   width: 160px;
+  background: #fff;
+  border: 1px solid #d1d1d1;
 }
 .big-new-file-button:hover,
 .big-new-file-button:focus {
   border-color: #eb9205;
   color: #eb8205;
 }
-.tip-for-new-file p {
-  color: #c4c4c4;
-}
-.big-new-file-button-group {
-  margin: 0 auto;
-}
\ No newline at end of file