diff --git a/index.html b/index.html
index 76254c13..4e1c81aa 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
   </head>
 
   <body>
-    <div class="header">
+    <header class="header">
 
         <a href="#">
           <img
@@ -30,7 +30,7 @@
           />
         </a>
 
-        <div>
+        <nav>
           <ul class="navigation__list">
             <li class="navigation__item">
               <a class="navigation__link" href="#">Home</a>
@@ -45,34 +45,35 @@
               <a class="navigation__link" href="#">Contact Us</a>
             </li>
           </ul>
-        </div>
+        </nav>
 
-        <button>Donate Now</button>
+        <button class="btn-orange">Donate Now</button>
 
-    </div>
+      </header>
 
     <div class="content">
-        <div class="main">
+        <main class="main">
           <div class="alert">
             You've helped us give <span class="text-highlight">72</span> bikes
             to refugees and asylum seekers so far. <strong>Thank you!</strong>
           </div>
 
           <div class="hero">
-            <h1>Bikes for Refugees</h1>
-            <p>
+              <h1 class="font-white">Bikes for Refugees</h1>
+            <p class="font-white">
               Providing donated bikes and accessories to refugees and asylum
               seekers in Scotland.
             </p>
-            <button>Donate a bike today</button>
-            <button>Volunteer</button>
+            <div class="hero-btns"><button class="btn-orange">Donate a bike today</button>
+            <button class="btn-white">Volunteer</button></div>
+            
           </div>
 
-          <div>
+          <section>
             <h2 class="heading-underline">Learn more</h2>
 
-            <div>
-              <div class="article">
+            <div class="main-articles">
+              <article class="article">
                 <h3 class="article__title">Why do refugees need bikes?</h3>
                 <p class="article__summary">
                   Many refugees are placed in housing in areas where there are
@@ -85,9 +86,9 @@ <h3 class="article__title">Why do refugees need bikes?</h3>
                     Learn more
                   </a>
                 </p>
-              </div>
+              </article>
 
-              <div class="article">
+              <article class="article">
                 <h3 class="article__title">How can I help?</h3>
                 <p class="article__summary">
                   We need lots of bikes and bike accessories! If you have an
@@ -100,19 +101,19 @@ <h3 class="article__title">How can I help?</h3>
                     Learn more
                   </a>
                 </p>
-              </div>
+              </article>
             </div>
-          </div>
-        </div>
+          </section>
+        </main>
 
-        <div class="sidebar">
+        <aside class="sidebar">
           <h2 class="heading-underline">Upcoming events</h2>
 
-          <div class="article">
+          <article class="article">
             <img
               class="article__thumbnail"
-              src="spring-fundraisers_thumbnail.jpg"
-              alt=""
+              src="/images/spring-fundraisers_thumbnail.jpg"
+              alt="A branch with pinkish leaves followed by the wording Spring fundraisers"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -123,26 +124,26 @@ <h3 class="article__title">
                 Médecins Sans Frontières.
               </p>
             </div>
-          </div>
+          </article>
 
-          <div class="article">
+          <article class="article">
             <img
               class="article__thumbnail"
-              src="bikes-for-refugees_logo.jpg"
-              alt=""
+              src="/images/bikes-for-refugees_logo.jpg"
+              alt="A ClipArt bike with text stating Bikes for Refugees, Scotland"
             />
             <div class="article__content">
               <h3 class="article__title">
                 <a class="article__title-link" href="#">Bike dropoff event in Edinburgh on May 11</a>
               </h3>
             </div>
-          </div>
+          </article>
 
-          <div class="article">
+          <article class="article">
             <img
               class="article__thumbnail"
-              src="edinburgh-damascus_thumbnail.png"
-              alt=""
+              src="\images\edinburgh-damascus_thumbnail.png"
+              alt="A cyclist reading a roadsign. The roadsign is divided between Edinburgh and Damascus"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -153,20 +154,22 @@ <h3 class="article__title">
                 to Damascus.
               </p>
             </div>
-          </div>
-
-          <a
-            href="https://www.facebook.com/BikesforRefugeesScotland/events/?ref=page_internal"
-            target="_blank"
-            class="facebook-link"
-          >
+          </article>
+          <div class="facebook">
+            <a
+              href="https://www.facebook.com/BikesforRefugeesScotland/events/?ref=page_internal"
+              target="_blank"
+              class="facebook-link"
+            >
             <span class="fa fa-facebook-square"></span>
             All Facebook events
-          </a>
-        </div>
+            </a>
+          </div>
+          
+        </aside>
     </div>
 
-    <div class="footer">
+    <footer class="footer">
       <div class="footer__content">
         <p>
           <strong>Bikes for Refugees Scotland is a volunteer-led project to help
@@ -174,6 +177,6 @@ <h3 class="article__title">
         </p>
         <p>Website by Code Your Future</p>
       </div>
-    </div>
+    </footer>
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
index 4d1c088e..96ba4994 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -35,7 +35,6 @@ p {
 }
 
 .header,
-.content,
 .footer {
   padding: 0 1.5rem;
   max-width: 1200px;
@@ -66,7 +65,7 @@ p {
 }
 
 .navigation__item {
-  padding: 0.5rem 0;
+  padding: 0.5rem;
 }
 
 .navigation__link {
@@ -76,6 +75,11 @@ p {
   text-decoration: none;
 }
 
+nav a:hover {
+  background-color: orange;
+  color: white;
+  transition: all 0.3s ease;
+}
 
 /* Text styles */
 
@@ -92,21 +96,60 @@ p {
   border-left-color: var(--orange-dark);
 }
 
+.font-white {
+  color: #fff;
+}
+
 
 /* Buttons */
 
-  /* INSERT BUTTON STYLES HERE */
+button {
+  border: 0;
+  padding: 5px 15px 5px 15px;
+  border-radius: 5px;
+  font-weight:600;
+}
+
+.btn-orange {
+  background-color:var(--orange-dark);
+  color: #fff;
+}
+
+.btn-white {
+  background-color:#ffffff;
+  color: var(--orange-dark);
+}
 
 
 /* Content */
 
 .content {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  padding: 0 1.5rem;
+  margin: 0 auto;
+}
+
+.main { 
+  order: 1;
+  flex-grow: 3;
+  max-width: 55rem;
+ } 
+ 
+ .sidebar {
+   order: 2;
+   
+  }
+
+.main-articles {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
 }
 
 /* Alert */
 
+
 .alert {
   background-color: var(--orange-light);
   border-left: 4px solid var(--orange-dark);
@@ -120,8 +163,14 @@ p {
 /* hero */
 
 .hero {
-  background-image: url("header-bike.jpg");
+  background-image: url("/images/header-bike.jpg");
   background-color: var(--grey-light);
+  height: 20rem;
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
 }
 
 .hero h1 {
@@ -163,6 +212,8 @@ p {
 
 .article {
   margin-bottom: 1rem;
+  border: 2px solid var(--grey-light);
+  padding: 1rem;
 }
 
 .article__title {
@@ -211,6 +262,7 @@ p {
   color: var(--orange-dark);
 }
 
+
 /* Sidebar */
 
 .sidebar {
@@ -219,6 +271,15 @@ p {
   min-width: 350px;
 }
 
+.sidebar article {
+  display: flex;
+  gap: 1rem;
+}
+
+.facebook {
+  display: flex;
+  align-self: flex-end;
+}
 /* Footer */
 
 .footer {
