diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig
index ca94484..d6e8446 100644
--- a/source/_layouts/default.html.twig
+++ b/source/_layouts/default.html.twig
@@ -6,14 +6,14 @@
         <link href="/build/css/app.css" rel="stylesheet">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     </head>
-    <body class="text-black bg-grey-lightest font-sans">
+    <body class="text-black bg-grey-lightest font-sans text-sm sm:text-base">
         <div id="root">
             <div class="bg-grey-darkest text-white antialiased block pt-4 pb-10">
                 <div class="container mx-auto px-4">
                     <div class="text-center text-4xl">
-                        <img src="/assets/images/logo.png" alt="" class="w-24 mb-4">
-                        <p class="uppercase font-bold tracking-wide mb-2">Chris Rees Academy</p>
-                        <p class="uppercase font-bold tracking-wide text-5xl">Cardiff</p>
+                        <img src="/assets/images/logo.png" alt="" class="w-16 sm:w-24 mb-3 sm:mb-4">
+                        <p class="uppercase font-bold tracking-wide mb-2 text-2xl sm:text-4xl">Chris Rees Academy</p>
+                        <p class="uppercase font-bold tracking-wide text-3xl sm:text-5xl">Cardiff</p>
                     </div>
                 </div>
             </div>
@@ -30,8 +30,8 @@
             </div>
 
             <div class="container mx-auto px-4">
-                <div class="leading-normal pt-16 pb-24">
-                    <h1 class="uppercase text-red text-center mb-12 text-bold tracking-wide">
+                <div class="leading-normal pt-8 sm:pt-16 pb-16 sm:pb-24">
+                    <h1 class="uppercase text-red text-center mb-6 sm:mb-12 text-bold tracking-wide">
                         {{ page.title }}
                     </h1>
 
