diff --git a/netlify.toml b/netlify.toml
index d15200d..79bd4fb 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -10,10 +10,12 @@
 [[headers]]
   for = "/*"
   [headers.values]
+    Content-Security-Policy = "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://stepfi-api.onrender.com; font-src 'self'; frame-ancestors 'none'; form-action 'self'; base-uri 'self'"
     X-Frame-Options = "DENY"
     X-Content-Type-Options = "nosniff"
     Referrer-Policy = "strict-origin-when-cross-origin"
     Permissions-Policy = "camera=(), microphone=(), geolocation=()"
+    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
 
 [[headers]]
   for = "/assets/*"
diff --git a/package-lock.json b/package-lock.json
index 56ca604..e15be9a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@tanstack/react-query": "^5.101.0",
         "axios": "^1.18.0",
         "clsx": "^2.1.1",
+        "dompurify": "^3.4.11",
         "framer-motion": "^12.40.0",
         "lucide-react": "^1.18.0",
         "react": "^19.2.6",
@@ -22,6 +23,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^10.0.1",
+        "@types/dompurify": "^3.0.5",
         "@types/node": "^24.13.2",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
@@ -1036,6 +1038,16 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -1087,6 +1099,13 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.61.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.61.0.tgz",
@@ -1952,6 +1971,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dompurify": {
+      "version": "3.4.11",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.11.tgz",
+      "integrity": "sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
diff --git a/package.json b/package.json
index c0f3b07..d3d94f8 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@tanstack/react-query": "^5.101.0",
     "axios": "^1.18.0",
     "clsx": "^2.1.1",
+    "dompurify": "^3.4.11",
     "framer-motion": "^12.40.0",
     "lucide-react": "^1.18.0",
     "react": "^19.2.6",
@@ -24,6 +25,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index a6c5b30..3a91e16 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -24,10 +24,6 @@ export function Navbar() {
     return () => window.removeEventListener('scroll', handle)
   }, [])
 
-  useEffect(() => {
-    setMobileOpen(false)
-  }, [pathname])
-
   return (
     <nav
       className="fixed top-0 w-full z-50 transition-all duration-300"
@@ -44,7 +40,10 @@ export function Navbar() {
       <div className="max-w-7xl mx-auto px-4 md:px-6 py-4
         flex items-center justify-between">
 
-        <Link to="/" className="flex items-center gap-2 group">
+        <Link 
+          to="/" 
+          className="flex items-center gap-2 group"
+          onClick={() => setMobileOpen(false)}>
           <svg width="28" height="24" viewBox="0 0 28 24">
             <rect x="0" y="18" width="6" height="6"
               rx="1.5" fill="#1D4ED8"/>
@@ -160,6 +159,7 @@ export function Navbar() {
             <Link
               key={link.href}
               to={link.href}
+              onClick={() => setMobileOpen(false)}
               className="px-4 py-3 rounded-lg text-sm font-medium"
               style={{
                 color: pathname === link.href
diff --git a/src/hooks/useTransaction.ts b/src/hooks/useTransaction.ts
new file mode 100644
index 0000000..e0d2b44
--- /dev/null
+++ b/src/hooks/useTransaction.ts
@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { signTransaction } from '@stellar/freighter-api'
+import { STELLAR_NETWORK } from '../constants/config'
+
+interface UseTransactionReturn {
+  isLoading: boolean
+  error: string | null
+  execute: <T>(
+    getXdr: () => Promise<{ xdr: string }>,
+    submit: (signedXdr: string) => Promise<T>
+  ) => Promise<T>
+}
+
+export function useTransaction(): UseTransactionReturn {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const execute = async <T>(
+    getXdr: () => Promise<{ xdr: string }>,
+    submit: (signedXdr: string) => Promise<T>
+  ): Promise<T> => {
+    setIsLoading(true)
+    setError(null)
+    try {
+      const { xdr } = await getXdr()
+      
+      const networkPassphrase = (STELLAR_NETWORK as string) === 'PUBLIC'
+        ? 'Public Global Stellar Network ; October 2015'
+        : 'Test SDF Network ; September 2015'
+
+      const signedResponse = await signTransaction(xdr, {
+        networkPassphrase,
+      })
+
+      if (!signedResponse || signedResponse.error) {
+        throw new Error(typeof signedResponse.error === 'string' ? signedResponse.error : 'User rejected the transaction')
+      }
+      
+      const result = await submit(signedResponse.signedTxXdr)
+      return result
+    } catch (err: unknown) {
+      console.error('Transaction failed:', err)
+      const message = err instanceof Error ? err.message : 'Transaction failed'
+      setError(message)
+      throw err
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return { isLoading, error, execute }
+}
diff --git a/src/lib/sanitize.ts b/src/lib/sanitize.ts
new file mode 100644
index 0000000..853fd6d
--- /dev/null
+++ b/src/lib/sanitize.ts
@@ -0,0 +1,11 @@
+import DOMPurify from 'dompurify'
+
+DOMPurify.setConfig({ ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+
+export function sanitizeText(input: string): string {
+  return DOMPurify.sanitize(input, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
+}
+
+export function sanitizeHtml(input: string): string {
+  return DOMPurify.sanitize(input)
+}
diff --git a/src/pages/LearnerProfile.tsx b/src/pages/LearnerProfile.tsx
index e8e6049..b20b956 100644
--- a/src/pages/LearnerProfile.tsx
+++ b/src/pages/LearnerProfile.tsx
@@ -10,6 +10,7 @@ import { Card } from '../components/ui/Card'
 import { Button } from '../components/ui/Button'
 import { Badge } from '../components/ui/Badge'
 import { Spinner } from '../components/ui/Spinner'
+import { sanitizeText } from '../lib/sanitize'
 import type { LearnerProfile, ReputationHistoryPoint, Vouch, Loan } from '../types'
 
 const TIER_COLORS: Record<string, 'green' | 'blue' | 'amber' | 'red' | 'muted'> = {
@@ -272,7 +273,7 @@ export function LearnerProfile() {
                       <Badge label="Active" variant="green" />
                     </div>
                     {vouch.message && (
-                      <p className="text-text-muted text-xs mt-1">{vouch.message}</p>
+                      <p className="text-text-muted text-xs mt-1">{sanitizeText(vouch.message)}</p>
                     )}
                     <p className="text-text-muted text-xs mt-1">
                       {new Date(vouch.createdAt).toLocaleDateString()}
diff --git a/src/pages/SponsorOnboarding.tsx b/src/pages/SponsorOnboarding.tsx
new file mode 100644
index 0000000..4ba615c
--- /dev/null
+++ b/src/pages/SponsorOnboarding.tsx
@@ -0,0 +1,355 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { motion, AnimatePresence } from 'framer-motion'
+import type { Variants } from 'framer-motion'
+import { useQuery } from '@tanstack/react-query'
+import { Wallet, BarChart3, ArrowRight, Check, AlertTriangle, ExternalLink } from 'lucide-react'
+import { Button } from '../components/ui/Button'
+import { Card } from '../components/ui/Card'
+import { Spinner } from '../components/ui/Spinner'
+import { poolService } from '../services/pool.service'
+import { useAppStore } from '../stores/app.store'
+import { useWallet } from '../hooks/useWallet'
+import { GRANTFOX_URL } from '../constants/config'
+
+const steps = [
+  { title: 'Welcome', icon: Wallet },
+  { title: 'Risks', icon: AlertTriangle },
+  { title: 'Pool Health', icon: BarChart3 },
+  { title: 'Deposit', icon: ArrowRight },
+]
+
+const fadeSlide: Variants = {
+  initial: { opacity: 0, x: 40 },
+  animate: { opacity: 1, x: 0, transition: { duration: 0.35, ease: 'easeOut' } },
+  exit: { opacity: 0, x: -40, transition: { duration: 0.25, ease: 'easeIn' } },
+}
+
+function StepIndicator({ current }: { current: number }) {
+  return (
+    <div className="max-w-xl mx-auto mb-12">
+      <div className="flex items-center justify-between mb-3">
+        {steps.map((s, i) => (
+          <div key={i} className="flex items-center gap-2">
+            <div
+              className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-all duration-300 ${
+                i < current
+                  ? 'bg-brand text-bg'
+                  : i === current
+                    ? 'bg-brand/20 text-brand border border-brand'
+                    : 'bg-surface text-text-muted border border-border'
+              }`}
+            >
+              {i < current ? <Check size={14} /> : i + 1}
+            </div>
+            <span
+              className={`hidden sm:block text-sm font-medium ${
+                i <= current ? 'text-text-primary' : 'text-text-muted'
+              }`}
+            >
+              {s.title}
+            </span>
+          </div>
+        ))}
+      </div>
+      <div className="h-1.5 bg-surface rounded-full overflow-hidden">
+        <div
+          className="h-full bg-brand transition-all duration-500 rounded-full"
+          style={{ width: `${(current / (steps.length - 1)) * 100}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+function StepWelcome({ onNext }: { onNext: () => void }) {
+  return (
+    <motion.div key="welcome" variants={fadeSlide} initial="initial" animate="animate" exit="exit" className="text-center max-w-lg mx-auto">
+      <div className="w-16 h-16 rounded-2xl bg-brand/10 border border-brand/30 flex items-center justify-center mx-auto mb-6">
+        <Wallet size={32} className="text-brand" />
+      </div>
+      <h1 className="font-display font-bold text-3xl text-text-primary mb-4">
+        Welcome to the Sponsor Pool
+      </h1>
+      <p className="text-text-secondary leading-relaxed mb-3">
+        StepFi connects sponsors like you with verified learners who need
+        affordable financing for education, tools, and career growth.
+      </p>
+      <p className="text-text-secondary leading-relaxed mb-8">
+        When you deposit USDC into the pool, your capital gets deployed to
+        real learner loans. You earn yield from the interest learners pay back,
+        and you can withdraw your deposit plus earned yield at any time.
+      </p>
+      <Button onClick={onNext} size="lg">
+        Get Started <ArrowRight size={16} />
+      </Button>
+    </motion.div>
+  )
+}
+
+const risks = [
+  {
+    title: 'Default Risk',
+    body: 'Learners may fail to repay their loans. While StepFi uses on-chain reputation scores to vet borrowers, past performance does not guarantee future results. Defaults reduce pool returns and may impact principal.',
+    severity: 'high',
+  },
+  {
+    title: 'Smart Contract Risk',
+    body: 'The pool is managed by Stellar smart contracts that have been developed and tested, but no software is guaranteed bug-free. Exploits or vulnerabilities could result in loss of funds.',
+    severity: 'medium',
+  },
+  {
+    title: 'Market & Liquidity Risk',
+    body: 'If a large number of sponsors withdraw simultaneously, the pool may temporarily hold insufficient liquid capital to process all withdrawals. Withdrawals are processed on a first-come, first-served basis from available liquidity.',
+    severity: 'medium',
+  },
+  {
+    title: 'Protocol Risk',
+    body: 'StepFi is an early-stage protocol. The platform, its smart contracts, and its business model may change or be discontinued. There is no guarantee of continued operation or future returns.',
+    severity: 'high',
+  },
+]
+
+function StepRisks({ onNext }: { onNext: () => void }) {
+  return (
+    <motion.div key="risks" variants={fadeSlide} initial="initial" animate="animate" exit="exit" className="max-w-lg mx-auto">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 rounded-2xl bg-amber-500/10 border border-amber-500/30 flex items-center justify-center mx-auto mb-6">
+          <AlertTriangle size={32} className="text-amber-400" />
+        </div>
+        <h2 className="font-display font-bold text-2xl text-text-primary mb-2">
+          Understand the Risks
+        </h2>
+        <p className="text-text-secondary text-sm">
+          Sponsor pools offer attractive returns, but they are not risk-free.
+          Please read each risk carefully before depositing.
+        </p>
+      </div>
+
+      <div className="space-y-3 mb-8">
+        {risks.map((risk) => (
+          <Card key={risk.title}>
+            <div className="flex items-start gap-3">
+              <div
+                className={`mt-0.5 w-2 h-2 rounded-full shrink-0 ${
+                  risk.severity === 'high' ? 'bg-red-500' : 'bg-amber-400'
+                }`}
+              />
+              <div>
+                <h3 className="font-semibold text-text-primary mb-1">{risk.title}</h3>
+                <p className="text-text-secondary text-sm leading-relaxed">{risk.body}</p>
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      <Button onClick={onNext} size="lg" className="w-full">
+        I Understand <ArrowRight size={16} />
+      </Button>
+    </motion.div>
+  )
+}
+
+function formatCurrency(value: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value)
+}
+
+function StepPoolHealth({ onNext }: { onNext: () => void }) {
+  const [depositAmount, setDepositAmount] = useState('')
+  const { data: pool, isLoading } = useQuery({
+    queryKey: ['pool-info'],
+    queryFn: () => poolService.getPoolInfo(),
+    refetchInterval: 30_000,
+  })
+
+  const depositNum = parseFloat(depositAmount) || 0
+  const apy = pool?.apy ?? 0
+  const yearlyYield = depositNum * apy
+  const monthlyYield = yearlyYield / 12
+
+  return (
+    <motion.div key="pool" variants={fadeSlide} initial="initial" animate="animate" exit="exit" className="max-w-lg mx-auto">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 rounded-2xl bg-brand/10 border border-brand/30 flex items-center justify-center mx-auto mb-6">
+          <BarChart3 size={32} className="text-brand" />
+        </div>
+        <h2 className="font-display font-bold text-2xl text-text-primary mb-2">
+          Current Pool Health
+        </h2>
+        <p className="text-text-secondary text-sm">
+          Real-time metrics from the StepFi liquidity pool.
+        </p>
+      </div>
+
+      {isLoading ? (
+        <div className="flex justify-center py-12">
+          <Spinner />
+        </div>
+      ) : pool ? (
+        <div className="grid grid-cols-2 gap-3 mb-8">
+          <Card>
+            <p className="text-text-muted text-xs font-medium mb-1">Total Deposits</p>
+            <p className="font-display font-bold text-xl text-text-primary">
+              {formatCurrency(pool.totalDeposits)}
+            </p>
+          </Card>
+          <Card>
+            <p className="text-text-muted text-xs font-medium mb-1">APY</p>
+            <p className="font-display font-bold text-xl text-brand">
+              {(apy * 100).toFixed(1)}%
+            </p>
+          </Card>
+          <Card>
+            <p className="text-text-muted text-xs font-medium mb-1">Available Liquidity</p>
+            <p className="font-display font-bold text-xl text-text-primary">
+              {formatCurrency(pool.availableLiquidity)}
+            </p>
+          </Card>
+          <Card>
+            <p className="text-text-muted text-xs font-medium mb-1">Locked in Loans</p>
+            <p className="font-display font-bold text-xl text-text-primary">
+              {formatCurrency(pool.lockedLiquidity)}
+            </p>
+          </Card>
+        </div>
+      ) : (
+        <Card className="text-center py-8 mb-8">
+          <p className="text-text-secondary">Unable to load pool data.</p>
+        </Card>
+      )}
+
+      <Card className="mb-8">
+        <h3 className="font-semibold text-text-primary mb-3">Yield Preview</h3>
+        <p className="text-text-muted text-xs mb-3">
+          Enter a deposit amount to see your estimated returns.
+        </p>
+        <div className="relative mb-4">
+          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted font-medium">$</span>
+          <input
+            type="number"
+            placeholder="0"
+            value={depositAmount}
+            onChange={(e) => setDepositAmount(e.target.value)}
+            className="w-full bg-bg border border-border rounded-xl px-8 py-2.5 text-text-primary
+              font-display font-bold text-lg outline-none focus:border-brand transition-colors
+              [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+          />
+        </div>
+        {depositNum > 0 && (
+          <div className="space-y-2 pt-3 border-t border-border">
+            <div className="flex justify-between text-sm">
+              <span className="text-text-secondary">Yearly yield</span>
+              <span className="text-text-primary font-semibold">${yearlyYield.toFixed(2)}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-text-secondary">Monthly yield</span>
+              <span className="text-text-primary font-semibold">${monthlyYield.toFixed(2)}</span>
+            </div>
+          </div>
+        )}
+      </Card>
+
+      <Button onClick={onNext} size="lg" className="w-full">
+        Continue <ArrowRight size={16} />
+      </Button>
+    </motion.div>
+  )
+}
+
+function StepDeposit({ onComplete }: { onComplete: () => void }) {
+  const { isConnected, connectFreighter } = useWallet()
+
+  return (
+    <motion.div key="deposit" variants={fadeSlide} initial="initial" animate="animate" exit="exit" className="text-center max-w-lg mx-auto">
+      <div className="w-16 h-16 rounded-2xl bg-brand/10 border border-brand/30 flex items-center justify-center mx-auto mb-6">
+        <ArrowRight size={32} className="text-brand" />
+      </div>
+      <h2 className="font-display font-bold text-2xl text-text-primary mb-4">
+        Make Your First Deposit
+      </h2>
+      <p className="text-text-secondary leading-relaxed mb-8">
+        Connect your Stellar wallet and deposit USDC to start earning yield
+        while funding real learner dreams. You can deposit any amount and
+        withdraw anytime.
+      </p>
+
+      {!isConnected ? (
+        <Button onClick={connectFreighter} size="lg" className="w-full">
+          Connect Freighter Wallet
+        </Button>
+      ) : (
+        <div className="space-y-3">
+          <p className="text-sm text-text-secondary">
+            Your wallet is connected. Head to the sponsor dashboard to make
+            your first deposit.
+          </p>
+          <Button onClick={onComplete} size="lg" className="w-full">
+            Go to Sponsor Dashboard <ExternalLink size={16} />
+          </Button>
+        </div>
+      )}
+
+      <div className="mt-8 pt-6 border-t border-border">
+        <p className="text-xs text-text-muted leading-relaxed">
+          No wallet yet? You can also contribute via
+          {' '}
+          <a
+            href={GRANTFOX_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-brand hover:underline"
+          >
+            GrantFox
+          </a>.
+        </p>
+      </div>
+    </motion.div>
+  )
+}
+
+export function SponsorOnboarding() {
+  const [step, setStep] = useState(0)
+  const setOnboardingComplete = useAppStore((s) => s.setOnboardingComplete)
+  const navigate = useNavigate()
+
+  const handleNext = () => {
+    if (step < steps.length - 1) {
+      setStep(step + 1)
+    }
+  }
+
+  const handleComplete = () => {
+    setOnboardingComplete(true)
+    navigate('/sponsors')
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto px-6 py-16">
+      <StepIndicator current={step} />
+
+      <AnimatePresence mode="wait">
+        {step === 0 && <StepWelcome key="welcome" onNext={handleNext} />}
+        {step === 1 && <StepRisks key="risks" onNext={handleNext} />}
+        {step === 2 && <StepPoolHealth key="pool" onNext={handleNext} />}
+        {step === 3 && <StepDeposit key="deposit" onComplete={handleComplete} />}
+      </AnimatePresence>
+
+      {step > 0 && (
+        <div className="text-center mt-8">
+          <button
+            onClick={() => setStep(step - 1)}
+            className="text-sm text-text-muted hover:text-text-secondary transition-colors"
+          >
+            Back
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/pages/Sponsors.tsx b/src/pages/Sponsors.tsx
index 3219e69..f3beb56 100644
--- a/src/pages/Sponsors.tsx
+++ b/src/pages/Sponsors.tsx
@@ -1,11 +1,230 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { sponsorsService } from '../services/sponsors.service'
+import { useTransaction } from '../hooks/useTransaction'
+import { useWallet } from '../hooks/useWallet'
+import { Button } from '../components/ui/Button'
+import { Card } from '../components/ui/Card'
+import { Badge } from '../components/ui/Badge'
+import { Spinner } from '../components/ui/Spinner'
+import { 
+  TrendingUp, 
+  Wallet, 
+  ArrowUpRight, 
+  CheckCircle2, 
+  AlertCircle,
+  ExternalLink
+} from 'lucide-react'
+
 export function Sponsors() {
+  const { isConnected } = useWallet()
+  const [shares, setShares] = useState('')
+  const [successData, setSuccessData] = useState<{
+    hash: string
+    amount: number
+    profit: number
+  } | null>(null)
+
+  const { data: poolInfo, isLoading: poolLoading } = useQuery({
+    queryKey: ['poolInfo'],
+    queryFn: sponsorsService.getPoolInfo,
+    enabled: isConnected
+  })
+
+  const { execute, isLoading: txLoading, error: txError } = useTransaction()
+
+  const handleWithdraw = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!shares || isNaN(Number(shares))) return
+
+    try {
+      const result = await execute(
+        () => sponsorsService.withdraw(Number(shares)),
+        (signedXdr) => sponsorsService.submitTransaction(signedXdr)
+      )
+      setSuccessData(result)
+      setShares('')
+    } catch {
+      // Error handled by useTransaction and shown in UI
+    }
+  }
+
+  if (!isConnected) {
+    return (
+      <div className="max-w-7xl mx-auto px-6 py-24 text-center">
+        <h2 className="font-display font-bold text-3xl text-text-primary mb-4">
+          Connect your wallet to sponsor
+        </h2>
+        <p className="text-text-secondary mb-8">
+          You need a Stellar wallet to manage your liquidity pool shares.
+        </p>
+      </div>
+    )
+  }
+
+  const previewUsdc = Number(shares) * (poolInfo?.sharePrice || 0)
+
   return (
     <div className="max-w-7xl mx-auto px-6 py-12">
-      <h1 className="font-display font-bold text-3xl
-        text-text-primary mb-2">Sponsor Dashboard</h1>
-      <p className="text-text-muted">
-        Pool stats and deposit options coming soon.
-      </p>
+      <div className="mb-10">
+        <h1 className="font-display font-bold text-3xl text-text-primary mb-2">
+          Sponsor Dashboard
+        </h1>
+        <p className="text-text-muted">
+          Manage your deposits and earn yield from learner loans.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <Card>
+              <div className="flex justify-between items-start mb-4">
+                <div className="p-3 bg-brand/10 rounded-xl">
+                  <TrendingUp className="text-brand" size={24} />
+                </div>
+                <Badge label={`+${poolInfo?.apy || 0}% APY`} variant="green" />
+              </div>
+              <p className="text-text-secondary text-sm mb-1">Total Deposits</p>
+              <h3 className="text-2xl font-bold text-text-primary">
+                {poolLoading ? <Spinner size={20} /> : `${poolInfo?.totalDeposits.toLocaleString()} USDC`}
+              </h3>
+            </Card>
+
+            <Card>
+              <div className="flex justify-between items-start mb-4">
+                <div className="p-3 bg-blue-500/10 rounded-xl">
+                  <Wallet style={{ color: '#3B82F6' }} size={24} />
+                </div>
+              </div>
+              <p className="text-text-secondary text-sm mb-1">Available Liquidity</p>
+              <h3 className="text-2xl font-bold text-text-primary">
+                {poolLoading ? <Spinner size={20} /> : `${poolInfo?.availableLiquidity.toLocaleString()} USDC`}
+              </h3>
+            </Card>
+          </div>
+
+          <Card>
+            <h3 className="font-display font-bold text-xl text-text-primary mb-6">
+              Liquidity Pool Details
+            </h3>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+              <div>
+                <p className="text-text-muted text-xs uppercase tracking-wider mb-1">Total Shares</p>
+                <p className="font-mono text-text-primary">
+                  {poolLoading ? '...' : poolInfo?.totalShares.toLocaleString()}
+                </p>
+              </div>
+              <div>
+                <p className="text-text-muted text-xs uppercase tracking-wider mb-1">Share Price</p>
+                <p className="font-mono text-text-primary">
+                  {poolLoading ? '...' : `${poolInfo?.sharePrice.toFixed(4)} USDC`}
+                </p>
+              </div>
+              <div>
+                <p className="text-text-muted text-xs uppercase tracking-wider mb-1">Locked Capital</p>
+                <p className="font-mono text-text-primary">
+                  {poolLoading ? '...' : `${poolInfo?.lockedLiquidity.toLocaleString()} USDC`}
+                </p>
+              </div>
+              <div>
+                <p className="text-text-muted text-xs uppercase tracking-wider mb-1">Status</p>
+                <p className="text-brand font-medium">Active</p>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          <Card className="border-brand/20">
+            <h3 className="font-display font-bold text-xl text-text-primary mb-4 flex items-center gap-2">
+              Withdraw Funds
+            </h3>
+            <form onSubmit={handleWithdraw} className="space-y-4">
+              <div>
+                <label className="block text-sm text-text-secondary mb-2">
+                  Amount of Shares
+                </label>
+                <div className="relative">
+                  <input
+                    type="number"
+                    value={shares}
+                    onChange={(e) => setShares(e.target.value)}
+                    placeholder="0.00"
+                    className="w-full bg-bg border border-border rounded-xl px-4 py-3
+                      text-text-primary focus:outline-none focus:border-brand transition-colors"
+                  />
+                  <div className="absolute right-4 top-1/2 -translate-y-1/2 text-text-muted text-sm">
+                    SHARES
+                  </div>
+                </div>
+              </div>
+
+              {Number(shares) > 0 && (
+                <div className="p-4 bg-brand/5 rounded-xl border border-brand/10">
+                  <div className="flex justify-between text-sm mb-1">
+                    <span className="text-text-secondary">Preview Value:</span>
+                    <span className="text-brand font-bold">{previewUsdc.toFixed(2)} USDC</span>
+                  </div>
+                  <p className="text-[10px] text-text-muted leading-tight">
+                    Estimated amount based on current share price. Final amount may vary slightly.
+                  </p>
+                </div>
+              )}
+
+              {txError && (
+                <div className="p-4 bg-red-500/10 rounded-xl border border-red-500/20 flex gap-3">
+                  <AlertCircle className="text-red-500 shrink-0" size={20} />
+                  <p className="text-sm text-red-500">{txError}</p>
+                </div>
+              )}
+
+              <Button
+                type="submit"
+                className="w-full"
+                loading={txLoading}
+                disabled={!shares || Number(shares) <= 0}
+              >
+                Withdraw USDC
+                <ArrowUpRight size={18} />
+              </Button>
+            </form>
+          </Card>
+
+          {successData && (
+            <Card className="bg-brand/5 border-brand/30">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="p-2 bg-brand rounded-full text-bg">
+                  <CheckCircle2 size={20} />
+                </div>
+                <h4 className="font-bold text-text-primary">Withdrawal Successful</h4>
+              </div>
+              
+              <div className="space-y-3 mb-6">
+                <div className="flex justify-between text-sm">
+                  <span className="text-text-secondary">Amount Received:</span>
+                  <span className="text-text-primary font-bold">{successData.amount} USDC</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-text-secondary">Realized Profit:</span>
+                  <span className="text-brand font-bold">+{successData.profit} USDC</span>
+                </div>
+              </div>
+
+              <a
+                href={`https://stellar.expert/explorer/testnet/tx/${successData.hash}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-center gap-2 w-full py-2 text-sm
+                  text-text-secondary hover:text-brand transition-colors border border-border rounded-xl"
+              >
+                View on Stellar.expert
+                <ExternalLink size={14} />
+              </a>
+            </Card>
+          )}
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/src/pages/VendorDashboard.tsx b/src/pages/VendorDashboard.tsx
index fdc3120..582140a 100644
--- a/src/pages/VendorDashboard.tsx
+++ b/src/pages/VendorDashboard.tsx
@@ -11,6 +11,7 @@ import { Card } from '../components/ui/Card'
 import { Button } from '../components/ui/Button'
 import { Badge } from '../components/ui/Badge'
 import { Spinner } from '../components/ui/Spinner'
+import { sanitizeText } from '../lib/sanitize'
 import type {
   VendorDashboardOverview, VendorLoan, VendorPayment,
   VendorProduct, ApiKey, PaginatedResponse
@@ -142,7 +143,7 @@ function LoansTable({
               {data.map((loan) => (
                 <tr key={loan.id} className="border-b border-border/50 hover:bg-surface/50 transition-colors">
                   <td className="py-3 px-3 text-text-muted font-mono text-xs">{loan.id.slice(0, 8)}...</td>
-                  <td className="py-3 px-3 text-text-primary">{loan.product}</td>
+                  <td className="py-3 px-3 text-text-primary">{sanitizeText(loan.product)}</td>
                   <td className="py-3 px-3 text-text-secondary font-mono text-xs">
                     {loan.borrower.slice(0, 6)}...{loan.borrower.slice(-4)}
                   </td>
@@ -217,11 +218,11 @@ function ProductsSection({ products, isLoading }: { products?: VendorProduct[];
               className="p-4 rounded-xl border border-border bg-elevated/30"
             >
               <div className="flex items-center justify-between mb-2">
-                <h4 className="text-text-primary font-medium text-sm">{product.name}</h4>
+                <h4 className="text-text-primary font-medium text-sm">{sanitizeText(product.name)}</h4>
                 <Badge label={product.active ? 'Active' : 'Inactive'} variant={product.active ? 'green' : 'muted'} />
               </div>
               {product.description && (
-                <p className="text-text-muted text-xs mb-3">{product.description}</p>
+                <p className="text-text-muted text-xs mb-3">{sanitizeText(product.description)}</p>
               )}
               <p className="text-text-primary font-display font-bold text-lg">${product.price.toLocaleString()}</p>
             </div>
@@ -341,7 +342,7 @@ function ApiKeySection({
             >
               <div>
                 <div className="flex items-center gap-2">
-                  <span className="text-text-primary text-sm font-medium">{key.label}</span>
+                  <span className="text-text-primary text-sm font-medium">{sanitizeText(key.label)}</span>
                   <Badge label={key.revoked ? 'Revoked' : 'Active'} variant={key.revoked ? 'red' : 'green'} />
                 </div>
                 <p className="text-text-muted text-xs font-mono mt-0.5">
diff --git a/src/router/index.tsx b/src/router/index.tsx
index e58f550..af430b9 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -7,6 +7,7 @@ import { Vendors } from '../pages/Vendors'
 import { VendorRegister } from '../pages/VendorRegister'
 import { VendorDashboard } from '../pages/VendorDashboard'
 import { Sponsors } from '../pages/Sponsors'
+import { SponsorOnboarding } from '../pages/SponsorOnboarding'
 import { Vouch } from '../pages/Vouch'
 import { LearnerProfile } from '../pages/LearnerProfile'
 import { NotFound } from '../pages/NotFound'
@@ -40,6 +41,10 @@ const router = createBrowserRouter([
     path: '/sponsors',
     element: <Layout><Sponsors /></Layout>,
   },
+  {
+    path: '/sponsors/onboarding',
+    element: <Layout><SponsorOnboarding /></Layout>,
+  },
   {
     path: '/vouch',
     element: <Layout><Vouch /></Layout>,
diff --git a/src/services/api.ts b/src/services/api.ts
index 8993a30..1d0937a 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -8,10 +8,25 @@ export const api = axios.create({
   },
 })
 
+const TOKEN_STORAGE_KEY = 'stepfi-user'
+
+function getStoredTokens(): { accessToken?: string; refreshToken?: string } {
+  try {
+    const raw = localStorage.getItem(TOKEN_STORAGE_KEY)
+    if (!raw) return {}
+    const parsed = JSON.parse(raw)
+    const state = parsed?.state
+    if (!state) return {}
+    return { accessToken: state.accessToken, refreshToken: state.refreshToken }
+  } catch {
+    return {}
+  }
+}
+
 api.interceptors.request.use((config) => {
-  const token = localStorage.getItem('accessToken')
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`
+  const { accessToken } = getStoredTokens()
+  if (accessToken) {
+    config.headers.Authorization = `Bearer ${accessToken}`
   }
   return config
 })
@@ -20,8 +35,7 @@ api.interceptors.response.use(
   (response) => response,
   async (error) => {
     if (error.response?.status === 401) {
-      localStorage.removeItem('accessToken')
-      localStorage.removeItem('refreshToken')
+      localStorage.removeItem(TOKEN_STORAGE_KEY)
       window.location.href = '/'
     }
     return Promise.reject(error)
diff --git a/src/services/pool.service.ts b/src/services/pool.service.ts
new file mode 100644
index 0000000..9582676
--- /dev/null
+++ b/src/services/pool.service.ts
@@ -0,0 +1,9 @@
+import { api } from './api'
+import type { PoolInfo } from '../types'
+
+export const poolService = {
+  getPoolInfo: async (): Promise<PoolInfo> => {
+    const res = await api.get('/pool')
+    return res.data
+  },
+}
diff --git a/src/services/sponsors.service.ts b/src/services/sponsors.service.ts
new file mode 100644
index 0000000..08db6be
--- /dev/null
+++ b/src/services/sponsors.service.ts
@@ -0,0 +1,23 @@
+import { api } from './api'
+import type { PoolInfo } from '../types'
+
+export const sponsorsService = {
+  getPoolInfo: async (): Promise<PoolInfo> => {
+    const res = await api.get('/liquidity/pool-info')
+    return res.data
+  },
+
+  withdraw: async (shares: number): Promise<{ xdr: string }> => {
+    const res = await api.post('/liquidity/withdraw', { shares })
+    return res.data
+  },
+
+  submitTransaction: async (signedXdr: string): Promise<{ 
+    hash: string
+    amount: number
+    profit: number 
+  }> => {
+    const res = await api.post('/liquidity/submit', { xdr: signedXdr })
+    return res.data
+  },
+}
diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts
index 8a43342..53fca42 100644
--- a/src/stores/app.store.ts
+++ b/src/stores/app.store.ts
@@ -1,11 +1,22 @@
 import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
 
 interface AppStore {
   mobileMenuOpen: boolean
+  onboardingComplete: boolean
   setMobileMenuOpen: (open: boolean) => void
+  setOnboardingComplete: (complete: boolean) => void
 }
 
-export const useAppStore = create<AppStore>((set) => ({
-  mobileMenuOpen: false,
-  setMobileMenuOpen: (mobileMenuOpen) => set({ mobileMenuOpen }),
-}))
+export const useAppStore = create<AppStore>()(
+  persist(
+    (set) => ({
+      mobileMenuOpen: false,
+      onboardingComplete: false,
+      setMobileMenuOpen: (mobileMenuOpen) => set({ mobileMenuOpen }),
+      setOnboardingComplete: (onboardingComplete) =>
+        set({ onboardingComplete }),
+    }),
+    { name: 'stepfi-app' }
+  )
+)
diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts
index 85fabc9..14f1f9c 100644
--- a/src/stores/user.store.ts
+++ b/src/stores/user.store.ts
@@ -16,13 +16,9 @@ export const useUserStore = create<UserStore>()(
       refreshToken: '',
       isAuthenticated: false,
       setTokens: (accessToken, refreshToken) => {
-        localStorage.setItem('accessToken', accessToken)
-        localStorage.setItem('refreshToken', refreshToken)
         set({ accessToken, refreshToken, isAuthenticated: true })
       },
       clearTokens: () => {
-        localStorage.removeItem('accessToken')
-        localStorage.removeItem('refreshToken')
         set({
           accessToken: '',
           refreshToken: '',
diff --git a/vercel.json b/vercel.json
index 170b3f6..af092bd 100644
--- a/vercel.json
+++ b/vercel.json
@@ -2,5 +2,45 @@
   "framework": "vite",
   "buildCommand": "npm run build",
   "outputDirectory": "dist",
-  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }],
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "Content-Security-Policy",
+          "value": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://stepfi-api.onrender.com; font-src 'self'; frame-ancestors 'none'; form-action 'self'; base-uri 'self'"
+        },
+        {
+          "key": "X-Frame-Options",
+          "value": "DENY"
+        },
+        {
+          "key": "X-Content-Type-Options",
+          "value": "nosniff"
+        },
+        {
+          "key": "Referrer-Policy",
+          "value": "strict-origin-when-cross-origin"
+        },
+        {
+          "key": "Permissions-Policy",
+          "value": "camera=(), microphone=(), geolocation=()"
+        },
+        {
+          "key": "Strict-Transport-Security",
+          "value": "max-age=31536000; includeSubDomains; preload"
+        }
+      ]
+    },
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
+  ]
 }