diff --git a/index.html b/index.html
index 76254c13..d9bd6377 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
   </head>
 
   <body>
-    <div class="header">
+    <header class="header">
 
         <a href="#">
           <img
@@ -49,30 +49,34 @@
 
         <button>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">
+            <div class="hero-content">
             <h1>Bikes for Refugees</h1>
             <p>
               Providing donated bikes and accessories to refugees and asylum
               seekers in Scotland.
             </p>
-            <button>Donate a bike today</button>
-            <button>Volunteer</button>
+            <button id="button1">Donate a bike today</button>
+            <button id="button2">Volunteer</button>
+            
+            </div>
+
           </div>
 
           <div>
             <h2 class="heading-underline">Learn more</h2>
 
-            <div>
-              <div class="article">
+            <div class="both-articles">
+              <article class="article article1">
                 <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 +89,9 @@ <h3 class="article__title">Why do refugees need bikes?</h3>
                     Learn more
                   </a>
                 </p>
-              </div>
+              </article>
 
-              <div class="article">
+              <article class="article article2">
                 <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 +104,19 @@ <h3 class="article__title">How can I help?</h3>
                     Learn more
                   </a>
                 </p>
-              </div>
+              </article>
             </div>
           </div>
-        </div>
+        </main>
 
-        <div class="sidebar">
+        <aside class="sidebar">
           <h2 class="heading-underline">Upcoming events</h2>
 
           <div class="article">
             <img
               class="article__thumbnail"
-              src="spring-fundraisers_thumbnail.jpg"
-              alt=""
+              src="images/spring-fundraisers_thumbnail.jpg"
+              alt="image of a cherry blossom"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -128,8 +132,8 @@ <h3 class="article__title">
           <div class="article">
             <img
               class="article__thumbnail"
-              src="bikes-for-refugees_logo.jpg"
-              alt=""
+              src="images/bikes-for-refugees_logo.jpg"
+              alt=""Logo for Bikes for Refugees Scotland""
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -141,8 +145,8 @@ <h3 class="article__title">
           <div class="article">
             <img
               class="article__thumbnail"
-              src="edinburgh-damascus_thumbnail.png"
-              alt=""
+              src=images/edinburgh-damascus_thumbnail.png
+              alt="image of a road sign"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -163,10 +167,10 @@ <h3 class="article__title">
             <span class="fa fa-facebook-square"></span>
             All Facebook events
           </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 +178,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..64631a13 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -74,6 +74,11 @@ p {
   font-weight: 600;
   text-transform: uppercase;
   text-decoration: none;
+  padding: 1rem;
+}
+
+.navigation__link:hover{
+  color: #c05326;
 }
 
 
@@ -95,8 +100,20 @@ p {
 
 /* Buttons */
 
-  /* INSERT BUTTON STYLES HERE */
+header button{
+  background-color: var(--orange-dark);
+  color: var(--grey-light);
+  border: none;
+}  
 
+#button1{
+  color: var(--white);
+  background-color: var(--orange-dark);
+}
+
+#button2{
+  color: var(--orange-dark);
+}
 
 /* Content */
 
@@ -120,21 +137,35 @@ p {
 /* hero */
 
 .hero {
-  background-image: url("header-bike.jpg");
+  background-image: url("../images/header-bike.jpg");
   background-color: var(--grey-light);
+  background-size: cover;
+  background-position: center;
+  min-height: 40vh;
+  width:80vh ;
+  text-align: left;
+  align-items: center;
+  display: flex;
+  padding: 2rem;
+  margin-bottom: 2rem;
 }
 
 .hero h1 {
   margin-bottom: 1rem;
   font-size: 2.5rem;
+  color: #e4e4e4;
 }
 
 .hero p {
   font-size: 1.2rem;
   margin-bottom: 2rem;
+  color: #e4e4e4;
 }
 
 
+
+
+
 /* Headings */
 
 .heading-underline {
@@ -161,8 +192,18 @@ p {
 
 /* Article */
 
+.both-articles{
+  display: flex;
+}
+
 .article {
   margin-bottom: 1rem;
+  border-style: groove;
+  width: 50%;
+}
+
+.article1{
+  margin-right: 1rem;
 }
 
 .article__title {
