diff --git a/src/components/PreferencesModal/KeymapTab.tsx b/src/components/PreferencesModal/KeymapTab.tsx
index 664b1b8e32..5708fd2393 100644
--- a/src/components/PreferencesModal/KeymapTab.tsx
+++ b/src/components/PreferencesModal/KeymapTab.tsx
@@ -33,7 +33,9 @@ const KeymapTab = () => {
       <KeymapHeaderSection>
         <SectionHeader>{t('preferences.keymap')}</SectionHeader>
         <SectionResetKeymap>
-          <ButtonContainer onClick={() => resetKeymap()}>Reset</ButtonContainer>
+          <KeymapItemButton onClick={() => resetKeymap()}>
+            Restore
+          </KeymapItemButton>
         </SectionResetKeymap>
       </KeymapHeaderSection>
       <KeymapItemList>
@@ -71,8 +73,9 @@ const SectionResetKeymap = styled.div`
   align-self: center;
 `
 
-export const ButtonContainer = styled.button`
-  width: 92px;
+export const KeymapItemButton = styled.button`
+  min-width: 88px;
+  max-width: 120px;
   height: 32px;
   font-size: 15px;
   display: flex;
@@ -81,29 +84,19 @@ export const ButtonContainer = styled.button`
 
   cursor: pointer;
 
-  background: #214953;
-  border: 1px solid #214953;
+  background-color: ${({ theme }) => theme.primaryButtonBackgroundColor};
+  border: 1px solid ${({ theme }) => theme.borderColor};
   border-radius: 4px;
 
   transition: color 200ms ease-in-out;
-  color: ${({ theme }) => theme.navButtonColor};
-  &:hover {
-    color: ${({ theme }) => theme.navButtonHoverColor};
-  }
+  color: ${({ theme }) => theme.primaryButtonLabelColor};
 
-  &:active,
-  &.active {
-    color: ${({ theme }) => theme.navButtonActiveColor};
-  }
+  text-align: center;
+  padding: 5px;
 
-  &.disabled,
-  &:disabled {
-    color: ${({ theme }) => theme.disabledUiTextColor};
-    background: #12292e;
-    border: 1px solid #214953;
-    border-radius: 4px;
-    width: 88px;
-    height: 32px;
+  &:hover {
+    border-color: ${({ theme }) => theme.borderColor};
+    background: ${({ theme }) => theme.primaryButtonHoverBackgroundColor};
   }
 `
 
diff --git a/src/components/atoms/KeymapItemSection.tsx b/src/components/atoms/KeymapItemSection.tsx
index 75db2f6c7a..1a89786816 100644
--- a/src/components/atoms/KeymapItemSection.tsx
+++ b/src/components/atoms/KeymapItemSection.tsx
@@ -13,7 +13,7 @@ import {
 import { inputStyle } from '../../lib/styled/styleFunctions'
 import cc from 'classcat'
 import { useToast } from '../../lib/toast'
-import { ButtonContainer } from '../PreferencesModal/KeymapTab'
+import { KeymapItemButton } from '../PreferencesModal/KeymapTab'
 
 const invalidShortcutInputs = [' ']
 const rejectedShortcutInputs = [' ', 'control', 'alt', 'shift']
@@ -131,14 +131,17 @@ const KeymapItemSection = ({
   }, [keymapKey, removeKeymap])
 
   const shortcutString = useMemo(() => {
-    return currentShortcut != null
-      ? getGenericShortcutString(currentShortcut)
+    return currentShortcut != null && currentKeymapItem != null
+      ? getGenericShortcutString(currentKeymapItem)
       : ''
-  }, [currentShortcut])
+  }, [currentKeymapItem, currentShortcut])
   return (
     <KeymapItemSectionContainer>
       <div>{description}</div>
       <KeymapItemInputSection>
+        {currentShortcut != null && currentKeymapItem != null && (
+          <ShortcutItemStyle>{shortcutString}</ShortcutItemStyle>
+        )}
         {changingShortcut && (
           <StyledInput
             className={cc([inputError && 'error'])}
@@ -149,42 +152,30 @@ const KeymapItemSection = ({
             onKeyDown={fetchInputShortcuts}
           />
         )}
-
-        <InputKeymapChooser onClick={toggleChangingShortcut}>
+        <KeymapItemButton onClick={toggleChangingShortcut}>
           {currentShortcut == null
             ? 'Assign'
             : changingShortcut
             ? 'Apply'
-            : shortcutString}
-        </InputKeymapChooser>
+            : 'Change'}
+        </KeymapItemButton>
         {changingShortcut && (
-          <ButtonContainer onClick={handleCancelKeymapChange}>
+          <KeymapItemButton onClick={handleCancelKeymapChange}>
             Cancel
-          </ButtonContainer>
+          </KeymapItemButton>
         )}
 
         {currentShortcut != null && !changingShortcut && (
-          <ButtonContainer onClick={handleRemoveKeymap}>
+          <KeymapItemButton onClick={handleRemoveKeymap}>
             Un-assign
-          </ButtonContainer>
+          </KeymapItemButton>
         )}
       </KeymapItemInputSection>
     </KeymapItemSectionContainer>
   )
 }
 
-const StyledInput = styled.input`
-  ${inputStyle};
-  max-width: 120px;
-  min-width: 110px;
-  height: 1.3em;
-
-  &.error {
-    border: 1px solid red;
-  }
-`
-
-const InputKeymapChooser = styled.button`
+const ShortcutItemStyle = styled.div`
   min-width: 88px;
   max-width: 120px;
   height: 32px;
@@ -193,20 +184,20 @@ const InputKeymapChooser = styled.button`
   align-items: center;
   justify-content: center;
 
-  cursor: pointer;
-
-  background: #214953;
-  border: 1px solid #214953;
+  background-color: ${({ theme }) => theme.primaryButtonBackgroundColor};
+  color: ${({ theme }) => theme.primaryButtonLabelColor};
+  border: 1px solid ${({ theme }) => theme.borderColor};
   border-radius: 4px;
+`
 
-  transition: color 200ms ease-in-out;
-  color: ${({ theme }) => theme.navButtonColor};
-
-  text-align: center;
-  padding: 5px;
+const StyledInput = styled.input`
+  ${inputStyle};
+  max-width: 120px;
+  min-width: 110px;
+  height: 1.3em;
 
-  &:hover {
-    background: #2a5c69;
+  &.error {
+    border: 1px solid red;
   }
 `
 
diff --git a/src/lib/preferences.ts b/src/lib/preferences.ts
index 5155c4744b..03713b05f8 100644
--- a/src/lib/preferences.ts
+++ b/src/lib/preferences.ts
@@ -340,7 +340,24 @@ function usePreferencesStore() {
         ])
       }
     }
-  }, [mergedPreferences])
+
+    // add new keymaps to preferences if weren't available before
+    let addedKeymap = false
+    for (const [key, keymapItem] of defaultKeymap) {
+      if (!keymap.has(key)) {
+        keymap.set(key, keymapItem)
+        addedKeymap = true
+      }
+    }
+    if (addedKeymap) {
+      setPreferences((preferences) => {
+        return {
+          ...preferences,
+          'general.keymap': keymap,
+        }
+      })
+    }
+  }, [mergedPreferences, setPreferences])
 
   const resetKeymap = useCallback(() => {
     keymap.clear()
@@ -356,9 +373,9 @@ function usePreferencesStore() {
   }, [keymap, setPreferences])
 
   useEffect(() => {
-    savePreferences(preferences)
     loadKeymaps()
-  }, [loadKeymaps, preferences])
+    savePreferences(preferences)
+  }, [loadKeymaps, mergedPreferences, preferences, resetKeymap])
 
   return {
     tab,