diff --git a/spotifyvis/static/spotifyvis/scripts/index.js b/spotifyvis/static/spotifyvis/scripts/index.js
new file mode 100644
index 0000000..cfac1d1
--- /dev/null
+++ b/spotifyvis/static/spotifyvis/scripts/index.js
@@ -0,0 +1,42 @@
+document.getElementById("login-btn").addEventListener("click", function() {
+    let httpRequest = new XMLHttpRequest();
+
+    /*
+     * Handler for the response
+     */
+    httpRequest.onreadystatechange = function() {
+        if (httpRequest.readyState === XMLHttpRequest.DONE) {
+            if (httpRequest.status === 200) {
+                // hide the login button
+                document.getElementById('login').setAttribute("display", "none");
+
+                let responseData = JSON.parse(httpRequest.responseText);
+                let dataList = document.getElementById("data-list");
+                
+
+                for (let key in responseData) {
+                    let newLi = document.createElement("li");
+                    let innerList = document.createElement("ul");
+                    
+                    let dataLabel = document.createElement("li");
+                    dataLabel.innerText = key;
+
+                    let dataValue = document.createElement("li");
+                    dataValue.innerText = responseData[key];
+
+                    innerList.appendChild(dataLabel);
+                    innerList.appendChild(dataValue);
+
+                    newLi.appendChild(innerList);
+                    dataList.appendChild(newLi);
+                }
+            } else {
+                alert("There was a problem with the login request, please try again!");
+            }
+        }
+    }
+
+    httpRequest.open('GET', '/login', true);
+    httpRequest.send();
+});
+
diff --git a/spotifyvis/templates/spotifyvis/index.html b/spotifyvis/templates/spotifyvis/index.html
index e410bf5..32d6db9 100644
--- a/spotifyvis/templates/spotifyvis/index.html
+++ b/spotifyvis/templates/spotifyvis/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+{% load static %}
 <html>
   <head>
     <title>User Login</title>
@@ -11,14 +12,25 @@
         width: 500px;
       }
     </style>
+
   </head>
 
   <body>
     <div class="container">
       <div id="login">
         <h1>This is an example of the Authorization Code flow</h1>
-        <a href="/login" class="btn btn-primary">Log in with Spotify</a>
+        <a href="/login" class="btn btn-primary">Log In (Original)</a>
+        <button id="login-btn">Log In</button>
+      </div>
+
+      <div id="data-container">
+        <ul id="data-list">
+
+        </ul>
       </div>
     </div>
+
+
+    <script src="{% static 'spotifyvis/scripts/index.js' %}"></script>
   </body>
 </html>
