diff --git a/apps/web/app/jobs/page.tsx b/apps/web/app/jobs/page.tsx
index e1a4546d..17aecf17 100644
--- a/apps/web/app/jobs/page.tsx
+++ b/apps/web/app/jobs/page.tsx
@@ -1,17 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import {
-  ArrowUpRight,
-  Briefcase,
-  Clock3,
-  DollarSign,
-  Layers,
-  Plus,
-  Sparkles,
-  Users,
-  Zap,
-} from "lucide-react";
+import { ArrowUpRight, Bookmark, Clock3, Search, SlidersHorizontal } from "lucide-react";
 import { ShareJobButton } from "@/components/jobs/share-job-button";
 import { JobFilters } from "@/components/jobs/job-filters";
 import { Stars } from "@/components/stars";
@@ -19,8 +9,7 @@ import { EmptyState } from "@/components/ui/empty-state";
 import { JobCardSkeleton } from "@/components/ui/skeleton";
 import { useJobBoard } from "@/hooks/use-job-board";
 import { formatDate, formatUsdc, shortenAddress } from "@/lib/format";
-import { cn } from "@/lib/utils";
-import type { BoardJob } from "@/hooks/use-job-board";
+import { useSavedJobsStore } from "@/lib/store/use-saved-jobs-store";
 
 // ─── Status config ───────────────────────────────────────────────────────────
 
@@ -231,21 +220,9 @@ function JobCard({ job }: { job: BoardJob }) {
 // ─── Page ────────────────────────────────────────────────────────────────────
 
 export default function JobsPage() {
-  const {
-    paginatedJobs,
-    loading,
-    error,
-    query,
-    activeTag,
-    sortBy,
-    availableTags,
-    minBudget,
-    maxBudget,
-    filterStatus,
-    actions,
-  } = useJobBoard();
-
-  const totalOpen = paginatedJobs.length;
+  const { jobs, loading, error, query, activeTag, sortBy, availableTags, actions } =
+    useJobBoard();
+  const { toggleSaveJob, isSaved } = useSavedJobsStore();
 
   function resetFilters() {
     actions.setQuery("");
@@ -349,6 +326,123 @@ export default function JobsPage() {
             ))}
           </div>
         ) : (
+          <div className="grid gap-5 lg:grid-cols-2">
+            {jobs.map((job) => (
+              <div key={job.id} className="group relative" data-testid="job-card">
+                <Link
+                  href={`/jobs/${job.id}`}
+                  className="block rounded-[1.75rem] border border-slate-200 bg-white/85 p-6 shadow-[0_20px_60px_-45px_rgba(15,23,42,0.55)] transition hover:-translate-y-1 hover:border-amber-300"
+                >
+                  <div className="flex items-start justify-between gap-4">
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-[0.24em] text-amber-700">
+                        {job.status}
+                      </p>
+                      <h2 className="mt-3 text-2xl font-semibold tracking-tight text-slate-950">
+                        {job.title}
+                      </h2>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <ShareJobButton
+                        path={`/jobs/${job.id}`}
+                        title={job.title}
+                        className="border-slate-200 bg-white/95"
+                      />
+                      <ArrowUpRight className="h-5 w-5 text-slate-400 transition group-hover:text-slate-950" />
+                    </div>
+                  </div>
+
+                  <p className="mt-4 line-clamp-3 text-sm leading-6 text-slate-600">
+                    {job.description}
+                  </p>
+
+                  <div className="mt-5 flex flex-wrap gap-2">
+                    {job.tags.map((tag) => (
+                      <span
+                        key={tag}
+                        className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-slate-600"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+
+                  <div className="mt-6 grid gap-4 rounded-[1.4rem] border border-slate-200 bg-slate-50 p-4 sm:grid-cols-3">
+                    <div>
+                      <p className="text-xs uppercase tracking-[0.2em] text-slate-400">
+                        Budget
+                      </p>
+                      <p className="mt-2 text-lg font-semibold text-slate-950">
+                        {formatUsdc(job.budget_usdc)}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs uppercase tracking-[0.2em] text-slate-400">
+                        Deadline
+                      </p>
+                      <p className="mt-2 inline-flex items-center gap-2 text-sm font-medium text-slate-700">
+                        <Clock3 className="h-4 w-4 text-amber-600" />
+                        {formatDate(job.deadlineAt)}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs uppercase tracking-[0.2em] text-slate-400">
+                        Milestones
+                      </p>
+                      <p className="mt-2 text-sm font-medium text-slate-700">
+                        {job.milestones} tracked approvals
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="mt-5 flex items-center justify-between gap-4">
+                    <div>
+                      <p className="text-xs uppercase tracking-[0.2em] text-slate-400">
+                        Client
+                      </p>
+                      <p className="mt-2 text-sm font-medium text-slate-700">
+                        {shortenAddress(job.client_address)}
+                      </p>
+                    </div>
+                    <div className="text-right">
+                      <div className="inline-flex items-center gap-2 rounded-full bg-amber-50 px-3 py-2 text-sm font-semibold text-amber-900">
+                        <Stars value={job.clientReputation.starRating} />
+                        {job.clientReputation.averageStars.toFixed(1)}
+                      </div>
+                      <p className="mt-2 text-xs text-slate-500">
+                        {job.clientReputation.totalJobs} completed jobs on-chain
+                      </p>
+                    </div>
+                  </div>
+                </Link>
+
+                <button
+                  aria-label={isSaved(job.id) ? "Unsave job" : "Save job"}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    toggleSaveJob(job);
+                  }}
+                  className={[
+                    "absolute right-12 top-6 flex h-10 w-10 items-center justify-center rounded-full border shadow-sm transition hover:scale-110 active:scale-95",
+                    isSaved(job.id)
+                      ? "border-amber-500 bg-amber-50 text-amber-600"
+                      : "border-slate-200 bg-white text-slate-400 hover:text-slate-600",
+                  ].join(" ")}
+                >
+                  <Bookmark
+                    className={[
+                      "h-5 w-5",
+                      isSaved(job.id) ? "fill-current" : "",
+                    ].join(" ")}
+                  />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {!loading && jobs.length === 0 ? (
           <EmptyState
             tone="dark"
             icon={<Briefcase className="h-5 w-5" aria-hidden="true" />}
diff --git a/apps/web/app/jobs/saved/page.tsx b/apps/web/app/jobs/saved/page.tsx
new file mode 100644
index 00000000..abe71a0a
--- /dev/null
+++ b/apps/web/app/jobs/saved/page.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { SiteShell } from "@/components/site-shell";
+import { JobCard } from "@/components/jobs/job-card";
+import { useSavedJobsStore } from "@/lib/store/use-saved-jobs-store";
+import { Bookmark, Search } from "lucide-react";
+import { useState } from "react";
+
+export default function SavedJobsPage() {
+  const { savedJobs } = useSavedJobsStore();
+  const [query, setQuery] = useState("");
+
+  const filteredJobs = savedJobs.filter((job) =>
+    [job.title, job.description, ...job.tags]
+      .join(" ")
+      .toLowerCase()
+      .includes(query.toLowerCase())
+  );
+
+  return (
+    <SiteShell
+      eyebrow="My Collection"
+      title="Saved Opportunities"
+      description="Keep track of high-signal briefs you want to bid on later. These jobs are stored locally for fast retrieval and persistence across sessions."
+    >
+      <section className="rounded-[2rem] border border-border/60 glass-surface p-5 shadow-[0_25px_80px_-50px_rgba(15,23,42,0.55)] sm:p-6">
+        <label className="flex items-center gap-3 rounded-2xl border border-border/40 bg-background/40 px-4 py-3">
+          <Search className="h-4 w-4 text-slate-400" />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search your saved jobs..."
+            className="w-full bg-transparent text-sm text-slate-900 outline-none placeholder:text-slate-400 dark:text-zinc-50"
+          />
+        </label>
+      </section>
+
+      <section className="mt-8">
+        {filteredJobs.length > 0 ? (
+          <div className="grid gap-5 lg:grid-cols-2">
+            {filteredJobs.map((job) => (
+              <JobCard key={job.id} job={job} />
+            ))}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center rounded-[2rem] border border-dashed border-slate-300 bg-white/70 py-24 text-center dark:border-white/10 dark:bg-zinc-900/40">
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-100 text-slate-400 dark:bg-zinc-800 dark:text-zinc-500">
+              <Bookmark className="h-8 w-8" />
+            </div>
+            <h3 className="mt-6 text-xl font-semibold text-slate-900 dark:text-zinc-100">
+              No saved jobs yet
+            </h3>
+            <p className="mt-2 max-w-sm text-sm text-slate-500 dark:text-zinc-400">
+              Browse the job registry and click the bookmark icon to keep track of interesting opportunities.
+            </p>
+          </div>
+        )}
+      </section>
+    </SiteShell>
+  );
+}
diff --git a/apps/web/components/jobs/job-card.test.tsx b/apps/web/components/jobs/job-card.test.tsx
new file mode 100644
index 00000000..82ebaacc
--- /dev/null
+++ b/apps/web/components/jobs/job-card.test.tsx
@@ -0,0 +1,76 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { JobCard } from "./job-card";
+import { useSavedJobsStore } from "@/lib/store/use-saved-jobs-store";
+import type { BoardJob } from "@/hooks/use-job-board";
+
+// Mock the store
+vi.mock("@/lib/store/use-saved-jobs-store", () => ({
+  useSavedJobsStore: vi.fn(),
+}));
+
+// Mock the Stars component
+vi.mock("@/components/stars", () => ({
+  Stars: () => <div data-testid="stars-mock" />,
+}));
+
+type SavedJobsStoreState = ReturnType<typeof useSavedJobsStore>;
+
+const mockJob: BoardJob = {
+  id: "job-1",
+  title: "Test Job",
+  description: "Test Description",
+  budget_usdc: 1000 * 10_000_000,
+  milestones: 3,
+  client_address: "GXXXXX",
+  status: "open",
+  created_at: new Date().toISOString(),
+  updated_at: new Date().toISOString(),
+  tags: ["react", "stellar"],
+  deadlineAt: new Date().toISOString(),
+  clientReputation: {
+    scoreBps: 8000,
+    totalJobs: 10,
+    totalPoints: 100,
+    reviews: 5,
+    starRating: 4.5,
+    averageStars: 4.5,
+  },
+};
+
+describe("JobCard", () => {
+  it("renders job details correctly", () => {
+    const mockedUseSavedJobsStore = vi.mocked(useSavedJobsStore);
+    mockedUseSavedJobsStore.mockReturnValue({
+      savedJobIds: [],
+      savedJobs: [],
+      toggleSaveJob: vi.fn(),
+      isSaved: vi.fn().mockReturnValue(false),
+    } satisfies SavedJobsStoreState);
+
+    render(<JobCard job={mockJob} />);
+
+    expect(screen.getByText("Test Job")).toBeDefined();
+    expect(screen.getByText("1,000 USDC")).toBeDefined();
+    expect(screen.getByText("react")).toBeDefined();
+  });
+
+  it("calls toggleSaveJob when bookmark button is clicked", () => {
+    const toggleSaveJob = vi.fn();
+    const mockedUseSavedJobsStore = vi.mocked(useSavedJobsStore);
+    mockedUseSavedJobsStore.mockReturnValue({
+      savedJobIds: [],
+      savedJobs: [],
+      toggleSaveJob,
+      isSaved: vi.fn().mockReturnValue(false),
+    } satisfies SavedJobsStoreState);
+
+    render(<JobCard job={mockJob} />);
+
+    const bookmarkButton = screen.getByLabelText("Save job");
+    fireEvent.click(bookmarkButton);
+
+    expect(toggleSaveJob).toHaveBeenCalledWith(mockJob);
+  });
+});
diff --git a/apps/web/components/jobs/job-card.tsx b/apps/web/components/jobs/job-card.tsx
index 78e30aba..89fdc730 100644
--- a/apps/web/components/jobs/job-card.tsx
+++ b/apps/web/components/jobs/job-card.tsx
@@ -1,253 +1,129 @@
 "use client";
 
 import Link from "next/link";
-import { ArrowUpRight, Clock3, Star, Users } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { ArrowUpRight, Bookmark, Clock3 } from "lucide-react";
+import { Stars } from "@/components/stars";
 import { formatDate, formatUsdc, shortenAddress } from "@/lib/format";
+import type { BoardJob } from "@/hooks/use-job-board";
+import { useSavedJobsStore } from "@/lib/store/use-saved-jobs-store";
+import { cn } from "@/lib/utils";
 
-export interface JobCardProps {
-  job: JobCardData;
-}
-
-export interface JobCardData {
-  id: string;
-  title: string;
-  description: string;
-  budget_usdc: number;
-  milestones: number;
-  client_address: string;
-  tags: string[];
-  deadlineAt: string;
-  clientReputation: ReputationMetrics;
-  status: "open" | "in_progress" | "completed" | "disputed";
-  created_at?: string;
-}
-
-interface ReputationMetrics {
-  scoreBps: number;
-  totalJobs: number;
-  starRating: number;
-  averageStars: number;
-}
-
-type JobStatusConfig = {
-  label: string;
-  color: {
-    bg: string;
-    text: string;
-    border: string;
-  };
-};
-
-const STATUS_CONFIG: Record<string, JobStatusConfig> = {
-  open: {
-    label: "Open",
-    color: {
-      bg: "bg-emerald-500/10",
-      text: "text-emerald-500",
-      border: "border-emerald-500/30",
-    },
-  },
-  in_progress: {
-    label: "In Progress",
-    color: {
-      bg: "bg-amber-500/10",
-      text: "text-amber-500",
-      border: "border-amber-500/30",
-    },
-  },
-  completed: {
-    label: "Completed",
-    color: {
-      bg: "bg-blue-500/10",
-      text: "text-blue-500",
-      border: "border-blue-500/30",
-    },
-  },
-  disputed: {
-    label: "Disputed",
-    color: {
-      bg: "bg-red-500/10",
-      text: "text-red-500",
-      border: "border-red-500/30",
-    },
-  },
-};
-
-function StatusBadge({ status }: { status: string }) {
-  const config = STATUS_CONFIG[status] || STATUS_CONFIG.open;
-
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em]",
-        config.color.bg,
-        config.color.text,
-      )}
-    >
-      {config.label}
-    </span>
-  );
-}
-
-function StarRating({ rating }: { rating: number }) {
-  const fullStars = Math.floor(rating);
-  const hasHalfStar = rating % 1 >= 0.5;
-
-  return (
-    <div className="flex items-center gap-0.5" role="img" aria-label={`${rating.toFixed(1)} stars`}>
-      {Array.from({ length: 5 }, (_, i) => {
-        const isFilled = i < fullStars || (i === fullStars && hasHalfStar);
-        return (
-          <Star
-            key={i}
-            className={cn(
-              "h-3.5 w-3.5",
-              isFilled
-                ? "fill-amber-400 text-amber-400"
-                : "fill-zinc-800 text-zinc-700",
-            )}
-          />
-        );
-      })}
-    </div>
-  );
+interface JobCardProps {
+  job: BoardJob;
 }
 
 export function JobCard({ job }: JobCardProps) {
+  const { toggleSaveJob, isSaved } = useSavedJobsStore();
+  const saved = isSaved(job.id);
+
   return (
-    <article className="group relative flex flex-col rounded-3xl border border-white/10 bg-zinc-950/70 p-6 shadow-[0_20px_60px_-45px_rgba(15,23,42,0.55)] backdrop-blur-md transition-all duration-150 hover:-translate-y-1 hover:border-amber-500/30 hover:shadow-[0_24px_64px_-40px_rgba(15,23,42,0.65)] focus-within:ring-2 focus-within:ring-amber-500/50 focus-within:ring-offset-2 focus-within:ring-offset-zinc-950">
+    <div className="group relative" data-testid="job-card">
       <Link
         href={`/jobs/${job.id}`}
-        className="absolute inset-0 rounded-3xl focus:outline-none"
-        aria-label={`View job: ${job.title}`}
+        className="block rounded-[1.75rem] border border-border/60 glass-surface p-6 shadow-[0_20px_60px_-45px_rgba(15,23,42,0.55)] transition hover:-translate-y-1 hover:border-amber-300 dark:hover:border-amber-500/50"
       >
-        <span className="sr-only">View job details</span>
-      </Link>
-
-      <header className="flex items-start justify-between gap-4">
-        <div className="space-y-3">
-          <StatusBadge status={job.status} />
-          <h2 className="text-xl font-semibold tracking-tight text-zinc-50">
-            {job.title}
-          </h2>
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <p
+              className={cn(
+                "text-xs font-semibold uppercase tracking-[0.24em]",
+                job.status === "open" && "text-amber-600 dark:text-amber-500",
+                job.status === "completed" && "text-emerald-600 dark:text-emerald-500",
+                job.status === "disputed" && "text-rose-600 dark:text-rose-500",
+                job.status === "in_progress" && "text-blue-600 dark:text-blue-500"
+              )}
+            >
+              {job.status.replace("_", " ")}
+            </p>
+            <h2 className="mt-3 text-2xl font-semibold tracking-tight text-slate-950 dark:text-zinc-50">
+              {job.title}
+            </h2>
+          </div>
+          <ArrowUpRight className="h-5 w-5 text-slate-400 transition group-hover:text-slate-950 dark:group-hover:text-zinc-50" />
         </div>
-        <ArrowUpRight
-          className="h-5 w-5 text-zinc-500 transition-transform duration-150 group-hover:text-amber-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
-          aria-hidden="true"
-        />
-      </header>
 
-      <p className="mt-4 line-clamp-3 text-sm leading-6 text-zinc-400">
-        {job.description}
-      </p>
-
-      <div className="mt-5 flex flex-wrap gap-2">
-        {job.tags.map((tag) => (
-          <span
-            key={tag}
-            className="rounded-full bg-zinc-800/60 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-zinc-400"
-          >
-            {tag}
-          </span>
-        ))}
-      </div>
-
-      <div className="mt-6 grid gap-4 rounded-2xl border border-white/10 bg-zinc-900/60 p-4 sm:grid-cols-3">
-        <dl>
-          <dt className="text-xs uppercase tracking-[0.2em] text-zinc-500">
-            Budget
-          </dt>
-          <dd className="mt-2 text-lg font-semibold text-zinc-100">
-            {formatUsdc(job.budget_usdc)}
-          </dd>
-        </dl>
-        <dl>
-          <dt className="text-xs uppercase tracking-[0.2em] text-zinc-500">
-            Deadline
-          </dt>
-          <dd className="mt-2 flex items-center gap-2 text-sm font-medium text-zinc-300">
-            <Clock3 className="h-4 w-4 text-amber-500" aria-hidden="true" />
-            {formatDate(job.deadlineAt)}
-          </dd>
-        </dl>
-        <dl>
-          <dt className="text-xs uppercase tracking-[0.2em] text-zinc-500">
-            Milestones
-          </dt>
-          <dd className="mt-2 flex items-center gap-2 text-sm font-medium text-zinc-300">
-            <Users className="h-4 w-4 text-zinc-500" aria-hidden="true" />
-            {job.milestones} tracked
-          </dd>
-        </dl>
-      </div>
-
-      <footer className="mt-5 flex items-center justify-between gap-4 border-t border-white/10 pt-5">
-        <dl>
-          <dt className="text-xs uppercase tracking-[0.2em] text-zinc-500">
-            Client
-          </dt>
-          <dd className="mt-1 text-sm font-medium text-zinc-300">
-            {shortenAddress(job.client_address)}
-          </dd>
-        </dl>
-        <div className="text-right">
-          <div className="inline-flex items-center gap-2 rounded-full bg-amber-500/10 px-3 py-2">
-            <StarRating rating={job.clientReputation.starRating} />
-            <span className="text-sm font-semibold text-amber-400">
-              {job.clientReputation.averageStars.toFixed(1)}
+        <p className="mt-4 line-clamp-3 text-sm leading-6 text-slate-600 dark:text-zinc-400">
+          {job.description}
+        </p>
+
+        <div className="mt-5 flex flex-wrap gap-2">
+          {job.tags.map((tag) => (
+            <span
+              key={tag}
+              className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-slate-600 dark:bg-zinc-800 dark:text-zinc-400"
+            >
+              {tag}
             </span>
-          </div>
-          <p className="mt-1 text-xs text-zinc-500">
-            {job.clientReputation.totalJobs} jobs on-chain
-          </p>
+          ))}
         </div>
-      </footer>
-    </article>
-  );
-}
 
-export function JobCardSkeleton() {
-  return (
-    <article
-      aria-hidden="true"
-      className="animate-pulse rounded-3xl border border-white/10 bg-zinc-950/70 p-6"
-    >
-      <div className="flex items-start justify-between gap-4">
-        <div className="space-y-3">
-          <div className="h-6 w-20 rounded-full bg-zinc-800" />
-          <div className="h-8 w-48 rounded-lg bg-zinc-800" />
+        <div className="mt-6 grid gap-4 rounded-[1.4rem] border border-slate-200 bg-slate-50 p-4 sm:grid-cols-3 dark:border-white/5 dark:bg-zinc-800/50">
+          <div>
+            <p className="text-xs uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500">
+              Budget
+            </p>
+            <p className="mt-2 text-lg font-semibold text-slate-950 dark:text-zinc-50">
+              {formatUsdc(job.budget_usdc)}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500">
+              Deadline
+            </p>
+            <p className="mt-2 inline-flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-zinc-300">
+              <Clock3 className="h-4 w-4 text-amber-600 dark:text-amber-500" />
+              {formatDate(job.deadlineAt)}
+            </p>
+          </div>
+          <div>
+            <p className="text-xs uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500">
+              Milestones
+            </p>
+            <p className="mt-2 text-sm font-medium text-slate-700 dark:text-zinc-300">
+              {job.milestones} tracked approvals
+            </p>
+          </div>
         </div>
-      </div>
-
-      <div className="mt-5 space-y-2">
-        <div className="h-4 w-full rounded bg-zinc-800" />
-        <div className="h-4 w-[94%] rounded bg-zinc-800" />
-        <div className="h-4 w-[68%] rounded bg-zinc-800" />
-      </div>
 
-      <div className="mt-5 flex flex-wrap gap-2">
-        <div className="h-7 w-20 rounded-full bg-zinc-800" />
-        <div className="h-7 w-24 rounded-full bg-zinc-800" />
-        <div className="h-7 w-16 rounded-full bg-zinc-800" />
-      </div>
-
-      <div className="mt-6 grid gap-4 rounded-2xl border border-white/10 bg-zinc-900/60 p-4 sm:grid-cols-3">
-        <div className="h-14 rounded bg-zinc-800" />
-        <div className="h-14 rounded bg-zinc-800" />
-        <div className="h-14 rounded bg-zinc-800" />
-      </div>
-
-      <div className="mt-5 flex items-center justify-between gap-4 border-t border-white/10 pt-5">
-        <div className="space-y-2">
-          <div className="h-3 w-16 rounded bg-zinc-800" />
-          <div className="h-4 w-24 rounded bg-zinc-800" />
-        </div>
-        <div className="space-y-2">
-          <div className="h-8 w-20 rounded-full bg-zinc-800" />
-          <div className="h-3 w-28 rounded bg-zinc-800" />
+        <div className="mt-5 flex items-center justify-between gap-4">
+          <div>
+            <p className="text-xs uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500">
+              Client
+            </p>
+            <p className="mt-2 text-sm font-medium text-slate-700 dark:text-zinc-300">
+              {shortenAddress(job.client_address)}
+            </p>
+          </div>
+          <div className="text-right">
+            <div className="inline-flex items-center gap-2 rounded-full bg-amber-50 px-3 py-2 text-sm font-semibold text-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+              <Stars value={job.clientReputation.starRating} />
+              {job.clientReputation.averageStars.toFixed(1)}
+            </div>
+            <p className="mt-2 text-xs text-slate-500 dark:text-zinc-500">
+              {job.clientReputation.totalJobs} completed jobs on-chain
+            </p>
+          </div>
         </div>
-      </div>
-    </article>
+      </Link>
+
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          toggleSaveJob(job);
+        }}
+        className={cn(
+          "absolute right-12 top-6 flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:scale-110 active:scale-95 dark:border-white/10 dark:bg-zinc-800",
+          saved
+            ? "border-amber-500 bg-amber-50 text-amber-600 dark:bg-amber-950/30 dark:text-amber-500"
+            : "text-slate-400 hover:text-slate-600 dark:text-zinc-500 dark:hover:text-zinc-300"
+        )}
+        aria-label={saved ? "Unsave job" : "Save job"}
+      >
+        <Bookmark
+          className={cn("h-5 w-5", saved && "fill-current")}
+        />
+      </button>
+    </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/components/navigation/sidebar.tsx b/apps/web/components/navigation/sidebar.tsx
index b667ff9e..80e5b1a1 100644
--- a/apps/web/components/navigation/sidebar.tsx
+++ b/apps/web/components/navigation/sidebar.tsx
@@ -16,6 +16,7 @@ import {
   Home,
   TrendingUp,
   BarChart2,
+  Bookmark,
   Search as SearchIcon
 } from "lucide-react";
 import { usePathname } from "next/navigation";
@@ -75,6 +76,7 @@ const DASHBOARD_LINKS: Record<string, NavItemProps[]> = {
   freelancer: [
     { href: "/", icon: <LayoutDashboard className="h-4 w-4" />, label: "Overview" },
     { href: "/jobs", icon: <SearchIcon className="h-4 w-4" />, label: "Find Work", badge: "24" },
+    { href: "/jobs/saved", icon: <Bookmark className="h-4 w-4" />, label: "Saved Jobs" },
     { href: "/jobs/1", icon: <FileText className="h-4 w-4" />, label: "Active Contracts" },
     { href: "/milestones", icon: <TrendingUp className="h-4 w-4" />, label: "Milestones" },
     { href: "/disputes/1", icon: <MessageSquare className="h-4 w-4" />, label: "Disputes" },
diff --git a/apps/web/components/navigation/top-nav.tsx b/apps/web/components/navigation/top-nav.tsx
index ee220682..51883424 100644
--- a/apps/web/components/navigation/top-nav.tsx
+++ b/apps/web/components/navigation/top-nav.tsx
@@ -89,8 +89,14 @@ export function TopNav({ onOpenSidebar }: { onOpenSidebar?: () => void }) {
             >
               Browse Jobs
             </Link>
-            <Link
-              href="/jobs/new"
+            <Link 
+              href="/jobs/saved" 
+              className="rounded-full border border-transparent px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:bg-card/80 hover:text-foreground"
+            >
+              Saved
+            </Link>
+            <Link 
+              href="/jobs/new" 
               className="rounded-full border border-transparent px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:bg-card/80 hover:text-foreground"
             >
               Post a Job
diff --git a/apps/web/lib/reputation.ts b/apps/web/lib/reputation.ts
index 9f2e63ac..f12f3015 100644
--- a/apps/web/lib/reputation.ts
+++ b/apps/web/lib/reputation.ts
@@ -13,6 +13,7 @@ import { toStarRating } from "./format";
 
 const REPUTATION_CONTRACT_ID =
   process.env.NEXT_PUBLIC_REPUTATION_CONTRACT_ID ?? "";
+const IS_E2E = process.env.NEXT_PUBLIC_E2E === "true";
 const RPC_URL =
   process.env.NEXT_PUBLIC_SOROBAN_RPC_URL ??
   "https://soroban-testnet.stellar.org";
@@ -94,6 +95,10 @@ function metricsFromScore(score: ContractReputationScore): ReputationMetrics {
 }
 
 export async function getReputationView(address: string): Promise<ReputationViewMetrics> {
+  if (IS_E2E) {
+    return fallbackView();
+  }
+
   if (!REPUTATION_CONTRACT_ID) {
     return fallbackView();
   }
diff --git a/apps/web/lib/store/use-saved-jobs-store.test.ts b/apps/web/lib/store/use-saved-jobs-store.test.ts
new file mode 100644
index 00000000..49cd95cc
--- /dev/null
+++ b/apps/web/lib/store/use-saved-jobs-store.test.ts
@@ -0,0 +1,57 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, beforeEach } from "vitest";
+import { useSavedJobsStore } from "./use-saved-jobs-store";
+import type { BoardJob } from "@/hooks/use-job-board";
+
+const MOCK_JOB: BoardJob = {
+  id: "test-job-1",
+  title: "Test Job",
+  description: "Test Description",
+  budget_usdc: 1000000000,
+  milestones: 1,
+  client_address: "G123",
+  status: "open",
+  created_at: new Date().toISOString(),
+  updated_at: new Date().toISOString(),
+  tags: ["test"],
+  deadlineAt: new Date().toISOString(),
+  clientReputation: {
+    scoreBps: 5000,
+    totalJobs: 0,
+    totalPoints: 0,
+    reviews: 0,
+    starRating: 5,
+    averageStars: 5,
+  },
+};
+
+describe("useSavedJobsStore", () => {
+  beforeEach(() => {
+    // Reset the store state before each test if necessary
+    // Since it's using persist, we might need to clear localStorage
+    localStorage.clear();
+    useSavedJobsStore.setState({ savedJobIds: [], savedJobs: [] });
+  });
+
+  it("should start with an empty list", () => {
+    const state = useSavedJobsStore.getState();
+    expect(state.savedJobIds).toEqual([]);
+    expect(state.savedJobs).toEqual([]);
+  });
+
+  it("should toggle saving a job", () => {
+    useSavedJobsStore.getState().toggleSaveJob(MOCK_JOB);
+    
+    let state = useSavedJobsStore.getState();
+    expect(state.savedJobIds).toContain(MOCK_JOB.id);
+    expect(state.savedJobs).toContainEqual(MOCK_JOB);
+    expect(state.isSaved(MOCK_JOB.id)).toBe(true);
+
+    // Toggle again to remove
+    useSavedJobsStore.getState().toggleSaveJob(MOCK_JOB);
+    state = useSavedJobsStore.getState();
+    expect(state.savedJobIds).not.toContain(MOCK_JOB.id);
+    expect(state.savedJobs).not.toContainEqual(MOCK_JOB);
+    expect(state.isSaved(MOCK_JOB.id)).toBe(false);
+  });
+});
diff --git a/apps/web/lib/store/use-saved-jobs-store.ts b/apps/web/lib/store/use-saved-jobs-store.ts
new file mode 100644
index 00000000..67c1b9ff
--- /dev/null
+++ b/apps/web/lib/store/use-saved-jobs-store.ts
@@ -0,0 +1,39 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import type { BoardJob } from "@/hooks/use-job-board";
+
+interface SavedJobsState {
+  savedJobIds: string[];
+  savedJobs: BoardJob[];
+  toggleSaveJob: (job: BoardJob) => void;
+  isSaved: (jobId: string) => boolean;
+}
+
+export const useSavedJobsStore = create<SavedJobsState>()(
+  persist(
+    (set, get) => ({
+      savedJobIds: [],
+      savedJobs: [],
+      toggleSaveJob: (job) => {
+        const { savedJobIds, savedJobs } = get();
+        const isAlreadySaved = savedJobIds.includes(job.id);
+
+        if (isAlreadySaved) {
+          set({
+            savedJobIds: savedJobIds.filter((id) => id !== job.id),
+            savedJobs: savedJobs.filter((j) => j.id !== job.id),
+          });
+        } else {
+          set({
+            savedJobIds: [...savedJobIds, job.id],
+            savedJobs: [job, ...savedJobs],
+          });
+        }
+      },
+      isSaved: (jobId) => get().savedJobIds.includes(jobId),
+    }),
+    {
+      name: "lance-saved-jobs",
+    }
+  )
+);
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 14cbb17b..406525ae 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -31,5 +31,5 @@
     ".next/dev/types/**/*.ts",
     "**/*.mts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "vitest.config.ts", "**/*.test.ts", "**/*.test.tsx"]
 }
diff --git a/package-lock.json b/package-lock.json
index ad8af82f..aa02b164 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9960,12 +9960,200 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/callsites": {
+    "node_modules/@vitest/coverage-v8": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.5.tgz",
+      "integrity": "sha512-38C0/Ddb7HcRG0Z4/DUem8x57d2p9jYgp18mkaYswEOQBGsI1CG4f/hjm0ZCeaJfWhSZ4k7jgs29V1Zom7Ki9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bcoe/v8-coverage": "^1.0.2",
+        "@vitest/utils": "4.1.5",
+        "ast-v8-to-istanbul": "^1.0.0",
+        "istanbul-lib-coverage": "^3.2.2",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-reports": "^3.2.0",
+        "magicast": "^0.5.2",
+        "obug": "^2.1.1",
+        "std-env": "^4.0.0-rc.1",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@vitest/browser": "4.1.5",
+        "vitest": "4.1.5"
+      },
+      "peerDependenciesMeta": {
+        "@vitest/browser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/coverage-v8/node_modules/@vitest/pretty-format": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.5.tgz",
+      "integrity": "sha512-7I3q6l5qr03dVfMX2wCo9FxwSJbPdwKjy2uu/YPpU3wfHvIL4QHwVRp57OfGrDFeUJ8/8QdfBKIV12FTtLn00g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/coverage-v8/node_modules/@vitest/utils": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.5.tgz",
+      "integrity": "sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.5",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/coverage-v8/node_modules/std-env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+      "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitest/coverage-v8/node_modules/tinyrainbow": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
       "dev": true,
       "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.9.tgz",
+      "integrity": "sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "2.1.9",
+        "@vitest/utils": "2.1.9",
+        "chai": "^5.1.2",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-2.1.9.tgz",
+      "integrity": "sha512-tVL6uJgoUdi6icpxmdrn5YNo3g3Dxv+IHJBr0GXHaEdTcw3F+cPKnsXFhli6nO+f/6SDKPHEK1UN+k+TQv0Ehg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "2.1.9",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.12"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.9.tgz",
+      "integrity": "sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.1.9.tgz",
+      "integrity": "sha512-ZXSSqTFIrzduD63btIfEyOmNcBmQvgOVsPNPe0jYtESiXkhd8u2erDLnMxmGrDCwHCCHE7hxwRDCT3pt0esT4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "2.1.9",
+        "pathe": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.1.9.tgz",
+      "integrity": "sha512-oBO82rEjsxLNJincVhLhaxxZdEtV0EFHMK5Kmx5sJ6H9L183dHECjiefOAdnqpIgT5eZwT04PoggUnW88vOBNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "2.1.9",
+        "magic-string": "^0.30.12",
+        "pathe": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.1.9.tgz",
+      "integrity": "sha512-E1B35FwzXXTs9FHNK6bDszs7mtydNi5MIfUWpceJ8Xbfb1gBMscAnwLbEu+B44ed6W3XjL9/ehLPHR1fkf1KLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^3.0.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.9.tgz",
+      "integrity": "sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "2.1.9",
+        "loupe": "^3.1.2",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@wallet-standard/base": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@wallet-standard/base/-/base-1.1.0.tgz",
+      "integrity": "sha512-DJDQhjKmSNVLKWItoKThJS+CsJQjR9AOBOirBVT1F9YpRyC9oYHE+ZnSf8y8bxUphtKqdQMPVQ2mHohYdRvDVQ==",
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=6"
       }
@@ -11029,20 +11217,29 @@
       ],
       "license": "MIT"
     },
-    "node_modules/detect-libc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
-      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "devOptional": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=8"
+    "node_modules/ast-v8-to-istanbul": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-1.0.0.tgz",
+      "integrity": "sha512-1fSfIwuDICFA4LKkCzRPO7F0hzFf0B7+Xqrl27ynQaa+Rh0e1Es0v6kWHPott3lU10AyAr7oKHa65OppjLn3Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.31",
+        "estree-walker": "^3.0.3",
+        "js-tokens": "^10.0.0"
       }
     },
-    "node_modules/detect-newline": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
-      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+    "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -15718,6 +15915,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
diff --git a/playwright-report/index.html b/playwright-report/index.html
index b09f130e..e93e7647 100644
--- a/playwright-report/index.html
+++ b/playwright-report/index.html
@@ -82,4 +82,4 @@
     <div id='root'></div>
   </body>
 </html>
-<script id="playwrightReportBase64" type="application/zip">data:application/zip;base64,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</script>
\ No newline at end of file
+<script id="playwrightReportBase64" type="application/zip">data:application/zip;base64,UEsDBBQAAAgIADWZmFxLSVywzwAAACUBAAALAAAAcmVwb3J0Lmpzb25VULtuwzAM/BWBs2E4iANV2rMWBdqt6MDYdKv6QYGikxRG/r2y0wzldHc4HO64wEiKLSqCX24FJEXRtzAS+J21trJub62rbQHtLKiBJ/D13lXlk6vd4w4FdGGgBP79o4Ao/E2NPuP4UHKoZriAsuIAviqArjF7qN3IPP2j3YD9z4ZSH2L8U7kHrzJTLkkiLGs2HFfkzYtwQymZTng0DU9d+CwvdHolOZOYCyYzsRo8DWSUzbaxNMdr0GxuyZsd5JYc13np/ocRm68w3QfcfgFQSwECPwMUAAAICAA1mZhcS0lcsM8AAAAlAQAACwAAAAAAAAAAAAAAtIEAAAAAcmVwb3J0Lmpzb25QSwUGAAAAAAEAAQA5AAAA+AAAAAAA</script>
diff --git a/tests/e2e/mock-backend.mjs b/tests/e2e/mock-backend.mjs
index 42ebbf1a..5660f571 100644
--- a/tests/e2e/mock-backend.mjs
+++ b/tests/e2e/mock-backend.mjs
@@ -5,10 +5,25 @@ const port = Number(process.env.PORT || "3001");
 
 const seededDisputeId = "11111111-1111-4111-8111-111111111111";
 const seededJobId = "22222222-2222-4222-8222-222222222222";
+const seededOpenJobId = "44444444-4444-4444-8444-444444444444";
 
 const timestamp = () => new Date().toISOString();
 
 const jobs = [
+  {
+    id: seededOpenJobId,
+    title: "Saved jobs UX polish",
+    description:
+      "Implement a resilient saved-jobs flow and ensure bookmarking works across sessions.",
+    budget_usdc: 1_250_000_000,
+    milestones: 1,
+    client_address: "GCLIENTOPENPUBLICKEY1234567890ABCDEFFFFF",
+    freelancer_address: null,
+    status: "open",
+    metadata_hash: null,
+    created_at: timestamp(),
+    updated_at: timestamp(),
+  },
   {
     id: seededJobId,
     title: "Escrow release audit",
diff --git a/tests/e2e/saved-jobs.spec.ts b/tests/e2e/saved-jobs.spec.ts
new file mode 100644
index 00000000..494c905a
--- /dev/null
+++ b/tests/e2e/saved-jobs.spec.ts
@@ -0,0 +1,44 @@
+import { test, expect } from "@playwright/test";
+
+test("can save and unsave jobs from the marketplace", async ({ page }) => {
+  // 1. Go to jobs page
+  await page.goto("/jobs");
+  
+  // 2. Find the first job card and its save button
+  const firstJobCard = page.getByTestId("job-card").first();
+  const saveButton = firstJobCard.locator("button[aria-label='Save job']");
+  
+  // 3. Click save
+  await saveButton.click();
+  
+  // 4. Verify button state changes
+  await expect(firstJobCard.locator("button[aria-label='Unsave job']")).toBeVisible();
+  
+  // 5. Go to saved jobs page
+  await page.goto("/jobs/saved");
+  
+  // 6. Verify the job is there
+  await expect(page.locator(".group.relative")).toHaveCount(1);
+  
+  // 7. Unsave from the saved jobs page
+  await page.locator("button[aria-label='Unsave job']").click();
+  
+  // 8. Verify the empty state
+  await expect(page.getByText("No saved jobs yet")).toBeVisible();
+});
+
+test("saved jobs persist across sessions", async ({ page }) => {
+  // 1. Go to jobs page and save a job
+  await page.goto("/jobs");
+  await page.getByTestId("job-card").first().locator("button[aria-label='Save job']").click();
+  
+  // 2. Reload the page
+  await page.reload();
+  
+  // 3. Verify it's still saved
+  await expect(page.locator("button[aria-label='Unsave job']").first()).toBeVisible();
+  
+  // 4. Go to saved jobs page
+  await page.goto("/jobs/saved");
+  await expect(page.getByTestId("job-card")).toHaveCount(1);
+});