diff --git a/web/e.cash/components/h2/index.js b/web/e.cash/components/h2/index.js
new file mode 100644
--- /dev/null
+++ b/web/e.cash/components/h2/index.js
@@ -0,0 +1,18 @@
+import GlitchText from '/components/glitch-text';
+import Image from 'next/image';
+import h2graphic from '/public/images/h2-graphic.svg';
+import { StyledH3, StyledH2, H2Image } from './styles';
+
+export default function H2({ subtext, text }) {
+    return (
+        <>
+            <StyledH3>{subtext}</StyledH3>
+            <StyledH2>
+                <H2Image>
+                    <Image src={h2graphic} alt="eCash" fill />
+                </H2Image>
+                <GlitchText text={text} />
+            </StyledH2>
+        </>
+    );
+}
diff --git a/web/e.cash/components/h2/styles.js b/web/e.cash/components/h2/styles.js
new file mode 100644
--- /dev/null
+++ b/web/e.cash/components/h2/styles.js
@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const StyledH3 = styled.h3`
+    margin: 0;
+    font-size: 20px;
+    font-weight: 400;
+    color: ${props => props.theme.colors.primaryLight};
+    line-height: 1em;
+    margin-bottom: 10px;
+    position: relative;
+`;
+
+export const StyledH2 = styled.h2`
+    margin: 0;
+    font-size: 55px;
+    font-weight: 700;
+    line-height: 1em;
+    position: relative;
+    margin-bottom: 70px;
+    display: inline-block;
+`;
+
+export const H2Image = styled.div`
+    width: 380px;
+    height: 60px;
+    position: absolute;
+    top: 40px;
+    left: 0;
+    ${props => props.theme.filters.grayscale};
+`;
diff --git a/web/e.cash/pages/index.js b/web/e.cash/pages/index.js
--- a/web/e.cash/pages/index.js
+++ b/web/e.cash/pages/index.js
@@ -4,8 +4,16 @@
 import VideoBackground from '/components/videobackground';
 import GlitchText from '/components/glitch-text';
 import { socials } from '/data/socials';
-import { Hero, ButtonCtn, HeroImage } from '/styles/pages/homepage';
+import {
+    Hero,
+    ButtonCtn,
+    HeroImage,
+    GradientSpacer,
+    StoryAndWhySection,
+    Overlay,
+} from '/styles/pages/homepage';
 import Button from '/components/button';
+import H2 from '/components/h2';
 import Hand from '/public/images/hand.png';
 
 export default function Home() {
@@ -54,6 +62,13 @@
                     </div>
                 </div>
             </Hero>
+            <GradientSpacer />
+            <StoryAndWhySection>
+                <Overlay />
+                <div className="container">
+                    <H2 subtext="The eCash Story" text="GET STARTED" />
+                </div>
+            </StoryAndWhySection>
         </Layout>
     );
 }
diff --git a/web/e.cash/public/images/h2-graphic.svg b/web/e.cash/public/images/h2-graphic.svg
new file mode 100755
--- /dev/null
+++ b/web/e.cash/public/images/h2-graphic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 941 146"><defs><style>.cls-1{isolation:isolate;}.cls-2,.cls-5{fill:#00abe7;mix-blend-mode:color-dodge;}.cls-3{fill:url(#linear-gradient);}.cls-4{fill:url(#linear-gradient-2);}.cls-5{opacity:0.7;}</style><linearGradient id="linear-gradient" x1="88.2" y1="88.76" x2="544" y2="88.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#273498" stop-opacity="0"/><stop offset="1" stop-color="#273498"/></linearGradient><linearGradient id="linear-gradient-2" x1="14.05" y1="13.53" x2="617.38" y2="13.53" xlink:href="#linear-gradient"/></defs><g class="cls-1"><g id="Layer_1" data-name="Layer 1"><rect class="cls-2" x="293.26" y="104.19" width="567.22" height="7.71" transform="translate(1153.74 216.09) rotate(180)"/><rect class="cls-2" x="373.78" y="84.44" width="567.22" height="7.71" transform="translate(1314.78 176.58) rotate(180)"/><rect class="cls-3" x="88.2" y="55.3" width="455.8" height="66.93"/><rect class="cls-4" x="14.05" y="2.06" width="603.33" height="22.94"/><rect class="cls-2" x="234.33" y="98.18" width="105.02" height="47.35"/><rect class="cls-2" x="-0.32" y="89.24" width="197.99" height="26.49"/><rect class="cls-2" x="642.36" y="2.06" width="15.37" height="22.94"/><rect class="cls-2" x="676.29" y="2.06" width="5" height="22.94"/><rect class="cls-2" x="689.48" y="2.06" width="5" height="22.94"/><rect class="cls-2" x="703.68" y="2.06" width="5" height="22.94"/><rect class="cls-5" x="719.49" y="0.1" width="103.17" height="26.76"/></g></g></svg>
diff --git a/web/e.cash/public/images/neon-city.png b/web/e.cash/public/images/neon-city.png
new file mode 100644
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

literal 0
Hc$@<O00001

diff --git a/web/e.cash/styles/global.css b/web/e.cash/styles/global.css
--- a/web/e.cash/styles/global.css
+++ b/web/e.cash/styles/global.css
@@ -60,7 +60,8 @@
 .container {
     width: 100%;
     margin: auto;
-    max-width: 1400px;
+    max-width: 1500px;
+    padding: 0 50px;
 }
 
 @media (max-width: 920px) {
diff --git a/web/e.cash/styles/pages/homepage.js b/web/e.cash/styles/pages/homepage.js
--- a/web/e.cash/styles/pages/homepage.js
+++ b/web/e.cash/styles/pages/homepage.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import Neoncity from '/public/images/neon-city.png';
 
 export const Hero = styled.div`
     width: 100%;
@@ -119,3 +120,34 @@
         }
     }
 `;
+
+export const StoryAndWhySection = styled.div`
+    background-image: url('/images/neon-city.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100%;
+    padding: 200px 0 400px;
+    position: relative;
+    ${props => props.theme.filters.grayscale};
+`;
+
+export const Overlay = styled.div`
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    background-image: linear-gradient(180deg, #000, rgba(39, 52, 152, 0.57));
+`;
+
+export const GradientSpacer = styled.div`
+    height: 100px;
+    width: 100%;
+    background-image: linear-gradient(
+        180deg,
+        ${props => props.theme.colors.darkBlue},
+        ${props => props.theme.colors.black}
+    );
+`;
diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js
--- a/web/e.cash/styles/theme.js
+++ b/web/e.cash/styles/theme.js
@@ -7,7 +7,8 @@
         contrast: '#ffffff',
         black: '#000',
         darkBlue: '#001137',
-        videocover: 'linear-gradient(9deg, #001137, rgba(0, 0, 0, 0.46))',
+        videocover:
+            'linear-gradient(9deg,#001137 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))',
     },
     filters: {
         grayscale: null,
@@ -26,9 +27,9 @@
         darkBackground: '#232324',
         contrast: '#ffffff',
         black: '#000',
-        darkBlue: '#232324',
+        darkBlue: '#181818',
         videocover:
-            'linear-gradient(9deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.46))',
+            'linear-gradient(9deg,#181818 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))',
     },
     filters: {
         grayscale: 'filter: grayscale(100%);',