diff --git a/frontend/app/[team]/access/layout.tsx b/frontend/app/[team]/access/layout.tsx
index 57e0d32c9..d7d3e6720 100644
--- a/frontend/app/[team]/access/layout.tsx
+++ b/frontend/app/[team]/access/layout.tsx
@@ -71,32 +71,35 @@ export default function AccessLayout({
 
   return (
     <div
-      className="w-full pt-3 sm:pt-4 lg:pt-6 text-zinc-900 dark:text-zinc-100 flex flex-col overflow-y-auto h-[calc(100vh-56px)]"
+      className="w-full pt-3 sm:pt-4 lg:pt-6 text-zinc-900 dark:text-zinc-100 flex flex-col overflow-y-auto h-[calc(100dvh_-_56px_-_var(--mobile-tabbar-height))]"
     >
       <div className="flex items-center gap-2 pb-3 sm:pb-4 lg:pb-6 px-3 sm:px-4 lg:px-6">
         <h1 className="text-lg sm:text-xl font-bold">Access</h1>
       </div>
 
       <Tab.Group selectedIndex={tabIndex} onChange={(index) => setTabIndex(index)}>
-        <Tab.List className="flex gap-2 w-full border-b border-neutral-500/20 px-3 sm:px-4 lg:px-6">
-          {tabs.map((tab) => (
-            <Tab as={Fragment} key={tab.name}>
-              {({ selected }) => (
-                <Link
-                  href={`/${params.team}/access/${tab.link}`}
-                  className={clsx(
-                    'p-2 text-xs font-medium border-b -mb-px focus:outline-none transition ease',
-                    selected
-                      ? 'border-emerald-500 font-semibold text-zinc-900 dark:text-zinc-100'
-                      : 'border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100'
-                  )}
-                >
-                  {tab.name}
-                </Link>
-              )}
-            </Tab>
-          ))}
-        </Tab.List>
+        {/* overflow-x-auto lives on the wrapper so the tabs' -mb-px underline isn't clipped */}
+        <div className="w-full overflow-x-auto">
+          <Tab.List className="flex gap-2 w-full min-w-max border-b border-neutral-500/20 px-3 sm:px-4 lg:px-6">
+            {tabs.map((tab) => (
+              <Tab as={Fragment} key={tab.name}>
+                {({ selected }) => (
+                  <Link
+                    href={`/${params.team}/access/${tab.link}`}
+                    className={clsx(
+                      'p-2 text-xs font-medium whitespace-nowrap border-b -mb-px focus:outline-none transition ease',
+                      selected
+                        ? 'border-emerald-500 font-semibold text-zinc-900 dark:text-zinc-100'
+                        : 'border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100'
+                    )}
+                  >
+                    {tab.name}
+                  </Link>
+                )}
+              </Tab>
+            ))}
+          </Tab.List>
+        </div>
         <div className="pt-4 flex-1 overflow-y-auto">{children}</div>
       </Tab.Group>
     </div>
diff --git a/frontend/app/[team]/access/members/page.tsx b/frontend/app/[team]/access/members/page.tsx
index bd98caccf..7e3a54c78 100644
--- a/frontend/app/[team]/access/members/page.tsx
+++ b/frontend/app/[team]/access/members/page.tsx
@@ -94,7 +94,7 @@ export default function Members({ params }: { params: { team: string } }) {
           <p className="text-neutral-500 text-sm">Manage organisation members.</p>
         </div>
         <div className="space-y-4">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
             <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2 w-full max-w-sm">
               <div className="">
                 <FaSearch className="text-neutral-500" />
@@ -126,6 +126,7 @@ export default function Members({ params }: { params: { team: string } }) {
             membersLoading && !membersData ? (
               <MemberListSkeleton count={10} />
             ) : (
+              <div className="overflow-x-auto">
               <table className="table-auto min-w-full divide-y divide-zinc-500/40 ">
                 <thead>
                   <tr>
@@ -212,6 +213,7 @@ export default function Members({ params }: { params: { team: string } }) {
                   ))}
                 </tbody>
               </table>
+              </div>
             )
           ) : (
             <EmptyState
diff --git a/frontend/app/[team]/access/network/page.tsx b/frontend/app/[team]/access/network/page.tsx
index 2e579777c..790586aa7 100644
--- a/frontend/app/[team]/access/network/page.tsx
+++ b/frontend/app/[team]/access/network/page.tsx
@@ -59,7 +59,8 @@ export default function NetworkPolicies({ params }: { params: { team: string } }
 
           {userCanReadNetworkPolicies ? (
             allPolicies.length > 0 ? (
-              <table className="table-auto min-w-full divide-y divide-zinc-500/40 ">
+              <div className="w-full overflow-x-auto">
+                <table className="table-auto w-full min-w-[48rem] divide-y divide-zinc-500/40">
                 <thead>
                   <tr>
                     <th className="py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -133,7 +134,8 @@ export default function NetworkPolicies({ params }: { params: { team: string } }
                     </tr>
                   ))}
                 </tbody>
-              </table>
+                </table>
+              </div>
             ) : (
               <EmptyState
                 title="No policies"
@@ -181,7 +183,8 @@ export default function NetworkPolicies({ params }: { params: { team: string } }
 
             {userCanReadNetworkPolicies ? (
               globalPolicies.length > 0 ? (
-                <table className="table-auto min-w-full divide-y divide-zinc-500/40 ">
+                <div className="w-full overflow-x-auto">
+                  <table className="table-auto w-full min-w-[36rem] divide-y divide-zinc-500/40">
                   <thead>
                     <tr>
                       <th className="py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -214,7 +217,8 @@ export default function NetworkPolicies({ params }: { params: { team: string } }
                       </tr>
                     ))}
                   </tbody>
-                </table>
+                  </table>
+                </div>
               ) : (
                 <EmptyState
                   title="No Global Policies"
diff --git a/frontend/app/[team]/access/service-accounts/page.tsx b/frontend/app/[team]/access/service-accounts/page.tsx
index c7d313042..0608d42f6 100644
--- a/frontend/app/[team]/access/service-accounts/page.tsx
+++ b/frontend/app/[team]/access/service-accounts/page.tsx
@@ -54,7 +54,7 @@ export default function ServiceAccounts({ params }: { params: { team: string } }
           <p className="text-neutral-500 text-sm">Manage service accounts.</p>
         </div>
         <div className="space-y-4">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
             <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2 w-full max-w-sm">
               <div className="">
                 <FaSearch className="text-neutral-500" />
@@ -100,7 +100,8 @@ export default function ServiceAccounts({ params }: { params: { team: string } }
                 </>
               </EmptyState>
             ) : (
-              <table className="table-auto min-w-full divide-y divide-zinc-500/40 ">
+              <div className="w-full overflow-x-auto">
+                <table className="table-auto w-full min-w-[42rem] divide-y divide-zinc-500/40">
                 <thead>
                   <tr>
                     <th className="py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -166,7 +167,8 @@ export default function ServiceAccounts({ params }: { params: { team: string } }
                     </tr>
                   ))}
                 </tbody>
-              </table>
+                </table>
+              </div>
             )
           ) : (
             <EmptyState
diff --git a/frontend/app/[team]/apps/[app]/_components/AppSecrets.tsx b/frontend/app/[team]/apps/[app]/_components/AppSecrets.tsx
index fa88fafa0..da2c85be3 100644
--- a/frontend/app/[team]/apps/[app]/_components/AppSecrets.tsx
+++ b/frontend/app/[team]/apps/[app]/_components/AppSecrets.tsx
@@ -973,15 +973,15 @@ export const AppSecrets = ({ team, app }: { team: string; app: string }) => {
           </div>
         </div>
 
-        <div className="flex items-center w-full justify-between border-b border-neutral-500/20 pb-4">
-          <div className="flex items-center gap-2">
-            <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2">
+        <div className="flex w-full flex-col items-stretch justify-between gap-2 border-b border-neutral-500/20 pb-4 sm:flex-row sm:items-center">
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="relative flex min-w-0 flex-1 items-center rounded-md bg-zinc-100 px-2 dark:bg-zinc-800 sm:flex-none">
               <div className="">
                 <FaSearch className="text-neutral-500" />
               </div>
               <input
                 placeholder="Search keys or values"
-                className="custom bg-zinc-100 dark:bg-zinc-800"
+                className="custom min-w-0 w-full bg-zinc-100 dark:bg-zinc-800 sm:w-auto"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
@@ -1002,7 +1002,7 @@ export const AppSecrets = ({ team, app }: { team: string; app: string }) => {
             </div>
           </div>
 
-          <div className="flex flex-col items-end gap-4 pr-4">
+          <div className="flex flex-col items-end gap-4 sm:pr-4">
             <div className="flex gap-2 items-center">
               {unsavedChanges && (
                 <Button variant="outline" onClick={handleDiscardChanges} title="Discard changes">
@@ -1054,8 +1054,8 @@ export const AppSecrets = ({ team, app }: { team: string; app: string }) => {
         />
 
         {(filteredSecrets.length > 0 || filteredDynamicSecrets.length > 0) && (
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex flex-wrap items-center gap-2 sm:gap-4">
               <Button
                 variant="secondary"
                 disabled={allRowsAreExpanded}
@@ -1097,7 +1097,7 @@ export const AppSecrets = ({ team, app }: { team: string; app: string }) => {
                 </span>
               </label>
             </div>
-            <div className="flex justify-end pr-4 gap-4">
+            <div className="flex justify-end gap-2 sm:gap-4 sm:pr-4">
               <Button variant="secondary" onClick={() => importDialogRef.current?.openModal()}>
                 <TbDownload /> Import secrets
               </Button>
diff --git a/frontend/app/[team]/apps/[app]/access/layout.tsx b/frontend/app/[team]/apps/[app]/access/layout.tsx
index ec4732c9f..2922ce507 100644
--- a/frontend/app/[team]/apps/[app]/access/layout.tsx
+++ b/frontend/app/[team]/apps/[app]/access/layout.tsx
@@ -52,7 +52,7 @@ export default function AccessLayout({
 
   return (
     <div
-      className="w-full px-3 sm:px-4 lg:px-6 py-3 sm:py-4 lg:py-6 pb-0 sm:pb-0 lg:pb-0 text-black dark:text-white flex flex-col overflow-y-auto space-y-3 sm:space-y-4 lg:space-y-6 h-[calc(100vh-56px)]"
+      className="w-full min-h-0 flex-1 px-3 sm:px-4 lg:px-6 py-3 sm:py-4 lg:py-6 pb-0 sm:pb-0 lg:pb-0 text-black dark:text-white flex flex-col overflow-y-auto space-y-3 sm:space-y-4 lg:space-y-6"
     >
       <div>
         <h1 className="text-base sm:text-lg font-bold">Access</h1>
@@ -60,15 +60,15 @@ export default function AccessLayout({
       </div>
 
       <Tab.Group selectedIndex={tabIndex} onChange={(index) => setTabIndex(index)}>
-        <div className="grid grid-cols-[max-content_1fr] gap-3 sm:gap-4 lg:gap-6 h-full divide-x divide-neutral-500/40">
-          <Tab.List className="flex flex-col gap-2 w-full ">
+        <div className="flex min-h-0 flex-col gap-3 md:grid md:grid-cols-[max-content_1fr] md:gap-4 lg:gap-6 md:h-full md:divide-x md:divide-neutral-500/40">
+          <Tab.List className="flex w-full shrink-0 gap-2 overflow-x-auto border-b border-neutral-500/20 pb-1 md:flex-col md:overflow-visible md:border-b-0 md:pb-0">
             {tabs.map((tab) => (
               <Tab as={Fragment} key={tab.name}>
                 {({ selected }) => (
                   <Link
                     href={`/${params.team}/apps/${params.app}/access/${tab.link}`}
                     className={clsx(
-                      'p-2 text-xs font-medium border-l rounded-r-lg focus:outline-none transition ease',
+                      'p-2 text-xs font-medium whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg focus:outline-none transition ease',
                       selected
                         ? 'border-emerald-500 font-semibold bg-zinc-300 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100'
                         : ' border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100'
@@ -85,7 +85,7 @@ export default function AccessLayout({
               </Tab>
             ))}
           </Tab.List>
-          <div className="h-full">{children}</div>
+          <div className="min-w-0 h-full">{children}</div>
         </div>
       </Tab.Group>
     </div>
diff --git a/frontend/app/[team]/apps/[app]/access/members/_components/AddMemberDialog.tsx b/frontend/app/[team]/apps/[app]/access/members/_components/AddMemberDialog.tsx
index a8714f506..93cc03b1c 100644
--- a/frontend/app/[team]/apps/[app]/access/members/_components/AddMemberDialog.tsx
+++ b/frontend/app/[team]/apps/[app]/access/members/_components/AddMemberDialog.tsx
@@ -304,7 +304,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
           })
 
     return (
-      <Menu as="div" className="relative inline-block text-left group w-96">
+      <Menu as="div" className="relative inline-block w-full max-w-96 text-left group">
         {({ open }) => (
           <>
             <Menu.Button as={Fragment}>
@@ -322,7 +322,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
               leaveFrom="transform scale-100 opacity-100"
               leaveTo="transform scale-95 opacity-0"
             >
-              <Menu.Items className="absolute z-10 left-0 origin-top-right mt-2 divide-y divide-neutral-500/40 p-px rounded-md shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
+              <Menu.Items className="absolute z-10 left-0 w-full origin-top-right mt-2 divide-y divide-neutral-500/40 p-px rounded-md shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
                 <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2 w-full text-sm">
                   <FaSearch className="text-neutral-500" />
 
@@ -357,7 +357,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
                         {({ active }) => (
                           <div
                             className={clsx(
-                              'flex items-center justify-between gap-2 p-2 text-sm cursor-pointer transition ease w-full min-w-96',
+                              'flex items-center justify-between gap-2 p-2 text-sm cursor-pointer transition ease w-full',
                               active ? 'bg-neutral-100 dark:bg-neutral-800' : ''
                             )}
                             onClick={() => {
@@ -472,7 +472,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
             </p>
 
             <div className="space-y-2">
-              <div className="flex items-center justify-between gap-4">
+              <div className="hidden items-center justify-between gap-4 sm:flex">
                 <div className="w-1/2 text-2xs font-medium text-gray-500 uppercase tracking-wider">
                   Member
                 </div>
@@ -482,9 +482,9 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
                 <div className="w-9"></div>
               </div>
               {selectedMembers.map((member, index) => (
-                <div key={member.id} className="space-y-1 flex items-center justify-between gap-2">
+                <div key={member.id} className="flex flex-col gap-2 rounded-lg border border-neutral-500/20 p-2 sm:flex-row sm:items-center sm:justify-between sm:border-0 sm:p-0">
                   <div
-                    className={clsx('flex items-center justify-between gap-2 p-1 text-sm w-1/2')}
+                    className={clsx('flex w-full min-w-0 items-center justify-between gap-2 p-1 text-sm sm:w-1/2')}
                   >
                     <div className="flex items-center gap-2">
                       <Avatar member={member} size="md" />
@@ -499,7 +499,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
                     </div>
                     <RoleLabel role={member.role!} />
                   </div>
-                  <div className="w-1/2">
+                  <div className="w-full sm:w-1/2">
                     {userCanReadEnvironments ? (
                       <Listbox
                         multiple
diff --git a/frontend/app/[team]/apps/[app]/access/members/page.tsx b/frontend/app/[team]/apps/[app]/access/members/page.tsx
index a2d458065..08000882a 100644
--- a/frontend/app/[team]/apps/[app]/access/members/page.tsx
+++ b/frontend/app/[team]/apps/[app]/access/members/page.tsx
@@ -93,7 +93,7 @@ export default function Members({ params }: { params: { team: string; app: strin
       </div>
       {userCanReadAppMembers ? (
         <div className="space-y-4">
-          <div className="flex items-center justify-between pl-4">
+          <div className="flex flex-col gap-2 px-4 sm:flex-row sm:items-center sm:justify-between sm:pr-0">
             <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2  w-full max-w-sm">
               <div className="">
                 <FaSearch className="text-neutral-500" />
@@ -121,7 +121,8 @@ export default function Members({ params }: { params: { team: string; app: strin
             )}
           </div>
 
-          <table className="table-auto min-w-full divide-y divide-zinc-500/40">
+          <div className="w-full overflow-x-auto">
+            <table className="table-auto w-full min-w-[36rem] divide-y divide-zinc-500/40">
             <thead>
               <tr>
                 <th className="px-6 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -186,7 +187,8 @@ export default function Members({ params }: { params: { team: string; app: strin
                 </tr>
               ))}
             </tbody>
-          </table>
+            </table>
+          </div>
         </div>
       ) : (
         <EmptyState
diff --git a/frontend/app/[team]/apps/[app]/access/tokens/page.tsx b/frontend/app/[team]/apps/[app]/access/tokens/page.tsx
index 5323f00e0..1d1f37367 100644
--- a/frontend/app/[team]/apps/[app]/access/tokens/page.tsx
+++ b/frontend/app/[team]/apps/[app]/access/tokens/page.tsx
@@ -246,17 +246,17 @@ export default function Tokens({ params }: { params: { team: string; app: string
   }
 
   return (
-    <div className="w-full overflow-y-auto relative text-black dark:text-white space-y-16 px-8">
+    <div className="w-full overflow-y-auto relative text-black dark:text-white space-y-16 px-3 sm:px-8">
       {userCanReadTokens ? (
         <section className="max-w-screen-xl">
           {keyring !== null && (
-            <div className="flex gap-8 mt-6 divide-x divide-neutral-500/20 items-start">
-              <div className="space-y-4 border-l border-neutral-500/40 h-min">
+            <div className="flex flex-col gap-4 mt-6 md:flex-row md:gap-8 md:divide-x md:divide-neutral-500/20 md:items-start">
+              <div className="flex w-full gap-2 overflow-x-auto border-b border-neutral-500/40 pb-2 md:block md:w-auto md:space-y-4 md:overflow-visible md:border-b-0 md:border-l md:pb-0">
                 <div
                   role="button"
                   onClick={() => setActivePanel('secrets')}
                   className={clsx(
-                    'p-4 cursor-pointer border-l rounded-r-lg transition ease -ml-px w-60',
+                    'p-3 md:p-4 cursor-pointer whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg transition ease md:-ml-px md:w-60',
                     activePanel === 'secrets'
                       ? 'bg-zinc-300 dark:bg-zinc-800 font-semibold border-emerald-500'
                       : 'bg-zinc-200 dark:bg-zinc-900 hover:font-semibold border-neutral-500/40'
@@ -269,7 +269,7 @@ export default function Tokens({ params }: { params: { team: string; app: string
                     role="button"
                     onClick={() => setActivePanel('kms')}
                     className={clsx(
-                      'p-4 cursor-pointer border-l rounded-r-lg transition ease -ml-px w-60',
+                      'p-3 md:p-4 cursor-pointer whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg transition ease md:-ml-px md:w-60',
                       activePanel === 'kms'
                         ? 'bg-zinc-300 dark:bg-zinc-800 font-semibold border-emerald-500'
                         : 'bg-zinc-200 dark:bg-zinc-900 hover:font-semibold border-neutral-500/40'
@@ -282,7 +282,7 @@ export default function Tokens({ params }: { params: { team: string; app: string
                   </div>
                 )}
               </div>
-              <div className="overflow-y-auto px-4">
+              <div className="min-w-0 w-full overflow-x-auto px-0 sm:px-4">
                 {app && activePanel === 'secrets' && (
                   <SecretTokens organisationId={organisation!.id} appId={params.app} />
                 )}
diff --git a/frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]/page.tsx b/frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]/page.tsx
index 8551f630a..f5c96a194 100644
--- a/frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]/page.tsx
+++ b/frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]/page.tsx
@@ -1209,6 +1209,7 @@ export default function EnvironmentPath({
     return (
       <SplitButton
         variant="primary"
+        aria-label="New Secret"
         onClick={() => handleAddSecret(true)}
         menuContent={
           <div className="w-max flex flex-col items-start gap-1">
@@ -1259,7 +1260,7 @@ export default function EnvironmentPath({
           </div>
         }
       >
-        <FaPlus /> New Secret
+        <FaPlus /> <span className="hidden sm:inline">New Secret</span>
       </SplitButton>
     )
   }
@@ -1379,15 +1380,15 @@ export default function EnvironmentPath({
                 filterMenuOpen ? 'z-30' : 'z-5'
               )}
             >
-              <div className="flex items-center w-full justify-between border-b border-zinc-300 dark:border-zinc-700 py-4  backdrop-blur-md">
-                <div className="flex items-center gap-4">
-                  <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2">
+              <div className="flex w-full flex-col items-stretch justify-between gap-2 border-b border-zinc-300 py-4 backdrop-blur-md dark:border-zinc-700 sm:flex-row sm:items-center">
+                <div className="flex flex-wrap items-center gap-2 sm:gap-4">
+                  <div className="relative flex min-w-0 flex-1 items-center rounded-md bg-zinc-100 px-2 dark:bg-zinc-800 sm:flex-none">
                     <div className="">
                       <FaSearch className="text-neutral-500" />
                     </div>
                     <input
                       placeholder="Search keys or values"
-                      className="custom bg-zinc-100 dark:bg-zinc-800 placeholder:text-neutral-500 text-2xs 2xl:text-sm"
+                      className="custom min-w-0 w-full bg-zinc-100 dark:bg-zinc-800 placeholder:text-neutral-500 text-2xs 2xl:text-sm sm:w-auto"
                       value={searchQuery}
                       onChange={(e) => setSearchQuery(e.target.value)}
                     />
@@ -1415,7 +1416,7 @@ export default function EnvironmentPath({
                   </div>
                 </div>
 
-                <div className="flex gap-2 items-center">
+                <div className="flex items-center gap-2 self-end sm:self-auto">
                   {unsavedChanges && (
                     <Button
                       variant="outline"
@@ -1474,11 +1475,17 @@ export default function EnvironmentPath({
                   </div>
                   <div className="px-4 py-3 text-left text-xs font-medium text-neutral-500 w-2/3 flex items-center justify-between">
                     <span className="uppercase tracking-wider">value</span>
-                    <div className="flex items-center gap-4">
-                      <Button variant="outline" onClick={toggleGlobalReveal}>
+                    <div className="flex items-center gap-2 sm:gap-4">
+                      <Button
+                        variant="outline"
+                        onClick={toggleGlobalReveal}
+                        aria-label={globallyRevealed ? 'Mask all' : 'Reveal all'}
+                      >
                         <div className="flex items-center gap-2">
-                          {globallyRevealed ? <FaEyeSlash /> : <FaEye />}{' '}
-                          {globallyRevealed ? 'Mask all' : 'Reveal all'}
+                          {globallyRevealed ? <FaEyeSlash /> : <FaEye />}
+                          <span className="hidden sm:inline">
+                            {globallyRevealed ? 'Mask all' : 'Reveal all'}
+                          </span>
                         </div>
                       </Button>
                       <Button
@@ -1487,7 +1494,7 @@ export default function EnvironmentPath({
                         title="Download as .env file"
                       >
                         <div className="flex items-center gap-2">
-                          <FaDownload /> Export as .env
+                          <FaDownload /> <span className="hidden sm:inline">Export as .env</span>
                         </div>
                       </Button>
                       <NewSecretMenu />
diff --git a/frontend/app/[team]/apps/[app]/layout.tsx b/frontend/app/[team]/apps/[app]/layout.tsx
index 256ee0d27..79a11379c 100644
--- a/frontend/app/[team]/apps/[app]/layout.tsx
+++ b/frontend/app/[team]/apps/[app]/layout.tsx
@@ -70,16 +70,16 @@ export default function AppLayout({
 
   return (
     <div
-      className="w-full pt-3 sm:pt-4 lg:pt-6 text-black dark:text-white flex flex-col overflow-y-auto h-[calc(100vh-56px)]"
+      className="w-full pt-3 sm:pt-4 lg:pt-6 text-black dark:text-white flex flex-col overflow-y-auto h-[calc(100dvh_-_56px_-_var(--mobile-tabbar-height))]"
     >
       {loading && (
         <div className="px-3 sm:px-4 lg:px-6 dark:bg-neutral-700 bg-neutral-300 rounded-md h-12 w-40 animate-pulse"></div>
       )}
       {app && (
-        <div className="flex items-baseline justify-between pb-3 sm:pb-4 px-3 sm:px-4 lg:px-6">
-          <div className="flex items-baseline gap-3 group">
+        <div className="flex shrink-0 items-baseline justify-between pb-3 sm:pb-4 px-3 sm:px-4 lg:px-6">
+          <div className="flex min-w-0 items-baseline gap-3 group">
             <h1 className="text-lg sm:text-xl font-bold">{app.name}</h1>
-            <div className="opacity-0 group-hover:opacity-100 transition ease">
+            <div className="hidden opacity-0 group-hover:opacity-100 transition ease md:block">
               <CopyButton value={app.id} buttonVariant="ghost">
                 <span className="text-neutral-500 text-xs font-mono">{app.id}</span>
               </CopyButton>
@@ -92,25 +92,28 @@ export default function AppLayout({
       )}
 
       <Tab.Group selectedIndex={tabIndex} onChange={(index) => setTabIndex(index)}>
-        <Tab.List className="flex gap-2 w-full border-b border-neutral-500/20 px-3 sm:px-4 lg:px-6">
-          {tabs.map((tab) => (
-            <Tab as={Fragment} key={tab.name}>
-              {({ selected }) => (
-                <Link
-                  href={`/${params.team}/apps/${params.app}/${tab.link}`}
-                  className={clsx(
-                    'p-2 text-xs font-medium border-b focus:outline-none -mb-px',
-                    selected
-                      ? 'border-emerald-500 font-semibold text-zinc-900 dark:text-zinc-100'
-                      : 'border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100'
-                  )}
-                >
-                  {tab.name}
-                </Link>
-              )}
-            </Tab>
-          ))}
-        </Tab.List>
+        {/* overflow-x-auto lives on the wrapper so the tabs' -mb-px underline isn't clipped */}
+        <div className="w-full shrink-0 overflow-x-auto">
+          <Tab.List className="flex gap-0 sm:gap-2 w-full min-w-max border-b border-neutral-500/20 px-3 sm:px-4 lg:px-6">
+            {tabs.map((tab) => (
+              <Tab as={Fragment} key={tab.name}>
+                {({ selected }) => (
+                  <Link
+                    href={`/${params.team}/apps/${params.app}/${tab.link}`}
+                    className={clsx(
+                      'p-2 text-xs font-medium border-b focus:outline-none -mb-px',
+                      selected
+                        ? 'border-emerald-500 font-semibold text-zinc-900 dark:text-zinc-100'
+                        : 'border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100'
+                    )}
+                  >
+                    {tab.name}
+                  </Link>
+                )}
+              </Tab>
+            ))}
+          </Tab.List>
+        </div>
         {children}
       </Tab.Group>
     </div>
diff --git a/frontend/app/[team]/apps/[app]/logs/page.tsx b/frontend/app/[team]/apps/[app]/logs/page.tsx
index 36e54564b..e7c1574d9 100644
--- a/frontend/app/[team]/apps/[app]/logs/page.tsx
+++ b/frontend/app/[team]/apps/[app]/logs/page.tsx
@@ -34,7 +34,7 @@ export default function Logs({ params }: { params: { team: string; app: string }
     )
 
   return (
-    <div className="h-screen overflow-y-auto w-full text-black dark:text-white flex flex-col px-3 sm:px-4 lg:px-6">
+    <div className="h-full min-h-0 overflow-y-auto w-full text-black dark:text-white flex flex-col px-3 sm:px-4 lg:px-6">
       {organisation?.role!.name!.toLowerCase() === 'owner' ? (
         <Tab.Group selectedIndex={tabIndex} onChange={(index) => setTabIndex(index)}>
           <Tab.List className="flex gap-2 w-full border-b border-neutral-500/20">
diff --git a/frontend/app/[team]/apps/[app]/settings/page.tsx b/frontend/app/[team]/apps/[app]/settings/page.tsx
index 839c24552..46605a438 100644
--- a/frontend/app/[team]/apps/[app]/settings/page.tsx
+++ b/frontend/app/[team]/apps/[app]/settings/page.tsx
@@ -90,9 +90,9 @@ export default function AppSettings({ params }: { params: { team: string; app: s
             <h2 className="text-base sm:text-lg font-semibold">App</h2>
             <p className="text-neutral-500">App name and information</p>
           </div>
-          <div className="flex items-center gap-4">
+          <div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center">
             <FaCube className="shrink-0 text-neutral-500" size={40} />
-            <div className="flex items-start justify-between w-full">
+            <div className="flex min-w-0 w-full flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
               <div className="flex flex-col gap-1 w-full">
                 <h3 className="relative group w-full max-w-md">
                   <input
@@ -120,7 +120,7 @@ export default function AppSettings({ params }: { params: { team: string; app: s
 
                 <div className="flex items-center gap-4 group relative">
                   <CopyButton value={app.id} buttonVariant="ghost">
-                    <span className="text-neutral-500 text-sm font-mono">{app.id}</span>
+                    <span className="break-all text-neutral-500 text-sm font-mono">{app.id}</span>
                   </CopyButton>
                 </div>
               </div>
diff --git a/frontend/app/[team]/apps/page.tsx b/frontend/app/[team]/apps/page.tsx
index d2435542d..f1a28f520 100644
--- a/frontend/app/[team]/apps/page.tsx
+++ b/frontend/app/[team]/apps/page.tsx
@@ -55,7 +55,7 @@ export default function AppsHome({ params }: { params: { team: string } }) {
 
   return (
     <div
-      className="w-full p-3 sm:p-4 lg:p-6 text-black dark:text-white flex flex-col gap-3 sm:gap-4 overflow-y-auto h-[calc(100vh-56px)]"
+      className="w-full p-3 sm:p-4 lg:p-6 text-black dark:text-white flex flex-col gap-3 sm:gap-4 overflow-y-auto h-[calc(100dvh_-_56px_-_var(--mobile-tabbar-height))]"
     >
       <div className="space-y-1">
         <h1 className="text-lg sm:text-xl font-bold capitalize col-span-4">Apps</h1>
diff --git a/frontend/app/[team]/integrations/layout.tsx b/frontend/app/[team]/integrations/layout.tsx
index 36f1911ca..5eadd127d 100644
--- a/frontend/app/[team]/integrations/layout.tsx
+++ b/frontend/app/[team]/integrations/layout.tsx
@@ -67,7 +67,7 @@ export default function AccessLayout({
 
   return (
     <div
-      className="w-full p-3 sm:p-4 lg:p-6 pb-0 sm:pb-0 lg:pb-0 text-zinc-900 dark:text-zinc-100 flex flex-col overflow-y-auto space-y-3 h-[calc(100vh-56px)]"
+      className="w-full p-3 sm:p-4 lg:p-6 pb-0 sm:pb-0 lg:pb-0 text-zinc-900 dark:text-zinc-100 flex flex-col overflow-y-auto space-y-3 h-[calc(100dvh_-_56px_-_var(--mobile-tabbar-height))]"
     >
       <div className="space-y-1">
         <h1 className="text-lg sm:text-xl font-semibold">{params.team} Integrations</h1>
diff --git a/frontend/app/[team]/layout.tsx b/frontend/app/[team]/layout.tsx
index 27bc5d681..7c2e29fe2 100644
--- a/frontend/app/[team]/layout.tsx
+++ b/frontend/app/[team]/layout.tsx
@@ -105,16 +105,22 @@ export default function RootLayout({
   return (
     <div
       className={clsx(
-        'w-full h-screen overflow-hidden grid  divide-x divide-neutral-300 dark:divide-neutral-800',
-        showNav && 'grid-cols-[max-content_1fr]'
+        'w-full h-dvh overflow-hidden grid',
+        showNav &&
+          'md:divide-x md:divide-neutral-300 md:dark:divide-neutral-800 md:grid-cols-[max-content_1fr]'
       )}
     >
       {showUnlockDialog && <UnlockKeyringDialog organisation={activeOrganisation} />}
       {showNav && <NavBar />}
       {showNav && <Sidebar />}
-      <div className="grid h-screen">
+      <div className="grid h-dvh">
         <div></div>
-        <div className={clsx('overflow-auto', showNav && 'mt-12 min-h-[calc(100vh-48px)]')}>
+        <div
+          className={clsx(
+            'overflow-auto',
+            showNav && 'mt-12 min-h-[calc(100dvh_-_48px)] pb-[var(--mobile-tabbar-height)]'
+          )}
+        >
           {children}
         </div>
       </div>
diff --git a/frontend/app/[team]/logs/page.tsx b/frontend/app/[team]/logs/page.tsx
index 58f4a2a50..696606c3d 100644
--- a/frontend/app/[team]/logs/page.tsx
+++ b/frontend/app/[team]/logs/page.tsx
@@ -16,7 +16,7 @@ export default function OrgLogs({ params }: { params: { team: string } }) {
     )
 
   return (
-    <div className="h-screen overflow-y-auto w-full text-black dark:text-white flex flex-col px-3 sm:px-4 lg:px-6">
+    <div className="w-full text-black dark:text-white flex flex-col px-3 sm:px-4 lg:px-6">
       <h1 className="text-lg sm:text-xl font-bold pt-3 sm:pt-4 lg:pt-6 pb-3 sm:pb-4 lg:pb-6">Audit Logs</h1>
       <AuditLogs />
     </div>
diff --git a/frontend/app/[team]/recovery/page.tsx b/frontend/app/[team]/recovery/page.tsx
index 097d77a65..2ac21e039 100644
--- a/frontend/app/[team]/recovery/page.tsx
+++ b/frontend/app/[team]/recovery/page.tsx
@@ -195,16 +195,16 @@ export default function Recovery({ params }: { params: { team: string } }) {
 
   return (
     <>
-      <div className="flex flex-col justify-between w-full h-screen">
-        <div className="w-full flex justify-end p-4">
+      <div className="flex min-h-[100dvh] w-full flex-col justify-between">
+        <div className="w-full flex justify-end px-3 py-3 sm:p-4">
           <UserMenu />
         </div>
-        <div className="flex flex-col mx-auto my-auto w-full max-w-3xl gap-y-8">
-          <div className="mx-auto max-w-xl">
-            <h1 className="text-2xl text-black dark:text-white text-center font-bold">
+        <div className="flex flex-col mx-auto my-auto w-full max-w-3xl gap-y-5 px-3 pb-8 sm:gap-y-8 sm:px-4">
+          <div className="mx-auto max-w-xl space-y-1">
+            <h1 className="text-xl sm:text-2xl text-black dark:text-white text-center font-bold">
               Account Recovery
             </h1>
-            <p className="text-black/30 dark:text-white/40 text-center text-base">
+            <p className="text-black/30 dark:text-white/40 text-center text-sm sm:text-base">
               This wizard will help you restore access to your Phase Account. Please enter your
               recovery phrase below
               {skipPasswordStep
@@ -216,23 +216,25 @@ export default function Recovery({ params }: { params: { team: string } }) {
           </div>
           <form
             onSubmit={incrementStep}
-            className="space-y-8 p-8 border border-violet-200/10 rounded-lg dark:bg-black/30 backdrop-blur-lg w-full mx-auto shadow-lg"
+            className="space-y-6 p-4 sm:space-y-8 sm:p-8 border border-violet-200/10 rounded-lg dark:bg-black/30 backdrop-blur-lg w-full mx-auto shadow-lg"
           >
             {org && (
-              <div className="flex items-center justify-between">
-                <div className="whitespace-nowrap flex items-center gap-2">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <div className="flex min-w-0 items-center gap-2">
                   <Avatar user={session?.user} size="md" />
                   <div className="flex flex-col gap-2">
                     <div className="flex flex-col">
                       <span className="text-sm font-medium text-black dark:text-white">
                         {session?.user?.name}
                       </span>
-                      <span className="text-neutral-500 text-2xs">{session?.user?.email}</span>
+                      <span className="break-all text-neutral-500 text-2xs">
+                        {session?.user?.email}
+                      </span>
                     </div>
                   </div>
                 </div>
 
-                <div className="flex items-center gap-2">
+                <div className="flex items-center justify-end gap-2">
                   <h2 className="text-lg font-semibold text-black dark:text-white">{org.name}</h2>
                   <span className="text-neutral-500">
                     <RoleLabel role={org.role!} />
diff --git a/frontend/app/[team]/settings/page.tsx b/frontend/app/[team]/settings/page.tsx
index af17be6d1..6615ecae0 100644
--- a/frontend/app/[team]/settings/page.tsx
+++ b/frontend/app/[team]/settings/page.tsx
@@ -138,7 +138,7 @@ export default function Settings({ params }: { params: { team: string } }) {
 
                       <div className="flex flex-col gap-4 border-t border-neutral-500/20 py-4">
                         <div className="text-base font-medium">Public key</div>
-                        <code className="font-mono text-neutral-500 bg-zinc-300 dark:bg-zinc-800 p-4 rounded-md">
+                        <code className="break-all whitespace-normal font-mono text-neutral-500 bg-zinc-300 dark:bg-zinc-800 p-4 rounded-md">
                           {activeOrganisation?.identityKey}
                         </code>
                       </div>
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 8e3dec806..418b60915 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -2,6 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Height of the fixed mobile bottom nav; collapses to 0 above the md breakpoint so
+   layout paddings and viewport-height calcs can reference it unconditionally */
+:root {
+  --mobile-tabbar-height: calc(3.5rem + env(safe-area-inset-bottom));
+}
+
+@media (min-width: 768px) {
+  :root {
+    --mobile-tabbar-height: 0px;
+  }
+}
+
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
diff --git a/frontend/app/onboard/page.tsx b/frontend/app/onboard/page.tsx
index ff479f09a..43376ef38 100644
--- a/frontend/app/onboard/page.tsx
+++ b/frontend/app/onboard/page.tsx
@@ -349,9 +349,9 @@ const Onboard = () => {
   const isSudoPasswordStep = !skipSudoStep && step === 1
 
   return (
-    <main className="w-full flex flex-col justify-between h-screen">
+    <main className="w-full min-h-[100dvh] flex flex-col justify-between">
       {!licenseActivated() ? (
-        <div className="mx-auto my-auto w-full max-w-4xl flex flex-col gap-y-16 py-40">
+        <div className="mx-auto my-auto w-full max-w-4xl flex flex-col gap-y-16 py-24 md:py-40">
           <form
             onSubmit={incrementStep}
             className="space-y-8 p-4  rounded-lg  w-full mx-auto bg-zinc-200 dark:bg-zinc-800/40 ring-1 ring-inset ring-neutral-500/40 shadow-xl"
diff --git a/frontend/components/apps/AppCard.tsx b/frontend/components/apps/AppCard.tsx
index c76b7f0d0..5988ba554 100644
--- a/frontend/components/apps/AppCard.tsx
+++ b/frontend/components/apps/AppCard.tsx
@@ -307,7 +307,7 @@ const AppCardContent = ({ app, variant }: AppCardProps) => {
             </div>
           ) : (
             <div className="flex items-center justify-between">
-              <div onClick={(e) => e.stopPropagation()}>
+              <div className="hidden sm:block" onClick={(e) => e.stopPropagation()}>
                 <CopyButton value={id} buttonVariant="ghost">
                   <span className="text-2xs font-mono md:whitespace-nowrap text-neutral-500">
                     {id}
diff --git a/frontend/components/apps/AppsView.tsx b/frontend/components/apps/AppsView.tsx
index 1339f6312..3e10982d2 100644
--- a/frontend/components/apps/AppsView.tsx
+++ b/frontend/components/apps/AppsView.tsx
@@ -86,15 +86,15 @@ export const AppsView = ({
   return (
     <div className="space-y-4">
       {!noApps && (
-        <div className="flex justify-between gap-2">
-          <div className="flex items-center gap-4">
-            <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2 w-full max-w-sm">
+        <div className="flex flex-col justify-between gap-2 sm:flex-row">
+          <div className="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center sm:gap-4">
+            <div className="relative flex min-w-0 items-center rounded-md bg-zinc-100 px-2 dark:bg-zinc-800 sm:w-full sm:max-w-sm">
               <div className="">
                 <FaSearch className="text-neutral-500" />
               </div>
               <input
                 placeholder="Search"
-                className="custom bg-zinc-100 dark:bg-zinc-800"
+                className="custom min-w-0 w-full bg-zinc-100 dark:bg-zinc-800"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
diff --git a/frontend/components/auth/UnlockKeyringDialog.tsx b/frontend/components/auth/UnlockKeyringDialog.tsx
index 5bfcf9471..03adba2b9 100644
--- a/frontend/components/auth/UnlockKeyringDialog.tsx
+++ b/frontend/components/auth/UnlockKeyringDialog.tsx
@@ -249,7 +249,7 @@ export default function UnlockKeyringDialog(props: { organisation: OrganisationT
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-2xl transform rounded-2xl bg-white dark:bg-neutral-900 p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-2xl transform rounded-2xl bg-white dark:bg-neutral-900 p-4 sm:p-6 text-left align-middle shadow-xl transition-all">
                   {!devicePasswordExists && (
                     <Dialog.Title as="div" className="flex w-full gap-2 items-center">
                       <FaLock className='text-neutral-500'/>
@@ -274,9 +274,9 @@ export default function UnlockKeyringDialog(props: { organisation: OrganisationT
                       </div>
 
                       <div className="ring-1 ring-inset ring-neutral-500/40 shadow-lg p-4 rounded-lg bg-zinc-200 dark:bg-zinc-800 space-y-4">
-                        <div className="flex justify-between">
+                        <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
                           <div className="flex flex-col gap-4">
-                            <div className="whitespace-nowrap flex items-start gap-2">
+                            <div className="flex min-w-0 items-start gap-2">
                               <div className="pt-2">
                                 <Avatar user={session?.user} size="md" />
                               </div>
@@ -285,7 +285,7 @@ export default function UnlockKeyringDialog(props: { organisation: OrganisationT
                                   <span className="text-sm font-medium text-black dark:text-white">
                                     {session?.user?.name}
                                   </span>
-                                  <span className="text-neutral-500 text-2xs">
+                                  <span className="break-all text-neutral-500 text-2xs">
                                     {session?.user?.email}
                                   </span>
                                 </div>
@@ -301,7 +301,7 @@ export default function UnlockKeyringDialog(props: { organisation: OrganisationT
                             </div>
                           </div>
 
-                          <div>
+                          <div className="flex justify-end">
                             <Button type="button" variant="outline" onClick={() => handleSignout()}>
                               <div className="flex items-center gap-1 text-xs">
                                 <FaSignOutAlt /> Log out
@@ -310,7 +310,7 @@ export default function UnlockKeyringDialog(props: { organisation: OrganisationT
                           </div>
                         </div>
 
-                        <div className="flex justify-between items-end gap-4">
+                        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between sm:gap-4">
                           <div className="space-y-2 w-full">
                             <label
                               className="block text-gray-700 text-sm font-bold mb-2"
@@ -340,7 +340,7 @@ export default function UnlockKeyringDialog(props: { organisation: OrganisationT
                               </button>
                             </div>
                           </div>
-                          <div className="pb-1">
+                          <div className="flex justify-end pb-1">
                             <Button
                               type="submit"
                               variant="primary"
diff --git a/frontend/components/layout/Navbar.tsx b/frontend/components/layout/Navbar.tsx
index bd6eee5b8..fc78ccd2b 100644
--- a/frontend/components/layout/Navbar.tsx
+++ b/frontend/components/layout/Navbar.tsx
@@ -69,7 +69,7 @@ export const NavBar = () => {
         </Link>
 
         {breadcrumbs.map((crumb, index) => (
-          <div key={index} className="flex items-center gap-2 text-xs">
+          <div key={index} className="hidden items-center gap-2 text-xs md:flex">
             <span className="shrink-0">/</span>
             {crumb.isLink && crumb.href ? (
               <Link
diff --git a/frontend/components/layout/Sidebar.tsx b/frontend/components/layout/Sidebar.tsx
index b6ec4702d..49e3ffffb 100644
--- a/frontend/components/layout/Sidebar.tsx
+++ b/frontend/components/layout/Sidebar.tsx
@@ -14,6 +14,7 @@ import {
   FaAngleDoubleLeft,
   FaAngleDoubleRight,
   FaChevronDown,
+  FaEllipsisH,
 } from 'react-icons/fa'
 import { organisationContext } from '@/contexts/organisationContext'
 import { SidebarContext } from '@/contexts/sidebarContext'
@@ -76,6 +77,108 @@ const SidebarLink = ({
   )
 }
 
+const MobileMoreMenu = ({
+  overflowLinks,
+  organisations,
+  activeOrganisation,
+  isOwner,
+}: {
+  overflowLinks: SidebarLinkT[]
+  organisations: OrganisationType[] | null
+  activeOrganisation: OrganisationType | null
+  isOwner: boolean
+}) => {
+  return (
+    <Menu as="div" className="relative flex-1 min-w-0">
+      {({ open }) => (
+        <>
+          <Menu.Button
+            className={clsx(
+              'flex w-full h-14 flex-col items-center justify-center gap-0.5 px-1 transition-colors',
+              open || overflowLinks.some((link) => link.active)
+                ? 'text-emerald-600 dark:text-emerald-400'
+                : 'text-zinc-600 dark:text-zinc-400'
+            )}
+            aria-label="More navigation"
+            title="More"
+          >
+            <FaEllipsisH className="text-lg" />
+            <span className="text-[10px] font-medium">More</span>
+          </Menu.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 translate-y-1"
+            enterTo="transform opacity-100 translate-y-0"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 translate-y-0"
+            leaveTo="transform opacity-0 translate-y-1"
+          >
+            <Menu.Items className="absolute bottom-full right-2 mb-2 w-64 origin-bottom-right divide-y divide-neutral-500/40 rounded-md bg-neutral-200 p-1 shadow-2xl ring-1 ring-inset ring-neutral-500/40 focus:outline-none dark:bg-neutral-800">
+              <div className="px-2 py-2 text-xs font-medium text-neutral-500">Organisation</div>
+              <div className="py-1">
+                {organisations?.map((org: OrganisationType) => (
+                  <Menu.Item key={org.id}>
+                    {({ active }) => (
+                      <Link
+                        href={`/${org.name}`}
+                        className={clsx(
+                          'flex items-center justify-between gap-2 rounded px-2 py-2 text-sm',
+                          active && 'bg-neutral-100 dark:bg-neutral-700'
+                        )}
+                      >
+                        <span className="truncate">{org.name}</span>
+                        {org.id === activeOrganisation?.id && (
+                          <span className="text-emerald-500">Current</span>
+                        )}
+                      </Link>
+                    )}
+                  </Menu.Item>
+                ))}
+                {!isOwner && (
+                  <Menu.Item>
+                    {({ active }) => (
+                      <Link
+                        href="/onboard"
+                        className={clsx(
+                          'flex items-center gap-3 rounded px-2 py-2 text-sm',
+                          active && 'bg-neutral-100 dark:bg-neutral-700'
+                        )}
+                      >
+                        <FaPlus />
+                        Create New Organisation
+                      </Link>
+                    )}
+                  </Menu.Item>
+                )}
+              </div>
+              <div className="py-1">
+                {overflowLinks.map((link) => (
+                  <Menu.Item key={link.name}>
+                    {({ active }) => (
+                      <Link
+                        href={link.href}
+                        className={clsx(
+                          'flex items-center gap-3 rounded px-2 py-2 text-sm',
+                          active && 'bg-neutral-100 dark:bg-neutral-700',
+                          link.active && 'text-emerald-600 dark:text-emerald-400'
+                        )}
+                      >
+                        {link.icon}
+                        {link.name}
+                      </Link>
+                    )}
+                  </Menu.Item>
+                ))}
+              </div>
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
+  )
+}
+
 const Sidebar = () => {
   const { sidebarState, setUserPreference } = useContext(SidebarContext)
   const [isAutoCollapsed, setIsAutoCollapsed] = useState(false)
@@ -263,47 +366,82 @@ const Sidebar = () => {
     },
   ]
 
+  const mobileLinks = links.slice(0, 4)
+  const overflowLinks = links.slice(4)
+
   return (
-    <div
-      className={clsx(
-        'h-screen flex flex-col pt-12 transition-all duration-300',
-        collapsed ? 'w-16' : 'w-64'
-      )}
-    >
-      <nav className="flex flex-col divide-y divide-neutral-300 dark:divide-neutral-800 items-start justify-between h-full bg-neutral-100/70 dark:bg-neutral-800/20 text-black dark:text-white">
-        {/* Main navigation area */}
-        <div className="gap-3 p-3 grid grid-cols-1 w-full">
-          <div className={clsx(collapsed ? 'mb-2' : '')}>
-            <OrgsMenu />
+    <>
+      <div
+        className={clsx(
+          'hidden h-dvh flex-col pt-12 transition-all duration-300 md:flex',
+          collapsed ? 'w-16' : 'w-64'
+        )}
+      >
+        <nav className="flex flex-col divide-y divide-neutral-300 dark:divide-neutral-800 items-start justify-between h-full bg-neutral-100/70 dark:bg-neutral-800/20 text-black dark:text-white">
+          {/* Main navigation area */}
+          <div className="gap-3 p-3 grid grid-cols-1 w-full">
+            <div className={clsx(collapsed ? 'mb-2' : '')}>
+              <OrgsMenu />
+            </div>
+            {links.map((link) => (
+              <SidebarLink
+                key={link.name}
+                name={link.name}
+                href={link.href}
+                icon={link.icon}
+                active={link.active}
+                collapsed={collapsed}
+              />
+            ))}
           </div>
-          {links.map((link) => (
-            <SidebarLink
-              key={link.name}
-              name={link.name}
-              href={link.href}
-              icon={link.icon}
-              active={link.active}
-              collapsed={collapsed}
-            />
-          ))}
-        </div>
 
-        {/* Bottom section with collapse/expand button */}
-        <div className="p-2 w-full">
-          <button
-            onClick={() => setUserPreference(collapsed ? 'expanded' : 'collapsed')}
-            className="flex items-center justify-center p-1.5 w-full text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-lg"
-            title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          >
-            {collapsed ? (
-              <FaAngleDoubleRight className="text-sm" />
-            ) : (
-              <FaAngleDoubleLeft className="text-sm" />
+          {/* Bottom section with collapse/expand button */}
+          <div className="p-2 w-full">
+            <button
+              onClick={() => setUserPreference(collapsed ? 'expanded' : 'collapsed')}
+              className="flex items-center justify-center p-1.5 w-full text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-lg"
+              title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            >
+              {collapsed ? (
+                <FaAngleDoubleRight className="text-sm" />
+              ) : (
+                <FaAngleDoubleLeft className="text-sm" />
+              )}
+            </button>
+          </div>
+        </nav>
+      </div>
+
+      {/* z-10 keeps Headless UI dialogs (also z-10, portaled later in <body>) painting above the nav */}
+      <nav className="fixed inset-x-0 bottom-0 z-10 flex h-[var(--mobile-tabbar-height)] items-start border-t border-neutral-300 bg-neutral-100/95 pb-[env(safe-area-inset-bottom)] text-zinc-600 backdrop-blur-md dark:border-neutral-700 dark:bg-neutral-900/95 dark:text-zinc-400 md:hidden">
+        {mobileLinks.map((link) => (
+          <Link
+            key={link.name}
+            href={link.href}
+            className={clsx(
+              'flex h-14 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 px-1 transition-colors',
+              link.active
+                ? 'text-emerald-600 dark:text-emerald-400'
+                : 'hover:text-zinc-900 dark:hover:text-zinc-100'
             )}
-          </button>
-        </div>
+            aria-label={link.name}
+            aria-current={link.active ? 'page' : undefined}
+            title={link.name}
+          >
+            <span className="text-lg">{link.icon}</span>
+            <span className="max-w-full truncate text-[10px] font-medium">
+              {link.name === 'Access Control' ? 'Access' : link.name}
+            </span>
+          </Link>
+        ))}
+        <MobileMoreMenu
+          overflowLinks={overflowLinks}
+          organisations={organisations}
+          activeOrganisation={activeOrganisation}
+          isOwner={!!isOwner}
+        />
       </nav>
-    </div>
+    </>
   )
 }
 
diff --git a/frontend/components/logs/AuditLogs.tsx b/frontend/components/logs/AuditLogs.tsx
index dc84eec4a..9bfbc479f 100644
--- a/frontend/components/logs/AuditLogs.tsx
+++ b/frontend/components/logs/AuditLogs.tsx
@@ -1073,29 +1073,32 @@ export default function AuditLogs() {
     <>
       {userCanReadLogs ? (
         <div className="w-full text-black dark:text-white flex flex-col">
-          {/* Resource type tabs. The backend scopes non-global roles to
-              their accessible apps/envs and excludes 'stream' events (org-
-              wide egress config), so that tab would be permanently empty
+          {/* Resource type tabs. overflow-x-auto lives on the wrapper so the
+              -mb-px underline isn't clipped. The backend scopes non-global
+              roles to their accessible apps/envs and excludes 'stream' events
+              (org-wide egress config), so that tab would be permanently empty
               for them — hide it. */}
-          <div className="flex gap-0 w-full border-b border-neutral-500/20 px-3 sm:px-4 lg:px-6">
-            {RESOURCE_TABS.filter(
-              (tab) =>
-                tab.key !== 'stream' ||
-                userHasGlobalAccess(organisation?.role?.permissions)
-            ).map((tab) => (
-              <button
-                key={tab.key}
-                onClick={() => setActiveTab(tab.key)}
-                className={clsx(
-                  'p-2 text-xs font-medium border-b -mb-px transition-colors focus:outline-none',
-                  activeTab === tab.key
-                    ? 'border-emerald-500 font-semibold text-zinc-900 dark:text-zinc-100'
-                    : 'border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 cursor-pointer'
-                )}
-              >
-                {tab.label}
-              </button>
-            ))}
+          <div className="w-full overflow-x-auto">
+            <div className="flex gap-0 w-full min-w-max border-b border-neutral-500/20 px-3 sm:px-4 lg:px-6">
+              {RESOURCE_TABS.filter(
+                (tab) =>
+                  tab.key !== 'stream' ||
+                  userHasGlobalAccess(organisation?.role?.permissions)
+              ).map((tab) => (
+                <button
+                  key={tab.key}
+                  onClick={() => setActiveTab(tab.key)}
+                  className={clsx(
+                    'p-2 text-xs font-medium whitespace-nowrap border-b -mb-px transition-colors focus:outline-none',
+                    activeTab === tab.key
+                      ? 'border-emerald-500 font-semibold text-zinc-900 dark:text-zinc-100'
+                      : 'border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 cursor-pointer'
+                  )}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
           </div>
 
           {/* Toolbar */}
@@ -1137,7 +1140,7 @@ export default function AuditLogs() {
                     >
                       <Menu.Items
                         static
-                        className="absolute right-0 mt-2 z-30 w-96 p-4 rounded-md shadow-xl bg-neutral-300/50 dark:bg-neutral-900/60 backdrop-blur-lg ring-1 ring-neutral-500/20 space-y-6"
+                        className="absolute right-0 mt-2 z-30 w-[calc(100vw-2rem)] max-w-96 p-4 rounded-md shadow-xl bg-neutral-300/50 dark:bg-neutral-900/60 backdrop-blur-lg ring-1 ring-neutral-500/20 space-y-6"
                       >
                         {/* Event types */}
                         <div className="space-y-2">
@@ -1366,7 +1369,8 @@ export default function AuditLogs() {
           </div>
 
           {/* Table */}
-          <table className="table-fixed w-full text-left text-sm">
+          <div className="overflow-x-auto md:overflow-visible">
+            <table className="table-fixed w-full min-w-[56rem] text-left text-sm md:min-w-full">
             <thead className="border-b-2 border-neutral-500/20 sticky top-[58px] z-1 bg-neutral-200/50 dark:bg-neutral-900/60 backdrop-blur-lg shadow-xl">
               <tr className="text-gray-500 uppercase text-2xs tracking-wider">
                 <th className="w-10"></th>
@@ -1417,7 +1421,8 @@ export default function AuditLogs() {
                 </td>
               </tr>
             </tbody>
-          </table>
+            </table>
+          </div>
         </div>
       ) : (
         <EmptyState
diff --git a/frontend/components/logs/KmsLogs.tsx b/frontend/components/logs/KmsLogs.tsx
index 8fd607e97..cc85f5541 100644
--- a/frontend/components/logs/KmsLogs.tsx
+++ b/frontend/components/logs/KmsLogs.tsx
@@ -303,7 +303,8 @@ export default function KMSLogs(props: { app: string }) {
           Refresh
         </Button>
       </div>
-      <table className="table-auto w-full text-left text-sm font-light">
+      <div className="w-full overflow-x-auto md:overflow-visible">
+        <table className="table-auto min-w-[42rem] md:min-w-0 w-full text-left text-sm font-light">
         <thead className="border-b-2 font-medium border-neutral-500/20 sticky top-[58px] z-10  bg-neutral-300/50 dark:bg-neutral-900/60 backdrop-blur-lg shadow-xl">
           <tr className="text-neutral-500">
             <th></th>
@@ -332,7 +333,8 @@ export default function KMSLogs(props: { app: string }) {
             </td>
           </tr>
         </tbody>
-      </table>
+        </table>
+      </div>
     </div>
   )
 }
diff --git a/frontend/components/logs/SecretLogs.tsx b/frontend/components/logs/SecretLogs.tsx
index 2f683ad4e..cdf3f240c 100644
--- a/frontend/components/logs/SecretLogs.tsx
+++ b/frontend/components/logs/SecretLogs.tsx
@@ -608,7 +608,7 @@ export default function SecretLogs(props: { app: string }) {
                     >
                       <Menu.Items
                         static
-                        className="absolute right-0 mt-2 z-30 w-96 p-4 rounded-md shadow-xl bg-neutral-300/50 dark:bg-neutral-900/60 backdrop-blur-lg ring-1 ring-neutral-500/20 space-y-6"
+                        className="absolute right-0 mt-2 z-30 w-[calc(100vw-2rem)] max-w-96 p-4 rounded-md shadow-xl bg-neutral-300/50 dark:bg-neutral-900/60 backdrop-blur-lg ring-1 ring-neutral-500/20 space-y-6"
                       >
                         {/* Event types */}
                         <div className="space-y-2">
@@ -887,7 +887,8 @@ export default function SecretLogs(props: { app: string }) {
               </Button>
             </div>
           </div>
-          <table className="table-fixed w-full text-left text-sm">
+          <div className="w-full overflow-x-auto md:overflow-visible">
+            <table className="table-fixed min-w-[42rem] md:min-w-0 w-full text-left text-sm">
             <thead className="border-b-2 border-neutral-500/20 sticky top-[58px] z-1 bg-neutral-200/50 dark:bg-neutral-900/60 backdrop-blur-lg shadow-xl">
               <tr className="text-gray-500 uppercase text-2xs tracking-wider">
                 <th className="w-10"></th>
@@ -933,7 +934,8 @@ export default function SecretLogs(props: { app: string }) {
                 </td>
               </tr>
             </tbody>
-          </table>
+            </table>
+          </div>
         </div>
       ) : (
         <EmptyState
diff --git a/frontend/components/onboarding/AccountSeedChecker.tsx b/frontend/components/onboarding/AccountSeedChecker.tsx
index 997efa0a8..2aa681f0a 100644
--- a/frontend/components/onboarding/AccountSeedChecker.tsx
+++ b/frontend/components/onboarding/AccountSeedChecker.tsx
@@ -17,7 +17,7 @@ export const AccountSeedChecker = (props: AccountSeedCheckProps) => {
     props.mnemonic ? inputs[index] === mnemonicWords[index] : false
 
   return (
-    <div className="grid grid-cols-6 gap-4">
+    <div className="grid grid-cols-4 gap-2 sm:grid-cols-6 sm:gap-4">
       {[...Array(inputs.length)].map((n, index) => (
         <div key={index} className="relative">
           <input
@@ -29,7 +29,7 @@ export const AccountSeedChecker = (props: AccountSeedCheckProps) => {
             readOnly={isCorrect(index) ? true : false}
             //maxLength={25}
             className={clsx(
-              'font-mono w-full ph-no-capture',
+              'font-mono w-full text-sm ph-no-capture',
               isCorrect(index) && '!bg-emerald-400/20 !text-emerald-500'
             )}
           />
diff --git a/frontend/components/onboarding/Stepper.tsx b/frontend/components/onboarding/Stepper.tsx
index 954ad635f..058447c3f 100644
--- a/frontend/components/onboarding/Stepper.tsx
+++ b/frontend/components/onboarding/Stepper.tsx
@@ -18,7 +18,7 @@ export const Stepper = ({ steps, activeStep, align = 'center' }: StepperProps) =
   const ICON_WRAPPER_BASE =
     'rounded-full transition duration-500 ease-in-out h-8 w-8 border text-center flex justify-center items-center text-xs'
   const LABEL_BASE =
-    'absolute top-0 -ml-10 text-center mt-12 w-32 text-2xs font-medium uppercase tracking-widest'
+    'absolute top-0 -ml-8 text-center mt-12 w-24 text-2xs font-medium uppercase tracking-widest sm:-ml-10 sm:w-32'
   const THREAD_BASE = 'flex-auto border-t transition duration-500 ease-in-out'
 
   // Defensive clamp: if a parent shrinks `steps` while `activeStep` is
@@ -37,7 +37,7 @@ export const Stepper = ({ steps, activeStep, align = 'center' }: StepperProps) =
   return (
     <div className="space-y-8">
       {steps.length > 1 && (
-        <div className="mx-4 p-4">
+        <div className="mx-8 p-4 sm:mx-4">
           <div className="flex items-center">
             {steps.map((step: Step, index: number) => (
               <>