diff --git a/index.html b/index.html
index 76254c13..cb374eff 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,7 @@
           </ul>
         </div>
 
-        <button>Donate Now</button>
+        <button class="donatenow">Donate Now</button>
 
     </div>
 
@@ -64,14 +64,14 @@ <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="donatenow">Donate a bike today</button>
+            <button class="Volunteer">Volunteer</button>
           </div>
 
           <div>
             <h2 class="heading-underline">Learn more</h2>
 
-            <div>
+            <div class="articleparent">
               <div class="article">
                 <h3 class="article__title">Why do refugees need bikes?</h3>
                 <p class="article__summary">
@@ -108,10 +108,10 @@ <h3 class="article__title">How can I help?</h3>
         <div class="sidebar">
           <h2 class="heading-underline">Upcoming events</h2>
 
-          <div class="article">
+          <div class="articlesidebar">
             <img
               class="article__thumbnail"
-              src="spring-fundraisers_thumbnail.jpg"
+              src="images/spring-fundraisers_thumbnail.jpg"
               alt=""
             />
             <div class="article__content">
@@ -125,10 +125,10 @@ <h3 class="article__title">
             </div>
           </div>
 
-          <div class="article">
+          <div class="articlesidebar">
             <img
               class="article__thumbnail"
-              src="bikes-for-refugees_logo.jpg"
+              src="images/bikes-for-refugees_logo.jpg"
               alt=""
             />
             <div class="article__content">
@@ -138,10 +138,10 @@ <h3 class="article__title">
             </div>
           </div>
 
-          <div class="article">
+          <div class="articlesidebar">
             <img
               class="article__thumbnail"
-              src="edinburgh-damascus_thumbnail.png"
+              src="images/edinburgh-damascus_thumbnail.png"
               alt=""
             />
             <div class="article__content">
diff --git a/styles/style.css b/styles/style.css
index 4d1c088e..541198c7 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -67,6 +67,7 @@ p {
 
 .navigation__item {
   padding: 0.5rem 0;
+  margin: 10px;
 }
 
 .navigation__link {
@@ -76,6 +77,12 @@ p {
   text-decoration: none;
 }
 
+.navigation__link:hover,
+.navigation__link:focus {
+  color: var(--orange-dark);
+  text-decoration: underline;
+}
+
 
 /* Text styles */
 
@@ -96,6 +103,28 @@ p {
 /* Buttons */
 
   /* INSERT BUTTON STYLES HERE */
+  .donatenow {
+    background-color: var(--orange-dark);
+    border: none;
+    color: var(--white);
+    font-size: 0.85rem;
+    font-weight: 700;
+    padding: 0.5rem 0.5rem;
+    border-radius: 4px;
+    margin-left: 42px;
+  }
+
+  .Volunteer {
+    background-color: var(--white);
+    color: var(--orange-dark);
+    font-weight: 700;
+    font-size: 0.85rem;
+    padding: 0.5rem 0.5rem;
+    cursor: pointer;
+    border-radius: 4PX;
+    margin-top: 10px;
+  }
+  
 
 
 /* Content */
@@ -120,18 +149,27 @@ p {
 /* hero */
 
 .hero {
-  background-image: url("header-bike.jpg");
+  background-image: url(../images/header-bike.jpg);
+  background-size: cover;
+  background-position: center;
+  height: 320px;
   background-color: var(--grey-light);
+  margin-bottom: 25px;
 }
 
 .hero h1 {
-  margin-bottom: 1rem;
-  font-size: 2.5rem;
+  margin-bottom: 0.8rem;
+  font-size: 2rem;
+  color: white;
+  padding-top: 3.8rem;
+  padding-left: 40PX;
 }
 
 .hero p {
-  font-size: 1.2rem;
   margin-bottom: 2rem;
+  color: #fff;
+  padding-left: 40PX;
+  font-weight: 600;
 }
 
 
@@ -160,15 +198,31 @@ p {
 
 
 /* Article */
-
+.articleparent {
+  display: flex;
+}
 .article {
   margin-bottom: 1rem;
+  border-style: groove;
+  padding: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  flex: 1;
+}
+
+.articlesidebar {
+  margin-bottom: 1rem;
+  border-style: groove;
+  padding: 10px;
+  flex: 0;
+  display: flex;
 }
 
 .article__title {
   margin-bottom: 0.5rem;
   font-size: 1rem;
   font-weight: 700;
+  max-width: 220px;
 }
 
 .article__title-link {
@@ -184,6 +238,8 @@ p {
 .article__thumbnail {
   object-fit: contain;
   width: 5rem;
+  float: left;
+  padding: 10px;
 }
 
 .article__read-more {
@@ -209,6 +265,7 @@ p {
 
 .facebook-link {
   color: var(--orange-dark);
+  text-align: end;
 }
 
 /* Sidebar */