diff --git a/web/e.cash/components/atoms/index.js b/web/e.cash/components/atoms/index.js
new file mode 100644
index 000000000..2005397ff
--- /dev/null
+++ b/web/e.cash/components/atoms/index.js
@@ -0,0 +1,3 @@
+import { Container, ThemeSwitch } from './styles';
+
+export { Container, ThemeSwitch };
diff --git a/web/e.cash/components/atoms/styles.js b/web/e.cash/components/atoms/styles.js
new file mode 100644
index 000000000..5eb9e0709
--- /dev/null
+++ b/web/e.cash/components/atoms/styles.js
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    width: 100%;
+    margin: auto;
+    max-width: 1500px;
+    padding: 0 50px;
+
+    ${props => props.theme.breakpoint.medium} {
+        padding: 0 20px;
+    }
+`;
+
+export const ThemeSwitch = styled.div`
+    position: fixed;
+    bottom: 30px;
+    width: 40px;
+    height: 40px;
+    z-index: 9999;
+    background: rgba(255, 255, 255, 0.1);
+    right: 30px;
+`;
diff --git a/web/e.cash/components/layout.js b/web/e.cash/components/layout/index.js
similarity index 98%
rename from web/e.cash/components/layout.js
rename to web/e.cash/components/layout/index.js
index 25b3be69c..0f8bdb2c1 100644
--- a/web/e.cash/components/layout.js
+++ b/web/e.cash/components/layout/index.js
@@ -1,40 +1,40 @@
 import Head from 'next/head';
-import Nav from './navbar';
+import Nav from '/components/navbar';
 
 const Layout = ({
     metaTitle = 'eCash | Wealth Redefined',
     metaDescription = 'Introducing eCash: the new battle-tested cryptocurrency forged from centuries of economic theory and over a decade of real-world crypto experience. eCash is the implementation of the tech-secured sound money envisioned by luminaries in monetary philosophy like Milton Friedman. eCash follows through on key promises such as the innovative Avalanche consensus layer while also introducing concepts never before seen in a Bitcoin project such as staking, fork-free network upgrades, and subchains. Look for the ticker symbol XEC on exchanges, wallets, or price charts, and take your first step towards true financial freedom.',
     children,
 }) => {
     return (
         <>
             <Head>
                 <meta
                     content="width=device-width, initial-scale=1"
                     name="viewport"
                 />
                 <link rel="icon" href="/favicon.png" />
                 <title>{metaTitle}</title>
                 <meta name="description" content={metaDescription} />
                 <meta name="og:title" content={metaTitle} />
                 <meta property="og:description" content={metaDescription} />
                 <meta name="twitter:title" content={metaTitle} />
                 <meta
                     property="twitter:description"
                     content={metaDescription}
                 />
                 <meta name="twitter:card" content="summary_large_image" />
                 <meta property="og:type" content="website" />
             </Head>
             <Nav
                 announcementbar={{
                     link: 'https://avalanche.cash/',
                     text: 'Avalanche Consensus is live!',
                 }}
             />
             <main>{children}</main>
         </>
     );
 };
 
 export default Layout;
diff --git a/web/e.cash/pages/_app.js b/web/e.cash/pages/_app.js
index 4014d8d97..af652e183 100644
--- a/web/e.cash/pages/_app.js
+++ b/web/e.cash/pages/_app.js
@@ -1,29 +1,21 @@
 import { useState } from 'react';
-import '../styles/global.css';
-import styled, { ThemeProvider } from 'styled-components';
-import { ecash, stealth } from '../styles/theme';
-
-const ThemeSwitch = styled.div`
-    position: fixed;
-    bottom: 30px;
-    width: 40px;
-    height: 40px;
-    z-index: 9999;
-    background: rgba(255, 255, 255, 0.1);
-    right: 30px;
-`;
+import { ThemeProvider } from 'styled-components';
+import { ecash, stealth } from '/styles/theme';
+import GlobalCSS from '/styles/global';
+import { ThemeSwitch } from '/components/atoms';
 
 export default function App({ Component, pageProps }) {
     const [theme, setTheme] = useState(ecash);
 
     const HandleThemeChange = () => {
         setTheme(theme === ecash ? stealth : ecash);
     };
 
     return (
         <ThemeProvider theme={theme}>
+            <GlobalCSS />
             <Component {...pageProps} />
             <ThemeSwitch onClick={HandleThemeChange} />
         </ThemeProvider>
     );
 }
diff --git a/web/e.cash/pages/index.js b/web/e.cash/pages/index.js
index 170c8309c..a35fb7a01 100644
--- a/web/e.cash/pages/index.js
+++ b/web/e.cash/pages/index.js
@@ -1,101 +1,102 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import Layout from '/components/layout';
 import VideoBackground from '/components/videobackground';
 import GlitchText from '/components/glitch-text';
+import { Container } from '/components/atoms';
 import { socials } from '/data/socials';
 import {
     Hero,
     ButtonCtn,
     HeroImage,
     GradientSpacer,
     StoryAndWhySection,
     Overlay,
     StorySection,
     YouTubeVideo,
 } 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() {
     return (
         <Layout>
             <VideoBackground videoname="purple-abstract" />
             <Hero>
-                <div className="container">
+                <Container>
                     <h1>
                         <span>WEALTH</span>
                         <GlitchText text="REDEFINED" />
                     </h1>
                     <p>
                         Simple. Instant. Secure.
                         <br />
                         Experience the revolutionary new money powered by
                         Avalanche.
                     </p>
                     <HeroImage>
                         <Image src={Hand} alt="eCash" fill />
                     </HeroImage>
                     <ButtonCtn>
                         <Button
                             text="Avalanche Consensus"
                             link="https://avalanche.cash/"
                             color="white"
                             glow
                         />
                     </ButtonCtn>
                     <div className="social-ctn">
                         {socials.map(social => (
                             <Link
                                 className="social-icon-ctn"
                                 href={social.link}
                                 target="_blank"
                                 rel="noreferrer"
                                 key={social.name}
                             >
                                 <Image
                                     src={`/images/${social.name}.svg`}
                                     alt={social.name}
                                     fill
                                 />
                             </Link>
                         ))}
                     </div>
-                </div>
+                </Container>
             </Hero>
             <GradientSpacer />
             <StoryAndWhySection>
                 <Overlay />
-                <div className="container">
+                <Container>
                     <StorySection>
                         <div>
                             <H2 subtext="The eCash Story" text="GET STARTED" />
                             <p>
                                 Introducing eCash: the new battle-tested
                                 cryptocurrency forged from centuries of economic
                                 theory and over a decade of real-world crypto
                                 experience. eCash is the implementation of the
                                 tech-secured sound money envisioned by
                                 luminaries in monetary philosophy like Milton
                                 Friedman.
                             </p>
                         </div>
                         <div>
                             <YouTubeVideo>
                                 <div>
                                     <iframe
                                         src="https://www.youtube.com/embed/2kR6Bx0Y2TE?rel=1&amp;controls=0&amp;autoplay=0&amp;mute=0&amp;start=0"
                                         allow="autoplay; encrypted-media"
                                         allowFullScreen
                                         title="eCash - Future Technology"
                                     ></iframe>
                                 </div>
                             </YouTubeVideo>
                         </div>
                     </StorySection>
-                </div>
+                </Container>
             </StoryAndWhySection>
         </Layout>
     );
 }
diff --git a/web/e.cash/styles/global.css b/web/e.cash/styles/global.css
deleted file mode 100644
index e3a12dd5b..000000000
--- a/web/e.cash/styles/global.css
+++ /dev/null
@@ -1,79 +0,0 @@
-@font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'),
-        url(../public/fonts/Poppins-Regular.ttf) format('truetype');
-    font-weight: normal;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'),
-        url(../public/fonts/Poppins-Medium.ttf) format('truetype');
-    font-weight: 500;
-}
-
-@font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'),
-        url(../public/fonts/Poppins-Bold.ttf) format('truetype');
-    font-weight: 700;
-}
-
-@font-face {
-    font-family: 'Montserrat';
-    src: local('Montserrat'),
-        url(../public/fonts/Montserrat-Regular.ttf) format('truetype');
-    font-weight: normal;
-}
-
-@font-face {
-    font-family: 'Montserrat';
-    src: local('Montserrat'),
-        url(../public/fonts/Montserrat-Bold.ttf) format('truetype');
-    font-weight: 700;
-}
-
-html,
-body {
-    padding: 0;
-    margin: 0;
-    font-family: 'Poppins', sans-serif;
-    line-height: 1.6;
-    font-size: 18px;
-    background-color: #001137;
-    color: #fff;
-    overflow-x: hidden;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-a {
-    text-decoration: none;
-    cursor: pointer;
-}
-
-a:hover {
-    text-decoration: none;
-}
-
-p {
-    margin: 0;
-    font-size: 18px;
-    line-height: 1.8em;
-    margin-bottom: 30px;
-}
-
-.container {
-    width: 100%;
-    margin: auto;
-    max-width: 1500px;
-    padding: 0 50px;
-}
-
-@media (max-width: 920px) {
-    .container {
-        padding: 0 20px;
-    }
-}
diff --git a/web/e.cash/styles/global.js b/web/e.cash/styles/global.js
new file mode 100644
index 000000000..ba804e4c4
--- /dev/null
+++ b/web/e.cash/styles/global.js
@@ -0,0 +1,88 @@
+import { createGlobalStyle } from 'styled-components';
+
+export default createGlobalStyle`
+    @font-face {
+        font-family: 'Poppins';
+        src: local('Poppins'),
+            url(../public/fonts/Poppins-Regular.ttf) format('truetype');
+        font-weight: normal;
+    }
+
+    @font-face {
+        font-family: 'Poppins';
+        src: local('Poppins'),
+            url(../public/fonts/Poppins-Medium.ttf) format('truetype');
+        font-weight: 500;
+    }
+
+    @font-face {
+        font-family: 'Poppins';
+        src: local('Poppins'),
+            url(../public/fonts/Poppins-Bold.ttf) format('truetype');
+        font-weight: 700;
+    }
+
+    @font-face {
+        font-family: 'Montserrat';
+        src: local('Montserrat'),
+            url(../public/fonts/Montserrat-Regular.ttf) format('truetype');
+        font-weight: normal;
+    }
+
+    @font-face {
+        font-family: 'Montserrat';
+        src: local('Montserrat'),
+            url(../public/fonts/Montserrat-Bold.ttf) format('truetype');
+        font-weight: 700;
+    }
+
+    html,
+    body {
+        padding: 0;
+        margin: 0;
+        font-family: 'Poppins', sans-serif;
+        line-height: 1.6;
+        font-size: 18px;
+        background-color: ${props => props.theme.colors.darkBlue};
+        color: ${props => props.theme.colors.contrast};
+        overflow-x: hidden;
+    }
+
+    ::-webkit-scrollbar {
+        width: 5px;
+    }
+    ::-webkit-scrollbar-track {
+        border-radius: 0px;
+        background-color: ${props => props.theme.colors.darkBlue};
+    }
+    ::-webkit-scrollbar-thumb {
+        border-radius: 0px;
+        background: ${props => props.theme.colors.primary};
+        height: 50px;
+    }
+    ::-webkit-scrollbar-corner {
+        display: none;
+        height: 0px;
+        width: 0px;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    a {
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    a:hover {
+        text-decoration: none;
+    }
+
+    p {
+        margin: 0;
+        font-size: 18px;
+        line-height: 1.8em;
+        margin-bottom: 30px;
+    }
+`;
