diff --git a/public/css/splash.css b/public/css/splash.css
new file mode 100644
index 0000000..cffdb78
--- /dev/null
+++ b/public/css/splash.css
@@ -0,0 +1,59 @@
+@import url('https://fonts.googleapis.com/css?family=Staatliches');
+
+body {
+ margin: 0;
+ font-family: 'Staatliches', cursive;
+}
+
+.loader {
+ position: fixed;
+ left: 0;
+ top: 0;
+ background: #e6e2dd;
+ width: 100%;
+ height: 100vh;
+ animation: backgroundChange .5s linear 3.5s forwards;
+}
+
+.load-text {
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ position: absolute;
+ font-size: 10vmax;
+ width: fit-content;
+ display: flex;
+ animation: colorChange .5s linear 3.5s forwards;
+}
+
+.loaded-text {
+ transform: scale(1.5);
+ animation: scaleText .5s linear 1s forwards;
+}
+
+.loading-text {
+ width: 0;
+ color: #d48369;
+ overflow: hidden;
+ animation: expand .5s linear 2s forwards;
+}
+
+@keyframes scaleText {
+ from {transform: scale(1.5)}
+ to {transform: scale(1)}
+}
+
+@keyframes expand {
+ from {width: 0;}
+ to {width: 35vmax;}
+}
+
+@keyframes backgroundChange {
+ from {background-color: #e6e2dd}
+ to {background-color: #373a36}
+}
+
+@keyframes colorChange {
+ from {color: #373a36}
+ to {color: #e6e2dd}
+}
diff --git a/views/splash.html b/views/splash.html
new file mode 100644
index 0000000..b0888a1
--- /dev/null
+++ b/views/splash.html
@@ -0,0 +1,19 @@
+
+
+
+
+ Splash Screen
+
+
+
+
+
+
+
+
+