diff --git a/package.json b/package.json
index f3634502..bf2ac914 100644
--- a/package.json
+++ b/package.json
@@ -28,13 +28,13 @@
     "weather-icons-react": "1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/eslint-parser": "^7.15.0",
+    "@babel/core": "^7.15.5",
+    "@babel/eslint-parser": "^7.15.4",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-transform-react-constant-elements": "^7.14.5",
     "@babel/plugin-transform-react-inline-elements": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-env": "^7.15.4",
     "@babel/preset-react": "^7.14.5",
     "@eartharoid/deep-merge": "^0.0.1",
     "babel-loader": "^8.2.2",
@@ -44,13 +44,13 @@
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "html-webpack-plugin": "^5.3.2",
-    "mini-css-extract-plugin": "^2.2.0",
-    "sass": "^1.38.0",
+    "mini-css-extract-plugin": "^2.2.2",
+    "sass": "^1.39.0",
     "sass-loader": "^12.1.0",
     "source-map-loader": "^3.0.0",
-    "webpack": "^5.51.1",
+    "webpack": "^5.51.0",
     "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.0.0"
+    "webpack-dev-server": "^4.1.0"
   },
   "scripts": {
     "start": "webpack serve",
diff --git a/src/components/modals/main/settings/KeybindInput.jsx b/src/components/modals/main/settings/KeybindInput.jsx
new file mode 100644
index 00000000..0ced3175
--- /dev/null
+++ b/src/components/modals/main/settings/KeybindInput.jsx
@@ -0,0 +1,22 @@
+export default function KeybindInput(props) {
+  const language = window.language.modals.main.settings;
+
+  const getButton = () => {
+    const value = props.state[props.settingsName];
+    if (!value) {
+      return null;
+    } else if (value === language.sections.keybinds.recording) {
+      return <span className='modalLink' onClick={() => props.cancel(props.settingsName)}>{language.sections.advanced.reset_modal.cancel}</span>
+    } else {
+      return <span className='modalLink' onClick={() => props.reset(props.settingsName)}>{language.buttons.reset}</span>;
+    }
+  }
+
+  return (
+    <>
+      <p>{props.name}</p>
+      <input type='text' onClick={() => props.set(props.settingsName)} value={props.state[props.settingsName] || language.sections.keybinds.click_to_record} readOnly/>
+      {getButton()}
+    </>
+  );
+}
diff --git a/src/components/modals/main/settings/sections/Keybinds.jsx b/src/components/modals/main/settings/sections/Keybinds.jsx
index 16334d24..e9f08d86 100644
--- a/src/components/modals/main/settings/sections/Keybinds.jsx
+++ b/src/components/modals/main/settings/sections/Keybinds.jsx
@@ -1,6 +1,7 @@
 import { PureComponent } from 'react';
 
-import Checkbox from '../Checkbox';
+import Switch from '../Switch';
+import KeybindInput from '../KeybindInput';
 
 export default class KeybindSettings extends PureComponent {
   constructor() {
@@ -25,7 +26,7 @@ export default class KeybindSettings extends PureComponent {
     this.forceUpdate();
 
     let keys = '';
-    const keydown = document.addEventListener('keydown', (event) => {
+    this.keydown = document.addEventListener('keydown', (event) => {
       if (keys === '') {
         keys = event.key;
       } else {
@@ -33,8 +34,8 @@ export default class KeybindSettings extends PureComponent {
       }
     });
 
-    const keyup = document.addEventListener('keyup', () => {
-      document.removeEventListener('keydown', keydown);
+    this.keyup = document.addEventListener('keyup', () => {
+      document.removeEventListener('keydown', this.keydown);
       const keybinds = this.state.keybinds;
       keybinds[type] = keys;
       localStorage.setItem('keybinds', JSON.stringify(keybinds));
@@ -43,11 +44,22 @@ export default class KeybindSettings extends PureComponent {
       });
     });
 
-    document.removeEventListener('keyup', keyup);
+    document.removeEventListener('keyup', this.keyup);
 
     this.showReminder();
   }
 
+  cancel(type) {
+    document.removeEventListener('keydown', this.keydown);
+    document.removeEventListener('keyup', this.keyup);
+    const currentKeybinds = this.state.keybinds;
+    delete currentKeybinds[type];
+    this.setState({
+      keybinds: currentKeybinds
+    });
+    this.forceUpdate();
+  }
+
   reset(type) {
     const keybinds = this.state.keybinds;
     keybinds[type] = '';
@@ -65,67 +77,19 @@ export default class KeybindSettings extends PureComponent {
     return (
       <>
         <h2>{keybinds.title}</h2>
-        <Checkbox name='keybindsEnabled' text={this.language.enabled} element='.other' />
-        <div>
-          <p>{keybinds.background.favourite}</p>
-          <input type='text' onClick={() => this.listen('favouriteBackground')} value={this.state.keybinds['favouriteBackground'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('favouriteBackground')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.background.maximise}</p>
-          <input type='text' onClick={() => this.listen('maximiseBackground')} value={this.state.keybinds['maximiseBackground'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('maximiseBackground')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.background.download}</p>
-          <input type='text' onClick={() => this.listen('downloadBackground')} value={this.state.keybinds['downloadBackground'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('downloadBackground')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.background.show_info}</p>
-          <input type='text' onClick={() => this.listen('showBackgroundInformation')} value={this.state.keybinds['showBackgroundInformation'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('showBackgroundInformation')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.quote.favourite}</p>
-          <input type='text' onClick={() => this.listen('favouriteQuote')} value={this.state.keybinds['favouriteQuote'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('favouriteQuote')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.quote.copy}</p>
-          <input type='text' onClick={() => this.listen('copyQuote')} value={this.state.keybinds['copyQuote'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('copyQuote')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.quote.tweet}</p>
-          <input type='text' onClick={() => this.listen('tweetQuote')} value={this.state.keybinds['tweetQuote'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('tweetQuote')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.notes.pin}</p>
-          <input type='text' onClick={() => this.listen('pinNotes')} value={this.state.keybinds['pinNotes'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('pinNotes')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.notes.copy}</p>
-          <input type='text' onClick={() => this.listen('copyNotes')} value={this.state.keybinds['copyNotes'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('copyNotes')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.search}</p>
-          <input type='text' onClick={() => this.listen('focusSearch')} value={this.state.keybinds['focusSearch'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('focusSearch')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.quicklinks}</p>
-          <input type='text' onClick={() => this.listen('toggleQuicklinks')} value={this.state.keybinds['toggleQuicklinks'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('toggleQuicklinks')}>{this.language.buttons.reset}</span>
-        </div>
-        <div>
-          <p>{keybinds.modal}</p>
-          <input type='text' onClick={() => this.listen('toggleModal')} value={this.state.keybinds['toggleModal'] || ''} readOnly/>
-          <span className='modalLink' onClick={() => this.reset('toggleModal')}>{this.language.buttons.reset}</span>
-        </div>
+        <Switch name='keybindsEnabled' text={this.language.enabled} element='.other' />
+        <KeybindInput name={keybinds.background.favourite} state={this.state.keybinds} settingsName='favouriteBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.background.maximise} state={this.state.keybinds} settingsName='maximiseBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.background.download} state={this.state.keybinds} settingsName='downloadBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.background.show_info} state={this.state.keybinds} settingsName='showBackgroundInformation' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.quote.favourite} state={this.state.keybinds} settingsName='favouriteQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.quote.copy} state={this.state.keybinds} settingsName='copyQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.quote.tweet} state={this.state.keybinds} settingsName='tweetQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.notes.pin} state={this.state.keybinds} settingsName='pinNotes' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.notes.copy} state={this.state.keybinds} settingsName='copyNotes' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.search} state={this.state.keybinds} settingsName='focusSearch' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.quicklinks} state={this.state.keybinds} settingsName='toggleQuicklinks' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={keybinds.modal} state={this.state.keybinds} settingsName='toggleModal' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
       </>
     );
   }
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index 5bcc8199..1d0146f2 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -10,7 +10,7 @@ export default class Notes extends PureComponent {
     this.state = {
       notes: localStorage.getItem('notes') || '',
       visibility: (localStorage.getItem('notesPinned') === 'true') ? 'visible' : 'hidden',
-      marginLeft: (localStorage.getItem('refresh') === 'false') ? '-200px' : '0px'
+      marginLeft: (localStorage.getItem('refresh') === 'false') ? '-200px' : '-150px'
     };
     this.language = window.language.widgets.navbar.notes;
   }
diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss
index d0960fd5..1af2b1e0 100644
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -59,7 +59,7 @@
     cursor: pointer;
 
     &:hover {
-      color: rgb(211, 211, 211);
+      color: rgb(214, 214, 214);
     }
   }
 }
diff --git a/src/translations/de_DE.json b/src/translations/de_DE.json
index 630175cf..1d152121 100644
--- a/src/translations/de_DE.json
+++ b/src/translations/de_DE.json
@@ -314,6 +314,7 @@
           "keybinds": {
             "title": "Keybinds",
             "recording": "Recording...",
+            "click_to_record": "Click to record",
             "background": {
               "favourite": "Favourite background",
               "maximise": "Maximise background",
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index 401c7797..6201e0ac 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -313,6 +313,7 @@
           "keybinds": {
             "title": "Keybinds",
             "recording": "Recording...",
+            "click_to_record": "Click to record",
             "background": {
               "favourite": "Favourite background",
               "maximise": "Maximise background",
diff --git a/src/translations/en_US.json b/src/translations/en_US.json
index 9cc9a178..e78855d9 100644
--- a/src/translations/en_US.json
+++ b/src/translations/en_US.json
@@ -313,6 +313,7 @@
           "keybinds": {
             "title": "Keybinds",
             "recording": "Recording...",
+            "click_to_record": "Click to record",
             "background": {
               "favourite": "Favourite background",
               "maximise": "Maximise background",
diff --git a/src/translations/es.json b/src/translations/es.json
index 747f980e..12b3e7a0 100644
--- a/src/translations/es.json
+++ b/src/translations/es.json
@@ -313,6 +313,7 @@
           "keybinds": {
             "title": "Keybinds",
             "recording": "Recording...",
+            "click_to_record": "Click to record",
             "background": {
               "favourite": "Favourite background",
               "maximise": "Maximise background",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index 80b833ad..e83f9208 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -313,6 +313,7 @@
           "keybinds": {
             "title": "Keybinds",
             "recording": "Recording...",
+            "click_to_record": "Click to record",
             "background": {
               "favourite": "Favourite background",
               "maximise": "Maximise background",
diff --git a/src/translations/nl.json b/src/translations/nl.json
index 4294b3a5..5a1cab82 100644
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@@ -313,6 +313,7 @@
           "keybinds": {
             "title": "Keybinds",
             "recording": "Recording...",
+            "click_to_record": "Click to record",
             "background": {
               "favourite": "Favourite background",
               "maximise": "Maximise background",
diff --git a/src/translations/no.json b/src/translations/no.json
index aa2a3c3b..d3acfe07 100644
--- a/src/translations/no.json
+++ b/src/translations/no.json
@@ -313,6 +313,7 @@
           "keybinds": {
             "title": "Keybinds",
             "recording": "Recording...",
+            "click_to_record": "Click to record",
             "background": {
               "favourite": "Favourite background",
               "maximise": "Maximise background",
diff --git a/src/translations/ru.json b/src/translations/ru.json
index 43ea0949..8a923d1b 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -313,6 +313,7 @@
           "keybinds": {
             "title": "Keybinds",
             "recording": "Recording...",
+            "click_to_record": "Click to record",
             "background": {
               "favourite": "Favourite background",
               "maximise": "Maximise background",
diff --git a/src/translations/zh_CN.json b/src/translations/zh_CN.json
index 01633cfd..6a694ac7 100644
--- a/src/translations/zh_CN.json
+++ b/src/translations/zh_CN.json
@@ -313,6 +313,7 @@
           "keybinds": {
             "title": "Keybinds",
             "recording": "Recording...",
+            "click_to_record": "Click to record",
             "background": {
               "favourite": "Favourite background",
               "maximise": "Maximise background",