diff --git a/Less/global.less b/Less/global.less
index 7bfc30e..7a44d3d 100644
--- a/Less/global.less
+++ b/Less/global.less
@@ -5,9 +5,12 @@
 
 html {
   font-size: 62.5%;
+  border: 1px solid grey;
+  background-color: #f1eee9;
 }
 
 html, body {
+  scroll-behavior: smooth;
 }
 
 h1, h2, h3, h4, h5 {
@@ -29,7 +32,7 @@ p {
 }
 
 .container {
-  max-width:100%;
+  max-width:1000px;
   width: 100%;
   margin: 0 auto;  
 }
diff --git a/Less/home-page.less b/Less/home-page.less
index e69de29..e1bd820 100644
--- a/Less/home-page.less
+++ b/Less/home-page.less
@@ -0,0 +1,346 @@
+.container-home {
+    .background-image(); 
+    @media (max-width:1000px) {
+        height: 660px;
+    }
+    @media @mobile {
+        background-color: #bdbdbd;
+        background-size: 100%;
+        background-position: center;
+        background-repeat: no-repeat;
+        height: 320px;
+    }
+    .intro {
+        color: #ffffff;
+        display: flex;
+        flex-flow: column;
+        font-style: bold;
+        padding-top: 10%;
+        padding-left: 2.5%;
+        width: 38%;
+        @media (max-width:1000px) {
+            width: 45%;
+        }
+        @media @mobile {
+            font-size: 3rem;
+            padding-top: 5%;
+            width: 50%;
+        }
+        p {
+            font-family: @pFont;
+            font-size: 3.6rem;
+            margin: 3%;
+            @media (max-width:1000px) {
+                font-size: 3.2rem;
+            }
+            @media @mobile {
+                margin-top: 5%;
+                font-size: 1.8rem;
+            }
+        }
+        a {
+            text-decoration: none;
+            button {
+                .custom-btn(#d9d9d9, 45%, black);
+                cursor: pointer;
+                @media @mobile {
+                    font-size: 1.5rem;
+                    height: 5vh;
+                    margin-top: 10%;
+                    width: 60%;
+                }
+            }
+        }
+            button:hover {
+                background-color: white;
+            }
+    }
+}
+.container-login-page {
+    .background-image(url(../images/man-woman-cooking.img.jpg));
+    padding-top: 4%;
+    @media (max-width: 1000px) {
+        height: 700px;
+        padding-top: 2%;
+    }
+    @media @mobile {
+        background-repeat: repeat;
+        height: 600px;
+    }
+    .login {
+        background-color: white;
+        margin-right: 3%;
+        margin-left: 3%;
+        opacity: .9;
+        padding-top: 5%;
+        @media (max-width: 1000px) {
+            margin-top: 3%;
+        }
+        @media @mobile {
+            margin: 5%;
+            margin-bottom: 7%;
+            padding-bottom: 5%;
+        }
+        h2 {
+            color: #E54236;
+            font-family: 'Fahkwang', sans-serif;
+            font-size: 4rem;
+            font-weight: bold;
+            text-align: center;
+            @media (max-width: 1000px) {
+                font-size: 3rem;
+            }
+            @media @mobile {
+                font-size: 2rem;
+            }
+        }
+    }
+    .sign-in {
+        display: flex;
+        margin-top: 15%;
+        padding-bottom: 14%;
+        @media (max-width: 1000px) {
+            margin-top: 5%;} 
+        @media @mobile {
+            .stack();
+            font-size: 2rem;
+            padding-bottom: 5%;
+        }
+        p {
+            font-size: 3.6rem;
+            margin: auto 8%;
+            width: 48%;
+            @media (max-width: 1000px) {
+                font-size: 3rem;
+            }
+            @media @mobile {
+                font-size: 2rem;
+                width: 80%;
+            }
+        }
+        .theButtons {
+            width: 50%;
+            a {
+                text-decoration: none;
+            }
+            @media (max-width: 1000px) {
+                margin-top: 5%;
+            }
+            @media @mobile {
+                .stack();
+                font-size: 2rem;
+                width: 100%;       
+            }
+        }
+
+            .btn {
+                .custom-btn();
+                align-content: center;
+                margin-top: 4%;   
+            }
+            .btn:hover {
+                background-color: white;
+                cursor: pointer;
+            }
+
+    }
+}
+
+//ABOUT PAGE CSS
+.about-container {
+    .background-image(url(../images/bowl-of-food.img.jpg));
+    background-color: #f1eee9;
+    @media (max-width:1000px) {
+        height: 665px;
+        padding-bottom: 70px;
+    }
+    @media @mobile {
+        .mobilepic();
+        background-image: none;
+        background-repeat: repeat-x;
+        height: 70%;    
+    }
+    .about-bochura {
+        .heading-paragraph();
+        align-items: center;
+        display: flex;
+        flex-flow: column wrap;
+        padding: 3%;
+        @media (max-width:1000px) {
+            .heading-paragraph(3.5rem);
+            padding: 3%;
+        }
+        @media @mobile {
+            .stack();
+            .heading-paragraph(2.6rem);
+            padding: 4%;
+        }
+        p {
+            font-family: @pFont;
+            font-size: 2.3rem;
+            @media (max-width:1000px) {
+                font-size: 2rem;
+            }
+            @media @mobile {
+            font-size: 2rem;
+            width: 100%;
+         }
+        }
+    }
+    .about-meaning {
+        .heading-paragraph();
+        width: 70%;
+        padding-left: 2%;
+        @media (max-width:1000px) {
+            .heading-paragraph(3.5rem);
+            padding: 3%;
+            padding-top: 0%;
+        }
+        @media @mobile {
+            .heading-paragraph(2.6rem);
+            .stack();
+            padding: 5%;
+            width: 100%;
+            text-align: center;
+        }
+        h1 {
+            text-align: center;
+            width: 70%;
+            @media @mobile {
+                width: 100%;
+            }
+        }
+        p {
+            font-family: @pFont;
+            font-size: 2.3rem;
+            @media (max-width:1000px) {
+                font-size: 2rem;
+            }
+            @media @mobile {
+                font-size: 2rem;
+                width: 100%;
+            }
+        }
+    }
+    .about-offer {
+        .heading-paragraph();
+        align-items: center;
+        align-content: flex-start;
+        display: flex;
+        flex-flow: column wrap;
+        padding-top: 5%;
+        padding-left: 2%;
+        width: 70%;
+        @media (max-width:1000px) {
+            .heading-paragraph(3.5rem);
+            padding: 5%;
+            padding-top: 0;
+            width: 70%;
+        }
+        @media @mobile {
+            .stack();
+            .heading-paragraph(2.6rem);
+            padding: 5%;
+            width: 100%;
+        }
+        p {
+            font-family: @pFont;
+            font-size: 2.3rem;
+            width: 70%;
+            @media (max-width:1000px) {
+                font-size: 2rem;
+            }
+            @media @mobile {
+                font-size: 2rem;
+                width: 100%; 
+            }
+        }  
+    }
+}
+.team {
+    .heading-paragraph();
+    background-color: #f1eee9;
+    display: flex;
+    flex-flow: column wrap;
+    text-align: center;
+    padding-top: 5%;
+    @media (max-width:1000px) {
+        margin-top: 10%;
+    }
+    @media @mobile {
+        .stack();   
+    }
+    .staff {
+        .heading-paragraph(2.8rem);
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        padding-top: 3%;
+        padding-bottom: 4%;
+
+        h2 {
+            font-size: 2rem;
+            padding-top: 2%;
+        }
+        .card{
+            width: 44%;
+            text-align: center;
+            display: flex;
+            flex-flow: column wrap;
+            align-content: center;
+            //Cards
+            margin: 2%;
+            align-items: center;
+            background-color: #D9D9D9;
+            border-radius: 30px;
+            border: 2px inset grey;
+            padding: 3%;
+            @media @mobile {
+                width: 80%;
+                align-items: center;
+                background-color: #D9D9D9;
+                border-radius: 30px;
+                border: 2px inset grey;
+                padding: 3%;
+            }
+            p {
+                //cards
+                width: 100%;
+                padding: 5%;
+                @media (max-width:1000px) {
+                    font-size: 2rem;
+                }
+                @media @mobile {
+                    width: 100%;
+                    padding: 5%;
+                }
+            }
+            .github {
+                .custom-btn(#d9d9d9, 220px, black);
+                margin-left: 15%;
+                margin-top: 5%;   
+                //Cards
+                justify-content: center;
+                margin: 0;
+                background-color: #ffffff;  
+                @media (max-width:1000px) {
+                    font-size: 2rem;
+                }  
+                @media @mobile {
+                    justify-content: center;
+                    margin: 0;
+                    background-color: #ffffff;             
+                }
+            }
+            .github:hover {
+                background-color: white;
+                cursor: pointer;
+                //Cards
+                background-color: #f2463a;
+                @media @mobile {
+                    background-color: #f2463a;
+                }
+            }
+        }
+    }   
+}
\ No newline at end of file
diff --git a/Less/mixins.less b/Less/mixins.less
index e69de29..500d14b 100644
--- a/Less/mixins.less
+++ b/Less/mixins.less
@@ -0,0 +1,52 @@
+
+.background-image(@url:url("../images/bohcura-background.img.jpg"); ) {
+    background-image: @url;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 120vh;
+}
+.custom-btn (@bgcolor:#d9d9d9, @width:300px, @font-color:black) {
+    display: block;
+    background-color: @bgcolor;
+    color: @font-color;
+    margin: 0 8px 18px;
+    width: @width;
+    height: 70px;
+    border-radius: 5px;
+    font-size: 1.8rem;
+    text-align: center;
+}
+
+
+.heading-paragraph (@font-size:3.6rem) {
+    h1 {
+        font-size: @font-size;
+        font-weight: bold;
+    }
+    p {
+        padding-top: 2%;
+        width: 70%;
+        text-align: center;
+        font-size: 2.6rem;
+    }
+}
+
+.stack(){ 
+    display: flex;
+    flex-flow: column wrap;
+    align-content: center;
+}
+
+.size () {
+    width: 50%;
+    padding: 2% 0%;   
+}
+
+.mobilepic () {
+        background-color: #bdbdbd;
+        background-size: 100%;
+        background-position: center;
+        background-repeat: no-repeat;
+        height: 320px;
+}
\ No newline at end of file
diff --git a/Less/navigation.less b/Less/navigation.less
index e69de29..6efcadc 100644
--- a/Less/navigation.less
+++ b/Less/navigation.less
@@ -0,0 +1,61 @@
+.navBar { 
+    background-color: #303030;
+    color: #f1f1f1;
+    display: flex;
+    font-size: 2.5rem;
+    justify-content: space-between;
+    padding: 1.5%;
+    @media (max-width:1000px) {
+        font-size: 2.2rem;    
+    }
+    @media @mobile {
+        .stack();
+        width: 100%;
+        text-align: center;
+        padding-bottom: 0;      
+        font-size: 1.8rem;
+    }
+    h1 {
+        color: #f1f1f1;
+        font-family: 'Hepta Slab', serif; 
+        font-size: 3.3rem;
+        font-weight: bold;
+        @media @mobile {
+            padding-top: 2%;
+            font-size: 2.5rem;
+        }
+    }
+    nav {
+        font-family: @navFont;
+        font-size: 2.2rem;
+        font-weight: bold;
+        padding-top: .5%;
+        text-align: right;
+        width: 60%;  
+        @media @mobile {
+            .size();
+            font-size: 1.8rem;
+            width: 100%;
+            justify-content: space-between;
+        }   
+        a {
+            color: #ffffff;
+            font-family: @navFont;
+            padding: 0 3%;
+            text-decoration: none;
+            @media (max-width:1000px) {
+                padding: 0 1.5%;
+            }
+            @media @mobile {
+                text-align: center;
+                line-height: 1.5;   
+                padding-top: 5%;    
+                padding: 0;
+                margin-right: 6%;
+            }
+        }
+        a:hover {
+            color: #e54236;
+        }
+    }   
+}
\ No newline at end of file
diff --git a/Less/variables.less b/Less/variables.less
index e69de29..cfd4d28 100644
--- a/Less/variables.less
+++ b/Less/variables.less
@@ -0,0 +1,13 @@
+//Font Variables
+@import url('https://fonts.googleapis.com/css?family=Fahkwang|Hepta+Slab&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Hepta+Slab&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Libre+Franklin&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
+
+//Fonts
+@font: 'Hepta Slab', serif;
+@pFont: 'Libre Franklin', sans-serif;
+@navFont: 'Lato', sans-serif;
+
+//Responsiveness
+@mobile:~"(max-width:500px)";
\ No newline at end of file
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..e6990a1
--- /dev/null
+++ b/about.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Bohcura</title>
+  <link href="css/index.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Fahkwang&display=swap" rel="stylesheet">
+</head>
+<body>
+    <section class="navBar">
+        <h1>bohcura.</h1>
+        <nav>
+            <div class="links">
+                <a href="./index.html">Home</a>
+                <a href="https://bohcura-app.netlify.com/chefs">Chefs</a>
+                <a href="https://bohcura-app.netlify.com/recipes">Recipes</a>
+                <a href="./about.html">About</a>
+                <a href="https://bohcura-app.netlify.com/dashboard">My Bohcura</a>
+            </div>
+        </nav>
+        </div>
+    </section>
+    <section class="about-container">
+        <div class="about-bochura">
+            <h1>What Is Bochura?</h1>
+            <p>Bohcura was born out of the need for chefs to have a place where they can showcase themselves and their culinary creations through a more professional, feature-rich, customer-centric platform that helps them connect more intimately and directly with customers and clients.</p>
+        </div>      
+        <div class="about-meaning">  
+            <h1>The Word "Bochura"</h1>
+            <p>The word “bohcura” is a mashup of two phrases: “boh”, which stands for “back of house”, the place where chefs make their magic, and “cura”, which means “with great care”, as in to curate.</p>
+        </div>
+        <div class="about-offer">
+            <h1>What We Offer</h1>
+            <p>Bohcura helps chefs create professional curations of culinary experiences to share with customers.</p>
+            <p>Culinary enthusiasts can browse professional chefs and recipes, as well as engage with and inquire about hiring chefs.</p>
+            <p>We’ve taken great care to build a place where chef and client can connect around their shared passion for culinary excellence.</p>
+        </div>
+        <!-- <div class="about-button-div">
+            <div class="the-team">
+                <h1>Meet The Team</h1>
+                <button class="about-button">Meet The Team</button>
+            </div>     
+        </div> -->
+    </section>    
+    <section class="team">
+        <h1>Meet Our Staff</h1>
+        <div class="staff"> 
+            <div class="card">
+                <h1>Chris Dalao</h1>
+                <h2>Team Lead</h2>
+                <p>Chris is the fearless team leader of this development unit. He is a member of the WEB20 cohort and a WEB23 team lead. He's making sure he can sharpen his skillset by helping out others following his footsteps throughout the Lambda process.</p>
+                <button class="github" onclick= "window.location.href = 'https://github.com/chrisdalao';">Git Hub</button>
+            </div>
+            <div class="card">
+                <h1>Michael Clark</h1>
+                <h2>UX</h2>
+                <p>Michael Clark has lead a rich and varied life in the worlds of design, development, marketing, and information technology. As a member of the UX6 cohort at Lambda School, he’s honing his skills and expanding his horizons to become even more proficient at making things people love.</p>
+                <button class="github" onclick= "window.location.href = 'https://github.com/clarkmakes';">Git Hub</button>
+            </div>
+            <div class="card">
+                <h1>Ryan Ziegenfus</h1>
+                <h2>Front End</h2>
+                <p>Ryan is part of the Web 22 cohort at Lambda School and is looking forward to learning more about Full-Stack web development. He designed the marketing page for RenTech and worked on the React team for Bohcura. He is currently in Florida, but is looking to relocate after Lambda School.</p>
+                <button class="github" onclick= "window.location.href = 'https://github.com/ryanZiegenfus';">Git Hub</button>
+            </div>
+            <div class="card">
+                <h1>Chris Hernandez</h1>
+                <h2>Front End</h2>
+                <p>Chris Hernandez is one of many members with the name of "Chris." He is a member of the WEB22 cohort and is looking forward to his next steps on his coding journey. He's the world record holder for learning javascript at 14 hours. </p>
+                <button class="github" onclick= "window.location.href = 'https://github.com/ChristopherHernandezW22';">Git Hub</button>
+            </div>
+            <div class="card">
+                <h1>Chris York</h1>
+                <h2>Front End Framework</h2>
+                <p>Chris is another Front End developer on this project. He is a member of the WEB21 cohort. He loves a nice long walk on the beach and skipping the occasional rock.</p>
+                <button class="github" onclick= "window.location.href = 'https://github.com/christopherayork';">Git Hub</button>
+            </div>    
+            <div class="card">
+                <h1>Tim McGowen</h1>
+                <h2>Front End Framework </h2>
+                <p>Tim is one of the many Front End developers on this project. He is known as the React Wizard. He loves a mean taco salad... just make sure to hold the salad. </p>
+                <button class="github" onclick= "window.location.href = 'https://github.com/mcgowent';">Git Hub</button>
+            </div> 
+            <div class="card">
+                <h1>Lisa Taylor</h1>
+                <h2>Front End Framework </h2>
+                <p>Lisa is another Front End developer who apart of the WEB21 cohort. When she's not working on the front end, you can catch her pup in the annual puppy bowl. Her pup came in 2nd last year, she believes this year they will take gold! </p>
+                <button class="github" onclick= "window.location.href = 'https://github.com/lisaMTayl';">Git Hub</button>
+            </div> 
+            <div class="card">
+                <h1>Benjamin Peck</h1>
+                <h2>Back End</h2>
+                <p>Benjamin Peck is known as "King of the Backend." He is the only backend developer of the group. If he's not hammering out code on the backend, you'll catch him at the nearest Starbucks chugging down some double espresso.</p>
+                <button class="github" onclick= "window.location.href = 'https://github.com/bwpeck';">Git Hub</button>
+            </div> 
+            <div class="card">
+                <h1>Anthony Hill</h1>
+                <h2>UI</h2>
+                <p>Anthony Hill is a former college football coach and fantasy football champion. He is a part of the WEB23 cohort and is extremely excited to follow his goal of becoming a Full-Stack web developer.</p>
+                <button class="github" onclick= "window.location.href = 'https://github.com/hillan1152';">Git Hub</button>
+            </div> 
+            <div class="card">
+                <h1>Abdetunji Shennaike</h1>
+                <h2>UI</h2>
+                <p>Abdi is a Seattle native and is a part of the WEB23 cohort. He is one of two UI developers on this project. He loves the Seattle Seahawks and the occasional thunderstorm.</p>
+                <button class="github" onclick= "window.location.href = 'https://github.com/abdirahmanfarah';">Git Hub</button>
+            </div> 
+        </div>
+    </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index 3da895b..57d4a11 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,3 +1,38 @@
+@font-face {
+  font-family: 'Fahkwang';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Fahkwang Regular'), local('Fahkwang-Regular'), url(https://fonts.gstatic.com/s/fahkwang/v3/Noax6Uj3zpmBOgbNpOqIuLk.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Hepta Slab';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/heptaslab/v1/ea8JadoyU_jkHdalebHvyWVNdYoIsHe5HvkV5wfcaZQ.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Hepta Slab';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/heptaslab/v1/ea8JadoyU_jkHdalebHvyWVNdYoIsHe5HvkV5wfcaZQ.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Libre Franklin'), local('LibreFranklin-Regular'), url(https://fonts.gstatic.com/s/librefranklin/v4/jizDREVItHgc8qDIbSTKq4XkRiUf2zI.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
+}
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
@@ -131,6 +166,12 @@ table {
 }
 html {
   font-size: 62.5%;
+  border: 1px solid grey;
+  background-color: #f1eee9;
+}
+html,
+body {
+  scroll-behavior: smooth;
 }
 h2 {
   font-size: 3.2rem;
@@ -143,7 +184,656 @@ p {
   line-height: 1.4;
 }
 .container {
-  max-width: 100%;
+  max-width: 1000px;
   width: 100%;
   margin: 0 auto;
 }
+.navBar {
+  background-color: #303030;
+  color: #f1f1f1;
+  display: flex;
+  font-size: 2.5rem;
+  justify-content: space-between;
+  padding: 1.5%;
+}
+@media (max-width: 1000px) {
+  .navBar {
+    font-size: 2.2rem;
+  }
+}
+@media (max-width:500px) {
+  .navBar {
+    display: flex;
+    flex-flow: column wrap;
+    align-content: center;
+    width: 100%;
+    text-align: center;
+    padding-bottom: 0;
+    font-size: 1.8rem;
+  }
+}
+.navBar h1 {
+  color: #f1f1f1;
+  font-family: 'Hepta Slab', serif;
+  font-size: 3.3rem;
+  font-weight: bold;
+}
+@media (max-width:500px) {
+  .navBar h1 {
+    padding-top: 2%;
+    font-size: 2.5rem;
+  }
+}
+.navBar nav {
+  font-family: 'Lato', sans-serif;
+  font-size: 2.2rem;
+  font-weight: bold;
+  padding-top: 0.5%;
+  text-align: right;
+  width: 60%;
+}
+@media (max-width:500px) {
+  .navBar nav {
+    width: 50%;
+    padding: 2% 0%;
+    font-size: 1.8rem;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+.navBar nav a {
+  color: #ffffff;
+  font-family: 'Lato', sans-serif;
+  padding: 0 3%;
+  text-decoration: none;
+}
+@media (max-width: 1000px) {
+  .navBar nav a {
+    padding: 0 1.5%;
+  }
+}
+@media (max-width:500px) {
+  .navBar nav a {
+    text-align: center;
+    line-height: 1.5;
+    padding-top: 5%;
+    padding: 0;
+    margin-right: 6%;
+  }
+}
+.navBar nav a:hover {
+  color: #e54236;
+}
+.container-home {
+  background-image: url("../images/bohcura-background.img.jpg");
+  background-size: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 120vh;
+}
+@media (max-width: 1000px) {
+  .container-home {
+    height: 660px;
+  }
+}
+@media (max-width:500px) {
+  .container-home {
+    background-color: #bdbdbd;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 320px;
+  }
+}
+.container-home .intro {
+  color: #ffffff;
+  display: flex;
+  flex-flow: column;
+  font-style: bold;
+  padding-top: 10%;
+  padding-left: 2.5%;
+  width: 38%;
+}
+@media (max-width: 1000px) {
+  .container-home .intro {
+    width: 45%;
+  }
+}
+@media (max-width:500px) {
+  .container-home .intro {
+    font-size: 3rem;
+    padding-top: 5%;
+    width: 50%;
+  }
+}
+.container-home .intro p {
+  font-family: 'Libre Franklin', sans-serif;
+  font-size: 3.6rem;
+  margin: 3%;
+}
+@media (max-width: 1000px) {
+  .container-home .intro p {
+    font-size: 3.2rem;
+  }
+}
+@media (max-width:500px) {
+  .container-home .intro p {
+    margin-top: 5%;
+    font-size: 1.8rem;
+  }
+}
+.container-home .intro a {
+  text-decoration: none;
+}
+.container-home .intro a button {
+  display: block;
+  background-color: #d9d9d9;
+  color: black;
+  margin: 0 8px 18px;
+  width: 45%;
+  height: 70px;
+  border-radius: 5px;
+  font-size: 1.8rem;
+  text-align: center;
+  cursor: pointer;
+}
+@media (max-width:500px) {
+  .container-home .intro a button {
+    font-size: 1.5rem;
+    height: 5vh;
+    margin-top: 10%;
+    width: 60%;
+  }
+}
+.container-home .intro button:hover {
+  background-color: white;
+}
+.container-login-page {
+  background-image: url(../images/man-woman-cooking.img.jpg);
+  background-size: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 120vh;
+  padding-top: 4%;
+}
+@media (max-width: 1000px) {
+  .container-login-page {
+    height: 700px;
+    padding-top: 2%;
+  }
+}
+@media (max-width:500px) {
+  .container-login-page {
+    background-repeat: repeat;
+    height: 600px;
+  }
+}
+.container-login-page .login {
+  background-color: white;
+  margin-right: 3%;
+  margin-left: 3%;
+  opacity: 0.9;
+  padding-top: 5%;
+}
+@media (max-width: 1000px) {
+  .container-login-page .login {
+    margin-top: 3%;
+  }
+}
+@media (max-width:500px) {
+  .container-login-page .login {
+    margin: 5%;
+    margin-bottom: 7%;
+    padding-bottom: 5%;
+  }
+}
+.container-login-page .login h2 {
+  color: #E54236;
+  font-family: 'Fahkwang', sans-serif;
+  font-size: 4rem;
+  font-weight: bold;
+  text-align: center;
+}
+@media (max-width: 1000px) {
+  .container-login-page .login h2 {
+    font-size: 3rem;
+  }
+}
+@media (max-width:500px) {
+  .container-login-page .login h2 {
+    font-size: 2rem;
+  }
+}
+.container-login-page .sign-in {
+  display: flex;
+  margin-top: 15%;
+  padding-bottom: 14%;
+}
+@media (max-width: 1000px) {
+  .container-login-page .sign-in {
+    margin-top: 5%;
+  }
+}
+@media (max-width:500px) {
+  .container-login-page .sign-in {
+    display: flex;
+    flex-flow: column wrap;
+    align-content: center;
+    font-size: 2rem;
+    padding-bottom: 5%;
+  }
+}
+.container-login-page .sign-in p {
+  font-size: 3.6rem;
+  margin: auto 8%;
+  width: 48%;
+}
+@media (max-width: 1000px) {
+  .container-login-page .sign-in p {
+    font-size: 3rem;
+  }
+}
+@media (max-width:500px) {
+  .container-login-page .sign-in p {
+    font-size: 2rem;
+    width: 80%;
+  }
+}
+.container-login-page .sign-in .theButtons {
+  width: 50%;
+}
+.container-login-page .sign-in .theButtons a {
+  text-decoration: none;
+}
+@media (max-width: 1000px) {
+  .container-login-page .sign-in .theButtons {
+    margin-top: 5%;
+  }
+}
+@media (max-width:500px) {
+  .container-login-page .sign-in .theButtons {
+    display: flex;
+    flex-flow: column wrap;
+    align-content: center;
+    font-size: 2rem;
+    width: 100%;
+  }
+}
+.container-login-page .sign-in .btn {
+  display: block;
+  background-color: #d9d9d9;
+  color: black;
+  margin: 0 8px 18px;
+  width: 300px;
+  height: 70px;
+  border-radius: 5px;
+  font-size: 1.8rem;
+  text-align: center;
+  align-content: center;
+  margin-top: 4%;
+}
+.container-login-page .sign-in .btn:hover {
+  background-color: white;
+  cursor: pointer;
+}
+.about-container {
+  background-image: url(../images/bowl-of-food.img.jpg);
+  background-size: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 120vh;
+  background-color: #f1eee9;
+}
+@media (max-width: 1000px) {
+  .about-container {
+    height: 665px;
+    padding-bottom: 70px;
+  }
+}
+@media (max-width:500px) {
+  .about-container {
+    background-color: #bdbdbd;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 320px;
+    background-image: none;
+    background-repeat: repeat-x;
+    height: 70%;
+  }
+}
+.about-container .about-bochura {
+  align-items: center;
+  display: flex;
+  flex-flow: column wrap;
+  padding: 3%;
+}
+.about-container .about-bochura h1 {
+  font-size: 3.6rem;
+  font-weight: bold;
+}
+.about-container .about-bochura p {
+  padding-top: 2%;
+  width: 70%;
+  text-align: center;
+  font-size: 2.6rem;
+}
+@media (max-width: 1000px) {
+  .about-container .about-bochura {
+    padding: 3%;
+  }
+  .about-container .about-bochura h1 {
+    font-size: 3.5rem;
+    font-weight: bold;
+  }
+  .about-container .about-bochura p {
+    padding-top: 2%;
+    width: 70%;
+    text-align: center;
+    font-size: 2.6rem;
+  }
+}
+@media (max-width:500px) {
+  .about-container .about-bochura {
+    display: flex;
+    flex-flow: column wrap;
+    align-content: center;
+    padding: 4%;
+  }
+  .about-container .about-bochura h1 {
+    font-size: 2.6rem;
+    font-weight: bold;
+  }
+  .about-container .about-bochura p {
+    padding-top: 2%;
+    width: 70%;
+    text-align: center;
+    font-size: 2.6rem;
+  }
+}
+.about-container .about-bochura p {
+  font-family: 'Libre Franklin', sans-serif;
+  font-size: 2.3rem;
+}
+@media (max-width: 1000px) {
+  .about-container .about-bochura p {
+    font-size: 2rem;
+  }
+}
+@media (max-width:500px) {
+  .about-container .about-bochura p {
+    font-size: 2rem;
+    width: 100%;
+  }
+}
+.about-container .about-meaning {
+  width: 70%;
+  padding-left: 2%;
+}
+.about-container .about-meaning h1 {
+  font-size: 3.6rem;
+  font-weight: bold;
+}
+.about-container .about-meaning p {
+  padding-top: 2%;
+  width: 70%;
+  text-align: center;
+  font-size: 2.6rem;
+}
+@media (max-width: 1000px) {
+  .about-container .about-meaning {
+    padding: 3%;
+    padding-top: 0%;
+  }
+  .about-container .about-meaning h1 {
+    font-size: 3.5rem;
+    font-weight: bold;
+  }
+  .about-container .about-meaning p {
+    padding-top: 2%;
+    width: 70%;
+    text-align: center;
+    font-size: 2.6rem;
+  }
+}
+@media (max-width:500px) {
+  .about-container .about-meaning {
+    display: flex;
+    flex-flow: column wrap;
+    align-content: center;
+    padding: 5%;
+    width: 100%;
+    text-align: center;
+  }
+  .about-container .about-meaning h1 {
+    font-size: 2.6rem;
+    font-weight: bold;
+  }
+  .about-container .about-meaning p {
+    padding-top: 2%;
+    width: 70%;
+    text-align: center;
+    font-size: 2.6rem;
+  }
+}
+.about-container .about-meaning h1 {
+  text-align: center;
+  width: 70%;
+}
+@media (max-width:500px) {
+  .about-container .about-meaning h1 {
+    width: 100%;
+  }
+}
+.about-container .about-meaning p {
+  font-family: 'Libre Franklin', sans-serif;
+  font-size: 2.3rem;
+}
+@media (max-width: 1000px) {
+  .about-container .about-meaning p {
+    font-size: 2rem;
+  }
+}
+@media (max-width:500px) {
+  .about-container .about-meaning p {
+    font-size: 2rem;
+    width: 100%;
+  }
+}
+.about-container .about-offer {
+  align-items: center;
+  align-content: flex-start;
+  display: flex;
+  flex-flow: column wrap;
+  padding-top: 5%;
+  padding-left: 2%;
+  width: 70%;
+}
+.about-container .about-offer h1 {
+  font-size: 3.6rem;
+  font-weight: bold;
+}
+.about-container .about-offer p {
+  padding-top: 2%;
+  width: 70%;
+  text-align: center;
+  font-size: 2.6rem;
+}
+@media (max-width: 1000px) {
+  .about-container .about-offer {
+    padding: 5%;
+    padding-top: 0;
+    width: 70%;
+  }
+  .about-container .about-offer h1 {
+    font-size: 3.5rem;
+    font-weight: bold;
+  }
+  .about-container .about-offer p {
+    padding-top: 2%;
+    width: 70%;
+    text-align: center;
+    font-size: 2.6rem;
+  }
+}
+@media (max-width:500px) {
+  .about-container .about-offer {
+    display: flex;
+    flex-flow: column wrap;
+    align-content: center;
+    padding: 5%;
+    width: 100%;
+  }
+  .about-container .about-offer h1 {
+    font-size: 2.6rem;
+    font-weight: bold;
+  }
+  .about-container .about-offer p {
+    padding-top: 2%;
+    width: 70%;
+    text-align: center;
+    font-size: 2.6rem;
+  }
+}
+.about-container .about-offer p {
+  font-family: 'Libre Franklin', sans-serif;
+  font-size: 2.3rem;
+  width: 70%;
+}
+@media (max-width: 1000px) {
+  .about-container .about-offer p {
+    font-size: 2rem;
+  }
+}
+@media (max-width:500px) {
+  .about-container .about-offer p {
+    font-size: 2rem;
+    width: 100%;
+  }
+}
+.team {
+  background-color: #f1eee9;
+  display: flex;
+  flex-flow: column wrap;
+  text-align: center;
+  padding-top: 5%;
+}
+.team h1 {
+  font-size: 3.6rem;
+  font-weight: bold;
+}
+.team p {
+  padding-top: 2%;
+  width: 70%;
+  text-align: center;
+  font-size: 2.6rem;
+}
+@media (max-width: 1000px) {
+  .team {
+    margin-top: 10%;
+  }
+}
+@media (max-width:500px) {
+  .team {
+    display: flex;
+    flex-flow: column wrap;
+    align-content: center;
+  }
+}
+.team .staff {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  padding-top: 3%;
+  padding-bottom: 4%;
+}
+.team .staff h1 {
+  font-size: 2.8rem;
+  font-weight: bold;
+}
+.team .staff p {
+  padding-top: 2%;
+  width: 70%;
+  text-align: center;
+  font-size: 2.6rem;
+}
+.team .staff h2 {
+  font-size: 2rem;
+  padding-top: 2%;
+}
+.team .staff .card {
+  width: 44%;
+  text-align: center;
+  display: flex;
+  flex-flow: column wrap;
+  align-content: center;
+  margin: 2%;
+  align-items: center;
+  background-color: #D9D9D9;
+  border-radius: 30px;
+  border: 2px inset grey;
+  padding: 3%;
+}
+@media (max-width:500px) {
+  .team .staff .card {
+    width: 80%;
+    align-items: center;
+    background-color: #D9D9D9;
+    border-radius: 30px;
+    border: 2px inset grey;
+    padding: 3%;
+  }
+}
+.team .staff .card p {
+  width: 100%;
+  padding: 5%;
+}
+@media (max-width: 1000px) {
+  .team .staff .card p {
+    font-size: 2rem;
+  }
+}
+@media (max-width:500px) {
+  .team .staff .card p {
+    width: 100%;
+    padding: 5%;
+  }
+}
+.team .staff .card .github {
+  display: block;
+  background-color: #d9d9d9;
+  color: black;
+  margin: 0 8px 18px;
+  width: 220px;
+  height: 70px;
+  border-radius: 5px;
+  font-size: 1.8rem;
+  text-align: center;
+  margin-left: 15%;
+  margin-top: 5%;
+  justify-content: center;
+  margin: 0;
+  background-color: #ffffff;
+}
+@media (max-width: 1000px) {
+  .team .staff .card .github {
+    font-size: 2rem;
+  }
+}
+@media (max-width:500px) {
+  .team .staff .card .github {
+    justify-content: center;
+    margin: 0;
+    background-color: #ffffff;
+  }
+}
+.team .staff .card .github:hover {
+  background-color: white;
+  cursor: pointer;
+  background-color: #f2463a;
+}
+@media (max-width:500px) {
+  .team .staff .card .github:hover {
+    background-color: #f2463a;
+  }
+}
diff --git a/images/bohcura-background.img.jpg b/images/bohcura-background.img.jpg
new file mode 100644
index 0000000..1da4ecb
Binary files /dev/null and b/images/bohcura-background.img.jpg differ
diff --git a/images/bowl-of-food.img.jpg b/images/bowl-of-food.img.jpg
new file mode 100644
index 0000000..d0407f3
Binary files /dev/null and b/images/bowl-of-food.img.jpg differ
diff --git a/images/man-woman-cooking.img.jpg b/images/man-woman-cooking.img.jpg
new file mode 100644
index 0000000..12ba755
Binary files /dev/null and b/images/man-woman-cooking.img.jpg differ
diff --git a/index.html b/index.html
index 4ae8346..3da8881 100644
--- a/index.html
+++ b/index.html
@@ -6,11 +6,40 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Bohcura</title>
   <link href="css/index.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Fahkwang&display=swap" rel="stylesheet">
 </head>
 <body>
-    <nav>
-      <h1>bohcura</h1>
-    </nav>
-    
+  <section class="navBar">
+    <h1>bohcura.</h1>
+      <nav>
+        <div class="links">
+          <a href="./index.html">Home</a>
+          <a href="https://bohcura-app.netlify.com/chefs">Chefs</a>
+          <a href="https://bohcura-app.netlify.com/recipes">Recipes</a>
+          <a href="./about.html">About</a>
+          <a href="https://bohcura-app.netlify.com/dashboard">My Bohcura</a>
+        </div>
+      </nav>
+    </div>
+  </section>
+  <div class="container-home">
+    <div class="intro">
+      <p class="chef-john">Chef John uses the best ingredients and instruments for everything he creates.</p>
+      <p class="use-bochura">That's why he uses Bohcura to connect with real food enthusiasts.</p>
+      <a href="#theLogin"><button class="button">Learn More</button></a>
+    </div>
+  </div>
+  <div class="container-login-page">
+    <div id='theLogin' class="login">
+      <h2>Bohcura: The personal brand platform for personal chefs.</h2>
+      <div class="sign-in">
+        <p>Hi, Chef. You're just a click away from creating a profile on the platform purpose-built to showcase you in the best professional light and help you connect with clients.</p>
+        <div class="theButtons">
+            <a href="https://bohcura-app.netlify.com/signup"><button class="btn">Sign Up</button></a>
+            <a href="https://bohcura-app.netlify.com/signup"><button class="btn">Sign-In</button></a>
+        </div>
+      </div>
+    </div>
+  </div>
 </body>
 </html>
\ No newline at end of file