diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index f6cbe2ab..156a4f5b 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -22,110 +22,110 @@
 
 /* select starting stylings ------------------------------*/
 .select {
-	position: relative;
-	width: 200px;
-	padding: 10px 10px 10px 0;
-  margin-top: 10px;
+  position: relative;
+  width: 200px;
+  padding: 0px 10px 10px 0;
+  margin-top: 30px;
 }
 
 .select-text {
-	position: relative;
-	font-family: inherit;
-	background-color: transparent;
+  position: relative;
+  font-family: inherit;
+  background-color: transparent;
   color: var(--primary-text-color);
-	width: 200px;
-	padding: 10px 10px 10px 0;
-	font-size: 18px;
-	border-radius: 0;
-	border: none;
+  width: 200px;
+  padding: 10px 10px 10px 0;
+  font-size: 18px;
+  border-radius: 0;
+  border: none;
 }
 
 .select option {
-	color: #000000;
+  color: #000000;
 }
 
 /* Remove focus */
 .select-text:focus {
-	outline: none;
+  outline: none;
 }
 
-	/* Use custom arrow */
+  /* Use custom arrow */
 .select .select-text {
-	appearance: none;
-	-webkit-appearance:none
+  appearance: none;
+  -webkit-appearance:none
 }
 
 .iconSelect {
-	position: absolute;
-	top: 18px;
-	right: 10px;
-	/* Styling the down arrow */
-	padding: 0;
-	content: '';
-	border-left: 6px solid transparent;
-	border-right: 6px solid transparent;
-	pointer-events: none;
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  /* Styling the down arrow */
+  padding: 0;
+  content: '';
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  pointer-events: none;
   color: var(--tertiary-text-color);
 }
 
 
 /* LABEL ======================================= */
 .select-label {
-	font-size: 18px;
-	font-weight: normal;
-	position: absolute;
-	pointer-events: none;
-	left: 0;
-	top: 10px;
-	transition: 0.2s ease all;
+  font-size: 18px;
+  font-weight: normal;
+  position: absolute;
+  pointer-events: none;
+  left: 0;
+  top: 10px;
+  transition: 0.2s ease all;
   color: var(--tertiary-text-color);
 }
 
 /* active state */
 .select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
-	color: var(--accent-color);
-	top: -20px;
-	transition: 0.2s ease all;
-	font-size: 14px;
+  color: var(--accent-color);
+  top: -20px;
+  transition: 0.2s ease all;
+  font-size: 14px;
 }
 
 /* BOTTOM BARS ================================= */
 .select-bar {
-	position: relative;
-	display: block;
-	width: 200px;
+  position: relative;
+  display: block;
+  width: 200px;
 }
 
 .select-bar:before, .select-bar:after {
-	content: '';
-	height: 2px;
-	width: 0;
-	bottom: 1px;
-	position: absolute;
-	background: var(--accent-color);
-	transition: 0.2s ease all;
+  content: '';
+  height: 2px;
+  width: 0;
+  bottom: 1px;
+  position: absolute;
+  background: var(--accent-color);
+  transition: 0.2s ease all;
 }
 
 .select-bar:before {
-	left: 50%;
+  left: 50%;
 }
 
 .select-bar:after {
-	right: 50%;
+  right: 50%;
 }
 
 /* active state */
 .select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
-	width: 50%;
+  width: 50%;
 }
 
 /* HIGHLIGHTER ================================== */
 .select-highlight {
-	position: absolute;
-	height: 60%;
-	width: 100px;
-	top: 25%;
-	left: 0;
-	pointer-events: none;
-	opacity: 0.5;
+  position: absolute;
+  height: 60%;
+  width: 100px;
+  top: 25%;
+  left: 0;
+  pointer-events: none;
+  opacity: 0.5;
 }
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index 7613e52b..7e7753d2 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -10,6 +10,7 @@
     font-size: 16px;
     line-height: 1.5;
     padding: 5px;
+    margin: 12px 8px;
 }
 
 /* Input */
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
deleted file mode 100644
index abebec5e..00000000
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/* Thanks to Guus Lieben for the Material Design Switch */
-
-.switch-input {
-    display: none;
-}
-
-.switch-label {
-    position: relative;
-    display: inline-block;
-    min-width: 112px;
-    cursor: pointer;
-    font-weight: 500;
-    text-align: left;
-    margin: 16px;
-    padding: 16px 0 16px 44px;
-}
-
-.switch-label:before,
-.switch-label:after {
-    content: "";
-    position: absolute;
-    margin: 0;
-    outline: 0;
-    top: 50%;
-    -ms-transform: translate(0, -50%);
-    -webkit-transform: translate(0, -50%);
-    transform: translate(0, -50%);
-    -webkit-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
-
-.switch-label:before {
-    left: 1px;
-    width: 34px;
-    height: 14px;
-    background-color: #9E9E9E;
-    border-radius: 8px;
-}
-
-.switch-label:after {
-    left: 0;
-    width: 20px;
-    height: 20px;
-    background-color: #FAFAFA;
-    border-radius: 50%;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
-}
-
-.switch-label .toggle--on {
-    display: none;
-}
-
-.switch-label .toggle--off {
-    display: inline-block;
-}
-
-.switch-input:checked+.switch-label:before {
-    background-color: var(--accent-color-light);
-}
-
-.switch-input:checked+.switch-label:after {
-    background-color: var(--accent-color);
-    -ms-transform: translate(80%, -50%);
-    -webkit-transform: translate(80%, -50%);
-    transform: translate(80%, -50%);
-}
-
-.switch-input:checked+.switch-label .toggle--on {
-    display: inline-block;
-}
-
-.switch-input:checked+.switch-label .toggle--off {
-    display: none;
-}
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
index 6241895c..4a5bd825 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
@@ -10,6 +10,10 @@ export default Vue.extend({
     defaultValue: {
       type: Boolean,
       default: false
+    },
+    compact: {
+      type: Boolean,
+      default: false
     }
   },
   data: function () {
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
new file mode 100644
index 00000000..e1d60f84
--- /dev/null
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
@@ -0,0 +1,54 @@
+/* Thanks to Guus Lieben for the Material Design Switch */
+
+.switch-input
+  display: none
+
+.switch-label
+  position: relative
+  display: inline-block
+  min-width: 112px
+  cursor: pointer
+  font-weight: 500
+  text-align: left
+  margin: 16px
+  padding: 16px 0 16px 44px
+
+  &.compact
+    margin: 0px
+    padding: 12px 0 12px 44px
+
+  &:before, &:after
+    content: ""
+    position: absolute
+    margin: 0
+    outline: 0
+    top: 50%
+    -ms-transform: translate(0, -50%)
+    -webkit-transform: translate(0, -50%)
+    transform: translate(0, -50%)
+    -webkit-transition: all 0.3s ease
+    transition: all 0.3s ease
+
+  &:before
+    left: 1px
+    width: 34px
+    height: 14px
+    background-color: #9E9E9E
+    border-radius: 8px
+
+    .switch-input:checked + &
+      background-color: var(--accent-color-light)
+
+  &:after
+    left: 0
+    width: 20px
+    height: 20px
+    background-color: #FAFAFA
+    border-radius: 50%
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084)
+
+    .switch-input:checked + &
+      background-color: var(--accent-color)
+      -ms-transform: translate(80%, -50%)
+      -webkit-transform: translate(80%, -50%)
+      transform: translate(80%, -50%)
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
index b9545c47..09d76349 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
@@ -12,6 +12,7 @@
     <label
       :for="id"
       class="switch-label"
+      :class="{compact}"
     >
       {{ label }}
     </label>
@@ -19,4 +20,4 @@
 </template>
 
 <script src="./ft-toggle-switch.js" />
-<style scoped src="./ft-toggle-switch.css" />
+<style scoped lang="sass" src="./ft-toggle-switch.sass" />
diff --git a/src/renderer/components/general-settings/general-settings.css b/src/renderer/components/general-settings/general-settings.css
deleted file mode 100644
index 40a7fd47..00000000
--- a/src/renderer/components/general-settings/general-settings.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: 460px) {
-  .generalSettingsFlexBox {
-    justify-content: flex-start;
-  }
-}
diff --git a/src/renderer/components/general-settings/general-settings.sass b/src/renderer/components/general-settings/general-settings.sass
new file mode 100644
index 00000000..05cb0dfb
--- /dev/null
+++ b/src/renderer/components/general-settings/general-settings.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/settings"
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index 0f1bca97..a33bac72 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -1,6 +1,6 @@
 <template>
   <ft-card
-    class="relative card">
+    class="card">
     <h3
       class="videoTitle"
     >
@@ -18,8 +18,7 @@
         @change="updateCheckForUpdates"
       />
     </ft-flex-box>
-    <br>
-    <ft-flex-box>
+    <div class="switchGrid">
       <ft-select
         placeholder="Preferred API Backend"
         :value="backendPreference"
@@ -55,9 +54,9 @@
         :select-values="thumbnailTypeValues"
         @change="updateThumbnailPreference"
       />
-    </ft-flex-box>
+    </div>
   </ft-card>
 </template>
 
 <script src="./general-settings.js" />
-<style scoped src="./general-settings.css" />
+<style scoped lang="sass" src="./general-settings.sass" />
diff --git a/src/renderer/components/player-settings/player-settings.css b/src/renderer/components/player-settings/player-settings.css
deleted file mode 100644
index 86eef4fb..00000000
--- a/src/renderer/components/player-settings/player-settings.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: 460px) {
-  .playerSettingsFlexBox {
-    justify-content: flex-start;
-  }
-}
diff --git a/src/renderer/components/player-settings/player-settings.sass b/src/renderer/components/player-settings/player-settings.sass
new file mode 100644
index 00000000..05cb0dfb
--- /dev/null
+++ b/src/renderer/components/player-settings/player-settings.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/settings"
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index 9af5f4f3..d43113f4 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/src/renderer/components/player-settings/player-settings.vue
@@ -6,44 +6,54 @@
     >
       {{ title }}
     </h3>
-    <ft-flex-box class="playerSettingsFlexBox">
-      <ft-toggle-switch
-        label="Remember History"
-        :default-value="rememberHistory"
-        @change="updateRememberHistory"
-      />
-      <ft-toggle-switch
-        label="Autoplay Videos"
-        :default-value="autoplayVideos"
-        @change="updateAutoplayVideos"
-      />
-      <ft-toggle-switch
-        label="Autoplay Playlists"
-        :default-value="autoplayPlaylists"
-        @change="updateAutoplayPlaylists"
-      />
-      <ft-toggle-switch
-        label="Play Next Video"
-        :default-value="playNextVideo"
-        @change="updatePlayNextVideo"
-      />
-      <ft-toggle-switch
-        label="Enable Subtitles by Default"
-        :default-value="enableSubtitles"
-        @change="updateEnableSubtitles"
-      />
-      <ft-toggle-switch
-        label="Force Local Backend for Legacy Formats"
-        :default-value="forceLocalBackendForLegacy"
-        @change="updateForceLocalBackendForLegacy"
-      />
-      <ft-toggle-switch
-        label="Proxy Videos Through Invidious"
-        :default-value="proxyVideos"
-        @change="updateProxyVideos"
-      />
-    </ft-flex-box>
-    <br>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-toggle-switch
+          label="Remember History"
+          :compact=true
+          :default-value="rememberHistory"
+          @change="updateRememberHistory"
+        />
+        <ft-toggle-switch
+          label="Enable Subtitles by Default"
+          :compact=true
+          :default-value="enableSubtitles"
+          @change="updateEnableSubtitles"
+        />
+        <ft-toggle-switch
+          label="Force Local Backend for Legacy Formats"
+          :compact=true
+          :default-value="forceLocalBackendForLegacy"
+          @change="updateForceLocalBackendForLegacy"
+        />
+        <ft-toggle-switch
+          label="Proxy Videos Through Invidious"
+          :compact=true
+          :default-value="proxyVideos"
+          @change="updateProxyVideos"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-toggle-switch
+          label="Autoplay Videos"
+          :compact=true
+          :default-value="autoplayVideos"
+          @change="updateAutoplayVideos"
+        />
+        <ft-toggle-switch
+          label="Autoplay Playlists"
+          :compact=true
+          :default-value="autoplayPlaylists"
+          @change="updateAutoplayPlaylists"
+        />
+        <ft-toggle-switch
+          label="Play Next Video"
+          :compact=true
+          :default-value="playNextVideo"
+          @change="updatePlayNextVideo"
+        />
+      </div>
+    </div>
     <ft-flex-box>
       <ft-slider
         label="Default Volume"
@@ -64,7 +74,6 @@
         @change="updateDefaultPlayback"
       />
     </ft-flex-box>
-    <br>
     <ft-flex-box>
       <ft-select
         placeholder="Default Video Format"
@@ -85,4 +94,4 @@
 </template>
 
 <script src="./player-settings.js" />
-<style scoped src="./player-settings.css" />
+<style scoped lang="sass" src="./player-settings.sass" />
diff --git a/src/renderer/sass-partials/_settings.sass b/src/renderer/sass-partials/_settings.sass
new file mode 100644
index 00000000..2eb4af2a
--- /dev/null
+++ b/src/renderer/sass-partials/_settings.sass
@@ -0,0 +1,29 @@
+.switchGrid
+  display: grid
+  grid-template-columns: auto auto
+  justify-content: space-evenly
+  align-items: center
+
+  @media only screen and (max-width: 680px)
+    grid-template-columns: auto
+
+.switchColumnGrid
+  @extend .switchGrid
+  align-items: start
+
+.switchColumn
+  display: flex
+  flex-direction: column
+  justify-items: start
+
+.card
+  width: 85%
+  margin: 0 auto
+  margin-bottom: 10px
+
+  @media only screen and (max-width: 680px)
+    width: 90%
+
+@media only screen and (max-width: 460px)
+  .generalSettingsFlexBox, .playerSettingsFlexBox
+    justify-content: flex-start