diff --git a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap
index f54577fdbf..6d30b132a9 100644
--- a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap
+++ b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap
@@ -328,14 +328,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
                   Messages
                 </strong>
               </h3>
-              <span>
-                <strong>
-                  Works inside an empty input field
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Works inside an empty input field
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   shortcut={
                     Object {
@@ -395,14 +395,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
                   }
                 />
               </div>
-              <span>
-                <strong>
-                  Autocomplete
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Autocomplete
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   shortcut={
                     Object {
@@ -428,14 +428,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
                   }
                 />
               </div>
-              <span>
-                <strong>
-                  Formatting
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Formatting
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   shortcut={
                     Object {
@@ -479,14 +479,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
                   }
                 />
               </div>
-              <span>
-                <strong>
-                  Searching
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Searching
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   shortcut={
                     Object {
@@ -502,6 +502,29 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
                   }
                 />
               </div>
+              <div
+                className="subsection"
+              >
+                <h4
+                  className="subsection-title"
+                >
+                  Files
+                </h4>
+                <Memo(KeyboardShortcutSequence)
+                  shortcut={
+                    Object {
+                      "default": Object {
+                        "defaultMessage": "Upload files:	Ctrl|U",
+                        "id": "shortcuts.files.upload",
+                      },
+                      "mac": Object {
+                        "defaultMessage": "Upload files:	⌘|U",
+                        "id": "shortcuts.files.upload.mac",
+                      },
+                    }
+                  }
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -511,29 +534,6 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
           <div
             className="section"
           >
-            <div>
-              <h3
-                className="section-title"
-              >
-                <strong>
-                  Files
-                </strong>
-              </h3>
-              <Memo(KeyboardShortcutSequence)
-                shortcut={
-                  Object {
-                    "default": Object {
-                      "defaultMessage": "Upload files:	Ctrl|U",
-                      "id": "shortcuts.files.upload",
-                    },
-                    "mac": Object {
-                      "defaultMessage": "Upload files:	⌘|U",
-                      "id": "shortcuts.files.upload.mac",
-                    },
-                  }
-                }
-              />
-            </div>
             <div
               className="section--lower"
             >
@@ -600,14 +600,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
                   }
                 }
               />
-              <span>
-                <strong>
-                  Works inside an input field
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Works inside an input field
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   shortcut={
                     Object {
@@ -975,14 +975,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
                   Messages
                 </strong>
               </h3>
-              <span>
-                <strong>
-                  Works inside an empty input field
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Works inside an empty input field
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   shortcut={
                     Object {
@@ -1042,14 +1042,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
                   }
                 />
               </div>
-              <span>
-                <strong>
-                  Autocomplete
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Autocomplete
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   shortcut={
                     Object {
@@ -1075,14 +1075,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
                   }
                 />
               </div>
-              <span>
-                <strong>
-                  Formatting
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Formatting
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   shortcut={
                     Object {
@@ -1126,14 +1126,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
                   }
                 />
               </div>
-              <span>
-                <strong>
-                  Searching
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Searching
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   shortcut={
                     Object {
@@ -1149,6 +1149,29 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
                   }
                 />
               </div>
+              <div
+                className="subsection"
+              >
+                <h4
+                  className="subsection-title"
+                >
+                  Files
+                </h4>
+                <Memo(KeyboardShortcutSequence)
+                  shortcut={
+                    Object {
+                      "default": Object {
+                        "defaultMessage": "Upload files:	Ctrl|U",
+                        "id": "shortcuts.files.upload",
+                      },
+                      "mac": Object {
+                        "defaultMessage": "Upload files:	⌘|U",
+                        "id": "shortcuts.files.upload.mac",
+                      },
+                    }
+                  }
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -1158,29 +1181,6 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
           <div
             className="section"
           >
-            <div>
-              <h3
-                className="section-title"
-              >
-                <strong>
-                  Files
-                </strong>
-              </h3>
-              <Memo(KeyboardShortcutSequence)
-                shortcut={
-                  Object {
-                    "default": Object {
-                      "defaultMessage": "Upload files:	Ctrl|U",
-                      "id": "shortcuts.files.upload",
-                    },
-                    "mac": Object {
-                      "defaultMessage": "Upload files:	⌘|U",
-                      "id": "shortcuts.files.upload.mac",
-                    },
-                  }
-                }
-              />
-            </div>
             <div
               className="section--lower"
             >
@@ -1247,14 +1247,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
                   }
                 }
               />
-              <span>
-                <strong>
-                  Works inside an input field
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Works inside an input field
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   shortcut={
                     Object {
@@ -1282,14 +1282,6 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
               </div>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        className="row"
-      >
-        <div
-          className="col-sm-4"
-        >
           <div
             className="section"
           >
@@ -1301,14 +1293,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
                   Calls
                 </strong>
               </h3>
-              <span>
-                <strong>
-                  Global
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Global
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   key="callsJoinCall"
                   shortcut={
@@ -1325,14 +1317,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
                   }
                 />
               </div>
-              <span>
-                <strong>
-                  Call widget
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Call widget
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   key="callsMuteToggle"
                   shortcut={
@@ -1409,14 +1401,14 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
                   }
                 />
               </div>
-              <span>
-                <strong>
-                  Expanded view (pop-out window)
-                </strong>
-              </span>
               <div
                 className="subsection"
               >
+                <h4
+                  className="subsection-title"
+                >
+                  Expanded view (pop-out window)
+                </h4>
                 <Memo(KeyboardShortcutSequence)
                   key="callsPushToTalk"
                   shortcut={
diff --git a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss
index 7e43d553d8..6051b6b265 100644
--- a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss
+++ b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss
@@ -5,10 +5,24 @@
         width: 1100px;
         margin-top: 50px;
 
+        .col-sm-4 {
+            padding-right: 20px;
+            padding-left: 20px;
+        }
+
         .modal-header {
             .shortcut-line {
+                display: flex;
+                align-items: center;
                 margin: 0;
 
+                .shortcut-key {
+                    height: fit-content;
+                    flex: 0 0 auto;
+                    background: rgba(var(--center-channel-color-rgb), 0.08);
+                    color: rgba(var(--center-channel-color-rgb), 0.75);
+                }
+
                 span {
                     &:first-child {
                         margin-right: 12px;
@@ -19,35 +33,44 @@
 
         .modal-body {
             max-height: calc(100vh - 200px);
-            padding: 40px 48px;
+            padding: 32px 28px;
         }
 
         .section {
-            >div {
-                &:first-child {
-                    margin-bottom: 2.5em;
-                }
-            }
-
+            margin-bottom: 32px;
             .shortcut-line {
                 display: flex;
+                padding: 10px 0;
+                border-bottom: var(--border-light);
+                gap: 4px;
+
+                .shortcut-key {
+                    height: fit-content;
+                    flex: 0 0 auto;
+                    background: rgba(var(--center-channel-color-rgb), 0.08);
+                    color: rgba(var(--center-channel-color-rgb), 0.75);
+                }
 
                 span {
-                    &:first-child {
-                        margin-right: 5px;
-                    }
+                    flex-grow: 1;
                 }
             }
         }
 
         .section-title {
-            margin: 0 0 24px;
+            margin: 0 0 12px;
             font-size: 18px;
         }
 
         .subsection {
-            padding-left: 15px;
-            border-left: 2px solid;
+            margin: 12px 0 0 0;
+
+            &-title {
+                padding-top: 8px;
+                font-size: inherit;
+                font-weight: 600;
+                line-height: inherit;
+            }
         }
 
         .info__label {
diff --git a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx
index 48eae2a0cf..ecde1d8fa0 100644
--- a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx
+++ b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx
@@ -163,82 +163,75 @@ const KeyboardShortcutsModal = ({onExited}: Props): JSX.Element => {
                             <div className='section'>
                                 <div>
                                     <h3 className='section-title'><strong>{formatMessage(modalMessages.msgHeader)}</strong></h3>
-                                    <span><strong>{formatMessage(modalMessages.msgInputHeader)}</strong></span>
                                     <div className='subsection'>
+                                        <h4 className='subsection-title'>{formatMessage(modalMessages.msgInputHeader)}</h4>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgEdit}/>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgReply}/>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgLastReaction}/>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgReprintPrev}/>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgReprintNext}/>
                                     </div>
-                                    <span><strong>{formatMessage(modalMessages.msgCompHeader)}</strong></span>
                                     <div className='subsection'>
+                                        <h4 className='subsection-title'>{formatMessage(modalMessages.msgCompHeader)}</h4>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgCompUsername}/>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgCompChannel}/>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgCompEmoji}/>
                                     </div>
-                                    <span><strong>{formatMessage(modalMessages.msgMarkdownHeader)}</strong></span>
                                     <div className='subsection'>
+                                        <h4 className='subsection-title'>{formatMessage(modalMessages.msgMarkdownHeader)}</h4>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgMarkdownBold}/>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgMarkdownItalic}/>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgMarkdownLink}/>
                                     </div>
-                                    <span><strong>{formatMessage(modalMessages.msgSearchHeader)}</strong></span>
                                     <div className='subsection'>
+                                        <h4 className='subsection-title'>{formatMessage(modalMessages.msgSearchHeader)}</h4>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.msgSearchChannel}/>
                                     </div>
+                                    <div className='subsection'>
+                                        <h4 className='subsection-title'>{formatMessage(modalMessages.filesHeader)}</h4>
+                                        <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.filesUpload}/>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                         <div className='col-sm-4'>
                             <div className='section'>
-                                <div>
-                                    <h3 className='section-title'><strong>{formatMessage(modalMessages.filesHeader)}</strong></h3>
-                                    <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.filesUpload}/>
-                                </div>
                                 <div className='section--lower'>
                                     <h3 className='section-title'><strong>{formatMessage(modalMessages.browserHeader)}</strong></h3>
                                     <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserChannelPrev}/>
                                     <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserChannelNext}/>
                                     <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserFontIncrease}/>
                                     <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserFontDecrease}/>
-                                    <span><strong>{formatMessage(modalMessages.browserInputHeader)}</strong></span>
                                     <div className='subsection'>
+                                        <h4 className='subsection-title'>{formatMessage(modalMessages.browserInputHeader)}</h4>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserHighlightPrev}/>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserHighlightNext}/>
                                         <KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.browserNewline}/>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-
-                    </div>
-                    { callsEnabled &&
-                    <div className='row'>
-                        <div className='col-sm-4'>
+                            { callsEnabled &&
                             <div className='section'>
                                 <div>
                                     <h3 className='section-title'><strong>{formatMessage(modalMessages.callsHeader)}</strong></h3>
-
-                                    <span><strong>{formatMessage(modalMessages.callsGlobalHeader)}</strong></span>
                                     <div className='subsection'>
+                                        <h4 className='subsection-title'>{formatMessage(modalMessages.callsGlobalHeader)}</h4>
                                         {renderShortcutSequences(KEYBOARD_SHORTCUTS.calls.global)}
                                     </div>
 
-                                    <span><strong>{formatMessage(modalMessages.callsWidgetHeader)}</strong></span>
                                     <div className='subsection'>
+                                        <h4 className='subsection-title'>{formatMessage(modalMessages.callsWidgetHeader)}</h4>
                                         {renderShortcutSequences(KEYBOARD_SHORTCUTS.calls.widget)}
                                     </div>
-
-                                    <span><strong>{formatMessage(modalMessages.callsExpandedHeader)}</strong></span>
                                     <div className='subsection'>
+                                        <h4 className='subsection-title'>{formatMessage(modalMessages.callsExpandedHeader)}</h4>
                                         {renderShortcutSequences(KEYBOARD_SHORTCUTS.calls.popout)}
                                     </div>
                                 </div>
                             </div>
+                            }
                         </div>
                     </div>
-                    }
                     <div className='info__label'>{formatMessage(modalMessages.info)}</div>
                 </Modal.Body>
             </div>
diff --git a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss
index e3532fe399..66b540284b 100644
--- a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss
+++ b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_sequence/keyboard_shortcuts_sequence.scss
@@ -2,8 +2,6 @@
 // See LICENSE.txt for license information.
 
 .shortcut-line {
-    margin: 16px 0;
-
     span {
         &:first-child {
             margin-right: 5px;