diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
index fcb7b96e50df..1bcc07735dda 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -25,9 +25,25 @@
   transition: background 0.2s ease-in;
 }
 
+.bubblePadding.sideNavGrid {
+  padding-block: 5px;
+  padding-inline: 0;
+  gap: 10px;
+  block-size: unset;
+}
+
+.bubblePadding.sideNavGrid > .bubble {
+  inline-size: 35px;
+  block-size: 35px;
+}
+
+.bubblePadding.sideNavGrid > .channelName {
+  max-inline-size: 90%;
+  font-size: 10.5px;
+  white-space: nowrap;
+}
+
 .bubble {
-  inline-size: 50px;
-  block-size: 50px;
   border-radius: 100%;
   -webkit-border-radius: 100%;
 }
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
index c9854b34d6eb..a8632c5c70bc 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
@@ -15,10 +15,22 @@ export default defineComponent({
       type: String,
       required: true
     },
+    bubbleSize: {
+      type: Number,
+      default: 50
+    },
     showSelected: {
       type: Boolean,
       default: false
-    }
+    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    sideNavGrid: {
+      type: Boolean,
+      default: false
+    },
   },
   data: function () {
     return {
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
index 53abe2f282c3..befe46a8e556 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
@@ -2,15 +2,24 @@
   <router-link
     v-if="!showSelected"
     class="bubblePadding"
+    :class="{
+      sideNavGrid
+    }"
     :aria-labelledby="sanitizedId"
+    :title="showTitle ? null : channelName"
     :to="`/channel/${channelId}`"
   >
     <img
       class="bubble"
+      :style="{
+        blockSize: bubbleSize + 'px',
+        inlineSize: bubbleSize + 'px'
+      }"
       :src="channelThumbnail"
       alt=""
     >
     <div
+      v-if="showTitle"
       :id="sanitizedId"
       class="channelName"
     >
@@ -23,11 +32,16 @@
     role="button"
     tabindex="0"
     :aria-labelledby="sanitizedId"
+    :title="showTitle ? null : channelName"
     @click="handleClick"
     @keydown.space.enter.prevent="handleClick($event)"
   >
     <img
       class="bubble"
+      :style="{
+        blockSize: bubbleSize + 'px',
+        inlineSize: bubbleSize + 'px'
+      }"
       :src="channelThumbnail"
       alt=""
     >
@@ -41,6 +55,7 @@
       />
     </div>
     <div
+      v-show="showTitle"
       :id="sanitizedId"
       class="channelName"
     >
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 93c4db4df142..f523ceea46ce 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -1,10 +1,12 @@
 import { defineComponent } from 'vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
+import FtButton from '../ft-button/ft-button.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
 export default defineComponent({
   name: 'FtIconButton',
   components: {
+    'ft-button': FtButton,
     'ft-prompt': FtPrompt
   },
   props: {
@@ -50,7 +52,9 @@ export default defineComponent({
     },
     dropdownOptions: {
       // Array of objects with these properties
-      // - type: ('labelValue'|'divider', default to 'labelValue' for less typing)
+      // - type: ('labelValue'|'divider'|'radiogroup', default to 'labelValue' for less typing)
+      // - radios: ({ type?: 'radio', label: String, value: String, checked: Boolean } | { type: divider })[]
+      //          (if type == 'radiogroup', representing a separate group of checkboxes)
       // - label: String (if type == 'labelValue')
       // - value: String (if type == 'labelValue')
       type: Array,
@@ -59,15 +63,31 @@ export default defineComponent({
     dropdownModalOnMobile: {
       type: Boolean,
       default: false
+    },
+    closeOnClick: {
+      type: Boolean,
+      default: true
+    },
+    hideIcon: {
+      type: Boolean,
+      default: false
+    },
+    useFtButton: {
+      type: Boolean,
+      default: false
     }
   },
   data: function () {
     return {
       dropdownShown: false,
-      mouseDownOnIcon: false,
       useModal: false
     }
   },
+  computed: {
+    id: function () {
+      return sanitizeForHtmlId(`iconButton-${this.title}`)
+    }
+  },
   mounted: function () {
     if (this.dropdownModalOnMobile) {
       this.useModal = window.innerWidth <= 900
@@ -102,16 +122,8 @@ export default defineComponent({
       }
     },
 
-    handleIconMouseDown: function () {
-      if (this.dropdownShown) {
-        this.mouseDownOnIcon = true
-      }
-    },
-
     handleDropdownFocusOut: function () {
-      if (this.mouseDownOnIcon) {
-        this.mouseDownOnIcon = false
-      } else if (!this.$refs.dropdown.matches(':focus-within')) {
+      if (this.dropdownShown && !this.$refs.iconButton.matches(':focus-within')) {
         this.dropdownShown = false
       }
     },
@@ -123,7 +135,58 @@ export default defineComponent({
         this.$emit('click', url)
       }
 
-      this.dropdownShown = false
+      if (this.closeOnClick) {
+        this.dropdownShown = false
+      }
+    },
+
+    handleRadioDropdownKeydown: function({ url, index, groupIndex }, event) {
+      if (!(event instanceof KeyboardEvent) || event.altKey) {
+        return
+      }
+
+      let isNext = null
+      switch (event.key) {
+        case ' ':
+        case 'Spacebar':
+          this.handleDropdownClick({ url, index })
+          return
+        case 'ArrowRight':
+        case 'ArrowDown':
+          isNext = true
+          break
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          isNext = false
+          break
+        default:
+          return
+      }
+
+      this.focusElement(
+        {
+          isNext,
+          index,
+          list: this.dropdownOptions[groupIndex].radios,
+          idPrefix: this.title,
+          groupIndex
+        }
+      )
+    },
+
+    focusElement: function ({ isNext, index, list, idPrefix, groupIndex }) {
+      let newIndex = index
+      const max = list.length - 1
+      do {
+        newIndex += (isNext ? 1 : -1)
+        if (newIndex === -1) {
+          newIndex = max
+        } else if (newIndex > max) {
+          newIndex = 0
+        }
+      } while (list[newIndex].type === 'divider')
+      const newElement = document.getElementById(sanitizeForHtmlId(idPrefix + groupIndex + '-' + newIndex))
+      newElement?.focus()
     },
 
     handleResize: function () {
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 58f776dd6414..7f083e0c75a8 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -81,6 +81,12 @@
   }
 }
 
+.iconFtButton {
+  display: flex;
+  gap: 10px;
+  inline-size: 100%;
+}
+
 .iconDropdown {
   background-color: var(--side-nav-color);
   box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
@@ -110,13 +116,13 @@
     inset-block-start: 45px;
   }
 
-  .list {
+  .list, .radiogroup {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
 
-  .listItem {
+  .listItem, .radioItem {
     cursor: pointer;
     margin: 0;
     padding-block: 8px;
@@ -138,6 +144,18 @@
     }
   }
 
+  .radioItem {
+    padding-inline: 10px;
+    display: flex;
+    gap: 15px;
+    text-align: start;
+    justify-content: space-between;
+  }
+
+  .uncheckedFiller {
+    inline-size: 10.5px;
+  }
+
   .listItemDivider {
     border-block-start: 1px solid var(--tertiary-text-color);
     margin-block: 1px;
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index b1760e528e60..9d8059fe7cf6 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -1,6 +1,12 @@
 <template>
-  <div class="ftIconButton">
+  <div
+    ref="iconButton"
+    class="ftIconButton"
+    @focusout="handleDropdownFocusOut"
+  >
     <font-awesome-icon
+      v-if="!hideIcon && !useFtButton"
+      :id="id"
       class="iconButton"
       :title="title"
       :icon="icon"
@@ -15,10 +21,26 @@
       tabindex="0"
       role="button"
       @click="handleIconClick"
-      @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"
     />
+    <ft-button
+      v-if="useFtButton"
+      :id="id"
+      class="iconFtButton"
+      @click="handleIconClick"
+    >
+      <font-awesome-icon
+        :icon="!hideIcon ? icon : null"
+        :class="{ [theme]: true }"
+        :style="{
+          fontSize: size + 'px'
+        }"
+      />
+      <span>
+        {{ title }}
+      </span>
+    </ft-button>
     <template
       v-if="dropdownShown"
     >
@@ -43,9 +65,9 @@
               aria-selected="false"
               tabindex="-1"
               :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
-              @click="handleDropdownClick({url: option.value, index: index})"
-              @keydown.enter="handleDropdownClick({url: option.value, index: index})"
-              @keydown.space="handleDropdownClick({url: option.value, index: index})"
+              @click="handleDropdownClick({url: option.value, index})"
+              @keydown.enter="handleDropdownClick({url: option.value, index})"
+              @keydown.space="handleDropdownClick({url: option.value, index})"
             >
               {{ option.type === 'divider' ? '' : option.label }}
             </li>
@@ -64,11 +86,50 @@
           bottom: dropdownPositionY === 'bottom',
           top: dropdownPositionY === 'top'
         }"
-        @focusout="handleDropdownFocusOut"
       >
         <slot>
+          <template
+            v-if="dropdownOptions[0]?.type === 'radiogroup'"
+          >
+            <div
+              v-for="(option, radioGroupIndex) in dropdownOptions"
+              :id="sanitizeForHtmlId(title + radioGroupIndex)"
+              :key="radioGroupIndex"
+              class="radiogroup"
+              role="radiogroup"
+            >
+              <div
+                v-for="(radio, radioButtonIndex) in option.radios"
+                :id="sanitizeForHtmlId(title + radioGroupIndex + '-' + radioButtonIndex)"
+                :key="radioGroupIndex + '-' + radioButtonIndex"
+                :role="radio.type === 'divider' ? 'separator' : 'radio'"
+                :aria-checked="radio.checked"
+                :tabindex="radio.checked ? '0' : '-1'"
+                :class="{
+                  radioItem: radio.type !== 'divider',
+                  listItemDivider: radio.type === 'divider',
+                  checked: radio.checked
+                }"
+                @click="handleDropdownClick({url: radio.value, index: radioButtonIndex})"
+                @keydown.left.right.up.down.space.prevent="handleRadioDropdownKeydown({url: radio.value, index: radioButtonIndex, groupIndex: radioGroupIndex}, $event)"
+              >
+                <span class="radioOptionLabel">
+                  {{ radio.type === 'divider' ? '' : radio.label }}
+                </span>
+                <font-awesome-icon
+                  v-if="radio.checked"
+                  :icon="['fas', 'check']"
+                  class="radioCheckedIcon"
+                />
+                <div
+                  v-else
+                  class="uncheckedFiller"
+                />
+              </div>
+            </div>
+          </template>
           <ul
-            v-if="dropdownOptions.length > 0"
+            v-else-if="dropdownOptions.length > 0"
             class="list"
             role="listbox"
             :aria-expanded="dropdownShown"
@@ -80,12 +141,17 @@
               :role="option.type === 'divider' ? 'separator' : 'option'"
               aria-selected="false"
               :tabindex="option.type === 'divider' ? '-1' : '0'"
-              :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
-              @click="handleDropdownClick({url: option.value, index: index}, $event)"
-              @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
-              @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
+              :class="{
+                listItem: option.type !== 'divider',
+                listItemDivider: option.type === 'divider'
+              }"
+              @click="handleDropdownClick({url: option.value, index})"
+              @keydown.enter="handleDropdownClick({url: option.value, index})"
+              @keydown.space="handleDropdownClick({url: option.value, index})"
             >
-              {{ option.type === 'divider' ? '' : option.label }}
+              <span>
+                {{ option.type === 'divider' ? '' : option.label }}
+              </span>
             </li>
           </ul>
         </slot>
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
index a3266e01b7c1..78e835329d63 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -27,6 +27,34 @@
   -webkit-border-radius: 50%;
 }
 
+.bubblePadding.profileSelectorGrid {
+  padding-block: 5px;
+  padding-inline: 0;
+  block-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bubblePadding.profileSelectorGrid > .bubble {
+  inline-size: 40px;
+  block-size: 40px;
+  margin-block: 0;
+}
+
+.bubblePadding.profileSelectorGrid > .profileName {
+  max-inline-size: 90%;
+  font-size: 16px;
+  line-height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bubblePadding.profileSelectorGrid .initial {
+  font-size: 20px;
+  padding-block: 10px;
+}
+
 .initial {
   font-size: 35px;
   line-height: 1em;
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
index 410640d145fa..42cfe4b5f9ee 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.js
@@ -4,6 +4,10 @@ import { sanitizeForHtmlId } from '../../helpers/accessibility'
 export default defineComponent({
   name: 'FtProfileBubble',
   props: {
+    action: {
+      type: Function,
+      default: null
+    },
     profileName: {
       type: String,
       required: true
@@ -12,6 +16,14 @@ export default defineComponent({
       type: String,
       required: true
     },
+    profileSelectorGrid: {
+      type: Boolean,
+      default: false
+    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
     backgroundColor: {
       type: String,
       required: true
@@ -19,7 +31,7 @@ export default defineComponent({
     textColor: {
       type: String,
       required: true
-    }
+    },
   },
   computed: {
     sanitizedId: function() {
@@ -31,6 +43,11 @@ export default defineComponent({
   },
   methods: {
     goToProfile: function (event) {
+      if (this.action) {
+        this.action(this.profileId)
+        return
+      }
+
       if (event instanceof KeyboardEvent) {
         if (event.target.getAttribute('role') === 'link' && event.key !== 'Enter') {
           return
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
index cfed977e6899..7319da4f4e59 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.vue
@@ -1,8 +1,12 @@
 <template>
   <div
     class="bubblePadding"
+    :class="{
+      profileSelectorGrid
+    }"
     tabindex="0"
     :aria-labelledby="sanitizedId"
+    :title="showTitle ? null : profileName"
     @click="goToProfile"
     @keydown.space.prevent="goToProfile($event)"
     @keydown.enter.prevent="goToProfile($event)"
@@ -16,6 +20,7 @@
       </div>
     </div>
     <div
+      v-show="showTitle"
       :id="sanitizedId"
       class="profileName"
     >
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index 94ee6e91d376..8c19ce502ef9 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -36,9 +36,16 @@
 .profileWrapper {
   margin-block-start: 60px;
   block-size: 340px;
+  inline-size: 260px;
   overflow-y: auto;
 }
 
+.iconGrid {
+  display: flex;
+  flex-wrap: wrap;
+  block-size: unset;
+}
+
 .profile {
   cursor: pointer;
   block-size: 50px;
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.js b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
index 24faf0fed688..8937a917a4a4 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.js
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
@@ -1,15 +1,16 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
-
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
-import { showToast } from '../../helpers/utils'
+import FtProfileBubble from '../ft-profile-bubble/ft-profile-bubble.vue'
+import { deepCopy, showToast, sortListUsingMethod } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'FtProfileSelector',
   components: {
     'ft-card': FtCard,
-    'ft-icon-button': FtIconButton
+    'ft-icon-button': FtIconButton,
+    'ft-profile-bubble': FtProfileBubble
   },
   data: function () {
     return {
@@ -21,6 +22,14 @@ export default defineComponent({
     profileList: function () {
       return this.$store.getters.getProfileList
     },
+    sortedProfileList: function () {
+      const profileList = deepCopy(this.profileList)
+      // profiles are already sorted alphabetically ascending
+      if (this.profileListOptions.sort !== 'alphabeticalAscending') {
+        sortListUsingMethod(profileList, 'name', this.profileListOptions.sort)
+      }
+      return profileList
+    },
     activeProfile: function () {
       return this.$store.getters.getActiveProfile
     },
@@ -32,7 +41,10 @@ export default defineComponent({
       return this.profileList.map((profile) => {
         return profile?.name?.length > 0 ? Array.from(profile.name)[0].toUpperCase() : ''
       })
-    }
+    },
+    profileListOptions: function () {
+      return this.$store.getters.getProfileListOptions
+    },
   },
   methods: {
     toggleProfileList: function () {
@@ -69,15 +81,19 @@ export default defineComponent({
     },
 
     setActiveProfile: function (profile) {
-      if (this.activeProfile._id !== profile._id) {
+      this.setActiveProfileGivenId(profile._id)
+    },
+
+    setActiveProfileGivenId: function (id) {
+      if (this.activeProfile._id !== id) {
         const targetProfile = this.profileList.find((x) => {
-          return x._id === profile._id
+          return x._id === id
         })
 
         if (targetProfile) {
           this.updateActiveProfile(targetProfile._id)
 
-          showToast(this.$t('Profile.{profile} is now the active profile', { profile: profile.name }))
+          showToast(this.$t('Profile.{profile} is now the active profile', { profile: targetProfile.name }))
         }
       }
 
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
index f9696ad46a31..c9cd679064b0 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -36,12 +36,13 @@
         @click="openProfileSettings"
       />
       <div
+        v-if="profileListOptions.displayType === 'list'"
         class="profileWrapper"
         role="listbox"
         aria-labelledby="profileListTitle"
       >
         <div
-          v-for="(profile, index) in profileList"
+          v-for="(profile, index) in sortedProfileList"
           :id="'profile-' + index"
           :key="index"
           class="profile"
@@ -70,6 +71,33 @@
           </p>
         </div>
       </div>
+      <div
+        v-else
+        class="profileWrapper"
+      >
+        <div
+          role="listbox"
+          class="iconGrid"
+          aria-labelledby="profileListTitle"
+        >
+          <ft-profile-bubble
+            v-for="(profile, index) in sortedProfileList"
+            :id="'profile-' + index"
+            :key="index"
+            :profile-id="profile._id"
+            :profile-name="profile.name"
+            :background-color="profile.bgColor"
+            :text-color="profile.textColor"
+            class="gridProfile"
+            :style="{ inlineSize: 100 / profileListOptions.itemsPerGridRow + '%' }"
+            :profile-selector-grid="true"
+            :show-title="profileListOptions.showGridItemTitles"
+            aria-selected="false"
+            role="option"
+            :action="setActiveProfileGivenId"
+          />
+        </div>
+      </div>
     </ft-card>
   </div>
 </template>
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index de36a3f621bf..75e571b10596 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -169,6 +169,11 @@
   margin-block-end: 0.3em;
 }
 
+.iconGrid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 @media only screen and (max-width: 680px) {
   .inner {
     display: contents; /* sunglasses emoji */
diff --git a/src/renderer/components/side-nav/side-nav.js b/src/renderer/components/side-nav/side-nav.js
index 76adcbfd581b..7f86fadb795f 100644
--- a/src/renderer/components/side-nav/side-nav.js
+++ b/src/renderer/components/side-nav/side-nav.js
@@ -1,12 +1,14 @@
 import { defineComponent } from 'vue'
+import FtChannelBubble from '../ft-channel-bubble/ft-channel-bubble.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import SideNavMoreOptions from '../side-nav-more-options/side-nav-more-options.vue'
 import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
-import { deepCopy } from '../../helpers/utils'
+import { deepCopy, sortListUsingMethod } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'SideNav',
   components: {
+    'ft-channel-bubble': FtChannelBubble,
     'ft-flex-box': FtFlexBox,
     'side-nav-more-options': SideNavMoreOptions
   },
@@ -35,9 +37,7 @@ export default defineComponent({
     activeSubscriptions: function () {
       const subscriptions = deepCopy(this.activeProfile.subscriptions)
 
-      subscriptions.sort((a, b) => {
-        return a.name?.toLowerCase().localeCompare(b.name?.toLowerCase(), this.locale)
-      })
+      sortListUsingMethod(subscriptions, 'name', this.subscriptionListOptions.sort)
 
       if (this.backendPreference === 'invidious') {
         subscriptions.forEach((channel) => {
@@ -65,6 +65,9 @@ export default defineComponent({
     hideText: function () {
       return !this.isOpen && this.hideLabelsSideBar
     },
+    subscriptionListOptions: function () {
+      return this.$store.getters.getSubscriptionListOptions
+    },
     applyNavIconExpand: function() {
       return {
         navIconExpand: this.hideText
@@ -74,6 +77,11 @@ export default defineComponent({
       return {
         hiddenLabels: this.hideText
       }
-    }
+    },
+  },
+  methods: {
+    navigate: function (route) {
+      this.$router.push('/' + route)
+    },
   }
 })
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index b46924602902..5ec40bfe0d4d 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -200,7 +200,7 @@
       </router-link>
       <hr>
       <div
-        v-if="!hideActiveSubscriptions"
+        v-if="!hideActiveSubscriptions && (!isOpen || subscriptionListOptions.displayType === 'list')"
       >
         <router-link
           v-for="(channel, index) in activeSubscriptions"
@@ -208,7 +208,6 @@
           :to="`/channel/${channel.id}`"
           class="navChannel channelLink mobileHidden"
           :title="channel.name"
-          role="button"
         >
           <div
             class="thumbnailContainer"
@@ -230,6 +229,25 @@
           </p>
         </router-link>
       </div>
+      <div
+        v-if="isOpen && subscriptionListOptions.displayType === 'grid'"
+        class="iconGrid mobileHidden"
+      >
+        <ft-channel-bubble
+          v-for="(channel, index) in activeSubscriptions"
+          :id="`sidenav-channel-${index}`"
+          :key="index"
+          class="mobileHidden"
+          :style="{ inlineSize: 100 / subscriptionListOptions.itemsPerGridRow + '%' }"
+          :channel-id="channel.id"
+          :channel-name="channel.name"
+          :channel-thumbnail="channel.thumbnail"
+          :side-nav-grid="true"
+          :bubble-size="subscriptionListOptions.itemsPerGridRow > 2 ? 35 : 50"
+          :show-title="subscriptionListOptions.showGridItemTitles"
+          @click="navigate(`channel/${channel.id}`)"
+        />
+      </div>
     </div>
   </ft-flex-box>
 </template>
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index 090a6dc8984c..9b9225bb679d 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/src/renderer/components/theme-settings/theme-settings.js
@@ -7,6 +7,7 @@ import FtSlider from '../ft-slider/ft-slider.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { colors } from '../../helpers/colors'
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 
 export default defineComponent({
   name: 'ThemeSettings',
@@ -16,6 +17,7 @@ export default defineComponent({
     'ft-toggle-switch': FtToggleSwitch,
     'ft-slider': FtSlider,
     'ft-flex-box': FtFlexBox,
+    'ft-icon-button': FtIconButton,
     'ft-prompt': FtPrompt
   },
   data: function () {
@@ -38,6 +40,10 @@ export default defineComponent({
         'catppuccinMocha',
         'pastelPink',
         'hotPink'
+      ],
+      settingsSectionListOrderValues: [
+        'defaultSort',
+        'alphabeticalAscending'
       ]
     }
   },
@@ -124,7 +130,34 @@ export default defineComponent({
 
     usingElectron: function () {
       return process.env.IS_ELECTRON
-    }
+    },
+
+    subscriptionListOptions: function () {
+      return this.$store.getters.getSubscriptionListOptions
+    },
+
+    profileListOptions: function () {
+      return this.$store.getters.getProfileListOptions
+    },
+
+    settingsSectionListOrder: function () {
+      return this.$store.getters.getSettingsSectionListOrder
+    },
+
+    settingsSectionListOrderNames: function () {
+      return [
+        this.$t('Settings.Theme Settings.List Display Settings.Sort.Default'),
+        this.$t('Settings.Theme Settings.List Display Settings.Sort.Sort by title (A to Z)'),
+      ]
+    },
+
+    subscriptionListDisplayDropdownOptions: function () {
+      return this.listDisplayDropdownOptions(this.subscriptionListOptions)
+    },
+
+    profileListDisplayDropdownOptions: function () {
+      return this.listDisplayDropdownOptions(this.profileListOptions)
+    },
   },
   mounted: function () {
     this.disableSmoothScrollingToggleValue = this.disableSmoothScrolling
@@ -159,6 +192,149 @@ export default defineComponent({
       })
     },
 
+    handleSubscriptionListDisplayDropdownOptionClick: function (option) {
+      const newListOptions = this.getNewListOptions(this.subscriptionListOptions, option)
+      this.updateSubscriptionListOptions(newListOptions)
+    },
+
+    handleProfileListDisplayDropdownOptionClick: function (option) {
+      const newListOptions = this.getNewListOptions(this.profileListOptions, option)
+      this.updateProfileListOptions(newListOptions)
+    },
+
+    getNewListOptions: function(list, option) {
+      switch (option) {
+        case 'defaultSort':
+        case 'alphabeticalAscending':
+        case 'alphabeticalDescending':
+          return {
+            ...list,
+            sort: option
+          }
+        case 'showGridItemTitles':
+        case 'hideGridItemTitles':
+          return {
+            ...list,
+            showGridItemTitles: option === 'showGridItemTitles'
+          }
+        case 'list':
+        case 'grid':
+          return {
+            ...list,
+            displayType: option
+          }
+        default:
+          return {
+            ...list,
+            itemsPerGridRow: option
+          }
+      }
+    },
+
+    listDisplayDropdownOptions: function (listOptions) {
+      const radioGroupSort = []
+      const options = [
+        {
+          type: 'radiogroup',
+          radios: radioGroupSort
+        }
+      ]
+
+      radioGroupSort.push(
+        {
+          type: 'checkbox',
+          label: this.$t('Settings.Theme Settings.List Display Settings.Sort.Sort by title (A to Z)'),
+          value: 'alphabeticalAscending',
+          checked: listOptions.sort === 'alphabeticalAscending',
+        },
+        {
+          type: 'checkbox',
+          label: this.$t('Settings.Theme Settings.List Display Settings.Sort.Sort by title (Z to A)'),
+          value: 'alphabeticalDescending',
+          checked: listOptions.sort === 'alphabeticalDescending',
+        }
+      )
+
+      if (listOptions.displayType) {
+        const radioGroupDisplayType = []
+        options.push(
+          {
+            type: 'radiogroup',
+            radios: radioGroupDisplayType
+          }
+        )
+        radioGroupDisplayType.push(
+          {
+            type: 'divider'
+          },
+          {
+            type: 'checkbox',
+            label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.List'),
+            value: 'list',
+            checked: listOptions.displayType === 'list',
+          },
+          {
+            type: 'checkbox',
+            label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.Grid.Grid'),
+            value: 'grid',
+            checked: listOptions.displayType === 'grid',
+          }
+        )
+
+        if (listOptions.displayType === 'grid') {
+          const radioGroupItemsPerGridRow = []
+          options.push(
+            {
+              type: 'radiogroup',
+              radios: radioGroupItemsPerGridRow
+            }
+          )
+
+          radioGroupItemsPerGridRow.push(
+            {
+              type: 'divider'
+            }
+          )
+
+          for (let i = 2; i <= 5; ++i) {
+            radioGroupItemsPerGridRow.push({
+              type: 'checkbox',
+              label: this.$tc('Settings.Theme Settings.List Display Settings.Display Type.Grid.Item per grid row', i, { number: i }),
+              value: i,
+              checked: listOptions.itemsPerGridRow === i
+            })
+          }
+
+          const radioGroupShowGridItemTitles = []
+          options.push(
+            {
+              type: 'radiogroup',
+              radios: radioGroupShowGridItemTitles
+            }
+          )
+          radioGroupShowGridItemTitles.push(
+            {
+              type: 'divider'
+            },
+            {
+              type: 'checkbox',
+              label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.Grid.Show grid item titles'),
+              value: 'showGridItemTitles',
+              checked: listOptions.showGridItemTitles
+            },
+            {
+              type: 'checkbox',
+              label: this.$t('Settings.Theme Settings.List Display Settings.Display Type.Grid.Hide grid item titles'),
+              value: 'hideGridItemTitles',
+              checked: !listOptions.showGridItemTitles,
+            }
+          )
+        }
+      }
+
+      return options
+    },
+
     ...mapActions([
       'updateBarColor',
       'updateBaseTheme',
@@ -168,7 +344,11 @@ export default defineComponent({
       'updateUiScale',
       'updateDisableSmoothScrolling',
       'updateHideLabelsSideBar',
-      'updateHideHeaderLogo'
+      'updateHideHeaderLogo',
+      'updateSubscriptionListSort',
+      'updateSubscriptionListOptions',
+      'updateProfileListOptions',
+      'updateSettingsSectionListOrder'
     ])
   }
 })
diff --git a/src/renderer/components/theme-settings/theme-settings.scss b/src/renderer/components/theme-settings/theme-settings.scss
new file mode 100644
index 000000000000..3918304d6a60
--- /dev/null
+++ b/src/renderer/components/theme-settings/theme-settings.scss
@@ -0,0 +1,9 @@
+.switchColumn > .listDisplayOptions {
+  inline-size: 100%;
+}
+
+@media only screen and (max-width: 680px) {
+  .listDisplayOptions {
+    display: none;
+  }
+}
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index 27cd6d8589c8..91a81a6d37da 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -39,6 +39,7 @@
         />
       </div>
     </div>
+    <br>
     <ft-flex-box>
       <ft-slider
         :label="$t('Settings.Theme Settings.UI Scale')"
@@ -51,6 +52,42 @@
       />
     </ft-flex-box>
     <br>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-select
+          :placeholder="$t('Settings.Theme Settings.Settings Section Sort Order')"
+          :value="settingsSectionListOrder"
+          :select-names="settingsSectionListOrderNames"
+          :select-values="settingsSectionListOrderValues"
+          @change="updateSettingsSectionListOrder"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-icon-button
+          class="listDisplayOptions"
+          :icon="['fas', 'bars']"
+          :title="$t('Settings.Theme Settings.List Display Settings.Subscription List Display Options')"
+          :use-ft-button="true"
+          :close-on-click="false"
+          :size="22"
+          dropdown-position-x="bottom"
+          :dropdown-options="subscriptionListDisplayDropdownOptions"
+          @click="handleSubscriptionListDisplayDropdownOptionClick"
+        />
+        <ft-icon-button
+          class="listDisplayOptions"
+          :icon="['fas', 'user']"
+          :title="$t('Settings.Theme Settings.List Display Settings.Profile List Display Options')"
+          :use-ft-button="true"
+          :close-on-click="false"
+          :size="22"
+          dropdown-position-x="bottom"
+          :dropdown-options="profileListDisplayDropdownOptions"
+          @click="handleProfileListDisplayDropdownOptionClick"
+        />
+      </div>
+    </div>
+    <br>
     <ft-flex-box>
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Base Theme.Base Theme')"
@@ -87,3 +124,4 @@
 </template>
 
 <script src="./theme-settings.js" />
+<style scoped lang="scss" src="./theme-settings.scss" />
diff --git a/src/renderer/helpers/utils.js b/src/renderer/helpers/utils.js
index 5f4d2c820138..0db1b4612bb2 100644
--- a/src/renderer/helpers/utils.js
+++ b/src/renderer/helpers/utils.js
@@ -10,6 +10,7 @@ import router from '../router/index'
 export const CHANNEL_HANDLE_REGEX = /^@[\w.-]{3,30}$/
 
 const PUBLISHED_TEXT_REGEX = /(\d+)\s?([a-z]+)/i
+
 /**
  * @param {string} publishedText
  */
@@ -673,6 +674,20 @@ export function deepCopy(obj) {
   return JSON.parse(JSON.stringify(obj))
 }
 
+export function sortListUsingMethod(list, property, method) {
+  const locale = i18n.locale.replace('_', '-')
+  switch (method) {
+    case 'defaultSort':
+      break
+    case 'alphabeticalAscending':
+      list.sort((a, b) => a[property]?.toLowerCase().localeCompare(b[property]?.toLowerCase(), locale))
+      break
+    case 'alphabeticalDescending':
+      list.sort((a, b) => b[property]?.toLowerCase().localeCompare(a[property]?.toLowerCase(), locale))
+      break
+  }
+}
+
 /**
  * Check if the `name` of the error is `TimeoutError` to know if the error was caused by a timeout or something else.
  * @param {number} timeoutMs
diff --git a/src/renderer/main.js b/src/renderer/main.js
index c8345edf46fe..ff437e027128 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -62,6 +62,7 @@ import {
   faThumbtack,
   faTimes,
   faTimesCircle,
+  faUser,
   faUsers,
 } from '@fortawesome/free-solid-svg-icons'
 import {
@@ -134,6 +135,7 @@ library.add(
   faThumbtack,
   faTimes,
   faTimesCircle,
+  faUser,
   faUsers,
 
   // brand icons
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index ba2ff912b121..2a8b8d17ef70 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -297,6 +297,19 @@ const state = {
   allowDashAv1Formats: false,
   commentAutoLoadEnabled: false,
   useDeArrowTitles: false,
+  profileListOptions: {
+    sort: 'alphabeticalAscending',
+    displayType: 'list',
+    showGridItemTitles: true,
+    itemsPerGridRow: 2
+  },
+  subscriptionListOptions: {
+    sort: 'alphabeticalAscending',
+    displayType: 'list',
+    showGridItemTitles: true,
+    itemsPerGridRow: 2
+  },
+  settingsSectionListOrder: 'defaultSort'
 }
 
 const stateWithSideEffects = {
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index b208bc265564..d4842b56e411 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -14,6 +14,7 @@ import ParentControlSettings from '../../components/parental-control-settings/pa
 import ExperimentalSettings from '../../components/experimental-settings/experimental-settings.vue'
 import PasswordSettings from '../../components/password-settings/password-settings.vue'
 import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
+import { deepCopy, sortListUsingMethod } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'Settings',
@@ -36,17 +37,96 @@ export default defineComponent({
   },
   data: function () {
     return {
-      unlocked: false
+      unlocked: false,
+      settingsComponentsData: [
+        {
+          type: 'general-settings',
+          title: this.$t('Settings.General Settings.General Settings')
+        },
+        {
+          type: 'theme-settings',
+          title: this.$t('Settings.Theme Settings.Theme Settings')
+        },
+        {
+          type: 'player-settings',
+          title: this.$t('Settings.Player Settings.Player Settings')
+        },
+        {
+          type: 'external-player-settings',
+          title: this.$t('Settings.External Player Settings.External Player Settings'),
+          electronNeeded: true
+        },
+        {
+          type: 'subscription-settings',
+          title: this.$t('Settings.Subscription Settings.Subscription Settings')
+        },
+        {
+          type: 'distraction-settings',
+          title: this.$t('Settings.Distraction Free Settings.Distraction Free Settings')
+        },
+        {
+          type: 'privacy-settings',
+          title: this.$t('Settings.Privacy Settings.Privacy Settings')
+        },
+        {
+          type: 'data-settings',
+          title: this.$t('Settings.Data Settings.Data Settings')
+        },
+        {
+          type: 'proxy-settings',
+          title: this.$t('Settings.Proxy Settings.Proxy Settings'),
+          electronNeeded: true
+        },
+        {
+          type: 'download-settings',
+          title: this.$t('Settings.Download Settings.Download Settings'),
+          electronNeeded: true
+        },
+        {
+          type: 'parental-control-settings',
+          title: this.$t('Settings.Parental Control Settings.Parental Control Settings')
+        },
+        {
+          type: 'sponsor-block-settings',
+          title: this.$t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
+        },
+        {
+          type: 'experimental-settings',
+          title: this.$t('Settings.Experimental Settings.Experimental Settings'),
+          electronNeeded: true
+        },
+        {
+          type: 'password-settings',
+          title: this.$t('Settings.Password Settings.Password Settings')
+        },
+      ]
     }
   },
   computed: {
+    settingsComponents: function () {
+      if (!process.env.IS_ELECTRON) {
+        return this.settingsComponentsData.filter((settingsComponent) => !settingsComponent.electronNeeded)
+      }
+      return this.settingsComponentsData
+    },
+
+    sortedSettingsSectionComponents: function () {
+      const settingsComponents = deepCopy(this.settingsComponents)
+      sortListUsingMethod(settingsComponents, 'title', this.settingsSectionListOrder)
+      return settingsComponents
+    },
+
     usingElectron: function () {
       return process.env.IS_ELECTRON
     },
 
     settingsPassword: function () {
       return this.$store.getters.getSettingsPassword
-    }
+    },
+
+    settingsSectionListOrder: function () {
+      return this.$store.getters.getSettingsSectionListOrder
+    },
   },
   created: function () {
     if (this.settingsPassword === '') {
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 0109b54cdd09..64934d24689b 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,33 +1,18 @@
 <template>
   <div>
     <template v-if="unlocked">
-      <general-settings />
-      <hr>
-      <theme-settings />
-      <hr>
-      <player-settings />
-      <hr>
-      <external-player-settings v-if="usingElectron" />
-      <hr v-if="usingElectron">
-      <subscription-settings />
-      <hr>
-      <distraction-settings />
-      <hr>
-      <privacy-settings />
-      <hr>
-      <data-settings />
-      <hr>
-      <proxy-settings v-if="usingElectron" />
-      <hr v-if="usingElectron">
-      <download-settings v-if="usingElectron" />
-      <hr v-if="usingElectron">
-      <parental-control-settings />
-      <hr>
-      <sponsor-block-settings />
-      <hr v-if="usingElectron">
-      <experimental-settings v-if="usingElectron" />
-      <hr>
-      <password-settings />
+      <template
+        v-for="(settingsComponent, i) in sortedSettingsSectionComponents"
+      >
+        <hr
+          v-if="i !== 0"
+          :key="settingsComponent.type + 'hr'"
+        >
+        <component
+          :is="settingsComponent.type"
+          :key="settingsComponent.type + 'component'"
+        />
+      </template>
     </template>
     <password-dialog
       v-else
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index b1b6a720a6e2..774306272915 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -52,7 +52,6 @@ Global:
     Subscriber Count: 1 subscriber | {count} subscribers
     View Count: 1 view | {count} views
     Watching Count: 1 watching | {count} watching
-
 # Search Bar
 Search / Go to URL: Search / Go to URL
 Search Bar:
@@ -198,6 +197,21 @@ Settings:
     UI Scale: UI Scale
     Hide Side Bar Labels: Hide Side Bar Labels
     Hide FreeTube Header Logo: Hide FreeTube Header Logo
+    Settings Section Sort Order: Settings Section Sort Order
+    List Display Settings:
+      Subscription List Display Options: Subscription List Display Options
+      Profile List Display Options: Profile List Display Options
+      Sort:
+        Default: Default
+        Sort by title (A to Z): Sort by title (A to Z)
+        Sort by title (Z to A): Sort by title (Z to A)
+      Display Type:
+        List: List
+        Grid:
+          Grid: Grid
+          Item per grid row: 1 item per grid row | {number} items per grid row
+          Show grid item titles: Show grid item titles
+          Hide grid item titles: Hide grid item titles
     Base Theme:
       Base Theme: Base Theme
       Black: Black
@@ -474,6 +488,7 @@ Settings:
     Set Password To Prevent Access: Set a password to prevent access to settings
     Set Password: Set Password
     Remove Password: Remove Password
+
 About:
   #On About page
   About: About