diff --git a/assets/sass/_home.scss b/assets/sass/_home.scss
index 44a8f86..22a4822 100644
--- a/assets/sass/_home.scss
+++ b/assets/sass/_home.scss
@@ -6,11 +6,7 @@
     text-align: center;
 
     @media (max-width: 768px) {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        min-height: 80vh;
-        padding: 96px 0;
+        padding: 48px 0 72px 0;
     }
 
     .hero-text  {
diff --git a/content/dialect-mobile-dark.png b/content/dialect-mobile-dark.png
new file mode 100644
index 0000000..4927cad
Binary files /dev/null and b/content/dialect-mobile-dark.png differ
diff --git a/content/dialect-mobile.png b/content/dialect-mobile.png
new file mode 100644
index 0000000..d137620
Binary files /dev/null and b/content/dialect-mobile.png differ
diff --git a/layouts/index.html b/layouts/index.html
index 06139e2..388234c 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -5,6 +5,8 @@
         <h2 class="hero-text" id="heroText">{{ index .Site.Data.hero 0 }}</h2>
 
         <picture class="screenshot">
+            <source srcset="dialect-mobile-dark.png" media="(max-width: 480px) and (prefers-color-scheme: dark)">
+            <source srcset="dialect-mobile.png" media="(max-width: 480px)">
             <source srcset="dialect-dark.png" media="(prefers-color-scheme: dark)">
             <img src="dialect.png" alt="Dialect Window">
         </picture>