diff --git a/index.html b/index.html
index 76254c13..151834f1 100644
--- a/index.html
+++ b/index.html
@@ -64,15 +64,16 @@ <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 style="margin-left: 35px;">Donate a bike today</button>
+            <button class="volunteer-btn">Volunteer</button>
           </div>
 
           <div>
             <h2 class="heading-underline">Learn more</h2>
 
-            <div>
-              <div class="article">
+            <div class="article-container">
+
+              <div class="article-2">
                 <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
@@ -87,7 +88,7 @@ <h3 class="article__title">Why do refugees need bikes?</h3>
                 </p>
               </div>
 
-              <div class="article">
+              <div class="article-2">
                 <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
@@ -101,6 +102,7 @@ <h3 class="article__title">How can I help?</h3>
                   </a>
                 </p>
               </div>
+
             </div>
           </div>
         </div>
@@ -111,7 +113,7 @@ <h2 class="heading-underline">Upcoming events</h2>
           <div class="article">
             <img
               class="article__thumbnail"
-              src="spring-fundraisers_thumbnail.jpg"
+              src="/images/spring-fundraisers_thumbnail.jpg"
               alt=""
             />
             <div class="article__content">
@@ -128,7 +130,7 @@ <h3 class="article__title">
           <div class="article">
             <img
               class="article__thumbnail"
-              src="bikes-for-refugees_logo.jpg"
+              src="/images/bikes-for-refugees_logo.jpg"
               alt=""
             />
             <div class="article__content">
@@ -141,7 +143,7 @@ <h3 class="article__title">
           <div class="article">
             <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..46ad091f 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -66,7 +66,7 @@ p {
 }
 
 .navigation__item {
-  padding: 0.5rem 0;
+  padding: 15px;
 }
 
 .navigation__link {
@@ -76,6 +76,9 @@ p {
   text-decoration: none;
 }
 
+.navigation__link:hover {
+  color: var(--orange-dark);
+}
 
 /* Text styles */
 
@@ -95,8 +98,28 @@ p {
 
 /* Buttons */
 
-  /* INSERT BUTTON STYLES HERE */
+button {
+  background-color: var(--orange-dark);
+  color: white;
+  border-radius: 5px;
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+}
 
+.volunteer-btn {
+  background-color: white; 
+  color: var(--orange-dark);
+}
+
+.volunteer-btn:hover {
+  background-color: var(--orange-dark);
+  color: white;
+}
+
+button:hover {
+  background-color: white;
+  color: var(--orange-dark);
+}
 
 /* Content */
 
@@ -120,18 +143,23 @@ p {
 /* hero */
 
 .hero {
-  background-image: url("header-bike.jpg");
-  background-color: var(--grey-light);
+  height: 320px;
+  background-image: url("../images/header-bike.jpg");
+  color: white;
+  margin-bottom: 50px;
 }
 
 .hero h1 {
   margin-bottom: 1rem;
   font-size: 2.5rem;
+  padding-top: 80px;
+  padding-left: 35px;
 }
 
 .hero p {
   font-size: 1.2rem;
   margin-bottom: 2rem;
+  padding-left: 35px;
 }
 
 
@@ -161,8 +189,33 @@ p {
 
 /* Article */
 
+.article-container {
+  display: flex;
+  gap: 20px;
+}
+
 .article {
-  margin-bottom: 1rem;
+  border: 2px solid lightgray;
+  align-items: center;
+  display: flex;
+  margin-bottom: 15px;
+}
+
+.article-2 {
+  border: 2px solid lightgray;
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+  padding: 15px;
+}
+
+.article__thumbnail {
+  margin-left: 10px;
+}
+
+.article__content {
+  margin: 20px;
+  overflow: hidden;
 }
 
 .article__title {
@@ -209,6 +262,7 @@ p {
 
 .facebook-link {
   color: var(--orange-dark);
+  margin-left: auto;
 }
 
 /* Sidebar */
@@ -217,6 +271,7 @@ p {
   display: flex;
   flex-direction: column;
   min-width: 350px;
+  width: 600px;
 }
 
 /* Footer */