diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 7cff4f2..7d1267d 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -152,16 +152,125 @@ body {
     white-space: nowrap;
 }
 
-.box table thead td {
-    font-weight: bold;
-}
-
 .box table td:nth-child(2),
 .box table th:nth-child(2) {
     width: 58px;
     white-space: nowrap;
 }
 
+.box table thead td {
+    font-weight: bold;
+}
+
+#table tbody,
+#stats tbody,
+.box tbody {
+    scrollbar-gutter: stable overlay;
+}
+
+#table thead td {
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+#table tbody {
+    display: block;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 500px;
+}
+
+#table thead,
+#table tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+}
+
+#table td:first-child,
+#table th:first-child {
+    width: 58px;
+    white-space: nowrap;
+}
+
+#table thead td {
+    font-weight: bold;
+}
+
+#table td:nth-child(5),
+#table th:nth-child(5) {
+    width: 30px;
+    white-space: nowrap;
+}
+
+#table {
+    width: 800px;
+}
+
+#stats thead td {
+    font-weight: bold;
+    writing-mode: vertical-lr;
+    transform: rotate(180deg);
+    text-orientation: mixed;
+    white-space: nowrap;
+}
+
+#stats tbody {
+    display: block;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 500px;
+}
+
+#stats thead,
+#stats tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+}
+
+#stats td:first-child,
+#stats th:first-child {
+    width: 30px;
+    white-space: nowrap;
+}
+
+#stats thead td {
+    font-weight: bold;
+}
+
+#stats td:nth-child(2),
+#stats th:nth-child(2) {
+    width: 45px;
+    white-space: nowrap;
+}
+
+#stats td:nth-child(3),
+#stats th:nth-child(3) {
+    width: 20px;
+    white-space: nowrap;
+}
+
+#stats {
+    width: 800px;
+}
+
+.player-box {
+    border: 2px solid #AAAAAA;
+    background-color: white;
+    border-radius: 16px;
+    margin: 4px;
+    min-height: auto;
+    box-shadow: 5px 5px 5px #00000055;
+    display: block;
+    flex-direction: column;
+    justify-content: flex-start;
+    text-justify: center;
+    text-align: left;
+    gap: 5px;
+    overflow: hidden;
+}
+
 .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -197,7 +306,7 @@ body {
 }
 
 hr {
-    min-width: 125%;
+    min-width: 110%;
     margin: auto 0;
 }
 
@@ -261,8 +370,6 @@ a {
     max-height: 20px;
     border-radius: 5px;
     color: var(--royal-blue);
-    padding-left: 5px;
-    padding-right: 5px;
     text-align: center;
     align-items: center;
     justify-content: center;
@@ -473,9 +580,9 @@ p {
 .mark {
     width: 32px;
     height: 24px;
-    border: 2px solid #606060;
+    border: 2px solid #FFFFFF;
     border-radius: 4px;
-    color: #888888;
+    color: #CCCCCC;
     font: 16px tahoma, sans-serif;
     font-weight: bold;
     text-align: center;
@@ -490,8 +597,8 @@ p {
 }
 
 .checkbox input:checked + .mark {
-    border: 2px solid #FFFFFF;
-    color: #CCCCCC;
+    border: 2px solid #606060;
+    color: #888888;
 }
 
 .days {
diff --git a/public/info.html b/public/info.html
index 301958b..e0ad05e 100644
--- a/public/info.html
+++ b/public/info.html
@@ -6,8 +6,9 @@
 </head>
 <body>
     <div class="center">
-        <h2>Personal Information</h2>
         <form id="infoForm">
+            <h2>Personal Information</h2>
+            <hr>
             <div class="inputGroup">
                 <p>Username:</p>
                 <p id="usernameField">[username]</p>
@@ -25,6 +26,7 @@
                 <input type="date" id="dobField" placeholder="">
             </div>
             <button type="submit">Update Information</button>
+            <a href="/home">Return Home</a>
         </form>
 
         <div class="error">
@@ -34,7 +36,6 @@
             <p>Information updated successfully</p>
         </div>
 
-        <a href="/home">Return Home</a>
     </div>
 
     <script type="module" src="info.js"></script>
diff --git a/public/player.html b/public/player.html
index 6af70f6..6e65f7d 100644
--- a/public/player.html
+++ b/public/player.html
@@ -7,62 +7,67 @@
 </head>
 <body>
     <div class="center">
-        <h2 class="attribute-PlayerName">[Player Name]</h2>
+        <form>
+            <h2 class="attribute-PlayerName">[Player Name]</h2>
+            <hr>
 
-        <div class="info-container">
-            <div class="info">
-                <p><b>Position:</b></p>
-                <p class="attribute-Position"></p>
-            </div>
-            <div class="info">
-                <p><b>Team:</b></p>
-                <p class="attribute-Team"></p>
-            </div>
-            <div class="info">
-                <p><b>Height:</b></p>
-                <p class="attribute-Height format-height"></p>
-            </div>
-            <div class="info">
-                <p><b>Weight:</b></p>
-                <p class="attribute-Weight format-weight"></p>
-            </div>
-        </div>
-        <div class="info-container">
-            <div class="info">
-                <div class="cursor-question">
-                    <p><b>PayDirt Score:</b></p>
-                    <span class="tooltip-text">A player's <b>PayDirt score</b> is calculated by weighting their offense score by their annual salary. It is used to evaluate the worth of their contract.</span>
+            <div class="info-container">
+                <div class="info">
+                    <p><b>Position:</b></p>
+                    <p class="attribute-Position"></p>
                 </div>
-                <p class="attribute-PaydirtScore format-integer"></p>
-            </div>
-            <div class="info">
-                <div class="cursor-question">
-                    <p><b>Offense Score:</b></p>
-                    <span class="tooltip-text">A player's <b>offense score</b> is calculated by combining several of their offense stats into a weighted score. It is indicative of their overall performance.</span>
+                <div class="info">
+                    <p><b>Team:</b></p>
+                    <p class="attribute-Team"></p>
+                </div>
+                <div class="info">
+                    <p><b>Height:</b></p>
+                    <p class="attribute-Height format-height"></p>
+                </div>
+                <div class="info">
+                    <p><b>Weight:</b></p>
+                    <p class="attribute-Weight format-weight"></p>
                 </div>
-                <p class="attribute-OffenseScore format-integer"></p>
             </div>
-        </div>
-        <table id="overview">
-            <thead></thead>
-            <tbody></tbody>
-        </table>
+            <div class="info-container">
+                <div class="info">
+                    <div class="cursor-question">
+                        <p><b>PayDirt Score:</b></p>
+                        <span class="tooltip-text">A player's <b>PayDirt score</b> is calculated by weighting their offense score by their annual salary. It is used to evaluate the worth of their contract.</span>
+                    </div>
+                    <p class="attribute-PaydirtScore format-integer"></p>
+                </div>
+                <div class="info">
+                    <div class="cursor-question">
+                        <p><b>Offense Score:</b></p>
+                        <span class="tooltip-text">A player's <b>offense score</b> is calculated by combining several of their offense stats into a weighted score. It is indicative of their overall performance.</span>
+                    </div>
+                    <p class="attribute-OffenseScore format-integer"></p>
+                </div>
+            </div>
+            <table id="overview">
+                <thead></thead>
+                <tbody></tbody>
+            </table>
 
-        <button id="watch">Watch Player</button>
+            <button id="watch">Watch Player</button>
 
-        <a href="#" onclick="if (history.length > 1) history.back(); else if (document.referrer) window.location.href = document.referrer; else window.location.href = '#';">Back</a>
+            <a href="#" onclick="if (history.length > 1) history.back(); else if (document.referrer) window.location.href = document.referrer; else window.location.href = '#';">Back</a>
+
+
+            <p id="nomatch" style="display: none;">No matches found.</p>
+
+
+            <br>
+        </form>
 
         <button id="showStats">Show Full Stats</button>
-        <table id="stats" style="display: none;">
-            <thead></thead>
-            <tbody></tbody>
-        </table>
-
-        <p id="nomatch" style="display: none;">No matches found.</p>
-
-
-        <br>
-
+        <div style="display: none;" class="player-box">
+            <table id="stats">
+                <thead></thead>
+                <tbody></tbody>
+            </table>
+        </div>
     </div>
 
     <script type="module" src="/player.js"></script>
diff --git a/public/player.js b/public/player.js
index 31b409b..d7c7562 100644
--- a/public/player.js
+++ b/public/player.js
@@ -38,8 +38,8 @@ watchButton.onclick = async e => {
 showStatsButton.onclick = async e => {
     e.preventDefault();
 
-    statsTable.style.display = statsTable.style.display == "" ? "none" : "";
-    showStatsButton.innerHTML = statsTable.style.display == "" ? "Hide Full Stats" : "Show Full Stats";
+    statsTable.closest("div").style.display = statsTable.closest("div").style.display == "" ? "none" : "";
+    showStatsButton.innerHTML = statsTable.closest("div").style.display == "" ? "Hide Full Stats" : "Show Full Stats";
 }
 
 async function updateIsWatched() {
diff --git a/public/search.html b/public/search.html
index 4c9af8c..140addb 100644
--- a/public/search.html
+++ b/public/search.html
@@ -7,8 +7,9 @@
 </head>
 <body>
     <div class="center">
-        <h2>Search Players</h2>
         <form id="searchForm"> 
+            <h2>Search Players</h2>
+            <hr>
             <select id="category" style="display: none;">
                 <option value="Id">ID</option>
                 <option value="Username">Username</option>
@@ -46,10 +47,13 @@
             <button style="display: none;" type="submit">Search</button>
         </form>
 
-        <table id="table">
-            <thead id="header"></thead>
-            <tbody id="results"></tbody>
-        </table>
+        <div class="player-box">
+            <table id="table">
+                <thead id="header"></thead>
+                <tbody id="results"></tbody>
+            </table>
+        </div>
+        
 
         <p id="nomatch" style="display: none;">No matches found.</p>
 
diff --git a/public/search.js b/public/search.js
index e39d6be..9674923 100644
--- a/public/search.js
+++ b/public/search.js
@@ -10,7 +10,7 @@ const tableBody = document.getElementById("results");
 const table = document.getElementById("table");
 const nomatch = document.getElementById("nomatch");
 
-updateTableVisibility();
+updateTableVisibility(0);
 
 document.querySelectorAll("input[type='checkbox']").forEach(checkbox => {
     checkbox.addEventListener("change", e => {
@@ -52,6 +52,7 @@ async function updateSearch () {
     if (resultObject.matches.length === 0) {
        nomatch.style.display = "";
        table.style.display = "none";
+       updateTableVisibility(0);
        return;
     }
     nomatch.style.display = "none"
@@ -62,11 +63,10 @@ async function updateSearch () {
     //   headerRow.innerHTML += `<td>${attribute}</td>`; 
     //});
     headerRow.innerHTML += `
-            <td>ID</td>
-            <td>Name</td>
-            <td>Contract</td>
-            <td>Team</td>
             <td>Position</td>
+            <td>Name</td>
+            <td>Team</td>
+            <td>Contract</td>
             `;
     tableHeader.appendChild(headerRow);
 
@@ -78,25 +78,28 @@ async function updateSearch () {
         //    row.innerHTML += `<td>${player}</td>l`;
         //}
         row.innerHTML = `
-            <td>${player.PlayerID}</td>
-            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
-            <td>${formatSalary(player.TotalValue)}</td>
-            <td>${player.Team}</td>
             <td>${player.Position}</td>
+            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
+            <td>${player.Team}</td>
+            <td>${formatSalary(player.TotalValue)}</td>
         `;
         tableBody.appendChild(row);
     });
-    updateTableVisibility();
+    updateTableVisibility(resultObject.matches.length);
 };
 
-function updateTableVisibility() {
+function updateTableVisibility(length) {
     if (!tableBody) return;
+    console.log(length);
 
     const rows = tableBody.querySelectorAll("tr");
-    if (rows == null) return;
-    if (rows.length != 0) {
-        table.style.display = "";
+    if (rows == null) {
+        table.closest("div").style.display = "none";
+        return;
+    }
+    if (length != 0) {
+        table.closest("div").style.display = "";
     } else {
-        table.style.display = "none";
+        table.closest("div").style.display = "none";
     }
 }
diff --git a/server.js b/server.js
index 8bc74ac..6c0ede6 100644
--- a/server.js
+++ b/server.js
@@ -169,7 +169,7 @@ app.post("/getPlayers", authenticate, async (req, res) => {
         .input("two", sql.VarChar, positions[1])
         .input("three", sql.VarChar, positions[2])
         .input("four", sql.VarChar, positions[3])
-        .query(`SELECT p.PlayerID, p.PlayerName, c.TotalValue, p.Team, p.Position FROM Player AS p JOIN Contract AS c ON p.PlayerID = c.PlayerID WHERE p.PlayerName LIKE '%' + @query + '%' AND p.Position IN (@one, @two, @three, @four);`);
+        .query(`SELECT p.PlayerID, p.PlayerName, c.TotalValue, p.Team, p.Position FROM Player AS p JOIN Contract AS c ON p.PlayerID = c.PlayerID WHERE p.PlayerName LIKE '%' + @query + '%' AND p.Position IN (@one, @two, @three, @four) ORDER BY p.PlayerName;`);
 
     res.status(200).json({ query: player, matches: result.recordset });
 });

No matches found.