diff --git a/trivia-forge/frontend/src/Models/User.jsx b/trivia-forge/frontend/src/Models/User.jsx
index 91896b1e..15d96c31 100644
--- a/trivia-forge/frontend/src/Models/User.jsx
+++ b/trivia-forge/frontend/src/Models/User.jsx
@@ -1,10 +1,11 @@
 import datetime from 'node-datetime';
 export class User {
-    constructor(date, email, password, profilePic = null) {
-        this.id = null;
+    constructor(date, email, password, username, profilePic = null) {
+        // this.id = null;
+        this.username = username;
         this.email = email;
         this.password = password;
-        this.profilePic = profilePic;
+        // this.profilePic = null;
         this.games = [];
     }
 
@@ -13,10 +14,11 @@ export class User {
     }
     toJsonObject() {
         return {
-            id: this.id,
+            // id: this.id,
+            username: this.username,
             email: this.email,
             password: this.password,
-            profilePic: this.profilePic
+            // profilePic: this.profilePic
         }
     }
 }
\ No newline at end of file
diff --git a/trivia-forge/frontend/src/Pages/SignUpPage.jsx b/trivia-forge/frontend/src/Pages/SignUpPage.jsx
index d6225d32..3159b317 100644
--- a/trivia-forge/frontend/src/Pages/SignUpPage.jsx
+++ b/trivia-forge/frontend/src/Pages/SignUpPage.jsx
@@ -1,36 +1,66 @@
+import React, { useState } from 'react';
 import { useNavigate } from "react-router-dom";
 import { Form, Button, Card } from "react-bootstrap";
+import { addUser } from '../Services/TF-db_services';
+import { User } from '../Models/User';
 
 function SignUpPage() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [username, setUsername] = useState('');
+    const navigate = useNavigate();
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        if (password !== confirmPassword) {
+            alert('Passwords do not match');
+            return;
+        }
+        const user = new User(null, email, password, username); 
+        console.log('Sending user data:', user.toJsonObject());
+        const addedUser = await addUser(user);
+        if (addedUser) {
+            alert('User added:', addedUser);
+            navigate('/');
+        } else {
+            console.error('Error adding user');
+        }
+    }
 
     return (
         <>
             <Card style={{ width: '35rem', margin: '0 auto', float: 'none' }}>
-                <Form className="form-group">
+                <Form onSubmit={handleSubmit} className="form-group">
                     <Form.Group className="mb-3" controlId="formBasicEmail">
                         <Form.Label>Email address</Form.Label>
-                        <Form.Control className="Form-Control" type="email" placeholder="Enter email" />
+                        <Form.Control type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} />
                         <Form.Text className="text-muted">
                             We'll never share your email with anyone else.
                         </Form.Text>
                     </Form.Group>
 
+                    <Form.Group className="mb-3" controlId="formBasicUsername">
+                        <Form.Label>Username</Form.Label>
+                        <Form.Control type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
+                    </Form.Group>
+
                     <Form.Group className="mb-3" controlId="formBasicPassword">
                         <Form.Label>Password</Form.Label>
-                        <Form.Control type="password" placeholder="Password" />
+                        <Form.Control type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
                     </Form.Group>
-                    <Form.Group className="mb-3" controlId="formBasicPassword">
+
+                    <Form.Group className="mb-3" controlId="formBasicConfirmPassword">
                         <Form.Label>Confirm Password</Form.Label>
-                        <Form.Control type="password" placeholder="Confirm Password" />
+                        <Form.Control type="password" placeholder="Confirm Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
                     </Form.Group>
+
                     <Button variant="primary" type="submit">
                         Create Account
                     </Button>
                 </Form>
             </Card>
         </>
-
     );
-
 }
 export default SignUpPage;
\ No newline at end of file
diff --git a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx
index 87eb1bfb..815cd06d 100644
--- a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx
+++ b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx
@@ -76,12 +76,12 @@ function TriviaGenPage() {
         }
         //create a new game and category object and add category to game
         let game = new Game(Title, Theme);
-
+        
         for (let i = 0; i < categories.length; i++) {
             let newCategory = new Category(categories[i].name);
             console.log(newCategory.name);
             game.addCategory(newCategory);
-
+              
             //parse response from API
             let sections = responses[i]; // store trivia questions
             for (let i = 0; i < sections.length; i++) {
diff --git a/trivia-forge/frontend/src/Services/TF-db_services.jsx b/trivia-forge/frontend/src/Services/TF-db_services.jsx
index e650a8d1..223cdfd3 100644
--- a/trivia-forge/frontend/src/Services/TF-db_services.jsx
+++ b/trivia-forge/frontend/src/Services/TF-db_services.jsx
@@ -3,6 +3,7 @@ import {User} from '../Models/User';
 import {Game} from '../Models/Game';
 import {Question} from '../Models/Question';
 
+
 const API_URL = 'http://localhost:5000';
 
 /* ************************************ User ************************************ */
@@ -10,8 +11,8 @@ const API_URL = 'http://localhost:5000';
 export const getUser = async () => {
     try {
         const response = await axios.get(`${API_URL}/users`);
-        const { id, date, email, password, profilePic } = response.data;
-        return new User(id, date, email, password, profilePic);
+        const { id, username, date, email, password, profilePic } = response.data;
+        return new User(id, username, date, email, password, profilePic);
     } catch (error) {
         console.error('Failed to fetch user');
         return [];