diff --git a/app/assets/images/adoption_applications.png b/app/assets/images/adoption_applications.png
new file mode 100644
index 000000000..c752959ad
Binary files /dev/null and b/app/assets/images/adoption_applications.png differ
diff --git a/app/assets/images/invite_fosterers.png b/app/assets/images/invite_fosterers.png
new file mode 100644
index 000000000..3420e3097
Binary files /dev/null and b/app/assets/images/invite_fosterers.png differ
diff --git a/app/assets/images/invite_staff.png b/app/assets/images/invite_staff.png
new file mode 100644
index 000000000..94e1e1f34
Binary files /dev/null and b/app/assets/images/invite_staff.png differ
diff --git a/app/views/root/index.html.erb b/app/views/root/index.html.erb
index 5c9b8bace..27e2b4b5b 100644
--- a/app/views/root/index.html.erb
+++ b/app/views/root/index.html.erb
@@ -108,9 +108,7 @@
         </div>
       </div>
       <div class = "col-lg-6 col-md-12 col-12">
-          <div class = "mb-4 mb-lg-0 bg-gray-200 rounded-4">
           <%= image_tag "layout_graphic.png", alt: "screen_1", class: "img-fluid w-100 h-75"%>
-          </div>
       </div>
     </div>
   </div>
@@ -126,9 +124,7 @@
         </div>
       </div>
       <div class = "col-lg-6 col-md-12 col-12">
-        <div class = "mb-4 mb-lg-0 bg-gray-200 rounded-4">
-            <%= image_tag "layout_graphic_2.png", alt: "screen_2", class: "img-fluid w-100 h-75"%>
-        </div>
+          <%= image_tag "layout_graphic_2.png", alt: "screen_2", class: "img-fluid w-100 h-75"%>
       </div>
         <div class = "col-lg-6 col-md-12 col-12 mt-4 mt-lg-0 d-none d-md-block">
           <div class = "pe-lg-6 ps-lg-6" >
@@ -193,9 +189,7 @@
         </div>
       </div>
       <div class = "col-lg-6 col-md-12 col-12">
-        <div class = "mb-4 mb-lg-0 bg-gray-200 rounded-4">
-          <%= image_tag "layout_graphic_3.png", alt: "screen_3", class: "img-fluid w-100 h-75"%>
-        </div>
+        <%= image_tag "invite_fosterers.png", alt: "screen_3", class: "img-fluid w-100 h-75 rounded shadow-sm p-2"%>
       </div>
     </div>
   </div>
@@ -211,9 +205,7 @@
           </div>
       </div>
       <div class = "col-lg-6 col-md-12 col-12">
-        <div class = "mb-4 mb-lg-0 bg-gray-200 rounded-4">
-          <%= image_tag "layout_graphic_3.png", alt: "screen_3", class: "img-fluid w-100 h-75"%>
-        </div>
+        <%= image_tag "invite_staff.png", alt: "screen_3", class: "img-fluid w-100 h-75 rounded shadow-sm p-4"%>
       </div>
       <div class = "col-lg-6 col-md-12 col-12 mt-4 mt-lg-0 d-none d-md-block">
         <div class = "pe-lg-6 ps-lg-6" >
@@ -277,9 +269,7 @@
         </div>
       </div>
       <div class = "col-lg-6 col-md-12 col-12">
-        <div class = "mb-4 mb-lg-0 bg-gray-200 rounded-4">
-          <%= image_tag "layout_graphic_2.png", alt: "hero", class: "img-fluid w-100 h-75"%>
-        </div>
+        <%= image_tag "adoption_applications.png", alt: "hero", class: "img-fluid w-100 h-75 rounded shadow-sm p-4"%>
       </div>
     </div>
   </div>