diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index 92c0ffaa39..9a19b23dc9 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">
           <component :is="showDraftMode ? 'KRadioButtonGroup' : 'div'">
             <KRadioButton
               v-if="showDraftMode"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
index de0c086a1e..fe643a2184 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
@@ -632,6 +632,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/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 7b6cb7d0e7..4107b00c4f 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -21,7 +21,7 @@
       alignment="left"
       @closePanel="closeSidePanel"
     >
-      <CatalogFilterPanelContent />
+      <CatalogFilterPanelContent :style="{ padding: '24px 32px 16px' }" />
     </SidePanelModal>
   </div>
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index efc87cb4d3..83e7976db6 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -27,53 +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="communityLibraryLink"
-          @click="communityLibraryTabClick"
-        >
-          {{ communityLibraryLabel$() }}
-        </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;`"
@@ -106,7 +74,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/StudioNavigation.vue';
   import StudioOfflineAlert from 'shared/views/StudioOfflineAlert.vue';
   import PolicyModals from 'shared/views/policies/PolicyModals';
   import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
@@ -129,7 +97,7 @@
   export default {
     name: 'ChannelListIndex',
     components: {
-      AppBar,
+      StudioNavigation,
       ChannelListAppError,
       GlobalSnackbar,
       PolicyModals,
@@ -148,6 +116,49 @@
       }),
       ...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: ChannelListTypes.PUBLIC,
+        });
+
+        tabs.push({
+          id: 'communityLibrary',
+          label: this.communityLibraryLabel$(),
+          to: this.communityLibraryLink,
+          badgeValue: 0,
+          analyticsLabel: 'COMMUNITY_LIBRARY',
+        });
+
+        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;
       },
@@ -193,15 +204,6 @@
       homeLink() {
         return this.libraryMode ? window.Urls.base() : window.Urls.channels();
       },
-      publicTabClick() {
-        return this.trackTabClick.bind(this, ChannelListTypes.PUBLIC);
-      },
-      communityLibraryTabClick() {
-        return this.trackTabClick.bind(this, 'COMMUNITY_LIBRARY');
-      },
-      channelSetsTabClick() {
-        return this.trackTabClick.bind(this, CHANNEL_SETS);
-      },
     },
     watch: {
       $route(route) {
@@ -260,9 +262,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 5fa53d6f0e..8b01ba9ee1 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 */
@@ -252,7 +272,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/StudioNavigation/SkipNavigationLink.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/SkipNavigationLink.vue
new file mode 100644
index 0000000000..c602db8cbe
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/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/StudioNavigation.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
new file mode 100644
index 0000000000..6e6245af4a
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigation.vue
@@ -0,0 +1,613 @@
+<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 #default>
+          <div
+            class="studio-navigation-title-container"
+            style="flex: 1; min-width: 0"
+          >
+            <KTextTruncator
+              :text="title || $tr('title')"
+              :maxLines="1"
+            />
+          </div>
+        </template>
+
+        <template #actions>
+          <div
+            ref="studioNavigationActions"
+            class="studio-navigation-actions"
+          >
+            <template v-if="loggedIn">
+              <button
+                class="studio-navigation-dropdown-button"
+                :aria-label="$tr('userMenuLabel')"
+                :class="
+                  $computedClass({
+                    ':focus': { ...$coreOutline, outlineOffset: 0 },
+                  })
+                "
+              >
+                <WithNotificationIndicator style="margin: 8px">
+                  <KIcon
+                    icon="person"
+                    style="font-size: 22px"
+                  />
+                </WithNotificationIndicator>
+                <span class="mx-2 notranslate subheading">
+                  {{ user.first_name }}
+                </span>
+                <KIcon
+                  icon="dropdown"
+                  style="margin: 8px; margin-top: 0; font-size: 22px"
+                />
+
+                <KDropdownMenu
+                  :options="userMenuItems"
+                  :hasIcons="true"
+                  @select="(item, event) => handleUserMenuSelect(item, event)"
+                >
+                  <template #option="{ option }">
+                    <div style="display: flex; align-items: center; height: 48px; padding: 0 16px">
+                      <div style="display: flex; align-items: center; min-width: 56px">
+                        <WithNotificationIndicator v-if="option.value === 'notifications'">
+                          <KIcon
+                            :icon="option.icon"
+                            style="font-size: 20px"
+                          />
+                        </WithNotificationIndicator>
+
+                        <KIcon
+                          v-else
+                          :icon="option.icon"
+                          style="font-size: 20px"
+                        />
+                      </div>
+
+                      <span style="font-size: 16px">{{ option.label }}</span>
+                    </div>
+                  </template>
+                </KDropdownMenu>
+              </button>
+            </template>
+
+            <template v-else>
+              <button
+                class="studio-navigation-dropdown-button"
+                :aria-label="$tr('guestMenuLabel')"
+                :class="
+                  $computedClass({
+                    ':focus': { ...$coreOutline, outlineOffset: 0 },
+                  })
+                "
+              >
+                <KIcon
+                  icon="person"
+                  style="margin: 8px; margin-top: 0; font-size: 22px"
+                />
+                <KIcon
+                  icon="dropdown"
+                  style="margin: 8px; margin-top: 0; font-size: 22px"
+                />
+
+                <KDropdownMenu
+                  :options="guestMenuItems"
+                  :hasIcons="true"
+                  @select="(item, event) => handleGuestMenuSelect(item, event)"
+                />
+              </button>
+            </template>
+          </div>
+        </template>
+      </KToolbar>
+    </header>
+
+    <nav
+      v-if="tabs && tabs.length"
+      :aria-label="$tr('mainNavigationLabel')"
+    >
+      <div
+        class="studio-navigation-tabs-wrapper"
+        :style="tabsWrapperStyles"
+      >
+        <ul
+          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>
+        </ul>
+
+        <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>
+    </nav>
+
+    <StudioNavigationSidePanel
+      v-if="loggedIn"
+      :isOpen="isSideNavOpen"
+      @close="isSideNavOpen = false"
+      @openLanguageModal="showLanguageModal = true"
+      @logout="logout"
+    />
+    <LanguageSwitcherModal
+      v-if="showLanguageModal"
+      @cancel="showLanguageModal = false"
+    />
+    <NotificationsModal />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapActions, mapState, mapGetters } from 'vuex';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import debounce from 'lodash/debounce';
+  import WithNotificationIndicator from '../WithNotificationIndicator.vue';
+  import LanguageSwitcherModal from '../../languageSwitcher/LanguageSwitcherModal.vue';
+  import SkipNavigationLink from './SkipNavigationLink.vue';
+
+  import StudioNavigationTab from './StudioNavigationTab.vue';
+  import StudioNavigationSidePanel from './StudioNavigationSidePanel.vue';
+  import NotificationsModal from 'shared/views/NotificationsModal/index.vue';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+  import { Modals } from 'shared/constants';
+
+  const MenuOptions = {
+    ADMINISTRATION: 'administration',
+    NOTIFICATIONS: 'notifications',
+    SETTINGS: 'settings',
+    CHANGE_LANGUAGE: 'change-language',
+    HELP: 'help',
+    LOGOUT: 'logout',
+    LOGIN: 'login',
+  };
+
+  export default {
+    name: 'StudioNavigation',
+    components: {
+      StudioNavigationSidePanel,
+      SkipNavigationLink,
+      LanguageSwitcherModal,
+      StudioNavigationTab,
+      WithNotificationIndicator,
+      NotificationsModal,
+    },
+    setup() {
+      const { windowBreakpoint, windowWidth } = useKResponsiveWindow();
+      const { notificationsLabel$ } = communityChannelsStrings;
+      return {
+        windowBreakpoint,
+        windowWidth,
+        notificationsLabel$,
+      };
+    },
+    props: {
+      title: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      tabs: {
+        type: Array,
+        default: () => [],
+        // Structure: [{ id: '1', label: 'Tab Name', to: {...}, badgeValue: 0 }]
+      },
+    },
+    data() {
+      return {
+        isSideNavOpen: false,
+        showLanguageModal: false,
+        toolbarWidth: 0,
+        overflowMenuOptions: [],
+      };
+    },
+
+    computed: {
+      ...mapState({
+        user: state => state.session.currentUser,
+      }),
+      ...mapGetters(['loggedIn']),
+      homeLink() {
+        return window.Urls.channels();
+      },
+      administrationLink() {
+        return window.Urls.administration();
+      },
+      settingsLink() {
+        return window.Urls.settings();
+      },
+      helpLink() {
+        return 'https://kolibri-studio.readthedocs.io/en/latest/index.html';
+      },
+      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: MenuOptions.ADMINISTRATION,
+            icon: 'people',
+          });
+        }
+
+        items.push({
+          label: this.notificationsLabel$(),
+          value: MenuOptions.NOTIFICATIONS,
+          icon: 'bell',
+        });
+
+        items.push(
+          {
+            label: this.$tr('settings'),
+            value: MenuOptions.SETTINGS,
+            icon: 'settings',
+          },
+          {
+            label: this.$tr('changeLanguage'),
+            value: MenuOptions.CHANGE_LANGUAGE,
+            icon: 'language',
+          },
+          {
+            label: this.$tr('help'),
+            value: MenuOptions.HELP,
+            icon: 'openNewTab',
+            href: this.helpLink,
+            target: '_blank',
+          },
+          {
+            label: this.$tr('signOut'),
+            value: MenuOptions.LOGOUT,
+            icon: 'logout',
+          },
+        );
+
+        return items;
+      },
+      guestMenuItems() {
+        return [
+          {
+            label: this.$tr('signIn'),
+            value: MenuOptions.LOGIN,
+            icon: 'login',
+          },
+          {
+            label: this.$tr('changeLanguage'),
+            value: MenuOptions.CHANGE_LANGUAGE,
+            icon: 'language',
+          },
+        ];
+      },
+      tabsWrapperStyles() {
+        return {
+          // Adds horizontal padding on mobile devices to ensure the overflow menu button
+          // and its hover effect do not touch the screen edge.
+          padding: this.windowBreakpoint <= 2 ? '0 8px' : 0,
+        };
+      },
+    },
+
+    watch: {
+      windowWidth() {
+        this.updateToolbarWidth();
+        this.debouncedCalculateOverflow();
+      },
+      tabs: {
+        handler() {
+          this.$nextTick(() => {
+            this.calculateOverflow();
+          });
+        },
+        deep: true,
+      },
+    },
+    created() {
+      this.debouncedCalculateOverflow = debounce(this.calculateOverflow, 100);
+    },
+    mounted() {
+      this.updateToolbarWidth();
+
+      this.$nextTick(() => {
+        this.calculateOverflow();
+      });
+    },
+    updated() {
+      this.$nextTick(() => {
+        this.updateToolbarWidth();
+      });
+    },
+    beforeDestroy() {
+      if (this.debouncedCalculateOverflow) {
+        this.debouncedCalculateOverflow.cancel();
+      }
+    },
+    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,
+              analyticsLabel: tab.analyticsLabel,
+            });
+          }
+        });
+
+        this.overflowMenuOptions = hiddenLinks;
+      },
+
+      handleOverflowSelect(option) {
+        if (option && option.value) {
+          this.$router.push(option.value);
+          this.handleTrackClick(option);
+        }
+      },
+      toggleSidePanel() {
+        this.isSideNavOpen = !this.isSideNavOpen;
+      },
+
+      closeSidePanelAndNavigate(url) {
+        this.isSideNavOpen = false;
+        window.location.href = url;
+      },
+      navigateToAdministration() {
+        this.closeSidePanelAndNavigate(this.administrationLink);
+      },
+      navigateToSettings() {
+        this.trackClick('Settings');
+        this.closeSidePanelAndNavigate(this.settingsLink);
+      },
+      handleUserMenuSelect(item, event) {
+        if (event) {
+          event.preventDefault();
+        }
+        switch (item.value) {
+          case MenuOptions.ADMINISTRATION:
+            if (this.user && this.user.is_admin) {
+              this.navigateToAdministration();
+            }
+            break;
+          case MenuOptions.NOTIFICATIONS:
+            this.showNotificationsModal();
+            break;
+          case MenuOptions.SETTINGS:
+            this.navigateToSettings();
+            break;
+          case MenuOptions.CHANGE_LANGUAGE:
+            this.showLanguageModal = true;
+            break;
+          case MenuOptions.HELP:
+            this.trackClick('Help');
+            break;
+          case MenuOptions.LOGOUT:
+            this.logout();
+            break;
+        }
+      },
+      handleGuestMenuSelect(item, event) {
+        if (event) {
+          event.preventDefault();
+        }
+        switch (item.value) {
+          case MenuOptions.LOGIN:
+            window.location.href = '/accounts/';
+            break;
+          case MenuOptions.CHANGE_LANGUAGE:
+            this.showLanguageModal = true;
+            break;
+        }
+      },
+      showNotificationsModal() {
+        this.$router.push({
+          query: {
+            ...this.$route.query,
+            modal: Modals.NOTIFICATIONS,
+          },
+        });
+        this.trackClick('Notifications');
+      },
+      trackClick(label) {
+        if (this.$analytics) {
+          this.$analytics.trackClick('general', `User dropdown - ${label}`);
+        }
+      },
+      updateToolbarWidth() {
+        this.toolbarWidth = this.$refs.studioNavigation?.clientWidth || 0;
+      },
+      handleTrackClick(item) {
+        if (this.$analytics && item.analyticsLabel) {
+          this.$analytics.trackClick('channel_list', item.analyticsLabel);
+        }
+      },
+    },
+    $trs: {
+      title: 'Kolibri Studio',
+      openMenu: 'Open navigation menu',
+
+      mainNavigationLabel: 'Main navigation',
+      userMenuLabel: 'User menu',
+      guestMenuLabel: 'Guest menu',
+      moreOptions: 'More options',
+
+      administration: 'Administration',
+      settings: 'Settings',
+      changeLanguage: 'Change language',
+      help: 'Help and support',
+      signIn: 'Sign in',
+      signOut: 'Sign out',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .studio-navigation {
+    top: 0;
+    z-index: 5;
+    @extend %dropshadow-2dp;
+  }
+
+  .studio-navigation-logo-link {
+    border-radius: 8px;
+  }
+
+  .studio-navigation-title-container {
+    padding-inline-start: 20px;
+    padding-top: 8px;
+    //Given to remove the bottom spacing due to inline-block nature of KTextTruncator
+    font-size: 20px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  ::v-deep .k-toolbar-left {
+    flex: 1;
+    min-width: 0;
+    //Added so that Ktexttruncator can properly truncate the title when necessary.
+  }
+
+  .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;
+    margin: 0;
+    overflow: hidden;
+    list-style: none;
+  }
+
+  .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;
+  }
+
+  .studio-navigation-dropdown-button {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    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/StudioNavigation/StudioNavigationSidePanel.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
new file mode 100644
index 0000000000..f5fe26bcdf
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationSidePanel.vue
@@ -0,0 +1,258 @@
+<template>
+
+  <SidePanelModal
+    v-if="isOpen"
+    alignment="left"
+    sidePanelWidth="300px"
+    :aria-label="$tr('navigationMenu')"
+    closeButtonIconType="close"
+    closeButtonPosition="left"
+    immersive
+    fixedWidth
+    @closePanel="$emit('close')"
+  >
+    <template #header>
+      <div class="navigation-menu-header">
+        <span class="navigation-menu-title">
+          {{ $tr('title') }}
+        </span>
+      </div>
+    </template>
+
+    <template #default>
+      <div class="navigation-menu-content">
+        <nav>
+          <ul class="navigation-menu-nav">
+            <StudioSideNavOption
+              :label="$tr('channels')"
+              :link="channelsLink"
+              icon="home"
+              :active="isActive(channelsLink)"
+              @click="handleOptionClick"
+            />
+
+            <StudioSideNavOption
+              v-if="user && user.is_admin"
+              :label="$tr('administration')"
+              :link="administrationLink"
+              icon="people"
+              :active="isActive(administrationLink)"
+              @click="handleOptionClick"
+            />
+
+            <StudioSideNavOption
+              :label="notificationsLabel$()"
+              icon="bell"
+              @click="showNotificationsModal"
+              @keydown.native.enter="showNotificationsModal"
+            >
+              <template #default>
+                <div style="display: flex; gap: 16px">
+                  <WithNotificationIndicator>
+                    <KIcon icon="bell" />
+                  </WithNotificationIndicator>
+
+                  <span>
+                    {{ notificationsLabel$() }}
+                  </span>
+                </div>
+              </template>
+            </StudioSideNavOption>
+
+            <StudioSideNavOption
+              :label="$tr('settings')"
+              :link="settingsLink"
+              icon="settings"
+              :active="isActive(settingsLink)"
+              @click="handleOptionClick"
+            />
+
+            <StudioSideNavOption
+              :label="$tr('changeLanguage')"
+              icon="language"
+              @select="handleLanguageChange"
+            />
+
+            <StudioSideNavOption
+              :label="$tr('help')"
+              icon="openNewTab"
+              @select="handleHelp"
+            />
+
+            <StudioSideNavOption
+              :label="$tr('signOut')"
+              icon="logout"
+              @select="handleLogout"
+            />
+          </ul>
+        </nav>
+
+        <div class="navigation-menu-footer">
+          <div>
+            <KLogo
+              altText="Kolibri logo"
+              :showBackground="true"
+              :size="88"
+            />
+          </div>
+
+          <KExternalLink
+            :href="copyrightLink"
+            class="navigation-menu-copyright"
+            :text="$tr('copyright', { year: new Date().getFullYear() })"
+            openInNewTab
+            @click.native="handleOptionClick"
+          />
+
+          <KExternalLink
+            href="https://community.learningequality.org/c/support/studio"
+            openInNewTab
+            :text="$tr('giveFeedback')"
+            @click.native="handleOptionClick"
+          />
+        </div>
+      </div>
+    </template>
+  </SidePanelModal>
+
+</template>
+
+
+<script>
+
+  import { mapState } from 'vuex';
+  import SidePanelModal from '../SidePanelModal';
+  import WithNotificationIndicator from '../WithNotificationIndicator.vue';
+  import StudioSideNavOption from './StudioSideNavOption.vue';
+  import { Modals } from 'shared/constants';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+  export default {
+    name: 'StudioNavigationSidePanel',
+    components: {
+      SidePanelModal,
+      StudioSideNavOption,
+      WithNotificationIndicator,
+    },
+    setup() {
+      const { notificationsLabel$ } = communityChannelsStrings;
+      return {
+        notificationsLabel$,
+      };
+    },
+    props: {
+      isOpen: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    computed: {
+      ...mapState({
+        user: state => state.session.currentUser,
+      }),
+      channelsLink() {
+        return window.Urls.channels();
+      },
+      administrationLink() {
+        return window.Urls.administration();
+      },
+      settingsLink() {
+        return window.Urls.settings();
+      },
+      helpLink() {
+        return 'https://kolibri-studio.readthedocs.io/en/latest/index.html';
+      },
+      copyrightLink() {
+        return 'https://learningequality.org/';
+      },
+    },
+    methods: {
+      isActive(link) {
+        return window.location.pathname === link;
+      },
+      handleOptionClick() {
+        this.$emit('close');
+      },
+      handleLanguageChange() {
+        this.$emit('close');
+        this.$emit('openLanguageModal');
+      },
+      handleHelp() {
+        this.$emit('close');
+        if (this.$analytics) {
+          this.$analytics.trackClick('general', 'User dropdown - Help');
+        }
+        window.open(this.helpLink, '_blank', 'noopener,noreferrer');
+      },
+      handleLogout() {
+        this.$emit('close');
+        this.$emit('logout');
+      },
+      showNotificationsModal() {
+        this.$emit('close');
+        this.$router.push({
+          query: {
+            ...this.$route.query,
+            modal: Modals.NOTIFICATIONS,
+          },
+        });
+        if (this.$analytics) {
+          this.$analytics.trackClick('general', 'User dropdown - Notifications');
+        }
+      },
+    },
+    $trs: {
+      title: 'Kolibri Studio',
+      navigationMenu: 'Navigation menu',
+      channels: 'Channels',
+      administration: 'Administration',
+      settings: 'Settings',
+      changeLanguage: 'Change language',
+      help: 'Help and support',
+      signOut: 'Sign out',
+      copyright: '© {year} Learning Equality',
+      giveFeedback: 'Give feedback',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .navigation-menu-header {
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding-right: 74px;
+  }
+
+  .navigation-menu-title {
+    margin-left: 16px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  .navigation-menu-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .navigation-menu-nav {
+    padding: 8px 12px;
+    margin: 0;
+    list-style: none;
+  }
+
+  .navigation-menu-footer {
+    padding: 24px;
+    text-align: left;
+  }
+
+  .navigation-menu-copyright {
+    margin-bottom: 24px;
+    font-size: 14px;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue
new file mode 100644
index 0000000000..d4fd048c29
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioNavigationTab.vue
@@ -0,0 +1,163 @@
+<template>
+
+  <li v-if="to">
+    <RouterLink
+      :to="to"
+      :class="[
+        tabClasses,
+        $computedClass({
+          ':active': { backgroundColor: 'rgba(0, 0, 0, 0.2)' },
+          ':focus': { ...$coreOutline, outlineOffset: '-2px' },
+        }),
+      ]"
+      :style="tabStyles"
+      :aria-current="isActive ? 'page' : 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>
+  </li>
+
+</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;
+    width: 100%;
+    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/StudioNavigation/StudioSideNavOption.vue b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
new file mode 100644
index 0000000000..074e751747
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioNavigation/StudioSideNavOption.vue
@@ -0,0 +1,126 @@
+<template>
+
+  <li>
+    <a
+      ref="menuItem"
+      :href="link"
+      class="studio-sidenav-option"
+      role="menuitem"
+      :class="$computedClass(optionStyle)"
+      tabindex="0"
+      @click="handleClick"
+      @keydown.enter="handleClick"
+    >
+      <slot>
+        <KIcon
+          v-if="icon"
+          :icon="icon"
+          :color="optionIconColor"
+          class="menu-icon"
+        />
+        <span
+          v-if="label"
+          class="option-label"
+        >
+          {{ label }}
+        </span>
+      </slot>
+    </a>
+  </li>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'StudioSideNavOption',
+    props: {
+      label: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      link: {
+        type: String,
+        default: null,
+      },
+      icon: {
+        type: String,
+        required: true,
+      },
+      active: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      optionStyle() {
+        if (this.active) {
+          return {
+            color: this.$themeTokens.primaryDark,
+            fontWeight: 'bold',
+            backgroundColor: this.$themePalette.grey.v_200,
+            ':hover': {
+              backgroundColor: this.$themePalette.grey.v_300,
+            },
+            ':focus': this.$coreOutline,
+          };
+        }
+        return {
+          color: this.$themeTokens.text,
+          ':hover': {
+            backgroundColor: this.$themePalette.grey.v_200,
+          },
+          ':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-sidenav-option {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    margin: 4px 8px;
+    font-size: 16px;
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: $radius;
+    outline-offset: -1px;
+    transition: background-color $core-time ease;
+
+    &:hover {
+      outline-offset: -1px;
+    }
+  }
+
+  .menu-icon {
+    top: 0;
+    margin-right: 16px;
+  }
+
+  .option-label {
+    flex: 1;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/WithNotificationIndicator.vue b/contentcuration/contentcuration/frontend/shared/views/WithNotificationIndicator.vue
index 802ff16ab7..ddc41b4f56 100644
--- a/contentcuration/contentcuration/frontend/shared/views/WithNotificationIndicator.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/WithNotificationIndicator.vue
@@ -37,8 +37,8 @@
 
   .notification-indicator {
     position: absolute;
-    top: 8px;
-    right: 9px;
+    top: 0;
+    right: 0;
     width: 11px;
     height: 11px;
     background-color: v-bind('$themePalette.red.v_500');
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..736b7b14f5
--- /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/StudioNavigation.vue';
+
+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__/StudioNavigationTab.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationTab.spec.js
new file mode 100644
index 0000000000..7737f5dea7
--- /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 '../StudioNavigation/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', 'page');
+    });
+
+    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');
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioSideNavOption.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioSideNavOption.spec.js
new file mode 100644
index 0000000000..a5443e7df8
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioSideNavOption.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 StudioSideNavOption from '../StudioNavigation/StudioSideNavOption.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(StudioSideNavOption, {
+    localVue,
+    router,
+    props,
+    ...options,
+  });
+};
+
+describe('StudioSideNavOption', () => {
+  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');
+    });
+  });
+});