diff --git a/README.md b/README.md
index be2507e..a7cd907 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,5 @@
 # ObsidianOS Website
 The official ObsidianOS website. hosted [here](https://obsidianos.xyz) with Github Pages. feel free to contribute
+
+## Extra Credits
+- "Apps Overview" background image - [VanillaOS](https://github.com/Vanilla-OS/website/blob/v2/public/assets/images/backgrounds/apps-overview.png)
diff --git a/assets/apps-overview.png b/assets/apps-overview.png
new file mode 100644
index 0000000..f2b03e0
Binary files /dev/null and b/assets/apps-overview.png differ
diff --git a/contest-cosmic.png b/assets/contest-cosmic.png
similarity index 100%
rename from contest-cosmic.png
rename to assets/contest-cosmic.png
diff --git a/contest-kde.png b/assets/contest-kde.png
similarity index 100%
rename from contest-kde.png
rename to assets/contest-kde.png
diff --git a/download.html b/download.html
index 512eba4..b63864d 100644
--- a/download.html
+++ b/download.html
@@ -1,56 +1,62 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>You should be redirected...</title>
-    <link rel="stylesheet" href="styles.css">
-    <link rel="icon" href="/logo.svg" type="image/svg+xml">
-    <meta http-equiv="refresh" content="0; url=https://files.obsidianos.xyz/" />
-</head>
-<body>
-    <div class="background-container"></div>
-    <div class="mouse-follower mouse-follower-1"></div>
-    <div class="mouse-follower mouse-follower-2"></div>
-    <div class="mouse-follower mouse-follower-3"></div>
-    <nav>
-        <div class="nav-container">
-            <div class="nav-left">
-                <img src="logo.svg" alt="ObsidianOS Logo" class="nav-logo">
-                <a href="/" class="nav-title">ObsidianOS</a>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>You should be redirected...</title>
+        <link rel="stylesheet" href="styles.css" />
+        <link rel="icon" href="/logo.svg" type="image/svg+xml" />
+        <meta
+            http-equiv="refresh"
+            content="0; url=https://files.obsidianos.xyz/"
+        />
+    </head>
+    <body>
+        <div class="background-container"></div>
+        <div class="mouse-follower mouse-follower-1"></div>
+        <div class="mouse-follower mouse-follower-2"></div>
+        <div class="mouse-follower mouse-follower-3"></div>
+        <nav>
+            <div class="nav-container">
+                <div class="nav-left">
+                    <img
+                        src="logo.svg"
+                        alt="ObsidianOS Logo"
+                        class="nav-logo"
+                    />
+                    <a href="/" class="nav-title">ObsidianOS</a>
+                </div>
+                <div class="nav-links">
+                    <a href="/download.html">Install</a>
+                    <a href="https://wiki.obsidianos.xyz/">Wiki</a>
+                    <a
+                        href="https://github.com/Obsidian-OS/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >GitHub</a
+                    >
+                    <a
+                        href="https://www.reddit.com/r/obsidian_OS/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >Reddit</a
+                    >
+                    <a
+                        href="https://dsc.gg/obsidianos"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >Discord</a
+                    >
+                </div>
             </div>
-            <div class="nav-links">
-                <a href="/download.html">Install</a>
-                <a href="https://wiki.obsidianos.xyz/">Wiki</a>
-                <a href="https://github.com/Obsidian-OS/" target="_blank" rel="noopener noreferrer">GitHub</a>
-                <a href="https://www.reddit.com/r/obsidian_OS/" target="_blank" rel="noopener noreferrer">Reddit</a>
-                <a href="https://dsc.gg/obsidianos" target="_blank" rel="noopener noreferrer">Discord</a>
-            </div>
-        </div>
-    </nav>
-    <main>
-        <header>
-            <h1 class="main-title">You should be redirected soon...</h1>
-            <p class="subtitle">Get up and running with the future of Arch Linux.</p>
-        </header>
-    </main>
-    <footer>
-        <p>&copy; 2026 ObsidianOS Project</p>
-        <div class="footer-links">
-            <a href="https://wiki.obsidianos.xyz/">Wiki</a>
-            <a href="https://github.com/Obsidian-OS/" target="_blank" rel="noopener noreferrer">GitHub</a>
-        </div>
-    </footer>
-    <script>
-        const followers = document.querySelectorAll('.mouse-follower');
-        document.addEventListener('mousemove', (e) => {
-            followers.forEach((follower, index) => {
-                setTimeout(() => {
-                    follower.style.left = e.pageX + 'px';
-                    follower.style.top = e.pageY + 'px';
-                }, index * 100);
-            });
-        });
-    </script>
-</body>
+        </nav>
+        <main>
+            <header>
+                <h1 class="main-title">You should be redirected soon...</h1>
+                <p class="subtitle">
+                    Get up and running with the future of GNU/Linux.
+                </p>
+            </header>
+        </main>
+    </body>
 </html>
diff --git a/git.html b/git.html
index 7650a2b..7de4b06 100644
--- a/git.html
+++ b/git.html
@@ -1,68 +1,56 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ObsidianOS Git</title>
-    <link rel="stylesheet" href="https://obsidianos.xyz/styles.css">
-    <link rel="icon" href="/logo.svg" type="image/svg+xml">
-</head>
-<body>
-    <div class="background-container"></div>
-    <div class="mouse-follower mouse-follower-1"></div>
-    <div class="mouse-follower mouse-follower-2"></div>
-    <div class="mouse-follower mouse-follower-3"></div>
-    <nav>
-        <div class="nav-container">
-            <div class="nav-left">
-                <img src="logo.svg" alt="ObsidianOS Logo" class="nav-logo">
-                <a href="/" class="nav-title">ObsidianOS</a>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>You should be redirected...</title>
+        <link rel="stylesheet" href="styles.css" />
+        <link rel="icon" href="/logo.svg" type="image/svg+xml" />
+        <meta
+            http-equiv="refresh"
+            content="0; url=https://github.com/Obsidian-OS"
+        />
+    </head>
+    <body>
+        <div class="background-container"></div>
+        <nav>
+            <div class="nav-container">
+                <div class="nav-left">
+                    <img
+                        src="logo.svg"
+                        alt="ObsidianOS Logo"
+                        class="nav-logo"
+                    />
+                    <a href="/" class="nav-title">ObsidianOS</a>
+                </div>
+                <div class="nav-links">
+                    <a href="/download.html">Install</a>
+                    <a href="https://wiki.obsidianos.xyz/">Wiki</a>
+                    <a
+                        href="https://github.com/Obsidian-OS/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >GitHub</a
+                    >
+                    <a
+                        href="https://www.reddit.com/r/obsidian_OS/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >Reddit</a
+                    >
+                    <a
+                        href="https://dsc.gg/obsidianos"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >Discord</a
+                    >
+                </div>
             </div>
-            <div class="nav-links">
-                <a href="https://files.obsidianos.xyz/">Downloads</a>
-                <a href="https://wiki.obsidianos.xyz/">Wiki</a>
-                <a href="https://obsidianos.xyz/git" rel="noopener noreferrer">Git</a>
-                <a href="https://www.reddit.com/r/obsidian_OS/" target="_blank" rel="noopener noreferrer">Reddit</a>
-                <a href="https://dsc.gg/obsidianos" target="_blank" rel="noopener noreferrer">Discord</a>
-            </div>
-        </div>
-    </nav>
-    <main>
-        <header>
-            <img src="logo.svg" alt="ObsidianOS Logo" class="logo">
-            <h1 class="main-title">Git</h1>
-            <p class="subtitle">Free and Open Source Software!</p>
-        </header>
-        <section class="features">
-            <div id="repo-list"></div>
-        </section>
-        <section class="community">
-            <h2>Join the Community</h2>
-            <p>Have questions or want to connect with other users? Join our community on Reddit or Discord.</p>
-            <div class="community-links">
-                <a href="https://www.reddit.com/r/obsidian_OS/" target="_blank" rel="noopener noreferrer" class="community-link">Reddit</a>
-                <a href="https://dsc.gg/obsidianos" target="_blank" rel="noopener noreferrer" class="community-link">Discord</a>
-            </div>
-        </section>
-    </main>
-    <footer>
-        <p>&copy; 2025 ObsidianOS Project</p>
-        <div class="footer-links">
-            <a href="https://wiki.obsidianos.xyz/">Wiki</a>
-            <a href="https://github.com/Obsidian-OS/" target="_blank" rel="noopener noreferrer">GitHub</a>
-        </div>
-    </footer>
-    <script>
-        const followers = document.querySelectorAll('.mouse-follower');
-        document.addEventListener('mousemove', (e) => {
-            followers.forEach((follower, index) => {
-                setTimeout(() => {
-                    follower.style.left = e.pageX + 'px';
-                    follower.style.top = e.pageY + 'px';
-                }, index * 100);
-            });
-        });
-    </script>
-    <script src="/git.js"></script>
-</body>
+        </nav>
+        <main>
+            <header>
+                <h1 class="main-title">You should be redirected soon...</h1>
+            </header>
+        </main>
+    </body>
 </html>
diff --git a/index.html b/index.html
index 9976dc4..a6c1e89 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,14 @@
 <!doctype html>
 <html lang="en">
+    <!--
+    oh wow you're reading the source code, lol
+    if you're not reading this file locally
+    and instead reading from devtools, this
+    website's source code is on github.
+    https://git.obsidianos.xyz/Obsidian-OS.github.io
+
+    - neo
+    -->
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,10 +17,6 @@
         <link rel="icon" href="/logo.svg" type="image/svg+xml" />
     </head>
     <body>
-        <div class="background-container"></div>
-        <div class="mouse-follower mouse-follower-1"></div>
-        <div class="mouse-follower mouse-follower-2"></div>
-        <div class="mouse-follower mouse-follower-3"></div>
         <nav>
             <div class="nav-container">
                 <div class="nav-left">
@@ -46,27 +51,42 @@
             </div>
         </nav>
         <main>
-            <header>
-                <img src="logo.svg" alt="ObsidianOS Logo" class="logo" />
-                <h1 class="main-title">ObsidianOS</h1>
-                <p class="subtitle">
-                    The GNU/Linux distribution with A/B Partitioning.
-                </p>
+            <header class="hero-section">
+                <div class="hero-content">
+                    <div class="hero-logo-container">
+                        <img
+                            src="logo.svg"
+                            alt="ObsidianOS Logo"
+                            class="hero-logo"
+                        />
+                        <img
+                            src="https://files.obsidianos.xyz/oboslogo-gif-dark.gif"
+                            alt="ObsidianOS Animated Logo"
+                            class="hero-logo-gif"
+                        />
+                    </div>
+                    <div class="hero-text">
+                        <h1 class="main-title">ObsidianOS</h1>
+                        <p class="subtitle">
+                            The GNU/Linux distribution with A/B Partitioning.
+                        </p>
+                    </div>
+                </div>
             </header>
             <section class="features">
                 <div class="feature-card">
                     <h2>A/B Partitioning</h2>
                     <p>
-                        With A/B partitioning, updates are atomic. If an update
-                        fails, you can simply reboot into the previous
+                        With A/B partitioning, updates are atomic (optional). If
+                        an update fails, you can simply reboot into the previous
                         partition, ensuring your system is always bootable.
                     </p>
                 </div>
                 <div class="feature-card">
                     <h2>Multiple bases</h2>
                     <p>
-                        Enjoy the power and flexibility of Arch, Gentoo, or even
-                        Void, with the power of A/B Partitioning
+                        Enjoy the power and flexibility of Arch, Debian, Gentoo,
+                        or even Void, with the power of A/B Partitioning
                     </p>
                 </div>
                 <div class="feature-card">
@@ -78,9 +98,70 @@ <h2>Stable and Reliable</h2>
                     </p>
                 </div>
             </section>
+            <section class="base-section">
+                <div class="base-content">
+                    <div class="base-text">
+                        <h2>Choose your own base</h2>
+                        <p>
+                            Whether you like Arch, Debian, Gentoo or even Void,
+                            there's an ObsidianOS Edition of it!
+                        </p>
+                    </div>
+                    <div class="base-images">
+                        <img
+                            src="https://github.com/archlinux.png"
+                            class="base-img base-img-1"
+                            alt="Arch Linux"
+                        />
+                        <img
+                            src="https://github.com/gentoo.png"
+                            class="base-img base-img-2"
+                            alt="Gentoo"
+                        />
+                        <img
+                            src="https://github.com/void-linux.png"
+                            class="base-img base-img-3"
+                            alt="Void"
+                        />
+                        <img
+                            src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Openlogo-debianV2.svg/960px-Openlogo-debianV2.svg.png"
+                            class="base-img base-img-4"
+                            alt="Debian"
+                        />
+                    </div>
+                </div>
+            </section>
+            <section class="mutable-section">
+                <div class="mutable-content">
+                    <div class="mutable-text">
+                        <h2>No enforced immutability</h2>
+                        <p>
+                            Yes! Immutability is completely optional, and even
+                            atomicity! you can enjoy A/B partitions while being
+                            on the bleeding edge!
+                        </p>
+                    </div>
+                    <div class="mutable-images">
+                        <img
+                            src="https://raw.githubusercontent.com/KDE/breeze-icons/refs/heads/master/icons/devices/64/drive-harddisk.svg"
+                            class="mutable-img mutable-img-1"
+                            alt="H"
+                        />
+                        <img
+                            src="https://raw.githubusercontent.com/KDE/breeze-icons/refs/heads/master/icons/emblems/22/emblem-unlocked.svg"
+                            class="mutable-img mutable-img-3"
+                            alt="Mutable"
+                        />
+                    </div>
+                </div>
+            </section>
+            <section class="apps-section">
+                <div class="apps-content">
+                    <h2>Access a major list of apps, no compromise.</h2>
+                </div>
+            </section>
             <section class="featured-on">
-                <h2>As featured on:</h2>
-                <br />
+                <h2>As featured on</h2>
                 <div class="desktop-screenshots">
                     <div class="laptop-box">
                         <a
@@ -133,12 +214,11 @@ <h2>As featured on:</h2>
             </section>
             <section class="wallpaper-contest-winners">
                 <h2>Monthly Wallpaper Contest Winners!</h2>
-                <br />
-                <!-- a very very cheap way of spacing, lmao -->
+                <h5>December 2025, Join contest on Discord.</h5>
                 <div class="desktop-screenshots">
                     <div class="laptop-box">
                         <a
-                            href="/contest-kde.png"
+                            href="/assets/contest-kde.png"
                             title="Download Wallpaper"
                             target="_blank"
                             ><div class="floating-logo floating-logo-left">
@@ -149,17 +229,19 @@ <h2>Monthly Wallpaper Contest Winners!</h2>
                         ></a>
                         <div class="screen">
                             <img
-                                src="/contest-kde.png"
+                                src="/assets/contest-kde.png"
                                 alt="KDE Wallpaper Winner"
                             />
                         </div>
                         <div class="base">
-                            <a href="https://github.com/mostypc123">@mostypc123</a>
+                            <a href="https://github.com/mostypc123"
+                                >@mostypc123</a
+                            >
                         </div>
                     </div>
                     <div class="laptop-box">
                         <a
-                            href="/contest-kde.png"
+                            href="/assets/contest-kde.png"
                             title="Download Wallpaper"
                             target="_blank"
                             ><div class="floating-logo floating-logo-right">
@@ -170,7 +252,7 @@ <h2>Monthly Wallpaper Contest Winners!</h2>
                         ></a>
                         <div class="screen">
                             <img
-                                src="/contest-cosmic.png"
+                                src="/assets/contest-cosmic.png"
                                 alt="COSMIC Wallpaper Winner"
                             />
                         </div>
@@ -205,28 +287,27 @@ <h2>Join the Community</h2>
             </section>
         </main>
         <footer>
-            <p>&copy; 2026 ObsidianOS Project</p>
-            <div class="footer-links">
-                <a href="https://wiki.obsidianos.xyz/">Wiki</a>
-                <a
-                    href="https://github.com/Obsidian-OS/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >GitHub</a
-                >
+            <div class="footer-content">
+                <div class="footer-left">
+                    <p class="footer-copyright">
+                        &copy; 2026 ObsidianOS Project
+                    </p>
+                    <p class="footer-tagline">
+                        The GNU/Linux distribution with A/B Partitioning
+                    </p>
+                </div>
+                <div class="footer-links">
+                    <a href="https://wiki.obsidianos.xyz/">Wiki</a>
+                    <a
+                        href="https://github.com/Obsidian-OS/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >GitHub</a
+                    >
+                </div>
             </div>
         </footer>
         <script>
-            const followers = document.querySelectorAll(".mouse-follower");
-            document.addEventListener("mousemove", (e) => {
-                followers.forEach((follower, index) => {
-                    setTimeout(() => {
-                        follower.style.left = e.pageX + "px";
-                        follower.style.top = e.pageY + "px";
-                    }, index * 100);
-                });
-            });
-
             function openurl(url) {
                 window.open(url, "_blank");
             }
diff --git a/styles.css b/styles.css
index be33c75..8ad405e 100644
--- a/styles.css
+++ b/styles.css
@@ -1,13 +1,14 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");
 
 :root {
-    --primary-bg: #0a0a0f;
-    --accent-blue: #1f6feb;
+    --primary-bg: #242424;
+    --card-bg: #2d2d2d;
+    --accent-blue: #3584e4;
     --accent-purple: #9b59b6;
-    --text-primary: #e6e8eb;
-    --text-secondary: #8b949e;
-    --shadow-dark: rgba(0, 0, 0, 0.4);
-    --card-bg: rgba(16, 16, 24, 0.5);
+    --text-primary: #ffffff;
+    --text-secondary: #deddda;
+    --shadow-dark: rgba(0, 0, 0, 0.2);
+    --border-color: #3d3d3d;
 }
 
 * {
@@ -16,8 +17,16 @@
     padding: 0;
 }
 
+a {
+    color: inherit;
+}
+
+a:visited {
+    color: inherit;
+}
+
 body {
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     background-color: var(--primary-bg);
     color: var(--text-primary);
     line-height: 1.6;
@@ -35,44 +44,11 @@ body {
     z-index: -1;
 }
 
-.mouse-follower {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(50px);
-    pointer-events: none;
-    z-index: -1;
-    transition: all 0.2s ease-out;
-}
-
-.mouse-follower-1 {
-    width: 400px;
-    height: 400px;
-    background: radial-gradient(circle, rgba(31, 111, 235, 0.15) 0%, transparent 70%);
-    transform: translate(-50%, -50%);
-}
-
-.mouse-follower-2 {
-    width: 300px;
-    height: 300px;
-    background: radial-gradient(circle, rgba(155, 89, 182, 0.15) 0%, transparent 70%);
-    transform: translate(-50%, -50%);
-    transition-delay: 0.1s;
-}
-
-.mouse-follower-3 {
-    width: 200px;
-    height: 200px;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
-    transform: translate(-50%, -50%);
-    transition-delay: 0.2s;
-}
-
 nav {
     width: 100%;
     padding: 1.5rem 2rem;
-    background: rgba(10, 10, 15, 0.8);
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--card-bg);
+    border-bottom: 1px solid var(--border-color);
     position: fixed;
     top: 0;
     left: 0;
@@ -120,6 +96,35 @@ nav {
     color: var(--accent-blue);
 }
 
+.nav-links a[href="https://files.obsidianos.xyz/"]:hover {
+    background: linear-gradient(
+        90deg,
+        #667eea 0%,
+        #764ba2 25%,
+        #f093fb 50%,
+        #667eea 75%,
+        #764ba2 100%
+    );
+    background-size: 300% 300%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: gradient-animation 3s ease infinite;
+    color: transparent;
+}
+
+@keyframes gradient-animation {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
 main {
     padding: 8rem 2rem 4rem;
     max-width: 1200px;
@@ -127,36 +132,74 @@ main {
 }
 
 .hero-section {
-    text-align: center;
     margin-bottom: 6rem;
+    padding: 2rem 0;
 }
 
 .hero-content {
-    max-width: 800px;
+    max-width: 1000px;
     margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 3rem;
+    align-items: center;
+}
+
+.hero-logo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.hero-logo-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 220px;
+    height: 220px;
 }
 
 .hero-logo {
-    width: 120px;
-    margin-bottom: 1.5rem;
-    filter: drop-shadow(0 0 20px rgba(155, 89, 182, 0.5));
+    width: 180px;
+    position: absolute;
+}
+
+.hero-logo-container:hover .hero-logo {
+    opacity: 0;
+}
+
+.hero-logo-gif {
+    position: absolute;
+    width: 220px;
+    height: 220px;
+    opacity: 0;
+    background-color: transparent;
+    mix-blend-mode: lighten;
+    object-fit: contain;
+}
+
+.hero-logo-container:hover .hero-logo-gif {
+    opacity: 1;
+}
+
+.hero-text {
+    padding-left: 2rem;
 }
 
 .hero-title {
-    font-size: 4rem;
+    font-size: 3.5rem;
     font-weight: 700;
-    letter-spacing: -0.05em;
-    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple), var(--accent-blue));
-    background-size: 200% 200%;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: var(--text-primary);
     margin-bottom: 1rem;
-    animation: gradient-animation 2s ease infinite;
+    line-height: 1.1;
 }
 
 .hero-subtitle {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
     color: var(--text-secondary);
+    line-height: 1.5;
+    margin-bottom: 2rem;
 }
 
 .feature-section,
@@ -177,12 +220,8 @@ main {
     font-size: 3rem;
     font-weight: 700;
     letter-spacing: -0.02em;
-    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple), var(--accent-blue));
-    background-size: 200% 200%;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: var(--accent-blue);
     margin-bottom: 1.5rem;
-    animation: gradient-animation 2s ease infinite;
 }
 
 .section-description {
@@ -206,24 +245,8 @@ header {
     font-size: 4rem;
     font-weight: 700;
     letter-spacing: -0.05em;
-    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple), var(--accent-blue));
-    background-size: 200% 200%;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: var(--accent-blue);
     margin-bottom: 1rem;
-    animation: gradient-animation 2s ease infinite;
-}
-
-@keyframes gradient-animation {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
 }
 
 .subtitle {
@@ -233,8 +256,8 @@ header {
 
 .features {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 1.5rem;
     margin-bottom: 4rem;
 }
 
@@ -249,8 +272,10 @@ header {
     background: var(--card-bg);
     padding: 2rem;
     border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 1px solid var(--border-color);
+    transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
 }
 
 .install-card:hover {
@@ -276,7 +301,7 @@ pre {
     background: var(--card-bg);
     padding: 2rem;
     border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--border-color);
     margin-bottom: 4rem;
 }
 
@@ -284,6 +309,53 @@ pre {
     text-align: center;
     margin-bottom: 4rem;
     margin-top: 4rem;
+    padding: 3rem 2rem;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.community h2 {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+    color: var(--accent-blue);
+    font-weight: 600;
+}
+
+.community p {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    margin-bottom: 2.5rem;
+    line-height: 1.6;
+}
+
+.community-links {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+}
+
+.community-link {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.8rem 1.8rem;
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    background: var(--primary-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.community-link:hover {
+    border-color: var(--accent-blue);
+    color: var(--accent-blue);
 }
 
 .community h2 {
@@ -305,10 +377,12 @@ pre {
     font-weight: 600;
     color: var(--text-primary);
     background: var(--card-bg);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--border-color);
     border-radius: 8px;
     text-decoration: none;
-    transition: background-color 0.3s ease, color 0.3s ease;
+    transition:
+        background-color 0.3s ease,
+        color 0.3s ease;
 }
 
 .community-link:hover {
@@ -318,15 +392,260 @@ pre {
 
 .feature-card {
     background: var(--card-bg);
-    padding: 2rem;
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 2.5rem;
+    border-radius: 16px;
+    border: 1px solid var(--border-color);
 }
 
 .feature-card h2 {
-    font-size: 1.5rem;
+    font-size: 1.4rem;
     margin-bottom: 1rem;
-    color: var(--accent-blue);
+    color: var(--text-primary);
+    font-weight: 600;
+}
+
+.feature-card p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    font-size: 1rem;
+}
+
+.base-section {
+    margin: 6rem calc(-50vw + 50%);
+    margin-left: -50vw;
+    margin-right: -50vw;
+    background: linear-gradient(135deg, #2d2d2d 0%, #1e1e1e 100%);
+    background-size: 200% 200%;
+    animation: gradientShift 3s ease infinite;
+    position: relative;
+    overflow: hidden;
+    height: 100vh;
+    min-height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mutable-section {
+    margin: 6rem calc(-50vw + 50%);
+    margin-left: -50vw;
+    margin-right: -50vw;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    background-size: 200% 200%;
+    animation: gradientShift 3s ease infinite;
+    position: relative;
+    overflow: hidden;
+    height: 100vh;
+    min-height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.base-content,
+.mutable-content {
+    text-align: center;
+    max-width: 900px;
+    padding: 0 2rem;
+    position: relative;
+    z-index: 2;
+}
+
+.base-content h2,
+.mutable-content h2 {
+    font-size: 3.5rem;
+    margin-bottom: 1.5rem;
+    color: var(--text-primary);
+    font-weight: 700;
+}
+
+.base-content p,
+.mutable-content p {
+    font-size: 1.4rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+.base-section::before,
+.mutable-section::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(
+            circle at 20% 50%,
+            rgba(53, 132, 228, 0.1) 0%,
+            transparent 50%
+        ),
+        radial-gradient(
+            circle at 80% 50%,
+            rgba(155, 89, 182, 0.1) 0%,
+            transparent 50%
+        );
+    z-index: 1;
+}
+
+.apps-section {
+    position: relative;
+    overflow: hidden;
+    height: 100vh;
+    min-height: 600px;
+    margin: 6rem calc(-50vw + 50%);
+    margin-left: -50vw;
+    margin-right: -50vw;
+}
+
+.apps-content {
+    position: relative;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(36, 36, 36, 0.4);
+}
+
+.apps-content h2 {
+    font-size: 4rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    text-align: center;
+    max-width: 900px;
+    padding: 0 2rem;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+.apps-section::before {
+    content: "";
+    position: absolute;
+    top: -50px;
+    left: -50px;
+    right: -50px;
+    bottom: -50px;
+    background-image: url("/assets/apps-overview.png");
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    z-index: 1;
+}
+
+.featured-on {
+    margin: 6rem calc(-50vw + 50%);
+    background: linear-gradient(135deg, #2d1b69 0%, #0f0f23 100%);
+    background-size: 200% 200%;
+    animation: gradientShift 3s ease infinite;
+    position: relative;
+    overflow: hidden;
+    height: 100vh;
+    min-height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.featured-on h2 {
+    position: absolute;
+    top: 6rem;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 3.5rem;
+    color: var(--text-primary);
+    font-weight: 700;
+    z-index: 2;
+}
+
+.featured-on .desktop-screenshots {
+    margin-top: 2rem;
+    position: relative;
+    z-index: 2;
+}
+
+.featured-on::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(
+            circle at 20% 50%,
+            rgba(53, 132, 228, 0.15) 0%,
+            transparent 50%
+        ),
+        radial-gradient(
+            circle at 80% 50%,
+            rgba(155, 89, 182, 0.15) 0%,
+            transparent 50%
+        );
+    z-index: 1;
+}
+
+.wallpaper-contest-winners {
+    margin: 6rem calc(-50vw + 50%);
+    margin-left: -50vw;
+    margin-right: -50vw;
+    background: linear-gradient(135deg, #0a1929 0%, #1a2332 100%);
+    background-size: 200% 200%;
+    animation: gradientShift 3s ease infinite;
+    position: relative;
+    overflow: hidden;
+    height: 100vh;
+    min-height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.wallpaper-contest-winners h2 {
+    position: absolute;
+    top: 6rem;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 3.5rem;
+    color: var(--text-primary);
+    font-weight: 700;
+    z-index: 2;
+}
+
+.wallpaper-contest-winners h5 {
+    position: absolute;
+    top: 16rem;
+    left: 50%;
+    transform: translateX(-50%);
+    color: var(--text-primary);
+    font-weight: 700;
+    z-index: 2;
+}
+
+.wallpaper-contest-winners .desktop-screenshots {
+    margin-top: 2rem;
+    position: relative;
+    z-index: 2;
+}
+
+.wallpaper-contest-winners::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+        radial-gradient(
+            circle at 20% 50%,
+            rgba(53, 132, 228, 0.15) 0%,
+            transparent 50%
+        ),
+        radial-gradient(
+            circle at 80% 50%,
+            rgba(155, 89, 182, 0.15) 0%,
+            transparent 50%
+        );
+    z-index: 1;
 }
 
 .download-btn {
@@ -336,16 +655,15 @@ pre {
     font-size: 1.2rem;
     font-weight: 600;
     color: #fff;
-    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple), var(--accent-blue));
-    background-size: 200% 200%;
+    background: var(--accent-blue);
     border: none;
     border-radius: 8px;
     text-decoration: none;
-    transition: transform 0.3s ease;
+    transition: background-color 0.3s ease;
 }
 
 .download-btn:hover {
-    animation: gradient-animation 2s ease infinite;
+    background-color: var(--accent-purple);
 }
 
 .download-btn:last-child {
@@ -353,27 +671,53 @@ pre {
 }
 
 footer {
-    padding: 2rem;
-    text-align: center;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 3rem 2rem;
+    background: var(--card-bg);
+    border-top: 1px solid var(--border-color);
     margin-top: 4rem;
 }
 
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.footer-left {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.footer-copyright {
+    color: var(--text-primary);
+    font-weight: 500;
+    font-size: 1rem;
+}
+
+.footer-tagline {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
 .footer-links {
-    margin-top: 1rem;
     display: flex;
-    justify-content: center;
-    gap: 1.5rem;
+    gap: 2rem;
 }
 
 .footer-links a {
     color: var(--text-secondary);
     text-decoration: none;
+    font-weight: 500;
     transition: color 0.3s ease;
 }
 
 .footer-links a:hover {
-    color: var(--accent-purple);
+    color: var(--accent-blue);
 }
 
 .desktop-screenshots {
@@ -422,17 +766,11 @@ footer {
     position: relative;
     width: 100%;
     height: 240px;
-    border-radius: 0 0 0 0;
-    box-shadow: 0 0 15px var(--accent-blue);
-    padding: 4px;
-    background-clip: padding-box;
-    border: 4px solid transparent;
-    background-origin: border-box;
-    background-clip: content-box, border-box;
-    background-image: linear-gradient(#111118), linear-gradient(270deg, var(--accent-blue), var(--accent-purple), var(--accent-blue));
-    background-size: 600% 600%;
-    animation: gradient-animation 15s ease infinite;
+    border-radius: 12px 12px 0 0;
+    border: 1px solid var(--border-color);
+    border-bottom: none;
     overflow: hidden;
+    background: var(--card-bg);
 }
 
 .floating-logo {
@@ -440,37 +778,64 @@ footer {
     top: 10px;
     width: 70px;
     height: 70px;
-    animation: float-left 6s ease-in-out infinite;
+    animation: float-left 8s ease-in-out infinite;
     z-index: 10;
+    transition: filter 0.3s ease;
 }
 
 .floating-logo-left {
     left: -50px;
     --rotation: -15deg;
     animation-name: float-left;
+    filter: drop-shadow(0 0 15px rgba(53, 132, 228, 0.6));
 }
 
 .floating-logo-right {
     right: -50px;
     --rotation: 15deg;
     animation-name: float-right;
+    filter: drop-shadow(0 0 15px rgba(155, 89, 182, 0.6));
 }
 
 @keyframes float-left {
-    0%, 100% {
-        transform: translateY(0) rotate(calc(var(--rotation) - 5deg));
+    0% {
+        transform: translateY(0) rotate(calc(var(--rotation) - 8deg)) scale(1);
+    }
+    25% {
+        transform: translateY(-15px) rotate(calc(var(--rotation) - 3deg))
+            scale(1.05);
     }
     50% {
-        transform: translateY(-10px) rotate(calc(var(--rotation) + 5deg));
+        transform: translateY(-8px) rotate(calc(var(--rotation) + 5deg))
+            scale(1.02);
+    }
+    75% {
+        transform: translateY(-20px) rotate(calc(var(--rotation) + 2deg))
+            scale(1.08);
+    }
+    100% {
+        transform: translateY(0) rotate(calc(var(--rotation) - 8deg)) scale(1);
     }
 }
 
 @keyframes float-right {
-    0%, 100% {
-        transform: translateY(0) rotate(calc(var(--rotation) + 5deg));
+    0% {
+        transform: translateY(0) rotate(calc(var(--rotation) + 8deg)) scale(1);
+    }
+    25% {
+        transform: translateY(-20px) rotate(calc(var(--rotation) + 3deg))
+            scale(1.08);
     }
     50% {
-        transform: translateY(-10px) rotate(calc(var(--rotation) - 5deg));
+        transform: translateY(-8px) rotate(calc(var(--rotation) - 5deg))
+            scale(1.02);
+    }
+    75% {
+        transform: translateY(-15px) rotate(calc(var(--rotation) - 2deg))
+            scale(1.05);
+    }
+    100% {
+        transform: translateY(0) rotate(calc(var(--rotation) + 8deg)) scale(1);
     }
 }
 
@@ -483,7 +848,7 @@ footer {
 .screen img {
     width: 100%;
     height: 100%;
-    border-radius: 0 0 0 0;
+    border-radius: 11px 11px 0 0;
     object-fit: cover;
     display: block;
 }
@@ -493,16 +858,15 @@ footer {
 }
 
 .base {
-    width: 180px;
-    height: 40px;
-    background: linear-gradient(145deg, #12121a, #1a1a27);
-    border: 4px solid var(--accent-blue);
+    width: 100%;
+    padding: 1rem;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
     border-radius: 0 0 12px 12px;
-    margin-top: -4px;
-    box-shadow: 0 0 20px var(--accent-blue), inset 0 2px 5px rgba(255, 255, 255, 0.1);
+    margin-top: -1px;
     text-align: center;
-    line-height: 30px;
-    font-weight: 700;
+    font-weight: 600;
+    color: var(--accent-blue);
 }
 
 @media (max-width: 768px) {
@@ -526,3 +890,144 @@ footer {
         font-size: 1.1rem;
     }
 }
+
+.base-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4rem;
+}
+
+.base-text {
+    flex: 1;
+}
+
+.base-images {
+    flex: 1;
+    position: relative;
+    height: 400px;
+}
+
+.base-img {
+    position: absolute;
+    width: 150px;
+    height: 150px;
+    border-radius: 12px;
+}
+
+.base-img-1 {
+    top: 0px;
+    right: 150px;
+    transform: rotate(-5deg);
+}
+
+.base-img-2 {
+    top: 80px;
+    right: 0px;
+    transform: rotate(3deg);
+}
+
+.base-img-3 {
+    top: 160px;
+    right: 160px;
+    transform: rotate(-6deg);
+}
+
+.base-img-4 {
+    top: 280px;
+    right: 280px;
+    transform: rotate(4deg);
+    width: 130px;
+    height: 160px;
+}
+
+.mutable-img-1 {
+    top: 10px;
+    right: 140px;
+    transform: rotate(-4deg);
+}
+
+.mutable-img-2 {
+    top: 230px;
+    right: 100px;
+    transform: rotate(-2deg);
+}
+
+.base-img-2 {
+    top: 60px;
+    right: 0px;
+    transform: rotate(10deg);
+}
+
+.base-img-3 {
+    top: 160px;
+    right: 40px;
+    transform: rotate(-8deg);
+}
+
+.base-img-4 {
+    top: 240px;
+    right: 20px;
+    transform: rotate(12deg);
+}
+
+.mutable-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4rem;
+}
+
+.mutable-text {
+    flex: 1;
+}
+
+.mutable-images {
+    flex: 1;
+    position: relative;
+    height: 350px;
+}
+
+.mutable-img {
+    position: absolute;
+    width: 140px;
+    height: 140px;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.mutable-img-1 {
+    top: 30px;
+    right: 60px;
+    transform: rotate(18deg);
+}
+
+.mutable-img-2 {
+    top: 100px;
+    right: 0px;
+    transform: rotate(-12deg);
+}
+
+.mutable-img-3 {
+    top: 180px;
+    right: 80px;
+    transform: rotate(6deg);
+}
+
+@keyframes gradientShift {
+    0% {
+        background-position: 0% 0%;
+    }
+    25% {
+        background-position: 100% 0%;
+    }
+    50% {
+        background-position: 100% 100%;
+    }
+    75% {
+        background-position: 0% 100%;
+    }
+    100% {
+        background-position: 0% 0%;
+    }
+}
