diff --git a/docs/mobile-production/README.md b/docs/mobile-production/README.md
new file mode 100644
index 000000000..b685dee54
--- /dev/null
+++ b/docs/mobile-production/README.md
@@ -0,0 +1,131 @@
+<!-- @format -->
+
+# Мобильный frontend-релиз без изменения desktop
+
+Дата проверки: 10.10.2026. Target: `master`, ветка `release/prod-mobile-responsive-20261010`.
+
+## Границы релиза
+
+База — текущий production `11bec95e8dc3bc48d9d4fe491c9b6a0c18968850`.
+Его успешный [Deploy to server](https://github.com/PROCOLLAB-github/procollab/actions/runs/37224199351)
+проверен перед подготовкой релиза. Адаптив и его исправления перенесены из dev до
+`f3df1c8808c8f2fe352eaac70f28c34da0eae828` (PR #401, #403, #405, #406).
+Другие dev-функции не включены: это отдельная ветка от production, а не merge всего dev.
+
+Desktop сохраняет **текущую production-композицию**, включая production-центр backend-уведомлений.
+Это отличается от восстановления прежнего dev в #403: production и dev уже содержали разные изменения.
+Для `>=1000px` сохранены исходные шаблоны master; адаптивные шаблоны включаются через
+`DesktopLayoutService`. Новые геометрия, типографика и tokens ограничены `max-width: 999px`.
+У компонентов с `ng-content` сохранён единственный projection slot; CSS-классы мобильного поля даты
+действуют только ниже 1000px. Shared Button сохраняет desktop-геометрию и прежнее поведение loading.
+На основной странице программы оставлен единый исходный шаблон: это сохраняет timing view queries
+и расчёт раскрытия описания; role widget добавляется только для мобильного режима.
+Состояние проекта на desktop по-прежнему называется «В программе».
+
+В релиз входят Office/navigation, Feed/FeedFilter, проекты/InfoCard, участники, программы,
+детали проекта/профиля/программы, вакансии, курсы, редакторы, onboarding и shared UI.
+Мобильная шапка светлая, название раздела по центру. Сохранены исправления приглашений, кнопок,
+подсказок, длинных навыков, полей даты и строк аналитики из mobile smoke-test.
+
+## API, права и поведение
+
+Endpoints, payload обязательных полей, роли, permissions, роуты и доменные правила не меняются.
+Добавлено только необязательное имя связанной программы в модели/DTO. Production notification center
+сохранён, его запросы и обработка не заменены старой реализацией из dev.
+
+Изменения frontend-поведения явно включены: ожидание загрузки профиля при прямом переходе в проекты
+и onboarding, защита от цикла обновления формы, продолжение WS reconnect и его teardown.
+WS-сбой скрытых чатов не показывает два глобальных сообщения о потере интернета; HTTP-ошибки
+отдельных операций сохраняют прежнюю обработку. Эти исправления не меняют бизнес-правила.
+
+## Выполненные проверки
+
+- `npm run build:prod`: exit 0, исходные CSS budgets не повышались.
+- `npm run test:ci`: 413 файлов, **2099 тестов**, exit 0.
+- После последней правки mobile-классов поля даты: InputComponent, **20 тестов**, exit 0.
+- После сохранения единого шаблона программы: MainComponent, **2 теста**, exit 0.
+- `npm run lint:ts`: exit 0, 0 errors; 6 прежних warnings об unused eslint-disable.
+- Stylelint для 135 изменённых SCSS: exit 0, без отключения правил в конфигурации.
+- `npm run format:check`: проверка полного Git index с LF, как на Linux CI.
+- Desktop pixel regression: **66/66**, 0 отличающихся RGB-пикселей, включая **1000/1440/1920px**.
+  Машинный отчёт: [desktop-comparison.json](./desktop-comparison.json).
+- Mobile: **320/390/768px**, 16 страниц и 6 дополнительных состояний на каждой ширине;
+  проверены viewport overflow, центрирование приглашений, интервалы между кнопками, ширина даты,
+  неперекрывающиеся подсказки, одинаковая типографика полей, единственная рамка поиска,
+  footer диалога, скрытие пустых контактов и фон строк «Требует внимания».
+- WS: два последовательных сбоя и восстановление, HTTP доступен; глобальных WS-toast нет,
+  reconnect продолжается, онлайн-статусы возвращаются. Проверка с production retry interval 5000ms.
+
+Desktop gate сравнивает 22 состояния: Feed; проекты; Members; Programs; программа; профиль;
+проект; Vacancies; вакансия; Courses; курс; редакторы профиля и проекта; partners/resources;
+analytics; диалог приглашения; список приглашений; поля, цели и добавленная цель проекта;
+строки attention; выбранный участник приглашения.
+
+Сравнение сделано в одном Chrome/Windows на одинаковых синтетических данных, времени и viewport.
+Сборки доставляются **без изменения CSS/JS**. Нет screenshot masks, tolerance или исключённых областей.
+Перед снимками ожидаются загрузка шрифтов/изображений, данные страницы и два rendering frames.
+Описание программы заведомо длинное: проверяется раскрытие длинного текста без пограничного
+сравнения высоты строки при загрузке шрифта. Проверка программы на 1000px повторена три раза для каждой сборки с проверкой идентичности повторных PNG. Некорректный внешний
+avatar-placeholder исключён корректным локальным изображением в обоих fixture-наборах;
+runtime-код по этому поводу не изменён. Animations/caret отключены одинаково в обеих сборках.
+
+## Примеры снимков
+
+[Feed, 390px](./screenshots/feed-390.png) · [Приглашения](./screenshots/projects-invites-390.png) ·
+[Поля редактора](./screenshots/project-edit-fields-390.png) · [Диалог](./screenshots/team-invite-selected-390.png) ·
+[Программа](./screenshots/program-390.png) · [Attention](./screenshots/analytics-attention-390.png).
+
+Программа на desktop 1440px: [production baseline](./screenshots/program-1440-baseline.png) и
+[release](./screenshots/program-1440-verified.png), 0 изменённых пикселей.
+
+## Воспроизведение browser gate
+
+Нужны Chrome, Playwright и Python с Pillow/NumPy. API и WebSocket перехватываются harness;
+реальные запросы и отправка приглашений не выполняются. `QA_BUILD_ROOT` указывает на production build.
+`QA_SCREENS=program` позволяет отдельно повторить одну страницу, но полный gate требует все 22 состояния.
+
+Сначала соберите baseline из указанного master SHA в отдельном checkout через `npm ci` и
+`npm run build:prod`, затем текущую ветку. Скопируйте baseline dist вне текущего dist.
+Пример PowerShell (пути к Playwright/Chrome/Python задаются локально):
+
+```powershell
+$env:PLAYWRIGHT_MODULE = 'C:/path/to/node_modules/playwright'
+$env:CHROME_PATH = 'C:/Program Files/Google/Chrome/Application/chrome.exe'
+$env:QA_BUILD_ROOT = 'C:/path/to/baseline-dist'
+node docs/mobile-production/visual.cjs baseline http://127.0.0.1:4461 '1000,1440,1920' .qa-mobile/screenshots
+node docs/mobile-production/visual.cjs baseline http://127.0.0.1:4461 '1000,1440,1920' .qa-mobile/screenshots details
+
+$env:QA_BUILD_ROOT = 'dist/social_platform'
+node docs/mobile-production/visual.cjs verified http://127.0.0.1:4462 '320,390,768,1000,1440,1920' .qa-mobile/screenshots
+node docs/mobile-production/visual.cjs verified http://127.0.0.1:4462 '320,390,768,1000,1440,1920' .qa-mobile/screenshots details
+python docs/mobile-production/compare.py .qa-mobile/screenshots/baseline .qa-mobile/screenshots/verified docs/mobile-production/desktop-comparison.json
+node docs/mobile-production/connection.cjs http://127.0.0.1:4462 .qa-mobile/connection
+```
+
+HTTP-сервер для этих команд не требуется: `preview.cjs` читает build bytes напрямую.
+Сохраняйте exit status каждой команды. Недостающий PNG или хотя бы один изменённый пиксель завершает
+`compare.py` с ошибкой. Не используйте baseline из dev вместо указанного production SHA.
+
+## Acceptance criteria
+
+- [x] Релиз изолирован от прочих изменений dev и основан на текущем prod.
+- [x] Desktop >=1000px сохраняет внешний вид: 66 точных pixel comparisons.
+- [x] Mobile/tablet 320/390/768px сохраняет адаптив и исправления из smoke-test.
+- [x] Production notification center, API contracts и permissions сохранены.
+- [x] Tests, lint, stylelint, format и production build проходят.
+
+## Ограничения и проверка после выкладки
+
+Это browser regression на synthetic fixtures, не проверка физических устройств или live API.
+Реальные iOS/Android, Safari/WebKit, клавиатура устройства, camera/file upload и live-данные
+в этой сессии не проверялись. Auth/onboarding охвачены source review/tests/build, но не входят
+в 66 desktop-снимков. Варианты всех ролей и hover/focus на всех страницах не охвачены pixel gate.
+
+После выкладки на реальных iOS/Android: открыть проекты/приглашения, редактор проекта
+(дата, подсказки, кнопки, добавление цели), приглашение участника с клавиатурой, программу и analytics;
+проверить навигацию, поля, загрузку файла и возврат после временной потери сети.
+На desktop: проверить реальные проекты/профиль/программу и уведомления на 1440/1920px.
+
+Frontend deploy запускает существующий workflow при merge в master. Backend deploy и data migration
+не требуются. Откат — revert release commit отдельным PR в master с повторным frontend deploy.
+Не откатывать последующие независимые изменения whole-branch reset.
diff --git a/docs/mobile-production/browser-harness.cjs b/docs/mobile-production/browser-harness.cjs
new file mode 100644
index 000000000..fb634a509
--- /dev/null
+++ b/docs/mobile-production/browser-harness.cjs
@@ -0,0 +1,121 @@
+/** @format */
+
+const { chromium } = require(process.env.PLAYWRIGHT_MODULE || "playwright");
+const assert = require("node:assert/strict");
+const fixtures = require("./fixtures.cjs");
+const defaultBase = "http://127.0.0.1:4360";
+
+async function launch(width = 390, options = {}) {
+  const { baseUrl: base = defaultBase, ...contextOptions } = options;
+  const browser = await chromium.launch({
+    headless: true,
+    executablePath: process.env.CHROME_PATH,
+  });
+  const context = await browser.newContext({
+    viewport: { width, height: 844 },
+    reducedMotion: "reduce",
+    ...contextOptions,
+  });
+  await context.addCookies(
+    ["accessToken", "refreshToken", "devAccessToken", "devRefreshToken"].map(name => ({
+      name,
+      value: "responsive-fixture",
+      url: base,
+    })),
+  );
+  await context.addInitScript(() => localStorage.setItem("cookieConsent", "declined"));
+  const requests = [];
+  await context.route("**/*", async route => {
+    const request = route.request();
+    const url = new URL(request.url());
+    if (url.origin === base) return route.continue();
+    if (["dev.procollab.ru", "api.procollab.ru"].includes(url.hostname)) {
+      requests.push({
+        method: request.method(),
+        path: url.pathname,
+        query: url.search,
+        body: request.postData(),
+      });
+      return route.fulfill({
+        json: fixtures.response(url.pathname, request.method(), url.searchParams, {
+          completedLesson: request.frame().url().includes("/results"),
+        }),
+        headers: { "Access-Control-Allow-Origin": "*" },
+      });
+    }
+    return route.fulfill({ body: "", status: 200 });
+  });
+  await context.routeWebSocket("**", socket => socket.onMessage(() => {}));
+  const page = await context.newPage();
+  const errors = [];
+  page.on("pageerror", error => errors.push(error.message));
+  page.on("console", message => {
+    if (message.type() === "error") errors.push(message.text());
+  });
+  return { browser, context, page, requests, errors, base };
+}
+
+async function measure(page) {
+  return page.evaluate(() => {
+    const visible = el => {
+      const r = el.getBoundingClientRect();
+      const s = getComputedStyle(el);
+      return r.width > 0 && r.height > 0 && s.visibility !== "hidden" && s.display !== "none";
+    };
+    const overflows = [...document.querySelectorAll("body *")]
+      .filter(el => {
+        if (!visible(el)) return false;
+        const r = el.getBoundingClientRect();
+        if (r.left >= -1 && r.right <= innerWidth + 1) return false;
+        for (
+          let parent = el.parentElement;
+          parent && parent !== document.body;
+          parent = parent.parentElement
+        ) {
+          if (["auto", "scroll", "hidden", "clip"].includes(getComputedStyle(parent).overflowX))
+            return false;
+        }
+        return true;
+      })
+      .slice(0, 12)
+      .map(el => ({
+        element: el.tagName.toLowerCase(),
+        class: el.className,
+        left: el.getBoundingClientRect().left,
+        right: el.getBoundingClientRect().right,
+      }));
+    const visibleApps = [...document.querySelectorAll("body *")]
+      .filter(el => el.tagName.startsWith("APP-") && visible(el))
+      .map(el => el.tagName.toLowerCase());
+    return {
+      actualPath: location.pathname,
+      actualQuery: location.search,
+      viewport: innerWidth,
+      pageWidth: document.documentElement.scrollWidth,
+      bodyWidth: document.body.scrollWidth,
+      overflows,
+      // Routed hosts can have no box when their content is plain text or a portal.
+      rendered: [
+        ...new Set(
+          [...document.querySelectorAll("body *")]
+            .filter(el => el.tagName.startsWith("APP-"))
+            .map(el => el.tagName.toLowerCase()),
+        ),
+      ],
+      visibleApps: [...new Set(visibleApps)],
+      text: document.body.innerText.slice(0, 300),
+    };
+  });
+}
+
+async function assertViewport(page) {
+  const result = await measure(page);
+  assert.equal(result.overflows.length, 0, JSON.stringify(result.overflows));
+  assert.ok(
+    result.pageWidth <= result.viewport + 1,
+    `Page ${result.pageWidth} > ${result.viewport}`,
+  );
+  return result;
+}
+
+module.exports = { launch, measure, assertViewport, base: defaultBase };
diff --git a/docs/mobile-production/compare.py b/docs/mobile-production/compare.py
new file mode 100644
index 000000000..e763b1aea
--- /dev/null
+++ b/docs/mobile-production/compare.py
@@ -0,0 +1,47 @@
+"""Strict RGB desktop regression gate, including scrolled and modal states."""
+import argparse
+import json
+from pathlib import Path
+
+import numpy as np
+from PIL import Image
+
+parser = argparse.ArgumentParser()
+parser.add_argument("before", type=Path)
+parser.add_argument("after", type=Path)
+parser.add_argument("output", type=Path)
+parser.add_argument("--widths", default="1000,1440,1920")
+args = parser.parse_args()
+rows = []
+screens = (
+    "feed projects members programs program profile project vacancies vacancy courses course "
+    "profile-edit project-edit partners analytics team-invite projects-invites "
+    "project-edit-fields project-edit-goals project-edit-new-goal analytics-attention "
+    "team-invite-selected"
+).split()
+widths = tuple(int(width) for width in args.widths.split(","))
+if not widths or any(width < 1000 for width in widths):
+    raise SystemExit("Desktop widths must be >=1000")
+files = sorted(args.before / f"{screen}-{width}.png" for screen in screens for width in widths)
+for file in files:
+    before = Image.open(file).convert("RGB")
+    after = Image.open(args.after / file.name).convert("RGB")
+    same_size = before.size == after.size
+    if same_size:
+        delta = np.max(np.abs(np.asarray(before).astype(np.int16) - np.asarray(after).astype(np.int16)), axis=2)
+        changed = int(np.count_nonzero(delta))
+        maximum = int(delta.max())
+    else:
+        changed = -1
+        maximum = -1
+    rows.append({"screen": file.stem, "beforeSize": before.size, "afterSize": after.size,
+                 "exactChangedPixels": changed, "maxChannelDelta": maximum,
+                 "passed": same_size and changed == 0})
+    if changed != 0:
+        print(f"FAIL {file.stem}: {changed} changed RGB pixels")
+args.output.parent.mkdir(parents=True, exist_ok=True)
+args.output.write_text(json.dumps(rows, indent=2) + "\n", encoding="utf-8")
+passed = sum(row["passed"] for row in rows)
+print(f"Desktop pixel comparison: {passed}/{len(rows)} exact matches")
+if not rows or passed != len(rows):
+    raise SystemExit(1)
diff --git a/docs/mobile-production/connection-result.json b/docs/mobile-production/connection-result.json
new file mode 100644
index 000000000..c922ab360
--- /dev/null
+++ b/docs/mobile-production/connection-result.json
@@ -0,0 +1,10 @@
+{
+  "width": 390,
+  "syntheticWebSocket": true,
+  "httpAvailable": true,
+  "noGlobalNotification": true,
+  "automaticReconnect": true,
+  "secondOutageSilent": true,
+  "onlineStatusesAfterReconnect": true,
+  "passed": true
+}
diff --git a/docs/mobile-production/connection.cjs b/docs/mobile-production/connection.cjs
new file mode 100644
index 000000000..d2ccadb0c
--- /dev/null
+++ b/docs/mobile-production/connection.cjs
@@ -0,0 +1,151 @@
+/** @format */
+
+const assert = require("node:assert/strict");
+const fs = require("node:fs");
+const path = require("node:path");
+const { launch } = require("./browser-harness.cjs");
+require("./mobile-fixtures.cjs");
+const preview = require("./preview.cjs");
+
+const baseUrl = process.argv[2];
+const directory = path.resolve(process.argv[3] || ".desktop-regression/mobile-smoke/connection");
+(async () => {
+  fs.mkdirSync(directory, { recursive: true });
+  const harness = await launch(390, { baseUrl, isMobile: true, hasTouch: true });
+  await preview(harness.context, baseUrl);
+  try {
+    // Управляемые WebSocket события; HTTP API остаётся доступен через fixtures.
+    await harness.context.addInitScript(() => {
+      window.qaChatOffline = true;
+      window.qaChatConnected = false;
+      window.qaChatSockets = [];
+      window.qaToastCount = 0;
+      new MutationObserver(records => {
+        for (const record of records) {
+          for (const node of record.addedNodes) {
+            if (
+              node.nodeType === 1 &&
+              (node.matches(".snackbar__item") || node.querySelector(".snackbar__item"))
+            ) {
+              window.qaToastCount++;
+            }
+          }
+        }
+      }).observe(document, { childList: true, subtree: true });
+      window.WebSocket = class {
+        static OPEN = 1;
+        static CONNECTING = 0;
+        static CLOSING = 2;
+        static CLOSED = 3;
+        readyState = 0;
+        constructor() {
+          window.qaChatSockets.push(this);
+          setTimeout(() => {
+            if (this.closed) return;
+            if (window.qaChatOffline) {
+              this.readyState = 3;
+              this.onerror?.(new Event("error"));
+            } else {
+              this.readyState = 1;
+              window.qaChatConnected = true;
+              this.onopen?.(new Event("open"));
+            }
+          }, 20);
+        }
+        send() {}
+        close() {
+          this.closed = true;
+          this.readyState = 3;
+        }
+      };
+    });
+    const page = harness.page;
+    await page.goto(baseUrl + "/office/feed");
+    await page.locator("app-open-vacancy").first().waitFor({ state: "attached" });
+    const toast = page.locator(".snackbar__item");
+    // Проходим порог быстрых retry и ещё две попытки; фон продолжает работать без toast.
+    await page.waitForFunction(() => window.qaChatSockets.length >= 7, null, { timeout: 90000 });
+    assert.equal(
+      await toast.count(),
+      0,
+      "Hidden chat outage must not create a global notification",
+    );
+    await page.evaluate(() => document.fonts.ready);
+    await page.screenshot({
+      path: path.join(directory, "background-outage-390.png"),
+      fullPage: true,
+    });
+    await page.evaluate(() => {
+      window.qaChatOffline = false;
+    });
+    await page.waitForFunction(() => window.qaChatConnected, null, { timeout: 10000 });
+    assert.equal(await toast.count(), 0);
+
+    await page.evaluate(() => {
+      history.pushState({}, "", "/office/profile/1");
+      dispatchEvent(new PopStateEvent("popstate"));
+    });
+    await page.locator("app-profile-left-side").waitFor({ state: "attached" });
+    const onlineBadge = page.locator(".info__avatar .avatar__online");
+    assert.equal(await onlineBadge.count(), 0);
+    const emitStatus = type =>
+      page.evaluate(type => {
+        window.qaChatSockets.at(-1).onmessage(
+          new MessageEvent("message", {
+            data: JSON.stringify({ type, content: { user_id: 1 } }),
+          }),
+        );
+      }, type);
+    await emitStatus("set_online");
+    await onlineBadge.waitFor({ state: "visible" });
+    await emitStatus("set_offline");
+    await onlineBadge.waitFor({ state: "hidden" });
+
+    const attempts = await page.evaluate(() => window.qaChatSockets.length);
+    await page.evaluate(() => {
+      window.qaChatOffline = true;
+      window.qaChatConnected = false;
+      window.qaChatSockets.at(-1).onerror(new Event("error"));
+    });
+    await page.waitForFunction(attempts => window.qaChatSockets.length >= attempts + 6, attempts, {
+      timeout: 90000,
+    });
+    assert.equal(await toast.count(), 0, "Second outage must also stay silent");
+    await page.evaluate(() => {
+      window.qaChatOffline = false;
+    });
+    await page.waitForFunction(() => window.qaChatConnected, null, { timeout: 10000 });
+    await emitStatus("set_online");
+    await onlineBadge.waitFor({ state: "visible" });
+    assert.equal(await toast.count(), 0);
+    assert.equal(
+      await page.evaluate(() => window.qaToastCount),
+      0,
+      "No transient toast during any outage",
+    );
+    assert.deepEqual(harness.errors, []);
+    fs.writeFileSync(
+      path.join(directory, "result.json"),
+      JSON.stringify(
+        {
+          width: 390,
+          syntheticWebSocket: true,
+          httpAvailable: true,
+          noGlobalNotification: true,
+          automaticReconnect: true,
+          secondOutageSilent: true,
+          onlineStatusesAfterReconnect: true,
+          passed: true,
+        },
+        null,
+        2,
+      ) + "\n",
+    );
+    console.log("Connection smoke: all scenarios passed");
+  } finally {
+    await harness.browser.close();
+  }
+})().catch(error => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/docs/mobile-production/desktop-comparison.json b/docs/mobile-production/desktop-comparison.json
new file mode 100644
index 000000000..cc3c9bddf
--- /dev/null
+++ b/docs/mobile-production/desktop-comparison.json
@@ -0,0 +1,530 @@
+[
+  {
+    "screen": "analytics-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "analytics-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "analytics-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "analytics-attention-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "analytics-attention-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "analytics-attention-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "course-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "course-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "course-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "courses-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "courses-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "courses-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "feed-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "feed-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "feed-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "members-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "members-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "members-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "partners-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "partners-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "partners-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "profile-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "profile-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "profile-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "profile-edit-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "profile-edit-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "profile-edit-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "program-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "program-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "program-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "programs-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "programs-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "programs-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-fields-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-fields-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-fields-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-goals-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-goals-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-goals-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-new-goal-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-new-goal-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "project-edit-new-goal-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "projects-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "projects-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "projects-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "projects-invites-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "projects-invites-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "projects-invites-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "team-invite-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "team-invite-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "team-invite-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "team-invite-selected-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "team-invite-selected-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "team-invite-selected-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "vacancies-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "vacancies-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "vacancies-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "vacancy-1000",
+    "beforeSize": [1000, 844],
+    "afterSize": [1000, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "vacancy-1440",
+    "beforeSize": [1440, 844],
+    "afterSize": [1440, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  },
+  {
+    "screen": "vacancy-1920",
+    "beforeSize": [1920, 844],
+    "afterSize": [1920, 844],
+    "exactChangedPixels": 0,
+    "maxChannelDelta": 0,
+    "passed": true
+  }
+]
diff --git a/docs/mobile-production/fixtures.cjs b/docs/mobile-production/fixtures.cjs
new file mode 100644
index 000000000..01975fc61
--- /dev/null
+++ b/docs/mobile-production/fixtures.cjs
@@ -0,0 +1,520 @@
+/** @format */
+// Entirely synthetic API data. Never forwards a mutation to a live service.
+const long = "ОченьДлинноеНазваниеБезПробелов".repeat(4);
+const skill = { id: 1, name: long, category: { id: 1, name: "Hard skills" }, approves: [] };
+const collaborator = {
+  userId: 1,
+  firstName: long,
+  lastName: "Тестовый",
+  avatar: "",
+  role: "Руководитель",
+  skills: [skill],
+};
+const project = {
+  id: 1,
+  name: long,
+  description: long,
+  shortDescription: "Проект для проверки адаптива",
+  targetAudience: long,
+  problem: long,
+  actuality: long,
+  region: "Москва",
+  trl: "1",
+  implementationDeadline: "2027-01-01",
+  industry: 1,
+  draft: false,
+  leader: 1,
+  leaderInfo: collaborator,
+  imageAddress: "/assets/images/profile/main.svg",
+  presentationAddress: "",
+  cover: null,
+  coverImageAddress: null,
+  isDefaultCover: true,
+  links: ["https://example.test/" + "long".repeat(30)],
+  numberOfCollaborators: 1,
+  viewsCount: 0,
+  isCompany: false,
+  inviteId: 1,
+  achievements: [],
+  collaborators: [collaborator],
+  vacancies: [],
+  partners: [],
+  resources: [],
+  goals: [],
+  partnerProgram: null,
+  partnerProgramsTags: [],
+};
+const user = {
+  id: 1,
+  email: "long.email.for.responsive.testing@example.test",
+  firstName: long,
+  lastName: "Тестовый",
+  patronymic: "",
+  aboutMe: long,
+  birthday: "2000-01-01",
+  avatar: "",
+  speciality: "Разработчик",
+  userType: 1,
+  city: "Москва",
+  region: "Москва",
+  phoneNumber: "+79990000000",
+  v2Speciality: { id: 1, name: "Разработчик" },
+  links: [],
+  onboardingStage: null,
+  education: [],
+  userLanguages: [],
+  workExperience: [],
+  achievements: [],
+  programs: [],
+  projects: [project],
+  subscribedProjects: [],
+  keySkills: [long],
+  skills: [skill],
+  skillsIds: [1],
+  progress: 100,
+  isOnline: false,
+  isActive: true,
+  timeCreated: "2026-10-01",
+  timeUpdated: "2026-10-01",
+  verificationDate: "2026-10-01",
+  verificationNoticeAcknowledgedAt: "2026-10-01",
+  profileFillPromptAcknowledgedAt: "2026-10-01",
+  isSubscribed: false,
+  lastSubscribeDate: "",
+  subscriptionDateOver: null,
+  lastSubscriptionType: null,
+  isAutopayAllowed: false,
+};
+const program = {
+  id: 1,
+  name: long,
+  description: long,
+  shortDescription: "Тестовое мероприятие",
+  city: "Москва",
+  tag: "Хакатон",
+  year: 2026,
+  links: [],
+  materials: [],
+  registrationLink: null,
+  imageAddress: "/assets/images/profile/main.svg",
+  coverImageAddress: "",
+  presentationAddress: "",
+  advertisementImageAddress: "",
+  datetimeRegistrationEnds: "2027-01-01",
+  datetimeStarted: "2026-10-01",
+  datetimeFinished: "2027-01-01",
+  datetimeProjectSubmissionEnds: "2027-01-01",
+  datetimeEvaluationEnds: "2027-01-01",
+  viewsCount: 1,
+  likesCount: 0,
+  isUserLiked: false,
+  isUserManager: true,
+  isUserExpert: true,
+  isUserMember: true,
+  currentApplication: null,
+  welcomeAcknowledgedAt: "2026-10-01",
+  publishProjectsAfterFinish: true,
+  courseId: 1,
+  courses: [],
+};
+const vacancy = {
+  id: 1,
+  role: long,
+  project: { id: 1, name: long, imageAddress: "", links: [] },
+  isActive: true,
+  requiredSkills: [skill],
+  description: long,
+  salary: "100000",
+  city: "Москва",
+  workFormat: "удаленная работа",
+  requiredExperience: "без опыта",
+  workSchedule: "гибкий график",
+  specialization: "Разработчик",
+  canRespond: true,
+  canManageResponses: true,
+  datetimeCreated: "2026-10-01",
+};
+const course = {
+  id: 1,
+  title: long,
+  description: long,
+  accessType: "all_users",
+  status: "published",
+  avatarUrl: "",
+  headerCoverUrl: "",
+  cardCoverUrl: "",
+  startDate: "2026-01-01",
+  endDate: "2027-01-01",
+  dateLabel: "01.01.2026 — 01.01.2027",
+  isAvailable: true,
+  partnerProgramId: 1,
+  progressStatus: "in_progress",
+  percent: 10,
+  actionState: "continue",
+  analyticsStub: null,
+};
+const lesson = {
+  id: 1,
+  moduleId: 1,
+  courseId: 1,
+  title: long,
+  progressStatus: "in_progress",
+  percent: 10,
+  currentTaskId: 1,
+  moduleOrder: 1,
+  tasks: [
+    {
+      id: 1,
+      order: 1,
+      title: long,
+      answerTitle: "Ответ",
+      status: "published",
+      taskKind: "question",
+      checkType: "auto",
+      informationalType: null,
+      questionType: "text",
+      answerType: "text",
+      bodyText: long,
+      videoUrl: null,
+      imageUrl: null,
+      attachmentUrl: null,
+      isAvailable: true,
+      isCompleted: false,
+      options: [],
+    },
+  ],
+};
+const structure = {
+  courseId: 1,
+  progressStatus: "in_progress",
+  percent: 10,
+  modules: [
+    {
+      id: 1,
+      courseId: 1,
+      title: long,
+      order: 1,
+      avatarUrl: "",
+      startDate: "2026-01-01",
+      status: "published",
+      isAvailable: true,
+      progressStatus: "in_progress",
+      percent: 10,
+      lessons: [{ ...lesson, order: 1, status: "published", isAvailable: true, taskCount: 1 }],
+    },
+  ],
+};
+const page = results => ({ count: results.length, results, next: null, previous: null });
+const fields = [
+  {
+    id: 1,
+    name: "note",
+    label: "Описание решения",
+    fieldType: "text",
+    options: [],
+    isRequired: false,
+    helpText: long,
+    value: long,
+  },
+  {
+    id: 2,
+    name: "track",
+    label: "Направление",
+    fieldType: "select",
+    options: [long, "Разработка"],
+    isRequired: false,
+    helpText: "Выберите направление",
+    value: "Разработка",
+  },
+];
+const linkFields = {
+  programLinkId: 1,
+  programId: 1,
+  projectId: 1,
+  submitted: false,
+  isCompetitive: true,
+  submissionOpen: true,
+  submissionDeadline: "2027-01-01",
+  canSubmit: true,
+  fields,
+};
+const ratedProject = {
+  ...project,
+  scored: false,
+  scoredExpertId: null,
+  ratedExperts: [],
+  ratedCount: 0,
+  maxRates: 3,
+  criterias: [
+    {
+      id: 1,
+      name: "Качество решения",
+      description: long,
+      type: "int",
+      minValue: 0,
+      maxValue: 10,
+      value: null,
+      expertId: null,
+    },
+    {
+      id: 2,
+      name: "Соответствие требованиям",
+      description: long,
+      type: "bool",
+      value: null,
+      expertId: null,
+    },
+    { id: 3, name: "Комментарий", description: long, type: "str", value: null, expertId: null },
+  ],
+};
+const vacancyResponse = {
+  id: 1,
+  vacancy,
+  user,
+  isApproved: null,
+  status: "pending",
+  datetimeCreated: "2026-10-01",
+  whyMe: long,
+  accompanyingFile: null,
+};
+const participant = { ...user, id: 2, firstName: "Кандидат", lastName: long };
+user.avatar = "/assets/images/projects/shared/idea.svg";
+collaborator.avatar = user.avatar;
+project.imageAddress = user.avatar;
+project.coverImageAddress = "/assets/images/auth/login-img.png";
+program.imageAddress = user.avatar;
+const news = {
+  id: 1,
+  name: "Новости программы",
+  imageAddress: user.avatar,
+  title: long,
+  text: long,
+  description: long,
+  datetimeCreated: "2026-10-01",
+  timeCreated: "2026-10-01",
+  project: 1,
+  author: 1,
+  files: [],
+  images: [],
+  likesCount: 0,
+  isUserLiked: false,
+};
+const total = { total: 1 };
+const regions = { total: 1, items: [{ name: long, count: 1 }] };
+const metrics = { participantsTotal: 1, projectsTotal: 1, notSubmitted: 0, submitted: 1 };
+const overview = {
+  summary: {
+    participants: total,
+    projects: total,
+    experts: total,
+    regions,
+    participantRegions: regions,
+  },
+  participantFunnel: {
+    registrations: 1,
+    uniqueParticipants: 1,
+    withTeam: 1,
+    projectCreators: 1,
+    submittedProjectCreators: 1,
+  },
+  solutionFunnel: { created: 1, notSubmitted: 0, submitted: 1, evaluated: 0 },
+  evaluationStatus: {
+    mode: "open",
+    maxEvaluationsPerProject: null,
+    assignments: { total: 1, pending: 1, evaluated: 0 },
+    projects: { submitted: 1, awaitingEvaluation: 1, partiallyEvaluated: 0, evaluated: 0 },
+  },
+  attention: {
+    participantsWithoutTeam: 0,
+    projectsAwaitingEvaluation: 1,
+    projectsNotSubmitted: { applicable: true, total: 0 },
+    delayedExperts: { applicable: false, total: 0, items: [], thresholdHours: 24 },
+  },
+  activity: [],
+  cases: {
+    configured: true,
+    submissionApplicable: true,
+    items: [{ name: long, ...metrics }],
+    withoutCase: { participantsTotal: 0, projectsTotal: 0, notSubmitted: 0, submitted: 0 },
+  },
+};
+function response(path, method = "GET", query = new URLSearchParams(), state = {}) {
+  const assignment = {
+    assignmentId: 1,
+    expert: {
+      expertId: 1,
+      userId: 1,
+      firstName: user.firstName,
+      lastName: user.lastName,
+      fullName: long,
+      avatar: user.avatar,
+    },
+    project: { id: 1, name: long },
+    status: "completed",
+    assignedAt: "2026-10-01",
+    projectSubmitted: true,
+    projectSubmittedAt: "2026-10-01",
+    waitingSince: null,
+    waitingSeconds: null,
+  };
+  if (/\/manager-overview\/assignments\/1\/scores\//.test(path))
+    return {
+      ...assignment,
+      scores: [
+        {
+          criterionId: 1,
+          name: long,
+          description: long,
+          type: "int",
+          minValue: 0,
+          maxValue: 10,
+          value: "8",
+          isScored: true,
+        },
+      ],
+    };
+  if (/\/manager-overview\/assignments\//.test(path)) return [assignment];
+  if (/\/manager-overview\/projects-awaiting-evaluation\//.test(path))
+    return {
+      ...page([
+        {
+          programProjectId: 1,
+          project: { id: 1, name: long },
+          leader: { userId: 1, fullName: long, avatar: user.avatar },
+          submittedAt: "2026-10-01",
+          status: "partially_evaluated",
+          reason: "partially_evaluated",
+          reasonLabel: "Частично оценено",
+          assignmentsTotal: 1,
+          assignmentsCompleted: 0,
+        },
+      ]),
+      mode: "open",
+    };
+  if (/\/programs\/1\/projects\//.test(path) && query.get("view") === "case_analytics")
+    return {
+      ...page([
+        {
+          programProjectId: 1,
+          project: { id: 1, name: long, region: "Москва", presentationAddress: null },
+          case: { kind: "selected", name: long },
+          leader: { userId: 1, fullName: long },
+          teamSize: 1,
+          linkedAt: "2026-10-01",
+          submitted: true,
+          submittedAt: "2026-10-01",
+        },
+      ]),
+      selection: { scope: "selected", caseName: long },
+      casesConfigured: true,
+      submissionApplicable: true,
+      caseMetrics: metrics,
+    };
+  if (/\/invites\/$/.test(path))
+    return method === "GET"
+      ? []
+      : {
+          id: 1,
+          user: participant,
+          project,
+          role: "Разработчик",
+          isAccepted: null,
+          datetimeCreated: "2026-10-01",
+        };
+  if (/\/vacancies\/responses\/1\/(accept|decline)\//.test(path))
+    return { ...vacancyResponse, isApproved: path.includes("accept") };
+  if (/\/files\/$/.test(path))
+    return { url: "https://example.test/ОченьДлинноеНазваниеФайлаДляПроверкиАдаптива.pdf" };
+  if (/\/courses\/tasks\/1\/answer\/$/.test(path))
+    return {
+      answerId: 1,
+      status: "submitted",
+      isCorrect: true,
+      canContinue: true,
+      nextTaskId: null,
+      submittedAt: "2026-10-01",
+    };
+  if (/\/rate-project\/rate\/1/.test(path))
+    return { ...ratedProject, scored: true, scoredExpertId: 1 };
+  if (/\/rate-project\/1/.test(path)) return page([ratedProject]);
+  if (/\/programs\/1\/projects\/apply\/$/.test(path))
+    return method === "GET"
+      ? { programId: 1, canSubmit: true, submissionDeadline: "2027-01-01", programFields: fields }
+      : { projectId: 1, programLinkId: 1 };
+  if (/\/programs\/partner-program-projects\/1\/fields\//.test(path)) return linkFields;
+  if (/\/programs\/partner-program-projects\/1\/submit\//.test(path))
+    return { ...project, submitted: true };
+  if (/\/projects\/1\/responses\//.test(path)) return [vacancyResponse];
+  if (/\/vacancies\/1\/responses\//.test(path))
+    return method === "GET" ? [vacancyResponse] : vacancyResponse;
+  if (/\/api\/token\//.test(path))
+    return { access: "responsive-fixture", refresh: "responsive-fixture" };
+  if (/\/auth\/users\/(current|1)\/$/.test(path)) return user;
+  if (/\/auth\/users\/(types|roles)\//.test(path))
+    return [
+      [1, "Участник"],
+      [2, "Эксперт"],
+      [3, "Менеджер"],
+    ];
+  if (/\/auth\/users\/projects/.test(path)) return page([project]);
+  if (/\/auth\/users\/1\/subscribed_projects\//.test(path)) return page([project]);
+  if (/\/auth\/public-users\/stats/.test(path))
+    return { total: 1, cities: 1, regions: 1, students: 1, skills: 1, userTypes: [] };
+  if (/\/auth\/public-users\/$/.test(path)) return page([participant]);
+  if (/\/auth\/public-users\/1\/$/.test(path)) return user;
+  if (/\/industries\//.test(path)) return [{ id: 1, name: "Информационные технологии" }];
+  if (/\/core\/skills\/inline/.test(path)) return page([skill]);
+  if (/\/core\/skills\/nested/.test(path)) return [{ id: 1, name: "Hard skills", skills: [skill] }];
+  if (/specializations/.test(path)) return [{ id: 1, name: "Разработчик" }];
+  if (/\/projects\/count\//.test(path))
+    return { all: 1, my: 1, subs: 1, myLeader: 1, myInProgram: 0, mySubmitted: 0 };
+  if (/\/projects\/1\/$/.test(path)) return project;
+  if (/\/projects\/$/.test(path)) return method === "GET" ? page([project]) : project;
+  if (/\/programs\/1\/manager-overview\/$/.test(path)) return overview;
+  if (/\/programs\/1\/$/.test(path)) return program;
+  if (/\/programs\/1\/analytics-widget\/$/.test(path))
+    return {
+      programId: 1,
+      isCompetitive: true,
+      role: "organizer",
+      organizer: {
+        participants: 1,
+        projects: 1,
+        submittedSolutions: 0,
+        participantsWithoutProject: 0,
+      },
+    };
+  if (/\/programs\/$/.test(path)) return page([program]);
+  if (/\/programs\/1\/projects\//.test(path)) return page([project]);
+  if (/\/programs\/1\/filters\//.test(path)) return [];
+  if (/\/vacancies\/responses\/self/.test(path)) return page([vacancyResponse]);
+  if (/\/vacancies\/1\/$/.test(path)) return vacancy;
+  if (/\/vacancies\/$/.test(path)) return page([vacancy]);
+  if (/\/courses\/lessons\/1\/$/.test(path))
+    return state.completedLesson
+      ? {
+          ...lesson,
+          progressStatus: "completed",
+          percent: 100,
+          currentTaskId: null,
+          tasks: lesson.tasks.map(task => ({ ...task, isCompleted: true })),
+        }
+      : lesson;
+  if (/\/courses\/1\/structure\/$/.test(path)) return structure;
+  if (/\/courses\/1\/$/.test(path)) return course;
+  if (/\/courses\/$/.test(path)) return [course];
+  if (/\/schema\//.test(path)) return { dataSchema: {} };
+  if (/\/news\/1\/$/.test(path)) return news;
+  if (/\/news\//.test(path)) return page([news]);
+  if (/\/feed\//.test(path)) return page([]);
+  if (method !== "GET") return { ...project, ...user, id: 1 };
+  return [];
+}
+module.exports = { response, project, program, user, vacancy, overview, lesson, long };
+
+// Production Angular использует project-analytics; payload совпадает с overview fixtures.
+const originalProductionResponse = module.exports.response;
+module.exports.response = (pathname, method, query, state) =>
+  /\/programs\/1\/project-analytics\/$/.test(pathname)
+    ? module.exports.overview
+    : originalProductionResponse(pathname, method, query, state);
diff --git a/docs/mobile-production/mobile-fixtures.cjs b/docs/mobile-production/mobile-fixtures.cjs
new file mode 100644
index 000000000..7e011d680
--- /dev/null
+++ b/docs/mobile-production/mobile-fixtures.cjs
@@ -0,0 +1,47 @@
+/** @format */
+
+const fixtures = require("./fixtures.cjs");
+fixtures.user.firstName = "Алексей";
+fixtures.user.lastName = "Куделько";
+fixtures.project.name = "Городские проекты";
+fixtures.project.shortDescription = "Сервис для студенческих команд";
+fixtures.project.region = "Ростовская область";
+fixtures.project.partnerProgram = {
+  id: 1,
+  programId: 1,
+  programLinkId: 1,
+  name: "Акселератор студенческих проектов",
+  isSubmitted: false,
+  canSubmit: true,
+  programFields: [],
+  programFieldValues: [],
+};
+fixtures.program.description =
+  "Программа помогает студенческим командам развивать проекты и работать с экспертами. Участники изучают материалы, готовят решения и получают обратную связь. ".repeat(
+    6,
+  );
+fixtures.program.name = "Кейс-чемпионат студенческих проектов";
+fixtures.vacancy.project.imageAddress = fixtures.user.avatar;
+fixtures.vacancy.project.name = fixtures.project.name;
+fixtures.vacancy.role = "Дизайнер интерфейсов";
+fixtures.vacancy.description = "Помогите создавать понятные интерфейсы для студенческих команд.";
+fixtures.vacancy.requiredSkills = [
+  "Мотивированность",
+  "Глубинное интервью",
+  "Проектирование пользовательского опыта",
+  "Figma",
+].map((name, id) => ({ id: id + 1, name, category: { id: 1, name: "Soft skills" }, approves: [] }));
+const response = fixtures.response;
+fixtures.response = (pathname, method, query, state) =>
+  /\/feed\/$/.test(pathname)
+    ? {
+        count: 1,
+        next: null,
+        previous: null,
+        counts: { all: 88, project: 56, vacancy: 1, news: 31, partnerprogram: 0, education: 0 },
+        results: [
+          { typeModel: "vacancy", content: fixtures.vacancy, publishedAt: "2026-09-29T12:00:00Z" },
+        ],
+      }
+    : response(pathname, method, query, state);
+module.exports = fixtures;
diff --git a/docs/mobile-production/preview.cjs b/docs/mobile-production/preview.cjs
new file mode 100644
index 000000000..edcd7079d
--- /dev/null
+++ b/docs/mobile-production/preview.cjs
@@ -0,0 +1,33 @@
+/** @format */
+
+const fs = require("node:fs");
+const path = require("node:path");
+
+// Optional direct delivery of unmodified build bytes avoids local HTTP/proxy failures.
+module.exports = async function preview(context, baseUrl) {
+  if (!process.env.QA_BUILD_ROOT) return;
+  let root = path.resolve(process.env.QA_BUILD_ROOT);
+  if (fs.existsSync(path.join(root, "browser/index.html"))) root = path.join(root, "browser");
+  const types = {
+    ".html": "text/html",
+    ".js": "text/javascript",
+    ".css": "text/css",
+    ".svg": "image/svg+xml",
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".woff": "font/woff",
+    ".woff2": "font/woff2",
+    ".json": "application/json",
+  };
+  await context.route(baseUrl + "/**", async route => {
+    const url = new URL(route.request().url());
+    let file = path.resolve(root, "." + decodeURIComponent(url.pathname));
+    if (!file.startsWith(root + path.sep)) return route.abort();
+    if (!fs.existsSync(file) || fs.statSync(file).isDirectory())
+      file = path.join(root, "index.html");
+    await route.fulfill({
+      path: file,
+      contentType: types[path.extname(file)] || "application/octet-stream",
+    });
+  });
+};
diff --git a/docs/mobile-production/screenshots/analytics-attention-390.png b/docs/mobile-production/screenshots/analytics-attention-390.png
new file mode 100644
index 000000000..75b534143
Binary files /dev/null and b/docs/mobile-production/screenshots/analytics-attention-390.png differ
diff --git a/docs/mobile-production/screenshots/feed-390.png b/docs/mobile-production/screenshots/feed-390.png
new file mode 100644
index 000000000..0273586ac
Binary files /dev/null and b/docs/mobile-production/screenshots/feed-390.png differ
diff --git a/docs/mobile-production/screenshots/program-1440-baseline.png b/docs/mobile-production/screenshots/program-1440-baseline.png
new file mode 100644
index 000000000..7aa53dda0
Binary files /dev/null and b/docs/mobile-production/screenshots/program-1440-baseline.png differ
diff --git a/docs/mobile-production/screenshots/program-1440-verified.png b/docs/mobile-production/screenshots/program-1440-verified.png
new file mode 100644
index 000000000..7aa53dda0
Binary files /dev/null and b/docs/mobile-production/screenshots/program-1440-verified.png differ
diff --git a/docs/mobile-production/screenshots/program-390.png b/docs/mobile-production/screenshots/program-390.png
new file mode 100644
index 000000000..f7342055a
Binary files /dev/null and b/docs/mobile-production/screenshots/program-390.png differ
diff --git a/docs/mobile-production/screenshots/project-edit-fields-390.png b/docs/mobile-production/screenshots/project-edit-fields-390.png
new file mode 100644
index 000000000..ed2498226
Binary files /dev/null and b/docs/mobile-production/screenshots/project-edit-fields-390.png differ
diff --git a/docs/mobile-production/screenshots/projects-invites-390.png b/docs/mobile-production/screenshots/projects-invites-390.png
new file mode 100644
index 000000000..a3e29fe11
Binary files /dev/null and b/docs/mobile-production/screenshots/projects-invites-390.png differ
diff --git a/docs/mobile-production/screenshots/team-invite-selected-390.png b/docs/mobile-production/screenshots/team-invite-selected-390.png
new file mode 100644
index 000000000..626b3ce3f
Binary files /dev/null and b/docs/mobile-production/screenshots/team-invite-selected-390.png differ
diff --git a/docs/mobile-production/visual.cjs b/docs/mobile-production/visual.cjs
new file mode 100644
index 000000000..ccaa32416
--- /dev/null
+++ b/docs/mobile-production/visual.cjs
@@ -0,0 +1,395 @@
+/** @format */
+
+const fs = require("node:fs");
+const path = require("node:path");
+const assert = require("node:assert/strict");
+const { launch, measure, assertViewport } = require("./browser-harness.cjs");
+const fixtures = require("./mobile-fixtures.cjs");
+const preview = require("./preview.cjs");
+
+// Только синтетические данные: harness не отправляет запросы в live API.
+const originalResponse = fixtures.response;
+fixtures.overview.attention.participantsWithoutTeam = 6;
+fixtures.overview.attention.projectsNotSubmitted.total = 1;
+fixtures.response = (endpoint, method, query, state) => {
+  if (/\/invites\/$/.test(endpoint) && method === "GET" && !query.has("project")) {
+    return [
+      {
+        id: 1,
+        user: fixtures.user,
+        project: fixtures.project,
+        role: "Разработчик",
+        isAccepted: null,
+        datetimeCreated: "2026-10-01",
+      },
+    ];
+  }
+  return originalResponse(endpoint, method, query, state);
+};
+
+const [phase, baseUrl, widthsArgument = "320,390,768,1440,1920", directoryArgument] =
+  process.argv.slice(2);
+const output = path.resolve(directoryArgument || ".desktop-regression/mobile-smoke/screenshots");
+const widths = widthsArgument.split(",").map(Number);
+const details = process.argv[6] === "details";
+const selectedScreens = process.env.QA_SCREENS?.split(",");
+const checkMobile = phase !== "baseline";
+const screens = [
+  ["feed", "/office/feed", "app-open-vacancy"],
+  ["projects", "/office/projects/dashboard", "app-info-card"],
+  ["members", "/office/members", "app-member-card"],
+  ["programs", "/office/program/all", "app-program-card"],
+  ["program", "/office/program/1", "app-main"],
+  ["profile", "/office/profile/1", "app-profile-left-side"],
+  ["project", "/office/projects/1", "app-projects-left-side"],
+  ["vacancies", "/office/vacancies/all", "app-project-vacancy-card"],
+  ["vacancy", "/office/vacancies/1", "app-vacancies-detail"],
+  ["courses", "/office/courses/all", "app-course"],
+  ["course", "/office/courses/1", "app-course-detail"],
+  ["profile-edit", "/office/profile/edit?editingStep=main", "app-profile-main-step"],
+  [
+    "project-edit",
+    "/office/projects/1/edit?editingStep=main&programLinkId=1",
+    "app-project-main-step",
+  ],
+  [
+    "partners",
+    "/office/projects/1/edit?editingStep=contacts&programLinkId=1",
+    "app-project-partner-resources-step",
+  ],
+  ["analytics", "/office/program/1/analytics", ".attention__list"],
+  [
+    "team-invite",
+    "/office/projects/1/edit?editingStep=team&programLinkId=1",
+    "app-project-team-step",
+  ],
+];
+
+async function settle(page) {
+  await page.waitForLoadState("networkidle");
+  await page.evaluate(() => {
+    for (const image of document.images) image.loading = "eager";
+  });
+  await page.waitForLoadState("networkidle");
+  await page.evaluate(async () => {
+    await document.fonts.ready;
+    await Promise.all([...document.fonts].map(font => font.load().catch(() => {})));
+    await document.fonts.ready;
+  });
+  await page.waitForFunction(() => [...document.images].every(image => image.complete));
+  await page.evaluate(() =>
+    Promise.all([...document.images].map(image => image.decode().catch(() => {}))),
+  );
+  await page.addStyleTag({
+    content:
+      "*,*::before,*::after{animation:none!important;transition:none!important;caret-color:transparent!important;}",
+  });
+  await page.evaluate(() => {
+    window.scrollTo(0, 0);
+    for (const element of document.querySelectorAll("*")) {
+      if (["auto", "scroll"].includes(getComputedStyle(element).overflowY)) element.scrollTop = 0;
+    }
+  });
+  await page.evaluate(async () => {
+    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    await document.fonts.ready;
+    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+  });
+}
+
+async function inspect(page, name) {
+  return page.evaluate(name => {
+    const box = element => {
+      const r = element.getBoundingClientRect();
+      return { left: r.left, right: r.right, top: r.top, bottom: r.bottom, width: r.width };
+    };
+    const buttons = selector => [...document.querySelectorAll(selector)].map(box);
+    if (name === "projects") {
+      const list = document.querySelector(".page__invites--list");
+      const card = list?.querySelector("app-info-card");
+      return { list: list && box(list), card: card && box(card) };
+    }
+    if (name === "project-edit") {
+      const region = document.querySelector(".region-select__control input");
+      const industry = document.querySelector("#industry .field__input");
+      const date = document.querySelector("#implementationDeadline .field__input");
+      const hint = document.querySelector("#implementationDeadline .field__tooltip-wrapper");
+      const avatar = document.querySelector(".project__image .control");
+      const avatarHint = document.querySelector(".project__image .control__tooltip-wrapper");
+      return {
+        actions: buttons(".project__save button"),
+        regionFont: getComputedStyle(region).fontSize,
+        industryFont: getComputedStyle(industry).fontSize,
+        date: box(date),
+        dateHint: box(hint),
+        datePadding: parseFloat(getComputedStyle(date).paddingRight),
+        avatar: box(avatar),
+        avatarHint: box(avatarHint),
+        goals: buttons(
+          ".project__options > app-button button, .project__link-options > app-button button",
+        ),
+      };
+    }
+    if (name === "partners")
+      return { actions: buttons("app-project-partner-resources-step app-button button") };
+    if (name === "program")
+      return {
+        emptyContacts: document.querySelectorAll(".info__contacts:has(button:disabled)").length,
+      };
+    if (name === "analytics")
+      return {
+        backgrounds: [...document.querySelectorAll(".attention__action")].map(
+          button => getComputedStyle(button).backgroundColor,
+        ),
+      };
+    if (name === "team-invite") {
+      const field = document.querySelector(".invite-search input");
+      const footer = document.querySelector(".invite-actions");
+      return {
+        inputBorder: getComputedStyle(field).borderTopWidth,
+        inputShadow: getComputedStyle(field).boxShadow,
+        inputOutline: getComputedStyle(field).outlineStyle,
+        actions: buttons(".invite-actions button"),
+        footer: box(footer),
+      };
+    }
+    return {};
+  }, name);
+}
+
+function verify(name, layout) {
+  const gap = actions => {
+    for (let i = 1; i < actions.length; i++)
+      assert.ok(
+        actions[i].top - actions[i - 1].bottom >= 7,
+        `${name}: missing vertical button gap`,
+      );
+  };
+  if (name === "projects")
+    assert.ok(
+      Math.abs(layout.list.left + layout.list.right - (layout.card.left + layout.card.right)) < 2,
+      "Invitation card must be centered",
+    );
+  if (name === "project-edit") {
+    gap(layout.actions);
+    gap(layout.goals);
+    assert.equal(layout.regionFont, layout.industryFont, "Region and select typography must match");
+    assert.ok(layout.date.width > 150, "Date must fit full value");
+    assert.ok(
+      layout.dateHint.left >= layout.date.right - layout.datePadding,
+      "Date hint overlaps text",
+    );
+    assert.ok(layout.avatarHint.left > layout.avatar.right, "Avatar hint must be outside logo");
+  }
+  if (name === "partners") gap(layout.actions);
+  if (name === "program") assert.equal(layout.emptyContacts, 0, "Empty contacts must be hidden");
+  if (name === "analytics")
+    assert.ok(
+      layout.backgrounds.every(color => color === "rgba(0, 0, 0, 0)"),
+      "Attention rows must not resemble progress bars",
+    );
+  if (name === "team-invite") {
+    assert.equal(layout.inputBorder, "0px", "Search must have one outer border");
+    assert.equal(layout.inputShadow, "none");
+    assert.equal(layout.inputOutline, "none", "Focus belongs to outer search field");
+    gap(layout.actions);
+    for (const button of layout.actions)
+      assert.ok(
+        Math.abs(button.width - layout.footer.width) < 2,
+        "Dialog buttons must fill footer",
+      );
+  }
+}
+
+(async () => {
+  fs.mkdirSync(path.join(output, phase), { recursive: true });
+  if (phase === "contacts") {
+    fixtures.program.links = ["https://t.me/procollab_fixture"];
+    const harness = await launch(390, { baseUrl, isMobile: true, hasTouch: true });
+    await preview(harness.context, baseUrl);
+    try {
+      const page = harness.page;
+      await page.goto(baseUrl + "/office/program/1");
+      const contacts = page.locator(".info__contacts button");
+      await contacts.waitFor({ state: "visible" });
+      assert.equal(await contacts.isEnabled(), true);
+      await contacts.click();
+      await page
+        .locator('.modal a[href="https://t.me/procollab_fixture"]')
+        .waitFor({ state: "visible" });
+      await assertViewport(page);
+      assert.deepEqual(harness.errors, []);
+      console.log("Program contacts: existing link opens in mobile modal");
+    } finally {
+      await harness.browser.close();
+    }
+    return;
+  }
+  const rows = [];
+  const repeatedShots = new Map();
+  for (const width of widths) {
+    const harness = await launch(width, { baseUrl, isMobile: width < 750, hasTouch: width < 750 });
+    await preview(harness.context, baseUrl);
+    const page = harness.page;
+    const fixClock = () => {
+      const NativeDate = Date;
+      window.Date = class extends NativeDate {
+        constructor(...args) {
+          super(...(args.length ? args : [1791288000000]));
+        }
+        static now() {
+          return 1791288000000;
+        }
+      };
+    };
+    try {
+      await page.goto(baseUrl + "/office/feed");
+      await page
+        .locator("app-open-vacancy")
+        .first()
+        .waitFor({ state: "attached" })
+        .catch(async error => {
+          console.error(
+            JSON.stringify(
+              {
+                phase,
+                baseUrl,
+                width,
+                details,
+                url: page.url(),
+                errors: harness.errors,
+                requests: harness.requests,
+                html: (await page.content()).slice(-1600),
+              },
+              null,
+              2,
+            ),
+          );
+          throw error;
+        });
+      await page.evaluate(fixClock);
+      await settle(page);
+      for (const [name, route, selector] of screens) {
+        if (selectedScreens && !selectedScreens.includes(name)) continue;
+        if (details && !["projects", "project-edit", "analytics", "team-invite"].includes(name))
+          continue;
+        harness.errors.length = 0;
+        if (name !== "feed")
+          await page.evaluate(route => {
+            history.pushState({}, "", route);
+            dispatchEvent(new PopStateEvent("popstate"));
+          }, route);
+        await page
+          .locator(selector)
+          .first()
+          .waitFor({ state: "attached" })
+          .catch(async error => {
+            console.error(
+              JSON.stringify(
+                {
+                  name,
+                  width,
+                  text: await page.locator("body").innerText(),
+                  errors: harness.errors,
+                  requests: harness.requests.slice(-15),
+                },
+                null,
+                2,
+              ),
+            );
+            throw error;
+          });
+        if (name === "program" && width > 1000)
+          await page.locator("app-program-role-widget").waitFor({ state: "attached" });
+        await settle(page);
+        if (name === "team-invite") {
+          await page.locator(".invite__submit button").click();
+          await page.locator(".project-invite[role=dialog]").waitFor({ state: "visible" });
+          await settle(page);
+        }
+        const viewport =
+          checkMobile && width < 1000 ? await assertViewport(page) : await measure(page);
+        const layout = await inspect(page, name);
+        if (checkMobile && width < 1000) {
+          try {
+            verify(name, layout);
+          } catch (error) {
+            console.error(JSON.stringify({ name, width, layout }));
+            throw error;
+          }
+        }
+        assert.deepEqual(harness.errors, [], `${name} ${width} console errors`);
+        const pixels = await page.screenshot({
+          path: path.join(output, phase, `${name}-${width}.png`),
+          fullPage: true,
+        });
+        const shotKey = `${name}-${width}`;
+        if (repeatedShots.has(shotKey))
+          assert.deepEqual(
+            pixels,
+            repeatedShots.get(shotKey),
+            `${shotKey}: unstable repeated screenshot`,
+          );
+        repeatedShots.set(shotKey, pixels);
+        rows.push({ name, width, layout, viewport, passed: true });
+        console.log(`${phase}: ${name} ${width}`);
+        if (details) {
+          const screenshot = async (suffix, selector) => {
+            await page
+              .locator(selector)
+              .first()
+              .evaluate(element => element.scrollIntoView({ block: "center" }));
+            await page.screenshot({
+              path: path.join(output, phase, `${suffix}-${width}.png`),
+              fullPage: true,
+            });
+            console.log(`${phase}: ${suffix} ${width}`);
+          };
+          if (name === "projects") await screenshot("projects-invites", ".page__invites--list");
+          if (name === "project-edit") {
+            await screenshot("project-edit-fields", "#implementationDeadline");
+            await screenshot("project-edit-goals", ".project__options");
+            await page.locator(".project__options > app-button button").click();
+            await screenshot("project-edit-new-goal", ".project__links--wrapper");
+            if (checkMobile && width < 1000) {
+              await assertViewport(page);
+              const date = page.locator(".project__links input").nth(1);
+              const box = await date.boundingBox();
+              assert.ok(box.width > 150, "New goal date must fit its value");
+            }
+          }
+          if (name === "analytics") await screenshot("analytics-attention", ".attention__list");
+          if (name === "team-invite") {
+            await page.locator("#team-invite-search").fill("Кандидат");
+            await page.locator(".invite-row[role=radio]").first().click();
+            await page.locator(".invite-role input").fill("Разработчик");
+            assert.equal(
+              await page
+                .getByRole("button", { name: "Отправить приглашение", exact: true })
+                .isEnabled(),
+              true,
+            );
+            await page.screenshot({
+              path: path.join(output, phase, `team-invite-selected-${width}.png`),
+              fullPage: true,
+            });
+            console.log(`${phase}: team-invite-selected ${width}`);
+          }
+        }
+        if (name === "team-invite") await page.getByLabel("Закрыть приглашение").click();
+      }
+    } finally {
+      await harness.browser.close();
+    }
+  }
+  fs.writeFileSync(
+    path.join(
+      output,
+      `${phase}${selectedScreens ? "-" + selectedScreens.join("-") : ""}${details ? "-details" : ""}.json`,
+    ),
+    JSON.stringify(rows, null, 2) + "\n",
+  );
+})().catch(error => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/projects/core/src/lib/services/websockets/websocket.service.spec.ts b/projects/core/src/lib/services/websockets/websocket.service.spec.ts
index 72f5ef351..bd3e371f7 100644
--- a/projects/core/src/lib/services/websockets/websocket.service.spec.ts
+++ b/projects/core/src/lib/services/websockets/websocket.service.spec.ts
@@ -4,6 +4,7 @@ import { TestBed } from "@angular/core/testing";
 
 import { WebsocketService } from "./websocket.service";
 import { TokenService } from "../tokens/token.service";
+import { environment } from "@environment";
 
 describe("WebsocketService", () => {
   let service: WebsocketService;
@@ -30,4 +31,90 @@ describe("WebsocketService", () => {
   it("should be created", () => {
     expect(service).toBeTruthy();
   });
+
+  describe("восстановление соединения", () => {
+    let sockets: any[];
+
+    beforeEach(() => {
+      vi.useFakeTimers();
+      sockets = [];
+      vi.stubGlobal(
+        "WebSocket",
+        class {
+          static OPEN = 1;
+          readyState = 0;
+          onopen: (() => void) | null = null;
+          onerror: (() => void) | null = null;
+          onclose: (() => void) | null = null;
+          onmessage: (() => void) | null = null;
+          send = vi.fn();
+          close = vi.fn(() => {
+            this.readyState = 3;
+          });
+          constructor() {
+            sockets.push(this);
+          }
+        },
+      );
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+      vi.unstubAllGlobals();
+    });
+
+    it("продолжает retry, сообщает один период недоступности и фиксирует восстановление", () => {
+      const states: string[] = [];
+      service.connectionStatus$.subscribe(state => states.push(state));
+      const connection = service.connect("/chat/").subscribe();
+      for (let i = 1; i <= environment.websocketReconnectionMaxAttempts + 2; i++) {
+        sockets.at(-1).onerror();
+        vi.advanceTimersByTime(
+          i >= environment.websocketReconnectionMaxAttempts
+            ? Math.max(environment.websocketReconnectionInterval, 5000)
+            : environment.websocketReconnectionInterval,
+        );
+      }
+      expect(states).toEqual(["idle", "unavailable"]);
+      sockets.at(-1).readyState = 1;
+      sockets.at(-1).onopen();
+      expect(states).toEqual(["idle", "unavailable", "connected"]);
+      expect(service.isConnected).toBe(true);
+      connection.unsubscribe();
+      expect(sockets.at(-1).close).toHaveBeenCalled();
+    });
+
+    it("сохраняет буфер сообщений и отправляет его один раз после подключения", () => {
+      const connection = service.connect("/chat/").subscribe();
+      service.send("new_message", { message: "Тест" });
+      const socket = sockets[0];
+      socket.readyState = 1;
+      socket.onopen();
+      expect(socket.send).toHaveBeenCalledExactlyOnceWith(
+        JSON.stringify({ type: "new_message", content: { message: "Тест" } }),
+      );
+      connection.unsubscribe();
+    });
+
+    it("явное закрытие не запускает новую попытку подключения", () => {
+      const connection = service.connect("/chat/").subscribe();
+      sockets[0].onopen();
+      service.close();
+      expect(sockets[0].onclose).toBeNull();
+      vi.advanceTimersByTime(10000);
+      expect(sockets).toHaveLength(1);
+      expect(service.isConnected).toBe(false);
+      connection.unsubscribe();
+    });
+
+    it("закрытие во время retry отменяет отложенное переподключение", () => {
+      const completed = vi.fn();
+      service.connect("/chat/").subscribe({ complete: completed });
+      sockets[0].onerror();
+      service.close();
+      vi.advanceTimersByTime(10000);
+      expect(sockets).toHaveLength(1);
+      expect(completed).toHaveBeenCalledOnce();
+    });
+  });
 });
diff --git a/projects/core/src/lib/services/websockets/websocket.service.ts b/projects/core/src/lib/services/websockets/websocket.service.ts
index 469315edb..cadd9ef1f 100644
--- a/projects/core/src/lib/services/websockets/websocket.service.ts
+++ b/projects/core/src/lib/services/websockets/websocket.service.ts
@@ -1,6 +1,17 @@
 /** @format */
 import { inject, Injectable } from "@angular/core";
-import { filter, map, Observable, Observer, retry, Subject, timer } from "rxjs";
+import {
+  BehaviorSubject,
+  distinctUntilChanged,
+  filter,
+  map,
+  Observable,
+  Observer,
+  retry,
+  Subject,
+  takeUntil,
+  timer,
+} from "rxjs";
 import { environment } from "@environment";
 import snakecaseKeys from "snakecase-keys";
 import camelcaseKeys from "camelcase-keys";
@@ -20,10 +31,18 @@ export class WebsocketService {
   private socket: WebSocket | null = null;
   /** Subject для обработки входящих сообщений */
   private messages$ = new Subject<MessageEvent>();
+  private readonly closed$ = new Subject<void>();
   /** Subject потери соединения (после исчерпания retry) — приватный, наружу только Observable */
   private readonly _connectionLost$ = new Subject<void>();
   /** Сигнал потери WS-соединения. Потребитель отвечает за UX (toast/banner/etc). */
   public readonly connectionLost$ = this._connectionLost$.asObservable();
+  private readonly connectionStatusSubject = new BehaviorSubject<
+    "idle" | "connected" | "unavailable"
+  >("idle");
+  /** Статус именно чата, а не доступности HTTP API или интернета в целом. */
+  public readonly connectionStatus$ = this.connectionStatusSubject
+    .asObservable()
+    .pipe(distinctUntilChanged());
   /** Буфер исходящих сообщений, накопленных пока сокет не OPEN — флашится в onopen. */
   private outboundQueue: string[] = [];
 
@@ -50,9 +69,11 @@ export class WebsocketService {
       const tokenAccess = tokens?.access ? tokens.access : "";
 
       this.socket = new WebSocket(environment.websocketUrl + path, ["Bearer", tokenAccess]);
+      const socket = this.socket;
 
       this.socket.onopen = () => {
         this.isConnected = true;
+        this.connectionStatusSubject.next("connected");
         // Отправляем всё, что накопилось пока сокет был CONNECTING.
         const flush = this.outboundQueue;
         this.outboundQueue = [];
@@ -75,6 +96,18 @@ export class WebsocketService {
       this.socket.onmessage = message => {
         this.messages$.next(message);
       };
+
+      return () => {
+        socket.onopen = null;
+        socket.onerror = null;
+        socket.onclose = null;
+        socket.onmessage = null;
+        socket.close();
+        if (this.socket === socket) {
+          this.socket = null;
+          this.isConnected = false;
+        }
+      };
     }).pipe(
       // Resilient reconnect: НЕ сдаёмся насовсем по исчерпании попыток.
       // Первые maxAttempts — частые попытки (быстрое восстановление после idle-close сервера);
@@ -83,6 +116,7 @@ export class WebsocketService {
       retry({
         delay: (_error, retryCount) => {
           if (retryCount >= environment.websocketReconnectionMaxAttempts) {
+            this.connectionStatusSubject.next("unavailable");
             this._connectionLost$.next();
             return timer(Math.max(environment.websocketReconnectionInterval, 5000));
           }
@@ -90,6 +124,7 @@ export class WebsocketService {
         },
         resetOnSuccess: true,
       }),
+      takeUntil(this.closed$),
     );
   }
 
@@ -141,10 +176,14 @@ export class WebsocketService {
    * Очищает ссылку на socket и сбрасывает флаг подключения
    */
   public close(): void {
+    this.closed$.next();
     if (this.socket) {
+      this.socket.onclose = null;
+      this.socket.onerror = null;
       this.socket.close();
       this.socket = null;
       this.isConnected = false;
     }
+    this.connectionStatusSubject.next("idle");
   }
 }
diff --git a/projects/social_platform/src/app/api/connection-status/connection-status-toast.service.ts b/projects/social_platform/src/app/api/connection-status/connection-status-toast.service.ts
deleted file mode 100644
index 1c5adcc6b..000000000
--- a/projects/social_platform/src/app/api/connection-status/connection-status-toast.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/** @format */
-
-import { inject, Injectable } from "@angular/core";
-import { WebsocketService } from "@corelib";
-import { SnackbarService } from "@domain/shared/snackbar.service";
-
-/** Слушает потерю WebSocket-соединения и показывает пользователю toast. */
-@Injectable({ providedIn: "root" })
-export class ConnectionStatusToastService {
-  private readonly websocketService = inject(WebsocketService);
-  private readonly snackbarService = inject(SnackbarService);
-
-  constructor() {
-    this.websocketService.connectionLost$.subscribe(() =>
-      this.snackbarService.error("Соединение с сервером потеряно. Проверьте интернет."),
-    );
-  }
-}
diff --git a/projects/social_platform/src/app/api/onboarding/facades/stages/onboarding-stage-zero-info.service.spec.ts b/projects/social_platform/src/app/api/onboarding/facades/stages/onboarding-stage-zero-info.service.spec.ts
index 4b98c2ad0..bcb87268e 100644
--- a/projects/social_platform/src/app/api/onboarding/facades/stages/onboarding-stage-zero-info.service.spec.ts
+++ b/projects/social_platform/src/app/api/onboarding/facades/stages/onboarding-stage-zero-info.service.spec.ts
@@ -4,7 +4,7 @@ import { signal } from "@angular/core";
 import { FormArray, FormBuilder } from "@angular/forms";
 import { TestBed } from "@angular/core/testing";
 import { Router } from "@angular/router";
-import { of } from "rxjs";
+import { BehaviorSubject, of } from "rxjs";
 import { ValidationService } from "@corelib";
 import { OnboardingStageZeroInfoService } from "./onboarding-stage-zero-info.service";
 import { OnboardingService } from "../../onboarding.service";
@@ -18,6 +18,17 @@ import { fail, ok } from "@domain/shared/result.type";
 import { initial } from "@domain/shared/async-state";
 
 describe("OnboardingStageZeroInfoService", () => {
+  const currentProfile = { id: 42 } as User;
+  let draft: BehaviorSubject<Partial<User>>;
+  let onboardingService: {
+    formValue$: ReturnType<BehaviorSubject<Partial<User>>["asObservable"]>;
+    setFormValue: ReturnType<typeof vi.fn>;
+  };
+  let profileInfoService: {
+    profile: ReturnType<typeof signal<User | null>>;
+    applyProfileUpdated: ReturnType<typeof vi.fn>;
+    ensureProfileLoaded: ReturnType<typeof vi.fn>;
+  };
   let service: OnboardingStageZeroInfoService;
   let profile: ReturnType<typeof signal<User | null>>;
   let updateProfile: ReturnType<typeof vi.fn>;
@@ -31,6 +42,8 @@ describe("OnboardingStageZeroInfoService", () => {
     userLanguages: FormArray;
     applySubmitModalError: ReturnType<typeof vi.fn>;
     applySkipRegistrationModalError: ReturnType<typeof vi.fn>;
+    applySetProfile: ReturnType<typeof vi.fn>;
+    applyInitStageZero: ReturnType<typeof vi.fn>;
   };
   let onboardingUI: {
     stageSubmitting$: ReturnType<typeof signal>;
@@ -56,6 +69,12 @@ describe("OnboardingStageZeroInfoService", () => {
     updateProfile = vi.fn();
     updateOnboardingStage = vi.fn();
     applyProfileUpdated = vi.fn();
+    draft = new BehaviorSubject<Partial<User>>({});
+    onboardingService = {
+      formValue$: draft.asObservable(),
+      setFormValue: vi.fn(value => draft.next(value)),
+    };
+    profileInfoService = { profile, applyProfileUpdated, ensureProfileLoaded: vi.fn() };
     stageZeroUI = {
       stageForm,
       achievements,
@@ -64,6 +83,8 @@ describe("OnboardingStageZeroInfoService", () => {
       userLanguages,
       applySubmitModalError: vi.fn(),
       applySkipRegistrationModalError: vi.fn(),
+      applySetProfile: vi.fn(),
+      applyInitStageZero: vi.fn(),
     };
     onboardingUI = {
       stageSubmitting$: signal(initial()),
@@ -77,13 +98,13 @@ describe("OnboardingStageZeroInfoService", () => {
         { provide: ValidationService, useValue: { getFormValidation: vi.fn(() => true) } },
         {
           provide: OnboardingService,
-          useValue: { formValue$: of({}), setFormValue: vi.fn() },
+          useValue: onboardingService,
         },
         { provide: OnboardingUIInfoService, useValue: onboardingUI },
         { provide: OnboardingStageZeroUIInfoService, useValue: stageZeroUI },
         {
           provide: ProfileInfoService,
-          useValue: { profile, applyProfileUpdated },
+          useValue: profileInfoService,
         },
         { provide: UpdateProfileUseCase, useValue: { execute: updateProfile } },
         {
@@ -95,6 +116,41 @@ describe("OnboardingStageZeroInfoService", () => {
     service = TestBed.inject(OnboardingStageZeroInfoService);
   });
 
+  it("ждет профиль при прямом входе и сохраняет введенный черновик", () => {
+    profile.set(null);
+    draft.next({ city: "Город из черновика", education: [] });
+    service.initializationStageZero();
+    TestBed.flushEffects();
+    expect(profileInfoService.ensureProfileLoaded).toHaveBeenCalledOnce();
+    expect(stageZeroUI.applySetProfile).not.toHaveBeenCalled();
+
+    const loadedProfile = {
+      ...currentProfile,
+      personal: { avatar: "saved-avatar.png", city: "Москва" },
+      relations: {
+        education: [{ organizationName: "Вуз" }],
+        workExperience: [],
+        userLanguages: [],
+        achievements: [],
+      },
+    } as unknown as User;
+    profile.set(loadedProfile);
+    TestBed.flushEffects();
+    expect(stageZeroUI.applySetProfile).toHaveBeenCalledExactlyOnceWith(loadedProfile);
+    expect(draft.value).toMatchObject({
+      avatar: "saved-avatar.png",
+      city: "Город из черновика",
+      education: [],
+    });
+
+    profile.set({
+      ...loadedProfile,
+      personal: { ...loadedProfile.personal, city: "Другой город" },
+    });
+    TestBed.flushEffects();
+    expect(onboardingService.setFormValue).toHaveBeenCalledOnce();
+  });
+
   it("onSubmit передает profile.id отдельно от данных формы", () => {
     updateProfile.mockReturnValue(of(ok({ id: 42 } as User)));
     updateOnboardingStage.mockReturnValue(of(ok({ id: 42 } as User)));
diff --git a/projects/social_platform/src/app/api/onboarding/facades/stages/onboarding-stage-zero-info.service.ts b/projects/social_platform/src/app/api/onboarding/facades/stages/onboarding-stage-zero-info.service.ts
index ebb514d2d..3a89f7e45 100644
--- a/projects/social_platform/src/app/api/onboarding/facades/stages/onboarding-stage-zero-info.service.ts
+++ b/projects/social_platform/src/app/api/onboarding/facades/stages/onboarding-stage-zero-info.service.ts
@@ -1,7 +1,7 @@
 /** @format */
 
-import { DestroyRef, inject, Injectable } from "@angular/core";
-import { concatMap, of } from "rxjs";
+import { DestroyRef, inject, Injectable, Injector } from "@angular/core";
+import { concatMap, filter, of, take } from "rxjs";
 import { OnboardingService } from "../../onboarding.service";
 import { ValidationService } from "@corelib";
 import { Router } from "@angular/router";
@@ -13,7 +13,7 @@ import { AppRoutes } from "@api/paths/app-routes";
 import { UpdateProfileUseCase } from "@api/auth/use-cases/update-profile.use-case";
 import { UpdateOnboardingStageUseCase } from "@api/auth/use-cases/update-onboarding-stage.use-case";
 import { ProfileInfoService } from "@api/profile/facades/profile-info.service";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { INVALID_PROFILE_ID_MESSAGE, isValidProfileId } from "@domain/auth/profile-id";
 
 /** Координирует первый шаг онбординга: профильные поля, FormArray, сохранение этапа. */
@@ -22,6 +22,7 @@ export class OnboardingStageZeroInfoService {
   private readonly router = inject(Router);
   private readonly validationService = inject(ValidationService);
   private readonly destroyRef = inject(DestroyRef);
+  private readonly injector = inject(Injector);
 
   private readonly onboardingService = inject(OnboardingService);
   private readonly onboardingUIInfoService = inject(OnboardingUIInfoService);
@@ -42,9 +43,26 @@ export class OnboardingStageZeroInfoService {
   private readonly skipSubmitting = this.onboardingUIInfoService.skipSubmitting$;
 
   initializationStageZero(): void {
-    if (this.profile()) {
-      this.onboardingStageZeroUIInfoService.applySetProfile(this.profile()!);
-    }
+    this.profileInfoService.ensureProfileLoaded();
+    toObservable(this.profile, { injector: this.injector })
+      .pipe(
+        filter((profile): profile is User => profile !== null),
+        take(1),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe(profile => {
+        this.onboardingStageZeroUIInfoService.applySetProfile(profile);
+        this.onboardingService.formValue$.pipe(take(1)).subscribe(draft => {
+          this.onboardingService.setFormValue({
+            avatar: draft.avatar ?? profile.personal.avatar,
+            city: draft.city ?? profile.personal.city,
+            education: draft.education ?? profile.relations.education,
+            workExperience: draft.workExperience ?? profile.relations.workExperience,
+            userLanguages: draft.userLanguages ?? profile.relations.userLanguages,
+            achievements: draft.achievements ?? profile.relations.achievements,
+          });
+        });
+      });
 
     this.onboardingService.formValue$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(fv => {
       this.onboardingStageZeroUIInfoService.applyInitStageZero(fv);
diff --git a/projects/social_platform/src/app/api/onboarding/facades/stages/ui/onboarding-stage-one-ui-info.service.spec.ts b/projects/social_platform/src/app/api/onboarding/facades/stages/ui/onboarding-stage-one-ui-info.service.spec.ts
new file mode 100644
index 000000000..e68589e6d
--- /dev/null
+++ b/projects/social_platform/src/app/api/onboarding/facades/stages/ui/onboarding-stage-one-ui-info.service.spec.ts
@@ -0,0 +1,26 @@
+/** @format */
+
+import { TestBed } from "@angular/core/testing";
+import { BehaviorSubject } from "rxjs";
+import { UserInput } from "@domain/auth/user.model";
+import { OnboardingStageOneUIInfoService } from "./onboarding-stage-one-ui-info.service";
+
+describe("OnboardingStageOneUIInfoService draft synchronization", () => {
+  it("restores the draft silently and publishes a user change only once", () => {
+    TestBed.configureTestingModule({ providers: [OnboardingStageOneUIInfoService] });
+    const ui = TestBed.inject(OnboardingStageOneUIInfoService);
+    const draft = new BehaviorSubject<UserInput>({ speciality: "Frontend" });
+    const publish = vi.fn((value: UserInput) => {
+      if (publish.mock.calls.length <= 5) draft.next(value);
+    });
+    const draftSubscription = draft.subscribe(value => ui.applyInitSpeciality(value));
+    const formSubscription = ui.stageForm.valueChanges.subscribe(publish);
+    ui.applyInitFormValues(draft.value);
+    expect(publish).not.toHaveBeenCalled();
+    ui.stageForm.patchValue({ speciality: "Backend" });
+    expect(publish).toHaveBeenCalledOnce();
+    expect(draft.value.speciality).toBe("Backend");
+    formSubscription.unsubscribe();
+    draftSubscription.unsubscribe();
+  });
+});
diff --git a/projects/social_platform/src/app/api/onboarding/facades/stages/ui/onboarding-stage-one-ui-info.service.ts b/projects/social_platform/src/app/api/onboarding/facades/stages/ui/onboarding-stage-one-ui-info.service.ts
index 96c28cc1a..08a0cc4fd 100644
--- a/projects/social_platform/src/app/api/onboarding/facades/stages/ui/onboarding-stage-one-ui-info.service.ts
+++ b/projects/social_platform/src/app/api/onboarding/facades/stages/ui/onboarding-stage-one-ui-info.service.ts
@@ -33,12 +33,10 @@ export class OnboardingStageOneUIInfoService {
   }
 
   applyInitFormValues(fv: UserInput): void {
-    this.stageForm.patchValue({
-      speciality: fv.speciality,
-    });
+    this.stageForm.patchValue({ speciality: fv.speciality }, { emitEvent: false });
   }
 
   applyInitSpeciality(fv: UserInput): void {
-    this.stageForm.patchValue({ speciality: fv.speciality });
+    this.stageForm.patchValue({ speciality: fv.speciality }, { emitEvent: false });
   }
 }
diff --git a/projects/social_platform/src/app/app.component.spec.ts b/projects/social_platform/src/app/app.component.spec.ts
index b825b1092..af8534127 100644
--- a/projects/social_platform/src/app/app.component.spec.ts
+++ b/projects/social_platform/src/app/app.component.spec.ts
@@ -3,13 +3,18 @@
 import { TestBed } from "@angular/core/testing";
 import { AppComponent } from "./app.component";
 import { AuthRepositoryPort } from "@domain/auth/ports/auth.repository.port";
-import { of } from "rxjs";
-import { TokenService } from "@corelib";
+import { BehaviorSubject, of } from "rxjs";
+import { TokenService, WebsocketService } from "@corelib";
 import { LoadingService } from "@api/shared/loading.service";
+import { SnackbarService } from "@domain/shared/snackbar.service";
+import { Snack } from "@domain/shared/snack.model";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 describe("AppComponent", () => {
+  let connectionStatus: BehaviorSubject<"idle" | "connected" | "unavailable">;
+
   beforeEach(async () => {
+    connectionStatus = new BehaviorSubject<"idle" | "connected" | "unavailable">("connected");
     const authPortSpy = {
       fetchProfile: of({} as any),
       fetchUserRoles: of([]),
@@ -30,6 +35,10 @@ describe("AppComponent", () => {
         { provide: AuthRepositoryPort, useValue: authPortSpy },
         { provide: TokenService, useValue: tokenSpy },
         { provide: LoadingService, useValue: loadingSpy },
+        {
+          provide: WebsocketService,
+          useValue: { connectionStatus$: connectionStatus.asObservable() },
+        },
       ],
     }).compileComponents();
   });
@@ -39,4 +48,19 @@ describe("AppComponent", () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
+
+  it("не уведомляет о фоне скрытых чатов и сохраняет остальные сообщения ошибок", () => {
+    const snackbar = TestBed.inject(SnackbarService);
+    const emitted: Snack[] = [];
+    snackbar.snacks.subscribe(snack => emitted.push(snack));
+    TestBed.createComponent(AppComponent);
+
+    connectionStatus.next("unavailable");
+    connectionStatus.next("connected");
+    connectionStatus.next("unavailable");
+    expect(emitted).toEqual([]);
+
+    snackbar.error("Не удалось загрузить программу", { timeout: 0 });
+    expect(emitted.map(snack => snack.text)).toEqual(["Не удалось загрузить программу"]);
+  });
 });
diff --git a/projects/social_platform/src/app/app.component.ts b/projects/social_platform/src/app/app.component.ts
index 318d4bc14..046290a4d 100644
--- a/projects/social_platform/src/app/app.component.ts
+++ b/projects/social_platform/src/app/app.component.ts
@@ -20,7 +20,6 @@ import { AuthRepositoryPort } from "@domain/auth/ports/auth.repository.port";
 import { LoadingService } from "@api/shared/loading.service";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { AppRoutes } from "@api/paths/app-routes";
-import { ConnectionStatusToastService } from "@api/connection-status/connection-status-toast.service";
 
 /**
  * Корневой компонент приложения
@@ -44,10 +43,7 @@ export class AppComponent implements OnInit {
     private tokenService: TokenService,
     private router: Router,
     private loadingService: LoadingService,
-  ) {
-    // Инстанциируем listener для toast'а при потере WS-соединения.
-    inject(ConnectionStatusToastService);
-  }
+  ) {}
 
   ngOnInit(): void {
     const showLoaderEvents = this.router.events.pipe(
@@ -89,10 +85,30 @@ export class AppComponent implements OnInit {
     const loadEvent = fromEvent(window, "load");
     const resizeEvent = fromEvent(window, "resize").pipe(throttleTime(500));
 
+    // visualViewport shrinks when the mobile keyboard opens; overlays must follow it.
+    const updateViewport = () => {
+      const viewport = window.visualViewport;
+      document.documentElement.style.setProperty(
+        "--visual-viewport-height",
+        `${viewport?.height ?? window.innerHeight}px`,
+      );
+      document.documentElement.style.setProperty(
+        "--visual-viewport-top",
+        `${viewport?.offsetTop ?? 0}px`,
+      );
+    };
+    updateViewport();
+    if (window.visualViewport) {
+      merge(fromEvent(window.visualViewport, "resize"), fromEvent(window.visualViewport, "scroll"))
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe(updateViewport);
+    }
+
     merge(loadEvent, resizeEvent)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         document.documentElement.style.setProperty("--app-height", `${window.innerHeight}px`);
+        updateViewport();
       });
   }
 
diff --git a/projects/social_platform/src/app/domain/project/project.model.ts b/projects/social_platform/src/app/domain/project/project.model.ts
index b08a904eb..3a1124123 100644
--- a/projects/social_platform/src/app/domain/project/project.model.ts
+++ b/projects/social_platform/src/app/domain/project/project.model.ts
@@ -14,6 +14,8 @@ import { Resource } from "./resource.model";
 
 export class PartnerProgramInfo {
   id!: number;
+  /** Имя из list/detail API; optional для совместимости со старым сервером. */
+  name?: string;
   programLinkId!: number;
   programId!: number;
   isSubmitted!: boolean;
diff --git a/projects/social_platform/src/app/domain/shared/snack.model.ts b/projects/social_platform/src/app/domain/shared/snack.model.ts
index 1477ad623..2fcc8e36c 100644
--- a/projects/social_platform/src/app/domain/shared/snack.model.ts
+++ b/projects/social_platform/src/app/domain/shared/snack.model.ts
@@ -6,4 +6,5 @@ export class Snack {
   text!: string;
   timeout!: number;
   type!: "error" | "success" | "info";
+  dismissible?: boolean;
 }
diff --git a/projects/social_platform/src/app/domain/shared/snackbar.service.ts b/projects/social_platform/src/app/domain/shared/snackbar.service.ts
index 88c87f9f6..ea27e596a 100644
--- a/projects/social_platform/src/app/domain/shared/snackbar.service.ts
+++ b/projects/social_platform/src/app/domain/shared/snackbar.service.ts
@@ -11,6 +11,8 @@ import { nanoid } from "nanoid";
 })
 export class SnackbarService {
   private readonly snacks$ = new Subject<Snack>();
+  private readonly dismissedSubject = new Subject<string>();
+  readonly dismissed$ = this.dismissedSubject.asObservable();
 
   snacks = this.snacks$.asObservable().pipe(distinctUntilChanged());
 
@@ -18,8 +20,23 @@ export class SnackbarService {
     this.snacks$.next({ id: nanoid(), text, timeout: options.timeout, type: "success" });
   }
 
-  error(text: string, options: { timeout: number } = { timeout: 5000 }): void {
-    this.snacks$.next({ id: nanoid(), text, timeout: options.timeout, type: "error" });
+  error(
+    text: string,
+    options: { timeout: number; dismissible?: boolean } = { timeout: 5000 },
+  ): string {
+    const id = nanoid();
+    this.snacks$.next({
+      id,
+      text,
+      timeout: options.timeout,
+      type: "error",
+      dismissible: options.dismissible,
+    });
+    return id;
+  }
+
+  dismiss(id: string): void {
+    this.dismissedSubject.next(id);
   }
 
   info(text: string, options: { timeout: number } = { timeout: 5000 }): void {
diff --git a/projects/social_platform/src/app/infrastructure/adapters/project/dto/project-program.dto.ts b/projects/social_platform/src/app/infrastructure/adapters/project/dto/project-program.dto.ts
index 137444505..438c44706 100644
--- a/projects/social_platform/src/app/infrastructure/adapters/project/dto/project-program.dto.ts
+++ b/projects/social_platform/src/app/infrastructure/adapters/project/dto/project-program.dto.ts
@@ -2,6 +2,7 @@
 
 export interface PartnerProgramInfoDto {
   id: number;
+  name?: string;
   programLinkId: number;
   programId: number;
   isSubmitted: boolean;
diff --git a/projects/social_platform/src/app/infrastructure/repository/chat/chat-realtime.repository.spec.ts b/projects/social_platform/src/app/infrastructure/repository/chat/chat-realtime.repository.spec.ts
index 4113524cc..23d03d8ea 100644
--- a/projects/social_platform/src/app/infrastructure/repository/chat/chat-realtime.repository.spec.ts
+++ b/projects/social_platform/src/app/infrastructure/repository/chat/chat-realtime.repository.spec.ts
@@ -69,6 +69,10 @@ describe("ChatRealtimeRepository", () => {
     expect(adapter.connect).toHaveBeenCalledExactlyOnceWith();
   });
 
+  it("не создаёт второе уведомление об обрыве из транспортного repository", () => {
+    expect(snackbarService.error).not.toHaveBeenCalled();
+  });
+
   it("делегирует send/edit/delete/read/startTyping в WS adapter", () => {
     const sendPayload = {} as never;
     const editPayload = {} as never;
diff --git a/projects/social_platform/src/app/infrastructure/repository/chat/chat-realtime.repository.ts b/projects/social_platform/src/app/infrastructure/repository/chat/chat-realtime.repository.ts
index 754f6809d..a78ab8618 100644
--- a/projects/social_platform/src/app/infrastructure/repository/chat/chat-realtime.repository.ts
+++ b/projects/social_platform/src/app/infrastructure/repository/chat/chat-realtime.repository.ts
@@ -13,25 +13,12 @@ import {
 } from "@domain/chat/chat.model";
 import { plainToInstance } from "class-transformer";
 import { filter, map } from "rxjs";
-import { WebsocketService } from "@core/public-api";
-import { SnackbarService } from "@domain/shared/snackbar.service";
 import { mapChatMessage } from "./chat.repository";
 
 /** ChatRealtimePort поверх WebSocket-адаптера: команды проксируются в сокет, входящие события типизируются. */
 @Injectable({ providedIn: "root" })
 export class ChatRealtimeRepository implements ChatRealtimePort {
   private readonly chatWsAdapter = inject(ChatWsAdapter);
-  private readonly websocketService = inject(WebsocketService);
-  private readonly snackbarService = inject(SnackbarService);
-
-  constructor() {
-    this.websocketService.connectionLost$.subscribe({
-      next: () => {
-        this.snackbarService.error("Соединение потеряно");
-      },
-    });
-  }
-
   connect() {
     return this.chatWsAdapter.connect();
   }
diff --git a/projects/social_platform/src/app/ui/pages/auth/auth.component.scss b/projects/social_platform/src/app/ui/pages/auth/auth.component.scss
index 08453bf94..b235d38f6 100644
--- a/projects/social_platform/src/app/ui/pages/auth/auth.component.scss
+++ b/projects/social_platform/src/app/ui/pages/auth/auth.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 
 .page {
@@ -25,3 +24,20 @@
     height: 100%;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .page {
+      height: auto;
+      min-height: 100dvh;
+      padding: 0 var(--page-gutter);
+    }
+
+    .page__body {
+      justify-content: flex-start;
+      height: auto;
+      min-height: 100dvh;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/auth/confirm-password-reset/confirm-password-reset.component.ts b/projects/social_platform/src/app/ui/pages/auth/confirm-password-reset/confirm-password-reset.component.ts
index 5b96be168..f471968b8 100644
--- a/projects/social_platform/src/app/ui/pages/auth/confirm-password-reset/confirm-password-reset.component.ts
+++ b/projects/social_platform/src/app/ui/pages/auth/confirm-password-reset/confirm-password-reset.component.ts
@@ -3,13 +3,14 @@
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { AsyncPipe } from "@angular/common";
 import { AuthPasswordService } from "@api/auth/facades/auth-password.service";
+import { AuthUIInfoService } from "@api/auth/facades/ui/auth-ui-info.service";
 
 /** Страница подтверждения отправки письма для сброса пароля. */
 @Component({
   selector: "app-confirm-password-reset",
   templateUrl: "./confirm-password-reset.component.html",
   styleUrl: "./confirm-password-reset.component.scss",
-  providers: [AuthPasswordService],
+  providers: [AuthPasswordService, AuthUIInfoService],
   imports: [AsyncPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.html b/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.html
index d645335ef..b74c7f6e2 100644
--- a/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.html
+++ b/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.html
@@ -1,41 +1,87 @@
 <!-- @format -->
-
-<main class="auth verification">
-  <img
-    class="auth__logo"
-    src="/assets/images/shared/logo.svg"
-    alt="procollab"
-    loading="lazy"
-    decoding="async"
-  />
-  <div class="verification__inner">
-    <div class="verification__body">
-      <div class="auth__greeting">
-        <h3 class="auth__title">Мы отправили ссылку подтверждения</h3>
-        <p class="auth__info">
-          Для продолжения регистрации и заполнения резюме подтверди свою почту, для этого мы
-          отправили тебе письмо со ссылкой подтверждения
-        </p>
-      </div>
-      @if (counter() > 0) {
-        <div class="verification__text">
-          Письмо отправлено, отправить еще раз через {{ counter() }}
-        </div>
-      } @else {
-        <div class="verification__action">
-          <p class="text-body-14 verification__text">Не получил письмо? Проверь папку спам или</p>
-          <button class="verification__send-again text-body-14" (click)="onResend()">
-            отправь снова <i appIcon icon="reload" appSquare="17"></i>
-          </button>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <main class="auth verification">
+    <img
+      class="auth__logo"
+      src="/assets/images/shared/logo.svg"
+      alt="procollab"
+      loading="lazy"
+      decoding="async"
+    />
+    <div class="verification__inner">
+      <div class="verification__body">
+        <div class="auth__greeting">
+          <h3 class="auth__title">Мы отправили ссылку подтверждения</h3>
+          <p class="auth__info">
+            Для продолжения регистрации и заполнения резюме подтверди свою почту, для этого мы
+            отправили тебе письмо со ссылкой подтверждения
+          </p>
         </div>
-      }
+        @if (counter() > 0) {
+          <div class="verification__text">
+            Письмо отправлено, отправить еще раз через {{ counter() }}
+          </div>
+        } @else {
+          <div class="verification__action">
+            <p class="text-body-14 verification__text">Не получил письмо? Проверь папку спам или</p>
+            <button class="verification__send-again text-body-14" (click)="onResend()">
+              отправь снова <i appIcon icon="reload" appSquare="17"></i>
+            </button>
+          </div>
+        }
+      </div>
+      <img
+        class="verification__img"
+        src="/assets/images/auth/email.svg"
+        alt="email"
+        loading="lazy"
+        decoding="async"
+      />
     </div>
+  </main>
+} @else {
+  <main class="auth verification">
     <img
-      class="verification__img"
-      src="/assets/images/auth/email.svg"
-      alt="email"
+      class="auth__logo"
+      src="/assets/images/shared/logo.svg"
+      alt="procollab"
       loading="lazy"
       decoding="async"
     />
-  </div>
-</main>
+    <div class="verification__inner">
+      <div class="verification__body">
+        <div class="auth__greeting">
+          <h3 class="auth__title">Мы отправили ссылку подтверждения</h3>
+          <p class="auth__info">
+            Для продолжения регистрации и заполнения резюме подтверди свою почту, для этого мы
+            отправили тебе письмо со ссылкой подтверждения
+          </p>
+        </div>
+        @if (counter() > 0) {
+          <div class="verification__text">
+            Письмо отправлено, отправить еще раз через {{ counter() }}
+          </div>
+        } @else {
+          <div class="verification__action">
+            <p class="text-body-14 verification__text">Не получил письмо? Проверь папку спам или</p>
+            <button
+              appButton="secondary"
+              class="verification__send-again text-body-14"
+              (click)="onResend()"
+            >
+              отправь снова <i appIcon icon="reload" appSquare="17"></i>
+            </button>
+          </div>
+        }
+      </div>
+      <img
+        class="verification__img"
+        src="/assets/images/auth/email.svg"
+        alt="email"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+  </main>
+}
diff --git a/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.scss b/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.scss
index c79e6ee7a..d212ab59e 100644
--- a/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.scss
+++ b/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -51,3 +50,21 @@
     color: var(--dark-grey);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .verification__img {
+      position: static;
+      width: 100%;
+      min-width: 0;
+      max-height: 40dvh;
+      object-fit: contain;
+    }
+
+    .verification__action {
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.ts b/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.ts
index 4a08a1c5b..104904ea8 100644
--- a/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.ts
+++ b/projects/social_platform/src/app/ui/pages/auth/email-verification/email-verification.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { IconComponent } from "@ui/primitives";
 import { AuthEmailService } from "@api/auth/facades/auth-email.service";
@@ -11,10 +16,12 @@ import { CommonModule } from "@angular/common";
   templateUrl: "./email-verification.component.html",
   styleUrl: "./email-verification.component.scss",
   providers: [AuthEmailService],
-  imports: [CommonModule, IconComponent],
+  imports: [ButtonDirective, CommonModule, IconComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EmailVerificationComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly authEmailService = inject(AuthEmailService);
 
   protected readonly counter = this.authEmailService.counter;
diff --git a/projects/social_platform/src/app/ui/pages/auth/login/login.component.html b/projects/social_platform/src/app/ui/pages/auth/login/login.component.html
index 89005389e..5f1ec5236 100644
--- a/projects/social_platform/src/app/ui/pages/auth/login/login.component.html
+++ b/projects/social_platform/src/app/ui/pages/auth/login/login.component.html
@@ -1,175 +1,355 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="login">
+    <div class="login__left">
+      <div class="login__left-content">
+        <form
+          class="auth"
+          [formGroup]="loginForm"
+          novalidate
+          (ngSubmit)="onSubmit()"
+          (keyup.enter)="onSubmit()"
+        >
+          <div class="auth__wrapper">
+            <img
+              class="login__logo"
+              src="/assets/images/shared/logo.svg"
+              alt="logo"
+              loading="lazy"
+              decoding="async"
+            />
 
-<div class="login">
-  <div class="login__left">
-    <div class="login__left-content">
-      <form
-        class="auth"
-        [formGroup]="loginForm"
-        novalidate
-        (ngSubmit)="onSubmit()"
-        (keyup.enter)="onSubmit()"
-      >
-        <div class="auth__wrapper">
-          <img
-            class="login__logo"
-            src="/assets/images/shared/logo.svg"
-            alt="logo"
-            loading="lazy"
-            decoding="async"
-          />
-
-          @if (loginForm.get("email"); as email) {
-            <fieldset class="auth__field">
-              <label for="email" class="field-label">почта*</label>
-              <app-input
-                size="big"
-                [error]="email | controlError"
-                id="email"
-                type="email"
-                formControlName="email"
-                placeholder="example@example.com"
-              ></app-input>
-
-              @if (email | controlError: "email") {
-                <div class="text-body-10 error">
-                  {{ errorMessage.VALIDATION_EMAIL }}
-                </div>
-              }
-              @if (email | controlError: "required") {
-                <div class="text-body-10 error">
-                  {{ errorMessage.VALIDATION_REQUIRED }}
+            @if (loginForm.get("email"); as email) {
+              <fieldset class="auth__field">
+                <label for="email" class="field-label">почта*</label>
+                <app-input
+                  size="big"
+                  [error]="email | controlError"
+                  id="email"
+                  type="email"
+                  formControlName="email"
+                  placeholder="example@example.com"
+                ></app-input>
+
+                @if (email | controlError: "email") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_EMAIL }}
+                  </div>
+                }
+                @if (email | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+              </fieldset>
+            }
+            @if (loginForm.get("password"); as password) {
+              <fieldset class="auth__field">
+                <div class="login__password">
+                  <label class="field-label" for="password">пароль</label>
+                  <a [routerLink]="AppRoutes.auth.resetPasswordEmail()" class="login__forget">
+                    забыли пароль?
+                  </a>
                 </div>
-              }
-            </fieldset>
-          }
-          @if (loginForm.get("password"); as password) {
-            <fieldset class="auth__field">
-              <div class="login__password">
-                <label class="field-label" for="password">пароль</label>
-                <a [routerLink]="AppRoutes.auth.resetPasswordEmail()" class="login__forget">
-                  забыли пароль?
-                </a>
-              </div>
 
-              <app-input
-                class="auth__password-input"
-                size="big"
-                [error]="password | controlError"
-                id="password"
-                [type]="showPassword() ? 'text' : 'password'"
-                formControlName="password"
-                name="password"
-                autocomplete="current-password"
-                placeholder="GJiwoeuhbn120="
-              >
-                <button
-                  type="button"
-                  class="auth__password-toggle auth__password-toggle--muted"
-                  [attr.aria-label]="showPassword() ? 'Скрыть пароль' : 'Показать пароль'"
-                  [attr.aria-pressed]="showPassword()"
-                  (click)="$event.stopPropagation(); toggleShowPassword()"
+                <app-input
+                  class="auth__password-input"
+                  size="big"
+                  [error]="password | controlError"
+                  id="password"
+                  [type]="showPassword() ? 'text' : 'password'"
+                  formControlName="password"
+                  name="password"
+                  autocomplete="current-password"
+                  placeholder="GJiwoeuhbn120="
                 >
-                  <i
-                    appIcon
-                    [icon]="showPassword() ? 'eye' : 'eye-off'"
-                    appSquare="15"
-                    aria-hidden="true"
-                  ></i>
-                </button>
-              </app-input>
-
-              @if (password | controlError: "required") {
-                <div class="text-body-10 error">
-                  {{ errorMessage.VALIDATION_REQUIRED }}
-                </div>
-              }
-            </fieldset>
-          }
-          @if (errorWrongAuth()) {
-            <div class="text-body-10 error">
-              {{ errorMessage.AUTH_WRONG_AUTH }}
-            </div>
-          }
+                  <button
+                    type="button"
+                    class="auth__password-toggle auth__password-toggle--muted"
+                    [attr.aria-label]="showPassword() ? 'Скрыть пароль' : 'Показать пароль'"
+                    [attr.aria-pressed]="showPassword()"
+                    (click)="$event.stopPropagation(); toggleShowPassword()"
+                  >
+                    <i
+                      appIcon
+                      [icon]="showPassword() ? 'eye' : 'eye-off'"
+                      appSquare="15"
+                      aria-hidden="true"
+                    ></i>
+                  </button>
+                </app-input>
+
+                @if (password | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+              </fieldset>
+            }
+            @if (errorWrongAuth()) {
+              <div class="text-body-10 error">
+                {{ errorMessage.AUTH_WRONG_AUTH }}
+              </div>
+            }
+
+            <app-button
+              size="big"
+              [loader]="loginIsSubmitting()"
+              class="auth__button"
+              customTypographyClass="auth__button-typography"
+              type="submit"
+            >
+              войти
+              <i
+                class="auth__button-icon"
+                appIcon
+                icon="arrow-no-body"
+                appWidth="12"
+                appHeight="6"
+                appViewBox="0 0 18 9"
+              ></i>
+            </app-button>
+
+            <div class="login__additional">
+              <p class="login__reg text-body-12">
+                нет аккаунта?
+                <a [routerLink]="AppRoutes.auth.register()">зарегистрируйтесь</a>
+              </p>
+
+              <hr />
 
-          <app-button
-            size="big"
-            [loader]="loginIsSubmitting()"
-            class="auth__button"
-            customTypographyClass="auth__button-typography"
-            type="submit"
-          >
-            войти
-            <i
-              class="auth__button-icon"
-              appIcon
-              icon="arrow-no-body"
-              appWidth="12"
-              appHeight="6"
-              appViewBox="0 0 18 9"
-            ></i>
-          </app-button>
-
-          <div class="login__additional">
-            <p class="login__reg text-body-12">
-              нет аккаунта?
-              <a [routerLink]="AppRoutes.auth.register()">зарегистрируйтесь</a>
-            </p>
-
-            <hr />
-
-            <p class="text-body-12 login__external">
-              Если вы регистрировались через форму на сайте программы кейс-чемпионата, введите
-              данные, которые вы указывали ранее
-            </p>
+              <p class="text-body-12 login__external">
+                Если вы регистрировались через форму на сайте программы кейс-чемпионата, введите
+                данные, которые вы указывали ранее
+              </p>
+            </div>
           </div>
+        </form>
+      </div>
+
+      <div class="login__left-footer">
+        <div class="tooltip">
+          <app-tooltip
+            color="grey"
+            iconSize="40"
+            (click)="$event.stopPropagation(); toggleTooltip()"
+          ></app-tooltip>
+
+          @if (isHintLoginVisible()) {
+            <div class="tooltip__wrapper" (clickOutside)="toggleTooltip()">
+              <p class="tooltip__text text-body-10">
+                Возникли технические сложности или остались вопросы?
+              </p>
+              <p class="tooltip__text text-body-10">
+                Все ответы в нашем боте поддержки
+                <a href="https://t.me/procollab_bot">{{ "@procollab_bot" }}</a>
+              </p>
+
+              <br />
+
+              <p class="tooltip__text text-body-10">
+                Для уникальных кейсов или нерешаемых сложностей на связи наша техническая поддержка
+                –
+                <a href="https://t.me/procollab_support">{{ "@procollab_support" }}</a>
+              </p>
+
+              <br />
+
+              <p class="tooltip__text text-body-10">
+                Время работы оператора:  пн-пт, 10:00-19:00 по московскому времени
+              </p>
+            </div>
+          }
         </div>
-      </form>
+      </div>
+    </div>
+
+    <div class="login__right">
+      <img
+        class="login__image"
+        src="/assets/images/auth/login-img.png"
+        alt=""
+        loading="lazy"
+        decoding="async"
+      />
     </div>
+  </div>
+} @else {
+  <div class="login">
+    <div class="login__left">
+      <div class="login__left-content">
+        <form
+          appFormLayout
+          class="auth"
+          [formGroup]="loginForm"
+          novalidate
+          (ngSubmit)="onSubmit()"
+          (keyup.enter)="onSubmit()"
+        >
+          <div class="auth__wrapper">
+            <img
+              class="login__logo"
+              src="/assets/images/shared/logo.svg"
+              alt="logo"
+              loading="lazy"
+              decoding="async"
+            />
+
+            @if (loginForm.get("email"); as email) {
+              <fieldset class="auth__field">
+                <label for="email" class="field-label">почта*</label>
+                <app-input
+                  size="big"
+                  [error]="email | controlError"
+                  id="email"
+                  type="email"
+                  formControlName="email"
+                  placeholder="example@example.com"
+                ></app-input>
+
+                @if (email | controlError: "email") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_EMAIL }}
+                  </div>
+                }
+                @if (email | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+              </fieldset>
+            }
+            @if (loginForm.get("password"); as password) {
+              <fieldset class="auth__field">
+                <div class="login__password">
+                  <label class="field-label" for="password">пароль</label>
+                  <a [routerLink]="AppRoutes.auth.resetPasswordEmail()" class="login__forget">
+                    забыли пароль?
+                  </a>
+                </div>
+
+                <app-input
+                  class="auth__password-input"
+                  size="big"
+                  [error]="password | controlError"
+                  id="password"
+                  [type]="showPassword() ? 'text' : 'password'"
+                  formControlName="password"
+                  name="password"
+                  autocomplete="current-password"
+                  placeholder="GJiwoeuhbn120="
+                >
+                  <button
+                    appButton="icon"
+                    type="button"
+                    class="auth__password-toggle auth__password-toggle--muted"
+                    [attr.aria-label]="showPassword() ? 'Скрыть пароль' : 'Показать пароль'"
+                    [attr.aria-pressed]="showPassword()"
+                    (click)="$event.stopPropagation(); toggleShowPassword()"
+                  >
+                    <i
+                      appIcon
+                      [icon]="showPassword() ? 'eye' : 'eye-off'"
+                      appSquare="15"
+                      aria-hidden="true"
+                    ></i>
+                  </button>
+                </app-input>
 
-    <div class="login__left-footer">
-      <div class="tooltip">
-        <app-tooltip
-          color="grey"
-          iconSize="40"
-          (click)="$event.stopPropagation(); toggleTooltip()"
-        ></app-tooltip>
-
-        @if (isHintLoginVisible()) {
-          <div class="tooltip__wrapper" (clickOutside)="toggleTooltip()">
-            <p class="tooltip__text text-body-10">
-              Возникли технические сложности или остались вопросы?
-            </p>
-            <p class="tooltip__text text-body-10">
-              Все ответы в нашем боте поддержки
-              <a href="https://t.me/procollab_bot">{{ "@procollab_bot" }}</a>
-            </p>
-
-            <br />
-
-            <p class="tooltip__text text-body-10">
-              Для уникальных кейсов или нерешаемых сложностей на связи наша техническая поддержка –
-              <a href="https://t.me/procollab_support">{{ "@procollab_support" }}</a>
-            </p>
-
-            <br />
-
-            <p class="tooltip__text text-body-10">
-              Время работы оператора:  пн-пт, 10:00-19:00 по московскому времени
-            </p>
+                @if (password | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+              </fieldset>
+            }
+            @if (errorWrongAuth()) {
+              <div class="text-body-10 error">
+                {{ errorMessage.AUTH_WRONG_AUTH }}
+              </div>
+            }
+
+            <app-button
+              size="big"
+              [loader]="loginIsSubmitting()"
+              class="auth__button"
+              customTypographyClass="auth__button-typography"
+              type="submit"
+            >
+              войти
+              <i
+                class="auth__button-icon"
+                appIcon
+                icon="arrow-no-body"
+                appWidth="12"
+                appHeight="6"
+                appViewBox="0 0 18 9"
+              ></i>
+            </app-button>
+
+            <div class="login__additional">
+              <p class="login__reg text-body-12">
+                нет аккаунта?
+                <a [routerLink]="AppRoutes.auth.register()">зарегистрируйтесь</a>
+              </p>
+
+              <hr />
+
+              <p class="text-body-12 login__external">
+                Если вы регистрировались через форму на сайте программы кейс-чемпионата, введите
+                данные, которые вы указывали ранее
+              </p>
+            </div>
           </div>
-        }
+        </form>
+      </div>
+
+      <div class="login__left-footer">
+        <div class="tooltip">
+          <app-tooltip
+            color="grey"
+            iconSize="40"
+            (click)="$event.stopPropagation(); toggleTooltip()"
+          ></app-tooltip>
+
+          @if (isHintLoginVisible()) {
+            <div class="tooltip__wrapper" (clickOutside)="toggleTooltip()">
+              <p class="tooltip__text text-body-10">
+                Возникли технические сложности или остались вопросы?
+              </p>
+              <p class="tooltip__text text-body-10">
+                Все ответы в нашем боте поддержки
+                <a href="https://t.me/procollab_bot">{{ "@procollab_bot" }}</a>
+              </p>
+
+              <br />
+
+              <p class="tooltip__text text-body-10">
+                Для уникальных кейсов или нерешаемых сложностей на связи наша техническая поддержка
+                –
+                <a href="https://t.me/procollab_support">{{ "@procollab_support" }}</a>
+              </p>
+
+              <br />
+
+              <p class="tooltip__text text-body-10">
+                Время работы оператора:  пн-пт, 10:00-19:00 по московскому времени
+              </p>
+            </div>
+          }
+        </div>
       </div>
     </div>
-  </div>
 
-  <div class="login__right">
-    <img
-      class="login__image"
-      src="/assets/images/auth/login-img.png"
-      alt=""
-      loading="lazy"
-      decoding="async"
-    />
+    <div class="login__right">
+      <img
+        class="login__image"
+        src="/assets/images/auth/login-img.png"
+        alt=""
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/auth/login/login.component.scss b/projects/social_platform/src/app/ui/pages/auth/login/login.component.scss
index a38309fa7..87203dccb 100644
--- a/projects/social_platform/src/app/ui/pages/auth/login/login.component.scss
+++ b/projects/social_platform/src/app/ui/pages/auth/login/login.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -117,3 +116,50 @@
   color: var(--dark-grey);
   cursor: pointer;
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .login {
+    width: 100%;
+    min-width: 0;
+
+    &__left {
+      min-width: 0;
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    .login {
+      width: 100%;
+      min-width: 0;
+      min-height: 100dvh;
+    }
+
+    .login__left {
+      min-width: 0;
+      padding-left: 0;
+    }
+
+    .login__left-content {
+      padding: 24px 0;
+    }
+
+    .login .auth__wrapper {
+      width: 100%;
+      max-width: none;
+    }
+
+    .login__password {
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+
+    .tooltip__wrapper {
+      position: fixed;
+      right: var(--page-gutter);
+      bottom: max(16px, env(safe-area-inset-bottom));
+      left: var(--page-gutter);
+      width: auto;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/auth/login/login.component.ts b/projects/social_platform/src/app/ui/pages/auth/login/login.component.ts
index 797df8cce..10829316c 100644
--- a/projects/social_platform/src/app/ui/pages/auth/login/login.component.ts
+++ b/projects/social_platform/src/app/ui/pages/auth/login/login.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, FormLayoutDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, computed, inject, OnInit } from "@angular/core";
 import { ReactiveFormsModule } from "@angular/forms";
 import { ErrorMessage } from "@core/lib/models/error/error-message";
@@ -21,6 +26,8 @@ import { AppRoutes } from "@api/paths/app-routes";
   styleUrl: "./login.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    ButtonDirective,
+    FormLayoutDirective,
     CommonModule,
     ReactiveFormsModule,
     RouterLink,
@@ -34,6 +41,8 @@ import { AppRoutes } from "@api/paths/app-routes";
   providers: [AuthLoginService, AuthUIInfoService, TooltipInfoService],
 })
 export class LoginComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly authLoginService = inject(AuthLoginService);
   private readonly authUIInfoService = inject(AuthUIInfoService);
   private readonly tokenService = inject(TokenService);
diff --git a/projects/social_platform/src/app/ui/pages/auth/register/register.component.html b/projects/social_platform/src/app/ui/pages/auth/register/register.component.html
index 96c14d501..3b0898cc3 100644
--- a/projects/social_platform/src/app/ui/pages/auth/register/register.component.html
+++ b/projects/social_platform/src/app/ui/pages/auth/register/register.component.html
@@ -1,360 +1,733 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="auth register">
+    <div class="auth__greeting">
+      <img
+        class="register__logo"
+        src="/assets/images/shared/logo.svg"
+        alt="logo"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+    <form class="auth__wrapper" [formGroup]="registerForm" novalidate (ngSubmit)="onSendForm()">
+      <ng-container>
+        <div class="auth__row">
+          @if (registerForm.get("firstName"); as name) {
+            <fieldset class="auth__field">
+              <label for="name" class="field-label">имя</label>
+              <app-input
+                size="big"
+                [error]="!!(name | controlError)"
+                id="name"
+                type="text"
+                formControlName="firstName"
+                placeholder="Иван"
+              ></app-input>
+              @if ((name | controlError) && registerIsSubmitting()) {
+                <ng-container>
+                  @if (name | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                  @if (name | controlError: "invalidLanguage") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_LANGUAGE }}
+                    </div>
+                  }
+                </ng-container>
+              }
+            </fieldset>
+          }
+          @if (registerForm.get("lastName"); as surname) {
+            <fieldset class="auth__field">
+              <label for="surname" class="field-label">фамилия</label>
+              <app-input
+                size="big"
+                [error]="!!(surname | controlError)"
+                id="surname"
+                type="text"
+                formControlName="lastName"
+                placeholder="Иванов"
+              ></app-input>
+              @if ((surname | controlError) && registerIsSubmitting()) {
+                <ng-container>
+                  @if (surname | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                  @if (surname | controlError: "invalidLanguage") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_LANGUAGE }}
+                    </div>
+                  }
+                </ng-container>
+              }
+            </fieldset>
+          }
+        </div>
 
-<div class="auth register">
-  <div class="auth__greeting">
-    <img
-      class="register__logo"
-      src="/assets/images/shared/logo.svg"
-      alt="logo"
-      loading="lazy"
-      decoding="async"
-    />
-  </div>
-  <form class="auth__wrapper" [formGroup]="registerForm" novalidate (ngSubmit)="onSendForm()">
-    <ng-container>
-      <div class="auth__row">
-        @if (registerForm.get("firstName"); as name) {
+        @if (registerForm.get("birthday"); as birthday) {
           <fieldset class="auth__field">
-            <label for="name" class="field-label">имя</label>
+            <label for="birthday" class="field-label">дата рождения</label>
             <app-input
               size="big"
-              [error]="!!(name | controlError)"
-              id="name"
+              id="birthday"
+              [error]="!!(birthday | controlError)"
               type="text"
-              formControlName="firstName"
-              placeholder="Иван"
+              mask="00.00.0000"
+              placeholder="25.02.2005"
+              formControlName="birthday"
             ></app-input>
-            @if ((name | controlError) && registerIsSubmitting()) {
+            @if ((birthday | controlError) && registerIsSubmitting()) {
               <ng-container>
-                @if (name | controlError: "required") {
+                @if (birthday | controlError: "required") {
                   <div class="text-body-10 error">
                     {{ errorMessage.VALIDATION_REQUIRED }}
                   </div>
                 }
-                @if (name | controlError: "invalidLanguage") {
+                @if (birthday | controlError: "tooYoung") {
+                  <div class="text-body-10 error">
+                    @if (birthday.errors) {
+                      {{ errorMessage.MINIMAL_AGE }}
+                      {{ birthday.errors["tooYoung"]["requiredAge"] }} лет
+                    }
+                  </div>
+                }
+                @if (birthday | controlError: "tooOld") {
                   <div class="text-body-10 error">
-                    {{ errorMessage.VALIDATION_LANGUAGE }}
+                    @if (birthday.errors) {
+                      {{ errorMessage.MAXIMAL_AGE }}
+                      {{ birthday.errors["tooOld"]["requiredAge"] }} лет
+                    }
+                  </div>
+                }
+                @if (birthday | controlError: "invalidDateFormat") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.INVALID_DATE }}
                   </div>
                 }
               </ng-container>
             }
           </fieldset>
         }
-        @if (registerForm.get("lastName"); as surname) {
+        @if (registerForm.get("phoneNumber"); as phoneNumber) {
           <fieldset class="auth__field">
-            <label for="surname" class="field-label">фамилия</label>
+            <label for="links" class="field-label">телефон</label>
             <app-input
               size="big"
-              [error]="!!(surname | controlError)"
-              id="surname"
+              id="phoneNumber"
+              [error]="phoneNumber | controlError"
+              mask="0-000-000-00-00"
               type="text"
-              formControlName="lastName"
-              placeholder="Иванов"
+              placeholder="+79999999999"
+              formControlName="phoneNumber"
+              style="flex-grow: 1"
             ></app-input>
-            @if ((surname | controlError) && registerIsSubmitting()) {
+
+            @if (phoneNumber | controlError) {
               <ng-container>
-                @if (surname | controlError: "required") {
+                @if (phoneNumber | controlError: "required") {
                   <div class="text-body-10 error">
                     {{ errorMessage.VALIDATION_REQUIRED }}
                   </div>
                 }
-                @if (surname | controlError: "invalidLanguage") {
+                @if (phoneNumber | controlError: "pattern") {
+                  <div class="text-body-10 error">Неверный формат телефона</div>
+                }
+              </ng-container>
+            }
+          </fieldset>
+        }
+        @if (registerForm.get("email"); as email) {
+          <fieldset class="auth__field">
+            <label for="email" class="field-label">почта</label>
+            <app-input
+              size="big"
+              [error]="!!(email | controlError)"
+              id="email"
+              type="email"
+              formControlName="email"
+              placeholder="example@example.com"
+            ></app-input>
+            @if ((email | controlError) && registerIsSubmitting()) {
+              <ng-container>
+                @if (email | controlError: "required") {
                   <div class="text-body-10 error">
-                    {{ errorMessage.VALIDATION_LANGUAGE }}
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+                @if (email | controlError: "email") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_EMAIL }}
                   </div>
                 }
               </ng-container>
             }
           </fieldset>
         }
-      </div>
+        @if (registerForm.get("password"); as password) {
+          <fieldset class="auth__field">
+            <label for="passowrd" class="field-label">пароль</label>
+            <app-input
+              class="auth__password-input"
+              size="big"
+              [error]="!!(password | controlError)"
+              id="passowrd"
+              [type]="showPassword() ? 'text' : 'password'"
+              formControlName="password"
+              name="new-password"
+              autocomplete="new-password"
+              placeholder="GJiwoeuhbn120="
+            >
+              <button
+                type="button"
+                class="auth__password-toggle auth__password-toggle--muted"
+                [attr.aria-label]="showPassword() ? 'Скрыть пароль' : 'Показать пароль'"
+                [attr.aria-pressed]="showPassword()"
+                (click)="$event.stopPropagation(); toggleShowPassword('first')"
+              >
+                <i
+                  appIcon
+                  [icon]="showPassword() ? 'eye' : 'eye-off'"
+                  appSquare="15"
+                  aria-hidden="true"
+                ></i>
+              </button>
+            </app-input>
+          </fieldset>
 
-      @if (registerForm.get("birthday"); as birthday) {
-        <fieldset class="auth__field">
-          <label for="birthday" class="field-label">дата рождения</label>
-          <app-input
-            size="big"
-            id="birthday"
-            [error]="!!(birthday | controlError)"
-            type="text"
-            mask="00.00.0000"
-            placeholder="25.02.2005"
-            formControlName="birthday"
-          ></app-input>
-          @if ((birthday | controlError) && registerIsSubmitting()) {
+          <fieldset class="auth__field">
+            <label for="repeatedPassword" class="field-label">повторите пароль</label>
+            <app-input
+              size="big"
+              class="register__repeated-password auth__password-input"
+              [error]="!!(password | controlError)"
+              id="repeatedPassword"
+              [type]="showPasswordRepeat() ? 'text' : 'password'"
+              formControlName="repeatedPassword"
+              name="new-password-confirmation"
+              autocomplete="new-password"
+              placeholder="GJiwoeuhbn120="
+            >
+              <button
+                type="button"
+                class="auth__password-toggle auth__password-toggle--muted"
+                [attr.aria-label]="
+                  showPasswordRepeat() ? 'Скрыть повторный пароль' : 'Показать повторный пароль'
+                "
+                [attr.aria-pressed]="showPasswordRepeat()"
+                (click)="$event.stopPropagation(); toggleShowPassword('repeat')"
+              >
+                <i
+                  appIcon
+                  [icon]="showPasswordRepeat() ? 'eye' : 'eye-off'"
+                  appSquare="15"
+                  aria-hidden="true"
+                ></i>
+              </button>
+            </app-input>
+          </fieldset>
+
+          @if (password | controlError) {
             <ng-container>
-              @if (birthday | controlError: "required") {
+              @if (password | controlError: "required") {
                 <div class="text-body-10 error">
                   {{ errorMessage.VALIDATION_REQUIRED }}
                 </div>
               }
-              @if (birthday | controlError: "tooYoung") {
+              @if (password | controlError: "passwordTooShort") {
                 <div class="text-body-10 error">
-                  @if (birthday.errors) {
-                    {{ errorMessage.MINIMAL_AGE }}
-                    {{ birthday.errors["tooYoung"]["requiredAge"] }} лет
+                  @if (password.errors) {
+                    Пароль должен содержать минимум
+                    {{ password.errors["passwordTooShort"]["requiredLength"] }} символов
                   }
                 </div>
               }
-              @if (birthday | controlError: "tooOld") {
+              @if (password | controlError: "passwordNoUppercase") {
                 <div class="text-body-10 error">
-                  @if (birthday.errors) {
-                    {{ errorMessage.MAXIMAL_AGE }}
-                    {{ birthday.errors["tooOld"]["requiredAge"] }} лет
-                  }
+                  Пароль должен содержать минимум одну заглавную букву (A-Z)
                 </div>
               }
-              @if (birthday | controlError: "invalidDateFormat") {
+              @if (password | controlError: "passwordNoLowercase") {
                 <div class="text-body-10 error">
-                  {{ errorMessage.INVALID_DATE }}
+                  Пароль должен содержать минимум одну строчную букву (a-z)
                 </div>
               }
-            </ng-container>
-          }
-        </fieldset>
-      }
-      @if (registerForm.get("phoneNumber"); as phoneNumber) {
-        <fieldset class="auth__field">
-          <label for="links" class="field-label">телефон</label>
-          <app-input
-            size="big"
-            id="phoneNumber"
-            [error]="phoneNumber | controlError"
-            mask="0-000-000-00-00"
-            type="text"
-            placeholder="+79999999999"
-            formControlName="phoneNumber"
-            style="flex-grow: 1"
-          ></app-input>
-
-          @if (phoneNumber | controlError) {
-            <ng-container>
-              @if (phoneNumber | controlError: "required") {
+              @if (password | controlError: "passwordNoNumber") {
                 <div class="text-body-10 error">
-                  {{ errorMessage.VALIDATION_REQUIRED }}
+                  Пароль должен содержать минимум одну цифру (0-9)
+                </div>
+              }
+              @if (password | controlError: "passwordNoSpecialChar") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум один специальный символ
                 </div>
               }
-              @if (phoneNumber | controlError: "pattern") {
-                <div class="text-body-10 error">Неверный формат телефона</div>
+              @if (password | controlError: "passwordHasSpaces") {
+                <div class="text-body-10 error">Пароль не должен содержать пробелы</div>
               }
-            </ng-container>
-          }
-        </fieldset>
-      }
-      @if (registerForm.get("email"); as email) {
-        <fieldset class="auth__field">
-          <label for="email" class="field-label">почта</label>
-          <app-input
-            size="big"
-            [error]="!!(email | controlError)"
-            id="email"
-            type="email"
-            formControlName="email"
-            placeholder="example@example.com"
-          ></app-input>
-          @if ((email | controlError) && registerIsSubmitting()) {
-            <ng-container>
-              @if (email | controlError: "required") {
+              @if (password | controlError: "passwordHasSequence") {
                 <div class="text-body-10 error">
-                  {{ errorMessage.VALIDATION_REQUIRED }}
+                  Пароль не должен содержать последовательности символов (123456, abcdef и т.д.)
                 </div>
               }
-              @if (email | controlError: "email") {
+              @if (password | controlError: "passwordHasRepeating") {
                 <div class="text-body-10 error">
-                  {{ errorMessage.VALIDATION_EMAIL }}
+                  Пароль не должен содержать более 2 одинаковых символов подряд
+                </div>
+              }
+              @if (password | controlError: "unMatch") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_PASSWORD_UNMATCH }}
                 </div>
               }
             </ng-container>
           }
-        </fieldset>
+        }
+      </ng-container>
+
+      @if (serverErrors()) {
+        <div class="text-body-10 error">
+          @for (e of serverErrors(); track $index) {
+            <p>{{ e }}</p>
+          }
+        </div>
       }
-      @if (registerForm.get("password"); as password) {
-        <fieldset class="auth__field">
-          <label for="passowrd" class="field-label">пароль</label>
-          <app-input
-            class="auth__password-input"
-            size="big"
-            [error]="!!(password | controlError)"
-            id="passowrd"
-            [type]="showPassword() ? 'text' : 'password'"
-            formControlName="password"
-            name="new-password"
-            autocomplete="new-password"
-            placeholder="GJiwoeuhbn120="
-          >
-            <button
-              type="button"
-              class="auth__password-toggle auth__password-toggle--muted"
-              [attr.aria-label]="showPassword() ? 'Скрыть пароль' : 'Показать пароль'"
-              [attr.aria-pressed]="showPassword()"
-              (click)="$event.stopPropagation(); toggleShowPassword('first')"
-            >
-              <i
-                appIcon
-                [icon]="showPassword() ? 'eye' : 'eye-off'"
-                appSquare="15"
-                aria-hidden="true"
-              ></i>
-            </button>
-          </app-input>
-        </fieldset>
 
-        <fieldset class="auth__field">
-          <label for="repeatedPassword" class="field-label">повторите пароль</label>
-          <app-input
-            size="big"
-            class="register__repeated-password auth__password-input"
-            [error]="!!(password | controlError)"
-            id="repeatedPassword"
-            [type]="showPasswordRepeat() ? 'text' : 'password'"
-            formControlName="repeatedPassword"
-            name="new-password-confirmation"
-            autocomplete="new-password"
-            placeholder="GJiwoeuhbn120="
+      <div class="register__agreement">
+        <app-checkbox [(checked)]="registerAgreement"></app-checkbox>
+        <span (click)="registerAgreement.set(!registerAgreement())">
+          я прочитал соглашение и даю согласие на
+          <span class="register__policy-link" (click)="downloadPolicy($event)"
+            >обработку персональных данных</span
           >
-            <button
-              type="button"
-              class="auth__password-toggle auth__password-toggle--muted"
-              [attr.aria-label]="
-                showPasswordRepeat() ? 'Скрыть повторный пароль' : 'Показать повторный пароль'
-              "
-              [attr.aria-pressed]="showPasswordRepeat()"
-              (click)="$event.stopPropagation(); toggleShowPassword('repeat')"
-            >
-              <i
-                appIcon
-                [icon]="showPasswordRepeat() ? 'eye' : 'eye-off'"
-                appSquare="15"
-                aria-hidden="true"
-              ></i>
-            </button>
-          </app-input>
-        </fieldset>
+        </span>
+      </div>
 
-        @if (password | controlError) {
-          <ng-container>
-            @if (password | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
-            @if (password | controlError: "passwordTooShort") {
-              <div class="text-body-10 error">
-                @if (password.errors) {
-                  Пароль должен содержать минимум
-                  {{ password.errors["passwordTooShort"]["requiredLength"] }} символов
+      <div class="register__agreement">
+        <app-checkbox [(checked)]="ageAgreement"></app-checkbox>
+        <span (click)="ageAgreement.set(!ageAgreement())"
+          >нажимая на кнопку подтверждаете, что вам больше 14 лет</span
+        >
+      </div>
+
+      <app-button
+        size="big"
+        [loader]="registerIsSubmitting()"
+        [ngStyle]="{
+          opacity: !(ageAgreement() && registerAgreement) ? '0.6' : '1',
+          cursor: !(ageAgreement() && registerAgreement) ? 'not-allowed' : 'pointer',
+        }"
+        [disabled]="!(ageAgreement() && registerAgreement)"
+        type="submit"
+        customTypographyClass="text-body-12"
+        class="auth__button"
+      >
+        зарегистрироваться
+      </app-button>
+
+      <p class="auth__toggle">
+        если есть аккаунт? - <a [routerLink]="AppRoutes.auth.login()">войдите</a>
+      </p>
+
+      <app-modal [open]="isUserCreationModalError()" (openChange)="dismissCreationError()">
+        <div class="cancel">
+          <i (click)="dismissCreationError()" appIcon icon="cross" class="register__cross"></i>
+
+          <p class="register__title">Привет!</p>
+
+          <p class="text-body-14 register__text">
+            Подтверждение аккаунтов на платформе временно выполняется вручную, процесс может занять
+            до 6 часов.
+          </p>
+
+          <p class="text-body-14 register__text">
+            Как только твой аккаунт будет подтвержден, ты получишь уведомление на почту.
+          </p>
+
+          <p class="text-body-14 register__text">
+            Мы уже решаем эту проблему, чтобы сделать использование платформы максимально комфортным
+            для тебя ❤️
+            <br />
+            <br />
+            По любым вопросам пиши в
+            <a href="https://t.me/procollab_support">аккаунт поддержки в Telegram</a>
+          </p>
+        </div>
+      </app-modal>
+    </form>
+  </div>
+} @else {
+  <div class="auth register">
+    <div class="auth__greeting">
+      <img
+        class="register__logo"
+        src="/assets/images/shared/logo.svg"
+        alt="logo"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+    <form
+      appFormLayout
+      class="auth__wrapper"
+      [formGroup]="registerForm"
+      novalidate
+      (ngSubmit)="onSendForm()"
+    >
+      <ng-container>
+        <div class="auth__row">
+          @if (registerForm.get("firstName"); as name) {
+            <fieldset class="auth__field">
+              <label for="name" class="field-label">имя</label>
+              <app-input
+                size="big"
+                [error]="!!(name | controlError)"
+                id="name"
+                type="text"
+                formControlName="firstName"
+                placeholder="Иван"
+              ></app-input>
+              @if ((name | controlError) && registerIsSubmitting()) {
+                <ng-container>
+                  @if (name | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                  @if (name | controlError: "invalidLanguage") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_LANGUAGE }}
+                    </div>
+                  }
+                </ng-container>
+              }
+            </fieldset>
+          }
+          @if (registerForm.get("lastName"); as surname) {
+            <fieldset class="auth__field">
+              <label for="surname" class="field-label">фамилия</label>
+              <app-input
+                size="big"
+                [error]="!!(surname | controlError)"
+                id="surname"
+                type="text"
+                formControlName="lastName"
+                placeholder="Иванов"
+              ></app-input>
+              @if ((surname | controlError) && registerIsSubmitting()) {
+                <ng-container>
+                  @if (surname | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                  @if (surname | controlError: "invalidLanguage") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_LANGUAGE }}
+                    </div>
+                  }
+                </ng-container>
+              }
+            </fieldset>
+          }
+        </div>
+
+        @if (registerForm.get("birthday"); as birthday) {
+          <fieldset class="auth__field">
+            <label for="birthday" class="field-label">дата рождения</label>
+            <app-input
+              size="big"
+              id="birthday"
+              [error]="!!(birthday | controlError)"
+              type="text"
+              mask="00.00.0000"
+              placeholder="25.02.2005"
+              formControlName="birthday"
+            ></app-input>
+            @if ((birthday | controlError) && registerIsSubmitting()) {
+              <ng-container>
+                @if (birthday | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
                 }
-              </div>
-            }
-            @if (password | controlError: "passwordNoUppercase") {
-              <div class="text-body-10 error">
-                Пароль должен содержать минимум одну заглавную букву (A-Z)
-              </div>
-            }
-            @if (password | controlError: "passwordNoLowercase") {
-              <div class="text-body-10 error">
-                Пароль должен содержать минимум одну строчную букву (a-z)
-              </div>
-            }
-            @if (password | controlError: "passwordNoNumber") {
-              <div class="text-body-10 error">Пароль должен содержать минимум одну цифру (0-9)</div>
-            }
-            @if (password | controlError: "passwordNoSpecialChar") {
-              <div class="text-body-10 error">
-                Пароль должен содержать минимум один специальный символ
-              </div>
-            }
-            @if (password | controlError: "passwordHasSpaces") {
-              <div class="text-body-10 error">Пароль не должен содержать пробелы</div>
-            }
-            @if (password | controlError: "passwordHasSequence") {
-              <div class="text-body-10 error">
-                Пароль не должен содержать последовательности символов (123456, abcdef и т.д.)
-              </div>
+                @if (birthday | controlError: "tooYoung") {
+                  <div class="text-body-10 error">
+                    @if (birthday.errors) {
+                      {{ errorMessage.MINIMAL_AGE }}
+                      {{ birthday.errors["tooYoung"]["requiredAge"] }} лет
+                    }
+                  </div>
+                }
+                @if (birthday | controlError: "tooOld") {
+                  <div class="text-body-10 error">
+                    @if (birthday.errors) {
+                      {{ errorMessage.MAXIMAL_AGE }}
+                      {{ birthday.errors["tooOld"]["requiredAge"] }} лет
+                    }
+                  </div>
+                }
+                @if (birthday | controlError: "invalidDateFormat") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.INVALID_DATE }}
+                  </div>
+                }
+              </ng-container>
             }
-            @if (password | controlError: "passwordHasRepeating") {
-              <div class="text-body-10 error">
-                Пароль не должен содержать более 2 одинаковых символов подряд
-              </div>
+          </fieldset>
+        }
+        @if (registerForm.get("phoneNumber"); as phoneNumber) {
+          <fieldset class="auth__field">
+            <label for="links" class="field-label">телефон</label>
+            <app-input
+              size="big"
+              id="phoneNumber"
+              [error]="phoneNumber | controlError"
+              mask="0-000-000-00-00"
+              type="text"
+              placeholder="+79999999999"
+              formControlName="phoneNumber"
+              style="flex-grow: 1"
+            ></app-input>
+
+            @if (phoneNumber | controlError) {
+              <ng-container>
+                @if (phoneNumber | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+                @if (phoneNumber | controlError: "pattern") {
+                  <div class="text-body-10 error">Неверный формат телефона</div>
+                }
+              </ng-container>
             }
-            @if (password | controlError: "unMatch") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_PASSWORD_UNMATCH }}
-              </div>
+          </fieldset>
+        }
+        @if (registerForm.get("email"); as email) {
+          <fieldset class="auth__field">
+            <label for="email" class="field-label">почта</label>
+            <app-input
+              size="big"
+              [error]="!!(email | controlError)"
+              id="email"
+              type="email"
+              formControlName="email"
+              placeholder="example@example.com"
+            ></app-input>
+            @if ((email | controlError) && registerIsSubmitting()) {
+              <ng-container>
+                @if (email | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+                @if (email | controlError: "email") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_EMAIL }}
+                  </div>
+                }
+              </ng-container>
             }
-          </ng-container>
+          </fieldset>
         }
-      }
-    </ng-container>
+        @if (registerForm.get("password"); as password) {
+          <fieldset class="auth__field">
+            <label for="passowrd" class="field-label">пароль</label>
+            <app-input
+              class="auth__password-input"
+              size="big"
+              [error]="!!(password | controlError)"
+              id="passowrd"
+              [type]="showPassword() ? 'text' : 'password'"
+              formControlName="password"
+              name="new-password"
+              autocomplete="new-password"
+              placeholder="GJiwoeuhbn120="
+            >
+              <button
+                appButton="icon"
+                type="button"
+                class="auth__password-toggle auth__password-toggle--muted"
+                [attr.aria-label]="showPassword() ? 'Скрыть пароль' : 'Показать пароль'"
+                [attr.aria-pressed]="showPassword()"
+                (click)="$event.stopPropagation(); toggleShowPassword('first')"
+              >
+                <i
+                  appIcon
+                  [icon]="showPassword() ? 'eye' : 'eye-off'"
+                  appSquare="15"
+                  aria-hidden="true"
+                ></i>
+              </button>
+            </app-input>
+          </fieldset>
 
-    @if (serverErrors()) {
-      <div class="text-body-10 error">
-        @for (e of serverErrors(); track $index) {
-          <p>{{ e }}</p>
+          <fieldset class="auth__field">
+            <label for="repeatedPassword" class="field-label">повторите пароль</label>
+            <app-input
+              size="big"
+              class="register__repeated-password auth__password-input"
+              [error]="!!(password | controlError)"
+              id="repeatedPassword"
+              [type]="showPasswordRepeat() ? 'text' : 'password'"
+              formControlName="repeatedPassword"
+              name="new-password-confirmation"
+              autocomplete="new-password"
+              placeholder="GJiwoeuhbn120="
+            >
+              <button
+                appButton="icon"
+                type="button"
+                class="auth__password-toggle auth__password-toggle--muted"
+                [attr.aria-label]="
+                  showPasswordRepeat() ? 'Скрыть повторный пароль' : 'Показать повторный пароль'
+                "
+                [attr.aria-pressed]="showPasswordRepeat()"
+                (click)="$event.stopPropagation(); toggleShowPassword('repeat')"
+              >
+                <i
+                  appIcon
+                  [icon]="showPasswordRepeat() ? 'eye' : 'eye-off'"
+                  appSquare="15"
+                  aria-hidden="true"
+                ></i>
+              </button>
+            </app-input>
+          </fieldset>
+
+          @if (password | controlError) {
+            <ng-container>
+              @if (password | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+              @if (password | controlError: "passwordTooShort") {
+                <div class="text-body-10 error">
+                  @if (password.errors) {
+                    Пароль должен содержать минимум
+                    {{ password.errors["passwordTooShort"]["requiredLength"] }} символов
+                  }
+                </div>
+              }
+              @if (password | controlError: "passwordNoUppercase") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну заглавную букву (A-Z)
+                </div>
+              }
+              @if (password | controlError: "passwordNoLowercase") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну строчную букву (a-z)
+                </div>
+              }
+              @if (password | controlError: "passwordNoNumber") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну цифру (0-9)
+                </div>
+              }
+              @if (password | controlError: "passwordNoSpecialChar") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум один специальный символ
+                </div>
+              }
+              @if (password | controlError: "passwordHasSpaces") {
+                <div class="text-body-10 error">Пароль не должен содержать пробелы</div>
+              }
+              @if (password | controlError: "passwordHasSequence") {
+                <div class="text-body-10 error">
+                  Пароль не должен содержать последовательности символов (123456, abcdef и т.д.)
+                </div>
+              }
+              @if (password | controlError: "passwordHasRepeating") {
+                <div class="text-body-10 error">
+                  Пароль не должен содержать более 2 одинаковых символов подряд
+                </div>
+              }
+              @if (password | controlError: "unMatch") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_PASSWORD_UNMATCH }}
+                </div>
+              }
+            </ng-container>
+          }
         }
+      </ng-container>
+
+      @if (serverErrors()) {
+        <div class="text-body-10 error">
+          @for (e of serverErrors(); track $index) {
+            <p>{{ e }}</p>
+          }
+        </div>
+      }
+
+      <div class="register__agreement">
+        <app-checkbox [(checked)]="registerAgreement"></app-checkbox>
+        <span (click)="registerAgreement.set(!registerAgreement())">
+          я прочитал соглашение и даю согласие на
+          <span class="register__policy-link" (click)="downloadPolicy($event)"
+            >обработку персональных данных</span
+          >
+        </span>
       </div>
-    }
 
-    <div class="register__agreement">
-      <app-checkbox [(checked)]="registerAgreement"></app-checkbox>
-      <span (click)="registerAgreement.set(!registerAgreement())">
-        я прочитал соглашение и даю согласие на
-        <span class="register__policy-link" (click)="downloadPolicy($event)"
-          >обработку персональных данных</span
+      <div class="register__agreement">
+        <app-checkbox [(checked)]="ageAgreement"></app-checkbox>
+        <span (click)="ageAgreement.set(!ageAgreement())"
+          >нажимая на кнопку подтверждаете, что вам больше 14 лет</span
         >
-      </span>
-    </div>
+      </div>
 
-    <div class="register__agreement">
-      <app-checkbox [(checked)]="ageAgreement"></app-checkbox>
-      <span (click)="ageAgreement.set(!ageAgreement())"
-        >нажимая на кнопку подтверждаете, что вам больше 14 лет</span
+      <app-button
+        size="big"
+        [loader]="registerIsSubmitting()"
+        [ngStyle]="{
+          opacity: !(ageAgreement() && registerAgreement) ? '0.6' : '1',
+          cursor: !(ageAgreement() && registerAgreement) ? 'not-allowed' : 'pointer',
+        }"
+        [disabled]="!(ageAgreement() && registerAgreement)"
+        type="submit"
+        customTypographyClass="text-body-12"
+        class="auth__button"
       >
-    </div>
-
-    <app-button
-      size="big"
-      [loader]="registerIsSubmitting()"
-      [ngStyle]="{
-        opacity: !(ageAgreement() && registerAgreement) ? '0.6' : '1',
-        cursor: !(ageAgreement() && registerAgreement) ? 'not-allowed' : 'pointer',
-      }"
-      [disabled]="!(ageAgreement() && registerAgreement)"
-      type="submit"
-      customTypographyClass="text-body-12"
-      class="auth__button"
-    >
-      зарегистрироваться
-    </app-button>
+        зарегистрироваться
+      </app-button>
 
-    <p class="auth__toggle">
-      если есть аккаунт? - <a [routerLink]="AppRoutes.auth.login()">войдите</a>
-    </p>
+      <p class="auth__toggle">
+        если есть аккаунт? - <a [routerLink]="AppRoutes.auth.login()">войдите</a>
+      </p>
 
-    <app-modal [open]="isUserCreationModalError()" (openChange)="dismissCreationError()">
-      <div class="cancel">
-        <i (click)="dismissCreationError()" appIcon icon="cross" class="register__cross"></i>
+      <app-modal [open]="isUserCreationModalError()" (openChange)="dismissCreationError()">
+        <div class="cancel">
+          <i (click)="dismissCreationError()" appIcon icon="cross" class="register__cross"></i>
 
-        <p class="register__title">Привет!</p>
+          <p class="register__title">Привет!</p>
 
-        <p class="text-body-14 register__text">
-          Подтверждение аккаунтов на платформе временно выполняется вручную, процесс может занять до
-          6 часов.
-        </p>
+          <p class="text-body-14 register__text">
+            Подтверждение аккаунтов на платформе временно выполняется вручную, процесс может занять
+            до 6 часов.
+          </p>
 
-        <p class="text-body-14 register__text">
-          Как только твой аккаунт будет подтвержден, ты получишь уведомление на почту.
-        </p>
+          <p class="text-body-14 register__text">
+            Как только твой аккаунт будет подтвержден, ты получишь уведомление на почту.
+          </p>
 
-        <p class="text-body-14 register__text">
-          Мы уже решаем эту проблему, чтобы сделать использование платформы максимально комфортным
-          для тебя ❤️
-          <br />
-          <br />
-          По любым вопросам пиши в
-          <a href="https://t.me/procollab_support">аккаунт поддержки в Telegram</a>
-        </p>
-      </div>
-    </app-modal>
-  </form>
-</div>
+          <p class="text-body-14 register__text">
+            Мы уже решаем эту проблему, чтобы сделать использование платформы максимально комфортным
+            для тебя ❤️
+            <br />
+            <br />
+            По любым вопросам пиши в
+            <a href="https://t.me/procollab_support">аккаунт поддержки в Telegram</a>
+          </p>
+        </div>
+      </app-modal>
+    </form>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/auth/register/register.component.scss b/projects/social_platform/src/app/ui/pages/auth/register/register.component.scss
index 7fd2e2a82..73dcc912e 100644
--- a/projects/social_platform/src/app/ui/pages/auth/register/register.component.scss
+++ b/projects/social_platform/src/app/ui/pages/auth/register/register.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/typography";
 @use "styles/responsive";
 
@@ -103,3 +102,23 @@
     color: var(--red) !important;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .register {
+      height: auto;
+      min-height: 100dvh;
+    }
+
+    .register__title {
+      inline-size: auto;
+      max-width: 100%;
+    }
+
+    .register__agreement {
+      gap: 8px;
+      align-items: flex-start;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/auth/register/register.component.ts b/projects/social_platform/src/app/ui/pages/auth/register/register.component.ts
index 07abe7b42..15d2ead71 100644
--- a/projects/social_platform/src/app/ui/pages/auth/register/register.component.ts
+++ b/projects/social_platform/src/app/ui/pages/auth/register/register.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { initial } from "@domain/shared/async-state";
 import { ReactiveFormsModule } from "@angular/forms";
@@ -8,7 +11,7 @@ import { ErrorMessage } from "@core/lib/models/error/error-message";
 import { RouterLink } from "@angular/router";
 import { ButtonComponent, CheckboxComponent, InputComponent } from "@ui/primitives";
 import { ModalComponent } from "@ui/primitives/modal/modal.component";
-import { IconComponent } from "@uilib";
+import { IconComponent, ButtonDirective, FormLayoutDirective } from "@uilib";
 import { CommonModule } from "@angular/common";
 import { AuthRegisterService } from "@api/auth/facades/auth-register.service";
 import { AuthUIInfoService } from "@api/auth/facades/ui/auth-ui-info.service";
@@ -20,6 +23,8 @@ import { AppRoutes } from "@api/paths/app-routes";
   templateUrl: "./register.component.html",
   styleUrl: "./register.component.scss",
   imports: [
+    ButtonDirective,
+    FormLayoutDirective,
     CommonModule,
     ReactiveFormsModule,
     InputComponent,
@@ -34,6 +39,8 @@ import { AppRoutes } from "@api/paths/app-routes";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RegisterComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly authRegisterService = inject(AuthRegisterService);
   private readonly authUIInfoService = inject(AuthUIInfoService);
   private readonly tokenService = inject(TokenService);
diff --git a/projects/social_platform/src/app/ui/pages/auth/reset-password/reset-password.component.html b/projects/social_platform/src/app/ui/pages/auth/reset-password/reset-password.component.html
index dc8adeb63..1dbc2e6da 100644
--- a/projects/social_platform/src/app/ui/pages/auth/reset-password/reset-password.component.html
+++ b/projects/social_platform/src/app/ui/pages/auth/reset-password/reset-password.component.html
@@ -1,42 +1,85 @@
 <!-- @format -->
-
-<form class="auth" [formGroup]="resetForm" (ngSubmit)="onSubmit()">
-  <div class="auth__wrapper">
-    <h1 class="auth__title">Забыли пароль?</h1>
-    <p class="reset__text text-body-12">Чтобы сбросить пароль, введите свой электронный адрес.</p>
-    @if (resetForm.get("email"); as email) {
-      <fieldset class="auth__field">
-        <app-input
-          size="big"
-          [error]="email | controlError"
-          id="email"
-          type="email"
-          formControlName="email"
-          placeholder="Введите почту"
-        ></app-input>
-        @if (email | controlError: "email") {
-          <div class="text-body-10 error">
-            {{ errorMessage.VALIDATION_EMAIL }}
-          </div>
-        }
-        @if (email | controlError: "required") {
-          <div class="text-body-10 error">
-            {{ errorMessage.VALIDATION_REQUIRED }}
-          </div>
-        }
-        @if (errorServer()) {
-          <div class="text-body-10 error">Аккаунт с таким email не зарегистрирован</div>
-        }
-      </fieldset>
-    }
-    <app-button
-      size="big"
-      [loader]="isSubmitting()"
-      type="submit"
-      class="auth__button"
-      customTypographyClass="text-body-12"
-    >
-      Отправить
-    </app-button>
-  </div>
-</form>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <form class="auth" [formGroup]="resetForm" (ngSubmit)="onSubmit()">
+    <div class="auth__wrapper">
+      <h1 class="auth__title">Забыли пароль?</h1>
+      <p class="reset__text text-body-12">Чтобы сбросить пароль, введите свой электронный адрес.</p>
+      @if (resetForm.get("email"); as email) {
+        <fieldset class="auth__field">
+          <app-input
+            size="big"
+            [error]="email | controlError"
+            id="email"
+            type="email"
+            formControlName="email"
+            placeholder="Введите почту"
+          ></app-input>
+          @if (email | controlError: "email") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_EMAIL }}
+            </div>
+          }
+          @if (email | controlError: "required") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_REQUIRED }}
+            </div>
+          }
+          @if (errorServer()) {
+            <div class="text-body-10 error">Аккаунт с таким email не зарегистрирован</div>
+          }
+        </fieldset>
+      }
+      <app-button
+        size="big"
+        [loader]="isSubmitting()"
+        type="submit"
+        class="auth__button"
+        customTypographyClass="text-body-12"
+      >
+        Отправить
+      </app-button>
+    </div>
+  </form>
+} @else {
+  <form appFormLayout class="auth" [formGroup]="resetForm" (ngSubmit)="onSubmit()">
+    <div class="auth__wrapper">
+      <h1 class="auth__title">Забыли пароль?</h1>
+      <p class="reset__text text-body-12">Чтобы сбросить пароль, введите свой электронный адрес.</p>
+      @if (resetForm.get("email"); as email) {
+        <fieldset class="auth__field">
+          <app-input
+            size="big"
+            [error]="email | controlError"
+            id="email"
+            type="email"
+            formControlName="email"
+            placeholder="Введите почту"
+          ></app-input>
+          @if (email | controlError: "email") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_EMAIL }}
+            </div>
+          }
+          @if (email | controlError: "required") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_REQUIRED }}
+            </div>
+          }
+          @if (errorServer()) {
+            <div class="text-body-10 error">Аккаунт с таким email не зарегистрирован</div>
+          }
+        </fieldset>
+      }
+      <app-button
+        size="big"
+        [loader]="isSubmitting()"
+        type="submit"
+        class="auth__button"
+        customTypographyClass="text-body-12"
+      >
+        Отправить
+      </app-button>
+    </div>
+  </form>
+}
diff --git a/projects/social_platform/src/app/ui/pages/auth/reset-password/reset-password.component.ts b/projects/social_platform/src/app/ui/pages/auth/reset-password/reset-password.component.ts
index ff3833591..9bfc992f8 100644
--- a/projects/social_platform/src/app/ui/pages/auth/reset-password/reset-password.component.ts
+++ b/projects/social_platform/src/app/ui/pages/auth/reset-password/reset-password.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FormLayoutDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { ReactiveFormsModule } from "@angular/forms";
 import { ErrorMessage } from "@core/lib/models/error/error-message";
@@ -14,10 +19,18 @@ import { AuthPasswordService } from "@api/auth/facades/auth-password.service";
   templateUrl: "./reset-password.component.html",
   styleUrl: "./reset-password.component.scss",
   providers: [AuthPasswordService, AuthUIInfoService],
-  imports: [ReactiveFormsModule, InputComponent, ButtonComponent, ControlErrorPipe],
+  imports: [
+    FormLayoutDirective,
+    ReactiveFormsModule,
+    InputComponent,
+    ButtonComponent,
+    ControlErrorPipe,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ResetPasswordComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly authUIInfoService = inject(AuthUIInfoService);
   private readonly authPasswordService = inject(AuthPasswordService);
 
diff --git a/projects/social_platform/src/app/ui/pages/auth/set-password/set-password.component.html b/projects/social_platform/src/app/ui/pages/auth/set-password/set-password.component.html
index d28966b0a..85ff9882e 100644
--- a/projects/social_platform/src/app/ui/pages/auth/set-password/set-password.component.html
+++ b/projects/social_platform/src/app/ui/pages/auth/set-password/set-password.component.html
@@ -1,190 +1,389 @@
 <!-- @format -->
-
-<form class="auth set-password" [formGroup]="passwordForm" (ngSubmit)="onSubmit()">
-  <div class="auth__wrapper">
-    <h1 class="text-heading-1-bold">Новый пароль</h1>
-    <p class="text-body-12 set-password__text">Введите новый пароль</p>
-    @if (passwordForm.get("password"); as password) {
-      <fieldset class="auth__field">
-        <app-input
-          size="big"
-          class="set-password__password auth__password-input"
-          [error]="password | controlError"
-          id="password"
-          [type]="showPassword() ? 'text' : 'password'"
-          formControlName="password"
-          name="new-password"
-          autocomplete="new-password"
-          placeholder="пароль"
-        >
-          <button
-            type="button"
-            class="auth__password-toggle auth__password-toggle--muted"
-            [attr.aria-label]="showPassword() ? 'Скрыть пароль' : 'Показать пароль'"
-            [attr.aria-pressed]="showPassword()"
-            (click)="$event.stopPropagation(); toggleShowPassword('first')"
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <form class="auth set-password" [formGroup]="passwordForm" (ngSubmit)="onSubmit()">
+    <div class="auth__wrapper">
+      <h1 class="text-heading-1-bold">Новый пароль</h1>
+      <p class="text-body-12 set-password__text">Введите новый пароль</p>
+      @if (passwordForm.get("password"); as password) {
+        <fieldset class="auth__field">
+          <app-input
+            size="big"
+            class="set-password__password auth__password-input"
+            [error]="password | controlError"
+            id="password"
+            [type]="showPassword() ? 'text' : 'password'"
+            formControlName="password"
+            name="new-password"
+            autocomplete="new-password"
+            placeholder="пароль"
           >
-            <i
-              appIcon
-              [icon]="showPassword() ? 'eye' : 'eye-off'"
-              appSquare="15"
-              aria-hidden="true"
-            ></i>
-          </button>
-        </app-input>
-        @if (credsSubmitInitiated()) {
-          <ng-container>
-            @if (password | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
-            @if (password | controlError: "passwordTooShort") {
-              <div class="text-body-10 error">
-                @if (password.errors) {
-                  Пароль должен содержать минимум
-                  {{ password.errors["passwordTooShort"]["requiredLength"] }} символов
-                }
-              </div>
-            }
-            @if (password | controlError: "passwordNoUppercase") {
-              <div class="text-body-10 error">
-                Пароль должен содержать минимум одну заглавную букву (A-Z)
-              </div>
-            }
-            @if (password | controlError: "passwordNoLowercase") {
-              <div class="text-body-10 error">
-                Пароль должен содержать минимум одну строчную букву (a-z)
-              </div>
-            }
-            @if (password | controlError: "passwordNoNumber") {
-              <div class="text-body-10 error">Пароль должен содержать минимум одну цифру (0-9)</div>
-            }
-            @if (password | controlError: "passwordNoSpecialChar") {
-              <div class="text-body-10 error">
-                Пароль должен содержать минимум один специальный символ
-              </div>
-            }
-            @if (password | controlError: "passwordHasSpaces") {
-              <div class="text-body-10 error">Пароль не должен содержать пробелы</div>
-            }
-            @if (password | controlError: "passwordHasSequence") {
-              <div class="text-body-10 error">
-                Пароль не должен содержать последовательности символов (123456, abcdef и т.д.)
-              </div>
-            }
-            @if (password | controlError: "passwordHasRepeating") {
-              <div class="text-body-10 error">
-                Пароль не должен содержать более 2 одинаковых символов подряд
-              </div>
-            }
-            @if (password | controlError: "unMatch") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_PASSWORD_UNMATCH }}
-              </div>
-            }
-          </ng-container>
-        }
-      </fieldset>
-    }
-    @if (passwordForm.get("passwordRepeated"); as passwordRepeated) {
-      <fieldset class="auth__field">
-        <app-input
-          size="big"
-          class="set-password__password auth__password-input"
-          [error]="passwordRepeated | controlError"
-          id="password_repeated"
-          [type]="showPasswordRepeat() ? 'text' : 'password'"
-          formControlName="passwordRepeated"
-          name="new-password-confirmation"
-          autocomplete="new-password"
-          placeholder="повторите пароль"
-        >
-          <button
-            type="button"
-            class="auth__password-toggle auth__password-toggle--muted"
-            [attr.aria-label]="
-              showPasswordRepeat() ? 'Скрыть повторный пароль' : 'Показать повторный пароль'
-            "
-            [attr.aria-pressed]="showPasswordRepeat()"
-            (click)="$event.stopPropagation(); toggleShowPassword('repeat')"
+            <button
+              type="button"
+              class="auth__password-toggle auth__password-toggle--muted"
+              [attr.aria-label]="showPassword() ? 'Скрыть пароль' : 'Показать пароль'"
+              [attr.aria-pressed]="showPassword()"
+              (click)="$event.stopPropagation(); toggleShowPassword('first')"
+            >
+              <i
+                appIcon
+                [icon]="showPassword() ? 'eye' : 'eye-off'"
+                appSquare="15"
+                aria-hidden="true"
+              ></i>
+            </button>
+          </app-input>
+          @if (credsSubmitInitiated()) {
+            <ng-container>
+              @if (password | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+              @if (password | controlError: "passwordTooShort") {
+                <div class="text-body-10 error">
+                  @if (password.errors) {
+                    Пароль должен содержать минимум
+                    {{ password.errors["passwordTooShort"]["requiredLength"] }} символов
+                  }
+                </div>
+              }
+              @if (password | controlError: "passwordNoUppercase") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну заглавную букву (A-Z)
+                </div>
+              }
+              @if (password | controlError: "passwordNoLowercase") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну строчную букву (a-z)
+                </div>
+              }
+              @if (password | controlError: "passwordNoNumber") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну цифру (0-9)
+                </div>
+              }
+              @if (password | controlError: "passwordNoSpecialChar") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум один специальный символ
+                </div>
+              }
+              @if (password | controlError: "passwordHasSpaces") {
+                <div class="text-body-10 error">Пароль не должен содержать пробелы</div>
+              }
+              @if (password | controlError: "passwordHasSequence") {
+                <div class="text-body-10 error">
+                  Пароль не должен содержать последовательности символов (123456, abcdef и т.д.)
+                </div>
+              }
+              @if (password | controlError: "passwordHasRepeating") {
+                <div class="text-body-10 error">
+                  Пароль не должен содержать более 2 одинаковых символов подряд
+                </div>
+              }
+              @if (password | controlError: "unMatch") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_PASSWORD_UNMATCH }}
+                </div>
+              }
+            </ng-container>
+          }
+        </fieldset>
+      }
+      @if (passwordForm.get("passwordRepeated"); as passwordRepeated) {
+        <fieldset class="auth__field">
+          <app-input
+            size="big"
+            class="set-password__password auth__password-input"
+            [error]="passwordRepeated | controlError"
+            id="password_repeated"
+            [type]="showPasswordRepeat() ? 'text' : 'password'"
+            formControlName="passwordRepeated"
+            name="new-password-confirmation"
+            autocomplete="new-password"
+            placeholder="повторите пароль"
           >
-            <i
-              appIcon
-              [icon]="showPasswordRepeat() ? 'eye' : 'eye-off'"
-              appSquare="15"
-              aria-hidden="true"
-            ></i>
-          </button>
-        </app-input>
-        @if (credsSubmitInitiated()) {
-          <ng-container>
-            @if (passwordRepeated | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
-            @if (passwordRepeated | controlError: "passwordTooShort") {
-              <div class="text-body-10 error">
-                @if (passwordRepeated.errors) {
-                  Пароль должен содержать минимум
-                  {{ passwordRepeated.errors["passwordTooShort"]["requiredLength"] }} символов
-                }
-              </div>
-            }
-            @if (passwordRepeated | controlError: "passwordNoUppercase") {
-              <div class="text-body-10 error">
-                Пароль должен содержать минимум одну заглавную букву (A-Z)
-              </div>
-            }
-            @if (passwordRepeated | controlError: "passwordNoLowercase") {
-              <div class="text-body-10 error">
-                Пароль должен содержать минимум одну строчную букву (a-z)
-              </div>
-            }
-            @if (passwordRepeated | controlError: "passwordNoNumber") {
-              <div class="text-body-10 error">Пароль должен содержать минимум одну цифру (0-9)</div>
-            }
-            @if (passwordRepeated | controlError: "passwordNoSpecialChar") {
-              <div class="text-body-10 error">
-                Пароль должен содержать минимум один специальный символ
-              </div>
-            }
-            @if (passwordRepeated | controlError: "passwordHasSpaces") {
-              <div class="text-body-10 error">Пароль не должен содержать пробелы</div>
-            }
-            @if (passwordRepeated | controlError: "passwordHasSequence") {
-              <div class="text-body-10 error">
-                Пароль не должен содержать последовательности символов (123456, abcdef и т.д.)
-              </div>
-            }
-            @if (passwordRepeated | controlError: "passwordHasRepeating") {
-              <div class="text-body-10 error">
-                Пароль не должен содержать более 2 одинаковых символов подряд
-              </div>
-            }
-            @if (passwordRepeated | controlError: "unMatch") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_PASSWORD_UNMATCH }}
-              </div>
-            }
-          </ng-container>
-        }
-      </fieldset>
-    }
-    @if (errorRequest()) {
-      <div class="text-body-10 error">
-        {{ errorMessage.AUTH_WRONG_AUTH }}
-      </div>
-    }
-    <app-button
-      size="big"
-      [loader]="isSubmitting()"
-      customTypographyClass="text-body-12"
-      class="auth__button"
-      type="submit"
-    >
-      Готово
-    </app-button>
-  </div>
-</form>
+            <button
+              type="button"
+              class="auth__password-toggle auth__password-toggle--muted"
+              [attr.aria-label]="
+                showPasswordRepeat() ? 'Скрыть повторный пароль' : 'Показать повторный пароль'
+              "
+              [attr.aria-pressed]="showPasswordRepeat()"
+              (click)="$event.stopPropagation(); toggleShowPassword('repeat')"
+            >
+              <i
+                appIcon
+                [icon]="showPasswordRepeat() ? 'eye' : 'eye-off'"
+                appSquare="15"
+                aria-hidden="true"
+              ></i>
+            </button>
+          </app-input>
+          @if (credsSubmitInitiated()) {
+            <ng-container>
+              @if (passwordRepeated | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordTooShort") {
+                <div class="text-body-10 error">
+                  @if (passwordRepeated.errors) {
+                    Пароль должен содержать минимум
+                    {{ passwordRepeated.errors["passwordTooShort"]["requiredLength"] }} символов
+                  }
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordNoUppercase") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну заглавную букву (A-Z)
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordNoLowercase") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну строчную букву (a-z)
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordNoNumber") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну цифру (0-9)
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordNoSpecialChar") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум один специальный символ
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordHasSpaces") {
+                <div class="text-body-10 error">Пароль не должен содержать пробелы</div>
+              }
+              @if (passwordRepeated | controlError: "passwordHasSequence") {
+                <div class="text-body-10 error">
+                  Пароль не должен содержать последовательности символов (123456, abcdef и т.д.)
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordHasRepeating") {
+                <div class="text-body-10 error">
+                  Пароль не должен содержать более 2 одинаковых символов подряд
+                </div>
+              }
+              @if (passwordRepeated | controlError: "unMatch") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_PASSWORD_UNMATCH }}
+                </div>
+              }
+            </ng-container>
+          }
+        </fieldset>
+      }
+      @if (errorRequest()) {
+        <div class="text-body-10 error">
+          {{ errorMessage.AUTH_WRONG_AUTH }}
+        </div>
+      }
+      <app-button
+        size="big"
+        [loader]="isSubmitting()"
+        customTypographyClass="text-body-12"
+        class="auth__button"
+        type="submit"
+      >
+        Готово
+      </app-button>
+    </div>
+  </form>
+} @else {
+  <form appFormLayout class="auth set-password" [formGroup]="passwordForm" (ngSubmit)="onSubmit()">
+    <div class="auth__wrapper">
+      <h1 class="text-heading-1-bold">Новый пароль</h1>
+      <p class="text-body-12 set-password__text">Введите новый пароль</p>
+      @if (passwordForm.get("password"); as password) {
+        <fieldset class="auth__field">
+          <app-input
+            size="big"
+            class="set-password__password auth__password-input"
+            [error]="password | controlError"
+            id="password"
+            [type]="showPassword() ? 'text' : 'password'"
+            formControlName="password"
+            name="new-password"
+            autocomplete="new-password"
+            placeholder="пароль"
+          >
+            <button
+              type="button"
+              class="auth__password-toggle auth__password-toggle--muted"
+              [attr.aria-label]="showPassword() ? 'Скрыть пароль' : 'Показать пароль'"
+              [attr.aria-pressed]="showPassword()"
+              (click)="$event.stopPropagation(); toggleShowPassword('first')"
+            >
+              <i
+                appIcon
+                [icon]="showPassword() ? 'eye' : 'eye-off'"
+                appSquare="15"
+                aria-hidden="true"
+              ></i>
+            </button>
+          </app-input>
+          @if (credsSubmitInitiated()) {
+            <ng-container>
+              @if (password | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+              @if (password | controlError: "passwordTooShort") {
+                <div class="text-body-10 error">
+                  @if (password.errors) {
+                    Пароль должен содержать минимум
+                    {{ password.errors["passwordTooShort"]["requiredLength"] }} символов
+                  }
+                </div>
+              }
+              @if (password | controlError: "passwordNoUppercase") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну заглавную букву (A-Z)
+                </div>
+              }
+              @if (password | controlError: "passwordNoLowercase") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну строчную букву (a-z)
+                </div>
+              }
+              @if (password | controlError: "passwordNoNumber") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну цифру (0-9)
+                </div>
+              }
+              @if (password | controlError: "passwordNoSpecialChar") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум один специальный символ
+                </div>
+              }
+              @if (password | controlError: "passwordHasSpaces") {
+                <div class="text-body-10 error">Пароль не должен содержать пробелы</div>
+              }
+              @if (password | controlError: "passwordHasSequence") {
+                <div class="text-body-10 error">
+                  Пароль не должен содержать последовательности символов (123456, abcdef и т.д.)
+                </div>
+              }
+              @if (password | controlError: "passwordHasRepeating") {
+                <div class="text-body-10 error">
+                  Пароль не должен содержать более 2 одинаковых символов подряд
+                </div>
+              }
+              @if (password | controlError: "unMatch") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_PASSWORD_UNMATCH }}
+                </div>
+              }
+            </ng-container>
+          }
+        </fieldset>
+      }
+      @if (passwordForm.get("passwordRepeated"); as passwordRepeated) {
+        <fieldset class="auth__field">
+          <app-input
+            size="big"
+            class="set-password__password auth__password-input"
+            [error]="passwordRepeated | controlError"
+            id="password_repeated"
+            [type]="showPasswordRepeat() ? 'text' : 'password'"
+            formControlName="passwordRepeated"
+            name="new-password-confirmation"
+            autocomplete="new-password"
+            placeholder="повторите пароль"
+          >
+            <button
+              type="button"
+              class="auth__password-toggle auth__password-toggle--muted"
+              [attr.aria-label]="
+                showPasswordRepeat() ? 'Скрыть повторный пароль' : 'Показать повторный пароль'
+              "
+              [attr.aria-pressed]="showPasswordRepeat()"
+              (click)="$event.stopPropagation(); toggleShowPassword('repeat')"
+            >
+              <i
+                appIcon
+                [icon]="showPasswordRepeat() ? 'eye' : 'eye-off'"
+                appSquare="15"
+                aria-hidden="true"
+              ></i>
+            </button>
+          </app-input>
+          @if (credsSubmitInitiated()) {
+            <ng-container>
+              @if (passwordRepeated | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordTooShort") {
+                <div class="text-body-10 error">
+                  @if (passwordRepeated.errors) {
+                    Пароль должен содержать минимум
+                    {{ passwordRepeated.errors["passwordTooShort"]["requiredLength"] }} символов
+                  }
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordNoUppercase") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну заглавную букву (A-Z)
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordNoLowercase") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну строчную букву (a-z)
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordNoNumber") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум одну цифру (0-9)
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordNoSpecialChar") {
+                <div class="text-body-10 error">
+                  Пароль должен содержать минимум один специальный символ
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordHasSpaces") {
+                <div class="text-body-10 error">Пароль не должен содержать пробелы</div>
+              }
+              @if (passwordRepeated | controlError: "passwordHasSequence") {
+                <div class="text-body-10 error">
+                  Пароль не должен содержать последовательности символов (123456, abcdef и т.д.)
+                </div>
+              }
+              @if (passwordRepeated | controlError: "passwordHasRepeating") {
+                <div class="text-body-10 error">
+                  Пароль не должен содержать более 2 одинаковых символов подряд
+                </div>
+              }
+              @if (passwordRepeated | controlError: "unMatch") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_PASSWORD_UNMATCH }}
+                </div>
+              }
+            </ng-container>
+          }
+        </fieldset>
+      }
+      @if (errorRequest()) {
+        <div class="text-body-10 error">
+          {{ errorMessage.AUTH_WRONG_AUTH }}
+        </div>
+      }
+      <app-button
+        size="big"
+        [loader]="isSubmitting()"
+        customTypographyClass="text-body-12"
+        class="auth__button"
+        type="submit"
+      >
+        Готово
+      </app-button>
+    </div>
+  </form>
+}
diff --git a/projects/social_platform/src/app/ui/pages/auth/set-password/set-password.component.ts b/projects/social_platform/src/app/ui/pages/auth/set-password/set-password.component.ts
index 108cddb28..b1eaf1b86 100644
--- a/projects/social_platform/src/app/ui/pages/auth/set-password/set-password.component.ts
+++ b/projects/social_platform/src/app/ui/pages/auth/set-password/set-password.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FormLayoutDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { ReactiveFormsModule } from "@angular/forms";
 import { ControlErrorPipe } from "@corelib";
@@ -14,10 +19,19 @@ import { AuthUIInfoService } from "@api/auth/facades/ui/auth-ui-info.service";
   templateUrl: "./set-password.component.html",
   styleUrl: "./set-password.component.scss",
   providers: [AuthPasswordService, AuthUIInfoService],
-  imports: [ReactiveFormsModule, InputComponent, ButtonComponent, IconComponent, ControlErrorPipe],
+  imports: [
+    FormLayoutDirective,
+    ReactiveFormsModule,
+    InputComponent,
+    ButtonComponent,
+    IconComponent,
+    ControlErrorPipe,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SetPasswordComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly authPasswordService = inject(AuthPasswordService);
   private readonly authUIInfoService = inject(AuthUIInfoService);
 
diff --git a/projects/social_platform/src/app/ui/pages/courses/courses.component.html b/projects/social_platform/src/app/ui/pages/courses/courses.component.html
index f23854695..d0ead3c6f 100644
--- a/projects/social_platform/src/app/ui/pages/courses/courses.component.html
+++ b/projects/social_platform/src/app/ui/pages/courses/courses.component.html
@@ -1,18 +1,37 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="profile">
+    <app-back namespace="курсы" path="/office/program/all"></app-back>
 
-<div class="profile">
-  <app-back namespace="курсы" path="/office/program/all"></app-back>
+    <div class="profile__info">
+      <form class="profile__search" [formGroup]="searchForm">
+        <app-search formControlName="search"></app-search>
+      </form>
 
-  <div class="profile__info">
-    <form class="profile__search" [formGroup]="searchForm">
-      <app-search formControlName="search"></app-search>
-    </form>
+      <router-outlet></router-outlet>
 
-    <router-outlet></router-outlet>
+      <app-soon-card
+        title="аналитика"
+        description="уровень включённости студентов, статистика достижения целей в проектах"
+      ></app-soon-card>
+    </div>
+  </div>
+} @else {
+  <div class="profile">
+    <app-page-header title="курсы" backRoute="/office/program/all" />
+
+    <div class="profile__info">
+      <form appFormLayout class="profile__search" [formGroup]="searchForm">
+        <app-search formControlName="search"></app-search>
+      </form>
+
+      <router-outlet></router-outlet>
 
-    <app-soon-card
-      title="аналитика"
-      description="уровень включённости студентов, статистика достижения целей в проектах"
-    ></app-soon-card>
+      <app-soon-card
+        title="аналитика"
+        description="уровень включённости студентов, статистика достижения целей в проектах"
+      ></app-soon-card>
+    </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/courses.component.ts b/projects/social_platform/src/app/ui/pages/courses/courses.component.ts
index b241d8ef4..703fcb3b0 100644
--- a/projects/social_platform/src/app/ui/pages/courses/courses.component.ts
+++ b/projects/social_platform/src/app/ui/pages/courses/courses.component.ts
@@ -1,9 +1,12 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { BackComponent } from "@uilib";
+import { BackComponent, FormLayoutDirective, PageHeaderComponent } from "@uilib";
 import { SearchComponent } from "@ui/primitives/search/search.component";
 import { FormBuilder, FormGroup, ReactiveFormsModule } from "@angular/forms";
 import { SoonCardComponent } from "@ui/primitives/soon-card/soon-card.component";
@@ -12,6 +15,8 @@ import { SoonCardComponent } from "@ui/primitives/soon-card/soon-card.component"
 @Component({
   selector: "app-track-career",
   imports: [
+    PageHeaderComponent,
+    FormLayoutDirective,
     CommonModule,
     RouterModule,
     BackComponent,
@@ -24,6 +29,8 @@ import { SoonCardComponent } from "@ui/primitives/soon-card/soon-card.component"
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CoursesComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly fb = inject(FormBuilder);
 
   constructor() {
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.html b/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.html
index 1be3b0653..62a892ea6 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.html
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.html
@@ -1,31 +1,52 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="complete">
+    <div class="complete__block">
+      <img alt="complete img" src="/assets/images/courses/complete.svg" />
 
-<div class="complete">
-  <div class="complete__block">
-    <img alt="complete img" src="/assets/images/courses/complete.svg" />
+      <div class="complete__text">
+        <p class="text-body-12-bold">поздравляем!</p>
+        <p class="text-body-12">урок пройден</p>
+      </div>
 
-    <div class="complete__text">
-      <p class="text-body-12-bold">поздравляем!</p>
-      <p class="text-body-12">урок пройден</p>
+      @if (appWidth > 1000) {
+        <app-button
+          class="complete__button"
+          customTypographyClass="text-body-12"
+          size="medium"
+          (click)="routeToCourses()"
+          >отлично</app-button
+        >
+      }
     </div>
+  </div>
+  @if (appWidth < 1000) {
+    <app-button
+      class="complete__button"
+      customTypographyClass="text-body-12"
+      [size]="appWidth > 1000 ? 'medium' : 'big'"
+      (click)="routeToCourses()"
+      >отлично</app-button
+    >
+  }
+} @else {
+  <div class="complete">
+    <div class="complete__block">
+      <img alt="complete img" src="/assets/images/courses/complete.svg" />
+
+      <div class="complete__text">
+        <p class="text-body-12-bold">поздравляем!</p>
+        <p class="text-body-12">урок пройден</p>
+      </div>
 
-    @if (appWidth > 1000) {
       <app-button
         class="complete__button"
         customTypographyClass="text-body-12"
-        size="medium"
+        [size]="appWidth >= 1000 ? 'medium' : 'big'"
         (click)="routeToCourses()"
         >отлично</app-button
       >
-    }
+    </div>
   </div>
-</div>
-@if (appWidth < 1000) {
-  <app-button
-    class="complete__button"
-    customTypographyClass="text-body-12"
-    [size]="appWidth > 1000 ? 'medium' : 'big'"
-    (click)="routeToCourses()"
-    >отлично</app-button
-  >
 }
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.scss b/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.scss
index 6d762f11f..69972a8d0 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.scss
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -37,3 +38,23 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .complete {
+      min-height: 0;
+      padding: 20px;
+    }
+
+    .complete__block {
+      margin: 24px 0;
+    }
+
+    .complete__button {
+      position: static;
+      width: 100%;
+      padding-bottom: env(safe-area-inset-bottom, 0);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.ts b/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.ts
index cea4038db..de33fcad6 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.ts
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -22,6 +25,8 @@ import { AppRoutes } from "@api/paths/app-routes";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TaskCompleteComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   route = inject(ActivatedRoute);
   router = inject(Router);
   courseId = signal<number | null>(null);
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/lesson.component.scss b/projects/social_platform/src/app/ui/pages/courses/lesson/lesson.component.scss
index acc498df6..c1e7ddc99 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/lesson.component.scss
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/lesson.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/typography";
 @use "styles/responsive";
 
@@ -120,3 +121,32 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-mobile {
+    .task__actions {
+      @include responsive.single-column;
+    }
+
+    .task__actions :last-child {
+      width: 100%;
+    }
+
+    .task__main,
+    .task__content,
+    .task__wrapper {
+      min-width: 0;
+    }
+
+    .action__button {
+      position: static;
+      width: 100%;
+    }
+
+    .progress__task {
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/exclude-task/exclude-task.component.scss b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/exclude-task/exclude-task.component.scss
index 52b006396..a98fe9800 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/exclude-task/exclude-task.component.scss
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/exclude-task/exclude-task.component.scss
@@ -1,5 +1,7 @@
+/** @format */
 @use "styles/responsive";
 @use "styles/typography";
+@use "styles/course-task";
 
 .exclude {
   display: flex;
@@ -169,3 +171,8 @@
     @include typography.body-14;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include course-task.responsive-layout("exclude");
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/file-task/file-task.component.scss b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/file-task/file-task.component.scss
index 251dea3b3..7aced2371 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/file-task/file-task.component.scss
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/file-task/file-task.component.scss
@@ -1,5 +1,7 @@
+/** @format */
 @use "styles/responsive";
 @use "styles/typography";
+@use "styles/course-task";
 
 .file-task {
   display: flex;
@@ -201,3 +203,8 @@
     @include typography.body-14;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include course-task.responsive-layout("file-task");
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/image-preview/image-preview.scss b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/image-preview/image-preview.scss
index 7a9a86c09..98838eaf3 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/image-preview/image-preview.scss
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/image-preview/image-preview.scss
@@ -1,3 +1,5 @@
+/** @format */
+
 .image-preview-dialog {
   position: fixed;
   top: 0;
@@ -49,3 +51,12 @@
     transform: scale(1);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .image-preview-dialog {
+    &::backdrop {
+      background: var(--ui-preview-scrim);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.html b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.html
index 5f01d923c..4f1116be8 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.html
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.html
@@ -1,73 +1,147 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="radio" [class.radio--hasContent]="cachedVideoUrl || !!data().imageUrl">
+    <div class="radio__body" [class.radio__body--hasContent]="!!data().imageUrl || cachedVideoUrl">
+      <p class="text-body-12 radio__answer">задание {{ data().order }}</p>
+      @if (cachedVideoUrl) {
+        <iframe
+          [src]="cachedVideoUrl"
+          frameborder="0"
+          allowfullscreen
+          allowtransparency="true"
+        ></iframe>
+      }
+      @if (data().imageUrl) {
+        <div class="radio__block">
+          <img appImagePreview class="radio__img" [src]="data().imageUrl" />
+          <p class="text-body-12-bold">{{ data().title | truncate: 50 }}</p>
+        </div>
+      }
+      @if (!data().imageUrl) {
+        <p class="radio__title text-body-12-bold">{{ data().title | truncate: 110 }}</p>
+      }
 
-<div class="radio" [class.radio--hasContent]="cachedVideoUrl || !!data().imageUrl">
-  <div class="radio__body" [class.radio__body--hasContent]="!!data().imageUrl || cachedVideoUrl">
-    <p class="text-body-12 radio__answer">задание {{ data().order }}</p>
-    @if (cachedVideoUrl) {
-      <iframe
-        [src]="cachedVideoUrl"
-        frameborder="0"
-        allowfullscreen
-        allowtransparency="true"
-      ></iframe>
-    }
-    @if (data().imageUrl) {
-      <div class="radio__block">
-        <img appImagePreview class="radio__img" [src]="data().imageUrl" />
-        <p class="text-body-12-bold">{{ data().title | truncate: 50 }}</p>
-      </div>
-    }
-    @if (!data().imageUrl) {
-      <p class="radio__title text-body-12-bold">{{ data().title | truncate: 110 }}</p>
-    }
+      <p
+        #descEl
+        class="text-body-12 radio__description"
+        [innerHTML]="
+          readFullDescription ? data().bodyText : (data().bodyText | truncateHtml: truncateLimit)
+        "
+      ></p>
+      @if (descriptionExpandable) {
+        <div class="read-more text-body-10" (click)="onToggleDescription(descEl)">
+          {{ readFullDescription ? "скрыть" : "подробнее" }}
+        </div>
+      }
+      @if (data().attachmentUrl) {
+        <app-file-item
+          mode="preview"
+          [type]="'file'"
+          name="файл с заданием"
+          [size]="0"
+          [link]="data().attachmentUrl"
+        ></app-file-item>
+      }
+      @if (hint().length) {
+        <div class="radio__hint" [innerHTML]="hint()"></div>
+      }
+    </div>
 
-    <p
-      #descEl
-      class="text-body-12 radio__description"
-      [innerHTML]="
-        readFullDescription ? data().bodyText : (data().bodyText | truncateHtml: truncateLimit)
-      "
-    ></p>
-    @if (descriptionExpandable) {
-      <div class="read-more text-body-10" (click)="onToggleDescription(descEl)">
-        {{ readFullDescription ? "скрыть" : "подробнее" }}
-      </div>
-    }
-    @if (data().attachmentUrl) {
-      <app-file-item
-        mode="preview"
-        [type]="'file'"
-        name="файл с заданием"
-        [size]="0"
-        [link]="data().attachmentUrl"
-      ></app-file-item>
-    }
-    @if (hint().length) {
-      <div class="radio__hint" [innerHTML]="hint()"></div>
-    }
+    <div
+      class="radio__content"
+      [class.radio__content--hasContent]="!!data().imageUrl || cachedVideoUrl"
+    >
+      <p class="radio__answer text-body-12">ответ</p>
+      <ul class="radio__list">
+        <p class="radio__title text-body-12-bold">{{ data().answerTitle | truncate: 110 }}</p>
+        @for (op of data().options; track op.id) {
+          <li
+            class="radio__item"
+            [class.radio__item--success]="success() && result().answerId === op.id"
+            [class.radio__item--error]="error && result().answerId === op.id"
+            [class.radio__item--disabled]="disabled()"
+            (click)="onSelect(op.id)"
+          >
+            <input type="radio" [id]="op.id" name="radio-group" [disabled]="disabled()" />
+            <label class="text-body-12" [for]="op.id">
+              {{ op.text }}
+            </label>
+          </li>
+        }
+      </ul>
+    </div>
   </div>
+} @else {
+  <div class="radio" [class.radio--hasContent]="cachedVideoUrl || !!data().imageUrl">
+    <div class="radio__body" [class.radio__body--hasContent]="!!data().imageUrl || cachedVideoUrl">
+      <p class="text-body-12 radio__answer">задание {{ data().order }}</p>
+      @if (cachedVideoUrl) {
+        <iframe
+          [src]="cachedVideoUrl"
+          frameborder="0"
+          allowfullscreen
+          allowtransparency="true"
+        ></iframe>
+      }
+      @if (data().imageUrl) {
+        <div class="radio__block">
+          <img appImagePreview class="radio__img" [src]="data().imageUrl" />
+          <p class="text-body-12-bold">{{ data().title | truncate: 50 }}</p>
+        </div>
+      }
+      @if (!data().imageUrl) {
+        <p class="radio__title text-body-12-bold">{{ data().title | truncate: 110 }}</p>
+      }
 
-  <div
-    class="radio__content"
-    [class.radio__content--hasContent]="!!data().imageUrl || cachedVideoUrl"
-  >
-    <p class="radio__answer text-body-12">ответ</p>
-    <ul class="radio__list">
-      <p class="radio__title text-body-12-bold">{{ data().answerTitle | truncate: 110 }}</p>
-      @for (op of data().options; track op.id) {
-        <li
-          class="radio__item"
-          [class.radio__item--success]="success() && result().answerId === op.id"
-          [class.radio__item--error]="error && result().answerId === op.id"
-          [class.radio__item--disabled]="disabled()"
-          (click)="onSelect(op.id)"
-        >
-          <input type="radio" [id]="op.id" name="radio-group" [disabled]="disabled()" />
-          <label class="text-body-12" [for]="op.id">
-            {{ op.text }}
-          </label>
-        </li>
+      <p
+        #descEl
+        class="text-body-12 radio__description"
+        [innerHTML]="
+          readFullDescription ? data().bodyText : (data().bodyText | truncateHtml: truncateLimit)
+        "
+      ></p>
+      @if (descriptionExpandable) {
+        <div class="read-more text-body-10" (click)="onToggleDescription(descEl)">
+          {{ readFullDescription ? "скрыть" : "подробнее" }}
+        </div>
       }
-    </ul>
+      @if (data().attachmentUrl) {
+        <app-file-item
+          mode="preview"
+          [type]="'file'"
+          name="файл с заданием"
+          [size]="0"
+          [link]="data().attachmentUrl"
+        ></app-file-item>
+      }
+      @if (hint().length) {
+        <div class="radio__hint" [innerHTML]="hint()"></div>
+      }
+    </div>
+
+    <div
+      class="radio__content"
+      [class.radio__content--hasContent]="!!data().imageUrl || cachedVideoUrl"
+    >
+      <p class="radio__answer text-body-12">ответ</p>
+      <ul class="radio__list">
+        <p class="radio__title text-body-12-bold">{{ data().answerTitle | truncate: 110 }}</p>
+        @for (op of data().options; track op.id) {
+          <li
+            class="radio__item"
+            [class.radio__item--success]="success() && result().answerId === op.id"
+            [class.radio__item--error]="error && result().answerId === op.id"
+            [class.radio__item--disabled]="disabled()"
+            (click)="onSelect(op.id)"
+          >
+            <input appChoice type="radio" [id]="op.id" name="radio-group" [disabled]="disabled()" />
+            <label class="text-body-12" [for]="op.id">
+              {{ op.text }}
+            </label>
+          </li>
+        }
+      </ul>
+    </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.scss b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.scss
index c750a6209..acdf7abb2 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.scss
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.scss
@@ -1,5 +1,7 @@
+/** @format */
 @use "styles/typography";
 @use "styles/responsive";
+@use "styles/course-task";
 
 .radio {
   display: flex;
@@ -189,3 +191,25 @@
     @include typography.body-14;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-mobile {
+    .radio__item {
+      min-width: 0;
+      min-height: 44px;
+      padding: 4px 0;
+    }
+
+    .radio__item input {
+      flex-shrink: 0;
+    }
+
+    .radio__item label {
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  @include course-task.responsive-layout("radio");
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.ts b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.ts
index 974a5558b..2301d8d2e 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.ts
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/radio-select-task/radio-select-task.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ChoiceDirective } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -26,12 +31,21 @@ import { TruncateHtmlPipe, TruncatePipe } from "@core/public-api";
 /** Компонент задачи с одним вариантом ответа и локальным сбросом выбора при ошибке. */
 @Component({
   selector: "app-radio-select-task",
-  imports: [CommonModule, TruncatePipe, TruncateHtmlPipe, FileItemComponent, ImagePreviewDirective],
+  imports: [
+    ChoiceDirective,
+    CommonModule,
+    TruncatePipe,
+    TruncateHtmlPipe,
+    FileItemComponent,
+    ImagePreviewDirective,
+  ],
   templateUrl: "./radio-select-task.component.html",
   styleUrl: "./radio-select-task.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RadioSelectTaskComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly cdRef = inject(ChangeDetectorRef);
 
   readonly data = input.required<Task>();
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/video-task/info-task.component.scss b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/video-task/info-task.component.scss
index 3941bc493..5b3454eec 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/video-task/info-task.component.scss
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/video-task/info-task.component.scss
@@ -1,4 +1,6 @@
+/** @format */
 @use "styles/responsive";
+@use "styles/course-task";
 
 .video {
   width: 100%;
@@ -112,3 +114,8 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include course-task.responsive-layout("video");
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/write-task/write-task.component.scss b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/write-task/write-task.component.scss
index f7532a49c..24eb2eb09 100644
--- a/projects/social_platform/src/app/ui/pages/courses/lesson/shared/write-task/write-task.component.scss
+++ b/projects/social_platform/src/app/ui/pages/courses/lesson/shared/write-task/write-task.component.scss
@@ -1,4 +1,6 @@
+/** @format */
 @use "styles/responsive";
+@use "styles/course-task";
 
 .write-task {
   display: flex;
@@ -176,3 +178,8 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include course-task.responsive-layout("write-task");
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.html b/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.html
index 5b69e0ea0..407054e4f 100644
--- a/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.html
+++ b/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.html
@@ -1,42 +1,99 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  @if (course()) {
+    <div class="course">
+      <div class="course__cover">
+        <app-avatar [size]="68" [url]="course().avatarUrl"></app-avatar>
+        <app-button
+          customTypographyClass="text-body-10"
+          [color]="isMember() ? 'primary' : isSubs() ? 'red' : 'green'"
+          size="big"
+        >
+          {{
+            isMember()
+              ? "для участников программы"
+              : isSubs()
+                ? "доступно по подписке"
+                : "доступно всем пользователям"
+          }}
+        </app-button>
 
-@if (course()) {
-  <div class="course">
-    <div class="course__cover">
-      <app-avatar [size]="68" [url]="course().avatarUrl"></app-avatar>
-      <app-button
-        customTypographyClass="text-body-10"
-        [color]="isMember() ? 'primary' : isSubs() ? 'red' : 'green'"
-        size="big"
-      >
-        {{
-          isMember()
-            ? "для участников программы"
-            : isSubs()
-              ? "доступно по подписке"
-              : "доступно всем пользователям"
-        }}
-      </app-button>
+        <img alt="course-cover" [src]="course().cardCoverUrl" class="course__image" />
+      </div>
 
-      <img alt="course-cover" [src]="course().cardCoverUrl" class="course__image" />
-    </div>
+      <div class="course__info">
+        <p class="text-body-12">{{ course().title | truncate: 50 }}</p>
+        <p class="text-body-10 course__info--date">
+          {{ course().dateLabel }}
+        </p>
+      </div>
 
-    <div class="course__info">
-      <p class="text-body-12">{{ course().title | truncate: 50 }}</p>
-      <p class="text-body-10 course__info--date">
-        {{ course().dateLabel }}
-      </p>
+      <div class="course__action">
+        @if (isLock()) {
+          <i appIcon icon="lock" appSquare="10"></i>
+        } @else {
+          <p class="text-body-10 course__action--started">
+            {{ course().progressStatus === "not_started" ? "начать" : "продолжить обучение" }}
+          </p>
+          <i appIcon icon="triangle" appSquare="10" class="course__action-icon"></i>
+        }
+      </div>
     </div>
+  }
+} @else {
+  @if (course()) {
+    <div appCard [interactive]="true" class="course">
+      <div class="course__cover">
+        <app-avatar [size]="68" [url]="course().avatarUrl"></app-avatar>
+        @if (desktopLayout()) {
+          <app-button
+            customTypographyClass="text-body-10"
+            [color]="isMember() ? 'primary' : isSubs() ? 'red' : 'green'"
+            size="big"
+          >
+            {{
+              isMember()
+                ? "для участников программы"
+                : isSubs()
+                  ? "доступно по подписке"
+                  : "доступно всем пользователям"
+            }}
+          </app-button>
+        } @else {
+          <app-badge
+            class="course__access"
+            [tone]="isMember() ? 'pending' : isSubs() ? 'declined' : 'success'"
+            [label]="
+              isMember()
+                ? 'для участников программы'
+                : isSubs()
+                  ? 'доступно по подписке'
+                  : 'доступно всем пользователям'
+            "
+          />
+        }
 
-    <div class="course__action">
-      @if (isLock()) {
-        <i appIcon icon="lock" appSquare="10"></i>
-      } @else {
-        <p class="text-body-10 course__action--started">
-          {{ course().progressStatus === "not_started" ? "начать" : "продолжить обучение" }}
+        <img alt="course-cover" [src]="course().cardCoverUrl" class="course__image" />
+      </div>
+
+      <div class="course__info">
+        <p class="text-body-12">{{ course().title | truncate: 50 }}</p>
+        <p class="text-body-10 course__info--date">
+          {{ course().dateLabel }}
         </p>
-        <i appIcon icon="triangle" appSquare="10" class="course__action-icon"></i>
-      }
+      </div>
+
+      <div class="course__action">
+        @if (isLock()) {
+          <i appIcon icon="lock" appSquare="10"></i>
+        } @else {
+          <p class="text-body-10 course__action--started">
+            {{ course().progressStatus === "not_started" ? "начать" : "продолжить обучение" }}
+          </p>
+          <i appIcon icon="triangle" appSquare="10" class="course__action-icon"></i>
+        }
+      </div>
     </div>
-  </div>
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.scss b/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.scss
index 682b0e4ad..bcb3a44c8 100644
--- a/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.scss
+++ b/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.scss
@@ -1,5 +1,7 @@
+/** @format */
 @use "styles/responsive";
 @use "styles/typography";
+@use "styles/ui-foundation";
 
 .course {
   position: relative;
@@ -88,3 +90,26 @@
     color: var(--black);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .course {
+    @include ui-foundation.card;
+  }
+
+  .course__cover app-avatar {
+    position: absolute;
+    top: 35px;
+    left: 24px;
+    z-index: 1;
+    border-radius: 50%;
+    box-shadow: var(--ui-card-hover-shadow);
+  }
+
+  .course__access {
+    position: absolute;
+    top: 15px;
+    right: 24px;
+    max-width: 166px;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.ts b/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.ts
index d7269b4a8..f095d5f6c 100644
--- a/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.ts
+++ b/projects/social_platform/src/app/ui/pages/courses/list/course/course.component.ts
@@ -1,7 +1,20 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { DesktopLayoutService, CardDirective, BadgeComponent } from "@uilib";
+
 import { CommonModule } from "@angular/common";
-import { ChangeDetectionStrategy, Component, input, Input, OnInit, signal } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+  Input,
+  OnInit,
+  signal,
+} from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { IconComponent, ButtonComponent } from "@ui/primitives";
 import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
@@ -19,6 +32,8 @@ import { TruncatePipe } from "@corelib";
 @Component({
   selector: "app-course",
   imports: [
+    BadgeComponent,
+    CardDirective,
     CommonModule,
     RouterModule,
     TruncatePipe,
@@ -31,6 +46,9 @@ import { TruncatePipe } from "@corelib";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CourseComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
   readonly course = input.required<CourseCard>();
 
   ngOnInit(): void {
diff --git a/projects/social_platform/src/app/ui/pages/courses/list/list.component.html b/projects/social_platform/src/app/ui/pages/courses/list/list.component.html
index d6735a9e6..b58515714 100644
--- a/projects/social_platform/src/app/ui/pages/courses/list/list.component.html
+++ b/projects/social_platform/src/app/ui/pages/courses/list/list.component.html
@@ -1,17 +1,41 @@
 <!-- @format -->
-
-<div class="courses">
-  @if (loading()) {
-    <div class="loading">
-      <app-loader size="125px" color="var(--accent)"></app-loader>
-    </div>
-  } @else if (coursesList().length) {
-    <div class="courses__list">
-      @for (course of coursesList(); track course.id) {
-        <a [routerLink]="AppRoutes.courses.detail(course.id)">
-          <app-course [course]="course"></app-course>
-        </a>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="courses">
+    @if (loading()) {
+      <div class="loading">
+        <app-loader size="125px" color="var(--accent)"></app-loader>
+      </div>
+    } @else if (coursesList().length) {
+      <div class="courses__list">
+        @for (course of coursesList(); track course.id) {
+          <a [routerLink]="AppRoutes.courses.detail(course.id)">
+            <app-course [course]="course"></app-course>
+          </a>
+        }
+      </div>
+    }
+  </div>
+} @else {
+  <div class="courses">
+    @if (loading()) {
+      @if (desktopLayout()) {
+        <div class="loading"><app-loader size="125px" color="var(--accent)"></app-loader></div>
+      } @else {
+        <app-state kind="loading" />
       }
-    </div>
-  }
-</div>
+    } @else if (coursesList().length) {
+      <div class="courses__list">
+        @for (course of coursesList(); track course.id) {
+          <a [routerLink]="AppRoutes.courses.detail(course.id)">
+            <app-course [course]="course"></app-course>
+          </a>
+        }
+      </div>
+    } @else {
+      @if (!desktopLayout()) {
+        <app-state title="Ничего не найдено" />
+      }
+    }
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/courses/list/list.component.ts b/projects/social_platform/src/app/ui/pages/courses/list/list.component.ts
index 1028a6292..3d1572ce1 100644
--- a/projects/social_platform/src/app/ui/pages/courses/list/list.component.ts
+++ b/projects/social_platform/src/app/ui/pages/courses/list/list.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { DesktopLayoutService, StateComponent } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
@@ -12,13 +17,16 @@ import { AppRoutes } from "@api/paths/app-routes";
 /** Страница списка курсов. */
 @Component({
   selector: "app-list",
-  imports: [CommonModule, RouterModule, CourseComponent, LoaderComponent],
+  imports: [StateComponent, CommonModule, RouterModule, CourseComponent, LoaderComponent],
   templateUrl: "./list.component.html",
   styleUrl: "./list.component.scss",
   providers: [CoursesListInfoService, CoursesListUIInfoService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CoursesListComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
   private readonly coursesListInfoService = inject(CoursesListInfoService);
   private readonly coursesListUIInfoService = inject(CoursesListUIInfoService);
 
diff --git a/projects/social_platform/src/app/ui/pages/error/error-code/error-code.component.scss b/projects/social_platform/src/app/ui/pages/error/error-code/error-code.component.scss
index e1c43e495..9bf8a59f9 100644
--- a/projects/social_platform/src/app/ui/pages/error/error-code/error-code.component.scss
+++ b/projects/social_platform/src/app/ui/pages/error/error-code/error-code.component.scss
@@ -1,3 +1,6 @@
+/** @format */
+@use "styles/responsive";
+
 .error {
   display: flex;
   align-items: center;
@@ -11,7 +14,12 @@
     height: 580px;
     margin-bottom: 20px;
     color: var(--error-code);
-    background: radial-gradient(50% 50% at 50% 50%, rgb(0 200 147 / 51%) 0%, rgb(0 200 147 / 0%) 100%);
+    /* stylelint-disable-next-line declaration-colon-newline-after */
+    background: radial-gradient(
+      50% 50% at 50% 50%,
+      rgb(0 200 147 / 51%) 0%,
+      rgb(0 200 147 / 0%) 100%
+    );
   }
 
   &__title {
@@ -25,3 +33,39 @@
     text-align: center;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .error {
+    &__code {
+      /* stylelint-disable-next-line declaration-colon-newline-after */
+      background: radial-gradient(
+        50% 50% at 50% 50%,
+        var(--ui-success-glow) 0%,
+        var(--ui-success-glow-end) 100%
+      );
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    .error {
+      padding: 24px var(--page-gutter);
+    }
+
+    .error__body {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .error__code {
+      width: 100%;
+      height: auto;
+      min-height: 240px;
+      font-size: clamp(96px, 30vw, 240px);
+    }
+
+    .error__link {
+      min-height: 44px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/feed/feed.component.html b/projects/social_platform/src/app/ui/pages/feed/feed.component.html
index d8558d3a6..a9866effc 100644
--- a/projects/social_platform/src/app/ui/pages/feed/feed.component.html
+++ b/projects/social_platform/src/app/ui/pages/feed/feed.component.html
@@ -1,43 +1,91 @@
 <!-- @format -->
-
-<div class="page">
-  <app-feed-filter class="page__filter"></app-feed-filter>
-  <div #feedRoot class="page__feed">
-    @if (feedItems().length > 0) {
-      @for (item of feedItems(); track item.typeModel + ":" + item.content.id) {
-        @if (item.typeModel === "vacancy") {
-          <app-open-vacancy
-            class="page__item"
-            [attr.data-key]="item.typeModel + ':' + item.content.id"
-            [feedItem]="item.content"
-            [publishedAt]="item.publishedAt || item.content.datetimeCreated"
-          ></app-open-vacancy>
-        } @else if (item.typeModel === "project") {
-          <app-new-project
-            class="page__item"
-            [attr.data-key]="item.typeModel + ':' + item.content.id"
-            [feedItem]="item.content"
-            [publishedAt]="item.publishedAt || ''"
-          ></app-new-project>
-        } @else if (item.typeModel === "news") {
-          <app-news-card
-            class="page__item"
-            [attr.data-key]="item.typeModel + ':' + item.content.id"
-            [feedItem]="item.content"
-            [contentId]="item.content.contentObject.id"
-            [resourceLink]="resourceLink(item)"
-            [feedType]="isPersonNews(item) ? 'people' : 'project'"
-            [feedIndustryId]="item.content.contentObject.industry"
-            [publishedAt]="item.publishedAt || item.content.datetimeCreated"
-            (like)="onLike($event)"
-          ></app-news-card>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="page">
+    <app-feed-filter class="page__filter"></app-feed-filter>
+    <div #feedRoot class="page__feed">
+      @if (feedItems().length > 0) {
+        @for (item of feedItems(); track item.typeModel + ":" + item.content.id) {
+          @if (item.typeModel === "vacancy") {
+            <app-open-vacancy
+              class="page__item"
+              [attr.data-key]="item.typeModel + ':' + item.content.id"
+              [feedItem]="item.content"
+              [publishedAt]="item.publishedAt || item.content.datetimeCreated"
+            ></app-open-vacancy>
+          } @else if (item.typeModel === "project") {
+            <app-new-project
+              class="page__item"
+              [attr.data-key]="item.typeModel + ':' + item.content.id"
+              [feedItem]="item.content"
+              [publishedAt]="item.publishedAt || ''"
+            ></app-new-project>
+          } @else if (item.typeModel === "news") {
+            <app-news-card
+              class="page__item"
+              [attr.data-key]="item.typeModel + ':' + item.content.id"
+              [feedItem]="item.content"
+              [contentId]="item.content.contentObject.id"
+              [resourceLink]="resourceLink(item)"
+              [feedType]="isPersonNews(item) ? 'people' : 'project'"
+              [feedIndustryId]="item.content.contentObject.industry"
+              [publishedAt]="item.publishedAt || item.content.datetimeCreated"
+              (like)="onLike($event)"
+            ></app-news-card>
+          }
         }
+      } @else {
+        <div class="page__feed--no-items">
+          <i appIcon icon="empty-chat" appSquare="38"></i>
+          <p class="text-body-12">в данном разделе пока нет новостей</p>
+        </div>
       }
-    } @else {
-      <div class="page__feed--no-items">
-        <i appIcon icon="empty-chat" appSquare="38"></i>
-        <p class="text-body-12">в данном разделе пока нет новостей</p>
-      </div>
-    }
+    </div>
   </div>
-</div>
+} @else {
+  <div class="page">
+    <app-feed-filter class="page__filter"></app-feed-filter>
+    <div #feedRoot class="page__feed">
+      @if (feedItems().length > 0) {
+        @for (item of feedItems(); track item.typeModel + ":" + item.content.id) {
+          @if (item.typeModel === "vacancy") {
+            <app-open-vacancy
+              class="page__item"
+              [attr.data-key]="item.typeModel + ':' + item.content.id"
+              [feedItem]="item.content"
+              [publishedAt]="item.publishedAt || item.content.datetimeCreated"
+            ></app-open-vacancy>
+          } @else if (item.typeModel === "project") {
+            <app-new-project
+              class="page__item"
+              [attr.data-key]="item.typeModel + ':' + item.content.id"
+              [feedItem]="item.content"
+              [publishedAt]="item.publishedAt || ''"
+            ></app-new-project>
+          } @else if (item.typeModel === "news") {
+            <app-news-card
+              class="page__item"
+              [attr.data-key]="item.typeModel + ':' + item.content.id"
+              [feedItem]="item.content"
+              [contentId]="item.content.contentObject.id"
+              [resourceLink]="resourceLink(item)"
+              [feedType]="isPersonNews(item) ? 'people' : 'project'"
+              [feedIndustryId]="item.content.contentObject.industry"
+              [publishedAt]="item.publishedAt || item.content.datetimeCreated"
+              (like)="onLike($event)"
+            ></app-news-card>
+          }
+        }
+      } @else {
+        @if (desktopLayout()) {
+          <div class="page__feed--no-items">
+            <i appIcon icon="empty-chat" appSquare="38"></i>
+            <p class="text-body-12">в данном разделе пока нет новостей</p>
+          </div>
+        } @else {
+          <app-state title="в данном разделе пока нет новостей" />
+        }
+      }
+    </div>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/feed/feed.component.scss b/projects/social_platform/src/app/ui/pages/feed/feed.component.scss
index bb606b5b7..aae737287 100644
--- a/projects/social_platform/src/app/ui/pages/feed/feed.component.scss
+++ b/projects/social_platform/src/app/ui/pages/feed/feed.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 
 .page {
@@ -39,3 +38,35 @@
     min-width: 0;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .page {
+    &__feed {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+
+      @media (max-width: 999px) {
+        grid-template-columns: minmax(0, 1fr);
+      }
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    .page {
+      padding-top: 24px;
+      margin: 0 var(--page-gutter);
+    }
+
+    .filter {
+      position: fixed;
+      z-index: 300;
+    }
+
+    .filter__body {
+      min-height: 0;
+      max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
+      padding-bottom: env(safe-area-inset-bottom, 0);
+      overscroll-behavior: contain;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/feed/feed.component.ts b/projects/social_platform/src/app/ui/pages/feed/feed.component.ts
index f1ba9d926..0d1e74586 100644
--- a/projects/social_platform/src/app/ui/pages/feed/feed.component.ts
+++ b/projects/social_platform/src/app/ui/pages/feed/feed.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { DesktopLayoutService, StateComponent } from "@uilib";
+
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -28,6 +33,7 @@ import { FeedItem } from "@domain/feed/feed-item.model";
   templateUrl: "./feed.component.html",
   styleUrl: "./feed.component.scss",
   imports: [
+    StateComponent,
     CommonModule,
     IconComponent,
     NewProjectComponent,
@@ -38,6 +44,9 @@ import { FeedItem } from "@domain/feed/feed-item.model";
   providers: [FeedInfoService, FeedUIInfoService, ProjectTeamUIService],
 })
 export class FeedComponent implements AfterViewInit, OnDestroy {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
   readonly feedRoot = viewChild<ElementRef<HTMLElement>>("feedRoot");
 
   private readonly feedInfoService = inject(FeedInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.html b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.html
index c4ee6e578..9afb57e73 100644
--- a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.html
+++ b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.html
@@ -1,61 +1,133 @@
 <!-- @format -->
-<article class="card">
-  <div class="card__meta feed-card__meta">
-    <span class="card__type feed-card__type">Новая вакансия</span>
-    @if (publishedAt()) {
-      <time class="card__date feed-card__date" [attr.datetime]="publishedAt()">
-        {{ publishedAt() | dayjs: "format" : "DD.MM.YYYY" }}
-      </time>
-    }
-  </div>
-  <div class="card__source feed-card__source">
-    @if (feedItem().project; as project) {
-      <app-avatar class="feed-card__avatar" [size]="40" [url]="project.imageAddress"></app-avatar>
-      <div class="card__source-text feed-card__source-text">
-        <span class="feed-card__eyebrow">Проект / компания</span>
-        <a
-          class="feed-card__source-name"
-          [title]="project.name"
-          [routerLink]="AppRoutes.projects.detail(project.id)"
-          >{{ project.name }}</a
-        >
-      </div>
-    }
-  </div>
-  <h3 class="card__title feed-card__title" [title]="feedItem().role">{{ feedItem().role }}</h3>
-  <p
-    class="card__description feed-card__description"
-    [innerHTML]="feedItem().description || '' | parseLinks | parseBreaks"
-  ></p>
-  <div class="feed-card__metadata">
-    @if (feedItem().requiredSkills.length) {
-      <ul class="card__skills feed-card__skills" aria-label="Навыки вакансии">
-        @for (skill of feedItem().requiredSkills.slice(0, 3); track skill.id) {
-          <li class="card__skill feed-card__chip feed-card__chip--skill" [title]="skill.name">
-            {{ skill.name }}
-          </li>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <article class="card">
+    <div class="card__meta feed-card__meta">
+      <span class="card__type feed-card__type">Новая вакансия</span>
+      @if (publishedAt()) {
+        <time class="card__date feed-card__date" [attr.datetime]="publishedAt()">
+          {{ publishedAt() | dayjs: "format" : "DD.MM.YYYY" }}
+        </time>
+      }
+    </div>
+    <div class="card__source feed-card__source">
+      @if (feedItem().project; as project) {
+        <app-avatar class="feed-card__avatar" [size]="40" [url]="project.imageAddress"></app-avatar>
+        <div class="card__source-text feed-card__source-text">
+          <span class="feed-card__eyebrow">Проект / компания</span>
+          <a
+            class="feed-card__source-name"
+            [title]="project.name"
+            [routerLink]="AppRoutes.projects.detail(project.id)"
+            >{{ project.name }}</a
+          >
+        </div>
+      }
+    </div>
+    <h3 class="card__title feed-card__title" [title]="feedItem().role">{{ feedItem().role }}</h3>
+    <p
+      class="card__description feed-card__description"
+      [innerHTML]="feedItem().description || '' | parseLinks | parseBreaks"
+    ></p>
+    <div class="feed-card__metadata">
+      @if (feedItem().requiredSkills.length) {
+        <ul class="card__skills feed-card__skills" aria-label="Навыки вакансии">
+          @for (skill of feedItem().requiredSkills.slice(0, 3); track skill.id) {
+            <li class="card__skill feed-card__chip feed-card__chip--skill" [title]="skill.name">
+              {{ skill.name }}
+            </li>
+          }
+          @if (feedItem().requiredSkills.length > 3) {
+            <li
+              class="feed-card__chip"
+              [attr.aria-label]="'Ещё навыков: ' + (feedItem().requiredSkills.length - 3)"
+            >
+              +{{ feedItem().requiredSkills.length - 3 }}
+            </li>
+          }
+        </ul>
+      }
+      @if (feedItem().project.industry; as industryId) {
+        @if (industryRepository.getOne(industryId); as industry) {
+          <span
+            class="card__industry feed-card__chip feed-card__chip--industry"
+            [title]="industry.name"
+            >{{ industry.name }}</span
+          >
+        }
+      }
+    </div>
+    <a class="card__cta feed-card__cta" [routerLink]="AppRoutes.office.vacancy(feedItem().id)"
+      >Подробнее о вакансии</a
+    >
+  </article>
+} @else {
+  <article class="card">
+    <div class="card__meta feed-card__meta">
+      <span class="card__type feed-card__type">Новая вакансия</span>
+      @if (publishedAt()) {
+        <time class="card__date feed-card__date" [attr.datetime]="publishedAt()">
+          {{ publishedAt() | dayjs: "format" : "DD.MM.YYYY" }}
+        </time>
+      }
+    </div>
+    <div class="card__source feed-card__source">
+      @if (feedItem().project; as project) {
+        <app-avatar class="feed-card__avatar" [size]="40" [url]="project.imageAddress"></app-avatar>
+        <div class="card__source-text feed-card__source-text">
+          <span class="feed-card__eyebrow">Проект / компания</span>
+          <a
+            class="feed-card__source-name"
+            [title]="project.name"
+            [routerLink]="AppRoutes.projects.detail(project.id)"
+            >{{ project.name }}</a
+          >
+        </div>
+      }
+    </div>
+    <h3 class="card__title feed-card__title" [title]="feedItem().role">{{ feedItem().role }}</h3>
+    <p
+      class="card__description feed-card__description"
+      [innerHTML]="feedItem().description || '' | parseLinks | parseBreaks"
+    ></p>
+    <div class="feed-card__metadata">
+      @if (feedItem().requiredSkills.length) {
+        @if (desktopLayout()) {
+          <ul class="card__skills feed-card__skills" aria-label="Навыки вакансии">
+            @for (skill of feedItem().requiredSkills.slice(0, 3); track skill.id) {
+              <li class="card__skill feed-card__chip feed-card__chip--skill" [title]="skill.name">
+                {{ skill.name }}
+              </li>
+            }
+            @if (feedItem().requiredSkills.length > 3) {
+              <li
+                class="feed-card__chip"
+                [attr.aria-label]="'Ещё навыков: ' + (feedItem().requiredSkills.length - 3)"
+              >
+                +{{ feedItem().requiredSkills.length - 3 }}
+              </li>
+            }
+          </ul>
+        } @else {
+          <app-vacancy-skills
+            class="card__skills"
+            [skills]="feedItem().requiredSkills"
+            [limit]="3"
+          />
         }
-        @if (feedItem().requiredSkills.length > 3) {
-          <li
-            class="feed-card__chip"
-            [attr.aria-label]="'Ещё навыков: ' + (feedItem().requiredSkills.length - 3)"
+      }
+      @if (feedItem().project.industry; as industryId) {
+        @if (industryRepository.getOne(industryId); as industry) {
+          <span
+            class="card__industry feed-card__chip feed-card__chip--industry"
+            [title]="industry.name"
+            >{{ industry.name }}</span
           >
-            +{{ feedItem().requiredSkills.length - 3 }}
-          </li>
         }
-      </ul>
-    }
-    @if (feedItem().project.industry; as industryId) {
-      @if (industryRepository.getOne(industryId); as industry) {
-        <span
-          class="card__industry feed-card__chip feed-card__chip--industry"
-          [title]="industry.name"
-          >{{ industry.name }}</span
-        >
-      }
-    }
-  </div>
-  <a class="card__cta feed-card__cta" [routerLink]="AppRoutes.office.vacancy(feedItem().id)"
-    >Подробнее о вакансии</a
-  >
-</article>
+      }
+    </div>
+    <a class="card__cta feed-card__cta" [routerLink]="AppRoutes.office.vacancy(feedItem().id)"
+      >Подробнее о вакансии</a
+    >
+  </article>
+}
diff --git a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.spec.ts b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.spec.ts
index 8c147c26e..c1d80d69c 100644
--- a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.spec.ts
@@ -37,7 +37,9 @@ describe("OpenVacancyComponent", () => {
       "Создание интерфейсов",
     );
     expect(
-      Array.from(element.querySelectorAll(".card__skill")).map(node => node.textContent?.trim()),
+      Array.from(element.querySelectorAll(".card__skills app-tag")).map(node =>
+        node.textContent?.trim(),
+      ),
     ).toEqual(["Angular", "TypeScript"]);
     expect(element.querySelector(".card__industry")?.textContent?.trim()).toBe("IT");
     expect(element.querySelector(".card__cta")?.textContent).toContain("Подробнее о вакансии");
@@ -53,13 +55,21 @@ describe("OpenVacancyComponent", () => {
     });
     fixture.detectChanges();
     expect(
-      Array.from(element.querySelectorAll(".card__skills li")).map(node =>
+      Array.from(element.querySelectorAll(".card__skills app-tag")).map(node =>
         node.textContent?.trim(),
       ),
-    ).toEqual(["QA", "Postman", "API", "+3"]);
-    expect(element.querySelector(".card__skills li:last-child")?.getAttribute("aria-label")).toBe(
-      "Ещё навыков: 3",
-    );
+    ).toEqual(["QA", "Postman", "API"]);
+    const toggle = element.querySelector<HTMLButtonElement>(".skills__toggle")!;
+    expect(toggle.textContent?.trim()).toBe("Ещё +3");
+    expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    toggle.click();
+    fixture.detectChanges();
+    expect(
+      Array.from(element.querySelectorAll(".card__skills app-tag")).map(node =>
+        node.textContent?.trim(),
+      ),
+    ).toEqual(["QA", "Postman", "API", "SQL", "Git", "Аналитика"]);
+    expect(toggle.getAttribute("aria-expanded")).toBe("true");
     expect(fixture.componentInstance.feedItem().requiredSkills).toHaveLength(6);
   });
 });
diff --git a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.ts b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.ts
index 512e4bb9d..d557fa83b 100644
--- a/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.ts
+++ b/projects/social_platform/src/app/ui/pages/feed/open-vacancy/open-vacancy.component.ts
@@ -1,5 +1,9 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { DesktopLayoutService } from "@uilib";
 import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
 import { RouterLink } from "@angular/router";
 import { DayjsPipe, ParseBreaksPipe, ParseLinksPipe } from "@corelib";
@@ -7,16 +11,27 @@ import { Vacancy } from "@domain/vacancy/vacancy.model";
 import { AppRoutes } from "@api/paths/app-routes";
 import { IndustryRepositoryPort } from "@domain/industry/ports/industry.repository.port";
 import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
+import { VacancySkillsComponent } from "@ui/widgets/vacancy-skills/vacancy-skills.component";
 
 /** Карточка вакансии в ленте: источник, роль, описание, навыки и переход к вакансии. */
 @Component({
   selector: "app-open-vacancy",
-  imports: [RouterLink, DayjsPipe, ParseLinksPipe, ParseBreaksPipe, AvatarComponent],
+  imports: [
+    RouterLink,
+    DayjsPipe,
+    ParseLinksPipe,
+    ParseBreaksPipe,
+    AvatarComponent,
+    VacancySkillsComponent,
+  ],
   templateUrl: "./open-vacancy.component.html",
   styleUrl: "./open-vacancy.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OpenVacancyComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
   readonly feedItem = input.required<Vacancy>();
   readonly publishedAt = input<string>("");
 
diff --git a/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.html b/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.html
index cff162f7d..39463c3aa 100644
--- a/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.html
+++ b/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.html
@@ -1,37 +1,79 @@
 <!-- @format -->
-<a
-  class="member-card"
-  [routerLink]="AppRoutes.profile.detail(member().id)"
-  [attr.aria-label]="'Открыть профиль: ' + name()"
->
-  <app-avatar class="member-card__photo" [url]="member().personal?.avatar || ''" [size]="70" />
-  <div class="member-card__content">
-    <h3 class="member-card__name" [title]="name()">
-      <span>{{ member().firstName }}</span
-      ><span>{{ member().lastName }}</span>
-    </h3>
-    <p class="member-card__secondary" [title]="member().personal?.speciality || ''">
-      {{ member().personal?.speciality }}
-      @if (member().personal?.birthday; as birthday) {
-        {{ member().personal?.speciality ? " • " : "" }}{{ birthday | yearsFromBirthday }}
-      }
-    </p>
-    <div class="member-card__skills-area">
-      <ul class="member-card__skills" aria-label="Навыки">
-        @if (primarySkill(); as skill) {
-          <li class="member-card__skill" [title]="skill.name">{{ skill.name }}</li>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <a
+    class="member-card"
+    [routerLink]="AppRoutes.profile.detail(member().id)"
+    [attr.aria-label]="'Открыть профиль: ' + name()"
+  >
+    <app-avatar class="member-card__photo" [url]="member().personal?.avatar || ''" [size]="70" />
+    <div class="member-card__content">
+      <h3 class="member-card__name" [title]="name()">
+        <span>{{ member().firstName }}</span
+        ><span>{{ member().lastName }}</span>
+      </h3>
+      <p class="member-card__secondary" [title]="member().personal?.speciality || ''">
+        {{ member().personal?.speciality }}
+        @if (member().personal?.birthday; as birthday) {
+          {{ member().personal?.speciality ? " • " : "" }}{{ birthday | yearsFromBirthday }}
         }
-        @if (hiddenCount()) {
-          <li
-            class="member-card__more"
-            [title]="hiddenNames()"
-            [attr.aria-label]="'Ещё ' + hiddenCount() + ': ' + hiddenNames()"
-          >
-            +{{ hiddenCount() }}
-          </li>
+      </p>
+      <div class="member-card__skills-area">
+        <ul class="member-card__skills" aria-label="Навыки">
+          @if (primarySkill(); as skill) {
+            <li class="member-card__skill" [title]="skill.name">{{ skill.name }}</li>
+          }
+          @if (hiddenCount()) {
+            <li
+              class="member-card__more"
+              [title]="hiddenNames()"
+              [attr.aria-label]="'Ещё ' + hiddenCount() + ': ' + hiddenNames()"
+            >
+              +{{ hiddenCount() }}
+            </li>
+          }
+        </ul>
+      </div>
+      <span class="member-card__action">Профиль</span>
+    </div>
+  </a>
+} @else {
+  <a
+    appCard
+    [interactive]="true"
+    class="member-card"
+    [routerLink]="AppRoutes.profile.detail(member().id)"
+    [attr.aria-label]="'Открыть профиль: ' + name()"
+  >
+    <app-avatar class="member-card__photo" [url]="member().personal?.avatar || ''" [size]="70" />
+    <div class="member-card__content">
+      <h3 class="member-card__name" [title]="name()">
+        <span>{{ member().firstName }}</span
+        ><span>{{ member().lastName }}</span>
+      </h3>
+      <p class="member-card__secondary" [title]="member().personal?.speciality || ''">
+        {{ member().personal?.speciality }}
+        @if (member().personal?.birthday; as birthday) {
+          {{ member().personal?.speciality ? " • " : "" }}{{ birthday | yearsFromBirthday }}
         }
-      </ul>
+      </p>
+      <div class="member-card__skills-area">
+        <ul class="member-card__skills" aria-label="Навыки">
+          @if (primarySkill(); as skill) {
+            <li class="member-card__skill" [title]="skill.name">{{ skill.name }}</li>
+          }
+          @if (hiddenCount()) {
+            <li
+              class="member-card__more"
+              [title]="hiddenNames()"
+              [attr.aria-label]="'Ещё ' + hiddenCount() + ': ' + hiddenNames()"
+            >
+              +{{ hiddenCount() }}
+            </li>
+          }
+        </ul>
+      </div>
+      <span class="member-card__action">Профиль</span>
     </div>
-    <span class="member-card__action">Профиль</span>
-  </div>
-</a>
+  </a>
+}
diff --git a/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.scss b/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.scss
index 190e33cdd..18123fb9c 100644
--- a/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.scss
@@ -1,5 +1,6 @@
 /** @format */
 @use "styles/responsive";
+@use "styles/ui-foundation";
 
 :host {
   display: block;
@@ -143,3 +144,61 @@
     padding-left: 16px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .member-card {
+    @include ui-foundation.card;
+
+    height: 248px;
+
+    &__name {
+      font-size: var(--ui-font-body);
+    }
+
+    &__secondary {
+      /* stylelint-disable-next-line value-no-vendor-prefix */
+      font-size: var(--ui-font-caption);
+    }
+
+    &__skill,
+    &__more {
+      font-size: var(--ui-font-caption);
+    }
+
+    &__action {
+      @include ui-foundation.button;
+    }
+
+    padding-top: 45px;
+  }
+
+  @media (max-width: #{responsive.$desktop - 1px}) {
+    :host,
+    .member-card {
+      width: min(100%, var(--ui-mobile-entity-card-width));
+    }
+
+    .member-card {
+      height: auto;
+      min-height: 248px;
+    }
+
+    .member-card__action {
+      align-self: center;
+    }
+
+    .member-card__skill {
+      flex: 0 1 auto;
+      height: auto;
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .member-card__skills,
+    .member-card__skills-area {
+      height: auto;
+      min-height: 22px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.ts b/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.ts
index 5c48d294f..760e4a00e 100644
--- a/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.ts
+++ b/projects/social_platform/src/app/ui/pages/members/member-card/member-card.component.ts
@@ -1,4 +1,10 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { CardDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
 import { RouterLink } from "@angular/router";
 import { YearsFromBirthdayPipe } from "@corelib";
@@ -9,12 +15,14 @@ import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
 /** Карточка каталога участников; не меняет карточки команды и права внутри проекта. */
 @Component({
   selector: "app-member-card",
-  imports: [AvatarComponent, RouterLink, YearsFromBirthdayPipe],
+  imports: [CardDirective, AvatarComponent, RouterLink, YearsFromBirthdayPipe],
   templateUrl: "./member-card.component.html",
   styleUrl: "./member-card.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MemberCardComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly member = input.required<User>();
   protected readonly AppRoutes = AppRoutes;
   protected readonly name = computed(() =>
diff --git a/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.html b/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.html
index f2dcb8486..f010531a0 100644
--- a/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.html
+++ b/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.html
@@ -1,20 +1,58 @@
 <!-- @format -->
-<app-modal [open]="open()" bodyClass="member-filters-dialog-body" (openChange)="close()">
-  <section
-    class="member-filters-dialog"
-    role="dialog"
-    aria-modal="true"
-    aria-label="Фильтры участников"
-    [cdkTrapFocus]="attached()"
-    [cdkTrapFocusAutoCapture]="false"
-  >
-    <header class="member-filters-dialog__header">
-      <h2>Фильтры участников</h2>
-      <button #closeButton type="button" aria-label="Закрыть фильтры" (click)="close()">×</button>
-    </header>
-    <div class="member-filters-dialog__content">
-      <app-members-filters [filterForm]="filterForm()" (resetRequested)="resetRequested.emit()" />
-    </div>
-    <button type="button" class="member-filters-dialog__done" (click)="close()">Готово</button>
-  </section>
-</app-modal>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <app-modal [open]="open()" bodyClass="member-filters-dialog-body" (openChange)="close()">
+    <section
+      class="member-filters-dialog"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Фильтры участников"
+      [cdkTrapFocus]="attached()"
+      [cdkTrapFocusAutoCapture]="false"
+    >
+      <header class="member-filters-dialog__header">
+        <h2>Фильтры участников</h2>
+        <button #closeButton type="button" aria-label="Закрыть фильтры" (click)="close()">×</button>
+      </header>
+      <div class="member-filters-dialog__content">
+        <app-members-filters [filterForm]="filterForm()" (resetRequested)="resetRequested.emit()" />
+      </div>
+      <button type="button" class="member-filters-dialog__done" (click)="close()">Готово</button>
+    </section>
+  </app-modal>
+} @else {
+  <app-modal [open]="open()" bodyClass="member-filters-dialog-body" (openChange)="close()">
+    <section
+      class="member-filters-dialog"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Фильтры участников"
+      [cdkTrapFocus]="attached()"
+      [cdkTrapFocusAutoCapture]="false"
+    >
+      <header class="member-filters-dialog__header">
+        <app-dialog-header title="Фильтры участников" [closable]="false" />
+        <button
+          appButton="icon"
+          #closeButton
+          type="button"
+          aria-label="Закрыть фильтры"
+          (click)="close()"
+        >
+          ×
+        </button>
+      </header>
+      <div class="member-filters-dialog__content" appDialogBody>
+        <app-members-filters [filterForm]="filterForm()" (resetRequested)="resetRequested.emit()" />
+      </div>
+      <button
+        appButton="primary"
+        type="button"
+        class="member-filters-dialog__done"
+        (click)="close()"
+      >
+        Готово
+      </button>
+    </section>
+  </app-modal>
+}
diff --git a/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.scss b/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.scss
index 4634c0cd5..d717884b2 100644
--- a/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.scss
+++ b/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.scss
@@ -78,3 +78,32 @@
     outline-offset: 2px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .member-filters-dialog {
+    &__header {
+      h2 {
+        font-size: var(--ui-font-h2);
+      }
+
+      button {
+        border-radius: var(--ui-radius-dialog);
+      }
+    }
+
+    &__content {
+      .filters__clear {
+        font-size: var(--ui-font-body);
+      }
+
+      input {
+        font-size: var(--ui-font-h3);
+      }
+    }
+
+    &__done {
+      font-size: var(--ui-font-body);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.ts b/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.ts
index b044bec35..e6ed31b36 100644
--- a/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.ts
+++ b/projects/social_platform/src/app/ui/pages/members/member-filters-dialog/member-filters-dialog.component.ts
@@ -1,4 +1,15 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import {
+  ButtonDirective,
+  DialogBodyDirective,
+  DialogFooterDirective,
+  DialogHeaderComponent,
+} from "@uilib";
+
 import { A11yModule, CdkTrapFocus } from "@angular/cdk/a11y";
 import {
   AfterViewInit,
@@ -23,13 +34,23 @@ import { MembersFiltersComponent } from "../members-filters/members-filters.comp
 /** Мобильная оболочка существующей формы фильтров; значения принадлежат странице, а не окну. */
 @Component({
   selector: "app-member-filters-dialog",
-  imports: [ModalComponent, A11yModule, MembersFiltersComponent],
+  imports: [
+    DialogHeaderComponent,
+    DialogBodyDirective,
+    DialogFooterDirective,
+    ButtonDirective,
+    ModalComponent,
+    A11yModule,
+    MembersFiltersComponent,
+  ],
   templateUrl: "./member-filters-dialog.component.html",
   styleUrl: "./member-filters-dialog.component.scss",
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MemberFiltersDialogComponent implements AfterViewInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly filterForm = input.required<MembersUIInfoService["filterForm"]>();
   readonly trigger = input<HTMLElement | null>(null);
   readonly closed = output<void>();
diff --git a/projects/social_platform/src/app/ui/pages/members/member-statistics-card/member-statistics-card.component.scss b/projects/social_platform/src/app/ui/pages/members/member-statistics-card/member-statistics-card.component.scss
index f720f7def..455b9b4ff 100644
--- a/projects/social_platform/src/app/ui/pages/members/member-statistics-card/member-statistics-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/members/member-statistics-card/member-statistics-card.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 
 :host {
@@ -128,3 +127,49 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .statistics {
+    &__title {
+      font-size: var(--ui-font-body);
+    }
+
+    &__row {
+      grid-template-columns: 22px minmax(0, 1fr) auto;
+    }
+
+    &__row + &__row {
+      border-top: 1px solid var(--medium-grey-for-outline);
+    }
+
+    &__label {
+      font-size: 9px;
+    }
+
+    &__value {
+      font-size: var(--ui-font-body);
+      text-align: right;
+    }
+  }
+
+  @media (max-width: #{responsive.$desktop - 1px}) {
+    .statistics {
+      &__row {
+        grid-template-columns: 22px minmax(0, 1fr);
+      }
+
+      &__row + &__row {
+        border-top: 0;
+      }
+
+      &__value {
+        text-align: left;
+      }
+
+      &__label {
+        font-size: var(--ui-font-caption);
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.html b/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.html
index b365773d8..6c9c11bb0 100644
--- a/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.html
+++ b/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.html
@@ -1,46 +1,111 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="filters">
+    <div class="filters__titles">
+      <p class="text-body-14 filters__title">фильтры</p>
+      <button type="button" class="text-body-10 filters__clear" (click)="clearFilters()">
+        сбросить
+      </button>
+    </div>
 
-<div class="filters">
-  <div class="filters__titles">
-    <p class="text-body-14 filters__title">фильтры</p>
-    <button type="button" class="text-body-10 filters__clear" (click)="clearFilters()">
-      сбросить
-    </button>
-  </div>
+    <div class="filters__controls">
+      <form [formGroup]="filterForm()">
+        <div class="filters__block">
+          <app-autocomplete-input
+            class="filter__autocomplete"
+            [suggestions]="skillsOptions()"
+            [slimVersion]="false"
+            [searchIcon]="'search'"
+            fieldToDisplay="name"
+            valueField="name"
+            formControlName="keySkill"
+            placeholder="навыки"
+            (searchStart)="onSearchSkill($event)"
+            (inputCleared)="onClearSkillField()"
+          ></app-autocomplete-input>
+        </div>
 
-  <div class="filters__controls">
-    <form [formGroup]="filterForm()">
-      <div class="filters__block">
-        <app-autocomplete-input
-          class="filter__autocomplete"
-          [suggestions]="skillsOptions()"
-          [slimVersion]="false"
-          [searchIcon]="'search'"
-          fieldToDisplay="name"
-          valueField="name"
-          formControlName="keySkill"
-          placeholder="навыки"
-          (searchStart)="onSearchSkill($event)"
-          (inputCleared)="onClearSkillField()"
-        ></app-autocomplete-input>
-      </div>
+        <div class="filters__block" style="margin-top: 10px">
+          <app-autocomplete-input
+            class="filter__autocomplete"
+            [suggestions]="specsOptions()"
+            [slimVersion]="false"
+            [searchIcon]="'search'"
+            fieldToDisplay="name"
+            valueField="name"
+            formControlName="speciality"
+            placeholder="специальность"
+            (searchStart)="onSearchSpec($event)"
+            (inputCleared)="onClearSpecField()"
+          ></app-autocomplete-input>
+        </div>
 
-      <div class="filters__block" style="margin-top: 10px">
-        <app-autocomplete-input
-          class="filter__autocomplete"
-          [suggestions]="specsOptions()"
-          [slimVersion]="false"
-          [searchIcon]="'search'"
-          fieldToDisplay="name"
-          valueField="name"
-          formControlName="speciality"
-          placeholder="специальность"
-          (searchStart)="onSearchSpec($event)"
-          (inputCleared)="onClearSpecField()"
-        ></app-autocomplete-input>
+        <!-- <div class="filters__block">
+        <h4 class="text-body-12 filter__name">Возраст</h4>
+        <div class="filters__age-wrapper">
+          <div class="filters__age filter__item">
+            <app-range-input formControlName="age"></app-range-input>
+          </div>
+        </div>
       </div>
 
-      <!-- <div class="filters__block">
+      <div class="filters__block">
+        <label (click)="onToggleStudentMosPolitech()">
+          <app-checkbox [checked]="filterForm.get('isMosPolytechStudent')?.value"> </app-checkbox>
+          <span class="text-body-12 filter__name">Студент Московского Политеха</span>
+        </label>
+      </div> -->
+      </form>
+    </div>
+  </div>
+} @else {
+  <div appFilters class="filters">
+    <div class="filters__titles ui-filters__header">
+      <p class="text-body-14 filters__title">фильтры</p>
+      <button
+        appButton="text"
+        type="button"
+        class="text-body-10 filters__clear"
+        (click)="clearFilters()"
+      >
+        сбросить
+      </button>
+    </div>
+
+    <div class="filters__controls">
+      <form appFormLayout [formGroup]="filterForm()">
+        <div class="filters__block">
+          <app-autocomplete-input
+            class="filter__autocomplete"
+            [suggestions]="skillsOptions()"
+            [slimVersion]="false"
+            [searchIcon]="'search'"
+            fieldToDisplay="name"
+            valueField="name"
+            formControlName="keySkill"
+            placeholder="навыки"
+            (searchStart)="onSearchSkill($event)"
+            (inputCleared)="onClearSkillField()"
+          ></app-autocomplete-input>
+        </div>
+
+        <div class="filters__block" style="margin-top: 10px">
+          <app-autocomplete-input
+            class="filter__autocomplete"
+            [suggestions]="specsOptions()"
+            [slimVersion]="false"
+            [searchIcon]="'search'"
+            fieldToDisplay="name"
+            valueField="name"
+            formControlName="speciality"
+            placeholder="специальность"
+            (searchStart)="onSearchSpec($event)"
+            (inputCleared)="onClearSpecField()"
+          ></app-autocomplete-input>
+        </div>
+
+        <!-- <div class="filters__block">
         <h4 class="text-body-12 filter__name">Возраст</h4>
         <div class="filters__age-wrapper">
           <div class="filters__age filter__item">
@@ -55,6 +120,7 @@ <h4 class="text-body-12 filter__name">Возраст</h4>
           <span class="text-body-12 filter__name">Студент Московского Политеха</span>
         </label>
       </div> -->
-    </form>
+      </form>
+    </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.scss b/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.scss
index 047171de6..248ad734d 100644
--- a/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.scss
+++ b/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -61,3 +62,12 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .filters {
+    &__age {
+      font-size: var(--ui-font-small);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.ts b/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.ts
index cd341d0c3..ac632f60a 100644
--- a/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.ts
+++ b/projects/social_platform/src/app/ui/pages/members/members-filters/members-filters.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, FormLayoutDirective, FiltersDirective } from "@uilib";
+
 import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component, inject, input, output } from "@angular/core";
 import { ReactiveFormsModule } from "@angular/forms";
@@ -12,12 +17,21 @@ import { SearchesService } from "@api/searches/searches.service";
 /** Фильтры для списка участников с синхронизацией через URL. */
 @Component({
   selector: "app-members-filters",
-  imports: [CommonModule, ReactiveFormsModule, AutoCompleteInputComponent],
+  imports: [
+    FiltersDirective,
+    ButtonDirective,
+    FormLayoutDirective,
+    CommonModule,
+    ReactiveFormsModule,
+    AutoCompleteInputComponent,
+  ],
   templateUrl: "./members-filters.component.html",
   styleUrl: "./members-filters.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MembersFiltersComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly filterForm = input.required<MembersComponent["filterForm"]>();
   readonly resetRequested = output<void>();
 
diff --git a/projects/social_platform/src/app/ui/pages/members/members.component.html b/projects/social_platform/src/app/ui/pages/members/members.component.html
index 6e6dc7d31..a0a7b4d96 100644
--- a/projects/social_platform/src/app/ui/pages/members/members.component.html
+++ b/projects/social_platform/src/app/ui/pages/members/members.component.html
@@ -1,88 +1,190 @@
 <!-- @format -->
-<section class="page" #membersRoot>
-  <app-back namespace="участники" [path]="AppRoutes.office.feed()"></app-back>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <section class="page" #membersRoot>
+    <app-back namespace="участники" [path]="AppRoutes.office.feed()"></app-back>
 
-  @if (compactLayout()) {
-    <div class="page__bar">
-      <form class="page__search" [formGroup]="searchForm">
-        <input
-          class="page__search-input"
-          type="search"
-          formControlName="search"
-          aria-label="Поиск участников"
-          placeholder="имя или фамилия участника"
-        />
-      </form>
-      <div class="page__actions">
-        <button
-          #filtersButton
-          type="button"
-          class="page__action page__action--filters"
-          aria-haspopup="dialog"
-          [attr.aria-expanded]="filtersOpen()"
-          (click)="openFilters(filtersButton)"
-        >
-          Фильтры
-        </button>
-        <button type="button" class="page__action" (click)="redirectToProfile()">
-          Перейти в профиль
-        </button>
+    @if (compactLayout()) {
+      <div class="page__bar">
+        <form class="page__search" [formGroup]="searchForm">
+          <input
+            class="page__search-input"
+            type="search"
+            formControlName="search"
+            aria-label="Поиск участников"
+            placeholder="имя или фамилия участника"
+          />
+        </form>
+        <div class="page__actions">
+          <button
+            #filtersButton
+            type="button"
+            class="page__action page__action--filters"
+            aria-haspopup="dialog"
+            [attr.aria-expanded]="filtersOpen()"
+            (click)="openFilters(filtersButton)"
+          >
+            Фильтры
+          </button>
+          <button type="button" class="page__action" (click)="redirectToProfile()">
+            Перейти в профиль
+          </button>
+        </div>
+        <ng-container *ngTemplateOutlet="statistics" />
+        <ng-container *ngTemplateOutlet="membersList" />
       </div>
-      <ng-container *ngTemplateOutlet="statistics" />
-      <ng-container *ngTemplateOutlet="membersList" />
-    </div>
-  } @else {
-    <div class="page__bar">
-      <div class="page__info">
-        <div class="page__outlet">
-          <form [formGroup]="searchForm">
-            <app-search
-              formControlName="search"
-              placeholder="имя или фамилия участника"
-              [openable]="containerSm < appWidth"
+    } @else {
+      <div class="page__bar">
+        <div class="page__info">
+          <div class="page__outlet">
+            <form [formGroup]="searchForm">
+              <app-search
+                formControlName="search"
+                placeholder="имя или фамилия участника"
+                [openable]="containerSm < appWidth"
+              />
+            </form>
+            <ng-container *ngTemplateOutlet="membersList" />
+          </div>
+        </div>
+        <div class="page__create">
+          <app-button
+            size="medium"
+            (click)="redirectToProfile()"
+            customTypographyClass="text-body-12"
+          >
+            перейти в профиль
+          </app-button>
+          <div class="page__left">
+            <app-members-filters
+              class="page__filter"
+              [filterForm]="filterForm"
+              (resetRequested)="resetFilters()"
             />
-          </form>
-          <ng-container *ngTemplateOutlet="membersList" />
+            <ng-container *ngTemplateOutlet="statistics" />
+          </div>
         </div>
       </div>
-      <div class="page__create">
-        <app-button
-          size="medium"
-          (click)="redirectToProfile()"
-          customTypographyClass="text-body-12"
-        >
-          перейти в профиль
-        </app-button>
-        <div class="page__left">
-          <app-members-filters
-            class="page__filter"
-            [filterForm]="filterForm"
-            (resetRequested)="resetFilters()"
+    }
+
+    <ng-template #membersList>
+      <ul class="page__list">
+        @for (member of members(); track member.id) {
+          <li><app-member-card [member]="member" /></li>
+        }
+      </ul>
+    </ng-template>
+    <ng-template #statistics>
+      <div class="page__statistics">
+        <app-member-statistics-card [state]="statisticsState()" />
+      </div>
+    </ng-template>
+    @if (filtersOpen() && compactLayout()) {
+      <app-member-filters-dialog
+        [filterForm]="filterForm"
+        [trigger]="filtersTrigger"
+        (closed)="filtersOpen.set(false)"
+        (resetRequested)="resetFilters()"
+      />
+    }
+  </section>
+} @else {
+  <section class="page" #membersRoot>
+    <app-page-header title="участники" [backRoute]="AppRoutes.office.feed()" />
+
+    @if (compactLayout()) {
+      <div class="page__bar">
+        <form appFormLayout class="page__search" [formGroup]="searchForm">
+          <input
+            appField
+            class="page__search-input"
+            type="search"
+            formControlName="search"
+            aria-label="Поиск участников"
+            placeholder="имя или фамилия участника"
           />
-          <ng-container *ngTemplateOutlet="statistics" />
+        </form>
+        <div class="page__actions">
+          <button
+            appButton="secondary"
+            #filtersButton
+            type="button"
+            class="page__action page__action--filters"
+            aria-haspopup="dialog"
+            [attr.aria-expanded]="filtersOpen()"
+            (click)="openFilters(filtersButton)"
+          >
+            Фильтры
+          </button>
+          <button
+            appButton="secondary"
+            type="button"
+            class="page__action"
+            (click)="redirectToProfile()"
+          >
+            Перейти в профиль
+          </button>
         </div>
+        <ng-container *ngTemplateOutlet="statistics" />
+        <ng-container *ngTemplateOutlet="membersList" />
       </div>
-    </div>
-  }
+    } @else {
+      <div class="page__bar">
+        <div class="page__info">
+          <div class="page__outlet">
+            <form appFormLayout [formGroup]="searchForm">
+              <app-search
+                formControlName="search"
+                placeholder="имя или фамилия участника"
+                [openable]="containerSm < appWidth"
+              />
+            </form>
+            <ng-container *ngTemplateOutlet="membersList" />
+          </div>
+        </div>
+        <div class="page__create">
+          <app-button
+            size="medium"
+            (click)="redirectToProfile()"
+            customTypographyClass="text-body-12"
+          >
+            перейти в профиль
+          </app-button>
+          <div class="page__left">
+            <app-members-filters
+              class="page__filter"
+              [filterForm]="filterForm"
+              (resetRequested)="resetFilters()"
+            />
+            <ng-container *ngTemplateOutlet="statistics" />
+          </div>
+        </div>
+      </div>
+    }
 
-  <ng-template #membersList>
-    <ul class="page__list">
-      @for (member of members(); track member.id) {
-        <li><app-member-card [member]="member" /></li>
-      }
-    </ul>
-  </ng-template>
-  <ng-template #statistics>
-    <div class="page__statistics">
-      <app-member-statistics-card [state]="statisticsState()" />
-    </div>
-  </ng-template>
-  @if (filtersOpen() && compactLayout()) {
-    <app-member-filters-dialog
-      [filterForm]="filterForm"
-      [trigger]="filtersTrigger"
-      (closed)="filtersOpen.set(false)"
-      (resetRequested)="resetFilters()"
-    />
-  }
-</section>
+    <ng-template #membersList>
+      <ul class="page__list">
+        @for (member of members(); track member.id) {
+          <li><app-member-card [member]="member" /></li>
+        } @empty {
+          @if (compactLayout()) {
+            <li><app-state title="Ничего не найдено" /></li>
+          }
+        }
+      </ul>
+    </ng-template>
+    <ng-template #statistics>
+      <div class="page__statistics">
+        <app-member-statistics-card [state]="statisticsState()" />
+      </div>
+    </ng-template>
+    @if (filtersOpen() && compactLayout()) {
+      <app-member-filters-dialog
+        [filterForm]="filterForm"
+        [trigger]="filtersTrigger"
+        (closed)="filtersOpen.set(false)"
+        (resetRequested)="resetFilters()"
+      />
+    }
+  </section>
+}
diff --git a/projects/social_platform/src/app/ui/pages/members/members.component.scss b/projects/social_platform/src/app/ui/pages/members/members.component.scss
index 909e5a4c5..78e8e94e8 100644
--- a/projects/social_platform/src/app/ui/pages/members/members.component.scss
+++ b/projects/social_platform/src/app/ui/pages/members/members.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 
 .page {
@@ -139,3 +138,43 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .page {
+    &__bar {
+      display: grid;
+    }
+
+    &__list {
+      grid-template-columns: 1fr;
+      margin-top: 50px;
+
+      @media (min-width: responsive.$desktop) and (max-width: #{responsive.$container-md - 1px}) {
+        grid-template-columns: repeat(3, 2fr);
+      }
+    }
+  }
+
+  @media (max-width: #{responsive.$desktop - 1px}) {
+    .page {
+      &__bar {
+        display: flex;
+      }
+
+      &__search-input {
+        font-size: var(--ui-font-h3);
+      }
+
+      &__action {
+        font-size: var(--ui-font-body);
+      }
+
+      &__list {
+        grid-template-columns: repeat(auto-fill, minmax(0, var(--ui-mobile-entity-card-width)));
+        justify-content: center;
+        margin-top: 35px;
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/members/members.component.ts b/projects/social_platform/src/app/ui/pages/members/members.component.ts
index 874367f84..202b7be60 100644
--- a/projects/social_platform/src/app/ui/pages/members/members.component.ts
+++ b/projects/social_platform/src/app/ui/pages/members/members.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -20,7 +23,14 @@ import { CommonModule } from "@angular/common";
 import { SearchComponent } from "@ui/primitives/search/search.component";
 import { MembersFiltersComponent } from "./members-filters/members-filters.component";
 import { MemberCardComponent } from "./member-card/member-card.component";
-import { BackComponent } from "@uilib";
+import {
+  BackComponent,
+  ButtonDirective,
+  FieldDirective,
+  FormLayoutDirective,
+  PageHeaderComponent,
+  StateComponent,
+} from "@uilib";
 import { ButtonComponent } from "@ui/primitives";
 import { MemberStatisticsCardComponent } from "./member-statistics-card/member-statistics-card.component";
 import { MemberStatisticsFacade } from "@api/member/facades/member-statistics.facade";
@@ -37,12 +47,17 @@ import { MemberFiltersDialogComponent } from "./member-filters-dialog/member-fil
   styleUrl: "./members.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    BackComponent,
+    StateComponent,
+    PageHeaderComponent,
+    ButtonDirective,
+    FieldDirective,
+    FormLayoutDirective,
     ReactiveFormsModule,
     SearchComponent,
     CommonModule,
     MembersFiltersComponent,
     MemberCardComponent,
-    BackComponent,
     ButtonComponent,
     MemberStatisticsCardComponent,
     MemberFiltersDialogComponent,
@@ -55,6 +70,8 @@ import { MemberFiltersDialogComponent } from "./member-filters-dialog/member-fil
   ],
 })
 export class MembersComponent implements OnInit, AfterViewInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly membersRoot = viewChild<ElementRef<HTMLUListElement> | undefined>("membersRoot"); // Ссылка на корневой элемент списка
 
   private readonly membersInfoService = inject(MembersInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/office/nav/nav.component.html b/projects/social_platform/src/app/ui/pages/office/nav/nav.component.html
index b58b2a5bf..f754907ee 100644
--- a/projects/social_platform/src/app/ui/pages/office/nav/nav.component.html
+++ b/projects/social_platform/src/app/ui/pages/office/nav/nav.component.html
@@ -1,38 +1,48 @@
 <!-- @format -->
-
 <div class="nav-bar">
   <div class="nav-bar__inner">
-    <div class="nav-bar__toggle">
+    <button
+      appButton="icon"
+      type="button"
+      class="nav-bar__toggle"
+      aria-label="Открыть меню"
+      aria-controls="mobile-navigation"
+      [attr.aria-expanded]="mobileMenuOpen"
+      (click)="toggleMenu($event)"
+    >
       <i
         appIcon
-        [ngStyle]="{ color: mobileMenuOpen ? 'var(--dark-grey)' : 'var(--light-white)' }"
         [icon]="mobileMenuOpen ? 'menu-cross' : 'menu-burger'"
         appSquare="24"
-        (click)="mobileMenuOpen = !mobileMenuOpen"
         class="nav-bar__icon"
       ></i>
-    </div>
+    </button>
+    <span class="nav-bar__title text-body-14">{{ title }}</span>
   </div>
-
   @if (mobileMenuOpen) {
-    <div class="nav-bar__mobile-menu">
+    <div class="nav-bar__backdrop" (click)="closeMenu()"></div>
+    <div
+      appDrawer
+      id="mobile-navigation"
+      class="nav-bar__mobile-menu"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Навигация"
+      cdkTrapFocus
+      [cdkTrapFocusAutoCapture]="true"
+      (keydown.escape)="closeMenu()"
+    >
       <div class="nav-bar__top">
-        <a
-          class="nav-bar__chat-link"
-          [routerLink]="AppRoutes.office.chats()"
-          aria-label="Открыть чаты"
+        <button
+          appButton="icon"
+          type="button"
+          class="nav-bar__close"
+          aria-label="Закрыть меню"
+          (click)="closeMenu()"
         >
-          <i
-            appIcon
-            icon="chats"
-            appWidth="23"
-            appHeight="21"
-            appViewBox="0 0 23 21"
-            class="nav-bar__icon"
-          ></i>
-        </a>
+          <i appIcon icon="menu-cross" appSquare="24"></i>
+        </button>
       </div>
-
       <nav class="nav nav--vertical">
         <ul class="nav__list">
           <a class="nav__link" routerLink="feed" routerLinkActive="nav__link--active">
@@ -109,6 +119,9 @@
           </a>
         </ul>
       </nav>
+      <button appButton="secondary" type="button" class="nav-bar__logout" (click)="logout.emit()">
+        Выйти
+      </button>
     </div>
   }
 </div>
diff --git a/projects/social_platform/src/app/ui/pages/office/nav/nav.component.scss b/projects/social_platform/src/app/ui/pages/office/nav/nav.component.scss
index 832c470d9..ad0d345e2 100644
--- a/projects/social_platform/src/app/ui/pages/office/nav/nav.component.scss
+++ b/projects/social_platform/src/app/ui/pages/office/nav/nav.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -87,3 +86,123 @@
     margin-top: auto;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .nav-bar__logout {
+    margin-top: auto;
+  }
+
+  .nav-bar {
+    &__inner {
+      display: grid;
+      grid-template-columns: 88px minmax(0, 1fr) 88px;
+      align-items: center;
+    }
+
+    &__notifications-toggle {
+      position: relative;
+      display: flex;
+      gap: 20px;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 40px;
+      cursor: pointer;
+      border-radius: var(--rounded-sm);
+
+      > .attention {
+        top: 9px;
+        right: 11px;
+      }
+
+      &--active {
+        color: var(--white);
+        background-color: var(--accent);
+      }
+    }
+
+    &__toggle {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+
+      > .attention {
+        top: 8px;
+        right: 2px;
+      }
+    }
+
+    &__mobile-menu {
+      z-index: 201;
+      width: min(360px, calc(100% - 32px));
+      max-height: 100dvh;
+      padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+
+    &__backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 200;
+      background: var(--ui-scrim);
+    }
+
+    &__close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      margin-right: auto;
+      color: var(--dark-grey);
+      cursor: pointer;
+    }
+
+    &__title {
+      grid-row: 1;
+      grid-column: 2;
+      min-width: 0;
+      font-weight: 600;
+      line-height: 18px;
+      color: var(--ui-text);
+      text-align: center;
+      overflow-wrap: anywhere;
+    }
+
+    ::ng-deep .nav__link {
+      width: 100%;
+      margin-bottom: 12px;
+    }
+
+    ::ng-deep .nav__item {
+      min-height: 44px;
+    }
+  }
+
+  .notifications {
+    &__title {
+      margin-bottom: 12px;
+    }
+
+    &__invite {
+      &:not(:last-child) {
+        padding-bottom: 16px;
+        margin-bottom: 16px;
+        border-bottom: 1px solid var(--gray);
+      }
+    }
+  }
+
+  .attention {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    background-color: var(--red);
+    border-radius: 50%;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/office/nav/nav.component.ts b/projects/social_platform/src/app/ui/pages/office/nav/nav.component.ts
index b066d60a7..00ad7ca94 100644
--- a/projects/social_platform/src/app/ui/pages/office/nav/nav.component.ts
+++ b/projects/social_platform/src/app/ui/pages/office/nav/nav.component.ts
@@ -1,52 +1,112 @@
 /** @format */
-
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { AppRoutes } from "@api/paths/app-routes";
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   DestroyRef,
+  HostListener,
   OnDestroy,
   OnInit,
   inject,
+  output,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import {
+  NavigationStart,
+  NavigationEnd,
+  Router,
+  RouterLink,
+  RouterLinkActive,
+} from "@angular/router";
+import { A11yModule } from "@angular/cdk/a11y";
+import { Overlay } from "@angular/cdk/overlay";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { ButtonDirective, DrawerDirective } from "@uilib";
 import { IconComponent } from "@ui/primitives";
-import { NavigationStart, Router, RouterLink, RouterLinkActive } from "@angular/router";
 import { NavService } from "@api/shared/nav.service";
+import { AppRoutes } from "@api/paths/app-routes";
 
-/** Мобильная навигация Office; notification center находится в ProfileControlPanel. */
+/** Мобильная навигация; backend-уведомления остаются в production ProfileControlPanel. */
 @Component({
   selector: "app-nav",
   templateUrl: "./nav.component.html",
   styleUrl: "./nav.component.scss",
-  imports: [CommonModule, IconComponent, RouterLink, RouterLinkActive],
+  imports: [
+    CommonModule,
+    IconComponent,
+    RouterLink,
+    RouterLinkActive,
+    A11yModule,
+    ButtonDirective,
+    DrawerDirective,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavComponent implements OnInit, OnDestroy {
   private readonly destroyRef = inject(DestroyRef);
   private readonly navService = inject(NavService);
-
+  private readonly menuScrollStrategy = inject(Overlay).scrollStrategies.block();
+  private menuTrigger?: HTMLElement;
+  readonly logout = output<void>();
+  mobileMenuOpen = false;
+  title = "";
+  protected readonly AppRoutes = AppRoutes;
   constructor(
     private readonly router: Router,
     private readonly cdref: ChangeDetectorRef,
   ) {}
-
   ngOnInit(): void {
+    this.title = this.routeTitle(this.router.url);
     this.router.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
-      if (event instanceof NavigationStart) this.mobileMenuOpen = false;
+      if (event instanceof NavigationStart) {
+        this.closeMenu();
+        this.cdref.markForCheck();
+      }
+      if (event instanceof NavigationEnd) {
+        this.title = this.routeTitle(event.urlAfterRedirects) || this.title;
+        this.cdref.markForCheck();
+      }
     });
-
     this.navService.navTitle.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(title => {
-      this.title = title;
-      this.cdref.detectChanges();
+      this.title = this.routeTitle(this.router.url) || title;
+      this.cdref.markForCheck();
     });
   }
-
-  ngOnDestroy(): void {}
-
-  mobileMenuOpen = false;
-  title = "";
-  protected readonly AppRoutes = AppRoutes;
+  private routeTitle(url: string): string {
+    const path = url.split(/[?#]/)[0];
+    if (/^\/office\/profile\/edit(?:\/|$)/.test(path)) return "Редактирование профиля";
+    if (/^\/office\/projects\/create(?:\/|$)/.test(path)) return "Создание проекта";
+    if (/^\/office\/projects\/\d+\/edit(?:\/|$)/.test(path)) return "Редактирование проекта";
+    if (/^\/office\/projects\/\d+(?:\/|$)/.test(path)) return "Профиль проекта";
+    const sections: Record<string, string> = {
+      feed: "Новости",
+      projects: "Проекты",
+      members: "Участники",
+      program: "Программы",
+      courses: "Курсы",
+      vacancies: "Вакансии",
+      profile: "Профиль",
+    };
+    return sections[path.split("/")[2]] || "";
+  }
+  @HostListener("window:resize") onResize(): void {
+    if (window.innerWidth >= 1000) this.closeMenu();
+  }
+  toggleMenu(event: MouseEvent): void {
+    if (this.mobileMenuOpen) {
+      this.closeMenu();
+      return;
+    }
+    this.menuTrigger = event.currentTarget as HTMLElement;
+    this.mobileMenuOpen = true;
+    this.menuScrollStrategy.enable();
+  }
+  closeMenu(): void {
+    this.mobileMenuOpen = false;
+    this.menuScrollStrategy.disable();
+    this.menuTrigger?.focus();
+  }
+  ngOnDestroy(): void {
+    this.menuScrollStrategy.disable();
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/office/office.component.html b/projects/social_platform/src/app/ui/pages/office/office.component.html
index 739066304..d4e8b2fc8 100644
--- a/projects/social_platform/src/app/ui/pages/office/office.component.html
+++ b/projects/social_platform/src/app/ui/pages/office/office.component.html
@@ -1,109 +1,223 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="office">
+    @if (profile()) {
+      <div class="office__wrapper">
+        <img
+          alt="background-image"
+          src="/assets/images/office/shared/backgorund-image-rocket-main.svg"
+          class="office__background-image"
+        />
+        <div class="office__body">
+          <div class="office__inner">
+            <div class="office__inner--wrapper">
+              <ui-sidebar
+                class="office__sidebar"
+                logoSrc="/assets/images/shared/logo.svg"
+                [navItems]="navItems()"
+                style="align-self: flex-start"
+              >
+                <div class="office__sidebar--text">
+                  <p class="text-body-6">Платформа создана компанией ООО «Молодежный форсайт»</p>
+                  <span class="text-body-6 office__policy-link" (click)="downloadPolicy($event)">
+                    Политика обработки персональных данных
+                  </span>
+                  <p class="text-body-6">{{ currentYear() }}</p>
+                </div>
 
-<div class="office">
-  @if (profile()) {
-    <div class="office__wrapper">
-      <img
-        alt="background-image"
-        src="/assets/images/office/shared/backgorund-image-rocket-main.svg"
-        class="office__background-image"
-      />
-      <div class="office__body">
-        <div class="office__inner">
-          <div class="office__inner--wrapper">
-            <ui-sidebar
-              class="office__sidebar"
-              logoSrc="/assets/images/shared/logo.svg"
-              [navItems]="navItems()"
-              style="align-self: flex-start"
-            >
-              <div class="office__sidebar--text">
-                <p class="text-body-6">Платформа создана компанией ООО «Молодежный форсайт»</p>
-                <span class="text-body-6 office__policy-link" (click)="downloadPolicy($event)">
-                  Политика обработки персональных данных
-                </span>
-                <p class="text-body-6">{{ currentYear() }}</p>
-              </div>
+                <div class="office__programs">
+                  @if (programs().length) {
+                    @for (program of programs(); track program.id) {
+                      <app-program-sidebar-card
+                        [routerLink]="AppRoutes.program.detail(program.id)"
+                        [program]="program"
+                      ></app-program-sidebar-card>
+                    }
+                  }
+                </div>
+              </ui-sidebar>
 
-              <div class="office__programs">
-                @if (programs().length) {
-                  @for (program of programs(); track program.id) {
-                    <app-program-sidebar-card
-                      [routerLink]="AppRoutes.program.detail(program.id)"
-                      [program]="program"
-                    ></app-program-sidebar-card>
+              <div class="office__inner--content">
+                <div class="office__top">
+                  <app-nav></app-nav>
+
+                  @if (profile() !== undefined) {
+                    <app-profile-control-panel
+                      [notifications]="notifications()"
+                      [unreadCount]="notificationUnreadCount()"
+                      [loading]="notificationsLoading()"
+                      [loadingMore]="notificationsLoadingMore()"
+                      [markingAllRead]="notificationsMarkingAllRead()"
+                      [hasMore]="notificationsHasMore()"
+                      [error]="notificationsError()"
+                      [hasUnreads]="chatUnreadState.hasUnreads()"
+                      [user]="profile()"
+                      (notificationClick)="onNotificationClick($event)"
+                      (markAllRead)="onMarkAllNotificationsRead()"
+                      (loadMore)="onLoadMoreNotifications()"
+                      (retry)="onRetryNotifications()"
+                      (openChange)="onNotificationsOpenChange($event)"
+                      (logout)="onLogout()"
+                    ></app-profile-control-panel>
                   }
-                }
+                </div>
+                <router-outlet></router-outlet>
               </div>
-            </ui-sidebar>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+    <app-modal [open]="waitVerificationModal()">
+      <div class="message-modal">
+        <img
+          src="/assets/images/office/shared/wait.png"
+          alt="wait"
+          width="215px"
+          loading="lazy"
+          decoding="async"
+        />
+        <h3 class="message-modal__title text-body-14">Ваш аккаунт проходит подтверждение</h3>
+        <p class="message-modal__text text-body-12">
+          Мы проверяем ваши данные и скоро сообщим о подтверждении аккаунта, а пока можете уже
+          пользоваться платформой
+        </p>
+        <app-button
+          class="message-modal__button"
+          [disabled]="verificationAcknowledgementPending()"
+          (click)="onAcceptWaitVerification()"
+        >
+          Хорошо
+        </app-button>
+      </div>
+    </app-modal>
 
-            <div class="office__inner--content">
-              <div class="office__top">
-                <app-nav></app-nav>
+    <app-modal [open]="inviteErrorModal()">
+      <div class="message-modal">
+        <h3 class="message-modal__title text-body-14">
+          Приглашение на текущий проект было удалено
+        </h3>
+        <p class="message-modal__text text-body-12">
+          Проверьте наличие вас в списке участников проекта или обратитесь к создателю проекта,
+          чтобы вас заново пригласили!
+        </p>
+        <app-button class="message-modal__button" (click)="inviteErrorModal.set(false)">
+          Хорошо
+        </app-button>
+      </div>
+    </app-modal>
+    <app-delete-confirm></app-delete-confirm>
+    <app-snackbar></app-snackbar>
+  </div>
+} @else {
+  <div class="office">
+    @if (profile()) {
+      <div class="office__wrapper">
+        <img
+          alt="background-image"
+          src="/assets/images/office/shared/backgorund-image-rocket-main.svg"
+          class="office__background-image"
+        />
+        <div class="office__body">
+          <div class="office__inner">
+            <div class="office__inner--wrapper">
+              <ui-sidebar
+                class="office__sidebar"
+                logoSrc="/assets/images/shared/logo.svg"
+                [navItems]="navItems()"
+                style="align-self: flex-start"
+              >
+                <div class="office__sidebar--text">
+                  <p class="text-body-6">Платформа создана компанией ООО «Молодежный форсайт»</p>
+                  <span class="text-body-6 office__policy-link" (click)="downloadPolicy($event)">
+                    Политика обработки персональных данных
+                  </span>
+                  <p class="text-body-6">{{ currentYear() }}</p>
+                </div>
+
+                <div class="office__programs">
+                  @if (programs().length) {
+                    @for (program of programs(); track program.id) {
+                      <app-program-sidebar-card
+                        [routerLink]="AppRoutes.program.detail(program.id)"
+                        [program]="program"
+                      ></app-program-sidebar-card>
+                    }
+                  }
+                </div>
+              </ui-sidebar>
+
+              <div class="office__inner--content">
+                <div class="office__top">
+                  <app-nav (logout)="onLogout()"></app-nav>
 
-                @if (profile() !== undefined) {
-                  <app-profile-control-panel
-                    [notifications]="notifications()"
-                    [unreadCount]="notificationUnreadCount()"
-                    [loading]="notificationsLoading()"
-                    [loadingMore]="notificationsLoadingMore()"
-                    [markingAllRead]="notificationsMarkingAllRead()"
-                    [hasMore]="notificationsHasMore()"
-                    [error]="notificationsError()"
-                    [hasUnreads]="chatUnreadState.hasUnreads()"
-                    [user]="profile()"
-                    (notificationClick)="onNotificationClick($event)"
-                    (markAllRead)="onMarkAllNotificationsRead()"
-                    (loadMore)="onLoadMoreNotifications()"
-                    (retry)="onRetryNotifications()"
-                    (openChange)="onNotificationsOpenChange($event)"
-                    (logout)="onLogout()"
-                  ></app-profile-control-panel>
-                }
+                  @if (profile() !== undefined) {
+                    <app-profile-control-panel
+                      [notifications]="notifications()"
+                      [unreadCount]="notificationUnreadCount()"
+                      [loading]="notificationsLoading()"
+                      [loadingMore]="notificationsLoadingMore()"
+                      [markingAllRead]="notificationsMarkingAllRead()"
+                      [hasMore]="notificationsHasMore()"
+                      [error]="notificationsError()"
+                      [hasUnreads]="chatUnreadState.hasUnreads()"
+                      [user]="profile()"
+                      (notificationClick)="onNotificationClick($event)"
+                      (markAllRead)="onMarkAllNotificationsRead()"
+                      (loadMore)="onLoadMoreNotifications()"
+                      (retry)="onRetryNotifications()"
+                      (openChange)="onNotificationsOpenChange($event)"
+                      (logout)="onLogout()"
+                    ></app-profile-control-panel>
+                  }
+                </div>
+                <router-outlet></router-outlet>
               </div>
-              <router-outlet></router-outlet>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  }
-  <app-modal [open]="waitVerificationModal()">
-    <div class="message-modal">
-      <img
-        src="/assets/images/office/shared/wait.png"
-        alt="wait"
-        width="215px"
-        loading="lazy"
-        decoding="async"
-      />
-      <h3 class="message-modal__title text-body-14">Ваш аккаунт проходит подтверждение</h3>
-      <p class="message-modal__text text-body-12">
-        Мы проверяем ваши данные и скоро сообщим о подтверждении аккаунта, а пока можете уже
-        пользоваться платформой
-      </p>
-      <app-button
-        class="message-modal__button"
-        [disabled]="verificationAcknowledgementPending()"
-        (click)="onAcceptWaitVerification()"
-      >
-        Хорошо
-      </app-button>
-    </div>
-  </app-modal>
+    }
+    <app-modal [open]="waitVerificationModal()">
+      <div class="message-modal">
+        <img
+          src="/assets/images/office/shared/wait.png"
+          alt="wait"
+          width="215px"
+          loading="lazy"
+          decoding="async"
+        />
+        <h3 class="message-modal__title text-body-14">Ваш аккаунт проходит подтверждение</h3>
+        <p class="message-modal__text text-body-12">
+          Мы проверяем ваши данные и скоро сообщим о подтверждении аккаунта, а пока можете уже
+          пользоваться платформой
+        </p>
+        <app-button
+          class="message-modal__button"
+          [disabled]="verificationAcknowledgementPending()"
+          (click)="onAcceptWaitVerification()"
+        >
+          Хорошо
+        </app-button>
+      </div>
+    </app-modal>
 
-  <app-modal [open]="inviteErrorModal()">
-    <div class="message-modal">
-      <h3 class="message-modal__title text-body-14">Приглашение на текущий проект было удалено</h3>
-      <p class="message-modal__text text-body-12">
-        Проверьте наличие вас в списке участников проекта или обратитесь к создателю проекта, чтобы
-        вас заново пригласили!
-      </p>
-      <app-button class="message-modal__button" (click)="inviteErrorModal.set(false)">
-        Хорошо
-      </app-button>
-    </div>
-  </app-modal>
-  <app-delete-confirm></app-delete-confirm>
-  <app-snackbar></app-snackbar>
-</div>
+    <app-modal [open]="inviteErrorModal()">
+      <div class="message-modal">
+        <h3 class="message-modal__title text-body-14">
+          Приглашение на текущий проект было удалено
+        </h3>
+        <p class="message-modal__text text-body-12">
+          Проверьте наличие вас в списке участников проекта или обратитесь к создателю проекта,
+          чтобы вас заново пригласили!
+        </p>
+        <app-button class="message-modal__button" (click)="inviteErrorModal.set(false)">
+          Хорошо
+        </app-button>
+      </div>
+    </app-modal>
+    <app-delete-confirm></app-delete-confirm>
+    <app-snackbar></app-snackbar>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/office/office.component.scss b/projects/social_platform/src/app/ui/pages/office/office.component.scss
index db6fd13bf..9c5dbed73 100644
--- a/projects/social_platform/src/app/ui/pages/office/office.component.scss
+++ b/projects/social_platform/src/app/ui/pages/office/office.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 
 .office {
@@ -242,3 +241,88 @@
     padding: 0 15px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .office {
+    &__top {
+      display: grid;
+      grid-template-columns: 88px minmax(0, 1fr) 88px;
+      min-height: 64px;
+      padding: max(8px, env(safe-area-inset-top)) var(--page-gutter) 8px;
+      background: var(--ui-surface);
+      border-bottom: 1px solid var(--ui-border-subtle);
+    }
+
+    &__body {
+      padding: 0 200px;
+
+      @media (max-width: 1600px) {
+        padding: 0 150px;
+      }
+
+      @media (max-width: 1400px) {
+        padding: 0 100px;
+      }
+
+      @media (max-width: 1200px) {
+        padding: 0 50px;
+      }
+
+      @media (max-width: 992px) {
+        padding: 0 20px;
+      }
+
+      @media (max-width: 768px) {
+        padding: 0;
+      }
+    }
+
+    &__inner {
+      &--wrapper {
+        grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
+
+        @include responsive.apply-below-desktop {
+          grid-template-columns: minmax(0, 1fr);
+        }
+      }
+    }
+
+    &__top > app-nav {
+      grid-row: 1;
+      grid-column: 1 / -1;
+      min-width: 0;
+    }
+
+    &__top > app-profile-control-panel {
+      grid-row: 1;
+      grid-column: 3;
+      justify-self: end;
+      min-width: 0;
+    }
+  }
+
+  .container {
+    padding: 0 200px;
+
+    @media (max-width: 1600px) {
+      padding: 0 150px;
+    }
+
+    @media (max-width: 1400px) {
+      padding: 0 100px;
+    }
+
+    @media (max-width: 1200px) {
+      padding: 0 50px;
+    }
+
+    @media (max-width: 992px) {
+      padding: 0 20px;
+    }
+
+    @media (max-width: 768px) {
+      padding: 0 15px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/office/office.component.ts b/projects/social_platform/src/app/ui/pages/office/office.component.ts
index faa0eab4a..116dd2435 100644
--- a/projects/social_platform/src/app/ui/pages/office/office.component.ts
+++ b/projects/social_platform/src/app/ui/pages/office/office.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { Component, OnInit, signal, inject, ChangeDetectionStrategy } from "@angular/core";
 import { RouterLink, RouterOutlet } from "@angular/router";
 import { ProgramSidebarCardComponent } from "./program-sidebar-card/program-sidebar-card.component";
@@ -47,6 +50,8 @@ import { Notification } from "@domain/notification/notification.model";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OfficeComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly officeInfoService = inject(OfficeInfoService);
   private readonly officeUIInfoService = inject(OfficeUIInfoService);
   private readonly authRegisterService = inject(AuthRegisterService);
diff --git a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.html b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.html
index 088c67919..0da2b93fd 100644
--- a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.html
+++ b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.html
@@ -1,22 +1,56 @@
 <!-- @format -->
-
-<ul class="snackbar">
-  @for (snack of snacks; track snack.id) {
-    <li
-      class="snackbar__item item text-body-12"
-      [ngClass]="{
-        'item--success': snack.type === 'success',
-        'item--error': snack.type === 'error',
-        'item--info': snack.type === 'info',
-      }"
-      @slideInOut
-    >
-      {{ snack.text }}
-      <i
-        appIcon
-        [icon]="snack.type === 'success' ? 'check' : snack.type === 'info' ? '' : 'error'"
-        appSquare="12"
-      ></i>
-    </li>
-  }
-</ul>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <ul class="snackbar">
+    @for (snack of snacks; track snack.id) {
+      <li
+        class="snackbar__item item text-body-12"
+        [ngClass]="{
+          'item--success': snack.type === 'success',
+          'item--error': snack.type === 'error',
+          'item--info': snack.type === 'info',
+        }"
+        @slideInOut
+      >
+        {{ snack.text }}
+        <i
+          appIcon
+          [icon]="snack.type === 'success' ? 'check' : snack.type === 'info' ? '' : 'error'"
+          appSquare="12"
+        ></i>
+      </li>
+    }
+  </ul>
+} @else {
+  <ul class="snackbar">
+    @for (snack of snacks; track snack.id) {
+      <li
+        class="snackbar__item item text-body-12"
+        [ngClass]="{
+          'item--success': snack.type === 'success',
+          'item--error': snack.type === 'error',
+          'item--info': snack.type === 'info',
+        }"
+        @slideInOut
+      >
+        <span>{{ snack.text }}</span>
+        @if (snack.dismissible) {
+          <button
+            type="button"
+            class="item__close"
+            aria-label="Закрыть уведомление"
+            (click)="onClose(snack)"
+          >
+            <i appIcon icon="cross" appSquare="16" aria-hidden="true"></i>
+          </button>
+        } @else {
+          <i
+            appIcon
+            [icon]="snack.type === 'success' ? 'check' : snack.type === 'info' ? '' : 'error'"
+            appSquare="12"
+          ></i>
+        }
+      </li>
+    }
+  </ul>
+}
diff --git a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss
index 26cb93c9c..116f2eb44 100644
--- a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss
+++ b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.scss
@@ -1,4 +1,5 @@
 /** @format */
+@use "styles/responsive";
 
 .snackbar {
   position: absolute;
@@ -39,3 +40,53 @@
     background-color: var(--lime);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .snackbar {
+    pointer-events: none;
+
+    &__item {
+      pointer-events: auto;
+    }
+  }
+
+  .item {
+    &__close {
+      display: grid;
+      flex: 0 0 44px;
+      place-items: center;
+      width: 44px;
+      height: 44px;
+      padding: 0;
+      color: inherit;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      border-radius: 8px;
+
+      &:focus-visible {
+        outline: 2px solid currentcolor;
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  @include responsive.apply-mobile {
+    .snackbar {
+      position: fixed;
+      top: max(12px, env(safe-area-inset-top));
+      right: var(--page-gutter);
+      left: var(--page-gutter);
+      max-height: calc(100dvh - 24px);
+      padding: 0;
+      overflow-y: auto;
+    }
+
+    .item {
+      min-width: 0;
+      padding: 12px;
+      overflow-wrap: anywhere;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.spec.ts b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.spec.ts
index 01b4bac10..e78a0c4ba 100644
--- a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.spec.ts
@@ -3,6 +3,8 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { SnackbarComponent } from "./snackbar.component";
+import { SnackbarService } from "@domain/shared/snackbar.service";
+import { provideNoopAnimations } from "@angular/platform-browser/animations";
 
 describe("SnackbarComponent", () => {
   let component: SnackbarComponent;
@@ -11,6 +13,7 @@ describe("SnackbarComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [SnackbarComponent],
+      providers: [provideNoopAnimations()],
     }).compileComponents();
   });
 
@@ -23,4 +26,23 @@ describe("SnackbarComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  it("закрывает постоянное уведомление кнопкой и не удаляет соседние сообщения", () => {
+    const service = TestBed.inject(SnackbarService);
+    service.error("Чат недоступен", { timeout: 0, dismissible: true });
+    service.info("Другое сообщение", { timeout: 0 });
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('[aria-label="Закрыть уведомление"]').click();
+    fixture.detectChanges();
+    expect(component.snacks.map(snack => snack.text)).toEqual(["Другое сообщение"]);
+  });
+
+  it("убирает нужное уведомление по восстановлению соединения", () => {
+    const service = TestBed.inject(SnackbarService);
+    const id = service.error("Чат недоступен", { timeout: 0, dismissible: true });
+    service.info("Другое сообщение", { timeout: 0 });
+    service.dismiss(id);
+    fixture.detectChanges();
+    expect(component.snacks.map(snack => snack.text)).toEqual(["Другое сообщение"]);
+  });
 });
diff --git a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.ts b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.ts
index 2236eb6fe..37787d480 100644
--- a/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.ts
+++ b/projects/social_platform/src/app/ui/pages/office/snackbar/snackbar.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -14,7 +17,7 @@ import { Snack } from "@domain/shared/snack.model";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { AnimationService } from "./animation/animation.service";
 import { CommonModule } from "@angular/common";
-import { IconComponent } from "@uilib";
+import { IconComponent, AlertDirective } from "@uilib";
 
 /**
  * Компонент для отображения всплывающих уведомлений (snackbar).
@@ -34,10 +37,12 @@ import { IconComponent } from "@uilib";
   templateUrl: "./snackbar.component.html",
   styleUrl: "./snackbar.component.scss",
   animations: [AnimationService.slideInOut],
-  imports: [CommonModule, IconComponent],
+  imports: [AlertDirective, CommonModule, IconComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SnackbarComponent implements OnInit, OnDestroy {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly destroyRef = inject(DestroyRef);
   private readonly cdr = inject(ChangeDetectorRef);
 
@@ -61,6 +66,10 @@ export class SnackbarComponent implements OnInit, OnDestroy {
     this.snackbarService.snacks
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(snack => this.addNotification(snack));
+    this.snackbarService.dismissed$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(id => {
+      this.snacks = this.snacks.filter(snack => snack.id !== id);
+      this.cdr.markForCheck();
+    });
   }
 
   /** Отписка от уведомлений при уничтожении */
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/onboarding.component.scss b/projects/social_platform/src/app/ui/pages/onboarding/onboarding.component.scss
index 6cfd71956..d92180af7 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/onboarding.component.scss
+++ b/projects/social_platform/src/app/ui/pages/onboarding/onboarding.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 .page {
@@ -119,3 +120,26 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .page {
+      padding: 16px var(--page-gutter);
+    }
+
+    .header {
+      gap: 12px;
+      margin-bottom: 24px;
+    }
+
+    .header__steps {
+      @include responsive.scroll-tabs;
+    }
+
+    .step__number {
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/stage-one/stage-one.component.scss b/projects/social_platform/src/app/ui/pages/onboarding/stage-one/stage-one.component.scss
index dcd636890..ad76a2af1 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/stage-one/stage-one.component.scss
+++ b/projects/social_platform/src/app/ui/pages/onboarding/stage-one/stage-one.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -123,3 +124,29 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .content {
+      height: auto;
+
+      @include responsive.single-column;
+    }
+
+    .content__section {
+      min-width: 0;
+    }
+
+    .content__right {
+      height: auto;
+      min-height: 180px;
+      max-height: 40dvh;
+      overflow-y: auto;
+    }
+
+    .content__actions {
+      margin-top: 12px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/stage-three/stage-three.component.scss b/projects/social_platform/src/app/ui/pages/onboarding/stage-three/stage-three.component.scss
index 91da83324..fea762266 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/stage-three/stage-three.component.scss
+++ b/projects/social_platform/src/app/ui/pages/onboarding/stage-three/stage-three.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/typography";
 @use "styles/responsive";
 
@@ -38,3 +39,17 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .page__list {
+      height: auto;
+      max-height: none;
+    }
+
+    .page__button {
+      width: 100%;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.scss b/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.scss
index 66887b7d2..4e9476d98 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.scss
+++ b/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -194,3 +195,29 @@
     text-align: center;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .content {
+      height: auto;
+
+      @include responsive.single-column;
+    }
+
+    .content__section {
+      min-width: 0;
+    }
+
+    .content__right {
+      height: auto;
+      min-height: 180px;
+      max-height: 40dvh;
+      overflow-y: auto;
+    }
+
+    .content__actions {
+      margin-top: 12px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.spec.ts b/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.spec.ts
index 6eb14249d..d9705508e 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.spec.ts
@@ -1,6 +1,7 @@
 /** @format */
 
 import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { OverlayContainer } from "@angular/cdk/overlay";
 
 import { OnboardingStageTwoComponent } from "./stage-two.component";
 import { BehaviorSubject, of, Subject } from "rxjs";
@@ -94,6 +95,8 @@ describe("StageTwoComponent", () => {
 
   afterEach(() => {
     fixture.destroy();
+    TestBed.inject(OverlayContainer).ngOnDestroy();
+    vi.clearAllTimers();
     vi.useRealTimers();
   });
 
@@ -112,9 +115,9 @@ describe("StageTwoComponent", () => {
     expect(getSkillsInline).toHaveBeenCalledWith("Angular", 1000, 0);
     results.next({ count: 1, results: [angular], next: "", previous: "" });
     fixture.detectChanges();
-    const option: HTMLElement = fixture.nativeElement.querySelector(
-      ".field__dropdown--options .field__option",
-    );
+    const option: HTMLElement = TestBed.inject(OverlayContainer)
+      .getContainerElement()
+      .querySelector(".field__dropdown--options .field__option");
     expect(option?.textContent).toContain("Angular");
     option.click();
     fixture.detectChanges();
@@ -123,7 +126,10 @@ describe("StageTwoComponent", () => {
     type("Angular");
     results.next({ count: 1, results: [angular], next: "", previous: "" });
     fixture.detectChanges();
-    fixture.nativeElement.querySelector(".field__dropdown--options .field__option").click();
+    TestBed.inject(OverlayContainer)
+      .getContainerElement()
+      .querySelector<HTMLElement>(".field__dropdown--options .field__option")!
+      .click();
     fixture.detectChanges();
     expect(getSkillsInline).toHaveBeenCalledTimes(2);
     expect(fixture.nativeElement.querySelectorAll(".basket__skill")).toHaveLength(1);
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.html b/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.html
index bf182e528..f044f5fa9 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.html
+++ b/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.html
@@ -1,555 +1,1002 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  @if (profile()) {
+    <div class="page">
+      <div class="auth__greeting">
+        <h3 class="auth__title">
+          Привет, {{ profile()!.firstName }} {{ profile()!.lastName }}! ✌️
+        </h3>
+        <p class="auth__info">Расскажите о себе, чтобы ваше резюме было сильным и отражало опыт</p>
+      </div>
+      <form [formGroup]="stageForm" class="page__form" (submit)="onSubmit()">
+        <div class="page__first-row">
+          @if (stageForm.get("avatar"); as avatar) {
+            <fieldset class="page__field">
+              <div class="content">
+                <p class="text-bold-body-14">Фотография профиля*</p>
+                <app-tooltip
+                  [text]="'Идеальная фотография для резюме: свежая, с вашим лицом, хорошо различимым на нейтральном фоне (котиков мы конечно любим, но их не в этот раз)'"
+                  [isVisible]="isHintPhotoVisible('photo')"
+                  [position]="'right'"
+                  [tooltipWidth]="300"
+                  customClass="content__hint"
+                  (show)="toggleTooltip('photo')"
+                  (hide)="toggleTooltip('photo')"
+                ></app-tooltip>
+              </div>
+              <app-avatar-control
+                type="project"
+                id="avatar"
+                formControlName="avatar"
+                [error]="avatar | controlError"
+              ></app-avatar-control>
+              @if (avatar | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.EMPTY_AVATAR }}
+                </div>
+              }
+            </fieldset>
+          }
+          @if (stageForm.get("city"); as city) {
+            <fieldset class="page__field">
+              <div class="content">
+                <label for="city" class="field-label">Регион*</label>
+                <app-tooltip
+                  text="Выберите регион, в котором вы сейчас живёте"
+                  [isVisible]="isHintCityVisible('city')"
+                  position="right"
+                  [tooltipWidth]="220"
+                  (show)="toggleTooltip('city')"
+                  (hide)="toggleTooltip('city')"
+                ></app-tooltip>
+              </div>
+              <app-region-select
+                id="city"
+                ariaLabel="Регион пользователя"
+                [error]="city | controlError"
+                formControlName="city"
+              ></app-region-select>
+              @if (city | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+        </div>
 
-@if (profile()) {
-  <div class="page">
-    <div class="auth__greeting">
-      <h3 class="auth__title">Привет, {{ profile()!.firstName }} {{ profile()!.lastName }}! ✌️</h3>
-      <p class="auth__info">Расскажите о себе, чтобы ваше резюме было сильным и отражало опыт</p>
-    </div>
-    <form [formGroup]="stageForm" class="page__form" (submit)="onSubmit()">
-      <div class="page__first-row">
-        @if (stageForm.get("avatar"); as avatar) {
-          <fieldset class="page__field">
+        <div class="page__first-row">
+          <div class="content">
             <div class="content">
-              <p class="text-bold-body-14">Фотография профиля*</p>
+              <p class="text-bold-body-14">Образование</p>
               <app-tooltip
-                [text]="'Идеальная фотография для резюме: свежая, с вашим лицом, хорошо различимым на нейтральном фоне (котиков мы конечно любим, но их не в этот раз)'"
-                [isVisible]="isHintPhotoVisible('photo')"
+                [text]="'Заполните информацию о том, что вы изучали. Даже если это трехнедельный интенсив по созданию роликов – для резюме важна каждая деталь'"
+                [isVisible]="isHintEducationVisible('education')"
                 [position]="'right'"
                 [tooltipWidth]="300"
                 customClass="content__hint"
-                (show)="toggleTooltip('photo')"
-                (hide)="toggleTooltip('photo')"
-              ></app-tooltip>
-            </div>
-            <app-avatar-control
-              type="project"
-              id="avatar"
-              formControlName="avatar"
-              [error]="avatar | controlError"
-            ></app-avatar-control>
-            @if (avatar | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.EMPTY_AVATAR }}
-              </div>
-            }
-          </fieldset>
-        }
-        @if (stageForm.get("city"); as city) {
-          <fieldset class="page__field">
-            <div class="content">
-              <label for="city" class="field-label">Регион*</label>
-              <app-tooltip
-                text="Выберите регион, в котором вы сейчас живёте"
-                [isVisible]="isHintCityVisible('city')"
-                position="right"
-                [tooltipWidth]="220"
-                (show)="toggleTooltip('city')"
-                (hide)="toggleTooltip('city')"
+                (show)="toggleTooltip('education')"
+                (hide)="toggleTooltip('education')"
               ></app-tooltip>
             </div>
-            <app-region-select
-              id="city"
-              ariaLabel="Регион пользователя"
-              [error]="city | controlError"
-              formControlName="city"
-            ></app-region-select>
-            @if (city | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
-          </fieldset>
-        }
-      </div>
-
-      <div class="page__first-row">
-        <div class="content">
-          <div class="content">
-            <p class="text-bold-body-14">Образование</p>
-            <app-tooltip
-              [text]="'Заполните информацию о том, что вы изучали. Даже если это трехнедельный интенсив по созданию роликов – для резюме важна каждая деталь'"
-              [isVisible]="isHintEducationVisible('education')"
-              [position]="'right'"
-              [tooltipWidth]="300"
-              customClass="content__hint"
-              (show)="toggleTooltip('education')"
-              (hide)="toggleTooltip('education')"
-            ></app-tooltip>
           </div>
-        </div>
 
-        @if (stageForm.get("educationLevel"); as educationLevel) {
-          <fieldset>
-            <label for="educationLevel" class="field-label">Уровень образования</label>
-            <app-select
-              size="big"
-              [selectedId]="selectedEducationLevelId()"
-              formControlName="educationLevel"
-              placeholder="Высшее образование-магистратура"
-              [options]="educationLevelList"
-            >
-              <i appIcon icon="arrow-no-body" appSquare="32"></i>
-            </app-select>
-            @if (educationLevel | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
-          </fieldset>
-        }
-
-        <div class="page__years">
-          @if (stageForm.get("entryYear"); as entryYear) {
-            <fieldset class="years__left">
-              <label for="entryYear" class="field-label">Дата начала</label>
+          @if (stageForm.get("educationLevel"); as educationLevel) {
+            <fieldset>
+              <label for="educationLevel" class="field-label">Уровень образования</label>
               <app-select
                 size="big"
-                formControlName="entryYear"
-                placeholder="2023 год"
-                [options]="yearListEducation"
+                [selectedId]="selectedEducationLevelId()"
+                formControlName="educationLevel"
+                placeholder="Высшее образование-магистратура"
+                [options]="educationLevelList"
               >
                 <i appIcon icon="arrow-no-body" appSquare="32"></i>
               </app-select>
+              @if (educationLevel | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
 
-              @if (entryYear | controlError: "required") {
+          <div class="page__years">
+            @if (stageForm.get("entryYear"); as entryYear) {
+              <fieldset class="years__left">
+                <label for="entryYear" class="field-label">Дата начала</label>
+                <app-select
+                  size="big"
+                  formControlName="entryYear"
+                  placeholder="2023 год"
+                  [options]="yearListEducation"
+                >
+                  <i appIcon icon="arrow-no-body" appSquare="32"></i>
+                </app-select>
+
+                @if (entryYear | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+              </fieldset>
+            }
+            @if (stageForm.get("completionYear"); as completionYear) {
+              <fieldset class="years__right">
+                <label for="completionYear" class="field-label">Дата окончания</label>
+                <app-select
+                  size="big"
+                  formControlName="completionYear"
+                  placeholder="2023 год"
+                  [options]="yearListEducation"
+                >
+                  <i appIcon icon="arrow-no-body" appSquare="32"></i>
+                </app-select>
+                @if (completionYear | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+              </fieldset>
+            }
+          </div>
+
+          @if (stageForm.get("organizationName"); as organizationName) {
+            <fieldset class="page__field">
+              <label for="organizationName" class="field-label">Название учреждения</label>
+              <app-input
+                size="big"
+                id="organizationName"
+                [error]="organizationName | controlError"
+                type="text"
+                placeholder="вуз / колледж / школа"
+                formControlName="organizationName"
+              ></app-input>
+              @if (organizationName | controlError: "required") {
                 <div class="text-body-10 error">
                   {{ errorMessage.VALIDATION_REQUIRED }}
                 </div>
               }
             </fieldset>
           }
-          @if (stageForm.get("completionYear"); as completionYear) {
-            <fieldset class="years__right">
-              <label for="completionYear" class="field-label">Дата окончания</label>
+          @if (stageForm.get("educationStatus"); as educationStatus) {
+            <fieldset>
+              <label for="educationStatus" class="field-label">Статус</label>
               <app-select
                 size="big"
-                formControlName="completionYear"
-                placeholder="2023 год"
-                [options]="yearListEducation"
+                [selectedId]="selectedEducationStatusId()"
+                formControlName="educationStatus"
+                placeholder="Студент"
+                [options]="educationStatusList"
               >
                 <i appIcon icon="arrow-no-body" appSquare="32"></i>
               </app-select>
-              @if (completionYear | controlError: "required") {
+              @if (educationStatus | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+          @if (stageForm.get("description"); as description) {
+            <fieldset class="page__field">
+              <label for="description" class="field-label">Профиль обучения</label>
+              <app-input
+                size="big"
+                id="description"
+                [haveHint]="true"
+                [tooltipText]="'Мат. вертикаль, прикладная информатика, биотехнологии – комментарии излишни, просто пишите!'"
+                [tooltipPosition]="'right'"
+                [tooltipWidth]="280"
+                [error]="description | controlError"
+                type="text"
+                placeholder="Бизнес информатика"
+                formControlName="description"
+              >
+              </app-input>
+              @if (description | controlError: "required") {
                 <div class="text-body-10 error">
                   {{ errorMessage.VALIDATION_REQUIRED }}
                 </div>
               }
             </fieldset>
           }
-        </div>
 
-        @if (stageForm.get("organizationName"); as organizationName) {
-          <fieldset class="page__field">
-            <label for="organizationName" class="field-label">Название учреждения</label>
-            <app-input
+          <div class="profile__row education__block">
+            <app-button
               size="big"
-              id="organizationName"
-              [error]="organizationName | controlError"
-              type="text"
-              placeholder="вуз / колледж / школа"
-              formControlName="organizationName"
-            ></app-input>
-            @if (organizationName | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
-          </fieldset>
-        }
-        @if (stageForm.get("educationStatus"); as educationStatus) {
-          <fieldset>
-            <label for="educationStatus" class="field-label">Статус</label>
-            <app-select
-              size="big"
-              [selectedId]="selectedEducationStatusId()"
-              formControlName="educationStatus"
-              placeholder="Студент"
-              [options]="educationStatusList"
+              customTypographyClass="text-body-12"
+              [disabled]="!isEducationDirty"
+              [ngStyle]="{
+                opacity: !isEducationDirty ? '0.6' : '1',
+                cursor: !isEducationDirty ? 'not-allowed' : 'pointer',
+              }"
+              class="page__add-education"
+              (click)="addEducation()"
             >
-              <i appIcon icon="arrow-no-body" appSquare="32"></i>
-            </app-select>
-            @if (educationStatus | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
+              <span>{{
+                editEducationClick() ? "Созранить изменения" : "Добавить образование"
+              }}</span>
+              <i appIcon icon="plus" appSquare="12"></i>
+            </app-button>
+
+            @if (educationItems().length || education.length) {
+              @for (educationItem of education.value; track $index) {
+                <div class="education__remove">
+                  <div class="education__info">
+                    <p class="text-body-12 education__text">
+                      {{ educationItem.organizationName }}
+
+                      @if (educationItem.entryYear && educationItem.completionYear) {
+                        {{ educationItem.entryYear }} год - {{ educationItem.completionYear }} год
+                      } @else if (educationItem.entryYear && !educationItem.completionYear) {
+                        {{ educationItem.entryYear }} год
+                      } @else if (!educationItem.entryYear && educationItem.completionYear) {
+                        {{ educationItem.completionYear }} год
+                      }
+
+                      {{ educationItem.description }} {{ educationItem.educationStatus }}
+                      {{ educationItem.educationLevel }}
+                    </p>
+                    <i
+                      class="edit"
+                      appIcon
+                      icon="edit-pen"
+                      appSquare="16"
+                      (click)="editEducation($index)"
+                    ></i>
+                  </div>
+                  <app-button class="basket" color="red" (click)="removeEducation($index)">
+                    <i appIcon icon="basket" appSquare="24"></i>
+                  </app-button>
+                </div>
+              }
             }
-          </fieldset>
-        }
-        @if (stageForm.get("description"); as description) {
-          <fieldset class="page__field">
-            <label for="description" class="field-label">Профиль обучения</label>
-            <app-input
+          </div>
+        </div>
+
+        <div class="page__first-row">
+          <div class="content">
+            <div class="content">
+              <p class="text-bold-body-14">Место работы</p>
+              <app-tooltip
+                [text]="'Укажите свой опыт. Разработка бота для школы, дизайн сайта для родительского бизнеса – любой опыт, который оценила какая-либо организация – ваш ключ к первой работе.'"
+                [isVisible]="isHintWorkVisible('work')"
+                [position]="'right'"
+                [tooltipWidth]="350"
+                customClass="work-section__hint"
+                (show)="toggleTooltip('work')"
+                (hide)="toggleTooltip('work')"
+              ></app-tooltip>
+            </div>
+          </div>
+
+          @if (stageForm.get("organizationNameWork"); as organizationNameWork) {
+            <fieldset>
+              <label for="organizationNameWork" class="field-label">Название</label>
+              <app-input
+                size="big"
+                id="organizationNameWork"
+                [haveHint]="true"
+                [tooltipText]="'Укажите название организации, которая оценивала/принимала вашу работу (ту самую школу, для которой вы делали бота)'"
+                [tooltipPosition]="'right'"
+                [tooltipWidth]="300"
+                [error]="organizationNameWork | controlError"
+                type="text"
+                placeholder="Проколлаб"
+                formControlName="organizationNameWork"
+              >
+              </app-input>
+              @if (organizationNameWork | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+
+          <div class="page__years">
+            @if (stageForm.get("entryYearWork"); as entryYearWork) {
+              <fieldset class="years__left">
+                <label for="entryYearWork" class="field-label">Дата начала</label>
+                <app-select
+                  size="big"
+                  [selectedId]="selectedEntryYearWorkId()"
+                  formControlName="entryYearWork"
+                  placeholder="2023 год"
+                  [options]="yearListEducation"
+                >
+                  <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__entry"></i>
+                </app-select>
+
+                @if (entryYearWork | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+              </fieldset>
+            }
+            @if (stageForm.get("completionYearWork"); as completionYearWork) {
+              <fieldset class="years__right">
+                <label for="completionYearWork" class="field-label">Дата окончания</label>
+                <app-select
+                  size="big"
+                  [selectedId]="selectedComplitionYearWorkId()"
+                  formControlName="completionYearWork"
+                  placeholder="2023 год"
+                  [options]="yearListEducation"
+                >
+                  <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__end"></i>
+                </app-select>
+
+                @if (completionYearWork | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+              </fieldset>
+            }
+          </div>
+
+          @if (stageForm.get("jobPosition"); as jobPosition) {
+            <fieldset>
+              <label for="jobPosition" class="field-label">Должность</label>
+              <app-input
+                size="big"
+                id="jobPosition"
+                [error]="jobPosition | controlError"
+                type="text"
+                placeholder="Дизайнер"
+                formControlName="jobPosition"
+              ></app-input>
+              @if (jobPosition | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+          @if (stageForm.get("descriptionWork"); as descriptionWork) {
+            <fieldset>
+              <label for="descriptionWork" class="field-label">Краткое описание</label>
+              <app-input
+                size="big"
+                id="descriptionWork"
+                [haveHint]="true"
+                [tooltipText]="'В свободной форме расскажите, чем занимались в рамках рабочего опыта (смотрели рилсы, двигали пиксели, зарабатывали деньги) P.S. Шутка'"
+                [tooltipPosition]="'right'"
+                [tooltipWidth]="300"
+                [error]="descriptionWork | controlError"
+                type="text"
+                placeholder="Образовательная платформа"
+                formControlName="descriptionWork"
+              >
+              </app-input>
+              @if (descriptionWork | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+
+          <div class="page__row education__block">
+            <app-button
+              customTypographyClass="text-body-12"
               size="big"
-              id="description"
-              [haveHint]="true"
-              [tooltipText]="'Мат. вертикаль, прикладная информатика, биотехнологии – комментарии излишни, просто пишите!'"
-              [tooltipPosition]="'right'"
-              [tooltipWidth]="280"
-              [error]="description | controlError"
-              type="text"
-              placeholder="Бизнес информатика"
-              formControlName="description"
+              [disabled]="!isWorkDirty"
+              [ngStyle]="{
+                opacity: !isWorkDirty ? '0.6' : '1',
+                cursor: !isWorkDirty ? 'not-allowed' : 'pointer',
+              }"
+              class="page__add-education"
+              (click)="addWork()"
             >
-            </app-input>
-            @if (description | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
+              <span>{{ editWorkClick() ? "Сохранить изменения" : "Добавить место работы" }}</span>
+              <i appIcon icon="plus" appSquare="12"></i>
+            </app-button>
+
+            @if (workItems().length || workExperience.length) {
+              @for (workItem of workExperience.value; track $index) {
+                <div class="education__remove">
+                  <div class="education__info">
+                    <p class="text-body-16 education__text">
+                      {{ workItem.organizationName }}
+                      @if (workItem.entryYear && workItem.completionYear) {
+                        {{ workItem.entryYear }} год - {{ workItem.completionYear }} год
+                      } @else if (workItem.entryYear && !workItem.completionYear) {
+                        {{ workItem.entryYear }} год
+                      } @else if (!workItem.entryYear && workItem.completionYear) {
+                        {{ workItem.completionYear }} год
+                      }
+                      {{ workItem.description }}
+                      {{ workItem.jobPosition }}
+                    </p>
+                    <i
+                      class="edit"
+                      appIcon
+                      icon="edit-pen"
+                      appSquare="20"
+                      (click)="editWork($index)"
+                    ></i>
+                  </div>
+                  <app-button class="basket" color="red" (click)="removeWork($index)">
+                    <i appIcon icon="basket" appSquare="24"></i>
+                  </app-button>
+                </div>
+              }
             }
-          </fieldset>
-        }
+          </div>
+        </div>
+
+        <div class="page__first-row">
+          <ng-container formArrayName="achievements">
+            <ul>
+              @for (control of achievements.controls; track control.value.id; let i = $index) {
+                <li class="page__achievement">
+                  <form [formGroupName]="i" class="achievement">
+                    <div class="achievement__first-row">
+                      @if (achievements.at(i)?.get("title"); as title) {
+                        <fieldset>
+                          <div class="content">
+                            <p class="text-bold-body-14">Достижения</p>
+                            <app-tooltip
+                              [text]="'Кенгуру, медвежонок, а может победа во всероссийском акселераторе технологических проектов? Твоему будущему работодателю надо видеть, что ты самый активный!'"
+                              [isVisible]="isHintAchievementsVisible('achievements')"
+                              [position]="'right'"
+                              [tooltipWidth]="300"
+                              customClass="content__hint"
+                              (show)="toggleTooltip('achievements')"
+                              (hide)="toggleTooltip('achievements')"
+                            ></app-tooltip>
+                          </div>
+                          <app-input
+                            size="big"
+                            [error]="title | controlError"
+                            placeholder="Название конкурса"
+                            formControlName="title"
+                          ></app-input>
+                          @if (title | controlError: "required") {
+                            <div class="text-body-10 error">
+                              {{ errorMessage.VALIDATION_REQUIRED }}
+                            </div>
+                          }
+                        </fieldset>
+                      }
+                      <app-button
+                        size="big"
+                        class="achievement__remove"
+                        color="red"
+                        (click)="removeAchievement(i)"
+                      >
+                        <span>Удалить</span>
+                        <i appIcon icon="basket" appSquare="24"></i>
+                      </app-button>
+                    </div>
+                    @if (achievements.at(i).get("status"); as status) {
+                      <fieldset>
+                        <app-input
+                          size="big"
+                          [error]="status | controlError"
+                          placeholder="Занятое место"
+                          formControlName="status"
+                        ></app-input>
+                        @if (status | controlError: "required") {
+                          <div class="text-body-10 error">
+                            {{ errorMessage.VALIDATION_REQUIRED }}
+                          </div>
+                        }
+                      </fieldset>
+                    }
+                  </form>
+                </li>
+              }
+            </ul>
+          </ng-container>
+          <app-button
+            size="big"
+            customTypographyClass="text-body-12"
+            class="page__add-achievement"
+            (click)="addAchievement()"
+          >
+            <span>Добавить достижение</span>
+            <i appIcon icon="plus" appSquare="12"></i>
+          </app-button>
+        </div>
+
+        <div class="page__first-row">
+          <div class="content">
+            <div class="content">
+              <p class="text-bold-body-14">Язык</p>
+              <app-tooltip
+                [text]="'Вот и понадобились те самые много лет школьной программы английского, французского, китайского, а может и японского – рассказывайте все!'"
+                [isVisible]="isHintLanguageVisible('language')"
+                [position]="'right'"
+                [tooltipWidth]="300"
+                customClass="content__hint"
+                (show)="toggleTooltip('language')"
+                (hide)="toggleTooltip('language')"
+              ></app-tooltip>
+            </div>
+          </div>
+          <div class="page__years--wrapper">
+            <div class="page__years">
+              @if (stageForm.get("language"); as language) {
+                <fieldset class="years__left">
+                  <label for="language" class="field-label">Уровень</label>
+                  <app-select
+                    size="big"
+                    [selectedId]="selectedLanguageId()"
+                    formControlName="language"
+                    placeholder="Английский"
+                    [options]="languageList"
+                  >
+                    <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__end"></i>
+                  </app-select>
+
+                  @if (language | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+              @if (stageForm.get("languageLevel"); as languageLevel) {
+                <fieldset class="years__right" style="margin-top: 26px">
+                  <app-select
+                    size="big"
+                    [selectedId]="selectedLanguageLevelId()"
+                    formControlName="languageLevel"
+                    placeholder="B1"
+                    [options]="languageLevelList"
+                  >
+                    <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__end"></i>
+                  </app-select>
+
+                  @if (languageLevel | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+            </div>
+            <span class="text-body-12 page__years--attention"
+              >Количество добавляемых языков не более 4-х</span
+            >
+          </div>
 
-        <div class="profile__row education__block">
           <app-button
             size="big"
             customTypographyClass="text-body-12"
-            [disabled]="!isEducationDirty"
+            [disabled]="
+              !isLanguageDirty || languageItems().length === 4 || userLanguages.length === 4
+            "
             [ngStyle]="{
-              opacity: !isEducationDirty ? '0.6' : '1',
-              cursor: !isEducationDirty ? 'not-allowed' : 'pointer',
+              opacity: !isLanguageDirty ? '0.6' : '1',
+              cursor: !isLanguageDirty ? 'not-allowed' : 'pointer',
             }"
             class="page__add-education"
-            (click)="addEducation()"
+            (click)="addLanguage()"
           >
-            <span>{{ editEducationClick() ? "Созранить изменения" : "Добавить образование" }}</span>
+            <span>{{ editLanguageClick() ? "Сохранить изменения" : "Добавить язык" }}</span>
             <i appIcon icon="plus" appSquare="12"></i>
           </app-button>
 
-          @if (educationItems().length || education.length) {
-            @for (educationItem of education.value; track $index) {
-              <div class="education__remove">
-                <div class="education__info">
-                  <p class="text-body-12 education__text">
-                    {{ educationItem.organizationName }}
-
-                    @if (educationItem.entryYear && educationItem.completionYear) {
-                      {{ educationItem.entryYear }} год - {{ educationItem.completionYear }} год
-                    } @else if (educationItem.entryYear && !educationItem.completionYear) {
-                      {{ educationItem.entryYear }} год
-                    } @else if (!educationItem.entryYear && educationItem.completionYear) {
-                      {{ educationItem.completionYear }} год
-                    }
+          <div class="page__row education__block">
+            @if (languageItems().length || userLanguages.length) {
+              @for (languageItem of userLanguages.value; track $index) {
+                <div class="education__remove">
+                  <div class="education__info">
+                    <p class="text-body-16 education__text">
+                      {{ languageItem.language }} {{ languageItem.languageLevel }}
+                    </p>
+                    <i
+                      class="edit"
+                      appIcon
+                      icon="edit-pen"
+                      appSquare="20"
+                      (click)="editLanguage($index)"
+                    ></i>
+                  </div>
+                  <app-button class="basket" color="red" (click)="removeLanguage($index)">
+                    <i appIcon icon="basket" appSquare="24"></i>
+                  </app-button>
+                </div>
+              }
+            }
+          </div>
+        </div>
 
-                    {{ educationItem.description }} {{ educationItem.educationStatus }}
-                    {{ educationItem.educationLevel }}
-                  </p>
-                  <i
-                    class="edit"
-                    appIcon
-                    icon="edit-pen"
-                    appSquare="16"
-                    (click)="editEducation($index)"
-                  ></i>
+        <div class="page__buttons">
+          <app-button
+            customTypographyClass="text-body-12"
+            size="big"
+            (click)="onSkipRegistration()"
+            color="grey"
+            [loader]="skipSubmitting()"
+            >закончить регистрацию позже</app-button
+          >
+          <app-button
+            size="big"
+            [disabled]="
+              editEducationClick() ||
+              editWorkClick() ||
+              editLanguageClick() ||
+              isEducationDirty ||
+              isWorkDirty
+            "
+            [ngStyle]="{
+              opacity:
+                editEducationClick() ||
+                editWorkClick() ||
+                editLanguageClick() ||
+                isEducationDirty ||
+                isWorkDirty
+                  ? '0.6'
+                  : '1',
+              cursor:
+                editEducationClick() ||
+                editWorkClick() ||
+                editLanguageClick() ||
+                isEducationDirty ||
+                isWorkDirty
+                  ? 'not-allowed'
+                  : 'pointer',
+            }"
+            type="submit"
+            customTypographyClass="text-body-12"
+            [loader]="stageSubmitting()"
+            >продолжить</app-button
+          >
+        </div>
+      </form>
+      <app-modal
+        [open]="isModalErrorYear()"
+        (openChange)="isModalErrorYear.set(!isModalErrorYear())"
+      >
+        <div class="cancel">
+          <div class="cancel__top">
+            <i (click)="isModalErrorYear.set(false)" appIcon icon="cross" class="cancel__cross"></i>
+            <p class="cancel__title text-bold-body-14">Произошла ошибка при отправке данных!</p>
+          </div>
+          <p class="text-body-10 cancel__text">{{ isModalErrorYearText() }}.</p>
+        </div>
+      </app-modal>
+    </div>
+  }
+} @else {
+  @if (profile()) {
+    <div class="page">
+      <div class="auth__greeting">
+        <h3 class="auth__title">
+          Привет, {{ profile()!.firstName }} {{ profile()!.lastName }}! ✌️
+        </h3>
+        <p class="auth__info">Расскажите о себе, чтобы ваше резюме было сильным и отражало опыт</p>
+      </div>
+      <form appFormLayout [formGroup]="stageForm" class="page__form" (submit)="onSubmit()">
+        <div class="page__first-row">
+          @if (stageForm.get("avatar"); as avatar) {
+            <fieldset class="page__field">
+              <div class="content">
+                <p class="text-bold-body-14">Фотография профиля*</p>
+                <app-tooltip
+                  [text]="'Идеальная фотография для резюме: свежая, с вашим лицом, хорошо различимым на нейтральном фоне (котиков мы конечно любим, но их не в этот раз)'"
+                  [isVisible]="isHintPhotoVisible('photo')"
+                  [position]="'right'"
+                  [tooltipWidth]="300"
+                  customClass="content__hint"
+                  (show)="toggleTooltip('photo')"
+                  (hide)="toggleTooltip('photo')"
+                ></app-tooltip>
+              </div>
+              <app-avatar-control
+                type="project"
+                id="avatar"
+                formControlName="avatar"
+                [error]="avatar | controlError"
+              ></app-avatar-control>
+              @if (avatar | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.EMPTY_AVATAR }}
                 </div>
-                <app-button class="basket" color="red" (click)="removeEducation($index)">
-                  <i appIcon icon="basket" appSquare="24"></i>
-                </app-button>
+              }
+            </fieldset>
+          }
+          @if (stageForm.get("city"); as city) {
+            <fieldset class="page__field">
+              <div class="content">
+                <label for="city" class="field-label">Регион*</label>
+                <app-tooltip
+                  text="Выберите регион, в котором вы сейчас живёте"
+                  [isVisible]="isHintCityVisible('city')"
+                  position="right"
+                  [tooltipWidth]="220"
+                  (show)="toggleTooltip('city')"
+                  (hide)="toggleTooltip('city')"
+                ></app-tooltip>
               </div>
-            }
+              <app-region-select
+                id="city"
+                ariaLabel="Регион пользователя"
+                [error]="city | controlError"
+                formControlName="city"
+              ></app-region-select>
+              @if (city | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
           }
         </div>
-      </div>
 
-      <div class="page__first-row">
-        <div class="content">
+        <div class="page__first-row">
           <div class="content">
-            <p class="text-bold-body-14">Место работы</p>
-            <app-tooltip
-              [text]="'Укажите свой опыт. Разработка бота для школы, дизайн сайта для родительского бизнеса – любой опыт, который оценила какая-либо организация – ваш ключ к первой работе.'"
-              [isVisible]="isHintWorkVisible('work')"
-              [position]="'right'"
-              [tooltipWidth]="350"
-              customClass="work-section__hint"
-              (show)="toggleTooltip('work')"
-              (hide)="toggleTooltip('work')"
-            ></app-tooltip>
+            <div class="content">
+              <p class="text-bold-body-14">Образование</p>
+              <app-tooltip
+                [text]="'Заполните информацию о том, что вы изучали. Даже если это трехнедельный интенсив по созданию роликов – для резюме важна каждая деталь'"
+                [isVisible]="isHintEducationVisible('education')"
+                [position]="'right'"
+                [tooltipWidth]="300"
+                customClass="content__hint"
+                (show)="toggleTooltip('education')"
+                (hide)="toggleTooltip('education')"
+              ></app-tooltip>
+            </div>
           </div>
-        </div>
-
-        @if (stageForm.get("organizationNameWork"); as organizationNameWork) {
-          <fieldset>
-            <label for="organizationNameWork" class="field-label">Название</label>
-            <app-input
-              size="big"
-              id="organizationNameWork"
-              [haveHint]="true"
-              [tooltipText]="'Укажите название организации, которая оценивала/принимала вашу работу (ту самую школу, для которой вы делали бота)'"
-              [tooltipPosition]="'right'"
-              [tooltipWidth]="300"
-              [error]="organizationNameWork | controlError"
-              type="text"
-              placeholder="Проколлаб"
-              formControlName="organizationNameWork"
-            >
-            </app-input>
-            @if (organizationNameWork | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
-          </fieldset>
-        }
 
-        <div class="page__years">
-          @if (stageForm.get("entryYearWork"); as entryYearWork) {
-            <fieldset class="years__left">
-              <label for="entryYearWork" class="field-label">Дата начала</label>
+          @if (stageForm.get("educationLevel"); as educationLevel) {
+            <fieldset>
+              <label for="educationLevel" class="field-label">Уровень образования</label>
               <app-select
                 size="big"
-                [selectedId]="selectedEntryYearWorkId()"
-                formControlName="entryYearWork"
-                placeholder="2023 год"
-                [options]="yearListEducation"
+                [selectedId]="selectedEducationLevelId()"
+                formControlName="educationLevel"
+                placeholder="Высшее образование-магистратура"
+                [options]="educationLevelList"
               >
-                <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__entry"></i>
+                <i appIcon icon="arrow-no-body" appSquare="32"></i>
               </app-select>
+              @if (educationLevel | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+
+          <div class="page__years">
+            @if (stageForm.get("entryYear"); as entryYear) {
+              <fieldset class="years__left">
+                <label for="entryYear" class="field-label">Дата начала</label>
+                <app-select
+                  size="big"
+                  formControlName="entryYear"
+                  placeholder="2023 год"
+                  [options]="yearListEducation"
+                >
+                  <i appIcon icon="arrow-no-body" appSquare="32"></i>
+                </app-select>
+
+                @if (entryYear | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+              </fieldset>
+            }
+            @if (stageForm.get("completionYear"); as completionYear) {
+              <fieldset class="years__right">
+                <label for="completionYear" class="field-label">Дата окончания</label>
+                <app-select
+                  size="big"
+                  formControlName="completionYear"
+                  placeholder="2023 год"
+                  [options]="yearListEducation"
+                >
+                  <i appIcon icon="arrow-no-body" appSquare="32"></i>
+                </app-select>
+                @if (completionYear | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+              </fieldset>
+            }
+          </div>
 
-              @if (entryYearWork | controlError: "required") {
+          @if (stageForm.get("organizationName"); as organizationName) {
+            <fieldset class="page__field">
+              <label for="organizationName" class="field-label">Название учреждения</label>
+              <app-input
+                size="big"
+                id="organizationName"
+                [error]="organizationName | controlError"
+                type="text"
+                placeholder="вуз / колледж / школа"
+                formControlName="organizationName"
+              ></app-input>
+              @if (organizationName | controlError: "required") {
                 <div class="text-body-10 error">
                   {{ errorMessage.VALIDATION_REQUIRED }}
                 </div>
               }
             </fieldset>
           }
-          @if (stageForm.get("completionYearWork"); as completionYearWork) {
-            <fieldset class="years__right">
-              <label for="completionYearWork" class="field-label">Дата окончания</label>
+          @if (stageForm.get("educationStatus"); as educationStatus) {
+            <fieldset>
+              <label for="educationStatus" class="field-label">Статус</label>
               <app-select
                 size="big"
-                [selectedId]="selectedComplitionYearWorkId()"
-                formControlName="completionYearWork"
-                placeholder="2023 год"
-                [options]="yearListEducation"
+                [selectedId]="selectedEducationStatusId()"
+                formControlName="educationStatus"
+                placeholder="Студент"
+                [options]="educationStatusList"
               >
-                <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__end"></i>
+                <i appIcon icon="arrow-no-body" appSquare="32"></i>
               </app-select>
-
-              @if (completionYearWork | controlError: "required") {
+              @if (educationStatus | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+          @if (stageForm.get("description"); as description) {
+            <fieldset class="page__field">
+              <label for="description" class="field-label">Профиль обучения</label>
+              <app-input
+                size="big"
+                id="description"
+                [haveHint]="true"
+                [tooltipText]="'Мат. вертикаль, прикладная информатика, биотехнологии – комментарии излишни, просто пишите!'"
+                [tooltipPosition]="'right'"
+                [tooltipWidth]="280"
+                [error]="description | controlError"
+                type="text"
+                placeholder="Бизнес информатика"
+                formControlName="description"
+              >
+              </app-input>
+              @if (description | controlError: "required") {
                 <div class="text-body-10 error">
                   {{ errorMessage.VALIDATION_REQUIRED }}
                 </div>
               }
             </fieldset>
           }
-        </div>
 
-        @if (stageForm.get("jobPosition"); as jobPosition) {
-          <fieldset>
-            <label for="jobPosition" class="field-label">Должность</label>
-            <app-input
+          <div class="profile__row education__block">
+            <app-button
               size="big"
-              id="jobPosition"
-              [error]="jobPosition | controlError"
-              type="text"
-              placeholder="Дизайнер"
-              formControlName="jobPosition"
-            ></app-input>
-            @if (jobPosition | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
-          </fieldset>
-        }
-        @if (stageForm.get("descriptionWork"); as descriptionWork) {
-          <fieldset>
-            <label for="descriptionWork" class="field-label">Краткое описание</label>
-            <app-input
-              size="big"
-              id="descriptionWork"
-              [haveHint]="true"
-              [tooltipText]="'В свободной форме расскажите, чем занимались в рамках рабочего опыта (смотрели рилсы, двигали пиксели, зарабатывали деньги) P.S. Шутка'"
-              [tooltipPosition]="'right'"
-              [tooltipWidth]="300"
-              [error]="descriptionWork | controlError"
-              type="text"
-              placeholder="Образовательная платформа"
-              formControlName="descriptionWork"
+              customTypographyClass="text-body-12"
+              [disabled]="!isEducationDirty"
+              [ngStyle]="{
+                opacity: !isEducationDirty ? '0.6' : '1',
+                cursor: !isEducationDirty ? 'not-allowed' : 'pointer',
+              }"
+              class="page__add-education"
+              (click)="addEducation()"
             >
-            </app-input>
-            @if (descriptionWork | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
-          </fieldset>
-        }
+              <span>{{
+                editEducationClick() ? "Созранить изменения" : "Добавить образование"
+              }}</span>
+              <i appIcon icon="plus" appSquare="12"></i>
+            </app-button>
 
-        <div class="page__row education__block">
-          <app-button
-            customTypographyClass="text-body-12"
-            size="big"
-            [disabled]="!isWorkDirty"
-            [ngStyle]="{
-              opacity: !isWorkDirty ? '0.6' : '1',
-              cursor: !isWorkDirty ? 'not-allowed' : 'pointer',
-            }"
-            class="page__add-education"
-            (click)="addWork()"
-          >
-            <span>{{ editWorkClick() ? "Сохранить изменения" : "Добавить место работы" }}</span>
-            <i appIcon icon="plus" appSquare="12"></i>
-          </app-button>
+            @if (educationItems().length || education.length) {
+              @for (educationItem of education.value; track $index) {
+                <div class="education__remove">
+                  <div class="education__info">
+                    <p class="text-body-12 education__text">
+                      {{ educationItem.organizationName }}
 
-          @if (workItems().length || workExperience.length) {
-            @for (workItem of workExperience.value; track $index) {
-              <div class="education__remove">
-                <div class="education__info">
-                  <p class="text-body-16 education__text">
-                    {{ workItem.organizationName }}
-                    @if (workItem.entryYear && workItem.completionYear) {
-                      {{ workItem.entryYear }} год - {{ workItem.completionYear }} год
-                    } @else if (workItem.entryYear && !workItem.completionYear) {
-                      {{ workItem.entryYear }} год
-                    } @else if (!workItem.entryYear && workItem.completionYear) {
-                      {{ workItem.completionYear }} год
-                    }
-                    {{ workItem.description }}
-                    {{ workItem.jobPosition }}
-                  </p>
-                  <i
-                    class="edit"
-                    appIcon
-                    icon="edit-pen"
-                    appSquare="20"
-                    (click)="editWork($index)"
-                  ></i>
-                </div>
-                <app-button class="basket" color="red" (click)="removeWork($index)">
-                  <i appIcon icon="basket" appSquare="24"></i>
-                </app-button>
-              </div>
-            }
-          }
-        </div>
-      </div>
+                      @if (educationItem.entryYear && educationItem.completionYear) {
+                        {{ educationItem.entryYear }} год - {{ educationItem.completionYear }} год
+                      } @else if (educationItem.entryYear && !educationItem.completionYear) {
+                        {{ educationItem.entryYear }} год
+                      } @else if (!educationItem.entryYear && educationItem.completionYear) {
+                        {{ educationItem.completionYear }} год
+                      }
 
-      <div class="page__first-row">
-        <ng-container formArrayName="achievements">
-          <ul>
-            @for (control of achievements.controls; track control.value.id; let i = $index) {
-              <li class="page__achievement">
-                <form [formGroupName]="i" class="achievement">
-                  <div class="achievement__first-row">
-                    @if (achievements.at(i)?.get("title"); as title) {
-                      <fieldset>
-                        <div class="content">
-                          <p class="text-bold-body-14">Достижения</p>
-                          <app-tooltip
-                            [text]="'Кенгуру, медвежонок, а может победа во всероссийском акселераторе технологических проектов? Твоему будущему работодателю надо видеть, что ты самый активный!'"
-                            [isVisible]="isHintAchievementsVisible('achievements')"
-                            [position]="'right'"
-                            [tooltipWidth]="300"
-                            customClass="content__hint"
-                            (show)="toggleTooltip('achievements')"
-                            (hide)="toggleTooltip('achievements')"
-                          ></app-tooltip>
-                        </div>
-                        <app-input
-                          size="big"
-                          [error]="title | controlError"
-                          placeholder="Название конкурса"
-                          formControlName="title"
-                        ></app-input>
-                        @if (title | controlError: "required") {
-                          <div class="text-body-10 error">
-                            {{ errorMessage.VALIDATION_REQUIRED }}
-                          </div>
-                        }
-                      </fieldset>
-                    }
-                    <app-button
-                      size="big"
-                      class="achievement__remove"
-                      color="red"
-                      (click)="removeAchievement(i)"
-                    >
-                      <span>Удалить</span>
-                      <i appIcon icon="basket" appSquare="24"></i>
-                    </app-button>
+                      {{ educationItem.description }} {{ educationItem.educationStatus }}
+                      {{ educationItem.educationLevel }}
+                    </p>
+                    <i
+                      class="edit"
+                      appIcon
+                      icon="edit-pen"
+                      appSquare="16"
+                      (click)="editEducation($index)"
+                    ></i>
                   </div>
-                  @if (achievements.at(i).get("status"); as status) {
-                    <fieldset>
-                      <app-input
-                        size="big"
-                        [error]="status | controlError"
-                        placeholder="Занятое место"
-                        formControlName="status"
-                      ></app-input>
-                      @if (status | controlError: "required") {
-                        <div class="text-body-10 error">
-                          {{ errorMessage.VALIDATION_REQUIRED }}
-                        </div>
-                      }
-                    </fieldset>
-                  }
-                </form>
-              </li>
+                  <app-button class="basket" color="red" (click)="removeEducation($index)">
+                    <i appIcon icon="basket" appSquare="24"></i>
+                  </app-button>
+                </div>
+              }
             }
-          </ul>
-        </ng-container>
-        <app-button
-          size="big"
-          customTypographyClass="text-body-12"
-          class="page__add-achievement"
-          (click)="addAchievement()"
-        >
-          <span>Добавить достижение</span>
-          <i appIcon icon="plus" appSquare="12"></i>
-        </app-button>
-      </div>
+          </div>
+        </div>
 
-      <div class="page__first-row">
-        <div class="content">
+        <div class="page__first-row">
           <div class="content">
-            <p class="text-bold-body-14">Язык</p>
-            <app-tooltip
-              [text]="'Вот и понадобились те самые много лет школьной программы английского, французского, китайского, а может и японского – рассказывайте все!'"
-              [isVisible]="isHintLanguageVisible('language')"
-              [position]="'right'"
-              [tooltipWidth]="300"
-              customClass="content__hint"
-              (show)="toggleTooltip('language')"
-              (hide)="toggleTooltip('language')"
-            ></app-tooltip>
+            <div class="content">
+              <p class="text-bold-body-14">Место работы</p>
+              <app-tooltip
+                [text]="'Укажите свой опыт. Разработка бота для школы, дизайн сайта для родительского бизнеса – любой опыт, который оценила какая-либо организация – ваш ключ к первой работе.'"
+                [isVisible]="isHintWorkVisible('work')"
+                [position]="'right'"
+                [tooltipWidth]="350"
+                customClass="work-section__hint"
+                (show)="toggleTooltip('work')"
+                (hide)="toggleTooltip('work')"
+              ></app-tooltip>
+            </div>
           </div>
-        </div>
-        <div class="page__years--wrapper">
+
+          @if (stageForm.get("organizationNameWork"); as organizationNameWork) {
+            <fieldset>
+              <label for="organizationNameWork" class="field-label">Название</label>
+              <app-input
+                size="big"
+                id="organizationNameWork"
+                [haveHint]="true"
+                [tooltipText]="'Укажите название организации, которая оценивала/принимала вашу работу (ту самую школу, для которой вы делали бота)'"
+                [tooltipPosition]="'right'"
+                [tooltipWidth]="300"
+                [error]="organizationNameWork | controlError"
+                type="text"
+                placeholder="Проколлаб"
+                formControlName="organizationNameWork"
+              >
+              </app-input>
+              @if (organizationNameWork | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+
           <div class="page__years">
-            @if (stageForm.get("language"); as language) {
+            @if (stageForm.get("entryYearWork"); as entryYearWork) {
               <fieldset class="years__left">
-                <label for="language" class="field-label">Уровень</label>
+                <label for="entryYearWork" class="field-label">Дата начала</label>
                 <app-select
                   size="big"
-                  [selectedId]="selectedLanguageId()"
-                  formControlName="language"
-                  placeholder="Английский"
-                  [options]="languageList"
+                  [selectedId]="selectedEntryYearWorkId()"
+                  formControlName="entryYearWork"
+                  placeholder="2023 год"
+                  [options]="yearListEducation"
                 >
-                  <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__end"></i>
+                  <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__entry"></i>
                 </app-select>
 
-                @if (language | controlError: "required") {
+                @if (entryYearWork | controlError: "required") {
                   <div class="text-body-10 error">
                     {{ errorMessage.VALIDATION_REQUIRED }}
                   </div>
                 }
               </fieldset>
             }
-            @if (stageForm.get("languageLevel"); as languageLevel) {
-              <fieldset class="years__right" style="margin-top: 26px">
+            @if (stageForm.get("completionYearWork"); as completionYearWork) {
+              <fieldset class="years__right">
+                <label for="completionYearWork" class="field-label">Дата окончания</label>
                 <app-select
                   size="big"
-                  [selectedId]="selectedLanguageLevelId()"
-                  formControlName="languageLevel"
-                  placeholder="B1"
-                  [options]="languageLevelList"
+                  [selectedId]="selectedComplitionYearWorkId()"
+                  formControlName="completionYearWork"
+                  placeholder="2023 год"
+                  [options]="yearListEducation"
                 >
                   <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__end"></i>
                 </app-select>
 
-                @if (languageLevel | controlError: "required") {
+                @if (completionYearWork | controlError: "required") {
                   <div class="text-body-10 error">
                     {{ errorMessage.VALIDATION_REQUIRED }}
                   </div>
@@ -557,104 +1004,332 @@ <h3 class="auth__title">Привет, {{ profile()!.firstName }} {{ profile()!.l
               </fieldset>
             }
           </div>
-          <span class="text-body-12 page__years--attention"
-            >Количество добавляемых языков не более 4-х</span
+
+          @if (stageForm.get("jobPosition"); as jobPosition) {
+            <fieldset>
+              <label for="jobPosition" class="field-label">Должность</label>
+              <app-input
+                size="big"
+                id="jobPosition"
+                [error]="jobPosition | controlError"
+                type="text"
+                placeholder="Дизайнер"
+                formControlName="jobPosition"
+              ></app-input>
+              @if (jobPosition | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+          @if (stageForm.get("descriptionWork"); as descriptionWork) {
+            <fieldset>
+              <label for="descriptionWork" class="field-label">Краткое описание</label>
+              <app-input
+                size="big"
+                id="descriptionWork"
+                [haveHint]="true"
+                [tooltipText]="'В свободной форме расскажите, чем занимались в рамках рабочего опыта (смотрели рилсы, двигали пиксели, зарабатывали деньги) P.S. Шутка'"
+                [tooltipPosition]="'right'"
+                [tooltipWidth]="300"
+                [error]="descriptionWork | controlError"
+                type="text"
+                placeholder="Образовательная платформа"
+                formControlName="descriptionWork"
+              >
+              </app-input>
+              @if (descriptionWork | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+
+          <div class="page__row education__block">
+            <app-button
+              customTypographyClass="text-body-12"
+              size="big"
+              [disabled]="!isWorkDirty"
+              [ngStyle]="{
+                opacity: !isWorkDirty ? '0.6' : '1',
+                cursor: !isWorkDirty ? 'not-allowed' : 'pointer',
+              }"
+              class="page__add-education"
+              (click)="addWork()"
+            >
+              <span>{{ editWorkClick() ? "Сохранить изменения" : "Добавить место работы" }}</span>
+              <i appIcon icon="plus" appSquare="12"></i>
+            </app-button>
+
+            @if (workItems().length || workExperience.length) {
+              @for (workItem of workExperience.value; track $index) {
+                <div class="education__remove">
+                  <div class="education__info">
+                    <p class="text-body-16 education__text">
+                      {{ workItem.organizationName }}
+                      @if (workItem.entryYear && workItem.completionYear) {
+                        {{ workItem.entryYear }} год - {{ workItem.completionYear }} год
+                      } @else if (workItem.entryYear && !workItem.completionYear) {
+                        {{ workItem.entryYear }} год
+                      } @else if (!workItem.entryYear && workItem.completionYear) {
+                        {{ workItem.completionYear }} год
+                      }
+                      {{ workItem.description }}
+                      {{ workItem.jobPosition }}
+                    </p>
+                    <i
+                      class="edit"
+                      appIcon
+                      icon="edit-pen"
+                      appSquare="20"
+                      (click)="editWork($index)"
+                    ></i>
+                  </div>
+                  <app-button class="basket" color="red" (click)="removeWork($index)">
+                    <i appIcon icon="basket" appSquare="24"></i>
+                  </app-button>
+                </div>
+              }
+            }
+          </div>
+        </div>
+
+        <div class="page__first-row">
+          <ng-container formArrayName="achievements">
+            <ul>
+              @for (control of achievements.controls; track control.value.id; let i = $index) {
+                <li class="page__achievement">
+                  <form appFormLayout [formGroupName]="i" class="achievement">
+                    <div class="achievement__first-row">
+                      @if (achievements.at(i)?.get("title"); as title) {
+                        <fieldset>
+                          <div class="content">
+                            <p class="text-bold-body-14">Достижения</p>
+                            <app-tooltip
+                              [text]="'Кенгуру, медвежонок, а может победа во всероссийском акселераторе технологических проектов? Твоему будущему работодателю надо видеть, что ты самый активный!'"
+                              [isVisible]="isHintAchievementsVisible('achievements')"
+                              [position]="'right'"
+                              [tooltipWidth]="300"
+                              customClass="content__hint"
+                              (show)="toggleTooltip('achievements')"
+                              (hide)="toggleTooltip('achievements')"
+                            ></app-tooltip>
+                          </div>
+                          <app-input
+                            size="big"
+                            [error]="title | controlError"
+                            placeholder="Название конкурса"
+                            formControlName="title"
+                          ></app-input>
+                          @if (title | controlError: "required") {
+                            <div class="text-body-10 error">
+                              {{ errorMessage.VALIDATION_REQUIRED }}
+                            </div>
+                          }
+                        </fieldset>
+                      }
+                      <app-button
+                        size="big"
+                        class="achievement__remove"
+                        color="red"
+                        (click)="removeAchievement(i)"
+                      >
+                        <span>Удалить</span>
+                        <i appIcon icon="basket" appSquare="24"></i>
+                      </app-button>
+                    </div>
+                    @if (achievements.at(i).get("status"); as status) {
+                      <fieldset>
+                        <app-input
+                          size="big"
+                          [error]="status | controlError"
+                          placeholder="Занятое место"
+                          formControlName="status"
+                        ></app-input>
+                        @if (status | controlError: "required") {
+                          <div class="text-body-10 error">
+                            {{ errorMessage.VALIDATION_REQUIRED }}
+                          </div>
+                        }
+                      </fieldset>
+                    }
+                  </form>
+                </li>
+              }
+            </ul>
+          </ng-container>
+          <app-button
+            size="big"
+            customTypographyClass="text-body-12"
+            class="page__add-achievement"
+            (click)="addAchievement()"
           >
+            <span>Добавить достижение</span>
+            <i appIcon icon="plus" appSquare="12"></i>
+          </app-button>
         </div>
 
-        <app-button
-          size="big"
-          customTypographyClass="text-body-12"
-          [disabled]="
-            !isLanguageDirty || languageItems().length === 4 || userLanguages.length === 4
-          "
-          [ngStyle]="{
-            opacity: !isLanguageDirty ? '0.6' : '1',
-            cursor: !isLanguageDirty ? 'not-allowed' : 'pointer',
-          }"
-          class="page__add-education"
-          (click)="addLanguage()"
-        >
-          <span>{{ editLanguageClick() ? "Сохранить изменения" : "Добавить язык" }}</span>
-          <i appIcon icon="plus" appSquare="12"></i>
-        </app-button>
-
-        <div class="page__row education__block">
-          @if (languageItems().length || userLanguages.length) {
-            @for (languageItem of userLanguages.value; track $index) {
-              <div class="education__remove">
-                <div class="education__info">
-                  <p class="text-body-16 education__text">
-                    {{ languageItem.language }} {{ languageItem.languageLevel }}
-                  </p>
-                  <i
-                    class="edit"
-                    appIcon
-                    icon="edit-pen"
-                    appSquare="20"
-                    (click)="editLanguage($index)"
-                  ></i>
+        <div class="page__first-row">
+          <div class="content">
+            <div class="content">
+              <p class="text-bold-body-14">Язык</p>
+              <app-tooltip
+                [text]="'Вот и понадобились те самые много лет школьной программы английского, французского, китайского, а может и японского – рассказывайте все!'"
+                [isVisible]="isHintLanguageVisible('language')"
+                [position]="'right'"
+                [tooltipWidth]="300"
+                customClass="content__hint"
+                (show)="toggleTooltip('language')"
+                (hide)="toggleTooltip('language')"
+              ></app-tooltip>
+            </div>
+          </div>
+          <div class="page__years--wrapper">
+            <div class="page__years">
+              @if (stageForm.get("language"); as language) {
+                <fieldset class="years__left">
+                  <label for="language" class="field-label">Уровень</label>
+                  <app-select
+                    size="big"
+                    [selectedId]="selectedLanguageId()"
+                    formControlName="language"
+                    placeholder="Английский"
+                    [options]="languageList"
+                  >
+                    <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__end"></i>
+                  </app-select>
+
+                  @if (language | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+              @if (stageForm.get("languageLevel"); as languageLevel) {
+                <fieldset class="years__right" style="margin-top: 26px">
+                  <app-select
+                    size="big"
+                    [selectedId]="selectedLanguageLevelId()"
+                    formControlName="languageLevel"
+                    placeholder="B1"
+                    [options]="languageLevelList"
+                  >
+                    <i appIcon icon="arrow-no-body" appSquare="32" class="arrow-list__end"></i>
+                  </app-select>
+
+                  @if (languageLevel | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+            </div>
+            <span class="text-body-12 page__years--attention"
+              >Количество добавляемых языков не более 4-х</span
+            >
+          </div>
+
+          <app-button
+            size="big"
+            customTypographyClass="text-body-12"
+            [disabled]="
+              !isLanguageDirty || languageItems().length === 4 || userLanguages.length === 4
+            "
+            [ngStyle]="{
+              opacity: !isLanguageDirty ? '0.6' : '1',
+              cursor: !isLanguageDirty ? 'not-allowed' : 'pointer',
+            }"
+            class="page__add-education"
+            (click)="addLanguage()"
+          >
+            <span>{{ editLanguageClick() ? "Сохранить изменения" : "Добавить язык" }}</span>
+            <i appIcon icon="plus" appSquare="12"></i>
+          </app-button>
+
+          <div class="page__row education__block">
+            @if (languageItems().length || userLanguages.length) {
+              @for (languageItem of userLanguages.value; track $index) {
+                <div class="education__remove">
+                  <div class="education__info">
+                    <p class="text-body-16 education__text">
+                      {{ languageItem.language }} {{ languageItem.languageLevel }}
+                    </p>
+                    <i
+                      class="edit"
+                      appIcon
+                      icon="edit-pen"
+                      appSquare="20"
+                      (click)="editLanguage($index)"
+                    ></i>
+                  </div>
+                  <app-button class="basket" color="red" (click)="removeLanguage($index)">
+                    <i appIcon icon="basket" appSquare="24"></i>
+                  </app-button>
                 </div>
-                <app-button class="basket" color="red" (click)="removeLanguage($index)">
-                  <i appIcon icon="basket" appSquare="24"></i>
-                </app-button>
-              </div>
+              }
             }
-          }
+          </div>
         </div>
-      </div>
 
-      <div class="page__buttons">
-        <app-button
-          customTypographyClass="text-body-12"
-          size="big"
-          (click)="onSkipRegistration()"
-          color="grey"
-          [loader]="skipSubmitting()"
-          >закончить регистрацию позже</app-button
-        >
-        <app-button
-          size="big"
-          [disabled]="
-            editEducationClick() ||
-            editWorkClick() ||
-            editLanguageClick() ||
-            isEducationDirty ||
-            isWorkDirty
-          "
-          [ngStyle]="{
-            opacity:
-              editEducationClick() ||
-              editWorkClick() ||
-              editLanguageClick() ||
-              isEducationDirty ||
-              isWorkDirty
-                ? '0.6'
-                : '1',
-            cursor:
+        <div class="page__buttons">
+          <app-button
+            customTypographyClass="text-body-12"
+            size="big"
+            (click)="onSkipRegistration()"
+            color="grey"
+            [loader]="skipSubmitting()"
+            >закончить регистрацию позже</app-button
+          >
+          <app-button
+            size="big"
+            [disabled]="
               editEducationClick() ||
               editWorkClick() ||
               editLanguageClick() ||
               isEducationDirty ||
               isWorkDirty
-                ? 'not-allowed'
-                : 'pointer',
-          }"
-          type="submit"
-          customTypographyClass="text-body-12"
-          [loader]="stageSubmitting()"
-          >продолжить</app-button
-        >
-      </div>
-    </form>
-    <app-modal [open]="isModalErrorYear()" (openChange)="isModalErrorYear.set(!isModalErrorYear())">
-      <div class="cancel">
-        <div class="cancel__top">
-          <i (click)="isModalErrorYear.set(false)" appIcon icon="cross" class="cancel__cross"></i>
-          <p class="cancel__title text-bold-body-14">Произошла ошибка при отправке данных!</p>
+            "
+            [ngStyle]="{
+              opacity:
+                editEducationClick() ||
+                editWorkClick() ||
+                editLanguageClick() ||
+                isEducationDirty ||
+                isWorkDirty
+                  ? '0.6'
+                  : '1',
+              cursor:
+                editEducationClick() ||
+                editWorkClick() ||
+                editLanguageClick() ||
+                isEducationDirty ||
+                isWorkDirty
+                  ? 'not-allowed'
+                  : 'pointer',
+            }"
+            type="submit"
+            customTypographyClass="text-body-12"
+            [loader]="stageSubmitting()"
+            >продолжить</app-button
+          >
         </div>
-        <p class="text-body-10 cancel__text">{{ isModalErrorYearText() }}.</p>
-      </div>
-    </app-modal>
-  </div>
+      </form>
+      <app-modal
+        [open]="isModalErrorYear()"
+        (openChange)="isModalErrorYear.set(!isModalErrorYear())"
+      >
+        <div class="cancel">
+          <div class="cancel__top">
+            <i (click)="isModalErrorYear.set(false)" appIcon icon="cross" class="cancel__cross"></i>
+            <p class="cancel__title text-bold-body-14">Произошла ошибка при отправке данных!</p>
+          </div>
+          <p class="text-body-10 cancel__text">{{ isModalErrorYearText() }}.</p>
+        </div>
+      </app-modal>
+    </div>
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.scss b/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.scss
index d483f9f3b..11fae4091 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.scss
+++ b/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 .page {
@@ -192,3 +193,85 @@ i {
     text-align: center;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    :host,
+    .page,
+    .page__form {
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .page {
+      padding-bottom: 24px;
+      margin-bottom: 24px;
+    }
+
+    .page__form {
+      width: 100%;
+    }
+
+    .page__buttons {
+      position: static;
+      width: 100%;
+      padding-bottom: env(safe-area-inset-bottom, 0);
+      margin-top: 24px;
+    }
+  }
+
+  @include responsive.apply-mobile {
+    .page__years,
+    .education__years,
+    .achievement__first-row {
+      flex-direction: column;
+      gap: 12px;
+      align-items: stretch;
+    }
+
+    .page__years .years__left,
+    .page__years .years__right,
+    .education__years .years__left,
+    .education__years .years__right,
+    .achievement__remove {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    .achievement__first-row {
+      margin-bottom: 12px;
+
+      > :first-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .education__info {
+      gap: 8px;
+      align-items: flex-start;
+    }
+
+    .education__text {
+      flex: 1;
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+
+    .education__remove {
+      flex-shrink: 0;
+      gap: 0;
+    }
+
+    .education__remove i {
+      display: grid;
+      place-items: center;
+      width: 44px;
+      min-height: 44px;
+    }
+
+    .content {
+      flex-wrap: wrap;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.spec.ts b/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.spec.ts
index 6ac5d0026..4b504e428 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.spec.ts
@@ -27,9 +27,17 @@ describe("StageZeroComponent", () => {
     };
 
     const authPortSpy = {
-      fetchProfile: of({}),
-      fetchUserRoles: of([]),
-      fetchChangeableRoles: of([]),
+      fetchProfile: vi.fn(() =>
+        of({
+          id: 1,
+          firstName: "Иван",
+          lastName: "Иванов",
+          personal: { avatar: "", city: "", onboardingStage: 0 },
+          relations: { education: [], workExperience: [], userLanguages: [], achievements: [] },
+        }),
+      ),
+      fetchUserRoles: vi.fn(() => of([])),
+      fetchChangeableRoles: vi.fn(() => of([])),
     };
 
     await TestBed.configureTestingModule({
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.ts b/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.ts
index 39d610253..7e3e75d9a 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.ts
+++ b/projects/social_platform/src/app/ui/pages/onboarding/stage-zero/stage-zero.component.ts
@@ -1,12 +1,15 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { ReactiveFormsModule } from "@angular/forms";
 import { ErrorMessage } from "@core/lib/models/error/error-message";
 import { ControlErrorPipe } from "@corelib";
 import { ButtonComponent, InputComponent, SelectComponent } from "@ui/primitives";
 import { CommonModule } from "@angular/common";
-import { IconComponent } from "@uilib";
+import { IconComponent, FormLayoutDirective } from "@uilib";
 import { ModalComponent } from "@ui/primitives/modal/modal.component";
 import { TooltipComponent } from "@ui/primitives/tooltip/tooltip.component";
 import { generateOptionsList } from "@utils/generate-options-list";
@@ -23,6 +26,7 @@ import { RegionSelectComponent } from "@ui/widgets/region-select/region-select.c
   templateUrl: "./stage-zero.component.html",
   styleUrl: "./stage-zero.component.scss",
   imports: [
+    FormLayoutDirective,
     ReactiveFormsModule,
     InputComponent,
     ButtonComponent,
@@ -44,6 +48,8 @@ import { RegionSelectComponent } from "@ui/widgets/region-select/region-select.c
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OnboardingStageZeroComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly onboardingStageZeroInfoService = inject(OnboardingStageZeroInfoService);
   private readonly onboardingStageZeroUIInfoService = inject(OnboardingStageZeroUIInfoService);
   private readonly onboardingUIInfoService = inject(OnboardingUIInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
index 96d471721..ba9430452 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
@@ -1,3 +1,5 @@
+/** @format */
+
 @mixin expandable-list {
   &__remaining {
     display: grid;
@@ -240,3 +242,22 @@
     color: var(--accent-dark);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .lists {
+    &__program-card {
+      &:hover {
+        box-shadow: var(--ui-panel-shadow);
+      }
+    }
+
+    &__program-name {
+      /* stylelint-disable-next-line value-no-vendor-prefix */
+
+      &--compact {
+        font-size: var(--ui-font-caption);
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
index cad2b6072..05e4fcf14 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 @mixin expandable-list {
@@ -257,3 +258,37 @@
     color: var(--black);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .lists {
+    &__info {
+      &--text {
+        font-size: var(--ui-font-small);
+      }
+
+      &--subtext {
+        font-size: var(--ui-font-caption);
+      }
+
+      &--more {
+        font-size: var(--ui-font-caption);
+      }
+    }
+
+    &__project-name {
+      /* stylelint-disable-next-line value-no-vendor-prefix */
+      font-size: var(--ui-font-small);
+    }
+
+    &__project-role {
+      font-size: var(--ui-font-caption);
+    }
+
+    &__date {
+      p {
+        font-size: var(--ui-font-caption);
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss
index 4e4badc7f..c1e56ef15 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/profile-news/profile-news.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 .item {
@@ -7,3 +8,5 @@
     min-width: 800px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss
index 9969091c4..f23ad35c4 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-achievements-step/profile-achievements-step.component.scss
@@ -1,3 +1,7 @@
+/** @format */
+@use "styles/profile-form";
+@use "styles/responsive";
+
 .profile__wrapper--education {
   display: grid;
   grid-template-columns: 6fr 4fr;
@@ -112,3 +116,8 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss
index 88a620146..a332e118c 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-education-step/profile-education-step.component.scss
@@ -1,3 +1,7 @@
+/** @format */
+@use "styles/profile-form";
+@use "styles/responsive";
+
 .profile__wrapper--education {
   display: grid;
   grid-template-columns: 6fr 4fr;
@@ -106,3 +110,8 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss
index 88a620146..a332e118c 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-experience-step/profile-experience-step.component.scss
@@ -1,3 +1,7 @@
+/** @format */
+@use "styles/profile-form";
+@use "styles/responsive";
+
 .profile__wrapper--education {
   display: grid;
   grid-template-columns: 6fr 4fr;
@@ -106,3 +110,8 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss
index a20e346f1..7afeb2c28 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-main-step/profile-main-step.component.scss
@@ -1,3 +1,7 @@
+/** @format */
+@use "styles/profile-form";
+@use "styles/responsive";
+
 .profile__wrapper--main {
   display: flex;
   flex-direction: column;
@@ -107,3 +111,8 @@
 .error__phone-number {
   margin-bottom: 10px;
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss
index f9a04d415..411738638 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/components/profile-skills-step/profile-skills-step.component.scss
@@ -1,4 +1,6 @@
+/** @format */
 @use "styles/responsive";
+@use "styles/profile-form";
 
 :host,
 fieldset {
@@ -124,3 +126,16 @@ fieldset {
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .profile__wrapper--education {
+    grid-template-columns: minmax(0, 1fr);
+
+    @include responsive.apply-tablet-and-above {
+      grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
+    }
+  }
+
+  @include profile-form.responsive-layout;
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
index 4ac7cece1..c52fcd3ec 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
@@ -1,37 +1,17 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  @if (profileForm.get("userType"); as currentType) {
+    <div class="profile__top">
+      <div class="profile__back" [routerLink]="AppRoutes.profile.detail(profileId()!)">
+        <i appIcon icon="left-arrow" appSquare="24"></i>
+        <h1 class="profile__title">редактирование профиля</h1>
+      </div>
 
-@if (profileForm.get("userType"); as currentType) {
-  <div class="profile__top">
-    <div class="profile__back" [routerLink]="AppRoutes.profile.detail(profileId()!)">
-      <i appIcon icon="left-arrow" appSquare="24"></i>
-      <h1 class="profile__title">редактирование профиля</h1>
-    </div>
-
-    <div appEditorSubmitButton containerSelector=".profile" class="profile__save">
-      <app-button
-        size="medium"
-        [disabled]="
-          editEducationClick() ||
-          editWorkClick() ||
-          editLanguageClick() ||
-          isEducationDirty ||
-          isWorkDirty ||
-          isLanguageDirty ||
-          isAchievementsDirty
-        "
-        [loader]="profileFormSubmitting()"
-        [ngStyle]="{
-          opacity:
-            editEducationClick() ||
-            editWorkClick() ||
-            editLanguageClick() ||
-            isEducationDirty ||
-            isWorkDirty ||
-            isLanguageDirty ||
-            isAchievementsDirty
-              ? '0.6'
-              : '1',
-          cursor:
+      <div appEditorSubmitButton containerSelector=".profile" class="profile__save">
+        <app-button
+          size="medium"
+          [disabled]="
             editEducationClick() ||
             editWorkClick() ||
             editLanguageClick() ||
@@ -39,192 +19,472 @@ <h1 class="profile__title">редактирование профиля</h1>
             isWorkDirty ||
             isLanguageDirty ||
             isAchievementsDirty
-              ? 'not-allowed'
-              : 'pointer',
-        }"
-        customTypographyClass="text-body-12"
-        (click)="saveProfile()"
-      >
-        cохранить</app-button
-      >
+          "
+          [loader]="profileFormSubmitting()"
+          [ngStyle]="{
+            opacity:
+              editEducationClick() ||
+              editWorkClick() ||
+              editLanguageClick() ||
+              isEducationDirty ||
+              isWorkDirty ||
+              isLanguageDirty ||
+              isAchievementsDirty
+                ? '0.6'
+                : '1',
+            cursor:
+              editEducationClick() ||
+              editWorkClick() ||
+              editLanguageClick() ||
+              isEducationDirty ||
+              isWorkDirty ||
+              isLanguageDirty ||
+              isAchievementsDirty
+                ? 'not-allowed'
+                : 'pointer',
+          }"
+          customTypographyClass="text-body-12"
+          (click)="saveProfile()"
+        >
+          cохранить</app-button
+        >
+      </div>
     </div>
-  </div>
 
-  <main class="profile">
-    <form [formGroup]="profileForm" (ngSubmit)="saveProfile()" class="profile__form">
-      <app-project-navigation
-        (stepChange)="navigateStep($event)"
-        [navItems]="navProfileItems"
-        style="width: 100%"
-      ></app-project-navigation>
+    <main class="profile">
+      <form [formGroup]="profileForm" (ngSubmit)="saveProfile()" class="profile__form">
+        <app-project-navigation
+          (stepChange)="navigateStep($event)"
+          [navItems]="navProfileItems"
+          style="width: 100%"
+        ></app-project-navigation>
 
-      <div class="profile__wrapper">
-        @if (editingStep() === "main") {
-          @defer {
-            <app-profile-main-step
-              (openSpecsGroupsModal)="toggleSpecsGroupsModal()"
-            ></app-profile-main-step>
+        <div class="profile__wrapper">
+          @if (editingStep() === "main") {
+            @defer {
+              <app-profile-main-step
+                (openSpecsGroupsModal)="toggleSpecsGroupsModal()"
+              ></app-profile-main-step>
+            }
           }
-        }
-        @if (editingStep() === "education") {
-          @defer {
-            <app-profile-education-step
-              [isEducationDirty]="isEducationDirty"
-            ></app-profile-education-step>
+          @if (editingStep() === "education") {
+            @defer {
+              <app-profile-education-step
+                [isEducationDirty]="isEducationDirty"
+              ></app-profile-education-step>
+            }
           }
-        }
-        @if (editingStep() === "experience") {
-          @defer {
-            <app-profile-experience-step [isWorkDirty]="isWorkDirty"></app-profile-experience-step>
+          @if (editingStep() === "experience") {
+            @defer {
+              <app-profile-experience-step
+                [isWorkDirty]="isWorkDirty"
+              ></app-profile-experience-step>
+            }
           }
-        }
-        @if (editingStep() === "achievements") {
-          @defer {
-            <app-profile-achievements-step
-              [isAchievementsDirty]="isAchievementsDirty"
-            ></app-profile-achievements-step>
+          @if (editingStep() === "achievements") {
+            @defer {
+              <app-profile-achievements-step
+                [isAchievementsDirty]="isAchievementsDirty"
+              ></app-profile-achievements-step>
+            }
           }
-        }
-        @if (editingStep() === "skills") {
-          @defer {
-            <app-profile-skills-step
-              [isLanguageDirty]="isLanguageDirty"
-              (openSkillsGroupsModal)="toggleSkillsGroupsModal()"
-            ></app-profile-skills-step>
+          @if (editingStep() === "skills") {
+            @defer {
+              <app-profile-skills-step
+                [isLanguageDirty]="isLanguageDirty"
+                (openSkillsGroupsModal)="toggleSkillsGroupsModal()"
+              ></app-profile-skills-step>
+            }
+          } @else if (editingStep() === "settings") {
+            <div class="profile__wrapper--settings">
+              <app-button
+                (click)="isModalDeleteProfile.set(true)"
+                customTypographyClass="text-body-12"
+                color="red"
+                size="big"
+                >удалить профиль</app-button
+              >
+            </div>
           }
-        } @else if (editingStep() === "settings") {
-          <div class="profile__wrapper--settings">
-            <app-button
-              (click)="isModalDeleteProfile.set(true)"
-              customTypographyClass="text-body-12"
-              color="red"
-              size="big"
-              >удалить профиль</app-button
-            >
-          </div>
-        }
-      </div>
-    </form>
-  </main>
-}
+        </div>
+      </form>
+    </main>
+  }
 
-<app-modal
-  [open]="isModalErrorSkillsChoose()"
-  (openChange)="isModalErrorSkillsChoose.set(!isModalErrorSkillsChoose())"
->
-  <div class="cancel">
-    <div class="cancel__top">
-      <i
-        (click)="isModalErrorSkillsChoose.set(false)"
-        appIcon
-        appSquare="10"
-        icon="cross"
-        class="cancel__cross"
-      ></i>
-      <p class="cancel__title text-body-14">произошла ошибка при редактировании!</p>
+  <app-modal
+    [open]="isModalErrorSkillsChoose()"
+    (openChange)="isModalErrorSkillsChoose.set(!isModalErrorSkillsChoose())"
+  >
+    <div class="cancel">
+      <div class="cancel__top">
+        <i
+          (click)="isModalErrorSkillsChoose.set(false)"
+          appIcon
+          appSquare="10"
+          icon="cross"
+          class="cancel__cross"
+        ></i>
+        <p class="cancel__title text-body-14">произошла ошибка при редактировании!</p>
+      </div>
+      @if (isModalErrorSkillChooseText()) {
+        <p class="text-body-12 cancel__text">{{ isModalErrorSkillChooseText() }}.</p>
+      } @else {
+        <p class="text-body-12 cancel__text">
+          для публикации профиля, нужно заполнить все <strong>обязательные поля</strong> (они будут
+          <strong>подсвечены&nbsp;<span>красным</span></strong
+          >).
+        </p>
+      }
     </div>
-    @if (isModalErrorSkillChooseText()) {
-      <p class="text-body-12 cancel__text">{{ isModalErrorSkillChooseText() }}.</p>
-    } @else {
-      <p class="text-body-12 cancel__text">
-        для публикации профиля, нужно заполнить все <strong>обязательные поля</strong> (они будут
-        <strong>подсвечены&nbsp;<span>красным</span></strong
-        >).
-      </p>
-    }
-  </div>
-</app-modal>
+  </app-modal>
 
-<app-modal
-  [open]="isModalDeleteProfile()"
-  (openChange)="isModalDeleteProfile.set(!isModalDeleteProfile())"
->
-  <div class="cancel">
-    <div class="cancel__top">
-      <p class="cancel__title text-body-14">подтвердите удаление аккаунта</p>
-      <i appIcon icon="sad-smile" appSquare="50" class="cancel__delete-icon"></i>
+  <app-modal
+    [open]="isModalDeleteProfile()"
+    (openChange)="isModalDeleteProfile.set(!isModalDeleteProfile())"
+  >
+    <div class="cancel">
+      <div class="cancel__top">
+        <p class="cancel__title text-body-14">подтвердите удаление аккаунта</p>
+        <i appIcon icon="sad-smile" appSquare="50" class="cancel__delete-icon"></i>
+      </div>
+
+      <app-button customTypographyClass="text-body-12" size="big" color="red"
+        >удалить аккаунт</app-button
+      >
     </div>
+  </app-modal>
 
-    <app-button customTypographyClass="text-body-12" size="big" color="red"
-      >удалить аккаунт</app-button
+  @defer (when specsGroupsModalOpen()) {
+    <app-modal
+      [open]="specsGroupsModalOpen()"
+      (openChange)="specsGroupsModalOpen.set(!specsGroupsModalOpen())"
+      class="modal"
     >
-  </div>
-</app-modal>
+      <div class="modal__wrapper">
+        <h4 class="text-heading-4">Выберите специальность</h4>
+        <div class="modal__content">
+          <div class="modal__specs-groups">
+            <ul>
+              @for (specsGroup of (nestedSpecs$ | async)?.slice(0, 7); track specsGroup.id) {
+                <li>
+                  <app-specializations-group
+                    [title]="specsGroup.name"
+                    [options]="specsGroup.specializations"
+                    [hasOpenGroups]="hasOpenSpecializationsGroups()"
+                    [isOpen]="isSpecializationGroupOpen(specsGroup.name)"
+                    [selectedName]="selectedSpecialityName()"
+                    (groupToggled)="onSpecializationsGroupToggled($event, specsGroup.name)"
+                    (selectOption)="onSelectSpec($event)"
+                  ></app-specializations-group>
+                </li>
+              }
+            </ul>
+          </div>
+        </div>
+        <app-button
+          customTypographyClass="text-body-12"
+          size="medium"
+          (click)="toggleSpecsGroupsModal()"
+          >сохранить</app-button
+        >
+      </div>
+    </app-modal>
+  }
 
-@defer (when specsGroupsModalOpen()) {
-  <app-modal
-    [open]="specsGroupsModalOpen()"
-    (openChange)="specsGroupsModalOpen.set(!specsGroupsModalOpen())"
-    class="modal"
-  >
-    <div class="modal__wrapper">
-      <h4 class="text-heading-4">Выберите специальность</h4>
-      <div class="modal__content">
-        <div class="modal__specs-groups">
-          <ul>
-            @for (specsGroup of (nestedSpecs$ | async)?.slice(0, 7); track specsGroup.id) {
-              <li>
-                <app-specializations-group
-                  [title]="specsGroup.name"
-                  [options]="specsGroup.specializations"
-                  [hasOpenGroups]="hasOpenSpecializationsGroups()"
-                  [isOpen]="isSpecializationGroupOpen(specsGroup.name)"
-                  [selectedName]="selectedSpecialityName()"
-                  (groupToggled)="onSpecializationsGroupToggled($event, specsGroup.name)"
-                  (selectOption)="onSelectSpec($event)"
-                ></app-specializations-group>
-              </li>
-            }
-          </ul>
+  @defer (when skillsGroupsModalOpen()) {
+    <app-modal
+      [open]="skillsGroupsModalOpen()"
+      (openChange)="closeSkillsGroupsModal()"
+      class="modal"
+    >
+      <div class="modal__wrapper">
+        <button
+          type="button"
+          class="modal__close"
+          aria-label="Закрыть библиотеку навыков"
+          (click)="closeSkillsGroupsModal()"
+        >
+          <i appIcon icon="cross" appSquare="12"></i>
+        </button>
+        <h4 class="text-heading-4">библиотека навыков</h4>
+        <div class="modal__content">
+          <div class="modal__skills-groups">
+            <ul>
+              @for (skillsGroup of nestedSkills$ | async; track skillsGroup.id) {
+                <li>
+                  <app-skills-group
+                    [title]="skillsGroup.name"
+                    [options]="skillsGroup.skills"
+                    [selected]="this.profileForm.getRawValue().skills"
+                    [hasOpenGroups]="openGroupIndex() !== null"
+                    [isOpen]="openGroupIndex() === skillsGroup.id"
+                    (optionToggled)="onToggleSkill($event)"
+                    (groupToggled)="onGroupToggled(skillsGroup.id, $event)"
+                  ></app-skills-group>
+                </li>
+              }
+            </ul>
+          </div>
         </div>
+        <app-button
+          customTypographyClass="text-body-12"
+          size="medium"
+          (click)="toggleSkillsGroupsModal()"
+          >Сохранить</app-button
+        >
       </div>
-      <app-button
-        customTypographyClass="text-body-12"
-        size="medium"
-        (click)="toggleSpecsGroupsModal()"
-        >сохранить</app-button
-      >
+    </app-modal>
+  }
+} @else {
+  @if (profileForm.get("userType"); as currentType) {
+    <div class="profile__top">
+      @if (desktopLayout()) {
+        <div class="profile__back" [routerLink]="AppRoutes.profile.detail(profileId()!)">
+          <i appIcon icon="left-arrow" appSquare="24"></i>
+          <h1 class="profile__title">редактирование профиля</h1>
+        </div>
+        <ng-container [ngTemplateOutlet]="saveButton" />
+      } @else {
+        <app-page-header
+          title="редактирование профиля"
+          [backRoute]="AppRoutes.profile.detail(profileId()!)"
+        >
+          <ng-container [ngTemplateOutlet]="saveButton" />
+        </app-page-header>
+      }
+      <ng-template #saveButton>
+        <div appEditorSubmitButton containerSelector=".profile" class="profile__save">
+          <app-button
+            size="medium"
+            [disabled]="
+              editEducationClick() ||
+              editWorkClick() ||
+              editLanguageClick() ||
+              isEducationDirty ||
+              isWorkDirty ||
+              isLanguageDirty ||
+              isAchievementsDirty
+            "
+            [loader]="profileFormSubmitting()"
+            [ngStyle]="{
+              opacity:
+                editEducationClick() ||
+                editWorkClick() ||
+                editLanguageClick() ||
+                isEducationDirty ||
+                isWorkDirty ||
+                isLanguageDirty ||
+                isAchievementsDirty
+                  ? '0.6'
+                  : '1',
+              cursor:
+                editEducationClick() ||
+                editWorkClick() ||
+                editLanguageClick() ||
+                isEducationDirty ||
+                isWorkDirty ||
+                isLanguageDirty ||
+                isAchievementsDirty
+                  ? 'not-allowed'
+                  : 'pointer',
+            }"
+            customTypographyClass="text-body-12"
+            (click)="saveProfile()"
+          >
+            cохранить</app-button
+          >
+        </div>
+      </ng-template>
     </div>
-  </app-modal>
-}
 
-@defer (when skillsGroupsModalOpen()) {
-  <app-modal [open]="skillsGroupsModalOpen()" (openChange)="closeSkillsGroupsModal()" class="modal">
-    <div class="modal__wrapper">
-      <button
-        type="button"
-        class="modal__close"
-        aria-label="Закрыть библиотеку навыков"
-        (click)="closeSkillsGroupsModal()"
+    <main class="profile">
+      <form
+        appFormLayout
+        [formGroup]="profileForm"
+        (ngSubmit)="saveProfile()"
+        class="profile__form"
       >
-        <i appIcon icon="cross" appSquare="12"></i>
-      </button>
-      <h4 class="text-heading-4">библиотека навыков</h4>
-      <div class="modal__content">
-        <div class="modal__skills-groups">
-          <ul>
-            @for (skillsGroup of nestedSkills$ | async; track skillsGroup.id) {
-              <li>
-                <app-skills-group
-                  [title]="skillsGroup.name"
-                  [options]="skillsGroup.skills"
-                  [selected]="this.profileForm.getRawValue().skills"
-                  [hasOpenGroups]="openGroupIndex() !== null"
-                  [isOpen]="openGroupIndex() === skillsGroup.id"
-                  (optionToggled)="onToggleSkill($event)"
-                  (groupToggled)="onGroupToggled(skillsGroup.id, $event)"
-                ></app-skills-group>
-              </li>
+        <app-project-navigation
+          (stepChange)="navigateStep($event)"
+          [navItems]="navProfileItems"
+          style="width: 100%"
+        ></app-project-navigation>
+
+        <div class="profile__wrapper">
+          @if (editingStep() === "main") {
+            @defer {
+              <app-profile-main-step
+                (openSpecsGroupsModal)="toggleSpecsGroupsModal()"
+              ></app-profile-main-step>
+            }
+          }
+          @if (editingStep() === "education") {
+            @defer {
+              <app-profile-education-step
+                [isEducationDirty]="isEducationDirty"
+              ></app-profile-education-step>
             }
-          </ul>
+          }
+          @if (editingStep() === "experience") {
+            @defer {
+              <app-profile-experience-step
+                [isWorkDirty]="isWorkDirty"
+              ></app-profile-experience-step>
+            }
+          }
+          @if (editingStep() === "achievements") {
+            @defer {
+              <app-profile-achievements-step
+                [isAchievementsDirty]="isAchievementsDirty"
+              ></app-profile-achievements-step>
+            }
+          }
+          @if (editingStep() === "skills") {
+            @defer {
+              <app-profile-skills-step
+                [isLanguageDirty]="isLanguageDirty"
+                (openSkillsGroupsModal)="toggleSkillsGroupsModal()"
+              ></app-profile-skills-step>
+            }
+          } @else if (editingStep() === "settings") {
+            <div class="profile__wrapper--settings">
+              <app-button
+                (click)="isModalDeleteProfile.set(true)"
+                customTypographyClass="text-body-12"
+                color="red"
+                size="big"
+                >удалить профиль</app-button
+              >
+            </div>
+          }
         </div>
+      </form>
+    </main>
+  }
+
+  <app-modal
+    [open]="isModalErrorSkillsChoose()"
+    (openChange)="isModalErrorSkillsChoose.set(!isModalErrorSkillsChoose())"
+  >
+    <div class="cancel">
+      <div class="cancel__top">
+        <i
+          (click)="isModalErrorSkillsChoose.set(false)"
+          appIcon
+          appSquare="10"
+          icon="cross"
+          class="cancel__cross"
+        ></i>
+        <p class="cancel__title text-body-14">произошла ошибка при редактировании!</p>
       </div>
-      <app-button
-        customTypographyClass="text-body-12"
-        size="medium"
-        (click)="toggleSkillsGroupsModal()"
-        >Сохранить</app-button
+      @if (isModalErrorSkillChooseText()) {
+        <p class="text-body-12 cancel__text">{{ isModalErrorSkillChooseText() }}.</p>
+      } @else {
+        <p class="text-body-12 cancel__text">
+          для публикации профиля, нужно заполнить все <strong>обязательные поля</strong> (они будут
+          <strong>подсвечены&nbsp;<span>красным</span></strong
+          >).
+        </p>
+      }
+    </div>
+  </app-modal>
+
+  <app-modal
+    [open]="isModalDeleteProfile()"
+    (openChange)="isModalDeleteProfile.set(!isModalDeleteProfile())"
+  >
+    <div class="cancel">
+      <div class="cancel__top">
+        <p class="cancel__title text-body-14">подтвердите удаление аккаунта</p>
+        <i appIcon icon="sad-smile" appSquare="50" class="cancel__delete-icon"></i>
+      </div>
+
+      <app-button customTypographyClass="text-body-12" size="big" color="red"
+        >удалить аккаунт</app-button
       >
     </div>
   </app-modal>
+
+  @defer (when specsGroupsModalOpen()) {
+    <app-modal
+      [open]="specsGroupsModalOpen()"
+      (openChange)="specsGroupsModalOpen.set(!specsGroupsModalOpen())"
+      class="modal"
+    >
+      <div class="modal__wrapper">
+        <h4 class="text-heading-4">Выберите специальность</h4>
+        <div class="modal__content">
+          <div class="modal__specs-groups">
+            <ul>
+              @for (specsGroup of (nestedSpecs$ | async)?.slice(0, 7); track specsGroup.id) {
+                <li>
+                  <app-specializations-group
+                    [title]="specsGroup.name"
+                    [options]="specsGroup.specializations"
+                    [hasOpenGroups]="hasOpenSpecializationsGroups()"
+                    [isOpen]="isSpecializationGroupOpen(specsGroup.name)"
+                    [selectedName]="selectedSpecialityName()"
+                    (groupToggled)="onSpecializationsGroupToggled($event, specsGroup.name)"
+                    (selectOption)="onSelectSpec($event)"
+                  ></app-specializations-group>
+                </li>
+              }
+            </ul>
+          </div>
+        </div>
+        <app-button
+          customTypographyClass="text-body-12"
+          size="medium"
+          (click)="toggleSpecsGroupsModal()"
+          >сохранить</app-button
+        >
+      </div>
+    </app-modal>
+  }
+
+  @defer (when skillsGroupsModalOpen()) {
+    <app-modal
+      [open]="skillsGroupsModalOpen()"
+      (openChange)="closeSkillsGroupsModal()"
+      class="modal"
+    >
+      <div class="modal__wrapper">
+        <button
+          appButton="icon"
+          type="button"
+          class="modal__close"
+          aria-label="Закрыть библиотеку навыков"
+          (click)="closeSkillsGroupsModal()"
+        >
+          <i appIcon icon="cross" appSquare="12"></i>
+        </button>
+        <h4 class="text-heading-4">библиотека навыков</h4>
+        <div class="modal__content">
+          <div class="modal__skills-groups">
+            <ul>
+              @for (skillsGroup of nestedSkills$ | async; track skillsGroup.id) {
+                <li>
+                  <app-skills-group
+                    [title]="skillsGroup.name"
+                    [options]="skillsGroup.skills"
+                    [selected]="this.profileForm.getRawValue().skills"
+                    [hasOpenGroups]="openGroupIndex() !== null"
+                    [isOpen]="openGroupIndex() === skillsGroup.id"
+                    (optionToggled)="onToggleSkill($event)"
+                    (groupToggled)="onGroupToggled(skillsGroup.id, $event)"
+                  ></app-skills-group>
+                </li>
+              }
+            </ul>
+          </div>
+        </div>
+        <app-button
+          customTypographyClass="text-body-12"
+          size="medium"
+          (click)="toggleSkillsGroupsModal()"
+          >Сохранить</app-button
+        >
+      </div>
+    </app-modal>
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
index b16f53f4d..4f80cac45 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -412,3 +411,45 @@
     text-align: center;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .modal {
+    &__wrapper {
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+      padding: 0;
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    :host {
+      display: block;
+      min-width: 0;
+    }
+
+    .profile {
+      padding: 16px var(--page-gutter) max(24px, env(safe-area-inset-bottom));
+    }
+
+    .profile__top {
+      position: static;
+      gap: 12px;
+      justify-content: space-between;
+      padding: 8px var(--page-gutter);
+    }
+
+    .profile__left form {
+      width: 100%;
+    }
+
+    .profile__save {
+      @include responsive.mobile-actions;
+    }
+
+    .profile__wrapper--settings {
+      min-width: 0;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
index c1d5a5f5b..ad3d61aba 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
@@ -1,5 +1,15 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import {
+  ButtonDirective,
+  DesktopLayoutService,
+  FormLayoutDirective,
+  PageHeaderComponent,
+} from "@uilib";
+
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -54,6 +64,9 @@ import { ProfileEditAchievementsInfoService } from "@api/profile/facades/edit/pr
   templateUrl: "./edit.component.html",
   styleUrl: "./edit.component.scss",
   imports: [
+    PageHeaderComponent,
+    ButtonDirective,
+    FormLayoutDirective,
     ReactiveFormsModule,
     CommonModule,
     IconComponent,
@@ -87,6 +100,9 @@ import { ProfileEditAchievementsInfoService } from "@api/profile/facades/edit/pr
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileEditComponent implements OnInit, AfterViewInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
   private readonly profileFormService = inject(ProfileFormService);
   private readonly profileEditInfoService = inject(ProfileEditInfoService);
   private readonly projectStepService = inject(ProjectStepService);
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.html b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.html
index ba18da65e..a19d2da6c 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.html
@@ -1,104 +1,140 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <main class="analytics" aria-labelledby="program-analytics-title">
+    <header class="analytics__header">
+      <div>
+        <p class="analytics__eyebrow text-body-10">Управление программой</p>
+        <h1 id="program-analytics-title" class="analytics__title text-heading-3">Аналитика</h1>
+        <p class="analytics__subtitle text-body-10">
+          Сводка пути участников от регистрации до экспертной оценки.
+        </p>
+      </div>
 
-<main class="analytics" aria-labelledby="program-analytics-title">
-  <header class="analytics__header">
-    <div>
-      <p class="analytics__eyebrow text-body-10">Управление программой</p>
-      <h1 id="program-analytics-title" class="analytics__title text-heading-3">Аналитика</h1>
-      <p class="analytics__subtitle text-body-10">
-        Сводка пути участников от регистрации до экспертной оценки.
-      </p>
-    </div>
+      @if (data()) {
+        <section class="exports" aria-labelledby="analytics-exports-title">
+          <div class="analytics__heading-row">
+            <h2 id="analytics-exports-title" class="text-body-12">Выгрузки</h2>
+            <app-tooltip
+              data-testid="exports-tooltip"
+              text="Скачайте проекты программы или выставленные проектные оценки."
+              [isVisible]="isTooltipVisible('exports')"
+              [useOverlay]="true"
+              position="left"
+              (click)="toggleTooltip('exports')"
+              (show)="showTooltip('exports')"
+              (hide)="hideTooltip('exports')"
+            ></app-tooltip>
+          </div>
+          <div class="exports__actions">
+            <app-button
+              appearance="outline"
+              size="big"
+              [loader]="loadingExports()"
+              [disabled]="loadingExports()"
+              customTypographyClass="text-body-10"
+              (click)="downloadProjects()"
+            >
+              Все проекты
+            </app-button>
+            <app-button
+              appearance="outline"
+              size="big"
+              [loader]="loadingExports()"
+              [disabled]="loadingExports()"
+              customTypographyClass="text-body-10"
+              (click)="downloadSubmittedProjects()"
+            >
+              Сданные проекты
+            </app-button>
+            <app-button
+              appearance="outline"
+              size="big"
+              [loader]="loadingExports()"
+              [disabled]="loadingExports()"
+              customTypographyClass="text-body-10"
+              (click)="downloadRates()"
+            >
+              Оценки проектов
+            </app-button>
+          </div>
+          @if (exportFailed()) {
+            <p class="exports__error text-body-10" role="alert">
+              Не удалось подготовить выгрузку. Повторите попытку.
+            </p>
+          }
+        </section>
+      }
+    </header>
 
-    @if (data()) {
-      <section class="exports" aria-labelledby="analytics-exports-title">
-        <div class="analytics__heading-row">
-          <h2 id="analytics-exports-title" class="text-body-12">Выгрузки</h2>
-          <app-tooltip
-            data-testid="exports-tooltip"
-            text="Скачайте проекты программы или выставленные проектные оценки."
-            [isVisible]="isTooltipVisible('exports')"
-            [useOverlay]="true"
-            position="left"
-            (click)="toggleTooltip('exports')"
-            (show)="showTooltip('exports')"
-            (hide)="hideTooltip('exports')"
-          ></app-tooltip>
+    @if (pending()) {
+      <section class="analytics__loading" aria-live="polite" data-testid="analytics-loading">
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        <p class="text-body-10">Загружаем аналитику программы…</p>
+        <div class="summary summary--loading" aria-hidden="true">
+          @for (_ of [1, 2, 3, 4]; track $index) {
+            <div class="summary-card summary-card--skeleton"></div>
+          }
         </div>
-        <div class="exports__actions">
-          <app-button
-            appearance="outline"
-            size="big"
-            [loader]="loadingExports()"
-            [disabled]="loadingExports()"
-            customTypographyClass="text-body-10"
-            (click)="downloadProjects()"
-          >
-            Все проекты
-          </app-button>
-          <app-button
-            appearance="outline"
-            size="big"
-            [loader]="loadingExports()"
-            [disabled]="loadingExports()"
-            customTypographyClass="text-body-10"
-            (click)="downloadSubmittedProjects()"
-          >
-            Сданные проекты
-          </app-button>
-          <app-button
-            appearance="outline"
-            size="big"
-            [loader]="loadingExports()"
-            [disabled]="loadingExports()"
-            customTypographyClass="text-body-10"
-            (click)="downloadRates()"
-          >
-            Оценки проектов
+      </section>
+    } @else if (failed()) {
+      <section class="analytics-state" role="alert" data-testid="analytics-error">
+        <i appIcon icon="accent-error" appSquare="40"></i>
+        <h2 class="text-body-14">Аналитика недоступна</h2>
+        <p class="text-body-10">{{ errorMessage() }}</p>
+        @if (error()?.kind === "network") {
+          <app-button size="medium" customTypographyClass="text-body-10" (click)="retry()">
+            Повторить
           </app-button>
-        </div>
-        @if (exportFailed()) {
-          <p class="exports__error text-body-10" role="alert">
-            Не удалось подготовить выгрузку. Повторите попытку.
-          </p>
         }
       </section>
-    }
-  </header>
-
-  @if (pending()) {
-    <section class="analytics__loading" aria-live="polite" data-testid="analytics-loading">
-      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-      <p class="text-body-10">Загружаем аналитику программы…</p>
-      <div class="summary summary--loading" aria-hidden="true">
-        @for (_ of [1, 2, 3, 4]; track $index) {
-          <div class="summary-card summary-card--skeleton"></div>
+    } @else if (data(); as overview) {
+      <section class="summary" aria-label="Основные показатели">
+        @for (card of summary(); track card.key) {
+          <article class="summary-card" [attr.data-testid]="'summary-' + card.key">
+            <div class="summary-card__icon">
+              <i appIcon [icon]="card.icon!" appSquare="24"></i>
+            </div>
+            <div class="summary-card__content">
+              <div class="analytics__heading-row">
+                <h2 class="summary-card__label text-body-10">{{ card.label }}</h2>
+                <app-tooltip
+                  data-testid="metric-tooltip"
+                  [text]="card.tooltip"
+                  [isVisible]="isTooltipVisible(card.key)"
+                  [useOverlay]="true"
+                  (click)="toggleTooltip(card.key)"
+                  (show)="showTooltip(card.key)"
+                  (hide)="hideTooltip(card.key)"
+                ></app-tooltip>
+              </div>
+              <strong class="summary-card__value">{{ card.value }}</strong>
+            </div>
+          </article>
         }
-      </div>
-    </section>
-  } @else if (failed()) {
-    <section class="analytics-state" role="alert" data-testid="analytics-error">
-      <i appIcon icon="accent-error" appSquare="40"></i>
-      <h2 class="text-body-14">Аналитика недоступна</h2>
-      <p class="text-body-10">{{ errorMessage() }}</p>
-      @if (error()?.kind === "network") {
-        <app-button size="medium" customTypographyClass="text-body-10" (click)="retry()">
-          Повторить
-        </app-button>
-      }
-    </section>
-  } @else if (data(); as overview) {
-    <section class="summary" aria-label="Основные показатели">
-      @for (card of summary(); track card.key) {
-        <article class="summary-card" [attr.data-testid]="'summary-' + card.key">
-          <div class="summary-card__icon">
-            <i appIcon [icon]="card.icon!" appSquare="24"></i>
-          </div>
-          <div class="summary-card__content">
+      </section>
+
+      <section class="regions-grid" aria-label="География программы">
+        @for (card of regionCards(); track card.key) {
+          <article
+            class="regions"
+            [attr.aria-labelledby]="card.key + '-title'"
+            [attr.data-testid]="card.key"
+          >
             <div class="analytics__heading-row">
-              <h2 class="summary-card__label text-body-10">{{ card.label }}</h2>
+              <h2 [id]="card.key + '-title'" class="text-body-12">{{ card.title }}</h2>
+              <button
+                type="button"
+                class="regions__export"
+                [attr.aria-label]="'Выгрузить ' + card.title.toLowerCase() + ' в Excel'"
+                [attr.title]="card.items.length ? 'Скачать XLSX' : 'Нет данных для выгрузки'"
+                [disabled]="!card.items.length || regionExportState()[card.key].pending"
+                [attr.aria-busy]="regionExportState()[card.key].pending"
+                (click)="downloadRegions(card.key)"
+              >
+                <i appIcon icon="download" appSquare="18" aria-hidden="true"></i>
+              </button>
               <app-tooltip
-                data-testid="metric-tooltip"
                 [text]="card.tooltip"
                 [isVisible]="isTooltipVisible(card.key)"
                 [useOverlay]="true"
@@ -107,239 +143,690 @@ <h2 class="summary-card__label text-body-10">{{ card.label }}</h2>
                 (hide)="hideTooltip(card.key)"
               ></app-tooltip>
             </div>
-            <strong class="summary-card__value">{{ card.value }}</strong>
+            @if (regionExportState()[card.key].pending) {
+              <p class="regions__export-message" role="status">Подготавливаем Excel…</p>
+            }
+            @if (regionExportState()[card.key].failed) {
+              <p class="regions__export-message exports__error" role="alert">
+                Не удалось создать Excel. Попробуйте ещё раз.
+              </p>
+            }
+            @if (card.items.length > 0) {
+              <ul class="regions__list">
+                @for (region of card.items; track region.name) {
+                  <li>
+                    <span class="text-body-10">{{ region.name }}</span>
+                    <strong>{{ region.count }}</strong>
+                  </li>
+                }
+              </ul>
+            } @else {
+              <p class="analytics-empty-state text-body-10">{{ card.emptyMessage }}</p>
+            }
+          </article>
+        }
+      </section>
+
+      <section class="analytics-grid" aria-label="Аналитические показатели">
+        <article class="analytics-card" data-testid="participant-funnel">
+          <div class="analytics__heading-row">
+            <h2 class="text-body-12">Воронка участников</h2>
+            <app-tooltip
+              text="Путь участников от регистрации до создания проекта."
+              [isVisible]="isTooltipVisible('participant-funnel')"
+              [useOverlay]="true"
+              (click)="toggleTooltip('participant-funnel')"
+              (show)="showTooltip('participant-funnel')"
+              (hide)="hideTooltip('participant-funnel')"
+            ></app-tooltip>
           </div>
+          @if (hasValues(participantFunnel())) {
+            <ol class="funnel">
+              @for (item of participantFunnel(); track item.key) {
+                <li class="funnel__item">
+                  <span class="funnel__label text-body-10">
+                    {{ item.label }}
+                    <app-tooltip
+                      [text]="item.tooltip"
+                      [isVisible]="isTooltipVisible(item.key)"
+                      [useOverlay]="true"
+                      (click)="toggleTooltip(item.key)"
+                      (show)="showTooltip(item.key)"
+                      (hide)="hideTooltip(item.key)"
+                    ></app-tooltip>
+                  </span>
+                  <strong>{{ item.value }}</strong>
+                  <span
+                    class="funnel__bar"
+                    [style.width.%]="barWidth(item.value, participantFunnel())"
+                  ></span>
+                </li>
+              }
+            </ol>
+          } @else {
+            <p class="analytics-empty-state text-body-10">Пока нет данных по участникам</p>
+          }
         </article>
-      }
-    </section>
 
-    <section class="regions-grid" aria-label="География программы">
-      @for (card of regionCards(); track card.key) {
-        <article
-          class="regions"
-          [attr.aria-labelledby]="card.key + '-title'"
-          [attr.data-testid]="card.key"
-        >
+        <article class="analytics-card" data-testid="solution-funnel">
           <div class="analytics__heading-row">
-            <h2 [id]="card.key + '-title'" class="text-body-12">{{ card.title }}</h2>
-            <button
-              type="button"
-              class="regions__export"
-              [attr.aria-label]="'Выгрузить ' + card.title.toLowerCase() + ' в Excel'"
-              [attr.title]="card.items.length ? 'Скачать XLSX' : 'Нет данных для выгрузки'"
-              [disabled]="!card.items.length || regionExportState()[card.key].pending"
-              [attr.aria-busy]="regionExportState()[card.key].pending"
-              (click)="downloadRegions(card.key)"
-            >
-              <i appIcon icon="download" appSquare="18" aria-hidden="true"></i>
-            </button>
+            <h2 class="text-body-12">Воронка проектов</h2>
             <app-tooltip
-              [text]="card.tooltip"
-              [isVisible]="isTooltipVisible(card.key)"
+              text="Путь проектов программы от создания до оценки."
+              [isVisible]="isTooltipVisible('solution-funnel')"
               [useOverlay]="true"
-              (click)="toggleTooltip(card.key)"
-              (show)="showTooltip(card.key)"
-              (hide)="hideTooltip(card.key)"
+              (click)="toggleTooltip('solution-funnel')"
+              (show)="showTooltip('solution-funnel')"
+              (hide)="hideTooltip('solution-funnel')"
             ></app-tooltip>
           </div>
-          @if (regionExportState()[card.key].pending) {
-            <p class="regions__export-message" role="status">Подготавливаем Excel…</p>
+          @if (hasValues(solutionFunnel())) {
+            <ol class="funnel">
+              @for (item of solutionFunnel(); track item.key) {
+                <li class="funnel__item">
+                  <span class="funnel__label text-body-10">
+                    {{ item.label }}
+                    <app-tooltip
+                      [text]="item.tooltip"
+                      [isVisible]="isTooltipVisible(item.key)"
+                      [useOverlay]="true"
+                      (click)="toggleTooltip(item.key)"
+                      (show)="showTooltip(item.key)"
+                      (hide)="hideTooltip(item.key)"
+                    ></app-tooltip>
+                  </span>
+                  <strong>{{ item.value }}</strong>
+                  <span
+                    class="funnel__bar"
+                    [style.width.%]="barWidth(item.value, solutionFunnel())"
+                  ></span>
+                </li>
+              }
+            </ol>
+          } @else {
+            <p class="analytics-empty-state text-body-10">Нет решений для отображения</p>
           }
-          @if (regionExportState()[card.key].failed) {
-            <p class="regions__export-message exports__error" role="alert">
-              Не удалось создать Excel. Попробуйте ещё раз.
-            </p>
+        </article>
+
+        <article class="analytics-card cases-card" data-testid="cases-card">
+          <div class="analytics__heading-row">
+            <h2 class="cases-card__title" id="analytics-cases-title">Кейсы</h2>
+            <app-tooltip
+              text="Распределение проектов и участников по кейсам программы. Один участник может учитываться в нескольких кейсах."
+              [isVisible]="isTooltipVisible('cases')"
+              [useOverlay]="true"
+              (click)="toggleTooltip('cases')"
+              (show)="showTooltip('cases')"
+              (hide)="hideTooltip('cases')"
+            ></app-tooltip>
+          </div>
+          @if (caseEmptyMessage(); as message) {
+            <p class="analytics-empty-state text-body-10">{{ message }}</p>
           }
-          @if (card.items.length > 0) {
-            <ul class="regions__list">
-              @for (region of card.items; track region.name) {
+          @if (caseRows().length) {
+            <ul class="cases-card__list" tabindex="0" aria-labelledby="analytics-cases-title">
+              @for (row of caseRows(); track row.key) {
                 <li>
-                  <span class="text-body-10">{{ region.name }}</span>
-                  <strong>{{ region.count }}</strong>
+                  <button
+                    type="button"
+                    #caseTrigger
+                    class="case-row"
+                    [class.case-row--without-case]="row.isWithoutCase"
+                    [attr.aria-label]="row.description + '. Открыть проекты кейса'"
+                    aria-haspopup="dialog"
+                    (click)="
+                      drilldown.openCase(
+                        caseSelection(row),
+                        row,
+                        overview.cases.submissionApplicable,
+                        caseTrigger
+                      )
+                    "
+                  >
+                    <div class="case-row__header">
+                      <span class="case-row__name" [title]="row.name">{{ row.name }}</span>
+                      <span class="case-row__total">
+                        <strong class="case-row__total-value">{{ row.projectsTotal }}</strong>
+                        <span class="case-row__total-label">{{ row.totalLabel }}</span>
+                      </span>
+                    </div>
+                    <div class="case-row__bar" role="img" [attr.aria-label]="row.description">
+                      <span class="case-row__volume" [style.width.%]="row.totalPercent"></span>
+                    </div>
+                    <div class="case-row__meta">
+                      @if (overview.cases.submissionApplicable) {
+                        <span
+                          >Сдано <strong>{{ row.submitted }}</strong></span
+                        >
+                        <span aria-hidden="true">·</span>
+                        <span
+                          >Не сдано <strong>{{ row.notSubmitted }}</strong></span
+                        >
+                        <span aria-hidden="true">·</span>
+                      }
+                      <span
+                        >Участников <strong>{{ row.participantsTotal }}</strong></span
+                      >
+                    </div>
+                  </button>
                 </li>
               }
             </ul>
-          } @else {
-            <p class="analytics-empty-state text-body-10">{{ card.emptyMessage }}</p>
           }
         </article>
-      }
-    </section>
 
-    <section class="analytics-grid" aria-label="Аналитические показатели">
-      <article class="analytics-card" data-testid="participant-funnel">
-        <div class="analytics__heading-row">
-          <h2 class="text-body-12">Воронка участников</h2>
-          <app-tooltip
-            text="Путь участников от регистрации до создания проекта."
-            [isVisible]="isTooltipVisible('participant-funnel')"
-            [useOverlay]="true"
-            (click)="toggleTooltip('participant-funnel')"
-            (show)="showTooltip('participant-funnel')"
-            (hide)="hideTooltip('participant-funnel')"
-          ></app-tooltip>
-        </div>
-        @if (hasValues(participantFunnel())) {
-          <ol class="funnel">
-            @for (item of participantFunnel(); track item.key) {
-              <li class="funnel__item">
-                <span class="funnel__label text-body-10">
-                  {{ item.label }}
-                  <app-tooltip
-                    [text]="item.tooltip"
-                    [isVisible]="isTooltipVisible(item.key)"
-                    [useOverlay]="true"
-                    (click)="toggleTooltip(item.key)"
-                    (show)="showTooltip(item.key)"
-                    (hide)="hideTooltip(item.key)"
-                  ></app-tooltip>
+        <article class="analytics-card evaluation" data-testid="evaluation-statuses">
+          <div class="analytics__heading-row">
+            <div>
+              <h2 class="analytics-card__title">Статус оценивания</h2>
+              <p class="evaluation__mode analytics-card__subtitle">{{ evaluationModeLabel() }}</p>
+            </div>
+            <app-tooltip
+              [text]="
+                overview.evaluationStatus.mode === 'open'
+                  ? 'Проект считается оценённым после первой оценки эксперта.'
+                  : 'Статус проекта определяется выполнением назначений экспертов.'
+              "
+              [isVisible]="isTooltipVisible('evaluation-status')"
+              [useOverlay]="true"
+              (click)="toggleTooltip('evaluation-status')"
+              (show)="showTooltip('evaluation-status')"
+              (hide)="hideTooltip('evaluation-status')"
+            ></app-tooltip>
+          </div>
+          @if (overview.evaluationStatus.projects.submitted > 0) {
+            <ul class="status-list status-list--projects">
+              @for (item of evaluationStatuses(); track item.key) {
+                <li>
+                  <span class="text-body-10"
+                    >{{ item.label }}
+                    @if (item.key === "evaluation-partial") {
+                      <app-tooltip
+                        [text]="item.tooltip"
+                        [isVisible]="isTooltipVisible(item.key)"
+                        [useOverlay]="true"
+                        (click)="toggleTooltip(item.key)"
+                        (show)="showTooltip(item.key)"
+                        (hide)="hideTooltip(item.key)"
+                      />
+                    }
+                  </span>
+                  <strong>{{ item.value }}</strong>
+                </li>
+              }
+            </ul>
+            @if (overview.evaluationStatus.maxEvaluationsPerProject !== null) {
+              <div class="evaluation__limit" data-testid="evaluation-limit">
+                <span>
+                  <span class="text-body-10">Максимум экспертов на проект:</span>
+                  <strong>{{ overview.evaluationStatus.maxEvaluationsPerProject }}</strong>
                 </span>
-                <strong>{{ item.value }}</strong>
-                <span
-                  class="funnel__bar"
-                  [style.width.%]="barWidth(item.value, participantFunnel())"
-                ></span>
-              </li>
+                <app-tooltip
+                  text="Максимальное количество экспертов, которые могут оценить один проект."
+                  [isVisible]="isTooltipVisible('evaluation-limit')"
+                  [useOverlay]="true"
+                  (click)="toggleTooltip('evaluation-limit')"
+                  (show)="showTooltip('evaluation-limit')"
+                  (hide)="hideTooltip('evaluation-limit')"
+                ></app-tooltip>
+              </div>
             }
-          </ol>
-        } @else {
-          <p class="analytics-empty-state text-body-10">Пока нет данных по участникам</p>
-        }
-      </article>
+          } @else {
+            <p class="analytics-empty-state text-body-10">Пока нет сданных работ для оценивания</p>
+          }
+          <div class="evaluation__assignments" data-testid="assignment-statuses">
+            <h3 class="analytics-card__section-label">Назначения экспертов</h3>
+            <ul class="status-list status-list--compact">
+              @for (item of assignmentStatuses(); track item.key) {
+                <li>
+                  <button
+                    #assignmentTrigger
+                    type="button"
+                    class="evaluation__assignment-action"
+                    [disabled]="item.value === 0"
+                    [attr.aria-label]="item.label + ': ' + item.value"
+                    (click)="drilldown.openAssignments(item.scope!, assignmentTrigger)"
+                  >
+                    <span class="evaluation__assignment-label text-body-10">{{ item.label }}</span>
+                    <i
+                      class="evaluation__assignment-arrow"
+                      appIcon
+                      icon="arrowright"
+                      appSquare="20"
+                      aria-hidden="true"
+                    ></i>
+                    <strong>{{ item.value }}</strong>
+                  </button>
+                </li>
+              }
+            </ul>
+          </div>
+        </article>
+      </section>
 
-      <article class="analytics-card" data-testid="solution-funnel">
-        <div class="analytics__heading-row">
-          <h2 class="text-body-12">Воронка проектов</h2>
-          <app-tooltip
-            text="Путь проектов программы от создания до оценки."
-            [isVisible]="isTooltipVisible('solution-funnel')"
-            [useOverlay]="true"
-            (click)="toggleTooltip('solution-funnel')"
-            (show)="showTooltip('solution-funnel')"
-            (hide)="hideTooltip('solution-funnel')"
-          ></app-tooltip>
-        </div>
-        @if (hasValues(solutionFunnel())) {
-          <ol class="funnel">
-            @for (item of solutionFunnel(); track item.key) {
-              <li class="funnel__item">
-                <span class="funnel__label text-body-10">
-                  {{ item.label }}
+      <section class="analytics-bottom">
+        <article
+          class="attention"
+          [class.attention--empty]="!hasValues(attention())"
+          data-testid="attention-block"
+        >
+          <div class="analytics__heading-row">
+            <h2 class="text-body-12">Требует внимания</h2>
+            <app-tooltip
+              text="Показатели, которые могут потребовать действия организатора."
+              [isVisible]="isTooltipVisible('attention')"
+              [useOverlay]="true"
+              (click)="toggleTooltip('attention')"
+              (show)="showTooltip('attention')"
+              (hide)="hideTooltip('attention')"
+            ></app-tooltip>
+          </div>
+          @if (hasValues(attention()) || data()?.attention?.projectsNotSubmitted?.applicable) {
+            <ul class="attention__list">
+              @for (item of attention(); track item.key) {
+                <li [class.attention__row--disabled]="item.value === 0">
+                  @if (item.key === "delayed-experts") {
+                    <button
+                      #delayedTrigger
+                      type="button"
+                      class="attention__action"
+                      [disabled]="item.value === 0"
+                      (click)="drilldown.openDelayed(delayedTrigger)"
+                    >
+                      <i appIcon icon="accent-error" appSquare="20" aria-hidden="true"></i>
+                      <span class="text-body-10">{{ item.label }}</span
+                      ><strong>{{ item.value }}</strong>
+                      <i
+                        class="attention__arrow"
+                        appIcon
+                        icon="arrowright"
+                        appSquare="20"
+                        aria-hidden="true"
+                      ></i>
+                    </button>
+                  } @else {
+                    <button
+                      #attentionTrigger
+                      type="button"
+                      class="attention__action"
+                      [disabled]="item.value === 0"
+                      (click)="
+                        drilldown.openAttention(
+                          item.key === 'without-team'
+                            ? 'participants-without-team'
+                            : item.key === 'projects-not-submitted'
+                              ? 'projects-not-submitted'
+                              : 'projects-awaiting-evaluation',
+                          attentionTrigger
+                        )
+                      "
+                    >
+                      <i appIcon icon="accent-error" appSquare="20" aria-hidden="true"></i>
+                      <span class="text-body-10">{{ item.label }}</span
+                      ><strong>{{ item.value }}</strong>
+                      <i
+                        class="attention__arrow"
+                        appIcon
+                        icon="arrowright"
+                        appSquare="20"
+                        aria-hidden="true"
+                      ></i>
+                    </button>
+                  }
                   <app-tooltip
                     [text]="item.tooltip"
+                    role="button"
+                    tabindex="0"
+                    [attr.aria-label]="item.tooltip"
+                    [attr.aria-expanded]="isTooltipVisible(item.key)"
                     [isVisible]="isTooltipVisible(item.key)"
                     [useOverlay]="true"
+                    position="left"
                     (click)="toggleTooltip(item.key)"
+                    (keydown.enter)="toggleTooltip(item.key); $event.preventDefault()"
+                    (keydown.space)="toggleTooltip(item.key); $event.preventDefault()"
+                    (keydown.escape)="closeTooltip(item.key)"
+                    (focus)="showTooltip(item.key)"
+                    (blur)="closeTooltip(item.key)"
                     (show)="showTooltip(item.key)"
                     (hide)="hideTooltip(item.key)"
                   ></app-tooltip>
-                </span>
-                <strong>{{ item.value }}</strong>
-                <span
-                  class="funnel__bar"
-                  [style.width.%]="barWidth(item.value, solutionFunnel())"
-                ></span>
-              </li>
-            }
-          </ol>
-        } @else {
-          <p class="analytics-empty-state text-body-10">Нет решений для отображения</p>
-        }
-      </article>
+                </li>
+              }
+            </ul>
+          }
+          @if (!hasValues(attention())) {
+            <p class="analytics-empty-state attention__empty text-body-10">
+              Ничего не требует внимания
+            </p>
+          }
+        </article>
+
+        <article class="activity" data-testid="activity-dynamics">
+          <div class="analytics__heading-row">
+            <div>
+              <h2 class="analytics-card__title">Динамика активности</h2>
+              @if (hasActivity()) {
+                <p class="activity__note analytics-card__subtitle">Последние 30 дней</p>
+              }
+            </div>
+            <app-tooltip
+              text="Ежедневные новые регистрации и отправленные решения за последние 30 дней."
+              [isVisible]="isTooltipVisible('activity')"
+              [useOverlay]="true"
+              position="left"
+              (click)="toggleTooltip('activity')"
+              (show)="showTooltip('activity')"
+              (hide)="hideTooltip('activity')"
+            ></app-tooltip>
+          </div>
+          @if (hasActivity()) {
+            <div class="activity__legend" aria-label="Обозначения графика">
+              <span
+                ><i class="activity__marker activity__marker--registrations"></i>Новые
+                регистрации</span
+              >
+              <span
+                ><i class="activity__marker activity__marker--solutions"></i>Отправленные
+                решения</span
+              >
+            </div>
+            <p class="activity__helper" id="activity-help">
+              Количество событий в день. Выберите дату на графике, чтобы увидеть значения.
+            </p>
+            <div
+              class="activity__chart"
+              role="group"
+              aria-label="График активности"
+              aria-describedby="activity-help"
+            >
+              <div class="activity__y-axis" aria-label="Количество событий в день">
+                @for (value of activityScale().ticks; track value; let i = $index) {
+                  <span [style.top.%]="12 + i * 19">{{ value }}</span>
+                }
+              </div>
+              <div class="activity__plot">
+                <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+                  @for (value of activityScale().ticks; track value; let i = $index) {
+                    <line
+                      class="activity__grid-line"
+                      x1="0"
+                      [attr.y1]="12 + i * 19"
+                      x2="100"
+                      [attr.y2]="12 + i * 19"
+                    ></line>
+                  }
+                  <polyline
+                    class="activity__line activity__line--registrations"
+                    [attr.points]="registrationPolyline()"
+                  ></polyline>
+                  <polyline
+                    class="activity__line activity__line--solutions"
+                    [attr.points]="submissionPolyline()"
+                  ></polyline>
+                  @for (point of activityChart(); track point.date) {
+                    <circle
+                      class="activity__point activity__point--registrations"
+                      [attr.cx]="point.x"
+                      [attr.cy]="point.registrationsY"
+                      r="1.2"
+                    >
+                      <title>{{ point.dateLabel }} — регистрации: {{ point.registrations }}</title>
+                    </circle>
+                    <circle
+                      class="activity__point activity__point--solutions"
+                      [attr.cx]="point.x"
+                      [attr.cy]="point.submittedSolutionsY"
+                      r="1.2"
+                    >
+                      <title>{{ point.dateLabel }} — решения: {{ point.submittedSolutions }}</title>
+                    </circle>
+                  }
+                </svg>
+                @for (point of activityChart(); track point.date) {
+                  <button
+                    type="button"
+                    class="activity__date-target"
+                    [class.activity__date-target--selected]="selectedActivityDate() === point.date"
+                    [style.left.%]="point.x"
+                    [style.width.%]="94 / activityChart().length"
+                    [attr.aria-label]="activityPointLabel(point)"
+                    (mouseenter)="selectedActivityDate.set(point.date)"
+                    (focus)="selectedActivityDate.set(point.date)"
+                    (click)="selectedActivityDate.set(point.date)"
+                    (keydown.escape)="selectedActivityDate.set(null)"
+                  ></button>
+                }
+                <div class="activity__axis" aria-hidden="true">
+                  @for (point of activityAxisLabels(); track point.date) {
+                    <span [style.left.%]="point.x">{{ point.dateLabel }}</span>
+                  }
+                </div>
+              </div>
+            </div>
+            <p class="activity__readout" aria-live="polite" aria-atomic="true">
+              @if (selectedActivity(); as point) {
+                <strong>{{ point.dateLabel }}</strong> · Новые регистрации:
+                <strong>{{ point.registrations }}</strong> · Отправленные решения:
+                <strong>{{ point.submittedSolutions }}</strong>
+              } @else {
+                Наведите указатель или перейдите к дате клавишей Tab
+              }
+            </p>
+          } @else {
+            <p class="analytics-empty-state text-body-12">
+              За последние 30 дней активности не было
+            </p>
+          }
+        </article>
+      </section>
+    }
+  </main>
+  <app-analytics-drilldown
+    #drilldown
+    [programId]="programId()"
+    [programName]="programName()"
+    [notSubmittedApplicable]="data()?.attention?.projectsNotSubmitted?.applicable ?? false"
+    [delayedExperts]="data()?.attention?.delayedExperts ?? { total: 0, items: [] }"
+  />
+} @else {
+  <main class="analytics" aria-labelledby="program-analytics-title">
+    <header class="analytics__header">
+      <div>
+        <p class="analytics__eyebrow text-body-10">Управление программой</p>
+        <h1 id="program-analytics-title" class="analytics__title text-heading-3">Аналитика</h1>
+        <p class="analytics__subtitle text-body-10">
+          Сводка пути участников от регистрации до экспертной оценки.
+        </p>
+      </div>
 
-      <article class="analytics-card cases-card" data-testid="cases-card">
-        <div class="analytics__heading-row">
-          <h2 class="cases-card__title" id="analytics-cases-title">Кейсы</h2>
-          <app-tooltip
-            text="Распределение проектов и участников по кейсам программы. Один участник может учитываться в нескольких кейсах."
-            [isVisible]="isTooltipVisible('cases')"
-            [useOverlay]="true"
-            (click)="toggleTooltip('cases')"
-            (show)="showTooltip('cases')"
-            (hide)="hideTooltip('cases')"
-          ></app-tooltip>
+      @if (data()) {
+        <section class="exports" aria-labelledby="analytics-exports-title">
+          <div class="analytics__heading-row">
+            <h2 id="analytics-exports-title" class="text-body-12">Выгрузки</h2>
+            <app-tooltip
+              data-testid="exports-tooltip"
+              text="Скачайте проекты программы или выставленные проектные оценки."
+              [isVisible]="isTooltipVisible('exports')"
+              [useOverlay]="true"
+              position="left"
+              (click)="toggleTooltip('exports')"
+              (show)="showTooltip('exports')"
+              (hide)="hideTooltip('exports')"
+            ></app-tooltip>
+          </div>
+          <div class="exports__actions">
+            <app-button
+              appearance="outline"
+              size="big"
+              [loader]="loadingExports()"
+              [disabled]="loadingExports()"
+              customTypographyClass="text-body-10"
+              (click)="downloadProjects()"
+            >
+              Все проекты
+            </app-button>
+            <app-button
+              appearance="outline"
+              size="big"
+              [loader]="loadingExports()"
+              [disabled]="loadingExports()"
+              customTypographyClass="text-body-10"
+              (click)="downloadSubmittedProjects()"
+            >
+              Сданные проекты
+            </app-button>
+            <app-button
+              appearance="outline"
+              size="big"
+              [loader]="loadingExports()"
+              [disabled]="loadingExports()"
+              customTypographyClass="text-body-10"
+              (click)="downloadRates()"
+            >
+              Оценки проектов
+            </app-button>
+          </div>
+          @if (exportFailed()) {
+            <app-state
+              class="exports__error text-body-10"
+              [compact]="true"
+              kind="error"
+              title="Не удалось подготовить выгрузку. Повторите попытку."
+            />
+          }
+        </section>
+      }
+    </header>
+
+    @if (pending()) {
+      <section class="analytics__loading" aria-live="polite" data-testid="analytics-loading">
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        <p class="text-body-10">Загружаем аналитику программы…</p>
+        <div class="summary summary--loading" aria-hidden="true">
+          @for (_ of [1, 2, 3, 4]; track $index) {
+            <div class="summary-card summary-card--skeleton"></div>
+          }
         </div>
-        @if (caseEmptyMessage(); as message) {
-          <p class="analytics-empty-state text-body-10">{{ message }}</p>
+      </section>
+    } @else if (failed()) {
+      <section class="analytics-state" role="alert" data-testid="analytics-error">
+        <i appIcon icon="accent-error" appSquare="40"></i>
+        <h2 class="text-body-14">Аналитика недоступна</h2>
+        <p class="text-body-10">{{ errorMessage() }}</p>
+        @if (error()?.kind === "network") {
+          <app-button size="medium" customTypographyClass="text-body-10" (click)="retry()">
+            Повторить
+          </app-button>
         }
-        @if (caseRows().length) {
-          <ul class="cases-card__list" tabindex="0" aria-labelledby="analytics-cases-title">
-            @for (row of caseRows(); track row.key) {
-              <li>
-                <button
-                  type="button"
-                  #caseTrigger
-                  class="case-row"
-                  [class.case-row--without-case]="row.isWithoutCase"
-                  [attr.aria-label]="row.description + '. Открыть проекты кейса'"
-                  aria-haspopup="dialog"
-                  (click)="
-                    drilldown.openCase(
-                      caseSelection(row),
-                      row,
-                      overview.cases.submissionApplicable,
-                      caseTrigger
-                    )
-                  "
-                >
-                  <div class="case-row__header">
-                    <span class="case-row__name" [title]="row.name">{{ row.name }}</span>
-                    <span class="case-row__total">
-                      <strong class="case-row__total-value">{{ row.projectsTotal }}</strong>
-                      <span class="case-row__total-label">{{ row.totalLabel }}</span>
-                    </span>
-                  </div>
-                  <div class="case-row__bar" role="img" [attr.aria-label]="row.description">
-                    <span class="case-row__volume" [style.width.%]="row.totalPercent"></span>
-                  </div>
-                  <div class="case-row__meta">
-                    @if (overview.cases.submissionApplicable) {
-                      <span
-                        >Сдано <strong>{{ row.submitted }}</strong></span
-                      >
-                      <span aria-hidden="true">·</span>
-                      <span
-                        >Не сдано <strong>{{ row.notSubmitted }}</strong></span
-                      >
-                      <span aria-hidden="true">·</span>
-                    }
-                    <span
-                      >Участников <strong>{{ row.participantsTotal }}</strong></span
-                    >
-                  </div>
-                </button>
-              </li>
+      </section>
+    } @else if (data(); as overview) {
+      <section class="summary" aria-label="Основные показатели">
+        @for (card of summary(); track card.key) {
+          <article class="summary-card" [attr.data-testid]="'summary-' + card.key">
+            <div class="summary-card__icon">
+              <i appIcon [icon]="card.icon!" appSquare="24"></i>
+            </div>
+            <div class="summary-card__content">
+              <div class="analytics__heading-row">
+                <h2 class="summary-card__label text-body-10">{{ card.label }}</h2>
+                <app-tooltip
+                  data-testid="metric-tooltip"
+                  [text]="card.tooltip"
+                  [isVisible]="isTooltipVisible(card.key)"
+                  [useOverlay]="true"
+                  (click)="toggleTooltip(card.key)"
+                  (show)="showTooltip(card.key)"
+                  (hide)="hideTooltip(card.key)"
+                ></app-tooltip>
+              </div>
+              <strong class="summary-card__value">{{ card.value }}</strong>
+            </div>
+          </article>
+        }
+      </section>
+
+      <section class="regions-grid" aria-label="География программы">
+        @for (card of regionCards(); track card.key) {
+          <article
+            class="regions"
+            [attr.aria-labelledby]="card.key + '-title'"
+            [attr.data-testid]="card.key"
+          >
+            <div class="analytics__heading-row">
+              <h2 [id]="card.key + '-title'" class="text-body-12">{{ card.title }}</h2>
+              <button
+                appButton="secondary"
+                type="button"
+                class="regions__export"
+                [attr.aria-label]="'Выгрузить ' + card.title.toLowerCase() + ' в Excel'"
+                [attr.title]="card.items.length ? 'Скачать XLSX' : 'Нет данных для выгрузки'"
+                [disabled]="!card.items.length || regionExportState()[card.key].pending"
+                [attr.aria-busy]="regionExportState()[card.key].pending"
+                (click)="downloadRegions(card.key)"
+              >
+                <i appIcon icon="download" appSquare="18" aria-hidden="true"></i>
+              </button>
+              <app-tooltip
+                [text]="card.tooltip"
+                [isVisible]="isTooltipVisible(card.key)"
+                [useOverlay]="true"
+                (click)="toggleTooltip(card.key)"
+                (show)="showTooltip(card.key)"
+                (hide)="hideTooltip(card.key)"
+              ></app-tooltip>
+            </div>
+            @if (regionExportState()[card.key].pending) {
+              <app-state
+                class="regions__export-message"
+                [compact]="true"
+                kind="loading"
+                title="Подготавливаем Excel…"
+              />
             }
-          </ul>
+            @if (regionExportState()[card.key].failed) {
+              <app-state
+                class="regions__export-message exports__error"
+                [compact]="true"
+                kind="error"
+                title="Не удалось создать Excel. Попробуйте ещё раз."
+              />
+            }
+            @if (card.items.length > 0) {
+              <ul class="regions__list">
+                @for (region of card.items; track region.name) {
+                  <li>
+                    <span class="text-body-10">{{ region.name }}</span>
+                    <strong>{{ region.count }}</strong>
+                  </li>
+                }
+              </ul>
+            } @else {
+              <p class="analytics-empty-state text-body-10">{{ card.emptyMessage }}</p>
+            }
+          </article>
         }
-      </article>
+      </section>
 
-      <article class="analytics-card evaluation" data-testid="evaluation-statuses">
-        <div class="analytics__heading-row">
-          <div>
-            <h2 class="analytics-card__title">Статус оценивания</h2>
-            <p class="evaluation__mode analytics-card__subtitle">{{ evaluationModeLabel() }}</p>
+      <section class="analytics-grid" aria-label="Аналитические показатели">
+        <article class="analytics-card" data-testid="participant-funnel">
+          <div class="analytics__heading-row">
+            <h2 class="text-body-12">Воронка участников</h2>
+            <app-tooltip
+              text="Путь участников от регистрации до создания проекта."
+              [isVisible]="isTooltipVisible('participant-funnel')"
+              [useOverlay]="true"
+              (click)="toggleTooltip('participant-funnel')"
+              (show)="showTooltip('participant-funnel')"
+              (hide)="hideTooltip('participant-funnel')"
+            ></app-tooltip>
           </div>
-          <app-tooltip
-            [text]="
-              overview.evaluationStatus.mode === 'open'
-                ? 'Проект считается оценённым после первой оценки эксперта.'
-                : 'Статус проекта определяется выполнением назначений экспертов.'
-            "
-            [isVisible]="isTooltipVisible('evaluation-status')"
-            [useOverlay]="true"
-            (click)="toggleTooltip('evaluation-status')"
-            (show)="showTooltip('evaluation-status')"
-            (hide)="hideTooltip('evaluation-status')"
-          ></app-tooltip>
-        </div>
-        @if (overview.evaluationStatus.projects.submitted > 0) {
-          <ul class="status-list status-list--projects">
-            @for (item of evaluationStatuses(); track item.key) {
-              <li>
-                <span class="text-body-10"
-                  >{{ item.label }}
-                  @if (item.key === "evaluation-partial") {
+          @if (hasValues(participantFunnel())) {
+            <ol class="funnel">
+              @for (item of participantFunnel(); track item.key) {
+                <li class="funnel__item">
+                  <span class="funnel__label text-body-10">
+                    {{ item.label }}
                     <app-tooltip
                       [text]="item.tooltip"
                       [isVisible]="isTooltipVisible(item.key)"
@@ -347,282 +834,445 @@ <h2 class="analytics-card__title">Статус оценивания</h2>
                       (click)="toggleTooltip(item.key)"
                       (show)="showTooltip(item.key)"
                       (hide)="hideTooltip(item.key)"
-                    />
-                  }
-                </span>
-                <strong>{{ item.value }}</strong>
-              </li>
-            }
-          </ul>
-          @if (overview.evaluationStatus.maxEvaluationsPerProject !== null) {
-            <div class="evaluation__limit" data-testid="evaluation-limit">
-              <span>
-                <span class="text-body-10">Максимум экспертов на проект:</span>
-                <strong>{{ overview.evaluationStatus.maxEvaluationsPerProject }}</strong>
-              </span>
-              <app-tooltip
-                text="Максимальное количество экспертов, которые могут оценить один проект."
-                [isVisible]="isTooltipVisible('evaluation-limit')"
-                [useOverlay]="true"
-                (click)="toggleTooltip('evaluation-limit')"
-                (show)="showTooltip('evaluation-limit')"
-                (hide)="hideTooltip('evaluation-limit')"
-              ></app-tooltip>
-            </div>
+                    ></app-tooltip>
+                  </span>
+                  <strong>{{ item.value }}</strong>
+                  <span
+                    class="funnel__bar"
+                    [style.width.%]="barWidth(item.value, participantFunnel())"
+                  ></span>
+                </li>
+              }
+            </ol>
+          } @else {
+            <p class="analytics-empty-state text-body-10">Пока нет данных по участникам</p>
           }
-        } @else {
-          <p class="analytics-empty-state text-body-10">Пока нет сданных работ для оценивания</p>
-        }
-        <div class="evaluation__assignments" data-testid="assignment-statuses">
-          <h3 class="analytics-card__section-label">Назначения экспертов</h3>
-          <ul class="status-list status-list--compact">
-            @for (item of assignmentStatuses(); track item.key) {
-              <li>
-                <button
-                  #assignmentTrigger
-                  type="button"
-                  class="evaluation__assignment-action"
-                  [disabled]="item.value === 0"
-                  [attr.aria-label]="item.label + ': ' + item.value"
-                  (click)="drilldown.openAssignments(item.scope!, assignmentTrigger)"
-                >
-                  <span class="evaluation__assignment-label text-body-10">{{ item.label }}</span>
-                  <i
-                    class="evaluation__assignment-arrow"
-                    appIcon
-                    icon="arrowright"
-                    appSquare="20"
-                    aria-hidden="true"
-                  ></i>
+        </article>
+
+        <article class="analytics-card" data-testid="solution-funnel">
+          <div class="analytics__heading-row">
+            <h2 class="text-body-12">Воронка проектов</h2>
+            <app-tooltip
+              text="Путь проектов программы от создания до оценки."
+              [isVisible]="isTooltipVisible('solution-funnel')"
+              [useOverlay]="true"
+              (click)="toggleTooltip('solution-funnel')"
+              (show)="showTooltip('solution-funnel')"
+              (hide)="hideTooltip('solution-funnel')"
+            ></app-tooltip>
+          </div>
+          @if (hasValues(solutionFunnel())) {
+            <ol class="funnel">
+              @for (item of solutionFunnel(); track item.key) {
+                <li class="funnel__item">
+                  <span class="funnel__label text-body-10">
+                    {{ item.label }}
+                    <app-tooltip
+                      [text]="item.tooltip"
+                      [isVisible]="isTooltipVisible(item.key)"
+                      [useOverlay]="true"
+                      (click)="toggleTooltip(item.key)"
+                      (show)="showTooltip(item.key)"
+                      (hide)="hideTooltip(item.key)"
+                    ></app-tooltip>
+                  </span>
                   <strong>{{ item.value }}</strong>
-                </button>
-              </li>
-            }
-          </ul>
-        </div>
-      </article>
-    </section>
+                  <span
+                    class="funnel__bar"
+                    [style.width.%]="barWidth(item.value, solutionFunnel())"
+                  ></span>
+                </li>
+              }
+            </ol>
+          } @else {
+            <p class="analytics-empty-state text-body-10">Нет решений для отображения</p>
+          }
+        </article>
 
-    <section class="analytics-bottom">
-      <article
-        class="attention"
-        [class.attention--empty]="!hasValues(attention())"
-        data-testid="attention-block"
-      >
-        <div class="analytics__heading-row">
-          <h2 class="text-body-12">Требует внимания</h2>
-          <app-tooltip
-            text="Показатели, которые могут потребовать действия организатора."
-            [isVisible]="isTooltipVisible('attention')"
-            [useOverlay]="true"
-            (click)="toggleTooltip('attention')"
-            (show)="showTooltip('attention')"
-            (hide)="hideTooltip('attention')"
-          ></app-tooltip>
-        </div>
-        @if (hasValues(attention()) || data()?.attention?.projectsNotSubmitted?.applicable) {
-          <ul class="attention__list">
-            @for (item of attention(); track item.key) {
-              <li [class.attention__row--disabled]="item.value === 0">
-                @if (item.key === "delayed-experts") {
+        <article class="analytics-card cases-card" data-testid="cases-card">
+          <div class="analytics__heading-row">
+            <h2 class="cases-card__title" id="analytics-cases-title">Кейсы</h2>
+            <app-tooltip
+              text="Распределение проектов и участников по кейсам программы. Один участник может учитываться в нескольких кейсах."
+              [isVisible]="isTooltipVisible('cases')"
+              [useOverlay]="true"
+              (click)="toggleTooltip('cases')"
+              (show)="showTooltip('cases')"
+              (hide)="hideTooltip('cases')"
+            ></app-tooltip>
+          </div>
+          @if (caseEmptyMessage(); as message) {
+            <p class="analytics-empty-state text-body-10">{{ message }}</p>
+          }
+          @if (caseRows().length) {
+            <ul class="cases-card__list" tabindex="0" aria-labelledby="analytics-cases-title">
+              @for (row of caseRows(); track row.key) {
+                <li>
                   <button
-                    #delayedTrigger
+                    appButton="secondary"
                     type="button"
-                    class="attention__action"
-                    [disabled]="item.value === 0"
-                    (click)="drilldown.openDelayed(delayedTrigger)"
+                    #caseTrigger
+                    class="case-row"
+                    [class.case-row--without-case]="row.isWithoutCase"
+                    [attr.aria-label]="row.description + '. Открыть проекты кейса'"
+                    aria-haspopup="dialog"
+                    (click)="
+                      drilldown.openCase(
+                        caseSelection(row),
+                        row,
+                        overview.cases.submissionApplicable,
+                        caseTrigger
+                      )
+                    "
                   >
-                    <i appIcon icon="accent-error" appSquare="20" aria-hidden="true"></i>
-                    <span class="text-body-10">{{ item.label }}</span
-                    ><strong>{{ item.value }}</strong>
-                    <i
-                      class="attention__arrow"
-                      appIcon
-                      icon="arrowright"
-                      appSquare="20"
-                      aria-hidden="true"
-                    ></i>
+                    <div class="case-row__header">
+                      <span class="case-row__name" [title]="row.name">{{ row.name }}</span>
+                      <span class="case-row__total">
+                        <strong class="case-row__total-value">{{ row.projectsTotal }}</strong>
+                        <span class="case-row__total-label">{{ row.totalLabel }}</span>
+                      </span>
+                    </div>
+                    <div class="case-row__bar" role="img" [attr.aria-label]="row.description">
+                      <span class="case-row__volume" [style.width.%]="row.totalPercent"></span>
+                    </div>
+                    <div class="case-row__meta">
+                      @if (overview.cases.submissionApplicable) {
+                        <span
+                          >Сдано <strong>{{ row.submitted }}</strong></span
+                        >
+                        <span aria-hidden="true">·</span>
+                        <span
+                          >Не сдано <strong>{{ row.notSubmitted }}</strong></span
+                        >
+                        <span aria-hidden="true">·</span>
+                      }
+                      <span
+                        >Участников <strong>{{ row.participantsTotal }}</strong></span
+                      >
+                    </div>
                   </button>
-                } @else {
+                </li>
+              }
+            </ul>
+          }
+        </article>
+
+        <article class="analytics-card evaluation" data-testid="evaluation-statuses">
+          <div class="analytics__heading-row">
+            <div>
+              <h2 class="analytics-card__title">Статус оценивания</h2>
+              <p class="evaluation__mode analytics-card__subtitle">{{ evaluationModeLabel() }}</p>
+            </div>
+            <app-tooltip
+              [text]="
+                overview.evaluationStatus.mode === 'open'
+                  ? 'Проект считается оценённым после первой оценки эксперта.'
+                  : 'Статус проекта определяется выполнением назначений экспертов.'
+              "
+              [isVisible]="isTooltipVisible('evaluation-status')"
+              [useOverlay]="true"
+              (click)="toggleTooltip('evaluation-status')"
+              (show)="showTooltip('evaluation-status')"
+              (hide)="hideTooltip('evaluation-status')"
+            ></app-tooltip>
+          </div>
+          @if (overview.evaluationStatus.projects.submitted > 0) {
+            <ul class="status-list status-list--projects">
+              @for (item of evaluationStatuses(); track item.key) {
+                <li>
+                  <span class="text-body-10"
+                    >{{ item.label }}
+                    @if (item.key === "evaluation-partial") {
+                      <app-tooltip
+                        [text]="item.tooltip"
+                        [isVisible]="isTooltipVisible(item.key)"
+                        [useOverlay]="true"
+                        (click)="toggleTooltip(item.key)"
+                        (show)="showTooltip(item.key)"
+                        (hide)="hideTooltip(item.key)"
+                      />
+                    }
+                  </span>
+                  <strong>{{ item.value }}</strong>
+                </li>
+              }
+            </ul>
+            @if (overview.evaluationStatus.maxEvaluationsPerProject !== null) {
+              <div class="evaluation__limit" data-testid="evaluation-limit">
+                <span>
+                  <span class="text-body-10">Максимум экспертов на проект:</span>
+                  <strong>{{ overview.evaluationStatus.maxEvaluationsPerProject }}</strong>
+                </span>
+                <app-tooltip
+                  text="Максимальное количество экспертов, которые могут оценить один проект."
+                  [isVisible]="isTooltipVisible('evaluation-limit')"
+                  [useOverlay]="true"
+                  (click)="toggleTooltip('evaluation-limit')"
+                  (show)="showTooltip('evaluation-limit')"
+                  (hide)="hideTooltip('evaluation-limit')"
+                ></app-tooltip>
+              </div>
+            }
+          } @else {
+            <p class="analytics-empty-state text-body-10">Пока нет сданных работ для оценивания</p>
+          }
+          <div class="evaluation__assignments" data-testid="assignment-statuses">
+            <h3 class="analytics-card__section-label">Назначения экспертов</h3>
+            <ul class="status-list status-list--compact">
+              @for (item of assignmentStatuses(); track item.key) {
+                <li>
                   <button
-                    #attentionTrigger
+                    appButton="secondary"
+                    #assignmentTrigger
                     type="button"
-                    class="attention__action"
+                    class="evaluation__assignment-action"
                     [disabled]="item.value === 0"
-                    (click)="
-                      drilldown.openAttention(
-                        item.key === 'without-team'
-                          ? 'participants-without-team'
-                          : item.key === 'projects-not-submitted'
-                            ? 'projects-not-submitted'
-                            : 'projects-awaiting-evaluation',
-                        attentionTrigger
-                      )
-                    "
+                    [attr.aria-label]="item.label + ': ' + item.value"
+                    (click)="drilldown.openAssignments(item.scope!, assignmentTrigger)"
                   >
-                    <i appIcon icon="accent-error" appSquare="20" aria-hidden="true"></i>
-                    <span class="text-body-10">{{ item.label }}</span
-                    ><strong>{{ item.value }}</strong>
+                    <span class="evaluation__assignment-label text-body-10">{{ item.label }}</span>
                     <i
-                      class="attention__arrow"
+                      class="evaluation__assignment-arrow"
                       appIcon
                       icon="arrowright"
                       appSquare="20"
                       aria-hidden="true"
                     ></i>
+                    <strong>{{ item.value }}</strong>
                   </button>
-                }
-                <app-tooltip
-                  [text]="item.tooltip"
-                  role="button"
-                  tabindex="0"
-                  [attr.aria-label]="item.tooltip"
-                  [attr.aria-expanded]="isTooltipVisible(item.key)"
-                  [isVisible]="isTooltipVisible(item.key)"
-                  [useOverlay]="true"
-                  position="left"
-                  (click)="toggleTooltip(item.key)"
-                  (keydown.enter)="toggleTooltip(item.key); $event.preventDefault()"
-                  (keydown.space)="toggleTooltip(item.key); $event.preventDefault()"
-                  (keydown.escape)="closeTooltip(item.key)"
-                  (focus)="showTooltip(item.key)"
-                  (blur)="closeTooltip(item.key)"
-                  (show)="showTooltip(item.key)"
-                  (hide)="hideTooltip(item.key)"
-                ></app-tooltip>
-              </li>
-            }
-          </ul>
-        }
-        @if (!hasValues(attention())) {
-          <p class="analytics-empty-state attention__empty text-body-10">
-            Ничего не требует внимания
-          </p>
-        }
-      </article>
-
-      <article class="activity" data-testid="activity-dynamics">
-        <div class="analytics__heading-row">
-          <div>
-            <h2 class="analytics-card__title">Динамика активности</h2>
-            @if (hasActivity()) {
-              <p class="activity__note analytics-card__subtitle">Последние 30 дней</p>
-            }
+                </li>
+              }
+            </ul>
           </div>
-          <app-tooltip
-            text="Ежедневные новые регистрации и отправленные решения за последние 30 дней."
-            [isVisible]="isTooltipVisible('activity')"
-            [useOverlay]="true"
-            position="left"
-            (click)="toggleTooltip('activity')"
-            (show)="showTooltip('activity')"
-            (hide)="hideTooltip('activity')"
-          ></app-tooltip>
-        </div>
-        @if (hasActivity()) {
-          <div class="activity__legend" aria-label="Обозначения графика">
-            <span
-              ><i class="activity__marker activity__marker--registrations"></i>Новые
-              регистрации</span
-            >
-            <span
-              ><i class="activity__marker activity__marker--solutions"></i>Отправленные
-              решения</span
-            >
+        </article>
+      </section>
+
+      <section class="analytics-bottom">
+        <article
+          class="attention"
+          [class.attention--empty]="!hasValues(attention())"
+          data-testid="attention-block"
+        >
+          <div class="analytics__heading-row">
+            <h2 class="text-body-12">Требует внимания</h2>
+            <app-tooltip
+              text="Показатели, которые могут потребовать действия организатора."
+              [isVisible]="isTooltipVisible('attention')"
+              [useOverlay]="true"
+              (click)="toggleTooltip('attention')"
+              (show)="showTooltip('attention')"
+              (hide)="hideTooltip('attention')"
+            ></app-tooltip>
           </div>
-          <p class="activity__helper" id="activity-help">
-            Количество событий в день. Выберите дату на графике, чтобы увидеть значения.
-          </p>
-          <div
-            class="activity__chart"
-            role="group"
-            aria-label="График активности"
-            aria-describedby="activity-help"
-          >
-            <div class="activity__y-axis" aria-label="Количество событий в день">
-              @for (value of activityScale().ticks; track value; let i = $index) {
-                <span [style.top.%]="12 + i * 19">{{ value }}</span>
+          @if (hasValues(attention()) || data()?.attention?.projectsNotSubmitted?.applicable) {
+            <ul class="attention__list">
+              @for (item of attention(); track item.key) {
+                <li [class.attention__row--disabled]="item.value === 0">
+                  @if (item.key === "delayed-experts") {
+                    <button
+                      appButton="secondary"
+                      #delayedTrigger
+                      type="button"
+                      class="attention__action"
+                      [disabled]="item.value === 0"
+                      (click)="drilldown.openDelayed(delayedTrigger)"
+                    >
+                      <i appIcon icon="accent-error" appSquare="20" aria-hidden="true"></i>
+                      <span class="text-body-10">{{ item.label }}</span
+                      ><strong>{{ item.value }}</strong>
+                      <i
+                        class="attention__arrow"
+                        appIcon
+                        icon="arrowright"
+                        appSquare="20"
+                        aria-hidden="true"
+                      ></i>
+                    </button>
+                  } @else {
+                    <button
+                      appButton="primary"
+                      #attentionTrigger
+                      type="button"
+                      class="attention__action"
+                      [disabled]="item.value === 0"
+                      (click)="
+                        drilldown.openAttention(
+                          item.key === 'without-team'
+                            ? 'participants-without-team'
+                            : item.key === 'projects-not-submitted'
+                              ? 'projects-not-submitted'
+                              : 'projects-awaiting-evaluation',
+                          attentionTrigger
+                        )
+                      "
+                    >
+                      <i appIcon icon="accent-error" appSquare="20" aria-hidden="true"></i>
+                      <span class="text-body-10">{{ item.label }}</span
+                      ><strong>{{ item.value }}</strong>
+                      <i
+                        class="attention__arrow"
+                        appIcon
+                        icon="arrowright"
+                        appSquare="20"
+                        aria-hidden="true"
+                      ></i>
+                    </button>
+                  }
+                  <app-tooltip
+                    [text]="item.tooltip"
+                    role="button"
+                    tabindex="0"
+                    [attr.aria-label]="item.tooltip"
+                    [attr.aria-expanded]="isTooltipVisible(item.key)"
+                    [isVisible]="isTooltipVisible(item.key)"
+                    [useOverlay]="true"
+                    position="left"
+                    (click)="toggleTooltip(item.key)"
+                    (keydown.enter)="toggleTooltip(item.key); $event.preventDefault()"
+                    (keydown.space)="toggleTooltip(item.key); $event.preventDefault()"
+                    (keydown.escape)="closeTooltip(item.key)"
+                    (focus)="showTooltip(item.key)"
+                    (blur)="closeTooltip(item.key)"
+                    (show)="showTooltip(item.key)"
+                    (hide)="hideTooltip(item.key)"
+                  ></app-tooltip>
+                </li>
+              }
+            </ul>
+          }
+          @if (!hasValues(attention())) {
+            <p class="analytics-empty-state attention__empty text-body-10">
+              Ничего не требует внимания
+            </p>
+          }
+        </article>
+
+        <article class="activity" data-testid="activity-dynamics">
+          <div class="analytics__heading-row">
+            <div>
+              <h2 class="analytics-card__title">Динамика активности</h2>
+              @if (hasActivity()) {
+                <p class="activity__note analytics-card__subtitle">Последние 30 дней</p>
               }
             </div>
-            <div class="activity__plot">
-              <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+            <app-tooltip
+              text="Ежедневные новые регистрации и отправленные решения за последние 30 дней."
+              [isVisible]="isTooltipVisible('activity')"
+              [useOverlay]="true"
+              position="left"
+              (click)="toggleTooltip('activity')"
+              (show)="showTooltip('activity')"
+              (hide)="hideTooltip('activity')"
+            ></app-tooltip>
+          </div>
+          @if (hasActivity()) {
+            <div class="activity__legend" aria-label="Обозначения графика">
+              <span
+                ><i class="activity__marker activity__marker--registrations"></i>Новые
+                регистрации</span
+              >
+              <span
+                ><i class="activity__marker activity__marker--solutions"></i>Отправленные
+                решения</span
+              >
+            </div>
+            <p class="activity__helper" id="activity-help">
+              Количество событий в день. Выберите дату на графике, чтобы увидеть значения.
+            </p>
+            <div
+              class="activity__chart"
+              role="group"
+              aria-label="График активности"
+              aria-describedby="activity-help"
+            >
+              <div class="activity__y-axis" aria-label="Количество событий в день">
                 @for (value of activityScale().ticks; track value; let i = $index) {
-                  <line
-                    class="activity__grid-line"
-                    x1="0"
-                    [attr.y1]="12 + i * 19"
-                    x2="100"
-                    [attr.y2]="12 + i * 19"
-                  ></line>
+                  <span [style.top.%]="12 + i * 19">{{ value }}</span>
                 }
-                <polyline
-                  class="activity__line activity__line--registrations"
-                  [attr.points]="registrationPolyline()"
-                ></polyline>
-                <polyline
-                  class="activity__line activity__line--solutions"
-                  [attr.points]="submissionPolyline()"
-                ></polyline>
+              </div>
+              <div class="activity__plot">
+                <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+                  @for (value of activityScale().ticks; track value; let i = $index) {
+                    <line
+                      class="activity__grid-line"
+                      x1="0"
+                      [attr.y1]="12 + i * 19"
+                      x2="100"
+                      [attr.y2]="12 + i * 19"
+                    ></line>
+                  }
+                  <polyline
+                    class="activity__line activity__line--registrations"
+                    [attr.points]="registrationPolyline()"
+                  ></polyline>
+                  <polyline
+                    class="activity__line activity__line--solutions"
+                    [attr.points]="submissionPolyline()"
+                  ></polyline>
+                  @for (point of activityChart(); track point.date) {
+                    <circle
+                      class="activity__point activity__point--registrations"
+                      [attr.cx]="point.x"
+                      [attr.cy]="point.registrationsY"
+                      r="1.2"
+                    >
+                      <title>{{ point.dateLabel }} — регистрации: {{ point.registrations }}</title>
+                    </circle>
+                    <circle
+                      class="activity__point activity__point--solutions"
+                      [attr.cx]="point.x"
+                      [attr.cy]="point.submittedSolutionsY"
+                      r="1.2"
+                    >
+                      <title>{{ point.dateLabel }} — решения: {{ point.submittedSolutions }}</title>
+                    </circle>
+                  }
+                </svg>
                 @for (point of activityChart(); track point.date) {
-                  <circle
-                    class="activity__point activity__point--registrations"
-                    [attr.cx]="point.x"
-                    [attr.cy]="point.registrationsY"
-                    r="1.2"
-                  >
-                    <title>{{ point.dateLabel }} — регистрации: {{ point.registrations }}</title>
-                  </circle>
-                  <circle
-                    class="activity__point activity__point--solutions"
-                    [attr.cx]="point.x"
-                    [attr.cy]="point.submittedSolutionsY"
-                    r="1.2"
-                  >
-                    <title>{{ point.dateLabel }} — решения: {{ point.submittedSolutions }}</title>
-                  </circle>
-                }
-              </svg>
-              @for (point of activityChart(); track point.date) {
-                <button
-                  type="button"
-                  class="activity__date-target"
-                  [class.activity__date-target--selected]="selectedActivityDate() === point.date"
-                  [style.left.%]="point.x"
-                  [style.width.%]="94 / activityChart().length"
-                  [attr.aria-label]="activityPointLabel(point)"
-                  (mouseenter)="selectedActivityDate.set(point.date)"
-                  (focus)="selectedActivityDate.set(point.date)"
-                  (click)="selectedActivityDate.set(point.date)"
-                  (keydown.escape)="selectedActivityDate.set(null)"
-                ></button>
-              }
-              <div class="activity__axis" aria-hidden="true">
-                @for (point of activityAxisLabels(); track point.date) {
-                  <span [style.left.%]="point.x">{{ point.dateLabel }}</span>
+                  <button
+                    appButton="secondary"
+                    type="button"
+                    class="activity__date-target"
+                    [class.activity__date-target--selected]="selectedActivityDate() === point.date"
+                    [style.left.%]="point.x"
+                    [style.width.%]="94 / activityChart().length"
+                    [attr.aria-label]="activityPointLabel(point)"
+                    (mouseenter)="selectedActivityDate.set(point.date)"
+                    (focus)="selectedActivityDate.set(point.date)"
+                    (click)="selectedActivityDate.set(point.date)"
+                    (keydown.escape)="selectedActivityDate.set(null)"
+                  ></button>
                 }
+                <div class="activity__axis" aria-hidden="true">
+                  @for (point of activityAxisLabels(); track point.date) {
+                    <span [style.left.%]="point.x">{{ point.dateLabel }}</span>
+                  }
+                </div>
               </div>
             </div>
-          </div>
-          <p class="activity__readout" aria-live="polite" aria-atomic="true">
-            @if (selectedActivity(); as point) {
-              <strong>{{ point.dateLabel }}</strong> · Новые регистрации:
-              <strong>{{ point.registrations }}</strong> · Отправленные решения:
-              <strong>{{ point.submittedSolutions }}</strong>
-            } @else {
-              Наведите указатель или перейдите к дате клавишей Tab
-            }
-          </p>
-        } @else {
-          <p class="analytics-empty-state text-body-12">За последние 30 дней активности не было</p>
-        }
-      </article>
-    </section>
-  }
-</main>
-<app-analytics-drilldown
-  #drilldown
-  [programId]="programId()"
-  [programName]="programName()"
-  [notSubmittedApplicable]="data()?.attention?.projectsNotSubmitted?.applicable ?? false"
-  [delayedExperts]="data()?.attention?.delayedExperts ?? { total: 0, items: [] }"
-/>
+            <p class="activity__readout" aria-live="polite" aria-atomic="true">
+              @if (selectedActivity(); as point) {
+                <strong>{{ point.dateLabel }}</strong> · Новые регистрации:
+                <strong>{{ point.registrations }}</strong> · Отправленные решения:
+                <strong>{{ point.submittedSolutions }}</strong>
+              } @else {
+                Наведите указатель или перейдите к дате клавишей Tab
+              }
+            </p>
+          } @else {
+            <p class="analytics-empty-state text-body-12">
+              За последние 30 дней активности не было
+            </p>
+          }
+        </article>
+      </section>
+    }
+  </main>
+  <app-analytics-drilldown
+    #drilldown
+    [programId]="programId()"
+    [programName]="programName()"
+    [notSubmittedApplicable]="data()?.attention?.projectsNotSubmitted?.applicable ?? false"
+    [delayedExperts]="data()?.attention?.delayedExperts ?? { total: 0, items: [] }"
+  />
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
index 9ba6d26d6..4bc49c8e3 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 
 .analytics {
@@ -216,13 +215,13 @@
 
   &--skeleton {
     min-height: 92px;
-    background:
-      linear-gradient(
-        90deg,
-        var(--light-gray) 20%,
-        var(--medium-grey-for-outline) 50%,
-        var(--light-gray) 80%
-      );
+    /* stylelint-disable-next-line declaration-colon-newline-after */
+    background: linear-gradient(
+      90deg,
+      var(--light-gray) 20%,
+      var(--medium-grey-for-outline) 50%,
+      var(--light-gray) 80%
+    );
     background-size: 200% 100%;
     animation: analytics-skeleton 1.3s ease-in-out infinite;
   }
@@ -930,3 +929,160 @@
     background-position: -100% 0;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .analytics {
+    &__heading-row {
+      h2 {
+        font-size: var(--ui-font-h3);
+      }
+    }
+  }
+
+  .summary {
+    grid-template-columns: 1fr;
+
+    @media screen and (min-width: 600px) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  .summary-card,
+  .analytics-card,
+  .regions,
+  .attention,
+  .activity {
+    box-shadow: var(--ui-chart-shadow);
+  }
+
+  .summary-card {
+    &__value {
+      font-size: var(--ui-font-h1);
+    }
+  }
+
+  .analytics-card {
+    &__title {
+      font-size: var(--ui-font-h3);
+    }
+
+    &__subtitle {
+      font-size: var(--ui-font-body);
+    }
+
+    &__section-label {
+      font-size: var(--ui-font-body);
+    }
+  }
+
+  .cases-card {
+    &__title {
+      font-size: var(--ui-font-h3);
+    }
+  }
+
+  .case-row {
+    &__name {
+      /* stylelint-disable-next-line value-no-vendor-prefix */
+      font-size: var(--ui-font-small);
+    }
+
+    &__total-value {
+      font-size: var(--ui-font-h2);
+    }
+
+    &__total-label,
+    &__meta {
+      font-size: var(--ui-font-caption);
+    }
+  }
+
+  .funnel {
+    &__bar {
+      background: linear-gradient(90deg, var(--accent-light), var(--ui-accent-gradient-end));
+    }
+  }
+
+  .status-list {
+    li {
+      strong {
+        font-size: var(--ui-font-h2);
+      }
+    }
+
+    &--compact {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+
+      li {
+        flex-direction: column;
+      }
+
+      @media screen and (max-width: 520px) {
+        grid-template-columns: 1fr;
+
+        li {
+          flex-direction: row;
+        }
+      }
+    }
+  }
+
+  .evaluation {
+    &__limit {
+      strong {
+        font-size: var(--ui-font-body);
+      }
+    }
+  }
+
+  .activity {
+    &__y-axis span {
+      font-size: var(--ui-font-small);
+    }
+
+    &__helper,
+    &__readout {
+      font-size: var(--ui-font-small);
+    }
+
+    &__date-target {
+      &:hover,
+      &--selected {
+        background: var(--ui-accent-tint-chart);
+      }
+    }
+
+    &__legend {
+      span {
+        font-size: var(--ui-font-small);
+      }
+    }
+
+    &__axis {
+      span {
+        font-size: var(--ui-font-caption);
+      }
+    }
+  }
+
+  .regions__export-message {
+    font-size: var(--ui-font-small);
+  }
+
+  .attention .attention__list .attention__action.ui-button {
+    width: 100%;
+    padding: 14px 12px;
+    font: inherit;
+    color: var(--black);
+    text-align: left;
+    background: transparent;
+    border: 0;
+    border-radius: 8px;
+
+    &:hover:not(:disabled),
+    &:active:not(:disabled) {
+      background: transparent;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.ts b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.ts
index 97d1bd988..4db7c977b 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, StateComponent } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -60,6 +65,8 @@ interface AnalyticsCaseRow extends ProgramAnalyticsCaseMetrics {
   templateUrl: "./analytics.component.html",
   styleUrl: "./analytics.component.scss",
   imports: [
+    StateComponent,
+    ButtonDirective,
     ButtonComponent,
     IconComponent,
     MatProgressBarModule,
@@ -70,6 +77,8 @@ interface AnalyticsCaseRow extends ProgramAnalyticsCaseMetrics {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProgramAnalyticsComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly analytics = inject(ProgramAnalyticsInfoService);
   private readonly exports = inject(ExportFileInfoService);
 
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.html b/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.html
index cc69be88b..3e9da810e 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.html
@@ -1,664 +1,1379 @@
 <!-- @format -->
-<app-modal
-  [open]="state.open()"
-  [bodyClass]="
-    state.view() === 'assignments'
-      ? 'analytics-drilldown-body analytics-drilldown-body--assignments'
-      : state.view() === 'case'
-        ? 'analytics-drilldown-body analytics-drilldown-body--case'
-        : 'analytics-drilldown-body'
-  "
-  (openChange)="onOpenChange($event)"
->
-  <section
-    class="analytics-drilldown"
-    role="dialog"
-    aria-modal="true"
-    [attr.aria-labelledby]="'analytics-dialog-' + state.view()"
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <app-modal
+    [open]="state.open()"
+    [bodyClass]="
+      state.view() === 'assignments'
+        ? 'analytics-drilldown-body analytics-drilldown-body--assignments'
+        : state.view() === 'case'
+          ? 'analytics-drilldown-body analytics-drilldown-body--case'
+          : 'analytics-drilldown-body'
+    "
+    (openChange)="onOpenChange($event)"
   >
-    <!-- Trap anchors остаются внутри проецируемого section при каждом portal attachment. -->
-    <div [cdkTrapFocus]="attached()" [cdkTrapFocusAutoCapture]="false">
-      <header class="analytics-drilldown__header">
-        <div>
-          @if (state.view() === "scores" || state.view() === "backlog") {
-            <button type="button" class="analytics-drilldown__action" (click)="state.back()">
-              ← Назад к списку
-            </button>
-          }
-          <h2 #heading tabindex="-1" [id]="'analytics-dialog-' + state.view()">{{ title() }}</h2>
-          @if (state.view() === "case" && cases.selection()?.scope === "without_case") {
-            <p class="analytics-drilldown__secondary">
-              Проекты, для которых кейс не выбран или больше недоступен.
-            </p>
-          }
-          @if (state.view() === "backlog") {
-            <p>Ожидающие назначения</p>
-          }
-          @if (state.view() === "participants-without-team") {
-            <p class="analytics-drilldown__secondary">
-              Зарегистрированные участники, которые пока не состоят в команде проекта этой
-              программы.
-            </p>
-          }
-          @if (state.view() === "projects-awaiting-evaluation") {
-            <p class="analytics-drilldown__secondary">
-              Сданные работы, оценивание которых ещё не завершено.
-            </p>
-          }
-          @if (state.view() === "projects-not-submitted") {
-            <p class="analytics-drilldown__secondary">
-              Проекты программы, которые ещё не отправили решение.
-            </p>
-            @if (state.notSubmittedPage(); as page) {
-              @if (page.applicable) {
-                <p class="analytics-drilldown__metadata" data-testid="submission-deadline">
-                  @if (page.submissionDeadline) {
-                    {{ page.submissionOpen ? "Сдача открыта до" : "Срок сдачи завершён" }}
-                    {{ page.submissionDeadline | date: "dd.MM.yyyy, HH:mm" }}
-                  } @else {
-                    Срок сдачи не указан
-                  }
-                </p>
+    <section
+      class="analytics-drilldown"
+      role="dialog"
+      aria-modal="true"
+      [attr.aria-labelledby]="'analytics-dialog-' + state.view()"
+    >
+      <!-- Trap anchors остаются внутри проецируемого section при каждом portal attachment. -->
+      <div [cdkTrapFocus]="attached()" [cdkTrapFocusAutoCapture]="false">
+        <header class="analytics-drilldown__header">
+          <div>
+            @if (state.view() === "scores" || state.view() === "backlog") {
+              <button type="button" class="analytics-drilldown__action" (click)="state.back()">
+                ← Назад к списку
+              </button>
+            }
+            <h2 #heading tabindex="-1" [id]="'analytics-dialog-' + state.view()">{{ title() }}</h2>
+            @if (state.view() === "case" && cases.selection()?.scope === "without_case") {
+              <p class="analytics-drilldown__secondary">
+                Проекты, для которых кейс не выбран или больше недоступен.
+              </p>
+            }
+            @if (state.view() === "backlog") {
+              <p>Ожидающие назначения</p>
+            }
+            @if (state.view() === "participants-without-team") {
+              <p class="analytics-drilldown__secondary">
+                Зарегистрированные участники, которые пока не состоят в команде проекта этой
+                программы.
+              </p>
+            }
+            @if (state.view() === "projects-awaiting-evaluation") {
+              <p class="analytics-drilldown__secondary">
+                Сданные работы, оценивание которых ещё не завершено.
+              </p>
+            }
+            @if (state.view() === "projects-not-submitted") {
+              <p class="analytics-drilldown__secondary">
+                Проекты программы, которые ещё не отправили решение.
+              </p>
+              @if (state.notSubmittedPage(); as page) {
+                @if (page.applicable) {
+                  <p class="analytics-drilldown__metadata" data-testid="submission-deadline">
+                    @if (page.submissionDeadline) {
+                      {{ page.submissionOpen ? "Сдача открыта до" : "Срок сдачи завершён" }}
+                      {{ page.submissionDeadline | date: "dd.MM.yyyy, HH:mm" }}
+                    } @else {
+                      Срок сдачи не указан
+                    }
+                  </p>
+                }
               }
             }
-          }
-        </div>
-        <button
-          #closeButton
-          type="button"
-          class="analytics-drilldown__close"
-          aria-label="Закрыть детализацию аналитики"
-          (click)="closeAnalyticsModal()"
-        >
-          ×
-        </button>
-      </header>
+          </div>
+          <button
+            #closeButton
+            type="button"
+            class="analytics-drilldown__close"
+            aria-label="Закрыть детализацию аналитики"
+            (click)="closeAnalyticsModal()"
+          >
+            ×
+          </button>
+        </header>
 
-      @if (state.view() === "case") {
-        <div class="analytics-case" data-testid="case-drilldown">
-          @if (cases.metrics(); as metrics) {
-            <dl class="analytics-case__metrics">
-              <div>
-                <dt>Проекты</dt>
-                <dd>{{ metrics.projectsTotal }}</dd>
-              </div>
-              <div>
-                <dt>Участники</dt>
-                <dd>{{ metrics.participantsTotal }}</dd>
-              </div>
-              @if (cases.submissionApplicable()) {
+        @if (state.view() === "case") {
+          <div class="analytics-case" data-testid="case-drilldown">
+            @if (cases.metrics(); as metrics) {
+              <dl class="analytics-case__metrics">
                 <div>
-                  <dt>Сдано</dt>
-                  <dd>{{ metrics.submitted }}</dd>
+                  <dt>Проекты</dt>
+                  <dd>{{ metrics.projectsTotal }}</dd>
                 </div>
                 <div>
-                  <dt>Не сдано</dt>
-                  <dd>{{ metrics.notSubmitted }}</dd>
+                  <dt>Участники</dt>
+                  <dd>{{ metrics.participantsTotal }}</dd>
                 </div>
+                @if (cases.submissionApplicable()) {
+                  <div>
+                    <dt>Сдано</dt>
+                    <dd>{{ metrics.submitted }}</dd>
+                  </div>
+                  <div>
+                    <dt>Не сдано</dt>
+                    <dd>{{ metrics.notSubmitted }}</dd>
+                  </div>
+                }
+              </dl>
+            }
+            <div class="analytics-case__export">
+              <app-button
+                appearance="outline"
+                size="big"
+                [disabled]="!cases.canExport()"
+                [loader]="cases.exportPending()"
+                (click)="cases.download()"
+                >Выгрузить проекты кейса</app-button
+              >
+              <p class="analytics-drilldown__secondary">
+                {{
+                  cases.metrics()?.projectsTotal === 0
+                    ? "В кейсе пока нет проектов"
+                    : "Все проекты кейса, без учёта поиска"
+                }}
+              </p>
+              @if (cases.exportError(); as error) {
+                <p role="alert">{{ caseErrorMessage(error) }}</p>
               }
-            </dl>
-          }
-          <div class="analytics-case__export">
-            <app-button
-              appearance="outline"
-              size="big"
-              [disabled]="!cases.canExport()"
-              [loader]="cases.exportPending()"
-              (click)="cases.download()"
-              >Выгрузить проекты кейса</app-button
+            </div>
+            <form
+              class="analytics-drilldown__search"
+              (submit)="$event.preventDefault(); cases.applySearch()"
             >
-            <p class="analytics-drilldown__secondary">
-              {{
-                cases.metrics()?.projectsTotal === 0
-                  ? "В кейсе пока нет проектов"
-                  : "Все проекты кейса, без учёта поиска"
-              }}
-            </p>
-            @if (cases.exportError(); as error) {
-              <p role="alert">{{ caseErrorMessage(error) }}</p>
-            }
+              <label for="analytics-case-search" class="analytics-drilldown__secondary"
+                >Поиск по названию проекта</label
+              >
+              <div class="analytics-drilldown__search-controls">
+                <input
+                  id="analytics-case-search"
+                  type="search"
+                  placeholder="Название проекта"
+                  [disabled]="cases.pending() && !cases.page()"
+                  [value]="cases.searchDraft()"
+                  (input)="cases.searchDraft.set($any($event.target).value)"
+                />
+                <button
+                  type="submit"
+                  class="analytics-drilldown__action"
+                  [disabled]="cases.pending()"
+                >
+                  Найти
+                </button>
+                <button
+                  type="button"
+                  class="analytics-drilldown__action"
+                  [disabled]="!cases.searchDraft() && !cases.search()"
+                  (click)="cases.clearSearch()"
+                >
+                  Очистить
+                </button>
+              </div>
+            </form>
+            <div [attr.aria-busy]="cases.pending()" aria-live="polite">
+              @if (cases.pending()) {
+                <p class="analytics-case__loading" role="status">
+                  <app-loader color="var(--dark-grey)" />Загружаем список…
+                </p>
+              } @else if (cases.error(); as error) {
+                <div class="analytics-drilldown__error" role="alert">
+                  <strong>Не удалось загрузить проекты</strong>
+                  <p class="analytics-drilldown__secondary">{{ caseErrorMessage(error) }}</p>
+                </div>
+                @if (error.kind === "network") {
+                  <button type="button" class="analytics-drilldown__action" (click)="cases.load()">
+                    Повторить загрузку
+                  </button>
+                }
+              } @else if (cases.page(); as page) {
+                <p class="analytics-drilldown__count">Найдено: {{ page.count }}</p>
+                @if (!page.results.length) {
+                  <div class="analytics-drilldown__empty">
+                    <strong>{{
+                      cases.search()
+                        ? "По запросу ничего не найдено"
+                        : "В этом кейсе пока нет проектов"
+                    }}</strong>
+                    <p class="analytics-drilldown__secondary">
+                      {{
+                        cases.search()
+                          ? "Измените запрос или очистите поиск."
+                          : "Проекты появятся здесь после выбора этого кейса."
+                      }}
+                    </p>
+                  </div>
+                } @else {
+                  <table class="analytics-drilldown__table analytics-case__table">
+                    <thead>
+                      <tr>
+                        <th scope="col">Проект</th>
+                        <th scope="col">Лидер / команда</th>
+                        <th scope="col">Сдача решения</th>
+                        <th scope="col">Презентация</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (item of page.results; track item.programProjectId) {
+                        <tr>
+                          <td data-label="Проект">
+                            <a
+                              [routerLink]="['/office/projects', item.project.id]"
+                              (click)="leaveAnalytics()"
+                              >{{ item.project.name }}</a
+                            >
+                          </td>
+                          <td data-label="Лидер / команда">
+                            <span>{{ item.leader?.fullName || "Лидер не указан" }}</span>
+                            <small class="analytics-drilldown__secondary"
+                              >Размер команды: {{ item.teamSize }}</small
+                            >
+                          </td>
+                          <td data-label="Сдача решения">
+                            @if (!page.submissionApplicable) {
+                              <span>Не требуется</span>
+                            } @else {
+                              <span
+                                class="analytics-drilldown__badge"
+                                [class.analytics-drilldown__badge--completed]="item.submitted"
+                                [class.analytics-drilldown__badge--pending]="!item.submitted"
+                                >{{ item.submitted ? "Сдано" : "Не сдано" }}</span
+                              >
+                              <small class="analytics-drilldown__secondary">{{
+                                item.submittedAt ? (item.submittedAt | date: "dd.MM.yyyy") : "—"
+                              }}</small>
+                            }
+                          </td>
+                          <td data-label="Презентация">
+                            @if (presentationHref(item.project.presentationAddress); as href) {
+                              <a [href]="href" target="_blank" rel="noopener noreferrer"
+                                >Открыть презентацию</a
+                              >
+                            } @else {
+                              <span class="analytics-drilldown__secondary">{{
+                                item.project.presentationAddress
+                                  ? "Ссылка недоступна"
+                                  : "Не добавлена"
+                              }}</span>
+                            }
+                          </td>
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                }
+                @if (page.count > cases.limit || cases.offset() > 0) {
+                  <nav class="analytics-drilldown__pagination" aria-label="Страницы проектов кейса">
+                    <app-button
+                      appearance="outline"
+                      size="medium"
+                      [disabled]="cases.offset() === 0"
+                      (click)="cases.changePage(-1)"
+                      >Назад</app-button
+                    >
+                    <span>{{ cases.range() }}</span>
+                    <app-button
+                      appearance="outline"
+                      size="medium"
+                      [disabled]="!cases.hasNext()"
+                      (click)="cases.changePage(1)"
+                      >Далее</app-button
+                    >
+                  </nav>
+                }
+              }
+            </div>
           </div>
+        }
+        @if (state.isAttentionView()) {
           <form
             class="analytics-drilldown__search"
-            (submit)="$event.preventDefault(); cases.applySearch()"
+            (submit)="$event.preventDefault(); state.applyAttentionSearch()"
           >
-            <label for="analytics-case-search" class="analytics-drilldown__secondary"
-              >Поиск по названию проекта</label
-            >
+            <label for="analytics-attention-search" class="analytics-drilldown__secondary">{{
+              state.view() === "participants-without-team"
+                ? "Поиск по имени"
+                : "Поиск по названию проекта"
+            }}</label>
             <div class="analytics-drilldown__search-controls">
               <input
-                id="analytics-case-search"
+                id="analytics-attention-search"
                 type="search"
-                placeholder="Название проекта"
-                [disabled]="cases.pending() && !cases.page()"
-                [value]="cases.searchDraft()"
-                (input)="cases.searchDraft.set($any($event.target).value)"
+                [placeholder]="
+                  state.view() === 'participants-without-team'
+                    ? 'Поиск по имени'
+                    : 'Поиск по названию проекта'
+                "
+                [value]="state.searchDraft()"
+                (input)="state.searchDraft.set($any($event.target).value)"
               />
+              <button type="submit" class="analytics-drilldown__action">Найти</button>
               <button
-                type="submit"
+                type="button"
                 class="analytics-drilldown__action"
-                [disabled]="cases.pending()"
+                (click)="state.clearAttentionSearch()"
+                [disabled]="!state.searchDraft() && !state.appliedSearch()"
               >
-                Найти
+                Очистить
               </button>
+            </div>
+          </form>
+          @if (state.attentionPending()) {
+            <p class="analytics-drilldown__empty" role="status">Загружаем список…</p>
+          } @else if (state.attentionError()) {
+            <div class="analytics-drilldown__error" role="alert">
+              <p>{{ attentionRequestError() }}</p>
               <button
                 type="button"
                 class="analytics-drilldown__action"
-                [disabled]="!cases.searchDraft() && !cases.search()"
-                (click)="cases.clearSearch()"
+                (click)="state.loadAttention()"
               >
-                Очистить
+                Повторить загрузку
               </button>
             </div>
-          </form>
-          <div [attr.aria-busy]="cases.pending()" aria-live="polite">
-            @if (cases.pending()) {
-              <p class="analytics-case__loading" role="status">
-                <app-loader color="var(--dark-grey)" />Загружаем список…
-              </p>
-            } @else if (cases.error(); as error) {
-              <div class="analytics-drilldown__error" role="alert">
-                <strong>Не удалось загрузить проекты</strong>
-                <p class="analytics-drilldown__secondary">{{ caseErrorMessage(error) }}</p>
-              </div>
-              @if (error.kind === "network") {
-                <button type="button" class="analytics-drilldown__action" (click)="cases.load()">
-                  Повторить загрузку
-                </button>
-              }
-            } @else if (cases.page(); as page) {
-              <p class="analytics-drilldown__count">Найдено: {{ page.count }}</p>
-              @if (!page.results.length) {
-                <div class="analytics-drilldown__empty">
-                  <strong>{{
-                    cases.search()
-                      ? "По запросу ничего не найдено"
-                      : "В этом кейсе пока нет проектов"
-                  }}</strong>
-                  <p class="analytics-drilldown__secondary">
-                    {{
-                      cases.search()
-                        ? "Измените запрос или очистите поиск."
-                        : "Проекты появятся здесь после выбора этого кейса."
-                    }}
-                  </p>
-                </div>
-              } @else {
-                <table class="analytics-drilldown__table analytics-case__table">
+          } @else if (state.attentionPage()) {
+            <p class="analytics-drilldown__count" role="status">
+              Найдено: {{ state.attentionCount() }}
+            </p>
+            @if (!state.attentionPage()?.results?.length) {
+              <p class="analytics-drilldown__empty">{{ attentionEmptyMessage() }}</p>
+            } @else {
+              @if (state.participantsPage(); as page) {
+                <table class="analytics-drilldown__table">
                   <thead>
                     <tr>
-                      <th scope="col">Проект</th>
-                      <th scope="col">Лидер / команда</th>
-                      <th scope="col">Сдача решения</th>
-                      <th scope="col">Презентация</th>
+                      <th scope="col">Участник</th>
+                      <th scope="col">Город</th>
+                      <th scope="col">Дата регистрации</th>
+                      <th scope="col">Действие</th>
                     </tr>
                   </thead>
                   <tbody>
-                    @for (item of page.results; track item.programProjectId) {
-                      <tr>
-                        <td data-label="Проект">
-                          <a
-                            [routerLink]="['/office/projects', item.project.id]"
-                            (click)="leaveAnalytics()"
-                            >{{ item.project.name }}</a
+                    @for (item of page.results; track item.userId) {
+                      <tr [attr.data-user-id]="item.userId">
+                        <td data-label="Участник">
+                          <span class="analytics-drilldown__identity"
+                            ><app-avatar [url]="item.avatar || ''" [size]="36" /><span>{{
+                              item.fullName
+                            }}</span></span
                           >
                         </td>
-                        <td data-label="Лидер / команда">
-                          <span>{{ item.leader?.fullName || "Лидер не указан" }}</span>
-                          <small class="analytics-drilldown__secondary"
-                            >Размер команды: {{ item.teamSize }}</small
+                        <td data-label="Город">{{ item.city || "Не указано" }}</td>
+                        <td data-label="Дата регистрации">
+                          {{
+                            item.registeredAt
+                              ? (item.registeredAt | date: "dd.MM.yyyy")
+                              : "Нет данных"
+                          }}
+                        </td>
+                        <td data-label="Действие">
+                          <a
+                            class="analytics-drilldown__action"
+                            [routerLink]="['/office/profile', item.userId]"
+                            (click)="leaveAnalytics()"
+                            >Открыть профиль</a
                           >
                         </td>
-                        <td data-label="Сдача решения">
-                          @if (!page.submissionApplicable) {
-                            <span>Не требуется</span>
-                          } @else {
-                            <span
-                              class="analytics-drilldown__badge"
-                              [class.analytics-drilldown__badge--completed]="item.submitted"
-                              [class.analytics-drilldown__badge--pending]="!item.submitted"
-                              >{{ item.submitted ? "Сдано" : "Не сдано" }}</span
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              }
+              @if (state.projectsPage(); as page) {
+                <table class="analytics-drilldown__table analytics-drilldown__table--projects">
+                  <thead>
+                    <tr>
+                      <th scope="col">Проект</th>
+                      <th scope="col">Руководитель</th>
+                      <th scope="col">Дата сдачи</th>
+                      <th scope="col">Причина</th>
+                      <th scope="col">Прогресс</th>
+                      <th scope="col">Действие</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (item of page.results; track item.programProjectId) {
+                      <tr [attr.data-program-project-id]="item.programProjectId">
+                        <td data-label="Проект">{{ item.project.name }}</td>
+                        <td data-label="Руководитель">
+                          @if (item.leader; as leader) {
+                            <span class="analytics-drilldown__identity"
+                              ><app-avatar [url]="leader.avatar || ''" [size]="36" /><span>{{
+                                leader.fullName
+                              }}</span></span
                             >
-                            <small class="analytics-drilldown__secondary">{{
-                              item.submittedAt ? (item.submittedAt | date: "dd.MM.yyyy") : "—"
-                            }}</small>
+                          } @else {
+                            Не указан
                           }
                         </td>
-                        <td data-label="Презентация">
-                          @if (presentationHref(item.project.presentationAddress); as href) {
-                            <a [href]="href" target="_blank" rel="noopener noreferrer"
-                              >Открыть презентацию</a
-                            >
+                        <td data-label="Дата сдачи">
+                          {{
+                            item.submittedAt
+                              ? (item.submittedAt | date: "dd.MM.yyyy")
+                              : "Дата сдачи неизвестна"
+                          }}
+                        </td>
+                        <td data-label="Причина">
+                          <span
+                            class="analytics-drilldown__badge"
+                            [attr.data-reason]="item.reason"
+                            >{{ item.reasonLabel }}</span
+                          >
+                        </td>
+                        <td data-label="Прогресс">
+                          @if (page.mode === "open") {
+                            —
+                          } @else if (item.assignmentsTotal === 0) {
+                            Нет назначений
+                          } @else if (
+                            item.assignmentsTotal !== null && item.assignmentsCompleted !== null
+                          ) {
+                            Завершили: {{ item.assignmentsCompleted }} из
+                            {{ item.assignmentsTotal }}
                           } @else {
-                            <span class="analytics-drilldown__secondary">{{
-                              item.project.presentationAddress
-                                ? "Ссылка недоступна"
-                                : "Не добавлена"
-                            }}</span>
+                            Нет данных
                           }
                         </td>
+                        <td data-label="Действие">
+                          <a
+                            class="analytics-drilldown__action"
+                            [routerLink]="['/office/projects', item.project.id]"
+                            (click)="leaveAnalytics()"
+                            >Открыть проект</a
+                          >
+                        </td>
                       </tr>
                     }
                   </tbody>
                 </table>
               }
-              @if (page.count > cases.limit || cases.offset() > 0) {
-                <nav class="analytics-drilldown__pagination" aria-label="Страницы проектов кейса">
-                  <app-button
-                    appearance="outline"
-                    size="medium"
-                    [disabled]="cases.offset() === 0"
-                    (click)="cases.changePage(-1)"
-                    >Назад</app-button
-                  >
-                  <span>{{ cases.range() }}</span>
-                  <app-button
-                    appearance="outline"
-                    size="medium"
-                    [disabled]="!cases.hasNext()"
-                    (click)="cases.changePage(1)"
-                    >Далее</app-button
-                  >
-                </nav>
-              }
             }
-          </div>
-        </div>
-      }
-      @if (state.isAttentionView()) {
-        <form
-          class="analytics-drilldown__search"
-          (submit)="$event.preventDefault(); state.applyAttentionSearch()"
-        >
-          <label for="analytics-attention-search" class="analytics-drilldown__secondary">{{
-            state.view() === "participants-without-team"
-              ? "Поиск по имени"
-              : "Поиск по названию проекта"
-          }}</label>
-          <div class="analytics-drilldown__search-controls">
-            <input
-              id="analytics-attention-search"
-              type="search"
-              [placeholder]="
-                state.view() === 'participants-without-team'
-                  ? 'Поиск по имени'
-                  : 'Поиск по названию проекта'
-              "
-              [value]="state.searchDraft()"
-              (input)="state.searchDraft.set($any($event.target).value)"
-            />
-            <button type="submit" class="analytics-drilldown__action">Найти</button>
-            <button
-              type="button"
-              class="analytics-drilldown__action"
-              (click)="state.clearAttentionSearch()"
-              [disabled]="!state.searchDraft() && !state.appliedSearch()"
-            >
-              Очистить
-            </button>
-          </div>
-        </form>
-        @if (state.attentionPending()) {
-          <p class="analytics-drilldown__empty" role="status">Загружаем список…</p>
-        } @else if (state.attentionError()) {
-          <div class="analytics-drilldown__error" role="alert">
-            <p>{{ attentionRequestError() }}</p>
-            <button
-              type="button"
-              class="analytics-drilldown__action"
-              (click)="state.loadAttention()"
-            >
-              Повторить загрузку
-            </button>
-          </div>
-        } @else if (state.attentionPage()) {
-          <p class="analytics-drilldown__count" role="status">
-            Найдено: {{ state.attentionCount() }}
-          </p>
-          @if (!state.attentionPage()?.results?.length) {
-            <p class="analytics-drilldown__empty">{{ attentionEmptyMessage() }}</p>
-          } @else {
-            @if (state.participantsPage(); as page) {
-              <table class="analytics-drilldown__table">
-                <thead>
-                  <tr>
-                    <th scope="col">Участник</th>
-                    <th scope="col">Город</th>
-                    <th scope="col">Дата регистрации</th>
-                    <th scope="col">Действие</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  @for (item of page.results; track item.userId) {
-                    <tr [attr.data-user-id]="item.userId">
-                      <td data-label="Участник">
-                        <span class="analytics-drilldown__identity"
-                          ><app-avatar [url]="item.avatar || ''" [size]="36" /><span>{{
-                            item.fullName
-                          }}</span></span
-                        >
-                      </td>
-                      <td data-label="Город">{{ item.city || "Не указано" }}</td>
-                      <td data-label="Дата регистрации">
-                        {{
-                          item.registeredAt
-                            ? (item.registeredAt | date: "dd.MM.yyyy")
-                            : "Нет данных"
-                        }}
-                      </td>
-                      <td data-label="Действие">
-                        <a
-                          class="analytics-drilldown__action"
-                          [routerLink]="['/office/profile', item.userId]"
-                          (click)="leaveAnalytics()"
-                          >Открыть профиль</a
-                        >
-                      </td>
+            @if (state.notSubmittedPage(); as page) {
+              @if (page.applicable && page.results.length) {
+                <table class="analytics-drilldown__table">
+                  <thead>
+                    <tr>
+                      <th scope="col">Проект</th>
+                      <th scope="col">Руководитель</th>
+                      <th scope="col">В программе с</th>
+                      <th scope="col">Статус</th>
+                      <th scope="col">Действие</th>
                     </tr>
-                  }
-                </tbody>
-              </table>
-            }
-            @if (state.projectsPage(); as page) {
-              <table class="analytics-drilldown__table analytics-drilldown__table--projects">
-                <thead>
-                  <tr>
-                    <th scope="col">Проект</th>
-                    <th scope="col">Руководитель</th>
-                    <th scope="col">Дата сдачи</th>
-                    <th scope="col">Причина</th>
-                    <th scope="col">Прогресс</th>
-                    <th scope="col">Действие</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  @for (item of page.results; track item.programProjectId) {
-                    <tr [attr.data-program-project-id]="item.programProjectId">
-                      <td data-label="Проект">{{ item.project.name }}</td>
-                      <td data-label="Руководитель">
-                        @if (item.leader; as leader) {
-                          <span class="analytics-drilldown__identity"
-                            ><app-avatar [url]="leader.avatar || ''" [size]="36" /><span>{{
-                              leader.fullName
-                            }}</span></span
+                  </thead>
+                  <tbody>
+                    @for (item of page.results; track item.programProjectId) {
+                      <tr [attr.data-program-project-id]="item.programProjectId">
+                        <td data-label="Проект">{{ item.project.name }}</td>
+                        <td data-label="Руководитель">
+                          @if (item.leader; as leader) {
+                            <span class="analytics-drilldown__identity">
+                              <app-avatar [url]="leader.avatar || ''" [size]="36" />
+                              <span>{{ leader.fullName }}</span>
+                            </span>
+                          } @else {
+                            Не указан
+                          }
+                        </td>
+                        <td data-label="В программе с">{{ item.linkedAt | date: "dd.MM.yyyy" }}</td>
+                        <td data-label="Статус">
+                          <span class="analytics-drilldown__badge">{{
+                            page.submissionOpen ? "Не сдано" : "Срок сдачи завершён"
+                          }}</span>
+                        </td>
+                        <td data-label="Действие">
+                          <a
+                            class="analytics-drilldown__action"
+                            [routerLink]="['/office/projects', item.project.id]"
+                            (click)="leaveAnalytics()"
+                            >Открыть проект</a
                           >
-                        } @else {
-                          Не указан
-                        }
-                      </td>
-                      <td data-label="Дата сдачи">
-                        {{
-                          item.submittedAt
-                            ? (item.submittedAt | date: "dd.MM.yyyy")
-                            : "Дата сдачи неизвестна"
-                        }}
-                      </td>
-                      <td data-label="Причина">
-                        <span class="analytics-drilldown__badge" [attr.data-reason]="item.reason">{{
-                          item.reasonLabel
-                        }}</span>
-                      </td>
-                      <td data-label="Прогресс">
-                        @if (page.mode === "open") {
-                          —
-                        } @else if (item.assignmentsTotal === 0) {
-                          Нет назначений
-                        } @else if (
-                          item.assignmentsTotal !== null && item.assignmentsCompleted !== null
-                        ) {
-                          Завершили: {{ item.assignmentsCompleted }} из {{ item.assignmentsTotal }}
-                        } @else {
-                          Нет данных
-                        }
-                      </td>
-                      <td data-label="Действие">
-                        <a
-                          class="analytics-drilldown__action"
-                          [routerLink]="['/office/projects', item.project.id]"
-                          (click)="leaveAnalytics()"
-                          >Открыть проект</a
-                        >
-                      </td>
-                    </tr>
-                  }
-                </tbody>
-              </table>
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              }
             }
+            <nav class="analytics-drilldown__pagination" aria-label="Страницы списка">
+              <button
+                type="button"
+                class="analytics-drilldown__action"
+                [disabled]="state.attentionOffset() === 0"
+                (click)="state.changeAttentionPage(-1)"
+              >
+                Назад
+              </button>
+              <span>{{ state.attentionRange() }}</span>
+              <button
+                type="button"
+                class="analytics-drilldown__action"
+                [disabled]="!state.attentionHasNext()"
+                (click)="state.changeAttentionPage(1)"
+              >
+                Далее
+              </button>
+            </nav>
           }
-          @if (state.notSubmittedPage(); as page) {
-            @if (page.applicable && page.results.length) {
-              <table class="analytics-drilldown__table">
-                <thead>
-                  <tr>
-                    <th scope="col">Проект</th>
-                    <th scope="col">Руководитель</th>
-                    <th scope="col">В программе с</th>
-                    <th scope="col">Статус</th>
-                    <th scope="col">Действие</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  @for (item of page.results; track item.programProjectId) {
-                    <tr [attr.data-program-project-id]="item.programProjectId">
-                      <td data-label="Проект">{{ item.project.name }}</td>
-                      <td data-label="Руководитель">
-                        @if (item.leader; as leader) {
-                          <span class="analytics-drilldown__identity">
-                            <app-avatar [url]="leader.avatar || ''" [size]="36" />
-                            <span>{{ leader.fullName }}</span>
-                          </span>
-                        } @else {
-                          Не указан
-                        }
-                      </td>
-                      <td data-label="В программе с">{{ item.linkedAt | date: "dd.MM.yyyy" }}</td>
-                      <td data-label="Статус">
-                        <span class="analytics-drilldown__badge">{{
-                          page.submissionOpen ? "Не сдано" : "Срок сдачи завершён"
-                        }}</span>
-                      </td>
-                      <td data-label="Действие">
-                        <a
-                          class="analytics-drilldown__action"
-                          [routerLink]="['/office/projects', item.project.id]"
-                          (click)="leaveAnalytics()"
-                          >Открыть проект</a
-                        >
-                      </td>
-                    </tr>
+        } @else if (state.view() === "scores") {
+          @if (state.scoreDetailPending()) {
+            <p class="analytics-drilldown__empty" role="status">Загружаем оценку…</p>
+          }
+          @if (state.scoreDetailError()) {
+            <div class="analytics-drilldown__error" role="alert">
+              <p>Не удалось загрузить оценку</p>
+              <p>{{ requestError(state.scoreDetailError()) }}</p>
+              <button
+                type="button"
+                class="analytics-drilldown__action"
+                (click)="state.retryScores()"
+              >
+                Повторить загрузку
+              </button>
+            </div>
+          }
+          @if (state.scoreDetail(); as detail) {
+            <div class="analytics-drilldown__identity">
+              <app-avatar [url]="detail.expert.avatar || ''" [size]="36" />
+              <div>
+                <p>Эксперт: {{ detail.expert.fullName || "Имя не указано" }}</p>
+                <p>Проект: {{ detail.project.name }}</p>
+              </div>
+            </div>
+            <ul class="analytics-drilldown__criteria">
+              @for (criterion of detail.scores; track criterion.criterionId) {
+                <li>
+                  <h3>{{ criterion.name }}</h3>
+                  @if (criterion.description) {
+                    <p>{{ criterion.description }}</p>
+                  }
+                  @if (criterion.minValue !== null || criterion.maxValue !== null) {
+                    <p class="analytics-drilldown__secondary">
+                      Диапазон: {{ criterion.minValue ?? "—" }} – {{ criterion.maxValue ?? "—" }}
+                    </p>
                   }
-                </tbody>
-              </table>
+                  <strong>{{ criterionValue(criterion) }}</strong>
+                </li>
+              } @empty {
+                <li class="analytics-drilldown__empty">Нет критериев</li>
+              }
+            </ul>
+          }
+        } @else if (state.view() !== "case") {
+          @if (state.view() === "delayed") {
+            <ul class="analytics-drilldown__experts">
+              @for (expert of state.delayedExperts(); track expert.expertId) {
+                <li>
+                  <button
+                    type="button"
+                    class="analytics-drilldown__expert"
+                    (click)="state.showBacklog(expert)"
+                  >
+                    <span class="analytics-drilldown__identity"
+                      ><app-avatar [url]="expert.avatar || ''" [size]="36" /><strong>{{
+                        expert.fullName || "Имя не указано"
+                      }}</strong></span
+                    >
+                    <span
+                      class="analytics-drilldown__badge"
+                      [class.analytics-drilldown__badge--critical]="expert.severity === 'critical'"
+                      [class.analytics-drilldown__badge--pending]="expert.severity === 'warning'"
+                      >{{
+                        expert.severity === "critical" ? "Критическая задержка" : "Требует внимания"
+                      }}</span
+                    >
+                    <span>Выполнено {{ expert.completed }} из {{ expert.assignmentsTotal }}</span
+                    ><span>Ожидает: {{ expert.pending }}</span>
+                    <span>Самое долгое ожидание: {{ waiting(expert.oldestWaitingSeconds) }}</span>
+                    <span class="analytics-drilldown__secondary">Посмотреть назначения →</span>
+                  </button>
+                </li>
+              } @empty {
+                <li class="analytics-drilldown__empty">Задержек оценивания нет</li>
+              }
+            </ul>
+          }
+          @if (state.assignmentsPending()) {
+            <p class="analytics-drilldown__empty" role="status">Загружаем назначения…</p>
+          }
+          @if (state.assignmentsError()) {
+            <div class="analytics-drilldown__error" role="alert">
+              <p>Не удалось загрузить назначения</p>
+              <p>{{ requestError(state.assignmentsError()) }}</p>
+              <button
+                type="button"
+                class="analytics-drilldown__action"
+                (click)="state.loadAssignments()"
+              >
+                Повторить загрузку
+              </button>
+            </div>
+          } @else if (!state.assignmentsPending()) {
+            @if (state.view() === "assignments") {
+              @if (state.assignments().length) {
+                <ng-container
+                  *ngTemplateOutlet="assignmentTable; context: { $implicit: state.assignments() }"
+                />
+              } @else {
+                <p class="analytics-drilldown__empty">{{ emptyMessage() }}</p>
+              }
+            }
+            @if (state.view() === "backlog") {
+              @if (!state.backlog().length) {
+                <p class="analytics-drilldown__empty">У эксперта нет ожидающих назначений</p>
+              }
+              @if (state.waitingBacklog().length) {
+                <ng-container
+                  *ngTemplateOutlet="
+                    assignmentTable;
+                    context: { $implicit: state.waitingBacklog() }
+                  "
+                />
+              }
+              @if (state.notReadyBacklog().length) {
+                <h3 class="analytics-drilldown__section">Ещё не сданы</h3>
+                <ng-container
+                  *ngTemplateOutlet="
+                    assignmentTable;
+                    context: { $implicit: state.notReadyBacklog() }
+                  "
+                />
+              }
             }
           }
-          <nav class="analytics-drilldown__pagination" aria-label="Страницы списка">
-            <button
-              type="button"
-              class="analytics-drilldown__action"
-              [disabled]="state.attentionOffset() === 0"
-              (click)="state.changeAttentionPage(-1)"
-            >
-              Назад
-            </button>
-            <span>{{ state.attentionRange() }}</span>
-            <button
-              type="button"
-              class="analytics-drilldown__action"
-              [disabled]="!state.attentionHasNext()"
-              (click)="state.changeAttentionPage(1)"
-            >
-              Далее
-            </button>
-          </nav>
-        }
-      } @else if (state.view() === "scores") {
-        @if (state.scoreDetailPending()) {
-          <p class="analytics-drilldown__empty" role="status">Загружаем оценку…</p>
-        }
-        @if (state.scoreDetailError()) {
-          <div class="analytics-drilldown__error" role="alert">
-            <p>Не удалось загрузить оценку</p>
-            <p>{{ requestError(state.scoreDetailError()) }}</p>
-            <button type="button" class="analytics-drilldown__action" (click)="state.retryScores()">
-              Повторить загрузку
-            </button>
-          </div>
         }
-        @if (state.scoreDetail(); as detail) {
-          <div class="analytics-drilldown__identity">
-            <app-avatar [url]="detail.expert.avatar || ''" [size]="36" />
-            <div>
-              <p>Эксперт: {{ detail.expert.fullName || "Имя не указано" }}</p>
-              <p>Проект: {{ detail.project.name }}</p>
-            </div>
-          </div>
-          <ul class="analytics-drilldown__criteria">
-            @for (criterion of detail.scores; track criterion.criterionId) {
-              <li>
-                <h3>{{ criterion.name }}</h3>
-                @if (criterion.description) {
-                  <p>{{ criterion.description }}</p>
+      </div>
+    </section>
+  </app-modal>
+
+  <ng-template #assignmentTable let-assignments>
+    <table
+      class="analytics-drilldown__table"
+      [class.analytics-drilldown__table--assignments]="state.view() === 'assignments'"
+    >
+      <thead>
+        <tr>
+          <th scope="col">Эксперт</th>
+          <th scope="col">Проект</th>
+          <th scope="col">Статус</th>
+          <th scope="col">Ожидание</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (item of assignments; track item.assignmentId) {
+          <tr [attr.data-assignment-id]="item.assignmentId">
+            <td data-label="Эксперт">
+              <span class="analytics-drilldown__identity"
+                ><app-avatar [url]="item.expert.avatar || ''" [size]="36" /><span>{{
+                  item.expert.fullName || "Имя не указано"
+                }}</span></span
+              >
+            </td>
+            <td data-label="Проект">{{ item.project.name }}</td>
+            <td data-label="Статус">
+              <span class="analytics-drilldown__assignment-status">
+                <span
+                  [class]="'analytics-drilldown__badge analytics-drilldown__badge--' + item.status"
+                  >{{ statusLabel(item.status) }}</span
+                >
+                @if (item.status === "completed") {
+                  <button
+                    type="button"
+                    class="analytics-drilldown__action"
+                    (click)="state.loadAssignmentScores(item.assignmentId)"
+                    [attr.aria-label]="
+                      'Посмотреть оценку: ' + item.project.name + ', ' + item.expert.fullName
+                    "
+                  >
+                    Посмотреть оценку
+                  </button>
                 }
-                @if (criterion.minValue !== null || criterion.maxValue !== null) {
-                  <p class="analytics-drilldown__secondary">
-                    Диапазон: {{ criterion.minValue ?? "—" }} – {{ criterion.maxValue ?? "—" }}
+              </span>
+            </td>
+            <td data-label="Ожидание">{{ waiting(item.waitingSeconds, item.status) }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </ng-template>
+} @else {
+  <app-modal
+    [open]="state.open()"
+    [bodyClass]="
+      state.view() === 'assignments'
+        ? 'analytics-drilldown-body analytics-drilldown-body--assignments'
+        : state.view() === 'case'
+          ? 'analytics-drilldown-body analytics-drilldown-body--case'
+          : 'analytics-drilldown-body'
+    "
+    (openChange)="onOpenChange($event)"
+  >
+    <section
+      class="analytics-drilldown"
+      role="dialog"
+      aria-modal="true"
+      [attr.aria-labelledby]="'analytics-dialog-' + state.view()"
+    >
+      <!-- Trap anchors остаются внутри проецируемого section при каждом portal attachment. -->
+      <div [cdkTrapFocus]="attached()" [cdkTrapFocusAutoCapture]="false">
+        <header class="analytics-drilldown__header">
+          <div>
+            @if (state.view() === "scores" || state.view() === "backlog") {
+              <button
+                appButton="secondary"
+                type="button"
+                class="analytics-drilldown__action"
+                (click)="state.back()"
+              >
+                ← Назад к списку
+              </button>
+            }
+            <h2 #heading tabindex="-1" [id]="'analytics-dialog-' + state.view()">{{ title() }}</h2>
+            @if (state.view() === "case" && cases.selection()?.scope === "without_case") {
+              <p class="analytics-drilldown__secondary">
+                Проекты, для которых кейс не выбран или больше недоступен.
+              </p>
+            }
+            @if (state.view() === "backlog") {
+              <p>Ожидающие назначения</p>
+            }
+            @if (state.view() === "participants-without-team") {
+              <p class="analytics-drilldown__secondary">
+                Зарегистрированные участники, которые пока не состоят в команде проекта этой
+                программы.
+              </p>
+            }
+            @if (state.view() === "projects-awaiting-evaluation") {
+              <p class="analytics-drilldown__secondary">
+                Сданные работы, оценивание которых ещё не завершено.
+              </p>
+            }
+            @if (state.view() === "projects-not-submitted") {
+              <p class="analytics-drilldown__secondary">
+                Проекты программы, которые ещё не отправили решение.
+              </p>
+              @if (state.notSubmittedPage(); as page) {
+                @if (page.applicable) {
+                  <p class="analytics-drilldown__metadata" data-testid="submission-deadline">
+                    @if (page.submissionDeadline) {
+                      {{ page.submissionOpen ? "Сдача открыта до" : "Срок сдачи завершён" }}
+                      {{ page.submissionDeadline | date: "dd.MM.yyyy, HH:mm" }}
+                    } @else {
+                      Срок сдачи не указан
+                    }
                   </p>
                 }
-                <strong>{{ criterionValue(criterion) }}</strong>
-              </li>
-            } @empty {
-              <li class="analytics-drilldown__empty">Нет критериев</li>
+              }
             }
-          </ul>
-        }
-      } @else if (state.view() !== "case") {
-        @if (state.view() === "delayed") {
-          <ul class="analytics-drilldown__experts">
-            @for (expert of state.delayedExperts(); track expert.expertId) {
-              <li>
+          </div>
+          <button
+            appButton="icon"
+            #closeButton
+            type="button"
+            class="analytics-drilldown__close"
+            aria-label="Закрыть детализацию аналитики"
+            (click)="closeAnalyticsModal()"
+          >
+            ×
+          </button>
+        </header>
+
+        @if (state.view() === "case") {
+          <div class="analytics-case" data-testid="case-drilldown">
+            @if (cases.metrics(); as metrics) {
+              <dl class="analytics-case__metrics">
+                <div>
+                  <dt>Проекты</dt>
+                  <dd>{{ metrics.projectsTotal }}</dd>
+                </div>
+                <div>
+                  <dt>Участники</dt>
+                  <dd>{{ metrics.participantsTotal }}</dd>
+                </div>
+                @if (cases.submissionApplicable()) {
+                  <div>
+                    <dt>Сдано</dt>
+                    <dd>{{ metrics.submitted }}</dd>
+                  </div>
+                  <div>
+                    <dt>Не сдано</dt>
+                    <dd>{{ metrics.notSubmitted }}</dd>
+                  </div>
+                }
+              </dl>
+            }
+            <div class="analytics-case__export">
+              <app-button
+                appearance="outline"
+                size="big"
+                [disabled]="!cases.canExport()"
+                [loader]="cases.exportPending()"
+                (click)="cases.download()"
+                >Выгрузить проекты кейса</app-button
+              >
+              <p class="analytics-drilldown__secondary">
+                {{
+                  cases.metrics()?.projectsTotal === 0
+                    ? "В кейсе пока нет проектов"
+                    : "Все проекты кейса, без учёта поиска"
+                }}
+              </p>
+              @if (cases.exportError(); as error) {
+                <app-state [compact]="true" kind="error" title="{{ caseErrorMessage(error) }}" />
+              }
+            </div>
+            <form
+              appFormLayout
+              class="analytics-drilldown__search"
+              (submit)="$event.preventDefault(); cases.applySearch()"
+            >
+              <label for="analytics-case-search" class="analytics-drilldown__secondary"
+                >Поиск по названию проекта</label
+              >
+              <div class="analytics-drilldown__search-controls">
+                <input
+                  appField
+                  id="analytics-case-search"
+                  type="search"
+                  placeholder="Название проекта"
+                  [disabled]="cases.pending() && !cases.page()"
+                  [value]="cases.searchDraft()"
+                  (input)="cases.searchDraft.set($any($event.target).value)"
+                />
+                <button
+                  appButton="primary"
+                  type="submit"
+                  class="analytics-drilldown__action"
+                  [disabled]="cases.pending()"
+                >
+                  Найти
+                </button>
                 <button
+                  appButton="secondary"
                   type="button"
-                  class="analytics-drilldown__expert"
-                  (click)="state.showBacklog(expert)"
+                  class="analytics-drilldown__action"
+                  [disabled]="!cases.searchDraft() && !cases.search()"
+                  (click)="cases.clearSearch()"
                 >
-                  <span class="analytics-drilldown__identity"
-                    ><app-avatar [url]="expert.avatar || ''" [size]="36" /><strong>{{
-                      expert.fullName || "Имя не указано"
-                    }}</strong></span
+                  Очистить
+                </button>
+              </div>
+            </form>
+            <div [attr.aria-busy]="cases.pending()" aria-live="polite">
+              @if (cases.pending()) {
+                <p class="analytics-case__loading" role="status">
+                  <app-loader color="var(--dark-grey)" />Загружаем список…
+                </p>
+              } @else if (cases.error(); as error) {
+                <div class="analytics-drilldown__error" role="alert">
+                  <strong>Не удалось загрузить проекты</strong>
+                  <p class="analytics-drilldown__secondary">{{ caseErrorMessage(error) }}</p>
+                </div>
+                @if (error.kind === "network") {
+                  <button
+                    appButton="secondary"
+                    type="button"
+                    class="analytics-drilldown__action"
+                    (click)="cases.load()"
                   >
-                  <span
-                    class="analytics-drilldown__badge"
-                    [class.analytics-drilldown__badge--critical]="expert.severity === 'critical'"
-                    [class.analytics-drilldown__badge--pending]="expert.severity === 'warning'"
-                    >{{
-                      expert.severity === "critical" ? "Критическая задержка" : "Требует внимания"
-                    }}</span
+                    Повторить загрузку
+                  </button>
+                }
+              } @else if (cases.page(); as page) {
+                <p class="analytics-drilldown__count">Найдено: {{ page.count }}</p>
+                @if (!page.results.length) {
+                  <div class="analytics-drilldown__empty">
+                    <strong>{{
+                      cases.search()
+                        ? "По запросу ничего не найдено"
+                        : "В этом кейсе пока нет проектов"
+                    }}</strong>
+                    <p class="analytics-drilldown__secondary">
+                      {{
+                        cases.search()
+                          ? "Измените запрос или очистите поиск."
+                          : "Проекты появятся здесь после выбора этого кейса."
+                      }}
+                    </p>
+                  </div>
+                } @else {
+                  <table appTable class="analytics-drilldown__table analytics-case__table">
+                    <thead>
+                      <tr>
+                        <th scope="col">Проект</th>
+                        <th scope="col">Лидер / команда</th>
+                        <th scope="col">Сдача решения</th>
+                        <th scope="col">Презентация</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (item of page.results; track item.programProjectId) {
+                        <tr>
+                          <td data-label="Проект">
+                            <a
+                              [routerLink]="['/office/projects', item.project.id]"
+                              (click)="leaveAnalytics()"
+                              >{{ item.project.name }}</a
+                            >
+                          </td>
+                          <td data-label="Лидер / команда">
+                            <span>{{ item.leader?.fullName || "Лидер не указан" }}</span>
+                            <small class="analytics-drilldown__secondary"
+                              >Размер команды: {{ item.teamSize }}</small
+                            >
+                          </td>
+                          <td data-label="Сдача решения">
+                            @if (!page.submissionApplicable) {
+                              <span>Не требуется</span>
+                            } @else {
+                              <span
+                                class="analytics-drilldown__badge"
+                                [class.analytics-drilldown__badge--completed]="item.submitted"
+                                [class.analytics-drilldown__badge--pending]="!item.submitted"
+                                >{{ item.submitted ? "Сдано" : "Не сдано" }}</span
+                              >
+                              <small class="analytics-drilldown__secondary">{{
+                                item.submittedAt ? (item.submittedAt | date: "dd.MM.yyyy") : "—"
+                              }}</small>
+                            }
+                          </td>
+                          <td data-label="Презентация">
+                            @if (presentationHref(item.project.presentationAddress); as href) {
+                              <a [href]="href" target="_blank" rel="noopener noreferrer"
+                                >Открыть презентацию</a
+                              >
+                            } @else {
+                              <span class="analytics-drilldown__secondary">{{
+                                item.project.presentationAddress
+                                  ? "Ссылка недоступна"
+                                  : "Не добавлена"
+                              }}</span>
+                            }
+                          </td>
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                }
+                @if (page.count > cases.limit || cases.offset() > 0) {
+                  <app-pagination
+                    [previousDisabled]="cases.offset() === 0"
+                    [nextDisabled]="!cases.hasNext()"
+                    (previous)="cases.changePage(-1)"
+                    (next)="cases.changePage(1)"
+                    >{{ cases.range() }}</app-pagination
                   >
-                  <span>Выполнено {{ expert.completed }} из {{ expert.assignmentsTotal }}</span
-                  ><span>Ожидает: {{ expert.pending }}</span>
-                  <span>Самое долгое ожидание: {{ waiting(expert.oldestWaitingSeconds) }}</span>
-                  <span class="analytics-drilldown__secondary">Посмотреть назначения →</span>
-                </button>
-              </li>
-            } @empty {
-              <li class="analytics-drilldown__empty">Задержек оценивания нет</li>
-            }
-          </ul>
-        }
-        @if (state.assignmentsPending()) {
-          <p class="analytics-drilldown__empty" role="status">Загружаем назначения…</p>
-        }
-        @if (state.assignmentsError()) {
-          <div class="analytics-drilldown__error" role="alert">
-            <p>Не удалось загрузить назначения</p>
-            <p>{{ requestError(state.assignmentsError()) }}</p>
-            <button
-              type="button"
-              class="analytics-drilldown__action"
-              (click)="state.loadAssignments()"
-            >
-              Повторить загрузку
-            </button>
+                }
+              }
+            </div>
           </div>
-        } @else if (!state.assignmentsPending()) {
-          @if (state.view() === "assignments") {
-            @if (state.assignments().length) {
-              <ng-container
-                *ngTemplateOutlet="assignmentTable; context: { $implicit: state.assignments() }"
+        }
+        @if (state.isAttentionView()) {
+          <form
+            appFormLayout
+            class="analytics-drilldown__search"
+            (submit)="$event.preventDefault(); state.applyAttentionSearch()"
+          >
+            <label for="analytics-attention-search" class="analytics-drilldown__secondary">{{
+              state.view() === "participants-without-team"
+                ? "Поиск по имени"
+                : "Поиск по названию проекта"
+            }}</label>
+            <div class="analytics-drilldown__search-controls">
+              <input
+                appField
+                id="analytics-attention-search"
+                type="search"
+                [placeholder]="
+                  state.view() === 'participants-without-team'
+                    ? 'Поиск по имени'
+                    : 'Поиск по названию проекта'
+                "
+                [value]="state.searchDraft()"
+                (input)="state.searchDraft.set($any($event.target).value)"
               />
+              <button appButton="primary" type="submit" class="analytics-drilldown__action">
+                Найти
+              </button>
+              <button
+                appButton="secondary"
+                type="button"
+                class="analytics-drilldown__action"
+                (click)="state.clearAttentionSearch()"
+                [disabled]="!state.searchDraft() && !state.appliedSearch()"
+              >
+                Очистить
+              </button>
+            </div>
+          </form>
+          @if (state.attentionPending()) {
+            <app-state
+              class="analytics-drilldown__empty"
+              [compact]="true"
+              kind="loading"
+              title="Загружаем список…"
+            />
+          } @else if (state.attentionError()) {
+            <div class="analytics-drilldown__error" role="alert">
+              <p>{{ attentionRequestError() }}</p>
+              <button
+                appButton="secondary"
+                type="button"
+                class="analytics-drilldown__action"
+                (click)="state.loadAttention()"
+              >
+                Повторить загрузку
+              </button>
+            </div>
+          } @else if (state.attentionPage()) {
+            <p class="analytics-drilldown__count" role="status">
+              Найдено: {{ state.attentionCount() }}
+            </p>
+            @if (!state.attentionPage()?.results?.length) {
+              <p class="analytics-drilldown__empty">{{ attentionEmptyMessage() }}</p>
             } @else {
-              <p class="analytics-drilldown__empty">{{ emptyMessage() }}</p>
+              @if (state.participantsPage(); as page) {
+                <table appTable class="analytics-drilldown__table">
+                  <thead>
+                    <tr>
+                      <th scope="col">Участник</th>
+                      <th scope="col">Город</th>
+                      <th scope="col">Дата регистрации</th>
+                      <th scope="col">Действие</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (item of page.results; track item.userId) {
+                      <tr [attr.data-user-id]="item.userId">
+                        <td data-label="Участник">
+                          <span class="analytics-drilldown__identity"
+                            ><app-avatar [url]="item.avatar || ''" [size]="36" /><span>{{
+                              item.fullName
+                            }}</span></span
+                          >
+                        </td>
+                        <td data-label="Город">{{ item.city || "Не указано" }}</td>
+                        <td data-label="Дата регистрации">
+                          {{
+                            item.registeredAt
+                              ? (item.registeredAt | date: "dd.MM.yyyy")
+                              : "Нет данных"
+                          }}
+                        </td>
+                        <td data-label="Действие">
+                          <a
+                            class="analytics-drilldown__action"
+                            [routerLink]="['/office/profile', item.userId]"
+                            (click)="leaveAnalytics()"
+                            >Открыть профиль</a
+                          >
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              }
+              @if (state.projectsPage(); as page) {
+                <table
+                  appTable
+                  class="analytics-drilldown__table analytics-drilldown__table--projects"
+                >
+                  <thead>
+                    <tr>
+                      <th scope="col">Проект</th>
+                      <th scope="col">Руководитель</th>
+                      <th scope="col">Дата сдачи</th>
+                      <th scope="col">Причина</th>
+                      <th scope="col">Прогресс</th>
+                      <th scope="col">Действие</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (item of page.results; track item.programProjectId) {
+                      <tr [attr.data-program-project-id]="item.programProjectId">
+                        <td data-label="Проект">{{ item.project.name }}</td>
+                        <td data-label="Руководитель">
+                          @if (item.leader; as leader) {
+                            <span class="analytics-drilldown__identity"
+                              ><app-avatar [url]="leader.avatar || ''" [size]="36" /><span>{{
+                                leader.fullName
+                              }}</span></span
+                            >
+                          } @else {
+                            Не указан
+                          }
+                        </td>
+                        <td data-label="Дата сдачи">
+                          {{
+                            item.submittedAt
+                              ? (item.submittedAt | date: "dd.MM.yyyy")
+                              : "Дата сдачи неизвестна"
+                          }}
+                        </td>
+                        <td data-label="Причина">
+                          <span
+                            class="analytics-drilldown__badge"
+                            [attr.data-reason]="item.reason"
+                            >{{ item.reasonLabel }}</span
+                          >
+                        </td>
+                        <td data-label="Прогресс">
+                          @if (page.mode === "open") {
+                            —
+                          } @else if (item.assignmentsTotal === 0) {
+                            Нет назначений
+                          } @else if (
+                            item.assignmentsTotal !== null && item.assignmentsCompleted !== null
+                          ) {
+                            Завершили: {{ item.assignmentsCompleted }} из
+                            {{ item.assignmentsTotal }}
+                          } @else {
+                            Нет данных
+                          }
+                        </td>
+                        <td data-label="Действие">
+                          <a
+                            class="analytics-drilldown__action"
+                            [routerLink]="['/office/projects', item.project.id]"
+                            (click)="leaveAnalytics()"
+                            >Открыть проект</a
+                          >
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              }
             }
-          }
-          @if (state.view() === "backlog") {
-            @if (!state.backlog().length) {
-              <p class="analytics-drilldown__empty">У эксперта нет ожидающих назначений</p>
+            @if (state.notSubmittedPage(); as page) {
+              @if (page.applicable && page.results.length) {
+                <table appTable class="analytics-drilldown__table">
+                  <thead>
+                    <tr>
+                      <th scope="col">Проект</th>
+                      <th scope="col">Руководитель</th>
+                      <th scope="col">В программе с</th>
+                      <th scope="col">Статус</th>
+                      <th scope="col">Действие</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (item of page.results; track item.programProjectId) {
+                      <tr [attr.data-program-project-id]="item.programProjectId">
+                        <td data-label="Проект">{{ item.project.name }}</td>
+                        <td data-label="Руководитель">
+                          @if (item.leader; as leader) {
+                            <span class="analytics-drilldown__identity">
+                              <app-avatar [url]="leader.avatar || ''" [size]="36" />
+                              <span>{{ leader.fullName }}</span>
+                            </span>
+                          } @else {
+                            Не указан
+                          }
+                        </td>
+                        <td data-label="В программе с">{{ item.linkedAt | date: "dd.MM.yyyy" }}</td>
+                        <td data-label="Статус">
+                          <span class="analytics-drilldown__badge">{{
+                            page.submissionOpen ? "Не сдано" : "Срок сдачи завершён"
+                          }}</span>
+                        </td>
+                        <td data-label="Действие">
+                          <a
+                            class="analytics-drilldown__action"
+                            [routerLink]="['/office/projects', item.project.id]"
+                            (click)="leaveAnalytics()"
+                            >Открыть проект</a
+                          >
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              }
             }
-            @if (state.waitingBacklog().length) {
-              <ng-container
-                *ngTemplateOutlet="assignmentTable; context: { $implicit: state.waitingBacklog() }"
-              />
+            <app-pagination
+              [previousDisabled]="state.attentionOffset() === 0"
+              [nextDisabled]="!state.attentionHasNext()"
+              (previous)="state.changeAttentionPage(-1)"
+              (next)="state.changeAttentionPage(1)"
+              >{{ state.attentionRange() }}</app-pagination
+            >
+          }
+        } @else if (state.view() === "scores") {
+          @if (state.scoreDetailPending()) {
+            <app-state
+              class="analytics-drilldown__empty"
+              [compact]="true"
+              kind="loading"
+              title="Загружаем оценку…"
+            />
+          }
+          @if (state.scoreDetailError()) {
+            <div class="analytics-drilldown__error" role="alert">
+              <p>Не удалось загрузить оценку</p>
+              <p>{{ requestError(state.scoreDetailError()) }}</p>
+              <button
+                appButton="secondary"
+                type="button"
+                class="analytics-drilldown__action"
+                (click)="state.retryScores()"
+              >
+                Повторить загрузку
+              </button>
+            </div>
+          }
+          @if (state.scoreDetail(); as detail) {
+            <div class="analytics-drilldown__identity">
+              <app-avatar [url]="detail.expert.avatar || ''" [size]="36" />
+              <div>
+                <p>Эксперт: {{ detail.expert.fullName || "Имя не указано" }}</p>
+                <p>Проект: {{ detail.project.name }}</p>
+              </div>
+            </div>
+            <ul class="analytics-drilldown__criteria">
+              @for (criterion of detail.scores; track criterion.criterionId) {
+                <li>
+                  <h3>{{ criterion.name }}</h3>
+                  @if (criterion.description) {
+                    <p>{{ criterion.description }}</p>
+                  }
+                  @if (criterion.minValue !== null || criterion.maxValue !== null) {
+                    <p class="analytics-drilldown__secondary">
+                      Диапазон: {{ criterion.minValue ?? "—" }} – {{ criterion.maxValue ?? "—" }}
+                    </p>
+                  }
+                  <strong>{{ criterionValue(criterion) }}</strong>
+                </li>
+              } @empty {
+                <li class="analytics-drilldown__empty">Нет критериев</li>
+              }
+            </ul>
+          }
+        } @else if (state.view() !== "case") {
+          @if (state.view() === "delayed") {
+            <ul class="analytics-drilldown__experts">
+              @for (expert of state.delayedExperts(); track expert.expertId) {
+                <li>
+                  <button
+                    appButton="secondary"
+                    type="button"
+                    class="analytics-drilldown__expert"
+                    (click)="state.showBacklog(expert)"
+                  >
+                    <span class="analytics-drilldown__identity"
+                      ><app-avatar [url]="expert.avatar || ''" [size]="36" /><strong>{{
+                        expert.fullName || "Имя не указано"
+                      }}</strong></span
+                    >
+                    <span
+                      class="analytics-drilldown__badge"
+                      [class.analytics-drilldown__badge--critical]="expert.severity === 'critical'"
+                      [class.analytics-drilldown__badge--pending]="expert.severity === 'warning'"
+                      >{{
+                        expert.severity === "critical" ? "Критическая задержка" : "Требует внимания"
+                      }}</span
+                    >
+                    <span>Выполнено {{ expert.completed }} из {{ expert.assignmentsTotal }}</span
+                    ><span>Ожидает: {{ expert.pending }}</span>
+                    <span>Самое долгое ожидание: {{ waiting(expert.oldestWaitingSeconds) }}</span>
+                    <span class="analytics-drilldown__secondary">Посмотреть назначения →</span>
+                  </button>
+                </li>
+              } @empty {
+                <li class="analytics-drilldown__empty">Задержек оценивания нет</li>
+              }
+            </ul>
+          }
+          @if (state.assignmentsPending()) {
+            <app-state
+              class="analytics-drilldown__empty"
+              [compact]="true"
+              kind="loading"
+              title="Загружаем назначения…"
+            />
+          }
+          @if (state.assignmentsError()) {
+            <div class="analytics-drilldown__error" role="alert">
+              <p>Не удалось загрузить назначения</p>
+              <p>{{ requestError(state.assignmentsError()) }}</p>
+              <button
+                appButton="secondary"
+                type="button"
+                class="analytics-drilldown__action"
+                (click)="state.loadAssignments()"
+              >
+                Повторить загрузку
+              </button>
+            </div>
+          } @else if (!state.assignmentsPending()) {
+            @if (state.view() === "assignments") {
+              @if (state.assignments().length) {
+                <ng-container
+                  *ngTemplateOutlet="assignmentTable; context: { $implicit: state.assignments() }"
+                />
+              } @else {
+                <p class="analytics-drilldown__empty">{{ emptyMessage() }}</p>
+              }
             }
-            @if (state.notReadyBacklog().length) {
-              <h3 class="analytics-drilldown__section">Ещё не сданы</h3>
-              <ng-container
-                *ngTemplateOutlet="assignmentTable; context: { $implicit: state.notReadyBacklog() }"
-              />
+            @if (state.view() === "backlog") {
+              @if (!state.backlog().length) {
+                <p class="analytics-drilldown__empty">У эксперта нет ожидающих назначений</p>
+              }
+              @if (state.waitingBacklog().length) {
+                <ng-container
+                  *ngTemplateOutlet="
+                    assignmentTable;
+                    context: { $implicit: state.waitingBacklog() }
+                  "
+                />
+              }
+              @if (state.notReadyBacklog().length) {
+                <h3 class="analytics-drilldown__section">Ещё не сданы</h3>
+                <ng-container
+                  *ngTemplateOutlet="
+                    assignmentTable;
+                    context: { $implicit: state.notReadyBacklog() }
+                  "
+                />
+              }
             }
           }
         }
-      }
-    </div>
-  </section>
-</app-modal>
+      </div>
+    </section>
+  </app-modal>
 
-<ng-template #assignmentTable let-assignments>
-  <table
-    class="analytics-drilldown__table"
-    [class.analytics-drilldown__table--assignments]="state.view() === 'assignments'"
-  >
-    <thead>
-      <tr>
-        <th scope="col">Эксперт</th>
-        <th scope="col">Проект</th>
-        <th scope="col">Статус</th>
-        <th scope="col">Ожидание</th>
-      </tr>
-    </thead>
-    <tbody>
-      @for (item of assignments; track item.assignmentId) {
-        <tr [attr.data-assignment-id]="item.assignmentId">
-          <td data-label="Эксперт">
-            <span class="analytics-drilldown__identity"
-              ><app-avatar [url]="item.expert.avatar || ''" [size]="36" /><span>{{
-                item.expert.fullName || "Имя не указано"
-              }}</span></span
-            >
-          </td>
-          <td data-label="Проект">{{ item.project.name }}</td>
-          <td data-label="Статус">
-            <span class="analytics-drilldown__assignment-status">
-              <span
-                [class]="'analytics-drilldown__badge analytics-drilldown__badge--' + item.status"
-                >{{ statusLabel(item.status) }}</span
+  <ng-template #assignmentTable let-assignments>
+    <table
+      appTable
+      class="analytics-drilldown__table"
+      [class.analytics-drilldown__table--assignments]="state.view() === 'assignments'"
+    >
+      <thead>
+        <tr>
+          <th scope="col">Эксперт</th>
+          <th scope="col">Проект</th>
+          <th scope="col">Статус</th>
+          <th scope="col">Ожидание</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (item of assignments; track item.assignmentId) {
+          <tr [attr.data-assignment-id]="item.assignmentId">
+            <td data-label="Эксперт">
+              <span class="analytics-drilldown__identity"
+                ><app-avatar [url]="item.expert.avatar || ''" [size]="36" /><span>{{
+                  item.expert.fullName || "Имя не указано"
+                }}</span></span
               >
-              @if (item.status === "completed") {
-                <button
-                  type="button"
-                  class="analytics-drilldown__action"
-                  (click)="state.loadAssignmentScores(item.assignmentId)"
-                  [attr.aria-label]="
-                    'Посмотреть оценку: ' + item.project.name + ', ' + item.expert.fullName
-                  "
+            </td>
+            <td data-label="Проект">{{ item.project.name }}</td>
+            <td data-label="Статус">
+              <span class="analytics-drilldown__assignment-status">
+                <span
+                  [class]="'analytics-drilldown__badge analytics-drilldown__badge--' + item.status"
+                  >{{ statusLabel(item.status) }}</span
                 >
-                  Посмотреть оценку
-                </button>
-              }
-            </span>
-          </td>
-          <td data-label="Ожидание">{{ waiting(item.waitingSeconds, item.status) }}</td>
-        </tr>
-      }
-    </tbody>
-  </table>
-</ng-template>
+                @if (item.status === "completed") {
+                  <button
+                    appButton="secondary"
+                    type="button"
+                    class="analytics-drilldown__action"
+                    (click)="state.loadAssignmentScores(item.assignmentId)"
+                    [attr.aria-label]="
+                      'Посмотреть оценку: ' + item.project.name + ', ' + item.expert.fullName
+                    "
+                  >
+                    Посмотреть оценку
+                  </button>
+                }
+              </span>
+            </td>
+            <td data-label="Ожидание">{{ waiting(item.waitingSeconds, item.status) }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </ng-template>
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss
index cc1372080..05cbc1018 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.scss
@@ -582,3 +582,64 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .modal__body.analytics-drilldown-body.analytics-drilldown-body--case {
+    max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
+  }
+
+  .analytics-case {
+    &__metrics {
+      dt {
+        font-size: var(--ui-font-small);
+      }
+    }
+
+    &__export {
+      font-size: var(--ui-font-small);
+    }
+
+    .analytics-case__table {
+      small {
+        font-size: var(--ui-font-small);
+      }
+    }
+  }
+
+  .modal__body.analytics-drilldown-body {
+    max-height: calc(var(--visual-viewport-height, 100dvh) - 32px);
+  }
+
+  .modal__body.analytics-drilldown-body.analytics-drilldown-body--assignments {
+    .analytics-drilldown__header {
+      h2 {
+        font-size: var(--ui-font-h1);
+      }
+    }
+  }
+
+  .analytics-drilldown {
+    font-size: var(--ui-font-body);
+
+    h3 {
+      font-size: var(--ui-font-h3);
+    }
+
+    &__badge {
+      font-size: var(--ui-font-small);
+    }
+
+    &__table {
+      td::before {
+        font-size: var(--ui-font-small);
+      }
+    }
+
+    &__table--assignments {
+      .analytics-drilldown__action {
+        font-size: var(--ui-font-body);
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.ts b/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.ts
index 34613035f..0599679a7 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/drilldown/analytics-drilldown.component.ts
@@ -1,4 +1,17 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import {
+  ButtonDirective,
+  FieldDirective,
+  TableDirective,
+  FormLayoutDirective,
+  PaginationComponent,
+  StateComponent,
+} from "@uilib";
+
 import { A11yModule, CdkTrapFocus } from "@angular/cdk/a11y";
 import { ProgramCaseProjectsService } from "@api/program/facades/detail/program-case-projects.service";
 import { ProgramCaseSelection } from "@domain/program/program-case-analytics.model";
@@ -49,6 +62,12 @@ import {
   templateUrl: "./analytics-drilldown.component.html",
   styleUrl: "./analytics-drilldown.component.scss",
   imports: [
+    StateComponent,
+    PaginationComponent,
+    ButtonDirective,
+    FieldDirective,
+    TableDirective,
+    FormLayoutDirective,
     A11yModule,
     ModalComponent,
     AvatarComponent,
@@ -63,6 +82,8 @@ import {
   encapsulation: ViewEncapsulation.None,
 })
 export class AnalyticsDrilldownComponent implements AfterViewInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly programId = input<number | null>(null);
   readonly programName = input("program");
   readonly notSubmittedApplicable = input(false);
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.html b/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.html
index cc700166d..e77b52826 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.html
@@ -1,269 +1,539 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div
+    class="page"
+    #listRoot
+    [style.grid-template-columns]="
+      appWidth < 1000 ? '1fr' : listType() === 'members' ? '10fr' : '8fr 2fr'
+    "
+  >
+    <div class="page__outlet">
+      <div class="page__search">
+        <form [formGroup]="searchForm">
+          <app-search formControlName="search"></app-search>
+        </form>
+      </div>
 
-<div
-  class="page"
-  #listRoot
-  [style.grid-template-columns]="
-    appWidth < 1000 ? '1fr' : listType() === 'members' ? '10fr' : '8fr 2fr'
-  "
->
-  <div class="page__outlet">
-    <div class="page__search">
-      <form [formGroup]="searchForm">
-        <app-search formControlName="search"></app-search>
-      </form>
-    </div>
-
-    @if (appWidth < 1000 && listType() !== "members") {
-      <div class="page__mobile-controls">
-        <div class="page__mobile-filter-row">
+      @if (appWidth < 1000 && listType() !== "members") {
+        <div class="page__mobile-controls">
           <div class="page__mobile-filter-row">
-            <app-button
-              appearance="outline"
-              size="big"
-              customTypographyClass="text-body-12"
-              (click)="isFilterOpen.set(true)"
-            >
-              <i appIcon icon="additional" appSquare="14"></i>
-            </app-button>
-            <a class="page__clear text-body-12" (click)="onClearFilters()">сбросить</a>
+            <div class="page__mobile-filter-row">
+              <app-button
+                appearance="outline"
+                size="big"
+                customTypographyClass="text-body-12"
+                (click)="isFilterOpen.set(true)"
+              >
+                <i appIcon icon="additional" appSquare="14"></i>
+              </app-button>
+              <a class="page__clear text-body-12" (click)="onClearFilters()">сбросить</a>
+            </div>
+
+            @if (listType() === "rating") {
+              <div class="page__mobile-export">
+                <app-button
+                  [loader]="loadingExports()"
+                  customTypographyClass="text-body-12"
+                  size="big"
+                  (click)="downloadRates()"
+                >
+                  <span class="text-body-12">выгрузка оценок</span>
+                  <i appIcon icon="download" appSquare="18"></i>
+                </app-button>
+              </div>
+            }
           </div>
 
-          @if (listType() === "rating") {
+          @if (listType() === "projects") {
             <div class="page__mobile-export">
               <app-button
                 [loader]="loadingExports()"
                 customTypographyClass="text-body-12"
-                size="big"
-                (click)="downloadRates()"
+                size="medium"
+                (click)="downloadProjects()"
               >
-                <span class="text-body-12">выгрузка оценок</span>
+                <span class="text-body-12">выгрузка проектов</span>
+                <i appIcon icon="download" appSquare="18"></i>
+              </app-button>
+
+              <app-button
+                [loader]="loadingExports()"
+                customTypographyClass="text-body-12"
+                size="medium"
+                (click)="downloadSubmittedProjects()"
+              >
+                <span class="text-body-12">сданные решения</span>
                 <i appIcon icon="download" appSquare="18"></i>
               </app-button>
             </div>
+          } @else {
+            @if (appWidth > 1000) {
+              <div class="page__mobile-export">
+                <app-button
+                  [loader]="loadingExports()"
+                  customTypographyClass="text-body-12"
+                  size="medium"
+                  (click)="downloadRates()"
+                >
+                  <span class="text-body-12">выгрузка оценок</span>
+                  <i appIcon icon="download" appSquare="18"></i>
+                </app-button>
+              </div>
+            }
           }
         </div>
+      }
 
-        @if (listType() === "projects") {
-          <div class="page__mobile-export">
-            <app-button
-              [loader]="loadingExports()"
-              customTypographyClass="text-body-12"
-              size="medium"
-              (click)="downloadProjects()"
-            >
-              <span class="text-body-12">выгрузка проектов</span>
-              <i appIcon icon="download" appSquare="18"></i>
-            </app-button>
+      <ul class="page__list" [class.page__list--rating]="listType() === 'rating'">
+        @for (listItem of searchedList(); track listItem.id) {
+          <li class="page__item">
+            @if (listType() === "projects") {
+              <app-info-card
+                type="projects"
+                [showSubscriptionAction]="true"
+                [profileId]="listItem.id"
+                [isSubscribed]="profileProjSubsIds()?.includes(listItem.id)"
+                [info]="listItem"
+              ></app-info-card>
+            } @else if (listType() === "members") {
+              <a [routerLink]="routerLink(listItem.id)">
+                <app-info-card
+                  [type]="listType()"
+                  [profileId]="listItem.id"
+                  [isSubscribed]="profileProjSubsIds()?.includes(listItem.id)"
+                  [info]="listItem"
+                ></app-info-card>
+              </a>
+            } @else {
+              <app-rating-card [project]="listItem"></app-rating-card>
+            }
+          </li>
+        }
+      </ul>
+    </div>
+
+    @if (appWidth >= 1000 && listType() !== "members") {
+      <div class="page__create">
+        <div class="page__left">
+          @if (listType() === "projects" || listType() === "rating") {
+            <div class="filter page__filter" [class.page__filter--open]="isFilterOpen()">
+              <div class="filter__overlay" (click)="isFilterOpen.set(false)"></div>
+              <div class="filter__body" #filterBody>
+                <div
+                  class="filter__bar"
+                  (touchstart)="onSwipeStart($event)"
+                  (touchmove)="onSwipeMove($event)"
+                  (touchend)="onSwipeEnd($event)"
+                ></div>
+                <app-program-projects-filter
+                  (closeFilter)="closeFilter()"
+                ></app-program-projects-filter>
+
+                @if (listType() === "projects") {
+                  <div class="page__export" style="margin-top: 0">
+                    <app-button
+                      [loader]="loadingExports()"
+                      customTypographyClass="text-body-12"
+                      size="medium"
+                      (click)="downloadProjects()"
+                    >
+                      <span class="text-body-12">выгрузка проектов</span>
+                      <i appIcon icon="download" appSquare="18"></i>
+                    </app-button>
+
+                    <app-button
+                      [loader]="loadingExports()"
+                      customTypographyClass="text-body-12"
+                      size="medium"
+                      (click)="downloadSubmittedProjects()"
+                    >
+                      <span class="text-body-12">сданные решения</span>
+                      <i appIcon icon="download" appSquare="18"></i>
+                    </app-button>
+                  </div>
+                } @else {
+                  <div class="page__export">
+                    <app-button
+                      [loader]="loadingExports()"
+                      customTypographyClass="text-body-12"
+                      size="medium"
+                      (click)="downloadRates()"
+                    >
+                      <span class="text-body-12">выгрузка оценок</span>
+                      <i appIcon icon="download" appSquare="18"></i>
+                    </app-button>
+
+                    <app-button
+                      [disabled]="true"
+                      style="opacity: 0.5"
+                      [loader]="loadingExports()"
+                      customTypographyClass="text-body-12"
+                      size="medium"
+                      (click)="downloadCalculations()"
+                    >
+                      <span class="text-body-12">итоговые расчеты</span>
+                      <i appIcon icon="download" appSquare="18"></i>
+                    </app-button>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    }
+    @if (listType() !== "members" && listType() !== "projects" && appWidth >= 1000) {
+      <div class="page__tooltip">
+        <div class="tooltip">
+          <app-tooltip
+            color="grey"
+            iconSize="40"
+            (show)="tooltipInfoService.show('hint-experts')"
+          ></app-tooltip>
+
+          @if (tooltipInfoService.isVisible("hint-experts")) {
+            <div class="tooltip__wrapper" (mouseleave)="tooltipInfoService.hide('hint-experts')">
+              <p class="tooltip__text text-body-10">
+                Нажмите, чтобы открыть подсказку и узнать больше о процессе оценивания проектов
+              </p>
+              <p class="tooltip__text text-body-10" (click)="openHintModal($event)">подробнее</p>
+            </div>
+          }
+        </div>
+      </div>
+
+      @defer (when isHintExpertsModal()) {
+        <app-modal [open]="isHintExpertsModal()" (openChange)="isHintExpertsModal.set(false)">
+          <div class="cancel">
+            <div class="cancel__top">
+              <p class="cancel__title text-body-14">Как выставить оценки проекту</p>
+            </div>
+
+            <div class="cancel__text-block">
+              <p class="text-body-12">
+                Перед стартом оценки, <br />
+                настройте фильтрацию справа – выберите регион или конкретный кейс, а также работы,
+                которые ранее не были оценены другими экспертами
+              </p>
+
+              <p class="text-body-12">
+                После изучения материалов участников (описания и презентации проекта), проставьте
+                оценки по критериям. При необходимости оставьте небольшой комментарий
+              </p>
+
+              <p class="text-body-12">
+                Для завершения оценивания, нажмите «оценить проект» – ваша оценка сохранилась в
+                системе
+              </p>
+
+              <p class="text-body-12">
+                Вы можете исправить свою оценку или комментарий – для этого нажмите на иконку
+                карандаша справа от кнопки «проект оценен». Этот функционал появится после
+                сохранения оценки
+              </p>
+
+              <p class="text-body-12">Благодарим за вашу работу!</p>
+            </div>
 
             <app-button
-              [loader]="loadingExports()"
               customTypographyClass="text-body-12"
               size="medium"
-              (click)="downloadSubmittedProjects()"
+              (click)="isHintExpertsModal.set(false)"
+              >спасибо, понятно</app-button
             >
-              <span class="text-body-12">сданные решения</span>
-              <i appIcon icon="download" appSquare="18"></i>
-            </app-button>
           </div>
-        } @else {
-          @if (appWidth > 1000) {
+        </app-modal>
+      }
+
+      @defer (when isFilterOpen()) {
+        <app-modal
+          [open]="isFilterOpen()"
+          (openChange)="isFilterOpen.set($event)"
+          bodyClass="modal__body--no-flex"
+        >
+          <app-program-projects-filter
+            (closeFilter)="isFilterOpen.set(false)"
+          ></app-program-projects-filter>
+
+          <app-button
+            appearance="outline"
+            size="big"
+            customTypographyClass="text-body-12"
+            (click)="isFilterOpen.set(false)"
+          >
+            применить фильтр
+          </app-button>
+        </app-modal>
+      }
+    }
+  </div>
+} @else {
+  <div
+    class="page"
+    #listRoot
+    [style.grid-template-columns]="
+      appWidth < 1000 ? '1fr' : listType() === 'members' ? '10fr' : '8fr 2fr'
+    "
+  >
+    <div class="page__outlet">
+      <div class="page__search">
+        <form appFormLayout [formGroup]="searchForm">
+          <app-search formControlName="search"></app-search>
+        </form>
+      </div>
+
+      @if (appWidth < 1000 && listType() !== "members") {
+        <div class="page__mobile-controls">
+          <div class="page__mobile-filter-row">
+            <div class="page__mobile-filter-row">
+              <app-button
+                appearance="outline"
+                size="big"
+                customTypographyClass="text-body-12"
+                (click)="isFilterOpen.set(true)"
+              >
+                <i appIcon icon="additional" appSquare="14"></i>
+              </app-button>
+              <a class="page__clear text-body-12" (click)="onClearFilters()">сбросить</a>
+            </div>
+
+            @if (listType() === "rating") {
+              <div class="page__mobile-export">
+                <app-button
+                  [loader]="loadingExports()"
+                  customTypographyClass="text-body-12"
+                  size="big"
+                  (click)="downloadRates()"
+                >
+                  <span class="text-body-12">выгрузка оценок</span>
+                  <i appIcon icon="download" appSquare="18"></i>
+                </app-button>
+              </div>
+            }
+          </div>
+
+          @if (listType() === "projects") {
             <div class="page__mobile-export">
               <app-button
                 [loader]="loadingExports()"
                 customTypographyClass="text-body-12"
                 size="medium"
-                (click)="downloadRates()"
+                (click)="downloadProjects()"
               >
-                <span class="text-body-12">выгрузка оценок</span>
+                <span class="text-body-12">выгрузка проектов</span>
+                <i appIcon icon="download" appSquare="18"></i>
+              </app-button>
+
+              <app-button
+                [loader]="loadingExports()"
+                customTypographyClass="text-body-12"
+                size="medium"
+                (click)="downloadSubmittedProjects()"
+              >
+                <span class="text-body-12">сданные решения</span>
                 <i appIcon icon="download" appSquare="18"></i>
               </app-button>
             </div>
+          } @else {
+            @if (appWidth > 1000) {
+              <div class="page__mobile-export">
+                <app-button
+                  [loader]="loadingExports()"
+                  customTypographyClass="text-body-12"
+                  size="medium"
+                  (click)="downloadRates()"
+                >
+                  <span class="text-body-12">выгрузка оценок</span>
+                  <i appIcon icon="download" appSquare="18"></i>
+                </app-button>
+              </div>
+            }
           }
-        }
-      </div>
-    }
+        </div>
+      }
 
-    <ul class="page__list" [class.page__list--rating]="listType() === 'rating'">
-      @for (listItem of searchedList(); track listItem.id) {
-        <li class="page__item">
-          @if (listType() === "projects") {
-            <app-info-card
-              type="projects"
-              [showSubscriptionAction]="true"
-              [profileId]="listItem.id"
-              [isSubscribed]="profileProjSubsIds()?.includes(listItem.id)"
-              [info]="listItem"
-            ></app-info-card>
-          } @else if (listType() === "members") {
-            <a [routerLink]="routerLink(listItem.id)">
+      <ul class="page__list" [class.page__list--rating]="listType() === 'rating'">
+        @for (listItem of searchedList(); track listItem.id) {
+          <li class="page__item">
+            @if (listType() === "projects") {
               <app-info-card
-                [type]="listType()"
+                type="projects"
+                [showSubscriptionAction]="true"
                 [profileId]="listItem.id"
                 [isSubscribed]="profileProjSubsIds()?.includes(listItem.id)"
                 [info]="listItem"
               ></app-info-card>
-            </a>
-          } @else {
-            <app-rating-card [project]="listItem"></app-rating-card>
-          }
-        </li>
-      }
-    </ul>
-  </div>
+            } @else if (listType() === "members") {
+              <a [routerLink]="routerLink(listItem.id)">
+                <app-info-card
+                  [type]="listType()"
+                  [profileId]="listItem.id"
+                  [isSubscribed]="profileProjSubsIds()?.includes(listItem.id)"
+                  [info]="listItem"
+                ></app-info-card>
+              </a>
+            } @else {
+              <app-rating-card [project]="listItem"></app-rating-card>
+            }
+          </li>
+        }
+      </ul>
+    </div>
+
+    @if (appWidth >= 1000 && listType() !== "members") {
+      <div class="page__create">
+        <div class="page__left">
+          @if (listType() === "projects" || listType() === "rating") {
+            <div class="filter page__filter" [class.page__filter--open]="isFilterOpen()">
+              <div class="filter__overlay" (click)="isFilterOpen.set(false)"></div>
+              <div class="filter__body" #filterBody>
+                <div
+                  class="filter__bar"
+                  (touchstart)="onSwipeStart($event)"
+                  (touchmove)="onSwipeMove($event)"
+                  (touchend)="onSwipeEnd($event)"
+                ></div>
+                <app-program-projects-filter
+                  (closeFilter)="closeFilter()"
+                ></app-program-projects-filter>
+
+                @if (listType() === "projects") {
+                  <div class="page__export" style="margin-top: 0">
+                    <app-button
+                      [loader]="loadingExports()"
+                      customTypographyClass="text-body-12"
+                      size="medium"
+                      (click)="downloadProjects()"
+                    >
+                      <span class="text-body-12">выгрузка проектов</span>
+                      <i appIcon icon="download" appSquare="18"></i>
+                    </app-button>
 
-  @if (appWidth >= 1000 && listType() !== "members") {
-    <div class="page__create">
-      <div class="page__left">
-        @if (listType() === "projects" || listType() === "rating") {
-          <div class="filter page__filter" [class.page__filter--open]="isFilterOpen()">
-            <div class="filter__overlay" (click)="isFilterOpen.set(false)"></div>
-            <div class="filter__body" #filterBody>
-              <div
-                class="filter__bar"
-                (touchstart)="onSwipeStart($event)"
-                (touchmove)="onSwipeMove($event)"
-                (touchend)="onSwipeEnd($event)"
-              ></div>
-              <app-program-projects-filter
-                (closeFilter)="closeFilter()"
-              ></app-program-projects-filter>
-
-              @if (listType() === "projects") {
-                <div class="page__export" style="margin-top: 0">
-                  <app-button
-                    [loader]="loadingExports()"
-                    customTypographyClass="text-body-12"
-                    size="medium"
-                    (click)="downloadProjects()"
-                  >
-                    <span class="text-body-12">выгрузка проектов</span>
-                    <i appIcon icon="download" appSquare="18"></i>
-                  </app-button>
-
-                  <app-button
-                    [loader]="loadingExports()"
-                    customTypographyClass="text-body-12"
-                    size="medium"
-                    (click)="downloadSubmittedProjects()"
-                  >
-                    <span class="text-body-12">сданные решения</span>
-                    <i appIcon icon="download" appSquare="18"></i>
-                  </app-button>
-                </div>
-              } @else {
-                <div class="page__export">
-                  <app-button
-                    [loader]="loadingExports()"
-                    customTypographyClass="text-body-12"
-                    size="medium"
-                    (click)="downloadRates()"
-                  >
-                    <span class="text-body-12">выгрузка оценок</span>
-                    <i appIcon icon="download" appSquare="18"></i>
-                  </app-button>
-
-                  <app-button
-                    [disabled]="true"
-                    style="opacity: 0.5"
-                    [loader]="loadingExports()"
-                    customTypographyClass="text-body-12"
-                    size="medium"
-                    (click)="downloadCalculations()"
-                  >
-                    <span class="text-body-12">итоговые расчеты</span>
-                    <i appIcon icon="download" appSquare="18"></i>
-                  </app-button>
-                </div>
-              }
+                    <app-button
+                      [loader]="loadingExports()"
+                      customTypographyClass="text-body-12"
+                      size="medium"
+                      (click)="downloadSubmittedProjects()"
+                    >
+                      <span class="text-body-12">сданные решения</span>
+                      <i appIcon icon="download" appSquare="18"></i>
+                    </app-button>
+                  </div>
+                } @else {
+                  <div class="page__export">
+                    <app-button
+                      [loader]="loadingExports()"
+                      customTypographyClass="text-body-12"
+                      size="medium"
+                      (click)="downloadRates()"
+                    >
+                      <span class="text-body-12">выгрузка оценок</span>
+                      <i appIcon icon="download" appSquare="18"></i>
+                    </app-button>
+
+                    <app-button
+                      [disabled]="true"
+                      style="opacity: 0.5"
+                      [loader]="loadingExports()"
+                      customTypographyClass="text-body-12"
+                      size="medium"
+                      (click)="downloadCalculations()"
+                    >
+                      <span class="text-body-12">итоговые расчеты</span>
+                      <i appIcon icon="download" appSquare="18"></i>
+                    </app-button>
+                  </div>
+                }
+              </div>
             </div>
-          </div>
-        }
+          }
+        </div>
       </div>
-    </div>
-  }
-  @if (listType() !== "members" && listType() !== "projects" && appWidth >= 1000) {
-    <div class="page__tooltip">
-      <div class="tooltip">
-        <app-tooltip
-          color="grey"
-          iconSize="40"
-          (show)="tooltipInfoService.show('hint-experts')"
-        ></app-tooltip>
-
-        @if (tooltipInfoService.isVisible("hint-experts")) {
-          <div class="tooltip__wrapper" (mouseleave)="tooltipInfoService.hide('hint-experts')">
-            <p class="tooltip__text text-body-10">
-              Нажмите, чтобы открыть подсказку и узнать больше о процессе оценивания проектов
-            </p>
-            <p class="tooltip__text text-body-10" (click)="openHintModal($event)">подробнее</p>
-          </div>
-        }
+    }
+    @if (listType() !== "members" && listType() !== "projects" && appWidth >= 1000) {
+      <div class="page__tooltip">
+        <div class="tooltip">
+          <app-tooltip
+            color="grey"
+            iconSize="40"
+            (show)="tooltipInfoService.show('hint-experts')"
+          ></app-tooltip>
+
+          @if (tooltipInfoService.isVisible("hint-experts")) {
+            <div class="tooltip__wrapper" (mouseleave)="tooltipInfoService.hide('hint-experts')">
+              <p class="tooltip__text text-body-10">
+                Нажмите, чтобы открыть подсказку и узнать больше о процессе оценивания проектов
+              </p>
+              <p class="tooltip__text text-body-10" (click)="openHintModal($event)">подробнее</p>
+            </div>
+          }
+        </div>
       </div>
-    </div>
 
-    @defer (when isHintExpertsModal()) {
-      <app-modal [open]="isHintExpertsModal()" (openChange)="isHintExpertsModal.set(false)">
-        <div class="cancel">
-          <div class="cancel__top">
-            <p class="cancel__title text-body-14">Как выставить оценки проекту</p>
-          </div>
+      @defer (when isHintExpertsModal()) {
+        <app-modal [open]="isHintExpertsModal()" (openChange)="isHintExpertsModal.set(false)">
+          <div class="cancel">
+            <div class="cancel__top">
+              <p class="cancel__title text-body-14">Как выставить оценки проекту</p>
+            </div>
+
+            <div class="cancel__text-block">
+              <p class="text-body-12">
+                Перед стартом оценки, <br />
+                настройте фильтрацию справа – выберите регион или конкретный кейс, а также работы,
+                которые ранее не были оценены другими экспертами
+              </p>
+
+              <p class="text-body-12">
+                После изучения материалов участников (описания и презентации проекта), проставьте
+                оценки по критериям. При необходимости оставьте небольшой комментарий
+              </p>
 
-          <div class="cancel__text-block">
-            <p class="text-body-12">
-              Перед стартом оценки, <br />
-              настройте фильтрацию справа – выберите регион или конкретный кейс, а также работы,
-              которые ранее не были оценены другими экспертами
-            </p>
-
-            <p class="text-body-12">
-              После изучения материалов участников (описания и презентации проекта), проставьте
-              оценки по критериям. При необходимости оставьте небольшой комментарий
-            </p>
-
-            <p class="text-body-12">
-              Для завершения оценивания, нажмите «оценить проект» – ваша оценка сохранилась в
-              системе
-            </p>
-
-            <p class="text-body-12">
-              Вы можете исправить свою оценку или комментарий – для этого нажмите на иконку
-              карандаша справа от кнопки «проект оценен». Этот функционал появится после сохранения
-              оценки
-            </p>
-
-            <p class="text-body-12">Благодарим за вашу работу!</p>
+              <p class="text-body-12">
+                Для завершения оценивания, нажмите «оценить проект» – ваша оценка сохранилась в
+                системе
+              </p>
+
+              <p class="text-body-12">
+                Вы можете исправить свою оценку или комментарий – для этого нажмите на иконку
+                карандаша справа от кнопки «проект оценен». Этот функционал появится после
+                сохранения оценки
+              </p>
+
+              <p class="text-body-12">Благодарим за вашу работу!</p>
+            </div>
+
+            <app-button
+              customTypographyClass="text-body-12"
+              size="medium"
+              (click)="isHintExpertsModal.set(false)"
+              >спасибо, понятно</app-button
+            >
           </div>
+        </app-modal>
+      }
+
+      @defer (when isFilterOpen()) {
+        <app-modal
+          [open]="isFilterOpen()"
+          (openChange)="isFilterOpen.set($event)"
+          bodyClass="modal__body--no-flex"
+        >
+          <app-program-projects-filter
+            (closeFilter)="isFilterOpen.set(false)"
+          ></app-program-projects-filter>
 
           <app-button
+            appearance="outline"
+            size="big"
             customTypographyClass="text-body-12"
-            size="medium"
-            (click)="isHintExpertsModal.set(false)"
-            >спасибо, понятно</app-button
+            (click)="isFilterOpen.set(false)"
           >
-        </div>
-      </app-modal>
-    }
-
-    @defer (when isFilterOpen()) {
-      <app-modal
-        [open]="isFilterOpen()"
-        (openChange)="isFilterOpen.set($event)"
-        bodyClass="modal__body--no-flex"
-      >
-        <app-program-projects-filter
-          (closeFilter)="isFilterOpen.set(false)"
-        ></app-program-projects-filter>
-
-        <app-button
-          appearance="outline"
-          size="big"
-          customTypographyClass="text-body-12"
-          (click)="isFilterOpen.set(false)"
-        >
-          применить фильтр
-        </app-button>
-      </app-modal>
+            применить фильтр
+          </app-button>
+        </app-modal>
+      }
     }
-  }
-</div>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss
index b3b2de4d7..91acbf65d 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -136,10 +137,7 @@
 
   &__tooltip {
     position: fixed;
-    right:
-      calc(
-        (100vw - 1080px) / 2
-      );
+    right: calc((100vw - 1080px) / 2);
     bottom: 24px;
     z-index: 30;
   }
@@ -311,3 +309,56 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .page {
+    &__tooltip {
+      right: calc((100vw - 1080px) / 2);
+    }
+  }
+
+  .cancel {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    padding: 0;
+  }
+
+  @include responsive.apply-mobile {
+    .page__list {
+      @include responsive.single-column;
+    }
+
+    .page__mobile-filter-row {
+      @include responsive.mobile-actions;
+    }
+
+    .page__tooltip {
+      right: var(--page-gutter);
+      bottom: max(16px, env(safe-area-inset-bottom));
+    }
+
+    .tooltip__wrapper {
+      position: fixed;
+      right: var(--page-gutter);
+      bottom: 60px;
+      left: auto;
+      width: calc(100vw - 2 * var(--page-gutter));
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    .filter {
+      position: fixed;
+      z-index: 300;
+    }
+
+    .filter__body {
+      min-height: 0;
+      max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
+      padding-bottom: env(safe-area-inset-bottom, 0);
+      overscroll-behavior: contain;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.ts b/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.ts
index 7d4610d7a..c2692ccb6 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/list.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { CommonModule } from "@angular/common";
 import {
   AfterViewInit,
@@ -21,7 +24,7 @@ import { ProgramProjectsFilterComponent } from "./program-projects-filter/progra
 import { RatingCardComponent } from "./rating-card/rating-card.component";
 import { InfoCardComponent } from "@ui/widgets/info-card/info-card.component";
 import { ButtonComponent } from "@ui/primitives";
-import { IconComponent } from "@uilib";
+import { IconComponent, FormLayoutDirective } from "@uilib";
 import { PartnerProgramFields } from "@domain/program/partner-program-fields.model";
 import { tagsFilter } from "@core/consts/filters/tags-filter.const";
 import { ProgramDetailListUIInfoService } from "@api/program/facades/detail/ui/program-detail-list-ui-info.service";
@@ -40,6 +43,7 @@ import { LoggerService } from "@core/lib/services/logger/logger.service";
   templateUrl: "./list.component.html",
   styleUrl: "./list.component.scss",
   imports: [
+    FormLayoutDirective,
     CommonModule,
     ReactiveFormsModule,
     RouterModule,
@@ -63,6 +67,8 @@ import { LoggerService } from "@core/lib/services/logger/logger.service";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProgramListComponent implements OnInit, AfterViewInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly listRoot = viewChild<ElementRef<HTMLUListElement> | undefined>("listRoot");
   readonly filterBody = viewChild<ElementRef<HTMLElement>>("filterBody");
 
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.html b/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.html
index 31ced1a27..0cba002af 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.html
@@ -1,73 +1,149 @@
 <!-- @format -->
-<div class="filter__titles">
-  <p class="text-body-14 filter__title">фильтры</p>
-  <a class="text-body-12 filter__clear" (click)="clearFilters()">cбросить</a>
-</div>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="filter__titles">
+    <p class="text-body-14 filter__title">фильтры</p>
+    <a class="text-body-12 filter__clear" (click)="clearFilters()">cбросить</a>
+  </div>
 
-@if (filters()?.length) {
-  <div class="filter">
-    <div class="filter__body" [formGroup]="filterForm">
-      @if (filters()?.length && filterForm.controls) {
-        @for (field of filters(); track field.id) {
-          @if (filterForm.get(field.name)) {
-            <div class="filter__block">
-              @switch (field.fieldType) {
-                @case ("checkbox") {
-                  <!-- <h4 class="text-body-12 filter__name">{{ field.label }}</h4> -->
-                  <div
-                    class="text-body-10 filter__checkbox"
-                    (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
-                  >
-                    <app-checkbox [checked]="filterForm.get(field.name)?.value"></app-checkbox>
-                    {{ field.label }}
-                  </div>
-                }
-                @case ("radio") {
-                  <!-- <h4 class="text-body-12 filter__name">{{ field.label }}</h4> -->
-                  <div class="filter__switch">
-                    <span
-                      class="filter__yes-no text-body-10"
-                      [class.filter__yes-no--active]="!filterForm.get(field.name)?.value"
-                    >
-                      Нет
-                    </span>
-                    <app-switch
-                      [checked]="filterForm.get(field.name)?.value"
-                      (checkedChange)="filterForm.get(field.name)?.setValue($event)"
-                    ></app-switch>
-                    <span
-                      class="filter__yes-no text-body-10"
-                      [class.filter__yes-no--active]="filterForm.get(field.name)?.value"
+  @if (filters()?.length) {
+    <div class="filter">
+      <div class="filter__body" [formGroup]="filterForm">
+        @if (filters()?.length && filterForm.controls) {
+          @for (field of filters(); track field.id) {
+            @if (filterForm.get(field.name)) {
+              <div class="filter__block">
+                @switch (field.fieldType) {
+                  @case ("checkbox") {
+                    <!-- <h4 class="text-body-12 filter__name">{{ field.label }}</h4> -->
+                    <div
+                      class="text-body-10 filter__checkbox"
+                      (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
                     >
-                      Да
-                    </span>
-                  </div>
+                      <app-checkbox [checked]="filterForm.get(field.name)?.value"></app-checkbox>
+                      {{ field.label }}
+                    </div>
+                  }
+                  @case ("radio") {
+                    <!-- <h4 class="text-body-12 filter__name">{{ field.label }}</h4> -->
+                    <div class="filter__switch">
+                      <span
+                        class="filter__yes-no text-body-10"
+                        [class.filter__yes-no--active]="!filterForm.get(field.name)?.value"
+                      >
+                        Нет
+                      </span>
+                      <app-switch
+                        [checked]="filterForm.get(field.name)?.value"
+                        (checkedChange)="filterForm.get(field.name)?.setValue($event)"
+                      ></app-switch>
+                      <span
+                        class="filter__yes-no text-body-10"
+                        [class.filter__yes-no--active]="filterForm.get(field.name)?.value"
+                      >
+                        Да
+                      </span>
+                    </div>
+                  }
+                  @case ("select") {
+                    <!-- <h4 class="text-body-12 filter__name">{{ field.label }}</h4> -->
+                    <div class="filter__select text-body-10">
+                      <app-select
+                        size="big"
+                        [id]="field.name"
+                        [formControlName]="field.name"
+                        [placeholder]="field.helpText || field.label"
+                        [options]="field.options | toSelectOptions"
+                      ></app-select>
+                    </div>
+                  }
                 }
-                @case ("select") {
-                  <!-- <h4 class="text-body-12 filter__name">{{ field.label }}</h4> -->
-                  <div class="filter__select text-body-10">
-                    <app-select
-                      size="big"
-                      [id]="field.name"
-                      [formControlName]="field.name"
-                      [placeholder]="field.helpText || field.label"
-                      [options]="field.options | toSelectOptions"
-                    ></app-select>
-                  </div>
-                }
-              }
-            </div>
+              </div>
+            }
           }
         }
-      }
-      @if (listType() === "rating") {
-        <label class="filter__tags" (click)="setValue($event)">
-          <app-checkbox
-            [checked]="this.filterForm.get('is_rated_by_expert')?.value!"
-          ></app-checkbox>
-          <p class="text-body-12">проекты с оценкой</p>
-        </label>
-      }
+        @if (listType() === "rating") {
+          <label class="filter__tags" (click)="setValue($event)">
+            <app-checkbox
+              [checked]="this.filterForm.get('is_rated_by_expert')?.value!"
+            ></app-checkbox>
+            <p class="text-body-12">проекты с оценкой</p>
+          </label>
+        }
+      </div>
     </div>
+  }
+} @else {
+  <div appFilters class="filter__titles">
+    <p class="text-body-14 filter__title">фильтры</p>
+    <a class="text-body-12 filter__clear" (click)="clearFilters()">cбросить</a>
   </div>
+
+  @if (filters()?.length) {
+    <div class="filter">
+      <div class="filter__body" [formGroup]="filterForm">
+        @if (filters()?.length && filterForm.controls) {
+          @for (field of filters(); track field.id) {
+            @if (filterForm.get(field.name)) {
+              <div class="filter__block">
+                @switch (field.fieldType) {
+                  @case ("checkbox") {
+                    <!-- <h4 class="text-body-12 filter__name">{{ field.label }}</h4> -->
+                    <div
+                      class="text-body-10 filter__checkbox"
+                      (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
+                    >
+                      <app-checkbox [checked]="filterForm.get(field.name)?.value"></app-checkbox>
+                      {{ field.label }}
+                    </div>
+                  }
+                  @case ("radio") {
+                    <!-- <h4 class="text-body-12 filter__name">{{ field.label }}</h4> -->
+                    <div class="filter__switch">
+                      <span
+                        class="filter__yes-no text-body-10"
+                        [class.filter__yes-no--active]="!filterForm.get(field.name)?.value"
+                      >
+                        Нет
+                      </span>
+                      <app-switch
+                        [checked]="filterForm.get(field.name)?.value"
+                        (checkedChange)="filterForm.get(field.name)?.setValue($event)"
+                      ></app-switch>
+                      <span
+                        class="filter__yes-no text-body-10"
+                        [class.filter__yes-no--active]="filterForm.get(field.name)?.value"
+                      >
+                        Да
+                      </span>
+                    </div>
+                  }
+                  @case ("select") {
+                    <!-- <h4 class="text-body-12 filter__name">{{ field.label }}</h4> -->
+                    <div class="filter__select text-body-10">
+                      <app-select
+                        size="big"
+                        [id]="field.name"
+                        [formControlName]="field.name"
+                        [placeholder]="field.helpText || field.label"
+                        [options]="field.options | toSelectOptions"
+                      ></app-select>
+                    </div>
+                  }
+                }
+              </div>
+            }
+          }
+        }
+        @if (listType() === "rating") {
+          <label class="filter__tags" (click)="setValue($event)">
+            <app-checkbox
+              [checked]="this.filterForm.get('is_rated_by_expert')?.value!"
+            ></app-checkbox>
+            <p class="text-body-12">проекты с оценкой</p>
+          </label>
+        }
+      </div>
+    </div>
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.ts b/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.ts
index 7d45cd72c..0ff257a30 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FiltersDirective } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -22,6 +27,7 @@ import { ProgramProjectsFilterInfoService } from "./service/program-projects-fil
   templateUrl: "./program-projects-filter.component.html",
   styleUrl: "./program-projects-filter.component.scss",
   imports: [
+    FiltersDirective,
     CommonModule,
     ReactiveFormsModule,
     CheckboxComponent,
@@ -32,6 +38,8 @@ import { ProgramProjectsFilterInfoService } from "./service/program-projects-fil
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProgramProjectsFilterComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly clear = output<void>();
 
   private readonly programDetailListUIInfoService = inject(ProgramDetailListUIInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.html b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.html
index 007cf0e49..ea348b4c8 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.html
@@ -1,8 +1,28 @@
 <!-- @format -->
-
-<label class="container">
-  <input type="checkbox" [checked]="isChecked" (change)="onChanged($event)" [disabled]="disabled" />
-  <div class="checkbox" [class.checkbox__checked]="isChecked">
-    <i appIcon icon="check" appSquare="14" (click)="onClickLog()"></i>
-  </div>
-</label>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <label class="container">
+    <input
+      type="checkbox"
+      [checked]="isChecked"
+      (change)="onChanged($event)"
+      [disabled]="disabled"
+    />
+    <div class="checkbox" [class.checkbox__checked]="isChecked">
+      <i appIcon icon="check" appSquare="14" (click)="onClickLog()"></i>
+    </div>
+  </label>
+} @else {
+  <label class="container">
+    <input
+      appChoice
+      type="checkbox"
+      [checked]="isChecked"
+      (change)="onChanged($event)"
+      [disabled]="disabled"
+    />
+    <div class="checkbox" [class.checkbox__checked]="isChecked">
+      <i appIcon icon="check" appSquare="14" (click)="onClickLog()"></i>
+    </div>
+  </label>
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss
index b027d0bf1..6ff4059fd 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.scss
@@ -1,3 +1,6 @@
+/** @format */
+@use "styles/responsive";
+
 :host {
   display: block;
 }
@@ -31,3 +34,14 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-mobile {
+    .container {
+      justify-content: center;
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.ts b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.ts
index 67df32583..d43548baf 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/boolean-criterion/boolean-criterion.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ChoiceDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, forwardRef, Input } from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { IconComponent } from "@ui/primitives";
@@ -10,7 +15,7 @@ import { noop } from "rxjs";
   selector: "app-boolean-criterion",
   templateUrl: "./boolean-criterion.component.html",
   styleUrl: "./boolean-criterion.component.scss",
-  imports: [IconComponent],
+  imports: [ChoiceDirective, IconComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     {
@@ -21,6 +26,8 @@ import { noop } from "rxjs";
   ],
 })
 export class BooleanCriterionComponent implements ControlValueAccessor {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   @Input() disabled = false;
 
   isChecked = false;
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.html b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.html
index 2951da7d9..7a41c6d40 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.html
@@ -1,21 +1,44 @@
 <!-- @format -->
-
-<div class="field" [class.field--error]="error()">
-  <input
-    type="number"
-    [value]="value"
-    [min]="0"
-    [max]="max()"
-    [step]="1"
-    [disabled]="disabled"
-    (input)="onInput($event)"
-    (keydown)="onKeydown($event)"
-    (blur)="onBlur()"
-    (paste)="onPaste($event)"
-    (focus)="moveCursorToEnd($event)"
-    class="field__input text-body-10"
-    [class.field__input--error]="error()"
-  />
-  <span class="text-body-10">&nbsp;/</span>
-  <span class="text-body-10">{{ max() }}</span>
-</div>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="field" [class.field--error]="error()">
+    <input
+      type="number"
+      [value]="value"
+      [min]="0"
+      [max]="max()"
+      [step]="1"
+      [disabled]="disabled"
+      (input)="onInput($event)"
+      (keydown)="onKeydown($event)"
+      (blur)="onBlur()"
+      (paste)="onPaste($event)"
+      (focus)="moveCursorToEnd($event)"
+      class="field__input text-body-10"
+      [class.field__input--error]="error()"
+    />
+    <span class="text-body-10">&nbsp;/</span>
+    <span class="text-body-10">{{ max() }}</span>
+  </div>
+} @else {
+  <div class="field" [class.field--error]="error()">
+    <input
+      appField
+      type="number"
+      [value]="value"
+      [min]="0"
+      [max]="max()"
+      [step]="1"
+      [disabled]="disabled"
+      (input)="onInput($event)"
+      (keydown)="onKeydown($event)"
+      (blur)="onBlur()"
+      (paste)="onPaste($event)"
+      (focus)="moveCursorToEnd($event)"
+      class="field__input text-body-10"
+      [class.field__input--error]="error()"
+    />
+    <span class="text-body-10">&nbsp;/</span>
+    <span class="text-body-10">{{ max() }}</span>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss
index f4204ad1f..b73adb14d 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/typography";
 @use "styles/responsive";
 
@@ -40,7 +39,6 @@
     }
   }
 }
-
 // stylelint-disable property-no-vendor-prefix
 input {
   &::-webkit-outer-spin-button,
@@ -52,3 +50,33 @@ input {
     -moz-appearance: textfield;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .field {
+    &__input {
+      &:focus {
+        box-shadow: var(--ui-focus-ring);
+      }
+    }
+  }
+
+  input {
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+
+    &[type="number"] {
+      appearance: textfield;
+    }
+  }
+
+  @include responsive.apply-mobile {
+    .field__input {
+      width: 44px;
+      height: 44px;
+      font-size: var(--ui-font-h3);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.spec.ts b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.spec.ts
index 814830a66..ef47721a4 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.spec.ts
@@ -29,10 +29,10 @@ describe("RangeCriterionInputComponent", () => {
 
   it("should set the value of the input element", () => {
     const fixture = TestBed.createComponent(RangeCriterionInputComponent);
-    const inputEl = fixture.nativeElement.querySelector("input");
     const component = fixture.componentInstance;
     component.value = 1;
     fixture.detectChanges();
+    const inputEl = fixture.nativeElement.querySelector("input");
     expect(inputEl.value).toBe("1");
   });
 
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.ts b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.ts
index 6d2772be4..ba42e4f7c 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/components/range-criterion-input/range-criterion-input.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FieldDirective } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -12,6 +17,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 /** Поле ввода числовых критериев с ограничением диапазона и ControlValueAccessor. */
 @Component({
+  imports: [FieldDirective],
   selector: "app-range-criterion-input",
   templateUrl: "./range-criterion-input.component.html",
   styleUrl: "./range-criterion-input.component.scss",
@@ -26,6 +32,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
   standalone: true,
 })
 export class RangeCriterionInputComponent implements ControlValueAccessor {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly max = input<number>(10);
   readonly error = input<boolean>(false);
 
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.html b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.html
index 4fecf2165..2e56bf8df 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.html
@@ -1,51 +1,105 @@
 <!-- @format -->
-<form [formGroup]="form" class="rating">
-  <section class="rating__columns">
-    @for (criterion of criteria; track $index) {
-      @if (criterion.type === "int") {
-        <div class="rating__field">
-          <app-range-criterion-input
-            class="rating__input"
-            [max]="criterion.maxValue!"
-            [formControlName]="criterion.id"
-            [disabled]="disabled"
-          ></app-range-criterion-input>
-          <label class="text-body-10">{{ criterion.name }}</label>
-        </div>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <form [formGroup]="form" class="rating">
+    <section class="rating__columns">
+      @for (criterion of criteria; track $index) {
+        @if (criterion.type === "int") {
+          <div class="rating__field">
+            <app-range-criterion-input
+              class="rating__input"
+              [max]="criterion.maxValue!"
+              [formControlName]="criterion.id"
+              [disabled]="disabled"
+            ></app-range-criterion-input>
+            <label class="text-body-10">{{ criterion.name }}</label>
+          </div>
+        }
+        @if (criterion.type === "bool") {
+          <div class="rating__field">
+            <app-boolean-criterion
+              class="rating__input"
+              [formControlName]="criterion.id"
+              [disabled]="disabled"
+            ></app-boolean-criterion>
+            <label class="text-body-10">{{ criterion.name }}</label>
+          </div>
+        }
       }
-      @if (criterion.type === "bool") {
-        <div class="rating__field">
-          <app-boolean-criterion
-            class="rating__input"
-            [formControlName]="criterion.id"
-            [disabled]="disabled"
-          ></app-boolean-criterion>
-          <label class="text-body-10">{{ criterion.name }}</label>
-        </div>
+    </section>
+    <section>
+      @for (criterion of criteria; track $index) {
+        @if (criterion.type === "str") {
+          <div class="rating__comment">
+            <app-textarea
+              size="big"
+              [formControlName]="criterion.id"
+              placeholder="Небольшой комментарий, если необходимо"
+              [maxLength]="50"
+            ></app-textarea>
+
+            @if (form.get(criterion.id.toString())?.errors?.["maxlength"]) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_TOO_LONG }}
+                максимум
+                {{ form.get(criterion.id.toString())?.errors?.["maxlength"]?.["requiredLength"] }}
+                символов
+              </div>
+            }
+          </div>
+        }
+      }
+    </section>
+  </form>
+} @else {
+  <form appFormLayout [formGroup]="form" class="rating">
+    <section class="rating__columns">
+      @for (criterion of criteria; track $index) {
+        @if (criterion.type === "int") {
+          <div class="rating__field">
+            <app-range-criterion-input
+              class="rating__input"
+              [max]="criterion.maxValue!"
+              [formControlName]="criterion.id"
+              [disabled]="disabled"
+            ></app-range-criterion-input>
+            <label class="text-body-10">{{ criterion.name }}</label>
+          </div>
+        }
+        @if (criterion.type === "bool") {
+          <div class="rating__field">
+            <app-boolean-criterion
+              class="rating__input"
+              [formControlName]="criterion.id"
+              [disabled]="disabled"
+            ></app-boolean-criterion>
+            <label class="text-body-10">{{ criterion.name }}</label>
+          </div>
+        }
       }
-    }
-  </section>
-  <section>
-    @for (criterion of criteria; track $index) {
-      @if (criterion.type === "str") {
-        <div class="rating__comment">
-          <app-textarea
-            size="big"
-            [formControlName]="criterion.id"
-            placeholder="Небольшой комментарий, если необходимо"
-            [maxLength]="50"
-          ></app-textarea>
+    </section>
+    <section>
+      @for (criterion of criteria; track $index) {
+        @if (criterion.type === "str") {
+          <div class="rating__comment">
+            <app-textarea
+              size="big"
+              [formControlName]="criterion.id"
+              placeholder="Небольшой комментарий, если необходимо"
+              [maxLength]="50"
+            ></app-textarea>
 
-          @if (form.get(criterion.id.toString())?.errors?.["maxlength"]) {
-            <div class="text-body-10 error">
-              {{ errorMessage.VALIDATION_TOO_LONG }}
-              максимум
-              {{ form.get(criterion.id.toString())?.errors?.["maxlength"]?.["requiredLength"] }}
-              символов
-            </div>
-          }
-        </div>
+            @if (form.get(criterion.id.toString())?.errors?.["maxlength"]) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_TOO_LONG }}
+                максимум
+                {{ form.get(criterion.id.toString())?.errors?.["maxlength"]?.["requiredLength"] }}
+                символов
+              </div>
+            }
+          </div>
+        }
       }
-    }
-  </section>
-</form>
+    </section>
+  </form>
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.scss
index 1bb316ea1..ae538640c 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/typography";
 @use "styles/responsive";
 
@@ -43,3 +44,22 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-mobile {
+    .rating__input {
+      flex-shrink: 0;
+    }
+
+    .rating__field label {
+      min-width: 0;
+      font-size: var(--ui-font-body);
+      line-height: 20px;
+    }
+
+    .rating .rating__comment app-textarea ::ng-deep .field__input {
+      font-size: var(--ui-font-h3) !important;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.ts b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.ts
index 3eeccd255..10d378b61 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/project-rating/project-rating.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FormLayoutDirective } from "@uilib";
+
 import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
@@ -34,6 +39,7 @@ import { ErrorMessage } from "@core/lib/models/error/error-message";
 @Component({
   selector: "app-project-rating",
   imports: [
+    FormLayoutDirective,
     CommonModule,
     TextareaComponent,
     RangeCriterionInputComponent,
@@ -57,6 +63,8 @@ import { ErrorMessage } from "@core/lib/models/error/error-message";
   ],
 })
 export class ProjectRatingComponent implements OnDestroy, ControlValueAccessor, Validator {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   @Input({ required: true })
   set criteria(val: ProjectRatingCriterion[]) {
     if (!val) return;
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.html b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.html
index d1d4c5346..e6b637d9f 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.html
@@ -1,161 +1,325 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  @if (project) {
+    <div class="card">
+      <div class="card__wrapper">
+        <div class="card__inner">
+          <div class="card__info">
+            <app-avatar
+              class="card__avatar"
+              [url]="project.imageAddress"
+              [hasBorder]="true"
+              [size]="(desktopMode$ | async) ? 50 : 38"
+            ></app-avatar>
 
-@if (project) {
-  <div class="card">
-    <div class="card__wrapper">
-      <div class="card__inner">
-        <div class="card__info">
-          <app-avatar
-            class="card__avatar"
-            [url]="project.imageAddress"
-            [hasBorder]="true"
-            [size]="(desktopMode$ | async) ? 50 : 38"
-          ></app-avatar>
-
-          <div class="card__naming">
-            <a [routerLink]="AppRoutes.projects.detail(project.id)">
-              <p class="text-body-12 card__naming--text">{{ project.name | truncate: 15 }}</p>
+            <div class="card__naming">
+              <a [routerLink]="AppRoutes.projects.detail(project.id)">
+                <p class="text-body-12 card__naming--text">{{ project.name | truncate: 15 }}</p>
+              </a>
+
+              @if (industryRepositoryGetOne(project.industry); as industry) {
+                <app-tag class="card__industry" color="complete">
+                  {{ industry.name }}
+                </app-tag>
+              }
+            </div>
+          </div>
+
+          @if (project.presentationAddress) {
+            <a class="card__presentation" [href]="project.presentationAddress" target="_blank">
+              <app-button
+                size="medium"
+                appearance="outline"
+                customTypographyClass="text-body-12"
+                (click)="openPresentation(project.presentationAddress)"
+              >
+                <span>презентация</span>
+                <i appIcon icon="arrow-down" appSquare="8"></i>
+              </app-button>
             </a>
+          }
+        </div>
 
-            @if (industryRepositoryGetOne(project.industry); as industry) {
-              <app-tag class="card__industry" color="complete">
-                {{ industry.name }}
-              </app-tag>
-            }
+        <div class="about">
+          <div class="about__top">
+            <p class="text-body-12 about__title">о проекте</p>
+            <i icon="folder" appIcon appSquare="12"></i>
           </div>
+          @if (project.description) {
+            <div class="text-body-10 about__text">
+              <p #descEl [innerHTML]="project.description | parseLinks | parseBreaks"></p>
+              @if (descriptionExpandable()) {
+                <div class="about__read-full text-body-10" (click)="onExpandDescription(descEl)">
+                  {{ readFullDescription() ? "скрыть" : "подробнее" }}
+                </div>
+              }
+            </div>
+          }
         </div>
 
-        @if (project.presentationAddress) {
-          <a class="card__presentation" [href]="project.presentationAddress" target="_blank">
+        <div class="card__experts">
+          <p class="text-body-12">{{ ratedCount() }} / {{ project.maxRates }}</p>
+          <i appIcon icon="person" appSquare="10"></i>
+        </div>
+      </div>
+
+      <div class="card__lower">
+        <div class="card__wrapper" [style.overflow-y]="isProjectCriterias() > 6 ? 'auto' : 'none'">
+          <div class="card__lower--info">
+            <p class="text-body-12">оценка проекта</p>
+            <i appIcon icon="medal" appWidth="8" appHeight="12"></i>
+          </div>
+          <app-project-rating
+            [criteria]="project.criterias"
+            [formControl]="form()"
+            [currentUserId]="profile()!.id"
+            [disabled]="isRatingFormDisabled()"
+          ></app-project-rating>
+          @if (form() | controlError: "required"; as error) {
+            <div class="text-body-10 error">
+              {{ error }}
+            </div>
+          }
+        </div>
+
+        @if (showRatingForm() || showRatedStatus() || showConfirmedState()) {
+          <div class="card__rated">
             <app-button
-              size="medium"
-              appearance="outline"
+              style="flex-grow: 1"
               customTypographyClass="text-body-12"
-              (click)="openPresentation(project.presentationAddress)"
+              size="big"
+              [loader]="submitLoading() || confirmLoading()"
+              [disabled]="isButtonDisabled()"
+              [style.opacity]="buttonOpacity()"
+              [color]="buttonColor()"
+              [title]="buttonTooltip()"
+              (click)="handleRateButtonClick()"
             >
-              <span>презентация</span>
-              <i appIcon icon="arrow-down" appSquare="8"></i>
+              {{ rateButtonText() }}
             </app-button>
-          </a>
-        }
-      </div>
 
-      <div class="about">
-        <div class="about__top">
-          <p class="text-body-12 about__title">о проекте</p>
-          <i icon="folder" appIcon appSquare="12"></i>
-        </div>
-        @if (project.description) {
-          <div class="text-body-10 about__text">
-            <p #descEl [innerHTML]="project.description | parseLinks | parseBreaks"></p>
-            @if (descriptionExpandable()) {
-              <div class="about__read-full text-body-10" (click)="onExpandDescription(descEl)">
-                {{ readFullDescription() ? "скрыть" : "подробнее" }}
-              </div>
+            @if (showEditButton()) {
+              <app-button
+                appearance="outline"
+                size="small"
+                type="icon"
+                class="card__rated--icon"
+                (click)="redoRating()"
+              >
+                <i appIcon icon="edit-pen" appSquare="10"></i>
+              </app-button>
             }
           </div>
         }
-      </div>
 
-      <div class="card__experts">
-        <p class="text-body-12">{{ ratedCount() }} / {{ project.maxRates }}</p>
-        <i appIcon icon="person" appSquare="10"></i>
+        <app-modal [open]="showConfirmRateModal()" (openChange)="toggleConfirmRateModal()">
+          <div class="cancel">
+            <div class="cancel__top">
+              <p class="cancel__title text-body-14">подтвердите оценку</p>
+
+              <div class="cancel__project">
+                <app-avatar [size]="50" [url]="project.imageAddress"></app-avatar>
+                <p class="text-body-12">{{ project.name }}</p>
+              </div>
+            </div>
+
+            <div class="cancel__criterias">
+              @if (showConfirmRateModal()) {
+                <app-project-rating
+                  [criteria]="project.criterias"
+                  [formControl]="form()"
+                  [disabled]="true"
+                ></app-project-rating>
+              }
+            </div>
+
+            <div class="cancel__buttons">
+              <app-button
+                size="big"
+                class="cancel__button"
+                customTypographyClass="text-body-12"
+                [disabled]="evaluationClosed()"
+                (click)="confirmRateProject()"
+              >
+                подтверждаю
+              </app-button>
+
+              <app-button
+                size="big"
+                class="cancel__button"
+                appearance="outline"
+                customTypographyClass="text-body-12"
+                (click)="closeConfirmRateModal()"
+              >
+                изменить оценку
+              </app-button>
+            </div>
+          </div>
+        </app-modal>
       </div>
     </div>
+  }
+} @else {
+  @if (project) {
+    <div class="card">
+      <div class="card__wrapper">
+        <div class="card__inner">
+          <div class="card__info">
+            <app-avatar
+              class="card__avatar"
+              [url]="project.imageAddress"
+              [hasBorder]="true"
+              [size]="(desktopMode$ | async) ? 50 : 38"
+            ></app-avatar>
 
-    <div class="card__lower">
-      <div class="card__wrapper" [style.overflow-y]="isProjectCriterias() > 6 ? 'auto' : 'none'">
-        <div class="card__lower--info">
-          <p class="text-body-12">оценка проекта</p>
-          <i appIcon icon="medal" appWidth="8" appHeight="12"></i>
-        </div>
-        <app-project-rating
-          [criteria]="project.criterias"
-          [formControl]="form()"
-          [currentUserId]="profile()!.id"
-          [disabled]="isRatingFormDisabled()"
-        ></app-project-rating>
-        @if (form() | controlError: "required"; as error) {
-          <div class="text-body-10 error">
-            {{ error }}
+            <div class="card__naming">
+              <a [routerLink]="AppRoutes.projects.detail(project.id)">
+                <p class="text-body-12 card__naming--text">
+                  {{ (desktopMode$ | async) ? (project.name | truncate: 15) : project.name }}
+                </p>
+              </a>
+
+              @if (industryRepositoryGetOne(project.industry); as industry) {
+                <app-tag class="card__industry" color="complete">
+                  {{ industry.name }}
+                </app-tag>
+              }
+            </div>
           </div>
-        }
-      </div>
 
-      @if (showRatingForm() || showRatedStatus() || showConfirmedState()) {
-        <div class="card__rated">
-          <app-button
-            style="flex-grow: 1"
-            customTypographyClass="text-body-12"
-            size="big"
-            [loader]="submitLoading() || confirmLoading()"
-            [disabled]="isButtonDisabled()"
-            [style.opacity]="buttonOpacity()"
-            [color]="buttonColor()"
-            [title]="buttonTooltip()"
-            (click)="handleRateButtonClick()"
-          >
-            {{ rateButtonText() }}
-          </app-button>
-
-          @if (showEditButton()) {
-            <app-button
-              appearance="outline"
-              size="small"
-              type="icon"
-              class="card__rated--icon"
-              (click)="redoRating()"
-            >
-              <i appIcon icon="edit-pen" appSquare="10"></i>
-            </app-button>
+          @if (project.presentationAddress) {
+            <a class="card__presentation" [href]="project.presentationAddress" target="_blank">
+              <app-button
+                size="medium"
+                appearance="outline"
+                customTypographyClass="text-body-12"
+                (click)="openPresentation(project.presentationAddress)"
+              >
+                <span>презентация</span>
+                <i appIcon icon="arrow-down" appSquare="8"></i>
+              </app-button>
+            </a>
           }
         </div>
-      }
-
-      <app-modal [open]="showConfirmRateModal()" (openChange)="toggleConfirmRateModal()">
-        <div class="cancel">
-          <div class="cancel__top">
-            <p class="cancel__title text-body-14">подтвердите оценку</p>
 
-            <div class="cancel__project">
-              <app-avatar [size]="50" [url]="project.imageAddress"></app-avatar>
-              <p class="text-body-12">{{ project.name }}</p>
-            </div>
+        <div class="about">
+          <div class="about__top">
+            <p class="text-body-12 about__title">о проекте</p>
+            <i icon="folder" appIcon appSquare="12"></i>
           </div>
+          @if (project.description) {
+            <div class="text-body-10 about__text">
+              <p #descEl [innerHTML]="project.description | parseLinks | parseBreaks"></p>
+              @if (descriptionExpandable()) {
+                <div class="about__read-full text-body-10" (click)="onExpandDescription(descEl)">
+                  {{ readFullDescription() ? "скрыть" : "подробнее" }}
+                </div>
+              }
+            </div>
+          }
+        </div>
 
-          <div class="cancel__criterias">
-            @if (showConfirmRateModal()) {
-              <app-project-rating
-                [criteria]="project.criterias"
-                [formControl]="form()"
-                [disabled]="true"
-              ></app-project-rating>
-            }
+        <div class="card__experts">
+          <p class="text-body-12">{{ ratedCount() }} / {{ project.maxRates }}</p>
+          <i appIcon icon="person" appSquare="10"></i>
+        </div>
+      </div>
+
+      <div class="card__lower">
+        <div class="card__wrapper" [style.overflow-y]="isProjectCriterias() > 6 ? 'auto' : 'none'">
+          <div class="card__lower--info">
+            <p class="text-body-12">оценка проекта</p>
+            <i appIcon icon="medal" appWidth="8" appHeight="12"></i>
           </div>
+          <app-project-rating
+            [criteria]="project.criterias"
+            [formControl]="form()"
+            [currentUserId]="profile()!.id"
+            [disabled]="isRatingFormDisabled()"
+          ></app-project-rating>
+          @if (form() | controlError: "required"; as error) {
+            <div class="text-body-10 error">
+              {{ error }}
+            </div>
+          }
+        </div>
 
-          <div class="cancel__buttons">
+        @if (showRatingForm() || showRatedStatus() || showConfirmedState()) {
+          <div class="card__rated">
             <app-button
-              size="big"
-              class="cancel__button"
+              style="flex-grow: 1"
               customTypographyClass="text-body-12"
-              [disabled]="evaluationClosed()"
-              (click)="confirmRateProject()"
-            >
-              подтверждаю
-            </app-button>
-
-            <app-button
               size="big"
-              class="cancel__button"
-              appearance="outline"
-              customTypographyClass="text-body-12"
-              (click)="closeConfirmRateModal()"
+              [loader]="submitLoading() || confirmLoading()"
+              [disabled]="isButtonDisabled()"
+              [style.opacity]="buttonOpacity()"
+              [color]="buttonColor()"
+              [title]="buttonTooltip()"
+              (click)="handleRateButtonClick()"
             >
-              изменить оценку
+              {{ rateButtonText() }}
             </app-button>
+
+            @if (showEditButton()) {
+              <app-button
+                appearance="outline"
+                size="small"
+                type="icon"
+                class="card__rated--icon"
+                (click)="redoRating()"
+              >
+                <i appIcon icon="edit-pen" appSquare="10"></i>
+              </app-button>
+            }
           </div>
-        </div>
-      </app-modal>
+        }
+
+        <app-modal [open]="showConfirmRateModal()" (openChange)="toggleConfirmRateModal()">
+          <div class="cancel">
+            <div class="cancel__top">
+              <p class="cancel__title text-body-14">подтвердите оценку</p>
+
+              <div class="cancel__project">
+                <app-avatar [size]="50" [url]="project.imageAddress"></app-avatar>
+                <p class="text-body-12">{{ project.name }}</p>
+              </div>
+            </div>
+
+            <div class="cancel__criterias">
+              @if (showConfirmRateModal()) {
+                <app-project-rating
+                  [criteria]="project.criterias"
+                  [formControl]="form()"
+                  [disabled]="true"
+                ></app-project-rating>
+              }
+            </div>
+
+            <div class="cancel__buttons">
+              <app-button
+                size="big"
+                class="cancel__button"
+                customTypographyClass="text-body-12"
+                [disabled]="evaluationClosed()"
+                (click)="confirmRateProject()"
+              >
+                подтверждаю
+              </app-button>
+
+              <app-button
+                size="big"
+                class="cancel__button"
+                appearance="outline"
+                customTypographyClass="text-body-12"
+                (click)="closeConfirmRateModal()"
+              >
+                изменить оценку
+              </app-button>
+            </div>
+          </div>
+        </app-modal>
+      </div>
     </div>
-  </div>
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.scss
index 054fa3ff3..ea27b370b 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -229,3 +228,38 @@
     justify-content: center;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-mobile {
+    .card__wrapper {
+      padding: 16px;
+    }
+
+    .card__inner,
+    .card__rated,
+    .card__experts,
+    .card__lower--info {
+      @include responsive.mobile-actions;
+    }
+
+    .card__info,
+    .card__naming {
+      min-width: 0;
+    }
+
+    .card__naming {
+      flex: 1;
+      width: auto;
+    }
+
+    .card__title {
+      overflow: visible;
+      overflow-wrap: anywhere;
+    }
+
+    .cancel__project {
+      flex-wrap: wrap;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.ts b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.ts
index 5514b0c5c..8b0ac42cc 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/rating-card/rating-card.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import {
   AfterViewInit,
   Component,
@@ -51,6 +54,8 @@ import { map } from "rxjs";
   providers: [RatingCardService, ExpandService],
 })
 export class RatingCardComponent implements AfterViewInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly ratingCardService = inject(RatingCardService);
   private readonly expandService = inject(ExpandService);
   private readonly breakpointObserver = inject(BreakpointObserver);
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/main/main.component.html b/projects/social_platform/src/app/ui/pages/program/detail/main/main.component.html
index 8363c9905..44c7be615 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/main/main.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/main/main.component.html
@@ -15,7 +15,7 @@
         </div>
       } @else {
         <div class="program__details">
-          @if (appWidth > 1000) {
+          @if (appWidth !== 1000) {
             <div class="program__left">
               <aside class="program__aside">
                 @if (
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/main/main.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/main/main.component.scss
index 88b8850b9..e013b199c 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/main/main.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/main/main.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -208,3 +209,21 @@
     margin-top: 20px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .program__left {
+      width: 100%;
+      margin-bottom: 16px;
+    }
+
+    .program__details {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .program__content {
+      min-width: 0;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.html b/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.html
index 3de919221..997bb9346 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.html
@@ -1,201 +1,412 @@
 <!-- @format -->
-
-<section
-  class="widget"
-  aria-label="Аналитика программы"
-  [attr.aria-busy]="state().status === 'loading'"
->
-  <header class="widget__header">
-    <h3>аналитика</h3>
-    <span class="widget__badge">{{ data() ? roleNames[data()!.role] : " " }}</span>
-  </header>
-  @if (data(); as data) {
-    <div class="widget__body">
-      @switch (data.role) {
-        @case ("participant") {
-          @let participant = data.participant;
-          @let project = participant.participantProject;
-          @let caseText =
-            participant.caseProvided
-              ? participant.caseName
-                ? "Кейс: " + participant.caseName
-                : "Кейс не выбран"
-              : "Кейсы не предусмотрены";
-          <div class="widget__project-lines">
-            @if (participant.caseName) {
-              <span
-                class="widget__detail-row"
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <section
+    class="widget"
+    aria-label="Аналитика программы"
+    [attr.aria-busy]="state().status === 'loading'"
+  >
+    <header class="widget__header">
+      <h3>аналитика</h3>
+      <span class="widget__badge">{{ data() ? roleNames[data()!.role] : " " }}</span>
+    </header>
+    @if (data(); as data) {
+      <div class="widget__body">
+        @switch (data.role) {
+          @case ("participant") {
+            @let participant = data.participant;
+            @let project = participant.participantProject;
+            @let caseText =
+              participant.caseProvided
+                ? participant.caseName
+                  ? "Кейс: " + participant.caseName
+                  : "Кейс не выбран"
+                : "Кейсы не предусмотрены";
+            <div class="widget__project-lines">
+              @if (participant.caseName) {
+                <span
+                  class="widget__detail-row"
+                  tabindex="0"
+                  [matTooltip]="caseText"
+                  [attr.aria-label]="caseText"
+                >
+                  <span class="widget__label">Кейс:</span
+                  ><span class="widget__ellipsis">{{ participant.caseName }}</span>
+                </span>
+              } @else {
+                <span class="widget__empty">{{ caseText }}</span>
+              }
+              @if (project) {
+                <a
+                  class="widget__detail-row"
+                  [routerLink]="routes.projects.detail(project.id)"
+                  [queryParams]="{ programLinkId: project.programLinkId }"
+                  [matTooltip]="'Проект: ' + project.name"
+                >
+                  <span class="widget__label">Проект:</span
+                  ><span class="widget__ellipsis">{{ project.name }}</span>
+                </a>
+              } @else {
+                <span class="widget__empty">Проект не подан</span>
+              }
+            </div>
+            <div class="widget__stage-state">
+              @if (participant.stage === "not_submitted") {
+                Не отправлен
+              }
+              @if (participant.stage === "not_applicable") {
+                Сдача не предусмотрена
+              }
+            </div>
+            <ol class="widget__steps" aria-label="Этапы проекта">
+              @for (step of steps(participant.stage); track step.label) {
+                <li
+                  [class.widget__step--current]="step.current"
+                  [class.widget__step--complete]="step.completed"
+                  [attr.aria-current]="step.current ? 'step' : null"
+                >
+                  <span class="widget__dot" aria-hidden="true">{{
+                    step.completed ? "✓" : ""
+                  }}</span>
+                  <span>{{ step.label }}</span>
+                </li>
+              }
+            </ol>
+          }
+          @case ("organizer") {
+            @let metrics = data.organizer;
+            @let ratio = withoutProject(metrics);
+            <dl class="widget__metrics widget__metrics--organizer">
+              <div>
+                <dt>Участники</dt>
+                <dd tabindex="0" [matTooltip]="'' + metrics.participants">
+                  {{ count(metrics.participants) }}
+                </dd>
+              </div>
+              <div>
+                <dt>Проекты</dt>
+                <dd tabindex="0" [matTooltip]="'' + metrics.projects">
+                  {{ count(metrics.projects) }}
+                </dd>
+              </div>
+              <div>
+                <dt tabindex="0" matTooltip="Отправленные решения">Сдано<br />решений</dt>
+                <dd
+                  tabindex="0"
+                  [matTooltip]="
+                    data.isCompetitive ? '' + metrics.submittedSolutions : 'Сдача не предусмотрена'
+                  "
+                >
+                  {{ count(metrics.submittedSolutions) }}
+                </dd>
+              </div>
+              <div>
+                <dt>Без проектов</dt>
+                <dd
+                  class="widget__without"
+                  tabindex="0"
+                  [matTooltip]="ratio.description"
+                  [attr.aria-label]="ratio.description + ', ' + ratio.percentage"
+                >
+                  <span>{{ count(metrics.participantsWithoutProject) }}</span>
+                  <small [attr.data-tone]="ratio.tone"
+                    ><i aria-hidden="true"></i>{{ ratio.percentage }}</small
+                  >
+                </dd>
+              </div>
+            </dl>
+          }
+          @case ("expert") {
+            <dl class="widget__metrics">
+              <div>
+                <dt>Назначено<br />проектов</dt>
+                <dd
+                  tabindex="0"
+                  [matTooltip]="
+                    data.expert.assigned === null ? 'Неприменимо' : '' + data.expert.assigned
+                  "
+                >
+                  {{ count(data.expert.assigned) }}
+                </dd>
+              </div>
+              <div>
+                <dt>Осталось<br />оценить</dt>
+                <dd
+                  tabindex="0"
+                  [matTooltip]="
+                    data.expert.remaining === null ? 'Неприменимо' : '' + data.expert.remaining
+                  "
+                >
+                  {{ count(data.expert.remaining) }}
+                </dd>
+              </div>
+            </dl>
+            @if (expertState(); as status) {
+              <p
+                class="widget__expert-state"
                 tabindex="0"
-                [matTooltip]="caseText"
-                [attr.aria-label]="caseText"
+                [attr.data-tone]="status.tone"
+                [matTooltip]="status.text + (status.tooltip ? '. ' + status.tooltip : '')"
               >
-                <span class="widget__label">Кейс:</span
-                ><span class="widget__ellipsis">{{ participant.caseName }}</span>
-              </span>
-            } @else {
-              <span class="widget__empty">{{ caseText }}</span>
+                @if (status.label) {
+                  <span class="widget__status-label">{{ status.label }}</span>
+                }
+                <span
+                  class="widget__status-value"
+                  [class.widget__status-value--time]="status.countdown"
+                  >{{ status.value }}</span
+                >
+              </p>
             }
-            @if (project) {
+          }
+        }
+      </div>
+      <footer class="widget__footer">
+        @switch (data.role) {
+          @case ("organizer") {
+            <a [routerLink]="routes.program.analytics(data.programId)">Открыть →</a>
+          }
+          @case ("expert") {
+            <a [routerLink]="routes.program.projectsRating(data.programId)">Открыть →</a>
+          }
+          @case ("participant") {
+            @if (data.participant.participantProject; as project) {
               <a
-                class="widget__detail-row"
                 [routerLink]="routes.projects.detail(project.id)"
                 [queryParams]="{ programLinkId: project.programLinkId }"
-                [matTooltip]="'Проект: ' + project.name"
+                >Открыть →</a
               >
-                <span class="widget__label">Проект:</span
-                ><span class="widget__ellipsis">{{ project.name }}</span>
-              </a>
+            } @else if (data.participant.submissionOpen) {
+              <button type="button" [disabled]="applicationPending()" (click)="createApplication()">
+                Создать заявку →
+              </button>
             } @else {
-              <span class="widget__empty">Проект не подан</span>
-            }
-          </div>
-          <div class="widget__stage-state">
-            @if (participant.stage === "not_submitted") {
-              Не отправлен
+              <span>Срок подачи закрыт</span>
             }
-            @if (participant.stage === "not_applicable") {
-              Сдача не предусмотрена
-            }
-          </div>
-          <ol class="widget__steps" aria-label="Этапы проекта">
-            @for (step of steps(participant.stage); track step.label) {
-              <li
-                [class.widget__step--current]="step.current"
-                [class.widget__step--complete]="step.completed"
-                [attr.aria-current]="step.current ? 'step' : null"
-              >
-                <span class="widget__dot" aria-hidden="true">{{ step.completed ? "✓" : "" }}</span>
-                <span>{{ step.label }}</span>
-              </li>
-            }
-          </ol>
+          }
         }
-        @case ("organizer") {
-          @let metrics = data.organizer;
-          @let ratio = withoutProject(metrics);
-          <dl class="widget__metrics widget__metrics--organizer">
-            <div>
-              <dt>Участники</dt>
-              <dd tabindex="0" [matTooltip]="'' + metrics.participants">
-                {{ count(metrics.participants) }}
-              </dd>
-            </div>
-            <div>
-              <dt>Проекты</dt>
-              <dd tabindex="0" [matTooltip]="'' + metrics.projects">
-                {{ count(metrics.projects) }}
-              </dd>
+      </footer>
+    } @else if (state(); as state) {
+      @if (state.status === "failure") {
+        <p class="widget__error" role="status">{{ errorMessages[state.error] }}</p>
+        <footer class="widget__footer">
+          @if (state.error === "network") {
+            <button type="button" (click)="service.retry()">Повторить</button>
+          }
+        </footer>
+      } @else {
+        <div class="widget__skeleton" aria-label="Загрузка аналитики">
+          <span></span><span></span><span></span>
+        </div>
+        <footer class="widget__footer"></footer>
+      }
+    }
+  </section>
+} @else {
+  <section
+    class="widget"
+    aria-label="Аналитика программы"
+    [attr.aria-busy]="state().status === 'loading'"
+  >
+    <header class="widget__header">
+      <h3>аналитика</h3>
+      <span class="widget__badge">{{ data() ? roleNames[data()!.role] : " " }}</span>
+    </header>
+    @if (data(); as data) {
+      <div class="widget__body">
+        @switch (data.role) {
+          @case ("participant") {
+            @let participant = data.participant;
+            @let project = participant.participantProject;
+            @let caseText =
+              participant.caseProvided
+                ? participant.caseName
+                  ? "Кейс: " + participant.caseName
+                  : "Кейс не выбран"
+                : "Кейсы не предусмотрены";
+            <div class="widget__project-lines">
+              @if (participant.caseName) {
+                <span
+                  class="widget__detail-row"
+                  tabindex="0"
+                  [matTooltip]="caseText"
+                  [attr.aria-label]="caseText"
+                >
+                  <span class="widget__label">Кейс:</span
+                  ><span class="widget__ellipsis">{{ participant.caseName }}</span>
+                </span>
+              } @else {
+                <span class="widget__empty">{{ caseText }}</span>
+              }
+              @if (project) {
+                <a
+                  class="widget__detail-row"
+                  [routerLink]="routes.projects.detail(project.id)"
+                  [queryParams]="{ programLinkId: project.programLinkId }"
+                  [matTooltip]="'Проект: ' + project.name"
+                >
+                  <span class="widget__label">Проект:</span
+                  ><span class="widget__ellipsis">{{ project.name }}</span>
+                </a>
+              } @else {
+                <span class="widget__empty">Проект не подан</span>
+              }
             </div>
-            <div>
-              <dt tabindex="0" matTooltip="Отправленные решения">Сдано<br />решений</dt>
-              <dd
-                tabindex="0"
-                [matTooltip]="
-                  data.isCompetitive ? '' + metrics.submittedSolutions : 'Сдача не предусмотрена'
-                "
-              >
-                {{ count(metrics.submittedSolutions) }}
-              </dd>
+            <div class="widget__stage-state">
+              @if (participant.stage === "not_submitted") {
+                Не отправлен
+              }
+              @if (participant.stage === "not_applicable") {
+                Сдача не предусмотрена
+              }
             </div>
-            <div>
-              <dt>Без проектов</dt>
-              <dd
-                class="widget__without"
+            <ol class="widget__steps" aria-label="Этапы проекта">
+              @for (step of steps(participant.stage); track step.label) {
+                <li
+                  [class.widget__step--current]="step.current"
+                  [class.widget__step--complete]="step.completed"
+                  [attr.aria-current]="step.current ? 'step' : null"
+                >
+                  <span class="widget__dot" aria-hidden="true">{{
+                    step.completed ? "✓" : ""
+                  }}</span>
+                  <span>{{ step.label }}</span>
+                </li>
+              }
+            </ol>
+          }
+          @case ("organizer") {
+            @let metrics = data.organizer;
+            @let ratio = withoutProject(metrics);
+            <dl class="widget__metrics widget__metrics--organizer">
+              <div>
+                <dt>Участники</dt>
+                <dd tabindex="0" [matTooltip]="'' + metrics.participants">
+                  {{ count(metrics.participants) }}
+                </dd>
+              </div>
+              <div>
+                <dt>Проекты</dt>
+                <dd tabindex="0" [matTooltip]="'' + metrics.projects">
+                  {{ count(metrics.projects) }}
+                </dd>
+              </div>
+              <div>
+                <dt tabindex="0" matTooltip="Отправленные решения">Сдано<br />решений</dt>
+                <dd
+                  tabindex="0"
+                  [matTooltip]="
+                    data.isCompetitive ? '' + metrics.submittedSolutions : 'Сдача не предусмотрена'
+                  "
+                >
+                  {{ count(metrics.submittedSolutions) }}
+                </dd>
+              </div>
+              <div>
+                <dt>Без проектов</dt>
+                <dd
+                  class="widget__without"
+                  tabindex="0"
+                  [matTooltip]="ratio.description"
+                  [attr.aria-label]="ratio.description + ', ' + ratio.percentage"
+                >
+                  <span>{{ count(metrics.participantsWithoutProject) }}</span>
+                  <small [attr.data-tone]="ratio.tone"
+                    ><i aria-hidden="true"></i>{{ ratio.percentage }}</small
+                  >
+                </dd>
+              </div>
+            </dl>
+          }
+          @case ("expert") {
+            <dl class="widget__metrics">
+              <div>
+                <dt>Назначено<br />проектов</dt>
+                <dd
+                  tabindex="0"
+                  [matTooltip]="
+                    data.expert.assigned === null ? 'Неприменимо' : '' + data.expert.assigned
+                  "
+                >
+                  {{ count(data.expert.assigned) }}
+                </dd>
+              </div>
+              <div>
+                <dt>Осталось<br />оценить</dt>
+                <dd
+                  tabindex="0"
+                  [matTooltip]="
+                    data.expert.remaining === null ? 'Неприменимо' : '' + data.expert.remaining
+                  "
+                >
+                  {{ count(data.expert.remaining) }}
+                </dd>
+              </div>
+            </dl>
+            @if (expertState(); as status) {
+              <p
+                class="widget__expert-state"
                 tabindex="0"
-                [matTooltip]="ratio.description"
-                [attr.aria-label]="ratio.description + ', ' + ratio.percentage"
+                [attr.data-tone]="status.tone"
+                [matTooltip]="status.text + (status.tooltip ? '. ' + status.tooltip : '')"
               >
-                <span>{{ count(metrics.participantsWithoutProject) }}</span>
-                <small [attr.data-tone]="ratio.tone"
-                  ><i aria-hidden="true"></i>{{ ratio.percentage }}</small
+                @if (status.label) {
+                  <span class="widget__status-label">{{ status.label }}</span>
+                }
+                <span
+                  class="widget__status-value"
+                  [class.widget__status-value--time]="status.countdown"
+                  >{{ status.value }}</span
                 >
-              </dd>
-            </div>
-          </dl>
+              </p>
+            }
+          }
         }
-        @case ("expert") {
-          <dl class="widget__metrics">
-            <div>
-              <dt>Назначено<br />проектов</dt>
-              <dd
-                tabindex="0"
-                [matTooltip]="
-                  data.expert.assigned === null ? 'Неприменимо' : '' + data.expert.assigned
-                "
-              >
-                {{ count(data.expert.assigned) }}
-              </dd>
-            </div>
-            <div>
-              <dt>Осталось<br />оценить</dt>
-              <dd
-                tabindex="0"
-                [matTooltip]="
-                  data.expert.remaining === null ? 'Неприменимо' : '' + data.expert.remaining
-                "
+      </div>
+      <footer class="widget__footer">
+        @switch (data.role) {
+          @case ("organizer") {
+            <a [routerLink]="routes.program.analytics(data.programId)">Открыть →</a>
+          }
+          @case ("expert") {
+            <a [routerLink]="routes.program.projectsRating(data.programId)">Открыть →</a>
+          }
+          @case ("participant") {
+            @if (data.participant.participantProject; as project) {
+              <a
+                [routerLink]="routes.projects.detail(project.id)"
+                [queryParams]="{ programLinkId: project.programLinkId }"
+                >Открыть →</a
               >
-                {{ count(data.expert.remaining) }}
-              </dd>
-            </div>
-          </dl>
-          @if (expertState(); as status) {
-            <p
-              class="widget__expert-state"
-              tabindex="0"
-              [attr.data-tone]="status.tone"
-              [matTooltip]="status.text + (status.tooltip ? '. ' + status.tooltip : '')"
-            >
-              @if (status.label) {
-                <span class="widget__status-label">{{ status.label }}</span>
-              }
-              <span
-                class="widget__status-value"
-                [class.widget__status-value--time]="status.countdown"
-                >{{ status.value }}</span
+            } @else if (data.participant.submissionOpen) {
+              <button
+                appButton="primary"
+                type="button"
+                [disabled]="applicationPending()"
+                (click)="createApplication()"
               >
-            </p>
+                Создать заявку →
+              </button>
+            } @else {
+              <span>Срок подачи закрыт</span>
+            }
           }
         }
-      }
-    </div>
-    <footer class="widget__footer">
-      @switch (data.role) {
-        @case ("organizer") {
-          <a [routerLink]="routes.program.analytics(data.programId)">Открыть →</a>
-        }
-        @case ("expert") {
-          <a [routerLink]="routes.program.projectsRating(data.programId)">Открыть →</a>
-        }
-        @case ("participant") {
-          @if (data.participant.participantProject; as project) {
-            <a
-              [routerLink]="routes.projects.detail(project.id)"
-              [queryParams]="{ programLinkId: project.programLinkId }"
-              >Открыть →</a
-            >
-          } @else if (data.participant.submissionOpen) {
-            <button type="button" [disabled]="applicationPending()" (click)="createApplication()">
-              Создать заявку →
-            </button>
-          } @else {
-            <span>Срок подачи закрыт</span>
+      </footer>
+    } @else if (state(); as state) {
+      @if (state.status === "failure") {
+        <p class="widget__error" role="status">{{ errorMessages[state.error] }}</p>
+        <footer class="widget__footer">
+          @if (state.error === "network") {
+            <button appButton="secondary" type="button" (click)="service.retry()">Повторить</button>
           }
-        }
+        </footer>
+      } @else {
+        <div class="widget__skeleton" aria-label="Загрузка аналитики">
+          <span></span><span></span><span></span>
+        </div>
+        <footer class="widget__footer"></footer>
       }
-    </footer>
-  } @else if (state(); as state) {
-    @if (state.status === "failure") {
-      <p class="widget__error" role="status">{{ errorMessages[state.error] }}</p>
-      <footer class="widget__footer">
-        @if (state.error === "network") {
-          <button type="button" (click)="service.retry()">Повторить</button>
-        }
-      </footer>
-    } @else {
-      <div class="widget__skeleton" aria-label="Загрузка аналитики">
-        <span></span><span></span><span></span>
-      </div>
-      <footer class="widget__footer"></footer>
     }
-  }
-</section>
+  </section>
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss
index d809a58b6..f7c6d2b53 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.scss
@@ -1,3 +1,6 @@
+/** @format */
+@use "styles/responsive";
+
 :host {
   display: block;
   width: 157px;
@@ -292,3 +295,66 @@
     outline-offset: 1px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .widget {
+    font-size: var(--ui-font-caption);
+
+    h3 {
+      font-size: var(--ui-font-small);
+    }
+
+    &__stage-state {
+      font-size: var(--ui-font-caption);
+    }
+
+    dt {
+      font-size: var(--ui-font-caption);
+    }
+
+    dd {
+      font-size: var(--ui-font-body);
+    }
+
+    &__expert-state {
+      font-size: var(--ui-font-caption);
+    }
+
+    &__status-value--time {
+      font-size: var(--ui-font-small);
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    :host {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .widget {
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      gap: 12px;
+      height: auto;
+      min-height: 160px;
+      padding: 16px;
+      font-size: var(--ui-font-body);
+      line-height: 1.5;
+    }
+
+    .widget__footer a,
+    .widget__footer button {
+      min-height: 44px;
+      font-size: var(--ui-font-body);
+    }
+
+    .widget__ellipsis {
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .widget__badge {
+      font-size: var(--ui-font-small);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.ts b/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.ts
index b60876ab2..717a4e986 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/main/role-widget/program-role-widget.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -22,13 +27,15 @@ import { DetailProgramInfoService } from "@ui/widgets/detail/services/program/de
 /** Компактный виджет только страницы программы. Габариты соответствуют исходному SoonCard. */
 @Component({
   selector: "app-program-role-widget",
-  imports: [RouterLink, MatTooltipModule],
+  imports: [ButtonDirective, RouterLink, MatTooltipModule],
   providers: [ProgramRoleWidgetService],
   templateUrl: "./program-role-widget.component.html",
   styleUrl: "./program-role-widget.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProgramRoleWidgetComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly service = inject(ProgramRoleWidgetService);
   private readonly applicationAction = inject(DetailProgramInfoService);
   readonly applicationPending = this.applicationAction.applicationPending;
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/register/register.component.html b/projects/social_platform/src/app/ui/pages/program/detail/register/register.component.html
index b5f036c32..efe44b807 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/register/register.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/register/register.component.html
@@ -1,24 +1,49 @@
 <!-- @format -->
-
-<div class="register">
-  <app-bar class="bar register__bar" [backHave]="true" [links]="[]"></app-bar>
-  @if (registerForm && schema) {
-    <form class="register__form form" [formGroup]="registerForm">
-      @for (f of schema | keyvalue; track f.key) {
-        <fieldset class="form__fieldset">
-          <label [for]="f.key" class="field-label">{{ f.value.name }}</label>
-          @if (registerForm.get(f.key); as field) {
-            <app-input
-              size="big"
-              [id]="f.key"
-              [formControlName]="f.key"
-              [placeholder]="f.value.placeholder"
-              [error]="field | controlError"
-            ></app-input>
-          }
-        </fieldset>
-      }
-      <app-button size="big" (click)="onSubmit()">Зарегистрироваться в программе</app-button>
-    </form>
-  }
-</div>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="register">
+    <app-bar class="bar register__bar" [backHave]="true" [links]="[]"></app-bar>
+    @if (registerForm && schema) {
+      <form class="register__form form" [formGroup]="registerForm">
+        @for (f of schema | keyvalue; track f.key) {
+          <fieldset class="form__fieldset">
+            <label [for]="f.key" class="field-label">{{ f.value.name }}</label>
+            @if (registerForm.get(f.key); as field) {
+              <app-input
+                size="big"
+                [id]="f.key"
+                [formControlName]="f.key"
+                [placeholder]="f.value.placeholder"
+                [error]="field | controlError"
+              ></app-input>
+            }
+          </fieldset>
+        }
+        <app-button size="big" (click)="onSubmit()">Зарегистрироваться в программе</app-button>
+      </form>
+    }
+  </div>
+} @else {
+  <div class="register">
+    <app-bar class="bar register__bar" [backHave]="true" [links]="[]"></app-bar>
+    @if (registerForm && schema) {
+      <form appFormLayout class="register__form form" [formGroup]="registerForm">
+        @for (f of schema | keyvalue; track f.key) {
+          <fieldset class="form__fieldset">
+            <label [for]="f.key" class="field-label">{{ f.value.name }}</label>
+            @if (registerForm.get(f.key); as field) {
+              <app-input
+                size="big"
+                [id]="f.key"
+                [formControlName]="f.key"
+                [placeholder]="f.value.placeholder"
+                [error]="field | controlError"
+              ></app-input>
+            }
+          </fieldset>
+        }
+        <app-button size="big" (click)="onSubmit()">Зарегистрироваться в программе</app-button>
+      </form>
+    }
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/register/register.component.ts b/projects/social_platform/src/app/ui/pages/program/detail/register/register.component.ts
index bb2fd6b44..0066e9c2f 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/register/register.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/register/register.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FormLayoutDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, OnInit, inject, DestroyRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { map } from "rxjs";
@@ -19,6 +24,7 @@ import { AppRoutes } from "@api/paths/app-routes";
   templateUrl: "./register.component.html",
   styleUrl: "./register.component.scss",
   imports: [
+    FormLayoutDirective,
     ReactiveFormsModule,
     InputComponent,
     ButtonComponent,
@@ -29,6 +35,8 @@ import { AppRoutes } from "@api/paths/app-routes";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProgramRegisterComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly logger = inject(LoggerService);
   private readonly destroyRef = inject(DestroyRef);
   private readonly registerProgramUseCase = inject(RegisterProgramUseCase);
diff --git a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html
index 44b2272c1..a93a6154b 100644
--- a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.html
@@ -1,44 +1,131 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  @if (program()) {
+    <div class="card">
+      <div class="card__photo">
+        <app-avatar [url]="program().imageAddress" [size]="100"></app-avatar>
+      </div>
 
-@if (program()) {
-  <div class="card">
-    <div class="card__photo">
-      <app-avatar [url]="program().imageAddress" [size]="100"></app-avatar>
-    </div>
+      <div class="card__info">
+        <p class="text-body-10 card__name" style="padding-left: 25px">{{ program().name }}</p>
 
-    <div class="card__info">
-      <p class="text-body-10 card__name" style="padding-left: 25px">{{ program().name }}</p>
-
-      <p
-        class="text-body-10 card__description card__registration"
-        [ngClass]="{
-          'card__registration--ended': registerDateExpired,
-          'card__registration--participating': !registerDateExpired && program().isUserMember,
-          'card__registration--actual':
-            !registerDateExpired && (!program().isUserMember || !program().isUserManager),
-        }"
-      >
-        <!-- ? "Регистрация до:" + " " + (program.datetimeRegistrationEnds | date: "dd MMMM") -->
-        {{
-          registerDateExpired
-            ? "регистрация завершена"
-            : program().isUserMember
-              ? "ты уже участвуешь!"
-              : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM")
-        }}
-      </p>
-
-      <div class="card__dates">
-        <p class="text-body-10 card__description" style="padding-left: 25px">
-          {{ program().datetimeStarted | date: "dd.MM.yyyy" }}
-        </p>
-        <p class="text-body-10 card__description">-</p>
-        <p class="text-body-10 card__description">
-          {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
+        <p
+          class="text-body-10 card__description card__registration"
+          [ngClass]="{
+            'card__registration--ended': registerDateExpired,
+            'card__registration--participating': !registerDateExpired && program().isUserMember,
+            'card__registration--actual':
+              !registerDateExpired && (!program().isUserMember || !program().isUserManager),
+          }"
+        >
+          <!-- ? "Регистрация до:" + " " + (program.datetimeRegistrationEnds | date: "dd MMMM") -->
+          {{
+            registerDateExpired
+              ? "регистрация завершена"
+              : program().isUserMember
+                ? "ты уже участвуешь!"
+                : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM")
+          }}
         </p>
-        <!-- TODO: изменить когда на бэке для программ будет возможность для регионов поле -->
-        <p class="text-body-10 card__description">• для всей России</p>
+
+        <div class="card__dates">
+          <p class="text-body-10 card__description" style="padding-left: 25px">
+            {{ program().datetimeStarted | date: "dd.MM.yyyy" }}
+          </p>
+          <p class="text-body-10 card__description">-</p>
+          <p class="text-body-10 card__description">
+            {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
+          </p>
+          <!-- TODO: изменить когда на бэке для программ будет возможность для регионов поле -->
+          <p class="text-body-10 card__description">• для всей России</p>
+        </div>
       </div>
     </div>
-  </div>
+  }
+} @else {
+  @if (desktopLayout()) {
+    @if (program()) {
+      <div class="card">
+        <div class="card__photo">
+          <app-avatar [url]="program().imageAddress" [size]="100"></app-avatar>
+        </div>
+
+        <div class="card__info">
+          <p class="text-body-10 card__name" style="padding-left: 25px">{{ program().name }}</p>
+
+          <p
+            class="text-body-10 card__description card__registration"
+            [ngClass]="{
+              'card__registration--ended': registerDateExpired,
+              'card__registration--participating': !registerDateExpired && program().isUserMember,
+              'card__registration--actual':
+                !registerDateExpired && (!program().isUserMember || !program().isUserManager),
+            }"
+          >
+            <!-- ? "Регистрация до:" + " " + (program.datetimeRegistrationEnds | date: "dd MMMM") -->
+            {{
+              registerDateExpired
+                ? "регистрация завершена"
+                : program().isUserMember
+                  ? "ты уже участвуешь!"
+                  : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM")
+            }}
+          </p>
+
+          <div class="card__dates">
+            <p class="text-body-10 card__description" style="padding-left: 25px">
+              {{ program().datetimeStarted | date: "dd.MM.yyyy" }}
+            </p>
+            <p class="text-body-10 card__description">-</p>
+            <p class="text-body-10 card__description">
+              {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
+            </p>
+            <!-- TODO: изменить когда на бэке для программ будет возможность для регионов поле -->
+            <p class="text-body-10 card__description">• для всей России</p>
+          </div>
+        </div>
+      </div>
+    }
+  } @else {
+    @if (program()) {
+      <div appCard [interactive]="true" class="card">
+        <div class="card__photo">
+          <app-avatar [url]="program().imageAddress" [size]="64"></app-avatar>
+        </div>
+
+        <div class="card__info">
+          <h3 class="card__name" [title]="program().name">{{ program().name }}</h3>
+
+          <p
+            class="card__description card__registration"
+            [ngClass]="{
+              'card__registration--ended': registerDateExpired,
+              'card__registration--participating': !registerDateExpired && program().isUserMember,
+              'card__registration--actual':
+                !registerDateExpired && (!program().isUserMember || !program().isUserManager),
+            }"
+          >
+            <!-- ? "Регистрация до:" + " " + (program.datetimeRegistrationEnds | date: "dd MMMM") -->
+            {{
+              registerDateExpired
+                ? "регистрация завершена"
+                : program().isUserMember
+                  ? "ты уже участвуешь!"
+                  : "Регистрация до " + (program().datetimeRegistrationEnds | date: "dd MMMM")
+            }}
+          </p>
+
+          <div class="card__dates">
+            <p class="card__description">
+              {{ program().datetimeStarted | date: "dd.MM.yyyy" }} -
+              {{ program().datetimeFinished | date: "dd.MM.yyyy" }}
+            </p>
+            <!-- TODO: изменить когда на бэке для программ будет возможность для регионов поле -->
+            <p class="card__description card__region">для всей России</p>
+          </div>
+        </div>
+      </div>
+    }
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss
index f502e2593..03c46451d 100644
--- a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.scss
@@ -1,6 +1,6 @@
 /** @format */
-
 @use "styles/responsive";
+@use "styles/ui-foundation";
 
 .card {
   position: relative;
@@ -72,3 +72,53 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .card {
+    @include ui-foundation.card;
+
+    display: grid;
+    grid-template-columns: 64px minmax(0, 1fr);
+    gap: 12px;
+    align-items: start;
+
+    &__photo {
+      width: 64px;
+      height: 64px;
+    }
+
+    &__info {
+      display: grid;
+      gap: 8px;
+    }
+
+    &__name {
+      /* stylelint-disable-next-line value-no-vendor-prefix */
+      display: -webkit-box;
+      font-size: var(--ui-font-body);
+      font-weight: 600;
+      line-height: 20px;
+      overflow-wrap: anywhere;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+    }
+
+    &__dates {
+      display: grid;
+      gap: 4px;
+    }
+
+    &__description {
+      font-size: var(--ui-font-small);
+      line-height: 18px;
+    }
+
+    &__registration {
+      justify-self: start;
+      max-width: 100%;
+      padding: 4px 8px;
+      overflow-wrap: anywhere;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts
index c9f69ed0d..fca226d1e 100644
--- a/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/main/program-card/program-card.component.ts
@@ -1,6 +1,13 @@
 /** @format */
 
-import { ChangeDetectionStrategy, Component, input, Input, OnInit } from "@angular/core";
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { DesktopLayoutService } from "@uilib";
+
+import { CardDirective } from "@uilib";
+
+import { ChangeDetectionStrategy, Component, inject, input, Input, OnInit } from "@angular/core";
 import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
 import { DatePipe, NgClass } from "@angular/common";
 import { Program } from "@domain/program/program.model";
@@ -10,10 +17,14 @@ import { Program } from "@domain/program/program.model";
   selector: "app-program-card",
   templateUrl: "./program-card.component.html",
   styleUrl: "./program-card.component.scss",
-  imports: [AvatarComponent, DatePipe, NgClass],
+  imports: [CardDirective, AvatarComponent, DatePipe, NgClass],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProgramCardComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+
   readonly program = input.required<Program>();
 
   ngOnInit(): void {
diff --git a/projects/social_platform/src/app/ui/pages/program/program.component.html b/projects/social_platform/src/app/ui/pages/program/program.component.html
index 92428d0c2..b2cb4c50f 100644
--- a/projects/social_platform/src/app/ui/pages/program/program.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/program.component.html
@@ -1,13 +1,27 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <main class="page">
+    <div class="page__bar">
+      <app-back namespace="программы" path="/office/feed"></app-back>
 
-<main class="page">
-  <div class="page__bar">
-    <app-back namespace="программы" path="/office/feed"></app-back>
+      <form class="page__search" [formGroup]="searchForm">
+        <app-search formControlName="search"></app-search>
+      </form>
+    </div>
 
-    <form class="page__search" [formGroup]="searchForm">
-      <app-search formControlName="search"></app-search>
-    </form>
-  </div>
+    <router-outlet></router-outlet>
+  </main>
+} @else {
+  <main class="page">
+    <div class="page__bar">
+      <app-page-header title="программы" backRoute="/office/feed" />
 
-  <router-outlet></router-outlet>
-</main>
+      <form appFormLayout class="page__search" [formGroup]="searchForm">
+        <app-search formControlName="search"></app-search>
+      </form>
+    </div>
+
+    <router-outlet></router-outlet>
+  </main>
+}
diff --git a/projects/social_platform/src/app/ui/pages/program/program.component.ts b/projects/social_platform/src/app/ui/pages/program/program.component.ts
index 99d9174f3..5d34f6d95 100644
--- a/projects/social_platform/src/app/ui/pages/program/program.component.ts
+++ b/projects/social_platform/src/app/ui/pages/program/program.component.ts
@@ -1,10 +1,13 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { RouterOutlet } from "@angular/router";
 import { ReactiveFormsModule } from "@angular/forms";
 import { SearchComponent } from "@ui/primitives/search/search.component";
-import { BackComponent } from "@uilib";
+import { BackComponent, FormLayoutDirective, PageHeaderComponent } from "@uilib";
 import { ProgramInfoService } from "@api/program/facades/program-info.service";
 import { ProgramMainUIInfoService } from "@api/program/facades/ui/program-main-ui-info.service";
 
@@ -13,11 +16,20 @@ import { ProgramMainUIInfoService } from "@api/program/facades/ui/program-main-u
   selector: "app-program",
   templateUrl: "./program.component.html",
   styleUrl: "./program.component.scss",
-  imports: [ReactiveFormsModule, SearchComponent, RouterOutlet, BackComponent],
+  imports: [
+    PageHeaderComponent,
+    FormLayoutDirective,
+    ReactiveFormsModule,
+    SearchComponent,
+    RouterOutlet,
+    BackComponent,
+  ],
   providers: [ProgramInfoService, ProgramMainUIInfoService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProgramComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly programInfoService = inject(ProgramInfoService);
   private readonly programMainUIInfoService = inject(ProgramMainUIInfoService);
 
diff --git a/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.scss b/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.scss
index cc0d02ee1..12d368780 100644
--- a/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 .bar {
@@ -70,3 +71,12 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :host {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.ts b/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.ts
index d41eaae3a..368061524 100644
--- a/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/bar-new/bar.component.ts
@@ -1,19 +1,28 @@
 /** @format */
 
-import { ChangeDetectionStrategy, Component, input, Input } from "@angular/core";
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { DesktopLayoutService } from "@uilib";
+
+import { inject, ChangeDetectionStrategy, Component, input, Input } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { RouterLink, RouterLinkActive } from "@angular/router";
-import { IconComponent } from "@uilib";
+import { IconComponent, TabsComponent } from "@uilib";
 
 /** Горизонтальный список навигационных ссылок с индикаторами активности. */
 @Component({
   selector: "app-bar-new",
-  imports: [CommonModule, RouterLink, RouterLinkActive, IconComponent],
+  imports: [TabsComponent, CommonModule, RouterLink, RouterLinkActive, IconComponent],
   templateUrl: "./bar.component.html",
   styleUrl: "./bar.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BarNewComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+
   /** Массив навигационных ссылок */
   readonly links = input.required<
     {
diff --git a/projects/social_platform/src/app/ui/pages/projects/dashboard/dashboardItem/dashboardItem.component.scss b/projects/social_platform/src/app/ui/pages/projects/dashboard/dashboardItem/dashboardItem.component.scss
index 1ffb5ee0c..d03c6bdfc 100644
--- a/projects/social_platform/src/app/ui/pages/projects/dashboard/dashboardItem/dashboardItem.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/dashboard/dashboardItem/dashboardItem.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 .dashboard {
@@ -45,3 +46,17 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .dashboard__list {
+      grid-template-columns: repeat(auto-fill, minmax(0, var(--ui-mobile-entity-card-width)));
+      row-gap: 48px;
+    }
+
+    .dashboard__top {
+      @include responsive.mobile-actions;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.html b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.html
index e2e498cf8..5b1f81761 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.html
@@ -1,65 +1,158 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="project__left">
+    <div class="lists project__section">
+      <div class="lists__section">
+        <h3 class="text-body-12 lists__title">основное</h3>
+        <i appIcon icon="anchor" class="lists__icon" appSquare="12"></i>
+      </div>
 
-<div class="project__left">
-  <div class="lists project__section">
-    <div class="lists__section">
-      <h3 class="text-body-12 lists__title">основное</h3>
-      <i appIcon icon="anchor" class="lists__icon" appSquare="12"></i>
+      <ul class="lists__list">
+        <li class="lists__item">
+          <i appIcon icon="label" class="lists__icon" appSquare="10"></i>
+          <div class="lists__item-content">
+            <span class="text-body-10 lists__label">Сфера</span>
+            <p class="text-body-10 lists__value card__industry">
+              @if (industryRepository.getOne(project()!.industry); as industry) {
+                {{ displayValue(industry?.name) }}
+              } @else {
+                Не указан
+              }
+            </p>
+          </div>
+        </li>
+
+        <li class="lists__item">
+          <i appIcon icon="geo-point" class="lists__icon" style="opacity: 0.6" appSquare="10"></i>
+          <div class="lists__item-content">
+            <span class="text-body-10 lists__label">Регион</span>
+            <p class="text-body-10 lists__value">{{ displayValue(project()!.region) }}</p>
+          </div>
+        </li>
+
+        <li class="lists__item">
+          <i appIcon icon="goal" class="lists__icon" appSquare="10"></i>
+          <div class="lists__item-content">
+            <span class="text-body-10 lists__label">TRL</span>
+            <p class="text-body-10 lists__value">{{ displayTrl(project()!.trl) }}</p>
+          </div>
+        </li>
+
+        <li class="lists__item">
+          <i appIcon icon="deadline" class="lists__icon" appSquare="10"></i>
+          <div class="lists__item-content">
+            <span class="text-body-10 lists__label">Срок реализации</span>
+            <p class="text-body-10 lists__value">
+              {{ displayValue(project()!.implementationDeadline) }}
+            </p>
+          </div>
+        </li>
+
+        <li class="lists__item">
+          <i appIcon icon="person" class="lists__icon" appSquare="10"></i>
+          <div class="lists__item-content">
+            <span class="text-body-10 lists__label">Лидер</span>
+            <a
+              class="text-body-10 lists__value lists__value--link"
+              [routerLink]="AppRoutes.profile.detail(project()!.leader)"
+            >
+              {{ leaderName(project()!) }}
+            </a>
+          </div>
+        </li>
+      </ul>
     </div>
+  </div>
+} @else {
+  <div class="project__left">
+    <div class="lists project__section">
+      <div class="lists__section">
+        <h3 class="text-body-12 lists__title">основное</h3>
+        <i appIcon icon="anchor" class="lists__icon" appSquare="12"></i>
+      </div>
 
-    <ul class="lists__list">
-      <li class="lists__item">
-        <i appIcon icon="label" class="lists__icon" appSquare="10"></i>
-        <div class="lists__item-content">
-          <span class="text-body-10 lists__label">Сфера</span>
-          <p class="text-body-10 lists__value card__industry">
-            @if (industryRepository.getOne(project()!.industry); as industry) {
-              {{ displayValue(industry?.name) }}
-            } @else {
-              Не указан
-            }
-          </p>
-        </div>
-      </li>
+      <ul class="lists__list">
+        @if (project()?.partnerProgram; as program) {
+          <li class="lists__item lists__item--program" lang="ru">
+            <i
+              appIcon
+              icon="program"
+              class="lists__icon"
+              appWidth="10"
+              appHeight="10"
+              appViewBox="0 0 21 16"
+              aria-hidden="true"
+            ></i>
+            <div class="lists__item-content">
+              <span class="text-body-10 lists__label">Программа</span>
+              @if (program.programId > 0) {
+                <a
+                  class="text-body-10 lists__value lists__value--link"
+                  [routerLink]="AppRoutes.program.detail(program.programId)"
+                  >{{ program.name?.trim() || "Название не указано" }}</a
+                >
+              } @else {
+                <p class="text-body-10 lists__value">
+                  {{ program.name?.trim() || "Название не указано" }}
+                </p>
+              }
+            </div>
+          </li>
+        }
+        <li class="lists__item">
+          <i appIcon icon="label" class="lists__icon" appSquare="10"></i>
+          <div class="lists__item-content">
+            <span class="text-body-10 lists__label">Сфера</span>
+            <p class="text-body-10 lists__value card__industry">
+              @if (industryRepository.getOne(project()!.industry); as industry) {
+                {{ displayValue(industry?.name) }}
+              } @else {
+                Не указан
+              }
+            </p>
+          </div>
+        </li>
 
-      <li class="lists__item">
-        <i appIcon icon="geo-point" class="lists__icon" style="opacity: 0.6" appSquare="10"></i>
-        <div class="lists__item-content">
-          <span class="text-body-10 lists__label">Регион</span>
-          <p class="text-body-10 lists__value">{{ displayValue(project()!.region) }}</p>
-        </div>
-      </li>
+        <li class="lists__item">
+          <i appIcon icon="geo-point" class="lists__icon" style="opacity: 0.6" appSquare="10"></i>
+          <div class="lists__item-content">
+            <span class="text-body-10 lists__label">Регион</span>
+            <p class="text-body-10 lists__value">{{ displayValue(project()!.region) }}</p>
+          </div>
+        </li>
 
-      <li class="lists__item">
-        <i appIcon icon="goal" class="lists__icon" appSquare="10"></i>
-        <div class="lists__item-content">
-          <span class="text-body-10 lists__label">TRL</span>
-          <p class="text-body-10 lists__value">{{ displayTrl(project()!.trl) }}</p>
-        </div>
-      </li>
+        <li class="lists__item">
+          <i appIcon icon="goal" class="lists__icon" appSquare="10"></i>
+          <div class="lists__item-content">
+            <span class="text-body-10 lists__label">TRL</span>
+            <p class="text-body-10 lists__value">{{ displayTrl(project()!.trl) }}</p>
+          </div>
+        </li>
 
-      <li class="lists__item">
-        <i appIcon icon="deadline" class="lists__icon" appSquare="10"></i>
-        <div class="lists__item-content">
-          <span class="text-body-10 lists__label">Срок реализации</span>
-          <p class="text-body-10 lists__value">
-            {{ displayValue(project()!.implementationDeadline) }}
-          </p>
-        </div>
-      </li>
+        <li class="lists__item">
+          <i appIcon icon="deadline" class="lists__icon" appSquare="10"></i>
+          <div class="lists__item-content">
+            <span class="text-body-10 lists__label">Срок реализации</span>
+            <p class="text-body-10 lists__value">
+              {{ displayValue(project()!.implementationDeadline) }}
+            </p>
+          </div>
+        </li>
 
-      <li class="lists__item">
-        <i appIcon icon="person" class="lists__icon" appSquare="10"></i>
-        <div class="lists__item-content">
-          <span class="text-body-10 lists__label">Лидер</span>
-          <a
-            class="text-body-10 lists__value lists__value--link"
-            [routerLink]="AppRoutes.profile.detail(project()!.leader)"
-          >
-            {{ leaderName(project()!) }}
-          </a>
-        </div>
-      </li>
-    </ul>
+        <li class="lists__item">
+          <i appIcon icon="person" class="lists__icon" appSquare="10"></i>
+          <div class="lists__item-content">
+            <span class="text-body-10 lists__label">Лидер</span>
+            <a
+              class="text-body-10 lists__value lists__value--link"
+              [routerLink]="AppRoutes.profile.detail(project()!.leader)"
+            >
+              {{ leaderName(project()!) }}
+            </a>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.scss b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.scss
index 9e5ef4e16..04a529384 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.scss
@@ -1,3 +1,6 @@
+/** @format */
+@use "styles/responsive";
+
 @mixin expandable-list {
   &__remaining {
     display: grid;
@@ -123,3 +126,45 @@
 
   @include expandable-list;
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .lists {
+    &__item {
+      &--program {
+        display: grid;
+        grid-template-columns: 22px minmax(0, 1fr);
+        gap: 4px 6px;
+        align-items: center;
+
+        .lists__item-content {
+          display: contents;
+        }
+
+        .lists__value {
+          grid-column: 1 / -1;
+          hyphens: auto;
+          word-break: normal;
+        }
+      }
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    .project__left {
+      width: 100%;
+    }
+
+    .project__section {
+      padding: 16px;
+    }
+
+    .lists__list {
+      gap: 16px;
+    }
+
+    .lists__item {
+      gap: 12px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.spec.ts b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.spec.ts
index 34fcbf5f1..1ccdb088d 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.spec.ts
@@ -52,4 +52,36 @@ describe("ProjectsLeftSideComponent", () => {
     expect(text).toContain("Иванов Иван");
     expect(text).not.toContain(">0<");
   });
+
+  it("показывает полное имя и открывает именно программу, а не связь или проект", () => {
+    fixture.componentRef.setInput("project", {
+      industry: 1,
+      leader: 42,
+      partnerProgram: {
+        name: "Акселератор студенческих технологических проектов",
+        programId: 12,
+        programLinkId: 120,
+      },
+    });
+    fixture.detectChanges();
+    const field = fixture.nativeElement.querySelector(".lists__item--program");
+    expect(field.textContent).toContain("Программа");
+    expect(field.querySelector("a").textContent.trim()).toBe(
+      "Акселератор студенческих технологических проектов",
+    );
+    expect(field.querySelector("a").getAttribute("href")).toBe("/office/program/12");
+  });
+
+  it("не добавляет программу без связи и явно обозначает отсутствующее legacy имя", () => {
+    expect(fixture.nativeElement.querySelector(".lists__item--program")).toBeNull();
+    fixture.componentRef.setInput("project", {
+      industry: 1,
+      leader: 42,
+      partnerProgram: { programId: 12 },
+    });
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector(".lists__item--program").textContent).toContain(
+      "Название не указано",
+    );
+  });
 });
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.ts b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.ts
index 0916169a7..7f0ed68d3 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-left-side/projects-left-side.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
 import { RouterModule } from "@angular/router";
@@ -17,6 +20,8 @@ import { IndustryRepositoryPort } from "@domain/industry/ports/industry.reposito
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectsLeftSideComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly project = input.required<Project | undefined>();
 
   protected readonly industryRepository = inject(IndustryRepositoryPort);
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.html b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.html
index f7ead19b7..3bcdd998b 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.html
@@ -1,59 +1,124 @@
 <!-- @format -->
-
-<div #contentEl class="project__content">
-  <div class="about project__about">
-    <div class="about__head">
-      <h3 class="text-body-12 about__title">о проекте</h3>
-      <i appIcon icon="folder" appSquare="12" class="about__head--icon"></i>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div #contentEl class="project__content">
+    <div class="about project__about">
+      <div class="about__head">
+        <h3 class="text-body-12 about__title">о проекте</h3>
+        <i appIcon icon="folder" appSquare="12" class="about__head--icon"></i>
+      </div>
+      @if (fullDescription()) {
+        <div class="text-body-10 about__text">
+          <p [innerHTML]="visibleDescription() | parseLinks | parseBreaks"></p>
+          @if (descriptionExpandable()) {
+            <button type="button" class="read-more text-body-10" (click)="onToggleDescription()">
+              {{ descriptionExpanded() ? "Скрыть" : "Подробнее" }}
+            </button>
+          }
+        </div>
+      }
     </div>
-    @if (fullDescription()) {
-      <div class="text-body-10 about__text">
-        <p [innerHTML]="visibleDescription() | parseLinks | parseBreaks"></p>
-        @if (descriptionExpandable()) {
-          <button type="button" class="read-more text-body-10" (click)="onToggleDescription()">
-            {{ descriptionExpanded() ? "Скрыть" : "Подробнее" }}
-          </button>
+
+    @if (profile()) {
+      <div #newsEl class="project__news news">
+        @if (project()!.leader === profile()!.id) {
+          <app-news-form
+            class="news__form"
+            [pending]="newsPending()"
+            (addNews)="onAddNews($event)"
+          ></app-news-form>
+        }
+
+        <div class="project__directions">
+          @for (directionItem of directions(); track $index) {
+            <app-project-direction-card
+              [direction]="directionItem.direction"
+              [icon]="directionItem.icon"
+              [about]="directionItem.about"
+              [type]="directionItem.type"
+              [isOwner]="profile()!.id === project()!.leader"
+              [projectInfoType]="directionItem.direction === 'цели' ? 'goals' : 'partners'"
+            ></app-project-direction-card>
+          }
+        </div>
+
+        @for (n of news(); track n.id) {
+          <app-news-card
+            class="news__item"
+            [resourceLink]="[AppRoutes.projects.detail(project()!.id)]"
+            [contentId]="project()!.id"
+            [attr.data-id]="n.id"
+            [feedItem]="n"
+            [isOwner]="profile()!.id === project()!.leader"
+            (delete)="onDeleteNews($event)"
+            (like)="onLike($event)"
+            (edited)="onEditNews($event, n.id)"
+          ></app-news-card>
         }
       </div>
     }
   </div>
-
-  @if (profile()) {
-    <div #newsEl class="project__news news">
-      @if (project()!.leader === profile()!.id) {
-        <app-news-form
-          class="news__form"
-          [pending]="newsPending()"
-          (addNews)="onAddNews($event)"
-        ></app-news-form>
+} @else {
+  <div #contentEl class="project__content">
+    <div class="about project__about">
+      <div class="about__head">
+        <h3 class="text-body-12 about__title">о проекте</h3>
+        <i appIcon icon="folder" appSquare="12" class="about__head--icon"></i>
+      </div>
+      @if (fullDescription()) {
+        <div class="text-body-10 about__text">
+          <p [innerHTML]="visibleDescription() | parseLinks | parseBreaks"></p>
+          @if (descriptionExpandable()) {
+            <button
+              appButton="secondary"
+              type="button"
+              class="read-more text-body-10"
+              (click)="onToggleDescription()"
+            >
+              {{ descriptionExpanded() ? "Скрыть" : "Подробнее" }}
+            </button>
+          }
+        </div>
       }
+    </div>
+
+    @if (profile()) {
+      <div #newsEl class="project__news news">
+        @if (project()!.leader === profile()!.id) {
+          <app-news-form
+            class="news__form"
+            [pending]="newsPending()"
+            (addNews)="onAddNews($event)"
+          ></app-news-form>
+        }
 
-      <div class="project__directions">
-        @for (directionItem of directions(); track $index) {
-          <app-project-direction-card
-            [direction]="directionItem.direction"
-            [icon]="directionItem.icon"
-            [about]="directionItem.about"
-            [type]="directionItem.type"
+        <div class="project__directions">
+          @for (directionItem of directions(); track $index) {
+            <app-project-direction-card
+              [direction]="directionItem.direction"
+              [icon]="directionItem.icon"
+              [about]="directionItem.about"
+              [type]="directionItem.type"
+              [isOwner]="profile()!.id === project()!.leader"
+              [projectInfoType]="directionItem.direction === 'цели' ? 'goals' : 'partners'"
+            ></app-project-direction-card>
+          }
+        </div>
+
+        @for (n of news(); track n.id) {
+          <app-news-card
+            class="news__item"
+            [resourceLink]="[AppRoutes.projects.detail(project()!.id)]"
+            [contentId]="project()!.id"
+            [attr.data-id]="n.id"
+            [feedItem]="n"
             [isOwner]="profile()!.id === project()!.leader"
-            [projectInfoType]="directionItem.direction === 'цели' ? 'goals' : 'partners'"
-          ></app-project-direction-card>
+            (delete)="onDeleteNews($event)"
+            (like)="onLike($event)"
+            (edited)="onEditNews($event, n.id)"
+          ></app-news-card>
         }
       </div>
-
-      @for (n of news(); track n.id) {
-        <app-news-card
-          class="news__item"
-          [resourceLink]="[AppRoutes.projects.detail(project()!.id)]"
-          [contentId]="project()!.id"
-          [attr.data-id]="n.id"
-          [feedItem]="n"
-          [isOwner]="profile()!.id === project()!.leader"
-          (delete)="onDeleteNews($event)"
-          (like)="onLike($event)"
-          (edited)="onEditNews($event, n.id)"
-        ></app-news-card>
-      }
-    </div>
-  }
-</div>
+    }
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.ts b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.ts
index 48cf50ba1..9188415e0 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective } from "@uilib";
+
 import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
@@ -61,6 +66,7 @@ export function buildProjectDescriptionPreview(
   templateUrl: "./projects-mid-side.component.html",
   styleUrl: "./projects-mid-side.component.scss",
   imports: [
+    ButtonDirective,
     CommonModule,
     NewsFormComponent,
     ProjectDirectionCard,
@@ -72,6 +78,8 @@ export function buildProjectDescriptionPreview(
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectsMidSideComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly project = input.required<Project | undefined>();
 
   // Ссылки на элементы DOM
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/cancel-task-form/cancel-task-form.component.html b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/cancel-task-form/cancel-task-form.component.html
index 72b395c3e..6753d7f5a 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/cancel-task-form/cancel-task-form.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/cancel-task-form/cancel-task-form.component.html
@@ -1,50 +1,106 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <form class="cancel__form" [formGroup]="cancelTaskForm" (ngSubmit)="onSubmit($event)">
+    @if (cancelTaskForm.get("description"); as description) {
+      <fieldset>
+        <app-textarea
+          size="big"
+          id="description"
+          formControlName="description"
+          [error]="description | controlError"
+          placeholder="задача была сделана некачественно"
+        ></app-textarea>
+        @if (description | controlError: "required") {
+          <div class="text-body-10 error">
+            {{ errorMessage.VALIDATION_REQUIRED }}
+          </div>
+        }
+        @if (description | controlError: "maxlength") {
+          <div class="text-body-10 error">
+            {{ errorMessage.VALIDATION_TOO_LONG }}
+            @if (description.errors) {
+              {{ description.errors["maxlength"]["requiredLength"] }}
+            }
+          </div>
+        }
+        @if (description | controlError: "minlength") {
+          <div class="text-body-10 error">
+            {{ errorMessage.VALIDATION_TOO_SHORT }}
+            @if (description.errors) {
+              {{ description.errors["minlength"]["requiredLength"] }}
+            }
+          </div>
+        }
+      </fieldset>
+    }
 
-<form class="cancel__form" [formGroup]="cancelTaskForm" (ngSubmit)="onSubmit($event)">
-  @if (cancelTaskForm.get("description"); as description) {
-    <fieldset>
-      <app-textarea
-        size="big"
-        id="description"
-        formControlName="description"
-        [error]="description | controlError"
-        placeholder="задача была сделана некачественно"
-      ></app-textarea>
-      @if (description | controlError: "required") {
-        <div class="text-body-10 error">
-          {{ errorMessage.VALIDATION_REQUIRED }}
-        </div>
-      }
-      @if (description | controlError: "maxlength") {
-        <div class="text-body-10 error">
-          {{ errorMessage.VALIDATION_TOO_LONG }}
-          @if (description.errors) {
-            {{ description.errors["maxlength"]["requiredLength"] }}
-          }
-        </div>
-      }
-      @if (description | controlError: "minlength") {
-        <div class="text-body-10 error">
-          {{ errorMessage.VALIDATION_TOO_SHORT }}
-          @if (description.errors) {
-            {{ description.errors["minlength"]["requiredLength"] }}
-          }
-        </div>
-      }
-    </fieldset>
-  }
+    <label class="text-body-12">воспользуйтесь быстрыми ответами</label>
 
-  <label class="text-body-12">воспользуйтесь быстрыми ответами</label>
+    <div class="cancel__quick-answers">
+      @for (answer of quickAnswers; track $index) {
+        <app-tag (click)="pickAnAnswer(answer.title)" appearance="outline" type="answer">{{
+          answer.title
+        }}</app-tag>
+      }
+    </div>
 
-  <div class="cancel__quick-answers">
-    @for (answer of quickAnswers; track $index) {
-      <app-tag (click)="pickAnAnswer(answer.title)" appearance="outline" type="answer">{{
-        answer.title
-      }}</app-tag>
+    <app-button size="big" (click)="onSubmit($event)" [loader]="sendFormIsSubmitting" type="submit"
+      >отменить результат выполнения</app-button
+    >
+  </form>
+} @else {
+  <form
+    appFormLayout
+    class="cancel__form"
+    [formGroup]="cancelTaskForm"
+    (ngSubmit)="onSubmit($event)"
+  >
+    @if (cancelTaskForm.get("description"); as description) {
+      <fieldset>
+        <app-textarea
+          size="big"
+          id="description"
+          formControlName="description"
+          [error]="description | controlError"
+          placeholder="задача была сделана некачественно"
+        ></app-textarea>
+        @if (description | controlError: "required") {
+          <div class="text-body-10 error">
+            {{ errorMessage.VALIDATION_REQUIRED }}
+          </div>
+        }
+        @if (description | controlError: "maxlength") {
+          <div class="text-body-10 error">
+            {{ errorMessage.VALIDATION_TOO_LONG }}
+            @if (description.errors) {
+              {{ description.errors["maxlength"]["requiredLength"] }}
+            }
+          </div>
+        }
+        @if (description | controlError: "minlength") {
+          <div class="text-body-10 error">
+            {{ errorMessage.VALIDATION_TOO_SHORT }}
+            @if (description.errors) {
+              {{ description.errors["minlength"]["requiredLength"] }}
+            }
+          </div>
+        }
+      </fieldset>
     }
-  </div>
 
-  <app-button size="big" (click)="onSubmit($event)" [loader]="sendFormIsSubmitting" type="submit"
-    >отменить результат выполнения</app-button
-  >
-</form>
+    <label class="text-body-12">воспользуйтесь быстрыми ответами</label>
+
+    <div class="cancel__quick-answers">
+      @for (answer of quickAnswers; track $index) {
+        <app-tag (click)="pickAnAnswer(answer.title)" appearance="outline" type="answer">{{
+          answer.title
+        }}</app-tag>
+      }
+    </div>
+
+    <app-button size="big" (click)="onSubmit($event)" [loader]="sendFormIsSubmitting" type="submit"
+      >отменить результат выполнения</app-button
+    >
+  </form>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/cancel-task-form/cancel-task-form.component.ts b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/cancel-task-form/cancel-task-form.component.ts
index 74b6f26a7..14c560837 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/cancel-task-form/cancel-task-form.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/cancel-task-form/cancel-task-form.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FormLayoutDirective } from "@uilib";
+
 import { CommonModule } from "@angular/common";
 import { Component, EventEmitter, inject, Output } from "@angular/core";
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
@@ -16,6 +21,7 @@ import { TagComponent } from "@ui/primitives/tag/tag.component";
   templateUrl: "./cancel-task-form.component.html",
   styleUrl: "./cancel-task-form.component.scss",
   imports: [
+    FormLayoutDirective,
     CommonModule,
     ReactiveFormsModule,
     ButtonComponent,
@@ -26,6 +32,8 @@ import { TagComponent } from "@ui/primitives/tag/tag.component";
   standalone: true,
 })
 export class CancelTaskFormComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   @Output() submit = new EventEmitter<void>();
 
   private readonly fb = inject(FormBuilder);
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.html b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.html
index b117a2104..90cda9305 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.html
@@ -1,67 +1,150 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="create-board">
+    <form class="create-board__form" [formGroup]="createBoardForm">
+      <div class="create-board__title">
+        @if (createBoardForm.get("title"); as title) {
+          <input formControlName="title" class="text-body-6" placeholder="название доски" />
+          @if (title | controlError: "required") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_REQUIRED }}
+            </div>
+          }
+        }
+      </div>
 
-<div class="create-board">
-  <form class="create-board__form" [formGroup]="createBoardForm">
-    <div class="create-board__title">
-      @if (createBoardForm.get("title"); as title) {
-        <input formControlName="title" class="text-body-6" placeholder="название доски" />
-        @if (title | controlError: "required") {
-          <div class="text-body-10 error">
-            {{ errorMessage.VALIDATION_REQUIRED }}
-          </div>
+      <div class="create-board__colors">
+        @if (createBoardForm.get("color"); as color) {
+          @for (colorItem of tagColors; track $index) {
+            <div
+              class="create-board__pick-color"
+              (click)="pickOption('color', colorItem.name)"
+              [style.backgroundColor]="colorItem.color"
+            ></div>
+          }
         }
-      }
-    </div>
+      </div>
 
-    <div class="create-board__colors">
-      @if (createBoardForm.get("color"); as color) {
-        @for (colorItem of tagColors; track $index) {
-          <div
-            class="create-board__pick-color"
-            (click)="pickOption('color', colorItem.name)"
-            [style.backgroundColor]="colorItem.color"
-          ></div>
+      <div class="create-board__description">
+        @if (createBoardForm.get("description"); as description) {
+          <textarea
+            formControlName="description"
+            class="text-body-6"
+            placeholder="краткое описание"
+          ></textarea>
+          @if (description | controlError: "required") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_REQUIRED }}
+            </div>
+          }
+          @if (description | controlError: "maxlength") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_TOO_LONG }}
+              @if (description.errors) {
+                {{ description.errors["maxlength"]["requiredLength"] }}
+              }
+            </div>
+          }
+          @if (description | controlError: "minlength") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_TOO_SHORT }}
+              @if (description.errors) {
+                {{ description.errors["minlength"]["requiredLength"] }}
+              }
+            </div>
+          }
         }
-      }
-    </div>
+      </div>
 
-    <div class="create-board__description">
-      @if (createBoardForm.get("description"); as description) {
-        <textarea
-          formControlName="description"
-          class="text-body-6"
-          placeholder="краткое описание"
-        ></textarea>
-        @if (description | controlError: "required") {
-          <div class="text-body-10 error">
-            {{ errorMessage.VALIDATION_REQUIRED }}
-          </div>
+      <div class="create-board__icons">
+        @if (createBoardForm.get("icon"); as icon) {
+          @for (icon of kanbanIcons.slice(0, 13); track $index) {
+            <i
+              appIcon
+              [icon]="icon.name"
+              appSquare="6"
+              (click)="pickOption('icon', icon.value)"
+            ></i>
+          }
+        }
+      </div>
+    </form>
+  </div>
+} @else {
+  <div class="create-board">
+    <form appFormLayout class="create-board__form" [formGroup]="createBoardForm">
+      <div class="create-board__title">
+        @if (createBoardForm.get("title"); as title) {
+          <input
+            appField
+            formControlName="title"
+            class="text-body-6"
+            placeholder="название доски"
+          />
+          @if (title | controlError: "required") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_REQUIRED }}
+            </div>
+          }
         }
-        @if (description | controlError: "maxlength") {
-          <div class="text-body-10 error">
-            {{ errorMessage.VALIDATION_TOO_LONG }}
-            @if (description.errors) {
-              {{ description.errors["maxlength"]["requiredLength"] }}
-            }
-          </div>
+      </div>
+
+      <div class="create-board__colors">
+        @if (createBoardForm.get("color"); as color) {
+          @for (colorItem of tagColors; track $index) {
+            <div
+              class="create-board__pick-color"
+              (click)="pickOption('color', colorItem.name)"
+              [style.backgroundColor]="colorItem.color"
+            ></div>
+          }
         }
-        @if (description | controlError: "minlength") {
-          <div class="text-body-10 error">
-            {{ errorMessage.VALIDATION_TOO_SHORT }}
-            @if (description.errors) {
-              {{ description.errors["minlength"]["requiredLength"] }}
-            }
-          </div>
+      </div>
+
+      <div class="create-board__description">
+        @if (createBoardForm.get("description"); as description) {
+          <textarea
+            formControlName="description"
+            class="text-body-6"
+            placeholder="краткое описание"
+          ></textarea>
+          @if (description | controlError: "required") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_REQUIRED }}
+            </div>
+          }
+          @if (description | controlError: "maxlength") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_TOO_LONG }}
+              @if (description.errors) {
+                {{ description.errors["maxlength"]["requiredLength"] }}
+              }
+            </div>
+          }
+          @if (description | controlError: "minlength") {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_TOO_SHORT }}
+              @if (description.errors) {
+                {{ description.errors["minlength"]["requiredLength"] }}
+              }
+            </div>
+          }
         }
-      }
-    </div>
+      </div>
 
-    <div class="create-board__icons">
-      @if (createBoardForm.get("icon"); as icon) {
-        @for (icon of kanbanIcons.slice(0, 13); track $index) {
-          <i appIcon [icon]="icon.name" appSquare="6" (click)="pickOption('icon', icon.value)"></i>
+      <div class="create-board__icons">
+        @if (createBoardForm.get("icon"); as icon) {
+          @for (icon of kanbanIcons.slice(0, 13); track $index) {
+            <i
+              appIcon
+              [icon]="icon.name"
+              appSquare="6"
+              (click)="pickOption('icon', icon.value)"
+            ></i>
+          }
         }
-      }
-    </div>
-  </form>
-</div>
+      </div>
+    </form>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.scss b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.scss
index 00a543994..2c9200a6b 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/typography";
 
 .create-board {
@@ -85,3 +86,13 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .create-board {
+    input,
+    textarea {
+      background-color: var(--ui-board-surface);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.ts b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.ts
index 0ecb6217c..75d3ac2c4 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-board-form/create-board-form.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FieldDirective, FormLayoutDirective } from "@uilib";
+
 import { CommonModule } from "@angular/common";
 import { Component, inject, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
@@ -15,10 +20,19 @@ import { KanbanIcons } from "@core/consts/other/kanban-icons.const";
   selector: "app-create-board-form",
   templateUrl: "./create-board-form.component.html",
   styleUrl: "./create-board-form.component.scss",
-  imports: [CommonModule, ReactiveFormsModule, ControlErrorPipe, IconComponent],
+  imports: [
+    FieldDirective,
+    FormLayoutDirective,
+    CommonModule,
+    ReactiveFormsModule,
+    ControlErrorPipe,
+    IconComponent,
+  ],
   standalone: true,
 })
 export class CreateBoardFormComponent implements OnInit, OnDestroy {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly fb = inject(FormBuilder);
 
   constructor() {
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-tag-form/create-tag-form.component.html b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-tag-form/create-tag-form.component.html
index e829ce924..2410754b0 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-tag-form/create-tag-form.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-tag-form/create-tag-form.component.html
@@ -1,31 +1,69 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <form class="create-tag__form" [formGroup]="tagForm" (submit)="$event.preventDefault()">
+    <input
+      class="text-body-6 create-tag__input field__option--add-object"
+      type="text"
+      placeholder="введите тэг..."
+      formControlName="tagName"
+      (click)="$event.stopPropagation()"
+      (keydown.enter)="confirmCreateTag($event)"
+    />
+    <div
+      class="create-tag__pick-color"
+      [ngStyle]="{ 'background-color': selectedColor }"
+      (click)="openPickColors = !openPickColors; $event.stopPropagation()"
+    ></div>
 
-<form class="create-tag__form" [formGroup]="tagForm" (submit)="$event.preventDefault()">
-  <input
-    class="text-body-6 create-tag__input field__option--add-object"
-    type="text"
-    placeholder="введите тэг..."
-    formControlName="tagName"
-    (click)="$event.stopPropagation()"
-    (keydown.enter)="confirmCreateTag($event)"
-  />
-  <div
-    class="create-tag__pick-color"
-    [ngStyle]="{ 'background-color': selectedColor }"
-    (click)="openPickColors = !openPickColors; $event.stopPropagation()"
-  ></div>
+    @if (openPickColors) {
+      <div class="create-tag__colors" (click)="$event.stopPropagation()">
+        <div class="create-tag__colors-wrapper">
+          @for (colorItem of tagColors; track $index) {
+            <div
+              class="create-tag__pick-color"
+              (click)="selectTagColor(colorItem.name)"
+              [style.backgroundColor]="colorItem.color"
+            ></div>
+          }
+        </div>
+      </div>
+    }
+  </form>
+} @else {
+  <form
+    appFormLayout
+    class="create-tag__form"
+    [formGroup]="tagForm"
+    (submit)="$event.preventDefault()"
+  >
+    <input
+      appField
+      class="text-body-6 create-tag__input field__option--add-object"
+      type="text"
+      placeholder="введите тэг..."
+      formControlName="tagName"
+      (click)="$event.stopPropagation()"
+      (keydown.enter)="confirmCreateTag($event)"
+    />
+    <div
+      class="create-tag__pick-color"
+      [ngStyle]="{ 'background-color': selectedColor }"
+      (click)="openPickColors = !openPickColors; $event.stopPropagation()"
+    ></div>
 
-  @if (openPickColors) {
-    <div class="create-tag__colors" (click)="$event.stopPropagation()">
-      <div class="create-tag__colors-wrapper">
-        @for (colorItem of tagColors; track $index) {
-          <div
-            class="create-tag__pick-color"
-            (click)="selectTagColor(colorItem.name)"
-            [style.backgroundColor]="colorItem.color"
-          ></div>
-        }
+    @if (openPickColors) {
+      <div class="create-tag__colors" (click)="$event.stopPropagation()">
+        <div class="create-tag__colors-wrapper">
+          @for (colorItem of tagColors; track $index) {
+            <div
+              class="create-tag__pick-color"
+              (click)="selectTagColor(colorItem.name)"
+              [style.backgroundColor]="colorItem.color"
+            ></div>
+          }
+        </div>
       </div>
-    </div>
-  }
-</form>
+    }
+  </form>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-tag-form/create-tag-form.component.ts b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-tag-form/create-tag-form.component.ts
index a25ff7846..ad43b3dea 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-tag-form/create-tag-form.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/create-tag-form/create-tag-form.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FieldDirective, FormLayoutDirective } from "@uilib";
+
 import { CommonModule } from "@angular/common";
 import {
   Component,
@@ -26,9 +31,11 @@ import { TagDto } from "@domain/kanban/dto/tag.model.dto";
   selector: "app-create-tag-form",
   templateUrl: "./create-tag-form.component.html",
   styleUrl: "./create-tag-form.component.scss",
-  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  imports: [FieldDirective, FormLayoutDirective, CommonModule, FormsModule, ReactiveFormsModule],
 })
 export class CreateTagFormComponent implements OnInit, OnChanges {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   @Input() editingTag: TagDto | null = null;
   @Output() createTag = new EventEmitter<TagDto>();
   @Output() updateTag = new EventEmitter<TagDto>();
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/badge/badge.component.ts b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/badge/badge.component.ts
index 355cf37fd..59acc189c 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/badge/badge.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/badge/badge.component.ts
@@ -1,18 +1,3 @@
 /** @format */
 
-import { CommonModule } from "@angular/common";
-import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
-
-/** Канбан (модуль отключён): бейдж задачи. */
-@Component({
-  selector: "app-badge",
-  templateUrl: "./badge.component.html",
-  styleUrl: "./badge.component.scss",
-  imports: [CommonModule],
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BadgeComponent {
-  @Input() color: "green" | "red" | "gold" = "red";
-  @Input() type: "deadline" | "start" = "deadline";
-}
+export { BadgeComponent } from "@uilib";
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.html b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.html
index 406d37b7d..6d7f43c74 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.html
@@ -1,845 +1,1708 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="kanban__detail" [formGroup]="taskDetailForm">
+    <div class="kanban__detail-top">
+      <div class="kanban__detail-buttons">
+        @if (!isTaskResult()) {
+          @if (
+            isExternal() || ((isLeader() || isCreator()) && !isPerformer() && !isResponsible())
+          ) {
+            <app-button
+              appearance="outline"
+              size="medium"
+              color="gold"
+              customTypographyClass="text-body-12"
+              >ожидание результата</app-button
+            >
+          } @else if (isResponsible() || isPerformer()) {
+            <app-button
+              size="medium"
+              appearance="inline"
+              color="primary"
+              customTypographyClass="text-body-12"
+              (click)="showAttachResultModal = true"
+              >прикрепить результа</app-button
+            >
+          }
+        } @else {
+          @if (isCommented) {
+            <app-button
+              [appearance]="isCommentedByLeader && !isLeader() ? 'inline' : 'outline'"
+              size="medium"
+              [color]="isCommentedByLeader && !isLeader() ? 'red' : 'gold'"
+              customTypographyClass="text-body-12"
+              (click)="
+                isCommentedByLeader && !isLeader() && (showLeaderCommentedResultModal = true)
+              "
+              >{{
+                isCommentedByLeader && !isLeader() ? "комментарий лидера" : "вы прокомментировали"
+              }}</app-button
+            >
+          }
+          @if (isLeaderAcceptResult()) {
+            @if (!isExternal()) {
+              <div class="kanban__detail-top--accept" (click)="isCompletedTask = true"></div>
+            }
+
+            <app-button
+              size="medium"
+              customTypographyClass="text-body-12"
+              appearance="outline"
+              color="green"
+              (click)="isLeader() && (showUnAcceptResultModal = true)"
+              >{{ isLeader() ? "вы приняли работу" : "результат принят" }}</app-button
+            >
+          } @else {
+            @if (isLeader() && !isLeaderLeaveComment()) {
+              <app-button
+                size="big"
+                customTypographyClass="text-body-12"
+                (click)="showAcceptResultModal = true"
+                >приемка</app-button
+              >
+            }
+            @if (!isCommentedByLeader) {
+              @if (isResponsible() || isPerformer()) {
+                <app-button
+                  appearance="outline"
+                  size="medium"
+                  color="gold"
+                  customTypographyClass="text-body-12"
+                  >ожидание проверки</app-button
+                >
+              }
+            }
+          }
 
-<div class="kanban__detail" [formGroup]="taskDetailForm">
-  <div class="kanban__detail-top">
-    <div class="kanban__detail-buttons">
-      @if (!isTaskResult()) {
-        @if (isExternal() || ((isLeader() || isCreator()) && !isPerformer() && !isResponsible())) {
           <app-button
-            appearance="outline"
             size="medium"
-            color="gold"
+            (click)="showResultModal = true"
             customTypographyClass="text-body-12"
-            >ожидание результата</app-button
+            appearance="outline"
+            >результат задачи</app-button
           >
-        } @else if (isResponsible() || isPerformer()) {
-          <app-button
-            size="medium"
-            appearance="inline"
-            color="primary"
-            customTypographyClass="text-body-12"
-            (click)="showAttachResultModal = true"
-            >прикрепить результа</app-button
+        }
+      </div>
+
+      <div class="kanban__detail-top-menu">
+        @if (taskDetailForm.get("type"); as type) {
+          <div
+            class="kanban__detail-type"
+            (clickOutside)="onTypeSelect('type', isActionTypeOpen, type.value)"
+            (click)="onTypeSelect('type', !isActionTypeOpen, type.value)"
           >
+            <i appIcon [icon]="getActionType(type.value)" appSquare="15"></i>
+            <app-dropdown
+              [isOpen]="isActionTypeOpen"
+              type="icons"
+              (select)="onTypeSelect('type', false, $event)"
+              (outside)="onTypeSelect('type', false)"
+              [options]="actionTypeOptions"
+            ></app-dropdown>
+          </div>
         }
-      } @else {
-        @if (isCommented) {
-          <app-button
-            [appearance]="isCommentedByLeader && !isLeader() ? 'inline' : 'outline'"
-            size="medium"
-            [color]="isCommentedByLeader && !isLeader() ? 'red' : 'gold'"
-            customTypographyClass="text-body-12"
-            (click)="isCommentedByLeader && !isLeader() && (showLeaderCommentedResultModal = true)"
-            >{{
-              isCommentedByLeader && !isLeader() ? "комментарий лидера" : "вы прокомментировали"
-            }}</app-button
+        @if (taskDetailForm.get("priority"); as priority) {
+          <div
+            class="kanban__detail-priority-wrapper"
+            (clickOutside)="onTypeSelect('priority', isPriorityTypeOpen, priority.value)"
+            (click)="onTypeSelect('priority', !isPriorityTypeOpen, priority.value)"
+          >
+            <div
+              class="kanban__detail-priority"
+              [ngStyle]="getPriorityType(priority.value, 'color')"
+            ></div>
+            <app-dropdown
+              [isOpen]="isPriorityTypeOpen"
+              type="shapes"
+              (select)="onTypeSelect('priority', false, $event)"
+              (outside)="onTypeSelect('priority', false)"
+              [options]="priorityTypeOptions"
+            ></app-dropdown>
+          </div>
+        }
+        @if (isCreator() || isLeader()) {
+          <div
+            class="kanban__detail-delete-wrapper"
+            (clickOutside)="onTypeSelect('delete', isDeleteTypeOpen)"
+            (click)="onTypeSelect('delete', !isDeleteTypeOpen)"
           >
+            <i class="kanban__detail-delete" appIcon icon="dots" appSquare="10"></i>
+            <app-dropdown
+              [isOpen]="isDeleteTypeOpen"
+              type="text"
+              colorText="red"
+              (select)="onTypeSelect('delete', false, $event)"
+              (outside)="onTypeSelect('delete', false)"
+              [options]="priorityDeleteOptions"
+            ></app-dropdown>
+          </div>
         }
-        @if (isLeaderAcceptResult()) {
-          @if (!isExternal()) {
-            <div class="kanban__detail-top--accept" (click)="isCompletedTask = true"></div>
+      </div>
+    </div>
+
+    <div class="kanban__detail-general">
+      @if (taskDetailForm.get("title")?.value; as title) {
+        <p class="text-body-14" formControlName="title">{{ title }}</p>
+      }
+      @if (taskDetailForm.get("score")?.value; as score) {
+        <div class="kanban__detail-general-score">
+          <i appIcon icon="star" appSquare="10"></i>
+          <p class="text-body-12" style="color: var(--grey-for-text)">{{ score }}</p>
+        </div>
+      }
+    </div>
+
+    <div class="kanban__detail-info" style="justify-content: flex-end; align-items: center">
+      @if (taskDetailInfo()?.creator; as creator) {
+        <div class="kanban__detail-info-name" style="align-items: center">
+          <app-avatar [size]="10" [url]="creator.avatar"></app-avatar>
+          <p class="text-body-6" style="color: var(--grey-for-text)">
+            {{ creator.firstName + " " + creator.lastName[0] }}
+          </p>
+        </div>
+      }
+
+      <p class="text-body-6">{{ taskDetailInfo()?.datetimeCreated | date: "dd.MM.yyyy HH:mm" }}</p>
+    </div>
+
+    <div class="kanban__divider">
+      <img
+        alt="divider image"
+        src="assets/images/projects/shared/divider.png"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+
+    <div class="kanban__detail-info" style="align-items: flex-start">
+      @if (taskDetailForm.get("responsible"); as responsible) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name">
+            <i appIcon icon="person" appSquare="10"></i>
+            <h6 class="text-body-10">ответственный</h6>
+          </div>
+
+          <div class="kanban__detail-info-name">
+            @if (responsible.value) {
+              <div
+                class="kanban__detail-avatar"
+                (mouseenter)="showEditAvatarIcon = true"
+                (mouseleave)="showEditAvatarIcon = false"
+              >
+                <app-avatar
+                  [style.opacity]="showEditAvatarIcon ? '0.7' : '1'"
+                  [size]="20"
+                  [url]="responsible.value.avatar"
+                ></app-avatar>
+
+                @if (showEditAvatarIcon) {
+                  <i
+                    appIcon
+                    icon="edit-pen"
+                    appSquare="8"
+                    (click)="onTypeSelect('responsible', !isResponsiblePickOpen)"
+                  ></i>
+                }
+
+                <app-dropdown
+                  [isOpen]="isResponsiblePickOpen"
+                  type="avatars"
+                  [options]="responsiblePickOpenOptions"
+                  (select)="onTypeSelect('responsible', false, $event)"
+                  (outside)="isResponsiblePickOpen = false"
+                ></app-dropdown>
+              </div>
+
+              <p class="text-body-10" style="color: var(--grey-for-text)">
+                {{ responsible.value.name }}
+              </p>
+            } @else {
+              <div
+                class="kanban__detail-add-responsible"
+                (clickOutside)="onTypeSelect('responsible', isResponsiblePickOpen)"
+                (click)="onTypeSelect('responsible', !isResponsiblePickOpen)"
+              >
+                <i appIcon icon="plus" appSquare="5"></i>
+                <app-dropdown
+                  [isOpen]="isResponsiblePickOpen"
+                  type="avatars"
+                  (select)="onTypeSelect('responsible', false, $event)"
+                  (outside)="onTypeSelect('responsible', false)"
+                  [options]="responsiblePickOpenOptions"
+                ></app-dropdown>
+              </div>
+            }
+          </div>
+        </div>
+      }
+      @if (taskDetailForm.get("performers"); as performers) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name">
+            <i appIcon icon="people-bold" appSquare="10"></i>
+            <h6 class="text-body-10">исполнители</h6>
+          </div>
+
+          <div class="kanban__detail-info-name">
+            @if (performers.value && performers.value.length >= 0 && performers.value.length <= 7) {
+              <div class="kanban__detail-performers">
+                @for (performer of performers.value; track $index) {
+                  <app-avatar [size]="20" [url]="performer.avatar"></app-avatar>
+                }
+              </div>
+            }
+            @if (!(performers.value && performers.value.length === 7)) {
+              <div
+                class="kanban__detail-add-responsible"
+                (clickOutside)="onTypeSelect('performers', isPerformersPickOpen)"
+                (click)="onTypeSelect('performers', !isPerformersPickOpen)"
+              >
+                <i appIcon icon="plus" appSquare="5"></i>
+                <app-dropdown
+                  [isOpen]="isPerformersPickOpen"
+                  type="avatars"
+                  (select)="onTypeSelect('performers', false, $event)"
+                  (outside)="onTypeSelect('performers', false)"
+                  [options]="responsiblePickOpenOptions"
+                ></app-dropdown>
+              </div>
+            }
+          </div>
+        </div>
+      }
+      @if (taskDetailForm.get("startDate"); as startDate) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name--date">
+            <i appIcon icon="calendar" appSquare="10"></i>
+            <p class="text-body-10">начало</p>
+          </div>
+
+          <div class="kanban__detail-info-name">
+            @if (!showEditStartDatePicker) {
+              <p
+                (click)="showEditStartDatePicker = true"
+                class="text-body-10"
+                style="color: var(--grey-for-text)"
+              >
+                {{ startDate.value | date: "dd.MM.yy" }}
+              </p>
+            } @else {
+              <app-input
+                type="date"
+                size="small"
+                [mask]="'d0.M0.yy'"
+                placeholder="21.05.25"
+                formControlName="startDate"
+                [error]="startDate | controlError"
+              ></app-input>
+            }
+
+            <app-badge [color]="statusOfTask.color" type="start">{{ statusOfTask.text }}</app-badge>
+          </div>
+        </div>
+      }
+      @if (taskDetailForm.get("deadline"); as deadline) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name--date">
+            <i appIcon icon="calendar" appSquare="10"></i>
+            <p class="text-body-10">дедлайн</p>
+          </div>
+
+          <div class="kanban__detail-info-name">
+            @if (!showEditDeadlineDatePicker) {
+              <p
+                (click)="showEditDeadlineDatePicker = true"
+                class="text-body-10"
+                style="color: var(--grey-for-text)"
+              >
+                {{ deadline.value | date: "dd.MM.yy" }}
+              </p>
+            } @else {
+              <app-input
+                type="date"
+                size="small"
+                [mask]="'d0.M0.yy'"
+                placeholder="21.05.25"
+                formControlName="deadline"
+                [error]="deadline | controlError"
+              ></app-input>
+            }
+
+            <app-badge [color]="statusOfTask.color" type="deadline">{{
+              remainingDaysDeadline() +
+                " " +
+                (remainingDaysDeadline() | pluralize: ["день", "дня", "дней"])
+            }}</app-badge>
+          </div>
+        </div>
+      }
+    </div>
+
+    <div class="kanban__detail-info">
+      @if (taskDetailForm.get("tags"); as tags) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name">
+            <i appIcon icon="hashtag" appSquare="10"></i>
+            <p class="text-body-10">тег</p>
+          </div>
+
+          @if (tags.value.length > 0) {
+            <div class="kanban__detail-info-list">
+              @for (tag of tags.value; track tag.id) {
+                <app-tag
+                  [canEdit]="true"
+                  [canDelete]="true"
+                  (delete)="onDeleteTaskTag(tag.id)"
+                  (edit)="onEditTaskTag(tag.id)"
+                  [color]="tag.color"
+                  >{{ "#" + tag.title }}</app-tag
+                >
+              }
+            </div>
+          }
+          @if (tags.value.length < 3) {
+            <div class="kanban__detail-add-object" (click)="onTypeSelect('tags', !isTagsPickOpen)">
+              <i appIcon icon="plus" appSquare="5"></i>
+              <app-dropdown
+                [isOpen]="isTagsPickOpen"
+                type="tags"
+                [creatingTag]="creatingTag"
+                [editingTag]="editingTag"
+                (tagInfo)="createTag($event)"
+                (updateTag)="onUpdateTag($event)"
+                (select)="onTypeSelect('tags', false, $event)"
+                (outside)="onTypeSelect('tags', false)"
+                [options]="tagsPickOptions"
+              ></app-dropdown>
+            </div>
           }
+        </div>
+      }
+      @if (taskDetailForm.get("goal"); as goal) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name">
+            <i appIcon icon="goal" appSquare="10"></i>
+            <p class="text-body-10">цель</p>
+          </div>
 
-          <app-button
-            size="medium"
-            customTypographyClass="text-body-12"
-            appearance="outline"
-            color="green"
-            (click)="isLeader() && (showUnAcceptResultModal = true)"
-            >{{ isLeader() ? "вы приняли работу" : "результат принят" }}</app-button
+          @if (goal.value) {
+            <app-tag
+              color="soft"
+              [canDelete]="true"
+              (delete)="onDeleteTaskGoal()"
+              (click)="
+                $event.stopPropagation();
+                showChangeGoalModal = true;
+                onTypeSelect('goal', !isGoalPickOpen)
+              "
+              >{{
+                goal.value.title.length > 20
+                  ? goal.value.title.slice(0, 15) + "..."
+                  : goal.value.title
+              }}</app-tag
+            >
+
+            <app-modal [open]="showChangeGoalModal" (openChange)="showChangeGoalModal = false">
+              <div class="cancel" (click)="$event.stopPropagation()">
+                <p class="text-body-12 cancel__title">вы хотите изменить цель задачи?</p>
+
+                <div class="cancel__buttons">
+                  <app-button
+                    size="medium"
+                    customTypographyClass="text-body-12"
+                    color="grey"
+                    (click)="showChangeGoalModal = false"
+                    >отмена</app-button
+                  >
+                  <app-button
+                    size="medium"
+                    customTypographyClass="text-body-12"
+                    (click)="showChangeGoalModal = false"
+                    >изменить</app-button
+                  >
+                </div>
+              </div>
+            </app-modal>
+          } @else {
+            <div class="kanban__detail-add-object" (click)="onTypeSelect('goal', !isGoalPickOpen)">
+              <i appIcon icon="plus" appSquare="5"></i>
+            </div>
+          }
+          <app-dropdown
+            [isOpen]="isGoalPickOpen"
+            type="goals"
+            (select)="onTypeSelect('goal', false, $event)"
+            (outside)="onTypeSelect('goal', false)"
+            [options]="goalPickOptions"
+          ></app-dropdown>
+        </div>
+      }
+      @if (taskDetailForm.get("skills"); as skills) {
+        <div class="kanban__detail-info-wrapper" style="flex-grow: 1">
+          <div class="kanban__detail-info-name">
+            <i appIcon icon="squiz" appSquare="10"></i>
+            <p class="text-body-10">навыки</p>
+          </div>
+
+          @if (skills.value.length > 0) {
+            <div class="kanban__detail-info-list">
+              @for (skill of skills.value; track skill.id) {
+                <app-tag
+                  [appearance]="skill.category.name.includes('Soft skills') ? 'outline' : 'inline'"
+                  [color]="skill.category.name.includes('Soft skills') ? 'soft' : 'complete'"
+                  [canDelete]="true"
+                  (click)="skillsGroupsModalOpen.set(true)"
+                  >{{
+                    skill.name.length > 20 ? skill.name.slice(0, 17) + "..." : skill.name
+                  }}</app-tag
+                >
+              }
+            </div>
+          }
+          @if (skills.value.length < 3) {
+            <div
+              class="kanban__detail-add-object"
+              (click)="(isCreator() || isLeader()) && skillsGroupsModalOpen.set(true)"
+            >
+              <i appIcon icon="plus" appSquare="5"></i>
+            </div>
+          }
+        </div>
+      }
+    </div>
+
+    <app-modal
+      [open]="skillsGroupsModalOpen()"
+      (openChange)="skillsGroupsModalOpen.set(false)"
+      class="modal"
+    >
+      <div class="modal__wrapper" (click)="$event.stopPropagation()">
+        <button
+          type="button"
+          class="modal__close"
+          aria-label="Закрыть библиотеку навыков"
+          (click)="closeSkillsGroupsModal()"
+        >
+          <i appIcon icon="cross" appSquare="12"></i>
+        </button>
+        <p class="text-body-14">библиотека навыков</p>
+        <div class="modal__content">
+          <div class="modal__skills-groups">
+            <ul>
+              @for (skillsGroup of nestedSkills$ | async; track skillsGroup.id) {
+                <li>
+                  <app-skills-group
+                    [title]="skillsGroup.name"
+                    [options]="skillsGroup.skills"
+                    [selected]="selectedSkills"
+                    [hasOpenGroups]="hasOpenSkillsGroups"
+                    [isOpen]="openGroupIndex === skillsGroup.id"
+                    (optionToggled)="onToggleSkill($event)"
+                    (groupToggled)="onGroupToggled($event, skillsGroup.id)"
+                  ></app-skills-group>
+                </li>
+              }
+            </ul>
+          </div>
+        </div>
+        <app-button size="big" (click)="toggleSkillsGroupsModal()">cохранить</app-button>
+      </div>
+    </app-modal>
+
+    <div class="kanban__divider">
+      <img
+        alt="divider image"
+        src="assets/images/projects/shared/divider.png"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+
+    @if (taskDetailForm.get("description"); as description) {
+      <div class="kanban__detail-description">
+        <div (click)="onChangeText($event)" class="text-body-12 about__text">
+          @if (isChangeDescriptionText()) {
+            <p #descEl [innerHTML]="description.value | parseLinks | parseBreaks"></p>
+            @if (descriptionExpandable) {
+              <div
+                class="read-more text-body-10"
+                (click)="onExpandDescription(descEl, 'expanded', readFullDescription)"
+              >
+                {{ readFullDescription ? "cкрыть" : "подробнее" }}
+              </div>
+            }
+          } @else {
+            <app-textarea
+              (keydown.enter)="
+                description.value
+                  ? isChangeDescriptionText.set(true)
+                  : isChangeDescriptionText.set(false)
+              "
+              (clickOutside)="
+                description.value
+                  ? isChangeDescriptionText.set(true)
+                  : isChangeDescriptionText.set(false)
+              "
+              (click)="$event.stopPropagation()"
+              size="big"
+              formControlName="description"
+              placeholder="добавить описание"
+            ></app-textarea>
+          }
+        </div>
+      </div>
+    }
+
+    <div class="kanban__detail-files">
+      @if (taskDetailForm.get("files")?.value; as files) {
+        @if (files.length > 0) {
+          @for (file of files; track $index) {
+            <app-file-item
+              class="kanban__detail-file"
+              [name]="file.name.length > 14 ? file.name.slice(0, 13) : file.name"
+              [link]="file.link"
+              [type]="file.extension"
+              [size]="file.size"
+            ></app-file-item>
+          }
+        }
+        @if (files.length < 3) {
+          <div class="kanban__detail-file--empty">
+            <label class="kanban__detail-add-responsible" [for]="controlId">
+              <i appIcon icon="plus" appSquare="5"></i>
+              <input
+                [id]="controlId"
+                hidden
+                [disabled]="!(isLeader() || isCreator())"
+                type="file"
+                accept=".pdf, .docx, .doc, .pptx, .jpeg, .jpg, .png, .webp"
+                (change)="onUpdate($event)"
+              />
+            </label>
+
+            <p class="text-body-10">файл</p>
+          </div>
+        }
+      }
+    </div>
+
+    <div class="kanban__divider">
+      <img
+        alt="divider image"
+        src="assets/images/projects/shared/divider.png"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+
+    <div class="kanban__detail-comments" [style.min-height]="messages().length ? '150px' : '0px'">
+      <cdk-virtual-scroll-viewport
+        class="messages"
+        [itemSize]="44"
+        minBufferPx="400"
+        maxBufferPx="800"
+        [style.min-height]="messages().length ? '150px' : '0px'"
+      >
+        <div class="messages__wrapper" *cdkVirtualFor="let message of messages()">
+          <p class="text-body-10 messages__date">{{ message.createdAt | date: "dd MMMM yyyy" }}</p>
+          <div class="message">
+            <app-avatar [size]="30" [url]="message.author?.avatar"></app-avatar>
+            <div class="message__wrapper">
+              <div class="message__header">
+                <span class="message__author text-body-10">
+                  {{ message.author?.firstName }} {{ message.author?.lastName }}
+                </span>
+                <span class="message__time text-body-10">{{
+                  message.createdAt | date: "HH:MM"
+                }}</span>
+              </div>
+
+              <p class="message__text text-body-10">{{ message.text }}</p>
+            </div>
+          </div>
+        </div>
+      </cdk-virtual-scroll-viewport>
+
+      <form class="form" [formGroup]="messageForm" (submit)="onSubmitMessage()">
+        @if (messageForm.get("text"); as text) {
+          <div class="form__row">
+            <app-input
+              size="big"
+              formControlName="text"
+              [hasBorder]="false"
+              [autofocus]="isCommentedClick"
+              [error]="text | controlError"
+              class="form__input text-body-12"
+              placeholder="добавить комментарий"
+              [appValue]="messageForm.get('text')?.value"
+              (keydown.enter)="onEnterKeyDown($event)"
+            ></app-input>
+
+            <div class="form__actions">
+              <label class="form__attach">
+                <input type="file" multiple accept="*/*" (input)="onUpload($event)" />
+                <i appIcon icon="attach" appSquare="20"></i>
+              </label>
+
+              <button class="form__send" type="submit">
+                <i appIcon icon="send" appSquare="7"></i>
+              </button>
+            </div>
+          </div>
+        }
+      </form>
+    </div>
+  </div>
+
+  <app-modal [open]="showAttachResultModal" (openChange)="showAttachResultModal = false">
+    <div
+      class="cancel"
+      style="width: 500px; align-items: stretch"
+      (click)="$event.stopPropagation()"
+    >
+      <div class="lists__section">
+        <p class="text-body-12 lists__title">результат выполнения задачи</p>
+        <i appIcon icon="task" class="lists__icon" appSquare="12"></i>
+      </div>
+
+      <form class="result__form" [formGroup]="sendResultForm" (ngSubmit)="onSubmit()">
+        @if (sendResultForm.get("description"); as description) {
+          <fieldset>
+            <app-textarea
+              size="big"
+              id="description"
+              formControlName="description"
+              [error]="description | controlError"
+              placeholder="Сделаны три таблицы, две из которых надо посмотреть..."
+            ></app-textarea>
+            @if (description | controlError: "required") {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            }
+            @if (description | controlError: "maxlength") {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_TOO_LONG }}
+                @if (description.errors) {
+                  {{ description.errors["maxlength"]["requiredLength"] }}
+                }
+              </div>
+            }
+            @if (description | controlError: "minlength") {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_TOO_SHORT }}
+                @if (description.errors) {
+                  {{ description.errors["minlength"]["requiredLength"] }}
+                }
+              </div>
+            }
+          </fieldset>
+        }
+        @if (sendResultForm.get("accompanyingFile"); as accompanyingFile) {
+          <div
+            class="result__form--cv"
+            [class.result__form-error]="accompanyingFile | controlError: 'required'"
           >
+            <app-upload-file
+              [error]="accompanyingFile | controlError"
+              id="accompanyingFile"
+              formControlName="accompanyingFile"
+              accept=".pdf, .docx, .doc, .word, .png, .jpg, .jpeg"
+            >
+              <ng-container emptyPlaceholder>
+                <div class="result__form--cv-empty">
+                  <i appIcon icon="file" appSquare="10"></i>
+                  <p class="text-body-12 result__form--cv-text">
+                    файл в любом формате <br />весом до 100МБ
+                  </p>
+                </div>
+                @if (accompanyingFile | controlError: "required") {
+                  <p class="error text-body-10">загрузите файл</p>
+                }
+              </ng-container>
+            </app-upload-file>
+          </div>
+        }
+
+        <app-button size="big" (click)="onSubmit()" [loader]="sendFormIsSubmitting" type="submit">{{
+          taskDetailInfo()?.result ? "сохранить изменения в результате работы" : "завершить задачу"
+        }}</app-button>
+      </form>
+    </div>
+  </app-modal>
+
+  <app-modal [open]="showResultModal" (openChange)="showResultModal = false">
+    <div
+      class="cancel"
+      (click)="$event.stopPropagation()"
+      style="width: 500px; align-items: flex-start; justify-content: flex-start"
+    >
+      <div class="lists__section">
+        <p class="text-body-12 lists__title">результат выполнения задачи</p>
+        <i appIcon icon="task" class="lists__icon" appSquare="12"></i>
+      </div>
+
+      @if (taskDetailInfo()?.result; as result) {
+        <p class="cancel__text text-body-10">{{ result.description }}</p>
+
+        <div
+          class="cancel__footer"
+          [style.justify-content]="result.accompanyingFile ? 'space-beetwen' : 'flex-end'"
+        >
+          @if (result.accompanyingFile; as file) {
+            <app-file-item
+              [name]="file.name"
+              [link]="file.link"
+              [type]="file.extension"
+              [size]="file.size"
+            ></app-file-item>
+          }
+          @if (isPerformer() || isResponsible()) {
+            <div class="cancel__footer-actions">
+              <app-button
+                customTypographyClass="text-body-12"
+                color="red"
+                (click)="showDeleteResultModal = true"
+              >
+                <i appIcon icon="basket" appSquare="12"></i>
+              </app-button>
+
+              <app-button
+                customTypographyClass="text-body-12"
+                color="primary"
+                appearance="outline"
+                (click)="showAttachResultModal = true"
+              >
+                <i appIcon icon="edit-pen" appSquare="12" appearance="outline"></i>
+              </app-button>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  </app-modal>
+
+  <app-modal [open]="showAcceptResultModal" (openChange)="showAcceptResultModal = false">
+    <div class="cancel" (click)="$event.stopPropagation()">
+      <p class="text-body-12 cancel__title">принять выполнение задачи</p>
+
+      <i appIcon icon="check" appSquare="60" class="cancel__icon" style="color: var(--green)"></i>
+
+      <div class="cancel__buttons">
+        <app-button
+          customTypographyClass="text-body-12"
+          size="medium"
+          (click)="showAcceptResultModal = false"
+          >принять</app-button
+        >
+
+        <app-button
+          (click)="showAcceptResultModal = false; isCommentedClick = true"
+          customTypographyClass="text-body-12"
+          color="gold"
+          size="medium"
+          >комментировать</app-button
+        >
+      </div>
+    </div>
+  </app-modal>
+
+  <app-modal [open]="showUnAcceptResultModal" (openChange)="showUnAcceptResultModal = false">
+    <div class="cancel" (click)="$event.stopPropagation()">
+      <p class="text-body-12 cancel__title">вы уверены, что хотите снять приемку работы?</p>
+
+      <i appIcon icon="sad-smile" appSquare="50" class="cancel__icon"></i>
+
+      <app-button customTypographyClass="text-body-12" size="big" color="red"
+        >удалить результат</app-button
+      >
+    </div>
+  </app-modal>
+
+  <app-modal [open]="showDeleteResultModal" (openChange)="showDeleteResultModal = false">
+    <div class="cancel" (click)="$event.stopPropagation()">
+      <p class="text-body-12 cancel__title">
+        вы уверены, что хотите удалить текущий результат работы
+      </p>
+
+      <i appIcon icon="sad-smile" appSquare="50" class="cancel__icon"></i>
+
+      <app-button customTypographyClass="text-body-12" size="big" color="red"
+        >отменить приемку работы</app-button
+      >
+    </div>
+  </app-modal>
+
+  <app-modal
+    [open]="showLeaderCommentedResultModal"
+    (openChange)="showLeaderCommentedResultModal = false"
+  >
+    <div class="cancel" (click)="$event.stopPropagation()" style="width: 350px; padding: 24px">
+      <p class="text-body-14 cancel__title">
+        вы уверены, что исправили результат по комментариям от лидера?
+      </p>
+
+      <i appIcon icon="check" appSquare="60" class="cancel__icon" style="color: var(--green)"></i>
+
+      <app-button
+        customTypographyClass="text-body-12"
+        size="big"
+        (click)="showLeaderCommentedResultModal = false"
+        >комментарии решены</app-button
+      >
+    </div>
+  </app-modal>
+} @else {
+  <div class="kanban__detail" [formGroup]="taskDetailForm">
+    <div class="kanban__detail-top">
+      <div class="kanban__detail-buttons">
+        @if (!isTaskResult()) {
+          @if (
+            isExternal() || ((isLeader() || isCreator()) && !isPerformer() && !isResponsible())
+          ) {
+            <app-button
+              appearance="outline"
+              size="medium"
+              color="gold"
+              customTypographyClass="text-body-12"
+              >ожидание результата</app-button
+            >
+          } @else if (isResponsible() || isPerformer()) {
+            <app-button
+              size="medium"
+              appearance="inline"
+              color="primary"
+              customTypographyClass="text-body-12"
+              (click)="showAttachResultModal = true"
+              >прикрепить результа</app-button
+            >
+          }
         } @else {
-          @if (isLeader() && !isLeaderLeaveComment()) {
+          @if (isCommented) {
             <app-button
-              size="big"
+              [appearance]="isCommentedByLeader && !isLeader() ? 'inline' : 'outline'"
+              size="medium"
+              [color]="isCommentedByLeader && !isLeader() ? 'red' : 'gold'"
               customTypographyClass="text-body-12"
-              (click)="showAcceptResultModal = true"
-              >приемка</app-button
+              (click)="
+                isCommentedByLeader && !isLeader() && (showLeaderCommentedResultModal = true)
+              "
+              >{{
+                isCommentedByLeader && !isLeader() ? "комментарий лидера" : "вы прокомментировали"
+              }}</app-button
             >
           }
-          @if (!isCommentedByLeader) {
-            @if (isResponsible() || isPerformer()) {
+          @if (isLeaderAcceptResult()) {
+            @if (!isExternal()) {
+              <div class="kanban__detail-top--accept" (click)="isCompletedTask = true"></div>
+            }
+
+            <app-button
+              size="medium"
+              customTypographyClass="text-body-12"
+              appearance="outline"
+              color="green"
+              (click)="isLeader() && (showUnAcceptResultModal = true)"
+              >{{ isLeader() ? "вы приняли работу" : "результат принят" }}</app-button
+            >
+          } @else {
+            @if (isLeader() && !isLeaderLeaveComment()) {
               <app-button
-                appearance="outline"
-                size="medium"
-                color="gold"
+                size="big"
                 customTypographyClass="text-body-12"
-                >ожидание проверки</app-button
+                (click)="showAcceptResultModal = true"
+                >приемка</app-button
               >
             }
+            @if (!isCommentedByLeader) {
+              @if (isResponsible() || isPerformer()) {
+                <app-button
+                  appearance="outline"
+                  size="medium"
+                  color="gold"
+                  customTypographyClass="text-body-12"
+                  >ожидание проверки</app-button
+                >
+              }
+            }
           }
+
+          <app-button
+            size="medium"
+            (click)="showResultModal = true"
+            customTypographyClass="text-body-12"
+            appearance="outline"
+            >результат задачи</app-button
+          >
         }
+      </div>
 
-        <app-button
-          size="medium"
-          (click)="showResultModal = true"
-          customTypographyClass="text-body-12"
-          appearance="outline"
-          >результат задачи</app-button
-        >
-      }
+      <div class="kanban__detail-top-menu">
+        @if (taskDetailForm.get("type"); as type) {
+          <div
+            class="kanban__detail-type"
+            (clickOutside)="onTypeSelect('type', isActionTypeOpen, type.value)"
+            (click)="onTypeSelect('type', !isActionTypeOpen, type.value)"
+          >
+            <i appIcon [icon]="getActionType(type.value)" appSquare="15"></i>
+            <app-dropdown
+              [isOpen]="isActionTypeOpen"
+              type="icons"
+              (select)="onTypeSelect('type', false, $event)"
+              (outside)="onTypeSelect('type', false)"
+              [options]="actionTypeOptions"
+            ></app-dropdown>
+          </div>
+        }
+        @if (taskDetailForm.get("priority"); as priority) {
+          <div
+            class="kanban__detail-priority-wrapper"
+            (clickOutside)="onTypeSelect('priority', isPriorityTypeOpen, priority.value)"
+            (click)="onTypeSelect('priority', !isPriorityTypeOpen, priority.value)"
+          >
+            <div
+              class="kanban__detail-priority"
+              [ngStyle]="getPriorityType(priority.value, 'color')"
+            ></div>
+            <app-dropdown
+              [isOpen]="isPriorityTypeOpen"
+              type="shapes"
+              (select)="onTypeSelect('priority', false, $event)"
+              (outside)="onTypeSelect('priority', false)"
+              [options]="priorityTypeOptions"
+            ></app-dropdown>
+          </div>
+        }
+        @if (isCreator() || isLeader()) {
+          <div
+            class="kanban__detail-delete-wrapper"
+            (clickOutside)="onTypeSelect('delete', isDeleteTypeOpen)"
+            (click)="onTypeSelect('delete', !isDeleteTypeOpen)"
+          >
+            <i class="kanban__detail-delete" appIcon icon="dots" appSquare="10"></i>
+            <app-dropdown
+              [isOpen]="isDeleteTypeOpen"
+              type="text"
+              colorText="red"
+              (select)="onTypeSelect('delete', false, $event)"
+              (outside)="onTypeSelect('delete', false)"
+              [options]="priorityDeleteOptions"
+            ></app-dropdown>
+          </div>
+        }
+      </div>
     </div>
 
-    <div class="kanban__detail-top-menu">
-      @if (taskDetailForm.get("type"); as type) {
-        <div
-          class="kanban__detail-type"
-          (clickOutside)="onTypeSelect('type', isActionTypeOpen, type.value)"
-          (click)="onTypeSelect('type', !isActionTypeOpen, type.value)"
-        >
-          <i appIcon [icon]="getActionType(type.value)" appSquare="15"></i>
-          <app-dropdown
-            [isOpen]="isActionTypeOpen"
-            type="icons"
-            (select)="onTypeSelect('type', false, $event)"
-            (outside)="onTypeSelect('type', false)"
-            [options]="actionTypeOptions"
-          ></app-dropdown>
+    <div class="kanban__detail-general">
+      @if (taskDetailForm.get("title")?.value; as title) {
+        <p class="text-body-14" formControlName="title">{{ title }}</p>
+      }
+      @if (taskDetailForm.get("score")?.value; as score) {
+        <div class="kanban__detail-general-score">
+          <i appIcon icon="star" appSquare="10"></i>
+          <p class="text-body-12" style="color: var(--grey-for-text)">{{ score }}</p>
         </div>
       }
-      @if (taskDetailForm.get("priority"); as priority) {
-        <div
-          class="kanban__detail-priority-wrapper"
-          (clickOutside)="onTypeSelect('priority', isPriorityTypeOpen, priority.value)"
-          (click)="onTypeSelect('priority', !isPriorityTypeOpen, priority.value)"
-        >
-          <div
-            class="kanban__detail-priority"
-            [ngStyle]="getPriorityType(priority.value, 'color')"
-          ></div>
-          <app-dropdown
-            [isOpen]="isPriorityTypeOpen"
-            type="shapes"
-            (select)="onTypeSelect('priority', false, $event)"
-            (outside)="onTypeSelect('priority', false)"
-            [options]="priorityTypeOptions"
-          ></app-dropdown>
+    </div>
+
+    <div class="kanban__detail-info" style="justify-content: flex-end; align-items: center">
+      @if (taskDetailInfo()?.creator; as creator) {
+        <div class="kanban__detail-info-name" style="align-items: center">
+          <app-avatar [size]="10" [url]="creator.avatar"></app-avatar>
+          <p class="text-body-6" style="color: var(--grey-for-text)">
+            {{ creator.firstName + " " + creator.lastName[0] }}
+          </p>
         </div>
       }
-      @if (isCreator() || isLeader()) {
-        <div
-          class="kanban__detail-delete-wrapper"
-          (clickOutside)="onTypeSelect('delete', isDeleteTypeOpen)"
-          (click)="onTypeSelect('delete', !isDeleteTypeOpen)"
-        >
-          <i class="kanban__detail-delete" appIcon icon="dots" appSquare="10"></i>
-          <app-dropdown
-            [isOpen]="isDeleteTypeOpen"
-            type="text"
-            colorText="red"
-            (select)="onTypeSelect('delete', false, $event)"
-            (outside)="onTypeSelect('delete', false)"
-            [options]="priorityDeleteOptions"
-          ></app-dropdown>
+
+      <p class="text-body-6">{{ taskDetailInfo()?.datetimeCreated | date: "dd.MM.yyyy HH:mm" }}</p>
+    </div>
+
+    <div class="kanban__divider">
+      <img
+        alt="divider image"
+        src="assets/images/projects/shared/divider.png"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+
+    <div class="kanban__detail-info" style="align-items: flex-start">
+      @if (taskDetailForm.get("responsible"); as responsible) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name">
+            <i appIcon icon="person" appSquare="10"></i>
+            <h6 class="text-body-10">ответственный</h6>
+          </div>
+
+          <div class="kanban__detail-info-name">
+            @if (responsible.value) {
+              <div
+                class="kanban__detail-avatar"
+                (mouseenter)="showEditAvatarIcon = true"
+                (mouseleave)="showEditAvatarIcon = false"
+              >
+                <app-avatar
+                  [style.opacity]="showEditAvatarIcon ? '0.7' : '1'"
+                  [size]="20"
+                  [url]="responsible.value.avatar"
+                ></app-avatar>
+
+                @if (showEditAvatarIcon) {
+                  <i
+                    appIcon
+                    icon="edit-pen"
+                    appSquare="8"
+                    (click)="onTypeSelect('responsible', !isResponsiblePickOpen)"
+                  ></i>
+                }
+
+                <app-dropdown
+                  [isOpen]="isResponsiblePickOpen"
+                  type="avatars"
+                  [options]="responsiblePickOpenOptions"
+                  (select)="onTypeSelect('responsible', false, $event)"
+                  (outside)="isResponsiblePickOpen = false"
+                ></app-dropdown>
+              </div>
+
+              <p class="text-body-10" style="color: var(--grey-for-text)">
+                {{ responsible.value.name }}
+              </p>
+            } @else {
+              <div
+                class="kanban__detail-add-responsible"
+                (clickOutside)="onTypeSelect('responsible', isResponsiblePickOpen)"
+                (click)="onTypeSelect('responsible', !isResponsiblePickOpen)"
+              >
+                <i appIcon icon="plus" appSquare="5"></i>
+                <app-dropdown
+                  [isOpen]="isResponsiblePickOpen"
+                  type="avatars"
+                  (select)="onTypeSelect('responsible', false, $event)"
+                  (outside)="onTypeSelect('responsible', false)"
+                  [options]="responsiblePickOpenOptions"
+                ></app-dropdown>
+              </div>
+            }
+          </div>
         </div>
       }
-    </div>
-  </div>
+      @if (taskDetailForm.get("performers"); as performers) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name">
+            <i appIcon icon="people-bold" appSquare="10"></i>
+            <h6 class="text-body-10">исполнители</h6>
+          </div>
 
-  <div class="kanban__detail-general">
-    @if (taskDetailForm.get("title")?.value; as title) {
-      <p class="text-body-14" formControlName="title">{{ title }}</p>
-    }
-    @if (taskDetailForm.get("score")?.value; as score) {
-      <div class="kanban__detail-general-score">
-        <i appIcon icon="star" appSquare="10"></i>
-        <p class="text-body-12" style="color: var(--grey-for-text)">{{ score }}</p>
-      </div>
-    }
-  </div>
+          <div class="kanban__detail-info-name">
+            @if (performers.value && performers.value.length >= 0 && performers.value.length <= 7) {
+              <div class="kanban__detail-performers">
+                @for (performer of performers.value; track $index) {
+                  <app-avatar [size]="20" [url]="performer.avatar"></app-avatar>
+                }
+              </div>
+            }
+            @if (!(performers.value && performers.value.length === 7)) {
+              <div
+                class="kanban__detail-add-responsible"
+                (clickOutside)="onTypeSelect('performers', isPerformersPickOpen)"
+                (click)="onTypeSelect('performers', !isPerformersPickOpen)"
+              >
+                <i appIcon icon="plus" appSquare="5"></i>
+                <app-dropdown
+                  [isOpen]="isPerformersPickOpen"
+                  type="avatars"
+                  (select)="onTypeSelect('performers', false, $event)"
+                  (outside)="onTypeSelect('performers', false)"
+                  [options]="responsiblePickOpenOptions"
+                ></app-dropdown>
+              </div>
+            }
+          </div>
+        </div>
+      }
+      @if (taskDetailForm.get("startDate"); as startDate) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name--date">
+            <i appIcon icon="calendar" appSquare="10"></i>
+            <p class="text-body-10">начало</p>
+          </div>
 
-  <div class="kanban__detail-info" style="justify-content: flex-end; align-items: center">
-    @if (taskDetailInfo()?.creator; as creator) {
-      <div class="kanban__detail-info-name" style="align-items: center">
-        <app-avatar [size]="10" [url]="creator.avatar"></app-avatar>
-        <p class="text-body-6" style="color: var(--grey-for-text)">
-          {{ creator.firstName + " " + creator.lastName[0] }}
-        </p>
-      </div>
-    }
+          <div class="kanban__detail-info-name">
+            @if (!showEditStartDatePicker) {
+              <p
+                (click)="showEditStartDatePicker = true"
+                class="text-body-10"
+                style="color: var(--grey-for-text)"
+              >
+                {{ startDate.value | date: "dd.MM.yy" }}
+              </p>
+            } @else {
+              <app-input
+                type="date"
+                size="small"
+                [mask]="'d0.M0.yy'"
+                placeholder="21.05.25"
+                formControlName="startDate"
+                [error]="startDate | controlError"
+              ></app-input>
+            }
 
-    <p class="text-body-6">{{ taskDetailInfo()?.datetimeCreated | date: "dd.MM.yyyy HH:mm" }}</p>
-  </div>
+            <app-badge [color]="statusOfTask.color" type="start">{{ statusOfTask.text }}</app-badge>
+          </div>
+        </div>
+      }
+      @if (taskDetailForm.get("deadline"); as deadline) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name--date">
+            <i appIcon icon="calendar" appSquare="10"></i>
+            <p class="text-body-10">дедлайн</p>
+          </div>
 
-  <div class="kanban__divider">
-    <img
-      alt="divider image"
-      src="assets/images/projects/shared/divider.png"
-      loading="lazy"
-      decoding="async"
-    />
-  </div>
+          <div class="kanban__detail-info-name">
+            @if (!showEditDeadlineDatePicker) {
+              <p
+                (click)="showEditDeadlineDatePicker = true"
+                class="text-body-10"
+                style="color: var(--grey-for-text)"
+              >
+                {{ deadline.value | date: "dd.MM.yy" }}
+              </p>
+            } @else {
+              <app-input
+                type="date"
+                size="small"
+                [mask]="'d0.M0.yy'"
+                placeholder="21.05.25"
+                formControlName="deadline"
+                [error]="deadline | controlError"
+              ></app-input>
+            }
 
-  <div class="kanban__detail-info" style="align-items: flex-start">
-    @if (taskDetailForm.get("responsible"); as responsible) {
-      <div class="kanban__detail-info-wrapper">
-        <div class="kanban__detail-info-name">
-          <i appIcon icon="person" appSquare="10"></i>
-          <h6 class="text-body-10">ответственный</h6>
+            <app-badge [color]="statusOfTask.color" type="deadline">{{
+              remainingDaysDeadline() +
+                " " +
+                (remainingDaysDeadline() | pluralize: ["день", "дня", "дней"])
+            }}</app-badge>
+          </div>
         </div>
+      }
+    </div>
 
-        <div class="kanban__detail-info-name">
-          @if (responsible.value) {
-            <div
-              class="kanban__detail-avatar"
-              (mouseenter)="showEditAvatarIcon = true"
-              (mouseleave)="showEditAvatarIcon = false"
-            >
-              <app-avatar
-                [style.opacity]="showEditAvatarIcon ? '0.7' : '1'"
-                [size]="20"
-                [url]="responsible.value.avatar"
-              ></app-avatar>
-
-              @if (showEditAvatarIcon) {
-                <i
-                  appIcon
-                  icon="edit-pen"
-                  appSquare="8"
-                  (click)="onTypeSelect('responsible', !isResponsiblePickOpen)"
-                ></i>
-              }
+    <div class="kanban__detail-info">
+      @if (taskDetailForm.get("tags"); as tags) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name">
+            <i appIcon icon="hashtag" appSquare="10"></i>
+            <p class="text-body-10">тег</p>
+          </div>
 
+          @if (tags.value.length > 0) {
+            <div class="kanban__detail-info-list">
+              @for (tag of tags.value; track tag.id) {
+                <app-tag
+                  [canEdit]="true"
+                  [canDelete]="true"
+                  (delete)="onDeleteTaskTag(tag.id)"
+                  (edit)="onEditTaskTag(tag.id)"
+                  [color]="tag.color"
+                  >{{ "#" + tag.title }}</app-tag
+                >
+              }
+            </div>
+          }
+          @if (tags.value.length < 3) {
+            <div class="kanban__detail-add-object" (click)="onTypeSelect('tags', !isTagsPickOpen)">
+              <i appIcon icon="plus" appSquare="5"></i>
               <app-dropdown
-                [isOpen]="isResponsiblePickOpen"
-                type="avatars"
-                [options]="responsiblePickOpenOptions"
-                (select)="onTypeSelect('responsible', false, $event)"
-                (outside)="isResponsiblePickOpen = false"
+                [isOpen]="isTagsPickOpen"
+                type="tags"
+                [creatingTag]="creatingTag"
+                [editingTag]="editingTag"
+                (tagInfo)="createTag($event)"
+                (updateTag)="onUpdateTag($event)"
+                (select)="onTypeSelect('tags', false, $event)"
+                (outside)="onTypeSelect('tags', false)"
+                [options]="tagsPickOptions"
               ></app-dropdown>
             </div>
+          }
+        </div>
+      }
+      @if (taskDetailForm.get("goal"); as goal) {
+        <div class="kanban__detail-info-wrapper">
+          <div class="kanban__detail-info-name">
+            <i appIcon icon="goal" appSquare="10"></i>
+            <p class="text-body-10">цель</p>
+          </div>
 
-            <p class="text-body-10" style="color: var(--grey-for-text)">
-              {{ responsible.value.name }}
-            </p>
-          } @else {
-            <div
-              class="kanban__detail-add-responsible"
-              (clickOutside)="onTypeSelect('responsible', isResponsiblePickOpen)"
-              (click)="onTypeSelect('responsible', !isResponsiblePickOpen)"
+          @if (goal.value) {
+            <app-tag
+              color="soft"
+              [canDelete]="true"
+              (delete)="onDeleteTaskGoal()"
+              (click)="
+                $event.stopPropagation();
+                showChangeGoalModal = true;
+                onTypeSelect('goal', !isGoalPickOpen)
+              "
+              >{{
+                goal.value.title.length > 20
+                  ? goal.value.title.slice(0, 15) + "..."
+                  : goal.value.title
+              }}</app-tag
             >
+
+            <app-modal [open]="showChangeGoalModal" (openChange)="showChangeGoalModal = false">
+              <div class="cancel" (click)="$event.stopPropagation()">
+                <p class="text-body-12 cancel__title">вы хотите изменить цель задачи?</p>
+
+                <div class="cancel__buttons">
+                  <app-button
+                    size="medium"
+                    customTypographyClass="text-body-12"
+                    color="grey"
+                    (click)="showChangeGoalModal = false"
+                    >отмена</app-button
+                  >
+                  <app-button
+                    size="medium"
+                    customTypographyClass="text-body-12"
+                    (click)="showChangeGoalModal = false"
+                    >изменить</app-button
+                  >
+                </div>
+              </div>
+            </app-modal>
+          } @else {
+            <div class="kanban__detail-add-object" (click)="onTypeSelect('goal', !isGoalPickOpen)">
               <i appIcon icon="plus" appSquare="5"></i>
-              <app-dropdown
-                [isOpen]="isResponsiblePickOpen"
-                type="avatars"
-                (select)="onTypeSelect('responsible', false, $event)"
-                (outside)="onTypeSelect('responsible', false)"
-                [options]="responsiblePickOpenOptions"
-              ></app-dropdown>
             </div>
           }
+          <app-dropdown
+            [isOpen]="isGoalPickOpen"
+            type="goals"
+            (select)="onTypeSelect('goal', false, $event)"
+            (outside)="onTypeSelect('goal', false)"
+            [options]="goalPickOptions"
+          ></app-dropdown>
         </div>
-      </div>
-    }
-    @if (taskDetailForm.get("performers"); as performers) {
-      <div class="kanban__detail-info-wrapper">
-        <div class="kanban__detail-info-name">
-          <i appIcon icon="people-bold" appSquare="10"></i>
-          <h6 class="text-body-10">исполнители</h6>
-        </div>
+      }
+      @if (taskDetailForm.get("skills"); as skills) {
+        <div class="kanban__detail-info-wrapper" style="flex-grow: 1">
+          <div class="kanban__detail-info-name">
+            <i appIcon icon="squiz" appSquare="10"></i>
+            <p class="text-body-10">навыки</p>
+          </div>
 
-        <div class="kanban__detail-info-name">
-          @if (performers.value && performers.value.length >= 0 && performers.value.length <= 7) {
-            <div class="kanban__detail-performers">
-              @for (performer of performers.value; track $index) {
-                <app-avatar [size]="20" [url]="performer.avatar"></app-avatar>
+          @if (skills.value.length > 0) {
+            <div class="kanban__detail-info-list">
+              @for (skill of skills.value; track skill.id) {
+                <app-tag
+                  [appearance]="skill.category.name.includes('Soft skills') ? 'outline' : 'inline'"
+                  [color]="skill.category.name.includes('Soft skills') ? 'soft' : 'complete'"
+                  [canDelete]="true"
+                  (click)="skillsGroupsModalOpen.set(true)"
+                  >{{
+                    skill.name.length > 20 ? skill.name.slice(0, 17) + "..." : skill.name
+                  }}</app-tag
+                >
               }
             </div>
           }
-          @if (!(performers.value && performers.value.length === 7)) {
+          @if (skills.value.length < 3) {
             <div
-              class="kanban__detail-add-responsible"
-              (clickOutside)="onTypeSelect('performers', isPerformersPickOpen)"
-              (click)="onTypeSelect('performers', !isPerformersPickOpen)"
+              class="kanban__detail-add-object"
+              (click)="(isCreator() || isLeader()) && skillsGroupsModalOpen.set(true)"
             >
               <i appIcon icon="plus" appSquare="5"></i>
-              <app-dropdown
-                [isOpen]="isPerformersPickOpen"
-                type="avatars"
-                (select)="onTypeSelect('performers', false, $event)"
-                (outside)="onTypeSelect('performers', false)"
-                [options]="responsiblePickOpenOptions"
-              ></app-dropdown>
             </div>
           }
         </div>
-      </div>
-    }
-    @if (taskDetailForm.get("startDate"); as startDate) {
-      <div class="kanban__detail-info-wrapper">
-        <div class="kanban__detail-info-name--date">
-          <i appIcon icon="calendar" appSquare="10"></i>
-          <p class="text-body-10">начало</p>
-        </div>
-
-        <div class="kanban__detail-info-name">
-          @if (!showEditStartDatePicker) {
-            <p
-              (click)="showEditStartDatePicker = true"
-              class="text-body-10"
-              style="color: var(--grey-for-text)"
-            >
-              {{ startDate.value | date: "dd.MM.yy" }}
-            </p>
-          } @else {
-            <app-input
-              type="date"
-              size="small"
-              [mask]="'d0.M0.yy'"
-              placeholder="21.05.25"
-              formControlName="startDate"
-              [error]="startDate | controlError"
-            ></app-input>
-          }
+      }
+    </div>
 
-          <app-badge [color]="statusOfTask.color" type="start">{{ statusOfTask.text }}</app-badge>
+    <app-modal
+      [open]="skillsGroupsModalOpen()"
+      (openChange)="skillsGroupsModalOpen.set(false)"
+      class="modal"
+    >
+      <div class="modal__wrapper" (click)="$event.stopPropagation()">
+        <button
+          appButton="icon"
+          type="button"
+          class="modal__close"
+          aria-label="Закрыть библиотеку навыков"
+          (click)="closeSkillsGroupsModal()"
+        >
+          <i appIcon icon="cross" appSquare="12"></i>
+        </button>
+        <p class="text-body-14">библиотека навыков</p>
+        <div class="modal__content">
+          <div class="modal__skills-groups">
+            <ul>
+              @for (skillsGroup of nestedSkills$ | async; track skillsGroup.id) {
+                <li>
+                  <app-skills-group
+                    [title]="skillsGroup.name"
+                    [options]="skillsGroup.skills"
+                    [selected]="selectedSkills"
+                    [hasOpenGroups]="hasOpenSkillsGroups"
+                    [isOpen]="openGroupIndex === skillsGroup.id"
+                    (optionToggled)="onToggleSkill($event)"
+                    (groupToggled)="onGroupToggled($event, skillsGroup.id)"
+                  ></app-skills-group>
+                </li>
+              }
+            </ul>
+          </div>
         </div>
+        <app-button size="big" (click)="toggleSkillsGroupsModal()">cохранить</app-button>
       </div>
-    }
-    @if (taskDetailForm.get("deadline"); as deadline) {
-      <div class="kanban__detail-info-wrapper">
-        <div class="kanban__detail-info-name--date">
-          <i appIcon icon="calendar" appSquare="10"></i>
-          <p class="text-body-10">дедлайн</p>
-        </div>
+    </app-modal>
 
-        <div class="kanban__detail-info-name">
-          @if (!showEditDeadlineDatePicker) {
-            <p
-              (click)="showEditDeadlineDatePicker = true"
-              class="text-body-10"
-              style="color: var(--grey-for-text)"
-            >
-              {{ deadline.value | date: "dd.MM.yy" }}
-            </p>
+    <div class="kanban__divider">
+      <img
+        alt="divider image"
+        src="assets/images/projects/shared/divider.png"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+
+    @if (taskDetailForm.get("description"); as description) {
+      <div class="kanban__detail-description">
+        <div (click)="onChangeText($event)" class="text-body-12 about__text">
+          @if (isChangeDescriptionText()) {
+            <p #descEl [innerHTML]="description.value | parseLinks | parseBreaks"></p>
+            @if (descriptionExpandable) {
+              <div
+                class="read-more text-body-10"
+                (click)="onExpandDescription(descEl, 'expanded', readFullDescription)"
+              >
+                {{ readFullDescription ? "cкрыть" : "подробнее" }}
+              </div>
+            }
           } @else {
-            <app-input
-              type="date"
-              size="small"
-              [mask]="'d0.M0.yy'"
-              placeholder="21.05.25"
-              formControlName="deadline"
-              [error]="deadline | controlError"
-            ></app-input>
+            <app-textarea
+              (keydown.enter)="
+                description.value
+                  ? isChangeDescriptionText.set(true)
+                  : isChangeDescriptionText.set(false)
+              "
+              (clickOutside)="
+                description.value
+                  ? isChangeDescriptionText.set(true)
+                  : isChangeDescriptionText.set(false)
+              "
+              (click)="$event.stopPropagation()"
+              size="big"
+              formControlName="description"
+              placeholder="добавить описание"
+            ></app-textarea>
           }
-
-          <app-badge [color]="statusOfTask.color" type="deadline">{{
-            remainingDaysDeadline() +
-              " " +
-              (remainingDaysDeadline() | pluralize: ["день", "дня", "дней"])
-          }}</app-badge>
         </div>
       </div>
     }
-  </div>
 
-  <div class="kanban__detail-info">
-    @if (taskDetailForm.get("tags"); as tags) {
-      <div class="kanban__detail-info-wrapper">
-        <div class="kanban__detail-info-name">
-          <i appIcon icon="hashtag" appSquare="10"></i>
-          <p class="text-body-10">тег</p>
-        </div>
+    <div class="kanban__detail-files">
+      @if (taskDetailForm.get("files")?.value; as files) {
+        @if (files.length > 0) {
+          @for (file of files; track $index) {
+            <app-file-item
+              class="kanban__detail-file"
+              [name]="file.name.length > 14 ? file.name.slice(0, 13) : file.name"
+              [link]="file.link"
+              [type]="file.extension"
+              [size]="file.size"
+            ></app-file-item>
+          }
+        }
+        @if (files.length < 3) {
+          <div class="kanban__detail-file--empty">
+            <label class="kanban__detail-add-responsible" [for]="controlId">
+              <i appIcon icon="plus" appSquare="5"></i>
+              <input
+                [id]="controlId"
+                hidden
+                [disabled]="!(isLeader() || isCreator())"
+                type="file"
+                accept=".pdf, .docx, .doc, .pptx, .jpeg, .jpg, .png, .webp"
+                (change)="onUpdate($event)"
+              />
+            </label>
 
-        @if (tags.value.length > 0) {
-          <div class="kanban__detail-info-list">
-            @for (tag of tags.value; track tag.id) {
-              <app-tag
-                [canEdit]="true"
-                [canDelete]="true"
-                (delete)="onDeleteTaskTag(tag.id)"
-                (edit)="onEditTaskTag(tag.id)"
-                [color]="tag.color"
-                >{{ "#" + tag.title }}</app-tag
-              >
-            }
+            <p class="text-body-10">файл</p>
           </div>
         }
-        @if (tags.value.length < 3) {
-          <div class="kanban__detail-add-object" (click)="onTypeSelect('tags', !isTagsPickOpen)">
-            <i appIcon icon="plus" appSquare="5"></i>
-            <app-dropdown
-              [isOpen]="isTagsPickOpen"
-              type="tags"
-              [creatingTag]="creatingTag"
-              [editingTag]="editingTag"
-              (tagInfo)="createTag($event)"
-              (updateTag)="onUpdateTag($event)"
-              (select)="onTypeSelect('tags', false, $event)"
-              (outside)="onTypeSelect('tags', false)"
-              [options]="tagsPickOptions"
-            ></app-dropdown>
+      }
+    </div>
+
+    <div class="kanban__divider">
+      <img
+        alt="divider image"
+        src="assets/images/projects/shared/divider.png"
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+
+    <div class="kanban__detail-comments" [style.min-height]="messages().length ? '150px' : '0px'">
+      <cdk-virtual-scroll-viewport
+        class="messages"
+        [itemSize]="44"
+        minBufferPx="400"
+        maxBufferPx="800"
+        [style.min-height]="messages().length ? '150px' : '0px'"
+      >
+        <div class="messages__wrapper" *cdkVirtualFor="let message of messages()">
+          <p class="text-body-10 messages__date">{{ message.createdAt | date: "dd MMMM yyyy" }}</p>
+          <div class="message">
+            <app-avatar [size]="30" [url]="message.author?.avatar"></app-avatar>
+            <div class="message__wrapper">
+              <div class="message__header">
+                <span class="message__author text-body-10">
+                  {{ message.author?.firstName }} {{ message.author?.lastName }}
+                </span>
+                <span class="message__time text-body-10">{{
+                  message.createdAt | date: "HH:MM"
+                }}</span>
+              </div>
+
+              <p class="message__text text-body-10">{{ message.text }}</p>
+            </div>
           </div>
-        }
-      </div>
-    }
-    @if (taskDetailForm.get("goal"); as goal) {
-      <div class="kanban__detail-info-wrapper">
-        <div class="kanban__detail-info-name">
-          <i appIcon icon="goal" appSquare="10"></i>
-          <p class="text-body-10">цель</p>
         </div>
+      </cdk-virtual-scroll-viewport>
 
-        @if (goal.value) {
-          <app-tag
-            color="soft"
-            [canDelete]="true"
-            (delete)="onDeleteTaskGoal()"
-            (click)="
-              $event.stopPropagation();
-              showChangeGoalModal = true;
-              onTypeSelect('goal', !isGoalPickOpen)
-            "
-            >{{
-              goal.value.title.length > 20
-                ? goal.value.title.slice(0, 15) + "..."
-                : goal.value.title
-            }}</app-tag
-          >
+      <form appFormLayout class="form" [formGroup]="messageForm" (submit)="onSubmitMessage()">
+        @if (messageForm.get("text"); as text) {
+          <div class="form__row">
+            <app-input
+              size="big"
+              formControlName="text"
+              [hasBorder]="false"
+              [autofocus]="isCommentedClick"
+              [error]="text | controlError"
+              class="form__input text-body-12"
+              placeholder="добавить комментарий"
+              [appValue]="messageForm.get('text')?.value"
+              (keydown.enter)="onEnterKeyDown($event)"
+            ></app-input>
 
-          <app-modal [open]="showChangeGoalModal" (openChange)="showChangeGoalModal = false">
-            <div class="cancel" (click)="$event.stopPropagation()">
-              <p class="text-body-12 cancel__title">вы хотите изменить цель задачи?</p>
+            <div class="form__actions">
+              <label class="form__attach">
+                <input type="file" multiple accept="*/*" (input)="onUpload($event)" />
+                <i appIcon icon="attach" appSquare="20"></i>
+              </label>
 
-              <div class="cancel__buttons">
-                <app-button
-                  size="medium"
-                  customTypographyClass="text-body-12"
-                  color="grey"
-                  (click)="showChangeGoalModal = false"
-                  >отмена</app-button
-                >
-                <app-button
-                  size="medium"
-                  customTypographyClass="text-body-12"
-                  (click)="showChangeGoalModal = false"
-                  >изменить</app-button
-                >
-              </div>
+              <button appButton="primary" class="form__send" type="submit">
+                <i appIcon icon="send" appSquare="7"></i>
+              </button>
             </div>
-          </app-modal>
-        } @else {
-          <div class="kanban__detail-add-object" (click)="onTypeSelect('goal', !isGoalPickOpen)">
-            <i appIcon icon="plus" appSquare="5"></i>
           </div>
         }
-        <app-dropdown
-          [isOpen]="isGoalPickOpen"
-          type="goals"
-          (select)="onTypeSelect('goal', false, $event)"
-          (outside)="onTypeSelect('goal', false)"
-          [options]="goalPickOptions"
-        ></app-dropdown>
+      </form>
+    </div>
+  </div>
+
+  <app-modal [open]="showAttachResultModal" (openChange)="showAttachResultModal = false">
+    <div
+      class="cancel"
+      style="width: 500px; align-items: stretch"
+      (click)="$event.stopPropagation()"
+    >
+      <div class="lists__section">
+        <p class="text-body-12 lists__title">результат выполнения задачи</p>
+        <i appIcon icon="task" class="lists__icon" appSquare="12"></i>
       </div>
-    }
-    @if (taskDetailForm.get("skills"); as skills) {
-      <div class="kanban__detail-info-wrapper" style="flex-grow: 1">
-        <div class="kanban__detail-info-name">
-          <i appIcon icon="squiz" appSquare="10"></i>
-          <p class="text-body-10">навыки</p>
-        </div>
 
-        @if (skills.value.length > 0) {
-          <div class="kanban__detail-info-list">
-            @for (skill of skills.value; track skill.id) {
-              <app-tag
-                [appearance]="skill.category.name.includes('Soft skills') ? 'outline' : 'inline'"
-                [color]="skill.category.name.includes('Soft skills') ? 'soft' : 'complete'"
-                [canDelete]="true"
-                (click)="skillsGroupsModalOpen.set(true)"
-                >{{
-                  skill.name.length > 20 ? skill.name.slice(0, 17) + "..." : skill.name
-                }}</app-tag
-              >
+      <form appFormLayout class="result__form" [formGroup]="sendResultForm" (ngSubmit)="onSubmit()">
+        @if (sendResultForm.get("description"); as description) {
+          <fieldset>
+            <app-textarea
+              size="big"
+              id="description"
+              formControlName="description"
+              [error]="description | controlError"
+              placeholder="Сделаны три таблицы, две из которых надо посмотреть..."
+            ></app-textarea>
+            @if (description | controlError: "required") {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
             }
-          </div>
+            @if (description | controlError: "maxlength") {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_TOO_LONG }}
+                @if (description.errors) {
+                  {{ description.errors["maxlength"]["requiredLength"] }}
+                }
+              </div>
+            }
+            @if (description | controlError: "minlength") {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_TOO_SHORT }}
+                @if (description.errors) {
+                  {{ description.errors["minlength"]["requiredLength"] }}
+                }
+              </div>
+            }
+          </fieldset>
         }
-        @if (skills.value.length < 3) {
+        @if (sendResultForm.get("accompanyingFile"); as accompanyingFile) {
           <div
-            class="kanban__detail-add-object"
-            (click)="(isCreator() || isLeader()) && skillsGroupsModalOpen.set(true)"
+            class="result__form--cv"
+            [class.result__form-error]="accompanyingFile | controlError: 'required'"
           >
-            <i appIcon icon="plus" appSquare="5"></i>
+            <app-upload-file
+              [error]="accompanyingFile | controlError"
+              id="accompanyingFile"
+              formControlName="accompanyingFile"
+              accept=".pdf, .docx, .doc, .word, .png, .jpg, .jpeg"
+            >
+              <ng-container emptyPlaceholder>
+                <div class="result__form--cv-empty">
+                  <i appIcon icon="file" appSquare="10"></i>
+                  <p class="text-body-12 result__form--cv-text">
+                    файл в любом формате <br />весом до 100МБ
+                  </p>
+                </div>
+                @if (accompanyingFile | controlError: "required") {
+                  <p class="error text-body-10">загрузите файл</p>
+                }
+              </ng-container>
+            </app-upload-file>
           </div>
         }
-      </div>
-    }
-  </div>
 
-  <app-modal
-    [open]="skillsGroupsModalOpen()"
-    (openChange)="skillsGroupsModalOpen.set(false)"
-    class="modal"
-  >
-    <div class="modal__wrapper" (click)="$event.stopPropagation()">
-      <button
-        type="button"
-        class="modal__close"
-        aria-label="Закрыть библиотеку навыков"
-        (click)="closeSkillsGroupsModal()"
-      >
-        <i appIcon icon="cross" appSquare="12"></i>
-      </button>
-      <p class="text-body-14">библиотека навыков</p>
-      <div class="modal__content">
-        <div class="modal__skills-groups">
-          <ul>
-            @for (skillsGroup of nestedSkills$ | async; track skillsGroup.id) {
-              <li>
-                <app-skills-group
-                  [title]="skillsGroup.name"
-                  [options]="skillsGroup.skills"
-                  [selected]="selectedSkills"
-                  [hasOpenGroups]="hasOpenSkillsGroups"
-                  [isOpen]="openGroupIndex === skillsGroup.id"
-                  (optionToggled)="onToggleSkill($event)"
-                  (groupToggled)="onGroupToggled($event, skillsGroup.id)"
-                ></app-skills-group>
-              </li>
-            }
-          </ul>
-        </div>
-      </div>
-      <app-button size="big" (click)="toggleSkillsGroupsModal()">cохранить</app-button>
+        <app-button size="big" (click)="onSubmit()" [loader]="sendFormIsSubmitting" type="submit">{{
+          taskDetailInfo()?.result ? "сохранить изменения в результате работы" : "завершить задачу"
+        }}</app-button>
+      </form>
     </div>
   </app-modal>
 
-  <div class="kanban__divider">
-    <img
-      alt="divider image"
-      src="assets/images/projects/shared/divider.png"
-      loading="lazy"
-      decoding="async"
-    />
-  </div>
-
-  @if (taskDetailForm.get("description"); as description) {
-    <div class="kanban__detail-description">
-      <div (click)="onChangeText($event)" class="text-body-12 about__text">
-        @if (isChangeDescriptionText()) {
-          <p #descEl [innerHTML]="description.value | parseLinks | parseBreaks"></p>
-          @if (descriptionExpandable) {
-            <div
-              class="read-more text-body-10"
-              (click)="onExpandDescription(descEl, 'expanded', readFullDescription)"
-            >
-              {{ readFullDescription ? "cкрыть" : "подробнее" }}
-            </div>
-          }
-        } @else {
-          <app-textarea
-            (keydown.enter)="
-              description.value
-                ? isChangeDescriptionText.set(true)
-                : isChangeDescriptionText.set(false)
-            "
-            (clickOutside)="
-              description.value
-                ? isChangeDescriptionText.set(true)
-                : isChangeDescriptionText.set(false)
-            "
-            (click)="$event.stopPropagation()"
-            size="big"
-            formControlName="description"
-            placeholder="добавить описание"
-          ></app-textarea>
-        }
-      </div>
-    </div>
-  }
-
-  <div class="kanban__detail-files">
-    @if (taskDetailForm.get("files")?.value; as files) {
-      @if (files.length > 0) {
-        @for (file of files; track $index) {
-          <app-file-item
-            class="kanban__detail-file"
-            [name]="file.name.length > 14 ? file.name.slice(0, 13) : file.name"
-            [link]="file.link"
-            [type]="file.extension"
-            [size]="file.size"
-          ></app-file-item>
-        }
-      }
-      @if (files.length < 3) {
-        <div class="kanban__detail-file--empty">
-          <label class="kanban__detail-add-responsible" [for]="controlId">
-            <i appIcon icon="plus" appSquare="5"></i>
-            <input
-              [id]="controlId"
-              hidden
-              [disabled]="!(isLeader() || isCreator())"
-              type="file"
-              accept=".pdf, .docx, .doc, .pptx, .jpeg, .jpg, .png, .webp"
-              (change)="onUpdate($event)"
-            />
-          </label>
-
-          <p class="text-body-10">файл</p>
-        </div>
-      }
-    }
-  </div>
-
-  <div class="kanban__divider">
-    <img
-      alt="divider image"
-      src="assets/images/projects/shared/divider.png"
-      loading="lazy"
-      decoding="async"
-    />
-  </div>
-
-  <div class="kanban__detail-comments" [style.min-height]="messages().length ? '150px' : '0px'">
-    <cdk-virtual-scroll-viewport
-      class="messages"
-      [itemSize]="44"
-      minBufferPx="400"
-      maxBufferPx="800"
-      [style.min-height]="messages().length ? '150px' : '0px'"
+  <app-modal [open]="showResultModal" (openChange)="showResultModal = false">
+    <div
+      class="cancel"
+      (click)="$event.stopPropagation()"
+      style="width: 500px; align-items: flex-start; justify-content: flex-start"
     >
-      <div class="messages__wrapper" *cdkVirtualFor="let message of messages()">
-        <p class="text-body-10 messages__date">{{ message.createdAt | date: "dd MMMM yyyy" }}</p>
-        <div class="message">
-          <app-avatar [size]="30" [url]="message.author?.avatar"></app-avatar>
-          <div class="message__wrapper">
-            <div class="message__header">
-              <span class="message__author text-body-10">
-                {{ message.author?.firstName }} {{ message.author?.lastName }}
-              </span>
-              <span class="message__time text-body-10">{{
-                message.createdAt | date: "HH:MM"
-              }}</span>
-            </div>
-
-            <p class="message__text text-body-10">{{ message.text }}</p>
-          </div>
-        </div>
+      <div class="lists__section">
+        <p class="text-body-12 lists__title">результат выполнения задачи</p>
+        <i appIcon icon="task" class="lists__icon" appSquare="12"></i>
       </div>
-    </cdk-virtual-scroll-viewport>
-
-    <form class="form" [formGroup]="messageForm" (submit)="onSubmitMessage()">
-      @if (messageForm.get("text"); as text) {
-        <div class="form__row">
-          <app-input
-            size="big"
-            formControlName="text"
-            [hasBorder]="false"
-            [autofocus]="isCommentedClick"
-            [error]="text | controlError"
-            class="form__input text-body-12"
-            placeholder="добавить комментарий"
-            [appValue]="messageForm.get('text')?.value"
-            (keydown.enter)="onEnterKeyDown($event)"
-          ></app-input>
-
-          <div class="form__actions">
-            <label class="form__attach">
-              <input type="file" multiple accept="*/*" (input)="onUpload($event)" />
-              <i appIcon icon="attach" appSquare="20"></i>
-            </label>
 
-            <button class="form__send" type="submit">
-              <i appIcon icon="send" appSquare="7"></i>
-            </button>
-          </div>
-        </div>
-      }
-    </form>
-  </div>
-</div>
-
-<app-modal [open]="showAttachResultModal" (openChange)="showAttachResultModal = false">
-  <div class="cancel" style="width: 500px; align-items: stretch" (click)="$event.stopPropagation()">
-    <div class="lists__section">
-      <p class="text-body-12 lists__title">результат выполнения задачи</p>
-      <i appIcon icon="task" class="lists__icon" appSquare="12"></i>
-    </div>
-
-    <form class="result__form" [formGroup]="sendResultForm" (ngSubmit)="onSubmit()">
-      @if (sendResultForm.get("description"); as description) {
-        <fieldset>
-          <app-textarea
-            size="big"
-            id="description"
-            formControlName="description"
-            [error]="description | controlError"
-            placeholder="Сделаны три таблицы, две из которых надо посмотреть..."
-          ></app-textarea>
-          @if (description | controlError: "required") {
-            <div class="text-body-10 error">
-              {{ errorMessage.VALIDATION_REQUIRED }}
-            </div>
-          }
-          @if (description | controlError: "maxlength") {
-            <div class="text-body-10 error">
-              {{ errorMessage.VALIDATION_TOO_LONG }}
-              @if (description.errors) {
-                {{ description.errors["maxlength"]["requiredLength"] }}
-              }
-            </div>
+      @if (taskDetailInfo()?.result; as result) {
+        <p class="cancel__text text-body-10">{{ result.description }}</p>
+
+        <div
+          class="cancel__footer"
+          [style.justify-content]="result.accompanyingFile ? 'space-beetwen' : 'flex-end'"
+        >
+          @if (result.accompanyingFile; as file) {
+            <app-file-item
+              [name]="file.name"
+              [link]="file.link"
+              [type]="file.extension"
+              [size]="file.size"
+            ></app-file-item>
           }
-          @if (description | controlError: "minlength") {
-            <div class="text-body-10 error">
-              {{ errorMessage.VALIDATION_TOO_SHORT }}
-              @if (description.errors) {
-                {{ description.errors["minlength"]["requiredLength"] }}
-              }
+          @if (isPerformer() || isResponsible()) {
+            <div class="cancel__footer-actions">
+              <app-button
+                customTypographyClass="text-body-12"
+                color="red"
+                (click)="showDeleteResultModal = true"
+              >
+                <i appIcon icon="basket" appSquare="12"></i>
+              </app-button>
+
+              <app-button
+                customTypographyClass="text-body-12"
+                color="primary"
+                appearance="outline"
+                (click)="showAttachResultModal = true"
+              >
+                <i appIcon icon="edit-pen" appSquare="12" appearance="outline"></i>
+              </app-button>
             </div>
           }
-        </fieldset>
-      }
-      @if (sendResultForm.get("accompanyingFile"); as accompanyingFile) {
-        <div
-          class="result__form--cv"
-          [class.result__form-error]="accompanyingFile | controlError: 'required'"
-        >
-          <app-upload-file
-            [error]="accompanyingFile | controlError"
-            id="accompanyingFile"
-            formControlName="accompanyingFile"
-            accept=".pdf, .docx, .doc, .word, .png, .jpg, .jpeg"
-          >
-            <ng-container emptyPlaceholder>
-              <div class="result__form--cv-empty">
-                <i appIcon icon="file" appSquare="10"></i>
-                <p class="text-body-12 result__form--cv-text">
-                  файл в любом формате <br />весом до 100МБ
-                </p>
-              </div>
-              @if (accompanyingFile | controlError: "required") {
-                <p class="error text-body-10">загрузите файл</p>
-              }
-            </ng-container>
-          </app-upload-file>
         </div>
       }
-
-      <app-button size="big" (click)="onSubmit()" [loader]="sendFormIsSubmitting" type="submit">{{
-        taskDetailInfo()?.result ? "сохранить изменения в результате работы" : "завершить задачу"
-      }}</app-button>
-    </form>
-  </div>
-</app-modal>
-
-<app-modal [open]="showResultModal" (openChange)="showResultModal = false">
-  <div
-    class="cancel"
-    (click)="$event.stopPropagation()"
-    style="width: 500px; align-items: flex-start; justify-content: flex-start"
-  >
-    <div class="lists__section">
-      <p class="text-body-12 lists__title">результат выполнения задачи</p>
-      <i appIcon icon="task" class="lists__icon" appSquare="12"></i>
     </div>
+  </app-modal>
 
-    @if (taskDetailInfo()?.result; as result) {
-      <p class="cancel__text text-body-10">{{ result.description }}</p>
+  <app-modal [open]="showAcceptResultModal" (openChange)="showAcceptResultModal = false">
+    <div class="cancel" (click)="$event.stopPropagation()">
+      <p class="text-body-12 cancel__title">принять выполнение задачи</p>
 
-      <div
-        class="cancel__footer"
-        [style.justify-content]="result.accompanyingFile ? 'space-beetwen' : 'flex-end'"
-      >
-        @if (result.accompanyingFile; as file) {
-          <app-file-item
-            [name]="file.name"
-            [link]="file.link"
-            [type]="file.extension"
-            [size]="file.size"
-          ></app-file-item>
-        }
-        @if (isPerformer() || isResponsible()) {
-          <div class="cancel__footer-actions">
-            <app-button
-              customTypographyClass="text-body-12"
-              color="red"
-              (click)="showDeleteResultModal = true"
-            >
-              <i appIcon icon="basket" appSquare="12"></i>
-            </app-button>
+      <i appIcon icon="check" appSquare="60" class="cancel__icon" style="color: var(--green)"></i>
 
-            <app-button
-              customTypographyClass="text-body-12"
-              color="primary"
-              appearance="outline"
-              (click)="showAttachResultModal = true"
-            >
-              <i appIcon icon="edit-pen" appSquare="12" appearance="outline"></i>
-            </app-button>
-          </div>
-        }
-      </div>
-    }
-  </div>
-</app-modal>
+      <div class="cancel__buttons">
+        <app-button
+          customTypographyClass="text-body-12"
+          size="medium"
+          (click)="showAcceptResultModal = false"
+          >принять</app-button
+        >
 
-<app-modal [open]="showAcceptResultModal" (openChange)="showAcceptResultModal = false">
-  <div class="cancel" (click)="$event.stopPropagation()">
-    <p class="text-body-12 cancel__title">принять выполнение задачи</p>
+        <app-button
+          (click)="showAcceptResultModal = false; isCommentedClick = true"
+          customTypographyClass="text-body-12"
+          color="gold"
+          size="medium"
+          >комментировать</app-button
+        >
+      </div>
+    </div>
+  </app-modal>
 
-    <i appIcon icon="check" appSquare="60" class="cancel__icon" style="color: var(--green)"></i>
+  <app-modal [open]="showUnAcceptResultModal" (openChange)="showUnAcceptResultModal = false">
+    <div class="cancel" (click)="$event.stopPropagation()">
+      <p class="text-body-12 cancel__title">вы уверены, что хотите снять приемку работы?</p>
 
-    <div class="cancel__buttons">
-      <app-button
-        customTypographyClass="text-body-12"
-        size="medium"
-        (click)="showAcceptResultModal = false"
-        >принять</app-button
-      >
+      <i appIcon icon="sad-smile" appSquare="50" class="cancel__icon"></i>
 
-      <app-button
-        (click)="showAcceptResultModal = false; isCommentedClick = true"
-        customTypographyClass="text-body-12"
-        color="gold"
-        size="medium"
-        >комментировать</app-button
+      <app-button customTypographyClass="text-body-12" size="big" color="red"
+        >удалить результат</app-button
       >
     </div>
-  </div>
-</app-modal>
+  </app-modal>
 
-<app-modal [open]="showUnAcceptResultModal" (openChange)="showUnAcceptResultModal = false">
-  <div class="cancel" (click)="$event.stopPropagation()">
-    <p class="text-body-12 cancel__title">вы уверены, что хотите снять приемку работы?</p>
+  <app-modal [open]="showDeleteResultModal" (openChange)="showDeleteResultModal = false">
+    <div class="cancel" (click)="$event.stopPropagation()">
+      <p class="text-body-12 cancel__title">
+        вы уверены, что хотите удалить текущий результат работы
+      </p>
 
-    <i appIcon icon="sad-smile" appSquare="50" class="cancel__icon"></i>
+      <i appIcon icon="sad-smile" appSquare="50" class="cancel__icon"></i>
 
-    <app-button customTypographyClass="text-body-12" size="big" color="red"
-      >удалить результат</app-button
-    >
-  </div>
-</app-modal>
+      <app-button customTypographyClass="text-body-12" size="big" color="red"
+        >отменить приемку работы</app-button
+      >
+    </div>
+  </app-modal>
 
-<app-modal [open]="showDeleteResultModal" (openChange)="showDeleteResultModal = false">
-  <div class="cancel" (click)="$event.stopPropagation()">
-    <p class="text-body-12 cancel__title">
-      вы уверены, что хотите удалить текущий результат работы
-    </p>
+  <app-modal
+    [open]="showLeaderCommentedResultModal"
+    (openChange)="showLeaderCommentedResultModal = false"
+  >
+    <div class="cancel" (click)="$event.stopPropagation()" style="width: 350px; padding: 24px">
+      <p class="text-body-14 cancel__title">
+        вы уверены, что исправили результат по комментариям от лидера?
+      </p>
 
-    <i appIcon icon="sad-smile" appSquare="50" class="cancel__icon"></i>
+      <i appIcon icon="check" appSquare="60" class="cancel__icon" style="color: var(--green)"></i>
 
-    <app-button customTypographyClass="text-body-12" size="big" color="red"
-      >отменить приемку работы</app-button
-    >
-  </div>
-</app-modal>
-
-<app-modal
-  [open]="showLeaderCommentedResultModal"
-  (openChange)="showLeaderCommentedResultModal = false"
->
-  <div class="cancel" (click)="$event.stopPropagation()" style="width: 350px; padding: 24px">
-    <p class="text-body-14 cancel__title">
-      вы уверены, что исправили результат по комментариям от лидера?
-    </p>
-
-    <i appIcon icon="check" appSquare="60" class="cancel__icon" style="color: var(--green)"></i>
-
-    <app-button
-      customTypographyClass="text-body-12"
-      size="big"
-      (click)="showLeaderCommentedResultModal = false"
-      >комментарии решены</app-button
-    >
-  </div>
-</app-modal>
+      <app-button
+        customTypographyClass="text-body-12"
+        size="big"
+        (click)="showLeaderCommentedResultModal = false"
+        >комментарии решены</app-button
+      >
+    </div>
+  </app-modal>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.ts b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.ts
index a19d9c702..c5c5f27ec 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { CommonModule, DatePipe } from "@angular/common";
 import {
   AfterViewInit,
@@ -29,7 +32,7 @@ import {
   ValidationService,
 } from "@corelib";
 import { expandElement } from "@utils/expand-element";
-import { IconComponent } from "@uilib";
+import { IconComponent, ButtonDirective, FormLayoutDirective } from "@uilib";
 import { nanoid } from "nanoid";
 import { DropdownComponent } from "@ui/primitives/dropdown/dropdown.component";
 import { priorityInfoList } from "@core/consts/lists/priority-info-list.const";
@@ -67,6 +70,8 @@ import { SkillsRepositoryPort } from "@domain/skills/ports/skills.repository.por
   templateUrl: "./task-detail.component.html",
   styleUrl: "./task-detail.component.scss",
   imports: [
+    ButtonDirective,
+    FormLayoutDirective,
     CommonModule,
     ReactiveFormsModule,
     InputComponent,
@@ -94,6 +99,8 @@ import { SkillsRepositoryPort } from "@domain/skills/ports/skills.repository.por
   standalone: true,
 })
 export class TaskDetailComponent implements OnInit, AfterViewInit, OnDestroy {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   @Output() delete = new EventEmitter<void>();
 
   readonly descEl = viewChild<ElementRef>("descEl");
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/pages/archive/kanban-archive.component.html b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/pages/archive/kanban-archive.component.html
index 01bcb93ed..a9f12d028 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/pages/archive/kanban-archive.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/pages/archive/kanban-archive.component.html
@@ -1,15 +1,31 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="kanban">
+    <div class="kanban__search">
+      <form [formGroup]="searchForm">
+        <app-search></app-search>
+      </form>
+    </div>
 
-<div class="kanban">
-  <div class="kanban__search">
-    <form [formGroup]="searchForm">
-      <app-search></app-search>
-    </form>
+    <div class="kanban__tasks">
+      @for (task of completedTasks(); track task.id) {
+        <app-kanban-task (click)="openDetailTask(task.id)" [task]="task"></app-kanban-task>
+      }
+    </div>
   </div>
+} @else {
+  <div class="kanban">
+    <div class="kanban__search">
+      <form appFormLayout [formGroup]="searchForm">
+        <app-search></app-search>
+      </form>
+    </div>
 
-  <div class="kanban__tasks">
-    @for (task of completedTasks(); track task.id) {
-      <app-kanban-task (click)="openDetailTask(task.id)" [task]="task"></app-kanban-task>
-    }
+    <div class="kanban__tasks">
+      @for (task of completedTasks(); track task.id) {
+        <app-kanban-task (click)="openDetailTask(task.id)" [task]="task"></app-kanban-task>
+      }
+    </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/pages/archive/kanban-archive.component.ts b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/pages/archive/kanban-archive.component.ts
index 582f14cf8..16b43ebad 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/pages/archive/kanban-archive.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/pages/archive/kanban-archive.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FormLayoutDirective } from "@uilib";
+
 import { CommonModule } from "@angular/common";
 import { Component, inject, OnDestroy, OnInit, signal } from "@angular/core";
 import { FormBuilder, FormGroup, ReactiveFormsModule } from "@angular/forms";
@@ -15,10 +20,18 @@ import { TaskPreview } from "@domain/kanban/task.model";
   selector: "app-kanban-archive",
   templateUrl: "./kanban-archive.component.html",
   styleUrl: "./kanban-archive.component.scss",
-  imports: [CommonModule, SearchComponent, ReactiveFormsModule, KanbanTaskComponent],
+  imports: [
+    FormLayoutDirective,
+    CommonModule,
+    SearchComponent,
+    ReactiveFormsModule,
+    KanbanTaskComponent,
+  ],
   standalone: true,
 })
 export class KanbanArhiveComponent implements OnInit, OnDestroy {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly fb = inject(FormBuilder);
   private readonly route = inject(ActivatedRoute);
   private readonly kanbanBoardDetailInfoService = inject(KanbanBoardDetailInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/news-detail/news-detail.component.scss b/projects/social_platform/src/app/ui/pages/projects/detail/news-detail/news-detail.component.scss
index 4e4badc7f..c1e56ef15 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/news-detail/news-detail.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/news-detail/news-detail.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 .item {
@@ -7,3 +8,5 @@
     min-width: 800px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/team/team.component.scss b/projects/social_platform/src/app/ui/pages/projects/detail/team/team.component.scss
index 3e60ae768..779e8c626 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/team/team.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/team/team.component.scss
@@ -1,3 +1,6 @@
+/** @format */
+@use "styles/responsive";
+
 .project {
   &__team {
     display: grid;
@@ -7,3 +10,20 @@
     margin-top: 30px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .project {
+    &__team {
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 156px), 1fr));
+    }
+  }
+
+  @include responsive.apply-mobile {
+    .project__team {
+      @include responsive.single-column;
+
+      row-gap: 48px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/work-section/work-section.component.scss b/projects/social_platform/src/app/ui/pages/projects/detail/work-section/work-section.component.scss
index f0220bcf1..3d71562c1 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/work-section/work-section.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/work-section/work-section.component.scss
@@ -1,3 +1,6 @@
+/** @format */
+@use "styles/responsive";
+
 .work-section {
   display: grid;
   grid-template-columns: 4fr 3fr 3fr;
@@ -34,3 +37,16 @@
     color: var(--accent);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .work-section {
+      @include responsive.single-column;
+    }
+
+    .work-section__section {
+      padding: 16px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.html
index c39429bdb..1e52feab4 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.html
@@ -1,83 +1,167 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div [formGroup]="projectForm" class="project__inner">
+    <div class="project__left">
+      @if (hasAchievements()) {
+        <ul formArrayName="achievements" class="project__achievements">
+          @for (control of achievements.controls; track control.value.id; let i = $index) {
+            <li class="profile__achievement">
+              <form [formGroupName]="i" class="achievement">
+                @if (achievements.at(i)?.get("title"); as achievementsName) {
+                  <fieldset style="flex-grow: 1">
+                    <label class="text-body-12 field-label">описание достижения</label>
+                    <app-input
+                      size="big"
+                      [haveHint]="true"
+                      [tooltipText]="'Расскажите, какие достижения вы сделали в своем проекте. Про что они были, их история'"
+                      [tooltipPosition]="'left'"
+                      [tooltipWidth]="350"
+                      [error]="achievementsName | controlError"
+                      placeholder="выиграли акселератор"
+                      formControlName="title"
+                    ></app-input>
+                    @if (achievementsName | controlError: "required") {
+                      <div class="text-body-10 error">
+                        {{ errorMessage.VALIDATION_REQUIRED }}
+                      </div>
+                    }
+                  </fieldset>
+                }
+                @if (achievements.at(i).get("status"); as achievementsDate) {
+                  <fieldset>
+                    <label class="text-body-12 field-label" style="text-align: center">дата</label>
+                    <app-input
+                      size="small"
+                      [haveHint]="true"
+                      [tooltipText]="'Расскажите, в каком году было получено достижение'"
+                      [tooltipPosition]="'left'"
+                      [tooltipWidth]="300"
+                      [error]="achievementsDate | controlError"
+                      type="text"
+                      placeholder="2022"
+                      mask="0000"
+                      formControlName="status"
+                    ></app-input>
+                    @if (achievementsDate | controlError: "required") {
+                      <div class="text-body-10 error">
+                        {{ errorMessage.VALIDATION_REQUIRED }}
+                      </div>
+                    }
+                  </fieldset>
+                }
+                <app-button
+                  class="achievement__remove"
+                  type="icon"
+                  color="red"
+                  (click)="removeAchievement(i)"
+                >
+                  <i appIcon icon="basket" appSquare="14"></i>
+                </app-button>
+              </form>
+            </li>
+          }
+        </ul>
+      }
+    </div>
 
-<div [formGroup]="projectForm" class="project__inner">
-  <div class="project__left">
-    @if (hasAchievements()) {
-      <ul formArrayName="achievements" class="project__achievements">
-        @for (control of achievements.controls; track control.value.id; let i = $index) {
-          <li class="profile__achievement">
-            <form [formGroupName]="i" class="achievement">
-              @if (achievements.at(i)?.get("title"); as achievementsName) {
-                <fieldset style="flex-grow: 1">
-                  <label class="text-body-12 field-label">описание достижения</label>
-                  <app-input
-                    size="big"
-                    [haveHint]="true"
-                    [tooltipText]="'Расскажите, какие достижения вы сделали в своем проекте. Про что они были, их история'"
-                    [tooltipPosition]="'left'"
-                    [tooltipWidth]="350"
-                    [error]="achievementsName | controlError"
-                    placeholder="выиграли акселератор"
-                    formControlName="title"
-                  ></app-input>
-                  @if (achievementsName | controlError: "required") {
-                    <div class="text-body-10 error">
-                      {{ errorMessage.VALIDATION_REQUIRED }}
-                    </div>
-                  }
-                </fieldset>
-              }
-              @if (achievements.at(i).get("status"); as achievementsDate) {
-                <fieldset>
-                  <label class="text-body-12 field-label" style="text-align: center">дата</label>
-                  <app-input
-                    size="small"
-                    [haveHint]="true"
-                    [tooltipText]="'Расскажите, в каком году было получено достижение'"
-                    [tooltipPosition]="'left'"
-                    [tooltipWidth]="300"
-                    [error]="achievementsDate | controlError"
-                    type="text"
-                    placeholder="2022"
-                    mask="0000"
-                    formControlName="status"
-                  ></app-input>
-                  @if (achievementsDate | controlError: "required") {
-                    <div class="text-body-10 error">
-                      {{ errorMessage.VALIDATION_REQUIRED }}
-                    </div>
-                  }
-                </fieldset>
-              }
-              <app-button
-                class="achievement__remove"
-                type="icon"
-                color="red"
-                (click)="removeAchievement(i)"
-              >
-                <i appIcon icon="basket" appSquare="14"></i>
-              </app-button>
-            </form>
-          </li>
-        }
-      </ul>
-    }
+    <div class="project__right" [style.margin-top]="hasAchievements() ? '15px' : '0px'">
+      <app-button
+        size="big"
+        customTypographyClass="text-body-12"
+        appearance="outline"
+        class="vacancy__submit"
+        (click)="addAchievement()"
+      >
+        <span class="vacancy__submit--text">добавить достижение</span>
+        <i appIcon icon="plus" appSquare="12"></i>
+      </app-button>
+
+      @if (!hasAchievements()) {
+        <i appIcon icon="sad-smile" appSquare="20" class="project__no-items"></i>
+      }
+    </div>
   </div>
+} @else {
+  <div [formGroup]="projectForm" class="project__inner">
+    <div class="project__left">
+      @if (hasAchievements()) {
+        <ul formArrayName="achievements" class="project__achievements">
+          @for (control of achievements.controls; track control.value.id; let i = $index) {
+            <li class="profile__achievement">
+              <form appFormLayout [formGroupName]="i" class="achievement">
+                @if (achievements.at(i)?.get("title"); as achievementsName) {
+                  <fieldset style="flex-grow: 1">
+                    <label class="text-body-12 field-label">описание достижения</label>
+                    <app-input
+                      size="big"
+                      [haveHint]="true"
+                      [tooltipText]="'Расскажите, какие достижения вы сделали в своем проекте. Про что они были, их история'"
+                      [tooltipPosition]="'left'"
+                      [tooltipWidth]="350"
+                      [error]="achievementsName | controlError"
+                      placeholder="выиграли акселератор"
+                      formControlName="title"
+                    ></app-input>
+                    @if (achievementsName | controlError: "required") {
+                      <div class="text-body-10 error">
+                        {{ errorMessage.VALIDATION_REQUIRED }}
+                      </div>
+                    }
+                  </fieldset>
+                }
+                @if (achievements.at(i).get("status"); as achievementsDate) {
+                  <fieldset>
+                    <label class="text-body-12 field-label" style="text-align: center">дата</label>
+                    <app-input
+                      size="small"
+                      [haveHint]="true"
+                      [tooltipText]="'Расскажите, в каком году было получено достижение'"
+                      [tooltipPosition]="'left'"
+                      [tooltipWidth]="300"
+                      [error]="achievementsDate | controlError"
+                      type="text"
+                      placeholder="2022"
+                      mask="0000"
+                      formControlName="status"
+                    ></app-input>
+                    @if (achievementsDate | controlError: "required") {
+                      <div class="text-body-10 error">
+                        {{ errorMessage.VALIDATION_REQUIRED }}
+                      </div>
+                    }
+                  </fieldset>
+                }
+                <app-button
+                  class="achievement__remove"
+                  type="icon"
+                  color="red"
+                  (click)="removeAchievement(i)"
+                >
+                  <i appIcon icon="basket" appSquare="14"></i>
+                </app-button>
+              </form>
+            </li>
+          }
+        </ul>
+      }
+    </div>
 
-  <div class="project__right" [style.margin-top]="hasAchievements() ? '15px' : '0px'">
-    <app-button
-      size="big"
-      customTypographyClass="text-body-12"
-      appearance="outline"
-      class="vacancy__submit"
-      (click)="addAchievement()"
-    >
-      <span class="vacancy__submit--text">добавить достижение</span>
-      <i appIcon icon="plus" appSquare="12"></i>
-    </app-button>
+    <div class="project__right" [style.margin-top]="hasAchievements() ? '15px' : '0px'">
+      <app-button
+        size="big"
+        customTypographyClass="text-body-12"
+        appearance="outline"
+        class="vacancy__submit"
+        (click)="addAchievement()"
+      >
+        <span class="vacancy__submit--text">добавить достижение</span>
+        <i appIcon icon="plus" appSquare="12"></i>
+      </app-button>
 
-    @if (!hasAchievements()) {
-      <i appIcon icon="sad-smile" appSquare="20" class="project__no-items"></i>
-    }
+      @if (!hasAchievements()) {
+        <i appIcon icon="sad-smile" appSquare="20" class="project__no-items"></i>
+      }
+    </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.scss
index d0aa0cbd9..3fb198edc 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -72,3 +71,12 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .invite {
+    &__list {
+      width: 100%;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.ts
index e79bcfa09..379b9900f 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-achievement-step/project-achievement-step.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component, inject, input, OnInit } from "@angular/core";
 import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
@@ -7,7 +10,7 @@ import { InputComponent, ButtonComponent } from "@ui/primitives";
 import { ControlErrorPipe } from "@corelib";
 import { ErrorMessage } from "@core/lib/models/error/error-message";
 import { ProjectFormService } from "@api/project/facades/edit/project-form.service";
-import { IconComponent } from "@uilib";
+import { IconComponent, FormLayoutDirective } from "@uilib";
 import { ProjectAchievementsService } from "@api/project/facades/edit/project-achievements.service";
 import { ToggleFieldsInfoService } from "@api/toggle-fields/toggle-fields-info.service";
 
@@ -17,6 +20,7 @@ import { ToggleFieldsInfoService } from "@api/toggle-fields/toggle-fields-info.s
   templateUrl: "./project-achievement-step.component.html",
   styleUrl: "./project-achievement-step.component.scss",
   imports: [
+    FormLayoutDirective,
     CommonModule,
     ReactiveFormsModule,
     InputComponent,
@@ -28,6 +32,8 @@ import { ToggleFieldsInfoService } from "@api/toggle-fields/toggle-fields-info.s
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectAchievementStepComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly projSubmitInitiated = input<boolean>(false);
 
   private readonly projectAchievementService = inject(ProjectAchievementsService);
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.html
index b556c6346..3075962ac 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.html
@@ -1,31 +1,61 @@
 <!-- @format -->
-
-<div class="project__inner">
-  <div [formGroup]="additionalForm" class="project__team">
-    <div class="project__additional-wrapper">
-      @if (pending()) {
-        <p class="text-body-12" role="status">Загружаем дополнительные сведения программы…</p>
-      } @else if (loadFailed()) {
-        <div role="alert">
-          <p class="text-body-12">Не удалось загрузить дополнительные сведения программы.</p>
-          <app-button size="medium" (click)="retry()">Повторить</app-button>
-        </div>
-      } @else {
-        @if (saveError(); as message) {
-          <p class="text-body-12 error" role="alert">{{ message }}</p>
-        }
-        @if (submitted()) {
-          <p class="text-body-12" role="status">
-            Проект уже сдан. Дополнительные сведения изменить нельзя.
-          </p>
-        }
-        @if (partnerProgramFields().length) {
-          @for (field of partnerProgramFields(); track field.id) {
-            <label class="text-bold-body-14 field-label">дополнительные сведения</label>
-            <fieldset>
-              @switch (field.fieldType) {
-                @case ("text") {
-                  @if (additionalForm.get(field.name); as control) {
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="project__inner">
+    <div [formGroup]="additionalForm" class="project__team">
+      <div class="project__additional-wrapper">
+        @if (pending()) {
+          <p class="text-body-12" role="status">Загружаем дополнительные сведения программы…</p>
+        } @else if (loadFailed()) {
+          <div role="alert">
+            <p class="text-body-12">Не удалось загрузить дополнительные сведения программы.</p>
+            <app-button size="medium" (click)="retry()">Повторить</app-button>
+          </div>
+        } @else {
+          @if (saveError(); as message) {
+            <p class="text-body-12 error" role="alert">{{ message }}</p>
+          }
+          @if (submitted()) {
+            <p class="text-body-12" role="status">
+              Проект уже сдан. Дополнительные сведения изменить нельзя.
+            </p>
+          }
+          @if (partnerProgramFields().length) {
+            @for (field of partnerProgramFields(); track field.id) {
+              <label class="text-bold-body-14 field-label">дополнительные сведения</label>
+              <fieldset>
+                @switch (field.fieldType) {
+                  @case ("text") {
+                    @if (additionalForm.get(field.name); as control) {
+                      <label
+                        style="cursor: pointer"
+                        class="field-label"
+                        (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
+                        [for]="field.name"
+                        >{{ field.label }}</label
+                      >
+                      <app-input
+                        size="big"
+                        class="project__validated-input"
+                        [id]="field.name"
+                        formControlName="{{ field.name }}"
+                        [error]="control | controlError"
+                        [placeholder]="field.helpText"
+                        [maxLength]="500"
+                      >
+                        @if (control | controlError) {
+                          <i
+                            class="project__input-error"
+                            appIcon
+                            icon="error"
+                            appSquare="20"
+                            aria-hidden="true"
+                          ></i>
+                        }
+                      </app-input>
+                    }
+                  }
+                  @case ("textarea") {
                     <label
                       style="cursor: pointer"
                       class="field-label"
@@ -33,62 +63,57 @@
                       [for]="field.name"
                       >{{ field.label }}</label
                     >
-                    <app-input
-                      size="big"
-                      class="project__validated-input"
-                      [id]="field.name"
-                      formControlName="{{ field.name }}"
-                      [error]="control | controlError"
-                      [placeholder]="field.helpText"
-                      [maxLength]="500"
-                    >
-                      @if (control | controlError) {
-                        <i
-                          class="project__input-error"
-                          appIcon
-                          icon="error"
-                          appSquare="20"
-                          aria-hidden="true"
-                        ></i>
-                      }
-                    </app-input>
+                    @if (additionalForm.get(field.name); as control) {
+                      <app-textarea
+                        size="big"
+                        [id]="field.name"
+                        formControlName="{{ field.name }}"
+                        [error]="control | controlError"
+                        [placeholder]="field.helpText"
+                        [maxLength]="500"
+                      ></app-textarea>
+                    }
                   }
-                }
-                @case ("textarea") {
-                  <label
-                    style="cursor: pointer"
-                    class="field-label"
-                    (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
-                    [for]="field.name"
-                    >{{ field.label }}</label
-                  >
-                  @if (additionalForm.get(field.name); as control) {
-                    <app-textarea
-                      size="big"
-                      [id]="field.name"
-                      formControlName="{{ field.name }}"
-                      [error]="control | controlError"
-                      [placeholder]="field.helpText"
-                      [maxLength]="500"
-                    ></app-textarea>
+                  @case ("checkbox") {
+                    @if (submitted()) {
+                      <p class="text-body-12">
+                        {{ field.label }}:
+                        {{ additionalForm.get(field.name)?.value ? "Да" : "Нет" }}
+                      </p>
+                    } @else {
+                      <div
+                        class="project__team--additional"
+                        [ngStyle]="{
+                          display: field.fieldType === 'checkbox' ? 'flex' : 'block',
+                        }"
+                      >
+                        <app-checkbox
+                          [checked]="this.additionalForm.get(field.name)?.value"
+                          (checkedChange)="setBooleanValue(field.name, $event)"
+                        ></app-checkbox>
+                        <label
+                          style="cursor: pointer"
+                          class="field-label"
+                          (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
+                          [for]="field.name"
+                          >{{ field.label }}</label
+                        >
+                      </div>
+                    }
                   }
-                }
-                @case ("checkbox") {
-                  @if (submitted()) {
-                    <p class="text-body-12">
-                      {{ field.label }}: {{ additionalForm.get(field.name)?.value ? "Да" : "Нет" }}
-                    </p>
-                  } @else {
-                    <div
-                      class="project__team--additional"
-                      [ngStyle]="{
-                        display: field.fieldType === 'checkbox' ? 'flex' : 'block',
-                      }"
-                    >
-                      <app-checkbox
-                        [checked]="this.additionalForm.get(field.name)?.value"
-                        (checkedChange)="setBooleanValue(field.name, $event)"
-                      ></app-checkbox>
+                  @case ("radio") {
+                    @if (submitted()) {
+                      <p class="text-body-12">
+                        {{ field.label }}:
+                        {{ additionalForm.get(field.name)?.value ? "Да" : "Нет" }}
+                      </p>
+                    } @else {
+                      @if (additionalForm.get(field.name); as control) {
+                        <app-switch
+                          [checked]="additionalForm.get(field.name)?.value"
+                          (checkedChange)="setBooleanValue(field.name, $event)"
+                        ></app-switch>
+                      }
                       <label
                         style="cursor: pointer"
                         class="field-label"
@@ -96,21 +121,166 @@
                         [for]="field.name"
                         >{{ field.label }}</label
                       >
+                    }
+                  }
+                  @case ("select") {
+                    <label
+                      style="cursor: pointer"
+                      class="field-label"
+                      (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
+                      [for]="field.name"
+                      >{{ field.label }}</label
+                    >
+                    @if (additionalForm.get(field.name); as control) {
+                      @if (submitted() && control.value && !field.options.includes(control.value)) {
+                        <p class="text-body-12" data-testid="saved-field-value">
+                          {{ control.value }}
+                        </p>
+                      } @else {
+                        <app-select
+                          size="big"
+                          [id]="field.name"
+                          formControlName="{{ field.name }}"
+                          [placeholder]="
+                            field.name === caseFieldName
+                              ? 'Выберите кейс'
+                              : field.helpText || field.label
+                          "
+                          [error]="
+                            (control | controlError) ||
+                            (field.name === caseFieldName && !!caseError())
+                          "
+                          [options]="field.options | toSelectOptions"
+                        ></app-select>
+                      }
+                    }
+                  }
+                }
+                @if (additionalForm.get(field.name); as control) {
+                  @if (field.name === caseFieldName && caseError()) {
+                    <div class="text-body-10 error" role="alert">{{ caseError() }}</div>
+                  } @else if (control | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{
+                        field.name === caseFieldName
+                          ? "Выберите кейс"
+                          : errorMessage.VALIDATION_REQUIRED
+                      }}
+                    </div>
+                  } @else if (
+                    field.name === caseFieldName && (control | controlError: "caseUnavailable")
+                  ) {
+                    <div class="text-body-10 error" role="alert">
+                      Выбранный кейс больше недоступен. Выберите актуальный кейс.
                     </div>
                   }
                 }
-                @case ("radio") {
-                  @if (submitted()) {
-                    <p class="text-body-12">
-                      {{ field.label }}: {{ additionalForm.get(field.name)?.value ? "Да" : "Нет" }}
-                    </p>
-                  } @else {
+              </fieldset>
+            }
+          } @else {
+            @if (isProjectAssignToProgram()) {
+              <div class="project__additional--no-items">
+                <p class="text-body-12">
+                  проект привязан к программе, но дополнительных полей для заполнения нет
+                </p>
+                <i appIcon icon="info" appSquare="20" class="project__no-items"></i>
+              </div>
+            } @else {
+              <div class="project__additional--no-items">
+                <p class="text-body-12">Пока вы не участвуете ни в одной программе</p>
+                <a [routerLink]="AppRoutes.program.list()">
+                  <app-button
+                    size="medium"
+                    appearance="outline"
+                    customTypographyClass="text-body-12"
+                  >
+                    <span>программы</span>
+                    <app-tooltip
+                      [text]="'Перейдите по ссылке и ознакомьтесь с тем, где можно сейчас поучаствовать'"
+                      [isVisible]="isTooltipVisible('base')"
+                      [position]="'right'"
+                      [tooltipWidth]="300"
+                      customClass="content__hint"
+                      (show)="toggleTooltip()"
+                      (hide)="toggleTooltip()"
+                    ></app-tooltip>
+                  </app-button>
+                </a>
+
+                <i appIcon icon="sad-smile" appSquare="20" class="project__no-items"></i>
+              </div>
+            }
+          }
+        }
+      </div>
+    </div>
+  </div>
+} @else {
+  <div class="project__inner">
+    <div [formGroup]="additionalForm" class="project__team">
+      <div class="project__additional-wrapper">
+        @if (pending()) {
+          <app-state
+            class="text-body-12"
+            [compact]="true"
+            kind="loading"
+            title="Загружаем дополнительные сведения программы…"
+          />
+        } @else if (loadFailed()) {
+          <div role="alert">
+            <p class="text-body-12">Не удалось загрузить дополнительные сведения программы.</p>
+            <app-button size="medium" (click)="retry()">Повторить</app-button>
+          </div>
+        } @else {
+          @if (saveError(); as message) {
+            <app-state
+              class="text-body-12 error"
+              [compact]="true"
+              kind="error"
+              title="{{ message }}"
+            />
+          }
+          @if (submitted()) {
+            <p class="text-body-12" role="status">
+              Проект уже сдан. Дополнительные сведения изменить нельзя.
+            </p>
+          }
+          @if (partnerProgramFields().length) {
+            @for (field of partnerProgramFields(); track field.id) {
+              <label class="text-bold-body-14 field-label">дополнительные сведения</label>
+              <fieldset>
+                @switch (field.fieldType) {
+                  @case ("text") {
                     @if (additionalForm.get(field.name); as control) {
-                      <app-switch
-                        [checked]="additionalForm.get(field.name)?.value"
-                        (checkedChange)="setBooleanValue(field.name, $event)"
-                      ></app-switch>
+                      <label
+                        style="cursor: pointer"
+                        class="field-label"
+                        (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
+                        [for]="field.name"
+                        >{{ field.label }}</label
+                      >
+                      <app-input
+                        size="big"
+                        class="project__validated-input"
+                        [id]="field.name"
+                        formControlName="{{ field.name }}"
+                        [error]="control | controlError"
+                        [placeholder]="field.helpText"
+                        [maxLength]="500"
+                      >
+                        @if (control | controlError) {
+                          <i
+                            class="project__input-error"
+                            appIcon
+                            icon="error"
+                            appSquare="20"
+                            aria-hidden="true"
+                          ></i>
+                        }
+                      </app-input>
                     }
+                  }
+                  @case ("textarea") {
                     <label
                       style="cursor: pointer"
                       class="field-label"
@@ -118,93 +288,156 @@
                       [for]="field.name"
                       >{{ field.label }}</label
                     >
-                  }
-                }
-                @case ("select") {
-                  <label
-                    style="cursor: pointer"
-                    class="field-label"
-                    (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
-                    [for]="field.name"
-                    >{{ field.label }}</label
-                  >
-                  @if (additionalForm.get(field.name); as control) {
-                    @if (submitted() && control.value && !field.options.includes(control.value)) {
-                      <p class="text-body-12" data-testid="saved-field-value">
-                        {{ control.value }}
-                      </p>
-                    } @else {
-                      <app-select
+                    @if (additionalForm.get(field.name); as control) {
+                      <app-textarea
                         size="big"
                         [id]="field.name"
                         formControlName="{{ field.name }}"
-                        [placeholder]="
-                          field.name === caseFieldName
-                            ? 'Выберите кейс'
-                            : field.helpText || field.label
-                        "
-                        [error]="
-                          (control | controlError) ||
-                          (field.name === caseFieldName && !!caseError())
-                        "
-                        [options]="field.options | toSelectOptions"
-                      ></app-select>
+                        [error]="control | controlError"
+                        [placeholder]="field.helpText"
+                        [maxLength]="500"
+                      ></app-textarea>
+                    }
+                  }
+                  @case ("checkbox") {
+                    @if (submitted()) {
+                      <p class="text-body-12">
+                        {{ field.label }}:
+                        {{ additionalForm.get(field.name)?.value ? "Да" : "Нет" }}
+                      </p>
+                    } @else {
+                      <div
+                        class="project__team--additional"
+                        [ngStyle]="{
+                          display: field.fieldType === 'checkbox' ? 'flex' : 'block',
+                        }"
+                      >
+                        <app-checkbox
+                          [checked]="this.additionalForm.get(field.name)?.value"
+                          (checkedChange)="setBooleanValue(field.name, $event)"
+                        ></app-checkbox>
+                        <label
+                          style="cursor: pointer"
+                          class="field-label"
+                          (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
+                          [for]="field.name"
+                          >{{ field.label }}</label
+                        >
+                      </div>
+                    }
+                  }
+                  @case ("radio") {
+                    @if (submitted()) {
+                      <p class="text-body-12">
+                        {{ field.label }}:
+                        {{ additionalForm.get(field.name)?.value ? "Да" : "Нет" }}
+                      </p>
+                    } @else {
+                      @if (additionalForm.get(field.name); as control) {
+                        <app-switch
+                          [checked]="additionalForm.get(field.name)?.value"
+                          (checkedChange)="setBooleanValue(field.name, $event)"
+                        ></app-switch>
+                      }
+                      <label
+                        style="cursor: pointer"
+                        class="field-label"
+                        (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
+                        [for]="field.name"
+                        >{{ field.label }}</label
+                      >
+                    }
+                  }
+                  @case ("select") {
+                    <label
+                      style="cursor: pointer"
+                      class="field-label"
+                      (click)="toggleAdditionalFormValues(field.fieldType, field.name)"
+                      [for]="field.name"
+                      >{{ field.label }}</label
+                    >
+                    @if (additionalForm.get(field.name); as control) {
+                      @if (submitted() && control.value && !field.options.includes(control.value)) {
+                        <p class="text-body-12" data-testid="saved-field-value">
+                          {{ control.value }}
+                        </p>
+                      } @else {
+                        <app-select
+                          size="big"
+                          [id]="field.name"
+                          formControlName="{{ field.name }}"
+                          [placeholder]="
+                            field.name === caseFieldName
+                              ? 'Выберите кейс'
+                              : field.helpText || field.label
+                          "
+                          [error]="
+                            (control | controlError) ||
+                            (field.name === caseFieldName && !!caseError())
+                          "
+                          [options]="field.options | toSelectOptions"
+                        ></app-select>
+                      }
                     }
                   }
                 }
-              }
-              @if (additionalForm.get(field.name); as control) {
-                @if (field.name === caseFieldName && caseError()) {
-                  <div class="text-body-10 error" role="alert">{{ caseError() }}</div>
-                } @else if (control | controlError: "required") {
-                  <div class="text-body-10 error">
-                    {{
-                      field.name === caseFieldName
-                        ? "Выберите кейс"
-                        : errorMessage.VALIDATION_REQUIRED
-                    }}
-                  </div>
-                } @else if (
-                  field.name === caseFieldName && (control | controlError: "caseUnavailable")
-                ) {
-                  <div class="text-body-10 error" role="alert">
-                    Выбранный кейс больше недоступен. Выберите актуальный кейс.
-                  </div>
+                @if (additionalForm.get(field.name); as control) {
+                  @if (field.name === caseFieldName && caseError()) {
+                    <div class="text-body-10 error" role="alert">{{ caseError() }}</div>
+                  } @else if (control | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{
+                        field.name === caseFieldName
+                          ? "Выберите кейс"
+                          : errorMessage.VALIDATION_REQUIRED
+                      }}
+                    </div>
+                  } @else if (
+                    field.name === caseFieldName && (control | controlError: "caseUnavailable")
+                  ) {
+                    <div class="text-body-10 error" role="alert">
+                      Выбранный кейс больше недоступен. Выберите актуальный кейс.
+                    </div>
+                  }
                 }
-              }
-            </fieldset>
-          }
-        } @else {
-          @if (isProjectAssignToProgram()) {
-            <div class="project__additional--no-items">
-              <p class="text-body-12">
-                проект привязан к программе, но дополнительных полей для заполнения нет
-              </p>
-              <i appIcon icon="info" appSquare="20" class="project__no-items"></i>
-            </div>
+              </fieldset>
+            }
           } @else {
-            <div class="project__additional--no-items">
-              <p class="text-body-12">Пока вы не участвуете ни в одной программе</p>
-              <a [routerLink]="AppRoutes.program.list()">
-                <app-button size="medium" appearance="outline" customTypographyClass="text-body-12">
-                  <span>программы</span>
-                  <app-tooltip
-                    [text]="'Перейдите по ссылке и ознакомьтесь с тем, где можно сейчас поучаствовать'"
-                    [isVisible]="isTooltipVisible('base')"
-                    [position]="'right'"
-                    [tooltipWidth]="300"
-                    customClass="content__hint"
-                    (show)="toggleTooltip()"
-                    (hide)="toggleTooltip()"
-                  ></app-tooltip>
-                </app-button>
-              </a>
+            @if (isProjectAssignToProgram()) {
+              <div class="project__additional--no-items">
+                <p class="text-body-12">
+                  проект привязан к программе, но дополнительных полей для заполнения нет
+                </p>
+                <i appIcon icon="info" appSquare="20" class="project__no-items"></i>
+              </div>
+            } @else {
+              <div class="project__additional--no-items">
+                <p class="text-body-12">Пока вы не участвуете ни в одной программе</p>
+                <a [routerLink]="AppRoutes.program.list()">
+                  <app-button
+                    size="medium"
+                    appearance="outline"
+                    customTypographyClass="text-body-12"
+                  >
+                    <span>программы</span>
+                    <app-tooltip
+                      [text]="'Перейдите по ссылке и ознакомьтесь с тем, где можно сейчас поучаствовать'"
+                      [isVisible]="isTooltipVisible('base')"
+                      [position]="'right'"
+                      [tooltipWidth]="300"
+                      customClass="content__hint"
+                      (show)="toggleTooltip()"
+                      (hide)="toggleTooltip()"
+                    ></app-tooltip>
+                  </app-button>
+                </a>
 
-              <i appIcon icon="sad-smile" appSquare="20" class="project__no-items"></i>
-            </div>
+                <i appIcon icon="sad-smile" appSquare="20" class="project__no-items"></i>
+              </div>
+            }
           }
         }
-      }
+      </div>
     </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.scss
index bebfec119..f068dc549 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -177,3 +176,12 @@
     display: block;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .invite {
+    &__list {
+      width: 100%;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.ts
index 8af72b43e..4e33859a6 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-additional-step/project-additional-step.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { CommonModule } from "@angular/common";
 import { Component, computed, inject, ChangeDetectionStrategy } from "@angular/core";
 import { isFailure, isLoading } from "@domain/shared/async-state";
@@ -15,7 +18,7 @@ import { SwitchComponent } from "@ui/primitives/switch/switch.component";
 import { ControlErrorPipe, ToSelectOptionsPipe } from "@corelib";
 import { ErrorMessage } from "@core/lib/models/error/error-message";
 import { RouterLink } from "@angular/router";
-import { IconComponent } from "@uilib";
+import { IconComponent, StateComponent } from "@uilib";
 import { TooltipComponent } from "@ui/primitives/tooltip/tooltip.component";
 import { ProjectAdditionalService } from "@api/project/facades/edit/project-additional.service";
 import { TooltipInfoService } from "@api/tooltip/tooltip-info.service";
@@ -28,6 +31,7 @@ import { PROGRAM_CASE_FIELD_NAME } from "@domain/program/program-case-field.cons
   templateUrl: "./project-additional-step.component.html",
   styleUrl: "./project-additional-step.component.scss",
   imports: [
+    StateComponent,
     CommonModule,
     ReactiveFormsModule,
     InputComponent,
@@ -45,6 +49,8 @@ import { PROGRAM_CASE_FIELD_NAME } from "@domain/program/program-case-field.cons
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectAdditionalStepComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly projectAdditionalService = inject(ProjectAdditionalService);
   private readonly tooltipInfoService = inject(TooltipInfoService);
 
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.html
index 7f6c913ee..f7f62c707 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.html
@@ -1,184 +1,291 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="project__inner" [formGroup]="projectForm">
+    <div class="project__info">
+      <div class="project__grid project__grid--assets">
+        @if (imageAddress; as imageAddress) {
+          <div class="project__image">
+            <label class="field-label text-body-12" style="text-align: center" for="name"
+              >логотип</label
+            >
+            <app-avatar-control
+              id="imageAddress"
+              [haveHint]="true"
+              [tooltipText]="'Загрузите логотип проекта, отражающий вашу индивидуальность. Разместите его в центре круга.'"
+              [tooltipPosition]="'right'"
+              [tooltipWidth]="300"
+              [size]="68"
+              formControlName="imageAddress"
+              type="project"
+              [error]="showError(imageAddress)"
+            ></app-avatar-control>
+            @if (showError(imageAddress, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.EMPTY_AVATAR }}
+              </div>
+            }
+          </div>
+        }
+        @if (presentationAddress; as presentationAddress) {
+          <fieldset class="project__file">
+            <label class="field-label text-body-12" style="text-align: center" for="name"
+              >презентация</label
+            >
+            <app-upload-file
+              formControlName="presentationAddress"
+              accept=".pdf,.pptx"
+              [error]="showError(presentationAddress)"
+            >
+              <ng-container emptyPlaceholder>
+                <i appIcon icon="file" appSquare="16"></i>
+                <p class="text-body-12 project__slides-text">
+                  Презентации формата .PDF<br />
+                  или .PPTX весом до 50МБ
+                </p>
+                @if (showError(presentationAddress, "required")) {
+                  <p class="project__slides-error text-body-10">Загрузите файл</p>
+                }
+              </ng-container>
+            </app-upload-file>
+          </fieldset>
+        }
+        @if (coverImageAddress; as coverImageAddress) {
+          <fieldset class="project__file">
+            <label class="field-label text-body-12" for="name" style="text-align: center"
+              >обложка</label
+            >
+            <app-upload-file
+              formControlName="coverImageAddress"
+              accept=".jpg,.png,.jpeg"
+              [removable]="false"
+              [replaceable]="true"
+              [presetLabel]="
+                isDefaultCover() === true || !coverImageAddress.value ? 'Стандартная обложка' : null
+              "
+              [busy]="coverReset.pending()"
+              (uploaded)="isDefaultCover.set(false)"
+              [error]="showError(coverImageAddress)"
+            ></app-upload-file>
+          </fieldset>
+        }
+        @if (trl; as trl) {
+          <fieldset>
+            <app-select
+              size="small"
+              id="trl"
+              formControlName="trl"
+              placeholder="TRL"
+              [options]="trlList"
+              [error]="showError(trl)"
+            ></app-select>
+            @if (showError(trl, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            }
+          </fieldset>
+        }
+      </div>
 
-<div class="project__inner" [formGroup]="projectForm">
-  <div class="project__info">
-    <div class="project__grid project__grid--assets">
-      @if (imageAddress; as imageAddress) {
-        <div class="project__image">
-          <label class="field-label text-body-12" style="text-align: center" for="name"
-            >логотип</label
-          >
-          <app-avatar-control
-            id="imageAddress"
-            [haveHint]="true"
-            [tooltipText]="'Загрузите логотип проекта, отражающий вашу индивидуальность. Разместите его в центре круга.'"
-            [tooltipPosition]="'right'"
-            [tooltipWidth]="300"
-            [size]="68"
-            formControlName="imageAddress"
-            type="project"
-            [error]="showError(imageAddress)"
-          ></app-avatar-control>
-          @if (showError(imageAddress, "required")) {
-            <div class="text-body-10 error">
-              {{ errorMessage.EMPTY_AVATAR }}
-            </div>
-          }
-        </div>
-      }
-      @if (presentationAddress; as presentationAddress) {
-        <fieldset class="project__file">
-          <label class="field-label text-body-12" style="text-align: center" for="name"
-            >презентация</label
-          >
-          <app-upload-file
-            formControlName="presentationAddress"
-            accept=".pdf,.pptx"
-            [error]="showError(presentationAddress)"
-          >
-            <ng-container emptyPlaceholder>
-              <i appIcon icon="file" appSquare="16"></i>
-              <p class="text-body-12 project__slides-text">
-                Презентации формата .PDF<br />
-                или .PPTX весом до 50МБ
-              </p>
-              @if (showError(presentationAddress, "required")) {
-                <p class="project__slides-error text-body-10">Загрузите файл</p>
+      <div class="project__grid project__grid--main">
+        @if (name; as name) {
+          <fieldset>
+            <label class="field-label text-body-12" for="name">название</label>
+            <app-input
+              size="big"
+              id="name"
+              class="project__validated-input"
+              [class.project__validated-input--error]="showError(name)"
+              formControlName="name"
+              [error]="showError(name)"
+              placeholder="название"
+              [maxLength]="256"
+            >
+              @if (showError(name)) {
+                <i
+                  class="project__input-error"
+                  appIcon
+                  icon="error"
+                  appSquare="20"
+                  aria-hidden="true"
+                ></i>
               }
-            </ng-container>
-          </app-upload-file>
-        </fieldset>
-      }
-      @if (coverImageAddress; as coverImageAddress) {
-        <fieldset class="project__file">
-          <label class="field-label text-body-12" for="name" style="text-align: center"
-            >обложка</label
-          >
-          <app-upload-file
-            formControlName="coverImageAddress"
-            accept=".jpg,.png,.jpeg"
-            [removable]="false"
-            [replaceable]="true"
-            [presetLabel]="
-              isDefaultCover() === true || !coverImageAddress.value ? 'Стандартная обложка' : null
-            "
-            [busy]="coverReset.pending()"
-            (uploaded)="isDefaultCover.set(false)"
-            [error]="showError(coverImageAddress)"
-          ></app-upload-file>
-        </fieldset>
-      }
-      @if (trl; as trl) {
-        <fieldset>
-          <app-select
-            size="small"
-            id="trl"
-            formControlName="trl"
-            placeholder="TRL"
-            [options]="trlList"
-            [error]="showError(trl)"
-          ></app-select>
-          @if (showError(trl, "required")) {
-            <div class="text-body-10 error">
-              {{ errorMessage.VALIDATION_REQUIRED }}
+            </app-input>
+            @if (showError(name, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            }
+          </fieldset>
+        }
+        @if (region; as region) {
+          <fieldset>
+            <label class="field-label text-body-12" for="region">регион</label>
+            <div class="project__region-field">
+              <app-region-select
+                id="region"
+                formControlName="region"
+                [error]="showError(region)"
+                placeholder="выберите регион"
+              ></app-region-select>
             </div>
-          }
-        </fieldset>
-      }
+            @if (showError(region, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            } @else if (showError(region, "canonicalRegion")) {
+              <div class="text-body-10 error">Выберите регион из списка</div>
+            }
+          </fieldset>
+        }
+        @if (industry; as industry) {
+          <fieldset>
+            <label class="field-label text-body-12" for="industry">сфера</label>
+            @if (industries$ | async; as industries) {
+              <app-select
+                size="big"
+                id="industry"
+                formControlName="industryId"
+                placeholder="выберите сферу проекта"
+                [options]="industries"
+                [error]="showError(industry)"
+              ></app-select>
+            }
+            @if (showError(industry, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            }
+          </fieldset>
+        }
+        @if (implementationDeadline; as implementationDeadline) {
+          <fieldset>
+            <label
+              class="field-label text-body-12"
+              for="implementationDeadline"
+              style="text-align: center"
+              >дата</label
+            >
+            <app-input
+              size="small"
+              id="implementationDeadline"
+              [haveHint]="true"
+              [tooltipText]="'Расскажите, до какого времени будет реализовываться проект. Если проект бессрочный, поставьте на 5 лет вперед :)'"
+              [tooltipPosition]="'left'"
+              [tooltipWidth]="300"
+              type="date"
+              formControlName="implementationDeadline"
+              [error]="showError(implementationDeadline)"
+              placeholder="25.01.25"
+            ></app-input>
+            @if (showError(implementationDeadline, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            }
+          </fieldset>
+        }
+      </div>
     </div>
 
-    <div class="project__grid project__grid--main">
-      @if (name; as name) {
-        <fieldset>
-          <label class="field-label text-body-12" for="name">название</label>
-          <app-input
-            size="big"
-            id="name"
-            class="project__validated-input"
-            [class.project__validated-input--error]="showError(name)"
-            formControlName="name"
-            [error]="showError(name)"
-            placeholder="название"
-            [maxLength]="256"
-          >
-            @if (showError(name)) {
-              <i
-                class="project__input-error"
-                appIcon
-                icon="error"
-                appSquare="20"
-                aria-hidden="true"
-              ></i>
-            }
-          </app-input>
-          @if (showError(name, "required")) {
-            <div class="text-body-10 error">
-              {{ errorMessage.VALIDATION_REQUIRED }}
-            </div>
+    @if (problem; as problem) {
+      <fieldset class="project__problem">
+        <label class="field-label text-body-12" for="problem"
+          >проблема, которую решает проект</label
+        >
+        <app-input
+          size="big"
+          id="problem"
+          class="project__validated-input"
+          [class.project__validated-input--error]="showError(problem)"
+          formControlName="problem"
+          [error]="showError(problem)"
+          placeholder="улучшить качество жизни студентов"
+          [maxLength]="1000"
+        >
+          @if (showError(problem)) {
+            <i
+              class="project__input-error"
+              appIcon
+              icon="error"
+              appSquare="20"
+              aria-hidden="true"
+            ></i>
           }
-        </fieldset>
-      }
-      @if (region; as region) {
-        <fieldset>
-          <label class="field-label text-body-12" for="region">регион</label>
-          <div class="project__region-field">
-            <app-region-select
-              id="region"
-              formControlName="region"
-              [error]="showError(region)"
-              placeholder="выберите регион"
-            ></app-region-select>
+        </app-input>
+        @if (showError(problem, "required")) {
+          <div class="text-body-10 error">
+            {{ errorMessage.VALIDATION_REQUIRED }}
           </div>
-          @if (showError(region, "required")) {
-            <div class="text-body-10 error">
-              {{ errorMessage.VALIDATION_REQUIRED }}
-            </div>
-          } @else if (showError(region, "canonicalRegion")) {
-            <div class="text-body-10 error">Выберите регион из списка</div>
-          }
-        </fieldset>
-      }
-      @if (industry; as industry) {
+        }
+      </fieldset>
+    }
+    @if (description; as description) {
+      <fieldset class="project__description">
+        <label for="description" class="field-label text-body-12">информация</label>
+        <app-textarea
+          [style.overflow-y]="
+            (description.value && description.value.length) > 400 ? 'auto' : 'none'
+          "
+          size="big"
+          id="description"
+          [haveHint]="true"
+          [tooltipText]="'Расскажите основную информацию о проекте. Про что проект, история проекта, как он появился'"
+          [tooltipPosition]="'left'"
+          [tooltipWidth]="350"
+          [error]="showError(description)"
+          formControlName="description"
+          placeholder="проект начал свое существование с 2020 года"
+          [maxLength]="800"
+        ></app-textarea>
+        @if (showError(description, "required")) {
+          <div class="text-body-10 error">
+            {{ errorMessage.VALIDATION_REQUIRED }}
+          </div>
+        }
+      </fieldset>
+    }
+
+    <div class="project__info--additional">
+      @if (actuality; as actuality) {
         <fieldset>
-          <label class="field-label text-body-12" for="industry">сфера</label>
-          @if (industries$ | async; as industries) {
-            <app-select
-              size="big"
-              id="industry"
-              formControlName="industryId"
-              placeholder="выберите сферу проекта"
-              [options]="industries"
-              [error]="showError(industry)"
-            ></app-select>
-          }
-          @if (showError(industry, "required")) {
+          <label class="field-label text-body-12" for="actuality">актуальность</label>
+          <app-textarea
+            size="big"
+            id="actuality"
+            [haveHint]="true"
+            [tooltipText]="'Расскажите, почему ваш проект актуален именно сейчас. Укажите правительственные инициативы, мировые и национальные тренды, которые подтверждают его важность.'"
+            [tooltipPosition]="'right'"
+            [tooltipWidth]="350"
+            formControlName="actuality"
+            [error]="showError(actuality)"
+            placeholder="указом президента от 03.07.2023 "
+            [maxLength]="1000"
+          ></app-textarea>
+          @if (showError(actuality, "required")) {
             <div class="text-body-10 error">
               {{ errorMessage.VALIDATION_REQUIRED }}
             </div>
           }
         </fieldset>
       }
-      @if (implementationDeadline; as implementationDeadline) {
+      @if (targetAudience; as targetAudience) {
         <fieldset>
-          <label
-            class="field-label text-body-12"
-            for="implementationDeadline"
-            style="text-align: center"
-            >дата</label
-          >
-          <app-input
-            size="small"
-            id="implementationDeadline"
+          <label class="field-label text-body-12" for="targetAudience">целевая аудитория</label>
+          <app-textarea
+            size="big"
+            id="targetAudience"
             [haveHint]="true"
-            [tooltipText]="'Расскажите, до какого времени будет реализовываться проект. Если проект бессрочный, поставьте на 5 лет вперед :)'"
+            [tooltipText]="'Расскажите, кто ваш целевой клиент и какую проблему он решает с помощью вашего проекта. Помните, что вся Россия не может быть целевой аудиторией. Чем конкретнее и меньше аудитория, тем лучше!'"
             [tooltipPosition]="'left'"
-            [tooltipWidth]="300"
-            type="date"
-            formControlName="implementationDeadline"
-            [error]="showError(implementationDeadline)"
-            placeholder="25.01.25"
-          ></app-input>
-          @if (showError(implementationDeadline, "required")) {
+            [tooltipWidth]="350"
+            [error]="showError(targetAudience)"
+            formControlName="targetAudience"
+            placeholder="студенты 2–4 курсов IT и бизнес-направлений"
+            [maxLength]="500"
+          ></app-textarea>
+          @if (showError(targetAudience, "required")) {
             <div class="text-body-10 error">
               {{ errorMessage.VALIDATION_REQUIRED }}
             </div>
@@ -186,290 +293,590 @@
         </fieldset>
       }
     </div>
-  </div>
 
-  @if (problem; as problem) {
-    <fieldset class="project__problem">
-      <label class="field-label text-body-12" for="problem">проблема, которую решает проект</label>
-      <app-input
+    <div
+      class="project__options"
+      [formGroup]="goalForm"
+      [style.gap]="hasGoals() || hasLinks() ? '0px' : '35px'"
+      [style.margin-top]="
+        hasGoals() && hasLinks() ? '20px' : hasGoals() ? '20px' : hasLinks() ? '20px' : '0px'
+      "
+    >
+      @if (hasGoals()) {
+        <ul formArrayName="goals" class="project__links--wrapper">
+          @for (control of goals.controls; track i; let i = $index) {
+            <li class="project__links">
+              <div [formGroupName]="i" class="project__links">
+                @if (goals.at(i)?.get("title"); as goalName) {
+                  <fieldset style="flex-grow: 1">
+                    <label class="text-body-12 field-label">краткосрочные цели проекта</label>
+                    <app-input
+                      size="big"
+                      [error]="goalName | controlError"
+                      placeholder="заработать много денег"
+                      formControlName="title"
+                    ></app-input>
+                    @if (goalName | controlError: "required") {
+                      <div class="text-body-10 error">
+                        {{ errorMessage.VALIDATION_REQUIRED }}
+                      </div>
+                    }
+                  </fieldset>
+                }
+                @if (goals.at(i)?.get("completionDate"); as goalDate) {
+                  <fieldset>
+                    <label
+                      class="text-body-12 field-label"
+                      style="text-align: center; margin-right: 12px"
+                      >дата</label
+                    >
+                    <app-input
+                      size="small"
+                      type="date"
+                      [mask]="'d0.M0.yy'"
+                      [error]="goalDate | controlError"
+                      placeholder="21.05.25"
+                      formControlName="completionDate"
+                    ></app-input>
+                    @if (goalDate | controlError: "required") {
+                      <div class="text-body-10 error">
+                        {{ errorMessage.VALIDATION_REQUIRED }}
+                      </div>
+                    }
+                  </fieldset>
+                }
+                @if (goals.at(i)?.get("responsible"); as goalLeader) {
+                  <fieldset>
+                    <label
+                      class="text-body-12 field-label"
+                      style="text-align: center; margin-right: 12px; margin-left: 0px"
+                      >лидер</label
+                    >
+
+                    @if (getSelectedLeaderForGoal(i); as selectedLeader) {
+                      <div class="selected-leader">
+                        <a [routerLink]="AppRoutes.profile.detail(selectedLeader.userId)">
+                          <app-avatar [url]="selectedLeader.avatar" [size]="40"></app-avatar>
+                        </a>
+                      </div>
+                    } @else {
+                      <app-button
+                        type="icon"
+                        (click)="toggleGoalLeaderModal(i)"
+                        size="small"
+                        appearance="outline"
+                      >
+                        <i appIcon icon="add-person" appSquare="14"></i>
+                      </app-button>
+                    }
+                    @if (goalLeader | controlError: "required") {
+                      <div class="text-body-10 error">
+                        {{ errorMessage.VALIDATION_REQUIRED }}
+                      </div>
+                    }
+                  </fieldset>
+                }
+              </div>
+              <app-button
+                class="project__links--remove"
+                color="red"
+                (click)="removeGoal(i, goals.value[i].id)"
+                type="icon"
+              >
+                <i appIcon icon="basket" appSquare="14"></i>
+              </app-button>
+            </li>
+          }
+        </ul>
+      }
+
+      <app-modal [open]="goalLeaderShowModal()" (openChange)="toggleGoalLeaderModal()">
+        <div class="cancel">
+          <div class="cancel__top">
+            <i
+              (click)="toggleGoalLeaderModal()"
+              appIcon
+              appSquare="24"
+              icon="cross"
+              class="cancel__cross"
+            ></i>
+            <p class="cancel__title text-body-14">выберите ответственного</p>
+
+            <div class="project__invite">
+              <ul class="invite__team" [class.invite__team--scrollable]="collaborators.length > 8">
+                @for (collaborator of collaborators(); track collaborator.userId) {
+                  <li class="invite__item">
+                    <div class="invite__item--info">
+                      <app-avatar [url]="collaborator.avatar" [size]="40"></app-avatar>
+                      <p class="text-body-12">
+                        {{ collaborator.firstName }} {{ collaborator.lastName }}
+                      </p>
+                    </div>
+                    <app-input
+                      type="radio"
+                      name="goalLeaderSelection"
+                      [appValue]="collaborator.userId.toString()"
+                      [checked]="selectedLeaderId() === collaborator.userId.toString()"
+                      (change)="onLeaderRadioChange($event)"
+                    ></app-input>
+                  </li>
+                }
+              </ul>
+            </div>
+          </div>
+
+          <app-button
+            size="medium"
+            appearance="outline"
+            class="cancel__button"
+            customTypographyClass="text-body-12"
+            (click)="addLeader()"
+            [disabled]="!selectedLeaderId"
+          >
+            подтвердить выбор
+          </app-button>
+        </div>
+      </app-modal>
+
+      <app-button
+        (click)="addGoal()"
         size="big"
-        id="problem"
-        class="project__validated-input"
-        [class.project__validated-input--error]="showError(problem)"
-        formControlName="problem"
-        [error]="showError(problem)"
-        placeholder="улучшить качество жизни студентов"
-        [maxLength]="1000"
+        appearance="outline"
+        customTypographyClass="text-body-12"
+        [style.margin-bottom]="hasGoals() && hasLinks() ? '12px' : hasGoals() ? '35px' : '35px'"
       >
-        @if (showError(problem)) {
-          <i
-            class="project__input-error"
-            appIcon
-            icon="error"
-            appSquare="20"
-            aria-hidden="true"
-          ></i>
+        <span>добавить краткосрочную цель проекта</span>
+        <i appIcon icon="plus" appSquare="12"></i>
+      </app-button>
+    </div>
+
+    <div [formGroup]="projectForm">
+      <div formArrayName="links">
+        @if (hasLinks()) {
+          <ul class="project__links--wrapper">
+            @for (control of linkControls(); track control; let i = $index) {
+              <li class="project__links">
+                <fieldset style="flex-grow: 1">
+                  <label class="text-body-12 field-label">ссылка на контакты и сообщества</label>
+                  <app-input
+                    size="big"
+                    [formControl]="control"
+                    [error]="showError(control)"
+                    placeholder="@eeeasycarrer"
+                  ></app-input>
+                  @if (showError(control, "required")) {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+
+                <app-button
+                  class="project__links--remove"
+                  color="red"
+                  (click)="removeLink(i)"
+                  type="icon"
+                >
+                  <i appIcon icon="basket" appSquare="14"></i>
+                </app-button>
+              </li>
+            }
+          </ul>
         }
-      </app-input>
-      @if (showError(problem, "required")) {
-        <div class="text-body-10 error">
-          {{ errorMessage.VALIDATION_REQUIRED }}
-        </div>
-      }
-    </fieldset>
-  }
-  @if (description; as description) {
-    <fieldset class="project__description">
-      <label for="description" class="field-label text-body-12">информация</label>
-      <app-textarea
-        [style.overflow-y]="(description.value && description.value.length) > 400 ? 'auto' : 'none'"
+      </div>
+
+      <app-button
+        (click)="addLink()"
         size="big"
-        id="description"
-        [haveHint]="true"
-        [tooltipText]="'Расскажите основную информацию о проекте. Про что проект, история проекта, как он появился'"
-        [tooltipPosition]="'left'"
-        [tooltipWidth]="350"
-        [error]="showError(description)"
-        formControlName="description"
-        placeholder="проект начал свое существование с 2020 года"
-        [maxLength]="800"
-      ></app-textarea>
-      @if (showError(description, "required")) {
-        <div class="text-body-10 error">
-          {{ errorMessage.VALIDATION_REQUIRED }}
-        </div>
-      }
-    </fieldset>
-  }
+        appearance="outline"
+        customTypographyClass="text-body-12"
+      >
+        <span>добавить ссылку на контакты и сообщества</span>
+        <i appIcon icon="plus" appSquare="12"></i>
+      </app-button>
+    </div>
+  </div>
+} @else {
+  <div class="project__inner" [formGroup]="projectForm">
+    <div class="project__info">
+      <div class="project__grid project__grid--assets">
+        @if (imageAddress; as imageAddress) {
+          <div class="project__image">
+            <label class="field-label text-body-12" style="text-align: center" for="name"
+              >логотип</label
+            >
+            <app-avatar-control
+              id="imageAddress"
+              [haveHint]="true"
+              [tooltipText]="'Загрузите логотип проекта, отражающий вашу индивидуальность. Разместите его в центре круга.'"
+              [tooltipPosition]="'right'"
+              [tooltipWidth]="300"
+              [size]="68"
+              formControlName="imageAddress"
+              type="project"
+              [error]="showError(imageAddress)"
+            ></app-avatar-control>
+            @if (showError(imageAddress, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.EMPTY_AVATAR }}
+              </div>
+            }
+          </div>
+        }
+        @if (presentationAddress; as presentationAddress) {
+          <fieldset class="project__file">
+            <label class="field-label text-body-12" style="text-align: center" for="name"
+              >презентация</label
+            >
+            <app-upload-file
+              formControlName="presentationAddress"
+              accept=".pdf,.pptx"
+              [error]="showError(presentationAddress)"
+            >
+              <ng-container emptyPlaceholder>
+                <i appIcon icon="file" appSquare="16"></i>
+                <p class="text-body-12 project__slides-text">
+                  Презентации формата .PDF<br />
+                  или .PPTX весом до 50МБ
+                </p>
+                @if (showError(presentationAddress, "required")) {
+                  <p class="project__slides-error text-body-10">Загрузите файл</p>
+                }
+              </ng-container>
+            </app-upload-file>
+          </fieldset>
+        }
+        @if (coverImageAddress; as coverImageAddress) {
+          <fieldset class="project__file">
+            <label class="field-label text-body-12" for="name" style="text-align: center"
+              >обложка</label
+            >
+            <app-upload-file
+              formControlName="coverImageAddress"
+              accept=".jpg,.png,.jpeg"
+              [removable]="false"
+              [replaceable]="true"
+              [presetLabel]="
+                isDefaultCover() === true || !coverImageAddress.value ? 'Стандартная обложка' : null
+              "
+              [busy]="coverReset.pending()"
+              (uploaded)="isDefaultCover.set(false)"
+              [error]="showError(coverImageAddress)"
+            ></app-upload-file>
+          </fieldset>
+        }
+        @if (trl; as trl) {
+          <fieldset>
+            <app-select
+              size="small"
+              id="trl"
+              formControlName="trl"
+              placeholder="TRL"
+              [options]="trlList"
+              [error]="showError(trl)"
+            ></app-select>
+            @if (showError(trl, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            }
+          </fieldset>
+        }
+      </div>
 
-  <div class="project__info--additional">
-    @if (actuality; as actuality) {
-      <fieldset>
-        <label class="field-label text-body-12" for="actuality">актуальность</label>
-        <app-textarea
+      <div class="project__grid project__grid--main">
+        @if (name; as name) {
+          <fieldset>
+            <label class="field-label text-body-12" for="name">название</label>
+            <app-input
+              size="big"
+              id="name"
+              class="project__validated-input"
+              [class.project__validated-input--error]="showError(name)"
+              formControlName="name"
+              [error]="showError(name)"
+              placeholder="название"
+              [maxLength]="256"
+            >
+              @if (showError(name)) {
+                <i
+                  class="project__input-error"
+                  appIcon
+                  icon="error"
+                  appSquare="20"
+                  aria-hidden="true"
+                ></i>
+              }
+            </app-input>
+            @if (showError(name, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            }
+          </fieldset>
+        }
+        @if (region; as region) {
+          <fieldset>
+            <label class="field-label text-body-12" for="region">регион</label>
+            <div class="project__region-field">
+              <app-region-select
+                id="region"
+                formControlName="region"
+                [error]="showError(region)"
+                placeholder="выберите регион"
+              ></app-region-select>
+            </div>
+            @if (showError(region, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            } @else if (showError(region, "canonicalRegion")) {
+              <div class="text-body-10 error">Выберите регион из списка</div>
+            }
+          </fieldset>
+        }
+        @if (industry; as industry) {
+          <fieldset>
+            <label class="field-label text-body-12" for="industry">сфера</label>
+            @if (industries$ | async; as industries) {
+              <app-select
+                size="big"
+                id="industry"
+                formControlName="industryId"
+                placeholder="выберите сферу проекта"
+                [options]="industries"
+                [error]="showError(industry)"
+              ></app-select>
+            }
+            @if (showError(industry, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            }
+          </fieldset>
+        }
+        @if (implementationDeadline; as implementationDeadline) {
+          <fieldset>
+            <label
+              class="field-label text-body-12"
+              for="implementationDeadline"
+              style="text-align: center"
+              >дата</label
+            >
+            <app-input
+              size="small"
+              id="implementationDeadline"
+              [haveHint]="true"
+              [tooltipText]="'Расскажите, до какого времени будет реализовываться проект. Если проект бессрочный, поставьте на 5 лет вперед :)'"
+              [tooltipPosition]="'left'"
+              [tooltipWidth]="300"
+              type="date"
+              formControlName="implementationDeadline"
+              [error]="showError(implementationDeadline)"
+              placeholder="25.01.25"
+            ></app-input>
+            @if (showError(implementationDeadline, "required")) {
+              <div class="text-body-10 error">
+                {{ errorMessage.VALIDATION_REQUIRED }}
+              </div>
+            }
+          </fieldset>
+        }
+      </div>
+    </div>
+
+    @if (problem; as problem) {
+      <fieldset class="project__problem">
+        <label class="field-label text-body-12" for="problem"
+          >проблема, которую решает проект</label
+        >
+        <app-input
           size="big"
-          id="actuality"
-          [haveHint]="true"
-          [tooltipText]="'Расскажите, почему ваш проект актуален именно сейчас. Укажите правительственные инициативы, мировые и национальные тренды, которые подтверждают его важность.'"
-          [tooltipPosition]="'right'"
-          [tooltipWidth]="350"
-          formControlName="actuality"
-          [error]="showError(actuality)"
-          placeholder="указом президента от 03.07.2023 "
+          id="problem"
+          class="project__validated-input"
+          [class.project__validated-input--error]="showError(problem)"
+          formControlName="problem"
+          [error]="showError(problem)"
+          placeholder="улучшить качество жизни студентов"
           [maxLength]="1000"
-        ></app-textarea>
-        @if (showError(actuality, "required")) {
+        >
+          @if (showError(problem)) {
+            <i
+              class="project__input-error"
+              appIcon
+              icon="error"
+              appSquare="20"
+              aria-hidden="true"
+            ></i>
+          }
+        </app-input>
+        @if (showError(problem, "required")) {
           <div class="text-body-10 error">
             {{ errorMessage.VALIDATION_REQUIRED }}
           </div>
         }
       </fieldset>
     }
-    @if (targetAudience; as targetAudience) {
-      <fieldset>
-        <label class="field-label text-body-12" for="targetAudience">целевая аудитория</label>
+    @if (description; as description) {
+      <fieldset class="project__description">
+        <label for="description" class="field-label text-body-12">информация</label>
         <app-textarea
+          [style.overflow-y]="
+            (description.value && description.value.length) > 400 ? 'auto' : 'none'
+          "
           size="big"
-          id="targetAudience"
+          id="description"
           [haveHint]="true"
-          [tooltipText]="'Расскажите, кто ваш целевой клиент и какую проблему он решает с помощью вашего проекта. Помните, что вся Россия не может быть целевой аудиторией. Чем конкретнее и меньше аудитория, тем лучше!'"
+          [tooltipText]="'Расскажите основную информацию о проекте. Про что проект, история проекта, как он появился'"
           [tooltipPosition]="'left'"
           [tooltipWidth]="350"
-          [error]="showError(targetAudience)"
-          formControlName="targetAudience"
-          placeholder="студенты 2–4 курсов IT и бизнес-направлений"
-          [maxLength]="500"
+          [error]="showError(description)"
+          formControlName="description"
+          placeholder="проект начал свое существование с 2020 года"
+          [maxLength]="800"
         ></app-textarea>
-        @if (showError(targetAudience, "required")) {
+        @if (showError(description, "required")) {
           <div class="text-body-10 error">
             {{ errorMessage.VALIDATION_REQUIRED }}
           </div>
         }
       </fieldset>
     }
-  </div>
-
-  <div
-    class="project__options"
-    [formGroup]="goalForm"
-    [style.gap]="hasGoals() || hasLinks() ? '0px' : '35px'"
-    [style.margin-top]="
-      hasGoals() && hasLinks() ? '20px' : hasGoals() ? '20px' : hasLinks() ? '20px' : '0px'
-    "
-  >
-    @if (hasGoals()) {
-      <ul formArrayName="goals" class="project__links--wrapper">
-        @for (control of goals.controls; track i; let i = $index) {
-          <li class="project__links">
-            <div [formGroupName]="i" class="project__links">
-              @if (goals.at(i)?.get("title"); as goalName) {
-                <fieldset style="flex-grow: 1">
-                  <label class="text-body-12 field-label">краткосрочные цели проекта</label>
-                  <app-input
-                    size="big"
-                    [error]="goalName | controlError"
-                    placeholder="заработать много денег"
-                    formControlName="title"
-                  ></app-input>
-                  @if (goalName | controlError: "required") {
-                    <div class="text-body-10 error">
-                      {{ errorMessage.VALIDATION_REQUIRED }}
-                    </div>
-                  }
-                </fieldset>
-              }
-              @if (goals.at(i)?.get("completionDate"); as goalDate) {
-                <fieldset>
-                  <label
-                    class="text-body-12 field-label"
-                    style="text-align: center; margin-right: 12px"
-                    >дата</label
-                  >
-                  <app-input
-                    size="small"
-                    type="date"
-                    [mask]="'d0.M0.yy'"
-                    [error]="goalDate | controlError"
-                    placeholder="21.05.25"
-                    formControlName="completionDate"
-                  ></app-input>
-                  @if (goalDate | controlError: "required") {
-                    <div class="text-body-10 error">
-                      {{ errorMessage.VALIDATION_REQUIRED }}
-                    </div>
-                  }
-                </fieldset>
-              }
-              @if (goals.at(i)?.get("responsible"); as goalLeader) {
-                <fieldset>
-                  <label
-                    class="text-body-12 field-label"
-                    style="text-align: center; margin-right: 12px; margin-left: 0px"
-                    >лидер</label
-                  >
 
-                  @if (getSelectedLeaderForGoal(i); as selectedLeader) {
-                    <div class="selected-leader">
-                      <a [routerLink]="AppRoutes.profile.detail(selectedLeader.userId)">
-                        <app-avatar [url]="selectedLeader.avatar" [size]="40"></app-avatar>
-                      </a>
-                    </div>
-                  } @else {
-                    <app-button
-                      type="icon"
-                      (click)="toggleGoalLeaderModal(i)"
-                      size="small"
-                      appearance="outline"
-                    >
-                      <i appIcon icon="add-person" appSquare="14"></i>
-                    </app-button>
-                  }
-                  @if (goalLeader | controlError: "required") {
-                    <div class="text-body-10 error">
-                      {{ errorMessage.VALIDATION_REQUIRED }}
-                    </div>
-                  }
-                </fieldset>
-              }
+    <div class="project__info--additional">
+      @if (actuality; as actuality) {
+        <fieldset>
+          <label class="field-label text-body-12" for="actuality">актуальность</label>
+          <app-textarea
+            size="big"
+            id="actuality"
+            [haveHint]="true"
+            [tooltipText]="'Расскажите, почему ваш проект актуален именно сейчас. Укажите правительственные инициативы, мировые и национальные тренды, которые подтверждают его важность.'"
+            [tooltipPosition]="'right'"
+            [tooltipWidth]="350"
+            formControlName="actuality"
+            [error]="showError(actuality)"
+            placeholder="указом президента от 03.07.2023 "
+            [maxLength]="1000"
+          ></app-textarea>
+          @if (showError(actuality, "required")) {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_REQUIRED }}
             </div>
-            <app-button
-              class="project__links--remove"
-              color="red"
-              (click)="removeGoal(i, goals.value[i].id)"
-              type="icon"
-            >
-              <i appIcon icon="basket" appSquare="14"></i>
-            </app-button>
-          </li>
-        }
-      </ul>
-    }
-
-    <app-modal [open]="goalLeaderShowModal()" (openChange)="toggleGoalLeaderModal()">
-      <div class="cancel">
-        <div class="cancel__top">
-          <i
-            (click)="toggleGoalLeaderModal()"
-            appIcon
-            appSquare="24"
-            icon="cross"
-            class="cancel__cross"
-          ></i>
-          <p class="cancel__title text-body-14">выберите ответственного</p>
-
-          <div class="project__invite">
-            <ul class="invite__team" [class.invite__team--scrollable]="collaborators.length > 8">
-              @for (collaborator of collaborators(); track collaborator.userId) {
-                <li class="invite__item">
-                  <div class="invite__item--info">
-                    <app-avatar [url]="collaborator.avatar" [size]="40"></app-avatar>
-                    <p class="text-body-12">
-                      {{ collaborator.firstName }} {{ collaborator.lastName }}
-                    </p>
-                  </div>
-                  <app-input
-                    type="radio"
-                    name="goalLeaderSelection"
-                    [appValue]="collaborator.userId.toString()"
-                    [checked]="selectedLeaderId() === collaborator.userId.toString()"
-                    (change)="onLeaderRadioChange($event)"
-                  ></app-input>
-                </li>
-              }
-            </ul>
-          </div>
-        </div>
-
-        <app-button
-          size="medium"
-          appearance="outline"
-          class="cancel__button"
-          customTypographyClass="text-body-12"
-          (click)="addLeader()"
-          [disabled]="!selectedLeaderId"
-        >
-          подтвердить выбор
-        </app-button>
-      </div>
-    </app-modal>
+          }
+        </fieldset>
+      }
+      @if (targetAudience; as targetAudience) {
+        <fieldset>
+          <label class="field-label text-body-12" for="targetAudience">целевая аудитория</label>
+          <app-textarea
+            size="big"
+            id="targetAudience"
+            [haveHint]="true"
+            [tooltipText]="'Расскажите, кто ваш целевой клиент и какую проблему он решает с помощью вашего проекта. Помните, что вся Россия не может быть целевой аудиторией. Чем конкретнее и меньше аудитория, тем лучше!'"
+            [tooltipPosition]="'left'"
+            [tooltipWidth]="350"
+            [error]="showError(targetAudience)"
+            formControlName="targetAudience"
+            placeholder="студенты 2–4 курсов IT и бизнес-направлений"
+            [maxLength]="500"
+          ></app-textarea>
+          @if (showError(targetAudience, "required")) {
+            <div class="text-body-10 error">
+              {{ errorMessage.VALIDATION_REQUIRED }}
+            </div>
+          }
+        </fieldset>
+      }
+    </div>
 
-    <app-button
-      (click)="addGoal()"
-      size="big"
-      appearance="outline"
-      customTypographyClass="text-body-12"
-      [style.margin-bottom]="hasGoals() && hasLinks() ? '12px' : hasGoals() ? '35px' : '35px'"
+    <div
+      class="project__options"
+      [formGroup]="goalForm"
+      [style.gap]="hasGoals() || hasLinks() ? '0px' : '35px'"
+      [style.margin-top]="
+        hasGoals() && hasLinks() ? '20px' : hasGoals() ? '20px' : hasLinks() ? '20px' : '0px'
+      "
     >
-      <span>добавить краткосрочную цель проекта</span>
-      <i appIcon icon="plus" appSquare="12"></i>
-    </app-button>
-  </div>
-
-  <div [formGroup]="projectForm">
-    <div formArrayName="links">
-      @if (hasLinks()) {
-        <ul class="project__links--wrapper">
-          @for (control of linkControls(); track control; let i = $index) {
+      @if (hasGoals()) {
+        <ul formArrayName="goals" class="project__links--wrapper">
+          @for (control of goals.controls; track i; let i = $index) {
             <li class="project__links">
-              <fieldset style="flex-grow: 1">
-                <label class="text-body-12 field-label">ссылка на контакты и сообщества</label>
-                <app-input
-                  size="big"
-                  [formControl]="control"
-                  [error]="showError(control)"
-                  placeholder="@eeeasycarrer"
-                ></app-input>
-                @if (showError(control, "required")) {
-                  <div class="text-body-10 error">
-                    {{ errorMessage.VALIDATION_REQUIRED }}
-                  </div>
+              <div [formGroupName]="i" class="project__links">
+                @if (goals.at(i)?.get("title"); as goalName) {
+                  <fieldset style="flex-grow: 1">
+                    <label class="text-body-12 field-label">краткосрочные цели проекта</label>
+                    <app-input
+                      size="big"
+                      [error]="goalName | controlError"
+                      placeholder="заработать много денег"
+                      formControlName="title"
+                    ></app-input>
+                    @if (goalName | controlError: "required") {
+                      <div class="text-body-10 error">
+                        {{ errorMessage.VALIDATION_REQUIRED }}
+                      </div>
+                    }
+                  </fieldset>
                 }
-              </fieldset>
+                @if (goals.at(i)?.get("completionDate"); as goalDate) {
+                  <fieldset>
+                    <label
+                      class="text-body-12 field-label"
+                      style="text-align: center; margin-right: 12px"
+                      >дата</label
+                    >
+                    <app-input
+                      size="small"
+                      type="date"
+                      [mask]="'d0.M0.yy'"
+                      [error]="goalDate | controlError"
+                      placeholder="21.05.25"
+                      formControlName="completionDate"
+                    ></app-input>
+                    @if (goalDate | controlError: "required") {
+                      <div class="text-body-10 error">
+                        {{ errorMessage.VALIDATION_REQUIRED }}
+                      </div>
+                    }
+                  </fieldset>
+                }
+                @if (goals.at(i)?.get("responsible"); as goalLeader) {
+                  <fieldset>
+                    <label
+                      class="text-body-12 field-label"
+                      style="text-align: center; margin-right: 12px; margin-left: 0px"
+                      >лидер</label
+                    >
 
+                    @if (getSelectedLeaderForGoal(i); as selectedLeader) {
+                      <div class="selected-leader">
+                        <a [routerLink]="AppRoutes.profile.detail(selectedLeader.userId)">
+                          <app-avatar [url]="selectedLeader.avatar" [size]="40"></app-avatar>
+                        </a>
+                      </div>
+                    } @else {
+                      <app-button
+                        type="icon"
+                        (click)="toggleGoalLeaderModal(i)"
+                        size="small"
+                        appearance="outline"
+                      >
+                        <i appIcon icon="add-person" appSquare="14"></i>
+                      </app-button>
+                    }
+                    @if (goalLeader | controlError: "required") {
+                      <div class="text-body-10 error">
+                        {{ errorMessage.VALIDATION_REQUIRED }}
+                      </div>
+                    }
+                  </fieldset>
+                }
+              </div>
               <app-button
                 class="project__links--remove"
                 color="red"
-                (click)="removeLink(i)"
+                (click)="removeGoal(i, goals.value[i].id)"
                 type="icon"
               >
                 <i appIcon icon="basket" appSquare="14"></i>
@@ -478,16 +885,111 @@
           }
         </ul>
       }
+
+      <app-modal [open]="goalLeaderShowModal()" (openChange)="toggleGoalLeaderModal()">
+        <div class="cancel">
+          <div class="cancel__top">
+            <i
+              (click)="toggleGoalLeaderModal()"
+              appIcon
+              appSquare="24"
+              icon="cross"
+              class="cancel__cross"
+            ></i>
+            <p class="cancel__title text-body-14">выберите ответственного</p>
+
+            <div class="project__invite">
+              <ul class="invite__team" [class.invite__team--scrollable]="collaborators.length > 8">
+                @for (collaborator of collaborators(); track collaborator.userId) {
+                  <li class="invite__item">
+                    <div class="invite__item--info">
+                      <app-avatar [url]="collaborator.avatar" [size]="40"></app-avatar>
+                      <p class="text-body-12">
+                        {{ collaborator.firstName }} {{ collaborator.lastName }}
+                      </p>
+                    </div>
+                    <app-input
+                      type="radio"
+                      name="goalLeaderSelection"
+                      [appValue]="collaborator.userId.toString()"
+                      [checked]="selectedLeaderId() === collaborator.userId.toString()"
+                      (change)="onLeaderRadioChange($event)"
+                    ></app-input>
+                  </li>
+                }
+              </ul>
+            </div>
+          </div>
+
+          <app-button
+            size="medium"
+            appearance="outline"
+            class="cancel__button"
+            customTypographyClass="text-body-12"
+            (click)="addLeader()"
+            [disabled]="!selectedLeaderId"
+          >
+            подтвердить выбор
+          </app-button>
+        </div>
+      </app-modal>
+
+      <app-button
+        (click)="addGoal()"
+        size="big"
+        appearance="outline"
+        customTypographyClass="text-body-12"
+        [style.margin-bottom]="hasGoals() && hasLinks() ? '12px' : hasGoals() ? '35px' : '35px'"
+      >
+        <span>добавить краткосрочную цель проекта</span>
+        <i appIcon icon="plus" appSquare="12"></i>
+      </app-button>
     </div>
 
-    <app-button
-      (click)="addLink()"
-      size="big"
-      appearance="outline"
-      customTypographyClass="text-body-12"
-    >
-      <span>добавить ссылку на контакты и сообщества</span>
-      <i appIcon icon="plus" appSquare="12"></i>
-    </app-button>
+    <div class="project__link-options" [formGroup]="projectForm">
+      <div formArrayName="links">
+        @if (hasLinks()) {
+          <ul class="project__links--wrapper">
+            @for (control of linkControls(); track control; let i = $index) {
+              <li class="project__links">
+                <fieldset style="flex-grow: 1">
+                  <label class="text-body-12 field-label">ссылка на контакты и сообщества</label>
+                  <app-input
+                    size="big"
+                    [formControl]="control"
+                    [error]="showError(control)"
+                    placeholder="@eeeasycarrer"
+                  ></app-input>
+                  @if (showError(control, "required")) {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+
+                <app-button
+                  class="project__links--remove"
+                  color="red"
+                  (click)="removeLink(i)"
+                  type="icon"
+                >
+                  <i appIcon icon="basket" appSquare="14"></i>
+                </app-button>
+              </li>
+            }
+          </ul>
+        }
+      </div>
+
+      <app-button
+        (click)="addLink()"
+        size="big"
+        appearance="outline"
+        customTypographyClass="text-body-12"
+      >
+        <span>добавить ссылку на контакты и сообщества</span>
+        <i appIcon icon="plus" appSquare="12"></i>
+      </app-button>
+    </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.scss
index 3013257ba..88f283bf6 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -277,3 +276,135 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .project {
+    &__validated-input ::ng-deep {
+      .field__input--error {
+        padding-right: 44px;
+      }
+    }
+
+    &__region-field {
+      &--error ::ng-deep .region-select__control input {
+        padding-right: 68px;
+      }
+    }
+
+    &__region-error {
+      position: absolute;
+      top: 11px;
+      right: 42px;
+      color: var(--red);
+      pointer-events: none;
+    }
+
+    &__grid {
+      @include responsive.apply-tablet-and-above {
+        &--main {
+          grid-template-columns: 1fr 1fr 1fr 0.2fr;
+        }
+      }
+    }
+
+    &__info {
+      &--additional {
+        flex-direction: column;
+
+        @include responsive.apply-tablet-and-above {
+          flex-direction: row;
+        }
+      }
+    }
+  }
+
+  .cancel {
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .project__grid--main {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .project__image {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 0;
+  }
+
+  .project__options > app-button,
+  .project__link-options > app-button {
+    display: block;
+    width: 100%;
+    margin-bottom: 0 !important;
+
+    ::ng-deep .button__content {
+      max-width: 100%;
+
+      > span {
+        min-width: 0;
+      }
+
+      > i {
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  .project__options {
+    gap: 16px !important;
+    margin-top: 24px !important;
+  }
+
+  .project__link-options {
+    margin-top: 16px;
+  }
+
+  .project__links--wrapper > .project__links {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 44px;
+    gap: 12px;
+    align-items: start;
+  }
+
+  .project__links > .project__links {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+  }
+
+  .project__links fieldset {
+    width: 100%;
+  }
+
+  .field-label {
+    text-align: left !important;
+  }
+
+  .project__image .field-label {
+    text-align: center !important;
+  }
+
+  @include responsive.apply-mobile {
+    .project__grid,
+    .project__info--additional {
+      @include responsive.single-column;
+    }
+
+    .invite__item {
+      flex-wrap: wrap;
+      gap: 12px;
+      width: 100%;
+      min-width: 0;
+    }
+
+    .invite__item--info {
+      min-width: 0;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.ts
index d7f4cc359..d03f4e5ae 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { Component, inject, OnInit, ChangeDetectionStrategy, input } from "@angular/core";
 import {
   AbstractControl,
@@ -59,6 +62,8 @@ import { ProjectCoverResetService } from "@api/project/facades/edit/project-cove
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectMainStepComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly projSubmitInitiated = input<boolean>(false);
 
   private readonly fb = inject(FormBuilder);
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.html
index de1f69197..f8747bb51 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.html
@@ -1,28 +1,66 @@
 <!-- @format -->
-
-<nav class="project__navigation">
-  <ul class="project__nav">
-    @for (item of navItems(); track $index) {
-      <li
-        class="project__item"
-        [class.project__item--active]="currentStep() === item.step"
-        (click)="onStepClick(item.step)"
-      >
-        <i
-          appIcon
-          [icon]="item.src"
-          class="project__icon"
-          appSquare="14"
-          [class.project__icon--active]="currentStep() === item.step"
-          alt="project-icon"
-        ></i>
-        <p
-          class="project__subtitle"
-          [class.project__subtitle--active]="currentStep() === item.step"
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <nav class="project__navigation">
+    <ul class="project__nav">
+      @for (item of navItems(); track $index) {
+        <li
+          class="project__item"
+          [class.project__item--active]="currentStep() === item.step"
+          (click)="onStepClick(item.step)"
         >
-          {{ item.label }}
-        </p>
-      </li>
-    }
-  </ul>
-</nav>
+          <i
+            appIcon
+            [icon]="item.src"
+            class="project__icon"
+            appSquare="14"
+            [class.project__icon--active]="currentStep() === item.step"
+            alt="project-icon"
+          ></i>
+          <p
+            class="project__subtitle"
+            [class.project__subtitle--active]="currentStep() === item.step"
+          >
+            {{ item.label }}
+          </p>
+        </li>
+      }
+    </ul>
+  </nav>
+} @else {
+  @if (desktopLayout()) {
+    <nav class="project__navigation">
+      <ul class="project__nav">
+        @for (item of navItems(); track $index) {
+          <li
+            class="project__item"
+            [class.project__item--active]="currentStep() === item.step"
+            (click)="onStepClick(item.step)"
+          >
+            <i
+              appIcon
+              [icon]="item.src"
+              class="project__icon"
+              appSquare="14"
+              [class.project__icon--active]="currentStep() === item.step"
+              alt="project-icon"
+            ></i>
+            <p
+              class="project__subtitle"
+              [class.project__subtitle--active]="currentStep() === item.step"
+            >
+              {{ item.label }}
+            </p>
+          </li>
+        }
+      </ul>
+    </nav>
+  } @else {
+    <app-tabs
+      label="Шаги редактирования"
+      [items]="tabs()"
+      [active]="currentStep()"
+      (selected)="onTabSelected($event)"
+    />
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.scss
index abc841229..e3b0e27b9 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -79,3 +78,15 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :host {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+    padding-block: var(--ui-space-md);
+    margin-bottom: var(--ui-space-md);
+    border-bottom: 1px solid var(--ui-border-subtle);
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.ts
index bf4900bbd..16d9ded5b 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-navigation/project-navigation.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import {
   Component,
   inject,
@@ -8,10 +11,11 @@ import {
   Input,
   ChangeDetectionStrategy,
   input,
+  computed,
   output,
 } from "@angular/core";
 import { ProjectStepService } from "@api/project/project-step.service";
-import { IconComponent } from "@uilib";
+import { DesktopLayoutService, IconComponent, TabsComponent } from "@uilib";
 import { CommonModule } from "@angular/common";
 import { Navigation } from "@core/lib/models/navigation.model";
 import { EditStep } from "@core/lib/models/edit-step";
@@ -21,12 +25,21 @@ import { EditStep } from "@core/lib/models/edit-step";
   selector: "app-project-navigation",
   templateUrl: "./project-navigation.component.html",
   styleUrl: "project-navigation.component.scss",
-  imports: [IconComponent, CommonModule],
+  imports: [TabsComponent, IconComponent, CommonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectNavigationComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
   readonly navItems = input.required<Navigation[]>();
   readonly stepChange = output<EditStep>();
+  protected readonly tabs = computed(() =>
+    this.navItems().map(item => ({ id: item.step, linkText: item.label, iconName: item.src })),
+  );
+  protected onTabSelected(step: string): void {
+    this.onStepClick(step as EditStep);
+  }
 
   private stepService = inject(ProjectStepService);
 
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-partner-resources-step/project-partner-resources-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-partner-resources-step/project-partner-resources-step.component.scss
index 824c4cb5a..24e70e6de 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-partner-resources-step/project-partner-resources-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-partner-resources-step/project-partner-resources-step.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -57,3 +56,25 @@
     display: block;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .project__inner {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .project__info--general {
+      @include responsive.single-column;
+    }
+
+    .project__no-items {
+      position: static;
+      display: flex;
+      justify-content: center;
+      margin-top: 24px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/_team-member-row.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/_team-member-row.scss
index 487b562cf..1517578f0 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/_team-member-row.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/_team-member-row.scss
@@ -170,3 +170,79 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .member-row {
+    grid-template-areas:
+      "avatar name role status actions"
+      "avatar description role status actions";
+    grid-template-columns: 40px minmax(0, 1.18fr) minmax(0, 1fr) 148px 68px;
+
+    &__name {
+      font-size: var(--ui-font-body);
+    }
+
+    &__description {
+      font-size: var(--ui-font-small);
+    }
+
+    &__role {
+      font-size: var(--ui-font-small);
+    }
+
+    &__status {
+      font-size: var(--ui-font-small);
+    }
+
+    &__actions {
+      gap: 4px;
+    }
+
+    &__action {
+      width: 32px;
+      min-height: 32px;
+      padding: 0;
+      font-size: var(--ui-font-small);
+    }
+
+    &__action-label {
+      display: none;
+    }
+
+    &__error {
+      grid-column: 2 / -1;
+      font-size: var(--ui-font-small);
+      color: var(--error, var(--ui-error-text));
+    }
+  }
+
+  @media (width < 750px) {
+    .member-row {
+      grid-template-areas:
+        "avatar name"
+        "avatar role"
+        "avatar description"
+        "actions actions";
+      grid-template-columns: 40px minmax(0, 1fr);
+
+      &__actions {
+        gap: 4px 16px;
+      }
+
+      &__action {
+        width: auto;
+        min-height: 44px;
+        padding: 0 4px;
+      }
+
+      &__action-label {
+        display: inline;
+      }
+
+      &__error {
+        grid-column: 1 / -1;
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/collaborator-card/collaborator-card.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/collaborator-card/collaborator-card.component.html
index cb0b210d8..963a1a70c 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/collaborator-card/collaborator-card.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/collaborator-card/collaborator-card.component.html
@@ -1,41 +1,86 @@
 <!-- @format -->
-<article class="member-row">
-  <app-avatar [url]="collaborator().avatar" [size]="40" />
-  <div class="member-row__identity">
-    <h4 class="member-row__name">{{ collaborator().firstName }} {{ collaborator().lastName }}</h4>
-    <span class="member-row__role">{{ collaborator().role || "Роль не указана" }}</span>
-    <p class="member-row__description">
-      {{ isLeader() ? "Руководитель проекта" : "Участник проекта" }}
-      @if (isCurrentUser()) {
-        <span class="member-row__you"> · Вы</span>
-      }
-    </p>
-  </div>
-  <span class="member-row__status">В команде</span>
-  <div class="member-row__actions">
-    <button
-      type="button"
-      class="member-row__action member-row__action--danger"
-      [attr.aria-label]="
-        'Исключить участника: ' + collaborator().firstName + ' ' + collaborator().lastName
-      "
-      title="Исключить участника"
-      [disabled]="removing()"
-      [attr.aria-busy]="removing()"
-      (click)="onDeleteCollaborator(collaborator().userId)"
-    >
-      <i
-        appIcon
-        icon="basket"
-        appWidth="13"
-        appHeight="15"
-        appViewBox="0 0 13 15"
-        aria-hidden="true"
-      ></i>
-      <span class="member-row__action-label">{{ removing() ? "Исключаем…" : "Исключить" }}</span>
-    </button>
-  </div>
-  @if (error()) {
-    <p class="member-row__error" role="alert">{{ error() }}</p>
-  }
-</article>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <article class="member-row">
+    <app-avatar [url]="collaborator().avatar" [size]="40" />
+    <div class="member-row__identity">
+      <h4 class="member-row__name">{{ collaborator().firstName }} {{ collaborator().lastName }}</h4>
+      <span class="member-row__role">{{ collaborator().role || "Роль не указана" }}</span>
+      <p class="member-row__description">
+        {{ isLeader() ? "Руководитель проекта" : "Участник проекта" }}
+        @if (isCurrentUser()) {
+          <span class="member-row__you"> · Вы</span>
+        }
+      </p>
+    </div>
+    <span class="member-row__status">В команде</span>
+    <div class="member-row__actions">
+      <button
+        type="button"
+        class="member-row__action member-row__action--danger"
+        [attr.aria-label]="
+          'Исключить участника: ' + collaborator().firstName + ' ' + collaborator().lastName
+        "
+        title="Исключить участника"
+        [disabled]="removing()"
+        [attr.aria-busy]="removing()"
+        (click)="onDeleteCollaborator(collaborator().userId)"
+      >
+        <i
+          appIcon
+          icon="basket"
+          appWidth="13"
+          appHeight="15"
+          appViewBox="0 0 13 15"
+          aria-hidden="true"
+        ></i>
+        <span class="member-row__action-label">{{ removing() ? "Исключаем…" : "Исключить" }}</span>
+      </button>
+    </div>
+    @if (error()) {
+      <p class="member-row__error" role="alert">{{ error() }}</p>
+    }
+  </article>
+} @else {
+  <article class="member-row">
+    <app-avatar [url]="collaborator().avatar" [size]="40" />
+    <div class="member-row__identity">
+      <h4 class="member-row__name">{{ collaborator().firstName }} {{ collaborator().lastName }}</h4>
+      <span class="member-row__role">{{ collaborator().role || "Роль не указана" }}</span>
+      <p class="member-row__description">
+        {{ isLeader() ? "Руководитель проекта" : "Участник проекта" }}
+        @if (isCurrentUser()) {
+          <span class="member-row__you"> · Вы</span>
+        }
+      </p>
+    </div>
+    <span class="member-row__status">В команде</span>
+    <div class="member-row__actions">
+      <button
+        appButton="danger"
+        type="button"
+        class="member-row__action member-row__action--danger"
+        [attr.aria-label]="
+          'Исключить участника: ' + collaborator().firstName + ' ' + collaborator().lastName
+        "
+        title="Исключить участника"
+        [disabled]="removing()"
+        [attr.aria-busy]="removing()"
+        (click)="onDeleteCollaborator(collaborator().userId)"
+      >
+        <i
+          appIcon
+          icon="basket"
+          appWidth="13"
+          appHeight="15"
+          appViewBox="0 0 13 15"
+          aria-hidden="true"
+        ></i>
+        <span class="member-row__action-label">{{ removing() ? "Исключаем…" : "Исключить" }}</span>
+      </button>
+    </div>
+    @if (error()) {
+      <app-state class="member-row__error" [compact]="true" kind="error" title="{{ error() }}" />
+    }
+  </article>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/collaborator-card/collaborator-card.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/collaborator-card/collaborator-card.component.ts
index 7b479be68..46b2cd230 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/collaborator-card/collaborator-card.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/collaborator-card/collaborator-card.component.ts
@@ -1,4 +1,8 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -11,7 +15,7 @@ import {
 import { ActivatedRoute } from "@angular/router";
 import { Collaborator } from "@domain/project/collaborator.model";
 import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
-import { IconComponent } from "@uilib";
+import { IconComponent, ButtonDirective, StateComponent } from "@uilib";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { finalize } from "rxjs";
 import { RemoveProjectCollaboratorUseCase } from "@api/project/use-cases/remove-project-collaborator.use-case";
@@ -20,10 +24,12 @@ import { RemoveProjectCollaboratorUseCase } from "@api/project/use-cases/remove-
   selector: "app-collaborator-card",
   templateUrl: "./collaborator-card.component.html",
   styleUrl: "./collaborator-card.component.scss",
-  imports: [AvatarComponent, IconComponent],
+  imports: [StateComponent, ButtonDirective, AvatarComponent, IconComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CollaboratorCardComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly removeProjectCollaboratorUseCase = inject(RemoveProjectCollaboratorUseCase);
   private readonly route = inject(ActivatedRoute);
   private readonly destroyRef = inject(DestroyRef);
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/invite-card/invite-card.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/invite-card/invite-card.component.html
index 893bba396..b848dd4ed 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/invite-card/invite-card.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/invite-card/invite-card.component.html
@@ -1,98 +1,217 @@
 <!-- @format -->
-<article class="member-row member-row--pending">
-  <app-avatar [url]="invite().user.personal.avatar" [size]="40" />
-  <div class="member-row__identity">
-    <h4 class="member-row__name">{{ invite().user.firstName }} {{ invite().user.lastName }}</h4>
-    <span class="member-row__role">{{ invite().role || "Роль не указана" }}</span>
-    <p class="member-row__description">
-      @if (sentDate(); as date) {
-        Отправлено {{ date }}
-      } @else {
-        Ожидает ответа участника
-      }
-    </p>
-  </div>
-  <span class="member-row__status">Приглашение отправлено</span>
-  <div class="member-row__actions">
-    <button
-      type="button"
-      class="member-row__action"
-      (click)="openEdit($event)"
-      [attr.aria-label]="
-        'Изменить роль в приглашении: ' + invite().user.firstName + ' ' + invite().user.lastName
-      "
-      title="Изменить роль"
-    >
-      <i
-        appIcon
-        icon="edit-pen"
-        appWidth="12"
-        appHeight="11"
-        appViewBox="0 0 12 11"
-        aria-hidden="true"
-      ></i>
-      <span class="member-row__action-label">Изменить роль</span>
-    </button>
-    <button
-      type="button"
-      class="member-row__action member-row__action--danger"
-      (click)="openRemove($event)"
-      [attr.aria-label]="
-        'Отозвать приглашение: ' + invite().user.firstName + ' ' + invite().user.lastName
-      "
-      title="Отозвать приглашение"
-    >
-      <i
-        appIcon
-        icon="basket"
-        appWidth="13"
-        appHeight="15"
-        appViewBox="0 0 13 15"
-        aria-hidden="true"
-      ></i>
-      <span class="member-row__action-label">Отозвать</span>
-    </button>
-  </div>
-</article>
-@if (isRemoveInviteModal()) {
-  <app-project-invite-dialog
-    title="Отозвать приглашение?"
-    [compact]="true"
-    description="Участник больше не сможет принять это приглашение."
-    [trigger]="trigger"
-    (closed)="isRemoveInviteModal.set(false)"
-  >
-    <div inviteFooter class="invite-actions">
-      <button type="button" class="invite-button" (click)="isRemoveInviteModal.set(false)">
-        Отмена
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <article class="member-row member-row--pending">
+    <app-avatar [url]="invite().user.personal.avatar" [size]="40" />
+    <div class="member-row__identity">
+      <h4 class="member-row__name">{{ invite().user.firstName }} {{ invite().user.lastName }}</h4>
+      <span class="member-row__role">{{ invite().role || "Роль не указана" }}</span>
+      <p class="member-row__description">
+        @if (sentDate(); as date) {
+          Отправлено {{ date }}
+        } @else {
+          Ожидает ответа участника
+        }
+      </p>
+    </div>
+    <span class="member-row__status">Приглашение отправлено</span>
+    <div class="member-row__actions">
+      <button
+        type="button"
+        class="member-row__action"
+        (click)="openEdit($event)"
+        [attr.aria-label]="
+          'Изменить роль в приглашении: ' + invite().user.firstName + ' ' + invite().user.lastName
+        "
+        title="Изменить роль"
+      >
+        <i
+          appIcon
+          icon="edit-pen"
+          appWidth="12"
+          appHeight="11"
+          appViewBox="0 0 12 11"
+          aria-hidden="true"
+        ></i>
+        <span class="member-row__action-label">Изменить роль</span>
       </button>
-      <button type="button" class="invite-button invite-button--primary" (click)="onRemove()">
-        Отозвать
+      <button
+        type="button"
+        class="member-row__action member-row__action--danger"
+        (click)="openRemove($event)"
+        [attr.aria-label]="
+          'Отозвать приглашение: ' + invite().user.firstName + ' ' + invite().user.lastName
+        "
+        title="Отозвать приглашение"
+      >
+        <i
+          appIcon
+          icon="basket"
+          appWidth="13"
+          appHeight="15"
+          appViewBox="0 0 13 15"
+          aria-hidden="true"
+        ></i>
+        <span class="member-row__action-label">Отозвать</span>
       </button>
     </div>
-  </app-project-invite-dialog>
-}
-@if (isEditInviteModal()) {
-  <app-project-invite-dialog
-    title="Роль в приглашении"
-    [compact]="true"
-    description="Укажите зону ответственности участника в проекте."
-    [trigger]="trigger"
-    (closed)="isEditInviteModal.set(false)"
-  >
-    <div inviteRole><app-project-invite-role-input [control]="role" /></div>
-    <div inviteFooter class="invite-actions">
-      <button type="button" class="invite-button" (click)="isEditInviteModal.set(false)">
-        Отмена
+  </article>
+  @if (isRemoveInviteModal()) {
+    <app-project-invite-dialog
+      title="Отозвать приглашение?"
+      [compact]="true"
+      description="Участник больше не сможет принять это приглашение."
+      [trigger]="trigger"
+      (closed)="isRemoveInviteModal.set(false)"
+    >
+      <div inviteFooter class="invite-actions">
+        <button type="button" class="invite-button" (click)="isRemoveInviteModal.set(false)">
+          Отмена
+        </button>
+        <button type="button" class="invite-button invite-button--primary" (click)="onRemove()">
+          Отозвать
+        </button>
+      </div>
+    </app-project-invite-dialog>
+  }
+  @if (isEditInviteModal()) {
+    <app-project-invite-dialog
+      title="Роль в приглашении"
+      [compact]="true"
+      description="Укажите зону ответственности участника в проекте."
+      [trigger]="trigger"
+      (closed)="isEditInviteModal.set(false)"
+    >
+      <div inviteRole><app-project-invite-role-input [control]="role" /></div>
+      <div inviteFooter class="invite-actions">
+        <button type="button" class="invite-button" (click)="isEditInviteModal.set(false)">
+          Отмена
+        </button>
+        <button
+          type="button"
+          class="invite-button invite-button--primary"
+          [disabled]="role.invalid"
+          (click)="onEdit()"
+        >
+          Сохранить
+        </button>
+      </div>
+    </app-project-invite-dialog>
+  }
+} @else {
+  <article class="member-row member-row--pending">
+    <app-avatar [url]="invite().user.personal.avatar" [size]="40" />
+    <div class="member-row__identity">
+      <h4 class="member-row__name">{{ invite().user.firstName }} {{ invite().user.lastName }}</h4>
+      <span class="member-row__role">{{ invite().role || "Роль не указана" }}</span>
+      <p class="member-row__description">
+        @if (sentDate(); as date) {
+          Отправлено {{ date }}
+        } @else {
+          Ожидает ответа участника
+        }
+      </p>
+    </div>
+    <span class="member-row__status">Приглашение отправлено</span>
+    <div class="member-row__actions">
+      <button
+        appButton="secondary"
+        type="button"
+        class="member-row__action"
+        (click)="openEdit($event)"
+        [attr.aria-label]="
+          'Изменить роль в приглашении: ' + invite().user.firstName + ' ' + invite().user.lastName
+        "
+        title="Изменить роль"
+      >
+        <i
+          appIcon
+          icon="edit-pen"
+          appWidth="12"
+          appHeight="11"
+          appViewBox="0 0 12 11"
+          aria-hidden="true"
+        ></i>
+        <span class="member-row__action-label">Изменить роль</span>
       </button>
       <button
+        appButton="danger"
         type="button"
-        class="invite-button invite-button--primary"
-        [disabled]="role.invalid"
-        (click)="onEdit()"
+        class="member-row__action member-row__action--danger"
+        (click)="openRemove($event)"
+        [attr.aria-label]="
+          'Отозвать приглашение: ' + invite().user.firstName + ' ' + invite().user.lastName
+        "
+        title="Отозвать приглашение"
       >
-        Сохранить
+        <i
+          appIcon
+          icon="basket"
+          appWidth="13"
+          appHeight="15"
+          appViewBox="0 0 13 15"
+          aria-hidden="true"
+        ></i>
+        <span class="member-row__action-label">Отозвать</span>
       </button>
     </div>
-  </app-project-invite-dialog>
+  </article>
+  @if (isRemoveInviteModal()) {
+    <app-project-invite-dialog
+      title="Отозвать приглашение?"
+      [compact]="true"
+      description="Участник больше не сможет принять это приглашение."
+      [trigger]="trigger"
+      (closed)="isRemoveInviteModal.set(false)"
+    >
+      <div inviteFooter class="invite-actions">
+        <button
+          appButton="secondary"
+          type="button"
+          class="invite-button"
+          (click)="isRemoveInviteModal.set(false)"
+        >
+          Отмена
+        </button>
+        <button
+          appButton="secondary"
+          type="button"
+          class="invite-button invite-button--primary"
+          (click)="onRemove()"
+        >
+          Отозвать
+        </button>
+      </div>
+    </app-project-invite-dialog>
+  }
+  @if (isEditInviteModal()) {
+    <app-project-invite-dialog
+      title="Роль в приглашении"
+      [compact]="true"
+      description="Укажите зону ответственности участника в проекте."
+      [trigger]="trigger"
+      (closed)="isEditInviteModal.set(false)"
+    >
+      <div inviteRole><app-project-invite-role-input [control]="role" /></div>
+      <div inviteFooter class="invite-actions">
+        <button
+          appButton="secondary"
+          type="button"
+          class="invite-button"
+          (click)="isEditInviteModal.set(false)"
+        >
+          Отмена
+        </button>
+        <button
+          appButton="secondary"
+          type="button"
+          class="invite-button invite-button--primary"
+          [disabled]="role.invalid"
+          (click)="onEdit()"
+        >
+          Сохранить
+        </button>
+      </div>
+    </app-project-invite-dialog>
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/invite-card/invite-card.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/invite-card/invite-card.component.ts
index 4494a0159..c64715476 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/invite-card/invite-card.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/invite-card/invite-card.component.ts
@@ -1,4 +1,10 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, computed, input, output, signal } from "@angular/core";
 import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import { Invite } from "@domain/invite/invite.model";
@@ -15,6 +21,7 @@ import { ProjectInviteRoleInputComponent } from "@ui/widgets/project-invite/proj
   templateUrl: "./invite-card.component.html",
   styleUrl: "./invite-card.component.scss",
   imports: [
+    ButtonDirective,
     IconComponent,
     AvatarComponent,
     ReactiveFormsModule,
@@ -24,6 +31,8 @@ import { ProjectInviteRoleInputComponent } from "@ui/widgets/project-invite/proj
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InviteCardComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly invite = input.required<Invite>();
   readonly remove = output<number>();
   readonly edit = output<{ inviteId: number; role: string; specialization: string }>();
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.html
index f64551e0d..7dd35e020 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.html
@@ -1,103 +1,213 @@
 <!-- @format -->
-<section class="team" aria-labelledby="team-title" [attr.aria-busy]="teamLoading()">
-  <header class="team__header">
-    <div class="team__intro">
-      <h2 id="team-title">Команда проекта</h2>
-      <p>Управляйте участниками проекта, приглашайте новых и назначайте роли.</p>
-    </div>
-    <app-button
-      class="invite__submit"
-      appearance="outline"
-      size="big"
-      [disabled]="teamLoading() || isLoading(inviteFormIsSubmitting())"
-      (click)="openInviteModal($event)"
-    >
-      <i
-        appIcon
-        icon="plus"
-        appWidth="12"
-        appHeight="12"
-        appViewBox="0 0 19 19"
-        aria-hidden="true"
-      ></i>
-      <span>Пригласить участника</span>
-    </app-button>
-  </header>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <section class="team" aria-labelledby="team-title" [attr.aria-busy]="teamLoading()">
+    <header class="team__header">
+      <div class="team__intro">
+        <h2 id="team-title">Команда проекта</h2>
+        <p>Управляйте участниками проекта, приглашайте новых и назначайте роли.</p>
+      </div>
+      <app-button
+        class="invite__submit"
+        appearance="outline"
+        size="big"
+        [disabled]="teamLoading() || isLoading(inviteFormIsSubmitting())"
+        (click)="openInviteModal($event)"
+      >
+        <i
+          appIcon
+          icon="plus"
+          appWidth="12"
+          appHeight="12"
+          appViewBox="0 0 19 19"
+          aria-hidden="true"
+        ></i>
+        <span>Пригласить участника</span>
+      </app-button>
+    </header>
 
-  @if (teamLoading()) {
-    <div class="team-loading">
-      <p role="status">Загрузка команды…</p>
-      <div aria-hidden="true">
-        @for (row of [1, 2, 3]; track row) {
-          <div class="team-skeleton">
-            <span class="team-skeleton__avatar"></span>
-            <div class="team-skeleton__copy"><span></span><span></span></div>
-          </div>
-        }
+    @if (teamLoading()) {
+      <div class="team-loading">
+        <p role="status">Загрузка команды…</p>
+        <div aria-hidden="true">
+          @for (row of [1, 2, 3]; track row) {
+            <div class="team-skeleton">
+              <span class="team-skeleton__avatar"></span>
+              <div class="team-skeleton__copy"><span></span><span></span></div>
+            </div>
+          }
+        </div>
       </div>
-    </div>
-  } @else {
-    <section class="team-section" aria-labelledby="team-members-title">
-      <h3 id="team-members-title">
-        Участники команды <span aria-hidden="true">·</span>
-        <span data-team-count="members">{{ collaborators().length }}</span>
-      </h3>
-      <ul class="team-list">
-        @for (collaborator of collaborators(); track collaborator.userId) {
-          <li>
-            <app-collaborator-card
-              [collaborator]="collaborator"
-              [isCurrentUser]="collaborator.userId === currentUser()?.id"
-              [isLeader]="collaborator.userId === invitationProject()?.leader"
-              (collaboratorRemoved)="onCollaboratorRemove($event)"
-            />
-          </li>
+    } @else {
+      <section class="team-section" aria-labelledby="team-members-title">
+        <h3 id="team-members-title">
+          Участники команды <span aria-hidden="true">·</span>
+          <span data-team-count="members">{{ collaborators().length }}</span>
+        </h3>
+        <ul class="team-list">
+          @for (collaborator of collaborators(); track collaborator.userId) {
+            <li>
+              <app-collaborator-card
+                [collaborator]="collaborator"
+                [isCurrentUser]="collaborator.userId === currentUser()?.id"
+                [isLeader]="collaborator.userId === invitationProject()?.leader"
+                (collaboratorRemoved)="onCollaboratorRemove($event)"
+              />
+            </li>
+          }
+        </ul>
+        @if (!collaborators().length || (onlyCurrentUser() && !pendingInvites().length)) {
+          <div class="team-empty">
+            <p class="team-empty__title">
+              {{
+                onlyCurrentUser()
+                  ? "В команде пока только вы"
+                  : "Здесь будут участники вашей команды"
+              }}
+            </p>
+            <p>Пригласите участника и укажите его роль в проекте.</p>
+          </div>
         }
-      </ul>
-      @if (!collaborators().length || (onlyCurrentUser() && !pendingInvites().length)) {
-        <div class="team-empty">
-          <p class="team-empty__title">
-            {{
-              onlyCurrentUser() ? "В команде пока только вы" : "Здесь будут участники вашей команды"
-            }}
+      </section>
+
+      @if (pendingInvites().length) {
+        <section class="team-section" aria-labelledby="team-pending-title">
+          <h3 id="team-pending-title">
+            Ожидают подтверждения <span aria-hidden="true">·</span>
+            <span data-team-count="pending">{{ pendingInvites().length }}</span>
+          </h3>
+          <p class="team-section__description">
+            Участники появятся в команде, когда примут приглашение.
           </p>
-          <p>Пригласите участника и укажите его роль в проекте.</p>
-        </div>
+          <ul class="team-list">
+            @for (invite of pendingInvites(); track invite.id) {
+              <li>
+                <app-invite-card
+                  [invite]="invite"
+                  (edit)="editInvitation($event)"
+                  (remove)="removeInvitation($event)"
+                />
+              </li>
+            }
+          </ul>
+        </section>
+      } @else {
+        <p class="team__no-invites">Нет ожидающих приглашений.</p>
       }
-    </section>
+    }
+  </section>
+
+  @if (isInviteModalOpen()) {
+    <app-project-member-invite-modal
+      [project]="invitationProject()"
+      [projectId]="projectId()"
+      [trigger]="inviteTrigger"
+      (closed)="closeInviteModal()"
+    />
+  }
+} @else {
+  <section class="team" aria-labelledby="team-title" [attr.aria-busy]="teamLoading()">
+    <header class="team__header">
+      <div class="team__intro">
+        <h2 id="team-title">Команда проекта</h2>
+        <p>Управляйте участниками проекта, приглашайте новых и назначайте роли.</p>
+      </div>
+      <app-button
+        class="invite__submit"
+        appearance="outline"
+        size="big"
+        [disabled]="teamLoading() || isLoading(inviteFormIsSubmitting())"
+        (click)="openInviteModal($event)"
+      >
+        <i
+          appIcon
+          icon="plus"
+          appWidth="12"
+          appHeight="12"
+          appViewBox="0 0 19 19"
+          aria-hidden="true"
+        ></i>
+        <span>Пригласить участника</span>
+      </app-button>
+    </header>
 
-    @if (pendingInvites().length) {
-      <section class="team-section" aria-labelledby="team-pending-title">
-        <h3 id="team-pending-title">
-          Ожидают подтверждения <span aria-hidden="true">·</span>
-          <span data-team-count="pending">{{ pendingInvites().length }}</span>
+    @if (teamLoading()) {
+      <div class="team-loading">
+        <app-state [compact]="true" kind="loading" title="Загрузка команды…" />
+        <div aria-hidden="true">
+          @for (row of [1, 2, 3]; track row) {
+            <div class="team-skeleton">
+              <span class="team-skeleton__avatar"></span>
+              <div class="team-skeleton__copy"><span></span><span></span></div>
+            </div>
+          }
+        </div>
+      </div>
+    } @else {
+      <section class="team-section" aria-labelledby="team-members-title">
+        <h3 id="team-members-title">
+          Участники команды <span aria-hidden="true">·</span>
+          <span data-team-count="members">{{ collaborators().length }}</span>
         </h3>
-        <p class="team-section__description">
-          Участники появятся в команде, когда примут приглашение.
-        </p>
         <ul class="team-list">
-          @for (invite of pendingInvites(); track invite.id) {
+          @for (collaborator of collaborators(); track collaborator.userId) {
             <li>
-              <app-invite-card
-                [invite]="invite"
-                (edit)="editInvitation($event)"
-                (remove)="removeInvitation($event)"
+              <app-collaborator-card
+                [collaborator]="collaborator"
+                [isCurrentUser]="collaborator.userId === currentUser()?.id"
+                [isLeader]="collaborator.userId === invitationProject()?.leader"
+                (collaboratorRemoved)="onCollaboratorRemove($event)"
               />
             </li>
           }
         </ul>
+        @if (!collaborators().length || (onlyCurrentUser() && !pendingInvites().length)) {
+          <div class="team-empty">
+            <p class="team-empty__title">
+              {{
+                onlyCurrentUser()
+                  ? "В команде пока только вы"
+                  : "Здесь будут участники вашей команды"
+              }}
+            </p>
+            <p>Пригласите участника и укажите его роль в проекте.</p>
+          </div>
+        }
       </section>
-    } @else {
-      <p class="team__no-invites">Нет ожидающих приглашений.</p>
+
+      @if (pendingInvites().length) {
+        <section class="team-section" aria-labelledby="team-pending-title">
+          <h3 id="team-pending-title">
+            Ожидают подтверждения <span aria-hidden="true">·</span>
+            <span data-team-count="pending">{{ pendingInvites().length }}</span>
+          </h3>
+          <p class="team-section__description">
+            Участники появятся в команде, когда примут приглашение.
+          </p>
+          <ul class="team-list">
+            @for (invite of pendingInvites(); track invite.id) {
+              <li>
+                <app-invite-card
+                  [invite]="invite"
+                  (edit)="editInvitation($event)"
+                  (remove)="removeInvitation($event)"
+                />
+              </li>
+            }
+          </ul>
+        </section>
+      } @else {
+        <p class="team__no-invites">Нет ожидающих приглашений.</p>
+      }
     }
-  }
-</section>
+  </section>
 
-@if (isInviteModalOpen()) {
-  <app-project-member-invite-modal
-    [project]="invitationProject()"
-    [projectId]="projectId()"
-    [trigger]="inviteTrigger"
-    (closed)="closeInviteModal()"
-  />
+  @if (isInviteModalOpen()) {
+    <app-project-member-invite-modal
+      [project]="invitationProject()"
+      [projectId]="projectId()"
+      [trigger]="inviteTrigger"
+      (closed)="closeInviteModal()"
+    />
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss
index 2c1a5fb0f..fd62c9384 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.scss
@@ -152,3 +152,30 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .team {
+    h2 {
+      font-size: var(--ui-font-h2);
+    }
+
+    h3 {
+      font-size: var(--ui-font-body);
+    }
+
+    p {
+      font-size: var(--ui-font-small);
+    }
+  }
+
+  .team-empty {
+    .team-empty__title {
+      font-size: var(--ui-font-body);
+    }
+  }
+
+  .team-loading > p {
+    font-size: var(--ui-font-body);
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.ts
index 015a8fac9..8ffce478d 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-team-step/project-team-step.component.ts
@@ -1,4 +1,10 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { StateComponent } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -23,6 +29,7 @@ import { ProjectMemberInviteModalComponent } from "@ui/widgets/project-invite/pr
   templateUrl: "./project-team-step.component.html",
   styleUrl: "./project-team-step.component.scss",
   imports: [
+    StateComponent,
     ButtonComponent,
     IconComponent,
     InviteCardComponent,
@@ -32,6 +39,8 @@ import { ProjectMemberInviteModalComponent } from "@ui/widgets/project-invite/pr
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectTeamStepComponent implements OnInit, OnDestroy {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly projectsEditInfoService = inject(ProjectsEditInfoService);
   private readonly projectTeamService = inject(ProjectTeamService);
   private readonly projectTeamUIService = inject(ProjectTeamUIService);
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.html
index 232eb6fd9..620d2ccc1 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.html
@@ -1,267 +1,543 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="project__inner" [class.project__inner--list]="!showInputFields()">
+    <div class="vacancy project__left">
+      @if (showInputFields()) {
+        <form [formGroup]="vacancyForm">
+          @if (role; as role) {
+            <fieldset class="vacancy__role">
+              <label class="field-label">название вакансии</label>
+              <app-input
+                size="big"
+                id="vacancy_role"
+                formControlName="role"
+                [error]="(role | controlError) && vacancySubmitInitiated()"
+                placeholder="напишите роль, которую вы хотите закрыть в вашем проекте"
+              ></app-input>
+              @if ((role | controlError: "required") && vacancySubmitInitiated()) {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+          @if (description) {
+            <fieldset class="vacancy__description">
+              <label class="field-label">описание вакансии</label>
+              <app-textarea
+                size="big"
+                id="vacancy_description"
+                [haveHint]="true"
+                [tooltipText]="'Расскажите, кого вы ищете для своего проекта? Опишите подробно, чтобы привлечь именно тех людей, которые вам нужны'"
+                [tooltipPosition]="'right'"
+                [tooltipWidth]="350"
+                formControlName="description"
+                [error]="(description | controlError) && vacancySubmitInitiated()"
+                placeholder="опишите вакансию"
+                [maxLength]="3500"
+              ></app-textarea>
+              @if ((description | controlError: "required") && vacancySubmitInitiated()) {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
 
-<div class="project__inner" [class.project__inner--list]="!showInputFields()">
-  <div class="vacancy project__left">
-    @if (showInputFields()) {
-      <form [formGroup]="vacancyForm">
-        @if (role; as role) {
-          <fieldset class="vacancy__role">
-            <label class="field-label">название вакансии</label>
-            <app-input
-              size="big"
-              id="vacancy_role"
-              formControlName="role"
-              [error]="(role | controlError) && vacancySubmitInitiated()"
-              placeholder="напишите роль, которую вы хотите закрыть в вашем проекте"
-            ></app-input>
-            @if ((role | controlError: "required") && vacancySubmitInitiated()) {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
-          </fieldset>
-        }
-        @if (description) {
-          <fieldset class="vacancy__description">
-            <label class="field-label">описание вакансии</label>
-            <app-textarea
-              size="big"
-              id="vacancy_description"
-              [haveHint]="true"
-              [tooltipText]="'Расскажите, кого вы ищете для своего проекта? Опишите подробно, чтобы привлечь именно тех людей, которые вам нужны'"
-              [tooltipPosition]="'right'"
-              [tooltipWidth]="350"
-              formControlName="description"
-              [error]="(description | controlError) && vacancySubmitInitiated()"
-              placeholder="опишите вакансию"
-              [maxLength]="3500"
-            ></app-textarea>
-            @if ((description | controlError: "required") && vacancySubmitInitiated()) {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
+          <div class="vacancy__work">
+            <div class="vacancy__info">
+              @if (requiredExperience; as requiredExperience) {
+                <fieldset>
+                  <label class="field-label">опыт</label>
+                  <app-select
+                    size="big"
+                    id="requiredExperience"
+                    formControlName="requiredExperience"
+                    placeholder="опыт"
+                    [error]="(requiredExperience | controlError) && vacancySubmitInitiated()"
+                    [selectedId]="selectedRequiredExperienceId()"
+                    [options]="experienceList"
+                  ></app-select>
+                  @if (requiredExperience | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+              @if (workFormat; as workFormat) {
+                <fieldset>
+                  <label class="field-label">формат</label>
+                  <app-select
+                    size="big"
+                    id="workFormat"
+                    formControlName="workFormat"
+                    [error]="(workFormat | controlError) && vacancySubmitInitiated()"
+                    placeholder="формат"
+                    [selectedId]="selectedWorkFormatId()"
+                    [options]="formatList"
+                  ></app-select>
+                  @if (workFormat | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+            </div>
+
+            @if (isCityVisible()) {
+              @if (city; as city) {
+                <fieldset class="vacancy__city">
+                  <label class="field-label" for="city">город</label>
+                  <app-input
+                    size="big"
+                    id="city"
+                    formControlName="city"
+                    [error]="(city | controlError) && vacancySubmitInitiated()"
+                    placeholder="укажите город"
+                  ></app-input>
+                  @if ((city | controlError: "required") && vacancySubmitInitiated()) {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
             }
+
+            <div class="vacancy__additional">
+              @if (salary; as salary) {
+                <fieldset>
+                  <label class="field-label">заработная плата</label>
+                  <app-input
+                    size="big"
+                    id="salary"
+                    formControlName="salary"
+                    [error]="(salary | controlError) && vacancySubmitInitiated()"
+                    placeholder="заработная плата"
+                  ></app-input>
+                  @if ((salary | controlError: "required") && vacancySubmitInitiated()) {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+              @if (workSchedule; as workSchedule) {
+                <fieldset>
+                  <label class="field-label">график</label>
+                  <app-select
+                    size="big"
+                    id="workSchedule"
+                    formControlName="workSchedule"
+                    [error]="(workSchedule | controlError) && vacancySubmitInitiated()"
+                    placeholder="график"
+                    [selectedId]="selectedWorkScheduleId()"
+                    [options]="scheludeList"
+                  ></app-select>
+                  @if (workSchedule | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+            </div>
+          </div>
+
+          <fieldset class="vacancy__search">
+            <label class="field-label">навыки необходимые для кандидата</label>
+            <div class="vacancies">
+              <app-autocomplete-input
+                class="vacancies__input"
+                placeholder="введите навык"
+                searchIcon="box"
+                (openSkillsFunc)="onToggleSkillsGroupsModal()"
+                [suggestions]="inlineSkills()"
+                fieldToDisplay="name"
+                [forceSelect]="true"
+                [clearInputOnSelect]="true"
+                (searchStart)="onSearchSkill($event)"
+                (queryChanged)="cancelSkillSearch()"
+                (optionSelected)="onAddSkill($event)"
+              >
+              </app-autocomplete-input>
+            </div>
           </fieldset>
+
+          @if (skills; as skills) {
+            <fieldset class="skills-basket">
+              <app-skills-basket
+                formControlName="skills"
+                [error]="skills | controlError"
+              ></app-skills-basket>
+              @if (skills | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+        </form>
+      }
+      <app-button
+        size="big"
+        appearance="outline"
+        customTypographyClass="text-body-12"
+        class="vacancy__submit"
+        #vacancySubmitButton
+        [loader]="vacancyIsSubmitting()"
+        [disabled]="vacancyIsSubmitting()"
+        (click)="showInputFields() ? submitVacancy() : createVacancyBlock()"
+      >
+        <span>{{
+          isEditing()
+            ? "Сохранить изменения"
+            : showInputFields()
+              ? "Добавить вакансию"
+              : "Создать вакансию"
+        }}</span>
+        <i appIcon icon="plus" appSquare="10"></i>
+      </app-button>
+      @if (vacancySubmitFailed()) {
+        <p class="vacancy__error" role="alert">
+          Не удалось сохранить вакансию. Попробуйте ещё раз.
+        </p>
+      }
+    </div>
+
+    <div class="project__right">
+      <ul class="vacancy__list">
+        @for (vacancy of vacancies(); track vacancy.id) {
+          <li class="vacancy__item">
+            <app-vacancy-card
+              [vacancy]="vacancy"
+              [disabled]="vacancyIsSubmitting()"
+              (edit)="editVacancy(vacancies().indexOf(vacancy))"
+              (remove)="removeVacancy($event)"
+            ></app-vacancy-card>
+          </li>
         }
+      </ul>
+    </div>
 
-        <div class="vacancy__work">
-          <div class="vacancy__info">
-            @if (requiredExperience; as requiredExperience) {
-              <fieldset>
-                <label class="field-label">опыт</label>
-                <app-select
-                  size="big"
-                  id="requiredExperience"
-                  formControlName="requiredExperience"
-                  placeholder="опыт"
-                  [error]="(requiredExperience | controlError) && vacancySubmitInitiated()"
-                  [selectedId]="selectedRequiredExperienceId()"
-                  [options]="experienceList"
-                ></app-select>
-                @if (requiredExperience | controlError: "required") {
-                  <div class="text-body-10 error">
-                    {{ errorMessage.VALIDATION_REQUIRED }}
-                  </div>
-                }
-              </fieldset>
-            }
-            @if (workFormat; as workFormat) {
-              <fieldset>
-                <label class="field-label">формат</label>
-                <app-select
-                  size="big"
-                  id="workFormat"
-                  formControlName="workFormat"
-                  [error]="(workFormat | controlError) && vacancySubmitInitiated()"
-                  placeholder="формат"
-                  [selectedId]="selectedWorkFormatId()"
-                  [options]="formatList"
-                ></app-select>
-                @if (workFormat | controlError: "required") {
-                  <div class="text-body-10 error">
-                    {{ errorMessage.VALIDATION_REQUIRED }}
-                  </div>
-                }
-              </fieldset>
-            }
-          </div>
+    @if (!vacancies().length) {
+      <i appIcon icon="sad-smile" appSquare="20" class="project__no-items"></i>
+    }
+  </div>
+
+  @if (createdVacancyId(); as vacancyId) {
+    <app-vacancy-created-dialog
+      [vacancyId]="vacancyId"
+      (closed)="closeCreatedDialog()"
+    ></app-vacancy-created-dialog>
+  }
 
-          @if (isCityVisible()) {
-            @if (city; as city) {
-              <fieldset class="vacancy__city">
-                <label class="field-label" for="city">город</label>
-                <app-input
-                  size="big"
-                  id="city"
-                  formControlName="city"
-                  [error]="(city | controlError) && vacancySubmitInitiated()"
-                  placeholder="укажите город"
-                ></app-input>
-                @if ((city | controlError: "required") && vacancySubmitInitiated()) {
-                  <div class="text-body-10 error">
-                    {{ errorMessage.VALIDATION_REQUIRED }}
-                  </div>
-                }
-              </fieldset>
+  <app-modal [open]="skillsGroupsModalOpen()" (openChange)="closeSkillsGroupsModal()" class="modal">
+    <div class="modal__wrapper">
+      <button
+        type="button"
+        class="modal__close"
+        aria-label="Закрыть библиотеку навыков"
+        (click)="closeSkillsGroupsModal()"
+      >
+        <i appIcon icon="cross" appSquare="12"></i>
+      </button>
+      <p class="text-body-14">библиотека навыков</p>
+      <div class="modal__content">
+        <div class="modal__skills-groups">
+          <ul>
+            @for (skillsGroup of nestedSkills$ | async; track skillsGroup.id) {
+              <li>
+                <app-skills-group
+                  [title]="skillsGroup.name"
+                  [options]="skillsGroup.skills"
+                  [selected]="this.vacancyForm.getRawValue().skills!"
+                  [hasOpenGroups]="hasOpenSkillsGroups()"
+                  [isOpen]="openGroupIds().has(skillsGroup.id)"
+                  (optionToggled)="onToggleSkill($event)"
+                  (groupToggled)="onGroupToggled($event, skillsGroup.id)"
+                ></app-skills-group>
+              </li>
             }
+          </ul>
+        </div>
+      </div>
+      <app-button size="big" (click)="onToggleSkillsGroupsModal()">Сохранить</app-button>
+    </div>
+  </app-modal>
+} @else {
+  <div class="project__inner" [class.project__inner--list]="!showInputFields()">
+    <div class="vacancy project__left">
+      @if (showInputFields()) {
+        <form appFormLayout [formGroup]="vacancyForm">
+          @if (role; as role) {
+            <fieldset class="vacancy__role">
+              <label class="field-label">название вакансии</label>
+              <app-input
+                size="big"
+                id="vacancy_role"
+                formControlName="role"
+                [error]="(role | controlError) && vacancySubmitInitiated()"
+                placeholder="напишите роль, которую вы хотите закрыть в вашем проекте"
+              ></app-input>
+              @if ((role | controlError: "required") && vacancySubmitInitiated()) {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+          @if (description) {
+            <fieldset class="vacancy__description">
+              <label class="field-label">описание вакансии</label>
+              <app-textarea
+                size="big"
+                id="vacancy_description"
+                [haveHint]="true"
+                [tooltipText]="'Расскажите, кого вы ищете для своего проекта? Опишите подробно, чтобы привлечь именно тех людей, которые вам нужны'"
+                [tooltipPosition]="'right'"
+                [tooltipWidth]="350"
+                formControlName="description"
+                [error]="(description | controlError) && vacancySubmitInitiated()"
+                placeholder="опишите вакансию"
+                [maxLength]="3500"
+              ></app-textarea>
+              @if ((description | controlError: "required") && vacancySubmitInitiated()) {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
           }
 
-          <div class="vacancy__additional">
-            @if (salary; as salary) {
-              <fieldset>
-                <label class="field-label">заработная плата</label>
-                <app-input
-                  size="big"
-                  id="salary"
-                  formControlName="salary"
-                  [error]="(salary | controlError) && vacancySubmitInitiated()"
-                  placeholder="заработная плата"
-                ></app-input>
-                @if ((salary | controlError: "required") && vacancySubmitInitiated()) {
-                  <div class="text-body-10 error">
-                    {{ errorMessage.VALIDATION_REQUIRED }}
-                  </div>
-                }
-              </fieldset>
-            }
-            @if (workSchedule; as workSchedule) {
-              <fieldset>
-                <label class="field-label">график</label>
-                <app-select
-                  size="big"
-                  id="workSchedule"
-                  formControlName="workSchedule"
-                  [error]="(workSchedule | controlError) && vacancySubmitInitiated()"
-                  placeholder="график"
-                  [selectedId]="selectedWorkScheduleId()"
-                  [options]="scheludeList"
-                ></app-select>
-                @if (workSchedule | controlError: "required") {
-                  <div class="text-body-10 error">
-                    {{ errorMessage.VALIDATION_REQUIRED }}
-                  </div>
-                }
-              </fieldset>
+          <div class="vacancy__work">
+            <div class="vacancy__info">
+              @if (requiredExperience; as requiredExperience) {
+                <fieldset>
+                  <label class="field-label">опыт</label>
+                  <app-select
+                    size="big"
+                    id="requiredExperience"
+                    formControlName="requiredExperience"
+                    placeholder="опыт"
+                    [error]="(requiredExperience | controlError) && vacancySubmitInitiated()"
+                    [selectedId]="selectedRequiredExperienceId()"
+                    [options]="experienceList"
+                  ></app-select>
+                  @if (requiredExperience | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+              @if (workFormat; as workFormat) {
+                <fieldset>
+                  <label class="field-label">формат</label>
+                  <app-select
+                    size="big"
+                    id="workFormat"
+                    formControlName="workFormat"
+                    [error]="(workFormat | controlError) && vacancySubmitInitiated()"
+                    placeholder="формат"
+                    [selectedId]="selectedWorkFormatId()"
+                    [options]="formatList"
+                  ></app-select>
+                  @if (workFormat | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+            </div>
+
+            @if (isCityVisible()) {
+              @if (city; as city) {
+                <fieldset class="vacancy__city">
+                  <label class="field-label" for="city">город</label>
+                  <app-input
+                    size="big"
+                    id="city"
+                    formControlName="city"
+                    [error]="(city | controlError) && vacancySubmitInitiated()"
+                    placeholder="укажите город"
+                  ></app-input>
+                  @if ((city | controlError: "required") && vacancySubmitInitiated()) {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
             }
-          </div>
-        </div>
 
-        <fieldset class="vacancy__search">
-          <label class="field-label">навыки необходимые для кандидата</label>
-          <div class="vacancies">
-            <app-autocomplete-input
-              class="vacancies__input"
-              placeholder="введите навык"
-              searchIcon="box"
-              (openSkillsFunc)="onToggleSkillsGroupsModal()"
-              [suggestions]="inlineSkills()"
-              fieldToDisplay="name"
-              [forceSelect]="true"
-              [clearInputOnSelect]="true"
-              (searchStart)="onSearchSkill($event)"
-              (queryChanged)="cancelSkillSearch()"
-              (optionSelected)="onAddSkill($event)"
-            >
-            </app-autocomplete-input>
+            <div class="vacancy__additional">
+              @if (salary; as salary) {
+                <fieldset>
+                  <label class="field-label">заработная плата</label>
+                  <app-input
+                    size="big"
+                    id="salary"
+                    formControlName="salary"
+                    [error]="(salary | controlError) && vacancySubmitInitiated()"
+                    placeholder="заработная плата"
+                  ></app-input>
+                  @if ((salary | controlError: "required") && vacancySubmitInitiated()) {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+              @if (workSchedule; as workSchedule) {
+                <fieldset>
+                  <label class="field-label">график</label>
+                  <app-select
+                    size="big"
+                    id="workSchedule"
+                    formControlName="workSchedule"
+                    [error]="(workSchedule | controlError) && vacancySubmitInitiated()"
+                    placeholder="график"
+                    [selectedId]="selectedWorkScheduleId()"
+                    [options]="scheludeList"
+                  ></app-select>
+                  @if (workSchedule | controlError: "required") {
+                    <div class="text-body-10 error">
+                      {{ errorMessage.VALIDATION_REQUIRED }}
+                    </div>
+                  }
+                </fieldset>
+              }
+            </div>
           </div>
-        </fieldset>
 
-        @if (skills; as skills) {
-          <fieldset class="skills-basket">
-            <app-skills-basket
-              formControlName="skills"
-              [error]="skills | controlError"
-            ></app-skills-basket>
-            @if (skills | controlError: "required") {
-              <div class="text-body-10 error">
-                {{ errorMessage.VALIDATION_REQUIRED }}
-              </div>
-            }
+          <fieldset class="vacancy__search">
+            <label class="field-label">навыки необходимые для кандидата</label>
+            <div class="vacancies">
+              <app-autocomplete-input
+                class="vacancies__input"
+                placeholder="введите навык"
+                searchIcon="box"
+                (openSkillsFunc)="onToggleSkillsGroupsModal()"
+                [suggestions]="inlineSkills()"
+                fieldToDisplay="name"
+                [forceSelect]="true"
+                [clearInputOnSelect]="true"
+                (searchStart)="onSearchSkill($event)"
+                (queryChanged)="cancelSkillSearch()"
+                (optionSelected)="onAddSkill($event)"
+              >
+              </app-autocomplete-input>
+            </div>
           </fieldset>
-        }
-      </form>
-    }
-    <app-button
-      size="big"
-      appearance="outline"
-      customTypographyClass="text-body-12"
-      class="vacancy__submit"
-      #vacancySubmitButton
-      [loader]="vacancyIsSubmitting()"
-      [disabled]="vacancyIsSubmitting()"
-      (click)="showInputFields() ? submitVacancy() : createVacancyBlock()"
-    >
-      <span>{{
-        isEditing()
-          ? "Сохранить изменения"
-          : showInputFields()
-            ? "Добавить вакансию"
-            : "Создать вакансию"
-      }}</span>
-      <i appIcon icon="plus" appSquare="10"></i>
-    </app-button>
-    @if (vacancySubmitFailed()) {
-      <p class="vacancy__error" role="alert">Не удалось сохранить вакансию. Попробуйте ещё раз.</p>
-    }
-  </div>
 
-  <div class="project__right">
-    <ul class="vacancy__list">
-      @for (vacancy of vacancies(); track vacancy.id) {
-        <li class="vacancy__item">
-          <app-vacancy-card
-            [vacancy]="vacancy"
-            [disabled]="vacancyIsSubmitting()"
-            (edit)="editVacancy(vacancies().indexOf(vacancy))"
-            (remove)="removeVacancy($event)"
-          ></app-vacancy-card>
-        </li>
+          @if (skills; as skills) {
+            <fieldset class="skills-basket">
+              <app-skills-basket
+                formControlName="skills"
+                [error]="skills | controlError"
+              ></app-skills-basket>
+              @if (skills | controlError: "required") {
+                <div class="text-body-10 error">
+                  {{ errorMessage.VALIDATION_REQUIRED }}
+                </div>
+              }
+            </fieldset>
+          }
+        </form>
+      }
+      <app-button
+        size="big"
+        appearance="outline"
+        customTypographyClass="text-body-12"
+        class="vacancy__submit"
+        #vacancySubmitButton
+        [loader]="vacancyIsSubmitting()"
+        [disabled]="vacancyIsSubmitting()"
+        (click)="showInputFields() ? submitVacancy() : createVacancyBlock()"
+      >
+        <span>{{
+          isEditing()
+            ? "Сохранить изменения"
+            : showInputFields()
+              ? "Добавить вакансию"
+              : "Создать вакансию"
+        }}</span>
+        <i appIcon icon="plus" appSquare="10"></i>
+      </app-button>
+      @if (vacancySubmitFailed()) {
+        <app-state
+          class="vacancy__error"
+          [compact]="true"
+          kind="error"
+          title="Не удалось сохранить вакансию. Попробуйте ещё раз."
+        />
       }
-    </ul>
+    </div>
+
+    <div class="project__right">
+      <ul class="vacancy__list">
+        @for (vacancy of vacancies(); track vacancy.id) {
+          <li class="vacancy__item">
+            <app-vacancy-card
+              [vacancy]="vacancy"
+              [disabled]="vacancyIsSubmitting()"
+              (edit)="editVacancy(vacancies().indexOf(vacancy))"
+              (remove)="removeVacancy($event)"
+            ></app-vacancy-card>
+          </li>
+        }
+      </ul>
+    </div>
+
+    @if (!vacancies().length) {
+      <i appIcon icon="sad-smile" appSquare="20" class="project__no-items"></i>
+    }
   </div>
 
-  @if (!vacancies().length) {
-    <i appIcon icon="sad-smile" appSquare="20" class="project__no-items"></i>
+  @if (createdVacancyId(); as vacancyId) {
+    <app-vacancy-created-dialog
+      [vacancyId]="vacancyId"
+      (closed)="closeCreatedDialog()"
+    ></app-vacancy-created-dialog>
   }
-</div>
-
-@if (createdVacancyId(); as vacancyId) {
-  <app-vacancy-created-dialog
-    [vacancyId]="vacancyId"
-    (closed)="closeCreatedDialog()"
-  ></app-vacancy-created-dialog>
-}
 
-<app-modal [open]="skillsGroupsModalOpen()" (openChange)="closeSkillsGroupsModal()" class="modal">
-  <div class="modal__wrapper">
-    <button
-      type="button"
-      class="modal__close"
-      aria-label="Закрыть библиотеку навыков"
-      (click)="closeSkillsGroupsModal()"
-    >
-      <i appIcon icon="cross" appSquare="12"></i>
-    </button>
-    <p class="text-body-14">библиотека навыков</p>
-    <div class="modal__content">
-      <div class="modal__skills-groups">
-        <ul>
-          @for (skillsGroup of nestedSkills$ | async; track skillsGroup.id) {
-            <li>
-              <app-skills-group
-                [title]="skillsGroup.name"
-                [options]="skillsGroup.skills"
-                [selected]="this.vacancyForm.getRawValue().skills!"
-                [hasOpenGroups]="hasOpenSkillsGroups()"
-                [isOpen]="openGroupIds().has(skillsGroup.id)"
-                (optionToggled)="onToggleSkill($event)"
-                (groupToggled)="onGroupToggled($event, skillsGroup.id)"
-              ></app-skills-group>
-            </li>
-          }
-        </ul>
+  <app-modal [open]="skillsGroupsModalOpen()" (openChange)="closeSkillsGroupsModal()" class="modal">
+    <div class="modal__wrapper">
+      <button
+        appButton="icon"
+        type="button"
+        class="modal__close"
+        aria-label="Закрыть библиотеку навыков"
+        (click)="closeSkillsGroupsModal()"
+      >
+        <i appIcon icon="cross" appSquare="12"></i>
+      </button>
+      <p class="text-body-14">библиотека навыков</p>
+      <div class="modal__content">
+        <div class="modal__skills-groups">
+          <ul>
+            @for (skillsGroup of nestedSkills$ | async; track skillsGroup.id) {
+              <li>
+                <app-skills-group
+                  [title]="skillsGroup.name"
+                  [options]="skillsGroup.skills"
+                  [selected]="this.vacancyForm.getRawValue().skills!"
+                  [hasOpenGroups]="hasOpenSkillsGroups()"
+                  [isOpen]="openGroupIds().has(skillsGroup.id)"
+                  (optionToggled)="onToggleSkill($event)"
+                  (groupToggled)="onGroupToggled($event, skillsGroup.id)"
+                ></app-skills-group>
+              </li>
+            }
+          </ul>
+        </div>
       </div>
+      <app-button size="big" (click)="onToggleSkillsGroupsModal()">Сохранить</app-button>
     </div>
-    <app-button size="big" (click)="onToggleSkillsGroupsModal()">Сохранить</app-button>
-  </div>
-</app-modal>
+  </app-modal>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
index bbdd2fab5..376060232 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 @use "styles/components/vacancy-ui";
@@ -216,3 +215,26 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .project {
+    &__inner--list {
+      .vacancy__list {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      @media (max-width: 800px) {
+        .vacancy__list {
+          grid-template-columns: minmax(0, 1fr);
+        }
+      }
+    }
+  }
+
+  .vacancy {
+    &__error {
+      font-size: var(--ui-font-body);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.ts
index 5a2914eb6..b9fee7884 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { CommonModule } from "@angular/common";
 import {
   afterNextRender,
@@ -23,7 +26,7 @@ import { ErrorMessage } from "@core/lib/models/error/error-message";
 import { AutoCompleteInputComponent } from "@ui/primitives/autocomplete-input/autocomplete-input.component";
 import { SkillsBasketComponent } from "@ui/widgets/skills-basket/skills-basket.component";
 import { VacancyCardComponent } from "@ui/widgets/vacancy-card/vacancy-card.component";
-import { IconComponent } from "@uilib";
+import { IconComponent, ButtonDirective, FormLayoutDirective, StateComponent } from "@uilib";
 import { Skill } from "@domain/skills/skill.model";
 import { ProjectsEditInfoService } from "@api/project/facades/edit/projects-edit-info.service";
 import { ModalComponent } from "@ui/primitives/modal/modal.component";
@@ -41,6 +44,9 @@ import { isFailure } from "@domain/shared/async-state";
   templateUrl: "./project-vacancy-step.component.html",
   styleUrl: "./project-vacancy-step.component.scss",
   imports: [
+    StateComponent,
+    ButtonDirective,
+    FormLayoutDirective,
     VacancyCreatedDialogComponent,
     CommonModule,
     ReactiveFormsModule,
@@ -61,6 +67,8 @@ import { isFailure } from "@domain/shared/async-state";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectVacancyStepComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly injector = inject(Injector);
   private readonly skillSearch = viewChild(AutoCompleteInputComponent);
   private readonly vacancySubmitButton = viewChild<unknown, ElementRef<HTMLElement>>(
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html
index 800ecc2d9..d41e33820 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html
@@ -1,250 +1,515 @@
 <!-- @format -->
-<div>
-  <div class="project__top">
-    <div class="project__back" [routerLink]="AppRoutes.projects.detail(profileId())">
-      <i appIcon icon="left-arrow" appSquare="24"></i>
-      <h1 class="project__title">редактировать проект</h1>
-    </div>
-    <div class="project__save">
-      <app-button
-        size="medium"
-        customTypographyClass="text-body-12"
-        color="red"
-        (click)="deleteProject()"
-      >
-        удалить проект
-      </app-button>
-      <app-button
-        size="medium"
-        customTypographyClass="text-body-12"
-        appearance="outline"
-        [loader]="projFormIsSubmittingAsDraft()"
-        [disabled]="coverReset.pending()"
-        (click)="saveProjectAsDraft()"
-      >
-        сохранить черновик
-      </app-button>
-      <app-button
-        size="medium"
-        customTypographyClass="text-body-12"
-        [loader]="projFormIsSubmittingAsPublished()"
-        (click)="saveProjectAsPublished()"
-        [disabled]="onEditClicked() || coverReset.pending()"
-        [style.opacity]="onEditClicked() ? '0.5' : '1'"
-      >
-        {{ isCompetitive() && !submitted() ? "отправить заявку" : "сохранить" }}
-      </app-button>
-    </div>
-  </div>
-
-  <main class="project">
-    <form [formGroup]="projectForm" class="project__form">
-      <app-project-navigation
-        [navItems]="navProjectItems"
-        style="width: 100%"
-        (stepChange)="navigateStep($event)"
-      ></app-project-navigation>
-
-      <div class="project__inner">
-        @if (editingStep() === "main") {
-          @defer {
-            <app-project-main-step
-              style="width: 100%"
-              [projSubmitInitiated]="projSubmitInitiated()"
-            ></app-project-main-step>
-          }
-        } @else if (editingStep() === "contacts") {
-          @defer {
-            <app-project-partner-resources-step
-              style="width: 100%"
-            ></app-project-partner-resources-step>
-          }
-        } @else if (editingStep() === "achievements") {
-          @defer {
-            <app-project-achievement-step
-              style="width: 100%"
-              [projSubmitInitiated]="projSubmitInitiated()"
-            ></app-project-achievement-step>
-          }
-        } @else if (editingStep() === "vacancies") {
-          @defer {
-            <app-project-vacancy-step style="width: 100%"></app-project-vacancy-step>
-          }
-        } @else if (editingStep() === "team") {
-          @defer {
-            <app-project-team-step style="width: 100%"></app-project-team-step>
-          }
-        } @else if (editingStep() === "additional") {
-          @defer {
-            <app-project-additional-step
-              #additionalStepComponent
-              style="width: 100%"
-            ></app-project-additional-step>
-          }
-        }
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div>
+    <div class="project__top">
+      <div class="project__back" [routerLink]="AppRoutes.projects.detail(profileId())">
+        <i appIcon icon="left-arrow" appSquare="24"></i>
+        <h1 class="project__title">редактировать проект</h1>
       </div>
-    </form>
-    <app-modal
-      [open]="
-        (projectForm.invalid || additionalForm.invalid) &&
-        projSubmitInitiated() &&
-        !warningModalSeen()
-      "
-    >
-      <div class="project__warning-modal">
-        <h3 class="text-bold-body-16">📢 внимание!</h3>
-        <p class="text-body-14">
-          для публикации проекта, нужно заполнить все <strong>обязательные поля</strong> (они будут
-          <strong>подсвечены&nbsp;<span>красным</span></strong
-          >). Если вы пока не знаете что написать, можно сохранить черновик проекта и заполнить поля
-          позже :&#41;
-
-          {{
-            fromProgram() || isProjectAssignToProgram()
-              ? 'также проверь вкладку "данные для конкурсов"'
-              : ""
-          }}
-        </p>
+      <div class="project__save">
+        <app-button
+          size="medium"
+          customTypographyClass="text-body-12"
+          color="red"
+          (click)="deleteProject()"
+        >
+          удалить проект
+        </app-button>
         <app-button
           size="medium"
           customTypographyClass="text-body-12"
           appearance="outline"
-          (click)="closeWarningModal()"
-          >понятно</app-button
+          [loader]="projFormIsSubmittingAsDraft()"
+          [disabled]="coverReset.pending()"
+          (click)="saveProjectAsDraft()"
         >
+          сохранить черновик
+        </app-button>
+        <app-button
+          size="medium"
+          customTypographyClass="text-body-12"
+          [loader]="projFormIsSubmittingAsPublished()"
+          (click)="saveProjectAsPublished()"
+          [disabled]="onEditClicked() || coverReset.pending()"
+          [style.opacity]="onEditClicked() ? '0.5' : '1'"
+        >
+          {{ isCompetitive() && !submitted() ? "отправить заявку" : "сохранить" }}
+        </app-button>
       </div>
-    </app-modal>
-  </main>
-</div>
-
-@defer (when isCompleted()) {
-  <app-modal [open]="isCompleted()" (openChange)="isCompleted.set(!isCompleted())">
-    <div class="cancel">
-      <div class="cancel__top">
-        <i (click)="isCompleted.set(false)" appIcon icon="cross" class="cancel__cross"></i>
-        <p class="cancel__title text-bold-body-16">Проект завершен!</p>
-      </div>
-
-      <img
-        alt="end"
-        src="assets/images/projects/detail/end.svg"
-        class="cancel__img"
-        loading="lazy"
-        decoding="async"
-      />
-
-      <p class="text-body-14 cancel__text">
-        Этот проект был успешно завершён в рамках программы {{ errorModalMessage()?.program_name }}.
-        Редактирование или удаление проекта больше недоступно.
-      </p>
     </div>
-  </app-modal>
-}
 
-@defer (when isSendDescisionLate()) {
-  <app-modal
-    [open]="isSendDescisionLate()"
-    (openChange)="isSendDescisionLate.set(!isSendDescisionLate())"
-  >
-    <div class="cancel" style="width: 605px; padding: 0px 24px">
-      <div class="cancel__top">
-        <i (click)="isSendDescisionLate.set(false)" appIcon icon="cross" class="cancel__cross"></i>
-        <p class="cancel__title text-body-14">Подача проектов завершена!</p>
+    <main class="project">
+      <form [formGroup]="projectForm" class="project__form">
+        <app-project-navigation
+          [navItems]="navProjectItems"
+          style="width: 100%"
+          (stepChange)="navigateStep($event)"
+        ></app-project-navigation>
+
+        <div class="project__inner">
+          @if (editingStep() === "main") {
+            @defer {
+              <app-project-main-step
+                style="width: 100%"
+                [projSubmitInitiated]="projSubmitInitiated()"
+              ></app-project-main-step>
+            }
+          } @else if (editingStep() === "contacts") {
+            @defer {
+              <app-project-partner-resources-step
+                style="width: 100%"
+              ></app-project-partner-resources-step>
+            }
+          } @else if (editingStep() === "achievements") {
+            @defer {
+              <app-project-achievement-step
+                style="width: 100%"
+                [projSubmitInitiated]="projSubmitInitiated()"
+              ></app-project-achievement-step>
+            }
+          } @else if (editingStep() === "vacancies") {
+            @defer {
+              <app-project-vacancy-step style="width: 100%"></app-project-vacancy-step>
+            }
+          } @else if (editingStep() === "team") {
+            @defer {
+              <app-project-team-step style="width: 100%"></app-project-team-step>
+            }
+          } @else if (editingStep() === "additional") {
+            @defer {
+              <app-project-additional-step
+                #additionalStepComponent
+                style="width: 100%"
+              ></app-project-additional-step>
+            }
+          }
+        </div>
+      </form>
+      <app-modal
+        [open]="
+          (projectForm.invalid || additionalForm.invalid) &&
+          projSubmitInitiated() &&
+          !warningModalSeen()
+        "
+      >
+        <div class="project__warning-modal">
+          <h3 class="text-bold-body-16">📢 внимание!</h3>
+          <p class="text-body-14">
+            для публикации проекта, нужно заполнить все <strong>обязательные поля</strong> (они
+            будут <strong>подсвечены&nbsp;<span>красным</span></strong
+            >). Если вы пока не знаете что написать, можно сохранить черновик проекта и заполнить
+            поля позже :&#41;
+
+            {{
+              fromProgram() || isProjectAssignToProgram()
+                ? 'также проверь вкладку "данные для конкурсов"'
+                : ""
+            }}
+          </p>
+          <app-button
+            size="medium"
+            customTypographyClass="text-body-12"
+            appearance="outline"
+            (click)="closeWarningModal()"
+            >понятно</app-button
+          >
+        </div>
+      </app-modal>
+    </main>
+  </div>
+
+  @defer (when isCompleted()) {
+    <app-modal [open]="isCompleted()" (openChange)="isCompleted.set(!isCompleted())">
+      <div class="cancel">
+        <div class="cancel__top">
+          <i (click)="isCompleted.set(false)" appIcon icon="cross" class="cancel__cross"></i>
+          <p class="cancel__title text-bold-body-16">Проект завершен!</p>
+        </div>
+
+        <img
+          alt="end"
+          src="assets/images/projects/detail/end.svg"
+          class="cancel__img"
+          loading="lazy"
+          decoding="async"
+        />
+
+        <p class="text-body-14 cancel__text">
+          Этот проект был успешно завершён в рамках программы
+          {{ errorModalMessage()?.program_name }}. Редактирование или удаление проекта больше
+          недоступно.
+        </p>
       </div>
+    </app-modal>
+  }
 
-      <p class="text-body-12">Срок подачи проектов в программу завершён</p>
-    </div>
-  </app-modal>
-}
+  @defer (when isSendDescisionLate()) {
+    <app-modal
+      [open]="isSendDescisionLate()"
+      (openChange)="isSendDescisionLate.set(!isSendDescisionLate())"
+    >
+      <div class="cancel" style="width: 605px; padding: 0px 24px">
+        <div class="cancel__top">
+          <i
+            (click)="isSendDescisionLate.set(false)"
+            appIcon
+            icon="cross"
+            class="cancel__cross"
+          ></i>
+          <p class="cancel__title text-body-14">Подача проектов завершена!</p>
+        </div>
 
-@defer (when fromProgramOpen()) {
-  <app-modal [open]="fromProgramOpen()" (openChange)="fromProgramOpen.set(false)">
-    <div class="cancel" style="width: 605px; padding: 0px 24px">
-      <div class="cancel__top">
-        <p class="cancel__title text-body-14">Начнем создавать историю!</p>
+        <p class="text-body-12">Срок подачи проектов в программу завершён</p>
       </div>
+    </app-modal>
+  }
 
-      <div class="cancel__text-block">
-        <p class="text-body-12">
-          Вы находитесь в проектной мастерской – здесь мы с нуля создаем и редактируем проектные
-          идеи
-        </p>
+  @defer (when fromProgramOpen()) {
+    <app-modal [open]="fromProgramOpen()" (openChange)="fromProgramOpen.set(false)">
+      <div class="cancel" style="width: 605px; padding: 0px 24px">
+        <div class="cancel__top">
+          <p class="cancel__title text-body-14">Начнем создавать историю!</p>
+        </div>
 
-        <p class="text-body-12">
-          Есть несколько вкладок – заполнив каждую, вы полностью опишите свой проект.<br />
-          Обязательные поля отмечены красным, обязательно не забудь про вкладку «данные для
-          конкурсов»
-        </p>
+        <div class="cancel__text-block">
+          <p class="text-body-12">
+            Вы находитесь в проектной мастерской – здесь мы с нуля создаем и редактируем проектные
+            идеи
+          </p>
 
-        <p class="text-body-12">
-          Будьте внимательны: проект единожды создается лидером, команда приглашается в уже
-          созданный проект
-        </p>
+          <p class="text-body-12">
+            Есть несколько вкладок – заполнив каждую, вы полностью опишите свой проект.<br />
+            Обязательные поля отмечены красным, обязательно не забудь про вкладку «данные для
+            конкурсов»
+          </p>
+
+          <p class="text-body-12">
+            Будьте внимательны: проект единожды создается лидером, команда приглашается в уже
+            созданный проект
+          </p>
+
+          <p class="text-body-12">
+            Если вы понимаете, что заполнить каждую графу пока нет времени (или не хватает
+            информации!), нажмите «сохранить черновик» – так вы сохраните проект, но не опубликуете
+            его для пользователей всей платформы
+          </p>
+
+          <p class="text-body-12">Расскажите миру о вашем проекте!</p>
+        </div>
+
+        <app-button
+          customTypographyClass="text-body-12"
+          size="medium"
+          (click)="fromProgramOpen.set(false)"
+          >спасибо, понятно</app-button
+        >
+      </div>
+    </app-modal>
+  }
+
+  @defer (when isSendDescisionToPartnerProgramProject()) {
+    <app-modal
+      [open]="isSendDescisionToPartnerProgramProject()"
+      (openChange)="
+        isSendDescisionToPartnerProgramProject.set(!isSendDescisionToPartnerProgramProject())
+      "
+    >
+      <div class="cancel" style="width: 100%; padding: 40px 20px 20px">
+        <div class="cancel__top">
+          <i
+            (click)="isSendDescisionToPartnerProgramProject.set(false)"
+            appIcon
+            icon="cross"
+            class="cancel__cross"
+          ></i>
+          <img
+            alt="end"
+            src="assets/images/projects/detail/bid.svg"
+            class="cancel__img"
+            loading="lazy"
+            decoding="async"
+          />
+          <h4 class="cancel__title text-heading-4">Отправить заявку?</h4>
+        </div>
 
-        <p class="text-body-12">
-          Если вы понимаете, что заполнить каждую графу пока нет времени (или не хватает
-          информации!), нажмите «сохранить черновик» – так вы сохраните проект, но не опубликуете
-          его для пользователей всей платформы
+        <p class="text-body-12 cancel__text">
+          После отправки заявку нельзя будет редактировать до окончания конкурса.
+          <br />Вы уверены, что хотите отправить заявку сейчас?
         </p>
 
-        <p class="text-body-12">Расскажите миру о вашем проекте!</p>
+        <div class="cancel__buttons">
+          <app-button
+            size="medium"
+            customTypographyClass="text-body-12"
+            color="grey"
+            (click)="isSendDescisionToPartnerProgramProject.set(false)"
+            >Отмена</app-button
+          >
+          <app-button
+            size="medium"
+            customTypographyClass="text-body-12"
+            (click)="closeSendingDescisionModal()"
+            >Отправить</app-button
+          >
+        </div>
+      </div>
+    </app-modal>
+  }
+} @else {
+  <div>
+    <div class="project__top">
+      <div class="project__back" [routerLink]="AppRoutes.projects.detail(profileId())">
+        <i appIcon icon="left-arrow" appSquare="24"></i>
+        <h1 class="project__title">редактировать проект</h1>
+      </div>
+      <div class="project__save">
+        <app-button
+          size="medium"
+          customTypographyClass="text-body-12"
+          color="red"
+          (click)="deleteProject()"
+        >
+          удалить проект
+        </app-button>
+        <app-button
+          size="medium"
+          customTypographyClass="text-body-12"
+          appearance="outline"
+          [loader]="projFormIsSubmittingAsDraft()"
+          [disabled]="coverReset.pending()"
+          (click)="saveProjectAsDraft()"
+        >
+          сохранить черновик
+        </app-button>
+        <app-button
+          size="medium"
+          customTypographyClass="text-body-12"
+          [loader]="projFormIsSubmittingAsPublished()"
+          (click)="saveProjectAsPublished()"
+          [disabled]="onEditClicked() || coverReset.pending()"
+          [style.opacity]="onEditClicked() ? '0.5' : '1'"
+        >
+          {{ isCompetitive() && !submitted() ? "отправить заявку" : "сохранить" }}
+        </app-button>
       </div>
+    </div>
+
+    <main class="project">
+      <form appFormLayout [formGroup]="projectForm" class="project__form">
+        <app-project-navigation
+          [navItems]="navProjectItems"
+          style="width: 100%"
+          (stepChange)="navigateStep($event)"
+        ></app-project-navigation>
 
-      <app-button
-        customTypographyClass="text-body-12"
-        size="medium"
-        (click)="fromProgramOpen.set(false)"
-        >спасибо, понятно</app-button
+        <div class="project__inner">
+          @if (editingStep() === "main") {
+            @defer {
+              <app-project-main-step
+                style="width: 100%"
+                [projSubmitInitiated]="projSubmitInitiated()"
+              ></app-project-main-step>
+            }
+          } @else if (editingStep() === "contacts") {
+            @defer {
+              <app-project-partner-resources-step
+                style="width: 100%"
+              ></app-project-partner-resources-step>
+            }
+          } @else if (editingStep() === "achievements") {
+            @defer {
+              <app-project-achievement-step
+                style="width: 100%"
+                [projSubmitInitiated]="projSubmitInitiated()"
+              ></app-project-achievement-step>
+            }
+          } @else if (editingStep() === "vacancies") {
+            @defer {
+              <app-project-vacancy-step style="width: 100%"></app-project-vacancy-step>
+            }
+          } @else if (editingStep() === "team") {
+            @defer {
+              <app-project-team-step style="width: 100%"></app-project-team-step>
+            }
+          } @else if (editingStep() === "additional") {
+            @defer {
+              <app-project-additional-step
+                #additionalStepComponent
+                style="width: 100%"
+              ></app-project-additional-step>
+            }
+          }
+        </div>
+      </form>
+      <app-modal
+        [open]="
+          (projectForm.invalid || additionalForm.invalid) &&
+          projSubmitInitiated() &&
+          !warningModalSeen()
+        "
       >
-    </div>
-  </app-modal>
-}
+        <div class="project__warning-modal">
+          <h3 class="text-bold-body-16">📢 внимание!</h3>
+          <p class="text-body-14">
+            для публикации проекта, нужно заполнить все <strong>обязательные поля</strong> (они
+            будут <strong>подсвечены&nbsp;<span>красным</span></strong
+            >). Если вы пока не знаете что написать, можно сохранить черновик проекта и заполнить
+            поля позже :&#41;
+
+            {{
+              fromProgram() || isProjectAssignToProgram()
+                ? 'также проверь вкладку "данные для конкурсов"'
+                : ""
+            }}
+          </p>
+          <app-button
+            size="medium"
+            customTypographyClass="text-body-12"
+            appearance="outline"
+            (click)="closeWarningModal()"
+            >понятно</app-button
+          >
+        </div>
+      </app-modal>
+    </main>
+  </div>
+
+  @defer (when isCompleted()) {
+    <app-modal [open]="isCompleted()" (openChange)="isCompleted.set(!isCompleted())">
+      <div class="cancel">
+        <div class="cancel__top">
+          <i (click)="isCompleted.set(false)" appIcon icon="cross" class="cancel__cross"></i>
+          <p class="cancel__title text-bold-body-16">Проект завершен!</p>
+        </div>
 
-@defer (when isSendDescisionToPartnerProgramProject()) {
-  <app-modal
-    [open]="isSendDescisionToPartnerProgramProject()"
-    (openChange)="
-      isSendDescisionToPartnerProgramProject.set(!isSendDescisionToPartnerProgramProject())
-    "
-  >
-    <div class="cancel" style="width: 100%; padding: 40px 20px 20px">
-      <div class="cancel__top">
-        <i
-          (click)="isSendDescisionToPartnerProgramProject.set(false)"
-          appIcon
-          icon="cross"
-          class="cancel__cross"
-        ></i>
         <img
           alt="end"
-          src="assets/images/projects/detail/bid.svg"
+          src="assets/images/projects/detail/end.svg"
           class="cancel__img"
           loading="lazy"
           decoding="async"
         />
-        <h4 class="cancel__title text-heading-4">Отправить заявку?</h4>
+
+        <p class="text-body-14 cancel__text">
+          Этот проект был успешно завершён в рамках программы
+          {{ errorModalMessage()?.program_name }}. Редактирование или удаление проекта больше
+          недоступно.
+        </p>
       </div>
+    </app-modal>
+  }
+
+  @defer (when isSendDescisionLate()) {
+    <app-modal
+      [open]="isSendDescisionLate()"
+      (openChange)="isSendDescisionLate.set(!isSendDescisionLate())"
+    >
+      <div class="cancel cancel--fixed-width" style="max-width: 605px; padding: 0px 24px">
+        <div class="cancel__top">
+          <i
+            (click)="isSendDescisionLate.set(false)"
+            appIcon
+            icon="cross"
+            class="cancel__cross"
+          ></i>
+          <p class="cancel__title text-body-14">Подача проектов завершена!</p>
+        </div>
+
+        <p class="text-body-12">Срок подачи проектов в программу завершён</p>
+      </div>
+    </app-modal>
+  }
+
+  @defer (when fromProgramOpen()) {
+    <app-modal [open]="fromProgramOpen()" (openChange)="fromProgramOpen.set(false)">
+      <div class="cancel cancel--fixed-width" style="max-width: 605px; padding: 0px 24px">
+        <div class="cancel__top">
+          <p class="cancel__title text-body-14">Начнем создавать историю!</p>
+        </div>
+
+        <div class="cancel__text-block">
+          <p class="text-body-12">
+            Вы находитесь в проектной мастерской – здесь мы с нуля создаем и редактируем проектные
+            идеи
+          </p>
+
+          <p class="text-body-12">
+            Есть несколько вкладок – заполнив каждую, вы полностью опишите свой проект.<br />
+            Обязательные поля отмечены красным, обязательно не забудь про вкладку «данные для
+            конкурсов»
+          </p>
+
+          <p class="text-body-12">
+            Будьте внимательны: проект единожды создается лидером, команда приглашается в уже
+            созданный проект
+          </p>
+
+          <p class="text-body-12">
+            Если вы понимаете, что заполнить каждую графу пока нет времени (или не хватает
+            информации!), нажмите «сохранить черновик» – так вы сохраните проект, но не опубликуете
+            его для пользователей всей платформы
+          </p>
 
-      <p class="text-body-12 cancel__text">
-        После отправки заявку нельзя будет редактировать до окончания конкурса.
-        <br />Вы уверены, что хотите отправить заявку сейчас?
-      </p>
+          <p class="text-body-12">Расскажите миру о вашем проекте!</p>
+        </div>
 
-      <div class="cancel__buttons">
         <app-button
-          size="medium"
           customTypographyClass="text-body-12"
-          color="grey"
-          (click)="isSendDescisionToPartnerProgramProject.set(false)"
-          >Отмена</app-button
-        >
-        <app-button
           size="medium"
-          customTypographyClass="text-body-12"
-          (click)="closeSendingDescisionModal()"
-          >Отправить</app-button
+          (click)="fromProgramOpen.set(false)"
+          >спасибо, понятно</app-button
         >
       </div>
-    </div>
-  </app-modal>
+    </app-modal>
+  }
+
+  @defer (when isSendDescisionToPartnerProgramProject()) {
+    <app-modal
+      [open]="isSendDescisionToPartnerProgramProject()"
+      (openChange)="
+        isSendDescisionToPartnerProgramProject.set(!isSendDescisionToPartnerProgramProject())
+      "
+    >
+      <div class="cancel" style="width: 100%; padding: 40px 20px 20px">
+        <div class="cancel__top">
+          <i
+            (click)="isSendDescisionToPartnerProgramProject.set(false)"
+            appIcon
+            icon="cross"
+            class="cancel__cross"
+          ></i>
+          <img
+            alt="end"
+            src="assets/images/projects/detail/bid.svg"
+            class="cancel__img"
+            loading="lazy"
+            decoding="async"
+          />
+          <h4 class="cancel__title text-heading-4">Отправить заявку?</h4>
+        </div>
+
+        <p class="text-body-12 cancel__text">
+          После отправки заявку нельзя будет редактировать до окончания конкурса.
+          <br />Вы уверены, что хотите отправить заявку сейчас?
+        </p>
+
+        <div class="cancel__buttons">
+          <app-button
+            size="medium"
+            customTypographyClass="text-body-12"
+            color="grey"
+            (click)="isSendDescisionToPartnerProgramProject.set(false)"
+            >Отмена</app-button
+          >
+          <app-button
+            size="medium"
+            customTypographyClass="text-body-12"
+            (click)="closeSendingDescisionModal()"
+            >Отправить</app-button
+          >
+        </div>
+      </div>
+    </app-modal>
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss
index 30e8414bf..e0e1f955c 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -203,3 +202,56 @@
     margin-top: 20px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    :host {
+      display: block;
+      min-width: 0;
+    }
+
+    .project {
+      padding: 16px var(--page-gutter) max(24px, env(safe-area-inset-bottom));
+    }
+
+    .project__top {
+      position: static;
+      display: grid;
+      grid-template-columns: 44px minmax(0, 1fr);
+      gap: 12px;
+      justify-content: space-between;
+      padding: 8px var(--page-gutter);
+    }
+
+    .project__left form {
+      width: 100%;
+    }
+
+    .project__save {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 12px;
+      min-width: 0;
+
+      > app-button {
+        display: block;
+        width: 100%;
+      }
+
+      ::ng-deep .button {
+        width: 100%;
+      }
+    }
+
+    .project__back {
+      align-self: start;
+      justify-content: center;
+      min-height: 44px;
+    }
+
+    .project__wrapper--settings {
+      min-width: 0;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.ts
index 416c89ab0..eea353b34 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/edit.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FormLayoutDirective } from "@uilib";
+
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -47,6 +52,7 @@ import { ProjectCoverResetService } from "@api/project/facades/edit/project-cove
   templateUrl: "./edit.component.html",
   styleUrl: "./edit.component.scss",
   imports: [
+    FormLayoutDirective,
     ReactiveFormsModule,
     CommonModule,
     RouterModule,
@@ -81,6 +87,8 @@ import { ProjectCoverResetService } from "@api/project/facades/edit/project-cove
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectEditComponent implements OnInit, AfterViewInit, OnDestroy {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   protected readonly coverReset = inject(ProjectCoverResetService);
   private readonly projectsEditInfoService = inject(ProjectsEditInfoService);
   protected readonly AppRoutes = AppRoutes;
diff --git a/projects/social_platform/src/app/ui/pages/projects/list/list.component.html b/projects/social_platform/src/app/ui/pages/projects/list/list.component.html
index 2f1067d1d..f76933ddd 100644
--- a/projects/social_platform/src/app/ui/pages/projects/list/list.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/list/list.component.html
@@ -1,36 +1,75 @@
 <!-- @format -->
-
-<section class="page">
-  @if (isAll()) {
-    <div class="filter-toggle page__filter-toggle" (click)="isFilterOpen.set(!isFilterOpen())">
-      <span>Фильтр</span>
-      <i appIcon icon="filter" appSquare="34"></i>
-    </div>
-  }
-  <ul class="page__list" #listRoot>
-    @for (project of projects(); track isInvites() ? project.inviteId : project.id) {
-      <li>
-        @if (!isInvites()) {
-          <ng-container *ngTemplateOutlet="projectCard"></ng-container>
-        } @else {
-          <a [routerLink]="AppRoutes.projects.detail(project.id)">
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <section class="page">
+    @if (isAll()) {
+      <div class="filter-toggle page__filter-toggle" (click)="isFilterOpen.set(!isFilterOpen())">
+        <span>Фильтр</span>
+        <i appIcon icon="filter" appSquare="34"></i>
+      </div>
+    }
+    <ul class="page__list" #listRoot>
+      @for (project of projects(); track isInvites() ? project.inviteId : project.id) {
+        <li>
+          @if (!isInvites()) {
             <ng-container *ngTemplateOutlet="projectCard"></ng-container>
-          </a>
-        }
-        <ng-template #projectCard>
-          <app-info-card
-            [info]="project"
-            [type]="isInvites() ? 'invite' : 'projects'"
-            [appereance]="isMy() ? 'my' : isSubs() ? 'subs' : 'base'"
-            [showSubscriptionAction]="isSubs() || isAll()"
-            [isSubscribed]="profileProjSubsIds()!.includes(project.id)"
-            [profileId]="project.id"
-            [loggedUserId]="profile()?.id"
-            (onAcceptingInvite)="onAcceptInvite($event)"
-            (onRejectingInvite)="onRejectInvite($event)"
-          ></app-info-card>
-        </ng-template>
-      </li>
+          } @else {
+            <a [routerLink]="AppRoutes.projects.detail(project.id)">
+              <ng-container *ngTemplateOutlet="projectCard"></ng-container>
+            </a>
+          }
+          <ng-template #projectCard>
+            <app-info-card
+              [info]="project"
+              [type]="isInvites() ? 'invite' : 'projects'"
+              [appereance]="isMy() ? 'my' : isSubs() ? 'subs' : 'base'"
+              [showSubscriptionAction]="isSubs() || isAll()"
+              [isSubscribed]="profileProjSubsIds()!.includes(project.id)"
+              [profileId]="project.id"
+              [loggedUserId]="profile()?.id"
+              (onAcceptingInvite)="onAcceptInvite($event)"
+              (onRejectingInvite)="onRejectInvite($event)"
+            ></app-info-card>
+          </ng-template>
+        </li>
+      }
+    </ul>
+  </section>
+} @else {
+  <section class="page">
+    @if (isAll()) {
+      <div class="filter-toggle page__filter-toggle" (click)="isFilterOpen.set(!isFilterOpen())">
+        <span>Фильтр</span>
+        <i appIcon icon="filter" appSquare="34"></i>
+      </div>
     }
-  </ul>
-</section>
+    <ul class="page__list" #listRoot>
+      @for (project of projects(); track isInvites() ? project.inviteId : project.id) {
+        <li>
+          @if (!isInvites()) {
+            <ng-container *ngTemplateOutlet="projectCard"></ng-container>
+          } @else {
+            <a [routerLink]="AppRoutes.projects.detail(project.id)">
+              <ng-container *ngTemplateOutlet="projectCard"></ng-container>
+            </a>
+          }
+          <ng-template #projectCard>
+            <app-info-card
+              [info]="project"
+              [type]="isInvites() ? 'invite' : 'projects'"
+              [appereance]="isMy() ? 'my' : isSubs() ? 'subs' : 'base'"
+              [showSubscriptionAction]="isSubs() || isAll()"
+              [isSubscribed]="profileProjSubsIds()!.includes(project.id)"
+              [profileId]="project.id"
+              [loggedUserId]="profile()?.id"
+              (onAcceptingInvite)="onAcceptInvite($event)"
+              (onRejectingInvite)="onRejectInvite($event)"
+            ></app-info-card>
+          </ng-template>
+        </li>
+      } @empty {
+        <li><app-state title="Ничего не найдено" /></li>
+      }
+    </ul>
+  </section>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss b/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss
index 0301fbf68..576c49287 100644
--- a/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/list/list.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 
 .page {
@@ -161,3 +160,31 @@
     color: var(--dark-grey);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    .filter {
+      position: fixed;
+      z-index: 300;
+    }
+
+    .filter__body {
+      min-height: 0;
+      max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
+      padding-bottom: env(safe-area-inset-bottom, 0);
+      overscroll-behavior: contain;
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    .page__list {
+      grid-template-columns: repeat(auto-fill, minmax(0, var(--ui-mobile-entity-card-width)));
+      row-gap: 48px;
+    }
+
+    .page__filter {
+      min-width: 0;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/list/list.component.ts b/projects/social_platform/src/app/ui/pages/projects/list/list.component.ts
index ea2aa9be4..cfc79603f 100644
--- a/projects/social_platform/src/app/ui/pages/projects/list/list.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/list/list.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { StateComponent } from "@uilib";
+
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -28,7 +33,7 @@ import { ProfileInfoService } from "@api/profile/facades/profile-info.service";
   selector: "app-list",
   templateUrl: "./list.component.html",
   styleUrl: "./list.component.scss",
-  imports: [IconComponent, RouterLink, InfoCardComponent, NgTemplateOutlet],
+  imports: [StateComponent, IconComponent, RouterLink, InfoCardComponent, NgTemplateOutlet],
   providers: [
     ProjectsListInfoService,
     ProjectsInfoService,
@@ -41,6 +46,8 @@ import { ProfileInfoService } from "@api/profile/facades/profile-info.service";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectsListComponent implements OnInit, AfterViewInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly filterBody = viewChild<ElementRef<HTMLElement>>("filterBody");
   readonly listRoot = viewChild<ElementRef<HTMLUListElement>>("listRoot");
 
diff --git a/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss b/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss
index 8e05edbc8..3472caa9c 100644
--- a/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/project-activity-card/project-activity-card.component.scss
@@ -1,3 +1,6 @@
+/** @format */
+@use "styles/responsive";
+
 :host {
   display: block;
   width: 156px;
@@ -80,3 +83,45 @@
     white-space: nowrap;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .activity {
+    &__title {
+      font-size: var(--ui-font-body);
+    }
+
+    &__label {
+      font-size: var(--ui-font-caption);
+    }
+
+    &__value {
+      font-size: var(--ui-font-body);
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    :host {
+      width: 100%;
+      height: auto;
+    }
+
+    .activity {
+      padding: 16px;
+    }
+
+    .activity__title {
+      color: var(--ui-text);
+    }
+
+    .activity__metrics {
+      grid-template-rows: auto;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px 16px;
+    }
+
+    .activity__metric + .activity__metric {
+      border-top: 0;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts b/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts
index a2ede1797..eb7c116ea 100644
--- a/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/projects-activity-placement.spec.ts
@@ -2,6 +2,14 @@
 
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
+import {
+  parseTemplate,
+  TmplAstElement,
+  TmplAstForLoopBlock,
+  TmplAstIfBlock,
+  TmplAstNode,
+  TmplAstTemplate,
+} from "@angular/compiler";
 
 describe("ProjectsComponent: размещение проектной активности", () => {
   const template = readFileSync(
@@ -12,17 +20,35 @@ describe("ProjectsComponent: размещение проектной актив
     "utf8",
   );
 
+  const activityConditions: string[][] = [];
+  const walk = (nodes: TmplAstNode[], conditions: string[] = []) => {
+    for (const node of nodes) {
+      if (node instanceof TmplAstIfBlock) {
+        for (const branch of node.branches) {
+          walk(branch.children, [...conditions, branch.expression?.source || "else"]);
+        }
+      } else if (node instanceof TmplAstElement || node instanceof TmplAstTemplate) {
+        if (node instanceof TmplAstElement && node.name === "app-project-activity-card") {
+          activityConditions.push(conditions);
+        }
+        walk(node.children, conditions);
+      } else if (node instanceof TmplAstForLoopBlock) {
+        walk(node.children, conditions);
+      }
+    }
+  };
+  walk(parseTemplate(template, "projects.component.html").nodes);
+
   it("показывает блок только для dashboard и my", () => {
-    expect(template).toMatch(
-      /@if \(isMy\(\) \|\| isDashboard\(\)\) \{\s*<app-project-activity-card/,
-    );
-    expect(template.match(/<app-project-activity-card/g)).toHaveLength(1);
+    expect(activityConditions.length).toBeGreaterThan(0);
+    for (const conditions of activityConditions) {
+      expect(conditions).toContain("isMy() || isDashboard()");
+    }
   });
 
   it.each(["isSubs()", "isInvites()", "isAll()"])("не привязывает блок к условию %s", condition => {
-    const conditionalBlock = new RegExp(
-      `@if \\(${condition.replace(/[()]/g, "\\$&")}\\) \\{[\\s\\S]*?<app-project-activity-card`,
-    );
-    expect(template).not.toMatch(conditionalBlock);
+    for (const conditions of activityConditions) {
+      expect(conditions).not.toContain(condition);
+    }
   });
 });
diff --git a/projects/social_platform/src/app/ui/pages/projects/projects.component.html b/projects/social_platform/src/app/ui/pages/projects/projects.component.html
index 16b3d3aa2..4c741dc95 100644
--- a/projects/social_platform/src/app/ui/pages/projects/projects.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/projects.component.html
@@ -1,115 +1,251 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <main class="page">
+    <div class="page__bar">
+      <app-back
+        namespace="проекты"
+        [path]="isDashboard() ? '/office/feed' : '/office/projects/dashboard'"
+      ></app-back>
 
-<main class="page">
-  <div class="page__bar">
-    <app-back
-      namespace="проекты"
-      [path]="isDashboard() ? '/office/feed' : '/office/projects/dashboard'"
-    ></app-back>
-
-    <div class="page__info">
-      <div class="page__outlet" [style.gap]="isDashboard() ? '8px' : '20px'">
-        <form [formGroup]="searchForm">
-          <app-search formControlName="search"></app-search>
-        </form>
-
-        @if (!isDashboard()) {
-          <app-bar-new
-            [links]="[
-              {
-                link: '/office/projects/my',
-                linkText: 'мои проекты',
-                iconName: 'main',
-                isRouterLinkActiveOptions: false,
-              },
-
-              {
-                link: '/office/projects/subscriptions',
-                linkText: 'мои подписки',
-                iconName: 'favourites',
-                isRouterLinkActiveOptions: false,
-              },
-
-              {
-                link: '/office/projects/invites',
-                linkText: 'мои приглашения',
-                iconName: 'send',
-                isRouterLinkActiveOptions: false,
-              },
-
-              {
-                link: '/office/projects/all',
-                linkText: 'все проекты',
-                iconName: 'folders',
-                isRouterLinkActiveOptions: false,
-              },
-            ]"
+      <div class="page__info">
+        <div class="page__outlet" [style.gap]="isDashboard() ? '8px' : '20px'">
+          <form [formGroup]="searchForm">
+            <app-search formControlName="search"></app-search>
+          </form>
+
+          @if (!isDashboard()) {
+            <app-bar-new
+              [links]="[
+                {
+                  link: '/office/projects/my',
+                  linkText: 'мои проекты',
+                  iconName: 'main',
+                  isRouterLinkActiveOptions: false,
+                },
+
+                {
+                  link: '/office/projects/subscriptions',
+                  linkText: 'мои подписки',
+                  iconName: 'favourites',
+                  isRouterLinkActiveOptions: false,
+                },
+
+                {
+                  link: '/office/projects/invites',
+                  linkText: 'мои приглашения',
+                  iconName: 'send',
+                  isRouterLinkActiveOptions: false,
+                },
+
+                {
+                  link: '/office/projects/all',
+                  linkText: 'все проекты',
+                  iconName: 'folders',
+                  isRouterLinkActiveOptions: false,
+                },
+              ]"
+            >
+            </app-bar-new>
+          }
+
+          <router-outlet></router-outlet>
+        </div>
+
+        <div class="page__create">
+          <app-button
+            size="medium"
+            (click)="addProject()"
+            class="bar__add-project"
+            customTypographyClass="text-body-12"
           >
-          </app-bar-new>
-        }
+            <span class="bar__add-project-text text-body-12">создать проект</span>
+            <i appIcon icon="plus" appSquare="10"></i>
+          </app-button>
 
-        <router-outlet></router-outlet>
-      </div>
+          <div class="page__left">
+            @if (isDashboard()) {
+              <div class="page__invites">
+                <div class="page__invites--wrapper">
+                  <p class="text-body-12">мои приглашения</p>
+                  <i appIcon icon="send" appSquare="12"></i>
+                </div>
 
-      <div class="page__create">
-        <app-button
-          size="medium"
-          (click)="addProject()"
-          class="bar__add-project"
-          customTypographyClass="text-body-12"
-        >
-          <span class="bar__add-project-text text-body-12">создать проект</span>
-          <i appIcon icon="plus" appSquare="10"></i>
-        </app-button>
-
-        <div class="page__left">
-          @if (isDashboard()) {
-            <div class="page__invites">
-              <div class="page__invites--wrapper">
-                <p class="text-body-12">мои приглашения</p>
-                <i appIcon icon="send" appSquare="12"></i>
+                @if (myInvites().length) {
+                  <ul class="page__invites--list">
+                    @for (invite of myInvites(); track invite.id) {
+                      <app-info-card
+                        (onRejectingInvite)="onRejectInvite($event)"
+                        (onAcceptingInvite)="onAcceptInvite($event)"
+                        type="invite"
+                        [info]="invite"
+                      ></app-info-card>
+                    }
+                  </ul>
+                } @else {
+                  <div class="page__invites--no-items">
+                    <p class="text-body-12">пока нет приглашений</p>
+                  </div>
+                }
               </div>
-
-              @if (myInvites().length) {
-                <ul class="page__invites--list">
-                  @for (invite of myInvites(); track invite.id) {
-                    <app-info-card
-                      (onRejectingInvite)="onRejectInvite($event)"
-                      (onAcceptingInvite)="onAcceptInvite($event)"
-                      type="invite"
-                      [info]="invite"
-                    ></app-info-card>
-                  }
-                </ul>
-              } @else {
-                <div class="page__invites--no-items">
-                  <p class="text-body-12">пока нет приглашений</p>
+            }
+            @if (isMy() || isDashboard()) {
+              <app-project-activity-card
+                [count]="projectCount()"
+                [state]="projectCountState()"
+              ></app-project-activity-card>
+            }
+            @if (isAll()) {
+              <div class="filter page__filter" [class.page__filter--open]="isFilterOpen">
+                <div class="filter__overlay" (click)="isFilterOpen.set(false)"></div>
+                <div class="filter__body" #filterBody>
+                  <div
+                    class="filter__bar"
+                    (touchstart)="onSwipeStart($event)"
+                    (touchmove)="onSwipeMove($event)"
+                    (touchend)="onSwipeEnd($event)"
+                  ></div>
+                  <app-projects-filter (closeFilter)="closeFilter()"></app-projects-filter>
                 </div>
-              }
-            </div>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+} @else {
+  <main class="page">
+    <div class="page__bar">
+      @if (desktopLayout()) {
+        <app-back
+          namespace="проекты"
+          [path]="isDashboard() ? '/office/feed' : '/office/projects/dashboard'"
+        ></app-back>
+      } @else {
+        <app-page-header
+          title="проекты"
+          [backRoute]="isDashboard() ? '/office/feed' : '/office/projects/dashboard'"
+          ><app-button
+            size="medium"
+            (click)="addProject()"
+            class="bar__add-project"
+            customTypographyClass="text-body-12"
+          >
+            <span class="bar__add-project-text text-body-12">создать проект</span>
+            <i appIcon icon="plus" appSquare="10"></i> </app-button
+        ></app-page-header>
+      }
+
+      <div class="page__info">
+        <div class="page__outlet" [style.gap]="isDashboard() ? '8px' : '20px'">
+          <form appFormLayout [formGroup]="searchForm">
+            <app-search formControlName="search"></app-search>
+          </form>
+
+          @if (!isDashboard()) {
+            <app-bar-new
+              [links]="[
+                {
+                  link: '/office/projects/my',
+                  linkText: 'мои проекты',
+                  iconName: 'main',
+                  isRouterLinkActiveOptions: false,
+                },
+
+                {
+                  link: '/office/projects/subscriptions',
+                  linkText: 'мои подписки',
+                  iconName: 'favourites',
+                  isRouterLinkActiveOptions: false,
+                },
+
+                {
+                  link: '/office/projects/invites',
+                  linkText: 'мои приглашения',
+                  iconName: 'send',
+                  isRouterLinkActiveOptions: false,
+                },
+
+                {
+                  link: '/office/projects/all',
+                  linkText: 'все проекты',
+                  iconName: 'folders',
+                  isRouterLinkActiveOptions: false,
+                },
+              ]"
+            >
+            </app-bar-new>
           }
-          @if (isMy() || isDashboard()) {
-            <app-project-activity-card
-              [count]="projectCount()"
-              [state]="projectCountState()"
-            ></app-project-activity-card>
+
+          <router-outlet></router-outlet>
+        </div>
+
+        <div class="page__create">
+          @if (desktopLayout()) {
+            <app-button
+              size="medium"
+              (click)="addProject()"
+              class="bar__add-project"
+              customTypographyClass="text-body-12"
+            >
+              <span class="bar__add-project-text text-body-12">создать проект</span>
+              <i appIcon icon="plus" appSquare="10"></i>
+            </app-button>
           }
-          @if (isAll()) {
-            <div class="filter page__filter" [class.page__filter--open]="isFilterOpen">
-              <div class="filter__overlay" (click)="isFilterOpen.set(false)"></div>
-              <div class="filter__body" #filterBody>
-                <div
-                  class="filter__bar"
-                  (touchstart)="onSwipeStart($event)"
-                  (touchmove)="onSwipeMove($event)"
-                  (touchend)="onSwipeEnd($event)"
-                ></div>
-                <app-projects-filter (closeFilter)="closeFilter()"></app-projects-filter>
+          <div class="page__left">
+            @if (isDashboard()) {
+              <div class="page__invites">
+                <div class="page__invites--wrapper">
+                  <p class="text-body-12">мои приглашения</p>
+                  <i appIcon icon="send" appSquare="12"></i>
+                </div>
+
+                @if (myInvites().length) {
+                  <ul class="page__invites--list">
+                    @for (invite of myInvites(); track invite.id) {
+                      <app-info-card
+                        (onRejectingInvite)="onRejectInvite($event)"
+                        (onAcceptingInvite)="onAcceptInvite($event)"
+                        type="invite"
+                        [info]="invite"
+                      ></app-info-card>
+                    }
+                  </ul>
+                } @else {
+                  @if (desktopLayout()) {
+                    <div class="page__invites--no-items">
+                      <p class="text-body-12">пока нет приглашений</p>
+                    </div>
+                  } @else {
+                    <app-state title="пока нет приглашений" />
+                  }
+                }
               </div>
-            </div>
-          }
+            }
+            @if (isMy() || isDashboard()) {
+              <app-project-activity-card
+                [count]="projectCount()"
+                [state]="projectCountState()"
+              ></app-project-activity-card>
+            }
+            @if (isAll()) {
+              <div class="filter page__filter" [class.page__filter--open]="isFilterOpen">
+                <div class="filter__overlay" (click)="isFilterOpen.set(false)"></div>
+                <div class="filter__body" #filterBody>
+                  <div
+                    class="filter__bar"
+                    (touchstart)="onSwipeStart($event)"
+                    (touchmove)="onSwipeMove($event)"
+                    (touchend)="onSwipeEnd($event)"
+                  ></div>
+                  <app-projects-filter (closeFilter)="closeFilter()"></app-projects-filter>
+                </div>
+              </div>
+            }
+          </div>
         </div>
       </div>
     </div>
-  </div>
-</main>
+  </main>
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/projects.component.scss b/projects/social_platform/src/app/ui/pages/projects/projects.component.scss
index be2a2ea6e..e36256560 100644
--- a/projects/social_platform/src/app/ui/pages/projects/projects.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/projects.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 .page {
@@ -82,3 +83,46 @@
 .bar__add-project {
   margin-bottom: 15px;
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .bar__add-project {
+    margin-bottom: 0;
+  }
+
+  @include responsive.apply-below-desktop {
+    .page {
+      margin: 24px var(--page-gutter) 0;
+    }
+
+    .page__info {
+      gap: 24px;
+      padding-bottom: 32px;
+    }
+
+    .page__outlet {
+      order: 2;
+    }
+
+    .page__create,
+    .page__left {
+      display: contents;
+    }
+
+    .page__left > app-project-activity-card {
+      order: 1;
+    }
+
+    .page__invites {
+      order: 3;
+      margin-top: 16px;
+    }
+
+    .page__invites--list {
+      display: grid;
+      gap: 64px;
+      justify-items: center;
+      width: 100%;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/projects/projects.component.ts b/projects/social_platform/src/app/ui/pages/projects/projects.component.ts
index 246002a8d..bc84e5ce3 100644
--- a/projects/social_platform/src/app/ui/pages/projects/projects.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/projects.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { DesktopLayoutService } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -15,7 +20,7 @@ import { SearchComponent } from "@ui/primitives/search/search.component";
 import { ButtonComponent } from "@ui/primitives/button/button.component";
 import { IconComponent } from "@ui/primitives/icon/icon.component";
 import { BarNewComponent } from "./bar-new/bar.component";
-import { BackComponent } from "@uilib";
+import { BackComponent, FormLayoutDirective, PageHeaderComponent, StateComponent } from "@uilib";
 import { InfoCardComponent } from "@ui/widgets/info-card/info-card.component";
 import { ProjectsUIInfoService } from "@api/project/facades/ui/projects-ui-info.service";
 import { ProjectsInfoService } from "@api/project/facades/projects-info.service";
@@ -30,6 +35,9 @@ import { ProjectActivityCardComponent } from "./project-activity-card/project-ac
   templateUrl: "./projects.component.html",
   styleUrl: "./projects.component.scss",
   imports: [
+    StateComponent,
+    PageHeaderComponent,
+    FormLayoutDirective,
     IconComponent,
     ReactiveFormsModule,
     SearchComponent,
@@ -45,6 +53,10 @@ import { ProjectActivityCardComponent } from "./project-activity-card/project-ac
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectsComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+
   readonly filterBody = viewChild<ElementRef<HTMLElement>>("filterBody");
 
   private readonly projectsInfoService = inject(ProjectsInfoService);
diff --git a/projects/social_platform/src/app/ui/pages/projects/projects.resolver.spec.ts b/projects/social_platform/src/app/ui/pages/projects/projects.resolver.spec.ts
index 4e0b9c517..d73238194 100644
--- a/projects/social_platform/src/app/ui/pages/projects/projects.resolver.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/projects.resolver.spec.ts
@@ -1,21 +1,26 @@
 /** @format */
 
 import { TestBed } from "@angular/core/testing";
-import { ProjectsResolver } from "./projects.resolver";
+import { DashboardProjectsData, ProjectsResolver } from "./projects.resolver";
 import { ActivatedRouteSnapshot, RouterStateSnapshot, provideRouter } from "@angular/router";
 import { signal } from "@angular/core";
-import { of } from "rxjs";
+import { Observable, of } from "rxjs";
+import { User } from "@domain/auth/user.model";
 import { ProfileInfoService } from "@api/profile/facades/profile-info.service";
 import { GetAllProjectsUseCase } from "@api/project/use-cases/get-all-projects.use-case";
 import { GetMyProjectsUseCase } from "@api/project/use-cases/get-my-projects.use-case";
 import { GetProjectSubscriptionsUseCase } from "@api/project/use-cases/get-project-subscriptions.use-case";
 
 describe("ProjectsResolver", () => {
+  const profile = signal<User | null>(null);
+  const ensureProfileLoaded = vi.fn();
   beforeEach(() => {
+    profile.set(null);
+    ensureProfileLoaded.mockClear();
     TestBed.configureTestingModule({
       providers: [
         provideRouter([]),
-        { provide: ProfileInfoService, useValue: { profile: signal(null) } },
+        { provide: ProfileInfoService, useValue: { profile, ensureProfileLoaded } },
         {
           provide: GetAllProjectsUseCase,
           useValue: {
@@ -50,6 +55,25 @@ describe("ProjectsResolver", () => {
     });
   });
 
+  it("waits for the loaded user on a direct visit and completes after one snapshot", () => {
+    const result = TestBed.runInInjectionContext(() =>
+      ProjectsResolver({} as ActivatedRouteSnapshot, {} as RouterStateSnapshot),
+    ) as Observable<DashboardProjectsData>;
+    const next = vi.fn();
+    const complete = vi.fn();
+    result.subscribe({ next, complete });
+    TestBed.flushEffects();
+    expect(ensureProfileLoaded).toHaveBeenCalledOnce();
+    expect(next).not.toHaveBeenCalled();
+    profile.set({ id: 1 } as User);
+    TestBed.flushEffects();
+    expect(next).toHaveBeenCalledOnce();
+    expect(complete).toHaveBeenCalledOnce();
+    profile.set({ id: 2 } as User);
+    TestBed.flushEffects();
+    expect(next).toHaveBeenCalledOnce();
+  });
+
   it("should be created", () => {
     const result = TestBed.runInInjectionContext(() =>
       ProjectsResolver({} as ActivatedRouteSnapshot, {} as RouterStateSnapshot),
diff --git a/projects/social_platform/src/app/ui/pages/projects/projects.resolver.ts b/projects/social_platform/src/app/ui/pages/projects/projects.resolver.ts
index a686bec14..97eb7a091 100644
--- a/projects/social_platform/src/app/ui/pages/projects/projects.resolver.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/projects.resolver.ts
@@ -1,7 +1,7 @@
 /** @format */
 
 import { inject, Injector } from "@angular/core";
-import { forkJoin, map, switchMap } from "rxjs";
+import { filter, forkJoin, map, switchMap, take } from "rxjs";
 import { ResolveFn } from "@angular/router";
 import { HttpParams } from "@angular/common/http";
 import { ApiPagination } from "@domain/other/api-pagination.model";
@@ -34,7 +34,10 @@ export const ProjectsResolver: ResolveFn<DashboardProjectsData> = () => {
     results: [],
   });
 
+  profileInfoService.ensureProfileLoaded();
   return toObservable(profileInfoService.profile, { injector }).pipe(
+    filter(user => user !== null),
+    take(1),
     switchMap(user =>
       forkJoin({
         all: getAllProjectsUseCase
@@ -44,7 +47,7 @@ export const ProjectsResolver: ResolveFn<DashboardProjectsData> = () => {
           .execute(new HttpParams({ fromObject: { offset: 0, limit: 16 } }))
           .pipe(map(result => (result.ok ? result.value : emptyProjectsPage()))),
         subs: getProjectSubscriptionsUseCase
-          .execute(user!.id)
+          .execute(user.id)
           .pipe(map(result => (result.ok ? result.value : emptyProjectsPage()))),
       }),
     ),
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.scss
index f606c7657..6f713f1a0 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/components/vacancy-ui";
 
 :host {
@@ -41,3 +40,20 @@
     @include vacancy-ui.secondary;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .content {
+    h2 {
+      font-size: var(--ui-font-body);
+    }
+
+    &__description {
+      font-size: var(--ui-font-body);
+    }
+
+    &__empty {
+      font-size: var(--ui-font-body);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
index dd4949dab..6c595b593 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/components/vacancy-ui";
 
 :host {
@@ -68,3 +67,24 @@
     @include vacancy-ui.link;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .conditions {
+    h2 {
+      font-size: var(--ui-font-body);
+    }
+
+    dt {
+      font-size: var(--ui-font-small);
+    }
+
+    dd {
+      font-size: var(--ui-font-body);
+    }
+
+    a {
+      font-size: var(--ui-font-body);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.html b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.html
index 5305b0b73..1a3973a3d 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.html
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.html
@@ -1,113 +1,233 @@
 <!-- @format -->
-
-<section class="responses" aria-labelledby="vacancy-responses-title">
-  <header class="responses__header">
-    <h2 id="vacancy-responses-title" class="responses__title" tabindex="-1" cdkFocusInitial>
-      Отклики на вакансию
-    </h2>
-    <button
-      type="button"
-      class="responses__close"
-      aria-label="Закрыть отклики"
-      (click)="close.emit()"
-    >
-      <i appIcon icon="cross" appSquare="12" aria-hidden="true"></i>
-    </button>
-  </header>
-  @if (loading()) {
-    <p class="responses__state" role="status">Загрузка откликов…</p>
-  }
-  @if (error(); as loadError) {
-    <div class="responses__state" role="alert">
-      <p>{{ errorMessage(loadError) }}</p>
-      <app-button size="medium" appearance="outline" (click)="retry.emit()">Повторить</app-button>
-    </div>
-  } @else if (!loading() && responses().length === 0) {
-    <p class="responses__state">На эту вакансию пока нет откликов</p>
-  } @else {
-    <div class="responses__list">
-      @for (response of responses(); track response.id) {
-        <article class="response">
-          <header class="response__candidate" #candidateHeader tabindex="-1">
-            <div class="response__identity">
-              @if (response.user; as user) {
-                <app-avatar [size]="48" [url]="user.avatar ?? ''"></app-avatar>
-                <div class="response__identity-text">
-                  <h3 class="response__name">{{ user.firstName }} {{ user.lastName }}</h3>
-                  @if (user.specialization?.name; as specialization) {
-                    <p class="response__specialization">{{ specialization }}</p>
-                  }
-                </div>
-              } @else {
-                <h3 class="response__name">Кандидат</h3>
-              }
-            </div>
-            <div class="response__meta">
-              <app-vacancy-status
-                [label]="
-                  response.isApproved === true
-                    ? 'Принят'
-                    : response.isApproved === false
-                      ? 'Отклонён'
-                      : 'Ожидает решения'
-                "
-                [tone]="
-                  response.isApproved === true
-                    ? 'success'
-                    : response.isApproved === false
-                      ? 'declined'
-                      : 'pending'
-                "
-              ></app-vacancy-status>
-              @if (response.datetimeCreated) {
-                <p class="response__date">
-                  Отклик от {{ response.datetimeCreated | date: "dd.MM.yyyy" }}
-                </p>
-              }
-            </div>
-          </header>
-          <app-vacancy-skills
-            [skills]="response.user?.skills || []"
-            [limit]="6"
-          ></app-vacancy-skills>
-          <section class="response__section">
-            <h4 class="response__label">Сопроводительное письмо</h4>
-            <app-vacancy-letter [text]="response.whyMe || ''"></app-vacancy-letter>
-          </section>
-          @if (response.accompanyingFile; as file) {
-            <div class="response__file-row">
-              <span>Приложенный файл:</span>
-              <a
-                class="response__file"
-                [href]="file.link"
-                target="_blank"
-                rel="noopener noreferrer"
-                >{{ file.name || "Открыть файл" }}</a
-              >
-            </div>
-          }
-          @if (response.isApproved === null) {
-            <div class="response__actions">
-              <app-button
-                size="big"
-                appearance="outline"
-                color="red"
-                [disabled]="loading() || isProcessing(response.id)"
-                [loader]="isProcessing(response.id)"
-                (click)="decide(response.id, false, candidateHeader)"
-                >отклонить</app-button
-              >
-              <app-button
-                size="big"
-                [disabled]="loading() || isProcessing(response.id)"
-                [loader]="isProcessing(response.id)"
-                (click)="decide(response.id, true, candidateHeader)"
-                >принять</app-button
-              >
-            </div>
-          }
-        </article>
-      }
-    </div>
-  }
-</section>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <section class="responses" aria-labelledby="vacancy-responses-title">
+    <header class="responses__header">
+      <h2 id="vacancy-responses-title" class="responses__title" tabindex="-1" cdkFocusInitial>
+        Отклики на вакансию
+      </h2>
+      <button
+        type="button"
+        class="responses__close"
+        aria-label="Закрыть отклики"
+        (click)="close.emit()"
+      >
+        <i appIcon icon="cross" appSquare="12" aria-hidden="true"></i>
+      </button>
+    </header>
+    @if (loading()) {
+      <p class="responses__state" role="status">Загрузка откликов…</p>
+    }
+    @if (error(); as loadError) {
+      <div class="responses__state" role="alert">
+        <p>{{ errorMessage(loadError) }}</p>
+        <app-button size="medium" appearance="outline" (click)="retry.emit()">Повторить</app-button>
+      </div>
+    } @else if (!loading() && responses().length === 0) {
+      <p class="responses__state">На эту вакансию пока нет откликов</p>
+    } @else {
+      <div class="responses__list">
+        @for (response of responses(); track response.id) {
+          <article class="response">
+            <header class="response__candidate" #candidateHeader tabindex="-1">
+              <div class="response__identity">
+                @if (response.user; as user) {
+                  <app-avatar [size]="48" [url]="user.avatar ?? ''"></app-avatar>
+                  <div class="response__identity-text">
+                    <h3 class="response__name">{{ user.firstName }} {{ user.lastName }}</h3>
+                    @if (user.specialization?.name; as specialization) {
+                      <p class="response__specialization">{{ specialization }}</p>
+                    }
+                  </div>
+                } @else {
+                  <h3 class="response__name">Кандидат</h3>
+                }
+              </div>
+              <div class="response__meta">
+                <app-vacancy-status
+                  [label]="
+                    response.isApproved === true
+                      ? 'Принят'
+                      : response.isApproved === false
+                        ? 'Отклонён'
+                        : 'Ожидает решения'
+                  "
+                  [tone]="
+                    response.isApproved === true
+                      ? 'success'
+                      : response.isApproved === false
+                        ? 'declined'
+                        : 'pending'
+                  "
+                ></app-vacancy-status>
+                @if (response.datetimeCreated) {
+                  <p class="response__date">
+                    Отклик от {{ response.datetimeCreated | date: "dd.MM.yyyy" }}
+                  </p>
+                }
+              </div>
+            </header>
+            <app-vacancy-skills
+              [skills]="response.user?.skills || []"
+              [limit]="6"
+            ></app-vacancy-skills>
+            <section class="response__section">
+              <h4 class="response__label">Сопроводительное письмо</h4>
+              <app-vacancy-letter [text]="response.whyMe || ''"></app-vacancy-letter>
+            </section>
+            @if (response.accompanyingFile; as file) {
+              <div class="response__file-row">
+                <span>Приложенный файл:</span>
+                <a
+                  class="response__file"
+                  [href]="file.link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >{{ file.name || "Открыть файл" }}</a
+                >
+              </div>
+            }
+            @if (response.isApproved === null) {
+              <div class="response__actions">
+                <app-button
+                  size="big"
+                  appearance="outline"
+                  color="red"
+                  [disabled]="loading() || isProcessing(response.id)"
+                  [loader]="isProcessing(response.id)"
+                  (click)="decide(response.id, false, candidateHeader)"
+                  >отклонить</app-button
+                >
+                <app-button
+                  size="big"
+                  [disabled]="loading() || isProcessing(response.id)"
+                  [loader]="isProcessing(response.id)"
+                  (click)="decide(response.id, true, candidateHeader)"
+                  >принять</app-button
+                >
+              </div>
+            }
+          </article>
+        }
+      </div>
+    }
+  </section>
+} @else {
+  <section class="responses" aria-labelledby="vacancy-responses-title">
+    <header class="responses__header">
+      <h2 id="vacancy-responses-title" class="responses__title" tabindex="-1" cdkFocusInitial>
+        Отклики на вакансию
+      </h2>
+      <button
+        appButton="icon"
+        type="button"
+        class="responses__close"
+        aria-label="Закрыть отклики"
+        (click)="close.emit()"
+      >
+        <i appIcon icon="cross" appSquare="12" aria-hidden="true"></i>
+      </button>
+    </header>
+    @if (loading()) {
+      <app-state
+        class="responses__state"
+        [compact]="true"
+        kind="loading"
+        title="Загрузка откликов…"
+      />
+    }
+    @if (error(); as loadError) {
+      <div class="responses__state" role="alert">
+        <p>{{ errorMessage(loadError) }}</p>
+        <app-button size="medium" appearance="outline" (click)="retry.emit()">Повторить</app-button>
+      </div>
+    } @else if (!loading() && responses().length === 0) {
+      <p class="responses__state">На эту вакансию пока нет откликов</p>
+    } @else {
+      <div class="responses__list">
+        @for (response of responses(); track response.id) {
+          <article class="response">
+            <header class="response__candidate" #candidateHeader tabindex="-1">
+              <div class="response__identity">
+                @if (response.user; as user) {
+                  <app-avatar [size]="48" [url]="user.avatar ?? ''"></app-avatar>
+                  <div class="response__identity-text">
+                    <h3 class="response__name">{{ user.firstName }} {{ user.lastName }}</h3>
+                    @if (user.specialization?.name; as specialization) {
+                      <p class="response__specialization">{{ specialization }}</p>
+                    }
+                  </div>
+                } @else {
+                  <h3 class="response__name">Кандидат</h3>
+                }
+              </div>
+              <div class="response__meta">
+                <app-vacancy-status
+                  [label]="
+                    response.isApproved === true
+                      ? 'Принят'
+                      : response.isApproved === false
+                        ? 'Отклонён'
+                        : 'Ожидает решения'
+                  "
+                  [tone]="
+                    response.isApproved === true
+                      ? 'success'
+                      : response.isApproved === false
+                        ? 'declined'
+                        : 'pending'
+                  "
+                ></app-vacancy-status>
+                @if (response.datetimeCreated) {
+                  <p class="response__date">
+                    Отклик от {{ response.datetimeCreated | date: "dd.MM.yyyy" }}
+                  </p>
+                }
+              </div>
+            </header>
+            <app-vacancy-skills
+              [skills]="response.user?.skills || []"
+              [limit]="6"
+            ></app-vacancy-skills>
+            <section class="response__section">
+              <h4 class="response__label">Сопроводительное письмо</h4>
+              <app-vacancy-letter [text]="response.whyMe || ''"></app-vacancy-letter>
+            </section>
+            @if (response.accompanyingFile; as file) {
+              <div class="response__file-row">
+                <span>Приложенный файл:</span>
+                <a
+                  class="response__file"
+                  [href]="file.link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >{{ file.name || "Открыть файл" }}</a
+                >
+              </div>
+            }
+            @if (response.isApproved === null) {
+              <div class="response__actions">
+                <app-button
+                  size="big"
+                  appearance="outline"
+                  color="red"
+                  [disabled]="loading() || isProcessing(response.id)"
+                  [loader]="isProcessing(response.id)"
+                  (click)="decide(response.id, false, candidateHeader)"
+                  >отклонить</app-button
+                >
+                <app-button
+                  size="big"
+                  [disabled]="loading() || isProcessing(response.id)"
+                  [loader]="isProcessing(response.id)"
+                  (click)="decide(response.id, true, candidateHeader)"
+                  >принять</app-button
+                >
+              </div>
+            }
+          </article>
+        }
+      </div>
+    }
+  </section>
+}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
index 330b7c134..722ab00e0 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/components/vacancy-ui";
 
 ::ng-deep .modal__body.vacancy-responses-modal {
@@ -178,3 +177,57 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .responses {
+    &__title {
+      font-size: var(--ui-font-h2);
+    }
+
+    &__state {
+      font-size: var(--ui-font-body);
+    }
+  }
+
+  .response {
+    &__name {
+      font-size: var(--ui-font-h3);
+    }
+
+    &__specialization,
+    &__date {
+      font-size: var(--ui-font-small);
+    }
+
+    &__meta {
+      align-items: flex-end;
+    }
+
+    &__label {
+      font-size: var(--ui-font-body);
+    }
+
+    &__file-row {
+      font-size: var(--ui-font-body);
+    }
+
+    &__actions {
+      app-button {
+        flex-basis: 160px;
+      }
+    }
+
+    @media (max-width: 520px) {
+      &__meta {
+        align-items: flex-start;
+      }
+
+      &__actions {
+        app-button {
+          flex-basis: auto;
+        }
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.ts b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.ts
index 1463ad0cd..5728352ca 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.ts
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, StateComponent } from "@uilib";
+
 import { DatePipe } from "@angular/common";
 import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
 import { VacancyResponsesLoadError } from "@api/vacancy/vacancy-response-error";
@@ -14,6 +19,8 @@ import { VacancyLetterComponent } from "@ui/widgets/vacancy-letter/vacancy-lette
   templateUrl: "./vacancy-responses.component.html",
   styleUrl: "./vacancy-responses.component.scss",
   imports: [
+    StateComponent,
+    ButtonDirective,
     AvatarComponent,
     ButtonComponent,
     IconComponent,
@@ -25,6 +32,8 @@ import { VacancyLetterComponent } from "@ui/widgets/vacancy-letter/vacancy-lette
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VacancyResponsesComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly responses = input<VacancyResponse[]>([]);
   readonly loading = input(false);
   readonly error = input<VacancyResponsesLoadError | null>(null);
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/info.component.html b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/info.component.html
index f155539af..29cc8f540 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/info.component.html
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/info.component.html
@@ -1,136 +1,273 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  @if (vacancy()) {
+    <div class="vacancy">
+      <div class="vacancy__split">
+        <app-vacancies-left-side [vacancy]="vacancy()"></app-vacancies-left-side>
 
-@if (vacancy()) {
-  <div class="vacancy">
-    <div class="vacancy__split">
-      <app-vacancies-left-side [vacancy]="vacancy()"></app-vacancies-left-side>
-
-      <app-vacancies-right-side
-        [vacancy]="vacancy()"
-        (sendResponse)="onOpenResponseModal()"
-        (manageResponses)="onOpenResponses()"
-      ></app-vacancies-right-side>
+        <app-vacancies-right-side
+          [vacancy]="vacancy()"
+          (sendResponse)="onOpenResponseModal()"
+          (manageResponses)="onOpenResponses()"
+        ></app-vacancies-right-side>
+      </div>
     </div>
-  </div>
-
-  @defer (when openModal()) {
-    <app-modal
-      [open]="openModal()"
-      bodyClass="vacancy-response-modal"
-      (openChange)="closeSendResponseModal()"
-    >
-      <div class="cancel">
-        <div class="lists__section">
-          <p class="text-body-12 lists__title">отклик на вакансию</p>
-          <i appIcon icon="squiz" class="lists__icon" appSquare="12"></i>
-        </div>
 
-        <form class="vacancy__form" [formGroup]="sendForm" (ngSubmit)="onSubmit()">
-          @if (sendForm.get("whyMe"); as whyMe) {
-            <fieldset>
-              <label for="whyMe" class="field-label text-body-10">сопроводительное письмо</label>
-              <app-textarea
-                size="big"
-                id="whyMe"
-                formControlName="whyMe"
-                [error]="whyMe | controlError"
-                placeholder="Проект начал свое существование с 2020 года"
-                [maxLength]="2000"
-              ></app-textarea>
-              @if (whyMe | controlError: "required") {
-                <div class="text-body-10 error">
-                  {{ errorMessage.VALIDATION_REQUIRED }}
-                </div>
-              }
-              @if (whyMe | controlError: "maxlength") {
-                <div class="text-body-10 error">
-                  {{ errorMessage.VALIDATION_TOO_LONG }}
-                  @if (whyMe.errors) {
-                    {{ whyMe.errors["maxlength"]["requiredLength"] }}
-                  }
-                </div>
-              }
-              @if (whyMe | controlError: "minlength") {
-                <div class="text-body-10 error">
-                  {{ errorMessage.VALIDATION_TOO_SHORT }}
-                  @if (whyMe.errors) {
-                    {{ whyMe.errors["minlength"]["requiredLength"] }}
-                  }
-                </div>
-              }
-            </fieldset>
-          }
-
-          <app-button
-            data-testid="attach-procollab-cv"
-            [disabled]="procollabCvLoading() || !!sendForm.controls.accompanyingFile.value"
-            [loader]="procollabCvLoading()"
-            (click)="onAttachProcollabCv()"
-            size="big"
-            class="text-body-12"
-            appearance="outline"
-            >прикрепить резюме PROCOLLAB</app-button
-          >
-
-          <p class="vacancy__form--or text-body-12">или</p>
-
-          @if (sendForm.get("accompanyingFile"); as accompanyingFile) {
-            <div
-              class="vacancy__form--cv"
-              [class.vacancy__form-error]="accompanyingFile | controlError: 'required'"
+    @defer (when openModal()) {
+      <app-modal
+        [open]="openModal()"
+        bodyClass="vacancy-response-modal"
+        (openChange)="closeSendResponseModal()"
+      >
+        <div class="cancel">
+          <div class="lists__section">
+            <p class="text-body-12 lists__title">отклик на вакансию</p>
+            <i appIcon icon="squiz" class="lists__icon" appSquare="12"></i>
+          </div>
+
+          <form class="vacancy__form" [formGroup]="sendForm" (ngSubmit)="onSubmit()">
+            @if (sendForm.get("whyMe"); as whyMe) {
+              <fieldset>
+                <label for="whyMe" class="field-label text-body-10">сопроводительное письмо</label>
+                <app-textarea
+                  size="big"
+                  id="whyMe"
+                  formControlName="whyMe"
+                  [error]="whyMe | controlError"
+                  placeholder="Проект начал свое существование с 2020 года"
+                  [maxLength]="2000"
+                ></app-textarea>
+                @if (whyMe | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+                @if (whyMe | controlError: "maxlength") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_TOO_LONG }}
+                    @if (whyMe.errors) {
+                      {{ whyMe.errors["maxlength"]["requiredLength"] }}
+                    }
+                  </div>
+                }
+                @if (whyMe | controlError: "minlength") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_TOO_SHORT }}
+                    @if (whyMe.errors) {
+                      {{ whyMe.errors["minlength"]["requiredLength"] }}
+                    }
+                  </div>
+                }
+              </fieldset>
+            }
+
+            <app-button
+              data-testid="attach-procollab-cv"
+              [disabled]="procollabCvLoading() || !!sendForm.controls.accompanyingFile.value"
+              [loader]="procollabCvLoading()"
+              (click)="onAttachProcollabCv()"
+              size="big"
+              class="text-body-12"
+              appearance="outline"
+              >прикрепить резюме PROCOLLAB</app-button
             >
-              <app-upload-file
-                [error]="accompanyingFile | controlError"
-                id="accompanyingFile"
-                formControlName="accompanyingFile"
-                accept=".pdf, .docx"
+
+            <p class="vacancy__form--or text-body-12">или</p>
+
+            @if (sendForm.get("accompanyingFile"); as accompanyingFile) {
+              <div
+                class="vacancy__form--cv"
+                [class.vacancy__form-error]="accompanyingFile | controlError: 'required'"
               >
-                <ng-container emptyPlaceholder>
-                  <div class="vacancy__form--cv-empty">
-                    <i appIcon icon="file" appSquare="10"></i>
-                    <p class="text-body-12 vacancy__form--cv-text">
-                      файл резюме в формате <br />.pdf, .word весом до 50МБ
-                    </p>
-                  </div>
-                  @if (accompanyingFile | controlError: "required") {
-                    <p class="error text-body-10">загрузите файл</p>
-                  }
-                </ng-container>
-              </app-upload-file>
-            </div>
-          }
-
-          <app-button
-            size="big"
-            [loader]="sendFormIsSubmitting()"
-            [disabled]="procollabCvLoading()"
-            type="submit"
-            >отправить отклик</app-button
-          >
-        </form>
-      </div>
-    </app-modal>
+                <app-upload-file
+                  [error]="accompanyingFile | controlError"
+                  id="accompanyingFile"
+                  formControlName="accompanyingFile"
+                  accept=".pdf, .docx"
+                >
+                  <ng-container emptyPlaceholder>
+                    <div class="vacancy__form--cv-empty">
+                      <i appIcon icon="file" appSquare="10"></i>
+                      <p class="text-body-12 vacancy__form--cv-text">
+                        файл резюме в формате <br />.pdf, .word весом до 50МБ
+                      </p>
+                    </div>
+                    @if (accompanyingFile | controlError: "required") {
+                      <p class="error text-body-10">загрузите файл</p>
+                    }
+                  </ng-container>
+                </app-upload-file>
+              </div>
+            }
+
+            <app-button
+              size="big"
+              [loader]="sendFormIsSubmitting()"
+              [disabled]="procollabCvLoading()"
+              type="submit"
+              >отправить отклик</app-button
+            >
+          </form>
+        </div>
+      </app-modal>
+    }
+
+    @defer (when responsesModal()) {
+      @if (responsesModal()) {
+        <app-modal
+          [open]="responsesModal()"
+          labelledBy="vacancy-responses-title"
+          bodyClass="vacancy-responses-modal"
+          (openChange)="onCloseResponses()"
+        >
+          <app-vacancy-responses
+            [responses]="responses()"
+            [loading]="responsesLoading()"
+            [error]="responsesError()"
+            [processingResponseIds]="processingResponseIds()"
+            (retry)="onRetryResponses()"
+            (accept)="onAcceptResponse($event)"
+            (decline)="onDeclineResponse($event)"
+            (close)="onCloseResponses()"
+          ></app-vacancy-responses>
+        </app-modal>
+      }
+    }
   }
+} @else {
+  @if (vacancy()) {
+    <div class="vacancy">
+      <div class="vacancy__split">
+        <app-vacancies-left-side [vacancy]="vacancy()"></app-vacancies-left-side>
+
+        <app-vacancies-right-side
+          [vacancy]="vacancy()"
+          (sendResponse)="onOpenResponseModal()"
+          (manageResponses)="onOpenResponses()"
+        ></app-vacancies-right-side>
+      </div>
+    </div>
 
-  @defer (when responsesModal()) {
-    @if (responsesModal()) {
+    @defer (when openModal()) {
       <app-modal
-        [open]="responsesModal()"
-        labelledBy="vacancy-responses-title"
-        bodyClass="vacancy-responses-modal"
-        (openChange)="onCloseResponses()"
+        [open]="openModal()"
+        bodyClass="vacancy-response-modal"
+        (openChange)="closeSendResponseModal()"
       >
-        <app-vacancy-responses
-          [responses]="responses()"
-          [loading]="responsesLoading()"
-          [error]="responsesError()"
-          [processingResponseIds]="processingResponseIds()"
-          (retry)="onRetryResponses()"
-          (accept)="onAcceptResponse($event)"
-          (decline)="onDeclineResponse($event)"
-          (close)="onCloseResponses()"
-        ></app-vacancy-responses>
+        <div class="cancel">
+          <div class="lists__section">
+            <p class="text-body-12 lists__title">отклик на вакансию</p>
+            <i appIcon icon="squiz" class="lists__icon" appSquare="12"></i>
+          </div>
+
+          <form appFormLayout class="vacancy__form" [formGroup]="sendForm" (ngSubmit)="onSubmit()">
+            @if (sendForm.get("whyMe"); as whyMe) {
+              <fieldset>
+                <label for="whyMe" class="field-label text-body-10">сопроводительное письмо</label>
+                <app-textarea
+                  size="big"
+                  id="whyMe"
+                  formControlName="whyMe"
+                  [error]="whyMe | controlError"
+                  placeholder="Проект начал свое существование с 2020 года"
+                  [maxLength]="2000"
+                ></app-textarea>
+                @if (whyMe | controlError: "required") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_REQUIRED }}
+                  </div>
+                }
+                @if (whyMe | controlError: "maxlength") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_TOO_LONG }}
+                    @if (whyMe.errors) {
+                      {{ whyMe.errors["maxlength"]["requiredLength"] }}
+                    }
+                  </div>
+                }
+                @if (whyMe | controlError: "minlength") {
+                  <div class="text-body-10 error">
+                    {{ errorMessage.VALIDATION_TOO_SHORT }}
+                    @if (whyMe.errors) {
+                      {{ whyMe.errors["minlength"]["requiredLength"] }}
+                    }
+                  </div>
+                }
+              </fieldset>
+            }
+
+            <app-button
+              data-testid="attach-procollab-cv"
+              [disabled]="procollabCvLoading() || !!sendForm.controls.accompanyingFile.value"
+              [loader]="procollabCvLoading()"
+              (click)="onAttachProcollabCv()"
+              size="big"
+              class="text-body-12"
+              appearance="outline"
+              >прикрепить резюме PROCOLLAB</app-button
+            >
+
+            <p class="vacancy__form--or text-body-12">или</p>
+
+            @if (sendForm.get("accompanyingFile"); as accompanyingFile) {
+              <div
+                class="vacancy__form--cv"
+                [class.vacancy__form-error]="accompanyingFile | controlError: 'required'"
+              >
+                <app-upload-file
+                  [error]="accompanyingFile | controlError"
+                  id="accompanyingFile"
+                  formControlName="accompanyingFile"
+                  accept=".pdf, .docx"
+                >
+                  <ng-container emptyPlaceholder>
+                    <div class="vacancy__form--cv-empty">
+                      <i appIcon icon="file" appSquare="10"></i>
+                      <p class="text-body-12 vacancy__form--cv-text">
+                        файл резюме в формате <br />.pdf, .word весом до 50МБ
+                      </p>
+                    </div>
+                    @if (accompanyingFile | controlError: "required") {
+                      <p class="error text-body-10">загрузите файл</p>
+                    }
+                  </ng-container>
+                </app-upload-file>
+              </div>
+            }
+
+            <app-button
+              size="big"
+              [loader]="sendFormIsSubmitting()"
+              [disabled]="procollabCvLoading()"
+              type="submit"
+              >отправить отклик</app-button
+            >
+          </form>
+        </div>
       </app-modal>
     }
+
+    @defer (when responsesModal()) {
+      @if (responsesModal()) {
+        <app-modal
+          [open]="responsesModal()"
+          labelledBy="vacancy-responses-title"
+          bodyClass="vacancy-responses-modal"
+          (openChange)="onCloseResponses()"
+        >
+          <app-vacancy-responses
+            [responses]="responses()"
+            [loading]="responsesLoading()"
+            [error]="responsesError()"
+            [processingResponseIds]="processingResponseIds()"
+            (retry)="onRetryResponses()"
+            (accept)="onAcceptResponse($event)"
+            (decline)="onDeclineResponse($event)"
+            (close)="onCloseResponses()"
+          ></app-vacancy-responses>
+        </app-modal>
+      }
+    }
   }
 }
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/info.component.ts b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/info.component.ts
index 0d01e3add..7ccaa418e 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/info.component.ts
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/info.component.ts
@@ -1,9 +1,12 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { ButtonComponent } from "@ui/primitives";
 import { ModalComponent } from "@ui/primitives/modal/modal.component";
-import { IconComponent } from "@uilib";
+import { IconComponent, FormLayoutDirective } from "@uilib";
 import { ReactiveFormsModule } from "@angular/forms";
 import { VacancyDetailInfoService } from "@api/vacancy/facades/vacancy-detail-info.service";
 import { VacancyDetailUIInfoService } from "@api/vacancy/facades/ui/vacancy-detail-ui-info.service";
@@ -21,6 +24,7 @@ import { VacancyResponsesComponent } from "./components/vacancy-responses/vacanc
   templateUrl: "./info.component.html",
   styleUrl: "./info.component.scss",
   imports: [
+    FormLayoutDirective,
     IconComponent,
     ButtonComponent,
     ModalComponent,
@@ -35,6 +39,8 @@ import { VacancyResponsesComponent } from "./components/vacancy-responses/vacanc
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VacancyInfoComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly vacancyDetailInfoService = inject(VacancyDetailInfoService);
   private readonly vacancyDetailUIInfoService = inject(VacancyDetailUIInfoService);
 
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss
index eb006e061..1b92a599c 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/vacancies-detail.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/components/vacancy-ui";
 
 :host {
@@ -86,3 +85,24 @@
     min-width: 0;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .detail {
+    &__heading h1 {
+      font-size: var(--ui-font-h2);
+    }
+
+    &__project {
+      font-size: var(--ui-font-body);
+    }
+
+    &__specialization {
+      font-size: var(--ui-font-body);
+    }
+
+    &__conditions {
+      font-size: var(--ui-font-body);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html
index e50457c35..a0ab05121 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html
+++ b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.html
@@ -1,38 +1,99 @@
 <!-- @format -->
-
-<div class="page" #vacancyRoot>
-  @if (type() === "all") {
-    <div class="page__vacancies">
-      @for (vacancy of vacancyList(); track vacancy.id) {
-        <app-project-vacancy-card
-          type="vacancies"
-          [vacancy]="vacancy"
-          class="page__item"
-        ></app-project-vacancy-card>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="page" #vacancyRoot>
+    @if (type() === "all") {
+      <div class="page__vacancies">
+        @for (vacancy of vacancyList(); track vacancy.id) {
+          <app-project-vacancy-card
+            type="vacancies"
+            [vacancy]="vacancy"
+            class="page__item"
+          ></app-project-vacancy-card>
+        }
+      </div>
+      @if (hasNoResults()) {
+        <section class="page__vacancies--no-items">
+          <h2>Вакансии не найдены</h2>
+          <p>Попробуйте изменить запрос или сбросить фильтры.</p>
+          <app-button appearance="outline" size="big" [routerLink]="AppRoutes.office.vacancies()"
+            >Сбросить фильтры</app-button
+          >
+        </section>
       }
-    </div>
-    @if (hasNoResults()) {
-      <section class="page__vacancies--no-items">
-        <h2>Вакансии не найдены</h2>
-        <p>Попробуйте изменить запрос или сбросить фильтры.</p>
-        <app-button appearance="outline" size="big" [routerLink]="AppRoutes.office.vacancies()"
-          >Сбросить фильтры</app-button
-        >
-      </section>
     }
-  }
-  @if (type() === "my") {
-    @for (response of responsesList(); track response.id) {
-      <app-response-card [response]="response"></app-response-card>
-    } @empty {
-      <section class="page__vacancies--no-items">
-        <i appIcon icon="empty-chat" appSquare="38" aria-hidden="true"></i>
-        <h2>У вас пока нет откликов</h2>
-        <p>Найдите подходящую вакансию и расскажите проекту о себе.</p>
-        <app-button size="big" [routerLink]="AppRoutes.office.vacancies()"
-          >Перейти к вакансиям</app-button
-        >
-      </section>
+    @if (type() === "my") {
+      @for (response of responsesList(); track response.id) {
+        <app-response-card [response]="response"></app-response-card>
+      } @empty {
+        <section class="page__vacancies--no-items">
+          <i appIcon icon="empty-chat" appSquare="38" aria-hidden="true"></i>
+          <h2>У вас пока нет откликов</h2>
+          <p>Найдите подходящую вакансию и расскажите проекту о себе.</p>
+          <app-button size="big" [routerLink]="AppRoutes.office.vacancies()"
+            >Перейти к вакансиям</app-button
+          >
+        </section>
+      }
+    }
+  </div>
+} @else {
+  <div class="page" #vacancyRoot>
+    @if (type() === "all") {
+      <div class="page__vacancies">
+        @for (vacancy of vacancyList(); track vacancy.id) {
+          <app-project-vacancy-card
+            type="vacancies"
+            [vacancy]="vacancy"
+            class="page__item"
+          ></app-project-vacancy-card>
+        }
+      </div>
+      @if (hasNoResults()) {
+        @if (desktopLayout()) {
+          <section class="page__vacancies--no-items">
+            <h2>Вакансии не найдены</h2>
+            <p>Попробуйте изменить запрос или сбросить фильтры.</p>
+            <app-button appearance="outline" size="big" [routerLink]="AppRoutes.office.vacancies()"
+              >Сбросить фильтры</app-button
+            >
+          </section>
+        } @else {
+          <app-state
+            title="Вакансии не найдены"
+            description="Попробуйте изменить запрос или сбросить фильтры."
+          >
+            <app-button appearance="outline" size="big" [routerLink]="AppRoutes.office.vacancies()"
+              >Сбросить фильтры</app-button
+            >
+          </app-state>
+        }
+      }
+    }
+    @if (type() === "my") {
+      @for (response of responsesList(); track response.id) {
+        <app-response-card [response]="response"></app-response-card>
+      } @empty {
+        @if (desktopLayout()) {
+          <section class="page__vacancies--no-items">
+            <i appIcon icon="empty-chat" appSquare="38" aria-hidden="true"></i>
+            <h2>У вас пока нет откликов</h2>
+            <p>Найдите подходящую вакансию и расскажите проекту о себе.</p>
+            <app-button size="big" [routerLink]="AppRoutes.office.vacancies()"
+              >Перейти к вакансиям</app-button
+            >
+          </section>
+        } @else {
+          <app-state
+            title="У вас пока нет откликов"
+            description="Найдите подходящую вакансию и расскажите проекту о себе."
+          >
+            <app-button size="big" [routerLink]="AppRoutes.office.vacancies()"
+              >Перейти к вакансиям</app-button
+            >
+          </app-state>
+        }
+      }
     }
-  }
-</div>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.scss
index 20478b1e1..89fdc3696 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/components/vacancy-ui";
 
 :host {
@@ -57,3 +56,28 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .page {
+    &__vacancies {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    &__vacancies--no-items {
+      h2 {
+        font-size: var(--ui-font-h3);
+      }
+
+      p {
+        font-size: var(--ui-font-body);
+      }
+    }
+
+    @media (max-width: 1100px) {
+      &__vacancies {
+        grid-template-columns: minmax(0, 1fr);
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts
index 41652bf55..5973a80e3 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts
+++ b/projects/social_platform/src/app/ui/pages/vacancies/list/list.component.ts
@@ -1,7 +1,11 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { DesktopLayoutService, StateComponent } from "@uilib";
+
 // list.component.ts
-/** @format */
 
 import { ChangeDetectionStrategy, Component, computed, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
@@ -20,6 +24,7 @@ import { AppRoutes } from "@api/paths/app-routes";
   templateUrl: "./list.component.html",
   styleUrl: "./list.component.scss",
   imports: [
+    StateComponent,
     CommonModule,
     ResponseCardComponent,
     ProjectVacancyCardComponent,
@@ -31,6 +36,9 @@ import { AppRoutes } from "@api/paths/app-routes";
   providers: [VacancyInfoService, VacancyUIInfoService],
 })
 export class VacanciesListComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
   private readonly vacancyInfoService = inject(VacancyInfoService);
   private readonly vacancyUIInfoService = inject(VacancyUIInfoService);
 
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss
index 91fb246c7..4884d3d7d 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/list/response-card/response-card.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/components/vacancy-ui";
 
 :host {
@@ -89,3 +88,30 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .response {
+    &__role {
+      font-size: var(--ui-font-h3);
+    }
+
+    &__project {
+      font-size: var(--ui-font-body);
+    }
+
+    &__date {
+      font-size: var(--ui-font-small);
+    }
+
+    &__letter {
+      h3 {
+        font-size: var(--ui-font-body);
+      }
+    }
+
+    &__file {
+      font-size: var(--ui-font-body);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.html b/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.html
index 108e0d2b3..c54fe15e5 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.html
+++ b/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.html
@@ -1,39 +1,75 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <!-- vacancies.component.html -->
+  <!-- @format -->
 
-<!-- vacancies.component.html -->
-<!-- @format -->
+  <main class="page" [attr.aria-label]="isAll() === 'all' ? 'Вакансии' : 'Мои отклики'">
+    <div class="page__bar">
+      <app-back
+        #back
+        role="link"
+        tabindex="0"
+        (keydown.enter)="back.onClick()"
+        [namespace]="isAll() === 'all' ? 'вакансии' : 'мои отклики'"
+        [path]="isAll() === 'all' ? AppRoutes.office.feed() : AppRoutes.office.vacancies()"
+      ></app-back>
+
+      <div class="page__info" [class.page__info--my]="isAll() !== 'all'">
+        <div class="page__outlet">
+          @if (isAll() === "all") {
+            <form [formGroup]="searchForm" (submit)="onSearchSubmit()">
+              <app-search formControlName="search"></app-search>
+            </form>
+          }
+
+          <router-outlet></router-outlet>
+        </div>
 
-<main class="page" [attr.aria-label]="isAll() === 'all' ? 'Вакансии' : 'Мои отклики'">
-  <div class="page__bar">
-    <app-back
-      #back
-      role="link"
-      tabindex="0"
-      (keydown.enter)="back.onClick()"
-      [namespace]="isAll() === 'all' ? 'вакансии' : 'мои отклики'"
-      [path]="isAll() === 'all' ? AppRoutes.office.feed() : AppRoutes.office.vacancies()"
-    ></app-back>
-
-    <div class="page__info" [class.page__info--my]="isAll() !== 'all'">
-      <div class="page__outlet">
         @if (isAll() === "all") {
-          <form [formGroup]="searchForm" (submit)="onSearchSubmit()">
-            <app-search formControlName="search"></app-search>
-          </form>
+          <div class="page__left">
+            <app-vacancy-filter
+              (searchValueChange)="onSearhValueChanged($event)"
+              [searchValue]="this.searchForm.get('search')?.value!"
+              class="page__filter"
+            ></app-vacancy-filter>
+          </div>
         }
-
-        <router-outlet></router-outlet>
       </div>
+    </div>
+  </main>
+} @else {
+  <!-- vacancies.component.html -->
+  <!-- @format -->
 
-      @if (isAll() === "all") {
-        <div class="page__left">
-          <app-vacancy-filter
-            (searchValueChange)="onSearhValueChanged($event)"
-            [searchValue]="this.searchForm.get('search')?.value!"
-            class="page__filter"
-          ></app-vacancy-filter>
+  <main class="page" [attr.aria-label]="isAll() === 'all' ? 'Вакансии' : 'Мои отклики'">
+    <div class="page__bar">
+      <app-page-header
+        [title]="isAll() === 'all' ? 'вакансии' : 'мои отклики'"
+        [backRoute]="isAll() === 'all' ? AppRoutes.office.feed() : AppRoutes.office.vacancies()"
+      />
+
+      <div class="page__info" [class.page__info--my]="isAll() !== 'all'">
+        <div class="page__outlet">
+          @if (isAll() === "all") {
+            <form appFormLayout [formGroup]="searchForm" (submit)="onSearchSubmit()">
+              <app-search formControlName="search"></app-search>
+            </form>
+          }
+
+          <router-outlet></router-outlet>
         </div>
-      }
+
+        @if (isAll() === "all") {
+          <div class="page__left">
+            <app-vacancy-filter
+              (searchValueChange)="onSearhValueChanged($event)"
+              [searchValue]="this.searchForm.get('search')?.value!"
+              class="page__filter"
+            ></app-vacancy-filter>
+          </div>
+        }
+      </div>
     </div>
-  </div>
-</main>
+  </main>
+}
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.spec.ts b/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.spec.ts
index 3ae7f3cf6..202fac254 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.spec.ts
@@ -76,17 +76,17 @@ describe("VacanciesComponent", () => {
     expect(component).toBeTruthy();
   });
 
-  it("показывает название раздела в стандартной кнопке возврата без второго заголовка", () => {
-    expect(fixture.nativeElement.querySelector("app-back .back span").textContent.trim()).toBe(
+  it("показывает название раздела в общем Page Header", () => {
+    expect(fixture.nativeElement.querySelector("app-page-header h1").textContent.trim()).toBe(
       "вакансии",
     );
-    expect(fixture.nativeElement.querySelector("main h1")).toBeNull();
+    expect(fixture.nativeElement.querySelectorAll("main h1")).toHaveLength(1);
 
     listType.set("my");
     fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector("app-back .back span").textContent.trim()).toBe(
+    expect(fixture.nativeElement.querySelector("app-page-header h1").textContent.trim()).toBe(
       "мои отклики",
     );
-    expect(fixture.nativeElement.querySelector("main h1")).toBeNull();
+    expect(fixture.nativeElement.querySelectorAll("main h1")).toHaveLength(1);
   });
 });
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.ts b/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.ts
index e5bdb88a7..483c3b734 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.ts
+++ b/projects/social_platform/src/app/ui/pages/vacancies/vacancies.component.ts
@@ -1,12 +1,14 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 // vacancies.component.ts
-/** @format */
 
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router, RouterOutlet } from "@angular/router";
-import { BackComponent } from "@uilib";
+import { BackComponent, FormLayoutDirective, PageHeaderComponent } from "@uilib";
 import { SearchComponent } from "@ui/primitives/search/search.component";
 import { ReactiveFormsModule } from "@angular/forms";
 import { VacancyFilterComponent } from "@ui/widgets/vacancy-filter/vacancy-filter.component";
@@ -20,6 +22,8 @@ import { AppRoutes } from "@api/paths/app-routes";
   templateUrl: "./vacancies.component.html",
   styleUrl: "./vacancies.component.scss",
   imports: [
+    PageHeaderComponent,
+    FormLayoutDirective,
     CommonModule,
     RouterOutlet,
     BackComponent,
@@ -31,6 +35,8 @@ import { AppRoutes } from "@api/paths/app-routes";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VacanciesComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   protected readonly AppRoutes = AppRoutes;
   private readonly vacancyInfoService = inject(VacancyInfoService);
   private readonly vacancyUIInfoService = inject(VacancyUIInfoService);
diff --git a/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.html b/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.html
index b28f429ef..d78c42752 100644
--- a/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.html
+++ b/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.html
@@ -1,69 +1,148 @@
 <!-- @format -->
-
-<div class="field" (clickOutside)="onClickOutside()">
-  <div class="field__input-wrapper">
-    <input
-      #input
-      type="text"
-      [value]="inputValue()"
-      (input)="onInput($event)"
-      (blur)="onBlur()"
-      [disabled]="disabled()"
-      [placeholder]="value() ? '' : placeholder()"
-      [class]="slimVersion() ? 'field__input-slim' : 'field__input'"
-      [class.field__input--no-icon]="!searchIcon()"
-      [class.field__input--error]="error()"
-    />
-    @if (fieldToDisplayMode() === "chip" && value()) {
-      <div class="field__chip">
-        <span class="text-body-12">{{ $any(value())[fieldToDisplay()] || value() }}</span>
-        <i appIcon icon="basket" appSquare="14" (click)="onClearValue($event)"></i>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="field" (clickOutside)="onClickOutside()">
+    <div class="field__input-wrapper">
+      <input
+        #input
+        type="text"
+        [value]="inputValue()"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+        [disabled]="disabled()"
+        [placeholder]="value() ? '' : placeholder()"
+        [class]="slimVersion() ? 'field__input-slim' : 'field__input'"
+        [class.field__input--no-icon]="!searchIcon()"
+        [class.field__input--error]="error()"
+      />
+      @if (fieldToDisplayMode() === "chip" && value()) {
+        <div class="field__chip">
+          <span class="text-body-12">{{ $any(value())[fieldToDisplay()] || value() }}</span>
+          <i appIcon icon="basket" appSquare="14" (click)="onClearValue($event)"></i>
+        </div>
+      }
+    </div>
+    <div class="field__icons">
+      @if (loading() && !slimVersion()) {
+        <app-loader
+          class="field__loading-icon"
+          type="circle"
+          color="dark-grey"
+          size="24px"
+        ></app-loader>
+      }
+      @if (searchIcon() && slimVersion()) {
+        <i appIcon [icon]="searchIcon()" appSquare="12"></i>
+      }
+      @if (searchIcon() && !slimVersion()) {
+        <i
+          (click)="openSkillsFunc.emit()"
+          [style.color]="searchIcon() === 'box' ? 'var(--accent)' : 'var(--black)'"
+          appIcon
+          [icon]="searchIcon()"
+          appSquare="16"
+        ></i>
+      }
+    </div>
+    @if (isOpen()) {
+      <div class="field__dropdown" [@dropdownAnimation]>
+        @if (noResults()) {
+          <ul class="field__dropdown--no-results">
+            <li class="text-body-12 field__option" [class.field__option-slim]="slimVersion()">
+              {{ "Ничего не найдено :(" }}
+            </li>
+          </ul>
+        } @else {
+          <ul class="field__dropdown--options">
+            @for (suggestion of suggestions; track $index) {
+              <li
+                class="text-body-12 field__option"
+                [class.field__option-slim]="slimVersion()"
+                (click)="onUpdate($event, suggestion)"
+              >
+                {{ fieldToDisplay() ? suggestion[fieldToDisplay()] : suggestion }}
+              </li>
+            }
+          </ul>
+        }
       </div>
     }
   </div>
-  <div class="field__icons">
-    @if (loading() && !slimVersion()) {
-      <app-loader
-        class="field__loading-icon"
-        type="circle"
-        color="dark-grey"
-        size="24px"
-      ></app-loader>
-    }
-    @if (searchIcon() && slimVersion()) {
-      <i appIcon [icon]="searchIcon()" appSquare="12"></i>
-    }
-    @if (searchIcon() && !slimVersion()) {
-      <i
-        (click)="openSkillsFunc.emit()"
-        [style.color]="searchIcon() === 'box' ? 'var(--accent)' : 'var(--black)'"
-        appIcon
-        [icon]="searchIcon()"
-        appSquare="16"
-      ></i>
-    }
-  </div>
-  @if (isOpen()) {
-    <div class="field__dropdown" [@dropdownAnimation]>
-      @if (noResults()) {
-        <ul class="field__dropdown--no-results">
-          <li class="text-body-12 field__option" [class.field__option-slim]="slimVersion()">
-            {{ "Ничего не найдено :(" }}
-          </li>
-        </ul>
-      } @else {
-        <ul class="field__dropdown--options">
-          @for (suggestion of suggestions; track $index) {
-            <li
-              class="text-body-12 field__option"
-              [class.field__option-slim]="slimVersion()"
-              (click)="onUpdate($event, suggestion)"
-            >
-              {{ fieldToDisplay() ? suggestion[fieldToDisplay()] : suggestion }}
-            </li>
-          }
-        </ul>
+} @else {
+  <div class="field" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+    <div class="field__input-wrapper">
+      <input
+        #input
+        type="text"
+        [value]="inputValue()"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+        [disabled]="disabled()"
+        [placeholder]="value() ? '' : placeholder()"
+        [class]="slimVersion() ? 'field__input-slim' : 'field__input'"
+        [class.field__input--no-icon]="!searchIcon()"
+        [class.field__input--error]="error()"
+      />
+      @if (fieldToDisplayMode() === "chip" && value()) {
+        <div class="field__chip">
+          <span class="text-body-12">{{ $any(value())[fieldToDisplay()] || value() }}</span>
+          <i appIcon icon="basket" appSquare="14" (click)="onClearValue($event)"></i>
+        </div>
       }
     </div>
-  }
-</div>
+    <div class="field__icons">
+      @if (loading() && !slimVersion()) {
+        <app-loader
+          class="field__loading-icon"
+          type="circle"
+          color="dark-grey"
+          size="24px"
+        ></app-loader>
+      }
+      @if (searchIcon() && slimVersion()) {
+        <i appIcon [icon]="searchIcon()" appSquare="12"></i>
+      }
+      @if (searchIcon() && !slimVersion()) {
+        <i
+          (click)="openSkillsFunc.emit()"
+          [style.color]="searchIcon() === 'box' ? 'var(--accent)' : 'var(--black)'"
+          appIcon
+          [icon]="searchIcon()"
+          appSquare="16"
+        ></i>
+      }
+    </div>
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayWidth]="origin.elementRef.nativeElement.getBoundingClientRect().width"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayViewportMargin]="12"
+      (overlayOutsideClick)="onClickOutside()"
+    >
+      <div class="field__dropdown" [@dropdownAnimation] (click)="$event.stopPropagation()">
+        @if (noResults()) {
+          <ul class="field__dropdown--no-results">
+            <li class="text-body-12 field__option" [class.field__option-slim]="slimVersion()">
+              {{ "Ничего не найдено :(" }}
+            </li>
+          </ul>
+        } @else {
+          <ul class="field__dropdown--options">
+            @for (suggestion of suggestions; track $index) {
+              <li
+                class="text-body-12 field__option"
+                [class.field__option-slim]="slimVersion()"
+                (click)="onUpdate($event, suggestion)"
+              >
+                {{ fieldToDisplay() ? suggestion[fieldToDisplay()] : suggestion }}
+              </li>
+            }
+          </ul>
+        }
+      </div>
+    </ng-template>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss b/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss
index 1be8eb411..8150633f0 100644
--- a/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.scss
@@ -1,4 +1,7 @@
+/** @format */
 @use "styles/typography";
+@use "styles/ui-foundation";
+@use "styles/responsive";
 
 .field {
   position: relative;
@@ -52,7 +55,7 @@
     &:focus {
       border-color: var(--accent);
 
-      +&_arrow {
+      + &_arrow {
         color: var(--accent);
 
         i {
@@ -148,3 +151,104 @@
     margin-right: 5px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .field {
+    &__input {
+      &:focus {
+        box-shadow: var(--ui-focus-ring);
+      }
+
+      @include ui-foundation.control;
+    }
+
+    &__input-slim {
+      font-size: var(--ui-font-small);
+
+      &:focus {
+        + &_arrow {
+          color: var(--accent);
+
+          i {
+            transform: rotate(0);
+          }
+        }
+      }
+
+      @include ui-foundation.control;
+    }
+
+    &__dropdown {
+      position: relative;
+
+      &--options,
+      &--no-results {
+        max-height: min(300px, calc(var(--visual-viewport-height, 100dvh) - 24px));
+        overscroll-behavior: contain;
+      }
+    }
+  }
+
+  :host {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .field,
+  .search,
+  .search__input {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @include responsive.apply-mobile {
+    .field__input,
+    .field__input-slim,
+    .search__input input {
+      min-width: 0;
+      max-width: 100%;
+      min-height: 44px;
+      font-size: var(--ui-font-h3);
+    }
+
+    .field--small,
+    .field__input--small {
+      min-width: 0;
+    }
+
+    .field__input--with-tooltip {
+      padding-right: 44px;
+    }
+
+    .field__option {
+      min-height: 44px;
+      overflow-wrap: anywhere;
+    }
+
+    .field__chip {
+      max-width: calc(100% - 44px);
+    }
+
+    .field__chip span {
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .field__calendar-button {
+      right: 4px;
+      width: 44px;
+      height: 44px;
+    }
+
+    .field__input[type="date"] {
+      padding-right: 48px;
+    }
+  }
+
+  .field__input,
+  .field__input-slim {
+    padding-right: 44px;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.ts b/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.ts
index d23c2cca2..86bf2f98d 100644
--- a/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/autocomplete-input/autocomplete-input.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
@@ -16,16 +19,16 @@ import {
 } from "@angular/core";
 import { IconComponent } from "@uilib";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
-import { ClickOutsideModule } from "ng-click-outside";
 import { debounce, distinctUntilChanged, of, Subject, timer } from "rxjs";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { animate, style, transition, trigger } from "@angular/animations";
 import { LoaderComponent } from "../loader/loader.component";
 import { Skill } from "@domain/skills/skill.model";
+import { ConnectedPosition, OverlayModule } from "@angular/cdk/overlay";
 
 @Component({
   selector: "app-autocomplete-input",
-  imports: [CommonModule, IconComponent, ClickOutsideModule, LoaderComponent],
+  imports: [CommonModule, IconComponent, LoaderComponent, OverlayModule],
   templateUrl: "./autocomplete-input.component.html",
   styleUrl: "./autocomplete-input.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -47,6 +50,8 @@ import { Skill } from "@domain/skills/skill.model";
   ],
 })
 export class AutoCompleteInputComponent<T> {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   @Input({ required: true }) set suggestions(val: T[]) {
     this._suggestions.set(val);
     this.handleSuggestionsChange(val);
@@ -74,6 +79,10 @@ export class AutoCompleteInputComponent<T> {
   readonly inputCleared = output();
 
   readonly inputElem = viewChild<ElementRef<HTMLInputElement>>("input");
+  readonly positions: ConnectedPosition[] = [
+    { originX: "start", originY: "bottom", overlayX: "start", overlayY: "top", offsetY: 4 },
+    { originX: "start", originY: "top", overlayX: "start", overlayY: "bottom", offsetY: -4 },
+  ];
 
   value = signal(null);
   inputValue = signal("");
diff --git a/projects/social_platform/src/app/ui/primitives/avatar-control/avatar-control.component.scss b/projects/social_platform/src/app/ui/primitives/avatar-control/avatar-control.component.scss
index 4f49ef92a..bfaa05f8a 100644
--- a/projects/social_platform/src/app/ui/primitives/avatar-control/avatar-control.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/avatar-control/avatar-control.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 .control {
@@ -179,3 +180,45 @@
     margin-top: 20px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .control {
+    &__overlay {
+      background-color: var(--ui-scrim);
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    .control__tooltip-wrapper {
+      top: 50%;
+      right: -48px;
+      display: grid;
+      place-items: center;
+      width: 44px;
+      height: 44px;
+    }
+  }
+
+  .cancel {
+    &__cropper-container {
+      background: var(--background-secondary, var(--ui-crop-surface));
+      box-shadow: var(--ui-crop-shadow);
+
+      ::ng-deep {
+        .ngx-ic-crop {
+          box-shadow: 0 0 0 9999px var(--ui-crop-scrim);
+        }
+
+        .ngx-ic-move,
+        .ngx-ic-resize {
+          box-shadow: var(--ui-crop-handle-shadow);
+        }
+
+        .ngx-ic-crop::before {
+          border-color: var(--ui-crop-border);
+        }
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.html b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.html
index 24b4ffe6e..6186737aa 100644
--- a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.html
+++ b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.html
@@ -1,33 +1,106 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="avatar">
+    <div [class.avatar--border]="hasBorder()">
+      @if (progress()) {
+        <div
+          class="avatar__progress"
+          [style.--progress]="progress()! + '%'"
+          [style.--progress-width]="'-12px'"
+          [style.--progress-color]="'var(--accent)'"
+        ></div>
+      }
 
-<div class="avatar">
-  <div [class.avatar--border]="hasBorder()">
-    @if (progress()) {
-      <div
-        class="avatar__progress"
-        [style.--progress]="progress()! + '%'"
-        [style.--progress-width]="'-12px'"
-        [style.--progress-color]="'var(--accent)'"
-      ></div>
-    }
+      <img
+        [src]="url() || placeholderUrl"
+        [style.width]="size() + 'px'"
+        [style.height]="size() + 'px'"
+        [style.border-color]="'var(--' + borderColor() + ')'"
+        alt="avatar"
+      />
 
-    <img
-      [src]="url() || placeholderUrl"
+      @if (isOnline()) {
+        <div
+          [style.width]="onlineBadgeSize() + 'px'"
+          [style.height]="onlineBadgeSize() + 'px'"
+          [style.border-width]="onlineBadgeBorder() + 'px'"
+          [style.right]="onlineBadgeOffset() + 'px'"
+          [style.bottom]="onlineBadgeOffset() + 'px'"
+          class="avatar__online"
+        ></div>
+      }
+    </div>
+  </div>
+} @else {
+  @if (desktopLayout()) {
+    <div class="avatar">
+      <div [class.avatar--border]="hasBorder()">
+        @if (progress()) {
+          <div
+            class="avatar__progress"
+            [style.--progress]="progress()! + '%'"
+            [style.--progress-width]="'-12px'"
+            [style.--progress-color]="'var(--accent)'"
+          ></div>
+        }
+
+        <img
+          [src]="url() || placeholderUrl"
+          [style.width]="size() + 'px'"
+          [style.height]="size() + 'px'"
+          [style.border-color]="'var(--' + borderColor() + ')'"
+          alt="avatar"
+        />
+
+        @if (isOnline()) {
+          <div
+            [style.width]="onlineBadgeSize() + 'px'"
+            [style.height]="onlineBadgeSize() + 'px'"
+            [style.border-width]="onlineBadgeBorder() + 'px'"
+            [style.right]="onlineBadgeOffset() + 'px'"
+            [style.bottom]="onlineBadgeOffset() + 'px'"
+            class="avatar__online"
+          ></div>
+        }
+      </div>
+    </div>
+  } @else {
+    <div
+      class="avatar"
+      [class.avatar--border]="hasBorder()"
       [style.width]="size() + 'px'"
       [style.height]="size() + 'px'"
-      [style.border-color]="'var(--' + borderColor() + ')'"
-      alt="avatar"
-    />
+    >
+      <div [class.avatar--border]="hasBorder()">
+        @if (progress()) {
+          <div
+            class="avatar__progress"
+            [style.--progress]="progress()! + '%'"
+            [style.--progress-width]="'-12px'"
+            [style.--progress-color]="'var(--accent)'"
+          ></div>
+        }
 
-    @if (isOnline()) {
-      <div
-        [style.width]="onlineBadgeSize() + 'px'"
-        [style.height]="onlineBadgeSize() + 'px'"
-        [style.border-width]="onlineBadgeBorder() + 'px'"
-        [style.right]="onlineBadgeOffset() + 'px'"
-        [style.bottom]="onlineBadgeOffset() + 'px'"
-        class="avatar__online"
-      ></div>
-    }
-  </div>
-</div>
+        <img
+          [src]="url() || placeholderUrl"
+          [style.width]="size() + 'px'"
+          [style.height]="size() + 'px'"
+          [style.border-color]="'var(--' + borderColor() + ')'"
+          alt="avatar"
+        />
+
+        @if (isOnline()) {
+          <div
+            [style.width]="onlineBadgeSize() + 'px'"
+            [style.height]="onlineBadgeSize() + 'px'"
+            [style.border-width]="onlineBadgeBorder() + 'px'"
+            [style.right]="onlineBadgeOffset() + 'px'"
+            [style.bottom]="onlineBadgeOffset() + 'px'"
+            class="avatar__online"
+          ></div>
+        }
+      </div>
+    </div>
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.scss b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.scss
index caac8a785..0f5d33b5f 100644
--- a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.scss
@@ -1,4 +1,5 @@
 /** @format */
+@use "../../../../../../ui/src/lib/components/primitives/avatar/avatar.component.scss";
 
 .avatar {
   position: relative;
@@ -10,18 +11,18 @@
     z-index: 3;
     width: 100%;
     height: 100%;
-    background:
-      conic-gradient(
-        var(--progress-color) 0 var(--progress),
-        transparent var(--progress) 100%
-      );
+    /* stylelint-disable-next-line declaration-colon-newline-after */
+    background: conic-gradient(
+      var(--progress-color) 0 var(--progress),
+      transparent var(--progress) 100%
+    );
     border-radius: 50%;
-    mask:
-      radial-gradient(
-        circle,
-        transparent calc(50% - var(--progress-width)),
-        white calc(50% - var(--progress-width))
-      );
+    /* stylelint-disable-next-line declaration-colon-newline-after */
+    mask: radial-gradient(
+      circle,
+      transparent calc(50% - var(--progress-width)),
+      white calc(50% - var(--progress-width))
+    );
   }
 
   img {
@@ -51,3 +52,5 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts
index 10dff3481..9bf733307 100644
--- a/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/avatar/avatar.component.ts
@@ -1,60 +1,15 @@
 /** @format */
 
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { AvatarComponent as CanonicalAvatar, DesktopLayoutService } from "@uilib";
 
-/**
- * Компонент для отображения аватара пользователя.
- * Поддерживает различные размеры, индикатор онлайн статуса и прогресс-бар.
- *
- * Входящие параметры:
- * - url: URL изображения аватара (обязательный)
- * - size: размер аватара в пикселях (по умолчанию 50)
- * - hasBorder: отображать рамку вокруг аватара
- * - isOnline: показывать индикатор онлайн статуса
- * - progress: значение прогресса для отображения кольца прогресса
- * - onlineBadgeSize: размер индикатора онлайн статуса (по умолчанию 16)
- * - onlineBadgeBorder: толщина рамки индикатора (по умолчанию 3)
- * - onlineBadgeOffset: смещение индикатора от края (по умолчанию 0)
- *
- * Функциональность:
- * - Автоматическая подстановка placeholder при отсутствии изображения
- * - Индикатор онлайн статуса в правом нижнем углу
- * - Кольцо прогресса вокруг аватара
- */
+/** Legacy desktop presentation with the canonical avatar inputs and mobile view. */
 @Component({
   selector: "app-avatar",
   templateUrl: "./avatar.component.html",
   styleUrl: "./avatar.component.scss",
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AvatarComponent {
-  /** URL изображения аватара */
-  url = input.required<string>();
-
-  /** Размер аватара в пикселях */
-  size = input(50);
-
-  /** Отображать рамку */
-  hasBorder = input(false);
-
-  borderColor = input<"dark-grey" | "white" | "black" | "accent">("white");
-
-  /** Показывать индикатор онлайн статуса */
-  isOnline = input(false);
-
-  /** Значение прогресса (0-100) */
-  progress = input<number>();
-
-  /** Размер индикатора онлайн статуса */
-  onlineBadgeSize = input(16);
-
-  /** Толщина рамки индикатора */
-  onlineBadgeBorder = input(3);
-
-  /** Смещение индикатора от края */
-  onlineBadgeOffset = input(0);
-
-  /** URL placeholder изображения по умолчанию */
-  placeholderUrl = "https://hwchamber.co.uk/wp-content/uploads/2022/04/avatar-placeholder.gif";
+export class AvatarComponent extends CanonicalAvatar {
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
 }
diff --git a/projects/social_platform/src/app/ui/primitives/bar/bar.component.scss b/projects/social_platform/src/app/ui/primitives/bar/bar.component.scss
index 15a85c9fb..cb6516cd9 100644
--- a/projects/social_platform/src/app/ui/primitives/bar/bar.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/bar/bar.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 .bar {
@@ -84,3 +85,23 @@
     margin-top: 45px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :host {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .bar {
+    display: flex;
+    gap: var(--ui-space-sm);
+    align-items: center;
+    min-width: 0;
+  }
+
+  app-tabs {
+    flex: 1;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/bar/bar.component.ts b/projects/social_platform/src/app/ui/primitives/bar/bar.component.ts
index dc681d128..a7f453cdd 100644
--- a/projects/social_platform/src/app/ui/primitives/bar/bar.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/bar/bar.component.ts
@@ -1,9 +1,14 @@
 /** @format */
 
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { DesktopLayoutService } from "@uilib";
+
+import { inject, ChangeDetectionStrategy, Component, input } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { RouterLink, RouterLinkActive } from "@angular/router";
-import { BackComponent } from "@uilib";
+import { BackComponent, TabsComponent } from "@uilib";
 
 /**
  * Компонент навигационной панели с табами и кнопкой "Назад".
@@ -35,12 +40,16 @@ interface BarLinks {
 /** Примитив: индикатор-полоса (progress/bar). */
 @Component({
   selector: "app-bar",
-  imports: [CommonModule, RouterLink, RouterLinkActive, BackComponent],
+  imports: [TabsComponent, CommonModule, RouterLink, RouterLinkActive, BackComponent],
   templateUrl: "./bar.component.html",
   styleUrl: "./bar.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BarComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+
   /** Массив навигационных ссылок */
   links = input.required<BarLinks[]>();
 
diff --git a/projects/social_platform/src/app/ui/primitives/button/button.component.ts b/projects/social_platform/src/app/ui/primitives/button/button.component.ts
index a7ba3107c..778530242 100644
--- a/projects/social_platform/src/app/ui/primitives/button/button.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/button/button.component.ts
@@ -1,59 +1,7 @@
-/** @format */
-
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { LoaderComponent } from "../loader/loader.component";
-
 /**
- * Универсальный компонент кнопки с различными стилями, состояниями и встроенной подсказкой.
- * Поддерживает различные цветовые схемы, индикатор загрузки, настройки внешнего вида и tooltip.
- *
- * Входящие параметры:
- * - color: цветовая схема кнопки ("primary" | "red" | "grey" | "green" | "gold" | "gradient" | "white")
- * - loader: показывать индикатор загрузки
- * - hasBorder: отображать рамку кнопки
- * - type: тип кнопки для HTML ("submit" | "reset" | "button")
- * - appearance: стиль отображения ("inline" | "outline")
- * - backgroundColor: кастомный цвет фона
- * - disabled: состояние блокировки кнопки
- * - customTypographyClass: кастомный CSS класс для типографики
+ * Compatibility export. Canonical implementation: @uilib.
  *
- * Использование:
- * - Вставлять контент кнопки через ng-content
- * - Автоматически показывает лоадер при loader=true
+ * @format
  */
-@Component({
-  selector: "app-button",
-  templateUrl: "./button.component.html",
-  styleUrl: "./button.component.scss",
-  imports: [CommonModule, LoaderComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ButtonComponent {
-  /** Цветовая схема кнопки */
-  color = input<"primary" | "red" | "grey" | "green" | "gold" | "gradient" | "white">("primary");
-
-  /** Показывать индикатор загрузки */
-  loader = input(false);
-
-  /** Размер кнопки */
-  size = input<"extra-small" | "small" | "medium" | "big">("small");
-
-  /** Отображать рамку */
-  hasBorder = input(true);
-
-  /** Тип HTML кнопки */
-  type = input<"submit" | "reset" | "button" | "icon">("button");
-
-  /** Стиль отображения */
-  appearance = input<"inline" | "outline">("inline");
-
-  /** Кастомный цвет фона */
-  backgroundColor = input<string>();
-
-  /** Состояние блокировки */
-  disabled = input(false);
 
-  /** Кастомный класс типографики */
-  customTypographyClass = input<string>();
-}
+export { ButtonComponent } from "@uilib";
diff --git a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.html b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.html
index 91aadc1ea..db91570e0 100644
--- a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.html
+++ b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.html
@@ -1,10 +1,33 @@
 <!-- @format -->
-<div class="field" [class.field--checked]="checked()" (click)="checked.set(!checked())">
-  <i
-    appIcon
-    icon="check"
-    [appWidth]="size() ?? '12'"
-    [appHeight]="size() ?? '10'"
-    class="field__check"
-  ></i>
-</div>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="field" [class.field--checked]="checked()" (click)="checked.set(!checked())">
+    <i
+      appIcon
+      icon="check"
+      [appWidth]="size() ?? '12'"
+      [appHeight]="size() ?? '10'"
+      class="field__check"
+    ></i>
+  </div>
+} @else {
+  <button
+    type="button"
+    class="field"
+    role="checkbox"
+    [attr.aria-label]="label()"
+    [attr.aria-checked]="checked()"
+    [disabled]="disabled()"
+    [class.field--checked]="checked()"
+    (click)="toggle()"
+  >
+    <i
+      appIcon
+      icon="check"
+      [appWidth]="size() ?? '12'"
+      [appHeight]="size() ?? '10'"
+      class="field__check"
+      aria-hidden="true"
+    ></i>
+  </button>
+}
diff --git a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss
index 373ebf399..2b7ddb7a8 100644
--- a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.scss
@@ -1,4 +1,6 @@
 /** @format */
+@use "styles/ui-foundation";
+@use "styles/responsive";
 
 .field {
   position: relative;
@@ -20,3 +22,36 @@
     color: var(--light-white);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .field {
+    @include ui-foundation.choice;
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-dark);
+      outline-offset: 3px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: var(--ui-disabled-opacity);
+    }
+  }
+
+  @include responsive.apply-mobile {
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 44px;
+      min-height: 44px;
+    }
+
+    .field::before {
+      position: absolute;
+      inset: -12px;
+      content: "";
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.spec.ts b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.spec.ts
index 232576785..dad9ca527 100644
--- a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.spec.ts
+++ b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.spec.ts
@@ -24,6 +24,16 @@ describe("CheckboxComponent", () => {
     expect(component).toBeTruthy();
   });
 
+  it("keeps a disabled checkbox unchanged", () => {
+    fixture.componentRef.setInput("disabled", true);
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector("button").click();
+    expect(component.checked()).toBe(false);
+    expect(fixture.nativeElement.querySelector("button").getAttribute("aria-checked")).toBe(
+      "false",
+    );
+  });
+
   it("should emit the checked value when the field is clicked", () => {
     const emitSpy = vi.fn();
     component.checked.subscribe(emitSpy);
diff --git a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.ts b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.ts
index 20f176cdd..c434e42f8 100644
--- a/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/checkbox/checkbox.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { ChangeDetectionStrategy, Component, input, model } from "@angular/core";
 import { IconComponent } from "../icon/icon.component";
 
@@ -24,8 +27,15 @@ import { IconComponent } from "../icon/icon.component";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CheckboxComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   /** Состояние чекбокса */
   checked = model(false);
 
   size = input<string>();
+  disabled = input(false);
+  label = input("Выбрать");
+  protected toggle(): void {
+    if (!this.disabled()) this.checked.set(!this.checked());
+  }
 }
diff --git a/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss b/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss
index cf8f2b9fe..92255b80c 100644
--- a/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.scss
@@ -1,3 +1,6 @@
+/** @format */
+@use "styles/responsive";
+
 .field {
   &__options {
     z-index: 1000;
@@ -86,3 +89,38 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .field {
+    &__options {
+      min-width: 0;
+      max-width: calc(100vw - 24px);
+      max-height: min(300px, calc(var(--visual-viewport-height, 100dvh) - 24px));
+      padding: var(--ui-space-sm);
+      overscroll-behavior: contain;
+      border-color: var(--ui-border);
+      border-radius: var(--ui-radius-card);
+      box-shadow: var(--ui-card-hover-shadow);
+    }
+
+    &__option {
+      width: 100%;
+      min-width: 0;
+      min-height: var(--ui-control-height);
+      padding: 8px 12px;
+      border-radius: var(--rounded-lg);
+    }
+  }
+
+  .field__option p {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  @include responsive.apply-mobile {
+    .field__option {
+      min-height: 44px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.ts b/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.ts
index a9b5ffbef..24a913cc0 100644
--- a/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/dropdown/dropdown.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { ConnectedPosition, OverlayModule } from "@angular/cdk/overlay";
 import { CommonModule } from "@angular/common";
 import {
@@ -37,6 +40,8 @@ import { IconComponent } from "../icon/icon.component";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DropdownComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   /** Состояние для определения списка элементов */
   options = input<
     {
diff --git a/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss b/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss
index b45dc26e9..086a9bb54 100644
--- a/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/file-item/file-item.component.scss
@@ -1,4 +1,5 @@
 /** @format */
+@use "styles/responsive";
 
 .file {
   display: flex;
@@ -54,3 +55,37 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .file {
+    &__left {
+      flex: 1;
+    }
+
+    &__icon {
+      flex-shrink: 0;
+    }
+  }
+
+  .file,
+  .file__left {
+    min-width: 0;
+  }
+
+  @include responsive.apply-mobile {
+    .file {
+      flex-wrap: wrap;
+    }
+
+    .file__name {
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .file__icon {
+      width: 44px;
+      height: 44px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/icon/icon.component.html b/projects/social_platform/src/app/ui/primitives/icon/icon.component.html
deleted file mode 100644
index d2c1bc46f..000000000
--- a/projects/social_platform/src/app/ui/primitives/icon/icon.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!-- @format -->
-
-<svg
-  class="icon"
-  [attr.width]="square || width"
-  [attr.height]="square || height"
-  [attr.viewBox]="viewBox"
->
-  <use [attr.xlink:href]="'assets/icons/symbol/svg/sprite.css.svg#' + icon()"></use>
-</svg>
diff --git a/projects/social_platform/src/app/ui/primitives/icon/icon.component.ts b/projects/social_platform/src/app/ui/primitives/icon/icon.component.ts
index ca7943e11..239179981 100644
--- a/projects/social_platform/src/app/ui/primitives/icon/icon.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/icon/icon.component.ts
@@ -1,99 +1,7 @@
-/** @format */
-
-import { ChangeDetectionStrategy, Component, input, Input, OnInit } from "@angular/core";
-
 /**
- * Компонент для отображения SVG иконок с настраиваемыми параметрами.
- * Поддерживает автоматическое вычисление viewBox и размеров.
- *
- * Входящие параметры:
- * - appSquare: размер квадратной иконки (автоматически устанавливает viewBox)
- * - appViewBox: кастомный viewBox для SVG
- * - appWidth: ширина иконки
- * - appHeight: высота иконки
- * - icon: имя иконки для отображения (обязательный)
+ * Compatibility export. Canonical implementation: @uilib.
  *
- * Функциональность:
- * - Автоматическое вычисление viewBox для квадратных иконок
- * - Поддержка кастомных размеров и пропорций
- * - Динамическое обновление viewBox при изменении размеров
- *
- * Использование как атрибутивная директива: <svg appIcon="icon-name">
+ * @format
  */
-@Component({
-  selector: "[appIcon]",
-  templateUrl: "./icon.component.html",
-  styleUrl: "./icon.component.scss",
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class IconComponent implements OnInit {
-  /** Размер квадратной иконки */
-  @Input()
-  set appSquare(square: string) {
-    this.square = square;
-
-    !this.viewBox && (this.viewBox = `0 0 ${square} ${square}`);
-  }
-
-  get appSquare(): string {
-    return this.square ?? "";
-  }
-
-  /** Кастомный viewBox */
-  @Input()
-  set appViewBox(viewBox: string) {
-    this.viewBox = viewBox;
-  }
-
-  get appViewBox(): string {
-    return this.viewBox ?? "0 0 0 0";
-  }
-
-  /** Ширина иконки */
-  @Input()
-  set appWidth(width: string) {
-    this.width = width;
-
-    if (this.viewBox) {
-      const viewbox = this.viewBoxInfo(this.viewBox);
-      viewbox[2] = width;
-      !this.viewBox && (this.viewBox = viewbox.join(" "));
-    }
-  }
-
-  get appWidth(): string {
-    return this.width ?? "";
-  }
-
-  /** Высота иконки */
-  @Input()
-  set appHeight(height: string) {
-    this.height = height;
-
-    if (this.viewBox) {
-      const viewbox = this.viewBoxInfo(this.viewBox);
-      viewbox[3] = height;
-      !this.viewBox && (this.viewBox = viewbox.join(" "));
-    }
-  }
-
-  get appHeight(): string {
-    return this.height ?? "";
-  }
-
-  /** Имя иконки для отображения */
-  readonly icon = input.required<string>();
-
-  square?: string;
-  viewBox?: string;
-  width?: string;
-  height?: string;
-
-  ngOnInit(): void {}
 
-  /** Парсинг параметров viewBox */
-  viewBoxInfo(viewBox: string): string[] {
-    return viewBox.split(" ");
-  }
-}
+export { IconComponent } from "@uilib";
diff --git a/projects/social_platform/src/app/ui/primitives/input/input.component.html b/projects/social_platform/src/app/ui/primitives/input/input.component.html
index f8f27f0ec..6ce102798 100644
--- a/projects/social_platform/src/app/ui/primitives/input/input.component.html
+++ b/projects/social_platform/src/app/ui/primitives/input/input.component.html
@@ -3,6 +3,8 @@
 <div
   class="field"
   [class.field--error]="error()"
+  [class.field--compact]="size() === 'small'"
+  [class.field--with-hint]="haveHint()"
   [style.width]="size() === 'small' ? '70px' : '100%'"
   (click)="focusInput()"
 >
diff --git a/projects/social_platform/src/app/ui/primitives/input/input.component.scss b/projects/social_platform/src/app/ui/primitives/input/input.component.scss
index 2ce2f1fd3..33e1da9cd 100644
--- a/projects/social_platform/src/app/ui/primitives/input/input.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/input/input.component.scss
@@ -1,7 +1,7 @@
 /** @format */
-
 @use "styles/typography";
 @use "styles/responsive";
+@use "styles/ui-foundation";
 
 .field {
   position: relative;
@@ -77,7 +77,9 @@
     cursor: pointer;
     border: 0.5px solid var(--dark-grey);
     border-radius: 50%;
-    transition: border-color 0.2s, background-color 0.2s;
+    transition:
+      border-color 0.2s,
+      background-color 0.2s;
     appearance: none;
 
     &:hover::after {
@@ -192,3 +194,130 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .field {
+    &__input {
+      &--border {
+        &:focus {
+          box-shadow: var(--ui-focus-ring);
+        }
+      }
+
+      &--error,
+      &--overflow {
+        &:focus {
+          box-shadow: var(--ui-error-ring);
+        }
+      }
+
+      @include ui-foundation.control;
+    }
+  }
+
+  :host {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .field,
+  .search,
+  .search__input {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @include responsive.apply-mobile {
+    .field__input,
+    .field__input-slim,
+    .search__input input {
+      min-width: 0;
+      max-width: 100%;
+      min-height: 44px;
+      font-size: var(--ui-font-h3);
+    }
+
+    .field--small,
+    .field__input--small {
+      min-width: 0;
+    }
+
+    .field__input--with-tooltip {
+      padding-right: 44px;
+    }
+
+    .field__option {
+      min-height: 44px;
+      overflow-wrap: anywhere;
+    }
+
+    .field__chip {
+      max-width: calc(100% - 44px);
+    }
+
+    .field__chip span {
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .field__calendar-button {
+      right: 4px;
+      width: 44px;
+      height: 44px;
+    }
+
+    .field__input[type="date"] {
+      padding-right: 48px;
+    }
+  }
+
+  .field--compact {
+    width: 100% !important;
+  }
+
+  .field__input--with-tooltip {
+    padding-right: 68px;
+  }
+
+  .field--compact .field__input--small {
+    width: 100%;
+    max-width: none;
+    padding-inline: 16px;
+    text-align: left;
+  }
+
+  .field--compact.field--with-hint .field__input,
+  .field--compact:has(.field__calendar-button) .field__input {
+    padding-right: 64px;
+  }
+
+  .field--compact.field--with-hint:has(.field__calendar-button) .field__input {
+    padding-right: 108px;
+  }
+
+  .field--compact.field--with-hint .field__calendar-button {
+    right: 48px;
+  }
+
+  .field__tooltip-wrapper--small {
+    top: 50%;
+    right: 8px;
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    background: transparent;
+    transform: translateY(-50%);
+  }
+
+  .field--compact .field__error-icon {
+    right: 16px !important;
+  }
+
+  .field--compact.field--error .field__input {
+    padding-right: 52px;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/input/input.component.ts b/projects/social_platform/src/app/ui/primitives/input/input.component.ts
index c75743d85..3e558fe5e 100644
--- a/projects/social_platform/src/app/ui/primitives/input/input.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/input/input.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, ChoiceDirective } from "@uilib";
+
 import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
@@ -35,6 +40,8 @@ import { IconComponent } from "../icon/icon.component";
     },
   ],
   imports: [
+    ButtonDirective,
+    ChoiceDirective,
     CommonModule,
     FormsModule,
     NgxMaskDirective,
@@ -48,6 +55,8 @@ import { IconComponent } from "../icon/icon.component";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InputComponent implements ControlValueAccessor {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   constructor(private readonly cdr: ChangeDetectorRef) {
     effect(() => {
       this.value = this.appValue();
diff --git a/projects/social_platform/src/app/ui/primitives/loader/loader.component.html b/projects/social_platform/src/app/ui/primitives/loader/loader.component.html
deleted file mode 100644
index f2205ee41..000000000
--- a/projects/social_platform/src/app/ui/primitives/loader/loader.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- @format -->
-<div>
-  @if (type() === "wave") {
-    <div
-      class="dot-wave"
-      [style]="
-        '--speed:' +
-        speed() +
-        ';' +
-        '--size:' +
-        size() +
-        ';' +
-        '--color:' +
-        'var(--' +
-        color() +
-        ');'
-      "
-    >
-      <div class="dot-wave__dot"></div>
-      <div class="dot-wave__dot"></div>
-      <div class="dot-wave__dot"></div>
-      <div class="dot-wave__dot"></div>
-    </div>
-  } @else if (type() === "circle") {
-    <div class="lds-ring" [style]="'--size:' + size() + ';' + '--color:' + color() + ';'">
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-  }
-</div>
diff --git a/projects/social_platform/src/app/ui/primitives/loader/loader.component.ts b/projects/social_platform/src/app/ui/primitives/loader/loader.component.ts
index bfe074fbc..389c5d110 100644
--- a/projects/social_platform/src/app/ui/primitives/loader/loader.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/loader/loader.component.ts
@@ -1,38 +1,7 @@
-/** @format */
-
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-
 /**
- * Компонент индикатора загрузки с настраиваемым внешним видом.
- * Поддерживает различные типы анимации и настройки цвета, размера, скорости.
- *
- * Входящие параметры:
- * - speed: скорость анимации (по умолчанию "1s")
- * - size: размер индикатора (по умолчанию "47px")
- * - color: цвет индикатора (по умолчанию "white")
- * - type: тип анимации ("wave" | "circle", по умолчанию "wave")
+ * Compatibility export. Canonical implementation: @uilib.
  *
- * Использование:
- * - Для показа состояния загрузки в кнопках, формах и других элементах
- * - Настраиваемый размер и цвет под дизайн приложения
+ * @format
  */
-@Component({
-  selector: "app-loader",
-  templateUrl: "./loader.component.html",
-  styleUrl: "./loader.component.scss",
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LoaderComponent {
-  /** Скорость анимации */
-  speed = input("1s");
-
-  /** Размер индикатора */
-  size = input("15px");
-
-  /** Цвет индикатора */
-  color = input("white");
 
-  /** Тип анимации */
-  type = input<"wave" | "circle">("circle");
-}
+export { LoaderComponent } from "@uilib";
diff --git a/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss b/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss
index 379c7c105..3a49defaf 100644
--- a/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/modal/modal.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 
 .modal {
@@ -47,3 +46,85 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .modal {
+    &__overlay {
+      background-color: var(--ui-backdrop);
+    }
+
+    &__body {
+      width: min(var(--ui-dialog-width, var(--ui-dialog-md)), calc(100vw - 24px));
+      min-width: 0;
+      max-width: calc(100vw - 24px);
+      max-height: calc(var(--visual-viewport-height, 100dvh) - 24px);
+      padding: var(--ui-dialog-padding);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      border-radius: var(--ui-radius-dialog);
+
+      ::ng-deep > * {
+        flex-shrink: 1;
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      @include responsive.apply-below-desktop {
+        top: calc(var(--visual-viewport-top, 0px) + var(--visual-viewport-height, 100dvh) / 2);
+        padding: var(--ui-dialog-padding);
+
+        ::ng-deep .cancel {
+          min-width: 0;
+          max-width: 100%;
+          max-height: none;
+          padding: 12px;
+        }
+
+        ::ng-deep .cancel__buttons {
+          @include responsive.mobile-actions;
+
+          position: sticky;
+          bottom: 0;
+          z-index: 2;
+          justify-content: center;
+          padding-top: 8px;
+          padding-bottom: env(safe-area-inset-bottom, 0);
+          background: var(--white);
+        }
+
+        ::ng-deep .cancel__text {
+          width: 100%;
+        }
+
+        ::ng-deep .cancel__top {
+          position: sticky;
+          top: 0;
+          z-index: 2;
+          background: var(--white);
+        }
+
+        ::ng-deep .cancel__cross {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 44px;
+          min-height: 44px;
+
+          svg {
+            max-width: 16px;
+            max-height: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  .modal__body--small {
+    --ui-dialog-width: var(--ui-dialog-sm);
+  }
+
+  .modal__body--large {
+    --ui-dialog-width: var(--ui-dialog-lg);
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/modal/modal.component.ts b/projects/social_platform/src/app/ui/primitives/modal/modal.component.ts
index 069e07012..9abb2afda 100644
--- a/projects/social_platform/src/app/ui/primitives/modal/modal.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/modal/modal.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -46,6 +49,9 @@ import { A11yModule } from "@angular/cdk/a11y";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModalComponent implements AfterViewInit, OnDestroy {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  readonly size = input<"small" | "medium" | "large">("medium");
   constructor(
     private readonly overlay: Overlay,
     private readonly viewContainerRef: ViewContainerRef,
diff --git a/projects/social_platform/src/app/ui/primitives/search/search.component.scss b/projects/social_platform/src/app/ui/primitives/search/search.component.scss
index 47bb86ff2..0a6516517 100644
--- a/projects/social_platform/src/app/ui/primitives/search/search.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/search/search.component.scss
@@ -1,4 +1,6 @@
+/** @format */
 @use "styles/responsive";
+@use "styles/ui-foundation";
 
 .search {
   display: flex;
@@ -45,3 +47,71 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .search {
+    &__input {
+      input {
+        @include ui-foundation.control;
+      }
+    }
+  }
+
+  :host {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .field,
+  .search,
+  .search__input {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @include responsive.apply-mobile {
+    .field__input,
+    .field__input-slim,
+    .search__input input {
+      min-width: 0;
+      max-width: 100%;
+      min-height: 44px;
+      font-size: var(--ui-font-h3);
+    }
+
+    .field--small,
+    .field__input--small {
+      min-width: 0;
+    }
+
+    .field__input--with-tooltip {
+      padding-right: 44px;
+    }
+
+    .field__option {
+      min-height: 44px;
+      overflow-wrap: anywhere;
+    }
+
+    .field__chip {
+      max-width: calc(100% - 44px);
+    }
+
+    .field__chip span {
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .field__calendar-button {
+      right: 4px;
+      width: 44px;
+      height: 44px;
+    }
+
+    .field__input[type="date"] {
+      padding-right: 48px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/select/select.component.html b/projects/social_platform/src/app/ui/primitives/select/select.component.html
index c7f406054..97d1d3f8c 100644
--- a/projects/social_platform/src/app/ui/primitives/select/select.component.html
+++ b/projects/social_platform/src/app/ui/primitives/select/select.component.html
@@ -1,43 +1,103 @@
 <!-- @format -->
-
-<div class="field" (clickOutside)="onClickOutside()">
-  <div
-    class="text-body-12 field__input"
-    [class.field__input--error]="error()"
-    [class.field__input--placeholder]="!selectedId && selectedId !== 0"
-    [class.field__input--open]="isOpen"
-    [class.field__input--small]="size() === 'small'"
-    [class.field__input--big]="size() === 'big'"
-    [class.field__input--disabled]="disabled"
-    (click)="isOpen = !isOpen; highlightedIndex = -1"
-  >
-    {{
-      selectedId === -1
-        ? "Ничего"
-        : selectedId || selectedId === 0
-          ? getLabel(selectedId) || placeholder()
-          : placeholder()
-    }}
-    @if (error()) {
-      <i class="field__error-icon field__error-icon--bare" appIcon icon="error" appSquare="20"></i>
-    } @else {
-      <i
-        class="field__arrow"
-        [class.field__arrow--filpped]="isOpen"
-        appIcon
-        icon="arrow-no-body"
-        appWidth="10"
-        appHeight="8"
-      ></i>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="field" (clickOutside)="onClickOutside()">
+    <div
+      class="text-body-12 field__input"
+      [class.field__input--error]="error()"
+      [class.field__input--placeholder]="!selectedId && selectedId !== 0"
+      [class.field__input--open]="isOpen"
+      [class.field__input--small]="size() === 'small'"
+      [class.field__input--big]="size() === 'big'"
+      [class.field__input--disabled]="disabled"
+      (click)="isOpen = !isOpen; highlightedIndex = -1"
+    >
+      {{
+        selectedId === -1
+          ? "Ничего"
+          : selectedId || selectedId === 0
+            ? getLabel(selectedId) || placeholder()
+            : placeholder()
+      }}
+      @if (error()) {
+        <i
+          class="field__error-icon field__error-icon--bare"
+          appIcon
+          icon="error"
+          appSquare="20"
+        ></i>
+      } @else {
+        <i
+          class="field__arrow"
+          [class.field__arrow--filpped]="isOpen"
+          appIcon
+          icon="arrow-no-body"
+          appWidth="10"
+          appHeight="8"
+        ></i>
+      }
+    </div>
+    @if (!disabled) {
+      <app-dropdown
+        [isOpen]="isOpen"
+        [options]="options()"
+        [highlightedIndex]="highlightedIndex"
+        (select)="onUpdate($event)"
+        (outside)="hideDropdown()"
+      ></app-dropdown>
     }
   </div>
-  @if (!disabled) {
-    <app-dropdown
-      [isOpen]="isOpen"
-      [options]="options()"
-      [highlightedIndex]="highlightedIndex"
-      (select)="onUpdate($event)"
-      (outside)="hideDropdown()"
-    ></app-dropdown>
-  }
-</div>
+} @else {
+  <div class="field" (clickOutside)="onClickOutside()">
+    <div
+      class="text-body-12 field__input"
+      [class.field__input--error]="error()"
+      [class.field__input--placeholder]="!selectedId && selectedId !== 0"
+      [class.field__input--open]="isOpen"
+      [class.field__input--small]="size() === 'small'"
+      [class.field__input--big]="size() === 'big'"
+      [class.field__input--disabled]="disabled"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.tabindex]="disabled ? -1 : 0"
+      [attr.aria-expanded]="isOpen"
+      [attr.aria-disabled]="disabled"
+      (click)="!disabled && (isOpen = !isOpen); highlightedIndex = -1"
+      (keydown)="onTriggerKeyDown($event)"
+    >
+      {{
+        selectedId === -1
+          ? "Ничего"
+          : selectedId || selectedId === 0
+            ? getLabel(selectedId) || placeholder()
+            : placeholder()
+      }}
+      @if (error()) {
+        <i
+          class="field__error-icon field__error-icon--bare"
+          appIcon
+          icon="error"
+          appSquare="20"
+        ></i>
+      } @else {
+        <i
+          class="field__arrow"
+          [class.field__arrow--filpped]="isOpen"
+          appIcon
+          icon="arrow-no-body"
+          appWidth="10"
+          appHeight="8"
+        ></i>
+      }
+    </div>
+    @if (!disabled) {
+      <app-dropdown
+        [isOpen]="isOpen"
+        [options]="options()"
+        [highlightedIndex]="highlightedIndex"
+        (select)="onUpdate($event)"
+        (outside)="hideDropdown()"
+      ></app-dropdown>
+    }
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/primitives/select/select.component.scss b/projects/social_platform/src/app/ui/primitives/select/select.component.scss
index a8b346c84..159eb0b23 100644
--- a/projects/social_platform/src/app/ui/primitives/select/select.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/select/select.component.scss
@@ -1,7 +1,7 @@
 /** @format */
-
 @use "styles/typography";
 @use "styles/responsive";
+@use "styles/ui-foundation";
 
 .field {
   position: relative;
@@ -108,3 +108,84 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .field {
+    &__input {
+      &--open {
+        box-shadow: var(--ui-focus-ring);
+      }
+
+      @include ui-foundation.control;
+    }
+  }
+
+  :host {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .field,
+  .search,
+  .search__input {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @include responsive.apply-mobile {
+    .field__input,
+    .field__input-slim,
+    .search__input input {
+      min-width: 0;
+      max-width: 100%;
+      min-height: 44px;
+      font-size: var(--ui-font-h3);
+    }
+
+    .field--small,
+    .field__input--small {
+      min-width: 0;
+    }
+
+    .field__input--with-tooltip {
+      padding-right: 44px;
+    }
+
+    .field__option {
+      min-height: 44px;
+      overflow-wrap: anywhere;
+    }
+
+    .field__chip {
+      max-width: calc(100% - 44px);
+    }
+
+    .field__chip span {
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .field__calendar-button {
+      right: 4px;
+      width: 44px;
+      height: 44px;
+    }
+
+    .field__input[type="date"] {
+      padding-right: 48px;
+    }
+  }
+
+  .field__input > span,
+  .field__input > p {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .field__arrow,
+  .field__error-icon {
+    flex-shrink: 0;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/select/select.component.spec.ts b/projects/social_platform/src/app/ui/primitives/select/select.component.spec.ts
index 97e171490..fd8eaa44f 100644
--- a/projects/social_platform/src/app/ui/primitives/select/select.component.spec.ts
+++ b/projects/social_platform/src/app/ui/primitives/select/select.component.spec.ts
@@ -25,6 +25,23 @@ describe("SelectComponent", () => {
     expect(component).toBeTruthy();
   });
 
+  it("does not open a disabled select by pointer or keyboard", () => {
+    component.setDisabledState(true);
+    fixture.detectChanges();
+    const control: HTMLElement = fixture.nativeElement.querySelector(".field__input");
+    control.click();
+    control.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(component.isOpen).toBe(false);
+    expect(control.getAttribute("tabindex")).toBe("-1");
+  });
+
+  it("opens the enabled select from its focused trigger", () => {
+    const control: HTMLElement = fixture.nativeElement.querySelector(".field__input");
+    control.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(component.isOpen).toBe(true);
+    expect(component.highlightedIndex).toBe(0);
+  });
+
   it("should display the placeholder text when no option is selected", () => {
     const placeholder = "Select an option";
     fixture.componentRef.setInput("placeholder", placeholder);
diff --git a/projects/social_platform/src/app/ui/primitives/select/select.component.ts b/projects/social_platform/src/app/ui/primitives/select/select.component.ts
index caa5a8dab..12c1e127c 100644
--- a/projects/social_platform/src/app/ui/primitives/select/select.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/select/select.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
@@ -52,6 +55,8 @@ import { IconComponent } from "../icon/icon.component";
   imports: [ClickOutsideModule, IconComponent, CommonModule, DropdownComponent],
 })
 export class SelectComponent implements ControlValueAccessor {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   /** Текст подсказки */
   placeholder = input("");
 
@@ -94,9 +99,22 @@ export class SelectComponent implements ControlValueAccessor {
   dropdown = viewChild<ElementRef<HTMLUListElement>>("dropdown");
 
   /** Обработчик клавиатурных событий для навигации */
+  onTriggerKeyDown(event: KeyboardEvent): void {
+    if (!this.disabled && !this.isOpen && ["Enter", " ", "ArrowDown"].includes(event.key)) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.isOpen = true;
+      this.highlightedIndex = 0;
+    }
+  }
+
   @HostListener("document:keydown", ["$event"])
   onKeyDown(event: KeyboardEvent): void {
-    if (!this.isOpen || this.disabled) {
+    if (
+      !this.isOpen ||
+      this.disabled ||
+      !["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(event.code)
+    ) {
       return;
     }
 
@@ -133,6 +151,7 @@ export class SelectComponent implements ControlValueAccessor {
     if (!ddElem) return;
 
     const highlightedElem = ddElem.children[this.highlightedIndex];
+    if (!highlightedElem) return;
 
     const ddBox = ddElem.getBoundingClientRect();
     const optBox = highlightedElem.getBoundingClientRect();
diff --git a/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss b/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss
index 4a9138ea6..d9b4d962f 100644
--- a/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/switch/switch.component.scss
@@ -1,3 +1,6 @@
+/** @format */
+@use "styles/responsive";
+
 .switch {
   position: relative;
   width: 40px;
@@ -26,3 +29,22 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-mobile {
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 44px;
+      min-height: 44px;
+    }
+
+    .switch::before {
+      position: absolute;
+      inset: -12px -2px;
+      content: "";
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss b/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss
index 89905e535..9630a7c5c 100644
--- a/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/tag/tag.component.scss
@@ -1,4 +1,6 @@
 /** @format */
+@use "styles/ui-foundation";
+@use "styles/responsive";
 
 .tag {
   position: relative;
@@ -179,3 +181,38 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .tag {
+    @include ui-foundation.badge;
+
+    padding: 4px 12px;
+    font-size: var(--ui-font-caption);
+    line-height: 1.5;
+    border-radius: var(--ui-radius-control);
+  }
+
+  @include responsive.apply-mobile {
+    .tag {
+      max-width: 100%;
+      padding: 4px 12px;
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .tag p {
+      min-width: 0;
+    }
+
+    .tag:has(.tag__icons) {
+      padding-right: 40px;
+    }
+
+    .tag__icons {
+      top: 0;
+      bottom: 0;
+      align-items: center;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss b/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss
index 35405812b..e2f30ae5e 100644
--- a/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/textarea/textarea.component.scss
@@ -1,7 +1,7 @@
 /** @format */
-
 @use "styles/typography";
 @use "styles/responsive";
+@use "styles/ui-foundation";
 
 .field {
   position: relative;
@@ -105,3 +105,87 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .field {
+    &__input {
+      &--error,
+      &--overflow {
+        &:focus {
+          box-shadow: var(--ui-error-ring) !important;
+        }
+      }
+
+      &:focus {
+        box-shadow: var(--ui-focus-ring);
+      }
+
+      @include ui-foundation.control;
+
+      border-radius: var(--ui-radius-card);
+    }
+  }
+
+  :host {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .field,
+  .search,
+  .search__input {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @include responsive.apply-mobile {
+    .field__input,
+    .field__input-slim,
+    .search__input input {
+      min-width: 0;
+      max-width: 100%;
+      min-height: 44px;
+      font-size: var(--ui-font-h3);
+    }
+
+    .field--small,
+    .field__input--small {
+      min-width: 0;
+    }
+
+    .field__input--with-tooltip {
+      padding-right: 44px;
+    }
+
+    .field__option {
+      min-height: 44px;
+      overflow-wrap: anywhere;
+    }
+
+    .field__chip {
+      max-width: calc(100% - 44px);
+    }
+
+    .field__chip span {
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .field__calendar-button {
+      right: 4px;
+      width: 44px;
+      height: 44px;
+    }
+
+    .field__input[type="date"] {
+      padding-right: 48px;
+    }
+  }
+
+  .field__input--with-tooltip {
+    padding-right: 60px;
+    padding-right: 68px;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.html b/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.html
index 0f8278645..b5b44b2c7 100644
--- a/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.html
+++ b/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.html
@@ -1,43 +1,96 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <i
+    cdkOverlayOrigin
+    #tooltipOrigin="cdkOverlayOrigin"
+    appIcon
+    icon="hint"
+    [appSquare]="iconSize()"
+    class="tooltip__icon"
+    [class]="customClass()"
+    (mouseenter)="show.emit()"
+    (mouseleave)="hide.emit()"
+    [style.color]="color() === 'accent' ? 'var(--accent)' : 'var(--grey-for-text)'"
+  ></i>
+  @if (!useOverlay()) {
+    <span
+      class="tooltip__content text-body-10"
+      [class.tooltip__content--visible]="isVisible()"
+      [class.tooltip__content--left]="position() === 'left'"
+      [class.tooltip__content--right]="position() === 'right'"
+      [style.width.px]="tooltipWidth()"
+    >
+      {{ text() }}
+    </span>
+  }
 
-<i
-  cdkOverlayOrigin
-  #tooltipOrigin="cdkOverlayOrigin"
-  appIcon
-  icon="hint"
-  [appSquare]="iconSize()"
-  class="tooltip__icon"
-  [class]="customClass()"
-  (mouseenter)="show.emit()"
-  (mouseleave)="hide.emit()"
-  [style.color]="color() === 'accent' ? 'var(--accent)' : 'var(--grey-for-text)'"
-></i>
-@if (!useOverlay()) {
-  <span
-    class="tooltip__content text-body-10"
-    [class.tooltip__content--visible]="isVisible()"
-    [class.tooltip__content--left]="position() === 'left'"
-    [class.tooltip__content--right]="position() === 'right'"
-    [style.width.px]="tooltipWidth()"
+  <ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayOrigin]="tooltipOrigin"
+    [cdkConnectedOverlayOpen]="useOverlay() && isVisible()"
+    [cdkConnectedOverlayPositions]="overlayPositions"
+    [cdkConnectedOverlayPush]="true"
+    (positionChange)="onOverlayPositionChange($event)"
   >
-    {{ text() }}
-  </span>
-}
+    <span
+      class="tooltip__content tooltip__content--overlay text-body-10"
+      [class.tooltip__content--overlay-left]="currentOverlayPlacement === 'left'"
+      [class.tooltip__content--overlay-right]="currentOverlayPlacement === 'right'"
+      [style.width.px]="tooltipWidth()"
+    >
+      {{ text() }}
+    </span>
+  </ng-template>
+} @else {
+  <i
+    cdkOverlayOrigin
+    #tooltipOrigin="cdkOverlayOrigin"
+    appIcon
+    icon="hint"
+    [appSquare]="iconSize()"
+    class="tooltip__icon"
+    [class]="customClass()"
+    tabindex="0"
+    role="button"
+    aria-label="Подсказка"
+    [attr.aria-expanded]="isVisible()"
+    (mouseenter)="!mobileOverlay() && show.emit()"
+    (mouseleave)="!mobileOverlay() && hide.emit()"
+    (click)="$event.stopPropagation(); isVisible() ? hide.emit() : show.emit()"
+    (keydown.enter)="$event.stopPropagation(); isVisible() ? hide.emit() : show.emit()"
+    (keydown.escape)="hide.emit()"
+    [style.color]="color() === 'accent' ? 'var(--accent)' : 'var(--grey-for-text)'"
+  ></i>
+  @if (!useOverlay() && !mobileOverlay()) {
+    <span
+      class="tooltip__content text-body-10"
+      [class.tooltip__content--visible]="isVisible()"
+      [class.tooltip__content--left]="position() === 'left'"
+      [class.tooltip__content--right]="position() === 'right'"
+      [style.width.px]="tooltipWidth()"
+    >
+      {{ text() }}
+    </span>
+  }
 
-<ng-template
-  cdkConnectedOverlay
-  [cdkConnectedOverlayOrigin]="tooltipOrigin"
-  [cdkConnectedOverlayOpen]="useOverlay() && isVisible()"
-  [cdkConnectedOverlayPositions]="overlayPositions"
-  [cdkConnectedOverlayPush]="true"
-  (positionChange)="onOverlayPositionChange($event)"
->
-  <span
-    class="tooltip__content tooltip__content--overlay text-body-10"
-    [class.tooltip__content--overlay-left]="currentOverlayPlacement === 'left'"
-    [class.tooltip__content--overlay-right]="currentOverlayPlacement === 'right'"
-    [style.width.px]="tooltipWidth()"
+  <ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayOrigin]="tooltipOrigin"
+    [cdkConnectedOverlayOpen]="(useOverlay() || mobileOverlay()) && isVisible()"
+    [cdkConnectedOverlayPositions]="overlayPositions"
+    [cdkConnectedOverlayPush]="true"
+    [cdkConnectedOverlayViewportMargin]="12"
+    (overlayOutsideClick)="hide.emit()"
+    (positionChange)="onOverlayPositionChange($event)"
   >
-    {{ text() }}
-  </span>
-</ng-template>
+    <span
+      class="tooltip__content tooltip__content--overlay text-body-10"
+      [class.tooltip__content--overlay-left]="currentOverlayPlacement === 'left'"
+      [class.tooltip__content--overlay-right]="currentOverlayPlacement === 'right'"
+      [style.width.px]="tooltipWidth()"
+    >
+      {{ text() }}
+    </span>
+  </ng-template>
+}
diff --git a/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.scss b/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.scss
index f1d76102c..fa024c88a 100644
--- a/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/typography";
 @use "styles/responsive";
 
@@ -117,3 +116,29 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .tooltip {
+    &__content {
+      box-shadow: var(--ui-tooltip-shadow);
+    }
+  }
+
+  @include responsive.apply-mobile {
+    .tooltip__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 44px;
+      min-height: 44px;
+    }
+
+    .tooltip__content {
+      max-width: calc(100vw - 32px);
+      max-height: calc(var(--visual-viewport-height, 100dvh) - 24px);
+      overflow-y: auto;
+      overflow-wrap: anywhere;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.spec.ts b/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.spec.ts
index dcef38513..d7e4a2f82 100644
--- a/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.spec.ts
+++ b/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.spec.ts
@@ -74,14 +74,29 @@ describe("TooltipComponent overlay mode", () => {
 
     expect(overlayContainerElement.textContent).toContain("Скоро здесь будет аналитика");
     const popup = overlayContainerElement.querySelector(
-      ".tooltip__content--overlay-left",
+      ".tooltip__content--overlay",
     ) as HTMLElement;
     expect(popup).toBeTruthy();
-    expect(popup.classList).toContain("tooltip__content--overlay-left");
+    expect(popup.className).toMatch(/tooltip__content--overlay-(left|right)/);
 
     icon.dispatchEvent(new MouseEvent("mouseleave"));
     fixture.detectChanges();
 
     expect(overlayContainerElement.textContent).not.toContain("Скоро здесь будет аналитика");
   });
+
+  it("opens and closes with a tap on a mobile viewport", () => {
+    const previousWidth = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", { configurable: true, value: 390 });
+    window.dispatchEvent(new Event("resize"));
+    fixture.detectChanges();
+    const icon = fixture.debugElement.query(By.css("app-tooltip .tooltip__icon")).nativeElement;
+    icon.click();
+    fixture.detectChanges();
+    expect(overlayContainerElement.textContent).toContain("Скоро здесь будет аналитика");
+    icon.click();
+    fixture.detectChanges();
+    expect(overlayContainerElement.textContent).not.toContain("Скоро здесь будет аналитика");
+    Object.defineProperty(window, "innerWidth", { configurable: true, value: previousWidth });
+  });
 });
diff --git a/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.ts b/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.ts
index ea3d238fa..93cfbac5f 100644
--- a/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/tooltip/tooltip.component.ts
@@ -1,12 +1,23 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import {
   ConnectedOverlayPositionChange,
   ConnectedPosition,
   OverlayModule,
 } from "@angular/cdk/overlay";
 import { CommonModule } from "@angular/common";
-import { ChangeDetectionStrategy, Component, input, output, signal } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostListener,
+  input,
+  output,
+  signal,
+} from "@angular/core";
+import { tablet } from "@utils/responsive";
 import { IconComponent } from "../icon/icon.component";
 
 /**
@@ -32,6 +43,21 @@ import { IconComponent } from "../icon/icon.component";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TooltipComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  readonly mobileOverlay = signal(this.prefersTouch());
+
+  private prefersTouch(): boolean {
+    return (
+      window.innerWidth < tablet ||
+      window.matchMedia?.("(hover: none), (pointer: coarse)")?.matches === true
+    );
+  }
+
+  @HostListener("window:resize")
+  updateViewport(): void {
+    this.mobileOverlay.set(this.prefersTouch());
+  }
   /** Текст подсказки */
   text = input("");
 
diff --git a/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss b/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss
index fc6faf1ea..9903872aa 100644
--- a/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss
+++ b/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.scss
@@ -1,4 +1,5 @@
 /** @format */
+@use "styles/responsive";
 
 .control {
   position: relative;
@@ -85,3 +86,38 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-mobile {
+    .control {
+      height: auto;
+      min-height: 120px;
+    }
+
+    .control label {
+      min-height: 120px;
+      padding: 16px;
+    }
+
+    .control__success,
+    .file {
+      flex-wrap: wrap;
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .file__title {
+      min-width: 0;
+      max-width: 100%;
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .file__basket,
+    .file__replace {
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.ts b/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.ts
index 9448a278b..7dc37674b 100644
--- a/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.ts
+++ b/projects/social_platform/src/app/ui/primitives/upload-file/upload-file.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -49,9 +54,11 @@ import { IconComponent } from "../icon/icon.component";
       multi: true,
     },
   ],
-  imports: [IconComponent, LoaderComponent],
+  imports: [ButtonDirective, IconComponent, LoaderComponent],
 })
 export class UploadFileComponent implements ControlValueAccessor {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly fileService = inject(FileService);
   private readonly snackbarService = inject(SnackbarService);
   private readonly destroyRef = inject(DestroyRef);
diff --git a/projects/social_platform/src/app/ui/widgets/chat-window/chat-message/chat-message.component.scss b/projects/social_platform/src/app/ui/widgets/chat-window/chat-message/chat-message.component.scss
index 5c52a2260..16ce77535 100644
--- a/projects/social_platform/src/app/ui/widgets/chat-window/chat-message/chat-message.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/chat-window/chat-message/chat-message.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -140,3 +139,16 @@
     color: var(--dark-grey);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .message {
+    &--unread {
+      background-color: var(--ui-message-surface);
+    }
+  }
+
+  .contextmenu {
+    box-shadow: var(--ui-message-shadow);
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/chat-window/chat-window.component.html b/projects/social_platform/src/app/ui/widgets/chat-window/chat-window.component.html
index 6ce7dbc12..9d2e7fa58 100644
--- a/projects/social_platform/src/app/ui/widgets/chat-window/chat-window.component.html
+++ b/projects/social_platform/src/app/ui/widgets/chat-window/chat-window.component.html
@@ -1,49 +1,99 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="chat">
+    <cdk-virtual-scroll-viewport
+      class="chat__messages"
+      [itemSize]="50"
+      minBufferPx="400"
+      maxBufferPx="800"
+    >
+      <app-chat-message
+        class="chat__message"
+        [id]="message.id"
+        [chatMessage]="message"
+        [attr.data-been-read]="message.isRead ? '1' : '0'"
+        (edit)="onEditMessage($event)"
+        (reply)="onReplyMessage($event)"
+        (delete)="onDeleteMessage($event)"
+        *cdkVirtualFor="let message of messages"
+      ></app-chat-message>
+    </cdk-virtual-scroll-viewport>
 
-<div class="chat">
-  <cdk-virtual-scroll-viewport
-    class="chat__messages"
-    [itemSize]="50"
-    minBufferPx="400"
-    maxBufferPx="800"
-  >
-    <app-chat-message
-      class="chat__message"
-      [id]="message.id"
-      [chatMessage]="message"
-      [attr.data-been-read]="message.isRead ? '1' : '0'"
-      (edit)="onEditMessage($event)"
-      (reply)="onReplyMessage($event)"
-      (delete)="onDeleteMessage($event)"
-      *cdkVirtualFor="let message of messages"
-    ></app-chat-message>
-  </cdk-virtual-scroll-viewport>
+    <form class="chat__input" [formGroup]="messageForm">
+      @if (typingPersons.length) {
+        <span class="chat__typing text-body-10">
+          @for (person of typingPersons.slice(0, 3); let last = $last; track person.userId) {
+            {{ person.firstName }} {{ person.lastName }}
+            @if (!last) {
+              ,
+            }
+          }
+          @if (typingPersons.length > 3) {
+            и еще {{ typingPersons.length - 3 }}
+            {{ typingPersons.length - 3 | pluralize: ["человек", "человека", "человек"] }}
+          }
+          {{ typingPersons.length | pluralize: ["печатает", "печатают", "печатают"] }}
+          ...
+        </span>
+      }
+      <app-message-input
+        [editingMessage]="editingMessage"
+        [replyMessage]="replyMessage"
+        (resize)="onInputResize()"
+        (cancel)="onCancelInput()"
+        (submit)="onSubmitMessage()"
+        placeholder="сегодня был хороший день"
+        formControlName="messageControl"
+      ></app-message-input>
+    </form>
+  </div>
+} @else {
+  <div class="chat">
+    <cdk-virtual-scroll-viewport
+      class="chat__messages"
+      [itemSize]="50"
+      minBufferPx="400"
+      maxBufferPx="800"
+    >
+      <app-chat-message
+        class="chat__message"
+        [id]="message.id"
+        [chatMessage]="message"
+        [attr.data-been-read]="message.isRead ? '1' : '0'"
+        (edit)="onEditMessage($event)"
+        (reply)="onReplyMessage($event)"
+        (delete)="onDeleteMessage($event)"
+        *cdkVirtualFor="let message of messages"
+      ></app-chat-message>
+    </cdk-virtual-scroll-viewport>
 
-  <form class="chat__input" [formGroup]="messageForm">
-    @if (typingPersons.length) {
-      <span class="chat__typing text-body-10">
-        @for (person of typingPersons.slice(0, 3); let last = $last; track person.userId) {
-          {{ person.firstName }} {{ person.lastName }}
-          @if (!last) {
-            ,
+    <form appFormLayout class="chat__input" [formGroup]="messageForm">
+      @if (typingPersons.length) {
+        <span class="chat__typing text-body-10">
+          @for (person of typingPersons.slice(0, 3); let last = $last; track person.userId) {
+            {{ person.firstName }} {{ person.lastName }}
+            @if (!last) {
+              ,
+            }
+          }
+          @if (typingPersons.length > 3) {
+            и еще {{ typingPersons.length - 3 }}
+            {{ typingPersons.length - 3 | pluralize: ["человек", "человека", "человек"] }}
           }
-        }
-        @if (typingPersons.length > 3) {
-          и еще {{ typingPersons.length - 3 }}
-          {{ typingPersons.length - 3 | pluralize: ["человек", "человека", "человек"] }}
-        }
-        {{ typingPersons.length | pluralize: ["печатает", "печатают", "печатают"] }}
-        ...
-      </span>
-    }
-    <app-message-input
-      [editingMessage]="editingMessage"
-      [replyMessage]="replyMessage"
-      (resize)="onInputResize()"
-      (cancel)="onCancelInput()"
-      (submit)="onSubmitMessage()"
-      placeholder="сегодня был хороший день"
-      formControlName="messageControl"
-    ></app-message-input>
-  </form>
-</div>
+          {{ typingPersons.length | pluralize: ["печатает", "печатают", "печатают"] }}
+          ...
+        </span>
+      }
+      <app-message-input
+        [editingMessage]="editingMessage"
+        [replyMessage]="replyMessage"
+        (resize)="onInputResize()"
+        (cancel)="onCancelInput()"
+        (submit)="onSubmitMessage()"
+        placeholder="сегодня был хороший день"
+        formControlName="messageControl"
+      ></app-message-input>
+    </form>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/chat-window/chat-window.component.ts b/projects/social_platform/src/app/ui/widgets/chat-window/chat-window.component.ts
index c4024517a..e6e2d5490 100644
--- a/projects/social_platform/src/app/ui/widgets/chat-window/chat-window.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/chat-window/chat-window.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FormLayoutDirective } from "@uilib";
+
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -36,6 +41,7 @@ import { ProfileInfoService } from "@api/profile/facades/profile-info.service";
   templateUrl: "./chat-window.component.html",
   styleUrl: "./chat-window.component.scss",
   imports: [
+    FormLayoutDirective,
     CdkVirtualScrollViewport,
     CdkFixedSizeVirtualScroll,
     CdkVirtualForOf,
@@ -47,6 +53,8 @@ import { ProfileInfoService } from "@api/profile/facades/profile-info.service";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChatWindowComponent implements OnInit, AfterViewInit, OnDestroy {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly destroyRef = inject(DestroyRef);
   private readonly fb = inject(FormBuilder);
   private readonly modalService = inject(ModalService);
diff --git a/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss b/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss
index 15e85cc5b..8c988345d 100644
--- a/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/cookie-consent/cookie-consent.component.scss
@@ -1,4 +1,5 @@
 /** @format */
+@use "styles/responsive";
 
 .cookie-consent {
   position: fixed;
@@ -33,3 +34,22 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-mobile {
+    .cookie-consent {
+      right: var(--page-gutter);
+      bottom: max(12px, env(safe-area-inset-bottom));
+      left: var(--page-gutter);
+      max-width: none;
+      max-height: calc(100dvh - 24px);
+      padding: 16px;
+      overflow-y: auto;
+    }
+
+    .cookie-consent__buttons {
+      @include responsive.mobile-actions;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/detail/detail.component.html b/projects/social_platform/src/app/ui/widgets/detail/detail.component.html
index 05bdbd980..195d84c21 100644
--- a/projects/social_platform/src/app/ui/widgets/detail/detail.component.html
+++ b/projects/social_platform/src/app/ui/widgets/detail/detail.component.html
@@ -1,364 +1,919 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="detail">
+    <div class="detail__body">
+      @if (info()) {
+        <div class="info detail__section detail__info">
+          <div class="info__cover" [class.info__cover--program]="listType() === 'program'">
+            @if (appWidth > 1000) {
+              <img
+                class="info__cover"
+                [class.info__cover--program]="listType() === 'program'"
+                [src]="
+                  info().coverImageAddress
+                    ? info().coverImageAddress
+                    : '/assets/images/office/profile/detail/cover.png'
+                "
+                alt="cover"
+              />
+            }
 
-<div class="detail">
-  <div class="detail__body">
-    @if (info()) {
-      <div class="info detail__section detail__info">
-        <div class="info__cover" [class.info__cover--program]="listType() === 'program'">
-          @if (appWidth > 1000) {
-            <img
-              class="info__cover"
-              [class.info__cover--program]="listType() === 'program'"
-              [src]="
-                info().coverImageAddress
-                  ? info().coverImageAddress
-                  : '/assets/images/office/profile/detail/cover.png'
+            <div class="info__cover--mobile"></div>
+
+            <div
+              class="info__avatar"
+              (click)="redirectDetailInfo()"
+              [class.info__avatar--program]="listType() === 'program'"
+              [style.width]="
+                appWidth < 1000
+                  ? '105px'
+                  : listType() === 'project' || listType() === 'profile'
+                    ? '110px'
+                    : '123px'
               "
-              alt="cover"
-            />
-          }
-
-          <div class="info__cover--mobile"></div>
-
-          <div
-            class="info__avatar"
-            (click)="redirectDetailInfo()"
-            [class.info__avatar--program]="listType() === 'program'"
-            [style.width]="
-              appWidth < 1000
-                ? '105px'
-                : listType() === 'project' || listType() === 'profile'
-                  ? '110px'
-                  : '123px'
-            "
-          >
-            @if (chatStateService.userOnlineStatusCache | async; as cache) {
-              <app-avatar
-                [url]="listType() === 'profile' ? info().avatar : info().imageAddress"
-                [hasBorder]="true"
-                [borderColor]="listType() === 'project' ? 'white' : 'dark-grey'"
-                [progress]="info().progress"
-                [onlineBadgeSize]="15"
-                [onlineBadgeBorder]="0"
-                [onlineBadgeOffset]="8"
-                [size]="
-                  appWidth < 1000
-                    ? 105
-                    : listType() === 'project' || listType() === 'profile'
-                      ? 110
-                      : 123
-                "
-                [isOnline]="cache[info().id] !== undefined ? cache[info().id] : info().isOnline"
-              ></app-avatar>
-              @if (listType() === "project" || listType() === "profile") {
-                <h1
-                  class="info__title text-body-12"
-                  [style.width]="
-                    listType() === 'project' || listType() === 'profile' ? '300px' : '100%'
-                  "
-                  [class.info__title--project]="
-                    listType() === 'project' || listType() === 'profile'
+            >
+              @if (chatStateService.userOnlineStatusCache | async; as cache) {
+                <app-avatar
+                  [url]="listType() === 'profile' ? info().avatar : info().imageAddress"
+                  [hasBorder]="true"
+                  [borderColor]="listType() === 'project' ? 'white' : 'dark-grey'"
+                  [progress]="info().progress"
+                  [onlineBadgeSize]="15"
+                  [onlineBadgeBorder]="0"
+                  [onlineBadgeOffset]="8"
+                  [size]="
+                    appWidth < 1000
+                      ? 105
+                      : listType() === 'project' || listType() === 'profile'
+                        ? 110
+                        : 123
                   "
-                >
-                  {{
-                    listType() === "project"
-                      ? info().name
-                      : listType() === "profile"
-                        ? info().firstName + " " + info().lastName
-                        : ""
-                  }}
-                </h1>
+                  [isOnline]="cache[info().id] !== undefined ? cache[info().id] : info().isOnline"
+                ></app-avatar>
+                @if (listType() === "project" || listType() === "profile") {
+                  <h1
+                    class="info__title text-body-12"
+                    [style.width]="
+                      listType() === 'project' || listType() === 'profile' ? '300px' : '100%'
+                    "
+                    [class.info__title--project]="
+                      listType() === 'project' || listType() === 'profile'
+                    "
+                  >
+                    {{
+                      listType() === "project"
+                        ? info().name
+                        : listType() === "profile"
+                          ? info().firstName + " " + info().lastName
+                          : ""
+                    }}
+                  </h1>
+                }
               }
-            }
+            </div>
           </div>
-        </div>
 
-        <div class="info__body">
-          <div class="info__actions">
-            <ng-container
-              *ngTemplateOutlet="
-                listType() === 'program'
-                  ? programTpl
-                  : listType() === 'profile'
-                    ? profileTpl
-                    : projectTpl
-              "
-            ></ng-container>
-          </div>
+          <div class="info__body">
+            <div class="info__actions">
+              <ng-container
+                *ngTemplateOutlet="
+                  listType() === 'program'
+                    ? programTpl
+                    : listType() === 'profile'
+                      ? profileTpl
+                      : projectTpl
+                "
+              ></ng-container>
+            </div>
+
+            <ng-template #programTpl>
+              @if (userType() !== undefined) {
+                @if (
+                  (isProjectsPage() ||
+                    isProjectsRatingPage() ||
+                    isAnalyticsPage() ||
+                    isMembersPage()) &&
+                  appWidth < 1000
+                ) {
+                  <a [routerLink]="AppRoutes.program.detail(info().id)">
+                    <app-button
+                      appearance="outline"
+                      size="small"
+                      class="info__contacts"
+                      customTypographyClass="text-body-12"
+                    >
+                      <span>назад</span>
+                    </app-button>
+                  </a>
 
-          <ng-template #programTpl>
-            @if (userType() !== undefined) {
-              @if (
-                (isProjectsPage() ||
-                  isProjectsRatingPage() ||
-                  isAnalyticsPage() ||
-                  isMembersPage()) &&
-                appWidth < 1000
-              ) {
-                <a [routerLink]="AppRoutes.program.detail(info().id)">
                   <app-button
                     appearance="outline"
                     size="small"
+                    [disabled]="!info().links?.length"
                     class="info__contacts"
                     customTypographyClass="text-body-12"
+                    (click)="isContactsModalOpen.set(true)"
                   >
-                    <span>назад</span>
+                    <i appIcon icon="phone" appSquare="12"></i>
                   </app-button>
-                </a>
 
-                <app-button
-                  appearance="outline"
-                  size="small"
-                  [disabled]="!info().links?.length"
-                  class="info__contacts"
-                  customTypographyClass="text-body-12"
-                  (click)="isContactsModalOpen.set(true)"
-                >
-                  <i appIcon icon="phone" appSquare="12"></i>
-                </app-button>
-
-                <app-modal
-                  [open]="isContactsModalOpen()"
-                  (openChange)="isContactsModalOpen.set(!isContactsModalOpen())"
-                  bodyClass="modal__body--no-flex"
-                >
-                  <app-program-links
-                    title="контакты"
-                    icon="phone"
-                    [links]="contactLinks()"
-                  ></app-program-links>
-                </app-modal>
-              } @else {
-                <div class="info__primary-action">
-                  @if (!isUserMember() && !isUserManager()) {
-                    @if (getProgramRegistrationLink(info()); as registrationLink) {
-                      <a
-                        (click)="checkPrograRegistrationEnded($event, info())"
-                        [href]="registrationLink"
-                        target="_blank"
-                        rel="noopener noreferrer"
+                  <app-modal
+                    [open]="isContactsModalOpen()"
+                    (openChange)="isContactsModalOpen.set(!isContactsModalOpen())"
+                    bodyClass="modal__body--no-flex"
+                  >
+                    <app-program-links
+                      title="контакты"
+                      icon="phone"
+                      [links]="contactLinks()"
+                    ></app-program-links>
+                  </app-modal>
+                } @else {
+                  <div class="info__primary-action">
+                    @if (!isUserMember() && !isUserManager()) {
+                      @if (getProgramRegistrationLink(info()); as registrationLink) {
+                        <a
+                          (click)="checkPrograRegistrationEnded($event, info())"
+                          [href]="registrationLink"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <app-button
+                            appearance="outline"
+                            size="medium"
+                            customTypographyClass="text-body-12"
+                          >
+                            зарегистрироваться
+                          </app-button>
+                        </a>
+                      }
+                    }
+                    @if (isUserMember() && !isUserManager() && !isUserExpert()) {
+                      <app-button
+                        [size]="appWidth > 1000 ? 'medium' : 'big'"
+                        [disabled]="
+                          !!submissionProjectDateExpired ||
+                          isProjectAssigned() ||
+                          applicationPending()
+                        "
+                        [appearance]="isProjectAssigned() ? 'outline' : 'inline'"
+                        (click)="isProjectAssigned() ? null : addNewProject(info().id)"
+                        customTypographyClass="text-body-12 bar__add-project"
                       >
+                        <span>{{ applicationLabel() }}</span>
+                        <i appIcon icon="plus" appSquare="10"></i>
+                      </app-button>
+                    }
+                    @if ((isUserManager() || isUserExpert()) && isUserMember()) {
+                      <a [routerLink]="AppRoutes.program.projectsRating(info().id)">
                         <app-button
-                          appearance="outline"
-                          size="medium"
+                          [appearance]="
+                            isProjectsRatingPage() || appWidth < 1000 ? 'inline' : 'outline'
+                          "
+                          [size]="appWidth > 1000 ? 'medium' : 'big'"
                           customTypographyClass="text-body-12"
                         >
-                          зарегистрироваться
+                          оценка проектов
                         </app-button>
                       </a>
                     }
+                  </div>
+
+                  @if (isUserManager()) {
+                    <a [routerLink]="AppRoutes.program.analytics(info().id)">
+                      <app-button
+                        [appearance]="isAnalyticsPage() || appWidth < 1000 ? 'inline' : 'outline'"
+                        [size]="appWidth > 1000 ? 'medium' : 'big'"
+                        customTypographyClass="text-body-12"
+                      >
+                        аналитика
+                      </app-button>
+                    </a>
+                  } @else {
+                    <a [href]="info().presentationAddress" download="" target="_blank">
+                      <app-button
+                        appearance="outline"
+                        [size]="appWidth > 1000 ? 'medium' : 'small'"
+                        customTypographyClass="text-body-12"
+                      >
+                        @if (appWidth > 1000) {
+                          <span>{{
+                            info().name.includes("Технолидеры Будущего")
+                              ? "Каталог лучших стартапов 2022/23"
+                              : "положение"
+                          }}</span>
+                        }
+                        <i
+                          appIcon
+                          class="info__presentation-icon"
+                          [icon]="appWidth > 1000 ? 'arrow-down' : 'file'"
+                          [appSquare]="appWidth > 1000 ? '8' : '12'"
+                        ></i>
+                      </app-button>
+                    </a>
+                  }
+
+                  @if (appWidth > 1000) {
+                    <div class="info__divider"></div>
                   }
-                  @if (isUserMember() && !isUserManager() && !isUserExpert()) {
+                  @if (appWidth < 1000) {
                     <app-button
-                      [size]="appWidth > 1000 ? 'medium' : 'big'"
-                      [disabled]="
-                        !!submissionProjectDateExpired ||
-                        isProjectAssigned() ||
-                        applicationPending()
-                      "
-                      [appearance]="isProjectAssigned() ? 'outline' : 'inline'"
-                      (click)="isProjectAssigned() ? null : addNewProject(info().id)"
-                      customTypographyClass="text-body-12 bar__add-project"
+                      appearance="outline"
+                      size="small"
+                      [disabled]="!info().links?.length"
+                      class="info__contacts"
+                      customTypographyClass="text-body-12"
+                      (click)="isContactsModalOpen.set(true)"
                     >
-                      <span>{{ applicationLabel() }}</span>
-                      <i appIcon icon="plus" appSquare="10"></i>
+                      <i appIcon icon="phone" appSquare="12"></i>
                     </app-button>
                   }
-                  @if ((isUserManager() || isUserExpert()) && isUserMember()) {
-                    <a [routerLink]="AppRoutes.program.projectsRating(info().id)">
+                  @if (isUserManager() || (isUserExpert() && appWidth > 1000)) {
+                    <a [routerLink]="AppRoutes.program.projects(info().id)">
                       <app-button
-                        [appearance]="
-                          isProjectsRatingPage() || appWidth < 1000 ? 'inline' : 'outline'
-                        "
-                        [size]="appWidth > 1000 ? 'medium' : 'big'"
+                        [appearance]="isProjectsPage() ? 'inline' : 'outline'"
+                        size="medium"
+                        [disabled]="isUserExpert() && !isUserManager()"
                         customTypographyClass="text-body-12"
                       >
-                        оценка проектов
+                        проекты-участники
                       </app-button>
                     </a>
                   }
-                </div>
-
-                @if (isUserManager()) {
-                  <a [routerLink]="AppRoutes.program.analytics(info().id)">
+                  @if (!isUserManager() && !isUserExpert() && appWidth > 1000) {
+                    <a class="info__more">
+                      <app-button
+                        appearance="outline"
+                        [disabled]="true"
+                        size="medium"
+                        customTypographyClass="text-body-12"
+                      >
+                        узнать подробнее
+                      </app-button>
+                    </a>
+                  }
+                  @if (isUserManager() || (isUserExpert() && appWidth > 1000)) {
+                    <a [routerLink]="AppRoutes.program.members(info().id)" class="info__members">
+                      <app-button
+                        [appearance]="isMembersPage() ? 'inline' : 'outline'"
+                        size="medium"
+                        [disabled]="isUserExpert() && !isUserManager()"
+                        customTypographyClass="text-body-12"
+                      >
+                        участники
+                      </app-button>
+                    </a>
+                  }
+                  @if (appWidth < 1000) {
                     <app-button
-                      [appearance]="isAnalyticsPage() || appWidth < 1000 ? 'inline' : 'outline'"
-                      [size]="appWidth > 1000 ? 'medium' : 'big'"
+                      appearance="outline"
+                      size="big"
+                      [disabled]="!info().materials?.length"
+                      class="info__materials"
+                      [class.info__materials--full]="isUserManager() || isUserExpert()"
                       customTypographyClass="text-body-12"
+                      (click)="isMaterialsModalOpen.set(true)"
                     >
-                      аналитика
+                      материалы
                     </app-button>
-                  </a>
-                } @else {
-                  <a [href]="info().presentationAddress" download="" target="_blank">
+                  }
+                  @if (!isUserManager() && !isUserExpert()) {
                     <app-button
+                      (click)="
+                        info().courses?.length
+                          ? router.navigateByUrl(AppRoutes.courses.detail(info().courses[0].id))
+                          : null
+                      "
                       appearance="outline"
-                      [size]="appWidth > 1000 ? 'medium' : 'small'"
+                      [disabled]="!info().courses?.length"
+                      [size]="appWidth > 1000 ? 'medium' : 'big'"
                       customTypographyClass="text-body-12"
                     >
-                      @if (appWidth > 1000) {
-                        <span>{{
-                          info().name.includes("Технолидеры Будущего")
-                            ? "Каталог лучших стартапов 2022/23"
-                            : "положение"
-                        }}</span>
-                      }
-                      <i
-                        appIcon
-                        class="info__presentation-icon"
-                        [icon]="appWidth > 1000 ? 'arrow-down' : 'file'"
-                        [appSquare]="appWidth > 1000 ? '8' : '12'"
-                      ></i>
+                      {{ appWidth > 1000 ? "перейти в курс" : "курс" }}
                     </app-button>
-                  </a>
-                }
+                  }
+
+                  @defer (when isAssignProjectToProgramModalOpen()) {
+                    <app-modal
+                      [open]="isAssignProjectToProgramModalOpen()"
+                      (openChange)="
+                        isAssignProjectToProgramModalOpen.set(!isAssignProjectToProgramModalOpen())
+                      "
+                    >
+                      <div class="cancel" style="width: 100%">
+                        <div class="cancel__top">
+                          <i
+                            (click)="isAssignProjectToProgramModalOpen.set(false)"
+                            appIcon
+                            appSquare="10"
+                            icon="cross"
+                            class="cancel__cross"
+                          ></i>
+                          <p class="cancel__title text-body-14">
+                            произошла ошибка при редактировании!
+                          </p>
+                        </div>
+                        <p class="text-body-12 cancel__text">
+                          {{ assignProjectToProgramModalMessage() }}.
+                        </p>
+                      </div>
+                    </app-modal>
+                  }
+
+                  @defer (when isProgramEndedModalOpen()) {
+                    <app-modal
+                      [open]="isProgramEndedModalOpen()"
+                      (openChange)="isProgramEndedModalOpen.set(!isProgramEndedModalOpen())"
+                    >
+                      <div class="cancel" style="padding: 24px">
+                        <div class="cancel__top">
+                          <p class="cancel__title text-body-14">
+                            к сожалению, программа уже завершена!
+                          </p>
+                        </div>
+
+                        <i appIcon icon="sad-smile" appSquare="50" style="margin-top: 36px"></i>
+                      </div>
+                    </app-modal>
+                  }
+
+                  @defer (when isProgramSubmissionProjectsEndedModalOpen()) {
+                    <app-modal
+                      [open]="isProgramSubmissionProjectsEndedModalOpen()"
+                      (openChange)="
+                        isProgramSubmissionProjectsEndedModalOpen.set(
+                          !isProgramSubmissionProjectsEndedModalOpen()
+                        )
+                      "
+                    >
+                      <div class="cancel" style="padding: 24px">
+                        <div class="cancel__top">
+                          <p class="cancel__title text-body-14">
+                            к сожалению, подача проекта уже завершена!
+                          </p>
+                        </div>
 
-                @if (appWidth > 1000) {
-                  <div class="info__divider"></div>
+                        <i appIcon icon="sad-smile" appSquare="50" style="margin-top: 36px"></i>
+                      </div>
+                    </app-modal>
+                  }
+
+                  @defer (when isContactsModalOpen()) {
+                    <app-modal
+                      [open]="isContactsModalOpen()"
+                      (openChange)="isContactsModalOpen.set(!isContactsModalOpen())"
+                      bodyClass="modal__body--no-flex"
+                    >
+                      <app-program-links
+                        title="контакты"
+                        icon="phone"
+                        [links]="contactLinks()"
+                      ></app-program-links>
+                    </app-modal>
+                  }
+
+                  @defer (when isMaterialsModalOpen()) {
+                    <app-modal
+                      [open]="isMaterialsModalOpen()"
+                      (openChange)="isMaterialsModalOpen.set(!isMaterialsModalOpen())"
+                      bodyClass="modal__body--no-flex"
+                    >
+                      <app-program-links
+                        title="материалы"
+                        icon="book"
+                        [links]="materialLinks()"
+                      ></app-program-links>
+                    </app-modal>
+                  }
                 }
-                @if (appWidth < 1000) {
+              }
+            </ng-template>
+
+            <ng-template #projectTpl>
+              @if (isInProject()) {
+                <span
+                  class="info__unavailable"
+                  tabindex="0"
+                  role="group"
+                  aria-label="Рабочая зона"
+                  aria-describedby="workspace-coming-soon"
+                >
                   <app-button
+                    [disabled]="true"
                     appearance="outline"
-                    size="small"
-                    [disabled]="!info().links?.length"
-                    class="info__contacts"
+                    size="medium"
                     customTypographyClass="text-body-12"
-                    (click)="isContactsModalOpen.set(true)"
                   >
-                    <i appIcon icon="phone" appSquare="12"></i>
+                    рабочая зона
                   </app-button>
-                }
-                @if (isUserManager() || (isUserExpert() && appWidth > 1000)) {
-                  <a [routerLink]="AppRoutes.program.projects(info().id)">
-                    <app-button
-                      [appearance]="isProjectsPage() ? 'inline' : 'outline'"
-                      size="medium"
-                      [disabled]="isUserExpert() && !isUserManager()"
-                      customTypographyClass="text-body-12"
-                    >
-                      проекты-участники
-                    </app-button>
-                  </a>
-                }
-                @if (!isUserManager() && !isUserExpert() && appWidth > 1000) {
-                  <a class="info__more">
-                    <app-button
-                      appearance="outline"
-                      [disabled]="true"
-                      size="medium"
-                      customTypographyClass="text-body-12"
-                    >
-                      узнать подробнее
-                    </app-button>
-                  </a>
-                }
-                @if (isUserManager() || (isUserExpert() && appWidth > 1000)) {
-                  <a [routerLink]="AppRoutes.program.members(info().id)" class="info__members">
-                    <app-button
-                      [appearance]="isMembersPage() ? 'inline' : 'outline'"
-                      size="medium"
-                      [disabled]="isUserExpert() && !isUserManager()"
-                      customTypographyClass="text-body-12"
-                    >
-                      участники
-                    </app-button>
-                  </a>
-                }
-                @if (appWidth < 1000) {
+                  <span class="info__unavailable-tooltip" role="tooltip" id="workspace-coming-soon"
+                    >Появится позже</span
+                  >
+                </span>
+              } @else {
+                <a class="info__presentation" [href]="info().presentationAddress" target="_blank">
                   <app-button
                     appearance="outline"
-                    size="big"
-                    [disabled]="!info().materials?.length"
-                    class="info__materials"
-                    [class.info__materials--full]="isUserManager() || isUserExpert()"
+                    size="medium"
                     customTypographyClass="text-body-12"
-                    (click)="isMaterialsModalOpen.set(true)"
                   >
-                    материалы
+                    <span>презентация</span>
+                    <i appIcon icon="arrow-down" appSquare="6"></i>
                   </app-button>
-                }
-                @if (!isUserManager() && !isUserExpert()) {
+                </a>
+              }
+              @if (!isInProject()) {
+                <app-button
+                  [disabled]="true"
+                  appearance="outline"
+                  size="medium"
+                  customTypographyClass="text-body-12"
+                >
+                  написать
+                </app-button>
+              } @else {
+                <span
+                  class="info__unavailable"
+                  tabindex="0"
+                  role="group"
+                  aria-label="Чат проекта"
+                  aria-describedby="chat-coming-soon"
+                >
                   <app-button
-                    (click)="
-                      info().courses?.length
-                        ? router.navigateByUrl(AppRoutes.courses.detail(info().courses[0].id))
-                        : null
-                    "
+                    [disabled]="true"
                     appearance="outline"
-                    [disabled]="!info().courses?.length"
-                    [size]="appWidth > 1000 ? 'medium' : 'big'"
+                    size="medium"
                     customTypographyClass="text-body-12"
                   >
-                    {{ appWidth > 1000 ? "перейти в курс" : "курс" }}
+                    чат проекта
                   </app-button>
+                  <span class="info__unavailable-tooltip" role="tooltip" id="chat-coming-soon"
+                    >Появится позже</span
+                  >
+                </span>
+              }
+
+              <div class="info__divider"></div>
+
+              <app-button
+                [routerLink]="AppRoutes.projects.team(info().id)"
+                [appearance]="isTeamPage() ? 'inline' : 'outline'"
+                size="medium"
+                customTypographyClass="text-body-12"
+              >
+                команда
+              </app-button>
+
+              @if (isInProject()) {
+                @if (profile()) {
+                  @if (profile()?.id === info().leader) {
+                    <a
+                      class="info__edit"
+                      [routerLink]="
+                        isEditDisable()
+                          ? AppRoutes.projects.detail(info().id)
+                          : AppRoutes.projects.edit(info().id)
+                      "
+                      [queryParams]="isEditDisable() ? {} : { editingStep: 'main' }"
+                    >
+                      <app-button
+                        appearance="outline"
+                        size="medium"
+                        customTypographyClass="text-body-12"
+                        (click)="onUnableEditingProject()"
+                        [ngStyle]="{ opacity: isEditDisable() ? '0.5' : '1' }"
+                        [color]="isEditDisable() ? 'grey' : 'primary'"
+                      >
+                        редактировать
+                      </app-button>
+                    </a>
+                  } @else {
+                    <app-button
+                      appearance="outline"
+                      color="red"
+                      size="medium"
+                      customTypographyClass="text-body-12"
+                      (click)="this.isLeaveProjectModalOpen.set(true)"
+                    >
+                      выйти из проекта
+                    </app-button>
+                  }
                 }
 
-                @defer (when isAssignProjectToProgramModalOpen()) {
-                  <app-modal
-                    [open]="isAssignProjectToProgramModalOpen()"
-                    (openChange)="
-                      isAssignProjectToProgramModalOpen.set(!isAssignProjectToProgramModalOpen())
-                    "
-                  >
-                    <div class="cancel" style="width: 100%">
-                      <div class="cancel__top">
-                        <i
-                          (click)="isAssignProjectToProgramModalOpen.set(false)"
-                          appIcon
-                          appSquare="10"
-                          icon="cross"
-                          class="cancel__cross"
-                        ></i>
-                        <p class="cancel__title text-body-14">
-                          произошла ошибка при редактировании!
-                        </p>
-                      </div>
-                      <p class="text-body-12 cancel__text">
-                        {{ assignProjectToProgramModalMessage() }}.
+                @defer (when isEditDisableModal()) {
+                  <app-modal [(open)]="isEditDisableModal">
+                    <div
+                      class="unsubscribe-modal"
+                      style="text-align: center; padding: 20px; position: relative"
+                    >
+                      <i
+                        style="right: 0px; top: 0px"
+                        class="support__cross"
+                        appIcon
+                        icon="cross"
+                        appSquare="12"
+                        (click)="isEditDisableModal.set(false)"
+                      ></i>
+                      <img
+                        src="assets/images/projects/shared/edit_disable.svg"
+                        alt="idea"
+                        sizes="120"
+                        class="unsubscribe-modal__img"
+                      />
+                      <h4 class="support__title text-body-12">редактирование недоступно</h4>
+
+                      <p class="support__text text-body-10">
+                        Этот проект уже отправлен на конкурс. <br />Изменения будут доступны только
+                        после окончания конкурса.
                       </p>
+
+                      <app-button
+                        appearance="outline"
+                        size="medium"
+                        customTypographyClass="text-body-12"
+                        (click)="isEditDisableModal.set(false)"
+                        >хорошо</app-button
+                      >
                     </div>
                   </app-modal>
                 }
 
-                @defer (when isProgramEndedModalOpen()) {
-                  <app-modal
-                    [open]="isProgramEndedModalOpen()"
-                    (openChange)="isProgramEndedModalOpen.set(!isProgramEndedModalOpen())"
-                  >
-                    <div class="cancel" style="padding: 24px">
+                @defer (when isLeaveProjectModalOpen()) {
+                  <app-modal [(open)]="isLeaveProjectModalOpen">
+                    <div class="cancel" style="padding: 14px 24px">
                       <div class="cancel__top">
-                        <p class="cancel__title text-body-14">
-                          к сожалению, программа уже завершена!
-                        </p>
+                        <h3 class="text-body-14 cancel__title" style="flex-wrap: wrap; width: 90%">
+                          вы уверены, что хотите покинуть команду
+                        </h3>
+                        <i appIcon icon="sad-smile" appSquare="50" class="cancel__icon"></i>
                       </div>
 
-                      <i appIcon icon="sad-smile" appSquare="50" style="margin-top: 36px"></i>
-                    </div>
-                  </app-modal>
+                      <div class="cancel__buttons">
+                        <app-button
+                          color="red"
+                          size="medium"
+                          customTypographyClass="unsubscribe-modal-btn__typography"
+                          (click)="onLeave()"
+                        >
+                          покинуть команду
+                        </app-button>
+
+                        <app-button
+                          size="medium"
+                          customTypographyClass="unsubscribe-modal-btn__typography"
+                          (click)="onCloseLeaveProjectModal()"
+                        >
+                          остаться
+                        </app-button>
+                      </div>
+                    </div>
+                  </app-modal>
                 }
+              } @else {
+                <app-button
+                  [routerLink]="AppRoutes.projects.vacancies(info().id)"
+                  [appearance]="isVacanciesPage() ? 'inline' : 'outline'"
+                  size="medium"
+                  customTypographyClass="text-body-12"
+                >
+                  вакансии
+                </app-button>
+              }
+            </ng-template>
 
-                @defer (when isProgramSubmissionProjectsEndedModalOpen()) {
+            <ng-template #profileTpl>
+              @if (profile()) {
+                @if (+profile()!.id === +info().id) {
+                  <app-button
+                    size="medium"
+                    appearance="outline"
+                    customTypographyClass="text-body-12"
+                    (click)="onCopyLink(info().id)"
+                    >поделиться профилем</app-button
+                  >
+                } @else {
+                  <app-button
+                    size="medium"
+                    appearance="outline"
+                    customTypographyClass="text-body-12"
+                    (click)="showApproveSkillModal.set(true)"
+                    >подтвердить навыки</app-button
+                  >
+                }
+                @if (+profile()!.id === +info().id) {
+                  <app-button
+                    style="opacity: 0.5"
+                    size="medium"
+                    appearance="outline"
+                    [disabled]="true"
+                    customTypographyClass="text-body-12"
+                    >мои проекты</app-button
+                  >
+                } @else {
+                  <app-button
+                    size="medium"
+                    appearance="outline"
+                    customTypographyClass="text-body-12"
+                    (click)="onCopyLink(info().id)"
+                    >поделиться профилем</app-button
+                  >
+                }
+
+                <div class="info__divider"></div>
+
+                @if (+profile()!.id === +info().id) {
+                  <app-button
+                    (click)="downloadCV()"
+                    size="medium"
+                    [loader]="isSended()"
+                    appearance="outline"
+                    customTypographyClass="text-body-12"
+                    >cкачать CV</app-button
+                  >
+                } @else {
+                  <app-button
+                    size="medium"
+                    appearance="outline"
+                    customTypographyClass="text-body-12"
+                    (click)="inviteUser($event)"
+                    >пригласить</app-button
+                  >
+                }
+                @if (+profile()!.id !== +info().id) {
+                  <a
+                    class="info__send-message"
+                    [routerLink]="AppRoutes.chats.detail(profile()!.id + '_' + info().id)"
+                  >
+                    <app-button
+                      appearance="outline"
+                      size="medium"
+                      [disabled]="true"
+                      customTypographyClass="text-body-12"
+                      >написать</app-button
+                    >
+                  </a>
+                } @else {
+                  <a
+                    class="profile__edit"
+                    [routerLink]="AppRoutes.profile.edit()"
+                    [queryParams]="{ editingStep: 'main' }"
+                  >
+                    <app-button
+                      appearance="outline"
+                      size="medium"
+                      customTypographyClass="text-body-12"
+                    >
+                      редактировать
+                    </app-button>
+                  </a>
+                }
+
+                @defer (when showApproveSkillModal()) {
                   <app-modal
-                    [open]="isProgramSubmissionProjectsEndedModalOpen()"
-                    (openChange)="
-                      isProgramSubmissionProjectsEndedModalOpen.set(
-                        !isProgramSubmissionProjectsEndedModalOpen()
-                      )
-                    "
+                    [open]="showApproveSkillModal()"
+                    (openChange)="showApproveSkillModal.set(!showApproveSkillModal())"
                   >
-                    <div class="cancel" style="padding: 24px">
-                      <div class="cancel__top">
-                        <p class="cancel__title text-body-14">
-                          к сожалению, подача проекта уже завершена!
+                    @if (info().skills.length) {
+                      <ul class="approve">
+                        <div class="lists__section">
+                          <h3 class="text-body-12 lists__title">подтвердить владение навыком</h3>
+                          <i
+                            appIcon
+                            icon="squiz"
+                            class="lists__icon"
+                            style="margin-top: 1px"
+                            appSquare="12"
+                          ></i>
+                        </div>
+
+                        @for (skill of info().skills; track skill.id) {
+                          <li (click)="onOpenSkill(skill.id)">
+                            <app-approve-skill [skill]="skill"></app-approve-skill>
+                          </li>
+                        }
+                      </ul>
+                    }
+                  </app-modal>
+                }
+
+                @if (showSendInviteModal()) {
+                  <app-profile-project-invite-modal
+                    [projects]="profileProjects()"
+                    [form]="inviteForm"
+                    [selectedProjectId]="selectedProjectId()"
+                    [loading]="detailProfileInfoService.inviteLoading()"
+                    [error]="detailProfileInfoService.inviteError()"
+                    [trigger]="inviteTrigger"
+                    (selected)="selectedProjectId.set($event)"
+                    (sent)="sendInvite()"
+                    (closed)="detailProfileInfoService.closeInvite()"
+                    (projectsRequested)="
+                      detailProfileInfoService.closeInvite(); routingToMyProjects()
+                    "
+                  />
+                }
+              }
+              @if (profile()) {
+                @if (profile()!.id === info().id) {
+                  @defer (when isProfileFill()) {
+                    <app-modal
+                      [open]="isProfileFill()"
+                      (openChange)="!$event ? acknowledgeProfileFillPrompt() : null"
+                    >
+                      <div class="cancel">
+                        <img
+                          alt="profile unfill image"
+                          class="cancel__image"
+                          src="/assets/images/profile/profile-unfill.png"
+                        />
+                        <div class="cancel__top">
+                          <i
+                            (click)="acknowledgeProfileFillPrompt()"
+                            appIcon
+                            appSquare="12"
+                            icon="cross"
+                            class="cancel__cross"
+                          ></i>
+                          <p class="cancel__title text-body-14">
+                            Заполните все поля, чтобы использовать PROCOLLAB на максимум
+                          </p>
+                        </div>
+                        <p class="text-body-10 cancel__text">
+                          Заполните все поля, чтобы иметь сильное резюме
                         </p>
+
+                        <app-button
+                          size="big"
+                          customTypographyClass="text-body-12"
+                          [disabled]="profileFillAcknowledgementPending()"
+                          (click)="acknowledgeProfileFillPrompt(true)"
+                        >
+                          продолжить заполнение
+                        </app-button>
                       </div>
+                    </app-modal>
+                  }
+                }
+              }
 
-                      <i appIcon icon="sad-smile" appSquare="50" style="margin-top: 36px"></i>
+              @defer (when isDelayModalOpen()) {
+                <app-modal
+                  [open]="isDelayModalOpen()"
+                  (openChange)="isDelayModalOpen.set(!isDelayModalOpen())"
+                >
+                  <div class="cancel">
+                    <div class="cancel__top">
+                      <i
+                        (click)="isDelayModalOpen.set(false)"
+                        appIcon
+                        appSquare="8"
+                        icon="cross"
+                        class="cancel__cross"
+                      ></i>
+                      <p class="cancel__title text-bold-body-16">Повторите загрузку позже</p>
                     </div>
-                  </app-modal>
+                    <p class="text-body-14 cancel__text">
+                      Скачивание будет доступно через несколько секунд.
+                    </p>
+                  </div>
+                </app-modal>
+              }
+            </ng-template>
+
+            <router-outlet></router-outlet>
+          </div>
+        </div>
+      }
+    </div>
+  </div>
+} @else {
+  <div class="detail">
+    <div class="detail__body">
+      @if (info()) {
+        <div class="info detail__section detail__info">
+          <div class="info__cover" [class.info__cover--program]="listType() === 'program'">
+            <img
+              class="info__cover"
+              [class.info__cover--program]="listType() === 'program'"
+              [src]="
+                info().coverImageAddress
+                  ? info().coverImageAddress
+                  : '/assets/images/office/profile/detail/cover.png'
+              "
+              alt="cover"
+            />
+
+            <div
+              class="info__avatar"
+              (click)="redirectDetailInfo()"
+              [class.info__avatar--program]="listType() === 'program'"
+              [style.width]="
+                appWidth < 1000
+                  ? '105px'
+                  : listType() === 'project' || listType() === 'profile'
+                    ? '110px'
+                    : '123px'
+              "
+            >
+              @if (chatStateService.userOnlineStatusCache | async; as cache) {
+                <app-avatar
+                  [url]="listType() === 'profile' ? info().avatar : info().imageAddress"
+                  [hasBorder]="true"
+                  [borderColor]="listType() === 'project' ? 'white' : 'dark-grey'"
+                  [progress]="info().progress"
+                  [onlineBadgeSize]="15"
+                  [onlineBadgeBorder]="0"
+                  [onlineBadgeOffset]="8"
+                  [size]="
+                    appWidth < 1000
+                      ? 105
+                      : listType() === 'project' || listType() === 'profile'
+                        ? 110
+                        : 123
+                  "
+                  [isOnline]="cache[info().id] !== undefined ? cache[info().id] : info().isOnline"
+                ></app-avatar>
+                @if (appWidth >= 1000 && (listType() === "project" || listType() === "profile")) {
+                  <h1
+                    class="info__title text-body-12"
+                    [style.width]="
+                      listType() === 'project' || listType() === 'profile' ? '300px' : '100%'
+                    "
+                    [class.info__title--project]="
+                      listType() === 'project' || listType() === 'profile'
+                    "
+                  >
+                    {{
+                      listType() === "project"
+                        ? info().name
+                        : listType() === "profile"
+                          ? info().firstName + " " + info().lastName
+                          : ""
+                    }}
+                  </h1>
                 }
+              }
+            </div>
+          </div>
+
+          <div class="info__body">
+            @if (appWidth < 1000) {
+              <app-page-header
+                class="info__page-header"
+                [title]="
+                  listType() === 'profile' ? info().firstName + ' ' + info().lastName : info().name
+                "
+              />
+            }
+            <div class="info__actions">
+              <ng-container
+                *ngTemplateOutlet="
+                  listType() === 'program'
+                    ? programTpl
+                    : listType() === 'profile'
+                      ? profileTpl
+                      : projectTpl
+                "
+              ></ng-container>
+            </div>
+
+            <ng-template #programTpl>
+              @if (userType() !== undefined) {
+                @if (
+                  (isProjectsPage() ||
+                    isProjectsRatingPage() ||
+                    isAnalyticsPage() ||
+                    isMembersPage()) &&
+                  appWidth < 1000
+                ) {
+                  <a [routerLink]="AppRoutes.program.detail(info().id)">
+                    <app-button
+                      appearance="outline"
+                      size="small"
+                      class="info__contacts"
+                      customTypographyClass="text-body-12"
+                    >
+                      <span>назад</span>
+                    </app-button>
+                  </a>
+
+                  @if (isUserMember() && info().links?.length) {
+                    <app-button
+                      appearance="outline"
+                      size="small"
+                      [disabled]="!info().links?.length"
+                      class="info__contacts"
+                      customTypographyClass="text-body-12"
+                      (click)="isContactsModalOpen.set(true)"
+                    >
+                      <i appIcon icon="phone" appSquare="12"></i>
+                      @if (appWidth < 1000) {
+                        <span>Контакты</span>
+                      }
+                    </app-button>
+                  }
 
-                @defer (when isContactsModalOpen()) {
                   <app-modal
                     [open]="isContactsModalOpen()"
                     (openChange)="isContactsModalOpen.set(!isContactsModalOpen())"
@@ -370,415 +925,665 @@
                       [links]="contactLinks()"
                     ></app-program-links>
                   </app-modal>
+                } @else {
+                  <div class="info__primary-action">
+                    @if (!isUserMember() && !isUserManager()) {
+                      @if (getProgramRegistrationLink(info()); as registrationLink) {
+                        <a
+                          (click)="checkPrograRegistrationEnded($event, info())"
+                          [href]="registrationLink"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <app-button
+                            appearance="outline"
+                            size="medium"
+                            customTypographyClass="text-body-12"
+                          >
+                            зарегистрироваться
+                          </app-button>
+                        </a>
+                      }
+                    }
+                    @if (isUserMember() && !isUserManager() && !isUserExpert()) {
+                      <app-button
+                        [size]="appWidth >= 1000 ? 'medium' : 'big'"
+                        [disabled]="
+                          !!submissionProjectDateExpired ||
+                          isProjectAssigned() ||
+                          applicationPending()
+                        "
+                        [appearance]="isProjectAssigned() ? 'outline' : 'inline'"
+                        (click)="isProjectAssigned() ? null : addNewProject(info().id)"
+                        customTypographyClass="text-body-12 bar__add-project"
+                      >
+                        <span>{{ applicationLabel() }}</span>
+                        <i appIcon icon="plus" appSquare="10"></i>
+                      </app-button>
+                    }
+                    @if ((isUserManager() || isUserExpert()) && isUserMember()) {
+                      <a [routerLink]="AppRoutes.program.projectsRating(info().id)">
+                        <app-button
+                          [appearance]="
+                            isProjectsRatingPage() || appWidth < 1000 ? 'inline' : 'outline'
+                          "
+                          [size]="appWidth >= 1000 ? 'medium' : 'big'"
+                          customTypographyClass="text-body-12"
+                        >
+                          оценка проектов
+                        </app-button>
+                      </a>
+                    }
+                  </div>
+
+                  @if (isUserManager()) {
+                    <a [routerLink]="AppRoutes.program.analytics(info().id)">
+                      <app-button
+                        [appearance]="isAnalyticsPage() ? 'inline' : 'outline'"
+                        [size]="appWidth >= 1000 ? 'medium' : 'big'"
+                        customTypographyClass="text-body-12"
+                      >
+                        аналитика
+                      </app-button>
+                    </a>
+                  } @else {
+                    <a [href]="info().presentationAddress" download="" target="_blank">
+                      <app-button
+                        appearance="outline"
+                        [size]="appWidth >= 1000 ? 'medium' : 'small'"
+                        customTypographyClass="text-body-12"
+                      >
+                        <span>{{
+                          info().name.includes("Технолидеры Будущего")
+                            ? "Каталог лучших стартапов 2022/23"
+                            : "положение"
+                        }}</span>
+                        <i
+                          appIcon
+                          class="info__presentation-icon"
+                          [icon]="appWidth >= 1000 ? 'arrow-down' : 'file'"
+                          [appSquare]="appWidth >= 1000 ? '8' : '12'"
+                        ></i>
+                      </app-button>
+                    </a>
+                  }
+
+                  @if (appWidth >= 1000) {
+                    <div class="info__divider"></div>
+                  }
+                  @if (appWidth < 1000) {
+                    @if (isUserMember() && info().links?.length) {
+                      <app-button
+                        appearance="outline"
+                        size="small"
+                        [disabled]="!info().links?.length"
+                        class="info__contacts"
+                        customTypographyClass="text-body-12"
+                        (click)="isContactsModalOpen.set(true)"
+                      >
+                        <i appIcon icon="phone" appSquare="12"></i>
+                        @if (appWidth < 1000) {
+                          <span>Контакты</span>
+                        }
+                      </app-button>
+                    }
+                  }
+                  @if (isUserManager() || (isUserExpert() && appWidth >= 1000)) {
+                    <a [routerLink]="AppRoutes.program.projects(info().id)">
+                      <app-button
+                        [appearance]="isProjectsPage() ? 'inline' : 'outline'"
+                        size="medium"
+                        [disabled]="isUserExpert() && !isUserManager()"
+                        customTypographyClass="text-body-12"
+                      >
+                        проекты-участники
+                      </app-button>
+                    </a>
+                  }
+                  @if (!isUserManager() && !isUserExpert() && appWidth >= 1000) {
+                    <a class="info__more">
+                      <app-button
+                        appearance="outline"
+                        [disabled]="true"
+                        size="medium"
+                        customTypographyClass="text-body-12"
+                      >
+                        узнать подробнее
+                      </app-button>
+                    </a>
+                  }
+                  @if (isUserManager() || (isUserExpert() && appWidth >= 1000)) {
+                    <a [routerLink]="AppRoutes.program.members(info().id)" class="info__members">
+                      <app-button
+                        [appearance]="isMembersPage() ? 'inline' : 'outline'"
+                        size="medium"
+                        [disabled]="isUserExpert() && !isUserManager()"
+                        customTypographyClass="text-body-12"
+                      >
+                        участники
+                      </app-button>
+                    </a>
+                  }
+                  @if (appWidth < 1000) {
+                    <app-button
+                      appearance="outline"
+                      size="big"
+                      [disabled]="!info().materials?.length"
+                      class="info__materials"
+                      [class.info__materials--full]="isUserManager() || isUserExpert()"
+                      customTypographyClass="text-body-12"
+                      (click)="isMaterialsModalOpen.set(true)"
+                    >
+                      материалы
+                    </app-button>
+                  }
+                  @if (!isUserManager() && !isUserExpert()) {
+                    <app-button
+                      (click)="
+                        info().courses?.length
+                          ? router.navigateByUrl(AppRoutes.courses.detail(info().courses[0].id))
+                          : null
+                      "
+                      appearance="outline"
+                      [disabled]="!info().courses?.length"
+                      [size]="appWidth >= 1000 ? 'medium' : 'big'"
+                      customTypographyClass="text-body-12"
+                    >
+                      {{ appWidth >= 1000 ? "перейти в курс" : "курс" }}
+                    </app-button>
+                  }
+
+                  @defer (when isAssignProjectToProgramModalOpen()) {
+                    <app-modal
+                      [open]="isAssignProjectToProgramModalOpen()"
+                      (openChange)="
+                        isAssignProjectToProgramModalOpen.set(!isAssignProjectToProgramModalOpen())
+                      "
+                    >
+                      <div class="cancel" style="width: 100%">
+                        <div class="cancel__top">
+                          <i
+                            (click)="isAssignProjectToProgramModalOpen.set(false)"
+                            appIcon
+                            appSquare="10"
+                            icon="cross"
+                            class="cancel__cross"
+                          ></i>
+                          <p class="cancel__title text-body-14">
+                            произошла ошибка при редактировании!
+                          </p>
+                        </div>
+                        <p class="text-body-12 cancel__text">
+                          {{ assignProjectToProgramModalMessage() }}.
+                        </p>
+                      </div>
+                    </app-modal>
+                  }
+
+                  @defer (when isProgramEndedModalOpen()) {
+                    <app-modal
+                      [open]="isProgramEndedModalOpen()"
+                      (openChange)="isProgramEndedModalOpen.set(!isProgramEndedModalOpen())"
+                    >
+                      <div class="cancel" style="padding: 24px">
+                        <div class="cancel__top">
+                          <p class="cancel__title text-body-14">
+                            к сожалению, программа уже завершена!
+                          </p>
+                        </div>
+
+                        <i appIcon icon="sad-smile" appSquare="50" style="margin-top: 36px"></i>
+                      </div>
+                    </app-modal>
+                  }
+
+                  @defer (when isProgramSubmissionProjectsEndedModalOpen()) {
+                    <app-modal
+                      [open]="isProgramSubmissionProjectsEndedModalOpen()"
+                      (openChange)="
+                        isProgramSubmissionProjectsEndedModalOpen.set(
+                          !isProgramSubmissionProjectsEndedModalOpen()
+                        )
+                      "
+                    >
+                      <div class="cancel" style="padding: 24px">
+                        <div class="cancel__top">
+                          <p class="cancel__title text-body-14">
+                            к сожалению, подача проекта уже завершена!
+                          </p>
+                        </div>
+
+                        <i appIcon icon="sad-smile" appSquare="50" style="margin-top: 36px"></i>
+                      </div>
+                    </app-modal>
+                  }
+
+                  @defer (when isContactsModalOpen()) {
+                    <app-modal
+                      [open]="isContactsModalOpen()"
+                      (openChange)="isContactsModalOpen.set(!isContactsModalOpen())"
+                      bodyClass="modal__body--no-flex"
+                    >
+                      <app-program-links
+                        title="контакты"
+                        icon="phone"
+                        [links]="contactLinks()"
+                      ></app-program-links>
+                    </app-modal>
+                  }
+
+                  @defer (when isMaterialsModalOpen()) {
+                    <app-modal
+                      [open]="isMaterialsModalOpen()"
+                      (openChange)="isMaterialsModalOpen.set(!isMaterialsModalOpen())"
+                      bodyClass="modal__body--no-flex"
+                    >
+                      <app-program-links
+                        title="материалы"
+                        icon="book"
+                        [links]="materialLinks()"
+                      ></app-program-links>
+                    </app-modal>
+                  }
                 }
+              }
+            </ng-template>
 
-                @defer (when isMaterialsModalOpen()) {
-                  <app-modal
-                    [open]="isMaterialsModalOpen()"
-                    (openChange)="isMaterialsModalOpen.set(!isMaterialsModalOpen())"
-                    bodyClass="modal__body--no-flex"
+            <ng-template #projectTpl>
+              @if (isInProject()) {
+                <span
+                  class="info__unavailable"
+                  tabindex="0"
+                  role="group"
+                  aria-label="Рабочая зона"
+                  aria-describedby="workspace-coming-soon"
+                >
+                  <app-button
+                    [disabled]="true"
+                    appearance="outline"
+                    size="medium"
+                    customTypographyClass="text-body-12"
+                  >
+                    рабочая зона
+                  </app-button>
+                  <span class="info__unavailable-tooltip" role="tooltip" id="workspace-coming-soon"
+                    >Появится позже</span
+                  >
+                </span>
+              } @else {
+                <a class="info__presentation" [href]="info().presentationAddress" target="_blank">
+                  <app-button
+                    appearance="outline"
+                    size="medium"
+                    customTypographyClass="text-body-12"
                   >
-                    <app-program-links
-                      title="материалы"
-                      icon="book"
-                      [links]="materialLinks()"
-                    ></app-program-links>
-                  </app-modal>
-                }
+                    <span>презентация</span>
+                    <i appIcon icon="arrow-down" appSquare="6"></i>
+                  </app-button>
+                </a>
               }
-            }
-          </ng-template>
-
-          <ng-template #projectTpl>
-            @if (isInProject()) {
-              <span
-                class="info__unavailable"
-                tabindex="0"
-                role="group"
-                aria-label="Рабочая зона"
-                aria-describedby="workspace-coming-soon"
-              >
-                <app-button
-                  [disabled]="true"
-                  appearance="outline"
-                  size="medium"
-                  customTypographyClass="text-body-12"
-                >
-                  рабочая зона
-                </app-button>
-                <span class="info__unavailable-tooltip" role="tooltip" id="workspace-coming-soon"
-                  >Появится позже</span
-                >
-              </span>
-            } @else {
-              <a class="info__presentation" [href]="info().presentationAddress" target="_blank">
-                <app-button appearance="outline" size="medium" customTypographyClass="text-body-12">
-                  <span>презентация</span>
-                  <i appIcon icon="arrow-down" appSquare="6"></i>
-                </app-button>
-              </a>
-            }
-            @if (!isInProject()) {
-              <app-button
-                [disabled]="true"
-                appearance="outline"
-                size="medium"
-                customTypographyClass="text-body-12"
-              >
-                написать
-              </app-button>
-            } @else {
-              <span
-                class="info__unavailable"
-                tabindex="0"
-                role="group"
-                aria-label="Чат проекта"
-                aria-describedby="chat-coming-soon"
-              >
+              @if (!isInProject()) {
                 <app-button
                   [disabled]="true"
                   appearance="outline"
                   size="medium"
                   customTypographyClass="text-body-12"
                 >
-                  чат проекта
+                  написать
                 </app-button>
-                <span class="info__unavailable-tooltip" role="tooltip" id="chat-coming-soon"
-                  >Появится позже</span
+              } @else {
+                <span
+                  class="info__unavailable"
+                  tabindex="0"
+                  role="group"
+                  aria-label="Чат проекта"
+                  aria-describedby="chat-coming-soon"
                 >
-              </span>
-            }
-
-            <div class="info__divider"></div>
-
-            <app-button
-              [routerLink]="AppRoutes.projects.team(info().id)"
-              [appearance]="isTeamPage() ? 'inline' : 'outline'"
-              size="medium"
-              customTypographyClass="text-body-12"
-            >
-              команда
-            </app-button>
-
-            @if (isInProject()) {
-              @if (profile()) {
-                @if (profile()?.id === info().leader) {
-                  <a
-                    class="info__edit"
-                    [routerLink]="
-                      isEditDisable()
-                        ? AppRoutes.projects.detail(info().id)
-                        : AppRoutes.projects.edit(info().id)
-                    "
-                    [queryParams]="isEditDisable() ? {} : { editingStep: 'main' }"
-                  >
-                    <app-button
-                      appearance="outline"
-                      size="medium"
-                      customTypographyClass="text-body-12"
-                      (click)="onUnableEditingProject()"
-                      [ngStyle]="{ opacity: isEditDisable() ? '0.5' : '1' }"
-                      [color]="isEditDisable() ? 'grey' : 'primary'"
-                    >
-                      редактировать
-                    </app-button>
-                  </a>
-                } @else {
                   <app-button
+                    [disabled]="true"
                     appearance="outline"
-                    color="red"
                     size="medium"
                     customTypographyClass="text-body-12"
-                    (click)="this.isLeaveProjectModalOpen.set(true)"
                   >
-                    выйти из проекта
+                    чат проекта
                   </app-button>
-                }
+                  <span class="info__unavailable-tooltip" role="tooltip" id="chat-coming-soon"
+                    >Появится позже</span
+                  >
+                </span>
               }
 
-              @defer (when isEditDisableModal()) {
-                <app-modal [(open)]="isEditDisableModal">
-                  <div
-                    class="unsubscribe-modal"
-                    style="text-align: center; padding: 20px; position: relative"
-                  >
-                    <i
-                      style="right: 0px; top: 0px"
-                      class="support__cross"
-                      appIcon
-                      icon="cross"
-                      appSquare="12"
-                      (click)="isEditDisableModal.set(false)"
-                    ></i>
-                    <img
-                      src="assets/images/projects/shared/edit_disable.svg"
-                      alt="idea"
-                      sizes="120"
-                      class="unsubscribe-modal__img"
-                    />
-                    <h4 class="support__title text-body-12">редактирование недоступно</h4>
-
-                    <p class="support__text text-body-10">
-                      Этот проект уже отправлен на конкурс. <br />Изменения будут доступны только
-                      после окончания конкурса.
-                    </p>
+              <div class="info__divider"></div>
 
+              <app-button
+                [routerLink]="AppRoutes.projects.team(info().id)"
+                [appearance]="isTeamPage() ? 'inline' : 'outline'"
+                size="medium"
+                customTypographyClass="text-body-12"
+              >
+                команда
+              </app-button>
+
+              @if (isInProject()) {
+                @if (profile()) {
+                  @if (profile()?.id === info().leader) {
+                    <a
+                      class="info__edit"
+                      [routerLink]="
+                        isEditDisable()
+                          ? AppRoutes.projects.detail(info().id)
+                          : AppRoutes.projects.edit(info().id)
+                      "
+                      [queryParams]="isEditDisable() ? {} : { editingStep: 'main' }"
+                    >
+                      <app-button
+                        appearance="outline"
+                        size="medium"
+                        customTypographyClass="text-body-12"
+                        (click)="onUnableEditingProject()"
+                        [ngStyle]="{ opacity: isEditDisable() ? '0.5' : '1' }"
+                        [color]="isEditDisable() ? 'grey' : 'primary'"
+                      >
+                        редактировать
+                      </app-button>
+                    </a>
+                  } @else {
                     <app-button
                       appearance="outline"
+                      color="red"
                       size="medium"
                       customTypographyClass="text-body-12"
-                      (click)="isEditDisableModal.set(false)"
-                      >хорошо</app-button
+                      (click)="this.isLeaveProjectModalOpen.set(true)"
                     >
-                  </div>
-                </app-modal>
-              }
+                      выйти из проекта
+                    </app-button>
+                  }
+                }
 
-              @defer (when isLeaveProjectModalOpen()) {
-                <app-modal [(open)]="isLeaveProjectModalOpen">
-                  <div class="cancel" style="padding: 14px 24px">
-                    <div class="cancel__top">
-                      <h3 class="text-body-14 cancel__title" style="flex-wrap: wrap; width: 90%">
-                        вы уверены, что хотите покинуть команду
-                      </h3>
-                      <i appIcon icon="sad-smile" appSquare="50" class="cancel__icon"></i>
-                    </div>
+                @defer (when isEditDisableModal()) {
+                  <app-modal [(open)]="isEditDisableModal">
+                    <div
+                      class="unsubscribe-modal"
+                      style="text-align: center; padding: 20px; position: relative"
+                    >
+                      <i
+                        style="right: 0px; top: 0px"
+                        class="support__cross"
+                        appIcon
+                        icon="cross"
+                        appSquare="12"
+                        (click)="isEditDisableModal.set(false)"
+                      ></i>
+                      <img
+                        src="assets/images/projects/shared/edit_disable.svg"
+                        alt="idea"
+                        sizes="120"
+                        class="unsubscribe-modal__img"
+                      />
+                      <h4 class="support__title text-body-12">редактирование недоступно</h4>
 
-                    <div class="cancel__buttons">
-                      <app-button
-                        color="red"
-                        size="medium"
-                        customTypographyClass="unsubscribe-modal-btn__typography"
-                        (click)="onLeave()"
-                      >
-                        покинуть команду
-                      </app-button>
+                      <p class="support__text text-body-10">
+                        Этот проект уже отправлен на конкурс. <br />Изменения будут доступны только
+                        после окончания конкурса.
+                      </p>
 
                       <app-button
+                        appearance="outline"
                         size="medium"
-                        customTypographyClass="unsubscribe-modal-btn__typography"
-                        (click)="onCloseLeaveProjectModal()"
+                        customTypographyClass="text-body-12"
+                        (click)="isEditDisableModal.set(false)"
+                        >хорошо</app-button
                       >
-                        остаться
-                      </app-button>
                     </div>
-                  </div>
-                </app-modal>
-              }
-            } @else {
-              <app-button
-                [routerLink]="AppRoutes.projects.vacancies(info().id)"
-                [appearance]="isVacanciesPage() ? 'inline' : 'outline'"
-                size="medium"
-                customTypographyClass="text-body-12"
-              >
-                вакансии
-              </app-button>
-            }
-          </ng-template>
+                  </app-modal>
+                }
 
-          <ng-template #profileTpl>
-            @if (profile()) {
-              @if (+profile()!.id === +info().id) {
-                <app-button
-                  size="medium"
-                  appearance="outline"
-                  customTypographyClass="text-body-12"
-                  (click)="onCopyLink(info().id)"
-                  >поделиться профилем</app-button
-                >
-              } @else {
-                <app-button
-                  size="medium"
-                  appearance="outline"
-                  customTypographyClass="text-body-12"
-                  (click)="showApproveSkillModal.set(true)"
-                  >подтвердить навыки</app-button
-                >
-              }
-              @if (+profile()!.id === +info().id) {
-                <app-button
-                  style="opacity: 0.5"
-                  size="medium"
-                  appearance="outline"
-                  [disabled]="true"
-                  customTypographyClass="text-body-12"
-                  >мои проекты</app-button
-                >
-              } @else {
-                <app-button
-                  size="medium"
-                  appearance="outline"
-                  customTypographyClass="text-body-12"
-                  (click)="onCopyLink(info().id)"
-                  >поделиться профилем</app-button
-                >
-              }
+                @defer (when isLeaveProjectModalOpen()) {
+                  <app-modal [(open)]="isLeaveProjectModalOpen">
+                    <div class="cancel" style="padding: 14px 24px">
+                      <div class="cancel__top">
+                        <h3 class="text-body-14 cancel__title" style="flex-wrap: wrap; width: 90%">
+                          вы уверены, что хотите покинуть команду
+                        </h3>
+                        <i appIcon icon="sad-smile" appSquare="50" class="cancel__icon"></i>
+                      </div>
 
-              <div class="info__divider"></div>
+                      <div class="cancel__buttons">
+                        <app-button
+                          color="red"
+                          size="medium"
+                          customTypographyClass="unsubscribe-modal-btn__typography"
+                          (click)="onLeave()"
+                        >
+                          покинуть команду
+                        </app-button>
 
-              @if (+profile()!.id === +info().id) {
-                <app-button
-                  (click)="downloadCV()"
-                  size="medium"
-                  [loader]="isSended()"
-                  appearance="outline"
-                  customTypographyClass="text-body-12"
-                  >cкачать CV</app-button
-                >
+                        <app-button
+                          size="medium"
+                          customTypographyClass="unsubscribe-modal-btn__typography"
+                          (click)="onCloseLeaveProjectModal()"
+                        >
+                          остаться
+                        </app-button>
+                      </div>
+                    </div>
+                  </app-modal>
+                }
               } @else {
                 <app-button
+                  [routerLink]="AppRoutes.projects.vacancies(info().id)"
+                  [appearance]="isVacanciesPage() ? 'inline' : 'outline'"
                   size="medium"
-                  appearance="outline"
                   customTypographyClass="text-body-12"
-                  (click)="inviteUser($event)"
-                  >пригласить</app-button
                 >
+                  вакансии
+                </app-button>
               }
-              @if (+profile()!.id !== +info().id) {
-                <a
-                  class="info__send-message"
-                  [routerLink]="AppRoutes.chats.detail(profile()!.id + '_' + info().id)"
-                >
+            </ng-template>
+
+            <ng-template #profileTpl>
+              @if (profile()) {
+                @if (+profile()!.id === +info().id) {
                   <app-button
+                    size="medium"
                     appearance="outline"
+                    customTypographyClass="text-body-12"
+                    (click)="onCopyLink(info().id)"
+                    >поделиться профилем</app-button
+                  >
+                } @else {
+                  <app-button
                     size="medium"
-                    [disabled]="true"
+                    appearance="outline"
                     customTypographyClass="text-body-12"
-                    >написать</app-button
+                    (click)="showApproveSkillModal.set(true)"
+                    >подтвердить навыки</app-button
                   >
-                </a>
-              } @else {
-                <a
-                  class="profile__edit"
-                  [routerLink]="AppRoutes.profile.edit()"
-                  [queryParams]="{ editingStep: 'main' }"
-                >
+                }
+                @if (+profile()!.id === +info().id) {
                   <app-button
+                    style="opacity: 0.5"
+                    size="medium"
                     appearance="outline"
+                    [disabled]="true"
+                    customTypographyClass="text-body-12"
+                    >мои проекты</app-button
+                  >
+                } @else {
+                  <app-button
                     size="medium"
+                    appearance="outline"
                     customTypographyClass="text-body-12"
+                    (click)="onCopyLink(info().id)"
+                    >поделиться профилем</app-button
                   >
-                    редактировать
-                  </app-button>
-                </a>
-              }
+                }
 
-              @defer (when showApproveSkillModal()) {
-                <app-modal
-                  [open]="showApproveSkillModal()"
-                  (openChange)="showApproveSkillModal.set(!showApproveSkillModal())"
-                >
-                  @if (info().skills.length) {
-                    <ul class="approve">
-                      <div class="lists__section">
-                        <h3 class="text-body-12 lists__title">подтвердить владение навыком</h3>
-                        <i
-                          appIcon
-                          icon="squiz"
-                          class="lists__icon"
-                          style="margin-top: 1px"
-                          appSquare="12"
-                        ></i>
-                      </div>
+                <div class="info__divider"></div>
 
-                      @for (skill of info().skills; track skill.id) {
-                        <li (click)="onOpenSkill(skill.id)">
-                          <app-approve-skill [skill]="skill"></app-approve-skill>
-                        </li>
-                      }
-                    </ul>
-                  }
-                </app-modal>
-              }
+                @if (+profile()!.id === +info().id) {
+                  <app-button
+                    (click)="downloadCV()"
+                    size="medium"
+                    [loader]="isSended()"
+                    appearance="outline"
+                    customTypographyClass="text-body-12"
+                    >cкачать CV</app-button
+                  >
+                } @else {
+                  <app-button
+                    size="medium"
+                    appearance="outline"
+                    customTypographyClass="text-body-12"
+                    (click)="inviteUser($event)"
+                    >пригласить</app-button
+                  >
+                }
+                @if (+profile()!.id !== +info().id) {
+                  <a
+                    class="info__send-message"
+                    [routerLink]="AppRoutes.chats.detail(profile()!.id + '_' + info().id)"
+                  >
+                    <app-button
+                      appearance="outline"
+                      size="medium"
+                      [disabled]="true"
+                      customTypographyClass="text-body-12"
+                      >написать</app-button
+                    >
+                  </a>
+                } @else {
+                  <a
+                    class="profile__edit"
+                    [routerLink]="AppRoutes.profile.edit()"
+                    [queryParams]="{ editingStep: 'main' }"
+                  >
+                    <app-button
+                      appearance="outline"
+                      size="medium"
+                      customTypographyClass="text-body-12"
+                    >
+                      редактировать
+                    </app-button>
+                  </a>
+                }
 
-              @if (showSendInviteModal()) {
-                <app-profile-project-invite-modal
-                  [projects]="profileProjects()"
-                  [form]="inviteForm"
-                  [selectedProjectId]="selectedProjectId()"
-                  [loading]="detailProfileInfoService.inviteLoading()"
-                  [error]="detailProfileInfoService.inviteError()"
-                  [trigger]="inviteTrigger"
-                  (selected)="selectedProjectId.set($event)"
-                  (sent)="sendInvite()"
-                  (closed)="detailProfileInfoService.closeInvite()"
-                  (projectsRequested)="
-                    detailProfileInfoService.closeInvite(); routingToMyProjects()
-                  "
-                />
-              }
-            }
-            @if (profile()) {
-              @if (profile()!.id === info().id) {
-                @defer (when isProfileFill()) {
+                @defer (when showApproveSkillModal()) {
                   <app-modal
-                    [open]="isProfileFill()"
-                    (openChange)="!$event ? acknowledgeProfileFillPrompt() : null"
+                    [open]="showApproveSkillModal()"
+                    (openChange)="showApproveSkillModal.set(!showApproveSkillModal())"
                   >
-                    <div class="cancel">
-                      <img
-                        alt="profile unfill image"
-                        class="cancel__image"
-                        src="/assets/images/profile/profile-unfill.png"
-                      />
-                      <div class="cancel__top">
-                        <i
-                          (click)="acknowledgeProfileFillPrompt()"
-                          appIcon
-                          appSquare="12"
-                          icon="cross"
-                          class="cancel__cross"
-                        ></i>
-                        <p class="cancel__title text-body-14">
-                          Заполните все поля, чтобы использовать PROCOLLAB на максимум
-                        </p>
-                      </div>
-                      <p class="text-body-10 cancel__text">
-                        Заполните все поля, чтобы иметь сильное резюме
-                      </p>
+                    @if (info().skills.length) {
+                      <ul class="approve">
+                        <div class="lists__section">
+                          <h3 class="text-body-12 lists__title">подтвердить владение навыком</h3>
+                          <i
+                            appIcon
+                            icon="squiz"
+                            class="lists__icon"
+                            style="margin-top: 1px"
+                            appSquare="12"
+                          ></i>
+                        </div>
 
-                      <app-button
-                        size="big"
-                        customTypographyClass="text-body-12"
-                        [disabled]="profileFillAcknowledgementPending()"
-                        (click)="acknowledgeProfileFillPrompt(true)"
-                      >
-                        продолжить заполнение
-                      </app-button>
-                    </div>
+                        @for (skill of info().skills; track skill.id) {
+                          <li (click)="onOpenSkill(skill.id)">
+                            <app-approve-skill [skill]="skill"></app-approve-skill>
+                          </li>
+                        }
+                      </ul>
+                    }
                   </app-modal>
                 }
+
+                @if (showSendInviteModal()) {
+                  <app-profile-project-invite-modal
+                    [projects]="profileProjects()"
+                    [form]="inviteForm"
+                    [selectedProjectId]="selectedProjectId()"
+                    [loading]="detailProfileInfoService.inviteLoading()"
+                    [error]="detailProfileInfoService.inviteError()"
+                    [trigger]="inviteTrigger"
+                    (selected)="selectedProjectId.set($event)"
+                    (sent)="sendInvite()"
+                    (closed)="detailProfileInfoService.closeInvite()"
+                    (projectsRequested)="
+                      detailProfileInfoService.closeInvite(); routingToMyProjects()
+                    "
+                  />
+                }
               }
-            }
+              @if (profile()) {
+                @if (profile()!.id === info().id) {
+                  @defer (when isProfileFill()) {
+                    <app-modal
+                      [open]="isProfileFill()"
+                      (openChange)="!$event ? acknowledgeProfileFillPrompt() : null"
+                    >
+                      <div class="cancel">
+                        <img
+                          alt="profile unfill image"
+                          class="cancel__image"
+                          src="/assets/images/profile/profile-unfill.png"
+                        />
+                        <div class="cancel__top">
+                          <i
+                            (click)="acknowledgeProfileFillPrompt()"
+                            appIcon
+                            appSquare="12"
+                            icon="cross"
+                            class="cancel__cross"
+                          ></i>
+                          <p class="cancel__title text-body-14">
+                            Заполните все поля, чтобы использовать PROCOLLAB на максимум
+                          </p>
+                        </div>
+                        <p class="text-body-10 cancel__text">
+                          Заполните все поля, чтобы иметь сильное резюме
+                        </p>
 
-            @defer (when isDelayModalOpen()) {
-              <app-modal
-                [open]="isDelayModalOpen()"
-                (openChange)="isDelayModalOpen.set(!isDelayModalOpen())"
-              >
-                <div class="cancel">
-                  <div class="cancel__top">
-                    <i
-                      (click)="isDelayModalOpen.set(false)"
-                      appIcon
-                      appSquare="8"
-                      icon="cross"
-                      class="cancel__cross"
-                    ></i>
-                    <p class="cancel__title text-bold-body-16">Повторите загрузку позже</p>
+                        <app-button
+                          size="big"
+                          customTypographyClass="text-body-12"
+                          [disabled]="profileFillAcknowledgementPending()"
+                          (click)="acknowledgeProfileFillPrompt(true)"
+                        >
+                          продолжить заполнение
+                        </app-button>
+                      </div>
+                    </app-modal>
+                  }
+                }
+              }
+
+              @defer (when isDelayModalOpen()) {
+                <app-modal
+                  [open]="isDelayModalOpen()"
+                  (openChange)="isDelayModalOpen.set(!isDelayModalOpen())"
+                >
+                  <div class="cancel">
+                    <div class="cancel__top">
+                      <i
+                        (click)="isDelayModalOpen.set(false)"
+                        appIcon
+                        appSquare="8"
+                        icon="cross"
+                        class="cancel__cross"
+                      ></i>
+                      <p class="cancel__title text-bold-body-16">Повторите загрузку позже</p>
+                    </div>
+                    <p class="text-body-14 cancel__text">
+                      Скачивание будет доступно через несколько секунд.
+                    </p>
                   </div>
-                  <p class="text-body-14 cancel__text">
-                    Скачивание будет доступно через несколько секунд.
-                  </p>
-                </div>
-              </app-modal>
-            }
-          </ng-template>
+                </app-modal>
+              }
+            </ng-template>
 
-          <router-outlet></router-outlet>
+            <router-outlet></router-outlet>
+          </div>
         </div>
-      </div>
-    }
+      }
+    </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss b/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss
index 6de94fd1a..f5d8d84bd 100644
--- a/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/detail/detail.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -420,3 +419,120 @@ $detail-bar-mb: 12px;
     white-space: nowrap;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .info {
+    &__unavailable-tooltip {
+      font-size: var(--ui-font-small);
+      box-shadow: var(--ui-panel-shadow);
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    .detail {
+      height: auto;
+      margin: 0 var(--page-gutter);
+    }
+
+    .detail__body {
+      max-height: none;
+    }
+
+    .info__row {
+      @include responsive.mobile-actions;
+    }
+
+    .approve {
+      min-width: 0;
+      padding: 8px;
+    }
+
+    .project__item,
+    .project__item--info {
+      @include responsive.mobile-actions;
+    }
+
+    .approves__text {
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+  }
+
+  .info__page-header {
+    padding-top: 80px;
+  }
+
+  @include responsive.apply-below-desktop {
+    .info__cover,
+    .info__cover--program {
+      height: 136px;
+    }
+
+    .info__avatar,
+    .info__avatar--program {
+      bottom: -32px;
+      left: 16px;
+      transform: none;
+    }
+
+    .info__page-header {
+      padding-top: 52px;
+      margin-bottom: 16px;
+    }
+
+    .info__actions {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      align-items: stretch;
+      padding: 0 0 24px;
+
+      > a,
+      > app-button,
+      > .info__unavailable,
+      > .info__primary-action {
+        display: block;
+        justify-self: stretch;
+        width: 100%;
+        min-width: 0;
+      }
+
+      ::ng-deep app-button {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      ::ng-deep app-button > button {
+        width: 100%;
+        height: 100%;
+        padding-right: 12px;
+        padding-left: 12px;
+      }
+    }
+
+    .info__divider {
+      display: none;
+    }
+
+    .info__primary-action {
+      order: 0;
+    }
+
+    .info__materials--full {
+      grid-column: auto;
+    }
+  }
+
+  .approve,
+  .cancel,
+  .support {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    padding: 0;
+  }
+
+  .info__page-header + .info__actions {
+    padding-top: 0;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/detail/detail.component.ts b/projects/social_platform/src/app/ui/widgets/detail/detail.component.ts
index d6a8df487..733422b5a 100644
--- a/projects/social_platform/src/app/ui/widgets/detail/detail.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/detail/detail.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import { CommonModule, Location } from "@angular/common";
 import {
   ChangeDetectionStrategy,
@@ -10,7 +13,7 @@ import {
   OnInit,
 } from "@angular/core";
 import { ButtonComponent } from "@ui/primitives";
-import { IconComponent } from "@uilib";
+import { IconComponent, PageHeaderComponent } from "@uilib";
 import { ModalComponent } from "@ui/primitives/modal/modal.component";
 import { Router, RouterModule } from "@angular/router";
 import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
@@ -34,6 +37,7 @@ import { ProfileProjectInviteModalComponent } from "@ui/widgets/project-invite/p
   templateUrl: "./detail.component.html",
   styleUrl: "./detail.component.scss",
   imports: [
+    PageHeaderComponent,
     CommonModule,
     RouterModule,
     IconComponent,
@@ -55,6 +59,8 @@ import { ProfileProjectInviteModalComponent } from "@ui/widgets/project-invite/p
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeatilComponent implements OnInit, OnDestroy {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   protected readonly AppRoutes = AppRoutes;
   private readonly projectAdditionalService = inject(ProjectAdditionalService);
   protected readonly location = inject(Location);
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html
index 9d6772d95..e00165f08 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.html
@@ -1,57 +1,91 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="desktop">
+    <ng-container *ngTemplateOutlet="filter"></ng-container>
+  </div>
 
-<div class="desktop">
-  <ng-container *ngTemplateOutlet="filter"></ng-container>
-</div>
-
-<div class="mobile">
-  <div class="select" (clickOutside)="onClickOutside()">
-    <div
-      class="select__input"
-      [class.select__input--open]="filterOpen()"
-      (click)="filterOpen.set(!filterOpen())"
-    >
-      Фильтр
-    </div>
-    <i
-      appIcon
-      icon="arrow-no-body"
-      appSquare="15"
-      class="select__dropdown-icon"
-      (click)="filterOpen.set(!filterOpen())"
-    ></i>
-    @if (filterOpen()) {
-      <div class="select__dropdown" @dropdownAnimation>
-        <ng-container *ngTemplateOutlet="filter"></ng-container>
-        <a class="text-body-12" (click)="resetFilter()">сбросить</a>
+  <div class="mobile">
+    <div class="select" (clickOutside)="onClickOutside()">
+      <div
+        class="select__input"
+        [class.select__input--open]="filterOpen()"
+        (click)="filterOpen.set(!filterOpen())"
+      >
+        Фильтр
       </div>
-    }
+      <i
+        appIcon
+        icon="arrow-no-body"
+        appSquare="15"
+        class="select__dropdown-icon"
+        (click)="filterOpen.set(!filterOpen())"
+      ></i>
+      @if (filterOpen()) {
+        <div class="select__dropdown" @dropdownAnimation>
+          <ng-container *ngTemplateOutlet="filter"></ng-container>
+          <a class="text-body-12" (click)="resetFilter()">сбросить</a>
+        </div>
+      }
+    </div>
   </div>
-</div>
 
-<ng-template #filter>
-  <div class="filter">
-    @for (filterItem of feedFilterOptions; track $index) {
-      <button
-        type="button"
-        class="filter__option"
-        [disabled]="filterItem.id === 5"
-        [attr.aria-pressed]="filterItem.value === includedFilters()"
-        [class.filter__option--disable]="filterItem.id === 5"
-        [class.filter__option--active]="filterItem.value === includedFilters()"
-        (click)="filterItem.id !== 5 && setFilter(filterItem.value)"
-      >
-        <span class="filter__option--icon" aria-hidden="true">
-          <i appIcon [icon]="filterItem.icon" appSquare="18"></i>
-        </span>
-        <span class="filter__title">{{ filterItem.name }}</span>
-        <span
-          class="filter__count"
-          [attr.aria-label]="'Количество: ' + categoryCount(filterItem.value)"
+  <ng-template #filter>
+    <div class="filter">
+      @for (filterItem of feedFilterOptions; track $index) {
+        <button
+          type="button"
+          class="filter__option"
+          [disabled]="filterItem.id === 5"
+          [attr.aria-pressed]="filterItem.value === includedFilters()"
+          [class.filter__option--disable]="filterItem.id === 5"
+          [class.filter__option--active]="filterItem.value === includedFilters()"
+          (click)="filterItem.id !== 5 && setFilter(filterItem.value)"
         >
-          {{ categoryCount(filterItem.value) }}
-        </span>
-      </button>
-    }
+          <span class="filter__option--icon" aria-hidden="true">
+            <i appIcon [icon]="filterItem.icon" appSquare="18"></i>
+          </span>
+          <span class="filter__title">{{ filterItem.name }}</span>
+          <span
+            class="filter__count"
+            [attr.aria-label]="'Количество: ' + categoryCount(filterItem.value)"
+          >
+            {{ categoryCount(filterItem.value) }}
+          </span>
+        </button>
+      }
+    </div>
+  </ng-template>
+} @else {
+  <div appFilters class="desktop">
+    <ng-container *ngTemplateOutlet="filter"></ng-container>
   </div>
-</ng-template>
+
+  <ng-template #filter>
+    <div class="filter">
+      @for (filterItem of feedFilterOptions; track $index) {
+        <button
+          appButton="secondary"
+          type="button"
+          class="filter__option"
+          [disabled]="filterItem.id === 5"
+          [attr.aria-pressed]="filterItem.value === includedFilters()"
+          [class.filter__option--disable]="filterItem.id === 5"
+          [class.filter__option--active]="filterItem.value === includedFilters()"
+          (click)="filterItem.id !== 5 && setFilter(filterItem.value)"
+        >
+          <span class="filter__option--icon" aria-hidden="true">
+            <i appIcon [icon]="filterItem.icon" appSquare="18"></i>
+          </span>
+          <span class="filter__title">{{ filterItem.name }}</span>
+          <span
+            class="filter__count"
+            [attr.aria-label]="'Количество: ' + categoryCount(filterItem.value)"
+          >
+            {{ categoryCount(filterItem.value) }}
+          </span>
+        </button>
+      }
+    </div>
+  </ng-template>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
index e01406285..2b06e9ba4 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/typography";
 @use "styles/responsive";
 
@@ -179,3 +178,66 @@
 a:hover {
   cursor: pointer;
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .filter {
+    gap: 8px;
+
+    &__option.ui-button {
+      position: relative;
+      display: grid;
+      grid-template-columns: 20px minmax(0, 1fr);
+      gap: 4px 8px;
+      align-items: center;
+      min-width: 0;
+      height: auto;
+      min-height: 64px;
+      padding: 12px;
+      white-space: normal;
+      cursor: pointer;
+      background-color: var(--ui-surface);
+      border: 1px solid var(--ui-border-subtle);
+      border-radius: var(--rounded-lg);
+
+      &:focus-visible {
+        outline: 2px solid var(--accent-dark);
+        outline-offset: 3px;
+      }
+    }
+
+    &__option--active.ui-button {
+      background-color: var(--accent-light);
+      border-color: var(--accent);
+    }
+
+    &__option--disable.ui-button {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &__option--icon {
+      position: static;
+      display: flex;
+      grid-row: 1 / 3;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      color: var(--accent);
+    }
+
+    &__title {
+      font-size: var(--ui-font-small);
+      color: var(--ui-text-muted);
+      text-align: left;
+      overflow-wrap: anywhere;
+    }
+
+    &__count {
+      grid-column: 2;
+      font-size: var(--ui-font-body);
+      text-align: left;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
index 464fcb042..b4f42f338 100644
--- a/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/feed-filter/feed-filter.component.ts
@@ -1,5 +1,6 @@
 /** @format */
 
+import { ButtonDirective, FiltersDirective, DesktopLayoutService } from "@uilib";
 import { animate, style, transition, trigger } from "@angular/animations";
 import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
@@ -15,7 +16,7 @@ import { FeedCategoryCounts } from "@domain/feed/feed-item.model";
 /** Компонент фильтрации ленты по типам контента с мгновенной синхронизацией через URL. */
 @Component({
   selector: "app-feed-filter",
-  imports: [CommonModule, ClickOutsideModule, IconComponent],
+  imports: [FiltersDirective, ButtonDirective, CommonModule, ClickOutsideModule, IconComponent],
   templateUrl: "./feed-filter.component.html",
   styleUrl: "./feed-filter.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -31,6 +32,7 @@ import { FeedCategoryCounts } from "@domain/feed/feed-item.model";
   providers: [FeedFilterInfoService, ProfileDetailUIInfoService, DetailProfileInfoService],
 })
 export class FeedFilterComponent implements OnInit {
+  protected readonly releaseDesktop = inject(DesktopLayoutService).desktop;
   private readonly feedFilterInfoService = inject(FeedFilterInfoService);
   private readonly feedUIInfoService = inject(FeedUIInfoService);
 
diff --git a/projects/social_platform/src/app/ui/widgets/header/header.component.scss b/projects/social_platform/src/app/ui/widgets/header/header.component.scss
index 7290ff8de..db9fdb928 100644
--- a/projects/social_platform/src/app/ui/widgets/header/header.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/header/header.component.scss
@@ -72,3 +72,10 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .notifications {
+    box-shadow: var(--ui-header-shadow);
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card-list-contract.spec.ts b/projects/social_platform/src/app/ui/widgets/info-card/info-card-list-contract.spec.ts
index f1541d255..c7ce2a093 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card-list-contract.spec.ts
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card-list-contract.spec.ts
@@ -97,6 +97,7 @@ describe("Мои проекты: HTTP list → преобразование ко
     expect(project).toBeInstanceOf(Project);
     expect(project.shortDescription).toBe("Описание проекта");
     expect(project.partnerProgram?.isSubmitted).toBe(submitted);
+    expect(project.partnerProgram?.name).toBe("Программа");
     if (submitted !== undefined) {
       expect(project.partnerProgram?.programLinkId).toBe(ids.programLinkId);
       expect(project.partnerProgram?.programId).toBe(ids.programId);
@@ -112,16 +113,17 @@ describe("Мои проекты: HTTP list → преобразование ко
   it.each([
     { submitted: true, draft: false, status: "Сдан в программу" },
     { submitted: true, draft: true, status: "Сдан в программу" },
-    { submitted: false, draft: false, status: "В программе" },
-    { submitted: false, draft: true, status: "В программе" },
-    { submitted: undefined, draft: false, status: "В программе" },
-    { submitted: undefined, draft: true, status: "В программе" },
+    { submitted: false, draft: false, status: "Привязан к программе" },
+    { submitted: false, draft: true, status: "Привязан к программе" },
+    { submitted: undefined, draft: false, status: "Привязан к программе" },
+    { submitted: undefined, draft: true, status: "Привязан к программе" },
   ])("is_submitted=$submitted, draft=$draft: lifecycle и доступ независимы", async item => {
     await loadProject(item.submitted, item.draft);
     for (const userId of [7, 99, undefined]) {
       fixture.componentRef.setInput("loggedUserId", userId);
       fixture.detectChanges();
       expect(text(".card__status")).toBe(item.status);
+      expect(text(".card__program-name")).toBe("Программа: Программа");
       expect(text(".card__role")).toBe(userId === 7 ? "Лидер" : "Участник");
       expect(text(".card__access-label")).toBe(
         userId === 7 && item.submitted === false ? "можно редактировать" : "только просмотр",
@@ -143,7 +145,7 @@ describe("Мои проекты: HTTP list → преобразование ко
     });
     expect(project.id).toBe(286);
     expect(project.draft).toBe(true);
-    expect(text(".card__status")).toBe("В программе");
+    expect(text(".card__status")).toBe("Привязан к программе");
     expect(fixture.nativeElement.querySelectorAll(".card__status")).toHaveLength(1);
     expect(text(".card__role")).toBe("Лидер");
     expect(text(".card__access-label")).toBe("можно редактировать");
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
index b07e47fbe..0509e976e 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.html
@@ -1,273 +1,589 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div
+    class="card"
+    [class.card--project]="isProjectCard()"
+    [class.card--my-project]="myProjectPresentation() !== null"
+    [class.card--invite]="type() === 'invite' && appereance() !== 'empty'"
+    [class.card__empty]="appereance() === 'empty'"
+    (click)="
+      appereance() === 'empty' && section() === 'projects'
+        ? onCreateProject($event)
+        : appereance() === 'empty' && section() === 'subscriptions'
+          ? redirectToProjects()
+          : null
+    "
+  >
+    <div class="card__body" [class.card__body--empty]="appereance() === 'empty'">
+      @if (shouldShowSubscriptionBadge()) {
+        <button
+          type="button"
+          class="card__subscription-action"
+          [attr.aria-label]="isSubscribed ? 'Отписаться от проекта' : 'Подписаться на проект'"
+          [attr.title]="isSubscribed ? 'Отписаться от проекта' : 'Подписаться на проект'"
+          [attr.aria-pressed]="!!isSubscribed"
+          (click)="toggleSubscription($event)"
+        >
+          <i
+            appIcon
+            [icon]="isSubscribed ? 'subscribe-badge' : 'unsubscribe-badge'"
+            appWidth="12"
+            appHeight="20"
+            aria-hidden="true"
+          ></i>
+        </button>
+      }
 
-<div
-  class="card"
-  [class.card--project]="isProjectCard()"
-  [class.card--my-project]="myProjectPresentation() !== null"
-  [class.card--invite]="type() === 'invite' && appereance() !== 'empty'"
-  [class.card__empty]="appereance() === 'empty'"
-  (click)="
-    appereance() === 'empty' && section() === 'projects'
-      ? onCreateProject($event)
-      : appereance() === 'empty' && section() === 'subscriptions'
-        ? redirectToProjects()
-        : null
-  "
->
-  <div class="card__body" [class.card__body--empty]="appereance() === 'empty'">
-    @if (shouldShowSubscriptionBadge()) {
-      <button
-        type="button"
-        class="card__subscription-action"
-        [attr.aria-label]="isSubscribed ? 'Отписаться от проекта' : 'Подписаться на проект'"
-        [attr.title]="isSubscribed ? 'Отписаться от проекта' : 'Подписаться на проект'"
-        [attr.aria-pressed]="!!isSubscribed"
-        (click)="toggleSubscription($event)"
-      >
-        <i
-          appIcon
-          [icon]="isSubscribed ? 'subscribe-badge' : 'unsubscribe-badge'"
-          appWidth="12"
-          appHeight="20"
-          aria-hidden="true"
-        ></i>
-      </button>
-    }
-
-    @if (isProjectCard()) {
-      <!-- Одна ссылка объединяет карточку и CTA; подписка остаётся отдельной кнопкой. -->
-      <a
-        class="card__project-link"
-        [routerLink]="AppRoutes.projects.detail(info()?.id)"
-        [attr.aria-label]="'Открыть проект «' + info()?.name + '»'"
-      >
+      @if (isProjectCard()) {
+        <!-- Одна ссылка объединяет карточку и CTA; подписка остаётся отдельной кнопкой. -->
+        <a
+          class="card__project-link"
+          [routerLink]="AppRoutes.projects.detail(info()?.id)"
+          [attr.aria-label]="'Открыть проект «' + info()?.name + '»'"
+        >
+          <ng-container *ngTemplateOutlet="cardContent"></ng-container>
+        </a>
+      } @else {
         <ng-container *ngTemplateOutlet="cardContent"></ng-container>
-      </a>
-    } @else {
-      <ng-container *ngTemplateOutlet="cardContent"></ng-container>
-    }
+      }
 
-    <ng-container *ngTemplateOutlet="modals"></ng-container>
+      <ng-container *ngTemplateOutlet="modals"></ng-container>
+    </div>
   </div>
-</div>
 
-<ng-template #cardContent>
-  <app-avatar class="card__photo" [url]="getAvatarUrl()" [size]="70"></app-avatar>
+  <ng-template #cardContent>
+    <app-avatar class="card__photo" [url]="getAvatarUrl()" [size]="70"></app-avatar>
 
-  <div class="card__content" [class.card__content--empty]="appereance() === 'empty'">
-    @if (myProjectPresentation(); as presentation) {
-      <p [class]="'card__context card__status card__status--' + presentation.lifecycle">
-        {{ presentation.statusLabel }}
-      </p>
-    }
-    <div class="card__head">
-      <div>
+    <div class="card__content" [class.card__content--empty]="appereance() === 'empty'">
+      @if (myProjectPresentation(); as presentation) {
+        <p [class]="'card__context card__status card__status--' + presentation.lifecycle">
+          {{ presentation.statusLabel }}
+        </p>
+      }
+      <div class="card__head">
+        <div>
+          @if (appereance() === "empty") {
+            <ng-container *ngTemplateOutlet="emptyCardContent"></ng-container>
+          } @else {
+            <ng-container *ngTemplateOutlet="regularCardHeader"></ng-container>
+          }
+        </div>
+      </div>
+
+      @if (appereance() !== "empty") {
+        <ng-container *ngTemplateOutlet="cardDescription"></ng-container>
+      }
+
+      <div class="card__footer" [class.card__footer--project]="type() === 'projects'">
         @if (appereance() === "empty") {
-          <ng-container *ngTemplateOutlet="emptyCardContent"></ng-container>
+          @if (section() === "projects") {
+            <i appIcon icon="main" appSquare="22" class="card__empty--icon"></i>
+          }
         } @else {
-          <ng-container *ngTemplateOutlet="regularCardHeader"></ng-container>
+          @if (myProjectPresentation(); as presentation) {
+            <div class="card__access">
+              <p class="card__role">{{ presentation.roleLabel }}</p>
+              <p class="card__access-label">{{ presentation.accessLabel }}</p>
+            </div>
+          }
+          <ng-container *ngTemplateOutlet="cardActions"></ng-container>
         }
       </div>
     </div>
+  </ng-template>
 
-    @if (appereance() !== "empty") {
-      <ng-container *ngTemplateOutlet="cardDescription"></ng-container>
+  <ng-template #emptyCardContent>
+    <p class="text-body-12 card__name">{{ info()?.name }}</p>
+    <img
+      src="/assets/images/projects/shared/arrow.svg"
+      class="card__empty--image"
+      alt="arrow"
+      loading="lazy"
+      decoding="async"
+    />
+    @if (section() === "subscriptions") {
+      <p class="card__empty--name text-body-10" style="margin-left: 5px">перейти к проектам</p>
+    } @else {
+      <p class="card__empty--name text-body-10">Создайте первый проект</p>
     }
+  </ng-template>
 
-    <div class="card__footer" [class.card__footer--project]="type() === 'projects'">
-      @if (appereance() === "empty") {
-        @if (section() === "projects") {
-          <i appIcon icon="main" appSquare="22" class="card__empty--icon"></i>
-        }
+  <ng-template #regularCardHeader>
+    @if (isProjectCard()) {
+      <p class="card__name">{{ info().name }}</p>
+    } @else if (type() === "projects" || type() === "invite") {
+      @if (info().name) {
+        <p class="text-body-12 card__name" [title]="info().name">{{ info().name }}</p>
+      }
+    } @else {
+      <p class="text-body-12 card__name">{{ info()?.firstName | truncate: 10 }}</p>
+      <p class="text-body-12 card__name">{{ info()?.lastName | truncate: 10 }}</p>
+      @if (info()?.speciality) {
+        <p class="text-body-6 card__additional-info">
+          {{ info()?.speciality | truncate: 20 }}
+          @if (info()?.speciality && info()?.birthday) {
+            •
+          }
+          @if (info()?.birthday) {
+            {{ info()?.birthday! | yearsFromBirthday }}
+          }
+        </p>
+      }
+    }
+  </ng-template>
+
+  <ng-template #cardDescription>
+    <div
+      class="card__description"
+      [class.card__description--project]="type() === 'projects'"
+      [style.max-height]="
+        isProjectCard() || type() === 'invite' ? null : type() === 'members' ? '50px' : '24px'
+      "
+      [class.invite-description]="type() === 'invite'"
+    >
+      @if (type() === "invite") {
+        <p class="text-body-6 card__user">вас приглашает</p>
+        <p class="text-body-10 card__user--invite" [title]="info()?.shortDescription">
+          {{ info()?.shortDescription }}
+        </p>
+      } @else if (type() === "projects") {
+        <p class="text-body-6">{{ info()?.shortDescription }}</p>
       } @else {
-        @if (myProjectPresentation(); as presentation) {
-          <div class="card__access">
-            <p class="card__role">{{ presentation.roleLabel }}</p>
-            <p class="card__access-label">{{ presentation.accessLabel }}</p>
+        @if (info()?.skills && info()?.skills?.length) {
+          <ul class="card__skills">
+            @for (skill of info()?.skills?.slice(0, 3); track skill.id) {
+              <li class="card__skill">
+                <app-tag
+                  [color]="skill.category.name.includes('Soft skills') ? 'soft' : 'complete'"
+                  >{{ skill.name | truncate: 10 }}</app-tag
+                >
+              </li>
+            }
+          </ul>
+        }
+      }
+    </div>
+  </ng-template>
+
+  <ng-template #cardActions>
+    <div class="card__info">
+      @if (isProjectCard()) {
+        <span class="card__info--text">
+          <span class="card__project-action text-body-12 text-body-6">
+            <span class="card__project-action-label">Открыть</span>
+          </span>
+        </span>
+      } @else if (type() === "members") {
+        @if (leaderId() === loggedUserId() && loggedUserId() !== info()?.userId) {
+          <div class="card__info--program">
+            <app-button
+              customTypographyClass="text-body-6"
+              size="extra-small"
+              [disabled]="true"
+              style="opacity: 0.5"
+              >выдать роль</app-button
+            >
+            <app-button
+              customTypographyClass="text-body-6"
+              size="extra-small"
+              color="red"
+              appearance="outline"
+              (click)="removeCollaboratorFromProject(info()?.userId)"
+              >удалить</app-button
+            >
           </div>
+        } @else {
+          <app-button
+            [routerLink]="AppRoutes.profile.detail(info()?.userId)"
+            customTypographyClass="text-body-6"
+            size="extra-small"
+            class="card__info--text"
+          >
+            профиль
+          </app-button>
         }
-        <ng-container *ngTemplateOutlet="cardActions"></ng-container>
+      } @else {
+        <div class="card__invite-actions">
+          <app-button
+            (click)="onAcceptInvite($event, info()?.inviteId!)"
+            [customTypographyClass]="type() === 'invite' ? 'text-body-12' : 'text-body-6'"
+            [size]="type() === 'invite' ? 'big' : 'extra-small'"
+            appearance="inline"
+            [disabled]="!info()?.inviteId"
+          >
+            принять
+          </app-button>
+          <app-button
+            (click)="onRejectInvite($event, info()?.inviteId!)"
+            [customTypographyClass]="type() === 'invite' ? 'text-body-12' : 'text-body-6'"
+            [size]="type() === 'invite' ? 'big' : 'extra-small'"
+            appearance="outline"
+            [disabled]="!info()?.inviteId"
+          >
+            отклонить
+          </app-button>
+        </div>
+      }
+    </div>
+  </ng-template>
+
+  <ng-template #modals>
+    <app-modal [(open)]="isUnsubscribeModalOpen">
+      <div class="unsubscribe-modal">
+        <h3>Вы действительно хотите отписаться от проекта?</h3>
+        <app-avatar [url]="info()?.imageAddress" [size]="70"></app-avatar>
+        <div class="unsubscribe-modal__buttons">
+          <app-button
+            color="red"
+            size="big"
+            customTypographyClass="unsubscribe-modal-btn__typography"
+            (click)="onUnsubscribe($event, info()?.id!)"
+            [disabled]="!info()?.id"
+          >
+            отписаться
+          </app-button>
+          <app-button
+            size="big"
+            customTypographyClass="unsubscribe-modal-btn__typography"
+            (click)="onCloseUnsubscribeModal()"
+          >
+            отменить
+          </app-button>
+        </div>
+      </div>
+    </app-modal>
+
+    <app-modal [open]="inviteErrorModal">
+      <div class="message-modal">
+        <h3 class="message-modal__title text-body-14">
+          Приглашение на текущий проект было удалено
+        </h3>
+        <p class="message-modal__text text-body-10">
+          Проверьте наличие вас в списке участников проекта или обратитесь к создателю проекта,
+          чтобы вас заново пригласили!
+        </p>
+        <app-button
+          customTypographyClass="text-body-12"
+          size="medium"
+          class="message-modal__button"
+          (click)="inviteErrorModal = false"
+        >
+          Хорошо
+        </app-button>
+      </div>
+    </app-modal>
+  </ng-template>
+} @else {
+  <div
+    class="card"
+    [class.card--project]="isProjectCard()"
+    [class.card--my-project]="myProjectPresentation() !== null"
+    [class.card--invite]="type() === 'invite' && appereance() !== 'empty'"
+    [class.card__empty]="appereance() === 'empty'"
+    (click)="
+      appereance() === 'empty' && section() === 'projects'
+        ? onCreateProject($event)
+        : appereance() === 'empty' && section() === 'subscriptions'
+          ? redirectToProjects()
+          : null
+    "
+  >
+    <div
+      appCard
+      [interactive]="true"
+      class="card__body"
+      [class.card__body--empty]="appereance() === 'empty'"
+    >
+      @if (shouldShowSubscriptionBadge()) {
+        <button
+          appButton="icon"
+          type="button"
+          class="card__subscription-action"
+          [attr.aria-label]="isSubscribed ? 'Отписаться от проекта' : 'Подписаться на проект'"
+          [attr.title]="isSubscribed ? 'Отписаться от проекта' : 'Подписаться на проект'"
+          [attr.aria-pressed]="!!isSubscribed"
+          (click)="toggleSubscription($event)"
+        >
+          <i
+            appIcon
+            [icon]="isSubscribed ? 'subscribe-badge' : 'unsubscribe-badge'"
+            appWidth="12"
+            appHeight="20"
+            aria-hidden="true"
+          ></i>
+        </button>
+      }
+
+      @if (isProjectCard()) {
+        <!-- Одна ссылка объединяет карточку и CTA; подписка остаётся отдельной кнопкой. -->
+        <a
+          class="card__project-link"
+          [routerLink]="AppRoutes.projects.detail(info()?.id)"
+          [attr.aria-label]="
+            'Открыть проект «' +
+            (info()?.name?.trim() || 'Проект без названия') +
+            '»' +
+            (programName() ? '. Программа: ' + programName() : '')
+          "
+        >
+          <ng-container *ngTemplateOutlet="cardContent"></ng-container>
+        </a>
+      } @else {
+        <ng-container *ngTemplateOutlet="cardContent"></ng-container>
       }
+
+      <ng-container *ngTemplateOutlet="modals"></ng-container>
     </div>
   </div>
-</ng-template>
 
-<ng-template #emptyCardContent>
-  <p class="text-body-12 card__name">{{ info()?.name }}</p>
-  <img
-    src="/assets/images/projects/shared/arrow.svg"
-    class="card__empty--image"
-    alt="arrow"
-    loading="lazy"
-    decoding="async"
-  />
-  @if (section() === "subscriptions") {
-    <p class="card__empty--name text-body-10" style="margin-left: 5px">перейти к проектам</p>
-  } @else {
-    <p class="card__empty--name text-body-10">Создайте первый проект</p>
-  }
-</ng-template>
+  <ng-template #cardContent>
+    <app-avatar class="card__photo" [url]="getAvatarUrl()" [size]="70"></app-avatar>
 
-<ng-template #regularCardHeader>
-  @if (isProjectCard()) {
-    <p class="card__name">{{ info().name }}</p>
-  } @else if (type() === "projects" || type() === "invite") {
-    @if (info().name) {
-      <p class="text-body-12 card__name" [title]="info().name">{{ info().name }}</p>
-    }
-  } @else {
-    <p class="text-body-12 card__name">{{ info()?.firstName | truncate: 10 }}</p>
-    <p class="text-body-12 card__name">{{ info()?.lastName | truncate: 10 }}</p>
-    @if (info()?.speciality) {
-      <p class="text-body-6 card__additional-info">
-        {{ info()?.speciality | truncate: 20 }}
-        @if (info()?.speciality && info()?.birthday) {
-          •
-        }
-        @if (info()?.birthday) {
-          {{ info()?.birthday! | yearsFromBirthday }}
+    <div class="card__content" [class.card__content--empty]="appereance() === 'empty'">
+      @if (myProjectPresentation(); as presentation) {
+        <p [class]="'card__context card__status card__status--' + presentation.lifecycle">
+          @if (presentation.lifecycle === "program") {
+            <i
+              appIcon
+              icon="program"
+              appWidth="12"
+              appHeight="12"
+              appViewBox="0 0 21 16"
+              aria-hidden="true"
+            ></i>
+          } @else if (presentation.lifecycle === "submitted") {
+            <i
+              appIcon
+              icon="lock"
+              appWidth="12"
+              appHeight="12"
+              appViewBox="0 0 11 12"
+              aria-hidden="true"
+            ></i>
+          }
+          {{ presentation.statusLabel }}
+        </p>
+      }
+      <div class="card__head">
+        <div>
+          @if (appereance() === "empty") {
+            <ng-container *ngTemplateOutlet="emptyCardContent"></ng-container>
+          } @else {
+            <ng-container *ngTemplateOutlet="regularCardHeader"></ng-container>
+          }
+          @if (programName(); as name) {
+            <p class="card__program-name" [title]="'Программа: ' + name">Программа: {{ name }}</p>
+          }
+        </div>
+      </div>
+
+      @if (appereance() !== "empty") {
+        <ng-container *ngTemplateOutlet="cardDescription"></ng-container>
+      }
+
+      <div class="card__footer" [class.card__footer--project]="type() === 'projects'">
+        @if (appereance() === "empty") {
+          @if (section() === "projects") {
+            <i appIcon icon="main" appSquare="22" class="card__empty--icon"></i>
+          }
+        } @else {
+          @if (myProjectPresentation(); as presentation) {
+            <div class="card__access">
+              <p class="card__role">{{ presentation.roleLabel }}</p>
+              <p class="card__access-label">{{ presentation.accessLabel }}</p>
+            </div>
+          }
+          <ng-container *ngTemplateOutlet="cardActions"></ng-container>
         }
-      </p>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template #emptyCardContent>
+    <p class="text-body-12 card__name">{{ info()?.name }}</p>
+    <img
+      src="/assets/images/projects/shared/arrow.svg"
+      class="card__empty--image"
+      alt="arrow"
+      loading="lazy"
+      decoding="async"
+    />
+    @if (section() === "subscriptions") {
+      <p class="card__empty--name text-body-10" style="margin-left: 5px">перейти к проектам</p>
+    } @else {
+      <p class="card__empty--name text-body-10">Создайте первый проект</p>
     }
-  }
-</ng-template>
+  </ng-template>
 
-<ng-template #cardDescription>
-  <div
-    class="card__description"
-    [class.card__description--project]="type() === 'projects'"
-    [style.max-height]="
-      isProjectCard() || type() === 'invite' ? null : type() === 'members' ? '50px' : '24px'
-    "
-    [class.invite-description]="type() === 'invite'"
-  >
-    @if (type() === "invite") {
-      <p class="text-body-6 card__user">вас приглашает</p>
-      <p class="text-body-10 card__user--invite" [title]="info()?.shortDescription">
-        {{ info()?.shortDescription }}
-      </p>
-    } @else if (type() === "projects") {
-      <p class="text-body-6">{{ info()?.shortDescription }}</p>
+  <ng-template #regularCardHeader>
+    @if (isProjectCard()) {
+      <p
+        class="card__name"
+        [title]="info().name"
+        [textContent]="info()?.name?.trim() || 'Проект без названия'"
+      ></p>
+    } @else if (type() === "projects" || type() === "invite") {
+      @if (info().name) {
+        <p class="text-body-12 card__name" [title]="info().name">{{ info().name }}</p>
+      }
     } @else {
-      @if (info()?.skills && info()?.skills?.length) {
-        <ul class="card__skills">
-          @for (skill of info()?.skills?.slice(0, 3); track skill.id) {
-            <li class="card__skill">
-              <app-tag
-                [color]="skill.category.name.includes('Soft skills') ? 'soft' : 'complete'"
-                >{{ skill.name | truncate: 10 }}</app-tag
-              >
-            </li>
+      <p class="text-body-12 card__name">{{ info()?.firstName | truncate: 10 }}</p>
+      <p class="text-body-12 card__name">{{ info()?.lastName | truncate: 10 }}</p>
+      @if (info()?.speciality) {
+        <p class="text-body-6 card__additional-info">
+          {{ info()?.speciality | truncate: 20 }}
+          @if (info()?.speciality && info()?.birthday) {
+            •
+          }
+          @if (info()?.birthday) {
+            {{ info()?.birthday! | yearsFromBirthday }}
           }
-        </ul>
+        </p>
       }
     }
-  </div>
-</ng-template>
+  </ng-template>
 
-<ng-template #cardActions>
-  <div class="card__info">
-    @if (isProjectCard()) {
-      <span class="card__info--text">
-        <span class="card__project-action text-body-12 text-body-6">
-          <span class="card__project-action-label">Открыть</span>
+  <ng-template #cardDescription>
+    <div
+      class="card__description"
+      [class.card__description--project]="type() === 'projects'"
+      [class.card__description--with-program]="programName() !== null"
+      [style.max-height]="
+        isProjectCard() || type() === 'invite' ? null : type() === 'members' ? '50px' : '24px'
+      "
+      [class.invite-description]="type() === 'invite'"
+    >
+      @if (type() === "invite") {
+        <p class="text-body-6 card__user">вас приглашает</p>
+        <p class="text-body-10 card__user--invite" [title]="info()?.shortDescription">
+          {{ info()?.shortDescription }}
+        </p>
+      } @else if (type() === "projects") {
+        <p class="text-body-6">{{ info()?.shortDescription }}</p>
+      } @else {
+        @if (info()?.skills && info()?.skills?.length) {
+          <ul class="card__skills">
+            @for (skill of info()?.skills?.slice(0, 3); track skill.id) {
+              <li class="card__skill">
+                <app-tag
+                  [color]="skill.category.name.includes('Soft skills') ? 'soft' : 'complete'"
+                  >{{ skill.name | truncate: 10 }}</app-tag
+                >
+              </li>
+            }
+          </ul>
+        }
+      }
+    </div>
+  </ng-template>
+
+  <ng-template #cardActions>
+    <div class="card__info">
+      @if (isProjectCard()) {
+        <span class="card__info--text">
+          <span class="card__project-action text-body-12 text-body-6">
+            <span class="card__project-action-label">Открыть</span>
+          </span>
         </span>
-      </span>
-    } @else if (type() === "members") {
-      @if (leaderId() === loggedUserId() && loggedUserId() !== info()?.userId) {
-        <div class="card__info--program">
+      } @else if (type() === "members") {
+        @if (leaderId() === loggedUserId() && loggedUserId() !== info()?.userId) {
+          <div class="card__info--program">
+            <app-button
+              customTypographyClass="text-body-6"
+              size="extra-small"
+              [disabled]="true"
+              style="opacity: 0.5"
+              >выдать роль</app-button
+            >
+            <app-button
+              customTypographyClass="text-body-6"
+              size="extra-small"
+              color="red"
+              appearance="outline"
+              (click)="removeCollaboratorFromProject(info()?.userId)"
+              >удалить</app-button
+            >
+          </div>
+        } @else {
           <app-button
+            [routerLink]="AppRoutes.profile.detail(info()?.userId)"
             customTypographyClass="text-body-6"
             size="extra-small"
-            [disabled]="true"
-            style="opacity: 0.5"
-            >выдать роль</app-button
+            class="card__info--text"
           >
+            профиль
+          </app-button>
+        }
+      } @else {
+        <div class="card__invite-actions">
           <app-button
-            customTypographyClass="text-body-6"
-            size="extra-small"
-            color="red"
+            (click)="onAcceptInvite($event, info()?.inviteId!)"
+            [customTypographyClass]="type() === 'invite' ? 'text-body-12' : 'text-body-6'"
+            [size]="type() === 'invite' ? 'big' : 'extra-small'"
+            appearance="inline"
+            [disabled]="!info()?.inviteId"
+          >
+            принять
+          </app-button>
+          <app-button
+            (click)="onRejectInvite($event, info()?.inviteId!)"
+            [customTypographyClass]="type() === 'invite' ? 'text-body-12' : 'text-body-6'"
+            [size]="type() === 'invite' ? 'big' : 'extra-small'"
             appearance="outline"
-            (click)="removeCollaboratorFromProject(info()?.userId)"
-            >удалить</app-button
+            [disabled]="!info()?.inviteId"
           >
+            отклонить
+          </app-button>
         </div>
-      } @else {
-        <app-button
-          [routerLink]="AppRoutes.profile.detail(info()?.userId)"
-          customTypographyClass="text-body-6"
-          size="extra-small"
-          class="card__info--text"
-        >
-          профиль
-        </app-button>
       }
-    } @else {
-      <div class="card__invite-actions">
-        <app-button
-          (click)="onAcceptInvite($event, info()?.inviteId!)"
-          [customTypographyClass]="type() === 'invite' ? 'text-body-12' : 'text-body-6'"
-          [size]="type() === 'invite' ? 'big' : 'extra-small'"
-          appearance="inline"
-          [disabled]="!info()?.inviteId"
-        >
-          принять
-        </app-button>
-        <app-button
-          (click)="onRejectInvite($event, info()?.inviteId!)"
-          [customTypographyClass]="type() === 'invite' ? 'text-body-12' : 'text-body-6'"
-          [size]="type() === 'invite' ? 'big' : 'extra-small'"
-          appearance="outline"
-          [disabled]="!info()?.inviteId"
-        >
-          отклонить
-        </app-button>
+    </div>
+  </ng-template>
+
+  <ng-template #modals>
+    <app-modal [(open)]="isUnsubscribeModalOpen">
+      <div class="unsubscribe-modal">
+        <h3>Вы действительно хотите отписаться от проекта?</h3>
+        <app-avatar [url]="info()?.imageAddress" [size]="70"></app-avatar>
+        <div class="unsubscribe-modal__buttons">
+          <app-button
+            color="red"
+            size="big"
+            customTypographyClass="unsubscribe-modal-btn__typography"
+            (click)="onUnsubscribe($event, info()?.id!)"
+            [disabled]="!info()?.id"
+          >
+            отписаться
+          </app-button>
+          <app-button
+            size="big"
+            customTypographyClass="unsubscribe-modal-btn__typography"
+            (click)="onCloseUnsubscribeModal()"
+          >
+            отменить
+          </app-button>
+        </div>
       </div>
-    }
-  </div>
-</ng-template>
+    </app-modal>
 
-<ng-template #modals>
-  <app-modal [(open)]="isUnsubscribeModalOpen">
-    <div class="unsubscribe-modal">
-      <h3>Вы действительно хотите отписаться от проекта?</h3>
-      <app-avatar [url]="info()?.imageAddress" [size]="70"></app-avatar>
-      <div class="unsubscribe-modal__buttons">
+    <app-modal [open]="inviteErrorModal">
+      <div class="message-modal">
+        <h3 class="message-modal__title text-body-14">
+          Приглашение на текущий проект было удалено
+        </h3>
+        <p class="message-modal__text text-body-10">
+          Проверьте наличие вас в списке участников проекта или обратитесь к создателю проекта,
+          чтобы вас заново пригласили!
+        </p>
         <app-button
-          color="red"
-          size="big"
-          customTypographyClass="unsubscribe-modal-btn__typography"
-          (click)="onUnsubscribe($event, info()?.id!)"
-          [disabled]="!info()?.id"
+          customTypographyClass="text-body-12"
+          size="medium"
+          class="message-modal__button"
+          (click)="inviteErrorModal = false"
         >
-          отписаться
-        </app-button>
-        <app-button
-          size="big"
-          customTypographyClass="unsubscribe-modal-btn__typography"
-          (click)="onCloseUnsubscribeModal()"
-        >
-          отменить
+          Хорошо
         </app-button>
       </div>
-    </div>
-  </app-modal>
-
-  <app-modal [open]="inviteErrorModal">
-    <div class="message-modal">
-      <h3 class="message-modal__title text-body-14">Приглашение на текущий проект было удалено</h3>
-      <p class="message-modal__text text-body-10">
-        Проверьте наличие вас в списке участников проекта или обратитесь к создателю проекта, чтобы
-        вас заново пригласили!
-      </p>
-      <app-button
-        customTypographyClass="text-body-12"
-        size="medium"
-        class="message-modal__button"
-        (click)="inviteErrorModal = false"
-      >
-        Хорошо
-      </app-button>
-    </div>
-  </app-modal>
-</ng-template>
+    </app-modal>
+  </ng-template>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss
index 554b9eb0b..7aa91db6e 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.scss
@@ -1,6 +1,6 @@
 /** @format */
-
 @use "styles/responsive";
+@use "styles/ui-foundation";
 
 .card {
   &__body {
@@ -536,3 +536,191 @@
     margin-top: 16px;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .card {
+    &__body {
+      @include ui-foundation.card;
+
+      height: auto;
+      min-height: 180px;
+    }
+
+    &__project-action {
+      @include ui-foundation.button;
+    }
+
+    &--project {
+      .card__name {
+        /* stylelint-disable-next-line value-no-vendor-prefix */
+        font-size: var(--ui-font-small);
+      }
+
+      .card__description {
+        p {
+          /* stylelint-disable-next-line value-no-vendor-prefix */
+          font-size: var(--ui-font-caption);
+        }
+      }
+
+      .card__project-action-label {
+        font-size: var(--ui-font-caption);
+      }
+    }
+
+    &--my-project {
+      .card__name {
+        font-size: var(--ui-font-caption);
+      }
+
+      .card__description {
+        &--with-program {
+          flex-basis: 12px;
+          height: 12px;
+          min-height: 12px;
+
+          p {
+            -webkit-line-clamp: 1;
+          }
+        }
+      }
+
+      .card__program-name {
+        width: 100%;
+        overflow: hidden;
+        font-size: 9px;
+        line-height: 12px;
+        color: var(--grey-for-text);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    &--invite {
+      .card__user {
+        font-size: var(--ui-font-caption);
+      }
+
+      .card__user--invite {
+        /* stylelint-disable-next-line value-no-vendor-prefix */
+        font-size: var(--ui-font-small);
+      }
+    }
+
+    &__status {
+      gap: 4px;
+      padding-inline: 5px;
+      color: var(--black);
+
+      i {
+        display: flex;
+        flex-shrink: 0;
+      }
+
+      &--program {
+        &::before {
+          display: none;
+        }
+      }
+
+      &--submitted {
+        color: var(--green-dark);
+        background: var(--green-light);
+
+        &::before {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    :host {
+      display: block;
+      width: min(100%, var(--ui-mobile-entity-card-width));
+      min-width: 0;
+    }
+
+    .card__body {
+      width: 100%;
+      height: auto;
+      min-height: 244px;
+    }
+
+    .card__content {
+      padding-right: 16px;
+      padding-left: 16px;
+      overflow: visible;
+    }
+
+    .card__head {
+      width: 100%;
+    }
+
+    .card__name {
+      max-width: 100%;
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .card--project,
+    .card--my-project {
+      .card__name {
+        display: block;
+        max-height: none;
+        font-size: var(--ui-font-body);
+        line-height: 20px;
+        -webkit-line-clamp: unset;
+      }
+
+      .card__description {
+        height: auto;
+        font-size: var(--ui-font-body);
+        line-height: 20px;
+      }
+    }
+
+    .card__context {
+      height: auto;
+      min-height: 24px;
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+
+    .card__role,
+    .card__access-label {
+      font-size: var(--ui-font-small);
+      line-height: 16px;
+    }
+
+    .card__description {
+      flex-basis: auto;
+      width: 100%;
+      height: auto;
+      min-height: 24px;
+    }
+
+    .card__project-action {
+      align-self: center;
+      width: auto;
+      min-height: 44px;
+    }
+
+    .card--my-project .card__program-name {
+      font-size: var(--ui-font-small);
+      line-height: 16px;
+    }
+
+    .card--project .card__description p,
+    .card--my-project .card__description p {
+      font-size: var(--ui-font-small);
+      line-height: 18px;
+    }
+
+    .card__subscription-action {
+      width: 44px;
+      height: 44px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.spec.ts b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.spec.ts
index d975100eb..9df051b86 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.spec.ts
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.spec.ts
@@ -72,7 +72,14 @@ describe("InfoCardComponent: статусы моих проектов", () => {
           ".card__info--vacancies, .card__info--collaborators, .card__info--program-icon, .card__industry, .card__info--project-partner",
         ),
       ).toBeNull();
-      expect(fixture.debugElement.queryAll(By.directive(IconComponent))).toHaveLength(0);
+      const icons = fixture.debugElement.queryAll(By.directive(IconComponent));
+      const hasProgram = item.key === "program" || item.key === "submitted";
+      expect(icons).toHaveLength(hasProgram ? 1 : 0);
+      if (hasProgram) {
+        expect(icons[0].componentInstance.icon()).toBe(
+          item.key === "submitted" ? "lock" : "program",
+        );
+      }
       const avatar = fixture.debugElement.query(By.directive(AvatarComponent)).componentInstance;
       expect(avatar.size()).toBe(70);
       expect(avatar.url()).toBe(item.project.imageAddress);
@@ -120,6 +127,37 @@ describe("InfoCardComponent: статусы моих проектов", () => {
     expect(TestBed.inject(Router).serializeUrl(link.urlTree!)).toBe(AppRoutes.projects.detail(101));
   });
 
+  it("показывает имя программы и оставляет полный текст доступным без вложенной ссылки", () => {
+    const name = "Очень длинное название программы для студенческих технологических проектов";
+    fixture.componentRef.setInput(
+      "info",
+      projectCardFixture({
+        partnerProgram: { ...projectCardProgram(false), name },
+      }),
+    );
+    fixture.detectChanges();
+    const label = card().querySelector<HTMLElement>(".card__program-name")!;
+    expect(label.textContent?.trim()).toBe("Программа: " + name);
+    expect(label.title).toBe("Программа: " + name);
+    expect(card().querySelector("a")?.getAttribute("aria-label")).toContain(name);
+    expect(card().querySelectorAll("a")).toHaveLength(1);
+    expect(card().querySelector(".card__description--with-program")).not.toBeNull();
+  });
+
+  it("legacy ответ без имени сохраняет статус, доступ и геометрию описания", () => {
+    fixture.componentRef.setInput(
+      "info",
+      projectCardFixture({
+        partnerProgram: { ...projectCardProgram(false), name: undefined },
+      }),
+    );
+    fixture.detectChanges();
+    expect(card().querySelector(".card__program-name")).toBeNull();
+    expect(card().querySelector(".card__description--with-program")).toBeNull();
+    expect(card().querySelector(".card__status")?.textContent?.trim()).toBe("Привязан к программе");
+    expect(card().querySelector(".card__access-label")?.textContent).toBe("можно редактировать");
+  });
+
   it.each(myProjectCardFixtures.slice(0, 4))(
     "$key: смена роли или отсутствие профиля не меняет lifecycle и CTA",
     item => {
@@ -179,7 +217,7 @@ describe("InfoCardComponent: статусы моих проектов", () => {
       }),
     );
     fixture.detectChanges();
-    expect(card().querySelector(".card__status")?.textContent?.trim()).toBe("В программе");
+    expect(card().querySelector(".card__status")?.textContent?.trim()).toBe("Привязан к программе");
     expect(card().querySelector<HTMLElement>(".card__project-action")?.textContent?.trim()).toBe(
       "Открыть",
     );
@@ -198,14 +236,14 @@ describe("InfoCardComponent: статусы моих проектов", () => {
       draft: true,
       submitted: false,
       lifecycle: "program",
-      label: "В программе",
+      label: "Привязан к программе",
       leaderCanEdit: true,
     },
     {
       draft: false,
       submitted: false,
       lifecycle: "program",
-      label: "В программе",
+      label: "Привязан к программе",
       leaderCanEdit: true,
     },
     {
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.ts b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.ts
index e22775360..7e225bf17 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, CardDirective } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -28,7 +33,12 @@ import { Project } from "@domain/project/project.model";
 
 interface MyProjectPresentation {
   lifecycle: "submitted" | "draft" | "program" | "published";
-  statusLabel: "Черновик" | "Опубликован" | "В программе" | "Сдан в программу";
+  statusLabel:
+    | "Черновик"
+    | "Опубликован"
+    | "В программе"
+    | "Привязан к программе"
+    | "Сдан в программу";
   role: "leader" | "participant";
   roleLabel: "Лидер" | "Участник";
   accessLabel: "можно редактировать" | "только просмотр";
@@ -43,6 +53,8 @@ interface MyProjectPresentation {
   templateUrl: "./info-card.component.html",
   styleUrl: "./info-card.component.scss",
   imports: [
+    CardDirective,
+    ButtonDirective,
     CommonModule,
     AvatarComponent,
     IconComponent,
@@ -57,6 +69,8 @@ interface MyProjectPresentation {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InfoCardComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly destroyRef = inject(DestroyRef);
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
   private readonly addProjectSubscriptionUseCase = inject(AddProjectSubscriptionUseCase);
@@ -109,7 +123,7 @@ export class InfoCardComponent {
       {
         submitted: "Сдан в программу",
         draft: "Черновик",
-        program: "В программе",
+        program: this.releaseDesktop() ? "В программе" : "Привязан к программе",
         published: "Опубликован",
       };
     const userId = this.loggedUserId();
@@ -126,6 +140,13 @@ export class InfoCardComponent {
     };
   });
 
+  /** Имя той же связи, которая определяет статус; без дополнительных запросов. */
+  protected readonly programName = computed(() => {
+    if (!this.myProjectPresentation()) return null;
+    const project: Project | undefined = this.info();
+    return project?.partnerProgram?.name?.trim() || null;
+  });
+
   readonly onAcceptingInvite = output<number>();
   readonly onRejectingInvite = output<number>();
   readonly onCreate = output();
diff --git a/projects/social_platform/src/app/ui/widgets/info-card/info-card.fixture.ts b/projects/social_platform/src/app/ui/widgets/info-card/info-card.fixture.ts
index 97fe1564b..f28403304 100644
--- a/projects/social_platform/src/app/ui/widgets/info-card/info-card.fixture.ts
+++ b/projects/social_platform/src/app/ui/widgets/info-card/info-card.fixture.ts
@@ -2,10 +2,11 @@
 
 import { PartnerProgramInfo, Project } from "@domain/project/project.model";
 
-/** Связь из list-контракта: имя программы для отображения статуса не требуется. */
+/** Связь из list-контракта: имя и статус относятся к одной программе. */
 export function projectCardProgram(isSubmitted: boolean): PartnerProgramInfo {
   return {
     id: 12,
+    name: "Акселератор студенческих проектов",
     programId: 12,
     programLinkId: 120,
     isSubmitted,
@@ -60,7 +61,7 @@ export const myProjectCardFixtures = [
   },
   {
     key: "program",
-    label: "В программе",
+    label: "Привязан к программе",
     action: "Открыть",
     role: "Лидер",
     access: "можно редактировать",
@@ -88,7 +89,7 @@ export const myProjectCardFixtures = [
   },
   {
     key: "program",
-    label: "В программе",
+    label: "Привязан к программе",
     action: "Открыть",
     role: "Участник",
     access: "только просмотр",
diff --git a/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.html b/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.html
index 88915f0b9..ee0b1be2f 100644
--- a/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.html
+++ b/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.html
@@ -1,125 +1,261 @@
 <!-- @format -->
-
-<div class="message-input">
-  @if (attachFiles.length) {
-    <ul class="message-input__action action files-list">
-      @for (file of attachFiles; let index = $index; track index) {
-        <li class="files-list__item file" [class.file--loading]="file.loading">
-          <i class="file__icon file__icon--file" appIcon icon="file" appSquare="8"></i>
-          <div class="file__info">
-            <h3 class="file__name text-body-10">{{ file.name.split(".")[0] }}</h3>
-            @if (file.type) {
-              <div class="file__meta text-body-6">
-                {{ file.type.includes("/") ? (file.type | fileType) : (file.type | uppercase) }} •
-                {{ +file.size | formatedFileSize }}
-              </div>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="message-input">
+    @if (attachFiles.length) {
+      <ul class="message-input__action action files-list">
+        @for (file of attachFiles; let index = $index; track index) {
+          <li class="files-list__item file" [class.file--loading]="file.loading">
+            <i class="file__icon file__icon--file" appIcon icon="file" appSquare="8"></i>
+            <div class="file__info">
+              <h3 class="file__name text-body-10">{{ file.name.split(".")[0] }}</h3>
+              @if (file.type) {
+                <div class="file__meta text-body-6">
+                  {{ file.type.includes("/") ? (file.type | fileType) : (file.type | uppercase) }} •
+                  {{ +file.size | formatedFileSize }}
+                </div>
+              }
+            </div>
+            @if (file.loading) {
+              <svg
+                class="file__loading"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-dasharray="15"
+                  stroke-dashoffset="15"
+                  stroke-linecap="round"
+                  stroke-width="2"
+                  d="M12 3C16.9706 3 21 7.02944 21 12"
+                >
+                  <animate
+                    fill="freeze"
+                    attributeName="stroke-dashoffset"
+                    dur="0.3s"
+                    values="15;0"
+                  />
+                  <animateTransform
+                    attributeName="transform"
+                    dur="1.5s"
+                    repeatCount="indefinite"
+                    type="rotate"
+                    values="0 12 12;360 12 12"
+                  />
+                </path>
+              </svg>
+            } @else {
+              <i
+                class="file__icon file__icon--basket"
+                appIcon
+                icon="basket"
+                appSquare="8"
+                (click)="onDeleteFile(index)"
+              ></i>
             }
+          </li>
+        }
+      </ul>
+    }
+    @if (editingMessage) {
+      <div class="message-input__action action">
+        <i class="action__icon" appIcon icon="edit-pen" appSquare="12"></i>
+        <div class="action__text">
+          <div class="action__name text-body-12">
+            {{ editingMessage.author.firstName }} {{ editingMessage.author.lastName }}
           </div>
-          @if (file.loading) {
-            <svg
-              class="file__loading"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path
-                fill="none"
-                stroke="currentColor"
-                stroke-dasharray="15"
-                stroke-dashoffset="15"
-                stroke-linecap="round"
-                stroke-width="2"
-                d="M12 3C16.9706 3 21 7.02944 21 12"
-              >
-                <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0" />
-                <animateTransform
-                  attributeName="transform"
-                  dur="1.5s"
-                  repeatCount="indefinite"
-                  type="rotate"
-                  values="0 12 12;360 12 12"
-                />
-              </path>
-            </svg>
-          } @else {
-            <i
-              class="file__icon file__icon--basket"
-              appIcon
-              icon="basket"
-              appSquare="8"
-              (click)="onDeleteFile(index)"
-            ></i>
-          }
-        </li>
-      }
-    </ul>
-  }
-  @if (editingMessage) {
-    <div class="message-input__action action">
-      <i class="action__icon" appIcon icon="edit-pen" appSquare="12"></i>
-      <div class="action__text">
-        <div class="action__name text-body-12">
-          {{ editingMessage.author.firstName }} {{ editingMessage.author.lastName }}
+          <div class="action__info text-body-14">{{ editingMessage.text }}</div>
         </div>
-        <div class="action__info text-body-14">{{ editingMessage.text }}</div>
+        <i class="action__cross" appIcon icon="cross" appSquare="24" (click)="cancel.emit()"></i>
       </div>
-      <i class="action__cross" appIcon icon="cross" appSquare="24" (click)="cancel.emit()"></i>
-    </div>
-  }
-  @if (replyMessage()) {
-    <div class="message-input__action action">
-      <i class="action__icon" appIcon icon="reply" appSquare="24"></i>
-      <div class="action__text">
-        <div class="action__name text-body-12">
-          {{ replyMessage()?.author?.firstName }} {{ replyMessage()?.author?.lastName }}
+    }
+    @if (replyMessage()) {
+      <div class="message-input__action action">
+        <i class="action__icon" appIcon icon="reply" appSquare="24"></i>
+        <div class="action__text">
+          <div class="action__name text-body-12">
+            {{ replyMessage()?.author?.firstName }} {{ replyMessage()?.author?.lastName }}
+          </div>
+          <div class="action__info text-body-14">{{ replyMessage()?.text }}</div>
         </div>
-        <div class="action__info text-body-14">{{ replyMessage()?.text }}</div>
+        <i class="action__cross" appIcon icon="cross" appSquare="24" (click)="cancel.emit()"></i>
       </div>
-      <i class="action__cross" appIcon icon="cross" appSquare="24" (click)="cancel.emit()"></i>
+    }
+    <div class="message-input__control">
+      <textarea
+        autosize
+        (input)="onInput($event)"
+        (keydown.enter)="$event.preventDefault(); submit.emit()"
+        (keydown.tab)="onTextareaKeydown($event)"
+        (blur)="onBlur()"
+        (resized)="resize.emit()"
+        [mask]="mask()"
+        [dropSpecialCharacters]="true"
+        [placeholder]="placeholder()"
+        rows="1"
+        [value]="value.text"
+        class="message-input__field text-body-12"
+      ></textarea>
+      <label class="message-input__attach-button text-bold-body-12">
+        <input type="file" multiple accept="*/*" (input)="onUpload($event)" />
+        <div class="message-input__attach-button-box">
+          <i appIcon icon="attach" appSquare="25"></i>
+        </div>
+      </label>
+      <button class="message-input__send-button" (click)="submit.emit()">
+        <i appIcon icon="send" appSquare="10"></i>
+      </button>
     </div>
-  }
-  <div class="message-input__control">
-    <textarea
-      autosize
-      (input)="onInput($event)"
-      (keydown.enter)="$event.preventDefault(); submit.emit()"
-      (keydown.tab)="onTextareaKeydown($event)"
-      (blur)="onBlur()"
-      (resized)="resize.emit()"
-      [mask]="mask()"
-      [dropSpecialCharacters]="true"
-      [placeholder]="placeholder()"
-      rows="1"
-      [value]="value.text"
-      class="message-input__field text-body-12"
-    ></textarea>
-    <label class="message-input__attach-button text-bold-body-12">
-      <input type="file" multiple accept="*/*" (input)="onUpload($event)" />
-      <div class="message-input__attach-button-box">
-        <i appIcon icon="attach" appSquare="25"></i>
+    @if (showDropModal) {
+      <div class="drop-modal">
+        <div class="drop-modal__overlay"></div>
+        <div class="drop-modal__body">
+          <img
+            src="assets/images/projects/chat/drop.png"
+            alt="drop files"
+            class="drop-modal__img"
+            width="105px"
+            height="105px"
+          />
+          <h3 class="drop-modal__title text-body-12">Перетащите сюда файлы для отправки</h3>
+          <p class="drop-modal__comments text-body-10">
+            Вы можете добавить к ним комментарий или отправить отдельно
+          </p>
+        </div>
       </div>
-    </label>
-    <button class="message-input__send-button" (click)="submit.emit()">
-      <i appIcon icon="send" appSquare="10"></i>
-    </button>
+    }
   </div>
-  @if (showDropModal) {
-    <div class="drop-modal">
-      <div class="drop-modal__overlay"></div>
-      <div class="drop-modal__body">
-        <img
-          src="assets/images/projects/chat/drop.png"
-          alt="drop files"
-          class="drop-modal__img"
-          width="105px"
-          height="105px"
-        />
-        <h3 class="drop-modal__title text-body-12">Перетащите сюда файлы для отправки</h3>
-        <p class="drop-modal__comments text-body-10">
-          Вы можете добавить к ним комментарий или отправить отдельно
-        </p>
+} @else {
+  <div class="message-input">
+    @if (attachFiles.length) {
+      <ul class="message-input__action action files-list">
+        @for (file of attachFiles; let index = $index; track index) {
+          <li class="files-list__item file" [class.file--loading]="file.loading">
+            <i class="file__icon file__icon--file" appIcon icon="file" appSquare="8"></i>
+            <div class="file__info">
+              <h3 class="file__name text-body-10">{{ file.name.split(".")[0] }}</h3>
+              @if (file.type) {
+                <div class="file__meta text-body-6">
+                  {{ file.type.includes("/") ? (file.type | fileType) : (file.type | uppercase) }} •
+                  {{ +file.size | formatedFileSize }}
+                </div>
+              }
+            </div>
+            @if (file.loading) {
+              <svg
+                class="file__loading"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-dasharray="15"
+                  stroke-dashoffset="15"
+                  stroke-linecap="round"
+                  stroke-width="2"
+                  d="M12 3C16.9706 3 21 7.02944 21 12"
+                >
+                  <animate
+                    fill="freeze"
+                    attributeName="stroke-dashoffset"
+                    dur="0.3s"
+                    values="15;0"
+                  />
+                  <animateTransform
+                    attributeName="transform"
+                    dur="1.5s"
+                    repeatCount="indefinite"
+                    type="rotate"
+                    values="0 12 12;360 12 12"
+                  />
+                </path>
+              </svg>
+            } @else {
+              <i
+                class="file__icon file__icon--basket"
+                appIcon
+                icon="basket"
+                appSquare="8"
+                (click)="onDeleteFile(index)"
+              ></i>
+            }
+          </li>
+        }
+      </ul>
+    }
+    @if (editingMessage) {
+      <div class="message-input__action action">
+        <i class="action__icon" appIcon icon="edit-pen" appSquare="12"></i>
+        <div class="action__text">
+          <div class="action__name text-body-12">
+            {{ editingMessage.author.firstName }} {{ editingMessage.author.lastName }}
+          </div>
+          <div class="action__info text-body-14">{{ editingMessage.text }}</div>
+        </div>
+        <i class="action__cross" appIcon icon="cross" appSquare="24" (click)="cancel.emit()"></i>
+      </div>
+    }
+    @if (replyMessage()) {
+      <div class="message-input__action action">
+        <i class="action__icon" appIcon icon="reply" appSquare="24"></i>
+        <div class="action__text">
+          <div class="action__name text-body-12">
+            {{ replyMessage()?.author?.firstName }} {{ replyMessage()?.author?.lastName }}
+          </div>
+          <div class="action__info text-body-14">{{ replyMessage()?.text }}</div>
+        </div>
+        <i class="action__cross" appIcon icon="cross" appSquare="24" (click)="cancel.emit()"></i>
       </div>
+    }
+    <div class="message-input__control">
+      <textarea
+        autosize
+        (input)="onInput($event)"
+        (keydown.enter)="$event.preventDefault(); submit.emit()"
+        (keydown.tab)="onTextareaKeydown($event)"
+        (blur)="onBlur()"
+        (resized)="resize.emit()"
+        [mask]="mask()"
+        [dropSpecialCharacters]="true"
+        [placeholder]="placeholder()"
+        rows="1"
+        [value]="value.text"
+        class="message-input__field text-body-12"
+      ></textarea>
+      <label class="message-input__attach-button text-bold-body-12">
+        <input type="file" multiple accept="*/*" (input)="onUpload($event)" />
+        <div class="message-input__attach-button-box">
+          <i appIcon icon="attach" appSquare="25"></i>
+        </div>
+      </label>
+      <button appButton="primary" class="message-input__send-button" (click)="submit.emit()">
+        <i appIcon icon="send" appSquare="10"></i>
+      </button>
     </div>
-  }
-</div>
+    @if (showDropModal) {
+      <div class="drop-modal">
+        <div class="drop-modal__overlay"></div>
+        <div class="drop-modal__body">
+          <img
+            src="assets/images/projects/chat/drop.png"
+            alt="drop files"
+            class="drop-modal__img"
+            width="105px"
+            height="105px"
+          />
+          <h3 class="drop-modal__title text-body-12">Перетащите сюда файлы для отправки</h3>
+          <p class="drop-modal__comments text-body-10">
+            Вы можете добавить к ним комментарий или отправить отдельно
+          </p>
+        </div>
+      </div>
+    }
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.scss b/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.scss
index ad62c820d..f94c6f9f1 100644
--- a/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -237,3 +236,12 @@ $button-size: 40px;
     text-align: center;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .files-list {
+    &__item {
+      box-shadow: var(--ui-composer-shadow);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.ts b/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.ts
index 150aa7dd0..fa84d106c 100644
--- a/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/message-input/message-input.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -39,6 +44,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
     },
   ],
   imports: [
+    ButtonDirective,
     IconComponent,
     NgxMaskDirective,
     AutosizeModule,
@@ -49,6 +55,8 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MessageInputComponent implements OnInit, OnDestroy, ControlValueAccessor {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly destroyRef = inject(DestroyRef);
   private readonly cdr = inject(ChangeDetectorRef);
 
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.html b/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.html
index 36f13f525..af9e72c68 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.html
+++ b/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.html
@@ -1,39 +1,81 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  @if (images().length) {
+    <div class="carousel" [class.carousel--contain]="fit() === 'contain'">
+      @if (images().length !== 1) {
+        <div class="carousel__indexes">
+          <span>{{ currentIndex + 1 }} / {{ images().length }}</span>
+        </div>
+        <button
+          type="button"
+          aria-label="Предыдущее изображение"
+          class="carousel__btn carousel__btn--prev"
+          (click)="prev()"
+        >
+          <i appIcon icon="arrowright" appSquare="20"></i>
+        </button>
 
-@if (images().length) {
-  <div class="carousel" [class.carousel--contain]="fit() === 'contain'">
-    @if (images().length !== 1) {
-      <div class="carousel__indexes">
-        <span>{{ currentIndex + 1 }} / {{ images().length }}</span>
+        <button
+          type="button"
+          aria-label="Следующее изображение"
+          class="carousel__btn carousel__btn--next"
+          (click)="next()"
+        >
+          <i appIcon icon="arrowright" appSquare="20"></i>
+        </button>
+      }
+      <div class="carousel__image-wrapper" (touchend)="onTouchImg($event)">
+        <img
+          [src]="getImageUrl(images()[currentIndex])"
+          [alt]="getImageName(images()[currentIndex])"
+          loading="lazy"
+          decoding="async"
+        />
+        <div class="carousel__img-like" [class.carousel__img-like--show]="showLike">
+          <i appIcon icon="like" appSquare="40"></i>
+        </div>
       </div>
-      <button
-        type="button"
-        aria-label="Предыдущее изображение"
-        class="carousel__btn carousel__btn--prev"
-        (click)="prev()"
-      >
-        <i appIcon icon="arrowright" appSquare="20"></i>
-      </button>
+    </div>
+  }
+} @else {
+  @if (images().length) {
+    <div class="carousel" [class.carousel--contain]="fit() === 'contain'">
+      @if (images().length !== 1) {
+        <div class="carousel__indexes">
+          <span>{{ currentIndex + 1 }} / {{ images().length }}</span>
+        </div>
+        <button
+          appButton="secondary"
+          type="button"
+          aria-label="Предыдущее изображение"
+          class="carousel__btn carousel__btn--prev"
+          (click)="prev()"
+        >
+          <i appIcon icon="arrowright" appSquare="20"></i>
+        </button>
 
-      <button
-        type="button"
-        aria-label="Следующее изображение"
-        class="carousel__btn carousel__btn--next"
-        (click)="next()"
-      >
-        <i appIcon icon="arrowright" appSquare="20"></i>
-      </button>
-    }
-    <div class="carousel__image-wrapper" (touchend)="onTouchImg($event)">
-      <img
-        [src]="getImageUrl(images()[currentIndex])"
-        [alt]="getImageName(images()[currentIndex])"
-        loading="lazy"
-        decoding="async"
-      />
-      <div class="carousel__img-like" [class.carousel__img-like--show]="showLike">
-        <i appIcon icon="like" appSquare="40"></i>
+        <button
+          appButton="secondary"
+          type="button"
+          aria-label="Следующее изображение"
+          class="carousel__btn carousel__btn--next"
+          (click)="next()"
+        >
+          <i appIcon icon="arrowright" appSquare="20"></i>
+        </button>
+      }
+      <div class="carousel__image-wrapper" (touchend)="onTouchImg($event)">
+        <img
+          [src]="getImageUrl(images()[currentIndex])"
+          [alt]="getImageName(images()[currentIndex])"
+          loading="lazy"
+          decoding="async"
+        />
+        <div class="carousel__img-like" [class.carousel__img-like--show]="showLike">
+          <i appIcon icon="like" appSquare="40"></i>
+        </div>
       </div>
     </div>
-  </div>
+  }
 }
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.scss
index 5ccb03db5..d7513f06e 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/typography";
 
 .carousel {
@@ -106,3 +105,20 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .carousel {
+    /* Лента задаёт высоту preview; остальные страницы сохраняют естественный размер изображения. */
+
+    /* Опциональный режим чтения: contain сохраняет весь кадр даже при ограничении по высоте. */
+
+    &__indexes {
+      background-color: var(--ui-media-button);
+    }
+
+    &__btn {
+      background-color: var(--ui-media-button-active);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.ts b/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.ts
index 5447d6144..17af66f47 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/news-card/carousel/carousel.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -12,17 +15,19 @@ import {
   Output,
 } from "@angular/core";
 import { FileModel } from "@domain/file/file.model";
-import { IconComponent } from "@uilib";
+import { IconComponent, ButtonDirective } from "@uilib";
 
 /** Компонент карусели для просмотра изображений с навигацией и лайками. */
 @Component({
   selector: "app-carousel",
-  imports: [IconComponent],
+  imports: [ButtonDirective, IconComponent],
   templateUrl: "./carousel.component.html",
   styleUrls: ["./carousel.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CarouselComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly images = input<Array<FileModel | string>>([]);
   /** Полное изображение без обрезки включается только локальным окном чтения новости. */
   readonly fit = input<"cover" | "contain">("cover");
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.html b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.html
index f89b18470..f11f8759d 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.html
+++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.html
@@ -1,85 +1,181 @@
 <!-- @format -->
-<app-modal [open]="open()" bodyClass="feed-news-modal-body" (openChange)="close()">
-  <section
-    class="feed-news-modal"
-    role="dialog"
-    aria-modal="true"
-    [attr.aria-label]="'Новость: ' + news().name"
-  >
-    <div
-      class="feed-news-modal__shell"
-      [cdkTrapFocus]="attached()"
-      [cdkTrapFocusAutoCapture]="false"
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <app-modal [open]="open()" bodyClass="feed-news-modal-body" (openChange)="close()">
+    <section
+      class="feed-news-modal"
+      role="dialog"
+      aria-modal="true"
+      [attr.aria-label]="'Новость: ' + news().name"
     >
-      <header class="feed-news-modal__header">
-        <span class="feed-news-modal__badge">{{
-          type() === "people" ? "Новости людей" : "Новости проекта"
-        }}</span>
-        <time [attr.datetime]="publishedAt()">{{
-          publishedAt() | dayjs: "format" : "DD.MM.YYYY"
-        }}</time>
-        <button
-          #closeButton
-          type="button"
-          class="feed-news-modal__close"
-          aria-label="Закрыть новость"
-          (click)="close()"
-        >
-          ×
-        </button>
-      </header>
       <div
-        class="feed-news-modal__scroll"
-        tabindex="0"
-        role="region"
-        aria-label="Содержимое новости"
+        class="feed-news-modal__shell"
+        [cdkTrapFocus]="attached()"
+        [cdkTrapFocusAutoCapture]="false"
       >
-        <div class="feed-news-modal__source">
-          <img [src]="news().imageAddress || placeholderUrl()" [alt]="news().name" />
-          <div>
-            <span>{{ type() === "people" ? "Автор" : "Проект" }}</span
-            ><a [routerLink]="resourceLink()" (click)="leave()">{{ news().name }}</a>
+        <header class="feed-news-modal__header">
+          <span class="feed-news-modal__badge">{{
+            type() === "people" ? "Новости людей" : "Новости проекта"
+          }}</span>
+          <time [attr.datetime]="publishedAt()">{{
+            publishedAt() | dayjs: "format" : "DD.MM.YYYY"
+          }}</time>
+          <button
+            #closeButton
+            type="button"
+            class="feed-news-modal__close"
+            aria-label="Закрыть новость"
+            (click)="close()"
+          >
+            ×
+          </button>
+        </header>
+        <div
+          class="feed-news-modal__scroll"
+          tabindex="0"
+          role="region"
+          aria-label="Содержимое новости"
+        >
+          <div class="feed-news-modal__source">
+            <img [src]="news().imageAddress || placeholderUrl()" [alt]="news().name" />
+            <div>
+              <span>{{ type() === "people" ? "Автор" : "Проект" }}</span
+              ><a [routerLink]="resourceLink()" (click)="leave()">{{ news().name }}</a>
+            </div>
           </div>
+          <div
+            class="feed-news-modal__text"
+            [innerHTML]="news().text | parseLinks | parseBreaks"
+          ></div>
+          @if (images().length) {
+            <app-carousel [images]="images()" fit="contain" (like)="like.emit()" />
+          }
+          @if (files().length) {
+            <ul class="feed-news-modal__files" aria-label="Вложения новости">
+              @for (file of files(); track $index) {
+                <li>
+                  <a [href]="file.link" [attr.download]="file.name"
+                    ><i appIcon icon="download" appSquare="16"></i>{{ file.name }}</a
+                  >
+                </li>
+              }
+            </ul>
+          }
+          <footer class="feed-news-modal__actions">
+            <button
+              type="button"
+              aria-label="Нравится"
+              [attr.aria-pressed]="news().isUserLiked"
+              [class.feed-news-modal__liked]="news().isUserLiked"
+              (click)="like.emit()"
+            >
+              <i appIcon icon="like" appSquare="16"></i>{{ news().likesCount }}
+            </button>
+            <button type="button" aria-label="Скопировать ссылку на новость" (click)="share.emit()">
+              <i appIcon icon="share" appSquare="16"></i>
+            </button>
+            <span [attr.aria-label]="'Просмотров: ' + news().viewsCount"
+              ><i appIcon icon="eye" appSquare="16"></i>{{ news().viewsCount }}</span
+            >
+          </footer>
+          <a class="feed-news-modal__cta" [routerLink]="resourceLink()" (click)="leave()">{{
+            type() === "people" ? "Перейти в профиль" : "Перейти в проект"
+          }}</a>
         </div>
-        <div
-          class="feed-news-modal__text"
-          [innerHTML]="news().text | parseLinks | parseBreaks"
-        ></div>
-        @if (images().length) {
-          <app-carousel [images]="images()" fit="contain" (like)="like.emit()" />
-        }
-        @if (files().length) {
-          <ul class="feed-news-modal__files" aria-label="Вложения новости">
-            @for (file of files(); track $index) {
-              <li>
-                <a [href]="file.link" [attr.download]="file.name"
-                  ><i appIcon icon="download" appSquare="16"></i>{{ file.name }}</a
-                >
-              </li>
-            }
-          </ul>
-        }
-        <footer class="feed-news-modal__actions">
+      </div>
+    </section>
+  </app-modal>
+} @else {
+  <app-modal [open]="open()" bodyClass="feed-news-modal-body" (openChange)="close()">
+    <section
+      class="feed-news-modal"
+      role="dialog"
+      aria-modal="true"
+      [attr.aria-label]="'Новость: ' + news().name"
+    >
+      <div
+        class="feed-news-modal__shell"
+        [cdkTrapFocus]="attached()"
+        [cdkTrapFocusAutoCapture]="false"
+      >
+        <header class="feed-news-modal__header">
+          <span class="feed-news-modal__badge">{{
+            type() === "people" ? "Новости людей" : "Новости проекта"
+          }}</span>
+          <time [attr.datetime]="publishedAt()">{{
+            publishedAt() | dayjs: "format" : "DD.MM.YYYY"
+          }}</time>
           <button
+            appButton="icon"
+            #closeButton
             type="button"
-            aria-label="Нравится"
-            [attr.aria-pressed]="news().isUserLiked"
-            [class.feed-news-modal__liked]="news().isUserLiked"
-            (click)="like.emit()"
+            class="feed-news-modal__close"
+            aria-label="Закрыть новость"
+            (click)="close()"
           >
-            <i appIcon icon="like" appSquare="16"></i>{{ news().likesCount }}
+            ×
           </button>
-          <button type="button" aria-label="Скопировать ссылку на новость" (click)="share.emit()">
-            <i appIcon icon="share" appSquare="16"></i>
-          </button>
-          <span [attr.aria-label]="'Просмотров: ' + news().viewsCount"
-            ><i appIcon icon="eye" appSquare="16"></i>{{ news().viewsCount }}</span
-          >
-        </footer>
-        <a class="feed-news-modal__cta" [routerLink]="resourceLink()" (click)="leave()">{{
-          type() === "people" ? "Перейти в профиль" : "Перейти в проект"
-        }}</a>
+        </header>
+        <div
+          class="feed-news-modal__scroll"
+          appDialogBody
+          tabindex="0"
+          role="region"
+          aria-label="Содержимое новости"
+        >
+          <div class="feed-news-modal__source">
+            <img [src]="news().imageAddress || placeholderUrl()" [alt]="news().name" />
+            <div>
+              <span>{{ type() === "people" ? "Автор" : "Проект" }}</span
+              ><a [routerLink]="resourceLink()" (click)="leave()">{{ news().name }}</a>
+            </div>
+          </div>
+          <div
+            class="feed-news-modal__text"
+            [innerHTML]="news().text | parseLinks | parseBreaks"
+          ></div>
+          @if (images().length) {
+            <app-carousel [images]="images()" fit="contain" (like)="like.emit()" />
+          }
+          @if (files().length) {
+            <ul class="feed-news-modal__files" aria-label="Вложения новости">
+              @for (file of files(); track $index) {
+                <li>
+                  <a [href]="file.link" [attr.download]="file.name"
+                    ><i appIcon icon="download" appSquare="16"></i>{{ file.name }}</a
+                  >
+                </li>
+              }
+            </ul>
+          }
+          <footer appDialogFooter class="feed-news-modal__actions">
+            <button
+              appButton="secondary"
+              type="button"
+              aria-label="Нравится"
+              [attr.aria-pressed]="news().isUserLiked"
+              [class.feed-news-modal__liked]="news().isUserLiked"
+              (click)="like.emit()"
+            >
+              <i appIcon icon="like" appSquare="16"></i>{{ news().likesCount }}
+            </button>
+            <button
+              appButton="secondary"
+              type="button"
+              aria-label="Скопировать ссылку на новость"
+              (click)="share.emit()"
+            >
+              <i appIcon icon="share" appSquare="16"></i>
+            </button>
+            <span [attr.aria-label]="'Просмотров: ' + news().viewsCount"
+              ><i appIcon icon="eye" appSquare="16"></i>{{ news().viewsCount }}</span
+            >
+          </footer>
+          <a class="feed-news-modal__cta" [routerLink]="resourceLink()" (click)="leave()">{{
+            type() === "people" ? "Перейти в профиль" : "Перейти в проект"
+          }}</a>
+        </div>
       </div>
-    </div>
-  </section>
-</app-modal>
+    </section>
+  </app-modal>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss
index debc8fd90..2387408de 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.scss
@@ -191,3 +191,46 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .feed-news-modal {
+    font-size: var(--ui-font-body);
+
+    &__header {
+      gap: 12px;
+      padding: 12px 20px;
+    }
+
+    &__badge {
+      font-size: var(--ui-font-caption);
+    }
+
+    time {
+      font-size: var(--ui-font-caption);
+    }
+
+    button.feed-news-modal__close {
+      border-radius: var(--ui-radius-dialog);
+    }
+
+    &__scroll {
+      padding: 20px;
+    }
+
+    &__source span {
+      font-size: var(--ui-font-caption);
+    }
+
+    @media (max-width: 599px) {
+      &__header {
+        gap: 8px;
+        padding: 10px 12px;
+      }
+
+      &__scroll {
+        padding: 16px;
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.ts b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.ts
index f4d77d0ce..c922f8691 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-modal/feed-news-modal.component.ts
@@ -1,4 +1,10 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, DialogBodyDirective, DialogFooterDirective } from "@uilib";
+
 import { A11yModule, CdkTrapFocus } from "@angular/cdk/a11y";
 import {
   AfterViewInit,
@@ -27,6 +33,9 @@ import { CarouselComponent } from "../carousel/carousel.component";
 @Component({
   selector: "app-feed-news-modal",
   imports: [
+    DialogBodyDirective,
+    DialogFooterDirective,
+    ButtonDirective,
     ModalComponent,
     A11yModule,
     RouterLink,
@@ -42,6 +51,8 @@ import { CarouselComponent } from "../carousel/carousel.component";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeedNewsModalComponent implements AfterViewInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly news = input.required<FeedNews>();
   readonly type = input.required<"project" | "people">();
   readonly images = input<FileModel[]>([]);
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.html b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.html
index 880fa8be7..49685b566 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.html
+++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.html
@@ -1,137 +1,297 @@
 <!-- @format -->
-<article
-  class="feed-preview"
-  [id]="news().id"
-  tabindex="0"
-  role="button"
-  aria-haspopup="dialog"
-  [attr.aria-expanded]="modalOpen()"
-  [attr.aria-label]="'Открыть новость ' + headline()"
-  (click)="onCardClick($event)"
-  (keydown.enter)="onCardKeydown($event)"
-  (keydown.space)="onCardKeydown($event)"
->
-  <div class="feed-card__meta">
-    <div class="feed-preview__badges">
-      <span class="card__feed-type feed-card__type">{{
-        type() === "people" ? "Новости людей" : "Новости проекта"
-      }}</span>
-      @if (industryId(); as id) {
-        @if (industryRepository.getOne(id); as industry) {
-          <span
-            class="card__feed-industry feed-card__chip feed-card__chip--industry"
-            [title]="industry.name"
-            >{{ industry.name }}</span
-          >
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <article
+    class="feed-preview"
+    [id]="news().id"
+    tabindex="0"
+    role="button"
+    aria-haspopup="dialog"
+    [attr.aria-expanded]="modalOpen()"
+    [attr.aria-label]="'Открыть новость ' + headline()"
+    (click)="onCardClick($event)"
+    (keydown.enter)="onCardKeydown($event)"
+    (keydown.space)="onCardKeydown($event)"
+  >
+    <div class="feed-card__meta">
+      <div class="feed-preview__badges">
+        <span class="card__feed-type feed-card__type">{{
+          type() === "people" ? "Новости людей" : "Новости проекта"
+        }}</span>
+        @if (industryId(); as id) {
+          @if (industryRepository.getOne(id); as industry) {
+            <span
+              class="card__feed-industry feed-card__chip feed-card__chip--industry"
+              [title]="industry.name"
+              >{{ industry.name }}</span
+            >
+          }
         }
+      </div>
+      <time class="card__feed-date feed-card__date" [attr.datetime]="publishedAt()">{{
+        publishedAt() | dayjs: "format" : "DD.MM.YYYY"
+      }}</time>
+    </div>
+    <div class="feed-card__source">
+      <img
+        class="feed-card__avatar"
+        [src]="news().imageAddress || placeholderUrl()"
+        [alt]="news().name"
+      />
+      <div class="feed-card__source-text">
+        <span class="feed-card__eyebrow">{{ type() === "people" ? "Автор" : "Проект" }}</span>
+        <a class="feed-card__source-name" [title]="news().name" [routerLink]="resourceLink()">{{
+          news().name
+        }}</a>
+      </div>
+      @if (isOwner()) {
+        <div class="feed-preview__menu" (clickOutside)="menuOpen.set(false)">
+          <button
+            type="button"
+            class="feed-preview__menu-trigger"
+            aria-label="Действия с новостью"
+            [attr.aria-expanded]="menuOpen()"
+            (click)="menuOpen.set(!menuOpen())"
+          >
+            <i appIcon icon="dots" appWidth="4" appHeight="10" appViewBox="0 0 4 10"></i>
+          </button>
+          @if (menuOpen()) {
+            <div class="feed-preview__options">
+              <button type="button" (click)="menuOpen.set(false); edit.emit()">
+                редактировать
+              </button>
+              <button type="button" (click)="menuOpen.set(false); delete.emit()">удалить</button>
+            </div>
+          }
+        </div>
       }
     </div>
-    <time class="card__feed-date feed-card__date" [attr.datetime]="publishedAt()">{{
-      publishedAt() | dayjs: "format" : "DD.MM.YYYY"
-    }}</time>
-  </div>
-  <div class="feed-card__source">
-    <img
-      class="feed-card__avatar"
-      [src]="news().imageAddress || placeholderUrl()"
-      [alt]="news().name"
-    />
-    <div class="feed-card__source-text">
-      <span class="feed-card__eyebrow">{{ type() === "people" ? "Автор" : "Проект" }}</span>
-      <a class="feed-card__source-name" [title]="news().name" [routerLink]="resourceLink()">{{
-        news().name
-      }}</a>
+    <div class="feed-preview__content" [class.feed-preview__content--image]="images().length > 0">
+      <div class="feed-preview__text">
+        <h3 #titleElement class="feed-card__title" [title]="headline()">{{ headline() }}</h3>
+        @if (summary()) {
+          <p #summaryElement class="feed-card__description" [textContent]="summary()"></p>
+        }
+        @if (truncated()) {
+          <button
+            #moreButton
+            type="button"
+            class="feed-preview__more"
+            (click)="openModal(moreButton)"
+          >
+            Подробнее
+          </button>
+        }
+        @if (files().length) {
+          <span class="feed-preview__attachments">Вложений: {{ files().length }}</span>
+        }
+      </div>
+      @if (images().length) {
+        <div class="feed-preview__media">
+          <img
+            class="feed-preview__thumbnail"
+            [src]="images()[0].link"
+            [alt]="images()[0].name"
+            loading="lazy"
+          />
+          @if (images().length > 1) {
+            <span class="feed-preview__image-count">{{ images().length }} фото</span>
+          }
+        </div>
+      }
     </div>
-    @if (isOwner()) {
-      <div class="feed-preview__menu" (clickOutside)="menuOpen.set(false)">
+    <footer class="feed-preview__actions">
+      <div class="feed-preview__actions-left">
         <button
           type="button"
-          class="feed-preview__menu-trigger"
-          aria-label="Действия с новостью"
-          [attr.aria-expanded]="menuOpen()"
-          (click)="menuOpen.set(!menuOpen())"
+          aria-label="Нравится"
+          [attr.aria-pressed]="news().isUserLiked"
+          [class.feed-preview__liked]="news().isUserLiked"
+          (click)="like.emit()"
         >
-          <i appIcon icon="dots" appWidth="4" appHeight="10" appViewBox="0 0 4 10"></i>
+          <i appIcon icon="like" appSquare="16"></i>
+          <span>{{ news().likesCount }}</span>
+        </button>
+        <button type="button" aria-label="Скопировать ссылку на новость" (click)="share.emit()">
+          <i appIcon icon="share" appSquare="16"></i>
         </button>
-        @if (menuOpen()) {
-          <div class="feed-preview__options">
-            <button type="button" (click)="menuOpen.set(false); edit.emit()">редактировать</button>
-            <button type="button" (click)="menuOpen.set(false); delete.emit()">удалить</button>
-          </div>
+      </div>
+      <span class="feed-preview__views" [attr.aria-label]="'Просмотров: ' + news().viewsCount"
+        ><i appIcon icon="eye" appSquare="16"></i><span>{{ news().viewsCount }}</span></span
+      >
+    </footer>
+    <a class="card__feed-cta feed-card__cta" [routerLink]="resourceLink()">{{
+      type() === "people" ? "Перейти в профиль" : "Перейти в проект"
+    }}</a>
+  </article>
+  @if (modalOpen()) {
+    <app-feed-news-modal
+      [news]="news()"
+      [type]="type()"
+      [images]="images()"
+      [files]="files()"
+      [resourceLink]="resourceLink()"
+      [publishedAt]="publishedAt()"
+      [placeholderUrl]="placeholderUrl()"
+      [trigger]="trigger"
+      (like)="like.emit()"
+      (share)="share.emit()"
+      (closed)="modalOpen.set(false)"
+    />
+  }
+} @else {
+  <article
+    appCard
+    [interactive]="true"
+    class="feed-preview"
+    [id]="news().id"
+    tabindex="0"
+    role="button"
+    aria-haspopup="dialog"
+    [attr.aria-expanded]="modalOpen()"
+    [attr.aria-label]="'Открыть новость ' + headline()"
+    (click)="onCardClick($event)"
+    (keydown.enter)="onCardKeydown($event)"
+    (keydown.space)="onCardKeydown($event)"
+  >
+    <div class="feed-card__meta">
+      <div class="feed-preview__badges">
+        <span class="card__feed-type feed-card__type">{{
+          type() === "people" ? "Новости людей" : "Новости проекта"
+        }}</span>
+        @if (industryId(); as id) {
+          @if (industryRepository.getOne(id); as industry) {
+            <span
+              class="card__feed-industry feed-card__chip feed-card__chip--industry"
+              [title]="industry.name"
+              >{{ industry.name }}</span
+            >
+          }
         }
       </div>
-    }
-  </div>
-  <div class="feed-preview__content" [class.feed-preview__content--image]="images().length > 0">
-    <div class="feed-preview__text">
-      <h3 #titleElement class="feed-card__title" [title]="headline()">{{ headline() }}</h3>
-      @if (summary()) {
-        <p #summaryElement class="feed-card__description" [textContent]="summary()"></p>
+      <time class="card__feed-date feed-card__date" [attr.datetime]="publishedAt()">{{
+        publishedAt() | dayjs: "format" : "DD.MM.YYYY"
+      }}</time>
+    </div>
+    <div class="feed-card__source">
+      <img
+        class="feed-card__avatar"
+        [src]="news().imageAddress || placeholderUrl()"
+        [alt]="news().name"
+      />
+      <div class="feed-card__source-text">
+        <span class="feed-card__eyebrow">{{ type() === "people" ? "Автор" : "Проект" }}</span>
+        <a class="feed-card__source-name" [title]="news().name" [routerLink]="resourceLink()">{{
+          news().name
+        }}</a>
+      </div>
+      @if (isOwner()) {
+        <div class="feed-preview__menu" (clickOutside)="menuOpen.set(false)">
+          <button
+            appButton="secondary"
+            type="button"
+            class="feed-preview__menu-trigger"
+            aria-label="Действия с новостью"
+            [attr.aria-expanded]="menuOpen()"
+            (click)="menuOpen.set(!menuOpen())"
+          >
+            <i appIcon icon="dots" appWidth="4" appHeight="10" appViewBox="0 0 4 10"></i>
+          </button>
+          @if (menuOpen()) {
+            <div class="feed-preview__options">
+              <button
+                appButton="secondary"
+                type="button"
+                (click)="menuOpen.set(false); edit.emit()"
+              >
+                редактировать
+              </button>
+              <button appButton="danger" type="button" (click)="menuOpen.set(false); delete.emit()">
+                удалить
+              </button>
+            </div>
+          }
+        </div>
       }
-      @if (truncated()) {
+    </div>
+    <div class="feed-preview__content" [class.feed-preview__content--image]="images().length > 0">
+      <div class="feed-preview__text">
+        <h3 #titleElement class="feed-card__title" [title]="headline()">{{ headline() }}</h3>
+        @if (summary()) {
+          <p #summaryElement class="feed-card__description" [textContent]="summary()"></p>
+        }
+        @if (truncated()) {
+          <button
+            appButton="secondary"
+            #moreButton
+            type="button"
+            class="feed-preview__more"
+            (click)="openModal(moreButton)"
+          >
+            Подробнее
+          </button>
+        }
+        @if (files().length) {
+          <span class="feed-preview__attachments">Вложений: {{ files().length }}</span>
+        }
+      </div>
+      @if (images().length) {
+        <div class="feed-preview__media">
+          <img
+            class="feed-preview__thumbnail"
+            [src]="images()[0].link"
+            [alt]="images()[0].name"
+            loading="lazy"
+          />
+          @if (images().length > 1) {
+            <span class="feed-preview__image-count">{{ images().length }} фото</span>
+          }
+        </div>
+      }
+    </div>
+    <footer class="feed-preview__actions">
+      <div class="feed-preview__actions-left">
         <button
-          #moreButton
+          appButton="secondary"
           type="button"
-          class="feed-preview__more"
-          (click)="openModal(moreButton)"
+          aria-label="Нравится"
+          [attr.aria-pressed]="news().isUserLiked"
+          [class.feed-preview__liked]="news().isUserLiked"
+          (click)="like.emit()"
         >
-          Подробнее
+          <i appIcon icon="like" appSquare="16"></i>
+          <span>{{ news().likesCount }}</span>
+        </button>
+        <button
+          appButton="secondary"
+          type="button"
+          aria-label="Скопировать ссылку на новость"
+          (click)="share.emit()"
+        >
+          <i appIcon icon="share" appSquare="16"></i>
         </button>
-      }
-      @if (files().length) {
-        <span class="feed-preview__attachments">Вложений: {{ files().length }}</span>
-      }
-    </div>
-    @if (images().length) {
-      <div class="feed-preview__media">
-        <img
-          class="feed-preview__thumbnail"
-          [src]="images()[0].link"
-          [alt]="images()[0].name"
-          loading="lazy"
-        />
-        @if (images().length > 1) {
-          <span class="feed-preview__image-count">{{ images().length }} фото</span>
-        }
       </div>
-    }
-  </div>
-  <footer class="feed-preview__actions">
-    <div class="feed-preview__actions-left">
-      <button
-        type="button"
-        aria-label="Нравится"
-        [attr.aria-pressed]="news().isUserLiked"
-        [class.feed-preview__liked]="news().isUserLiked"
-        (click)="like.emit()"
+      <span class="feed-preview__views" [attr.aria-label]="'Просмотров: ' + news().viewsCount"
+        ><i appIcon icon="eye" appSquare="16"></i><span>{{ news().viewsCount }}</span></span
       >
-        <i appIcon icon="like" appSquare="16"></i>
-        <span>{{ news().likesCount }}</span>
-      </button>
-      <button type="button" aria-label="Скопировать ссылку на новость" (click)="share.emit()">
-        <i appIcon icon="share" appSquare="16"></i>
-      </button>
-    </div>
-    <span class="feed-preview__views" [attr.aria-label]="'Просмотров: ' + news().viewsCount"
-      ><i appIcon icon="eye" appSquare="16"></i><span>{{ news().viewsCount }}</span></span
-    >
-  </footer>
-  <a class="card__feed-cta feed-card__cta" [routerLink]="resourceLink()">{{
-    type() === "people" ? "Перейти в профиль" : "Перейти в проект"
-  }}</a>
-</article>
-@if (modalOpen()) {
-  <app-feed-news-modal
-    [news]="news()"
-    [type]="type()"
-    [images]="images()"
-    [files]="files()"
-    [resourceLink]="resourceLink()"
-    [publishedAt]="publishedAt()"
-    [placeholderUrl]="placeholderUrl()"
-    [trigger]="trigger"
-    (like)="like.emit()"
-    (share)="share.emit()"
-    (closed)="modalOpen.set(false)"
-  />
+    </footer>
+    <a class="card__feed-cta feed-card__cta" [routerLink]="resourceLink()">{{
+      type() === "people" ? "Перейти в профиль" : "Перейти в проект"
+    }}</a>
+  </article>
+  @if (modalOpen()) {
+    <app-feed-news-modal
+      [news]="news()"
+      [type]="type()"
+      [images]="images()"
+      [files]="files()"
+      [resourceLink]="resourceLink()"
+      [publishedAt]="publishedAt()"
+      [placeholderUrl]="placeholderUrl()"
+      [trigger]="trigger"
+      (like)="like.emit()"
+      (share)="share.emit()"
+      (closed)="modalOpen.set(false)"
+    />
+  }
 }
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss
index f9474ccc0..fe4f6cf1d 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.scss
@@ -1,6 +1,6 @@
 /** @format */
-
 @use "styles/feed-card";
+@use "styles/ui-foundation";
 
 :host {
   display: grid;
@@ -180,3 +180,31 @@
     text-align: left;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .feed-preview {
+    @include ui-foundation.card;
+
+    &__image-count {
+      font-size: var(--ui-font-caption);
+      background: var(--ui-media-backdrop);
+    }
+
+    button.feed-preview__more {
+      font-size: var(--ui-font-small);
+    }
+
+    &__attachments {
+      font-size: var(--ui-font-caption);
+    }
+
+    &__actions {
+      font-size: var(--ui-font-small);
+    }
+
+    &__options button {
+      font-size: var(--ui-font-small);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.ts b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.ts
index 438148d7c..ac5ed9e36 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/news-card/feed-news-preview/feed-news-preview.component.ts
@@ -1,4 +1,10 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, CardDirective } from "@uilib";
+
 import {
   afterRenderEffect,
   ChangeDetectionStrategy,
@@ -22,12 +28,22 @@ import { FeedNewsModalComponent } from "../feed-news-modal/feed-news-modal.compo
 /** Компактное представление только глобальной ленты; данные и действия остаются у NewsCard. */
 @Component({
   selector: "app-feed-news-preview",
-  imports: [RouterLink, DayjsPipe, IconComponent, ClickOutsideModule, FeedNewsModalComponent],
+  imports: [
+    CardDirective,
+    ButtonDirective,
+    RouterLink,
+    DayjsPipe,
+    IconComponent,
+    ClickOutsideModule,
+    FeedNewsModalComponent,
+  ],
   templateUrl: "./feed-news-preview.component.html",
   styleUrl: "./feed-news-preview.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeedNewsPreviewComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly news = input.required<FeedNews>();
   readonly type = input.required<"project" | "people">();
   readonly headline = input.required<string>();
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss
index 7dc41a241..797286380 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.scss
@@ -1,7 +1,7 @@
 /** @format */
-
 @use "styles/typography";
 @use "styles/responsive";
+@use "styles/ui-foundation";
 
 .card {
   padding: 24px 12px;
@@ -251,3 +251,18 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .card {
+    &__text {
+      .card__feed-summary {
+        font-size: var(--ui-font-body);
+      }
+    }
+  }
+
+  .news {
+    @include ui-foundation.card;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.ts b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.ts
index c6345dafe..d52f0f11e 100644
--- a/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/news-card/news-card.component.ts
@@ -1,5 +1,7 @@
 /** @format */
 
+import { CardDirective } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -52,6 +54,7 @@ import { IndustryRepositoryPort } from "@domain/industry/ports/industry.reposito
   templateUrl: "./news-card.component.html",
   styleUrl: "./news-card.component.scss",
   imports: [
+    CardDirective,
     FeedNewsPreviewComponent,
     ClickOutsideModule,
     RouterLink,
diff --git a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.html b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.html
index 043ef0991..73547be6a 100644
--- a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.html
+++ b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.html
@@ -1,61 +1,123 @@
 <!-- @format -->
-
-<form class="form" [formGroup]="messageForm" (ngSubmit)="onSubmit()">
-  <div class="form__row">
-    <app-textarea
-      size="big"
-      formControlName="text"
-      class="form__input text-body-12"
-      autosize
-      placeholder="сегодня был хороший день"
-      (paste)="onPaste($event)"
-      (keydown.meta.enter)="onSubmit()"
-      [maxLength]="maxTextLength"
-    ></app-textarea>
-    <i
-      appIcon
-      icon="send"
-      appSquare="12"
-      class="form__send"
-      [style.opacity]="isSubmitDisabled() ? '0.5' : '1'"
-      [style.pointer-events]="isSubmitDisabled() ? 'none' : 'auto'"
-      (click)="onSubmit()"
-    ></i>
-  </div>
-  <div class="form__images">
-    @for (i of imagesList(); track i.id) {
-      <app-img-card
-        [loading]="i.loading"
-        [src]="i.src"
-        [error]="i.error"
-        (cancel)="onDeletePhoto(i.id)"
-        (retry)="onRetryUpload(i.id)"
-      ></app-img-card>
-    }
-  </div>
-  <div class="form__files">
-    @for (f of filesList(); track f.id) {
-      <app-file-upload-item
-        [name]="f.tempFile.name"
-        [type]="f.tempFile.type"
-        [size]="f.tempFile.size"
-        [loading]="f.loading"
-        [error]="f.error"
-        (delete)="onDeleteFile(f.id)"
-        (retry)="onRetryFile(f.id)"
-      ></app-file-upload-item>
-    }
-  </div>
-  <div class="footer">
-    <label class="footer__attach">
-      <i appIcon icon="attach" appSquare="12"></i>
-      <input
-        type="file"
-        accept="*/*"
-        multiple
-        [disabled]="pending()"
-        (change)="onInputFiles($event)"
-      />
-    </label>
-  </div>
-</form>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <form class="form" [formGroup]="messageForm" (ngSubmit)="onSubmit()">
+    <div class="form__row">
+      <app-textarea
+        size="big"
+        formControlName="text"
+        class="form__input text-body-12"
+        autosize
+        placeholder="сегодня был хороший день"
+        (paste)="onPaste($event)"
+        (keydown.meta.enter)="onSubmit()"
+        [maxLength]="maxTextLength"
+      ></app-textarea>
+      <i
+        appIcon
+        icon="send"
+        appSquare="12"
+        class="form__send"
+        [style.opacity]="isSubmitDisabled() ? '0.5' : '1'"
+        [style.pointer-events]="isSubmitDisabled() ? 'none' : 'auto'"
+        (click)="onSubmit()"
+      ></i>
+    </div>
+    <div class="form__images">
+      @for (i of imagesList(); track i.id) {
+        <app-img-card
+          [loading]="i.loading"
+          [src]="i.src"
+          [error]="i.error"
+          (cancel)="onDeletePhoto(i.id)"
+          (retry)="onRetryUpload(i.id)"
+        ></app-img-card>
+      }
+    </div>
+    <div class="form__files">
+      @for (f of filesList(); track f.id) {
+        <app-file-upload-item
+          [name]="f.tempFile.name"
+          [type]="f.tempFile.type"
+          [size]="f.tempFile.size"
+          [loading]="f.loading"
+          [error]="f.error"
+          (delete)="onDeleteFile(f.id)"
+          (retry)="onRetryFile(f.id)"
+        ></app-file-upload-item>
+      }
+    </div>
+    <div class="footer">
+      <label class="footer__attach">
+        <i appIcon icon="attach" appSquare="12"></i>
+        <input
+          type="file"
+          accept="*/*"
+          multiple
+          [disabled]="pending()"
+          (change)="onInputFiles($event)"
+        />
+      </label>
+    </div>
+  </form>
+} @else {
+  <form appFormLayout class="form" [formGroup]="messageForm" (ngSubmit)="onSubmit()">
+    <div class="form__row">
+      <app-textarea
+        size="big"
+        formControlName="text"
+        class="form__input text-body-12"
+        autosize
+        placeholder="сегодня был хороший день"
+        (paste)="onPaste($event)"
+        (keydown.meta.enter)="onSubmit()"
+        [maxLength]="maxTextLength"
+      ></app-textarea>
+      <i
+        appIcon
+        icon="send"
+        appSquare="12"
+        class="form__send"
+        [style.opacity]="isSubmitDisabled() ? '0.5' : '1'"
+        [style.pointer-events]="isSubmitDisabled() ? 'none' : 'auto'"
+        (click)="onSubmit()"
+      ></i>
+    </div>
+    <div class="form__images">
+      @for (i of imagesList(); track i.id) {
+        <app-img-card
+          [loading]="i.loading"
+          [src]="i.src"
+          [error]="i.error"
+          (cancel)="onDeletePhoto(i.id)"
+          (retry)="onRetryUpload(i.id)"
+        ></app-img-card>
+      }
+    </div>
+    <div class="form__files">
+      @for (f of filesList(); track f.id) {
+        <app-file-upload-item
+          [name]="f.tempFile.name"
+          [type]="f.tempFile.type"
+          [size]="f.tempFile.size"
+          [loading]="f.loading"
+          [error]="f.error"
+          (delete)="onDeleteFile(f.id)"
+          (retry)="onRetryFile(f.id)"
+        ></app-file-upload-item>
+      }
+    </div>
+    <div class="footer">
+      <label class="footer__attach">
+        <i appIcon icon="attach" appSquare="12"></i>
+        <input
+          type="file"
+          accept="*/*"
+          multiple
+          [disabled]="pending()"
+          (change)="onInputFiles($event)"
+        />
+      </label>
+    </div>
+  </form>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss
index 2c5205a79..cd29ea123 100644
--- a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.scss
@@ -1,3 +1,6 @@
+/** @format */
+@use "styles/responsive";
+
 .form {
   padding: 20px 12px 10px;
   background-color: var(--light-white);
@@ -78,3 +81,27 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-mobile {
+    .form__input {
+      min-width: 0;
+    }
+
+    .form__send {
+      flex-shrink: 0;
+      min-width: 44px;
+      min-height: 44px;
+      margin-left: 8px;
+    }
+
+    .footer__attach {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.ts b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.ts
index 892de64d7..d5bd36b64 100644
--- a/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/news-form/news-form.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { FormLayoutDirective } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -44,6 +49,7 @@ type FileUploadItem = {
   templateUrl: "./news-form.component.html",
   styleUrl: "./news-form.component.scss",
   imports: [
+    FormLayoutDirective,
     ReactiveFormsModule,
     AutosizeModule,
     IconComponent,
@@ -54,6 +60,8 @@ type FileUploadItem = {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NewsFormComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly destroyRef = inject(DestroyRef);
 
   constructor(
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/profile-project-invite-modal.component.html b/projects/social_platform/src/app/ui/widgets/project-invite/profile-project-invite-modal.component.html
index 8bf8f3c9d..b696fa749 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/profile-project-invite-modal.component.html
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/profile-project-invite-modal.component.html
@@ -1,109 +1,236 @@
 <!-- @format -->
-<app-project-invite-dialog
-  title="Пригласить в проект"
-  description="Выберите проект и укажите роль участника"
-  [trigger]="trigger()"
-  (closed)="closed.emit()"
->
-  <div inviteSearch>
-    @if (projects().length) {
-      <label class="invite-search">
-        <svg
-          width="18"
-          height="18"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.6"
-          aria-hidden="true"
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <app-project-invite-dialog
+    title="Пригласить в проект"
+    description="Выберите проект и укажите роль участника"
+    [trigger]="trigger()"
+    (closed)="closed.emit()"
+  >
+    <div inviteSearch>
+      @if (projects().length) {
+        <label class="invite-search">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            aria-hidden="true"
+          >
+            <circle cx="10" cy="10" r="7" />
+            <path d="m15 15 6 6" />
+          </svg>
+          <input
+            data-invite-autofocus
+            type="search"
+            aria-label="Поиск среди ваших проектов"
+            placeholder="Поиск среди ваших проектов…"
+            [value]="query()"
+            (input)="query.set($any($event.target).value)"
+            [readOnly]="loading()"
+          />
+        </label>
+      }
+    </div>
+    <div inviteList>
+      @if (projects().length) {
+        <p class="invite-label">Ваши проекты</p>
+        <div class="invite-rows" role="radiogroup" aria-label="Ваши проекты">
+          @for (project of filteredProjects(); track project.id) {
+            <button
+              type="button"
+              class="invite-row"
+              role="radio"
+              [class.invite-row--selected]="selectedProjectId() === project.id"
+              [attr.aria-checked]="selectedProjectId() === project.id"
+              [disabled]="loading()"
+              (click)="selected.emit(project.id)"
+            >
+              <span class="invite-avatar">
+                @if (project.imageAddress) {
+                  <img [src]="project.imageAddress" alt="" />
+                } @else {
+                  {{ (project.name || "П").slice(0, 1) }}
+                }
+              </span>
+              <span class="invite-copy"
+                ><strong>{{ project.name || "Проект без названия" }}</strong>
+                @if (project.shortDescription) {
+                  <span class="invite-meta">{{ project.shortDescription }}</span>
+                }
+                @if (project.numberOfCollaborators !== undefined) {
+                  <span class="invite-meta">Участников: {{ project.numberOfCollaborators }}</span>
+                }
+              </span>
+              <span class="invite-radio" aria-hidden="true"></span>
+            </button>
+          } @empty {
+            <p class="invite-helper" role="status">
+              Проекты не найдены. Попробуйте другое название.
+            </p>
+          }
+        </div>
+      } @else {
+        <p class="invite-helper">Вы не являетесь лидером ни в одном проекте.</p>
+      }
+    </div>
+    <div inviteRole>
+      @if (projects().length) {
+        <app-project-invite-role-input [control]="form().controls.role" [readonly]="loading()" />
+      }
+    </div>
+    @if (error(); as error) {
+      <p inviteError class="invite-error" role="alert">{{ error.message }}</p>
+    }
+    <div inviteFooter class="invite-actions">
+      <button type="button" class="invite-button" (click)="closed.emit()">Отмена</button>
+      @if (projects().length) {
+        <button
+          type="button"
+          class="invite-button invite-button--primary"
+          [disabled]="!selectedProjectId() || form().invalid || loading()"
+          [attr.aria-busy]="loading()"
+          (click)="sent.emit()"
         >
-          <circle cx="10" cy="10" r="7" />
-          <path d="m15 15 6 6" />
-        </svg>
-        <input
+          @if (loading()) {
+            <span class="invite-spinner" aria-hidden="true"></span>
+          }
+          {{ loading() ? "Отправляем…" : "Отправить приглашение" }}
+        </button>
+      } @else {
+        <button
           data-invite-autofocus
-          type="search"
-          aria-label="Поиск среди ваших проектов"
-          placeholder="Поиск среди ваших проектов…"
-          [value]="query()"
-          (input)="query.set($any($event.target).value)"
-          [readOnly]="loading()"
-        />
-      </label>
-    }
-  </div>
-  <div inviteList>
-    @if (projects().length) {
-      <p class="invite-label">Ваши проекты</p>
-      <div class="invite-rows" role="radiogroup" aria-label="Ваши проекты">
-        @for (project of filteredProjects(); track project.id) {
-          <button
-            type="button"
-            class="invite-row"
-            role="radio"
-            [class.invite-row--selected]="selectedProjectId() === project.id"
-            [attr.aria-checked]="selectedProjectId() === project.id"
-            [disabled]="loading()"
-            (click)="selected.emit(project.id)"
+          type="button"
+          class="invite-button invite-button--primary"
+          (click)="projectsRequested.emit()"
+        >
+          Перейти в проекты
+        </button>
+      }
+    </div>
+  </app-project-invite-dialog>
+} @else {
+  <app-project-invite-dialog
+    title="Пригласить в проект"
+    description="Выберите проект и укажите роль участника"
+    [trigger]="trigger()"
+    (closed)="closed.emit()"
+  >
+    <div inviteSearch>
+      @if (projects().length) {
+        <label class="invite-search">
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            aria-hidden="true"
           >
-            <span class="invite-avatar">
-              @if (project.imageAddress) {
-                <img [src]="project.imageAddress" alt="" />
-              } @else {
-                {{ (project.name || "П").slice(0, 1) }}
-              }
-            </span>
-            <span class="invite-copy"
-              ><strong>{{ project.name || "Проект без названия" }}</strong>
-              @if (project.shortDescription) {
-                <span class="invite-meta">{{ project.shortDescription }}</span>
-              }
-              @if (project.numberOfCollaborators !== undefined) {
-                <span class="invite-meta">Участников: {{ project.numberOfCollaborators }}</span>
-              }
-            </span>
-            <span class="invite-radio" aria-hidden="true"></span>
-          </button>
-        } @empty {
-          <p class="invite-helper" role="status">Проекты не найдены. Попробуйте другое название.</p>
-        }
-      </div>
-    } @else {
-      <p class="invite-helper">Вы не являетесь лидером ни в одном проекте.</p>
-    }
-  </div>
-  <div inviteRole>
-    @if (projects().length) {
-      <app-project-invite-role-input [control]="form().controls.role" [readonly]="loading()" />
+            <circle cx="10" cy="10" r="7" />
+            <path d="m15 15 6 6" />
+          </svg>
+          <input
+            data-invite-autofocus
+            type="search"
+            aria-label="Поиск среди ваших проектов"
+            placeholder="Поиск среди ваших проектов…"
+            [value]="query()"
+            (input)="query.set($any($event.target).value)"
+            [readOnly]="loading()"
+          />
+        </label>
+      }
+    </div>
+    <div inviteList>
+      @if (projects().length) {
+        <p class="invite-label">Ваши проекты</p>
+        <div class="invite-rows" role="radiogroup" aria-label="Ваши проекты">
+          @for (project of filteredProjects(); track project.id) {
+            <button
+              appButton="secondary"
+              type="button"
+              class="invite-row"
+              role="radio"
+              [class.invite-row--selected]="selectedProjectId() === project.id"
+              [attr.aria-checked]="selectedProjectId() === project.id"
+              [disabled]="loading()"
+              (click)="selected.emit(project.id)"
+            >
+              <span class="invite-avatar">
+                @if (project.imageAddress) {
+                  <img [src]="project.imageAddress" alt="" />
+                } @else {
+                  {{ (project.name || "П").slice(0, 1) }}
+                }
+              </span>
+              <span class="invite-copy"
+                ><strong>{{ project.name || "Проект без названия" }}</strong>
+                @if (project.shortDescription) {
+                  <span class="invite-meta">{{ project.shortDescription }}</span>
+                }
+                @if (project.numberOfCollaborators !== undefined) {
+                  <span class="invite-meta">Участников: {{ project.numberOfCollaborators }}</span>
+                }
+              </span>
+              <span class="invite-radio" aria-hidden="true"></span>
+            </button>
+          } @empty {
+            <p class="invite-helper" role="status">
+              Проекты не найдены. Попробуйте другое название.
+            </p>
+          }
+        </div>
+      } @else {
+        <p class="invite-helper">Вы не являетесь лидером ни в одном проекте.</p>
+      }
+    </div>
+    <div inviteRole>
+      @if (projects().length) {
+        <app-project-invite-role-input [control]="form().controls.role" [readonly]="loading()" />
+      }
+    </div>
+    @if (error(); as error) {
+      <app-state
+        inviteError
+        class="invite-error"
+        [compact]="true"
+        kind="error"
+        title="{{ error.message }}"
+      />
     }
-  </div>
-  @if (error(); as error) {
-    <p inviteError class="invite-error" role="alert">{{ error.message }}</p>
-  }
-  <div inviteFooter class="invite-actions">
-    <button type="button" class="invite-button" (click)="closed.emit()">Отмена</button>
-    @if (projects().length) {
-      <button
-        type="button"
-        class="invite-button invite-button--primary"
-        [disabled]="!selectedProjectId() || form().invalid || loading()"
-        [attr.aria-busy]="loading()"
-        (click)="sent.emit()"
-      >
-        @if (loading()) {
-          <span class="invite-spinner" aria-hidden="true"></span>
-        }
-        {{ loading() ? "Отправляем…" : "Отправить приглашение" }}
+    <div inviteFooter class="invite-actions">
+      <button appButton="secondary" type="button" class="invite-button" (click)="closed.emit()">
+        Отмена
       </button>
-    } @else {
-      <button
-        data-invite-autofocus
-        type="button"
-        class="invite-button invite-button--primary"
-        (click)="projectsRequested.emit()"
-      >
-        Перейти в проекты
-      </button>
-    }
-  </div>
-</app-project-invite-dialog>
+      @if (projects().length) {
+        <button
+          appButton="secondary"
+          type="button"
+          class="invite-button invite-button--primary"
+          [disabled]="!selectedProjectId() || form().invalid || loading()"
+          [attr.aria-busy]="loading()"
+          (click)="sent.emit()"
+        >
+          @if (loading()) {
+            <span class="invite-spinner" aria-hidden="true"></span>
+          }
+          {{ loading() ? "Отправляем…" : "Отправить приглашение" }}
+        </button>
+      } @else {
+        <button
+          appButton="secondary"
+          data-invite-autofocus
+          type="button"
+          class="invite-button invite-button--primary"
+          (click)="projectsRequested.emit()"
+        >
+          Перейти в проекты
+        </button>
+      }
+    </div>
+  </app-project-invite-dialog>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/profile-project-invite-modal.component.ts b/projects/social_platform/src/app/ui/widgets/project-invite/profile-project-invite-modal.component.ts
index a33a7fa06..a7d8c32fc 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/profile-project-invite-modal.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/profile-project-invite-modal.component.ts
@@ -1,4 +1,10 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, StateComponent } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, computed, input, output, signal } from "@angular/core";
 import { Project } from "@domain/project/project.model";
 import { ProjectInviteForm } from "@api/invite/project-invite-form";
@@ -9,11 +15,18 @@ import { ProjectInviteRoleInputComponent } from "./project-invite-role-input.com
 
 @Component({
   selector: "app-profile-project-invite-modal",
-  imports: [ProjectInviteDialogComponent, ProjectInviteRoleInputComponent],
+  imports: [
+    StateComponent,
+    ButtonDirective,
+    ProjectInviteDialogComponent,
+    ProjectInviteRoleInputComponent,
+  ],
   templateUrl: "./profile-project-invite-modal.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileProjectInviteModalComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly projects = input.required<Project[]>();
   readonly form = input.required<ProjectInviteForm>();
   readonly selectedProjectId = input<number | null>(null);
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss
index d1dbf687d..0643d2bc0 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.scss
@@ -547,3 +547,252 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .modal .modal__body.project-invite-body {
+    left: 50%;
+    width: min(var(--ui-dialog-md), calc(100% - 24px));
+    max-width: calc(100% - 24px);
+    max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px));
+    border-radius: var(--ui-radius-dialog);
+  }
+
+  .project-invite {
+    max-height: min(720px, calc(var(--visual-viewport-height, 100dvh) - 48px));
+    padding: var(--ui-dialog-padding);
+    border-radius: var(--ui-radius-dialog);
+
+    &__header {
+      gap: 12px;
+      margin-bottom: 18px;
+    }
+
+    &__header h2 {
+      font-size: 19px;
+    }
+
+    &__header p {
+      font-size: var(--ui-font-small);
+    }
+
+    &__symbol {
+      height: 48px;
+      border-radius: var(--ui-radius-dialog);
+    }
+
+    &__role {
+      margin-top: 18px;
+    }
+
+    &__footer {
+      padding-top: 16px;
+      margin-top: 18px;
+    }
+
+    .invite-actions {
+      gap: 12px;
+    }
+
+    .invite-button {
+      padding: 9px 12px;
+      font-size: var(--ui-font-body);
+      border-radius: var(--ui-radius-dialog);
+    }
+
+    .invite-search {
+      border-radius: var(--ui-radius-dialog);
+    }
+
+    .invite-label {
+      font-size: var(--ui-font-body);
+    }
+
+    .invite-row {
+      border-radius: var(--ui-radius-dialog);
+    }
+
+    .invite-copy strong {
+      font-size: var(--ui-font-body);
+    }
+
+    .invite-meta {
+      font-size: var(--ui-font-caption);
+    }
+
+    .invite-avatar {
+      font-size: var(--ui-font-h3);
+      border-radius: var(--ui-radius-dialog);
+    }
+
+    .invite-helper {
+      font-size: var(--ui-font-body);
+    }
+
+    .invite-error {
+      font-size: var(--ui-font-small);
+      color: var(--error, var(--ui-error-text));
+    }
+
+    @media (width <= 600px) {
+      max-height: calc(100dvh - 24px);
+      padding: 16px;
+
+      &__header {
+        gap: 8px;
+        margin-bottom: 14px;
+      }
+
+      &__header h2 {
+        font-size: var(--ui-font-h3);
+      }
+
+      &__header p {
+        font-size: var(--ui-font-caption);
+      }
+
+      &__symbol {
+        height: 44px;
+      }
+
+      &__role {
+        margin-top: 12px;
+      }
+
+      &__footer {
+        padding-top: 12px;
+        margin-top: 12px;
+      }
+
+      .invite-actions {
+        gap: 8px;
+      }
+
+      .invite-button {
+        padding: 9px 8px;
+        font-size: var(--ui-font-small);
+      }
+
+      .invite-search input {
+        font-size: var(--ui-font-h3);
+      }
+    }
+  }
+
+  @media (width <= 600px) {
+    .modal .modal__body.project-invite-body {
+      max-height: calc(100dvh - 24px);
+    }
+  }
+
+  .project-invite.project-invite--compact {
+    .project-invite__header {
+      grid-template-columns: minmax(0, 1fr) 36px;
+    }
+
+    .project-invite__header h2 {
+      font-size: var(--ui-font-h2);
+    }
+
+    .project-invite__header p {
+      font-size: var(--ui-font-body);
+    }
+
+    .project-invite__close {
+      min-width: 36px;
+      height: 36px;
+    }
+
+    .invite-label,
+    app-project-invite-role-input .invite-role label {
+      font-size: var(--ui-font-small);
+    }
+
+    .invite-search,
+    app-project-invite-role-input .invite-role input {
+      min-height: 41px;
+    }
+
+    .invite-search input {
+      font-size: var(--ui-font-small);
+    }
+
+    app-project-invite-role-input .invite-role input {
+      font-size: var(--ui-font-small);
+    }
+
+    app-project-invite-role-input .invite-role p,
+    .invite-meta {
+      font-size: var(--ui-font-small);
+    }
+
+    .invite-copy strong {
+      font-size: var(--ui-font-body);
+    }
+
+    .invite-button {
+      min-height: 25px;
+      font-size: var(--ui-font-small);
+    }
+
+    @media (width <= 600px) {
+      .project-invite__header {
+        grid-template-columns: minmax(0, 1fr) 44px;
+      }
+
+      .project-invite__close {
+        min-width: 44px;
+        height: 44px;
+      }
+
+      .project-invite__header p {
+        font-size: var(--ui-font-small);
+      }
+
+      .invite-actions {
+        grid-template-columns: 1fr;
+      }
+
+      .invite-button {
+        min-height: 44px;
+      }
+
+      .invite-search,
+      app-project-invite-role-input .invite-role input {
+        min-height: 44px;
+      }
+
+      .invite-search input,
+      app-project-invite-role-input .invite-role input {
+        font-size: var(--ui-font-h3);
+      }
+    }
+  }
+
+  .project-invite .invite-search input {
+    padding: 0;
+    font-size: var(--ui-font-body);
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .project-invite .invite-search input:focus-visible {
+    outline: none;
+  }
+
+  .project-invite.project-invite--compact .project-invite__footer {
+    display: block;
+  }
+
+  .project-invite.project-invite--compact .invite-actions {
+    grid-template-columns: 140px 208px;
+    grid-template-columns: minmax(0, 1fr);
+    width: 100%;
+  }
+
+  .project-invite .invite-actions > button.ui-button {
+    width: 100%;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.ts b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.ts
index 1d003b471..1aa6d932b 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-dialog.component.ts
@@ -1,4 +1,10 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, DialogBodyDirective, DialogFooterDirective } from "@uilib";
+
 import { A11yModule, CdkTrapFocus } from "@angular/cdk/a11y";
 import { Overlay } from "@angular/cdk/overlay";
 import {
@@ -21,13 +27,22 @@ import { IconComponent } from "@ui/primitives/icon/icon.component";
 
 @Component({
   selector: "app-project-invite-dialog",
-  imports: [ModalComponent, IconComponent, A11yModule],
+  imports: [
+    DialogBodyDirective,
+    DialogFooterDirective,
+    ButtonDirective,
+    ModalComponent,
+    IconComponent,
+    A11yModule,
+  ],
   templateUrl: "./project-invite-dialog.component.html",
   styleUrl: "./project-invite-dialog.component.scss",
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectInviteDialogComponent implements AfterViewInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly title = input.required<string>();
   readonly description = input.required<string>();
   readonly trigger = input<HTMLElement | null>(null);
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.html b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.html
index 557635634..a1888acff 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.html
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.html
@@ -1,54 +1,113 @@
 <!-- @format -->
-<div class="invite-role">
-  <label [for]="id">Роль в проекте</label>
-  <input
-    [id]="id"
-    [formControl]="control()"
-    [readOnly]="readonly()"
-    role="combobox"
-    aria-autocomplete="list"
-    [attr.aria-expanded]="opened() && suggestions().length > 0"
-    [attr.aria-controls]="id + '-options'"
-    [attr.aria-activedescendant]="opened() && active() >= 0 ? id + '-option-' + active() : null"
-    [attr.aria-invalid]="control().invalid && control().touched"
-    [attr.aria-describedby]="id + '-help'"
-    autocomplete="off"
-    placeholder="Например: Backend-разработчик"
-    (focus)="opened.set(!readonly())"
-    (input)="opened.set(true)"
-    (blur)="opened.set(false)"
-    (keydown)="onKeydown($event)"
-  />
-  @if (opened() && suggestions().length && !readonly()) {
-    <div
-      class="invite-role__options"
-      [id]="id + '-options'"
-      role="listbox"
-      aria-label="Подсказки ролей"
-    >
-      @for (role of suggestions(); track role; let index = $index) {
-        <button
-          type="button"
-          role="option"
-          tabindex="-1"
-          [id]="id + '-option-' + index"
-          [attr.aria-selected]="active() === index"
-          [class.active]="active() === index"
-          (pointerdown)="$event.preventDefault()"
-          (click)="choose(role)"
-        >
-          {{ role }}
-        </button>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="invite-role">
+    <label [for]="id">Роль в проекте</label>
+    <input
+      [id]="id"
+      [formControl]="control()"
+      [readOnly]="readonly()"
+      role="combobox"
+      aria-autocomplete="list"
+      [attr.aria-expanded]="opened() && suggestions().length > 0"
+      [attr.aria-controls]="id + '-options'"
+      [attr.aria-activedescendant]="opened() && active() >= 0 ? id + '-option-' + active() : null"
+      [attr.aria-invalid]="control().invalid && control().touched"
+      [attr.aria-describedby]="id + '-help'"
+      autocomplete="off"
+      placeholder="Например: Backend-разработчик"
+      (focus)="opened.set(!readonly())"
+      (input)="opened.set(true)"
+      (blur)="opened.set(false)"
+      (keydown)="onKeydown($event)"
+    />
+    @if (opened() && suggestions().length && !readonly()) {
+      <div
+        class="invite-role__options"
+        [id]="id + '-options'"
+        role="listbox"
+        aria-label="Подсказки ролей"
+      >
+        @for (role of suggestions(); track role; let index = $index) {
+          <button
+            type="button"
+            role="option"
+            tabindex="-1"
+            [id]="id + '-option-' + index"
+            [attr.aria-selected]="active() === index"
+            [class.active]="active() === index"
+            (pointerdown)="$event.preventDefault()"
+            (click)="choose(role)"
+          >
+            {{ role }}
+          </button>
+        }
+      </div>
+    }
+    <p [id]="id + '-help'" [class.invalid]="control().invalid && control().touched">
+      @if (control().touched && control().hasError("required")) {
+        Укажите роль участника.
+      } @else if (control().hasError("maxlength")) {
+        Не более 128 символов.
+      } @else {
+        Выберите подсказку или напишите свою роль.
       }
-    </div>
-  }
-  <p [id]="id + '-help'" [class.invalid]="control().invalid && control().touched">
-    @if (control().touched && control().hasError("required")) {
-      Укажите роль участника.
-    } @else if (control().hasError("maxlength")) {
-      Не более 128 символов.
-    } @else {
-      Выберите подсказку или напишите свою роль.
+    </p>
+  </div>
+} @else {
+  <div class="invite-role">
+    <label [for]="id">Роль в проекте</label>
+    <input
+      appField
+      [id]="id"
+      [formControl]="control()"
+      [readOnly]="readonly()"
+      role="combobox"
+      aria-autocomplete="list"
+      [attr.aria-expanded]="opened() && suggestions().length > 0"
+      [attr.aria-controls]="id + '-options'"
+      [attr.aria-activedescendant]="opened() && active() >= 0 ? id + '-option-' + active() : null"
+      [attr.aria-invalid]="control().invalid && control().touched"
+      [attr.aria-describedby]="id + '-help'"
+      autocomplete="off"
+      placeholder="Например: Backend-разработчик"
+      (focus)="opened.set(!readonly())"
+      (input)="opened.set(true)"
+      (blur)="opened.set(false)"
+      (keydown)="onKeydown($event)"
+    />
+    @if (opened() && suggestions().length && !readonly()) {
+      <div
+        class="invite-role__options"
+        [id]="id + '-options'"
+        role="listbox"
+        aria-label="Подсказки ролей"
+      >
+        @for (role of suggestions(); track role; let index = $index) {
+          <button
+            appButton="secondary"
+            type="button"
+            role="option"
+            tabindex="-1"
+            [id]="id + '-option-' + index"
+            [attr.aria-selected]="active() === index"
+            [class.active]="active() === index"
+            (pointerdown)="$event.preventDefault()"
+            (click)="choose(role)"
+          >
+            {{ role }}
+          </button>
+        }
+      </div>
     }
-  </p>
-</div>
+    <p [id]="id + '-help'" [class.invalid]="control().invalid && control().touched">
+      @if (control().touched && control().hasError("required")) {
+        Укажите роль участника.
+      } @else if (control().hasError("maxlength")) {
+        Не более 128 символов.
+      } @else {
+        Выберите подсказку или напишите свою роль.
+      }
+    </p>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss
index 4f4c8a4c2..f9381c95f 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.scss
@@ -1,4 +1,5 @@
 /** @format */
+
 :host {
   display: block;
   min-width: 0;
@@ -89,3 +90,38 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .invite-role {
+    label {
+      font-size: var(--ui-font-body);
+    }
+
+    input {
+      font-size: var(--ui-font-body);
+    }
+
+    p {
+      font-size: var(--ui-font-caption);
+    }
+
+    p.invalid {
+      color: var(--error, var(--ui-error-text));
+    }
+
+    &__options {
+      box-shadow: 0 6px 24px var(--ui-overlay-shadow-color);
+    }
+
+    button {
+      font-size: var(--ui-font-body);
+    }
+
+    @media (width <= 600px) {
+      input {
+        font-size: var(--ui-font-h3);
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.ts b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.ts
index d349ce1c5..8eb9fcad5 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-invite-role-input.component.ts
@@ -1,4 +1,10 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, FieldDirective } from "@uilib";
+
 import {
   afterNextRender,
   ChangeDetectionStrategy,
@@ -18,12 +24,14 @@ import { filterProjectRoles } from "@domain/invite/project-role-suggestions";
 let nextRoleId = 0;
 @Component({
   selector: "app-project-invite-role-input",
-  imports: [ReactiveFormsModule],
+  imports: [ButtonDirective, FieldDirective, ReactiveFormsModule],
   templateUrl: "./project-invite-role-input.component.html",
   styleUrl: "./project-invite-role-input.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectInviteRoleInputComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly control = input.required<FormControl<string>>();
   readonly readonly = input(false);
   readonly id = "invite-role-" + ++nextRoleId;
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-member-invite-modal.component.html b/projects/social_platform/src/app/ui/widgets/project-invite/project-member-invite-modal.component.html
index 71b838e6a..4feb44e47 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-member-invite-modal.component.html
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-member-invite-modal.component.html
@@ -1,70 +1,152 @@
 <!-- @format -->
-<app-project-invite-dialog
-  title="Пригласить участника"
-  [compact]="true"
-  description="Найдите участника и укажите его роль в проекте"
-  [trigger]="trigger()"
-  (closed)="closed.emit()"
->
-  <div inviteSearch>
-    <label class="invite-label" for="team-invite-search">Участник</label>
-    <div class="invite-search">
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.6"
-        aria-hidden="true"
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <app-project-invite-dialog
+    title="Пригласить участника"
+    [compact]="true"
+    description="Найдите участника и укажите его роль в проекте"
+    [trigger]="trigger()"
+    (closed)="closed.emit()"
+  >
+    <div inviteSearch>
+      <label class="invite-label" for="team-invite-search">Участник</label>
+      <div class="invite-search">
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.6"
+          aria-hidden="true"
+        >
+          <circle cx="10" cy="10" r="7" />
+          <path d="m15 15 6 6" />
+        </svg>
+        <input
+          #searchInput
+          id="team-invite-search"
+          data-invite-autofocus
+          type="search"
+          aria-label="Поиск по имени или фамилии"
+          placeholder="Поиск по имени или фамилии…"
+          [formControl]="query"
+          [readOnly]="isLoading(ui.inviteFormIsSubmitting())"
+        />
+      </div>
+    </div>
+    <app-participant-picker
+      inviteList
+      [state]="search.state()"
+      [selected]="ui.selectedRecipient()"
+      [leaderId]="project()?.leader"
+      [collaborators]="ui.collaborators()"
+      [invites]="ui.invites()"
+      [busy]="isLoading(ui.inviteFormIsSubmitting())"
+      (chosen)="select($event)"
+      (cleared)="clear()"
+    />
+    <app-project-invite-role-input
+      inviteRole
+      [control]="ui.inviteForm.controls.role"
+      [readonly]="isLoading(ui.inviteFormIsSubmitting())"
+    />
+    @if (ui.inviteSubmitError(); as error) {
+      <p inviteError class="invite-error" role="alert">{{ error.message }}</p>
+    }
+    <div inviteFooter class="invite-actions">
+      <button type="button" class="invite-button" (click)="closed.emit()">Отмена</button>
+      <button
+        type="button"
+        class="invite-button invite-button--primary"
+        [disabled]="ui.inviteForm.invalid || isLoading(ui.inviteFormIsSubmitting())"
+        [attr.aria-busy]="isLoading(ui.inviteFormIsSubmitting())"
+        (click)="team.submitInvite(projectId())"
       >
-        <circle cx="10" cy="10" r="7" />
-        <path d="m15 15 6 6" />
-      </svg>
-      <input
-        #searchInput
-        id="team-invite-search"
-        data-invite-autofocus
-        type="search"
-        aria-label="Поиск по имени или фамилии"
-        placeholder="Поиск по имени или фамилии…"
-        [formControl]="query"
-        [readOnly]="isLoading(ui.inviteFormIsSubmitting())"
+        @if (isLoading(ui.inviteFormIsSubmitting())) {
+          <span class="invite-spinner" aria-hidden="true"></span>
+        }
+        {{ isLoading(ui.inviteFormIsSubmitting()) ? "Отправляем…" : "Отправить приглашение" }}
+      </button>
+    </div>
+  </app-project-invite-dialog>
+} @else {
+  <app-project-invite-dialog
+    title="Пригласить участника"
+    [compact]="true"
+    description="Найдите участника и укажите его роль в проекте"
+    [trigger]="trigger()"
+    (closed)="closed.emit()"
+  >
+    <div inviteSearch>
+      <label class="invite-label" for="team-invite-search">Участник</label>
+      <div class="invite-search">
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.6"
+          aria-hidden="true"
+        >
+          <circle cx="10" cy="10" r="7" />
+          <path d="m15 15 6 6" />
+        </svg>
+        <input
+          #searchInput
+          id="team-invite-search"
+          data-invite-autofocus
+          type="search"
+          aria-label="Поиск по имени или фамилии"
+          placeholder="Поиск по имени или фамилии…"
+          [formControl]="query"
+          [readOnly]="isLoading(ui.inviteFormIsSubmitting())"
+        />
+      </div>
+    </div>
+    <app-participant-picker
+      inviteList
+      [state]="search.state()"
+      [selected]="ui.selectedRecipient()"
+      [leaderId]="project()?.leader"
+      [collaborators]="ui.collaborators()"
+      [invites]="ui.invites()"
+      [busy]="isLoading(ui.inviteFormIsSubmitting())"
+      (chosen)="select($event)"
+      (cleared)="clear()"
+    />
+    <app-project-invite-role-input
+      inviteRole
+      [control]="ui.inviteForm.controls.role"
+      [readonly]="isLoading(ui.inviteFormIsSubmitting())"
+    />
+    @if (ui.inviteSubmitError(); as error) {
+      <app-state
+        inviteError
+        class="invite-error"
+        [compact]="true"
+        kind="error"
+        title="{{ error.message }}"
       />
+    }
+    <div inviteFooter class="invite-actions">
+      <button appButton="secondary" type="button" class="invite-button" (click)="closed.emit()">
+        Отмена
+      </button>
+      <button
+        appButton="primary"
+        type="button"
+        class="invite-button invite-button--primary"
+        [disabled]="ui.inviteForm.invalid || isLoading(ui.inviteFormIsSubmitting())"
+        [attr.aria-busy]="isLoading(ui.inviteFormIsSubmitting())"
+        (click)="team.submitInvite(projectId())"
+      >
+        @if (isLoading(ui.inviteFormIsSubmitting())) {
+          <span class="invite-spinner" aria-hidden="true"></span>
+        }
+        {{ isLoading(ui.inviteFormIsSubmitting()) ? "Отправляем…" : "Отправить приглашение" }}
+      </button>
     </div>
-  </div>
-  <app-participant-picker
-    inviteList
-    [state]="search.state()"
-    [selected]="ui.selectedRecipient()"
-    [leaderId]="project()?.leader"
-    [collaborators]="ui.collaborators()"
-    [invites]="ui.invites()"
-    [busy]="isLoading(ui.inviteFormIsSubmitting())"
-    (chosen)="select($event)"
-    (cleared)="clear()"
-  />
-  <app-project-invite-role-input
-    inviteRole
-    [control]="ui.inviteForm.controls.role"
-    [readonly]="isLoading(ui.inviteFormIsSubmitting())"
-  />
-  @if (ui.inviteSubmitError(); as error) {
-    <p inviteError class="invite-error" role="alert">{{ error.message }}</p>
-  }
-  <div inviteFooter class="invite-actions">
-    <button type="button" class="invite-button" (click)="closed.emit()">Отмена</button>
-    <button
-      type="button"
-      class="invite-button invite-button--primary"
-      [disabled]="ui.inviteForm.invalid || isLoading(ui.inviteFormIsSubmitting())"
-      [attr.aria-busy]="isLoading(ui.inviteFormIsSubmitting())"
-      (click)="team.submitInvite(projectId())"
-    >
-      @if (isLoading(ui.inviteFormIsSubmitting())) {
-        <span class="invite-spinner" aria-hidden="true"></span>
-      }
-      {{ isLoading(ui.inviteFormIsSubmitting()) ? "Отправляем…" : "Отправить приглашение" }}
-    </button>
-  </div>
-</app-project-invite-dialog>
+  </app-project-invite-dialog>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/project-invite/project-member-invite-modal.component.ts b/projects/social_platform/src/app/ui/widgets/project-invite/project-member-invite-modal.component.ts
index ea03687ca..4be2c22b2 100644
--- a/projects/social_platform/src/app/ui/widgets/project-invite/project-member-invite-modal.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/project-invite/project-member-invite-modal.component.ts
@@ -1,4 +1,10 @@
 /** @format */
+
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, StateComponent } from "@uilib";
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -26,6 +32,8 @@ import { ParticipantPickerComponent } from "./participant-picker.component";
 @Component({
   selector: "app-project-member-invite-modal",
   imports: [
+    StateComponent,
+    ButtonDirective,
     ReactiveFormsModule,
     ProjectInviteDialogComponent,
     ProjectInviteRoleInputComponent,
@@ -36,6 +44,8 @@ import { ParticipantPickerComponent } from "./participant-picker.component";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectMemberInviteModalComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly project = input<Project | null>(null);
   readonly projectId = input.required<number>();
   readonly trigger = input<HTMLElement | null>(null);
diff --git a/projects/social_platform/src/app/ui/widgets/project-navigation/project-navigation.component.html b/projects/social_platform/src/app/ui/widgets/project-navigation/project-navigation.component.html
deleted file mode 100644
index de1f69197..000000000
--- a/projects/social_platform/src/app/ui/widgets/project-navigation/project-navigation.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!-- @format -->
-
-<nav class="project__navigation">
-  <ul class="project__nav">
-    @for (item of navItems(); track $index) {
-      <li
-        class="project__item"
-        [class.project__item--active]="currentStep() === item.step"
-        (click)="onStepClick(item.step)"
-      >
-        <i
-          appIcon
-          [icon]="item.src"
-          class="project__icon"
-          appSquare="14"
-          [class.project__icon--active]="currentStep() === item.step"
-          alt="project-icon"
-        ></i>
-        <p
-          class="project__subtitle"
-          [class.project__subtitle--active]="currentStep() === item.step"
-        >
-          {{ item.label }}
-        </p>
-      </li>
-    }
-  </ul>
-</nav>
diff --git a/projects/social_platform/src/app/ui/widgets/project-navigation/project-navigation.component.ts b/projects/social_platform/src/app/ui/widgets/project-navigation/project-navigation.component.ts
index 84543563b..932ef9c62 100644
--- a/projects/social_platform/src/app/ui/widgets/project-navigation/project-navigation.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/project-navigation/project-navigation.component.ts
@@ -1,39 +1,7 @@
-/** @format */
+/**
+ * Compatibility export for the shared project/profile step navigation.
+ *
+ * @format
+ */
 
-import {
-  Component,
-  inject,
-  Output,
-  EventEmitter,
-  Input,
-  ChangeDetectionStrategy,
-  input,
-  output,
-} from "@angular/core";
-import { IconComponent } from "@uilib";
-import { CommonModule } from "@angular/common";
-import { ProjectStepService } from "@api/project/project-step.service";
-import { Navigation } from "@core/lib/models/navigation.model";
-import { EditStep } from "@core/public-api";
-
-/** Виджет навигации по разделам проекта. */
-@Component({
-  selector: "app-project-navigation",
-  templateUrl: "./project-navigation.component.html",
-  styleUrl: "project-navigation.component.scss",
-  imports: [IconComponent, CommonModule],
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ProjectNavigationComponent {
-  readonly navItems = input.required<Navigation[]>();
-  readonly stepChange = output<EditStep>();
-
-  private readonly projectStepService = inject(ProjectStepService);
-
-  protected readonly currentStep = this.projectStepService.currentStep;
-
-  onStepClick(step: EditStep): void {
-    this.projectStepService.navigateToStep(step);
-  }
-}
+export { ProjectNavigationComponent } from "@ui/pages/projects/edit/components/project-navigation/project-navigation.component";
diff --git a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.html b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.html
index 6ff129077..09189b419 100644
--- a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.html
+++ b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.html
@@ -1,77 +1,155 @@
 <!-- @format -->
-
-<article class="vacancy">
-  <header class="vacancy__header">
-    <div class="vacancy__meta">
-      <app-vacancy-status
-        [label]="vacancy().isActive ? 'Активна' : 'Закрыта'"
-        [tone]="vacancy().isActive ? 'success' : 'neutral'"
-      ></app-vacancy-status>
-      @if (vacancy().datetimeCreated) {
-        <time class="vacancy__date" [attr.datetime]="vacancy().datetimeCreated">{{
-          vacancy().datetimeCreated | dayjs: "format" : "DD.MM.YYYY"
-        }}</time>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <article class="vacancy">
+    <header class="vacancy__header">
+      <div class="vacancy__meta">
+        <app-vacancy-status
+          [label]="vacancy().isActive ? 'Активна' : 'Закрыта'"
+          [tone]="vacancy().isActive ? 'success' : 'neutral'"
+        ></app-vacancy-status>
+        @if (vacancy().datetimeCreated) {
+          <time class="vacancy__date" [attr.datetime]="vacancy().datetimeCreated">{{
+            vacancy().datetimeCreated | dayjs: "format" : "DD.MM.YYYY"
+          }}</time>
+        }
+      </div>
+      <h3 class="vacancy__role" [title]="vacancy().role">
+        <a [routerLink]="AppRoutes.office.vacancy(vacancy().id)">{{ vacancy().role }}</a>
+      </h3>
+      @if (type() === "vacancies" && vacancy().project; as project) {
+        <a class="vacancy__project" [routerLink]="AppRoutes.projects.detail(project.id)">
+          <app-avatar
+            class="vacancy__project-avatar"
+            [url]="project.imageAddress"
+            [size]="40"
+          ></app-avatar>
+          <div class="vacancy__project-info">
+            <span class="vacancy__project-label">Проект</span>
+            <span class="vacancy__project-name" [title]="project.name">{{ project.name }}</span>
+          </div>
+        </a>
+      }
+      @if (vacancy().specialization) {
+        <p class="vacancy__specialization" [title]="vacancy().specialization">
+          Ищем: {{ vacancy().specialization }}
+        </p>
+      }
+    </header>
+    <p class="vacancy__salary">
+      {{
+        !vacancy().salary || +vacancy().salary === 0 ? "По договоренности" : vacancy().salary + " ₽"
+      }}
+    </p>
+    <app-vacancy-skills [skills]="vacancy().requiredSkills || []" [limit]="3"></app-vacancy-skills>
+    <div class="vacancy__description">
+      @if (vacancy().description) {
+        <p [innerHTML]="vacancy().description | parseLinks | parseBreaks"></p>
+      } @else {
+        <p class="vacancy__empty">Описание пока не добавлено</p>
       }
     </div>
-    <h3 class="vacancy__role" [title]="vacancy().role">
-      <a [routerLink]="AppRoutes.office.vacancy(vacancy().id)">{{ vacancy().role }}</a>
-    </h3>
-    @if (type() === "vacancies" && vacancy().project; as project) {
-      <a class="vacancy__project" [routerLink]="AppRoutes.projects.detail(project.id)">
-        <app-avatar
-          class="vacancy__project-avatar"
-          [url]="project.imageAddress"
-          [size]="40"
-        ></app-avatar>
-        <div class="vacancy__project-info">
-          <span class="vacancy__project-label">Проект</span>
-          <span class="vacancy__project-name" [title]="project.name">{{ project.name }}</span>
-        </div>
-      </a>
-    }
-    @if (vacancy().specialization) {
-      <p class="vacancy__specialization" [title]="vacancy().specialization">
-        Ищем: {{ vacancy().specialization }}
-      </p>
-    }
-  </header>
-  <p class="vacancy__salary">
-    {{
-      !vacancy().salary || +vacancy().salary === 0 ? "По договоренности" : vacancy().salary + " ₽"
-    }}
-  </p>
-  <app-vacancy-skills [skills]="vacancy().requiredSkills || []" [limit]="3"></app-vacancy-skills>
-  <div class="vacancy__description">
-    @if (vacancy().description) {
-      <p [innerHTML]="vacancy().description | parseLinks | parseBreaks"></p>
-    } @else {
-      <p class="vacancy__empty">Описание пока не добавлено</p>
-    }
-  </div>
-  <div class="vacancy__actions">
-    <app-button
-      class="vacancy__secondary-action"
-      [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
-      appearance="outline"
-      size="big"
-      >подробнее</app-button
-    >
-    @if (vacancy().canManageResponses) {
+    <div class="vacancy__actions">
       <app-button
-        class="vacancy__primary-action"
+        class="vacancy__secondary-action"
         [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
-        [queryParams]="{ manageResponses: true }"
+        appearance="outline"
         size="big"
-        >посмотреть отклики</app-button
+        >подробнее</app-button
       >
-    } @else if (vacancy().canRespond && !vacancy().hasResponded) {
+      @if (vacancy().canManageResponses) {
+        <app-button
+          class="vacancy__primary-action"
+          [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
+          [queryParams]="{ manageResponses: true }"
+          size="big"
+          >посмотреть отклики</app-button
+        >
+      } @else if (vacancy().canRespond && !vacancy().hasResponded) {
+        <app-button
+          class="vacancy__response-action"
+          [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
+          [queryParams]="{ sendResponse: true }"
+          size="big"
+          >откликнуться</app-button
+        >
+      }
+    </div>
+  </article>
+} @else {
+  <article appCard class="vacancy">
+    <header class="vacancy__header">
+      <div class="vacancy__meta">
+        <app-vacancy-status
+          [label]="vacancy().isActive ? 'Активна' : 'Закрыта'"
+          [tone]="vacancy().isActive ? 'success' : 'neutral'"
+        ></app-vacancy-status>
+        @if (vacancy().datetimeCreated) {
+          <time class="vacancy__date" [attr.datetime]="vacancy().datetimeCreated">{{
+            vacancy().datetimeCreated | dayjs: "format" : "DD.MM.YYYY"
+          }}</time>
+        }
+      </div>
+      <h3 class="vacancy__role" [title]="vacancy().role">
+        <a [routerLink]="AppRoutes.office.vacancy(vacancy().id)">{{ vacancy().role }}</a>
+      </h3>
+      @if (type() === "vacancies" && vacancy().project; as project) {
+        <a class="vacancy__project" [routerLink]="AppRoutes.projects.detail(project.id)">
+          <app-avatar
+            class="vacancy__project-avatar"
+            [url]="project.imageAddress"
+            [size]="40"
+          ></app-avatar>
+          <div class="vacancy__project-info">
+            <span class="vacancy__project-label">Проект</span>
+            <span class="vacancy__project-name" [title]="project.name">{{ project.name }}</span>
+          </div>
+        </a>
+      }
+      @if (vacancy().specialization) {
+        <p class="vacancy__specialization" [title]="vacancy().specialization">
+          Ищем: {{ vacancy().specialization }}
+        </p>
+      }
+    </header>
+    <p class="vacancy__salary">
+      {{
+        !vacancy().salary || +vacancy().salary === 0 ? "По договоренности" : vacancy().salary + " ₽"
+      }}
+    </p>
+    <app-vacancy-skills [skills]="vacancy().requiredSkills || []" [limit]="3"></app-vacancy-skills>
+    <div class="vacancy__description">
+      @if (vacancy().description) {
+        <p [innerHTML]="vacancy().description | parseLinks | parseBreaks"></p>
+      } @else {
+        <p class="vacancy__empty">Описание пока не добавлено</p>
+      }
+    </div>
+    <div class="vacancy__actions">
       <app-button
-        class="vacancy__response-action"
+        class="vacancy__secondary-action"
         [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
-        [queryParams]="{ sendResponse: true }"
+        appearance="outline"
         size="big"
-        >откликнуться</app-button
+        >подробнее</app-button
       >
-    }
-  </div>
-</article>
+      @if (vacancy().canManageResponses) {
+        <app-button
+          class="vacancy__primary-action"
+          [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
+          [queryParams]="{ manageResponses: true }"
+          size="big"
+          >посмотреть отклики</app-button
+        >
+      } @else if (vacancy().canRespond && !vacancy().hasResponded) {
+        <app-button
+          class="vacancy__response-action"
+          [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
+          [queryParams]="{ sendResponse: true }"
+          size="big"
+          >откликнуться</app-button
+        >
+      }
+    </div>
+  </article>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
index ca5b569eb..13b89b9e0 100644
--- a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
@@ -1,6 +1,6 @@
 /** @format */
-
 @use "styles/components/vacancy-ui";
+@use "styles/ui-foundation";
 
 :host {
   display: flex;
@@ -139,3 +139,35 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .vacancy {
+    @include ui-foundation.card;
+
+    &__date,
+    &__project-label {
+      font-size: var(--ui-font-small);
+    }
+
+    &__role {
+      font-size: var(--ui-font-h3);
+    }
+
+    &__project-name {
+      font-size: var(--ui-font-body);
+    }
+
+    &__specialization {
+      font-size: var(--ui-font-small);
+    }
+
+    &__salary {
+      font-size: var(--ui-font-body);
+    }
+
+    &__description {
+      font-size: var(--ui-font-body);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.ts b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.ts
index f6c03d55b..83e4ad896 100644
--- a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { CardDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, input } from "@angular/core";
 import { RouterLink } from "@angular/router";
 import { Vacancy } from "@domain/vacancy/vacancy.model";
@@ -12,6 +17,7 @@ import { VacancySkillsComponent } from "../vacancy-skills/vacancy-skills.compone
 @Component({
   selector: "app-project-vacancy-card",
   imports: [
+    CardDirective,
     RouterLink,
     ButtonComponent,
     ParseLinksPipe,
@@ -26,6 +32,8 @@ import { VacancySkillsComponent } from "../vacancy-skills/vacancy-skills.compone
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectVacancyCardComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   protected readonly AppRoutes = AppRoutes;
   readonly vacancy = input.required<Vacancy>();
   readonly type = input<"vacancies" | "project">("project");
diff --git a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.html b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.html
index ec8ab7791..6b3230427 100644
--- a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.html
+++ b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.html
@@ -1,14 +1,80 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="filter">
+    <div class="filter__body">
+      <div class="filter__titles">
+        <p class="text-body-14">фильтры</p>
+        <a class="text-body-10" (click)="clearFilters()">сбросить</a>
+      </div>
+
+      <!-- Скрыть пока не появится программа для мос политеха -->
+      <!-- <div class="filter__block">
+      <div class="filter__switch--one">
+        <app-switch
+          [checked]="isMospolytech"
+          (checkedChange)="onFilterMospolytech($event)"
+        ></app-switch>
+        <span class="filter__yes-no text-body-14" [class.filter__yes-no--active]="isMospolytech"
+          >Проект ПД.МосПолитеха
+        </span>
+      </div>
+    </div> -->
 
-<div class="filter">
-  <div class="filter__body">
-    <div class="filter__titles">
-      <p class="text-body-14">фильтры</p>
-      <a class="text-body-10" (click)="clearFilters()">сбросить</a>
+      <!-- <div class="filter__block">
+      <h4 class="text-body-12 filter__name">Проекты</h4>
+      @for (tag of filterTags; track tag.id) {
+      <div class="text-body-14 filter__checkbox" (click)="onFilterProjectType($event, tag.id)">
+        <app-checkbox [checked]="tag.id === currentFilterTag"></app-checkbox>
+        {{ tag.label }}
+      </div>
+      }
+    </div> -->
+      <!-- <div class="filter__block">
+      <h4 class="text-body-12 filter__name">Участники (кол-во)</h4>
+      <app-num-slider
+        [appNums]="membersCountOptions"
+        [appValue]="currentMembersCount"
+        (appValueChange)="onFilterByMembersCount($event)"
+      ></app-num-slider>
+    </div> -->
+      <!-- <div class="filter__block">
+      <div class="text-body-12 filter__name">Наличие вакансий</div>
+      <div class="filter__switch">
+        <span class="filter__yes-no text-body-14" [class.filter__yes-no--active]="!hasVacancies"
+          >Нет</span
+        >
+        <app-switch
+          [checked]="hasVacancies"
+          (checkedChange)="onFilterVacancies($event)"
+        ></app-switch>
+        <span class="filter__yes-no text-body-14" [class.filter__yes-no--active]="hasVacancies"
+          >Да</span
+        >
+      </div>
+    </div> -->
+      <div class="filter__block">
+        <div class="text-body-10 filter__select">
+          <app-select
+            [formControl]="industryControl"
+            size="big"
+            [options]="industries()"
+            placeholder="сфера проекта"
+          ></app-select>
+        </div>
+      </div>
     </div>
+  </div>
+} @else {
+  <div appFilters class="filter">
+    <div class="filter__body">
+      <div class="filter__titles ui-filters__header">
+        <p class="text-body-14">фильтры</p>
+        <button appButton="text" type="button" (click)="clearFilters()">сбросить</button>
+      </div>
 
-    <!-- Скрыть пока не появится программа для мос политеха -->
-    <!-- <div class="filter__block">
+      <!-- Скрыть пока не появится программа для мос политеха -->
+      <!-- <div class="filter__block">
       <div class="filter__switch--one">
         <app-switch
           [checked]="isMospolytech"
@@ -20,7 +86,7 @@
       </div>
     </div> -->
 
-    <!-- <div class="filter__block">
+      <!-- <div class="filter__block">
       <h4 class="text-body-12 filter__name">Проекты</h4>
       @for (tag of filterTags; track tag.id) {
       <div class="text-body-14 filter__checkbox" (click)="onFilterProjectType($event, tag.id)">
@@ -29,7 +95,7 @@ <h4 class="text-body-12 filter__name">Проекты</h4>
       </div>
       }
     </div> -->
-    <!-- <div class="filter__block">
+      <!-- <div class="filter__block">
       <h4 class="text-body-12 filter__name">Участники (кол-во)</h4>
       <app-num-slider
         [appNums]="membersCountOptions"
@@ -37,7 +103,7 @@ <h4 class="text-body-12 filter__name">Участники (кол-во)</h4>
         (appValueChange)="onFilterByMembersCount($event)"
       ></app-num-slider>
     </div> -->
-    <!-- <div class="filter__block">
+      <!-- <div class="filter__block">
       <div class="text-body-12 filter__name">Наличие вакансий</div>
       <div class="filter__switch">
         <span class="filter__yes-no text-body-14" [class.filter__yes-no--active]="!hasVacancies"
@@ -52,15 +118,16 @@ <h4 class="text-body-12 filter__name">Участники (кол-во)</h4>
         >
       </div>
     </div> -->
-    <div class="filter__block">
-      <div class="text-body-10 filter__select">
-        <app-select
-          [formControl]="industryControl"
-          size="big"
-          [options]="industries()"
-          placeholder="сфера проекта"
-        ></app-select>
+      <div class="filter__block">
+        <div class="text-body-10 filter__select">
+          <app-select
+            [formControl]="industryControl"
+            size="big"
+            [options]="industries()"
+            placeholder="сфера проекта"
+          ></app-select>
+        </div>
       </div>
     </div>
   </div>
-</div>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss
index 3f54ff98b..8ae76b092 100644
--- a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/typography";
 @use "styles/responsive";
 
@@ -106,3 +105,5 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.ts b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.ts
index 1339e11ad..c743c2b5f 100644
--- a/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/projects-filter/projects-filter.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, FiltersDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { SelectComponent } from "@ui/primitives";
 import { ReactiveFormsModule } from "@angular/forms";
@@ -11,11 +16,13 @@ import { ProjectsFilterInfoService } from "./service/projects-filter-info.servic
   selector: "app-projects-filter",
   templateUrl: "./projects-filter.component.html",
   styleUrl: "./projects-filter.component.scss",
-  imports: [SelectComponent, ReactiveFormsModule],
+  imports: [ButtonDirective, FiltersDirective, SelectComponent, ReactiveFormsModule],
   providers: [ProjectsFilterInfoService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectsFilterComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly projectsFilterInfoService = inject(ProjectsFilterInfoService);
 
   // Константы для фильтрации по типу проекта
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.html b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.html
index b23f34764..785afb9ac 100644
--- a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.html
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.html
@@ -1,66 +1,137 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="region-select" (focusout)="onFocusOut($event)">
+    <div
+      class="region-select__control"
+      [class.region-select__control--error]="error()"
+      [class.region-select__control--clearable]="query()"
+    >
+      <input
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        aria-autocomplete="list"
+        [attr.aria-label]="ariaLabel()"
+        [id]="id()"
+        [value]="query()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="id() + '-options'"
+        [attr.aria-activedescendant]="
+          open() && options().length ? id() + '-option-' + activeIndex() : null
+        "
+        (focus)="onFocus()"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+      />
+      @if (error()) {
+        <i class="region-select__error" appIcon icon="error" appSquare="20" aria-hidden="true"></i>
+      }
+      @if (query()) {
+        <button
+          type="button"
+          class="region-select__clear"
+          aria-label="Очистить регион"
+          (click)="clear($event)"
+        >
+          <i appIcon icon="cross" appSquare="14"></i>
+        </button>
+      }
+    </div>
 
-<div class="region-select" (focusout)="onFocusOut($event)">
-  <div
-    class="region-select__control"
-    [class.region-select__control--error]="error()"
-    [class.region-select__control--clearable]="query()"
-  >
-    <input
-      type="text"
-      role="combobox"
-      autocomplete="off"
-      aria-autocomplete="list"
-      [attr.aria-label]="ariaLabel()"
-      [id]="id()"
-      [value]="query()"
-      [placeholder]="placeholder()"
-      [disabled]="disabled()"
-      [attr.aria-expanded]="open()"
-      [attr.aria-controls]="id() + '-options'"
-      [attr.aria-activedescendant]="
-        open() && options().length ? id() + '-option-' + activeIndex() : null
-      "
-      (focus)="onFocus()"
-      (input)="onInput($event)"
-      (keydown)="onKeydown($event)"
-    />
-    @if (error()) {
-      <i class="region-select__error" appIcon icon="error" appSquare="20" aria-hidden="true"></i>
+    @if (legacyValue(); as legacy) {
+      <p class="region-select__legacy text-body-10">
+        Текущее значение: <strong>{{ legacy }}</strong
+        >. Выберите корректный регион из списка.
+      </p>
     }
-    @if (query()) {
-      <button
-        type="button"
-        class="region-select__clear"
-        aria-label="Очистить регион"
-        (click)="clear($event)"
-      >
-        <i appIcon icon="cross" appSquare="14"></i>
-      </button>
+
+    @if (open()) {
+      <ul class="region-select__options" [id]="id() + '-options'" role="listbox">
+        @for (option of options(); track option; let index = $index) {
+          <li
+            role="option"
+            [id]="id() + '-option-' + index"
+            [attr.aria-selected]="selectedValue() === option"
+            [class.region-select__option--active]="activeIndex() === index"
+          >
+            <button type="button" (click)="selectRegion(option)">{{ option }}</button>
+          </li>
+        } @empty {
+          <li class="region-select__empty text-body-12">Ничего не найдено</li>
+        }
+      </ul>
     }
   </div>
-
-  @if (legacyValue(); as legacy) {
-    <p class="region-select__legacy text-body-10">
-      Текущее значение: <strong>{{ legacy }}</strong
-      >. Выберите корректный регион из списка.
-    </p>
-  }
-
-  @if (open()) {
-    <ul class="region-select__options" [id]="id() + '-options'" role="listbox">
-      @for (option of options(); track option; let index = $index) {
-        <li
-          role="option"
-          [id]="id() + '-option-' + index"
-          [attr.aria-selected]="selectedValue() === option"
-          [class.region-select__option--active]="activeIndex() === index"
+} @else {
+  <div class="region-select" (focusout)="onFocusOut($event)">
+    <div
+      class="region-select__control"
+      [class.region-select__control--error]="error()"
+      [class.region-select__control--clearable]="query()"
+    >
+      <input
+        appField
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        aria-autocomplete="list"
+        [attr.aria-label]="ariaLabel()"
+        [id]="id()"
+        [value]="query()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="id() + '-options'"
+        [attr.aria-activedescendant]="
+          open() && options().length ? id() + '-option-' + activeIndex() : null
+        "
+        (focus)="onFocus()"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+      />
+      @if (error()) {
+        <i class="region-select__error" appIcon icon="error" appSquare="20" aria-hidden="true"></i>
+      }
+      @if (query()) {
+        <button
+          appButton="icon"
+          type="button"
+          class="region-select__clear"
+          aria-label="Очистить регион"
+          (click)="clear($event)"
         >
-          <button type="button" (click)="selectRegion(option)">{{ option }}</button>
-        </li>
-      } @empty {
-        <li class="region-select__empty text-body-12">Ничего не найдено</li>
+          <i appIcon icon="cross" appSquare="14"></i>
+        </button>
       }
-    </ul>
-  }
-</div>
+    </div>
+
+    @if (legacyValue(); as legacy) {
+      <p class="region-select__legacy text-body-10">
+        Текущее значение: <strong>{{ legacy }}</strong
+        >. Выберите корректный регион из списка.
+      </p>
+    }
+
+    @if (open()) {
+      <ul class="region-select__options" [id]="id() + '-options'" role="listbox">
+        @for (option of options(); track option; let index = $index) {
+          <li
+            role="option"
+            [id]="id() + '-option-' + index"
+            [attr.aria-selected]="selectedValue() === option"
+            [class.region-select__option--active]="activeIndex() === index"
+          >
+            <button appButton="secondary" type="button" (click)="selectRegion(option)">
+              {{ option }}
+            </button>
+          </li>
+        } @empty {
+          <li class="region-select__empty text-body-12">Ничего не найдено</li>
+        }
+      </ul>
+    }
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
index 8b0674dc4..0bf7870cb 100644
--- a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
@@ -119,3 +119,42 @@
     text-align: center;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .region-select {
+    &__control {
+      input {
+        font-size: var(--ui-font-small);
+
+        &:focus {
+          box-shadow: var(--ui-focus-ring);
+        }
+      }
+    }
+
+    &__clear {
+      right: var(--ui-space-xs);
+    }
+
+    &__options {
+      button {
+        font-size: var(--ui-font-small);
+      }
+    }
+  }
+
+  .region-select__control input,
+  .region-select__options button {
+    min-height: 44px;
+    font-size: var(--ui-font-body);
+    line-height: 1.4;
+  }
+
+  @media screen and (max-width: 749px) {
+    .region-select__control input,
+    .region-select__options button {
+      font-size: 16px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts
index 6b4829785..6796dc363 100644
--- a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, FieldDirective } from "@uilib";
+
 import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
@@ -18,7 +23,7 @@ import { IconComponent } from "@ui/primitives/icon/icon.component";
 
 @Component({
   selector: "app-region-select",
-  imports: [CommonModule, IconComponent],
+  imports: [ButtonDirective, FieldDirective, CommonModule, IconComponent],
   templateUrl: "./region-select.component.html",
   styleUrl: "./region-select.component.scss",
   providers: [
@@ -31,6 +36,8 @@ import { IconComponent } from "@ui/primitives/icon/icon.component";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RegionSelectComponent implements ControlValueAccessor {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly id = input("region");
   readonly placeholder = input("Выберите регион");
   readonly ariaLabel = input("Регион проекта");
diff --git a/projects/social_platform/src/app/ui/widgets/skills-basket/skills-basket.component.html b/projects/social_platform/src/app/ui/widgets/skills-basket/skills-basket.component.html
index 3e79b5d50..07f6a0e95 100644
--- a/projects/social_platform/src/app/ui/widgets/skills-basket/skills-basket.component.html
+++ b/projects/social_platform/src/app/ui/widgets/skills-basket/skills-basket.component.html
@@ -1,39 +1,80 @@
 <!-- @format -->
-
-<div class="basket" [class.basket--error]="error()">
-  <div class="basket__content" [class.basket__content--empty]="!value().length">
-    @for (skill of value(); track skill.id) {
-      <div
-        class="basket__skill"
-        [class.basket__skill--soft]="skill.category.name.includes('Soft skills')"
-      >
-        <span class="basket__skill-name text-body-12">{{ skill.name }}</span>
-        <button
-          type="button"
-          class="basket__skill-delete"
-          [attr.aria-label]="'Удалить навык ' + skill.name"
-          [disabled]="disabled()"
-          (click)="deleteSkill(skill.id)"
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="basket" [class.basket--error]="error()">
+    <div class="basket__content" [class.basket__content--empty]="!value().length">
+      @for (skill of value(); track skill.id) {
+        <div
+          class="basket__skill"
+          [class.basket__skill--soft]="skill.category.name.includes('Soft skills')"
         >
-          <i
-            appIcon
-            class="basket__skill-delete-icon"
-            icon="basket"
-            appSquare="14"
-            aria-hidden="true"
-          ></i>
-        </button>
-      </div>
-    } @empty {
-      <div class="basket__empty-placeholder">
-        <img
-          src="/assets/images/office/onboarding/laptop-guy.svg"
-          alt=""
-          loading="lazy"
-          decoding="async"
-        />
-        <span class="text-body-14">Выберите навыки</span>
-      </div>
-    }
+          <span class="basket__skill-name text-body-12">{{ skill.name }}</span>
+          <button
+            type="button"
+            class="basket__skill-delete"
+            [attr.aria-label]="'Удалить навык ' + skill.name"
+            [disabled]="disabled()"
+            (click)="deleteSkill(skill.id)"
+          >
+            <i
+              appIcon
+              class="basket__skill-delete-icon"
+              icon="basket"
+              appSquare="14"
+              aria-hidden="true"
+            ></i>
+          </button>
+        </div>
+      } @empty {
+        <div class="basket__empty-placeholder">
+          <img
+            src="/assets/images/office/onboarding/laptop-guy.svg"
+            alt=""
+            loading="lazy"
+            decoding="async"
+          />
+          <span class="text-body-14">Выберите навыки</span>
+        </div>
+      }
+    </div>
   </div>
-</div>
+} @else {
+  <div class="basket" [class.basket--error]="error()">
+    <div class="basket__content" [class.basket__content--empty]="!value().length">
+      @for (skill of value(); track skill.id) {
+        <div
+          class="basket__skill"
+          [class.basket__skill--soft]="skill.category.name.includes('Soft skills')"
+        >
+          <span class="basket__skill-name text-body-12">{{ skill.name }}</span>
+          <button
+            appButton="danger"
+            type="button"
+            class="basket__skill-delete"
+            [attr.aria-label]="'Удалить навык ' + skill.name"
+            [disabled]="disabled()"
+            (click)="deleteSkill(skill.id)"
+          >
+            <i
+              appIcon
+              class="basket__skill-delete-icon"
+              icon="basket"
+              appSquare="14"
+              aria-hidden="true"
+            ></i>
+          </button>
+        </div>
+      } @empty {
+        <div class="basket__empty-placeholder">
+          <img
+            src="/assets/images/office/onboarding/laptop-guy.svg"
+            alt=""
+            loading="lazy"
+            decoding="async"
+          />
+          <span class="text-body-14">Выберите навыки</span>
+        </div>
+      }
+    </div>
+  </div>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/skills-basket/skills-basket.component.ts b/projects/social_platform/src/app/ui/widgets/skills-basket/skills-basket.component.ts
index d72b854d2..a02adc7c2 100644
--- a/projects/social_platform/src/app/ui/widgets/skills-basket/skills-basket.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/skills-basket/skills-basket.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective } from "@uilib";
+
 import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component, forwardRef, input, signal } from "@angular/core";
 import { IconComponent } from "@ui/primitives";
@@ -12,7 +17,7 @@ import { Skill } from "@domain/skills/skill.model";
   selector: "app-skills-basket",
   templateUrl: "./skills-basket.component.html",
   styleUrl: "./skills-basket.component.scss",
-  imports: [CommonModule, IconComponent],
+  imports: [ButtonDirective, CommonModule, IconComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     {
@@ -24,6 +29,8 @@ import { Skill } from "@domain/skills/skill.model";
   ],
 })
 export class SkillsBasketComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly error = input<boolean>(false);
 
   value = signal<Skill[]>([]);
diff --git a/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.scss b/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.scss
index 5f39de438..ca89207d8 100644
--- a/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.scss
@@ -1,3 +1,5 @@
+/** @format */
+
 :host {
   display: flex;
   flex-direction: column;
@@ -132,3 +134,17 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :host {
+    .heading {
+      &__top {
+        &:hover,
+        &--selected {
+          background-color: var(--ui-accent-tint-subtle);
+        }
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.scss b/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.scss
index 1bf7d9929..abebd2878 100644
--- a/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.scss
@@ -1,3 +1,5 @@
+/** @format */
+
 :host {
   display: flex;
   flex-direction: column;
@@ -124,3 +126,28 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :host {
+    .heading {
+      &__top {
+        &:hover {
+          background-color: var(--ui-accent-tint-subtle);
+        }
+      }
+    }
+
+    .content {
+      &__option {
+        &:hover {
+          background-color: var(--ui-accent-tint-subtle);
+        }
+
+        &--selected {
+          background-color: var(--ui-accent-tint-hover);
+        }
+      }
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.html b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.html
index 3fae4101d..ad77a2433 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.html
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.html
@@ -1,31 +1,73 @@
 <!-- @format -->
-
-@if (vacancy(); as item) {
-  <article class="vacancy">
-    <header class="vacancy__header">
-      <h3 class="vacancy__role">{{ item.role }}</h3>
-      <app-vacancy-status
-        [label]="item.isActive ? 'Активна' : 'Закрыта'"
-        [tone]="item.isActive ? 'success' : 'neutral'"
-      ></app-vacancy-status>
-    </header>
-    @if (item.specialization) {
-      <p class="vacancy__specialization">Ищем: {{ item.specialization }}</p>
-    }
-    <app-vacancy-skills [skills]="item.requiredSkills || []" [limit]="3"></app-vacancy-skills>
-    <div class="vacancy__actions">
-      <app-button size="big" appearance="outline" [disabled]="disabled()" (click)="onEdit($event)">
-        <i appIcon icon="edit-pen" appSquare="12" aria-hidden="true"></i>Редактировать
-      </app-button>
-      <app-button
-        size="big"
-        appearance="outline"
-        color="red"
-        [disabled]="disabled()"
-        (click)="onRemove($event)"
-      >
-        <i appIcon icon="basket" appSquare="12" aria-hidden="true"></i>Удалить
-      </app-button>
-    </div>
-  </article>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  @if (vacancy(); as item) {
+    <article class="vacancy">
+      <header class="vacancy__header">
+        <h3 class="vacancy__role">{{ item.role }}</h3>
+        <app-vacancy-status
+          [label]="item.isActive ? 'Активна' : 'Закрыта'"
+          [tone]="item.isActive ? 'success' : 'neutral'"
+        ></app-vacancy-status>
+      </header>
+      @if (item.specialization) {
+        <p class="vacancy__specialization">Ищем: {{ item.specialization }}</p>
+      }
+      <app-vacancy-skills [skills]="item.requiredSkills || []" [limit]="3"></app-vacancy-skills>
+      <div class="vacancy__actions">
+        <app-button
+          size="big"
+          appearance="outline"
+          [disabled]="disabled()"
+          (click)="onEdit($event)"
+        >
+          <i appIcon icon="edit-pen" appSquare="12" aria-hidden="true"></i>Редактировать
+        </app-button>
+        <app-button
+          size="big"
+          appearance="outline"
+          color="red"
+          [disabled]="disabled()"
+          (click)="onRemove($event)"
+        >
+          <i appIcon icon="basket" appSquare="12" aria-hidden="true"></i>Удалить
+        </app-button>
+      </div>
+    </article>
+  }
+} @else {
+  @if (vacancy(); as item) {
+    <article appCard class="vacancy">
+      <header class="vacancy__header">
+        <h3 class="vacancy__role">{{ item.role }}</h3>
+        <app-vacancy-status
+          [label]="item.isActive ? 'Активна' : 'Закрыта'"
+          [tone]="item.isActive ? 'success' : 'neutral'"
+        ></app-vacancy-status>
+      </header>
+      @if (item.specialization) {
+        <p class="vacancy__specialization">Ищем: {{ item.specialization }}</p>
+      }
+      <app-vacancy-skills [skills]="item.requiredSkills || []" [limit]="3"></app-vacancy-skills>
+      <div class="vacancy__actions">
+        <app-button
+          size="big"
+          appearance="outline"
+          [disabled]="disabled()"
+          (click)="onEdit($event)"
+        >
+          <i appIcon icon="edit-pen" appSquare="12" aria-hidden="true"></i>Редактировать
+        </app-button>
+        <app-button
+          size="big"
+          appearance="outline"
+          color="red"
+          [disabled]="disabled()"
+          (click)="onRemove($event)"
+        >
+          <i appIcon icon="basket" appSquare="12" aria-hidden="true"></i>Удалить
+        </app-button>
+      </div>
+    </article>
+  }
 }
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
index d5eaa4a91..e78d83708 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
@@ -1,6 +1,6 @@
 /** @format */
-
 @use "styles/components/vacancy-ui";
+@use "styles/ui-foundation";
 
 :host {
   display: block;
@@ -58,3 +58,18 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .vacancy {
+    @include ui-foundation.card;
+
+    &__role {
+      font-size: var(--ui-font-h3);
+    }
+
+    &__specialization {
+      font-size: var(--ui-font-small);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.ts b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.ts
index cc4243693..3e089bfb1 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { CardDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
 import { Vacancy } from "@domain/vacancy/vacancy.model";
 import { IconComponent, ButtonComponent } from "@ui/primitives";
@@ -10,10 +15,18 @@ import { VacancySkillsComponent } from "../vacancy-skills/vacancy-skills.compone
   selector: "app-vacancy-card",
   templateUrl: "./vacancy-card.component.html",
   styleUrl: "./vacancy-card.component.scss",
-  imports: [IconComponent, ButtonComponent, VacancyStatusComponent, VacancySkillsComponent],
+  imports: [
+    CardDirective,
+    IconComponent,
+    ButtonComponent,
+    VacancyStatusComponent,
+    VacancySkillsComponent,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VacancyCardComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly vacancy = input<Vacancy | undefined>();
   readonly disabled = input(false);
   readonly remove = output<number>();
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.html b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.html
index 1151834a6..ce5dfc7fa 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.html
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.html
@@ -1,34 +1,70 @@
 <!-- @format -->
-
-<app-modal
-  [open]="true"
-  labelledBy="vacancy-created-title"
-  describedBy="vacancy-created-description"
-  bodyClass="vacancy-created-modal"
-  (openChange)="closed.emit()"
->
-  <section class="created">
-    <button
-      type="button"
-      class="created__close"
-      aria-label="Закрыть подтверждение"
-      (click)="closed.emit()"
-    >
-      <i appIcon icon="cross" appSquare="12" aria-hidden="true"></i>
-    </button>
-    <h2 id="vacancy-created-title" class="created__title" tabindex="-1" cdkFocusInitial>
-      Вакансия создана
-    </h2>
-    <p id="vacancy-created-description">
-      Теперь управлять вакансией и работать с откликами можно во вкладке «Вакансии».
-    </p>
-    <div class="created__actions">
-      <app-button size="big" [routerLink]="AppRoutes.office.vacancy(vacancyId())"
-        >Перейти к вакансиям</app-button
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <app-modal
+    [open]="true"
+    labelledBy="vacancy-created-title"
+    describedBy="vacancy-created-description"
+    bodyClass="vacancy-created-modal"
+    (openChange)="closed.emit()"
+  >
+    <section class="created">
+      <button
+        type="button"
+        class="created__close"
+        aria-label="Закрыть подтверждение"
+        (click)="closed.emit()"
       >
-      <app-button size="big" appearance="outline" (click)="closed.emit()"
-        >Остаться в проекте</app-button
+        <i appIcon icon="cross" appSquare="12" aria-hidden="true"></i>
+      </button>
+      <h2 id="vacancy-created-title" class="created__title" tabindex="-1" cdkFocusInitial>
+        Вакансия создана
+      </h2>
+      <p id="vacancy-created-description">
+        Теперь управлять вакансией и работать с откликами можно во вкладке «Вакансии».
+      </p>
+      <div class="created__actions">
+        <app-button size="big" [routerLink]="AppRoutes.office.vacancy(vacancyId())"
+          >Перейти к вакансиям</app-button
+        >
+        <app-button size="big" appearance="outline" (click)="closed.emit()"
+          >Остаться в проекте</app-button
+        >
+      </div>
+    </section>
+  </app-modal>
+} @else {
+  <app-modal
+    [open]="true"
+    labelledBy="vacancy-created-title"
+    describedBy="vacancy-created-description"
+    bodyClass="vacancy-created-modal"
+    (openChange)="closed.emit()"
+  >
+    <section class="created">
+      <button
+        appButton="icon"
+        type="button"
+        class="created__close"
+        aria-label="Закрыть подтверждение"
+        (click)="closed.emit()"
       >
-    </div>
-  </section>
-</app-modal>
+        <i appIcon icon="cross" appSquare="12" aria-hidden="true"></i>
+      </button>
+      <h2 id="vacancy-created-title" class="created__title" tabindex="-1" cdkFocusInitial>
+        Вакансия создана
+      </h2>
+      <p id="vacancy-created-description">
+        Теперь управлять вакансией и работать с откликами можно во вкладке «Вакансии».
+      </p>
+      <div class="created__actions">
+        <app-button size="big" [routerLink]="AppRoutes.office.vacancy(vacancyId())"
+          >Перейти к вакансиям</app-button
+        >
+        <app-button size="big" appearance="outline" (click)="closed.emit()"
+          >Остаться в проекте</app-button
+        >
+      </div>
+    </section>
+  </app-modal>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss
index d51b47612..e6a21c6e9 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/components/vacancy-ui";
 
 ::ng-deep .modal__body.vacancy-created-modal {
@@ -61,3 +60,14 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .created {
+    font-size: var(--ui-font-body);
+
+    &__title {
+      font-size: var(--ui-font-h2);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.ts b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.ts
index 0f6d53763..0d2bda674 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-created-dialog/vacancy-created-dialog.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective } from "@uilib";
+
 import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
 import { RouterLink } from "@angular/router";
 import { AppRoutes } from "@api/paths/app-routes";
@@ -7,12 +12,14 @@ import { ButtonComponent, IconComponent } from "@ui/primitives";
 import { ModalComponent } from "@ui/primitives/modal/modal.component";
 @Component({
   selector: "app-vacancy-created-dialog",
-  imports: [RouterLink, ButtonComponent, IconComponent, ModalComponent],
+  imports: [ButtonDirective, RouterLink, ButtonComponent, IconComponent, ModalComponent],
   templateUrl: "./vacancy-created-dialog.component.html",
   styleUrl: "./vacancy-created-dialog.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VacancyCreatedDialogComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   readonly vacancyId = input.required<number>();
   readonly closed = output<void>();
   protected readonly AppRoutes = AppRoutes;
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.html b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.html
index e277204c9..7cebbfe0e 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.html
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.html
@@ -1,99 +1,199 @@
 <!-- @format -->
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="desktop">
+    <div class="desktop__header">
+      <p class="text-body-14">фильтры</p>
+      <a class="text-body-10" (click)="resetFilter()">сбросить</a>
+    </div>
+
+    <a [routerLink]="AppRoutes.office.vacanciesMy()">
+      <app-button size="medium" customTypographyClass="text-body-12">мои отклики</app-button>
+    </a>
 
-<div class="desktop">
-  <div class="desktop__header">
-    <p class="text-body-14">фильтры</p>
-    <a class="text-body-10" (click)="resetFilter()">сбросить</a>
+    <ng-container *ngTemplateOutlet="filter"></ng-container>
   </div>
 
-  <a [routerLink]="AppRoutes.office.vacanciesMy()">
-    <app-button size="medium" customTypographyClass="text-body-12">мои отклики</app-button>
-  </a>
+  <div class="mobile">
+    <div class="select" (clickOutside)="onClickOutside()">
+      <div
+        class="select__input"
+        [class.select__input--open]="filterOpen()"
+        (click)="filterOpen.set(!filterOpen())"
+      >
+        фильтры
+      </div>
+      <i
+        appIcon
+        icon="arrow-no-body"
+        appSquare="15"
+        class="select__dropdown-icon"
+        (click)="filterOpen.set(!filterOpen())"
+      ></i>
+      @if (filterOpen()) {
+        <div class="select__dropdown" @dropdownAnimation>
+          <ng-container *ngTemplateOutlet="filter"></ng-container>
+          <a class="text-body-12" (click)="resetFilter()">сбросить</a>
+        </div>
+      }
+    </div>
+    <a [routerLink]="AppRoutes.office.vacanciesMy()">
+      <app-button size="medium" customTypographyClass="text-body-12">мои отклики</app-button>
+    </a>
+  </div>
 
-  <ng-container *ngTemplateOutlet="filter"></ng-container>
-</div>
+  <ng-template #filter>
+    <div class="filter">
+      <div class="filter__experience">
+        <span class="text-body-12">опыт</span>
+        <ul>
+          @for (option of workExperienceFilterOptions; track $index) {
+            <li
+              class="text-body-12 filter__checkbox"
+              (click)="setExperienceFilter($event, option.value)"
+            >
+              <app-checkbox [checked]="currentExperience() === option.value"></app-checkbox>
+              {{ option.label }}
+            </li>
+          }
+        </ul>
+      </div>
 
-<div class="mobile">
-  <div class="select" (clickOutside)="onClickOutside()">
-    <div
-      class="select__input"
-      [class.select__input--open]="filterOpen()"
-      (click)="filterOpen.set(!filterOpen())"
-    >
-      фильтры
-    </div>
-    <i
-      appIcon
-      icon="arrow-no-body"
-      appSquare="15"
-      class="select__dropdown-icon"
-      (click)="filterOpen.set(!filterOpen())"
-    ></i>
-    @if (filterOpen()) {
-      <div class="select__dropdown" @dropdownAnimation>
-        <ng-container *ngTemplateOutlet="filter"></ng-container>
-        <a class="text-body-12" (click)="resetFilter()">сбросить</a>
+      <div class="filter__schedule">
+        <span class="text-body-12">график</span>
+        <ul>
+          @for (option of workScheduleFilterOptions; track $index) {
+            <li
+              class="text-body-12 filter__checkbox"
+              (click)="setWorkScheduleFilter($event, option.value)"
+            >
+              <app-checkbox [checked]="currentWorkSchedule() === option.value"></app-checkbox>
+              {{ option.label }}
+            </li>
+          }
+        </ul>
       </div>
-    }
-  </div>
-  <a [routerLink]="AppRoutes.office.vacanciesMy()">
-    <app-button size="medium" customTypographyClass="text-body-12">мои отклики</app-button>
-  </a>
-</div>
 
-<ng-template #filter>
-  <div class="filter">
-    <div class="filter__experience">
-      <span class="text-body-12">опыт</span>
-      <ul>
-        @for (option of workExperienceFilterOptions; track $index) {
-          <li
-            class="text-body-12 filter__checkbox"
-            (click)="setExperienceFilter($event, option.value)"
-          >
-            <app-checkbox [checked]="currentExperience() === option.value"></app-checkbox>
-            {{ option.label }}
-          </li>
-        }
-      </ul>
-    </div>
+      <div class="filter__format">
+        <span class="text-body-12">формат работы</span>
+        <ul>
+          @for (option of workFormatFilterOptions; track $index) {
+            <li
+              class="text-body-12 filter__checkbox"
+              (click)="setWorkFormatFilter($event, option.value)"
+            >
+              <app-checkbox [checked]="currentWorkFormat() === option.value"></app-checkbox>
+              {{ option.label }}
+            </li>
+          }
+        </ul>
+      </div>
 
-    <div class="filter__schedule">
-      <span class="text-body-12">график</span>
-      <ul>
-        @for (option of workScheduleFilterOptions; track $index) {
-          <li
-            class="text-body-12 filter__checkbox"
-            (click)="setWorkScheduleFilter($event, option.value)"
-          >
-            <app-checkbox [checked]="currentWorkSchedule() === option.value"></app-checkbox>
-            {{ option.label }}
-          </li>
-        }
-      </ul>
+      <div class="filter__salary">
+        <span class="text-body-12">заработная плата</span>
+        <li class="text-body-12 filter__checkbox" style="cursor: not-allowed; opacity: 0.5">
+          <app-checkbox [checked]="currentSalary() === 'with-salary'"></app-checkbox>
+          с зарплатой
+        </li>
+      </div>
     </div>
-
-    <div class="filter__format">
-      <span class="text-body-12">формат работы</span>
-      <ul>
-        @for (option of workFormatFilterOptions; track $index) {
-          <li
-            class="text-body-12 filter__checkbox"
-            (click)="setWorkFormatFilter($event, option.value)"
-          >
-            <app-checkbox [checked]="currentWorkFormat() === option.value"></app-checkbox>
-            {{ option.label }}
-          </li>
-        }
-      </ul>
+  </ng-template>
+} @else {
+  <div appFilters class="desktop">
+    <div class="desktop__header ui-filters__header">
+      <p class="text-body-14">фильтры</p>
+      <button appButton="text" type="button" (click)="resetFilter()">сбросить</button>
     </div>
 
-    <div class="filter__salary">
-      <span class="text-body-12">заработная плата</span>
-      <li class="text-body-12 filter__checkbox" style="cursor: not-allowed; opacity: 0.5">
-        <app-checkbox [checked]="currentSalary() === 'with-salary'"></app-checkbox>
-        с зарплатой
-      </li>
+    <a [routerLink]="AppRoutes.office.vacanciesMy()">
+      <app-button size="medium" customTypographyClass="text-body-12">мои отклики</app-button>
+    </a>
+
+    <ng-container *ngTemplateOutlet="filter"></ng-container>
+  </div>
+
+  <div class="mobile">
+    <div class="select" (clickOutside)="onClickOutside()">
+      <div
+        class="select__input"
+        [class.select__input--open]="filterOpen()"
+        (click)="filterOpen.set(!filterOpen())"
+      >
+        фильтры
+      </div>
+      <i
+        appIcon
+        icon="arrow-no-body"
+        appSquare="15"
+        class="select__dropdown-icon"
+        (click)="filterOpen.set(!filterOpen())"
+      ></i>
+      @if (filterOpen()) {
+        <div class="select__dropdown" @dropdownAnimation>
+          <ng-container *ngTemplateOutlet="filter"></ng-container>
+          <button appButton="text" type="button" (click)="resetFilter()">сбросить</button>
+        </div>
+      }
     </div>
+    <a [routerLink]="AppRoutes.office.vacanciesMy()">
+      <app-button size="medium" customTypographyClass="text-body-12">мои отклики</app-button>
+    </a>
   </div>
-</ng-template>
+
+  <ng-template #filter>
+    <div class="filter">
+      <div class="filter__experience">
+        <span class="text-body-12">опыт</span>
+        <ul>
+          @for (option of workExperienceFilterOptions; track $index) {
+            <li
+              class="text-body-12 filter__checkbox"
+              (click)="setExperienceFilter($event, option.value)"
+            >
+              <app-checkbox [checked]="currentExperience() === option.value"></app-checkbox>
+              {{ option.label }}
+            </li>
+          }
+        </ul>
+      </div>
+
+      <div class="filter__schedule">
+        <span class="text-body-12">график</span>
+        <ul>
+          @for (option of workScheduleFilterOptions; track $index) {
+            <li
+              class="text-body-12 filter__checkbox"
+              (click)="setWorkScheduleFilter($event, option.value)"
+            >
+              <app-checkbox [checked]="currentWorkSchedule() === option.value"></app-checkbox>
+              {{ option.label }}
+            </li>
+          }
+        </ul>
+      </div>
+
+      <div class="filter__format">
+        <span class="text-body-12">формат работы</span>
+        <ul>
+          @for (option of workFormatFilterOptions; track $index) {
+            <li
+              class="text-body-12 filter__checkbox"
+              (click)="setWorkFormatFilter($event, option.value)"
+            >
+              <app-checkbox [checked]="currentWorkFormat() === option.value"></app-checkbox>
+              {{ option.label }}
+            </li>
+          }
+        </ul>
+      </div>
+
+      <div class="filter__salary">
+        <span class="text-body-12">заработная плата</span>
+        <li class="text-body-12 filter__checkbox" style="cursor: not-allowed; opacity: 0.5">
+          <app-checkbox [checked]="currentSalary() === 'with-salary'"></app-checkbox>
+          с зарплатой
+        </li>
+      </div>
+    </div>
+  </ng-template>
+}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss
index 865051e74..8cab5d23e 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/typography";
 @use "styles/responsive";
 
@@ -165,3 +166,5 @@
 a:hover {
   cursor: pointer;
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.ts b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.ts
index e6f8f0f65..7eaa6a449 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-filter/vacancy-filter.component.ts
@@ -1,5 +1,10 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../../../../ui/src/lib/services/desktop-layout.service";
+
+import { ButtonDirective, FiltersDirective } from "@uilib";
+
 import { animate, style, transition, trigger } from "@angular/animations";
 import { CommonModule } from "@angular/common";
 import {
@@ -28,6 +33,8 @@ import { VacancyFilterInfoService } from "./service/vacancy-filter-info.service"
 @Component({
   selector: "app-vacancy-filter",
   imports: [
+    ButtonDirective,
+    FiltersDirective,
     CommonModule,
     CheckboxComponent,
     ClickOutsideModule,
@@ -50,6 +57,8 @@ import { VacancyFilterInfoService } from "./service/vacancy-filter-info.service"
   providers: [VacancyFilterInfoService],
 })
 export class VacancyFilterComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly vacancyFilterInfoService = inject(VacancyFilterInfoService);
 
   @Input() set searchValue(value: string | undefined) {
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-letter/vacancy-letter.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-letter/vacancy-letter.component.scss
index 94e097597..61139883d 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-letter/vacancy-letter.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-letter/vacancy-letter.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/components/vacancy-ui";
 
 :host {
@@ -37,3 +36,15 @@
     @include vacancy-ui.focus;
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .letter {
+    font-size: var(--ui-font-body);
+    /* stylelint-disable value-no-vendor-prefix */
+    /* stylelint-enable value-no-vendor-prefix */
+    &__toggle {
+      font-size: var(--ui-font-small);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss
index 77067284f..f68ca1a8c 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-skills/vacancy-skills.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/components/vacancy-skill";
 @use "styles/components/vacancy-ui";
 
@@ -78,3 +77,17 @@
     background: var(--accent-light);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .skills {
+    &__toggle {
+      min-height: 44px;
+      font-size: var(--ui-font-body);
+    }
+
+    &__empty {
+      font-size: var(--ui-font-small);
+    }
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss
index 1f1ec1817..3d4f4c0d5 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.scss
@@ -38,3 +38,5 @@
     border-color: var(--red-light);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.ts b/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.ts
index 9f243c2ad..b7ae774ff 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-status/vacancy-status.component.ts
@@ -1,10 +1,12 @@
 /** @format */
 
 import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { BadgeComponent } from "@uilib";
 
 @Component({
   selector: "app-vacancy-status",
-  template: `<span [class]="'status status--' + tone()" role="status">{{ label() }}</span>`,
+  imports: [BadgeComponent],
+  template: `<app-badge [class]="'status status--' + tone()" [label]="label()" [tone]="tone()" />`,
   styleUrl: "./vacancy-status.component.scss",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/projects/social_platform/src/index.html b/projects/social_platform/src/index.html
index cee77659d..300b78390 100644
--- a/projects/social_platform/src/index.html
+++ b/projects/social_platform/src/index.html
@@ -6,7 +6,7 @@
     <meta charset="utf-8" />
     <title>Procollab</title>
     <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <link rel="prefetch" href="assets/icons/symbol/svg/sprite.css.svg" as="image" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
diff --git a/projects/social_platform/src/styles.scss b/projects/social_platform/src/styles.scss
index dac3a6494..95b5c644c 100644
--- a/projects/social_platform/src/styles.scss
+++ b/projects/social_platform/src/styles.scss
@@ -97,3 +97,15 @@ $procollab-theme: mat.m2-define-light-theme(
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 @include mat.all-component-themes($procollab-theme);
+
+@media screen and (max-width: 999px) {
+  :root {
+    --page-gutter: 16px;
+    @supports (height: 100dvh) {
+      --app-height: 100dvh;
+    }
+  }
+}
+@import "styles/platform-responsive.scss";
+@import "styles/ui-tokens.scss";
+@import "styles/ui-system.scss";
diff --git a/projects/social_platform/src/styles/_course-task.scss b/projects/social_platform/src/styles/_course-task.scss
new file mode 100644
index 000000000..a594ef88f
--- /dev/null
+++ b/projects/social_platform/src/styles/_course-task.scss
@@ -0,0 +1,36 @@
+/** @format */
+@use "responsive";
+
+@mixin responsive-layout($name) {
+  @include responsive.apply-mobile {
+    :host,
+    .#{$name},
+    .#{$name}__header,
+    .#{$name}__body,
+    .#{$name}__content {
+      min-width: 0;
+      max-width: 100%;
+      overflow-wrap: anywhere;
+    }
+    .#{$name}__header,
+    .#{$name}__body,
+    .#{$name}__content {
+      min-height: 0;
+      padding: 16px;
+    }
+    .#{$name}__files,
+    .#{$name}__content {
+      ::ng-deep app-upload-file .control {
+        max-height: none;
+      }
+    }
+
+    .read-more {
+      display: inline-flex;
+      align-items: center;
+      min-height: 44px;
+    }
+  }
+}
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/styles/_feed-card.scss b/projects/social_platform/src/styles/_feed-card.scss
index 9ab53c322..05bf3175b 100644
--- a/projects/social_platform/src/styles/_feed-card.scss
+++ b/projects/social_platform/src/styles/_feed-card.scss
@@ -195,4 +195,30 @@
       filter: brightness(0.95);
     }
   }
+
+  @media screen and (max-width: 999px) {
+    .feed-card__skills {
+      flex-wrap: wrap;
+    }
+
+    .feed-card__chip {
+      min-height: 24px;
+      font-size: 12px;
+      overflow-wrap: anywhere;
+      white-space: normal;
+
+      &--skill {
+        max-width: 100%;
+      }
+    }
+
+    .feed-card__cta {
+      align-self: flex-start;
+      max-width: 100%;
+      min-height: 44px;
+      padding: 10px 16px;
+    }
+  }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/styles/_platform-responsive.scss b/projects/social_platform/src/styles/_platform-responsive.scss
new file mode 100644
index 000000000..539e345f4
--- /dev/null
+++ b/projects/social_platform/src/styles/_platform-responsive.scss
@@ -0,0 +1,119 @@
+/** @format */
+@use "responsive";
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  app-root,
+  app-input,
+  app-textarea,
+  app-select,
+  app-autocomplete-input,
+  app-search,
+  app-upload-file,
+  app-file-item,
+  app-file-upload-item,
+  app-button,
+  ui-button {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  label,
+  .error {
+    overflow-wrap: anywhere;
+  }
+
+  video,
+  iframe,
+  canvas {
+    max-width: 100%;
+  }
+
+  .cdk-overlay-container {
+    z-index: 10010;
+  }
+
+  .responsive-header,
+  .responsive-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    min-width: 0;
+  }
+
+  .responsive-table {
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+  }
+
+  .responsive-dialog-header,
+  .responsive-dialog-actions {
+    position: sticky;
+    z-index: 2;
+    background: inherit;
+  }
+
+  .responsive-dialog-header {
+    top: 0;
+  }
+
+  .responsive-dialog-actions {
+    bottom: 0;
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+
+  @include responsive.apply-mobile {
+    html {
+      scrollbar-gutter: auto;
+    }
+
+    .text-body-10 {
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    .text-body-12 {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    input:not([type="checkbox"], [type="radio"]),
+    textarea,
+    select {
+      min-width: 0;
+      max-width: 100%;
+      font-size: 16px;
+    }
+
+    .responsive-header,
+    .responsive-actions {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .cdk-overlay-pane {
+      max-width: calc(100vw - 24px);
+    }
+
+    .mat-datepicker-content {
+      max-width: 100%;
+      max-height: calc(100dvh - 24px);
+      overflow: auto;
+    }
+  }
+
+  @media screen and (max-width: 359px) {
+    :root {
+      --page-gutter: 12px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/styles/_profile-form.scss b/projects/social_platform/src/styles/_profile-form.scss
new file mode 100644
index 000000000..dfd298992
--- /dev/null
+++ b/projects/social_platform/src/styles/_profile-form.scss
@@ -0,0 +1,60 @@
+/** @format */
+@use "responsive";
+
+@mixin responsive-layout {
+  :host,
+  fieldset,
+  .profile__column {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @include responsive.apply-mobile {
+    .profile__main--grid,
+    .profile__wrapper--links,
+    .profile__wrapper--education,
+    .profile__wrapper--experience,
+    .profile__wrapper--achievements,
+    .profile__language--list,
+    .profile__column--date {
+      @include responsive.single-column;
+    }
+
+    .profile__row {
+      flex-wrap: wrap;
+    }
+
+    .profile__column fieldset .error {
+      position: static;
+      margin-top: 6px;
+    }
+
+    .profile__education--card {
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    .profile__education--info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .edit-icon,
+    .basket-icon {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+    }
+  }
+
+  @include responsive.apply-tablet {
+    .profile__main--grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+}
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/styles/_responsive.scss b/projects/social_platform/src/styles/_responsive.scss
index 484b7e281..8b07c7260 100644
--- a/projects/social_platform/src/styles/_responsive.scss
+++ b/projects/social_platform/src/styles/_responsive.scss
@@ -21,3 +21,53 @@ $tablet: 750px;
     @content;
   }
 }
+
+@mixin apply-mobile {
+  @media screen and (max-width: #{$tablet - 1px}) {
+    @content;
+  }
+}
+
+@mixin apply-below-desktop {
+  @media screen and (max-width: #{$desktop - 1px}) {
+    @content;
+  }
+}
+
+@mixin single-column {
+  grid-template-columns: minmax(0, 1fr);
+
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+}
+
+@mixin scroll-tabs {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: thin;
+
+  > * {
+    flex-shrink: 0;
+    min-height: 44px;
+    white-space: nowrap;
+  }
+}
+
+@mixin mobile-actions {
+  flex-wrap: wrap;
+  gap: 12px;
+  min-width: 0;
+
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+}
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/styles/_typography.scss b/projects/social_platform/src/styles/_typography.scss
index 9462ad54d..520fa0592 100644
--- a/projects/social_platform/src/styles/_typography.scss
+++ b/projects/social_platform/src/styles/_typography.scss
@@ -239,6 +239,11 @@
   font-weight: 400;
   line-height: 130%;
   color: var(--grey-button);
+
+  @media screen and (max-width: 999px) {
+    font-size: var(--ui-font-caption);
+    color: var(--ui-text-muted);
+  }
 }
 
 .text-body-10 {
@@ -251,8 +256,14 @@
   font-style: normal;
   font-weight: 400;
   line-height: 130%;
+
+  @media screen and (max-width: 999px) {
+    font-size: var(--ui-font-caption);
+  }
 }
 
 .text-body-6 {
   @include body-6;
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/styles/_ui-foundation.scss b/projects/social_platform/src/styles/_ui-foundation.scss
new file mode 100644
index 000000000..1fbfc8863
--- /dev/null
+++ b/projects/social_platform/src/styles/_ui-foundation.scss
@@ -0,0 +1,258 @@
+/** @format */
+
+@mixin button($layout: true) {
+  --button-color: var(--ui-accent);
+  --button-hover: var(--accent-medium);
+  --button-text: var(--light-white);
+
+  @if $layout {
+    display: inline-flex;
+    gap: var(--ui-space-sm);
+    align-items: center;
+    justify-content: center;
+  }
+
+  min-width: 0;
+  max-width: 100%;
+  min-height: var(--ui-control-height);
+  padding: 10px 24px;
+  font: inherit;
+  font-size: var(--ui-font-small);
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--button-text);
+  text-align: center;
+  overflow-wrap: anywhere;
+  white-space: normal;
+  cursor: pointer;
+  background: var(--button-color);
+  border: 1px solid var(--button-color);
+  border-radius: var(--ui-radius-control);
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    box-shadow 0.2s;
+
+  &:hover:not(:disabled) {
+    background: var(--button-hover);
+    border-color: var(--button-hover);
+  }
+
+  &:active:not(:disabled) {
+    background: var(--accent-dark);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-dark);
+    outline-offset: 3px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--ui-disabled-opacity);
+  }
+
+  &--secondary,
+  &--outline {
+    color: var(--button-color);
+    background: transparent;
+
+    &:hover:not(:disabled),
+    &:active:not(:disabled) {
+      color: var(--button-color);
+      background: var(--accent-light);
+    }
+  }
+
+  &--danger,
+  &--red {
+    --button-color: var(--ui-danger);
+    --button-hover: var(--red-dark);
+
+    &:active:not(:disabled) {
+      background: var(--red-dark);
+    }
+
+    &.button--outline:hover:not(:disabled) {
+      background: var(--red-light);
+    }
+  }
+
+  &--grey {
+    --button-color: var(--grey-button);
+    --button-hover: var(--gray);
+    --button-text: var(--black);
+  }
+
+  &--green {
+    --button-color: var(--green);
+    --button-hover: var(--green-dark);
+  }
+
+  &--gold {
+    --button-color: var(--gold);
+    --button-hover: var(--gold-dark);
+  }
+
+  &--white {
+    --button-color: var(--light-white);
+    --button-hover: var(--white);
+    --button-text: var(--black);
+  }
+
+  &--gradient {
+    background: var(--gradient);
+  }
+
+  &--no-border {
+    border-color: transparent;
+  }
+
+  &--medium {
+    min-width: min(157px, 100%);
+  }
+
+  &--big {
+    width: 100%;
+  }
+
+  &--extra-small {
+    padding-inline: 12px;
+  }
+
+  &--icon,
+  &--text {
+    color: var(--ui-accent);
+    background: transparent;
+    border-color: transparent;
+
+    &:hover:not(:disabled),
+    &:active:not(:disabled) {
+      color: var(--accent-dark);
+      background: var(--accent-light);
+      border-color: transparent;
+    }
+  }
+
+  &--icon {
+    min-width: 44px;
+    padding: 10px;
+  }
+
+  &--text {
+    padding-inline: 12px;
+  }
+
+  @media (max-width: 749px) {
+    padding-inline: 16px;
+
+    &--icon {
+      padding: 9px;
+    }
+
+    &--text {
+      padding-inline: 12px;
+    }
+  }
+}
+
+@mixin control {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  min-height: var(--ui-control-height);
+  padding: var(--ui-control-padding);
+  font: inherit;
+  font-size: var(--ui-font-body);
+  line-height: 1.4;
+  color: var(--ui-text);
+  background: var(--ui-surface-subtle);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-control);
+  outline: none;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+
+  &::placeholder {
+    color: var(--dark-grey);
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--dark-grey);
+  }
+
+  &:focus-visible,
+  &:focus-within,
+  &--open {
+    border-color: var(--ui-accent);
+    box-shadow: var(--ui-focus-ring);
+  }
+
+  &--error,
+  &--overflow,
+  &[aria-invalid="true"] {
+    border: 1px solid var(--ui-danger);
+
+    &:focus,
+    &:focus-within {
+      box-shadow: var(--ui-error-ring);
+    }
+  }
+
+  &:disabled,
+  &--disabled {
+    cursor: not-allowed;
+    opacity: var(--ui-disabled-opacity);
+  }
+
+  @media (max-width: 749px) {
+    font-size: 16px;
+  }
+}
+
+@mixin card {
+  min-width: 0;
+  max-width: 100%;
+  padding: var(--ui-card-padding);
+  color: var(--ui-text);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border-subtle);
+  border-radius: var(--ui-radius-card);
+  box-shadow: var(--ui-card-shadow);
+}
+
+@mixin choice {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  accent-color: var(--ui-accent);
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-dark);
+    outline-offset: 3px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--ui-disabled-opacity);
+  }
+}
+
+@mixin badge {
+  display: inline-flex;
+  gap: var(--ui-space-xs);
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  min-height: 26px;
+  padding: 4px 12px;
+  font-size: var(--ui-font-caption);
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  border-radius: var(--ui-radius-control);
+}
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/styles/_ui-system.scss b/projects/social_platform/src/styles/_ui-system.scss
new file mode 100644
index 000000000..c9b3c7bb4
--- /dev/null
+++ b/projects/social_platform/src/styles/_ui-system.scss
@@ -0,0 +1,209 @@
+/** @format */
+@use "ui-foundation";
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  button.ui-button.ui-button {
+    @include ui-foundation.button($layout: false);
+  }
+
+  .ui-button {
+    display: inline-flex;
+    gap: var(--ui-space-sm);
+    align-items: center;
+    justify-content: center;
+  }
+
+  button.ui-button[role="radio"] {
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--ui-control-padding);
+    color: var(--ui-text);
+    text-align: left;
+    background: var(--ui-surface-subtle);
+    border-color: var(--ui-border-subtle);
+    border-radius: var(--ui-radius-card);
+
+    &[aria-checked="true"] {
+      background: var(--accent-light);
+      border-color: var(--ui-accent);
+    }
+  }
+
+  .ui-field {
+    @include ui-foundation.control;
+  }
+
+  input.ui-choice.ui-choice {
+    min-height: 18px;
+    padding: 0;
+    background: transparent;
+
+    @include ui-foundation.choice;
+
+    appearance: auto;
+  }
+
+  .ui-card {
+    @include ui-foundation.card;
+
+    &--interactive {
+      transition:
+        box-shadow 0.2s,
+        border-color 0.2s;
+    }
+
+    &--interactive:hover {
+      border-color: var(--ui-accent);
+      box-shadow: var(--ui-card-hover-shadow);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-dark);
+      outline-offset: 3px;
+    }
+  }
+
+  .ui-form {
+    min-width: 0;
+  }
+
+  .ui-form label.field-label,
+  label.field-label {
+    margin-bottom: var(--ui-space-sm);
+    font-size: var(--ui-font-small);
+    line-height: 1.5;
+    color: var(--ui-text);
+  }
+
+  .ui-form .error,
+  .error {
+    font-size: var(--ui-font-small);
+    line-height: 1.5;
+    color: var(--ui-danger);
+  }
+
+  .ui-filters {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-md);
+    min-width: 0;
+  }
+
+  .ui-filters__header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-xs);
+    align-items: center;
+    justify-content: space-between;
+
+    > p,
+    > .ui-button {
+      flex-shrink: 0;
+    }
+  }
+
+  .ui-dialog-body {
+    min-width: 0;
+    font-size: var(--ui-font-body);
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+  }
+
+  .ui-dialog-footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-sm);
+    align-items: center;
+    justify-content: flex-end;
+    padding-top: var(--ui-space-md);
+    margin-top: var(--ui-space-md);
+  }
+
+  .ui-alert {
+    padding: var(--ui-space-md);
+    color: var(--ui-text);
+    background: var(--accent-light);
+    border-radius: var(--ui-radius-card);
+  }
+
+  .ui-alert--error {
+    color: var(--red-dark);
+    background: var(--red-light);
+  }
+
+  .ui-alert--success {
+    color: var(--green-dark);
+    background: var(--green-light);
+  }
+
+  .ui-alert--warning {
+    color: var(--gold-dark);
+    background: var(--gold-light);
+  }
+
+  .ui-drawer {
+    min-width: 0;
+    max-width: 100vw;
+    overscroll-behavior: contain;
+  }
+
+  table.ui-table {
+    width: 100%;
+    font-size: var(--ui-font-small);
+    line-height: 1.5;
+    color: var(--ui-text);
+    border-collapse: collapse;
+
+    th {
+      padding: 12px 16px;
+      font-weight: 600;
+      text-align: left;
+      background: var(--ui-surface-subtle);
+      border-bottom: 1px solid var(--ui-border);
+    }
+
+    td {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--ui-border-subtle);
+    }
+
+    tbody tr:hover {
+      background: var(--accent-light);
+    }
+  }
+
+  .ui-h1 {
+    font-size: var(--ui-font-h1);
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  .ui-h2 {
+    font-size: var(--ui-font-h2);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .ui-h3 {
+    font-size: var(--ui-font-h3);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .ui-body {
+    font-size: var(--ui-font-body);
+    line-height: 1.5;
+  }
+
+  .ui-small {
+    font-size: var(--ui-font-small);
+    line-height: 1.5;
+  }
+
+  .ui-caption {
+    font-size: var(--ui-font-caption);
+    line-height: 1.5;
+    color: var(--ui-text-muted);
+  }
+}
diff --git a/projects/social_platform/src/styles/_ui-tokens.scss b/projects/social_platform/src/styles/_ui-tokens.scss
new file mode 100644
index 000000000..51c9d5b12
--- /dev/null
+++ b/projects/social_platform/src/styles/_ui-tokens.scss
@@ -0,0 +1,80 @@
+/** @format */
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :root {
+    --ui-accent: var(--accent);
+    --accent-hover: var(--accent-medium);
+    --ui-text: var(--black);
+    --ui-text-muted: var(--grey-for-text);
+    --ui-surface: var(--light-white);
+    --ui-surface-subtle: var(--white);
+    --ui-border: var(--gray);
+    --ui-border-subtle: var(--medium-grey-for-outline);
+    --ui-danger: var(--red);
+    --ui-success: var(--green);
+    --ui-warning: var(--gold);
+    --ui-radius-control: var(--rounded-xxl);
+    --ui-radius-card: var(--rounded-xl);
+    --ui-radius-dialog: var(--rounded-xl);
+    --ui-control-height: 44px;
+    --ui-compact-sidebar-width: 157px;
+    --ui-mobile-entity-card-width: 260px;
+    --ui-control-padding: 12px 16px;
+    --ui-card-padding: 16px;
+    --ui-dialog-padding: 24px;
+    --ui-dialog-sm: 400px;
+    --ui-dialog-md: 560px;
+    --ui-dialog-lg: 800px;
+    --ui-space-xs: 4px;
+    --ui-space-sm: 8px;
+    --ui-space-md: 16px;
+    --ui-space-lg: 24px;
+    --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+    --ui-error-ring: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent);
+    --ui-card-shadow: none;
+    --ui-card-hover-shadow: 0 4px 12px color-mix(in srgb, var(--black) 8%, transparent);
+    --ui-backdrop: color-mix(in srgb, var(--black) 50%, transparent);
+    --ui-font-h1: 24px;
+    --ui-font-h2: 18px;
+    --ui-font-h3: 16px;
+    --ui-font-body: 14px;
+    --ui-font-small: 12px;
+    --ui-font-caption: 12px;
+    --ui-disabled-opacity: 0.5;
+    --ui-nav-gradient-end: #4d3780;
+    --ui-board-surface: #d9d9d9;
+    --ui-error-text: #b42318;
+    --ui-crop-surface: #f8f9fa;
+    --ui-message-surface: #f7f3ff;
+    --ui-media-button: #81818180;
+    --ui-media-button-active: #37373780;
+    --ui-media-backdrop: #333b;
+    --ui-overlay-shadow-color: #0002;
+    --ui-scrim: rgb(51 46 45 / 50%);
+    --ui-preview-scrim: rgb(0 0 0 / 60%);
+    --ui-crop-scrim: rgb(0 0 0 / 50%);
+    --ui-crop-border: rgb(255 255 255 / 50%);
+    --ui-success-glow: rgb(0 200 147 / 51%);
+    --ui-success-glow-end: rgb(0 200 147 / 0%);
+    --ui-accent-tint-subtle: rgb(109 40 255 / 6%);
+    --ui-accent-tint-hover: rgb(109 40 255 / 12%);
+    --ui-accent-tint-chart: rgb(109 40 255 / 8%);
+    --ui-accent-gradient-end: rgb(138 99 230 / 28%);
+    --ui-panel-shadow: 0 2px 8px rgb(51 51 51 / 8%);
+    --ui-chart-shadow: 0 6px 22px rgb(51 51 51 / 4%);
+    --ui-tooltip-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+    --ui-crop-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+    --ui-crop-handle-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+    --ui-message-shadow: 5px 5px 25px rgb(159 159 159 / 15%);
+    --ui-header-shadow: 5px 5px 50px rgb(196 196 196 / 15%);
+    --ui-composer-shadow: 4px -4px 4px rgb(51 51 51 / 20%);
+  }
+
+  @media (max-width: 749px) {
+    :root {
+      --ui-dialog-padding: 16px;
+      --ui-font-h1: 18px;
+    }
+  }
+}
diff --git a/projects/social_platform/src/styles/components/_vacancy-ui.scss b/projects/social_platform/src/styles/components/_vacancy-ui.scss
index a9dac32fc..907c935fb 100644
--- a/projects/social_platform/src/styles/components/_vacancy-ui.scss
+++ b/projects/social_platform/src/styles/components/_vacancy-ui.scss
@@ -1,4 +1,5 @@
 /** @format */
+@use "styles/ui-foundation";
 
 @mixin surface {
   min-width: 0;
@@ -8,6 +9,13 @@
   background: var(--white);
   border: 1px solid var(--medium-grey-for-outline);
   border-radius: var(--rounded-lg);
+
+  @media screen and (max-width: 999px) {
+    @include ui-foundation.card;
+
+    padding: var(--ui-card-padding);
+    border-radius: var(--ui-radius-card);
+  }
 }
 
 @mixin secondary {
@@ -94,3 +102,5 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
diff --git a/projects/social_platform/src/styles/pages/auth.scss b/projects/social_platform/src/styles/pages/auth.scss
index 163af1958..3cc628a2f 100644
--- a/projects/social_platform/src/styles/pages/auth.scss
+++ b/projects/social_platform/src/styles/pages/auth.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 @use "styles/typography";
 
@@ -242,3 +241,41 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-mobile {
+    .auth {
+      padding: 24px 0;
+    }
+
+    .auth__logo {
+      position: static;
+      margin-bottom: 24px;
+    }
+
+    .auth__row {
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .auth__row fieldset {
+      width: 100%;
+      margin-right: 0;
+    }
+
+    .auth__field app-input.auth__password-input {
+      --auth-password-eye-size: 44px;
+    }
+
+    .auth__password-toggle {
+      width: 44px;
+      height: 44px;
+    }
+
+    .auth__agreement,
+    .auth__checkbox {
+      min-height: 44px;
+    }
+  }
+}
diff --git a/projects/ui/src/lib/components/layout/dialog-header/dialog-header.component.ts b/projects/ui/src/lib/components/layout/dialog-header/dialog-header.component.ts
new file mode 100644
index 000000000..ad7718db2
--- /dev/null
+++ b/projects/ui/src/lib/components/layout/dialog-header/dialog-header.component.ts
@@ -0,0 +1,41 @@
+/** @format */
+
+import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
+import { IconComponent } from "../../primitives/icon/icon.component";
+import { ButtonDirective } from "../../primitives/button/button.directive";
+
+@Component({
+  selector: "app-dialog-header",
+  imports: [IconComponent, ButtonDirective],
+  template: `<header class="dialog-header">
+    <h2 [id]="titleId()">{{ title() }}</h2>
+    @if (closable()) {
+      <button appButton="icon" type="button" aria-label="Закрыть" (click)="closed.emit()">
+        <i appIcon icon="cross" appSquare="16" aria-hidden="true"></i>
+      </button>
+    }
+  </header>`,
+  styles: `
+    .dialog-header {
+      display: flex;
+      gap: var(--ui-space-md);
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--ui-space-md);
+    }
+    h2 {
+      font-size: var(--ui-font-h2);
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--ui-text);
+      overflow-wrap: anywhere;
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DialogHeaderComponent {
+  readonly title = input.required<string>();
+  readonly titleId = input<string>();
+  readonly closable = input(true);
+  readonly closed = output<void>();
+}
diff --git a/projects/ui/src/lib/components/layout/index.ts b/projects/ui/src/lib/components/layout/index.ts
index a907933cb..59faeb633 100644
--- a/projects/ui/src/lib/components/layout/index.ts
+++ b/projects/ui/src/lib/components/layout/index.ts
@@ -14,3 +14,8 @@ export * from "./invite-manage-card/invite-manage-card.component";
 export * from "./profile-control-panel/profile-control-panel.component";
 export * from "./profile-info/profile-info.component";
 export * from "./sidebar/sidebar.component";
+
+export * from "./page-header/page-header.component";
+export * from "./state/state.component";
+export * from "./dialog-header/dialog-header.component";
+export * from "./ui-adapters.directive";
diff --git a/projects/ui/src/lib/components/layout/page-header/page-header.component.scss b/projects/ui/src/lib/components/layout/page-header/page-header.component.scss
new file mode 100644
index 000000000..e8bf8daf9
--- /dev/null
+++ b/projects/ui/src/lib/components/layout/page-header/page-header.component.scss
@@ -0,0 +1,64 @@
+/** @format */
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :host {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .page-header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-md);
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--ui-space-lg);
+
+    &__heading {
+      min-width: 0;
+    }
+
+    &__title-row {
+      display: flex;
+      gap: var(--ui-space-sm);
+      align-items: center;
+    }
+
+    &__title {
+      font-size: var(--ui-font-h1);
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--ui-text);
+      overflow-wrap: anywhere;
+    }
+
+    &__description {
+      margin-top: var(--ui-space-sm);
+      font-size: var(--ui-font-body);
+      line-height: 1.5;
+      color: var(--ui-text-muted);
+    }
+
+    &__breadcrumbs {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ui-space-sm);
+      margin-bottom: var(--ui-space-sm);
+      font-size: var(--ui-font-caption);
+    }
+
+    &__actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ui-space-sm);
+      align-items: center;
+      max-width: 100%;
+    }
+
+    &__actions:empty {
+      display: none;
+    }
+  }
+}
diff --git a/projects/ui/src/lib/components/layout/page-header/page-header.component.ts b/projects/ui/src/lib/components/layout/page-header/page-header.component.ts
new file mode 100644
index 000000000..31d08a3dc
--- /dev/null
+++ b/projects/ui/src/lib/components/layout/page-header/page-header.component.ts
@@ -0,0 +1,56 @@
+/** @format */
+
+import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { BackComponent } from "../../primitives/back/back.component";
+import { DesktopLayoutService } from "../../../services/desktop-layout.service";
+
+export interface PageBreadcrumb {
+  label: string;
+  link?: string;
+}
+
+@Component({
+  selector: "app-page-header",
+  imports: [BackComponent, RouterLink],
+  template: `
+    <header class="page-header">
+      <div class="page-header__heading">
+        @if (breadcrumbs().length) {
+          <nav aria-label="Навигационная цепочка" class="page-header__breadcrumbs">
+            @for (item of breadcrumbs(); track $index) {
+              @if (item.link) {
+                <a [routerLink]="item.link">{{ item.label }}</a>
+              } @else {
+                <span aria-current="page">{{ item.label }}</span>
+              }
+            }
+          </nav>
+        }
+        <div class="page-header__title-row">
+          @if (backRoute()) {
+            <app-back
+              [path]="backRoute()"
+              [compact]="!desktopLayout()"
+              [namespace]="desktopLayout() ? title() : ''"
+            />
+          }
+          <h1 class="page-header__title">{{ title() }}</h1>
+        </div>
+        @if (description()) {
+          <p class="page-header__description">{{ description() }}</p>
+        }
+      </div>
+      <div class="page-header__actions"><ng-content /></div>
+    </header>
+  `,
+  styleUrl: "./page-header.component.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageHeaderComponent {
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+  readonly title = input.required<string>();
+  readonly description = input<string>();
+  readonly breadcrumbs = input<PageBreadcrumb[]>([]);
+  readonly backRoute = input<string>();
+}
diff --git a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
index b7a3ad407..4808b487b 100644
--- a/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
+++ b/projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss
@@ -1,5 +1,4 @@
 /** @format */
-
 @use "styles/responsive";
 
 .control-panel {
@@ -378,3 +377,85 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .control-panel {
+    z-index: 10;
+
+    &__action {
+      color: var(--black);
+    }
+
+    &__bell {
+      &--hasInvites {
+        position: absolute;
+        top: -5%;
+        left: 0%;
+        width: 6px;
+        height: 6px;
+        background-color: var(--red);
+        border-radius: 100%;
+      }
+    }
+
+    i {
+      color: var(--ui-text-muted);
+    }
+  }
+
+  @include responsive.apply-below-desktop {
+    .control-panel {
+      position: static;
+    }
+
+    .control-panel__actions {
+      gap: 0;
+      margin-right: 0;
+    }
+
+    .control-panel__action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 44px;
+      min-height: 44px;
+    }
+
+    .control-panel__action--logout {
+      display: none;
+    }
+
+    .control-panel__profile {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      min-height: 44px;
+    }
+
+    .control-panel__notifications {
+      position: fixed;
+      top: 64px;
+      right: var(--page-gutter);
+      left: var(--page-gutter);
+      max-height: calc(var(--visual-viewport-height, 100dvh) - 80px);
+      overflow-y: auto;
+    }
+  }
+}
+
+@media screen and (max-width: 999px) {
+  .control-panel__logout {
+    display: none;
+  }
+
+  .control-panel__notifications {
+    top: 100%;
+    right: 0%;
+    z-index: 20;
+    width: auto;
+    max-width: none;
+    margin-top: 10px;
+  }
+}
diff --git a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
index c9885743e..e9f6a383a 100644
--- a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
+++ b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.html
@@ -1,13 +1,27 @@
 <!-- @format -->
-
-@if (user()) {
-  <a class="user" [routerLink]="['/office/profile', user().id]">
-    <div class="user__row">
-      <app-avatar
-        class="user__avatar"
-        [size]="avatarSize"
-        [url]="user().personal.avatar"
-      ></app-avatar>
-    </div>
-  </a>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  @if (user()) {
+    <a class="user" [routerLink]="['/office/profile', user().id]">
+      <div class="user__row">
+        <app-avatar
+          class="user__avatar"
+          [size]="avatarSize"
+          [url]="user().personal.avatar"
+        ></app-avatar>
+      </div>
+    </a>
+  }
+} @else {
+  @if (user()) {
+    <a class="user" aria-label="Мой профиль" [routerLink]="['/office/profile', user().id]">
+      <div class="user__row">
+        <app-avatar
+          class="user__avatar"
+          [size]="avatarSize"
+          [url]="user().personal.avatar"
+        ></app-avatar>
+      </div>
+    </a>
+  }
 }
diff --git a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.scss b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.scss
index a1d60897b..244e216d8 100644
--- a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.scss
+++ b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.scss
@@ -62,3 +62,32 @@
     color: var(--red);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  @include responsive.apply-below-desktop {
+    :host,
+    .user,
+    .user__row {
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .user__name,
+    .user__email {
+      overflow-wrap: anywhere;
+    }
+
+    .user__avatar {
+      flex-shrink: 0;
+      margin-right: 0;
+    }
+
+    .user {
+      align-items: center;
+      justify-content: center;
+      min-width: var(--ui-control-height);
+      min-height: var(--ui-control-height);
+    }
+  }
+}
diff --git a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.ts b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.ts
index 9ec026ccb..14326c658 100644
--- a/projects/ui/src/lib/components/layout/profile-info/profile-info.component.ts
+++ b/projects/ui/src/lib/components/layout/profile-info/profile-info.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../services/desktop-layout.service";
+
 import { ChangeDetectionStrategy, Component, input, type OnInit, output } from "@angular/core";
 import { Router, RouterLink } from "@angular/router";
 import { User } from "@domain/auth/user.model";
@@ -27,6 +30,8 @@ import { AvatarComponent } from "../../primitives/avatar/avatar.component";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileInfoComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   constructor(readonly router: Router) {}
 
   ngOnInit(): void {}
diff --git a/projects/ui/src/lib/components/layout/state/state.component.ts b/projects/ui/src/lib/components/layout/state/state.component.ts
new file mode 100644
index 000000000..56a4956dd
--- /dev/null
+++ b/projects/ui/src/lib/components/layout/state/state.component.ts
@@ -0,0 +1,72 @@
+/** @format */
+
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { LoaderComponent } from "../../primitives/loader/loader.component";
+import { IconComponent } from "../../primitives/icon/icon.component";
+
+/** Text and retry actions belong to the caller; presentation is shared across lists. */
+@Component({
+  selector: "app-state",
+  imports: [LoaderComponent, IconComponent],
+  template: `
+    <div
+      class="state"
+      [class.state--compact]="compact()"
+      [class.state--error]="kind() === 'error'"
+      [attr.role]="kind() === 'error' ? 'alert' : 'status'"
+      [attr.aria-busy]="kind() === 'loading' || null"
+    >
+      @if (kind() === "loading") {
+        <app-loader color="accent" size="24px" />
+      } @else if (!compact()) {
+        <i appIcon [icon]="icon()" appSquare="38" aria-hidden="true"></i>
+      }
+      @if (title()) {
+        <p class="state__title">{{ title() }}</p>
+      }
+      @if (description()) {
+        <p class="state__description">{{ description() }}</p>
+      }
+      <ng-content />
+    </div>
+  `,
+  styles: `
+    :host {
+      display: block;
+      min-width: 0;
+    }
+    .state {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-md);
+      align-items: center;
+      padding: var(--ui-space-lg);
+      text-align: center;
+      color: var(--ui-text-muted);
+      overflow-wrap: anywhere;
+    }
+    .state--error {
+      color: var(--ui-danger);
+    }
+    .state__title {
+      font-size: var(--ui-font-body);
+      line-height: 1.5;
+    }
+    .state__description {
+      font-size: var(--ui-font-small);
+      line-height: 1.5;
+    }
+    .state--compact {
+      padding: var(--ui-space-sm);
+      gap: var(--ui-space-sm);
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StateComponent {
+  readonly compact = input(false);
+  readonly kind = input<"empty" | "loading" | "error">("empty");
+  readonly title = input<string>();
+  readonly description = input<string>();
+  readonly icon = input("empty-chat");
+}
diff --git a/projects/ui/src/lib/components/layout/ui-adapters.directive.ts b/projects/ui/src/lib/components/layout/ui-adapters.directive.ts
new file mode 100644
index 000000000..114a2ae71
--- /dev/null
+++ b/projects/ui/src/lib/components/layout/ui-adapters.directive.ts
@@ -0,0 +1,50 @@
+/** @format */
+
+import { Directive, input } from "@angular/core";
+
+/** Surface adapter: entity cards keep their content and share the same presentation. */
+@Directive({
+  selector: "[appCard]",
+  host: { class: "ui-card", "[class.ui-card--interactive]": "interactive()" },
+})
+export class CardDirective {
+  readonly interactive = input(false);
+}
+
+@Directive({ selector: "input[appField],textarea[appField]", host: { class: "ui-field" } })
+export class FieldDirective {}
+
+@Directive({ selector: "input[appChoice]", host: { class: "ui-choice" } })
+export class ChoiceDirective {}
+
+@Directive({ selector: "table[appTable]", host: { class: "ui-table" } })
+export class TableDirective {}
+
+@Directive({ selector: "[appFormLayout]", host: { class: "ui-form" } })
+export class FormLayoutDirective {}
+
+@Directive({ selector: "[appFilters]", host: { class: "ui-filters" } })
+export class FiltersDirective {}
+
+@Directive({ selector: "[appDialogBody]", host: { class: "ui-dialog-body" } })
+export class DialogBodyDirective {}
+
+@Directive({ selector: "[appDialogFooter]", host: { class: "ui-dialog-footer" } })
+export class DialogFooterDirective {}
+
+@Directive({ selector: "[appDrawer]", host: { class: "ui-drawer" } })
+export class DrawerDirective {}
+
+@Directive({
+  selector: "[appAlert]",
+  host: {
+    class: "ui-alert",
+    "[attr.role]": 'appAlert() === "error" ? "alert" : "status"',
+    "[class.ui-alert--error]": 'appAlert() === "error"',
+    "[class.ui-alert--success]": 'appAlert() === "success"',
+    "[class.ui-alert--warning]": 'appAlert() === "warning"',
+  },
+})
+export class AlertDirective {
+  readonly appAlert = input<"info" | "success" | "warning" | "error">("info");
+}
diff --git a/projects/ui/src/lib/components/primitives/avatar/avatar.component.html b/projects/ui/src/lib/components/primitives/avatar/avatar.component.html
index b27b40088..8b57895b2 100644
--- a/projects/ui/src/lib/components/primitives/avatar/avatar.component.html
+++ b/projects/ui/src/lib/components/primitives/avatar/avatar.component.html
@@ -1,25 +1,64 @@
 <!-- @format -->
-
-<div
-  class="avatar"
-  [class.avatar--border]="hasBorder()"
-  [style.width]="size() + 'px'"
-  [style.height]="size() + 'px'"
->
-  <img
-    [src]="url() || placeholderUrl"
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div
+    class="avatar"
+    [class.avatar--border]="hasBorder()"
+    [style.width]="size() + 'px'"
+    [style.height]="size() + 'px'"
+  >
+    <img
+      [src]="url() || placeholderUrl"
+      [style.width]="size() + 'px'"
+      [style.height]="size() + 'px'"
+      alt="avatar"
+    />
+    @if (isOnline()) {
+      <div
+        [style.width]="onlineBadgeSize() + 'px'"
+        [style.height]="onlineBadgeSize() + 'px'"
+        [style.border-width]="onlineBadgeBorder() + 'px'"
+        [style.right]="onlineBadgeOffset() + 'px'"
+        [style.bottom]="onlineBadgeOffset() + 'px'"
+        class="avatar__online"
+      ></div>
+    }
+  </div>
+} @else {
+  <div
+    class="avatar"
+    [class.avatar--border]="hasBorder()"
     [style.width]="size() + 'px'"
     [style.height]="size() + 'px'"
-    alt="avatar"
-  />
-  @if (isOnline()) {
-    <div
-      [style.width]="onlineBadgeSize() + 'px'"
-      [style.height]="onlineBadgeSize() + 'px'"
-      [style.border-width]="onlineBadgeBorder() + 'px'"
-      [style.right]="onlineBadgeOffset() + 'px'"
-      [style.bottom]="onlineBadgeOffset() + 'px'"
-      class="avatar__online"
-    ></div>
-  }
-</div>
+  >
+    <div [class.avatar--border]="hasBorder()">
+      @if (progress()) {
+        <div
+          class="avatar__progress"
+          [style.--progress]="progress()! + '%'"
+          [style.--progress-width]="'-12px'"
+          [style.--progress-color]="'var(--accent)'"
+        ></div>
+      }
+
+      <img
+        [src]="url() || placeholderUrl"
+        [style.width]="size() + 'px'"
+        [style.height]="size() + 'px'"
+        [style.border-color]="'var(--' + borderColor() + ')'"
+        alt="avatar"
+      />
+
+      @if (isOnline()) {
+        <div
+          [style.width]="onlineBadgeSize() + 'px'"
+          [style.height]="onlineBadgeSize() + 'px'"
+          [style.border-width]="onlineBadgeBorder() + 'px'"
+          [style.right]="onlineBadgeOffset() + 'px'"
+          [style.bottom]="onlineBadgeOffset() + 'px'"
+          class="avatar__online"
+        ></div>
+      }
+    </div>
+  </div>
+}
diff --git a/projects/ui/src/lib/components/primitives/avatar/avatar.component.scss b/projects/ui/src/lib/components/primitives/avatar/avatar.component.scss
index f66455f2a..5f6e32a29 100644
--- a/projects/ui/src/lib/components/primitives/avatar/avatar.component.scss
+++ b/projects/ui/src/lib/components/primitives/avatar/avatar.component.scss
@@ -27,3 +27,45 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .avatar {
+    &__progress {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 3;
+      width: 100%;
+      height: 100%;
+      /* stylelint-disable-next-line declaration-colon-newline-after */
+      background: conic-gradient(
+        var(--progress-color) 0 var(--progress),
+        transparent var(--progress) 100%
+      );
+      border-radius: 50%;
+      /* stylelint-disable-next-line declaration-colon-newline-after */
+      mask: radial-gradient(
+        circle,
+        transparent calc(50% - var(--progress-width)),
+        white calc(50% - var(--progress-width))
+      );
+    }
+
+    img {
+      position: relative;
+      z-index: 1;
+    }
+
+    &__online {
+      z-index: 3;
+    }
+
+    &--border {
+      img {
+        border-style: solid;
+        border-width: 0.5px;
+      }
+    }
+  }
+}
diff --git a/projects/ui/src/lib/components/primitives/avatar/avatar.component.ts b/projects/ui/src/lib/components/primitives/avatar/avatar.component.ts
index 5504343ed..19326aa44 100644
--- a/projects/ui/src/lib/components/primitives/avatar/avatar.component.ts
+++ b/projects/ui/src/lib/components/primitives/avatar/avatar.component.ts
@@ -1,29 +1,28 @@
 /** @format */
 
-import { ChangeDetectionStrategy, Component, input, Input, type OnInit } from "@angular/core";
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../services/desktop-layout.service";
+
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
 
 /**
- * Компонент аватара пользователя
- *
- * Отображает круглое изображение профиля с возможностью:
- * - Настройки размера
- * - Добавления рамки
- * - Показа индикатора онлайн статуса
- * - Использования placeholder изображения при отсутствии URL
+ * Компонент для отображения аватара пользователя.
+ * Поддерживает различные размеры, индикатор онлайн статуса и прогресс-бар.
  *
- * @example
- * \`\`\`html
- * <!-- Базовое использование -->
- * <app-avatar [url]="user.avatar"></app-avatar>
+ * Входящие параметры:
+ * - url: URL изображения аватара (обязательный)
+ * - size: размер аватара в пикселях (по умолчанию 50)
+ * - hasBorder: отображать рамку вокруг аватара
+ * - isOnline: показывать индикатор онлайн статуса
+ * - progress: значение прогресса для отображения кольца прогресса
+ * - onlineBadgeSize: размер индикатора онлайн статуса (по умолчанию 16)
+ * - onlineBadgeBorder: толщина рамки индикатора (по умолчанию 3)
+ * - onlineBadgeOffset: смещение индикатора от края (по умолчанию 0)
  *
- * <!-- С онлайн статусом и рамкой -->
- * <app-avatar
- *   [url]="user.avatar"
- *   [size]="60"
- *   [isOnline]="user.isOnline"
- *   [hasBorder]="true">
- * </app-avatar>
- * \`\`\`
+ * Функциональность:
+ * - Автоматическая подстановка placeholder при отсутствии изображения
+ * - Индикатор онлайн статуса в правом нижнем углу
+ * - Кольцо прогресса вокруг аватара
  */
 @Component({
   selector: "app-avatar",
@@ -32,33 +31,35 @@ import { ChangeDetectionStrategy, Component, input, Input, type OnInit } from "@
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AvatarComponent implements OnInit {
-  /** URL изображения аватара (опциональный, при отсутствии используется placeholder) */
-  readonly url = input.required<string | undefined>();
+export class AvatarComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  /** URL изображения аватара */
+  url = input.required<string | undefined>();
 
-  /** Размер аватара в пикселях (по умолчанию 50px) */
-  readonly size = input<number>(50);
+  /** Размер аватара в пикселях */
+  size = input(50);
 
-  /** Флаг отображения рамки вокруг аватара */
-  readonly hasBorder = input<boolean>(false);
+  /** Отображать рамку */
+  hasBorder = input(false);
 
-  /** Флаг отображения индикатора онлайн статуса */
-  readonly isOnline = input<boolean>(false);
+  borderColor = input<"dark-grey" | "white" | "black" | "accent">("white");
 
-  /** Размер индикатора онлайн статуса в пикселях */
-  readonly onlineBadgeSize = input<number>(16);
+  /** Показывать индикатор онлайн статуса */
+  isOnline = input(false);
 
-  /** Толщина рамки индикатора онлайн статуса в пикселях */
-  readonly onlineBadgeBorder = input<number>(3);
+  /** Значение прогресса (0-100) */
+  progress = input<number>();
 
-  /** Смещение индикатора онлайн статуса от края аватара */
-  readonly onlineBadgeOffset = input<number>(0);
+  /** Размер индикатора онлайн статуса */
+  onlineBadgeSize = input(16);
 
-  /** URL placeholder изображения, используемого при отсутствии аватара */
-  placeholderUrl =
-    "https://uch-ibadan.org.ng/wp-content/uploads/2021/10/Profile_avatar_placeholder_large.png";
+  /** Толщина рамки индикатора */
+  onlineBadgeBorder = input(3);
 
-  constructor() {}
+  /** Смещение индикатора от края */
+  onlineBadgeOffset = input(0);
 
-  ngOnInit(): void {}
+  /** URL placeholder изображения по умолчанию */
+  placeholderUrl = "https://hwchamber.co.uk/wp-content/uploads/2022/04/avatar-placeholder.gif";
 }
diff --git a/projects/ui/src/lib/components/primitives/back/back.component.html b/projects/ui/src/lib/components/primitives/back/back.component.html
index 2c266c470..2bd55663b 100644
--- a/projects/ui/src/lib/components/primitives/back/back.component.html
+++ b/projects/ui/src/lib/components/primitives/back/back.component.html
@@ -1,6 +1,20 @@
 <!-- @format -->
-
-<div class="back text-heading-1" (click)="onClick()">
-  <i class="back__icon" appIcon icon="left-arrow" appSquare="24"></i>
-  <span>{{ namespace() }}</span>
-</div>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div class="back text-heading-1" (click)="onClick()">
+    <i class="back__icon" appIcon icon="left-arrow" appSquare="24"></i>
+    <span>{{ namespace() }}</span>
+  </div>
+} @else {
+  <button
+    [appButton]="compact() ? 'icon' : 'text'"
+    type="button"
+    class="back text-heading-1"
+    [class.back--compact]="compact()"
+    [attr.aria-label]="namespace() || 'Назад'"
+    (click)="onClick()"
+  >
+    <i class="back__icon" appIcon icon="left-arrow" appSquare="24" aria-hidden="true"></i
+    ><span>{{ namespace() }}</span>
+  </button>
+}
diff --git a/projects/ui/src/lib/components/primitives/back/back.component.scss b/projects/ui/src/lib/components/primitives/back/back.component.scss
index 77d1c4c44..730e2179e 100644
--- a/projects/ui/src/lib/components/primitives/back/back.component.scss
+++ b/projects/ui/src/lib/components/primitives/back/back.component.scss
@@ -1,3 +1,4 @@
+/** @format */
 @use "styles/responsive";
 
 .back {
@@ -22,3 +23,21 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .back {
+    min-width: 44px;
+    min-height: 44px;
+    font: inherit;
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-dark);
+      outline-offset: 3px;
+    }
+  }
+
+  .back--compact {
+    margin: 0;
+  }
+}
diff --git a/projects/ui/src/lib/components/primitives/back/back.component.ts b/projects/ui/src/lib/components/primitives/back/back.component.ts
index 557c3b23d..f1db45b2e 100644
--- a/projects/ui/src/lib/components/primitives/back/back.component.ts
+++ b/projects/ui/src/lib/components/primitives/back/back.component.ts
@@ -1,5 +1,8 @@
 /** @format */
 
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../services/desktop-layout.service";
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -11,6 +14,7 @@ import {
 import { Router } from "@angular/router";
 import { Location } from "@angular/common";
 import { IconComponent } from "../icon/icon.component";
+import { ButtonDirective } from "../button/button.directive";
 import { LoggerService } from "@corelib";
 
 /**
@@ -33,10 +37,12 @@ import { LoggerService } from "@corelib";
   selector: "app-back",
   templateUrl: "./back.component.html",
   styleUrl: "./back.component.scss",
-  imports: [IconComponent],
+  imports: [IconComponent, ButtonDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BackComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
   private readonly router = inject(Router);
   private readonly location = inject(Location);
   private readonly loggerService = inject(LoggerService);
@@ -44,6 +50,7 @@ export class BackComponent implements OnInit {
   /** Путь для перехода (если не указан, используется history.back()) */
   readonly path = input<string | undefined>();
   readonly namespace = input<string | undefined>();
+  readonly compact = input(false);
 
   ngOnInit(): void {}
 
diff --git a/projects/ui/src/lib/components/primitives/badge/badge.component.scss b/projects/ui/src/lib/components/primitives/badge/badge.component.scss
new file mode 100644
index 000000000..95676a28f
--- /dev/null
+++ b/projects/ui/src/lib/components/primitives/badge/badge.component.scss
@@ -0,0 +1,41 @@
+/** @format */
+@use "styles/ui-foundation";
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :host {
+    display: inline-flex;
+    flex-shrink: 0;
+    max-width: 100%;
+  }
+
+  .badge {
+    @include ui-foundation.badge;
+
+    color: var(--ui-text);
+    background: var(--light-gray);
+    border: 1px solid var(--ui-border);
+
+    &--success {
+      color: var(--green-dark);
+      background: var(--green-light);
+      border-color: var(--green);
+    }
+
+    &--pending {
+      background: var(--accent-light);
+      border-color: var(--accent-light);
+    }
+
+    &--declined {
+      background: var(--red-light);
+      border-color: var(--red-light);
+    }
+
+    &--warning {
+      color: var(--gold-dark);
+      background: var(--gold-light);
+      border-color: var(--gold);
+    }
+  }
+}
diff --git a/projects/ui/src/lib/components/primitives/badge/badge.component.ts b/projects/ui/src/lib/components/primitives/badge/badge.component.ts
new file mode 100644
index 000000000..0139d52ee
--- /dev/null
+++ b/projects/ui/src/lib/components/primitives/badge/badge.component.ts
@@ -0,0 +1,27 @@
+/** @format */
+
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+
+@Component({
+  selector: "app-badge",
+  template: `<span [class]="'badge badge--' + effectiveTone()" role="status"
+    >{{ label() }}<ng-content
+  /></span>`,
+  styleUrl: "./badge.component.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BadgeComponent {
+  readonly color = input<"green" | "red" | "gold">();
+  readonly type = input<"deadline" | "start">();
+  readonly label = input<string>();
+  readonly tone = input<"neutral" | "pending" | "success" | "declined" | "warning">("neutral");
+  protected readonly effectiveTone = computed(() =>
+    this.color() === "green"
+      ? "success"
+      : this.color() === "red"
+        ? "declined"
+        : this.color() === "gold"
+          ? "warning"
+          : this.tone(),
+  );
+}
diff --git a/projects/ui/src/lib/components/primitives/button/button-states.spec.ts b/projects/ui/src/lib/components/primitives/button/button-states.spec.ts
new file mode 100644
index 000000000..2facb6834
--- /dev/null
+++ b/projects/ui/src/lib/components/primitives/button/button-states.spec.ts
@@ -0,0 +1,45 @@
+/** @format */
+
+import { Component, signal } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { ButtonComponent } from "./button.component";
+import { ButtonDirective } from "./button.directive";
+import { ButtonComponent as LegacyButton } from "@ui/primitives/button/button.component";
+import { DesktopLayoutService } from "../../../services/desktop-layout.service";
+
+@Component({
+  imports: [ButtonComponent, ButtonDirective],
+  template: `<app-button [loader]="loading()" (click)="calls = calls + 1">Сохранить</app-button>
+    <button appButton="primary" [appButtonLoading]="loading()" (click)="calls = calls + 1">
+      Отправить
+    </button>`,
+})
+class Host {
+  loading = signal(true);
+  calls = 0;
+}
+
+describe("Shared Button states", () => {
+  it("on mobile blocks repeated submissions during loading and preserves the accessible action name", () => {
+    TestBed.configureTestingModule({
+      providers: [{ provide: DesktopLayoutService, useValue: { desktop: signal(false) } }],
+    });
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+    const buttons: HTMLButtonElement[] = [...fixture.nativeElement.querySelectorAll("button")];
+    buttons.forEach(button => {
+      button.click();
+      expect(button.disabled).toBe(true);
+      expect(button.getAttribute("aria-busy")).toBe("true");
+    });
+    expect(buttons[0].textContent).toContain("Сохранить");
+    expect(fixture.componentInstance.calls).toBe(0);
+    fixture.componentInstance.loading.set(false);
+    fixture.detectChanges();
+    buttons.forEach(button => button.click());
+    expect(fixture.componentInstance.calls).toBe(2);
+  });
+  it("keeps both historical import paths on the same Angular class", () => {
+    expect(LegacyButton).toBe(ButtonComponent);
+  });
+});
diff --git a/projects/ui/src/lib/components/primitives/button/button.component.html b/projects/ui/src/lib/components/primitives/button/button.component.html
index ff459c0ff..e957938d8 100644
--- a/projects/ui/src/lib/components/primitives/button/button.component.html
+++ b/projects/ui/src/lib/components/primitives/button/button.component.html
@@ -21,13 +21,19 @@
     'button--big--icon': size() === 'big' && type() === 'icon',
   }"
   [style.background-color]="backgroundColor()"
-  [disabled]="disabled()"
+  [disabled]="disabled() || (!releaseDesktop() && loader())"
+  [attr.aria-busy]="loader() || null"
 >
+  <span
+    class="button__label"
+    [style.display]="releaseDesktop() ? (loader() ? 'none' : 'contents') : null"
+    [style.visibility]="!releaseDesktop() && loader() ? 'hidden' : null"
+  >
+    <ng-content></ng-content>
+  </span>
   @if (loader()) {
-    <app-loader [color]="appearance() === 'inline' ? 'white' : 'gray'"></app-loader>
-  } @else {
-    <ng-container>
-      <ng-content></ng-content>
-    </ng-container>
+    <span class="button__loader" [style.display]="releaseDesktop() ? 'contents' : null">
+      <app-loader [color]="appearance() === 'inline' ? 'white' : 'gray'"></app-loader>
+    </span>
   }
 </button>
diff --git a/projects/ui/src/lib/components/primitives/button/button.component.scss b/projects/ui/src/lib/components/primitives/button/button.component.scss
index 6c27a701c..da7f7a29c 100644
--- a/projects/ui/src/lib/components/primitives/button/button.component.scss
+++ b/projects/ui/src/lib/components/primitives/button/button.component.scss
@@ -1,6 +1,6 @@
 /** @format */
-
 @use "styles/typography";
+@use "styles/ui-foundation";
 
 .button {
   position: relative;
@@ -161,3 +161,36 @@
     }
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :host {
+    display: inline-block;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .button {
+    @include ui-foundation.button;
+
+    &__content {
+      display: inline-flex;
+      gap: var(--ui-space-sm);
+      align-items: center;
+      justify-content: center;
+      min-width: 0;
+    }
+
+    &__content--loading {
+      opacity: 0;
+    }
+
+    &__loader {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
diff --git a/projects/ui/src/lib/components/primitives/button/button.component.ts b/projects/ui/src/lib/components/primitives/button/button.component.ts
index 190f91ea1..a63495f12 100644
--- a/projects/ui/src/lib/components/primitives/button/button.component.ts
+++ b/projects/ui/src/lib/components/primitives/button/button.component.ts
@@ -1,8 +1,12 @@
 /** @format */
 
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../services/desktop-layout.service";
+
+import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { LoaderComponent } from "../loader/loader.component";
+import { DesktopLayoutService } from "../../../services/desktop-layout.service";
 
 @Component({
   selector: "app-button",
@@ -12,6 +16,10 @@ import { LoaderComponent } from "../loader/loader.component";
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
+  variant = input<"primary" | "secondary" | "danger">();
   color = input<"primary" | "red" | "grey" | "green" | "gold" | "gradient" | "white">("primary");
   loader = input(false);
   size = input<"extra-small" | "small" | "medium" | "big">("small");
@@ -21,4 +29,10 @@ export class ButtonComponent {
   backgroundColor = input<string>();
   disabled = input(false);
   customTypographyClass = input<string>();
+  protected readonly effectiveColor = computed(() =>
+    this.variant() === "danger" ? "red" : this.color(),
+  );
+  protected readonly effectiveAppearance = computed(() =>
+    this.variant() === "secondary" ? "outline" : this.appearance(),
+  );
 }
diff --git a/projects/ui/src/lib/components/primitives/button/button.directive.ts b/projects/ui/src/lib/components/primitives/button/button.directive.ts
new file mode 100644
index 000000000..95740d350
--- /dev/null
+++ b/projects/ui/src/lib/components/primitives/button/button.directive.ts
@@ -0,0 +1,18 @@
+/** @format */
+
+import { booleanAttribute, Directive, input } from "@angular/core";
+
+/** Native adapter for the same Button foundation; keeps form semantics and HTMLElement refs. */
+@Directive({
+  selector: "button[appButton]",
+  host: {
+    "[class]": "'ui-button ui-button--' + appButton()",
+    "[disabled]": "disabled() || appButtonLoading()",
+    "[attr.aria-busy]": "appButtonLoading() || null",
+  },
+})
+export class ButtonDirective {
+  readonly appButton = input<"primary" | "secondary" | "danger" | "icon" | "text">("secondary");
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly appButtonLoading = input(false, { transform: booleanAttribute });
+}
diff --git a/projects/ui/src/lib/components/primitives/icon/icon.component.html b/projects/ui/src/lib/components/primitives/icon/icon.component.html
index d2c1bc46f..d96e145a1 100644
--- a/projects/ui/src/lib/components/primitives/icon/icon.component.html
+++ b/projects/ui/src/lib/components/primitives/icon/icon.component.html
@@ -1,10 +1,30 @@
 <!-- @format -->
-
-<svg
-  class="icon"
-  [attr.width]="square || width"
-  [attr.height]="square || height"
-  [attr.viewBox]="viewBox"
->
-  <use [attr.xlink:href]="'assets/icons/symbol/svg/sprite.css.svg#' + icon()"></use>
-</svg>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <svg
+    class="icon"
+    [attr.width]="square || width"
+    [attr.height]="square || height"
+    [attr.viewBox]="viewBox"
+  >
+    <use [attr.xlink:href]="'assets/icons/symbol/svg/sprite.css.svg#' + icon()"></use>
+  </svg>
+} @else {
+  <svg
+    class="icon"
+    [attr.width]="
+      square ||
+      width ||
+      (desktopLayout() ? null : size() === 'small' ? '16' : size() === 'large' ? '24' : '20')
+    "
+    [attr.height]="
+      square ||
+      height ||
+      (desktopLayout() ? null : size() === 'small' ? '16' : size() === 'large' ? '24' : '20')
+    "
+    [attr.viewBox]="viewBox || (desktopLayout() ? null : '0 0 24 24')"
+    aria-hidden="true"
+  >
+    <use [attr.xlink:href]="'assets/icons/symbol/svg/sprite.css.svg#' + icon()"></use>
+  </svg>
+}
diff --git a/projects/ui/src/lib/components/primitives/icon/icon.component.scss b/projects/ui/src/lib/components/primitives/icon/icon.component.scss
index a65e3dafc..2c76c1446 100644
--- a/projects/ui/src/lib/components/primitives/icon/icon.component.scss
+++ b/projects/ui/src/lib/components/primitives/icon/icon.component.scss
@@ -7,3 +7,12 @@
   max-width: 100%;
   max-height: 100%;
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :host {
+    display: inline-flex;
+    flex: 0 0 auto;
+    vertical-align: middle;
+  }
+}
diff --git a/projects/ui/src/lib/components/primitives/icon/icon.component.ts b/projects/ui/src/lib/components/primitives/icon/icon.component.ts
index 44867fc38..4a7e9a607 100644
--- a/projects/ui/src/lib/components/primitives/icon/icon.component.ts
+++ b/projects/ui/src/lib/components/primitives/icon/icon.component.ts
@@ -1,6 +1,17 @@
 /** @format */
 
-import { ChangeDetectionStrategy, Component, input, Input, type OnInit } from "@angular/core";
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../services/desktop-layout.service";
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+  Input,
+  type OnInit,
+} from "@angular/core";
+import { DesktopLayoutService } from "../../../services/desktop-layout.service";
 
 /**
  * Компонент для отображения SVG иконок из спрайта
@@ -32,6 +43,9 @@ import { ChangeDetectionStrategy, Component, input, Input, type OnInit } from "@
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class IconComponent implements OnInit {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  protected readonly desktopLayout = inject(DesktopLayoutService).desktop;
   /**
    * Устанавливает размер квадратной иконки
    * Автоматически создает viewBox если он не задан
@@ -99,6 +113,7 @@ export class IconComponent implements OnInit {
 
   /** Название иконки из спрайта (обязательный параметр) */
   readonly icon = input.required<string>();
+  readonly size = input<"small" | "medium" | "large">("medium");
 
   /** Внутреннее хранение размера квадратной иконки */
   square?: string;
diff --git a/projects/ui/src/lib/components/primitives/index.ts b/projects/ui/src/lib/components/primitives/index.ts
index 077d123bf..8195c91ab 100644
--- a/projects/ui/src/lib/components/primitives/index.ts
+++ b/projects/ui/src/lib/components/primitives/index.ts
@@ -17,3 +17,8 @@ export * from "./back/back.component";
 export * from "./button/button.component";
 export * from "./icon/icon.component";
 export * from "./loader/loader.component";
+
+export * from "./button/button.directive";
+export * from "./tabs/tabs.component";
+export * from "./pagination/pagination.component";
+export * from "./badge/badge.component";
diff --git a/projects/ui/src/lib/components/primitives/loader/loader.component.html b/projects/ui/src/lib/components/primitives/loader/loader.component.html
index efd04ffbc..6a508c504 100644
--- a/projects/ui/src/lib/components/primitives/loader/loader.component.html
+++ b/projects/ui/src/lib/components/primitives/loader/loader.component.html
@@ -1,35 +1,70 @@
 <!-- @format -->
-<div>
-  @if (type() === "wave") {
-    <div
-      class="dot-wave"
-      [style]="
-        '--speed:' +
-        speed() +
-        ';' +
-        '--size:' +
-        size() +
-        ';' +
-        '--color:' +
-        'var(--' +
-        color() +
-        ');'
-      "
-    >
-      <div class="dot-wave__dot"></div>
-      <div class="dot-wave__dot"></div>
-      <div class="dot-wave__dot"></div>
-      <div class="dot-wave__dot"></div>
-    </div>
-  } @else if (type() === "circle") {
-    <div
-      class="lds-ring"
-      [style]="'--size:' + size() + ';' + '--color:' + 'var(--' + color() + ');'"
-    >
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-  }
-</div>
+<!-- Desktop сохраняет production-разметку; адаптив ниже 1000px. -->
+@if (releaseDesktop()) {
+  <div>
+    @if (type() === "wave") {
+      <div
+        class="dot-wave"
+        [style]="
+          '--speed:' +
+          speed() +
+          ';' +
+          '--size:' +
+          size() +
+          ';' +
+          '--color:' +
+          'var(--' +
+          color() +
+          ');'
+        "
+      >
+        <div class="dot-wave__dot"></div>
+        <div class="dot-wave__dot"></div>
+        <div class="dot-wave__dot"></div>
+        <div class="dot-wave__dot"></div>
+      </div>
+    } @else if (type() === "circle") {
+      <div
+        class="lds-ring"
+        [style]="'--size:' + size() + ';' + '--color:' + 'var(--' + color() + ');'"
+      >
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    }
+  </div>
+} @else {
+  <div>
+    @if (type() === "wave") {
+      <div
+        class="dot-wave"
+        [style]="
+          '--speed:' +
+          speed() +
+          ';' +
+          '--size:' +
+          size() +
+          ';' +
+          '--color:' +
+          'var(--' +
+          color() +
+          ');'
+        "
+      >
+        <div class="dot-wave__dot"></div>
+        <div class="dot-wave__dot"></div>
+        <div class="dot-wave__dot"></div>
+        <div class="dot-wave__dot"></div>
+      </div>
+    } @else if (type() === "circle") {
+      <div class="lds-ring" [style]="'--size:' + size() + ';' + '--color:' + resolvedColor() + ';'">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    }
+  </div>
+}
diff --git a/projects/ui/src/lib/components/primitives/loader/loader.component.scss b/projects/ui/src/lib/components/primitives/loader/loader.component.scss
index 291ab39ff..4a8bce4c9 100644
--- a/projects/ui/src/lib/components/primitives/loader/loader.component.scss
+++ b/projects/ui/src/lib/components/primitives/loader/loader.component.scss
@@ -1,3 +1,5 @@
+/** @format */
+
 .dot-wave {
   --size: 47px;
   --speed: 1s;
@@ -89,3 +91,18 @@
     transform: rotate(360deg);
   }
 }
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  .lds-ring div {
+    margin: calc(var(--size) * 0.1);
+    border: max(2px, calc(var(--size) * 0.08)) solid var(--color);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dot-wave__dot,
+    .lds-ring div {
+      animation-duration: 2s;
+    }
+  }
+}
diff --git a/projects/ui/src/lib/components/primitives/loader/loader.component.ts b/projects/ui/src/lib/components/primitives/loader/loader.component.ts
index fb7181de7..0cab1e1c3 100644
--- a/projects/ui/src/lib/components/primitives/loader/loader.component.ts
+++ b/projects/ui/src/lib/components/primitives/loader/loader.component.ts
@@ -1,7 +1,24 @@
 /** @format */
 
-import { ChangeDetectionStrategy, Component, input, Input, OnInit } from "@angular/core";
+import { inject as injectReleaseLayout } from "@angular/core";
+import { DesktopLayoutService as ReleaseDesktopLayoutService } from "../../../services/desktop-layout.service";
 
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+
+/**
+ * Компонент индикатора загрузки с настраиваемым внешним видом.
+ * Поддерживает различные типы анимации и настройки цвета, размера, скорости.
+ *
+ * Входящие параметры:
+ * - speed: скорость анимации (по умолчанию "1s")
+ * - size: размер индикатора (по умолчанию "47px")
+ * - color: цвет индикатора (по умолчанию "white")
+ * - type: тип анимации ("wave" | "circle", по умолчанию "wave")
+ *
+ * Использование:
+ * - Для показа состояния загрузки в кнопках, формах и других элементах
+ * - Настраиваемый размер и цвет под дизайн приложения
+ */
 @Component({
   selector: "app-loader",
   templateUrl: "./loader.component.html",
@@ -9,11 +26,23 @@ import { ChangeDetectionStrategy, Component, input, Input, OnInit } from "@angul
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LoaderComponent implements OnInit {
-  readonly speed = input<string>("1s");
-  readonly size = input<string>("15px");
-  readonly color = input<string>("white");
-  readonly type = input<"wave" | "circle">("circle");
+export class LoaderComponent {
+  protected readonly releaseDesktop = injectReleaseLayout(ReleaseDesktopLayoutService).desktop;
+
+  /** Скорость анимации */
+  speed = input("1s");
+
+  /** Размер индикатора */
+  size = input("15px");
+
+  /** Цвет индикатора */
+  color = input("white");
 
-  ngOnInit(): void {}
+  /** Тип анимации */
+  type = input<"wave" | "circle">("circle");
+  protected readonly resolvedColor = computed(() =>
+    /^(?:var\(|#|rgb|hsl|currentColor|transparent)/.test(this.color())
+      ? this.color()
+      : `var(--${this.color()})`,
+  );
 }
diff --git a/projects/ui/src/lib/components/primitives/pagination/pagination.component.ts b/projects/ui/src/lib/components/primitives/pagination/pagination.component.ts
new file mode 100644
index 000000000..11160fc5e
--- /dev/null
+++ b/projects/ui/src/lib/components/primitives/pagination/pagination.component.ts
@@ -0,0 +1,50 @@
+/** @format */
+
+import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
+import { ButtonDirective } from "../button/button.directive";
+
+@Component({
+  selector: "app-pagination",
+  imports: [ButtonDirective],
+  template: `<nav class="pagination" aria-label="Страницы">
+    <button
+      type="button"
+      appButton="secondary"
+      [disabled]="previousDisabled() || loading()"
+      (click)="previous.emit()"
+    >
+      {{ previousLabel() }}
+    </button>
+    <span aria-live="polite"><ng-content /></span>
+    <button
+      type="button"
+      appButton="secondary"
+      [disabled]="nextDisabled() || loading()"
+      (click)="next.emit()"
+    >
+      {{ nextLabel() }}
+    </button>
+  </nav>`,
+  styles: `
+    .pagination {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ui-space-sm);
+      align-items: center;
+      justify-content: flex-end;
+      margin-top: var(--ui-space-md);
+      font-size: var(--ui-font-small);
+      color: var(--ui-text-muted);
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PaginationComponent {
+  readonly previousDisabled = input(false);
+  readonly nextDisabled = input(false);
+  readonly loading = input(false);
+  readonly previousLabel = input("Назад");
+  readonly nextLabel = input("Далее");
+  readonly previous = output<void>();
+  readonly next = output<void>();
+}
diff --git a/projects/ui/src/lib/components/primitives/tabs/tabs.component.scss b/projects/ui/src/lib/components/primitives/tabs/tabs.component.scss
new file mode 100644
index 000000000..3d598741f
--- /dev/null
+++ b/projects/ui/src/lib/components/primitives/tabs/tabs.component.scss
@@ -0,0 +1,64 @@
+/** @format */
+
+// Адаптив из dev применяется только ниже desktop breakpoint.
+@media screen and (max-width: 999px) {
+  :host {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .tabs {
+    display: flex;
+    gap: var(--ui-space-sm);
+    max-width: 100%;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+
+    &__item {
+      display: inline-flex;
+      flex: 0 0 auto;
+      gap: var(--ui-space-sm);
+      align-items: center;
+      justify-content: center;
+      min-height: var(--ui-control-height);
+      padding: 10px 16px;
+      font: inherit;
+      font-size: var(--ui-font-body);
+      color: var(--ui-text-muted);
+      white-space: nowrap;
+      cursor: pointer;
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: var(--ui-radius-control);
+
+      &:hover:not(:disabled) {
+        color: var(--ui-accent);
+        background: var(--accent-light);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--accent-dark);
+        outline-offset: -2px;
+      }
+
+      &--active {
+        color: var(--ui-accent);
+        background: var(--accent-light);
+        border-color: var(--ui-accent);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: var(--ui-disabled-opacity);
+      }
+    }
+
+    &__count {
+      padding: 2px 6px;
+      font-size: var(--ui-font-caption);
+      background: var(--ui-surface);
+      border-radius: var(--ui-radius-control);
+    }
+  }
+}
diff --git a/projects/ui/src/lib/components/primitives/tabs/tabs.component.ts b/projects/ui/src/lib/components/primitives/tabs/tabs.component.ts
new file mode 100644
index 000000000..8a09e8757
--- /dev/null
+++ b/projects/ui/src/lib/components/primitives/tabs/tabs.component.ts
@@ -0,0 +1,66 @@
+/** @format */
+
+import { ChangeDetectionStrategy, Component, input, output } from "@angular/core";
+import { RouterLink, RouterLinkActive } from "@angular/router";
+import { IconComponent } from "../icon/icon.component";
+
+export interface TabItem {
+  link?: string;
+  linkText: string;
+  isRouterLinkActiveOptions?: boolean;
+  iconName?: string;
+  count?: number;
+  disabled?: boolean;
+  id?: string;
+}
+
+@Component({
+  selector: "app-tabs",
+  imports: [RouterLink, RouterLinkActive, IconComponent],
+  template: `
+    <nav class="tabs" [attr.aria-label]="label()">
+      @for (item of items(); track $index) {
+        @if (item.link && !item.disabled) {
+          <a
+            class="tabs__item"
+            [routerLink]="item.link"
+            routerLinkActive="tabs__item--active"
+            [routerLinkActiveOptions]="{ exact: !!item.isRouterLinkActiveOptions }"
+            ariaCurrentWhenActive="page"
+          >
+            @if (item.iconName) {
+              <i appIcon [icon]="item.iconName" appSquare="16" aria-hidden="true"></i>
+            }
+            {{ item.linkText }}
+            @if (showCounts() && item.count !== undefined) {
+              <span class="tabs__count">{{ item.count }}</span>
+            }
+          </a>
+        } @else {
+          <button
+            type="button"
+            class="tabs__item"
+            [class.tabs__item--active]="active() === (item.id || item.linkText)"
+            [disabled]="item.disabled"
+            [attr.aria-pressed]="active() === (item.id || item.linkText)"
+            (click)="selected.emit(item.id || item.linkText)"
+          >
+            @if (item.iconName) {
+              <i appIcon [icon]="item.iconName" appSquare="16" aria-hidden="true"></i>
+            }
+            {{ item.linkText }}
+          </button>
+        }
+      }
+    </nav>
+  `,
+  styleUrl: "./tabs.component.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TabsComponent {
+  readonly items = input.required<TabItem[]>();
+  readonly showCounts = input(false);
+  readonly label = input("Разделы");
+  readonly active = input<string>();
+  readonly selected = output<string>();
+}
diff --git a/projects/ui/src/lib/services/desktop-layout.service.ts b/projects/ui/src/lib/services/desktop-layout.service.ts
new file mode 100644
index 000000000..bcc9215da
--- /dev/null
+++ b/projects/ui/src/lib/services/desktop-layout.service.ts
@@ -0,0 +1,17 @@
+/** @format */
+
+import { inject, Injectable } from "@angular/core";
+import { BreakpointObserver } from "@angular/cdk/layout";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { map } from "rxjs";
+
+/** Presentation boundary shared by legacy desktop and responsive templates. */
+@Injectable({ providedIn: "root" })
+export class DesktopLayoutService {
+  readonly desktop = toSignal(
+    inject(BreakpointObserver)
+      .observe("(min-width: 1000px)")
+      .pipe(map(state => state.matches)),
+    { initialValue: typeof window !== "undefined" && window.innerWidth >= 1000 },
+  );
+}
diff --git a/projects/ui/src/public-api.ts b/projects/ui/src/public-api.ts
index c9d818175..79516470f 100644
--- a/projects/ui/src/public-api.ts
+++ b/projects/ui/src/public-api.ts
@@ -18,3 +18,4 @@
 
 // Экспортируем все компоненты из папки components
 export * from "./lib/components";
+export * from "./lib/services/desktop-layout.service";