diff --git a/.pages/index.html b/.pages/index.html
index e9623273..de889013 100644
--- a/.pages/index.html
+++ b/.pages/index.html
@@ -1,287 +1,273 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Sucrose Wallpaper Engine</title>
-    <link rel="stylesheet" href="styles.css">
-    <link rel="shortcut icon" href="favicon.ico" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-900 text-white">
-    <!-- Header Section -->
-    <header class="fixed w-full z-50 transition-all duration-300">
-        <div class="absolute inset-0 opacity-0 transition-opacity duration-300" id="headerBackground"></div>
-        <nav class="container mx-auto px-6 py-4 relative">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-2">
-                    <img src="images/Logo.svg" alt="Sucrose Logo" class="w-8 h-8 rounded-lg">
-                    <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600 cursor-default">Sucrose Wallpaper Engine</span>
-                </div>
-                <div class="hidden md:flex space-x-8">
-                    <a href="#features" class="text-white hover:text-purple-400 transition-colors">Features</a>
-                    <a href="#gallery" class="text-white hover:text-purple-400 transition-colors">Gallery</a>
-                    <a href="#download" class="text-white hover:text-purple-400 transition-colors">Download</a>
+    <head>
+        <meta charset="UTF-8">
+        <title>Sucrose Wallpaper Engine</title>
+        <link rel="stylesheet" href="styles.css">
+        <link rel="shortcut icon" href="favicon.ico" />
+        <link rel="icon" type="image/x-icon" href="favicon.ico">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
+        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    </head>
+    <body class="bg-gray-900 text-white">
+        <!-- Header Section -->
+        <header class="fixed w-full z-50 transition-all duration-300">
+            <div class="absolute inset-0 opacity-0 transition-opacity duration-300" id="headerBackground"></div>
+            <nav class="container mx-auto px-6 py-4 relative">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center space-x-2">
+                        <img src="images/Logo.svg" alt="Sucrose Logo" class="w-8 h-8 rounded-lg">
+                        <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600 cursor-default">Sucrose Wallpaper Engine</span>
+                    </div>
+                    <div class="hidden md:flex space-x-8">
+                        <a href="#features" class="text-white hover:text-purple-400 transition-colors">Features</a>
+                        <a href="#gallery" class="text-white hover:text-purple-400 transition-colors">Gallery</a>
+                        <a href="#download" class="text-white hover:text-purple-400 transition-colors">Download</a>
+                    </div>
                 </div>
+            </nav>
+        </header>
+        <!-- Hero Section -->
+        <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
+            <!-- Background Image -->
+            <div class="absolute inset-0 z-0">
+                <img src="images/Promo.png" alt="Background" class="w-full h-full object-cover opacity-10 scale-110 blur-sm">
             </div>
-        </nav>
-    </header>
-
-    <!-- Hero Section -->
-    <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
-        <!-- Background Image -->
-        <div class="absolute inset-0 z-0">
-            <img src="images/Promo.png" alt="Background" class="w-full h-full object-cover opacity-10 scale-110 blur-sm">
-        </div>
-        
-        <!-- Gradient Overlay -->
-        <div class="absolute inset-0 bg-gradient-to-br from-purple-900/90 via-gray-900/95 to-blue-900/90 z-10"></div>
-        
-        <!-- Pattern Overlay -->
-        <div class="absolute inset-0 pattern-bg opacity-5 z-20"></div>
-
-        <!-- Content -->
-        <div class="container mx-auto px-6 py-24 text-center relative z-30" data-aos="fade-up">
-            <h1 style="line-height: 1.4" class="text-5xl md:text-7xl font-bold mb-8 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600 animate-gradient-text">
-                Sucrose Wallpaper Engine
-            </h1>
-            <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
-                Sucrose is a versatile wallpaper engine that brings life to your desktop with a wide range of interactive wallpapers.
-            </p>
-            <div class="flex flex-col md:flex-row gap-6 justify-center items-center">
-                <a href="https://apps.microsoft.com/detail/XP8JGPBHTJGLCQ?launch=true&mode=full" target="_blank" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-8 rounded-full inline-block transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-purple-500/25">
-                    Download from Microsoft Store
-                </a>
-                <a href="https://github.com/Taiizor/Sucrose?tab=readme-ov-file#download" target="_blank" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-4 px-8 rounded-full inline-block transition-all transform hover:scale-105 border-2 border-purple-500/50 hover:border-purple-500">
-                    Download from GitHub
-                </a>
-            </div>
-        </div>
-    </section>
-
-    <!-- Features Section -->
-    <section id="features" class="py-24 bg-gray-800">
-        <div class="container mx-auto px-6">
-            <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">Sucrose Features</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
-                <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="100">
-                    <div class="text-purple-500 text-4xl mb-4">🎨</div>
-                    <h3 class="text-xl font-bold mb-4">Customizable Themes</h3>
-                    <p class="text-gray-300">Switch between Light and Dark themes, and create your own wallpapers with simple or detailed customization options.</p>
-                </div>
-                <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="200">
-                    <div class="text-purple-500 text-4xl mb-4">⚡</div>
-                    <h3 class="text-xl font-bold mb-4">Performance Optimized</h3>
-                    <p class="text-gray-300">Smart resource management with auto-pause for fullscreen apps and power-saving mode for laptops.</p>
-                </div>
-                <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="300">
-                    <div class="text-purple-500 text-4xl mb-4">🖥️</div>
-                    <h3 class="text-xl font-bold mb-4">Multi-Screen Support</h3>
-                    <p class="text-gray-300">Supports multiple screens and all screen resolutions for a seamless experience.</p>
-                </div>
-                <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="400">
-                    <div class="text-purple-500 text-4xl mb-4">🎧</div>
-                    <h3 class="text-xl font-bold mb-4">Audio Responsive</h3>
-                    <p class="text-gray-300">Create dynamic wallpapers that respond to your music using the Sucrose Audio API.</p>
-                </div>
-                <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="500">
-                    <div class="text-purple-500 text-4xl mb-4">🌐</div>
-                    <h3 class="text-xl font-bold mb-4">Web Integration</h3>
-                    <p class="text-gray-300">Use any website as your wallpaper with CefSharp and WebView integration.</p>
-                </div>
-                <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="600">
-                    <div class="text-purple-500 text-4xl mb-4">🔄</div>
-                    <h3 class="text-xl font-bold mb-4">Auto Switching</h3>
-                    <p class="text-gray-300">Automatically switch between wallpapers at specified intervals or randomly.</p>
-                </div>
-                <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="700">
-                    <div class="text-purple-500 text-4xl mb-4">📊</div>
-                    <h3 class="text-xl font-bold mb-4">System Integration</h3>
-                    <p class="text-gray-300">Display system status and create responsive wallpapers using the Sucrose System API.</p>
-                </div>
-                <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="800">
-                    <div class="text-purple-500 text-4xl mb-4">🤝</div>
-                    <h3 class="text-xl font-bold mb-4">Community Sharing</h3>
-                    <p class="text-gray-300">Create and share your wallpapers with the Sucrose community through our dedicated store.</p>
-                </div>
-                <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="900">
-                    <div class="text-purple-500 text-4xl mb-4">💫</div>
-                    <h3 class="text-xl font-bold mb-4">Completely Free</h3>
-                    <p class="text-gray-300">Open-source and free to use, with all features available without any payment required.</p>
+            <!-- Gradient Overlay -->
+            <div class="absolute inset-0 bg-gradient-to-br from-purple-900/90 via-gray-900/95 to-blue-900/90 z-10"></div>
+            <!-- Pattern Overlay -->
+            <div class="absolute inset-0 pattern-bg opacity-5 z-20"></div>
+            <!-- Content -->
+            <div class="container mx-auto px-6 py-24 text-center relative z-30" data-aos="fade-up">
+                <h1 style="line-height: 1.4" class="text-5xl md:text-7xl font-bold mb-8 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600 animate-gradient-text"> Sucrose Wallpaper Engine </h1>
+                <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto"> Sucrose is a versatile wallpaper engine that brings life to your desktop with a wide range of interactive wallpapers. </p>
+                <div class="flex flex-col md:flex-row gap-6 justify-center items-center">
+                    <a href="https://apps.microsoft.com/detail/XP8JGPBHTJGLCQ?launch=true&mode=full" target="_blank" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-8 rounded-full inline-block transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-purple-500/25"> Download from Microsoft Store </a>
+                    <a href="https://github.com/Taiizor/Sucrose?tab=readme-ov-file#download" target="_blank" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-4 px-8 rounded-full inline-block transition-all transform hover:scale-105 border-2 border-purple-500/50 hover:border-purple-500"> Download from GitHub </a>
                 </div>
             </div>
-        </div>
-    </section>
-
-    <!-- Gallery Section -->
-    <section id="gallery" class="py-24">
-        <div class="container mx-auto px-6">
-            <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">Sucrose Screenshots</h2>
-
-            <!-- Main Screenshot Display -->
-            <div class="mb-16">
-                <div id="mainImageContainer" class="aspect-video rounded-2xl overflow-hidden bg-gray-800 mb-4 cursor-pointer" data-aos="fade-up">
-                    <img id="mainImage" src="images/Preview.png" alt="Main Screenshot" class="w-full h-full object-cover">
+        </section>
+        <!-- Features Section -->
+        <section id="features" class="py-24 bg-gray-800">
+            <div class="container mx-auto px-6">
+                <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">Sucrose Features</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
+                    <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="100">
+                        <div class="text-purple-500 text-4xl mb-4">🎨</div>
+                        <h3 class="text-xl font-bold mb-4">Customizable Themes</h3>
+                        <p class="text-gray-300">Switch between Light and Dark themes, and create your own wallpapers with simple or detailed customization options.</p>
+                    </div>
+                    <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="200">
+                        <div class="text-purple-500 text-4xl mb-4">⚡</div>
+                        <h3 class="text-xl font-bold mb-4">Performance Optimized</h3>
+                        <p class="text-gray-300">Smart resource management with auto-pause for fullscreen apps and power-saving mode for laptops.</p>
+                    </div>
+                    <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="300">
+                        <div class="text-purple-500 text-4xl mb-4">🖥️</div>
+                        <h3 class="text-xl font-bold mb-4">Multi-Screen Support</h3>
+                        <p class="text-gray-300">Supports multiple screens and all screen resolutions for a seamless experience.</p>
+                    </div>
+                    <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="400">
+                        <div class="text-purple-500 text-4xl mb-4">🎧</div>
+                        <h3 class="text-xl font-bold mb-4">Audio Responsive</h3>
+                        <p class="text-gray-300">Create dynamic wallpapers that respond to your music using the Sucrose Audio API.</p>
+                    </div>
+                    <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="500">
+                        <div class="text-purple-500 text-4xl mb-4">🌐</div>
+                        <h3 class="text-xl font-bold mb-4">Web Integration</h3>
+                        <p class="text-gray-300">Use any website as your wallpaper with CefSharp and WebView integration.</p>
+                    </div>
+                    <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="600">
+                        <div class="text-purple-500 text-4xl mb-4">🔄</div>
+                        <h3 class="text-xl font-bold mb-4">Auto Switching</h3>
+                        <p class="text-gray-300">Automatically switch between wallpapers at specified intervals or randomly.</p>
+                    </div>
+                    <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="700">
+                        <div class="text-purple-500 text-4xl mb-4">📊</div>
+                        <h3 class="text-xl font-bold mb-4">System Integration</h3>
+                        <p class="text-gray-300">Display system status and create responsive wallpapers using the Sucrose System API.</p>
+                    </div>
+                    <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="800">
+                        <div class="text-purple-500 text-4xl mb-4">🤝</div>
+                        <h3 class="text-xl font-bold mb-4">Community Sharing</h3>
+                        <p class="text-gray-300">Create and share your wallpapers with the Sucrose community through our dedicated store.</p>
+                    </div>
+                    <div class="p-6 rounded-xl bg-gray-700/50 backdrop-blur-lg" data-aos="fade-up" data-aos-delay="900">
+                        <div class="text-purple-500 text-4xl mb-4">💫</div>
+                        <h3 class="text-xl font-bold mb-4">Completely Free</h3>
+                        <p class="text-gray-300">Open-source and free to use, with all features available without any payment required.</p>
+                    </div>
                 </div>
             </div>
-
-            <!-- Lightbox Modal -->
-            <div id="lightbox" class="fixed inset-0 bg-black/90 z-50 hidden items-center justify-center">
-                <button id="closeLightbox" class="absolute top-4 right-4 text-white text-4xl hover:text-purple-500">&times;</button>
-                <button id="prevImage" class="absolute left-4 text-white text-4xl hover:text-purple-500">&lt;</button>
-                <button id="nextImage" class="absolute right-4 text-white text-4xl hover:text-purple-500">&gt;</button>
-                <img id="lightboxImage" src="" alt="Lightbox Image" class="max-h-[90vh] max-w-[90vw] object-contain">
-            </div>
-
-            <!-- Slider Gallery -->
-            <div class="relative overflow-hidden" data-aos="fade-up" data-aos-delay="100">
-                <!-- Container for proper button alignment -->
-                <div class="flex items-center">
-                    <!-- Navigation Button (Left) -->
-                    <button class="z-10 flex-shrink-0 bg-gray-900/80 hover:bg-gray-800 text-white p-3 rounded-full backdrop-blur-sm" onclick="slideGallery('left')">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                        </svg>
-                    </button>
-
-                    <!-- Slider Container -->
-                    <div class="flex-1 overflow-x-auto snap-x snap-mandatory hide-scrollbar mx-4" id="gallerySlider">
-                        <div class="flex gap-4">
-                            <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
-                                <img src="images/Preview.png" alt="Preview" class="w-full h-full object-cover">
-                            </div>
-                            <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
-                                <img src="images/Store.png" alt="Store" class="w-full h-full object-cover">
-                            </div>
-                            <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
-                                <img src="images/Alve's Town.png" alt="Alve's Town" class="w-full h-full object-cover">
-                            </div>
-                            <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
-                                <img src="images/Fluid Simulation.png" alt="Fluid Simulation" class="w-full h-full object-cover">
-                            </div>
-                            <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
-                                <img src="images/Neo Matrix 1.png" alt="Neo Matrix" class="w-full h-full object-cover">
-                            </div>
-                            <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
-                                <img src="images/Media Parallax.png" alt="Media Parallax" class="w-full h-full object-cover">
-                            </div>
-                            <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
-                                <img src="images/Living Room.png" alt="Living Room" class="w-full h-full object-cover">
-                            </div>
-                            <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
-                                <img src="images/Periodic Table.png" alt="Periodic Table" class="w-full h-full object-cover">
-                            </div>
-                            <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
-                                <img src="images/Inquisition.png" alt="Dragon Age: Inquisition" class="w-full h-full object-cover">
-                            </div>
-                            <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
-                                <img src="images/Simple System.png" alt="Simple System" class="w-full h-full object-cover">
+        </section>
+        <!-- Gallery Section -->
+        <section id="gallery" class="py-24">
+            <div class="container mx-auto px-6">
+                <h2 class="text-4xl font-bold text-center mb-16" data-aos="fade-up">Sucrose Screenshots</h2>
+                <!-- Main Screenshot Display -->
+                <div class="mb-16">
+                    <div id="mainImageContainer" class="aspect-video rounded-2xl overflow-hidden bg-gray-800 mb-4 cursor-pointer" data-aos="fade-up">
+                        <img id="mainImage" src="images/Preview.png" alt="Main Screenshot" class="w-full h-full object-cover">
+                    </div>
+                </div>
+                <!-- Lightbox Modal -->
+                <div id="lightbox" class="fixed inset-0 bg-black/90 z-50 hidden items-center justify-center">
+                    <button id="closeLightbox" class="absolute top-4 right-4 text-white text-4xl hover:text-purple-500">&times;</button>
+                    <button id="prevImage" class="absolute left-4 text-white text-4xl hover:text-purple-500">&lt;</button>
+                    <button id="nextImage" class="absolute right-4 text-white text-4xl hover:text-purple-500">&gt;</button>
+                    <img id="lightboxImage" src="" alt="Lightbox Image" class="max-h-[90vh] max-w-[90vw] object-contain">
+                </div>
+                <!-- Slider Gallery -->
+                <div class="relative overflow-hidden" data-aos="fade-up" data-aos-delay="100">
+                    <!-- Container for proper button alignment -->
+                    <div class="flex items-center">
+                        <!-- Navigation Button (Left) -->
+                        <button class="z-10 flex-shrink-0 bg-gray-900/80 hover:bg-gray-800 text-white p-3 rounded-full backdrop-blur-sm" onclick="slideGallery('left')">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                            </svg>
+                        </button>
+                        <!-- Slider Container -->
+                        <div class="flex-1 overflow-x-auto snap-x snap-mandatory hide-scrollbar mx-4" id="gallerySlider">
+                            <div class="flex gap-4">
+                                <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
+                                    <img src="images/Preview.png" alt="Preview" class="w-full h-full object-cover">
+                                </div>
+                                <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
+                                    <img src="images/Store.png" alt="Store" class="w-full h-full object-cover">
+                                </div>
+                                <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
+                                    <img src="images/Alve's Town.png" alt="Alve's Town" class="w-full h-full object-cover">
+                                </div>
+                                <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
+                                    <img src="images/Fluid Simulation.png" alt="Fluid Simulation" class="w-full h-full object-cover">
+                                </div>
+                                <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
+                                    <img src="images/Neo Matrix 1.png" alt="Neo Matrix" class="w-full h-full object-cover">
+                                </div>
+                                <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
+                                    <img src="images/Media Parallax.png" alt="Media Parallax" class="w-full h-full object-cover">
+                                </div>
+                                <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
+                                    <img src="images/Living Room.png" alt="Living Room" class="w-full h-full object-cover">
+                                </div>
+                                <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
+                                    <img src="images/Periodic Table.png" alt="Periodic Table" class="w-full h-full object-cover">
+                                </div>
+                                <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
+                                    <img src="images/Inquisition.png" alt="Dragon Age: Inquisition" class="w-full h-full object-cover">
+                                </div>
+                                <div class="screenshot-thumb flex-shrink-0 w-80 aspect-video rounded-xl overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all snap-start">
+                                    <img src="images/Simple System.png" alt="Simple System" class="w-full h-full object-cover">
+                                </div>
                             </div>
                         </div>
+                        <!-- Navigation Button (Right) -->
+                        <button class="z-10 flex-shrink-0 bg-gray-900/80 hover:bg-gray-800 text-white p-3 rounded-full backdrop-blur-sm" onclick="slideGallery('right')">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                            </svg>
+                        </button>
                     </div>
-
-                    <!-- Navigation Button (Right) -->
-                    <button class="z-10 flex-shrink-0 bg-gray-900/80 hover:bg-gray-800 text-white p-3 rounded-full backdrop-blur-sm" onclick="slideGallery('right')">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                        </svg>
-                    </button>
                 </div>
             </div>
-        </div>
-    </section>
-
-    <!-- Download Section -->
-    <section id="download" class="py-24 bg-gray-800">
-        <div class="container mx-auto px-6 text-center">
-            <h2 class="text-4xl font-bold mb-8" data-aos="fade-up">Ready to Transform Your Desktop?</h2>
-            <p class="text-xl text-gray-300 mb-12 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
-                Download Sucrose Wallpaper Engine today and experience your desktop in a whole new way.
-            </p>
-            <div class="flex flex-col md:flex-row justify-center gap-6" data-aos="fade-up" data-aos-delay="200">
-                <a href="https://apps.microsoft.com/detail/XP8JGPBHTJGLCQ?launch=true&mode=full" target="_blank" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-8 rounded-full inline-block transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-purple-500/25">
-                    Download from Microsoft Store
-                </a>
-                <a href="https://github.com/Taiizor/Sucrose?tab=readme-ov-file#download" target="_blank" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-4 px-8 rounded-full inline-block transition-all transform hover:scale-105 border-2 border-purple-500/50 hover:border-purple-500">
-                    Download from GitHub
-                </a>
-                <a href="https://github.com/Taiizor/Sucrose" target="_blank" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-8 rounded-full inline-block transition-all transform hover:scale-105">
-                    View Source Code
-                </a>
+        </section>
+        <!-- Download Section -->
+        <section id="download" class="py-24 bg-gray-800">
+            <div class="container mx-auto px-6 text-center">
+                <h2 class="text-4xl font-bold mb-8" data-aos="fade-up">Ready to Transform Your Desktop?</h2>
+                <p class="text-xl text-gray-300 mb-12 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100"> Download Sucrose Wallpaper Engine today and experience your desktop in a whole new way. </p>
+                <div class="flex flex-col md:flex-row justify-center gap-6" data-aos="fade-up" data-aos-delay="200">
+                    <a href="https://apps.microsoft.com/detail/XP8JGPBHTJGLCQ?launch=true&mode=full" target="_blank" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-8 rounded-full inline-block transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-purple-500/25"> Download from Microsoft Store </a>
+                    <a href="https://github.com/Taiizor/Sucrose?tab=readme-ov-file#download" target="_blank" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-4 px-8 rounded-full inline-block transition-all transform hover:scale-105 border-2 border-purple-500/50 hover:border-purple-500"> Download from GitHub </a>
+                    <a href="https://github.com/Taiizor/Sucrose" target="_blank" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-8 rounded-full inline-block transition-all transform hover:scale-105"> View Source Code </a>
+                </div>
             </div>
-        </div>
-    </section>
-
-    <!-- Scroll to Top Button -->
-    <button id="scrollToTop" class="fixed bottom-8 right-8 bg-purple-600 hover:bg-purple-700 text-white p-3 rounded-full shadow-lg transition-all transform hover:scale-110 opacity-0 invisible z-50">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
-        </svg>
-    </button>
-
-    <!-- Footer -->
-    <footer class="py-12 text-center text-gray-400">
-        <div class="container mx-auto px-6">
-            <p> Copyright ©2024 Sucrose Wallpaper Engine. All rights reserved.</p>
-        </div>
-    </footer>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
-    <script src="script.js"></script>
-
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-VZ7CHQBKF6"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-VZ7CHQBKF6');
-    </script>
+        </section>
+        <!-- Scroll to Top Button -->
+        <button id="scrollToTop" class="fixed bottom-8 right-8 bg-purple-600 hover:bg-purple-700 text-white p-3 rounded-full shadow-lg transition-all transform hover:scale-110 opacity-0 invisible z-50">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+            </svg>
+        </button>
+        <!-- Footer -->
+        <footer class="py-12 text-center text-gray-400">
+            <div class="container mx-auto px-6">
+                <p> Copyright ©2024 Sucrose Wallpaper Engine. All rights reserved.</p>
+            </div>
+        </footer>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
+        <script src="script.js"></script>
+        <!-- Microsoft Clarity -->
+        <script type="text/javascript">
+            (function(c, l, a, r, i, t, y) {
+                c[a] = c[a] || function() {
+                    (c[a].q = c[a].q || []).push(arguments)
+                };
+                t = l.createElement(r);
+                t.async = 1;
+                t.src = "https://www.clarity.ms/tag/" + i;
+                y = l.getElementsByTagName(r)[0];
+                y.parentNode.insertBefore(t, y);
+            })(window, document, "clarity", "script", "pl85dw6k1x");
+        </script>
+        <!-- /Microsoft Clarity -->
+        <!-- Google tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=G-5DZ26CZWDD"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
 
-    <!--<script>
-        (function(w, d, s, l, i) {
-            w[l] = w[l] || [];
-            w[l].push({
-                'gtm.start': new Date().getTime(),
-                event: 'gtm.js'
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag('js', new Date());
+            gtag('config', 'G-5DZ26CZWDD');
+        </script>
+        <!--<script>
+			(function(w, d, s, l, i) {
+				w[l] = w[l] || [];
+				w[l].push({
+					'gtm.start': new Date().getTime(),
+					event: 'gtm.js'
+				});
+				var f = d.getElementsByTagName(s)[0],
+					j = d.createElement(s),
+					dl = l != 'dataLayer' ? '&l=' + l : '';
+				j.async = true;
+				j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+				f.parentNode.insertBefore(j, f);
+			})(window, document, 'script', 'dataLayer', 'G-5DZ26CZWDD');
+		</script>-->
+        <!--<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=G-5DZ26CZWDD" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>-->
+        <!-- Google tag (gtag.js) -->
+        <!-- Yandex.Metrika counter -->
+        <script type="text/javascript">
+            (function(m, e, t, r, i, k, a) {
+                m[i] = m[i] || function() {
+                    (m[i].a = m[i].a || []).push(arguments)
+                };
+                m[i].l = 1 * new Date();
+                for (var j = 0; j < document.scripts.length; j++) {
+                    if (document.scripts[j].src === r) {
+                        return;
+                    }
+                }
+                k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
+            })
+            (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+            ym(99351025, "init", {
+                webvisor: true,
+                clickmap: true,
+                trackLinks: true,
+                accurateTrackBounce: true
             });
-            var f = d.getElementsByTagName(s)[0],
-                j = d.createElement(s),
-                dl = l != 'dataLayer' ? '&l=' + l : '';
-            j.async = true;
-            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-            f.parentNode.insertBefore(j, f);
-        })(window, document, 'script', 'dataLayer', 'G-VZ7CHQBKF6');
-    </script>-->
-
-    <!--<noscript>
-        <iframe src="https://www.googletagmanager.com/ns.html?id=G-VZ7CHQBKF6" height="0" width="0" style="display:none;visibility:hidden"></iframe>
-    </noscript>-->
-    <!-- Google tag (gtag.js) -->
-
-    <!-- Yandex.Metrika counter -->
-    <script type="text/javascript" >
-        (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
-        m[i].l=1*new Date();
-        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
-        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
-        (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
-
-        ym(99213732, "init", {
-            webvisor: true,
-            clickmap: true,
-            trackLinks: true,
-            accurateTrackBounce: true
-        });
-    </script>
-    <noscript>
-        <div>
-            <img src="https://mc.yandex.ru/watch/99213732" style="position:absolute; left:-9999px;" alt="Yandex Metrika" />
-        </div>
-    </noscript>
-    <!-- Yandex.Metrika counter -->
-</body>
+        </script>
+        <noscript>
+            <div>
+                <img src="https://mc.yandex.ru/watch/99351025" style="position:absolute; left:-9999px;" alt="Yandex Metrika" />
+            </div>
+        </noscript>
+        <!-- Yandex.Metrika counter -->
+    </body>
 </html>
\ No newline at end of file
