35 changed files with 525 additions and 704 deletions
--- a/backend/internal/database/sample_data/0010_sample_data.sql
+++ b/backend/internal/database/sample_data/0010_sample_data.sql
@ -21,12 +21,6 @@ VALUES ("projecttest3","test project3", 1);
 INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
 VALUES (1,1,"project_manager");

-INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES (1,2,"project_manager");
-
-INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
-VALUES (1,3,"project_manager");
-
 INSERT OR IGNORE INTO user_roles(user_id,project_id,p_role)
 VALUES (2,1,"member");

--- a/backend/internal/handlers/projects/GetUserProject.go
+++ b/backend/internal/handlers/projects/GetUserProject.go
@ -4,16 +4,15 @@ import (
 	db "ttime/internal/database"

 	"github.com/gofiber/fiber/v2"
-	"github.com/gofiber/fiber/v2/log"
+	"github.com/golang-jwt/jwt/v5"
 )

 // GetUserProjects returns all projects that the user is a member of
 func GetUserProjects(c *fiber.Ctx) error {
-	username := c.Params("username")
-	if username == "" {
-		log.Info("No username provided")
-		return c.Status(400).SendString("No username provided")
-	}
+	// First we get the username from the token
+	user := c.Locals("user").(*jwt.Token)
+	claims := user.Claims.(jwt.MapClaims)
+	username := claims["name"].(string)

 	// Then dip into the database to get the projects
 	projects, err := db.GetDb(c).GetProjectsForUser(username)
--- a/backend/internal/handlers/projects/ProjectRoleChange.go
+++ b/backend/internal/handlers/projects/ProjectRoleChange.go
@ -24,13 +24,7 @@ func ProjectRoleChange(c *fiber.Ctx) error {
 		return c.Status(400).SendString(err.Error())
 	}

-	// Check if user is trying to change its own role
-	if username == data.UserName {
-		log.Info("Can't change your own role")
-		return c.Status(403).SendString("Can't change your own role")
-	}
-
-	log.Info("Changing role for user: ", data.UserName, " in project: ", data.Projectname, " to: ", data.Role)
+	log.Info("Changing role for user: ", username, " in project: ", data.Projectname, " to: ", data.Role)

 	// Dubble diping and checcking if current user is
 	if ismanager, err := db.GetDb(c).IsProjectManager(username, data.Projectname); err != nil {
@ -42,7 +36,7 @@ func ProjectRoleChange(c *fiber.Ctx) error {
 	}

 	// Change the user's role within the project in the database
-	if err := db.GetDb(c).ChangeUserRole(data.UserName, data.Projectname, data.Role); err != nil {
+	if err := db.GetDb(c).ChangeUserRole(username, data.Projectname, data.Role); err != nil {
 		return c.Status(500).SendString(err.Error())
 	}

--- a/backend/main.go
+++ b/backend/main.go
@ -112,8 +112,7 @@ func main() {

 	// All project related routes
 	// projectGroup := api.Group("/project") // Not currently in use
-	api.Get("/getProjectTimes/:projectName", projects.GetProjectTimesHandler)
-	api.Get("/getUserProjects/:username", projects.GetUserProjects)
+	api.Get("/getUserProjects", projects.GetUserProjects)
 	api.Get("/project/:projectId", projects.GetProject)
 	api.Get("/checkIfProjectManager/:projectName", projects.IsProjectManagerHandler)
 	api.Get("/getUsersProject/:projectName", projects.ListAllUsersProject)
--- a/frontend/src/API/API.ts
+++ b/frontend/src/API/API.ts
@ -1,15 +1,13 @@
-import { NewProjMember } from "../Components/AddMember";
-import { ProjectRoleChange } from "../Components/ChangeRole";
-import { projectTimes } from "../Components/GetProjectTimes";
-import { ProjectMember } from "../Components/GetUsersInProject";
 import {
  NewWeeklyReport,
  NewUser,
  User,
  Project,
  NewProject,
+  UserProjectMember,
  WeeklyReport,
  StrNameChange,
+  NewProjMember,
 } from "../Types/goTypes";

 /**
@ -75,7 +73,10 @@ interface API {
   * @param {string} token The authentication token.
   * @returns {Promise<APIResponse<Project>>} A promise resolving to an API response with the created project.
   */
-  createProject(project: NewProject, token: string): Promise<APIResponse<void>>;
+  createProject(
+    project: NewProject,
+    token: string,
+  ): Promise<APIResponse<Project>>;

  /** Submits a weekly report
   * @param {NewWeeklyReport} weeklyReport The weekly report object.
@ -127,16 +128,6 @@ interface API {
   */
  getProject(id: number): Promise<APIResponse<Project>>;

-  /** Gets a projects reported time
-   * @param {string} projectName The name of the project.
-   * @param {string} token The usertoken.
-   * @returns {Promise<APIResponse<Times>>} A promise resolving to an API response containing the project times.
-   */
-  getProjectTimes(
-    projectName: string,
-    token: string,
-  ): Promise<APIResponse<projectTimes>>;
-
  /** Gets a list of all users.
   * @param {string} token The authentication token of the requesting user.
   * @returns {Promise<APIResponse<string[]>>} A promise resolving to an API response containing the list of users.
@ -146,7 +137,7 @@ interface API {
  getAllUsersProject(
    projectName: string,
    token: string,
-  ): Promise<APIResponse<ProjectMember[]>>;
+  ): Promise<APIResponse<UserProjectMember[]>>;
  /**
   * Changes the username of a user in the database.
   * @param {StrNameChange} data The object containing the previous and new username.
@ -157,21 +148,10 @@ interface API {
    data: StrNameChange,
    token: string,
  ): Promise<APIResponse<void>>;
-  /**
-   * Changes the role of a user in the database.
-   * @param {RoleChange} roleInfo The object containing the previous and new username.
-   * @param {string} token The authentication token.
-   * @returns {Promise<APIResponse<void>>} A promise resolving to an API response.
-   */
-  changeUserRole(
-    roleInfo: ProjectRoleChange,
-    token: string,
-  ): Promise<APIResponse<void>>;
-
  addUserToProject(
    user: NewProjMember,
    token: string,
-  ): Promise<APIResponse<void>>;
+  ): Promise<APIResponse<NewProjMember>>;

  removeProject(
    projectName: string,
@ -185,7 +165,10 @@ interface API {
   * @param {number} reportId The id of the report to sign
   * @param {string} token The authentication token
   */
-  signReport(reportId: number, token: string): Promise<APIResponse<string>>;
+  signReport(
+    reportId: number,
+    token: string,
+  ): Promise<APIResponse<string>>;
 }

 /** An instance of the API */
@ -273,7 +256,7 @@ export const api: API = {
  async createProject(
    project: NewProject,
    token: string,
-  ): Promise<APIResponse<void>> {
+  ): Promise<APIResponse<Project>> {
    try {
      const response = await fetch("/api/project", {
        method: "POST",
@ -287,17 +270,18 @@ export const api: API = {
      if (!response.ok) {
        return { success: false, message: "Failed to create project" };
      } else {
-        return { success: true };
+        const data = (await response.json()) as Project;
+        return { success: true, data };
      }
    } catch (e) {
-      return { success: false, message: "Failed to create project!" };
+      return { success: false, message: "Failed to create project" };
    }
  },

  async addUserToProject(
    user: NewProjMember,
    token: string,
-  ): Promise<APIResponse<void>> {
+  ): Promise<APIResponse<NewProjMember>> {
    try {
      const response = await fetch("/api/addUserToProject", {
        method: "PUT",
@ -339,33 +323,6 @@ export const api: API = {
    }
  },

-  async changeUserRole(
-    roleInfo: ProjectRoleChange,
-    token: string,
-  ): Promise<APIResponse<void>> {
-    try {
-      const response = await fetch("/api/ProjectRoleChange", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: "Bearer " + token,
-        },
-        body: JSON.stringify(roleInfo),
-      });
-
-      if (!response.ok) {
-        if (response.status === 403) {
-          return { success: false, message: "Cannot change your own role" };
-        }
-        return { success: false, message: "Could not change role" };
-      } else {
-        return { success: true };
-      }
-    } catch (e) {
-      return { success: false, message: "Could not change role" };
-    }
-  },
-
  async getUserProjects(
    username: string,
    token: string,
@ -396,37 +353,6 @@ export const api: API = {
    }
  },

-  async getProjectTimes(
-    projectName: string,
-    token: string,
-  ): Promise<APIResponse<projectTimes>> {
-    try {
-      const response = await fetch(`/api/getProjectTimes/${projectName}`, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: "Bearer " + token,
-        },
-      });
-
-      if (!response.ok) {
-        return Promise.resolve({
-          success: false,
-          message:
-            "Fetch error: " + response.status + ", failed to get project times",
-        });
-      } else {
-        const data = (await response.json()) as projectTimes;
-        return Promise.resolve({ success: true, data });
-      }
-    } catch (e) {
-      return Promise.resolve({
-        success: false,
-        message: "API error! Could not get times.",
-      });
-    }
-  },
-
  async submitWeeklyReport(
    weeklyReport: NewWeeklyReport,
    token: string,
@ -594,7 +520,7 @@ export const api: API = {
  async getAllUsersProject(
    projectName: string,
    token: string,
-  ): Promise<APIResponse<ProjectMember[]>> {
+  ): Promise<APIResponse<UserProjectMember[]>> {
    try {
      const response = await fetch(`/api/getUsersProject/${projectName}`, {
        method: "GET",
@ -610,7 +536,7 @@ export const api: API = {
          message: "Failed to get users",
        });
      } else {
-        const data = (await response.json()) as ProjectMember[];
+        const data = (await response.json()) as UserProjectMember[];
        return Promise.resolve({ success: true, data });
      }
    } catch (e) {
@ -650,7 +576,7 @@ export const api: API = {
    token: string,
  ): Promise<APIResponse<string>> {
    try {
-      const response = await fetch(`/api/removeProject/${projectName}`, {
+      const response = await fetch(`/api/projectdelete/${projectName}`, {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
@ -696,5 +622,5 @@ export const api: API = {
    } catch (e) {
      return { success: false, message: "Failed to sign report" };
    }
-  },
+  }
 };
--- a/frontend/src/Components/AddMember.tsx
+++ b/frontend/src/Components/AddMember.tsx
@ -1,10 +1,5 @@
 import { APIResponse, api } from "../API/API";
-
-export interface NewProjMember {
-  username: string;
-  role: string;
-  projectname: string;
-}
+import { NewProjMember } from "../Types/goTypes";

 /**
 * Tries to add a member to a project
@ -26,7 +21,7 @@ function AddMember(props: { memberToAdd: NewProjMember }): boolean {
      props.memberToAdd,
      localStorage.getItem("accessToken") ?? "",
    )
-    .then((response: APIResponse<void>) => {
+    .then((response: APIResponse<NewProjMember>) => {
      if (response.success) {
        alert("Member added");
        added = true;
--- a/frontend/src/Components/AddProject.tsx
+++ b/frontend/src/Components/AddProject.tsx
@ -1,6 +1,6 @@
 import { useState } from "react";
 import { APIResponse, api } from "../API/API";
-import { NewProject } from "../Types/goTypes";
+import { NewProject, Project } from "../Types/goTypes";
 import InputField from "./InputField";
 import Logo from "../assets/Logo.svg";
 import Button from "./Button";
@ -10,26 +10,27 @@ import Button from "./Button";
 * @param {Object} props - Project name and description
 * @returns {boolean} True if created, false if not
 */
-function CreateProject(props: { name: string; description: string }): void {
+function CreateProject(props: { name: string; description: string }): boolean {
  const project: NewProject = {
    name: props.name,
    description: props.description,
  };

+  let created = false;
+
  api
    .createProject(project, localStorage.getItem("accessToken") ?? "")
-    .then((response: APIResponse<void>) => {
+    .then((response: APIResponse<Project>) => {
      if (response.success) {
-        alert("Project added!");
+        created = true;
      } else {
-        alert("Project NOT added!");
        console.error(response.message);
      }
    })
    .catch((error) => {
-      alert("Project NOT added!");
      console.error("An error occurred during creation:", error);
    });
+  return created;
 }

 /**
@ -47,10 +48,7 @@ function AddProject(): JSX.Element {
          className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
          onSubmit={(e) => {
            e.preventDefault();
-            CreateProject({
-              name: name,
-              description: description,
-            });
+            CreateProject({ name: name, description: description });
          }}
        >
          <img
@ -61,26 +59,22 @@ function AddProject(): JSX.Element {
          <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
            Create a new project
          </h3>
-          <div className="space-y-3">
-            <InputField
-              label="Name"
-              type="text"
-              value={name}
-              onChange={(e) => {
-                e.preventDefault();
-                setName(e.target.value);
-              }}
-            />
-            <InputField
-              label="Description"
-              type="text"
-              value={description}
-              onChange={(e) => {
-                e.preventDefault();
-                setDescription(e.target.value);
-              }}
-            />
-          </div>
+          <InputField
+            label="Name"
+            type="text"
+            value={name}
+            onChange={(e) => {
+              setName(e.target.value);
+            }}
+          />
+          <InputField
+            label="Description"
+            type="text"
+            value={description}
+            onChange={(e) => {
+              setDescription(e.target.value);
+            }}
+          />
          <div className="flex items-center justify-between">
            <Button
              text="Create"
--- a/frontend/src/Components/AddUserToProject.tsx
+++ b/frontend/src/Components/AddUserToProject.tsx
@ -1,14 +1,15 @@
 import { useState } from "react";
+import { NewProjMember } from "../Types/goTypes";
 import Button from "./Button";
 import GetAllUsers from "./GetAllUsers";
-import AddMember, { NewProjMember } from "./AddMember";
+import AddMember from "./AddMember";
 import BackButton from "./BackButton";

 /**
 * Provides UI for adding a member to a project.
 * @returns {JSX.Element} - Returns the component UI for adding a member
 */
-function AddUserToProject(props: { projectName: string }): JSX.Element {
+function AddUserToProject(): JSX.Element {
  const [name, setName] = useState("");
  const [users, setUsers] = useState<string[]>([]);
  const [role, setRole] = useState("");
@ -17,7 +18,7 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
  const handleClick = (): boolean => {
    const newMember: NewProjMember = {
      username: name,
-      projectname: props.projectName,
+      projectname: localStorage.getItem("projectName") ?? "",
      role: role,
    };
    return AddMember({ memberToAdd: newMember });
@ -32,13 +33,13 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
        Role chosen: [{role}]
      </p>
      <p className="pb-4 mb-2 text-center font-bold text-[18px]">
-        Project chosen: [{props.projectName}]
+        Project chosen: [{localStorage.getItem("projectName") ?? ""}]
      </p>
      <p className="p-1">Choose role:</p>
-      <div className="border-2 border-black p-2 rounded-xl text-center h-[10h] w-[16] overflow-auto">
+      <div className="border-2 border-black p-2 rounded-xl text-center h-[10h] w-[16vh]">
        <ul className="text-center items-center font-medium space-y-2">
          <li
-            className="h-[10] w-[14] items-start px-2 py-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+            className="h-[10h] w-[14vh] items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
            onClick={() => {
              setRole("member");
            }}
@ -46,7 +47,7 @@ function AddUserToProject(props: { projectName: string }): JSX.Element {
            {"Member"}
          </li>
          <li
-            className="h-[10] w-[14] items-start px-2 py-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+            className="h-[10h] w-[14vh] items-start p-1 border-2 border-black rounded-full bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
            onClick={() => {
              setRole("project_manager");
            }}
--- a/frontend/src/Components/ChangeRole.tsx
+++ b/frontend/src/Components/ChangeRole.tsx
@ -1,37 +0,0 @@
-import { APIResponse, api } from "../API/API";
-
-export interface ProjectRoleChange {
-  username: string;
-  role: "project_manager" | "member" | "";
-  projectname: string;
-}
-
-export default function ChangeRole(roleChangeInfo: ProjectRoleChange): void {
-  if (
-    roleChangeInfo.username === "" ||
-    roleChangeInfo.role === "" ||
-    roleChangeInfo.projectname === ""
-  ) {
-    // FOR DEBUG
-    // console.log(roleChangeInfo.role + ": Role");
-    // console.log(roleChangeInfo.projectname + ": P-Name");
-    // console.log(roleChangeInfo.username + ": U-name");
-    alert("You have to select a role");
-    return;
-  }
-  api
-    .changeUserRole(roleChangeInfo, localStorage.getItem("accessToken") ?? "")
-    .then((response: APIResponse<void>) => {
-      if (response.success) {
-        alert("Role changed successfully");
-        location.reload();
-      } else {
-        alert(response.message);
-        console.error(response.message);
-      }
-    })
-    .catch((error) => {
-      alert(error);
-      console.error("An error occurred during change:", error);
-    });
-}
--- a/frontend/src/Components/ChangeRoleView.tsx
+++ b/frontend/src/Components/ChangeRoleView.tsx
@ -1,73 +0,0 @@
-import { useState } from "react";
-import Button from "./Button";
-import ChangeRole, { ProjectRoleChange } from "./ChangeRole";
-
-export default function ChangeRoles(props: {
-  projectName: string;
-  username: string;
-}): JSX.Element {
-  const [selectedRole, setSelectedRole] = useState<
-    "project_manager" | "member" | ""
-  >("");
-
-  const handleRoleChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ): void => {
-    if (event.target.value === "member") {
-      setSelectedRole(event.target.value);
-    } else if (event.target.value === "project_manager") {
-      setSelectedRole(event.target.value);
-    }
-  };
-
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-    event.preventDefault();
-    const roleChangeInfo: ProjectRoleChange = {
-      username: props.username,
-      projectname: props.projectName,
-      role: selectedRole,
-    };
-    ChangeRole(roleChangeInfo);
-  };
-
-  return (
-    <div className="overflow-auto rounded-lg">
-      <h1 className="font-bold text-[20px]">Select role:</h1>
-      <form onSubmit={handleSubmit}>
-        <div className="h-[7vh] self-start text-left font-medium overflow-auto border-2 border-black rounded-lg p-2">
-          <div className="hover:font-bold">
-            <label>
-              <input
-                type="radio"
-                value="project_manager"
-                checked={selectedRole === "project_manager"}
-                onChange={handleRoleChange}
-                className="ml-2 mr-2 mb-3"
-              />
-              Project manager
-            </label>
-          </div>
-          <div className="hover:font-bold">
-            <label>
-              <input
-                type="radio"
-                value="member"
-                checked={selectedRole === "member"}
-                onChange={handleRoleChange}
-                className="ml-2 mr-2"
-              />
-              Member
-            </label>
-          </div>
-        </div>
-        <Button
-          text="Change"
-          onClick={(): void => {
-            return;
-          }}
-          type="submit"
-        />
-      </form>
-    </div>
-  );
-}
--- a/frontend/src/Components/ChangeUsername.tsx
+++ b/frontend/src/Components/ChangeUsername.tsx
@ -1,26 +1,61 @@
-import { APIResponse, api } from "../API/API";
-import { StrNameChange } from "../Types/goTypes";
+import React, { useState } from "react";
+import InputField from "./InputField";
+import { api } from "../API/API";

-function ChangeUsername(props: { nameChange: StrNameChange }): void {
-  if (props.nameChange.newName === "") {
-    alert("You have to select a new name");
-    return;
-  }
-  api
-    .changeUserName(props.nameChange, localStorage.getItem("accessToken") ?? "")
-    .then((response: APIResponse<void>) => {
-      if (response.success) {
-        alert("Name changed successfully");
-        location.reload();
-      } else {
-        alert("Name not changed");
-        console.error(response.message);
+function ChangeUsername(): JSX.Element {
+  const [newUsername, setNewUsername] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    setNewUsername(e.target.value);
+  };
+
+  const handleSubmit = async (): Promise<void> => {
+    try {
+      // Call the API function to change the username
+      const token = localStorage.getItem("accessToken");
+      if (!token) {
+        throw new Error("Access token not found");
      }
-    })
-    .catch((error) => {
-      alert("Name not changed");
-      console.error("An error occurred during change:", error);
+
+      const response = await api.changeUserName(
+        { prevName: "currentName", newName: newUsername },
+        token,
+      );
+
+      if (response.success) {
+        // Optionally, add a success message or redirect the user
+        console.log("Username changed successfully");
+      } else {
+        // Handle the error message
+        console.error("Failed to change username:", response.message);
+        setErrorMessage(response.message ?? "Failed to change username");
+      }
+    } catch (error) {
+      console.error("Error changing username:", error);
+      // Optionally, handle the error
+      setErrorMessage("Failed to change username");
+    }
+  };
+
+  const handleButtonClick = (): void => {
+    handleSubmit().catch((error) => {
+      console.error("Error in handleSubmit:", error);
    });
+  };
+
+  return (
+    <div>
+      <InputField
+        label="New Username"
+        type="text"
+        value={newUsername}
+        onChange={handleChange}
+      />
+      {errorMessage && <div>{errorMessage}</div>}
+      <button onClick={handleButtonClick}>Update Username</button>
+    </div>
+  );
 }

 export default ChangeUsername;
--- a/frontend/src/Components/DeleteProject.tsx
+++ b/frontend/src/Components/DeleteProject.tsx
@ -1,33 +0,0 @@
-import { api, APIResponse } from "../API/API";
-
-/**
- * Use to delete a project from the system
- * @param {string} props.projectToDelete - The projectname of project to delete
- * @returns {void} Nothing
- * @example
- * const exampleProjectName = "project";
- * DeleteProject({ projectToDelete: exampleProjectName });
- */
-
-function DeleteProject(props: { projectToDelete: string }): void {
-  api
-    .removeProject(
-      props.projectToDelete,
-      localStorage.getItem("accessToken") ?? "",
-    )
-    .then((response: APIResponse<string>) => {
-      if (response.success) {
-        alert("Project has been deleted!");
-        location.reload();
-      } else {
-        alert("Project has not been deleted");
-        console.error(response.message);
-      }
-    })
-    .catch((error) => {
-      alert("project has not been deleted");
-      console.error("An error occurred during deletion:", error);
-    });
-}
-
-export default DeleteProject;
--- a/frontend/src/Components/DeleteUser.tsx
+++ b/frontend/src/Components/DeleteUser.tsx
@ -3,7 +3,7 @@ import { api, APIResponse } from "../API/API";

 /**
 * Use to remove a user from the system
- * @param {string} props.usernameToDelete - The username of user to remove
+ * @param props - The username of user to remove
 * @returns {boolean} True if removed, false if not
 * @example
 * const exampleUsername = "user";
@ -29,7 +29,7 @@ function DeleteUser(props: { usernameToDelete: string }): boolean {
    })
    .catch((error) => {
      alert("User has not been deleted");
-      console.error("An error occurred during deletion:", error);
+      console.error("An error occurred during creation:", error);
    });
  return removed;
 }
--- a/frontend/src/Components/DisplayUserProjects.tsx
+++ b/frontend/src/Components/DisplayUserProjects.tsx
@ -2,7 +2,6 @@ import { useState } from "react";
 import { Project } from "../Types/goTypes";
 import { useNavigate } from "react-router-dom";
 import GetProjects from "./GetProjects";
-import { api } from "../API/API";

 /**
 * Renders a component that displays the projects a user is a part of and links to the projects start-page.
@ -12,20 +11,22 @@ function DisplayUserProject(): JSX.Element {
  const [projects, setProjects] = useState<Project[]>([]);
  const navigate = useNavigate();

-  GetProjects({
-    setProjectsProp: setProjects,
-    username: localStorage.getItem("username") ?? "",
-  });
+  const getProjects = async (): Promise<void> => {
+    const token = localStorage.getItem("accessToken") ?? "";
+    const response = await api.getUserProjects(token);
+    console.log(response);
+    if (response.success) {
+      setProjects(response.data ?? []);
+    } else {
+      console.error(response.message);
+    }
+  };

  const handleProjectClick = async (projectName: string): Promise<void> => {
    const token = localStorage.getItem("accessToken") ?? "";
    const response = await api.checkIfProjectManager(projectName, token);
-    console.log(response.data);
    if (response.success) {
-      if (
-        (response.data as unknown as { isProjectManager: boolean })
-          .isProjectManager
-      ) {
+      if (response.data) {
        navigate(`/PMProjectPage/${projectName}`);
      } else {
        navigate(`/project/${projectName}`);
@ -36,6 +37,11 @@ function DisplayUserProject(): JSX.Element {
    }
  };

+  // Call getProjects when the component mounts
+  useEffect(() => {
+    void getProjects();
+  }, []);
+
  return (
    <>
      <h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
--- a/frontend/src/Components/GetProjectTimes.tsx
+++ b/frontend/src/Components/GetProjectTimes.tsx
@ -1,59 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from "react";
-import { api } from "../API/API";
-
-/**
- * Interface for reported time per category + total time reported
- */
-export interface projectTimes {
-  admin: number;
-  development: number;
-  meeting: number;
-  own_work: number;
-  study: number;
-  testing: number;
-  totalTime?: number;
-}
-
-/**
- * Gets all reported times for this project
- * @param {Dispatch} props.setTimesProp - A setStateAction for the map you want to put times in
- * @param {string} props.projectName - Username
- * @returns {void} Nothing
- * @example
- *  const projectName = "Example";
- *  const [times, setTimes] = useState<Times>();
- *  GetProjectTimes({ setTimesProp: setTimes, projectName: projectName });
- */
-function GetProjectTimes(props: {
-  setTimesProp: Dispatch<SetStateAction<projectTimes | undefined>>;
-  projectName: string;
-}): void {
-  const setTimes: Dispatch<SetStateAction<projectTimes | undefined>> =
-    props.setTimesProp;
-  useEffect(() => {
-    const fetchUsers = async (): Promise<void> => {
-      try {
-        const token = localStorage.getItem("accessToken") ?? "";
-        const response = await api.getProjectTimes(props.projectName, token);
-        if (response.success && response.data) {
-          // Calculates total time reported
-          response.data.totalTime = response.data.admin;
-          response.data.totalTime += response.data.development;
-          response.data.totalTime += response.data.meeting;
-          response.data.totalTime += response.data.own_work;
-          response.data.totalTime += response.data.study;
-          response.data.totalTime += response.data.testing;
-          setTimes(response.data);
-        } else {
-          console.error("Failed to fetch project times:", response.message);
-        }
-      } catch (error) {
-        console.error("Error fetching times:", error);
-      }
-    };
-
-    void fetchUsers();
-  }, [props.projectName, setTimes]);
-}
-
-export default GetProjectTimes;
--- a/frontend/src/Components/GetProjects.tsx
+++ b/frontend/src/Components/GetProjects.tsx
@ -4,13 +4,11 @@ import { api } from "../API/API";

 /**
 * Gets all projects that user is a member of
- * @param {Dispatch} props.setProjectsProp - A setStateAction for the array you want to put projects in
- * @param {string} props.username - Username
+ * @param props - A setStateAction for the array you want to put projects in
 * @returns {void} Nothing
 * @example
- *  const username = "Example";
 *  const [projects, setProjects] = useState<Project[]>([]);
- *  GetProjects({ setProjectsProp: setProjects, username: username });
+ *  GetAllUsers({ setProjectsProp: setProjects });
 */
 function GetProjects(props: {
  setProjectsProp: Dispatch<React.SetStateAction<Project[]>>;
--- a/frontend/src/Components/GetUsersInProject.tsx
+++ b/frontend/src/Components/GetUsersInProject.tsx
@ -1,25 +1,20 @@
 import { Dispatch, useEffect } from "react";
+import { UserProjectMember } from "../Types/goTypes";
 import { api } from "../API/API";

-export interface ProjectMember {
-  Username: string;
-  UserRole: string;
-}
-
 /**
- * Gets all members of a project
- * @param string - The project's name
- * @param Dispatch - A setStateAction for the array you want to put members in
+ * Gets all projects that user is a member of
+ * @param props - A setStateAction for the array you want to put projects in
 * @returns {void} Nothing
 * @example
- * const [users, setUsers] = useState<User[]>([]);
- * GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
+ *  const [projects, setProjects] = useState<Project[]>([]);
+ *  GetAllUsers({ setProjectsProp: setProjects });
 */
 function GetUsersInProject(props: {
  projectName: string;
-  setUsersProp: Dispatch<React.SetStateAction<ProjectMember[]>>;
+  setUsersProp: Dispatch<React.SetStateAction<UserProjectMember[]>>;
 }): void {
-  const setUsers: Dispatch<React.SetStateAction<ProjectMember[]>> =
+  const setUsers: Dispatch<React.SetStateAction<UserProjectMember[]>> =
    props.setUsersProp;
  useEffect(() => {
    const fetchUsers = async (): Promise<void> => {
@ -29,10 +24,10 @@ function GetUsersInProject(props: {
        if (response.success) {
          setUsers(response.data ?? []);
        } else {
-          console.error("Failed to fetch members:", response.message);
+          console.error("Failed to fetch projects:", response.message);
        }
      } catch (error) {
-        console.error("Error fetching members:", error);
+        console.error("Error fetching projects:", error);
      }
    };
    void fetchUsers();
--- a/frontend/src/Components/InputField.tsx
+++ b/frontend/src/Components/InputField.tsx
@ -19,7 +19,7 @@ function InputField(props: {
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }): JSX.Element {
  return (
-    <div className="">
+    <div className="mb-4">
      <label
        className="block text-gray-700 text-sm font-sans font-bold mb-2"
        htmlFor={props.label}
--- a/frontend/src/Components/LoginField.tsx
+++ b/frontend/src/Components/LoginField.tsx
@ -25,24 +25,22 @@ function Login(props: {
 }): JSX.Element {
  return (
    <form className="flex flex-col items-center" onSubmit={props.handleSubmit}>
-      <div className="space-y-3">
-        <InputField
-          type="text"
-          label="Username"
-          onChange={(e) => {
-            props.setUsername(e.target.value);
-          }}
-          value={props.username}
-        />
-        <InputField
-          type="password"
-          label="Password"
-          onChange={(e) => {
-            props.setPassword(e.target.value);
-          }}
-          value={props.password}
-        />
-      </div>
+      <InputField
+        type="text"
+        label="Username"
+        onChange={(e) => {
+          props.setUsername(e.target.value);
+        }}
+        value={props.username}
+      />
+      <InputField
+        type="password"
+        label="Password"
+        onChange={(e) => {
+          props.setPassword(e.target.value);
+        }}
+        value={props.password}
+      />
      <Button
        text="Login"
        onClick={(): void => {
--- a/frontend/src/Components/MemberInfoModal.tsx
+++ b/frontend/src/Components/MemberInfoModal.tsx
@ -1,72 +0,0 @@
-import Button from "./Button";
-import DeleteUser from "./DeleteUser";
-import UserProjectListAdmin from "./UserProjectListAdmin";
-import { useState } from "react";
-import ChangeRoleView from "./ChangeRoleView";
-
-function MemberInfoModal(props: {
-  projectName: string;
-  username: string;
-  onClose: () => void;
-}): JSX.Element {
-  const [showRoles, setShowRoles] = useState(false);
-
-  const handleChangeRole = (): void => {
-    if (showRoles) {
-      setShowRoles(false);
-    } else {
-      setShowRoles(true);
-    }
-  };
-  return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
-      flex justify-center items-center"
-    >
-      <div className="border-4 border-black bg-white rounded-lg text-center flex flex-col">
-        <div className="mx-10">
-          <p className="font-bold text-[30px]">{props.username}</p>
-          <p
-            className="hover:font-bold hover:cursor-pointer underline"
-            onClick={handleChangeRole}
-          >
-            (Change Role)
-          </p>
-          {showRoles && (
-            <ChangeRoleView
-              projectName={props.projectName}
-              username={props.username}
-            />
-          )}
-          <h2 className="font-bold text-[20px]">Member of these projects:</h2>
-          <UserProjectListAdmin username={props.username} />
-          <div className="items-center space-x-6">
-            <Button
-              text={"Delete"}
-              onClick={function (): void {
-                if (
-                  window.confirm("Are you sure you want to delete this user?")
-                ) {
-                  DeleteUser({
-                    usernameToDelete: props.username,
-                  });
-                }
-              }}
-              type="button"
-            />
-            <Button
-              text={"Close"}
-              onClick={function (): void {
-                setShowRoles(false);
-                props.onClose();
-              }}
-              type="button"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default MemberInfoModal;
--- a/frontend/src/Components/ProjectInfoModal.tsx
+++ b/frontend/src/Components/ProjectInfoModal.tsx
@ -1,54 +1,31 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import Button from "./Button";
-import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
+import { UserProjectMember } from "../Types/goTypes";
+import GetUsersInProject from "./GetUsersInProject";
 import { Link } from "react-router-dom";
-import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
-import DeleteProject from "./DeleteProject";

 function ProjectInfoModal(props: {
+  isVisible: boolean;
  projectname: string;
  onClose: () => void;
  onClick: (username: string) => void;
 }): JSX.Element {
-  const [users, setUsers] = useState<ProjectMember[]>([]);
-  const [times, setTimes] = useState<projectTimes>();
-  const totalTime = useRef(0);
+  const [users, setUsers] = useState<UserProjectMember[]>([]);
  GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
-
-  GetProjectTimes({ setTimesProp: setTimes, projectName: props.projectname });
-
-  useEffect(() => {
-    if (times?.totalTime !== undefined) {
-      totalTime.current = times.totalTime;
-    }
-  }, [times]);
+  if (!props.isVisible) return <></>;

  return (
    <div
      className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
      flex justify-center items-center"
    >
-      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[61vh] w-[40] overflow-auto">
-        <div className="pl-10 pr-10">
+      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[47vh] w-[40] flex flex-col">
+        <div className="pl-20 pr-20">
          <h1 className="font-bold text-[32px] mb-[20px]">
-            {props.projectname}
+            {localStorage.getItem("projectName") ?? ""}
          </h1>
-          <div className="p-1 text-center">
-            <h2 className="text-[20px] font-bold">Statistics:</h2>
-          </div>
-          <div className="border-2 border-black rounded-lg h-[8vh] text-left divide-y-2 flex flex-col overflow-auto mx-10">
-            <p className="p-2">Number of members: {users.length}</p>
-            <p className="p-2">
-              Total time reported:{" "}
-              {Math.floor(totalTime.current / 60 / 24) + " d "}
-              {Math.floor((totalTime.current / 60) % 24) + " h "}
-              {(totalTime.current % 60) + " m "}
-            </p>
-          </div>
-          <div className="h-[6vh] p-7 text-center">
-            <h2 className="text-[20px] font-bold">Project members:</h2>
-          </div>
-          <div className="border-2 border-black p-2 rounded-lg text-center overflow-auto h-[24vh] mx-10">
+          <h2 className="font-bold text-[24px] mb-[20px]">Project members:</h2>
+          <div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
            <ul className="text-left font-medium space-y-2">
              <div></div>
              {users.map((user) => (
@ -68,44 +45,31 @@ function ProjectInfoModal(props: {
              ))}
            </ul>
          </div>
-          <div className="space-x-5 my-2">
+        </div>
+        <div className="space-x-16">
+          <Button
+            text={"Delete"}
+            onClick={function (): void {
+              //DELETE PROJECT
+            }}
+            type="button"
+          />
+          <Link to={"/adminProjectAddMember"}>
            <Button
-              text={"Delete"}
+              text={"Add Member"}
              onClick={function (): void {
-                if (
-                  window.confirm(
-                    "Are you sure you want to delete this project?",
-                  )
-                ) {
-                  DeleteProject({
-                    projectToDelete: props.projectname,
-                  });
-                }
+                return;
              }}
              type="button"
            />
-            <Link
-              to={{
-                pathname: "/adminProjectAddMember",
-                search: props.projectname,
-              }}
-            >
-              <Button
-                text={"Add Member"}
-                onClick={function (): void {
-                  return;
-                }}
-                type="button"
-              />
-            </Link>
-            <Button
-              text={"Close"}
-              onClick={function (): void {
-                props.onClose();
-              }}
-              type="button"
-            />
-          </div>
+          </Link>
+          <Button
+            text={"Close"}
+            onClick={function (): void {
+              props.onClose();
+            }}
+            type="button"
+          />
        </div>
      </div>
    </div>
--- a/frontend/src/Components/ProjectListAdmin.tsx
+++ b/frontend/src/Components/ProjectListAdmin.tsx
@ -1,7 +1,7 @@
 import { useState } from "react";
 import { NewProject } from "../Types/goTypes";
 import ProjectInfoModal from "./ProjectInfoModal";
-import MemberInfoModal from "./MemberInfoModal";
+import UserInfoModal from "./UserInfoModal";

 /**
 * A list of projects for admin manage projects page, that sets an onClick
@ -18,7 +18,7 @@ export function ProjectListAdmin(props: {
  projects: NewProject[];
 }): JSX.Element {
  const [projectModalVisible, setProjectModalVisible] = useState(false);
-  const [projectName, setProjectName] = useState("");
+  const [projectname, setProjectname] = useState("");
  const [userModalVisible, setUserModalVisible] = useState(false);
  const [username, setUsername] = useState("");

@ -28,36 +28,39 @@ export function ProjectListAdmin(props: {
  };

  const handleClickProject = (projectname: string): void => {
-    setProjectName(projectname);
+    setProjectname(projectname);
+    localStorage.setItem("projectName", projectname);
    setProjectModalVisible(true);
  };

  const handleCloseProject = (): void => {
-    setProjectName("");
+    setProjectname("");
    setProjectModalVisible(false);
  };

  const handleCloseUser = (): void => {
-    setUsername("");
+    setProjectname("");
    setUserModalVisible(false);
  };

  return (
    <>
-      {projectModalVisible && (
-        <ProjectInfoModal
-          onClose={handleCloseProject}
-          onClick={handleClickUser}
-          projectname={projectName}
-        />
-      )}
-      {userModalVisible && (
-        <MemberInfoModal
-          onClose={handleCloseUser}
-          username={username}
-          projectName={projectName}
-        />
-      )}
+      <ProjectInfoModal
+        onClose={handleCloseProject}
+        onClick={handleClickUser}
+        isVisible={projectModalVisible}
+        projectname={projectname}
+      />
+      <UserInfoModal
+        manageMember={true}
+        onClose={handleCloseUser}
+        //TODO: CHANGE TO REMOVE USER FROM PROJECT
+        onDelete={() => {
+          return;
+        }}
+        isVisible={userModalVisible}
+        username={username}
+      />
      <div>
        <ul className="font-bold underline text-[30px] cursor-pointer padding">
          {props.projects.map((project) => (
--- a/frontend/src/Components/ProjectMembers.tsx
+++ b/frontend/src/Components/ProjectMembers.tsx
@ -1,15 +1,31 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import GetUsersInProject, { ProjectMember } from "./GetUsersInProject";
+import { api } from "../API/API";
+import { UserProjectMember } from "../Types/goTypes";

 function ProjectMembers(): JSX.Element {
  const { projectName } = useParams();
-  const [projectMembers, setProjectMembers] = useState<ProjectMember[]>([]);
+  const [projectMembers, setProjectMembers] = useState<UserProjectMember[]>([]);

-  GetUsersInProject({
-    projectName: projectName ?? "",
-    setUsersProp: setProjectMembers,
-  });
+  useEffect(() => {
+    const getProjectMembers = async (): Promise<void> => {
+      const token = localStorage.getItem("accessToken") ?? "";
+      const response = await api.getAllUsersProject(projectName ?? "", token);
+      console.log(response);
+      if (response.success) {
+        setProjectMembers(response.data ?? []);
+      } else {
+        console.error(response.message);
+      }
+    };
+
+    void getProjectMembers();
+  }, [projectName]);
+
+  interface ProjectMember {
+    Username: string;
+    UserRole: string;
+  }

  return (
    <>
--- a/frontend/src/Components/Register.tsx
+++ b/frontend/src/Components/Register.tsx
@ -22,8 +22,6 @@ export default function Register(): JSX.Element {
    const response = await api.registerUser(newUser);
    if (response.success) {
      alert("User added!");
-      setPassword("");
-      setUsername("");
    } else {
      alert("User not added");
      setErrMessage(response.message ?? "Unknown error");
@ -49,24 +47,22 @@ export default function Register(): JSX.Element {
          <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
            Register New User
          </h3>
-          <div className="space-y-3">
-            <InputField
-              label="Username"
-              type="text"
-              value={username ?? ""}
-              onChange={(e) => {
-                setUsername(e.target.value);
-              }}
-            />
-            <InputField
-              label="Password"
-              type="password"
-              value={password ?? ""}
-              onChange={(e) => {
-                setPassword(e.target.value);
-              }}
-            />
-          </div>
+          <InputField
+            label="Username"
+            type="text"
+            value={username ?? ""}
+            onChange={(e) => {
+              setUsername(e.target.value);
+            }}
+          />
+          <InputField
+            label="Password"
+            type="password"
+            value={password ?? ""}
+            onChange={(e) => {
+              setPassword(e.target.value);
+            }}
+          />
          <div className="flex items-center justify-between">
            <Button
              text="Register"
--- a/frontend/src/Components/UserInfoModal.tsx
+++ b/frontend/src/Components/UserInfoModal.tsx
@ -1,99 +1,72 @@
+import { Link } from "react-router-dom";
 import Button from "./Button";
 import DeleteUser from "./DeleteUser";
 import UserProjectListAdmin from "./UserProjectListAdmin";
-import { useState } from "react";
-import InputField from "./InputField";
-import ChangeUsername from "./ChangeUsername";
-import { StrNameChange } from "../Types/goTypes";

 function UserInfoModal(props: {
  isVisible: boolean;
+  manageMember: boolean;
  username: string;
  onClose: () => void;
+  onDelete: (username: string) => void;
 }): JSX.Element {
-  const [showInput, setShowInput] = useState(false);
-  const [newUsername, setNewUsername] = useState("");
-  if (!props.isVisible) {
-    return <></>;
-  }
-
-  const handleChangeNameView = (): void => {
-    if (showInput) {
-      setShowInput(false);
-    } else {
-      setShowInput(true);
+  if (!props.isVisible) return <></>;
+  const ManageUserOrMember = (check: boolean): JSX.Element => {
+    if (check) {
+      return (
+        <Link to="/AdminChangeRole">
+          <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
+            (Change Role)
+          </p>
+        </Link>
+      );
    }
+    return (
+      <Link to="/AdminChangeUserName">
+        <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
+          (Change Username)
+        </p>
+      </Link>
+    );
  };
-
-  const handleClickChangeName = (): void => {
-    const nameChange: StrNameChange = {
-      prevName: props.username,
-      newName: newUsername,
-    };
-    ChangeUsername({ nameChange: nameChange });
-  };
-
  return (
    <div
      className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
      flex justify-center items-center"
    >
-      <div className="border-4 border-black bg-white rounded-lg text-center flex flex-col">
-        <div className="mx-10">
-          <p className="font-bold text-[30px]">{props.username}</p>
-          <p
-            className="mb-[10px] hover:font-bold hover:cursor-pointer underline"
-            onClick={handleChangeNameView}
-          >
-            (Change Username)
-          </p>
-          {showInput && (
-            <div>
-              <InputField
-                label={"New username"}
-                type={"text"}
-                value={newUsername}
-                onChange={function (e): void {
-                  e.defaultPrevented;
-                  setNewUsername(e.target.value);
-                }}
-              />
-              <Button
-                text={"Change"}
-                onClick={function (): void {
-                  handleClickChangeName();
-                }}
-                type={"submit"}
-              />
-            </div>
-          )}
-          <h2 className="font-bold text-[20px]">Member of these projects:</h2>
-          <UserProjectListAdmin username={props.username} />
-          <div className="items-center space-x-6">
-            <Button
-              text={"Delete"}
-              onClick={function (): void {
-                if (
-                  window.confirm("Are you sure you want to delete this user?")
-                ) {
-                  DeleteUser({
-                    usernameToDelete: props.username,
-                  });
-                }
-              }}
-              type="button"
-            />
-            <Button
-              text={"Close"}
-              onClick={function (): void {
-                setNewUsername("");
-                setShowInput(false);
-                props.onClose();
-              }}
-              type="button"
-            />
+      <div className="border-4 border-black bg-white p-2 rounded-lg text-center flex flex-col">
+        <p className="font-bold text-[30px]">{props.username}</p>
+        {ManageUserOrMember(props.manageMember)}
+        <div>
+          <h2 className="font-bold text-[22px] mb-[20px]">
+            Member of these projects:
+          </h2>
+          <div className="pr-6 pl-6">
+            <UserProjectListAdmin username={props.username} />
          </div>
        </div>
+        <div className="items-center space-x-6 pr-6 pl-6">
+          <Button
+            text={"Delete"}
+            onClick={function (): void {
+              if (
+                window.confirm("Are you sure you want to delete this user?")
+              ) {
+                DeleteUser({
+                  usernameToDelete: props.username,
+                });
+              }
+            }}
+            type="button"
+          />
+          <Button
+            text={"Close"}
+            onClick={function (): void {
+              props.onClose();
+            }}
+            type="button"
+          />
+        </div>
      </div>
    </div>
  );
--- a/frontend/src/Components/UserListAdmin.tsx
+++ b/frontend/src/Components/UserListAdmin.tsx
@ -1,5 +1,6 @@
 import { useState } from "react";
 import UserInfoModal from "./UserInfoModal";
+import DeleteUser from "./DeleteUser";

 /**
 * A list of users for admin manage users page, that sets an onClick
@ -29,7 +30,9 @@ export function UserListAdmin(props: { users: string[] }): JSX.Element {
  return (
    <>
      <UserInfoModal
+        manageMember={false}
        onClose={handleClose}
+        onDelete={() => DeleteUser}
        isVisible={modalVisible}
        username={username}
      />
--- a/frontend/src/Components/UserProjectListAdmin.tsx
+++ b/frontend/src/Components/UserProjectListAdmin.tsx
@ -1,17 +1,35 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { api } from "../API/API";
 import { Project } from "../Types/goTypes";
-import GetProjects from "./GetProjects";

 function UserProjectListAdmin(props: { username: string }): JSX.Element {
  const [projects, setProjects] = useState<Project[]>([]);

-  GetProjects({ setProjectsProp: setProjects, username: props.username });
+  useEffect(() => {
+    const fetchProjects = async (): Promise<void> => {
+      try {
+        const token = localStorage.getItem("accessToken") ?? "";
+        const username = props.username;
+
+        const response = await api.getUserProjects(username, token);
+        if (response.success) {
+          setProjects(response.data ?? []);
+        } else {
+          console.error("Failed to fetch projects:", response.message);
+        }
+      } catch (error) {
+        console.error("Error fetching projects:", error);
+      }
+    };
+
+    void fetchProjects();
+  }, [props.username]);

  return (
-    <div className="border-2 border-black bg-white rounded-lg text-left overflow-auto h-[15vh] font-medium">
-      <ul className="divide-y-2">
+    <div className="border-2 border-black bg-white p-2 rounded-lg text-center">
+      <ul>
        {projects.map((project) => (
-          <li className="mx-2 my-1" key={project.id}>
+          <li key={project.id}>
            <span>{project.name}</span>
          </li>
        ))}
--- a/frontend/src/Pages/AdminPages/AdminChangeUsername.tsx
+++ b/frontend/src/Pages/AdminPages/AdminChangeUsername.tsx
@ -0,0 +1,28 @@
+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 = (
+    <>
+      <ChangeUsername />
+    </>
+  );
+
+  const buttons = (
+    <>
+      <Button
+        text="Finish"
+        onClick={(): void => {
+          return;
+        }}
+        type="button"
+      />
+      <BackButton />
+    </>
+  );
+
+  return <BasicWindow content={content} buttons={buttons} />;
+}
+export default AdminChangeUsername;
--- a/frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx
@ -1,11 +1,11 @@
-import { useLocation } from "react-router-dom";
 import AddUserToProject from "../../Components/AddUserToProject";
 import BasicWindow from "../../Components/BasicWindow";

 function AdminProjectAddMember(): JSX.Element {
-  const projectName = useLocation().search.slice(1);
-  const content = <AddUserToProject projectName={projectName} />;
+  const content = <AddUserToProject />;
+
  const buttons = <></>;
+
  return <BasicWindow content={content} buttons={buttons} />;
 }
 export default AdminProjectAddMember;
--- a/frontend/src/Pages/AdminPages/AdminProjectChangeUserRole.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectChangeUserRole.tsx
@ -0,0 +1,23 @@
+import BackButton from "../../Components/BackButton";
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminProjectChangeUserRole(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Change"
+        onClick={(): void => {
+          return;
+        }}
+        type="button"
+      />
+      <BackButton />
+    </>
+  );
+
+  return <BasicWindow content={content} buttons={buttons} />;
+}
+export default AdminProjectChangeUserRole;
--- a/frontend/src/Pages/AdminPages/AdminProjectManageMembers.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectManageMembers.tsx
@ -0,0 +1,23 @@
+import BackButton from "../../Components/BackButton";
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminProjectManageMembers(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Add Member"
+        onClick={(): void => {
+          return;
+        }}
+        type="button"
+      />
+      <BackButton />
+    </>
+  );
+
+  return <BasicWindow content={content} buttons={buttons} />;
+}
+export default AdminProjectManageMembers;
--- a/frontend/src/Pages/AdminPages/AdminProjectPage.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectPage.tsx
@ -0,0 +1,33 @@
+import { useParams } from "react-router-dom";
+import { api } from "../../API/API";
+import BackButton from "../../Components/BackButton";
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+async function handleDeleteProject(
+  projectName: string,
+  token: string,
+): Promise<void> {
+  await api.removeProject(projectName, token);
+}
+
+function AdminProjectPage(): JSX.Element {
+  const content = <></>;
+  const { projectName } = useParams();
+  const token = localStorage.getItem("accessToken");
+
+  const buttons = (
+    <>
+      <Button
+        text="Delete"
+        onClick={() => handleDeleteProject(projectName, token)}
+        type="button"
+      />
+      <BackButton />
+    </>
+  );
+
+  return <BasicWindow content={content} buttons={buttons} />;
+}
+
+export default AdminProjectPage;
--- a/frontend/src/Pages/AdminPages/AdminProjectViewMemberInfo.tsx
+++ b/frontend/src/Pages/AdminPages/AdminProjectViewMemberInfo.tsx
@ -0,0 +1,23 @@
+import BackButton from "../../Components/BackButton";
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+
+function AdminProjectViewMemberInfo(): JSX.Element {
+  const content = <></>;
+
+  const buttons = (
+    <>
+      <Button
+        text="Remove"
+        onClick={(): void => {
+          return;
+        }}
+        type="button"
+      />
+      <BackButton />
+    </>
+  );
+
+  return <BasicWindow content={content} buttons={buttons} />;
+}
+export default AdminProjectViewMemberInfo;
--- a/frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx
+++ b/frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx
@ -0,0 +1,28 @@
+import BasicWindow from "../../Components/BasicWindow";
+import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
+import UserProjectListAdmin from "../../Components/UserProjectListAdmin";
+
+function AdminViewUserInfo(): JSX.Element {
+  const content = (
+    <>
+      <UserProjectListAdmin />
+    </>
+  );
+
+  const buttons = (
+    <>
+      <Button
+        text="Delete"
+        onClick={(): void => {
+          return;
+        }}
+        type="button"
+      />
+      <BackButton />
+    </>
+  );
+
+  return <BasicWindow content={content} buttons={buttons} />;
+}
+export default AdminViewUserInfo;
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@ -18,11 +18,17 @@ import PMTotalTimeRole from "./Pages/ProjectManagerPages/PMTotalTimeRole.tsx";
 import PMUnsignedReports from "./Pages/ProjectManagerPages/PMUnsignedReports.tsx";
 import PMViewUnsignedReport from "./Pages/ProjectManagerPages/PMViewUnsignedReport.tsx";
 import AdminManageUsers from "./Pages/AdminPages/AdminManageUsers.tsx";
+import AdminViewUserInfo from "./Pages/AdminPages/AdminViewUserInfo.tsx";
 import AdminManageProjects from "./Pages/AdminPages/AdminManageProjects.tsx";
 import AdminAddProject from "./Pages/AdminPages/AdminAddProject.tsx";
 import AdminAddUser from "./Pages/AdminPages/AdminAddUser.tsx";
+import AdminChangeUsername from "./Pages/AdminPages/AdminChangeUsername.tsx";
 import AdminProjectAddMember from "./Pages/AdminPages/AdminProjectAddMember.tsx";
+import AdminProjectChangeUserRole from "./Pages/AdminPages/AdminProjectChangeUserRole.tsx";
+import AdminProjectManageMembers from "./Pages/AdminPages/AdminProjectManageMembers.tsx";
 import AdminProjectStatistics from "./Pages/AdminPages/AdminProjectStatistics.tsx";
+import AdminProjectViewMemberInfo from "./Pages/AdminPages/AdminProjectViewMemberInfo.tsx";
+import AdminProjectPage from "./Pages/AdminPages/AdminProjectPage.tsx";
 import NotFoundPage from "./Pages/NotFoundPage.tsx";
 import UnauthorizedPage from "./Pages/UnauthorizedPage.tsx";
 import PMViewOtherUsersTR from "./Pages/ProjectManagerPages/PMViewOtherUsersTR.tsx";
@ -94,14 +100,34 @@ const router = createBrowserRouter([
    path: "/PMViewUnsignedReport/:projectName/:username/:fetchedWeek",
    element: <PMViewUnsignedReport />,
  },
+  {
+    path: "/adminChangeUsername",
+    element: <AdminChangeUsername />,
+  },
  {
    path: "/adminProjectAddMember",
    element: <AdminProjectAddMember />,
  },
+  {
+    path: "/adminProjectChangeUserRole",
+    element: <AdminProjectChangeUserRole />,
+  },
+  {
+    path: "/adminProjectManageMembers",
+    element: <AdminProjectManageMembers />,
+  },
+  {
+    path: "/adminProjectPage",
+    element: <AdminProjectPage />,
+  },
  {
    path: "/adminProjectStatistics",
    element: <AdminProjectStatistics />,
  },
+  {
+    path: "/adminProjectViewMembers",
+    element: <AdminProjectViewMemberInfo />,
+  },
  {
    path: "/addProject",
    element: <AdminAddProject />,
@ -110,6 +136,10 @@ const router = createBrowserRouter([
    path: "/adminAddUser",
    element: <AdminAddUser />,
  },
+  {
+    path: "/adminUserInfo",
+    element: <AdminViewUserInfo />,
+  },
  {
    path: "/adminManageProject",
    element: <AdminManageProjects />,