diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index f16745cd5e..d13ebc17a2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -12,7 +12,7 @@
       </template>
 
       <template #default>
-        <div>
+        <div style="padding: 24px 32px 16px">
           <KRadioButtonGroup>
             <KRadioButton
               :label="modeLive$()"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
index 6f21f15bcb..93981f4f21 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
@@ -654,6 +654,7 @@
     display: flex;
     flex-direction: column;
     gap: 16px;
+    padding: 24px 32px 16px;
     margin-top: -24px;
     line-height: 140%;
   }
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
index f636d3e275..460eb998d4 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div class="filter-panel-content">
+  <div
+    class="filter-panel-content"
+    :style="contentStyles"
+  >
     <div class="filters-container">
       <!-- Keyword search -->
       <KTextbox
@@ -99,6 +102,7 @@
 
   import { mapGetters } from 'vuex';
   import debounce from 'lodash/debounce';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { RouteNames } from '../../../constants';
   import { catalogFilterMixin } from '../mixins';
   import LanguageFilter from './LanguageFilter.vue';
@@ -119,6 +123,12 @@
       MultiSelect,
     },
     mixins: [constantsTranslationMixin, catalogFilterMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
 
     data() {
       return {
@@ -156,6 +166,14 @@
       setKeywords() {
         return debounce(this.updateKeywords, 500);
       },
+      contentStyles() {
+        if (this.windowIsSmall) {
+          return {
+            padding: '24px 32px 16px',
+          };
+        }
+        return {};
+      },
     },
     watch: {
       keywords() {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index c45f88b571..9a15554d28 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -27,47 +27,21 @@
         {{ isFAQPage ? $tr('frequentlyAskedQuestions') : $tr('libraryTitle') }}
       </VToolbarTitle>
     </VToolbar>
-    <AppBar v-else>
-      <template
-        v-if="loggedIn"
-        #tabs
-      >
-        <VTab
-          v-for="listType in lists"
-          :key="listType.id"
-          :to="getChannelLink(listType)"
-          @click="trackTabClick(listType)"
-        >
-          <VBadge
-            :value="invitationsByListCounts[listType]"
-            color="black"
-          >
-            <template #badge>
-              <span>{{ $formatNumber(invitationsByListCounts[listType]) }}</span>
-            </template>
-            <span>{{ translateConstant(listType) }}</span>
-          </VBadge>
-        </VTab>
-        <VTab
-          :to="catalogLink"
-          @click="publicTabClick"
-        >
-          {{ $tr('catalog') }}
-        </VTab>
-        <VTab
-          :to="channelSetLink"
-          @click="channelSetsTabClick"
-        >
-          {{ $tr('channelSets') }}
-        </VTab>
-      </template>
-    </AppBar>
+
+    <StudioNavigation
+      v-else
+      :tabs="navigationTabs"
+    />
+
     <VContent>
       <StudioOfflineAlert
         v-if="!isCatalogPage"
         :offset="toolbarHeight"
       />
       <VContainer
+        id="main"
+        role="main"
+        tabindex="-1"
         fluid
         class="main-container pa-0"
         :style="`height: calc(100vh - ${contentOffset}px); margin-top: ${offline ? 48 : 0}px;`"
@@ -137,7 +111,7 @@
   import { ChannelListTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
-  import AppBar from 'shared/views/AppBar';
+  import StudioNavigation from 'shared/views/StudioNavigation';
   import StudioOfflineAlert from 'shared/views/StudioOfflineAlert.vue';
   import PolicyModals from 'shared/views/policies/PolicyModals';
 
@@ -159,7 +133,7 @@
   export default {
     name: 'ChannelListIndex',
     components: {
-      AppBar,
+      StudioNavigation,
       ChannelInvitation,
       ChannelListAppError,
       GlobalSnackbar,
@@ -174,6 +148,41 @@
       }),
       ...mapGetters(['loggedIn']),
       ...mapGetters('channelList', ['invitations']),
+
+      navigationTabs() {
+        if (!this.loggedIn) return [];
+
+        const tabs = [];
+
+        this.lists.forEach(listType => {
+          tabs.push({
+            id: listType,
+            label: this.translateConstant(listType),
+            to: this.getChannelLink(listType),
+            badgeValue: this.invitationsByListCounts[listType] || 0,
+            analyticsLabel: ListTypeToAnalyticsLabel[listType],
+          });
+        });
+
+        tabs.push({
+          id: 'catalog',
+          label: this.$tr('catalog'),
+          to: this.catalogLink,
+          badgeValue: 0,
+          analyticsLabel: 'PUBLIC',
+        });
+
+        tabs.push({
+          id: CHANNEL_SETS,
+          label: this.$tr('channelSets'),
+          to: this.channelSetLink,
+          badgeValue: 0,
+          analyticsLabel: 'CHANNEL_SETS',
+        });
+
+        return tabs;
+      },
+
       fullPageError() {
         return this.$store.state.errors.fullPageError;
       },
@@ -227,12 +236,6 @@
       homeLink() {
         return this.libraryMode ? window.Urls.base() : window.Urls.channels();
       },
-      publicTabClick() {
-        return this.trackTabClick.bind(this, ChannelListTypes.PUBLIC);
-      },
-      channelSetsTabClick() {
-        return this.trackTabClick.bind(this, CHANNEL_SETS);
-      },
     },
     watch: {
       $route(route) {
@@ -289,9 +292,6 @@
           this.updateTabTitle(title);
         }
       },
-      trackTabClick(list) {
-        this.$analytics.trackClick('channel_list', ListTypeToAnalyticsLabel[list]);
-      },
     },
     $trs: {
       channelSets: 'Collections',
diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
index 30b695e5d0..06c1fa373f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
@@ -26,7 +26,7 @@
             <div
               class="header-content"
               :style="{
-                flexDirection: closeButtonIconType === 'close' ? 'row' : 'row-reverse',
+                flexDirection: headerFlexDirection,
               }"
             >
               <div style="overflow: hidden">
@@ -104,6 +104,13 @@
           return ['close', 'back'].includes(value);
         },
       },
+      closeButtonPosition: {
+        type: String,
+        required: false,
+        default: null,
+        validator: value => ['left', 'right'].includes(value),
+      },
+
       /* Optionally override the default width of the side panel with valid CSS value */
       sidePanelWidth: {
         type: String,
@@ -118,6 +125,11 @@
           return ['right', 'left'].includes(value);
         },
       },
+      fixedWidth: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       ariaLabel: {
         type: String,
         required: false,
@@ -151,7 +163,15 @@
           [this.rtlAlignment]: 0,
         };
       },
+      headerFlexDirection() {
+        if (this.closeButtonPosition === 'left') return 'row-reverse';
+        if (this.closeButtonPosition === 'right') return 'row';
+        return this.closeButtonIconType === 'close' ? 'row' : 'row-reverse';
+      },
       responsiveWidth() {
+        if (this.fixedWidth) {
+          return this.sidePanelWidth;
+        }
         return this.isMobile ? '100vw' : this.sidePanelWidth;
       },
       /** Styling Properties */
@@ -253,7 +273,6 @@
 
     .side-panel-content {
       flex-grow: 1;
-      padding: 24px 32px 16px;
       overflow-x: hidden;
       overflow-y: auto;
     }
diff --git a/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue b/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
new file mode 100644
index 0000000000..c602db8cbe
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/SkipNavigationLink.vue
@@ -0,0 +1,89 @@
+<template>
+
+  <div class="skip-nav-link">
+    <KButton
+      ref="button"
+      :style="linkStyles"
+      appearance="basic-link"
+      :text="$tr('skipToMainContentAction')"
+      @click="handleClickSkipLink"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'SkipNavigationLink',
+    computed: {
+      linkStyles() {
+        return {
+          backgroundColor: this.$themeTokens.surface + ' !important',
+        };
+      },
+    },
+    methods: {
+      handleClickSkipLink() {
+        // Every page where this is supposed to work needs to have a top-level
+        // element with 'role' and 'id' attribute equal to 'main' and 'tabindex= -1'.
+        // If it doesn't have one, clicking this link is a noop, but will re-focus itself
+        // as a convenience (in case main div is still loading).
+        const mainEl = document.getElementById('main');
+        if (mainEl) {
+          // If it exists, actually target and focus on the main header
+          const header = mainEl.querySelector('h1');
+          if (header) {
+            // HACK: Need to set its tabindex attribute on the fly to get tab behavior
+            header.setAttribute('tabindex', -1);
+            header.focus();
+          } else {
+            mainEl.focus();
+          }
+        } else {
+          // NOTE: the button retains focus, but loses :focus styling after hitting "Enter"
+          // TODO: look into theme input modality to see if we can get consistent
+          // styling when in keyboard modality
+          this.$refs.button.$el.focus();
+        }
+      },
+    },
+    $trs: {
+      skipToMainContentAction: {
+        message: 'Skip to main content',
+        context:
+          'Button label for the hamburger menu in the top left corner. Accessible only to those who use screen readers and other assistive technology (AT).',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .skip-nav-link {
+    position: relative;
+    z-index: 2;
+  }
+
+  .skip-nav-link a {
+    @extend %dropshadow-2dp;
+
+    position: absolute;
+    left: -1000px;
+    padding: 8px 16px;
+    font-size: 14px;
+    outline-offset: 0 !important;
+
+    &:focus {
+      top: 8px;
+      left: 8px;
+      z-index: 2;
+    }
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
new file mode 100644
index 0000000000..1396505739
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation.vue
@@ -0,0 +1,701 @@
+<template>
+
+  <div
+    ref="studioNavigation"
+    class="studio-navigation"
+    :style="{
+      backgroundColor: $themeTokens.appBar,
+      color: $themeTokens.text,
+    }"
+  >
+    <SkipNavigationLink />
+    <header>
+      <KToolbar
+        type="clear"
+        :style="[
+          {
+            overflowX: 'hidden',
+            backgroundColor: $themeTokens.appBar,
+            height: '56px',
+          },
+          containerStyles,
+        ]"
+        :raised="false"
+      >
+        <template #icon>
+          <KIconButton
+            v-if="loggedIn"
+            icon="menu"
+            :color="$themeTokens.text"
+            :ariaLabel="$tr('openMenu')"
+            @click="toggleSidePanel"
+          />
+          <KExternalLink
+            v-else
+            :href="homeLink"
+            class="studio-navigation-logo-link"
+            style="padding-top: 8px"
+          >
+            <KLogo
+              altText="Kolibri Logo with background"
+              :size="36"
+            />
+          </KExternalLink>
+        </template>
+
+        <template #brand>
+          <div
+            class="studio-navigation-title-container"
+            style="max-width: 160px"
+          >
+            <span>
+              {{ truncatedTitle }}
+            </span>
+          </div>
+        </template>
+
+        <template #actions>
+          <div
+            ref="studioNavigationActions"
+            aria-live="polite"
+            class="studio-navigation-actions"
+          >
+            <template v-if="loggedIn">
+              <button
+                class="studio-navigation-menu"
+                :aria-label="$tr('userMenuLabel')"
+                :class="
+                  $computedClass({
+                    ':focus': { ...$coreOutline, outlineOffset: 0 },
+                  })
+                "
+              >
+                <KIconButton
+                  :disabled="true"
+                  icon="person"
+                  color="black"
+                />
+                <span class="mx-2 notranslate subheading">
+                  {{ user.first_name }}
+                </span>
+                <KIconButton
+                  :disabled="true"
+                  icon="dropdown"
+                  color="black"
+                />
+
+                <KDropdownMenu
+                  :options="userMenuItems"
+                  :hasIcons="true"
+                  @select="handleUserMenuSelect"
+                />
+              </button>
+            </template>
+
+            <template v-else>
+              <button
+                class="studio-navigation-menu"
+                :aria-label="$tr('guestMenuLabel')"
+                :class="
+                  $computedClass({
+                    ':focus': { ...$coreOutline, outlineOffset: 0 },
+                  })
+                "
+              >
+                <KIconButton
+                  :disabled="true"
+                  icon="person"
+                  color="black"
+                />
+                <KIconButton
+                  :disabled="true"
+                  icon="dropdown"
+                  color="black"
+                />
+
+                <KDropdownMenu
+                  :options="guestMenuItems"
+                  :hasIcons="true"
+                  @select="handleGuestMenuSelect"
+                />
+              </button>
+            </template>
+          </div>
+        </template>
+      </KToolbar>
+    </header>
+
+    <div
+      v-if="tabs && tabs.length"
+      :aria-label="$tr('mainNavigationLabel')"
+    >
+      <div
+        class="studio-navigation-tabs-wrapper"
+        :style="tabsWrapperStyles"
+      >
+        <div
+          ref="tabsContainer"
+          class="studio-navigation-tabs-container"
+          :style="containerStyles"
+        >
+          <StudioNavigationTab
+            v-for="tab in tabs"
+            :key="tab.id"
+            ref="tabRefs"
+            :to="tab.to"
+            :badgeValue="tab.badgeValue"
+            class="studio-navigation-tab-item"
+            @click.native="handleTrackClick(tab)"
+          >
+            {{ tab.label }}
+          </StudioNavigationTab>
+        </div>
+
+        <div
+          v-if="overflowMenuOptions.length > 0"
+          class="overflow-menu-container"
+        >
+          <KIconButton
+            icon="optionsHorizontal"
+            :color="$themeTokens.text"
+            :tooltip="$tr('moreOptions')"
+            appearance="flat-button"
+          >
+            <template #menu>
+              <KDropdownMenu
+                :options="overflowMenuOptions"
+                @select="handleOverflowSelect"
+              />
+            </template>
+          </KIconButton>
+        </div>
+      </div>
+    </div>
+
+    <SidePanelModal
+      v-if="loggedIn && sidePanelOpen"
+      alignment="left"
+      sidePanelWidth="300px"
+      :aria-label="$tr('navigationMenu')"
+      closeButtonIconType="close"
+      closeButtonPosition="left"
+      immersive
+      fixedWidth
+      @closePanel="sidePanelOpen = false"
+    >
+      <template #header>
+        <div class="side-panel-header">
+          <span class="side-panel-title">
+            {{ $tr('title') }}
+          </span>
+        </div>
+      </template>
+
+      <template #default>
+        <div class="side-panel-content">
+          <nav class="side-panel-nav">
+            <StudioNavigationOption
+              :label="$tr('channels')"
+              :link="channelsLink"
+              icon="home"
+              @click="sidePanelOpen = false"
+            />
+
+            <StudioNavigationOption
+              v-if="user && user.is_admin"
+              :label="$tr('administration')"
+              :link="administrationLink"
+              icon="people"
+              @click="sidePanelOpen = false"
+            />
+
+            <StudioNavigationOption
+              :label="$tr('settings')"
+              :link="settingsLink"
+              icon="settings"
+              @click="sidePanelOpen = false"
+            />
+
+            <StudioNavigationOption
+              :label="$tr('changeLanguage')"
+              icon="language"
+              @select="openLanguageModal"
+            />
+
+            <StudioNavigationOption
+              :label="$tr('help')"
+              icon="openNewTab"
+              @select="navigateToHelp"
+            />
+
+            <StudioNavigationOption
+              :label="$tr('signOut')"
+              icon="logout"
+              @select="handleLogout"
+            />
+          </nav>
+
+          <div class="side-panel-footer">
+            <div>
+              <KLogo
+                altText="Kolibri logo"
+                :showBackground="true"
+                :size="88"
+              />
+            </div>
+
+            <KExternalLink
+              :href="copyrightLink"
+              class="side-panel-copyright"
+              :text="$tr('copyright', { year: new Date().getFullYear() })"
+              openInNewTab
+              @click.native="sidePanelOpen = false"
+            />
+
+            <KExternalLink
+              href="https://community.learningequality.org/c/support/studio"
+              openInNewTab
+              :text="$tr('giveFeedback')"
+              @click.native="sidePanelOpen = false"
+            />
+          </div>
+        </div>
+      </template>
+    </SidePanelModal>
+    <LanguageSwitcherModal
+      v-if="showLanguageModal"
+      :style="{ color: $themeTokens.text }"
+      @cancel="showLanguageModal = false"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapActions, mapState, mapGetters } from 'vuex';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import LanguageSwitcherModal from '../languageSwitcher/LanguageSwitcherModal.vue';
+  import SidePanelModal from './SidePanelModal';
+  import SkipNavigationLink from './SkipNavigationLink.vue';
+  import StudioNavigationOption from './StudioNavigationOption.vue';
+  import StudioNavigationTab from './StudioNavigationTab.vue';
+
+  export default {
+    name: 'StudioNavigation',
+    components: {
+      SidePanelModal,
+      StudioNavigationOption,
+      SkipNavigationLink,
+      LanguageSwitcherModal,
+      StudioNavigationTab,
+    },
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
+    props: {
+      title: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      tabs: {
+        type: Array,
+        default: () => [],
+        // Structure: [{ id: '1', label: 'Tab Name', to: {...}, badgeValue: 0 }]
+      },
+    },
+    data() {
+      return {
+        sidePanelOpen: false,
+        showLanguageModal: false,
+        toolbarWidth: 0,
+        overflowMenuOptions: [],
+        resizeTimeout: null,
+      };
+    },
+
+    computed: {
+      ...mapState({
+        user: state => state.session.currentUser,
+      }),
+      ...mapGetters(['loggedIn']),
+      homeLink() {
+        return window.Urls?.channels() || '/';
+      },
+      channelsLink() {
+        return window.Urls?.channels() || '/channels';
+      },
+      administrationLink() {
+        return window.Urls?.administration() || '/administration';
+      },
+      settingsLink() {
+        return window.Urls?.settings() || '/settings';
+      },
+      helpLink() {
+        return 'https://kolibri-studio.readthedocs.io/en/latest/index.html';
+      },
+      copyrightLink() {
+        return 'https://learningequality.org/';
+      },
+      truncatedTitle() {
+        const displayTitle = this.title || this.$tr('title');
+        const actionsEl = this.$refs.studioNavigationActions;
+        const actionsWidth = actionsEl ? actionsEl.clientWidth : 0;
+        const offset = actionsWidth + 100;
+        const averageCharWidth = 10;
+        const availableWidth = this.toolbarWidth - offset;
+        const maxChars = availableWidth > 0 ? Math.floor(availableWidth / averageCharWidth) : 1;
+        return this.truncateText(displayTitle, maxChars);
+      },
+      containerStyles() {
+        return {
+          padding: this.windowBreakpoint <= 3 ? '0 16px' : '0 24px',
+        };
+      },
+      userMenuItems() {
+        const items = [];
+
+        if (this.user?.is_admin) {
+          items.push({
+            label: this.$tr('administration'),
+            value: 'administration',
+            icon: 'people',
+          });
+        }
+
+        items.push(
+          {
+            label: this.$tr('settings'),
+            value: 'settings',
+            icon: 'settings',
+          },
+          {
+            label: this.$tr('changeLanguage'),
+            value: 'change-language',
+            icon: 'language',
+          },
+          {
+            label: this.$tr('help'),
+            value: 'help',
+            icon: 'openNewTab',
+          },
+          {
+            label: this.$tr('signOut'),
+            value: 'logout',
+            icon: 'logout',
+          },
+        );
+
+        return items;
+      },
+      guestMenuItems() {
+        return [
+          {
+            label: this.$tr('signIn'),
+            value: 'login',
+            icon: 'login',
+          },
+          {
+            label: this.$tr('changeLanguage'),
+            value: 'change-language',
+            icon: 'language',
+          },
+        ];
+      },
+      tabsWrapperStyles() {
+        return {
+          padding: this.windowBreakpoint <= 2 ? '0 8px' : 0,
+        };
+      },
+    },
+    watch: {
+      windowBreakpoint() {
+        this.debouncedCalculateOverflow();
+      },
+      tabs: {
+        handler() {
+          this.$nextTick(() => {
+            this.calculateOverflow();
+          });
+        },
+        deep: true,
+      },
+    },
+    mounted() {
+      this.updateToolbarWidth();
+      window.addEventListener('resize', this.handleResize);
+
+      this.$nextTick(() => {
+        this.calculateOverflow();
+      });
+    },
+    updated() {
+      this.$nextTick(() => {
+        this.updateToolbarWidth();
+      });
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleResize);
+    },
+    methods: {
+      ...mapActions(['logout']),
+
+      calculateOverflow() {
+        const container = this.$refs.tabsContainer;
+        const tabComponents = this.$refs.tabRefs;
+
+        if (!container || !tabComponents || tabComponents.length === 0) return;
+
+        const hiddenLinks = [];
+        const containerTop = container.offsetTop;
+
+        this.tabs.forEach((tab, index) => {
+          const tabEl = tabComponents[index].$el;
+          if (!tabEl) return;
+          const isWrapped = tabEl.offsetTop - containerTop > 10;
+
+          if (isWrapped) {
+            hiddenLinks.push({
+              label: tab.label,
+              value: tab.to,
+            });
+          }
+        });
+
+        this.overflowMenuOptions = hiddenLinks;
+      },
+
+      handleOverflowSelect(option) {
+        if (option && option.value) {
+          this.$router.push(option.value);
+          const originalTab = this.tabs.find(t => {
+            return option.label.startsWith(t.label);
+          });
+
+          if (originalTab) {
+            this.handleTrackClick(originalTab);
+          }
+        }
+      },
+      toggleSidePanel() {
+        this.sidePanelOpen = !this.sidePanelOpen;
+      },
+
+      closeSidePanelAndNavigate(url) {
+        this.sidePanelOpen = false;
+        window.location.href = url;
+      },
+      navigateToAdministration() {
+        this.closeSidePanelAndNavigate(this.administrationLink);
+      },
+      navigateToSettings() {
+        this.trackClick('Settings');
+        this.closeSidePanelAndNavigate(this.settingsLink);
+      },
+      navigateToHelp() {
+        this.sidePanelOpen = false;
+        this.trackClick('Help');
+        window.open(this.helpLink, '_blank', 'noopener,noreferrer');
+      },
+      handleLogout() {
+        this.sidePanelOpen = false;
+        this.logout();
+      },
+      handleUserMenuSelect(item) {
+        switch (item.value) {
+          case 'administration':
+            if (this.user && this.user.is_admin) {
+              this.navigateToAdministration();
+            }
+            break;
+          case 'settings':
+            this.navigateToSettings();
+            break;
+          case 'change-language':
+            this.showLanguageModal = true;
+            break;
+          case 'help':
+            this.trackClick('Help');
+            window.open(this.helpLink, '_blank');
+            break;
+          case 'logout':
+            this.logout();
+            break;
+        }
+      },
+      handleGuestMenuSelect(item) {
+        switch (item.value) {
+          case 'login':
+            window.location.href = '/accounts/';
+            break;
+          case 'change-language':
+            this.showLanguageModal = true;
+            break;
+        }
+      },
+      trackClick(label) {
+        if (this.$analytics) {
+          this.$analytics.trackClick('general', `User dropdown - ${label}`);
+        }
+      },
+      openLanguageModal() {
+        this.sidePanelOpen = false;
+        this.showLanguageModal = true;
+      },
+      handleResize() {
+        this.updateToolbarWidth();
+        this.debouncedCalculateOverflow();
+      },
+      debouncedCalculateOverflow() {
+        if (this.resizeTimeout) clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = setTimeout(() => {
+          this.calculateOverflow();
+        }, 100);
+      },
+      updateToolbarWidth() {
+        this.toolbarWidth = this.$refs.studioNavigation?.clientWidth || 0;
+      },
+      handleTrackClick(tab) {
+        if (this.$analytics && tab.analyticsLabel) {
+          this.$analytics.trackClick('channel_list', tab.analyticsLabel);
+        }
+      },
+      truncateText(value, maxLength) {
+        if (value && value.length > maxLength) {
+          return value.substring(0, maxLength) + '...';
+        }
+        return value;
+      },
+    },
+    $trs: {
+      title: 'Kolibri Studio',
+      openMenu: 'Open navigation menu',
+      navigationMenu: 'Navigation menu',
+      mainNavigationLabel: 'Main navigation',
+      userMenuLabel: 'User menu',
+      guestMenuLabel: 'Guest menu',
+      moreOptions: 'More options',
+      channels: 'Channels',
+      administration: 'Administration',
+      settings: 'Settings',
+      changeLanguage: 'Change language',
+      help: 'Help and support',
+      signIn: 'Sign in',
+      signOut: 'Sign out',
+      copyright: '© {year} Learning Equality',
+      giveFeedback: 'Give feedback',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .studio-navigation {
+    top: 0;
+    z-index: 5;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
+  }
+
+  .studio-navigation-logo-link {
+    border-radius: 8px;
+  }
+
+  .studio-navigation-title-container {
+    padding-inline-start: 20px;
+    font-size: 20px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .studio-navigation-actions {
+    display: flex;
+    align-items: center;
+  }
+
+  .studio-navigation-tabs-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 48px;
+  }
+
+  .studio-navigation-tabs-container {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    height: 48px;
+    overflow: hidden;
+  }
+
+  .studio-navigation-tab-item {
+    flex: 0 0 auto;
+  }
+
+  .overflow-menu-container {
+    z-index: 2;
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    height: 100%;
+    padding-left: 8px;
+    background-color: inherit;
+  }
+
+  .side-panel-header {
+    display: flex;
+    align-items: center;
+    height: 63.2px;
+    padding-right: 74px;
+  }
+
+  .side-panel-title {
+    margin-left: 16px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  .side-panel-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .side-panel-nav {
+    padding: 8px 0;
+  }
+
+  .side-panel-footer {
+    padding: 24px;
+    text-align: left;
+  }
+
+  .side-panel-copyright {
+    margin-bottom: 24px;
+    font-size: 14px;
+  }
+
+  .studio-navigation-menu {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: $radius;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
new file mode 100644
index 0000000000..35a9f39d8b
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationOption.vue
@@ -0,0 +1,107 @@
+<template>
+
+  <div>
+    <a
+      ref="menuItem"
+      :href="link"
+      class="studio-navigation-option"
+      role="menuitem"
+      :class="$computedClass(optionStyle)"
+      tabindex="0"
+      @click="handleClick"
+      @keydown.enter="handleClick"
+    >
+      <slot>
+        <KIconButton
+          v-if="icon"
+          :disabled="true"
+          :icon="icon"
+          :color="optionIconColor"
+        />
+        <span
+          v-if="label"
+          class="option-label"
+        >
+          {{ label }}
+        </span>
+      </slot>
+    </a>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'StudioNavigationOption',
+    props: {
+      label: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      link: {
+        type: String,
+        default: null,
+      },
+      icon: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      optionStyle() {
+        return {
+          color: this.$themeTokens.text,
+          ':hover': {
+            backgroundColor: 'rgba(0, 0, 0, 0.048)',
+          },
+          ':focus': this.$coreOutline,
+        };
+      },
+      optionIconColor() {
+        return this.$themeTokens.text;
+      },
+    },
+    methods: {
+      handleClick(event) {
+        if (!this.link) {
+          event.preventDefault();
+          this.$emit('select');
+        }
+        this.$emit('click', event);
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .studio-navigation-option {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    padding: 0 16px;
+    font-size: 16px;
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: $radius;
+    outline-offset: -1px;
+    transition: background-color $core-time ease;
+
+    &:hover {
+      outline-offset: -1px;
+    }
+  }
+
+  .option-label {
+    flex: 1;
+    padding: 12px 0;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
new file mode 100644
index 0000000000..52b183bafa
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue
@@ -0,0 +1,161 @@
+<template>
+
+  <RouterLink
+    v-if="to"
+    :to="to"
+    :class="[
+      tabClasses,
+      $computedClass({
+        ':active': { backgroundColor: 'rgba(0, 0, 0, 0.2)' },
+        ':focus': { ...$coreOutline, outlineOffset: 0 },
+      }),
+    ]"
+    :style="tabStyles"
+    :aria-current="isActive ? 'Navigation' : null"
+    :tabindex="tabindex"
+  >
+    <span class="studio-navigation-tab-content">
+      <slot></slot>
+      <span
+        v-if="showBadge"
+        class="studio-navigation-tab-badge"
+        :style="badgeStyles"
+      >
+        {{ $formatNumber(badgeValue) }}
+      </span>
+    </span>
+    <span
+      v-if="isActive"
+      class="studio-navigation-tab-indicator"
+      :style="indicatorStyles"
+      aria-hidden="true"
+    ></span>
+  </RouterLink>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'StudioNavigationTab',
+    props: {
+      to: {
+        type: [String, Object],
+        default: null,
+      },
+      badgeValue: {
+        type: Number,
+        default: 0,
+      },
+      notranslate: {
+        type: Boolean,
+        default: false,
+      },
+      tabindex: {
+        type: Number,
+        default: 0,
+      },
+    },
+    computed: {
+      tabClasses() {
+        return {
+          'studio-navigation-tab': true,
+          'studio-navigation-tab-active': this.isActive,
+          notranslate: this.notranslate,
+        };
+      },
+      tabStyles() {
+        return {
+          color: this.$themeTokens.text,
+        };
+      },
+      badgeStyles() {
+        return {
+          color: this.$themeTokens.surface,
+          backgroundColor: this.$themeTokens.text,
+        };
+      },
+      indicatorStyles() {
+        return {
+          backgroundColor: this.$themeTokens.surface,
+        };
+      },
+      isActive() {
+        if (!this.to || !this.$route) return false;
+
+        const targetRoute = this.$router.resolve(this.to);
+        return this.$route.path === targetRoute.route.path;
+      },
+      showBadge() {
+        return this.badgeValue > 0;
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped>
+
+  .studio-navigation-tab {
+    position: relative;
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: 160px;
+    max-width: 264px;
+    height: 100%;
+    min-height: 48px;
+    padding: 6px 12px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 700;
+    color: inherit;
+    text-decoration: none;
+    text-transform: uppercase;
+    white-space: normal;
+    cursor: pointer;
+    user-select: none;
+    background: transparent;
+    outline: none;
+    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  }
+
+  .studio-navigation-tab:not(.studio-navigation-tab-active) {
+    opacity: 0.7;
+  }
+
+  .studio-navigation-tab-content {
+    position: relative;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .studio-navigation-tab-badge {
+    position: absolute;
+    top: -11px;
+    right: -22px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    font-size: 14px;
+    border-radius: 50%;
+    transition: 0.3s;
+  }
+
+  .studio-navigation-tab-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
new file mode 100644
index 0000000000..cbe6e60231
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js
@@ -0,0 +1,234 @@
+import { render, screen, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import StudioNavigation from '../StudioNavigation';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+
+global.window.Urls = {
+  channels: jest.fn(() => '/channels'),
+  administration: jest.fn(() => '/administration'),
+  settings: jest.fn(() => '/settings'),
+};
+
+const mockActions = {
+  logout: jest.fn(() => Promise.resolve()),
+  trackClick: jest.fn(),
+};
+
+const renderComponent = (props = {}, user = null) => {
+  const store = new Vuex.Store({
+    modules: {
+      session: {
+        state: { currentUser: user },
+        getters: { loggedIn: () => !!user },
+        actions: { logout: mockActions.logout },
+      },
+    },
+  });
+
+  const router = new VueRouter({
+    routes: [
+      { path: '/', name: 'home' },
+      { path: '/channels', name: 'channels' },
+      { path: '/settings', name: 'settings' },
+      { path: '/administration', name: 'administration' },
+      { path: '/library', name: 'library' },
+    ],
+  });
+
+  return render(StudioNavigation, {
+    localVue,
+    store,
+    router,
+    props: {
+      title: 'Kolibri Studio',
+      ...props,
+    },
+
+    mocks: {
+      $formatNumber: n => n,
+      $tr: key => {
+        const map = {
+          title: 'Kolibri Studio',
+          openMenu: 'Open navigation menu',
+          userMenuLabel: 'User menu',
+          guestMenuLabel: 'Guest menu',
+          navigationMenu: 'Navigation menu',
+          signIn: 'Sign in',
+          signOut: 'Sign out',
+          channels: 'Channels',
+          settings: 'Settings',
+          help: 'Help and support',
+          changeLanguage: 'Change language',
+          administration: 'Administration',
+          copyright: '© 2026 Learning Equality',
+          giveFeedback: 'Give feedback',
+          confirmAction: 'Confirm',
+          cancelAction: 'Cancel',
+          changeLanguageModalHeader: 'Change language',
+          skipToMainContentAction: 'Skip to main content',
+        };
+        return map[key] || key;
+      },
+    },
+  });
+};
+
+describe('StudioNavigation', () => {
+  const originalLocation = window.location;
+  beforeAll(() => {
+    delete window.location;
+    window.location = { href: '', assign: jest.fn() };
+    window.open = jest.fn();
+  });
+
+  afterAll(() => {
+    window.location = originalLocation;
+    jest.restoreAllMocks();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('guest view', () => {
+    it('should display the logo link and guest menu', () => {
+      renderComponent({}, null);
+
+      const logoLink = screen.getByRole('link', { name: /Kolibri Logo/i });
+      expect(logoLink).toBeInTheDocument();
+      expect(logoLink).toHaveAttribute('href', expect.stringContaining('/'));
+
+      expect(screen.getByRole('button', { name: /Guest menu/i })).toBeVisible();
+      expect(
+        screen.queryByRole('button', { name: /Open navigation menu/i }),
+      ).not.toBeInTheDocument();
+    });
+
+    it('opens guest menu and shows options', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, null);
+
+      const guestMenuTrigger = screen.getByRole('button', { name: /Guest menu/i });
+      expect(guestMenuTrigger).toBeVisible();
+      await user.click(guestMenuTrigger);
+      expect(screen.getByText('Sign in')).toBeVisible();
+      expect(screen.getByText('Change language')).toBeVisible();
+    });
+  });
+
+  describe('logged in view', () => {
+    const defaultUser = {
+      first_name: 'TestUser',
+      is_admin: false,
+    };
+
+    it('should display hamburger menu and user name', () => {
+      renderComponent({}, defaultUser);
+
+      expect(screen.getByRole('button', { name: /Open navigation menu/i })).toBeVisible();
+      expect(screen.getByRole('button', { name: /User menu/i })).toBeVisible();
+      expect(screen.getByText('TestUser')).toBeVisible();
+    });
+
+    it('renders user menu options when clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, defaultUser);
+
+      const userMenuTrigger = screen.getByRole('button', { name: /User menu/i });
+      expect(userMenuTrigger).toBeVisible();
+      await user.click(userMenuTrigger);
+
+      expect(screen.getByText('Settings')).toBeVisible();
+      expect(screen.getByText('Sign out')).toBeVisible();
+      expect(screen.getByText('Help and support')).toBeVisible();
+      expect(screen.getByText('Change language')).toBeVisible();
+      expect(screen.queryByText('Administration')).not.toBeInTheDocument();
+    });
+
+    it('renders admin options for admin users', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, { ...defaultUser, is_admin: true });
+
+      const userMenuTrigger = screen.getByRole('button', { name: /User menu/i });
+      expect(userMenuTrigger).toBeVisible();
+      await user.click(userMenuTrigger);
+
+      expect(screen.getByText('Administration')).toBeVisible();
+    });
+
+    it('triggers logout action', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, defaultUser);
+
+      await user.click(screen.getByRole('button', { name: /User menu/i }));
+      await user.click(screen.getByText('Sign out'));
+
+      expect(mockActions.logout).toHaveBeenCalled();
+    });
+  });
+
+  describe('side panel navigation', () => {
+    const defaultUser = { first_name: 'TestUser' };
+
+    it('should open side panel when hamburger menu is clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, defaultUser);
+
+      expect(screen.queryByRole('dialog', { name: /Navigation menu/i })).not.toBeInTheDocument();
+
+      await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
+
+      const sidePanel = screen.getByRole('region', { name: 'Navigation menu' });
+      expect(sidePanel).toBeVisible();
+      const panelScope = within(sidePanel);
+      expect(panelScope.getByText(/Kolibri Studio/)).toBeVisible();
+    });
+    it('should display correct navigation links in side panel', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, defaultUser);
+
+      await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
+
+      const sidePanel = screen.getByRole('region', { name: 'Navigation menu' });
+
+      const panelScope = within(sidePanel);
+
+      expect(panelScope.getByText('Channels')).toBeVisible();
+      expect(panelScope.getByText('Settings')).toBeVisible();
+      expect(panelScope.getByText('Help and support')).toBeVisible();
+      expect(panelScope.getByText('Sign out')).toBeVisible();
+    });
+
+    it('opens language modal from side panel', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, defaultUser);
+
+      await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
+      const sidePanel = screen.getByRole('region', { name: 'Navigation menu' });
+      await user.click(within(sidePanel).getByText('Change language'));
+      expect(await screen.findByRole('dialog', { name: 'Change language' })).toBeVisible();
+      expect(screen.getByLabelText('English')).toBeVisible();
+    });
+  });
+
+  describe('Tab Navigation', () => {
+    const tabs = [
+      { id: '1', label: 'My Channels', to: { name: 'channels' }, badgeValue: 0 },
+      { id: '2', label: 'Content Library', to: { name: 'library' }, badgeValue: 5 },
+    ];
+
+    it('renders tabs correctly', () => {
+      renderComponent({ tabs }, { first_name: 'User' });
+
+      expect(screen.getByText('My Channels')).toBeVisible();
+      expect(screen.getByText('Content Library')).toBeVisible();
+      expect(screen.getByText('5')).toBeVisible();
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
new file mode 100644
index 0000000000..e3f424f4fd
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js
@@ -0,0 +1,87 @@
+import { render, screen, cleanup } from '@testing-library/vue';
+import { createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import StudioNavigationOption from '../StudioNavigationOption.vue';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+
+const validIcons = {
+  settings: 'settings',
+  home: 'home',
+  language: 'language',
+  logout: 'logout',
+  openNewTab: 'openNewTab',
+};
+
+const renderComponent = (props = {}, options = {}) => {
+  const router = new VueRouter({
+    mode: 'abstract',
+    routes: [
+      {
+        path: '/settings',
+        name: 'settings',
+        component: { template: '<div>Settings</div>' },
+      },
+      {
+        path: '/channels',
+        name: 'channels',
+        component: { template: '<div>Channels</div>' },
+      },
+    ],
+  });
+
+  return render(StudioNavigationOption, {
+    localVue,
+    router,
+    props,
+    ...options,
+  });
+};
+
+describe('StudioNavigationOption', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('Basic rendering', () => {
+    it('should render with label and icon', () => {
+      renderComponent({
+        label: 'Settings',
+        icon: validIcons.settings,
+      });
+
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+      const menuItem = screen.getByRole('menuitem', { name: 'Settings' });
+      expect(menuItem).toBeInTheDocument();
+    });
+  });
+
+  describe('Link behavior', () => {
+    it('should render as a link with href when link prop is provided', () => {
+      renderComponent({
+        label: 'Channels',
+        icon: validIcons.home,
+        link: '/channels',
+      });
+
+      const link = screen.getByRole('menuitem', { name: 'Channels' });
+      expect(link).toHaveAttribute('href', '/channels');
+    });
+
+    it('should not have href when link prop is not provided', () => {
+      renderComponent({
+        label: 'Change Language',
+        icon: validIcons.language,
+        link: null,
+      });
+
+      const link = screen.getByRole('menuitem', { name: 'Change Language' });
+      expect(link).not.toHaveAttribute('href');
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
new file mode 100644
index 0000000000..a15cbba3f1
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
@@ -0,0 +1,130 @@
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import StudioNavigationTab from '../StudioNavigationTab.vue';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+
+const createRouter = () => {
+  return new VueRouter({
+    mode: 'abstract',
+    routes: [
+      {
+        path: '/channels',
+        name: 'channels',
+        component: { template: '<div>Channels</div>' },
+      },
+      {
+        path: '/settings',
+        name: 'settings',
+        component: { template: '<div>Settings</div>' },
+      },
+    ],
+  });
+};
+
+const renderComponent = async (options = {}) => {
+  const router = createRouter();
+
+  if (options.initialRoute) {
+    await router.push(options.initialRoute);
+  }
+
+  const props = options.props || {};
+  const mocks = {
+    $formatNumber: jest.fn(num => num.toString()),
+    ...options.mocks,
+  };
+
+  const result = render(StudioNavigationTab, {
+    localVue,
+    router,
+    props,
+    mocks,
+    slots: options.slots || {},
+    ...options,
+  });
+
+  return { ...result, router };
+};
+
+describe('StudioNavigationTab', () => {
+  let user;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+    jest.clearAllMocks();
+  });
+
+  describe('User visible behavior', () => {
+    it('should display tab with label', async () => {
+      await renderComponent({
+        props: { to: { name: 'channels' } },
+        slots: { default: 'Channels' },
+      });
+
+      expect(screen.getByRole('link', { name: 'Channels' })).toBeInTheDocument();
+    });
+
+    it('should show badge number when present', async () => {
+      await renderComponent({
+        props: {
+          to: { name: 'channels' },
+          badgeValue: 5,
+        },
+        slots: { default: 'Channels' },
+      });
+
+      expect(screen.getByRole('link', { name: /Channels 5/ })).toBeInTheDocument();
+    });
+
+    it('should not show badge when value is zero', async () => {
+      await renderComponent({
+        props: {
+          to: { name: 'channels' },
+          badgeValue: 0,
+        },
+        slots: { default: 'Channels' },
+      });
+
+      expect(screen.queryByText('0')).not.toBeInTheDocument();
+    });
+
+    it('should show active indicator when on current page', async () => {
+      await renderComponent({
+        props: { to: { name: 'channels' } },
+        slots: { default: 'Channels' },
+        initialRoute: '/channels',
+      });
+
+      const link = screen.getByRole('link', { name: 'Channels' });
+      expect(link).toHaveAttribute('aria-current', 'Navigation');
+    });
+
+    it('should not show active indicator when not on current page', async () => {
+      await renderComponent({
+        props: { to: { name: 'channels' } },
+        slots: { default: 'Channels' },
+        initialRoute: '/settings',
+      });
+
+      const link = screen.getByRole('link', { name: 'Channels' });
+      expect(link).not.toHaveAttribute('aria-current');
+    });
+
+    it('should navigate when clicked', async () => {
+      const { router } = await renderComponent({
+        props: { to: { name: 'settings' } },
+        slots: { default: 'Settings' },
+        initialRoute: '/channels',
+      });
+
+      const link = screen.getByRole('link', { name: 'Settings' });
+      await user.click(link);
+
+      expect(router.currentRoute.name).toBe('settings');
+    });
+  });
+});