diff --git a/__tests__/calculator-views.test.tsx b/__tests__/calculator-views.test.tsx
new file mode 100644
index 0000000..310288e
--- /dev/null
+++ b/__tests__/calculator-views.test.tsx
@@ -0,0 +1,78 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { CalculatorViews, CalculatorViewsFromUrl, toCalculatorView } from "@/components/organisms/calculator-views";
+import { safeGAEvent } from "@/lib/analytics";
+
+vi.mock("@/lib/analytics", () => ({
+  safeGAEvent: vi.fn(),
+}));
+
+vi.mock("@/components/organisms/work-calculator", () => ({
+  WorkCalculator: () => <p>Painel da jornada</p>,
+}));
+
+vi.mock("@/components/organisms/salary-calculator", () => ({
+  SalaryCalculator: () => <p>Painel do custo da hora</p>,
+}));
+
+const searchParams = { current: new URLSearchParams() };
+
+vi.mock("next/navigation", () => ({
+  useSearchParams: () => searchParams.current,
+}));
+
+describe("toCalculatorView", () => {
+  it("only accepts the salary view, falling back to the journey", () => {
+    expect(toCalculatorView("salary")).toBe("salary");
+    expect(toCalculatorView("work")).toBe("work");
+    expect(toCalculatorView("anything-else")).toBe("work");
+    expect(toCalculatorView(null)).toBe("work");
+  });
+});
+
+describe("CalculatorViews", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    searchParams.current = new URLSearchParams();
+  });
+
+  it("marks the active tab and links both views by URL", () => {
+    render(<CalculatorViews activeView="salary" />);
+
+    expect(screen.getByRole("link", { name: "Jornada" })).toHaveAttribute("href", "/?view=work");
+    expect(screen.getByRole("link", { name: "Custo da Hora" })).toHaveAttribute("href", "/?view=salary");
+    expect(screen.getByRole("link", { name: "Custo da Hora" })).toHaveAttribute("aria-current", "page");
+    expect(screen.getByRole("link", { name: "Jornada" })).not.toHaveAttribute("aria-current");
+  });
+
+  it("renders the panel matching the active view", async () => {
+    const { rerender } = render(<CalculatorViews activeView="work" />);
+    expect(screen.getByText("Painel da jornada")).toBeInTheDocument();
+
+    rerender(<CalculatorViews activeView="salary" />);
+    expect(await screen.findByText("Painel do custo da hora")).toBeInTheDocument();
+  });
+
+  it("tracks the tab the visitor moves to", async () => {
+    const user = userEvent.setup();
+    render(<CalculatorViews activeView="work" />);
+
+    await user.click(screen.getByRole("link", { name: "Custo da Hora" }));
+
+    expect(safeGAEvent).toHaveBeenCalledWith("switch_tab", { tab: "salary" });
+  });
+
+  it("reads the active view from the query string", () => {
+    searchParams.current = new URLSearchParams("view=salary");
+    render(<CalculatorViewsFromUrl />);
+
+    expect(screen.getByText("Painel do custo da hora")).toBeInTheDocument();
+  });
+
+  it("falls back to the journey when the query string has no view", () => {
+    render(<CalculatorViewsFromUrl />);
+
+    expect(screen.getByText("Painel da jornada")).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/journey-form.test.tsx b/__tests__/journey-form.test.tsx
index 21fe7a8..f11b4dc 100644
--- a/__tests__/journey-form.test.tsx
+++ b/__tests__/journey-form.test.tsx
@@ -125,17 +125,17 @@ describe("JourneyForm", () => {
     const user = userEvent.setup();
     render(<JourneyHarness onManualExitChange={onManualExitChange} />);
 
-    const autoButton = screen.getByRole("button", { name: "AUTO" });
-    const manualButton = screen.getByRole("button", { name: "MANUAL" });
-    expect(autoButton).toHaveAttribute("aria-pressed", "true");
-    expect(manualButton).toHaveAttribute("aria-pressed", "false");
+    const autoOption = screen.getByRole("radio", { name: "AUTO" });
+    const manualOption = screen.getByRole("radio", { name: "MANUAL" });
+    expect(autoOption).toBeChecked();
+    expect(manualOption).not.toBeChecked();
 
-    await user.click(manualButton);
+    await user.click(manualOption);
 
     expect(onManualExitChange).toHaveBeenCalledWith(true);
-    expect(manualButton).toHaveAttribute("aria-pressed", "true");
+    expect(manualOption).toBeChecked();
 
-    await user.click(autoButton);
+    await user.click(autoOption);
 
     expect(onManualExitChange).toHaveBeenLastCalledWith(false);
   });
diff --git a/__tests__/page.test.tsx b/__tests__/page.test.tsx
index 419752c..df5b83b 100644
--- a/__tests__/page.test.tsx
+++ b/__tests__/page.test.tsx
@@ -26,6 +26,10 @@ vi.mock("@/components/organisms/salary-calculator", () => ({
   SalaryCalculator: () => <p>Painel do custo da hora</p>,
 }));
 
+vi.mock("next/navigation", () => ({
+  useSearchParams: () => new URLSearchParams(),
+}));
+
 describe("Home", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -68,21 +72,7 @@ describe("Home", () => {
     render(<Home />);
 
     expect(screen.getByText("Painel da jornada")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Jornada" })).toHaveAttribute("aria-pressed", "true");
-  });
-
-  it("switches to the hourly cost view and tracks it", async () => {
-    const user = userEvent.setup();
-    render(<Home />);
-
-    await user.click(screen.getByRole("button", { name: "Custo da Hora" }));
-
-    expect(safeGAEvent).toHaveBeenCalledWith("switch_tab", { tab: "salary" });
-    expect(await screen.findByText("Painel do custo da hora")).toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Jornada" }));
-
-    expect(safeGAEvent).toHaveBeenCalledWith("switch_tab", { tab: "work" });
+    expect(screen.getByRole("link", { name: "Jornada" })).toHaveAttribute("aria-current", "page");
   });
 
   it("offers the dark theme while the light one is active", async () => {
diff --git a/__tests__/work-calculator.test.tsx b/__tests__/work-calculator.test.tsx
index c662526..f196440 100644
--- a/__tests__/work-calculator.test.tsx
+++ b/__tests__/work-calculator.test.tsx
@@ -215,7 +215,7 @@ describe("WorkCalculator", () => {
     const user = userEvent.setup();
     render(<WorkCalculator />);
 
-    await user.click(screen.getByRole("button", { name: "MANUAL" }));
+    await user.click(screen.getByRole("radio", { name: "MANUAL" }));
 
     expect(safeGAEvent).toHaveBeenCalledWith("toggle_manual_mode", {
       value: "manual",
@@ -223,7 +223,7 @@ describe("WorkCalculator", () => {
     expect(screen.getByText("BALANÇO FINAL")).toBeInTheDocument();
     expect(screen.getAllByText("Saída Real").length).toBeGreaterThan(0);
 
-    await user.click(screen.getByRole("button", { name: "AUTO" }));
+    await user.click(screen.getByRole("radio", { name: "AUTO" }));
 
     expect(safeGAEvent).toHaveBeenCalledWith("toggle_manual_mode", {
       value: "auto",
@@ -238,7 +238,7 @@ describe("WorkCalculator", () => {
     await user.clear(exitTimeField);
     await user.type(exitTimeField, "1900");
 
-    expect(screen.getByRole("button", { name: "MANUAL" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("radio", { name: "MANUAL" })).toBeChecked();
   });
 
   it("restores the defaults and tracks the reset", async () => {
diff --git a/app/page.tsx b/app/page.tsx
index 67c83e9..bbad6b5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,22 +1,17 @@
 "use client";
 
 import { format } from "date-fns";
-import { Clock, DollarSign, Moon, Sun, Wallet } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
+import { Clock, Moon, Sun, Wallet } from "lucide-react";
 import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect } from "react";
 import { Button } from "@/components/atoms/button";
-import { SalaryCalculator } from "@/components/organisms/salary-calculator";
-import { WorkCalculator } from "@/components/organisms/work-calculator";
+import { CalculatorViews, CalculatorViewsFromUrl } from "@/components/organisms/calculator-views";
 import { useCurrentTime } from "@/hooks/use-current-time";
 import { safeGAEvent } from "@/lib/analytics";
 
-type View = "work" | "salary";
-
 const PLACEHOLDER_CLOCK = "--:--:--";
 
 export default function Home() {
-  const [activeView, setActiveView] = useState<View>("work");
   const currentTime = useCurrentTime();
   const { setTheme, resolvedTheme } = useTheme();
 
@@ -99,64 +94,9 @@ export default function Home() {
           </div>
         </header>
 
-        <nav className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50">
-          <div className="bg-white/80 dark:bg-neutral-900/80 backdrop-blur-xl border border-neutral-200 dark:border-neutral-800 p-1.5 rounded-2xl shadow-2xl flex items-center gap-1">
-            <Button
-              variant={activeView === "work" ? "default" : "ghost"}
-              onClick={() => {
-                setActiveView("work");
-                safeGAEvent("switch_tab", { tab: "work" });
-              }}
-              className="gap-2"
-              aria-pressed={activeView === "work"}
-            >
-              <Clock className="w-4 h-4" aria-hidden="true" />
-              <span>Jornada</span>
-            </Button>
-            <Button
-              variant={activeView === "salary" ? "default" : "ghost"}
-              onClick={() => {
-                setActiveView("salary");
-                safeGAEvent("switch_tab", { tab: "salary" });
-              }}
-              className="gap-2"
-              aria-pressed={activeView === "salary"}
-            >
-              <DollarSign className="w-4 h-4" aria-hidden="true" />
-              <span>Custo da Hora</span>
-            </Button>
-          </div>
-        </nav>
-
-        <div
-          id="main-content"
-          tabIndex={-1}
-          className="pt-32 pb-32 px-4 sm:px-6 lg:px-8 outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
-        >
-          <AnimatePresence mode="wait">
-            {activeView === "work" ? (
-              <motion.div
-                key="work"
-                initial={{ opacity: 0, y: 20, scale: 0.98 }}
-                animate={{ opacity: 1, y: 0, scale: 1 }}
-                exit={{ opacity: 0, y: -20, scale: 0.98 }}
-                transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
-              >
-                <WorkCalculator />
-              </motion.div>
-            ) : (
-              <motion.div
-                key="salary"
-                initial={{ opacity: 0, y: 20, scale: 0.98 }}
-                animate={{ opacity: 1, y: 0, scale: 1 }}
-                exit={{ opacity: 0, y: -20, scale: 0.98 }}
-                transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
-              >
-                <SalaryCalculator />
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
+        <Suspense fallback={<CalculatorViews activeView="work" />}>
+          <CalculatorViewsFromUrl />
+        </Suspense>
 
         <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
           <div className="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-indigo-500/5 blur-[120px] rounded-full" />
diff --git a/components/atoms/button.tsx b/components/atoms/button.tsx
index ce2125d..96e1e52 100644
--- a/components/atoms/button.tsx
+++ b/components/atoms/button.tsx
@@ -1,35 +1,36 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
+export type ButtonVariant = "default" | "outline" | "ghost" | "danger";
+export type ButtonSize = "default" | "sm" | "lg" | "icon";
+
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "outline" | "ghost" | "danger";
-  size?: "default" | "sm" | "lg" | "icon";
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export function buttonClasses(variant: ButtonVariant = "default", size: ButtonSize = "default", className?: string) {
+  return cn(
+    "inline-flex items-center justify-center whitespace-nowrap rounded-xl font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-neutral-950 disabled:pointer-events-none disabled:opacity-50",
+    {
+      "bg-blue-600 text-white hover:bg-blue-700 shadow-lg shadow-blue-500/20 active:scale-95": variant === "default",
+      "border border-neutral-200 dark:border-neutral-800 bg-transparent hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-900 dark:text-white":
+        variant === "outline",
+      "hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-900 dark:text-white": variant === "ghost",
+      "bg-red-500/10 text-red-600 hover:bg-red-500/20": variant === "danger",
+      "h-12 px-6 py-2 text-base": size === "default",
+      "h-11 rounded-md px-3 text-sm": size === "sm",
+      "h-14 rounded-2xl px-8 text-lg": size === "lg",
+      "h-11 w-11": size === "icon",
+    },
+    className,
+  );
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant = "default", size = "default", ...props }, ref) => {
     return (
-      <button
-        ref={ref}
-        type={props.type || "button"}
-        className={cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-xl font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-neutral-950 disabled:pointer-events-none disabled:opacity-50",
-          {
-            "bg-blue-600 text-white hover:bg-blue-700 shadow-lg shadow-blue-500/20 active:scale-95":
-              variant === "default",
-            "border border-neutral-200 dark:border-neutral-800 bg-transparent hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-900 dark:text-white":
-              variant === "outline",
-            "hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-900 dark:text-white": variant === "ghost",
-            "bg-red-500/10 text-red-600 hover:bg-red-500/20": variant === "danger",
-            "h-12 px-6 py-2 text-base": size === "default",
-            "h-11 rounded-md px-3 text-sm": size === "sm",
-            "h-14 rounded-2xl px-8 text-lg": size === "lg",
-            "h-11 w-11": size === "icon",
-          },
-          className,
-        )}
-        {...props}
-      />
+      <button ref={ref} type={props.type || "button"} className={buttonClasses(variant, size, className)} {...props} />
     );
   },
 );
diff --git a/components/organisms/calculator-views.tsx b/components/organisms/calculator-views.tsx
new file mode 100644
index 0000000..476ef51
--- /dev/null
+++ b/components/organisms/calculator-views.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { Clock, DollarSign } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { buttonClasses } from "@/components/atoms/button";
+import { SalaryCalculator } from "@/components/organisms/salary-calculator";
+import { WorkCalculator } from "@/components/organisms/work-calculator";
+import { safeGAEvent } from "@/lib/analytics";
+
+export type CalculatorView = "work" | "salary";
+
+const DEFAULT_VIEW: CalculatorView = "work";
+
+const VIEW_TABS: readonly { view: CalculatorView; label: string; icon: typeof Clock }[] = [
+  { view: "work", label: "Jornada", icon: Clock },
+  { view: "salary", label: "Custo da Hora", icon: DollarSign },
+];
+
+const PANEL_TRANSITION = {
+  initial: { opacity: 0, y: 20, scale: 0.98 },
+  animate: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, y: -20, scale: 0.98 },
+  transition: { duration: 0.4, ease: [0.23, 1, 0.32, 1] },
+} as const;
+
+export function toCalculatorView(rawView: string | null): CalculatorView {
+  return rawView === "salary" ? "salary" : DEFAULT_VIEW;
+}
+
+export function CalculatorViews({ activeView }: { activeView: CalculatorView }) {
+  return (
+    <>
+      <nav aria-label="Calculadoras" className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50">
+        <ul className="bg-white/80 dark:bg-neutral-900/80 backdrop-blur-xl border border-neutral-200 dark:border-neutral-800 p-1.5 rounded-2xl shadow-2xl flex items-center gap-1">
+          {VIEW_TABS.map(({ view, label, icon: Icon }) => (
+            <li key={view}>
+              <Link
+                href={`/?view=${view}`}
+                scroll={false}
+                aria-current={activeView === view ? "page" : undefined}
+                onClick={() => safeGAEvent("switch_tab", { tab: view })}
+                className={buttonClasses(activeView === view ? "default" : "ghost", "default", "gap-2")}
+              >
+                <Icon className="w-4 h-4" aria-hidden="true" />
+                <span>{label}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+
+      <div
+        id="main-content"
+        tabIndex={-1}
+        className="pt-32 pb-32 px-4 sm:px-6 lg:px-8 outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
+      >
+        <AnimatePresence mode="wait">
+          <motion.div key={activeView} {...PANEL_TRANSITION}>
+            {activeView === "work" ? <WorkCalculator /> : <SalaryCalculator />}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </>
+  );
+}
+
+export function CalculatorViewsFromUrl() {
+  return <CalculatorViews activeView={toCalculatorView(useSearchParams().get("view"))} />;
+}
diff --git a/components/organisms/journey-form.tsx b/components/organisms/journey-form.tsx
index cc04057..aa7a800 100644
--- a/components/organisms/journey-form.tsx
+++ b/components/organisms/journey-form.tsx
@@ -13,6 +13,11 @@ const DURATION_GROUPS = [2, 2] as const;
 const MINUTES_PER_HOUR = 60;
 const HOURS_IN_DAY = 24;
 
+const EXIT_MODES = [
+  { label: "AUTO", isManual: false },
+  { label: "MANUAL", isManual: true },
+] as const;
+
 function formatDuration(minutes: number): string {
   const hours = Math.floor(minutes / MINUTES_PER_HOUR);
   const remainingMinutes = minutes % MINUTES_PER_HOUR;
@@ -89,24 +94,25 @@ export function JourneyForm({
             />
           </button>
         </div>
-        <div className="flex items-center gap-1 bg-neutral-100 dark:bg-neutral-800 p-1.5 rounded-2xl">
-          <button
-            type="button"
-            aria-pressed={!isManualExit}
-            onClick={() => onManualExitChange(false)}
-            className={`px-6 py-3.5 rounded-xl text-xs font-bold transition-colors ${!isManualExit ? "bg-white dark:bg-neutral-700 shadow-md text-emerald-700 dark:text-emerald-400" : "text-neutral-600 hover:text-neutral-600"}`}
-          >
-            AUTO
-          </button>
-          <button
-            type="button"
-            aria-pressed={isManualExit}
-            onClick={() => onManualExitChange(true)}
-            className={`px-6 py-3.5 rounded-xl text-xs font-bold transition-colors ${isManualExit ? "bg-white dark:bg-neutral-700 shadow-md text-emerald-700 dark:text-emerald-400" : "text-neutral-600 hover:text-neutral-600"}`}
-          >
-            MANUAL
-          </button>
-        </div>
+        <fieldset className="flex items-center gap-1 bg-neutral-100 dark:bg-neutral-800 p-1.5 rounded-2xl">
+          <legend className="sr-only">Modo de cálculo da saída</legend>
+          {EXIT_MODES.map(({ label, isManual }) => (
+            <label
+              key={label}
+              className="relative cursor-pointer px-6 py-3.5 rounded-xl text-xs font-bold text-neutral-600 transition-colors has-checked:bg-white dark:has-checked:bg-neutral-700 has-checked:shadow-md has-checked:text-emerald-700 dark:has-checked:text-emerald-400 focus-within:ring-2 focus-within:ring-emerald-500"
+            >
+              <input
+                type="radio"
+                name="exit-mode"
+                value={label}
+                checked={isManualExit === isManual}
+                onChange={() => onManualExitChange(isManual)}
+                className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+              />
+              {label}
+            </label>
+          ))}
+        </fieldset>
       </div>
 
       <CollapsiblePanel id={SETTINGS_PANEL_ID} isOpen={showSettings} className="mb-8">
diff --git a/tests/e2e/salary-calculator.spec.ts b/tests/e2e/salary-calculator.spec.ts
index 4006c70..653de76 100644
--- a/tests/e2e/salary-calculator.spec.ts
+++ b/tests/e2e/salary-calculator.spec.ts
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
 test.describe("Salary Calculator (Custo da Hora)", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/");
-    await page.click('button:has-text("Custo da Hora")');
+    await page.getByRole("link", { name: "Custo da Hora" }).click();
   });
 
   test("should display default salary elements", async ({ page }) => {
diff --git a/tests/e2e/work-calculator.spec.ts b/tests/e2e/work-calculator.spec.ts
index 1942526..5cd340d 100644
--- a/tests/e2e/work-calculator.spec.ts
+++ b/tests/e2e/work-calculator.spec.ts
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
 test.describe("Work Calculator (Jornada)", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/");
-    await page.click('button:has-text("Jornada")');
+    await page.getByRole("link", { name: "Jornada" }).click();
   });
 
   test("should display default values correctly", async ({ page }) => {
@@ -14,7 +14,7 @@ test.describe("Work Calculator (Jornada)", () => {
   });
 
   test("should allow manual exit input", async ({ page }) => {
-    await page.click('button:has-text("MANUAL")');
+    await page.getByRole("radio", { name: "MANUAL" }).check();
     await expect(page.locator('text="Saída Real"').first()).toBeVisible();
   });