diff --git a/app/gabsocial/features/ui/components/hotkeys_modal.js b/app/gabsocial/features/ui/components/hotkeys_modal.js
index 2cd31b149..a3b54579e 100644
--- a/app/gabsocial/features/ui/components/hotkeys_modal.js
+++ b/app/gabsocial/features/ui/components/hotkeys_modal.js
@@ -21,148 +21,146 @@ class HotkeysModal extends ImmutablePureComponent {
 
     return (
       <div className='modal-root__modal hotkeys-modal'>
-        <div className='keyboard-shortcuts'>
-          <div className='keyboard-shortcuts__header'>
-            <h3 className='keyboard-shortcuts__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
-            <IconButton className='keyboard-shortcuts__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
-          </div>
-          <div className='keyboard-shortcuts__content'>
-            <table>
-              <thead>
-                <tr>
-                  <th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><kbd>r</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>m</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>p</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" /></td>
-                </tr>
-                <tr>
-                  <td><kbd>f</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to favorite' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>b</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>enter</kbd>, <kbd>o</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>x</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>h</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>up</kbd>, <kbd>k</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
-                </tr>
-              </tbody>
-            </table>
-            <table>
-              <thead>
-                <tr>
-                  <th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><kbd>down</kbd>, <kbd>j</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>1</kbd> - <kbd>9</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.column' defaultMessage='to focus a post in one of the columns' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>n</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>alt</kbd> + <kbd>n</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>backspace</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>s</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>esc</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>g</kbd> + <kbd>h</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>g</kbd> + <kbd>n</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>g</kbd> + <kbd>d</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.direct' defaultMessage='to open direct messages column' /></td>
-                </tr>
-              </tbody>
-            </table>
-            <table>
-              <thead>
-                <tr>
-                  <th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><kbd>g</kbd> + <kbd>s</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.start' defaultMessage='to open "get started" column' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>g</kbd> + <kbd>f</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open favorites list' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>g</kbd> + <kbd>p</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.pinned' defaultMessage='to open pinned posts list' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>g</kbd> + <kbd>u</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>g</kbd> + <kbd>b</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>g</kbd> + <kbd>m</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>g</kbd> + <kbd>r</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></td>
-                </tr>
-                <tr>
-                  <td><kbd>?</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+        <div className='compose-modal__header'>
+          <h3 className='compose-modal__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+        </div>
+        <div className='compose-modal__content'>
+          <table>
+            <thead>
+              <tr>
+                <th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><kbd>r</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></td>
+              </tr>
+              <tr>
+                <td><kbd>m</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></td>
+              </tr>
+              <tr>
+                <td><kbd>p</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" /></td>
+              </tr>
+              <tr>
+                <td><kbd>f</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to favorite' /></td>
+              </tr>
+              <tr>
+                <td><kbd>b</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></td>
+              </tr>
+              <tr>
+                <td><kbd>enter</kbd>, <kbd>o</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' /></td>
+              </tr>
+              <tr>
+                <td><kbd>x</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td>
+              </tr>
+              <tr>
+                <td><kbd>h</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td>
+              </tr>
+              <tr>
+                <td><kbd>up</kbd>, <kbd>k</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <thead>
+              <tr>
+                <th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><kbd>down</kbd>, <kbd>j</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td>
+              </tr>
+              <tr>
+                <td><kbd>1</kbd> - <kbd>9</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.column' defaultMessage='to focus a post in one of the columns' /></td>
+              </tr>
+              <tr>
+                <td><kbd>n</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></td>
+              </tr>
+              <tr>
+                <td><kbd>alt</kbd> + <kbd>n</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' /></td>
+              </tr>
+              <tr>
+                <td><kbd>backspace</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td>
+              </tr>
+              <tr>
+                <td><kbd>s</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td>
+              </tr>
+              <tr>
+                <td><kbd>esc</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd> + <kbd>h</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd> + <kbd>n</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd> + <kbd>d</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.direct' defaultMessage='to open direct messages column' /></td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <thead>
+              <tr>
+                <th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><kbd>g</kbd> + <kbd>s</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.start' defaultMessage='to open "get started" column' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd> + <kbd>f</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open favorites list' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd> + <kbd>p</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.pinned' defaultMessage='to open pinned posts list' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd> + <kbd>u</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd> + <kbd>b</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd> + <kbd>m</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd> + <kbd>r</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></td>
+              </tr>
+              <tr>
+                <td><kbd>?</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     );
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 053ee5075..a57193533 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -31,6 +31,7 @@
 @import 'gabsocial/components/group-form';
 @import 'gabsocial/components/group-sidebar-panel';
 @import 'gabsocial/components/sidebar-menu';
+@import 'gabsocial/components/hotkeys-modal';
 
 @import 'gabsocial/polls';
 @import 'gabsocial/introduction';
diff --git a/app/styles/gabsocial/components.scss b/app/styles/gabsocial/components.scss
index 08be5d371..8fcff25f7 100644
--- a/app/styles/gabsocial/components.scss
+++ b/app/styles/gabsocial/components.scss
@@ -2114,84 +2114,6 @@ a.account__display-name {
 	}
 }
 
-.keyboard-shortcuts {
-	padding: 8px 0 0;
-	overflow: hidden;
-	background-color: $classic-base-color;
-	border-radius: 6px;
-
-	@media screen and (max-width: 960px) {
-		height: 90vh;
-	}
-
-	&__header {
-		display: block;
-		position: relative;
-		border-bottom: 1px solid lighten($classic-base-color, 8%);
-		border-radius: 6px 6px 0 0;
-		padding-top: 12px;
-		padding-bottom: 12px;
-
-		&__title {
-			display: block;
-			width: 80%;
-			margin: 0 auto;
-			font-size: 18px;
-			font-weight: bold;
-			line-height: 24px;
-			color: $primary-text-color;
-			text-align: center;
-		}
-	}
-
-	&__close {
-	position: absolute;
-	right: 10px;
-	top: 10px;
-	}
-
-	&__content {
-		display: flex;
-		flex-direction: row;
-		padding: 15px;
-
-		@media screen and (max-width: 960px) {
-			flex-direction: column;
-			overflow: hidden;
-		overflow-y: scroll;
-		height: calc(100% - 80px);
-			-webkit-overflow-scrolling: touch;
-		}
-	}
-
-	table {
-		thead {
-			display: block;
-			padding-left: 10px;
-			margin-bottom: 10px;
-			color: $primary-text-color;
-			font-size: 16px;
-			font-weight: 600;
-		}
-
-		tr {
-			font-size: 12px;
-		}
-
-		td {
-			padding: 0 10px 8px;
-		}
-
-		kbd {
-			display: inline-block;
-			padding: 2px 8px;
-			background-color: lighten($ui-base-color, 8%);
-			border: 1px solid darken($ui-base-color, 4%);
-			border-radius: 4px;
-		}
-	}
-}
-
 .setting-text {
 	color: $darker-text-color;
 	background: transparent;
diff --git a/app/styles/gabsocial/components/hotkeys-modal.scss b/app/styles/gabsocial/components/hotkeys-modal.scss
new file mode 100644
index 000000000..fe3078fef
--- /dev/null
+++ b/app/styles/gabsocial/components/hotkeys-modal.scss
@@ -0,0 +1,51 @@
+.hotkeys-modal {
+  padding: 8px 0 0;
+  overflow: hidden;
+  background-color: $classic-base-color;
+  border-radius: 6px;
+  flex-direction: column;
+
+  @media screen and (max-width: 960px) {
+    height: 90vh;
+  }
+
+  .compose-modal__content {
+    background-color: $gab-background-base-light;
+    margin: 5px;
+
+    @media screen and (max-width: 960px) {
+      flex-direction: column;
+      overflow: hidden;
+      overflow-y: scroll;
+      height: calc(100% - 80px);
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  table {
+    thead {
+      display: block;
+      padding-left: 10px;
+      margin-bottom: 10px;
+      color: $primary-text-color;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    tr {
+      font-size: 12px;
+    }
+
+    td {
+      padding: 0 10px 8px;
+    }
+
+    kbd {
+      display: inline-block;
+      padding: 2px 8px;
+      background-color: lighten($ui-base-color, 8%);
+      border: 1px solid darken($ui-base-color, 4%);
+      border-radius: 4px;
+    }
+  }
+}