diff --git a/app/page.tsx b/app/page.tsx
index f3d9a4c..ee0bd56 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,21 +17,24 @@ function DashboardPreview() {
       {/* * Glow behind the image */}
       <div className="absolute inset-0 bg-brand-orange/20 blur-[100px] -z-10 rounded-full opacity-50" />
       
-      {/* * The Dashboard Image Container */}
-      <div className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-900/50 backdrop-blur-sm shadow-2xl transform rotate-x-12 hover:rotate-x-0 transition-transform duration-700 ease-out overflow-hidden">
-        {/* * Header of the fake browser window */}
-        <div className="h-8 bg-neutral-800/50 border-b border-white/5 flex items-center px-4 gap-2">
-          <div className="w-3 h-3 rounded-full bg-red-500/50" />
-          <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
-          <div className="w-3 h-3 rounded-full bg-green-500/50" />
-        </div>
-        
-        {/* * Placeholder for actual dashboard screenshot - replace src with real image later */}
-        <div className="aspect-video bg-neutral-900 flex items-center justify-center text-neutral-700">
-           <div className="text-center">
-             <BarChartIcon className="w-16 h-16 mx-auto mb-4 opacity-20" />
-             <p>Dashboard Preview</p>
-           </div>
+      {/* * Floating Wrapper */}
+      <div className="animate-float">
+        {/* * The Dashboard Image Container */}
+        <div className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-900/50 backdrop-blur-sm shadow-2xl transform rotate-x-12 hover:rotate-x-0 transition-transform duration-700 ease-out overflow-hidden">
+          {/* * Header of the fake browser window */}
+          <div className="h-8 bg-neutral-800/50 border-b border-white/5 flex items-center px-4 gap-2">
+            <div className="w-3 h-3 rounded-full bg-red-500/50" />
+            <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
+            <div className="w-3 h-3 rounded-full bg-green-500/50" />
+          </div>
+          
+          {/* * Placeholder for actual dashboard screenshot - replace src with real image later */}
+          <div className="aspect-video bg-neutral-900 flex items-center justify-center text-neutral-700">
+             <div className="text-center">
+               <BarChartIcon className="w-16 h-16 mx-auto mb-4 opacity-20" />
+               <p>Dashboard Preview</p>
+             </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/styles/globals.css b/styles/globals.css
index 89290cd..ec07353 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -52,4 +52,31 @@
   .glow-orange {
     box-shadow: 0 0 40px -10px rgba(253, 94, 15, 0.5);
   }
+
+  /* * 3D Transform Utilities */
+  .perspective-1000 {
+    perspective: 1000px;
+  }
+  
+  .rotate-x-12 {
+    transform: rotateX(12deg);
+  }
+  
+  .rotate-x-0 {
+    transform: rotateX(0deg);
+  }
+  
+  .transform-style-3d {
+    transform-style: preserve-3d;
+  }
+
+  /* * Animations */
+  @keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
 }