diff --git a/src/renderer/components/data-settings/data-settings.vue b/src/renderer/components/data-settings/data-settings.vue
index f95aeefb..e737e2fe 100644
--- a/src/renderer/components/data-settings/data-settings.vue
+++ b/src/renderer/components/data-settings/data-settings.vue
@@ -1,10 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3>
-      {{ $t("Settings.Data Settings.Data Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Data Settings.Data Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <ft-flex-box>
       <ft-button
         :label="$t('Settings.Data Settings.Import Subscriptions')"
@@ -57,7 +58,7 @@
       :option-values="subscriptionsPromptValues"
       @click="exportSubscriptions"
     />
-  </ft-card>
+  </details>
 </template>
 
 <script src="./data-settings.js" />
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index 258e365d..aef21062 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.Distraction Free Settings.Distraction Free Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Distraction Free Settings.Distraction Free Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -90,7 +89,7 @@
         label="Manage My Distractions"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./distraction-settings.js" />
diff --git a/src/renderer/components/external-player-settings/external-player-settings.vue b/src/renderer/components/external-player-settings/external-player-settings.vue
index 8a945fea..59ab3880 100644
--- a/src/renderer/components/external-player-settings/external-player-settings.vue
+++ b/src/renderer/components/external-player-settings/external-player-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.External Player Settings.External Player Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.External Player Settings.External Player Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-select
@@ -49,7 +48,7 @@
         @input="updateExternalPlayerCustomArgs"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./external-player-settings.js" />
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index cc4b26fb..c4a27713 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.General Settings.General Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.General Settings.General Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -130,7 +129,7 @@
         @click="handleClearDefaultInstanceClick"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./general-settings.js" />
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index 661b5a3d..cf258e38 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/src/renderer/components/player-settings/player-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.Player Settings.Player Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Player Settings.Player Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -127,7 +126,7 @@
         @change="updateDefaultQuality"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./player-settings.js" />
diff --git a/src/renderer/components/privacy-settings/privacy-settings.vue b/src/renderer/components/privacy-settings/privacy-settings.vue
index d39b7214..86052ea6 100644
--- a/src/renderer/components/privacy-settings/privacy-settings.vue
+++ b/src/renderer/components/privacy-settings/privacy-settings.vue
@@ -1,10 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3>
-      {{ $t("Settings.Privacy Settings.Privacy Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Privacy Settings.Privacy Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -75,7 +76,7 @@
       :option-values="promptValues"
       @click="handleRemoveSubscriptions"
     />
-  </ft-card>
+  </details>
 </template>
 
 <script src="./privacy-settings.js" />
diff --git a/src/renderer/components/proxy-settings/proxy-settings.css b/src/renderer/components/proxy-settings/proxy-settings.css
deleted file mode 100644
index 40b512de..00000000
--- a/src/renderer/components/proxy-settings/proxy-settings.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-.center {
-  text-align: center;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: 500px) {
-  .subscriptionSettingsFlexBox {
-    justify-content: flex-start;
-  }
-}
diff --git a/src/renderer/components/proxy-settings/proxy-settings.sass b/src/renderer/components/proxy-settings/proxy-settings.sass
new file mode 100644
index 00000000..a1ddf931
--- /dev/null
+++ b/src/renderer/components/proxy-settings/proxy-settings.sass
@@ -0,0 +1,5 @@
+@use "../../sass-partials/settings"
+
+@media only screen and (max-width: 500px)
+  .subscriptionSettingsFlexBox
+    justify-content: flex-start
diff --git a/src/renderer/components/proxy-settings/proxy-settings.vue b/src/renderer/components/proxy-settings/proxy-settings.vue
index 34c2194b..79b9b024 100644
--- a/src/renderer/components/proxy-settings/proxy-settings.vue
+++ b/src/renderer/components/proxy-settings/proxy-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.Proxy Settings.Proxy Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Proxy Settings.Proxy Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <ft-flex-box class="subscriptionSettingsFlexBox">
       <ft-toggle-switch
         :label="$t('Settings.Proxy Settings.Enable Tor / Proxy')"
@@ -71,8 +70,8 @@
         {{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }}
       </p>
     </div>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./proxy-settings.js" />
-<style scoped src="./proxy-settings.css" />
+<style scoped lang="sass" src="./proxy-settings.sass" />
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.css b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.css
deleted file mode 100644
index 97e780cc..00000000
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-.center {
-  text-align: center;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: 500px) {
-  .sponsorBlockSettingsFlexBox {
-    justify-content: flex-start;
-  }
-}
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass
new file mode 100644
index 00000000..89db0c8c
--- /dev/null
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass
@@ -0,0 +1,5 @@
+@use "../../sass-partials/settings"
+
+@media only screen and (max-width: 500px)
+  .sponsorBlockSettingsFlexBox
+    justify-content: flex-start
\ No newline at end of file
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
index e57d62ed..06ef8541 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.SponsorBlock Settings.SponsorBlock Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.SponsorBlock Settings.SponsorBlock Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <ft-flex-box class="sponsorBlockSettingsFlexBox">
       <ft-toggle-switch
         :label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')"
@@ -30,8 +29,8 @@
         @input="handleUpdateSponsorBlockUrl"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./sponsor-block-settings.js" />
-<style scoped src="./sponsor-block-settings.css" />
+<style scoped lang="sass" src="./sponsor-block-settings.sass" />
diff --git a/src/renderer/components/subscription-settings/subscription-settings.css b/src/renderer/components/subscription-settings/subscription-settings.css
deleted file mode 100644
index befd5bb0..00000000
--- a/src/renderer/components/subscription-settings/subscription-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: 500px) {
-  .subscriptionSettingsFlexBox {
-    justify-content: flex-start;
-  }
-}
diff --git a/src/renderer/components/subscription-settings/subscription-settings.sass b/src/renderer/components/subscription-settings/subscription-settings.sass
new file mode 100644
index 00000000..21c65d94
--- /dev/null
+++ b/src/renderer/components/subscription-settings/subscription-settings.sass
@@ -0,0 +1,6 @@
+@use "../../sass-partials/settings"
+
+@media only screen and (max-width: 500px)
+  .subscriptionSettingsFlexBox
+    justify-content: flex-start
+    
diff --git a/src/renderer/components/subscription-settings/subscription-settings.vue b/src/renderer/components/subscription-settings/subscription-settings.vue
index 936c81f6..f56addf9 100644
--- a/src/renderer/components/subscription-settings/subscription-settings.vue
+++ b/src/renderer/components/subscription-settings/subscription-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.Subscription Settings.Subscription Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Subscription Settings.Subscription Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <ft-flex-box class="subscriptionSettingsFlexBox">
       <ft-toggle-switch
         :label="$t('Settings.Subscription Settings.Hide Videos on Watch')"
@@ -37,8 +36,8 @@
         label="Manage My Subscriptions"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./subscription-settings.js" />
-<style scoped src="./subscription-settings.css" />
+<style scoped lang="sass" src="./subscription-settings.sass" />
diff --git a/src/renderer/components/theme-settings/theme-settings.css b/src/renderer/components/theme-settings/theme-settings.css
deleted file mode 100644
index a5236cca..00000000
--- a/src/renderer/components/theme-settings/theme-settings.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
diff --git a/src/renderer/components/theme-settings/theme-settings.sass b/src/renderer/components/theme-settings/theme-settings.sass
new file mode 100644
index 00000000..05cb0dfb
--- /dev/null
+++ b/src/renderer/components/theme-settings/theme-settings.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/settings"
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index 1e7fde7e..9633aba5 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -1,10 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3>
-      {{ $t("Settings.Theme Settings.Theme Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Theme Settings.Theme Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <ft-flex-box>
       <ft-toggle-switch
         :label="$t('Settings.Theme Settings.Match Top Bar with Main Color')"
@@ -64,8 +65,8 @@
       :option-values="restartPromptValues"
       @click="handleSmoothScrolling"
     />
-  </ft-card>
+  </details>
 </template>
 
 <script src="./theme-settings.js" />
-<style scoped src="./theme-settings.css" />
+<style scoped lang="sass" src="./theme-settings.sass" />
diff --git a/src/renderer/sass-partials/_settings.sass b/src/renderer/sass-partials/_settings.sass
index 1a9cdf3c..1674529a 100644
--- a/src/renderer/sass-partials/_settings.sass
+++ b/src/renderer/sass-partials/_settings.sass
@@ -16,10 +16,25 @@
   flex-direction: column
   justify-items: start
 
-.card
+details
+  background-color: var(--card-bg-color)
   width: 85%
   margin: 0 auto
-  margin-bottom: 10px
+
+  hr
+    width: 100%
+    height: 2px
+    border: 0
+    margin-top: -1px
+    background-color: var(--primary-color)
+
+  summary
+    display: block
+    cursor: pointer
+    padding: 1px 1px 1px 1px
+    
+    h3
+      margin-left: 2%
 
   @media only screen and (max-width: 680px)
     width: 90%
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index e69de29b..c308b9a8 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -0,0 +1,7 @@
+hr {
+  height: 2px;
+  width: 85%;
+  margin: 0 auto;
+  border: 0;
+  background-color: var(--scrollbar-color-hover);
+}
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index f801e6da..bd766dce 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,14 +1,23 @@
 <template>
   <div>
     <general-settings />
+    <hr>
     <theme-settings />
+    <hr>
     <player-settings />
+    <hr>
     <external-player-settings v-if="usingElectron" />
+    <hr>
     <subscription-settings />
+    <hr>
     <distraction-settings />
+    <hr>
     <privacy-settings />
+    <hr>
     <data-settings />
+    <hr>
     <proxy-settings />
+    <hr>
     <sponsor-block-settings />
   </div>
 </template>