diff --git a/__tests__/ActivitiesContainer.spec.tsx b/__tests__/ActivitiesContainer.spec.tsx
index fa914dcbe..1f5a04065 100644
--- a/__tests__/ActivitiesContainer.spec.tsx
+++ b/__tests__/ActivitiesContainer.spec.tsx
@@ -381,7 +381,7 @@ describe("ActivitiesContainer Search Functionality", () => {
 
       // Should show loading indicator
       await waitFor(() => {
-        expect(screen.getByTestId("loader")).toBeInTheDocument();
+        expect(screen.getByRole("region", { name: "Activity records" })).toHaveAttribute("aria-busy", "true");
       });
 
       // Resolve the search
diff --git a/__tests__/AuthPresentation.spec.tsx b/__tests__/AuthPresentation.spec.tsx
new file mode 100644
index 000000000..ce1c642e7
--- /dev/null
+++ b/__tests__/AuthPresentation.spec.tsx
@@ -0,0 +1,48 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { authenticate, signup } from "@/actions/auth.actions";
+import SigninForm from "@/components/auth/SigninForm";
+import SignupForm from "@/components/auth/SignupForm";
+
+vi.mock("@/actions/auth.actions", () => ({
+  authenticate: vi.fn(),
+  signup: vi.fn(),
+}));
+vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) }));
+
+it.each(["signin", "signup"])(
+  "keeps the %s submit label while pending and announces errors",
+  async (mode) => {
+    let finish!: (value: "Invalid credentials.") => void;
+    vi.mocked(authenticate).mockImplementationOnce(
+      () =>
+        new Promise<"Invalid credentials.">((resolve) => {
+          finish = resolve;
+        }),
+    );
+    vi.mocked(signup).mockResolvedValueOnce({ success: true });
+    render(mode === "signin" ? <SigninForm /> : <SignupForm />);
+    if (mode === "signup")
+      fireEvent.change(screen.getByLabelText("Full Name"), {
+        target: { value: "Local Tester" },
+      });
+    fireEvent.change(screen.getByLabelText("Email"), {
+      target: { value: "test@example.com" },
+    });
+    fireEvent.change(screen.getByLabelText("Password"), {
+      target: { value: "password123" },
+    });
+    const button = screen.getByRole("button", {
+      name: mode === "signin" ? "Login" : "Create an account",
+    });
+    await act(async () => {
+      fireEvent.click(button);
+    });
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute("aria-busy", "true");
+    await act(async () => {
+      finish("Invalid credentials.");
+    });
+    expect(button).toBeEnabled();
+    expect(screen.getByRole("alert")).toHaveTextContent("Invalid credentials.");
+  },
+);
diff --git a/__tests__/JobsActivityCard.spec.tsx b/__tests__/JobsActivityCard.spec.tsx
index 530face18..c56f6151a 100644
--- a/__tests__/JobsActivityCard.spec.tsx
+++ b/__tests__/JobsActivityCard.spec.tsx
@@ -107,7 +107,7 @@ describe("JobsActivityCard", () => {
     render(<JobsActivityCard data={data} />);
 
     const toggle = screen.getByTestId("jobs-activity-toggle-group");
-    await user.click(within(toggle).getByRole("button", { name: "30d" }));
+    await user.click(within(toggle).getByRole("tab", { name: "30d" }));
 
     const total = screen.getByTestId("jobs-activity-total");
 
@@ -129,7 +129,7 @@ describe("JobsActivityCard", () => {
     render(<JobsActivityCard data={data} />);
 
     const toggle = screen.getByTestId("jobs-activity-toggle-group");
-    await user.click(within(toggle).getByRole("button", { name: "30d" }));
+    await user.click(within(toggle).getByRole("tab", { name: "30d" }));
 
     const total = screen.getByTestId("jobs-activity-total");
 
diff --git a/__tests__/JobsContainer.spec.tsx b/__tests__/JobsContainer.spec.tsx
index 39f2f74cf..a85fcb488 100644
--- a/__tests__/JobsContainer.spec.tsx
+++ b/__tests__/JobsContainer.spec.tsx
@@ -593,7 +593,7 @@ describe("JobsContainer Search Functionality", () => {
 
       // Should show loading indicator
       await waitFor(() => {
-        expect(screen.getByTestId("loader")).toBeInTheDocument();
+        expect(screen.getByRole("region", { name: "Job records" })).toHaveAttribute("aria-busy", "true");
       });
 
       // Resolve the search
diff --git a/__tests__/RecentCardToggle.spec.tsx b/__tests__/RecentCardToggle.spec.tsx
index e8f591829..d0141c5b9 100644
--- a/__tests__/RecentCardToggle.spec.tsx
+++ b/__tests__/RecentCardToggle.spec.tsx
@@ -27,7 +27,7 @@ describe("RecentCardToggle - Start Activity", () => {
   };
 
   const switchToActivitiesTab = async () => {
-    await user.click(screen.getByRole("button", { name: "Activities" }));
+    await user.click(screen.getByRole("tab", { name: "Activities" }));
   };
 
   beforeEach(() => {
diff --git a/__tests__/RootPage.spec.tsx b/__tests__/RootPage.spec.tsx
new file mode 100644
index 000000000..9986e4dc3
--- /dev/null
+++ b/__tests__/RootPage.spec.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import db from "@/lib/db";
+import { redirect } from "next/navigation";
+import RootPage from "@/app/page";
+
+const { mockAuth } = vi.hoisted(() => ({ mockAuth: vi.fn() }));
+vi.mock("@/auth", () => ({ auth: mockAuth }));
+vi.mock("@/lib/db", () => ({ default: { user: { count: vi.fn() } } }));
+vi.mock("next/navigation", () => ({
+  redirect: vi.fn(() => {
+    throw new Error("redirect");
+  }),
+}));
+
+describe("public root", () => {
+  it("redirects authenticated visitors without querying public account state", async () => {
+    mockAuth.mockResolvedValue({ user: { id: "user-1" } });
+    await expect(RootPage()).rejects.toThrow("redirect");
+    expect(redirect).toHaveBeenCalledWith("/dashboard");
+    expect(db.user.count).not.toHaveBeenCalled();
+  });
+
+  it.each([0, 1])(
+    "renders the landing page with %i existing accounts",
+    async (count) => {
+      mockAuth.mockResolvedValue(null);
+      vi.mocked(db.user.count).mockResolvedValue(count);
+      render(await RootPage());
+      expect(
+        screen.getByRole("heading", {
+          level: 1,
+          name: "Your self-hosted workspace for the job search.",
+        }),
+      ).toBeInTheDocument();
+      for (const link of screen.getAllByRole("link", { name: "Get started" })) {
+        expect(link).toHaveAttribute(
+          "href",
+          count === 0 ? "/signup" : "/signin",
+        );
+      }
+      expect(screen.getByRole("link", { name: "Sign in" })).toHaveAttribute(
+        "href",
+        "/signin",
+      );
+      expect(
+        screen.getByRole("link", { name: "View source on GitHub" }),
+      ).toHaveAttribute("href", "https://github.com/Gsync/jobsync");
+      expect(redirect).not.toHaveBeenCalled();
+    },
+  );
+});
diff --git a/__tests__/TasksContainer.spec.tsx b/__tests__/TasksContainer.spec.tsx
index ed97eabbd..94cca254e 100644
--- a/__tests__/TasksContainer.spec.tsx
+++ b/__tests__/TasksContainer.spec.tsx
@@ -219,7 +219,7 @@ describe("TasksContainer Component", () => {
 
       render(<TasksContainer activityTypes={mockActivityTypes} />);
 
-      expect(screen.getByTestId("loader")).toBeInTheDocument();
+      expect(screen.getByRole("status", { name: "Loading records" })).toBeInTheDocument();
     });
 
     it("should show empty state when no tasks are found", async () => {
@@ -248,7 +248,7 @@ describe("TasksContainer Component", () => {
       render(<TasksContainer activityTypes={mockActivityTypes} />);
 
       await waitFor(() => {
-        expect(screen.queryByTestId("loader")).not.toBeInTheDocument();
+        expect(screen.queryByRole("status", { name: "Loading records" })).not.toBeInTheDocument();
       });
     });
 
@@ -283,7 +283,7 @@ describe("TasksContainer Component", () => {
         });
 
       await waitFor(() => {
-        expect(screen.queryByTestId("loader")).not.toBeInTheDocument();
+        expect(screen.queryByRole("status", { name: "Loading records" })).not.toBeInTheDocument();
       });
 
       // Find and click the actions menu button for the first task
@@ -314,7 +314,7 @@ describe("TasksContainer Component", () => {
       });
 
       await waitFor(() => {
-        expect(screen.queryByTestId("loader")).not.toBeInTheDocument();
+        expect(screen.queryByRole("status", { name: "Loading records" })).not.toBeInTheDocument();
       });
 
       // Find and click the actions menu button for the first task
@@ -369,7 +369,7 @@ describe("TasksContainer Component", () => {
       });
 
       await waitFor(() => {
-        expect(screen.queryByTestId("loader")).not.toBeInTheDocument();
+        expect(screen.queryByRole("status", { name: "Loading records" })).not.toBeInTheDocument();
       });
 
       // Find and click the actions menu button for the first task
@@ -396,7 +396,7 @@ describe("TasksContainer Component", () => {
       });
 
       await waitFor(() => {
-        expect(screen.queryByTestId("loader")).not.toBeInTheDocument();
+        expect(screen.queryByRole("status", { name: "Loading records" })).not.toBeInTheDocument();
       });
 
       // Find and click the actions menu button for the first task
@@ -427,7 +427,7 @@ describe("TasksContainer Component", () => {
       });
 
       await waitFor(() => {
-        expect(screen.queryByTestId("loader")).not.toBeInTheDocument();
+        expect(screen.queryByRole("status", { name: "Loading records" })).not.toBeInTheDocument();
       });
 
       // Find and click the actions menu button for the first task
diff --git a/e2e/dashboard.spec.ts b/e2e/dashboard.spec.ts
index 986bff3d6..3c1a47006 100644
--- a/e2e/dashboard.spec.ts
+++ b/e2e/dashboard.spec.ts
@@ -214,19 +214,19 @@ test.describe("Dashboard page", () => {
     page,
   }) => {
     const jobsActivityToggle = page.getByTestId("jobs-activity-toggle-group");
-    await jobsActivityToggle.getByRole("button", { name: "30d" }).click();
+    await jobsActivityToggle.getByRole("tab", { name: "30d" }).click();
     await expect(
-      jobsActivityToggle.getByRole("button", { name: "30d" }),
-    ).toHaveClass(/bg-primary/);
+      jobsActivityToggle.getByRole("tab", { name: "30d" }),
+    ).toHaveAttribute("aria-selected", "true");
 
     const recentToggle = page.getByTestId("recent-card-toggle-group");
-    await recentToggle.getByRole("button", { name: "Activities" }).click();
+    await recentToggle.getByRole("tab", { name: "Activities" }).click();
     await expect(
       page.getByRole("heading", { name: "Recent Activities", exact: true }),
     ).toBeVisible();
 
     const weeklyToggle = page.getByTestId("weekly-chart-toggle-group");
-    await weeklyToggle.getByRole("button", { name: "Activities" }).click();
+    await weeklyToggle.getByRole("tab", { name: "Activities" }).click();
     await expect(
       page.getByRole("heading", { name: "Weekly Activities", exact: true }),
     ).toBeVisible();
@@ -268,7 +268,7 @@ test.describe("Dashboard page", () => {
     await navigateToDashboard(page);
     await page
       .getByTestId("recent-card-toggle-group")
-      .getByRole("button", { name: "Activities" })
+      .getByRole("tab", { name: "Activities" })
       .click();
     await expect(page.getByText(taskTitle, { exact: true })).not.toBeVisible();
   });
@@ -284,7 +284,7 @@ test.describe("Dashboard page", () => {
     await navigateToDashboard(page);
     await page
       .getByTestId("recent-card-toggle-group")
-      .getByRole("button", { name: "Activities" })
+      .getByRole("tab", { name: "Activities" })
       .click();
 
     const activityRow = page
diff --git a/e2e/fixtures.ts b/e2e/fixtures.ts
index 073f27f5e..1c13cfeae 100644
--- a/e2e/fixtures.ts
+++ b/e2e/fixtures.ts
@@ -164,7 +164,7 @@ type Fixtures = {
 export const test = base.extend<Fixtures>({
   // Auto-login every test and land on the dashboard.
   page: async ({ page, baseURL }, use) => {
-    await page.goto("/");
+    await page.goto("/signin");
     await login(page);
     await expect(page).toHaveURL(baseURL + "/dashboard");
     await use(page);
diff --git a/e2e/landing.spec.ts b/e2e/landing.spec.ts
new file mode 100644
index 000000000..65168ede7
--- /dev/null
+++ b/e2e/landing.spec.ts
@@ -0,0 +1,32 @@
+import { test, expect } from "@playwright/test";
+
+for (const width of [390, 1280]) {
+  for (const colorScheme of ["light", "dark"] as const) {
+    test(`public entry at ${width}px in ${colorScheme} mode`, async ({
+      page,
+    }) => {
+      await page.setViewportSize({ width, height: 900 });
+      await page.emulateMedia({ colorScheme });
+      await page.goto("/");
+      await expect(page.getByRole("heading", { level: 1 })).toHaveText(
+        "Your self-hosted workspace for the job search.",
+      );
+      await expect(page.getByText("Example workspace")).toBeVisible();
+      expect(
+        await page.evaluate(
+          () => document.documentElement.scrollWidth <= window.innerWidth,
+        ),
+      ).toBe(true);
+      await page.getByRole("link", { name: "Sign in", exact: true }).click();
+      await expect(page).toHaveURL(/\/signin$/);
+      await expect(
+        page.getByRole("heading", { name: "Welcome back" }),
+      ).toBeVisible();
+      await page
+        .getByRole("link", { name: "Create Account", exact: true })
+        .click();
+      await expect(page).toHaveURL(/\/signup$/);
+      await expect(page.getByLabel("Full Name")).toBeVisible();
+    });
+  }
+}
diff --git a/e2e/signin.spec.ts b/e2e/signin.spec.ts
index 190a735a2..e449ed9f7 100644
--- a/e2e/signin.spec.ts
+++ b/e2e/signin.spec.ts
@@ -5,7 +5,7 @@ import { test, expect } from "@playwright/test";
 import { login } from "./fixtures";
 
 test("Signin page has title", async ({ page }) => {
-  await page.goto("/");
+  await page.goto("/signin");
 
   await expect(page).toHaveTitle("Sign In | JobSync");
 
@@ -17,7 +17,7 @@ test("Signin page has title", async ({ page }) => {
 });
 
 test("Signin and out from app", async ({ page, baseURL }) => {
-  await page.goto("/");
+  await page.goto("/signin");
   await login(page);
 
   await expect(page).toHaveURL(baseURL + "/dashboard");
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index f0472515f..01a5b9c6b 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -4,7 +4,7 @@ export default function AuthLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <main className="flex min-h-screen items-center justify-center bg-muted/40">
+    <main className="flex min-h-screen items-center justify-center bg-muted/40 px-4 py-10">
       {children}
     </main>
   );
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index d6792aa47..97d7f87d3 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -54,8 +54,8 @@ export default async function RootLayout({
                   <GlobalActivityBanner />
                   {/* Container, not viewport, queries: the docked chat panel
                       shrinks this box without changing the viewport width. */}
-                  <main className="@container/main flex-1 p-4 sm:px-4 sm:py-0">
-                    <div className="items-start gap-4 md:gap-4 @3xl/main:grid @3xl/main:grid-cols-3">
+                  <main className="@container/main flex-1 px-4 pb-4">
+                    <div className="flex flex-col gap-4 @3xl/main:grid @3xl/main:items-start @3xl/main:grid-cols-3">
                       {children}
                     </div>
                   </main>
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 06972245d..363263eb7 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -39,8 +39,8 @@ export default async function Dashboard() {
   const activityCalendarDataKeys = Object.keys(activityCalendarData);
   return (
     <>
-      <div className="@container grid grid-cols-1 auto-rows-max items-start gap-2 md:gap-2 @3xl/main:col-span-2">
-        <div className="grid gap-2 @lg:grid-cols-4">
+      <div className="@container grid grid-cols-1 auto-rows-max items-start gap-4 @3xl/main:col-span-2">
+        <div className="grid gap-4 @lg:grid-cols-4">
           <JobsApplied />
           <JobsActivityCard
             data={[
diff --git a/src/app/globals.css b/src/app/globals.css
index 46e279dc9..c2e3b62b0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -132,7 +132,7 @@
   /* v4 Preflight renders placeholders at 50% currentColor; v3 used gray-400 */
   input::placeholder,
   textarea::placeholder {
-    color: var(--color-gray-400);
+    color: hsl(var(--muted-foreground));
   }
 }
 
@@ -192,26 +192,9 @@
   @apply text-14 lg:text-16 font-normal text-muted-foreground;
 }
 
-/* Sidebar */
-@utility sidebar {
-  @apply sticky left-0 top-0 flex h-screen w-fit flex-col justify-between border-r border-border bg-card pt-8 text-foreground max-md:hidden sm:p-4 xl:p-6 2xl:w-[355px];
-}
-
-@utility sidebar-logo {
-  @apply 2xl:text-26 text-[26px] text-blue-500 font-bold max-xl:hidden;
-}
-
-@utility sidebar-link {
-  @apply flex gap-3 items-center text-blue-500 py-1 md:p-3 2xl:p-4 rounded-lg justify-center xl:justify-start;
-}
-
-@utility sidebar-label {
-  @apply text-16 font-semibold text-foreground max-xl:hidden;
-}
-
 /* Navlink */
 @utility navlink {
-  @apply relative flex items-center overflow-hidden transition-all duration-200 ease-in-out;
+  @apply relative flex items-center overflow-hidden transition-colors duration-200 ease-in-out;
 }
 
 /* Override: For Calender component to hide month, year labels */
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5be0adb44..c859f3e87 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import { auth } from "@/auth";
 import db from "@/lib/db";
+import LandingPage from "@/components/landing/LandingPage";
 
 export default async function RootPage() {
   const session = await auth();
@@ -11,9 +12,5 @@ export default async function RootPage() {
 
   const userCount = await db.user.count();
 
-  if (userCount === 0) {
-    redirect("/signup");
-  } else {
-    redirect("/signin");
-  }
+  return <LandingPage hasUsers={userCount > 0} />;
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e335bb6d7..f74c0e5b1 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import { PanelLeft, Briefcase } from "lucide-react";
 
@@ -11,12 +13,16 @@ import {
 } from "@/components/ui/sheet";
 import { SIDEBAR_LINKS } from "@/lib/constants";
 import SidebarToggle from "./SidebarToggle";
+import NavLink from "./NavLink";
+import { usePathname } from "next/navigation";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { AgentChatTrigger } from "./AgentChatTrigger";
 import { NotificationBell } from "./notifications/NotificationBell";
 
-async function Header() {
+function Header() {
+  const pathname = usePathname();
   return (
-    <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+    <header className="sticky top-0 z-30 flex h-14 items-center gap-2 border-b bg-background px-4 sm:gap-3">
       <Sheet>
         <SheetTrigger asChild>
           <Button size="icon" variant="outline" className="sm:hidden">
@@ -24,13 +30,13 @@ async function Header() {
             <span className="sr-only">Toggle Menu</span>
           </Button>
         </SheetTrigger>
-        <SheetContent side="left" className="sm:max-w-xs">
+        <SheetContent side="left" className="overflow-y-auto sm:max-w-xs">
           <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
-          <nav className="grid gap-6 text-lg font-medium">
+          <TooltipProvider><nav aria-label="Mobile navigation" className="grid gap-1 pt-6">
             <SheetClose asChild>
               <Link
                 href="/dashboard"
-                className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
+                className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-md bg-primary text-lg font-semibold text-primary-foreground md:text-base"
               >
                 <Briefcase className="h-5 w-5 transition-all group-hover:scale-110" />
                 <span className="sr-only">JobSync</span>
@@ -43,32 +49,17 @@ async function Header() {
               }
               return (
                 <SheetClose asChild key={item.label}>
-                  <Link
-                    href={item.route}
-                    className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-                  >
-                    <item.icon className="h-5 w-5" />
-                    {item.label}
-                  </Link>
+                  <NavLink label={item.label} Icon={item.icon} route={item.route} pathname={pathname} expanded />
                 </SheetClose>
               );
             })}
-          </nav>
+          </nav></TooltipProvider>
         </SheetContent>
       </Sheet>
       <SidebarToggle />
-      <h1 className="font-semibold">
-        JobSync<span className="hidden sm:inline"> - Job Search Assistant</span>
-      </h1>
-      <div className="relative ml-auto flex-1 md:grow-0">
-        {/* <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-        <Input
-          id="search"
-          type="search"
-          placeholder="Search..."
-          className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
-        /> */}
-      </div>
+      <h1 className="text-sm font-semibold">JobSync</h1>
+      <span className="hidden text-sm text-muted-foreground md:inline">Job search workspace</span>
+      <div className="ml-auto" />
 
       <NotificationBell />
       <AgentChatTrigger />
diff --git a/src/components/ListSkeleton.tsx b/src/components/ListSkeleton.tsx
new file mode 100644
index 000000000..e5f8ff680
--- /dev/null
+++ b/src/components/ListSkeleton.tsx
@@ -0,0 +1,20 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ListSkeleton() {
+  return (
+    <div role="status" aria-label="Loading records" className="grid gap-3 py-4">
+      <span className="sr-only">Loading records</span>
+      {Array.from({ length: 5 }, (_, index) => (
+        <div
+          key={index}
+          aria-hidden="true"
+          className="flex h-12 items-center gap-4 border-b pb-3"
+        >
+          <Skeleton className="size-8 shrink-0 rounded-md" />
+          <Skeleton className="h-4 w-1/3" />
+          <Skeleton className="ml-auto h-5 w-20" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 4e60a200b..eac7c083c 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,11 +1,9 @@
-import { Loader } from "lucide-react";
+import { Spinner } from "@/components/ui/spinner";
 
-const Loading = () => {
-  return (
-    <div className="flex items-center justify-center" data-testid="loader">
-      <Loader className="animate-spin text-blue-500" size={48} />
-    </div>
-  );
-};
+const Loading = () => (
+  <span className="inline-flex items-center justify-center text-primary" data-testid="loader">
+    <Spinner />
+  </span>
+);
 
 export default Loading;
diff --git a/src/components/NavLink.tsx b/src/components/NavLink.tsx
index 622b728b4..1accc5d4f 100644
--- a/src/components/NavLink.tsx
+++ b/src/components/NavLink.tsx
@@ -9,7 +9,7 @@ import {
 import { LucideProps } from "lucide-react";
 import { cn } from "@/lib/utils";
 
-interface NavLinkProps {
+interface NavLinkProps extends Omit<React.ComponentProps<typeof Link>, "href"> {
   label: string;
   Icon: ForwardRefExoticComponent<
     Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>
@@ -19,7 +19,7 @@ interface NavLinkProps {
   expanded: boolean;
 }
 
-function NavLink({ label, Icon, route, pathname, expanded }: NavLinkProps) {
+function NavLink({ label, Icon, route, pathname, expanded, ...props }: NavLinkProps) {
   // "/dashboard" is a prefix of every other route, so it only matches exactly.
   const isActive =
     pathname === route ||
@@ -27,24 +27,24 @@ function NavLink({ label, Icon, route, pathname, expanded }: NavLinkProps) {
 
   const link = (
     <Link
+      {...props}
       href={route}
       aria-current={isActive ? "page" : undefined}
       className={cn(
-        "navlink h-10 w-full hover:text-foreground",
-        isActive ? "text-foreground" : "text-muted-foreground",
-        isActive && expanded && "rounded-md bg-accent"
+        "navlink h-10 w-full rounded-md hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+        isActive ? "bg-accent text-primary font-medium" : "text-muted-foreground"
       )}
     >
       {isActive && (
         <span
           aria-hidden
-          className="absolute left-0 top-0 h-full w-0.5 bg-foreground"
+          className="absolute left-0 top-0 h-full w-0.5 bg-primary"
         />
       )}
       {/* Fixed-width lead box (= collapsed rail width) so the icon sits at the
           same spot in both states and never moves during the slide. */}
       <span className="flex h-full w-14 shrink-0 items-center justify-center">
-        <Icon className="h-6 w-6 shrink-0" strokeWidth={1.5} />
+        <Icon className="size-5 shrink-0" strokeWidth={1.5} />
       </span>
       <span
         className={cn(
diff --git a/src/components/ProfileDropdown.tsx b/src/components/ProfileDropdown.tsx
index cf7ee7ca1..63d7b8f95 100644
--- a/src/components/ProfileDropdown.tsx
+++ b/src/components/ProfileDropdown.tsx
@@ -24,9 +24,11 @@ import { SupportDialog } from "./SupportDialog";
 import { useAppVersion } from "@/hooks/useAppVersion";
 import { useNotifications } from "@/context/NotificationContext";
 import { cn } from "@/lib/utils";
+import { CurrentUser } from "@/models/user.model";
+import { Button } from "@/components/ui/button";
 
 interface ProfileDropdownProps {
-  user: any;
+  user: CurrentUser | null;
   expanded: boolean;
   signOutAction: () => void;
 }
@@ -47,10 +49,11 @@ export function ProfileDropdown({
         <Tooltip>
           <TooltipTrigger asChild>
             <DropdownMenuTrigger asChild>
-              <button
+              <Button
+                variant="ghost"
                 type="button"
                 aria-label="User menu"
-                className="navlink h-10 w-full text-muted-foreground hover:text-foreground"
+                className="navlink h-10 w-full justify-start gap-0 p-0 text-muted-foreground"
               >
                 <span className="relative flex h-full w-14 shrink-0 items-center justify-center">
                   <UserAvatar user={user} />
@@ -87,7 +90,7 @@ export function ProfileDropdown({
                 >
                   {label}
                 </span>
-              </button>
+              </Button>
             </DropdownMenuTrigger>
           </TooltipTrigger>
           {!expanded && <TooltipContent side="right">{label}</TooltipContent>}
@@ -108,8 +111,10 @@ export function ProfileDropdown({
               {summary.unread > 0 && (
                 <span
                   className={cn(
-                    "ml-2 rounded-full px-1.5 text-[11px] font-semibold text-white",
-                    summary.unreadErrors > 0 ? "bg-destructive" : "bg-primary"
+                    "ml-2 rounded-full px-1.5 text-[11px] font-semibold",
+                    summary.unreadErrors > 0
+                      ? "bg-destructive-bg text-destructive-foreground"
+                      : "bg-primary text-primary-foreground"
                   )}
                 >
                   {summary.unread}
@@ -149,7 +154,7 @@ export function ProfileDropdown({
             <form action={signOutAction}>
               <button type="submit" className="flex w-full items-center">
                 <PowerIcon className="w-5 mr-2" />
-                <div className="hidden md:block">Logout</div>
+                <span>Logout</span>
               </button>
             </form>
           </DropdownMenuItem>
diff --git a/src/components/RecordsCount.tsx b/src/components/RecordsCount.tsx
index a32dd92ce..c1cd7f7e9 100644
--- a/src/components/RecordsCount.tsx
+++ b/src/components/RecordsCount.tsx
@@ -13,7 +13,7 @@ export function RecordsCount({
 }: RecordsCountProps) {
   return (
     <div className="text-xs text-muted-foreground whitespace-nowrap">
-      Showing <strong>1 to {count}</strong>
+      Showing <strong>{count === 0 ? 0 : 1} to {count}</strong>
       {total !== undefined && (
         <>
           {" "}
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index 644bd0e08..a43b98b10 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -12,10 +12,11 @@ interface SearchInputProps {
 export function SearchInput({ value, onChange, placeholder }: SearchInputProps) {
   return (
     <div className="relative flex-1 min-w-[140px] sm:flex-none">
-      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+      <Search className="absolute pointer-events-none left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
       <Input
         type="search"
         placeholder={placeholder}
+        aria-label={placeholder}
         className="pl-8 h-8 w-full sm:w-[150px] lg:w-[200px]"
         value={value}
         onChange={(e) => onChange(e.target.value)}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index b4d1b541a..4d6be07e3 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -26,13 +26,13 @@ function Sidebar({ user, signOutAction }: SidebarProps) {
       <aside
         id={APP_CONSTANTS.SIDEBAR_DOM_ID}
         className={cn(
-          "fixed inset-y-0 left-0 z-10 hidden flex-col border-r bg-background transition-[width] duration-200 ease-in-out sm:flex",
+          "fixed inset-y-0 left-0 z-10 hidden flex-col border-r bg-background transition-[width] duration-200 ease-in-out motion-reduce:transition-none sm:flex",
           expanded
             ? APP_CONSTANTS.SIDEBAR_WIDTH.expanded.rail
             : APP_CONSTANTS.SIDEBAR_WIDTH.collapsed.rail,
         )}
       >
-        <div className="flex h-14 shrink-0 items-center overflow-hidden sm:mt-2">
+        <div className="flex h-14 shrink-0 items-center overflow-hidden border-b">
           <div className="flex w-14 shrink-0 items-center justify-center">
             <Link
               href="/dashboard"
@@ -40,7 +40,7 @@ function Sidebar({ user, signOutAction }: SidebarProps) {
               onClick={(e) => {
                 if (isOnDashboard) e.preventDefault();
               }}
-              className="group flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:h-8 md:w-8"
+              className="group flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground md:h-8 md:w-8"
             >
               <Briefcase className="h-4 w-4 transition-transform group-hover:scale-110" />
               <span className="sr-only">JobSync</span>
@@ -56,7 +56,7 @@ function Sidebar({ user, signOutAction }: SidebarProps) {
           </span>
         </div>
 
-        <nav className="flex flex-1 flex-col gap-1 overflow-y-auto py-2">
+        <nav aria-label="Main navigation" className="flex flex-1 flex-col gap-1 overflow-y-auto py-2">
           {SIDEBAR_LINKS.map((item) => {
             // Only show dev-only items in development mode
             if (item.devOnly && process.env.NODE_ENV !== "development") {
diff --git a/src/components/SidebarInset.tsx b/src/components/SidebarInset.tsx
index 46a0270de..758dfe764 100644
--- a/src/components/SidebarInset.tsx
+++ b/src/components/SidebarInset.tsx
@@ -14,11 +14,11 @@ function SidebarInset({ children }: { children: React.ReactNode }) {
   return (
     <div
       className={cn(
-        "flex flex-1 flex-col sm:gap-4 sm:py-4",
+        "flex min-w-0 flex-1 flex-col gap-4",
         // Following the drag handle 200ms late reads as lag, not animation.
         isResizing
           ? "transition-none"
-          : "transition-[padding] duration-200 ease-in-out",
+          : "transition-[padding] duration-200 ease-in-out motion-reduce:transition-none",
         expanded
           ? APP_CONSTANTS.SIDEBAR_WIDTH.expanded.contentOffset
           : APP_CONSTANTS.SIDEBAR_WIDTH.collapsed.contentOffset,
diff --git a/src/components/activities/ActivitiesContainer.tsx b/src/components/activities/ActivitiesContainer.tsx
index 2a0e2b0a7..7b6fdb68e 100644
--- a/src/components/activities/ActivitiesContainer.tsx
+++ b/src/components/activities/ActivitiesContainer.tsx
@@ -19,7 +19,7 @@ import { ActivityForm } from "./ActivityForm";
 import { getActivitiesList } from "@/actions/activity.actions";
 import { Activity } from "@/models/activity.model";
 import { toastError } from "@/lib/toast";
-import Loading from "../Loading";
+import ListSkeleton from "@/components/ListSkeleton";
 import { APP_CONSTANTS } from "@/lib/constants";
 import { RecordsCount } from "../RecordsCount";
 import { useActivity } from "@/context/ActivityContext";
@@ -203,8 +203,8 @@ function ActivitiesContainer() {
           </Dialog>
         </div>
       </ResponsiveCardHeader>
-      <CardContent>
-        {initialLoading && <Loading />}
+      <CardContent role="region" aria-label="Activity records" aria-busy={initialLoading}>
+        {initialLoading && activitiesList.length === 0 && <ListSkeleton />}
         {activitiesList.length > 0 && (
           <>
             <ActivitiesTable
@@ -217,7 +217,7 @@ function ActivitiesContainer() {
         {activitiesList.length < totalActivities && (
           <div ref={sentinelRef} className="flex justify-center p-4">
             {loadingMore && (
-              <Loader className="h-5 w-5 animate-spin text-blue-500" />
+              <Loader className="h-5 w-5 animate-spin text-primary" />
             )}
           </div>
         )}
diff --git a/src/components/auth/AuthCard.tsx b/src/components/auth/AuthCard.tsx
index 72d65c9b1..d18b17a31 100644
--- a/src/components/auth/AuthCard.tsx
+++ b/src/components/auth/AuthCard.tsx
@@ -1,76 +1,69 @@
-"use client";
-
-import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { BriefcaseBusiness } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import SigninForm from "./SigninForm";
 import SignupForm from "./SignupForm";
 
 type AuthMode = "signin" | "signup";
 
-interface AuthCardProps {
-  mode: AuthMode;
-}
-
-export default function AuthCard({ mode }: AuthCardProps) {
-  const router = useRouter();
-
+export default function AuthCard({ mode }: { mode: AuthMode }) {
   return (
-    <div className="mx-auto w-full max-w-md px-4">
-      {/* App branding */}
-      <div className="mb-8 text-center">
-        <h1 className="text-3xl font-bold tracking-tight">JobSync</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
+    <div className="mx-auto flex w-full max-w-md flex-col gap-6">
+      <div className="text-center">
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 rounded-sm focus-visible:outline-2 focus-visible:outline-ring"
+        >
+          <BriefcaseBusiness
+            className="size-6 text-primary"
+            aria-hidden="true"
+          />
+          <h1 className="text-2xl font-semibold tracking-tight">JobSync</h1>
+        </Link>
+        <p className="mt-2 text-sm text-muted-foreground">
           Track your job search, powered by AI
         </p>
       </div>
-
-      {/* Tab toggle */}
-      <div className="mb-6 flex rounded-xl border bg-muted p-1">
-        <button
-          onClick={() => router.push("/signin")}
-          className={`flex-1 rounded-lg py-2.5 text-sm font-semibold transition-all duration-200 ${
-            mode === "signin"
-              ? "bg-background text-foreground shadow-xs"
-              : "text-muted-foreground hover:text-foreground"
-          }`}
-        >
-          Sign In
-        </button>
-        <button
-          onClick={() => router.push("/signup")}
-          className={`flex-1 rounded-lg py-2.5 text-sm font-semibold transition-all duration-200 ${
-            mode === "signup"
-              ? "bg-background text-foreground shadow-xs"
-              : "text-muted-foreground hover:text-foreground"
-          }`}
-        >
-          Create Account
-        </button>
-      </div>
-
-      {/* Form card */}
-      <div className="rounded-xl border bg-card p-6 shadow-xs">
-        {mode === "signin" ? (
-          <>
-            <div className="mb-5">
-              <h2 className="text-xl font-semibold">Welcome back</h2>
-              <p className="mt-1 text-sm text-muted-foreground">
-                Enter your credentials to access your account
-              </p>
-            </div>
-            <SigninForm />
-          </>
-        ) : (
-          <>
-            <div className="mb-5">
-              <h2 className="text-xl font-semibold">Get started</h2>
-              <p className="mt-1 text-sm text-muted-foreground">
-                Create a free account to start tracking your applications
-              </p>
-            </div>
-            <SignupForm />
-          </>
-        )}
-      </div>
+      <nav aria-label="Authentication" className="grid grid-cols-2 gap-2">
+        <Button variant={mode === "signin" ? "secondary" : "ghost"} asChild>
+          <Link
+            href="/signin"
+            aria-current={mode === "signin" ? "page" : undefined}
+          >
+            Sign In
+          </Link>
+        </Button>
+        <Button variant={mode === "signup" ? "secondary" : "ghost"} asChild>
+          <Link
+            href="/signup"
+            aria-current={mode === "signup" ? "page" : undefined}
+          >
+            Create Account
+          </Link>
+        </Button>
+      </nav>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {mode === "signin" ? "Welcome back" : "Get started"}
+          </CardTitle>
+          <CardDescription>
+            {mode === "signin"
+              ? "Enter your credentials to access your account"
+              : "Create a free account to start tracking your applications"}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {mode === "signin" ? <SigninForm /> : <SignupForm />}
+        </CardContent>
+      </Card>
     </div>
   );
 }
diff --git a/src/components/auth/SigninForm.tsx b/src/components/auth/SigninForm.tsx
index df715f255..1a0f54170 100644
--- a/src/components/auth/SigninForm.tsx
+++ b/src/components/auth/SigninForm.tsx
@@ -16,7 +16,8 @@ import { Input } from "../ui/input";
 import { useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { SigninFormSchema } from "@/models/signinForm.schema";
-import Loading from "../Loading";
+import { Spinner } from "@/components/ui/spinner";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Eye, EyeOff } from "lucide-react";
 
 function SigninForm() {
@@ -92,6 +93,7 @@ function SigninForm() {
                         <Input
                           id="password"
                           type={showPassword ? "text" : "password"}
+                          className="pr-12"
                           autoComplete="current-password"
                           spellCheck={false}
                           autoCorrect="off"
@@ -107,7 +109,7 @@ function SigninForm() {
                           aria-label={
                             showPassword ? "Hide password" : "Show password"
                           }
-                          tabIndex={-1}
+                          aria-pressed={showPassword}
                         >
                           {showPassword ? (
                             <EyeOff className="h-4 w-4" aria-hidden="true" />
@@ -122,18 +124,15 @@ function SigninForm() {
                 )}
               />
             </div>
-            <Button type="submit" disabled={isPending} className="w-full">
-              {isPending ? <Loading /> : "Login"}
+            <Button type="submit" disabled={isPending} aria-busy={isPending} className="w-full">
+              {isPending && <Spinner aria-hidden="true" />}
+              Login
             </Button>
-            <div
-              className="flex h-8 items-end space-x-1"
-              aria-live="polite"
-              aria-atomic="true"
-            >
+            <div className="min-h-12" aria-live="polite" aria-atomic="true">
               {errorMessage && (
-                <>
-                  <p className="text-sm text-red-500">{errorMessage}</p>
-                </>
+                <Alert variant="destructive">
+                  <AlertDescription>{errorMessage}</AlertDescription>
+                </Alert>
               )}
             </div>
           </div>
diff --git a/src/components/auth/SignupForm.tsx b/src/components/auth/SignupForm.tsx
index 7e4e985f3..e9cee4ced 100644
--- a/src/components/auth/SignupForm.tsx
+++ b/src/components/auth/SignupForm.tsx
@@ -16,7 +16,8 @@ import { Input } from "../ui/input";
 import { useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { SignupFormSchema } from "@/models/signupForm.schema";
-import Loading from "../Loading";
+import { Spinner } from "@/components/ui/spinner";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Eye, EyeOff } from "lucide-react";
 
 function SignupForm() {
@@ -106,6 +107,7 @@ function SignupForm() {
                     <FormControl>
                       <Input
                         type={showPassword ? "text" : "password"}
+                        className="pr-12"
                         autoComplete="new-password"
                         spellCheck={false}
                         autoCorrect="off"
@@ -122,7 +124,7 @@ function SignupForm() {
                       aria-label={
                         showPassword ? "Hide password" : "Show password"
                       }
-                      tabIndex={-1}
+                      aria-pressed={showPassword}
                     >
                       {showPassword ? (
                         <EyeOff className="h-4 w-4" aria-hidden="true" />
@@ -136,16 +138,15 @@ function SignupForm() {
               )}
             />
           </div>
-          <Button type="submit" disabled={isPending} className="w-full">
-            {isPending ? <Loading /> : "Create an account"}
+          <Button type="submit" disabled={isPending} aria-busy={isPending} className="w-full">
+            {isPending && <Spinner aria-hidden="true" />}
+            Create an account
           </Button>
-          <div
-            className="flex h-8 items-end space-x-1"
-            aria-live="polite"
-            aria-atomic="true"
-          >
+          <div className="min-h-12" aria-live="polite" aria-atomic="true">
             {errorMessage && (
-              <p className="text-sm text-red-500">{errorMessage}</p>
+              <Alert variant="destructive">
+                <AlertDescription>{errorMessage}</AlertDescription>
+              </Alert>
             )}
           </div>
         </div>
diff --git a/src/components/automations/AutomationContainer.tsx b/src/components/automations/AutomationContainer.tsx
index facbf2dfd..e8f41ee99 100644
--- a/src/components/automations/AutomationContainer.tsx
+++ b/src/components/automations/AutomationContainer.tsx
@@ -11,7 +11,7 @@ import { getAutomationsList } from "@/actions/automation.actions";
 import type { AutomationWithResume } from "@/models/automation.model";
 import { AutomationList } from "./AutomationList";
 import { AutomationWizard } from "./AutomationWizard";
-import Loading from "@/components/Loading";
+import ListSkeleton from "@/components/ListSkeleton";
 
 interface Resume {
   id: string;
@@ -95,7 +95,7 @@ export function AutomationContainer({ resumes }: AutomationContainerProps) {
         </ResponsiveCardHeader>
         <CardContent>
           {loading ? (
-            <Loading />
+            <ListSkeleton />
           ) : (
             <AutomationList
               automations={automations}
diff --git a/src/components/dashboard/ActivityCalendar.tsx b/src/components/dashboard/ActivityCalendar.tsx
index 72df41096..d048edabc 100644
--- a/src/components/dashboard/ActivityCalendar.tsx
+++ b/src/components/dashboard/ActivityCalendar.tsx
@@ -34,7 +34,7 @@ export default function ActivityCalendar({
     <Card className="w-[100%]">
       <CardHeader>
         <div className="flex items-center justify-between">
-          <CardTitle className="text-lg text-green-600">Activity Calendar</CardTitle>
+          <CardTitle className="text-lg">Activity Calendar</CardTitle>
           <Select value={year} onValueChange={setYear}>
             <SelectTrigger className="w-[100px]" aria-label="Select year">
               <SelectValue placeholder="Select year" />
diff --git a/src/components/dashboard/JobsActivityCard.tsx b/src/components/dashboard/JobsActivityCard.tsx
index df64b5c12..6bd1c6fc2 100644
--- a/src/components/dashboard/JobsActivityCard.tsx
+++ b/src/components/dashboard/JobsActivityCard.tsx
@@ -14,6 +14,7 @@ import { useElementWidth } from "@/hooks/useElementWidth";
 import { usePersistedTabIndex } from "@/hooks/usePersistedTabIndex";
 import { APP_CONSTANTS } from "@/lib/constants";
 import { cn } from "@/lib/utils";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import {
   ARC_LABEL_TEXT_COLOR,
   arcLabelLines,
@@ -106,35 +107,21 @@ export default function JobsActivityCard({ data }: JobsActivityCardProps) {
   );
 
   return (
+    <Tabs value={current.label} onValueChange={(value) => selectTab(data.findIndex((item) => item.label === value))} asChild>
     <Card className="@lg:col-span-2">
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between gap-2">
-          <CardTitle className="text-lg text-green-600 min-w-0 truncate">
+          <CardTitle className="text-lg min-w-0 truncate">
             Jobs &amp; Activity
           </CardTitle>
-          <div
-            className="flex shrink-0 rounded-md border text-xs"
-            data-testid="jobs-activity-toggle-group"
-          >
-            {data.map((item, index) => (
-              <button
-                key={item.label}
-                onClick={() => selectTab(index)}
-                className={cn(
-                  "px-2 py-1 transition-colors",
-                  index === 0 && "rounded-l-md",
-                  index === data.length - 1 && "rounded-r-md",
-                  activeIndex === index
-                    ? "bg-primary text-primary-foreground"
-                    : "hover:bg-muted",
-                )}
-              >
-                {item.label}
-              </button>
+          <TabsList aria-label="Activity period" className="h-8 shrink-0" data-testid="jobs-activity-toggle-group">
+            {data.map((item) => (
+              <TabsTrigger key={item.label} value={item.label} className="px-2 py-1 text-xs">{item.label}</TabsTrigger>
             ))}
-          </div>
+          </TabsList>
         </div>
       </CardHeader>
+      <TabsContent value={current.label} className="mt-0" asChild>
       <CardContent>
         <div ref={chartRef} className="relative h-[200px] w-full">
           {slices.length === 0 ? (
@@ -245,6 +232,8 @@ export default function JobsActivityCard({ data }: JobsActivityCardProps) {
           </div>
         </div>
       </CardContent>
+      </TabsContent>
     </Card>
+    </Tabs>
   );
 }
diff --git a/src/components/dashboard/JobsAppliedCard.tsx b/src/components/dashboard/JobsAppliedCard.tsx
index 05a02de77..3fac509fd 100644
--- a/src/components/dashboard/JobsAppliedCard.tsx
+++ b/src/components/dashboard/JobsAppliedCard.tsx
@@ -22,7 +22,7 @@ export default function JobsAppliedCard() {
   return (
     <Card className="@lg:col-span-2 min-w-0 flex flex-col">
       <CardHeader className="pb-3">
-        <CardTitle className="text-lg text-green-600">Dashboard</CardTitle>
+        <CardTitle className="text-lg">Dashboard</CardTitle>
         <CardDescription className="max-w-lg text-balance leading-relaxed">
           Create new jobs, automations, tasks, activities, questions, and contacts.
         </CardDescription>
diff --git a/src/components/dashboard/RecentCardToggle.tsx b/src/components/dashboard/RecentCardToggle.tsx
index a6fe89ebf..5bf64fc32 100644
--- a/src/components/dashboard/RecentCardToggle.tsx
+++ b/src/components/dashboard/RecentCardToggle.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { StatusBadge } from "@/components/StatusBadge";
 import { getJobStatusBadgeColor } from "@/lib/badge-colors";
-import { cn } from "@/lib/utils";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { APP_CONSTANTS } from "@/lib/constants";
 import { usePersistedTabIndex } from "@/hooks/usePersistedTabIndex";
 import { useActivity } from "@/context/ActivityContext";
@@ -80,36 +80,25 @@ export default function RecentCardToggle({
   const { requestStart, confirmDialog } = useActivitySwitchConfirm();
 
   return (
-    <Card className="mb-2 @3xl/main:absolute @3xl/main:inset-0 @3xl/main:mb-0 @3xl/main:flex @3xl/main:flex-col">
+    <Tabs value={tabs[activeIndex]} onValueChange={(value) => selectTab(tabs.findIndex((item) => item === value))} asChild>
+    <Card className="@3xl/main:absolute @3xl/main:inset-0 @3xl/main:flex @3xl/main:flex-col">
       <CardHeader>
         <div className="flex items-center justify-between gap-2">
-          <CardTitle className="text-lg text-green-600 min-w-0 truncate">
+          <CardTitle className="text-lg min-w-0 truncate">
             Recent {tabs[activeIndex]}
           </CardTitle>
-          <div
-            className="flex shrink-0 rounded-md border text-xs"
-            data-testid="recent-card-toggle-group"
-          >
-            {tabs.map((tab, index) => (
-              <button
-                key={tab}
-                onClick={() => selectTab(index)}
-                className={cn(
-                  "px-2 py-1 transition-colors",
-                  index === 0 && "rounded-l-md",
-                  index === tabs.length - 1 && "rounded-r-md",
-                  activeIndex === index
-                    ? "bg-primary text-primary-foreground"
-                    : "hover:bg-muted",
-                )}
-              >
-                {tab}
-              </button>
+          <TabsList aria-label="Recent records" className="h-8 shrink-0" data-testid="recent-card-toggle-group">
+            {tabs.map((tab) => (
+              <TabsTrigger key={tab} value={tab} className="px-2 py-1 text-xs">{tab}</TabsTrigger>
             ))}
-          </div>
+          </TabsList>
         </div>
       </CardHeader>
+      <TabsContent value={tabs[activeIndex]} className="mt-0 @3xl/main:min-h-0 @3xl/main:flex-1 @3xl/main:overflow-y-auto" asChild>
       <CardContent className="grid auto-rows-max gap-6 px-4 @3xl/main:min-h-0 @3xl/main:flex-1 @3xl/main:overflow-y-auto">
+        {(activeIndex === 0 ? jobs.length : activities.length) === 0 && (
+          <p className="text-sm text-muted-foreground">No recent {tabs[activeIndex].toLowerCase()} yet.</p>
+        )}
         {activeIndex === 0
           ? groupJobsByDate(jobs).map(([date, dateJobs]) => (
               <div key={date} className="grid gap-4">
@@ -168,7 +157,7 @@ export default function RecentCardToggle({
                         className="h-9 w-9 shrink-0"
                       >
                         <span>
-                          <CirclePlay className="text-green-600 h-6 w-6" />
+                          <CirclePlay className="text-primary h-6 w-6" />
                         </span>
                       </Button>
                       <div className="grid gap-1 min-w-0 flex-1">
@@ -190,7 +179,9 @@ export default function RecentCardToggle({
               </div>
             ))}
       </CardContent>
+      </TabsContent>
       {confirmDialog}
     </Card>
+    </Tabs>
   );
 }
diff --git a/src/components/dashboard/WeeklyBarChartToggle.tsx b/src/components/dashboard/WeeklyBarChartToggle.tsx
index 3068665f6..a38d74123 100644
--- a/src/components/dashboard/WeeklyBarChartToggle.tsx
+++ b/src/components/dashboard/WeeklyBarChartToggle.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect, useMemo } from "react";
 import { useTheme } from "next-themes";
 import { ResponsiveBar } from "@nivo/bar";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
-import { cn } from "@/lib/utils";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { APP_CONSTANTS } from "@/lib/constants";
 import { usePersistedTabIndex } from "@/hooks/usePersistedTabIndex";
 import {
@@ -99,11 +99,12 @@ export default function WeeklyBarChartToggle({
       : null;
 
   return (
-    <Card className="mb-2 @3xl/main:mb-0">
+    <Tabs value={current.label} onValueChange={(value) => selectTab(charts.findIndex((item) => item.label === value))} asChild>
+    <Card>
       <CardHeader className="pb-3">
-        <div className="flex items-center justify-between gap-2 mb-1 mt-3">
+        <div className="flex items-center justify-between gap-2">
           <div className="flex items-baseline gap-2 min-w-0">
-            <CardTitle className="text-lg text-green-600 truncate">
+            <CardTitle className="text-lg truncate">
               Weekly {current.label}
             </CardTitle>
             {totalHours !== null && (
@@ -112,30 +113,15 @@ export default function WeeklyBarChartToggle({
               </span>
             )}
           </div>
-          <div
-            className="flex shrink-0 rounded-md border text-xs"
-            data-testid="weekly-chart-toggle-group"
-          >
-            {charts.map((chart, index) => (
-              <button
-                key={chart.label}
-                onClick={() => selectTab(index)}
-                className={cn(
-                  "px-2 py-1 transition-colors",
-                  index === 0 && "rounded-l-md",
-                  index === charts.length - 1 && "rounded-r-md",
-                  activeIndex === index
-                    ? "bg-primary text-primary-foreground"
-                    : "hover:bg-muted",
-                )}
-              >
-                {chart.label}
-              </button>
+          <TabsList aria-label="Weekly chart" className="h-8 shrink-0" data-testid="weekly-chart-toggle-group">
+            {charts.map((item) => (
+              <TabsTrigger key={item.label} value={item.label} className="px-2 py-1 text-xs">{item.label}</TabsTrigger>
             ))}
-          </div>
+          </TabsList>
         </div>
       </CardHeader>
 
+      <TabsContent value={current.label} className="mt-0" asChild>
       <CardContent className="h-[240px] p-3 pt-1">
         <div className="h-[200px]">
           <ResponsiveBar
@@ -259,6 +245,8 @@ export default function WeeklyBarChartToggle({
           />
         </div>
       </CardContent>
+      </TabsContent>
     </Card>
+    </Tabs>
   );
 }
diff --git a/src/components/landing/FeaturesSection.tsx b/src/components/landing/FeaturesSection.tsx
new file mode 100644
index 000000000..c44305700
--- /dev/null
+++ b/src/components/landing/FeaturesSection.tsx
@@ -0,0 +1,82 @@
+import {
+  BriefcaseBusiness,
+  Bot,
+  FileText,
+  Search,
+  Server,
+  Users,
+} from "lucide-react";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const features = [
+  {
+    icon: BriefcaseBusiness,
+    title: "Application tracking",
+    description:
+      "Keep opportunities, application stages, and follow-ups in one workspace.",
+  },
+  {
+    icon: Bot,
+    title: "AI assistant",
+    description:
+      "Review resumes, match opportunities, and prepare with an assistant alongside your work.",
+  },
+  {
+    icon: FileText,
+    title: "Resume management",
+    description:
+      "Organize your resumes and cover letters for each opportunity.",
+  },
+  {
+    icon: Search,
+    title: "Automated job discovery",
+    description:
+      "Set up automations to discover opportunities and bring them into your search.",
+  },
+  {
+    icon: Users,
+    title: "People and preparation",
+    description:
+      "Keep companies, contacts, interview questions, and tasks close to your applications.",
+  },
+  {
+    icon: Server,
+    title: "Self-hosting + MCP",
+    description:
+      "Run JobSync on your own infrastructure and connect your tools through MCP.",
+  },
+];
+
+export default function FeaturesSection() {
+  return (
+    <section aria-labelledby="features-title" className="flex flex-col gap-6">
+      <div>
+        <h2
+          id="features-title"
+          className="text-2xl font-semibold tracking-tight"
+        >
+          One workspace, from discovery to interview.
+        </h2>
+        <p className="mt-2 text-muted-foreground">
+          Keep the details together so you can focus on the next step.
+        </p>
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {features.map(({ icon: Icon, title, description }) => (
+          <Card key={title}>
+            <CardHeader>
+              <Icon className="mb-2 size-5 text-primary" aria-hidden="true" />
+              <CardTitle asChild><h3>{title}</h3></CardTitle>
+              <CardDescription>{description}</CardDescription>
+            </CardHeader>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/landing/LandingPage.tsx b/src/components/landing/LandingPage.tsx
new file mode 100644
index 000000000..e1b7fa315
--- /dev/null
+++ b/src/components/landing/LandingPage.tsx
@@ -0,0 +1,152 @@
+import Link from "next/link";
+import { ArrowRight, BriefcaseBusiness, Github } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import ProductPreview from "./ProductPreview";
+import FeaturesSection from "./FeaturesSection";
+
+const sourceUrl = "https://github.com/Gsync/jobsync";
+export default function LandingPage({ hasUsers }: { hasUsers: boolean }) {
+  const entryRoute = hasUsers ? "/signin" : "/signup";
+  return (
+    <div className="mx-auto max-w-6xl px-4 sm:px-6">
+      <header className="flex min-h-20 items-center justify-between gap-3 border-b">
+        <Link href="/" className="flex items-center gap-2 font-semibold">
+          <BriefcaseBusiness
+            className="size-5 text-primary"
+            aria-hidden="true"
+          />
+          JobSync
+        </Link>
+        <nav
+          aria-label="Public navigation"
+          className="flex items-center gap-1 sm:gap-2"
+        >
+          <Button variant="ghost" size="icon" asChild>
+            <a href={sourceUrl} aria-label="JobSync on GitHub">
+              <Github />
+            </a>
+          </Button>
+          <Button variant="ghost" size="sm" asChild>
+            <Link href="/signin">Sign in</Link>
+          </Button>
+          <Button size="sm" asChild>
+            <Link href={entryRoute}>Get started</Link>
+          </Button>
+        </nav>
+      </header>
+      <main className="flex flex-col gap-16 py-12 sm:gap-20 sm:py-20">
+        <section
+          className="grid items-center gap-10 lg:grid-cols-2"
+          aria-labelledby="hero-title"
+        >
+          <div className="flex flex-col items-start gap-6">
+            <Badge variant="secondary">Open source. Self-hosted.</Badge>
+            <h1
+              id="hero-title"
+              className="text-4xl font-semibold leading-tight tracking-tight sm:text-5xl"
+            >
+              Your self-hosted workspace for the job search.
+            </h1>
+            <p className="max-w-lg text-lg leading-relaxed text-muted-foreground">
+              Track applications, manage resumes, and prepare with AI. Discover
+              opportunities automatically, with your job-search data under your
+              control.
+            </p>
+            <div className="flex flex-wrap gap-3">
+              <Button asChild>
+                <Link href={entryRoute}>
+                  Get started
+                  <ArrowRight />
+                </Link>
+              </Button>
+              <Button variant="outline" asChild>
+                <a href={sourceUrl}>
+                  <Github />
+                  View source on GitHub
+                </a>
+              </Button>
+            </div>
+          </div>
+          <ProductPreview />
+        </section>
+        <FeaturesSection />
+        <section
+          aria-labelledby="workflow-title"
+          className="flex flex-col gap-6"
+        >
+          <h2
+            id="workflow-title"
+            className="text-2xl font-semibold tracking-tight"
+          >
+            A simpler search routine.
+          </h2>
+          <ol className="grid gap-6 sm:grid-cols-3">
+            {[
+              "Add or discover opportunities.",
+              "Match and prepare with AI.",
+              "Track applications and follow-ups.",
+            ].map((step, index) => (
+              <li key={step} className="flex items-start gap-3">
+                <Badge variant="secondary">0{index + 1}</Badge>
+                <p className="text-sm font-medium">{step}</p>
+              </li>
+            ))}
+          </ol>
+        </section>
+        <section
+          aria-labelledby="ownership-title"
+          className="rounded-lg border bg-muted/40 p-6 sm:p-8"
+        >
+          <div className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-center">
+            <div className="max-w-xl">
+              <h2
+                id="ownership-title"
+                className="text-2xl font-semibold tracking-tight"
+              >
+                Your search. Your infrastructure.
+              </h2>
+              <p className="mt-3 leading-relaxed text-muted-foreground">
+                Self-host JobSync to keep your applications, resumes, and
+                contacts under your control. Choose the AI provider that fits
+                your setup.
+              </p>
+            </div>
+            <Button variant="outline" asChild>
+              <a href={`${sourceUrl}#readme`}>
+                Self-hosting guide
+                <ArrowRight />
+              </a>
+            </Button>
+          </div>
+        </section>
+        <section
+          className="flex flex-col items-center gap-4 text-center"
+          aria-labelledby="start-title"
+        >
+          <h2
+            id="start-title"
+            className="text-2xl font-semibold tracking-tight"
+          >
+            Give your next opportunity a home.
+          </h2>
+          <Button asChild>
+            <Link href={entryRoute}>
+              {hasUsers ? "Sign in to your workspace" : "Create account"}
+              <ArrowRight />
+            </Link>
+          </Button>
+        </section>
+      </main>
+      <footer className="flex flex-wrap items-center justify-between gap-4 border-t py-6 text-sm text-muted-foreground">
+        <span>JobSync · Your job search, organized.</span>
+        <a
+          href={sourceUrl}
+          className="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+        >
+          Source on GitHub
+        </a>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/components/landing/ProductPreview.tsx b/src/components/landing/ProductPreview.tsx
new file mode 100644
index 000000000..cda37434e
--- /dev/null
+++ b/src/components/landing/ProductPreview.tsx
@@ -0,0 +1,67 @@
+import { FileText } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function ProductPreview() {
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader className="border-b">
+        <div className="flex items-center justify-between gap-4">
+          <CardTitle>Search overview</CardTitle>
+          <Badge variant="secondary">Example workspace</Badge>
+        </div>
+        <CardDescription>A clear view of your next move.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-5 pt-4">
+        <dl className="grid grid-cols-3 gap-3">
+          {[
+            ["Applications", "12"],
+            ["Interviews", "3"],
+            ["Follow-ups", "2"],
+          ].map(([label, value]) => (
+            <div key={label} className="rounded-md border p-3">
+              <dt className="text-xs text-muted-foreground">{label}</dt>
+              <dd className="mt-1 text-2xl font-semibold tabular-nums">
+                {value}
+              </dd>
+            </div>
+          ))}
+        </dl>
+        <div>
+          <h3 className="mb-3 text-sm font-medium">Recent applications</h3>
+          <ul className="divide-y">
+            {[
+              ["Product designer", "Example Studio", "Interview"],
+              ["Frontend engineer", "Example Labs", "Applied"],
+              ["Design engineer", "Example Works", "Saved"],
+            ].map(([title, company, status]) => (
+              <li
+                key={title}
+                className="flex items-center justify-between gap-3 py-3"
+              >
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium">{title}</p>
+                  <p className="text-xs text-muted-foreground">{company}</p>
+                </div>
+                <Badge variant="outline">{status}</Badge>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="flex items-center gap-3 rounded-md bg-muted p-3 text-sm">
+          <FileText
+            className="size-4 shrink-0 text-primary"
+            aria-hidden="true"
+          />
+          <span>Next up: prepare your resume for an interview.</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/myjobs/JobsContainer.tsx b/src/components/myjobs/JobsContainer.tsx
index 0920c8236..81a6092ae 100644
--- a/src/components/myjobs/JobsContainer.tsx
+++ b/src/components/myjobs/JobsContainer.tsx
@@ -18,7 +18,7 @@ import {
   Tag,
 } from "@/models/job.model";
 import { useSort } from "@/hooks/useSort";
-import Loading from "../Loading";
+import ListSkeleton from "@/components/ListSkeleton";
 import { useRouter } from "next/navigation";
 import MyJobsTable from "./MyJobsTable";
 import MyJobsGrid from "./MyJobsGrid";
@@ -175,8 +175,8 @@ function JobsContainer({
           resetEditJob={resetEditJob}
           addJobInitialOpen={queryParams.get("add-job") === "true"}
         />
-        <CardContent>
-          {initialLoading && <Loading />}
+        <CardContent role="region" aria-label="Job records" aria-busy={initialLoading}>
+          {initialLoading && jobs.length === 0 && <ListSkeleton />}
           {!initialLoading &&
             listLoaded &&
             jobs.length === 0 &&
@@ -217,7 +217,7 @@ function JobsContainer({
           {jobs.length < totalJobs && (
             <div ref={sentinelRef} className="flex justify-center p-4">
               {loadingMore && (
-                <Loader className="h-5 w-5 animate-spin text-blue-500" />
+                <Loader className="h-5 w-5 animate-spin text-primary" />
               )}
             </div>
           )}
diff --git a/src/components/settings/AiSettings.tsx b/src/components/settings/AiSettings.tsx
index d57b23a78..aa5b5ed9a 100644
--- a/src/components/settings/AiSettings.tsx
+++ b/src/components/settings/AiSettings.tsx
@@ -301,7 +301,7 @@ function AiSettings() {
             </SelectContent>
           </Select>
           {fetchError && (
-            <div className="flex items-start gap-1 text-red-600 text-sm mt-2">
+            <div className="flex items-start gap-1 text-destructive text-sm mt-2">
               <XCircle className="h-4 w-4 shrink-0 mt-0.5" />
               <span>{fetchError}</span>
             </div>
@@ -318,7 +318,7 @@ function AiSettings() {
                 <RefreshCw className={`h-3.5 w-3.5 ${isLoadingModels ? "animate-spin" : ""}`} />
                 Retry
               </Button>
-              <div className="flex items-start gap-1 text-red-600 text-sm">
+              <div className="flex items-start gap-1 text-destructive text-sm">
                 <XCircle className="h-4 w-4 shrink-0 mt-0.5" />
                 <span>{connectionError}</span>
               </div>
diff --git a/src/components/tasks/TasksContainer.tsx b/src/components/tasks/TasksContainer.tsx
index 71da19759..03794cbb5 100644
--- a/src/components/tasks/TasksContainer.tsx
+++ b/src/components/tasks/TasksContainer.tsx
@@ -9,7 +9,7 @@ import {
 } from "@/actions/task.actions";
 import { toastActionResult, toastError } from "@/lib/toast";
 import { Task } from "@/models/task.model";
-import Loading from "../Loading";
+import ListSkeleton from "@/components/ListSkeleton";
 import TasksTable from "./TasksTable";
 import { TaskForm } from "./TaskForm";
 import { ActivityType } from "@/models/activity.model";
@@ -107,7 +107,7 @@ function TasksContainer({
           onAddTask={addTaskForm}
         />
         <CardContent>
-          {initialLoading && <Loading />}
+          {initialLoading && <ListSkeleton />}
           {!initialLoading && tasks.length > 0 && (
             <>
               <TasksTable
@@ -128,7 +128,7 @@ function TasksContainer({
           {tasks.length < totalTasks && (
             <div ref={sentinelRef} className="flex justify-center p-4">
               {loadingMore && (
-                <Loader className="h-5 w-5 animate-spin text-blue-500" />
+                <Loader className="h-5 w-5 animate-spin text-primary" />
               )}
             </div>
           )}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 108efce89..423f74cf4 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 
 import { cn } from "@/lib/utils";
 
@@ -23,25 +24,28 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-4", className)}
+    className={cn("flex flex-col gap-1.5 p-4", className)}
     {...props}
   />
 ));
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-));
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "h2";
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "text-lg font-semibold leading-snug tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
@@ -60,7 +64,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
@@ -70,7 +74,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn("flex items-center p-4 pt-0", className)}
     {...props}
   />
 ));
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 000000000..6d08a3ec3
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn(
+        "animate-pulse motion-reduce:animate-none rounded-md bg-accent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };