diff --git a/index.html b/index.html
index 8300a1607..53ed243bf 100644
--- a/index.html
+++ b/index.html
@@ -6,28 +6,37 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="https://use.fontawesome.com/1fb0eb3889.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Heebo:400,700" rel="stylesheet">
+  <!-- <link rel="stylesheet" type="text/css" href="./stylesheets/reset.css"> -->
+  <link rel="stylesheet" type="text/css" href="./stylesheets/style.css">
   <title>Where work happens | Slack</title>
 </head>
 
 <body>
-  <nav>
-    <img src="./images/slack-logo.png" alt="slack_logo">
-    <ul>
-      <li>Why Slack?</li>
-      <li>Pricing</li>
-      <li>About Us</li>
-      <li>Your Workspaces</li>
-    </ul>
+  <nav class="nav-parent">
+    <div class="nav-bar">
+      <div class="logo">
+        <img id="nav-logo" src="./images/slack-logo.png" alt="slack_logo">
+      </div>
+      <div>
+        <ul>
+          <li>Why Slack?</li>
+          <li>Pricing</li>
+          <li>About Us</li>
+          <li>Your Workspaces</li>
+        </ul>
+      </div>
+    </div>
   </nav>
-  <header>
+  <header class="header container">
     <img src="./images/home_talking.png" alt="home_work_happening">
     <h1>Where Work Happens</h1>
     <p>When your team needs to kick off a project, hire a new employee, deploy some code, review a sales contract, finalize next year's budget, measure an A/B test, plan your next office opening, and more, Slack has you covered.</p>
     <button type="button" name="button">GET STARTED</button>
-    <p>Already using Slack? <a href="#">Sign in</a></p>
+    <p id="last-p">Already using Slack? <a href="#">Sign in</a></p>
   </header>
   <main>
-    <div>
+    <div class="clients">
       <h2>You´re in good company</h2>
       <p>Millions of people around the world have already made Slack the place where their work happens.</p>
       <button>DISCOVER WHY</button>
@@ -38,47 +47,52 @@ <h2>You´re in good company</h2>
       <img src="./images/oracle-logo.png" alt="">
       <img src="./images/ticketmaster-logo.png" alt="">
     </div>
-    <div>
-      <p>Try it for free</p>
+    <div class="try-free">
+      <h3>Try it for free</h3>
       <p>Already using Slack? <a href="">Sign in</a></p>
       <button type="button" name="button">GET STARTED</button>
     </div>
   </main>
+  
   <footer>
-    <div>
-      <img src="./images/iso-slack.png" alt="">
-      <ul>
-        <li>COMPANY</li>
-        <li>About Us</li>
-        <li>Careers</li>
-        <li>Blog</li>
-        <li>Press</li>
-        <li>Brand Guidelines</li>
-      </ul>
-      <ul>
-        <li>PRODUCT</li>
-        <li>Why Slack?</li>
-        <li>Enterprise</li>
-        <li>Customer Stories</li>
-        <li>Pricing</li>
-        <li>Security</li>
-      </ul>
-      <ul>
-        <li>RESOURCES</li>
-        <li>Download</li>
-        <li>Help Center</li>
-        <li>Guides</li>
-        <li>Events</li>
-        <li>App Directory</li>
-        <li>API</li>
-      </ul>
-      <ul>
-        <li>EXTRAS</li>
-        <li>Podcast</li>
-        <li>Slack Shop</li>
-        <li>Slack at Work</li>
-        <li>Slack Fund</li>
-      </ul>
+    <div class="companies">
+      <div class="mid-logo">
+        <img src="./images/iso-slack.png" alt="">
+      </div>
+      <div class="ul-parent">
+        <ul>
+          <li class="li-bold">COMPANY</li>
+          <li>About Us</li>
+          <li>Careers</li>
+          <li>Blog</li>
+          <li>Press</li>
+          <li>Brand Guidelines</li>
+        </ul>
+        <ul>
+          <li class="li-bold">PRODUCT</li>
+          <li>Why Slack?</li>
+          <li>Enterprise</li>
+          <li>Customer Stories</li>
+          <li>Pricing</li>
+          <li>Security</li>
+        </ul>
+        <ul>
+          <li class="li-bold">RESOURCES</li>
+          <li>Download</li>
+          <li>Help Center</li>
+          <li>Guides</li>
+          <li>Events</li>
+          <li>App Directory</li>
+          <li>API</li>
+        </ul>
+        <ul>
+          <li class="li-bold">EXTRAS</li>
+          <li>Podcast</li>
+          <li>Slack Shop</li>
+          <li>Slack at Work</li>
+          <li>Slack Fund</li>
+        </ul>
+      </div>  
     </div>
     <div>
       <ul>
diff --git a/stylesheets/reset.css b/stylesheets/reset.css
new file mode 100644
index 000000000..27acba5c0
--- /dev/null
+++ b/stylesheets/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/stylesheets/style.css b/stylesheets/style.css
index cff873eb2..76ebade31 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -5,3 +5,185 @@ main-titles dark-grey: #2C303F;
 paragraph grey: #5b5e6d;
 nav grey: #5b5e6d;
 */
+
+/* ITERATION 1 */
+
+/*  Extra Small Screen (width < 768px */
+
+body {
+  margin: 0;
+  font-family: 'Heebo', sans-serif;
+  padding: 20px;
+}
+img {
+  max-width: 100%;
+}
+
+@media (max-width: 768px) {
+
+body {
+  margin: 0;
+  font-family: 'Heebo', sans-serif;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  width: 100%;
+}
+
+.nav-bar ul {
+  /* visibility: hidden; */
+  display: inline-flex;
+  list-style: none;
+  margin: 0;
+  color: #5b5e6d;
+}
+.nav-bar ul li {
+  margin: 0 5px;
+}
+
+.nav-parent {
+  width: 100%;
+  padding: 0;
+  height: 70px;
+  background-color: #fff;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  position: fixed;
+  border-bottom: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.nav-bar {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  padding: 0;
+  width: 95%;
+}
+.logo {
+  line-height: 0;
+}
+
+#nav-logo {
+  height: auto;
+  width: 100px;
+}
+.header {
+  /* display: flex; */
+  /* padding: 90 10px 0; */
+  text-align: center;
+  color: #5b5e6d;
+}
+
+.header h1 {
+  color: #2C303F;
+}
+
+.header p {
+  text-align: left;
+  padding: 0 20px;
+  margin-bottom: 25px;
+}
+
+#last-p {
+  text-align: center;
+}
+
+.header button, .try-free button {
+  font-size: 1rem;
+  font-weight: 700;
+  border-radius: 5px;
+  width: 90%;
+  height: 40px;
+  padding: 10px;
+  background-color: #192592;
+  color: #fff;
+  text-transform: capitalize;
+}
+
+.clients {
+  width: 100%;
+  color: #2C303F;
+  background-color: #F4F3F4;
+  text-align: center;
+}
+
+.clients h2 {
+  color: #2C303F;
+  text-align: center;
+  padding-top: 15px;
+}
+
+.clients button {
+  font-size: 1rem;
+  font-weight: 700;
+  border-radius: 5px;
+  width: 90%;
+  height: 40px;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid #192592;
+  color: #192592;
+  text-transform: capitalize;
+}
+
+.clients p {
+  padding: 10px 20px;
+  text-align: left;
+  
+}
+
+.clients img {
+  display: block;
+  max-width: 50%;
+  margin: 50px auto;
+  padding-bottom: 20px;
+}
+.try-free, .try-free p {
+  text-align: center;
+  color: #5b5e6d;
+}
+
+.try-free h3 {
+  font-weight: 700;
+  font-size: 1.2em;
+  color: #2C303F;
+}
+.companies {
+  display: flex;
+  flex-direction: column;
+}
+
+.companies ul li {
+  list-style-type: none;
+  color: #5b5e6d;
+}
+
+.li-bold {
+  margin: 0 0 10px;
+  font-weight: 700;
+  color: #2C303F;
+}
+.ul-parent {
+  /* margin-right: 10px; */
+  display: flex;
+  flex-direction: row;
+  /* align-items: flex-start; */
+  flex-wrap: wrap;
+}
+.ul-parent ul {
+  display: flex;
+  flex-direction: column;
+  width: 40%;
+  justify-content: center;
+}
+
+}
