diff --git a/resources/index.html b/resources/index.html
index 8eceeed..35e6146 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -22,6 +22,43 @@
       </div>
     </div>
 
+    <!-- Login popup -->
+    <div id="loginPanel">
+      <div id="loginPopupTitle">
+        <span>
+          Login or Register
+        </span>
+        <div id="loginPopupCloseBtn" onclick="closeLoginPopup()">
+          <img src="icons/close.svg" />
+        </div>
+      </div>
+      <div id="loginPopupContentBody">
+        <div id="loginPopupContentBodyText">
+          <span>
+            Please enter a username and password to login or register.
+          </span>
+        </div>
+        <div id="loginPopupContentBodyInputs">
+          <div id="loginPopupContentBodyInputsUsername">
+            <span>
+              Username:
+            </span>
+            <input type="text" id="loginUsername" />
+          </div>
+          <div id="loginPopupContentBodyInputsPassword">
+            <span>
+              Password:
+            </span>
+            <input type="password" id="loginPassword" />
+          </div>
+        </div>
+        <div id="loginPopupContentBodyBtns">
+          <button class="playBtn" id="loginPopupContentBodyBtnLogin" onclick="login()">Login</button>
+          <button class="altBtn" id="loginPopupContentBodyBtnCancel" onclick="closeLoginPopup()">Register</button>
+        </div>
+      </div>
+    </div>
+
     <!-- Setting panel -->
     <div id="settingsPanel" style="display: none;">
       <div id="settingsTitleBar">
diff --git a/resources/style/index.css b/resources/style/index.css
index e78ac6f..048435a 100644
--- a/resources/style/index.css
+++ b/resources/style/index.css
@@ -33,7 +33,19 @@ body {
   margin-bottom: 6px;
 }
 
+#loginPanel img {
+  height: 20px;
+}
+
+#loginPopupTitle {
+  display: flex;
+  justify-content: space-between;
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
 #firstTimeNotice,
+#loginPanel,
 #settingsPanel {
   display: block;
   position: absolute;