diff --git a/src/components/AdditionalGuides/guides.json b/src/components/AdditionalGuides/guides.json
new file mode 100644
index 000000000..0d4e9c225
--- /dev/null
+++ b/src/components/AdditionalGuides/guides.json
@@ -0,0 +1,74 @@
+[
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "author": "Filosofia Codigo",
+    "category": "Video",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "author": "Filosofia Codigo",
+    "category": "Tutorial",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "category": "DeFi",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "category": "L2 Architecture",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "category": "DeFi",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "category": "Zero-Knowledge Proofs",
+    "author": "Filosofia Codigo",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "author": "Filosofia Codigo",
+    "category": "DeFi",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  },
+  {
+    "title": "How to Earn on Aave from Solidity",
+    "avatar": "https://pbs.twimg.com/profile_images/1067581658314895360/zduUfOmg_400x400.jpg",
+    "author": "Filosofia Codigo",
+    "category": "Solidity",
+    "publishedTo": "Filosofía Código EN",
+    "date": "Oct 4th",
+    "url": "https://scroll.io"
+  }
+]
diff --git a/src/components/AdditionalGuides/index.astro b/src/components/AdditionalGuides/index.astro
new file mode 100644
index 000000000..def7260a4
--- /dev/null
+++ b/src/components/AdditionalGuides/index.astro
@@ -0,0 +1,111 @@
+---
+import guides from "./guides.json"
+// import DocsCard from "../../components/DocsCard.astro"
+import DocsCard from "~/components/DocsCard.astro"
+const categories = ["All", ...new Set(guides.map((guide) => guide.category))]
+---
+
+<div>
+  <ul class="category-picker">
+    {
+      categories.map((category) => (
+        <li class={`item ${category === "All" ? "active" : ""}`} data-category={category} onclick="filterGuides(event)">
+          {category}
+        </li>
+      ))
+    }
+  </ul>
+  <div class="guides-list" id="guides-list">
+    {
+      guides.map(({ title, avatar, author, date, publishedTo, url, category }) => (
+        <DocsCard
+          title={title}
+          avatar={avatar}
+          author={author}
+          date={date}
+          publishedTo={publishedTo}
+          url={url}
+          category={category}
+        />
+      ))
+    }
+  </div>
+</div>
+
+<script type="module">
+  window.filterGuides = function (event) {
+    const selectedCategory = event.target.getAttribute("data-category")
+    const guidesList = document.getElementById("guides-list")
+    const guideItems = Array.from(guidesList.children)
+
+    document.querySelectorAll(".category-picker .item").forEach((item) => {
+      item.classList.remove("active")
+    })
+    event.target.classList.add("active")
+
+    guideItems.forEach((guide) => {
+      const category = guide.getAttribute("data-category")
+      if (selectedCategory === "All" || category === selectedCategory) {
+        guide.style.display = ""
+      } else {
+        guide.style.display = "none"
+      }
+    })
+  }
+</script>
+
+<style>
+  .category-picker {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .category-picker .item {
+    display: inline-flex;
+    height: 44px;
+    padding: 0px 30px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: 100px;
+    margin-top: 0;
+    cursor: pointer;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    border-width: 1px;
+    border-style: solid;
+    @apply border-black dark:border-white;
+  }
+  .category-picker .item.active {
+    @apply text-white bg-black dark:text-black dark:bg-white;
+  }
+  .guides-list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    margin-top: 30px;
+  }
+
+  .guides-list :global(.docs-item) {
+    background: rgba(237, 237, 237, 0.6);
+  }
+
+  :global(.dark .guides-list .docs-item) {
+    @apply bg-dark-normal;
+  }
+
+  @media screen and (max-width: 1300px) {
+    .guides-list {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media screen and (max-width: 50em) {
+    .category-picker .item {
+      height: 36px;
+      padding: 0px 20px;
+      margin-right: 12px;
+      margin-bottom: 12px;
+    }
+  }
+</style>
diff --git a/src/components/DocsCard.astro b/src/components/DocsCard.astro
new file mode 100644
index 000000000..86bc1f771
--- /dev/null
+++ b/src/components/DocsCard.astro
@@ -0,0 +1,129 @@
+---
+import LinkSvg from "~/assets/svgs/home/home-link.svg?raw"
+export type Props = {
+  title: string
+  avatar: string
+  author: string
+  date: string
+  publishedTo: string
+  url: string
+  category?: string
+}
+const { title, avatar, author, date, publishedTo, url, category } = Astro.props as Props
+---
+
+<a class="docs-item" href={url} data-category={category}>
+  <div class="docs-item-title">
+    <span class="link-icon inline-block w-[1.5rem] h-[1.5rem] text-black dark:text-white">
+      <Fragment set:html={LinkSvg} />
+    </span>
+    {title}
+  </div>
+  <div class="docs-info-box">
+    <div class="left-side">
+      <img class="author-avator" src={avatar} alt={title} />
+      <div>
+        <div class="author">{author}</div>
+        <div>{date}</div>
+      </div>
+    </div>
+    <div class="right-side">
+      Published to <br />
+      {publishedTo}
+    </div>
+  </div>
+</a>
+
+<style>
+  .docs-item {
+    padding: 23px 30px 30px 30px;
+    width: 100%;
+    max-width: 430px;
+    height: 182px;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+  }
+
+  .docs-item:hover {
+    /* transform: scale(1.01); */
+    @apply bg-normal dark:bg-dark-highlight;
+  }
+
+  .docs-item-title {
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 30px;
+    letter-spacing: 0.22px;
+    width: 100%;
+    @apply text-black dark:text-white;
+  }
+  .docs-info-box {
+    display: flex;
+    justify-content: space-between;
+    color: #756a67;
+    text-align: right;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 125% */
+    letter-spacing: 0.16px;
+    width: 100%;
+  }
+
+  .left-side {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: left;
+  }
+
+  .author-avator {
+    width: 36px;
+    height: 36px;
+    margin-right: 12px;
+    border-radius: 50%;
+  }
+  .author {
+    @apply text-black dark:text-white;
+  }
+
+  .link-icon {
+    display: inline-flex;
+    margin-left: 33px;
+    margin-top: 10px;
+    float: right;
+  }
+
+  .link-icon :global(svg) {
+    width: 15px;
+    height: 15px;
+    font-size: 20px;
+  }
+
+  @media screen and (max-width: 50em) {
+    .docs-item {
+      padding: 12px 16px 16px 16px;
+    }
+    .docs-item {
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      max-width: 360px;
+      margin: 0 auto;
+    }
+    .docs-item-title {
+      font-size: 20px;
+      line-height: normal;
+      margin-top: 13px;
+      margin-bottom: 8px;
+    }
+    .docs-info-box {
+      font-size: 14px;
+    }
+  }
+</style>
diff --git a/src/components/Footer/helper.tsx b/src/components/Footer/helper.tsx
index c195d7dac..2d6c2e432 100644
--- a/src/components/Footer/helper.tsx
+++ b/src/components/Footer/helper.tsx
@@ -28,7 +28,7 @@ export const aboutList = [
   },
   {
     name: "Join Us",
-    href: "https://jobs.lever.co/ScrollFoundation",
+    href: "https://scroll.io/join-us",
   },
   {
     name: "Health Status",
@@ -54,7 +54,7 @@ export const resourceList = [
     href: "https://docs.scroll.io/",
   },
   {
-    name: "Press Kit",
+    name: "Brand Kit",
     href: "https://scrollzkp.notion.site/Scroll-Rebrand-Assets-5bb83465f56f40989c4f772b39ed3a06",
   },
 ]
diff --git a/src/components/NewsCard.astro b/src/components/NewsCard.astro
new file mode 100644
index 000000000..6d0b0c941
--- /dev/null
+++ b/src/components/NewsCard.astro
@@ -0,0 +1,80 @@
+---
+import LinkSvg from "~/assets/svgs/home/home-link.svg?raw"
+export type Props = {
+  cover: string
+  title: string
+  domain: string
+  link: string
+}
+const { cover, title, domain, link } = Astro.props as Props
+
+/**
+ * This component adds the classNames required by the scripts/click-to-zoom.ts script.
+ */
+---
+
+<div class="news-item" onclick={`window.location.href = "${link}"`}>
+  <img class="news-item-cover" src={cover} />
+  <p class="news-item-title">{title}</p>
+  <a class="news-item-link" href={link}>
+    {domain}
+    <span class="link-icon">
+      <Fragment set:html={LinkSvg} />
+    </span>
+  </a>
+</div>
+
+<style>
+  .news-item {
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  .news-item:hover {
+    transform: scale(1.01);
+  }
+
+  .news-item-cover {
+    width: 100%;
+  }
+
+  .news-item-title {
+    font-size: 24px;
+    font-weight: 600;
+    margin-top: 18px;
+    margin-bottom: 20px;
+  }
+  .news-item-link {
+    font-size: 20px;
+    @apply text-black dark:text-white;
+  }
+
+  .link-icon {
+    display: inline-flex;
+
+    margin-left: 2px;
+  }
+
+  .link-icon :global(svg) {
+    width: 11px;
+    height: 11px;
+  }
+
+  @media screen and (max-width: 50em) {
+    .news-item {
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      max-width: 360px;
+      margin: 0 auto;
+    }
+    .news-item-title {
+      font-size: 20px;
+      line-height: normal;
+      margin-top: 13px;
+      margin-bottom: 8px;
+    }
+    .news-item-link {
+    }
+  }
+</style>
diff --git a/src/components/SectionHeader/index.astro b/src/components/SectionHeader/index.astro
index 4a2e88b39..1973997dd 100644
--- a/src/components/SectionHeader/index.astro
+++ b/src/components/SectionHeader/index.astro
@@ -2,16 +2,34 @@
 interface Props {
   title: string
   content: string
+  url?: string
+  targetName?: string
 }
-const { title, content } = Astro.props as Props
+const { title, content, url, targetName } = Astro.props as Props
 ---
 
-<>
-  <p class="title">{title}</p>
-  <p class="content">{content}</p>
-</>
+<div class="box">
+  <div>
+    <p class="title">{title}</p>
+    <p class="content">{content}</p>
+  </div>
+  {
+    targetName && (
+      <div class="remix-callout">
+        <a href={url}>{targetName}</a>
+      </div>
+    )
+  }
+</div>
 
 <style>
+  .box {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    width: 100%;
+    gap: 1rem;
+  }
   p {
     margin-bottom: 0;
   }
@@ -27,6 +45,10 @@ const { title, content } = Astro.props as Props
   }
 
   @media screen and (max-width: 600px) {
+    .box {
+      flex-direction: column;
+      align-items: flex-start;
+    }
     .title {
       font-size: 32px;
       line-height: 34px;
diff --git a/src/content/docs/en/getting-started/additional-guides.mdx b/src/content/docs/en/getting-started/additional-guides.mdx
new file mode 100644
index 000000000..37a0c3fe1
--- /dev/null
+++ b/src/content/docs/en/getting-started/additional-guides.mdx
@@ -0,0 +1,12 @@
+---
+section: gettingStarted
+title: "Additional guides"
+date: Last Modified
+lang: "en"
+permalink: "/additional-guides"
+excerpt: "Additional guides"
+---
+
+import AdditionalGuides from "../../../../components/AdditionalGuides/index.astro"
+
+<AdditionalGuides />
\ No newline at end of file
diff --git a/src/pages/en/home/AdditionalGuides.astro b/src/pages/en/home/AdditionalGuides.astro
new file mode 100644
index 000000000..1f87dee2f
--- /dev/null
+++ b/src/pages/en/home/AdditionalGuides.astro
@@ -0,0 +1,157 @@
+---
+import DocsCard from "~/components/DocsCard.astro"
+import SectionHeader from "~/components/SectionHeader/index.astro"
+
+const docsList = {
+  featured: [
+    {
+      title: "How to Earn on Aave from Solidity",
+      avatar: "",
+      author: "Filosofia Codigo",
+      date: "Oct 4th",
+      publish: "docsListFilosofía Código EN",
+      link: "",
+    },
+    {
+      title: "5 Ways to Deploy Your Smart Contract",
+      avatar: "",
+      author: "Filosofia Codigo",
+      date: "Oct 4th",
+      publish: "docsListFilosofía Código EN",
+      link: "",
+    },
+    {
+      title: "Trustless Attestation",
+      avatar: "",
+      author: "Filosofia Codigo",
+      date: "Oct 4th",
+      publish: "docsListFilosofía Código EN",
+      link: "",
+    },
+    {
+      title: "Additional Guide With Max Topic Line Can Go Lorem Ipsum ",
+      avatar: "",
+      author: "Filosofia Codigo",
+      date: "Oct 4th",
+      publish: "docsListFilosofía Código EN",
+      link: "",
+    },
+  ],
+  latest: [
+    {
+      title: "How to Earn on Aave from Solidity",
+      avatar: "",
+      author: "Filosofia Codigo",
+      date: "Oct 4th",
+      publish: "docsListFilosofía Código EN",
+      link: "",
+    },
+    {
+      title: "5 Ways to Deploy Your Smart Contract",
+      avatar: "",
+      author: "Filosofia Codigo",
+      date: "Oct 4th",
+      publish: "docsListFilosofía Código EN",
+      link: "",
+    },
+  ],
+}
+---
+
+<div class="guide">
+  <SectionHeader
+    title="Beyond the docs"
+    targetName="Explore guides"
+    url="/getting-started/additional-guides"
+    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut urna iaculis quam mollis consequat."
+  />
+
+  <div class="docs">
+    <div>
+      <p class="category">Featured</p>
+      <div class="featured-list">
+        {
+          docsList.featured.map(({ title, avatar, author, date, publish, url }) => (
+            <DocsCard title={title} avatar={avatar} author={author} date={date} publishedTo={publish} url={url} />
+          ))
+        }
+      </div>
+    </div>
+    <hr class="bg-neutral-100 mt-[100px] mx-[20px] opacity-100 dark:opacity-50" />
+    <div>
+      <p class="category">Latest</p>
+      <div class="latest-list">
+        {
+          docsList.latest.map(({ title, avatar, author, date, publish, url }) => (
+            <DocsCard title={title} avatar={avatar} author={author} date={date} publishedTo={publish} url={url} />
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .guide {
+    margin-top: 120px;
+  }
+
+  .category {
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 50px;
+    margin-top: 24px;
+    @apply text-black dark:text-white;
+  }
+
+  .featured-list,
+  .latest-list {
+    display: grid;
+    gap: 20px;
+  }
+
+  .featured-list {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .docs {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 100px;
+  }
+
+  .docs :global(.docs-item) {
+    background: #fff;
+  }
+
+  :global(.dark .docs .docs-item) {
+    @apply bg-dark-normal;
+  }
+
+  @media screen and (max-width: 1300px) {
+    .docs {
+      flex-direction: column;
+    }
+    .docs :global(hr) {
+      margin-top: 50px;
+    }
+    .latest-list {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media screen and (max-width: 50em) {
+    .guide {
+      margin-top: 106px;
+    }
+    .docs {
+      flex-direction: column;
+      align-items: center;
+    }
+    .featured-list,
+    .latest-list {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/src/pages/en/home/Motion.astro b/src/pages/en/home/Motion.astro
new file mode 100644
index 000000000..41b463caa
--- /dev/null
+++ b/src/pages/en/home/Motion.astro
@@ -0,0 +1,63 @@
+---
+import NewsCard from "~/components/NewsCard.astro"
+import SectionHeader from "~/components/SectionHeader/index.astro"
+
+const newsList = [
+  {
+    cover: "https://scroll.io/imgs/career/news/news-cover-1.png",
+    title: "Get introduced to zkRollups and zkEVMs",
+    domain: "youtube.com",
+    link: "https://www.youtube.com/watch?v=JdjRcW13LME",
+  },
+  {
+    cover: "https://scroll.io/imgs/career/news/news-cover-2.png",
+    title: "What it means to build in the open on the Zero Knowledge podcast",
+    domain: "zeroknowledge.fm",
+    link: "https://zeroknowledge.fm/275-2/",
+  },
+  {
+    cover: "https://scroll.io/imgs/career/news/news-cover-3.png",
+    title: "Diving Deep into ZK with Scroll’s Co-Founders",
+    domain: "blockworks.co",
+    link: "https://blockworks.co/podcast/empire/dc33c4f8-da5f-11ec-a5ac-27c2459d4600",
+  },
+]
+---
+
+<div class="motion">
+  <SectionHeader
+    title="Scroll in motion"
+    targetName="Explore playlist"
+    url="https://www.youtube.com/@Scroll_ZKP"
+    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut urna iaculis quam mollis consequat."
+  />
+  <div class="videos">
+    {
+      newsList.map(({ cover, title, domain, link }) => (
+        <NewsCard cover={cover} title={title} domain={domain} link={link} />
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .motion {
+    margin-top: 146px;
+  }
+
+  .videos {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 3.2rem;
+    margin-top: 130px;
+  }
+
+  @media screen and (max-width: 50em) {
+    .motion {
+      margin-top: 106px;
+    }
+    .videos {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+</style>
diff --git a/src/pages/en/home/index.astro b/src/pages/en/home/index.astro
index ae44695e9..bd2f7a814 100644
--- a/src/pages/en/home/index.astro
+++ b/src/pages/en/home/index.astro
@@ -4,6 +4,8 @@ import HomeLayout from "../../../layouts/HomeLayout.astro"
 import Search from "../../../components/HomeSearch"
 import QuickStart from "./QuickStart.astro"
 import Navigate from "./Navigate.astro"
+import Motion from "./Motion.astro"
+import AdditionalGuides from "./AdditionalGuides.astro"
 import ConnectUs from "./ConnectUs.astro"
 
 changeLanguage("en")
@@ -20,6 +22,8 @@ changeLanguage("en")
     <div class="inner">
       <QuickStart />
       <Navigate />
+      <Motion />
+      <AdditionalGuides />
       <ConnectUs />
     </div>
   </div>