diff --git a/components/profile-modal.html b/components/profile-modal.html
index 73c9f878..c027a471 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -12,8 +12,32 @@
 
   <div class="bv-modal__panel modal-sheet profile-modal" tabindex="-1">
       <!-- Modal Header -->
-      <div class="modal-header">
-        <h2 id="profileModalTitle" class="text-lg font-bold text-text">Profile</h2>
+      <div class="modal-header profile-modal__header">
+        <div class="profile-modal__header-title">
+          <button
+            id="profileModalBack"
+            type="button"
+            class="modal-back btn-ghost focus-ring hidden"
+            aria-hidden="true"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            <span class="text-xs font-medium">Menu</span>
+          </button>
+          <h2 id="profileModalTitle" class="text-lg font-bold text-text">Profile</h2>
+        </div>
         <button id="closeProfileModal" class="modal-close">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -34,68 +58,79 @@
 
       <!-- Modal Body -->
       <div class="profile-modal__body">
-        <div class="profile-modal__layout">
+        <div
+          class="profile-modal__layout"
+          data-profile-layout
+          data-mobile-view="menu"
+        >
           <!-- Left navigation column -->
-          <nav class="profile-modal__nav" aria-label="Profile sections">
-            <button
-              id="profileNavAccount"
-              type="button"
-              class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
-              aria-controls="profilePaneAccount"
-              aria-selected="true"
-              data-state="active"
-            >
-              Account
-            </button>
-            <button
-              id="profileNavRelays"
-              type="button"
-              class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
-              aria-controls="profilePaneRelays"
-              aria-selected="false"
-            >
-              Relays
-            </button>
-            <button
-              id="profileNavWallet"
-              type="button"
-              class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
-              aria-controls="profilePaneWallet"
-              aria-selected="false"
-            >
-              Wallet
-            </button>
-            <button
-              id="profileNavBlocked"
-              type="button"
-              class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
-              aria-controls="profilePaneBlocked"
-              aria-selected="false"
-            >
-              Blocked
-            </button>
-            <button
-              id="profileNavHistory"
-              type="button"
-              class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
-              aria-controls="profilePaneHistory"
-              aria-selected="false"
-            >
-              Watch history
-            </button>
-            <button
-              id="profileNavAdmin"
-              type="button"
-              class="btn-ghost focus-ring hidden w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
-              aria-controls="profilePaneAdmin"
-              aria-selected="false"
-            >
-              Admin (Moderation)
-            </button>
-          </nav>
+          <div class="profile-modal__menu" data-profile-mobile-menu aria-hidden="false">
+            <nav class="profile-modal__nav" aria-label="Profile sections">
+              <button
+                id="profileNavAccount"
+                type="button"
+                class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
+                aria-controls="profilePaneAccount"
+                aria-selected="true"
+                data-state="active"
+              >
+                Account
+              </button>
+              <button
+                id="profileNavRelays"
+                type="button"
+                class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
+                aria-controls="profilePaneRelays"
+                aria-selected="false"
+              >
+                Relays
+              </button>
+              <button
+                id="profileNavWallet"
+                type="button"
+                class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
+                aria-controls="profilePaneWallet"
+                aria-selected="false"
+              >
+                Wallet
+              </button>
+              <button
+                id="profileNavBlocked"
+                type="button"
+                class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
+                aria-controls="profilePaneBlocked"
+                aria-selected="false"
+              >
+                Blocked
+              </button>
+              <button
+                id="profileNavHistory"
+                type="button"
+                class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
+                aria-controls="profilePaneHistory"
+                aria-selected="false"
+              >
+                Watch history
+              </button>
+              <button
+                id="profileNavAdmin"
+                type="button"
+                class="btn-ghost focus-ring hidden w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
+                aria-controls="profilePaneAdmin"
+                aria-selected="false"
+              >
+                Admin (Moderation)
+              </button>
+            </nav>
+          </div>
 
           <!-- Right content panes -->
-          <div class="profile-modal__panes">
+          <div
+            class="profile-modal__pane-wrapper"
+            data-profile-mobile-pane
+            aria-hidden="true"
+          >
+            <div class="profile-modal__panes">
             <section
               id="profilePaneAccount"
               class="profile-pane space-y-6"
diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 278bc6e2..5987dcfe 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -1071,6 +1071,16 @@
     color: var(--color-text);
   }
 
+  .modal-back {
+    @apply inline-flex items-center gap-2;
+  }
+
+  @media (min-width: theme("screens.lg")) {
+    .modal-back {
+      display: none !important;
+    }
+  }
+
   .modal-body {
     @apply space-y-5 px-8 pb-8 pt-2;
     overscroll-behavior: contain;
@@ -1554,6 +1564,29 @@
     min-block-size: 0;
   }
 
+  .profile-modal__header {
+    align-items: center;
+  }
+
+  .profile-modal__header-title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
+  .profile-modal__menu {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+
+  .profile-modal__pane-wrapper {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-block-size: 0;
+  }
+
   .profile-modal__nav {
     display: flex;
     flex-wrap: wrap;
@@ -1593,6 +1626,18 @@
     }
   }
 
+  @media (max-width: calc(theme("screens.lg") - 0.02px)) {
+    .profile-modal__layout[data-mobile-view="menu"]
+      .profile-modal__pane-wrapper {
+      display: none;
+    }
+
+    .profile-modal__layout[data-mobile-view="pane"]
+      .profile-modal__menu {
+      display: none;
+    }
+  }
+
   @media (min-width: theme("screens.lg")) {
     .profile-modal__body {
       gap: calc(var(--profile-modal-gap) + var(--space-2xs));
@@ -1620,6 +1665,10 @@
       inline-size: var(--profile-modal-nav-max-width);
       min-inline-size: var(--profile-modal-nav-min-width);
     }
+
+    .profile-modal__pane-wrapper {
+      block-size: 100%;
+    }
   }
 
   /* Torrent helper classes */
diff --git a/js/ui/profileModalController.js b/js/ui/profileModalController.js
index fcdcbc84..97c3ef8c 100644
--- a/js/ui/profileModalController.js
+++ b/js/ui/profileModalController.js
@@ -670,6 +670,10 @@ export class ProfileModalController {
     this.profileModalRoot = null;
     this.profileModalPanel = null;
     this.profileModalBackdrop = null;
+    this.profileModalLayout = null;
+    this.profileModalMenu = null;
+    this.profileModalPaneWrapper = null;
+    this.profileModalBackButton = null;
     this.profileAvatar = null;
     this.profileName = null;
     this.profileNpub = null;
@@ -763,6 +767,11 @@ export class ProfileModalController {
     this.focusTrapContainer = null;
     this.profileSwitcherSelectionPubkey = null;
     this.previouslyFocusedElement = null;
+    this.largeLayoutQuery = null;
+    this.largeLayoutQueryListener = null;
+    this.isLargeLayoutActiveFlag = false;
+    this.mobileViewState = "menu";
+    this.lastMobileViewState = "menu";
     this.setActivePane(this.getActivePane());
     this.setWalletPaneBusy(this.isWalletBusy());
     this.adminEmptyMessages = new Map();
@@ -797,9 +806,11 @@ export class ProfileModalController {
       modalRoot.querySelector(".bv-modal-backdrop") || null;
 
     this.cacheDomReferences();
+    this.setupLayoutBreakpointObserver();
     this.applyModalStackingOverrides();
     this.registerEventListeners();
-    this.selectPane(this.getActivePane());
+    const preserveMenu = this.isMobileLayoutActive();
+    this.selectPane(this.getActivePane(), { keepMenuView: preserveMenu });
 
     return true;
   }
@@ -810,8 +821,16 @@ export class ProfileModalController {
       this.profileModalRoot?.querySelector(".bv-modal__panel") || null;
     this.profileModalBackdrop =
       this.profileModalRoot?.querySelector(".bv-modal-backdrop") || null;
+    this.profileModalLayout =
+      this.profileModalRoot?.querySelector("[data-profile-layout]") || null;
+    this.profileModalMenu =
+      this.profileModalRoot?.querySelector("[data-profile-mobile-menu]") || null;
+    this.profileModalPaneWrapper =
+      this.profileModalRoot?.querySelector("[data-profile-mobile-pane]") || null;
     this.profileModal = this.profileModalRoot;
     this.closeButton = document.getElementById("closeProfileModal") || null;
+    this.profileModalBackButton =
+      document.getElementById("profileModalBack") || null;
     this.logoutButton = document.getElementById("profileLogoutBtn") || null;
     this.channelLink = document.getElementById("profileChannelLink") || null;
     this.addAccountButton =
@@ -1006,6 +1025,12 @@ export class ProfileModalController {
       });
     }
 
+    if (this.profileModalBackButton instanceof HTMLElement) {
+      this.profileModalBackButton.addEventListener("click", () => {
+        this.setMobileView("menu", { focusMenu: true });
+      });
+    }
+
     if (this.logoutButton instanceof HTMLElement) {
       this.logoutButton.addEventListener("click", async () => {
         try {
@@ -1469,7 +1494,197 @@ export class ProfileModalController {
     return container;
   }
 
-  selectPane(name = "account") {
+  setupLayoutBreakpointObserver() {
+    if (
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    ) {
+      this.largeLayoutQuery = null;
+      this.largeLayoutQueryListener = null;
+      this.isLargeLayoutActiveFlag = false;
+      return;
+    }
+
+    if (this.largeLayoutQuery && this.largeLayoutQueryListener) {
+      this.teardownLayoutBreakpointObserver();
+    }
+
+    try {
+      const query = window.matchMedia("(min-width: 1024px)");
+      const handler = (event) => {
+        const matches =
+          typeof event?.matches === "boolean" ? event.matches : query.matches;
+        this.handleLayoutBreakpointChange(matches);
+      };
+      this.largeLayoutQuery = query;
+      this.largeLayoutQueryListener = handler;
+
+      if (typeof query.addEventListener === "function") {
+        query.addEventListener("change", handler);
+      } else if (typeof query.addListener === "function") {
+        query.addListener(handler);
+      }
+
+      this.handleLayoutBreakpointChange(query.matches);
+    } catch (error) {
+      this.largeLayoutQuery = null;
+      this.largeLayoutQueryListener = null;
+      devLogger.warn(
+        "[profileModal] Failed to initialize responsive breakpoint observer:",
+        error,
+      );
+      this.handleLayoutBreakpointChange(false);
+    }
+  }
+
+  teardownLayoutBreakpointObserver() {
+    const query = this.largeLayoutQuery;
+    const handler = this.largeLayoutQueryListener;
+    if (query && handler) {
+      if (typeof query.removeEventListener === "function") {
+        query.removeEventListener("change", handler);
+      } else if (typeof query.removeListener === "function") {
+        query.removeListener(handler);
+      }
+    }
+    this.largeLayoutQuery = null;
+    this.largeLayoutQueryListener = null;
+  }
+
+  handleLayoutBreakpointChange(matches) {
+    const isLarge = Boolean(matches);
+    this.isLargeLayoutActiveFlag = isLarge;
+    if (isLarge) {
+      this.setMobileView("pane", { skipFocusTrap: false });
+      return;
+    }
+
+    const targetView = this.lastMobileViewState || this.mobileViewState || "menu";
+    this.setMobileView(targetView, { skipFocusTrap: false });
+  }
+
+  isLargeLayoutActive() {
+    return Boolean(this.isLargeLayoutActiveFlag);
+  }
+
+  isMobileLayoutActive() {
+    return !this.isLargeLayoutActive();
+  }
+
+  focusActiveNavButton() {
+    const active = this.getActivePane();
+    const candidates = [];
+    if (active && this.navButtons[active] instanceof HTMLElement) {
+      candidates.push(this.navButtons[active]);
+    }
+    Object.values(this.navButtons).forEach((button) => {
+      if (
+        button instanceof HTMLElement &&
+        !candidates.includes(button) &&
+        !button.classList.contains("hidden")
+      ) {
+        candidates.push(button);
+      }
+    });
+
+    const target = candidates.find((button) => button instanceof HTMLElement);
+    if (!target) {
+      return;
+    }
+
+    window.requestAnimationFrame(() => {
+      try {
+        target.focus();
+      } catch (error) {
+        devLogger.warn(
+          "[profileModal] Failed to focus active navigation button:",
+          error,
+        );
+      }
+    });
+  }
+
+  setMobileView(view = "menu", options = {}) {
+    const normalizedView = view === "pane" ? "pane" : "menu";
+    const settings =
+      options && typeof options === "object" ? options : { skipFocusTrap: false };
+    const skipFocusTrap = Boolean(settings.skipFocusTrap);
+    const focusMenu = Boolean(settings.focusMenu);
+
+    const layoutElement =
+      this.profileModalLayout instanceof HTMLElement
+        ? this.profileModalLayout
+        : null;
+    const paneWrapper =
+      this.profileModalPaneWrapper instanceof HTMLElement
+        ? this.profileModalPaneWrapper
+        : null;
+    const menuWrapper =
+      this.profileModalMenu instanceof HTMLElement
+        ? this.profileModalMenu
+        : null;
+    const panelElement =
+      this.profileModalPanel instanceof HTMLElement
+        ? this.profileModalPanel
+        : null;
+    const rootElement =
+      this.profileModalRoot instanceof HTMLElement ? this.profileModalRoot : null;
+    const backButton =
+      this.profileModalBackButton instanceof HTMLElement
+        ? this.profileModalBackButton
+        : null;
+
+    const isLarge = this.isLargeLayoutActive();
+    this.mobileViewState = normalizedView;
+    if (!isLarge) {
+      this.lastMobileViewState = normalizedView;
+    }
+
+    if (layoutElement) {
+      layoutElement.dataset.mobileView = normalizedView;
+    }
+    if (panelElement) {
+      panelElement.dataset.mobileView = normalizedView;
+    }
+    if (rootElement) {
+      rootElement.dataset.mobileView = normalizedView;
+    }
+
+    const menuHidden = !isLarge && normalizedView === "pane";
+    const paneHidden = !isLarge && normalizedView === "menu";
+
+    if (menuWrapper) {
+      menuWrapper.setAttribute("aria-hidden", menuHidden ? "true" : "false");
+    }
+
+    if (paneWrapper) {
+      paneWrapper.setAttribute("aria-hidden", paneHidden ? "true" : "false");
+    }
+
+    if (backButton) {
+      if (isLarge || normalizedView === "menu") {
+        backButton.classList.add("hidden");
+        backButton.setAttribute("aria-hidden", "true");
+      } else {
+        backButton.classList.remove("hidden");
+        backButton.setAttribute("aria-hidden", "false");
+      }
+    }
+
+    if (!skipFocusTrap) {
+      this.updateFocusTrap();
+    }
+
+    if (focusMenu && normalizedView === "menu") {
+      this.focusActiveNavButton();
+    }
+
+    return normalizedView;
+  }
+
+  selectPane(name = "account", options = {}) {
+    const { keepMenuView = false } =
+      options && typeof options === "object" ? options : {};
     const normalized = typeof name === "string" ? name.toLowerCase() : "account";
     const previous = this.getActivePane();
     const availableKeys = Object.keys(this.panes).filter((key) => {
@@ -1522,7 +1737,9 @@ export class ProfileModalController {
     });
 
     this.setActivePane(target);
-    this.updateFocusTrap();
+    const isMobile = this.isMobileLayoutActive();
+    const shouldStayInMenu = keepMenuView && isMobile;
+    this.setMobileView(shouldStayInMenu ? "menu" : "pane");
 
     if (target === "history") {
       void this.populateProfileWatchHistory();
@@ -4197,7 +4414,8 @@ export class ProfileModalController {
     modalRoot.classList.remove("hidden");
     modalRoot.setAttribute("aria-hidden", "false");
     this.setGlobalModalState("profile", true);
-    this.selectPane(pane);
+    const preserveMenu = this.isMobileLayoutActive();
+    this.selectPane(pane, { keepMenuView: preserveMenu });
 
     const focusTarget =
       this.focusableElements[0] ||
@@ -4225,6 +4443,7 @@ export class ProfileModalController {
       modalElement.classList.add("hidden");
       modalElement.setAttribute("aria-hidden", "true");
       this.setGlobalModalState("profile", false);
+      this.setMobileView("menu", { skipFocusTrap: true });
 
       if (this.boundKeydown && this.focusTrapContainer) {
         this.focusTrapContainer.removeEventListener(
diff --git a/tests/profile-modal-controller.test.mjs b/tests/profile-modal-controller.test.mjs
index dbc259bd..84965b3c 100644
--- a/tests/profile-modal-controller.test.mjs
+++ b/tests/profile-modal-controller.test.mjs
@@ -24,6 +24,65 @@ async function waitForAnimationFrame(window, cycles = 1) {
   }
 }
 
+function createMatchMediaList(query, initialMatches = false) {
+  let matches = Boolean(initialMatches);
+  const listeners = new Set();
+
+  const notify = () => {
+    const event = { matches, media: query, type: 'change' };
+    listeners.forEach((listener) => {
+      try {
+        listener(event);
+      } catch {}
+    });
+  };
+
+  return {
+    get matches() {
+      return matches;
+    },
+    set matches(value) {
+      matches = Boolean(value);
+    },
+    media: query,
+    addEventListener(type, listener) {
+      if (type === 'change' && typeof listener === 'function') {
+        listeners.add(listener);
+      }
+    },
+    removeEventListener(type, listener) {
+      if (type === 'change' && typeof listener === 'function') {
+        listeners.delete(listener);
+      }
+    },
+    addListener(listener) {
+      if (typeof listener === 'function') {
+        listeners.add(listener);
+      }
+    },
+    removeListener(listener) {
+      if (typeof listener === 'function') {
+        listeners.delete(listener);
+      }
+    },
+    dispatchEvent(event) {
+      if (!event || event.type !== 'change') {
+        return true;
+      }
+      listeners.forEach((listener) => {
+        try {
+          listener(event);
+        } catch {}
+      });
+      return true;
+    },
+    setMatches(value) {
+      matches = Boolean(value);
+      notify();
+    },
+  };
+}
+
 beforeEach(() => {
   dom = new JSDOM(
     '<!DOCTYPE html><html><body><div id="modalMount"></div></body></html>',
@@ -53,6 +112,14 @@ beforeEach(() => {
   window.confirm = () => true;
   global.confirm = window.confirm;
 
+  window.__matchMediaMocks = [];
+  window.matchMedia = (query) => {
+    const mql = createMatchMediaList(query, false);
+    window.__matchMediaMocks.push(mql);
+    return mql;
+  };
+  global.matchMedia = window.matchMedia;
+
   container = document.getElementById('modalMount');
 
   global.fetch = async (resource) => {
@@ -87,11 +154,16 @@ afterEach(() => {
   delete global.HTMLElement;
   delete global.document;
   delete global.window;
+  delete global.matchMedia;
 
   if (dom) {
     dom.window.close();
     dom = null;
   }
+  if (typeof window !== 'undefined') {
+    delete window.matchMedia;
+    delete window.__matchMediaMocks;
+  }
   container = null;
 });
 
@@ -291,6 +363,62 @@ for (const _ of [0]) {
     },
   );
 
+  test('Profile modal toggles mobile menu and pane views', async (t) => {
+    const controller = createController();
+    await controller.load();
+    applyDesignSystemAttributes(document);
+
+    let cleanupRan = false;
+    const cleanup = () => {
+      try {
+        controller.hide({ silent: true });
+      } catch {}
+      cleanupRan = true;
+    };
+
+    try {
+      await controller.show('account');
+      await waitForAnimationFrame(window, 2);
+
+      const layout = document.querySelector('[data-profile-layout]');
+      const menuWrapper = document.querySelector('[data-profile-mobile-menu]');
+      const paneWrapper = document.querySelector('[data-profile-mobile-pane]');
+      const backButton = document.getElementById('profileModalBack');
+
+      assert.ok(layout && menuWrapper && paneWrapper && backButton);
+
+      assert.equal(layout?.dataset.mobileView, 'menu');
+      assert.equal(menuWrapper?.getAttribute('aria-hidden'), 'false');
+      assert.equal(paneWrapper?.getAttribute('aria-hidden'), 'true');
+      assert.equal(backButton?.classList.contains('hidden'), true);
+
+      controller.selectPane('relays');
+      await waitForAnimationFrame(window, 1);
+
+      assert.equal(layout?.dataset.mobileView, 'pane');
+      assert.equal(menuWrapper?.getAttribute('aria-hidden'), 'true');
+      assert.equal(paneWrapper?.getAttribute('aria-hidden'), 'false');
+      assert.equal(backButton?.classList.contains('hidden'), false);
+
+      backButton?.click();
+      await waitForAnimationFrame(window, 1);
+
+      assert.equal(layout?.dataset.mobileView, 'menu');
+      assert.equal(menuWrapper?.getAttribute('aria-hidden'), 'false');
+      assert.equal(paneWrapper?.getAttribute('aria-hidden'), 'true');
+      assert.equal(backButton?.classList.contains('hidden'), true);
+    } finally {
+      cleanup();
+    }
+
+    t.after(() => {
+      if (!cleanupRan) {
+        cleanup();
+      }
+      resetRuntimeFlags();
+    });
+  });
+
   test('Profile modal uses abbreviated npub display', async () => {
     const sampleProfiles = [
       {