diff --git a/src/assets/floating-button.svg b/src/assets/floating-button.svg
new file mode 100644
index 00000000..6a9ad117
--- /dev/null
+++ b/src/assets/floating-button.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 84 62">
+  <rect width="64" height="48" x="18" y="2" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
+  <rect width="32" height="48" x="2" y="12" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
+  <path fill="#4169E1" d="M14 52a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm64-42a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/multi-column.svg b/src/assets/multi-column.svg
new file mode 100644
index 00000000..5e8deff7
--- /dev/null
+++ b/src/assets/multi-column.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 82 62">
+  <rect width="78" height="58" x="2" y="2" fill="#999" fill-opacity=".3" stroke="#999" stroke-width="3" rx="4"/>
+  <rect width="18" height="46" x="8" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
+  <rect width="18" height="46" x="32" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
+  <rect width="18" height="46" x="56" y="8" fill="#fff" stroke="#999" stroke-width="2" rx="1"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/tab-menu-bar.svg b/src/assets/tab-menu-bar.svg
new file mode 100644
index 00000000..64b48b03
--- /dev/null
+++ b/src/assets/tab-menu-bar.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 84 62">
+  <rect width="64" height="48" x="18" y="2" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
+  <path fill="#999" fill-opacity=".3" d="M19 3h62v10H19z"/>
+  <path stroke="#4169E1" stroke-width="2" d="M43 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
+  <path stroke="#999" stroke-width="2" d="M52 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm9 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
+  <rect width="32" height="48" x="2" y="12" fill="#fff" stroke="#999" stroke-width="3" rx="4"/>
+  <path fill="#999" fill-opacity=".3" d="M3 49h30v10H3z"/>
+  <path stroke="#4169E1" stroke-width="2" d="M11 54a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
+  <path stroke="#999" stroke-width="2" d="M20 54a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm9 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/shortcuts-settings.css b/src/components/shortcuts-settings.css
index 0758f967..7cd8e494 100644
--- a/src/components/shortcuts-settings.css
+++ b/src/components/shortcuts-settings.css
@@ -33,7 +33,55 @@
 #shortcuts-settings-container .shortcuts-view-mode {
   display: flex;
   align-items: center;
+  gap: 2px;
+  margin: 8px 0 0;
+}
+#shortcuts-settings-container .shortcuts-view-mode label {
+  border-radius: 4px;
+  background-color: var(--bg-faded-color);
+  padding: 16px;
+  text-align: center;
+  cursor: pointer;
+  display: block;
+  flex-grow: 1;
+  display: flex;
   gap: 8px;
+  flex-direction: column;
+  align-items: center;
+}
+#shortcuts-settings-container .shortcuts-view-mode label:first-child {
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
+}
+#shortcuts-settings-container .shortcuts-view-mode label:last-child {
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+#shortcuts-settings-container .shortcuts-view-mode label img {
+  max-height: 64px;
+}
+#shortcuts-settings-container .shortcuts-view-mode label span {
+  text-align: center;
+  font-size: 80%;
+}
+#shortcuts-settings-container .shortcuts-view-mode label input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+#shortcuts-settings-container .shortcuts-view-mode label input ~ * {
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+#shortcuts-settings-container .shortcuts-view-mode label:has(input:checked) {
+  box-shadow: inset 0 0 0 3px var(--link-color);
+}
+#shortcuts-settings-container
+  .shortcuts-view-mode
+  label
+  input:is(:hover, :active, :checked)
+  ~ * {
+  opacity: 1;
 }
 
 #shortcuts-settings-container summary {
diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index ecf39c3d..77bdbf0b 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -4,6 +4,9 @@ import mem from 'mem';
 import { useEffect, useState } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
 
+import floatingButtonUrl from '../assets/floating-button.svg';
+import multiColumnUrl from '../assets/multi-column.svg';
+import tabMenuBarUrl from '../assets/tab-menu-bar.svg';
 import { api } from '../utils/api';
 import states from '../utils/states';
 
@@ -208,9 +211,40 @@ function ShortcutsSettings() {
       </header>
       <main>
         <p>
-          <label class="shortcuts-view-mode">
-            Specify a list of shortcuts that'll appear&nbsp;as:
-            <select
+          Specify a list of shortcuts that'll appear&nbsp;as:
+          <div class="shortcuts-view-mode">
+            {[
+              {
+                value: 'float-button',
+                label: 'Floating button',
+                imgURL: floatingButtonUrl,
+              },
+              {
+                value: 'tab-menu-bar',
+                label: 'Tab/Menu bar',
+                imgURL: tabMenuBarUrl,
+              },
+              {
+                value: 'multi-column',
+                label: 'Multi-column',
+                imgURL: multiColumnUrl,
+              },
+            ].map(({ value, label, imgURL }) => (
+              <label>
+                <input
+                  type="radio"
+                  name="shortcuts-view-mode"
+                  value={value}
+                  checked={snapStates.settings.shortcutsViewMode === value}
+                  onChange={(e) => {
+                    states.settings.shortcutsViewMode = e.target.value;
+                  }}
+                />{' '}
+                <img src={imgURL} alt="" /> <span>{label}</span>
+              </label>
+            ))}
+          </div>
+          {/* <select
               value={snapStates.settings.shortcutsViewMode || 'float-button'}
               onChange={(e) => {
                 states.settings.shortcutsViewMode = e.target.value;
@@ -219,8 +253,7 @@ function ShortcutsSettings() {
               <option value="float-button">Floating button</option>
               <option value="multi-column">Multi-column</option>
               <option value="tab-menu-bar">Tab/Menu bar </option>
-            </select>
-          </label>
+            </select> */}
         </p>
         {/* <p>
           <details>