diff --git a/app/assets/images/adopter_application.png b/app/assets/images/adopter_application.png
new file mode 100644
index 000000000..4c49259f5
Binary files /dev/null and b/app/assets/images/adopter_application.png differ
diff --git a/app/assets/images/foster_application.png b/app/assets/images/foster_application.png
new file mode 100644
index 000000000..7ae1eb325
Binary files /dev/null and b/app/assets/images/foster_application.png differ
diff --git a/app/assets/images/invite_foster.png b/app/assets/images/invite_foster.png
new file mode 100644
index 000000000..a6d996b09
Binary files /dev/null and b/app/assets/images/invite_foster.png differ
diff --git a/app/assets/images/invite_staff.png b/app/assets/images/invite_staff.png
new file mode 100644
index 000000000..4b9415747
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 94d72ad8c..c6eeec18e 100644
--- a/app/views/root/index.html.erb
+++ b/app/views/root/index.html.erb
@@ -127,8 +127,8 @@
         </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 class = "mb-4 mb-lg-0 bg-gray-200 rounded-4 overflow-hidden">
+            <%= image_tag "adopter_application.png", alt: "adopter application screen", class: "img-fluid w-100 h-75"%>
         </div>
       </div>
         <div class = "col-lg-6 col-md-12 col-12 mt-4 mt-lg-0 d-none d-md-block">
@@ -194,8 +194,8 @@
         </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 class = "mb-4 mb-lg-0 bg-gray-200 rounded-4 overflow-hidden">
+          <%= image_tag "invite_foster.png", alt: "foster invite screen", class: "img-fluid w-100 h-75"%>
         </div>
       </div>
     </div>
@@ -212,8 +212,8 @@
           </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 class = "mb-4 mb-lg-0 bg-gray-200 rounded-4 overflow-hidden">
+          <%= image_tag "invite_staff.png", alt: "staff invite screen", class: "img-fluid w-100 h-75"%>
         </div>
       </div>
       <div class = "col-lg-6 col-md-12 col-12 mt-4 mt-lg-0 d-none d-md-block">
@@ -278,8 +278,8 @@
         </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 class = "mb-4 mb-lg-0 bg-gray-200 rounded-4 overflow-hidden">
+          <%= image_tag "foster_application.png", alt: "hero", class: "img-fluid w-100 h-75"%>
         </div>
       </div>
     </div>