diff --git a/docs/src/components/DownloadButton.tsx b/docs/src/components/DownloadButton.tsx
index b13b926ba2c4..dd49b6a93bce 100644
--- a/docs/src/components/DownloadButton.tsx
+++ b/docs/src/components/DownloadButton.tsx
@@ -1,7 +1,76 @@
+import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+import clsx from 'clsx';
 import React from 'react'
+import UAParser from 'ua-parser-js';
 
+export function DownloadAppButton({className} : {className?: string}) {
+    const [platform, setPlatform] = React.useState('');
+    React.useEffect(() => {
+      const parser = new UAParser();
+      const uaPlatform = parser.getOS().name;
+      // Test if it is a linux distro
+      if (['Raspbian', 'Debian', 'Ubuntu', 'Linux Mint', 'Fedora', 'Arch', 'CentOS', 'Red Hat', 'Manjaro'].includes(uaPlatform)) {
+        setPlatform('Linux');
+      } else {
+        setPlatform(uaPlatform);
+      }
+    }, []);
+    return (<div className="dropdown dropdown--hoverable">
+        <a href="/downloads" className={clsx("button button--primary button--lg", className)}>Download</a>
+        <ul className="dropdown__menu">
+            <li>
+                {platform === 'Windows' &&
+                    <Link
+                        className="dropdown__link"
+                        to="/downloads/windows">
+                        <Translate description="homepage windows button">
+                            Download for Windows
+                        </Translate>
+                    </Link>
+                }
+                {platform === 'Linux' &&
+                    <Link
+                        className="dropdown__link"
+                        to="/downloads/linux">
+                        <Translate description="homepage linux button">
+                            Download for Linux
+                        </Translate>
+                    </Link>
+                }
+                {platform === 'Android' &&
+                    <Link
+                        className="dropdown__link"
+                        to="/downloads/android">
+                        <Translate description="homepage android button">
+                            Download for Android
+                        </Translate>
+                    </Link>
+                }
+            </li>
+            <li>
+                <Link
+                    className="dropdown__link"
+                    to="https://butterfly.linwood.dev">
+                    <Translate description="homepage web button">
+                        Open the web app
+                    </Translate>
+                </Link>
+            </li>
+            <li>
+                <Link
+                    className="dropdown__link"
+                    to="/downloads">
+                    <Translate description="homepage downloads button">
+                        Downloads
+                    </Translate>
+                </Link>
+            </li>
+        </ul>
+    </div>);
+}
 
-export default function DownloadButton({className, href, children, after}) {
+export default function DownloadButton({ className, href, children, after }) {
     function onClick() {
         // Open thank you page after download
         console.log('Downloading...')
diff --git a/docs/src/components/HomepageDescription.module.css b/docs/src/components/HomepageDescription.module.css
new file mode 100644
index 000000000000..a9c874d40cec
--- /dev/null
+++ b/docs/src/components/HomepageDescription.module.css
@@ -0,0 +1,10 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+.description {
+  max-width: 600px;
+  margin: 0 auto;
+  text-align: center;
+}
+.description span {
+    font-size: 1.5rem;
+}
diff --git a/docs/src/components/HomepageDescription.tsx b/docs/src/components/HomepageDescription.tsx
new file mode 100644
index 000000000000..f9c159f997b4
--- /dev/null
+++ b/docs/src/components/HomepageDescription.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './HomepageDescription.module.css';
+import Translate from '@docusaurus/Translate';
+
+export default function HomepageDescription() {
+  return (
+    <section className={`${styles.description} margin-vert--xl padding--md`}>
+      <span>
+        <Translate description="Features simple description">
+            Create and manage your notes with ease in a simple, beautiful and powerful application.
+        </Translate>
+      </span>
+    </section>
+  );
+}
diff --git a/docs/src/components/HomepageFeatures.module.css b/docs/src/components/HomepageFeatures.module.css
index 9dcb82c3548a..4701833f4054 100644
--- a/docs/src/components/HomepageFeatures.module.css
+++ b/docs/src/components/HomepageFeatures.module.css
@@ -4,10 +4,46 @@
   display: flex;
   align-items: center;
   padding: 2rem 0;
-  width: 100%;
+}
+
+.features h2 {
+  font-size: 2rem;
+  text-align: center;
+  margin-bottom: 2rem;
+  margin-top: 5rem;
 }
 
 .featureSvg {
   height: 200px;
   width: 200px;
 }
+
+.showcase {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.showcaseImg {
+    width: 100%;
+    height: auto;
+    position: sticky;
+    padding: 1rem;
+    top: 50%;
+    margin-top: 50%;
+    transform: translateY(-50%);
+}
+
+.showcaseText {
+    text-align: center;
+    margin: 5rem 0;
+    list-style-type: none;
+    min-height: 50vh;
+    vertical-align: middle;
+}
+
+.showcaseButton {
+    text-align: center;
+    margin: 5rem 0;
+    list-style-type: none;
+    min-height: 100vh;
+}
diff --git a/docs/src/components/HomepageFeatures.tsx b/docs/src/components/HomepageFeatures.tsx
index ab4a2b38b5e9..57ab10389bf1 100644
--- a/docs/src/components/HomepageFeatures.tsx
+++ b/docs/src/components/HomepageFeatures.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './HomepageFeatures.module.css';
 import Translate from '@docusaurus/Translate';
+import { DownloadAppButton } from './DownloadButton';
 
-const FeatureList = [
+const Principals = [
     {
         title: (<Translate description="Features cross-platform title">Cross platform</Translate>),
         Svg: require('../../static/img/undraw_progressive_app_m-9-ms.svg').default,
@@ -26,53 +27,118 @@ const FeatureList = [
             </Translate>
         ),
     },
-  {
-    title: (<Translate description="Features customizable title">Customizable</Translate>),
-    Svg: require('../../static/img/undraw_options_re_9vxh.svg').default,
-    description: (
-      <Translate description="Features customizable description">
-          Change everything to your needs.
-          Choose your custom color, create a palette and add your pages to the paper.
-          The paper has an infinite size, perfect for your ideas and notes.
-      </Translate>
-    ),
-  },
-  {
-    title: (<Translate description="Features local title">Choose where your data is stored</Translate>),
-    Svg: require('../../static/img/undraw_sweet_home_dkhr.svg').default,
-    description: (
-      <Translate description="Features local description">
-          You can choose to store your data locally or in your favorite cloud (webdav).
-          You can also export your data to a file and import it again.
-      </Translate>
-    ),
-  },
+    {
+        title: (<Translate description="Features customizable title">Customizable</Translate>),
+        Svg: require('../../static/img/undraw_options_re_9vxh.svg').default,
+        description: (
+            <Translate description="Features customizable description">
+                Change everything to your needs.
+                Choose your custom color, create a palette and add your pages to the paper.
+                The paper has an infinite size, perfect for your ideas and notes.
+            </Translate>
+        ),
+    },
+    {
+        title: (<Translate description="Features local title">Choose where your data is stored</Translate>),
+        Svg: require('../../static/img/undraw_sweet_home_dkhr.svg').default,
+        description: (
+            <Translate description="Features local description">
+                You can choose to store your data locally or in your favorite cloud (webdav).
+                You can also export your data to a file and import it again.
+            </Translate>
+        ),
+    },
+];
+
+const Features = [
+    {
+        description: (
+            <Translate description="Features infinite-canvas">
+                Use the infinite canvas to illustrate your ideas
+            </Translate>
+        ),
+    },
+    {
+        description: (
+            <Translate description="Features elements">
+                Use your pen, markdown or rich text to let your ideas flow
+            </Translate>
+        ),
+    },
+    {
+        Svg: require('../../static/img/undraw_progressive_app_m-9-ms.svg').default,
+        description: (
+            <Translate description="Features imports">
+                Load PDF, SVG, PNG and more files into your notes or take pictures from the camera
+            </Translate>
+        ),
+    },
+    {
+        Svg: require('../../static/img/undraw_progressive_app_m-9-ms.svg').default,
+        description: (
+            <Translate description="Features structure">
+                Structure your notes by adding areas and waypoints or use multiple pages
+            </Translate>
+        ),
+    },
 ];
 
-function Feature({Svg, title, description}) {
-  return (
-    <div className={clsx('col col--3')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} alt={title} />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
+function Principal({ Svg, title, description }) {
+    return (
+        <div className={clsx('col col--3')}>
+            <div className="text--center">
+                <Svg className={styles.featureSvg} alt={title} />
+            </div>
+            <div className="text--center padding-horiz--md">
+                <h3>{title}</h3>
+                <p>{description}</p>
+            </div>
+        </div>
+    );
 }
 
 export default function HomepageFeatures() {
-  return (
-    <section data-aos="fade-up" className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+    return (
+        <section data-aos="fade-up" className={styles.features}>
+            <div className="container">
+                <h2>
+                    <Translate description="Principals title">
+                        Principals
+                    </Translate>
+                </h2>
+                <div className="row">
+                    {Principals.map((props, idx) => (
+                        <Principal key={idx} {...props} />
+                    ))}
+                </div>
+                <h2>
+                    <Translate description="Showcase title">
+                        Features
+                    </Translate>
+                </h2>
+                <div className="row">
+                    <div className="col col--6">
+                        <img
+                            src={require('../../static/img/main.png').default}
+                            className={styles.showcaseImg}
+                            alt="Screenshot"
+                        />
+                    </div>
+                    <ul className="col col--6">
+                        {Features.map((props, idx) => (
+                            <li key={idx} className={`text-large vertical-center ${styles.showcaseText}`}>{props.description}</li>
+                        ))}
+                        <li className={`text-large ${styles.showcaseButton}`}>
+                            <h2>
+                                <Translate description="Download title">
+                                    Download Butterfly today
+                                </Translate>
+                            </h2>
+                            <DownloadAppButton />
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+    );
 }
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index dd4588881473..abff1a6a8bff 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -6,38 +6,38 @@
  */
 
 @font-face {
-  font-family: 'Comfortaa';
+  font-family: "Comfortaa";
   font-weight: 300;
   font-style: normal;
-  src: url('/fonts/Comfortaa-Light.ttf') format('truetype');
+  src: url("/fonts/Comfortaa-Light.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: 'Comfortaa';
+  font-family: "Comfortaa";
   font-weight: 400;
   font-style: normal;
-  src: url('/fonts/Comfortaa-Regular.ttf') format('truetype');
+  src: url("/fonts/Comfortaa-Regular.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: 'Comfortaa';
+  font-family: "Comfortaa";
   font-weight: 500;
   font-style: normal;
-  src: url('/fonts/Comfortaa-Medium.ttf') format('truetype');
+  src: url("/fonts/Comfortaa-Medium.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: 'Comfortaa';
+  font-family: "Comfortaa";
   font-weight: 600;
   font-style: normal;
-  src: url('/fonts/Comfortaa-SemiBold.ttf') format('truetype');
+  src: url("/fonts/Comfortaa-SemiBold.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: 'Comfortaa';
+  font-family: "Comfortaa";
   font-weight: 700;
   font-style: normal;
-  src: url('/fonts/Comfortaa-Bold.ttf') format('truetype');
+  src: url("/fonts/Comfortaa-Bold.ttf") format("truetype");
 }
 
 /* You can override the default Infima variables here. */
@@ -52,7 +52,7 @@
   --ifm-color-primary-lighter: #f5c162;
   --ifm-color-primary-lightest: #f7d28c;
   --ifm-code-font-size: 95%;
-  --ifm-font-family-base: 'Comfortaa', sans-serif;
+  --ifm-font-family-base: "Comfortaa", sans-serif;
   --ifm-menu-color-background-active: var(--ifm-color-primary-darkest);
   --ifm-menu-link-padding-vertical: 0.75rem;
   --ifm-menu-color-active: var(--ifm-color-gray-100);
@@ -78,12 +78,12 @@ img {
   --ifm-menu-color-active: var(--ifm-color-gray-100);
 }
 .footer {
-  --ifm-footer-background-color:var(--ifm-color-emphasis-900);
+  --ifm-footer-background-color: var(--ifm-color-emphasis-900);
   --ifm-footer-link-color: var(--ifm-color-emphasis-700);
 }
 .footer--dark {
   --ifm-footer-title-color: var(--ifm-color-primary-darkest);
-  --ifm-footer-background-color:var(--ifm-color-emphasis-100);
+  --ifm-footer-background-color: var(--ifm-color-emphasis-100);
   --ifm-footer-color: inherit;
 }
 .navbar__item {
@@ -123,7 +123,7 @@ img {
   padding: 0 var(--ifm-pre-padding);
 }
 
-html[data-theme='light'] .DocSearch {
+html[data-theme="light"] .DocSearch {
   /* --docsearch-primary-color: var(--ifm-color-primary); */
   /* --docsearch-text-color: var(--ifm-font-color-base); */
   --docsearch-muted-color: var(--ifm-color-secondary-darkest);
@@ -141,7 +141,7 @@ html[data-theme='light'] .DocSearch {
   --docsearch-footer-background: var(--ifm-color-white);
 }
 
-html[data-theme='dark'] .DocSearch {
+html[data-theme="dark"] .DocSearch {
   --docsearch-text-color: var(--ifm-font-color-base);
   --docsearch-muted-color: var(--ifm-color-secondary-darkest);
   --docsearch-container-background: rgba(47, 55, 69, 0.7);
@@ -197,7 +197,6 @@ html[data-theme='dark'] .DocSearch {
   background-color: var(--ifm-color-primary-dark);
   font-weight: bold;
   transition: background 0.2s ease-in-out;
-
 }
 .menu__link--active:not(.menu__link--sublist):hover {
   background-color: var(--ifm-color-primary-darkest);
@@ -326,26 +325,26 @@ html[data-theme='dark'] .DocSearch {
   --ifm-link-hover-color: var(--ifm-button-color);
   border-radius: 0.75rem;
 }
-.button:hover {
-  outline: var(--ifm-color-primary-darkest) solid 4px;
+.dropdown > .button:hover {
+  outline: var(--ifm-button-background-color) solid 2px;
 }
 
 :where(.button--windows) {
-  --ifm-button-background-color: #0078D6;
-  --ifm-button-border-color: #0078D6;
+  --ifm-button-background-color: #0078d6;
+  --ifm-button-border-color: #0078d6;
 }
 
 :where(.button--linux) {
-  --ifm-button-background-color: #FCC624;
-  --ifm-button-border-color: #FCC624;
+  --ifm-button-background-color: #fcc624;
+  --ifm-button-border-color: #fcc624;
 }
 :where(.button--android) {
-  --ifm-button-background-color: #3DDC84;
-  --ifm-button-border-color: #3DDC84;
+  --ifm-button-background-color: #3ddc84;
+  --ifm-button-border-color: #3ddc84;
 }
 :where(.button--pwa) {
-  --ifm-button-background-color: #5A0FC8;
-  --ifm-button-border-color: #5A0FC8;
+  --ifm-button-background-color: #5a0fc8;
+  --ifm-button-border-color: #5a0fc8;
 }
 :where(.button--macos) {
   --ifm-button-background-color: #000000;
@@ -379,7 +378,8 @@ html[data-theme='dark'] .DocSearch {
 }
 
 html {
-  scrollbar-color: var(--ifm-color-primary-darkest) var(--ifm-color-emphasis-200);
+  scrollbar-color: var(--ifm-color-primary-darkest)
+    var(--ifm-color-emphasis-200);
 }
 
 .grid {
@@ -426,7 +426,8 @@ html {
   width: 5em;
 }
 
-main .clean-btn,.navbar-sidebar__back {
+main .clean-btn,
+.navbar-sidebar__back {
   color: var(--ifm-color-gray-100);
 }
 
@@ -437,3 +438,19 @@ main .clean-btn,.navbar-sidebar__back {
 .table-of-contents__link:hover {
   color: var(--ifm-color-gray-500);
 }
+
+.vertical-center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.text-large {
+    font-size: 2rem;
+}
+
+@media (max-width: 996px) {
+    .text-large {
+        font-size: 1.25rem;
+    }
+}
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 6251f02960a1..bc80b3fe41b5 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -10,20 +10,11 @@ import "animate.css/animate.min.css";
 import UAParser from 'ua-parser-js';
 import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
 import { AnimationOnScroll } from 'react-animation-on-scroll';
+import HomepageDescription from '../components/HomepageDescription';
+import { DownloadAppButton } from '../components/DownloadButton';
 
 function HomepageHeader({
   docsPluginId}) {
-  const [platform, setPlatform] = React.useState('');
-  React.useEffect(() => {
-    const parser = new UAParser();
-    const uaPlatform = parser.getOS().name;
-    // Test if it is a linux distro
-    if (['Raspbian', 'Debian', 'Ubuntu', 'Linux Mint', 'Fedora', 'Arch', 'CentOS', 'Red Hat', 'Manjaro'].includes(uaPlatform)) {
-      setPlatform('Linux');
-    } else {
-      setPlatform(uaPlatform);
-    }
-  }, []);
   const {siteConfig} = useDocusaurusContext();
   const version = useDocsVersionCandidates(docsPluginId)[0];
   return (
@@ -39,72 +30,20 @@ function HomepageHeader({
             </p>
             <div className={styles.indexCtas}>
               <AnimationOnScroll animateIn="animate__fadeInLeft">
-                <Link data-aos="fade-right"
-                  className={clsx("button button--lg button--secondary", styles.button)}
+                <DownloadAppButton className={styles.button} />
+              </AnimationOnScroll>
+              <AnimationOnScroll animateIn="animate__fadeInUp">
+                <Link className={clsx("button button--outline button--lg button--secondary", styles.button)}
                   to={`${version.path}/intro`}>
                   <Translate description="homepage getting started button">
                     Getting started
                   </Translate>
                 </Link>
               </AnimationOnScroll>
-              <AnimationOnScroll animateIn="animate__fadeInUp">
-                <div className="dropdown dropdown--hoverable">
-                  <a href="/downloads" className={clsx("button button--primary button--lg", styles.button)}>Download</a>
-                  <ul className="dropdown__menu">
-                    <li>
-                      {platform === 'Windows' &&
-                        <Link
-                          className="dropdown__link"
-                          to="/downloads/windows">
-                          <Translate description="homepage windows button">
-                            Download for Windows
-                          </Translate>
-                        </Link>
-                      }
-                      {platform === 'Linux' &&
-                        <Link
-                          className="dropdown__link"
-                          to="/downloads/linux">
-                          <Translate description="homepage linux button">
-                            Download for Linux
-                          </Translate>
-                        </Link>
-                      }
-                      {platform === 'Android' &&
-                        <Link
-                          className="dropdown__link"
-                          to="/downloads/android">
-                          <Translate description="homepage android button">
-                            Download for Android
-                          </Translate>
-                        </Link>
-                      }
-                    </li>
-                    <li>
-                      <Link
-                        className="dropdown__link"
-                        to="https://butterfly.linwood.dev">
-                        <Translate description="homepage web button">
-                          Open the web app
-                        </Translate>
-                      </Link>
-                    </li>
-                    <li>
-                      <Link
-                        className="dropdown__link"
-                        to="/downloads">
-                        <Translate description="homepage downloads button">
-                          Downloads
-                        </Translate>
-                      </Link>
-                    </li>
-                  </ul>
-                </div>
-              </AnimationOnScroll>
             </div>
           </div>
           <div className={clsx("col col--6", styles.center)}>
-            <img data-aos="fade-up"
+            <img
               src={require('../../static/img/main.png').default}
               className={styles.screenshot}
               alt="Screenshot"
@@ -124,6 +63,7 @@ export default function Home({docsPluginId}) {
       description="Change the world">
       <HomepageHeader docsPluginId={docsPluginId} />
       <main>
+        <HomepageDescription />
         <HomepageFeatures />
       </main>
     </Layout>
diff --git a/docs/static/img/main.png b/docs/static/img/main.png
index 4eafb9e821c1..fd4a80aa3a62 100644
Binary files a/docs/static/img/main.png and b/docs/static/img/main.png differ