diff --git a/src/Root/index.tsx b/src/Root/index.tsx
index 0a14156..f6f64c4 100644
--- a/src/Root/index.tsx
+++ b/src/Root/index.tsx
@@ -7,7 +7,7 @@ import Landing from "./Landing";
 
 function Root() {
     const isApp = (): boolean => {
-        return window.location.host.includes("app");
+        return window.location.host.includes("app.maiadao");
         //return true;
     };
 
diff --git a/src/assets/icons/zeus.png b/src/assets/icons/zeus.png
new file mode 100644
index 0000000..1663581
Binary files /dev/null and b/src/assets/icons/zeus.png differ
diff --git a/src/assets/illustration/bg-section3.png b/src/assets/illustration/bg-section3.png
new file mode 100644
index 0000000..ebafc0b
Binary files /dev/null and b/src/assets/illustration/bg-section3.png differ
diff --git a/src/assets/illustration/maiaBanner.jpeg b/src/assets/illustration/maiaBanner.jpeg
new file mode 100644
index 0000000..847aa44
Binary files /dev/null and b/src/assets/illustration/maiaBanner.jpeg differ
diff --git a/src/views/Landing/LandingLayout.tsx b/src/views/Landing/LandingLayout.tsx
new file mode 100644
index 0000000..07418f2
--- /dev/null
+++ b/src/views/Landing/LandingLayout.tsx
@@ -0,0 +1,16 @@
+import { useMediaQuery, makeStyles } from "@material-ui/core";
+import React from "react";
+
+const useStyles = makeStyles({
+    root: {
+        background: "linear-gradient(105deg, #B97DDD 0%, #1D3473 40%);",
+    },
+});
+
+const LandingLayout: React.FC = ({ children }) => {
+    const isDesktop = useMediaQuery("(min-width:772px)");
+    const styles = useStyles();
+    return <div className={isDesktop ? "" : styles.root}>{children}</div>;
+};
+
+export default LandingLayout;
diff --git a/src/views/Landing/components/Background/background.scss b/src/views/Landing/components/Background/background.scss
index 0622b3d..930abd2 100644
--- a/src/views/Landing/components/Background/background.scss
+++ b/src/views/Landing/components/Background/background.scss
@@ -8,6 +8,7 @@
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-color: transparentize($color: #4a483555, $amount: 0);
+    z-index: -1;
 
     .landing-background-wrap {
         margin-left: auto;
@@ -22,7 +23,7 @@
             font-weight: normal;
             font-size: 16px;
             line-height: 18px;
-            color: #FFFFFF;
+            color: #ffffff;
             white-space: pre-wrap;
             text-align: end;
         }
@@ -36,7 +37,6 @@
         z-index: 1;
 
         img {
-
             background-repeat: no-repeat;
             background-size: 100% 100%;
             width: 100%;
@@ -52,7 +52,6 @@
         z-index: 1;
 
         img {
-
             width: 100%;
             height: 100%;
         }
@@ -63,4 +62,4 @@
     .landing-background {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/Landing/components/Footer/Footer.tsx b/src/views/Landing/components/Footer/Footer.tsx
new file mode 100644
index 0000000..d3c7b01
--- /dev/null
+++ b/src/views/Landing/components/Footer/Footer.tsx
@@ -0,0 +1,156 @@
+import { Box, Grid, styled, Typography, Link } from "@material-ui/core";
+import React from "react";
+
+const Title = styled(Typography)({
+    color: "white",
+    fontFamily: "Montserrat Bold",
+    fontSize: 22,
+});
+
+const TextLink = styled(Link)({
+    color: "white",
+    cursor: "pointer",
+});
+
+const Text = styled(Typography)({
+    color: "white",
+    fontFamily: "Montserrat Medium",
+    fontSize: 18,
+});
+
+const FootNote = styled(Typography)({
+    color: "white",
+    fontFamily: "Montserrat Medium",
+    fontSize: 12,
+});
+
+const Footer = () => {
+    return (
+        <Box bgcolor="#1D3473" minHeight={400} pt={10}>
+            <Grid container direction="row" justifyContent="center">
+                <Grid item xs={6} md={4} lg={3}>
+                    <Title paragraph align="center">
+                        Community
+                    </Title>
+                    <Grid container direction="column">
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Discord</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Twitter</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Telegram</TextLink>
+                            </Text>
+                        </Grid>
+                    </Grid>
+                </Grid>
+                <Grid item xs={6} md={4} lg={3}>
+                    <Title paragraph align="center">
+                        Tools
+                    </Title>
+                    <Grid container direction="column">
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">DefiLlama</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">CoinGecko</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">CoinMarketCap</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Discord</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Bridge List</TextLink>
+                            </Text>
+                        </Grid>
+                    </Grid>
+                </Grid>
+
+                <Grid item xs={6} md={4} lg={3}>
+                    <Title paragraph align="center">
+                        Info
+                    </Title>
+                    <Grid container direction="column">
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Discord</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Docs</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">FAQ's</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Media Kit</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Legacy Website</TextLink>
+                            </Text>
+                        </Grid>
+                    </Grid>
+                </Grid>
+                <Grid item xs={6} md={4} lg={3}>
+                    <Title paragraph align="center">
+                        Participate
+                    </Title>
+                    <Grid container direction="column">
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Governance</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Propose Partnership</TextLink>
+                            </Text>
+                        </Grid>
+                        <Grid item>
+                            <Text align="center">
+                                <TextLink href="#">Join as Contributor</TextLink>
+                            </Text>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </Grid>
+
+            <Box mt={10} px={4} pb={10}>
+                <FootNote>
+                    Use of hermes.maiadao.io (the “Site”) and the Hermes Protocol (the “Protocol”) is strictly at your own risk. Before using the Protocol, users should fully
+                    understand and accept the risks involved, which include, but are not limited to, front-end errors, bugs, hacks, regulatory and tax uncertainty, and total loss
+                    of funds. Do not deploy funds you cannot afford to lose. No representations or warranties are made as to the safety of funds deployed, and Hermes Protocol or
+                    Maia DAO will not be liable or responsible for any losses incurred. By using the Site or the Protocol, you represent and warrant that your use does not violate
+                    any law, rule or regulation in your jurisdiction of residence. Nothing on the Site or any of Hermes Protocol's and Maia DAO's social media channels should be
+                    considered financial advice.
+                </FootNote>
+            </Box>
+        </Box>
+    );
+};
+
+export default Footer;
diff --git a/src/views/Landing/components/Footer/index.ts b/src/views/Landing/components/Footer/index.ts
new file mode 100644
index 0000000..a64cd38
--- /dev/null
+++ b/src/views/Landing/components/Footer/index.ts
@@ -0,0 +1,3 @@
+import Footer from "./Footer";
+
+export default Footer;
diff --git a/src/views/Landing/components/Header/Header.tsx b/src/views/Landing/components/Header/Header.tsx
new file mode 100644
index 0000000..484c4b0
--- /dev/null
+++ b/src/views/Landing/components/Header/Header.tsx
@@ -0,0 +1,27 @@
+import type { FC } from "react";
+import { Box, Typography } from "@material-ui/core";
+import maiaLogoWhite from "src/assets/icons/maialogowhite.png";
+import { styled } from "@material-ui/core/styles";
+
+const MenuLink = styled(Typography)({
+    color: "white",
+    fontFamily: "Montserrat Bold",
+    fontSize: "24px",
+    marginRight: "30px",
+    textTransform: "uppercase",
+    cursor: "pointer",
+});
+
+const Header: FC = () => {
+    return (
+        <Box display="flex" justifyContent="space-between" height={120} alignItems="center">
+            <img src={maiaLogoWhite} alt="Logo MAIA" width={110} height={110} />
+            <Box display="flex">
+                <MenuLink color="initial">Staking</MenuLink>
+                <MenuLink color="initial">Dashboard</MenuLink>
+            </Box>
+        </Box>
+    );
+};
+
+export default Header;
diff --git a/src/views/Landing/components/Header/header.scss b/src/views/Landing/components/Header/header.scss
deleted file mode 100644
index dcccb5f..0000000
--- a/src/views/Landing/components/Header/header.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-.landing-header {
-    padding: 25px 10%;
-    display: flex;
-    flex-direction: row;
-    z-index: 2;
-
-
-    img {
-
-        margin-left: -10px;
-        margin-bottom: 10px;
-        max-width: 10%;
-        height: auto;
-
-    }
-
-
-    .landing-header-nav-wrap {
-        margin-left: auto;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        cursor: default;
-
-        .landing-header-nav-text {
-            // background: #505048;
-            background-color: transparentize($color: #4a4835bf, $amount: 0.1);
-            font-family: Montserrat Medium;
-            font-size: 18px;
-            color: white;
-            // border: 0.05em solid;
-            border-radius: 0.31em;
-            width: 6.5em;
-            height: auto;
-
-            letter-spacing: 0.09em;
-            text-align: center;
-            line-height: 2em;
-            position: relative;
-            overflow: hidden;
-            z-index: 1;
-            transition: 0.5s;
-            margin: 1em;
-        }
-    }
-}
-
-.landing-header-poper {
-    margin-top: -10px;
-    background: #505048;
-    background-color: transparentize($color: #4a4835bf, $amount: 0);
-
-    backdrop-filter: blur(100px);
-    border-radius: 10px;
-    overflow: hidden;
-    z-index: 100;
-
-
-    .tooltip {
-        display: flex;
-        flex-direction: column;
-        // border: 0.1em solid rgb(197, 97, 228);
-        // border-radius: 0.5em;
-
-        .tooltip-item {
-            padding: 13px 20px;
-            align-items: center;
-            display: flex;
-            align-items: center;
-
-
-            &:hover {
-                background: rgba(255, 255, 255, 0.1);
-            }
-
-            p {
-
-                margin-left: 10px;
-                font-family: Montserrat Medium;
-                font-style: normal;
-                font-weight: 600;
-                font-size: 14px;
-                line-height: 20px;
-                color: white;
-            }
-        }
-    }
-}
-
-@media screen and (max-width: 465px) {
-    .landing-header {
-        padding: 25px 0px;
-    }
-}
\ No newline at end of file
diff --git a/src/views/Landing/components/Header/index.ts b/src/views/Landing/components/Header/index.ts
new file mode 100644
index 0000000..0d87fe1
--- /dev/null
+++ b/src/views/Landing/components/Header/index.ts
@@ -0,0 +1,3 @@
+import Header from "./Header";
+
+export default Header;
diff --git a/src/views/Landing/components/Header/index.tsx b/src/views/Landing/components/Header/index.tsx
deleted file mode 100644
index 542d73f..0000000
--- a/src/views/Landing/components/Header/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useState } from "react";
-import "./header.scss";
-import { SvgIcon, Link, Box, Popper, Fade } from "@material-ui/core";
-import { ReactComponent as GitHub } from "../../../../assets/icons/github.svg";
-import { ReactComponent as Twitter } from "../../../../assets/icons/twitter.svg";
-import { ReactComponent as Discord } from "../../../../assets/icons/discord.svg";
-import DexScreener from "../../../../assets/icons/dexscreen.png";
-import Medium from "../../../../assets/icons/medium.png";
-import Telegram from "../../../../assets/icons/telegram.png";
-
-function Header() {
-    const [anchorEl, setAnchorEl] = useState(null);
-
-    const handleClick = (event: any) => {
-        setAnchorEl(anchorEl ? null : event.currentTarget);
-    };
-
-    const open = Boolean(anchorEl);
-
-    return (
-        <div className="landing-header">
-            <div className="landing-header-nav-wrap">
-                <Box component="div" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
-                    <p className="landing-header-nav-text">Social</p>
-                    <Popper className="landing-header-poper" open={open} anchorEl={anchorEl} transition>
-                        {({ TransitionProps }) => (
-                            <Fade {...TransitionProps} timeout={200}>
-                                <div className="tooltip">
-                                    <Link className="tooltip-item" href="https://github.com/MaiaDao" target="_blank">
-                                        <SvgIcon color="primary" component={GitHub} />
-                                        <p>GitHub</p>
-                                    </Link>
-                                    <Link className="tooltip-item" href="https://twitter.com/MaiaDAOMetis" target="_blank">
-                                        <SvgIcon color="primary" component={Twitter} />
-                                        <p>Twitter</p>
-                                    </Link>
-                                    <Link className="tooltip-item" href="https://discord.gg/7hXXFRC8Wv" target="_blank">
-                                        <SvgIcon color="primary" component={Discord} />
-                                        <p>Discord</p>
-                                    </Link>
-                                    <Link className="tooltip-item" href="https://t.me/maiadao" target="_blank">
-                                        <img src={Telegram} alt="telegram logo" width="25" height="25" />
-                                        <p>Telegram</p>
-                                    </Link>
-                                    <Link className="tooltip-item" href="https://dexscreener.com/metis/0x82758824b93f2648bcc9387878cf443c9c0cb768" target="_blank">
-                                        <img src={DexScreener} width="25" alt="dexscreener logo" height="25" />
-                                        <p>Dex Screener</p>
-                                    </Link>
-                                    <Link className="tooltip-item" href="https://medium.com/@maiaDAO/" target="_blank">
-                                        <img src={Medium} width="25" height="25" alt="medium logo" />
-                                        <p>Medium</p>
-                                    </Link>
-                                </div>
-                            </Fade>
-                        )}
-                    </Popper>
-                </Box>
-            </div>
-        </div>
-    );
-}
-
-export default Header;
diff --git a/src/views/Landing/components/Main/index.tsx b/src/views/Landing/components/Main/index.tsx
deleted file mode 100644
index 4e2756b..0000000
--- a/src/views/Landing/components/Main/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import { Link } from "@material-ui/core";
-import "./main.scss";
-import MaiaIcon from "../../../../assets/icons/maialogowhite.png";
-
-function Main() {
-    return (
-        <div className="landing-main">
-            <div className="landing-main-title-wrap">
-                <Link href="https://app.maiadao.io/#/dashboard" target="_blank">
-                    <img alt="" src={MaiaIcon} />
-                </Link>
-                <p>Maia DAO</p>
-                <p></p>
-            </div>
-            <div className="landing-main-help-text-wrap">
-                <p>Join the Polis</p>
-                {/* <p>Community owned decentralized reserve currency of Metis</p> */}
-            </div>
-            <div className="landing-main-btns-wrap">
-                <nav>
-                    <ul>
-                        <li>
-                            <div>
-                                <Link href="https://app.maiadao.io/#/dashboard" target="_blank" rel="noreferrer">
-                                    <p>ENTER APP</p>
-                                </Link>
-                            </div>
-                        </li>
-                        <li>
-                            <div>
-                                <Link href="https://docs.maiadao.xyz/" target="_blank" rel="noreferrer">
-                                    <p>Documentation</p>
-                                </Link>
-                            </div>
-                        </li>
-                        <li className="hermes-btn">
-                            <div>
-                                <Link href="https://hermes.maiadao.io/" target="_blank" rel="noreferrer">
-                                    <p>Hermes</p>
-                                </Link>
-                            </div>
-                        </li>
-                    </ul>
-                </nav>
-                {/* <Link href="http://app.maiadao.xyz/#/" target="_blank" rel="noreferrer">
-                    <div className="landing-main-btn">
-                        <p>Enter App</p>
-                    </div>
-                </Link>
-                <Link href="/" target="_blank" rel="noreferrer">
-                    <div className="landing-main-btn">
-                        <p>Documentation</p>
-                    </div>
-                </Link> */}
-            </div>
-        </div>
-    );
-}
-
-export default Main;
diff --git a/src/views/Landing/components/Main/main.scss b/src/views/Landing/components/Main/main.scss
deleted file mode 100644
index e91f5b5..0000000
--- a/src/views/Landing/components/Main/main.scss
+++ /dev/null
@@ -1,247 +0,0 @@
-.landing-main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-
-    .landing-main-title-wrap {
-        text-align: center;
-        margin-top: 10px;
-        margin-bottom: 20px;
-
-        p {
-            font-family: Montserrat Medium;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 70px;
-            letter-spacing: 2px;
-            word-spacing: 5px;
-            color: white;
-            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-            padding-bottom: 20px;
-        }
-
-        img {
-            max-width: 240px;
-            height: auto;
-        }
-    }
-
-    .landing-main-help-text-wrap {
-        text-align: center;
-        margin-bottom: 20px;
-
-        p {
-            font-family: Montserrat Medium;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 22px;
-            letter-spacing: 1.4px;
-            word-spacing: 4px;
-            color: white;
-        }
-    }
-
-    .landing-main-btns-wrap {
-        display: flex;
-        flex-direction: row;
-        text-align: center;
-        vertical-align: middle;
-
-        nav ul {
-            list-style-type: none;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: row;
-        }
-
-        nav ul li {
-            background: #7874bd;
-            background-color: transparentize($color: #6f6bbb, $amount: 0);
-            --c: rgb(160, 145, 81);
-            color: var(--c);
-            font-size: 16px;
-            // border: 0.1em solid var(--c);
-            border-radius: 0.31em;
-            width: 12em;
-            height: auto;
-            text-transform: uppercase;
-            font-weight: normal;
-            font-family: sans-serif;
-            letter-spacing: 0.1em;
-            text-align: center;
-            line-height: 2.3em;
-            position: relative;
-            overflow: hidden;
-            z-index: 1;
-            transition: 0.5s;
-            margin: 1em;
-        }
-
-        nav ul li:hover {
-            color: #252521;
-            text-align: center;
-            position: relative;
-            vertical-align: relative
-        }
-
-        nav ul li p {
-            color: white;
-            font-family: Montserrat Medium;
-            letter-spacing: 1.4px;
-            word-spacing: 4px;
-            font-size: 15px;
-            text-align: center;
-            position: relative;
-            vertical-align: middle;
-            overflow: hidden;
-        }
-
-        nav ul li p:hover {
-
-            text-align: center;
-            position: relative;
-            vertical-align: relative
-        }
-
-        nav ul li span {
-            position: absolute;
-            width: 25%;
-            height: 100%;
-
-            transform: translateY(150%);
-            border-radius: 50%;
-            left: calc((var(--n) - 1) * 25%);
-            transition: 0.5s;
-            transition-delay: calc((var(--n) - 1) * 0.1s);
-            z-index: -1;
-        }
-
-
-        nav ul li:hover span {
-            transform: translateY(0) scale(2);
-        }
-
-        nav ul li span:nth-child(1) {
-            --n: 1;
-        }
-
-        nav ul li span:nth-child(2) {
-            --n: 2;
-        }
-
-        nav ul li span:nth-child(3) {
-            --n: 3;
-        }
-
-        nav ul li span:nth-child(4) {
-            --n: 4;
-        }
-
-        a {
-            text-decoration: none;
-        }
-
-        // .landing-main-btn {
-
-        //     margin: 0 15px;
-        //     padding: 14px 26px;
-        //     min-width: 200px;
-        //     background: #ffd900;
-        //     box-shadow: 0px 0px 10px rgba(44, 39, 109, 0.1);
-        //     border-radius: 10px;
-        //     cursor: pointer;
-        //     text-align: center;
-
-        //     p {
-        //         font-family: Montserrat Semibold;
-        //         font-style: normal;
-        //         font-weight: 600;
-        //         font-size: 18px;
-        //         line-height: 22px;
-        //         color: #FFFFFF;
-        //     }
-        // }
-
-        // .landing-main-btn:hover {
-        //     margin: 0 15px;
-        //     padding: 14px 26px;
-        //     min-width: 200px;
-        //     background: #ebd513;
-        //     box-shadow: 0px 0px 10px rgba(102, 109, 39, 0.1);
-        //     border-radius: 10px;
-        //     cursor: pointer;
-        //     text-align: center;
-
-        //     p {
-        //         font-family: Montserrat Semibold;
-        //         font-style: normal;
-        //         font-weight: 600;
-        //         font-size: 18px;
-        //         line-height: 22px;
-        //         color: #FFFFFF;
-        //     }
-        // }
-    }
-}
-
-@media screen and (max-width: 560px) {
-    .landing-main {
-        .landing-main-title-wrap {
-            p {
-                font-size: 40px;
-            }
-        }
-
-        .landing-main-help-text-wrap {
-            p {
-                font-size: 16px;
-            }
-        }
-    }
-}
-
-
-@media screen and (max-width: 465px) {
-    .landing-main {
-        .landing-main-btns-wrap {
-            flex-direction: column;
-
-            nav ul li {
-                width: 10em;
-            }
-
-            .landing-main-btn {
-                margin: 15px;
-
-
-
-            }
-        }
-    }
-}
-
-@media screen and (max-width: 720px) {
-    .landing-main {
-        .landing-main-btns-wrap {
-            flex-direction: column;
-
-            nav ul {
-                display: flex;
-                flex-direction: column;
-            }
-
-            nav ul li {
-                border-radius: 0.31em;
-                width: 12em;
-            }
-
-            .landing-main-btn {
-                margin: 15px;
-            }
-        }
-    }
-}
diff --git a/src/views/Landing/components/Sections/FifthSection/FifthSection.tsx b/src/views/Landing/components/Sections/FifthSection/FifthSection.tsx
new file mode 100644
index 0000000..fa66110
--- /dev/null
+++ b/src/views/Landing/components/Sections/FifthSection/FifthSection.tsx
@@ -0,0 +1,11 @@
+import type { FC } from "react";
+import "./fifth-section.scss";
+
+const FifthSection: FC = () => (
+    <div className="fifth-section">
+        <div className="title">+5000 Token Holders</div>
+        <div className="subtitle">Join the Community</div>
+    </div>
+);
+
+export default FifthSection;
diff --git a/src/views/Landing/components/Sections/FifthSection/fifth-section.scss b/src/views/Landing/components/Sections/FifthSection/fifth-section.scss
new file mode 100644
index 0000000..b389f62
--- /dev/null
+++ b/src/views/Landing/components/Sections/FifthSection/fifth-section.scss
@@ -0,0 +1,31 @@
+.fifth-section {
+    color: white;
+    background-color: #b97ddd;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .title {
+        font-size: 48px;
+        font-family: Montserrat Bold;
+    }
+
+    .subtitle {
+        font-family: Montserrat Medium;
+        font-size: 24px;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .fifth-section {
+        .title {
+            font-size: 96px;
+        }
+
+        .subtitle {
+            font-size: 48px;
+        }
+    }
+}
diff --git a/src/views/Landing/components/Sections/FifthSection/index.ts b/src/views/Landing/components/Sections/FifthSection/index.ts
new file mode 100644
index 0000000..41d13ea
--- /dev/null
+++ b/src/views/Landing/components/Sections/FifthSection/index.ts
@@ -0,0 +1,3 @@
+import FifthSection from "./FifthSection";
+
+export default FifthSection;
diff --git a/src/views/Landing/components/Sections/FirstSection/FirstSection.tsx b/src/views/Landing/components/Sections/FirstSection/FirstSection.tsx
new file mode 100644
index 0000000..4493ed0
--- /dev/null
+++ b/src/views/Landing/components/Sections/FirstSection/FirstSection.tsx
@@ -0,0 +1,69 @@
+import { Grid, Typography, Box, styled, Button, useMediaQuery } from "@material-ui/core";
+
+const HeroImageDesktop = styled("div")({
+    width: "500px",
+    height: "500px",
+    background: "grey",
+    borderRadius: "50%",
+});
+const HeroImageMobile = styled("div")({
+    width: "300px",
+    height: "300px",
+    background: "grey",
+    borderRadius: "50%",
+});
+
+const Title = styled(Typography)({
+    fontFamily: "Montserrat Medium",
+    fontSize: 48,
+    color: "white",
+});
+
+const Subtitle = styled(Typography)({
+    color: "white",
+    fontFamily: "Montserrat Medium",
+    fontSize: 24,
+    textAlign: "justify",
+});
+
+const ButtonStyled = styled(Button)({
+    borderRadius: 5,
+    background: "#B97DDD",
+    width: 289,
+    color: "white",
+    fontFamily: "Montserrat Bold",
+    fontSize: 20,
+    boxShadow: "0px 2px 2px rgba(0, 0, 0, 0.15)",
+});
+
+const FirstSection = () => {
+    const isDesktop = useMediaQuery("(min-width:960px)");
+    return (
+        <Box my={2}>
+            <Grid container direction="row-reverse" justifyContent="center" alignItems="center">
+                <Grid item xs={12} md={6}>
+                    <Box display="flex" justifyContent="center" alignItems="center">
+                        {isDesktop ? <HeroImageDesktop /> : <HeroImageMobile />}
+                    </Box>
+                </Grid>
+                <Grid item xs={12} md={6}>
+                    <Box display="flex" flexDirection="column" alignItems={isDesktop ? "flex-end" : "center"} justifyContent="center" marginRight={isDesktop ? 5 : 0}>
+                        <Box display="flex" width={isDesktop ? 350 : "auto"} paddingX={4}>
+                            <Title paragraph>Maia DAO</Title>
+                        </Box>
+                        <Box display="flex" width={isDesktop ? 350 : "auto"} paddingX={4}>
+                            <Subtitle>
+                                The yield powerhouse of <strong>Metis</strong> with its community rooted in this Ethereum L2.
+                            </Subtitle>
+                        </Box>
+                        <Box display="flex" width={isDesktop ? 350 : "auto"} paddingX={4} mt={2}>
+                            <ButtonStyled>ENTER APP</ButtonStyled>
+                        </Box>
+                    </Box>
+                </Grid>
+            </Grid>
+        </Box>
+    );
+};
+
+export default FirstSection;
diff --git a/src/views/Landing/components/Sections/FirstSection/index.ts b/src/views/Landing/components/Sections/FirstSection/index.ts
new file mode 100644
index 0000000..db09899
--- /dev/null
+++ b/src/views/Landing/components/Sections/FirstSection/index.ts
@@ -0,0 +1,3 @@
+import FirstSection from "./FirstSection";
+
+export default FirstSection;
diff --git a/src/views/Landing/components/Sections/FourthSection/FourthSection.tsx b/src/views/Landing/components/Sections/FourthSection/FourthSection.tsx
new file mode 100644
index 0000000..7531d8f
--- /dev/null
+++ b/src/views/Landing/components/Sections/FourthSection/FourthSection.tsx
@@ -0,0 +1,104 @@
+import { useMediaQuery, Box, styled, Grid } from "@material-ui/core";
+import "./fourth-section.scss";
+import maiaLogoWhite from "src/assets/icons/maialogowhite.png";
+import hermesLogoWhite from "src/assets/icons/maialogowhite.png";
+import zeusLogoWhite from "src/assets/icons/zeus.png";
+import metisLogoWhite from "src/assets/tokens/METIS.svg";
+
+const FourthBox = styled(Box)({
+    background: "#1D3473",
+    borderRadius: 30,
+    flexDirection: "column",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
+    padding: "20px 10px 20px 10px",
+
+    "& h2": {
+        color: "white",
+        fontFamily: "Montserrat Bold",
+        fontSize: 36,
+        lineHeight: 0,
+    },
+
+    "& p": {
+        color: "white",
+        fontFamily: "Montserrat Light",
+        fontSize: 14,
+        textAlign: "justify",
+        maxWidth: "60%",
+    },
+
+    "& a": {
+        marginTop: "1rem",
+        color: "#B97DDD",
+        cursor: "pointer",
+        fontFamily: "Montserrat Medium",
+        fontSize: 18,
+        maxWidth: "60%",
+        textAlign: "justify",
+        textDecoration: "none",
+
+        "&:hover": {
+            color: "white",
+            textDecoration: "underline",
+        },
+    },
+});
+
+const FourthSection = () => {
+    const isDesktop = useMediaQuery("(min-width:960px)");
+
+    return (
+        <div className={isDesktop ? "fourth-section" : "fourth-section-mobile"}>
+            <div className="inner-logo">
+                <img src={maiaLogoWhite} alt="Logo Maia" width={80} height={80} />
+            </div>
+            <Box mx={5}>
+                <Grid container spacing={5}>
+                    <Grid item xs={12} md={6}>
+                        <FourthBox>
+                            <img src={maiaLogoWhite} alt="Logo Maia" width={96} height={96} />
+                            <h2>MAIA</h2>
+                            <p>
+                                Maia is the yield powerhouse of Metis with its community rooted in this Ethereum L2. With a 100% fair launch via bonds Maia is a truly community
+                                owned token.
+                            </p>
+                            <a href="/staking">Learn More...</a>
+                        </FourthBox>
+                    </Grid>
+                    <Grid item xs={12} md={6}>
+                        <FourthBox>
+                            <img src={hermesLogoWhite} alt="Logo HERMES" width={96} height={96} />
+                            <h2>HERMES</h2>
+                            <p>
+                                Hermes Protocol allows low cost, near 0 slippage trades on uncorrelated or tightly correlated assets. The protocol incentivizes fees instead of
+                                liquidity.
+                            </p>
+                            <a href="/staking">Learn More...</a>
+                        </FourthBox>
+                    </Grid>
+                    <Grid item xs={12} md={6}>
+                        <FourthBox>
+                            <img src={zeusLogoWhite} alt="Logo ZEUS" width={96} height={96} />
+                            <h2>ZEUS</h2>
+                            <p>TBA</p>
+                            <a href="/staking">Learn More...</a>
+                        </FourthBox>
+                    </Grid>
+                    <Grid item xs={12} md={6}>
+                        <FourthBox>
+                            <img src={metisLogoWhite} alt="Logo METIS" width={96} height={96} />
+                            <h2>METIS</h2>
+                            <p>METIS IS SOLVING ETHEREUM’S SIX BIGGEST CHALLENGES. SIMPLICITY. SPEED. STORAGE. SCALABILITY. SECURITY. SAVINGS.</p>
+                            <a href="/staking">Learn More...</a>
+                        </FourthBox>
+                    </Grid>
+                </Grid>
+            </Box>
+        </div>
+    );
+};
+
+export default FourthSection;
diff --git a/src/views/Landing/components/Sections/FourthSection/fourth-section.scss b/src/views/Landing/components/Sections/FourthSection/fourth-section.scss
new file mode 100644
index 0000000..52c8c6e
--- /dev/null
+++ b/src/views/Landing/components/Sections/FourthSection/fourth-section.scss
@@ -0,0 +1,23 @@
+.fourth-section {
+    height: 1000px;
+    background: linear-gradient(180deg, #1d3473 25%, #b97ddd 50%, #1d3473 75%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .inner-logo {
+        position: absolute;
+    }
+}
+.fourth-section-mobile {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    height: auto;
+    background: linear-gradient(180deg, #1d3473 30%, #b97ddd 50%, #1d3473 70%);
+}
+
+@media screen and (max-width: 960px) {
+    .inner-logo {
+        display: none;
+    }
+}
diff --git a/src/views/Landing/components/Sections/FourthSection/index.ts b/src/views/Landing/components/Sections/FourthSection/index.ts
new file mode 100644
index 0000000..be2b9c8
--- /dev/null
+++ b/src/views/Landing/components/Sections/FourthSection/index.ts
@@ -0,0 +1,3 @@
+import FourthSection from "./FourthSection";
+
+export default FourthSection;
diff --git a/src/views/Landing/components/Sections/SecondSection/SecondSection.tsx b/src/views/Landing/components/Sections/SecondSection/SecondSection.tsx
new file mode 100644
index 0000000..4bc5848
--- /dev/null
+++ b/src/views/Landing/components/Sections/SecondSection/SecondSection.tsx
@@ -0,0 +1,119 @@
+import { Box, Grid, Typography, useMediaQuery } from "@material-ui/core";
+import { Skeleton } from "@material-ui/lab";
+import { styled } from "@material-ui/styles";
+import { useSelector } from "react-redux";
+import { IAppSlice } from "src/store/slices/app-slice";
+import { IReduxState } from "src/store/slices/state.interface";
+import { trim } from "src/helpers";
+
+const Container = styled(Box)({
+    background: "#1D3473",
+    display: "flex",
+    justifyContent: "center",
+});
+
+const StyledBox = styled(Box)({
+    borderRadius: 10,
+    background: "#4469BD",
+    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
+    textAlign: "center",
+    padding: "10px 0px",
+});
+
+const Hero = styled(Typography)({
+    fontFamily: "Montserrat Light",
+    fontSize: 18,
+    letterSpacing: "1.5rem",
+    color: "white",
+    textTransform: "uppercase",
+    textShadow: "1px 1px 2px rgba(0, 0, 0, 0.25)",
+    lineHeight: "4rem",
+});
+
+const Title = styled(Typography)({
+    fontFamily: "Montserrat Bold",
+    fontSize: 24,
+    color: "white",
+    padding: "5px 50px 5px 50px",
+});
+
+const Subtitle = styled(Typography)({
+    fontFamily: "Montserrat Medium",
+    fontSize: 22,
+    color: "white",
+    padding: "5px 50px 5px 50px",
+});
+
+const SecondSection = () => {
+    const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
+    const app = useSelector<IReduxState, IAppSlice>(state => state.app);
+    const trimmedStakingAPY = trim(app.stakingAPY * 100, 1);
+
+    const isDesktop = useMediaQuery("(min-width:960px)");
+
+    return (
+        <Container mt={10} py={10}>
+            <Box display="flex" flexDirection="column" px={2}>
+                <Grid container spacing={isDesktop ? 10 : 2}>
+                    <Grid item xs={12} md={6}>
+                        <StyledBox minWidth={isDesktop ? 400 : "inherit"}>
+                            <Title>MAIA Price</Title>
+                            <Subtitle>{isAppLoading ? <Skeleton width="100%" /> : `$${trim(app.marketPrice, 2)}`}</Subtitle>
+                        </StyledBox>
+                    </Grid>
+                    <Grid item xs={12} md={6}>
+                        <StyledBox minWidth={isDesktop ? 400 : "inherit"}>
+                            <Title>Treasury Balance</Title>
+                            <Subtitle>
+                                {isAppLoading ? (
+                                    <Skeleton width="100%" />
+                                ) : (
+                                    new Intl.NumberFormat("en-US", {
+                                        style: "currency",
+                                        currency: "USD",
+                                        maximumFractionDigits: 0,
+                                        minimumFractionDigits: 0,
+                                    }).format(app.stakingTVL)
+                                )}
+                            </Subtitle>
+                        </StyledBox>
+                    </Grid>
+                </Grid>
+                <Grid container>
+                    <Grid item xs={12}>
+                        <Box sx={{ textAlign: "center" }}>
+                            <Hero>Community Owned</Hero>
+                        </Box>
+                    </Grid>
+                </Grid>
+                <Grid container spacing={isDesktop ? 10 : 2}>
+                    <Grid item xs={12} md={6}>
+                        <StyledBox minWidth={isDesktop ? 400 : "inherit"}>
+                            <Title>Market Cap</Title>
+                            <Subtitle>
+                                {isAppLoading ? (
+                                    <Skeleton width="100%" />
+                                ) : (
+                                    new Intl.NumberFormat("en-US", {
+                                        style: "currency",
+                                        currency: "USD",
+                                        maximumFractionDigits: 0,
+                                        minimumFractionDigits: 0,
+                                    }).format(app.marketCap)
+                                )}
+                            </Subtitle>
+                        </StyledBox>
+                    </Grid>
+                    <Grid item xs={12} md={6}>
+                        <StyledBox minWidth={isDesktop ? 400 : "inherit"}>
+                            <Title>Current APY</Title>
+                            <Subtitle>{isAppLoading ? <Skeleton width="100%" /> : `${new Intl.NumberFormat("en-US").format(Number(trimmedStakingAPY))}%`}</Subtitle>
+                        </StyledBox>
+                    </Grid>
+                </Grid>
+            </Box>
+        </Container>
+    );
+};
+
+export default SecondSection;
diff --git a/src/views/Landing/components/Sections/SecondSection/index.ts b/src/views/Landing/components/Sections/SecondSection/index.ts
new file mode 100644
index 0000000..940aa14
--- /dev/null
+++ b/src/views/Landing/components/Sections/SecondSection/index.ts
@@ -0,0 +1,3 @@
+import SecondSection from "./SecondSection";
+
+export default SecondSection;
diff --git a/src/views/Landing/components/Sections/SixthSection/SixthSection.tsx b/src/views/Landing/components/Sections/SixthSection/SixthSection.tsx
new file mode 100644
index 0000000..3bf065b
--- /dev/null
+++ b/src/views/Landing/components/Sections/SixthSection/SixthSection.tsx
@@ -0,0 +1,57 @@
+import { Box, Grid, styled, Typography, useMediaQuery } from "@material-ui/core";
+import React from "react";
+import zeusImage from "src/assets/icons/zeus.png";
+
+const Title = styled(Typography)({
+    color: "#1D3473",
+    fontFamily: "Montserrat Medium",
+    fontSize: 40,
+});
+
+const Text = styled(Typography)({
+    color: "#1D3473",
+    background: "white",
+    fontFamily: "Montserrat Medium",
+});
+
+const InvertedText = styled(Typography)({
+    background: "#1D3473",
+    color: "white",
+    fontFamily: "Montserrat Medium",
+});
+
+const SixthSection = () => {
+    const isDesktop = useMediaQuery("(min-width:960px)");
+    return (
+        <Box bgcolor="#31458936" height={500} pt={5}>
+            <Grid container>
+                <Grid item xs={12} md={6}>
+                    <Box justifyContent="center" display="flex" mt={2}>
+                        <Title>Never was so easy!</Title>
+                    </Box>
+                    {isDesktop && (
+                        <Box mt={-10}>
+                            <img src={zeusImage} alt="Zeus Logo" width="auto" height="auto" />
+                        </Box>
+                    )}
+                </Grid>
+                <Grid item xs={12} md={6}>
+                    <Box mx={2} my={4} p={2} bgcolor="white" height={50} borderRadius={10}>
+                        <Text>1. Get ETH</Text>
+                    </Box>
+                    <Box mx={2} my={4} p={2} bgcolor="white" height={50} borderRadius={10}>
+                        <Text>2. Bridge to Metis L2</Text>
+                    </Box>
+                    <Box mx={2} my={4} p={2} bgcolor="white" height={50} borderRadius={10}>
+                        <Text>3. Swap for MAIA</Text>
+                    </Box>
+                    <Box mx={2} my={4} p={2} bgcolor="#1D3473" height={50} borderRadius={10}>
+                        <InvertedText>4. Start Staking!</InvertedText>
+                    </Box>
+                </Grid>
+            </Grid>
+        </Box>
+    );
+};
+
+export default SixthSection;
diff --git a/src/views/Landing/components/Sections/SixthSection/index.ts b/src/views/Landing/components/Sections/SixthSection/index.ts
new file mode 100644
index 0000000..986639f
--- /dev/null
+++ b/src/views/Landing/components/Sections/SixthSection/index.ts
@@ -0,0 +1,3 @@
+import SixthSection from "./SixthSection";
+
+export default SixthSection;
diff --git a/src/views/Landing/components/Sections/ThirdSection/ThirdSection.tsx b/src/views/Landing/components/Sections/ThirdSection/ThirdSection.tsx
new file mode 100644
index 0000000..f2e7616
--- /dev/null
+++ b/src/views/Landing/components/Sections/ThirdSection/ThirdSection.tsx
@@ -0,0 +1,92 @@
+import { Box, Button, Grid, styled, Typography, useMediaQuery } from "@material-ui/core";
+import "./third-section.scss";
+import bg from "src/assets/illustration/bg-section3.png";
+
+const LeftImage = styled("img")({
+    objectFit: "none",
+    objectPosition: "0px 80%",
+});
+
+const RightImage = styled("img")({
+    objectFit: "none",
+    objectPosition: "100% 10%",
+});
+
+const Right = styled(Box)({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    background: "#B97DDD",
+});
+
+const Title = styled(Typography)({
+    fontFamily: "Montserrat Bold",
+    fontSize: 60,
+    lineHeight: 1,
+    color: "white",
+    padding: "10px 50px 10px 50px",
+});
+
+const ButtonStyled = styled(Button)({
+    borderRadius: 5,
+    background: "#1D3473",
+    width: 350,
+    color: "white",
+    fontFamily: "Montserrat Bold",
+    fontSize: 20,
+    boxShadow: "0px 2px 2px rgba(0, 0, 0, 0.15)",
+});
+
+const ThirdSection = () => {
+    const isDesktop = useMediaQuery("(min-width:960px)");
+
+    return (
+        <>
+            <Box height={isDesktop ? 720 : 360}>
+                <Grid container>
+                    {isDesktop && (
+                        <Grid item xs={12} md={6}>
+                            <Box width="100%" height="100%">
+                                <LeftImage src={bg} alt="bg1" height="100%" width="100%" />
+                            </Box>
+                        </Grid>
+                    )}
+                    <Grid item xs={12} md={6}>
+                        {/*
+                        // @ts-ignore-next-line */}
+                        <Right height={isDesktop ? 720 : 360} withImage={isDesktop}>
+                            <Title>100%</Title>
+                            <Title>Community</Title>
+                            <Box display="flex" width={350} mt={2}>
+                                <ButtonStyled>ENTER APP</ButtonStyled>
+                            </Box>
+                        </Right>
+                    </Grid>
+                </Grid>
+            </Box>
+            <Box height={isDesktop ? 720 : 360}>
+                <Grid container direction="row-reverse">
+                    {isDesktop && (
+                        <Grid item xs={12} md={6}>
+                            <Box width="100%" height={720}>
+                                <RightImage src={bg} alt="bg1" height="100%" width="100%" />
+                            </Box>
+                        </Grid>
+                    )}
+                    <Grid item xs={12} md={6}>
+                        <Right height={isDesktop ? 720 : 360}>
+                            <Title>100%</Title>
+                            <Title>Community</Title>
+                            <Box display="flex" width={350} mt={2}>
+                                <ButtonStyled>ENTER APP</ButtonStyled>
+                            </Box>
+                        </Right>
+                    </Grid>
+                </Grid>
+            </Box>
+        </>
+    );
+};
+
+export default ThirdSection;
diff --git a/src/views/Landing/components/Sections/ThirdSection/index.ts b/src/views/Landing/components/Sections/ThirdSection/index.ts
new file mode 100644
index 0000000..f6b3a8a
--- /dev/null
+++ b/src/views/Landing/components/Sections/ThirdSection/index.ts
@@ -0,0 +1,3 @@
+import ThirdSection from "./ThirdSection";
+
+export default ThirdSection;
diff --git a/src/views/Landing/components/Sections/ThirdSection/third-section.scss b/src/views/Landing/components/Sections/ThirdSection/third-section.scss
new file mode 100644
index 0000000..dc566b4
--- /dev/null
+++ b/src/views/Landing/components/Sections/ThirdSection/third-section.scss
@@ -0,0 +1,8 @@
+.right {
+    height: 720px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background: linear-gradient(90deg, #ff0000, -78%, #000, 93%);
+}
diff --git a/src/views/Landing/components/Sections/components/StyledBox.tsx b/src/views/Landing/components/Sections/components/StyledBox.tsx
new file mode 100644
index 0000000..e77fc34
--- /dev/null
+++ b/src/views/Landing/components/Sections/components/StyledBox.tsx
@@ -0,0 +1,10 @@
+import { Box, styled } from "@material-ui/core";
+
+const StyledBox = styled(Box)({
+    borderRadius: 10,
+    background: "#4469BD",
+    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
+    textAlign: "center",
+});
+
+export default StyledBox;
diff --git a/src/views/Landing/index.tsx b/src/views/Landing/index.tsx
index 1e4023d..11f816a 100644
--- a/src/views/Landing/index.tsx
+++ b/src/views/Landing/index.tsx
@@ -1,16 +1,27 @@
-import React from "react";
-import "./landing.scss";
-import Header from "./components/Header";
-import Main from "./components/Main";
 import Background from "./components/Background";
+import Footer from "./components/Footer";
+import Header from "./components/Header";
+import FifthSection from "./components/Sections/FifthSection";
+import FirstSection from "./components/Sections/FirstSection";
+import FourthSection from "./components/Sections/FourthSection";
+import SecondSection from "./components/Sections/SecondSection";
+import SixthSection from "./components/Sections/SixthSection";
+import ThirdSection from "./components/Sections/ThirdSection";
+import LandingLayout from "./LandingLayout";
 
 function Landing() {
     return (
-        <div className="landing-root">
+        <LandingLayout>
             <Header />
-            <Main />
             <Background />
-        </div>
+            <FirstSection />
+            <SecondSection />
+            <ThirdSection />
+            <FourthSection />
+            <FifthSection />
+            <SixthSection />
+            <Footer />
+        </LandingLayout>
     );
 }