diff --git a/index.html b/index.html
index 76254c13..404964f8 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
   </head>
 
   <body>
-    <div class="header">
+    <section class="header">
 
         <a href="#">
           <img
@@ -30,7 +30,7 @@
           />
         </a>
 
-        <div>
+        <section>
           <ul class="navigation__list">
             <li class="navigation__item">
               <a class="navigation__link" href="#">Home</a>
@@ -45,34 +45,33 @@
               <a class="navigation__link" href="#">Contact Us</a>
             </li>
           </ul>
-        </div>
-
-        <button>Donate Now</button>
-
-    </div>
+        </section>
+        <button class="button1">Donate Now</button>
+      </section>
 
     <div class="content">
         <div class="main">
-          <div class="alert">
+          <section 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>
+          </section>
 
-          <div class="hero">
+          <section class="hero">
             <h1>Bikes for Refugees</h1>
+            <img src = "images/header-bike.jpg" alt = "image of a bike">
             <p>
               Providing donated bikes and accessories to refugees and asylum
               seekers in Scotland.
             </p>
-            <button>Donate a bike today</button>
-            <button>Volunteer</button>
-          </div>
+            <button class = "button2">Donate a bike today</button>
+            <button class= "button3">Volunteer</button>
+          </section>
 
           <div>
             <h2 class="heading-underline">Learn more</h2>
 
-            <div>
-              <div class="article">
+            <div class = articles-container>
+              <section class="article3">
                 <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 +84,9 @@ <h3 class="article__title">Why do refugees need bikes?</h3>
                     Learn more
                   </a>
                 </p>
-              </div>
+              </section>
 
-              <div class="article">
+              <section class="article3">
                 <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,7 +99,7 @@ <h3 class="article__title">How can I help?</h3>
                     Learn more
                   </a>
                 </p>
-              </div>
+              </section>
             </div>
           </div>
         </div>
@@ -108,11 +107,11 @@ <h3 class="article__title">How can I help?</h3>
         <div class="sidebar">
           <h2 class="heading-underline">Upcoming events</h2>
 
-          <div class="article">
+          <section class="article1">
             <img
               class="article__thumbnail"
-              src="spring-fundraisers_thumbnail.jpg"
-              alt=""
+              src="images/spring-fundraisers_thumbnail.jpg"
+              alt="spring fund risers in pink image"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -123,26 +122,26 @@ <h3 class="article__title">
                 Médecins Sans Frontières.
               </p>
             </div>
-          </div>
+          </section>
 
-          <div class="article">
+          <section class="article1">
             <img
               class="article__thumbnail"
-              src="bikes-for-refugees_logo.jpg"
-              alt=""
+              src="images/bikes-for-refugees_logo.jpg"
+              alt="logo for bikes refugees in 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>
+          </section>
 
-          <div class="article">
+          <section class="article1">
             <img
               class="article__thumbnail"
-              src="edinburgh-damascus_thumbnail.png"
-              alt=""
+              src="images/edinburgh-damascus_thumbnail.png"
+              alt="image of a bike with a map of edinburgh to damascus"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -153,7 +152,7 @@ <h3 class="article__title">
                 to Damascus.
               </p>
             </div>
-          </div>
+          </section>
 
           <a
             href="https://www.facebook.com/BikesforRefugeesScotland/events/?ref=page_internal"
@@ -166,7 +165,7 @@ <h3 class="article__title">
         </div>
     </div>
 
-    <div class="footer">
+    <section class="footer">
       <div class="footer__content">
         <p>
           <strong>Bikes for Refugees Scotland is a volunteer-led project to help
@@ -174,6 +173,6 @@ <h3 class="article__title">
         </p>
         <p>Website by Code Your Future</p>
       </div>
-    </div>
+    </section>
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
index 4d1c088e..78455670 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -63,10 +63,16 @@ p {
 .navigation__list {
   display: flex;
   list-style: none;
+
+}
+.navigation__list:hover {
+  background-color: var(--orange-light);
 }
 
 .navigation__item {
   padding: 0.5rem 0;
+  margin-right: 20px;
+  
 }
 
 .navigation__link {
@@ -75,7 +81,9 @@ p {
   text-transform: uppercase;
   text-decoration: none;
 }
-
+.navigation__link:hover {
+  color : orange
+}
 
 /* Text styles */
 
@@ -95,7 +103,23 @@ p {
 
 /* Buttons */
 
-  /* INSERT BUTTON STYLES HERE */
+.button1 {
+  color: var(--white);
+  background-color : var(--orange-dark);
+  
+}
+
+.button2 {
+  background-color: var(--orange-dark);
+  color: var(--white);
+
+  
+}
+.button3 {
+  background-color: var(--white);
+  color :var(--orange-dark) ;
+  
+}
 
 
 /* Content */
@@ -119,22 +143,42 @@ p {
 
 /* hero */
 
-.hero {
+.hero {  
+  position: relative;
   background-image: url("header-bike.jpg");
-  background-color: var(--grey-light);
+  background-size: cover;
+  padding: 20px;
+  border: 100px;
+  margin-bottom: 30px;
 }
 
 .hero h1 {
+  color: var(--white);
+  position :absolute;
+  top : 10%;
   margin-bottom: 1rem;
   font-size: 2.5rem;
 }
 
 .hero p {
+  top : 30%;
+  color: var(--white);
+  position :absolute;
   font-size: 1.2rem;
   margin-bottom: 2rem;
 }
 
+.button3 {
+  position :absolute;
+  top : 70%;
+  left : 22%;
+}
 
+.button2 {
+  position :absolute;
+  top : 70%;
+  left : 3%;
+}
 /* Headings */
 
 .heading-underline {
@@ -158,11 +202,37 @@ p {
   background: var(--orange-dark);
 }
 
-
 /* Article */
+.articles-container {
+  display: flex;
+  gap: 20px;
+  margin-top: 50px;
+}
+.article4  {
+  flex :1;
+  border: 1px solid var(--grey-light);
+  padding: 15px;
+  box-sizing: border-box;
+  
+}
+.article3  {
+  flex :2;
+  border: 1px solid var(--grey-light);
+  padding: 15px;
+  box-sizing: border-box;
+  
+}
 
-.article {
+
+.article1 {
   margin-bottom: 1rem;
+  display: flex;
+  gap: 20px;
+  border: 1px, solid ,rgb(212, 208, 208);
+  height: 185px;
+}
+.article1:nth-child(3) {
+  height: 90px;
 }
 
 .article__title {
@@ -172,8 +242,9 @@ p {
 }
 
 .article__title-link {
+  color: rgb(36, 131, 240);
   text-decoration: none;
-  color: var(--orange-dark);
+
 }
 
 .article__summary {
@@ -193,7 +264,7 @@ p {
 .article__read-more a {
   font-size: 0.85rem;
   font-weight: 700;
-  color: var(--orange-dark);
+  color: rgb(29, 110, 233);
   text-decoration: none;
 }
 
@@ -204,11 +275,11 @@ p {
 
 .fa {
   margin-right: 0.5rem;
-  color: var(--orange-dark);
+  color: rgb(29, 105, 219);
 }
 
 .facebook-link {
-  color: var(--orange-dark);
+  color: rgb(29, 105, 219);
 }
 
 /* Sidebar */
@@ -229,6 +300,7 @@ p {
   border-top: 2px solid var(--orange-light);
   padding-top: 2rem;
   padding-bottom: 2rem;
+  position: relative;
 }
 
 .footer p {
