diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index c94c1f58..c0fb33a1 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/apps/portal/src/components/global/AppShell.tsx
@@ -4,36 +4,19 @@ import { useRouter } from 'next/router';
 import { signIn, signOut, useSession } from 'next-auth/react';
 import type { ReactNode } from 'react';
 import { Fragment, useState } from 'react';
-import { Dialog, Menu, Transition } from '@headlessui/react';
-import {
-  Bars3BottomLeftIcon,
-  BriefcaseIcon,
-  CurrencyDollarIcon,
-  DocumentTextIcon,
-  HomeIcon,
-  XMarkIcon,
-} from '@heroicons/react/24/outline';
+import { Menu, Transition } from '@headlessui/react';
+import { Bars3BottomLeftIcon } from '@heroicons/react/24/outline';
 
+import GlobalNavigation from '~/components/global/GlobalNavigation';
 import HomeNavigation from '~/components/global/HomeNavigation';
 import OffersNavigation from '~/components/offers/OffersNavigation';
 import QuestionsNavigation from '~/components/questions/QuestionsNavigation';
 import ResumesNavigation from '~/components/resumes/ResumesNavigation';
 
+import MobileNavigation from './MobileNavigation';
 import type { ProductNavigationItems } from './ProductNavigation';
 import ProductNavigation from './ProductNavigation';
 
-const sidebarNavigation = [
-  { current: false, href: '/', icon: HomeIcon, name: 'Home' },
-  { current: false, href: '/resumes', icon: DocumentTextIcon, name: 'Resumes' },
-  {
-    current: false,
-    href: '/questions',
-    icon: BriefcaseIcon,
-    name: 'Questions',
-  },
-  { current: false, href: '/offers', icon: CurrencyDollarIcon, name: 'Offers' },
-];
-
 type Props = Readonly<{
   children: ReactNode;
 }>;
@@ -157,23 +140,18 @@ export default function AppShell({ children }: Props) {
             </Link>
           </div>
           <div className="mt-6 w-full flex-1 space-y-1 px-2">
-            {sidebarNavigation.map((item) => (
+            {GlobalNavigation.map((item) => (
               <Link
                 key={item.name}
-                aria-current={item.current ? 'page' : undefined}
                 className={clsx(
-                  item.current
-                    ? 'bg-primary-50 text-slate-700'
-                    : 'text-slate-700 hover:bg-slate-200',
+                  'text-slate-700 hover:bg-slate-100',
                   'group flex w-full flex-col items-center rounded-md p-3 text-xs font-medium',
                 )}
                 href={item.href}>
                 <item.icon
                   aria-hidden="true"
                   className={clsx(
-                    item.current
-                      ? 'text-primary-500'
-                      : 'text-slate-500 group-hover:text-slate-700',
+                    'text-slate-500 group-hover:text-slate-700',
                     'h-6 w-6',
                   )}
                 />
@@ -185,99 +163,13 @@ export default function AppShell({ children }: Props) {
       </div>
 
       {/* Mobile menu */}
-      <Transition.Root as={Fragment} show={mobileMenuOpen}>
-        <Dialog
-          as="div"
-          className="relative z-20 md:hidden"
-          onClose={setMobileMenuOpen}>
-          <Transition.Child
-            as={Fragment}
-            enter="transition-opacity ease-linear duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="transition-opacity ease-linear duration-300"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0">
-            <div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-40 flex">
-            <Transition.Child
-              as={Fragment}
-              enter="transition ease-in-out duration-300 transform"
-              enterFrom="-translate-x-full"
-              enterTo="translate-x-0"
-              leave="transition ease-in-out duration-300 transform"
-              leaveFrom="translate-x-0"
-              leaveTo="-translate-x-full">
-              <Dialog.Panel className="relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4">
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-in-out duration-300"
-                  enterFrom="opacity-0"
-                  enterTo="opacity-100"
-                  leave="ease-in-out duration-300"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0">
-                  <div className="absolute top-1 right-0 -mr-14 p-1">
-                    <button
-                      className="flex h-12 w-12 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-white"
-                      type="button"
-                      onClick={() => setMobileMenuOpen(false)}>
-                      <XMarkIcon
-                        aria-hidden="true"
-                        className="h-6 w-6 text-white"
-                      />
-                      <span className="sr-only">Close sidebar</span>
-                    </button>
-                  </div>
-                </Transition.Child>
-                <div className="flex flex-shrink-0 items-center px-4">
-                  <Link href="/">
-                    <img
-                      alt="Tech Interview Handbook"
-                      className="h-8 w-auto"
-                      src="/logo.svg"
-                    />
-                  </Link>
-                </div>
-                <div className="mt-5 h-0 flex-1 overflow-y-auto px-2">
-                  <nav className="flex h-full flex-col">
-                    <div className="space-y-1">
-                      {sidebarNavigation.map((item) => (
-                        <a
-                          key={item.name}
-                          aria-current={item.current ? 'page' : undefined}
-                          className={clsx(
-                            item.current
-                              ? 'bg-primary-50 text-slate-700'
-                              : 'text-slate-700 hover:bg-slate-200',
-                            'group flex items-center rounded-md py-2 px-3 text-sm font-medium',
-                          )}
-                          href={item.href}>
-                          <item.icon
-                            aria-hidden="true"
-                            className={clsx(
-                              item.current
-                                ? 'text-primary-500'
-                                : 'text-slate-500 group-hover:text-slate-700',
-                              'mr-3 h-6 w-6',
-                            )}
-                          />
-                          <span>{item.name}</span>
-                        </a>
-                      ))}
-                    </div>
-                  </nav>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-            <div aria-hidden="true" className="w-14 flex-shrink-0">
-              {/* Dummy element to force sidebar to shrink to fit close icon */}
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
+      <MobileNavigation
+        globalNavigationItems={GlobalNavigation}
+        isShown={mobileMenuOpen}
+        productNavigationItems={currentProductNavigation.navigation}
+        productTitle={currentProductNavigation.title}
+        setIsShown={setMobileMenuOpen}
+      />
 
       {/* Content area */}
       <div className="flex flex-1 flex-col overflow-hidden">
diff --git a/apps/portal/src/components/global/GlobalNavigation.ts b/apps/portal/src/components/global/GlobalNavigation.ts
new file mode 100644
index 00000000..d60463ef
--- /dev/null
+++ b/apps/portal/src/components/global/GlobalNavigation.ts
@@ -0,0 +1,24 @@
+import {
+  BriefcaseIcon,
+  CurrencyDollarIcon,
+  DocumentTextIcon,
+} from '@heroicons/react/24/outline';
+
+type GlobalNavigationItem = Readonly<{
+  href: string;
+  icon: (props: React.ComponentProps<'svg'>) => JSX.Element;
+  name: string;
+}>;
+export type GlobalNavigationItems = ReadonlyArray<GlobalNavigationItem>;
+
+const globalNavigation: GlobalNavigationItems = [
+  { href: '/offers', icon: CurrencyDollarIcon, name: 'Offers' },
+  {
+    href: '/questions',
+    icon: BriefcaseIcon,
+    name: 'Questions',
+  },
+  { href: '/resumes', icon: DocumentTextIcon, name: 'Resumes' },
+];
+
+export default globalNavigation;
diff --git a/apps/portal/src/components/global/HomeNavigation.ts b/apps/portal/src/components/global/HomeNavigation.ts
index 6196edd6..bed3b924 100644
--- a/apps/portal/src/components/global/HomeNavigation.ts
+++ b/apps/portal/src/components/global/HomeNavigation.ts
@@ -1,6 +1,8 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
+  { href: '/offers', name: 'Offers' },
+  { href: '/questions', name: 'Question Bank' },
   {
     children: [
       { href: '/resumes', name: 'View Resumes' },
@@ -9,8 +11,6 @@ const navigation: ProductNavigationItems = [
     href: '#',
     name: 'Resumes',
   },
-  { href: '/questions', name: 'Question Bank' },
-  { href: '/offers', name: 'Offers' },
 ];
 
 const config = {
diff --git a/apps/portal/src/components/global/MobileNavigation.tsx b/apps/portal/src/components/global/MobileNavigation.tsx
new file mode 100644
index 00000000..8ce0591f
--- /dev/null
+++ b/apps/portal/src/components/global/MobileNavigation.tsx
@@ -0,0 +1,132 @@
+import clsx from 'clsx';
+import Link from 'next/link';
+import { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { HorizontalDivider } from '@tih/ui';
+
+import type { GlobalNavigationItems } from './GlobalNavigation';
+import type { ProductNavigationItems } from './ProductNavigation';
+
+type Props = Readonly<{
+  globalNavigationItems: GlobalNavigationItems;
+  isShown?: boolean;
+  productNavigationItems: ProductNavigationItems;
+  productTitle: string;
+  setIsShown: (isShown: boolean) => void;
+}>;
+
+export default function MobileNavigation({
+  globalNavigationItems,
+  isShown,
+  productNavigationItems,
+  productTitle,
+  setIsShown,
+}: Props) {
+  return (
+    <Transition.Root as={Fragment} show={isShown}>
+      <Dialog as="div" className="relative z-20 md:hidden" onClose={setIsShown}>
+        <Transition.Child
+          as={Fragment}
+          enter="transition-opacity ease-linear duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="transition-opacity ease-linear duration-300"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0">
+          <div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
+        </Transition.Child>
+        <div className="fixed inset-0 z-40 flex">
+          <Transition.Child
+            as={Fragment}
+            enter="transition ease-in-out duration-300 transform"
+            enterFrom="-translate-x-full"
+            enterTo="translate-x-0"
+            leave="transition ease-in-out duration-300 transform"
+            leaveFrom="translate-x-0"
+            leaveTo="-translate-x-full">
+            <Dialog.Panel className="relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-in-out duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in-out duration-300"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0">
+                <div className="absolute top-1 right-0 -mr-14 p-1">
+                  <button
+                    className="flex h-12 w-12 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-white"
+                    type="button"
+                    onClick={() => setIsShown(false)}>
+                    <XMarkIcon
+                      aria-hidden="true"
+                      className="h-6 w-6 text-white"
+                    />
+                    <span className="sr-only">Close sidebar</span>
+                  </button>
+                </div>
+              </Transition.Child>
+              <div className="flex flex-shrink-0 items-center px-4">
+                <Link href="/">
+                  <img
+                    alt="Tech Interview Handbook"
+                    className="h-8 w-auto"
+                    src="/logo.svg"
+                  />
+                </Link>
+              </div>
+              <div className="mt-5 h-0 flex-1 overflow-y-auto px-2">
+                <div className="mb-2 px-3 py-2 font-medium">{productTitle}</div>
+                <nav className="flex flex-col">
+                  <div className="space-y-1">
+                    {productNavigationItems.map((item) => (
+                      <a
+                        key={item.name}
+                        className={clsx(
+                          'text-slate-700 hover:bg-slate-100',
+                          'group flex items-center rounded-md py-2 px-3 text-sm font-medium',
+                        )}
+                        href={item.href}>
+                        <span>{item.name}</span>
+                      </a>
+                    ))}
+                  </div>
+                  <div className="px-3">
+                    <HorizontalDivider />
+                  </div>
+                  <div className="mb-2 px-3 py-2 text-sm font-medium">
+                    Other Products
+                  </div>
+                  <div className="space-y-1">
+                    {globalNavigationItems.map((item) => (
+                      <a
+                        key={item.name}
+                        className={clsx(
+                          'text-slate-700 hover:bg-slate-100',
+                          'group flex items-center rounded-md py-2 px-3 text-sm font-medium',
+                        )}
+                        href={item.href}>
+                        <item.icon
+                          aria-hidden="true"
+                          className={clsx(
+                            'text-slate-500 group-hover:text-slate-700',
+                            'mr-3 h-6 w-6',
+                          )}
+                        />
+                        <span>{item.name}</span>
+                      </a>
+                    ))}
+                  </div>
+                </nav>
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+          <div aria-hidden="true" className="w-14 flex-shrink-0">
+            {/* Dummy element to force sidebar to shrink to fit close icon */}
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}
diff --git a/apps/portal/src/components/global/ProductNavigation.tsx b/apps/portal/src/components/global/ProductNavigation.tsx
index 58f383d9..e34cadd7 100644
--- a/apps/portal/src/components/global/ProductNavigation.tsx
+++ b/apps/portal/src/components/global/ProductNavigation.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import Link from 'next/link';
 import { Fragment } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
@@ -18,55 +19,57 @@ type Props = Readonly<{
 
 export default function ProductNavigation({ items, title }: Props) {
   return (
-    <nav aria-label="Global" className="flex space-x-10">
+    <nav aria-label="Global" className="flex space-x-8">
       <span className="text-primary-700 text-sm font-medium">{title}</span>
-      {items.map((item) =>
-        item.children != null && item.children.length > 0 ? (
-          <Menu key={item.name} as="div" className="relative text-left">
-            <Menu.Button className="focus:ring-primary-600 flex items-center rounded-md text-sm font-medium text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
-              <span>{item.name}</span>
-              <ChevronDownIcon
-                aria-hidden="true"
-                className="ml-1 h-5 w-5 text-gray-500"
-              />
-            </Menu.Button>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95">
-              <Menu.Items className="absolute left-0 z-10 mt-2 w-40 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                <div className="py-1">
-                  {item.children.map((child) => (
-                    <Menu.Item key={child.name}>
-                      {({ active }) => (
-                        <a
-                          className={clsx(
-                            active ? 'bg-gray-100' : '',
-                            'block px-4 py-2 text-sm text-gray-700',
-                          )}
-                          href={child.href}>
-                          {child.name}
-                        </a>
-                      )}
-                    </Menu.Item>
-                  ))}
-                </div>
-              </Menu.Items>
-            </Transition>
-          </Menu>
-        ) : (
-          <a
-            key={item.name}
-            className="text-sm font-medium text-gray-900"
-            href={item.href}>
-            {item.name}
-          </a>
-        ),
-      )}
+      <div className="hidden space-x-8 md:flex">
+        {items.map((item) =>
+          item.children != null && item.children.length > 0 ? (
+            <Menu key={item.name} as="div" className="relative text-left">
+              <Menu.Button className="focus:ring-primary-600 flex items-center rounded-md text-sm font-medium text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
+                <span>{item.name}</span>
+                <ChevronDownIcon
+                  aria-hidden="true"
+                  className="ml-1 h-5 w-5 text-gray-500"
+                />
+              </Menu.Button>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95">
+                <Menu.Items className="absolute left-0 z-10 mt-2 w-40 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <div className="py-1">
+                    {item.children.map((child) => (
+                      <Menu.Item key={child.name}>
+                        {({ active }) => (
+                          <Link
+                            className={clsx(
+                              active ? 'bg-gray-100' : '',
+                              'block px-4 py-2 text-sm text-gray-700',
+                            )}
+                            href={child.href}>
+                            {child.name}
+                          </Link>
+                        )}
+                      </Menu.Item>
+                    ))}
+                  </div>
+                </Menu.Items>
+              </Transition>
+            </Menu>
+          ) : (
+            <Link
+              key={item.name}
+              className="hover:text-primary-600 text-sm font-medium text-gray-900"
+              href={item.href}>
+              {item.name}
+            </Link>
+          ),
+        )}
+      </div>
     </nav>
   );
 }