diff --git a/public/assets/images/bg_cta.png b/public/assets/images/bg_cta.png
new file mode 100644
index 0000000..cb98398
Binary files /dev/null and b/public/assets/images/bg_cta.png differ
diff --git a/public/assets/images/bg_features.png b/public/assets/images/bg_features.png
new file mode 100644
index 0000000..0a9390d
Binary files /dev/null and b/public/assets/images/bg_features.png differ
diff --git a/public/assets/images/bg_hero.png b/public/assets/images/bg_hero.png
new file mode 100644
index 0000000..f15b6b3
Binary files /dev/null and b/public/assets/images/bg_hero.png differ
diff --git a/src/App.tsx b/src/App.tsx
index b8cad4b..b9b2cf7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,9 +6,9 @@ import { ProtectedRoute } from './components/ProtectedRoute';
 // Pages
 import Editor from './pages/Editor';
 import Home from './pages/Home';
-import Auth from './pages/Auth';
 import Dashboard from './pages/Dashboard';
 import Admin from './pages/Admin';
+import { AuthModal } from './components/AuthModal';
 
 export default function App() {
   const { initialize, isLoading } = useAuthStore();
@@ -27,10 +27,10 @@ export default function App() {
 
   return (
     <BrowserRouter>
+      <AuthModal />
       <Routes>
         {/* Public Routes */}
         <Route path="/" element={<Home />} />
-        <Route path="/auth" element={<Auth />} />
 
         {/* Protected Routes (User) */}
         <Route element={<ProtectedRoute allowedRoles={['user', 'admin']} />}>
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
new file mode 100644
index 0000000..94b9e68
--- /dev/null
+++ b/src/components/AuthModal.tsx
@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { api } from '../lib/api';
+import { useAuthStore } from '../store/authStore';
+import { Box, Mail, Lock, Loader2, X } from 'lucide-react';
+
+export function AuthModal() {
+  const { isAuthModalOpen, closeAuthModal, authMode, openAuthModal, setSession } = useAuthStore();
+  const navigate = useNavigate();
+  const location = useLocation();
+  
+  const isRegister = authMode === 'register';
+  const from = location.state?.from?.pathname || '/dashboard';
+  
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    setSuccess('');
+
+    try {
+      if (isRegister) {
+        const res = await api.register(email, password);
+        if (res.status === 'pending') {
+          setSuccess(res.message || 'Account created successfully! Please contact an admin to activate your account.');
+          setEmail('');
+          setPassword('');
+        } else {
+          setSession(res.token, res.profile);
+          closeAuthModal();
+          navigate(from, { replace: true });
+        }
+      } else {
+        const { token, profile } = await api.login(email, password);
+        setSession(token, profile);
+        closeAuthModal();
+        navigate(from, { replace: true });
+      }
+    } catch (err: any) {
+      setError(err.message || 'An error occurred during authentication.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isAuthModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={closeAuthModal}
+            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+          />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            className="relative w-full max-w-md bg-zinc-900/90 backdrop-blur-xl border border-zinc-700/50 rounded-3xl p-8 shadow-2xl overflow-hidden"
+          >
+            {/* Glowing orb background effect */}
+            <div className="absolute -top-32 -right-32 w-64 h-64 bg-primary/20 rounded-full blur-3xl pointer-events-none" />
+            
+            <button 
+              onClick={closeAuthModal}
+              className="absolute top-4 right-4 text-zinc-400 hover:text-white transition-colors"
+            >
+              <X size={20} />
+            </button>
+
+            <div className="flex justify-center mb-8 relative z-10">
+              <div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center shadow-[0_0_20px_rgba(var(--primary-rgb),0.3)]">
+                <Box size={24} className="text-primary" />
+              </div>
+            </div>
+            
+            <h2 className="text-2xl font-bold text-white text-center mb-2 relative z-10">
+              {isRegister ? 'Create an Account' : 'Welcome Back'}
+            </h2>
+            <p className="text-zinc-400 text-sm text-center mb-8 relative z-10">
+              {isRegister ? 'Sign up to start building 3D scenes.' : 'Sign in to access your projects.'}
+            </p>
+
+            {error && (
+              <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-3 rounded-xl text-sm mb-6 text-center relative z-10">
+                {error}
+              </div>
+            )}
+            
+            {success && (
+              <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-3 rounded-xl text-sm mb-6 text-center relative z-10">
+                {success}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4 relative z-10">
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
+                <input 
+                  type="email" 
+                  placeholder="Email address"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full bg-zinc-950/50 border border-zinc-700/50 rounded-xl py-3 pl-10 pr-4 text-white placeholder-zinc-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
+                />
+              </div>
+              
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
+                <input 
+                  type="password" 
+                  placeholder="Password"
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full bg-zinc-950/50 border border-zinc-700/50 rounded-xl py-3 pl-10 pr-4 text-white placeholder-zinc-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
+                />
+              </div>
+
+              <button 
+                type="submit" 
+                disabled={loading}
+                className="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-xl mt-2 transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_20px_rgba(var(--primary-rgb),0.3)] hover:shadow-[0_0_30px_rgba(var(--primary-rgb),0.5)]"
+              >
+                {loading && <Loader2 size={18} className="animate-spin" />}
+                {isRegister ? 'Sign Up' : 'Sign In'}
+              </button>
+            </form>
+
+            <div className="mt-8 text-center text-sm text-zinc-400 relative z-10">
+              {isRegister ? (
+                <p>Already have an account? <button onClick={() => openAuthModal('login')} className="text-primary hover:underline font-medium">Sign in</button></p>
+              ) : (
+                <p>Don't have an account? <button onClick={() => openAuthModal('register')} className="text-primary hover:underline font-medium">Sign up</button></p>
+              )}
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/components/home/Overlay.tsx b/src/components/home/Overlay.tsx
new file mode 100644
index 0000000..3cf00c0
--- /dev/null
+++ b/src/components/home/Overlay.tsx
@@ -0,0 +1,102 @@
+import { Scroll, Image } from '@react-three/drei';
+import { useAuthStore } from '../../store/authStore';
+import { Box, Layers, Zap, Globe, Sparkles } from 'lucide-react';
+
+export function Overlay() {
+  const { openAuthModal } = useAuthStore();
+
+  return (
+    <>
+      {/* 3D Background Images Parallax Layer */}
+      <Scroll>
+        <Image url="/assets/images/bg_hero.png" scale={[16, 10]} position={[0, 0, -5]} transparent opacity={0.6} />
+        <Image url="/assets/images/bg_features.png" scale={[16, 10]} position={[0, -10, -5]} transparent opacity={0.5} />
+        <Image url="/assets/images/bg_cta.png" scale={[16, 10]} position={[0, -20, -5]} transparent opacity={0.6} />
+      </Scroll>
+
+      {/* HTML UI Layer */}
+      <Scroll html style={{ width: '100%', height: '100%' }}>
+        {/* Navigation */}
+        <nav className="fixed top-0 left-0 w-full p-6 flex justify-between items-center z-50 mix-blend-difference text-white">
+          <div className="flex items-center gap-2 font-bold text-2xl tracking-tighter">
+            <Box className="text-primary" /> Titan<span className="text-primary">3d</span>
+          </div>
+          <button 
+            onClick={() => openAuthModal('login')}
+            className="px-6 py-2 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full font-medium transition-all"
+          >
+            Sign In
+          </button>
+        </nav>
+
+        {/* Section 1: Hero */}
+        <section className="w-screen h-screen flex flex-col justify-center items-start px-12 md:px-32 text-white">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-6">
+            <Sparkles size={16} className="text-primary" />
+            <span className="text-sm font-medium">Next-Gen 3D Configurator</span>
+          </div>
+          <h1 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-tight mb-6 max-w-4xl bg-clip-text text-transparent bg-gradient-to-r from-white via-zinc-200 to-zinc-500">
+            Build The Future in 3D.
+          </h1>
+          <p className="text-xl md:text-2xl text-zinc-400 max-w-2xl mb-10 font-light">
+            An ultra-premium, AI-driven platform to visualize, construct, and deploy stunning 3D assets directly in your browser.
+          </p>
+          <button 
+            onClick={() => openAuthModal('register')}
+            className="px-8 py-4 bg-primary hover:bg-primary/90 rounded-full font-bold text-lg shadow-[0_0_40px_rgba(var(--primary-rgb),0.5)] hover:scale-105 transition-all"
+          >
+            Start Building Free
+          </button>
+        </section>
+
+        {/* Section 2: Features */}
+        <section className="w-screen h-screen flex flex-col justify-center items-end px-12 md:px-32 text-white text-right">
+          <h2 className="text-5xl md:text-7xl font-bold tracking-tighter mb-16 max-w-3xl">
+            Unleash Unprecedented <span className="text-blue-400">Power</span>.
+          </h2>
+          
+          <div className="flex flex-col gap-8 max-w-xl">
+            <div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md hover:bg-white/10 transition-all">
+              <div className="text-left">
+                <h3 className="text-2xl font-bold mb-2">Real-time Rendering</h3>
+                <p className="text-zinc-400">Experience photorealistic materials and lighting instantly.</p>
+              </div>
+              <div className="w-16 h-16 rounded-full bg-blue-500/20 flex items-center justify-center shrink-0">
+                <Layers className="text-blue-400" size={32} />
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md hover:bg-white/10 transition-all">
+              <div className="text-left">
+                <h3 className="text-2xl font-bold mb-2">AI Asset Generation</h3>
+                <p className="text-zinc-400">Turn text prompts into high-fidelity 3D models in seconds.</p>
+              </div>
+              <div className="w-16 h-16 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0">
+                <Zap className="text-purple-400" size={32} />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Section 3: Call to Action */}
+        <section className="w-screen h-screen flex flex-col justify-center items-center text-center px-12 text-white relative">
+          <div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-transparent to-transparent pointer-events-none" />
+          
+          <Globe size={64} className="text-emerald-400 mb-8 animate-pulse" />
+          <h2 className="text-6xl md:text-8xl font-bold tracking-tighter mb-6">
+            Ready to Deploy?
+          </h2>
+          <p className="text-2xl text-zinc-400 max-w-2xl mb-12">
+            Join elite creators building the next generation of spatial computing experiences.
+          </p>
+          <button 
+            onClick={() => openAuthModal('register')}
+            className="px-10 py-5 bg-white text-black hover:bg-zinc-200 rounded-full font-bold text-xl transition-all hover:scale-105"
+          >
+            Create Your Workspace
+          </button>
+        </section>
+      </Scroll>
+    </>
+  );
+}
diff --git a/src/components/home/Scene.tsx b/src/components/home/Scene.tsx
new file mode 100644
index 0000000..e387069
--- /dev/null
+++ b/src/components/home/Scene.tsx
@@ -0,0 +1,46 @@
+import { useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Environment, Float, Sparkles } from '@react-three/drei';
+import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing';
+import { Models } from './Models';
+
+export function Scene() {
+  const group = useRef<THREE.Group>(null);
+
+  useFrame((state) => {
+    if (group.current) {
+      // Gentle floating animation for the entire scene group
+      group.current.rotation.y = Math.sin(state.clock.elapsedTime * 0.1) * 0.2;
+    }
+  });
+
+  return (
+    <>
+      <color attach="background" args={['#09090b']} />
+      
+      {/* Lighting */}
+      <ambientLight intensity={0.5} />
+      <directionalLight position={[10, 10, 5]} intensity={1.5} color="#8b5cf6" />
+      <directionalLight position={[-10, -10, -5]} intensity={1} color="#3b82f6" />
+      <pointLight position={[0, 0, 0]} intensity={0.5} color="#ffffff" />
+      
+      <Environment preset="city" />
+
+      {/* Main Content */}
+      <group ref={group}>
+        <Float speed={1.5} rotationIntensity={0.5} floatIntensity={0.5}>
+          <Models />
+        </Float>
+        
+        {/* Floating Particles */}
+        <Sparkles count={300} scale={15} size={3} speed={0.4} opacity={0.3} color="#a78bfa" />
+      </group>
+
+      {/* Post Processing for Premium Aesthetic */}
+      <EffectComposer disableNormalPass>
+        <Bloom luminanceThreshold={0.2} mipmapBlur intensity={1.5} radius={0.8} />
+        <Vignette eskil={false} offset={0.1} darkness={1.1} />
+      </EffectComposer>
+    </>
+  );
+}
diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx
deleted file mode 100644
index 2f747f9..0000000
--- a/src/pages/Auth.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { useState } from 'react';
-import { useSearchParams, useNavigate, useLocation, Link } from 'react-router-dom';
-import { api } from '../lib/api';
-import { useAuthStore } from '../store/authStore';
-import { Box, Mail, Lock, Loader2 } from 'lucide-react';
-
-export default function Auth() {
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { setSession } = useAuthStore();
-  
-  const isRegister = searchParams.get('mode') === 'register';
-  const from = location.state?.from?.pathname || '/dashboard';
-  
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError('');
-    setSuccess('');
-
-    try {
-      if (isRegister) {
-        const res = await api.register(email, password);
-        if (res.status === 'pending') {
-          setSuccess(res.message || 'Account created successfully! Please contact an admin to activate your account.');
-          setEmail('');
-          setPassword('');
-        } else {
-          setSession(res.token, res.profile);
-          navigate(from, { replace: true });
-        }
-      } else {
-        const { token, profile } = await api.login(email, password);
-        setSession(token, profile);
-        navigate(from, { replace: true });
-      }
-    } catch (err: any) {
-      setError(err.message || 'An error occurred during authentication.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-zinc-950 flex items-center justify-center p-4">
-      <div className="w-full max-w-md bg-zinc-900 border border-zinc-800 rounded-2xl p-8 shadow-2xl">
-        <div className="flex justify-center mb-8">
-          <div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
-            <Box size={24} className="text-primary" />
-          </div>
-        </div>
-        
-        <h2 className="text-2xl font-bold text-white text-center mb-2">
-          {isRegister ? 'Create an Account' : 'Welcome Back'}
-        </h2>
-        <p className="text-zinc-400 text-sm text-center mb-8">
-          {isRegister ? 'Sign up to start building 3D scenes.' : 'Sign in to access your projects.'}
-        </p>
-
-        {error && (
-          <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-3 rounded-lg text-sm mb-6 text-center">
-            {error}
-          </div>
-        )}
-        
-        {success && (
-          <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-3 rounded-lg text-sm mb-6 text-center">
-            {success}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-          <div className="relative">
-            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" size={18} />
-            <input 
-              type="email" 
-              placeholder="Email address"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="w-full bg-zinc-950 border border-zinc-800 rounded-xl py-3 pl-10 pr-4 text-white focus:outline-none focus:border-primary transition-colors"
-            />
-          </div>
-          
-          <div className="relative">
-            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" size={18} />
-            <input 
-              type="password" 
-              placeholder="Password"
-              required
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full bg-zinc-950 border border-zinc-800 rounded-xl py-3 pl-10 pr-4 text-white focus:outline-none focus:border-primary transition-colors"
-            />
-          </div>
-
-          <button 
-            type="submit" 
-            disabled={loading}
-            className="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-xl mt-2 transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {loading && <Loader2 size={18} className="animate-spin" />}
-            {isRegister ? 'Sign Up' : 'Sign In'}
-          </button>
-        </form>
-
-        <div className="mt-8 text-center text-sm text-zinc-500">
-          {isRegister ? (
-            <p>Already have an account? <Link to="/auth" className="text-primary hover:underline">Sign in</Link></p>
-          ) : (
-            <p>Don't have an account? <Link to="/auth?mode=register" className="text-primary hover:underline">Sign up</Link></p>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index b3e4dca..92d9c13 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,45 +1,20 @@
-import { Link } from 'react-router-dom';
-import { useAuthStore } from '../store/authStore';
-import { Box } from 'lucide-react';
+import { Canvas } from '@react-three/fiber';
+import { ScrollControls } from '@react-three/drei';
+import { Scene } from '../components/home/Scene';
+import { Overlay } from '../components/home/Overlay';
+import { Suspense } from 'react';
 
 export default function Home() {
-  const { user } = useAuthStore();
-
   return (
-    <div className="min-h-screen bg-zinc-950 text-white flex flex-col items-center justify-center p-4">
-      <div className="w-16 h-16 rounded-2xl bg-primary/20 flex items-center justify-center mb-8 shadow-[0_0_50px_rgba(var(--primary-rgb),0.3)]">
-        <Box size={32} className="text-primary" />
-      </div>
-      <h1 className="text-5xl font-bold tracking-tight mb-4 text-center">
-        Welcome to Titan<span className="text-primary">3d</span>
-      </h1>
-      <p className="text-zinc-400 text-lg mb-10 max-w-lg text-center">
-        The ultimate cloud-based 3D product configurator. Build, edit, and visualize 3D assets entirely in your browser with the power of AI.
-      </p>
-      
-      {user ? (
-        <Link 
-          to="/dashboard" 
-          className="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-xl transition-all shadow-lg"
-        >
-          Go to Dashboard
-        </Link>
-      ) : (
-        <div className="flex gap-4">
-          <Link 
-            to="/auth" 
-            className="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-xl transition-all shadow-lg"
-          >
-            Sign In
-          </Link>
-          <Link 
-            to="/auth?mode=register" 
-            className="px-8 py-3 bg-zinc-800 hover:bg-zinc-700 text-white font-semibold rounded-xl transition-all border border-zinc-700"
-          >
-            Create Account
-          </Link>
-        </div>
-      )}
+    <div className="w-screen h-screen bg-zinc-950 overflow-hidden">
+      <Canvas shadows camera={{ position: [0, 0, 10], fov: 45 }}>
+        <Suspense fallback={null}>
+          <ScrollControls pages={3} damping={0.2}>
+            <Scene />
+            <Overlay />
+          </ScrollControls>
+        </Suspense>
+      </Canvas>
     </div>
   );
 }
diff --git a/src/store/authStore.ts b/src/store/authStore.ts
index 8398be3..1613050 100644
--- a/src/store/authStore.ts
+++ b/src/store/authStore.ts
@@ -17,12 +17,21 @@ interface AuthState {
   setSession: (token: string, profile: UserProfile) => void;
   signOut: () => void;
   setProfile: (profile: UserProfile) => void;
+  isAuthModalOpen: boolean;
+  openAuthModal: (mode?: 'login' | 'register') => void;
+  closeAuthModal: () => void;
+  authMode: 'login' | 'register';
 }
 
 export const useAuthStore = create<AuthState>((set) => ({
   user: null,
   profile: null,
   isLoading: true,
+  isAuthModalOpen: false,
+  authMode: 'login',
+
+  openAuthModal: (mode = 'login') => set({ isAuthModalOpen: true, authMode: mode }),
+  closeAuthModal: () => set({ isAuthModalOpen: false }),
 
   initialize: async () => {
     try {