diff --git a/site/components/Home/Why.js b/site/components/Home/Why.js
new file mode 100644
index 0000000..c9aba29
--- /dev/null
+++ b/site/components/Home/Why.js
@@ -0,0 +1,111 @@
+export default function Why() {
+  return (
+  <div className="relative bg-white dark:bg-transparent pt-16 pb-32 overflow-hidden">
+    <div className="text-center">
+      <h2 className="text-3xl tracking-tight font-extrabold text-white sm:text-4xl">Why this Project</h2>
+      <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
+        What is the motivation and purpose of this project?
+      </p>
+    </div>
+    <div className="mt-20">
+      <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
+        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
+          <div>
+            <div className="mt-6">
+              <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
+              Situation: controversial and complex
+              </h2>
+              <p className="mt-4 text-lg text-gray-500">
+              Web3 & crypto has become a massive phenomenon. Big claims are made for its impact extending to the transformation of our economy and society. It is also exceptionally controversial and polarizing with significant disagreement. Finally, it’s not an easy topic to make sense of.
+              </p>
+              <div className="mt-6">
+                <a
+                  href="/about/"
+                  className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
+                >
+                  Read More
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-12 sm:mt-16 lg:mt-0">
+          <div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
+            <img
+              className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
+              src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646746321/Web3/undraw_nakamoto_-2-iv6_arq2lb.svg"
+              alt="Read More"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div className="mt-24">
+      <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
+        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
+          <div>
+            <div className="mt-6">
+              <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
+                The Problem: the stakes are high, but we’re struggling
+              </h2>
+              <p className="mt-4 text-lg text-gray-500">
+              The phenomenon has global implications and touches on multiple complex areas.  We require good, collective sensemaking, or else risk polarization. As a “runaway problem”, the investment of attention and money has grown exponentially. Should Web3 fail to deliver on its promises, the waste would be massive. In addition, with such fast-growing phenomena, things happen before we can notice, far less prevent them (eg climate change).
+              </p>
+              <div className="mt-6">
+                <a
+                  href="/about/"
+                  className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
+                >
+                  Read More
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
+          <div className="pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
+            <img
+              className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
+              src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646744477/Web3/undraw_connected_world_wuay_amttde.svg"
+              alt="Read More"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div className="mt-24">
+      <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
+        <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
+          <div>
+            <div className="mt-6">
+              <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-slate-100">
+              We need better sensemaking
+              </h2>
+              <p className="mt-4 text-lg text-gray-500">
+              We need to make good choices, in a constructive, intersectional and de-polarizing way. Do we advance Web3 or curb it? How should we allocate our resources? Good sensemaking begins by clarifying and agreeing on what questions to ask and the process of answering them.
+              </p>
+              <div className="mt-6">
+                <a
+                  href="/about"
+                  className="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-400"
+                >
+                  Read More
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-12 sm:mt-16 lg:mt-0">
+          <div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
+            <img
+              className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
+              src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646744695/Web3/undraw_team_collaboration_re_ow29_s8gvrf.svg"
+              alt="Read More"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  )
+}
diff --git a/site/pages/index.js b/site/pages/index.js
index 395556a..b16f1eb 100644
--- a/site/pages/index.js
+++ b/site/pages/index.js
@@ -1,6 +1,7 @@
 import { Hero } from 'components/Home/Hero'
 import { Latest } from 'components/Home/Latest'
 import Features from 'components/Home/Features'
+import Why from 'components/Home/Why'
 
 export default function Home(props) {
   return (
@@ -8,6 +9,7 @@ export default function Home(props) {
       <Hero />
       <Latest />
       <Features />
+      <Why />
     </>
   )
 }