diff --git a/docs/src/components/HowItWorks/how-it-works.png b/docs/src/components/HowItWorks/how-it-works.png
new file mode 100644
index 0000000..000058b
Binary files /dev/null and b/docs/src/components/HowItWorks/how-it-works.png differ
diff --git a/docs/src/components/HowItWorks/index.js b/docs/src/components/HowItWorks/index.js
new file mode 100644
index 0000000..31bb461
--- /dev/null
+++ b/docs/src/components/HowItWorks/index.js
@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+import src from './how-it-works.png';
+
+export default function HowItWorks() {
+  return (
+    <section>
+      <div className="container">
+        <div className="row">
+          <div className={clsx('col col--8 col--offset-2')}>
+            <img src={src} alt="Overview of how MTK works" />;
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index fa09fd1..3d4b19f 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -3,6 +3,7 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import HowItWorks from '@site/src/components/HowItWorks';
 
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
@@ -37,6 +38,7 @@ export default function Home() {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <HowItWorks />
       </main>
     </Layout>
   );