diff --git a/src/User.tsx b/src/User.tsx
index af2de17ad142bc6648b6cda09766d287eb50069a..1569348644fbe8e79d5c50a615e690e0d7a40819 100644
--- a/src/User.tsx
+++ b/src/User.tsx
@@ -12,7 +12,7 @@ import axios from "axios";
 // }
 
 // Set the number of videos displayed per page
-const VIDEOS_PER_PAGE = 9;
+const VIDEOS_PER_PAGE = 6;
 
 let uploadServer = "http://localhost:3001";
 if (import.meta.env.VITE_UPLOAD_SERVER !== undefined) {
@@ -197,7 +197,7 @@ function User() {
       >
         {/* Logout button */}
         <div className="logout__section">
-        <a className="button" onClick={handleLogout}>
+        <a className="button warning" onClick={handleLogout}>
             <i className="fas fa-door-open"></i><span className="desktop__text"> Logout</span>
             </a>
         </div>
diff --git a/src/components/FileUploader.tsx b/src/components/FileUploader.tsx
index ec3db0e1e43e9ab86ce103ed8f3de9435c03d35a..c5688fffcc2db6a8dc9531362c29d3f3f90dea24 100644
--- a/src/components/FileUploader.tsx
+++ b/src/components/FileUploader.tsx
@@ -4,6 +4,10 @@ import "dotenv";
 import { io, Socket } from "socket.io-client";
 import { v4 as uuidv4 } from "uuid";
 
+
+import "../styles/auth.scss";
+
+
 let uploadServer = "http://localhost:3001";
 if (import.meta.env.VITE_UPLOAD_SERVER !== undefined) {
   uploadServer = import.meta.env.VITE_UPLOAD_SERVER;
@@ -177,21 +181,29 @@ export default function FileUploader() {
   };
 
   return (
-    <div className="upload-container">
+    <div className="">
+      <div className="auth__container">
       <div className="form-group">
         <label htmlFor="title">Title: </label>
-        <input name="title" value={title} onChange={handleTitleChange} />
+        <input name="title" className="auth__form-control" value={title} onChange={handleTitleChange} />
+
+      </div>
       </div>
 
+      <div className="auth__container">
       <div className="form-group">
         <label htmlFor="desc">Description: </label>
-        <input name="desc" value={desc} onChange={handleDescChange} />
+        <input name="desc" className="auth__form-control" value={desc} onChange={handleDescChange} />
+      </div>
+        
       </div>
 
-      <div className="form-group">
+
+      <div className="form-group ">
         <input type="file" accept="video/mp4" onChange={handleFileChange} />
+        <br />
         {file && status === "idle" && (
-          <button className="button" onClick={handleFileUpload}>Upload</button>
+          <button style={{margin: "15px auto"}} className="button primary" onClick={handleFileUpload}>Upload</button>
         )}
       </div>
 
diff --git a/src/components/VideoPlayerUser.tsx b/src/components/VideoPlayerUser.tsx
index 644041c77bfda7ecef260d384b38138c286c09a4..c14b8263071bf7922dce859d7e834413c3dc145f 100644
--- a/src/components/VideoPlayerUser.tsx
+++ b/src/components/VideoPlayerUser.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { motion } from "framer-motion";
 
+
+
 // VideoPlayer Component - Toggles between a small and expanded video
 export default function VideoPlayer() {
   // State to track if the video is expanded or not
diff --git a/src/styles/upload.scss b/src/styles/upload.scss
index 0b10fa2856f4f6ddb268ddf4c0fe1bc9c5867021..6ceb5b4cffa192d1469ba9e87cb15747467276ad 100644
--- a/src/styles/upload.scss
+++ b/src/styles/upload.scss
@@ -20,13 +20,10 @@ $backgroundImageUrl: url('src/assets/blob.png');
   align-items: center;
   justify-content: center;
   height: 100vh;
-  // background-image: $backgroundImageUrl;
   background-position: top;
   background-repeat: no-repeat;
-  background-size: 300px;
-  // background-color: #e0f7e0;
   padding: 20px;
-  max-height: 40vh;  
+  max-height: 40vh; 
 }
 
 .upload-banner{
@@ -111,6 +108,14 @@ $backgroundImageUrl: url('src/assets/blob.png');
   .upload-title {
     font-size: 2rem;
   }
+  .upload-banner{
+    width: 80vw;
+  }
+  .upload-container {
+    font-size: 1rem;
+    width: 80vw;
+    // overflow-x: hidden;
+  }
   
   .back-button {
     padding: 8px 16px;
diff --git a/src/terms.tsx b/src/terms.tsx
index c4cd97b1d55491142427408062d33ef46237a898..24ce7c9e5e53132b1065a7406e24109ba386957a 100644
--- a/src/terms.tsx
+++ b/src/terms.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import './styles/signup.scss';
+import './styles/auth.scss';
 
 
 function Terms(){
@@ -8,7 +8,7 @@ function Terms(){
         <main>
             <div className="center-container">
             <h3 style={{ color: 'white' }}>No illegal content, otherwise go nuts</h3>
-            <button className="signup__button" onClick={() => navigate('/signup')}>Back to Signup</button>
+            <button className="button primary" onClick={() => navigate('/signup')}>Back to Signup</button>
         </div>
         </main>