diff --git a/index.html b/index.html
index 76254c13..600af73d 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,7 @@
           </ul>
         </div>
 
-        <button>Donate Now</button>
+        <button class="donate-btn">Donate Now</button>
 
     </div>
 
@@ -60,18 +60,21 @@
 
           <div class="hero">
             <h1>Bikes for Refugees</h1>
+            <!-- <img src="/images/header-bike.jpg" alt="Bycicle" /> -->
             <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="donate-btn">Donate a bike today</button>
+              <button class="volunteer-btn">Volunteer</button>
+            </div>
           </div>
 
           <div>
             <h2 class="heading-underline">Learn more</h2>
 
-            <div>
+            <div class="articles">
               <div class="article">
                 <h3 class="article__title">Why do refugees need bikes?</h3>
                 <p class="article__summary">
@@ -111,8 +114,8 @@ <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="spring-fundraisers_thumbnail"
             />
             <div class="article__content">
               <h3 class="article__title">
@@ -128,7 +131,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 +144,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..27c1c656 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -63,12 +63,16 @@ p {
 .navigation__list {
   display: flex;
   list-style: none;
+  ;
 }
 
 .navigation__item {
   padding: 0.5rem 0;
+  margin-right: 1.5rem;
+  
 }
 
+
 .navigation__link {
   color: var(--grey-dark);
   font-weight: 600;
@@ -76,6 +80,9 @@ p {
   text-decoration: none;
 }
 
+li:hover .navigation__link {
+  color: var(--orange-dark);
+}
 
 /* Text styles */
 
@@ -95,7 +102,40 @@ p {
 
 /* Buttons */
 
-  /* INSERT BUTTON STYLES HERE */
+.donate-btn {
+  background-color: var(--orange-dark);
+  color: var(--white);
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  border-radius: 10px;
+  max-width: fit-content;
+  position: relative;
+  margin-right: 1rem;
+  
+  
+}
+.donate-btn:hover {
+  background-color: var(--orange-light);
+  color: var(--orange-dark);
+}
+.volunteer-btn {
+  background-color: var(--white);
+  color: var(--orange-dark);
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  border-radius: 10px;
+  max-width: fit-content;
+  position: relative;
+  margin-right: 1rem;
+}
+.volunteer-btn:hover {
+  background-color: var(--orange-dark);
+  color: var(--white);
+}
 
 
 /* Content */
@@ -120,26 +160,38 @@ p {
 /* hero */
 
 .hero {
-  background-image: url("header-bike.jpg");
+  background-image: url("/images/header-bike.jpg");
   background-color: var(--grey-light);
+  height: 350px;
+  padding-left: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center; 
+  
 }
 
 .hero h1 {
   margin-bottom: 1rem;
   font-size: 2.5rem;
+  color: var(--white);
 }
 
 .hero p {
   font-size: 1.2rem;
   margin-bottom: 2rem;
+  color: var(--white);
 }
 
-
+.hero img {
+  width: 100%;
+  height: auto;
+}
 /* Headings */
 
 .heading-underline {
   position: relative;
   margin-bottom: 2rem;
+  padding-top: 2rem;
   padding-bottom: 0.5rem;
   border-bottom: 2px solid var(--orange-light);
   font-size: 1rem;
@@ -161,8 +213,18 @@ p {
 
 /* Article */
 
+.articles{
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 2rem;
+}
+
 .article {
   margin-bottom: 1rem;
+  border: var(--orange-light) 2px solid;
+  border-radius: 5px;
+  padding: 5px;
+  margin: 10px;
 }
 
 .article__title {
@@ -184,6 +246,7 @@ p {
 .article__thumbnail {
   object-fit: contain;
   width: 5rem;
+  padding: 1rem;
 }
 
 .article__read-more {
@@ -219,6 +282,14 @@ p {
   min-width: 350px;
 }
 
+.sidebar .article
+{
+  margin-bottom: 1rem;
+  border: var(--orange-light) 2px solid;
+  border-radius: 5px;
+  padding: 5px;
+  display: flex;
+}
 /* Footer */
 
 .footer {