diff --git a/frontend/src/app/lib/mappers.ts b/frontend/src/app/lib/mappers.ts
index 19aac71..b45c90b 100644
--- a/frontend/src/app/lib/mappers.ts
+++ b/frontend/src/app/lib/mappers.ts
@@ -24,20 +24,24 @@ function mapTool(tool?: string): Tool {
   return allowedTools.includes(tool as Tool) ? (tool as Tool) : "semgrep";
 }
 
-export function mapBackendFindingToUi(f: BackendFinding): Finding {
+export function mapBackendFindingToUi(f: any): Finding {
+  const filePath = f.location?.path || f.file_path || "Unknown file";
+  const startLine = f.location?.start_line || f.line_number || 1;
+  const tool = f.metadata?.engine || f.scanner || "semgrep";
+
   return {
     id: f.id,
     severity: mapSeverity(f.severity),
     category: f.category,
-    title: f.title,
+    title: f.title || f.rule_id || "Vulnerability",
 
-    file: f.location?.path ?? "Unknown file",
-    lineNumber: f.location?.start_line ?? 1,
-    tool: mapTool(f.metadata?.engine),
+    file: filePath,
+    lineNumber: startLine,
+    tool: mapTool(tool),
 
     confidence: f.confidence ?? 100,
-    status: "open",
-    description: f.description ?? "",
+    status: f.status || "open",
+    description: f.description ?? f.message ?? "",
     code: f.code ?? "",
     suggestedFix: f.suggested_fix,
     references: f.references ?? [],
diff --git a/frontend/src/app/pages/findings.tsx b/frontend/src/app/pages/findings.tsx
index b0467a9..708d75f 100644
--- a/frontend/src/app/pages/findings.tsx
+++ b/frontend/src/app/pages/findings.tsx
@@ -447,7 +447,7 @@ export function Findings() {
                 {selectedFindings.size !== 1 ? "s" : ""} selected
               </span>
               <div className="flex gap-2">
-                <Link to="/fix">
+                <Link to="/fix" state={{ findingIds: [...selectedFindings] }}>
                   <Button size="sm">Propose Fixes</Button>
                 </Link>
                 <Button variant="outline" size="sm" disabled>
@@ -707,7 +707,7 @@ export function Findings() {
                           </div>
                         </div>
                         <div className="flex gap-3 mt-2">
-                          <Link to="/fix" className="flex-1">
+                          <Link to="/fix" state={{ findingIds: [detailFinding.id] }} className="flex-1">
                             <Button className="w-full shadow-sm">Apply Fix</Button>
                           </Link>
                           <Button variant="outline" disabled className="flex-1 bg-muted/5">
diff --git a/frontend/src/app/pages/fix.tsx b/frontend/src/app/pages/fix.tsx
index 16f3822..5cc0d42 100644
--- a/frontend/src/app/pages/fix.tsx
+++ b/frontend/src/app/pages/fix.tsx
@@ -1,57 +1,237 @@
-import { useState } from "react";
-import { GitPullRequest, Download, Copy, AlertTriangle, CheckCircle2 } from "lucide-react";
-import { Link } from "react-router";
+import { useEffect, useState } from "react";
+import { GitPullRequest, Download, Copy, AlertTriangle, CheckCircle2, Loader2 } from "lucide-react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { Button } from "../components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
 import { DiffViewer } from "../components/diff-viewer";
 import { SeverityChip } from "../components/severity-chip";
 import { Badge } from "../components/ui/badge";
+import { loadLastScan } from "../lib/scan-store";
+import { getJobFindings, fix as fixApi } from "../lib/api";
+import { mapBackendFindingToUi } from "../lib/mappers";
 
-const sampleDiffs = [
-  { type: "context" as const, content: "async function getUser(userId: string) {", oldLine: 44, newLine: 44 },
-  { type: "removed" as const, content: "  const query = `SELECT * FROM users WHERE id = '${userId}'`;", oldLine: 45 },
-  { type: "added" as const, content: "  const query = 'SELECT * FROM users WHERE id = $1';", newLine: 45 },
-  { type: "removed" as const, content: "  return await db.query(query);", oldLine: 46 },
-  { type: "added" as const, content: "  return await db.query(query, [userId]);", newLine: 46 },
-  { type: "context" as const, content: "}", oldLine: 47, newLine: 47 },
-];
-
-const sampleDiffs2 = [
-  { type: "context" as const, content: "{", oldLine: 11, newLine: 11 },
-  { type: "context" as const, content: '  "dependencies": {', oldLine: 12, newLine: 12 },
-  { type: "removed" as const, content: '    "express": "^4.17.1"', oldLine: 13 },
-  { type: "added" as const, content: '    "express": "^4.19.2"', newLine: 13 },
-  { type: "context" as const, content: "  }", oldLine: 14, newLine: 14 },
-  { type: "context" as const, content: "}", oldLine: 15, newLine: 15 },
-];
+interface DiffLine {
+  type: "added" | "removed" | "context";
+  content: string;
+  oldLine?: number;
+  newLine?: number;
+}
+
+function parseUnifiedDiff(diffStr: string): DiffLine[] {
+  if (!diffStr) return [];
+  const lines = diffStr.split("\n");
+  const diffLines: DiffLine[] = [];
+  let oldLineNum = 0;
+  let newLineNum = 0;
+
+  for (const line of lines) {
+    if (line.startsWith("---") || line.startsWith("+++")) {
+      continue;
+    }
+    if (line.startsWith("@@")) {
+      const match = line.match(/^@@ -(\d+),?\d* \+(\d+),?\d* @@/);
+      if (match) {
+        oldLineNum = parseInt(match[1], 10);
+        newLineNum = parseInt(match[2], 10);
+      }
+      continue;
+    }
+    
+    if (line.startsWith("+")) {
+      diffLines.push({
+        type: "added",
+        content: line.substring(1),
+        newLine: newLineNum++
+      });
+    } else if (line.startsWith("-")) {
+      diffLines.push({
+        type: "removed",
+        content: line.substring(1),
+        oldLine: oldLineNum++
+      });
+    } else {
+      diffLines.push({
+        type: "context",
+        content: line.startsWith(" ") ? line.substring(1) : line,
+        oldLine: oldLineNum++,
+        newLine: newLineNum++
+      });
+    }
+  }
+
+  return diffLines;
+}
+
+function generateDiff(oldCode: string, newCode: string): DiffLine[] {
+  const oldLines = (oldCode || "").split("\n");
+  const newLines = (newCode || "").split("\n");
+  const diffLines: DiffLine[] = [];
+
+  if (!oldCode && !newCode) {
+    return [
+      { type: "context", content: "No code changes required for this remediation step." }
+    ];
+  }
+
+  let i = 0;
+  let j = 0;
+  while (i < oldLines.length || j < newLines.length) {
+    if (i < oldLines.length && j < newLines.length && oldLines[i] === newLines[j]) {
+      diffLines.push({
+        type: "context",
+        content: oldLines[i],
+        oldLine: i + 1,
+        newLine: j + 1
+      });
+      i++;
+      j++;
+    } else {
+      let matchIdx = -1;
+      for (let k = i; k < oldLines.length; k++) {
+        if (oldLines[k] === newLines[j]) {
+          matchIdx = k;
+          break;
+        }
+      }
+      
+      if (matchIdx !== -1) {
+        for (let k = i; k < matchIdx; k++) {
+          diffLines.push({
+            type: "removed",
+            content: oldLines[k],
+            oldLine: k + 1
+          });
+        }
+        i = matchIdx;
+      } else {
+        if (i < oldLines.length) {
+          diffLines.push({
+            type: "removed",
+            content: oldLines[i],
+            oldLine: i + 1
+          });
+          i++;
+        }
+        if (j < newLines.length) {
+          diffLines.push({
+            type: "added",
+            content: newLines[j],
+            newLine: j + 1
+          });
+          j++;
+        }
+      }
+    }
+  }
+
+  return diffLines;
+}
 
 export function Fix() {
-  const [selectedFixes, setSelectedFixes] = useState<Set<number>>(new Set([0, 1]));
-
-  const fixes = [
-    {
-      id: 0,
-      title: "Fix SQL Injection in user query",
-      severity: "critical" as const,
-      file: "src/api/users.ts",
-      risk: "Low",
-      effort: "5 min",
-      filesAffected: 1,
-      diff: sampleDiffs,
-    },
-    {
-      id: 1,
-      title: "Update Express to 4.19.2",
-      severity: "high" as const,
-      file: "package.json",
-      risk: "Medium",
-      effort: "15 min",
-      filesAffected: 2,
-      diff: sampleDiffs2,
-    },
-  ];
-
-  const toggleFix = (id: number) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const state = location.state as { findingIds?: string[] } | null;
+  const findingIds = state?.findingIds || [];
+
+  const scan = loadLastScan();
+  const jobId = scan?.job_id;
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [mappedFixes, setMappedFixes] = useState<any[]>([]);
+  const [selectedFixes, setSelectedFixes] = useState<Set<string>>(new Set());
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!jobId) {
+      setError("No active scan job found. Go to the Dashboard and upload a ZIP to start a scan.");
+      setLoading(false);
+      return;
+    }
+    if (findingIds.length === 0) {
+      setError("No findings selected. Please select findings from the list to propose fixes.");
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    getJobFindings(jobId)
+      .then((allFindings: any[]) => {
+        const findingsList = allFindings.map(mapBackendFindingToUi);
+        const selectedFindingsObjects = findingsList.filter(f => findingIds.includes(f.id));
+
+        if (selectedFindingsObjects.length === 0) {
+          setError("No matching findings found in current scan.");
+          setLoading(false);
+          return;
+        }
+
+        const prefixedIds = selectedFindingsObjects.map(f => {
+          const tool = f.tool || "semgrep";
+          const ruleId = f.title || "";
+          const file = f.file || "";
+          const line = f.lineNumber || 1;
+
+          if (tool === "osv") {
+            const rawFinding = allFindings.find(rf => rf.id === f.id);
+            const pName = rawFinding?.package_name || "pkg";
+            return `osv:${ruleId}:${pName}`;
+          } else if (tool === "gitleaks") {
+            return `gitleaks:${ruleId}:${file}:${line}`;
+          } else {
+            return `semgrep:${ruleId}:${file}:${line}`;
+          }
+        });
+
+        fixApi(jobId, prefixedIds)
+          .then((res: any) => {
+            const proposedFixes = res?.fixes || [];
+
+            const uiFixes = proposedFixes.map((pf: any, idx: number) => {
+              const finding = selectedFindingsObjects[idx] || selectedFindingsObjects[0];
+              
+              let diffLines: DiffLine[] = [];
+              if (pf.diff) {
+                diffLines = parseUnifiedDiff(pf.diff);
+              } else if (finding) {
+                diffLines = generateDiff(finding.code, finding.suggestedFix || finding.code);
+              }
+
+              return {
+                id: pf.finding_id,
+                title: pf.summary || finding?.title || "Apply security patch",
+                severity: (finding?.severity || "medium"),
+                file: finding?.file || pf.files_changed?.[0] || "Unknown file",
+                risk: finding?.severity === "critical" || finding?.severity === "high" ? "Medium" : "Low",
+                effort: finding?.tool === "osv" ? "15 min" : "5 min",
+                filesAffected: pf.files_changed?.length || 1,
+                diff: diffLines,
+                rawDiffText: pf.diff || "",
+                notes: pf.notes || []
+              };
+            });
+
+            setMappedFixes(uiFixes);
+            setSelectedFixes(new Set(uiFixes.map(uf => uf.id)));
+          })
+          .catch((err) => {
+            console.error("Failed to fetch backend fixes:", err);
+            setError("Failed to load proposed fixes from the backend.");
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      })
+      .catch((err) => {
+        console.error("Failed to load scan findings:", err);
+        setError("Failed to fetch scan findings list.");
+        setLoading(false);
+      });
+  }, [jobId, JSON.stringify(findingIds)]);
+
+  const toggleFix = (id: string) => {
     const newSelected = new Set(selectedFixes);
     if (newSelected.has(id)) {
       newSelected.delete(id);
@@ -61,6 +241,63 @@ export function Fix() {
     setSelectedFixes(newSelected);
   };
 
+  const handleApplyFixes = (targetFindingIds: string[]) => {
+    // Navigate to /verify with applied fixes metadata
+    navigate("/verify", {
+      state: {
+        appliedFixIds: targetFindingIds,
+        jobId: jobId,
+        timestamp: new Date().toISOString()
+      }
+    });
+  };
+
+  const handleCopyPatch = async (id: string, diffLines: DiffLine[]) => {
+    const diffText = diffLines
+      .map((line) => {
+        const prefix = line.type === "added" ? "+ " : line.type === "removed" ? "- " : "  ";
+        return prefix + line.content;
+      })
+      .join("\n");
+
+    try {
+      await navigator.clipboard.writeText(diffText);
+      setCopiedId(id);
+      setTimeout(() => setCopiedId(null), 2000);
+    } catch (err) {
+      console.error("Failed to copy patch:", err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="container mx-auto px-4 py-8 max-w-7xl flex justify-center items-center h-64">
+        <div className="flex flex-col items-center gap-4 text-muted-foreground">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <p>Loading proposed fixes...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 max-w-7xl pb-20 md:pb-8">
+        <div className="mb-6">
+          <h1 className="mb-2">Proposed Fixes</h1>
+          <p className="text-muted-foreground">{error}</p>
+          <div className="mt-4">
+            <Link to="/findings">
+              <Button>Go to Findings</Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const filesAffectedCount = new Set(mappedFixes.flatMap(f => f.file)).size;
+
   return (
     <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 max-w-7xl pb-20 md:pb-8">
       <div className="mb-6">
@@ -74,20 +311,20 @@ export function Fix() {
       <Card className="mb-6">
         <CardHeader>
           <CardTitle>Fix Summary</CardTitle>
-          <CardDescription>2 findings with available automated fixes</CardDescription>
+          <CardDescription>{mappedFixes.length} findings with available automated fixes</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
             <div>
-              <div className="text-2xl font-semibold mb-1">2</div>
+              <div className="text-2xl font-semibold mb-1">{mappedFixes.length}</div>
               <div className="text-sm text-muted-foreground">Proposed Fixes</div>
             </div>
             <div>
-              <div className="text-2xl font-semibold mb-1">3</div>
+              <div className="text-2xl font-semibold mb-1">{filesAffectedCount}</div>
               <div className="text-sm text-muted-foreground">Files Affected</div>
             </div>
             <div>
-              <div className="text-2xl font-semibold mb-1">~20m</div>
+              <div className="text-2xl font-semibold mb-1">~{mappedFixes.length * 5}m</div>
               <div className="text-sm text-muted-foreground">Est. Time</div>
             </div>
             <div>
@@ -100,7 +337,7 @@ export function Fix() {
 
       {/* Fix Cards */}
       <div className="space-y-6 mb-6">
-        {fixes.map((fix) => (
+        {mappedFixes.map((fix) => (
           <Card key={fix.id} className={selectedFixes.has(fix.id) ? "border-primary" : ""}>
             <CardHeader>
               <div className="flex items-start justify-between">
@@ -147,9 +384,7 @@ export function Fix() {
               <DiffViewer diff={fix.diff} filename={fix.file} className="mb-4" />
 
               <div className="flex flex-wrap gap-2">
-                <Link to="/verify">
-                  <Button>Apply Patch</Button>
-                </Link>
+                <Button onClick={() => handleApplyFixes([fix.id])}>Apply Patch</Button>
                 <Button variant="outline" disabled>
                   <GitPullRequest className="h-4 w-4 mr-2" />
                   Open PR
@@ -157,9 +392,9 @@ export function Fix() {
                     Not configured
                   </Badge>
                 </Button>
-                <Button variant="outline">
+                <Button variant="outline" onClick={() => handleCopyPatch(fix.id, fix.diff)}>
                   <Copy className="h-4 w-4 mr-2" />
-                  Copy Patch
+                  {copiedId === fix.id ? "Copied!" : "Copy Patch"}
                 </Button>
               </div>
             </CardContent>
@@ -178,15 +413,13 @@ export function Fix() {
               </div>
             </div>
             <div className="flex gap-2">
-              <Button variant="outline">
+              <Button variant="outline" disabled>
                 <Download className="h-4 w-4 mr-2" />
                 Download All
               </Button>
-              <Link to="/verify">
-                <Button disabled={selectedFixes.size === 0}>
-                  Apply Selected Fixes
-                </Button>
-              </Link>
+              <Button disabled={selectedFixes.size === 0} onClick={() => handleApplyFixes(Array.from(selectedFixes))}>
+                Apply Selected Fixes
+              </Button>
             </div>
           </div>
         </CardContent>