diff --git a/.gitignore b/.gitignore
index 36fca7e4f..eb880f89a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,8 @@ eggs/
 .eggs/
 lib/
 lib64/
+!frontend/src/lib/
+!frontend/src/lib/**
 parts/
 sdist/
 var/
diff --git a/frontend/src/components/bounty/BountyCard.tsx b/frontend/src/components/bounty/BountyCard.tsx
index aa974a474..7605b738a 100644
--- a/frontend/src/components/bounty/BountyCard.tsx
+++ b/frontend/src/components/bounty/BountyCard.tsx
@@ -61,37 +61,35 @@ export function BountyCard({ bounty }: BountyCardProps) {
       initial="rest"
       whileHover="hover"
       onClick={() => navigate(`/bounties/${bounty.id}`)}
-      className="relative rounded-xl border border-border bg-forge-900 p-5 cursor-pointer transition-colors duration-200 overflow-hidden group"
+      className="relative h-full rounded-xl border border-border bg-forge-900 p-4 sm:p-5 cursor-pointer transition-colors duration-200 overflow-hidden group"
     >
       {/* Row 1: Repo + Tier */}
-      <div className="flex items-center justify-between text-sm">
+      <div className="flex items-start justify-between gap-3 text-sm">
         <div className="flex items-center gap-2 min-w-0">
           {bounty.org_avatar_url && (
             <img src={bounty.org_avatar_url} className="w-5 h-5 rounded-full flex-shrink-0" alt="" />
           )}
-          <span className="text-text-muted font-mono text-xs truncate">
-            {orgName}/{repoName}
-            {issueNumber && <span className="ml-1">#{issueNumber}</span>}
-          </span>
+          <span className="text-text-muted font-mono text-xs truncate">{orgName}/{repoName}</span>
+          {issueNumber && <span className="text-text-muted font-mono text-xs flex-shrink-0">#{issueNumber}</span>}
         </div>
         <TierBadge tier={bounty.tier ?? 'T1'} />
       </div>
 
       {/* Row 2: Title */}
-      <h3 className="mt-3 font-sans text-base font-semibold text-text-primary leading-snug line-clamp-2">
+      <h3 className="mt-3 font-sans text-base font-semibold text-text-primary leading-snug line-clamp-2 break-words">
         {bounty.title}
       </h3>
 
       {/* Row 3: Language dots */}
       {skills.length > 0 && (
-        <div className="flex items-center gap-3 mt-3">
+        <div className="flex items-center gap-x-3 gap-y-2 mt-3 flex-wrap">
           {skills.map((lang) => (
             <span key={lang} className="inline-flex items-center gap-1.5 text-xs text-text-muted">
               <span
                 className="w-2.5 h-2.5 rounded-full"
                 style={{ backgroundColor: LANG_COLORS[lang] ?? '#888' }}
               />
-              {lang}
+              <span className="break-all">{lang}</span>
             </span>
           ))}
         </div>
@@ -101,11 +99,11 @@ export function BountyCard({ bounty }: BountyCardProps) {
       <div className="mt-4 border-t border-border/50" />
 
       {/* Row 4: Reward + Meta */}
-      <div className="flex items-center justify-between mt-3">
-        <span className="font-mono text-lg font-semibold text-emerald">
+      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 mt-3 pb-8 sm:pb-0">
+        <span className="font-mono text-lg font-semibold text-emerald break-all">
           {formatCurrency(bounty.reward_amount, bounty.reward_token)}
         </span>
-        <div className="flex items-center gap-3 text-xs text-text-muted">
+        <div className="flex items-center gap-x-3 gap-y-1 text-xs text-text-muted flex-wrap sm:justify-end">
           <span className="inline-flex items-center gap-1">
             <GitPullRequest className="w-3.5 h-3.5" />
             {bounty.submission_count} PRs
@@ -120,7 +118,7 @@ export function BountyCard({ bounty }: BountyCardProps) {
       </div>
 
       {/* Status badge */}
-      <span className={`absolute bottom-4 right-5 text-xs font-medium inline-flex items-center gap-1 ${statusColor}`}>
+      <span className={`absolute bottom-4 left-4 sm:left-auto right-4 sm:right-5 text-xs font-medium inline-flex items-center gap-1 ${statusColor}`}>
         <span className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
         {statusLabel}
       </span>
diff --git a/frontend/src/components/bounty/BountyGrid.tsx b/frontend/src/components/bounty/BountyGrid.tsx
index 7709ab94c..5203ee7cc 100644
--- a/frontend/src/components/bounty/BountyGrid.tsx
+++ b/frontend/src/components/bounty/BountyGrid.tsx
@@ -23,25 +23,25 @@ export function BountyGrid() {
   const allBounties = data?.pages.flatMap((p) => p.items) ?? [];
 
   return (
-    <section id="bounties" className="py-16 md:py-24">
-      <div className="max-w-7xl mx-auto px-4">
+    <section id="bounties" className="py-14 md:py-24">
+      <div className="max-w-7xl mx-auto px-3 sm:px-4">
         {/* Header row */}
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
           <h2 className="font-sans text-2xl font-semibold text-text-primary">Open Bounties</h2>
-          <div className="flex items-center gap-2">
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2 w-full sm:w-auto">
             <Link
               to="/bounties/create"
-              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-emerald text-forge-950 font-semibold text-sm hover:bg-emerald/90 transition-colors duration-150"
+              className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg bg-emerald text-forge-950 font-semibold text-sm hover:bg-emerald/90 transition-colors duration-150 whitespace-nowrap"
             >
               <Plus className="w-4 h-4" />
               Post a Bounty
             </Link>
             {/* Status filter */}
-            <div className="relative">
+            <div className="relative w-full sm:w-auto">
               <select
                 value={statusFilter}
                 onChange={(e) => setStatusFilter(e.target.value)}
-                className="appearance-none bg-forge-800 border border-border rounded-lg px-3 py-1.5 pr-8 text-sm text-text-secondary font-medium focus:border-emerald outline-none transition-colors duration-150 cursor-pointer"
+                className="appearance-none w-full bg-forge-800 border border-border rounded-lg px-3 py-1.5 pr-8 text-sm text-text-secondary font-medium focus:border-emerald outline-none transition-colors duration-150 cursor-pointer"
               >
                 <option value="open">Open</option>
                 <option value="funded">Funded</option>
@@ -59,7 +59,7 @@ export function BountyGrid() {
             <button
               key={skill}
               onClick={() => setActiveSkill(skill)}
-              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-150 ${
+              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-150 whitespace-nowrap ${
                 activeSkill === skill
                   ? 'bg-forge-700 text-text-primary'
                   : 'text-text-muted hover:text-text-secondary bg-forge-800'
@@ -72,7 +72,7 @@ export function BountyGrid() {
 
         {/* Loading state */}
         {isLoading && (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
             {Array.from({ length: 6 }).map((_, i) => (
               <div
                 key={i}
@@ -109,7 +109,7 @@ export function BountyGrid() {
             initial="initial"
             whileInView="animate"
             viewport={{ once: true, margin: '-50px' }}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5"
           >
             {allBounties.map((bounty) => (
               <motion.div key={bounty.id} variants={staggerItem}>
diff --git a/frontend/src/components/home/ActivityFeed.tsx b/frontend/src/components/home/ActivityFeed.tsx
index 8b6b4b904..3f237202c 100644
--- a/frontend/src/components/home/ActivityFeed.tsx
+++ b/frontend/src/components/home/ActivityFeed.tsx
@@ -12,7 +12,6 @@ interface ActivityEvent {
   timestamp: string;
 }
 
-// Mock events for when API doesn't return activity
 const MOCK_EVENTS: ActivityEvent[] = [
   {
     id: '1',
@@ -32,14 +31,14 @@ const MOCK_EVENTS: ActivityEvent[] = [
     id: '3',
     type: 'posted',
     username: 'SolanaLabs',
-    detail: 'Bounty #145 — $3,500 USDC',
+    detail: 'Bounty #145 - $3,500 USDC',
     timestamp: new Date(Date.now() - 45 * 60 * 1000).toISOString(),
   },
   {
     id: '4',
     type: 'review',
     username: 'AI Review',
-    detail: 'Bounty #42 — 8.5/10',
+    detail: 'Bounty #42 - 8.5/10',
     timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
   },
 ];
@@ -57,7 +56,7 @@ function getActionText(type: ActivityEvent['type']) {
 function EventItem({ event }: { event: ActivityEvent }) {
   const isMagenta = event.type === 'review';
   return (
-    <div className="flex items-center gap-3 py-2 px-3 rounded-lg hover:bg-forge-850 transition-colors duration-150">
+    <div className="flex flex-wrap sm:flex-nowrap items-center gap-x-3 gap-y-1 py-2 px-3 rounded-lg hover:bg-forge-850 transition-colors duration-150">
       {event.avatar_url ? (
         <img src={event.avatar_url} className="w-6 h-6 rounded-full flex-shrink-0" alt="" />
       ) : (
@@ -65,12 +64,12 @@ function EventItem({ event }: { event: ActivityEvent }) {
           <span className="font-mono text-xs text-text-muted">{event.username[0]?.toUpperCase()}</span>
         </div>
       )}
-      <p className="text-sm text-text-secondary flex-1 truncate">
+      <p className="text-sm text-text-secondary flex-1 min-w-0 truncate">
         <span className="font-medium text-text-primary">{event.username}</span>
         {' '}{getActionText(event.type)}{' '}
         <span className={`font-mono ${isMagenta ? 'text-magenta' : 'text-emerald'}`}>{event.detail}</span>
       </p>
-      <span className="font-mono text-xs text-text-muted flex-shrink-0">{timeAgo(event.timestamp)}</span>
+      <span className="font-mono text-xs text-text-muted flex-shrink-0 ml-9 sm:ml-0">{timeAgo(event.timestamp)}</span>
     </div>
   );
 }
@@ -85,7 +84,7 @@ export function ActivityFeed({ events }: { events?: ActivityEvent[] }) {
 
   return (
     <section className="w-full border-y border-border bg-forge-900/50 py-4 overflow-hidden">
-      <div className="max-w-7xl mx-auto px-4">
+      <div className="max-w-7xl mx-auto px-3 sm:px-4">
         <div className="flex items-center gap-3 mb-3">
           <span className="w-2 h-2 rounded-full bg-emerald animate-pulse-glow" />
           <span className="font-mono text-xs text-text-muted uppercase tracking-wider">Recent Activity</span>
diff --git a/frontend/src/components/home/FeaturedBounties.tsx b/frontend/src/components/home/FeaturedBounties.tsx
index 58701e6c2..2b7c0fef6 100644
--- a/frontend/src/components/home/FeaturedBounties.tsx
+++ b/frontend/src/components/home/FeaturedBounties.tsx
@@ -10,16 +10,16 @@ export function FeaturedBounties() {
   const { data, isLoading, isError } = useBounties({ limit: 4, status: 'open' });
 
   return (
-    <section className="py-16 md:py-24 px-4 bg-forge-900/30">
+    <section className="py-14 md:py-24 px-3 sm:px-4 bg-forge-900/30">
       <div className="max-w-7xl mx-auto">
         <motion.div
           initial={{ opacity: 0, y: 12 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.4 }}
-          className="flex items-end justify-between mb-10"
+          className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-10"
         >
-          <div>
+          <div className="min-w-0">
             <h2 className="font-display text-2xl md:text-3xl font-bold text-text-primary tracking-wide">
               Open Bounties
             </h2>
diff --git a/frontend/src/components/home/HeroSection.tsx b/frontend/src/components/home/HeroSection.tsx
index e37307166..37a2da797 100644
--- a/frontend/src/components/home/HeroSection.tsx
+++ b/frontend/src/components/home/HeroSection.tsx
@@ -71,7 +71,6 @@ export function HeroSection() {
   const [resultLinesVisible, setResultLinesVisible] = useState(false);
 
   useEffect(() => {
-    // Typewriter takes ~3s (0.5s delay + 2.5s), then show result lines
     const t1 = setTimeout(() => setTypewriterDone(true), 3100);
     const t2 = setTimeout(() => setResultLinesVisible(true), 3400);
     return () => { clearTimeout(t1); clearTimeout(t2); };
@@ -87,34 +86,30 @@ export function HeroSection() {
   };
 
   return (
-    <section className="relative min-h-[90vh] flex flex-col items-center justify-center px-4 pt-24 pb-16 overflow-hidden">
-      {/* Background layers */}
-      <div className="absolute inset-0 bg-grid-forge bg-grid-forge pointer-events-none" style={{ backgroundSize: '40px 40px' }} />
+    <section className="relative min-h-[90vh] flex flex-col items-center justify-center px-3 sm:px-4 pt-24 pb-14 md:pb-16 overflow-hidden">
+      <div className="absolute inset-0 bg-grid-forge pointer-events-none" style={{ backgroundSize: '40px 40px' }} />
       <div className="absolute inset-0 bg-gradient-hero pointer-events-none" />
       <EmberParticles count={5} />
 
-      {/* Terminal card */}
       <motion.div
         variants={fadeIn}
         initial="initial"
         animate="animate"
         className="w-full max-w-xl rounded-xl border border-border bg-forge-900/90 backdrop-blur-sm overflow-hidden shadow-2xl shadow-black/50"
       >
-        {/* Title bar */}
-        <div className="flex items-center gap-2 px-4 py-2.5 bg-forge-800 border-b border-border">
-          <div className="flex gap-1.5">
+        <div className="flex items-center gap-2 px-3 sm:px-4 py-2.5 bg-forge-800 border-b border-border">
+          <div className="flex gap-1.5 flex-shrink-0">
             <span className="w-3 h-3 rounded-full bg-status-error/80" />
             <span className="w-3 h-3 rounded-full bg-status-warning/80" />
             <span className="w-3 h-3 rounded-full bg-status-success/80" />
           </div>
-          <span className="font-mono text-xs text-text-muted ml-2">solfoundry — terminal</span>
+          <span className="font-mono text-xs text-text-muted ml-2 truncate">solfoundry - terminal</span>
         </div>
 
-        {/* Terminal body */}
-        <div className="p-5 font-mono text-sm leading-relaxed">
+        <div className="p-4 sm:p-5 font-mono text-xs sm:text-sm leading-relaxed">
           <div className="overflow-hidden">
             <span className="text-emerald">$ </span>
-            <span className="text-text-secondary overflow-hidden whitespace-nowrap inline-block animate-typewriter">
+            <span className="text-text-secondary overflow-hidden break-all sm:break-normal sm:whitespace-nowrap inline-block max-w-full sm:animate-typewriter">
               forge bounty --reward 100 --lang typescript --tier 2
             </span>
             {typewriterDone && (
@@ -130,9 +125,9 @@ export function HeroSection() {
               className="mt-3 space-y-1.5"
             >
               {[
-                { text: '✓ Bounty created: #142', delay: 0 },
-                { text: '✓ Escrow funded: 100 USDC', delay: 0.3 },
-                { text: '✓ 3 contributors notified', delay: 0.6 },
+                { text: 'Bounty created: #142', delay: 0 },
+                { text: 'Escrow funded: 100 USDC', delay: 0.3 },
+                { text: '3 contributors notified', delay: 0.6 },
               ].map((line, i) => (
                 <motion.div
                   key={i}
@@ -149,37 +144,34 @@ export function HeroSection() {
         </div>
       </motion.div>
 
-      {/* Headline */}
       <motion.h1
         initial={{ opacity: 0, y: 16 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.3, duration: 0.5 }}
-        className="font-display text-4xl md:text-5xl font-bold text-text-primary tracking-wider text-center mt-10"
+        className="font-display text-3xl sm:text-4xl md:text-5xl font-bold text-text-primary tracking-wider text-center mt-8 sm:mt-10 max-w-4xl"
       >
-        THE AI-POWERED BOUNTY{' '}
-        <span className="text-emerald">FORGE</span>
+        THE AI-POWERED BOUNTY <span className="text-emerald">FORGE</span>
       </motion.h1>
 
       <motion.p
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.45, duration: 0.5 }}
-        className="font-sans text-lg text-text-secondary text-center mt-4 max-w-lg"
+        className="font-sans text-base sm:text-lg text-text-secondary text-center mt-4 max-w-lg"
       >
         Fund bounties. Ship code. Earn rewards.
       </motion.p>
 
-      {/* CTAs */}
       <motion.div
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.6, duration: 0.5 }}
-        className="flex flex-wrap items-center justify-center gap-4 mt-8"
+        className="flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center justify-center gap-3 sm:gap-4 mt-8 w-full sm:w-auto"
       >
         <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap">
           <Link
             to="/bounties"
-            className="px-6 py-3 rounded-lg bg-emerald text-text-inverse font-semibold text-sm hover:bg-emerald-light transition-colors duration-200 shadow-lg shadow-emerald/20 inline-block"
+            className="px-6 py-3 rounded-lg bg-emerald text-text-inverse font-semibold text-sm hover:bg-emerald-light transition-colors duration-200 shadow-lg shadow-emerald/20 inline-flex justify-center whitespace-nowrap w-full"
           >
             Browse Bounties
           </Link>
@@ -188,7 +180,7 @@ export function HeroSection() {
         <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap">
           <Link
             to="/bounties/create"
-            className="px-6 py-3 rounded-lg border border-emerald text-emerald font-semibold text-sm hover:bg-emerald-bg transition-colors duration-200 inline-block"
+            className="px-6 py-3 rounded-lg border border-emerald text-emerald font-semibold text-sm hover:bg-emerald-bg transition-colors duration-200 inline-flex justify-center whitespace-nowrap w-full"
           >
             Post a Bounty
           </Link>
@@ -198,7 +190,7 @@ export function HeroSection() {
           <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap">
             <button
               onClick={handleSignIn}
-              className="px-6 py-3 rounded-lg border border-border text-text-secondary font-medium text-sm hover:border-border-hover hover:text-text-primary transition-all duration-200 inline-flex items-center gap-2"
+              className="px-6 py-3 rounded-lg border border-border text-text-secondary font-medium text-sm hover:border-border-hover hover:text-text-primary transition-all duration-200 inline-flex items-center justify-center gap-2 whitespace-nowrap w-full sm:w-auto"
             >
               <GitHubIcon /> GitHub
             </button>
@@ -206,12 +198,11 @@ export function HeroSection() {
         )}
       </motion.div>
 
-      {/* Live stats strip */}
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.8, duration: 0.5 }}
-        className="flex items-center justify-center gap-6 mt-8 font-mono text-sm text-text-muted"
+        className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 sm:gap-x-6 mt-8 font-mono text-xs sm:text-sm text-text-muted"
       >
         <span>
           <span className="text-text-primary font-semibold">
@@ -219,14 +210,14 @@ export function HeroSection() {
           </span>
           {' '}open bounties
         </span>
-        <span className="text-text-muted">·</span>
+        <span className="hidden sm:inline text-text-muted">-</span>
         <span>
           <span className="text-text-primary font-semibold">
             $<CountUp target={stats?.total_paid_usdc ?? 24500} />
           </span>
           {' '}paid
         </span>
-        <span className="text-text-muted">·</span>
+        <span className="hidden sm:inline text-text-muted">-</span>
         <span>
           <span className="text-text-primary font-semibold">
             <CountUp target={stats?.total_contributors ?? 89} />
diff --git a/frontend/src/components/layout/Footer.tsx b/frontend/src/components/layout/Footer.tsx
index f599de4d8..3992beab2 100644
--- a/frontend/src/components/layout/Footer.tsx
+++ b/frontend/src/components/layout/Footer.tsx
@@ -31,10 +31,10 @@ export function Footer() {
       {/* Magenta accent line */}
       <div className="absolute top-0 left-0 right-0 h-px bg-gradient-footer opacity-50" />
 
-      <div className="max-w-7xl mx-auto px-4 py-12">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
+      <div className="max-w-7xl mx-auto px-3 sm:px-4 py-10 sm:py-12">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10">
           {/* Col 1: Brand */}
-          <div>
+          <div className="min-w-0">
             <div className="flex items-center gap-2 mb-3">
               <img src="/logo-icon.png" alt="SolFoundry" className="w-6 h-6" />
               <span className="font-display text-lg font-semibold text-text-primary">SolFoundry</span>
@@ -45,7 +45,7 @@ export function Footer() {
           </div>
 
           {/* Col 2: Platform */}
-          <div>
+          <div className="min-w-0">
             <h4 className="font-sans text-sm font-semibold text-text-primary mb-4">Platform</h4>
             <ul className="space-y-2">
               {[
@@ -64,7 +64,7 @@ export function Footer() {
           </div>
 
           {/* Col 3: Social */}
-          <div>
+          <div className="min-w-0">
             <h4 className="font-sans text-sm font-semibold text-text-primary mb-4">Social</h4>
             <div className="flex flex-col gap-3">
               <a
@@ -89,11 +89,11 @@ export function Footer() {
           </div>
 
           {/* Col 4: Token */}
-          <div>
+          <div className="min-w-0">
             <h4 className="font-sans text-sm font-semibold text-text-primary mb-4">$FNDRY Token</h4>
             <p className="text-sm text-text-muted mb-3">Contract Address:</p>
-            <div className="font-mono text-xs text-text-muted bg-forge-800 rounded px-3 py-2 inline-flex items-center gap-2 w-full">
-              <span className="truncate">{FNDRY_CA.slice(0, 8)}...{FNDRY_CA.slice(-4)}</span>
+            <div className="font-mono text-xs text-text-muted bg-forge-800 rounded px-3 py-2 inline-flex items-center gap-2 w-full max-w-full">
+              <span className="min-w-0 truncate">{FNDRY_CA.slice(0, 8)}...{FNDRY_CA.slice(-4)}</span>
               <button
                 onClick={copyCA}
                 className="flex-shrink-0 text-text-muted hover:text-text-primary transition-colors duration-150"
diff --git a/frontend/src/components/layout/Navbar.tsx b/frontend/src/components/layout/Navbar.tsx
index e4ec31b03..799e56a9d 100644
--- a/frontend/src/components/layout/Navbar.tsx
+++ b/frontend/src/components/layout/Navbar.tsx
@@ -61,22 +61,22 @@ export function Navbar() {
         }`}
       />
 
-      <div className="max-w-7xl mx-auto h-full px-4 flex items-center justify-between">
+      <div className="max-w-7xl mx-auto h-full px-3 sm:px-4 flex items-center justify-between gap-3">
         {/* Left: Logo + Nav */}
-        <div className="flex items-center gap-8">
-          <Link to="/" className="flex items-center gap-2.5 group">
+        <div className="flex items-center gap-4 lg:gap-8 min-w-0">
+          <Link to="/" className="flex items-center gap-2 sm:gap-2.5 group min-w-0">
             <img
               src="/logo-icon.png"
               alt="SolFoundry"
-              className="w-7 h-7 group-hover:drop-shadow-[0_0_8px_rgba(0,230,118,0.4)] transition-all duration-200"
+              className="w-7 h-7 flex-shrink-0 group-hover:drop-shadow-[0_0_8px_rgba(0,230,118,0.4)] transition-all duration-200"
             />
-            <span className="font-display text-lg font-semibold text-text-primary tracking-wide">
+            <span className="font-display text-base sm:text-lg font-semibold text-text-primary tracking-wide truncate">
               SolFoundry
             </span>
           </Link>
 
           {/* Desktop nav links */}
-          <div className="hidden md:flex items-center gap-8">
+          <div className="hidden lg:flex items-center gap-8">
             {NAV_LINKS.map((link) => (
               <Link
                 key={link.to}
@@ -100,7 +100,7 @@ export function Navbar() {
         </div>
 
         {/* Right: Live count + Auth */}
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
           {/* Live bounty count */}
           {stats && (
             <div className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-bg border border-emerald-border">
@@ -157,7 +157,7 @@ export function Navbar() {
           ) : (
             <button
               onClick={handleGitHubSignIn}
-              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-forge-800 border border-border hover:border-border-hover text-text-primary text-sm font-medium transition-all duration-200 hover:bg-forge-700"
+              className="inline-flex items-center gap-2 px-3 sm:px-4 py-2 rounded-lg bg-forge-800 border border-border hover:border-border-hover text-text-primary text-sm font-medium transition-all duration-200 hover:bg-forge-700 whitespace-nowrap"
             >
               <GitHubIcon />
               <span className="hidden sm:block">Sign in with GitHub</span>
@@ -168,7 +168,7 @@ export function Navbar() {
           {/* Mobile hamburger */}
           <button
             onClick={() => setMenuOpen(!menuOpen)}
-            className="md:hidden p-2 rounded-lg hover:bg-forge-800 transition-colors text-text-secondary"
+            className="lg:hidden p-2 rounded-lg hover:bg-forge-800 transition-colors text-text-secondary"
           >
             {menuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
           </button>
@@ -182,7 +182,7 @@ export function Navbar() {
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: 'auto' }}
             exit={{ opacity: 0, height: 0 }}
-            className="md:hidden overflow-hidden bg-forge-900 border-b border-border"
+            className="lg:hidden overflow-hidden bg-forge-900 border-b border-border"
           >
             <div className="px-4 py-4 flex flex-col gap-1">
               {NAV_LINKS.map((link) => (
diff --git a/frontend/src/lib/animations.ts b/frontend/src/lib/animations.ts
new file mode 100644
index 000000000..3c394a53e
--- /dev/null
+++ b/frontend/src/lib/animations.ts
@@ -0,0 +1,38 @@
+import type { Variants } from 'framer-motion';
+
+export const fadeIn: Variants = {
+  initial: { opacity: 0, y: 12 },
+  animate: { opacity: 1, y: 0, transition: { duration: 0.35, ease: 'easeOut' } },
+};
+
+export const pageTransition: Variants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1, transition: { duration: 0.25, ease: 'easeOut' } },
+  exit: { opacity: 0, transition: { duration: 0.18, ease: 'easeIn' } },
+};
+
+export const staggerContainer: Variants = {
+  initial: {},
+  animate: { transition: { staggerChildren: 0.06 } },
+};
+
+export const staggerItem: Variants = {
+  initial: { opacity: 0, y: 16 },
+  animate: { opacity: 1, y: 0, transition: { duration: 0.3, ease: 'easeOut' } },
+};
+
+export const cardHover: Variants = {
+  rest: { y: 0 },
+  hover: { y: -4, transition: { duration: 0.18, ease: 'easeOut' } },
+};
+
+export const buttonHover: Variants = {
+  rest: { scale: 1 },
+  hover: { scale: 1.03, transition: { duration: 0.15, ease: 'easeOut' } },
+  tap: { scale: 0.98, transition: { duration: 0.08, ease: 'easeOut' } },
+};
+
+export const slideInRight: Variants = {
+  initial: { opacity: 0, x: 24 },
+  animate: { opacity: 1, x: 0, transition: { duration: 0.28, ease: 'easeOut' } },
+};
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 000000000..f45487777
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,64 @@
+import type { RewardToken } from '../types/bounty';
+
+export const LANG_COLORS: Record<string, string> = {
+  TypeScript: '#3178c6',
+  JavaScript: '#f7df1e',
+  Rust: '#dea584',
+  Solidity: '#627eea',
+  Python: '#3776ab',
+  Go: '#00add8',
+  React: '#61dafb',
+  CSS: '#38bdf8',
+};
+
+export function formatCurrency(amount: number, token: RewardToken | string = 'USDC') {
+  const normalized = Number.isFinite(amount) ? amount : 0;
+  if (token === 'USDC') {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: normalized % 1 === 0 ? 0 : 2,
+    }).format(normalized);
+  }
+  return `${new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(normalized)} ${token}`;
+}
+
+export function timeAgo(value: string) {
+  const timestamp = new Date(value).getTime();
+  if (Number.isNaN(timestamp)) return 'recently';
+
+  const diffSeconds = Math.max(0, Math.floor((Date.now() - timestamp) / 1000));
+  if (diffSeconds < 60) return 'just now';
+
+  const units: Array<[Intl.RelativeTimeFormatUnit, number]> = [
+    ['year', 31536000],
+    ['month', 2592000],
+    ['week', 604800],
+    ['day', 86400],
+    ['hour', 3600],
+    ['minute', 60],
+  ];
+  const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+  for (const [unit, seconds] of units) {
+    const valueForUnit = Math.floor(diffSeconds / seconds);
+    if (valueForUnit >= 1) return formatter.format(-valueForUnit, unit);
+  }
+  return 'just now';
+}
+
+export function timeLeft(value: string) {
+  const timestamp = new Date(value).getTime();
+  if (Number.isNaN(timestamp)) return 'No deadline';
+
+  const diffSeconds = Math.floor((timestamp - Date.now()) / 1000);
+  if (diffSeconds <= 0) return 'Ended';
+
+  const days = Math.floor(diffSeconds / 86400);
+  if (days >= 1) return `${days}d left`;
+
+  const hours = Math.floor(diffSeconds / 3600);
+  if (hours >= 1) return `${hours}h left`;
+
+  const minutes = Math.max(1, Math.floor(diffSeconds / 60));
+  return `${minutes}m left`;
+}