diff --git a/docs/src/containers/Footer/index.js b/docs/src/containers/Footer/index.js
index 3e62f579a..186839e04 100644
--- a/docs/src/containers/Footer/index.js
+++ b/docs/src/containers/Footer/index.js
@@ -1,100 +1,108 @@
-import React from "react";
+import React from 'react'
 
-import { AiOutlineGithub, AiOutlineTwitter } from "react-icons/ai";
-import { BiLogoDiscordAlt, BiLogoLinkedin } from "react-icons/bi";
+import { AiOutlineGithub, AiOutlineTwitter } from 'react-icons/ai'
+import { BiLogoDiscordAlt, BiLogoLinkedin } from 'react-icons/bi'
 
 const socials = [
   {
-    icon: <AiOutlineTwitter className="text-xl text-black dark:text-white" />,
-    href: "https://twitter.com/janframework",
+    icon: (
+      <AiOutlineTwitter className="text-xl text-black/60 dark:text-white/60" />
+    ),
+    href: 'https://twitter.com/janframework',
   },
   {
-    icon: <BiLogoDiscordAlt className="text-xl text-black dark:text-white" />,
-    href: "https://discord.com/invite/FTk2MvZwJH",
+    icon: (
+      <BiLogoDiscordAlt className="text-xl text-black/60 dark:text-white/60" />
+    ),
+    href: 'https://discord.com/invite/FTk2MvZwJH',
   },
   {
-    icon: <AiOutlineGithub className="text-lg text-black dark:text-white" />,
-    href: "https://github.com/janhq/jan",
+    icon: (
+      <AiOutlineGithub className="text-lg text-black/60 dark:text-white/60" />
+    ),
+    href: 'https://github.com/janhq/jan',
   },
   {
-    icon: <BiLogoLinkedin className="text-xl text-black dark:text-white" />,
-    href: "https://www.linkedin.com/company/janframework/",
-  }
-];
+    icon: (
+      <BiLogoLinkedin className="text-xl text-black/60 dark:text-white/60" />
+    ),
+    href: 'https://www.linkedin.com/company/janframework/',
+  },
+]
 
 const menus = [
   {
-    name: "For Developers",
+    name: 'For Developers',
     child: [
       {
-        menu: "Documentation",
-        path: "/developer",
+        menu: 'Documentation',
+        path: '/developer',
       },
       {
-        menu: "Hardware",
-        path: "/hardware",
+        menu: 'Hardware',
+        path: '/hardware',
       },
       {
-        menu: "API Reference",
-        path: "/api-reference",
+        menu: 'API Reference',
+        path: '/api-reference',
       },
       {
-        menu: "Changelog",
-        path: "https://github.com/janhq/jan/releases",
+        menu: 'Changelog',
+        path: 'https://github.com/janhq/jan/releases',
         external: true,
       },
     ],
   },
   {
-    name: "Community",
+    name: 'Community',
     child: [
       {
-        menu: "Github",
-        path: "https://github.com/janhq/jan",
+        menu: 'Github',
+        path: 'https://github.com/janhq/jan',
         external: true,
       },
       {
-        menu: "Discord",
-        path: "https://discord.gg/FTk2MvZwJH",
+        menu: 'Discord',
+        path: 'https://discord.gg/FTk2MvZwJH',
         external: true,
       },
       {
-        menu: "Twitter",
-        path: "https://twitter.com/janframework",
+        menu: 'Twitter',
+        path: 'https://twitter.com/janframework',
         external: true,
       },
       {
-        menu: "LinkedIn",
-        path: "https://www.linkedin.com/company/janframework/",
+        menu: 'LinkedIn',
+        path: 'https://www.linkedin.com/company/janframework/',
         external: true,
-      }
+      },
     ],
   },
   {
-    name: "Company",
+    name: 'Company',
     child: [
       {
-        menu: "About",
-        path: "/about",
+        menu: 'About',
+        path: '/about',
       },
       {
-        menu: "Blog",
-        path: "/blog",
+        menu: 'Blog',
+        path: '/blog',
       },
       {
-        menu: "Careers",
-        path: "https://janai.bamboohr.com/careers",
+        menu: 'Careers',
+        path: 'https://janai.bamboohr.com/careers',
         external: true,
       },
       {
-        menu: "Newsletter",
-        path: "/community#newsletter",
-      }
+        menu: 'Newsletter',
+        path: '/community#newsletter',
+      },
     ],
   },
-];
+]
 
-const getCurrentYear = new Date().getFullYear();
+const getCurrentYear = new Date().getFullYear()
 
 export default function Footer() {
   return (
@@ -106,30 +114,13 @@ export default function Footer() {
               <img alt="Jan Logo" src="/img/logo.svg" />
               <h2 className="h6">Jan</h2>
             </div>
-            <div className="w-full lg:w-1/2">
-              <p className="dark:text-gray-400 text-gray-600">
-                Jan is the open-source, self-hosted&nbsp;
+            <div className="w-full lg:w-1/2 mt-2">
+              <h6>The Soul of a New Machine</h6>
+              <p className="dark:text-gray-400 text-gray-600 mt-2">
+                Subscribe to our newsletter on AI{' '}
                 <br className="hidden lg:block" />
-                &nbsp;alternative to ChatGPT.
+                research and building Jan:
               </p>
-
-              <div className="mt-4">
-                <div className="flex items-center gap-x-3">
-                  {socials.map((social, i) => {
-                    return (
-                      <a
-                        aria-label={`social-${i}`}
-                        key={i}
-                        href={social.href}
-                        target="_blank"
-                        rel="noopener"
-                      >
-                        {social.icon}
-                      </a>
-                    );
-                  })}
-                </div>
-              </div>
             </div>
           </div>
           {menus.map((menu, i) => {
@@ -142,25 +133,42 @@ export default function Footer() {
                       <li key={i}>
                         <a
                           href={child.path}
-                          target={child.external ? "_blank" : "_self"}
+                          target={child.external ? '_blank' : '_self'}
                           className="inline-block py-1 dark:text-gray-400 text-gray-600"
                         >
                           {child.menu}
                         </a>
                       </li>
-                    );
+                    )
                   })}
                 </ul>
               </div>
-            );
+            )
           })}
         </div>
       </div>
-      <div className="container mt-6">
-        <span className="dark:text-gray-300 text-gray-700">
-          &copy;{getCurrentYear}&nbsp;Jan AI Pte Ltd.
-        </span>
+      <div className="container mt-8">
+        <div className="flex w-full justify-between items-center">
+          <span className="dark:text-gray-300 text-gray-700">
+            &copy;{getCurrentYear}&nbsp;Jan AI Pte Ltd.
+          </span>
+          <div className="flex items-center gap-x-3">
+            {socials.map((social, i) => {
+              return (
+                <a
+                  aria-label={`social-${i}`}
+                  key={i}
+                  href={social.href}
+                  target="_blank"
+                  rel="noopener"
+                >
+                  {social.icon}
+                </a>
+              )
+            })}
+          </div>
+        </div>
       </div>
     </footer>
-  );
+  )
 }
diff --git a/docs/src/containers/SocialButton/index.js b/docs/src/containers/SocialButton/index.js
deleted file mode 100644
index 572c2210f..000000000
--- a/docs/src/containers/SocialButton/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-import { FaGithub, FaDiscord } from "react-icons/fa";
-import { RiStarSFill } from "react-icons/ri";
-import { useAppStars } from "@site/src/hooks/useAppStars";
-import { useDiscordWidget } from "@site/src/hooks/useDiscordWidget";
-
-export default function SocialButton() {
-  const { stargazers } = useAppStars();
-  const { data } = useDiscordWidget();
-
-  return (
-    <div className="flex items-center space-x-2 justify-start">
-      <a
-        href="https://github.com/janhq/jan"
-        target="_blank"
-        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-3xl" />
-        </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>{data.presence_count} online</span>
-          </div>
-        </div>
-      </a>
-    </div>
-  );
-}
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 1e5add4a6..38dceb1c3 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -7,9 +7,12 @@ import Banner from '@site/src/containers/Banner'
 
 import ThemedImage from '@theme/ThemedImage'
 
-import SocialButton from '@site/src/containers/SocialButton'
-
 import { IoArrowDown } from 'react-icons/io5'
+import { IoMapOutline } from 'react-icons/io5'
+import { useAppStars } from '@site/src/hooks/useAppStars'
+import { useDiscordWidget } from '@site/src/hooks/useDiscordWidget'
+import { FaGithub, FaDiscord } from 'react-icons/fa'
+import { RiStarSFill } from 'react-icons/ri'
 
 import Dropdown from '@site/src/containers/Elements/dropdown'
 
@@ -17,6 +20,8 @@ import useIsBrowser from '@docusaurus/useIsBrowser'
 
 export default function Home() {
   const isBrowser = useIsBrowser()
+  const { stargazers } = useAppStars()
+  const { data } = useDiscordWidget()
 
   const handleAnchorLink = () => {
     document
@@ -35,11 +40,12 @@ export default function Home() {
         description="Jan runs 100% offline on your computer, utilizes open-source AI models, prioritizes privacy, and is highly customizable."
       >
         <main>
-          <div className="text-center py-24">
+          {/* Hero */}
+          <div className="text-center py-16">
             <h1 className="text-5xl lg:text-8xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
               Rethink the Computer
             </h1>
-            <p className="text-2xl -mt-1 leading-relaxed text-zinc-500">
+            <p className="text-2xl -mt-1 leading-relaxed text-black/60 dark:text-white/60">
               Turn your computer into a{' '}
               <span className="text-black dark:text-white font-semibold">
                 AI machine
@@ -57,249 +63,437 @@ export default function Home() {
                 <Dropdown />
               )}
             </div>
-            <p className="mt-6 text-zinc-500">
+            <p className="mt-6 text-black/60 dark:text-white/60">
               <span className="text-blue-500 font-bold dark:text-blue-500">
                 400K+
               </span>{' '}
               downloads | Free & Open Source
             </p>
+
+            <div className="w-4/5  mx-auto mt-10">
+              <ThemedImage
+                className="object-cover w-full object-center mx-auto h-full lg:-left-4 relative"
+                alt="App screenshots"
+                sources={{
+                  light: useBaseUrl('/img/homepage/app-frame-light.png'),
+                  dark: useBaseUrl('/img/homepage/app-frame-dark.png'),
+                }}
+              />
+            </div>
           </div>
 
-          {/* <div
-            className="dark:bg-[#09090B]/20 border-t border-zinc-200 dark:border-gray-800 py-10 lg:py-16"
-            id="download-section"
-          >
-            <div className="container">
-              <div className="w-full lg:w-3/4 mx-auto">
-                <DownloadApp />
-              </div>
+          {/* Build with Love */}
+          <div className="w-full xl:w-3/5 mx-auto relative py-8">
+            <div className="text-center">
+              <h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
+                Built with love
+              </h1>
+              <p className="leading-relaxed text-black/60 dark:text-white/60">
+                Jan is entirely open-source. We build it transparently, guided
+                by the belief <br className="hidden lg:block" /> that AI's
+                future should be open and shared with everyone.
+              </p>
             </div>
-          </div> */}
 
-          {/* <div className="dark:bg-[#09090B]/20 pb-10 lg:pb-36">
-            <div className="container h-full ">
-              <div className="w-full lg:w-3/4 mx-auto relative rounded-xl py-10">
-                <img
-                  src="/img/homepage/element-bg-open-source.webp"
-                  alt="Element Open Source BG"
-                  className="absolute w-full h-full object-cover rounded-xl top-0"
-                />
-                <div className="grid grid-cols-12 gap-4 px-4 items-center relative z-20">
-                  <div className="col-span-full lg:col-span-7 order-2 lg:order-1 relative">
-                    <div className="relative lg:-left-14 overflow-hidden rounded-lg group">
-                      <div className="hidden group-hover:flex absolute top-0 left-0 rounded-lg bg-black/30 w-full h-full items-center justify-center transition-all">
-                        <a
-                          href="https://github.com/orgs/janhq/projects/5/views/16"
-                          target="_blank"
-                          className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 text-black bg-white hover:text-black"
-                        >
-                          <span>View Roadmap</span>
-                        </a>
-                      </div>
-                      <img
-                        src="/img/homepage/roadmap.webp"
-                        alt="Element Roadmap"
-                        className="h-full w-full object-cover"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-span-full lg:col-span-5 order-1 lg:order-2 text-black">
-                    <p className="text-4xl font-semibold">100% open source</p>
-                    <p className="leading-relaxed w-full lg:w-3/4 mt-4">
-                      Our core team believes that AI should be open source, and
-                      Jan is built in public.
-                    </p>
-                    <div className="mt-6">
-                      <SocialButton />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div> */}
-
-          {/* <div className="dark:bg-[#27272A] bg-zinc-100 pt-10 lg:pt-20 pb-10">
-            <div className="container">
-              <div className="w-full lg:w-3/4 mx-auto relative">
-                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
-                  <div className="col-span-5">
-                    <p className="text-3xl xl:text-4xl font-semibold">
-                      Desktop App
-                    </p>
-                    <p className="text-zinc-600 dark:text-zinc-400 mt-4 text-lg leading-relaxed">
-                      <b className="text-bold text-black dark:text-white">
-                        10x productivity
-                      </b>{' '}
-                      with customizable AI <br className="hidden lg:block" />{' '}
-                      assistants, global hotkeys, and in-line AI.
-                    </p>
-                  </div>
-                  <div className="col-span-7">
-                    <div className="bg-white dark:bg-[#09090B]/50 h-[375px] border border-zinc-200 dark:border-gray-800 rounded-xl overflow-hidden">
-                      <ThemedImage
-                        className="object-cover w-full object-center mx-auto h-full lg:-left-4 relative"
-                        alt="App screenshots"
-                        sources={{
-                          light: useBaseUrl(
-                            '/img/homepage/desktop-app-light.webp'
-                          ),
-                          dark: useBaseUrl(
-                            '/img/homepage/desktop-app-dark.webp'
-                          ),
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div> */}
-
-          {/* <div className="dark:bg-[#27272A] bg-zinc-100 lg:pb-20 pb-10 pt-10">
-            <div className="container">
-              <div className="w-full lg:w-3/4 mx-auto relative ">
-                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
-                  <div className="col-span-5">
-                    <div className="flex items-center">
-                      <p className="text-3xl xl:text-4xl font-semibold">
-                        Mobile App
-                      </p>
-                      <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
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
+              <a
+                href="https://github.com/janhq/jan"
+                target="_blank"
+                className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 "
+              >
+                <span>
+                  <FaGithub className="text-3xl" />
+                </span>
+                <div className="flex-col">
+                  <div className="flex items-center gap-2">
+                    <h6 className="text-base">Github</h6>
+                    <div className="text-sm text-black dark:text-white flex items-center space-x-1 py-1 px-2 rounded-md bg-[#E9E9E9] dark:bg-[#484748]">
+                      <RiStarSFill className="text-lg text-[#FEC928]" />
+                      <span className="font-semibold">
+                        {stargazers.count} stars
                       </span>
                     </div>
-                    <p className="text-zinc-600 dark:text-zinc-400 mt-4 text-lg leading-relaxed">
-                      Take your AI assistants on the go.{' '}
-                      <br className="hidden lg:block" /> Seamless integration
-                      into your&nbsp;
-                      <b className="text-bold text-black dark:text-white">
-                        mobile <br className="hidden lg:block" /> workflows
-                      </b>
-                      &nbsp; with elegant features.
-                    </p>
                   </div>
-                  <div className="col-span-7">
-                    <div className="bg-white dark:bg-[#09090B]/50 h-[375px] border border-zinc-200 dark:border-gray-800 rounded-xl">
-                      <ThemedImage
-                        className="object-cover w-full object-center mx-auto h-full"
-                        alt="App screenshots"
-                        sources={{
-                          light: useBaseUrl(
-                            '/img/homepage/mobile-app-light.webp'
-                          ),
-                          dark: useBaseUrl(
-                            '/img/homepage/mobile-app-dark.webp'
-                          ),
-                        }}
-                      />
+                  <p className="text-sm mt-1">
+                    Jan is entirely open source and free to use.
+                  </p>
+                </div>
+              </a>
+              <a
+                href="https://discord.gg/FTk2MvZwJH"
+                target="_blank"
+                className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 "
+              >
+                <span>
+                  <FaDiscord className="text-3xl" />
+                </span>
+                <div className="flex-col">
+                  <div className="flex items-center gap-2">
+                    <h6 className="text-base">Discord</h6>
+                    <div className="text-sm text-black dark:text-white flex items-center space-x-1 py-1 px-2 rounded-md bg-[#E9E9E9] dark:bg-[#484748]">
+                      <div className="w-2 h-2 bg-green-500 rounded-full" />
+                      <span className="font-semibold">
+                        {data.presence_count} online
+                      </span>
                     </div>
                   </div>
+                  <p className="text-sm mt-1">
+                    Join the community to ask questions, get help and learn
+                    more.
+                  </p>
                 </div>
-              </div>
-            </div>
-          </div> */}
-
-          {/* <div className="dark:bg-[#09090B]/20">
-            <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-6 h-[60px]">
-                    <img
-                      src="/img/homepage/ic-offline.webp"
-                      alt="Icon Offline"
-                      className="w-9 flex-shrink-0"
-                    />
-                    <img
-                      src="/img/homepage/ic-private.webp"
-                      alt="Icon Offline"
-                      className="w-12 flex-shrink-0"
-                    />
-                    <img
-                      src="/img/homepage/ic-folder.webp"
-                      alt="Icon Offline"
-                      className="w-9 flex-shrink-0"
-                    />
-                  </div>
-                  <div className="mt-8">
-                    <h2 className="text-3xl lg:text-4xl font-semibold">
-                      Offline and Local First
-                    </h2>
-                    <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.
-                    </p>
-
-                    <div className="grid grid-cols-12 mt-10 lg:mt-20 text-left gap-8">
-                      <div className="col-span-full lg:col-span-4">
-                        <div className="dark:bg-[#27272A] bg-zinc-100 rounded-xl p-8 min-h-[450px]">
-                          <h2 className="text-3xl lg:text-4xl font-semibold">
-                            OpenAI Compatible
-                          </h2>
-                          <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;
-                            <span className="bg-blue-600 text-white font-bold py-0.5 px-2 rounded-lg">
-                              1337
-                            </span>{' '}
-                            that can be used as a drop-in replacement with
-                            compatible apps.
-                          </p>
-
-                          <div className="mt-6">
-                            <div className="mb-4">
-                              <div className="bg-white dark:bg-[#18181B] shadow-lg py-2 px-4 inline-flex rounded-xl">
-                                <p className="font-medium">
-                                  /chats/completions
-                                </p>
-                              </div>
-                            </div>
-                            <div className="mb-4">
-                              <div className="bg-white dark:bg-[#18181B] shadow-lg py-2 px-4 inline-flex rounded-xl">
-                                <p className="font-medium">
-                                  Local server and API
-                                </p>
-                              </div>
-                            </div>
-                            <div className="mb-4">
-                              <div className="bg-white dark:bg-[#18181B] shadow-lg py-2 px-4 inline-flex rounded-xl">
-                                <p className="font-medium">
-                                  <span className="inline-block mr-2">
-                                    Assistants framework
-                                  </span>
-                                  <span className="bg-gray-300 dark:bg-gray-700 py-0.5 px-2 inline-block rounded-lg text-sm">
-                                    Coming Soon
-                                  </span>
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="col-span-full lg:col-span-8 items-center">
-                        <div className="card-gradient rounded-xl h-full relative text-center min-h-[450px]">
-                          <img
-                            src="/img/homepage/status.webp"
-                            alt="Element status"
-                            className="w-10/12 lg:p-20 object-cover absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-                          />
-                        </div>
-                      </div>
-                    </div>
+              </a>
+              <a
+                href="https://github.com/orgs/janhq/projects/5/views/16"
+                target="_blank"
+                className="card-wrapper dark:card-wrapper-dark p-4 inline-flex px-4 py-3 rounded-lg cursor-pointer justify-center items-start space-x-4 "
+              >
+                <span>
+                  <IoMapOutline className="text-3xl" />
+                </span>
+                <div className="flex-col">
+                  <div className="flex items-center gap-2">
+                    <h6 className="text-base">Roadmap</h6>
                   </div>
+                  <p className="text-sm mt-1">
+                    We build in public. See where we're headed!
+                  </p>
                 </div>
-              </div>
+              </a>
             </div>
-          </div> */}
-        </main>
-
-        {/* <main>
-          <div className="text-center py-24">
-            <h1 className="font-serif text-8xl">Rethink the Computer</h1>
-            <p>Turn your computer into a AI machine</p>
           </div>
-        </main> */}
+
+          {/* Wall of love */}
+          <div className="bg-[#F0F0F0] dark:bg-[#242424] p-8 mt-20">
+            <div className="w-full xl:w-3/5 mx-auto relative py-8 text-center">
+              <h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
+                People say nice things
+              </h1>
+              <p className="leading-relaxed mt-2 text-black/60 dark:text-white/60">
+                ...despite our bugs and fast moving releases
+              </p>
+            </div>
+          </div>
+
+          {/* Feature */}
+          <div className="w-full xl:w-10/12 mx-auto relative py-8">
+            <div className="flex p-4 lg:justify-between flex-col lg:flex-row items-end">
+              <div className="w-full">
+                <h1 className="text-5xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
+                  Jan redefines <br className="hidden lg:block" /> how we use
+                  computers
+                </h1>
+              </div>
+              <div className="mt-10 w-full lg:w-1/2 mr-auto text-right">
+                <p className="mt-6 text-blue-600 dark:text-blue-400">
+                  View Our Features
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Philosophy */}
+          <div className="p-8 mt-20 border-y border-gray-300 dark:border-gray-800">
+            <div className="w-full xl:w-3/4 mx-auto relative py-8 text-center">
+              <h1 className="text-5xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
+                Our Philosophy
+              </h1>
+              <p className="leading-relaxed mt-2 text-black/60 dark:text-white/60">
+                Jan is opinionated software on what AI should be
+              </p>
+
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 text-left mt-16">
+                <div>
+                  <svg
+                    width="32"
+                    height="32"
+                    viewBox="0 0 32 32"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M28.96 13.72V9.14H27.43V10.67H24.39V7.62H25.91V6.1H22.86V3.05H21.34V0H4.58V1.52H1.53V13.72H0V32H32V13.72H28.96ZM22.86 7.62V12.19H27.43V13.72H15.24V7.62H22.86ZM3.05 3.05H4.58V13.72H3.05V3.05ZM9.15 18.29H7.62V19.81H4.58V18.29H3.05V16.76H9.15V18.29ZM9.15 13.72H6.1V1.52H19.81V3.05H9.15V13.72ZM10.67 4.57H21.34V6.1H13.72V13.72H10.67V4.57ZM30.48 30.48H12.2V15.24H30.48V30.48Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M28.9601 22.86H27.4301V24.38H28.9601V22.86Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M28.9601 27.43H19.8101V28.95H28.9601V27.43Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M27.43 7.62H25.91V9.14H27.43V7.62Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M25.91 24.38H22.86V25.91H25.91V24.38Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M21.3401 22.86H19.8101V24.38H21.3401V22.86Z"
+                      fill="#4377E9"
+                    />
+                  </svg>
+                  <h5 className="mt-4 mb-2">Local-first</h5>
+                  <p className="text-black/60 dark:text-white/60">
+                    We believe your conversations and files should remain yours
+                    alone. That's why we prioritize local-first AI, running
+                    open-source models directly on your computer.
+                  </p>
+                </div>
+                <div>
+                  <svg
+                    width="29"
+                    height="32"
+                    viewBox="0 0 29 32"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M28.9495 22.8602H24.3795V21.3302H25.8995V19.8103H3.04994V21.3302H4.57491V22.8602H0V32H28.9495V22.8602ZM6.08989 21.3302H22.8496V22.8602H6.08989V21.3302ZM27.4295 30.4801H1.51997V24.3802H27.4295V30.4801Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M27.4294 1.52042H25.8994V19.8101H27.4294V1.52042Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M24.3795 25.8996H16.7596V27.4296H24.3795V25.8996Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M18.2796 10.6697H16.7596V12.1897H18.2796V10.6697Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M18.2796 7.62H16.7596V9.13997H18.2796V7.62Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M16.7596 12.1889H12.1897V13.7089H16.7596V12.1889Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M12.1896 10.6697H10.6597V12.1897H12.1896V10.6697Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M12.1896 7.62H10.6597V9.13997H12.1896V7.62Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M4.57483 18.2895H24.3845V3.04974H4.57483V18.2895ZM6.0898 4.56972H22.8495V16.7595H6.0898V4.56972Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M7.61977 25.8996H4.56982V28.9495H7.61977V25.8996Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M25.8995 0H3.04993V1.51997H25.8995V0Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M3.04987 1.52042H1.5199V19.8101H3.04987V1.52042Z"
+                      fill="#4377E9"
+                    />
+                  </svg>
+                  <h5 className="mt-4 mb-2">User-owned</h5>
+                  <p className="text-black/60 dark:text-white/60">
+                    Your data, your rules. Jan stores everything on your device
+                    in universal formats, giving you total freedom to move your
+                    data without tricks or traps.
+                  </p>
+                </div>
+                <div>
+                  <svg
+                    width="28"
+                    height="32"
+                    viewBox="0 0 28 32"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M27.715 9.90503H26.185V28.195H27.715V9.90503Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M26.185 28.195H24.665V29.715H26.185V28.195Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M26.185 8.38501H24.665V9.90501H26.185V8.38501Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M24.665 29.715H3.33496V31.235H24.665V29.715Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M24.665 6.85501H18.565V8.38501H24.665V6.85501Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M18.565 3.80502H17.045V6.85502H18.565V3.80502Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M17.045 2.285H15.525V3.805H17.045V2.285Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M15.525 0.765015H12.475V2.28501H15.525V0.765015Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M12.4749 2.285H10.9449V3.805H12.4749V2.285Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M10.945 3.80502H9.42499V6.85502H10.945V3.80502Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M7.905 17.525H6.375V20.575H7.905V17.525Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M6.37498 20.575H4.85498V22.095H6.37498V20.575Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M6.37498 15.995H4.85498V17.525H6.37498V15.995Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M9.42496 6.85501H3.33496V8.38501H9.42496V6.85501Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M1.80497 14.475V9.90503H0.284973V15.995H4.85497V14.475H1.80497Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M3.33499 28.195H1.80499V29.715H3.33499V28.195Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M3.33499 8.38501H1.80499V9.90501H3.33499V8.38501Z"
+                      fill="#4377E9"
+                    />
+                    <path
+                      d="M1.80497 23.615H4.85497V22.095H0.284973V28.195H1.80497V23.615Z"
+                      fill="#4377E9"
+                    />
+                  </svg>
+
+                  <h5 className="mt-4 mb-2">Fully Customizable</h5>
+                  <p className="text-black/60 dark:text-white/60">
+                    You can endlessly customize the experience with 3rd party
+                    extensions. You can adjust alignment, moderation, and
+                    censorship levels to your needs.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* CTA email newsletter */}
+          <div className="bg-[#F0F0F0] dark:bg-[#242424] text-center py-16">
+            <div className="w-full xl:w-10/12 mx-auto relative">
+              <div className="flex p-4 lg:justify-between flex-col lg:flex-row items-end">
+                <div className="w-full">
+                  <ThemedImage
+                    className="w-28 mx-auto h-auto"
+                    alt="App screenshots"
+                    sources={{
+                      light: useBaseUrl('/img/homepage/mac-system-black.png'),
+                      dark: useBaseUrl('/img/homepage/mac-system-white.png'),
+                    }}
+                  />
+                  <h1 className="text-5xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
+                    The Soul of a New Machine
+                  </h1>
+                  <p className="leading-relaxed text-black/60 dark:text-white/60">
+                    Follow our AI research and journey in building Jan
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Location and statistic */}
+          <div className="w-4/5 mx-auto pb-20 pt-32">
+            <div className="w-1/2 mx-auto pb-20">
+              <div className="grid grid-cols-4">
+                <div className="text-center">
+                  <h1>13</h1>
+                  <p className="font-medium text-black/60 dark:text-white/60">
+                    Core team
+                  </p>
+                </div>
+                <div className="text-center">
+                  <h1>32+</h1>
+                  <p className="font-medium text-black/60 dark:text-white/60">
+                    Contributors
+                  </p>
+                </div>
+                <div className="text-center">
+                  <h1>1722+</h1>
+                  <p className="font-medium text-black/60 dark:text-white/60">
+                    Pull Requests
+                  </p>
+                </div>
+                <div className="text-center">
+                  <h1>400K+</h1>
+                  <p className="font-medium text-black/60 dark:text-white/60">
+                    Downloads
+                  </p>
+                </div>
+              </div>
+            </div>
+            <ThemedImage
+              className="w-full mx-auto h-auto"
+              alt="App screenshots"
+              sources={{
+                light: useBaseUrl('/img/homepage/mapbase-light.png'),
+                dark: useBaseUrl('/img/homepage/mapbase.png'),
+              }}
+            />
+          </div>
+
+          {/* CTA Bottom */}
+          <div className="w-full xl:w-10/12 mx-auto relative py-8">
+            <div className="flex p-4 lg:justify-between flex-col lg:flex-row">
+              <div className="w-full">
+                <h1 className="text-5xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
+                  Change how <br className="hidden lg:block" /> you use
+                  computers
+                </h1>
+              </div>
+              <div className="mt-10 w-full lg:w-1/2 mr-auto text-right">
+                {!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 />
+                )}
+                <p className="mt-6 text-zinc-text-black/60 dark:text-white/60">
+                  <span className="text-blue-500 font-bold dark:text-blue-500">
+                    400K+
+                  </span>{' '}
+                  downloads | Free & Open Source
+                </p>
+              </div>
+            </div>
+          </div>
+        </main>
       </Layout>
     </>
   )
diff --git a/docs/src/styles/components/base.scss b/docs/src/styles/components/base.scss
index 8e1dd3cac..10d627b83 100644
--- a/docs/src/styles/components/base.scss
+++ b/docs/src/styles/components/base.scss
@@ -38,6 +38,10 @@
     @apply bg-white dark:bg-[#0C0C0C];
   }
 
+  #__docusaurus {
+    @apply bg-white dark:bg-[#0C0C0C];
+  }
+
   img {
     pointer-events: none;
   }
diff --git a/docs/src/styles/components/card.scss b/docs/src/styles/components/card.scss
index 0bd29b3c4..028612f71 100644
--- a/docs/src/styles/components/card.scss
+++ b/docs/src/styles/components/card.scss
@@ -29,6 +29,32 @@
       0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
       0px 1px 1px 0px #4c4c4c inset;
   }
+
+  .card-wrapper {
+    border-radius: 16px;
+    background: linear-gradient(180deg, #fafafa 0%, #ededed 100%);
+    box-shadow:
+      0px 4px 12px 0px rgba(0, 0, 0, 0.12),
+      0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
+      0px 1px 1px 0px #fff inset;
+  }
+
+  .card-wrapper-dark {
+    border-radius: 12px;
+    background: var(
+      --Linear-dark,
+      linear-gradient(
+        268deg,
+        rgba(117, 117, 117, 0.38) 0%,
+        rgba(121, 119, 128, 0.33) 100%
+      )
+    );
+    box-shadow:
+      0px 4px 12px 0px rgba(0, 0, 0, 0.12),
+      0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
+      0px 0.2px 1px 0px #fff inset;
+  }
+
   .card {
     @apply rounded-xl border bg-gray-50 border-gray-50 dark:border-[#202231] dark:bg-[#111217]/50;
 
diff --git a/docs/static/img/homepage/app-frame-dark.png b/docs/static/img/homepage/app-frame-dark.png
new file mode 100644
index 000000000..eac8a2cda
Binary files /dev/null and b/docs/static/img/homepage/app-frame-dark.png differ
diff --git a/docs/static/img/homepage/app-frame-light.png b/docs/static/img/homepage/app-frame-light.png
new file mode 100644
index 000000000..a7308ac3b
Binary files /dev/null and b/docs/static/img/homepage/app-frame-light.png differ
diff --git a/docs/static/img/homepage/mac-system-black.png b/docs/static/img/homepage/mac-system-black.png
new file mode 100644
index 000000000..1c1f78237
Binary files /dev/null and b/docs/static/img/homepage/mac-system-black.png differ
diff --git a/docs/static/img/homepage/mac-system-white.png b/docs/static/img/homepage/mac-system-white.png
new file mode 100644
index 000000000..9f45ef01e
Binary files /dev/null and b/docs/static/img/homepage/mac-system-white.png differ
diff --git a/docs/static/img/homepage/mapbase-light.png b/docs/static/img/homepage/mapbase-light.png
new file mode 100644
index 000000000..ee38cd576
Binary files /dev/null and b/docs/static/img/homepage/mapbase-light.png differ
diff --git a/docs/static/img/homepage/mapbase.png b/docs/static/img/homepage/mapbase.png
new file mode 100644
index 000000000..0cb773b02
Binary files /dev/null and b/docs/static/img/homepage/mapbase.png differ