diff --git a/index.html b/index.html
index 8300a1607..83f042ea5 100644
--- a/index.html
+++ b/index.html
@@ -5,29 +5,43 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="./stylesheets/style.css">
   <script src="https://use.fontawesome.com/1fb0eb3889.js"></script>
   <title>Where work happens | Slack</title>
 </head>
 
 <body>
+
+
   <nav>
-    <img src="./images/slack-logo.png" alt="slack_logo">
+    <img src="./images/slack-logo.png" alt="slack_logo" id="logo">
     <ul>
       <li>Why Slack?</li>
       <li>Pricing</li>
       <li>About Us</li>
       <li>Your Workspaces</li>
     </ul>
+    <div id="menu">
+      <div class="bar-menu"></div>
+      <div class="bar-menu"></div>
+      <div class="bar-menu"></div>
+    </div>
   </nav>
+
+
   <header>
-    <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>
+    <p id="why">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 class="sign-in">Already using Slack? <a href="#">Sign in</a></p>
+    <img src="./images/home_talking.png" alt="home_work_happening">
   </header>
+
+
   <main>
-    <div>
+
+
+    <div id="companies">
       <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,61 +52,69 @@ <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>
-      <p>Already using Slack? <a href="">Sign in</a></p>
+    <div id="pre-footer">
+      <p id="try">Try it for free</p>
+      <p class="sign-in">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 id="lists">
+        <ul>
+          <li class="header-li">COMPANY</li>
+          <li>About Us</li>
+          <li>Careers</li>
+          <li>Blog</li>
+          <li>Press</li>
+          <li>Brand Guidelines</li>
+        </ul>
+        <ul>
+          <li class="header-li">PRODUCT</li>
+          <li>Why Slack?</li>
+          <li>Enterprise</li>
+          <li>Customer Stories</li>
+          <li>Pricing</li>
+          <li>Security</li>
+        </ul>
+        <ul>
+          <li class="header-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 class="header-li">EXTRAS</li>
+          <li>Podcast</li>
+          <li>Slack Shop</li>
+          <li>Slack at Work</li>
+          <li>Slack Fund</li>
+        </ul>
+      </div>
     </div>
-    <div>
+    <div id="links">
       <ul>
         <li>Status</li>
         <li>Privacy & Terms</li>
         <li>Contact Us</li>
       </ul>
       <div>
-        <img src="./images/us-flag.png" alt="">
-        <span>English (US)</span>
-        <i class="fa fa-chevron-down" aria-hidden="true"></i>
-        <i class="fa fa-twitter" aria-hidden="true"></i>
-        <i class="fa fa-facebook" aria-hidden="true"></i>
-        <i class="fa fa-youtube-play" aria-hidden="true"></i>
+        <div id="lang">
+         <img src="./images/us-flag.png" alt="">
+         <span>English (US)</span>
+         <i class="fa fa-chevron-down" aria-hidden="true"></i>
+        </div>
+        <div id="social">
+         <i class="fa fa-twitter" aria-hidden="true"></i>
+         <i class="fa fa-facebook" aria-hidden="true"></i>
+         <i class="fa fa-youtube-play" aria-hidden="true"></i>
+      </div>
       </div>
     </div>
   </footer>
diff --git a/stylesheets/style.css b/stylesheets/style.css
index cff873eb2..1f4a068ef 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -5,3 +5,222 @@ main-titles dark-grey: #2C303F;
 paragraph grey: #5b5e6d;
 nav grey: #5b5e6d;
 */
+
+/* ---- reset ---- */
+
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0 0px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: white;
+  border-bottom: lightgrey 1px solid;
+  position: fixed;
+  width: 100%;
+}
+
+#logo {
+  height: 50px;
+  margin: 5px 20px;
+}
+
+nav ul{
+  display: none;
+}
+
+#menu {
+  margin: 10px;
+}
+.bar-menu {
+  width: 35px;
+  height: 5px;
+  background-color: #5b5e6d;
+  margin: 5px 0;  
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin: 100px 20px 0px 20px;
+}
+
+h1 {
+  margin-top: 10px;
+  font-size: 50px;
+  color: #2C303F;
+}
+
+#why{
+  color: #5b5e6d;
+  font-size: 18px;
+  font-family: helvetica;
+}
+
+header button, #pre-footer button{
+  background-color: #192592;
+  color: white;
+  font-family: helvetica;
+  font-size: 15px;
+  font-weight: bold;
+  padding: 20px 0;
+  border-radius: 5px;
+  margin-top: 25px;
+}
+
+#sign-in {
+  color: #5b5e6d;
+  font-size: 15px;
+  font-family: helvetica;
+  align-self: center;
+  margin-top: 15px;
+}
+
+header img {
+  width: 100%;
+  margin-top: 50px;
+}
+
+#companies{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #F4F3F4;
+  margin-top: 100px;
+  padding-bottom: 40px;
+}
+
+#companies h2{
+  text-align: center;
+  margin-top: 60px;
+  margin-bottom: 0px;
+  font-size: 30px;
+}
+
+#companies p{
+  text-align: center;
+  color: #5b5e6d;
+  font-size: 18px;
+  font-family: helvetica;
+  padding: 20px;
+}
+
+#companies button{
+  margin: 35px 20px 40px 20px;
+  background-color: white;
+  color: #192592;
+  font-family: helvetica;
+  font-size: 15px;
+  font-weight: bold;
+  padding: 20px 0;
+  border-radius: 5px;
+  border-color: #192592;
+  margin-top: 25px;
+}
+
+#companies img {
+  height: 70px;
+  align-self: center;
+  border-bottom: lightgray 1px solid;       /********To Improve************/
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+}
+
+#pre-footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 20px;
+  margin-right: 20px;
+  
+}
+
+#try {
+  margin-top: 40px;
+  margin-bottom: 0px;
+  font-size: 30px;
+  font-weight: bold;
+  text-align: center;
+}
+
+#lists {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.header-li{
+  font-weight: bold;
+}
+
+li{
+  list-style-type: none;
+  color: #5b5e6d;
+  font-size: 17px;
+  font-family: helvetica;
+  margin: 15px;
+  width: 150px;
+}
+
+#links {
+  background-color: #F4F3F4;
+}
+
+#links ul {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  font-weight: bold;
+}
+
+#links li {
+  text-align: center;
+}
+
+#lang {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+#lang * {
+  margin: 5px;
+}
+
+#lang span, #lang i{
+  padding: 5px;
+}
+
+#lang img{
+  height: 30px;
+}
+
+#lang span {
+  color: #5b5e6d;
+  font-size: 17px;
+  font-family: helvetica;
+  font-weight: bold;
+}
+
+#social {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+#social i {
+  margin: 20px 15px;
+}
\ No newline at end of file
