diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 986fff9a2..f0f025e67 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -16,266 +16,30 @@ export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <>
-      <AnnoncementBanner />
+      {/* <AnnoncementBanner /> */}
       <Layout
         title={`${siteConfig.tagline}`}
         description="Jan is a ChatGPT-alternative that runs on your own computer, with a local API server."
       >
-        <main className="bg-gray-50 dark:bg-gray-950/95 relative">
-          <div className="relative">
-            <ThemedImage
-              alt="App screenshot"
-              sources={{
-                light: useBaseUrl("/img/bg-hero-light.svg"),
-                dark: useBaseUrl("/img/bg-hero-dark.svg"),
-              }}
-              className="absolute w-full h-full opacity-10 dark:opacity-20 top-0 object-cover blur-3xl"
-            />
-            <div className="container pt-16">
-              <div className="grid grid-cols-1 items-center gap-4">
-                <div className="relative z-10 text-center ">
-                  {/* TODO: Add upcoming events here */}
-                  {/* <div className="bg-red-50 mb-4 inline-flex items-center py-1 rounded-full px-4 gap-x-2">
-                    <span className="font-bold uppercase text-blue-600">
-                      Event
-                    </span>
-                    <a href="/events/nvidia-llm-day-nov-23">
-                      <p className="font-bold">
-                        8 Nov 2023: Nvidia LLM Day (Hanoi)
-                      </p>
-                    </a>
-                  </div> */}
-                  <h1 className="bg-gradient-to-r dark:from-white from-black to-gray-500 dark:to-gray-400 bg-clip-text text-4xl lg:text-6xl font-bold leading-tight text-transparent dark:text-transparent lg:leading-tight">
-                    Own your AI
-                  </h1>
-                  <p className="text-xl leading-relaxed lg:text-2xl lg:leading-relaxed text-gray-500 dark:text-gray-400">
-                    A &nbsp;
-                    <span className="dark:text-white text-black">
-                      free, open-source
-                    </span>
-                    &nbsp;alternative to OpenAI
-                    <br />
-                    &nbsp;that runs on your&nbsp;
-                    <span className="dark:text-white text-black">
-                      personal computer
-                    </span>
-                  </p>
-
-                  <div className="my-6 flex flex-col-reverse md:flex-row items-center justify-center gap-4 relative z-20">
-                    <button
-                      type="button"
-                      className="cursor-pointer relative hidden md:inline-flex items-center px-4 py-2.5  text-base font-semibold rounded-lg border border-gray-400 dark:border-gray-700 text-gray-600 dark:text-white"
-                      onClick={() =>
-                        window.open(
-                          "https://github.com/janhq/jan",
-                          "_blank",
-                          "noreferrer"
-                        )
-                      }
-                    >
-                      View Github
-                    </button>
-                    <Dropdown />
-                  </div>
-                </div>
-
-                <div className="text-center relative ">
-                  <div className="p-3 border dark:border-gray-500 border-gray-400 inline-block rounded-lg">
-                    <ThemedImage
-                      alt="App screenshot"
-                      sources={{
-                        light: useBaseUrl("/img/desktop-llm-chat-light.png"),
-                        dark: useBaseUrl("/img/desktop-llm-chat-dark.png"),
-                      }}
-                      width={1000}
-                      className="rounded-md mx-auto"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="container mt-40 text-center">
-            <h2>AI that you control</h2>
-            <p className="text-base mt-2 w-full lg:w-2/5 mx-auto leading-relaxed">
-              Private. Local. Infinitely Customizable.
-            </p>
-            <div className="grid text-left lg:grid-cols-2 mt-16 gap-4">
-              <div className="card relative min-h-[380px] lg:min-h-[460px]">
-                <img
-                  src="/img/card-element.png"
-                  alt="Element"
-                  className="absolute w-full bottom-0 left-0"
-                />
-                <div className="p-8 relative z-40">
-                  <h5>Personal AI that runs on your computer</h5>
-                  <p className="mt-2">
-                    Jan runs directly on your local machine, offering privacy,
-                    convenience and customizability.
-                  </p>
-                  <ThemedImage
-                    alt="Group Chat"
-                    sources={{
-                      light: useBaseUrl("/img/group-chat-light.png"),
-                      dark: useBaseUrl("/img/group-chat-dark.png"),
-                    }}
-                    className="mt-10"
-                  />
-                </div>
-              </div>
-              <div className="card relative min-h-[380px] lg:min-h-[460px]">
-                <div className="p-8">
-                  <h5>Extendable via App and Plugin framework</h5>
-                  <p className="mt-2">
-                    Jan has a versatile app and plugin framework, allowing you
-                    to customize it to your needs.
-                  </p>
-                </div>
-                <ThemedImage
-                  alt="Framework"
-                  sources={{
-                    light: useBaseUrl("/img/card-framework-light.png"),
-                    dark: useBaseUrl("/img/card-framework-dark.png"),
-                  }}
-                  className="w-11/12 ml-auto mt-auto"
-                />
-              </div>
-              <div className="card relative min-h-[380px] lg:min-h-[460px]">
-                <div className="p-8">
-                  <h5>
-                    Private and offline, your data never leaves your machine
-                  </h5>
-                  <p className="mt-2">
-                    Your conversations and data are with an AI that runs on your
-                    computer, where only you have access.
-                  </p>
-                </div>
-                <ThemedImage
-                  alt="Group Chat"
-                  sources={{
-                    light: useBaseUrl("/img/card-nitro-light.png"),
-                    dark: useBaseUrl("/img/card-nitro-dark.png"),
-                  }}
-                  className="w-3/4 mx-auto mt-auto"
-                />
-              </div>
-              <div className="card relative min-h-[380px] lg:min-h-[460px]">
-                <div className="p-8">
-                  <h5>No subscription fees, the AI runs on your computer</h5>
-                  <p className="mt-2">
-                    Say goodbye to monthly subscriptions or usage-based APIs.
-                    Jan runs 100% free on your own hardware.
-                  </p>
-                </div>
-                <ThemedImage
-                  alt="Group Chat"
-                  sources={{
-                    light: useBaseUrl("/img/card-free-light.png"),
-                    dark: useBaseUrl("/img/card-free-dark.png"),
-                  }}
-                  className="w-full mt-auto mx-auto"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="container lg:px-20 py-40 lg:py-[200px] text-center lg:text-left">
-            <div className="flex  flex-col lg:flex-row space-y-20 lg:space-y-0">
-              <div>
-                <h1 className="bg-gradient-to-r dark:from-white from-black to-gray-500 dark:to-gray-400 bg-clip-text text-4xl lg:text-6xl font-bold leading-tight text-transparent dark:text-transparent lg:leading-tight">
-                  Your AI, forever.
+        <main>
+          <div className="container">
+            <div className="grid grid-cols-1 lg:grid-cols-12 mt-10 gap-8 items-center">
+              <div className="col-span-7">
+                <h1 className="bg-gradient-to-b dark:from-white from-black to-gray-700 dark:to-gray-400 bg-clip-text text-7xl font-semibold leading-tight text-transparent dark:text-transparent lg:leading-tight">
+                  Own your AI
                 </h1>
-                <p className="text-lg lg:text-2xl mt-2">
-                  Apps come and go, but your AI and data should last.{" "}
+                <p className="text-2xl mt-1">
+                  Jan is an open-source alternative to ChatGPT that runs on your
+                  own computer
                 </p>
-                <div className="w-full lg:w-3/4 mt-8">
-                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-24">
-                    <div>
-                      <img
-                        src="/img/ic-park-solid-unlock.svg"
-                        alt="Icon - Lock"
-                        className="w-8 mb-4 mx-auto lg:mx-0"
-                      />
-                      <p>
-                        Jan uses open, standard and non-proprietary files stored
-                        locally on your device.
-                      </p>
-                    </div>
-                    <div>
-                      <img
-                        src="img/ic-baseline-control-camera.svg"
-                        alt="Icon - Camera"
-                        className="w-8 mb-4 mx-auto lg:mx-0"
-                      />
-                      <p>
-                        You have total control over your AI, which means you can
-                        use Jan offline and switch to another app easily if you
-                        want.
-                      </p>
-                    </div>
-                  </div>
-                </div>
               </div>
-
-              <div className="w-full lg:w-80 text-center">
-                <ThemedImage
-                  alt="App screenshot"
-                  sources={{
-                    light: useBaseUrl("/img/jan-icon-light.png"),
-                    dark: useBaseUrl("/img/jan-icon-dark.png"),
-                  }}
-                  className="w-40 lg:w-full mx-auto"
-                />
-                <p className="mt-1 font-bold">100% free on your own hardware</p>
-                <DownloadLink />
-              </div>
-            </div>
-          </div>
-
-          <div className="container pb-40 text-center">
-            <h2>
-              We are open-source. <br /> Join Jan community.
-            </h2>
-            <div className="mt-14">
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                <a href="https://discord.com/invite/FTk2MvZwJH" target="_blank">
-                  <div className="card h-52 relative flex items-center justify-center">
-                    <div className="relative z-50">
-                      <img
-                        src="/img/discord-logo.png"
-                        alt="Discord logo"
-                        className="w-28"
-                      />
-                    </div>
-
-                    <div className="card-link card-link-bg dark:card-link-bg-dark absolute right-4 top-5">
-                      Join our Discord
-                    </div>
-                    <ThemedImage
-                      alt="Discord Element"
-                      sources={{
-                        light: useBaseUrl("/img/discord-element-light.png"),
-                        dark: useBaseUrl("/img/discord-element-dark.png"),
-                      }}
-                      className="absolute"
-                    />
-                  </div>
-                </a>
-                <a href="https://github.com/janhq/jan" target="_blank">
-                  <div className="card h-52 relative flex items-center justify-center">
-                    <div className="relative z-50">
-                      <AiOutlineGithub className="text-8xl dark:text-white text-black" />
-                    </div>
-                    <div className="card-link card-link-bg dark:card-link-bg-dark absolute right-4 top-5">
-                      View Github
-                    </div>
-                    <img
-                      alt="Github Element"
-                      src="/img/github-element-dark.png"
-                      className="absolute left-8"
-                    />
-                  </div>
-                </a>
+              <div className="col-span-5">
+                <p>
+                  Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+                  Error explicabo aperiam molestias neque quod ad id dolorum
+                  adipisci dicta magni possimus, tempore temporibus magnam nisi
+                  harum veritatis eaque molestiae suscipit.
+                </p>
               </div>
             </div>
           </div>
diff --git a/docs/src/styles/components.scss b/docs/src/styles/components.scss
deleted file mode 100644
index 3583c258c..000000000
--- a/docs/src/styles/components.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@layer components {
-  .el-blur-hero {
-    height: 200px;
-    background: linear-gradient(
-      180deg,
-      hsl(296, 100%, 67%) 0%,
-      hsl(253, 100%, 57%) 100%
-    );
-    z-index: 2;
-    border-bottom-left-radius: 100%;
-    border-bottom-right-radius: 100%;
-    border-top-left-radius: 100%;
-    border-top-right-radius: 100%;
-    filter: blur(100px);
-    -webkit-filter: blur(100px);
-    opacity: 0.5;
-  }
-}
diff --git a/docs/src/styles/base.scss b/docs/src/styles/components/base.scss
similarity index 87%
rename from docs/src/styles/base.scss
rename to docs/src/styles/components/base.scss
index b94081d66..31a09e914 100644
--- a/docs/src/styles/base.scss
+++ b/docs/src/styles/components/base.scss
@@ -1,7 +1,8 @@
 @layer base {
   
   html[data-theme="light"] {
-    --ifm-background-color: white;
+    --custom-radial-blur: #e1e7fd;
+    --ifm-background-color: #fafafa;
     --ifm-color-primary: #2563eb; /* New Primary Blue */
     --ifm-color-primary-dark: #204fcf; /* Darker Blue */
     --ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
@@ -13,8 +14,10 @@
     --ifm-navbar-link-hover-color: inherit;
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   }
+
   html[data-theme="dark"] {
-    --ifm-background-color: black;
+    --custom-radial-blur: #1d1b48;
+    --ifm-background-color: #18181b;
     --ifm-color-primary: #ffffff; /* New Primary Blue */
     --ifm-color-primary-dark: #204fcf; /* Darker Blue */
     --ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
@@ -24,12 +27,18 @@
     --ifm-color-primary-lightest: #3a8bff; /* Lightest Blue */
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   }
+
+  pre,
+  code {
+    @apply text-sm;
+  }
+
   body {
     @apply text-base;
     @apply antialiased;
-    @apply bg-white dark:bg-black;
-    @apply text-gray-800 dark:text-gray-300;
+    @apply bg-[#FAFAFA] dark:bg-[#18181B];
   }
+
   img {
     pointer-events: none;
   }
diff --git a/docs/src/styles/card.scss b/docs/src/styles/components/card.scss
similarity index 100%
rename from docs/src/styles/card.scss
rename to docs/src/styles/components/card.scss
diff --git a/docs/src/styles/typography.scss b/docs/src/styles/components/typography.scss
similarity index 100%
rename from docs/src/styles/typography.scss
rename to docs/src/styles/components/typography.scss
diff --git a/docs/src/styles/main.scss b/docs/src/styles/main.scss
index 459a1197b..216b960d3 100644
--- a/docs/src/styles/main.scss
+++ b/docs/src/styles/main.scss
@@ -2,8 +2,12 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "./typography.scss";
-@import "./tweaks.scss";
-@import "./base.scss";
-@import "./components.scss";
-@import "./card.scss";
+@import "./components/base.scss";
+@import "./components/typography.scss";
+@import "./components/card.scss";
+
+@import "./tweaks/navbar.scss";
+@import "./tweaks/breadcrumb.scss";
+@import "./tweaks/markdown.scss";
+@import "./tweaks/redocusaurus.scss";
+@import "./tweaks/sidebar.scss";
diff --git a/docs/src/styles/tweaks.scss b/docs/src/styles/tweaks.scss
index d5d016436..3531e8397 100644
--- a/docs/src/styles/tweaks.scss
+++ b/docs/src/styles/tweaks.scss
@@ -25,38 +25,6 @@
   display: none;
 }
 
-.navbar {
-  @apply px-0 lg:h-16 border-b border-gray-200 dark:border-gray-800 bg-white/50 backdrop-blur-lg dark:bg-black/50 shadow-none;
-
-  .navbar__toggle {
-    width: 24px;
-  }
-
-  .navbar-sidebar__backdrop {
-    height: 100dvh;
-  }
-
-  .navbar-sidebar {
-    height: 100dvh;
-    .navbar-sidebar__close {
-      width: 14px;
-    }
-  }
-
-  .navbar__title {
-    @apply text-lg;
-  }
-  .navbar__brand {
-    margin-right: 24px;
-    &:hover {
-      color: inherit;
-    }
-  }
-  .navbar__inner {
-    @apply container;
-  }
-}
-
 .breadcrumbs__item {
   position: relative;
   &:first-child {
diff --git a/docs/src/styles/tweaks/breadcrumb.scss b/docs/src/styles/tweaks/breadcrumb.scss
new file mode 100644
index 000000000..9091f8386
--- /dev/null
+++ b/docs/src/styles/tweaks/breadcrumb.scss
@@ -0,0 +1,18 @@
+.breadcrumbs {
+  @apply mb-8;
+
+  &__item {
+    position: relative;
+    &:first-child {
+      .breadcrumbs__link {
+        vertical-align: middle;
+        margin-top: -2px;
+      }
+    }
+  }
+
+  &__link {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+}
diff --git a/docs/src/styles/tweaks/markdown.scss b/docs/src/styles/tweaks/markdown.scss
new file mode 100644
index 000000000..7e8e33871
--- /dev/null
+++ b/docs/src/styles/tweaks/markdown.scss
@@ -0,0 +1,47 @@
+.theme-doc-markdown {
+  a {
+    @apply text-blue-600 dark:text-blue-400 underline;
+  }
+  ul {
+    list-style: revert;
+  }
+  ol {
+    list-style: decimal;
+  }
+  ul,
+  ol {
+    padding-left: 16px;
+    li {
+      @apply leading-normal;
+      p {
+        margin-bottom: 0;
+      }
+    }
+  }
+  p {
+    @apply mb-2;
+  }
+  h1 {
+    &:first-child {
+      @apply mb-4;
+    }
+  }
+
+  h1,
+  h2 {
+    @apply mb-3;
+  }
+
+  table {
+    width: 100%;
+    display: table;
+  }
+}
+
+.task-list-item {
+  list-style: none;
+}
+
+blockquote {
+  margin-bottom: 12px;
+}
diff --git a/docs/src/styles/tweaks/navbar.scss b/docs/src/styles/tweaks/navbar.scss
new file mode 100644
index 000000000..96c074455
--- /dev/null
+++ b/docs/src/styles/tweaks/navbar.scss
@@ -0,0 +1,34 @@
+.navbar {
+  @apply my-4 bg-transparent py-0 shadow-none top-4;
+  &:before {
+    width: 100%;
+    height: 16px;
+    top: -16px;
+    position: absolute;
+    content: "";
+    left: 0;
+    @apply dark:bg-[#09090B]/10 backdrop-blur-md;
+  }
+
+  &__inner {
+    @apply border border-gray-300 dark:border-gray-800 rounded-lg bg-[#E4E4E7]/50 dark:bg-[#09090B]/50 backdrop-blur-md flex items-center h-14 px-8 relative;
+  }
+
+  &__logo {
+    @apply flex items-center;
+  }
+
+  &__brand {
+    &:hover {
+      @apply dark:text-white text-black;
+    }
+  }
+
+  &__title {
+    font-size: 18px;
+  }
+
+  [class*="searchBox_"] {
+    display: none;
+  }
+}
diff --git a/docs/src/styles/tweaks/redocusaurus.scss b/docs/src/styles/tweaks/redocusaurus.scss
new file mode 100644
index 000000000..b2cff9ba7
--- /dev/null
+++ b/docs/src/styles/tweaks/redocusaurus.scss
@@ -0,0 +1,23 @@
+.redocusaurus {
+  .menu-content {
+    top: 80px !important;
+    background-color: transparent;
+  }
+
+  .scrollbar-container {
+    ul > li > label {
+      margin-bottom: 4px;
+      background-color: transparent;
+    }
+
+    ul > li > ul > li > label {
+      background-color: transparent;
+      &:hover {
+        @apply dark:bg-gray-800/50 bg-gray-100;
+      }
+      &.active {
+        @apply dark:bg-gray-800/50 bg-gray-100;
+      }
+    }
+  }
+}
diff --git a/docs/src/styles/tweaks/sidebar.scss b/docs/src/styles/tweaks/sidebar.scss
new file mode 100644
index 000000000..a0e229808
--- /dev/null
+++ b/docs/src/styles/tweaks/sidebar.scss
@@ -0,0 +1,41 @@
+// * Classname from Docusaurus template
+// * We just overide the styling with applied class from tailwind
+
+[class*="docSidebarContainer_"] {
+  margin-top: 0 !important;
+  @apply dark:border-gray-800 border-gray-300;
+}
+
+[class*="sidebar_"] {
+  padding-top: 0 !important;
+}
+
+[class*="sidebarViewport_"] {
+  top: 80px !important;
+  height: unset !important;
+}
+
+[class*="docItemCol_"] {
+  @apply lg:px-8;
+}
+
+// * Including custom sidebar table of content
+.table-of-contents {
+  @apply text-base py-0 dark:border-gray-800 border-gray-300;
+}
+
+.menu__caret:before {
+  background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
+}
+
+[class*="codeBlockContainer_"] {
+  margin: 4px;
+}
+
+[class*="codeBlockTitle_"] {
+  border-bottom: 1px solid #52525a !important;
+}
+
+[class*="iconExternalLink_"] {
+  display: none;
+}
diff --git a/docs/src/theme/Layout/index.js b/docs/src/theme/Layout/index.js
index 22c4cc131..15fece0f6 100644
--- a/docs/src/theme/Layout/index.js
+++ b/docs/src/theme/Layout/index.js
@@ -47,7 +47,7 @@ export default function Layout(props) {
         </ErrorBoundary>
       </div>
 
-      {!noFooter && <Footer />}
+      {/* {!noFooter && <Footer />} */}
     </LayoutProvider>
   );
 }
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
index 24c343197..6cf90b217 100644
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -7,9 +7,6 @@ module.exports = {
     container: {
       center: true,
       padding: "16px",
-      screens: {
-        "2xl": "1400px",
-      },
     },
     fontFamily: {
       sans: [