diff --git a/package.json b/package.json
index e382a8a..b9c03c1 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@acid-info/docusaurus-fathom": "^1.0.0-alpha.111",
-    "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.143",
+    "@acid-info/logos-docusaurus-preset": "1.0.0-alpha.144",
     "@docusaurus/core": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
     "@docusaurus/theme-mermaid": "^2.4.1",
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 25c884b..3e362a9 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -9,4 +9,63 @@ html {
 // TODO: breadcrumbs: false in docusaurus.config.js does not work
 .theme-doc-breadcrumbs {
   display: none;
-}
\ No newline at end of file
+}
+
+.mdx-section-header__extra {
+  display: flex;
+  align-items: center;
+}
+
+.mdx-hero > .mdx-hero-image > img {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin-top: -40%;
+}
+
+.main-wrapper > .container {
+  overflow-x: hidden;
+}
+
+@media screen and (min-width: 996px) {
+  .mdx-hero > .mdx-hero-image > img {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin-right: -160px;
+    margin-top: -60%;
+    scale: 0.95;
+  }
+}
+
+@media screen and (max-width: 996px) {
+  .mdx-hero > .mdx-hero-image > img {
+    margin-right: -200px;
+    margin-left: 0;
+    scale: 0.9;
+    margin-top: -30%;
+  }
+
+  .mdx-hero {
+    margin-bottom: 200px;
+  }
+}
+
+@media screen and (max-width: 930px) {
+  .mdx-hero {
+    margin-bottom: 260px;
+  }
+
+  .mdx-hero > .mdx-hero-image > img {
+    margin-right: 0;
+    scale: 1.1;
+    margin-top: -7%;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .mdx-hero > .mdx-hero-image > img {
+    margin-right: -20px;
+    margin-bottom: 180px;
+  }
+}
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 28f84f5..0dc6bff 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -7,24 +7,31 @@ import {
   Hero,
   HeroTitle,
   HeroDescription,
-  HeroVideo,
   HeroActions,
   HeroAction,
   CallToActionSection,
   CallToActionButton,
   FeatureList,
   HeroInfo,
+  HeroImage,
   Box,
+  Grid,
   Roadmap,
+  ShowcaseCard,
+  SectionHeader,
+  InputCTASection,
 } from '../components/mdx'
 
-<Hero size="large">
-  <HeroInfo>
-    <HeroTitle>
-      {'Resilient, Sovereign, and Censorship-resistant Blockchains for Network States'} 
+import { Button } from '@acid-info/lsd-react'
+import Link from '@docusaurus/Link'
+
+<Hero size="large" verticalAlign="center">
+  <HeroInfo hideScrollToBottom>
+    <HeroTitle uppercase={false}>
+      Resilient, Sovereign, and Censorship-resistant Blockchains for Network States
     </HeroTitle>
     <HeroDescription>
-      {'Nomos is a novel blockchain project that will address a network state\'s fundamental need for sovereignty and interconnectedness.'} 
+      Nomos is a novel blockchain project that will address a network state\'s fundamental need for sovereignty and interconnectedness.
     </HeroDescription>
     <HeroActions>
       <HeroAction href="https://github.com/logos-co/nomos-node" target="_blank">
@@ -32,68 +39,77 @@ import {
       </HeroAction>
     </HeroActions>
   </HeroInfo>
-
-  <HeroVideo
-    placeholderSrc="/hero/david04-1080x1080-placeholder.png"
-    desktop={{ scale: "1.917" }}
-    mobile={{ scale: "1.917", minHeight: "80vh", height: '100%'  }}
-  >
-    <source src="/hero/david04-2048x2048-24fps-1M.mov" type='video/mp4; codecs="hvc1"' />
-    <source src="/hero/david04-2048x2048-24fps-1M.webm" type="video/webm" />  
-  </HeroVideo>
-
+  <HeroImage src="/hero/hero-image.png" alt="alt" />
 </Hero>
 
-<FeatureList
-  id="features"
-  alignment="top"
-  title="Core Values"
-  features={[
-    {
-      title: 'Resiliency',
-      description:
-        'A resilient network protects its most valuable nodes by making the nodes with high concentration of stake indistinguishable from the rest - cleverly concealing their outsized contribution among the set of all nodes.',
-    },
-    {
-      title: 'Censorship-Resistance.',
-      description:
-        "Nomos provides the foundation for protocols that adhere to the principles of plausible deniability, allowing nodes to contribute to the system without making political or preferential choices - by making transactions invisible.",
-    },
-    {
-      title: 'Sovereignty',
-      description:
-        'Infrastructure for digital communities must provide the right environment for new ideas to flourish. Sovereignty, at its core, is the ability for communities to define their own rules.',
-    },
-    {
-      title: 'Interconnectedness',
-      description:
-        "While Nomos prioritizes sovereignty, it also values heavily the interconnection of communities. Careful balancing of these two forces is essential for the success of every single collective.",
-    },
-  ]}
->
-</FeatureList>
+<Box>
+  <SectionHeader noBorder title="Core values">
+  </SectionHeader>
+  <Box top={{ xs: 64 }}>
+    <Grid
+      xs={{ cols: 2, wrap: true, gap: '1.5rem 1em' }}
+      lg={{ cols: 4, gap: '1rem' }}
+    >
+      <Grid.Item>
+        <ShowcaseCard
+          index={1}
+          name="Resiliency"
+          description="A resilient network protects its most valuable nodes by making the nodes with high concentration of stake indistinguishable from the rest - cleverly concealing their outsized contribution among the set of all nodes."
+          borderStyle="none"
+        />
+      </Grid.Item>
+      <Grid.Item>
+        <ShowcaseCard
+          index={2}
+          name="Censorship resistant"
+          description="Nomos provides the foundation for protocols that adhere to the principles of plausible deniability, allowing nodes to contribute to the system without making political or preferential choices - by making transactions invisible."
+          borderStyle="none"
+        />
+      </Grid.Item>
+      <Grid.Item>
+        <ShowcaseCard
+          index={3}
+          name="Sovereignty"
+          description="Infrastructure for digital communities must provide the right environment for new ideas to flourish. Sovereignty, at its core, is the ability for communities to define their own rules."
+          borderStyle="none"
+        />
+      </Grid.Item>
+      <Grid.Item>
+        <ShowcaseCard
+          index={4}
+          name="Interconnectedness"
+          description='While Nomos prioritizes sovereignty, it also values heavily the interconnection of communities. Careful balancing of these two forces is essential for the success of every single collective.'
+          borderStyle="none"
+        />
+      </Grid.Item>
+    </Grid>
+  </Box>
+</Box>
+
 
-<Box top={{ xs: 144, lg: 216 }}>
+<Box top={{ xs: 144, lg: 190 }}>
   <CallToActionSection
     title="Logos Collective"
     columns={1}
-    description={
-      <>
+    border={false}
+    align="center"
+    description={<>
         Nomos is the blockchain layer of the Logos technology stack. Logos is a grassroots movement, building the infrastructure for trust-minimised, corruption-resistant governing services and social institutions for peaceful people worldwide.
-        <br/>
-        <br/>
-        Learn more about our ambitious vision.  
-      </>
-    }
+        <br /><br />
+        Learn more about our ambitious vision.
+      </>}
     label="Explore Logos"
     href="https://logos.co/"
     target="_blank"
   />
 </Box>
 
-<Box top={{ xs: 144, lg: 216 }}>
-  <Roadmap
+<Box top={{ xs: 144, lg: 190 }}>
+  <Roadmap 
+    noBorder
     title="Development Roadmap"
+    href="/about/roadmap"
+    linkLabel="Learn more"
     timeline={[
       {
         period: [2024, 'Q1 & Q2'],
@@ -121,22 +137,46 @@ import {
       }
     ]}
   >
-    <CallToActionButton style={{ marginTop: 0 }} size="small" variant="outlined" href="/about/roadmap">
-      Read more
-    </CallToActionButton>
   </Roadmap>
 </Box>
 
-<Box top={{ xs: 144, lg: 336 }}>
-  <CallToActionSection
-    title={
-      <>
-        Want to get involved with Nomos? <br/> 
-        Join the Discord community.
-      </>
-    }
-    label="Discord"
-    target="_blank"
-    href="https://discord.gg/NYDm83h46b"
-  />
+<Box top={{ xs: 152, lg: 300 }}>
+  <Grid
+    xs={{ cols: 1, gap: '1rem' }}
+    md={{ cols: 2 }}
+  >
+    <Grid.Item xs={1}>
+      <InputCTASection
+        description={
+          'Want to get involved with Nomos?\nJoin the Discord community.'
+        }
+        link="https://discord.gg/NYDm83h46b"
+        label="Get Involved"
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <InputCTASection
+        description={'Subscribe\nto our newsletter'}
+        label="Subscribe"
+        formInput={[
+          {
+            label: 'Name',
+            placeholder: 'Name',
+            type: 'text',
+            name: 'name',
+            required: true,
+          },
+          {
+            label: 'Email',
+            placeholder: 'Enter your email',
+            type: 'email',
+            name: 'email',
+            required: true,
+          },
+        ]}
+        formListId={13}
+      />
+    </Grid.Item>
+  </Grid>
 </Box>
+
diff --git a/static/hero/hero-image.png b/static/hero/hero-image.png
new file mode 100644
index 0000000..d06cfe1
Binary files /dev/null and b/static/hero/hero-image.png differ
diff --git a/yarn.lock b/yarn.lock
index 3c3236d..219a70d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -36,14 +36,14 @@
     satori "^0.10.1"
     sharp "^0.32.1"
 
-"@acid-info/logos-docusaurus-preset@^1.0.0-alpha.143":
-  version "1.0.0-alpha.143"
-  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-preset/-/logos-docusaurus-preset-1.0.0-alpha.143.tgz#492a2765da4cf41ec94c0283cba1f722f03012c9"
-  integrity sha512-LsTurD30hmgdylR3scOPvkBck0H9mCOG8JSmKSzFBrHtqeNKgImcZh13HiDFFAOwv8nWk7vci+cmSfaXXd8AqQ==
+"@acid-info/logos-docusaurus-preset@1.0.0-alpha.144":
+  version "1.0.0-alpha.144"
+  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-preset/-/logos-docusaurus-preset-1.0.0-alpha.144.tgz#0fbddf7cebe7f10333b42e85f899dc98a77fde17"
+  integrity sha512-CLWz9G/tIxXnqEy4bzJ9XN7AzoSmXzkrH7wLC3eh6O0CcnV5SH+B4TcTUInule8628GlISHeyQyXqJ5L1prbfQ==
   dependencies:
     "@acid-info/docusaurus-og" "^1.0.0-alpha.131"
     "@acid-info/logos-docusaurus-search-local" "^1.0.0-alpha.111"
-    "@acid-info/logos-docusaurus-theme" "^1.0.0-alpha.143"
+    "@acid-info/logos-docusaurus-theme" "^1.0.0-alpha.144"
     "@docusaurus/core" "^2.4.1"
     "@docusaurus/module-type-aliases" "^2.4.1"
     "@docusaurus/preset-classic" "^2.4.1"
@@ -71,13 +71,13 @@
     "@easyops-cn/docusaurus-search-local" "^0.33.6"
     lodash "^4.17.21"
 
-"@acid-info/logos-docusaurus-theme@^1.0.0-alpha.143":
-  version "1.0.0-alpha.143"
-  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-theme/-/logos-docusaurus-theme-1.0.0-alpha.143.tgz#5f93b13f623fcf789498aa218675ff1ce3196d67"
-  integrity sha512-KOX65g9/bjsaCmz1jThPCUHcyaQBUT0dgViw5TJXCYA6bmaVIZujlNQsJpffH3n6bJCxmgjb3sW1eonwvsgngQ==
+"@acid-info/logos-docusaurus-theme@^1.0.0-alpha.144":
+  version "1.0.0-alpha.144"
+  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-theme/-/logos-docusaurus-theme-1.0.0-alpha.144.tgz#590e311b41397919da5a12db519bddb52616d974"
+  integrity sha512-DRpDv9XFLcm51vyTIwgEw9j8weGWf06gTfS53Ka0Ur0JlwB/FivF5sLi5HZ129He1vYiRCdXNdd57tcXjSAEQw==
   dependencies:
     "@acid-info/docusaurus-og" "^1.0.0-alpha.131"
-    "@acid-info/lsd-react" "^0.1.0-beta.1"
+    "@acid-info/lsd-react" "^0.1.0-beta.3"
     "@docusaurus/core" "^2.4.1"
     "@docusaurus/mdx-loader" "^2.4.1"
     "@docusaurus/module-type-aliases" "^2.4.1"
@@ -118,10 +118,10 @@
     three-stdlib "^2.23.4"
     utility-types "^3.10.0"
 
-"@acid-info/lsd-react@^0.1.0-beta.1":
-  version "0.1.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-beta.2.tgz#373e94e16d2f7db29ffe5eeae07b8d49e9373409"
-  integrity sha512-QHymPzqhhsDwa6QIms1MPlD0CR7+oduJKzd3sVGU2op20QtxzbgnMiqxEIdh3DK2zgtYxgfm5Bpfxqp6dK9MQA==
+"@acid-info/lsd-react@^0.1.0-beta.3":
+  version "0.1.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-beta.3.tgz#2f211b647d68d6fce163afb60989494f555354be"
+  integrity sha512-lD/x1BZyYdQCUmtMH3YpKSInEO73wRFRxUM6lzbz5UDDUnPfDpj/g4mQrXKL1keV3ujGJbMLaCC36cZT8VgNNw==
   dependencies:
     "@datepicker-react/hooks" "^2.8.4"
     "@emotion/react" "^11.10.5"
@@ -2463,7 +2463,7 @@
     "@docusaurus/theme-search-algolia" "2.4.1"
     "@docusaurus/types" "2.4.1"
 
-"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2":
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -11553,6 +11553,14 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
+"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
+  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
+  dependencies:
+    "@types/react" "*"
+    prop-types "^15.6.2"
+
 react-merge-refs@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"