diff --git a/src/snek/templates/base.html b/src/snek/templates/base.html
index fc9cf38..3f795b5 100644
--- a/src/snek/templates/base.html
+++ b/src/snek/templates/base.html
@@ -10,6 +10,7 @@
     <meta name="keywords" content="snek, chat, molodetz">
     <meta name="color-scheme" content="dark">
 
+    <link rel="stylesheet" href="/sandbox.css" />
     <title>{% block title %}Snek chat by Molodetz{% endblock %}</title>
 
     <script src="/polyfills/Promise.withResolvers.js" type="module"></script>
@@ -34,6 +35,7 @@
 <main>
     {% block main %}
     {% endblock %}
+    {% include "sandbox.html" %}
 </main>
 </body>
 </html>
diff --git a/src/snek/templates/index.html b/src/snek/templates/index.html
index 417b75f..c052947 100644
--- a/src/snek/templates/index.html
+++ b/src/snek/templates/index.html
@@ -1,133 +1,49 @@
-
-                        <!DOCTYPE html>
-                        <html lang="en">
-                        <head>
-                            <meta charset="UTF-8">
-                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-							<style>
-								body {
-									background-color: white; /* Ensure the iframe has a white background */
-								}
-
-								
-    /* Base reset */
-    * { margin:0; padding:0; box-sizing:border-box; }
-    body {
-      font-family: 'Segoe UI',sans-serif;
-      background: #000;
-      color: #eee;
-      line-height:1.5;
-    }
-    a { color: #7ef; text-decoration: none; }
-    a:hover { text-decoration: underline; }
-
-    /* Container */
-    .container { width: 90%; max-width: 960px; margin: auto; padding: 2rem 0; }
-
-    /* Hero */
-    .hero {
-      text-align: center;
-      padding: 4rem 0;
-    }
-    .hero h1 {
-      font-size: 3rem;
-      background: linear-gradient(90deg,#7ef 0%,#0fa 100%);
-      -webkit-background-clip: text;
-      color: transparent;
-    }
-    .hero p {
-      font-size: 1.2rem;
-      margin: 1rem 0 2rem;
-    }
-    .btn {
-      display: inline-block;
-      padding: .75rem 1.5rem;
-      margin: .5rem;
-      background: #0fa;
-      color: #111; 
-      font-weight: bold;
-      border-radius: 4px;
-      transition: background .2s;
-    }
-    .btn:hover { background: #7ef; }
-
-    /* Features grid */
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-      gap: 1.5rem;
-      margin-top: 2rem;
-    }
-    .card {
-      background: #1a1a1a;
-      border-radius: 6px;
-      padding: 1.5rem;
-      box-shadow: 0 2px 6px rgba(0,0,0,0.6);
-    }
-    .card h3 {
-      margin-bottom: .75rem;
-      color: #7ef;
-    }
-    .card ul {
-      list-style: disc inside;
-      margin-top: .5rem;
-    }
-
-    /* Footer */
-    footer {
-      text-align: center;
-      font-size: .9rem;
-      padding: 2rem 0;
-      color: #888;
-    }
-    footer code {
-      background: #222;
-      padding: 2px 4px;
-      border-radius: 3px;
-      color: #7ef;
-    }
-
-    /* Mobile tweaks */
-    @media (max-width: 480px) {
-      .hero h1 { font-size: 2.4rem; }
-      .btn { width: 100%; box-sizing: border-box; text-align:center; }
-    }
-  
-
-							</style>
-                        </head>
-                        <body>
-                            <!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>Snek – The Ultimate Web Community</title>
+  <link rel="stylesheet" href="/sandbox.css" />
   <style>
-    /* Base reset */
     * { margin:0; padding:0; box-sizing:border-box; }
+    html, body { height: 100%; }
+    .card {
+        opacity: 0.7;
+        z-index: 10;
+    }
+    .star {
+        z-index: -10;
+    }
     body {
       font-family: 'Segoe UI',sans-serif;
       background: #111;
       color: #eee;
       line-height:1.5;
+      min-height: 100vh;
+      position: relative;
+      overflow-x: auto;
+      overflow-y: auto;
     }
     a { color: #7ef; text-decoration: none; }
     a:hover { text-decoration: underline; }
-
-    /* Container */
     .container { width: 90%; max-width: 960px; margin: auto; padding: 2rem 0; }
-
-    /* Hero */
     .hero {
       text-align: center;
       padding: 4rem 0;
+      background-image: url('/image/snek_logo_256x256.png');
+      background-size: contain;
+      background-position: left center;
+      background-repeat: no-repeat;
     }
     .hero h1 {
       font-size: 3rem;
       background: linear-gradient(90deg,#7ef 0%,#0fa 100%);
       -webkit-background-clip: text;
-      color: transparent;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      text-fill-color: transparent;
+      margin-bottom: .5rem;
     }
     .hero p {
       font-size: 1.2rem;
@@ -142,10 +58,9 @@
       font-weight: bold;
       border-radius: 4px;
       transition: background .2s;
+      cursor: pointer;
     }
     .btn:hover { background: #7ef; }
-
-    /* Features grid */
     .grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -161,13 +76,28 @@
     .card h3 {
       margin-bottom: .75rem;
       color: #7ef;
+      font-size: 1.25rem;
     }
     .card ul {
       list-style: disc inside;
       margin-top: .5rem;
     }
-
-    /* Footer */
+    section#signup,
+    section#selfhost {
+      text-align:center;
+      margin:4rem 0;
+    }
+    section#selfhost pre {
+      display:inline-block;
+      background:#222;
+      padding:1rem;
+      border-radius:4px;
+      color:#7ef;
+      font-size:1rem;
+      margin: 1rem 0;
+      text-align: left;
+      box-sizing: border-box;
+    }
     footer {
       text-align: center;
       font-size: .9rem;
@@ -180,140 +110,179 @@
       border-radius: 3px;
       color: #7ef;
     }
-
-    /* Mobile tweaks */
+    .star {
+      position: fixed;
+      background: #fff;
+      border-radius: 50%;
+      pointer-events: none;
+      z-index: 0;
+      opacity: .8;
+      animation: star-flicker 4s infinite alternate;
+    }
+    @keyframes star-flicker {
+      0%, 100% { opacity: .7; }
+      50% { opacity: 1; }
+    }
     @media (max-width: 480px) {
       .hero h1 { font-size: 2.4rem; }
       .btn { width: 100%; box-sizing: border-box; text-align:center; }
+      .hero {
+        background-size: 64px 64px;
+        padding-left: 0;
+      }
+    }
+    #starfield {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100vw;
+      height: 100vh;
+      z-index: -2;
+      pointer-events: none;
+      background: transparent;
+      display: block;
     }
   </style>
-  <link rel="stylesheet" href="/static/sandbox.css" />
 </head>
 <body>
-
-  <header class="container hero">
-    <h1>Snek</h1>
-    <p>The Ultimate Web Community for Devs, Testers &amp; AI Enthusiasts</p>
-    <a href="/login.html" class="btn">Login</a>
-    <a href="/register.html" class="btn">Register</a>
-  </header>
-
-  <main class="container">
-
-    <section id="features" class="grid">
-      <div class="card">
-        <h3>File Sharing</h3>
-        <ul>
-          <li>SFTP storage with your Snek credentials</li>
-          <li>WebDAV support – same login</li>
-        </ul>
-      </div>
-
-      <div class="card">
-        <h3>Git Repositories</h3>
-        <ul>
-          <li>Configure repos for any official Git client</li>
-          <li>Instant setup, push &amp; pull</li>
-        </ul>
-      </div>
-
-      <div class="card">
-        <h3>AI Powerhouse</h3>
-        <ul>
-          <li>Chat with free &amp; commercial AIs</li>
-          <li>Generate AI-powered images</li>
-          <li>Build your own AI bots in &lt;5 minutes (copy/paste example)</li>
-        </ul>
-      </div>
-
-      <div class="card">
-        <h3>Dev &amp; Terminal</h3>
-        <ul>
-          <li>Ubuntu web terminal in-browser</li>
-          <li>Full profile &amp; permissions management</li>
-        </ul>
-      </div>
-
-      <div class="card">
-        <h3>Chat &amp; Media</h3>
-        <ul>
-          <li>Upload any file type in chat</li>
-          <li>Rich media support (audio, video, images…)</li>
-          <li>Direct messaging with other users</li>
-        </ul>
-      </div>
-
-      <div class="card">
-        <h3>Privacy &amp; Community</h3>
-        <ul>
-          <li>No logging—never even your IP</li>
-          <li>No email required to sign up</li>
-          <li>Multi-national, open community</li>
-          <li>Hacking encouraged!</li>
-        </ul>
-      </div>
-
-      <div class="card">
-        <h3>Customization &amp; Deployment</h3>
-        <ul>
-          <li>Full layout &amp; theme customization</li>
-          <li>Install as a PWA on your phone</li>
-          <li>Optionally self-host: <code>pip install snek</code>, zero config</li>
-        </ul>
-      </div>
-    </section>
-
-    <section id="signup" style="text-align:center; margin:4rem 0;">
-      <h2>Ready to join?</h2>
-      <p>No email. No logs. Just sign up, pick a username, and dive in!</p>
-      <a href="/register" class="btn">Sign Up Now</a>
-    </section>
-
-    <section id="selfhost" style="text-align:center; margin-bottom:4rem;">
-      <h2>Self-Host in Seconds</h2>
-      <p>Just run:</p>
-      <pre style="display:inline-block; background:#222; padding:1rem; border-radius:4px; color:#7ef;">
+<header class="container hero">
+  <h1>Snek</h1>
+  <p>The Ultimate Web Community for Devs, Testers &amp; AI Enthusiasts</p>
+  <a href="/login.html" class="btn">Login</a>
+  <a href="/register.html" class="btn">Register</a>
+</header>
+<main class="container">
+  <section id="features" class="grid">
+    <div class="card">
+      <h3>File Sharing</h3>
+      <ul>
+        <li>SFTP storage with your Snek credentials</li>
+        <li>WebDAV support – same login</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3>Git Repositories</h3>
+      <ul>
+        <li>Configure repos for any official Git client</li>
+        <li>Instant setup, push &amp; pull</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3>AI Powerhouse</h3>
+      <ul>
+        <li>Chat with free &amp; commercial AIs</li>
+        <li>Generate AI-powered images</li>
+        <li>Build your own AI bots in &lt;5 minutes (copy/paste example)</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3>Dev &amp; Terminal</h3>
+      <ul>
+        <li>Ubuntu web terminal in-browser</li>
+        <li>Full profile &amp; permissions management</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3>Chat &amp; Media</h3>
+      <ul>
+        <li>Upload any file type in chat</li>
+        <li>Rich media support (audio, video, images…)</li>
+        <li>Direct messaging with other users</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3>Privacy &amp; Community</h3>
+      <ul>
+        <li>No logging—never even your IP</li>
+        <li>No email required to sign up</li>
+        <li>Multi-national, open community</li>
+        <li>Hacking encouraged!</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3>Customization &amp; Deployment</h3>
+      <ul>
+        <li>Full layout &amp; theme customization</li>
+        <li>Install as a PWA on your phone</li>
+        <li>Optionally self-host: <code>pip install</code>, zero config</li>
+      </ul>
+    </div>
+  </section>
+  <section id="signup">
+    <h2>Ready to join?</h2>
+    <p>No email. No logs. Just sign up, pick a username, and dive in!</p>
+    <a href="/register" class="btn">Sign Up Now</a>
+  </section>
+  <section id="selfhost" style="margin-bottom:4rem;">
+    <h2>Self-Host in Seconds</h2>
+    <p>Just run:</p>
+    <pre>
 pip install git+https://retoor.molodetz.nl/retoor/snek.git
 snek serve
-      </pre>
-      <p>No configuration required—it's that simple.</p>
-    </section>
-
-  </main>
-
-  <footer>
-    <p>&copy; 2025 Snek – Join our global community of developers, testers &amp; AI enthusiasts.</p>
-  </footer>
-
-							<script>
-                            	
-    // number of stars you want
-    const STAR_COUNT = 200;
-    const body = document.body;
-
-    for (let i = 0; i < STAR_COUNT; i++) {
-      const star = document.createElement('div');
-      star.classList.add('star');
-
-      // random position within the viewport
-      star.style.left  = Math.random() * 100 + '%';
-      star.style.top   = Math.random() * 100 + '%';
-
-      // random size (optional)
-      const size = Math.random() * 2 + 1; // between 1px and 3px
-      star.style.width  = size + 'px';
-      star.style.height = size + 'px';
-
-      // random animation timing for natural flicker
-      const duration = Math.random() * 3 + 2;   // 2s–5s
-      const delay    = Math.random() * 5;       // 0s–5s
-      star.style.animationDuration = duration + 's';
-      star.style.animationDelay    = delay + 's';
-
-      body.appendChild(star);
+    </pre>
+    <p>No configuration required—it's that simple.</p>
+  </section>
+  {% include "sandbox.html" %}
+</main>
+<footer>
+  <p>&copy; 2025 Snek – Join our global community of developers, testers &amp; AI enthusiasts.</p>
+</footer>
+<script>
+(function() {
+  const canvas = document.getElementById('starfield');
+  const ctx = canvas.getContext('2d');
+  let stars = [];
+  let w = window.innerWidth;
+  let h = window.innerHeight;
+  function resize() {
+    w = window.innerWidth;
+    h = window.innerHeight;
+    canvas.width = w;
+    canvas.height = h;
+  }
+  function randomStar() {
+    return {
+      x: Math.random() * w,
+      y: Math.random() * h,
+      r: Math.random() * 0.8 + 0.2,
+      o: Math.random() * 0.5 + 0.5,
+      tw: Math.random() * 100 + 60,
+      phase: Math.random() * 2 * Math.PI
+    };
+  }
+  function createStars(count) {
+    stars = [];
+    for (let i=0; i<count; ++i) stars.push(randomStar());
+  }
+  function drawStars(time) {
+    ctx.clearRect(0, 0, w, h);
+    for (const s of stars) {
+      const twinkle = 0.5 + 0.5 * Math.sin(time/1000 * (1000/s.tw) + s.phase);
+      ctx.globalAlpha = s.o * twinkle;
+      ctx.beginPath();
+      ctx.arc(s.x, s.y, s.r, 0, 2 * Math.PI);
+      ctx.fillStyle = '#fff';
+      ctx.fill();
     }
-							</script>  
-
-	
+    ctx.globalAlpha = 1;
+  }
+  function animate(time) {
+    drawStars(time || 0);
+    requestAnimationFrame(animate);
+  }
+  function updateStars() {
+    const count = Math.floor(w * h / 4500);
+    createStars(count);
+  }
+  window.addEventListener('resize', function() {
+    resize();
+    updateStars();
+  });
+  resize();
+  updateStars();
+  animate();
+})();
+</script>
 </body>
 </html>
+
