diff --git a/docs/src/components/Elements/dropdown.js b/docs/src/components/Elements/dropdown.js
index 6d9bd0697..285741c36 100644
--- a/docs/src/components/Elements/dropdown.js
+++ b/docs/src/components/Elements/dropdown.js
@@ -3,7 +3,7 @@ import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 
-const items = [
+const systems = [
   {
     name: "Download for Mac (M1/M2)",
     href: "https://github.com/janhq/jan/releases/download/v0.1.2/Jan-0.1.2-arm64.dmg",
@@ -31,19 +31,32 @@ function classNames(...classes) {
 }
 
 export default function Dropdown() {
+  const uAgent = window.navigator.userAgent;
+  let defaultSystem;
+
+  if (uAgent.indexOf("Win") !== -1) {
+    defaultSystem = systems[2];
+  } else if (uAgent.indexOf("Mac") !== -1) {
+    // Note: There's no way to detect ARM architecture from browser. Hardcoding to M1/M2 for now.
+    defaultSystem = systems[0];
+  } else if (uAgent.indexOf("Linux") !== -1) {
+    defaultSystem = systems[3];
+  } else {
+    defaultSystem = systems[0];
+  }
+
   return (
     <div className="inline-flex align-items-stretch">
-      {/* TODO dynamically detect users OS through browser */}
       <a
         className="cursor-pointer relative inline-flex items-center rounded-l-md border-0 px-3.5 py-2.5 text-base font-semibold text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-500 dark:hover:bg-indigo-400 hover:text-white"
-        href={items[0].href}
+        href={defaultSystem.href}
       >
         <img
           src={require("@site/static/img/apple-logo-white.png").default}
           alt="Logo"
           className="h-5 mr-3 -mt-1"
         />
-        Download for Mac (Silicon)
+        {defaultSystem.name}
       </a>
       <Menu as="div" className="relative -ml-px block">
         <Menu.Button className="cursor-pointer relative inline-flex items-center rounded-r-md border-0 border-l border-gray-300 active:border-l active:border-white h-full text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-500 dark:hover:bg-indigo-400">
@@ -61,11 +74,11 @@ export default function Dropdown() {
         >
           <Menu.Items className="absolute right-0 z-10 mt-2 w-72 text-left origin-top-right rounded-md bg-indigo-600 dark:bg-indigo-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div className="py-1">
-              {items.map((item) => (
-                <Menu.Item key={item.name}>
+              {systems.map((system) => (
+                <Menu.Item key={system.name}>
                   {({ active }) => (
                     <a
-                      href={item.href}
+                      href={system.href}
                       className={classNames(
                         active
                           ? "bg-indigo-500 dark:hover:bg-indigo-400 hover:text-white"
@@ -74,11 +87,11 @@ export default function Dropdown() {
                       )}
                     >
                       <img
-                        src={item.logo}
+                        src={system.logo}
                         alt="Logo"
                         className="w-3 mr-3 -mt-1"
                       />
-                      {item.name}
+                      {system.name}
                     </a>
                   )}
                 </Menu.Item>
diff --git a/docs/src/components/Homepage/downloads.js b/docs/src/components/Homepage/downloads.js
index 01dd6665a..f14ebf8f6 100644
--- a/docs/src/components/Homepage/downloads.js
+++ b/docs/src/components/Homepage/downloads.js
@@ -5,7 +5,7 @@ import {
   LockClosedIcon,
 } from "@heroicons/react/20/solid";
 
-const features = [
+const systems = [
   {
     name: "Mac",
     description:
@@ -47,20 +47,20 @@ export default function HomepageDownloads() {
         </div>
         <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
           <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
-            {features.map((feature) => (
-              <div key={feature.name} className="flex flex-col">
+            {systems.map((system) => (
+              <div key={system.name} className="flex flex-col">
                 <dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900 dark: text-white">
-                  <feature.icon
+                  <system.icon
                     className="h-5 w-5 flex-none text-indigo-600 dark:text-indigo-400"
                     aria-hidden="true"
                   />
-                  {feature.name}
+                  {system.name}
                 </dt>
                 <dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-300">
-                  <p className="flex-auto">{feature.description}</p>
+                  <p className="flex-auto">{system.description}</p>
                   <p className="mt-6">
                     <a
-                      href={feature.href}
+                      href={system.href}
                       className="text-sm font-semibold leading-6 text-indigo-600 dark:text-indigo-400"
                     >
                       Learn more <span aria-hidden="true">→</span>
diff --git a/docs/src/components/Homepage/hero.js b/docs/src/components/Homepage/hero.js
index f6cdf58e3..a9a56f6fe 100644
--- a/docs/src/components/Homepage/hero.js
+++ b/docs/src/components/Homepage/hero.js
@@ -8,7 +8,7 @@ export default function HomepageHero() {
 
   return (
     <div className="bg-white dark:bg-gray-900">
-      <div className="relative isolate pt-14">
+      <div className="relative isolate md:pt-14 pt-0">
         {/* Background top gradient styling */}
         {colorMode === "dark" ? (
           <div
@@ -39,7 +39,7 @@ export default function HomepageHero() {
         )}
 
         {/* Main hero block */}
-        <div className="py-24 sm:py-32 lg:pb-40 animate-in fade-in zoom-in-50 duration-1000 ">
+        <div className="py-24 lg:pb-40 animate-in fade-in zoom-in-50 duration-1000 ">
           <div className="mx-auto max-w-7xl px-6 lg:px-8">
             {/* Hero text and buttons */}
             <div className="mx-auto max-w-2xl text-center">
@@ -47,7 +47,7 @@ export default function HomepageHero() {
                 Run your own AI
               </h1>
               <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-              Jan lets you run AI on your own hardware. 1-click to install the
+                Jan lets you run AI on your own hardware. 1-click to install the
                 latest open-source models. Monitor and manage software-hardware
                 performance.
                 <br></br>
@@ -79,14 +79,15 @@ export default function HomepageHero() {
               src={
                 colorMode === "dark"
                   ? // TODO replace with darkmode image
-                    require("@site/static/img/desktop-llm-chat-dark.png").default
-                  : require("@site/static/img/desktop-llm-chat-light.png").default
+                    require("@site/static/img/desktop-llm-chat-dark.png")
+                      .default
+                  : require("@site/static/img/desktop-llm-chat-light.png")
+                      .default
               }
               alt="App screenshot"
               width={2432}
               className="mt-16 rounded-lg md:rounded-2xl lg:rounded-3xl bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-24"
             />
-            
           </div>
         </div>
         {/* Background top gradient styling */}