diff --git a/public/javascript/user.js b/public/javascript/user.js
index 7ec3d31..002fd28 100644
--- a/public/javascript/user.js
+++ b/public/javascript/user.js
@@ -23,6 +23,19 @@ clearStorageBtn.addEventListener('click', () => {
     window.location = "/";
 });
 
+function startBanBtnEventListener(status) {
+// Get the Ban Button Element
+const banBtn = document.getElementById('banButton');
+
+// Add a click Event Listener to the Ban button.
+banBtn.addEventListener('click', () => {
+    if(status === 0) {
+        getuserbanned(aime_card_id)
+    } else {
+        getuserunbanned(aime_card_id)
+    }
+});
+}
 // Get the cookie string
 const cookieString = document.cookie;
 
@@ -93,6 +106,21 @@ if (userdata.ban_state !== 0) {
     max-width:800px;'>Heya! It looks like you've been banned from playing on this profile, but don't worry - you can still enjoy the game in guest mode and view this profile. However, your account won't be able to play on it anymore. If you have any questions about your ban, please contact your Network Administrator.</h3>`; // or set the HTML content with scoreDiv.innerHTML = "<p>This is some HTML content</p>;
     parent.insertBefore(wrapperDiv, parent.firstChild);
     wrapperDiv.appendChild(scoreDiv);
+    document.getElementById('BanUserArea').innerHTML = `Welcome back, developer! You found it! This is the unban button, available for self-banned users and Network admins. Click this button to reverse the ban, stop testing the features needed to be tested while banned, and get back to having fun.`;
+    let banButton = document.createElement('button');
+    banButton.id = "banButton";
+    banButton.innerHTML = "let me in... LET ME INnNnNnNnNnNnNnNnN";
+    
+    document.getElementById('BanUserArea').append(banButton);
+    startBanBtnEventListener(1) // unban user
+} else {
+    document.getElementById('BanUserArea').innerHTML = `Caution! Pressing this button will result in self-ban. Please use with care or take a break without resorting to self-banning. Remember, you can always reverse the action through the web UI.`;
+    let banButton = document.createElement('button');
+    banButton.id = "banButton";
+    banButton.innerHTML = "I Quit.";
+
+    document.getElementById('BanUserArea').append(banButton);
+    startBanBtnEventListener(0) // ban user
 }
 
 
@@ -238,6 +266,7 @@ async function userPlayLogFormatter(div, loadMoreButton) {
         /* Full Combo  */
         /* Full Sync */
         /* Player Placement */
+        
         /* Side note: Can't Do Any of this without the Image Assets / Information, So Moving on for now */
         /* setting stuff up */
         scoreDiv.setAttribute("class", "score-grid");
@@ -293,7 +322,8 @@ async function userAreaStatusFormatter(div) {
                     } else if (area.distance !== 0) {
                         let diffrence = unlock.Distance - area.distance
                         if (diffrence === 0) {
-                            areaKilometers.innerHTML = areaKilometers.innerHTML + ` Task Track! Clear the song to continue!`;
+                            console.log(unlock)
+                            areaKilometers.innerHTML = areaKilometers.innerHTML + ` Task Track!<br>Clear ${unlock.TreasureId.str} to continue!`;
                         } else {
                             areaKilometers.innerHTML = areaKilometers.innerHTML + ` ${diffrence} KM until Next Reward.`;
                         }
@@ -305,6 +335,13 @@ async function userAreaStatusFormatter(div) {
         areaGrid.append(areaKilometers)
         // Append to AreaGrid
         areaWrapper.append(areaGrid);
+        /* Details Button */
+        let areaDetails = document.createElement('div');
+        areaDetails.classList.add('areaDetails');
+        let areaDetailsButton = document.createElement('button');
+        areaDetailsButton.appendChild(document.createTextNode("Details"));
+        areaDetails.append(areaDetailsButton)
+        areaGrid.append(areaDetails)
     }
     // Place everything done here Inside the parent Div
     div.appendChild(areaWrapper)
@@ -349,7 +386,7 @@ function UserPlayLog(aime_card_id) {
             "Content-Type": "application/json"
         },
         body: JSON.stringify({
-            input: aime_card_id
+            input: input
         })
     })
         .then(response => response.json())
@@ -357,6 +394,44 @@ function UserPlayLog(aime_card_id) {
         .catch(error => console.error(error));
 }
 
+function getuserbanned(aime_card_id) {
+    const input = aime_card_id;
+    const url = "/api/getuserbanned/";
+
+    // Return the fetch promise so that it can be handled within userPlayLogFormatter
+    return fetch(url, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            input: input
+        })
+    })
+        .then(response => response.json())
+        .then(data => window.location.reload())
+        .catch(error => console.error(error));
+}
+
+function getuserunbanned(aime_card_id) {
+    const input = aime_card_id;
+    const url = "/api/getuserunbanned/";
+
+    // Return the fetch promise so that it can be handled within userPlayLogFormatter
+    return fetch(url, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            input: input
+        })
+    })
+        .then(response => response.json())
+        .then(data => window.location.reload())
+        .catch(error => console.error(error));
+}
+
 function userAreaInfomation(aime_card_id) {
     const input = aime_card_id;
     const url = "/api/getUserArea/";
@@ -368,7 +443,7 @@ function userAreaInfomation(aime_card_id) {
             "Content-Type": "application/json"
         },
         body: JSON.stringify({
-            input: aime_card_id
+            input: input
         })
     })
         .then(response => response.json())
diff --git a/public/stylesheets/user.css b/public/stylesheets/user.css
index b6a3ab2..b304d13 100644
--- a/public/stylesheets/user.css
+++ b/public/stylesheets/user.css
@@ -170,9 +170,9 @@ h4.profile {
   grid-template-columns: max-content max-content min-content;
 
   grid-template-areas:
-  'title title title'
-  'kilometers kilometers kilometersReward'
-  '. . details';
+  'title title'
+  'kilometers kilometers'
+  '. details';
 
   gap: 0px;
   height: 100%;
@@ -186,14 +186,20 @@ h4.profile {
 .areaKilometers {
   grid-area: kilometers;
 }
+
+.areaDetails {
+  grid-area: details;
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
 /* Galexion make your fucking mind up are you going to use camelCase or dashe-instead-of-spaces */
 
 .score-grid {
   display: grid;
 
   grid-template-rows: min-content min-content min-content;
-  grid-template-columns: 15em min-content min-content;
-
+  grid-template-columns: 82.5% min-content min-content;
+  grid-auto-rows: minmax(100px, auto);
   grid-template-areas:
     'label0 label0'
     'label1 label2'
@@ -211,6 +217,7 @@ h4.profile {
     width: 80%;
     grid-template-rows: max-content min-content min-content;
     grid-template-columns: 1fr 1fr 1fr;
+    grid-auto-rows: minmax(100px, auto);
     grid-template-areas:
       'label0 label0 label0'
       'label1 label2 label3'
diff --git a/readme.md b/readme.md
index 1fff88f..1ea43c7 100644
--- a/readme.md
+++ b/readme.md
@@ -42,6 +42,15 @@ Create a `config.json` file and paste this in, with paths to your instance.
 
 # Project Progress
 
+Goal for Milestone 1:
+- Get all tabs showing with ***Some*** Functionality (2/6)
+    - PlayLog (Done)
+    - Photos
+    - Area (Done)
+    - Collection
+    - Ranking
+    - Options
+    
 ToDo:
 - Create Play Data Tab
     - Get User Playlog Data (Done)
@@ -50,6 +59,7 @@ ToDo:
     - Re-Create the MaiMaiDXNet Playlog list (90% Done, can't continue without image assets that are only on the offical Server)
     - Create Detailed Look Into Score
 - Create Photos Tab
+    - Create a rudementrary Photos tab until i can finallly get my hands on images of the Photos tab in MaiMai DX Net
 - Create Area Tab
     - Get User Area Data (Done)
     - Get Metadata for Area (Done)
@@ -64,4 +74,7 @@ ToDo:
 Complete:
 - Sign In Page
 - Make User Profile on User Page (done)
-    - Fuck you css go kill yourself
\ No newline at end of file
+    - Fuck you css go kill yourself
+- Ban button
+    - lmao
+    - ok actually this is pretty cool
\ No newline at end of file
diff --git a/routes/api.js b/routes/api.js
index 1ac2390..3317ffe 100644
--- a/routes/api.js
+++ b/routes/api.js
@@ -3,7 +3,8 @@ var router = express.Router();
 var fetch = require('cross-fetch');
 const sqlite3 = require('sqlite3').verbose();
 
-let db = new sqlite3.Database('A:\\db.sqlite');
+var config = require('../config.json');
+let db = new sqlite3.Database(config.DXMemorialImageDirectory + '\\db.sqlite');
 
   router.post('/getExtId/', function (req, res, next) {
     db.all('SELECT * FROM sega_card', (err, rows) => {
@@ -91,4 +92,33 @@ let db = new sqlite3.Database('A:\\db.sqlite');
     });
   });
 
+  router.post('/getuserbanned/', function (req,res,next) {
+    var request = req.body;
+    if (request.input === undefined) {
+      return res.status(500).send('Failed to update user ban state, insufficent paramaters');
+    }
+    db.run('UPDATE maimai2_user_detail SET ban_state = ? WHERE id = ?', [2, request.input], function(err) {
+      if (err) {
+        console.error(err.message);
+        res.status(500).send('Failed to update user ban state');
+      } else {
+        res.send({"status": "Success", "message": `User ${request.input} banned.`});
+      }
+    });
+  });
+
+  router.post('/getuserunbanned/', function (req,res,next) {
+    var request = req.body;
+    if (request.input === undefined) {
+      return res.status(500).send('Failed to update user ban state, insufficent paramaters');
+    }
+    db.run('UPDATE maimai2_user_detail SET ban_state = ? WHERE id = ?', [0, request.input], function(err) {
+      if (err) {
+        console.error(err.message);
+        res.status(500).send('Failed to update user ban state');
+      } else {
+        res.send({"status": "Success", "message": `User ${request.input} unbanned.`});
+      }
+    });
+  });
   module.exports = router;
\ No newline at end of file
diff --git a/routes/index.js b/routes/index.js
index 0d3dd62..0fdc09a 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -2,8 +2,8 @@ var express = require('express');
 var router = express.Router();
 var fetch = require('cross-fetch');
 const sqlite3 = require('sqlite3').verbose();
-
-let db = new sqlite3.Database('A:\\db.sqlite');
+var config = require('../config.json');
+let db = new sqlite3.Database(config.DXMemorialImageDirectory + '\\db.sqlite');
 /* GET home page. */
 var title = 'Webapp Mission Test'
 router.get('/', function (req, res, next) {
@@ -27,7 +27,7 @@ router.get('/user', async function (req, res, next) {
   const cookies = req.cookies
   console.log(cookies)
   if (cookies.aime_card_id === undefined) {
-    return res.render('index', { title: title });
+    return res.redirect("/")
   }
   res.render('user', { title: title, userdata: await getUserData(req) });
   } catch (err) {
diff --git a/templates/header.ejs b/templates/header.ejs
index 46a650d..2a91429 100644
--- a/templates/header.ejs
+++ b/templates/header.ejs
@@ -13,5 +13,5 @@
     </head>
     <body>
         <div id="imgHeader">
-            <img id="imgHeader" src="MaiMaiDXNet/maimaidxex.jpg">
+            <img id="imgHeader" src="/MaiMaiDXNet/maimaidxex.jpg">
         </div>
\ No newline at end of file
diff --git a/views/user.ejs b/views/user.ejs
index 7b0a248..038124f 100644
--- a/views/user.ejs
+++ b/views/user.ejs
@@ -56,6 +56,12 @@
     <summary>Developer Only Information</summary>
     For Development purposes only, send statistics found in this menu when encontering UI
     Errors.
+
+    <details>
+      <summary>Ban User</summary>
+      <div id="BanUserArea"></div>
+    </details>
+
     <details>
       <summary>Raw User Details</summary>
       <pre><code><%=JSON.stringify(userdata, null, 2)%></code></pre>