diff --git a/.astro/settings.json b/.astro/settings.json
index eefc34a..b4c46d4 100644
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1728399114239
+		"lastUpdateCheck": 1729485476687
 	}
 }
\ No newline at end of file
diff --git a/src/components/navigation/Navbar.astro b/src/components/navigation/Navbar.astro
index 83d9ec1..0bc0828 100644
--- a/src/components/navigation/Navbar.astro
+++ b/src/components/navigation/Navbar.astro
@@ -11,8 +11,8 @@
       target="_blank">Donate</a
     >
     <a href="/faq">FAQ</a>
-    <!-- <a aria-label="discord" href="https://discord.gg/58NZ7fFqPy"><Icon size={21} name="ic:baseline-discord" /></a> -->
-    <a class="button" href="https://github.com/MythicApp/Mythic/releases">
+    <!-- <a aria-label="discord" href="/discord"><Icon size={21} name="ic:baseline-discord" /></a> -->
+    <a class="button" href="/download">
       Download
     </a>
   </div>
diff --git a/src/components/sections/FeatureSection.astro b/src/components/sections/FeatureSection.astro
index 2626fbc..437c5a3 100644
--- a/src/components/sections/FeatureSection.astro
+++ b/src/components/sections/FeatureSection.astro
@@ -49,18 +49,39 @@ import { Image } from "astro:assets";
     }
   }
 
+  .feature-text {
+    padding-bottom: 24px;
+    max-width: 100%; /* Ensure text does not exceed container width */
+    overflow-wrap: anywhere
+  }
+
   .feature-text h3 {
     font-size: 1.5rem;
     margin-bottom: 10px;
+    word-wrap: break-word; /* Break long words in headings */
+    overflow-wrap: break-word; /* Ensure long words break */
   }
 
   .feature-text p {
     font-size: 1rem;
-    max-width: 80%;
+    max-width: 100%; /* Ensure text does not exceed container width */
     margin: 0 auto;
+    word-wrap: break-word; /* Break long words in paragraphs */
+    overflow-wrap: break-word; /* Ensure long words break */
   }
 
-  .feature-text {
-    padding-bottom: 24px;
+  .feature-image {
+    width: 100%;
+    height: auto;
+    position: relative;
+    overflow: hidden; /* Prevent image overflow */
+  }
+
+  .feature-image img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+    display: block;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/download.astro b/src/pages/download.astro
new file mode 100644
index 0000000..8e8b498
--- /dev/null
+++ b/src/pages/download.astro
@@ -0,0 +1,144 @@
+---
+import Layout from "../layouts/Layout.astro";
+import FeatureSection from "../components/sections/FeatureSection.astro";
+import { features } from "./index.astro";
+---
+
+<Layout title="Thanks for downloading!">
+  <h1 class="mythic-gradient-text">Thanks for downloading Mythic!</h1>
+  <p>You're just <span id="countdown-timer">3</span> seconds away from greatness...</p>
+  <p>If your download hasn't started, please <a href="#" onclick="fetchLatestRelease()">click here</a>.</p>
+
+  <p>Please note that for newer versions of macOS, you may need to toggle the 'Allow apps from' setting in System Settings &gt; Privacy & Security &gt; Security to 'Anywhere'.</p>
+  <p>For any concerns, please consult the <a href="/faq">FAQ</a> or join the <a href="/discord">Discord</a>.</p>
+
+  <div class="marquee-container">
+    <div class="marquee-content">
+      {
+        features.concat(features).map((feature, index) => (
+          <div class="marquee-item">
+            <FeatureSection
+              title={feature.title}
+              desc={feature.desc}
+              image={feature.image}
+              id={String(index + 1)}
+              color={feature.color}
+            />
+          </div>
+        ))
+      }
+    </div>
+    <div class="fade-left"></div>
+    <div class="fade-right"></div>
+  </div>
+
+  <style>
+    body {
+      overflow: hidden; /* Prevent scrolling */
+    }
+
+    .marquee-container {
+      position: relative;
+      overflow: hidden;
+      white-space: nowrap;
+      width: 90vw;
+    }
+
+    .marquee-content {
+      display: inline-block;
+      animation: marquee 90s linear infinite;
+    }
+
+    .marquee-item {
+      display: inline-block;
+      margin-right: 20px;
+      max-width: 80vw;
+    }
+
+    @keyframes marquee {
+      0% {
+        transform: translateX(0); /* Start immediately with content visible */
+      }
+      100% {
+        transform: translateX(-100%);
+      }
+    }
+
+    .fade-left,
+    .fade-right {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 200px; /* Adjust width as needed */
+      pointer-events: none; /* Allow clicks to pass through */
+      z-index: 1;
+    }
+
+    .fade-left {
+      left: 0;
+      background: linear-gradient(
+        to right,
+        var(--primary-color),
+        rgba(255, 255, 255, 0)
+      );
+    }
+
+    .fade-right {
+      right: 0;
+      background: linear-gradient(
+        to left,
+        var(--primary-color),
+        rgba(255, 255, 255, 0)
+      );
+    }
+
+    .mythic-gradient-text {
+      /* repeated but im not a webdev lol, see index.astro */
+      display: inline;
+      --bg-size: 400%;
+      background: linear-gradient(
+          90deg,
+          var(--color-one),
+          var(--color-two),
+          var(--color-one)
+        )
+        0 0 / var(--bg-size) 100%;
+      color: transparent;
+      -webkit-background-clip: text;
+      background-clip: text;
+      animation: move-bg 40s infinite ease-in-out;
+      margin-bottom: 0;
+    }
+  </style>
+
+  <script>
+    async function fetchLatestRelease() {
+      try {
+        const response = await fetch('https://api.github.com/repos/MythicApp/Mythic/releases');
+        const releases = await response.json();
+        const latestRelease = releases[0];
+        const asset = latestRelease.assets.find((asset: { name: string; browser_download_url: string }) => asset.name === 'Mythic.zip');
+        if (asset) {
+          window.location.href = asset.browser_download_url;
+        } else {
+          console.error('Mythic.zip not found in the latest release assets.');
+        }
+      } catch (error) {
+        console.error('Error fetching the latest release:', error);
+      }
+    }
+
+    let countdown = 3;
+    const countdownTimer = document.getElementById('countdown-timer');
+    const interval = setInterval(() => {
+      countdown -= 1;
+      if (countdownTimer) {
+        countdownTimer.textContent = countdown.toString();
+      }
+      if (countdown === 0) {
+        clearInterval(interval);
+        fetchLatestRelease();
+      }
+    }, 1000);
+  </script>
+</Layout>