diff --git a/css/mobile-first.css b/css/mobile-first.css
index a7754d0..88a1d60 100644
--- a/css/mobile-first.css
+++ b/css/mobile-first.css
@@ -101,6 +101,7 @@
   header {
     background-color: #000;
     font-family: 'Open Sans', sans-serif;
+    padding: 10px;
   }
   header nav a {
     color: #ffffff;
@@ -112,8 +113,14 @@
     background-color: #ffffff;
     text-decoration: none;
   }
+  h1 {
+    color: white;
+  }
   #main-background {
-    background-image: url(img/u2_state0.png);
+    background-image: url("../img/u2_state0.jpg");
+    padding: 150px;
+    background-size: cover;
+    background-repeat: no-repeat;
   }
   #white {
     background-color: white;
@@ -121,12 +128,44 @@
   footer {
     background-color: black;
   }
+  ul {
+    display: flex;
+    justify-content: space-between;
+  } 
+  form {
+    background-color: white;
+    padding: 20px;
+  }
+  #free-trial {
+    border-radius: 5px 5px 0px 0px;
+    background-color: #e0e0df;
+    padding: 10px 5px;
+  }
+  #download {
+    background-color: transparent;
+    border: white solid 2px;
+    color: white;
+    padding:10px 5px;
+    margin: 0px;
+  }
+  h3 {
+    margin: 0px;
+  }
+  #logo {
+    margin: 5px;
+
+  }
+  .white {
+    color:white;
+  }
+  .grey {
+    color: gray;
+  }
 /*Desktop*/
 @media (min-width: 768px){
   div.centered {
     width:80%;
     margin: 0 auto;
-    border: 1px solid red;
     display: -webkit-box;
     display: flex;
     justify-content: space-between;
@@ -145,9 +184,18 @@
     display: block;
     padding: 5px 10px; 
   }
-  body {
-    background-color: red;
+  #section1 {
+    padding-right: 10%;
+
+  }
+  ul {
+    display: flex;
+    justify-content: space-around;
+  }
+  .half {
+    width: 50%;
   }
+
 }
   /* ==========================================================================
      Helper classes
diff --git a/css/week4-layout2.css b/css/week4-layout2.css
new file mode 100644
index 0000000..96d77db
--- /dev/null
+++ b/css/week4-layout2.css
@@ -0,0 +1,290 @@
+/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
+
+/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+   html {
+    color: #222;
+    font-size: 1em;
+    line-height: 1.4;
+  }
+  
+  /*
+   * Remove text-shadow in selection highlight:
+   * https://twitter.com/miketaylr/status/12228805301
+   *
+   * Vendor-prefixed and regular ::selection selectors cannot be combined:
+   * https://stackoverflow.com/a/16982510/7133471
+   *
+   * Customize the background color to match your design.
+   */
+  
+  ::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+  }
+  
+  ::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+  }
+  
+  /*
+   * A better looking default horizontal rule
+   */
+  
+  hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+  }
+  
+  /*
+   * Remove the gap between audio, canvas, iframes,
+   * images, videos and the bottom of their containers:
+   * https://github.com/h5bp/html5-boilerplate/issues/440
+   */
+  
+  audio,
+  canvas,
+  iframe,
+  img,
+  svg,
+  video {
+    vertical-align: middle;
+  }
+  
+  /*
+   * Remove default fieldset styles.
+   */
+  
+  fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+  
+  /*
+   * Allow only vertical resizing of textareas.
+   */
+  
+  textarea {
+    resize: vertical;
+  }
+  
+  /* ==========================================================================
+     Browser Upgrade Prompt
+     ========================================================================== */
+  
+  .browserupgrade {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+  }
+  
+  /* ==========================================================================
+     Author's custom styles
+     ========================================================================== */
+  img {
+      width: 50px;
+  } 
+  h1 {
+      margin: 0.67em 0 0 0;
+  }
+  div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      align-content: center;
+      width: 100vw;
+      height: 100vw;
+  }
+  button {
+      background-color: #34b7e3;
+      border-radius: 5px;
+      border: 1px;
+      color: white;
+      padding: 5px 10px;
+  }
+  p {
+      color: grey;
+  }
+  /* ==========================================================================
+     Helper classes
+     ========================================================================== */
+  
+  /*
+   * Hide visually and from screen readers
+   */
+  
+  .hidden {
+    display: none !important;
+  }
+  
+  /*
+  * Hide only visually, but have it available for screen readers:
+  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+  *
+  * 1. For long content, line feeds are not interpreted as spaces and small width
+  *    causes content to wrap 1 word per line:
+  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  */
+  
+  .sr-only {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    /* 1 */
+  }
+  
+  /*
+  * Extends the .sr-only class to allow the element
+  * to be focusable when navigated to via the keyboard:
+  * https://www.drupal.org/node/897638
+  */
+  
+  .sr-only.focusable:active,
+  .sr-only.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    white-space: inherit;
+    width: auto;
+  }
+  
+  /*
+  * Hide visually and from screen readers, but maintain layout
+  */
+  
+  .invisible {
+    visibility: hidden;
+  }
+  
+  /*
+  * Clearfix: contain floats
+  *
+  * For modern browsers
+  * 1. The space content is one way to avoid an Opera bug when the
+  *    `contenteditable` attribute is included anywhere else in the document.
+  *    Otherwise it causes space to appear at the top and bottom of elements
+  *    that receive the `clearfix` class.
+  * 2. The use of `table` rather than `block` is only necessary if using
+  *    `:before` to contain the top-margins of child elements.
+  */
+  
+  .clearfix:before,
+  .clearfix:after {
+    content: " ";
+    /* 1 */
+    display: table;
+    /* 2 */
+  }
+  
+  .clearfix:after {
+    clear: both;
+  }
+  
+  /* ==========================================================================
+     EXAMPLE Media Queries for Responsive Design.
+     These examples override the primary ('mobile first') styles.
+     Modify as content requires.
+     ========================================================================== */
+  
+  @media only screen and (min-width: 35em) {
+    /* Style adjustments for viewports that meet the condition */
+  }
+  
+  @media print,
+    (-webkit-min-device-pixel-ratio: 1.25),
+    (min-resolution: 1.25dppx),
+    (min-resolution: 120dpi) {
+    /* Style adjustments for high resolution devices */
+  }
+  
+  /* ==========================================================================
+     Print styles.
+     Inlined to avoid the additional HTTP request:
+     https://www.phpied.com/delay-loading-your-print-css/
+     ========================================================================== */
+  
+  @media print {
+    *,
+    *:before,
+    *:after {
+      background: transparent !important;
+      color: #000 !important;
+      /* Black prints faster */
+      box-shadow: none !important;
+      text-shadow: none !important;
+    }
+    a,
+    a:visited {
+      text-decoration: underline;
+    }
+    a[href]:after {
+      content: " (" attr(href) ")";
+    }
+    abbr[title]:after {
+      content: " (" attr(title) ")";
+    }
+    /*
+       * Don't show links that are fragment identifiers,
+       * or use the `javascript:` pseudo protocol
+       */
+    a[href^="#"]:after,
+    a[href^="javascript:"]:after {
+      content: "";
+    }
+    pre {
+      white-space: pre-wrap !important;
+    }
+    pre,
+    blockquote {
+      border: 1px solid #999;
+      page-break-inside: avoid;
+    }
+    /*
+       * Printing Tables:
+       * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+       */
+    thead {
+      display: table-header-group;
+    }
+    tr,
+    img {
+      page-break-inside: avoid;
+    }
+    p,
+    h2,
+    h3 {
+      orphans: 3;
+      widows: 3;
+    }
+    h2,
+    h3 {
+      page-break-after: avoid;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/img/smile-regular.svg b/img/smile-regular.svg
new file mode 100644
index 0000000..4ca93c8
--- /dev/null
+++ b/img/smile-regular.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" class="svg-inline--fa fa-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>
\ No newline at end of file
diff --git a/mobile-first.html b/mobile-first.html
index db38c4b..4e522c2 100644
--- a/mobile-first.html
+++ b/mobile-first.html
@@ -25,8 +25,8 @@
   <!-- Add your site or application content here -->
 <header>
     <div class="centered">
-        <logo>
-            <img href="img/logo_navbar_u70.png" alt="logo">
+        <logo id="logo">
+            <img src="img/logo_navbar_u70.png" alt="logo">
         </logo>
         <nav>
             <ul>
@@ -41,30 +41,31 @@
 </header>
     <div id="main-background"><!---background image-->
         <div class="centered">
-            <div>
-                <img href="img/logo_navbar_u701.png" alt="AXIT">
+            <div id="section1">
+                <img src="img/logo_navbar_u701.png" alt="AXIT">
                 <h1>MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h1>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente expedita quo similique, totam temporibus exercitationem! Iure corrupti est, quod expedita cumque harum quibusdam vitae, doloribus praesentium porro temporibus ut soluta!</p>
-                <button type="button">Download</button>
+                <p class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente expedita quo similique, totam temporibus exercitationem! Iure corrupti est, quod expedita cumque harum quibusdam vitae, doloribus praesentium porro temporibus ut soluta!</p>
+                <button type="button" id="download">Download</button>
             </div>
             <div>
-                <div>
-                    <h3>Try Your FREE Trial Today</h3>
+                <div id="form">
+                    <h3 id="free-trial">Try Your FREE Trial Today</h3>
                     <form action="/action_page.php" method="get">
                         Name: <input type="text" name="name"><br>
                         Email: <input type="text" name="email"><br>
                         Password: <input type="text" name="password"><br>
                     </form>
+                    <button type="submit" id="get-started">Get Started</button>
                 </div>
             </div>
         </div>
     </div> 
     <div class="centered" id="white"><!--white background-->
-        <div>
+        <div class="half">
            <h3>Social Media</h3>
-           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quis molestias accusantium quam quasi tempore perspiciatis, atque eveniet facere vel optio veritatis veniam ut, ex nesciunt blanditiis. Saepe, adipisci beatae.</p> 
+           <p class="grey">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quis molestias accusantium quam quasi tempore perspiciatis, atque eveniet facere vel optio veritatis veniam ut, ex nesciunt blanditiis. Saepe, adipisci beatae.</p> 
         </div>
-        <div>
+        <div class="half">
             <ul>
                <li><a href="">Facebook</a></li>
                <li><a href="">Twitter</a></li>
diff --git a/week4-layout2.html b/week4-layout2.html
new file mode 100644
index 0000000..097ab08
--- /dev/null
+++ b/week4-layout2.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+  <meta charset="utf-8">
+  <title></title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="manifest" href="site.webmanifest">
+  <link rel="apple-touch-icon" href="icon.png">
+  <!-- Place favicon.ico in the root directory -->
+
+  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="css/week4-layout2.css">
+
+  <meta name="theme-color" content="#fafafa">
+</head>
+
+<body>
+  <!--[if IE]>
+    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
+  <![endif]-->
+
+  <!-- Add your site or application content here -->
+<div>
+  <img src="img/smile-regular.svg">
+  <h1><strong>Welcome to the app!</strong></h1>
+  <p>Thanks for signing up. Let's take a look around.</p>
+  <button>Begin tour</button>
+</div>
+  <script src="js/vendor/modernizr-3.8.0.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
+  <script src="js/plugins.js"></script>
+  <script src="js/main.js"></script>
+
+  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
+  <script>
+    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
+  </script>
+  <script src="https://www.google-analytics.com/analytics.js" async></script>
+</body>
+
+</html>
\ No newline at end of file