diff --git a/apps/website/src/routes/+page.svelte b/apps/website/src/routes/+page.svelte
index 2997310c6..ab2f65326 100644
--- a/apps/website/src/routes/+page.svelte
+++ b/apps/website/src/routes/+page.svelte
@@ -21,7 +21,7 @@
                     Its unique tree structure, rich editing tools, and powerful search features make managing your information intuitive and flexible.
                 </p>
                 <div class="flex items-center gap-6">
-                    <DownloadNow />                    
+                    <DownloadNow big />                    
                     <a href="/download" class="font-medium text-violet-700 hover:underline">
                         More platforms
                     </a>
diff --git a/apps/website/src/routes/download-now.svelte b/apps/website/src/routes/download-now.svelte
index c0ca6244b..20abe9c55 100644
--- a/apps/website/src/routes/download-now.svelte
+++ b/apps/website/src/routes/download-now.svelte
@@ -1,11 +1,15 @@
 <script>
     import { getRecommendedDownload } from "$lib/download-helper";
 
+    export let big = false;
     const { url, platform, architecture } = getRecommendedDownload();
 </script>
 
 {#if url}
-    <a href="{url}" class="py-2 px-5 bg-violet-600 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
+    <a href="{url}"
+        class:text-xl={big}
+        class:py-4={big}
+        class="py-2 px-5 bg-violet-600 text-white font-semibold rounded-xl shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
         Download now
         <span class="text-sm text-gray-300">
             ({platform} {architecture})