diff --git a/static/browser-not-supported.html b/static/browser-not-supported.html
index d353e170..d8c893a5 100644
--- a/static/browser-not-supported.html
+++ b/static/browser-not-supported.html
@@ -1,29 +1,126 @@
-<html style="height: 100vh; overflow: hidden;">
-<head>
-	<link rel='stylesheet' href='https://use.typekit.net/qhb0geh.css'/>
-	<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:300'/>
-</head>
-	<body style="box-sizing: border-box; margin: 0;">
-		<header style="box-sizing: border-box; height: 60px !important; margin: 0 auto; max-width: 1200px; min-height: 60px; padding: 0 30px;">
-			<img src="./logo.png" alt="Data Portal" style="height: 40px; max-height: 40px; padding: 10px 0;">
-		</header>
-		<main style="height: calc(100vh - 60px)">
-			<div style="box-sizing: border-box; height: 76px; margin: 0 auto; max-width: 1200px; padding: 0 30px;">
-				<div style="font-family: 'din-2014', sans-serif; font-size: 34px; font-weight: 500; line-height: 38px; padding: 19px 0;">Browser Not Supported</div>
-			</div>
-			<div style="border-bottom: 1px solid rgb(204, 204, 204); height: 24px;"></div>
-			<section style="background: url(./error.png) no-repeat center center fixed; background-size: cover; height: 100%; min-height: 100%; overflow: hidden;">
-				<div style="box-sizing: border-box; margin: 0 auto; max-width: 1200px; padding: 0 30px;">
-					<div style="padding: 36px 0; width: 100%;">
-						<p style="font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 300; line-height: 28px; margin: 0 0 18px; max-width: 640px;">
-							<span>The HCA Data Portal supports recent versions of Chrome, Firefox, Safari and Edge on MacOS, Windows and Linux. If you feel you have reached this page in error, please contact </span>
-							<a href="mailto: data-help@humancellatlas.org"
-							   target="_blank"
-							   style="color: #1c7cc7; font: inherit; text-decoration: none;">data-help@humancellatlas.org</a><span>.</span>
-						</p>
-					</div>
-				</div>
-			</section>
-		</main>
-	</body>
+<style>
+    html {
+        height: 100vh;
+        overflow: hidden;
+    }
+
+    body {
+        box-sizing: border-box;
+        margin: 0;
+    }
+
+    .wrapper {
+        box-sizing: border-box;
+        margin: 0 auto;
+        max-width: 1200px;
+        padding: 0 16px;
+        width: 100%
+    }
+
+    header {
+        box-sizing: border-box;
+        height: 60px !important;
+        min-height: 60px;
+    }
+
+    header img {
+        height: 30px;
+        max-height: 40px;
+        padding: 15px 0;
+    }
+
+    main {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 60px);
+    }
+
+    main .section {
+        height: 76px;
+    }
+
+    main .section h1 {
+        font-family: "din-2014", sans-serif;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: 38px;
+        margin: 0;
+        padding: 19px 0;
+    }
+
+    main .tab {
+        border-bottom: 1px solid rgb(204, 204, 204);
+        height: 24px;
+    }
+
+    main section {
+        background: url("./error.png") no-repeat center center fixed;
+        background-size: cover;
+        flex: 1;
+        min-height: 100%;
+        overflow: hidden;
+    }
+
+    main .content {
+        padding: 36px 0;
+        width: 100%;
+    }
+
+    main section p {
+        font-family: "Montserrat", sans-serif;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 28px;
+        margin: 0 0 18px;
+        max-width: 640px;
+    }
+
+    main section p a {
+        color: #1c7cc7;
+        font: inherit;
+        text-decoration: none;
+    }
+
+    @media screen and (min-width: 400px) {
+
+        .wrapper {
+            padding: 0 30px;
+        }
+
+        main .section h1 {
+            font-size: 34px;
+        }
+    }
+</style>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>HCA Data Portal</title>
+        <base href="/">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="https://use.typekit.net/qhb0geh.css"/>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300"/>
+    </head>
+    <body>
+        <header class="wrapper">
+            <img src="./logo.png" alt="Data Portal">
+        </header>
+        <main>
+            <div class="wrapper section">
+                <h1>Browser Not Supported</h1>
+            </div>
+            <div class="tab"></div>
+            <section>
+                <div class="wrapper">
+                    <div class="content">
+                        <p>
+                            <span>The HCA Data Portal supports recent versions of Chrome, Firefox, Safari and Edge on MacOS, Windows and Linux. If you feel you have reached this page in error, please contact </span>
+                            <a href="mailto: data-help@humancellatlas.org" target="_blank">data-help@humancellatlas.org</a>
+                            <span>.</span>
+                        </p>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </body>
 </html>
