diff --git a/astro-i18next.config.ts b/astro-i18next.config.ts
index 2b3e6b322..a118d1132 100644
--- a/astro-i18next.config.ts
+++ b/astro-i18next.config.ts
@@ -2,6 +2,6 @@
 export default {
   defaultLocale: "en",
   showDefaultLocale: true,
-  locales: ["en", "zh", "es"],
+  locales: ["en", "es"],
   load: ["server", "client"],
 }
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index ad8a263e6..7f6aeb42a 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -48,9 +48,12 @@
       }
     },
     "NewsletterCTA": {
-      "title": "Stay updated on the latest Scroll news",
-      "placeholder": "Enter your email address",
-      "buttonText": "Sign up"
+      "title": "Stay up-to-date on the latest Scroll Developer news",
+      "text": "Roadmap updates, virtual and live events, ecosystem opportunities and more",
+      "placeholder": "your email address here",
+      "thankYouForSubscribing": "Thank you for subscribing!",
+      "correctEmail": "Please use a correct email address.",
+      "pleaseInsertEmail": "Please insert your email."
     }
   },
   "sidebar": {
@@ -152,6 +155,30 @@
       "additionalResources": "Additional Resources"
     }
   },
+  "footer": {
+    "aboutScroll": {
+      "title": "About Scroll",
+      "bugBounty": "Bug Bounty",
+      "joinUs": "Join Us",
+      "healthStatus": "Health Status",
+      "privacyPolicy": "Privacy Policy",
+      "termsAndConditions": "Terms and Conditions"
+    },
+    "resources": {
+      "title": "Resources",
+      "scrollDocsURL": "https://docs.scroll.io/",
+      "blog": "Blog",
+      "documentation": "Documentation",
+      "pressKit": "Press Kit"
+    },
+    "followUs": {
+      "title": "Follow Us"
+    }
+  },
+  "pageNotFound": {
+    "title": "Page not found",
+    "text": "We're sorry, but we couldn't find the page you were looking for."
+  },
   "notTranslated": {
     "notTranslated": "This page has not been translated yet."
   }
diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json
index e31da1785..33a54ed87 100644
--- a/public/locales/es/translation.json
+++ b/public/locales/es/translation.json
@@ -48,9 +48,12 @@
       }
     },
     "NewsletterCTA": {
-      "title": "Stay updated on the latest Scroll news",
-      "placeholder": "Enter your email address",
-      "buttonText": "Sign up"
+      "title": "Mantente actualizado con las más recientes noticias sobre el Desarrollo de Scroll",
+      "text": "Roadmap, actualizaciones, eventos virtuales y presenciales, oportunidades en el ecosistema y más",
+      "placeholder": "tu correo electrónico aquí",
+      "thankYouForSubscribing": "¡Gracias por suscribirte!",
+      "correctEmail": "Por favor usa un correo electrónico válido.",
+      "pleaseInsertEmail": "Por favor ingresa tu correo electrónico."
     }
   },
   "sidebar": {
@@ -152,7 +155,32 @@
       "additionalResources": "Recursos Adicionales"
     }
   },
+  "footer": {
+    "aboutScroll": {
+      "title": "Acerca de Scroll",
+      "bugBounty": "Cazarecompensas de bugs",
+      "joinUs": "Únete a nosotros",
+      "healthStatus": "Estado de servicios",
+      "privacyPolicy": "Políticas de privacidad",
+      "termsAndConditions": "Terminos y condiciones"
+    },
+    "resources": {
+      "title": "Recursos",
+      "scrollDocsURL": "https://docs.scroll.io/es",
+      "blog": "Blog",
+      "documentation": "Documentación",
+      "pressKit": "Kit de Prensa"
+    },
+    "followUs": {
+      "title": "Síguenos"
+    }
+  },
+  "pageNotFound": {
+    "title": "Página no encontrada",
+    "text": "Lo sentimos, pero no pudimos encontrar la página que buscas."
+  },
   "notTranslated": {
     "notTranslated": "Esta página no ha sido traducida aún."
-  }
+  },
+  "This email cannot be added to this list. Please enter a different email address.": "Este correo electrónico no puede ser añadido a la lista. Por favor ingresa uno diferente."
 }
diff --git a/src/components/Footer/Footer.astro b/src/components/Footer/Footer.astro
new file mode 100644
index 000000000..5feac5c91
--- /dev/null
+++ b/src/components/Footer/Footer.astro
@@ -0,0 +1,10 @@
+---
+import Subscribe from "./Subscribe/Subscribe.tsx"
+import PureFooter from "./PureFooter/PureFooter.tsx"
+import i18next from "i18next"
+---
+
+<div>
+  <Subscribe client:idle lang={i18next.language} />
+  <PureFooter />
+</div>
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
deleted file mode 100644
index 9c6b422b7..000000000
--- a/src/components/Footer/Footer.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// import PureFooter from "./PureFooter"
-import React, { useState, useCallback } from "react"
-import Subscribe from "./Subscribe/Subscribe.tsx"
-import PureFooter from "./PureFooter/PureFooter.tsx"
-
-const Footer = () => {
-  return (
-    <>
-      <Subscribe />
-      <PureFooter />
-    </>
-  )
-}
-
-export default Footer
diff --git a/src/components/Footer/PureFooter/PureFooter.tsx b/src/components/Footer/PureFooter/PureFooter.tsx
index ee126d83f..6ce32e8b2 100644
--- a/src/components/Footer/PureFooter/PureFooter.tsx
+++ b/src/components/Footer/PureFooter/PureFooter.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "preact/hooks"
 import { aboutList, mediaList, resourceList } from "../helper.tsx"
 import styles from "./PureFooter.module.css"
+import { t } from "i18next"
 
 const Footer = () => {
   return (
@@ -9,28 +10,28 @@ const Footer = () => {
         <img src="/scroll-white.svg" style={{ width: "80px" }} />
       </a>
       <div className={styles.about}>
-        <p className={styles.title}>About Scroll</p>
+        <p className={styles.title}>{ t("footer.aboutScroll.title") }</p>
         <ul>
           {aboutList.map((item) => (
             <li key={item.name} className={styles.content}>
-              <a href={item.href}>{item.name}</a>
+              <a href={item.href}>{t(item.name)}</a>
             </li>
           ))}
         </ul>
       </div>
       <div className={styles.resource}>
-        <p className={styles.title}>Resources</p>
+        <p className={styles.title}>{ t("footer.resources.title") }</p>
         <ul>
           {resourceList.map((item) => (
             <li key={item.name} className={styles.content}>
-              <a href={item.href}>{item.name}</a>
+              <a href={item.href}>{t(item.name)}</a>
             </li>
           ))}
         </ul>
       </div>
 
       <div className={styles.follow}>
-        <p className={styles.title}>Follow Us</p>
+        <p className={styles.title}>{ t("footer.followUs.title") }</p>
         <div>
           {mediaList.map((item) => (
             <a external href={item.href} key={item.name} target="_blank">
@@ -39,8 +40,6 @@ const Footer = () => {
           ))}
         </div>
       </div>
-
-      <p className={styles.version}>© Version 1.0.0 Scroll Ltd 2023</p>
     </div>
   )
 }
diff --git a/src/components/Footer/Subscribe/EmailInput.tsx b/src/components/Footer/Subscribe/EmailInput.tsx
index 8905a6049..b177f6914 100644
--- a/src/components/Footer/Subscribe/EmailInput.tsx
+++ b/src/components/Footer/Subscribe/EmailInput.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import styles from "./EmailInput.module.css"
 import ArrowSvg from "~/assets/svgs/footer/arrow-right.svg?react"
 import { clsx } from "~/lib"
+import { t } from "i18next"
 
 const EmailInput = (props) => {
   const { end, onClick, onEnter, ...restProps } = props
@@ -23,7 +24,7 @@ const EmailInput = (props) => {
         <button className={clsx(styles.iconButton, "dark:text-black")} onClick={onClick} disabled={end}>
           <ArrowSvg></ArrowSvg>
         </button>
-        <div className={clsx(styles.success, "dark:text-black", "dark:bg-white")}>Thank you for subscribing!</div>
+        <div className={clsx(styles.success, "dark:text-black", "dark:bg-white")}>{ t("landing.NewsletterCTA.thankYouForSubscribing") }</div>
       </div>
       <input
         placeholder="your email address here"
diff --git a/src/components/Footer/Subscribe/Subscribe.tsx b/src/components/Footer/Subscribe/Subscribe.tsx
index 6ab9d9824..b3ff1e221 100644
--- a/src/components/Footer/Subscribe/Subscribe.tsx
+++ b/src/components/Footer/Subscribe/Subscribe.tsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from "preact/hooks"
 import MailchimpSubscribe from "react-mailchimp-subscribe"
 import SubscribeSvg from "~/assets/svgs/footer/subscribe.svg?react"
 import { clsx } from "~/lib"
+import i18next, { changeLanguage, t } from "i18next"
 
 import EmailInput from "./EmailInput.tsx"
 import styles from "./Subscribe.module.css"
@@ -14,11 +15,13 @@ const isValidEmail = (email: string): boolean => {
   return emailRegex.test(email)
 }
 
-export default function Subscribe() {
+export default function Subscribe(props) {
   const [email, setEmail] = useState("")
   const [customMessage, setCustomMessage] = useState("")
   const [emailValid, setEmailValid] = useState(false)
 
+  i18next.changeLanguage(props.lang)
+
   useEffect(() => {
     setCustomMessage("")
     setEmailValid(isValidEmail(email))
@@ -26,9 +29,9 @@ export default function Subscribe() {
 
   const handleSubmit = (subscribe) => {
     if (!email) {
-      setCustomMessage("Please insert your email.")
+      setCustomMessage(t("landing.NewsletterCTA.pleaseInsertEmail"))
     } else if (!emailValid) {
-      setCustomMessage("Please use a correct email address.")
+      setCustomMessage(t("landing.NewsletterCTA.correctEmail"))
     } else {
       subscribe({ EMAIL: email })
       setEmail("")
@@ -47,9 +50,9 @@ export default function Subscribe() {
         </span>
 
         <div className={styles.copyBox}>
-          <div className={styles.subscribeTitle}>Stay up-to-date on the latest Scroll Developer news</div>
+          <div className={styles.subscribeTitle}>{ t("landing.NewsletterCTA.title") }</div>
           <div className={styles.subscribeText}>
-            Roadmap updates, virtual and live events, ecosystem opportunities and more
+          { t("landing.NewsletterCTA.text") }
           </div>
         </div>
         <MailchimpSubscribe
@@ -62,11 +65,11 @@ export default function Subscribe() {
                 onChange={handleChangeEmail}
                 onClick={() => handleSubmit(subscribe)}
                 onEnter={() => handleSubmit(subscribe)}
-                placeholder="your email address here"
+                placeholder= { t("landing.NewsletterCTA.placeholder") }
                 end={status === "success"}
               />
               {customMessage && <div className={styles.errorMessage}>{customMessage}</div>}
-              {status === "error" && <div className={styles.errorMessage}>{message}</div>}
+              {status === "error" && <div className={styles.errorMessage}>{t(message)}</div>}
             </div>
           )}
         />
diff --git a/src/components/Footer/helper.tsx b/src/components/Footer/helper.tsx
index c195d7dac..c49d5239d 100644
--- a/src/components/Footer/helper.tsx
+++ b/src/components/Footer/helper.tsx
@@ -23,38 +23,38 @@ const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
 
 export const aboutList = [
   {
-    name: "Bug Bounty",
+    name: "footer.aboutScroll.bugBounty",
     href: "https://immunefi.com/bounty/scroll/",
   },
   {
-    name: "Join Us",
+    name: "footer.aboutScroll.joinUs",
     href: "https://jobs.lever.co/ScrollFoundation",
   },
   {
-    name: "Health Status",
+    name: "footer.aboutScroll.healthStatus",
     href: "https://status.scroll.io/",
   },
   {
-    name: "Privacy Policy",
+    name: "footer.aboutScroll.privacyPolicy",
     href: "https://scroll.io/privacy-policy",
   },
   {
-    name: "Terms and Conditions",
+    name: "footer.aboutScroll.termsAndConditions",
     href: "https://scroll.io/terms-and-conditions",
   },
 ]
 
 export const resourceList = [
   {
-    name: "Blog",
+    name: "footer.resources.blog",
     href: "https://scroll.io/blog",
   },
   {
-    name: "Documentation",
+    name: "footer.resources.documentation",
     href: "https://docs.scroll.io/",
   },
   {
-    name: "Press Kit",
+    name: "footer.resources.pressKit",
     href: "https://scrollzkp.notion.site/Scroll-Rebrand-Assets-5bb83465f56f40989c4f772b39ed3a06",
   },
 ]
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index 430a70354..0433515cd 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -76,8 +76,10 @@ const section = frontmatter?.section ?? ""
             </div>
           )
         }
-        <ThemeModeToggle client:only="preact" dark={dark} />
-        <LanguageSelector class="language-selector" />
+        <span class="theme-item">
+          <ThemeModeToggle client:only="preact" dark={dark} />
+        </span>
+        <LanguageSelector class="language-selector" dark={dark} />
         <a href="https://github.com/scroll-tech/scroll-documentation" class="github-url" target="_blank" rel="nofollow">
           <span
             class={clsx(
@@ -113,6 +115,7 @@ const section = frontmatter?.section ?? ""
     padding-top: 7px;
     @apply text-black dark:text-white;
     color: var(--textColor);
+    white-space: nowrap;
   }
   .nav-link:hover {
     @apply text-link;
@@ -243,4 +246,33 @@ const section = frontmatter?.section ?? ""
       grid-template-columns: minmax(230px, 1fr) 5fr;
     }
   }
+
+  /* Very Hacky way to make Spanish not break at narrow screens */
+
+  @media (max-width: 72em) and (min-width: 50em) {
+    .queryResults {
+      grid-template-columns: 1fr !important;
+    }
+
+    .search-item,
+    .github-url {
+      display: none;
+    }
+  }
+
+  @media (max-width: 62em) and (min-width: 50em) {
+    .theme-item {
+      display: none;
+    }
+  }
+
+  @media (max-width: 58em) and (min-width: 50em) {
+    .tools {
+      transform: scale(0.85);
+    }
+
+    .navbar {
+      gap: 25px;
+    }
+  }
 </style>
diff --git a/src/components/Header/LanguageSelector/LanguageSelector.astro b/src/components/Header/LanguageSelector/LanguageSelector.astro
index 874a80472..c34f94314 100644
--- a/src/components/Header/LanguageSelector/LanguageSelector.astro
+++ b/src/components/Header/LanguageSelector/LanguageSelector.astro
@@ -3,93 +3,136 @@ import i18next from "i18next"
 import { localizePath } from "astro-i18next"
 import localeEmoji from "locale-emoji"
 import ISO6991 from "iso-639-1"
+import { clsx } from "~/lib"
 
 const supportedLanguages = i18next.languages
-const currentLanguage = i18next.language
 
 const { pathname } = Astro.url
 
-const { showFlag = false, languageMapping, ...attributes } = Astro.props
----
+const { showFlag = false, languageMapping } = Astro.props
+const { dark } = Astro.props
+
+const getLabel = (language) => {
+  const flag = showFlag ? localeEmoji(language) + " " : ""
+  let nativeName = ""
+  if (languageMapping && languageMapping.hasOwnProperty(language)) {
+    nativeName = languageMapping[language]
+  } else {
+    nativeName = ISO6991.getNativeName(language)
+  }
 
-<div class="language-selector">
-  <ul class="options-list">
-    {
-      supportedLanguages.map((supportedLanguage) => {
-        let value = localizePath(pathname, supportedLanguage)
-        const flag = showFlag ? localeEmoji(supportedLanguage) + " " : ""
-        let nativeName = ""
-        if (languageMapping && languageMapping.hasOwnProperty(supportedLanguage)) {
-          nativeName = languageMapping[supportedLanguage]
-        } else {
-          nativeName = ISO6991.getNativeName(supportedLanguage)
-        }
+  return flag + nativeName
+}
+---
 
-        const label = flag + nativeName
+<div class={clsx("language-selector", dark && "dark")}>
+  <div class="current-language">
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+      <path
+        d="M12.0886 2.19173C11.899 1.99095 11.5825 1.98187 11.3817 2.17145C11.181 2.36103 11.1719 2.67748 11.3615 2.87827L12.0886 2.19173ZM9.82896 1.70578C10.0724 1.83614 10.3754 1.74448 10.5058 1.50104C10.6361 1.25761 10.5445 0.954588 10.301 0.824224L9.82896 1.70578ZM6.475 0.71L6.83644 1.05549L6.83781 1.05405L6.475 0.71ZM6.51 13.325L6.84218 12.9513L6.84158 12.9508L6.51 13.325ZM7.43 13.27L7.8006 13.6056L7.80182 13.6043L7.43 13.27ZM11.3615 2.87827C12.3774 3.95429 13 5.40282 13 7H14C14 5.13718 13.2726 3.44571 12.0886 2.19173L11.3615 2.87827ZM13 7C13 10.3139 10.3139 13 7 13V14C10.8661 14 14 10.8661 14 7H13ZM7 13C3.68614 13 1 10.3139 1 7H0C0 10.8661 3.13386 14 7 14V13ZM1 7C1 3.68614 3.68614 1 7 1V0C3.13386 0 0 3.13386 0 7H1ZM7 1C8.02607 1 8.98516 1.25391 9.82896 1.70578L10.301 0.824224C9.31484 0.296094 8.19393 0 7 0V1ZM1.50005 4.99H12.965V3.99H1.50005V4.99ZM1.49999 9.995H12.97V8.995H1.49999V9.995ZM7.81355 0.406447C7.39863 -0.00847185 6.63779 -0.188318 6.11219 0.365954L6.83781 1.05405C6.86485 1.02554 6.89025 1.0169 6.92687 1.01975C6.97276 1.02331 7.04172 1.04883 7.10645 1.11355L7.81355 0.406447ZM6.11356 0.364509C5.02397 1.5044 4 3.93397 4 7.225H5C5 4.10603 5.97603 1.9556 6.83644 1.05549L6.11356 0.364509ZM4 7.225C4 10.5231 5.07388 12.7206 6.17842 13.6992L6.84158 12.9508C6.01612 12.2194 5 10.3369 5 7.225H4ZM6.17782 13.6987C6.65963 14.127 7.3826 14.0672 7.8006 13.6056L7.0594 12.9344C6.9974 13.0028 6.90037 13.003 6.84218 12.9513L6.17782 13.6987ZM7.80182 13.6043C8.80675 12.4865 10 10.6511 10 7.23H9C9 10.3689 7.92325 11.9735 7.05818 12.9357L7.80182 13.6043ZM10 7.23C10 3.85511 8.90599 1.49888 7.81355 0.406447L7.10645 1.11355C7.96401 1.97112 9 4.04489 9 7.23H10Z"
+        fill="currentColor"></path>
+    </svg>
+    <span>{getLabel(supportedLanguages[0])}</span>
+  </div>
+  <div class="options-modal">
+    <ul class="options-list">
+      {
+        supportedLanguages.map((supportedLanguage, idx) => {
+          let value = localizePath(pathname, supportedLanguage)
+          const label = getLabel(supportedLanguage)
 
-        return (
-          <li value={value} onclick={`if ("${value}" !== window.location.pathname) location.href = "${value}";`}>
-            {label}
-          </li>
-        )
-      })
-    }
-  </ul>
+          return (
+            <li value={value} onclick={`if ("${value}" !== window.location.pathname) location.href = "${value}";`}>
+              {idx === 0 ? (
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="currentColor" />
+                  <circle cx="7.99989" cy="8.00007" r="4.8" fill="currentColor" />
+                </svg>
+              ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="currentColor" />
+                </svg>
+              )}
+              <span>{label}</span>
+            </li>
+          )
+        })
+      }
+    </ul>
+  </div>
 </div>
 
 <style>
   .language-selector {
     position: relative;
-    height: 22px;
-    width: 83px;
+  }
+
+  .language-selector:hover .options-modal {
+    display: flex;
+  }
+
+  .options-modal {
+    position: absolute;
+    top: 36px;
     display: none;
+    padding-top: 4px;
+  }
+  .current-language {
+    width: 100px;
+    border-radius: 5px;
+    border-width: 1px;
+    border-style: solid;
+    display: flex;
+    height: 36px;
+    padding: 0 12px;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    @apply text-black dark:text-white border-black dark:border-white;
   }
 
   .options-list {
-    width: 83px;
-    background-repeat: no-repeat;
-    background-position: right 6px top 3px;
-    background-size: 1em;
-    text-align: center;
+    width: 100px;
     font-size: 14px;
     font-weight: 500;
-    line-height: 22px;
-    height: 22px;
     letter-spacing: 0.14px;
-    padding: 0px 15px;
+    padding: 4px 12px;
     border-radius: 5px;
-    border: 1px solid var(--black-100);
+    border-width: 1px;
+    border-style: solid;
     overflow: hidden;
     cursor: pointer;
-    position: absolute;
-    top: 0;
     transition: height 0.3s ease;
-    background-size: 8px;
-    @apply bg-white dark:bg-dark-normal border-black dark:border-white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    @apply bg-pure-white dark:bg-black border-black dark:border-white;
   }
 
-  .options-list:hover {
-    height: auto;
+  .options-list li {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    padding: 8px 0px;
+    @apply text-black dark:text-white;
   }
 
-  .options-list li:hover {
-    color: var(--orange-500);
+  .options-list li svg,
+  .current-language svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    color: inherit;
   }
 
-  @media (min-width: 50em) {
-    .language-selector {
-      width: 94px;
-      height: 35px;
-    }
-
-    .options-list {
-      background-position: right 8px top 14px;
-
-      font-weight: 400;
-      line-height: 35px;
-      letter-spacing: 0.16px;
-      height: 35px;
-      width: 94px;
-    }
+  .options-list li span,
+  .current-language span {
+    flex: 1;
+    text-align: left;
+    margin-left: 8px;
+    color: inherit;
   }
 </style>
diff --git a/src/components/Header/Search/Search.module.css b/src/components/Header/Search/Search.module.css
index 3aad23a44..59cb45200 100644
--- a/src/components/Header/Search/Search.module.css
+++ b/src/components/Header/Search/Search.module.css
@@ -244,9 +244,9 @@
 }
 
 @media (max-width: 72em) and (min-width: 50em) {
-  :global(.right-box .tools) {
+  /* :global(.right-box .tools) {
     display: none;
-  }
+  } */
 
   .queryResults {
     grid-template-columns: 1fr !important;
diff --git a/src/layouts/HomeLayout.astro b/src/layouts/HomeLayout.astro
index 1c489978a..8f5c51e4e 100644
--- a/src/layouts/HomeLayout.astro
+++ b/src/layouts/HomeLayout.astro
@@ -3,7 +3,7 @@ import HeadCommon from "../components/HeadCommon.astro"
 import HeadSEO from "../components/HeadSEO.astro"
 import Header from "../components/Header/Header.astro"
 import * as CONFIG from "../config"
-import Footer from "~/components/Footer/Footer"
+import Footer from "~/components/Footer/Footer.astro"
 import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro"
 
 const { content = {} } = Astro.props
@@ -23,6 +23,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
       body {
         --doc-padding: 65px;
       }
+
       .home-layout {
         margin-bottom: 0;
       }
@@ -77,6 +78,6 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
     <main class="home-layout">
       <slot />
     </main>
-    <Footer client:idle />
+    <Footer />
   </body>
 </html>
diff --git a/src/layouts/LandingLayout.astro b/src/layouts/LandingLayout.astro
deleted file mode 100644
index 8448d915b..000000000
--- a/src/layouts/LandingLayout.astro
+++ /dev/null
@@ -1,125 +0,0 @@
----
-import HeadCommon from "../components/HeadCommon.astro"
-import HeadSEO from "../components/HeadSEO.astro"
-import Header from "../components/Header/Header.astro"
-import * as CONFIG from "../config"
-// import { NewsletterCTA } from "../components/Footer/NewsletterCTA.tsx"
-import Footer from "~/components/Footer/Footer.tsx"
-import LeftSidebar from "~/components/LeftSidebar/LeftSidebar.astro"
-
-const { content = {} } = Astro.props
-const currentPage = new URL(Astro.request.url).pathname
-
-const formattedContentTitle = content.title
-  ? `${content.title} | ${CONFIG.SITE.title}`
-  : `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}`
-const canonicalURL = new URL(Astro.url.pathname, Astro.site)
----
-
-<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
-  <head>
-    <HeadCommon />
-    <HeadSEO {content} {canonicalURL} />
-    <title>{formattedContentTitle}</title>
-    <style>
-      body {
-        width: 100%;
-        display: grid;
-        grid-template-rows: var(--theme-navbar-height) 1fr;
-        --gutter: var(--space-6x);
-        --doc-padding: 2rem;
-      }
-      .layout {
-        display: grid;
-        grid-auto-flow: column;
-        grid-template-columns: minmax(0, var(--max-width));
-        overflow-x: hidden;
-        justify-content: center;
-      }
-
-      .grid-sidy {
-        top: 0;
-        padding: 0;
-      }
-      #grid-left {
-        position: fixed;
-        z-index: 10;
-        display: none;
-        @apply bg-pure-white dark:bg-black;
-      }
-      #grid-main {
-        padding: 0 var(--gutter);
-        grid-column: 1;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        top: 2rem;
-      }
-      @media (min-width: 50em) {
-        .layout {
-          overflow: initial;
-          grid-template-columns: minmax(0, var(--fullwidth-max-width));
-          gap: 3em;
-        }
-      }
-      @media (min-width: 72em) {
-        .layout {
-          /* grid-template-columns: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x))); */
-          grid-template-columns: 100%;
-          padding-left: 0;
-          padding-right: 0;
-          margin-left: auto;
-          margin-right: auto;
-        }
-        #grid-main {
-          padding: 0;
-        }
-      }
-    </style>
-
-    <style is:global>
-      .layout > * {
-        width: 100%;
-        height: 100%;
-      }
-      .mobile-sidebar-toggle {
-        overflow: hidden;
-      }
-      .mobile-sidebar-toggle #grid-left {
-        display: block;
-        top: 2rem;
-        padding: 0 20px;
-      }
-      /** This is done to hide the search box in the homepage. CSSModules styles are taking precedence over other styles so !important was needed **/
-      @media (min-width: 50em) {
-        .search-item {
-          visibility: hidden !important;
-        }
-      }
-    </style>
-    <script is:inline>
-      const themeMode = localStorage.getItem("THEME_MODE")
-
-      if (themeMode === "dark") {
-        document.documentElement.classList.add("dark")
-      } else {
-        document.documentElement.classList.remove("dark")
-      }
-    </script>
-  </head>
-</html>
-
-<body>
-  <Header />
-  <main class="layout">
-    <aside id="grid-left" class="grid-sidebar" title="Site Navigation">
-      <LeftSidebar currentPage={currentPage} content={content} />
-    </aside>
-    <div id="grid-main">
-      <slot />
-    </div>
-  </main>
-  <!-- <NewsletterCTA client:visible />
-  <Footer /> -->
-  <Footer client:idle />
-</body>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 7c57fcbcf..9f0282cce 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -7,8 +7,7 @@ import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro"
 import RightSidebar from "../components/RightSidebar/RightSidebar.astro"
 import * as CONFIG from "../config"
 // import { NewsletterCTA } from "../components/Footer/NewsletterCTA.tsx"
-// import Footer from "~/components/Footer/Footer.astro"
-import Footer from "~/components/Footer/Footer.tsx"
+import Footer from "~/components/Footer/Footer.astro"
 import { changeLanguage } from "i18next"
 
 const { content = {}, frontmatter } = Astro.props
@@ -230,8 +229,8 @@ changeLanguage(content.lang)
       </aside>
     </main>
     <!-- <NewsletterCTA client:visible />
-    <Footer /> -->
-    <Footer client:idle />
+    <Footer client:idle />  This seems to break i18next in some cases.-->
+    <Footer />
     <!-- TODO: Part 3 - Figure out if we need this footer script tag for linking to wallet. -->
 
     <!-- <script>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 2e70e1534..4347fdefe 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,23 +1,18 @@
 ---
-import { changeLanguage } from "i18next"
-import LandingLayout from "../layouts/LandingLayout.astro"
+import i18next, { changeLanguage, t } from "i18next"
+import HomeLayout from "../layouts/HomeLayout.astro"
 
-changeLanguage("en")
+// Should load last used language.
+changeLanguage(i18next.language)
 ---
 
-<LandingLayout>
+<HomeLayout>
   <div class="wrapper">
     <h2 class="highlight">404</h2>
-    <h2 class="heading-600">Page not found</h2>
-    <p>
-      We're sorry, but we couldn't find the page you were looking for. You can select a section from the top of the
-      page, or browse the links on the left. If you followed a broken link, <a
-        href="https://github.com/smartcontractkit/documentation/issues/new"
-        >let us know
-      </a>, or send a PR on <a href="https://github.com/smartcontractkit/documentation/">GitHub</a>
-    </p>
+    <h2 class="heading-600">{t("pageNotFound.title")}</h2>
+    <p>{t("pageNotFound.text")}</p>
   </div>
-</LandingLayout>
+</HomeLayout>
 
 <style>
   .highlight {
@@ -29,6 +24,8 @@ changeLanguage("en")
     display: flex;
     flex-direction: column;
     align-items: center;
+    min-height: 50vh;
+    margin-top: 10vh;
     @apply py-16 px-4;
   }
 </style>
diff --git a/src/pages/en/404.astro b/src/pages/en/404.astro
deleted file mode 100644
index f51142ba1..000000000
--- a/src/pages/en/404.astro
+++ /dev/null
@@ -1,34 +0,0 @@
----
-import { changeLanguage } from "i18next"
-import LandingLayout from "../../layouts/LandingLayout.astro"
-
-changeLanguage("en")
----
-
-<LandingLayout>
-  <div class="wrapper">
-    <h2 class="highlight">404</h2>
-    <h2 class="heading-600">Page not found</h2>
-    <p>
-      We're sorry, but we couldn't find the page you were looking for. You can select a section from the top of the
-      page, or browse the links on the left. If you followed a broken link, <a
-        href="https://github.com/smartcontractkit/documentation/issues/new"
-        >let us know
-      </a>, or send a PR on <a href="https://github.com/smartcontractkit/documentation/">GitHub</a>
-    </p>
-  </div>
-</LandingLayout>
-
-<style>
-  .highlight {
-    font-size: 96px;
-    @apply text-link;
-  }
-  .wrapper {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    @apply py-16 px-4;
-  }
-</style>
diff --git a/src/pages/es/404.astro b/src/pages/es/404.astro
deleted file mode 100644
index f51142ba1..000000000
--- a/src/pages/es/404.astro
+++ /dev/null
@@ -1,34 +0,0 @@
----
-import { changeLanguage } from "i18next"
-import LandingLayout from "../../layouts/LandingLayout.astro"
-
-changeLanguage("en")
----
-
-<LandingLayout>
-  <div class="wrapper">
-    <h2 class="highlight">404</h2>
-    <h2 class="heading-600">Page not found</h2>
-    <p>
-      We're sorry, but we couldn't find the page you were looking for. You can select a section from the top of the
-      page, or browse the links on the left. If you followed a broken link, <a
-        href="https://github.com/smartcontractkit/documentation/issues/new"
-        >let us know
-      </a>, or send a PR on <a href="https://github.com/smartcontractkit/documentation/">GitHub</a>
-    </p>
-  </div>
-</LandingLayout>
-
-<style>
-  .highlight {
-    font-size: 96px;
-    @apply text-link;
-  }
-  .wrapper {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    @apply py-16 px-4;
-  }
-</style>
diff --git a/src/pages/es/home/ConnectUs.astro b/src/pages/es/home/ConnectUs.astro
new file mode 100644
index 000000000..b16d3d88b
--- /dev/null
+++ b/src/pages/es/home/ConnectUs.astro
@@ -0,0 +1,152 @@
+---
+import SectionHeader from "~/components/SectionHeader/index.astro"
+import LinkArrowSvg from "~/assets/svgs/home/home-link-arrow.svg?raw"
+import DiscordSvg from "~/assets/svgs/home/Discord.svg?raw"
+import ForumSvg from "~/assets/svgs/home/Forum.svg?raw"
+import ContributeSvg from "~/assets/svgs/home/Contribute.svg?raw"
+
+const mediaList = [
+  {
+    icon: DiscordSvg,
+    name: "Únete a nuestro Discord",
+    content: "Conecta con otros desarradores y usuarios de Scroll.",
+    link: "https://discord.gg/scroll",
+  },
+  {
+    icon: ForumSvg,
+    name: "Foro de la Comunidad",
+    content: "Conversa y propón cambios a los protocolos fundamentales de Scroll.",
+    link: "http://community.scroll.io/",
+  },
+  {
+    icon: ContributeSvg,
+    name: "Contribuye a Scroll",
+    content: "Construye con otros desarrolladores.",
+    link: "https://github.com/scroll-tech/contribute-to-scroll",
+  },
+]
+---
+
+<div class="connect-us">
+  <SectionHeader
+    title="Conecta con nosotros"
+    content="Mantente al tanto de las noticias y desarrollos por parte de la comunidad de Scroll."
+  />
+  <div class="medias">
+    {
+      mediaList.map(({ icon, name, content, link }) => (
+        <a class="media-item" href={link} target="_blank">
+          <div class="media-item-header">
+            <span class="media-item-link">
+              <Fragment set:html={LinkArrowSvg} />
+            </span>
+            <span class="media-item-icon">
+              <Fragment set:html={icon} />
+            </span>
+          </div>
+
+          <span class="media-item-title">{name}</span>
+          <span class="media-item-content">{content}</span>
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .connect-us {
+    margin-top: 155px;
+  }
+
+  .medias {
+    display: flex;
+    gap: 3rem;
+    margin-top: 90px;
+  }
+  .media-item {
+    width: 325px;
+    height: 325px;
+    padding: 30px;
+    border-radius: 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    @apply bg-normal dark:bg-dark-normal;
+  }
+
+  .media-item:hover {
+    @apply bg-highlight dark:bg-dark-highlight;
+  }
+
+  .media-item-header {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .media-item-link {
+    width: 23px;
+    height: 23px;
+    background-size: contain;
+    align-self: flex-end;
+    @apply text-black dark:text-white;
+  }
+
+  .media-item-icon {
+    display: inline-flex;
+    width: 35px;
+    height: 35px;
+    align-items: center;
+  }
+  .media-item-title {
+    font-size: 22px;
+    font-weight: 600;
+    margin-top: 22px;
+    line-height: normal;
+    margin-bottom: 6px;
+  }
+  .media-item-content {
+    font-size: 20px;
+    line-height: normal;
+    height: 56px;
+  }
+
+  @media screen and (max-width: 50em) {
+    .connect-us {
+      margin-top: 112px;
+    }
+    .medias {
+      flex-direction: column;
+      gap: 3rem;
+    }
+    .media-item {
+      width: 100%;
+      height: 150px;
+      padding: 20px;
+    }
+    .media-item-header {
+      flex-direction: row-reverse;
+      flex: unset;
+    }
+    .media-item-link {
+      width: 13px;
+      height: 13px;
+      align-self: flex-start;
+    }
+    .media-item-icon {
+      width: 26px;
+      height: 26px;
+    }
+    .media-item-title {
+      font-size: 20px;
+      margin-top: 8px;
+      margin-bottom: 0px;
+    }
+    .media-item-content {
+      font-size: 16px;
+      height: auto;
+    }
+  }
+</style>
diff --git a/src/pages/es/home/Navigate.astro b/src/pages/es/home/Navigate.astro
new file mode 100644
index 000000000..cafd22cd6
--- /dev/null
+++ b/src/pages/es/home/Navigate.astro
@@ -0,0 +1,63 @@
+---
+import NavCard from "~/components/NavCard.astro"
+import StartSvg from "~/assets/svgs/home/home-start.svg?raw"
+import DevelopSvg from "~/assets/svgs/home/home-develop.svg?raw"
+import TechnologySvg from "~/assets/svgs/home/home-technology.svg?raw"
+import LearnSvg from "~/assets/svgs/home/home-learn.svg?raw"
+import SectionHeader from "~/components/SectionHeader/index.astro"
+
+const navList = [
+  {
+    icon: StartSvg,
+    name: "¿Cómo empezar?",
+    content: "Migra hacia Scroll usando el Bridge y explora el Ecosistema de dApps.",
+    link: "/es/getting-started/overview",
+  },
+  {
+    icon: DevelopSvg,
+    name: "Desarrolladores",
+    content: "Sumérgete en la documentación para desarrolladores de Scroll.",
+    link: "/es/developers",
+  },
+  {
+    icon: TechnologySvg,
+    name: "Tecnología",
+    content: "Un vistazo general a la arquitectura de la zkEVM de Scroll.",
+    link: "/es/technology",
+  },
+  {
+    icon: LearnSvg,
+    name: "Aprende",
+    content: "Una introducción al mundo de ZK y de la escalabilidad.",
+    link: "/es/learn",
+  },
+]
+---
+
+<div class="navigate">
+  <SectionHeader title="Navega la Documentación" content="Comienza a desarrollar en Scroll hoy." />
+  <div class="navs">
+    {navList.map(({ icon, name, content, link }) => <NavCard icon={icon} name={name} content={content} link={link} />)}
+  </div>
+</div>
+
+<style>
+  .navigate {
+    margin-top: 146px;
+  }
+
+  .navs {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  @media screen and (max-width: 50em) {
+    .navigate {
+      margin-top: 106px;
+    }
+    .navs {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+</style>
diff --git a/src/pages/es/home/QuickStart.astro b/src/pages/es/home/QuickStart.astro
new file mode 100644
index 000000000..f36f5590e
--- /dev/null
+++ b/src/pages/es/home/QuickStart.astro
@@ -0,0 +1,111 @@
+---
+import SectionHeader from "~/components/SectionHeader/index.astro"
+import EtherSvg from "~/assets/svgs/home/EthersJS.svg?raw"
+
+const toolList = [
+  { icon: "/svgs/Hardhat.svg", name: "Hardhat", link: "https://hardhat.org/", quickstartAnchor: "hardhat" },
+  { icon: "/svgs/Foundry.svg", name: "Foundry", link: "https://getfoundry.sh/", quickstartAnchor: "foundry" },
+  { icon: "/svgs/Remix.svg", name: "Remix", link: "https://remix-project.org/", quickstartAnchor: "remix-web-ide" },
+  {
+    icon: EtherSvg,
+    color: "text-[#2A4B78] dark:text-white",
+    name: "EthersJS",
+    link: "https://ethers.org/",
+    quickstartAnchor: "ethersjs",
+  },
+  { icon: "/svgs/Brownie.svg", name: "Brownie", link: "https://github.com/eth-brownie", quickstartAnchor: "brownie" },
+  { icon: "/svgs/Truffle.svg", name: "Truffle", link: "https://trufflesuite.com/", quickstartAnchor: "truffle" },
+]
+---
+
+<div>
+  <SectionHeader
+    title="Inicio rápido para Desarrolladores"
+    content="Comienza a construir en Scroll con todas tus herramientas favoritas de desarollo y de testing de Smart Contracts."
+  />
+  <div class="tools">
+    {
+      toolList.map(({ icon, name, quickstartAnchor, color }) => (
+        <a href={`/es/developers/developer-quickstart#${quickstartAnchor}`} class={`tools-item ${color}`}>
+          <figure class={color ? "p-[18px]" : ""}>
+            {color ? <Fragment set:html={icon} /> : <img src={icon} alt={name} />}
+          </figure>
+          <span>{name}</span>
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .tools {
+    margin-top: 96px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .tools-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 22px;
+  }
+  .tools-item figure {
+    font-size: 0;
+    width: 140px;
+    height: 140px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    @apply bg-normal dark:bg-dark-normal;
+  }
+  .tools-item figure:hover {
+    @apply dark:bg-dark-highlight;
+  }
+
+  .tools-item figure svg {
+    width: 80% !important;
+  }
+  .tools-item span {
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  @media screen and (max-width: 72em) {
+    .tools-item figure {
+      font-size: 0;
+      width: 12vw;
+      height: 12vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+
+    .tools-item figure img {
+      width: 8vw;
+    }
+
+    .tools-item span {
+      font-size: 18px;
+    }
+  }
+
+  @media screen and (max-width: 50em) {
+    .tools {
+      flex-wrap: wrap;
+      gap: 50px;
+      justify-content: center;
+    }
+    .tools-item figure {
+      width: 116px;
+      height: 116px;
+    }
+    .tools-item figure img {
+      width: 78px;
+    }
+    .tools-item span {
+      font-size: 16px;
+    }
+  }
+</style>
diff --git a/src/pages/es/home/index.astro b/src/pages/es/home/index.astro
new file mode 100644
index 000000000..9fa12781a
--- /dev/null
+++ b/src/pages/es/home/index.astro
@@ -0,0 +1,61 @@
+---
+import { changeLanguage } from "i18next"
+import HomeLayout from "../../../layouts/HomeLayout.astro"
+import Search from "../../../components/HomeSearch"
+import QuickStart from "./QuickStart.astro"
+import Navigate from "./Navigate.astro"
+import ConnectUs from "./ConnectUs.astro"
+
+changeLanguage("es")
+---
+
+<HomeLayout>
+  <div class="header bg-black">
+    <div class="inner">
+      <p class="header-title text-white">Bienvenido a la<br /> Documentación de Scroll</p>
+      <Search client:visible />
+    </div>
+  </div>
+  <div class="content bg-white dark:bg-black">
+    <div class="inner">
+      <QuickStart />
+      <Navigate />
+      <ConnectUs />
+    </div>
+  </div>
+</HomeLayout>
+
+<style>
+  .header {
+    height: 390px;
+    padding: 70px 60px 110px;
+  }
+  .inner {
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+  .header-title {
+    font-size: 55px;
+    font-weight: 600;
+    line-height: 65px;
+  }
+
+  .content {
+    padding: 52px 60px 160px;
+  }
+
+  @media screen and (max-width: 50em) {
+    .header {
+      height: 350px;
+      padding: 70px 20px 115px;
+    }
+    .header-title {
+      font-size: 40px;
+      line-height: 50px;
+      width: 100%;
+    }
+    .content {
+      padding: 82px 20px 120px;
+    }
+  }
+</style>
diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro
index bb9bbe32f..19a6738a1 100644
--- a/src/pages/es/index.astro
+++ b/src/pages/es/index.astro
@@ -3,4 +3,4 @@ import i18next, { changeLanguage } from "i18next"
 changeLanguage("es")
 ---
 
-<meta http-equiv="refresh" content="0;url=/es/getting-started/overview" />
+<meta http-equiv="refresh" content="0;url=/es/home" />
diff --git a/src/pages/zh/404.astro b/src/pages/zh/404.astro
deleted file mode 100644
index d4a9fdec9..000000000
--- a/src/pages/zh/404.astro
+++ /dev/null
@@ -1,34 +0,0 @@
----
-import { changeLanguage } from "i18next"
-import LandingLayout from "../../layouts/LandingLayout.astro"
-
-changeLanguage("zh")
----
-
-<LandingLayout>
-  <div class="wrapper">
-    <h2 class="highlight">404</h2>
-    <h2 class="heading-600">Page not found</h2>
-    <p>
-      We're sorry, but we couldn't find the page you were looking for. You can select a section from the top of the
-      page, or browse the links on the left. If you followed a broken link, <a
-        href="https://github.com/smartcontractkit/documentation/issues/new"
-        >let us know
-      </a>, or send a PR on <a href="https://github.com/smartcontractkit/documentation/">GitHub</a>
-    </p>
-  </div>
-</LandingLayout>
-
-<style>
-  .highlight {
-    font-size: 96px;
-    @apply text-link;
-  }
-  .wrapper {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    @apply py-16 px-4;
-  }
-</style>
diff --git a/src/pages/zh/home/ConnectUs.astro b/src/pages/zh/home/ConnectUs.astro
new file mode 100644
index 000000000..7b0f46139
--- /dev/null
+++ b/src/pages/zh/home/ConnectUs.astro
@@ -0,0 +1,152 @@
+---
+import SectionHeader from "~/components/SectionHeader/index.astro"
+import LinkArrowSvg from "~/assets/svgs/home/home-link-arrow.svg?raw"
+import DiscordSvg from "~/assets/svgs/home/Discord.svg?raw"
+import ForumSvg from "~/assets/svgs/home/Forum.svg?raw"
+import ContributeSvg from "~/assets/svgs/home/Contribute.svg?raw"
+
+const mediaList = [
+  {
+    icon: DiscordSvg,
+    name: "Join our Discord",
+    content: "Connect with other Scroll developers and users.",
+    link: "https://discord.gg/scroll",
+  },
+  {
+    icon: ForumSvg,
+    name: "Community Forum",
+    content: "Discuss and propose changes to Scroll’s core protocols.",
+    link: "http://community.scroll.io/",
+  },
+  {
+    icon: ContributeSvg,
+    name: "Contribute to Scroll",
+    content: "Build with other developers.",
+    link: "https://github.com/scroll-tech/contribute-to-scroll",
+  },
+]
+---
+
+<div class="connect-us">
+  <SectionHeader
+    title="Connect with us"
+    content="Keep up to date with the latest news and developments from the Scroll Community."
+  />
+  <div class="medias">
+    {
+      mediaList.map(({ icon, name, content, link }) => (
+        <a class="media-item" href={link} target="_blank">
+          <div class="media-item-header">
+            <span class="media-item-link">
+              <Fragment set:html={LinkArrowSvg} />
+            </span>
+            <span class="media-item-icon">
+              <Fragment set:html={icon} />
+            </span>
+          </div>
+
+          <span class="media-item-title">{name}</span>
+          <span class="media-item-content">{content}</span>
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .connect-us {
+    margin-top: 155px;
+  }
+
+  .medias {
+    display: flex;
+    gap: 3rem;
+    margin-top: 90px;
+  }
+  .media-item {
+    width: 325px;
+    height: 325px;
+    padding: 30px;
+    border-radius: 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    @apply bg-normal dark:bg-dark-normal;
+  }
+
+  .media-item:hover {
+    @apply bg-highlight dark:bg-dark-highlight;
+  }
+
+  .media-item-header {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .media-item-link {
+    width: 23px;
+    height: 23px;
+    background-size: contain;
+    align-self: flex-end;
+    @apply text-black dark:text-white;
+  }
+
+  .media-item-icon {
+    display: inline-flex;
+    width: 35px;
+    height: 35px;
+    align-items: center;
+  }
+  .media-item-title {
+    font-size: 22px;
+    font-weight: 600;
+    margin-top: 22px;
+    line-height: normal;
+    margin-bottom: 6px;
+  }
+  .media-item-content {
+    font-size: 20px;
+    line-height: normal;
+    height: 56px;
+  }
+
+  @media screen and (max-width: 50em) {
+    .connect-us {
+      margin-top: 112px;
+    }
+    .medias {
+      flex-direction: column;
+      gap: 3rem;
+    }
+    .media-item {
+      width: 100%;
+      height: 150px;
+      padding: 20px;
+    }
+    .media-item-header {
+      flex-direction: row-reverse;
+      flex: unset;
+    }
+    .media-item-link {
+      width: 13px;
+      height: 13px;
+      align-self: flex-start;
+    }
+    .media-item-icon {
+      width: 26px;
+      height: 26px;
+    }
+    .media-item-title {
+      font-size: 20px;
+      margin-top: 8px;
+      margin-bottom: 0px;
+    }
+    .media-item-content {
+      font-size: 16px;
+      height: auto;
+    }
+  }
+</style>
diff --git a/src/pages/zh/home/Navigate.astro b/src/pages/zh/home/Navigate.astro
new file mode 100644
index 000000000..765074a6e
--- /dev/null
+++ b/src/pages/zh/home/Navigate.astro
@@ -0,0 +1,63 @@
+---
+import NavCard from "~/components/NavCard.astro"
+import StartSvg from "~/assets/svgs/home/home-start.svg?raw"
+import DevelopSvg from "~/assets/svgs/home/home-develop.svg?raw"
+import TechnologySvg from "~/assets/svgs/home/home-technology.svg?raw"
+import LearnSvg from "~/assets/svgs/home/home-learn.svg?raw"
+import SectionHeader from "~/components/SectionHeader/index.astro"
+
+const navList = [
+  {
+    icon: StartSvg,
+    name: "Getting started",
+    content: "Bridge into Scroll and explore our dApp Ecosystem.",
+    link: "/en/getting-started/overview",
+  },
+  {
+    icon: DevelopSvg,
+    name: "Developers",
+    content: "Dive into Scroll’s developer documentation.",
+    link: "/en/developers",
+  },
+  {
+    icon: TechnologySvg,
+    name: "Technology",
+    content: "An overview of Scroll’s zkEVM Architecture.",
+    link: "/en/technology",
+  },
+  {
+    icon: LearnSvg,
+    name: "Learn",
+    content: "An introduction to the world of ZK and Scalability.",
+    link: "/en/learn",
+  },
+]
+---
+
+<div class="navigate">
+  <SectionHeader title="Navigate the Docs" content="Start developing on Scroll today." />
+  <div class="navs">
+    {navList.map(({ icon, name, content, link }) => <NavCard icon={icon} name={name} content={content} link={link} />)}
+  </div>
+</div>
+
+<style>
+  .navigate {
+    margin-top: 146px;
+  }
+
+  .navs {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  @media screen and (max-width: 50em) {
+    .navigate {
+      margin-top: 106px;
+    }
+    .navs {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+</style>
diff --git a/src/pages/zh/home/QuickStart.astro b/src/pages/zh/home/QuickStart.astro
new file mode 100644
index 000000000..5c13bf51e
--- /dev/null
+++ b/src/pages/zh/home/QuickStart.astro
@@ -0,0 +1,111 @@
+---
+import SectionHeader from "~/components/SectionHeader/index.astro"
+import EtherSvg from "~/assets/svgs/home/EthersJS.svg?raw"
+
+const toolList = [
+  { icon: "/svgs/Hardhat.svg", name: "Hardhat", link: "https://hardhat.org/", quickstartAnchor: "hardhat" },
+  { icon: "/svgs/Foundry.svg", name: "Foundry", link: "https://getfoundry.sh/", quickstartAnchor: "foundry" },
+  { icon: "/svgs/Remix.svg", name: "Remix", link: "https://remix-project.org/", quickstartAnchor: "remix-web-ide" },
+  {
+    icon: EtherSvg,
+    color: "text-[#2A4B78] dark:text-white",
+    name: "EthersJS",
+    link: "https://ethers.org/",
+    quickstartAnchor: "ethersjs",
+  },
+  { icon: "/svgs/Brownie.svg", name: "Brownie", link: "https://github.com/eth-brownie", quickstartAnchor: "brownie" },
+  { icon: "/svgs/Truffle.svg", name: "Truffle", link: "https://trufflesuite.com/", quickstartAnchor: "truffle" },
+]
+---
+
+<div>
+  <SectionHeader
+    title="Developer Quickstart"
+    content="Start developing on Scroll with all of your favourite tools for building and testing smart contracts."
+  />
+  <div class="tools">
+    {
+      toolList.map(({ icon, name, quickstartAnchor, color }) => (
+        <a href={`/en/developers/developer-quickstart#${quickstartAnchor}`} class={`tools-item ${color}`}>
+          <figure class={color ? "p-[18px]" : ""}>
+            {color ? <Fragment set:html={icon} /> : <img src={icon} alt={name} />}
+          </figure>
+          <span>{name}</span>
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .tools {
+    margin-top: 96px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .tools-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 22px;
+  }
+  .tools-item figure {
+    font-size: 0;
+    width: 140px;
+    height: 140px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    @apply bg-normal dark:bg-dark-normal;
+  }
+  .tools-item figure:hover {
+    @apply dark:bg-dark-highlight;
+  }
+
+  .tools-item figure svg {
+    width: 80% !important;
+  }
+  .tools-item span {
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  @media screen and (max-width: 72em) {
+    .tools-item figure {
+      font-size: 0;
+      width: 12vw;
+      height: 12vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+
+    .tools-item figure img {
+      width: 8vw;
+    }
+
+    .tools-item span {
+      font-size: 18px;
+    }
+  }
+
+  @media screen and (max-width: 50em) {
+    .tools {
+      flex-wrap: wrap;
+      gap: 50px;
+      justify-content: center;
+    }
+    .tools-item figure {
+      width: 116px;
+      height: 116px;
+    }
+    .tools-item figure img {
+      width: 78px;
+    }
+    .tools-item span {
+      font-size: 16px;
+    }
+  }
+</style>
diff --git a/src/pages/zh/home/index.astro b/src/pages/zh/home/index.astro
new file mode 100644
index 000000000..d0bdb9582
--- /dev/null
+++ b/src/pages/zh/home/index.astro
@@ -0,0 +1,61 @@
+---
+import { changeLanguage } from "i18next"
+import HomeLayout from "../../../layouts/HomeLayout.astro"
+import Search from "../../../components/HomeSearch"
+import QuickStart from "./QuickStart.astro"
+import Navigate from "./Navigate.astro"
+import ConnectUs from "./ConnectUs.astro"
+
+changeLanguage("zh")
+---
+
+<HomeLayout>
+  <div class="header bg-black">
+    <div class="inner">
+      <p class="header-title text-white">Welcome to<br /> Scroll Documentation</p>
+      <Search client:visible />
+    </div>
+  </div>
+  <div class="content bg-white dark:bg-black">
+    <div class="inner">
+      <QuickStart />
+      <Navigate />
+      <ConnectUs />
+    </div>
+  </div>
+</HomeLayout>
+
+<style>
+  .header {
+    height: 390px;
+    padding: 70px 60px 110px;
+  }
+  .inner {
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+  .header-title {
+    font-size: 55px;
+    font-weight: 600;
+    line-height: 65px;
+  }
+
+  .content {
+    padding: 52px 60px 160px;
+  }
+
+  @media screen and (max-width: 50em) {
+    .header {
+      height: 350px;
+      padding: 70px 20px 115px;
+    }
+    .header-title {
+      font-size: 40px;
+      line-height: 50px;
+      width: 100%;
+    }
+    .content {
+      padding: 82px 20px 120px;
+    }
+  }
+</style>