diff --git a/backend/package-lock.json b/backend/package-lock.json
index eac38f1..0a2317a 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -1271,9 +1271,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
-      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.1.tgz",
+      "integrity": "sha512-FNvFGzoMLWmE6Yj9spb/zjd7yiNCHiAW9/Tg9CXrQ8wuu32HtlJOwWO11OJafl5FfY3DxTdQ0vj42zU1kvv5jg==",
       "funding": [
         {
           "type": "individual",
diff --git a/e2e/tests/assistants.e2e.mjs b/e2e/tests/assistants.e2e.mjs
index dce6df5..cd21063 100644
--- a/e2e/tests/assistants.e2e.mjs
+++ b/e2e/tests/assistants.e2e.mjs
@@ -97,11 +97,23 @@ test("Chat: mobile não transborda e o campo de pergunta é acessível por tecla
     await page.goto(`${APP}/chat`);
     await expect(page.getByLabel("Sua pergunta")).toBeVisible();
     await assertNoHorizontalOverflow(page, "chat mobile");
-    await page.getByRole("button", { name: "Nova conversa" }).focus();
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    const focused = await page.evaluate(() => document.activeElement?.id || document.activeElement?.tagName);
-    assert.ok(focused);
+    const sidebarToggle = page.getByRole("button", { name: "Conversas e projeto", exact: true });
+    await expect(sidebarToggle).toHaveAttribute("aria-expanded", "false");
+    assert.equal(await page.getByRole("button", { name: "Nova conversa", exact: true }).isVisible(), false);
+    await sidebarToggle.focus();
+    await page.keyboard.press("Enter");
+    await expect(page.getByRole("button", { name: "Ocultar conversas e projeto", exact: true })).toHaveAttribute("aria-expanded", "true");
+    await expect(page.getByRole("button", { name: "Nova conversa", exact: true })).toBeVisible();
+    await page.keyboard.press("Enter");
+    await expect(sidebarToggle).toHaveAttribute("aria-expanded", "false");
+    for (let step = 0; step < 12; step += 1) {
+      await page.keyboard.press("Tab");
+      if (await page.evaluate(() => document.activeElement?.id === "chat-question")) break;
+    }
+    assert.equal(await page.evaluate(() => document.activeElement?.id), "chat-question");
+    await page.keyboard.type("Pergunta digitada pelo teclado");
+    assert.equal(await page.getByLabel("Sua pergunta").inputValue(), "Pergunta digitada pelo teclado");
+    await assertNoHorizontalOverflow(page, "chat mobile com painel recolhido");
   } finally {
     await context.close();
   }
diff --git a/e2e/tests/hierarchy-ui.e2e.mjs b/e2e/tests/hierarchy-ui.e2e.mjs
index 72a8730..ac700cd 100644
--- a/e2e/tests/hierarchy-ui.e2e.mjs
+++ b/e2e/tests/hierarchy-ui.e2e.mjs
@@ -45,7 +45,7 @@ test("Épico → feature → PBI pela interface: validação, qualidade em tempo
     await expect(page.getByText("Login válido")).toBeVisible();
 
     await page.getByRole("button", { name: "Marcar como concluído" }).click();
-    await expect(page.getByText(/Concluído/i).first()).toBeVisible();
+    await expect(page.getByText("concluido", { exact: true }).first()).toBeVisible();
   } finally {
     await context.close();
   }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7757b3a..ec626a4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -18,15 +18,17 @@ export const App: React.FC = () => {
   const { session, logout } = useAuth();
   const [pathname, setPathname] = useState(window.location.pathname);
 
+  const [menuOpen, setMenuOpen] = useState(false);
+
   const isAdmin = session.user?.role === "admin";
   const activeTab = isProjectPath(pathname)
     ? "projects"
     : (Object.keys(routes) as Array<keyof typeof routes>).find((key) => routes[key] === pathname) || "projects";
 
-  const setActiveTab = (tab: keyof typeof routes) => navigate(routes[tab]);
+  const setActiveTab = (tab: keyof typeof routes) => { setMenuOpen(false); navigate(routes[tab]); };
 
   useEffect(() => {
-    const update = () => setPathname(window.location.pathname);
+    const update = () => { setPathname(window.location.pathname); setMenuOpen(false); };
     window.addEventListener("popstate", update);
     return () => window.removeEventListener("popstate", update);
   }, []);
@@ -38,7 +40,8 @@ export const App: React.FC = () => {
           S<b>•</b>NAPSE
         </a>
 
-        <nav className="nav-links" aria-label="Navegação principal">
+        <Button className="mobile-menu-toggle" variant="secondary" aria-expanded={menuOpen} aria-controls="main-navigation" onClick={() => setMenuOpen(value => !value)}>Menu</Button>
+        <nav id="main-navigation" className={`nav-links ${menuOpen ? "is-open" : ""}`} aria-label="Navegação principal">
           <button
             onClick={() => setActiveTab("projects")}
             className={activeTab === "projects" ? "active" : ""}
diff --git a/frontend/src/assets/styles/chat.css b/frontend/src/assets/styles/chat.css
index a926404..c1724e4 100644
--- a/frontend/src/assets/styles/chat.css
+++ b/frontend/src/assets/styles/chat.css
@@ -46,3 +46,13 @@
   .chat-conversations { max-height: 200px; }
   .chat-message { max-width: 100%; }
 }
+
+.chat-sidebar-toggle { display: none; }
+
+@media (max-width: 900px) {
+  .chat-sidebar-toggle { display: inline-flex; margin: 16px 0 0; }
+  .chat-sidebar { display: none; }
+  .chat-sidebar.is-open { display: flex; }
+  .chat-thread { min-height: 400px; }
+  .chat-messages { min-height: 180px; max-height: 55dvh; }
+}
diff --git a/frontend/src/assets/styles/projects.css b/frontend/src/assets/styles/projects.css
index 13c7622..a74e667 100644
--- a/frontend/src/assets/styles/projects.css
+++ b/frontend/src/assets/styles/projects.css
@@ -107,7 +107,7 @@
   gap: 20px;
 }
 
-.project-card {
+.ds-card.project-card {
   padding: 24px;
   display: grid;
   gap: 12px;
@@ -140,7 +140,7 @@
   overflow: hidden;
 }
 
-.projects-state {
+.ds-card.projects-state {
   padding: 40px 24px;
   display: grid;
   justify-items: center;
@@ -148,7 +148,7 @@
   text-align: center;
 }
 
-.project-form {
+.ds-card.project-form {
   max-width: 720px;
   padding: 28px;
   display: grid;
@@ -681,3 +681,235 @@
       rgba(36, 190, 219, 0);
   }
 }
+
+.app-content > .projects-page {
+  max-width: 1320px;
+  margin-inline: auto;
+  padding: 40px;
+}
+
+.project-card > .ds-badge {
+  justify-self: start;
+}
+
+@media (max-width: 640px) {
+  .app-content > .projects-page {
+    padding: 24px 16px;
+  }
+}
+.app-content > .projects-page {
+  max-width: 1200px;
+}
+
+.ds-card.quality-panel {
+  padding: 24px;
+  border-left-color: var(--brand-primary);
+}
+
+.quality-checklist {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.quality-check-item {
+  grid-template-columns: 22px minmax(0, 1fr);
+  padding: 16px;
+}
+
+.quality-check-action {
+  grid-column: 2;
+}
+
+.quality-badge-tag.satisfied {
+  color: #86efac;
+  background: rgba(34, 197, 94, .1);
+  border: 1px solid rgba(34, 197, 94, .25);
+}
+
+.pbi-story-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin: 8px 0;
+}
+
+.pbi-story-field {
+  min-width: 0;
+  padding: 18px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, .025);
+}
+
+.project-card .pbi-story-field dt {
+  margin: 0 0 10px;
+  font-size: .75rem;
+  letter-spacing: .04em;
+  font-weight: 600;
+}
+
+.pbi-story-field dd {
+  margin: 0;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.projects-page > .projects-page > .projects-grid {
+  grid-template-columns: minmax(0, 1fr);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.project-card dl dd {
+  margin-inline-start: 0;
+  line-height: 1.6;
+}
+
+@media (max-width: 760px) {
+  .quality-checklist,
+  .pbi-story-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .ds-card.quality-panel,
+  .ds-card.project-card {
+    padding: 20px;
+  }
+
+  .projects-heading {
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+}
+
+.ds-card.item-history-panel {
+  padding: 28px;
+  display: grid;
+  gap: 18px;
+}
+
+.history-list {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0 0 0 24px;
+  border-left: 1px solid var(--border-subtle);
+  display: grid;
+  gap: 20px;
+}
+
+.history-item-card {
+  position: relative;
+  min-width: 0;
+  padding: 22px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  background: rgba(10, 13, 20, .45);
+}
+
+.history-item-card::before {
+  content: "";
+  position: absolute;
+  top: 27px;
+  left: -30px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--brand-primary);
+  box-shadow: 0 0 0 4px var(--bg-card);
+}
+
+.history-entry-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px 16px;
+  align-items: center;
+}
+
+.history-entry-header time {
+  color: var(--text-secondary);
+  font-size: .8rem;
+}
+
+.history-entry-action {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin: 10px 0 18px;
+}
+
+.history-action-label {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--brand-primary);
+}
+
+.history-change-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0 0 18px;
+}
+
+.history-change-list > div {
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, .025);
+  border: 1px solid var(--border-subtle);
+  min-width: 0;
+}
+
+.history-change-list dt {
+  font-size: .75rem;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.history-change-list dd {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 1.6;
+}
+
+.history-justification {
+  border-left: 3px solid var(--brand-primary);
+  padding: 12px 16px;
+  background: rgba(249, 115, 22, .06);
+  border-radius: 6px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+.history-no-justification {
+  color: var(--text-secondary);
+  font-size: .8rem;
+  line-height: 1.5;
+}
+
+@media (max-width: 640px) {
+  .ds-card.item-history-panel { padding: 20px 16px; }
+  .history-list { padding-left: 18px; }
+  .history-item-card { padding: 16px; }
+  .history-item-card::before { left: -24px; }
+  .history-change-list { grid-template-columns: minmax(0, 1fr); }
+}
+
+.project-filter { margin-block: 8px; }
+.project-field textarea { min-height: 88px; }
+.project-form .project-actions { padding-top: 8px; border-top: 1px solid var(--border-subtle); }
+.project-filter select { min-height: 44px; }
+.project-filters { margin-bottom: 24px; }
+
+.projects-page select {
+  min-width: 0;
+  min-height: 44px;
+  max-width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font: inherit;
+}
diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
index e628614..1a1838a 100644
--- a/frontend/src/styles/components.css
+++ b/frontend/src/styles/components.css
@@ -201,10 +201,18 @@
 }
 
 .ds-card--glass {
-  padding: 0;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: var(--shadow-md);
   transition: border-color var(--transition-normal);
 }
 .ds-card--glass:hover { border-color: var(--border-active); }
+
+:where(button, a, input, select, textarea, summary):focus-visible {
+  outline: 2px solid var(--accent-secondary);
+  outline-offset: 3px;
+}
+
+@media (max-width: 640px) {
+  .ds-button { min-height: 44px; }
+}
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
index de4ad12..e8fa605 100644
--- a/frontend/src/styles/layout.css
+++ b/frontend/src/styles/layout.css
@@ -508,3 +508,39 @@ h2 {
 .app-user-actions { display: flex; align-items: center; gap: var(--space-3); }
 .app-sign-out { min-height: 34px; padding: 0 var(--space-3); font-size: .8rem; }
 .app-content { flex: 1; }
+
+.mobile-menu-toggle { display: none; }
+
+@media (max-width: 820px) {
+  .mobile-menu-toggle { display: inline-flex; margin-left: auto; }
+  .top-header .nav-links { display: none; overflow: visible; }
+  .top-header .nav-links.is-open {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    padding: 8px 0;
+  }
+  .top-header .nav-links button { min-height: 44px; text-align: left; }
+  .top-header .app-user-actions { margin-left: 0; }
+}
+
+.landing-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.landing-hero {
+  padding: 48px 36px;
+  text-align: center;
+  background: linear-gradient(135deg, rgba(237, 106, 50, .1), var(--bg-card));
+}
+
+@media (max-width: 640px) {
+  .landing-page { padding: 24px 16px; gap: 24px; }
+  .landing-hero { padding: 28px 20px; }
+  .head-section { flex-wrap: wrap; gap: 16px; }
+}
diff --git a/frontend/src/views/backlog/EpicsView.tsx b/frontend/src/views/backlog/EpicsView.tsx
index 25a22cf..ddd8748 100644
--- a/frontend/src/views/backlog/EpicsView.tsx
+++ b/frontend/src/views/backlog/EpicsView.tsx
@@ -42,7 +42,7 @@ export function EpicList({ projetoId, canCreate: allowedToCreate }: { projetoId:
         <div><p className="projects-eyebrow">Épicos do projeto</p><h3>Épicos</h3></div>
         {canCreate && <Button variant="primary" onClick={() => navigate(`/projects/${projetoId}/epics/new`)}>Novo épico</Button>}
       </div>
-      <label>Exibir itens <select value={status} onChange={event => setStatus(event.target.value)}><option value="">Não arquivados</option><option value="arquivado">Arquivados</option><option value="todos">Todos</option></select></label>
+      <label className="project-filter">Exibir itens <select value={status} onChange={event => setStatus(event.target.value)}><option value="">Não arquivados</option><option value="arquivado">Arquivados</option><option value="todos">Todos</option></select></label>
       {result.state === "loading" && <div className="ds-card ds-card--glass projects-state" role="status">Carregando épicos…</div>}
       {result.state === "error" && <div className="ds-card ds-card--glass projects-state"><p role="alert">{result.message}</p>
         <Button variant="secondary" onClick={() => setAttempt((v) => v + 1)}>Tentar novamente</Button></div>}
@@ -98,7 +98,7 @@ export function EpicForm({ projetoId }: { projetoId: string }) {
           <div className="project-field" key={field}>
             <label htmlFor={field}>{label}{field === "titulo" && " (obrigatório)"}</label>
             {kind === "textarea"
-              ? <textarea id={field} name={field} rows={3} disabled={busy} value={values[field]} onChange={(e) => setValues((v) => ({ ...v, [field]: e.target.value }))} />
+              ? <textarea id={field} name={field} rows={2} disabled={busy} value={values[field]} onChange={(e) => setValues((v) => ({ ...v, [field]: e.target.value }))} />
               : <input id={field} name={field} type="text" disabled={busy} value={values[field]} onChange={(e) => setValues((v) => ({ ...v, [field]: e.target.value }))} />}
           </div>
         ))}
@@ -212,7 +212,7 @@ export function EpicDetail({ projectId, epicId, canEdit, children }: { projectId
               <div className="project-field" key={field}>
                 <label htmlFor={`edit-${field}`}>{label}</label>
                 {kind === "textarea"
-                  ? <textarea id={`edit-${field}`} rows={3} disabled={saving} value={formValues[field] ?? ""} onChange={(e) => setFormValues((v) => v && { ...v, [field]: e.target.value })} />
+                  ? <textarea id={`edit-${field}`} rows={2} disabled={saving} value={formValues[field] ?? ""} onChange={(e) => setFormValues((v) => v && { ...v, [field]: e.target.value })} />
                   : <input id={`edit-${field}`} type="text" disabled={saving} value={formValues[field] ?? ""} onChange={(e) => setFormValues((v) => v && { ...v, [field]: e.target.value })} />}
               </div>
             ))}
diff --git a/frontend/src/views/backlog/FeaturesView.tsx b/frontend/src/views/backlog/FeaturesView.tsx
index 3ef0fb1..2891d68 100644
--- a/frontend/src/views/backlog/FeaturesView.tsx
+++ b/frontend/src/views/backlog/FeaturesView.tsx
@@ -42,7 +42,7 @@ export function FeatureList({ projectId, epicoId, canCreate: allowedToCreate }:
         <div><p className="projects-eyebrow">Features do épico</p><h3>Features</h3></div>
         {canCreate && <Button variant="primary" onClick={() => navigate(`/projects/${projectId}/epics/${epicoId}/features/new`)}>Nova feature</Button>}
       </div>
-      <label>Exibir itens <select value={status} onChange={event => setStatus(event.target.value)}><option value="">Não arquivados</option><option value="arquivado">Arquivados</option><option value="todos">Todos</option></select></label>
+      <label className="project-filter">Exibir itens <select value={status} onChange={event => setStatus(event.target.value)}><option value="">Não arquivados</option><option value="arquivado">Arquivados</option><option value="todos">Todos</option></select></label>
       {result.state === "loading" && <div className="ds-card ds-card--glass projects-state" role="status">Carregando features…</div>}
       {result.state === "error" && <div className="ds-card ds-card--glass projects-state"><p role="alert">{result.message}</p>
         <Button variant="secondary" onClick={() => setAttempt((v) => v + 1)}>Tentar novamente</Button></div>}
@@ -95,7 +95,7 @@ export function FeatureForm({ projectId, epicoId }: { projectId: string; epicoId
           <div className="project-field" key={field}>
             <label htmlFor={field}>{label}{field === "titulo" && " (obrigatório)"}</label>
             {kind === "textarea"
-              ? <textarea id={field} name={field} rows={3} disabled={busy} value={values[field]} onChange={(e) => setValues((v) => ({ ...v, [field]: e.target.value }))} />
+              ? <textarea id={field} name={field} rows={2} disabled={busy} value={values[field]} onChange={(e) => setValues((v) => ({ ...v, [field]: e.target.value }))} />
               : <input id={field} name={field} type="text" disabled={busy} value={values[field]} onChange={(e) => setValues((v) => ({ ...v, [field]: e.target.value }))} />}
           </div>
         ))}
@@ -198,7 +198,7 @@ export function FeatureDetail({ projectId, epicoId, featureId, canEdit, children
               <div className="project-field" key={field}>
                 <label htmlFor={`edit-${field}`}>{label}</label>
                 {kind === "textarea"
-                  ? <textarea id={`edit-${field}`} rows={3} disabled={saving} value={formValues[field] ?? ""} onChange={(e) => setFormValues((v) => v && { ...v, [field]: e.target.value })} />
+                  ? <textarea id={`edit-${field}`} rows={2} disabled={saving} value={formValues[field] ?? ""} onChange={(e) => setFormValues((v) => v && { ...v, [field]: e.target.value })} />
                   : <input id={`edit-${field}`} type="text" disabled={saving} value={formValues[field] ?? ""} onChange={(e) => setFormValues((v) => v && { ...v, [field]: e.target.value })} />}
               </div>
             ))}
diff --git a/frontend/src/views/backlog/ItemHistoryView.tsx b/frontend/src/views/backlog/ItemHistoryView.tsx
index 008bfe8..e8672ae 100644
--- a/frontend/src/views/backlog/ItemHistoryView.tsx
+++ b/frontend/src/views/backlog/ItemHistoryView.tsx
@@ -3,6 +3,14 @@ import { getItemHistory, type AuditHistoryItem } from "../../api/api_backlog";
 import { describeAuditChanges } from "../../models/auditChanges";
 import { Button } from "../common/ui";
 
+const actionLabels: Record<string, string> = {
+  CRIAR_EPICO: "Épico criado", ATUALIZAR_EPICO: "Épico atualizado", CONCLUIR_EPICO: "Épico concluído",
+  CRIAR_FEATURE: "Feature criada", ATUALIZAR_FEATURE: "Feature atualizada", CONCLUIR_FEATURE: "Feature concluída",
+  CRIAR_PBI: "PBI criado", ATUALIZAR_PBI: "PBI atualizado", CONCLUIR_PBI: "PBI concluído",
+  ADICIONAR_CRITERIO: "Critério adicionado", REMOVER_CRITERIO: "Critério removido",
+  MOVER_CRITERIO: "Critério reordenado", REGISTRAR_DECISAO: "Decisão registrada",
+};
+
 export interface ItemHistoryViewProps {
   entidadeTipo: "epico" | "feature" | "pbi";
   entidadeId: string;
@@ -130,13 +138,13 @@ export function ItemHistoryView({
       <div className="quality-panel-body">
         <p className="quality-help-text">
           Estes registros contêm o histórico de justificativas e alterações deste item.
-          <em>Nota: Decisões de negócio e deliberações técnicas são registradas no módulo de Decisões.</em>
+           <em>Nota: Decisões de negócio e deliberações técnicas são registradas no módulo de Decisões.</em>
         </p>
 
         {history.length === 0 ? (
           <p className="projects-state">Nenhum registro de alteração encontrado para este item.</p>
         ) : (
-          <ul className="history-list" role="list" style={{ listStyle: "none", padding: 0, marginTop: "1rem" }}>
+          <ul className="history-list" role="list">
             {history.map((item) => {
               const changes = describeAuditChanges({
                 ...item.dados_json,
@@ -146,22 +154,15 @@ export function ItemHistoryView({
                 <li
                   key={item.id}
                   className="history-item-card"
-                  style={{
-                    border: "1px solid rgba(255, 255, 255, 0.1)",
-                    borderRadius: "8px",
-                    padding: "1rem",
-                    marginBottom: "0.75rem",
-                    background: "rgba(10, 13, 20, 0.6)",
-                  }}
                 >
-                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "0.5rem" }}>
+                  <div className="history-entry-header">
                     <strong>{item.usuario_nome || "Usuário não identificado"}</strong>
-                    <span style={{ fontSize: "0.85rem", opacity: 0.7 }}>
+                    <time dateTime={item.created_at}>
                       {new Date(item.created_at).toLocaleString("pt-BR")}
-                    </span>
+                    </time>
                   </div>
-                  <div style={{ fontSize: "0.9rem", marginBottom: "0.5rem" }}>
-                    <span className="ds-badge ds-badge--brand" style={{ marginRight: "0.5rem" }}>{item.acao}</span>
+                  <div className="history-entry-action">
+                    <span className="history-action-label" title={item.acao}>{actionLabels[item.acao] ?? item.acao.replace(/_/g, " ").toLocaleLowerCase("pt-BR")}</span>
                     {item.pbi_versao !== null && item.pbi_versao !== undefined && (
                       <span className="ds-badge ds-badge--brand">Versão {item.pbi_versao}</span>
                     )}
@@ -181,11 +182,11 @@ export function ItemHistoryView({
                     </dl>
                   )}
                   {item.justificativa ? (
-                    <div className="history-justification" style={{ background: "rgba(249, 115, 22, 0.1)", borderLeft: "3px solid #F97316", padding: "0.5rem 0.75rem", borderRadius: "4px" }}>
+                    <div className="history-justification">
                       <strong>Justificativa da alteração:</strong> {item.justificativa}
                     </div>
                   ) : (
-                    <div style={{ fontSize: "0.85rem", fontStyle: "italic", opacity: 0.6 }}>
+                    <div className="history-no-justification">
                       Sem justificativa registrada (alteração em rascunho ou sem exigência).
                     </div>
                   )}
diff --git a/frontend/src/views/backlog/PbiDetail.tsx b/frontend/src/views/backlog/PbiDetail.tsx
index 431246b..45ce2c2 100644
--- a/frontend/src/views/backlog/PbiDetail.tsx
+++ b/frontend/src/views/backlog/PbiDetail.tsx
@@ -632,32 +632,32 @@ export function PbiDetail({
           )
           : (
             <>
-              <dl>
-                <dt>COMO UM <ProvenanceBadge provenance={pbi!.provenance_json} field="historia_como_um" /></dt>
+              <dl className="pbi-story-grid">
+                <div className="pbi-story-field"><dt>COMO UM <ProvenanceBadge provenance={pbi!.provenance_json} field="historia_como_um" /></dt>
                 <dd
                   id="historia_como_um"
                   tabIndex={-1}
                 >
                   {pbi!.historia_como_um}
-                </dd>
+                </dd></div>
 
-                <dt>EU QUERO <ProvenanceBadge provenance={pbi!.provenance_json} field="historia_eu_quero" /></dt>
+                <div className="pbi-story-field"><dt>EU QUERO <ProvenanceBadge provenance={pbi!.provenance_json} field="historia_eu_quero" /></dt>
                 <dd
                   id="historia_eu_quero"
                   tabIndex={-1}
                 >
                   {pbi!.historia_eu_quero}
-                </dd>
+                </dd></div>
 
-                <dt>PARA QUE <ProvenanceBadge provenance={pbi!.provenance_json} field="historia_para_que" /></dt>
+                <div className="pbi-story-field"><dt>PARA QUE <ProvenanceBadge provenance={pbi!.provenance_json} field="historia_para_que" /></dt>
                 <dd
                   id="historia_para_que"
                   tabIndex={-1}
                 >
                   {pbi!.historia_para_que}
-                </dd>
+                </dd></div>
 
-                <dt>
+                <div className="pbi-story-field"><dt>
                   Exige interface/protótipo
                 </dt>
                 <dd
@@ -667,14 +667,14 @@ export function PbiDetail({
                   {pbi!.requer_interface
                     ? "Sim"
                     : "Não"}
-                </dd>
+                </dd></div>
 
-                <dt>
+                <div className="pbi-story-field"><dt>
                   Cenários de aceitação registrados
                 </dt>
                 <dd>
                   {pbi!.criterios_count}
-                </dd>
+                </dd></div>
               </dl>
 
               {!readOnly && canEdit && (
diff --git a/frontend/src/views/backlog/QualityPanelView.tsx b/frontend/src/views/backlog/QualityPanelView.tsx
index 6587bf5..635d2ba 100644
--- a/frontend/src/views/backlog/QualityPanelView.tsx
+++ b/frontend/src/views/backlog/QualityPanelView.tsx
@@ -148,12 +148,12 @@ export function QualityPanelView({
                         </strong>
 
                         {check.is_blocking ? (
-                          <span className="quality-badge-tag blocking">
-                            Bloqueia conclusão
+                          <span className={`quality-badge-tag ${check.passed ? "satisfied" : "blocking"}`}>
+                            {check.passed ? "Obrigatório · Atendido" : "Bloqueia conclusão"}
                           </span>
                         ) : (
-                          <span className="quality-badge-tag alert">
-                            Alerta informativo
+                          <span className={`quality-badge-tag ${check.passed ? "satisfied" : "alert"}`}>
+                            {check.passed ? "Informativo · Atendido" : "Alerta informativo"}
                           </span>
                         )}
                       </div>
diff --git a/frontend/src/views/backlog/RequirementsView.tsx b/frontend/src/views/backlog/RequirementsView.tsx
index 8d5dd96..0b2de03 100644
--- a/frontend/src/views/backlog/RequirementsView.tsx
+++ b/frontend/src/views/backlog/RequirementsView.tsx
@@ -43,12 +43,6 @@ export const RequirementsView: React.FC<{ canCreate?: boolean }> = ({ canCreate
             Visualize a estrutura completa de Épicos, Features e PBIs com critérios de aceitação BDD.
           </p>
         </div>
-
-        {selectedProjectId && canCreate && (
-          <Button variant="primary" onClick={() => navigate(`/projects/${selectedProjectId}/epics/new`)}>
-            + Novo Épico
-          </Button>
-        )}
       </div>
 
       {loading ? (
diff --git a/frontend/src/views/chat/ChatView.tsx b/frontend/src/views/chat/ChatView.tsx
index bb78db6..1c3503e 100644
--- a/frontend/src/views/chat/ChatView.tsx
+++ b/frontend/src/views/chat/ChatView.tsx
@@ -28,6 +28,7 @@ interface ThreadMessage extends ChatMessage {
 type LoadState = "idle" | "loading" | "error";
 
 export function ChatView() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   const [conversations, setConversations] = useState<ChatConversation[]>([]);
   const [conversationsState, setConversationsState] = useState<LoadState>("loading");
   const [projects, setProjects] = useState<ProjectOption[]>([]);
@@ -208,8 +209,9 @@ export function ChatView() {
         </div>
       </header>
 
+      <Button className="chat-sidebar-toggle" variant="secondary" aria-expanded={sidebarOpen} aria-controls="chat-sidebar" onClick={() => setSidebarOpen(value => !value)}>{sidebarOpen ? "Ocultar conversas e projeto" : "Conversas e projeto"}</Button>
       <div className="chatx-layout">
-        <aside className="ds-card chat-sidebar" aria-label="Conversas">
+        <aside id="chat-sidebar" className={`ds-card chat-sidebar ${sidebarOpen ? "is-open" : ""}`} aria-label="Conversas">
           <Button onClick={startNewConversation}>Nova conversa</Button>
 
           <div className="ds-field">
@@ -246,7 +248,7 @@ export function ChatView() {
                     type="button"
                     className="chat-conversation"
                     aria-current={conversation.id === activeId}
-                    onClick={() => openConversation(conversation)}
+                    onClick={() => { openConversation(conversation); setSidebarOpen(false); }}
                   >
                     <span className="chat-conversation-title">{conversation.titulo}</span>
                     <span className="chat-conversation-meta">
diff --git a/frontend/src/views/landing/LandingPageView.tsx b/frontend/src/views/landing/LandingPageView.tsx
index 249b984..7ae11ec 100644
--- a/frontend/src/views/landing/LandingPageView.tsx
+++ b/frontend/src/views/landing/LandingPageView.tsx
@@ -5,11 +5,11 @@ import { navigate } from "../../models/navigation";
 
 export const LandingPageView: React.FC = () => {
     return (
-        <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "20px 0", display: "flex", flexDirection: "column", gap: "48px" }}>
+        <div className="landing-page">
 
             {/* Hero Section */}
-            <div className="ds-card ds-card--glass" style={{ padding: "48px 36px", textAlign: "center", background: "linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%)", border: "1px solid var(--border-subtle)" }}>
-                <div style={{ display: "inline-flex", alignItems: "center", gap: "8px", background: "rgba(99, 102, 241, 0.15)", padding: "6px 16px", borderRadius: "20px", color: "var(--accent-primary)", fontSize: "0.85rem", fontWeight: 600, marginBottom: "20px" }}>
+            <div className="ds-card ds-card--glass landing-hero">
+                <div style={{ display: "inline-flex", alignItems: "center", gap: "8px", background: "var(--brand-surface)", padding: "6px 16px", borderRadius: "20px", color: "var(--accent-primary)", fontSize: "0.85rem", fontWeight: 600, marginBottom: "20px" }}>
                     <Sparkles size={16} /> A Memória Inteligente da Fábrica de Software
                 </div>
                 <h1 style={{ fontSize: "2.5rem", fontWeight: 800, color: "#fff", marginBottom: "16px", lineHeight: 1.2 }}>
@@ -35,7 +35,7 @@ export const LandingPageView: React.FC = () => {
                     <p style={{ color: "var(--text-secondary)", fontSize: "0.95rem" }}>Tudo o que sua equipe precisa para padronizar entregas com inteligência contextual.</p>
                 </div>
 
-                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "24px" }}>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 300px), 1fr))", gap: "24px" }}>
                     <div className="ds-card ds-card--glass" style={{ padding: "28px" }}>
                         <div style={{ color: "var(--accent-primary)", marginBottom: "16px" }}><BookOpen size={28} /></div>
                         <h3 style={{ fontSize: "1.15rem", fontWeight: 600, color: "#fff", marginBottom: "8px" }}>Hierarquia Estruturada</h3>
diff --git a/frontend/src/views/projects/ProjectsView.tsx b/frontend/src/views/projects/ProjectsView.tsx
index 2645d60..8b2d957 100644
--- a/frontend/src/views/projects/ProjectsView.tsx
+++ b/frontend/src/views/projects/ProjectsView.tsx
@@ -180,6 +180,44 @@ export function ProjectsView({
         )}
       </div>
 
+      {!isDetail && (
+        <div
+          className="project-filters"
+
+        >
+          <SearchField
+            label="Buscar projetos"
+            value={search}
+            onChange={setSearch}
+            placeholder="Nome, cliente ou descrição"
+          />
+
+          <label className="project-filter">
+            Exibir projetos
+
+            <select
+              value={status}
+              onChange={(event) => {
+                setStatus(event.target.value);
+                setOffset(0);
+              }}
+            >
+              <option value="">
+                Não arquivados
+              </option>
+
+              <option value="arquivado">
+                Arquivados
+              </option>
+
+              <option value="todos">
+                Todos
+              </option>
+            </select>
+          </label>
+        </div>
+      )}
+
       {result.state === "loading" && (
         <div
           className="ds-card"
@@ -386,44 +424,6 @@ export function ProjectsView({
           </div>
         ))}
 
-      {!isDetail && (
-        <div
-          className="project-filters"
-          style={{ marginTop: "24px" }}
-        >
-          <SearchField
-            label="Buscar projetos"
-            value={search}
-            onChange={setSearch}
-            placeholder="Nome, cliente ou descrição"
-          />
-
-          <label className="project-filter">
-            Exibir projetos
-
-            <select
-              value={status}
-              onChange={(event) => {
-                setStatus(event.target.value);
-                setOffset(0);
-              }}
-            >
-              <option value="">
-                Não arquivados
-              </option>
-
-              <option value="arquivado">
-                Arquivados
-              </option>
-
-              <option value="todos">
-                Todos
-              </option>
-            </select>
-          </label>
-        </div>
-      )}
-
       {!isDetail && !isNew && (
         <nav
           className="project-actions"