diff --git a/mindscapes.html b/mindscapes.html
index 5e2c14e..30c7c52 100644
--- a/mindscapes.html
+++ b/mindscapes.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>Echoes of Thought: AI Exploration</title>
     <style>
-        /* Background animations and layout */
+        /* Background and Layout */
         body {
             margin: 0;
             font-family: Arial, sans-serif;
@@ -12,6 +12,9 @@
             color: #eaeaea;
             overflow: hidden;
             height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             transition: background-color 3s ease;
             animation: colorShift 10s infinite alternate;
             perspective: 800px;
@@ -23,7 +26,11 @@
         .container {
             text-align: center;
             max-width: 800px;
-            margin: 0 auto;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1;
         }
         h1, p, .interactive-box, canvas {
             transition: transform 0.1s ease, box-shadow 0.1s ease;
@@ -45,6 +52,8 @@
             background-color: rgba(255, 255, 255, 0.1);
             border-radius: 10px;
             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
+            width: 400px;
+            height: 900px; /* Increased height to fit extra canvas */
         }
         .button {
             padding: 12px 24px;
@@ -55,30 +64,23 @@
             font-size: 1em;
             cursor: pointer;
             transition: background-color 0.3s ease;
-            position: relative;
         }
         .button:hover {
             background-color: #2980b9;
         }
-        .button::after {
-            content: "Start an immersive journey through AI-generated landscapes.";
-            position: absolute;
-            top: -2em;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0, 0, 0, 0.8);
-            color: #fff;
-            padding: 5px 10px;
-            border-radius: 5px;
-            font-size: 0.8em;
-            opacity: 0;
-            transition: opacity 0.3s;
-            white-space: nowrap;
+        canvas {
+            width: 100%;
+            height: 200px;
+            display: block;
+            border-radius: 10px;
+            margin-top: 1em;
         }
-        .button:hover::after {
-            opacity: 1;
+        #output {
+            margin-top: 1em;
+            font-size: 1.2em;
+            color: #ffffff;
         }
-        /* Parallax background */
+        /* Background layer animation */
         .background-layer {
             position: fixed;
             top: 0; left: 0; right: 0; bottom: 0;
@@ -87,7 +89,6 @@
             filter: blur(8px);
             animation: pulse 6s infinite ease-in-out;
         }
-        /* Animated blur pulse */
         @keyframes pulse {
             0%, 100% { opacity: 0.3; }
             50% { opacity: 0.8; }
@@ -96,25 +97,26 @@
 </head>
 <body>
     <div class="background-layer"></div>
-    <div class="animated-bg"></div>
-    <div class="container" id="container">
+    <div class="container">
         <h1 id="title">Echoes of Thought</h1>
-        <p id="description">Experience a journey of cognitive exploration with AI-driven landscapes, procedural textures, Monte Carlo randomness, and dynamic visual layers.</p>
+        <p id="description">Experience a journey of cognitive exploration with AI-driven landscapes, procedural textures, and dynamic visual layers.</p>
         <div class="interactive-box" id="interactiveBox">
             <button class="button" onclick="exploreMindscape()">Explore the Mindscape</button>
-            <p id="output" style="margin-top: 1em;"></p>
-            <canvas id="rayTracingCanvas" width="400" height="200" style="margin-top: 1em;"></canvas>
-            <canvas id="voxelCanvas" width="400" height="200" style="margin-top: 1em;"></canvas>
+            <p id="output"></p>
+            <!-- Layered canvases -->
+            <canvas id="rayTracingCanvas" width="400" height="200"></canvas>
+            <canvas id="voxelCanvas" width="400" height="200"></canvas>
+            <canvas id="overlayCanvas" width="400" height="200"></canvas>
+            <canvas id="threeDCanvas" width="400" height="200"></canvas> <!-- 3D effect voxel layer -->
         </div>
     </div>
-
     <audio id="backgroundSound" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" loop></audio>
 
     <script>
-        // Sound Effect Setup
+        // Sound setup
         const sound = document.getElementById("backgroundSound");
 
-        // AI-driven text descriptions for mindscape exploration
+        // AI-driven descriptions for each exploration
         const descriptions = [
             "Neural nodes connect and pulsate, adapting to cognitive exploration.",
             "Smooth Perlin textures shift, representing waves of memory in real-time.",
@@ -123,15 +125,18 @@ <h1 id="title">Echoes of Thought</h1>
             "Diamond-like rays refract thoughts, shifting and weaving into focus."
         ];
 
-        // Parallax and Depth Effect on Mouse Move
+        // Elements for parallax effect
         const elementsToAnimate = [
             document.getElementById('title'),
             document.getElementById('description'),
             document.getElementById('interactiveBox'),
             document.getElementById('rayTracingCanvas'),
-            document.getElementById('voxelCanvas')
+            document.getElementById('voxelCanvas'),
+            document.getElementById('overlayCanvas'),
+            document.getElementById('threeDCanvas')
         ];
 
+        // Mouse move event for parallax effect
         document.addEventListener('mousemove', (event) => {
             const x = (window.innerWidth / 2 - event.pageX) / 50;
             const y = (window.innerHeight / 2 - event.pageY) / 50;
@@ -143,14 +148,18 @@ <h1 id="title">Echoes of Thought</h1>
             });
         });
 
-        // Canvases for layered visual effects
+        // Canvases for visual layers
         const rayTracingCanvas = document.getElementById("rayTracingCanvas");
         const rayTracingCtx = rayTracingCanvas.getContext("2d");
         const voxelCanvas = document.getElementById("voxelCanvas");
         const voxelCtx = voxelCanvas.getContext("2d");
+        const overlayCanvas = document.getElementById("overlayCanvas");
+        const overlayCtx = overlayCanvas.getContext("2d");
+        const threeDCanvas = document.getElementById("threeDCanvas");
+        const threeDCtx = threeDCanvas.getContext("2d");
 
-        // Persistent Ray Tracing Effect with Intense Colors
-        function drawDiffusedRayTracingEffect() {
+        // Persistent Ray Tracing Effect
+        function drawRayTracingEffect() {
             rayTracingCtx.clearRect(0, 0, rayTracingCanvas.width, rayTracingCanvas.height);
             for (let i = 0; i < rayTracingCanvas.width; i += 5) {
                 for (let j = 0; j < rayTracingCanvas.height; j += 5) {
@@ -167,68 +176,100 @@ <h1 id="title">Echoes of Thought</h1>
             }
         }
 
-        // Animated Voxel Effect with Perlin-like noise
+        // Voxel Effect with Smooth Color Changes
         function drawVoxelEffect() {
             voxelCtx.clearRect(0, 0, voxelCanvas.width, voxelCanvas.height);
-            let time = Date.now() * 0.0003;
-
+            let time = Date.now() * 0.0005;
             const voxelSize = 10;
             for (let x = 0; x < voxelCanvas.width; x += voxelSize) {
                 for (let y = 0; y < voxelCanvas.height; y += voxelSize) {
-                    const noise = Math.sin(x * 0.1 + time) * Math.cos(y * 0.1 + time);
-                    const color = Math.floor(128 + 128 * noise);  // Perlin-like height effect
-                    voxelCtx.fillStyle = `rgba(${color}, ${color}, 255, 0.8)`;
-                    
-                    const height = voxelSize + noise * 10;  // Varying "height" to mimic 3D voxel
-                    voxelCtx.fillRect(x, y - height / 2, voxelSize, voxelSize);
+                    const noise = Math.sin(x * 0.05 + time) * Math.cos(y * 0.05 + time);
+                    const red = Math.floor(128 + 128 * Math.sin(time + x * 0.1));
+                    const green = Math.floor(128 + 128 * Math.cos(time + y * 0.1));
+                    const blue = Math.floor(128 * noise + 128);
+                    voxelCtx.fillStyle = `rgba(${red}, ${green}, ${blue}, 0.7)`;
+                    voxelCtx.fillRect(x, y, voxelSize, voxelSize);
                 }
             }
-            requestAnimationFrame(drawVoxelEffect);
         }
 
-        // Monte Carlo computation for dynamic randomness
-        function computeMonteCarlo() {
-            return new Promise((resolve) => {
-                setTimeout(() => {
-                    let result = 0;
-                    for (let i = 0; i < 1e5; i++) {
-                        result += Math.sin(i) * Math.random();
-                    }
-                    resolve(result.toFixed(2));
-                }, 100);
-            });
+        // Overlay Perlin Noise Layer
+        function drawOverlayPerlinNoise() {
+            overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
+            let time = Date.now() * 0.0002;
+            for (let i = 0; i < overlayCanvas.width; i++) {
+                for (let j = 0; j < overlayCanvas.height; j++) {
+                    const noiseValue = Math.sin(i * 0.1 + time) * Math.cos(j * 0.1 + time) + Math.random() * 0.1;
+                    const color = Math.floor(255 * (noiseValue + 1) / 2);
+                    overlayCtx.fillStyle = `rgba(${color}, ${color}, ${255 - color}, 0.3)`;
+                    overlayCtx.fillRect(i, j, 1, 1);
+                }
+            }
         }
 
-        async function exploreMindscape() {
-            const randomIndex = Math.floor(Math.random() * descriptions.length);
-            const selectedDescription = descriptions[randomIndex];
-
-            document.getElementById('output').textContent = "Generating cognitive landscapes...";
-            sound.play();
+        // 3D Voxel Effect on Bottom Layer
+        function draw3DEffect() {
+            threeDCtx.clearRect(0, 0, threeDCanvas.width, threeDCanvas.height);
+            let time = Date.now() * 0.0005;
+            const voxelSize = 20;
+            for (let x = 0; x < threeDCanvas.width; x += voxelSize) {
+                for (let y = 0; y < threeDCanvas.height; y += voxelSize) {
+                    const noise = Math.sin(x * 0.05 + time) * Math.cos(y * 0.05 + time);
+                    const color = Math.floor(128 + 127 * noise);
+                    const height = voxelSize + noise * 10;
 
-            const monteCarloResult = await computeMonteCarlo();
-            document.getElementById('output').textContent = `${selectedDescription} (Monte Carlo Value: ${monteCarloResult})`;
+                    // Set color and shadow for 3D effect
+                    threeDCtx.fillStyle = `rgba(${color}, ${color}, 255, 0.8)`;
+                    threeDCtx.fillRect(x, y - height / 2, voxelSize, height);
 
-            drawDiffusedRayTracingEffect();
-            adjustCameraSettings();
+                    // Shadow effect
+                    threeDCtx.fillStyle = `rgba(0, 0, 0, 0.2)`;
+                    threeDCtx.fillRect(x + 2, y + height / 2, voxelSize, 2);
+                }
+            }
         }
 
+        // Camera Settings Simulation
         function adjustCameraSettings() {
             const cameraSettings = {
                 aperture: (Math.random() * 5 + 1).toFixed(1),
                 lensSize: (Math.random() * 200 + 20).toFixed(1),
                 exposure: (Math.random() * 2 + 1).toFixed(2),
                 depthOfField: (Math.random() * 100 + 10).toFixed(1),
-                tilt: (Math.random() * 20 - 10).toFixed(1),
-                zoom: (Math.random() * 2 + 1).toFixed(1)
+                tilt: (Math.random() * 20 - 10).toFixed(1)
             };
-            console.log("Camera Settings:", cameraSettings);
-            document.getElementById('output').textContent += ` | Aperture: ${cameraSettings.aperture}, Lens: ${cameraSettings.lensSize}mm, Depth of Field: ${cameraSettings.depthOfField}, Tilt: ${cameraSettings.tilt}°`;
+            document.getElementById("output").textContent += ` | Aperture: ${cameraSettings.aperture}, Lens: ${cameraSettings.lensSize}mm, Depth of Field: ${cameraSettings.depthOfField}, Tilt: ${cameraSettings.tilt}°`;
+        }
+
+        // Monte Carlo Simulation
+        function computeMonteCarlo() {
+            let result = 0;
+            for (let i = 0; i < 1e5; i++) {
+                result += Math.sin(i) * Math.random();
+            }
+            return result.toFixed(2);
+        }
+
+        async function exploreMindscape() {
+            const randomIndex = Math.floor(Math.random() * descriptions.length);
+            const selectedDescription = descriptions[randomIndex];
+            const monteCarloValue = computeMonteCarlo();
+            document.getElementById("output").textContent = `${selectedDescription} (Monte Carlo Value: ${monteCarloValue})`;
+            adjustCameraSettings();
+            sound.play();
+        }
+
+        // Animation loops for each effect
+        function animate() {
+            drawRayTracingEffect();
+            drawVoxelEffect();
+            drawOverlayPerlinNoise();
+            draw3DEffect();
+            requestAnimationFrame(animate);
         }
 
-        // Persistent visual layers
-        drawDiffusedRayTracingEffect();
-        drawVoxelEffect();
+        // Initialize the animation loop
+        animate();
     </script>
 </body>
 </html>
