diff --git a/apps/web/package.json b/apps/web/package.json
index 3601215..bbc0f02 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,7 +12,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"dependencies": {
-		"@devcard/shared": "workspace:*"
+		"@devcard/shared": "workspace:*",
+		"lucide-svelte": "^1.0.1"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 512f905..00d5cfd 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -1,5 +1,17 @@
 <script>
   import { onMount } from 'svelte';
+  import {
+    Moon,
+    Sun,
+    Zap,
+    Star,
+    ChevronDown,
+    Link,
+    CreditCard,
+    Smartphone,
+    Lock,
+    Globe,
+  } from 'lucide-svelte';
 
   let theme = 'light';
 
@@ -28,218 +40,295 @@
   />
 </svelte:head>
 
-<div class="bg-glow"></div>
-
 <main class="landing">
-  <nav class="glass">
-    <div class="nav-content">
-      <div class="logo">⚡ <span class="gradient-text">DevCard</span></div>
-      <button
-        id="theme-toggle"
-        class="theme-toggle"
-        on:click={toggleTheme}
-        aria-label="Toggle theme"
-      >
-        {theme === 'light' ? '🌙' : '☀️'}
-      </button>
-    </div>
-  </nav>
-
   <section class="hero">
-    <div class="hero-badge">GSSoC'26 Edition</div>
-    <h1 class="gradient-text">One Tap. Every Profile.<br/>Every Platform.</h1>
+    <button
+      id="theme-toggle"
+      class="theme-toggle"
+      on:click={toggleTheme}
+      aria-label="Toggle theme"
+    >
+      {#if theme === 'light'}
+        <Moon size={20} />
+      {:else}
+        <Sun size={20} />
+      {/if}
+    </button>
+    <div class="logo">
+      <Zap size={64} strokeWidth={2.5} fill="currentColor" />
+    </div>
+    <h1>DevCard</h1>
+    <p class="tagline">One Tap. Every Profile. Every Platform.</p>
     <p class="description">
-      The open-source standard for developer networking. Put all your profiles—GitHub, LinkedIn, LeetCode, and more—into a single, high-impact digital card.
+      Stop sharing LinkedIn, GitHub, and Twitter one by one.<br />
+      DevCard puts every profile in one shareable QR code.
     </p>
     <div class="cta-group">
       <a
         href="https://github.com/Dev-Card/DevCard"
-        class="btn-primary"
+        class="btn btn-primary"
         target="_blank"
         rel="noopener"
       >
-        ⭐ Star on GitHub
+        <Star size={18} fill="currentColor" /> Star on GitHub
+      </a>
+      <a href="#features" class="btn btn-secondary">
+        Learn More <ChevronDown size={18} />
       </a>
-      <a href="/u/devcard-demo" class="btn-secondary">View Demo Profile →</a>
     </div>
   </section>
 
   <section id="features" class="features">
-    <div class="feature-card glass">
-      <div class="feature-icon">🔗</div>
-      <h3>Unified Identity</h3>
-      <p>Combine your fragmented online presence into a cohesive professional identity.</p>
+    <div class="feature-card">
+      <div class="feature-icon"><Link size={32} /></div>
+      <h3>One Card, All Profiles</h3>
+      <p>
+        GitHub, LinkedIn, Twitter/X, Devfolio, GitLab, LeetCode, and 10+ more —
+        all in one card.
+      </p>
     </div>
-    <div class="feature-card glass">
-      <div class="feature-icon">⚡</div>
-      <h3>Instant Follow</h3>
-      <p>Integrated APIs allow followers to connect with you instantly across platforms.</p>
+    <div class="feature-card">
+      <div class="feature-icon"><Zap size={32} /></div>
+      <h3>Hybrid Follow Engine</h3>
+      <p>
+        Follow on GitHub silently via API. Connect on LinkedIn with one tap in
+        WebView. No app switching.
+      </p>
     </div>
-    <div class="feature-card glass">
-      <div class="feature-icon">🔒</div>
-      <h3>Private by Design</h3>
-      <p>No tracking, no data selling. Your information stays where it belongs: with you.</p>
+    <div class="feature-card">
+      <div class="feature-icon"><CreditCard size={32} /></div>
+      <h3>Context Cards</h3>
+      <p>
+        Share your "Professional" card at conferences and "Hackathon" card at
+        hack events. Same profiles, different contexts.
+      </p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon"><Smartphone size={32} /></div>
+      <h3>QR + AirDrop</h3>
+      <p>
+        Generate a QR code or share via AirDrop-style link. Works even if the
+        receiver doesn't have the app.
+      </p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon"><Lock size={32} /></div>
+      <h3>Privacy First</h3>
+      <p>
+        No data monetization. No tracking. Apache 2.0 licensed. You own your
+        data.
+      </p>
+    </div>
+    <div class="feature-card">
+      <div class="feature-icon"><Globe size={32} /></div>
+      <h3>Open Source</h3>
+      <p>
+        Community-driven development. Contribute, self-host, or extend with your
+        own platforms.
+      </p>
     </div>
   </section>
 
   <footer class="footer">
-    <p>© 2026 DevCard • Built for the Developer Community</p>
+    <p>DevCard — Open Source Developer Profile Exchange</p>
+    <p>
+      Apache 2.0 License • <a
+        href="https://github.com/Dev-Card/DevCard"
+        target="_blank"
+        rel="noopener">GitHub</a
+      >
+    </p>
   </footer>
 </main>
 
 <style>
-  .bg-glow {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(circle at 50% 0%, var(--primary-glow), transparent 40%),
-                radial-gradient(circle at 0% 100%, var(--accent-glow), transparent 30%);
-    pointer-events: none;
-    z-index: -1;
-  }
-
-  nav {
-    position: sticky;
-    top: 1rem;
-    margin: 1rem auto;
-    width: calc(100% - 2rem);
-    max-width: 1100px;
-    border-radius: var(--radius-lg);
-    z-index: 100;
-    padding: 0.75rem 1.5rem;
-  }
-
-  .nav-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .logo {
-    font-family: 'Outfit', sans-serif;
-    font-weight: 800;
-    font-size: 1.5rem;
+  /* ── Theme toggle button ────────────────────────────────────────── */
+  .theme-toggle {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    width: 2.75rem;
+    height: 2.75rem;
+    font-size: 1.3rem;
+    cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    justify-content: center;
+    transition:
+      background 0.3s ease,
+      border-color 0.3s ease,
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    line-height: 1;
   }
 
-  .theme-toggle {
-    background: transparent;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 50%;
-    transition: transform 0.3s ease;
+  .theme-toggle:hover {
+    transform: scale(1.12) rotate(15deg);
+    border-color: var(--primary);
+    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
   }
 
-  .theme-toggle:hover {
-    transform: scale(1.1) rotate(10deg);
+  .theme-toggle:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 3px;
   }
 
   .landing {
-    max-width: 1100px;
+    max-width: 960px;
     margin: 0 auto;
-    padding: 0 1.5rem;
+    padding: 2rem;
+    position: relative;
   }
 
   .hero {
     text-align: center;
-    padding: 8rem 0 6rem;
+    padding: 6rem 0 4rem;
   }
 
-  .hero-badge {
-    display: inline-block;
-    padding: 0.4rem 1rem;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border);
-    border-radius: 100px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    margin-bottom: 2rem;
-    color: var(--primary);
+  .logo {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    animation: float 3s ease-in-out infinite;
+  }
+
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
   }
 
   h1 {
-    font-size: 4.5rem;
-    font-weight: 900;
-    letter-spacing: -3px;
-    margin-bottom: 1.5rem;
+    font-size: 3.5rem;
+    font-weight: 800;
+    letter-spacing: -2px;
+    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
   }
 
-  .description {
+  .tagline {
     font-size: 1.25rem;
     color: var(--text-secondary);
-    max-width: 700px;
-    margin: 0 auto 3rem;
-    line-height: 1.6;
+    margin-top: 0.5rem;
+  }
+
+  .description {
+    font-size: 1.1rem;
+    color: var(--text-muted);
+    margin-top: 1.5rem;
+    line-height: 1.7;
   }
 
   .cta-group {
     display: flex;
-    gap: 1.5rem;
+    gap: 1rem;
     justify-content: center;
+    margin-top: 2.5rem;
   }
 
-  .btn-secondary {
-    padding: 0.8rem 1.6rem;
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
     border-radius: var(--radius);
     font-weight: 600;
-    border: 1px solid var(--border);
+    font-size: 1rem;
+    transition: all 0.2s ease;
+  }
+
+  .btn-primary {
+    background: var(--primary);
+    color: white;
+    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
+  }
+
+  .btn-primary:hover {
+    background: var(--primary-dark);
+    transform: translateY(-1px);
+    color: white;
+  }
+
+  .btn-secondary {
     background: var(--bg-card);
-    transition: all 0.2s;
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
   }
 
   .btn-secondary:hover {
-    background: var(--bg-secondary);
-    border-color: var(--primary);
+    background: var(--bg-elevated);
+    color: var(--text-primary);
   }
 
   .features {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    padding: 4rem 0;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    padding: 3rem 0;
   }
 
   .feature-card {
-    padding: 2.5rem;
-    border-radius: var(--radius-xl);
-    transition: transform 0.3s ease;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    transition:
+      transform 0.2s ease,
+      border-color 0.2s ease;
   }
 
   .feature-card:hover {
-    transform: translateY(-10px);
+    transform: translateY(-4px);
+    border-color: var(--primary);
   }
 
   .feature-icon {
-    font-size: 2.5rem;
-    margin-bottom: 1.5rem;
+    font-size: 2rem;
+    margin-bottom: 1rem;
   }
 
-  h3 {
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
+  .feature-card h3 {
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
   }
 
   .feature-card p {
     color: var(--text-secondary);
+    font-size: 0.9rem;
     line-height: 1.6;
   }
 
   .footer {
     text-align: center;
-    padding: 6rem 0 3rem;
-    border-top: 1px solid var(--border);
+    padding: 3rem 0 2rem;
     color: var(--text-muted);
+    font-size: 0.85rem;
   }
 
-  @media (max-width: 768px) {
-    h1 { font-size: 3rem; letter-spacing: -1px; }
-    .hero { padding: 4rem 0 3rem; }
-    .cta-group { flex-direction: column; align-items: stretch; }
+  .footer p + p {
+    margin-top: 0.5rem;
+  }
+
+  @media (max-width: 600px) {
+    h1 {
+      font-size: 2.5rem;
+    }
+    .hero {
+      padding: 3rem 0 2rem;
+    }
+    .cta-group {
+      flex-direction: column;
+      align-items: center;
+    }
   }
 </style>
diff --git a/apps/web/src/routes/u/[username]/+page.svelte b/apps/web/src/routes/u/[username]/+page.svelte
index d75e485..178dbe8 100644
--- a/apps/web/src/routes/u/[username]/+page.svelte
+++ b/apps/web/src/routes/u/[username]/+page.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import { PLATFORMS, getProfileUrl } from '@devcard/shared';
-  import { onMount } from 'svelte';
+  import {
+    Frown,
+    ArrowLeft,
+    ArrowRight,
+    Zap,
+  } from 'lucide-svelte';
 
   let { data } = $props();
   const profile = data.profile;
@@ -13,307 +18,296 @@
     leetcode: '#FFA116', hackerrank: '#00EA64', discord: '#5865F2',
     telegram: '#26A5E4', email: '#EA4335', portfolio: '#6366F1', custom: '#8B5CF6',
   };
-
-  let mounted = $state(false);
-  onMount(() => {
-    mounted = true;
-  });
 </script>
 
 <svelte:head>
   {#if profile}
-    <title>{profile.displayName} | DevCard</title>
+    <title>{profile.displayName} — DevCard</title>
     <meta name="description" content="{profile.bio || `${profile.displayName}'s developer profiles`}" />
+    <meta property="og:title" content="{profile.displayName} — DevCard" />
+    <meta property="og:description" content="{profile.bio || 'Developer profile card'}" />
   {:else}
-    <title>User Not Found | DevCard</title>
+    <title>User 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}
-    <div class="error-glass glass">
-      <div class="error-emoji">😕</div>
-      <h1>Profile not found</h1>
-      <p>This DevCard has vanished into the digital void.</p>
-      <a href="/" class="btn-primary">Return Home</a>
+{#if error || !profile}
+  <main class="error-page">
+    <div class="error-content">
+      <div class="error-emoji"><Frown size={64} /></div>
+      <h1>User Not Found</h1>
+      <p>This DevCard doesn't exist or has been removed.</p>
+      <a href="/" class="home-link"><ArrowLeft size={18} style="display: inline; vertical-align: middle; margin-right: 4px;" /> Back to DevCard</a>
     </div>
-  {:else}
-    <div class="profile-card glass" style="--accent: {profile.accentColor}">
-      <header class="profile-header">
-        <div class="avatar-wrapper">
-          {#if profile.avatarUrl}
-            <img src={profile.avatarUrl} alt={profile.displayName} class="avatar" />
-          {:else}
-            <div class="avatar avatar-placeholder" style="background: {profile.accentColor}">
-              {profile.displayName.charAt(0).toUpperCase()}
-            </div>
-          {/if}
-          <div class="avatar-glow" style="background: {profile.accentColor}"></div>
-        </div>
-        
+  </main>
+{:else}
+  <main class="profile-page">
+    <div class="profile-card" style="--accent: {profile.accentColor}">
+      <!-- Avatar & Header -->
+      <div class="profile-header">
+        {#if profile.avatarUrl}
+          <img src={profile.avatarUrl} alt={profile.displayName} class="avatar" />
+        {:else}
+          <div class="avatar avatar-placeholder" style="background: {profile.accentColor}">
+            {profile.displayName.charAt(0).toUpperCase()}
+          </div>
+        {/if}
         <h1 class="display-name">{profile.displayName}</h1>
+        {#if profile.pronouns}
+          <span class="pronouns">{profile.pronouns}</span>
+        {/if}
         {#if profile.role}
-          <div class="role-badge">
+          <p class="role">
             {profile.role}{profile.company ? ` @ ${profile.company}` : ''}
-          </div>
+          </p>
         {/if}
-        
         {#if profile.bio}
           <p class="bio">{profile.bio}</p>
         {/if}
-      </header>
+      </div>
 
-      <div class="links-grid">
-        {#each profile.links as link, i}
+      <!-- Platform Links -->
+      <div class="links-section">
+        <p class="links-label">Connect with {profile.displayName.split(' ')[0]}</p>
+        {#each profile.links as link}
           {@const platform = PLATFORMS[link.platform]}
           {@const color = platformColors[link.platform] || '#6366f1'}
           <a
             href={link.url || getProfileUrl(link.platform, link.username)}
             target="_blank"
             rel="noopener noreferrer"
-            class="link-tile glass"
-            style="--delay: {i * 0.1}s"
+            class="platform-tile"
           >
             <div class="tile-icon" style="background: {color}">
-              <span class="platform-initial">{platform?.name.charAt(0) || '?'}</span>
+              {platform?.name.charAt(0) || '?'}
             </div>
-            <div class="tile-content">
-              <span class="platform-name">{platform?.name || link.platform}</span>
-              <span class="username">@{link.username}</span>
+            <div class="tile-info">
+              <span class="tile-name">{platform?.name || link.platform}</span>
+              <span class="tile-username">{link.username}</span>
             </div>
-            <span class="arrow">→</span>
+            <span class="tile-arrow"><ArrowRight size={18} /></span>
           </a>
         {/each}
       </div>
-      
-      <footer class="card-footer">
-        <p>Verified Developer Profile</p>
-        <div class="logo-sm">⚡ DevCard</div>
-      </footer>
     </div>
 
-    <div class="get-your-own">
-      <p>Want a card like this?</p>
-      <a href="/" class="gradient-text">Create your DevCard ⚡</a>
+    <!-- Get DevCard CTA -->
+    <div class="get-devcard">
+      <p>Want your own DevCard?</p>
+      <a href="/" class="cta-link">
+        Get your DevCard <Zap size={18} style="display: inline; vertical-align: middle; margin-left: 2px;" fill="currentColor" />
+      </a>
     </div>
-  {/if}
-</main>
 
-<style>
-  .bg-gradient {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(circle at 50% 0%, var(--accent), transparent 50%),
-                #020617;
-    opacity: 0.15;
-    z-index: -1;
-  }
+    <footer class="footer">
+      Powered by <a href="/">DevCard</a> — Open Source Developer Profiles
+    </footer>
+  </main>
+{/if}
 
-  .profile-container {
-    min-height: 100vh;
+<style>
+  .error-page {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    padding: 4rem 1.5rem;
-    opacity: 0;
-    transform: translateY(20px);
-    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    justify-content: center;
+    min-height: 100vh;
   }
 
-  .profile-container.loaded {
-    opacity: 1;
-    transform: translateY(0);
+  .error-content {
+    text-align: center;
   }
 
-  .profile-card {
-    width: 100%;
+  .error-emoji {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+  }
+
+  .error-content h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+
+  .error-content p {
+    color: var(--text-secondary);
+    margin-bottom: 1.5rem;
+  }
+
+  .home-link {
+    color: var(--primary-light);
+    font-weight: 600;
+  }
+
+  /* Profile Page */
+  .profile-page {
     max-width: 480px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+    min-height: 100vh;
+  }
+
+  .profile-card {
+    background: var(--bg-card);
+    border: 2px solid var(--accent);
     border-radius: var(--radius-xl);
-    padding: 3rem 2rem;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-    position: relative;
     overflow: hidden;
+    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
   }
 
   .profile-header {
     text-align: center;
-    margin-bottom: 3rem;
-  }
-
-  .avatar-wrapper {
-    position: relative;
-    width: 110px;
-    height: 110px;
-    margin: 0 auto 1.5rem;
+    padding: 2.5rem 2rem 1.5rem;
   }
 
   .avatar {
-    width: 100%;
-    height: 100%;
-    border-radius: 35% 65% 70% 30% / 30% 30% 70% 70%;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    margin: 0 auto 1rem;
+    display: block;
     object-fit: cover;
-    border: 3px solid white;
-    position: relative;
-    z-index: 2;
-    animation: morph 8s ease-in-out infinite;
-  }
-
-  @keyframes morph {
-    0%, 100% { border-radius: 35% 65% 70% 30% / 30% 30% 70% 70%; }
-    50% { border-radius: 65% 35% 30% 70% / 70% 70% 30% 30%; }
   }
 
-  .avatar-glow {
-    position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
-    filter: blur(20px);
-    opacity: 0.4;
-    z-index: 1;
-    border-radius: 50%;
+  .avatar-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 2rem;
+    font-weight: 700;
   }
 
   .display-name {
-    font-size: 2.25rem;
+    font-size: 1.75rem;
     font-weight: 800;
-    letter-spacing: -1px;
-    margin-bottom: 0.5rem;
+    letter-spacing: -0.5px;
   }
 
-  .role-badge {
-    display: inline-block;
-    padding: 0.4rem 1rem;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 100px;
+  .pronouns {
+    color: var(--text-muted);
     font-size: 0.85rem;
-    font-weight: 600;
+    margin-top: 0.25rem;
+    display: block;
+  }
+
+  .role {
     color: var(--text-secondary);
-    margin-bottom: 1rem;
+    margin-top: 0.5rem;
+    font-size: 0.95rem;
   }
 
   .bio {
     color: var(--text-secondary);
-    font-size: 1rem;
+    margin-top: 1rem;
+    font-size: 0.9rem;
     line-height: 1.6;
-    max-width: 320px;
-    margin: 0 auto;
   }
 
-  .links-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
+  /* Links */
+  .links-section {
+    padding: 0.5rem 1.5rem 1.5rem;
   }
 
-  .link-tile {
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-    border-radius: var(--radius-lg);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    animation: slideIn 0.5s ease-out forwards;
-    animation-delay: var(--delay);
-    opacity: 0;
+  .links-label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-muted);
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    padding-left: 0.25rem;
   }
 
-  @keyframes slideIn {
-    from { opacity: 0; transform: translateX(-20px); }
-    to { opacity: 1; transform: translateX(0); }
+  .platform-tile {
+    display: flex;
+    align-items: center;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 0.875rem 1rem;
+    margin-bottom: 0.5rem;
+    transition: all 0.2s ease;
+    color: var(--text-primary);
   }
 
-  .link-tile:hover {
-    background: rgba(255, 255, 255, 0.15);
-    transform: scale(1.02) translateX(5px);
+  .platform-tile:hover {
+    border-color: var(--primary);
+    transform: translateX(4px);
+    color: var(--text-primary);
   }
 
   .tile-icon {
-    width: 44px;
-    height: 44px;
-    border-radius: 12px;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
-    font-weight: 800;
-    font-size: 1.2rem;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    font-weight: 700;
+    font-size: 0.9rem;
+    flex-shrink: 0;
   }
 
-  .tile-content {
+  .tile-info {
     flex: 1;
-    margin-left: 1.25rem;
+    margin-left: 0.875rem;
   }
 
-  .platform-name {
+  .tile-name {
     display: block;
-    font-weight: 700;
-    font-size: 1.05rem;
+    font-weight: 600;
+    font-size: 0.95rem;
   }
 
-  .username {
+  .tile-username {
     display: block;
-    font-size: 0.85rem;
     color: var(--text-muted);
+    font-size: 0.8rem;
+    margin-top: 1px;
   }
 
-  .arrow {
-    opacity: 0.3;
-    font-size: 1.2rem;
-    transition: all 0.3s;
-  }
-
-  .link-tile:hover .arrow {
-    opacity: 1;
-    transform: translateX(5px);
-  }
-
-  .card-footer {
-    margin-top: 3rem;
-    padding-top: 2rem;
-    border-top: 1px solid rgba(255,255,255,0.05);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  .tile-arrow {
     color: var(--text-muted);
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
+    font-size: 1.1rem;
+    transition: transform 0.2s;
   }
 
-  .logo-sm {
-    color: var(--text-secondary);
-    font-family: 'Outfit', sans-serif;
+  .platform-tile:hover .tile-arrow {
+    transform: translateX(4px);
+    color: var(--primary-light);
   }
 
-  .get-your-own {
-    margin-top: 3rem;
+  /* CTA */
+  .get-devcard {
     text-align: center;
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background: var(--bg-card);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border);
   }
 
-  .get-your-own p {
-    font-size: 0.9rem;
+  .get-devcard p {
     color: var(--text-muted);
+    font-size: 0.9rem;
     margin-bottom: 0.5rem;
   }
 
-  .get-your-own a {
+  .cta-link {
     font-weight: 700;
-    font-size: 1.1rem;
+    font-size: 1rem;
   }
 
-  .error-glass {
+  .footer {
     text-align: center;
-    padding: 4rem;
-    border-radius: var(--radius-xl);
+    padding: 2rem 0;
+    color: var(--text-muted);
+    font-size: 0.8rem;
   }
 
-  @media (max-width: 480px) {
-    .profile-card { padding: 2rem 1.5rem; }
-    .display-name { font-size: 1.75rem; }
+  @media (max-width: 500px) {
+    .profile-page { padding: 1rem 0.75rem; }
+    .display-name { font-size: 1.5rem; }
   }
 </style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6818604..943d022 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -208,6 +208,9 @@ importers:
       '@devcard/shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      lucide-svelte:
+        specifier: ^1.0.1
+        version: 1.0.1(svelte@5.53.10)
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^7.0.0
@@ -1988,6 +1991,7 @@ packages:
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@vitest/expect@2.1.9':
     resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
@@ -3771,6 +3775,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-svelte@1.0.1:
+    resolution: {integrity: sha512-WvzZgk0pqzgda+AErLvgWxHkfg/+GgUwqKMRHvzt0IqyMdmyEDzDCk3Z+Wo/3y753oIgx8u9Q4eUbWkghFa8Jg==}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5.0.0-next.42
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -9597,6 +9606,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-svelte@1.0.1(svelte@5.53.10):
+    dependencies:
+      svelte: 5.53.10
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5