diff --git a/backend/main.go b/backend/main.go
index 282f2c2..0c66369 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -126,7 +126,7 @@ func main() {
 	api.Delete("/removeUserFromProject/:projectName", projects.RemoveUserFromProject)
 	api.Delete("/removeProject/:projectName", projects.RemoveProject)
 	api.Delete("/project/:projectID", projects.DeleteProject)
-	api.Put("/ChangeProjectName/:projectName", projects.ChangeProjectName)
+	api.Put("/changeProjectName/:projectName", projects.ChangeProjectName)
 
 	// All report related routes
 	// reportGroup := api.Group("/report") // Not currently in use
diff --git a/frontend/src/Components/ChangeProjectName.tsx b/frontend/src/Components/ChangeProjectName.tsx
new file mode 100644
index 0000000..8348217
--- /dev/null
+++ b/frontend/src/Components/ChangeProjectName.tsx
@@ -0,0 +1,36 @@
+import { APIResponse, api } from "../API/API";
+
+/**
+ * Changes the name of a project
+ * @param {string} props.projectName - Current project name
+ * @param {string} props.newProjectName - New project name
+ * @returns {void} - Nothing
+ */
+export default function ChangeProjectName(props: {
+  projectName: string;
+  newProjectName: string;
+}): void {
+  if (props.projectName === "" || props.projectName === props.newProjectName) {
+    alert("You have to give a new name\n\nName not changed");
+    return;
+  }
+  api
+    .changeProjectName(
+      props.projectName,
+      props.newProjectName,
+      localStorage.getItem("accessToken") ?? "",
+    )
+    .then((response: APIResponse<string>) => {
+      if (response.success) {
+        alert("Name changed successfully");
+        location.reload();
+      } else {
+        alert("Name not changed, name could be taken");
+        console.error(response.message);
+      }
+    })
+    .catch((error) => {
+      alert("Name not changed");
+      console.error("An error occurred during change:", error);
+    });
+}
diff --git a/frontend/src/Components/ProjectInfoModal.tsx b/frontend/src/Components/ProjectInfoModal.tsx
index 71a72fb..4be3397 100644
--- a/frontend/src/Components/ProjectInfoModal.tsx
+++ b/frontend/src/Components/ProjectInfoModal.tsx
@@ -8,6 +8,7 @@ import InputField from "./InputField";
 import ProjectNameInput from "./Inputs/ProjectNameInput";
 import { alphanumeric } from "../Data/regex";
 import { projNameHighLimit, projNameLowLimit } from "../Data/constants";
+import ChangeProjectName from "./ChangeProjectName";
 
 function ProjectInfoModal(props: {
   projectname: string;
@@ -50,9 +51,10 @@ function ProjectInfoModal(props: {
         `Are you sure you want to change name of ${props.projectname} to ${newProjName}?`,
       )
     ) {
-      //TODO: change and insert change name functionality
-      alert("Not implemented yet");
-      setNewProjName("");
+      ChangeProjectName({
+        projectName: props.projectname,
+        newProjectName: newProjName,
+      });
     } else {
       alert("Name was not changed!");
     }