diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css
index 57265006455e3f67f5198ddd70b51df7e1e523a3..878ab054fc53828cb76726775109ca7d3f4bcc80 100644
--- a/src/main/resources/static/css/userProfile.css
+++ b/src/main/resources/static/css/userProfile.css
@@ -37,13 +37,21 @@
         & p { line-height: 1.1; color: white;}
     }
 }
-
+html{
+    height: 100%;
+    @media only screen and (min-device-width: 1500px) {
+        height: auto;
+    }
+}
 body {
     background: linear-gradient(135deg, #f7e8fd, #9914d1);
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
+    @media only screen and (min-device-width: 1500px) {
+        height: auto;
+    }
 }
 main {
     background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
@@ -56,7 +64,12 @@ main {
     padding-inline: 1vw;
     box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
     transition: all linear 2s;
-
+    overflow-y: scroll;
+    height: 90%;
+    @media only screen and (min-device-width: 1500px) {
+        padding-inline: 20%;
+        overflow: visible;
+    }
 }
 .rewards {
     position: relative;
diff --git a/src/main/resources/templates/users/userFrags.html b/src/main/resources/templates/users/userFrags.html
index 8639196849f8c22c9736d2142d97b8622c8a1565..2dd629ae06e5ad56f410786f12d5ac00aa991176 100644
--- a/src/main/resources/templates/users/userFrags.html
+++ b/src/main/resources/templates/users/userFrags.html
@@ -1,5 +1,3 @@
-<th:block xmlns:th="http://www.thymeleaf.org">
-
   <!-- @thymesVar id="sticker" type="team5.smartTowns.rewards.Sticker" -->
 <article th:fragment="stickersBox" id="stickersBox">
   <h2>STICKERS!</h2>
@@ -10,17 +8,21 @@
 </article>
 
 <!-- @thymesVar id="user" type="team5.smartTowns.users.User" -->
-<article th:fragment="trailProgression" class="dragonProgression">
+<article th:fragment="trailProgression" class="progressionContainer">
   <h1>The Dragon's Tale</h1>
-  <div class="dragonContainer">
-    <div class="dragonFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'">
+  <div class="progImgContainer">
+    <div class="progImgFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'">
       <img th:src="@{/images/rewards/dragonFilled.png}"
-           alt="Filled Dragon" id="FilledDragon" class="dragonImg">
+           alt="Filled Dragon" id="FilledDragon" class="progImg">
+    </div>
+    <div class="progText">
+      <p th:text="${user.getDragonProgress()} + '%'"></p>
     </div>
-    <div class="dragonOut">
+    <div class="progImgOutline">
       <img th:src="@{/images/rewards/dragonOutline.png}"
-           alt="Outline Dragon" id="OutlineDragon" class="dragonImg">
+           alt="Outline Dragon" id="OutlineDragon" class="progImg">
     </div>
+
   </div>
-  <h2 th:text="${user.getDragonProgress()} + '%'"></h2>
+
 </article>
\ No newline at end of file
diff --git a/src/main/resources/templates/users/userProfile.html b/src/main/resources/templates/users/userProfile.html
index 208d60291ec15f861616284b637fbbd85d4ee760..62f66e5419046ad72065e6afe5fc1a00bb4f725b 100644
--- a/src/main/resources/templates/users/userProfile.html
+++ b/src/main/resources/templates/users/userProfile.html
@@ -3,25 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
-    <link rel="stylesheet" th:href="@{/css/userProfile.css}">
+    <link rel="stylesheet" th:href="@{/css/userProfile2.css}">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <!--    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
 </head>
 <body>
 
-<header>
-    <ul class="footerBar">
-        <li class="footerButton"><b>Home</b></li>
-        <li class="footerButton"><b>About</b></li>
-        <li class="footerButton"><b>Map</b></li>
-        <li class="footerButton"><b>Facilities</b></li>
-        <li class="footerButton"><b>Log In</b></li>
-    </ul>
-</header>
+<!--<header>-->
+<!--    <ul class="footerBar">-->
+<!--        <li class="footerButton"><b>Home</b></li>-->
+<!--        <li class="footerButton"><b>About</b></li>-->
+<!--        <li class="footerButton"><b>Map</b></li>-->
+<!--        <li class="footerButton"><b>Facilities</b></li>-->
+<!--        <li class="footerButton"><b>Log In</b></li>-->
+<!--    </ul>-->
+<!--</header>-->
 
 <main>
     <!--PICTURE - DATA - BADGES -->
-    <div class="userInfo">
+    <div class="userContainer">
         <h1 th:text="${user.getName()}"></h1>
         <img th:src="@{${user.getImgPath()}}"
              th:alt="${user.getName()}"
@@ -31,15 +31,15 @@
         <!--TODO add some progression info here?-->
     </div>
     <section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
-        <h2>Packs</h2>
         <article id="packsBar">
+            <h2>Packs</h2>
              <!--Shows first earned badges, followed by greyed out badges-->
             <div id="allPacksContainer"  class="centerFlex">
                 <div th:each="pack : ${packs}"  class="packContainer">
-                    <h4 class="packName" th:text="${pack.getName()}"></h4>
                     <img class="packImg"   th:src="@{'../' + ${pack.getDisplayImg()}}"
                          th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}"
                          th:onclick="'updatePack(' + ${user.getId()} +',' + ${pack.getId()} +');'">
+                    <h4 class="packName" th:text="${pack.getName()}"></h4>
                 </div>
             </div>
         </article>