diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index e69de29bb..000000000
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 000000000..099c95d6d
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/maintenance.html b/public/maintenance.html
index 928087963..cbe1129de 100644
--- a/public/maintenance.html
+++ b/public/maintenance.html
@@ -2,23 +2,37 @@
 <html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet"
-          href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
-          integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
-          crossorigin="anonymous"
-    >
-    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.3.45/css/materialdesignicons.min.css">
-    <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
+    <title>Planorama Maintenance</title>
+    <style type="text/css">
+      body {
+        background-color: white;
+        color: #2c37a1;
+        width: 100%;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 14px;
+      }
 
-    <script src="//cdn.ckeditor.com/4.18.0/standard/ckeditor.js"></script>
+      .container {
+        margin: 0 auto;
+        max-width: 600px;
+      }
 
-    <title>Planorama Maintenance</title>
+      .logo {
+        margin-bottom: 2.5rem;
+      }
+
+      .warning-icon {
+        float: left;
+        margin-right: 1rem;
+      }
+    </style>
   </head>
   <body>
-    <div class="container-fluid">
-      <div class="row">
-        TODO: we some text in here for maintance and the page need some work UI wise.
-      </div>
+    <div class="container">
+      <img src="./planorama_logo_transparent.png" alt="A green and purple circus tent with the words Planorama: Convention Planning"  width="600px" class="logo" />
+      <h1 class="header">Down for Maintenance</h1>
+      <img src="./warning_triangle.png" height="34" alt="triangle with exclamation point inside" class="warning-icon"/>
+      <p class="text">We apologize for any inconvenience. Rest assured, your data is all safe. We'll be done soon; please check back in a few minutes.</p>
     </div>
   </body>
 </html>
diff --git a/public/planorama_logo_transparent.png b/public/planorama_logo_transparent.png
new file mode 100644
index 000000000..2ecf74126
Binary files /dev/null and b/public/planorama_logo_transparent.png differ
diff --git a/public/warning_triangle.png b/public/warning_triangle.png
new file mode 100644
index 000000000..c5805812b
Binary files /dev/null and b/public/warning_triangle.png differ
