diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 4d3ce8d..08354e8 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -1,7 +1,5 @@
 const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
 const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
-// @ts-check
-const webpack = require('webpack');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -44,6 +42,9 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      colorMode: {
+        defaultMode: 'dark',
+      },
       image: 'img/og-image.png',
       navbar: {
         title: 'React Native ExecuTorch',
@@ -53,6 +54,12 @@ const config = {
           src: 'img/logo-hero.svg',
         },
         items: [
+          {
+            to: 'docs/fundamentals/getting-started',
+            activeBasePath: 'docs',
+            label: 'Docs',
+            position: 'right',
+          },
           {
             'href':
               '/~https://github.com/software-mansion/react-native-executorch',
diff --git a/docs/src/components/ExecuTorchIntroduction/index.tsx b/docs/src/components/ExecuTorchIntroduction/index.tsx
new file mode 100644
index 0000000..c6b8c38
--- /dev/null
+++ b/docs/src/components/ExecuTorchIntroduction/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+const ExecuTorchIntroduction = () => {
+  return (
+    <div className={styles.introductionContainer}>
+      <h2 className={styles.title}>What is ExecuTorch?</h2>
+      <p className={styles.introduction}>
+        ExecuTorch is an end-to-end solution for enabling on-device inference
+        capabilities across mobile and edge devices including wearables,
+        embedded devices and microcontrollers. It is part of the PyTorch Edge
+        ecosystem and enables efficient deployment of various PyTorch models to
+        edge devices.
+      </p>
+    </div>
+  );
+};
+
+export default ExecuTorchIntroduction;
diff --git a/docs/src/components/ExecuTorchIntroduction/styles.module.css b/docs/src/components/ExecuTorchIntroduction/styles.module.css
new file mode 100644
index 0000000..84df810
--- /dev/null
+++ b/docs/src/components/ExecuTorchIntroduction/styles.module.css
@@ -0,0 +1,38 @@
+.introductionContainer {
+  max-width: 996px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: -8rem;
+  gap: 4rem;
+}
+
+.introduction {
+  font-size: 24px;
+  font-weight: 400;
+}
+
+.title {
+  font-size: var(--swm-h2-font-size);
+}
+
+@media (max-width: 768px) {
+  .introduction {
+    font-size: 20px;
+  }
+
+  .introductionContainer {
+    gap: 0;
+    margin-bottom: -6rem;
+  }
+
+  .title {
+    margin-bottom: 1rem;
+  }
+}
+
+@media (max-width: 420px) {
+  .title {
+    margin-bottom: 1.5rem;
+    font-size: 24px;
+  }
+}
diff --git a/docs/src/components/FooterBackground/index.tsx b/docs/src/components/FooterBackground/index.tsx
new file mode 100644
index 0000000..341c01b
--- /dev/null
+++ b/docs/src/components/FooterBackground/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import usePageType from '@site/src/hooks/usePageType';
+import WaveBottom from '@site/src/components/Wave/WaveBottom';
+import styles from './styles.module.css';
+
+const FooterBackground = () => {
+  const { isLanding } = usePageType();
+
+  return (
+    <div className={styles.waveContainer}>
+      {isLanding && (
+        <>
+          <WaveBottom />
+          <div className={styles.linearGradient} />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default FooterBackground;
diff --git a/docs/src/components/FooterBackground/styles.module.css b/docs/src/components/FooterBackground/styles.module.css
new file mode 100644
index 0000000..5fdda1a
--- /dev/null
+++ b/docs/src/components/FooterBackground/styles.module.css
@@ -0,0 +1,46 @@
+.waveContainer {
+  position: relative;
+  margin-top: 2rem;
+  z-index: 0;
+}
+
+[class*='footerLanding'] {
+  margin-top: -106px;
+}
+
+.linearGradient {
+  height: 106px;
+  width: 100%;
+  background: linear-gradient(#7394FF, #FFFFFF 150%);
+}
+
+[data-theme='dark'] .linearGradient {
+  background: linear-gradient(#313C9C, #160042 150%);
+}
+
+@media (max-width: 996px) {
+  [class*='footerLanding'] {
+    margin-top: -121px;
+  }
+  .linearGradient {
+    height: 121px;
+  }
+}
+
+@media (max-width: 700px) {
+  [class*='footerLanding'] {
+    margin-top: -147px;
+  }
+  .linearGradient {
+    height: 147px;
+  }
+}
+
+@media (max-width: 376px) {
+  [class*='footerLanding'] {
+    margin-top: -173px;
+  }
+  .linearGradient {
+    height: 173px;
+  }
+}
diff --git a/docs/src/components/Hero/StartScreen/Logo.tsx b/docs/src/components/Hero/StartScreen/Logo.tsx
new file mode 100644
index 0000000..07ad0fe
--- /dev/null
+++ b/docs/src/components/Hero/StartScreen/Logo.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import useScreenSize from '@site/src/hooks/useScreenSize';
+import LogoIcon from '@site/static/img/logo-hero.svg';
+
+const Logo = () => {
+  const { windowWidth } = useScreenSize();
+
+  if (windowWidth <= 768) {
+    return null;
+  }
+
+  return <LogoIcon />;
+};
+
+export default Logo;
diff --git a/docs/src/components/Hero/StartScreen/index.tsx b/docs/src/components/Hero/StartScreen/index.tsx
index e6ee792..c45673b 100644
--- a/docs/src/components/Hero/StartScreen/index.tsx
+++ b/docs/src/components/Hero/StartScreen/index.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import styles from './styles.module.css';
 import HomepageButton from '@site/src/components/HomepageButton';
+import Logo from './Logo';
 
 const StartScreen = () => {
   return (
     <section className={styles.hero}>
       <div className={styles.heading}>
-        <div>
-          <h1 className={styles.headingLabel}>
-            <span>React Native</span>
-            <span>ExecuTorch</span>
-          </h1>
-          <h2 className={styles.subheadingLabel}>
-            Declarative way to run AI models in React Native on device, powered
-            by ExecuTorch.
-          </h2>
+        <div className={styles.subheadingContainer}>
+          <div>
+            <h1 className={styles.headingLabel}>
+              <span>React Native</span>
+              <span>ExecuTorch</span>
+            </h1>
+            <h2 className={styles.subheadingLabel}>
+              Declarative way to run AI models in React Native on device,
+              powered by ExecuTorch.
+            </h2>
+          </div>
+          <BrowserOnly>{() => <Logo />}</BrowserOnly>
         </div>
         <div className={styles.lowerHeading}>
           <div className={styles.buttonContainer}>
diff --git a/docs/src/components/Hero/StartScreen/styles.module.css b/docs/src/components/Hero/StartScreen/styles.module.css
index 1757e48..24e8c44 100644
--- a/docs/src/components/Hero/StartScreen/styles.module.css
+++ b/docs/src/components/Hero/StartScreen/styles.module.css
@@ -5,7 +5,22 @@
 }
 
 .heading {
-  margin-top: 11.25rem;
+  width: 100%;
+  margin-top: 11rem;
+}
+
+.subheadingContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.subheadingContainer svg {
+  height: 100%;
+  width: 100%;
+  max-width: 220px;
 }
 
 .headingLabel {
@@ -21,7 +36,7 @@
 }
 
 .headingLabel :nth-child(2) {
-  color: var(--swm-purple-light-100);
+  color: var(--swm-cornflower-80);
 }
 
 .subheadingLabel {
@@ -32,12 +47,12 @@
   letter-spacing: var(--swm-heading-letter-spacing-bigger);
 
   margin-top: 3rem;
-  margin-bottom: 5.5rem;
-  width: 70%;
+  width: 80%;
   color: var(--swm-landing-heading);
 }
 
 .buttonContainer {
+  margin-top: 3rem;
   display: flex;
   justify-content: flex-start;
 }
@@ -51,11 +66,15 @@
     font-size: 26px;
     width: 100%;
   }
+
+  .buttonContainer {
+    margin-top: -2rem;
+  }
 }
 
 @media (max-width: 420px) {
-  .heading {
-    margin-top: 9.5rem;
+  .heading {  
+    margin-top: 6rem;
   }
   .headingLabel {
     font-size: 26px;
@@ -64,4 +83,8 @@
     margin: 1rem 0 2rem 0;
     font-size: 20px;
   }
+
+  .buttonContainer {
+    margin-top: -1rem;
+  }
 }
diff --git a/docs/src/components/HomepageButton/styles.module.css b/docs/src/components/HomepageButton/styles.module.css
index 0170cb9..feffb4d 100644
--- a/docs/src/components/HomepageButton/styles.module.css
+++ b/docs/src/components/HomepageButton/styles.module.css
@@ -7,17 +7,12 @@
   text-wrap: nowrap;
 
   color: var(--swm-off-white);
-  background-color: var(--swm-landing-button-purple);
+  background-color: var(--swm-navy-light-100);
 
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
 }
 
-[data-theme='dark'] .homepageButton {
-  background-color: var(--swm-purple-light-100);
-  border-color: var(--swm-purple-light-100);
-}
-
 a.homepageButtonLink:hover {
   text-decoration: none !important;
 }
@@ -67,29 +62,14 @@ a.homepageButtonLink:hover {
 /* Button - transparent styling */
 
 .buttonTransparentStyling {
-  background-color: transparent;
-  color: var(--swm-landing-button-purple);
+  color: var(--swm-navy-light-100);
 }
 
 .buttonTransparentStyling svg {
-  stroke: var(--swm-landing-button-purple);
-}
-
-.buttonTransparentStyling:hover {
-  background-color: var(--swm-landing-button-purple);
-  color: var(--swm-off-white);
-}
-
-.buttonTransparentStyling:hover svg {
-  stroke: var(--swm-off-white);
+  stroke: var(--swm-navy-light-100);
 }
 
-/* Button - purple styling */
-
-.buttonPurpleStyling {
-  background-color: var(--swm-landing-button-purple);
-  color: var(--swm-off-white);
-}
+/* Button - navy styling */
 
 .buttonPurpleStyling svg {
   stroke: var(--swm-off-white);
@@ -97,15 +77,15 @@ a.homepageButtonLink:hover {
 
 .buttonPurpleStyling:hover {
   background-color: transparent;
-  color: var(--swm-landing-button-purple);
+  color: var(--swm-navy-light-100);
 }
 
 .buttonPurpleStyling:hover svg {
-  stroke: var(--swm-landing-button-purple);
+  stroke: var(--swm-navy-light-100);
 }
 
 .buttonPurpleBorderStyling {
-  border: 1px solid var(--swm-landing-button-purple);
+  border: 1px solid var(--swm-navy-light-100);
 }
 
 .arrow {
@@ -117,3 +97,41 @@ a.homepageButtonLink:hover {
   width: 24px;
   height: 24px;
 }
+
+[data-theme='dark'] .homepageButton {
+  background-color: var(--swm-cornflower-100);
+  border-color: var(--swm-cornflower-100);
+}
+
+[data-theme='dark'] .homepageButton:hover {
+  border-color: var(--swm-off-white);
+}
+
+/* Button - transparent styling */
+
+[data-theme='dark'] .buttonTransparentStyling {
+  color: var(--swm-cornflower-100);
+}
+
+[data-theme='dark'] .buttonTransparentStyling svg {
+  stroke: var(--swm-cornflower-100);
+}
+
+/* Button - navy styling */
+
+[data-theme='dark'] .buttonPurpleStyling svg {
+  stroke: var(--swm-off-white);
+}
+
+[data-theme='dark'] .buttonPurpleStyling:hover {
+  background-color: transparent;
+  color: var(--swm-off-white);
+}
+
+[data-theme='dark'] .buttonPurpleStyling:hover svg {
+  stroke: var(--swm-off-white);
+}
+
+[data-theme='dark'] .buttonPurpleBorderStyling {
+  border: 1px solid var(--swm-cornflower-100);
+}
diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/index.tsx b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/index.tsx
new file mode 100644
index 0000000..8876f64
--- /dev/null
+++ b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/index.tsx
@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+import styles from './styles.module.css';
+
+interface Props extends PropsWithChildren {
+  title: string;
+}
+
+const ReactNativeExecuTorchFeatureItem = ({ title, children }: Props) => {
+  return (
+    <div className={styles.featureItem}>
+      <h3 className={styles.featureTitle}>{title}</h3>
+      <p className={styles.featureBody}>{children}</p>
+    </div>
+  );
+};
+
+export default ReactNativeExecuTorchFeatureItem;
diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css
new file mode 100644
index 0000000..437537b
--- /dev/null
+++ b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem/styles.module.css
@@ -0,0 +1,29 @@
+.featureItem {
+  background-color: var(--swm-cornflower-0);
+  box-shadow: -12px 12px 0px var(--swm-cornflower-80);
+  flex: 1;
+  padding: 1.5em;
+}
+
+[data-theme='dark'] .featureItem {
+  background-color: var(--swm-cornflower-60);
+  box-shadow: -12px 12px 0px var(--swm-cornflower-80);
+}
+
+[data-theme='dark'] .featureTitle,
+[data-theme='dark'] .featureBody {
+  color: var(--swm-navy-light-100);
+}
+
+.featureTitle {
+  margin-bottom: 40px;
+  font-weight: 600;
+  font-size: 24px;
+  text-transform: uppercase;
+}
+
+@media (max-width: 420px) {
+  .featureTitle {
+    font-size: 20px;
+  }
+}
diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx
new file mode 100644
index 0000000..13d51e6
--- /dev/null
+++ b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import styles from './styles.module.css';
+import ReactNativeExecuTorchFeatureItem from '@site/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureItem';
+
+const items = [
+  {
+    title: 'privacy first',
+    body: "React Native ExecuTorch allows on-device execution of AI models, eliminating the need for external API calls. This means your app's data stays on the device, ensuring maximum privacy for your users.",
+  },
+  {
+    title: 'cost effective',
+    body: "The on-device computing nature of React Native ExecuTorch means you don't have to worry about cloud infrastructure. This approach reduces server costs and minimizes latency.",
+  },
+  {
+    title: 'developer friendly',
+    body: "There's no need for deep AI expertise, we handle the complexities of AI models on the native side, making it simple for developers to use these models in React Native.",
+  },
+];
+
+const ReactNativeExecuTorchFeatureList = () => {
+  return (
+    <div className={styles.featureList}>
+      {items.map((item, idx) => (
+        <ReactNativeExecuTorchFeatureItem key={idx} title={item.title}>
+          {item.body}
+        </ReactNativeExecuTorchFeatureItem>
+      ))}
+    </div>
+  );
+};
+
+export default ReactNativeExecuTorchFeatureList;
diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/styles.module.css b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/styles.module.css
new file mode 100644
index 0000000..9989e8b
--- /dev/null
+++ b/docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/styles.module.css
@@ -0,0 +1,10 @@
+.featureList {
+  display: flex;
+  gap: 1.5rem;
+}
+
+@media (max-width: 996px) {
+  .featureList {
+    flex-direction: column;
+  }
+}
diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/index.tsx b/docs/src/components/ReactNativeExecuTorchFeatures/index.tsx
new file mode 100644
index 0000000..5d9c1dc
--- /dev/null
+++ b/docs/src/components/ReactNativeExecuTorchFeatures/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './styles.module.css';
+import HomepageButton from '@site/src/components/HomepageButton';
+import ReactNativeExecuTorchFeatureList from '@site/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList';
+
+const ReactNativeExecuTorchFeatures = () => {
+  return (
+    <div className={styles.featuresContainer}>
+      <h2 className={styles.title}>Why React Native ExecuTorch?</h2>
+      <ReactNativeExecuTorchFeatureList />
+      <div className={styles.learnMoreSection}>
+        <p>Learn more about React Native ExecuTorch</p>
+        <HomepageButton
+          target="_blank"
+          href="https://blog.swmansion.com/introducing-react-native-executorch-2bdb87592884"
+          title="See blog post"
+          backgroundStyling={styles.featuresButton}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ReactNativeExecuTorchFeatures;
diff --git a/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css b/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css
new file mode 100644
index 0000000..42a5745
--- /dev/null
+++ b/docs/src/components/ReactNativeExecuTorchFeatures/styles.module.css
@@ -0,0 +1,91 @@
+.featuresContainer {
+  display: flex;
+  flex-direction: column;
+  margin-top: 7.5rem;
+  gap: 5rem;
+}
+
+.featuresButton {
+  background-color: transparent;
+  color: var(--swm-navy-light-100);
+  border-color: var(--swm-navy-light-100);
+}
+
+[data-theme='dark'] .featuresButton {
+  background-color: transparent;
+  color: var(--swm-off-white);
+  border-color: var(--swm-off-white);
+}
+
+.featuresButton:hover {
+  background-color: var(--swm-navy-light-100);
+  border-color: var(--swm-navy-light-100);
+  color: var(--swm-off-white);
+}
+
+[data-theme='dark'] .featuresButton:hover {
+  background-color: var(--swm-cornflower-100);
+  border-color: var(--swm-cornflower-100);
+  color: var(--swm-off-white);
+}
+
+.featuresButton svg {
+  stroke: var(--swm-navy-light-100);
+}
+
+[data-theme='dark'] .featuresButton svg {
+  stroke: var(--swm-off-white);
+}
+
+.featuresButton:hover svg {
+  stroke: var(--swm-off-white);
+}
+
+.title {
+  font-size: var(--swm-h2-font-size);
+}
+
+.learnMoreSection {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 5rem;
+}
+
+.learnMoreSection p {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 28.8px;
+  margin-bottom: 0;
+}
+
+@media (max-width: 996px) {
+  .featuresContainer {
+    margin-top: 3.5rem;
+  }
+  .learnMoreSection {
+    gap: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .learnMoreSection {
+    margin-top: 2.25rem;
+    flex-direction: column;
+  }
+  .featuresContainer {
+    margin-bottom: 0.5rem;
+    gap: 0;
+  }
+  .title {
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media (max-width: 420px) {
+  .title {
+    margin-bottom: 1.5rem;
+    font-size: 24px;
+  }
+}
diff --git a/docs/src/components/Wave/WaveBottom/index.tsx b/docs/src/components/Wave/WaveBottom/index.tsx
new file mode 100644
index 0000000..3fa943b
--- /dev/null
+++ b/docs/src/components/Wave/WaveBottom/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import { useColorMode } from '@docusaurus/theme-common';
+import Wave from './wave';
+
+const WaveBottom = () => {
+  const theme = useColorMode().colorMode;
+
+  return <BrowserOnly>{() => <Wave theme={theme} />}</BrowserOnly>;
+};
+
+export default WaveBottom;
diff --git a/docs/src/components/Wave/WaveBottom/styles.module.css b/docs/src/components/Wave/WaveBottom/styles.module.css
new file mode 100644
index 0000000..0bd33f0
--- /dev/null
+++ b/docs/src/components/Wave/WaveBottom/styles.module.css
@@ -0,0 +1,24 @@
+.waveBottom {
+  position: absolute;
+  z-index: -1;
+  bottom: 100px;
+  right: 0;
+}
+
+@media (max-width: 996px) {
+  .waveBottom {
+    bottom: 115px;
+  }
+}
+
+@media (max-width: 700px) {
+  .waveBottom {
+    bottom: 141px;
+  }
+}
+
+@media (max-width: 376px) {
+  .waveBottom {
+    bottom: 167px;
+  }
+}
diff --git a/docs/src/components/Wave/WaveBottom/wave.tsx b/docs/src/components/Wave/WaveBottom/wave.tsx
new file mode 100644
index 0000000..37e8d12
--- /dev/null
+++ b/docs/src/components/Wave/WaveBottom/wave.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import styles from './styles.module.css';
+import useScreenSize from '@site/src/hooks/useScreenSize';
+
+const WaveLight = (
+  <svg
+    className={styles.waveBottom}
+    width="100%"
+    viewBox="0 0 1440 300"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M-240 223.396C47.0486 129.764 212.33 345.91 550.798 270.102C759.335 223.396 780.428 195 1051.79 216.941C1344.23 240.587 1374.54 48.394 1617.32 10.4395C1647.62 5.69516 1680 0 1680 0V585C1680 585 63.4574 584.908 -240 585L-240 173.365"
+      fill="url(#paint0_linear_568_554)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_568_554"
+        x1="718.441"
+        y1="-1.1828e-09"
+        x2="718.562"
+        y2="602.914"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#7394FF" />
+        <stop offset="1" stop-color="#7394FF" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+const WaveDark = (
+  <svg
+    className={styles.waveBottom}
+    width="100%"
+    viewBox="0 0 1440 300"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M-240 223.396C47.0486 129.764 212.33 345.91 550.798 270.102C759.335 223.396 780.428 195 1051.79 216.941C1344.23 240.587 1374.54 48.394 1617.32 10.4395C1647.62 5.69516 1680 0 1680 0V585C1680 585 63.4574 584.908 -240 585L-240 173.365"
+      fill="url(#paint0_linear_494_1238)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_494_1238"
+        x1="618.461"
+        y1="-407.435"
+        x2="2537.8"
+        y2="1311.93"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#313C9C" />
+        <stop offset="1" stop-color="#313C9C" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+const WaveLightMobile = (
+  <svg
+    className={styles.waveBottom}
+    width="100%"
+    viewBox="0 0 390 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 38.2142C150.04 -12 247.111 67.8256 429.66 28.2142C539.28 4.42769 615.505 -5.5 767.818 28.2142C915.211 60.8391 893.644 25.6452 1023 0.5V160.5V553C1023 553 161.686 552.939 0 553V38.2142Z"
+      fill="url(#paint0_linear_568_708)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_568_708"
+        x1="718.441"
+        y1="-40"
+        x2="718.562"
+        y2="195"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#7394FF" />
+        <stop offset="1" stop-color="#7394FF" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+const WaveDarkMobile = (
+  <svg
+    className={styles.waveBottom}
+    width="100%"
+    viewBox="0 0 390 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 38.2142C150.04 -12 247.111 67.8256 429.66 28.2142C539.28 4.42769 615.505 -5.5 767.818 28.2142C915.211 60.8391 893.644 25.6452 1023 0.5V160.5V553C1023 553 161.686 552.939 0 553V38.2142Z"
+      fill="url(#paint0_linear_499_1287)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_499_1287"
+        x1="457.399"
+        y1="-384.3"
+        x2="1925.69"
+        y2="357.737"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#313C9C" />
+        <stop offset="1" stop-color="#313C9C" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+const Wave = ({ theme }) => {
+  const { windowWidth } = useScreenSize();
+
+  if (theme === 'dark') {
+    return windowWidth > 768 ? WaveDark : WaveDarkMobile;
+  }
+
+  return windowWidth > 768 ? WaveLight : WaveLightMobile;
+};
+
+export default Wave;
diff --git a/docs/src/components/Wave/WaveTop/index.tsx b/docs/src/components/Wave/WaveTop/index.tsx
new file mode 100644
index 0000000..c721039
--- /dev/null
+++ b/docs/src/components/Wave/WaveTop/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import { useColorMode } from '@docusaurus/theme-common';
+import Wave from './wave';
+
+const WaveTop = () => {
+  const theme = useColorMode().colorMode;
+  return <BrowserOnly>{() => <Wave theme={theme} />}</BrowserOnly>;
+};
+
+export default WaveTop;
diff --git a/docs/src/components/Wave/WaveTop/styles.module.css b/docs/src/components/Wave/WaveTop/styles.module.css
new file mode 100644
index 0000000..4b347bd
--- /dev/null
+++ b/docs/src/components/Wave/WaveTop/styles.module.css
@@ -0,0 +1,13 @@
+.wave {
+  position: absolute;
+  bottom: 100%;
+  width: 100%;
+  z-index: -1;
+  margin-bottom: -5%;
+}
+
+@media (max-width: 768px) {
+  .wave {
+    margin-bottom: -29%;
+  }
+}
\ No newline at end of file
diff --git a/docs/src/components/Wave/WaveTop/wave.tsx b/docs/src/components/Wave/WaveTop/wave.tsx
new file mode 100644
index 0000000..90db6e4
--- /dev/null
+++ b/docs/src/components/Wave/WaveTop/wave.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import styles from './styles.module.css';
+import useScreenSize from '@site/src/hooks/useScreenSize';
+
+const WaveLight = (
+  <svg
+    className={styles.wave}
+    width="100%"
+    viewBox="0 0 1440 300"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_2020_324)">
+      <path
+        d="M-240 344.114C-122.485 62.6994 333.195 289.04 550.509 138.352C876.604 -87.7728 995.042 196.141 1302.39 105.555C1492.76 49.4634 1495.7 -221.523 1680 -233V2027H-240L-240 344.114Z"
+        fill="url(#paint0_linear_2020_324)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_2020_324"
+        x1="718.441"
+        y1="-233"
+        x2="720.244"
+        y2="1903.04"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#7394FF" />
+        <stop offset="1" stop-color="#7394FF" />
+      </linearGradient>
+      <clipPath id="clip0_2020_324">
+        <rect width="1440" height="300" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const WaveDark = (
+  <svg
+    className={styles.wave}
+    width="100%"
+    viewBox="0 0 1440 300"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_2002_315)">
+      <path
+        d="M-240 344.114C-122.485 62.6994 333.195 289.04 550.509 138.352C876.604 -87.7728 995.042 196.141 1302.39 105.555C1492.76 49.4634 1495.7 -221.523 1680 -233V2027H-240L-240 344.114Z"
+        fill="url(#paint0_linear_2002_315)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_2002_315"
+        x1="1163.89"
+        y1="-871.089"
+        x2="399.648"
+        y2="1621.13"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#313C9C" />
+        <stop offset="1" stop-color="#313C9C" />
+      </linearGradient>
+      <clipPath id="clip0_2002_315">
+        <rect width="1440" height="300" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const WaveLightMobile = (
+  <svg
+    className={styles.wave}
+    width="100%"
+    viewBox="0 0 390 150"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_2020_322)">
+      <path
+        d="M0 30.9698C62.6134 -38.258 305.405 37.4218 421.193 0.352501C594.94 -55.2742 658.045 24.5685 821.805 2.2844C923.235 -11.5141 924.805 -38.1765 1023 -41V2419H0.00024002L0 30.9698Z"
+        fill="url(#paint0_linear_2020_322)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_2020_322"
+        x1="510.669"
+        y1="-41"
+        x2="514.68"
+        y2="2284.07"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#7394FF" />
+        <stop offset="1" stop-color="#7394FF" />
+      </linearGradient>
+      <clipPath id="clip0_2020_322">
+        <rect width="390" height="150" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const WaveDarkMobile = (
+  <svg
+    className={styles.wave}
+    width="100%"
+    viewBox="0 0 390 150"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_2001_312)">
+      <path
+        d="M0 30.9698C62.6134 -38.258 305.405 37.4218 421.193 0.352501C594.94 -55.2742 658.045 24.5685 821.805 2.2844C923.235 -11.5141 924.805 -38.1765 1023 -41V2419H0.00024002L0 30.9698Z"
+        fill="url(#paint0_linear_2001_312)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_2001_312"
+        x1="748.012"
+        y1="-735.557"
+        x2="667.114"
+        y2="1922.28"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#313C9C" />
+        <stop offset="1" stop-color="#313C9C" />
+      </linearGradient>
+      <clipPath id="clip0_2001_312">
+        <rect width="390" height="150" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const Wave = ({ theme }) => {
+  const { windowWidth } = useScreenSize();
+
+  if (theme === 'dark') {
+    return windowWidth > 768 ? WaveDark : WaveDarkMobile;
+  }
+
+  return windowWidth > 768 ? WaveLight : WaveLightMobile;
+};
+
+export default Wave;
diff --git a/docs/src/css/colors.css b/docs/src/css/colors.css
index 73e8445..6ea5765 100644
--- a/docs/src/css/colors.css
+++ b/docs/src/css/colors.css
@@ -15,6 +15,15 @@
   --swm-navy-dark-40: #abbcf5;
   --swm-navy-dark-20: #c1c6e5;
 
+  /* react-native-executorch */
+  --swm-cornflower-100: #4B6CF4;
+  --swm-cornflower-80: #7394FF;
+  --swm-cornflower-60: #A6C2FF;
+  --swm-cornflower-0: #F7FAFF;
+
+  --swm-navy-100: #160042;
+  /* end react-native-executorch */
+
   --swm-purple-light-100: #782aeb;
   --swm-purple-light-80: #b58df1;
   --swm-purple-light-60: #d1bbf3;
@@ -232,21 +241,21 @@
 
   /* Landing */
   --swm-landing-heading: var(--ifm-font-color-base);
-  --swm-landing-heading-selected: var(--swm-purple-light-100);
+  --swm-landing-heading-selected: var(--swm-cornflower-80);
   --swm-landing-heading-selected-border: var(--swm-navy-light-100);
 
   --swm-landing-horse: var(--swm-navy-light-100);
 
-  --swm-landing-button-purple: var(--swm-purple-light-100);
+  --swm-landing-button-purple: var(--swm-cornflower-80);
 
   --swm-landing-feature-item: var(--swm-purple-light-40);
-  --swm-landing-feature-item-shadow: var(--swm-purple-light-100);
+  --swm-landing-feature-item-shadow: var(--swm-cornflower-80);
 
   --swm-landing-sponsors-color: var(--ifm-font-color-base);
 
   /* Hire Us Section */
 
-  --swm-hire-us-section-title: var(--swm-blue-light-60);
+  --swm-hire-us-section-title: var(--swm-cornflower-100);
   --swm-hire-us-section: var(--swm-navy-light-100);
   --swm-hire-us-section-color: var(--swm-off-white);
 
@@ -303,7 +312,7 @@
 
   /* Color Mode */
   --swm-color-mode-enabled: var(--swm-off-navy);
-  --swm-color-mode-enabled-color-landing: var(--swm-purple-dark-120);
+  --swm-color-mode-enabled-color-landing: var(--swm-navy-100);
   --swm-color-mode-disabled-color: var(--swm-navy-light-40);
 
   /* Typography */
@@ -415,18 +424,18 @@
 
   --swm-landing-horse: var(--swm-off-white);
 
-  --swm-landing-button-purple: var(--swm-purple-dark-100);
+  --swm-landing-button-purple: var(--swm-cornflower-80);
 
-  --swm-landing-feature-item: var(--swm-purple-dark-100);
+  --swm-landing-feature-item: var(--swm-cornflower-80);
   --swm-landing-feature-item-shadow: var(--swm-purple-dark-140);
 
   --swm-landing-sponsors-color: var(--swm-off-white);
 
   /* Hire Us Section */
 
-  --swm-hire-us-section-title: var(--swm-purple-dark-100);
-  --swm-hire-us-section: var(--swm-off-white);
-  --swm-hire-us-section-color: var(--swm-purple-light-100);
+  --swm-hire-us-section-title: var(--swm-cornflower-100);
+  --swm-hire-us-section: var(--swm-cornflower-100);
+  --swm-hire-us-section-color: var(--swm-white);
 
   /* Cards */
   --swm-card-background: var(--swm-navy);
diff --git a/docs/src/css/overrides.css b/docs/src/css/overrides.css
index bcab954..eaa21a3 100644
--- a/docs/src/css/overrides.css
+++ b/docs/src/css/overrides.css
@@ -9,7 +9,7 @@
   background-color: #ffffff;
 }
 [data-theme='dark'][class*='plugin-pages'] {
-  background-color: var(--swm-navy-dark-140);
+  background-color: var(--swm-navy-100);
 }
 
 table {
@@ -132,10 +132,6 @@ table thead tr {
   }
 }
 
-[class*='navbar__link']:not([class*='header-github']):not([role='button']) {
-  display: none;
-}
-
 /* TODO: Remove after @swmansion-t-rex-ui 0.0.10 patch */
 button[class*='DocSearch-Button'] {
   margin: 0 !important;
diff --git a/docs/src/hooks/usePageType.tsx b/docs/src/hooks/usePageType.tsx
new file mode 100644
index 0000000..75577ca
--- /dev/null
+++ b/docs/src/hooks/usePageType.tsx
@@ -0,0 +1,14 @@
+import { useLocation } from '@docusaurus/router';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+const usePageType = () => {
+  const location = useLocation();
+  const baseUrl = useBaseUrl('/');
+
+  return {
+    isDocumentation: location.pathname.startsWith(`${baseUrl}docs`),
+    isLanding: location.pathname === baseUrl,
+  };
+};
+
+export default usePageType;
diff --git a/docs/src/hooks/useScreenSize.tsx b/docs/src/hooks/useScreenSize.tsx
new file mode 100644
index 0000000..08db813
--- /dev/null
+++ b/docs/src/hooks/useScreenSize.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+/*
+ * Caution - read before use!
+ * As this hook uses innerWidth prop, which belongs to the window object,
+ * it requires to use the viewport. Thus, building the production build of the
+ * application may fail, as the Docusaurus is using SSR to serve it.
+ * Remember to verify if user can use the viewport by using
+ * `ExecutionEnvironment.canUseViewport` method, `<BrowserOnly>` component or
+ * `useIsBrowser` hook.
+ */
+const useScreenSize = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', handleWindowResize);
+
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+
+  return {
+    windowWidth,
+  };
+};
+
+export default useScreenSize;
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 9b96097..31dedd4 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -1,10 +1,35 @@
 import React from 'react';
-import { Redirect } from '@docusaurus/router';
+import Layout from '@theme/Layout';
+import styles from './styles.module.css';
+import HomepageStartScreen from '@site/src/components/Hero/StartScreen';
+import WaveTop from '@site/src/components/Wave/WaveTop';
+import ExecuTorchIntroduction from '../components/ExecuTorchIntroduction';
+import ReactNativeExecuTorchFeatures from '@site/src/components/ReactNativeExecuTorchFeatures';
+import { HireUsSection } from '@swmansion/t-rex-ui';
+import FooterBackground from '../components/FooterBackground';
 
-function Home() {
+const Home = () => {
   return (
-    <Redirect to="/react-native-executorch/docs/fundamentals/getting-started" />
+    <Layout
+      title="React Native ExecuTorch"
+      description="Declarative way to run AI models in React Native on device, powered by ExecuTorch."
+    >
+      <div className={styles.container}>
+        <HomepageStartScreen />
+      </div>
+      <div className={styles.linearGradient}>
+        <WaveTop />
+        <div className={styles.container}>
+          <ExecuTorchIntroduction />
+          <ReactNativeExecuTorchFeatures />
+          <div className={styles.hireUsSection}>
+            <HireUsSection href="https://swmansion.com/contact/projects?utm_source=react-native-executorch&utm_medium=docs" />
+          </div>
+        </div>
+      </div>
+      <FooterBackground />
+    </Layout>
   );
-}
+};
 
 export default Home;
diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css
index 47adf30..1635a7e 100644
--- a/docs/src/pages/styles.module.css
+++ b/docs/src/pages/styles.module.css
@@ -1,24 +1,81 @@
 .container {
-  width: 60%;
+  width: 70%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  gap: 7.5rem;
+  gap: 10rem;
 }
 
-.waveContainer {
+.container > div {
+  z-index: 10;
+}
+
+.linearGradient {
   position: relative;
+  width: 100%;
+  margin-top: 18rem;
+  background: linear-gradient(#7394FF, #FFFFFF);
+  padding-top: 8.25rem;
+}
+
+[data-theme='dark'] .linearGradient {
+  background: linear-gradient(#313c9c, #160042);
+}
+
+.hireUsSection {
+  z-index: 10;
+}
+
+[data-theme='dark'] .hireUsSection a div:hover {
+  border-color: var(--swm-off-white);
+  color: var(--swm-off-white);
+}
+
+[data-theme='dark'] .hireUsSection a div:hover svg{
+  stroke: var(--swm-off-white);
+}
+
+@media (max-width: 2560px) {
+  .linearGradient {
+    margin-top: 14rem;
+  }
+}
+
+@media (max-width: 1920px) {
+  .linearGradient {
+    margin-top: 12rem;
+  }
 }
 
 @media (max-width: 1440px) {
   .container {
-    width: 75%;
+    width: 80%;
+  }
+
+  .linearGradient {
+    margin-top: 10rem;
   }
 }
 
 @media (max-width: 996px) {
   .container {
     width: 85%;
-    gap: 3.5rem;
+    gap: 8rem;
   }
-}
\ No newline at end of file
+
+  .linearGradient {
+    margin-top: 10rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .linearGradient {
+    padding-top: 4rem;
+  }
+}
+
+@media (max-width: 420px) {
+  .linearGradient {
+    margin-top: 6rem;
+  }
+}