From d46b54bd6a547e85000f0d74867f840ba8e6139a Mon Sep 17 00:00:00 2001
From: Zsolt Tasnadi <rastasi@gmail.com>
Date: Wed, 6 May 2026 22:24:22 +0200
Subject: [PATCH] win 9x style frontend

---
 apps/frontend/src/layout/AppLayout.vue        | 109 +++-
 apps/frontend/src/page/blog/BlogIndexPage.vue | 205 +++----
 apps/frontend/src/page/blog/BlogShowPage.vue  | 129 ++--
 .../src/page/catalog/CatalogIndexPage.vue     | 148 +++--
 .../src/page/catalog/CatalogShowPage.vue      | 369 ++++++-----
 apps/frontend/src/page/code/CodeIndexPage.vue | 195 +++---
 .../frontend/src/page/contact/ContactPage.vue | 258 ++++----
 apps/frontend/src/page/home/HomePage.vue      | 573 ++++++++++--------
 .../src/page/howtos/HowtosIndexPage.vue       | 251 ++++----
 apps/frontend/src/page/team/TeamIndexPage.vue | 100 ++-
 apps/frontend/src/styles/global.css           | 501 +++++++++++++--
 11 files changed, 1766 insertions(+), 1072 deletions(-)

diff --git a/apps/frontend/src/layout/AppLayout.vue b/apps/frontend/src/layout/AppLayout.vue
index cb6f740..da1f9fc 100644
--- a/apps/frontend/src/layout/AppLayout.vue
+++ b/apps/frontend/src/layout/AppLayout.vue
@@ -1,39 +1,40 @@
 <template>
-  <header class="bg-gray-800 text-white p-4 flex justify-between items-center relative">
-    <RouterLink to="/" class="text-xl font-bold">Teletype Games</RouterLink>
+  <div class="win-app">
+    <header class="win-menubar">
+      <span class="win-menu-logo">📟 Teletype Games</span>
 
-    <!-- Desktop Navigation -->
-    <nav class="hidden md:flex space-x-4">
-      <RouterLink to="/" class="p-2 hover:text-purple-300 transition-colors duration-200">Home</RouterLink>
-      <RouterLink to="/catalog" class="p-2 hover:text-purple-300 transition-colors duration-200">Catalog</RouterLink>
-      <RouterLink to="/blog" class="p-2 hover:text-purple-300 transition-colors duration-200">Blog</RouterLink>
-      <RouterLink to="/howtos" class="p-2 hover:text-purple-300 transition-colors duration-200">How-tos</RouterLink>
-      <RouterLink to="/code" class="p-2 hover:text-purple-300 transition-colors duration-200">Code</RouterLink>
-      <RouterLink to="/team" class="p-2 hover:text-purple-300 transition-colors duration-200">Team</RouterLink>
-      <RouterLink to="/contact" class="p-2 hover:text-purple-300 transition-colors duration-200">Contact us</RouterLink>
+      <nav class="win-menu-items hidden md:flex">
+        <RouterLink to="/" class="win-menu-item">Home</RouterLink>
+        <RouterLink to="/catalog" class="win-menu-item">Catalog</RouterLink>
+        <RouterLink to="/blog" class="win-menu-item">Blog</RouterLink>
+        <RouterLink to="/howtos" class="win-menu-item">How-tos</RouterLink>
+        <RouterLink to="/code" class="win-menu-item">Code</RouterLink>
+        <RouterLink to="/team" class="win-menu-item">Team</RouterLink>
+        <RouterLink to="/contact" class="win-menu-item">Contact</RouterLink>
+      </nav>
+
+      <button @click="toggleMenu" class="md:hidden win-btn mobile-menu-toggle">☰ Menu</button>
+    </header>
+
+    <nav v-show="menuOpen" class="md:hidden win-mobile-menu">
+      <RouterLink to="/" class="win-mobile-item">Home</RouterLink>
+      <RouterLink to="/catalog" class="win-mobile-item">Catalog</RouterLink>
+      <RouterLink to="/blog" class="win-mobile-item">Blog</RouterLink>
+      <RouterLink to="/howtos" class="win-mobile-item">How-tos</RouterLink>
+      <RouterLink to="/code" class="win-mobile-item">Code</RouterLink>
+      <RouterLink to="/team" class="win-mobile-item">Team</RouterLink>
+      <RouterLink to="/contact" class="win-mobile-item">Contact</RouterLink>
     </nav>
 
-    <!-- Hamburger Button (Mobile only) -->
-    <button @click="toggleMenu" class="md:hidden p-2 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md">
-      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-      </svg>
-    </button>
+    <main class="win-main">
+      <slot />
+    </main>
 
-    <!-- Mobile Navigation -->
-    <nav v-show="menuOpen" class="md:hidden absolute top-full left-0 w-full bg-gray-800 flex flex-col items-center py-4 space-y-2 z-50">
-      <RouterLink to="/" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Home</RouterLink>
-      <RouterLink to="/catalog" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Catalog</RouterLink>
-      <RouterLink to="/blog" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Blog</RouterLink>
-      <RouterLink to="/howtos" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">How-tos</RouterLink>
-      <RouterLink to="/code" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Code</RouterLink>
-      <RouterLink to="/team" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Team</RouterLink>
-      <RouterLink to="/contact" class="block p-2 w-full text-center hover:bg-gray-700 transition-colors duration-200">Contact us</RouterLink>
-    </nav>
-  </header>
-  <main>
-    <slot />
-  </main>
+    <footer class="win-statusbar">
+      <div class="win-status-panel">Teletype Games &copy; 2024 — Independent Game Development Community</div>
+      <div class="win-status-panel" style="flex: 0; white-space: nowrap;">Open Source</div>
+    </footer>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -51,3 +52,49 @@ watch(() => route.path, () => {
   menuOpen.value = false
 })
 </script>
+
+<style scoped>
+.win-app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
+  background: #D4D0C8;
+}
+
+.win-main {
+  flex: 1;
+}
+
+.mobile-menu-toggle {
+  margin-left: auto;
+  margin-right: 4px;
+  min-width: auto;
+  padding: 2px 8px;
+  font-size: 11px;
+}
+
+.win-mobile-menu {
+  background: #D4D0C8;
+  border-bottom: 1px solid #808080;
+  box-shadow: 0 1px 0 #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.win-mobile-item {
+  padding: 5px 12px;
+  color: #000;
+  text-decoration: none;
+  display: block;
+  border-bottom: 1px solid #C0BDB8;
+  font-size: 12px;
+  font-family: Tahoma, Arial, sans-serif;
+}
+
+.win-mobile-item:hover,
+.win-mobile-item.router-link-exact-active {
+  background: #000080;
+  color: #fff;
+}
+</style>
diff --git a/apps/frontend/src/page/blog/BlogIndexPage.vue b/apps/frontend/src/page/blog/BlogIndexPage.vue
index 2820a5a..f620693 100644
--- a/apps/frontend/src/page/blog/BlogIndexPage.vue
+++ b/apps/frontend/src/page/blog/BlogIndexPage.vue
@@ -1,75 +1,58 @@
 <template>
-  <div class="blog-container">
-    <header class="blog-header">
-      <div class="blog-header-decor">
-        <div class="hero-decor-blob -top-24 -left-24 h-96 w-96 bg-purple-600"></div>
-        <div class="hero-decor-blob -bottom-24 -right-24 h-96 w-96 bg-blue-600"></div>
-      </div>
-
-      <div class="hero-container">
-        <div class="hero-badge">Community Stories</div>
-        <h1 class="hero-title">
-          Developer <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">Blog</span>
-        </h1>
-        <p class="hero-subtitle mb-10">
-          News, updates, and behind-the-scenes stories from the Teletype Games community.
-        </p>
-      </div>
-    </header>
-
-    <main class="blog-main">
-      <div v-if="error" class="error-banner" role="alert">
-        <span class="text-2xl">⚠️</span>
-        <div>
-          <h3 class="error-banner-title">Failed to connect to Wiki</h3>
-          <p class="error-banner-desc">{{ error }}</p>
+  <div class="main-container">
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">📰 Developer Blog</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
         </div>
       </div>
 
-      <div v-else-if="!loading && blogPages.length === 0" class="empty-state">
-        <div class="empty-state-icon">📭</div>
-        <h2 class="empty-state-title">No blog posts found</h2>
-        <p class="empty-state-desc">We haven't published any blog posts yet. Check back soon!</p>
+      <div class="win-body" style="padding: 4px 8px 6px;">
+        <p style="margin: 0 0 2px; font-size: 12px; color: #404040;">
+          News, updates, and behind-the-scenes stories from the Teletype Games community.
+        </p>
       </div>
 
-      <div v-else class="blog-posts-list">
-        <article v-for="page in blogPages" :key="page.id" class="blog-post-card">
-          <div class="blog-post-content">
-            <div class="blog-post-meta">
-              <div class="flex items-center gap-4">
-                <div class="blog-post-timestamp">
-                  <span v-if="isNew(page.createdAt)" class="new-post-badge">
-                    <span class="new-post-dot"></span>
-                    New Post
-                  </span>
-                  <span>{{ formatDateTime(page.createdAt) }}</span>
-                </div>
-              </div>
-            </div>
+      <div class="win-body" style="padding: 0;">
 
-            <h2 class="blog-post-title">
-              <RouterLink :to="getPermalink(page.path)" class="hover:text-indigo-600 transition-colors">
+        <div v-if="error" class="win-notice-error" style="margin: 8px;">
+          <span>⚠</span>
+          <div>
+            <strong>Failed to connect to Wiki</strong><br>
+            <span style="font-size: 11px;">{{ error }}</span>
+          </div>
+        </div>
+
+        <div v-else-if="!loading && blogPages.length === 0" class="empty-state">
+          <div style="font-size: 32px; margin-bottom: 8px;">📭</div>
+          <div style="font-weight: bold; margin-bottom: 4px;">No blog posts found</div>
+          <div style="font-size: 11px; color: #404040;">We haven't published any blog posts yet. Check back soon!</div>
+        </div>
+
+        <div v-else>
+          <article v-for="page in blogPages" :key="page.id" class="blog-post-row">
+            <div class="blog-post-inner">
+              <div class="blog-post-meta-row">
+                <span v-if="isNew(page.createdAt)" class="new-badge">★ New</span>
+                <span class="blog-post-date">{{ formatDateTime(page.createdAt) }}</span>
+              </div>
+              <RouterLink :to="getPermalink(page.path)" class="blog-post-title-link">
                 {{ page.title }}
               </RouterLink>
-            </h2>
-
-            <div class="blog-post-preview">
-              <p v-if="page.description" class="blog-post-description">{{ page.description }}</p>
-              <p v-if="page.content" class="blog-post-body">{{ getCleanPreview(page.content) }}</p>
+              <div v-if="page.description" class="blog-post-desc">{{ page.description }}</div>
+              <div v-else-if="page.content" class="blog-post-desc">{{ getCleanPreview(page.content) }}</div>
+              <div class="blog-post-footer">
+                <RouterLink :to="getPermalink(page.path)" class="win-btn win-btn-sm">Read more →</RouterLink>
+              </div>
             </div>
+          </article>
+        </div>
 
-            <div class="mt-6">
-              <RouterLink :to="getPermalink(page.path)" class="read-more-btn">
-                Read more
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
-                </svg>
-              </RouterLink>
-            </div>
-          </div>
-        </article>
       </div>
-    </main>
+    </div>
   </div>
 </template>
 
@@ -95,7 +78,7 @@ function getPermalink(path: string): string {
 
 function getCleanPreview(content: string): string {
   if (!content) return ''
-  return content.replace(/[#*`_\[\]()]/g, '').trim().slice(0, 300) + '...'
+  return content.replace(/[#*`_\[\]()]/g, '').trim().slice(0, 250) + '...'
 }
 
 onMounted(async () => {
@@ -110,69 +93,61 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.blog-container {
-  @apply bg-gray-50 min-h-screen pb-20;
-}
-.blog-header {
-  @apply relative overflow-hidden py-24 text-white text-center bg-indigo-900;
-}
-.blog-header-decor {
-  @apply absolute inset-0 opacity-30;
-}
-.blog-main {
-  @apply max-w-5xl mx-auto px-4 md:px-8 -mt-12 relative z-10;
-}
-.banner-base {
-  @apply max-w-7xl mx-auto border-l-4 p-6 rounded-r-xl shadow-lg mb-12 flex items-start gap-4;
-}
-.error-banner { @apply banner-base bg-red-50 border-red-500; }
-.error-banner-title { @apply text-red-800 font-bold text-lg; }
-.error-banner-desc { @apply text-red-700 mt-1; }
 .empty-state {
-  @apply max-w-7xl mx-auto bg-white rounded-2xl shadow-xl p-12 text-center border border-gray-100;
+  text-align: center;
+  padding: 24px;
+  color: #404040;
+  font-size: 12px;
 }
-.empty-state-icon { @apply text-6xl mb-4; }
-.empty-state-title { @apply text-2xl font-bold text-gray-900 mb-2; }
-.empty-state-desc { @apply text-gray-500 max-w-md mx-auto; }
-.blog-posts-list {
-  @apply flex flex-col gap-12;
+.blog-post-row {
+  border-bottom: 1px solid #D0D0D0;
 }
-.blog-post-card {
-  @apply bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden;
+.blog-post-row:last-child { border-bottom: none; }
+.blog-post-inner {
+  padding: 8px 10px;
 }
-.blog-post-content {
-  @apply p-6 md:p-10;
+.blog-post-row:hover .blog-post-inner {
+  background: #EEF0F8;
 }
-.blog-post-meta {
-  @apply flex items-center justify-between mb-4;
+.blog-post-meta-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 3px;
 }
-.blog-post-timestamp {
-  @apply flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-gray-400;
+.new-badge {
+  font-size: 10px;
+  font-weight: bold;
+  background: #C8F0C8;
+  color: #007000;
+  border: 1px solid #009000;
+  padding: 0 4px;
 }
-.new-post-badge {
-  @apply flex items-center gap-1 text-green-600 bg-green-50 px-2 py-0.5 rounded-full border border-green-100;
+.blog-post-date {
+  font-size: 11px;
+  color: #808080;
+  font-family: "Courier New", Courier, monospace;
 }
-.new-post-dot {
-  @apply w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse;
+.blog-post-title-link {
+  display: block;
+  font-size: 14px;
+  font-weight: bold;
+  color: #000080;
+  text-decoration: underline;
+  margin-bottom: 4px;
+  line-height: 1.3;
 }
-.blog-post-title {
-  @apply text-2xl md:text-3xl font-black text-gray-900 mb-4 leading-tight;
+.blog-post-title-link:hover { color: #0000FF; }
+.blog-post-desc {
+  font-size: 12px;
+  color: #404040;
+  margin-bottom: 8px;
+  line-height: 1.5;
+  max-height: 4em;
+  overflow: hidden;
 }
-.blog-post-preview {
-  @apply relative overflow-hidden;
-  max-height: 8rem;
-}
-.blog-post-preview::after {
-  content: "";
-  @apply absolute bottom-0 left-0 w-full h-16 bg-gradient-to-b from-transparent to-white pointer-events-none;
-}
-.blog-post-description {
-  @apply text-lg text-gray-800 font-bold mb-2 leading-relaxed;
-}
-.blog-post-body {
-  @apply text-base text-gray-500 font-medium leading-relaxed;
-}
-.read-more-btn {
-  @apply inline-flex items-center text-indigo-600 font-bold hover:text-indigo-800 transition-colors;
+.blog-post-footer {
+  display: flex;
+  justify-content: flex-end;
 }
 </style>
diff --git a/apps/frontend/src/page/blog/BlogShowPage.vue b/apps/frontend/src/page/blog/BlogShowPage.vue
index 8966a6c..8ae5938 100644
--- a/apps/frontend/src/page/blog/BlogShowPage.vue
+++ b/apps/frontend/src/page/blog/BlogShowPage.vue
@@ -1,41 +1,48 @@
 <template>
-  <div class="blog-container">
-    <header class="blog-header">
-      <div class="blog-header-decor">
-        <div class="hero-decor-blob -top-24 -left-24 h-96 w-96 bg-purple-600"></div>
-        <div class="hero-decor-blob -bottom-24 -right-24 h-96 w-96 bg-blue-600"></div>
-      </div>
-
-      <div class="post-hero-container">
-        <RouterLink to="/blog" class="back-link">← Back to Blog</RouterLink>
-        <template v-if="pageContent">
-          <h1 class="hero-title mt-4">{{ pageContent.title }}</h1>
-          <p class="hero-subtitle mb-4">{{ pageContent.description }}</p>
-          <div class="blog-post-timestamp text-indigo-200">{{ formatDateTime(pageContent.createdAt) }}</div>
-        </template>
-      </div>
-    </header>
-
-    <main class="blog-main">
-      <div v-if="error" class="error-banner" role="alert">
-        <span class="text-2xl">⚠️</span>
-        <div>
-          <h3 class="error-banner-title">Error</h3>
-          <p class="error-banner-desc">{{ error }}</p>
+  <div class="main-container">
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">📰 {{ pageContent ? pageContent.title : 'Blog Post' }}</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
         </div>
       </div>
 
-      <article v-else-if="pageContent" class="blog-post-card">
-        <div class="blog-post-content">
-          <div v-if="pageContent.render" class="wiki-content max-w-none text-gray-700 leading-relaxed" v-html="pageContent.render" />
-          <div v-else class="blog-post-fallback">No content available for this post.</div>
-        </div>
-      </article>
-
-      <div v-else-if="loading" class="blog-post-card">
-        <div class="blog-post-content text-center text-gray-400 py-12">Loading...</div>
+      <div class="win-toolbar">
+        <RouterLink to="/blog" class="win-btn win-btn-sm">← Back to Blog</RouterLink>
+        <span v-if="pageContent" class="post-date">
+          {{ formatDateTime(pageContent.createdAt) }}
+        </span>
       </div>
-    </main>
+
+      <div class="win-body" style="padding: 0;">
+
+        <div v-if="error" class="win-notice-error" style="margin: 8px;">
+          <span>⚠</span>
+          <div><strong>Error</strong><br><span style="font-size: 11px;">{{ error }}</span></div>
+        </div>
+
+        <article v-else-if="pageContent" class="post-content">
+          <div v-if="pageContent.description" class="post-description">
+            {{ pageContent.description }}
+          </div>
+          <hr class="win-separator" style="margin: 8px 0;">
+          <div
+            v-if="pageContent.render"
+            class="wiki-content"
+            v-html="pageContent.render"
+          />
+          <div v-else class="post-empty">No content available for this post.</div>
+        </article>
+
+        <div v-else-if="loading" class="post-loading">
+          Loading...
+        </div>
+
+      </div>
+    </div>
   </div>
 </template>
 
@@ -69,42 +76,32 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.blog-container {
-  @apply bg-gray-50 min-h-screen pb-20;
+.post-date {
+  font-size: 11px;
+  color: #404040;
+  font-family: "Courier New", Courier, monospace;
+  margin-left: 8px;
 }
-.blog-header {
-  @apply relative overflow-hidden py-24 text-white text-center bg-indigo-900;
+.post-content {
+  padding: 10px 12px;
 }
-.blog-header-decor {
-  @apply absolute inset-0 opacity-30;
+.post-description {
+  font-size: 13px;
+  font-weight: bold;
+  color: #000080;
+  margin-bottom: 8px;
+  line-height: 1.4;
 }
-.post-hero-container {
-  @apply relative z-10 max-w-4xl mx-auto px-4;
+.post-empty {
+  padding: 16px;
+  text-align: center;
+  color: #808080;
+  font-size: 12px;
 }
-.back-link {
-  @apply inline-block text-indigo-300 hover:text-white transition-colors font-medium;
+.post-loading {
+  padding: 16px;
+  text-align: center;
+  color: #404040;
+  font-size: 12px;
 }
-.hero-title {
-  @apply text-4xl md:text-5xl font-black mb-4 leading-tight;
-}
-.hero-subtitle {
-  @apply text-xl text-indigo-100 font-medium;
-}
-.blog-post-timestamp {
-  @apply text-sm font-semibold uppercase tracking-wider;
-}
-.blog-main {
-  @apply max-w-4xl mx-auto px-4 md:px-8 -mt-12 relative z-10;
-}
-.blog-post-card {
-  @apply bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden;
-}
-.blog-post-content {
-  @apply p-6 md:p-12;
-}
-.error-banner {
-  @apply max-w-7xl mx-auto bg-red-50 border-l-4 border-red-500 p-6 rounded-r-xl shadow-lg mb-12 flex items-start gap-4;
-}
-.error-banner-title { @apply text-red-800 font-bold text-lg; }
-.error-banner-desc { @apply text-red-700 mt-1; }
 </style>
diff --git a/apps/frontend/src/page/catalog/CatalogIndexPage.vue b/apps/frontend/src/page/catalog/CatalogIndexPage.vue
index 6968a2d..962a9a0 100644
--- a/apps/frontend/src/page/catalog/CatalogIndexPage.vue
+++ b/apps/frontend/src/page/catalog/CatalogIndexPage.vue
@@ -1,63 +1,63 @@
 <template>
-  <header class="hero-section-gradient from-purple-600 to-indigo-600 py-16">
-    <div class="hero-container">
-      <h1 class="hero-title">Our Games</h1>
-      <p class="hero-subtitle text-purple-50">Discover games made for TIC-80 and other platforms, with versions playable directly in your browser!</p>
-    </div>
-  </header>
+  <div class="main-container">
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">🎮 Games Catalog</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
+        </div>
+      </div>
 
-  <main class="main-container py-12 px-4 mt-0">
-    <div class="flex flex-wrap gap-4 mb-8 justify-center filter-buttons pb-4">
-      <button
-        v-for="f in filters"
-        :key="f"
-        :class="['filter-btn', { active: activeFilter === f }]"
-        @click="activeFilter = f"
-      >
-        {{ f.charAt(0).toUpperCase() + f.slice(1) }}
-      </button>
-    </div>
+      <div class="win-toolbar">
+        <span style="font-size: 11px; margin-right: 4px;">Filter:</span>
+        <button
+          v-for="f in filters"
+          :key="f"
+          :class="['win-btn-sm', { 'is-active': activeFilter === f }]"
+          @click="activeFilter = f"
+        >{{ f.charAt(0).toUpperCase() + f.slice(1) }}</button>
+      </div>
 
-    <div class="grid grid-cols-1 gap-8">
-      <template v-for="{ software, releases } in softwares" :key="software.name">
-        <div v-show="activeFilter === 'all' || software.status === activeFilter" class="software-card group">
-          <div class="software-card-content">
-            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
-              <div v-if="software.imageUrl" class="flex-shrink-0">
+      <div class="win-body" style="padding: 4px;">
+        <template v-for="{ software, releases } in softwares" :key="software.name">
+          <div v-show="activeFilter === 'all' || software.status === activeFilter" class="software-row">
+            <div class="software-row-inner">
+              <div v-if="software.imageUrl" class="software-thumb-wrap">
                 <img :src="software.imageUrl" :alt="software.title" class="software-thumb" />
               </div>
-              <div class="flex-grow">
-                <div class="flex items-center gap-3 mb-2">
-                  <RouterLink :to="`/catalog/${software.name}`" class="hover:text-purple-600 transition-colors">
-                    <h2 class="software-title mb-0">{{ software.title }}</h2>
+              <div class="software-info">
+                <div class="software-header-row">
+                  <RouterLink :to="`/catalog/${software.name}`" class="software-title-link">
+                    {{ software.title }}
                   </RouterLink>
                   <span :class="`status-badge status-${software.status}`">{{ software.status }}</span>
                 </div>
-                <p class="software-desc max-w-2xl">{{ software.desc }}</p>
+                <div class="software-desc">{{ software.desc }}</div>
                 <div class="software-meta">
-                  <span>Author: <span class="text-gray-900 font-medium">{{ software.author }}</span></span>
-                  <span class="mx-2 text-gray-300">•</span>
-                  <span>Platform: <span class="text-gray-900 font-medium">{{ software.platform }}</span></span>
+                  Author: <strong>{{ software.author }}</strong>
+                  &nbsp;·&nbsp;
+                  Platform: <strong>{{ software.platform }}</strong>
                 </div>
               </div>
-
-              <div class="flex flex-wrap gap-2 items-center">
+              <div class="software-actions">
                 <a
                   v-if="getLatestStable(releases)?.htmlFolderPath"
                   :href="getLatestStable(releases).htmlFolderPath"
                   target="_blank"
-                  class="btn-play-sm"
+                  class="win-btn-sm"
                 >▶ Play</a>
-                <RouterLink :to="`/catalog/${software.name}`" class="btn-info-sm">
-                  ℹ More Info
+                <RouterLink :to="`/catalog/${software.name}`" class="win-btn-sm">
+                  ℹ Info
                 </RouterLink>
               </div>
             </div>
           </div>
-        </div>
-      </template>
+        </template>
+      </div>
     </div>
-  </main>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -86,40 +86,60 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.filter-btn {
-  @apply px-4 py-2 rounded-full border-2 border-purple-600 text-purple-600 font-bold transition-all hover:bg-purple-600 hover:text-white;
+.software-row {
+  border-bottom: 1px solid #D0D0D0;
 }
-.filter-btn.active {
-  @apply bg-purple-600 text-white;
+.software-row:last-child {
+  border-bottom: none;
 }
-.status-badge {
-  @apply px-2 py-0.5 rounded text-xs font-bold uppercase;
+.software-row:hover {
+  background: #EEF0F8;
 }
-.status-released { @apply bg-green-100 text-green-800 border border-green-200; }
-.status-demo { @apply bg-blue-100 text-blue-800 border border-blue-200; }
-.status-development { @apply bg-yellow-100 text-yellow-800 border border-yellow-200; }
-.status-archived { @apply bg-gray-100 text-gray-800 border border-gray-200; }
-.software-card {
-  @apply bg-white shadow-lg relative rounded-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300;
+.software-row-inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 8px;
+  flex-wrap: wrap;
 }
-.software-card-content {
-  @apply p-6;
+.software-thumb-wrap { flex-shrink: 0; }
+.software-thumb {
+  width: 56px;
+  height: 56px;
+  object-fit: cover;
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
 }
-.software-title {
-  @apply text-2xl font-bold mb-0;
+.software-info { flex: 1; min-width: 180px; }
+.software-header-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 3px;
+  flex-wrap: wrap;
 }
+.software-title-link {
+  font-size: 13px;
+  font-weight: bold;
+  color: #000080;
+  text-decoration: underline;
+}
+.software-title-link:hover { color: #0000FF; }
 .software-desc {
-  @apply text-gray-600 mb-3;
+  font-size: 12px;
+  color: #404040;
+  margin-bottom: 3px;
+  line-height: 1.4;
 }
 .software-meta {
-  @apply text-sm text-gray-500;
+  font-size: 11px;
+  color: #808080;
 }
-.btn-base-sm {
-  @apply inline-flex items-center justify-center font-bold py-2.5 px-5 rounded-xl text-sm transition-all active:scale-95;
-}
-.btn-play-sm { @apply btn-base-sm bg-purple-600 hover:bg-purple-700 text-white shadow-lg shadow-purple-600/20; }
-.btn-info-sm { @apply btn-base-sm bg-gray-100 hover:bg-gray-200 text-gray-700; }
-.software-thumb {
-  @apply w-24 h-24 object-cover rounded-xl border border-gray-100 shadow-sm;
+.software-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: flex-start;
+  flex-shrink: 0;
 }
 </style>
diff --git a/apps/frontend/src/page/catalog/CatalogShowPage.vue b/apps/frontend/src/page/catalog/CatalogShowPage.vue
index 8b83e25..a5a4480 100644
--- a/apps/frontend/src/page/catalog/CatalogShowPage.vue
+++ b/apps/frontend/src/page/catalog/CatalogShowPage.vue
@@ -1,168 +1,170 @@
 <template>
-  <div class="bg-gray-50 min-h-screen pb-20">
-    <header class="hero-section-gradient from-purple-700 to-indigo-800 py-12 md:py-20">
-      <div class="hero-container">
-        <nav class="mb-8">
-          <RouterLink to="/catalog" class="text-purple-200 hover:text-white transition-colors flex items-center gap-2 font-medium">
-            ← Back to Catalog
-          </RouterLink>
-        </nav>
+  <div class="main-container">
 
-        <div v-if="software" class="flex flex-col md:flex-row md:items-end justify-between gap-6">
-          <div class="flex-grow">
-            <div class="flex items-center gap-3 mb-4">
-              <span :class="`status-badge status-${software.status} px-3 py-1`">{{ software.status }}</span>
-              <span class="text-purple-300 font-mono text-sm tracking-widest uppercase">{{ software.platform }}</span>
+    <div v-if="software" class="show-layout">
+
+      <!-- Info Sidebar -->
+      <div class="show-sidebar">
+        <div class="win-window">
+          <div class="win-titlebar">
+            <span class="win-titlebar-text">ℹ Project Info</span>
+            <div class="win-titlebar-btns">
+              <button class="win-titlebar-btn">_</button>
+              <button class="win-titlebar-btn">□</button>
+              <button class="win-titlebar-btn">×</button>
             </div>
-            <h1 class="text-4xl md:text-6xl font-black text-white mb-4 leading-tight">{{ software.title }}</h1>
-            <p class="text-xl text-purple-100 max-w-3xl leading-relaxed">{{ software.desc }}</p>
+          </div>
+          <div class="win-body">
+            <div class="back-link-row">
+              <RouterLink to="/catalog" class="win-btn win-btn-sm">← Back to Catalog</RouterLink>
+            </div>
+
+            <div v-if="software.imageUrl" class="sidebar-img-wrap">
+              <img :src="software.imageUrl" :alt="software.title" class="sidebar-img" />
+            </div>
+
+            <table class="info-table">
+              <tr>
+                <td class="info-label">Title</td>
+                <td class="info-value"><strong>{{ software.title }}</strong></td>
+              </tr>
+              <tr>
+                <td class="info-label">Status</td>
+                <td class="info-value">
+                  <span :class="`status-badge status-${software.status}`">{{ software.status }}</span>
+                </td>
+              </tr>
+              <tr>
+                <td class="info-label">Author</td>
+                <td class="info-value">{{ software.author }}</td>
+              </tr>
+              <tr>
+                <td class="info-label">Platform</td>
+                <td class="info-value">{{ software.platform }}</td>
+              </tr>
+              <tr v-if="software.license">
+                <td class="info-label">License</td>
+                <td class="info-value">{{ software.license }}</td>
+              </tr>
+              <tr v-for="link in software.externalLinks" :key="link.url">
+                <td class="info-label">{{ link.label }}</td>
+                <td class="info-value">
+                  <a :href="link.url" target="_blank" class="win-link">{{ link.url }} ↗</a>
+                </td>
+              </tr>
+            </table>
           </div>
         </div>
       </div>
-    </header>
 
-    <main v-if="software" class="main-container -mt-10">
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <!-- Main Content -->
+      <div class="show-main">
 
-        <!-- Sidebar Info -->
-        <div class="lg:col-span-1 space-y-6">
-          <div class="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
-            <div v-if="software.imageUrl" class="mb-6 flex justify-center">
-              <img :src="software.imageUrl" :alt="software.title" class="max-h-48 w-auto object-contain border-4 border-gray-100 shadow-sm" />
+        <!-- About Window -->
+        <div v-if="software.story" class="win-window">
+          <div class="win-titlebar">
+            <span class="win-titlebar-text">📄 About {{ software.title }}</span>
+            <div class="win-titlebar-btns">
+              <button class="win-titlebar-btn">_</button>
+              <button class="win-titlebar-btn">□</button>
+              <button class="win-titlebar-btn">×</button>
+            </div>
+          </div>
+          <div class="win-body">
+            <div class="win-inset" style="padding: 8px;">
+              <p style="margin: 0; font-size: 12px; line-height: 1.6; white-space: pre-line;">{{ software.story }}</p>
             </div>
-            <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
-              <span class="text-purple-600">ℹ</span> Project Info
-            </h2>
-            <dl class="space-y-4">
-              <div>
-                <dt class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1">Author</dt>
-                <dd class="text-gray-900 font-medium">{{ software.author }}</dd>
-              </div>
-              <div>
-                <dt class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1">Platform</dt>
-                <dd class="text-gray-900 font-medium">{{ software.platform }}</dd>
-              </div>
-              <div v-if="software.license">
-                <dt class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1">License</dt>
-                <dd class="text-gray-900 font-medium">{{ software.license }}</dd>
-              </div>
-              <div v-for="link in software.externalLinks" :key="link.url">
-                <dt class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1">{{ link.label }}</dt>
-                <dd>
-                  <a :href="link.url" target="_blank" class="text-purple-600 hover:text-purple-800 font-bold break-all">
-                    {{ link.url }} ↗
-                  </a>
-                </dd>
-              </div>
-            </dl>
           </div>
         </div>
 
-        <!-- Main Content Area -->
-        <div class="lg:col-span-2 space-y-8">
-          <div v-if="software.story" class="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
-            <h2 class="text-xl font-bold text-gray-900 mb-4">About</h2>
-            <p class="text-gray-700 leading-relaxed whitespace-pre-line">{{ software.story }}</p>
-          </div>
-
-          <div v-if="latestStable" class="bg-gradient-to-br from-indigo-600 to-purple-700 rounded-3xl shadow-xl p-8 text-white">
-            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
-              <div>
-                <div class="flex items-center gap-2 mb-2">
-                  <span class="px-2 py-0.5 bg-white/20 text-white text-[10px] font-black uppercase rounded tracking-widest">Latest Stable</span>
-                </div>
-                <h2 class="text-4xl font-black mb-1">{{ latestStable.version }}</h2>
-                <p class="text-indigo-100 text-sm">Released: {{ formatDateTime(latestStable.UpdatedAt) }}</p>
-              </div>
-
-              <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-2 xl:grid-cols-4 gap-2 w-full md:w-auto">
-                <a v-if="latestStable.htmlFolderPath" :href="latestStable.htmlFolderPath" target="_blank" class="flex items-center justify-center py-3 px-4 bg-white text-indigo-900 font-bold rounded-xl transition-all hover:bg-indigo-50 shadow-lg shadow-black/10 text-sm whitespace-nowrap">▶ Play Now</a>
-                <a v-if="latestStable.cartridgePath" :href="latestStable.cartridgePath" target="_blank" class="flex items-center justify-center py-3 px-4 bg-indigo-500/30 border border-indigo-400/30 text-white font-bold rounded-xl transition-all hover:bg-indigo-500/40 text-sm whitespace-nowrap">💾 Download</a>
-                <a v-if="latestStable.sourcePath" :href="latestStable.sourcePath" target="_blank" class="flex items-center justify-center py-3 px-4 bg-indigo-500/30 border border-indigo-400/30 text-white font-bold rounded-xl transition-all hover:bg-indigo-500/40 text-sm whitespace-nowrap">📄 Source</a>
-                <a v-if="latestStable.docsFolderPath" :href="latestStable.docsFolderPath" target="_blank" class="flex items-center justify-center py-3 px-4 bg-indigo-500/30 border border-indigo-400/30 text-white font-bold rounded-xl transition-all hover:bg-indigo-500/40 text-sm whitespace-nowrap">📖 Docs</a>
-              </div>
+        <!-- Latest Stable Window -->
+        <div v-if="latestStable" class="win-window">
+          <div class="win-titlebar">
+            <span class="win-titlebar-text">💾 Latest Stable Release — {{ latestStable.version }}</span>
+            <div class="win-titlebar-btns">
+              <button class="win-titlebar-btn">_</button>
+              <button class="win-titlebar-btn">□</button>
+              <button class="win-titlebar-btn">×</button>
             </div>
           </div>
-
-          <div class="bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100">
-            <div class="p-8 border-b border-gray-100">
-              <h2 class="text-2xl font-bold text-gray-900">All Releases</h2>
+          <div class="win-body">
+            <div style="font-size: 11px; color: #404040; margin-bottom: 8px;">
+              Released: <span style="font-family: 'Courier New', monospace;">{{ formatDateTime(latestStable.UpdatedAt) }}</span>
             </div>
-            <div class="p-0">
-              <!-- Desktop Table -->
-              <div class="hidden md:block">
-                <table class="w-full text-left">
-                  <thead class="bg-gray-50 text-gray-500 text-xs font-bold uppercase tracking-widest">
-                    <tr>
-                      <th class="px-8 py-4">Version</th>
-                      <th class="px-8 py-4">Release Date</th>
-                    </tr>
-                  </thead>
-                  <tbody class="divide-y divide-gray-100">
-                    <tr v-for="release in stableReleases" :key="release.version" class="hover:bg-gray-50/50 transition-colors">
-                      <td class="px-8 py-4">
-                        <div class="font-bold text-gray-900 text-lg mb-2">{{ release.version }}</div>
-                        <div class="flex flex-wrap gap-4">
-                          <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="text-purple-600 hover:text-purple-900 font-bold text-sm flex items-center gap-1">▶ Play</a>
-                          <a v-if="release.cartridgePath" :href="release.cartridgePath" target="_blank" class="text-blue-600 hover:text-blue-900 font-bold text-sm flex items-center gap-1">💾 Download</a>
-                          <a v-if="release.sourcePath" :href="release.sourcePath" target="_blank" class="text-green-600 hover:text-green-900 font-bold text-sm flex items-center gap-1">📄 Source</a>
-                          <a v-if="release.docsFolderPath" :href="release.docsFolderPath" target="_blank" class="text-yellow-600 hover:text-yellow-900 font-bold text-sm flex items-center gap-1">📖 Docs</a>
-                        </div>
-                      </td>
-                      <td class="px-8 py-4 text-gray-500 align-top pt-5">{{ formatDateTime(release.UpdatedAt) }}</td>
-                    </tr>
+            <div class="release-actions">
+              <a v-if="latestStable.htmlFolderPath" :href="latestStable.htmlFolderPath" target="_blank" class="win-btn win-btn-default-action">▶ Play Now</a>
+              <a v-if="latestStable.cartridgePath" :href="latestStable.cartridgePath" target="_blank" class="win-btn">💾 Download</a>
+              <a v-if="latestStable.sourcePath" :href="latestStable.sourcePath" target="_blank" class="win-btn">📄 Source</a>
+              <a v-if="latestStable.docsFolderPath" :href="latestStable.docsFolderPath" target="_blank" class="win-btn">📖 Docs</a>
+            </div>
+          </div>
+        </div>
 
-                    <tr v-if="devReleases.length > 0" class="bg-yellow-50/30">
-                      <td colspan="2" class="px-8 py-3 text-[10px] font-black text-yellow-700 uppercase tracking-tighter">Development Versions</td>
-                    </tr>
-
-                    <tr v-for="release in devReleases" :key="release.version" class="bg-yellow-50/10 hover:bg-yellow-50/30 transition-colors">
-                      <td class="px-8 py-4">
-                        <div class="font-bold text-yellow-800 text-lg mb-2">{{ release.version }}</div>
-                        <div class="flex flex-wrap gap-4">
-                          <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="text-purple-600 hover:text-purple-900 font-bold text-sm flex items-center gap-1">▶ Play</a>
-                          <a v-if="release.cartridgePath" :href="release.cartridgePath" target="_blank" class="text-blue-600 hover:text-blue-900 font-bold text-sm flex items-center gap-1">💾 Download</a>
-                        </div>
-                      </td>
-                      <td class="px-8 py-4 text-gray-500 align-top pt-5">{{ formatDateTime(release.UpdatedAt) }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-
-              <!-- Mobile View -->
-              <div class="md:hidden divide-y divide-gray-100">
-                <div
-                  v-for="release in allReleases"
-                  :key="release.version"
-                  :class="['p-6', release.version.startsWith('dev-') ? 'bg-yellow-50/20' : '']"
-                >
-                  <div class="flex justify-between items-start mb-4">
-                    <div>
-                      <div class="font-bold text-gray-900 text-lg">{{ release.version }}</div>
-                      <div class="text-gray-500 text-xs mt-1">{{ formatDateTime(release.UpdatedAt) }}</div>
+        <!-- All Releases Window -->
+        <div class="win-window">
+          <div class="win-titlebar">
+            <span class="win-titlebar-text">📋 All Releases</span>
+            <div class="win-titlebar-btns">
+              <button class="win-titlebar-btn">_</button>
+              <button class="win-titlebar-btn">□</button>
+              <button class="win-titlebar-btn">×</button>
+            </div>
+          </div>
+          <div class="win-body" style="padding: 0;">
+            <table class="win-table" style="width: 100%;">
+              <thead>
+                <tr>
+                  <th>Version</th>
+                  <th>Release Date</th>
+                  <th>Downloads</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="release in stableReleases" :key="release.version">
+                  <td><strong>{{ release.version }}</strong></td>
+                  <td style="font-family: 'Courier New', monospace; font-size: 11px; white-space: nowrap;">{{ formatDateTime(release.UpdatedAt) }}</td>
+                  <td>
+                    <div class="release-link-row">
+                      <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="win-link-small">▶ Play</a>
+                      <a v-if="release.cartridgePath" :href="release.cartridgePath" target="_blank" class="win-link-small">💾 Download</a>
+                      <a v-if="release.sourcePath" :href="release.sourcePath" target="_blank" class="win-link-small">📄 Source</a>
+                      <a v-if="release.docsFolderPath" :href="release.docsFolderPath" target="_blank" class="win-link-small">📖 Docs</a>
                     </div>
-                    <span v-if="release.version.startsWith('dev-')" class="px-2 py-0.5 bg-yellow-100 text-yellow-800 text-[10px] font-black uppercase rounded">Dev</span>
-                  </div>
-                  <div class="grid grid-cols-2 gap-2">
-                    <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="flex items-center justify-center py-2 bg-purple-100 text-purple-700 font-bold rounded-lg text-sm">Play</a>
-                    <a v-if="release.cartridgePath" :href="release.cartridgePath" target="_blank" class="flex items-center justify-center py-2 bg-blue-100 text-blue-700 font-bold rounded-lg text-sm">Download</a>
-                    <a v-if="release.sourcePath" :href="release.sourcePath" target="_blank" class="flex items-center justify-center py-2 bg-green-100 text-green-700 font-bold rounded-lg text-sm">Source</a>
-                    <a v-if="release.docsFolderPath" :href="release.docsFolderPath" target="_blank" class="flex items-center justify-center py-2 bg-yellow-100 text-yellow-700 font-bold rounded-lg text-sm">Docs</a>
-                  </div>
-                </div>
-              </div>
-            </div>
+                  </td>
+                </tr>
+                <tr v-if="devReleases.length > 0">
+                  <td colspan="3" class="dev-section-header">— Development Versions —</td>
+                </tr>
+                <tr v-for="release in devReleases" :key="release.version" class="dev-row">
+                  <td><span style="color: #808000; font-weight: bold;">{{ release.version }}</span></td>
+                  <td style="font-family: 'Courier New', monospace; font-size: 11px; white-space: nowrap;">{{ formatDateTime(release.UpdatedAt) }}</td>
+                  <td>
+                    <div class="release-link-row">
+                      <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="win-link-small">▶ Play</a>
+                      <a v-if="release.cartridgePath" :href="release.cartridgePath" target="_blank" class="win-link-small">💾 Download</a>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
-      </div>
-    </main>
 
-    <main v-else class="main-container -mt-10">
-      <div class="bg-white rounded-3xl shadow-xl p-12 text-center text-gray-400">
+      </div>
+    </div>
+
+    <div v-else class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">Loading...</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">×</button>
+        </div>
+      </div>
+      <div class="win-body" style="text-align: center; padding: 24px;">
         {{ error || 'Loading...' }}
       </div>
-    </main>
+    </div>
+
   </div>
 </template>
 
@@ -190,7 +192,6 @@ const devReleases = computed(() =>
     .sort((a, b) => new Date(b.UpdatedAt).getTime() - new Date(a.UpdatedAt).getTime())
 )
 
-const allReleases = computed(() => [...stableReleases.value, ...devReleases.value])
 const latestStable = computed(() => stableReleases.value[0] ?? null)
 
 onMounted(async () => {
@@ -210,11 +211,79 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.status-badge {
-  @apply rounded text-[10px] font-black uppercase tracking-wider;
+.show-layout {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 8px;
+  align-items: flex-start;
+}
+@media (max-width: 640px) {
+  .show-layout { grid-template-columns: 1fr; }
+}
+.show-sidebar, .show-main { }
+
+.back-link-row { margin-bottom: 8px; }
+
+.sidebar-img-wrap {
+  margin-bottom: 8px;
+  text-align: center;
+}
+.sidebar-img {
+  max-width: 100%;
+  max-height: 100px;
+  object-fit: contain;
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+}
+.info-table {
+  width: 100%;
+  font-size: 11px;
+  border-collapse: collapse;
+}
+.info-table tr { border-bottom: 1px solid #D0D0D0; }
+.info-label {
+  color: #404040;
+  padding: 2px 4px 2px 0;
+  white-space: nowrap;
+  vertical-align: top;
+  width: 50px;
+}
+.info-value {
+  padding: 2px 0 2px 4px;
+  word-break: break-all;
+}
+.win-link {
+  color: #0000FF;
+  text-decoration: underline;
+  font-size: 11px;
+  word-break: break-all;
+}
+
+.release-actions {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.release-link-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.win-link-small {
+  color: #0000FF;
+  text-decoration: underline;
+  font-size: 11px;
+}
+.win-link-small:visited { color: #800080; }
+.dev-section-header {
+  background: #FFFFC8;
+  font-size: 11px;
+  color: #808000;
+  padding: 2px 8px;
+  text-align: center;
+  font-style: italic;
+}
+.dev-row td {
+  background: #FFFFE8;
 }
-.status-released { @apply bg-green-500 text-white shadow-lg shadow-green-500/20; }
-.status-demo { @apply bg-blue-500 text-white shadow-lg shadow-blue-500/20; }
-.status-development { @apply bg-yellow-500 text-white shadow-lg shadow-yellow-500/20; }
-.status-archived { @apply bg-gray-500 text-white shadow-lg shadow-gray-500/20; }
 </style>
diff --git a/apps/frontend/src/page/code/CodeIndexPage.vue b/apps/frontend/src/page/code/CodeIndexPage.vue
index 25a4e61..cd6235f 100644
--- a/apps/frontend/src/page/code/CodeIndexPage.vue
+++ b/apps/frontend/src/page/code/CodeIndexPage.vue
@@ -1,61 +1,99 @@
 <template>
-  <header class="hero-section-gradient from-teal-600 to-green-600 py-20">
-    <div class="hero-container max-w-4xl">
-      <h1 class="hero-title">Codebase</h1>
-      <p class="hero-subtitle text-teal-50 mb-10">
-        Explore our collection of open-source projects, study our source code, and contribute to our independent game development tools.
-      </p>
-      <a href="https://git.teletype.hu" target="_blank" class="btn-hero-teal">
-        Open Gitea
-      </a>
-    </div>
-  </header>
+  <div class="main-container">
 
-  <main class="main-container">
-    <div v-if="error" class="error-alert" role="alert">
-      <strong class="font-bold">Error!</strong>
-      <span class="block sm:inline"> {{ error }}</span>
+    <div v-if="error" class="win-notice-error">
+      <span>⚠</span>
+      <div><strong>Error</strong><br><span style="font-size: 11px;">{{ error }}</span></div>
     </div>
 
-    <div v-if="!error && publicRepos.length > 0" class="card-grid mb-16">
-      <div v-for="repo in publicRepos" :key="repo.name" class="card-base">
-        <h3 class="repo-card-title">
-          <a :href="repo.html_url" target="_blank" class="repo-link">
-            {{ repo.owner.login }}/{{ repo.name }}
-          </a>
-        </h3>
-        <p v-if="repo.description" class="repo-card-desc">{{ repo.description }}</p>
-        <p v-if="repo.language" class="repo-card-meta">Language: {{ repo.language }}</p>
-        <p class="repo-card-meta">Updated: {{ formatDateTime(repo.updated_at) }}</p>
-      </div>
-    </div>
-
-    <h2 class="commits-section-title">Recent Commits</h2>
-
-    <p v-if="!error && recentCommits.length === 0" class="empty-commits-msg">
-      No recent commits found or accessible from public repositories.
-    </p>
-
-    <div class="commits-list">
-      <div v-for="commit in recentCommits" :key="commit.sha" class="commit-item">
-        <div class="commit-icon">🚀</div>
-        <div class="commit-content">
-          <p class="commit-message">
-            <a :href="commit.repo.html_url" target="_blank" class="commit-repo-link">
-              <span class="font-bold">{{ commit.repo.owner }}</span> / <span class="font-bold">{{ commit.repo.name }}</span>
-            </a>
-            : <span class="text-gray-700">{{ commit.message.split('\n')[0] }}</span>
-          </p>
-          <p class="commit-meta">
-            Authored by <span class="font-bold">{{ commit.author.name }}</span> on {{ formatDateTime(commit.date) }}
-            <a :href="commit.url" target="_blank" class="commit-sha-link">
-              <span class="font-mono text-xs">{{ commit.sha.substring(0, 7) }}</span>
-            </a>
-          </p>
+    <!-- Repositories Window -->
+    <div v-if="!error && publicRepos.length > 0" class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">💻 Public Repositories</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
         </div>
       </div>
+      <div class="win-toolbar">
+        <a href="https://git.teletype.hu" target="_blank" class="win-btn win-btn-sm">Open Gitea ↗</a>
+        <span style="font-size: 11px; color: #404040; margin-left: 4px;">{{ publicRepos.length }} repositories</span>
+      </div>
+      <div class="win-body" style="padding: 0;">
+        <table class="win-table">
+          <thead>
+            <tr>
+              <th>Repository</th>
+              <th>Description</th>
+              <th>Language</th>
+              <th>Updated</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="repo in publicRepos" :key="repo.name">
+              <td>
+                <a :href="repo.html_url" target="_blank" class="repo-link">
+                  {{ repo.owner.login }}/{{ repo.name }}
+                </a>
+              </td>
+              <td style="font-size: 11px; color: #404040; max-width: 300px;">{{ repo.description || '—' }}</td>
+              <td style="font-size: 11px; font-family: 'Courier New', monospace; white-space: nowrap;">{{ repo.language || '—' }}</td>
+              <td style="font-size: 11px; font-family: 'Courier New', monospace; white-space: nowrap;">{{ formatDateTime(repo.updated_at) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
-  </main>
+
+    <!-- Recent Commits Window -->
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">🚀 Recent Commits</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
+        </div>
+      </div>
+
+      <div v-if="recentCommits.length === 0" class="win-body" style="text-align: center; color: #404040; font-size: 12px;">
+        No recent commits found.
+      </div>
+
+      <div v-else class="win-body" style="padding: 0;">
+        <table class="win-table">
+          <thead>
+            <tr>
+              <th>Repository</th>
+              <th>Commit Message</th>
+              <th>Author</th>
+              <th>Date</th>
+              <th>SHA</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="commit in recentCommits" :key="commit.sha">
+              <td style="white-space: nowrap;">
+                <a :href="commit.repo.html_url" target="_blank" class="repo-link" style="font-size: 11px;">
+                  {{ commit.repo.owner }}/{{ commit.repo.name }}
+                </a>
+              </td>
+              <td style="font-size: 11px; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                {{ commit.message.split('\n')[0] }}
+              </td>
+              <td style="font-size: 11px; white-space: nowrap;">{{ commit.author.name }}</td>
+              <td style="font-size: 11px; font-family: 'Courier New', monospace; white-space: nowrap;">{{ formatDateTime(commit.date) }}</td>
+              <td>
+                <a :href="commit.url" target="_blank" class="sha-link">{{ commit.sha.substring(0, 7) }}</a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -71,11 +109,9 @@ const error = ref<string | null>(null)
 onMounted(async () => {
   try {
     publicRepos.value = await gitApi.repos()
-
     const commitPromises = publicRepos.value.map(repo =>
       gitApi.commits(repo.owner.login, repo.name, repo.html_url)
     )
-
     const all = (await Promise.all(commitPromises)).flat()
     all.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
     recentCommits.value = all.slice(0, 20)
@@ -86,49 +122,18 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.error-alert {
-  @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-8;
-}
-.repo-card-title {
-  @apply text-xl font-semibold mb-2;
-}
 .repo-link {
-  @apply text-blue-600 hover:text-blue-800;
+  color: #0000FF;
+  text-decoration: underline;
+  font-size: 12px;
+  font-family: "Courier New", Courier, monospace;
 }
-.repo-card-desc {
-  @apply text-gray-700 text-sm;
-}
-.repo-card-meta {
-  @apply text-gray-500 text-xs mt-1;
-}
-.commits-section-title {
-  @apply text-3xl font-bold mb-8 text-center text-gray-800;
-}
-.empty-commits-msg {
-  @apply text-center text-gray-600 text-lg;
-}
-.commits-list {
-  @apply space-y-4 mb-12;
-}
-.commit-item {
-  @apply bg-white shadow-lg rounded-lg p-4 flex items-center space-x-4 border border-gray-100;
-}
-.commit-icon {
-  @apply flex-shrink-0 text-3xl;
-}
-.commit-content {
-  @apply flex-grow;
-}
-.commit-message {
-  @apply text-gray-800 font-semibold;
-}
-.commit-repo-link {
-  @apply text-blue-600 hover:text-blue-800;
-}
-.commit-meta {
-  @apply text-gray-600 text-sm mt-1;
-}
-.commit-sha-link {
-  @apply ml-2 text-blue-500 hover:text-blue-700;
+.repo-link:hover { color: #0000CC; }
+.sha-link {
+  color: #0000FF;
+  text-decoration: underline;
+  font-family: "Courier New", Courier, monospace;
+  font-size: 11px;
 }
+.sha-link:hover { color: #0000CC; }
 </style>
diff --git a/apps/frontend/src/page/contact/ContactPage.vue b/apps/frontend/src/page/contact/ContactPage.vue
index 2e80468..fddd1f9 100644
--- a/apps/frontend/src/page/contact/ContactPage.vue
+++ b/apps/frontend/src/page/contact/ContactPage.vue
@@ -1,79 +1,99 @@
 <template>
-  <header class="hero-section-gradient from-blue-600 to-indigo-700 py-20 text-white">
-    <div class="hero-container text-center">
-      <h1 class="hero-title mb-6">Contact Us</h1>
-      <p class="hero-subtitle mb-10 text-blue-100">
-        Have questions, feedback, or just want to say hi? We'd love to hear from you!
-      </p>
-      <a :href="DISCORD_INVITE_LINK" target="_blank" class="discord-hero-btn">
-        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037 19.736 19.736 0 0 0-4.885 1.515.069.069 0 0 0-.032.027C.533 9.048-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.862-1.297 1.197-1.99.051-.105.001-.23-.106-.272a13.223 13.223 0 0 1-1.878-.894.077.077 0 0 1-.007-.128c.126-.094.252-.192.372-.29a.074.074 0 0 1 .077-.01c3.927 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .077.01c.12.098.246.196.373.29a.077.077 0 0 1-.006.128 12.299 12.299 0 0 1-1.878.894.077.077 0 0 0-.106.272c.335.693.735 1.36 1.197 1.99a.078.078 0 0 0 .084.028 19.83 19.83 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.956-2.419 2.156-2.419 1.21 0 2.176 1.096 2.156 2.419 0 1.334-.956 2.419-2.156 2.419zm7.974 0c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.955-2.419 2.156-2.419 1.21 0 2.176 1.096 2.156 2.419 0 1.334-.946 2.419-2.156 2.419z"/>
-        </svg>
-        Join our Discord
-      </a>
-    </div>
-  </header>
+  <div class="main-container">
 
-  <main class="main-container py-16 px-4">
-    <div class="contact-grid">
-      <div class="contact-card">
-        <h2 class="contact-card-title">
-          <span class="text-3xl">📧</span> Email Us
-        </h2>
-        <p class="contact-card-desc">
-          For business inquiries, support, or detailed feedback, feel free to drop us an email.
-        </p>
-        <div @click="openEmail" class="email-link cursor-pointer">
-          contact@teletype.hu
+    <!-- Email Window -->
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">📧 Contact Us</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
         </div>
       </div>
-
-      <div class="contact-card">
-        <h2 class="contact-card-title">
-          <span class="text-3xl">💬</span> Community
-        </h2>
-        <p class="contact-card-desc mb-8">
-          Join our primarily Hungarian-speaking community (English speakers are also welcome!).
+      <div class="win-body">
+        <p style="margin: 0 0 8px; font-size: 12px; color: #404040;">
+          Have questions, feedback, or just want to say hi?
         </p>
-
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 justify-center">
-          <div class="community-section border-[#5865F2]">
-            <h3 class="community-section-title text-[#5865F2]">Discord</h3>
-            <p class="community-section-desc">We have a vibrant Discord server for real-time chat and support.</p>
-            <a :href="DISCORD_INVITE_LINK" target="_blank" class="community-link-discord">
-              Join Discord Server <span>→</span>
-            </a>
-          </div>
-
-          <div class="community-section border-red-600">
-            <h3 class="community-section-title text-red-600">YouTube</h3>
-            <p class="community-section-desc">Watch our latest vlogs and development videos on our channel.</p>
-            <a href="https://www.youtube.com/@teletypegames" target="_blank" class="community-link-youtube">
-              Visit Channel <span>→</span>
-            </a>
-          </div>
-
-          <div class="community-section border-green-500">
-            <h3 class="community-section-title text-green-700">IRC</h3>
-            <p class="text-sm text-gray-600 mb-3">If Discord is too modern, find us on IRC!</p>
-            <div class="irc-box">
-              <span class="irc-network">Network: Libera.Chat</span>
-              <code class="irc-channel">#teletypegames</code>
-            </div>
-          </div>
-
-          <div class="community-section border-amber-500">
-            <h3 class="community-section-title text-amber-700">BBS</h3>
-            <p class="community-section-desc">Join us for some retro vibes on our BBS!</p>
-            <div class="bbs-box">
-              <span class="bbs-host">Host: games.teletype.hu</span>
-              <code class="bbs-port">Port: 2323</code>
-            </div>
-          </div>
+        <table class="contact-table">
+          <tr>
+            <td class="contact-label">Email:</td>
+            <td>
+              <span @click="openEmail" class="email-link">contact@teletype.hu</span>
+            </td>
+          </tr>
+        </table>
+        <div style="margin-top: 8px;">
+          <a :href="DISCORD_INVITE_LINK" target="_blank" class="win-btn">
+            <svg class="discord-icon" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037 19.736 19.736 0 0 0-4.885 1.515.069.069 0 0 0-.032.027C.533 9.048-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.862-1.297 1.197-1.99.051-.105.001-.23-.106-.272a13.223 13.223 0 0 1-1.878-.894.077.077 0 0 1-.007-.128c.126-.094.252-.192.372-.29a.074.074 0 0 1 .077-.01c3.927 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .077.01c.12.098.246.196.373.29a.077.077 0 0 1-.006.128 12.299 12.299 0 0 1-1.878.894.077.077 0 0 0-.106.272c.335.693.735 1.36 1.197 1.99a.078.078 0 0 0 .084.028 19.83 19.83 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
+            </svg>
+            Join our Discord Server
+          </a>
         </div>
       </div>
     </div>
-  </main>
+
+    <!-- Community Window -->
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">💬 Community Channels</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
+        </div>
+      </div>
+      <div class="win-body">
+        <p style="margin: 0 0 10px; font-size: 12px; color: #404040;">
+          Join our primarily Hungarian-speaking community (English speakers also welcome!).
+        </p>
+
+        <div class="community-grid">
+
+          <div class="community-item win-raised-panel">
+            <div class="community-header" style="color: #5865F2;">
+              <span class="community-icon">💬</span> Discord
+            </div>
+            <p class="community-desc">Real-time chat and support on our Discord server.</p>
+            <a :href="DISCORD_INVITE_LINK" target="_blank" class="win-btn win-btn-sm">Join Discord →</a>
+          </div>
+
+          <div class="community-item win-raised-panel">
+            <div class="community-header" style="color: #CC0000;">
+              <span class="community-icon">📺</span> YouTube
+            </div>
+            <p class="community-desc">Watch our latest vlogs and development videos.</p>
+            <a href="https://www.youtube.com/@teletypegames" target="_blank" class="win-btn win-btn-sm">Visit Channel →</a>
+          </div>
+
+          <div class="community-item win-raised-panel">
+            <div class="community-header" style="color: #007000;">
+              <span class="community-icon">🖥</span> IRC
+            </div>
+            <p class="community-desc">If Discord is too modern, find us on IRC!</p>
+            <div class="code-box">
+              <div style="font-size: 10px; color: #404040; margin-bottom: 2px;">Network: Libera.Chat</div>
+              <code class="irc-code">#teletypegames</code>
+            </div>
+          </div>
+
+          <div class="community-item win-raised-panel">
+            <div class="community-header" style="color: #805000;">
+              <span class="community-icon">📟</span> BBS
+            </div>
+            <p class="community-desc">Retro vibes on our BBS!</p>
+            <div class="code-box">
+              <div style="font-size: 10px; color: #404040; margin-bottom: 2px;">Host: games.teletype.hu</div>
+              <code class="bbs-code">Port: 2323</code>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -85,55 +105,83 @@ function openEmail() {
 </script>
 
 <style scoped>
-.discord-hero-btn {
-  @apply inline-flex items-center gap-3 bg-[#5865F2] hover:bg-[#4752C4] text-white font-black py-4 px-8 rounded-full text-lg transition-all transform hover:scale-105 shadow-xl;
+.contact-table {
+  font-size: 12px;
+  margin-bottom: 4px;
 }
-.contact-grid {
-  @apply grid grid-cols-1 gap-12 max-w-5xl mx-auto;
-}
-.contact-card {
-  @apply bg-white p-8 rounded-2xl shadow-xl border border-gray-100;
-}
-.contact-card-title {
-  @apply text-2xl font-black text-gray-900 mb-6 flex items-center gap-3;
-}
-.contact-card-desc {
-  @apply text-gray-600 mb-6 leading-relaxed;
+.contact-label {
+  color: #404040;
+  padding-right: 8px;
+  white-space: nowrap;
 }
 .email-link {
-  @apply text-indigo-600 font-bold text-xl hover:underline transition-all;
+  color: #0000FF;
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 13px;
 }
-.community-section {
-  @apply border-l-4 pl-4;
+.email-link:hover { color: #0000CC; }
+
+.discord-icon {
+  width: 14px;
+  height: 14px;
 }
-.community-section-title {
-  @apply text-lg font-bold mb-2;
+
+.community-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
 }
-.community-section-desc {
-  @apply text-gray-600 text-sm mb-3;
+@media (max-width: 768px) {
+  .community-grid { grid-template-columns: repeat(2, 1fr); }
 }
-.community-link-discord {
-  @apply text-[#5865F2] font-bold hover:underline inline-flex items-center gap-1;
+@media (max-width: 420px) {
+  .community-grid { grid-template-columns: 1fr; }
 }
-.community-link-youtube {
-  @apply text-red-600 font-bold hover:underline inline-flex items-center gap-1;
+
+.community-item {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
 }
-.irc-box {
-  @apply bg-green-100 p-4 rounded-xl border border-green-200 mt-3 inline-block;
+.community-header {
+  font-size: 13px;
+  font-weight: bold;
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
-.irc-network {
-  @apply block text-xs font-semibold text-green-500 uppercase tracking-wider mb-1;
+.community-icon { font-size: 14px; }
+.community-desc {
+  font-size: 11px;
+  color: #404040;
+  margin: 0 0 8px;
+  flex-grow: 1;
+  line-height: 1.4;
 }
-.irc-channel {
-  @apply text-green-800 font-mono text-lg font-bold;
+
+.code-box {
+  background: #fff;
+  border: 1px solid #808080;
+  padding: 4px 6px;
+  margin-top: auto;
+  box-shadow:
+    inset 1px 1px 0 0 #808080,
+    inset -1px -1px 0 0 #D4D0C8;
 }
-.bbs-box {
-  @apply bg-amber-50 p-4 rounded-xl border border-amber-100 mt-3 inline-block;
+.irc-code {
+  font-family: "Courier New", Courier, monospace;
+  font-size: 12px;
+  font-weight: bold;
+  color: #007000;
+  display: block;
 }
-.bbs-host {
-  @apply block text-xs font-semibold text-amber-500 uppercase tracking-wider mb-1;
-}
-.bbs-port {
-  @apply text-amber-700 font-mono text-lg font-bold;
+.bbs-code {
+  font-family: "Courier New", Courier, monospace;
+  font-size: 12px;
+  font-weight: bold;
+  color: #805000;
+  display: block;
 }
 </style>
diff --git a/apps/frontend/src/page/home/HomePage.vue b/apps/frontend/src/page/home/HomePage.vue
index 5641986..e88e1fd 100644
--- a/apps/frontend/src/page/home/HomePage.vue
+++ b/apps/frontend/src/page/home/HomePage.vue
@@ -1,188 +1,179 @@
 <template>
-  <div class="home-container">
-    <!-- Header Section -->
-    <header class="hero-section-slate">
-      <div class="home-header-decor">
-        <div class="hero-decor-blob -top-24 -left-24 h-96 w-96 bg-indigo-600"></div>
-        <div class="hero-decor-blob -bottom-24 -right-24 h-96 w-96 bg-purple-600"></div>
-      </div>
+  <div class="main-container">
 
-      <div class="hero-container">
-        <div class="hero-badge">Welcome to</div>
-        <h1 class="hero-title">
-          Teletype <span class="text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-fuchsia-400">Games</span>
-        </h1>
-        <p class="hero-subtitle">
-          Teletype Games is an independent game development community built on creative freedom, equality, and an open-source mindset. Our goal is to create experimental and full-fledged games with short development cycles.
+    <!-- Welcome Window -->
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">📟 Welcome to Teletype Games</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
+        </div>
+      </div>
+      <div class="win-body">
+        <p style="margin: 0; font-size: 13px;">
+          Teletype Games is an independent game development community built on creative freedom, equality, and an open-source mindset.
+          Our goal is to create experimental and full-fledged games with short development cycles.
         </p>
       </div>
-    </header>
+    </div>
 
-    <main class="main-container max-w-6xl">
-      <!-- Countdown Section -->
-      <section v-if="nextEvent" class="mb-12">
-        <div class="countdown-card">
-          <h2 class="countdown-event-name">{{ nextEvent.name }}</h2>
-          <div class="countdown-timer">{{ countdownText }}</div>
-          <p class="countdown-date">Starts on: <span class="font-semibold">{{ nextEvent.dateText }}</span></p>
+    <!-- Two-column: Countdown + Featured -->
+    <div class="home-two-col">
 
-          <div v-if="followingEvents.length > 0" class="upcoming-events-section">
-            <h3 class="upcoming-events-title">Upcoming Events</h3>
-            <div class="space-y-4">
-              <div v-for="event in followingEvents" :key="event.name" class="upcoming-event-item">
-                <span class="font-bold text-gray-800">{{ event.name }}</span>
-                <span class="text-sm text-gray-500 font-mono">{{ event.dateText }}</span>
-              </div>
+      <!-- Countdown Window -->
+      <div v-if="nextEvent" class="win-window">
+        <div class="win-titlebar">
+          <span class="win-titlebar-text">⏱ Next Event</span>
+          <div class="win-titlebar-btns">
+            <button class="win-titlebar-btn">_</button>
+            <button class="win-titlebar-btn">□</button>
+            <button class="win-titlebar-btn">×</button>
+          </div>
+        </div>
+        <div class="win-body" style="text-align: center;">
+          <div class="countdown-name">{{ nextEvent.name }}</div>
+          <div class="win-inset countdown-display">
+            <span class="countdown-mono">{{ countdownText }}</span>
+          </div>
+          <div class="countdown-date">
+            Starts: <strong>{{ nextEvent.dateText }}</strong>
+          </div>
+
+          <div v-if="followingEvents.length > 0" class="upcoming-section">
+            <div class="win-separator"></div>
+            <div class="upcoming-label">Upcoming Events:</div>
+            <div v-for="event in followingEvents" :key="event.name" class="upcoming-row">
+              <span>{{ event.name }}</span>
+              <span class="upcoming-date-mono">{{ event.dateText }}</span>
             </div>
           </div>
         </div>
-      </section>
+      </div>
 
-      <!-- Featured Software Section -->
-      <section v-if="highlightedSoftware" class="mb-16">
-        <div class="featured-card group">
-          <div v-if="highlightedSoftware.software.imageUrl" class="featured-image-panel">
-            <img :src="highlightedSoftware.software.imageUrl" :alt="highlightedSoftware.software.title" class="featured-image" />
+      <!-- Featured Software Window -->
+      <div v-if="highlightedSoftware" class="win-window">
+        <div class="win-titlebar">
+          <span class="win-titlebar-text">🎮 Featured Game</span>
+          <div class="win-titlebar-btns">
+            <button class="win-titlebar-btn">_</button>
+            <button class="win-titlebar-btn">□</button>
+            <button class="win-titlebar-btn">×</button>
           </div>
-          <div class="featured-content">
-            <div class="flex items-center gap-2 mb-4">
-              <span class="featured-badge">Featured Game</span>
+        </div>
+        <div class="win-body featured-body">
+          <div v-if="highlightedSoftware.software.imageUrl" class="featured-img-wrap">
+            <img :src="highlightedSoftware.software.imageUrl" :alt="highlightedSoftware.software.title" class="featured-img" />
+          </div>
+          <div class="featured-info">
+            <div class="featured-badges">
               <span :class="`status-badge status-${highlightedSoftware.software.status}`">{{ highlightedSoftware.software.status }}</span>
-              <span v-if="highlightedStableRelease" class="featured-version-badge">{{ highlightedStableRelease.version }}</span>
+              <span v-if="highlightedStableRelease" class="featured-version">{{ highlightedStableRelease.version }}</span>
             </div>
-            <h2 class="featured-title">{{ highlightedSoftware.software.title }}</h2>
-            <p class="featured-desc">{{ highlightedSoftware.software.desc }}</p>
-
-            <div class="flex flex-wrap gap-4 mt-8">
+            <div class="featured-title">{{ highlightedSoftware.software.title }}</div>
+            <div class="featured-desc">{{ highlightedSoftware.software.desc }}</div>
+            <div class="featured-actions">
               <a
                 v-if="highlightedStableRelease?.htmlFolderPath"
                 :href="highlightedStableRelease.htmlFolderPath"
                 target="_blank"
-                class="featured-btn-play"
+                class="win-btn"
               >▶ Play in Browser</a>
-              <RouterLink :to="`/catalog/${highlightedSoftware.software.name}`" class="featured-btn-secondary">
-                View Project Details
+              <RouterLink :to="`/catalog/${highlightedSoftware.software.name}`" class="win-btn">
+                More Info
               </RouterLink>
             </div>
           </div>
         </div>
-      </section>
+      </div>
 
-      <!-- Latest YouTube Video -->
-      <section class="mb-16">
-        <div class="yt-featured-wrapper group">
-          <div class="yt-glow"></div>
+    </div>
 
-          <div class="yt-header-area">
-            <div class="flex items-center gap-3">
-              <div class="yt-status-blob">
-                <div class="yt-status-dot"></div>
-              </div>
-              <span class="yt-label-text">Latest from YouTube</span>
-            </div>
-            <a href="https://www.youtube.com/@teletypegames" target="_blank" class="yt-channel-link">
-              Visit Channel ↗
-            </a>
-          </div>
-
-          <div class="yt-content-grid">
-            <div class="yt-player-container">
-              <div class="player-wrap relative w-full aspect-video">
-                <div v-if="ytState === 'loading'" class="state-overlay absolute inset-0 flex items-center justify-center bg-slate-950">
-                  <div class="w-10 h-10 border-4 border-white/5 border-t-indigo-500 rounded-full animate-spin"></div>
-                </div>
-                <div v-else-if="ytState === 'error'" class="state-overlay absolute inset-0 flex items-center justify-center bg-slate-950 flex-col gap-2">
-                  <div class="text-xl">⚠️</div>
-                  <div class="text-[11px] text-slate-500 text-center px-4 font-bold uppercase tracking-tighter">{{ ytError }}</div>
-                </div>
-                <div v-else-if="ytState === 'no-config'" class="state-overlay absolute inset-0 flex items-center justify-center bg-slate-950">
-                  <div class="text-slate-500 text-xs">Missing API Configuration</div>
-                </div>
-                <iframe
-                  v-else-if="ytVideoId"
-                  :src="`https://www.youtube.com/embed/${ytVideoId}?autoplay=0&rel=0&modestbranding=1`"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                  allowfullscreen
-                  class="w-full h-full border-none block"
-                ></iframe>
-              </div>
-            </div>
-
-            <div v-if="ytVideoId" class="yt-info-sidebar">
-              <div class="mb-auto">
-                <span class="yt-new-tag">New Release</span>
-                <h3 class="yt-video-title">{{ ytTitle }}</h3>
-                <div class="yt-stats-row">
-                  <span v-if="ytPublishDate">📅 {{ ytPublishDate }}</span>
-                  <span v-if="ytViewCount">👁 {{ ytViewCount }}</span>
-                </div>
-              </div>
-
-              <div class="mt-6">
-                <a :href="`https://www.youtube.com/watch?v=${ytVideoId}`" target="_blank" class="yt-play-button">
-                  <span class="text-xl">▶</span> Watch on YouTube
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Navigation Grid -->
-      <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="nav-card group card-interactive">
-          <div class="nav-card-icon bg-purple-50 group-hover:bg-purple-100">
-            <span class="text-3xl">🎮</span>
-          </div>
-          <h2 class="nav-card-title">Catalog</h2>
-          <p class="nav-card-desc">Here you can find our games. Discover our creations for TIC-80 and other platforms, many of which you can try directly in your browser.</p>
-          <RouterLink to="/catalog" class="btn-primary bg-purple-600 hover:bg-purple-700 text-white hover:shadow-purple-200">
-            Browse Games
-          </RouterLink>
-        </div>
-
-        <div class="nav-card group card-interactive">
-          <div class="nav-card-icon bg-green-50 group-hover:bg-green-100">
-            <span class="text-3xl">📚</span>
-          </div>
-          <h2 class="nav-card-title">Wiki</h2>
-          <p class="nav-card-desc">We gather our public interest development knowledge here. Read through technical descriptions and development logs.</p>
-          <a href="https://wiki.teletype.hu" target="_blank" rel="noopener noreferrer" class="btn-primary bg-green-600 hover:bg-green-700 text-white hover:shadow-green-200">
-            Knowledge Base
-          </a>
-        </div>
-
-        <div class="nav-card group card-interactive">
-          <div class="nav-card-icon bg-slate-50 group-hover:bg-slate-100">
-            <span class="text-3xl">💻</span>
-          </div>
-          <h2 class="nav-card-title">Git Repos</h2>
-          <p class="nav-card-desc">All our projects are open source. Browse our code, study our solutions, or even participate in the development.</p>
-          <a href="https://git.teletype.hu" target="_blank" rel="noopener noreferrer" class="btn-primary bg-slate-800 hover:bg-slate-900 text-white hover:shadow-slate-200">
-            Gitea
-          </a>
-        </div>
-
-        <div class="nav-card group card-interactive">
-          <div class="nav-card-icon bg-red-50 group-hover:bg-red-100">
-            <span class="text-3xl">📺</span>
-          </div>
-          <h2 class="nav-card-title">YouTube</h2>
-          <p class="nav-card-desc">Watch our development vlogs, gameplay videos, and tutorials on our official YouTube channel.</p>
-          <a href="https://www.youtube.com/@teletypegames" target="_blank" rel="noopener noreferrer" class="btn-primary bg-red-600 hover:bg-red-700 text-white hover:shadow-red-200">
-            Watch on YouTube
-          </a>
-        </div>
-      </section>
-
-      <!-- AI Content Notice -->
-      <div class="mb-12 mt-12 bg-white rounded-2xl border border-indigo-100 p-6 shadow-sm flex items-center gap-4">
-        <div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center text-2xl flex-shrink-0">🤖</div>
-        <div class="flex-grow text-slate-600 text-sm md:text-base italic">
-          <strong>Note:</strong> Our HowTo-s and blog posts are written by AI with human supervision.
+    <!-- YouTube Window -->
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">📺 Latest from YouTube</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
         </div>
       </div>
-    </main>
+      <div class="win-body yt-layout">
+        <div class="yt-player win-inset">
+          <div v-if="ytState === 'loading'" class="yt-state">Loading...</div>
+          <div v-else-if="ytState === 'error'" class="yt-state yt-state-error">⚠ {{ ytError }}</div>
+          <div v-else-if="ytState === 'no-config'" class="yt-state">YouTube API not configured.</div>
+          <iframe
+            v-else-if="ytVideoId"
+            :src="`https://www.youtube.com/embed/${ytVideoId}?autoplay=0&rel=0&modestbranding=1`"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            style="width: 100%; height: 100%; border: none; display: block;"
+          ></iframe>
+        </div>
+        <div v-if="ytVideoId" class="yt-info">
+          <div class="yt-title">{{ ytTitle }}</div>
+          <div class="yt-meta">
+            <span v-if="ytPublishDate">{{ ytPublishDate }}</span>
+            <span v-if="ytPublishDate && ytViewCount"> · </span>
+            <span v-if="ytViewCount">{{ ytViewCount }}</span>
+          </div>
+          <div class="yt-actions">
+            <a :href="`https://www.youtube.com/watch?v=${ytVideoId}`" target="_blank" class="win-btn">▶ Watch on YouTube</a>
+            <a href="https://www.youtube.com/@teletypegames" target="_blank" class="win-btn">Visit Channel</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation Window -->
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">🗺 Navigation</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
+        </div>
+      </div>
+      <div class="win-body">
+        <div class="nav-grid">
+          <div class="nav-item win-raised-panel">
+            <div class="nav-icon">🎮</div>
+            <div class="nav-title">Catalog</div>
+            <div class="nav-desc">Discover our games for TIC-80 and other platforms, many playable directly in browser.</div>
+            <RouterLink to="/catalog" class="win-btn nav-btn">Browse Games</RouterLink>
+          </div>
+          <div class="nav-item win-raised-panel">
+            <div class="nav-icon">📚</div>
+            <div class="nav-title">Wiki</div>
+            <div class="nav-desc">Technical descriptions and development logs from our knowledge base.</div>
+            <a href="https://wiki.teletype.hu" target="_blank" class="win-btn nav-btn">Knowledge Base</a>
+          </div>
+          <div class="nav-item win-raised-panel">
+            <div class="nav-icon">💻</div>
+            <div class="nav-title">Git Repos</div>
+            <div class="nav-desc">All our projects are open source. Browse code, study solutions, or contribute.</div>
+            <a href="https://git.teletype.hu" target="_blank" class="win-btn nav-btn">Gitea</a>
+          </div>
+          <div class="nav-item win-raised-panel">
+            <div class="nav-icon">📺</div>
+            <div class="nav-title">YouTube</div>
+            <div class="nav-desc">Development vlogs, gameplay videos, and tutorials on our official channel.</div>
+            <a href="https://www.youtube.com/@teletypegames" target="_blank" class="win-btn nav-btn">Watch on YouTube</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- AI Notice -->
+    <div class="win-notice-info">
+      <span>🤖</span>
+      <span><strong>Note:</strong> Our HowTo-s and blog posts are written by AI with human supervision.</span>
+    </div>
+
   </div>
 </template>
 
@@ -293,132 +284,204 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.home-container {
-  @apply bg-gray-50 min-h-screen pb-20;
-}
-.home-header-decor {
-  @apply absolute inset-0 opacity-30;
+.home-two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 0;
 }
 
-/* Featured Card */
-.featured-card {
-  @apply relative overflow-hidden bg-gradient-to-br from-indigo-900 to-slate-900 rounded-3xl shadow-2xl flex flex-col md:flex-row min-h-[400px];
-}
-.featured-content {
-  @apply p-8 md:p-12 flex flex-col justify-center flex-1 z-10;
-}
-.featured-badge {
-  @apply px-3 py-1 bg-indigo-500/20 text-indigo-300 border border-indigo-400/30 rounded-full text-xs font-bold uppercase tracking-wider;
-}
-.featured-title {
-  @apply text-4xl md:text-5xl font-black text-white mb-6;
-}
-.featured-desc {
-  @apply text-indigo-100/80 text-lg leading-relaxed max-w-xl;
-}
-.featured-btn-play {
-  @apply px-8 py-4 bg-white text-indigo-900 font-bold rounded-xl transition-all hover:scale-105 hover:shadow-xl hover:shadow-indigo-500/20 active:scale-95;
-}
-.featured-btn-secondary {
-  @apply px-8 py-4 bg-indigo-500/10 text-white border border-indigo-400/30 font-bold rounded-xl transition-all hover:bg-indigo-500/20;
-}
-.featured-image-panel {
-  @apply flex-shrink-0 flex items-center justify-center p-6 md:p-8;
-}
-.featured-image {
-  @apply max-h-48 w-auto object-contain border-4 border-white shadow-xl opacity-90 group-hover:opacity-100 transition-opacity;
-}
-.featured-version-badge {
-  @apply px-2 py-0.5 rounded text-[10px] font-bold bg-white/10 text-white/70 border border-white/20;
+@media (max-width: 640px) {
+  .home-two-col {
+    grid-template-columns: 1fr;
+  }
 }
 
-/* Status Badges */
-.status-badge {
-  @apply px-2 py-0.5 rounded text-[10px] font-bold uppercase;
+/* Countdown */
+.countdown-name {
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #000080;
+  margin-bottom: 8px;
 }
-.status-released { @apply bg-green-500/20 text-green-300 border border-green-500/30; }
-.status-demo { @apply bg-blue-500/20 text-blue-300 border border-blue-500/30; }
-.status-development { @apply bg-yellow-500/20 text-yellow-300 border border-yellow-500/30; }
-.status-archived { @apply bg-gray-500/20 text-gray-300 border border-gray-500/30; }
-
-/* Countdown Card */
-.countdown-card {
-  @apply bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100 p-8 md:p-12 text-center transition-all duration-300;
+.countdown-display {
+  display: inline-block;
+  padding: 6px 12px;
+  margin: 4px auto 8px;
 }
-.countdown-event-name {
-  @apply text-2xl font-bold text-gray-400 uppercase tracking-widest mb-2;
-}
-.countdown-timer {
-  @apply text-5xl md:text-7xl font-mono font-black text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-fuchsia-600 my-6;
+.countdown-mono {
+  font-family: "Courier New", Courier, monospace;
+  font-size: 20px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  color: #000080;
 }
 .countdown-date {
-  @apply text-gray-500 text-lg;
+  font-size: 11px;
+  color: #404040;
+  margin-bottom: 4px;
 }
-.upcoming-events-section {
-  @apply mt-12 pt-12 border-t border-gray-100 text-left max-w-2xl mx-auto;
+.upcoming-section {
+  text-align: left;
+  margin-top: 8px;
 }
-.upcoming-events-title {
-  @apply text-xl font-bold text-gray-900 mb-6;
+.upcoming-label {
+  font-size: 11px;
+  font-weight: bold;
+  color: #000080;
+  margin-bottom: 4px;
 }
-.upcoming-event-item {
-  @apply flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-100;
+.upcoming-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 2px 4px;
+  font-size: 12px;
+  border-bottom: 1px solid #D0D0D0;
+}
+.upcoming-row:hover {
+  background: #000080;
+  color: #fff;
+}
+.upcoming-date-mono {
+  font-family: "Courier New", Courier, monospace;
+  font-size: 11px;
+  color: #404040;
+}
+.upcoming-row:hover .upcoming-date-mono {
+  color: #fff;
 }
 
-/* Nav Cards */
-.nav-card {
-  @apply flex flex-col h-full;
+/* Featured */
+.featured-body {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  flex-wrap: wrap;
 }
-.nav-card-icon {
-  @apply w-14 h-14 rounded-xl flex items-center justify-center mb-6 transition-colors;
+.featured-img-wrap { flex-shrink: 0; }
+.featured-img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
 }
-.nav-card-title {
-  @apply text-2xl font-bold text-gray-900 mb-3;
+.featured-info { flex: 1; min-width: 160px; }
+.featured-badges {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
 }
-.nav-card-desc {
-  @apply text-gray-600 mb-6 flex-grow leading-relaxed;
+.featured-version {
+  font-family: "Courier New", Courier, monospace;
+  font-size: 11px;
+  color: #404040;
+}
+.featured-title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+.featured-desc {
+  font-size: 11px;
+  color: #404040;
+  margin-bottom: 10px;
+  line-height: 1.5;
+}
+.featured-actions {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
 }
 
-/* YouTube Featured Wrapper */
-.yt-featured-wrapper {
-  @apply relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-900 to-indigo-950 rounded-3xl shadow-2xl border border-slate-800 p-6 md:p-8;
+/* YouTube */
+.yt-layout {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  flex-wrap: wrap;
 }
-.yt-glow {
-  @apply absolute -top-24 -right-24 w-96 h-96 bg-indigo-500/10 rounded-full blur-[100px] pointer-events-none;
+.yt-player {
+  flex: 1.6;
+  min-width: 200px;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
 }
-.yt-header-area {
-  @apply flex items-center justify-between mb-6 relative z-10;
+.yt-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 120px;
+  font-size: 12px;
+  color: #404040;
+  padding: 16px;
 }
-.yt-status-blob {
-  @apply w-3 h-3 bg-red-500/20 rounded-full flex items-center justify-center;
+.yt-state-error { color: #800000; }
+.yt-info {
+  flex: 1;
+  min-width: 140px;
 }
-.yt-status-dot {
-  @apply w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse;
+.yt-title {
+  font-size: 13px;
+  font-weight: bold;
+  margin-bottom: 4px;
+  color: #000080;
+  line-height: 1.4;
 }
-.yt-label-text {
-  @apply text-xs font-bold uppercase tracking-widest text-slate-400;
+.yt-meta {
+  font-size: 11px;
+  color: #404040;
+  margin-bottom: 10px;
+  font-family: "Courier New", Courier, monospace;
 }
-.yt-channel-link {
-  @apply text-xs font-semibold text-indigo-400 hover:text-indigo-300 transition-colors;
+.yt-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
-.yt-content-grid {
-  @apply flex flex-col lg:flex-row gap-8 relative z-10;
+
+/* Navigation Grid */
+.nav-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
 }
-.yt-player-container {
-  @apply flex-[1.6] overflow-hidden rounded-2xl border border-white/5 shadow-inner bg-black;
+@media (max-width: 768px) {
+  .nav-grid { grid-template-columns: repeat(2, 1fr); }
 }
-.yt-info-sidebar {
-  @apply flex-1 flex flex-col justify-center;
+@media (max-width: 420px) {
+  .nav-grid { grid-template-columns: 1fr; }
 }
-.yt-new-tag {
-  @apply inline-block px-2 py-1 bg-red-500/10 text-red-400 border border-red-500/20 rounded-md text-[10px] font-black uppercase tracking-tighter mb-4;
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 8px;
 }
-.yt-video-title {
-  @apply text-2xl font-black text-white mb-4 leading-tight group-hover:text-indigo-200 transition-colors;
+.nav-icon {
+  font-size: 22px;
+  margin-bottom: 4px;
 }
-.yt-stats-row {
-  @apply flex gap-4 text-sm text-slate-400 font-medium;
+.nav-title {
+  font-size: 13px;
+  font-weight: bold;
+  margin-bottom: 3px;
 }
-.yt-play-button {
-  @apply flex items-center justify-center gap-2 w-full py-4 bg-white text-slate-900 font-black rounded-xl transition-all hover:scale-[1.02] hover:bg-indigo-50 active:scale-95 shadow-xl;
+.nav-desc {
+  font-size: 11px;
+  color: #404040;
+  margin-bottom: 8px;
+  flex-grow: 1;
+  line-height: 1.5;
+}
+.nav-btn {
+  margin-top: auto;
+  min-width: auto;
+  font-size: 11px;
+  padding: 2px 8px 3px;
 }
 </style>
diff --git a/apps/frontend/src/page/howtos/HowtosIndexPage.vue b/apps/frontend/src/page/howtos/HowtosIndexPage.vue
index 35e21e4..f8b10a0 100644
--- a/apps/frontend/src/page/howtos/HowtosIndexPage.vue
+++ b/apps/frontend/src/page/howtos/HowtosIndexPage.vue
@@ -1,79 +1,66 @@
 <template>
-  <div class="howtos-container">
-    <header class="hero-section-slate">
-      <div class="howtos-header-decor">
-        <div class="hero-decor-blob -top-24 -left-24 h-96 w-96 bg-indigo-600"></div>
-        <div class="hero-decor-blob -bottom-24 -right-24 h-96 w-96 bg-purple-600"></div>
-      </div>
-
-      <div class="hero-container">
-        <div class="hero-badge">Knowledge Base</div>
-        <h1 class="hero-title">
-          Tech <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">HowTo Center</span>
-        </h1>
-        <p class="hero-subtitle mb-10">
-          The latest documentation, technical guides, and development logs from our knowledge base.
-        </p>
-        <a :href="WIKI_BASE" target="_blank" class="btn-hero-indigo">
-          Knowledge Base
-        </a>
-      </div>
-    </header>
-
-    <main class="main-container">
-      <div v-if="error" class="error-banner" role="alert">
-        <span class="text-2xl">⚠️</span>
-        <div>
-          <h3 class="error-banner-title">Failed to connect to Wiki</h3>
-          <p class="error-banner-desc">{{ error }}</p>
+  <div class="main-container">
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">📖 Tech HowTo Center</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
         </div>
       </div>
 
-      <div v-else-if="!loading && recentPages.length === 0" class="empty-state">
-        <div class="empty-state-icon">📭</div>
-        <h2 class="empty-state-title">No pages found</h2>
-        <p class="empty-state-desc">It seems like there aren't any public pages available on the wiki at the moment.</p>
+      <div class="win-toolbar">
+        <a :href="WIKI_BASE" target="_blank" class="win-btn win-btn-sm">Open Wiki ↗</a>
+        <span style="font-size: 11px; color: #404040; margin-left: 4px;">
+          Latest documentation, technical guides, and development logs.
+        </span>
       </div>
 
-      <div v-else class="card-grid">
-        <a
-          v-for="page in recentPages"
-          :key="page.id"
-          :href="`${WIKI_BASE}/${page.locale}/${page.path}`"
-          target="_blank"
-          class="group card-interactive flex flex-col"
-        >
-          <div class="howto-card-meta">
-            <div class="howto-card-timestamp">
-              <span v-if="isNew(page.createdAt)" class="new-badge">
-                <span class="new-dot"></span>
-                New
-              </span>
-              <span>{{ formatDateTime(page.updatedAt) }}</span>
+      <div class="win-body" style="padding: 0;">
+
+        <div v-if="error" class="win-notice-error" style="margin: 8px;">
+          <span>⚠</span>
+          <div>
+            <strong>Failed to connect to Wiki</strong><br>
+            <span style="font-size: 11px;">{{ error }}</span>
+          </div>
+        </div>
+
+        <div v-else-if="!loading && recentPages.length === 0" class="empty-state">
+          <div style="font-size: 32px; margin-bottom: 8px;">📭</div>
+          <div style="font-weight: bold; margin-bottom: 4px;">No pages found</div>
+          <div style="font-size: 11px; color: #404040;">No public pages available on the wiki at the moment.</div>
+        </div>
+
+        <div v-else class="howto-grid">
+          <a
+            v-for="page in recentPages"
+            :key="page.id"
+            :href="`${WIKI_BASE}/${page.locale}/${page.path}`"
+            target="_blank"
+            class="howto-card win-raised-panel"
+          >
+            <div class="howto-meta">
+              <span v-if="isNew(page.createdAt)" class="new-badge">★ New</span>
+              <span class="howto-date">{{ formatDateTime(page.updatedAt) }}</span>
             </div>
-          </div>
+            <div class="howto-title">{{ page.title }}</div>
+            <div v-if="page.description" class="howto-desc">{{ page.description }}</div>
+            <div v-else class="howto-no-desc">No description provided.</div>
+            <div class="howto-footer">
+              <span class="howto-path">{{ page.path }}</span>
+              <span class="howto-arrow">Read →</span>
+            </div>
+          </a>
+        </div>
 
-          <h2 class="howto-card-title">{{ page.title }}</h2>
+        <div v-if="!error && recentPages.length > 0" class="howto-more">
+          <a :href="WIKI_BASE" target="_blank" class="win-btn">Browse All Wiki Pages →</a>
+        </div>
 
-          <p v-if="page.description" class="howto-card-desc">{{ page.description }}</p>
-          <div v-else class="howto-card-no-desc">No description provided.</div>
-
-          <div class="howto-card-footer">
-            <span class="howto-card-path">{{ page.path }}</span>
-            <span class="howto-card-read-link">Read <span class="text-lg">→</span></span>
-          </div>
-        </a>
       </div>
-
-      <div v-if="!error && recentPages.length > 0" class="howtos-footer">
-        <a :href="WIKI_BASE" target="_blank" class="browse-wiki-btn">
-          Browse Wiki Home
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
-          </svg>
-        </a>
-      </div>
-    </main>
+    </div>
   </div>
 </template>
 
@@ -103,58 +90,110 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.howtos-container {
-  @apply bg-gray-50 min-h-screen pb-20;
-}
-.howtos-header-decor {
-  @apply absolute inset-0 opacity-30;
-}
-.banner-base {
-  @apply max-w-7xl mx-auto border-l-4 p-6 rounded-r-xl shadow-lg mb-12 flex items-start gap-4;
-}
-.error-banner { @apply banner-base bg-red-50 border-red-500; }
-.error-banner-title { @apply text-red-800 font-bold text-lg; }
-.error-banner-desc { @apply text-red-700 mt-1; }
 .empty-state {
-  @apply max-w-7xl mx-auto bg-white rounded-2xl shadow-xl p-12 text-center border border-gray-100;
+  text-align: center;
+  padding: 24px;
+  color: #404040;
+  font-size: 12px;
 }
-.empty-state-icon { @apply text-6xl mb-4; }
-.empty-state-title { @apply text-2xl font-bold text-gray-900 mb-2; }
-.empty-state-desc { @apply text-gray-500 max-w-md mx-auto; }
-.howto-card-meta {
-  @apply flex items-center justify-end mb-4;
+
+.howto-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  padding: 6px;
 }
-.howto-card-timestamp {
-  @apply flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-gray-400;
+@media (max-width: 768px) {
+  .howto-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 480px) {
+  .howto-grid { grid-template-columns: 1fr; }
+}
+
+.howto-card {
+  display: flex;
+  flex-direction: column;
+  padding: 7px;
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+.howto-card:hover {
+  background: #EEF0F8;
+}
+
+.howto-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 3px;
 }
 .new-badge {
-  @apply flex items-center gap-1 text-green-600 bg-green-50 px-2 py-0.5 rounded-full border border-green-100;
+  font-size: 10px;
+  font-weight: bold;
+  background: #C8F0C8;
+  color: #007000;
+  border: 1px solid #009000;
+  padding: 0 3px;
 }
-.new-dot {
-  @apply w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse;
+.howto-date {
+  font-size: 10px;
+  color: #808080;
+  font-family: "Courier New", Courier, monospace;
 }
-.howto-card-title {
-  @apply text-xl font-bold text-gray-900 group-hover:text-indigo-600 transition-colors mb-2 line-clamp-2 leading-tight;
+.howto-title {
+  font-size: 12px;
+  font-weight: bold;
+  color: #000080;
+  margin-bottom: 3px;
+  line-height: 1.3;
 }
-.howto-card-desc {
-  @apply text-gray-600 text-sm mb-4 line-clamp-3 leading-relaxed flex-grow;
+.howto-card:hover .howto-title { color: #0000FF; }
+.howto-desc {
+  font-size: 11px;
+  color: #404040;
+  margin-bottom: 4px;
+  flex-grow: 1;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
-.howto-card-no-desc {
-  @apply flex-grow mb-4 italic text-gray-400 text-sm;
+.howto-no-desc {
+  font-size: 11px;
+  color: #808080;
+  font-style: italic;
+  flex-grow: 1;
+  margin-bottom: 4px;
 }
-.howto-card-footer {
-  @apply pt-4 border-t border-gray-100 mt-auto flex items-center justify-between;
+.howto-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid #D0D0D0;
+  padding-top: 4px;
+  margin-top: auto;
 }
-.howto-card-path {
-  @apply text-xs font-mono text-gray-400 truncate max-w-[180px];
+.howto-path {
+  font-size: 10px;
+  color: #808080;
+  font-family: "Courier New", Courier, monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 120px;
 }
-.howto-card-read-link {
-  @apply text-indigo-600 text-sm font-bold flex items-center gap-1 group-hover:translate-x-1 transition-transform;
+.howto-arrow {
+  font-size: 11px;
+  color: #000080;
+  font-weight: bold;
+  flex-shrink: 0;
 }
-.howtos-footer {
-  @apply mt-16 text-center;
-}
-.browse-wiki-btn {
-  @apply inline-flex items-center gap-2 bg-slate-900 text-white px-8 py-4 rounded-xl hover:bg-slate-800 transition-all font-bold shadow-lg hover:shadow-indigo-200/50;
+
+.howto-more {
+  padding: 8px;
+  border-top: 1px solid #D0D0D0;
+  text-align: center;
 }
 </style>
diff --git a/apps/frontend/src/page/team/TeamIndexPage.vue b/apps/frontend/src/page/team/TeamIndexPage.vue
index 934ec40..949df60 100644
--- a/apps/frontend/src/page/team/TeamIndexPage.vue
+++ b/apps/frontend/src/page/team/TeamIndexPage.vue
@@ -1,26 +1,36 @@
 <template>
-  <header class="hero-section-gradient from-purple-600 to-blue-700 py-20 text-white">
-    <div class="hero-container text-center">
-      <h1 class="hero-title mb-6">Our Team</h1>
-      <p class="hero-subtitle mb-10 text-purple-100">
-        Meet the brilliant minds behind Teletype Games.
-      </p>
-    </div>
-  </header>
-
-  <main class="main-container py-16 px-4">
-    <div class="team-grid">
-      <div v-for="member in members" :key="member.nick" class="team-card">
-        <div class="team-card-image-container">
-          <img :src="resolvedAvatarUrl(member)" :alt="member.nick" class="team-card-image" />
+  <div class="main-container">
+    <div class="win-window">
+      <div class="win-titlebar">
+        <span class="win-titlebar-text">👥 Our Team</span>
+        <div class="win-titlebar-btns">
+          <button class="win-titlebar-btn">_</button>
+          <button class="win-titlebar-btn">□</button>
+          <button class="win-titlebar-btn">×</button>
         </div>
-        <div class="team-card-content">
-          <h2 class="team-card-title">{{ member.nick }}: {{ member.real_nick }}</h2>
-          <p class="team-card-desc">{{ member.motto }}</p>
+      </div>
+
+      <div class="win-body">
+        <p style="margin: 0 0 8px; font-size: 12px; color: #404040;">
+          Meet the people behind Teletype Games.
+        </p>
+
+        <div class="team-grid">
+          <div v-for="member in members" :key="member.nick" class="team-card win-raised-panel">
+            <div class="team-img-wrap">
+              <img :src="resolvedAvatarUrl(member)" :alt="member.nick" class="team-img" />
+            </div>
+            <div class="team-info">
+              <div class="team-nick">{{ member.nick }}</div>
+              <div class="team-realname">{{ member.real_nick }}</div>
+              <div class="win-separator"></div>
+              <div class="team-motto">{{ member.motto }}</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-  </main>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -46,24 +56,54 @@ onMounted(async () => {
 
 <style scoped>
 .team-grid {
-  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
 }
+@media (max-width: 768px) {
+  .team-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 420px) {
+  .team-grid { grid-template-columns: 1fr; }
+}
+
 .team-card {
-  @apply bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100 transition-all hover:scale-105;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  text-align: center;
 }
-.team-card-image-container {
-  @apply aspect-square overflow-hidden bg-gray-200;
+.team-img-wrap {
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+  margin-bottom: 8px;
+  flex-shrink: 0;
 }
-.team-card-image {
-  @apply w-full h-full object-cover;
+.team-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
-.team-card-content {
-  @apply p-6;
+.team-info { width: 100%; }
+.team-nick {
+  font-size: 13px;
+  font-weight: bold;
+  color: #000080;
+  margin-bottom: 2px;
 }
-.team-card-title {
-  @apply text-xl font-black text-gray-900 mb-2;
+.team-realname {
+  font-size: 11px;
+  color: #404040;
+  margin-bottom: 4px;
 }
-.team-card-desc {
-  @apply text-gray-600 leading-relaxed;
+.team-motto {
+  font-size: 11px;
+  color: #404040;
+  font-style: italic;
+  line-height: 1.4;
 }
 </style>
diff --git a/apps/frontend/src/styles/global.css b/apps/frontend/src/styles/global.css
index 3851beb..1f0c86b 100644
--- a/apps/frontend/src/styles/global.css
+++ b/apps/frontend/src/styles/global.css
@@ -2,98 +2,489 @@
 @tailwind components;
 @tailwind utilities;
 
-html,
-body {
-  margin: 0;
-  width: 100%;
-  height: 100%;
+/* ===== WIN98/2000 DESIGN SYSTEM ===== */
+:root {
+  --w-bg: #D4D0C8;
+  --w-face: #D4D0C8;
+  --w-text: #000000;
+  --w-gray: #808080;
+  --w-dark: #404040;
+  --w-ink: #0a0a0a;
+  --w-white: #FFFFFF;
+  --w-titlebar-start: #000080;
+  --w-titlebar-end: #1084D0;
+  --w-select: #000080;
+  --w-select-text: #FFFFFF;
+  --w-window: #FFFFFF;
+  --w-font: Tahoma, "MS Sans Serif", Arial, sans-serif;
 }
 
+html, body {
+  margin: 0;
+  width: 100%;
+  min-height: 100%;
+  font-family: var(--w-font);
+  font-size: 13px;
+  background: var(--w-bg);
+  color: var(--w-text);
+}
+
+* { box-sizing: border-box; }
+
 @layer components {
-  /* Hero Section */
-  .hero-section {
-    @apply relative overflow-hidden py-24 text-white text-center;
+
+  /* ---- BUTTONS ---- */
+  .win-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 3px 12px 4px;
+    min-height: 23px;
+    min-width: 75px;
+    background: var(--w-face);
+    color: var(--w-text);
+    font-family: var(--w-font);
+    font-size: 12px;
+    cursor: pointer;
+    border: 1px solid #0a0a0a;
+    border-radius: 0;
+    text-decoration: none;
+    white-space: nowrap;
+    box-shadow:
+      inset 1px 1px 0 0 #fff,
+      inset -1px -1px 0 0 #404040,
+      inset 2px 2px 0 0 #D4D0C8,
+      inset -2px -2px 0 0 #808080;
+    user-select: none;
   }
 
-  .hero-section-gradient {
-    @apply hero-section bg-gradient-to-r;
+  .win-btn:active,
+  .win-btn.is-active {
+    box-shadow:
+      inset 1px 1px 0 0 #404040,
+      inset -1px -1px 0 0 #fff,
+      inset 2px 2px 0 0 #808080,
+      inset -2px -2px 0 0 #D4D0C8;
+    padding: 4px 11px 3px 13px;
   }
 
-  .hero-section-slate {
-    @apply hero-section bg-slate-900;
+  .win-btn-sm {
+    @apply win-btn;
+    min-height: 20px;
+    min-width: 50px;
+    padding: 2px 8px 3px;
+    font-size: 11px;
   }
 
-  .hero-container {
-    @apply relative max-w-5xl mx-auto px-4 z-10;
+  .win-btn-default-action {
+    @apply win-btn;
+    border: 2px solid #0a0a0a;
+    font-weight: bold;
   }
 
-  .hero-badge {
-    @apply inline-block px-3 py-1 rounded-full bg-indigo-500/20 border border-indigo-400/30 text-indigo-300 text-sm font-medium mb-6 backdrop-blur-sm;
+  /* ---- WINDOWS ---- */
+  .win-window {
+    background: var(--w-face);
+    border: 1px solid #0a0a0a;
+    box-shadow:
+      inset 1px 1px 0 0 #fff,
+      inset -1px -1px 0 0 #808080;
+    margin-bottom: 8px;
   }
 
-  .hero-title {
-    @apply text-5xl md:text-6xl font-extrabold tracking-tight mb-6;
+  .win-titlebar {
+    background: linear-gradient(to right, var(--w-titlebar-start), var(--w-titlebar-end));
+    color: #fff;
+    font-family: var(--w-font);
+    font-size: 12px;
+    font-weight: bold;
+    padding: 3px 2px 3px 6px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+    min-height: 20px;
+    line-height: 1.3;
   }
 
-  .hero-subtitle {
-    @apply text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed;
+  .win-titlebar-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
   }
 
-  /* Buttons */
-  .btn-hero {
-    @apply inline-flex items-center gap-3 bg-white px-8 py-4 rounded-xl transition-all font-bold shadow-xl hover:scale-105 active:scale-95;
+  .win-titlebar-btns {
+    display: flex;
+    gap: 2px;
+    margin-left: 4px;
+    flex-shrink: 0;
   }
 
-  .btn-hero-teal {
-    @apply btn-hero text-teal-700 hover:bg-teal-50;
+  .win-titlebar-btn {
+    width: 16px;
+    height: 14px;
+    background: var(--w-face);
+    color: var(--w-text);
+    font-size: 9px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    border: 1px solid #0a0a0a;
+    border-radius: 0;
+    user-select: none;
+    box-shadow:
+      inset 1px 1px 0 0 #fff,
+      inset -1px -1px 0 0 #404040,
+      inset 2px 2px 0 0 #D4D0C8,
+      inset -2px -2px 0 0 #808080;
+    flex-shrink: 0;
+    line-height: 1;
   }
 
-  .btn-hero-indigo {
-    @apply btn-hero text-indigo-900 hover:bg-indigo-50;
+  .win-body {
+    padding: 8px;
+    background: var(--w-face);
+    font-family: var(--w-font);
+    font-size: 12px;
   }
 
-  .btn-primary {
-    @apply inline-flex items-center justify-center font-bold py-3 px-8 rounded-xl transition-all shadow-lg;
+  .win-content-area {
+    padding: 8px;
+    background: var(--w-window);
+    box-shadow:
+      inset 1px 1px 0 0 #808080,
+      inset -1px -1px 0 0 #fff;
   }
 
-  /* Grid and Containers */
+  .win-inset {
+    background: var(--w-window);
+    box-shadow:
+      inset 1px 1px 0 0 #808080,
+      inset -1px -1px 0 0 #D4D0C8,
+      inset 2px 2px 0 0 #0a0a0a,
+      inset -2px -2px 0 0 #fff;
+    padding: 4px;
+  }
+
+  .win-raised-panel {
+    background: var(--w-face);
+    box-shadow:
+      inset 1px 1px 0 0 #fff,
+      inset -1px -1px 0 0 #808080;
+    padding: 6px;
+  }
+
+  /* ---- NAVIGATION ---- */
+  .win-menubar {
+    background: var(--w-face);
+    font-family: var(--w-font);
+    font-size: 12px;
+    border-bottom: 1px solid var(--w-gray);
+    box-shadow: 0 1px 0 #fff;
+    display: flex;
+    align-items: stretch;
+    min-height: 22px;
+  }
+
+  .win-menu-logo {
+    font-weight: bold;
+    font-size: 12px;
+    padding: 3px 10px;
+    color: var(--w-text);
+    border-right: 1px solid #808080;
+    box-shadow: inset -1px 0 0 #fff;
+    user-select: none;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    cursor: default;
+  }
+
+  .win-menu-items {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .win-menu-item {
+    padding: 0 8px;
+    color: var(--w-text);
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    cursor: default;
+    user-select: none;
+    font-size: 12px;
+    min-height: 100%;
+  }
+
+  .win-menu-item:hover,
+  .win-menu-item.router-link-exact-active {
+    background: var(--w-select);
+    color: var(--w-select-text);
+  }
+
+  /* ---- STATUS BAR ---- */
+  .win-statusbar {
+    background: var(--w-face);
+    border-top: 1px solid var(--w-gray);
+    box-shadow: inset 0 1px 0 #fff;
+    padding: 2px 4px;
+    font-size: 11px;
+    font-family: var(--w-font);
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .win-status-panel {
+    box-shadow:
+      inset 1px 1px 0 0 #808080,
+      inset -1px -1px 0 0 #fff;
+    padding: 1px 6px;
+    flex: 1;
+    font-size: 11px;
+    line-height: 1.4;
+  }
+
+  /* ---- LAYOUT ---- */
   .main-container {
-    @apply max-w-7xl mx-auto px-4 -mt-12 relative z-10;
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 8px;
+    position: relative;
+    z-index: auto;
+    margin-top: 0 !important;
   }
 
+  /* ---- TOOLBAR ---- */
+  .win-toolbar {
+    background: var(--w-face);
+    padding: 3px 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    border-bottom: 1px solid var(--w-gray);
+    box-shadow: 0 1px 0 #fff;
+    flex-wrap: wrap;
+  }
+
+  /* ---- TABLE ---- */
+  .win-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--w-font);
+    font-size: 12px;
+  }
+
+  .win-table th {
+    background: var(--w-face);
+    text-align: left;
+    padding: 3px 8px;
+    font-weight: bold;
+    border: 1px solid var(--w-gray);
+    white-space: nowrap;
+    cursor: default;
+    box-shadow:
+      inset 1px 1px 0 0 #fff,
+      inset -1px -1px 0 0 #808080;
+  }
+
+  .win-table td {
+    padding: 3px 8px;
+    border-bottom: 1px solid #D0D0D0;
+    vertical-align: top;
+  }
+
+  .win-table tr:hover td {
+    background: var(--w-select);
+    color: var(--w-select-text);
+  }
+
+  .win-table tr:hover td a {
+    color: #fff;
+  }
+
+  /* ---- INPUT ---- */
+  .win-input {
+    border: 1px solid #0a0a0a;
+    border-radius: 0;
+    background: #fff;
+    padding: 2px 4px;
+    font-family: var(--w-font);
+    font-size: 12px;
+    box-shadow:
+      inset 1px 1px 0 0 #808080,
+      inset -1px -1px 0 0 #D4D0C8,
+      inset 2px 2px 0 0 #0a0a0a,
+      inset -2px -2px 0 0 #fff;
+  }
+
+  .win-textarea {
+    @apply win-input;
+    resize: vertical;
+    padding: 4px;
+    min-height: 80px;
+    width: 100%;
+  }
+
+  /* ---- STATUS BADGES ---- */
+  .status-badge {
+    padding: 1px 5px;
+    font-size: 10px;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-family: var(--w-font);
+    border: 1px solid;
+    border-radius: 0;
+  }
+
+  .status-released { background: #C8F0C8; color: #007000; border-color: #009000; }
+  .status-demo { background: #C8C8FF; color: #000080; border-color: #0000C0; }
+  .status-development { background: #FFFFC8; color: #808000; border-color: #B0A000; }
+  .status-archived { background: #E0E0E0; color: #404040; border-color: #808080; }
+
+  /* ---- SEPARATORS ---- */
+  .win-separator {
+    border: none;
+    border-top: 1px solid var(--w-gray);
+    border-bottom: 1px solid #fff;
+    margin: 4px 2px;
+  }
+
+  /* ---- NOTIFICATION BOXES ---- */
+  .win-notice-info {
+    background: #CCCCFF;
+    border-left: 3px solid #0000CC;
+    border: 1px solid #0000CC;
+    padding: 6px 8px;
+    font-size: 12px;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .win-notice-warning {
+    background: #FFFFC8;
+    border: 1px solid #AAAA00;
+    padding: 6px 8px;
+    font-size: 12px;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .win-notice-error {
+    background: #FFCCCC;
+    border: 1px solid #CC0000;
+    padding: 6px 8px;
+    font-size: 12px;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  /* ---- CARD GRID ---- */
   .card-grid {
-    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
+    gap: 6px;
   }
 
-  /* Cards */
   .card-base {
-    @apply bg-white rounded-2xl border border-gray-200 p-6 shadow-sm;
+    @apply win-window;
+    padding: 8px;
   }
 
   .card-interactive {
-    @apply bg-white rounded-2xl border border-gray-200 p-6 shadow-sm hover:shadow-xl transition-all duration-300 ease-out hover:-translate-y-1;
+    @apply win-window;
+    padding: 8px;
+    cursor: default;
   }
 
-  /* Decorative Background Elements */
-  .hero-decor-blob {
-    @apply absolute rounded-full blur-3xl opacity-30;
+  /* ---- LEGACY HERO OVERRIDES ---- */
+  .hero-section,
+  .hero-section-gradient,
+  .hero-section-slate {
+    display: none;
+  }
+
+  .hero-badge,
+  .hero-decor-blob,
+  .hero-container,
+  .home-header-decor,
+  .howtos-header-decor,
+  .blog-header-decor {
+    display: none;
+  }
+
+  .hero-title {
+    font-size: 15px;
+    font-weight: bold;
+    font-family: var(--w-font);
+    color: var(--w-text);
+    margin: 0;
+    text-transform: none;
+  }
+
+  .hero-subtitle {
+    font-size: 12px;
+    font-family: var(--w-font);
+    color: var(--w-dark);
+    margin: 4px 0 0;
+  }
+
+  /* ---- LEGACY BUTTON OVERRIDES ---- */
+  .btn-hero,
+  .btn-hero-teal,
+  .btn-hero-indigo,
+  .btn-primary {
+    @apply win-btn;
+    border-radius: 0 !important;
+    transform: none !important;
   }
 }
 
-/* Wiki content styles (used with v-html) */
-.wiki-content h1 { @apply text-2xl font-bold mt-8 mb-4 text-gray-900; }
-.wiki-content h2 { @apply text-xl font-bold mt-6 mb-3 text-gray-800; }
-.wiki-content h3 { @apply text-lg font-bold mt-4 mb-2 text-gray-800; }
-.wiki-content p { @apply mb-4 text-gray-700 leading-relaxed; }
-.wiki-content ul { @apply list-disc ml-6 mb-4 text-gray-700; }
-.wiki-content ol { @apply list-decimal ml-6 mb-4 text-gray-700; }
-.wiki-content li { @apply mb-1; }
-.wiki-content a { @apply text-indigo-600 hover:underline; }
-.wiki-content img { @apply max-w-full h-auto rounded-lg my-6 shadow-md; }
-.wiki-content pre { @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-6 font-mono text-sm; }
-.wiki-content code { @apply bg-gray-100 text-pink-600 px-1 rounded font-mono text-sm; }
-.wiki-content blockquote { @apply border-l-4 border-gray-300 pl-4 italic my-6 text-gray-600; }
-.wiki-content table { @apply w-full border-collapse my-6; }
-.wiki-content th,
-.wiki-content td { @apply border border-gray-200 p-3 text-left; }
-.wiki-content th { @apply bg-gray-50 font-bold; }
+/* ---- WIKI CONTENT ---- */
+.wiki-content {
+  font-family: var(--w-font);
+  font-size: 13px;
+  color: var(--w-text);
+  line-height: 1.6;
+}
+.wiki-content h1 {
+  font-size: 17px; font-weight: bold; margin: 12px 0 6px; color: #000080;
+  border-bottom: 1px solid var(--w-gray); padding-bottom: 4px;
+}
+.wiki-content h2 { font-size: 15px; font-weight: bold; margin: 10px 0 5px; color: #000060; }
+.wiki-content h3 { font-size: 13px; font-weight: bold; margin: 8px 0 4px; }
+.wiki-content p { margin-bottom: 8px; }
+.wiki-content ul { list-style: disc; margin: 4px 0 8px 20px; }
+.wiki-content ol { list-style: decimal; margin: 4px 0 8px 20px; }
+.wiki-content li { margin-bottom: 2px; }
+.wiki-content a { color: #0000FF; text-decoration: underline; }
+.wiki-content a:visited { color: #800080; }
+.wiki-content img { max-width: 100%; height: auto; border: 1px solid var(--w-gray); margin: 6px 0; }
+.wiki-content pre {
+  background: #000080; color: #C0C0C0; padding: 8px; overflow-x: auto; margin: 8px 0;
+  font-family: "Courier New", Courier, monospace; font-size: 11px;
+}
+.wiki-content code {
+  background: var(--w-window); color: #800000; padding: 1px 4px;
+  font-family: "Courier New", Courier, monospace; font-size: 11px; border: 1px solid var(--w-gray);
+}
+.wiki-content blockquote {
+  border-left: 3px solid var(--w-gray); margin: 6px 0; padding-left: 10px;
+  font-style: italic; color: #404040;
+}
+.wiki-content table { width: 100%; border-collapse: collapse; margin: 8px 0; }
+.wiki-content th { background: #000080; color: #fff; padding: 3px 8px; text-align: left; font-weight: bold; font-size: 11px; }
+.wiki-content td { padding: 3px 8px; border: 1px solid var(--w-gray); font-size: 12px; }
+.wiki-content tr:nth-child(even) td { background: #F0F0F0; }