diff --git a/deploy/keycloak/themes/synapse/login/resources/css/synapse.css b/deploy/keycloak/themes/synapse/login/resources/css/synapse.css
index 950d7fb..79389da 100644
--- a/deploy/keycloak/themes/synapse/login/resources/css/synapse.css
+++ b/deploy/keycloak/themes/synapse/login/resources/css/synapse.css
@@ -66,7 +66,7 @@ body.synapse-login-page {
 .synapse-trust li span { color: #d15c17; font-size: 1rem; }
 
 /* Ajustes no Card de Login baseados no Figma */
-.synapse-card { width: 480px; max-width: 480px; height: 667px; align-self: center; justify-self: end; padding: 3rem 2.25rem 2rem; border: 1px solid rgb(220 193 183 / 50%); border-radius: 24px; color: #2e1a10; background: #fff; box-shadow: 0 30px 70px -15px rgb(30 20 17 / 12%), 0 0 0 1px rgb(220 193 183 / 35%); }
+.synapse-card { width: 480px; max-width: 480px; height: 600px; align-self: center; justify-self: end; padding: 3rem 2.25rem 2rem; border: 1px solid rgb(220 193 183 / 50%); border-radius: 24px; color: #2e1a10; background: #fff; box-shadow: 0 30px 70px -15px rgb(30 20 17 / 12%), 0 0 0 1px rgb(220 193 183 / 35%); }
 .synapse-card-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid #fce8db; border-radius: .5rem; color: #c65a0d; background: #fff4ed; }
 .synapse-card-icon svg { width: 1.2rem; height: 1.2rem; }
 .synapse-card h2 { margin: .95rem 0 .35rem; font-family: Georgia, Cambria, serif; font-size: clamp(1.65rem, 2vw, 2rem); font-weight: 400; letter-spacing: -.02em; }
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
deleted file mode 100644
index df36fcf..0000000
Binary files a/frontend/public/favicon.ico and /dev/null differ
diff --git a/frontend/public/synapse.ico b/frontend/public/synapse.ico
new file mode 100644
index 0000000..2cc0862
Binary files /dev/null and b/frontend/public/synapse.ico differ
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 8b3b60b..e56a7a7 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -7,4 +7,18 @@ body,
   min-width: 100%;
   min-height: 100%;
   margin: 0;
+  overflow-x: clip;
+}
+
+/*
+ * O monitor de referência tem 1920px CSS (120rem a 16px). Um notebook com
+ * escala de 125% normalmente disponibiliza entre 1200px e 1600px CSS; ao
+ * tornar o rem proporcional nessa faixa, a composição ganha a mesma presença
+ * visual do desktop de referência e continua fluida, sem canvas fixo ou
+ * rolagem horizontal.
+ */
+@media (min-resolution: 1.25dppx) and (min-width: 75rem) and (max-width: 100rem) {
+  html {
+    font-size: calc(100vw / 110);
+  }
 }
diff --git a/frontend/src/components/TheProcessHeader.spec.ts b/frontend/src/components/TheProcessHeader.spec.ts
new file mode 100644
index 0000000..0bc95d8
--- /dev/null
+++ b/frontend/src/components/TheProcessHeader.spec.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import TheProcessHeader from './TheProcessHeader.vue'
+
+const opcoesDeMontagem = {
+  global: {
+    plugins: [createPinia()],
+  },
+}
+
+describe('TheProcessHeader', () => {
+  it('marca a entrada de regra como etapa atual', () => {
+    const conteiner = mount(TheProcessHeader, { ...opcoesDeMontagem, props: { etapaDaRota: 'voz-texto' } })
+
+    expect(conteiner.get('li[aria-current="step"]').text()).toContain('Voz/Texto')
+  })
+
+  it('associa os estados intermediários à simulação enquanto a conversa não possui tela própria', () => {
+    const conteiner = mount(TheProcessHeader, {
+      ...opcoesDeMontagem,
+      props: { etapaDaRota: 'simulacao', statusDoJob: 'aguardando_confirmacao_parametros' },
+    })
+
+    expect(conteiner.get('li[aria-current="step"]').text()).toContain('Simulação')
+    expect(conteiner.text()).not.toContain('Conversa')
+  })
+
+  it('indica o salvamento em toda a tela de finalização, mesmo durante uma transição de status', () => {
+    const conteiner = mount(TheProcessHeader, {
+      ...opcoesDeMontagem,
+      props: { etapaDaRota: 'salvar', statusDoJob: 'simulacao_inviavel' },
+    })
+
+    expect(conteiner.get('li[aria-current="step"]').text()).toContain('Salvar')
+  })
+
+  it('não exibe o progresso de uma nova regra no histórico', () => {
+    const conteiner = mount(TheProcessHeader, { ...opcoesDeMontagem, props: { etapaDaRota: null } })
+
+    expect(conteiner.find('[aria-label="Etapas do processo"]').exists()).toBe(false)
+    expect(conteiner.find('[aria-label^="Etapa atual:"]').exists()).toBe(false)
+  })
+
+  it('mantém um indicador textual acessível fora do desktop', () => {
+    const conteiner = mount(TheProcessHeader, { ...opcoesDeMontagem, props: { etapaDaRota: 'simulacao' } })
+    const indicador = conteiner.get('[aria-label="Etapa atual: Simulação"]')
+
+    expect(indicador.text()).toContain('Etapa: Simulação')
+    expect(indicador.classes()).toContain('xl:hidden')
+  })
+
+  it('usa um ícone reconhecível para abrir o menu de perfil', () => {
+    const conteiner = mount(TheProcessHeader, { ...opcoesDeMontagem, props: { etapaDaRota: 'voz-texto' } })
+    const menuDePerfil = conteiner.get('summary[aria-label="Abrir menu de perfil"]')
+
+    expect(menuDePerfil.find('svg').attributes('viewBox')).toBe('0 0 24 24')
+    expect(menuDePerfil.text()).not.toContain('U')
+  })
+})
diff --git a/frontend/src/components/TheProcessHeader.vue b/frontend/src/components/TheProcessHeader.vue
index 131ec08..3806c75 100644
--- a/frontend/src/components/TheProcessHeader.vue
+++ b/frontend/src/components/TheProcessHeader.vue
@@ -1,10 +1,50 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import type { StatusJob } from '@/types/api'
 import { usarStoreSessao } from '@/stores/session'
 
+type EtapaDoProcesso = 'voz-texto' | 'simulacao' | 'salvar'
+
+const props = defineProps<{
+  etapaDaRota: EtapaDoProcesso | null
+  statusDoJob?: StatusJob | null
+}>()
+
 const sessao = usarStoreSessao()
 const saindoDaConta = ref(false)
 
+const rotulosDasEtapas: Record<EtapaDoProcesso, string> = {
+  'voz-texto': 'Voz/Texto',
+  simulacao: 'Simulação',
+  salvar: 'Salvar',
+}
+
+const etapasPorStatus: Partial<Record<StatusJob, EtapaDoProcesso>> = {
+  aguardando_transcricao: 'voz-texto',
+  aguardando_confirmacao_parametros: 'simulacao',
+  gerando_regra: 'simulacao',
+  simulando: 'simulacao',
+  simulacao_inviavel: 'simulacao',
+  aguardando_decisao_usuario: 'simulacao',
+  liberado: 'salvar',
+}
+
+const etapaAtual = computed<EtapaDoProcesso | null>(() => {
+  if (props.statusDoJob === undefined) return props.etapaDaRota
+
+  if (props.etapaDaRota === 'salvar') {
+    return 'salvar'
+  }
+
+  return props.statusDoJob ? (etapasPorStatus[props.statusDoJob] ?? null) : null
+})
+
+const rotuloDaEtapaAtual = computed(() => (etapaAtual.value ? rotulosDasEtapas[etapaAtual.value] : ''))
+
+function etapaEstaAtiva(etapa: EtapaDoProcesso): boolean {
+  return etapaAtual.value === etapa
+}
+
 async function sairDaConta(): Promise<void> {
   saindoDaConta.value = true
   try {
@@ -16,48 +56,67 @@ async function sairDaConta(): Promise<void> {
 </script>
 
 <template>
-  <header class="flex h-[clamp(2.5rem,7vh,4rem)] items-center gap-6 border-b border-[#ebd8cc] bg-[#fffaf7] px-6 lg:px-8">
-    <div class="flex shrink-0 gap-2" aria-label="Indicadores da janela">
-      <span class="size-3 rounded-full bg-[#ff625c]"></span>
-      <span class="size-3 rounded-full bg-[#ffbd2e]"></span>
-      <span class="size-3 rounded-full bg-[#27c840]"></span>
-    </div>
+  <header class="flex h-14 items-center gap-3 border-b border-[#ebd8cc] bg-[#fffaf7] px-4 sm:gap-6 sm:px-6 lg:h-16 lg:px-8">
 
-    <ol class="hidden min-w-0 flex-1 items-center justify-center gap-3 text-sm xl:flex" aria-label="Etapas do processo">
-      <li class="flex shrink-0 items-center gap-2.5 font-medium text-[#c2560b]">
-        <span class="grid size-[34px] place-items-center rounded-full border-[1.5px] border-[#c2560b]" aria-hidden="true">
+    <ol v-if="etapaAtual" class="hidden min-w-0 flex-1 items-center justify-center gap-3 text-sm xl:flex" aria-label="Etapas do processo">
+      <li
+        class="flex shrink-0 items-center gap-2.5"
+        :class="etapaEstaAtiva('voz-texto') ? 'font-medium text-[#c2560b]' : 'text-[#a79489]'"
+        :aria-current="etapaEstaAtiva('voz-texto') ? 'step' : undefined"
+      >
+        <span
+          class="grid size-[2.125rem] place-items-center rounded-full"
+          :class="etapaEstaAtiva('voz-texto') ? 'border-[0.09375rem] border-[#c2560b]' : 'border-[0.0625rem] border-[#e5d3c8]'"
+          aria-hidden="true"
+        >
           <svg class="size-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><rect x="7.25" y="2.75" width="5.5" height="9.5" rx="2.75" /><path d="M4.75 9.5a5.25 5.25 0 0 0 10.5 0M10 14.75v2.5" /></svg>
         </span>
         Voz/Texto
       </li>
       <li class="h-px min-w-6 flex-1 bg-[#e5d3c8]" aria-hidden="true"></li>
-      <li class="flex shrink-0 items-center gap-2.5 text-[#a79489]">
-        <span class="grid size-[34px] place-items-center rounded-full border border-[#e5d3c8]" aria-hidden="true">
-          <svg class="size-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"><path d="M3.25 6.25a2.5 2.5 0 0 1 2.5-2.5h8.5a2.5 2.5 0 0 1 2.5 2.5v5a2.5 2.5 0 0 1-2.5 2.5H8l-4.75 3.25z" /></svg>
-        </span>
-        Conversa
-      </li>
-      <li class="h-px min-w-6 flex-1 bg-[#e5d3c8]" aria-hidden="true"></li>
-      <li class="flex shrink-0 items-center gap-2.5 text-[#a79489]">
-        <span class="grid size-[34px] place-items-center rounded-full border border-[#e5d3c8]" aria-hidden="true">
+      <li
+        class="flex shrink-0 items-center gap-2.5"
+        :class="etapaEstaAtiva('simulacao') ? 'font-medium text-[#c2560b]' : 'text-[#a79489]'"
+        :aria-current="etapaEstaAtiva('simulacao') ? 'step' : undefined"
+      >
+        <span
+          class="grid size-[2.125rem] place-items-center rounded-full"
+          :class="etapaEstaAtiva('simulacao') ? 'border-[0.09375rem] border-[#c2560b]' : 'border-[0.0625rem] border-[#e5d3c8]'"
+          aria-hidden="true"
+        >
           <svg class="size-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"><circle cx="10" cy="10" r="7.25" /><path d="M8.25 7.1 13 10l-4.75 2.9z" /></svg>
         </span>
         Simulação
       </li>
       <li class="h-px min-w-6 flex-1 bg-[#e5d3c8]" aria-hidden="true"></li>
-      <li class="flex shrink-0 items-center gap-2.5 text-[#a79489]">
-        <span class="grid size-[34px] place-items-center rounded-full border border-[#e5d3c8]" aria-hidden="true">
+      <li
+        class="flex shrink-0 items-center gap-2.5"
+        :class="etapaEstaAtiva('salvar') ? 'font-medium text-[#c2560b]' : 'text-[#a79489]'"
+        :aria-current="etapaEstaAtiva('salvar') ? 'step' : undefined"
+      >
+        <span
+          class="grid size-[2.125rem] place-items-center rounded-full"
+          :class="etapaEstaAtiva('salvar') ? 'border-[0.09375rem] border-[#c2560b]' : 'border-[0.0625rem] border-[#e5d3c8]'"
+          aria-hidden="true"
+        >
           <svg class="size-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"><path d="M3.75 5.25a1.5 1.5 0 0 1 1.5-1.5h7.5l3 3v8a1.5 1.5 0 0 1-1.5 1.5h-9a1.5 1.5 0 0 1-1.5-1.5z" /><path d="M6.75 3.75v4h6.5M6.75 16.25v-4h6.5v4" /></svg>
         </span>
         Salvar
       </li>
     </ol>
 
+    <p
+      v-if="etapaAtual"
+      class="min-w-0 flex-1 truncate text-center text-xs font-medium text-[#6b564a] sm:text-sm xl:hidden"
+      :aria-label="`Etapa atual: ${rotuloDaEtapaAtual}`"
+      aria-live="polite"
+    >
+      Etapa: {{ rotuloDaEtapaAtual }}
+    </p>
+
     <details class="relative ml-auto shrink-0">
-      <summary class="flex cursor-pointer list-none items-center gap-2 rounded-full border border-[#ead4c7] bg-white/80 py-1 pr-2 pl-1.5 text-sm text-[#5e473b] transition hover:bg-white [&::-webkit-details-marker]:hidden">
-        <span class="grid size-7 place-items-center rounded-full bg-[#6d4030] text-xs font-semibold text-white" aria-hidden="true">U</span>
-        <span class="hidden lg:block">Perfil</span>
-        <svg class="size-3 text-[#9c8174]" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><path d="M2 4.25h8L6 9z" /></svg>
+      <summary aria-label="Abrir menu de perfil" class="grid size-8 cursor-pointer list-none place-items-center rounded-full bg-[#6d4030] text-white transition hover:bg-[#512d20] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2560b] [&::-webkit-details-marker]:hidden">
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="8" r="3.25" /><path d="M5.75 20c.55-3.27 2.94-5.25 6.25-5.25s5.7 1.98 6.25 5.25" /></svg>
       </summary>
       <div class="absolute top-[calc(100%+.5rem)] right-0 z-10 w-52 rounded-lg border border-[#ead4c7] bg-white p-3 shadow-[0_12px_30px_-12px_rgba(60,30,15,0.35)]">
         <p class="text-sm font-semibold text-[#2e1a10]">Perfil do usuário</p>
diff --git a/frontend/src/components/TheSidebar.vue b/frontend/src/components/TheSidebar.vue
index 8649c0e..31721a9 100644
--- a/frontend/src/components/TheSidebar.vue
+++ b/frontend/src/components/TheSidebar.vue
@@ -23,7 +23,7 @@ withDefaults(
 </script>
 
 <template>
-  <aside class="flex min-h-full flex-col bg-[#3b2318] px-5 py-[clamp(.75rem,2.5vh,1.25rem)] text-[#f6eae3]">
+  <aside class="flex h-full min-h-0 flex-col overflow-y-auto bg-[#3b2318] p-5 text-[#f6eae3]">
     <div class="flex items-center gap-3">
       <img :src="simboloSynapse" alt="" class="size-9 object-contain" aria-hidden="true" />
       <span class="font-serif text-xl font-bold tracking-tight">Synapse</span>
@@ -31,7 +31,7 @@ withDefaults(
 
     <RouterLink
       to="/nova-regra"
-      class="mt-[clamp(.75rem,2vh,1.5rem)] flex h-[clamp(2.25rem,5vh,2.75rem)] items-center justify-center gap-2 rounded-[10px] bg-[#f26b0f] text-sm font-medium text-white transition hover:bg-[#d95c08]"
+      class="mt-6 flex h-11 items-center justify-center gap-2 rounded-[.625rem] bg-[#f26b0f] text-sm font-medium text-white transition hover:bg-[#d95c08]"
     >
       <svg class="size-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
         <path d="M8 3.5v9M3.5 8h9" />
@@ -41,11 +41,11 @@ withDefaults(
 
     <section class="mt-4" aria-labelledby="titulo-recentes">
       <h2 id="titulo-recentes" class="text-sm font-normal text-[#c7afa3]">Recentes</h2>
-      <ul class="mt-3 space-y-[clamp(.35rem,1.1vh,.625rem)]">
+      <ul class="mt-3 space-y-2">
         <li v-for="regra in regrasRecentes" :key="regra.identificador">
           <RouterLink
             :to="`/jobs/${regra.identificador}`"
-            class="flex h-[clamp(2rem,4.5vh,2.5rem)] items-center rounded-[10px] bg-[#4d3125] px-4 text-sm text-[#eaddd5] transition hover:bg-[#5a3b2c]"
+            class="flex h-10 items-center rounded-[.625rem] bg-[#4d3125] px-4 text-sm text-[#eaddd5] transition hover:bg-[#5a3b2c]"
           >
             {{ regra.rotulo }}
           </RouterLink>
@@ -58,7 +58,7 @@ withDefaults(
 
     <nav class="mt-auto border-t border-[#5a3e31] pt-3" aria-label="Organização de regras">
       <RouterLink to="/salvas" class="flex items-center gap-3 rounded-lg px-2 py-2.5 text-sm text-[#d6bdb0] transition hover:bg-[#4d3125]" :class="{ 'bg-[#4d3125] text-white': secaoAtiva === 'salvas' }">
-        <svg class="size-[18px] shrink-0" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+        <svg class="size-[1.125rem] shrink-0" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
           <rect x="2.75" y="3.75" width="14.5" height="12.5" rx="2.25" />
           <path d="M2.75 8h14.5M7.5 8v8.25" />
         </svg>
@@ -66,7 +66,7 @@ withDefaults(
         <span class="rounded-full bg-[#4d3125] px-2 py-0.5 text-xs text-[#d6bdb0]">{{ quantidadeSalvas }}</span>
       </RouterLink>
       <RouterLink to="/arquivadas" class="flex items-center gap-3 rounded-lg px-2 py-2.5 text-sm text-[#d6bdb0] transition hover:bg-[#4d3125]" :class="{ 'bg-[#4d3125] text-white': secaoAtiva === 'arquivadas' }">
-        <svg class="size-[18px] shrink-0" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+        <svg class="size-[1.125rem] shrink-0" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
           <rect x="2.75" y="3.75" width="14.5" height="12.5" rx="2.25" />
           <path d="M2.75 8h14.5M7.5 8v8.25" />
         </svg>
diff --git a/frontend/src/features/finish/views/FinishView.vue b/frontend/src/features/finish/views/FinishView.vue
index 9b38524..f9e8974 100644
--- a/frontend/src/features/finish/views/FinishView.vue
+++ b/frontend/src/features/finish/views/FinishView.vue
@@ -136,20 +136,21 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div v-if="alerta" class="fixed top-5 z-50 px-6 py-3 rounded-lg border-2 shadow-md font-bold" :class="alerta.tipo === 'sucesso' ? 'bg-green-50 border-green-300 text-green-700' : 'bg-red-50 border-red-300 text-red-700'">
+    <div v-if="alerta" class="fixed top-5 left-1/2 z-50 -translate-x-1/2 rounded-lg border-2 px-6 py-3 font-bold shadow-md" :class="alerta.tipo === 'sucesso' ? 'bg-green-50 border-green-300 text-green-700' : 'bg-red-50 border-red-300 text-red-700'">
       {{ alerta.mensagem }}
     </div>
-    <div class="flex flex-row min-h-screen">
-    <TheSidebar class="hidden md:flex w-[15.3%]"/>
-    <div class="flex flex-col bg-[#fdf7f3] w-[84.7%] min-h-screen">
-    <TheProcessHeader class="mb-12" />
-    <div class="flex flex-col w-full justify-center items-center font-['Tinos']">
+    <div class="tela-de-negocio min-h-[100dvh] bg-[#fdf7f3] text-[#2e1a10] lg:grid lg:h-[100dvh] lg:grid-cols-[16rem_minmax(0,1fr)] lg:overflow-hidden">
+    <TheSidebar class="hidden lg:flex"/>
+    <main class="min-w-0 lg:min-h-0 lg:overflow-y-auto">
+    <div class="flex min-w-0 flex-col bg-[#fdf7f3]">
+    <TheProcessHeader etapa-da-rota="salvar" :status-do-job="job?.status ?? null" class="mb-12" />
+    <div class="flex w-full flex-col items-center justify-center px-4 font-['Tinos'] sm:px-6">
         <div class="mb-7">
-            <h1 class="text-4xl font-bold text-center mb-3">Finalizar Regra</h1>
+            <h1 class="mb-3 text-center text-3xl font-bold sm:text-4xl">Finalizar Regra</h1>
             <p class="text-center text-[#584237]">Revise os detalhes da regra extraída e confirme o salvamento.</p>
         </div>
-        <div class="bg-white w-[70%] border-2 border-[#DFC0B2] rounded-xl flex flex-col mb-12">
-            <div class=" pt-8 px-8 pb-4">
+        <div class="mb-12 flex w-full max-w-4xl flex-col rounded-xl border-2 border-[#DFC0B2] bg-white">
+            <div class="px-4 pt-8 pb-4 sm:px-8">
                 <div>
                     <h2 class="font-bold text-2xl mb-2">{{ carregando ? 'Carregando regra...' : tituloRegra }}</h2>
                     <div class="flex flex-row gap-2">
@@ -166,7 +167,7 @@ onUnmounted(() => {
                 </div>
             </div>
             <hr class="self-center mb-4 border border-[#FFDBCD] w-[94%]">
-            <div class="mx-8 mb-8 p-6 bg-[#FFF1EC] border border-[#FFDBCD] rounded-lg text-[#584237]">
+            <div class="mx-4 mb-8 rounded-lg border border-[#FFDBCD] bg-[#FFF1EC] p-4 text-[#584237] sm:mx-8 sm:p-6">
                 <div v-if="carregando" class="flex flex-col items-center justify-center py-8 gap-3">
                     <div class="w-7 h-7 border-4 border-[#FFDBCD] border-t-[#F47521] rounded-full animate-spin"></div>
                         <p class="text-[#584237]">Carregando dados da regra...</p>
@@ -202,12 +203,13 @@ onUnmounted(() => {
                   </div>
                 </div>
               </div>
-        <div class="flex flex-row items-center gap-4 mb-14">
+        <div class="mb-14 flex flex-col items-stretch gap-4 sm:flex-row sm:items-center">
             <button type="button" class="text-[#9D4400] px-9 py-3 rounded-lg border-2 border-[#9D4400] font-bold cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed" :disabled="acaoProcessando !== null || carregando || erroCarregamento || !podeArquivar" @click="executarAcao('arquivar')">{{ acaoProcessando === 'arquivar' ? 'Processando...' : 'Arquivar' }}</button>
             <button type="button" class="bg-[#F47521] text-white font-bold px-9 py-3 rounded-lg cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed" :disabled="acaoProcessando !== null || carregando || erroCarregamento || !podeSalvar" @click="executarAcao('salvar')">{{ acaoProcessando === 'salvar' ? 'Processando...' : 'Salvar' }}</button>
         </div>
     </div>
     </div>
+    </main>
     </div>
 </template>
 
@@ -220,4 +222,4 @@ textarea,
 select {
   font-family: inherit;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/features/formulario-regra/components/CampoDeSelecao.vue b/frontend/src/features/formulario-regra/components/CampoDeSelecao.vue
index 8e48560..73c2584 100644
--- a/frontend/src/features/formulario-regra/components/CampoDeSelecao.vue
+++ b/frontend/src/features/formulario-regra/components/CampoDeSelecao.vue
@@ -20,7 +20,7 @@ const emitir = defineEmits<{ 'update:valor': [valor: string] }>()
         :value="valor"
         :aria-invalid="Boolean(erro)"
         :aria-describedby="erro ? `${id}-erro` : undefined"
-        class="h-[clamp(1.75rem,4vh,2.125rem)] w-full appearance-none rounded-[7px] border bg-[#faf4ef] pr-8 pl-3 text-sm text-[#2e1a10] outline-none transition focus:border-[#c2560b] focus:ring-2 focus:ring-[#f4dcc9]"
+        class="h-[2.125rem] w-full appearance-none rounded-[.4375rem] border bg-[#faf4ef] pr-8 pl-3 text-sm text-[#2e1a10] outline-none transition focus:border-[#c2560b] focus:ring-2 focus:ring-[#f4dcc9]"
         :class="[erro ? 'border-[#c0392b]' : 'border-[#e3d3c9]', compacto ? '' : 'mt-2 h-11 bg-white']"
         @change="emitir('update:valor', ($event.target as HTMLSelectElement).value)"
       >
diff --git a/frontend/src/features/formulario-regra/components/CampoDeTexto.vue b/frontend/src/features/formulario-regra/components/CampoDeTexto.vue
index 7bec64e..d5495cc 100644
--- a/frontend/src/features/formulario-regra/components/CampoDeTexto.vue
+++ b/frontend/src/features/formulario-regra/components/CampoDeTexto.vue
@@ -37,7 +37,7 @@ const emitir = defineEmits<{
         :placeholder="placeholder"
         :aria-describedby="[ajuda ? `${id}-ajuda` : '', erro ? `${id}-erro` : ''].filter(Boolean).join(' ') || undefined"
         :aria-invalid="Boolean(erro)"
-        class="h-[clamp(1.75rem,4vh,2.125rem)] w-full rounded-[7px] border bg-[#faf4ef] px-3 text-sm text-[#2e1a10] outline-none transition placeholder:text-[#b09a8d] focus:border-[#c2560b] focus:ring-2 focus:ring-[#f4dcc9]"
+        class="h-[2.125rem] w-full rounded-[.4375rem] border bg-[#faf4ef] px-3 text-sm text-[#2e1a10] outline-none transition placeholder:text-[#b09a8d] focus:border-[#c2560b] focus:ring-2 focus:ring-[#f4dcc9]"
         :class="[
           erro ? 'border-[#c0392b]' : 'border-[#e3d3c9]',
           prefixo ? 'pl-9' : '',
diff --git a/frontend/src/features/formulario-regra/views/FormularioRegraView.spec.ts b/frontend/src/features/formulario-regra/views/FormularioRegraView.spec.ts
index 82c08a1..36f9b74 100644
--- a/frontend/src/features/formulario-regra/views/FormularioRegraView.spec.ts
+++ b/frontend/src/features/formulario-regra/views/FormularioRegraView.spec.ts
@@ -50,6 +50,16 @@ const opcoesDeMontagem = {
 }
 
 describe('FormularioRegraView', () => {
+  it('mantém somente o título e a descrição no cabeçalho do formulário', () => {
+    const conteiner = mount(FormularioRegraView, opcoesDeMontagem)
+    const cabecalho = conteiner.get('#formulario-regra > header')
+
+    expect(conteiner.get('.tela-de-negocio').classes()).toContain('tela-de-negocio')
+    expect(cabecalho.get('h1').text()).toBe('Capture uma Regra de Negócio')
+    expect(cabecalho.findAll('p')).toHaveLength(1)
+    expect(cabecalho.get('p').text()).toContain('Escreva os parâmetros da regra.')
+  })
+
   it('carrega as regras recentes pela API', async () => {
     const conteiner = mount(FormularioRegraView, opcoesDeMontagem)
 
diff --git a/frontend/src/features/formulario-regra/views/FormularioRegraView.vue b/frontend/src/features/formulario-regra/views/FormularioRegraView.vue
index 9642479..4e36e96 100644
--- a/frontend/src/features/formulario-regra/views/FormularioRegraView.vue
+++ b/frontend/src/features/formulario-regra/views/FormularioRegraView.vue
@@ -81,41 +81,38 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="h-screen overflow-hidden bg-[#fdf7f3] text-[#2e1a10] md:grid md:grid-cols-[clamp(13.5rem,18vw,16.25rem)_1fr] [@media(min-resolution:1.25dppx)]:fixed [@media(min-resolution:1.25dppx)]:top-0 [@media(min-resolution:1.25dppx)]:left-0 [@media(min-resolution:1.25dppx)]:h-[125vh] [@media(min-resolution:1.25dppx)]:w-[125%] [@media(min-resolution:1.25dppx)]:origin-top-left [@media(min-resolution:1.25dppx)]:scale-[.8]">
+  <div class="tela-de-negocio min-h-[100dvh] bg-[#fdf7f3] text-[#2e1a10] lg:grid lg:h-[100dvh] lg:grid-cols-[16rem_minmax(0,1fr)] lg:overflow-hidden">
     <TheSidebar
-      class="hidden md:flex"
+      class="hidden lg:flex"
       :quantidade-arquivadas="quantidadeArquivadas"
       :quantidade-salvas="quantidadeSalvas"
       :regras-recentes="regrasRecentes"
     />
 
-    <main class="flex min-w-0 flex-col bg-[radial-gradient(circle_at_top,#fffdfb_0%,#fdf7f3_48%,#f8eee8_100%)]">
-      <TheProcessHeader />
+    <main class="flex min-w-0 flex-col bg-[radial-gradient(circle_at_top,#fffdfb_0%,#fdf7f3_48%,#f8eee8_100%)] lg:min-h-0 lg:overflow-y-auto">
+      <TheProcessHeader etapa-da-rota="voz-texto" />
 
-      <div id="formulario-regra" class="mx-auto w-full max-w-[660px] px-6 py-[clamp(1rem,5vh,3.5rem)]">
+      <div id="formulario-regra" class="mx-auto w-full max-w-[41.25rem] px-4 py-8 sm:px-6 lg:py-12">
         <header class="text-center">
-          <p class="inline-flex rounded-full border border-[#ead4c7] bg-white/75 px-3 py-1 text-xs font-semibold tracking-[0.14em] text-[#a54809] uppercase">
-            Nova regra
-          </p>
-          <h1 class="mt-3 font-serif text-[clamp(1.75rem,4vh,2.25rem)] leading-tight font-semibold tracking-tight text-[#2e1a10]">
+          <h1 class="font-serif text-3xl leading-tight font-semibold tracking-tight text-[#2e1a10] lg:text-4xl">
             Capture uma Regra de Negócio
           </h1>
           <p class="mt-3 text-base text-[#6b564a]">Escreva os parâmetros da regra. Nós iremos estruturá-la para você.</p>
         </header>
 
         <form
-          class="mx-auto mt-[clamp(1rem,3vh,2.25rem)] max-w-[540px] overflow-hidden rounded-xl border border-[#e7d6cb] bg-white shadow-[0_18px_45px_-24px_rgba(60,30,15,0.42)]"
+          class="mx-auto mt-6 max-w-[33.75rem] overflow-hidden rounded-xl border border-[#e7d6cb] bg-white shadow-[0_18px_45px_-24px_rgba(60,30,15,0.42)]"
           @submit.prevent="submeterFormulario"
         >
           <div
-            class="grid grid-cols-[minmax(0,1fr)_210px] gap-4 border-b border-[#eee2da] bg-[#f8f1ec] px-5 py-[clamp(.5rem,1.5vh,.75rem)] text-sm font-medium text-[#3a241a]"
+            class="grid grid-cols-1 gap-1 border-b border-[#eee2da] bg-[#f8f1ec] px-4 py-2.5 text-sm font-medium text-[#3a241a] sm:grid-cols-[minmax(0,1fr)_13.125rem] sm:gap-4 sm:px-5"
           >
             <span>Parâmetro</span>
             <span>Valor</span>
           </div>
 
           <div class="divide-y divide-[#eee2da]">
-            <div class="grid grid-cols-[minmax(0,1fr)_210px] items-center gap-4 px-5 py-[clamp(.25rem,1vh,.5rem)] transition hover:bg-[#fdf9f6]">
+            <div class="grid grid-cols-1 gap-1 px-4 py-1.5 transition hover:bg-[#fdf9f6] sm:grid-cols-[minmax(0,1fr)_13.125rem] sm:items-center sm:gap-4 sm:px-5">
               <span class="text-sm">Início da vigência</span>
               <CampoDeSelecao
                 id="vigencia-inicio"
@@ -126,7 +123,7 @@ onMounted(() => {
                 compacto
               />
             </div>
-            <div class="grid grid-cols-[minmax(0,1fr)_210px] items-center gap-4 px-5 py-[clamp(.25rem,1vh,.5rem)] transition hover:bg-[#fdf9f6]">
+            <div class="grid grid-cols-1 gap-1 px-4 py-1.5 transition hover:bg-[#fdf9f6] sm:grid-cols-[minmax(0,1fr)_13.125rem] sm:items-center sm:gap-4 sm:px-5">
               <span class="text-sm">Fim da vigência</span>
               <CampoDeSelecao
                 id="vigencia-fim"
@@ -137,7 +134,7 @@ onMounted(() => {
                 compacto
               />
             </div>
-            <div class="grid grid-cols-[minmax(0,1fr)_210px] items-center gap-4 px-5 py-[clamp(.25rem,1vh,.5rem)] transition hover:bg-[#fdf9f6]">
+            <div class="grid grid-cols-1 gap-1 px-4 py-1.5 transition hover:bg-[#fdf9f6] sm:grid-cols-[minmax(0,1fr)_13.125rem] sm:items-center sm:gap-4 sm:px-5">
               <span class="text-sm">Loja</span>
               <CampoDeTexto
                 id="loja"
@@ -149,7 +146,7 @@ onMounted(() => {
                 compacto
               />
             </div>
-            <div class="grid grid-cols-[minmax(0,1fr)_210px] items-center gap-4 px-5 py-[clamp(.25rem,1vh,.5rem)] transition hover:bg-[#fdf9f6]">
+            <div class="grid grid-cols-1 gap-1 px-4 py-1.5 transition hover:bg-[#fdf9f6] sm:grid-cols-[minmax(0,1fr)_13.125rem] sm:items-center sm:gap-4 sm:px-5">
               <span class="text-sm">Marca</span>
               <CampoDeTexto
                 id="marca"
@@ -161,7 +158,7 @@ onMounted(() => {
                 compacto
               />
             </div>
-            <div class="grid grid-cols-[minmax(0,1fr)_210px] items-center gap-4 px-5 py-[clamp(.25rem,1vh,.5rem)] transition hover:bg-[#fdf9f6]">
+            <div class="grid grid-cols-1 gap-1 px-4 py-1.5 transition hover:bg-[#fdf9f6] sm:grid-cols-[minmax(0,1fr)_13.125rem] sm:items-center sm:gap-4 sm:px-5">
               <span class="text-sm">Cargo</span>
               <CampoDeTexto
                 id="cargo"
@@ -173,7 +170,7 @@ onMounted(() => {
                 compacto
               />
             </div>
-            <div class="grid grid-cols-[minmax(0,1fr)_210px] items-center gap-4 px-5 py-[clamp(.25rem,1vh,.5rem)] transition hover:bg-[#fdf9f6]">
+            <div class="grid grid-cols-1 gap-1 px-4 py-1.5 transition hover:bg-[#fdf9f6] sm:grid-cols-[minmax(0,1fr)_13.125rem] sm:items-center sm:gap-4 sm:px-5">
               <span class="text-sm">% de comissão</span>
               <CampoDeTexto
                 id="percentual"
@@ -185,7 +182,7 @@ onMounted(() => {
                 compacto
               />
             </div>
-            <div class="grid grid-cols-[minmax(0,1fr)_210px] items-center gap-4 px-5 py-[clamp(.25rem,1vh,.5rem)] transition hover:bg-[#fdf9f6]">
+            <div class="grid grid-cols-1 gap-1 px-4 py-1.5 transition hover:bg-[#fdf9f6] sm:grid-cols-[minmax(0,1fr)_13.125rem] sm:items-center sm:gap-4 sm:px-5">
               <span class="text-sm">Orçamento</span>
               <CampoDeTexto
                 id="orcamento"
@@ -201,7 +198,7 @@ onMounted(() => {
             </div>
           </div>
 
-          <div class="border-t border-[#eee2da] bg-[#fbf5f1] px-5 py-4">
+          <div class="border-t border-[#eee2da] bg-[#fbf5f1] px-4 py-4 sm:px-5">
             <p v-if="mensagemDoFormulario" class="mb-3 text-sm text-[#6b564a]" role="status">
               {{ mensagemDoFormulario }}
             </p>
diff --git a/frontend/src/features/historico-jobs/views/HistoricoJobsView.spec.ts b/frontend/src/features/historico-jobs/views/HistoricoJobsView.spec.ts
index 39fda16..b2b8427 100644
--- a/frontend/src/features/historico-jobs/views/HistoricoJobsView.spec.ts
+++ b/frontend/src/features/historico-jobs/views/HistoricoJobsView.spec.ts
@@ -50,6 +50,7 @@ describe('HistoricoJobsView', () => {
     const conteiner = mount(HistoricoJobsView, opcoesDeMontagem)
 
     await vi.waitFor(() => {
+      expect(conteiner.get('.tela-de-negocio').classes()).toContain('tela-de-negocio')
       expect(conteiner.text()).toContain('Salvas')
       expect(conteiner.text()).toContain('Regra 00000001')
       expect(conteiner.text()).not.toContain('Regra 00000003')
diff --git a/frontend/src/features/historico-jobs/views/HistoricoJobsView.vue b/frontend/src/features/historico-jobs/views/HistoricoJobsView.vue
index bca6d27..3a06c21 100644
--- a/frontend/src/features/historico-jobs/views/HistoricoJobsView.vue
+++ b/frontend/src/features/historico-jobs/views/HistoricoJobsView.vue
@@ -102,32 +102,28 @@ watch(
 </script>
 
 <template>
-  <div class="min-h-screen bg-[#fdf7f3] text-[#2e1a10] md:grid md:grid-cols-[clamp(13.5rem,18vw,16.25rem)_1fr]">
+  <div class="tela-de-negocio min-h-[100dvh] bg-[#fdf7f3] text-[#2e1a10] lg:grid lg:h-[100dvh] lg:grid-cols-[16rem_minmax(0,1fr)] lg:overflow-hidden">
     <TheSidebar
-      class="hidden md:flex"
+      class="hidden lg:flex"
       :secao-ativa="tipoDoHistorico"
       :quantidade-arquivadas="jobsArquivados.length"
       :quantidade-salvas="jobsSalvos.length"
       :regras-recentes="regrasRecentes"
     />
 
-    <main class="min-w-0 bg-[radial-gradient(circle_at_top,#fffdfb_0%,#fdf7f3_48%,#f8eee8_100%)]">
-      <TheProcessHeader />
+    <main class="min-w-0 bg-[radial-gradient(circle_at_top,#fffdfb_0%,#fdf7f3_48%,#f8eee8_100%)] lg:min-h-0 lg:overflow-y-auto">
+      <TheProcessHeader :etapa-da-rota="null" />
 
-      <section class="mx-auto w-full max-w-6xl px-6 py-10 lg:px-10 lg:py-14">
+      <section class="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 sm:py-10 lg:px-10 lg:py-14">
         <div class="border-b border-[#eadbd2] pb-6">
           <div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
             <div class="shrink-0">
-              <p class="text-xs font-semibold tracking-[0.14em] text-[#a54809] uppercase">Histórico de regras</p>
               <div class="mt-2 flex flex-wrap items-center gap-3">
                 <h1 class="font-serif text-4xl font-semibold tracking-tight text-[#2e1a10]">{{ titulo }}</h1>
                 <span class="rounded-full border border-[#ead4c7] bg-white/80 px-3 py-1 text-xs font-medium text-[#80695c]">
                   {{ jobsDoHistorico.length }} {{ jobsDoHistorico.length === 1 ? 'regra' : 'regras' }}
                 </span>
               </div>
-              <p class="mt-2 text-sm text-[#6b564a]">
-                {{ tipoDoHistorico === 'arquivadas' ? 'Regras preservadas para consulta e reprocessamento futuro.' : 'Regras que permanecem disponíveis para acompanhamento.' }}
-              </p>
             </div>
 
             <div class="flex w-full max-w-2xl gap-2" aria-label="Busca e filtro do histórico indisponíveis">
@@ -164,7 +160,7 @@ watch(
           {{ mensagemDeErro }}
         </p>
 
-        <div v-else-if="carregando" class="mt-8 grid gap-5 md:grid-cols-2" aria-label="Carregando histórico">
+        <div v-else-if="carregando" class="mt-8 grid gap-5 xl:grid-cols-2" aria-label="Carregando histórico">
           <div v-for="numero in 4" :key="numero" class="h-52 animate-pulse rounded-2xl border border-[#eadbd2] bg-white/70"></div>
         </div>
 
@@ -173,8 +169,8 @@ watch(
           <p class="mt-2 text-sm text-[#6b564a]">Quando houver uma regra nesta categoria, ela aparecerá aqui.</p>
         </div>
 
-        <div v-else class="mt-8 grid gap-5 md:grid-cols-2">
-          <article v-for="resumoDoJob in jobsDaPagina" :key="resumoDoJob.id" class="flex min-h-56 flex-col rounded-2xl border border-[#eadbd2] bg-white p-6 shadow-[0_16px_40px_-26px_rgba(60,30,15,0.5)]">
+        <div v-else class="mt-8 grid gap-5 xl:grid-cols-2">
+          <article v-for="resumoDoJob in jobsDaPagina" :key="resumoDoJob.id" class="flex min-h-56 flex-col rounded-2xl border border-[#eadbd2] bg-white p-4 shadow-[0_16px_40px_-26px_rgba(60,30,15,0.5)] sm:p-6">
             <div class="flex items-start justify-between gap-4 border-b border-[#f0e2da] pb-4">
               <div>
                 <h2 class="font-serif text-2xl font-semibold">Regra {{ resumoDoJob.id.slice(0, 8) }}</h2>
diff --git a/frontend/src/features/simulate/views/SimulateView.vue b/frontend/src/features/simulate/views/SimulateView.vue
index e3c0be0..727979a 100644
--- a/frontend/src/features/simulate/views/SimulateView.vue
+++ b/frontend/src/features/simulate/views/SimulateView.vue
@@ -142,12 +142,13 @@ onUnmounted(parar);
 
 <template>
     <div class="font-['Tinos'] bg-[#fffaf7]">
-    <div class="flex flex-row min-h-screen">
-    <TheSidebar class="hidden md:flex w-[15.3%]"/>
-    <div class="flex flex-col min-h-screen w-[84.7%]">
-    <TheProcessHeader class="mb-12" />
+    <div class="tela-de-negocio min-h-[100dvh] bg-[#fffaf7] text-[#2e1a10] lg:grid lg:h-[100dvh] lg:grid-cols-[16rem_minmax(0,1fr)] lg:overflow-hidden">
+    <TheSidebar class="hidden lg:flex"/>
+    <main class="min-w-0 lg:min-h-0 lg:overflow-y-auto">
+    <div class="flex min-w-0 flex-col">
+    <TheProcessHeader etapa-da-rota="simulacao" :status-do-job="job?.status ?? null" class="mb-12" />
     <!-- Simulação -->
-        <div class="mb-12 p-10">
+        <div class="mx-auto mb-12 w-full max-w-6xl p-4 sm:p-6 lg:p-10">
             <div class="mb-11">
                 <h1 class="text-3xl text-[#2B160D] mb-2">Simulação</h1>
                 <div v-if="carregando">
@@ -171,23 +172,23 @@ onUnmounted(parar);
                         Por favor, tente novamente.
                     </p>
                                 </div>
-                <div v-else class="flex flex-row">
-                    <div class="w-[50%]">
+                <div v-else class="flex flex-col gap-6 lg:flex-row">
+                    <div class="min-w-0 w-full lg:w-1/2">
                         <h3 class="font-bold">Regra estruturada</h3>
-                        <hr class="mb-4 border border-[#FFDBCD] w-[89%]">
-                            <form class="flex flex-row gap-22">
-                                <div class="flex flex-col">
+                        <hr class="mb-4 w-full border border-[#FFDBCD]">
+                            <form class="flex flex-col gap-4 sm:flex-row sm:gap-8">
+                                <div class="flex min-w-0 flex-1 flex-col">
                                     <div class="flex flex-col">
                                         <label for="vigencia" class="mb-1 text-[#584237]">Vigência</label>
                                         <input id="vigencia" type="text" :value="vigencia" readonly :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : regraInviavel ? 'text-[#950606]' : 'text-[#2B160D]'
     ]"/>
                                     </div>
                                     <div class="flex flex-col">
                                         <label for="loja" class="mb-1 text-[#584237]">Loja</label>
                                         <input id="loja" type="text" :value="loja" readonly :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : regraInviavel ? 'text-[#950606]' : 'text-[#2B160D]'
     ]"/>
                                     </div>
@@ -195,33 +196,33 @@ onUnmounted(parar);
                                     <div class="flex flex-col">
                                         <label for="marca" class="mb-1 text-[#584237]">Marca</label>
                                         <input id="marca" type="text" :value="marca" readonly :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : regraInviavel ? 'text-[#950606]' : 'text-[#2B160D]'
     ]" />
                                     </div>
                                 </div>
-                                <div class="flex flex-col">
+                                <div class="flex min-w-0 flex-1 flex-col">
                                     <label for="cargo" class="mb-1 text-[#584237]">Cargo</label>
                                     <input id="cargo" type="text" :value="cargo" readonly :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : regraInviavel ? 'text-[#950606]' : 'text-[#2B160D]'
     ]"/>
 
                                     <label for="meta" class="mb-1 text-[#584237]">Meta</label>
                                     <input id="meta" type="text" :value="meta" readonly :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : regraInviavel ? 'text-[#950606]' : 'text-[#2B160D]'
     ]"/>
 
                                     <label for="percentual" class="mb-1 text-[#584237]">Percentual</label>
                                     <input id="percentual" type="text" :value="percentual" readonly :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : regraInviavel ? 'text-[#950606]' : 'text-[#2B160D]'
     ]"/>
                                 </div>
                             </form>
                     </div>
-                    <div class="border-2 border-[#DFC0B2] rounded-lg w-[50%] p-5">
+                    <div class="min-w-0 w-full rounded-lg border-2 border-[#DFC0B2] p-5 lg:w-1/2">
                         <h3 class="font-bold">Dados da simulação</h3>
                         <hr class="mb-4 border border-[#FFDBCD]">
                         <div class="flex flex-col mb-8">
@@ -229,7 +230,7 @@ onUnmounted(parar);
                             <input id="totalComissionamento" type="text" :value="totalComissionamento" readonly placeholder="R$ X,00"  class="bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265] text-[#2B160D] px-3.5 py-3 w-full"/>
                         </div>
                         <!-- Aprovada -->
-                        <div v-if="regraViavel" class="flex flex-col w-[80%] rounded-lg mb-3 border-l-8 border-r border-t border-b border-l-[#14532D] border-r-[#14532D]/20 border-t-[#14532D]/20 border-b-[#14532D]/20 bg-[#F4ECE6]/50 p-3">
+                        <div v-if="regraViavel" class="mb-3 flex w-full flex-col rounded-lg border-t border-r border-b border-l-8 border-l-[#14532D] border-r-[#14532D]/20 border-t-[#14532D]/20 border-b-[#14532D]/20 bg-[#F4ECE6]/50 p-3 lg:w-4/5">
                             <div class="flex flex-row items-center gap-3.5">
                                 <font-awesome-icon
                                     :icon="['far', 'circle-check']"
@@ -252,7 +253,7 @@ onUnmounted(parar);
                                 Seguir para Finalização
                             </button>
                         <!-- Reprovada -->
-                        <div v-if="regraInviavel" class="flex flex-col w-[80%] rounded-lg mb-3 border-l-8 border-r border-t border-b border-l-[#950606] border-r-[#950606]/20 border-t-[#950606]/20 border-b-[#950606]/20 bg-[#F4ECE6]/50 p-3">
+                        <div v-if="regraInviavel" class="mb-3 flex w-full flex-col rounded-lg border-t border-r border-b border-l-8 border-l-[#950606] border-r-[#950606]/20 border-t-[#950606]/20 border-b-[#950606]/20 bg-[#F4ECE6]/50 p-3 lg:w-4/5">
                             <div class="flex flex-row items-center gap-3.5">
                                 <font-awesome-icon
                                     :icon="['far', 'circle-xmark']"
@@ -270,7 +271,7 @@ onUnmounted(parar);
                         <!-- Erro: asserção violada -->
                         <div
                             v-if="assercaoViolada"
-                            class="flex flex-col w-[80%] rounded-lg mb-3 border-l-8 border-r border-t border-b border-l-[#B45309] border-r-[#B45309]/20 border-t-[#B45309]/20 border-b-[#B45309]/20 bg-[#F4ECE6]/50 p-3"
+                            class="mb-3 flex w-full flex-col rounded-lg border-t border-r border-b border-l-8 border-l-[#B45309] border-r-[#B45309]/20 border-t-[#B45309]/20 border-b-[#B45309]/20 bg-[#F4ECE6]/50 p-3 lg:w-4/5"
                         >
                             <div class="flex flex-row items-center gap-3.5">
                                 <font-awesome-icon
@@ -296,29 +297,29 @@ onUnmounted(parar);
             </div>
         </div>
     <!-- Sugestão (tornar aparição dinâmica depois) -->
-        <div v-if="sugestao && (regraInviavel || aguardandoConfirmacao)" class="mb-8">
+        <div v-if="sugestao && (regraInviavel || aguardandoConfirmacao)" class="mx-auto mb-8 w-full max-w-6xl px-4 sm:px-6 lg:px-10">
             <div class="mb-11">
                 <h1 class="text-3xl text-[#2B160D] mb-2">Sugestão</h1>
                 <p class="text-[#584237]">A regra de negócio escolhida é inviável. Mas não se preocupe, criamos esta para você:</p>
             </div>
             <div>
-                <div class="flex flex-row">
-                    <div class="w-[50%]">
+                <div class="flex flex-col gap-6 lg:flex-row">
+                    <div class="min-w-0 w-full lg:w-1/2">
                         <h3 class="font-bold">Regra estruturada</h3>
-                        <hr class="mb-4 border border-[#FFDBCD] w-[89%]">
-                            <form class="flex flex-row gap-22">
-                                <div class="flex flex-col">
+                        <hr class="mb-4 w-full border border-[#FFDBCD]">
+                            <form class="flex flex-col gap-4 sm:flex-row sm:gap-8">
+                                <div class="flex min-w-0 flex-1 flex-col">
                                     <div class="flex flex-col">
                                         <label for="vigencia" class="mb-1 text-[#584237]">Vigência</label>
                                         <input id="vigencia" type="text" readonly :value="vigencia" :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : 'text-[#2B160D]'
     ]"/>
                                     </div>
                                     <div class="flex flex-col">
                                         <label for="loja" class="mb-1 text-[#584237]">Loja</label>
                                         <input id="loja" type="text" readonly :value="sugestao?.representacao.nucleo.loja?.join(', ') ?? ''" :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : 'text-[#2B160D]'
     ]"/>
                                     </div>
@@ -326,33 +327,33 @@ onUnmounted(parar);
                                     <div class="flex flex-col">
                                         <label for="marca" class="mb-1 text-[#584237]">Marca</label>
                                         <input id="marca" type="text" readonly :value="sugestao?.representacao.nucleo.marca?.join(', ') ?? ''" :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : 'text-[#2B160D]'
     ]" />
                                     </div>
                                 </div>
-                                <div class="flex flex-col">
+                                <div class="flex min-w-0 flex-1 flex-col">
                                     <label for="cargo" class="mb-1 text-[#584237]">Cargo</label>
                                     <input id="cargo" type="text" readonly :value="sugestao?.representacao.nucleo.cargo?.join(', ') ?? ''" :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : 'text-[#2B160D]'
     ]"/>
 
                                     <label for="meta" class="mb-1 text-[#584237]">Meta</label>
                                     <input id="meta" type="text" readonly :value="meta" :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : 'text-[#2B160D]'
     ]"/>
 
                                     <label for="percentual" class="mb-1 text-[#584237]">Percentual</label>
                                     <input id="percentual" type="text" readonly :value="sugestao?.representacao.nucleo.percentual == null ? '' : new Intl.NumberFormat('pt-BR', { style: 'percent', maximumFractionDigits: 4 }).format(sugestao.representacao.nucleo.percentual)" :class="[
-        'bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265]/10 px-3.5 py-3 w-[14.5vw]',
+        'w-full min-w-0 rounded-lg border-2 border-[#8B7265]/10 bg-[#FFE9E1] px-3.5 py-3',
         assercaoViolada ? 'text-[#B45309]' : 'text-[#2B160D]'
     ]"/>
                                 </div>
                             </form>
                     </div>
-                    <div class="border-2 border-[#DFC0B2] rounded-lg w-[50%] p-5">
+                    <div class="min-w-0 w-full rounded-lg border-2 border-[#DFC0B2] p-5 lg:w-1/2">
                         <h3 class="font-bold">Dados da simulação</h3>
                         <hr class="mb-4 border border-[#FFDBCD]">
                         <div class="flex flex-col mb-8">
@@ -360,16 +361,16 @@ onUnmounted(parar);
                             <input id="percentual" type="text" readonly placeholder="R$ X,00"  class="bg-[#FFE9E1] rounded-lg border-2 border-[#8B7265] text-[#2B160D] px-3.5 py-3 w-full"/>
                         </div>
                         <p class="text-lg mb-3">Deseja escolher essa nova regra?</p>
-                        <div class="flex flex-row justify-around p-0 mb-3 gap-16">
+                        <div class="mb-3 flex flex-col justify-around gap-4 p-0 sm:flex-row sm:gap-6">
                             <!-- SIM -->
-                            <button type="button" :disabled="!podeAceitarSugestao" @click="aceitarSugestao" class="flex flex-col w-[50%] cursor-pointer h-fit rounded-lg border-l-8 border-r border-t border-b border-l-[#14532D] border-r-#14532D]/20 border-t-[#14532D]/20 border-b-[#14532D]/20 bg-[#F4ECE6]/50 p-3 items-center justify-center">
+                            <button type="button" :disabled="!podeAceitarSugestao" @click="aceitarSugestao" class="flex h-fit w-full cursor-pointer flex-col items-center justify-center rounded-lg border-t border-r border-b border-l-8 border-l-[#14532D] border-r-[#14532D]/20 border-t-[#14532D]/20 border-b-[#14532D]/20 bg-[#F4ECE6]/50 p-3 sm:w-1/2">
                                 <div class="flex flex-col items-center">
                                     <h4 class="text-[#14532D] font-bold">SIM!</h4>
                                     <span class="text-[#584237]">Seguir para a próxima etapa.</span>
                                 </div>
                             </button>
                             <!-- NÃO -->
-                            <button type="button" class="flex flex-col w-[50%] h-fit cursor-pointer rounded-lg border-l-8 border-r border-t border-b border-l-[#950606] border-r-[#950606]/20 border-t-[#950606]/20 border-b-[#950606]/20 bg-[#F4ECE6]/50 p-3 items-center justify-center" :disabled="!podeCancelar" @click="cancelarFluxo">
+                            <button type="button" class="flex h-fit w-full cursor-pointer flex-col items-center justify-center rounded-lg border-t border-r border-b border-l-8 border-l-[#950606] border-r-[#950606]/20 border-t-[#950606]/20 border-b-[#950606]/20 bg-[#F4ECE6]/50 p-3 sm:w-1/2" :disabled="!podeCancelar" @click="cancelarFluxo">
                                 <div class="flex flex-col items-center">
                                     <h4 class="text-[#950606] font-bold">Não.</h4>
                                     <span class="text-[#584237]">Cancelar este fluxo.</span>
@@ -381,6 +382,7 @@ onUnmounted(parar);
             </div>
         </div>
     </div>
+    </main>
     </div>
     </div>
 </template>
@@ -394,4 +396,4 @@ textarea,
 select {
   font-family: inherit;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
index 0e706a7..65d0c6c 100644
--- a/frontend/src/layouts/DefaultLayout.vue
+++ b/frontend/src/layouts/DefaultLayout.vue
@@ -3,9 +3,9 @@ import TheSidebar from '@/components/TheSidebar.vue'
 </script>
 
 <template>
-  <div class="min-h-screen bg-[#FFF8F6] md:grid md:grid-cols-[240px_1fr]">
-    <TheSidebar />
-    <main class="overflow-x-auto p-8">
+  <div class="min-h-[100dvh] bg-[#FFF8F6] lg:grid lg:h-[100dvh] lg:grid-cols-[16rem_minmax(0,1fr)] lg:overflow-hidden">
+    <TheSidebar class="hidden lg:flex" />
+    <main class="min-w-0 overflow-x-hidden p-4 sm:p-6 lg:min-h-0 lg:overflow-y-auto lg:p-8">
       <slot />
     </main>
   </div>
diff --git a/frontend/src/services/keycloak.spec.ts b/frontend/src/services/keycloak.spec.ts
index 96b0a73..dec393b 100644
--- a/frontend/src/services/keycloak.spec.ts
+++ b/frontend/src/services/keycloak.spec.ts
@@ -1,9 +1,11 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { obterTokenDeAcesso } from './keycloak'
+import { iniciarLogout, obterTokenDeAcesso } from './keycloak'
 
 const cliente = vi.hoisted(() => ({
   token: undefined as string | undefined,
   updateToken: vi.fn<(minValidity: number) => Promise<boolean>>(),
+  clearToken: vi.fn<() => void>(),
+  logout: vi.fn<(opcoes: { redirectUri: string }) => Promise<void>>(),
 }))
 
 vi.mock('keycloak-js', () => ({
@@ -13,6 +15,8 @@ vi.mock('keycloak-js', () => ({
 beforeEach(() => {
   cliente.token = 'token-atual'
   cliente.updateToken.mockReset().mockResolvedValue(false)
+  cliente.clearToken.mockReset()
+  cliente.logout.mockReset().mockResolvedValue()
 })
 
 describe('renovação do token', () => {
@@ -53,3 +57,14 @@ describe('renovação do token', () => {
     await expect(obterTokenDeAcesso()).resolves.toBeUndefined()
   })
 })
+
+describe('logout', () => {
+  it('retorna para uma rota protegida para iniciar o login novamente', async () => {
+    await iniciarLogout()
+
+    expect(cliente.clearToken).toHaveBeenCalledOnce()
+    expect(cliente.logout).toHaveBeenCalledWith({
+      redirectUri: new URL('/nova-regra', window.location.origin).toString(),
+    })
+  })
+})
diff --git a/frontend/src/services/keycloak.ts b/frontend/src/services/keycloak.ts
index af0a763..243a830 100644
--- a/frontend/src/services/keycloak.ts
+++ b/frontend/src/services/keycloak.ts
@@ -50,7 +50,10 @@ export async function iniciarLogin(caminhoDeRetorno?: string): Promise<void> {
 export async function iniciarLogout(): Promise<void> {
   const cliente = obterClienteKeycloak()
   cliente.clearToken()
-  await cliente.logout({ redirectUri: urlDeRetorno() })
+  // Depois de encerrar a sessão, voltamos para uma rota protegida. A guarda
+  // do roteador inicia o login novamente, sem deixar o usuário numa tela
+  // intermediária da aplicação.
+  await cliente.logout({ redirectUri: urlDeRetorno('/nova-regra') })
 }
 
 export function limparTokenDoKeycloak(): void {