diff --git a/index.html b/index.html
index a2d0a40..4542624 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,15 @@
     
     <title>Intuition Labs LLC - AI Research & Consulting</title>
     
-    <!-- CSS from root directory -->
+    <!-- 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=Audiowide&family=Cormorant+Garamond:ital@1&display=swap" rel="stylesheet">
+    
+    <!-- CSS -->
     <link rel="stylesheet" href="/style.css">
     
-    <!-- Favicons in root directory -->
+    <!-- Favicons -->
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 7dc5c67..a5bc3b1 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,22 +1,39 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
-import { ScrollEffects } from '../ui/ScrollEffects';
+import { Scene } from '../three/Scene';
 import { CardEffects } from '../ui/CardEffects';
+import { ScrollEffects } from '../ui/ScrollEffects';
 
 function Home({ onMount }) {
   const [isLoaded, setIsLoaded] = useState(false);
+  const sceneRef = useRef(null);
+  const scrollEffectsRef = useRef(null);
+  const cardEffectsRef = useRef(null);
 
   useEffect(() => {
     if (!isLoaded) {
       onMount?.();
       setIsLoaded(true);
-      const cardEffects = new CardEffects();
-      const scrollEffects = new ScrollEffects();
+
+      // Initialize Three.js scene
+      const container = document.getElementById('bg-canvas');
+      if (container) {
+        sceneRef.current = new Scene(container, {
+          width: window.innerWidth,
+          height: window.innerHeight
+        });
+        sceneRef.current.animate(0);
+      }
+
+      // Initialize effects
+      scrollEffectsRef.current = new ScrollEffects();
+      cardEffectsRef.current = new CardEffects();
       
       return () => {
-        cardEffects.dispose?.();
-        scrollEffects.dispose?.();
+        sceneRef.current?.dispose();
+        scrollEffectsRef.current?.dispose();
+        // CardEffects doesn't need disposal as it only adds event listeners
       };
     }
   }, [isLoaded, onMount]);
@@ -42,114 +59,125 @@ function Home({ onMount }) {
   };
 
   return (
-    <motion.div
-      className="home-container"
-      initial="hidden"
-      animate={isLoaded ? "visible" : "hidden"}
-      variants={containerVariants}
-    >
-      <motion.section className="hero-section" variants={itemVariants}>
-        <h1 className="gradient-text" data-text="Intuition Labs">
-          Intuition Labs
-        </h1>
-        <p className="tagline">Pioneering the future of AI through intuitive design</p>
-        <div className="cta-container">
-          <motion.a
-            href="https://zcal.co/terminals"
-            className="cta-button primary"
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-          >
-            Schedule Consultation
-          </motion.a>
-          <motion.div
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-          >
-            <Link to="/manifesto" className="cta-button secondary">
-              Read Our Manifesto
-            </Link>
-          </motion.div>
-        </div>
-      </motion.section>
+    <>
+      <canvas id="bg-canvas" style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: -1,
+        background: 'black'
+      }} />
+      <motion.div
+        className="home-container"
+        initial="hidden"
+        animate={isLoaded ? "visible" : "hidden"}
+        variants={containerVariants}
+      >
+        <motion.section className="hero-section" variants={itemVariants}>
+          <h1 className="gradient-text" data-text="Intuition Labs">
+            Intuition Labs
+          </h1>
+          <p className="tagline">Pioneering the future of AI through intuitive design</p>
+          <div className="cta-container">
+            <motion.a
+              href="https://zcal.co/terminals"
+              className="cta-button primary"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Schedule Consultation
+            </motion.a>
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <Link to="/manifesto" className="cta-button secondary">
+                Read Our Manifesto
+              </Link>
+            </motion.div>
+          </div>
+        </motion.section>
 
-      <div className="platforms-marquee">
-        <div className="platforms-track">
-          {[...Array(2)].map((_, setIndex) => (
-            <div key={setIndex} style={{ display: 'flex', gap: '4rem' }}>
-              <span className="platform-name platform-terminals">terminals</span>
-              <span className="platform-name platform-radical">radical</span>
-              <span className="platform-name platform-pathfinder">pathfinder</span>
-              <span className="platform-name platform-wuji">wuji</span>
-              <span className="platform-name platform-boom">boom</span>
-              <span className="platform-name platform-journey">journey</span>
-            </div>
-          ))}
+        <div className="platforms-marquee">
+          <div className="platforms-track">
+            {[...Array(2)].map((_, setIndex) => (
+              <div key={setIndex} style={{ display: 'flex', gap: '4rem' }}>
+                <span className="platform-name platform-terminals">terminals</span>
+                <span className="platform-name platform-radical">radical</span>
+                <span className="platform-name platform-pathfinder">pathfinder</span>
+                <span className="platform-name platform-wuji">wuji</span>
+                <span className="platform-name platform-boom">boom</span>
+                <span className="platform-name platform-journey">journey</span>
+              </div>
+            ))}
+          </div>
         </div>
-      </div>
 
-      <motion.section 
-        className="section solutions-grid"
-        variants={itemVariants}
-        data-parallax="0.2"
-      >
-        <h2>Featured Solutions</h2>
-        <div className="grid">
-          <motion.div 
-            className="card"
-            whileHover={{ scale: 1.02, y: -5 }}
-            transition={{ duration: 0.2 }}
-          >
-            <h3>Enterprise AI Strategy</h3>
-            <p>Comprehensive AI implementation and transformation roadmaps</p>
-            <div className="card-content">
-              <ul>
-                <li>Enterprise AI Implementation Strategy</li>
-                <li>LLM & Agent System Architecture</li>
-                <li>GTM Strategy Development</li>
-                <li>Complex System Integration</li>
-              </ul>
-            </div>
-          </motion.div>
+        <motion.section 
+          className="section solutions-grid"
+          variants={itemVariants}
+          data-parallax="0.2"
+        >
+          <h2>Featured Solutions</h2>
+          <div className="grid">
+            <motion.div 
+              className="card"
+              whileHover={{ scale: 1.02, y: -5 }}
+              transition={{ duration: 0.2 }}
+            >
+              <h3>AI Strategy</h3>
+              <p>Transforming enterprises through human-centric AI systems</p>
+              <div className="card-content">
+                <ul>
+                  <li>Intuitive AI Systems for Complex Process Modeling</li>
+                  <li>Multi-Modal Agent Networks for Emergent Intelligence</li>
+                  <li>Research-Driven Innovation & Discovery Platforms</li>
+                  <li>Human-AI Collaborative Workflows for Industrial Solutions</li>
+                </ul>
+              </div>
+            </motion.div>
 
-          <motion.div 
-            className="card"
-            whileHover={{ scale: 1.02, y: -5 }}
-            transition={{ duration: 0.2 }}
-          >
-            <h3>LLM Systems</h3>
-            <p>Custom language model development and integration</p>
-            <div className="card-content">
-              <ul>
-                <li>Custom AI Agent Development</li>
-                <li>Advanced Prompt Engineering</li>
-                <li>Multi-modal System Design</li>
-                <li>Process Automation & Optimization</li>
-              </ul>
-            </div>
-          </motion.div>
-        </div>
-      </motion.section>
+            <motion.div 
+              className="card"
+              whileHover={{ scale: 1.02, y: -5 }}
+              transition={{ duration: 0.2 }}
+            >
+              <h3>LLM Systems</h3>
+              <p>Engineering advanced language models for intelligence at scale</p>
+              <div className="card-content">
+                <ul>
+                  <li>Autonomous Processes for Novel Use Cases</li>
+                  <li>Human-Centric Prompt Design & Response Patterns</li>
+                  <li>Multi-Modal Understanding & Reasoning Tracing</li>
+                  <li>Extensible Collaborative Intelligence Networks</li>
+                </ul>
+              </div>
+            </motion.div>
+          </div>
+        </motion.section>
 
-      <motion.section 
-        className="section vision-section"
-        variants={itemVariants}
-        data-parallax="0.4"
-      >
-        <div className="vision-content">
-          <h2>Our Vision</h2>
-          <p>Transforming enterprises through cutting-edge AI solutions and polymathic expertise</p>
-          <motion.div 
-            className="tech-stack"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 0.5 }}
-          >
-            {/* Add tech stack logos/icons here */}
-          </motion.div>
-        </div>
-      </motion.section>
-    </motion.div>
+        <motion.section 
+          className="section vision-section"
+          variants={itemVariants}
+          data-parallax="0.4"
+        >
+          <div className="vision-content">
+            <h2>Our Vision</h2>
+            <p>Transforming enterprises through cutting-edge AI solutions and polymathic expertise</p>
+            <motion.div 
+              className="tech-stack"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.5 }}
+            >
+              {/* Add tech stack logos/icons here */}
+            </motion.div>
+          </div>
+        </motion.section>
+      </motion.div>
+    </>
   );
 }
 
diff --git a/style.css b/style.css
index 3e84787..329ba1e 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Mono&family=Syncopate:wght@700&family=Cinzel&family=Audiowide&family=Cormorant+Garamond:ital@1&display=swap');
-
 :root {
+    --font-display: 'Audiowide', system-ui;
+    --font-body: system-ui, -apple-system, sans-serif;
     --primary: #7A9E9F;
     --text: rgba(255, 255, 255, 0.9);
     --accent: #7A9E9F;
@@ -19,11 +19,15 @@
 body {
     background: var(--background);
     color: var(--text);
-    font-family: var(--font-display);
-    line-height: 1.6;
+    font-family: var(--font-body);
+    line-height: 1.5;
     overflow-x: hidden;
-    letter-spacing: -0.01em;
+    -webkit-font-smoothing: antialiased;
+}
+
+#root {
     min-height: 100vh;
+    isolation: isolate;
 }
 
 .gradient-text {