diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 3201a61..872614a 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -3,6 +3,14 @@ import { styled } from "zstyl";
 
 const Heading = styled.h1`
   font-size: 3.25em;
+
+  @media (max-width: 560px) {
+    font-size: 2.5em;
+  }
+
+  @media (max-width: 450px) {
+    font-size: 1.7em;
+  }
 `;
 
 const Link = styled.a`
diff --git a/app/pages/index.tsx b/app/pages/index.tsx
index 3874bd1..0947c5e 100644
--- a/app/pages/index.tsx
+++ b/app/pages/index.tsx
@@ -13,6 +13,10 @@ const Heading1 = styled.h1`
   text-align: center;
   font-size: 4.2em;
   border: none;
+
+  @media (max-width: 560px) {
+    font-size: 2.5em;
+  }
 `;
 
 const Heading2 = styled.h2`