diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4964a9b..9392adc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -249,10 +249,16 @@ export default function Home() {
                 <div className="order-1 md:order-2 flex justify-center relative">
                     {/* Holographic Decoration */}
                     <div className="absolute inset-0 bg-zsl-primary/5 rounded-full blur-[100px] animate-pulse-slow"></div>
-                    <div className="relative w-80 h-80 rounded-full border-2 border-dashed border-zsl-primary/30 flex items-center justify-center bg-black/40 backdrop-blur-sm">
+                    <div className="relative w-96 h-96 rounded-full border-2 border-dashed border-zsl-primary/30 flex items-center justify-center bg-black/40 backdrop-blur-sm">
                         <div className="absolute inset-0 border border-zsl-primary/10 rounded-full animate-[spin_20s_linear_infinite]"></div>
                         <div className="absolute inset-4 border border-zsl-accent/10 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div>
-                        <Logo size="lg" />
+                        <div className="w-72 h-72 rounded-full overflow-hidden border-2 border-zsl-primary/30 shadow-[0_0_30px_rgba(0,212,255,0.3)]">
+                          <img 
+                            src="/assets/logo.png" 
+                            alt="ZeroSixLab" 
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
                     </div>
                 </div>
              </div>
diff --git a/src/components/LoadingScreen.tsx b/src/components/LoadingScreen.tsx
index 2b02b61..c847ac3 100644
--- a/src/components/LoadingScreen.tsx
+++ b/src/components/LoadingScreen.tsx
@@ -1,8 +1,32 @@
 "use client";
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { Logo } from './Logo';
 
+// Fixed particle positions to avoid hydration mismatch
+const PARTICLE_POSITIONS = [
+  { left: 10, top: 15, delay: 0.2, duration: 3 },
+  { left: 25, top: 80, delay: 0.5, duration: 4 },
+  { left: 45, top: 30, delay: 0.8, duration: 3.5 },
+  { left: 70, top: 60, delay: 1.1, duration: 4.5 },
+  { left: 85, top: 20, delay: 1.4, duration: 3 },
+  { left: 15, top: 50, delay: 0.3, duration: 4 },
+  { left: 55, top: 85, delay: 0.6, duration: 3.5 },
+  { left: 90, top: 45, delay: 0.9, duration: 4 },
+  { left: 35, top: 70, delay: 1.2, duration: 3 },
+  { left: 60, top: 10, delay: 1.5, duration: 4.5 },
+  { left: 5, top: 90, delay: 0.4, duration: 3.5 },
+  { left: 50, top: 55, delay: 0.7, duration: 4 },
+  { left: 75, top: 35, delay: 1.0, duration: 3 },
+  { left: 20, top: 25, delay: 1.3, duration: 4.5 },
+  { left: 40, top: 95, delay: 1.6, duration: 3.5 },
+  { left: 95, top: 75, delay: 0.1, duration: 4 },
+  { left: 30, top: 5, delay: 1.8, duration: 3 },
+  { left: 65, top: 40, delay: 0.25, duration: 4.5 },
+  { left: 80, top: 65, delay: 1.7, duration: 3.5 },
+  { left: 12, top: 88, delay: 1.9, duration: 4 },
+];
+
 export const LoadingScreen: React.FC = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [progress, setProgress] = useState(0);
@@ -15,7 +39,7 @@ export const LoadingScreen: React.FC = () => {
           setTimeout(() => setIsLoading(false), 300);
           return 100;
         }
-        return prev + Math.random() * 15;
+        return prev + 10;
       });
     }, 100);
 
@@ -31,15 +55,15 @@ export const LoadingScreen: React.FC = () => {
       
       {/* Floating Particles */}
       <div className="absolute inset-0 overflow-hidden">
-        {[...Array(20)].map((_, i) => (
+        {PARTICLE_POSITIONS.map((particle, i) => (
           <div
             key={i}
             className="absolute w-1 h-1 bg-zsl-primary/50 rounded-full animate-pulse"
             style={{
-              left: `${Math.random() * 100}%`,
-              top: `${Math.random() * 100}%`,
-              animationDelay: `${Math.random() * 2}s`,
-              animationDuration: `${2 + Math.random() * 3}s`
+              left: `${particle.left}%`,
+              top: `${particle.top}%`,
+              animationDelay: `${particle.delay}s`,
+              animationDuration: `${particle.duration}s`
             }}
           />
         ))}
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 2f53666..c2d05d1 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-export const Logo: React.FC<{ size?: 'sm' | 'md' | 'lg' }> = ({ size = 'md' }) => {
+export const Logo: React.FC<{ size?: 'sm' | 'md' | 'lg', showText?: boolean }> = ({ size = 'md', showText = true }) => {
   const [imageError, setImageError] = useState(false);
   
   const sizeClasses = {
@@ -36,11 +36,13 @@ export const Logo: React.FC<{ size?: 'sm' | 'md' | 'lg' }> = ({ size = 'md' }) =
           </div>
          )}
       </div>
-      <div className={`font-mono font-bold tracking-wider ${textSizes[size]}`}>
-        <span className="text-white">Zero</span>
-        <span className="text-zsl-primary">Six</span>
-        <span className="text-white">Lab</span>
-      </div>
+      {showText && (
+        <div className={`font-mono font-bold tracking-wider ${textSizes[size]}`}>
+          <span className="text-white">Zero</span>
+          <span className="text-zsl-primary">Six</span>
+          <span className="text-white">Lab</span>
+        </div>
+      )}
     </div>
   );
 };