diff --git a/app/index.html b/app/index.html
index 4142b42..f1c87a8 100644
--- a/app/index.html
+++ b/app/index.html
@@ -32,9 +32,42 @@
               #-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
           }
         </style>
+        <style>
+          #splash {
+            z-index: 1000000;
+            background-color: #303030;
+            display: block;
+            width: 100vw;
+            height: 100vh;
+            position: fixed;
+            opacity: 1;
+          }
+          #splash1 {
+            margin: 37vh auto 0 auto;
+            height: 25vh;
+            width: 25vh;
+            background-image:url('./rings.svg');
+            background-size: cover;
+          }
+          #splash2 {
+            margin: 0 auto;
+          }
+          @keyframes unsplash {
+            0%   {opacity: 1;}
+            100% {opacity: 0;}
+          }
+        </style>
         <script src="http://localhost:35729/livereload.js"></script>
     </head>
     <body>
+        <div id="splash"><div id="splash1"></div>
+          <!-- <div id="splash1">
+            <div id="splash2" style="color: #ddd" class="la-square-jelly-box la-3x">
+              <div>a</div>
+              <div>ads</div>
+            </div> -->
+          </div>
+        </div>
         <div id="app" style="font:-webkit-control"></div>
         <script src="./build/bundle.js"></script>
     </body>
diff --git a/app/rings.svg b/app/rings.svg
new file mode 100644
index 0000000..ad9cb74
--- /dev/null
+++ b/app/rings.svg
@@ -0,0 +1,42 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="45" height="45" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+    <g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">
+        <circle cx="22" cy="22" r="6" stroke-opacity="0">
+            <animate attributeName="r"
+                 begin="1.5s" dur="3s"
+                 values="6;22"
+                 calcMode="linear"
+                 repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                 begin="1.5s" dur="3s"
+                 values="1;0" calcMode="linear"
+                 repeatCount="indefinite" />
+            <animate attributeName="stroke-width"
+                 begin="1.5s" dur="3s"
+                 values="2;0" calcMode="linear"
+                 repeatCount="indefinite" />
+        </circle>
+        <circle cx="22" cy="22" r="6" stroke-opacity="0">
+            <animate attributeName="r"
+                 begin="3s" dur="3s"
+                 values="6;22"
+                 calcMode="linear"
+                 repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                 begin="3s" dur="3s"
+                 values="1;0" calcMode="linear"
+                 repeatCount="indefinite" />
+            <animate attributeName="stroke-width"
+                 begin="3s" dur="3s"
+                 values="2;0" calcMode="linear"
+                 repeatCount="indefinite" />
+        </circle>
+        <circle cx="22" cy="22" r="8">
+            <animate attributeName="r"
+                 begin="0s" dur="1.5s"
+                 values="6;1;2;3;4;5;6"
+                 calcMode="linear"
+                 repeatCount="indefinite" />
+        </circle>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/src/index.tsx b/app/src/index.tsx
index 97554d1..d7e5a64 100644
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -29,6 +29,12 @@ const theme = createMuiTheme({
   typography: { useNextVariants: true },
 })
 
+const splash = document.getElementById('splash')
+if (splash) {
+  splash.style.animation = 'unsplash 1s ease-out 0s 1 normal forwards'
+  setTimeout(() => splash.remove(), 1100)
+}
+
 ReactDOM.render(
     <MuiThemeProvider theme={theme}>
       <Provider store={store}>
