diff --git a/frontend/index.html b/frontend/index.html
index efdac18..48e510c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0f172a" />
     <title>Семейный бюджет</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/frontend/src/components/CategoryChart.tsx b/frontend/src/components/CategoryChart.tsx
index 9d65e5c..7d532ed 100644
--- a/frontend/src/components/CategoryChart.tsx
+++ b/frontend/src/components/CategoryChart.tsx
@@ -7,6 +7,7 @@ import {
 } from 'recharts';
 import type { ByCategoryItem } from '@family-budget/shared';
 import { formatAmount } from '../utils/format';
+import { useMediaQuery } from '../hooks/useMediaQuery';
 
 interface Props {
   data: ByCategoryItem[];
@@ -25,6 +26,9 @@ const rubFormatter = new Intl.NumberFormat('ru-RU', {
 });
 
 export function CategoryChart({ data }: Props) {
+  const isMobile = useMediaQuery('(max-width: 600px)');
+  const chartHeight = isMobile ? 250 : 300;
+
   if (data.length === 0) {
     return <div className="chart-empty">Нет данных за период</div>;
   }
@@ -38,7 +42,7 @@ export function CategoryChart({ data }: Props) {
 
   return (
     <div className="category-chart-wrapper">
-      <ResponsiveContainer width="100%" height={300}>
+      <ResponsiveContainer width="100%" height={chartHeight}>
         <PieChart>
           <Pie
             data={chartData}
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 5313904..fa38ca7 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,13 +1,37 @@
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 
 export function Layout({ children }: { children: ReactNode }) {
   const { user, logout } = useAuth();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const closeDrawer = () => setDrawerOpen(false);
 
   return (
     <div className="layout">
-      <aside className="sidebar">
+      <button
+        type="button"
+        className="burger-btn"
+        aria-label="Открыть меню"
+        onClick={() => setDrawerOpen(true)}
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+      </button>
+
+      {drawerOpen && (
+        <div
+          className="sidebar-overlay"
+          aria-hidden="true"
+          onClick={closeDrawer}
+        />
+      )}
+
+      <aside className={`sidebar ${drawerOpen ? 'sidebar-open' : ''}`}>
         <div className="sidebar-brand">
           <span className="sidebar-brand-icon">₽</span>
           <span className="sidebar-brand-text">Семейный бюджет</span>
@@ -19,6 +43,7 @@ export function Layout({ children }: { children: ReactNode }) {
             className={({ isActive }) =>
               `nav-link${isActive ? ' active' : ''}`
             }
+            onClick={closeDrawer}
           >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
@@ -35,6 +60,7 @@ export function Layout({ children }: { children: ReactNode }) {
             className={({ isActive }) =>
               `nav-link${isActive ? ' active' : ''}`
             }
+            onClick={closeDrawer}
           >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <line x1="18" y1="20" x2="18" y2="10" />
@@ -49,6 +75,7 @@ export function Layout({ children }: { children: ReactNode }) {
             className={({ isActive }) =>
               `nav-link${isActive ? ' active' : ''}`
             }
+            onClick={closeDrawer}
           >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <circle cx="12" cy="12" r="3" />
diff --git a/frontend/src/components/TimeseriesChart.tsx b/frontend/src/components/TimeseriesChart.tsx
index d273dc6..4249607 100644
--- a/frontend/src/components/TimeseriesChart.tsx
+++ b/frontend/src/components/TimeseriesChart.tsx
@@ -9,6 +9,7 @@ import {
   ResponsiveContainer,
 } from 'recharts';
 import type { TimeseriesItem } from '@family-budget/shared';
+import { useMediaQuery } from '../hooks/useMediaQuery';
 
 interface Props {
   data: TimeseriesItem[];
@@ -21,6 +22,9 @@ const rubFormatter = new Intl.NumberFormat('ru-RU', {
 });
 
 export function TimeseriesChart({ data }: Props) {
+  const isMobile = useMediaQuery('(max-width: 600px)');
+  const chartHeight = isMobile ? 250 : 300;
+
   if (data.length === 0) {
     return <div className="chart-empty">Нет данных за период</div>;
   }
@@ -32,7 +36,7 @@ export function TimeseriesChart({ data }: Props) {
   }));
 
   return (
-    <ResponsiveContainer width="100%" height={300}>
+    <ResponsiveContainer width="100%" height={chartHeight}>
       <BarChart data={chartData}>
         <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
         <XAxis
diff --git a/frontend/src/components/TransactionTable.tsx b/frontend/src/components/TransactionTable.tsx
index 3ba1e70..e054c70 100644
--- a/frontend/src/components/TransactionTable.tsx
+++ b/frontend/src/components/TransactionTable.tsx
@@ -7,18 +7,75 @@ interface Props {
   onEdit: (tx: Transaction) => void;
 }
 
-const DIRECTION_LABELS: Record<string, string> = {
-  income: 'Приход',
-  expense: 'Расход',
-  transfer: 'Перевод',
-};
-
 const DIRECTION_CLASSES: Record<string, string> = {
   income: 'amount-income',
   expense: 'amount-expense',
   transfer: 'amount-transfer',
 };
 
+function TransactionCard({
+  tx,
+  onEdit,
+}: {
+  tx: Transaction;
+  onEdit: (tx: Transaction) => void;
+}) {
+  const directionClass = DIRECTION_CLASSES[tx.direction] ?? '';
+  const isUnconfirmed =
+    !tx.isCategoryConfirmed && tx.categoryId != null;
+
+  return (
+    <div
+      className={`transaction-card ${isUnconfirmed ? 'row-unconfirmed' : ''}`}
+    >
+      <div className="transaction-card-header">
+        <span className="transaction-card-date">
+          {formatDateTime(tx.operationAt)}
+        </span>
+        <span className={`transaction-card-amount ${directionClass}`}>
+          {formatAmount(tx.amountSigned)}
+        </span>
+      </div>
+      <div className="transaction-card-body">
+        <span className="description-text">{tx.description}</span>
+        {tx.comment && (
+          <span className="comment-badge" title={tx.comment}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+            </svg>
+          </span>
+        )}
+      </div>
+      <div className="transaction-card-footer">
+        <span className="transaction-card-meta">
+          {tx.accountAlias || '—'} · {tx.categoryName || '—'}
+        </span>
+        <div className="transaction-card-actions">
+          {tx.categoryId != null && !tx.isCategoryConfirmed && (
+            <span
+              className="badge badge-warning"
+              title="Категория не подтверждена"
+            >
+              ?
+            </span>
+          )}
+          <button
+            type="button"
+            className="btn-icon btn-icon-touch"
+            onClick={() => onEdit(tx)}
+            title="Редактировать"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+              <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function TransactionTable({ transactions, loading, onEdit }: Props) {
   if (loading) {
     return <div className="table-loading">Загрузка операций...</div>;
@@ -29,79 +86,87 @@ export function TransactionTable({ transactions, loading, onEdit }: Props) {
   }
 
   return (
-    <div className="table-wrapper">
-      <table className="data-table">
-        <thead>
-          <tr>
-            <th>Дата</th>
-            <th>Счёт</th>
-            <th>Сумма</th>
-            <th>Описание</th>
-            <th>Категория</th>
-            <th className="th-center">Статус</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          {transactions.map((tx) => (
-            <tr
-              key={tx.id}
-              className={
-                !tx.isCategoryConfirmed && tx.categoryId
-                  ? 'row-unconfirmed'
-                  : ''
-              }
-            >
-              <td className="td-nowrap">
-                {formatDateTime(tx.operationAt)}
-              </td>
-              <td className="td-nowrap">{tx.accountAlias || '—'}</td>
-              <td
-                className={`td-nowrap td-amount ${DIRECTION_CLASSES[tx.direction] ?? ''}`}
-              >
-                {formatAmount(tx.amountSigned)}
-              </td>
-              <td className="td-description">
-                <span className="description-text">{tx.description}</span>
-                {tx.comment && (
-                  <span className="comment-badge" title={tx.comment}>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
-                    </svg>
-                  </span>
-                )}
-              </td>
-              <td className="td-nowrap">
-                {tx.categoryName || (
-                  <span className="text-muted">—</span>
-                )}
-              </td>
-              <td className="td-center">
-                {tx.categoryId != null && !tx.isCategoryConfirmed && (
-                  <span
-                    className="badge badge-warning"
-                    title="Категория не подтверждена"
-                  >
-                    ?
-                  </span>
-                )}
-              </td>
-              <td>
-                <button
-                  className="btn-icon"
-                  onClick={() => onEdit(tx)}
-                  title="Редактировать"
-                >
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
-                    <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
-                  </svg>
-                </button>
-              </td>
+    <>
+      <div className="table-wrapper table-desktop">
+        <table className="data-table">
+          <thead>
+            <tr>
+              <th>Дата</th>
+              <th>Счёт</th>
+              <th>Сумма</th>
+              <th>Описание</th>
+              <th>Категория</th>
+              <th className="th-center">Статус</th>
+              <th></th>
             </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+          </thead>
+          <tbody>
+            {transactions.map((tx) => (
+              <tr
+                key={tx.id}
+                className={
+                  !tx.isCategoryConfirmed && tx.categoryId
+                    ? 'row-unconfirmed'
+                    : ''
+                }
+              >
+                <td className="td-nowrap">
+                  {formatDateTime(tx.operationAt)}
+                </td>
+                <td className="td-nowrap">{tx.accountAlias || '—'}</td>
+                <td
+                  className={`td-nowrap td-amount ${DIRECTION_CLASSES[tx.direction] ?? ''}`}
+                >
+                  {formatAmount(tx.amountSigned)}
+                </td>
+                <td className="td-description">
+                  <span className="description-text">{tx.description}</span>
+                  {tx.comment && (
+                    <span className="comment-badge" title={tx.comment}>
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+                      </svg>
+                    </span>
+                  )}
+                </td>
+                <td className="td-nowrap">
+                  {tx.categoryName || (
+                    <span className="text-muted">—</span>
+                  )}
+                </td>
+                <td className="td-center">
+                  {tx.categoryId != null && !tx.isCategoryConfirmed && (
+                    <span
+                      className="badge badge-warning"
+                      title="Категория не подтверждена"
+                    >
+                      ?
+                    </span>
+                  )}
+                </td>
+                <td>
+                  <button
+                    className="btn-icon"
+                    onClick={() => onEdit(tx)}
+                    title="Редактировать"
+                  >
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+                      <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
+                    </svg>
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="transaction-cards transaction-mobile">
+        {transactions.map((tx) => (
+          <TransactionCard key={tx.id} tx={tx} onEdit={onEdit} />
+        ))}
+      </div>
+    </>
   );
 }
diff --git a/frontend/src/hooks/useMediaQuery.ts b/frontend/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..bd2af30
--- /dev/null
+++ b/frontend/src/hooks/useMediaQuery.ts
@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    setMatches(mql.matches);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [query]);
+
+  return matches;
+}
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 5556166..9f3d3d5 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -598,6 +598,75 @@ textarea {
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Transaction cards (mobile view) */
+.transaction-cards {
+  display: none;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.transaction-card {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  padding: 14px 16px;
+  box-shadow: var(--shadow-sm);
+  border-left: 4px solid var(--color-border);
+}
+
+.transaction-card.row-unconfirmed {
+  border-left-color: var(--color-warning);
+}
+
+.transaction-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 6px;
+}
+
+.transaction-card-date {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.transaction-card-amount {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.transaction-card-body {
+  font-size: 14px;
+  word-break: break-word;
+  margin-bottom: 8px;
+}
+
+.transaction-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.transaction-card-meta {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.transaction-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.btn-icon-touch {
+  min-width: 44px;
+  min-height: 44px;
+  padding: 10px;
 }
 
 .data-table {
@@ -758,8 +827,9 @@ textarea {
 
 .pagination-size {
   width: auto;
-  padding: 4px 8px;
+  padding: 8px 12px;
   font-size: 13px;
+  min-height: 44px;
 }
 
 .btn-page {
@@ -771,6 +841,11 @@ textarea {
   font-size: 14px;
   transition: all var(--transition);
   font-family: inherit;
+  min-width: 44px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .btn-page:hover:not(:disabled) {
@@ -837,6 +912,12 @@ textarea {
   color: var(--color-text-secondary);
   padding: 0;
   line-height: 1;
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: -8px -8px -8px 0;
 }
 
 .btn-close:hover {
@@ -986,6 +1067,13 @@ textarea {
   gap: 0;
   border-bottom: 2px solid var(--color-border);
   margin-bottom: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
 }
 
 .tab {
@@ -1000,6 +1088,8 @@ textarea {
   cursor: pointer;
   transition: all var(--transition);
   font-family: inherit;
+  flex-shrink: 0;
+  min-height: 44px;
 }
 
 .tab:hover {
@@ -1311,6 +1401,61 @@ textarea {
   vertical-align: middle;
 }
 
+/* ================================================================
+   Burger button (mobile)
+   ================================================================ */
+
+.burger-btn {
+  display: none;
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 101;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  background: var(--color-sidebar);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow);
+  transition: all var(--transition);
+}
+
+.burger-btn:hover {
+  background: var(--color-sidebar-hover);
+}
+
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  animation: overlay-fade-in 0.2s ease;
+}
+
+@keyframes overlay-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes drawer-slide-in {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
 /* ================================================================
    Responsive
    ================================================================ */
@@ -1322,13 +1467,29 @@ textarea {
 }
 
 @media (max-width: 768px) {
+  .burger-btn {
+    display: flex;
+  }
+
+  .sidebar-overlay {
+    display: block;
+  }
+
   .sidebar {
-    width: 200px;
+    width: min(280px, 85vw);
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    box-shadow: var(--shadow-lg);
+  }
+
+  .sidebar.sidebar-open {
+    transform: translateX(0);
+    animation: drawer-slide-in 0.25s ease;
   }
 
   .main-content {
-    margin-left: 200px;
-    padding: 16px;
+    margin-left: 0;
+    padding: 16px 16px 16px 60px;
   }
 
   .filters-row {
@@ -1342,4 +1503,114 @@ textarea {
   .summary-cards {
     grid-template-columns: 1fr;
   }
+
+  .page-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .page-header .btn {
+    min-height: 44px;
+  }
+
+  .filter-dates-wrap .btn-page {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 8px;
+  }
+
+  .filter-presets {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    flex-wrap: nowrap;
+    padding-bottom: 4px;
+  }
+
+  .btn-preset {
+    flex-shrink: 0;
+  }
+
+  .filter-sort .btn-sort-order {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+@media (max-width: 600px) {
+  .table-desktop {
+    display: none !important;
+  }
+
+  .transaction-mobile {
+    display: flex !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .modal-overlay {
+    padding: 0;
+    align-items: stretch;
+  }
+
+  .modal {
+    max-width: none;
+    max-height: none;
+    height: 100%;
+    min-height: 100dvh;
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .modal-header {
+    flex-shrink: 0;
+  }
+
+  .modal-body {
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .modal-footer {
+    flex-shrink: 0;
+  }
+
+  .modal-footer .btn {
+    min-height: 44px;
+    min-width: 44px;
+    padding: 12px 20px;
+  }
+
+  .page-header h1 {
+    font-size: 20px;
+  }
+
+  .pagination {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .pagination-controls {
+    justify-content: center;
+  }
+}
+
+/* Safe area for devices with notches */
+@supports (padding: env(safe-area-inset-bottom)) {
+  .burger-btn {
+    top: calc(12px + env(safe-area-inset-top));
+    left: calc(12px + env(safe-area-inset-left));
+  }
+
+  .main-content {
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  }
+
+  .modal-footer {
+    padding-bottom: calc(20px + env(safe-area-inset-bottom));
+  }
 }
