diff --git a/website/PRODUCTS_PAGE_README.MD b/website/PRODUCTS_PAGE_README.MD
new file mode 100644
index 000000000..e4a1188be
--- /dev/null
+++ b/website/PRODUCTS_PAGE_README.MD
@@ -0,0 +1,306 @@
+# Jan Products Page - Retro-Tech Design System
+
+A futuristic products showcase page that combines the nostalgic aesthetics of RadioShack's electronic components with PostHog's modern data visualization approach. This creates a unique "retro-tech" visual language that feels both familiar and cutting-edge.
+
+## Design Philosophy
+
+### RadioShack + PostHog = Retro-Tech
+- **RadioShack Heritage**: Circuit board patterns, electronic components, terminal interfaces, amber/green CRT colors
+- **PostHog Influence**: Clean data cards, status indicators, system metrics, dashboard layouts
+- **Result**: A cohesive aesthetic that makes AI products feel like sophisticated electronic equipment
+
+### Color Palette
+```css
+--retro-green: #00ff41    /* Matrix green, primary brand */
+--retro-amber: #ffb000    /* Classic terminal amber */
+--retro-blue: #00bfff     /* Processing/loading states */
+--retro-red: #ff0040      /* Error/warning states */
+--retro-cyan: #00ffff     /* Accent highlights */
+--retro-magenta: #ff00ff  /* Special effects */
+```
+
+## Architecture
+
+### File Structure
+```
+jan/website/src/
+├── pages/
+│   └── prods.astro              # Main products page
+├── components/
+│   ├── CircuitBackground.astro  # Animated circuit patterns
+│   ├── StatusIndicator.astro    # System status components
+│   ├── RetroCard.astro          # Terminal-style cards
+│   └── FloatingNav.astro        # Floating navigation menu
+├── layouts/
+│   └── Layout.astro             # Base layout with GSAP
+└── styles/
+    └── retro-effects.css        # Advanced visual effects
+```
+
+### Component Hierarchy
+```
+Layout
+└── Products Page
+    ├── FloatingNav (right-side navigation)
+    ├── Hero Section
+    │   └── CircuitBackground (animated)
+    ├── Table of Contents
+    ├── Models Section
+    │   └── RetroCard (circuit variant)
+    ├── Platforms Section
+    │   └── RetroCard (data/system variants)
+    ├── Tools Section
+    │   └── RetroCard (terminal variant)
+    └── Integration Section
+```
+
+## Components Deep Dive
+
+### CircuitBackground.astro
+Creates animated circuit board patterns with electronic components.
+
+**Props:**
+- `variant`: 'subtle' | 'prominent' | 'animated'
+- `color`: 'green' | 'amber' | 'blue' | 'multi'
+- `density`: 'low' | 'medium' | 'high'
+- `animated`: boolean
+- `opacity`: number (0-1)
+
+**Features:**
+- Procedural circuit patterns
+- Animated electronic components (LEDs, resistors, capacitors)
+- Flowing data lines
+- Responsive grid scaling
+
+### StatusIndicator.astro
+Terminal-style system status indicators with pulsing animations.
+
+**Props:**
+- `status`: 'active' | 'warning' | 'success' | 'error' | 'idle'
+- `label`: string
+- `pulse`: boolean
+- `size`: 'small' | 'medium' | 'large'
+
+**Features:**
+- Animated status dots with glow effects
+- Color-coded status states
+- Accessibility compliant
+- Reduced motion support
+
+### RetroCard.astro
+Terminal-inspired cards with scanlines, CRT effects, and interactive animations.
+
+**Props:**
+- `variant`: 'terminal' | 'circuit' | 'data' | 'system'
+- `color`: 'green' | 'amber' | 'blue' | 'red' | 'multi'
+- `size`: 'small' | 'medium' | 'large'
+- `glitch`: boolean
+- `scanlines`: boolean
+- `glow`: boolean
+- `interactive`: boolean
+- `status`: 'online' | 'offline' | 'error' | 'warning' | 'processing'
+
+**Features:**
+- CRT monitor bezels with power indicators
+- Animated scanlines and glitch effects
+- Terminal-style headers with traffic light controls
+- Interactive hover states with 3D transforms
+- Corner brackets for retro-futuristic framing
+
+### FloatingNav.astro
+Floating navigation with terminal interface and system monitoring.
+
+**Props:**
+- `sections`: Array of navigation items with icons and status
+- `position`: 'left' | 'right'
+- `theme`: 'dark' | 'matrix' | 'circuit'
+- `compact`: boolean
+
+**Features:**
+- Terminal-style command prompt
+- Real-time system status indicators
+- Animated progress bars
+- Circuit connection lines
+- Smooth scrolling with GSAP integration
+
+## Animations & Effects
+
+### GSAP Integration
+The page uses GSAP (GreenSock Animation Platform) for sophisticated animations:
+
+**Timeline Animations:**
+- Hero section entrance with staggered reveals
+- Section headers with typewriter effects
+- Card appearances with 3D transforms
+
+**Scroll Triggers:**
+- Elements animate into view as user scrolls
+- Parallax effects on background elements
+- Progressive content revelation
+
+**Interactive Animations:**
+- Magnetic cursor effects on cards
+- 3D hover transformations
+- Ripple effects on clicks
+
+### CSS-Only Effects
+Enhanced with pure CSS animations for performance:
+
+**Visual Effects:**
+- CRT scanlines and monitor bezels
+- Matrix-style character rain
+- Glitch text distortions
+- Neon glow and pulsing lights
+
+**Component Animations:**
+- Electronic component blinking (LEDs)
+- Data stream flowing effects
+- Circuit trace pulsing
+- Status indicator breathing
+
+## Performance Optimizations
+
+### Lazy Loading
+- GSAP libraries loaded from CDN
+- Animations initialized after DOM ready
+- Circuit patterns use CSS transforms for GPU acceleration
+
+### Reduced Motion Support
+```css
+@media (prefers-reduced-motion: reduce) {
+  /* All animations disabled for accessibility */
+}
+```
+
+### Mobile Optimizations
+- Responsive grid layouts
+- Touch-friendly interactive elements
+- Optimized animation performance
+- Reduced visual effects on smaller screens
+
+## Accessibility Features
+
+### WCAG Compliance
+- High contrast mode support
+- Focus indicators for keyboard navigation
+- Screen reader friendly markup
+- Semantic HTML structure
+
+### Keyboard Navigation
+- Tab order follows logical flow
+- Escape key closes floating navigation
+- Arrow keys for menu navigation
+- Enter/Space for activation
+
+### Color Accessibility
+- Sufficient contrast ratios maintained
+- Status information not solely color-dependent
+- Alternative text for decorative elements
+
+## Customization Guide
+
+### Adding New Sections
+1. Add section to main page
+2. Update FloatingNav sections array
+3. Add corresponding GSAP animations
+4. Update TOC links
+
+### Creating New Card Variants
+```astro
+<RetroCard
+  variant="custom"
+  color="blue"
+  title="New Product"
+  subtitle="Description"
+  status="active"
+>
+  <!-- Content -->
+</RetroCard>
+```
+
+### Custom Circuit Patterns
+```astro
+<CircuitBackground
+  variant="prominent"
+  color="amber"
+  density="high"
+  animated={true}
+  opacity={0.2}
+/>
+```
+
+### Color Theme Customization
+Override CSS custom properties:
+```css
+:root {
+  --retro-green: #your-color;
+  --retro-amber: #your-color;
+  /* etc. */
+}
+```
+
+## Dependencies
+
+### Required
+- Astro ^5.6.1
+- GSAP (loaded from CDN)
+- JetBrains Mono font
+
+### Optional Enhancements
+- Sharp for image optimization
+- Additional GSAP plugins for advanced effects
+
+## Browser Support
+
+### Fully Supported
+- Chrome 88+
+- Firefox 85+
+- Safari 14+
+- Edge 88+
+
+### Graceful Degradation
+- Older browsers receive static layout
+- CSS fallbacks for unsupported features
+- Progressive enhancement approach
+
+## Development Commands
+
+```bash
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## Future Enhancements
+
+### Planned Features
+- Sound effects for interactions
+- More electronic component animations
+- Additional card variants
+- Theme switching capability
+- Advanced glitch effects
+
+### Performance Improvements
+- WebGL circuit backgrounds
+- Intersection Observer for animations
+- Service worker for offline support
+- Image lazy loading optimization
+
+## Contributing
+
+When adding new components or effects:
+
+1. Follow the retro-tech design language
+2. Ensure accessibility compliance
+3. Add reduced motion alternatives
+4. Test on multiple devices
+5. Document new props and features
+
+---
+
+*Created with ❤️ and a healthy dose of 80s nostalgia*
diff --git a/website/PRODUCTS_PAGE_README.md b/website/PRODUCTS_PAGE_README.md
new file mode 100644
index 000000000..54299c01b
--- /dev/null
+++ b/website/PRODUCTS_PAGE_README.md
@@ -0,0 +1,306 @@
+# Jan Products Page - Retro-Tech Design System
+
+A futuristic products showcase page that combines the nostalgic aesthetics of RadioShack's electronic components with PostHog's modern data visualization approach. This creates a unique "retro-tech" visual language that feels both familiar and cutting-edge.
+
+## Design Philosophy
+
+### RadioShack + PostHog = Retro-Tech
+- **RadioShack Heritage**: Circuit board patterns, electronic components, terminal interfaces, amber/green CRT colors
+- **PostHog Influence**: Clean data cards, status indicators, system metrics, dashboard layouts
+- **Result**: A cohesive aesthetic that makes AI products feel like sophisticated electronic equipment
+
+### Color Palette
+```css
+--retro-green: #00ff41    /* Matrix green, primary brand */
+--retro-amber: #ffb000    /* Classic terminal amber */
+--retro-blue: #00bfff     /* Processing/loading states */
+--retro-red: #ff0040      /* Error/warning states */
+--retro-cyan: #00ffff     /* Accent highlights */
+--retro-magenta: #ff00ff  /* Special effects */
+```
+
+## Architecture
+
+### File Structure
+```
+jan/website/src/
+├── pages/
+│   └── prods.astro              # Main products page
+├── components/
+│   ├── CircuitBackground.astro  # Animated circuit patterns
+│   ├── StatusIndicator.astro    # System status components
+│   ├── RetroCard.astro          # Terminal-style cards
+│   └── FloatingNav.astro        # Floating navigation menu
+├── layouts/
+│   └── Layout.astro             # Base layout with GSAP
+└── styles/
+    └── retro-effects.css        # Advanced visual effects
+```
+
+### Component Hierarchy
+```
+Layout
+└── Products Page
+    ├── FloatingNav (right-side navigation)
+    ├── Hero Section
+    │   └── CircuitBackground (animated)
+    ├── Table of Contents
+    ├── Models Section
+    │   └── RetroCard (circuit variant)
+    ├── Platforms Section
+    │   └── RetroCard (data/system variants)
+    ├── Tools Section
+    │   └── RetroCard (terminal variant)
+    └── Integration Section
+```
+
+## Components Deep Dive
+
+### CircuitBackground.astro
+Creates animated circuit board patterns with electronic components.
+
+**Props:**
+- `variant`: 'subtle' | 'prominent' | 'animated'
+- `color`: 'green' | 'amber' | 'blue' | 'multi'
+- `density`: 'low' | 'medium' | 'high'
+- `animated`: boolean
+- `opacity`: number (0-1)
+
+**Features:**
+- Procedural circuit patterns
+- Animated electronic components (LEDs, resistors, capacitors)
+- Flowing data lines
+- Responsive grid scaling
+
+### StatusIndicator.astro
+Terminal-style system status indicators with pulsing animations.
+
+**Props:**
+- `status`: 'active' | 'warning' | 'success' | 'error' | 'idle'
+- `label`: string
+- `pulse`: boolean
+- `size`: 'small' | 'medium' | 'large'
+
+**Features:**
+- Animated status dots with glow effects
+- Color-coded status states
+- Accessibility compliant
+- Reduced motion support
+
+### RetroCard.astro
+Terminal-inspired cards with scanlines, CRT effects, and interactive animations.
+
+**Props:**
+- `variant`: 'terminal' | 'circuit' | 'data' | 'system'
+- `color`: 'green' | 'amber' | 'blue' | 'red' | 'multi'
+- `size`: 'small' | 'medium' | 'large'
+- `glitch`: boolean
+- `scanlines`: boolean
+- `glow`: boolean
+- `interactive`: boolean
+- `status`: 'online' | 'offline' | 'error' | 'warning' | 'processing'
+
+**Features:**
+- CRT monitor bezels with power indicators
+- Animated scanlines and glitch effects
+- Terminal-style headers with traffic light controls
+- Interactive hover states with 3D transforms
+- Corner brackets for retro-futuristic framing
+
+### FloatingNav.astro
+Floating navigation with terminal interface and system monitoring.
+
+**Props:**
+- `sections`: Array of navigation items with icons and status
+- `position`: 'left' | 'right'
+- `theme`: 'dark' | 'matrix' | 'circuit'
+- `compact`: boolean
+
+**Features:**
+- Terminal-style command prompt
+- Real-time system status indicators
+- Animated progress bars
+- Circuit connection lines
+- Smooth scrolling with GSAP integration
+
+## Animations & Effects
+
+### GSAP Integration
+The page uses GSAP (GreenSock Animation Platform) for sophisticated animations:
+
+**Timeline Animations:**
+- Hero section entrance with staggered reveals
+- Section headers with typewriter effects
+- Card appearances with 3D transforms
+
+**Scroll Triggers:**
+- Elements animate into view as user scrolls
+- Parallax effects on background elements
+- Progressive content revelation
+
+**Interactive Animations:**
+- Magnetic cursor effects on cards
+- 3D hover transformations
+- Ripple effects on clicks
+
+### CSS-Only Effects
+Enhanced with pure CSS animations for performance:
+
+**Visual Effects:**
+- CRT scanlines and monitor bezels
+- Matrix-style character rain
+- Glitch text distortions
+- Neon glow and pulsing lights
+
+**Component Animations:**
+- Electronic component blinking (LEDs)
+- Data stream flowing effects
+- Circuit trace pulsing
+- Status indicator breathing
+
+## Performance Optimizations
+
+### Lazy Loading
+- GSAP libraries loaded from CDN
+- Animations initialized after DOM ready
+- Circuit patterns use CSS transforms for GPU acceleration
+
+### Reduced Motion Support
+```css
+@media (prefers-reduced-motion: reduce) {
+  /* All animations disabled for accessibility */
+}
+```
+
+### Mobile Optimizations
+- Responsive grid layouts
+- Touch-friendly interactive elements
+- Optimized animation performance
+- Reduced visual effects on smaller screens
+
+## Accessibility Features
+
+### WCAG Compliance
+- High contrast mode support
+- Focus indicators for keyboard navigation
+- Screen reader friendly markup
+- Semantic HTML structure
+
+### Keyboard Navigation
+- Tab order follows logical flow
+- Escape key closes floating navigation
+- Arrow keys for menu navigation
+- Enter/Space for activation
+
+### Color Accessibility
+- Sufficient contrast ratios maintained
+- Status information not solely color-dependent
+- Alternative text for decorative elements
+
+## Customization Guide
+
+### Adding New Sections
+1. Add section to main page
+2. Update FloatingNav sections array
+3. Add corresponding GSAP animations
+4. Update TOC links
+
+### Creating New Card Variants
+```astro
+<RetroCard
+  variant="custom"
+  color="blue"
+  title="New Product"
+  subtitle="Description"
+  status="active"
+>
+  <!-- Content -->
+</RetroCard>
+```
+
+### Custom Circuit Patterns
+```astro
+<CircuitBackground
+  variant="prominent"
+  color="amber"
+  density="high"
+  animated={true}
+  opacity={0.2}
+/>
+```
+
+### Color Theme Customization
+Override CSS custom properties:
+```css
+:root {
+  --retro-green: #your-color;
+  --retro-amber: #your-color;
+  /* etc. */
+}
+```
+
+## Dependencies
+
+### Required
+- Astro ^5.6.1
+- GSAP (loaded from CDN)
+- JetBrains Mono font
+
+### Optional Enhancements
+- Sharp for image optimization
+- Additional GSAP plugins for advanced effects
+
+## Browser Support
+
+### Fully Supported
+- Chrome 88+
+- Firefox 85+
+- Safari 14+
+- Edge 88+
+
+### Graceful Degradation
+- Older browsers receive static layout
+- CSS fallbacks for unsupported features
+- Progressive enhancement approach
+
+## Development Commands
+
+```bash
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## Future Enhancements
+
+### Planned Features
+- Sound effects for interactions
+- More electronic component animations
+- Additional card variants
+- Theme switching capability
+- Advanced glitch effects
+
+### Performance Improvements
+- WebGL circuit backgrounds
+- Intersection Observer for animations
+- Service worker for offline support
+- Image lazy loading optimization
+
+## Contributing
+
+When adding new components or effects:
+
+1. Follow the retro-tech design language
+2. Ensure accessibility compliance
+3. Add reduced motion alternatives
+4. Test on multiple devices
+5. Document new props and features
+
+---
+
+*Created with ❤️ and a healthy dose of 80s nostalgia*
\ No newline at end of file
diff --git a/website/README.md b/website/README.md
index 746f55b45..cec200784 100644
--- a/website/README.md
+++ b/website/README.md
@@ -1,41 +1,19 @@
-# Starlight Starter Kit: Basics
+# Jan's Website
 
-[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+This website is [built with Starlight](https://starlight.astro.build)
 
-```
-bun create astro@latest -- --template starlight
-```
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics)
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-## 🚀 Project Structure
-
-Inside of your Astro + Starlight project, you'll see the following folders and files:
-
-```
-.
-├── public/
-├── src/
-│   ├── assets/
-│   ├── content/
-│   │   └── docs/
-│   └── content.config.ts
-├── astro.config.mjs
-├── package.json
-└── tsconfig.json
-```
-
-Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed
+as a route based on its file name.
 
 Images can be added to `src/assets/` and embedded in Markdown with a relative link.
 
 Static assets, like favicons, can be placed in the `public/` directory.
 
+If you want to add new pages, these can go in the `src/pages/` directory. Because of the topics plugin
+we are using ([starlight sidebar topics](https://starlight-sidebar-topics.netlify.app/docs/guides/excluded-pages/))
+you will need to exclude them from the sidebar by adding them to the exclude list in `astro.config.mjs`, e.g., `exclude: ['/example'],`.
+
 ## 🧞 Commands
 
 All commands are run from the root of the project, from a terminal:
@@ -48,7 +26,3 @@ All commands are run from the root of the project, from a terminal:
 | `bun preview`         | Preview your build locally, before deploying     |
 | `bun astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `bun astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 97ac22f69..a4a2e5211 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -169,7 +169,7 @@ export default defineConfig({
             },
           ],
           {
-            exclude: ['/example'],
+            exclude: ['/prods'],
             topics: {
               university: [
                 '/university/getting-started/what-is-jan',
diff --git a/website/package.json b/website/package.json
index 3b409199b..4b936cd56 100644
--- a/website/package.json
+++ b/website/package.json
@@ -12,9 +12,11 @@
   "dependencies": {
     "@astrojs/starlight": "^0.35.1",
     "astro": "^5.6.1",
+    "gsap": "^3.13.0",
+    "phosphor-astro": "^2.1.0",
     "sharp": "^0.34.2",
     "starlight-sidebar-topics": "^0.6.0",
     "starlight-theme-rapide": "^0.5.1",
     "starlight-videos": "^0.3.0"
   }
-}
\ No newline at end of file
+}
diff --git a/website/src/components/CircuitBackground.astro b/website/src/components/CircuitBackground.astro
new file mode 100644
index 000000000..8f94ebafb
--- /dev/null
+++ b/website/src/components/CircuitBackground.astro
@@ -0,0 +1,366 @@
+---
+export interface Props {
+  variant?: 'subtle' | 'prominent' | 'animated';
+  color?: 'green' | 'amber' | 'blue' | 'multi';
+  density?: 'low' | 'medium' | 'high';
+  animated?: boolean;
+  opacity?: number;
+}
+
+const {
+  variant = 'subtle',
+  color = 'green',
+  density = 'medium',
+  animated = true,
+  opacity = 0.1
+} = Astro.props;
+
+const colorSchemes = {
+  green: {
+    primary: '#00ff41',
+    secondary: '#00cc33',
+    accent: '#008822'
+  },
+  amber: {
+    primary: '#ffb000',
+    secondary: '#ff9500',
+    accent: '#cc7700'
+  },
+  blue: {
+    primary: '#00bfff',
+    secondary: '#0099cc',
+    accent: '#007799'
+  },
+  multi: {
+    primary: '#00ff41',
+    secondary: '#ffb000',
+    accent: '#00bfff'
+  }
+};
+
+const colors = colorSchemes[color];
+
+const densitySettings = {
+  low: { size: 80, nodes: 6 },
+  medium: { size: 50, nodes: 8 },
+  high: { size: 30, nodes: 12 }
+};
+
+const settings = densitySettings[density];
+---
+
+<div class={`circuit-background ${variant} ${color} ${density} ${animated ? 'animated' : ''}`}
+     style={`--opacity: ${opacity}; --primary: ${colors.primary}; --secondary: ${colors.secondary}; --accent: ${colors.accent};`}>
+
+  <!-- Main circuit grid -->
+  <div class="circuit-grid"></div>
+
+  <!-- Connection nodes -->
+  <div class="circuit-nodes"></div>
+
+  <!-- Electronic components -->
+  <div class="circuit-components">
+    <div class="component resistor" style="top: 20%; left: 15%;"></div>
+    <div class="component capacitor" style="top: 35%; left: 60%;"></div>
+    <div class="component chip" style="top: 70%; left: 25%;"></div>
+    <div class="component led" style="top: 45%; left: 80%;"></div>
+    <div class="component transistor" style="top: 80%; left: 70%;"></div>
+  </div>
+
+  <!-- Flowing data lines -->
+  <div class="data-flow"></div>
+</div>
+
+<style define:vars={{ size: `${settings.size}px`, nodeCount: settings.nodes }}>
+  .circuit-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  /* Circuit Grid Pattern */
+  .circuit-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+      /* Horizontal lines */
+      linear-gradient(90deg, transparent 49%, var(--primary) 50%, transparent 51%),
+      /* Vertical lines */
+      linear-gradient(0deg, transparent 49%, var(--primary) 50%, transparent 51%),
+      /* Junction dots */
+      radial-gradient(circle at 50% 50%, var(--secondary) 1px, transparent 2px),
+      /* Micro traces */
+      linear-gradient(45deg, transparent 48%, var(--accent) 49%, transparent 50%);
+    background-size:
+      var(--size) var(--size),
+      var(--size) var(--size),
+      var(--size) var(--size),
+      calc(var(--size) / 2) calc(var(--size) / 2);
+    opacity: var(--opacity);
+  }
+
+  /* Animated flowing effect */
+  .circuit-background.animated .circuit-grid {
+    animation: circuitFlow 30s linear infinite;
+  }
+
+  @keyframes circuitFlow {
+    0% {
+      background-position: 0 0, 0 0, 0 0, 0 0;
+    }
+    100% {
+      background-position:
+        var(--size) var(--size),
+        var(--size) var(--size),
+        var(--size) var(--size),
+        calc(var(--size) / 2) calc(var(--size) / 2);
+    }
+  }
+
+  /* Connection Nodes */
+  .circuit-nodes {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .circuit-nodes::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+      radial-gradient(circle at 25% 25%, var(--primary) 2px, transparent 3px),
+      radial-gradient(circle at 75% 25%, var(--secondary) 1.5px, transparent 2.5px),
+      radial-gradient(circle at 25% 75%, var(--accent) 1.5px, transparent 2.5px),
+      radial-gradient(circle at 75% 75%, var(--primary) 2px, transparent 3px);
+    background-size: calc(var(--size) * 2) calc(var(--size) * 2);
+    opacity: calc(var(--opacity) * 2);
+  }
+
+  /* Electronic Components */
+  .circuit-components {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .component {
+    position: absolute;
+    opacity: calc(var(--opacity) * 3);
+    transform: translate(-50%, -50%);
+  }
+
+  /* Resistor */
+  .resistor {
+    width: 20px;
+    height: 6px;
+    background:
+      linear-gradient(90deg,
+        transparent 0%,
+        var(--primary) 20%,
+        var(--secondary) 40%,
+        var(--primary) 60%,
+        var(--secondary) 80%,
+        transparent 100%);
+    border-radius: 1px;
+  }
+
+  .resistor::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -5px;
+    right: -5px;
+    height: 1px;
+    background: var(--primary);
+    transform: translateY(-50%);
+  }
+
+  /* Capacitor */
+  .capacitor {
+    width: 2px;
+    height: 12px;
+    background: var(--secondary);
+    border-radius: 1px;
+  }
+
+  .capacitor::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -4px;
+    width: 2px;
+    height: 12px;
+    background: var(--secondary);
+    border-radius: 1px;
+  }
+
+  /* Microchip */
+  .chip {
+    width: 16px;
+    height: 12px;
+    background: var(--primary);
+    border-radius: 2px;
+    position: relative;
+  }
+
+  .chip::before,
+  .chip::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    width: 3px;
+    height: 1px;
+    background: var(--primary);
+    transform: translateY(-50%);
+  }
+
+  .chip::before {
+    left: -3px;
+  }
+
+  .chip::after {
+    right: -3px;
+  }
+
+  /* LED */
+  .led {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: radial-gradient(circle, var(--accent), transparent);
+    box-shadow: 0 0 6px var(--accent);
+  }
+
+  /* Transistor */
+  .transistor {
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 10px solid var(--secondary);
+    border-radius: 1px;
+  }
+
+  /* Data Flow Animation */
+  .data-flow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+      linear-gradient(90deg,
+        transparent 0%,
+        var(--primary) 1%,
+        transparent 2%),
+      linear-gradient(0deg,
+        transparent 0%,
+        var(--secondary) 1%,
+        transparent 2%);
+    background-size: 200px 1px, 1px 200px;
+    opacity: calc(var(--opacity) * 0.5);
+  }
+
+  .circuit-background.animated .data-flow {
+    animation: dataFlow 8s linear infinite;
+  }
+
+  @keyframes dataFlow {
+    0% {
+      background-position: -200px 0, 0 -200px;
+    }
+    100% {
+      background-position: calc(100% + 200px) 0, 0 calc(100% + 200px);
+    }
+  }
+
+  /* Component animations */
+  .circuit-background.animated .led {
+    animation: ledBlink 3s ease-in-out infinite;
+  }
+
+  @keyframes ledBlink {
+    0%, 80%, 100% {
+      opacity: calc(var(--opacity) * 3);
+      box-shadow: 0 0 6px var(--accent);
+    }
+    85%, 95% {
+      opacity: calc(var(--opacity) * 6);
+      box-shadow: 0 0 12px var(--accent);
+    }
+  }
+
+  /* Variant Styles */
+  .circuit-background.prominent {
+    --opacity: 0.2;
+  }
+
+  .circuit-background.subtle {
+    --opacity: 0.05;
+  }
+
+  /* Density Variations */
+  .circuit-background.high .circuit-grid {
+    background-size: 30px 30px, 30px 30px, 30px 30px, 15px 15px;
+  }
+
+  .circuit-background.low .circuit-grid {
+    background-size: 80px 80px, 80px 80px, 80px 80px, 40px 40px;
+  }
+
+  /* Multi-color variant */
+  .circuit-background.multi .circuit-grid {
+    background-image:
+      linear-gradient(90deg, transparent 49%, var(--primary) 50%, transparent 51%),
+      linear-gradient(0deg, transparent 49%, var(--secondary) 50%, transparent 51%),
+      radial-gradient(circle at 50% 50%, var(--accent) 1px, transparent 2px),
+      linear-gradient(45deg, transparent 48%, var(--primary) 49%, transparent 50%);
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .circuit-background.high {
+      --size: 40px;
+    }
+
+    .circuit-background.medium {
+      --size: 60px;
+    }
+
+    .circuit-background.low {
+      --size: 100px;
+    }
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .circuit-grid,
+    .data-flow,
+    .led {
+      animation: none;
+    }
+  }
+
+  /* High contrast mode */
+  @media (prefers-contrast: high) {
+    .circuit-background {
+      --opacity: 0.3;
+    }
+  }
+</style>
diff --git a/website/src/components/FloatingNav.astro b/website/src/components/FloatingNav.astro
new file mode 100644
index 000000000..86bd47b14
--- /dev/null
+++ b/website/src/components/FloatingNav.astro
@@ -0,0 +1,735 @@
+---
+export interface Props {
+  sections?: Array<{
+    id: string;
+    label: string;
+    icon: string;
+    status?: 'active' | 'inactive' | 'processing';
+  }>;
+  position?: 'left' | 'right';
+  theme?: 'dark' | 'matrix' | 'circuit';
+  compact?: boolean;
+}
+
+const {
+  sections = [
+    { id: 'models', label: 'Models', icon: '🧠', status: 'active' },
+    { id: 'platforms', label: 'Platforms', icon: '💻', status: 'active' },
+    { id: 'tools', label: 'Tools', icon: '🔧', status: 'processing' }
+  ],
+  position = 'right',
+  theme = 'matrix',
+  compact = false
+} = Astro.props;
+
+const navId = `floating-nav-${Math.random().toString(36).substr(2, 9)}`;
+---
+
+<div id={navId} class={`floating-nav ${position} ${theme} ${compact ? 'compact' : ''}`}>
+  <!-- Main Navigation Button -->
+  <button class="nav-toggle" aria-label="Toggle Navigation">
+    <div class="nav-icon">
+      <span class="icon-line"></span>
+      <span class="icon-line"></span>
+      <span class="icon-line"></span>
+    </div>
+    <div class="status-ring"></div>
+  </button>
+
+  <!-- Navigation Menu -->
+  <nav class="nav-menu" role="navigation" aria-label="Section Navigation">
+    <div class="nav-header">
+      <div class="terminal-prompt">
+        <span class="prompt-symbol">></span>
+        <span class="prompt-text">NAVIGATE</span>
+        <span class="terminal-cursor"></span>
+      </div>
+      <div class="system-status">
+        <div class="status-indicator online"></div>
+        <span class="status-text">ONLINE</span>
+      </div>
+    </div>
+
+    <ul class="nav-list">
+      {sections.map((section, index) => (
+        <li class="nav-item">
+          <a href={`#${section.id}`} class="nav-link" data-section={section.id}>
+            <div class="nav-icon-wrapper">
+              <span class="nav-emoji">{section.icon}</span>
+              <div class="connection-line"></div>
+            </div>
+            <div class="nav-content">
+              <span class="nav-label">{section.label}</span>
+              <div class="nav-circuit">
+                <div class="circuit-dot"></div>
+                <div class="circuit-line"></div>
+              </div>
+            </div>
+            <div class={`nav-status ${section.status || 'inactive'}`}>
+              <div class="status-dot"></div>
+              <span class="status-code">
+                {section.status === 'active' ? '200' :
+                 section.status === 'processing' ? '102' : '404'}
+              </span>
+            </div>
+          </a>
+        </li>
+      ))}
+    </ul>
+
+    <div class="nav-footer">
+      <div class="progress-bar">
+        <div class="progress-fill"></div>
+      </div>
+      <div class="system-info">
+        <span class="timestamp"></span>
+        <span class="version">v2.4.1</span>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Background Circuit Pattern -->
+  <div class="nav-background">
+    <div class="circuit-pattern"></div>
+    <div class="data-stream"></div>
+  </div>
+</div>
+
+<style>
+  .floating-nav {
+    position: fixed;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1000;
+    font-family: 'JetBrains Mono', 'Monaco', 'Menlo', monospace;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .floating-nav.right {
+    right: 20px;
+  }
+
+  .floating-nav.left {
+    left: 20px;
+  }
+
+  /* Main Toggle Button */
+  .nav-toggle {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background:
+      radial-gradient(circle at 30% 30%, rgba(0, 255, 65, 0.1), transparent),
+      linear-gradient(135deg, #1a1a1a, #0a0a0a);
+    border: 2px solid #00ff41;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    box-shadow:
+      0 4px 20px rgba(0, 0, 0, 0.3),
+      0 0 20px rgba(0, 255, 65, 0.2);
+  }
+
+  .nav-toggle:hover {
+    transform: scale(1.1);
+    box-shadow:
+      0 6px 30px rgba(0, 0, 0, 0.4),
+      0 0 30px rgba(0, 255, 65, 0.4);
+    border-color: #00ff65;
+  }
+
+  .nav-icon {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    transition: all 0.3s ease;
+  }
+
+  .icon-line {
+    width: 20px;
+    height: 2px;
+    background: #00ff41;
+    border-radius: 1px;
+    transition: all 0.3s ease;
+    box-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
+  }
+
+  .floating-nav.active .icon-line:nth-child(1) {
+    transform: rotate(45deg) translate(6px, 6px);
+  }
+
+  .floating-nav.active .icon-line:nth-child(2) {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  .floating-nav.active .icon-line:nth-child(3) {
+    transform: rotate(-45deg) translate(6px, -6px);
+  }
+
+  .status-ring {
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    background:
+      linear-gradient(45deg, #00ff41, transparent, #ffb000, transparent, #00ff41)
+      border-box;
+    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    animation: statusRotate 4s linear infinite;
+  }
+
+  @keyframes statusRotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  /* Navigation Menu */
+  .nav-menu {
+    position: absolute;
+    right: 80px;
+    top: 50%;
+    transform: translateY(-50%);
+    background:
+      linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(10, 10, 10, 0.98));
+    border: 1px solid #00ff41;
+    border-radius: 8px;
+    min-width: 280px;
+    backdrop-filter: blur(10px);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-50%) translateX(20px) scale(0.95);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow:
+      0 10px 40px rgba(0, 0, 0, 0.5),
+      0 0 20px rgba(0, 255, 65, 0.1);
+  }
+
+  .floating-nav.left .nav-menu {
+    right: auto;
+    left: 80px;
+    transform: translateY(-50%) translateX(-20px) scale(0.95);
+  }
+
+  .floating-nav.active .nav-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(-50%) translateX(0) scale(1);
+  }
+
+  /* Menu Header */
+  .nav-header {
+    padding: 1rem;
+    border-bottom: 1px solid rgba(0, 255, 65, 0.2);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .terminal-prompt {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #00ff41;
+    font-size: 0.8rem;
+    font-weight: 600;
+  }
+
+  .prompt-symbol {
+    color: #ffb000;
+  }
+
+  .terminal-cursor {
+    width: 8px;
+    height: 12px;
+    background: #ffffff;
+    animation: cursorBlink 1s infinite;
+  }
+
+  @keyframes cursorBlink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+  }
+
+  .system-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.7rem;
+    color: #888888;
+  }
+
+  .status-indicator {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #00ff41;
+    box-shadow: 0 0 8px #00ff41;
+    animation: statusPulse 2s infinite;
+  }
+
+  @keyframes statusPulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  /* Navigation List */
+  .nav-list {
+    list-style: none;
+    margin: 0;
+    padding: 0.5rem 0;
+  }
+
+  .nav-item {
+    margin: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    color: #cccccc;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .nav-link::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(0, 255, 65, 0.1),
+      transparent
+    );
+    transition: left 0.5s ease;
+  }
+
+  .nav-link:hover::before {
+    left: 100%;
+  }
+
+  .nav-link:hover {
+    color: #00ff41;
+    background: rgba(0, 255, 65, 0.05);
+    transform: translateX(5px);
+  }
+
+  .nav-icon-wrapper {
+    display: flex;
+    align-items: center;
+    margin-right: 1rem;
+    position: relative;
+  }
+
+  .nav-emoji {
+    font-size: 1.2rem;
+    display: block;
+    filter: grayscale(0.3);
+    transition: all 0.3s ease;
+  }
+
+  .nav-link:hover .nav-emoji {
+    filter: grayscale(0);
+    transform: scale(1.1);
+  }
+
+  .connection-line {
+    position: absolute;
+    right: -8px;
+    top: 50%;
+    width: 16px;
+    height: 1px;
+    background: #333333;
+    transform: translateY(-50%);
+    transition: all 0.3s ease;
+  }
+
+  .nav-link:hover .connection-line {
+    background: #00ff41;
+    box-shadow: 0 0 5px #00ff41;
+  }
+
+  .nav-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .nav-label {
+    font-size: 0.9rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .nav-circuit {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .circuit-dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: #666666;
+    transition: all 0.3s ease;
+  }
+
+  .nav-link:hover .circuit-dot {
+    background: #00ff41;
+    box-shadow: 0 0 8px #00ff41;
+  }
+
+  .circuit-line {
+    width: 12px;
+    height: 1px;
+    background: #333333;
+    transition: all 0.3s ease;
+  }
+
+  .nav-link:hover .circuit-line {
+    background: #00ff41;
+    box-shadow: 0 0 5px #00ff41;
+  }
+
+  .nav-status {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-left: 0.5rem;
+  }
+
+  .nav-status .status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  }
+
+  .nav-status.active .status-dot {
+    background: #00ff41;
+    box-shadow: 0 0 6px #00ff41;
+  }
+
+  .nav-status.processing .status-dot {
+    background: #ffb000;
+    box-shadow: 0 0 6px #ffb000;
+    animation: processingPulse 1s infinite;
+  }
+
+  .nav-status.inactive .status-dot {
+    background: #666666;
+  }
+
+  @keyframes processingPulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.7; transform: scale(1.2); }
+  }
+
+  .status-code {
+    color: #888888;
+    font-size: 0.6rem;
+  }
+
+  .nav-status.active .status-code {
+    color: #00ff41;
+  }
+
+  .nav-status.processing .status-code {
+    color: #ffb000;
+  }
+
+  /* Menu Footer */
+  .nav-footer {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid rgba(0, 255, 65, 0.2);
+  }
+
+  .progress-bar {
+    width: 100%;
+    height: 3px;
+    background: #333333;
+    border-radius: 2px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #00ff41, #ffb000);
+    border-radius: 2px;
+    animation: progressFlow 3s ease-in-out infinite;
+  }
+
+  @keyframes progressFlow {
+    0% { width: 0%; }
+    50% { width: 100%; }
+    100% { width: 0%; }
+  }
+
+  .system-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.7rem;
+    color: #666666;
+  }
+
+  /* Background Effects */
+  .nav-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: 8px;
+  }
+
+  .circuit-pattern {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+      linear-gradient(90deg, transparent 49%, rgba(0, 255, 65, 0.05) 50%, transparent 51%),
+      linear-gradient(0deg, transparent 49%, rgba(0, 255, 65, 0.05) 50%, transparent 51%);
+    background-size: 20px 20px;
+    opacity: 0.3;
+  }
+
+  .data-stream {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      45deg,
+      transparent 30%,
+      rgba(0, 255, 65, 0.02) 50%,
+      transparent 70%
+    );
+    animation: dataStreamFlow 4s linear infinite;
+  }
+
+  @keyframes dataStreamFlow {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+
+  /* Theme Variations */
+  .floating-nav.matrix .nav-toggle {
+    border-color: #00ff41;
+    box-shadow:
+      0 4px 20px rgba(0, 0, 0, 0.3),
+      0 0 20px rgba(0, 255, 65, 0.3);
+  }
+
+  .floating-nav.circuit .nav-toggle {
+    border-color: #ffb000;
+    box-shadow:
+      0 4px 20px rgba(0, 0, 0, 0.3),
+      0 0 20px rgba(255, 176, 0, 0.3);
+  }
+
+  .floating-nav.circuit .nav-menu {
+    border-color: #ffb000;
+  }
+
+  /* Compact Mode */
+  .floating-nav.compact .nav-toggle {
+    width: 50px;
+    height: 50px;
+  }
+
+  .floating-nav.compact .nav-menu {
+    min-width: 240px;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .floating-nav {
+      right: 10px;
+    }
+
+    .floating-nav.left {
+      left: 10px;
+    }
+
+    .nav-menu {
+      min-width: 260px;
+      right: 60px;
+    }
+
+    .floating-nav.left .nav-menu {
+      left: 60px;
+    }
+
+    .nav-toggle {
+      width: 50px;
+      height: 50px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .nav-menu {
+      min-width: 240px;
+      font-size: 0.85rem;
+    }
+
+    .nav-link {
+      padding: 0.6rem 0.8rem;
+    }
+  }
+
+  /* Accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    .floating-nav *,
+    .floating-nav *::before,
+    .floating-nav *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  .nav-toggle:focus,
+  .nav-link:focus {
+    outline: 2px solid #00ff41;
+    outline-offset: 2px;
+  }
+
+  /* High contrast mode */
+  @media (prefers-contrast: high) {
+    .floating-nav {
+      filter: contrast(1.5);
+    }
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const navs = document.querySelectorAll('.floating-nav');
+
+    navs.forEach(nav => {
+      const toggle = nav.querySelector('.nav-toggle');
+      const menu = nav.querySelector('.nav-menu');
+      const links = nav.querySelectorAll('.nav-link');
+      const timestamp = nav.querySelector('.timestamp');
+
+      // Update timestamp
+      if (timestamp) {
+        const updateTime = () => {
+          const now = new Date();
+          timestamp.textContent = now.toLocaleTimeString('en-US', {
+            hour12: false,
+            hour: '2-digit',
+            minute: '2-digit'
+          });
+        };
+        updateTime();
+        setInterval(updateTime, 1000);
+      }
+
+      // Toggle menu
+      toggle?.addEventListener('click', () => {
+        nav.classList.toggle('active');
+      });
+
+      // Close menu when clicking outside
+      document.addEventListener('click', (e) => {
+        if (!nav.contains(e.target)) {
+          nav.classList.remove('active');
+        }
+      });
+
+      // Handle navigation
+      links.forEach(link => {
+        link.addEventListener('click', (e) => {
+          e.preventDefault();
+          const sectionId = link.getAttribute('data-section');
+          const targetSection = document.getElementById(sectionId);
+
+          if (targetSection) {
+            // Smooth scroll with GSAP if available
+            if (typeof gsap !== 'undefined') {
+              gsap.to(window, {
+                duration: 1.2,
+                scrollTo: { y: targetSection, offsetY: 100 },
+                ease: 'power3.inOut'
+              });
+            } else {
+              targetSection.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+              });
+            }
+
+            // Close menu after navigation
+            nav.classList.remove('active');
+
+            // Add ripple effect
+            const rect = link.getBoundingClientRect();
+            const ripple = document.createElement('div');
+            ripple.style.cssText = `
+              position: absolute;
+              border-radius: 50%;
+              background: rgba(0, 255, 65, 0.3);
+              transform: scale(0);
+              animation: ripple 0.6s linear;
+              left: ${e.clientX - rect.left - 10}px;
+              top: ${e.clientY - rect.top - 10}px;
+              width: 20px;
+              height: 20px;
+              pointer-events: none;
+              z-index: 10;
+            `;
+
+            link.appendChild(ripple);
+            setTimeout(() => ripple.remove(), 600);
+          }
+        });
+      });
+
+      // Keyboard navigation
+      nav.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          nav.classList.remove('active');
+          toggle?.focus();
+        }
+      });
+    });
+
+    // Add ripple animation styles
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes ripple {
+        to {
+          transform: scale(4);
+          opacity: 0;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  });
+</script>
diff --git a/website/src/components/RetroCard.astro b/website/src/components/RetroCard.astro
new file mode 100644
index 000000000..0f8ab56a8
--- /dev/null
+++ b/website/src/components/RetroCard.astro
@@ -0,0 +1,601 @@
+---
+export interface Props {
+  variant?: 'terminal' | 'circuit' | 'data' | 'system';
+  color?: 'green' | 'amber' | 'blue' | 'red' | 'multi';
+  size?: 'small' | 'medium' | 'large';
+  glitch?: boolean;
+  scanlines?: boolean;
+  glow?: boolean;
+  interactive?: boolean;
+  status?: 'online' | 'offline' | 'error' | 'warning' | 'processing';
+  title?: string;
+  subtitle?: string;
+  className?: string;
+}
+
+const {
+  variant = 'terminal',
+  color = 'green',
+  size = 'medium',
+  glitch = false,
+  scanlines = true,
+  glow = true,
+  interactive = true,
+  status = 'online',
+  title,
+  subtitle,
+  className = ''
+} = Astro.props;
+
+const colorSchemes = {
+  green: {
+    primary: '#00ff41',
+    secondary: '#00cc33',
+    bg: 'rgba(0, 255, 65, 0.05)',
+    border: '#00ff41',
+    glow: 'rgba(0, 255, 65, 0.3)'
+  },
+  amber: {
+    primary: '#ffb000',
+    secondary: '#ff9500',
+    bg: 'rgba(255, 176, 0, 0.05)',
+    border: '#ffb000',
+    glow: 'rgba(255, 176, 0, 0.3)'
+  },
+  blue: {
+    primary: '#00bfff',
+    secondary: '#0099cc',
+    bg: 'rgba(0, 191, 255, 0.05)',
+    border: '#00bfff',
+    glow: 'rgba(0, 191, 255, 0.3)'
+  },
+  red: {
+    primary: '#ff0040',
+    secondary: '#cc0033',
+    bg: 'rgba(255, 0, 64, 0.05)',
+    border: '#ff0040',
+    glow: 'rgba(255, 0, 64, 0.3)'
+  },
+  multi: {
+    primary: '#00ff41',
+    secondary: '#ffb000',
+    bg: 'linear-gradient(135deg, rgba(0, 255, 65, 0.05), rgba(255, 176, 0, 0.05))',
+    border: '#00ff41',
+    glow: 'rgba(0, 255, 65, 0.3)'
+  }
+};
+
+const scheme = colorSchemes[color];
+const cardId = `retro-card-${Math.random().toString(36).substr(2, 9)}`;
+---
+
+<div
+  id={cardId}
+  class={`retro-card ${variant} ${color} ${size} ${glitch ? 'glitch' : ''} ${scanlines ? 'scanlines' : ''} ${glow ? 'glow' : ''} ${interactive ? 'interactive' : ''} ${className}`}
+  data-status={status}
+  style={`--primary: ${scheme.primary}; --secondary: ${scheme.secondary}; --bg: ${scheme.bg}; --border: ${scheme.border}; --glow: ${scheme.glow};`}
+>
+  <!-- Terminal header -->
+  <div class="retro-header">
+    <div class="terminal-controls">
+      <div class="control-dot red"></div>
+      <div class="control-dot yellow"></div>
+      <div class="control-dot green"></div>
+    </div>
+
+    {title && (
+      <div class="terminal-title">
+        <span class="title-text">{title}</span>
+        {subtitle && <span class="subtitle-text">{subtitle}</span>}
+      </div>
+    )}
+
+    <div class="status-indicator">
+      <div class={`status-dot ${status}`}></div>
+      <span class="status-text">{status.toUpperCase()}</span>
+    </div>
+  </div>
+
+  <!-- Content area -->
+  <div class="retro-content">
+    <slot />
+  </div>
+
+  <!-- Scanline overlay -->
+  {scanlines && (
+    <div class="scanline-overlay"></div>
+  )}
+
+  <!-- Border effects -->
+  <div class="border-glow"></div>
+
+  <!-- Corner brackets -->
+  <div class="corner-bracket top-left"></div>
+  <div class="corner-bracket top-right"></div>
+  <div class="corner-bracket bottom-left"></div>
+  <div class="corner-bracket bottom-right"></div>
+</div>
+
+<style>
+  .retro-card {
+    position: relative;
+    background: #111111;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    font-family: 'JetBrains Mono', 'Monaco', 'Menlo', monospace;
+    color: #ffffff;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* Size variations */
+  .retro-card.small {
+    min-height: 200px;
+    font-size: 0.85rem;
+  }
+
+  .retro-card.medium {
+    min-height: 280px;
+    font-size: 0.9rem;
+  }
+
+  .retro-card.large {
+    min-height: 400px;
+    font-size: 1rem;
+  }
+
+  /* Interactive states */
+  .retro-card.interactive {
+    cursor: pointer;
+  }
+
+  .retro-card.interactive:hover {
+    transform: translateY(-2px) scale(1.02);
+    border-color: var(--primary);
+    box-shadow:
+      0 8px 32px rgba(0, 0, 0, 0.4),
+      0 0 20px var(--glow);
+  }
+
+  .retro-card.interactive:active {
+    transform: translateY(0) scale(1.01);
+  }
+
+  /* Terminal header */
+  .retro-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid var(--border);
+    min-height: 40px;
+  }
+
+  .terminal-controls {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .control-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .control-dot.red {
+    background: #ff5f56;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  }
+
+  .control-dot.yellow {
+    background: #ffbd2e;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  }
+
+  .control-dot.green {
+    background: #27ca3f;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  }
+
+  .terminal-title {
+    flex: 1;
+    text-align: center;
+    margin: 0 1rem;
+  }
+
+  .title-text {
+    color: var(--primary);
+    font-weight: 600;
+    font-size: 0.9rem;
+    display: block;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .subtitle-text {
+    color: #888888;
+    font-size: 0.7rem;
+    display: block;
+    margin-top: 0.25rem;
+  }
+
+  .status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    animation: statusPulse 2s infinite;
+  }
+
+  .status-dot.online {
+    background: #00ff41;
+    box-shadow: 0 0 8px #00ff41;
+  }
+
+  .status-dot.offline {
+    background: #666666;
+  }
+
+  .status-dot.error {
+    background: #ff0040;
+    box-shadow: 0 0 8px #ff0040;
+  }
+
+  .status-dot.warning {
+    background: #ffb000;
+    box-shadow: 0 0 8px #ffb000;
+  }
+
+  .status-dot.processing {
+    background: #00bfff;
+    box-shadow: 0 0 8px #00bfff;
+    animation: processingPulse 1s infinite;
+  }
+
+  .status-text {
+    font-size: 0.7rem;
+    color: #888888;
+    font-weight: 500;
+  }
+
+  /* Content area */
+  .retro-content {
+    padding: 1.5rem;
+    position: relative;
+    z-index: 2;
+    min-height: 200px;
+    background: var(--bg);
+  }
+
+  /* Scanline effect */
+  .scanline-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(0, 255, 65, 0.03) 2px,
+      rgba(0, 255, 65, 0.03) 4px
+    );
+    pointer-events: none;
+    z-index: 3;
+  }
+
+  .retro-card.scanlines .scanline-overlay {
+    animation: scanlineMove 8s linear infinite;
+  }
+
+  @keyframes scanlineMove {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(4px);
+    }
+  }
+
+  /* Border glow effect */
+  .border-glow {
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    background: linear-gradient(45deg, var(--primary), transparent, var(--secondary), transparent, var(--primary));
+    border-radius: 4px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 0;
+  }
+
+  .retro-card.glow:hover .border-glow {
+    opacity: 0.6;
+    animation: borderPulse 3s ease-in-out infinite;
+  }
+
+  @keyframes borderPulse {
+    0%, 100% {
+      opacity: 0.3;
+    }
+    50% {
+      opacity: 0.8;
+    }
+  }
+
+  /* Corner brackets */
+  .corner-bracket {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--primary);
+    opacity: 0.6;
+    transition: all 0.3s ease;
+  }
+
+  .corner-bracket.top-left {
+    top: 8px;
+    left: 8px;
+    border-right: none;
+    border-bottom: none;
+  }
+
+  .corner-bracket.top-right {
+    top: 8px;
+    right: 8px;
+    border-left: none;
+    border-bottom: none;
+  }
+
+  .corner-bracket.bottom-left {
+    bottom: 8px;
+    left: 8px;
+    border-right: none;
+    border-top: none;
+  }
+
+  .corner-bracket.bottom-right {
+    bottom: 8px;
+    right: 8px;
+    border-left: none;
+    border-top: none;
+  }
+
+  .retro-card:hover .corner-bracket {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  /* Variant styles */
+  .retro-card.circuit {
+    background: radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.1), #111111);
+  }
+
+  .retro-card.circuit::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+      linear-gradient(90deg, transparent 49%, rgba(0, 255, 65, 0.1) 50%, transparent 51%),
+      linear-gradient(0deg, transparent 49%, rgba(0, 255, 65, 0.1) 50%, transparent 51%);
+    background-size: 20px 20px;
+    opacity: 0.3;
+    z-index: 1;
+  }
+
+  .retro-card.data {
+    background: linear-gradient(135deg, #111111, #1a1a1a);
+  }
+
+  .retro-card.data::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+      linear-gradient(45deg, transparent 30%, rgba(0, 255, 65, 0.05) 50%, transparent 70%);
+    animation: dataFlow 4s linear infinite;
+    z-index: 1;
+  }
+
+  @keyframes dataFlow {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .retro-card.system {
+    background:
+      radial-gradient(ellipse at top, rgba(0, 255, 65, 0.1), transparent),
+      radial-gradient(ellipse at bottom, rgba(255, 176, 0, 0.1), transparent),
+      #111111;
+  }
+
+  /* Glitch effect */
+  .retro-card.glitch {
+    animation: glitchCard 8s infinite;
+  }
+
+  .retro-card.glitch .retro-content {
+    animation: glitchContent 8s infinite;
+  }
+
+  @keyframes glitchCard {
+    0%, 90%, 100% {
+      transform: translate(0);
+    }
+    91% {
+      transform: translate(-2px, 0);
+    }
+    92% {
+      transform: translate(2px, 0);
+    }
+    93% {
+      transform: translate(-1px, 0);
+    }
+    94% {
+      transform: translate(1px, 0);
+    }
+  }
+
+  @keyframes glitchContent {
+    0%, 90%, 100% {
+      clip-path: inset(0);
+    }
+    91% {
+      clip-path: inset(10px 0 85px 0);
+    }
+    92% {
+      clip-path: inset(80px 0 10px 0);
+    }
+    93% {
+      clip-path: inset(40px 0 50px 0);
+    }
+  }
+
+  /* Animations */
+  @keyframes statusPulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes processingPulse {
+    0%, 100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.7;
+      transform: scale(1.2);
+    }
+  }
+
+  /* Accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    .retro-card,
+    .retro-card *,
+    .retro-card::before,
+    .retro-card::after {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
+
+  /* Focus states */
+  .retro-card:focus {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+
+  /* High contrast mode */
+  @media (prefers-contrast: high) {
+    .retro-card {
+      border-width: 2px;
+    }
+
+    .scanline-overlay {
+      display: none;
+    }
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .retro-header {
+      padding: 0.5rem;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .terminal-title {
+      margin: 0;
+      order: 3;
+      flex-basis: 100%;
+    }
+
+    .retro-content {
+      padding: 1rem;
+    }
+
+    .corner-bracket {
+      width: 12px;
+      height: 12px;
+    }
+  }
+</style>
+
+<script>
+  // Add interactive behaviors
+  document.addEventListener('DOMContentLoaded', () => {
+    const cards = document.querySelectorAll('.retro-card.interactive');
+
+    cards.forEach(card => {
+      // Add click ripple effect
+      card.addEventListener('click', (e) => {
+        const rect = card.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        const ripple = document.createElement('div');
+        ripple.style.cssText = `
+          position: absolute;
+          border-radius: 50%;
+          background: rgba(0, 255, 65, 0.3);
+          transform: scale(0);
+          animation: ripple 0.6s linear;
+          left: ${x - 10}px;
+          top: ${y - 10}px;
+          width: 20px;
+          height: 20px;
+          pointer-events: none;
+          z-index: 10;
+        `;
+
+        card.appendChild(ripple);
+
+        setTimeout(() => {
+          ripple.remove();
+        }, 600);
+      });
+
+      // Add hover sound effect placeholder
+      card.addEventListener('mouseenter', () => {
+        // Placeholder for sound effect
+        // playSound('terminal-hover');
+      });
+    });
+  });
+
+  // Add ripple animation
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes ripple {
+      to {
+        transform: scale(4);
+        opacity: 0;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+</script>
diff --git a/website/src/components/StatusIndicator.astro b/website/src/components/StatusIndicator.astro
new file mode 100644
index 000000000..f60b23454
--- /dev/null
+++ b/website/src/components/StatusIndicator.astro
@@ -0,0 +1,147 @@
+---
+export interface Props {
+  status: 'active' | 'warning' | 'success' | 'error' | 'idle';
+  label: string;
+  pulse?: boolean;
+  size?: 'small' | 'medium' | 'large';
+}
+
+const { status, label, pulse = true, size = 'medium' } = Astro.props;
+
+const statusColors = {
+  active: '#00ff41',
+  warning: '#ffb000',
+  success: '#00ff41',
+  error: '#ff0040',
+  idle: '#888888'
+};
+
+const statusColor = statusColors[status];
+---
+
+<div class={`status-indicator ${size} ${pulse ? 'pulse' : ''}`}>
+  <div class="status-dot" style={`background-color: ${statusColor}`}></div>
+  <span class="status-label">{label}</span>
+</div>
+
+<style>
+  .status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: 'JetBrains Mono', monospace;
+  }
+
+  .status-dot {
+    border-radius: 50%;
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .status-indicator.small .status-dot {
+    width: 6px;
+    height: 6px;
+  }
+
+  .status-indicator.medium .status-dot {
+    width: 8px;
+    height: 8px;
+  }
+
+  .status-indicator.large .status-dot {
+    width: 12px;
+    height: 12px;
+  }
+
+  .status-label {
+    color: #cccccc;
+    font-size: 0.9rem;
+    font-weight: 400;
+    letter-spacing: 0.02em;
+  }
+
+  .status-indicator.small .status-label {
+    font-size: 0.8rem;
+  }
+
+  .status-indicator.large .status-label {
+    font-size: 1rem;
+    font-weight: 500;
+  }
+
+  /* Pulse animation */
+  .status-indicator.pulse .status-dot {
+    animation: statusPulse 2s infinite;
+  }
+
+  .status-indicator.pulse .status-dot::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    border-radius: 50%;
+    background: inherit;
+    opacity: 0.3;
+    animation: statusRipple 2s infinite;
+  }
+
+  @keyframes statusPulse {
+    0%, 100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.7;
+      transform: scale(1.1);
+    }
+  }
+
+  @keyframes statusRipple {
+    0% {
+      transform: scale(1);
+      opacity: 0.3;
+    }
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+
+  /* Hover effects */
+  .status-indicator:hover .status-dot {
+    transform: scale(1.2);
+    filter: brightness(1.2);
+  }
+
+  .status-indicator:hover .status-label {
+    color: #ffffff;
+  }
+
+  /* Terminal-style glow effect */
+  .status-dot {
+    box-shadow:
+      0 0 5px currentColor,
+      inset 0 0 5px rgba(255, 255, 255, 0.1);
+  }
+
+  /* Accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    .status-dot,
+    .status-dot::before {
+      animation: none;
+    }
+  }
+
+  /* Dark mode adjustments */
+  @media (prefers-color-scheme: light) {
+    .status-label {
+      color: #333333;
+    }
+
+    .status-indicator:hover .status-label {
+      color: #000000;
+    }
+  }
+</style>
diff --git a/website/src/content/docs/jan/assistants.mdx b/website/src/content/docs/jan/assistants.mdx
index 9e0bada5b..3cc553cb3 100644
--- a/website/src/content/docs/jan/assistants.mdx
+++ b/website/src/content/docs/jan/assistants.mdx
@@ -26,7 +26,7 @@ which can help guide how the AI model should behave and respond to your inputs.
 assistants, and customize their instructions and settings from the Assistants tab.
 
 ![The Assistants management page, where you can view, add, edit, or delete assistants. Each assistant has a name,
-description, and can be customized for different tasks.](~/assets/assistants-ui-overview.png)
+description, and can be customized for different tasks.](../../../assets/assistants-ui-overview.png)
 
 To find the Assistants tab:
 
@@ -76,18 +76,18 @@ Provide examples when explaining complex topics.
 You can quickly switch between assistants, or create and edit them, directly from the Chat screen using the
 assistant dropdown menu at the top:
 
-![Assistant Dropdown](~/assets/assistant-dropdown-updated.png)
+![Assistant Dropdown](../../../assets/assistant-dropdown-updated.png)
 
 - Click the assistant's name (e.g., "Travel Planner") at the top of the Chat screen to open the dropdown menu.
 - The dropdown lists all of your assistants. Click on any of the assistants available to switch to it for the
 current chat session.
 - To create a new assistant, select **Create Assistant** at the bottom of the dropdown. This opens the Add Assistant dialog:
 
-![Add Assistant Dialog](~/assets/assistant-add-dialog.png)
+![Add Assistant Dialog](../../../assets/assistant-add-dialog.png)
 
 - To edit an existing assistant, click the gear (⚙️) icon next to its name in the dropdown. This opens the Edit Assistant dialog:
 
-![Edit Assistant Dialog](~/assets/assistant-edit-dialog.png)
+![Edit Assistant Dialog](../../../assets/assistant-edit-dialog.png)
 
 ### Add/Edit Assistant Dialogs
 - Set an (optional) emoji and name for your assistant.
diff --git a/website/src/content/docs/jan/data-folder.mdx b/website/src/content/docs/jan/data-folder.mdx
index 629b2e2b8..a1a404a5a 100644
--- a/website/src/content/docs/jan/data-folder.mdx
+++ b/website/src/content/docs/jan/data-folder.mdx
@@ -31,7 +31,7 @@ Via Jan:
 2. Click <FolderOpen width={16} height={16} style={{display:"inline"}}/>
 
 <br/>
-![Open Jan Data Folder](~/assets/settings-11.png)
+![Open Jan Data Folder](../../../assets/settings-11.png)
 <br/>
 
 Via Terminal:
diff --git a/website/src/content/docs/jan/explanation/llama-cpp.mdx b/website/src/content/docs/jan/explanation/llama-cpp.mdx
index 7f4a49c51..58f0e82bf 100644
--- a/website/src/content/docs/jan/explanation/llama-cpp.mdx
+++ b/website/src/content/docs/jan/explanation/llama-cpp.mdx
@@ -43,7 +43,7 @@ Originally created by Georgi Gerganov, llama.cpp is designed to run large langua
 
 Find llama.cpp settings at **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Local Engine** > **llama.cpp**:
 
-![llama.cpp](~/assets/llama.cpp-01-updated.png)
+![llama.cpp](../../../../assets/llama.cpp-01-updated.png)
 
 <Aside type="info">
 These are advanced settings. You typically only need to adjust them if models aren't working properly or you want to optimize performance for your specific hardware.
diff --git a/website/src/content/docs/jan/explanation/model-parameters.mdx b/website/src/content/docs/jan/explanation/model-parameters.mdx
index b03b9222b..b188f488e 100644
--- a/website/src/content/docs/jan/explanation/model-parameters.mdx
+++ b/website/src/content/docs/jan/explanation/model-parameters.mdx
@@ -49,7 +49,7 @@ These settings control how the model thinks and performs:
 | **Presence Penalty** | Encourages talking about new topics | Higher values make the model explore new subjects instead of staying on one topic. |
 | **Frequency Penalty** | Reduces word repetition | Similar to repeat penalty but focuses on how often words are used. |
 
-![Model Parameters](~/assets/model-parameters.png)
+![Model Parameters](../../../../assets/model-parameters.png)
 
 ## Model Capabilities (Edit Button)
 
@@ -61,8 +61,8 @@ These toggle switches enable special features:
 - **Web Search**: Let the model search the internet for current information
 - **Reasoning**: Enable step-by-step thinking for complex problems
 
-![Model Capabilities Edit 01](~/assets/model-capabilities-edit-01.png)
-![Model Capabilities Edit 02](~/assets/model-capabilities-edit-02.png)
+![Model Capabilities Edit 01](../../../../assets/model-capabilities-edit-01.png)
+![Model Capabilities Edit 02](../../../../assets/model-capabilities-edit-02.png)
 
 ## Hardware Settings
 
diff --git a/website/src/content/docs/jan/installation/linux.mdx b/website/src/content/docs/jan/installation/linux.mdx
index 3bb55fae3..58b2aabee 100644
--- a/website/src/content/docs/jan/installation/linux.mdx
+++ b/website/src/content/docs/jan/installation/linux.mdx
@@ -1,5 +1,5 @@
 ---
-title: Linux
+title: Linux Installation
 description: Get started quickly with Jan, an AI chat application that runs 100% offline on your desktop & mobile (*coming soon*).
 keywords:
   [
@@ -20,85 +20,78 @@ keywords:
   ]
 ---
 
+import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
 
-
-
-
-# Linux Installation
 Instructions for installing Jan on Linux.
 
 ## Compatibility
 System requirements:
 
-<Tabs items={['OS', 'CPU', 'RAM', 'GPU', 'Disk']}>
+<Tabs>
+  <TabItem label="OS">
+    #### Debian-based (Supports `.deb` and `AppImage`)
 
-<Tabs.Tab>
+    - Debian
+    - Ubuntu and derivatives:
+      - Ubuntu Desktop LTS (official)/Ubuntu Server LTS (only for server)
+      - Edubuntu
+      - Kubuntu
+      - Lubuntu
+      - Ubuntu Budgie
+      - Ubuntu Cinnamon
+      - Ubuntu Kylin
+      - Ubuntu MATE
+      - Linux Mint
+      - Pop!_OS
 
-#### Debian-based (Supports `.deb` and `AppImage`)
+    #### RHEL-based (Supports `.rpm` and `AppImage`)
 
-- Debian
-- Ubuntu and derivatives:
-  - Ubuntu Desktop LTS (official)/Ubuntu Server LTS (only for server)
-  - Edubuntu
-  - Kubuntu
-  - Lubuntu
-  - Ubuntu Budgie
-  - Ubuntu Cinnamon
-  - Ubuntu Kylin
-  - Ubuntu MATE
-  - Linux Mint
-  - Pop!_OS
+    - RHEL-based (Server only)
+    - Fedora
 
-#### RHEL-based (Supports `.rpm` and `AppImage`)
+    #### Arch-based
 
-- RHEL-based (Server only)
-- Fedora
+    - Arch Linux
+    - SteamOS
 
-#### Arch-based
+    #### Independent
 
-- Arch Linux
-- SteamOS
+    - openSUSE
+  </TabItem>
 
-#### Independent
+  <TabItem label="CPU">
+    - Haswell processors (Q2 2013) and newer
+    - Tiger Lake (Q3 2020) and newer for Celeron and Pentium processors
+    - Excavator processors (Q2 2015) and newer
 
-- openSUSE
+    <Aside type="note">
+    CPU must support AVX2. See [supported processors](https://en.wikipedia.org/wiki/Advanced_Vector_Extensions#CPUs_with_AVX2).
+    </Aside>
+  </TabItem>
 
-</Tabs.Tab>
+  <TabItem label="RAM">
+    - 8GB → up to 3B parameter models (int4)
+    - 16GB → up to 7B parameter models (int4)
+    - 32GB → up to 13B parameter models (int4)
 
-<Tabs.Tab>
-- Haswell processors (Q2 2013) and newer
-- Tiger Lake (Q3 2020) and newer for Celeron and Pentium processors
-- Excavator processors (Q2 2015) and newer
+    <Aside type="note">
+    DDR3 or newer recommended.
+    </Aside>
+  </TabItem>
 
-<Aside type="info">
-CPU must support AVX2. See [supported processors](https://en.wikipedia.org/wiki/Advanced_Vector_Extensions#CPUs_with_AVX2).
-</Aside>
-</Tabs.Tab>
+  <TabItem label="GPU">
+    - 6GB → up to 3B parameter models (int4)
+    - 8GB → up to 7B parameter models (int4)
+    - 12GB → up to 13B parameter models (int4)
 
-<Tabs.Tab>
-- 8GB → up to 3B parameter models (int4)
-- 16GB → up to 7B parameter models (int4)
-- 32GB → up to 13B parameter models (int4)
-
-<Aside type="info">
-DDR3 or newer recommended.
-</Aside>
-</Tabs.Tab>
-
-<Tabs.Tab>
-- 6GB → up to 3B parameter models (int4)
-- 8GB → up to 7B parameter models (int4)
-- 12GB → up to 13B parameter models (int4)
-
-<Aside type="info">
-6GB VRAM minimum required.
-</Aside>
-</Tabs.Tab>
-
-<Tabs.Tab>
-Minimum 10GB of free disk space required.
-</Tabs.Tab>
+    <Aside type="note">
+    6GB VRAM minimum required.
+    </Aside>
+  </TabItem>
 
+  <TabItem label="Disk">
+    Minimum 10GB of free disk space required.
+  </TabItem>
 </Tabs>
 
 ## Install Jan
@@ -110,67 +103,62 @@ Installation steps:
 ### Step 1: Download Application
 
 Available releases:
-<Tabs items={['Stable Release', 'Beta Release', 'Nightly Release']}>
-<Tabs.Tab>
-Stable release:
-  - Ubuntu: [jan.deb](https://app.jan.ai/download/latest/linux-amd64-deb)
-  - Others: [Jan.AppImage](https://app.jan.ai/download/latest/linux-amd64-appimage)
-- Official Website: https://jan.ai/download
+<Tabs>
+  <TabItem label="Stable Release">
+    Stable release:
+    - Ubuntu: [jan.deb](https://app.jan.ai/download/latest/linux-amd64-deb)
+    - Others: [Jan.AppImage](https://app.jan.ai/download/latest/linux-amd64-appimage)
+    - Official Website: https://jan.ai/download
+  </TabItem>
+  
+  <TabItem label="Beta Release">
+    Beta release:
+    - Ubuntu: [jan.deb](https://app.jan.ai/download/beta/linux-amd64-deb)
+    - Others: [Jan.AppImage](https://app.jan.ai/download/beta/linux-amd64-appimage)
 
-</Tabs.Tab>
-<Tabs.Tab>
+    <Aside type="note">
+    May contain bugs. Use with caution.
+    </Aside>
+  </TabItem>
+  
+  <TabItem label="Nightly Release">
+    Development build:
+    - Ubuntu: [jan.deb](https://app.jan.ai/download/nightly/linux-amd64-deb)
+    - Others: [Jan.AppImage](https://app.jan.ai/download/nightly/linux-amd64-appimage)
 
-Beta release:
-  - Ubuntu: [jan.deb](https://app.jan.ai/download/beta/linux-amd64-deb)
-  - Others: [Jan.AppImage](https://app.jan.ai/download/beta/linux-amd64-appimage)
-
-<Aside type="info">
-May contain bugs. Use with caution.
-</Aside>
-</Tabs.Tab>
-<Tabs.Tab>
-
-Development build:
- - Ubuntu: [jan.deb](https://app.jan.ai/download/nightly/linux-amd64-deb)
- - Others: [Jan.AppImage](https://app.jan.ai/download/nightly/linux-amd64-appimage)
-
-<Aside type="info">
-Experimental version. Expect instability.
-</Aside>
-</Tabs.Tab>
+    <Aside type="note">
+    Experimental version. Expect instability.
+    </Aside>
+  </TabItem>
 </Tabs>
 
 ### Step 2: Install Application
 
 Installation commands:
 
-<Tabs items={['Ubuntu', 'Others']}>
-<Tabs.Tab>
+<Tabs>
+  <TabItem label="Ubuntu">
+    ##### dpkg
 
-##### dpkg
+    ```bash
+    sudo dpkg -i jan-linux-amd64-{version}.deb
+    ```
 
-```bash
-sudo dpkg -i jan-linux-amd64-{version}.deb
-```
+    ##### apt-get
 
-##### apt-get
+    ```bash
+    sudo apt-get install ./jan-linux-amd64-{version}.deb
+    ```
+  </TabItem>
 
-```bash
-sudo apt-get install ./jan-linux-amd64-{version}.deb
-```
+  <TabItem label="Others">
+    From the terminal, run the following commands:
 
-</Tabs.Tab>
-
-<Tabs.Tab>
-
-From the terminal, run the following commands:
-
-```bash
-chmod +x jan-linux-x86_64-{version}.AppImage
-./jan-linux-x86_64-{version}.AppImage
-```
-
-</Tabs.Tab>
+    ```bash
+    chmod +x jan-linux-x86_64-{version}.AppImage
+    ./jan-linux-x86_64-{version}.AppImage
+    ```
+  </TabItem>
 </Tabs>
 
 </ol>
@@ -196,100 +184,95 @@ See [Jan Data Folder](/docs/data-folder) for details.
 ## GPU Acceleration
 Configuration for GPU support:
 
-<Tabs items={['NVIDIA GPU', 'AMD GPU', 'Intel Arc GPU']}>
+<Tabs>
+  <TabItem label="NVIDIA GPU">
+    <ol>
 
-<Tabs.Tab>
-<ol>
+    ### Step 1: Verify Hardware & Install Dependencies
 
-### Step 1: Verify Hardware & Install Dependencies
+    **1.1. Check GPU Detection**
 
-**1.1. Check GPU Detection**
+    ```sh
+    lspci | grep -i nvidia
+    ```
 
-```sh
-lspci | grep -i nvidia
-```
+    **1.2. Install Required components**
 
-**1.2. Install Required components**
+    **NVIDIA Driver:**
 
-**NVIDIA Driver:**
+    1. Install the [NVIDIA Driver](https://www.nvidia.com/en-us/drivers/), ideally via your package manager.
+    2. Verify:
 
-1. Install the [NVIDIA Driver](https://www.nvidia.com/en-us/drivers/), ideally via your package manager.
-2. Verify:
+    ```sh
+    nvidia-smi
+    ```
 
-```sh
-nvidia-smi
-```
+    **CUDA Toolkit:**
 
-**CUDA Toolkit:**
+    1. Install the [CUDA toolkit](https://developer.nvidia.com/cuda-downloads), ideally from your package manager (**11.7+**)
+    2. Verify:
 
-1. Install the [CUDA toolkit](https://developer.nvidia.com/cuda-downloads), ideally from your package manager (**11.7+**)
-2. Verify:
+    ```sh
+    nvcc --version
+    ```
 
-```sh
-nvcc --version
-```
+    **Additional Requirements:**
 
-**Additional Requirements:**
+    ```sh
+    sudo apt update
+    sudo apt install gcc-11 g++-11 cpp-11
+    export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/cuda/lib64
+    ```
+    [Documentation](https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html#post-installation-actions)
 
-```sh
-sudo apt update
-sudo apt install gcc-11 g++-11 cpp-11
-export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/cuda/lib64
-```
-[Documentation](https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html#post-installation-actions)
+    ### Step 2: Enable GPU Acceleration
 
-### Step 2: Enable GPU Acceleration
+    1. Navigate to **Settings** > **Local Engine** > **Llama.cpp**
+    2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
 
-1. Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Local Engine** > **Llama.cpp**
-2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
+    <Aside type="note">
+    CUDA offers better performance than Vulkan.
+    </Aside>
 
-<Aside type="info">
-CUDA offers better performance than Vulkan.
-</Aside>
+    </ol>
+  </TabItem>
 
-</ol>
+  <TabItem label="AMD GPU">
+    Requires Vulkan support.
 
-</Tabs.Tab>
+    1. Navigate to **Settings** > **Hardware** > **GPUs**
+    2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
+  </TabItem>
 
-<Tabs.Tab>
-Requires Vulkan support.
-
-1. Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Hardware** > **GPUs**
-2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
-
-</Tabs.Tab>
-
-<Tabs.Tab>
-Requires Vulkan support.
-
-1. Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Hardware** > **GPUs**
-2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
-</Tabs.Tab>
+  <TabItem label="Intel Arc GPU">
+    Requires Vulkan support.
 
+    1. Navigate to **Settings** > **Hardware** > **GPUs**
+    2. Select appropriate backend in **llama-cpp Backend**. Details in our [guide](/docs/local-engines/llama-cpp).
+  </TabItem>
 </Tabs>
 
 ## Uninstall Jan
 
 Removal commands:
-<Tabs items={['Ubuntu', 'Others']}>
-<Tabs.Tab>
-
-```bash
-sudo apt-get remove jan
-rm -rf Jan
-rm -rf ~/.config/Jan/data
-rm -rf ~/.config/Jan/cache
-```
-</Tabs.Tab>
-<Tabs.Tab>
-
-```bash
-rm jan-linux-x86_64-{version}.AppImage
-rm -rf ~/.config/Jan
-```
-</Tabs.Tab>
+<Tabs>
+  <TabItem label="Ubuntu">
+    ```bash
+    sudo apt-get remove jan
+    rm -rf Jan
+    rm -rf ~/.config/Jan/data
+    rm -rf ~/.config/Jan/cache
+    ```
+  </TabItem>
+  
+  <TabItem label="Others">
+    ```bash
+    rm jan-linux-x86_64-{version}.AppImage
+    rm -rf ~/.config/Jan
+    ```
+  </TabItem>
 </Tabs>
 
-<Aside type="warning">
+<Aside type="caution">
 These commands permanently delete application data.
 </Aside>
diff --git a/website/src/content/docs/jan/installation/mac.mdx b/website/src/content/docs/jan/installation/mac.mdx
index a40136c44..5fbbdb9b6 100644
--- a/website/src/content/docs/jan/installation/mac.mdx
+++ b/website/src/content/docs/jan/installation/mac.mdx
@@ -20,6 +20,8 @@ keywords:
   ]
 ---
 
+import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
+
 
 
 
@@ -59,34 +61,33 @@ Installation steps:
 ### Step 1: Download Application
 
 Select version:
-<Tabs items={['Stable Release', 'Beta Release', 'Nightly Release']}>
-<Tabs.Tab>
-Get Jan from here:
+<Tabs>
+  <TabItem label="Stable Release">
+    Get Jan from here:
 
-- [Download Jan's Stable Version](https://app.jan.ai/download/latest/mac-universal)
-- Official Website: https://jan.ai/download
+    - [Download Jan's Stable Version](https://app.jan.ai/download/latest/mac-universal)
+    - Official Website: https://jan.ai/download
+  </TabItem>
+  
+  <TabItem label="Beta Release">
+    Beta: New features with potential instability.
 
-</Tabs.Tab>
-<Tabs.Tab>
+    [Download Jan's Beta Version](https://app.jan.ai/download/beta/mac-universal)
 
-Beta: New features with potential instability.
+    <Aside type="warning">
+    May contain bugs.
+    </Aside>
+  </TabItem>
+  
+  <TabItem label="Nightly Release">
+    Nightly: Latest features, less stable.
 
-[Download Jan's Beta Version](https://app.jan.ai/download/beta/mac-universal)
+    [Download Jan's Nightly Version](https://app.jan.ai/download/nightly/mac-universal)
 
-<Aside type="warning">
-May contain bugs.
-</Aside>
-</Tabs.Tab>
-<Tabs.Tab>
-
-Nightly: Latest features, less stable.
-
-[Download Jan's Nightly Version](https://app.jan.ai/download/nightly/mac-universal)
-
-<Aside type="info">
-Expect potential instability.
-</Aside>
-</Tabs.Tab>
+    <Aside type="info">
+    Expect potential instability.
+    </Aside>
+  </TabItem>
 </Tabs>
 
 
diff --git a/website/src/content/docs/jan/installation/windows.mdx b/website/src/content/docs/jan/installation/windows.mdx
index e8c2ced1f..7b43e2a38 100644
--- a/website/src/content/docs/jan/installation/windows.mdx
+++ b/website/src/content/docs/jan/installation/windows.mdx
@@ -20,6 +20,8 @@ keywords:
   ]
 ---
 
+import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
+
 
 
 # Windows Installation
@@ -30,14 +32,14 @@ keywords:
 - **Operating System**: Windows 10 or higher.
 - **CPU**
 
-<Tabs items={['Intel', 'AMD']}>
-<Tabs.Tab>
-- Intel: Haswell (Q2 2013) or newer
-- Intel Celeron/Pentium: Tiger Lake (Q3 2020) or newer
-</Tabs.Tab>
-<Tabs.Tab>
-- Excavator processors (Q2 2015) and newer.
-</Tabs.Tab>
+<Tabs>
+  <TabItem label="Intel">
+    - Intel: Haswell (Q2 2013) or newer
+    - Intel Celeron/Pentium: Tiger Lake (Q3 2020) or newer
+  </TabItem>
+  <TabItem label="AMD">
+    - Excavator processors (Q2 2015) and newer.
+  </TabItem>
 </Tabs>
 
 <Aside type="info">
@@ -72,31 +74,31 @@ Minimum 6GB VRAM recommended for NVIDIA, AMD, or Intel Arc GPUs.
 
 ### Step 1: Download Application
 
-<Tabs items={['Stable Release', 'Beta Release', 'Nightly Release']}>
-<Tabs.Tab>
-- [Download Stable Jan](https://app.jan.ai/download/latest/win-x64)
-- Official Website: [Download Jan](https://jan.ai/download)
-</Tabs.Tab>
-<Tabs.Tab>
+<Tabs>
+  <TabItem label="Stable Release">
+    - [Download Stable Jan](https://app.jan.ai/download/latest/win-x64)
+    - Official Website: [Download Jan](https://jan.ai/download)
+  </TabItem>
+  
+  <TabItem label="Beta Release">
+    Beta: Contains newer features but may be unstable
 
-Beta: Contains newer features but may be unstable
+    [Download Beta Jan](https://app.jan.ai/download/beta/win-x64)
 
-[Download Beta Jan](https://app.jan.ai/download/beta/win-x64)
+    <Aside type="warning">
+    May be unstable
+    </Aside>
+  </TabItem>
+  
+  <TabItem label="Nightly Release">
+    Nightly: Development build with latest features
 
-<Aside type="warning">
-May be unstable
-</Aside>
-</Tabs.Tab>
-<Tabs.Tab>
+    [Download Nightly Jan](https://app.jan.ai/download/nightly/win-x64)
 
-Nightly: Development build with latest features
-
-[Download Nightly Jan](https://app.jan.ai/download/nightly/win-x64)
-
-<Aside type="warning">
-Unstable development build
-</Aside>
-</Tabs.Tab>
+    <Aside type="warning">
+    Unstable development build
+    </Aside>
+  </TabItem>
 </Tabs>
 
 ### Step 2: Install Application
@@ -121,9 +123,8 @@ See [Jan Data Folder](/docs/data-folder) for complete folder structure details.
 
 ## GPU Acceleration
 
-<Tabs items={['NVIDIA GPU', 'AMD GPU', 'Intel Arc GPU']}>
-
-<Tabs.Tab>
+<Tabs>
+  <TabItem label="NVIDIA GPU">
 
 <ol>
 
@@ -152,26 +153,26 @@ nvcc --version
 ```
 ### Step 2: Enable GPU Acceleration
 
-Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Hardware** > **GPUs**
+Navigate to **Settings** > **Hardware** > **GPUs**
 and toggle the **ON** switch if not enabled.
 
 </ol>
 
-</Tabs.Tab>
+  </TabItem>
 
-<Tabs.Tab>
-AMD GPUs require **Vulkan** support.
+  <TabItem label="AMD GPU">
+    AMD GPUs require **Vulkan** support.
 
-Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Hardware** > **GPUs**
-and toggle the **ON** switch if not enabled.
-</Tabs.Tab>
+    Navigate to **Settings** > **Hardware** > **GPUs**
+    and toggle the **ON** switch if not enabled.
+  </TabItem>
 
-<Tabs.Tab>
-Intel Arc GPUs require **Vulkan** support.
+  <TabItem label="Intel Arc GPU">
+    Intel Arc GPUs require **Vulkan** support.
 
-Navigate to **Settings** (<Settings width={16} height={16} style={{display:"inline"}}/>) > **Hardware** > **GPUs**
-and toggle the **ON** switch if not enabled.
-</Tabs.Tab>
+    Navigate to **Settings** > **Hardware** > **GPUs**
+    and toggle the **ON** switch if not enabled.
+  </TabItem>
 </Tabs>
 
 
diff --git a/website/src/content/docs/jan/jan-models/jan-nano-128.mdx b/website/src/content/docs/jan/jan-models/jan-nano-128.mdx
index 9fb5e0544..3ff3e4e35 100644
--- a/website/src/content/docs/jan/jan-models/jan-nano-128.mdx
+++ b/website/src/content/docs/jan/jan-models/jan-nano-128.mdx
@@ -75,7 +75,7 @@ not about understanding every word; it's about finding the needle in a haystack
 
 Jan-Nano-128k has been rigorously evaluated on the SimpleQA benchmark using our MCP-based methodology, demonstrating superior performance compared to its predecessor:
 
-![Jan-Nano-128k Performance](~/assets/jan-nano-bench.png)
+![Jan-Nano-128k Performance](../../../../assets/jan-nano-bench.png)
 
 **Key findings:**
 - 15% improvement over Jan-Nano-32k on complex multi-document tasks
diff --git a/website/src/content/docs/jan/jan-models/jan-nano-32.mdx b/website/src/content/docs/jan/jan-models/jan-nano-32.mdx
index 5f9d94534..93f170d58 100644
--- a/website/src/content/docs/jan/jan-models/jan-nano-32.mdx
+++ b/website/src/content/docs/jan/jan-models/jan-nano-32.mdx
@@ -20,7 +20,7 @@ import { Aside } from '@astrojs/starlight/components';
 
 # Jan Nano
 
-![Jan Nano](~/assets/jan-nano0.png)
+![Jan Nano](../../../../assets/jan-nano0.png)
 
 ## Why Jan Nano?
 
@@ -64,7 +64,7 @@ Download Jan from [here](https://jan.ai/docs/desktop/).
 **Step 2**
 Go to the Hub Tab, search for Jan-Nano-Gguf, and click on the download button to the best model size for your system.
 
-![Jan Nano](~/assets/jan-nano1.png)
+![Jan Nano](../../../../assets/jan-nano1.png)
 
 **Step 3**
 Go to **Settings** > **Model Providers** > **Llama.cpp** click on the pencil icon and enable tool use for Jan-Nano-Gguf.
@@ -76,12 +76,12 @@ API. You can get a free API key from [here](https://serper.dev/). Sign up and th
 **Step 5**
 Add the serper MCP to Jan via the **Settings** > **MCP Servers** tab.
 
-![Serper MCP](~/assets/serper-mcp.png)
+![Serper MCP](../../../../assets/serper-mcp.png)
 
 **Step 6**
 Open up a new chat and ask Jan-Nano to search the web for you.
 
-![Jan Nano](~/assets/jan-nano-demo.gif)
+![Jan Nano](../../../../assets/jan-nano-demo.gif)
 
 ## Queries to Try
 
diff --git a/website/src/content/docs/jan/manage-models.mdx b/website/src/content/docs/jan/manage-models.mdx
index 01bc6ce91..5600df25d 100644
--- a/website/src/content/docs/jan/manage-models.mdx
+++ b/website/src/content/docs/jan/manage-models.mdx
@@ -47,7 +47,7 @@ Jan will indicate if a model might be **Slow on your device** or **Not enough RA
 </Aside>
 
 <br/>
-![Download Model](~/assets/model-management-01.png)
+![Download Model](../../../assets/model-management-01.png)
 <br/>
 
 #### 2. Import from [Hugging Face](https://huggingface.co/)
@@ -64,11 +64,11 @@ You can download models with a direct link from Hugging Face:
 
 <br/>
 **Copy the model ID.**
-![Find HF Model](~/assets/hf-unsloth.png)
+![Find HF Model](../../../assets/hf-unsloth.png)
 
 <br/>
 **Paste it in Jan's Hub Search Bar.**
-![Import Model](~/assets/model-management-02.png)
+![Import Model](../../../assets/model-management-02.png)
 <br/>
 
 #### 3. Import Local Files
@@ -87,15 +87,15 @@ quality or unexpected outputs. Learn about [model configurations here](./model-p
 </Aside>
 
 <br/>
-![Download Model](~/assets/model-management-04.png)
+![Download Model](../../../assets/model-management-04.png)
 <br/>
 
 <br/>
-![Download Model](~/assets/model-import-04.png)
+![Download Model](../../../assets/model-import-04.png)
 <br/>
 
 <br/>
-![Download Model](~/assets/model-import-05.png)
+![Download Model](../../../assets/model-import-05.png)
 <br/>
 
 #### 4. Manual Setup
@@ -176,7 +176,7 @@ models. Here is an example of model parameters:
 3. Select the three dots <EllipsisVertical width={16} height={16} style={{display:"inline"}}/> icon next to it and select **Delete Model**
 
 <br/>
-![Delete Model](~/assets/model-management-05.png)
+![Delete Model](../../../assets/model-management-05.png)
 <br/>
 
 
@@ -195,8 +195,8 @@ Anthropic (Claude), Groq, Mistral, and more.
 4. The activated cloud models will be available in your model selector inside the **Chat** panel
 
 <br/>
-![Download Model](~/assets/model-management-06.png)
+![Download Model](../../../assets/model-management-06.png)
 <br/>
 As soon as you add your key for a model provider like Anthropic or OpenAI, you will be able to pick one of their models to chat with.
-![Connect Remote APIs](~/assets/quick-start-03.png)
+![Connect Remote APIs](../../../assets/quick-start-03.png)
 <br/>
diff --git a/website/src/content/docs/jan/mcp-examples/data-analysis/e2b.mdx b/website/src/content/docs/jan/mcp-examples/data-analysis/e2b.mdx
index 38e71b59a..b5b8cc098 100644
--- a/website/src/content/docs/jan/mcp-examples/data-analysis/e2b.mdx
+++ b/website/src/content/docs/jan/mcp-examples/data-analysis/e2b.mdx
@@ -39,7 +39,7 @@ complexity of managing Python environments or dependencies locally.
 
 1. **Enable MCP**: Go to **Settings** > **MCP Servers**, toggle **Allow All MCP Tool Permission** ON
 
-![Turn on MCP](~/assets/mcp-on.png)
+![Turn on MCP](../../../../../assets/mcp-on.png)
 
 <Aside type="info">
 Don't forget that MCP gets enabled once you turn on Experimental Features in Jan's General settings.
@@ -47,11 +47,11 @@ Don't forget that MCP gets enabled once you turn on Experimental Features in Jan
 
 2. **Get API Key**: Sign up at [e2b.dev](https://e2b.dev/), generate an API key
 
-![E2B API Key](~/assets/e2b-key.png)
+![E2B API Key](../../../../../assets/e2b-key.png)
 
 Add a meaningful name to your key.
 
-![E2B MCP Server](~/assets/e2b-key1.png)
+![E2B MCP Server](../../../../../assets/e2b-key1.png)
 
 3. **Add MCP Server**: Click `+` in MCP Servers section
 
@@ -63,12 +63,12 @@ Configure:
   - Key: `E2B_API_KEY`
   - Value: `your-api-key`
 
-![E2B MCP Server](~/assets/e2b-key2.png)
+![E2B MCP Server](../../../../../assets/e2b-key2.png)
 
 4. **Verify**: Check server shows as active
 
 
-![E2B MCP Server](~/assets/e2b-key3.png)
+![E2B MCP Server](../../../../../assets/e2b-key3.png)
 
 ## Pre-installed Libraries
 
@@ -117,13 +117,13 @@ model with tool calling capabilities you'd like.
 Make sure you activate Tools on the model you're using.
 </Aside>
 
-![E2B MCP Server](~/assets/e2b-key4.png)
+![E2B MCP Server](../../../../../assets/e2b-key4.png)
 
 ### Basic Data Analysis
 
 Start small. Open a new chat, confirm that the model has tools enabled and ask it to create a small dataset of 100 students with grades and study hours. 
 
-![Chat and use E2B MCP ](~/assets/e2b-key5.png)
+![Chat and use E2B MCP ](../../../../../assets/e2b-key5.png)
 
 
 ```
@@ -138,9 +138,9 @@ The model will:
 4. Add trend line
 
 
-![Chat and use E2B MCP ](~/assets/e2b-key6.png)
+![Chat and use E2B MCP ](../../../../../assets/e2b-key6.png)
 
-![Chat and use E2B MCP ](~/assets/e2b-key7.png)
+![Chat and use E2B MCP ](../../../../../assets/e2b-key7.png)
 
 
 <Aside type="warning">
diff --git a/website/src/content/docs/jan/mcp-examples/search/exa.mdx b/website/src/content/docs/jan/mcp-examples/search/exa.mdx
index a33a9cf6b..8c0fa601f 100644
--- a/website/src/content/docs/jan/mcp-examples/search/exa.mdx
+++ b/website/src/content/docs/jan/mcp-examples/search/exa.mdx
@@ -53,7 +53,7 @@ verify tool calling is enabled in model parameters.
 1. Go to **Settings** > **MCP Servers**
 2. Toggle **Allow All MCP Tool Permission** ON
 
-![MCP settings page with toggle enabled](~/assets/mcp-on.png)
+![MCP settings page with toggle enabled](../../../../../assets/mcp-on.png)
 
 ### Get API Key
 
@@ -62,7 +62,7 @@ verify tool calling is enabled in model parameters.
 3. Generate API key
 4. Save the key
 
-![Exa API Key](~/assets/exa.png)
+![Exa API Key](../../../../../assets/exa.png)
 
 ### Configure MCP Server
 
@@ -77,13 +77,13 @@ Click `+` in MCP Servers section:
   - Key: `EXA_API_KEY`
   - Value: `your-api-key`
 
-![Exa Jan MCP Server](~/assets/exa1.png)
+![Exa Jan MCP Server](../../../../../assets/exa1.png)
 
 ### Verify Setup
 
 Check server status in the MCP Servers list.
 
-![Exa Jan MCP Server](~/assets/exa2.png)
+![Exa Jan MCP Server](../../../../../assets/exa2.png)
 
 ### Model Configuration
 
@@ -94,13 +94,13 @@ Use a compatible model provider:
 - **OpenAI**
 - **OpenRouter**
 
-![E2B MCP Server](~/assets/e2b-key4.png)
+![E2B MCP Server](../../../../../assets/e2b-key4.png)
 
 ## Usage
 
 Start a new chat with a tool-enabled model. Exa tools will appear in the available tools list.
 
-![Exa Tools Available](~/assets/exa3.png)
+![Exa Tools Available](../../../../../assets/exa3.png)
 
 ### Example Queries
 
@@ -109,7 +109,7 @@ Start a new chat with a tool-enabled model. Exa tools will appear in the availab
 What is happening this week, mid July 2025, in Sydney, Australia?
 ```
 
-![Exa Tools Available](~/assets/exa4.png)
+![Exa Tools Available](../../../../../assets/exa4.png)
 
 **Investment Research:**
 ```
diff --git a/website/src/content/docs/jan/mcp.mdx b/website/src/content/docs/jan/mcp.mdx
index d175bd979..8c0392b5a 100644
--- a/website/src/content/docs/jan/mcp.mdx
+++ b/website/src/content/docs/jan/mcp.mdx
@@ -126,7 +126,7 @@ To illustrate how MCPs can be used within Jan, we will walk through an example u
 Before we begin, you will need to enable experimental features at `General` > `Advanced`. Next, go to `Settings` > `MCP Servers`, and toggle
 the `Allow All MCP Tool Permission` switch ON.
 
-![Turn on the MCP Host](~/assets/mcp-on.png)
+![Turn on the MCP Host](../../../assets/mcp-on.png)
 
 Please note that you will also need to have **NodeJS** and/or **Python** installed on your machine. In case you don't
 have either, you can download them from the official websites at the links below:
@@ -138,7 +138,7 @@ have either, you can download them from the official websites at the links below
 
 - Click on the `+` sign on the upper right-hand corner of the MCP box.
 
-![Add New Server](~/assets/mcp-setup-1.png)
+![Add New Server](../../../assets/mcp-setup-1.png)
 
 - Enter the following details to configure the BrowserMCP:
   - **Server Name**: `browsermcp`
@@ -146,35 +146,35 @@ have either, you can download them from the official websites at the links below
   - **Arguments**: `@browsermcp/mcp`
   - **Environment Variables**: You can leave this field empty.
 
-![Configure BrowserMCP](~/assets/mcp-setup-2.png)
+![Configure BrowserMCP](../../../assets/mcp-setup-2.png)
 
 - Check that the server has been activated successfully.
 
-![Server Confirmation](~/assets/mcp-setup-3.png)
+![Server Confirmation](../../../assets/mcp-setup-3.png)
 
 - Open your favorite chrome-based browser (e.g., Google Chrome, Brave, Vivaldi, Microsoft Edge, etc...) and navigate to the
 [Browser MCP Extension Page](https://chromewebstore.google.com/detail/browser-mcp-automate-your/bjfgambnhccakkhmkepdoekmckoijdlc).
 
-![Browser MCP Extension](~/assets/mcp-setup-6.png)
+![Browser MCP Extension](../../../assets/mcp-setup-6.png)
 
 - Make sure to enable the extension to run on private windows. Since Browser Use will have access to all sites you've
 already logged into in your regular browser session, it is best to give it a clean slate to start from.
 
-![Browser MCP Extension](~/assets/mcp-setup-7.png)
+![Browser MCP Extension](../../../assets/mcp-setup-7.png)
 
 - Enable the extension to run on private windows by clicking on it and Connecting to the Browser MCP server.
 
-![Browser MCP Extension](~/assets/mcp-setup-8.png)
+![Browser MCP Extension](../../../assets/mcp-setup-8.png)
 
 - Go back to Jan and pick a model with good tool use capabilities, for example, Claude 3.7 and 4 Sonnet, or Claude 4 Opus,
 and make sure to enable tool calling via the UI by going to **Model Providers > Anthropic** and, after you have entered your
 API key, enable tool from the **+** button.
 
-![Browser MCP Extension](~/assets/mcp-setup-9.png)
+![Browser MCP Extension](../../../assets/mcp-setup-9.png)
 
 You can check and see if this was accurate below.
 
-![Browser MCP Extension](~/assets/mcp-setup-10.png)
+![Browser MCP Extension](../../../assets/mcp-setup-10.png)
 
 
 ## Troubleshooting
diff --git a/website/src/content/docs/jan/remote-models/anthropic.mdx b/website/src/content/docs/jan/remote-models/anthropic.mdx
index 4b44f7a02..43f3c33fc 100644
--- a/website/src/content/docs/jan/remote-models/anthropic.mdx
+++ b/website/src/content/docs/jan/remote-models/anthropic.mdx
@@ -40,7 +40,7 @@ Ensure your API key has sufficient credits
 3. Insert your **API Key**
 
 <br/>
-![Anthropic](~/assets/model-management-06.png)
+![Anthropic](../../../../assets/model-management-06.png)
 <br/>
 
 ### Step 3: Start Using Anthropic's Models
diff --git a/website/src/content/docs/jan/remote-models/cohere.mdx b/website/src/content/docs/jan/remote-models/cohere.mdx
index 5eee7cb67..812b5093f 100644
--- a/website/src/content/docs/jan/remote-models/cohere.mdx
+++ b/website/src/content/docs/jan/remote-models/cohere.mdx
@@ -40,7 +40,7 @@ Ensure your API key has sufficient credits.
 3. Insert your **API Key**
 
 <br/>
-![Cohere](~/assets/cohere.png)
+![Cohere](../../../../assets/cohere.png)
 <br/>
 
 ### Step 3: Start Using Cohere's Models
diff --git a/website/src/content/docs/jan/remote-models/google.mdx b/website/src/content/docs/jan/remote-models/google.mdx
index ad80bacd2..9651a39d7 100644
--- a/website/src/content/docs/jan/remote-models/google.mdx
+++ b/website/src/content/docs/jan/remote-models/google.mdx
@@ -38,7 +38,7 @@ Ensure your API key has sufficient credits
 3. Insert your **API Key**
 
 <br/>
-![Google](~/assets/google.png)
+![Google](../../../../assets/google.png)
 <br/>
 
 ### Step 3: Start Using Google's Models
diff --git a/website/src/content/docs/jan/remote-models/groq.mdx b/website/src/content/docs/jan/remote-models/groq.mdx
index 0691b109a..554fcdfbe 100644
--- a/website/src/content/docs/jan/remote-models/groq.mdx
+++ b/website/src/content/docs/jan/remote-models/groq.mdx
@@ -38,7 +38,7 @@ Ensure your API key has sufficient credits
 3. Insert your **API Key**
 
 <br/>
-![Groq](~/assets/groq.png)
+![Groq](../../../../assets/groq.png)
 <br/>
 
 
diff --git a/website/src/content/docs/jan/remote-models/mistralai.mdx b/website/src/content/docs/jan/remote-models/mistralai.mdx
index 9baa55a2a..8c045c7e7 100644
--- a/website/src/content/docs/jan/remote-models/mistralai.mdx
+++ b/website/src/content/docs/jan/remote-models/mistralai.mdx
@@ -41,7 +41,7 @@ Ensure your API key has sufficient credits
 3. Insert your **API Key**
 
 <br/>
-![Mistral](~/assets/mistralai.png)
+![Mistral](../../../../assets/mistralai.png)
 <br/>
 
 ### Step 3: Start Using Mistral's Models
diff --git a/website/src/content/docs/jan/remote-models/openai.mdx b/website/src/content/docs/jan/remote-models/openai.mdx
index 6cf8f5082..3db405fb0 100644
--- a/website/src/content/docs/jan/remote-models/openai.mdx
+++ b/website/src/content/docs/jan/remote-models/openai.mdx
@@ -42,7 +42,7 @@ Ensure your API key has sufficient credits
 3. Insert your API Key
 
 <br/>
-![OpenAI](~/assets/openai.png)
+![OpenAI](../../../../assets/openai.png)
 <br/>
 
 ### Step 3: Start Using OpenAI's Models
diff --git a/website/src/content/docs/jan/remote-models/openrouter.mdx b/website/src/content/docs/jan/remote-models/openrouter.mdx
index 28e74d82f..81756d74f 100644
--- a/website/src/content/docs/jan/remote-models/openrouter.mdx
+++ b/website/src/content/docs/jan/remote-models/openrouter.mdx
@@ -51,7 +51,7 @@ Ensure your API key has sufficient credits. OpenRouter credits work across all a
 3. Insert your **API Key**
 
 <br/>
-![OpenRouter](~/assets/openrouter.png)
+![OpenRouter](../../../../assets/openrouter.png)
 <br/>
 
 ### Step 3: Start Using OpenRouter Models
diff --git a/website/src/content/docs/jan/settings.mdx b/website/src/content/docs/jan/settings.mdx
index dc9090551..3a75b7d7c 100644
--- a/website/src/content/docs/jan/settings.mdx
+++ b/website/src/content/docs/jan/settings.mdx
@@ -53,7 +53,7 @@ To download models from Hugging Face that require authentication, for example, l
 
 ## Model Settings (Gear Icon)
 
-![Model Settings](~/assets/trouble-shooting-04.png)
+![Model Settings](../../../assets/trouble-shooting-04.png)
 
 Click the gear icon next to a model to configure advanced settings:
 - **Context Size**: Maximum prompt context length
@@ -76,7 +76,7 @@ Monitor and manage system resources at **Settings > Hardware**:
 - **GPU Acceleration**: Enable/disable and configure GPU settings
 
 <br/>
-![Hardware](~/assets/hardware.png)
+![Hardware](../../../assets/hardware.png)
 <br/>
 
 ## Preferences
@@ -85,14 +85,14 @@ Monitor and manage system resources at **Settings > Hardware**:
 Control the visual theme of Jan's interface with any color combo you'd like. You can also control the color use in the code blocks.
 
 <br/>
-![Appearance](~/assets/settings-04.png)
+![Appearance](../../../assets/settings-04.png)
 <br/>
 
 ### Spell Check
 Jan includes a built-in spell check feature to help catch typing errors in your messages.
 
 <br/>
-![Spell Check](~/assets/settings-06.png)
+![Spell Check](../../../assets/settings-06.png)
 <br/>
 
 
@@ -110,7 +110,7 @@ Read more about that we collect with opt-in users at [Privacy](/docs/privacy).
 </Aside>
 
 <br/>
-![Analytics](~/assets/settings-07.png)
+![Analytics](../../../assets/settings-07.png)
 <br/>
 
 ### Log Management
@@ -122,7 +122,7 @@ Read more about that we collect with opt-in users at [Privacy](/docs/privacy).
 - To open logs from Jan's interface: at **Logs**, click <FolderOpen width={16} height={16} style={{display:"inline"}}/> icon to open App Logs & Cortex Logs:
 
 <br/>
-![View Logs](~/assets/settings-08.png)
+![View Logs](../../../assets/settings-08.png)
 <br/>
 
 **2. Clear Logs**
@@ -134,7 +134,7 @@ This action cannot be undone.
 </Aside>
 
 <br/>
-![Clear Logs](~/assets/settings-09.png)
+![Clear Logs](../../../assets/settings-09.png)
 <br/>
 
 
@@ -145,7 +145,7 @@ Jan stores your data locally in your own filesystem in a universal file format.
 
 At **Jan Data Folder**, click <FolderOpen width={16} height={16} style={{display:"inline"}}/> icon to open Jan application's folder:
 <br/>
-![Open Jan Data Folder](~/assets/settings-11.png)
+![Open Jan Data Folder](../../../assets/settings-11.png)
 <br/>
 
 **2. Edit Jan Data Folder**
@@ -161,7 +161,7 @@ An app restart will be required afterward.
 4. Click **Yes, Proceed**
 
 <br/>
-![Edit Jan Data Folder](~/assets/settings-12.png)
+![Edit Jan Data Folder](../../../assets/settings-12.png)
 <br/>
 
 ### HTTPs Proxy
@@ -184,7 +184,7 @@ Where:
 - `<port>`: The port number for the proxy server
 
 <br/>
-![HTTPs Proxy](~/assets/settings-13.png)
+![HTTPs Proxy](../../../assets/settings-13.png)
 <br/>
 
 **Ignore SSL Certificates**
@@ -199,7 +199,7 @@ Only enable this option if you trust your network environment.
 </Aside>
 
 <br/>
-![Ignore SSL Certificates](~/assets/settings-14.png)
+![Ignore SSL Certificates](../../../assets/settings-14.png)
 <br/>
 
 
@@ -218,7 +218,7 @@ Only use factory reset if:
 To begin the process:
 1. At  **Reset to Factory Settings**, click **Reset** button
 <br/>
-![Jan Quick Ask](~/assets/settings-17.png)
+![Jan Quick Ask](../../../assets/settings-17.png)
 <br/>
 2. In the confirmation dialog:
 - Type the word **RESET** to confirm
@@ -226,5 +226,5 @@ To begin the process:
 - Click **Reset Now**
 3. App restart is required upon confirmation
 <br/>
-![Jan Quick Ask](~/assets/settings-18.png)
+![Jan Quick Ask](../../../assets/settings-18.png)
 <br/>
diff --git a/website/src/content/docs/jan/threads.mdx b/website/src/content/docs/jan/threads.mdx
index 0c02a99e0..d7e2a2bd5 100644
--- a/website/src/content/docs/jan/threads.mdx
+++ b/website/src/content/docs/jan/threads.mdx
@@ -15,8 +15,7 @@ keywords:
   ]
 ---
 
-
-# Start Chatting
+import { Aside } from '@astrojs/starlight/components';
 
 <ol>
 
@@ -35,36 +34,36 @@ Jan requires a model to chat. Download one from the Hub:
 3. Select one matching your hardware specs
 4. Click **Download**
 
-![Download a Model](~/assets/model-management-01.png)
+![Download a Model](../../../assets/model-management-01.png)
 
-<Aside type="warning">
+<Aside type="caution">
 Models consume memory and processing power. Choose based on your hardware specs.
 </Aside>
 
 **HuggingFace models:** Some require an access token. Add yours in **Settings > Model Providers > Llama.cpp > Hugging Face Access Token**.
 
-![Add HF Token](~/assets/hf_token.png)
+![Add HF Token](../../../assets/hf_token.png)
 
 ### Step 3: Enable GPU Acceleration (Optional)
 
 For Windows/Linux with compatible graphics cards:
 
-1. Go to **(<Settings width={16} height={16} style={{display:"inline"}}/>) Settings** > **Hardware**
+1. Go to **Settings** > **Hardware**
 2. Toggle **GPUs** to ON
 
-![Turn on GPU acceleration](~/assets/gpu_accl.png)
+![Turn on GPU acceleration](../../../assets/gpu_accl.png)
 
-<Aside type="info">
+<Aside type="note">
 Install required drivers before enabling GPU acceleration. See setup guides for [Windows](/docs/desktop/windows#gpu-acceleration) & [Linux](/docs/desktop/linux#gpu-acceleration).
 </Aside>
 
 ### Step 4: Start Chatting
 
-1. Click **New Chat** (<SquarePen width={16} height={16} style={{display:"inline"}}/>) icon
+1. Click the **New Chat** icon
 2. Select your model in the input field dropdown
 3. Type your message and start chatting
 
-![Create New Thread](~/assets/threads-new-chat-updated.png)
+![Create New Thread](../../../assets/threads-new-chat-updated.png)
 
 </ol>
 
@@ -79,32 +78,32 @@ Jan organizes conversations into threads for easy tracking and revisiting.
 - **Favorites**: Pin important threads for quick access
 - **Recents**: Access recently used threads
 
-![Favorites and Recents](~/assets/threads-favorites-and-recents-updated.png)
+![Favorites and Recents](../../../assets/threads-favorites-and-recents-updated.png)
 
 ### Edit Chat Titles
 
 1. Hover over a conversation in the sidebar
-2. Click **three dots** (<Ellipsis width={16} height={16} style={{display:"inline"}}/>) icon
-3. Click <Pencil width={16} height={16} style={{display:"inline"}}/> **Rename**
+2. Click the **three dots** icon
+3. Click **Rename**
 4. Enter new title and save
 
-![Context Menu](~/assets/threads-context-menu-updated.png)
+![Context Menu](../../../assets/threads-context-menu-updated.png)
 
 ### Delete Threads
 
-<Aside type="warning">
+<Aside type="caution">
 Thread deletion is permanent. No undo available.
 </Aside>
 
 **Single thread:**
 1. Hover over thread in sidebar
-2. Click **three dots** (<Ellipsis width={16} height={16} style={{display:"inline"}}/>) icon
-3. Click <Trash2 width={16} height={16} style={{display:"inline"}}/> **Delete**
+2. Click the **three dots** icon
+3. Click **Delete**
 
 **All threads:**
 1. Hover over `Recents` category
-2. Click **three dots** (<Ellipsis width={16} height={16} style={{display:"inline"}}/>) icon  
-3. Select <Trash2 width={16} height={16} style={{display:"inline"}}/> **Delete All**
+2. Click the **three dots** icon
+3. Select **Delete All**
 
 ## Advanced Features
 
@@ -116,9 +115,9 @@ Customize how models respond:
 2. Or go to the **Assistant tab** to create custom instructions
 3. Instructions work across all models
 
-![Assistant Instruction](~/assets/assistant-dropdown.png)
+![Assistant Instruction](../../../assets/assistant-dropdown.png)
 
-![Add an Assistant Instruction](~/assets/assistant-edit-dialog.png)
+![Add an Assistant Instruction](../../../assets/assistant-edit-dialog.png)
 
 ### Model Parameters
 
@@ -127,7 +126,7 @@ Fine-tune model behavior:
 - Adjust parameters in **Assistant Settings**
 - Switch models via the **model selector**
 
-![Chat with a Model](~/assets/model-parameters.png)
+![Chat with a Model](../../../assets/model-parameters.png)
 
 ### Connect Cloud Models (Optional)
 
@@ -138,6 +137,6 @@ Connect to OpenAI, Anthropic, Groq, Mistral, and others:
 3. Click the **Gear icon** beside the provider
 4. Add your API key (ensure sufficient credits)
 
-![Connect Remote APIs](~/assets/quick-start-03.png)
+![Connect Remote APIs](../../../assets/quick-start-03.png)
 
 For detailed setup, see [Remote APIs](/docs/remote-models/openai).
diff --git a/website/src/content/docs/jan/troubleshooting.mdx b/website/src/content/docs/jan/troubleshooting.mdx
index 58e207814..8eb17daa6 100644
--- a/website/src/content/docs/jan/troubleshooting.mdx
+++ b/website/src/content/docs/jan/troubleshooting.mdx
@@ -36,7 +36,7 @@ Error logs are essential for troubleshooting issues and getting help from Jan te
 2. Choose **App Log**
 
 <br/>
-![App log](~/assets/trouble-shooting-02.png)
+![App log](../../../assets/trouble-shooting-02.png)
 <br/>
 
 #### Through Terminal
@@ -203,7 +203,7 @@ To verify GPU acceleration is turned on:
 3. Verify your selected GPU(s) are visible in **System Monitor** from Jan's footer
 
 <br/>
-![Hardware](~/assets/trouble-shooting-01.png)
+![Hardware](../../../assets/trouble-shooting-01.png)
 <br/>
 
 
diff --git a/website/src/content/docs/local-server/data-folder.mdx b/website/src/content/docs/local-server/data-folder.mdx
index a4542d4b3..616c523f9 100644
--- a/website/src/content/docs/local-server/data-folder.mdx
+++ b/website/src/content/docs/local-server/data-folder.mdx
@@ -29,7 +29,7 @@ Jan stores all your data locally on your computer. No cloud storage, no external
 1. Go to Settings (⚙️) > Advanced Settings
 2. Click the folder icon 📁
 
-![Open Jan Data Folder](~/assets/settings-11.png)
+![Open Jan Data Folder](../../../assets/settings-11.png)
 
 **Via File Explorer:**
 
@@ -59,7 +59,7 @@ $XDG_CONFIG_HOME/Jan/data
 
 When Jan's local server is running, you can monitor real-time activity in the logs folder:
 
-![API Server Logs](~/assets/api-server-logs.png)
+![API Server Logs](../../../assets/api-server-logs.png)
 
 ### Live Log Monitoring
 
diff --git a/website/src/content/docs/local-server/llama-cpp.mdx b/website/src/content/docs/local-server/llama-cpp.mdx
index 5872dd9f9..0606e229f 100644
--- a/website/src/content/docs/local-server/llama-cpp.mdx
+++ b/website/src/content/docs/local-server/llama-cpp.mdx
@@ -27,7 +27,7 @@ llama.cpp is the engine that runs AI models locally on your computer. It's what
 
 Find llama.cpp settings at **Settings** (⚙️) > **Local Engine** > **llama.cpp**:
 
-![llama.cpp](~/assets/llama.cpp-01-updated.png)
+![llama.cpp](../../../assets/llama.cpp-01-updated.png)
 
 <Aside type="info">
 Most users don't need to change these settings. Jan picks good defaults for your hardware automatically.
diff --git a/website/src/content/docs/local-server/troubleshooting.mdx b/website/src/content/docs/local-server/troubleshooting.mdx
index d6a3c5c3f..df4ce2eb4 100644
--- a/website/src/content/docs/local-server/troubleshooting.mdx
+++ b/website/src/content/docs/local-server/troubleshooting.mdx
@@ -31,7 +31,7 @@ When Jan isn't working properly, error logs help identify the problem. Here's ho
 1. Look for **System Monitor** in the footer
 2. Click **App Log**
 
-![App log](~/assets/trouble-shooting-02.png)
+![App log](../../../assets/trouble-shooting-02.png)
 
 **Via Terminal:**
 ```bash
@@ -172,7 +172,7 @@ If Jan isn't using your NVIDIA graphics card for acceleration:
    2. Turn on **GPU Acceleration**
    3. Check **System Monitor** (footer) to verify GPU is detected
 
-   ![Hardware](~/assets/trouble-shooting-01.png)
+   ![Hardware](../../../assets/trouble-shooting-01.png)
 
 3. **Verify Configuration**
 
diff --git a/website/src/content/docs/products/index.mdx b/website/src/content/docs/products/index.mdx
index 3d8c720fa..69abf7821 100644
--- a/website/src/content/docs/products/index.mdx
+++ b/website/src/content/docs/products/index.mdx
@@ -4,7 +4,7 @@ description: AI that runs where you need it, how you need it
 sidebar:
   order: 0
 banner:
-  content: Jan is OPEN SUPERINTELLIGENCE that you can Self Host! You can connect to the world while staying local.
+  content: 👋Jan is OPEN SUPERINTELLIGENCE that you can Self Host! You can connect to the 🌍 while staying local. 👀
 ---
 
 import { Aside, Card, CardGrid } from '@astrojs/starlight/components';
diff --git a/website/src/content/docs/products/models/jan-v1.mdx b/website/src/content/docs/products/models/jan-v1.mdx
index 1457a6781..513c8068a 100644
--- a/website/src/content/docs/products/models/jan-v1.mdx
+++ b/website/src/content/docs/products/models/jan-v1.mdx
@@ -31,7 +31,7 @@ Jan V1 models power everything in the Jan ecosystem. When you use Jan, you're us
 
 ## Three Ways to Run
 
-<Tabs>
+<Tabs syncKey="deployment-mode">
   <TabItem label="Local">
     Run on your own hardware for complete privacy.
 
diff --git a/website/src/content/docs/products/platforms/desktop.mdx b/website/src/content/docs/products/platforms/desktop.mdx
index 7d65ae14a..056ee408a 100644
--- a/website/src/content/docs/products/platforms/desktop.mdx
+++ b/website/src/content/docs/products/platforms/desktop.mdx
@@ -78,7 +78,7 @@ Jan comes with a model that works immediately. No downloading, no waiting.
 
 Connect to external AI providers when you need more power:
 
-<Tabs>
+<Tabs syncKey="cloud-provider">
   <TabItem label="jan.ai">
     Our cloud service (coming soon). One click to enable.
   </TabItem>
diff --git a/website/src/content/docs/products/tools/browseruse.mdx b/website/src/content/docs/products/tools/browseruse.mdx
index 87a8e6f54..c209fde9e 100644
--- a/website/src/content/docs/products/tools/browseruse.mdx
+++ b/website/src/content/docs/products/tools/browseruse.mdx
@@ -68,7 +68,7 @@ High-risk actions require explicit user confirmation. Browser Use will never com
 
 ## Implementation
 
-<Tabs>
+<Tabs syncKey="execution-mode">
   <TabItem label="Local Execution">
     Runs on your device using Playwright.
 
diff --git a/website/src/content/docs/products/tools/deepresearch.mdx b/website/src/content/docs/products/tools/deepresearch.mdx
index bac7cdf58..bb8a9bb73 100644
--- a/website/src/content/docs/products/tools/deepresearch.mdx
+++ b/website/src/content/docs/products/tools/deepresearch.mdx
@@ -48,7 +48,7 @@ Deep Research provides comprehensive investigation capabilities beyond simple se
 
 ## Research Modes
 
-<Tabs>
+<Tabs syncKey="research-depth">
   <TabItem label="Quick Research">
     Fast overview for immediate needs.
 
diff --git a/website/src/content/docs/products/tools/search.mdx b/website/src/content/docs/products/tools/search.mdx
index 938f986c9..414e85d6a 100644
--- a/website/src/content/docs/products/tools/search.mdx
+++ b/website/src/content/docs/products/tools/search.mdx
@@ -22,7 +22,7 @@ Jan Search operates in three modes:
 
 ## Implementation
 
-<Tabs>
+<Tabs syncKey="search-mode">
   <TabItem label="Local Search">
     Everything happens on your machine using Crawl4AI.
 
diff --git a/website/src/layouts/Layout.astro b/website/src/layouts/Layout.astro
new file mode 100644
index 000000000..591effc34
--- /dev/null
+++ b/website/src/layouts/Layout.astro
@@ -0,0 +1,64 @@
+---
+export interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Jan Products - AI that runs where you need it, how you need it" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title}</title>
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&display=swap" rel="stylesheet">
+
+    <!-- Custom Retro Effects CSS -->
+    <link rel="stylesheet" href="/src/styles/retro-effects.css">
+
+    <!-- GSAP -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script>
+  </head>
+  <body>
+    <slot />
+
+    <style is:global>
+      html {
+        font-family: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        scroll-behavior: smooth;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        background: #0a0a0a;
+        color: #ffffff;
+        overflow-x: hidden;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      /* Remove default margins and paddings */
+      h1, h2, h3, h4, h5, h6, p {
+        margin: 0;
+        padding: 0;
+      }
+
+      /* Smooth transitions for all interactive elements */
+      a, button, .toc-item, .retro-card, .platform-card, .tool-card {
+        transition: all 0.3s ease;
+      }
+    </style>
+  </body>
+</html>
diff --git a/website/src/pages/example.mdx b/website/src/pages/example.mdx
deleted file mode 100644
index 8c7b798e3..000000000
--- a/website/src/pages/example.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Example Page
-description: This is an example page.
----
-
-
-# Hey
diff --git a/website/src/pages/prods.astro b/website/src/pages/prods.astro
new file mode 100644
index 000000000..dd6ea9c97
--- /dev/null
+++ b/website/src/pages/prods.astro
@@ -0,0 +1,1872 @@
+---
+import Layout from '../layouts/Layout.astro';
+import CircuitBackground from '../components/CircuitBackground.astro';
+import StatusIndicator from '../components/StatusIndicator.astro';
+import RetroCard from '../components/RetroCard.astro';
+import FloatingNav from '../components/FloatingNav.astro';
+---
+
+<Layout title="Jan Products - AI That Runs Where You Need It">
+  <main class="products-page">
+
+    <!-- Floating Navigation -->
+    <FloatingNav
+      sections={[
+        { id: 'models', label: 'Models', icon: '🧠', status: 'active' },
+        { id: 'platforms', label: 'Platforms', icon: '💻', status: 'active' },
+        { id: 'tools', label: 'Tools', icon: '🔧', status: 'processing' }
+      ]}
+      position="right"
+      theme="matrix"
+      compact={false}
+    />
+
+    <!-- Hero Section -->
+    <section class="hero-section">
+      <CircuitBackground variant="animated" color="multi" density="medium" animated={true} opacity={0.08} />
+      <div class="hero-content">
+        <div class="hero-badge">
+          <span class="badge-icon">⚡</span>
+          <span>Open Superintelligence</span>
+        </div>
+        <h1 class="hero-title">
+          <span class="title-main">Jan's Product Roadmap</span>
+          <span class="title-sub">Models • Platforms • Tools</span>
+        </h1>
+        <p class="hero-description">
+          Complete AI ecosystem that you control. Our models, your infrastructure, real capabilities.
+        </p>
+        <div class="hero-stats">
+          <div class="stat">
+            <span class="stat-number">3</span>
+            <span class="stat-label">AI Models</span>
+          </div>
+          <div class="stat">
+            <span class="stat-number">4</span>
+            <span class="stat-label">Platforms</span>
+          </div>
+          <div class="stat">
+            <span class="stat-number">4</span>
+            <span class="stat-label">Tools</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Roadmap Overview -->
+    <section class="roadmap-overview">
+      <div class="container">
+        <h2 class="section-title">Product Architecture</h2>
+        <div class="architecture-diagram">
+          <div class="layer-connection"></div>
+          <div class="arch-layer tools-layer">
+            <div class="layer-header">
+              <span class="layer-icon">🔧</span>
+              <span class="layer-title">Tools</span>
+              <span class="layer-count">4 capabilities</span>
+            </div>
+            <div class="layer-items">
+              <span class="item active">Search</span>
+              <span class="item active">Deep Research</span>
+              <span class="item beta">Browser Use</span>
+              <span class="item coming">AI Agents</span>
+            </div>
+          </div>
+
+          <div class="arch-layer models-layer">
+            <div class="layer-header">
+              <span class="layer-icon">🧠</span>
+              <span class="layer-title">Models</span>
+              <span class="layer-count">3 families</span>
+            </div>
+            <div class="layer-items">
+              <span class="item active">Jan V1 Series</span>
+              <span class="item beta">Jan Nano</span>
+              <span class="item coming">Lucy</span>
+            </div>
+          </div>
+
+          <div class="arch-layer platforms-layer">
+            <div class="layer-header">
+              <span class="layer-icon">💻</span>
+              <span class="layer-title">Platforms</span>
+              <span class="layer-count">4 deployment options</span>
+            </div>
+            <div class="layer-items">
+              <span class="item active">Desktop</span>
+              <span class="item beta">jan.ai</span>
+              <span class="item coming">Mobile</span>
+              <span class="item coming">Server</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Models Section -->
+    <section id="models" class="section models-section">
+      <div class="container">
+        <div class="section-header">
+          <div class="section-badge">
+            <span class="badge-icon">🧠</span>
+            <span>Neural Networks</span>
+          </div>
+          <h2 class="section-title">Our AI Models</h2>
+          <p class="section-description">
+            Purpose-built models, not API wrappers. Trained by us, optimized for privacy and performance.
+          </p>
+        </div>
+
+        <div class="models-grid">
+          <RetroCard
+            variant="circuit"
+            color="green"
+            size="large"
+            title="Jan V1 Series"
+            subtitle="Production Models"
+            status="online"
+            interactive={true}
+            glow={true}
+            scanlines={true}
+          >
+            <div class="model-header">
+              <div class="model-status">
+                <StatusIndicator status="success" label="Production Ready" size="small" />
+                <span class="model-version">v1.2.1</span>
+              </div>
+            </div>
+
+            <div class="model-specs-grid">
+              <div class="spec-group">
+                <h4>Parameters</h4>
+                <div class="spec-values">
+                  <span class="spec-item">7B <em>8GB RAM</em></span>
+                  <span class="spec-item">13B <em>16GB RAM</em></span>
+                  <span class="spec-item">70B <em>64GB RAM</em></span>
+                </div>
+              </div>
+              <div class="spec-group">
+                <h4>Context Window</h4>
+                <div class="spec-values">
+                  <span class="spec-highlight">32,768 tokens</span>
+                </div>
+              </div>
+            </div>
+
+            <p class="model-description">
+              Complete model family designed to compete with Claude and GPT-4.
+              Optimized for reasoning, coding, and general conversation.
+            </p>
+
+            <div class="model-capabilities">
+              <span class="capability">Reasoning</span>
+              <span class="capability">Code Generation</span>
+              <span class="capability">Multilingual</span>
+              <span class="capability">Tool Use</span>
+            </div>
+          </RetroCard>
+
+          <RetroCard
+            variant="data"
+            color="blue"
+            size="large"
+            title="Jan Nano"
+            subtitle="Research Specialist"
+            status="warning"
+            interactive={true}
+            glow={true}
+            scanlines={true}
+          >
+            <div class="model-header">
+              <div class="model-status">
+                <StatusIndicator status="warning" label="Beta" size="small" />
+                <span class="model-version">v0.6.0</span>
+              </div>
+            </div>
+
+            <div class="model-specs-grid">
+              <div class="spec-group">
+                <h4>Parameters</h4>
+                <div class="spec-values">
+                  <span class="spec-highlight">4B</span> <em>6-8GB RAM</em>
+                </div>
+              </div>
+              <div class="spec-group">
+                <h4>Context Options</h4>
+                <div class="spec-values">
+                  <span class="spec-item">32k <em>Standard</em></span>
+                  <span class="spec-item">128k <em>Extended</em></span>
+                </div>
+              </div>
+            </div>
+
+            <p class="model-description">
+              Specialized for research and information retrieval. Native MCP integration
+              for web search, document analysis, and knowledge synthesis.
+            </p>
+
+            <div class="model-capabilities">
+              <span class="capability">Web Search</span>
+              <span class="capability">Document Analysis</span>
+              <span class="capability">Citation Management</span>
+              <span class="capability">MCP Tools</span>
+            </div>
+          </RetroCard>
+
+          <RetroCard
+            variant="system"
+            color="amber"
+            size="large"
+            title="Lucy"
+            subtitle="Multimodal AI"
+            status="idle"
+            interactive={true}
+            glow={false}
+            scanlines={true}
+            glitch={true}
+          >
+            <div class="model-header">
+              <div class="model-status">
+                <StatusIndicator status="idle" label="In Training" size="small" />
+                <span class="model-version">v0.1.0-alpha</span>
+              </div>
+            </div>
+
+            <div class="model-specs-grid">
+              <div class="spec-group">
+                <h4>Modalities</h4>
+                <div class="spec-values">
+                  <span class="spec-item">Vision</span>
+                  <span class="spec-item">Text</span>
+                  <span class="spec-item">Audio <em>Soon</em></span>
+                </div>
+              </div>
+              <div class="spec-group">
+                <h4>Release</h4>
+                <div class="spec-values">
+                  <span class="spec-highlight">Q2 2025</span>
+                </div>
+              </div>
+            </div>
+
+            <p class="model-description">
+              Advanced multimodal capabilities for image understanding, document processing,
+              and visual reasoning tasks.
+            </p>
+
+            <div class="model-capabilities">
+              <span class="capability coming">Image Analysis</span>
+              <span class="capability coming">OCR</span>
+              <span class="capability coming">Visual Reasoning</span>
+              <span class="capability coming">Document Processing</span>
+            </div>
+          </RetroCard>
+        </div>
+      </div>
+    </section>
+
+    <!-- Platforms Section -->
+    <section id="platforms" class="section platforms-section">
+      <div class="container">
+        <div class="section-header">
+          <div class="section-badge">
+            <span class="badge-icon">💻</span>
+            <span>Deployment</span>
+          </div>
+          <h2 class="section-title">Platform Ecosystem</h2>
+          <p class="section-description">
+            Run AI where it makes sense for you. Local for privacy, cloud for power,
+            mobile for accessibility.
+          </p>
+        </div>
+
+        <div class="platforms-timeline">
+          <div class="timeline-line"></div>
+
+          <div class="platform-item available" data-timeline="2024">
+            <div class="platform-badge">
+              <span class="badge-status available">Available Now</span>
+            </div>
+            <div class="platform-card desktop">
+              <div class="platform-header">
+                <div class="platform-icon">💻</div>
+                <div class="platform-info">
+                  <h3>Jan Desktop</h3>
+                  <p>Your personal AI workstation</p>
+                </div>
+                <div class="platform-metrics">
+                  <span class="metric">3M+ downloads</span>
+                </div>
+              </div>
+              <div class="platform-features">
+                <span class="feature">Complete Privacy</span>
+                <span class="feature">Offline Mode</span>
+                <span class="feature">Powers Mobile</span>
+                <span class="feature">No Internet Required</span>
+              </div>
+              <div class="platform-specs">
+                <div class="spec">
+                  <span class="spec-label">Min RAM</span>
+                  <span class="spec-value">8GB</span>
+                </div>
+                <div class="spec">
+                  <span class="spec-label">Storage</span>
+                  <span class="spec-value">10GB+</span>
+                </div>
+                <div class="spec">
+                  <span class="spec-label">OS Support</span>
+                  <span class="spec-value">Win/Mac/Linux</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="platform-item beta" data-timeline="2024">
+            <div class="platform-badge">
+              <span class="badge-status beta">Beta Launch</span>
+            </div>
+            <div class="platform-card cloud">
+              <div class="platform-header">
+                <div class="platform-icon">☁️</div>
+                <div class="platform-info">
+                  <h3>jan.ai</h3>
+                  <p>Cloud AI that respects privacy</p>
+                </div>
+                <div class="platform-metrics">
+                  <span class="metric">Join waitlist</span>
+                </div>
+              </div>
+              <div class="platform-features">
+                <span class="feature">No Setup</span>
+                <span class="feature">Anonymous Usage</span>
+                <span class="feature">API Access</span>
+                <span class="feature">Fast Response</span>
+              </div>
+              <div class="platform-pricing">
+                <div class="price">
+                  <span class="price-tier">Free</span>
+                  <span class="price-value">50 queries/day</span>
+                </div>
+                <div class="price">
+                  <span class="price-tier">Pro</span>
+                  <span class="price-value">Unlimited</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="platform-item coming" data-timeline="Q4 2025">
+            <div class="platform-badge">
+              <span class="badge-status coming">Q4 2025</span>
+            </div>
+            <div class="platform-card mobile">
+              <div class="platform-header">
+                <div class="platform-icon">📱</div>
+                <div class="platform-info">
+                  <h3>Jan Mobile</h3>
+                  <p>AI assistant on the go</p>
+                </div>
+                <div class="platform-metrics">
+                  <span class="metric">iOS & Android</span>
+                </div>
+              </div>
+              <div class="platform-features">
+                <span class="feature coming">Voice First</span>
+                <span class="feature coming">Desktop Sync</span>
+                <span class="feature coming">Jan Nano Local</span>
+                <span class="feature coming">Seamless Switching</span>
+              </div>
+              <div class="platform-modes">
+                <div class="mode">
+                  <span class="mode-name">Desktop Mode</span>
+                  <span class="mode-desc">Connect to your computer</span>
+                </div>
+                <div class="mode">
+                  <span class="mode-name">Local Mode</span>
+                  <span class="mode-desc">Jan Nano on device</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="platform-item coming" data-timeline="2025">
+            <div class="platform-badge">
+              <span class="badge-status coming">Coming Soon</span>
+            </div>
+            <div class="platform-card server">
+              <div class="platform-header">
+                <div class="platform-icon">🏢</div>
+                <div class="platform-info">
+                  <h3>Jan Server</h3>
+                  <p>Private AI cloud for teams</p>
+                </div>
+                <div class="platform-metrics">
+                  <span class="metric">5-500+ users</span>
+                </div>
+              </div>
+              <div class="platform-features">
+                <span class="feature coming">Self-Hosted</span>
+                <span class="feature coming">Multi-User</span>
+                <span class="feature coming">Enterprise SSO</span>
+                <span class="feature coming">Compliance Ready</span>
+              </div>
+              <div class="platform-deployment">
+                <div class="deploy-option">
+                  <span class="deploy-name">Docker</span>
+                  <span class="deploy-desc">Single command setup</span>
+                </div>
+                <div class="deploy-option">
+                  <span class="deploy-name">Kubernetes</span>
+                  <span class="deploy-desc">Enterprise scale</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Tools Section -->
+    <section id="tools" class="section tools-section">
+      <div class="container">
+        <div class="section-header">
+          <div class="section-badge">
+            <span class="badge-icon">🔧</span>
+            <span>Capabilities</span>
+          </div>
+          <h2 class="section-title">Integrated Tools</h2>
+          <p class="section-description">
+            AI capabilities that actually get things done. Not just chat, but real automation
+            and intelligence augmentation.
+          </p>
+        </div>
+
+        <div class="tools-grid">
+          <div class="tool-card active" data-tool="search">
+            <div class="tool-header">
+              <div class="tool-icon">🔍</div>
+              <div class="tool-info">
+                <h3>Search</h3>
+                <StatusIndicator status="success" label="Active" size="small" />
+              </div>
+              <div class="tool-version">v0.6.7</div>
+            </div>
+            <p class="tool-description">
+              Privacy-respecting web search with local crawling, anonymous cloud queries,
+              and intelligent routing.
+            </p>
+            <div class="tool-features">
+              <div class="feature-row">
+                <span class="feature-label">Modes</span>
+                <div class="feature-tags">
+                  <span class="tag">Local</span>
+                  <span class="tag">Cloud</span>
+                  <span class="tag">Hybrid</span>
+                </div>
+              </div>
+              <div class="feature-row">
+                <span class="feature-label">Privacy</span>
+                <div class="feature-tags">
+                  <span class="tag">Anonymous</span>
+                  <span class="tag">No Tracking</span>
+                </div>
+              </div>
+            </div>
+            <div class="tool-metrics">
+              <div class="metric">
+                <span class="metric-value">< 1s</span>
+                <span class="metric-label">Response Time</span>
+              </div>
+              <div class="metric">
+                <span class="metric-value">Real-time</span>
+                <span class="metric-label">Data Access</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="tool-card active" data-tool="research">
+            <div class="tool-header">
+              <div class="tool-icon">📚</div>
+              <div class="tool-info">
+                <h3>Deep Research</h3>
+                <StatusIndicator status="success" label="Active" size="small" />
+              </div>
+              <div class="tool-version">v0.7.0</div>
+            </div>
+            <p class="tool-description">
+              Comprehensive investigation beyond simple search. Literature reviews,
+              multi-source synthesis, and academic citations.
+            </p>
+            <div class="tool-features">
+              <div class="feature-row">
+                <span class="feature-label">Depth</span>
+                <div class="feature-tags">
+                  <span class="tag">Quick</span>
+                  <span class="tag">Standard</span>
+                  <span class="tag">Comprehensive</span>
+                </div>
+              </div>
+              <div class="feature-row">
+                <span class="feature-label">Sources</span>
+                <div class="feature-tags">
+                  <span class="tag">Academic</span>
+                  <span class="tag">Patents</span>
+                  <span class="tag">News</span>
+                </div>
+              </div>
+            </div>
+            <div class="tool-metrics">
+              <div class="metric">
+                <span class="metric-value">200+</span>
+                <span class="metric-label">Max Sources</span>
+              </div>
+              <div class="metric">
+                <span class="metric-value">3 levels</span>
+                <span class="metric-label">Research Depth</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="tool-card beta" data-tool="browser">
+            <div class="tool-header">
+              <div class="tool-icon">🌐</div>
+              <div class="tool-info">
+                <h3>Browser Use</h3>
+                <StatusIndicator status="warning" label="Beta" size="small" />
+              </div>
+              <div class="tool-version">v0.8.0</div>
+            </div>
+            <p class="tool-description">
+              Web automation that respects site policies. Form filling, data extraction,
+              and workflow automation with safety boundaries.
+            </p>
+            <div class="tool-features">
+              <div class="feature-row">
+                <span class="feature-label">Automation</span>
+                <div class="feature-tags">
+                  <span class="tag">Forms</span>
+                  <span class="tag">Data Extract</span>
+                  <span class="tag">Workflows</span>
+                </div>
+              </div>
+              <div class="feature-row">
+                <span class="feature-label">Safety</span>
+                <div class="feature-tags">
+                  <span class="tag">Policy Aware</span>
+                  <span class="tag">Confirmation</span>
+                </div>
+              </div>
+            </div>
+            <div class="tool-metrics">
+              <div class="metric">
+                <span class="metric-value">90%</span>
+                <span class="metric-label">Success Rate</span>
+              </div>
+              <div class="metric">
+                <span class="metric-value">Local/Cloud</span>
+                <span class="metric-label">Execution</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="tool-card coming" data-tool="agents">
+            <div class="tool-header">
+              <div class="tool-icon">🤖</div>
+              <div class="tool-info">
+                <h3>AI Agents</h3>
+                <StatusIndicator status="idle" label="Q1 2026" size="small" />
+              </div>
+              <div class="tool-version">v0.9.0</div>
+            </div>
+            <p class="tool-description">
+              Autonomous task execution with tool orchestration. Multi-step workflows,
+              goal-oriented planning, and intelligent coordination.
+            </p>
+            <div class="tool-features">
+              <div class="feature-row">
+                <span class="feature-label">Capabilities</span>
+                <div class="feature-tags">
+                  <span class="tag coming">Multi-step</span>
+                  <span class="tag coming">Tool Chain</span>
+                  <span class="tag coming">Planning</span>
+                </div>
+              </div>
+              <div class="feature-row">
+                <span class="feature-label">Integration</span>
+                <div class="feature-tags">
+                  <span class="tag coming">All Tools</span>
+                  <span class="tag coming">External APIs</span>
+                </div>
+              </div>
+            </div>
+            <div class="tool-metrics">
+              <div class="metric">
+                <span class="metric-value">Coming</span>
+                <span class="metric-label">Q1 2026</span>
+              </div>
+              <div class="metric">
+                <span class="metric-value">Autonomous</span>
+                <span class="metric-label">Task Execution</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Integration Philosophy -->
+    <section class="philosophy-section">
+      <div class="container">
+        <div class="philosophy-content">
+          <div class="philosophy-text">
+            <h2>Why This Matters</h2>
+            <p class="philosophy-description">
+              Most AI is just a wrapper around someone else's models. Jan is different.
+              We build the models, control the infrastructure, and integrate the tools.
+            </p>
+            <div class="philosophy-points">
+              <div class="point">
+                <span class="point-icon">🧠</span>
+                <div class="point-content">
+                  <h4>Our Models</h4>
+                  <p>Trained by us, optimized for your use cases, not subscription revenue.</p>
+                </div>
+              </div>
+              <div class="point">
+                <span class="point-icon">🏠</span>
+                <div class="point-content">
+                  <h4>Your Infrastructure</h4>
+                  <p>Run locally for privacy, or cloud when you need power. You choose.</p>
+                </div>
+              </div>
+              <div class="point">
+                <span class="point-icon">🔧</span>
+                <div class="point-content">
+                  <h4>Real Tools</h4>
+                  <p>Not just chat, but automation that actually gets things done.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="philosophy-visual">
+            <div class="ecosystem-diagram">
+              <div class="ecosystem-center">
+                <span class="center-icon">⚡</span>
+                <span class="center-label">Jan</span>
+              </div>
+              <div class="ecosystem-orbit models-orbit">
+                <span class="orbit-label">Models</span>
+              </div>
+              <div class="ecosystem-orbit platforms-orbit">
+                <span class="orbit-label">Platforms</span>
+              </div>
+              <div class="ecosystem-orbit tools-orbit">
+                <span class="orbit-label">Tools</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Call to Action -->
+    <section class="cta-section">
+      <div class="container">
+        <div class="cta-content">
+          <h2>Start Building With Jan</h2>
+          <p>Download Jan Desktop today and experience AI that runs where you need it.</p>
+          <div class="cta-buttons">
+            <a href="/download" class="btn btn-primary">
+              <span class="btn-icon">💻</span>
+              Download Jan Desktop
+            </a>
+            <a href="/docs" class="btn btn-secondary">
+              <span class="btn-icon">📚</span>
+              Read Documentation
+            </a>
+          </div>
+          <div class="cta-stats">
+            <div class="stat">
+              <span class="stat-number">3M+</span>
+              <span class="stat-label">Downloads</span>
+            </div>
+            <div class="stat">
+              <span class="stat-number">100%</span>
+              <span class="stat-label">Open Source</span>
+            </div>
+            <div class="stat">
+              <span class="stat-number">0</span>
+              <span class="stat-label">Data Collection</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</Layout>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    if (typeof gsap === 'undefined') return;
+
+    gsap.registerPlugin(ScrollTrigger);
+
+    // Hero animations
+    const heroTl = gsap.timeline();
+    heroTl
+      .fromTo('.hero-badge', { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.8 })
+      .fromTo('.hero-title', { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 1 }, '-=0.4')
+      .fromTo('.hero-description', { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.8 }, '-=0.6')
+      .fromTo('.hero-stats .stat', { opacity: 0, y: 15 }, { opacity: 1, y: 0, duration: 0.6, stagger: 0.1 }, '-=0.4');
+
+    // Architecture diagram animation
+    gsap.fromTo('.arch-layer',
+      { opacity: 0, x: -50, rotationY: 15 },
+      {
+        opacity: 1,
+        x: 0,
+        rotationY: 0,
+        duration: 0.8,
+        stagger: 0.2,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: '.architecture-diagram',
+          start: 'top 80%',
+          once: true
+        }
+      }
+    );
+
+    // Models grid animation
+    gsap.fromTo('.models-grid .retro-card',
+      { opacity: 0, y: 50, scale: 0.9 },
+      {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        duration: 0.8,
+        stagger: 0.2,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: '.models-section',
+          start: 'top 70%',
+          once: true
+        }
+      }
+    );
+
+    // Platform timeline animation
+    gsap.fromTo('.platform-item',
+      { opacity: 0, x: -100 },
+      {
+        opacity: 1,
+        x: 0,
+        duration: 0.8,
+        stagger: 0.3,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: '.platforms-timeline',
+          start: 'top 70%',
+          once: true
+        }
+      }
+    );
+
+    // Tools grid animation
+    gsap.fromTo('.tool-card',
+      { opacity: 0, y: 30, rotationX: 15 },
+      {
+        opacity: 1,
+        y: 0,
+        rotationX: 0,
+        duration: 0.6,
+        stagger: 0.15,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: '.tools-section',
+          start: 'top 75%',
+          once: true
+        }
+      }
+    );
+
+    // Philosophy section animation
+    gsap.fromTo('.philosophy-points .point',
+      { opacity: 0, x: -30 },
+      {
+        opacity: 1,
+        x: 0,
+        duration: 0.6,
+        stagger: 0.2,
+        ease: 'power2.out',
+        scrollTrigger: {
+          trigger: '.philosophy-section',
+          start: 'top 75%',
+          once: true
+        }
+      }
+    );
+
+    // Ecosystem orbit animation
+    gsap.to('.ecosystem-orbit', {
+      rotation: 360,
+      duration: 20,
+      repeat: -1,
+      ease: 'none',
+      stagger: 0.5
+    });
+  });
+</script>
+
+<style>
+  :root {
+    --retro-green: #00ff41;
+    --retro-amber: #ffb000;
+    --retro-blue: #00bfff;
+    --retro-red: #ff0040;
+    --dark-bg: #0a0a0a;
+    --darker-bg: #050505;
+    --card-bg: #111111;
+    --border-color: #333333;
+    --text-primary: #ffffff;
+    --text-secondary: #cccccc;
+    --text-muted: #888888;
+    --gradient-primary: linear-gradient(135deg, var(--retro-green), var(--retro-amber));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .products-page {
+    background: var(--dark-bg);
+    color: var(--text-primary);
+    font-family: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    line-height: 1.6;
+  }
+
+  .container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 2rem;
+  }
+
+  /* Hero Section */
+  .hero-section {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .hero-content {
+    text-align: center;
+    z-index: 2;
+    max-width: 900px;
+    padding: 2rem;
+  }
+
+  .hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(0, 255, 65, 0.1);
+    border: 1px solid var(--retro-green);
+    padding: 0.5rem 1rem;
+    border-radius: 25px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-bottom: 2rem;
+    color: var(--retro-green);
+  }
+
+  .badge-icon {
+    font-size: 1.2rem;
+  }
+
+  .hero-title {
+    margin-bottom: 2rem;
+  }
+
+  .title-main {
+    display: block;
+    font-size: clamp(2.5rem, 8vw, 5rem);
+    font-weight: 700;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
+  }
+
+  .title-sub {
+    display: block;
+    font-size: 1.5rem;
+    color: var(--text-secondary);
+    font-weight: 300;
+    margin-top: 1rem;
+  }
+
+  .hero-description {
+    font-size: 1.2rem;
+    color: var(--text-secondary);
+    margin-bottom: 3rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .hero-stats {
+    display: flex;
+    justify-content: center;
+    gap: 4rem;
+    flex-wrap: wrap;
+  }
+
+  .stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .stat-number {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--retro-green);
+    text-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
+  }
+
+  .stat-label {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  /* Roadmap Overview */
+  .roadmap-overview {
+    padding: 6rem 0;
+    background: var(--darker-bg);
+    border-top: 1px solid var(--border-color);
+  }
+
+  .section-title {
+    font-size: 3rem;
+    color: var(--retro-green);
+    margin-bottom: 1rem;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .architecture-diagram {
+    max-width: 800px;
+    margin: 4rem auto;
+    position: relative;
+  }
+
+  .layer-connection {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 2px;
+    height: 100%;
+    background: linear-gradient(180deg, var(--retro-green), var(--retro-amber), var(--retro-blue));
+    transform: translateX(-50%);
+    opacity: 0.3;
+  }
+
+  .arch-layer {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .arch-layer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+  }
+
+  .tools-layer::before { background: linear-gradient(90deg, var(--retro-green), var(--retro-amber)); }
+  .models-layer::before { background: linear-gradient(90deg, var(--retro-amber), var(--retro-blue)); }
+  .platforms-layer::before { background: linear-gradient(90deg, var(--retro-blue), var(--retro-green)); }
+
+  .layer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+
+  .layer-icon {
+    font-size: 2rem;
+    margin-right: 1rem;
+  }
+
+  .layer-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    flex: 1;
+  }
+
+  .layer-count {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+  }
+
+  .layer-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .item {
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
+
+  .item.active {
+    background: var(--retro-green);
+    color: var(--dark-bg);
+  }
+
+  .item.beta {
+    background: var(--retro-amber);
+    color: var(--dark-bg);
+  }
+
+  .item.coming {
+    background: var(--darker-bg);
+    color: var(--text-muted);
+    border: 1px dashed var(--border-color);
+  }
+
+  /* Section Styles */
+  .section {
+    padding: 6rem 0;
+  }
+
+  .section-header {
+    text-align: center;
+    margin-bottom: 4rem;
+  }
+
+  .section-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(0, 255, 65, 0.05);
+    border: 1px solid var(--border-color);
+    padding: 0.5rem 1rem;
+    border-radius: 25px;
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    color: var(--text-secondary);
+  }
+
+  .section-description {
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  /* Models Section */
+  .models-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 2rem;
+    align-items: start;
+  }
+
+  .model-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
+
+  .model-status {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .model-version {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    background: var(--darker-bg);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+  }
+
+  .model-specs-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .spec-group h4 {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    margin-bottom: 0.5rem;
+    letter-spacing: 0.05em;
+  }
+
+  .spec-values {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .spec-item {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+  }
+
+  .spec-item em {
+    color: var(--text-muted);
+    margin-left: 0.5rem;
+  }
+
+  .spec-highlight {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--retro-green);
+  }
+
+  .model-description {
+    color: var(--text-secondary);
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+  }
+
+  .model-capabilities {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .capability {
+    padding: 0.25rem 0.75rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    background: var(--retro-green);
+    color: var(--dark-bg);
+  }
+
+  .capability.coming {
+    background: var(--darker-bg);
+    color: var(--text-muted);
+    border: 1px dashed var(--border-color);
+  }
+
+  /* Platforms Section */
+  .platforms-timeline {
+    position: relative;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  .timeline-line {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(180deg, var(--retro-green), var(--retro-amber), var(--retro-blue), var(--retro-red));
+    transform: translateX(-50%);
+    opacity: 0.3;
+  }
+
+  .platform-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 4rem;
+    position: relative;
+  }
+
+  .platform-item:nth-child(even) {
+    flex-direction: row-reverse;
+  }
+
+  .platform-item::before {
+    content: attr(data-timeline);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--card-bg);
+    border: 2px solid var(--retro-green);
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--retro-green);
+    z-index: 2;
+  }
+
+  .platform-badge {
+    margin: 0 2rem;
+    min-width: 120px;
+    text-align: center;
+  }
+
+  .badge-status {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 15px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  .badge-status.available {
+    background: var(--retro-green);
+    color: var(--dark-bg);
+  }
+
+  .badge-status.beta {
+    background: var(--retro-amber);
+    color: var(--dark-bg);
+  }
+
+  .badge-status.coming {
+    background: var(--text-muted);
+    color: var(--text-primary);
+  }
+
+  .platform-card {
+    flex: 1;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 2rem;
+    max-width: 400px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .platform-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+  }
+
+  .platform-card.desktop::before { background: linear-gradient(90deg, var(--retro-green), var(--retro-blue)); }
+  .platform-card.cloud::before { background: linear-gradient(90deg, var(--retro-blue), var(--retro-amber)); }
+  .platform-card.mobile::before { background: linear-gradient(90deg, var(--retro-amber), var(--retro-red)); }
+  .platform-card.server::before { background: linear-gradient(90deg, var(--retro-red), var(--retro-green)); }
+
+  .platform-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+  }
+
+  .platform-icon {
+    font-size: 2.5rem;
+    margin-right: 1rem;
+  }
+
+  .platform-info h3 {
+    font-size: 1.5rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .platform-info p {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  .platform-metrics {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+  }
+
+  .platform-features {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .feature {
+    padding: 0.25rem 0.75rem;
+    border-radius: 15px;
+    font-size: 0.8rem;
+    background: var(--darker-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+  }
+
+  .feature.coming {
+    border-style: dashed;
+    color: var(--text-muted);
+  }
+
+  .platform-specs {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 1rem;
+  }
+
+  .spec {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .spec-label {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+  }
+
+  .spec-value {
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+
+  .platform-pricing, .platform-modes, .platform-deployment {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .price, .mode, .deploy-option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem;
+    background: var(--darker-bg);
+    border-radius: 6px;
+  }
+
+  .price-tier, .mode-name, .deploy-name {
+    font-weight: 500;
+  }
+
+  .price-value, .mode-desc, .deploy-desc {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+  }
+
+  /* Tools Section */
+  .tools-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2rem;
+  }
+
+  .tool-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 2rem;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+  }
+
+  .tool-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--gradient-primary);
+  }
+
+  .tool-card.coming {
+    opacity: 0.7;
+    border-style: dashed;
+  }
+
+  .tool-card:hover {
+    transform: translateX(5px);
+    border-color: var(--retro-green);
+    box-shadow: -5px 0 20px rgba(0, 255, 65, 0.2);
+  }
+
+  .tool-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+
+  .tool-icon {
+    font-size: 2rem;
+    margin-right: 1rem;
+  }
+
+  .tool-info {
+    flex: 1;
+  }
+
+  .tool-info h3 {
+    font-size: 1.3rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .tool-version {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    background: var(--darker-bg);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+  }
+
+  .tool-description {
+    color: var(--text-secondary);
+    margin-bottom: 1.5rem;
+    line-height: 1.5;
+  }
+
+  .tool-features {
+    margin-bottom: 1.5rem;
+  }
+
+  .feature-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+  }
+
+  .feature-label {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    min-width: 80px;
+  }
+
+  .feature-tags {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .tag {
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    background: var(--retro-green);
+    color: var(--dark-bg);
+    font-weight: 500;
+  }
+
+  .tag.coming {
+    background: var(--darker-bg);
+    color: var(--text-muted);
+    border: 1px dashed var(--border-color);
+  }
+
+  .tool-metrics {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .metric {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .metric-value {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--retro-green);
+    margin-bottom: 0.25rem;
+  }
+
+  .metric-label {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+  }
+
+  /* Philosophy Section */
+  .philosophy-section {
+    padding: 6rem 0;
+    background: var(--darker-bg);
+    border-top: 1px solid var(--border-color);
+  }
+
+  .philosophy-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+  }
+
+  .philosophy-text h2 {
+    font-size: 2.5rem;
+    color: var(--retro-green);
+    margin-bottom: 1.5rem;
+  }
+
+  .philosophy-description {
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+    line-height: 1.6;
+  }
+
+  .philosophy-points {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .point {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .point-icon {
+    font-size: 1.5rem;
+    flex-shrink: 0;
+    margin-top: 0.25rem;
+  }
+
+  .point-content h4 {
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+  }
+
+  .point-content p {
+    color: var(--text-secondary);
+    line-height: 1.5;
+  }
+
+  .philosophy-visual {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .ecosystem-diagram {
+    position: relative;
+    width: 300px;
+    height: 300px;
+  }
+
+  .ecosystem-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+    background: var(--card-bg);
+    border: 2px solid var(--retro-green);
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+
+  .center-icon {
+    font-size: 1.5rem;
+  }
+
+  .center-label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--retro-green);
+  }
+
+  .ecosystem-orbit {
+    position: absolute;
+    border: 1px dashed var(--border-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .models-orbit {
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    bottom: 20px;
+  }
+
+  .platforms-orbit {
+    top: 40px;
+    left: 40px;
+    right: 40px;
+    bottom: 40px;
+  }
+
+  .tools-orbit {
+    top: 60px;
+    left: 60px;
+    right: 60px;
+    bottom: 60px;
+  }
+
+  .orbit-label {
+    position: absolute;
+    top: -10px;
+    background: var(--darker-bg);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+  }
+
+  /* CTA Section */
+  .cta-section {
+    padding: 6rem 0;
+    text-align: center;
+  }
+
+  .cta-content h2 {
+    font-size: 2.5rem;
+    color: var(--retro-green);
+    margin-bottom: 1rem;
+  }
+
+  .cta-content p {
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+  }
+
+  .cta-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 3rem;
+    flex-wrap: wrap;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    transition: left 0.5s;
+  }
+
+  .btn:hover::before {
+    left: 100%;
+  }
+
+  .btn-primary {
+    background: var(--retro-green);
+    color: var(--dark-bg);
+    border: 2px solid var(--retro-green);
+  }
+
+  .btn-primary:hover {
+    box-shadow: 0 4px 20px rgba(0, 255, 65, 0.3);
+    transform: translateY(-2px);
+  }
+
+  .btn-secondary {
+    background: transparent;
+    color: var(--text-primary);
+    border: 2px solid var(--border-color);
+  }
+
+  .btn-secondary:hover {
+    border-color: var(--retro-green);
+    color: var(--retro-green);
+    box-shadow: 0 4px 20px rgba(0, 255, 65, 0.1);
+  }
+
+  .btn-icon {
+    font-size: 1.2rem;
+  }
+
+  .cta-stats {
+    display: flex;
+    justify-content: center;
+    gap: 4rem;
+    flex-wrap: wrap;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 1024px) {
+    .philosophy-content {
+      grid-template-columns: 1fr;
+      gap: 3rem;
+    }
+
+    .ecosystem-diagram {
+      width: 250px;
+      height: 250px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      padding: 0 1rem;
+    }
+
+    .title-main {
+      font-size: 3rem;
+    }
+
+    .section-title {
+      font-size: 2rem;
+    }
+
+    .hero-stats {
+      gap: 2rem;
+    }
+
+    .models-grid, .tools-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .platform-item {
+      flex-direction: column !important;
+      text-align: center;
+    }
+
+    .platform-item::before {
+      position: relative;
+      left: auto;
+      top: auto;
+      transform: none;
+      margin: 1rem 0;
+    }
+
+    .platform-badge {
+      margin: 0;
+    }
+
+    .timeline-line {
+      display: none;
+    }
+
+    .model-specs-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .tool-metrics {
+      grid-template-columns: 1fr;
+    }
+
+    .cta-buttons {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .cta-stats {
+      gap: 2rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .section {
+      padding: 4rem 0;
+    }
+
+    .hero-content {
+      padding: 1rem;
+    }
+
+    .cta-content h2 {
+      font-size: 2rem;
+    }
+
+    .philosophy-text h2 {
+      font-size: 2rem;
+    }
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--darker-bg);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--retro-green);
+  }
+
+  /* Selection styles */
+  ::selection {
+    background: var(--retro-green);
+    color: var(--dark-bg);
+  }
+
+  /* Focus styles for accessibility */
+  .platform-card:focus,
+  .tool-card:focus,
+  .btn:focus {
+    outline: 2px solid var(--retro-green);
+    outline-offset: 2px;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+</style>
diff --git a/website/src/styles/retro-effects.css b/website/src/styles/retro-effects.css
new file mode 100644
index 000000000..1e6f42294
--- /dev/null
+++ b/website/src/styles/retro-effects.css
@@ -0,0 +1,822 @@
+/* Retro-Tech Effects CSS */
+/* RadioShack meets PostHog aesthetic */
+
+:root {
+  /* Retro Color Palette */
+  --retro-green: #00ff41;
+  --retro-amber: #ffb000;
+  --retro-blue: #00bfff;
+  --retro-red: #ff0040;
+  --retro-cyan: #00ffff;
+  --retro-magenta: #ff00ff;
+
+  /* Terminal Colors */
+  --terminal-bg: #0a0a0a;
+  --terminal-fg: #00ff41;
+  --terminal-cursor: #ffffff;
+
+  /* Glow Effects */
+  --glow-green: rgba(0, 255, 65, 0.5);
+  --glow-amber: rgba(255, 176, 0, 0.5);
+  --glow-blue: rgba(0, 191, 255, 0.5);
+  --glow-red: rgba(255, 0, 64, 0.5);
+}
+
+/* CRT Monitor Effect */
+.crt-effect {
+  position: relative;
+  background: radial-gradient(ellipse at center, #0a0a0a 0%, #000000 100%);
+}
+
+.crt-effect::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 255, 65, 0.05) 0px,
+    rgba(0, 255, 65, 0.05) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.crt-effect::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(
+    ellipse at center,
+    transparent 40%,
+    rgba(0, 0, 0, 0.8) 100%
+  );
+  pointer-events: none;
+  z-index: 1001;
+}
+
+/* Matrix Rain Effect */
+.matrix-rain {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: -1;
+  overflow: hidden;
+}
+
+.matrix-char {
+  position: absolute;
+  color: var(--retro-green);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  animation: matrixFall 3s linear infinite;
+  opacity: 0.7;
+}
+
+@keyframes matrixFall {
+  0% {
+    transform: translateY(-100vh);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh);
+    opacity: 0;
+  }
+}
+
+/* Glitch Text Effects */
+.glitch-text {
+  position: relative;
+  color: var(--retro-green);
+  font-weight: bold;
+}
+
+.glitch-text::before,
+.glitch-text::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.glitch-text::before {
+  animation: glitch-anim-1 0.3s infinite;
+  color: var(--retro-red);
+  z-index: -1;
+}
+
+.glitch-text::after {
+  animation: glitch-anim-2 0.3s infinite;
+  color: var(--retro-blue);
+  z-index: -2;
+}
+
+@keyframes glitch-anim-1 {
+  0% {
+    clip-path: inset(40% 0 61% 0);
+    transform: translate(-2px, -2px);
+  }
+  20% {
+    clip-path: inset(92% 0 1% 0);
+    transform: translate(2px, 2px);
+  }
+  40% {
+    clip-path: inset(43% 0 1% 0);
+    transform: translate(-2px, 2px);
+  }
+  60% {
+    clip-path: inset(25% 0 58% 0);
+    transform: translate(2px, -2px);
+  }
+  80% {
+    clip-path: inset(54% 0 7% 0);
+    transform: translate(-2px, -2px);
+  }
+  100% {
+    clip-path: inset(58% 0 43% 0);
+    transform: translate(2px, 2px);
+  }
+}
+
+@keyframes glitch-anim-2 {
+  0% {
+    clip-path: inset(25% 0 58% 0);
+    transform: translate(2px, 1px);
+  }
+  20% {
+    clip-path: inset(54% 0 7% 0);
+    transform: translate(-1px, 2px);
+  }
+  40% {
+    clip-path: inset(58% 0 43% 0);
+    transform: translate(1px, -1px);
+  }
+  60% {
+    clip-path: inset(40% 0 61% 0);
+    transform: translate(-1px, -2px);
+  }
+  80% {
+    clip-path: inset(92% 0 1% 0);
+    transform: translate(2px, 1px);
+  }
+  100% {
+    clip-path: inset(43% 0 1% 0);
+    transform: translate(-2px, -1px);
+  }
+}
+
+/* Neon Glow Effects */
+.neon-glow {
+  text-shadow:
+    0 0 5px currentColor,
+    0 0 10px currentColor,
+    0 0 15px currentColor,
+    0 0 20px currentColor;
+  animation: neonFlicker 2s infinite alternate;
+}
+
+@keyframes neonFlicker {
+  0%,
+  18%,
+  22%,
+  25%,
+  53%,
+  57%,
+  100% {
+    text-shadow:
+      0 0 5px currentColor,
+      0 0 10px currentColor,
+      0 0 15px currentColor,
+      0 0 20px currentColor;
+  }
+  20%,
+  24%,
+  55% {
+    text-shadow: none;
+  }
+}
+
+/* Terminal Cursor */
+.terminal-cursor {
+  display: inline-block;
+  background-color: var(--terminal-cursor);
+  color: var(--terminal-bg);
+  animation: cursorBlink 1s infinite;
+  margin-left: 2px;
+  width: 8px;
+  height: 1em;
+}
+
+@keyframes cursorBlink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/* Data Stream Animation */
+.data-stream {
+  position: relative;
+  overflow: hidden;
+}
+
+.data-stream::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(0, 255, 65, 0.1) 10%,
+    rgba(0, 255, 65, 0.3) 50%,
+    rgba(0, 255, 65, 0.1) 90%,
+    transparent
+  );
+  animation: dataStreamFlow 2s infinite;
+}
+
+@keyframes dataStreamFlow {
+  0% {
+    left: -100%;
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+
+/* Circuit Board Traces */
+.circuit-trace {
+  position: relative;
+  overflow: hidden;
+}
+
+.circuit-trace::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--retro-green) 20%,
+    var(--retro-green) 80%,
+    transparent
+  );
+  transform: translateY(-50%);
+  animation: circuitPulse 3s infinite;
+}
+
+@keyframes circuitPulse {
+  0%,
+  100% {
+    opacity: 0.3;
+    box-shadow: 0 0 5px var(--retro-green);
+  }
+  50% {
+    opacity: 1;
+    box-shadow: 0 0 15px var(--retro-green);
+  }
+}
+
+/* Electronic Component Styles */
+.component-resistor {
+  display: inline-block;
+  width: 20px;
+  height: 6px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--retro-amber) 20%,
+    var(--retro-red) 40%,
+    var(--retro-amber) 60%,
+    var(--retro-red) 80%,
+    transparent 100%
+  );
+  border-radius: 1px;
+  position: relative;
+}
+
+.component-resistor::before,
+.component-resistor::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 5px;
+  height: 1px;
+  background: var(--retro-green);
+  transform: translateY(-50%);
+}
+
+.component-resistor::before {
+  left: -5px;
+}
+.component-resistor::after {
+  right: -5px;
+}
+
+.component-led {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--retro-red), transparent);
+  box-shadow: 0 0 10px var(--retro-red);
+  animation: ledBlink 2s infinite;
+}
+
+@keyframes ledBlink {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    box-shadow: 0 0 5px var(--retro-red);
+  }
+  85%,
+  95% {
+    opacity: 1;
+    box-shadow: 0 0 15px var(--retro-red);
+  }
+}
+
+/* Retro Button Styles */
+.retro-button {
+  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
+  border: 2px solid var(--retro-green);
+  color: var(--retro-green);
+  padding: 0.75rem 1.5rem;
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.retro-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(0, 255, 65, 0.2),
+    transparent
+  );
+  transition: left 0.5s;
+}
+
+.retro-button:hover::before {
+  left: 100%;
+}
+
+.retro-button:hover {
+  box-shadow:
+    0 0 20px var(--glow-green),
+    inset 0 0 20px rgba(0, 255, 65, 0.1);
+  transform: translateY(-2px);
+}
+
+.retro-button:active {
+  transform: translateY(0);
+  box-shadow:
+    0 0 10px var(--glow-green),
+    inset 0 0 10px rgba(0, 255, 65, 0.2);
+}
+
+/* Holographic Effect */
+.holographic {
+  background: linear-gradient(
+    45deg,
+    var(--retro-cyan),
+    var(--retro-magenta),
+    var(--retro-amber),
+    var(--retro-green)
+  );
+  background-size: 400% 400%;
+  animation: holographicShift 3s ease infinite;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+@keyframes holographicShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* System Status Indicators */
+.system-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+}
+
+.status-bar {
+  width: 60px;
+  height: 4px;
+  background: #333;
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+}
+
+.status-bar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--retro-green);
+  border-radius: 2px;
+  animation: statusProgress 2s ease-in-out infinite;
+}
+
+@keyframes statusProgress {
+  0% {
+    width: 0%;
+  }
+  50% {
+    width: 100%;
+  }
+  100% {
+    width: 0%;
+  }
+}
+
+/* Vintage Monitor Bezel */
+.monitor-bezel {
+  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
+  border: 3px solid #333;
+  border-radius: 15px;
+  padding: 20px;
+  position: relative;
+  box-shadow:
+    inset 0 0 20px rgba(0, 0, 0, 0.5),
+    0 0 30px rgba(0, 0, 0, 0.8);
+}
+
+.monitor-bezel::before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--retro-red);
+  box-shadow: 0 0 8px var(--retro-red);
+  animation: powerIndicator 3s infinite;
+}
+
+@keyframes powerIndicator {
+  0%,
+  90%,
+  100% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 0.3;
+  }
+}
+
+/* ASCII Art Enhancement */
+.ascii-art {
+  font-family: 'JetBrains Mono', monospace;
+  white-space: pre;
+  color: var(--retro-green);
+  text-shadow: 0 0 10px var(--glow-green);
+  animation: asciiGlow 4s ease-in-out infinite alternate;
+}
+
+@keyframes asciiGlow {
+  0% {
+    text-shadow: 0 0 5px var(--glow-green);
+    opacity: 0.8;
+  }
+  100% {
+    text-shadow: 0 0 20px var(--glow-green);
+    opacity: 1;
+  }
+}
+
+/* Retro Loading Animation */
+.retro-loader {
+  display: inline-block;
+  position: relative;
+  width: 40px;
+  height: 40px;
+}
+
+.retro-loader::after {
+  content: '';
+  position: absolute;
+  border: 3px solid #333;
+  border-top: 3px solid var(--retro-green);
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: retroSpin 1s linear infinite;
+}
+
+@keyframes retroSpin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Scanline Effect */
+.scanlines {
+  position: relative;
+}
+
+.scanlines::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 255, 65, 0.03) 2px,
+    rgba(0, 255, 65, 0.03) 4px
+  );
+  pointer-events: none;
+  animation: scanlineMove 8s linear infinite;
+}
+
+@keyframes scanlineMove {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(4px);
+  }
+}
+
+/* Phosphor Screen Effect */
+.phosphor-screen {
+  background: radial-gradient(ellipse at center, #001100 0%, #000000 100%);
+  color: var(--retro-green);
+  text-shadow: 0 0 2px var(--retro-green);
+}
+
+/* Terminal Window */
+.terminal-window {
+  background: #000000;
+  border: 2px solid var(--retro-green);
+  border-radius: 4px;
+  padding: 1rem;
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--retro-green);
+  box-shadow:
+    0 0 20px rgba(0, 255, 65, 0.3),
+    inset 0 0 20px rgba(0, 255, 65, 0.1);
+}
+
+.terminal-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--retro-green);
+}
+
+.terminal-title {
+  color: var(--retro-amber);
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+/* Retro Grid */
+.retro-grid {
+  background-image:
+    linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+/* Digital Clock Display */
+.digital-clock {
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--retro-green);
+  background: #000000;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--retro-green);
+  font-weight: bold;
+  text-shadow: 0 0 10px var(--retro-green);
+  letter-spacing: 0.1em;
+}
+
+/* Radar Sweep Effect */
+.radar-sweep {
+  position: relative;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    transparent 30%,
+    rgba(0, 255, 65, 0.1) 100%
+  );
+  overflow: hidden;
+}
+
+.radar-sweep::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50%;
+  height: 2px;
+  background: linear-gradient(90deg, var(--retro-green), transparent);
+  transform-origin: left center;
+  animation: radarSweep 3s linear infinite;
+}
+
+@keyframes radarSweep {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* VHS Static Effect */
+.vhs-static {
+  position: relative;
+  overflow: hidden;
+}
+
+.vhs-static::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 2px,
+      rgba(255, 255, 255, 0.03) 2px,
+      rgba(255, 255, 255, 0.03) 4px
+    ),
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(255, 255, 255, 0.03) 2px,
+      rgba(255, 255, 255, 0.03) 4px
+    );
+  animation: vhsStatic 0.1s infinite;
+  pointer-events: none;
+}
+
+@keyframes vhsStatic {
+  0% {
+    opacity: 0.03;
+  }
+  50% {
+    opacity: 0.05;
+  }
+  100% {
+    opacity: 0.03;
+  }
+}
+
+/* Accessibility and Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  :root {
+    --retro-green: #00ff00;
+    --retro-amber: #ffff00;
+    --retro-red: #ff0000;
+    --retro-blue: #0080ff;
+  }
+
+  .crt-effect::before {
+    display: none;
+  }
+
+  .neon-glow {
+    text-shadow: none;
+    font-weight: bold;
+  }
+
+  .scanlines::after {
+    display: none;
+  }
+}
+
+/* Dark Mode Enhancements */
+@media (prefers-color-scheme: dark) {
+  .retro-button {
+    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
+  }
+
+  .monitor-bezel {
+    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 50%, #000000 100%);
+  }
+}
+
+/* Print Styles */
+@media print {
+  .matrix-rain,
+  .crt-effect::before,
+  .crt-effect::after,
+  .neon-glow,
+  .data-stream::before,
+  .circuit-trace::after,
+  .scanlines::after {
+    display: none !important;
+  }
+
+  .retro-button,
+  .terminal-window {
+    border: 2px solid #000 !important;
+    background: #fff !important;
+    color: #000 !important;
+  }
+}
+
+/* Mobile Optimizations */
+@media (max-width: 768px) {
+  .retro-button {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+  }
+
+  .terminal-window {
+    padding: 0.75rem;
+    font-size: 0.9rem;
+  }
+
+  .digital-clock {
+    font-size: 0.8rem;
+    padding: 0.25rem 0.5rem;
+  }
+}
+
+/* Focus States for Accessibility */
+.retro-button:focus,
+.terminal-window:focus {
+  outline: 2px solid var(--retro-green);
+  outline-offset: 2px;
+}