diff --git a/backend/database/seeders/SetSeeder.php b/backend/database/seeders/SetSeeder.php
index 5c70d6d..b2ca3b5 100644
--- a/backend/database/seeders/SetSeeder.php
+++ b/backend/database/seeders/SetSeeder.php
@@ -18,7 +18,7 @@ class SetSeeder extends Seeder
             description: 'Baderech HaAvodah is a way of living - '
                 . 'a structured path for inner and outer growth, '
                 . 'spiritual refinement, and personal development.',
-            iconImageUrl: '/assets/baderech-haavodah-icon.svg',
+            iconImageUrl: '/assets/baderech-haavodah-icon.png',
         ));
     }
 }
diff --git a/backend/tests/Feature/SetsEndpointTest.php b/backend/tests/Feature/SetsEndpointTest.php
index 3cdb2cd..f1ab5cc 100644
--- a/backend/tests/Feature/SetsEndpointTest.php
+++ b/backend/tests/Feature/SetsEndpointTest.php
@@ -17,7 +17,7 @@ class SetsEndpointTest extends TestCase
         $baderechSet = $setRepository->create(new CreateSetDto(
             name: 'Baderech HaAvodah',
             description: 'Baderech HaAvodah is a way of living',
-            iconImageUrl: '/assets/baderech-haavodah-icon.svg',
+            iconImageUrl: '/assets/baderech-haavodah-icon.png',
         ));
         $dailyLearningSet = $setRepository->create(new CreateSetDto(
             name: 'Daily Learning',
diff --git a/frontend/rabbi_gerzi/public/assets/baderech-haavodah-icon.png b/frontend/rabbi_gerzi/public/assets/baderech-haavodah-icon.png
new file mode 100644
index 0000000..72603bb
Binary files /dev/null and b/frontend/rabbi_gerzi/public/assets/baderech-haavodah-icon.png differ
diff --git a/frontend/rabbi_gerzi/public/assets/baderech-haavodah-icon.svg b/frontend/rabbi_gerzi/public/assets/baderech-haavodah-icon.svg
deleted file mode 100644
index 9a03f05..0000000
--- a/frontend/rabbi_gerzi/public/assets/baderech-haavodah-icon.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="160"
-  height="160"
-  viewBox="0 0 160 160"
-  fill="none"
->
-  <circle cx="80" cy="80" r="68" stroke="black" stroke-width="3" />
-  <circle cx="82" cy="42" r="11" stroke="black" stroke-width="2.5" />
-  <path d="M68 58h35c10 0 17 7 17 17v23" stroke="black" stroke-width="2.5" />
-  <path d="M72 62v66c0 5 4 9 9 9" stroke="black" stroke-width="2.5" />
-  <path d="M81 137c5 0 9-4 9-9l2-28" stroke="black" stroke-width="2.5" />
-  <path d="M92 100l2 28c0 5 4 9 9 9" stroke="black" stroke-width="2.5" />
-  <path d="M103 137c5 0 9-4 9-9V77" stroke="black" stroke-width="2.5" />
-  <path d="M68 58c-9-5-14-14-14-27" stroke="black" stroke-width="2.5" />
-  <path d="M54 31c0-5 3-8 7-8s7 3 7 8" stroke="black" stroke-width="2.5" />
-  <path d="M120 75v23c0 4-3 7-7 7" stroke="black" stroke-width="2.5" />
-</svg>
diff --git a/frontend/rabbi_gerzi/src/views/MediaPage.vue b/frontend/rabbi_gerzi/src/views/MediaPage.vue
index 4e3be4d..314d3d3 100644
--- a/frontend/rabbi_gerzi/src/views/MediaPage.vue
+++ b/frontend/rabbi_gerzi/src/views/MediaPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { onMounted } from 'vue'
+import SiteHeader from '@/components/SiteHeader.vue'
 import { useMediaSetsStore } from '@/stores/mediaSets'
 
 const mediaSetsStore = useMediaSetsStore()
@@ -13,6 +14,7 @@ onMounted(() => {
 
 <template>
   <div class="media-page">
+    <SiteHeader />
     <main class="media-page__main" data-cy="media-page">
       <header class="media-page__header">
         <h1 class="media-page__heading">Torah Media</h1>
@@ -30,7 +32,7 @@ onMounted(() => {
         <p v-else-if="sets.length === 0" class="media-page__status">
           No media sets are available yet.
         </p>
-        <div v-else class="media-page__rail">
+        <div v-else class="media-page__grid" data-cy="media-set-grid">
           <article
             v-for="mediaSet in sets"
             :key="mediaSet.id"
@@ -62,12 +64,11 @@ onMounted(() => {
 
 .media-page__main {
   min-height: 100vh;
-  padding: 1.75rem 0 2.5rem;
+  padding: 5.1rem 4.15rem 5rem;
 }
 
 .media-page__header {
-  padding: 0 3.75rem;
-  text-align: right;
+  text-align: center;
 }
 
 .media-page__heading {
@@ -80,7 +81,7 @@ onMounted(() => {
 }
 
 .media-page__sets {
-  margin-top: 5.3rem;
+  margin-top: 5rem;
 }
 
 .media-page__status {
@@ -99,16 +100,15 @@ onMounted(() => {
   border-color: #e5b8b8;
 }
 
-.media-page__rail {
-  display: flex;
-  gap: 3.75rem;
-  overflow-x: auto;
-  padding: 0 3.75rem 2.5rem;
-  scrollbar-width: thin;
+.media-page__grid {
+  display: grid;
+  max-width: 1745px;
+  margin: 0 auto;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2.7rem 3.75rem;
 }
 
 .media-page__card {
-  flex: 0 0 min(77.6vw, 843px);
   min-height: 448px;
   padding: 3.1rem 3rem 2.7rem;
   background: var(--color-white);
@@ -145,24 +145,19 @@ onMounted(() => {
 
 @media (max-width: 768px) {
   .media-page__main {
-    padding-top: 1.25rem;
-  }
-
-  .media-page__header {
-    padding: 0 1rem;
+    padding: 3rem 1rem;
   }
 
   .media-page__sets {
     margin-top: 3rem;
   }
 
-  .media-page__rail {
+  .media-page__grid {
+    grid-template-columns: 1fr;
     gap: 1rem;
-    padding: 0 1rem 2rem;
   }
 
   .media-page__card {
-    flex-basis: calc(100vw - 2rem);
     min-height: 390px;
     padding: 2.5rem 1.5rem;
   }