diff --git a/app/assets/javascripts/entrypoints/super_sidebar.js b/app/assets/javascripts/entrypoints/super_sidebar.js
index 961ffc56e60d6e911903ad487e91960ecba7045a..6fbb77673cb824bf0bce48bd26adb144f2e59124 100644
--- a/app/assets/javascripts/entrypoints/super_sidebar.js
+++ b/app/assets/javascripts/entrypoints/super_sidebar.js
@@ -5,10 +5,12 @@ import {
   initSuperSidebarToggle,
   initPageBreadcrumbs,
   getSuperSidebarData,
+  initSuperTopbar,
 } from '~/super_sidebar/super_sidebar_bundle';
 
 const superSidebarData = getSuperSidebarData();
 
 initSuperSidebar(superSidebarData);
 initSuperSidebarToggle();
+initSuperTopbar(superSidebarData);
 initPageBreadcrumbs();
diff --git a/app/assets/javascripts/super_sidebar/components/topbar.vue b/app/assets/javascripts/super_sidebar/components/topbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e087d1c7341a49f821972384849bf10c10f8ab11
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/topbar.vue
@@ -0,0 +1,105 @@
+<script>
+import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
+import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
+import { isLoggedIn } from '~/lib/utils/common_utils';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import UserMenu from './user_menu.vue';
+import UserCounts from './user_counts.vue';
+import CreateMenu from './create_menu.vue';
+import { SEARCH_MODAL_ID } from './global_search/constants';
+
+export default {
+  SEARCH_MODAL_ID,
+  components: {
+    BrandLogo,
+    GlButton,
+    CreateMenu,
+    UserCounts,
+    UserMenu,
+    SearchModal: () =>
+      import(
+        /* webpackChunkName: 'global_search_modal' */ './global_search/components/global_search.vue'
+      ),
+    OrganizationSwitcher: () =>
+      import(/* webpackChunkName: 'organization_switcher' */ './organization_switcher.vue'),
+  },
+  directives: {
+    GlModal: GlModalDirective,
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  inject: ['isImpersonating'],
+  props: {
+    logoUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    sidebarData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoggedIn: isLoggedIn(),
+    };
+  },
+  computed: {
+    shouldShowOrganizationSwitcher() {
+      return (
+        this.glFeatures.uiForOrganizations && this.isLoggedIn && window.gon.current_organization
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <header id="app-topnav">
+    <!-- tbd: admin foo -->
+
+    <!-- left side -->
+    <div class="gl-flex gl-flex-nowrap gl-items-center gl-gap-3">
+      <brand-logo :logo-url="logoUrl" class="!gl-p-0" />
+      <organization-switcher v-if="shouldShowOrganizationSwitcher" />
+    </div>
+
+    <!-- center -->
+    <gl-button icon="search" size="small" v-gl-modal="$options.SEARCH_MODAL_ID">{{
+      __('Search...')
+    }}</gl-button>
+    <search-modal />
+
+    <!-- right side -->
+    <div class="gl-flex gl-flex-nowrap gl-items-center gl-gap-3">
+      <create-menu
+        v-if="sidebarData.is_logged_in && sidebarData.create_new_menu_groups.length > 0"
+        :groups="sidebarData.create_new_menu_groups"
+      />
+
+      <gl-button icon="duo-chat" size="small" class="js-tanuki-bot-chat-toggle"
+        ><span class="gl-hidden sm:gl-inline">{{ __('GitLab Duo Chat') }}</span></gl-button
+      >
+
+      <user-counts
+        v-if="sidebarData.is_logged_in"
+        :sidebar-data="sidebarData"
+        class="topbar-user-counts"
+      />
+
+      <gl-button
+        v-if="isImpersonating"
+        v-gl-tooltip
+        :href="sidebarData.stop_impersonation_path"
+        :title="__('Stop impersonating')"
+        icon="incognito"
+        category="tertiary"
+        data-method="delete"
+        data-testid="stop-impersonation-btn"
+      />
+
+      <user-menu v-if="sidebarData.is_logged_in" :data="sidebarData" />
+    </div>
+  </header>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 68693b5dadb60755b032c0c1f29986920b0588f9..66d1b46acef914136412baf68ee81ccd241a89d9 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -13,10 +13,9 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
 import { JS_TOGGLE_COLLAPSE_CLASS } from '../constants';
 import CreateMenu from './create_menu.vue';
-import Counter from './counter.vue';
-import MergeRequestMenu from './merge_request_menu.vue';
 import UserMenu from './user_menu.vue';
 import SuperSidebarToggle from './super_sidebar_toggle.vue';
+import UserCounts from './user_counts.vue';
 import { SEARCH_MODAL_ID } from './global_search/constants';
 
 const trackingMixin = InternalEvents.mixin();
@@ -28,12 +27,11 @@ export default {
   JS_TOGGLE_COLLAPSE_CLASS,
   SEARCH_MODAL_ID,
   components: {
-    Counter,
     CreateMenu,
     GlBadge,
     GlButton,
-    MergeRequestMenu,
     UserMenu,
+    UserCounts,
     SearchModal: () =>
       import(
         /* webpackChunkName: 'global_search_modal' */ './global_search/components/global_search.vue'
@@ -45,14 +43,11 @@ export default {
       import(/* webpackChunkName: 'organization_switcher' */ './organization_switcher.vue'),
   },
   i18n: {
-    issues: __('Assigned issues'),
-    mergeRequests: __('Merge requests'),
     searchKbdHelp: sprintf(
       s__('GlobalSearch|Type %{kbdOpen}/%{kbdClose} to search'),
       { kbdOpen: '<kbd>', kbdClose: '</kbd>' },
       false,
     ),
-    todoList: __('To-Do List'),
     stopImpersonating: __('Stop impersonating'),
     searchBtnText: __('Search or go to…'),
   },
@@ -75,21 +70,19 @@ export default {
   },
   data() {
     return {
-      mrMenuShown: false,
       searchTooltip: this.$options.i18n.searchKbdHelp,
-      userCounts,
       isLoggedIn: isLoggedIn(),
     };
   },
   computed: {
-    mergeRequestMenuComponent() {
-      return this.sidebarData.merge_request_menu ? 'merge-request-menu' : 'div';
-    },
     shouldShowOrganizationSwitcher() {
       return (
         this.glFeatures.uiForOrganizations && this.isLoggedIn && window.gon.current_organization
       );
     },
+    appHasTopbar() {
+      return gon.features.globalTopbar;
+    },
   },
   created() {
     Object.assign(userCounts, this.sidebarData.user_counts);
@@ -126,7 +119,7 @@ export default {
       class="gl-flex gl-items-center gl-gap-1"
     >
       <template v-if="sidebarData.is_logged_in">
-        <brand-logo :logo-url="sidebarData.logo_url" />
+        <brand-logo v-if="!appHasTopbar" :logo-url="sidebarData.logo_url" />
         <gl-badge
           v-if="sidebarData.gitlab_com_and_canary"
           variant="success"
@@ -145,14 +138,16 @@ export default {
         type="collapse"
       />
       <create-menu
-        v-if="sidebarData.is_logged_in && sidebarData.create_new_menu_groups.length > 0"
+        v-if="
+          sidebarData.is_logged_in && sidebarData.create_new_menu_groups.length > 0 && !appHasTopbar
+        "
         :groups="sidebarData.create_new_menu_groups"
       />
 
-      <user-menu v-if="sidebarData.is_logged_in" :data="sidebarData" />
+      <user-menu v-if="sidebarData.is_logged_in && !appHasTopbar" :data="sidebarData" />
 
       <gl-button
-        v-if="isImpersonating"
+        v-if="isImpersonating && !appHasTopbar"
         v-gl-tooltip.bottom
         :href="sidebarData.stop_impersonation_path"
         :title="$options.i18n.stopImpersonating"
@@ -163,58 +158,11 @@ export default {
         data-testid="stop-impersonation-btn"
       />
     </div>
-    <organization-switcher v-if="shouldShowOrganizationSwitcher" />
-    <div v-if="sidebarData.is_logged_in" class="gl-flex gl-justify-between gl-gap-2">
-      <counter
-        v-gl-tooltip:super-sidebar.bottom="$options.i18n.issues"
-        class="dashboard-shortcuts-issues gl-basis-1/3"
-        icon="issues"
-        :count="userCounts.assigned_issues"
-        :href="sidebarData.issues_dashboard_path"
-        :label="$options.i18n.issues"
-        data-testid="issues-shortcut-button"
-        data-track-action="click_link"
-        data-track-label="issues_link"
-        data-track-property="nav_core_menu"
-      />
-      <component
-        :is="mergeRequestMenuComponent"
-        class="!gl-block gl-basis-1/3"
-        :items="sidebarData.merge_request_menu"
-        @shown="mrMenuShown = true"
-        @hidden="mrMenuShown = false"
-      >
-        <counter
-          v-gl-tooltip:super-sidebar.bottom="mrMenuShown ? '' : $options.i18n.mergeRequests"
-          class="gl-w-full"
-          :class="{
-            'js-merge-request-dashboard-shortcut': !sidebarData.merge_request_menu,
-          }"
-          icon="merge-request"
-          :href="sidebarData.merge_request_dashboard_path"
-          :count="userCounts.total_merge_requests"
-          :label="$options.i18n.mergeRequests"
-          data-testid="merge-requests-shortcut-button"
-          data-track-action="click_dropdown"
-          data-track-label="merge_requests_menu"
-          data-track-property="nav_core_menu"
-        />
-      </component>
-      <counter
-        v-gl-tooltip:super-sidebar.bottom="$options.i18n.todoList"
-        class="shortcuts-todos js-todos-count gl-basis-1/3"
-        icon="todo-done"
-        :count="userCounts.todos"
-        :href="sidebarData.todos_dashboard_path"
-        :label="$options.i18n.todoList"
-        data-testid="todos-shortcut-button"
-        data-track-action="click_link"
-        data-track-label="todos_link"
-        data-track-property="nav_core_menu"
-      />
-    </div>
+    <organization-switcher v-if="shouldShowOrganizationSwitcher && !appHasTopbar" />
+
+    <user-counts v-if="sidebarData.is_logged_in && !appHasTopbar" :sidebar-data="sidebarData" />
 
-    <div class="gl-grow">
+    <div v-if="!appHasTopbar" class="gl-grow">
       <gl-button
         id="super-sidebar-search"
         v-gl-tooltip.bottom.html="searchTooltip"
diff --git a/app/assets/javascripts/super_sidebar/components/user_counts.vue b/app/assets/javascripts/super_sidebar/components/user_counts.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66c6953a711a2eeed683937fb2e2514dbd514699
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/user_counts.vue
@@ -0,0 +1,100 @@
+<script>
+import { GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { userCounts } from '~/super_sidebar/user_counts_manager';
+import Counter from './counter.vue';
+import MergeRequestMenu from './merge_request_menu.vue';
+
+export default {
+  name: 'UserCounts',
+  components: {
+    Counter,
+    MergeRequestMenu,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    sidebarData: {
+      type: Object,
+      required: true,
+    },
+  },
+  i18n: {
+    issues: __('Assigned issues'),
+    mergeRequests: __('Merge requests'),
+    todoList: __('To-Do List'),
+  },
+  data() {
+    return {
+      mrMenuShown: false,
+      userCounts,
+    };
+  },
+  computed: {
+    mergeRequestMenuComponent() {
+      return this.sidebarData.merge_request_menu ? 'merge-request-menu' : 'div';
+    },
+  },
+  methods: {
+    onMergeRequestMenuShown() {
+      this.mrMenuShown = true;
+    },
+    onMergeRequestMenuHidden() {
+      this.mrMenuShown = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-flex gl-justify-between gl-gap-2">
+    <counter
+      v-gl-tooltip="$options.i18n.issues"
+      class="dashboard-shortcuts-issues gl-basis-1/3"
+      icon="issues"
+      :count="userCounts.assigned_issues"
+      :href="sidebarData.issues_dashboard_path"
+      :label="$options.i18n.issues"
+      data-testid="issues-shortcut-button"
+      data-track-action="click_link"
+      data-track-label="issues_link"
+      data-track-property="nav_core_menu"
+    />
+    <component
+      :is="mergeRequestMenuComponent"
+      class="!gl-block gl-basis-1/3"
+      :items="sidebarData.merge_request_menu"
+      @shown="onMergeRequestMenuShown"
+      @hidden="onMergeRequestMenuHidden"
+    >
+      <counter
+        v-gl-tooltip="mrMenuShown ? '' : $options.i18n.mergeRequests"
+        class="gl-w-full"
+        :class="{
+          'js-merge-request-dashboard-shortcut': !sidebarData.merge_request_menu,
+        }"
+        icon="merge-request"
+        :href="sidebarData.merge_request_dashboard_path"
+        :count="userCounts.total_merge_requests"
+        :label="$options.i18n.mergeRequests"
+        data-testid="merge-requests-shortcut-button"
+        data-track-action="click_dropdown"
+        data-track-label="merge_requests_menu"
+        data-track-property="nav_core_menu"
+      />
+    </component>
+    <counter
+      v-gl-tooltip="$options.i18n.todoList"
+      class="shortcuts-todos js-todos-count gl-basis-1/3"
+      icon="todo-done"
+      :count="userCounts.todos"
+      :href="sidebarData.todos_dashboard_path"
+      :label="$options.i18n.todoList"
+      data-testid="todos-shortcut-button"
+      data-track-action="click_link"
+      data-track-label="todos_link"
+      data-track-property="nav_core_menu"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
index fcced25ab11676848d62686f4c7a790a08598a2c..b26efc4df8cf32eeae534748f151d96f6d25c1f6 100644
--- a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
+++ b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
@@ -10,6 +10,7 @@ import {
   initSuperSidebarCollapsedState,
 } from './super_sidebar_collapsed_state_manager';
 import SuperSidebar from './components/super_sidebar.vue';
+import SuperTopbar from './components/topbar.vue';
 import SuperSidebarToggle from './components/super_sidebar_toggle.vue';
 
 export { initPageBreadcrumbs } from './super_sidebar_breadcrumbs';
@@ -196,3 +197,77 @@ export const initSuperSidebarToggle = () => {
     },
   });
 };
+
+export const initSuperTopbar = async ({
+  rootPath,
+  currentPath,
+  isSaas,
+  sidebarData,
+  searchPath,
+  issuesPath,
+  mrPath,
+  autocompletePath,
+  settingsPath,
+  searchContext,
+  projectsPath,
+  groupsPath,
+  projectFilesPath,
+  projectBlobPath,
+  commandPaletteCommands,
+  commandPaletteLinks,
+  contextSwitcherLinks,
+  isImpersonating,
+  isGroup,
+}) => {
+  const el = document.querySelector('#js-app-topbar');
+  if (!el) return false;
+
+  return new Vue({
+    el,
+    apolloProvider: await getApolloProvider(),
+    provide: {
+      rootPath,
+      currentPath,
+      isImpersonating,
+      ...getTrialStatusWidgetData(sidebarData),
+      commandPaletteCommands,
+      commandPaletteLinks,
+      contextSwitcherLinks,
+      autocompletePath,
+      settingsPath,
+      searchContext,
+      projectFilesPath,
+      projectBlobPath,
+      projectsPath,
+      groupsPath,
+      groupPath: groupsPath,
+      fullPath: sidebarData.work_items?.full_path,
+      hasIssuableHealthStatusFeature: sidebarData.work_items?.has_issuable_health_status_feature,
+      hasIssueWeightsFeature: sidebarData.work_items?.has_issue_weights_feature,
+      hasIterationsFeature: sidebarData.work_items?.has_iterations_feature,
+      issuesListPath: sidebarData.work_items?.issues_list_path,
+      canAdminLabel: parseBoolean(sidebarData.work_items?.can_admin_label),
+      labelsManagePath: sidebarData.work_items?.labels_manage_path,
+      workItemPlanningViewEnabled: parseBoolean(
+        sidebarData.work_items?.work_item_planning_view_enabled,
+      ),
+      isGroup,
+      isSaas: parseBoolean(isSaas),
+    },
+    store: createStore({
+      searchPath,
+      issuesPath,
+      mrPath,
+      autocompletePath,
+      searchContext,
+      search: '',
+    }),
+    render(h) {
+      return h(SuperTopbar, {
+        props: {
+          sidebarData,
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 3e2ae99607f6e1d6b66dc230be11069c92c51841..238d514696055067eb2454655f63b381d50f76c4 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -737,3 +737,46 @@ $scroll-scrim-height: 2.25rem;
 .custom-gradient-progress .gl-progress {
   background: linear-gradient(90deg, #ffb177 0%, #936fff 100%);
 }
+
+
+
+
+
+
+
+
+
+// drafting CSS for new topnav
+// TODO: move to its own file
+#app-topnav {
+  position: fixed;
+  top: $calc-system-headers-height;
+  left: 0;
+  width: 100vw;
+  height: var(--header-height);
+
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 1rem;
+  justify-content: space-between;
+  align-items: center;
+
+  // needs higher z-index than sidebar to have org switcher dropdown visible
+  z-index: calc($super-sidebar-z-index + 1);
+  background-color: var(--gl-background-color-default);
+
+  padding: 0.25rem 1rem;
+
+  .topbar-user-counts {
+    gap: 0.5rem;
+
+    .user-bar-button {
+      display: flex;
+      color: var(--gl-text-color-default);
+      align-items: center;
+      border: none;
+    }
+  }
+}
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 531b25ee87c477c94323b7e3b9ae7414689b5e97..82e28690d1b815f0151e478413cfbcc5e8602f16 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -304,6 +304,7 @@ def conditional_link_to(condition, options, html_options = {}, &block)
 
   def page_class
     class_names = ['with-top-bar']
+    class_names << 'with-header' if Feature.enabled?(:global_topbar, current_user)
     class_names << 'issue-boards-page gl-overflow-auto' if current_controller?(:boards)
     class_names << 'epic-boards-page gl-overflow-auto' if current_controller?(:epic_boards)
     class_names << 'with-performance-bar' if performance_bar_enabled?
diff --git a/app/helpers/sidebars_helper.rb b/app/helpers/sidebars_helper.rb
index 0c7bb670e2293ed0474c50ee1f48835561a02b6e..27531fe649d1ca634c2a7d747a2919c1f51538d5 100644
--- a/app/helpers/sidebars_helper.rb
+++ b/app/helpers/sidebars_helper.rb
@@ -133,6 +133,14 @@ def super_sidebar_whats_new_data
     }
   end
 
+  # TODO: Use feature flag in sidebar data methods above to already mark the ones we duplicate noew (like logo_url).
+  # otherwise we'll never clean this up later
+  def super_topbar_props
+    return {
+      logo_url: current_appearance&.header_logo_path,
+    }
+  end
+
   def work_items_modal_data(group, project)
     if project&.persisted?
       return {
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index f630ec888eb2df436e98245c551217b3cc003203..d7922a49de5ca610e8b5ca32d615bd15c11f760a 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -15,7 +15,9 @@
     = render 'peek/bar'
     = header_message
 
-    - if !current_user
+    - if current_user && Feature.enabled?(:global_topbar, current_user)
+      %header#js-app-topbar{ data: { props: super_topbar_props.to_json } }
+    - elsif !current_user
       = render partial: "layouts/header/super_sidebar_logged_out"
     = render 'layouts/page', sidebar: sidebar, nav: nav
     = footer_message
diff --git a/config/feature_flags/wip/global_topbar.yml b/config/feature_flags/wip/global_topbar.yml
new file mode 100644
index 0000000000000000000000000000000000000000..13913df18e234fa88da651bd47f723cad8dcd246
--- /dev/null
+++ b/config/feature_flags/wip/global_topbar.yml
@@ -0,0 +1,10 @@
+---
+name: global_topbar
+description: 
+feature_issue_url: 
+introduced_by_url: 
+rollout_issue_url: 
+milestone: '18.3'
+group: group::personal productivity
+type: wip
+default_enabled: false
diff --git a/lib/gitlab/gon_helper.rb b/lib/gitlab/gon_helper.rb
index a0715ff7da386cdb1501cd416308ab0fd546079e..6df1970e655e6594a67db10cf8f939cba557becf 100644
--- a/lib/gitlab/gon_helper.rb
+++ b/lib/gitlab/gon_helper.rb
@@ -100,6 +100,7 @@ def add_gon_feature_flags
       push_frontend_feature_flag(:glql_work_items, current_user, type: :wip)
       push_frontend_feature_flag(:whats_new_featured_carousel)
       push_frontend_feature_flag(:extensible_reference_filters, current_user)
+      push_frontend_feature_flag(:global_topbar, current_user)
     end
 
     # Exposes the state of a feature flag to the frontend code.