diff --git a/docs/src/containers/DownloadApp/index.js b/docs/src/containers/DownloadApp/index.js
index 3414e4841..5fe184c8f 100644
--- a/docs/src/containers/DownloadApp/index.js
+++ b/docs/src/containers/DownloadApp/index.js
@@ -99,10 +99,11 @@ export default function DownloadApp() {
         <span className="text-zinc-500 text-lg font-medium  inline-block">
           Download for PC
         </span>
-        <div className="bg-yellow-50 text-yellow-700 space-x-2 px-4 py-2 border border-yellow-400 rounded-lg font-semibold">
+        <div className="bg-yellow-50 text-yellow-700 space-x-2 px-4 py-2 border border-yellow-400 rounded-lg text-base">
           <span>🚧</span>
-          <span>
-            Warning: Jan is in the process of being built. Expect bugs!
+          <span className="font-semibold">Warning:</span>
+          <span className="font-medium">
+            Jan is in the process of being built. Expect bugs!
           </span>
         </div>
       </div>
@@ -112,14 +113,14 @@ export default function DownloadApp() {
             key={i}
             href={system.href}
             className={twMerge(
-              "inline-flex m-2 px-4 py-2 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-black dark:text-black bg-neutral-50 min-w-[150px] dark:bg-[#18181B]",
+              "btn-shadow inline-flex m-2 px-4 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-zinc-200 dark:border-gray-700 text-black dark:text-white bg-zinc-50 min-w-[150px] dark:bg-[#18181B] h-[36px]",
               system.comingSoon && "pointer-events-none"
             )}
           >
             <system.logo />
-            <span>{system.name}</span>
+            <span className="text-sm">{system.name}</span>
             {system.comingSoon && (
-              <span className="bg-gray-300 py-0.5 px-2 inline-block ml-2 rounded-md text-sm mt-1">
+              <span className="bg-zinc-200 py-0.5 px-2 inline-block ml-2 rounded-md text-xs h-[20px] dark:text-black">
                 Coming Soon
               </span>
             )}
diff --git a/docs/src/containers/Elements/dropdown.js b/docs/src/containers/Elements/dropdown.js
index 5709a89ac..6a5304fb0 100644
--- a/docs/src/containers/Elements/dropdown.js
+++ b/docs/src/containers/Elements/dropdown.js
@@ -3,26 +3,27 @@ import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import axios from "axios";
+import { FaWindows, FaApple, FaLinux } from "react-icons/fa";
 
 const systemsTemplate = [
   {
-    name: "Download for Mac (M1/M2)",
-    logo: require("@site/static/img/apple-logo-white.png").default,
+    name: "Download for Mac (M1/M2/M3)",
+    logo: FaApple,
     fileFormat: "{appname}-mac-arm64-{tag}.dmg",
   },
   {
     name: "Download for Mac (Intel)",
-    logo: require("@site/static/img/apple-logo-white.png").default,
+    logo: FaApple,
     fileFormat: "{appname}-mac-x64-{tag}.dmg",
   },
   {
     name: "Download for Windows",
-    logo: require("@site/static/img/windows-logo-white.png").default,
+    logo: FaWindows,
     fileFormat: "{appname}-win-x64-{tag}.exe",
   },
   {
     name: "Download for Linux",
-    logo: require("@site/static/img/linux-logo-white.png").default,
+    logo: FaLinux,
     fileFormat: "{appname}-linux-amd64-{tag}.deb",
   },
 ];
@@ -66,11 +67,7 @@ export default function Dropdown() {
     } else if (userAgent.includes("Linux")) {
       // linux user
       setDefaultSystem(systems[3]);
-    } else if (
-      userAgent.includes("Mac OS") &&
-      arc &&
-      arc.architecture === "arm"
-    ) {
+    } else if (userAgent.includes("Mac OS")) {
       setDefaultSystem(systems[0]);
     } else {
       setDefaultSystem(systems[1]);
@@ -123,14 +120,14 @@ export default function Dropdown() {
   return (
     <div className="inline-flex align-items-stretch">
       <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-blue-600 hover:bg-blue-500 hover:text-white"
+        className="cursor-pointer relative inline-flex items-center rounded-l-md border-0 px-4 py-3 text-base font-semibold dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white"
         href={defaultSystem.href}
       >
-        <img src={defaultSystem.logo} alt="Logo" className="h-5 mr-3 -mt-1" />
+        <defaultSystem.logo className="h-5 mr-3 -mt-1" />
         {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-l border-blue-500 h-full text-white bg-blue-600 w-8 justify-center">
+        <Menu.Button className="cursor-pointer relative inline-flex items-center rounded-r-md border-l border-gray-600 h-full dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white w-8 justify-center">
           <span className="sr-only">Open OS options</span>
           <ChevronDownIcon className="h-6 w-6" aria-hidden="true" />
         </Menu.Button>
@@ -143,7 +140,7 @@ export default function Dropdown() {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-0 z-10 mt-1 w-72 text-left origin-top-right rounded-md bg-blue-600 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden">
+          <Menu.Items className="absolute right-0 z-10 mt-1 w-80 text-left origin-top-right rounded-md dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden">
             <div className="overflow-hidden">
               {systems.map((system) => (
                 <Menu.Item
@@ -154,16 +151,16 @@ export default function Dropdown() {
                     <a
                       href={system.href}
                       className={classNames(
-                        active ? "bg-blue-500 hover:text-white" : "text-white",
-                        "flex px-4 py-3 items-center text-white hover:text-white"
+                        active
+                          ? "dark:bg-blue-100 bg-gray-900 hover:text-white dark:text-black"
+                          : "text-white dark:text-black",
+                        "flex px-4 py-3 items-center text-white hover:text-white dark:text-black"
                       )}
                     >
-                      <img
-                        src={system.logo}
-                        alt="Logo"
-                        className="w-3 mr-3 -mt-1 flex-shrink-0"
-                      />
-                      <span className="text-white">{system.name}</span>
+                      <system.logo className="w-3 mr-3 -mt-1 flex-shrink-0" />
+                      <span className="text-white dark:text-black font-medium">
+                        {system.name}
+                      </span>
                     </a>
                   )}
                 </Menu.Item>
diff --git a/docs/src/containers/SocialButton/index.js b/docs/src/containers/SocialButton/index.js
index 20616c209..7cbe0b2de 100644
--- a/docs/src/containers/SocialButton/index.js
+++ b/docs/src/containers/SocialButton/index.js
@@ -1,28 +1,44 @@
 import React from "react";
 import { FaGithub, FaDiscord } from "react-icons/fa";
+import { RiStarSFill } from "react-icons/ri";
+import { useAppStars } from "@site/src/hooks/useAppStars";
 
 export default function SocialButton() {
+  const { stargazers } = useAppStars();
+
   return (
     <div className="flex items-center space-x-2 justify-start">
-      <a
-        href="https://discord.gg/FTk2MvZwJH"
-        target="_blank"
-        className="text-white bg-blue-600 hover:bg-blue-700 hover:text-white inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2"
-      >
-        <span>
-          <FaDiscord className="text-xl" />
-        </span>
-        <span>Discord</span>
-      </a>
       <a
         href="https://github.com/janhq/jan"
         target="_blank"
-        className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-white bg-black hover:text-white"
+        className="inline-flex px-4 py-3 rounded-lg font-semibold cursor-pointer justify-center items-center space-x-4 border border-gray-400 dark:border-gray-700 text-white bg-black hover:text-white"
       >
         <span>
-          <FaGithub className="text-lg" />
+          <FaGithub className="text-3xl" />
         </span>
-        <span>Github</span>
+        <div className="flex-col">
+          <p className="text-base">Github</p>
+          <p className="text-sm text-white flex items-center space-x-1">
+            <RiStarSFill className="text-lg text-[#FEC928]" />
+            <span>{stargazers.count} stars</span>
+          </p>
+        </div>
+      </a>
+      <a
+        href="https://discord.gg/FTk2MvZwJH"
+        target="_blank"
+        className="text-white bg-[#5765F2] hover:bg-[#5765F2] hover:text-white inline-flex px-4 py-3 rounded-lg  font-semibold cursor-pointer justify-center items-center space-x-4"
+      >
+        <span>
+          <FaDiscord className="text-3xl" />
+        </span>
+        <div className="flex-col">
+          <p className="text-base">Discord</p>
+          <div className="text-sm text-white flex items-center space-x-1">
+            <div className="w-2 h-2 bg-green-500 rounded-full" />
+            <span>{stargazers.count} online</span>
+          </div>
+        </div>
       </a>
     </div>
   );
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index e250ce661..460eb366f 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -12,6 +12,8 @@ import SocialButton from "@site/src/containers/SocialButton";
 
 import { IoArrowDown } from "react-icons/io5";
 
+import Dropdown from "@site/src/containers/Elements/dropdown";
+
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
 
@@ -21,6 +23,11 @@ export default function Home() {
       .scrollIntoView({ behavior: "smooth" });
   };
 
+  const userAgent = navigator.userAgent;
+
+  console.log(userAgent);
+  const isBrowserChrome = userAgent.includes("Chrome");
+
   return (
     <>
       <Banner />
@@ -57,13 +64,18 @@ export default function Home() {
                 <br className="hidden lg:block" /> 100% offline on your
                 computer.
               </p>
+              <div className="mt-8"></div>
               <div className="mt-8">
-                <div
-                  onClick={() => handleAnchorLink()}
-                  className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white scroll-smooth"
-                >
-                  <span>Download Jan for PC</span>
-                </div>
+                {!isBrowserChrome ? (
+                  <div
+                    onClick={() => handleAnchorLink()}
+                    className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white scroll-smooth"
+                  >
+                    <span>Download Jan for PC</span>
+                  </div>
+                ) : (
+                  <Dropdown />
+                )}
               </div>
 
               <div
@@ -192,7 +204,7 @@ export default function Home() {
                       <p className="text-3xl xl:text-4xl font-semibold">
                         Mobile App
                       </p>
-                      <span className="bg-gray-300 dark:bg-gray-700 py-1 px-2 inline-block ml-2 rounded-md text-sm mt-1">
+                      <span className="bg-gray-300 dark:bg-gray-700 py-0.5 px-2 inline-block ml-2 rounded-lg text-sm mt-1 font-medium">
                         Coming Soon
                       </span>
                     </div>
@@ -229,28 +241,28 @@ export default function Home() {
             <div className="container py-12 lg:py-32">
               <div className="w-full xl:w-10/12 mx-auto relative">
                 <div className="text-center">
-                  <div className="card-link-bg dark:card-link-bg-dark px-4 py-2 inline-flex rounded-xl items-center space-x-4">
+                  <div className="card-link-bg dark:card-link-bg-dark px-4 py-2 inline-flex rounded-xl items-center space-x-6 h-[60px]">
                     <img
                       src="/img/homepage/ic-offline.png"
                       alt="Icon Offline"
-                      className="w-9"
+                      className="w-9 flex-shrink-0"
                     />
                     <img
                       src="/img/homepage/ic-private.png"
                       alt="Icon Offline"
-                      className="w-9"
+                      className="w-12 flex-shrink-0"
                     />
                     <img
                       src="/img/homepage/ic-folder.png"
                       alt="Icon Offline"
-                      className="w-9"
+                      className="w-9 flex-shrink-0"
                     />
                   </div>
                   <div className="mt-8">
                     <h6 className="text-3xl lg:text-4xl font-semibold">
                       Offline and Local First
                     </h6>
-                    <p className="mt-2 leading-relaxed text-zinc-600 dark:text-zinc-400">
+                    <p className="mt-2 text-zinc-600 dark:text-zinc-400 text-lg leading-relaxed">
                       Conversations, preferences, and model usage stay on{" "}
                       <br className="hidden lg:block" /> your computer—secure,
                       exportable, and can be deleted at any time.
@@ -262,7 +274,7 @@ export default function Home() {
                           <h6 className="text-3xl lg:text-4xl font-semibold">
                             OpenAI Compatible
                           </h6>
-                          <p className="mt-4 leading-relaxed text-zinc-600 dark:text-zinc-400">
+                          <p className="mt-4 leading-relaxed text-zinc-600 dark:text-zinc-400 text-lg">
                             Jan provides an OpenAI-equivalent API{" "}
                             <br className="hidden lg:block" /> server at&nbsp;
                             <b>localhost:</b>&nbsp;
@@ -294,7 +306,7 @@ export default function Home() {
                                   <span className="inline-block mr-2">
                                     Assistants framework
                                   </span>
-                                  <span className="bg-gray-300 dark:bg-gray-700 py-1 px-2 inline-block rounded-md text-sm">
+                                  <span className="bg-gray-300 dark:bg-gray-700 py-0.5 px-2 inline-block rounded-lg text-sm">
                                     Coming Soon
                                   </span>
                                 </p>
diff --git a/docs/src/styles/components/base.scss b/docs/src/styles/components/base.scss
index b99ff21c2..41af09c12 100644
--- a/docs/src/styles/components/base.scss
+++ b/docs/src/styles/components/base.scss
@@ -60,4 +60,8 @@
     border-radius: 4px;
     font-weight: var(--ifm-font-weight-bold);
   }
+
+  .btn-shadow {
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 }