diff --git a/components/bounty-detail/bounty-detail-submissions-card.tsx b/components/bounty-detail/bounty-detail-submissions-card.tsx
index c9270a90..a2069f52 100644
--- a/components/bounty-detail/bounty-detail-submissions-card.tsx
+++ b/components/bounty-detail/bounty-detail-submissions-card.tsx
@@ -1,411 +1,4 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { TransactionLink } from "@/components/ui/stellar-link";
-import { Textarea } from "@/components/ui/textarea";
-import { useSubmissionDraft } from "@/hooks/use-submission-draft";
-import {
-  useMarkSubmissionPaid,
-  useReviewSubmission,
-  useSubmitToBounty,
-} from "@/hooks/use-submission-mutations";
-import { authClient } from "@/lib/auth-client";
-import { BountySubmissionType } from "@/lib/graphql/generated";
-import { DollarSign, Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
-
-interface ExtendedUser {
-  id: string;
-  name?: string | null;
-  email?: string | null;
-  image?: string | null;
-  organizations?: string[];
-}
-
-interface BountyDetailSubmissionsCardProps {
-  bounty: {
-    id: string;
-    status: string;
-    organizationId: string;
-    submissions?: Array<BountySubmissionType> | null;
-  };
-}
-
-export function BountyDetailSubmissionsCard({
-  bounty,
-}: BountyDetailSubmissionsCardProps) {
-  const { data: session } = authClient.useSession();
-  const submissions = bounty.submissions || [];
-  const { draft, clearDraft, autoSave } = useSubmissionDraft(bounty.id);
-
-  const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
-  const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
-  const [markPaidDialogOpen, setMarkPaidDialogOpen] = useState(false);
-
-  const [selectedSubmission, setSelectedSubmission] =
-    useState<BountySubmissionType | null>(null);
-  const [selectedPaidSubmission, setSelectedPaidSubmission] =
-    useState<BountySubmissionType | null>(null);
-
-  const [prUrl, setPrUrl] = useState("");
-  const [submitComments, setSubmitComments] = useState("");
-  const [reviewComments, setReviewComments] = useState("");
-  const reviewStatus = "APPROVED";
-  const [transactionHash, setTransactionHash] = useState("");
-
-  const submitToBounty = useSubmitToBounty();
-  const reviewSubmission = useReviewSubmission();
-  const markSubmissionPaid = useMarkSubmissionPaid();
-
-  const [isHydrated, setIsHydrated] = useState(false);
-
-  // Load draft on mount
-  useEffect(() => {
-    if (draft?.formData) {
-      setPrUrl(draft.formData.githubPullRequestUrl);
-      setSubmitComments(draft.formData.comments);
-    }
-    setIsHydrated(true);
-  }, [draft]);
-
-  // Auto-save on form changes
-  useEffect(() => {
-    if (!isHydrated) return;
-    const cleanup = autoSave({
-      githubPullRequestUrl: prUrl,
-      comments: submitComments,
-    });
-    return cleanup;
-  }, [prUrl, submitComments, autoSave, isHydrated]);
-
-  const isOrgMember =
-    (session?.user as ExtendedUser)?.organizations?.includes(
-      bounty.organizationId,
-    ) ?? false;
-
-  const handleSubmitPR = async () => {
-    if (!prUrl.trim()) return;
-    try {
-      await submitToBounty.mutateAsync({
-        bountyId: bounty.id,
-        githubPullRequestUrl: prUrl,
-        comments: submitComments.trim() || undefined,
-      });
-      clearDraft();
-    } catch (err) {
-      // Replace with toast or error UI as needed
-      console.error("Submit PR failed:", err);
-    } finally {
-      setPrUrl("");
-      setSubmitComments("");
-      setSubmitDialogOpen(false);
-    }
-  };
-
-  const handleReviewSubmission = async () => {
-    if (!selectedSubmission) return;
-    try {
-      await reviewSubmission.mutateAsync({
-        submissionId: selectedSubmission.id,
-        status: reviewStatus,
-        reviewComments: reviewComments.trim() || undefined,
-      });
-    } catch (err) {
-      // Replace with toast or error UI as needed
-      console.error("Review submission failed:", err);
-    } finally {
-      setReviewDialogOpen(false);
-      setSelectedSubmission(null);
-      setReviewComments("");
-    }
-  };
-
-  const handleMarkPaid = async (submission: BountySubmissionType) => {
-    if (!transactionHash.trim()) return;
-    try {
-      await markSubmissionPaid.mutateAsync({
-        submissionId: submission.id,
-        transactionHash: transactionHash.trim(),
-      });
-    } catch (err) {
-      // Replace with toast or error UI as needed
-      console.error("Mark paid failed:", err);
-    } finally {
-      setTransactionHash("");
-      setSelectedPaidSubmission(null);
-      setMarkPaidDialogOpen(false);
-    }
-  };
-
-  const getStatusBadgeColor = (status: string) => {
-    switch (status) {
-      case "APPROVED":
-        return "bg-emerald-100 text-emerald-900";
-      case "REJECTED":
-        return "bg-red-100 text-red-900";
-      case "PENDING":
-      default:
-        return "bg-gray-100 text-gray-900";
-    }
-  };
-
-  const isSafeHttpUrl = (url: string) => {
-    try {
-      const parsed = new URL(url);
-      return parsed.protocol === "http:" || parsed.protocol === "https:";
-    } catch {
-      return false;
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Submit PR Section */}
-      {bounty.status === "OPEN" && (
-        <div className="p-5 rounded-xl border border-gray-800 bg-background-card space-y-4">
-          <h3 className="text-sm font-semibold text-gray-200">
-            Submit Your PR
-          </h3>
-
-          <Dialog open={submitDialogOpen} onOpenChange={setSubmitDialogOpen}>
-            <DialogTrigger asChild>
-              <Button className="w-full">Submit PR to Bounty</Button>
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-md">
-              <DialogHeader>
-                <DialogTitle>Submit Pull Request</DialogTitle>
-                <DialogDescription>
-                  Submit your GitHub pull request URL.
-                  {draft && (
-                    <span className="block mt-1 text-xs text-blue-400">
-                      Draft restored from{" "}
-                      {new Date(draft.updatedAt).toLocaleString()}
-                    </span>
-                  )}
-                </DialogDescription>
-              </DialogHeader>
-
-              <div className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="pr-url">Pull Request URL</Label>
-                  <Input
-                    id="pr-url"
-                    value={prUrl}
-                    onChange={(e) => setPrUrl(e.target.value)}
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="submit-comments">Comments</Label>
-                  <Textarea
-                    id="submit-comments"
-                    value={submitComments}
-                    onChange={(e) => setSubmitComments(e.target.value)}
-                  />
-                </div>
-
-                <div className="flex gap-2 justify-end">
-                  <Button
-                    variant="outline"
-                    onClick={() => setSubmitDialogOpen(false)}
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    onClick={handleSubmitPR}
-                    disabled={!prUrl.trim() || submitToBounty.isPending}
-                  >
-                    {submitToBounty.isPending && (
-                      <Loader2 className="mr-2 size-4 animate-spin" />
-                    )}
-                    Submit
-                  </Button>
-                </div>
-              </div>
-            </DialogContent>
-          </Dialog>
-        </div>
-      )}
-
-      {/* Submissions */}
-      {submissions.length > 0 && (
-        <div className="p-5 rounded-xl border border-gray-800 bg-background-card space-y-4">
-          <h3 className="text-sm font-semibold text-gray-200">
-            Submissions ({submissions.length})
-          </h3>
-
-          <div className="space-y-3">
-            {submissions.map((submission) => (
-              <div
-                key={submission.id}
-                className="p-3 rounded-lg border border-gray-700 bg-gray-900/30 space-y-2"
-              >
-                <div className="flex items-start justify-between gap-3">
-                  <div className="flex-1 space-y-1">
-                    <p className="text-sm font-medium text-gray-200">
-                      {submission.submittedByUser?.name ||
-                        submission.submittedBy}
-                    </p>
-
-                    {submission.githubPullRequestUrl &&
-                      (isSafeHttpUrl(submission.githubPullRequestUrl) ? (
-                        <a
-                          href={submission.githubPullRequestUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-xs text-primary hover:underline break-all"
-                        >
-                          {submission.githubPullRequestUrl}
-                        </a>
-                      ) : (
-                        <span className="text-xs text-gray-400 break-all">
-                          {submission.githubPullRequestUrl}
-                        </span>
-                      ))}
-                  </div>
-
-                  <div className="flex flex-col items-end gap-2">
-                    <div
-                      className={`px-2 py-1 rounded text-xs font-medium ${getStatusBadgeColor(
-                        submission.status,
-                      )}`}
-                    >
-                      {submission.status}
-                    </div>
-
-                    {isOrgMember && (
-                      <div className="flex gap-2">
-                        {!submission.reviewedAt && (
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() => {
-                              setSelectedSubmission(submission);
-                              setReviewDialogOpen(true);
-                            }}
-                          >
-                            Review
-                          </Button>
-                        )}
-
-                        {submission.status === "APPROVED" &&
-                          !submission.paidAt && (
-                            <Button
-                              size="sm"
-                              variant="outline"
-                              onClick={() => {
-                                setSelectedPaidSubmission(submission);
-                                setMarkPaidDialogOpen(true);
-                              }}
-                            >
-                              Mark Paid
-                            </Button>
-                          )}
-                      </div>
-                    )}
-                  </div>
-                </div>
-
-                {submission.paidAt && (
-                  <div className="flex items-center gap-2 text-xs text-emerald-400">
-                    <DollarSign className="size-3" />
-                    Paid on {new Date(submission.paidAt).toLocaleDateString()}
-                  </div>
-                )}
-
-                {submission.rewardTransactionHash && (
-                  <div className="flex items-center gap-2 text-xs">
-                    <span className="text-gray-400">Transaction:</span>
-                    <TransactionLink
-                      value={submission.rewardTransactionHash}
-                      maxLength={10}
-                      showCopy={true}
-                      className="text-primary"
-                    />
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Review Dialog */}
-      <Dialog open={reviewDialogOpen} onOpenChange={setReviewDialogOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Review Submission</DialogTitle>
-          </DialogHeader>
-
-          <div className="space-y-4">
-            <Textarea
-              placeholder="Add review feedback..."
-              value={reviewComments}
-              onChange={(e) => setReviewComments(e.target.value)}
-            />
-
-            <div className="flex justify-end gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setReviewDialogOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button onClick={handleReviewSubmission}>Submit Review</Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* Mark Paid Dialog */}
-      <Dialog open={markPaidDialogOpen} onOpenChange={setMarkPaidDialogOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Mark Submission as Paid</DialogTitle>
-            <DialogDescription>Enter the transaction hash.</DialogDescription>
-          </DialogHeader>
-
-          <div className="space-y-4">
-            <Input
-              value={transactionHash}
-              onChange={(e) => setTransactionHash(e.target.value)}
-            />
-
-            <div className="flex justify-end gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setMarkPaidDialogOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={() =>
-                  selectedPaidSubmission &&
-                  handleMarkPaid(selectedPaidSubmission)
-                }
-                disabled={
-                  !transactionHash.trim() || markSubmissionPaid.isPending
-                }
-              >
-                {markSubmissionPaid.isPending && (
-                  <Loader2 className="mr-2 size-4 animate-spin" />
-                )}
-                Confirm
-              </Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}
+export {
+  BountyDetailSubmissionsCard,
+  type BountyDetailSubmissionsCardProps,
+} from "./submissions/submissions-card";
diff --git a/components/bounty-detail/submissions/__tests__/submission-helpers.test.ts b/components/bounty-detail/submissions/__tests__/submission-helpers.test.ts
new file mode 100644
index 00000000..ab3c2d58
--- /dev/null
+++ b/components/bounty-detail/submissions/__tests__/submission-helpers.test.ts
@@ -0,0 +1,43 @@
+import { getStatusBadgeColor, isSafeHttpUrl } from "../submission-helpers";
+
+describe("getStatusBadgeColor", () => {
+  it("returns emerald classes for APPROVED", () => {
+    expect(getStatusBadgeColor("APPROVED")).toBe(
+      "bg-emerald-100 text-emerald-900",
+    );
+  });
+
+  it("returns red classes for REJECTED", () => {
+    expect(getStatusBadgeColor("REJECTED")).toBe("bg-red-100 text-red-900");
+  });
+
+  it("returns gray classes for PENDING", () => {
+    expect(getStatusBadgeColor("PENDING")).toBe("bg-gray-100 text-gray-900");
+  });
+
+  it("returns gray classes for unknown statuses", () => {
+    expect(getStatusBadgeColor("UNDER_REVIEW")).toBe(
+      "bg-gray-100 text-gray-900",
+    );
+  });
+});
+
+describe("isSafeHttpUrl", () => {
+  it("returns true for http URLs", () => {
+    expect(isSafeHttpUrl("http://example.com/pr/1")).toBe(true);
+  });
+
+  it("returns true for https URLs", () => {
+    expect(isSafeHttpUrl("https://github.com/org/repo/pull/42")).toBe(true);
+  });
+
+  it("returns false for non-http protocols", () => {
+    expect(isSafeHttpUrl("javascript:alert(1)")).toBe(false);
+    expect(isSafeHttpUrl("ftp://example.com/file")).toBe(false);
+  });
+
+  it("returns false for invalid URLs", () => {
+    expect(isSafeHttpUrl("not-a-url")).toBe(false);
+    expect(isSafeHttpUrl("")).toBe(false);
+  });
+});
diff --git a/components/bounty-detail/submissions/submission-helpers.ts b/components/bounty-detail/submissions/submission-helpers.ts
new file mode 100644
index 00000000..36929367
--- /dev/null
+++ b/components/bounty-detail/submissions/submission-helpers.ts
@@ -0,0 +1,20 @@
+export function getStatusBadgeColor(status: string) {
+  switch (status) {
+    case "APPROVED":
+      return "bg-emerald-100 text-emerald-900";
+    case "REJECTED":
+      return "bg-red-100 text-red-900";
+    case "PENDING":
+    default:
+      return "bg-gray-100 text-gray-900";
+  }
+}
+
+export function isSafeHttpUrl(url: string) {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
diff --git a/components/bounty-detail/submissions/submission-review-dialogs.tsx b/components/bounty-detail/submissions/submission-review-dialogs.tsx
new file mode 100644
index 00000000..9642337a
--- /dev/null
+++ b/components/bounty-detail/submissions/submission-review-dialogs.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { BountySubmissionType } from "@/lib/graphql/generated";
+import { Loader2 } from "lucide-react";
+
+interface SubmitPRDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  prUrl: string;
+  onPrUrlChange: (value: string) => void;
+  submitComments: string;
+  onSubmitCommentsChange: (value: string) => void;
+  draftUpdatedAt?: string;
+  onSubmit: () => void;
+  isPending: boolean;
+}
+
+export function SubmitPRDialog({
+  open,
+  onOpenChange,
+  prUrl,
+  onPrUrlChange,
+  submitComments,
+  onSubmitCommentsChange,
+  draftUpdatedAt,
+  onSubmit,
+  isPending,
+}: SubmitPRDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>
+        <Button className="w-full">Submit PR to Bounty</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Submit Pull Request</DialogTitle>
+          <DialogDescription>
+            Submit your GitHub pull request URL.
+            {draftUpdatedAt && (
+              <span className="block mt-1 text-xs text-blue-400">
+                Draft restored from {new Date(draftUpdatedAt).toLocaleString()}
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="pr-url">Pull Request URL</Label>
+            <Input
+              id="pr-url"
+              value={prUrl}
+              onChange={(e) => onPrUrlChange(e.target.value)}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="submit-comments">Comments</Label>
+            <Textarea
+              id="submit-comments"
+              value={submitComments}
+              onChange={(e) => onSubmitCommentsChange(e.target.value)}
+            />
+          </div>
+
+          <div className="flex gap-2 justify-end">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button onClick={onSubmit} disabled={!prUrl.trim() || isPending}>
+              {isPending && <Loader2 className="mr-2 size-4 animate-spin" />}
+              Submit
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface ReviewSubmissionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  reviewComments: string;
+  onReviewCommentsChange: (value: string) => void;
+  onSubmit: () => void;
+}
+
+export function ReviewSubmissionDialog({
+  open,
+  onOpenChange,
+  reviewComments,
+  onReviewCommentsChange,
+  onSubmit,
+}: ReviewSubmissionDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Review Submission</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <Textarea
+            placeholder="Add review feedback..."
+            value={reviewComments}
+            onChange={(e) => onReviewCommentsChange(e.target.value)}
+          />
+
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button onClick={onSubmit}>Submit Review</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface MarkPaidDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  transactionHash: string;
+  onTransactionHashChange: (value: string) => void;
+  selectedSubmission: BountySubmissionType | null;
+  onConfirm: (submission: BountySubmissionType) => void;
+  isPending: boolean;
+}
+
+export function MarkPaidDialog({
+  open,
+  onOpenChange,
+  transactionHash,
+  onTransactionHashChange,
+  selectedSubmission,
+  onConfirm,
+  isPending,
+}: MarkPaidDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Mark Submission as Paid</DialogTitle>
+          <DialogDescription>Enter the transaction hash.</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <Input
+            value={transactionHash}
+            onChange={(e) => onTransactionHashChange(e.target.value)}
+          />
+
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() =>
+                selectedSubmission && onConfirm(selectedSubmission)
+              }
+              disabled={!transactionHash.trim() || isPending}
+            >
+              {isPending && <Loader2 className="mr-2 size-4 animate-spin" />}
+              Confirm
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/bounty-detail/submissions/submission-row.tsx b/components/bounty-detail/submissions/submission-row.tsx
new file mode 100644
index 00000000..ee26a948
--- /dev/null
+++ b/components/bounty-detail/submissions/submission-row.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { TransactionLink } from "@/components/ui/stellar-link";
+import { BountySubmissionType } from "@/lib/graphql/generated";
+import { DollarSign } from "lucide-react";
+import { getStatusBadgeColor, isSafeHttpUrl } from "./submission-helpers";
+
+interface SubmissionRowProps {
+  submission: BountySubmissionType;
+  isOrgMember: boolean;
+  onReview: (submission: BountySubmissionType) => void;
+  onMarkPaid: (submission: BountySubmissionType) => void;
+}
+
+export function SubmissionRow({
+  submission,
+  isOrgMember,
+  onReview,
+  onMarkPaid,
+}: SubmissionRowProps) {
+  return (
+    <div className="p-3 rounded-lg border border-gray-700 bg-gray-900/30 space-y-2">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 space-y-1">
+          <p className="text-sm font-medium text-gray-200">
+            {submission.submittedByUser?.name || submission.submittedBy}
+          </p>
+
+          {submission.githubPullRequestUrl &&
+            (isSafeHttpUrl(submission.githubPullRequestUrl) ? (
+              <a
+                href={submission.githubPullRequestUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-primary hover:underline break-all"
+              >
+                {submission.githubPullRequestUrl}
+              </a>
+            ) : (
+              <span className="text-xs text-gray-400 break-all">
+                {submission.githubPullRequestUrl}
+              </span>
+            ))}
+        </div>
+
+        <div className="flex flex-col items-end gap-2">
+          <div
+            className={`px-2 py-1 rounded text-xs font-medium ${getStatusBadgeColor(
+              submission.status,
+            )}`}
+          >
+            {submission.status}
+          </div>
+
+          {isOrgMember && (
+            <div className="flex gap-2">
+              {!submission.reviewedAt && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => onReview(submission)}
+                >
+                  Review
+                </Button>
+              )}
+
+              {submission.status === "APPROVED" && !submission.paidAt && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => onMarkPaid(submission)}
+                >
+                  Mark Paid
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {submission.paidAt && (
+        <div className="flex items-center gap-2 text-xs text-emerald-400">
+          <DollarSign className="size-3" />
+          Paid on {new Date(submission.paidAt).toLocaleDateString()}
+        </div>
+      )}
+
+      {submission.rewardTransactionHash && (
+        <div className="flex items-center gap-2 text-xs">
+          <span className="text-gray-400">Transaction:</span>
+          <TransactionLink
+            value={submission.rewardTransactionHash}
+            maxLength={10}
+            showCopy={true}
+            className="text-primary"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/bounty-detail/submissions/submissions-card.tsx b/components/bounty-detail/submissions/submissions-card.tsx
new file mode 100644
index 00000000..2ef55939
--- /dev/null
+++ b/components/bounty-detail/submissions/submissions-card.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import {
+  useMarkSubmissionPaid,
+  useReviewSubmission,
+  useSubmitToBounty,
+} from "@/hooks/use-submission-mutations";
+import { useSubmissionDraft } from "@/hooks/use-submission-draft";
+import { authClient } from "@/lib/auth-client";
+import { BountySubmissionType } from "@/lib/graphql/generated";
+import { useEffect, useState } from "react";
+import {
+  MarkPaidDialog,
+  ReviewSubmissionDialog,
+  SubmitPRDialog,
+} from "./submission-review-dialogs";
+import { SubmissionRow } from "./submission-row";
+
+interface ExtendedUser {
+  id: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+  organizations?: string[];
+}
+
+export interface BountyDetailSubmissionsCardProps {
+  bounty: {
+    id: string;
+    status: string;
+    organizationId: string;
+    submissions?: Array<BountySubmissionType> | null;
+  };
+}
+
+export function BountyDetailSubmissionsCard({
+  bounty,
+}: BountyDetailSubmissionsCardProps) {
+  const { data: session } = authClient.useSession();
+  const submissions = bounty.submissions || [];
+  const { draft, clearDraft, autoSave } = useSubmissionDraft(bounty.id);
+
+  const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
+  const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
+  const [markPaidDialogOpen, setMarkPaidDialogOpen] = useState(false);
+
+  const [selectedSubmission, setSelectedSubmission] =
+    useState<BountySubmissionType | null>(null);
+  const [selectedPaidSubmission, setSelectedPaidSubmission] =
+    useState<BountySubmissionType | null>(null);
+
+  const [prUrl, setPrUrl] = useState("");
+  const [submitComments, setSubmitComments] = useState("");
+  const [reviewComments, setReviewComments] = useState("");
+  const reviewStatus = "APPROVED";
+  const [transactionHash, setTransactionHash] = useState("");
+
+  const submitToBounty = useSubmitToBounty();
+  const reviewSubmission = useReviewSubmission();
+  const markSubmissionPaid = useMarkSubmissionPaid();
+
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    if (draft?.formData) {
+      setPrUrl(draft.formData.githubPullRequestUrl);
+      setSubmitComments(draft.formData.comments);
+    }
+    setIsHydrated(true);
+  }, [draft]);
+
+  useEffect(() => {
+    if (!isHydrated) return;
+    const cleanup = autoSave({
+      githubPullRequestUrl: prUrl,
+      comments: submitComments,
+    });
+    return cleanup;
+  }, [prUrl, submitComments, autoSave, isHydrated]);
+
+  const isOrgMember =
+    (session?.user as ExtendedUser)?.organizations?.includes(
+      bounty.organizationId,
+    ) ?? false;
+
+  const handleSubmitPR = async () => {
+    if (!prUrl.trim()) return;
+    try {
+      await submitToBounty.mutateAsync({
+        bountyId: bounty.id,
+        githubPullRequestUrl: prUrl,
+        comments: submitComments.trim() || undefined,
+      });
+      clearDraft();
+    } catch (err) {
+      // Replace with toast or error UI as needed
+      console.error("Submit PR failed:", err);
+    } finally {
+      setPrUrl("");
+      setSubmitComments("");
+      setSubmitDialogOpen(false);
+    }
+  };
+
+  const handleReviewSubmission = async () => {
+    if (!selectedSubmission) return;
+    try {
+      await reviewSubmission.mutateAsync({
+        submissionId: selectedSubmission.id,
+        status: reviewStatus,
+        reviewComments: reviewComments.trim() || undefined,
+      });
+    } catch (err) {
+      // Replace with toast or error UI as needed
+      console.error("Review submission failed:", err);
+    } finally {
+      setReviewDialogOpen(false);
+      setSelectedSubmission(null);
+      setReviewComments("");
+    }
+  };
+
+  const handleMarkPaid = async (submission: BountySubmissionType) => {
+    if (!transactionHash.trim()) return;
+    try {
+      await markSubmissionPaid.mutateAsync({
+        submissionId: submission.id,
+        transactionHash: transactionHash.trim(),
+      });
+    } catch (err) {
+      // Replace with toast or error UI as needed
+      console.error("Mark paid failed:", err);
+    } finally {
+      setTransactionHash("");
+      setSelectedPaidSubmission(null);
+      setMarkPaidDialogOpen(false);
+    }
+  };
+
+  const handleReviewClick = (submission: BountySubmissionType) => {
+    setSelectedSubmission(submission);
+    setReviewDialogOpen(true);
+  };
+
+  const handleMarkPaidClick = (submission: BountySubmissionType) => {
+    setSelectedPaidSubmission(submission);
+    setMarkPaidDialogOpen(true);
+  };
+
+  return (
+    <div className="space-y-6">
+      {bounty.status === "OPEN" && (
+        <div className="p-5 rounded-xl border border-gray-800 bg-background-card space-y-4">
+          <h3 className="text-sm font-semibold text-gray-200">
+            Submit Your PR
+          </h3>
+
+          <SubmitPRDialog
+            open={submitDialogOpen}
+            onOpenChange={setSubmitDialogOpen}
+            prUrl={prUrl}
+            onPrUrlChange={setPrUrl}
+            submitComments={submitComments}
+            onSubmitCommentsChange={setSubmitComments}
+            draftUpdatedAt={draft?.updatedAt}
+            onSubmit={handleSubmitPR}
+            isPending={submitToBounty.isPending}
+          />
+        </div>
+      )}
+
+      {submissions.length > 0 && (
+        <div className="p-5 rounded-xl border border-gray-800 bg-background-card space-y-4">
+          <h3 className="text-sm font-semibold text-gray-200">
+            Submissions ({submissions.length})
+          </h3>
+
+          <div className="space-y-3">
+            {submissions.map((submission) => (
+              <SubmissionRow
+                key={submission.id}
+                submission={submission}
+                isOrgMember={isOrgMember}
+                onReview={handleReviewClick}
+                onMarkPaid={handleMarkPaidClick}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      <ReviewSubmissionDialog
+        open={reviewDialogOpen}
+        onOpenChange={setReviewDialogOpen}
+        reviewComments={reviewComments}
+        onReviewCommentsChange={setReviewComments}
+        onSubmit={handleReviewSubmission}
+      />
+
+      <MarkPaidDialog
+        open={markPaidDialogOpen}
+        onOpenChange={setMarkPaidDialogOpen}
+        transactionHash={transactionHash}
+        onTransactionHashChange={setTransactionHash}
+        selectedSubmission={selectedPaidSubmission}
+        onConfirm={handleMarkPaid}
+        isPending={markSubmissionPaid.isPending}
+      />
+    </div>
+  );
+}
diff --git a/components/reputation/__tests__/my-claims.test.ts b/components/reputation/__tests__/my-claims.test.ts
index 92d60223..f2195ef3 100644
--- a/components/reputation/__tests__/my-claims.test.ts
+++ b/components/reputation/__tests__/my-claims.test.ts
@@ -1,5 +1,4 @@
 import { CLAIM_SECTIONS, getClaimsBySection, normalizeStatus, type MyClaim } from "@/components/reputation/my-claims";
-import { describe, expect, it } from "@jest/globals";
 
 describe("My Claims helpers", () => {
     it("normalizes status values consistently", () => {