diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css
index 861f20f..f223c87 100644
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@@ -36,7 +36,7 @@ body[data-theme="light"] {
   --sideBar-profile-bg: rgb(132, 0, 255);
   --sideBar-profile-text: #ffffff;
   --profile-border: #ffffff;
-  
+
   --follow-bg: #ff0000;
   --follow-text: white;
   --follow-shadow: 0px 0px 15px rgba(94, 94, 94, 0.754);
@@ -49,6 +49,22 @@ body[data-theme="light"] {
   --quickBar-bg: #ffffff;
   --quickBar-text: #000000;
   --quickBar-border: #ffffff;
+
+  /*User Page*/
+  --user-name: #000000;
+  --user-pfp-border: #ffffff;
+  --user-pfp-border-shadow: -10px 15px 25px rgba(0, 0, 0, 0.754);
+
+  --user-borderBg: rgb(123, 0, 0);
+  --user-box: rgb(128, 0, 255);
+  --user-box-strip: rgb(255, 0, 0);
+  --user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
+  --user-sideBox: rgb(149, 0, 255);
+  --user-contentBox: rgb(255, 255, 253);
+  --user-follow-bg: #ff0000;
+
+  --user-bg: rgb(255, 255, 255);
+  --user-live-bg: rgb(127, 161, 5);
 }
 
 body[data-theme="dark"] {
@@ -60,7 +76,7 @@ body[data-theme="dark"] {
   --sideBar-profile-bg: rgba(92, 2, 176, 0.592);
   --sideBar-profile-text: #ffffff;
   --profile-border: #ffffff;
-  
+
   --follow-bg: #a50000c6;
   --follow-text: rgb(255, 255, 255);
   --follow-shadow: 0px 0px 15px rgba(255, 255, 255, 0.966);
@@ -74,6 +90,23 @@ body[data-theme="dark"] {
   --quickBar-bg: #000000d3;
   --quickBar-text: #ffffff;
   --quickBar-border: #ffffff;
+
+
+  /*User Page*/
+  --user-name: #ffffff;
+  --user-pfp-border: #ffffff;
+  --user-pfp-border-shadow: -10px 15px 25px rgba(0, 0, 0, 0.754);
+
+  --user-borderBg: rgb(123, 0, 0);
+  --user-box: rgb(75, 0, 150);
+  --user-box-strip: rgb(165, 0, 0);
+  --user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
+  --user-sideBox: rgba(25, 25, 25, 0.938);
+  --user-contentBox: rgba(108, 0, 0, 0.764);
+  --user-follow-bg: #9a0000;
+
+  --user-bg: rgb(16, 16, 16);
+  --user-live-bg: rgb(127, 161, 5);
 }
 
 body[data-theme="blue"] {
@@ -98,6 +131,25 @@ body[data-theme="blue"] {
   --quickBar-bg: #eefafffb;
   --quickBar-text: #003571;
   --quickBar-border: #ffffff;
+
+
+  /*User Page*/
+  --user-name: #000000;
+  --user-pfp-border: #ffffff;
+  --user-pfp-border-shadow: -10px 15px 25px rgba(0, 0, 0, 0.754);
+
+  --user-borderBg: rgb(0, 29, 92);
+  --user-box: rgb(246, 255, 0);
+  --user-box-strip: rgb(68, 160, 218);
+  --user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
+  --user-sideBox: #00525c;
+  --user-contentBox: rgba(161, 254, 252, 0.691);
+  --user-follow-bg: #78baeddf;
+
+  --user-bg: rgba(167, 245, 244, 0.886);
+  --user-live-bg: rgb(127, 161, 5);
+
+
 }
 
 body[data-theme="green"] {
@@ -135,9 +187,9 @@ body[data-theme="green"] {
   --user-box-strip: rgb(217, 240, 133);
   --user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
   --user-sideBox: rgb(1, 61, 30);
-  --user-contentBox: rgb(245, 228, 167);
-
-  --user-bg:  rgb(0, 78, 38);
+  --user-contentBox: rgba(213, 197, 141, 0.982);
+  --user-follow-bg: #ffffff;
+  --user-bg: rgb(0, 78, 38);
   --user-live-bg: rgb(217, 240, 133);
 }
 
@@ -145,9 +197,9 @@ body[data-theme="orange"] {
   --bg-color: #ffe0b2;
   --text-color: #e65100;
 
-  --sideBar-bg:  #fff3dc;
+  --sideBar-bg: #fff3dc;
   --sideBar-text: #4d3b31;
-  --sideBar-profile-bg:  #E67E22;
+  --sideBar-profile-bg: #E67E22;
   --sideBar-profile-text: #ffffff;
   --profile-border: #ffd900;
 
@@ -164,6 +216,22 @@ body[data-theme="orange"] {
   --quickBar-bg: #fff3dc;
   --quickBar-text: #ff8800;
   --quickBar-border: #ffffff;
+
+  /*User Page*/
+
+  --user-pfp-border: #ffffff;
+  --user-pfp-border-shadow: -10px 15px 25px rgba(0, 0, 0, 0.754);
+  --user-name: #000000;
+  --user-borderBg: rgb(255, 237, 123);
+  --user-box: rgb(157, 149, 0);
+  --user-box-strip: rgb(216, 255, 73);
+  --user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
+  --user-sideBox: rgb(189, 116, 43);
+  --user-contentBox: rgba(229, 244, 92, 0.877);
+  --user-follow-bg: #fff59c;
+
+  --user-bg: rgb(255, 145, 0);
+  --user-live-bg: rgb(127, 161, 5);
 }
 
 body {
@@ -246,4 +314,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-} */
+} */
\ No newline at end of file
diff --git a/frontend/src/pages/UserPage.tsx b/frontend/src/pages/UserPage.tsx
index 10fef04..fe13a17 100644
--- a/frontend/src/pages/UserPage.tsx
+++ b/frontend/src/pages/UserPage.tsx
@@ -118,7 +118,7 @@ const UserPage: React.FC = () => {
 
       <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
 
-        <div className="grid grid-cols-4 grid-rows-[0.1fr_1.5fr] w-full gap-8">
+        <div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
           {/* Profile Section - TOP  */}
 
 
@@ -128,11 +128,11 @@ const UserPage: React.FC = () => {
         relative flex flex-col items-center">
 
             {/* Border Overlay (Always on Top) */}
-            <div className="absolute left-[0.5px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
+            <div className="absolute left-[0px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
 
 
             {/* Background Box */}
-            <div className="absolute flex top-0 left-[0.5px] w-[99.8%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px] 
+            <div className="absolute flex top-0 left-[0.55px] w-[99.9%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px] 
                  bg-[var(--user-box)] z-10 flex-shrink justify-center"
               style={{ boxShadow: 'var(--user-box-shadow)' }}
             >
@@ -152,7 +152,7 @@ const UserPage: React.FC = () => {
             </div>
 
             {/* Username - Now Directly Below PFP */}
-            <h1 className="text-[1.5em] sm:text-[2em] font-bold -mt-[45px] sm:-mt-[90px] text-center">
+            <h1 className="text-[var(--user-name)] text-[1.5em] sm:text-[2em] font-bold -mt-[45px] sm:-mt-[90px] text-center">
               {profileData.username}
             </h1>
 
@@ -206,7 +206,6 @@ const UserPage: React.FC = () => {
             {/* User Type (e.g., "USER") */}
             <small className="text-green-400">{userPageVariant.toUpperCase()}</small>
 
-            Bio Section
             <div className="mt-6 text-center">
               <h2 className="text-xl font-semibold mb-3">About {profileData.username}</h2>
               <p className="text-gray-300 whitespace-pre-wrap">{profileData.bio}</p>
@@ -220,8 +219,7 @@ const UserPage: React.FC = () => {
           >
             {userPageVariant === "streamer" && (
               <>
-                {/* ↓↓ Current Stream ↓↓ */}
-                {profileData.isLive && (
+                {profileData.isLive ? (
                   <div className="mb-8">
                     <h2 className="text-2xl bg-[#ff0000] border py-4 px-12 font-black mb-4 rounded-[4rem]">
                       Currently Live!
@@ -238,7 +236,10 @@ const UserPage: React.FC = () => {
                       }}
                     />
                   </div>
+                ) : (
+                  <h1>Currently not live</h1>
                 )}
+
                 {/* ↓↓ VODS ↓↓ */}
                 <div>
                   <h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
@@ -248,22 +249,54 @@ const UserPage: React.FC = () => {
                 </div>
               </>
             )}
+
+            {userPageVariant === "user" && (
+              <>
+                {/* ↓↓ VODS ↓↓ */}
+                <div>
+                  <h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
+                  <div className="text-gray-400 rounded-none">
+                    No past broadcasts found
+                  </div>
+                </div>
+              </>
+            )}
+
           </div>
 
           <div
             id="mini"
-            className="bg-[var(--user-sideBox)] col-span-1 bg-gray-800 rounded-lg  text-center items-center justify-center
+            className="bg-[var(--user-sideBox)] col-span-1 rounded-lg  text-center items-center justify-center
   flex flex-col flex-grow gap-4 p-[2rem]"
           >
             <div
-              className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
-                 flex items-center justify-center w-full p-4"
+              className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
+                 flex items-center justify-center w-full p-4 content-start"
               onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
               onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
             >
-                <p className="text-[var(--follow-text)] whitespace-pre-wrap">Following www</p>
-                
+              <li className="text-[var(--follow-text)] whitespace-pre-wrap">Following</li>
+
             </div>
+            <div
+              className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
+                 flex items-center justify-center w-full p-4 content-start"
+              onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
+              onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
+            >
+              <li className="text-[var(--follow-text)] whitespace-pre-wrap">Streamers</li>
+
+            </div>
+            <div
+              className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
+                 flex items-center justify-center w-full p-4 content-start"
+              onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
+              onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
+            >
+              <li className="text-[var(--follow-text)] whitespace-pre-wrap">Category</li>
+
+            </div>
+
           </div>