diff --git a/web/app/app.html b/web/app/app.html
index 6db82947..c828a553 100644
--- a/web/app/app.html
+++ b/web/app/app.html
@@ -1,450 +1,14 @@
 <app>
+
+  <client-nav/>
+  
+  <script src="https://unpkg.com/riot@10/riot+compiler.min.js"></script>
+  
+  <!-- Load the component definition -->
+  <script type="riot" src="client-nav.html"></script>
+
   <script>
-    export default {
-      // Component state
-      data() {
-        return {
-          email: '',
-          password: '',
-          isLoading: false,
-          error: '',
-        };
-      },
+          riot.mount('client-nav');
 
-      // Configuration (ZITADEL)
-      onBeforeMount() {
-        // this.zitadelConfig = {
-        //   authority: 'https://your-zitadel-instance.com',
-        //   clientId: 'your-client-id',
-        //   redirectUri: typeof window !== 'undefined' ? window.location.origin : '',
-        //   scopes: ['openid', 'profile', 'email'],
-        // };
-      },
-
-      // Methods
-      methods: {
-        handleSocialLogin(provider) {
-          this.isLoading = true;
-          this.error = '';
-          try {
-            const authUrl = `${this.zitadelConfig.authority}/oauth/v2/authorize?` +
-              `client_id=${this.zitadelConfig.clientId}&` +
-              `redirect_uri=${encodeURIComponent(this.zitadelConfig.redirectUri)}&` +
-              `response_type=code&` +
-              `scope=${encodeURIComponent(this.zitadelConfig.scopes.join(' '))}&` +
-              `provider=${provider}`;
-            window.location.href = authUrl;
-          } catch (err) {
-            this.error = 'Failed to initiate login';
-            console.error('Login error:', err);
-          } finally {
-            this.isLoading = false;
-          }
-        },
-
-        handleEmailLogin(e) {
-          e.preventDefault();
-          this.isLoading = true;
-          this.error = '';
-          try {
-            // Mock implementation – store dummy token
-            localStorage.setItem('authToken', 'dummy-token');
-            // Navigate to dashboard (adjust path as needed)
-            window.location.href = '/dashboard';
-          } catch (err) {
-            this.error = 'Login failed. Please check your credentials.';
-            console.error('Login error:', err);
-          } finally {
-            this.isLoading = false;
-          }
-        }
-      }
-    };
   </script>
-
-  <div class="auth-screen">
-    <div class="auth-content">
-      <div class="auth-left-panel">
-        <div class="auth-logo">
-          <h1>Welcome to General Bots Online</h1>
-        </div>
-        <div class="auth-quote">
-          <p>"Errar é Humano."</p>
-          <p>General Bots</p>
-        </div>
-      </div>
-
-      <div class="auth-form-container">
-        <div class="auth-form-header">
-          <h2>Sign in to your account</h2>
-          <p>Choose your preferred login method</p>
-        </div>
-
-        <div class="auth-error" if={error}>{error}</div>
-
-        <div class="auth-social-buttons">
-          <button class="auth-social-button google" @click={()=> handleSocialLogin('google')}
-            disabled={isLoading}>
-            <svg class="auth-social-icon" viewBox="0 0 24 24">
-              <path
-                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                fill="#4285F4" />
-              <path
-                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                fill="#34A853" />
-              <path
-                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                fill="#FBBC05" />
-              <path
-                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                fill="#EA4335" />
-            </svg>
-            Continue with Google
-          </button>
-
-          <button class="auth-social-button microsoft" @click={()=> handleSocialLogin('microsoft')}
-            disabled={isLoading}>
-            <svg class="auth-social-icon" viewBox="0 0 23 23">
-              <path d="M0 0h11v11H0zM12 0h11v11H12zM0 12h11v11H0zM12 12h11v11H12z" fill="#F25022" />
-              <path d="M12 0h11v11H12z" fill="#7FBA00" />
-              <path d="M0 12h11v11H0z" fill="#00A4EF" />
-              <path d="M12 12h11v11H12z" fill="#FFB900" />
-            </svg>
-            Continue with Microsoft
-          </button>
-
-          <button class="auth-social-button facebook" @click={()=> handleSocialLogin('facebook')}
-            disabled={isLoading}>
-            <svg class="auth-social-icon" viewBox="0 0 24 24">
-              <path
-                d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"
-                fill="#1877F2" />
-            </svg>
-            Continue with Facebook
-          </button>
-
-          <button class="auth-social-button pragmatismo" @click={()=> handleSocialLogin('pragmatismo')}
-            disabled={isLoading}>
-            <svg class="auth-social-icon" viewBox="0 0 24 24">
-              <path
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
-                fill="currentColor" />
-            </svg>
-            Continue with Pragmatismo
-          </button>
-        </div>
-
-        <div class="auth-divider">
-          <span>OR</span>
-        </div>
-
-        <form class="auth-form" @submit={handleEmailLogin}>
-          <div class="auth-form-group">
-            <label for="email">Email</label>
-            <input id="email" type="email" value={email} oninput={e=> this.email = e.target.value}
-            placeholder="your@email.com" required />
-          </div>
-
-          <div class="auth-form-group">
-            <label for="password">Password</label>
-            <input id="password" type="password" value={password} oninput={e=> this.password = e.target.value}
-            placeholder="••••••••" required />
-          </div>
-
-          <div class="auth-form-options">
-            <div class="auth-remember-me">
-              <input type="checkbox" id="remember" />
-              <label for="remember">Remember me</label>
-            </div>
-            <a href="#" class="auth-forgot-password">Forgot password?</a>
-          </div>
-
-          <button type="submit" class="auth-submit-button" disabled={isLoading}>
-            {isLoading ? 'Signing in...' : 'Sign in with Email'}
-          </button>
-        </form>
-
-        <div class="auth-signup-link">
-          Don't have an account? <a href="#">Sign up</a>
-        </div>
-
-        <p class="auth-terms">
-          By continuing, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
-        </p>
-      </div>
-    </div>
-
-    <style>
-      .auth-screen {
-        --background: hsl(var(--background));
-        --foreground: hsl(var(--foreground));
-        --card: hsl(var(--card));
-        --card-foreground: hsl(var(--card-foreground));
-        --primary: hsl(var(--primary));
-        --primary-foreground: hsl(var(--primary-foreground));
-        --secondary: hsl(var(--secondary));
-        --secondary-foreground: hsl(var(--secondary-foreground));
-        --muted: hsl(var(--muted));
-        --muted-foreground: hsl(var(--muted-foreground));
-        --accent: hsl(var(--accent));
-        --accent-foreground: hsl(var(--accent-foreground));
-        --destructive: hsl(var(--destructive));
-        --destructive-foreground: hsl(var(--destructive-foreground));
-        --border: hsl(var(--border));
-        --input: hsl(var(--input));
-        --ring: hsl(var(--ring));
-        --radius: var(--radius);
-
-        min-height: 100vh;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: var(--background);
-        color: var(--foreground);
-        padding: 1rem;
-      }
-
-      .auth-content {
-        display: flex;
-        width: 100%;
-        max-width: 1200px;
-        background-color: var(--card);
-        border-radius: var(--radius);
-        overflow: hidden;
-        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-      }
-
-      .auth-left-panel {
-        flex: 1;
-        padding: 4rem;
-        background: linear-gradient(135deg, var(--primary), var(--accent));
-        color: var(--primary-foreground);
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-      }
-
-      .auth-logo h1 {
-        font-size: 2rem;
-        margin-bottom: 1rem;
-      }
-
-      .auth-quote {
-        font-style: italic;
-        margin-top: auto;
-      }
-
-      .auth-quote p:last-child {
-        text-align: right;
-        margin-top: 0.5rem;
-      }
-
-      .auth-form-container {
-        flex: 1;
-        padding: 4rem;
-        max-width: 500px;
-      }
-
-      .auth-form-header {
-        margin-bottom: 2rem;
-        text-align: center;
-      }
-
-      .auth-form-header h2 {
-        font-size: 1.5rem;
-        margin-bottom: 0.5rem;
-      }
-
-      .auth-form-header p {
-        color: var(--muted-foreground);
-      }
-
-      .auth-error {
-        background-color: var(--destructive);
-        color: var(--destructive-foreground);
-        padding: 0.75rem;
-        border-radius: var(--radius);
-        margin-bottom: 1rem;
-        text-align: center;
-      }
-
-      .auth-social-buttons {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.75rem;
-        margin-bottom: 1.5rem;
-      }
-
-      .auth-social-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0.75rem;
-        border-radius: var(--radius);
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.2s;
-        border: 1px solid var(--border);
-        background-color: var(--secondary);
-        color: var(--secondary-foreground);
-      }
-
-      .auth-social-button:hover {
-        background-color: var(--muted);
-      }
-
-      .auth-social-button:disabled {
-        opacity: 0.7;
-        cursor: not-allowed;
-      }
-
-      .auth-social-icon {
-        width: 1.25rem;
-        height: 1.25rem;
-        margin-right: 0.5rem;
-      }
-
-      .auth-divider {
-        display: flex;
-        align-items: center;
-        margin: 1.5rem 0;
-        color: var(--muted-foreground);
-      }
-
-      .auth-divider::before,
-      .auth-divider::after {
-        content: "";
-        flex: 1;
-        border-bottom: 1px solid var(--border);
-      }
-
-      .auth-divider span {
-        padding: 0 1rem;
-      }
-
-      .auth-form {
-        margin-top: 1.5rem;
-      }
-
-      .auth-form-group {
-        margin-bottom: 1rem;
-      }
-
-      .auth-form-group label {
-        display: block;
-        margin-bottom: 0.5rem;
-        font-weight: 500;
-      }
-
-      .auth-form-group input {
-        width: 100%;
-        padding: 0.75rem;
-        border-radius: var(--radius);
-        border: 1px solid var(--border);
-        background-color: var(--input);
-        color: var(--foreground);
-      }
-
-      .auth-form-group input:focus {
-        outline: none;
-        border-color: var(--ring);
-        box-shadow: 0 0 0 2px var(--ring);
-      }
-
-      .auth-form-options {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin: 1rem 0;
-      }
-
-      .auth-remember-me {
-        display: flex;
-        align-items: center;
-      }
-
-      .auth-remember-me input {
-        margin-right: 0.5rem;
-      }
-
-      .auth-forgot-password {
-        color: var(--primary);
-        text-decoration: none;
-      }
-
-      .auth-forgot-password:hover {
-        text-decoration: underline;
-      }
-
-      .auth-submit-button {
-        width: 100%;
-        padding: 0.75rem;
-        border-radius: var(--radius);
-        background-color: var(--primary);
-        color: var(--primary-foreground);
-        font-weight: 500;
-        border: none;
-        cursor: pointer;
-        transition: all 0.2s;
-      }
-
-      .auth-submit-button:hover {
-        background-color: color-mix(in srgb, var(--primary), black 10%);
-      }
-
-      .auth-submit-button:disabled {
-        opacity: 0.7;
-        cursor: not-allowed;
-      }
-
-      .auth-signup-link {
-        text-align: center;
-        margin: 1.5rem 0;
-        color: var(--muted-foreground);
-      }
-
-      .auth-signup-link a {
-        color: var(--primary);
-        text-decoration: none;
-      }
-
-      .auth-signup-link a:hover {
-        text-decoration: underline;
-      }
-
-      .auth-terms {
-        text-align: center;
-        font-size: 0.875rem;
-        color: var(--muted-foreground);
-      }
-
-      .auth-terms a {
-        color: var(--primary);
-        text-decoration: none;
-      }
-
-      .auth-terms a:hover {
-        text-decoration: underline;
-      }
-
-      @media (max-width: 768px) {
-        .auth-content {
-          flex-direction: column;
-        }
-
-        .auth-left-panel {
-          padding: 2rem;
-        }
-
-        .auth-form-container {
-          padding: 2rem;
-          max-width: 100%;
-        }
-
-        .auth-social-buttons {
-          grid-template-columns: 1fr;
-        }
-      }
-    </style>
-  </div>
 </app>
\ No newline at end of file
diff --git a/web/app/chat/chat.page.html b/web/app/chat/chat.page.html
index aeac0036..401c9912 100644
--- a/web/app/chat/chat.page.html
+++ b/web/app/chat/chat.page.html
@@ -163,7 +163,7 @@
   </div>
 </template>
 
-<script type="module">
+<script >
 import { useState, useRef } from 'riot';
 import {
   Send, Plus, Menu, Search,
diff --git a/web/app/client-nav.html b/web/app/client-nav.html
index 8ac14721..da35cee5 100644
--- a/web/app/client-nav.html
+++ b/web/app/client-nav.html
@@ -1,278 +1,432 @@
+<client-nav>
+  <script>
+    // Import icons from Lucide (using CDN)
+    import { HardDrive, Terminal, ChevronLeft, ChevronRight } from 'https://cdn.jsdelivr.net/npm/lucide@0.331.0/+esm';
 
-<script type="module">
-  // Import icons from Lucide (using CDN)
-  import { HardDrive, Terminal, ChevronLeft, ChevronRight } from 'https://cdn.jsdelivr.net/npm/lucide@0.331.0/+esm';
+    export default {
+      // Component state
+      data() {
+        return {
+          examples: [
+            { name: "Chat", href: "/chat", color: "#25D366" },
+            { name: "Paper", href: "/paper", color: "#6366F1" },
+            { name: "Mail", href: "/mail", color: "#FFD700" },
+            { name: "Calendar", href: "/calendar", color: "#1DB954" },
+            { name: "Meet", href: "/meet", color: "#059669" },
+            { name: "Drive", href: "/drive", color: "#10B981" },
+            { name: "Editor", href: "/editor", color: "#2563EB" },
+            { name: "Player", href: "/player", color: "Yellow" },
+            { name: "Tables", href: "/tables", color: "#8B5CF6" },
+            { name: "Dashboard", href: "/dashboard", color: "#6366F1" },
+            { name: "Sources", href: "/sources", color: "#F59E0B" },
+            { name: "Settings", href: "/settings", color: "#6B7280" },
+          ],
+          pathname: window.location.pathname,
+          scrollContainer: null,
+          navItems: [],
+          isLoggedIn: false,
+          showLoginMenu: false,
+          showScrollButtons: false,
+          loginMenu: null,
+          showThemeMenu: false,
+          themeMenu: null,
+          currentTime: new Date(),
+          theme: { name: "default", label: "Default", icon: "🎨" },
+          themes: [
+            { name: "retrowave", label: "Retrowave", icon: "🌌" },
+            { name: "vapordream", label: "Vapordream", icon: "🌀" },
+            { name: "y2kglow", label: "Y2K Glow", icon: "💿" },
+            { name: "mellowgold", label: "Mellow Gold", icon: "☮️" },
+            { name: "arcadeflash", label: "Arcade Flash", icon: "🕹️" },
+            { name: "polaroidmemories", label: "Polaroid Memories", icon: "📸" },
+            { name: "midcenturymod", label: "Mid‑Century Mod", icon: "🪑" },
+            { name: "grungeera", label: "Grunge Era", icon: "🎸" },
+            { name: "discofever", label: "Disco Fever", icon: "🪩" },
+            { name: "saturdaycartoons", label: "Saturday Cartoons", icon: "📺" },
+            { name: "oldhollywood", label: "Old Hollywood", icon: "🎬" },
+            { name: "cyberpunk", label: "Cyberpunk", icon: "🤖" },
+            { name: "seasidepostcard", label: "Seaside Postcard", icon: "🏖️" },
+            { name: "typewriter", label: "Typewriter", icon: "⌨️" },
+            { name: "jazzage", label: "Jazz Age", icon: "🎷" },
+            { name: "xtreegold", label: "X‑Tree Gold", icon: "X" },
+          ],
+        };
+      },
 
-  export default {
-    // Component state
-    data() {
-      return {
-        examples: [
-          { name: "Chat", href: "/chat", color: "#25D366" },
-          { name: "Paper", href: "/paper", color: "#6366F1" },
-          { name: "Mail", href: "/mail", color: "#FFD700" },
-          { name: "Calendar", href: "/calendar", color: "#1DB954" },
-          { name: "Meet", href: "/meet", color: "#059669" },
-          { name: "Drive", href: "/drive", color: "#10B981" },
-          { name: "Editor", href: "/editor", color: "#2563EB" },
-          { name: "Player", href: "/player", color: "Yellow" },
-          { name: "Tables", href: "/tables", color: "#8B5CF6" },
-          { name: "Dashboard", href: "/dashboard", color: "#6366F1" },
-          { name: "Sources", href: "/sources", color: "#F59E0B" },
-          { name: "Settings", href: "/settings", color: "#6B7280" },
-        ],
-        pathname: window.location.pathname,
-        scrollContainer: null,
-        navItems: [],
-        isLoggedIn: false,
-        showLoginMenu: false,
-        showScrollButtons: false,
-        loginMenu: null,
-        showThemeMenu: false,
-        themeMenu: null,
-        currentTime: new Date(),
-        theme: { name: "default", label: "Default", icon: "🎨" },
-        themes: [
-          { name: "retrowave", label: "Retrowave", icon: "🌌" },
-          { name: "vapordream", label: "Vapordream", icon: "🌀" },
-          { name: "y2kglow", label: "Y2K Glow", icon: "💿" },
-          { name: "mellowgold", label: "Mellow Gold", icon: "☮️" },
-          { name: "arcadeflash", label: "Arcade Flash", icon: "🕹️" },
-          { name: "polaroidmemories", label: "Polaroid Memories", icon: "📸" },
-          { name: "midcenturymod", label: "Mid‑Century Mod", icon: "🪑" },
-          { name: "grungeera", label: "Grunge Era", icon: "🎸" },
-          { name: "discofever", label: "Disco Fever", icon: "🪩" },
-          { name: "saturdaycartoons", label: "Saturday Cartoons", icon: "📺" },
-          { name: "oldhollywood", label: "Old Hollywood", icon: "🎬" },
-          { name: "cyberpunk", label: "Cyberpunk", icon: "🤖" },
-          { name: "seasidepostcard", label: "Seaside Postcard", icon: "🏖️" },
-          { name: "typewriter", label: "Typewriter", icon: "⌨️" },
-          { name: "jazzage", label: "Jazz Age", icon: "🎷" },
-          { name: "xtreegold", label: "X‑Tree Gold", icon: "X" },
-        ],
-      };
-    },
+      // Lifecycle: component mounted
+      mounted() {
+        // References
+        this.scrollContainer = this.root.querySelector('.nav-scroll');
+        this.loginMenu = this.root.querySelector('.login-menu');
+        this.themeMenu = this.root.querySelector('.theme-menu');
 
-    // Lifecycle: component mounted
-    mounted() {
-      // References
-      this.scrollContainer = this.root.querySelector('.nav-scroll');
-      this.loginMenu = this.root.querySelector('.login-menu');
-      this.themeMenu = this.root.querySelector('.theme-menu');
+        // Initialize nav item refs
+        this.navItems = Array.from(this.root.querySelectorAll('.nav-item'));
 
-      // Initialize nav item refs
-      this.navItems = Array.from(this.root.querySelectorAll('.nav-item'));
+        // Time update interval
+        this.timeInterval = setInterval(() => {
+          this.currentTime = new Date();
+          this.update();
+        }, 1000);
 
-      // Time update interval
-      this.timeInterval = setInterval(() => {
-        this.currentTime = new Date();
-        this.update();
-      }, 1000);
+        // Scroll button visibility
+        this.checkScrollNeeded();
 
-      // Scroll button visibility
-      this.checkScrollNeeded();
+        // Resize listener
+        window.addEventListener('resize', this.checkScrollNeeded);
 
-      // Resize listener
-      window.addEventListener('resize', this.checkScrollNeeded);
+        // Click‑outside handling
+        document.addEventListener('mousedown', this.handleClickOutside);
+      },
 
-      // Click‑outside handling
-      document.addEventListener('mousedown', this.handleClickOutside);
-    },
+      // Cleanup
+      unmounted() {
+        clearInterval(this.timeInterval);
+        window.removeEventListener('resize', this.checkScrollNeeded);
+        document.removeEventListener('mousedown', this.handleClickOutside);
+      },
 
-    // Cleanup
-    unmounted() {
-      clearInterval(this.timeInterval);
-      window.removeEventListener('resize', this.checkScrollNeeded);
-      document.removeEventListener('mousedown', this.handleClickOutside);
-    },
+      // Methods
+      formatTime(date) {
+        return date.toLocaleTimeString('en-US', {
+          hour12: false,
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+        });
+      },
 
-    // Methods
-    formatTime(date) {
-      return date.toLocaleTimeString('en-US', {
-        hour12: false,
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
-      });
-    },
+      formatDate(date) {
+        return date.toLocaleDateString('en-US', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        });
+      },
 
-    formatDate(date) {
-      return date.toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-      });
-    },
+      isActive(href) {
+        if (href === '/') return this.pathname === href;
+        return this.pathname.startsWith(href);
+      },
 
-    isActive(href) {
-      if (href === '/') return this.pathname === href;
-      return this.pathname.startsWith(href);
-    },
-
-    handleLogin() {
-      this.isLoggedIn = true;
-      this.showLoginMenu = false;
-      this.update();
-    },
-
-    handleLogout() {
-      this.isLoggedIn = false;
-      this.showLoginMenu = false;
-      this.update();
-    },
-
-    checkScrollNeeded() {
-      if (this.scrollContainer) {
-        const container = this.scrollContainer;
-        const isScrollable = container.scrollWidth > container.clientWidth;
-        this.showScrollButtons = isScrollable;
-        this.update();
-      }
-    },
-
-    handleClickOutside(event) {
-      if (this.loginMenu && !this.loginMenu.contains(event.target)) {
+      handleLogin() {
+        this.isLoggedIn = true;
         this.showLoginMenu = false;
-      }
-      if (this.themeMenu && !this.themeMenu.contains(event.target)) {
-        this.showThemeMenu = false;
-      }
-      this.update();
-    },
-
-    scrollLeft() {
-      if (this.scrollContainer) {
-        this.scrollContainer.scrollBy({ left: -150, behavior: 'smooth' });
-      }
-    },
-
-    scrollRight() {
-      if (this.scrollContainer) {
-        this.scrollContainer.scrollBy({ left: 150, behavior: 'smooth' });
-      }
-    },
-
-    getThemeIcon() {
-      const found = this.themes.find(t => t.name === this.theme.name);
-      return found ? found.icon : '🎨';
-    },
-
-    setTheme(name) {
-      const found = this.themes.find(t => t.name === name);
-      if (found) {
-        this.theme = found;
-        this.showThemeMenu = false;
         this.update();
-      }
-    },
+      },
 
-    navigate(href) {
-      window.location.href = href;
-    },
-  };
-</script>
+      handleLogout() {
+        this.isLoggedIn = false;
+        this.showLoginMenu = false;
+        this.update();
+      },
 
-<style>
-  /* Basic styles - the original Tailwind classes are kept as comments for reference */
-  .fixed { position: fixed; }
-  .top-0 { top: 0; }
-  .left-0 { left: 0; }
-  .right-0 { right: 0; }
-  .z-50 { z-index: 50; }
-  .bg-gray-800 { background-color: #2d3748; }
-  .text-green-400 { color: #68d391; }
-  .font-mono { font-family: monospace; }
-  .border-b { border-bottom: 1px solid transparent; }
-  .border-green-600 { border-color: #38a169; }
-  .text-xs { font-size: .75rem; }
-  .flex { display: flex; }
-  .items-center { align-items: center; }
-  .justify-between { justify-content: space-between; }
-  .px-4 { padding-left: 1rem; padding-right: 1rem; }
-  .py-1 { padding-top: .25rem; padding-bottom: .25rem; }
-  .gap-4 > * + * { margin-left: 1rem; }
-  .gap-2 > * + * { margin-left: .5rem; }
-  .w-3 { width: .75rem; }
-  .h-3 { height: .75rem; }
-  .text-green-300 { color: #9ae6b4; }
-  .w-2 { width: .5rem; }
-  .h-2 { height: .5rem; }
-  .bg-green-500 { background-color: #48bb78; }
-  .rounded-full { border-radius: 9999px; }
-  .animate-pulse { animation: pulse 2s infinite; }
-  .nav-container { position: relative; }
-  .nav-inner { overflow: hidden; }
-  .nav-content { display: flex; align-items: center; gap: .5rem; }
-  .logo-container img { display: block; }
-  .nav-scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
-  .nav-scroll::-webkit-scrollbar { display: none; }
-  .nav-items { display: flex; gap: .25rem; }
-  .nav-item { padding: .25rem .5rem; border: 1px solid transparent; border-radius: .25rem; cursor: pointer; transition: all .2s; }
-  .nav-item.active { background-color: #2d3748; border-color: #68d391; color: #68d391; }
-  .nav-item:hover { border-color: currentColor; }
-  .auth-controls { display: flex; gap: .5rem; }
-  .login-button, .theme-toggle { background: none; border: none; color: inherit; cursor: pointer; }
-  .login-menu, .theme-menu { position: absolute; background: #1a202c; border: 1px solid #4a5568; padding: .5rem; margin-top: .25rem; border-radius: .25rem; }
-  .menu-item { display: block; width: 100%; text-align: left; padding: .25rem; background: none; border: none; color: #a0aec0; cursor: pointer; }
-  .menu-item:hover { background: #2d3748; }
-  .active-theme { font-weight: bold; }
-</style>
+      checkScrollNeeded() {
+        if (this.scrollContainer) {
+          const container = this.scrollContainer;
+          const isScrollable = container.scrollWidth > container.clientWidth;
+          this.showScrollButtons = isScrollable;
+          this.update();
+        }
+      },
 
-<!-- Markup -->
-<div class="fixed top-0 left-0 right-0 z-50 bg-gray-800 text-green-400 font-mono border-b border-green-600 text-xs">
-  <div class="flex items-center justify-between px-4 py-1">
-    <div class="flex items-center gap-4">
-      <div class="flex items-center gap-2">
-        <HardDrive class="w-3 h-3 text-green-400" />
-        <span class="text-green-300">RETRO NAVIGATOR v4.0</span>
+      handleClickOutside(event) {
+        if (this.loginMenu && !this.loginMenu.contains(event.target)) {
+          this.showLoginMenu = false;
+        }
+        if (this.themeMenu && !this.themeMenu.contains(event.target)) {
+          this.showThemeMenu = false;
+        }
+        this.update();
+      },
+
+      scrollLeft() {
+        if (this.scrollContainer) {
+          this.scrollContainer.scrollBy({ left: -150, behavior: 'smooth' });
+        }
+      },
+
+      scrollRight() {
+        if (this.scrollContainer) {
+          this.scrollContainer.scrollBy({ left: 150, behavior: 'smooth' });
+        }
+      },
+
+      getThemeIcon() {
+        const found = this.themes.find(t => t.name === this.theme.name);
+        return found ? found.icon : '🎨';
+      },
+
+      setTheme(name) {
+        const found = this.themes.find(t => t.name === name);
+        if (found) {
+          this.theme = found;
+          this.showThemeMenu = false;
+          this.update();
+        }
+      },
+
+      navigate(href) {
+        window.location.href = href;
+      },
+    };
+  </script>
+
+  <style>
+    /* Basic styles - the original Tailwind classes are kept as comments for reference */
+    .fixed {
+      position: fixed;
+    }
+
+    .top-0 {
+      top: 0;
+    }
+
+    .left-0 {
+      left: 0;
+    }
+
+    .right-0 {
+      right: 0;
+    }
+
+    .z-50 {
+      z-index: 50;
+    }
+
+    .bg-gray-800 {
+      background-color: #2d3748;
+    }
+
+    .text-green-400 {
+      color: #68d391;
+    }
+
+    .font-mono {
+      font-family: monospace;
+    }
+
+    .border-b {
+      border-bottom: 1px solid transparent;
+    }
+
+    .border-green-600 {
+      border-color: #38a169;
+    }
+
+    .text-xs {
+      font-size: .75rem;
+    }
+
+    .flex {
+      display: flex;
+    }
+
+    .items-center {
+      align-items: center;
+    }
+
+    .justify-between {
+      justify-content: space-between;
+    }
+
+    .px-4 {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    .py-1 {
+      padding-top: .25rem;
+      padding-bottom: .25rem;
+    }
+
+    .gap-4>*+* {
+      margin-left: 1rem;
+    }
+
+    .gap-2>*+* {
+      margin-left: .5rem;
+    }
+
+    .w-3 {
+      width: .75rem;
+    }
+
+    .h-3 {
+      height: .75rem;
+    }
+
+    .text-green-300 {
+      color: #9ae6b4;
+    }
+
+    .w-2 {
+      width: .5rem;
+    }
+
+    .h-2 {
+      height: .5rem;
+    }
+
+    .bg-green-500 {
+      background-color: #48bb78;
+    }
+
+    .rounded-full {
+      border-radius: 9999px;
+    }
+
+    .animate-pulse {
+      animation: pulse 2s infinite;
+    }
+
+    .nav-container {
+      position: relative;
+    }
+
+    .nav-inner {
+      overflow: hidden;
+    }
+
+    .nav-content {
+      display: flex;
+      align-items: center;
+      gap: .5rem;
+    }
+
+    .logo-container img {
+      display: block;
+    }
+
+    .nav-scroll {
+      overflow-x: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+    .nav-scroll::-webkit-scrollbar {
+      display: none;
+    }
+
+    .nav-items {
+      display: flex;
+      gap: .25rem;
+    }
+
+    .nav-item {
+      padding: .25rem .5rem;
+      border: 1px solid transparent;
+      border-radius: .25rem;
+      cursor: pointer;
+      transition: all .2s;
+    }
+
+    .nav-item.active {
+      background-color: #2d3748;
+      border-color: #68d391;
+      color: #68d391;
+    }
+
+    .nav-item:hover {
+      border-color: currentColor;
+    }
+
+    .auth-controls {
+      display: flex;
+      gap: .5rem;
+    }
+
+    .login-button,
+    .theme-toggle {
+      background: none;
+      border: none;
+      color: inherit;
+      cursor: pointer;
+    }
+
+    .login-menu,
+    .theme-menu {
+      position: absolute;
+      background: #1a202c;
+      border: 1px solid #4a5568;
+      padding: .5rem;
+      margin-top: .25rem;
+      border-radius: .25rem;
+    }
+
+    .menu-item {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: .25rem;
+      background: none;
+      border: none;
+      color: #a0aec0;
+      cursor: pointer;
+    }
+
+    .menu-item:hover {
+      background: #2d3748;
+    }
+
+    .active-theme {
+      font-weight: bold;
+    }
+  </style>
+
+  <!-- Markup -->
+  <div class="fixed top-0 left-0 right-0 z-50 bg-gray-800 text-green-400 font-mono border-b border-green-600 text-xs">
+    <div class="flex items-center justify-between px-4 py-1">
+      <div class="flex items-center gap-4">
+        <div class="flex items-center gap-2">
+          <HardDrive class="w-3 h-3 text-green-400" />
+          <span class="text-green-300">RETRO NAVIGATOR v4.0</span>
+        </div>
+        <div class="flex items-center gap-1">
+          <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+          <span class="text-green-400">READY</span>
+        </div>
+        <div class="flex items-center gap-1">
+          <span class="text-green-300">THEME:</span>
+          <span class="text-yellow-400">{theme.label}</span>
+        </div>
       </div>
-      <div class="flex items-center gap-1">
-        <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-        <span class="text-green-400">READY</span>
-      </div>
-      <div class="flex items-center gap-1">
-        <span class="text-green-300">THEME:</span>
-        <span class="text-yellow-400">{theme.label}</span>
-      </div>
-    </div>
-    <div class="flex items-center gap-4">
-      <span class="text-green-300">{formatDate(currentTime)}</span>
-      <span class="text-green-300">{formatTime(currentTime)}</span>
-      <div class="flex items-center gap-1">
-        <Terminal class="w-3 h-3 text-green-400" />
-        <span class="text-green-400">SYS</span>
+      <div class="flex items-center gap-4">
+        <span class="text-green-300">{formatDate(currentTime)}</span>
+        <span class="text-green-300">{formatTime(currentTime)}</span>
+        <div class="flex items-center gap-1">
+          <Terminal class="w-3 h-3 text-green-400" />
+          <span class="text-green-400">SYS</span>
+        </div>
       </div>
     </div>
   </div>
-</div>
 
-<div class="nav-container" style="top:24px;">
-  <div class="nav-inner">
-    <div class="nav-content">
-      <div class="logo-container">
-        <img src="/images/generalbots-logo.svg" alt="Logo" width="64" height="24" />
-      </div>
+  <div class="nav-container" style="top:24px;">
+    <div class="nav-inner">
+      <div class="nav-content">
+        <div class="logo-container">
+          <img src="/images/generalbots-logo.svg" alt="Logo" width="64" height="24" />
+        </div>
 
-      {#if showScrollButtons}
-        <button class="w-8 h-8 bg-gray-800 border border-green-600 text-green-400 rounded hover:bg-green-900/30 hover:border-green-500 hover:text-green-300 transition-all flex items-center justify-center flex-shrink-0 mx-1"
-                @click="scrollLeft" aria-label="Scroll left">
+        {#if showScrollButtons}
+        <button
+          class="w-8 h-8 bg-gray-800 border border-green-600 text-green-400 rounded hover:bg-green-900/30 hover:border-green-500 hover:text-green-300 transition-all flex items-center justify-center flex-shrink-0 mx-1"
+          @click="scrollLeft" aria-label="Scroll left">
           <ChevronLeft class="w-4 h-4" />
         </button>
-      {/if}
+        {/if}
 
-      <div class="nav-scroll">
-        <div class="nav-items">
-          {#each examples as example, index}
-            <button class="nav-item {isActive(example.href) ? 'active' : ''}"
-                    @click="{() => navigate(example.href)}"
-                    style="--neon-color:{example.color}"
-                    @mouseenter="{(e) => {
+        <div class="nav-scroll">
+          <div class="nav-items">
+            {#each examples as example, index}
+            <button class="nav-item {isActive(example.href) ? 'active' : ''}" @click="{() => navigate(example.href)}"
+              style="--neon-color:{example.color}" @mouseenter="{(e) => {
                       e.target.style.boxShadow = `0 0 15px ${example.color}60`;
                       e.target.style.borderColor = example.color;
                       e.target.style.color = example.color;
                       e.target.style.textShadow = `0 0 8px ${example.color}80`;
-                    }}"
-                    @mouseleave="{(e) => {
+                    }}" @mouseleave="{(e) => {
                       if (!isActive(example.href)) {
                         e.target.style.boxShadow = 'none';
                         e.target.style.borderColor = '';
@@ -283,58 +437,57 @@
               {example.name}
               <div class="neon-glow"></div>
             </button>
-          {/each}
+            {/each}
+          </div>
         </div>
-      </div>
 
-      {#if showScrollButtons}
-        <button class="w-8 h-8 bg-gray-800 border border-green-600 text-green-400 rounded hover:bg-green-900/30 hover:border-green-500 hover:text-green-300 transition-all flex items-center justify-center flex-shrink-0 mx-1"
-                @click="scrollRight" aria-label="Scroll right">
+        {#if showScrollButtons}
+        <button
+          class="w-8 h-8 bg-gray-800 border border-green-600 text-green-400 rounded hover:bg-green-900/30 hover:border-green-500 hover:text-green-300 transition-all flex items-center justify-center flex-shrink-0 mx-1"
+          @click="scrollRight" aria-label="Scroll right">
           <ChevronRight class="w-4 h-4" />
         </button>
-      {/if}
+        {/if}
 
-      <div class="auth-controls">
-        <div class="login-container" bind:this="{loginMenu}">
-          <button @click="{() => showLoginMenu = !showLoginMenu}"
-                  class="login-button"
-                  aria-label="{isLoggedIn ? 'User menu' : 'Login'}">
-            {isLoggedIn ? '👤' : '🔐'}
-          </button>
+        <div class="auth-controls">
+          <div class="login-container" bind:this="{loginMenu}">
+            <button @click="{() => showLoginMenu = !showLoginMenu}" class="login-button"
+              aria-label="{isLoggedIn ? 'User menu' : 'Login'}">
+              {isLoggedIn ? '👤' : '🔐'}
+            </button>
 
-          {#if showLoginMenu}
+            {#if showLoginMenu}
             <div class="login-menu">
               {#if !isLoggedIn}
-                <button @click="handleLogin" class="menu-item">Login</button>
+              <button @click="handleLogin" class="menu-item">Login</button>
               {:else}
-                <button @click="handleLogout" class="menu-item">Logout</button>
+              <button @click="handleLogout" class="menu-item">Logout</button>
               {/if}
             </div>
-          {/if}
-        </div>
+            {/if}
+          </div>
 
-        <div class="theme-container" bind:this="{themeMenu}">
-          <button @click="{() => showThemeMenu = !showThemeMenu}"
-                  class="theme-toggle"
-                  aria-label="Change theme">
-            {getThemeIcon()}
-          </button>
+          <div class="theme-container" bind:this="{themeMenu}">
+            <button @click="{() => showThemeMenu = !showThemeMenu}" class="theme-toggle" aria-label="Change theme">
+              {getThemeIcon()}
+            </button>
 
-          {#if showThemeMenu}
+            {#if showThemeMenu}
             <div class="theme-menu">
               {#each themes as t}
-                <button @click="{() => setTheme(t.name)}"
-                        class="theme-menu-item {theme.name === t.name ? 'active-theme' : ''}">
-                  {t.label}
-                </button>
+              <button @click="{() => setTheme(t.name)}"
+                class="theme-menu-item {theme.name === t.name ? 'active-theme' : ''}">
+                {t.label}
+              </button>
               {/each}
             </div>
-          {/if}
+            {/if}
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
 
-<div class="nav-spacer" style="height:88px;"></div>
-</div>
+  <div class="nav-spacer" style="height:88px;"></div>
+  </div>
+</client-nav>
\ No newline at end of file
diff --git a/web/app/dashboard/dashboard.page.html b/web/app/dashboard/dashboard.page.html
index 6c8e61e2..7af293f6 100644
--- a/web/app/dashboard/dashboard.page.html
+++ b/web/app/dashboard/dashboard.page.html
@@ -35,7 +35,7 @@
   </div>
 </template>
 
-<script type="module">
+<script >
 import { useState } from 'riot';
 import './style.css';
 
diff --git a/web/app/drive/drive.page.html b/web/app/drive/drive.page.html
index 7403089b..ade3c4db 100644
--- a/web/app/drive/drive.page.html
+++ b/web/app/drive/drive.page.html
@@ -84,7 +84,7 @@
   </div>
 </template>
 
-<script type="module">
+<script >
 import { useState, useEffect } from 'riot';
 import {
   Search, Download, Trash2, Share, Star,
diff --git a/web/app/editor/editor.page.html b/web/app/editor/editor.page.html
index e961a2f7..7bd99a0b 100644
--- a/web/app/editor/editor.page.html
+++ b/web/app/editor/editor.page.html
@@ -163,7 +163,7 @@
   </div>
 </template>
 
-<script type="module">
+<script >
 <!-- Removed unused Riot imports -->
 import { useEditor, EditorContent, BubbleMenu, AnyExtension } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
diff --git a/web/app/index.html b/web/app/index.html
index 7b3d48e8..f0d69817 100644
--- a/web/app/index.html
+++ b/web/app/index.html
@@ -6,19 +6,16 @@
 </head>
 
 <body>
-  <link rel="stylesheet" href="public/output.css" />
-  <link rel="stylesheet" href="client-nav.css" />
   <app></app>
-  <script src="app.html" type="riot"></script>
 
   <script src="https://unpkg.com/riot@10/riot+compiler.min.js"></script>
-    <script>
-      riot.compile().then(() => {
-        riot.mount('app', {
-          title: 'General Bots',
-        })
-      })
-    </script>
+  <script src="app.html" type="riot"></script>
+
+  <script>
+    riot.compile().then(() => {
+      riot.mount('app');
+    });
+  </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/web/app/news/news.page.html b/web/app/news/news.page.html
index 8f003263..301a2d9b 100644
--- a/web/app/news/news.page.html
+++ b/web/app/news/news.page.html
@@ -5,7 +5,7 @@
   </div>
 </template>
 
-<script type="module">
+<script >
 import './style.css';
 
 export default {
diff --git a/web/app/paper/paper.page.html b/web/app/paper/paper.page.html
index 1da9ced8..20ea393a 100644
--- a/web/app/paper/paper.page.html
+++ b/web/app/paper/paper.page.html
@@ -92,7 +92,7 @@
   </div>
 </template>
 
-<script type="module">
+<script >
 import { useState, useRef, useEffect } from 'riot';
 import { useEditor, EditorContent, BubbleMenu, AnyExtension } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
diff --git a/web/app/settings/layout.html b/web/app/settings/layout.html
index 464edddc..01177aa9 100644
--- a/web/app/settings/layout.html
+++ b/web/app/settings/layout.html
@@ -21,7 +21,7 @@
   </div>
 </template>
 
-<script type="module">
+<script >
 import './style.css';
 import './components/sidebar-nav.html';
 
diff --git a/web/app/settings/page.html b/web/app/settings/page.html
index b8e2bbb9..83767644 100644
--- a/web/app/settings/page.html
+++ b/web/app/settings/page.html
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script type="module">
+<script >
 import './profile-form.html';
 import './style.css';
 
diff --git a/web/app/settings/profile-form.html b/web/app/settings/profile-form.html
index 12134e4c..395de3d4 100644
--- a/web/app/settings/profile-form.html
+++ b/web/app/settings/profile-form.html
@@ -49,7 +49,7 @@
   </div>
 </template>
 
-<script type="module">
+<script >
 import { useState } from 'riot';
 import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
diff --git a/web/app/theme-provider.html b/web/app/theme-provider.html
index cc76d0ea..75bcce54 100644
--- a/web/app/theme-provider.html
+++ b/web/app/theme-provider.html
@@ -1,5 +1,5 @@
 <!-- Riot component: theme-provider.html (converted from app/theme-provider.tsx) -->
-<script type="module">
+<script >
   // This component replicates the ThemeProvider logic without React.
   // It manages theme selection and persists the choice in localStorage.
   export default {
diff --git a/web/app/welcome.html b/web/app/welcome.html
new file mode 100644
index 00000000..7087870a
--- /dev/null
+++ b/web/app/welcome.html
@@ -0,0 +1,451 @@
+<welcome>
+  <script>
+    export default {
+      // Component state
+      data() {
+        return {
+          email: '',
+          password: '',
+          isLoading: false,
+          error: '',
+        };
+      },
+
+      // Configuration (ZITADEL)
+      onBeforeMount() {
+        // this.zitadelConfig = {
+        //   authority: 'https://your-zitadel-instance.com',
+        //   clientId: 'your-client-id',
+        //   redirectUri: typeof window !== 'undefined' ? window.location.origin : '',
+        //   scopes: ['openid', 'profile', 'email'],
+        // };
+      },
+
+      // Methods
+      methods: {
+        handleSocialLogin(provider) {
+          this.isLoading = true;
+          this.error = '';
+          try {
+            const authUrl = `${this.zitadelConfig.authority}/oauth/v2/authorize?` +
+              `client_id=${this.zitadelConfig.clientId}&` +
+              `redirect_uri=${encodeURIComponent(this.zitadelConfig.redirectUri)}&` +
+              `response_type=code&` +
+              `scope=${encodeURIComponent(this.zitadelConfig.scopes.join(' '))}&` +
+              `provider=${provider}`;
+            window.location.href = authUrl;
+          } catch (err) {
+            this.error = 'Failed to initiate login';
+            console.error('Login error:', err);
+          } finally {
+            this.isLoading = false;
+          }
+        },
+
+        handleEmailLogin(e) {
+          e.preventDefault();
+          this.isLoading = true;
+          this.error = '';
+          try {
+            // Mock implementation – store dummy token
+            localStorage.setItem('authToken', 'dummy-token');
+            // Navigate to dashboard (adjust path as needed)
+            window.location.href = '/dashboard';
+          } catch (err) {
+            this.error = 'Login failed. Please check your credentials.';
+            console.error('Login error:', err);
+          } finally {
+            this.isLoading = false;
+          }
+        }
+      }
+    };
+  </script>
+
+  <div class="auth-screen">
+    <div class="auth-content">
+      <div class="auth-left-panel">
+        <div class="auth-logo">
+          <h1>Welcome to General Bots Online</h1>
+        </div>
+        <div class="auth-quote">
+          <p>"Errar é Humano."</p>
+          <p>General Bots</p>
+        </div>
+      </div>
+
+      <div class="auth-form-container">
+        <div class="auth-form-header">
+          <h2>Sign in to your account</h2>
+          <p>Choose your preferred login method</p>
+        </div>
+
+        <div class="auth-error" if={error}>{error}</div>
+
+        <div class="auth-social-buttons">
+          <button class="auth-social-button google" @click={()=> handleSocialLogin('google')}
+            disabled={isLoading}>
+            <svg class="auth-social-icon" viewBox="0 0 24 24">
+              <path
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                fill="#4285F4" />
+              <path
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                fill="#34A853" />
+              <path
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                fill="#FBBC05" />
+              <path
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                fill="#EA4335" />
+            </svg>
+            Continue with Google
+          </button>
+
+          <button class="auth-social-button microsoft" @click={()=> handleSocialLogin('microsoft')}
+            disabled={isLoading}>
+            <svg class="auth-social-icon" viewBox="0 0 23 23">
+              <path d="M0 0h11v11H0zM12 0h11v11H12zM0 12h11v11H0zM12 12h11v11H12z" fill="#F25022" />
+              <path d="M12 0h11v11H12z" fill="#7FBA00" />
+              <path d="M0 12h11v11H0z" fill="#00A4EF" />
+              <path d="M12 12h11v11H12z" fill="#FFB900" />
+            </svg>
+            Continue with Microsoft
+          </button>
+
+          <button class="auth-social-button facebook" @click={()=> handleSocialLogin('facebook')}
+            disabled={isLoading}>
+            <svg class="auth-social-icon" viewBox="0 0 24 24">
+              <path
+                d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"
+                fill="#1877F2" />
+            </svg>
+            Continue with Facebook
+          </button>
+
+          <button class="auth-social-button pragmatismo" @click={()=> handleSocialLogin('pragmatismo')}
+            disabled={isLoading}>
+            <svg class="auth-social-icon" viewBox="0 0 24 24">
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
+                fill="currentColor" />
+            </svg>
+            Continue with Pragmatismo
+          </button>
+        </div>
+
+        <div class="auth-divider">
+          <span>OR</span>
+        </div>
+
+        <form class="auth-form" @submit={handleEmailLogin}>
+          <div class="auth-form-group">
+            <label for="email">Email</label>
+            <input id="email" type="email" value={email} oninput={e=> this.email = e.target.value}
+            placeholder="your@email.com" required />
+          </div>
+
+          <div class="auth-form-group">
+            <label for="password">Password</label>
+            <input id="password" type="password" value={password} oninput={e=> this.password = e.target.value}
+            placeholder="••••••••" required />
+          </div>
+
+          <div class="auth-form-options">
+            <div class="auth-remember-me">
+              <input type="checkbox" id="remember" />
+              <label for="remember">Remember me</label>
+            </div>
+            <a href="#" class="auth-forgot-password">Forgot password?</a>
+          </div>
+
+          <button type="submit" class="auth-submit-button" disabled={isLoading}>
+            {isLoading ? 'Signing in...' : 'Sign in with Email'}
+          </button>
+        </form>
+
+        <div class="auth-signup-link">
+          Don't have an account? <a href="#">Sign up</a>
+        </div>
+
+        <p class="auth-terms">
+          By continuing, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+        </p>
+      </div>
+    </div>
+
+    <style>
+      .auth-screen {
+        --background: hsl(var(--background));
+        --foreground: hsl(var(--foreground));
+        --card: hsl(var(--card));
+        --card-foreground: hsl(var(--card-foreground));
+        --primary: hsl(var(--primary));
+        --primary-foreground: hsl(var(--primary-foreground));
+        --secondary: hsl(var(--secondary));
+        --secondary-foreground: hsl(var(--secondary-foreground));
+        --muted: hsl(var(--muted));
+        --muted-foreground: hsl(var(--muted-foreground));
+        --accent: hsl(var(--accent));
+        --accent-foreground: hsl(var(--accent-foreground));
+        --destructive: hsl(var(--destructive));
+        --destructive-foreground: hsl(var(--destructive-foreground));
+        --border: hsl(var(--border));
+        --input: hsl(var(--input));
+        --ring: hsl(var(--ring));
+        --radius: var(--radius);
+
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--background);
+        color: var(--foreground);
+        padding: 1rem;
+      }
+
+      .auth-content {
+        display: flex;
+        width: 100%;
+        max-width: 1200px;
+        background-color: var(--card);
+        border-radius: var(--radius);
+        overflow: hidden;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+      }
+
+      .auth-left-panel {
+        flex: 1;
+        padding: 4rem;
+        background: linear-gradient(135deg, var(--primary), var(--accent));
+        color: var(--primary-foreground);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+
+      .auth-logo h1 {
+        font-size: 2rem;
+        margin-bottom: 1rem;
+      }
+
+      .auth-quote {
+        font-style: italic;
+        margin-top: auto;
+      }
+
+      .auth-quote p:last-child {
+        text-align: right;
+        margin-top: 0.5rem;
+      }
+
+      .auth-form-container {
+        flex: 1;
+        padding: 4rem;
+        max-width: 500px;
+      }
+
+      .auth-form-header {
+        margin-bottom: 2rem;
+        text-align: center;
+      }
+
+      .auth-form-header h2 {
+        font-size: 1.5rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .auth-form-header p {
+        color: var(--muted-foreground);
+      }
+
+      .auth-error {
+        background-color: var(--destructive);
+        color: var(--destructive-foreground);
+        padding: 0.75rem;
+        border-radius: var(--radius);
+        margin-bottom: 1rem;
+        text-align: center;
+      }
+
+      .auth-social-buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.75rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .auth-social-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.75rem;
+        border-radius: var(--radius);
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: 1px solid var(--border);
+        background-color: var(--secondary);
+        color: var(--secondary-foreground);
+      }
+
+      .auth-social-button:hover {
+        background-color: var(--muted);
+      }
+
+      .auth-social-button:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+      }
+
+      .auth-social-icon {
+        width: 1.25rem;
+        height: 1.25rem;
+        margin-right: 0.5rem;
+      }
+
+      .auth-divider {
+        display: flex;
+        align-items: center;
+        margin: 1.5rem 0;
+        color: var(--muted-foreground);
+      }
+
+      .auth-divider::before,
+      .auth-divider::after {
+        content: "";
+        flex: 1;
+        border-bottom: 1px solid var(--border);
+      }
+
+      .auth-divider span {
+        padding: 0 1rem;
+      }
+
+      .auth-form {
+        margin-top: 1.5rem;
+      }
+
+      .auth-form-group {
+        margin-bottom: 1rem;
+      }
+
+      .auth-form-group label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+      }
+
+      .auth-form-group input {
+        width: 100%;
+        padding: 0.75rem;
+        border-radius: var(--radius);
+        border: 1px solid var(--border);
+        background-color: var(--input);
+        color: var(--foreground);
+      }
+
+      .auth-form-group input:focus {
+        outline: none;
+        border-color: var(--ring);
+        box-shadow: 0 0 0 2px var(--ring);
+      }
+
+      .auth-form-options {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 1rem 0;
+      }
+
+      .auth-remember-me {
+        display: flex;
+        align-items: center;
+      }
+
+      .auth-remember-me input {
+        margin-right: 0.5rem;
+      }
+
+      .auth-forgot-password {
+        color: var(--primary);
+        text-decoration: none;
+      }
+
+      .auth-forgot-password:hover {
+        text-decoration: underline;
+      }
+
+      .auth-submit-button {
+        width: 100%;
+        padding: 0.75rem;
+        border-radius: var(--radius);
+        background-color: var(--primary);
+        color: var(--primary-foreground);
+        font-weight: 500;
+        border: none;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .auth-submit-button:hover {
+        background-color: color-mix(in srgb, var(--primary), black 10%);
+      }
+
+      .auth-submit-button:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+      }
+
+      .auth-signup-link {
+        text-align: center;
+        margin: 1.5rem 0;
+        color: var(--muted-foreground);
+      }
+
+      .auth-signup-link a {
+        color: var(--primary);
+        text-decoration: none;
+      }
+
+      .auth-signup-link a:hover {
+        text-decoration: underline;
+      }
+
+      .auth-terms {
+        text-align: center;
+        font-size: 0.875rem;
+        color: var(--muted-foreground);
+      }
+
+      .auth-terms a {
+        color: var(--primary);
+        text-decoration: none;
+      }
+
+      .auth-terms a:hover {
+        text-decoration: underline;
+      }
+
+      @media (max-width: 768px) {
+        .auth-content {
+          flex-direction: column;
+        }
+
+        .auth-left-panel {
+          padding: 2rem;
+        }
+
+        .auth-form-container {
+          padding: 2rem;
+          max-width: 100%;
+        }
+
+        .auth-social-buttons {
+          grid-template-columns: 1fr;
+        }
+      }
+    
+    </style>
+  </div>
+</welcome>
\ No newline at end of file