diff --git a/index.html b/index.html
index 76254c13..91f17d12 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,7 @@
     <title>Bikes for Refugees</title>
   </head>
 
-  <body>
-    <div class="header">
+    <header class="header">
 
         <a href="#">
           <img
@@ -30,7 +29,7 @@
           />
         </a>
 
-        <div>
+        <nav class="nav">
           <ul class="navigation__list">
             <li class="navigation__item">
               <a class="navigation__link" href="#">Home</a>
@@ -45,15 +44,15 @@
               <a class="navigation__link" href="#">Contact Us</a>
             </li>
           </ul>
-        </div>
+        </nav>
 
-        <button>Donate Now</button>
+        <button class="donate-button">Donate Now</button>
 
-    </div>
+      </header>
 
     <div class="content">
-        <div class="main">
-          <div class="alert">
+         <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>
@@ -64,15 +63,15 @@ <h1>Bikes for Refugees</h1>
               Providing donated bikes and accessories to refugees and asylum
               seekers in Scotland.
             </p>
-            <button>Donate a bike today</button>
-            <button>Volunteer</button>
+            <button class="donate-button">Donate a bike today</button>
+            <button class="volunteer-button">Volunteer</button>
           </div>
 
           <div>
             <h2 class="heading-underline">Learn more</h2>
-
-            <div>
-              <div class="article">
+            <div class="section"> 
+            <article class="article" id="article-one"> 
+              
                 <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>
+              </article >
 
-              <div class="article">
+              <article class="article" id="article-flex">
                 <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 +99,20 @@ <h3 class="article__title">How can I help?</h3>
                     Learn more
                   </a>
                 </p>
-              </div>
-            </div>
+              </article>
+            </article>
           </div>
-        </div>
+          </div>
+        </main>
 
-        <div class="sidebar">
+        <sidebar 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="spring-fundrase-logo-picture"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -123,26 +123,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="bikes-for-refugees_logo-picture"
             />
             <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=" one man riding a bike"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -153,7 +153,7 @@ <h3 class="article__title">
                 to Damascus.
               </p>
             </div>
-          </div>
+          </article>
 
           <a
             href="https://www.facebook.com/BikesforRefugeesScotland/events/?ref=page_internal"
@@ -164,9 +164,9 @@ <h3 class="article__title">
             All Facebook events
           </a>
         </div>
-    </div>
+      </sidebar>
 
-    <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 +174,7 @@ <h3 class="article__title">
         </p>
         <p>Website by Code Your Future</p>
       </div>
-    </div>
+    </footer>
   </body>
 </html>
+ 
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index 4d1c088e..d95a34a9 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -67,6 +67,8 @@ p {
 
 .navigation__item {
   padding: 0.5rem 0;
+  margin-left: 1.5em;
+
 }
 
 .navigation__link {
@@ -76,7 +78,6 @@ p {
   text-decoration: none;
 }
 
-
 /* Text styles */
 
 .text-highlight {
@@ -94,7 +95,27 @@ p {
 
 
 /* Buttons */
+.volunteer-button{
+  background-color: white;
+  color: #c05326;
+  border: none;
+  border-radius: 3px;
+  padding: 4px 6px;
+  cursor: pointer;
+}
+.donate-button{
+  color: white;
+  background-color: #c05326;
+  border: none;
+  border-radius: 3px;
+  padding: 4px 6px;
+  cursor: pointer;
+       }
+.donate-button:hover{
+color: #c05326;
+background-color: white;
 
+}
   /* INSERT BUTTON STYLES HERE */
 
 
@@ -120,21 +141,23 @@ p {
 /* hero */
 
 .hero {
-  background-image: url("header-bike.jpg");
+  background-image: url("../images/header-bike.jpg");
   background-color: var(--grey-light);
+  padding: 100px;
 }
 
 .hero h1 {
   margin-bottom: 1rem;
   font-size: 2.5rem;
+  color: white;
 }
 
 .hero p {
+  color: white;
   font-size: 1.2rem;
   margin-bottom: 2rem;
 }
 
-
 /* Headings */
 
 .heading-underline {
@@ -145,6 +168,8 @@ p {
   font-size: 1rem;
   font-weight: 600;
   text-transform: uppercase;
+
+
 }
 
 .heading-underline:before {
@@ -163,29 +188,53 @@ p {
 
 .article {
   margin-bottom: 1rem;
+  border: 1.5px solid rgb(215, 210, 210);
+  border-radius: 5px;
+  padding : 1em 2em;
+ 
+  
 }
 
+
+
+
 .article__title {
   margin-bottom: 0.5rem;
   font-size: 1rem;
   font-weight: 700;
+  
+  
+
 }
 
 .article__title-link {
   text-decoration: none;
   color: var(--orange-dark);
+ 
+ 
+  
+ 
+  
 }
 
 .article__summary {
   margin-top: 0;
   margin-bottom: 1rem;
+  
+  
 }
 
 .article__thumbnail {
+  float: left;
   object-fit: contain;
   width: 5rem;
+  margin-top: 1em;
+ 
+  
+}
+.article__content{
+  margin-left: 6em;
 }
-
 .article__read-more {
   margin-top: 0;
 }
@@ -209,6 +258,7 @@ p {
 
 .facebook-link {
   color: var(--orange-dark);
+  margin-left: 12em;
 }
 
 /* Sidebar */
@@ -217,8 +267,18 @@ p {
   display: flex;
   flex-direction: column;
   min-width: 350px;
+  margin-left: 2em;
+  
 }
+.section{
+  display: flex;
+  
 
+}
+#article-one
+{
+  margin-right: 70px;
+}
 /* Footer */
 
 .footer {
