diff --git a/frontend/src/Components/DisplayUserProjects.tsx b/frontend/src/Components/DisplayUserProjects.tsx
new file mode 100644
index 0000000..266f1ce
--- /dev/null
+++ b/frontend/src/Components/DisplayUserProjects.tsx
@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+import { Project } from "../Types/goTypes";
+import { Link } from "react-router-dom";
+import { api } from "../API/API";
+
+function DisplayUserProject(): JSX.Element {
+  const [projects, setProjects] = useState<Project[]>([]);
+
+  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);
+    }
+  };
+  // Call getProjects when the component mounts
+  useEffect(() => {
+    void getProjects();
+  }, []);
+
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
+        {projects.map((project, index) => (
+          <Link to={`/project/${project.name}`} key={index}>
+            <h1 className="font-bold underline text-[30px] cursor-pointer">
+              {project.name}
+            </h1>
+          </Link>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default DisplayUserProject;
diff --git a/frontend/src/Pages/YourProjectsPage.tsx b/frontend/src/Pages/YourProjectsPage.tsx
index b5644c3..c048746 100644
--- a/frontend/src/Pages/YourProjectsPage.tsx
+++ b/frontend/src/Pages/YourProjectsPage.tsx
@@ -1,39 +1,10 @@
-import { useState, useEffect } from "react";
-import { Project } from "../Types/goTypes";
-import { Link } from "react-router-dom";
 import BasicWindow from "../Components/BasicWindow";
-import { api } from "../API/API";
+import DisplayUserProjects from "../Components/DisplayUserProjects";
 
 function UserProjectPage(): JSX.Element {
-  const [projects, setProjects] = useState<Project[]>([]);
-
-  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);
-    }
-  };
-  // Call getProjects when the component mounts
-  useEffect(() => {
-    void getProjects();
-  }, []);
-
   const content = (
     <>
-      <h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
-      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
-        {projects.map((project, index) => (
-          <Link to={`/project/${project.name}`} key={index}>
-            <h1 className="font-bold underline text-[30px] cursor-pointer">
-              {project.name}
-            </h1>
-          </Link>
-        ))}
-      </div>
+      <DisplayUserProjects />
     </>
   );