diff --git a/src/App.test.tsx b/src/App.test.tsx
index 8593b0c7..83f745c4 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -56,14 +56,4 @@ describe("App", () => {
       ).toBeVisible(),
     );
   });
-
-  it("should render breadcrumb", async () => {
-    render(<App />);
-    await waitFor(() =>
-      expect(
-        screen.getByRole("link", { name: "CodeGate Dashboard" }),
-      ).toBeVisible(),
-    );
-    expect(screen.getByRole("link", { name: "Dashboard" })).toBeVisible();
-  });
 });
diff --git a/src/App.tsx b/src/App.tsx
index f3ce84c1..21153c5f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,9 @@
 import { Header } from "./components/Header";
 import { PromptList } from "./components/PromptList";
-import { Routes, Route, Link } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import { usePromptsData } from "./hooks/usePromptsData";
 import { Sidebar } from "./components/Sidebar";
 import { useSse } from "./hooks/useSse";
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbSeparator,
-  BreadcrumbPage,
-} from "./components/ui/breadcrumb";
-import { useBreadcrumb } from "./hooks/useBreadcrumb";
 import { RouteWorkspace } from "./routes/route-workspace";
 import { RouteWorkspaces } from "./routes/route-workspaces";
 import { RouteCertificates } from "./routes/route-certificates";
@@ -23,7 +15,6 @@ import { RouteCertificateSecurity } from "./routes/route-certificate-security";
 function App() {
   const { data: prompts, isLoading } = usePromptsData();
   useSse();
-  const breadcrumb = useBreadcrumb();
 
   return (
     <div className="flex w-screen h-screen">
@@ -33,27 +24,7 @@ function App() {
       <div className="flex-1 flex flex-col overflow-hidden">
         <Header />
 
-        <div className="px-6 py-3">
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <Link to="/">Dashboard</Link>
-              </BreadcrumbItem>
-              {breadcrumb && (
-                <>
-                  <BreadcrumbSeparator />
-                  <BreadcrumbItem>
-                    <BreadcrumbPage className="w-96 truncate">
-                      {breadcrumb}
-                    </BreadcrumbPage>
-                  </BreadcrumbItem>
-                </>
-              )}
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-
-        <div className="flex-1 overflow-y-auto p-6">
+        <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-3">
           <Routes>
             <Route path="/" element={<RouteDashboard />} />
             <Route path="/prompt/:id" element={<RouteChat />} />
diff --git a/src/components/BreadcrumbHome.tsx b/src/components/BreadcrumbHome.tsx
new file mode 100644
index 00000000..86d69b21
--- /dev/null
+++ b/src/components/BreadcrumbHome.tsx
@@ -0,0 +1,5 @@
+import { Breadcrumb } from "@stacklok/ui-kit";
+
+export function BreadcrumbHome() {
+  return <Breadcrumb href="/">Dashboard</Breadcrumb>;
+}
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
deleted file mode 100644
index 314443ff..00000000
--- a/src/components/ui/breadcrumb.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-import { twMerge } from "tailwind-merge";
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode;
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = "Breadcrumb";
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={twMerge(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
-      className,
-    )}
-    {...props}
-  />
-));
-BreadcrumbList.displayName = "BreadcrumbList";
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={twMerge("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-));
-BreadcrumbItem.displayName = "BreadcrumbItem";
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean;
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp
-      ref={ref}
-      className={twMerge("transition-colors", className)}
-      {...props}
-    />
-  );
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={twMerge("font-normal", className)}
-    {...props}
-  />
-));
-BreadcrumbPage.displayName = "BreadcrumbPage";
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={twMerge("[&>svg]:size-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={twMerge("flex size-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="size-4" />
-    <span className="sr-only">More</span>
-  </span>
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};
diff --git a/src/hooks/__tests__/useBreadcrumb.test.tsx b/src/hooks/__tests__/useBreadcrumb.test.tsx
deleted file mode 100644
index c3dd168d..00000000
--- a/src/hooks/__tests__/useBreadcrumb.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { renderHook } from "@testing-library/react";
-import { vi } from "vitest";
-import { useBreadcrumb } from "../useBreadcrumb";
-import { MemoryRouter } from "react-router-dom";
-import { TestQueryClientProvider } from "@/lib/test-utils";
-
-vi.mock("../usePromptsData", () => ({
-  usePromptsData: vi.fn(() => ({
-    data: [
-      {
-        chat_id: "test-chat-id",
-        question_answers: [
-          {
-            question: { message: "Fake question" },
-            answer: { message: "Fake answer" },
-          },
-        ],
-      },
-    ],
-  })),
-}));
-
-vi.mock("../useCurrentPromptStore", () => ({
-  useCurrentPromptStore: vi.fn(() => ({
-    currentPromptId: "test-chat-id",
-  })),
-}));
-
-describe("useBreadcrumb", () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it.each([
-    { path: "/certificates/security", expected: "Certificate Security" },
-    { path: "/certificates", expected: "Certificate Download" },
-    { path: "/help/continue-setup", expected: "Continue Setup" },
-    { path: "/help/copilot-setup", expected: "Copilot Setup" },
-    { path: "/prompt/", expected: "Fake question" },
-    { path: "/", expected: "" },
-  ])("returns breadcrumb for path $path", ({ path, expected }) => {
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
-      <TestQueryClientProvider>
-        <MemoryRouter initialEntries={[path]}>{children}</MemoryRouter>
-      </TestQueryClientProvider>
-    );
-
-    const { result } = renderHook(() => useBreadcrumb(), { wrapper });
-
-    expect(result.current).toBe(expected);
-  });
-});
diff --git a/src/hooks/useBreadcrumb.ts b/src/hooks/useBreadcrumb.ts
deleted file mode 100644
index bedcd6ec..00000000
--- a/src/hooks/useBreadcrumb.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { extractTitleFromMessage, sanitizeQuestionPrompt } from "@/lib/utils";
-import { useLocation } from "react-router-dom";
-import { useCurrentPromptStore } from "./useCurrentPromptStore";
-import { usePromptsData } from "./usePromptsData";
-
-const routes = [
-  { path: "/certificates/security", breadcrumb: "Certificate Security" },
-  { path: "/certificates", breadcrumb: "Certificate Download" },
-  { path: "/help/continue-setup", breadcrumb: "Continue Setup" },
-  { path: "/help/copilot-setup", breadcrumb: "Copilot Setup" },
-  { path: "/prompt/", breadcrumb: "Dashboard" },
-  { path: "/", breadcrumb: "" },
-];
-
-export function useBreadcrumb() {
-  const { pathname } = useLocation();
-  const { currentPromptId } = useCurrentPromptStore();
-  const { data: prompts } = usePromptsData();
-
-  const match = routes.find((route) => pathname.startsWith(route.path));
-  if (match?.path === "/prompt/") {
-    try {
-      const chat = prompts?.find(
-        (prompt) => prompt.chat_id === currentPromptId,
-      );
-      const title = chat?.question_answers?.[0]?.question?.message ?? "";
-
-      const sanitized = sanitizeQuestionPrompt({
-        question: title,
-        answer: chat?.question_answers?.[0]?.answer?.message ?? "",
-      });
-      return extractTitleFromMessage(sanitized) ?? "";
-    } catch {
-      return "";
-    }
-  }
-
-  return match ? match.breadcrumb : "";
-}
diff --git a/src/routes/__tests__/route-certificate-security.test.tsx b/src/routes/__tests__/route-certificate-security.test.tsx
new file mode 100644
index 00000000..1ef52b0d
--- /dev/null
+++ b/src/routes/__tests__/route-certificate-security.test.tsx
@@ -0,0 +1,19 @@
+import { render } from "@/lib/test-utils";
+import { screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { RouteCertificateSecurity } from "../route-certificate-security";
+
+describe("Certificate security", () => {
+  it("has breadcrumbs", () => {
+    render(<RouteCertificateSecurity />);
+
+    const breadcrumbs = screen.getByRole("list", { name: "Breadcrumbs" });
+    expect(breadcrumbs).toBeVisible();
+    expect(
+      within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
+    ).toHaveAttribute("href", "/");
+    expect(
+      within(breadcrumbs).getByText(/certificate security/i),
+    ).toBeVisible();
+  });
+});
diff --git a/src/routes/__tests__/route-certificates.test.tsx b/src/routes/__tests__/route-certificates.test.tsx
index 3ed7d935..46a4ecf1 100644
--- a/src/routes/__tests__/route-certificates.test.tsx
+++ b/src/routes/__tests__/route-certificates.test.tsx
@@ -1,5 +1,5 @@
 import { render } from "@/lib/test-utils";
-import { screen } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { RouteCertificates } from "../route-certificates";
@@ -27,6 +27,17 @@ describe("Certificates", () => {
     expect(screen.getByText("Linux")).toBeVisible();
   });
 
+  it("has breadcrumbs", () => {
+    render(<RouteCertificates />);
+
+    const breadcrumbs = screen.getByRole("list", { name: "Breadcrumbs" });
+    expect(breadcrumbs).toBeVisible();
+    expect(
+      within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
+    ).toHaveAttribute("href", "/");
+    expect(within(breadcrumbs).getByText(/certificates/i)).toBeVisible();
+  });
+
   it("should render macOS certificate installation", async () => {
     render(<RouteCertificates />);
 
diff --git a/src/routes/__tests__/route-chat.test.tsx b/src/routes/__tests__/route-chat.test.tsx
index 8c8acd13..f90f38ad 100644
--- a/src/routes/__tests__/route-chat.test.tsx
+++ b/src/routes/__tests__/route-chat.test.tsx
@@ -49,7 +49,7 @@ vi.mock("@/hooks/usePromptsData", () => ({
 }));
 
 describe("Chat", () => {
-  it("should render secret issue chat", () => {
+  it("render secret issue chat", () => {
     render(<RouteChat />, {
       routeConfig: {
         initialEntries: ["/prompt/chatcmpl-7d87679de7ed41639eb91d8ebbaa6f72"],
@@ -60,9 +60,6 @@ describe("Chat", () => {
     expect(screen.getByText(/REDACTED</i)).toBeVisible();
     expect(screen.getByTestId("avatar-user")).toBeVisible();
     expect(screen.getByTestId("avatar-ai")).toBeVisible();
-    expect(
-      screen.getByText(/do you see any security issue\?\./i),
-    ).toBeVisible();
     expect(
       screen.getByRole("heading", {
         name: /recommendations for security improvements/i,
@@ -76,5 +73,14 @@ describe("Chat", () => {
         .getByRole("code")
         .className.includes("language-tsx"),
     ).toBeTruthy();
+
+    const breadcrumbs = screen.getByRole("list", { name: "Breadcrumbs" });
+    expect(breadcrumbs).toBeVisible();
+    expect(
+      within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
+    ).toHaveAttribute("href", "/");
+    expect(
+      within(breadcrumbs).getByText(/do you see any security issue/i),
+    ).toBeVisible();
   });
 });
diff --git a/src/routes/__tests__/route-help.test.tsx b/src/routes/__tests__/route-help.test.tsx
new file mode 100644
index 00000000..6fa347b0
--- /dev/null
+++ b/src/routes/__tests__/route-help.test.tsx
@@ -0,0 +1,21 @@
+import { render } from "@/lib/test-utils";
+import { screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { RouteHelp } from "../route-help";
+
+describe("Help page", () => {
+  it("has breadcrumbs", () => {
+    render(<RouteHelp />, {
+      routeConfig: {
+        initialEntries: ["/help/continue-setup"],
+      },
+      pathConfig: "/help/:id",
+    });
+    const breadcrumbs = screen.getByRole("list", { name: "Breadcrumbs" });
+    expect(breadcrumbs).toBeVisible();
+    expect(
+      within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
+    ).toHaveAttribute("href", "/");
+    expect(within(breadcrumbs).getByText(/help/i)).toBeVisible();
+  });
+});
diff --git a/src/routes/__tests__/route-workspace.test.tsx b/src/routes/__tests__/route-workspace.test.tsx
index 1d13d534..5d7a301a 100644
--- a/src/routes/__tests__/route-workspace.test.tsx
+++ b/src/routes/__tests__/route-workspace.test.tsx
@@ -1,4 +1,4 @@
-import { render } from "@/lib/test-utils";
+import { render, within } from "@/lib/test-utils";
 import { test, expect } from "vitest";
 import { RouteWorkspace } from "../route-workspace";
 
@@ -37,3 +37,17 @@ test("renders system prompt editor", () => {
 
   expect(getByTestId("system-prompt-editor")).toBeVisible();
 });
+
+test("has breadcrumbs", () => {
+  const { getByRole } = renderComponent();
+
+  const breadcrumbs = getByRole("list", { name: "Breadcrumbs" });
+  expect(breadcrumbs).toBeVisible();
+  expect(
+    within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
+  ).toHaveAttribute("href", "/");
+  expect(
+    within(breadcrumbs).getByRole("link", { name: /manage workspaces/i }),
+  ).toHaveAttribute("href", "/workspaces");
+  expect(within(breadcrumbs).getByText(/workspace settings/i)).toBeVisible();
+});
diff --git a/src/routes/__tests__/route-workspaces.test.tsx b/src/routes/__tests__/route-workspaces.test.tsx
index 59db5d0b..a543de28 100644
--- a/src/routes/__tests__/route-workspaces.test.tsx
+++ b/src/routes/__tests__/route-workspaces.test.tsx
@@ -8,6 +8,15 @@ describe("Workspaces page", () => {
     render(<RouteWorkspaces />);
   });
 
+  it("has breadcrumbs", () => {
+    const breadcrumbs = screen.getByRole("list", { name: "Breadcrumbs" });
+    expect(breadcrumbs).toBeVisible();
+    expect(
+      within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
+    ).toHaveAttribute("href", "/");
+    expect(within(breadcrumbs).getByText(/manage workspaces/i)).toBeVisible();
+  });
+
   it("has a title", () => {
     expect(
       screen.getByRole("heading", { name: /manage workspaces/i }),
diff --git a/src/routes/route-certificate-security.tsx b/src/routes/route-certificate-security.tsx
index d43e40a7..d2b2c169 100644
--- a/src/routes/route-certificate-security.tsx
+++ b/src/routes/route-certificate-security.tsx
@@ -1,4 +1,5 @@
-import { Card, CardBody } from "@stacklok/ui-kit";
+import { BreadcrumbHome } from "@/components/BreadcrumbHome";
+import { Breadcrumb, Breadcrumbs, Card, CardBody } from "@stacklok/ui-kit";
 
 const SecurityShieldIcon = () => (
   <svg viewBox="0 0 24 24" className="size-16 text-brand-700">
@@ -59,139 +60,146 @@ const OpenSourceIcon = () => (
 
 export function RouteCertificateSecurity() {
   return (
-    <div className="flex flex-col h-full">
-      <div className="max-w-4xl mx-auto mb-4">
-        <h1 className="text-3xl font-bold mb-8">Certificate Security</h1>
+    <>
+      <Breadcrumbs>
+        <BreadcrumbHome />
+        <Breadcrumb>Certificate Security</Breadcrumb>
+      </Breadcrumbs>
 
-        <Card className="mb-8">
-          <CardBody>
-            <div className="flex justify-center mb-4">
-              <SecurityShieldIcon />
-            </div>
-            <h2 className="text-xl font-semibold mb-4">
-              Robust Certificate Security
-            </h2>
-            <p className="text-secondary mb-4">
-              Security is a top priority for us. We have designed CodeGate's
-              local certificate management with security in mind, balanced
-              against ease of use.
-            </p>
-            <p className="text-secondary">
-              We always seek to improve and balance security, privacy, and
-              usability.
-            </p>
-          </CardBody>
-        </Card>
+      <div className="flex flex-col h-full">
+        <div className="max-w-4xl mx-auto mb-4">
+          <h1 className="text-3xl font-bold mb-8">Certificate Security</h1>
 
-        <Card className="mb-8">
-          <CardBody>
-            <div className="flex justify-center mb-4">
-              <KeySecurityIcon />
-            </div>
-            <h2 className="text-xl font-semibold mb-4">
-              Key security features
-            </h2>
-            <div className="space-y-6">
-              <div>
-                <h3 className="font-semibold text-lg mb-2">
-                  Per-domain certificate generation
-                </h3>
-                <p className="text-secondary mb-2">
-                  Instead of using wildcard certificates, CodeGate generates a
-                  unique certificate for each domain. This approach minimizes
-                  security risks by limiting the impact of any single
-                  certificate compromise.
-                </p>
+          <Card className="mb-8">
+            <CardBody>
+              <div className="flex justify-center mb-4">
+                <SecurityShieldIcon />
               </div>
-              <div>
-                <h3 className="font-semibold text-lg mb-2">
-                  High-strength encryption with 4096-bit RSA keys
-                </h3>
-                <p className="text-secondary mb-2">
-                  CodeGate utilizes 4096-bit RSA keys for certificate authority
-                  operations, providing enhanced security compared to standard
-                  2048-bit keys. The increased key length significantly reduces
-                  the risk of brute-force attacks, ensuring long-term protection
-                  for your data. To balance performance, 2048-bit keys are used
-                  for server certificates.
-                </p>
+              <h2 className="text-xl font-semibold mb-4">
+                Robust Certificate Security
+              </h2>
+              <p className="text-secondary mb-4">
+                Security is a top priority for us. We have designed CodeGate's
+                local certificate management with security in mind, balanced
+                against ease of use.
+              </p>
+              <p className="text-secondary">
+                We always seek to improve and balance security, privacy, and
+                usability.
+              </p>
+            </CardBody>
+          </Card>
+
+          <Card className="mb-8">
+            <CardBody>
+              <div className="flex justify-center mb-4">
+                <KeySecurityIcon />
               </div>
-              <div>
-                <h3 className="font-semibold text-lg mb-2">
-                  Secure SSL/TLS configuration
-                </h3>
-                <p className="text-secondary mb-2">
-                  CodeGate's SSL context is configured to enforce the latest
-                  security standards, including strong cipher suites and
-                  disabling outdated protocols. This ensures secure and
-                  efficient encrypted communications.
-                </p>
+              <h2 className="text-xl font-semibold mb-4">
+                Key security features
+              </h2>
+              <div className="space-y-6">
+                <div>
+                  <h3 className="font-semibold text-lg mb-2">
+                    Per-domain certificate generation
+                  </h3>
+                  <p className="text-secondary mb-2">
+                    Instead of using wildcard certificates, CodeGate generates a
+                    unique certificate for each domain. This approach minimizes
+                    security risks by limiting the impact of any single
+                    certificate compromise.
+                  </p>
+                </div>
+                <div>
+                  <h3 className="font-semibold text-lg mb-2">
+                    High-strength encryption with 4096-bit RSA keys
+                  </h3>
+                  <p className="text-secondary mb-2">
+                    CodeGate utilizes 4096-bit RSA keys for certificate
+                    authority operations, providing enhanced security compared
+                    to standard 2048-bit keys. The increased key length
+                    significantly reduces the risk of brute-force attacks,
+                    ensuring long-term protection for your data. To balance
+                    performance, 2048-bit keys are used for server certificates.
+                  </p>
+                </div>
+                <div>
+                  <h3 className="font-semibold text-lg mb-2">
+                    Secure SSL/TLS configuration
+                  </h3>
+                  <p className="text-secondary mb-2">
+                    CodeGate's SSL context is configured to enforce the latest
+                    security standards, including strong cipher suites and
+                    disabling outdated protocols. This ensures secure and
+                    efficient encrypted communications.
+                  </p>
+                </div>
+                <div>
+                  <h3 className="font-semibold text-lg mb-2">
+                    Certificate caching and management
+                  </h3>
+                  <p className="text-secondary mb-2">
+                    Certificates are cached efficiently to optimize performance
+                    without compromising security. Additionally, mechanisms are
+                    in place to manage certificate lifecycle and prevent
+                    resource exhaustion.
+                  </p>
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+
+          <Card className="mb-8">
+            <CardBody>
+              <div className="flex justify-center mb-4">
+                <OpenSourceIcon />
               </div>
-              <div>
-                <h3 className="font-semibold text-lg mb-2">
-                  Certificate caching and management
-                </h3>
-                <p className="text-secondary mb-2">
-                  Certificates are cached efficiently to optimize performance
-                  without compromising security. Additionally, mechanisms are in
-                  place to manage certificate lifecycle and prevent resource
-                  exhaustion.
+              <h2 className="text-xl font-semibold mb-4">
+                Open source and community engagement
+              </h2>
+              <div className="space-y-4">
+                <p className="text-secondary">
+                  Security has been a fundamental consideration throughout the
+                  development of CodeGate. Our comprehensive approach ensures
+                  that your development environment remains secure without
+                  sacrificing functionality or performance.
+                </p>
+                <p className="text-secondary">
+                  We believe in transparency and continuous improvement. By
+                  making our code open source, we invite the global security
+                  community to review, audit, and contribute to enhancing our
+                  security measures.
+                </p>
+                <p className="text-secondary">
+                  If you discover a security vulnerability or have suggestions
+                  for improvement, please reach out to us at{" "}
+                  <a
+                    href="mailto:security@stacklok.com"
+                    className="text-brand-600 hover:text-brand-800 underline"
+                  >
+                    security@stacklok.com
+                  </a>
+                  . Your contributions help us maintain the highest security
+                  standards.
+                </p>
+                <p className="text-secondary">
+                  Explore our codebase on{" "}
+                  <a
+                    href="https://github.com/stacklok/codegate"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-brand-600 hover:text-brand-800 underline"
+                  >
+                    GitHub
+                  </a>{" "}
+                  and join our community to help ensure CodeGate is secure and
+                  reliable for everyone.
                 </p>
               </div>
-            </div>
-          </CardBody>
-        </Card>
-
-        <Card className="mb-8">
-          <CardBody>
-            <div className="flex justify-center mb-4">
-              <OpenSourceIcon />
-            </div>
-            <h2 className="text-xl font-semibold mb-4">
-              Open source and community engagement
-            </h2>
-            <div className="space-y-4">
-              <p className="text-secondary">
-                Security has been a fundamental consideration throughout the
-                development of CodeGate. Our comprehensive approach ensures that
-                your development environment remains secure without sacrificing
-                functionality or performance.
-              </p>
-              <p className="text-secondary">
-                We believe in transparency and continuous improvement. By making
-                our code open source, we invite the global security community to
-                review, audit, and contribute to enhancing our security
-                measures.
-              </p>
-              <p className="text-secondary">
-                If you discover a security vulnerability or have suggestions for
-                improvement, please reach out to us at{" "}
-                <a
-                  href="mailto:security@stacklok.com"
-                  className="text-brand-600 hover:text-brand-800 underline"
-                >
-                  security@stacklok.com
-                </a>
-                . Your contributions help us maintain the highest security
-                standards.
-              </p>
-              <p className="text-secondary">
-                Explore our codebase on{" "}
-                <a
-                  href="https://github.com/stacklok/codegate"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-brand-600 hover:text-brand-800 underline"
-                >
-                  GitHub
-                </a>{" "}
-                and join our community to help ensure CodeGate is secure and
-                reliable for everyone.
-              </p>
-            </div>
-          </CardBody>
-        </Card>
+            </CardBody>
+          </Card>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/routes/route-certificates.tsx b/src/routes/route-certificates.tsx
index 6461d98f..f11ba4a4 100644
--- a/src/routes/route-certificates.tsx
+++ b/src/routes/route-certificates.tsx
@@ -1,5 +1,13 @@
 // import { Card } from "./ui/card";
-import { Card, Button, LinkButton, CardBody } from "@stacklok/ui-kit";
+import { BreadcrumbHome } from "@/components/BreadcrumbHome";
+import {
+  Card,
+  Button,
+  LinkButton,
+  CardBody,
+  Breadcrumbs,
+  Breadcrumb,
+} from "@stacklok/ui-kit";
 import { useState, ReactNode } from "react";
 
 type OS = "macos" | "windows" | "linux";
@@ -136,138 +144,147 @@ export function RouteCertificates() {
   const currentSteps = steps[activeOS][activeAction];
 
   return (
-    <div className="max-w-4xl mx-auto px-4 pr-6">
-      <h1 className="text-3xl font-bold mb-8">Certificates</h1>
+    <>
+      <Breadcrumbs>
+        <BreadcrumbHome />
+        <Breadcrumb>Certificates</Breadcrumb>
+      </Breadcrumbs>
 
-      <Card className="mb-8">
-        <CardBody>
-          <div className="flex items-start gap-6">
-            <div className="size-16 bg-brand-50 rounded-full flex items-center justify-center shrink-0">
-              <ShieldIcon />
-            </div>
-            <div className="grow">
-              <h2 className="text-xl font-semibold mb-2">
-                CodeGate CA certificate
-              </h2>
-              <p className="text-secondary mb-4">
-                This certificate allows CodeGate to act as a secure proxy for
-                integrations such as GitHub Copilot.
-              </p>
-              <Button onPress={handleDownload}>Download certificate</Button>
-            </div>
-          </div>
-        </CardBody>
-      </Card>
+      <div className="max-w-4xl mx-auto px-4 pr-6">
+        <h1 className="text-3xl font-bold mb-8">Certificates</h1>
 
-      <Card className="mb-8">
-        <CardBody>
-          <h2 className="text-xl font-semibold mb-4">
-            Is this certificate safe to install on my machine?
-          </h2>
-          <div className="space-y-4">
-            <div className="flex gap-3">
-              <CheckIcon />
-              <p className="text-secondary">
-                <strong>Local-only:</strong> CodeGate runs entirely on your
-                machine within an isolated container, ensuring all data
-                processing stays local without any external transmissions.
-              </p>
+        <Card className="mb-8">
+          <CardBody>
+            <div className="flex items-start gap-6">
+              <div className="size-16 bg-brand-50 rounded-full flex items-center justify-center shrink-0">
+                <ShieldIcon />
+              </div>
+              <div className="grow">
+                <h2 className="text-xl font-semibold mb-2">
+                  CodeGate CA certificate
+                </h2>
+                <p className="text-secondary mb-4">
+                  This certificate allows CodeGate to act as a secure proxy for
+                  integrations such as GitHub Copilot.
+                </p>
+                <Button onPress={handleDownload}>Download certificate</Button>
+              </div>
             </div>
-            <div className="flex gap-3">
-              <CheckIcon />
-              <p className="text-secondary">
-                <strong>Secure certificate handling:</strong> this custom CA is
-                locally generated and managed. CodeGate developers have no
-                access to it.
-              </p>
+          </CardBody>
+        </Card>
+
+        <Card className="mb-8">
+          <CardBody>
+            <h2 className="text-xl font-semibold mb-4">
+              Is this certificate safe to install on my machine?
+            </h2>
+            <div className="space-y-4">
+              <div className="flex gap-3">
+                <CheckIcon />
+                <p className="text-secondary">
+                  <strong>Local-only:</strong> CodeGate runs entirely on your
+                  machine within an isolated container, ensuring all data
+                  processing stays local without any external transmissions.
+                </p>
+              </div>
+              <div className="flex gap-3">
+                <CheckIcon />
+                <p className="text-secondary">
+                  <strong>Secure certificate handling:</strong> this custom CA
+                  is locally generated and managed. CodeGate developers have no
+                  access to it.
+                </p>
+              </div>
+              <div className="flex gap-3">
+                <CheckIcon />
+                <p className="text-secondary">
+                  <strong>No external communications:</strong> CodeGate is
+                  designed with no capability to call home or communicate with
+                  external servers, outside of those requested by the IDE or
+                  Agent.
+                </p>
+              </div>
             </div>
-            <div className="flex gap-3">
-              <CheckIcon />
-              <p className="text-secondary">
-                <strong>No external communications:</strong> CodeGate is
-                designed with no capability to call home or communicate with
-                external servers, outside of those requested by the IDE or
-                Agent.
-              </p>
+            <div className="mt-6 flex justify-start">
+              <LinkButton href="/certificates/security">
+                <span className="mr-2">Learn more</span>
+                <ArrowIcon />
+              </LinkButton>
             </div>
-          </div>
-          <div className="mt-6 flex justify-start">
-            <LinkButton href="/certificates/security">
-              <span className="mr-2">Learn more</span>
-              <ArrowIcon />
-            </LinkButton>
-          </div>
-        </CardBody>
-      </Card>
+          </CardBody>
+        </Card>
 
-      <Card className="mb-8">
-        <CardBody>
-          <h2 className="text-xl font-semibold mb-6">Certificate Management</h2>
-          {/* OS Selection Tabs */}
-          <div className="flex space-x-1 rounded-lg bg-gray-100 p-1">
-            <button
-              onClick={() => setActiveOS("macos")}
-              className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                activeOS === "macos"
-                  ? "bg-base text-brand-700 shadow-sm"
-                  : "text-gray-500 hover:text-secondary"
-              }`}
-            >
-              macOS
-            </button>
-            <button
-              onClick={() => setActiveOS("windows")}
-              className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                activeOS === "windows"
-                  ? "bg-base text-brand-700 shadow-sm"
-                  : "text-gray-500 hover:text-secondary"
-              }`}
-            >
-              Windows
-            </button>
-            <button
-              onClick={() => setActiveOS("linux")}
-              className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                activeOS === "linux"
-                  ? "bg-base text-brand-700 shadow-sm"
-                  : "text-gray-500 hover:text-secondary"
-              }`}
-            >
-              Linux
-            </button>
-          </div>
-          {/* Action Selection Tabs */}
-          <div className="flex space-x-4 my-6">
-            <button
-              onClick={() => setActiveAction("install")}
-              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors border ${
-                activeAction === "install"
-                  ? "border-brand-200 bg-brand-50 text-brand-700"
-                  : "border-gray-200 text-gray-500 hover:text-secondary"
-              }`}
-            >
-              Install certificate
-            </button>
-            <button
-              onClick={() => setActiveAction("remove")}
-              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors border ${
-                activeAction === "remove"
-                  ? "border-brand-200 bg-brand-50 text-brand-700"
-                  : "border-gray-200 text-gray-500 hover:text-secondary"
-              }`}
-            >
-              Remove certificate
-            </button>
-          </div>
-          <div className="mt-6">
-            <div className="space-y-4">
-              {currentSteps.map((step, index) => (
-                <InstructionStep key={index} number={index + 1} text={step} />
-              ))}
+        <Card className="mb-8">
+          <CardBody>
+            <h2 className="text-xl font-semibold mb-6">
+              Certificate Management
+            </h2>
+            {/* OS Selection Tabs */}
+            <div className="flex space-x-1 rounded-lg bg-gray-100 p-1">
+              <button
+                onClick={() => setActiveOS("macos")}
+                className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+                  activeOS === "macos"
+                    ? "bg-base text-brand-700 shadow-sm"
+                    : "text-gray-500 hover:text-secondary"
+                }`}
+              >
+                macOS
+              </button>
+              <button
+                onClick={() => setActiveOS("windows")}
+                className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+                  activeOS === "windows"
+                    ? "bg-base text-brand-700 shadow-sm"
+                    : "text-gray-500 hover:text-secondary"
+                }`}
+              >
+                Windows
+              </button>
+              <button
+                onClick={() => setActiveOS("linux")}
+                className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+                  activeOS === "linux"
+                    ? "bg-base text-brand-700 shadow-sm"
+                    : "text-gray-500 hover:text-secondary"
+                }`}
+              >
+                Linux
+              </button>
             </div>
-          </div>
-        </CardBody>
-      </Card>
-    </div>
+            {/* Action Selection Tabs */}
+            <div className="flex space-x-4 my-6">
+              <button
+                onClick={() => setActiveAction("install")}
+                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors border ${
+                  activeAction === "install"
+                    ? "border-brand-200 bg-brand-50 text-brand-700"
+                    : "border-gray-200 text-gray-500 hover:text-secondary"
+                }`}
+              >
+                Install certificate
+              </button>
+              <button
+                onClick={() => setActiveAction("remove")}
+                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors border ${
+                  activeAction === "remove"
+                    ? "border-brand-200 bg-brand-50 text-brand-700"
+                    : "border-gray-200 text-gray-500 hover:text-secondary"
+                }`}
+              >
+                Remove certificate
+              </button>
+            </div>
+            <div className="mt-6">
+              <div className="space-y-4">
+                {currentSteps.map((step, index) => (
+                  <InstructionStep key={index} number={index + 1} text={step} />
+                ))}
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+    </>
   );
 }
diff --git a/src/routes/route-chat.tsx b/src/routes/route-chat.tsx
index 95ef8442..e0c6da82 100644
--- a/src/routes/route-chat.tsx
+++ b/src/routes/route-chat.tsx
@@ -1,6 +1,6 @@
 import { useParams } from "react-router-dom";
 import { usePromptsData } from "@/hooks/usePromptsData";
-import { sanitizeQuestionPrompt } from "@/lib/utils";
+import { extractTitleFromMessage, sanitizeQuestionPrompt } from "@/lib/utils";
 import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
 import {
   ChatBubble,
@@ -8,37 +8,58 @@ import {
   ChatBubbleMessage,
 } from "@/components/ui/chat/chat-bubble";
 import { Markdown } from "@/components/Markdown";
+import { Breadcrumb, Breadcrumbs } from "@stacklok/ui-kit";
+import { BreadcrumbHome } from "@/components/BreadcrumbHome";
 
 export function RouteChat() {
   const { id } = useParams();
   const { data: prompts } = usePromptsData();
   const chat = prompts?.find((prompt) => prompt.chat_id === id);
 
+  const title =
+    chat === undefined
+      ? ""
+      : extractTitleFromMessage(
+          chat.question_answers?.[0]?.question?.message
+            ? sanitizeQuestionPrompt({
+                question: chat.question_answers?.[0].question.message,
+                answer: chat.question_answers?.[0]?.answer?.message ?? "",
+              })
+            : `Prompt ${chat.conversation_timestamp}`,
+        );
+
   return (
-    <div className="w-[calc(100vw-18rem)]">
-      <ChatMessageList>
-        {(chat?.question_answers ?? []).map(({ question, answer }, index) => (
-          <div key={index} className="flex flex-col size-full gap-6">
-            <ChatBubble variant="sent">
-              <ChatBubbleAvatar data-testid="avatar-user" fallback="User" />
-              <ChatBubbleMessage variant="sent">
-                <Markdown>
-                  {sanitizeQuestionPrompt({
-                    question: question?.message ?? "",
-                    answer: answer?.message ?? "",
-                  })}
-                </Markdown>
-              </ChatBubbleMessage>
-            </ChatBubble>
-            <ChatBubble variant="received">
-              <ChatBubbleAvatar data-testid="avatar-ai" fallback="AI" />
-              <ChatBubbleMessage variant="received">
-                <Markdown>{answer?.message ?? ""}</Markdown>
-              </ChatBubbleMessage>
-            </ChatBubble>
-          </div>
-        ))}
-      </ChatMessageList>
-    </div>
+    <>
+      <Breadcrumbs>
+        <BreadcrumbHome />
+        <Breadcrumb>{title}</Breadcrumb>
+      </Breadcrumbs>
+
+      <div className="w-[calc(100vw-18rem)]">
+        <ChatMessageList>
+          {(chat?.question_answers ?? []).map(({ question, answer }, index) => (
+            <div key={index} className="flex flex-col size-full gap-6">
+              <ChatBubble variant="sent">
+                <ChatBubbleAvatar data-testid="avatar-user" fallback="User" />
+                <ChatBubbleMessage variant="sent">
+                  <Markdown>
+                    {sanitizeQuestionPrompt({
+                      question: question?.message ?? "",
+                      answer: answer?.message ?? "",
+                    })}
+                  </Markdown>
+                </ChatBubbleMessage>
+              </ChatBubble>
+              <ChatBubble variant="received">
+                <ChatBubbleAvatar data-testid="avatar-ai" fallback="AI" />
+                <ChatBubbleMessage variant="received">
+                  <Markdown>{answer?.message ?? ""}</Markdown>
+                </ChatBubbleMessage>
+              </ChatBubble>
+            </div>
+          ))}
+        </ChatMessageList>
+      </div>
+    </>
   );
 }
diff --git a/src/routes/route-help.tsx b/src/routes/route-help.tsx
index 0a8d2f0d..8fc1c8ed 100644
--- a/src/routes/route-help.tsx
+++ b/src/routes/route-help.tsx
@@ -8,6 +8,8 @@ import "prismjs/components/prism-python";
 import "prismjs/components/prism-json";
 import "prismjs/components/prism-yaml";
 import { Markdown } from "@/components/Markdown";
+import { Breadcrumb, Breadcrumbs } from "@stacklok/ui-kit";
+import { BreadcrumbHome } from "@/components/BreadcrumbHome";
 
 export function RouteHelp() {
   const { section } = useParams();
@@ -39,8 +41,15 @@ export function RouteHelp() {
   }, [section]);
 
   return (
-    <div className="max-w-5xl bg-base rounded-lg px-6 mx-auto">
-      <Markdown>{content}</Markdown>
-    </div>
+    <>
+      <Breadcrumbs>
+        <BreadcrumbHome />
+        <Breadcrumb>Help</Breadcrumb>
+      </Breadcrumbs>
+
+      <div className="max-w-5xl bg-base rounded-lg px-6 mx-auto">
+        <Markdown>{content}</Markdown>
+      </div>
+    </>
   );
 }
diff --git a/src/routes/route-workspace.tsx b/src/routes/route-workspace.tsx
index efb89eb5..db68a247 100644
--- a/src/routes/route-workspace.tsx
+++ b/src/routes/route-workspace.tsx
@@ -1,10 +1,17 @@
+import { BreadcrumbHome } from "@/components/BreadcrumbHome";
 import { SystemPromptEditor } from "@/features/workspace-system-prompt/components/system-prompt-editor";
 import { WorkspaceName } from "@/features/workspace/components/workspace-name";
-import { Heading } from "@stacklok/ui-kit";
+import { Breadcrumb, Breadcrumbs, Heading } from "@stacklok/ui-kit";
 
 export function RouteWorkspace() {
   return (
     <>
+      <Breadcrumbs>
+        <BreadcrumbHome />
+        <Breadcrumb href="/workspaces">Manage Workspaces</Breadcrumb>
+        <Breadcrumb>Workspace Settings</Breadcrumb>
+      </Breadcrumbs>
+
       <Heading level={1}>Workspace settings</Heading>
       <WorkspaceName className="mb-4" />
       <SystemPromptEditor className="mb-4" />
diff --git a/src/routes/route-workspaces.tsx b/src/routes/route-workspaces.tsx
index ac2ce14f..05612a73 100644
--- a/src/routes/route-workspaces.tsx
+++ b/src/routes/route-workspaces.tsx
@@ -1,5 +1,8 @@
 import { useListWorkspaces } from "@/features/workspace/hooks/use-list-workspaces";
+import { BreadcrumbHome } from "@/components/BreadcrumbHome";
 import {
+  Breadcrumb,
+  Breadcrumbs,
   Cell,
   Column,
   Heading,
@@ -16,7 +19,12 @@ export function RouteWorkspaces() {
   const workspaces = result.data?.workspaces ?? [];
 
   return (
-    <div>
+    <>
+      <Breadcrumbs>
+        <BreadcrumbHome />
+        <Breadcrumb>Manage Workspaces</Breadcrumb>
+      </Breadcrumbs>
+
       <Heading level={1} className="mb-5">
         Manage Workspaces
       </Heading>
@@ -49,6 +57,6 @@ export function RouteWorkspaces() {
           ))}
         </TableBody>
       </Table>
-    </div>
+    </>
   );
 }