diff --git a/public/javascript/user.js b/public/javascript/user.js
index 13a7343..c8eb5a9 100644
--- a/public/javascript/user.js
+++ b/public/javascript/user.js
@@ -73,7 +73,7 @@ function padNumber(num, size) {
     return s;
 }
 
-async function getSongInformation(musicData,id) {
+async function getSongInformation(musicData, id) {
     const songMatch = musicData[id];
     if (!songMatch) {
         return null;
@@ -89,13 +89,13 @@ if (userdata.ban_state !== 0) {
     const parent = document.getElementById("User");
     const wrapperDiv = document.createElement("div");
     wrapperDiv.id = 'wrapper';
-    const newDiv = document.createElement("div");
-    newDiv.classList.add('error')
-    newDiv.innerHTML = `<h3 style='
+    const scoreDiv = document.createElement("div");
+    scoreDiv.classList.add('error')
+    scoreDiv.innerHTML = `<h3 style='
     word-wrap: break-word;
-    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 newDiv.innerHTML = "<p>This is some HTML content</p>;
+    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(newDiv);
+    wrapperDiv.appendChild(scoreDiv);
 }
 
 
@@ -149,6 +149,7 @@ let displayedScoreCount = 20;
 
 async function userPlayLogFormatter(div, loadMoreButton) {
     const UserPlayLogData = await UserPlayLog(aime_card_id);
+    console.log(UserPlayLogData)
     let scoresWrapperDiv = document.getElementById("scoreWrapper");
 
     // If the scores wrapper div doesn't exist, create it.
@@ -158,18 +159,23 @@ async function userPlayLogFormatter(div, loadMoreButton) {
         div.appendChild(scoresWrapperDiv);
     }
 
+    const startIndex = scoresWrapperDiv.children.length;
+    if (startIndex > 0) {
+        // If the scores wrapper div already has children, don't do anything.
+        return;
+    }
+
     // Get the user's play log data and music IDs.
     const musicIds = UserPlayLogData.map(score => score.music_id);
     const musicData = await musicMetadata();
-    
+
     let errorIncrement = 0;
     let scoreIncrement = 0;
-    const startIndex = scoresWrapperDiv.children.length;
-    const maxScores = startIndex + 20;
-    for (let i = startIndex; i < UserPlayLogData.length && scoreIncrement < maxScores; i++) {
-        const newDiv = document.createElement('div'); // Create a Div
+    for (let i = UserPlayLogData.length - 1; i >= 0; i--) {
+        const scoreDiv = document.createElement('div'); // Create a Div
         let score = JSON.parse(JSON.stringify(UserPlayLogData[i])); // get score data
         let song = await getSongInformation(musicData, score.music_id) // get song data
+        let diffucultyData = song.difficultys.Notes[score.level] // get difficulty information
 
         if (!song || !song.name) { // if a song can't be found, skip it and increment the error counter by 1.
             console.log(song)
@@ -179,29 +185,69 @@ async function userPlayLogFormatter(div, loadMoreButton) {
             continue;
         }
 
-        newDiv.innerHTML = `
+        scoreDiv.innerHTML = `
+            <div class="score-title">
             <h4>${song.name.str || ""} || </h4>
+            </div>
         `;
-
+        /* Score Jacket Image */
+        const scoreJacketDiv = document.createElement('div');
         let jacket = document.createElement('img');
         jacket.addEventListener("error", function () {
             this.src = "assets/icon/UI_Icon_000000.png";
         });
+        scoreJacketDiv.classList.add('score-jacket');
         jacket.classList.add('score-jacket');
         jacket.src = "assets/jacket/UI_Jacket_" + padNumber(Number(score.music_id), 6) + '.png';
-        newDiv.append(jacket)
+        scoreJacketDiv.append(jacket)
+        scoreDiv.append(scoreJacketDiv)
 
-        newDiv.setAttribute("id", "score-grid");
-        newDiv.setAttribute("class", "item");
+        /* Achivement Box */
+        const scoreAchivementDiv = document.createElement('div');
+        scoreAchivementDiv.classList.add('score-achivement');
+        scoreAchivementDiv.innerHTML = `<h5>ACHIVEMENT</h5>`;
+        let achivementPercentage = document.createElement('h5');
+        let achivementNumber = padNumber(Number(score.achievement), 7)
+        achivementPercentage.textContent = `${achivementNumber / 10000}%`;
+        scoreAchivementDiv.append(achivementPercentage)
+        scoreDiv.append(scoreAchivementDiv)
+
+        /* Score Grade */
+        let scoreGrades = ["D", "C", "B", "BB", "BBB", "A", "AA", "AAA", "S", "S+", "SS", "SS+", "SSS", "SSS+"]
+        const scoreGradeDiv = document.createElement('div');
+        scoreGradeDiv.classList.add('score-grade');
+        let scoreGrade = document.createElement('h4');
+        scoreGrade.textContent = `${scoreGrades[score.score_rank]}`;
+        scoreGradeDiv.append(scoreGrade);
+        scoreDiv.append(scoreGradeDiv);
+
+        /* DX Score, Full Combo, Full Sync, and Multi-Placement */
+
+        const scoreInfoDiv = document.createElement('div');
+        scoreInfoDiv.classList.add('score-info');
+        const scoreInfoGridDiv = document.createElement('div');
+        scoreInfoDiv.classList.add('score-info-grid');
+        // please i dont want to make a fucking nested grid
+        /* DX Score */
+        const scoreDXScoreDiv = document.createElement('div');
+        scoreDXScoreDiv.classList.add('DX-Score');
+        scoreDXScoreDiv.innerHTML = `<h4>DX Score: ${score.deluxscore} / ${diffucultyData.maxNotes * 3}</h4>`;
+        scoreInfoGridDiv.append(scoreDXScoreDiv);
+        scoreInfoDiv.append(scoreInfoGridDiv);
+        scoreDiv.append(scoreInfoDiv);
+
+
+        scoreDiv.setAttribute("class", "score-grid");
         scoreIncrement++
-        
-        scoresWrapperDiv.appendChild(newDiv);
-        
+
+        scoresWrapperDiv.appendChild(scoreDiv);
     }
 
+
+
     // Edit the Score Info Header with the relevant information.
     const header = document.querySelector('#score-info-header');
-    header.textContent = `Showing ${startIndex + scoreIncrement - errorIncrement} out of ${UserPlayLogData.length} scores.`;
+    header.textContent = `Showing ${startIndex + scoreIncrement - errorIncrement} out of ${scoreIncrement} scores.`;
     if (errorIncrement > 0) {
         header.insertAdjacentHTML('afterend', `<p>${errorIncrement} Songs Failed to load properly, most likely due to missing information.</p>`);
     }
@@ -217,6 +263,9 @@ async function userPlayLogFormatter(div, loadMoreButton) {
 
 
 
+
+
+
 //=====================================================================
 // Now Exiting: User Data ////////////// Now Entering: Nested Div Hell
 //=====================================================================
diff --git a/public/stylesheets/user.css b/public/stylesheets/user.css
index 69ada43..21b4c97 100644
--- a/public/stylesheets/user.css
+++ b/public/stylesheets/user.css
@@ -1,88 +1,88 @@
 #user-image {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 100%;
-    width: 100%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  width: 100%;
 }
 
 #User {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    margin: 1%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin: 1%;
 }
 
 #wrapper {
-    display: flex;
+  display: flex;
   justify-content: center;
   align-items: center;
 }
 
 #user-profile-wrapper {
-    display: inline-grid;
-    margin: 0px;
-    grid-template-areas:
-        "profile-image user-title user-title"
-        "profile-image user-name dx-rating"
-        "profile-image user-class awakens";
-    gap: 10px;
-    border: 2px solid black;
-    border-radius: 15px;
-    justify-items: center;
-    align-items: center;
-    width: fit-content;
-    margin: 0 auto;
-    font-size: 2em;
+  display: inline-grid;
+  margin: 0px;
+  grid-template-areas:
+    "profile-image user-title user-title"
+    "profile-image user-name dx-rating"
+    "profile-image user-class awakens";
+  gap: 10px;
+  border: 2px solid black;
+  border-radius: 15px;
+  justify-items: center;
+  align-items: center;
+  width: fit-content;
+  margin: 0 auto;
+  font-size: 2em;
 }
 
 @media screen and (max-width: 768px) {
-    #user-profile-wrapper {
-        display: inline-block;
-        margin: 0;
-        border: 2px solid black;
-        border-radius: 15px;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.5em;
-        
-    }
+  #user-profile-wrapper {
+    display: inline-block;
+    margin: 0;
+    border: 2px solid black;
+    border-radius: 15px;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5em;
+
+  }
 }
 
 .profile-image {
-    grid-area: profile-image;
-    max-width: 100%;
-    width: 100%;
+  grid-area: profile-image;
+  max-width: 100%;
+  width: 100%;
 }
 
 .user-title {
-    grid-area: user-title;
+  grid-area: user-title;
 }
 
 .user-name {
-    grid-area: user-name;
+  grid-area: user-name;
 }
 
 .dx-rating {
-    grid-area: dx-rating;
+  grid-area: dx-rating;
 }
 
 .user-rank {
-    grid-area: user-rank;
+  grid-area: user-rank;
 }
 
 .awakens {
-    grid-area: awakens;
+  grid-area: awakens;
 }
 
 h4.profile {
-    font-size: 2em;
+  font-size: 2em;
 }
 
 @media (max-width: 768px) {
-    h4 {
-        font-size: 1.5em;
-    }
+  h4 {
+    font-size: 1.5em;
+  }
 }
 
 .error {
@@ -95,100 +95,131 @@ h4.profile {
 }
 
 .buttons {
-    margin-bottom: 2em;
-    display: grid;
-    grid-template-areas:
-      "1a 2b 3c 4d"
-      "5e 6f 7g 8h";
-    grid-gap: 10px;
-  }
-  
-  .btn1 {
-    grid-area: "1a";
-  }
-  
-  .btn2 {
-    grid-area: "2b";
-  }
-  
-  .btn3 {
-    grid-area: "3c";
-  }
-  
-  .btn4 {
-    grid-area: "4d";
-  }
-  
-  .btn5 {
-    grid-area: "5e";
-  }
-  
-  .btn6 {
-    grid-area: "6f";
-  }
-  
-  .btn7 {
-    grid-area: "7g";
-  }
-  
-  .btn8 {
-    grid-area: "8h";
-  }
-  
-  .hidden {
-    display:none !important;
-  }
+  margin-bottom: 2em;
+  display: grid;
+  grid-template-areas:
+    "1a 2b 3c 4d"
+    "5e 6f 7g 8h";
+  grid-gap: 10px;
+}
 
-/* Jacket Grid */
+.btn1 {
+  grid-area: "1a";
+}
 
-  .score-grid {
-    display: grid; 
- 
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    
-    grid-template-areas: 
-	'label0 label0 label0 label0'
-	'label1 label1 label2 label3'
-	'label1 label1 label4 label4';
-    
-    gap: 0px;
-    height: 100%;
-    
- }
-   
- .score-title {
- 
-    background-color: #D5BBCA; 
-    grid-area: label0;
-    
- }
- .score-jacket {
- 
-    background-color: #9EF6B5; 
-    grid-area: label1;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 25%;
-    width: 25%;
-    
- }
- .score-achivement {
- 
-    background-color: #ED69FD; 
-    grid-area: label2;
-    
- }
- .score-grade {
- 
-    background-color: #9B5999; 
-    grid-area: label3;
-    
- }
- .score-info {
- 
-    background-color: #58B669; 
-    grid-area: label4;
-    
- }
\ No newline at end of file
+.btn2 {
+  grid-area: "2b";
+}
+
+.btn3 {
+  grid-area: "3c";
+}
+
+.btn4 {
+  grid-area: "4d";
+}
+
+.btn5 {
+  grid-area: "5e";
+}
+
+.btn6 {
+  grid-area: "6f";
+}
+
+.btn7 {
+  grid-area: "7g";
+}
+
+.btn8 {
+  grid-area: "8h";
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* Play Data CSS */
+
+#score-info-header-div {
+  grid-area: 2 / 2 / 3 / 4;
+}
+
+#scoreWrapper {
+  grid-area: 3 / 2 / 4 / 4;
+  width:auto;
+  align-items: start;
+  justify-items: start;
+}
+
+
+.score-grid {
+  display: grid;
+
+  grid-template-rows: min-content min-content 1fr;
+  grid-template-columns: 300px 300px 5em;
+
+  grid-template-areas:
+    'label0 label0 label0'
+    'label1 label2 label3'
+    'label1 label4 label4';
+
+  gap: 0px;
+}
+
+
+
+.score-title {
+
+  background-color: #D5BBCA;
+  grid-area: label0;
+
+}
+
+.score-jacket {
+
+  background-color: #9EF6B5;
+  grid-area: label1;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  width: 100%;
+
+}
+
+.score-achivement {
+
+  background-color: #ED69FD;
+  grid-area: label2;
+
+}
+
+.score-grade {
+
+  background-color: #9B5999;
+  grid-area: label3;
+
+}
+
+.score-info {
+
+  background-color: #58B669;
+  grid-area: label4;
+}
+
+/* Please I really dont want to make a nested grid */
+.score-info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-template-areas:
+    "DX-Score DX-Score DX-Score"
+    "full-combo full-sync multi-place"
+    "details details details";
+}
+
+.DX-Score {
+  grid-area: DX-Score;
+}
\ No newline at end of file
diff --git a/readme.md b/readme.md
index 2cdf5a7..296eab9 100644
--- a/readme.md
+++ b/readme.md
@@ -40,6 +40,7 @@ ToDo:
     - Get User Playlog Data (Done)
     - Sort From Most Recent (Done)
     - Assign Song Names to Each Score (done)
+    - Re-Create the MaiMaiDXNet Playlog list (Partially Done)
     - Create Detailed Look Into Score
 - Create Photos Tab
 - Create Area Tab
diff --git a/views/user.ejs b/views/user.ejs
index 0e1124e..d6335c9 100644
--- a/views/user.ejs
+++ b/views/user.ejs
@@ -5,7 +5,7 @@
 <link href="/stylesheets/user.css" rel="stylesheet" type="text/css">
 <div id="User">
   <h1>Yo! Welcome Back <%= normalizeText(userdata.user_name) %>!</h1>
-  
+
   <div id="wrapper">
     <!-- Calm before the storm -->
     <div class="buttons">
@@ -36,10 +36,13 @@
         <h4>★ ☓<%= userdata.total_awake%></h4>
       </div>
     </div><!-- This is just one nested div, Trmazi it's going to get a lot worse from here on. -->
-    <div data-content="content-2" id="user-play-data" class="hidden"> <!-- User Play-Log is generated at run time when the user clicks the button, so they get up to date data. -->
-      <h4 id="score-info-header">Please Wait, Obtaining Scores...</h4>
+    <div data-content="content-2" id="user-play-data" class="hidden">
+      <!-- User Play-Log is generated at run time when the user clicks the button, so they get up to date data. -->
+      <div id="score-info-header-div">
+        <h4 id="score-info-header">Please Wait, Obtaining Scores...</h4>
+      </div>
     </div>
-  </div> 
+  </div>