diff --git a/app/assets/javascripts/discourse/app/components/sidebar.js b/app/assets/javascripts/discourse/app/components/sidebar.js
index 56acf0c914c..2235025463c 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar.js
@@ -1,7 +1,5 @@
 import GlimmerComponent from "discourse/components/glimmer";
 import { bind } from "discourse-common/utils/decorators";
-import { customSections as sidebarCustomSections } from "discourse/lib/sidebar/custom-sections";
-import { cached } from "@glimmer/tracking";
 
 export default class Sidebar extends GlimmerComponent {
   constructor() {
@@ -38,11 +36,4 @@ export default class Sidebar extends GlimmerComponent {
       document.removeEventListener("click", this.collapseSidebar);
     }
   }
-
-  @cached
-  get customSections() {
-    return sidebarCustomSections.map((customSection) => {
-      return new customSection({ sidebar: this });
-    });
-  }
 }
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/sections.js b/app/assets/javascripts/discourse/app/components/sidebar/sections.js
new file mode 100644
index 00000000000..c260f738651
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/sidebar/sections.js
@@ -0,0 +1,17 @@
+import GlimmerComponent from "discourse/components/glimmer";
+import { customSections as sidebarCustomSections } from "discourse/lib/sidebar/custom-sections";
+
+export default class SidebarSections extends GlimmerComponent {
+  customSections;
+
+  constructor() {
+    super(...arguments);
+    this.customSections = this._customSections;
+  }
+
+  get _customSections() {
+    return sidebarCustomSections.map((customSection) => {
+      return new customSection({ sidebar: this });
+    });
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
index 12058f9218c..0750f30782f 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
@@ -1,52 +1,5 @@
 <DSection @pageClass="has-sidebar" @class="sidebar-container" @scrollTop={{false}}>
   <div class="sidebar-scroll-wrap">
-    <Sidebar::TopicsSection />
-    <Sidebar::CategoriesSection />
-
-    {{#if this.siteSettings.tagging_enabled}}
-      <Sidebar::TagsSection />
-    {{/if}}
-
-    {{#if this.siteSettings.enable_personal_messages}}
-      <Sidebar::MessagesSection />
-    {{/if}}
-
-    {{#each this.customSections as |customSection|}}
-      <Sidebar::Section
-        @sectionName={{customSection.name}}
-        @headerRoute={{customSection.route}}
-        @headerLinkText={{customSection.text}}
-        @headerLinkTitle={{customSection.title}}
-        @headerActionsIcon={{customSection.actionsIcon}}
-        @headerActions={{customSection.actions}}
-        @willDestroy={{customSection.willDestroy}}>
-
-        {{#each customSection.links as |link|}}
-          <Sidebar::SectionLink
-            @linkName={{link.name}}
-            @route={{link.route}}
-            @model={{link.model}}
-            @title={{link.title}}
-            @prefixColor={{link.prefixColor}}
-            @prefixBadge={{link.prefixBadge}}
-            @prefixType={{link.prefixType}}
-            @prefixValue={{link.prefixValue}}
-            @prefixCSSClass={{link.prefixCSSClass}}
-            @suffixType={{link.suffixType}}
-            @suffixValue={{link.suffixValue}}
-            @suffixCSSClass={{link.suffixCSSClass}}
-            @hoverType={{link.hoverType}}
-            @hoverValue={{link.hoverValue}}
-            @hoverAction={{link.hoverAction}}
-            @hoverTitle={{link.hoverTitle}}
-            @currentWhen={{link.currentWhen}}
-            @content={{link.text}} />
-        {{/each}}
-      </Sidebar::Section>
-    {{/each}}
-
-    {{!-- DO NOT USE, this outlet is temporary and will be removed. --}}
-    {{!-- Outlet will be replaced with sidebar API. --}}
-    <PluginOutlet @name="after-sidebar" />
+    <Sidebar::Sections />
   </div>
 </DSection>
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs
index 2ff45cec2b2..293bd5341e0 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs
@@ -12,17 +12,21 @@
         {{#if (eq @prefixType "image")}}
           <img src={{@prefixValue}} class="prefix-image">
         {{/if}}
+
         {{#if (eq @prefixType "text")}}
           {{@prefixValue}}
         {{/if}}
+
         {{#if (eq @prefixType "icon")}}
           {{d-icon @prefixValue class="prefix-icon"}}
         {{/if}}
+
         {{#if @prefixBadge}}
           {{d-icon @prefixBadge class="prefix-badge"}}
         {{/if}}
       </span>
     {{/if}}
+
     <span class="sidebar-section-link-content-text">
       {{@content}}
     </span>
@@ -41,6 +45,7 @@
       </span>
     {{/if}}
   </Sidebar::SectionLinkTo>
+
   {{#if @hoverValue}}
     <span class="sidebar-section-link-hover">
       <button
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/sections.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/sections.hbs
new file mode 100644
index 00000000000..18d58292f0b
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/sections.hbs
@@ -0,0 +1,50 @@
+<div class="sidebar-sections">
+  <Sidebar::TopicsSection />
+  <Sidebar::CategoriesSection />
+
+  {{#if this.siteSettings.tagging_enabled}}
+    <Sidebar::TagsSection />
+  {{/if}}
+
+  {{#if this.siteSettings.enable_personal_messages}}
+    <Sidebar::MessagesSection />
+  {{/if}}
+
+  {{#each this.customSections as |customSection|}}
+    <Sidebar::Section
+      @sectionName={{customSection.name}}
+      @headerRoute={{customSection.route}}
+      @headerLinkText={{customSection.text}}
+      @headerLinkTitle={{customSection.title}}
+      @headerActionsIcon={{customSection.actionsIcon}}
+      @headerActions={{customSection.actions}}
+      @willDestroy={{customSection.willDestroy}}>
+
+      {{#each customSection.links as |link|}}
+        <Sidebar::SectionLink
+          @linkName={{link.name}}
+          @route={{link.route}}
+          @model={{link.model}}
+          @title={{link.title}}
+          @prefixColor={{link.prefixColor}}
+          @prefixBadge={{link.prefixBadge}}
+          @prefixType={{link.prefixType}}
+          @prefixValue={{link.prefixValue}}
+          @prefixCSSClass={{link.prefixCSSClass}}
+          @suffixType={{link.suffixType}}
+          @suffixValue={{link.suffixValue}}
+          @suffixCSSClass={{link.suffixCSSClass}}
+          @hoverType={{link.hoverType}}
+          @hoverValue={{link.hoverValue}}
+          @hoverAction={{link.hoverAction}}
+          @hoverTitle={{link.hoverTitle}}
+          @currentWhen={{link.currentWhen}}
+          @content={{link.text}} />
+      {{/each}}
+    </Sidebar::Section>
+  {{/each}}
+
+  {{!-- DO NOT USE, this outlet is temporary and will be removed. --}}
+  {{!-- Outlet will be replaced with sidebar API. --}}
+  <PluginOutlet @name="after-sidebar" />
+</div>
diff --git a/app/assets/stylesheets/common/base/_index.scss b/app/assets/stylesheets/common/base/_index.scss
index 6741fdc6bbe..18d8625d279 100644
--- a/app/assets/stylesheets/common/base/_index.scss
+++ b/app/assets/stylesheets/common/base/_index.scss
@@ -45,6 +45,8 @@
 @import "share_link";
 @import "shared-drafts";
 @import "sidebar";
+@import "sidebar-section";
+@import "sidebar-section-link";
 @import "tagging";
 @import "tooltip";
 @import "topic-admin-menu";
diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss
new file mode 100644
index 00000000000..0bcfd848787
--- /dev/null
+++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss
@@ -0,0 +1,132 @@
+.sidebar-section-link-wrapper {
+  display: flex;
+  align-items: center;
+
+  .sidebar-section-link {
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    padding: 0.35em 0.5em;
+    color: var(--primary-high);
+    font-size: var(--font-down-1);
+    transition: background-color 0.25s;
+
+    &:hover {
+      background: var(--primary-low);
+    }
+
+    &.active {
+      color: var(--primary);
+      font-weight: bold;
+    }
+
+    .sidebar-section-link-content-badge {
+      @include ellipsis;
+      padding-left: 0.5em;
+      text-align: right;
+      color: var(--tertiary);
+      font-size: var(--font-down-1);
+      font-weight: normal;
+      margin-left: auto;
+    }
+
+    .sidebar-section-link-content-text {
+      @include ellipsis;
+
+      .badge-wrapper {
+        font-size: 100%;
+        width: 100%;
+
+        .category-name {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  .sidebar-section-link-personal-messages-sent,
+  .sidebar-section-link-personal-messages-new,
+  .sidebar-section-link-personal-messages-archive,
+  .sidebar-section-link-personal-messages-unread,
+  .sidebar-section-link-group-messages-new,
+  .sidebar-section-link-group-messages-unread,
+  .sidebar-section-link-group-messages-archive {
+    margin-left: 0.5em;
+  }
+
+  .sidebar-section-link-prefix {
+    &.image {
+      img {
+        border-radius: 50%;
+        width: 20px;
+        aspect-ratio: auto 20 / 20;
+        height: 20px;
+        margin-right: 0.75em;
+      }
+    }
+
+    &.text {
+      border-radius: 3px;
+      background: rgba(var(--primary-rgb), 0.1);
+      text-align: center;
+      font-size: var(--font-down-1);
+      padding: 0.2em 0.5em;
+      margin-right: 0.25em;
+    }
+
+    &.icon {
+      position: relative;
+      margin-right: 0.75em;
+
+      svg.prefix-badge {
+        position: absolute;
+        background-color: var(--secondary);
+        border-radius: 50%;
+        padding: 2px 2px 3px;
+        color: var(--primary-high);
+        height: 0.5rem;
+        width: 0.5rem;
+        margin-left: -0.4rem;
+      }
+    }
+  }
+
+  .sidebar-section-link-suffix.icon {
+    align-items: center;
+    display: flex;
+    margin-left: 0.5em;
+  }
+
+  .sidebar-section-link-hover {
+    .sidebar-section-hover-button {
+      display: none;
+      color: var(--primary-medium);
+      border: none;
+      background: transparent;
+      padding: 0.35em 0.5em;
+      transition: background-color 0.25s;
+
+      svg {
+        font-size: var(--font-down-1);
+      }
+    }
+
+    &:hover {
+      .sidebar-section-hover-button {
+        background: var(--primary-low);
+      }
+    }
+  }
+
+  &:hover {
+    .sidebar-section-hover-button {
+      display: block;
+    }
+  }
+}
+
+#main-outlet-wrapper .sidebar-section-link-wrapper {
+  margin-left: 1.5em;
+}
diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
new file mode 100644
index 00000000000..ce4f597a49d
--- /dev/null
+++ b/app/assets/stylesheets/common/base/sidebar-section.scss
@@ -0,0 +1,126 @@
+.sidebar-section-wrapper {
+  margin-bottom: 1em;
+
+  .sidebar-section-header {
+    display: flex;
+    text-transform: uppercase;
+    font-size: 1em;
+    font-weight: bold;
+    align-items: stretch;
+
+    .select-kit {
+      .btn {
+        background: transparent;
+        &:hover {
+          background: var(--primary-low);
+        }
+      }
+      .d-icon {
+        font-size: var(--font-down-1);
+        color: var(--primary-medium);
+        margin-right: 0;
+      }
+      summary {
+        padding: 0.25em 0.5em;
+      }
+    }
+  }
+
+  .sidebar-section-header-link,
+  .sidebar-section-header-text {
+    @include ellipsis;
+    flex: 1 1 auto;
+    color: var(--primary);
+    font-size: var(--font-down-1);
+    padding: 0.25em 0.5em;
+  }
+
+  .sidebar-section-header-link {
+    &:visited {
+      color: var(--primary);
+    }
+
+    &:hover {
+      background: var(--primary-low);
+    }
+  }
+
+  .sidebar-section-header-button {
+    background: none;
+    border: none;
+    padding: 0.25em 0.5em;
+
+    .d-icon {
+      font-size: $font-down-1;
+      color: var(--primary-medium);
+    }
+
+    &:hover {
+      background: var(--primary-low);
+    }
+  }
+  .select-kit-collection {
+    .texts {
+      font-size: var(--font-0);
+      text-transform: none;
+      line-height: var(--line-height-medium);
+      .name {
+        font-size: var(--font-0);
+      }
+    }
+  }
+
+  .sidebar-section-message-wrapper {
+    display: flex;
+  }
+
+  .sidebar-section-message {
+    padding: 0.25em 0.5em;
+    font-size: var(--font-down-1);
+    color: var(--primary-high);
+  }
+
+  .sidebar-section-header-caret {
+    flex: 0 0 auto;
+    width: 1.5em;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border: none;
+    background: transparent;
+    padding: 0;
+    opacity: 0;
+    transition: opacity 0.25s;
+    transition-delay: 0.5s;
+    .discourse-no-touch & {
+      &:hover {
+        svg {
+          color: var(--primary-high);
+        }
+      }
+    }
+
+    svg {
+      display: block;
+      flex: 0 0 auto;
+      transition: color 0.25s;
+    }
+
+    .d-icon {
+      font-size: $font-down-1;
+      color: var(--primary-medium);
+    }
+  }
+
+  .sidebar-section-content {
+    hr {
+      margin: 0em 1.5em;
+    }
+  }
+}
+
+#main-outlet-wrapper .sidebar-section-wrapper {
+  .sidebar-section-message-wrapper {
+    margin-left: 1.5em;
+  }
+}
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 1a78399ce6d..94539fb71d9 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -105,285 +105,4 @@
     display: flex;
     justify-content: flex-end;
   }
-
-  .sidebar-section-wrapper {
-    margin-bottom: 1em;
-  }
-
-  .sidebar-section-header {
-    display: flex;
-    text-transform: uppercase;
-    font-size: 1em;
-    font-weight: bold;
-    align-items: stretch;
-
-    .select-kit {
-      .btn {
-        background: transparent;
-        &:hover {
-          background: var(--primary-low);
-        }
-      }
-      .d-icon {
-        font-size: var(--font-down-1);
-        color: var(--primary-medium);
-        margin-right: 0;
-      }
-      summary {
-        padding: 0.25em 0.5em;
-      }
-    }
-  }
-
-  .sidebar-section-header-link,
-  .sidebar-section-header-text {
-    @include ellipsis;
-    flex: 1 1 auto;
-    color: var(--primary);
-    font-size: var(--font-down-1);
-    padding: 0.25em 0.5em;
-  }
-
-  .sidebar-section-header-link {
-    &:visited {
-      color: var(--primary);
-    }
-
-    &:hover {
-      background: var(--primary-low);
-    }
-  }
-
-  .sidebar-section-header-button {
-    background: none;
-    border: none;
-    padding: 0.25em 0.5em;
-
-    .d-icon {
-      font-size: $font-down-1;
-      color: var(--primary-medium);
-    }
-
-    &:hover {
-      background: var(--primary-low);
-    }
-  }
-  .select-kit-collection {
-    .texts {
-      font-size: var(--font-0);
-      text-transform: none;
-      line-height: var(--line-height-medium);
-      .name {
-        font-size: var(--font-0);
-      }
-    }
-  }
-
-  .sidebar-section-link-wrapper {
-    margin-left: 1.5em;
-  }
-
-  .sidebar-section-link {
-    display: flex;
-    align-items: center;
-    padding: 0.35em 0.5em;
-    color: var(--primary-high);
-    font-size: var(--font-down-1);
-    transition: background-color 0.25s;
-
-    &:hover {
-      background: var(--primary-low);
-    }
-
-    &.active {
-      color: var(--primary);
-      font-weight: bold;
-    }
-
-    .sidebar-section-link-content-badge {
-      @include ellipsis;
-      padding-left: 0.5em;
-      text-align: right;
-    }
-
-    .sidebar-section-link-content-text {
-      @include ellipsis;
-
-      .badge-wrapper {
-        font-size: 100%;
-        width: 100%;
-
-        .category-name {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-
-  .sidebar-section-message-wrapper {
-    display: flex;
-    margin-left: 1.5em;
-  }
-
-  .sidebar-section-message {
-    padding: 0.25em 0.5em;
-    font-size: var(--font-down-1);
-    color: var(--primary-high);
-  }
-
-  .sidebar-section-link-content-badge {
-    color: var(--tertiary);
-    font-size: var(--font-down-1);
-    font-weight: normal;
-    margin-left: auto;
-  }
-
-  .sidebar-section-header-caret {
-    flex: 0 0 auto;
-    width: 1.5em;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    border: none;
-    background: transparent;
-    padding: 0;
-    opacity: 0;
-    transition: opacity 0.25s;
-    transition-delay: 0.5s;
-    .discourse-no-touch & {
-      &:hover {
-        svg {
-          color: var(--primary-high);
-        }
-      }
-    }
-
-    svg {
-      display: block;
-      flex: 0 0 auto;
-      transition: color 0.25s;
-    }
-
-    .d-icon {
-      font-size: $font-down-1;
-      color: var(--primary-medium);
-    }
-  }
-
-  .sidebar-section-content {
-    hr {
-      margin: 0em 1.5em;
-    }
-  }
-
-  .sidebar-section-link-personal-messages-sent,
-  .sidebar-section-link-personal-messages-new,
-  .sidebar-section-link-personal-messages-archive,
-  .sidebar-section-link-personal-messages-unread,
-  .sidebar-section-link-group-messages-new,
-  .sidebar-section-link-group-messages-unread,
-  .sidebar-section-link-group-messages-archive {
-    margin-left: 0.5em;
-  }
-}
-
-#main-outlet-wrapper .sidebar-section-wrapper {
-  .sidebar-section-link-prefix {
-    &.image {
-      img {
-        border-radius: 50%;
-        width: 20px;
-        aspect-ratio: auto 20 / 20;
-        height: 20px;
-        margin-right: 0.75em;
-      }
-      &.active img {
-        box-shadow: 0px 0px 0px 1px var(--success);
-        border: 1px solid var(--secondary);
-      }
-    }
-    &.text {
-      display: flex;
-      border-radius: 3px;
-      background: rgba(var(--primary-rgb), 0.1);
-      text-align: center;
-      font-weight: 700;
-      font-size: var(--font-down-1);
-      align-items: center;
-      padding: 0.25rem 0.5rem;
-      margin-right: 0.75em;
-    }
-    &.icon {
-      position: relative;
-      margin-right: 0.75em;
-      svg.prefix-badge {
-        position: absolute;
-        background-color: var(--secondary);
-        border-radius: 50%;
-        padding: 2px 2px 3px;
-        color: var(--primary-high);
-        height: 0.5rem;
-        width: 0.5rem;
-        margin-left: -0.4rem;
-      }
-    }
-  }
-  .sidebar-section-link-suffix.icon {
-    align-items: center;
-    display: flex;
-    margin-left: 0.5em;
-    svg {
-      width: 0.75em;
-      height: 0.75em;
-    }
-    &.urgent svg {
-      color: $success;
-    }
-    &.unread svg {
-      color: var(--tertiary-med-or-tertiary);
-    }
-  }
-  &.sidebar-section-chat-dms {
-    .sidebar-section-content {
-      .sidebar-section-link-wrapper {
-        display: inline-flex;
-        .sidebar-section-hover-button {
-          display: none;
-          color: var(--primary-medium);
-          align-self: center;
-        }
-        .sidebar-section-link-hover {
-          align-self: center;
-        }
-      }
-      .sidebar-section-link-wrapper:hover {
-        background: var(--primary-low);
-        transition: background-color 0.25s;
-        padding-right: 0.5em;
-        .sidebar-section-hover-button {
-          display: block;
-        }
-      }
-      a.sidebar-section-link {
-        width: calc(var(--d-sidebar-width) - 50px);
-        &:hover {
-          background: initial;
-        }
-      }
-
-      .sidebar-section-hover-button {
-        border: none;
-        background: transparent;
-        padding-left: 0.25em;
-        padding-right: 0.25em;
-        margin-left: 0.25em;
-        svg {
-          height: 0.75em;
-          width: 0.75em;
-        }
-      }
-    }
-  }
 }