diff --git a/html/apps.ejs b/html/apps.ejs
index ed18ca34..1670ab94 100644
--- a/html/apps.ejs
+++ b/html/apps.ejs
@@ -1,138 +1,344 @@
- <!--
-    This Source Code Form is subject to the terms of the GNU General Public License:
-
-    Copyright (C) 2021-2024 PokeTube (https://codeberg.org/Ashley/poketube)
-    
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program. If not, see https://www.gnu.org/licenses/.
+<!--
+  Poke Apps — clean landing with video background
+  License: GNU GPLv3+ (Free Software)
 -->
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Poke Apps</title>
-    <meta content="▶▶ Poke - The Ultimate privacy App!" property=og:title>
-    <meta content="Poke is more then a youtueb front end - see all the stuff in poke!! :3" property=twitter:description>
-    <meta content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884" property="og:image"  />
-    <meta content="summary_large_image" name="twitter:card" />
-    <link rel="manifest" href="/manifest.json">
-    <link href="/css/yt-ukraine.svg?v=3" rel="icon" />
-    <link href="https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet" />
-    <style>
-      @font-face {
-        font-family: "PokeTube Flex";
-        src: url("https://p.poketube.fun/https://cdn.glitch.global/43b6691a-c8db-41d4-921c-8cf6aa0d9108/robotoflex.ttf?v=1668343428681");
-        font-style: normal;
-        font-stretch: 1% 800%;
-        font-display: swap;
-      }
-      body {
-        font-family: "PokeTube flex", sans-serif;
-        margin: 0;
-        display: flex;
-        background-image: radial-gradient(
-          circle,
-          #231638,
-          #2b160e,
-          #09250e,
-          #0f132b
-        );
-        animation: gradient 64s ease infinite;
-        background-size: 400% 400%;
-        min-height: 100vh;
-        align-items: center;
-        justify-content: center;
-      }
-      h1 {
-        margin-top: 0;
-        font-weight: 1000;
-        font-stretch: ultra-expanded;
-        font-family: "Poketube flex";
-        color: #fff;
-      }
-      @keyframes gradient {
-        0% {
-          background-position: 0 50%;
-        }
-        50% {
-          background-position: 100% 50%;
-        }
-        100% {
-          background-position: 0 50%;
-        }
-      }
-      .poke-container {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 16px;
-        padding: 16px;
-        background: #1e1e1e;
-        border-radius: 8px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-      }
-      .poke-header {
-        text-align: center;
-        padding: 16px;
-        background: #212121;
-        color: #fff;
-        border-radius: 8px 8px 0 0;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        grid-column: span 4;
-      }
-      .subtext {
-        color: #b0b0b0;
-        margin-top: 8px;
-      }
-      .poke-app-btn {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 20px;
-        background: #2c2c2c;
-        color: #fff;
-        text-decoration: none;
-        border-radius: 4px;
-        font-size: 14px;
-        transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
-      }
-      .poke-app-btn:hover {
-        background: #404040;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-      }
-      .poke-app-btn i {
-        margin-bottom: 8px;
-        font-size: 24px;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="poke-container">
-      <div class="poke-header">
-        <h1>Moar from Poke</h1>
-        <p class="subtext">Poke is not just a youtube front end - its moar!!</p>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>Poke — Apps</title>
+  <meta name="description" content="Poke is free software: a privacy-first suite with a player, translator, maps, notes, calendar, and more." />
+  <meta name="theme-color" content="#0d0f14" id="themeColorMeta" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Poke — Apps" />
+  <meta property="og:description" content="Explore the Poke suite: watch, translate, map, take notes, and more — all privacy-first." />
+  <link rel="icon" href="/css/yt-ukraine.svg?v=3" />
+  <link href="https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet" />
+
+  <style>
+    :root{
+      --ink:#eef2f8;
+      --muted:#c4cede;
+      --accent:#0ea5e9;
+      --accent-2:#7dd3fc;
+      --glass:rgba(13,15,20,.52);
+      --glass-2:rgba(13,15,20,.64);
+      --ring:0 0 0 3px rgba(14,165,233,.35);
+      --radius:16px;
+      --shadow:0 20px 60px rgba(0,0,0,.35);
+      --maxw:1120px;
+    }
+
+    *{box-sizing:border-box}
+    html,body{height:100%}
+    body{
+      margin:0;
+      color:var(--ink);
+      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
+      background:#0b0e14;
+      overflow-x:hidden;
+    }
+
+    /* === Background video === */
+    .bg{
+      position:fixed; inset:0; z-index:-2;
+      background:#0b0e14;
+    }
+    .bg video{
+      position:absolute; inset:0; width:100%; height:100%;
+      object-fit:cover; object-position:center;
+      filter:saturate(105%) contrast(102%) brightness(70%);
+    }
+    .bg::after{
+      /* soft vignette + gradient tint so text is readable */
+      content:""; position:absolute; inset:0; z-index:1;
+      background:
+        radial-gradient(1200px 700px at 20% 10%, rgba(14,165,233,.18), transparent 60%),
+        linear-gradient(180deg, rgba(7,10,16,.75) 0%, rgba(7,10,16,.35) 40%, rgba(7,10,16,.8) 100%),
+        radial-gradient(80% 60% at 80% 20%, rgba(124,58,237,.12), transparent 60%);
+      pointer-events:none;
+    }
+
+    /* === Layout === */
+    .page{
+      min-height:100dvh;
+      display:flex; flex-direction:column;
+    }
+
+    /* === Top nav === */
+    .nav{
+      position:sticky; top:0; z-index:10;
+      display:flex; align-items:center; justify-content:space-between;
+      padding:12px 18px;
+      max-width:var(--maxw); margin-inline:auto;
+      backdrop-filter: blur(10px);
+      background:linear-gradient(180deg, var(--glass-2), transparent);
+      border-radius:0 0 var(--radius) var(--radius);
+    }
+    .brand{
+      display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px;
+    }
+    .brand img{ width:26px; height:26px; border-radius:6px }
+    .nav .right{ display:flex; align-items:center; gap:10px }
+    .search{
+      display:flex; align-items:center; gap:10px;
+      background:rgba(255,255,255,.06);
+      border:1px solid rgba(255,255,255,.13);
+      border-radius:999px; padding:8px 12px; min-width:260px;
+      transition:background .2s ease, border-color .2s ease;
+    }
+    .search:focus-within{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.24); box-shadow:var(--ring) }
+    .search input{
+      flex:1; background:transparent; border:0; outline:0; color:var(--ink);
+      font-size:.95rem
+    }
+    .icon-btn{
+      display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
+      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
+      color:var(--ink); text-decoration:none; transition:transform .15s ease, background .2s ease, border-color .2s ease;
+    }
+    .icon-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22) }
+
+    /* === Hero === */
+    .hero{
+      max-width:var(--maxw);
+      margin: clamp(18px, 5dvh, 56px) auto 0;
+      padding: clamp(16px, 2.8vw, 28px);
+      display:grid; gap:18px;
+      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
+      border:1px solid rgba(255,255,255,.14);
+      border-radius:var(--radius);
+      box-shadow:var(--shadow);
+      backdrop-filter: blur(8px);
+    }
+    .kicker{
+      display:inline-flex; align-items:center; gap:8px;
+      font-size:12px; letter-spacing:.35px; text-transform:uppercase; color:var(--muted);
+      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
+      padding:8px 12px; border-radius:999px; width:max-content
+    }
+    h1.title{
+      margin:0; line-height:1.04; letter-spacing:.4px;
+      font-weight:1000; font-size:clamp(30px, 5.6vw, 56px);
+      text-wrap:balance;
+    }
+    .subtitle{
+      margin:0; color:var(--muted); max-width:70ch; font-size:clamp(15px, 1.7vw, 18px);
+    }
+    .cta-row{
+      display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;
+    }
+    .cta{
+      display:inline-flex; align-items:center; gap:10px; text-decoration:none;
+      padding:12px 16px; border-radius:12px; font-weight:800; letter-spacing:.2px;
+      border:1px solid rgba(255,255,255,.22);
+      background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, #fff), color-mix(in oklab, var(--accent-2) 88%, #fff));
+      color:#0b0f14;
+      transition:transform .15s ease, filter .15s ease;
+    }
+    .cta:hover{ transform:translateY(-2px); filter:saturate(1.04) }
+    .ghost{
+      background:rgba(255,255,255,.06); color:var(--ink);
+      border:1px solid rgba(255,255,255,.18); font-weight:700;
+    }
+
+    /* === App grid === */
+    .apps{
+      max-width:var(--maxw);
+      margin: 18px auto clamp(24px, 6dvh, 64px);
+      padding: clamp(10px, 2.4vw, 18px);
+      display:grid; gap:14px;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    }
+    .card{
+      position:relative;
+      display:flex; flex-direction:column; gap:8px;
+      text-decoration:none; color:var(--ink);
+      background:rgba(255,255,255,.06);
+      border:1px solid rgba(255,255,255,.14);
+      border-radius:var(--radius);
+      padding:16px;
+      transition:transform .15s ease, background .2s ease, border-color .2s ease;
+      outline: none;
+      min-height:120px;
+      backdrop-filter: blur(6px);
+    }
+    .card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24) }
+    .card:focus-visible{ box-shadow:var(--ring) }
+
+    .row{ display:flex; align-items:center; gap:12px }
+    .badge{
+      display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
+      background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
+      border:1px solid rgba(255,255,255,.22);
+      color:var(--ink); font-size:20px
+    }
+    .name{ font-weight:800; letter-spacing:.2px }
+    .hint{ color:var(--muted); font-size:.9rem }
+    .ext{ position:absolute; right:12px; top:12px; color:var(--muted); font-size:.85rem }
+
+    /* === Footer === */
+    footer{
+      max-width:var(--maxw); margin: 0 auto 28px; padding:12px 18px;
+      color:var(--muted); text-align:center;
+      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
+      border:1px solid rgba(255,255,255,.12);
+      border-radius:var(--radius);
+      backdrop-filter: blur(6px);
+    }
+
+    /* Mobile tweaks */
+    @media (max-width:720px){
+      .nav{ padding-inline:12px }
+      .search{ min-width:0; width:min(58vw, 300px) }
+      .cta-row{ gap:8px }
+      .hero{ padding:16px }
+    }
+
+    /* Respect reduced motion */
+    @media (prefers-reduced-motion: reduce){
+      *{animation:none !important; transition:none !important}
+      .bg video{ filter:brightness(.85) }
+    }
+  </style>
+</head>
+<body>
+   <div class="bg" aria-hidden="true">
+    <video id="bgvid" autoplay muted loop playsinline preload="auto" poster="/bg-poster.jpg">
+      <source src="/bg-480.webm" type="video/webm" />
+    </video>
+  </div>
+
+  <div class="page">
+    <!-- Top navigation -->
+    <div class="nav" role="navigation" aria-label="Top">
+      <div class="brand">
+        <img src="/css/yt-ukraine.svg?v=3" alt="" />
+        <span>Poke</span>
       </div>
 
-      <a href="/game-hub" class="poke-app-btn"><i class="fa-light fa-gamepad"></i>Games</a>
-      <!-- <a href="/search" class="poke-app-btn"><i class="fa-light fa-search"></i>Search</a> -->
-      <a href="/translate" class="poke-app-btn"><i class="fa-light fa-language"></i>Translate</a>
-      <a href="/map" class="poke-app-btn"><i class="fa-light fa-map-marker-alt"></i>Maps</a>
-      <a href="https://social.poketube.fun" class="poke-app-btn"><i class="fa-brands fa-mastodon"></i>Fediverse</a>
-      <a href="/calendar" class="poke-app-btn"><i class="fa-light fa-calendar"></i>Calendar</a>
-      <a href="/app" class="poke-app-btn"><i class="fa-light fa-play"></i>Watch</a>
-      <a href="/notepad" class="poke-app-btn"><i class="fa-light fa-memo-pad"></i>Pokepad!</a>
-      <a href="/settings" class="poke-app-btn"><i class="fa-light fa-cogs"></i>Settings</a>
+      <div class="right">
+  <form class="search" action="/search" method="get" role="search">
+    <i class="fa-regular fa-magnifying-glass" aria-hidden="true"></i>
+    <input type="search" name="query" placeholder="Search videos..." required />
+    <kbd style="opacity:.7;font-size:.8rem">/</kbd>
+  </form>
+  <a class="icon-btn" href="/settings" aria-label="Settings"><i class="fa-regular fa-gear"></i></a>
+  <a class="icon-btn" href="/account" aria-label="Account"><i class="fa-regular fa-user"></i></a>
+</div>
+
     </div>
-  </body>
+
+    <!-- Hero -->
+    <section class="hero" aria-labelledby="title">
+      <span class="kicker"><i class="fa-regular fa-shield"></i> Free software · Privacy-first</span>
+      <h1 id="title" class="title">Poke Apps</h1>
+      <p class="subtitle">Youtube Front-end, translator, maps, notes, calendar, and moar! and they are cool as heck!!</p>
+      <div class="cta-row">
+        <a class="cta" href="/app"><i class="fa-regular fa-compass"></i>Discover!</a>
+        <a class="cta ghost" href="#apps"><i class="fa-regular fa-grid-2"></i> Browse Apps</a>
+      </div>
+    </section>
+
+    <!-- Apps grid -->
+    <nav id="apps" class="apps" aria-label="Apps">
+      <a class="card" href="/game-hub" aria-label="Games">
+        <div class="row"><span class="badge"><i class="fa-light fa-gamepad"></i></span><span class="name">Games</span></div>
+        <span class="hint">Amazing games :3</span>
+      </a>
+
+      <a class="card" href="/translate" aria-label="Translate">
+        <div class="row"><span class="badge"><i class="fa-light fa-language"></i></span><span class="name">Translate</span></div>
+        <span class="hint">fast & accurate and free software translation!!</span>
+      </a>
+
+      <a class="card" href="/map" aria-label="Maps">
+        <div class="row"><span class="badge"><i class="fa-light fa-map-location-dot"></i></span><span class="name">Maps</span></div>
+        <span class="hint">A good map-view for web!</span>
+      </a>
+
+      <a class="card" href="https://social.poketube.fun" target="_blank" rel="noopener" aria-label="Fediverse (opens in new tab)">
+        <span class="ext"><i class="fa-regular fa-arrow-up-right-from-square"></i></span>
+        <div class="row"><span class="badge"><i class="fa-brands fa-mastodon"></i></span><span class="name">Fediverse</span></div>
+        <span class="hint">Poke Social community</span>
+      </a>
+
+      <a class="card" href="/calendar" aria-label="Calendar">
+        <div class="row"><span class="badge"><i class="fa-light fa-calendar"></i></span><span class="name">Calendar</span></div>
+        <span class="hint">NO javascript!!! calender</span>
+      </a>
+
+      <a class="card" href="/notepad" aria-label="Pokepad">
+        <div class="row"><span class="badge"><i class="fa-light fa-memo-pad"></i></span><span class="name">Pokepad!</span></div>
+        <span class="hint">End to End encrypted notepad!</span>
+      </a>
+
+      <a class="card" href="/app" aria-label="Watch">
+        <div class="row"><span class="badge"><i class="fa-light fa-play"></i></span><span class="name">Watch</span></div>
+        <span class="hint">the biggest part of poke!</span>
+      </a>
+
+      <a class="card" href="/settings" aria-label="Settings">
+        <div class="row"><span class="badge"><i class="fa-light fa-gear"></i></span><span class="name">Settings</span></div>
+        <span class="hint">Tune everything</span>
+      </a>
+    </nav>
+ 
+  </div>
+
+  <script>
+    // Respect reduced motion  silent autoplay on mobile
+    (function(){
+      const meta = document.getElementById('themeColorMeta');
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+      const setBar = () => meta && (meta.content = mql.matches ? '#0b0e14' : '#0b0e14');
+      setBar(); mql.addEventListener?.('change', setBar);
+    })();
+
+    (function(){
+      const v = document.getElementById('bgvid');
+      if(!v) return;
+      const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if(reduce){ v.pause(); v.removeAttribute('autoplay'); v.currentTime = 0; }
+       v.muted = true; v.playsInline = true; v.setAttribute('playsinline','');
+      const tryPlay = () => v.play().catch(()=>{/* ignore */});
+      document.addEventListener('visibilitychange', ()=>{ if(!document.hidden) tryPlay(); });
+      window.addEventListener('pointerdown', tryPlay, {once:true, passive:true});
+      tryPlay();
+    })();
+
+    // Keyboard focus order for cards
+    (function(){
+      const cards = Array.from(document.querySelectorAll('.card'));
+      cards.forEach(c => c.tabIndex = 0);
+      const gridCols = () => getComputedStyle(document.querySelector('.apps')).gridTemplateColumns.split(' ').length;
+      cards.forEach((el, idx) => {
+        el.addEventListener('keydown', e=>{
+          const cols = gridCols();
+          let t=null;
+          if(e.key==='ArrowRight') t=(idx+1)%cards.length;
+          else if(e.key==='ArrowLeft') t=(idx-1+cards.length)%cards.length;
+          else if(e.key==='ArrowDown') t=Math.min(cards.length-1, idx+cols);
+          else if(e.key==='ArrowUp') t=Math.max(0, idx-cols);
+          else if(e.key==='Home') t=0;
+          else if(e.key==='End') t=cards.length-1;
+          else if(e.key==='Enter'||e.key===' '){ e.preventDefault(); el.click(); return; }
+          if(t!=null){ e.preventDefault(); cards[t].focus(); }
+        }, {passive:false});
+      });
+    })();
+
+    // Quick "/" to focus search
+    (function(){
+      const input = document.querySelector('.search input');
+      if(!input) return;
+      window.addEventListener('keydown', e=>{
+        if (e.key === '/' && document.activeElement !== input){
+          e.preventDefault(); input.focus();
+        }
+      });
+    })();
+  </script>
+</body>
 </html>
