diff --git a/portal/templates/portal/landing.html b/portal/templates/portal/landing.html
index f6db6d9..0c00c83 100644
--- a/portal/templates/portal/landing.html
+++ b/portal/templates/portal/landing.html
@@ -1,61 +1,492 @@
 {% extends "portal/base.html" %}
+{% load static %}
 
-{% block title %}rfiles.online - Share Files by Topic{% endblock %}
+{% block title %}rfiles.online — Topic-Based File Sharing{% endblock %}
 
 {% block extra_css %}
 <style>
-    .landing-container { max-width: 500px; margin: 0 auto; padding: 2rem; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
-    .hero { text-align: center; margin-bottom: 2.5rem; }
-    .hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; background: linear-gradient(135deg, var(--primary), #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
-    .hero .tagline { color: var(--text-muted); font-size: 1.1rem; }
-    .create-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; }
-    .create-card h2 { font-size: 1.1rem; margin-bottom: 1.5rem; text-align: center; color: var(--text-muted); }
-    .form-group { margin-bottom: 1.25rem; }
-    .form-group label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem; }
-    .form-group input { width: 100%; padding: 0.875rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 1.1rem; transition: border-color 0.2s; }
-    .form-group input:focus { outline: none; border-color: var(--primary); }
-    .form-group input::placeholder { color: var(--text-muted); }
-    .form-group .slug-preview { font-size: 0.85rem; color: var(--primary); margin-top: 0.5rem; font-family: monospace; text-align: center; }
-    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 8px; font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; width: 100%; }
-    .btn-primary { background: var(--primary); color: white; }
-    .btn-primary:hover { background: var(--primary-hover); }
-    .error-message { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--error); color: var(--error); padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; text-align: center; }
-    .active-topics { margin-top: 2.5rem; text-align: center; }
-    .active-topics h3 { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1rem; }
-    .topic-list { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
-    .topic-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--text); text-decoration: none; font-size: 0.85rem; transition: all 0.2s; }
-    .topic-chip:hover { border-color: var(--primary); background: var(--surface-hover); }
-    .topic-chip .count { font-size: 0.7rem; color: var(--text-muted); }
+    /* ── Hero ─────────────────────────────────────── */
+
+    .landing-hero {
+        text-align: center;
+        padding: 4rem 1.5rem 3rem;
+        max-width: 720px;
+        margin: 0 auto;
+        min-height: calc(100vh - 120px);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+    }
+
+    .hero-badge {
+        display: inline-block;
+        font-size: 0.8rem;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        padding: 5px 14px;
+        border-radius: 999px;
+        border: 1px solid rgba(20, 184, 166, 0.25);
+        background: rgba(20, 184, 166, 0.1);
+        color: #14b8a6;
+        margin-bottom: 1.5rem;
+    }
+
+    .landing-hero h1 {
+        font-size: 3.5rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(135deg, #14b8a6, #7c3aed);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        letter-spacing: -0.02em;
+        font-weight: 800;
+    }
+
+    .hero-tagline {
+        font-size: 1.25rem;
+        color: #94a3b8;
+        margin-bottom: 1rem;
+        line-height: 1.6;
+    }
+
+    .hero-description {
+        font-size: 1rem;
+        color: #64748b;
+        line-height: 1.7;
+        max-width: 560px;
+        margin: 0 auto 2.5rem;
+    }
+
+    .hero-description .hl {
+        color: #00d4ff;
+        font-weight: 600;
+    }
+
+    /* ── Topic Input Group ────────────────────────── */
+
+    .topic-form {
+        max-width: 500px;
+        margin: 0 auto;
+    }
+
+    .error-message {
+        background: rgba(239, 68, 68, 0.1);
+        border: 1px solid var(--error);
+        color: var(--error);
+        padding: 0.75rem 1rem;
+        border-radius: 8px;
+        margin-bottom: 1rem;
+        font-size: 0.9rem;
+        text-align: center;
+    }
+
+    .topic-input-group {
+        display: flex;
+        gap: 0;
+        border-radius: 12px;
+        overflow: hidden;
+        border: 2px solid var(--border);
+        background: rgba(255, 255, 255, 0.04);
+        transition: border-color 0.3s, box-shadow 0.3s;
+    }
+
+    .topic-input-group:focus-within {
+        border-color: rgba(20, 184, 166, 0.5);
+        box-shadow: 0 0 30px rgba(20, 184, 166, 0.08);
+    }
+
+    .topic-input-group input {
+        flex: 1;
+        padding: 14px 18px;
+        background: transparent;
+        border: none;
+        outline: none;
+        color: var(--text);
+        font-size: 1.1rem;
+    }
+
+    .topic-input-group input::placeholder {
+        color: #555;
+    }
+
+    .topic-input-group button {
+        padding: 14px 28px;
+        background: linear-gradient(135deg, var(--primary), #a78bfa);
+        border: none;
+        color: white;
+        font-weight: 700;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: opacity 0.2s;
+        white-space: nowrap;
+    }
+
+    .topic-input-group button:hover {
+        opacity: 0.85;
+    }
+
+    .slug-preview {
+        font-size: 0.85rem;
+        color: var(--primary);
+        margin-top: 0.75rem;
+        font-family: monospace;
+        text-align: center;
+        min-height: 1.25em;
+    }
+
+    /* ── Active Topics ────────────────────────────── */
+
+    .active-topics {
+        margin-top: 2.5rem;
+        text-align: center;
+    }
+
+    .active-topics h3 {
+        font-size: 0.85rem;
+        color: #64748b;
+        margin-bottom: 1rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .topic-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        justify-content: center;
+    }
+
+    .topic-chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.4rem;
+        padding: 0.4rem 0.75rem;
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 16px;
+        color: var(--text);
+        text-decoration: none;
+        font-size: 0.85rem;
+        transition: border-color 0.2s, transform 0.2s;
+    }
+
+    .topic-chip:hover {
+        border-color: rgba(0, 212, 255, 0.35);
+        transform: translateY(-1px);
+    }
+
+    .topic-chip .count {
+        font-size: 0.7rem;
+        color: #64748b;
+    }
+
+    /* ── Section Divider ──────────────────────────── */
+
+    .section-divider {
+        width: 60px;
+        height: 2px;
+        background: linear-gradient(90deg, #14b8a6, #7c3aed);
+        margin: 0 auto 2.5rem;
+        border-radius: 2px;
+    }
+
+    /* ── Features Section ─────────────────────────── */
+
+    .features-section {
+        max-width: 720px;
+        margin: 0 auto;
+        padding: 3rem 1.5rem 4rem;
+        text-align: center;
+    }
+
+    .features-section h2 {
+        font-size: 2rem;
+        margin-bottom: 0.75rem;
+        background: linear-gradient(90deg, #00d4ff, #7c3aed);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .features-section .section-desc {
+        color: #94a3b8;
+        font-size: 1.05rem;
+        line-height: 1.7;
+        max-width: 560px;
+        margin: 0 auto 2.5rem;
+    }
+
+    .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1rem;
+    }
+
+    .feature-card {
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 14px;
+        padding: 2rem 1.25rem;
+        text-align: center;
+        transition: border-color 0.2s, transform 0.2s;
+    }
+
+    .feature-card:hover {
+        border-color: rgba(0, 212, 255, 0.35);
+        transform: translateY(-2px);
+    }
+
+    .feature-icon {
+        font-size: 2rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .feature-title {
+        font-weight: 600;
+        font-size: 1rem;
+        margin-bottom: 0.5rem;
+        color: #e2e8f0;
+    }
+
+    .feature-desc {
+        font-size: 0.85rem;
+        color: #94a3b8;
+        line-height: 1.5;
+    }
+
+    /* ── How It Works ─────────────────────────────── */
+
+    .how-section {
+        max-width: 720px;
+        margin: 0 auto;
+        padding: 3rem 1.5rem 4rem;
+        text-align: center;
+    }
+
+    .how-section h2 {
+        font-size: 2rem;
+        margin-bottom: 2.5rem;
+        background: linear-gradient(90deg, #00d4ff, #7c3aed);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .steps-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1.25rem;
+    }
+
+    .step {
+        text-align: center;
+        padding: 1.5rem 1rem;
+    }
+
+    .step-number {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, var(--primary), #a78bfa);
+        color: white;
+        font-weight: 700;
+        font-size: 1.1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 14px;
+    }
+
+    .step h3 {
+        font-size: 1.05rem;
+        margin-bottom: 0.5rem;
+        color: #e2e8f0;
+    }
+
+    .step p {
+        font-size: 0.88rem;
+        color: #94a3b8;
+        line-height: 1.55;
+    }
+
+    .step .hl {
+        color: #00d4ff;
+        font-weight: 600;
+    }
+
+    /* ── CTA Section ──────────────────────────────── */
+
+    .cta-section {
+        max-width: 720px;
+        margin: 0 auto 3rem;
+        padding: 0 1.5rem;
+    }
+
+    .cta-card {
+        position: relative;
+        border-radius: 20px;
+        border: 2px solid rgba(20, 184, 166, 0.2);
+        background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(124, 58, 237, 0.08));
+        padding: 3.5rem 2.5rem;
+        text-align: center;
+        overflow: hidden;
+    }
+
+    .cta-card::before {
+        content: '';
+        position: absolute;
+        top: -60px;
+        right: -60px;
+        width: 200px;
+        height: 200px;
+        background: rgba(20, 184, 166, 0.15);
+        border-radius: 50%;
+        filter: blur(60px);
+    }
+
+    .cta-card::after {
+        content: '';
+        position: absolute;
+        bottom: -60px;
+        left: -60px;
+        width: 200px;
+        height: 200px;
+        background: rgba(124, 58, 237, 0.15);
+        border-radius: 50%;
+        filter: blur(60px);
+    }
+
+    .cta-card > * {
+        position: relative;
+        z-index: 1;
+    }
+
+    .cta-card h2 {
+        font-size: 1.6rem;
+        color: #fff;
+        margin-bottom: 0.75rem;
+    }
+
+    .cta-card p {
+        color: #94a3b8;
+        font-size: 1.05rem;
+        max-width: 420px;
+        margin: 0 auto 1.5rem;
+        line-height: 1.6;
+    }
+
+    .btn-cta {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 14px 28px;
+        border-radius: 10px;
+        font-size: 1rem;
+        font-weight: 600;
+        text-decoration: none;
+        cursor: pointer;
+        border: none;
+        background: linear-gradient(135deg, var(--primary), #a78bfa);
+        color: white;
+        transition: opacity 0.2s, transform 0.2s;
+    }
+
+    .btn-cta:hover {
+        opacity: 0.85;
+        transform: translateY(-1px);
+    }
+
+    /* ── Ecosystem Footer ─────────────────────────── */
+
+    .ecosystem-footer {
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+        padding: 2rem 1.5rem 3rem;
+        text-align: center;
+    }
+
+    .ecosystem-links {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 12px;
+        font-size: 0.85rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .ecosystem-links .label {
+        font-weight: 500;
+        color: #94a3b8;
+    }
+
+    .ecosystem-links a {
+        color: #64748b;
+        text-decoration: none;
+        transition: color 0.2s;
+    }
+
+    .ecosystem-links a:hover {
+        color: #94a3b8;
+    }
+
+    .ecosystem-links a.current {
+        color: #94a3b8;
+        font-weight: 500;
+    }
+
+    .ecosystem-tagline {
+        font-size: 0.75rem;
+        color: #475569;
+    }
+
+    /* ── Responsive ───────────────────────────────── */
+
+    @media (max-width: 600px) {
+        .landing-hero h1 { font-size: 2.5rem; }
+        .hero-tagline { font-size: 1.05rem; }
+        .topic-input-group { flex-direction: column; }
+        .topic-input-group input { text-align: center; }
+        .topic-input-group button { padding: 14px; }
+        .features-grid { grid-template-columns: 1fr; }
+        .steps-grid { grid-template-columns: 1fr; }
+        .cta-card { padding: 2.5rem 1.5rem; }
+    }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="landing-container">
-    <div class="hero">
-        <h1>rfiles.online</h1>
-        <p class="tagline">Share files by topic</p>
-    </div>
 
-    <div class="create-card">
-        <h2>Enter a topic to start sharing</h2>
+<!-- ── Hero ─────────────────────────────────────── -->
+<div class="landing-hero">
+    <span class="hero-badge">Part of the r* Ecosystem</span>
+    <h1>📁 rfiles</h1>
+    <p class="hero-tagline">Topic-based file sharing. No sign-up required.</p>
+    <p class="hero-description">
+        Create a topic, get a subdomain. Share files with anyone through
+        <span class="hl">topic.rfiles.online</span> &mdash; instant, open,
+        and community-ready.
+    </p>
 
+    <div class="topic-form">
         {% if error %}
         <div class="error-message">{{ error }}</div>
         {% endif %}
 
         <form method="post" action="{% url 'portal:create_topic' %}">
             {% csrf_token %}
-            <div class="form-group">
-                <input type="text" id="topic" name="topic" placeholder="e.g., birthday-photos" pattern="[a-z0-9-]+" required autofocus>
-                <div class="slug-preview" id="slugPreview"></div>
+            <div class="topic-input-group">
+                <input type="text" id="topic" name="topic"
+                       placeholder="Enter a topic name..."
+                       pattern="[a-z0-9-]+" required autofocus>
+                <button type="submit">Go &rarr;</button>
             </div>
-            <button type="submit" class="btn btn-primary">Go</button>
+            <div class="slug-preview" id="slugPreview"></div>
         </form>
     </div>
 
     {% if active_topics %}
     <div class="active-topics">
-        <h3>Active topics</h3>
+        <h3>Active Topics</h3>
         <div class="topic-list">
             {% for topic in active_topics %}
             <a href="https://{{ topic.slug }}.rfiles.online" class="topic-chip">
@@ -67,25 +498,134 @@
     </div>
     {% endif %}
 </div>
+
+<!-- ── Features ────────────────────────────────── -->
+<div class="features-section">
+    <div class="section-divider"></div>
+    <h2>Why rFiles?</h2>
+    <p class="section-desc">
+        Simple, fast, and open file sharing for communities, teams, and events.
+    </p>
+
+    <div class="features-grid">
+        <div class="feature-card">
+            <div class="feature-icon">🔗</div>
+            <div class="feature-title">Instant Subdomains</div>
+            <div class="feature-desc">
+                Every topic gets its own URL. Share
+                <strong>photos.rfiles.online</strong> instead of a random link &mdash;
+                memorable, clean, and always accessible.
+            </div>
+        </div>
+
+        <div class="feature-card">
+            <div class="feature-icon">📤</div>
+            <div class="feature-title">Drag &amp; Drop Upload</div>
+            <div class="feature-desc">
+                Drop files directly into any topic. Images, documents, audio,
+                video &mdash; any file type, with no account needed.
+            </div>
+        </div>
+
+        <div class="feature-card">
+            <div class="feature-icon">🔗</div>
+            <div class="feature-title">Shareable Links</div>
+            <div class="feature-desc">
+                Every upload gets a public share link with optional password
+                protection, expiration dates, and download tracking.
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- ── How It Works ────────────────────────────── -->
+<div class="how-section">
+    <div class="section-divider"></div>
+    <h2>How It Works</h2>
+
+    <div class="steps-grid">
+        <div class="step">
+            <div class="step-number">1</div>
+            <h3>Name Your Topic</h3>
+            <p>
+                Type a topic name like <span class="hl">birthday-photos</span>
+                or <span class="hl">project-docs</span>. It becomes your subdomain instantly.
+            </p>
+        </div>
+
+        <div class="step">
+            <div class="step-number">2</div>
+            <h3>Upload Files</h3>
+            <p>
+                Drag and drop or click to upload. Files are immediately available
+                at your topic URL for anyone to access.
+            </p>
+        </div>
+
+        <div class="step">
+            <div class="step-number">3</div>
+            <h3>Share the Link</h3>
+            <p>
+                Send <span class="hl">topic.rfiles.online</span> to anyone.
+                They can view, download, and upload their own files.
+            </p>
+        </div>
+    </div>
+</div>
+
+<!-- ── CTA ──────────────────────────────────────── -->
+<div class="cta-section">
+    <div class="cta-card">
+        <h2>Ready to Share?</h2>
+        <p>Create a topic and start sharing files in seconds. No sign-up required.</p>
+        <button class="btn-cta" id="ctaButton">Create a Topic &uarr;</button>
+    </div>
+</div>
+
+<!-- ── Ecosystem Footer ────────────────────────── -->
+<div class="ecosystem-footer">
+    <div class="ecosystem-links">
+        <span class="label">r* Ecosystem</span>
+        <a href="https://rspace.online">🌌 rSpace</a>
+        <a href="https://rmaps.online">🗺️ rMaps</a>
+        <a href="https://rnotes.online">📝 rNotes</a>
+        <a href="https://rvote.online">🗳️ rVote</a>
+        <a href="https://rfunds.online">💰 rFunds</a>
+        <a href="https://rtrips.online">✈️ rTrips</a>
+        <a href="https://rcart.online">🛒 rCart</a>
+        <a href="https://rwallet.online">💼 rWallet</a>
+        <a href="https://rfiles.online" class="current">📁 rFiles</a>
+        <a href="https://rnetwork.online">🌐 rNetwork</a>
+    </div>
+    <p class="ecosystem-tagline">Part of the r* ecosystem &mdash; collaborative tools for communities.</p>
+</div>
+
 {% endblock %}
 
 {% block extra_js %}
 <script>
-const topicInput = document.getElementById('topic');
-const slugPreview = document.getElementById('slugPreview');
+    // ── Slug Preview ─────────────────────────────────
+    const topicInput = document.getElementById('topic');
+    const slugPreview = document.getElementById('slugPreview');
 
-function updateSlugPreview() {
-    const slug = topicInput.value.toLowerCase().replace(/[^a-z0-9-]/g, '').replace(/\s+/g, '-');
-    if (slug) {
-        slugPreview.textContent = slug + '.rfiles.online';
-    } else {
-        slugPreview.textContent = '';
+    function updateSlugPreview() {
+        const slug = topicInput.value.toLowerCase().replace(/[^a-z0-9-]/g, '').replace(/\s+/g, '-');
+        if (slug) {
+            slugPreview.textContent = slug + '.rfiles.online';
+        } else {
+            slugPreview.textContent = '';
+        }
     }
-}
 
-topicInput.addEventListener('input', (e) => {
-    e.target.value = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
-    updateSlugPreview();
-});
+    topicInput.addEventListener('input', (e) => {
+        e.target.value = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
+        updateSlugPreview();
+    });
+
+    // ── CTA Scroll-to-Top ────────────────────────────
+    document.getElementById('ctaButton').addEventListener('click', () => {
+        topicInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        setTimeout(() => topicInput.focus(), 500);
+    });
 </script>
 {% endblock %}