diff --git a/.gitignore b/.gitignore
index a276f12..416620f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,8 @@
 node_modules/
 .pnp
 .pnp.js
+package-lock.json
+yarn.lock
 
 # Build outputs
 dist/
@@ -14,13 +16,18 @@ build/
 .env
 .env.local
 .env.*.local
+.env.development
+.env.production
+.env.staging
 
-# IDE
+# IDE & Cache
 .vscode/
 .idea/
 *.swp
 *.swo
 *~
+.eslintcache
+*.tsbuildinfo
 
 # OS
 .DS_Store
@@ -48,3 +55,7 @@ yarn-debug.log*
 pnpm-debug.log*
 .cache/
 tmp/
+.vercel/
+.netlify/
+.wrangler/
+vite.config.*.timestamp-*
diff --git a/README.md b/README.md
index 136600f..08c540d 100644
--- a/README.md
+++ b/README.md
@@ -111,6 +111,19 @@ devcard/
 | Web Backup | SvelteKit |
 | Auth | OAuth 2.0 (GitHub, Google) |
 
+### Web Application (`apps/web`)
+
+The web app is a client-side SvelteKit application built with Svelte 5 and Vite. It runs independently of any backend or database using `localStorage` for all persistent storage.
+
+- **Developer Card Form**: Create or update your profile card containing fields for Username, Full Name, Bio, and multiple platform links (GitHub, LinkedIn, Twitter/X, Instagram, YouTube, Dev.to, LeetCode, Portfolio).
+- **Interactive Avatar Studio**:
+  - **Dynamic Initials SVG**: Instantly generates a colorful gradient SVG avatar using the initials from the entered Full Name.
+  - **DiceBear Suggestions**: Real-time suggested avatars generated using DiceBear APIs (*Avataaars*, *Robots*, *Pixel Art*, *Chibi*, *Identicon*) dynamically seeded by the username and display name.
+  - **GitHub Sync**: One-click sync to fetch the user's GitHub avatar once they add their GitHub link.
+  - **Presets**: High-quality developer photography presets from Unsplash.
+- **Card Sharing & QR Codes**: Generates a shareable card at `/u/[username]`. The page renders the profile details, connection tiles, and a QR code of its own URL. Includes options to download the QR code as a PNG, copy the profile link, and edit the card.
+- **Preloaded Demo**: Automatically pre-seeds a demo developer profile at `/u/devcard-demo` for instant testing.
+
 ### Hybrid Follow Engine
 
 DevCard uses a three-layer follow engine:
diff --git a/apps/web/package.json b/apps/web/package.json
index 3601215..13229d6 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,12 +12,14 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"dependencies": {
-		"@devcard/shared": "workspace:*"
+		"@devcard/shared": "workspace:*",
+		"qrcode": "^1.5.4"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/kit": "^2.50.2",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@types/qrcode": "^1.5.6",
 		"svelte": "^5.51.0",
 		"svelte-check": "^4.4.2",
 		"typescript": "^5.9.3",
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 11f8085..6a0c911 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -1,9 +1,118 @@
-<script>
+<script lang="ts">
   import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
 
-  let theme = 'light';
+  let theme = $state<string>('light');
+
+  // Form fields
+  let username = $state<string>('');
+  let displayName = $state<string>('');
+  let bio = $state<string>('');
+  let avatarUrl = $state<string>('');
+  
+  // Platform link builder
+  let selectedPlatform = $state<string>('github');
+  let linkInput = $state<string>('');
+  let links = $state<Array<{ id: string; platform: string; username: string; url: string }>>([]);
+  
+  let isEditing = $state<boolean>(false);
+  let formError = $state<string>('');
+  let formSuccess = $state<string>('');
+
+  const platformOptions = [
+    { id: 'github', name: 'GitHub', placeholder: 'e.g. octocat or https://github.com/octocat' },
+    { id: 'twitter', name: 'Twitter / X', placeholder: 'e.g. elonmusk or https://x.com/elonmusk' },
+    { id: 'linkedin', name: 'LinkedIn', placeholder: 'e.g. johndoe or https://linkedin.com/in/johndoe' },
+    { id: 'instagram', name: 'Instagram', placeholder: 'e.g. zuck or https://instagram.com/zuck' },
+    { id: 'youtube', name: 'YouTube', placeholder: 'e.g. @mrbeast or https://youtube.com/@mrbeast' },
+    { id: 'devto', name: 'Dev.to', placeholder: 'e.g. ben or https://dev.to/ben' },
+    { id: 'leetcode', name: 'LeetCode', placeholder: 'e.g. coder or https://leetcode.com/u/coder' },
+    { id: 'portfolio', name: 'Portfolio', placeholder: 'e.g. https://mywebsite.com' }
+  ];
+
+  const platformColors: Record<string, string> = {
+    github: '#181717',
+    linkedin: '#0A66C2',
+    twitter: '#000000',
+    instagram: '#E1306C',
+    youtube: '#FF0000',
+    devto: '#0A0A0A',
+    leetcode: '#FFA116',
+    portfolio: '#6366F1'
+  };
+
+  const platformUrls: Record<string, string> = {
+    github: 'https://github.com/{username}',
+    twitter: 'https://x.com/{username}',
+    linkedin: 'https://www.linkedin.com/in/{username}',
+    instagram: 'https://instagram.com/{username}',
+    youtube: 'https://youtube.com/@{username}',
+    devto: 'https://dev.to/{username}',
+    leetcode: 'https://leetcode.com/u/{username}',
+    portfolio: '{username}'
+  };
+
+  // Avatar presets and builder state
+  const presetAvatars: Array<{ url: string; label: string }> = [
+    { url: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=150&h=150&fit=crop&q=80', label: 'Abstract Tech' },
+    { url: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=150&h=150&fit=crop&q=80', label: 'Code Terminal' },
+    { url: 'https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=150&h=150&fit=crop&q=80', label: 'Developer Desk' },
+    { url: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=150&h=150&fit=crop&q=80', label: 'Retro Cyber' },
+    { url: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150&h=150&fit=crop&q=80', label: 'Creative Developer' },
+    { url: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&q=80', label: 'Tech Expert' }
+  ];
+
+  function getInitialsAvatar(name: string): string {
+    const cleanName = name.trim();
+    if (!cleanName) return '';
+    const parts = cleanName.split(/\s+/);
+    const initials = (parts[0]?.[0] || '') + (parts[1]?.[0] || '');
+    const upperInitials = initials.toUpperCase() || '⚡';
+    
+    // Curated gradients
+    const gradients = [
+      ['#6366f1', '#a855f7'],
+      ['#3b82f6', '#1d4ed8'],
+      ['#ec4899', '#f43f5e'],
+      ['#10b981', '#059669'],
+      ['#f59e0b', '#d97706'],
+      ['#8b5cf6', '#6d28d9']
+    ];
+    // Simple hash based on name to keep gradient consistent
+    let hash = 0;
+    for (let i = 0; i < cleanName.length; i++) {
+      hash = cleanName.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const index = Math.abs(hash) % gradients.length;
+    const [color1, color2] = gradients[index];
+    
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+      <defs>
+        <linearGradient id="grad-${index}" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style="stop-color:${color1};stop-opacity:1" />
+          <stop offset="100%" style="stop-color:${color2};stop-opacity:1" />
+        </linearGradient>
+      </defs>
+      <rect width="100%" height="100%" fill="url(#grad-${index})" rx="32" />
+      <text x="50%" y="54%" font-family="'Outfit', 'Inter', sans-serif" font-size="38" font-weight="bold" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">${upperInitials}</text>
+    </svg>`;
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+  }
+
+  function syncGitHubAvatar() {
+    const githubLink = links.find(l => l.platform === 'github');
+    if (githubLink && githubLink.username) {
+      avatarUrl = `https://github.com/${githubLink.username}.png`;
+      formSuccess = 'Successfully synced avatar from GitHub!';
+      setTimeout(() => { formSuccess = ''; }, 3000);
+    } else {
+      formError = 'Please add your GitHub profile link first to sync your avatar.';
+      setTimeout(() => { formError = ''; }, 4000);
+    }
+  }
 
   onMount(() => {
+    // Theme toggle initialization
     const saved = localStorage.getItem('devcard-theme');
     if (saved) {
       theme = saved;
@@ -11,6 +120,31 @@
       theme = 'dark';
     }
     document.documentElement.classList.toggle('dark', theme === 'dark');
+
+    // Pre-fill form if editing
+    const params = new URLSearchParams(window.location.search);
+    const editUsername = params.get('edit');
+    if (editUsername) {
+      const savedCard = localStorage.getItem(`devcard_${editUsername}`);
+      if (savedCard) {
+        try {
+          const profile = JSON.parse(savedCard);
+          username = profile.username || '';
+          displayName = profile.displayName || '';
+          bio = profile.bio || '';
+          avatarUrl = profile.avatarUrl || '';
+          links = profile.links || [];
+          isEditing = true;
+          
+          // Smooth scroll to form
+          setTimeout(() => {
+            scrollToForm();
+          }, 100);
+        } catch (e) {
+          console.error('Failed to parse editing card', e);
+        }
+      }
+    }
   });
 
   function toggleTheme() {
@@ -18,6 +152,176 @@
     document.documentElement.classList.toggle('dark', theme === 'dark');
     localStorage.setItem('devcard-theme', theme);
   }
+
+  function scrollToForm() {
+    const formElement = document.getElementById('create-card');
+    if (formElement) {
+      formElement.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
+  function handleUsernameInput(event: any) {
+    const input = event.target.value;
+    username = input
+      .toLowerCase()
+      .replace(/[^a-z0-9-]/g, '-') // Replace non-alphanumeric with hyphens
+      .replace(/-+/g, '-')         // Collapse consecutive hyphens
+      .replace(/^-|-$/g, '');      // Trim hyphens from ends
+  }
+
+  function extractUsername(platform: string, url: string): string {
+    if (!url) return '';
+    try {
+      let cleanUrl = url.trim();
+      if (!/^https?:\/\//i.test(cleanUrl)) {
+        return cleanUrl;
+      }
+      const parsed = new URL(cleanUrl);
+      const pathname = parsed.pathname;
+      const segments = pathname.split('/').filter(Boolean);
+      
+      if (platform === 'youtube') {
+        const last = segments[segments.length - 1];
+        return last ? last.replace(/^@/, '') : '';
+      }
+      
+      const last = segments[segments.length - 1];
+      return last || parsed.hostname;
+    } catch {
+      return url;
+    }
+  }
+
+  function buildLink(platform: string, input: string): { username: string; url: string } {
+    const trimmed = input.trim();
+    const isUrl = /^https?:\/\//i.test(trimmed);
+    
+    let userVal = '';
+    let fullUrl = '';
+    
+    if (isUrl) {
+      fullUrl = trimmed;
+      userVal = extractUsername(platform, trimmed);
+    } else {
+      userVal = trimmed;
+      const pattern = platformUrls[platform] || '{username}';
+      fullUrl = pattern.replace(/{username}/g, trimmed);
+      if (platform === 'portfolio' && !/^https?:\/\//i.test(fullUrl)) {
+        fullUrl = 'https://' + fullUrl;
+      }
+    }
+    
+    return { username: userVal, url: fullUrl };
+  }
+
+  function addLink() {
+    if (!linkInput.trim()) {
+      formError = 'Please enter a profile username or URL.';
+      return;
+    }
+
+    if (links.some(l => l.platform === selectedPlatform)) {
+      formError = `You have already added a link for ${platformOptions.find(p => p.id === selectedPlatform)?.name || selectedPlatform}.`;
+      return;
+    }
+
+    const { username: extractedUser, url: builtUrl } = buildLink(selectedPlatform, linkInput);
+    
+    links = [...links, {
+      id: Math.random().toString(36).substring(2, 9),
+      platform: selectedPlatform,
+      username: extractedUser || username || 'user',
+      url: builtUrl
+    }];
+    
+    linkInput = '';
+    formError = '';
+  }
+
+  function deleteLink(id: string) {
+    links = links.filter(l => l.id !== id);
+  }
+
+  function generateCard() {
+    formError = '';
+    formSuccess = '';
+
+    if (!username.trim()) {
+      formError = 'Username is required.';
+      return;
+    }
+    if (username.length < 3) {
+      formError = 'Username must be at least 3 characters.';
+      return;
+    }
+    if (!displayName.trim()) {
+      formError = 'Full Name is required.';
+      return;
+    }
+    if (!bio.trim()) {
+      formError = 'Short Bio is required.';
+      return;
+    }
+    if (links.length === 0) {
+      formError = 'Please add at least one social or profile link.';
+      return;
+    }
+
+    const profileData = {
+      username,
+      displayName,
+      bio,
+      avatarUrl: avatarUrl.trim() || null,
+      accentColor: '#6366f1',
+      links
+    };
+
+    try {
+      localStorage.setItem(`devcard_${username}`, JSON.stringify(profileData));
+      formSuccess = 'Your DevCard has been generated successfully! Redirecting...';
+      
+      setTimeout(() => {
+        goto(`/u/${username}`);
+      }, 1000);
+    } catch (e) {
+      formError = 'An error occurred while saving your card. Please try again.';
+      console.error(e);
+    }
+  }
+
+  function seedDemoAndNavigate(e: Event) {
+    e.preventDefault();
+    const demoData = {
+      username: 'devcard-demo',
+      displayName: 'Alex Developer',
+      bio: 'Full Stack Engineer | Open Source Contributor | Building the future of developer networking 🚀',
+      avatarUrl: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150&h=150&fit=crop&q=80',
+      accentColor: '#6366f1',
+      links: [
+        { id: '1', platform: 'github', username: 'alexdev', url: 'https://github.com/alexdev', displayOrder: 0 },
+        { id: '2', platform: 'linkedin', username: 'alex-developer', url: 'https://linkedin.com/in/alex-developer', displayOrder: 1 },
+        { id: '3', platform: 'twitter', username: 'alex_codes', url: 'https://x.com/alex_codes', displayOrder: 2 },
+        { id: '4', platform: 'leetcode', username: 'alex_leetcode', url: 'https://leetcode.com/u/alex_leetcode', displayOrder: 3 },
+        { id: '5', platform: 'portfolio', username: 'alexdev.me', url: 'https://alexdev.me', displayOrder: 4 }
+      ]
+    };
+    
+    try {
+      localStorage.setItem('devcard_devcard-demo', JSON.stringify(demoData));
+      goto('/u/devcard-demo');
+    } catch (e) {
+      console.error('Failed to seed demo', e);
+    }
+  }
+
+  // Reactive derived URLs for dynamic avatar suggestions
+  let initialsAvatar = $derived(getInitialsAvatar(displayName));
+  let avataaarsUrl = $derived(`https://api.dicebear.com/7.x/avataaars/svg?seed=${username || displayName || 'dev'}`);
+  let botttsUrl = $derived(`https://api.dicebear.com/7.x/bottts/svg?seed=${username || displayName || 'dev'}`);
+  let pixelUrl = $derived(`https://api.dicebear.com/7.x/pixel-art/svg?seed=${username || displayName || 'dev'}`);
+  let loreleiUrl = $derived(`https://api.dicebear.com/7.x/lorelei/svg?seed=${username || displayName || 'dev'}`);
+  let identiconUrl = $derived(`https://api.dicebear.com/7.x/identicon/svg?seed=${username || displayName || 'dev'}`);
+  let githubLink = $derived(links.find(l => l.platform === 'github'));
 </script>
 
 <svelte:head>
@@ -37,7 +341,7 @@
       <button
         id="theme-toggle"
         class="theme-toggle"
-        on:click={toggleTheme}
+        onclick={toggleTheme}
         aria-label="Toggle theme"
       >
         {theme === 'light' ? '🌙' : '☀️'}
@@ -52,18 +356,317 @@
       The open-source standard for developer networking. Put all your profiles—GitHub, LinkedIn, LeetCode, and more—into a single, high-impact digital card.
     </p>
     <div class="cta-group">
+      <a
+        href="#create-card"
+        class="btn-primary animate-pulse"
+        onclick={(e) => { e.preventDefault(); scrollToForm(); }}
+      >
+        ✨ Create Your Card
+      </a>
+      <button
+        onclick={seedDemoAndNavigate}
+        class="btn-secondary"
+      >
+        View Demo Card →
+      </button>
       <a
         href="https://github.com/Dev-Card/DevCard"
-        class="btn-primary"
+        class="btn-outline"
         target="_blank"
         rel="noopener"
       >
         ⭐ Star on GitHub
       </a>
-      <a href="/u/devcard-demo" class="btn-secondary">View Demo Profile →</a>
     </div>
   </section>
 
+  <!-- CREATE YOUR CARD FORM -->
+  <section id="create-card" class="create-card-section glass">
+    <div class="section-header">
+      <div class="logo-accent">⚡</div>
+      <h2>{isEditing ? 'Update Your DevCard' : 'Create Your DevCard'}</h2>
+      <p class="section-subtitle">
+        Enter your details to generate a stunning, shareable developer profile card.
+      </p>
+    </div>
+
+    {#if formError}
+      <div class="alert alert-error" role="alert">
+        ⚠️ {formError}
+      </div>
+    {/if}
+
+    {#if formSuccess}
+      <div class="alert alert-success" role="alert">
+        🎉 {formSuccess}
+      </div>
+    {/if}
+
+    <form onsubmit={(e) => { e.preventDefault(); generateCard(); }} class="card-form">
+      <div class="form-grid">
+        <!-- Username Field -->
+        <div class="form-group">
+          <label for="username">Username <span class="required">*</span></label>
+          <div class="input-with-prefix">
+            <span class="url-prefix">/u/</span>
+            <input
+              type="text"
+              id="username"
+              placeholder="e.g. johndoe"
+              value={username}
+              oninput={handleUsernameInput}
+              disabled={isEditing}
+              required
+            />
+          </div>
+          {#if !isEditing}
+            <span class="input-helper">Your card will be available at /u/your-username</span>
+          {:else}
+            <span class="input-helper">Username cannot be changed when editing</span>
+          {/if}
+        </div>
+
+        <!-- Full Name Field -->
+        <div class="form-group">
+          <label for="displayName">Full Name <span class="required">*</span></label>
+          <input
+            type="text"
+            id="displayName"
+            placeholder="e.g. John Doe"
+            bind:value={displayName}
+            required
+          />
+        </div>
+
+        <!-- Avatar Studio Group -->
+        <div class="form-group full-width avatar-studio-group">
+          <span class="studio-title-label">Avatar Studio <span class="optional">(Pick an avatar suggestion below)</span></span>
+          
+          <div class="avatar-studio-container glass">
+            <!-- Left Side: Live Avatar Preview -->
+            <div class="avatar-preview-box">
+              <div class="preview-avatar-wrapper">
+                {#if avatarUrl && (avatarUrl.startsWith('data:') || /^https?:\/\//i.test(avatarUrl))}
+                  <img src={avatarUrl} alt="Avatar Preview" class="studio-preview-image" onerror={() => { avatarUrl = ''; }} />
+                {:else}
+                  <div class="studio-preview-placeholder">
+                    {displayName ? displayName.charAt(0).toUpperCase() : '⚡'}
+                  </div>
+                {/if}
+              </div>
+              <span class="preview-label">Live Preview</span>
+            </div>
+
+            <!-- Right Side: Suggestions Selector Grid -->
+            <div class="avatar-studio-controls">
+              <!-- Category: Dynamic Suggestions -->
+              <div class="control-section">
+                <span class="control-label">✨ Dynamic Suggestions (Real-time)</span>
+                <div class="suggestions-grid">
+                  <!-- Option 1: Dynamic Initials Avatar -->
+                  <button
+                    type="button"
+                    class="suggestion-card {avatarUrl === initialsAvatar ? 'active' : ''}"
+                    onclick={() => { avatarUrl = initialsAvatar; }}
+                    disabled={!displayName.trim()}
+                    title={displayName ? 'Use initials-based colored gradient' : 'Type your Full Name to enable'}
+                  >
+                    <div class="suggestion-preview">
+                      {#if displayName.trim()}
+                        <img src={initialsAvatar} alt="Initials Avatar" />
+                      {:else}
+                        <span class="suggestion-placeholder">Aa</span>
+                      {/if}
+                    </div>
+                    <span class="suggestion-name">Initials SVG</span>
+                  </button>
+
+                  <!-- Option 2: DiceBear Avataaars -->
+                  <button
+                    type="button"
+                    class="suggestion-card {avatarUrl === avataaarsUrl ? 'active' : ''}"
+                    onclick={() => { avatarUrl = avataaarsUrl; }}
+                  >
+                    <div class="suggestion-preview">
+                      <img src={avataaarsUrl} alt="Avataaars suggestion" />
+                    </div>
+                    <span class="suggestion-name">Avataaars</span>
+                  </button>
+
+                  <!-- Option 3: DiceBear Robots -->
+                  <button
+                    type="button"
+                    class="suggestion-card {avatarUrl === botttsUrl ? 'active' : ''}"
+                    onclick={() => { avatarUrl = botttsUrl; }}
+                  >
+                    <div class="suggestion-preview">
+                      <img src={botttsUrl} alt="Bot suggestion" />
+                    </div>
+                    <span class="suggestion-name">Robots</span>
+                  </button>
+
+                  <!-- Option 4: DiceBear Pixel Art -->
+                  <button
+                    type="button"
+                    class="suggestion-card {avatarUrl === pixelUrl ? 'active' : ''}"
+                    onclick={() => { avatarUrl = pixelUrl; }}
+                  >
+                    <div class="suggestion-preview">
+                      <img src={pixelUrl} alt="Pixel suggestion" />
+                    </div>
+                    <span class="suggestion-name">Pixel Art</span>
+                  </button>
+
+                  <!-- Option 5: DiceBear Lorelei -->
+                  <button
+                    type="button"
+                    class="suggestion-card {avatarUrl === loreleiUrl ? 'active' : ''}"
+                    onclick={() => { avatarUrl = loreleiUrl; }}
+                  >
+                    <div class="suggestion-preview">
+                      <img src={loreleiUrl} alt="Chibi suggestion" />
+                    </div>
+                    <span class="suggestion-name">Chibi</span>
+                  </button>
+
+                  <!-- Option 6: DiceBear Identicon -->
+                  <button
+                    type="button"
+                    class="suggestion-card {avatarUrl === identiconUrl ? 'active' : ''}"
+                    onclick={() => { avatarUrl = identiconUrl; }}
+                  >
+                    <div class="suggestion-preview">
+                      <img src={identiconUrl} alt="Identicon suggestion" />
+                    </div>
+                    <span class="suggestion-name">Identicon</span>
+                  </button>
+                </div>
+              </div>
+
+              <!-- Curated Presets & GitHub Sync Section -->
+              <div class="control-section row-controls suggestion-footer-controls">
+                <div class="sub-control">
+                  <span class="control-label">📷 Developer Photography Presets</span>
+                  <div class="preset-avatars-grid">
+                    {#each presetAvatars as preset}
+                      <button
+                        type="button"
+                        class="preset-btn {avatarUrl === preset.url ? 'active' : ''}"
+                        onclick={() => { avatarUrl = preset.url; }}
+                        style="background-image: url({preset.url})"
+                        title={preset.label}
+                        aria-label="Select {preset.label} preset"
+                      ></button>
+                    {/each}
+                  </div>
+                </div>
+
+                <div class="sub-control github-sync-control">
+                  <span class="control-label">🐙 Sync GitHub Avatar</span>
+                  <button
+                    type="button"
+                    onclick={syncGitHubAvatar}
+                    class="btn-github-sync"
+                    title={githubLink ? `Sync avatar from @${githubLink.username}` : 'Add a GitHub profile link first'}
+                  >
+                    {#if githubLink}
+                      Sync from @{githubLink.username}
+                    {:else}
+                      Sync GitHub Avatar
+                    {/if}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Short Bio Field -->
+        <div class="form-group full-width">
+          <label for="bio">Short Bio <span class="required">*</span></label>
+          <textarea
+            id="bio"
+            rows="3"
+            placeholder="Describe yourself in a few sentences... e.g. Software Engineer passionate about Svelte and open source."
+            bind:value={bio}
+            maxlength="200"
+            required
+          ></textarea>
+          <div class="textarea-footer">
+            <span class="char-count">{bio.length}/200 characters</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Add Links Section -->
+      <div class="links-section-form">
+        <h3>Add Your Social & Profile Links</h3>
+        <p class="section-subtitle-sm">
+          Select a platform, enter your username or profile URL, and click "Add".
+        </p>
+
+        <div class="link-builder-row">
+          <div class="select-wrapper">
+            <select bind:value={selectedPlatform}>
+              {#each platformOptions as platform}
+                <option value={platform.id}>{platform.name}</option>
+              {/each}
+            </select>
+          </div>
+          <input
+            type="text"
+            placeholder={platformOptions.find(p => p.id === selectedPlatform)?.placeholder || 'Enter profile URL'}
+            bind:value={linkInput}
+            onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addLink(); } }}
+          />
+          <button type="button" onclick={addLink} class="btn-add-link">
+            ➕ Add Link
+          </button>
+        </div>
+
+        <!-- Link List -->
+        <div class="links-list-container">
+          {#if links.length === 0}
+            <div class="empty-links-state">
+              <span class="empty-icon">🔗</span>
+              <p>No links added yet. Add at least one platform link!</p>
+            </div>
+          {:else}
+            <div class="links-list">
+              {#each links as link}
+                {@const color = platformColors[link.platform] || '#6366f1'}
+                <div class="link-item glass">
+                  <div class="link-item-info">
+                    <span class="link-platform-tag" style="background: {color}">
+                      {platformOptions.find(p => p.id === link.platform)?.name || link.platform}
+                    </span>
+                    <span class="link-username-tag">@{link.username}</span>
+                    <span class="link-url-tag">{link.url}</span>
+                  </div>
+                  <button type="button" onclick={() => deleteLink(link.id)} class="btn-delete-link" aria-label="Delete link">
+                    🗑️
+                  </button>
+                </div>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
+
+      <!-- Form Action Button -->
+      <div class="form-submit-wrapper">
+        <button type="submit" class="btn-primary btn-generate-card">
+          {isEditing ? '⚡ Update My DevCard' : '⚡ Generate My DevCard'}
+        </button>
+        {#if isEditing}
+          <button type="button" onclick={() => { isEditing = false; username = ''; displayName = ''; bio = ''; avatarUrl = ''; links = []; }} class="btn-secondary">
+            Cancel Edit
+          </button>
+        {/if}
+      </div>
+    </form>
+  </section>
+
   <section id="features" class="features">
     <div class="feature-card glass">
       <div class="feature-icon">🔗</div>
@@ -196,9 +799,28 @@
     display: flex;
     gap: 1rem;
     justify-content: center;
+    align-items: center;
     flex-wrap: wrap;
   }
 
+  .btn-outline {
+    padding: 0.92rem 1.75rem;
+    border-radius: calc(var(--radius) * 1.15);
+    font-weight: 700;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    background: transparent;
+    color: var(--text-primary);
+    transition: all 0.2s ease;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .btn-outline:hover {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(99, 102, 241, 0.35);
+  }
+
   .btn-secondary {
     padding: 0.92rem 1.75rem;
     border-radius: calc(var(--radius) * 1.15);
@@ -206,6 +828,11 @@
     border: 1px solid rgba(255, 255, 255, 0.18);
     background: rgba(255, 255, 255, 0.08);
     color: var(--text-primary);
+    cursor: pointer;
+    font: inherit;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
   }
 
   .btn-secondary:hover {
@@ -213,6 +840,663 @@
     border-color: rgba(99, 102, 241, 0.45);
   }
 
+  /* --- Create Card Form Styles --- */
+  .create-card-section {
+    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
+    border-radius: var(--radius-xl, 24px);
+    margin: 3rem auto 5rem;
+    background: rgba(15, 23, 42, 0.7);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: var(--shadow-xl);
+    max-width: 800px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .section-header {
+    text-align: center;
+    margin-bottom: 2.5rem;
+  }
+
+  .logo-accent {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    display: inline-block;
+    animation: pulse 2s infinite;
+  }
+
+  .create-card-section h2 {
+    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
+    font-weight: 800;
+    margin-bottom: 0.75rem;
+    background: linear-gradient(135deg, #fff 0%, var(--text-secondary) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .section-subtitle {
+    color: var(--text-secondary);
+    font-size: 1.05rem;
+    max-width: 550px;
+    margin: 0 auto;
+    line-height: 1.5;
+  }
+
+  .section-subtitle-sm {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 1.25rem;
+    line-height: 1.4;
+  }
+
+  .card-form {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .form-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 640px) {
+    .form-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .form-group.full-width {
+    grid-column: span 2;
+  }
+
+  @media (max-width: 640px) {
+    .form-group.full-width {
+      grid-column: span 1;
+    }
+  }
+
+  label, .studio-title-label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .required {
+    color: #ef4444;
+  }
+
+  .optional {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    font-weight: normal;
+  }
+
+  input, select, textarea {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--radius);
+    padding: 0.75rem 1rem;
+    color: var(--text-primary);
+    font-size: 1rem;
+    font-family: inherit;
+    transition: all 0.2s ease;
+  }
+
+  input:focus, select:focus, textarea:focus {
+    outline: none;
+    border-color: rgba(99, 102, 241, 0.5);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+  }
+
+  .input-with-prefix {
+    display: flex;
+    align-items: stretch;
+    border-radius: var(--radius);
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    overflow: hidden;
+    transition: all 0.2s ease;
+  }
+
+  .input-with-prefix:focus-within {
+    border-color: rgba(99, 102, 241, 0.5);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+  }
+
+  .input-with-prefix input {
+    border: none;
+    background: transparent;
+    padding-left: 0.35rem;
+    flex: 1;
+    box-shadow: none;
+  }
+
+  .input-with-prefix input:focus {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  .url-prefix {
+    display: flex;
+    align-items: center;
+    padding: 0 0.75rem;
+    background: rgba(255, 255, 255, 0.04);
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    border-right: 1px solid rgba(255, 255, 255, 0.08);
+    font-weight: 500;
+  }
+
+  .input-helper {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+  }
+
+  /* --- Avatar Studio Styles --- */
+  .avatar-studio-group {
+    margin-bottom: 0.5rem;
+  }
+
+  .avatar-studio-container {
+    display: flex;
+    gap: 2rem;
+    padding: 1.5rem;
+    border-radius: var(--radius-xl);
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    align-items: center;
+  }
+
+  @media (max-width: 640px) {
+    .avatar-studio-container {
+      flex-direction: column;
+      align-items: center;
+      gap: 1.5rem;
+    }
+  }
+
+  .avatar-preview-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 120px;
+  }
+
+  .preview-avatar-wrapper {
+    position: relative;
+    width: 110px;
+    height: 110px;
+    border-radius: 32% 68% 63% 37% / 34% 36% 64% 66%;
+    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 3px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+  }
+
+  .studio-preview-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .studio-preview-placeholder {
+    font-size: 2.75rem;
+    font-weight: 800;
+    color: white;
+  }
+
+  .preview-label {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+
+  .avatar-studio-controls {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    width: 100%;
+  }
+
+  .control-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .row-controls {
+    display: flex;
+    flex-direction: row;
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 520px) {
+    .row-controls {
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+
+  .sub-control {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .control-label {
+    font-size: 0.82rem;
+    font-weight: 700;
+    color: var(--text-secondary);
+    letter-spacing: 0.3px;
+  }
+
+  .preset-avatars-grid {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .preset-btn {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background-size: cover;
+    background-position: center;
+    border: 2px solid rgba(255, 255, 255, 0.12);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 0;
+  }
+
+  .preset-btn:hover {
+    transform: scale(1.1);
+    border-color: var(--primary, #6366f1);
+  }
+
+  .preset-btn.active {
+    border-color: var(--primary, #6366f1);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
+    transform: scale(1.05);
+  }
+
+  .suggestions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .suggestion-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    padding: 0.5rem;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.35rem;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    outline: none;
+  }
+
+  .suggestion-card:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(99, 102, 241, 0.3);
+    transform: translateY(-2px);
+  }
+
+  .suggestion-card.active {
+    background: rgba(99, 102, 241, 0.08);
+    border-color: var(--primary, #6366f1);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
+  }
+
+  .suggestion-card:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .suggestion-preview {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .suggestion-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .suggestion-placeholder {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--text-muted);
+  }
+
+  .suggestion-name {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+
+  .github-sync-control {
+    min-width: 140px;
+  }
+
+  .btn-github-sync {
+    padding: 0.5rem 1rem;
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: white;
+    background: #24292e;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn-github-sync:hover {
+    background: #2f363d;
+    border-color: rgba(99, 102, 241, 0.4);
+    transform: translateY(-1px);
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  .textarea-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: -0.25rem;
+  }
+
+  .char-count {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+
+  /* --- Links Section in Form --- */
+  .links-section-form {
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    padding-top: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .links-section-form h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+  }
+
+  .link-builder-row {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .link-builder-row input {
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .select-wrapper {
+    position: relative;
+    display: flex;
+  }
+
+  .select-wrapper select {
+    appearance: none;
+    padding-right: 2.5rem;
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  .select-wrapper::after {
+    content: "▼";
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .btn-add-link {
+    padding: 0.75rem 1.25rem;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: var(--radius);
+    font-weight: 600;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+  }
+
+  .btn-add-link:hover {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(99, 102, 241, 0.4);
+    transform: translateY(-1px);
+  }
+
+  /* --- Links List Container --- */
+  .links-list-container {
+    background: rgba(0, 0, 0, 0.12);
+    border: 1px dashed rgba(255, 255, 255, 0.06);
+    border-radius: var(--radius-xl);
+    padding: 1rem;
+    min-height: 80px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .empty-links-state {
+    text-align: center;
+    color: var(--text-muted);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.35rem;
+  }
+
+  .empty-icon {
+    font-size: 1.5rem;
+    opacity: 0.5;
+  }
+
+  .links-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .link-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    gap: 1rem;
+  }
+
+  .link-item-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    flex: 1;
+  }
+
+  .link-platform-tag {
+    font-size: 0.8rem;
+    font-weight: 700;
+    padding: 0.25rem 0.65rem;
+    border-radius: 999px;
+    color: white;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
+  }
+
+  .link-username-tag {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .link-url-tag {
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    max-width: 320px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .btn-delete-link {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 1.1rem;
+    padding: 0.25rem;
+    opacity: 0.6;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  .btn-delete-link:hover {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+
+  /* --- Form Alerts --- */
+  .alert {
+    padding: 1rem;
+    border-radius: var(--radius);
+    font-size: 0.95rem;
+    font-weight: 500;
+    border-left: 4px solid;
+    margin-bottom: 1.5rem;
+  }
+
+  .alert-error {
+    background: rgba(239, 68, 68, 0.06);
+    border: 1px solid rgba(239, 68, 68, 0.12);
+    border-left-color: #ef4444;
+    color: #fca5a5;
+  }
+
+  .alert-success {
+    background: rgba(34, 197, 94, 0.06);
+    border: 1px solid rgba(34, 197, 94, 0.12);
+    border-left-color: #22c55e;
+    color: #86efac;
+  }
+
+  /* --- Form Action Buttons --- */
+  .form-submit-wrapper {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    padding-top: 1.75rem;
+    margin-top: 0.5rem;
+  }
+
+  .btn-generate-card {
+    padding: 0.9rem 2rem;
+    font-weight: 700;
+    border: none;
+    cursor: pointer;
+    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
+    color: white;
+    border-radius: calc(var(--radius) * 1.15);
+    box-shadow: 0 10px 25px -10px rgba(99, 102, 241, 0.4);
+    transition: all 0.25s ease;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .btn-generate-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 30px -10px rgba(99, 102, 241, 0.5);
+  }
+
+  .btn-generate-card:active {
+    transform: translateY(0);
+  }
+
+  .btn-primary {
+    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
+    color: white;
+    border: none;
+    box-shadow: 0 10px 25px -10px rgba(99, 102, 241, 0.4);
+    text-decoration: none;
+    padding: 0.92rem 1.75rem;
+    border-radius: calc(var(--radius) * 1.15);
+    font-weight: 700;
+    transition: all 0.25s ease;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 30px -10px rgba(99, 102, 241, 0.5);
+  }
+
+  /* Smooth animations */
+  @keyframes pulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.08); opacity: 0.85; }
+  }
+
   .features {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -221,13 +1505,13 @@
   }
 
   @media (max-width: 640px) {
-  .features {
-    display: grid;
-    grid-template-columns: 1fr; /* single column */
-    gap: 16px;
-    padding: 0 12px;
+    .features {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 16px;
+      padding: 0 12px;
+    }
   }
-}
 
   .feature-card {
     padding: 2.4rem;
@@ -236,17 +1520,15 @@
     background: linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.5));
     border: 1px solid rgba(255, 255, 255, 0.08);
     transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
+    min-height: 140px;
   }
 
-  .feature-card {
-  min-height: 140px;
-  padding: 16px;
-}
-@media (max-width: 640px) {
-  .feature-card {
-    margin-bottom: 12px;
+  @media (max-width: 640px) {
+    .feature-card {
+      margin-bottom: 12px;
+      padding: 1.8rem;
+    }
   }
-}
 
   .feature-card:hover {
     transform: translateY(-8px);
@@ -297,10 +1579,6 @@
       align-items: stretch;
     }
 
-    .feature-card {
-      padding: 1.8rem;
-    }
-
     .features {
       gap: 1.2rem;
     }
diff --git a/apps/web/src/routes/u/[username]/+page.server.ts b/apps/web/src/routes/u/[username]/+page.server.ts
index 042acad..8882b45 100644
--- a/apps/web/src/routes/u/[username]/+page.server.ts
+++ b/apps/web/src/routes/u/[username]/+page.server.ts
@@ -1,16 +1,2 @@
-import type { PageServerLoad } from './$types';
-
-const API_BASE = process.env.BACKEND_URL || 'http://localhost:3000';
-
-export const load: PageServerLoad = async ({ params, fetch }) => {
-  try {
-    const res = await fetch(`${API_BASE}/api/u/${params.username}?source=web`);
-    if (!res.ok) {
-      return { profile: null, error: 'User not found' };
-    }
-    const profile = await res.json();
-    return { profile, error: null };
-  } catch {
-    return { profile: null, error: 'Failed to load profile' };
-  }
-};
+// This server load is intentionally disabled. Profile data is loaded client-side from localStorage.
+export const load = async () => ({ profile: null, error: null });
diff --git a/apps/web/src/routes/u/[username]/+page.svelte b/apps/web/src/routes/u/[username]/+page.svelte
index bb23cca..c4318ef 100644
--- a/apps/web/src/routes/u/[username]/+page.svelte
+++ b/apps/web/src/routes/u/[username]/+page.svelte
@@ -1,26 +1,69 @@
 <script lang="ts">
-  import { PLATFORMS, getProfileUrl } from '@devcard/shared';
-  import { onMount } from 'svelte';
-
-  let { data } = $props();
-  const profile = data.profile;
-  const error = data.error;
+  import { page } from '$app/stores';
+  import { onMount, tick } from 'svelte';
+  import QRCode from 'qrcode';
 
   const platformColors: Record<string, string> = {
-    github: '#181717', linkedin: '#0A66C2', twitter: '#000000',
-    gitlab: '#FC6D26', devfolio: '#3770FF', npm: '#CB3837',
-    devto: '#0A0A0A', hashnode: '#2962FF', medium: '#000000',
-    leetcode: '#FFA116', hackerrank: '#00EA64', discord: '#5865F2',
-    telegram: '#26A5E4', email: '#EA4335', portfolio: '#6366F1', custom: '#8B5CF6',
+    github: '#181717',
+    linkedin: '#0A66C2',
+    twitter: '#000000',
+    instagram: '#E1306C',
+    youtube: '#FF0000',
+    devto: '#0A0A0A',
+    leetcode: '#FFA116',
+    portfolio: '#6366F1'
+  };
+
+  const platformNames: Record<string, string> = {
+    github: 'GitHub',
+    linkedin: 'LinkedIn',
+    twitter: 'Twitter / X',
+    instagram: 'Instagram',
+    youtube: 'YouTube',
+    devto: 'Dev.to',
+    leetcode: 'LeetCode',
+    portfolio: 'Portfolio'
   };
 
+  const platformInitials: Record<string, string> = {
+    github: 'GH',
+    linkedin: 'IN',
+    twitter: '𝕏',
+    instagram: 'IG',
+    youtube: 'YT',
+    devto: 'DV',
+    leetcode: 'LC',
+    portfolio: '🌐'
+  };
+
+  let profile = $state<any>(null);
+  let errorStatus = $state<string | null>(null);
   let mounted = $state(false);
+  let canvasElement = $state<HTMLCanvasElement | null>(null);
+
   let copyMessage = $state('');
   let copyStatus = $state<'success' | 'error'>('success');
   let copyMessageTimeout: ReturnType<typeof setTimeout> | undefined;
 
   onMount(() => {
     mounted = true;
+    const routeUsername = $page.params.username;
+    const key = `devcard_${routeUsername}`;
+    const data = localStorage.getItem(key);
+
+    if (data) {
+      try {
+        profile = JSON.parse(data);
+        // Wait for Svelte DOM to render the canvas element before generating the QR code
+        tick().then(() => {
+          generateQRCode();
+        });
+      } catch (e) {
+        errorStatus = 'Failed to parse card data';
+      }
+    } else {
+      errorStatus = 'Card not found';
+    }
 
     return () => {
       if (copyMessageTimeout) {
@@ -29,6 +72,38 @@
     };
   });
 
+  async function generateQRCode() {
+    if (!canvasElement) return;
+    try {
+      const url = window.location.href;
+      await QRCode.toCanvas(canvasElement, url, {
+        width: 140,
+        margin: 1,
+        color: {
+          dark: '#0f172a',
+          light: '#ffffff'
+        }
+      });
+    } catch (err) {
+      console.error('Failed to generate QR code', err);
+    }
+  }
+
+  function downloadQR() {
+    if (!canvasElement) return;
+    try {
+      const dataUrl = canvasElement.toDataURL('image/png');
+      const link = document.createElement('a');
+      link.download = `devcard-${profile?.username || 'profile'}-qr.png`;
+      link.href = dataUrl;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (err) {
+      console.error('Failed to download QR code', err);
+    }
+  }
+
   function showCopyMessage(message: string, status: 'success' | 'error') {
     copyMessage = message;
     copyStatus = status;
@@ -44,7 +119,7 @@
 
   async function copyProfileUrl() {
     if (!navigator.clipboard?.writeText) {
-      showCopyMessage('Clipboard API unavailable. Copy the URL from your address bar.', 'error');
+      showCopyMessage('Clipboard API unavailable. Copy URL from your address bar.', 'error');
       return;
     }
 
@@ -52,7 +127,7 @@
       await navigator.clipboard.writeText(window.location.href);
       showCopyMessage('Profile link copied.', 'success');
     } catch {
-      showCopyMessage('Could not copy link. Copy the URL from your address bar.', 'error');
+      showCopyMessage('Could not copy link.', 'error');
     }
   }
 </script>
@@ -62,19 +137,25 @@
     <title>{profile.displayName} | DevCard</title>
     <meta name="description" content="{profile.bio || `${profile.displayName}'s developer profiles`}" />
   {:else}
-    <title>User Not Found | DevCard</title>
+    <title>Card Not Found | DevCard</title>
   {/if}
 </svelte:head>
 
 <div class="bg-gradient" style="--accent: {profile?.accentColor || '#6366f1'}"></div>
 
 <main class="profile-container {mounted ? 'loaded' : ''}">
-  {#if error || !profile}
+  {#if errorStatus}
     <div class="error-glass glass">
       <div class="error-emoji">😕</div>
-      <h1>Profile not found</h1>
+      <h1>Card not found</h1>
       <p>This DevCard has vanished into the digital void.</p>
-      <a href="/" class="btn-primary">Return Home</a>
+      <a href="/" class="btn-primary">Create yours</a>
+    </div>
+  {:else if !profile}
+    <!-- Loading state -->
+    <div class="error-glass glass">
+      <div class="spinner">⚡</div>
+      <p>Retrieving your DevCard...</p>
     </div>
   {:else}
     <div class="profile-card glass" style="--accent: {profile.accentColor}">
@@ -91,11 +172,9 @@
         </div>
         
         <h1 class="display-name">{profile.displayName}</h1>
-        {#if profile.role}
-          <div class="role-badge">
-            {profile.role}{profile.company ? ` @ ${profile.company}` : ''}
-          </div>
-        {/if}
+        <div class="role-badge">
+          @{profile.username}
+        </div>
         
         {#if profile.bio}
           <p class="bio">{profile.bio}</p>
@@ -104,26 +183,39 @@
 
       <div class="links-grid">
         {#each profile.links as link, i}
-          {@const platform = PLATFORMS[link.platform]}
           {@const color = platformColors[link.platform] || '#6366f1'}
+          {@const name = platformNames[link.platform] || link.platform}
+          {@const initial = platformInitials[link.platform] || '?'}
           <a
-            href={link.url || getProfileUrl(link.platform, link.username)}
+            href={link.url}
             target="_blank"
             rel="noopener noreferrer"
             class="link-tile glass"
             style="--delay: {i * 0.1}s"
           >
             <div class="tile-icon" style="background: {color}">
-              <span class="platform-initial">{platform?.name.charAt(0) || '?'}</span>
+              <span class="platform-initial">{initial}</span>
             </div>
             <div class="tile-content">
-              <span class="platform-name">{platform?.name || link.platform}</span>
+              <span class="platform-name">{name}</span>
               <span class="username">@{link.username}</span>
             </div>
             <span class="arrow">→</span>
           </a>
         {/each}
       </div>
+
+      <!-- QR Code Section -->
+      <div class="qr-section glass">
+        <canvas bind:this={canvasElement} class="qr-canvas"></canvas>
+        <div class="qr-actions">
+          <p class="qr-title">Share Your Profile</p>
+          <p class="qr-hint">Scan to view or tap below to download QR as a high-quality PNG.</p>
+          <button type="button" class="btn-qr-download" onclick={downloadQR}>
+            💾 Download QR
+          </button>
+        </div>
+      </div>
       
       <footer class="card-footer">
         <p>Verified Developer Profile</p>
@@ -132,11 +224,11 @@
     </div>
 
     <div class="get-your-own">
-      <p>Want a card like this?</p>
       <div class="profile-actions">
-        <a href="/" class="gradient-text get-devcard-link">Create your DevCard ⚡</a>
-        <button type="button" class="copy-link-button" onclick={copyProfileUrl}>
-          Copy Link
+        <a href="/" class="copy-link-button btn-home">🏠 Home</a>
+        <a href="/?edit={profile.username}" class="copy-link-button btn-edit">✏️ Edit Card</a>
+        <button type="button" class="copy-link-button btn-copy" onclick={copyProfileUrl}>
+          📋 Copy Link
         </button>
       </div>
       <p class="copy-message {copyStatus}" aria-live="polite">
@@ -268,6 +360,8 @@
     animation: slideIn 0.5s ease-out forwards;
     animation-delay: var(--delay);
     opacity: 0;
+    text-decoration: none;
+    color: inherit;
   }
 
   .link-tile:hover,
@@ -329,8 +423,75 @@
     transform: translateX(5px);
   }
 
+  /* --- QR Section Styles --- */
+  .qr-section {
+    margin-top: 2.25rem;
+    padding: 1.5rem;
+    border-radius: var(--radius-lg, 16px);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  .qr-canvas {
+    border-radius: 12px;
+    background: white;
+    padding: 6px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
+    width: 140px;
+    height: 140px;
+  }
+
+  .qr-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.45rem;
+    flex: 1;
+    min-width: 180px;
+  }
+
+  .qr-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--text-primary);
+  }
+
+  .qr-hint {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    line-height: 1.45;
+    margin-bottom: 0.25rem;
+  }
+
+  .btn-qr-download {
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: var(--radius);
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text-primary);
+    cursor: pointer;
+    font: inherit;
+    font-weight: 700;
+    padding: 0.55rem 1.1rem;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+
+  .btn-qr-download:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateY(-1px);
+    border-color: var(--accent);
+  }
+
   .card-footer {
-    margin-top: 2.5rem;
+    margin-top: 2.25rem;
     padding-top: 1.75rem;
     border-top: 1px solid rgba(255,255,255,0.08);
     display: flex;
@@ -349,16 +510,10 @@
   }
 
   .get-your-own {
-    margin-top: 2rem;
+    margin-top: 2.25rem;
     text-align: center;
   }
 
-  .get-your-own p {
-    margin-bottom: 0.5rem;
-    font-size: 0.95rem;
-    color: var(--text-muted);
-  }
-
   .profile-actions {
     display: flex;
     flex-wrap: wrap;
@@ -367,26 +522,25 @@
     gap: 0.75rem;
   }
 
-  .get-devcard-link {
-    font-weight: 700;
-    font-size: 1.05rem;
-  }
-
   .copy-link-button {
-    border: 1px solid var(--border-glass);
+    border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: var(--radius);
-    background: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.06);
     color: var(--text-primary);
     cursor: pointer;
     font: inherit;
     font-weight: 700;
-    padding: 0.65rem 1rem;
+    padding: 0.65rem 1.2rem;
     transition: all 0.2s ease;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
   }
 
   .copy-link-button:hover {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.14);
     transform: translateY(-1px);
+    border-color: var(--accent);
   }
 
   .copy-link-button:focus-visible {
@@ -411,9 +565,63 @@
 
   .error-glass {
     text-align: center;
-    padding: 3rem;
+    padding: 3.5rem clamp(1.5rem, 4vw, 3rem);
     border-radius: var(--radius-xl);
     width: min(100%, 520px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(15, 23, 42, 0.96);
+  }
+
+  .error-glass h1 {
+    font-size: 2rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .error-glass p {
+    color: var(--text-secondary);
+    margin-bottom: 1.75rem;
+    line-height: 1.5;
+  }
+
+  .error-emoji {
+    font-size: 3.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .spinner {
+    font-size: 3rem;
+    margin-bottom: 1.25rem;
+    animation: rotate 1.5s linear infinite;
+  }
+
+  @keyframes rotate {
+    0% { transform: rotate(0deg) scale(1); }
+    50% { transform: rotate(180deg) scale(1.1); }
+    100% { transform: rotate(360deg) scale(1); }
+  }
+
+  .btn-primary {
+    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
+    color: white;
+    border: none;
+    box-shadow: 0 10px 25px -10px rgba(99, 102, 241, 0.4);
+    text-decoration: none;
+    padding: 0.8rem 1.75rem;
+    border-radius: calc(var(--radius) * 1.15);
+    font-weight: 700;
+    transition: all 0.25s ease;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 15px 30px -10px rgba(99, 102, 241, 0.5);
   }
 
   @media (max-width: 720px) {
@@ -421,6 +629,7 @@
     .profile-header { margin-bottom: 2rem; }
     .avatar-wrapper { width: 108px; height: 108px; margin-bottom: 1.5rem; }
     .card-footer { flex-direction: column; align-items: flex-start; }
+    .qr-section { gap: 1rem; padding: 1.2rem; }
   }
 
   @media (max-width: 520px) {
@@ -429,5 +638,7 @@
     .link-tile { padding: 0.95rem; }
     .tile-content { margin-left: 0.9rem; }
     .card-footer { text-align: left; }
+    .qr-section { flex-direction: column; align-items: center; text-align: center; }
+    .qr-actions { align-items: center; }
   }
 </style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5badd09..05218f8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -247,6 +247,9 @@ importers:
       '@devcard/shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^7.0.0
@@ -257,6 +260,9 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^6.2.4
         version: 6.2.4(svelte@5.53.10)(vite@7.3.1(@types/node@22.19.15)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      '@types/qrcode':
+        specifier: ^1.5.6
+        version: 1.5.6
       svelte:
         specifier: ^5.51.0
         version: 5.53.10