diff --git a/frontend/src/Components/ChangeUsername.tsx b/frontend/src/Components/ChangeUsername.tsx
new file mode 100644
index 0000000..71d5e57
--- /dev/null
+++ b/frontend/src/Components/ChangeUsername.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { api } from "../API/API";
+import InputField from "./InputField";
+import BackButton from "./BackButton";
+import Button from "./Button";
+
+
+function ChangeUsername(): JSX.Element {
+  const [newUsername, setNewUsername] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    setNewUsername(e.target.value);
+  };
+
+  const handleSubmit = async (): Promise<void> => {
+    try {
+      // Call the API function to update the username
+      await api.updateUsername(newUsername);
+      // Optionally, add a success message or redirect the user
+    } catch (error) {
+      console.error("Error updating username:", error);
+      // Optionally, handle the error
+    }
+  };
+
+  return (
+    <div>
+      <InputField
+        label="New Username"
+        type="text"
+        value={newUsername}
+        onChange={handleChange}
+      />
+    </div>
+  );
+}
+
+export default ChangeUsername;
diff --git a/frontend/src/Pages/AdminPages/AdminChangeUsername.tsx b/frontend/src/Pages/AdminPages/AdminChangeUsername.tsx
index 7eb2e2e..b130fae 100644
--- a/frontend/src/Pages/AdminPages/AdminChangeUsername.tsx
+++ b/frontend/src/Pages/AdminPages/AdminChangeUsername.tsx
@@ -1,9 +1,14 @@
 import BackButton from "../../Components/BackButton";
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
+import ChangeUsername from "../../Components/ChangeUsername";
 
 function AdminChangeUsername(): JSX.Element {
-  const content = <></>;
+  const content = (
+    <>
+      <ChangeUsername />
+    </>
+  );
 
   const buttons = (
     <>
diff --git a/frontend/src/Pages/YourProjectsPage.tsx b/frontend/src/Pages/YourProjectsPage.tsx
index a3cd47a..0f2428e 100644
--- a/frontend/src/Pages/YourProjectsPage.tsx
+++ b/frontend/src/Pages/YourProjectsPage.tsx
@@ -1,6 +1,5 @@
-import { useState, createContext, useEffect } from "react";
+import { useState, createContext } from "react";
 import { Project } from "../Types/goTypes";
-import { api } from "../API/API";
 import { Link } from "react-router-dom";
 import BasicWindow from "../Components/BasicWindow";