diff --git a/index.html b/index.html
index 76254c13..e652d1e9 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
 
         <a href="#">
           <img
-            src="images/bikes-for-refugees_logo.jpg"
+            src="https://raw.githubusercontent.com/Safia202286/bikes-for-refugees/refs/heads/main/images/bikes-for-refugees_logo.jpg"
             alt="Logo for Bikes for Refugees Scotland"
             class="header__logo"
           />
@@ -71,7 +71,7 @@ <h1>Bikes for Refugees</h1>
           <div>
             <h2 class="heading-underline">Learn more</h2>
 
-            <div>
+            <div class="article-container">
               <div class="article">
                 <h3 class="article__title">Why do refugees need bikes?</h3>
                 <p class="article__summary">
@@ -108,13 +108,12 @@ <h3 class="article__title">How can I help?</h3>
         <div class="sidebar">
           <h2 class="heading-underline">Upcoming events</h2>
 
-          <div class="article">
+          <div class="article-right-panel">
+            <div class="article__content">
             <img
               class="article__thumbnail"
-              src="spring-fundraisers_thumbnail.jpg"
-              alt=""
-            />
-            <div class="article__content">
+              src="https://raw.githubusercontent.com/Safia202286/bikes-for-refugees/refs/heads/main/images/spring-fundraisers_thumbnail.jpg" alt="spring-fundraisers_thumbnail">
+            <div class="article__text">
               <h3 class="article__title">
                 <a class="article__title-link" href="#">Join us for our Spring fundraisers</a>
               </h3>
@@ -124,28 +123,22 @@ <h3 class="article__title">
               </p>
             </div>
           </div>
+          </div>
 
-          <div class="article">
-            <img
-              class="article__thumbnail"
-              src="bikes-for-refugees_logo.jpg"
-              alt=""
-            />
-            <div class="article__content">
+          <div class="article-right-panel">
+          <div class="article__content">
+            <img src="https://raw.githubusercontent.com/Safia202286/bikes-for-refugees/refs/heads/main/images/bikes-for-refugees_logo.jpg" alt="bikes-for-refugees_logo" class="article__thumbnail">
               <h3 class="article__title">
                 <a class="article__title-link" href="#">Bike dropoff event in Edinburgh on May 11</a>
               </h3>
             </div>
           </div>
 
-          <div class="article">
-            <img
-              class="article__thumbnail"
-              src="edinburgh-damascus_thumbnail.png"
-              alt=""
-            />
-            <div class="article__content">
-              <h3 class="article__title">
+          <div class="article-right-panel">
+          <div class="article__content">
+            <img src="https://raw.githubusercontent.com/Safia202286/bikes-for-refugees/refs/heads/main/images/edinburgh-damascus_thumbnail.png" alt="edinburgh-damascus_thumbnail" class="article__thumbnail">
+              <div class="article__text">
+            <h3 class="article__title">
                 <a class="article__title-link" href="#">Help us cycle 4,797km</a>
               </h3>
               <p class="article__summary">
@@ -154,6 +147,7 @@ <h3 class="article__title">
               </p>
             </div>
           </div>
+          </div>
 
           <a
             href="https://www.facebook.com/BikesforRefugeesScotland/events/?ref=page_internal"
diff --git a/styles/style.css b/styles/style.css
index 4d1c088e..6d111e9d 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -67,6 +67,7 @@ p {
 
 .navigation__item {
   padding: 0.5rem 0;
+  margin-right: 1rem;
 }
 
 .navigation__link {
@@ -81,7 +82,8 @@ p {
 
 .text-highlight {
   color: var(--orange-dark);
-  font-weight: 600;
+  font-weight: bold;
+  color: #993513; /* darker orange */
 }
 
 .arrow-right {
@@ -94,19 +96,27 @@ p {
 
 
 /* Buttons */
-
-  /* INSERT BUTTON STYLES HERE */
-
+button {
+        background-color: var(--orange-dark);
+        color: var(--white);
+        font-weight: bold;
+        border: none;
+        padding: 0.75rem 1.25rem;
+        margin-right: 0.5rem;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+button:hover {
+        background-color: #a7441f;
+      }
 
 /* Content */
-
 .content {
   display: flex;
   flex-direction: column;
 }
 
 /* Alert */
-
 .alert {
   background-color: var(--orange-light);
   border-left: 4px solid var(--orange-dark);
@@ -115,28 +125,32 @@ p {
   line-height: 1.3;
   padding: 1.5rem 1rem;
   margin-bottom: 2rem;
+  color: #1a1a1a; /* darker text */
 }
 
 /* hero */
-
 .hero {
-  background-image: url("header-bike.jpg");
+  background-image: url("https://raw.githubusercontent.com/Safia202286/bikes-for-refugees/refs/heads/main/images/header-bike.jpg");
+  background-size: cover;
+  background-position: center;
   background-color: var(--grey-light);
+  padding: 70px;
 }
 
 .hero h1 {
+  color: white;
   margin-bottom: 1rem;
   font-size: 2.5rem;
 }
 
 .hero p {
+  color: white;
   font-size: 1.2rem;
   margin-bottom: 2rem;
 }
 
 
 /* Headings */
-
 .heading-underline {
   position: relative;
   margin-bottom: 2rem;
@@ -158,12 +172,58 @@ p {
   background: var(--orange-dark);
 }
 
+/* Container for side-by-side articles*/
+      .article-container {
+        display:flex;
+        flex-wrap: wrap; /* Allows wrapping on smaller screens */
+        gap:2rem; /* Space between article boxes */
+        margin-bottom: 2rem;
+        justify-content: space-between;
+        
+      }
 
-/* Article */
-
+/* Individual articles */
 .article {
+  flex: 1 1 45%; /*lows two items per row with some spacing,Flex-grow, flex-shrink, flex-basis */
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border: 1px solid #e4e4e4; /* Light grey border */
+  border-radius: 4px; /* Optional: soft rounded corners */
+  padding: 1rem;
+  background-color: #fff; /* Optional: white background for contrast */
+  box-sizing: border-box;
   margin-bottom: 1rem;
-}
+      }
+  
+/* right panel articles */
+      .article-right-panel {
+        display: inline-block;
+        border: 1px solid #e4e4e4; /* Light grey border */
+        border-radius: 4px; /* Optional: soft rounded corners */
+        padding: 1rem;
+        background-color: #fff; /* Optional: white background for contrast */
+        box-sizing: border-box;
+        margin-bottom: 1rem; 
+      }
+
+.article__thumbnail {
+        width: 120px;   /* adjust size as needed */
+        height: auto;
+        border-radius: 8px; /* optional: rounded corners */
+        object-fit: contain;
+      }
+
+ .article__content {
+       display: flex;
+       align-items: center;
+       gap: 20px; /* space between image and text */
+      }
+
+  .article__text {
+        display: flex;
+        flex-direction: column; /* stack title and summary*/
+      }   
 
 .article__title {
   margin-bottom: 0.5rem;
@@ -181,11 +241,6 @@ p {
   margin-bottom: 1rem;
 }
 
-.article__thumbnail {
-  object-fit: contain;
-  width: 5rem;
-}
-
 .article__read-more {
   margin-top: 0;
 }
@@ -209,10 +264,10 @@ p {
 
 .facebook-link {
   color: var(--orange-dark);
+  text-align: right;
 }
 
 /* Sidebar */
-
 .sidebar {
   display: flex;
   flex-direction: column;
@@ -220,7 +275,6 @@ p {
 }
 
 /* Footer */
-
 .footer {
   margin-top: 2rem;
 }