diff --git a/app/app.ejs b/app/app.ejs
index fbf9ea9f..16ce7e4a 100644
--- a/app/app.ejs
+++ b/app/app.ejs
@@ -14,6 +14,9 @@
             height: calc(100% - 22px);
             background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
         }
+        #main[overlay] {
+            filter: blur(3px) contrast(0.9) brightness(1.0);
+        }
     </style>
 </head>
 <body>
@@ -23,5 +26,6 @@
         <% include login.ejs %>
         <% include landing.ejs %>
     </div>
+    <% include overlay.ejs %>
 </body>
 </html>
\ No newline at end of file
diff --git a/app/overlay.ejs b/app/overlay.ejs
new file mode 100644
index 00000000..89b2fd09
--- /dev/null
+++ b/app/overlay.ejs
@@ -0,0 +1,70 @@
+<style type="text/css">
+
+    #overlayContainer {
+        position: absolute;
+        top: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: calc(100% - 22px);
+        background: rgba(0, 0, 0, 0.50);
+    }
+
+    #overlayContent {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        width: 300px;
+        height: 35%;
+        box-sizing: border-box;
+        padding: 15px 0px;
+        /* background-color: #424242; */
+        text-align: center;
+    }
+
+    #overlayTitle {
+        font-family: 'Avenir Medium';
+        font-size: 20px;
+        color: #fff;
+        font-weight: bold;
+        letter-spacing: 1px;
+    }
+
+    #overlayDesc {
+        font-family: 'Avenir Book';
+        font-size: 12px;
+        color: #fff;
+        font-weight: bold;
+    }
+
+    #overlayAcknowledge {
+        background: none;
+        border: 1px solid #ffffff;
+        color: white;
+        font-family: 'Avenir Medium';
+        font-weight: bold;
+        border-radius: 2px;
+        width: 75px;
+        cursor: pointer;
+        transition: 0.25s ease;
+    }
+    #overlayAcknowledge:hover,
+    #overlayAcknowledge:focus {
+        box-shadow: 0px 0px 10px 0px #fff;
+        outline: none;
+    }
+    #overlayAcknowledge:active {
+        border-color: rgba(255, 255, 255, 0.75);
+        color: rgba(255, 255, 255, 0.75);
+    }
+</style>
+<div id="overlayContainer" style="display: none;">
+    <div id="overlayContent">
+        <span id="overlayTitle">LOGIN FAILED:<br>INVALID CREDENTIALS</span>
+        <span id="overlayDesc">Either the email or password you supplied is invalid. Please ensure everything is correct and try again.</span>
+        <button id="overlayAcknowledge">Try Again</button>
+    </div>
+</div>
\ No newline at end of file
