diff --git a/docs/.env.example b/docs/.env.example
index 22f6e715f..56b26dafb 100644
--- a/docs/.env.example
+++ b/docs/.env.example
@@ -3,4 +3,5 @@ UMAMI_PROJECT_API_KEY=xxxx
 UMAMI_APP_URL=xxxx
 ALGOLIA_API_KEY=xxxx
 ALGOLIA_APP_ID=xxxx
-GITHUB_ACCESS_TOKEN=xxxx
\ No newline at end of file
+GITHUB_ACCESS_TOKEN=xxxx
+API_KEY_BREVO=xxxx
\ No newline at end of file
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 4e7e91baf..79d833413 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -341,7 +341,7 @@ const config = {
         // {
         //   type: "docSidebar",
         //   sidebarId: "pricingSidebar",
-        //   positionL: "left",
+        //   positionl: "left",
         //   label: "Pricing",
         // },
         // Navbar right
diff --git a/docs/package.json b/docs/package.json
index eb386d783..1c8f6fe34 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -40,10 +40,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
+    "react-tweet": "^3.2.0",
     "redocusaurus": "^2.0.0",
     "sass": "^1.69.3",
     "tailwind-merge": "^2.1.0",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.3.3",
+    "react-hook-form": "^7.47.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.0.0",
diff --git a/docs/src/containers/Footer/index.js b/docs/src/containers/Footer/index.js
index 186839e04..0f94120c9 100644
--- a/docs/src/containers/Footer/index.js
+++ b/docs/src/containers/Footer/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { AiOutlineGithub, AiOutlineTwitter } from 'react-icons/ai'
 import { BiLogoDiscordAlt, BiLogoLinkedin } from 'react-icons/bi'
+import { useForm } from 'react-hook-form'
 
 const socials = [
   {
@@ -105,8 +106,37 @@ const menus = [
 const getCurrentYear = new Date().getFullYear()
 
 export default function Footer() {
+  const { register, handleSubmit } = useForm({
+    defaultValues: {
+      email: '',
+    },
+  })
+
+  const onSubmit = (data) => {
+    const { email } = data
+    const options = {
+      method: 'POST',
+      headers: {
+        'accept': 'application/json',
+        'content-type': 'application/json',
+        'api-key': process.env.API_KEY_BREVO,
+      },
+      body: JSON.stringify({
+        updateEnabled: false,
+        email,
+        listIds: [13],
+      }),
+    }
+
+    if (email) {
+      fetch('https://api.brevo.com/v3/contacts', options)
+        .then((response) => response.json())
+        .catch((err) => console.error(err))
+    }
+  }
+
   return (
-    <footer className="flex-shrink-0 dark:bg-[#09090B]/10 bg-[#D4D4D8]/10 relative overflow-hidden py-10">
+    <footer className="flex-shrink-0 relative overflow-hidden py-10">
       <div className="container">
         <div className="grid grid-cols-2 gap-8 md:grid-cols-2 lg:grid-cols-6">
           <div className="lg:col-span-3 col-span-2">
@@ -121,6 +151,36 @@ export default function Footer() {
                 <br className="hidden lg:block" />
                 research and building Jan:
               </p>
+
+              <div className="mt-4">
+                <form className="relative" onSubmit={handleSubmit(onSubmit)}>
+                  <input
+                    type="email"
+                    className="w-full h-12 p-4 pr-14 rounded-xl border dark:border-gray-600 border-gray-300 dark:bg-[#252525]"
+                    placeholder="Enter your email"
+                    {...register('email')}
+                  />
+                  <button
+                    type="submit"
+                    className="absolute flex p-2 bg-black dark:bg-[#3B3B3C] w-8 h-8 border dark:border-gray-600 rounded-lg top-1/2 right-3 -translate-y-1/2"
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M6.09026 8.41933L3.72077 7.62985C1.24061 6.80348 0 6.3903 0 5.63033C0 4.87142 1.24061 4.45718 3.72077 3.63081L12.6938 0.639442C14.4393 0.0576106 15.3121 -0.233305 15.7727 0.227312C16.2333 0.687928 15.9424 1.56068 15.3616 3.30512L12.3692 12.2792C11.5428 14.7594 11.1296 16 10.3697 16C9.61076 16 9.19652 14.7594 8.37015 12.2792L7.57962 9.9108L12.1689 5.3215C12.3609 5.1227 12.4672 4.85645 12.4648 4.58008C12.4624 4.30372 12.3515 4.03935 12.1561 3.84392C11.9607 3.64849 11.6963 3.53764 11.4199 3.53524C11.1435 3.53284 10.8773 3.63908 10.6785 3.83108L6.09026 8.41933Z"
+                        fill="white"
+                      />
+                    </svg>
+                  </button>
+                </form>
+              </div>
             </div>
           </div>
           {menus.map((menu, i) => {
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 6a705f378..8ea903418 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -1,5 +1,7 @@
 import React from 'react'
 import DownloadApp from '@site/src/containers/DownloadApp'
+import { Tweet } from 'react-tweet'
+import { useForm } from 'react-hook-form'
 
 import useBaseUrl from '@docusaurus/useBaseUrl'
 import Layout from '@theme/Layout'
@@ -32,6 +34,35 @@ export default function Home() {
   const userAgent = isBrowser && navigator.userAgent
   const isBrowserChrome = isBrowser && userAgent.includes('Chrome')
 
+  const { register, handleSubmit } = useForm({
+    defaultValues: {
+      email: '',
+    },
+  })
+
+  const onSubmit = (data) => {
+    const { email } = data
+    const options = {
+      method: 'POST',
+      headers: {
+        'accept': 'application/json',
+        'content-type': 'application/json',
+        'api-key': process.env.API_KEY_BREVO,
+      },
+      body: JSON.stringify({
+        updateEnabled: false,
+        email,
+        listIds: [12],
+      }),
+    }
+
+    if (email) {
+      fetch('https://api.brevo.com/v3/contacts', options)
+        .then((response) => response.json())
+        .catch((err) => console.error(err))
+    }
+  }
+
   return (
     <>
       <Banner />
@@ -416,15 +447,35 @@ export default function Home() {
                   <p className="leading-relaxed text-black/60 dark:text-white/60">
                     Follow our AI research and journey in building Jan
                   </p>
+
+                  <div className="w-full lg:w-1/2 mt-8 mx-auto">
+                    <form
+                      className="relative"
+                      onSubmit={handleSubmit(onSubmit)}
+                    >
+                      <input
+                        type="email"
+                        className="w-full h-16 p-4 pr-14 rounded-xl border border-gray-600 dark:bg-white/10"
+                        placeholder="Enter your email"
+                        {...register('email')}
+                      />
+                      <button
+                        type="submit"
+                        className="absolute flex p-2 px-4 items-center dark:text-black bg-black text-white dark:bg-white h-12 border border-gray-600 rounded-lg top-1/2 right-3 -translate-y-1/2 font-medium"
+                      >
+                        Subscribe
+                      </button>
+                    </form>
+                  </div>
                 </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="lg:w-4/5 w-full px-4 mx-auto py-10 lg:pb-20 lg:pt-32">
+            <div className="w-full lg:w-1/2 mx-auto pb-20">
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                 <div className="text-center">
                   <h1>13</h1>
                   <p className="font-medium text-black/60 dark:text-white/60">
@@ -470,7 +521,7 @@ export default function Home() {
                   computers
                 </h1>
               </div>
-              <div className="mt-10 w-full lg:w-1/2 mr-auto text-right">
+              <div className="mt-10 w-full lg:w-1/2 mx-auto lg:mr-auto lg:text-right">
                 {!isBrowserChrome ? (
                   <div
                     onClick={() => handleAnchorLink()}
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 7a7642c14..ab27c92e4 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1156,7 +1156,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.23.7":
+"@babel/runtime@^7.21.0":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
   integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
@@ -2743,6 +2743,13 @@
     "@svgr/plugin-jsx" "^6.5.1"
     "@svgr/plugin-svgo" "^6.5.1"
 
+"@swc/helpers@^0.5.3":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.6.tgz#d16d8566b7aea2bef90d059757e2d77f48224160"
+  integrity sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==
+  dependencies:
+    tslib "^2.4.0"
+
 "@szmarczak/http-timer@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-5.0.1.tgz#c7c1bf1141cdd4751b0399c8fc7b8b664cd5be3a"
@@ -4846,6 +4853,13 @@ dagre-d3-es@7.0.10:
     d3 "^7.8.2"
     lodash-es "^4.17.21"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 dayjs@^1.11.7:
   version "1.11.10"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
@@ -9294,6 +9308,11 @@ react-helmet-async@^1.3.0:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-hook-form@^7.47.0:
+  version "7.51.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.0.tgz#757ae71b37c26e00590bd3788508287dcc5ecdaf"
+  integrity sha512-BggOy5j58RdhdMzzRUHGOYhSz1oeylFAv6jUSG86OvCIvlAvS7KvnRY7yoAf2pfEiPN7BesnR0xx73nEk3qIiw==
+
 react-icons@^4.11.0:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78"
@@ -9368,6 +9387,16 @@ react-tabs@^4.3.0:
     clsx "^1.1.0"
     prop-types "^15.5.0"
 
+react-tweet@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-tweet/-/react-tweet-3.2.0.tgz#653571842298b1c57076ec38f022ba640c3d2dde"
+  integrity sha512-eYLAX5ViOICQT/vkte/IzYZZDoBnl7hDO3Ns4++lKEFr/+BohPK5Rg+Lvbfx78Qtn3AjfDG5c6n+rOt7c2J6qg==
+  dependencies:
+    "@swc/helpers" "^0.5.3"
+    clsx "^2.0.0"
+    date-fns "^2.30.0"
+    swr "^2.2.4"
+
 "react@^17.0.0 || ^18.2.0", react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -10549,12 +10578,13 @@ swagger2openapi@^7.0.6:
     yaml "^1.10.0"
     yargs "^17.0.1"
 
-tailwind-merge@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.1.tgz#3f10f296a2dba1d88769de8244fafd95c3324aeb"
-  integrity sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==
+swr@^2.2.4:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.5.tgz#063eea0e9939f947227d5ca760cc53696f46446b"
+  integrity sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==
   dependencies:
-    "@babel/runtime" "^7.23.7"
+    client-only "^0.0.1"
+    use-sync-external-store "^1.2.0"
 
 tailwind-merge@^2.1.0:
   version "2.2.0"
@@ -10721,7 +10751,7 @@ tslib@2.5.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
 
-tslib@^2.0.3, tslib@^2.6.0:
+tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -10980,6 +11010,11 @@ use-editable@^2.3.3:
   resolved "https://registry.yarnpkg.com/use-editable/-/use-editable-2.3.3.tgz#a292fe9ba4c291cd28d1cc2728c75a5fc8d9a33f"
   integrity sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"