diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c18e521..9b1b8e3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -61,7 +61,7 @@ export default function RootLayout({
           <CompareProvider>
             {children}
             <CompareBar />
-            <MouseAnimation />
+            {/* <MouseAnimation /> */}
           </CompareProvider>
         </ThemeProvider>
       </body>
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 8e0a96d..7622c8b 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -1,46 +1,9 @@
 "use client";
 
-import { useState, useRef, MouseEvent } from "react";
-import Image from "next/image";
 import Link from "next/link";
-
 import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations";
 
 export default function About() {
-    const [rotation, setRotation] = useState({ x: -10, y: 0 });
-    const [isHovering, setIsHovering] = useState(false);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
-        if (!containerRef.current) return;
-
-        const rect = containerRef.current.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-
-        const width = rect.width;
-        const height = rect.height;
-
-        // Calculate rotation based on mouse position
-        // Y-axis rotation (horizontal mouse movement): -180 to 180 degrees
-        const rotateY = ((x / width) * 360) - 180;
-
-        // X-axis rotation (vertical mouse movement): -90 (top view) to 90 (bottom view)
-        // Inverting Y so top of screen corresponds to seeing the top face
-        const rotateX = -(((y / height) * 180) - 90);
-
-        setRotation({ x: rotateX, y: rotateY });
-    };
-
-    const handleMouseEnter = () => {
-        setIsHovering(true);
-    };
-
-    const handleMouseLeave = () => {
-        setIsHovering(false);
-        setRotation({ x: -10, y: 0 }); // Reset to default angle
-    };
-
     return (
         <section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden">
 
@@ -81,128 +44,22 @@ export default function About() {
                         </Link>
                     </div>
 
-                    {/* 3D Cube Container */}
+                    {/* Parallax Image Container */}
+                    {/* Parallax Image Container - Visible on all screens */}
                     <div
-                        className="h-[500px] w-full flex items-center justify-center perspective-container cursor-move"
-                        ref={containerRef}
-                        onMouseMove={handleMouseMove}
-                        onMouseEnter={handleMouseEnter}
-                        onMouseLeave={handleMouseLeave}
+                        className="h-[400px] md:h-[500px] w-full rounded-2xl shadow-2xl overflow-hidden"
+                        style={{
+                            backgroundImage: "url('/assets/images/home/front.webp')",
+                            backgroundAttachment: "fixed",
+                            backgroundPosition: "center",
+                            backgroundRepeat: "no-repeat",
+                            backgroundSize: "cover"
+                        }}
                     >
-                        <div
-                            className={`cube relative w-64 h-64 md:w-80 md:h-80 transform-style-3d ${!isHovering ? 'animate-spin-slow' : ''}`}
-                            style={isHovering ? { transform: `rotateX(${rotation.x}deg) rotateY(${rotation.y}deg)` } : {}}
-                        >
-                            {/* Front Face */}
-                            <div className="absolute inset-0 transform translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
-                                <Image
-                                    src="/assets/images/home/front.webp"
-                                    alt="Front View"
-                                    fill
-                                    className="object-cover"
-                                />
-                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Front View</div>
-                            </div>
-
-                            {/* Back Face */}
-                            <div className="absolute inset-0 transform rotate-y-90 translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
-                                <Image
-                                    src="/assets/images/home/back.webp"
-                                    alt="Back View"
-                                    fill
-                                    className="object-cover"
-                                />
-                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Back View</div>
-                            </div>
-
-                            {/* Right Face */}
-                            <div className="absolute inset-0 transform rotate-y-90 translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
-                                <Image
-                                    src="/assets/images/home/right.webp"
-                                    alt="Right View"
-                                    fill
-                                    className="object-cover"
-                                />
-                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Right View</div>
-                            </div>
-
-                            {/* Left Face */}
-                            <div className="absolute inset-0 transform -rotate-y-90 translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
-                                <Image
-                                    src="/assets/images/home/left.webp"
-                                    alt="Left View"
-                                    fill
-                                    className="object-cover"
-                                />
-                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Left View</div>
-                            </div>
-
-                            {/* Top Face */}
-                            <div className="absolute inset-0 transform rotate-x-90 translate-z-32 md:translate-z-40 bg-gray-100 border border-white/20 flex items-center justify-center">
-                                <Image
-                                    src="/assets/images/home/top.png"
-                                    alt="Top View"
-                                    fill
-                                    className="object-cover"
-                                />
-                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Top View</div>
-                            </div>
-
-                            {/* Bottom Face */}
-                            <div className="absolute inset-0 transform -rotate-x-90 translate-z-32 md:translate-z-40 bg-gray-100 border border-white/20 flex items-center justify-center shadow-2xl">
-                                <Image
-                                    src="/assets/images/home/bottom.webp"
-                                    alt="Bottom View"
-                                    fill
-                                    className="object-cover"
-                                />
-                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Bottom View</div>
-                            </div>
-                        </div>
+                        {/* Empty container for the image background */}
                     </div>
                 </div>
             </div>
-
-            <style jsx global>{`
-                .perspective-container {
-                    perspective: 1000px;
-                }
-                .transform-style-3d {
-                    transform-style: preserve-3d;
-                    transition: transform 0.1s ease-out; /* Smooth transition for mouse movement */
-                }
-                .translate-z-32 {
-                    transform: rotateY(0deg) translateZ(8rem);
-                }
-                .translate-z-40 {
-                    transform: rotateY(0deg) translateZ(10rem);
-                }
-                
-                /* Custom transforms for faces */
-                .cube > div:nth-child(1) { transform: rotateY(0deg) translateZ(128px); }
-                .cube > div:nth-child(2) { transform: rotateY(180deg) translateZ(128px); }
-                .cube > div:nth-child(3) { transform: rotateY(90deg) translateZ(128px); }
-                .cube > div:nth-child(4) { transform: rotateY(-90deg) translateZ(128px); }
-                .cube > div:nth-child(5) { transform: rotateX(90deg) translateZ(128px); }
-                .cube > div:nth-child(6) { transform: rotateX(-90deg) translateZ(128px); }
-
-                @media (min-width: 768px) {
-                    .cube > div:nth-child(1) { transform: rotateY(0deg) translateZ(160px); }
-                    .cube > div:nth-child(2) { transform: rotateY(180deg) translateZ(160px); }
-                    .cube > div:nth-child(3) { transform: rotateY(90deg) translateZ(160px); }
-                    .cube > div:nth-child(4) { transform: rotateY(-90deg) translateZ(160px); }
-                    .cube > div:nth-child(5) { transform: rotateX(90deg) translateZ(160px); }
-                    .cube > div:nth-child(6) { transform: rotateX(-90deg) translateZ(160px); }
-                }
-
-                @keyframes spin-slow {
-                    from { transform: rotateX(-10deg) rotateY(0deg); }
-                    to { transform: rotateX(-10deg) rotateY(360deg); }
-                }
-                .animate-spin-slow {
-                    animation: spin-slow 20s linear infinite;
-                }
-            `}</style>
         </section>
     );
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ad8a677..1fc7236 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -22,7 +22,7 @@ export default function Header() {
         <>
             <header
                 className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
-                    ? "bg-white/80 dark:bg-black/80 backdrop-blur-md shadow-sm py-4"
+                    ? "bg-white/5 dark:bg-black/5 backdrop-blur-md shadow-sm py-4"
                     : "bg-transparent py-6"
                     }`}
             >