diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
index 88a49dd2..9601404a 100644
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -3,6 +3,8 @@ import type { Config } from '@docusaurus/types'
 import { themes as prismThemes } from 'prism-react-renderer'
 
 const repoLink = 'https://github.com/binarapps/baca-react-native-template'
+const docsLink = '/docs/overview'
+const demoLink = 'https://binarapps.online/sign-in'
 
 const config: Config = {
   title: 'BACA - react native starter',
@@ -58,12 +60,23 @@ const config: Config = {
         src: 'img/logo-light.png',
         srcDark: 'img/logo-dark.png',
       },
+      hideOnScroll: true,
       items: [
         {
           href: repoLink,
           label: 'GitHub',
           position: 'right',
         },
+        {
+          to: docsLink,
+          label: 'Docs',
+          position: 'left',
+        },
+        {
+          to: demoLink,
+          label: 'Demo',
+          position: 'left',
+        },
       ],
     },
     footer: {
diff --git a/docs/package.json b/docs/package.json
index 1a9bcbaa..77165b87 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -22,7 +22,9 @@
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.1.0",
diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx
index 1fba575b..68dfc13c 100644
--- a/docs/src/components/HomepageFeatures/index.tsx
+++ b/docs/src/components/HomepageFeatures/index.tsx
@@ -33,7 +33,7 @@ const FeatureList: FeatureItem[] = [
     title: 'Powered by React Native and Expo',
     Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
     description: (
-      <>We are using the newest tools to acheive the best performance and developer experience.</>
+      <>We are using the newest tools to achieve the best performance and developer experience.</>
     ),
   },
 ]
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 8adcbba7..94f3d6f2 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -6,6 +6,9 @@
 
 /* You can override the default Infima variables here. */
 
+@import '~slick-carousel/slick/slick.css';
+@import '~slick-carousel/slick/slick-theme.css';
+
 :root {
   --ifm-color-primary: #531fa5;
   --ifm-color-primary-dark: #4b1c95;
diff --git a/docs/src/pages/HomepageHeader.tsx b/docs/src/pages/HomepageHeader.tsx
new file mode 100644
index 00000000..e9bd8bf8
--- /dev/null
+++ b/docs/src/pages/HomepageHeader.tsx
@@ -0,0 +1,23 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import { HeaderButtons } from './components/HeaderButtons'
+import { ImageSlider } from './components/ImageSlider'
+import styles from './index.module.css'
+import Heading from '@theme/Heading'
+import clsx from 'clsx'
+
+export function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext()
+
+  return (
+    <header className={clsx('hero hero--primary padding-vert--xl', styles.heroBanner)}>
+      <div className="container padding-vert--xl">
+        <Heading as="h1" className="hero__title">
+          {siteConfig.title}
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <HeaderButtons />
+        <ImageSlider />
+      </div>
+    </header>
+  )
+}
diff --git a/docs/src/pages/components/HeaderButtons.tsx b/docs/src/pages/components/HeaderButtons.tsx
new file mode 100644
index 00000000..0b8ee94d
--- /dev/null
+++ b/docs/src/pages/components/HeaderButtons.tsx
@@ -0,0 +1,20 @@
+import styles from '../index.module.css'
+import Link from '@docusaurus/Link'
+import clsx from 'clsx'
+
+export const HeaderButtons = () => (
+  <div className={styles.buttonsContainer}>
+    <Link
+      className={clsx('button button--secondary button--lg', styles.button, styles.buttonReadDocs)}
+      to="/docs/overview"
+    >
+      Read docs
+    </Link>
+    <Link
+      className={clsx('button button--secondary button--lg', styles.button, styles.buttonTryIt)}
+      to="https://binarapps.online/sign-in"
+    >
+      Try it
+    </Link>
+  </div>
+)
diff --git a/docs/src/pages/components/ImageSlider.tsx b/docs/src/pages/components/ImageSlider.tsx
new file mode 100644
index 00000000..f20da9ee
--- /dev/null
+++ b/docs/src/pages/components/ImageSlider.tsx
@@ -0,0 +1,61 @@
+import styles from '../index.module.css'
+import Slider from 'react-slick'
+
+const sliderSettings = {
+  adaptiveHeight: true,
+  arrows: true,
+  autoplay: true,
+  autoplaySpeed: 3000,
+  dots: true,
+  infinite: true,
+  responsive: [
+    {
+      breakpoint: 1000,
+      settings: {
+        slidesToShow: 2,
+        slidesToScroll: 1,
+      },
+    },
+    {
+      breakpoint: 550,
+      settings: {
+        slidesToShow: 1,
+        slidesToScroll: 1,
+      },
+    },
+  ],
+  slidesToScroll: 1,
+  slidesToShow: 3,
+  speed: 500,
+}
+
+const sliderImages = [
+  {
+    src: '/img/iphone_signup_draft_light.png',
+    alt: 'First iPhone draft',
+  },
+  {
+    src: '/img/iphone_signup_draft_dark.png',
+    alt: 'Second iPhone draft',
+  },
+  {
+    src: '/img/iphone_settings_draft_light.png',
+    alt: 'Third iPhone draft',
+  },
+  {
+    src: '/img/iphone_settings_draft_dark.png',
+    alt: 'Fourth iPhone draft',
+  },
+]
+
+export const ImageSlider = () => (
+  <div className={styles.sliderContainer}>
+    <Slider {...sliderSettings}>
+      {sliderImages.map((image, index) => (
+        <div key={index} className={styles.imageWrapper}>
+          <img src={image.src} alt={image.alt} className={styles.image} />
+        </div>
+      ))}
+    </Slider>
+  </div>
+)
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
index 9f71a5da..0707b648 100644
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -21,3 +21,48 @@
   align-items: center;
   justify-content: center;
 }
+
+.sliderContainer {
+  margin-top: 86px;
+}
+
+.imageWrapper {
+  padding: 0 16px;
+}
+
+.image {
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+  border-radius: 12px;
+}
+
+.buttonsContainer {
+  display: flex;
+  justify-content: center;
+  gap: 3rem;
+}
+
+.button {
+  width: 160px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.buttonTryIt {
+  background-color: #2f2f2f;
+  color: #ffffff !important;
+}
+
+@media screen and (max-width: 600px) {
+  .buttonsContainer {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .button {
+    width: 100%;
+  }
+}
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 066b1fc0..dd0906ee 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -1,31 +1,7 @@
-/* eslint-disable react-native/no-raw-text */
-import Link from '@docusaurus/Link'
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import HomepageFeatures from '@site/src/components/HomepageFeatures'
-import Heading from '@theme/Heading'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import { HomepageHeader } from './HomepageHeader'
 import Layout from '@theme/Layout'
-import clsx from 'clsx'
-
-import styles from './index.module.css'
-
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext()
-  return (
-    <header className={clsx('hero hero--primary padding-vert--xl', styles.heroBanner)}>
-      <div className="container padding-vert--xl">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link className="button button--secondary button--lg" to="/docs/overview">
-            See docs
-          </Link>
-        </div>
-      </div>
-    </header>
-  )
-}
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext()
diff --git a/docs/static/img/iphone_settings_draft_dark.png b/docs/static/img/iphone_settings_draft_dark.png
new file mode 100644
index 00000000..e80fd5ee
Binary files /dev/null and b/docs/static/img/iphone_settings_draft_dark.png differ
diff --git a/docs/static/img/iphone_settings_draft_light.png b/docs/static/img/iphone_settings_draft_light.png
new file mode 100644
index 00000000..eb4bf248
Binary files /dev/null and b/docs/static/img/iphone_settings_draft_light.png differ
diff --git a/docs/static/img/iphone_signup_draft_dark.png b/docs/static/img/iphone_signup_draft_dark.png
new file mode 100644
index 00000000..d6e96652
Binary files /dev/null and b/docs/static/img/iphone_signup_draft_dark.png differ
diff --git a/docs/static/img/iphone_signup_draft_light.png b/docs/static/img/iphone_signup_draft_light.png
new file mode 100644
index 00000000..b0f117b9
Binary files /dev/null and b/docs/static/img/iphone_signup_draft_light.png differ
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 7125ccee..0c709a23 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -2331,7 +2331,7 @@
     "@docusaurus/theme-search-algolia" "3.3.2"
     "@docusaurus/types" "3.3.2"
 
-"@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==
@@ -3900,6 +3900,11 @@ ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
+classnames@^2.2.5:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clean-css@^5.2.2, clean-css@^5.3.2, clean-css@~5.3.2:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
@@ -4635,6 +4640,11 @@ enhanced-resolve@^5.15.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
+
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
@@ -5991,6 +6001,13 @@ json-schema-traverse@^1.0.0:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
+  dependencies:
+    string-convert "^0.2.0"
+
 json5@^2.1.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
@@ -7861,6 +7878,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-loadable@npm:@docusaurus/react-loadable@6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-6.0.0.tgz#de6c7f73c96542bd70786b8e522d535d69069dc4"
@@ -7903,6 +7928,17 @@ react-router@5.3.4, react-router@^5.3.4:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-slick@^0.30.2:
+  version "0.30.2"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.30.2.tgz#b28e992f9c519bb516a0af8d37e82cb59fee08ce"
+  integrity sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -8136,6 +8172,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-alpn@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
@@ -8478,6 +8519,11 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
+
 snake-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
@@ -8581,6 +8627,11 @@ std-env@^3.0.1:
   resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2"
   integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
+
 string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"