diff --git a/public/css/responsive.css b/public/css/responsive.css
new file mode 100644
index 0000000..a60b21b
--- /dev/null
+++ b/public/css/responsive.css
@@ -0,0 +1,482 @@
+/* Mobile-first usability layer for the AccManager application. */
+
+html {
+    min-width: 320px;
+    overflow-x: hidden;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    min-width: 320px;
+}
+
+button,
+a,
+input,
+select,
+textarea {
+    -webkit-tap-highlight-color: transparent;
+}
+
+.table-wrap,
+.overflow-x-auto {
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 900px) {
+    body.app-shell,
+    #appMain,
+    #mainContent {
+        min-height: 0;
+    }
+
+    body.mobile-nav-open {
+        overflow: hidden;
+    }
+
+    #appSidebar {
+        padding-top: env(safe-area-inset-top);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    #appSidebar nav {
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding-bottom: 1rem;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    #appMain > header {
+        min-height: 3.5rem;
+        height: auto;
+        padding-top: max(0.35rem, env(safe-area-inset-top));
+        padding-bottom: 0.35rem;
+    }
+
+    #mobileMenuBtn,
+    #profileBtn,
+    #logoutBtn,
+    #pendingAssetRequestsBtn {
+        min-width: 2.75rem;
+        min-height: 2.75rem;
+        touch-action: manipulation;
+    }
+
+    #pendingAssetRequestsBtn {
+        justify-content: center;
+    }
+
+    #mainContent > [class*="-page"] {
+        width: 100%;
+        min-width: 0;
+        padding: 0.875rem;
+        gap: 0;
+    }
+
+    .dashboard-page {
+        padding-bottom: calc(0.875rem + env(safe-area-inset-bottom)) !important;
+    }
+
+    .dashboard-header,
+    .page-header {
+        margin-bottom: 0.875rem;
+    }
+
+    .dashboard-header > div,
+    .page-header > div {
+        min-width: 0;
+    }
+
+    .dashboard-header h1,
+    .page-header h1,
+    .users-page h1 {
+        font-size: 1.35rem;
+        line-height: 1.25;
+        overflow-wrap: anywhere;
+    }
+
+    .dashboard-header p,
+    .page-header p,
+    .users-page h1 + p {
+        margin-top: 0.25rem;
+        font-size: 0.75rem;
+        line-height: 1.4;
+    }
+
+    .dashboard-actions,
+    .asset-header-actions,
+    .consumable-header-actions {
+        max-width: 100%;
+    }
+
+    .page-header > button,
+    .dashboard-actions > button,
+    .page-header .asset-header-actions > button,
+    .page-header .consumable-header-actions > button {
+        min-height: 2.75rem;
+        justify-content: center;
+        touch-action: manipulation;
+    }
+
+    .page-filters,
+    .users-controls {
+        margin-bottom: 0.875rem;
+    }
+
+    .page-filters > *,
+    .users-controls > * {
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .page-filters > div,
+    .users-controls > div {
+        align-items: stretch;
+        flex-direction: column;
+        gap: 0.35rem;
+    }
+
+    .page-filters input,
+    .page-filters select,
+    .users-controls input,
+    .users-controls select,
+    .modal-content input,
+    .modal-content select,
+    .modal-content textarea {
+        width: 100%;
+        min-height: 2.75rem;
+        font-size: 1rem;
+    }
+
+    .dashboard-stats,
+    .apps-stats {
+        gap: 0.75rem;
+    }
+
+    .dashboard-stats > *,
+    .apps-stats > * {
+        min-width: 0;
+    }
+
+    .table-wrap {
+        min-width: 0;
+        scrollbar-width: thin;
+    }
+
+    /* Tables are progressively enhanced with data labels by app.js. */
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) {
+        display: block;
+        width: 100%;
+        min-width: 0 !important;
+        border-collapse: separate;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > thead {
+        display: none;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: 0.75rem;
+        padding: 0.75rem;
+        background: rgb(248 250 252 / 0.72);
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr {
+        display: grid;
+        width: 100%;
+        min-width: 0;
+        overflow: hidden;
+        border: 1px solid #e2e8f0;
+        border-radius: 0.75rem;
+        background: #fff;
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr:hover {
+        background: #fff;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr > td {
+        position: static !important;
+        z-index: auto !important;
+        display: grid;
+        grid-template-columns: minmax(5.75rem, 36%) minmax(0, 1fr);
+        align-items: start;
+        gap: 0.75rem;
+        width: auto !important;
+        min-width: 0 !important;
+        max-width: none !important;
+        padding: 0.65rem 0.75rem;
+        border: 0;
+        border-bottom: 1px solid #f1f5f9;
+        background: transparent !important;
+        box-shadow: none !important;
+        color: #334155;
+        text-align: left !important;
+        white-space: normal !important;
+        overflow-wrap: anywhere;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr > td:last-child {
+        border-bottom: 0;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr > td::before {
+        content: attr(data-label);
+        color: #64748b;
+        font-size: 0.625rem;
+        font-weight: 800;
+        line-height: 1.35;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr > td[colspan] {
+        display: block;
+        padding: 1.5rem 1rem;
+        text-align: center !important;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr > td[colspan]::before {
+        content: none;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr > td > * {
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr > td .truncate {
+        white-space: normal;
+        overflow-wrap: anywhere;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr > td .inline-flex {
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) button,
+    #mainContent .asset-mobile-card button,
+    #mainContent .consumable-mobile-card button {
+        min-width: 2.5rem;
+        min-height: 2.5rem;
+        touch-action: manipulation;
+    }
+
+    .page-pager {
+        width: 100%;
+        padding: 0.75rem !important;
+        padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
+        line-height: 1.4;
+    }
+
+    .page-pager > div,
+    .page-pager > span {
+        max-width: 100%;
+    }
+
+    .page-pager button {
+        min-width: 2.75rem;
+        min-height: 2.5rem;
+        touch-action: manipulation;
+    }
+
+    .modal-backdrop {
+        padding-top: env(safe-area-inset-top);
+    }
+
+    .modal-backdrop .modal-content {
+        max-width: none !important;
+        max-height: calc(100dvh - 0.75rem - env(safe-area-inset-top)) !important;
+        margin: 0.375rem !important;
+        margin-bottom: 0 !important;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+        overscroll-behavior: contain;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .modal-content > .p-6,
+    .modal-content > form.p-6,
+    .modal-content > form > .p-6 {
+        padding: 1rem !important;
+    }
+
+    .modal-content > .px-6,
+    .modal-content > form > .px-6 {
+        padding-right: 1rem !important;
+        padding-left: 1rem !important;
+    }
+
+    .modal-content .grid-cols-2,
+    .modal-content .grid-cols-4 {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .modal-content h2,
+    .modal-content h3 {
+        overflow-wrap: anywhere;
+    }
+
+    .modal-content > .flex:last-child,
+    .modal-content > form > .flex:last-child,
+    .modal-content > form > div > .flex:last-child {
+        flex-wrap: wrap;
+    }
+
+    .modal-content > .flex:last-child > button,
+    .modal-content > form > .flex:last-child > button,
+    .modal-content > form > div > .flex:last-child > button {
+        min-height: 2.75rem;
+        flex: 1 1 8rem;
+    }
+
+    .modal-content .overflow-x-auto table {
+        min-width: 42rem !important;
+    }
+
+    #NotiflixNotifyWrap {
+        right: 0.5rem !important;
+        left: 0.5rem !important;
+        width: auto !important;
+        max-width: none !important;
+    }
+}
+
+@media (max-width: 560px) {
+    #appMain > header .topbar-actions {
+        gap: 0.25rem;
+    }
+
+    #pendingAssetRequestsBtn > span:not(.material-symbols-outlined):not(#pendingAssetRequestsBadge) {
+        display: none;
+    }
+
+    #pendingAssetRequestsBtn,
+    #profileBtn,
+    #logoutBtn,
+    #mobileMenuBtn {
+        padding-right: 0.625rem;
+        padding-left: 0.625rem;
+    }
+
+    #mainContent > [class*="-page"] {
+        padding: 0.75rem;
+    }
+
+    .dashboard-stats,
+    .apps-stats {
+        grid-template-columns: minmax(0, 1fr) !important;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody {
+        padding: 0.625rem;
+    }
+
+    #mainContent table.mobile-card-table:not(.keep-table-mobile) > tbody > tr > td {
+        grid-template-columns: minmax(5rem, 34%) minmax(0, 1fr);
+        gap: 0.625rem;
+        padding: 0.625rem;
+    }
+
+    .modal-backdrop .modal-content {
+        width: 100% !important;
+        margin-right: 0 !important;
+        margin-left: 0 !important;
+    }
+}
+
+/* Login, registration, password recovery and email verification. */
+body.auth-page,
+body.verify-page {
+    min-height: 100dvh;
+    overflow-x: hidden;
+}
+
+.auth-shell,
+.verify-shell {
+    min-height: 100dvh;
+    padding-top: max(1rem, env(safe-area-inset-top));
+    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+}
+
+@media (max-width: 560px) {
+    .auth-shell,
+    .verify-shell {
+        align-items: flex-start;
+        padding-right: 0.75rem;
+        padding-left: 0.75rem;
+    }
+
+    .auth-card,
+    .verify-card {
+        padding: 1.25rem !important;
+        border-radius: 1rem;
+    }
+
+    .auth-card .auth-heading {
+        margin-bottom: 1.5rem;
+    }
+
+    .auth-card .auth-icon {
+        width: 3.25rem;
+        height: 3.25rem;
+    }
+
+    .auth-card h1,
+    .verify-card h1 {
+        font-size: 1.35rem;
+        line-height: 1.25;
+    }
+
+    .auth-card input:not([type="checkbox"]),
+    .auth-card select,
+    .auth-card textarea {
+        min-height: 2.75rem;
+        font-size: 1rem;
+    }
+
+    .auth-card button,
+    .verify-card a {
+        min-height: 2.75rem;
+        touch-action: manipulation;
+    }
+
+    .auth-card .remember-row,
+    .verify-card .verify-actions {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    .auth-card .remember-row > div {
+        min-height: 2.25rem;
+    }
+
+    .auth-card .remember-row > button {
+        align-self: flex-start;
+        min-height: 2.25rem;
+    }
+
+    .verify-card .verify-actions > a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        scroll-behavior: auto !important;
+        transition-duration: 0.01ms !important;
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+    }
+}
diff --git a/public/index.html b/public/index.html
index c8fbb5d..23b5399 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Redirecting...</title>
     <script>
         window.location.href = './pages/login.html';
diff --git a/public/js/app.js b/public/js/app.js
index 5b2c064..37de47a 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -100,6 +100,9 @@ class AccountManager {
         this.selectedAssetIds = new Set();
         this.mobileBreakpoint = 900;
         this.boundResizeHandler = null;
+        this.boundMobileKeyHandler = null;
+        this.responsiveTableObserver = null;
+        this.responsiveTableUpdatePending = false;
         this.configureNotifications();
         this.initPromise = this.init();
         this.pendingAccountAppId = undefined;
@@ -338,6 +341,7 @@ class AccountManager {
         }
 
         this.restoreSearchFocus();
+        this.enhanceResponsiveTables(mainContent);
         this.updatePendingAssetRequestsBadge();
         this.setActiveNav(page);
     }
@@ -393,6 +397,18 @@ class AccountManager {
             window.addEventListener('resize', this.boundResizeHandler);
         }
 
+        if (!this.boundMobileKeyHandler) {
+            this.boundMobileKeyHandler = (event) => {
+                if (event.key === 'Escape' && document.body.classList.contains('mobile-nav-open')) {
+                    this.closeMobileNav();
+                    menuBtn?.focus();
+                }
+            };
+            document.addEventListener('keydown', this.boundMobileKeyHandler);
+        }
+
+        this.setupResponsiveTableObserver();
+
         if (!this.isMobileViewport()) {
             this.closeMobileNav();
         }
@@ -1017,6 +1033,55 @@ class AccountManager {
         }
     }
 
+    setupResponsiveTableObserver() {
+        const mainContent = document.getElementById('mainContent');
+        if (!mainContent || this.responsiveTableObserver || typeof MutationObserver === 'undefined') {
+            return;
+        }
+
+        this.responsiveTableObserver = new MutationObserver(() => {
+            if (this.responsiveTableUpdatePending) {
+                return;
+            }
+
+            this.responsiveTableUpdatePending = true;
+            window.requestAnimationFrame(() => {
+                this.responsiveTableUpdatePending = false;
+                this.enhanceResponsiveTables(mainContent);
+            });
+        });
+
+        this.responsiveTableObserver.observe(mainContent, {
+            childList: true,
+            subtree: true
+        });
+    }
+
+    enhanceResponsiveTables(root = document) {
+        if (!root?.querySelectorAll) {
+            return;
+        }
+
+        root.querySelectorAll('table:not(.keep-table-mobile)').forEach(table => {
+            table.classList.add('mobile-card-table');
+
+            const headers = Array.from(table.querySelectorAll('thead th')).map((header, index) => {
+                return String(header.textContent || '').trim() || `Cột ${index + 1}`;
+            });
+
+            table.querySelectorAll('tbody tr').forEach(row => {
+                Array.from(row.children).forEach((cell, index) => {
+                    if (cell.tagName !== 'TD' || cell.hasAttribute('colspan')) {
+                        return;
+                    }
+
+                    const headerIndex = Number.isInteger(cell.cellIndex) ? cell.cellIndex : index;
+                    cell.dataset.label = headers[headerIndex] || `Cột ${headerIndex + 1}`;
+                });
+            });
+        });
+    }
+
     refreshConsumableExportProjectOptions(selectedValue = '') {
         const select = document.getElementById('consumableExportProjectInput');
         if (!select) {
diff --git a/public/pages/index.html b/public/pages/index.html
index 328b125..e67a4b4 100644
--- a/public/pages/index.html
+++ b/public/pages/index.html
@@ -267,6 +267,7 @@
         }
 
     </style>
+    <link rel="stylesheet" href="../css/responsive.css?v=20260717-1" />
 </head>
 <body class="app-shell bg-background text-on-surface antialiased flex h-screen w-screen">
     <!-- SideNavBar -->
@@ -387,6 +388,6 @@
         </div>
     </main>
 
-    <script src="../js/app.js?v=20260630-1"></script>
+    <script src="../js/app.js?v=20260717-1"></script>
 </body>
 </html>
diff --git a/public/pages/login.html b/public/pages/login.html
index d5656d0..26c3ef0 100644
--- a/public/pages/login.html
+++ b/public/pages/login.html
@@ -25,16 +25,17 @@
         body { font-family: 'Inter', sans-serif; min-height: 100vh; }
         h1, h2, h3 { font-family: 'Manrope', sans-serif; }
     </style>
+    <link rel="stylesheet" href="../css/responsive.css?v=20260717-1" />
 </head>
-<body class="bg-gradient-to-br from-blue-50 via-background to-purple-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 antialiased">
-    <div class="min-h-screen flex items-center justify-center px-4">
+<body class="auth-page bg-gradient-to-br from-blue-50 via-background to-purple-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 antialiased">
+    <div class="auth-shell min-h-screen flex items-center justify-center px-4">
         <div class="w-full max-w-md">
             <!-- Login Card -->
-            <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-lg border border-outline-variant/10 p-8">
+            <div class="auth-card bg-white dark:bg-slate-900 rounded-2xl shadow-lg border border-outline-variant/10 p-8">
                 <!-- Header -->
-                <div class="text-center mb-8">
+                <div class="auth-heading text-center mb-8">
                     <div class="flex justify-center mb-4">
-                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center">
+                        <div class="auth-icon w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center">
                             <span class="material-symbols-outlined text-primary text-4xl">security</span>
                         </div>
                     </div>
@@ -86,7 +87,7 @@
                     </div>
 
                     <!-- Remember Me Checkbox -->
-                    <div class="flex items-center justify-between gap-2">
+                    <div class="remember-row flex items-center justify-between gap-2">
                         <div class="flex items-center">
                             <input
                                 type="checkbox"
diff --git a/public/pages/verify-email.html b/public/pages/verify-email.html
index 17b4569..4837a2b 100644
--- a/public/pages/verify-email.html
+++ b/public/pages/verify-email.html
@@ -8,10 +8,11 @@
     <style>
         body { font-family: 'Inter', sans-serif; min-height: 100vh; }
     </style>
+    <link rel="stylesheet" href="../css/responsive.css?v=20260717-1" />
 </head>
-<body class="bg-gradient-to-br from-slate-100 via-white to-blue-100 text-slate-900 antialiased">
-    <main class="min-h-screen flex items-center justify-center px-4">
-        <section class="w-full max-w-md bg-white rounded-2xl border border-slate-200 shadow-lg p-8">
+<body class="verify-page bg-gradient-to-br from-slate-100 via-white to-blue-100 text-slate-900 antialiased">
+    <main class="verify-shell min-h-screen flex items-center justify-center px-4">
+        <section class="verify-card w-full max-w-md bg-white rounded-2xl border border-slate-200 shadow-lg p-8">
             <h1 class="text-2xl font-black tracking-tight mb-2">Email Confirmation</h1>
             <p class="text-sm text-slate-600 mb-6">We are confirming your account.</p>
 
@@ -19,7 +20,7 @@
                 Confirming your email, please wait...
             </div>
 
-            <div class="mt-6 flex gap-3">
+            <div class="verify-actions mt-6 flex gap-3">
                 <a href="./login.html" class="flex-1 text-center px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold transition-colors">Back to Login</a>
                 <a id="signInBtn" href="./login.html" class="hidden flex-1 text-center px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors">Sign In</a>
             </div>