diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4f9e0867..53f3a7b4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -36,6 +36,7 @@ import {
 import {
   debounce,
   filterBounties,
+  validateStellarPublicKey,
 } from "./utils";
 import {
   type Bounty,
@@ -53,6 +54,7 @@ import ContributorProfilePage from "./ContributorProfilePage";
 import ContributorDashboard from "./ContributorDashboard";
 import ErrorBoundary from "./ErrorBoundary";
 import SubmissionChecklistModal, { type SubmissionFormData } from "./SubmissionChecklistModal";
+import BountyCreationForm from "./BountyCreationForm";
 
 const DARK_MODE_KEY = "stellar-bounty-board-theme";
 
@@ -80,26 +82,6 @@ function useDarkMode() {
   return { dark, toggle: () => setDark((d) => !d) };
 }
 
-const initialForm: CreateBountyPayload = {
-  repo: "ritik4ever/stellar-stream",
-  issueNumber: 48,
-  title: "",
-  summary: "",
-  maintainer: "GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF",
-  tokenSymbol: "XLM",
-  amount: 150,
-  deadlineDays: 14,
-  labels: [{ name: "help wanted", color: "0075ca" }],
-};
-
-function validateStellarPublicKey(input: string): string | null {
-  const value = input.trim();
-  if (!value) return "Address is required.";
-  if (!/^G[A-Z0-9]{55}$/.test(value))
-    return "Enter a Stellar public key (starts with 'G', 56 characters)";
-  return null;
-}
-
 const contributorStatuses: Array<BountyStatus | "all"> = [
   "all",
   "reserved",
@@ -121,16 +103,12 @@ function App() {
   const { dark, toggle: toggleDark } = useDarkMode();
   const freighter = useFreighter();
   const initialFilters = useMemo(() => readInitialFilters(), []);
-  const [form, setForm] = useState<CreateBountyPayload>(initialForm);
   const [bounties, setBounties] = useState<Bounty[]>([]);
   const [, setIssues] = useState<OpenIssue[]>([]);
   const [loading, setLoading] = useState(true);
-  const [submitting, setSubmitting] = useState(false);
   const [showShortcutsOverlay, setShowShortcutsOverlay] = useState(false);
   const [isFormDirty, setIsFormDirty] = useState(false);
 
-  useBeforeUnload(isFormDirty);
-
   useEffect(() => {
     function goOnline() {
       // setIsOffline(false);
@@ -605,41 +583,14 @@ function App() {
     );
   }
 
-  async function handleCreate(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setSubmitting(true);
+  async function handleCreateBounty(payload: CreateBountyPayload) {
     try {
-      // Validate required fields
-      if (!form.repo.trim()) {
-        toast.error("Repository is required.");
-        return;
-      }
-      if (!form.title.trim()) {
-        toast.error("Title is required.");
-        return;
-      }
-      if (form.amount <= 0) {
-        toast.error("Reward amount must be greater than 0.");
-        return;
-      }
-      const maintainerError = validateStellarPublicKey(form.maintainer);
-      if (maintainerError) {
-        toast.error(`Maintainer address: ${maintainerError}`);
-        return;
-      }
-      await createBounty({
-        ...form,
-        maintainer: form.maintainer.trim(),
-        labels: form.labels.filter(Boolean),
-      });
-      setForm({ ...initialForm, issueNumber: form.issueNumber + 1 });
-      setIsFormDirty(false);
+      await createBounty(payload);
       await refresh();
       toast.success("Bounty created successfully!");
     } catch (err) {
       toast.error(err instanceof Error ? err.message : "Failed to create bounty.");
-    } finally {
-      setSubmitting(false);
+      throw err;
     }
   }
 
@@ -669,88 +620,10 @@ function App() {
                 A decentralized bounty platform powered by Stellar. Reserve tasks, submit solutions,
                 and get paid instantly.
               </p>
-              <form className="bounty-form" onSubmit={handleCreate}>
-                <div className="form-row">
-                  <label>
-                    Repository
-                    <input
-                      value={form.repo}
-                      onChange={(e) => {
-                        setForm({ ...form, repo: e.target.value });
-                        setIsFormDirty(true);
-                      }}
-                      placeholder="owner/repo"
-                    />
-                  </label>
-                  <label>
-                    Issue #
-                    <input
-                      type="number"
-                      value={form.issueNumber}
-                      onChange={(e) => {
-                        setForm({ ...form, issueNumber: Number(e.target.value) });
-                        setIsFormDirty(true);
-                      }}
-                    />
-                  </label>
-                </div>
-                <div className="form-row">
-                  <label>
-                    Title
-                    <input
-                      value={form.title}
-                      onChange={(e) => {
-                        setForm({ ...form, title: e.target.value });
-                        setIsFormDirty(true);
-                      }}
-                      placeholder="Add WebSocket updates..."
-                    />
-                  </label>
-                </div>
-                <div className="form-row">
-                  <label>
-                    Reward
-                    <input
-                      type="number"
-                      value={form.amount}
-                      onChange={(e) => {
-                        setForm({ ...form, amount: Number(e.target.value) });
-                        setIsFormDirty(true);
-                      }}
-                    />
-                  </label>
-                  <label>
-                    Asset
-                    <select
-                      value={form.tokenSymbol}
-                      onChange={(e) => {
-                        setForm({ ...form, tokenSymbol: e.target.value });
-                        setIsFormDirty(true);
-                      }}
-                    >
-                      <option value="XLM">XLM</option>
-                      <option value="USDC">USDC</option>
-                    </select>
-                  </label>
-                </div>
-                <div className="form-actions">
-                <button type="submit" disabled={submitting}>
-                  {submitting ? "Creating..." : "Create Bounty"}
-                </button>
-                {isFormDirty && (
-                  <button
-                    type="button"
-                    className="ghost-button"
-                    onClick={() => {
-                      setForm(initialForm);
-                      setIsFormDirty(false);
-                    }}
-                  >
-                    Discard
-                  </button>
-                )}
-              </div>
-              </form>
+              <BountyCreationForm
+                onSubmit={handleCreateBounty}
+                onDirtyChange={setIsFormDirty}
+              />
             </div>
           </div>
         </section>
diff --git a/frontend/src/BountyCreationForm.tsx b/frontend/src/BountyCreationForm.tsx
new file mode 100644
index 00000000..41d711bf
--- /dev/null
+++ b/frontend/src/BountyCreationForm.tsx
@@ -0,0 +1,160 @@
+import React, { useState, type FormEvent } from "react";
+import { toast } from "sonner";
+import { type CreateBountyPayload } from "./types";
+import { validateStellarPublicKey } from "./utils";
+import { useBeforeUnload } from "./useBeforeUnload";
+
+const initialForm: CreateBountyPayload = {
+  repo: "ritik4ever/stellar-stream",
+  issueNumber: 48,
+  title: "",
+  summary: "",
+  maintainer: "GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF",
+  tokenSymbol: "XLM",
+  amount: 150,
+  deadlineDays: 14,
+  labels: [{ name: "help wanted", color: "0075ca" }],
+};
+
+interface BountyCreationFormProps {
+  onSubmit: (payload: CreateBountyPayload) => Promise<void>;
+  onDirtyChange?: (isDirty: boolean) => void;
+}
+
+export default function BountyCreationForm({ onSubmit, onDirtyChange }: BountyCreationFormProps) {
+  const [form, setForm] = useState<CreateBountyPayload>(initialForm);
+  const [submitting, setSubmitting] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
+
+  useBeforeUnload(isFormDirty);
+
+  const updateDirtyState = (dirty: boolean) => {
+    setIsFormDirty(dirty);
+    onDirtyChange?.(dirty);
+  };
+
+  async function handleCreate(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setSubmitting(true);
+    try {
+      // Validate required fields
+      if (!form.repo.trim()) {
+        toast.error("Repository is required.");
+        return;
+      }
+      if (!form.title.trim()) {
+        toast.error("Title is required.");
+        return;
+      }
+      if (form.amount <= 0) {
+        toast.error("Reward amount must be greater than 0.");
+        return;
+      }
+      const maintainerError = validateStellarPublicKey(form.maintainer);
+      if (maintainerError) {
+        toast.error(`Maintainer address: ${maintainerError}`);
+        return;
+      }
+
+      const payload = {
+        ...form,
+        maintainer: form.maintainer.trim(),
+        labels: form.labels.filter(Boolean),
+      };
+
+      await onSubmit(payload);
+
+      setForm({ ...initialForm, issueNumber: form.issueNumber + 1 });
+      updateDirtyState(false);
+    } catch (err) {
+      // Allow parent to handle/toast error, keep form state
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <form className="bounty-form" onSubmit={handleCreate}>
+      <div className="form-row">
+        <label>
+          Repository
+          <input
+            value={form.repo}
+            onChange={(e) => {
+              setForm({ ...form, repo: e.target.value });
+              updateDirtyState(true);
+            }}
+            placeholder="owner/repo"
+          />
+        </label>
+        <label>
+          Issue #
+          <input
+            type="number"
+            value={form.issueNumber}
+            onChange={(e) => {
+              setForm({ ...form, issueNumber: Number(e.target.value) });
+              updateDirtyState(true);
+            }}
+          />
+        </label>
+      </div>
+      <div className="form-row">
+        <label>
+          Title
+          <input
+            value={form.title}
+            onChange={(e) => {
+              setForm({ ...form, title: e.target.value });
+              updateDirtyState(true);
+            }}
+            placeholder="Add WebSocket updates..."
+          />
+        </label>
+      </div>
+      <div className="form-row">
+        <label>
+          Reward
+          <input
+            type="number"
+            value={form.amount}
+            onChange={(e) => {
+              setForm({ ...form, amount: Number(e.target.value) });
+              updateDirtyState(true);
+            }}
+          />
+        </label>
+        <label>
+          Asset
+          <select
+            value={form.tokenSymbol}
+            onChange={(e) => {
+              setForm({ ...form, tokenSymbol: e.target.value });
+              updateDirtyState(true);
+            }}
+          >
+            <option value="XLM">XLM</option>
+            <option value="USDC">USDC</option>
+          </select>
+        </label>
+      </div>
+      <div className="form-actions">
+        <button type="submit" disabled={submitting}>
+          {submitting ? "Creating..." : "Create Bounty"}
+        </button>
+        {isFormDirty && (
+          <button
+            type="button"
+            className="ghost-button"
+            onClick={() => {
+              setForm(initialForm);
+              updateDirtyState(false);
+            }}
+          >
+            Discard
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}
diff --git a/frontend/src/ContributorProfilePage.tsx b/frontend/src/ContributorProfilePage.tsx
index b88a2dbd..aecc96b7 100644
--- a/frontend/src/ContributorProfilePage.tsx
+++ b/frontend/src/ContributorProfilePage.tsx
@@ -22,6 +22,39 @@ async function fetchLeaderboard(): Promise<any[]> {
   return body.data ?? [];
 }
 
+type Reputation = {
+  score: number;
+};
+
+type Badge = {
+  id: string;
+  name: string;
+  imageUrl?: string;
+  description?: string;
+};
+
+async function fetchReputation(address: string): Promise<Reputation | null> {
+  try {
+    const res = await fetch(`/api/reputation?contributor=${encodeURIComponent(address)}`);
+    if (!res.ok) return null;
+    const body = await res.json();
+    return body.data ?? null;
+  } catch (err) {
+    return null;
+  }
+}
+
+async function fetchBadges(address: string): Promise<Badge[]> {
+  try {
+    const res = await fetch(`/api/badges?contributor=${encodeURIComponent(address)}`);
+    if (!res.ok) return [];
+    const body = await res.json();
+    return body.data ?? [];
+  } catch (err) {
+    return [];
+  }
+}
+
 export default function ContributorProfilePage({
   address,
   onBack,
@@ -32,10 +65,26 @@ export default function ContributorProfilePage({
   const [bounties, setBounties] = useState<Bounty[]>([]);
   const [allBounties, setAllBounties] = useState<Bounty[]>([]);
   const [leaderboard, setLeaderboard] = useState<any[]>([]);
+  const [reputation, setReputation] = useState<Reputation | null>(null);
+  const [badges, setBadges] = useState<Badge[]>([]);
+  const [loadingReputation, setLoadingReputation] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     let active = true;
+    setLoadingReputation(true);
+
+    Promise.all([
+      fetchReputation(address),
+      fetchBadges(address)
+    ]).then(([repData, badgesData]) => {
+      if (active) {
+        setReputation(repData);
+        setBadges(badgesData);
+        setLoadingReputation(false);
+      }
+    });
+
     void fetchContributorBounties(address)
       .then((data) => {
         if (active) setBounties(data);
@@ -105,6 +154,41 @@ export default function ContributorProfilePage({
 
       {error && <div className="error">{error}</div>}
 
+      <section className="reputation-section" style={{ marginBottom: '20px' }}>
+        <h3>Reputation & Badges</h3>
+        {loadingReputation ? (
+          <div className="skeleton" style={{ height: '60px', background: '#f0f0f0', borderRadius: '4px', display: 'flex', alignItems: 'center', padding: '0 10px', color: '#888' }}>
+            Loading reputation...
+          </div>
+        ) : (!reputation && badges.length === 0) ? (
+          <p>No reputation data yet. Complete bounties to earn reputation!</p>
+        ) : (
+          <div className="reputation-content" style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+            {reputation && (
+              <div className="reputation-score">
+                <span className="meta-label">Reputation Score: </span>
+                <strong>{reputation.score}</strong>
+              </div>
+            )}
+            
+            {badges.length > 0 && (
+              <div className="badge-gallery" style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+                {badges.map((b) => (
+                  <div key={b.id} className="badge" title={b.description} style={{ border: '1px solid #e1e4e8', borderRadius: '6px', padding: '8px', display: 'flex', flexDirection: 'column', alignItems: 'center', width: '80px' }}>
+                    {b.imageUrl ? (
+                      <img src={b.imageUrl} alt={b.name} style={{ width: '40px', height: '40px', objectFit: 'contain' }} />
+                    ) : (
+                      <div style={{ width: '40px', height: '40px', background: '#e1e4e8', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '20px' }}>🏆</div>
+                    )}
+                    <span style={{ fontSize: '12px', textAlign: 'center', marginTop: '5px', wordBreak: 'break-word' }}>{b.name}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </section>
+
       <ContributorDashboard bounties={allBounties} loading={allBounties.length === 0 && !error} />
 
       <section className="metrics">
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index 8da1bc4b..1f3a61ce 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -324,3 +324,11 @@ export async function getXlmRate(): Promise<number | null> {
 
   return pendingRequest;
 }
+
+export function validateStellarPublicKey(input: string): string | null {
+  const value = input.trim();
+  if (!value) return "Address is required.";
+  if (!/^G[A-Z0-9]{55}$/.test(value))
+    return "Enter a Stellar public key (starts with 'G', 56 characters)";
+  return null;
+}