diff --git a/Changelog.md b/Changelog.md
index ba46f4fa2..b542e5343 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -9,6 +9,10 @@ every new version is a new major version.
 
 ## 197.0.0 - unreleased
 
+### Changed
+
+-   Improved shortcuts modal layout and look.
+
 ### Fixed
 
 -   Show log shortcut now works every time it is called.
diff --git a/package.json b/package.json
index 1a24367d6..44776b943 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@nordicsemiconductor/pc-nrfconnect-shared",
-    "version": "196.0.0",
+    "version": "197.0.0",
     "description": "Shared commodities for developing pc-nrfconnect-* packages",
     "repository": {
         "type": "git",
diff --git a/src/Shortcuts/Shortcut-item.scss b/src/Shortcuts/Shortcut-item.scss
index df1ca2bcd..e9a18a831 100644
--- a/src/Shortcuts/Shortcut-item.scss
+++ b/src/Shortcuts/Shortcut-item.scss
@@ -7,26 +7,46 @@
 @import '../variables.scss';
 
 .shortcut-item {
-    border-top: 1px solid $gray-100;
+    display: flex;
+    gap: 8px;
+
     padding-top: 20px;
+    margin-bottom: 6px;
     overflow: auto;
+
+    display: flex;
+    justify-content: space-between;
+
+    &:not(:first-of-type) {
+        border-top: 1px solid $gray-100;
+    }
+
+    &:first-of-type {
+        margin-top: 24px;
+    }
+
     .shortcut-title {
-        display: inline;
+        // display: inline;
+        padding-top: 4px;
+        // width: 140px;
     }
     .shortcuts {
         float: right;
         .shortcut-element {
-            display: 'block';
-            margin-bottom: 20px;
+            display: flex;
+            gap: 6px;
+            margin-bottom: 16px;
+
             .shortcut-span {
-                background-color: $gray-100;
-                padding: 8px;
-                border-radius: 5px;
-                box-shadow: 0 2px $gray-200;
+                text-transform: capitalize;
+                background-color: $gray-50;
+                padding: 4px 10px;
+                border-radius: 4px;
+                box-shadow: 0 2px $gray-100;
             }
             .separator-span {
                 background-color: $white;
-                padding: 8px;
+                padding: 4px 10px;
             }
         }
     }
diff --git a/src/Shortcuts/Shortcut-modal.scss b/src/Shortcuts/Shortcut-modal.scss
deleted file mode 100644
index 2f8009d97..000000000
--- a/src/Shortcuts/Shortcut-modal.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../variables.scss';
-
-.shortcut-modal {
-    color: $gray-900;
-    .list-header {
-        margin-bottom: 20px;
-    }
-    .shortcut-lists {
-        margin: 10px 20px;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        column-gap: 10ex;
-    }
-}
diff --git a/src/Shortcuts/ShortcutItem.tsx b/src/Shortcuts/ShortcutItem.tsx
index a09818b49..2f19ff0cc 100644
--- a/src/Shortcuts/ShortcutItem.tsx
+++ b/src/Shortcuts/ShortcutItem.tsx
@@ -32,10 +32,6 @@ const ShortcutItem: FC<Props> = ({ title, hotKey }) => {
                                 <span className="shortcut-span">
                                     {shortcutKey}
                                 </span>
-                                {shortcutKey !==
-                                    shortcutKeys[shortcutKeys.length - 1] && (
-                                    <span className="separator-span">+</span>
-                                )}
                             </span>
                         ))}
                     </div>
diff --git a/src/Shortcuts/ShortcutModal.tsx b/src/Shortcuts/ShortcutModal.tsx
index 46e07df9e..e90986b15 100644
--- a/src/Shortcuts/ShortcutModal.tsx
+++ b/src/Shortcuts/ShortcutModal.tsx
@@ -5,14 +5,12 @@
  */
 
 import React, { FC } from 'react';
-import Modal from 'react-bootstrap/Modal';
 import { useSelector } from 'react-redux';
 
 import { globalShortcuts, localShortcuts } from '../About/shortcutSlice';
+import { DialogButton, GenericDialog as Dialog } from '../Dialog/Dialog';
 import ShortcutItem from './ShortcutItem';
 
-import './Shortcut-modal.scss';
-
 export interface Props {
     isVisible: boolean;
     onCancel: () => void;
@@ -23,34 +21,19 @@ const ShortcutModal: FC<Props> = ({ isVisible, onCancel }) => {
     const global = useSelector(globalShortcuts);
 
     return (
-        <Modal
-            show={isVisible}
+        <Dialog
+            title="Shortcuts"
+            closeOnEsc
+            isVisible={isVisible}
             onHide={onCancel}
-            size="lg"
-            className="shortcut-modal"
+            size="m"
+            footer={<DialogButton onClick={onCancel}>Close</DialogButton>}
         >
-            <Modal.Header closeButton>
-                <Modal.Title>
-                    <h3>Shortcuts</h3>
-                </Modal.Title>
-            </Modal.Header>
-            <Modal.Body className="shortcut-lists">
-                <>
-                    {local.length > 0 && (
-                        <div>
-                            <h4 className="list-header">In this app</h4>
-                            {local.map(shortcut => (
-                                <ShortcutItem
-                                    key={shortcut.title}
-                                    title={shortcut.title}
-                                    hotKey={shortcut.hotKey}
-                                />
-                            ))}
-                        </div>
-                    )}
+            <>
+                {local.length > 0 && (
                     <div>
-                        <h4 className="list-header">In all apps</h4>
-                        {global.map(shortcut => (
+                        <h4 className="list-header">In this app</h4>
+                        {local.map(shortcut => (
                             <ShortcutItem
                                 key={shortcut.title}
                                 title={shortcut.title}
@@ -58,9 +41,19 @@ const ShortcutModal: FC<Props> = ({ isVisible, onCancel }) => {
                             />
                         ))}
                     </div>
-                </>
-            </Modal.Body>
-        </Modal>
+                )}
+                <div>
+                    <h4 className="list-header">In all apps</h4>
+                    {global.map(shortcut => (
+                        <ShortcutItem
+                            key={shortcut.title}
+                            title={shortcut.title}
+                            hotKey={shortcut.hotKey}
+                        />
+                    ))}
+                </div>
+            </>
+        </Dialog>
     );
 };