diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
deleted file mode 100644
index b9ef73f8b..000000000
--- a/src/renderer/components/ft-card/ft-card.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.ft-card {
-  background-color: var(--card-bg-color);
-  margin: 8px;
-  padding-block: 3px 16px;
-  padding-inline: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
-}
diff --git a/src/renderer/components/ft-card/ft-card.js b/src/renderer/components/ft-card/ft-card.js
index 29d02d724..8075ef4c6 100644
--- a/src/renderer/components/ft-card/ft-card.js
+++ b/src/renderer/components/ft-card/ft-card.js
@@ -1,5 +1,16 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'FtCard'
+  name: 'FtCard',
+  props: {
+    big: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    useFullWidthLayout: function () {
+      return this.$store.getters.getUseFullWidthLayout
+    }
+  }
 })
diff --git a/src/renderer/components/ft-card/ft-card.scss b/src/renderer/components/ft-card/ft-card.scss
new file mode 100644
index 000000000..fd586793d
--- /dev/null
+++ b/src/renderer/components/ft-card/ft-card.scss
@@ -0,0 +1,17 @@
+.ft-card {
+  background-color: var(--card-bg-color);
+  margin: 8px;
+  padding-block: 3px 16px;
+  padding-inline: 16px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+
+  &.big:not(.fullWidth) {
+    inline-size: 85%;
+  }
+
+  @media only screen and (max-width: 680px) {
+    &.big:not(.fullWidth) {
+      inline-size: 90%;
+    }
+  }
+}
diff --git a/src/renderer/components/ft-card/ft-card.vue b/src/renderer/components/ft-card/ft-card.vue
index 641a0100f..e4716ed4a 100644
--- a/src/renderer/components/ft-card/ft-card.vue
+++ b/src/renderer/components/ft-card/ft-card.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="ft-card"
+    :class="{ fullWidth: useFullWidthLayout, big }"
     @focusout="$emit('focusout')"
   >
     <slot />
@@ -8,4 +9,4 @@
 </template>
 
 <script src="./ft-card.js" />
-<style scoped src="./ft-card.css" />
+<style scoped src="./ft-card.scss" lang="scss" />
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
index 6c58b42f9..986fbb7e2 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js
@@ -67,9 +67,6 @@ export default defineComponent({
     },
     locale: function () {
       return this.$i18n.locale.replace('_', '-')
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
index d988a859a..64d4733d5 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.scss
@@ -1,8 +1,4 @@
 .card {
   margin-block: 0 15px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
index 80f530bcc..b1aed3207 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>
         {{ $t("Profile.Subscription List") }}
       </h2>
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.js b/src/renderer/components/ft-profile-edit/ft-profile-edit.js
index aefdab110..e6f4eddce 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.js
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.js
@@ -65,9 +65,6 @@ export default defineComponent({
         this.$t('Yes'),
         this.$t('No')
       ]
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.scss b/src/renderer/components/ft-profile-edit/ft-profile-edit.scss
index cdc936f53..792d958e4 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.scss
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 15px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -43,9 +39,3 @@
   user-select: none;
   -webkit-user-select: none;
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
index ab797f673..1969adea8 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>{{ $t("Profile.Edit Profile") }}</h2>
       <ft-flex-box>
         <ft-input
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
index 9d4261dea..fc576fcd1 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js
@@ -49,9 +49,6 @@ export default defineComponent({
     },
     locale: function () {
       return this.$i18n.locale.replace('_', '-')
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
index 563b46d6e..f29b0fe8f 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 30px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .selected {
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
index a8b832a69..f81d9b82d 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>
         {{ $t("Profile.Other Channels") }}
       </h2>
diff --git a/src/renderer/components/password-dialog/password-dialog.js b/src/renderer/components/password-dialog/password-dialog.js
index a58d6aa5a..ed4b5e99c 100644
--- a/src/renderer/components/password-dialog/password-dialog.js
+++ b/src/renderer/components/password-dialog/password-dialog.js
@@ -12,9 +12,6 @@ export default defineComponent({
   computed: {
     settingsPassword: function () {
       return this.$store.getters.getSettingsPassword
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {
diff --git a/src/renderer/components/password-dialog/password-dialog.scss b/src/renderer/components/password-dialog/password-dialog.scss
index c69f279fe..05e6d66ce 100644
--- a/src/renderer/components/password-dialog/password-dialog.scss
+++ b/src/renderer/components/password-dialog/password-dialog.scss
@@ -1,10 +1,6 @@
 .card {
   margin: auto;
   box-sizing: border-box;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .passwordInput {
diff --git a/src/renderer/components/password-dialog/password-dialog.vue b/src/renderer/components/password-dialog/password-dialog.vue
index 352054473..2524c90ac 100644
--- a/src/renderer/components/password-dialog/password-dialog.vue
+++ b/src/renderer/components/password-dialog/password-dialog.vue
@@ -1,7 +1,6 @@
 <template>
   <ft-card
     class="card"
-    :class="{ fullWidth: useFullWidthLayout }"
   >
     <h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>
 
diff --git a/src/renderer/views/About/About.js b/src/renderer/views/About/About.js
index dc04ede07..0605cffd2 100644
--- a/src/renderer/views/About/About.js
+++ b/src/renderer/views/About/About.js
@@ -83,10 +83,5 @@ export default defineComponent({
         }
       ]
     }
-  },
-  computed: {
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
-    }
   }
 })
diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss
index ba0bae5ee..e34ae03d6 100644
--- a/src/renderer/views/About/About.scss
+++ b/src/renderer/views/About/About.scss
@@ -1,14 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-
-    @media only screen and (max-width: 680px) {
-      inline-size: 90%;
-    }
-  }
 }
 
 .brand {
diff --git a/src/renderer/views/About/About.vue b/src/renderer/views/About/About.vue
index e031d60be..5b6dde53c 100644
--- a/src/renderer/views/About/About.vue
+++ b/src/renderer/views/About/About.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h1>
         {{ $t("About.About") }}
       </h1>
diff --git a/src/renderer/views/Channel/Channel.scss b/src/renderer/views/Channel/Channel.scss
index 7806040ec..86dfda861 100644
--- a/src/renderer/views/Channel/Channel.scss
+++ b/src/renderer/views/Channel/Channel.scss
@@ -3,10 +3,6 @@
   margin-block: 0 20px;
   margin-inline: auto;
   box-sizing: border-box;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .channelDetails {
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index 21f4ed292..bc81d6804 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -8,7 +8,9 @@
     />
     <ft-card
       v-else-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card channelDetails" :class="{ fullWidth: useFullWidthLayout }"
+      big
+      class="card channelDetails"
+      :class="{ fullWidth: useFullWidthLayout }"
     >
       <div
         class="channelBannerContainer"
@@ -216,7 +218,8 @@
     </ft-card>
     <ft-card
       v-if="!isLoading && !errorMessage && (isFamilyFriendly || !showFamilyFriendlyOnly)"
-      class="card" :class="{ fullWidth: useFullWidthLayout }"
+      big
+      class="card"
     >
       <channel-about
         v-if="currentTab === 'about'"
@@ -409,7 +412,8 @@
     </ft-card>
     <ft-card
       v-if="errorMessage"
-      class="card" :class="{ fullWidth: useFullWidthLayout }"
+      big
+      class="card"
     >
       <p>
         {{ errorMessage }}
diff --git a/src/renderer/views/Hashtag/Hashtag.js b/src/renderer/views/Hashtag/Hashtag.js
index d1e06f73f..61d0b8bea 100644
--- a/src/renderer/views/Hashtag/Hashtag.js
+++ b/src/renderer/views/Hashtag/Hashtag.js
@@ -38,10 +38,6 @@ export default defineComponent({
 
     showFetchMoreButton() {
       return !isNullOrEmpty(this.hashtagContinuationData) || this.apiUsed === 'invidious'
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/Hashtag/Hashtag.scss b/src/renderer/views/Hashtag/Hashtag.scss
index 58f09b5dd..8cddd7965 100644
--- a/src/renderer/views/Hashtag/Hashtag.scss
+++ b/src/renderer/views/Hashtag/Hashtag.scss
@@ -16,14 +16,4 @@
 .card {
   margin-block: 0 20px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
-}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
 }
diff --git a/src/renderer/views/Hashtag/Hashtag.vue b/src/renderer/views/Hashtag/Hashtag.vue
index d3a83174b..354d85c2f 100644
--- a/src/renderer/views/Hashtag/Hashtag.vue
+++ b/src/renderer/views/Hashtag/Hashtag.vue
@@ -6,8 +6,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ hashtag }}</h2>
       <ft-element-list
diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js
index 22e456409..ffa871ea2 100644
--- a/src/renderer/views/History/History.js
+++ b/src/renderer/views/History/History.js
@@ -38,10 +38,6 @@ export default defineComponent({
       } else {
         return this.historyCacheSorted.slice(0, this.dataLimit)
       }
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/History/History.scss b/src/renderer/views/History/History.scss
index c0d12ce3a..e2bdbe32d 100644
--- a/src/renderer/views/History/History.scss
+++ b/src/renderer/views/History/History.scss
@@ -1,18 +1,8 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
   color: var(--tertiary-text-color);
-}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue
index 752ea7ffb..3be3cfe2c 100644
--- a/src/renderer/views/History/History.vue
+++ b/src/renderer/views/History/History.vue
@@ -6,8 +6,8 @@
     />
     <ft-card
       v-show="!isLoading"
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("History.History") }}</h2>
       <ft-input
diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js
index a628c9778..08a1a893c 100644
--- a/src/renderer/views/Popular/Popular.js
+++ b/src/renderer/views/Popular/Popular.js
@@ -24,10 +24,6 @@ export default defineComponent({
   computed: {
     popularCache: function () {
       return this.$store.getters.getPopularCache
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {
diff --git a/src/renderer/views/Popular/Popular.scss b/src/renderer/views/Popular/Popular.scss
index a456956b9..2e14f4ea3 100644
--- a/src/renderer/views/Popular/Popular.scss
+++ b/src/renderer/views/Popular/Popular.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .floatingTopButton {
@@ -17,10 +13,4 @@
   .floatingTopButton {
     position: absolute
   }
-}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/views/Popular/Popular.vue b/src/renderer/views/Popular/Popular.vue
index 371fa93a8..321559707 100644
--- a/src/renderer/views/Popular/Popular.vue
+++ b/src/renderer/views/Popular/Popular.vue
@@ -6,8 +6,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Most Popular") }}</h2>
       <ft-element-list
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.js b/src/renderer/views/ProfileSettings/ProfileSettings.js
index 881323c99..0324f4608 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.js
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.js
@@ -15,10 +15,6 @@ export default defineComponent({
   computed: {
     profileList: function () {
       return this.$store.getters.getProfileList
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   methods: {
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.scss b/src/renderer/views/ProfileSettings/ProfileSettings.scss
index f6f9a8090..fc7da61fd 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.scss
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -15,10 +11,4 @@
   max-inline-size: 1000px;
   margin-block: 0 10px;
   margin-inline: auto;
-}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.vue b/src/renderer/views/ProfileSettings/ProfileSettings.vue
index 1c13e6bf4..589d954cd 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.vue
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card big class="card">
       <h2>{{ $t("Profile.Profile Manager") }}</h2>
       <ft-flex-box
         class="profileList"
diff --git a/src/renderer/views/Search/Search.js b/src/renderer/views/Search/Search.js
index 99c29b762..e888af50b 100644
--- a/src/renderer/views/Search/Search.js
+++ b/src/renderer/views/Search/Search.js
@@ -40,10 +40,6 @@ export default defineComponent({
 
     showFamilyFriendlyOnly: function() {
       return this.$store.getters.getShowFamilyFriendlyOnly
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/Search/Search.scss b/src/renderer/views/Search/Search.scss
index 6e09786a3..796ee7d80 100644
--- a/src/renderer/views/Search/Search.scss
+++ b/src/renderer/views/Search/Search.scss
@@ -16,14 +16,4 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
-}
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/renderer/views/Search/Search.vue b/src/renderer/views/Search/Search.vue
index aefe4e7b6..536d71d3f 100644
--- a/src/renderer/views/Search/Search.vue
+++ b/src/renderer/views/Search/Search.vue
@@ -8,8 +8,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Search Filters.Search Results") }}</h2>
       <ft-element-list
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.js b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
index a03e6b342..002224063 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.js
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.js
@@ -64,10 +64,6 @@ export default defineComponent({
 
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.scss b/src/renderer/views/SubscribedChannels/SubscribedChannels.scss
index c575de89f..ee9c5831a 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.scss
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -70,10 +66,6 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-
   .channels {
     gap: 1.5rem;
   }
diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
index dd666447f..55335e933 100644
--- a/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
+++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>{{ $t('Channels.Title') }}</h2>
       <ft-input
         v-show="subscribedChannels.length > 0"
diff --git a/src/renderer/views/Subscriptions/Subscriptions.js b/src/renderer/views/Subscriptions/Subscriptions.js
index 6fee6785d..c36ff32cd 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.js
+++ b/src/renderer/views/Subscriptions/Subscriptions.js
@@ -68,10 +68,6 @@ export default defineComponent({
       }
 
       return tabs
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/Subscriptions/Subscriptions.scss b/src/renderer/views/Subscriptions/Subscriptions.scss
index b91efd5ba..3d9b5ff1a 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.scss
+++ b/src/renderer/views/Subscriptions/Subscriptions.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
@@ -37,9 +33,3 @@
 .tab:hover {
   font-weight: bold;
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/Subscriptions/Subscriptions.vue b/src/renderer/views/Subscriptions/Subscriptions.vue
index 1003753dd..a7c252a41 100644
--- a/src/renderer/views/Subscriptions/Subscriptions.vue
+++ b/src/renderer/views/Subscriptions/Subscriptions.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ft-card class="card" :class="{ fullWidth: useFullWidthLayout }">
+    <ft-card
+      big
+      class="card"
+    >
       <h2>{{ $t("Subscriptions.Subscriptions") }}</h2>
       <ft-flex-box
         class="subscriptionTabs"
diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js
index 0c6a681aa..d308c9c88 100644
--- a/src/renderer/views/Trending/Trending.js
+++ b/src/renderer/views/Trending/Trending.js
@@ -39,9 +39,6 @@ export default defineComponent({
     },
     trendingCache () {
       return this.$store.getters.getTrendingCache
-    },
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   mounted: function () {
diff --git a/src/renderer/views/Trending/Trending.scss b/src/renderer/views/Trending/Trending.scss
index dac92c840..b40247882 100644
--- a/src/renderer/views/Trending/Trending.scss
+++ b/src/renderer/views/Trending/Trending.scss
@@ -1,10 +1,6 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .floatingTopButton {
@@ -47,9 +43,3 @@
     position: absolute
   }
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue
index 1090b094c..c1cbf40f7 100644
--- a/src/renderer/views/Trending/Trending.vue
+++ b/src/renderer/views/Trending/Trending.vue
@@ -6,8 +6,8 @@
     />
     <ft-card
       v-else
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>{{ $t("Trending.Trending") }}</h2>
       <ft-flex-box
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.js b/src/renderer/views/UserPlaylists/UserPlaylists.js
index 533119c23..b3477dbc1 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.js
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.js
@@ -41,10 +41,6 @@ export default defineComponent({
       } else {
         return data.slice(0, this.dataLimit)
       }
-    },
-
-    useFullWidthLayout: function () {
-      return this.$store.getters.getUseFullWidthLayout
     }
   },
   watch: {
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.scss b/src/renderer/views/UserPlaylists/UserPlaylists.scss
index c0d12ce3a..a93ab9893 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.scss
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.scss
@@ -1,18 +1,8 @@
 .card {
   margin-block: 0 60px;
   margin-inline: auto;
-
-  &:not(.fullWidth) {
-    inline-size: 85%;
-  }
 }
 
 .message {
   color: var(--tertiary-text-color);
 }
-
-@media only screen and (max-width: 680px) {
-  .card:not(.fullWidth) {
-    inline-size: 90%;
-  }
-}
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue
index 8fc80c698..6f592aa32 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.vue
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.vue
@@ -6,8 +6,8 @@
     />
     <ft-card
       v-show="!isLoading"
+      big
       class="card"
-      :class="{ fullWidth: useFullWidthLayout }"
     >
       <h2>
         {{ $t("User Playlists.Your Playlists") }}