diff --git a/project2-back/src/main/java/net/revature/project1/controller/UserController.java b/project2-back/src/main/java/net/revature/project1/controller/UserController.java
index 4b9ba7e..c9376b5 100644
--- a/project2-back/src/main/java/net/revature/project1/controller/UserController.java
+++ b/project2-back/src/main/java/net/revature/project1/controller/UserController.java
@@ -85,10 +85,11 @@ public ResponseEntity<AppUser> updateUserDetails(@RequestBody AppUser appUser, @
             return new ResponseEntity<>(appUser, HttpStatus.OK);
     }
 
-    @PutMapping("/{id}/username")
+    @PutMapping("/{id}/update/{username}")
     public ResponseEntity<String> updateUsername(@PathVariable Long id,
-                                                 @RequestBody AppUser appUser) {
-        UserEnum result = userService.updateUsername(id, appUser);
+                                                 @PathVariable String username,
+                                                 @RequestHeader("Authorization") String token) {
+        UserEnum result = userService.updateUsername(id, username, token.substring(7));
         return resultResponse(result);
     }
 
diff --git a/project2-back/src/main/java/net/revature/project1/service/UserService.java b/project2-back/src/main/java/net/revature/project1/service/UserService.java
index aedf4f4..8dae0d1 100644
--- a/project2-back/src/main/java/net/revature/project1/service/UserService.java
+++ b/project2-back/src/main/java/net/revature/project1/service/UserService.java
@@ -142,6 +142,36 @@ public UserEnum updateUsername(Long id, AppUser user){
         return UserEnum.SUCCESS;
     }
 
+    public UserEnum updateUsername(Long id, String username, String token){
+        
+        boolean isValid = isValidToken(token, id);
+        if(!isValid){
+            return UserEnum.UNAUTHORIZED;
+        }
+        
+        if(username.isEmpty()
+                || !RegisterRequirementsUtils.isValidUsername(username)
+                || username.length() < 3
+                || username.length() > 20
+        ){
+            System.out.println(username.length());
+            System.out.println(RegisterRequirementsUtils.isValidUsername(username));
+            return UserEnum.BAD_USERNAME;
+        }
+        ;
+        Optional<AppUser> userOptional = userRepo.findById(id);
+        if(userOptional.isEmpty()){
+            return UserEnum.UNKNOWN;
+        }
+       
+        AppUser newUser = userOptional.get();
+        
+        newUser.setUsername(username);
+        userRepo.save(newUser);
+
+        return UserEnum.SUCCESS;
+    }
+
     /**
      * Used to change the user display name.
 //     * @param id Take in a user id to find the user.
diff --git a/project2-front/src/page/SettingPage.css b/project2-front/src/page/SettingPage.css
index a8698b2..0c916ab 100644
--- a/project2-front/src/page/SettingPage.css
+++ b/project2-front/src/page/SettingPage.css
@@ -14,4 +14,10 @@
 .SettingPageChangeNameButton {
     margin-top: 2% !important;
     width: 27% !important;
+}
+
+p {
+    color: lightgray;
+    margin-top: -5px;
+    margin-bottom: -4px;
 }
\ No newline at end of file
diff --git a/project2-front/src/page/SettingPage.jsx b/project2-front/src/page/SettingPage.jsx
index c953e19..60d4ebc 100644
--- a/project2-front/src/page/SettingPage.jsx
+++ b/project2-front/src/page/SettingPage.jsx
@@ -1,27 +1,31 @@
 import { Box, Button, InputAdornment, OutlinedInput } from "@mui/material";
+import { Link, useNavigate } from "react-router-dom"
+import useNav from "../component/Navbar/NavContext/UseNav.jsx";
 import EmailIcon from "@mui/icons-material/Email";
 import LogOut from "../component/LogOut/LogOut.jsx";
-
+import Cookies from "js-cookie";
 import { useState } from "react";
 import { projectApi } from "../util/axios.js";
 import "./SettingPage.css"
 
 const SettingsPage = () => {
-  const [displayName, setDisplayName] = useState();
+  const [username, setUsername] = useState();
+  const {currentNav} = useNav();
+    let navigate  = useNavigate();
 
-  const changeName = async (username) => {
-    if (displayName === undefined) {
+  const changeName = async (id) => {
+    const token = Cookies.get("jwt");
+    if (username === undefined) {
       return [];
     }
 
     try {
       const response = await projectApi.put(
-        `/user/${username}/display_name`,
-        {
-          displayName: displayName,
-        },
+        `/user/${id}/update/${username}`,
+        
         {
           headers: {
+            Authorization: `Bearer ${token}`,
             "Content-Type": "application/json",
           },
         }
@@ -34,26 +38,30 @@ const SettingsPage = () => {
   };
 
   const handleDisplayNameChange = (e) => {
-    setDisplayName(e.target.value);
+    setUsername(e.target.value);
   };
 
   const handleDisplayChange = async () => {
-    await changeName(displayName);
+    await changeName(Cookies.get("user_id"));
+    Cookies.remove('jwt')
+    Cookies.remove('username')
+    navigate('/')
+    window.location.reload(true)
   };
 
   return (
     <Box className="SettingPageContainer">
       <OutlinedInput className="SettingPageInputBar text" required type="text"
-        value={displayName}
+        value={username}
         onChange={(e) => handleDisplayNameChange(e)}
-        placeholder="Enter new display name"
+        placeholder="Enter new username"
         startAdornment={
           <InputAdornment position="start">
             <EmailIcon />
           </InputAdornment>
         }
       />
-
+      <p>Note: Changing your username will log you out.</p>
       <Button className="SettingPageChangeNameButton" variant="contained" onClick={handleDisplayChange}>
         Change Name
       </Button>