diff --git a/pages/index.vue b/pages/index.vue
index dc4b510..2bc36b5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -42,7 +42,7 @@ useSeoMeta({
           <DownloadIcon />Modrinth
         </Button>
         <Button color="gray" @click="navigateTo(`/vanilla`, { external: true })">
-          <DownloadIcon />{{ $t("content.home.columned-hero.vanilla") }}
+          <DownloadIcon />{{ $t("content.vanilla.title.installer") }}
         </Button>
       </div>
       <div>
@@ -230,7 +230,7 @@ useSeoMeta({
     <div class="buttons">
       <Button :large="true" color="orange" @click="navigateTo(`/curseforge`, { external: true })">CurseForge</Button>
       <Button :large="true" color="green" @click="navigateTo(`/modrinth`, { external: true })">Modrinth</Button>
-      <Button :large="true" color="gray" @click="navigateTo(`/vanilla`, { external: true })">{{ $t("content.home.columned-hero.vanilla") }}</Button>
+      <Button :large="true" color="gray" @click="navigateTo(`/vanilla`, { external: true })">{{ $t("content.vanilla.title.installer") }}</Button>
     </div>
     <div style="margin: -1em">
     <i18n-t keypath="content.home.columned-hero.disclaimer" tag="p" id="disclaimer-text">
diff --git a/pages/vanilla.vue b/pages/vanilla.vue
index 9501fcf..6b47cc1 100644
--- a/pages/vanilla.vue
+++ b/pages/vanilla.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
+import axios from 'axios';
 import {
   Button,
   DownloadIcon,
@@ -19,13 +20,50 @@ const updateIframeUrl = () => {
   iframe.src = iframeUrl.toString(); // Update the iframe src with new parameters
 };
 
-const todo = () => {
-  alert("Soon!");
+const detectedOS = ref('');
+
+const detectOS = () => {
+  const platform = window.navigator.platform.toLowerCase();
+  if (platform.includes('win')) {
+    detectedOS.value = 'Windows';
+  } else if (platform.includes('mac')) {
+    detectedOS.value = 'macOS';
+  } else if (platform.includes('linux')) {
+    detectedOS.value = 'Linux';
+  } else {
+    detectedOS.value = 'Unknown';
+  }
+};
+
+const downloadLatestRelease = async (fileExtension: string, isStable: boolean) => {
+  const releasesUrl = `https://api.github.com/repos/Fabulously-Optimized/installer/releases`;
+
+  try {
+    const response = await axios.get(releasesUrl);
+    const releases = response.data;
+
+    const filteredRelease = isStable
+      ? releases.find((release: any) => !release.prerelease)
+      : releases.find((release: any) => release.prerelease);
+
+    if (!filteredRelease) throw new Error('No release found');
+
+    const asset = filteredRelease.assets.find((asset: any) =>
+      asset.name.endsWith(fileExtension)
+    );
+
+    let downloadUrl = releasesUrl; 
+    if (asset) downloadUrl = asset.browser_download_url;
+    window.location.href = downloadUrl;
+  } catch (error) {
+    console.error('Error downloading release:', error);
+  }
 };
 
 onMounted(() => {
   try {
     updateIframeUrl();
+    detectOS();
   } catch (error) {
     console.error(error);
   }
@@ -34,22 +72,37 @@ onMounted(() => {
 
 <template>
 	<h1 id="title">{{ $t("content.vanilla.title") }}</h1>
-  <!--
   <h2>{{ $t("content.vanilla.title.installer") }}</h2>
-  <Button color="green" @click="todo">
-    <DownloadIcon />{{ $t("content.vanilla.button.windows") }}
-  </Button>
-  <Button color="gray" @click="todo">
-    <DownloadIcon />{{ $t("content.vanilla.button.macos") }}
-  </Button>
-  <Button color="gray" @click="todo">
-    <DownloadIcon />{{ $t("content.vanilla.button.linux") }}
-  </Button>
-  <Button color="gray" @click="todo">
-    <DownloadIcon />{{ $t("content.vanilla.button.linuxManual") }}
-  </Button>
+
+  <div class="buttons">
+    <!-- Display the green button first based on the detected OS -->
+    <Button v-if="detectedOS === 'Windows'" color="green" @click="downloadLatestRelease('.exe', true)">
+      <DownloadIcon />{{ $t("content.vanilla.button.windows") }}
+    </Button>
+
+    <Button v-if="detectedOS === 'macOS'" color="green" @click="downloadLatestRelease('.dmg', true)">
+      <DownloadIcon />{{ $t("content.vanilla.button.macos") }}
+    </Button>
+
+    <Button v-if="detectedOS === 'Linux'" color="green" @click="downloadLatestRelease('.AppImage', true)">
+      <DownloadIcon />{{ $t("content.vanilla.button.linux") }}
+    </Button>
+
+    <!-- Gray buttons for the other OSes -->
+    <Button v-if="detectedOS !== 'Windows'" color="gray" @click="downloadLatestRelease('.exe', true)">
+      <DownloadIcon />{{ $t("content.vanilla.button.windows") }}
+    </Button>
+
+    <Button v-if="detectedOS !== 'macOS'" color="gray" @click="downloadLatestRelease('.dmg', true)">
+      <DownloadIcon />{{ $t("content.vanilla.button.macos") }}
+    </Button>
+
+    <Button v-if="detectedOS !== 'Linux'" color="gray" @click="downloadLatestRelease('.AppImage', true)">
+      <DownloadIcon />{{ $t("content.vanilla.button.linux") }}
+    </Button>
+  </div>
+  <br>
   <h2>{{ $t("content.vanilla.title.manual") }}</h2>
-  -->
   <div class="iframe-container">
     <iframe id="vanilla-embed" src="../vanilla-embed.html" frameborder="0" height="100em"></iframe>
   </div>
@@ -76,4 +129,11 @@ onMounted(() => {
 #vanilla-embed {
   width: 50%;
 }
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-md);
+  flex-wrap: wrap;
+}
 </style>