From 6c1efa572f248a025d34017f693e63a5554e53ad Mon Sep 17 00:00:00 2001
From: Ifeoluwa <pheobeayo@gmail.com>
Date: Wed, 4 Feb 2026 18:42:57 +0100
Subject: [PATCH 1/3] add projects to the frontend

---
 frontend/.astro/data-store.json               |   2 +-
 frontend/.astro/settings.json                 |   2 +-
 frontend/.astro/types.d.ts                    |   1 +
 frontend/src/components/AppSidebar.tsx        |   7 +-
 frontend/src/components/pages/ProjectPage.tsx |  12 +
 .../src/components/pages/ProjectsPage.tsx     |  20 ++
 .../projects/CreateProjectModal.tsx           | 155 +++++++++++
 .../projects/DeleteConfirmationDialogue.tsx   |  98 +++++++
 .../components/projects/EditProjectModal.tsx  | 162 ++++++++++++
 .../src/components/projects/ProjectCard.tsx   | 136 ++++++++++
 .../src/components/projects/ProjectsList.tsx  | 191 ++++++++++++++
 .../src/components/projects/ProjectsMain.tsx  | 196 ++++++++++++++
 .../projects/project-page/ProjectActions.tsx  |  96 +++++++
 .../project-page/ProjectDescription.tsx       |  20 ++
 .../projects/project-page/ProjectHeader.tsx   |  88 +++++++
 .../projects/project-page/ProjectMain.tsx     |  71 +++++
 frontend/src/hooks/projects/useprojects.ts    | 248 ++++++++++++++++++
 .../src/lib/constants/projectConstants.ts     |  99 +++++++
 frontend/src/lib/types/projects.d.ts          |  27 ++
 frontend/src/pages/project/[id].astro         |  10 +
 frontend/src/pages/projects.astro             |   8 +
 21 files changed, 1646 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/pages/ProjectPage.tsx
 create mode 100644 frontend/src/components/pages/ProjectsPage.tsx
 create mode 100644 frontend/src/components/projects/CreateProjectModal.tsx
 create mode 100644 frontend/src/components/projects/DeleteConfirmationDialogue.tsx
 create mode 100644 frontend/src/components/projects/EditProjectModal.tsx
 create mode 100644 frontend/src/components/projects/ProjectCard.tsx
 create mode 100644 frontend/src/components/projects/ProjectsList.tsx
 create mode 100644 frontend/src/components/projects/ProjectsMain.tsx
 create mode 100644 frontend/src/components/projects/project-page/ProjectActions.tsx
 create mode 100644 frontend/src/components/projects/project-page/ProjectDescription.tsx
 create mode 100644 frontend/src/components/projects/project-page/ProjectHeader.tsx
 create mode 100644 frontend/src/components/projects/project-page/ProjectMain.tsx
 create mode 100644 frontend/src/hooks/projects/useprojects.ts
 create mode 100644 frontend/src/lib/constants/projectConstants.ts
 create mode 100644 frontend/src/lib/types/projects.d.ts
 create mode 100644 frontend/src/pages/project/[id].astro
 create mode 100644 frontend/src/pages/projects.astro

diff --git a/frontend/.astro/data-store.json b/frontend/.astro/data-store.json
index 805c3fe..4af4b92 100644
--- a/frontend/.astro/data-store.json
+++ b/frontend/.astro/data-store.json
@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.14.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"server\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":\"0.0.0.0\",\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\",\"entrypoint\":\"astro/assets/endpoint/node\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false},\"legacy\":{\"collections\":false},\"session\":{\"driver\":\"fs-lite\",\"options\":{\"base\":\"/app/node_modules/.astro/sessions\"}}}"]
\ No newline at end of file
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.14.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"server\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":\"0.0.0.0\",\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\",\"entrypoint\":\"astro/assets/endpoint/node\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false},\"legacy\":{\"collections\":false},\"session\":{\"driver\":\"fs-lite\",\"options\":{\"base\":\"/home/phoebe/TheGuildGenesis/frontend/node_modules/.astro/sessions\"}}}"]
\ No newline at end of file
diff --git a/frontend/.astro/settings.json b/frontend/.astro/settings.json
index 2e8ce89..822e808 100644
--- a/frontend/.astro/settings.json
+++ b/frontend/.astro/settings.json
@@ -1,6 +1,6 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1761559074026
+		"lastUpdateCheck": 1770210836100
 	},
 	"eslint.validate": [
 		"javascript",
diff --git a/frontend/.astro/types.d.ts b/frontend/.astro/types.d.ts
index f964fe0..03d7cc4 100644
--- a/frontend/.astro/types.d.ts
+++ b/frontend/.astro/types.d.ts
@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />
\ No newline at end of file
diff --git a/frontend/src/components/AppSidebar.tsx b/frontend/src/components/AppSidebar.tsx
index 870225d..b172a0a 100644
--- a/frontend/src/components/AppSidebar.tsx
+++ b/frontend/src/components/AppSidebar.tsx
@@ -1,4 +1,4 @@
-import { Smile, BadgeCheck, Home, BookOpen , Table2 } from "lucide-react";
+import { Smile, BadgeCheck, Home, BookOpen , Table2, FolderKanban } from "lucide-react";
 
 import {
   Sidebar,
@@ -38,6 +38,11 @@ const items = [
     url: "/leaderboard",
     icon: Table2,
   },
+   {
+    title: "Projects",
+    url: "/projects",
+    icon: FolderKanban,
+  },
 ];
 
 export function AppSidebar() {
diff --git a/frontend/src/components/pages/ProjectPage.tsx b/frontend/src/components/pages/ProjectPage.tsx
new file mode 100644
index 0000000..103c1fc
--- /dev/null
+++ b/frontend/src/components/pages/ProjectPage.tsx
@@ -0,0 +1,12 @@
+import { AppWrapper } from "@/components/AppWrapper";
+import { ProjectMain } from "@/components/projects/project-page/ProjectMain";
+
+type Props = { id?: string };
+
+export default function ProjectPage({ id }: Props) {
+  return (
+    <AppWrapper>
+      <ProjectMain id={id || ""} />
+    </AppWrapper>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/pages/ProjectsPage.tsx b/frontend/src/components/pages/ProjectsPage.tsx
new file mode 100644
index 0000000..ac9ba0d
--- /dev/null
+++ b/frontend/src/components/pages/ProjectsPage.tsx
@@ -0,0 +1,20 @@
+import { AppWrapper } from "@/components/AppWrapper";
+import { ProjectsMain } from "@/components/projects/ProjectsMain";
+
+export function ProjectsPage() {
+  return (
+    <AppWrapper>
+      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
+        <h1 className="mb-6 text-3xl font-bold tracking-tight text-gray-900">
+          Projects
+        </h1>
+        <p className="mb-8 max-w-2xl text-gray-600">
+          Showcase your work. Projects can be created by anyone and are managed by their owners.
+        </p>
+        <ProjectsMain />
+      </section>
+    </AppWrapper>
+  );
+}
+
+export default ProjectsPage;
\ No newline at end of file
diff --git a/frontend/src/components/projects/CreateProjectModal.tsx b/frontend/src/components/projects/CreateProjectModal.tsx
new file mode 100644
index 0000000..c64d151
--- /dev/null
+++ b/frontend/src/components/projects/CreateProjectModal.tsx
@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import { useCreateProject } from '@/hooks/projects/useprojects';
+import { Button } from '@/components/ui/button';
+import { Loader2, X } from 'lucide-react';
+
+interface CreateProjectModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function CreateProjectModal({ isOpen, onClose }: CreateProjectModalProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [validationError, setValidationError] = useState('');
+
+  const createProjectMutation = useCreateProject();
+
+  useEffect(() => {
+    if (isOpen) {
+      setName('');
+      setDescription('');
+      setValidationError('');
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (createProjectMutation.isSuccess) {
+      onClose();
+    }
+  }, [createProjectMutation.isSuccess, onClose]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setValidationError('');
+
+    // Validation
+    if (!name.trim()) {
+      setValidationError('Project name is required');
+      return;
+    }
+
+    if (name.length > 100) {
+      setValidationError('Project name must be 100 characters or less');
+      return;
+    }
+
+    if (!description.trim()) {
+      setValidationError('Project description is required');
+      return;
+    }
+
+    if (description.length > 500) {
+      setValidationError('Description must be 500 characters or less');
+      return;
+    }
+
+    createProjectMutation.mutate({ input: { name: name.trim(), description: description.trim() } });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg max-w-md w-full p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-2xl font-bold text-gray-900">Create Project</h2>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            disabled={createProjectMutation.isPending}
+            className="text-gray-400 hover:text-gray-600"
+          >
+            <X />
+          </Button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Project Name */}
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+              Project Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="My Awesome Project"
+              maxLength={100}
+              disabled={createProjectMutation.isPending}
+            />
+            <p className="text-xs text-gray-500 mt-1">{name.length}/100 characters</p>
+          </div>
+
+          {/* Description */}
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+              Description <span className="text-red-500">*</span>
+            </label>
+            <textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+              placeholder="Describe your project..."
+              rows={4}
+              maxLength={500}
+              disabled={createProjectMutation.isPending}
+            />
+            <p className="text-xs text-gray-500 mt-1">{description.length}/500 characters</p>
+          </div>
+
+          {/* Error Messages */}
+          {(validationError || createProjectMutation.error) && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+              <p className="text-red-800 text-sm">
+                {validationError || (createProjectMutation.error as Error)?.message}
+              </p>
+            </div>
+          )}
+
+          {/* Action Buttons */}
+          <div className="flex gap-3 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onClose}
+              disabled={createProjectMutation.isPending}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="default"
+              disabled={createProjectMutation.isPending}
+              className="flex-1 bg-black hover:bg-gray-800"
+            >
+              {createProjectMutation.isPending ? (
+                <>
+                  <Loader2 className="animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                'Create Project'
+              )}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/projects/DeleteConfirmationDialogue.tsx b/frontend/src/components/projects/DeleteConfirmationDialogue.tsx
new file mode 100644
index 0000000..86a44c2
--- /dev/null
+++ b/frontend/src/components/projects/DeleteConfirmationDialogue.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react';
+import { useDeleteProject } from '@/hooks/projects/useprojects';
+
+interface DeleteConfirmationDialogProps {
+  isOpen: boolean;
+  projectId: string | null;
+  projectName: string;
+  onClose: () => void;
+}
+
+export default function DeleteConfirmationDialog({
+  isOpen,
+  projectId,
+  projectName,
+  onClose,
+}: DeleteConfirmationDialogProps) {
+  const deleteProjectMutation = useDeleteProject();
+
+  useEffect(() => {
+    if (deleteProjectMutation.isSuccess) {
+      onClose();
+    }
+  }, [deleteProjectMutation.isSuccess, onClose]);
+
+  const handleConfirm = () => {
+    if (projectId) {
+      deleteProjectMutation.mutate({ id: projectId });
+    }
+  };
+
+  if (!isOpen || !projectId) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg max-w-md w-full p-6">
+        {/* Warning Icon */}
+        <div className="flex justify-center mb-4">
+          <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
+            <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+        </div>
+
+        {/* Title */}
+        <h2 className="text-xl font-bold text-gray-900 text-center mb-2">
+          Delete Project
+        </h2>
+
+        {/* Message */}
+        <p className="text-gray-600 text-center mb-6">
+          Are you sure you want to delete{' '}
+          <span className="font-semibold text-gray-900">"{projectName}"</span>?
+          This action cannot be undone.
+        </p>
+
+        {/* Error Message */}
+        {deleteProjectMutation.error && (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
+            <p className="text-red-800 text-sm">
+              {(deleteProjectMutation.error as Error)?.message || 'Failed to delete project'}
+            </p>
+          </div>
+        )}
+
+        {/* Action Buttons */}
+        <div className="flex gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+            disabled={deleteProjectMutation.isPending}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleConfirm}
+            className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:bg-red-400 disabled:cursor-not-allowed flex items-center justify-center"
+            disabled={deleteProjectMutation.isPending}
+          >
+            {deleteProjectMutation.isPending ? (
+              <>
+                <svg className="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+                Deleting...
+              </>
+            ) : (
+              'Delete Project'
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/projects/EditProjectModal.tsx b/frontend/src/components/projects/EditProjectModal.tsx
new file mode 100644
index 0000000..58266ed
--- /dev/null
+++ b/frontend/src/components/projects/EditProjectModal.tsx
@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from 'react';
+import type { Project } from '@/lib/types/projects';
+import { useUpdateProject } from '@/hooks/projects/useprojects';
+import { Button } from '@/components/ui/button';
+import { Loader2, X } from 'lucide-react';
+
+interface EditProjectModalProps {
+  isOpen: boolean;
+  project: Project | null;
+  onClose: () => void;
+}
+
+export default function EditProjectModal({ isOpen, project, onClose }: EditProjectModalProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [validationError, setValidationError] = useState('');
+
+  const updateProjectMutation = useUpdateProject();
+
+  useEffect(() => {
+    if (isOpen && project) {
+      setName(project.name);
+      setDescription(project.description);
+      setValidationError('');
+    }
+  }, [isOpen, project]);
+
+  useEffect(() => {
+    if (updateProjectMutation.isSuccess) {
+      onClose();
+    }
+  }, [updateProjectMutation.isSuccess, onClose]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setValidationError('');
+
+    if (!project) return;
+
+    // Validation
+    if (!name.trim()) {
+      setValidationError('Project name is required');
+      return;
+    }
+
+    if (name.length > 100) {
+      setValidationError('Project name must be 100 characters or less');
+      return;
+    }
+
+    if (!description.trim()) {
+      setValidationError('Project description is required');
+      return;
+    }
+
+    if (description.length > 500) {
+      setValidationError('Description must be 500 characters or less');
+      return;
+    }
+
+    updateProjectMutation.mutate({
+      id: project.id,
+      input: { name: name.trim(), description: description.trim() },
+    });
+  };
+
+  if (!isOpen || !project) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg max-w-md w-full p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-2xl font-bold text-gray-900">Edit Project</h2>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            disabled={updateProjectMutation.isPending}
+            className="text-gray-400 hover:text-gray-600"
+          >
+            <X />
+          </Button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Project Name */}
+          <div>
+            <label htmlFor="edit-name" className="block text-sm font-medium text-gray-700 mb-1">
+              Project Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              id="edit-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="My Awesome Project"
+              maxLength={100}
+              disabled={updateProjectMutation.isPending}
+            />
+            <p className="text-xs text-gray-500 mt-1">{name.length}/100 characters</p>
+          </div>
+
+          {/* Description */}
+          <div>
+            <label htmlFor="edit-description" className="block text-sm font-medium text-gray-700 mb-1">
+              Description <span className="text-red-500">*</span>
+            </label>
+            <textarea
+              id="edit-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+              placeholder="Describe your project..."
+              rows={4}
+              maxLength={500}
+              disabled={updateProjectMutation.isPending}
+            />
+            <p className="text-xs text-gray-500 mt-1">{description.length}/500 characters</p>
+          </div>
+
+          {/* Error Messages */}
+          {(validationError || updateProjectMutation.error) && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+              <p className="text-red-800 text-sm">
+                {validationError || (updateProjectMutation.error as Error)?.message}
+              </p>
+            </div>
+          )}
+
+          {/* Action Buttons */}
+          <div className="flex gap-3 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onClose}
+              disabled={updateProjectMutation.isPending}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="default"
+              disabled={updateProjectMutation.isPending}
+              className="flex-1 bg-black hover:bg-gray-800"
+            >
+              {updateProjectMutation.isPending ? (
+                <>
+                  <Loader2 className="animate-spin" />
+                  Updating...
+                </>
+              ) : (
+                'Update Project'
+              )}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/projects/ProjectCard.tsx b/frontend/src/components/projects/ProjectCard.tsx
new file mode 100644
index 0000000..d13a655
--- /dev/null
+++ b/frontend/src/components/projects/ProjectCard.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import type { Project } from '@/lib/types/projects';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardAction,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Pencil, Trash2, User, Calendar, Check } from 'lucide-react';
+
+interface ProjectCardProps {
+  project: Project;
+  isOwner: boolean;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+const formatAddress = (address: string): string => {
+  if (!address) return '';
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+};
+
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', { 
+    year: 'numeric', 
+    month: 'short', 
+    day: 'numeric' 
+  });
+};
+
+export default function ProjectCard({ 
+  project, 
+  isOwner, 
+  onEdit, 
+  onDelete 
+}: ProjectCardProps) {
+  return (
+    <Card 
+      with3D={true}
+      foregroundIcon={
+        <svg 
+          className="w-24 h-24 text-blue-600/10" 
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+        </svg>
+      }
+      className="group hover:shadow-xl transition-shadow duration-300"
+    >
+      <CardHeader>
+        {/* Project Icon */}
+        <div className="flex justify-center mb-4">
+          <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
+            <svg 
+              className="w-8 h-8 text-blue-600" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path 
+                strokeLinecap="round" 
+                strokeLinejoin="round" 
+                strokeWidth={2} 
+                d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" 
+              />
+            </svg>
+          </div>
+        </div>
+
+        <CardTitle className="text-xl text-center">
+          {project.name}
+        </CardTitle>
+        
+        <CardDescription className="text-center line-clamp-3 min-h-[60px]">
+          {project.description}
+        </CardDescription>
+
+        {/* Action Buttons (only for owner) */}
+        {isOwner && (
+          <CardAction>
+            <div className="flex gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onEdit}
+                className="text-blue-600 hover:bg-blue-50 hover:text-blue-700"
+                title="Edit project"
+              >
+                <Pencil />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onDelete}
+                className="text-red-600 hover:bg-red-50 hover:text-red-700"
+                title="Delete project"
+              >
+                <Trash2 />
+              </Button>
+            </div>
+          </CardAction>
+        )}
+      </CardHeader>
+
+      <CardContent>
+        {/* Owner Info */}
+        <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground mb-2">
+          <User className="w-4 h-4" />
+          <span className="truncate">{formatAddress(project.ownerAddress)}</span>
+        </div>
+
+        {/* Created Date */}
+        <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
+          <Calendar className="w-4 h-4" />
+          <span>{formatDate(project.createdAt)}</span>
+        </div>
+      </CardContent>
+
+      {/* Owner Badge */}
+      {isOwner && (
+        <CardFooter className="border-t">
+          <div className="flex items-center gap-2 text-xs text-blue-600 font-medium">
+            <Check className="w-4 h-4" />
+            Your Project
+          </div>
+        </CardFooter>
+      )}
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/projects/ProjectsList.tsx b/frontend/src/components/projects/ProjectsList.tsx
new file mode 100644
index 0000000..048c862
--- /dev/null
+++ b/frontend/src/components/projects/ProjectsList.tsx
@@ -0,0 +1,191 @@
+import React, { useState, useMemo } from 'react';
+import { useAccount } from 'wagmi';
+import type { Project } from '@/lib/types/projects';
+import { useProjects } from '@/hooks/projects/useprojects';
+import { Button } from '@/components/ui/button';
+import ProjectCard from '@/components/projects/ProjectCard';
+import CreateProjectModal from '@/components/projects/CreateProjectModal';
+import EditProjectModal from '@/components/projects/EditProjectModal';
+import DeleteConfirmationDialog from '@/components/projects/DeleteConfirmationDialogue';
+
+export default function ProjectsList() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [editingProject, setEditingProject] = useState<Project | null>(null);
+  const [deletingProject, setDeletingProject] = useState<{ id: string; name: string } | null>(null);
+
+  const { address } = useAccount();
+  const { data: projects, isLoading, error } = useProjects();
+
+  // Filter projects based on search query
+  const filteredProjects = useMemo(() => {
+    if (!projects) return [];
+    
+    if (!searchQuery.trim()) {
+      return projects;
+    }
+
+    const query = searchQuery.toLowerCase();
+    return projects.filter(
+      (project) =>
+        project.name.toLowerCase().includes(query) ||
+        project.description.toLowerCase().includes(query)
+    );
+  }, [projects, searchQuery]);
+
+  const handleEdit = (project: Project) => {
+    setEditingProject(project);
+  };
+
+  const handleDelete = (project: Project) => {
+    setDeletingProject({ id: project.id, name: project.name });
+  };
+
+  const isOwner = (project: Project): boolean => {
+    if (!address) return false;
+    return project.ownerAddress.toLowerCase() === address.toLowerCase();
+  };
+
+  return (
+    <>
+      {/* Search and Create Section */}
+      <div className="flex flex-col sm:flex-row gap-4 mb-8">
+        <div className="flex-1 relative">
+          <svg
+            className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          <input
+            type="text"
+            placeholder="Search projects..."
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        {address && (
+          <Button onClick={() => setShowCreateModal(true)}>
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+            </svg>
+            Create Project
+          </Button>
+        )}
+      </div>
+
+      {/* Loading State */}
+      {isLoading && (
+        <div className="flex justify-center items-center py-12">
+          <div className="flex flex-col items-center gap-4">
+            <svg className="animate-spin h-12 w-12 text-gray-400" viewBox="0 0 24 24">
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+                fill="none"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+            <p className="text-gray-600">Loading projects...</p>
+          </div>
+        </div>
+      )}
+
+      {/* Error State */}
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
+          <svg className="w-12 h-12 text-red-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <h3 className="text-lg font-semibold text-red-900 mb-2">Error Loading Projects</h3>
+          <p className="text-red-700">{(error as Error)?.message || 'Failed to load projects'}</p>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!isLoading && !error && filteredProjects.length === 0 && (
+        <div className="text-center py-12">
+          <svg
+            className="w-16 h-16 text-gray-300 mx-auto mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+            />
+          </svg>
+          <h3 className="text-xl font-semibold text-gray-700 mb-2">No projects found</h3>
+          <p className="text-gray-500 mb-6">
+            {searchQuery
+              ? 'Try adjusting your search criteria'
+              : 'Be the first to create a project!'}
+          </p>
+          {!searchQuery && address && (
+            <Button onClick={() => setShowCreateModal(true)}>
+              Create Project
+            </Button>
+          )}
+          {!address && !searchQuery && (
+            <p className="text-gray-500 text-sm mt-4">
+              Connect your wallet to create projects
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Projects Grid */}
+      {!isLoading && !error && filteredProjects.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredProjects.map((project) => (
+            <ProjectCard
+              key={project.id}
+              project={project}
+              isOwner={isOwner(project)}
+              onEdit={() => handleEdit(project)}
+              onDelete={() => handleDelete(project)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Modals */}
+      <CreateProjectModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+      />
+
+      <EditProjectModal
+        isOpen={!!editingProject}
+        project={editingProject}
+        onClose={() => setEditingProject(null)}
+      />
+
+      <DeleteConfirmationDialog
+        isOpen={!!deletingProject}
+        projectId={deletingProject?.id || null}
+        projectName={deletingProject?.name || ''}
+        onClose={() => setDeletingProject(null)}
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/projects/ProjectsMain.tsx b/frontend/src/components/projects/ProjectsMain.tsx
new file mode 100644
index 0000000..30f2663
--- /dev/null
+++ b/frontend/src/components/projects/ProjectsMain.tsx
@@ -0,0 +1,196 @@
+import  { useState, useMemo } from 'react';
+import { useAccount } from 'wagmi';
+import type { Project } from '@/lib/types/projects';
+import { useProjects } from '@/hooks/projects/useprojects';
+import ProjectCard from '@/components/projects/ProjectCard';
+import CreateProjectModal from '@/components/projects/CreateProjectModal';
+import EditProjectModal from '@/components/projects/EditProjectModal';
+import DeleteConfirmationDialog from '@/components/projects/DeleteConfirmationDialogue';
+
+export function ProjectsMain() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [editingProject, setEditingProject] = useState<Project | null>(null);
+  const [deletingProject, setDeletingProject] = useState<{ id: string; name: string } | null>(null);
+
+  const { address } = useAccount();
+  const { data: projects, isLoading, error } = useProjects();
+
+  // Filter projects based on search query
+  const filteredProjects = useMemo(() => {
+    if (!projects) return [];
+    
+    if (!searchQuery.trim()) {
+      return projects;
+    }
+
+    const query = searchQuery.toLowerCase();
+    return projects.filter(
+      (project) =>
+        project.name.toLowerCase().includes(query) ||
+        project.description.toLowerCase().includes(query)
+    );
+  }, [projects, searchQuery]);
+
+  const handleEdit = (project: Project) => {
+    setEditingProject(project);
+  };
+
+  const handleDelete = (project: Project) => {
+    setDeletingProject({ id: project.id, name: project.name });
+  };
+
+  const isOwner = (project: Project): boolean => {
+    if (!address) return false;
+    return project.ownerAddress.toLowerCase() === address.toLowerCase();
+  };
+
+  return (
+    <>
+      {/* Search and Create Section */}
+      <div className="flex flex-col sm:flex-row gap-4 mb-8">
+        <div className="flex-1 relative">
+          <svg
+            className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          <input
+            type="text"
+            placeholder="Search projects..."
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        {address && (
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="bg-black text-white px-6 py-2 rounded-lg hover:bg-gray-800 transition-colors flex items-center gap-2 justify-center"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+            </svg>
+            Create Project
+          </button>
+        )}
+      </div>
+
+      {/* Loading State */}
+      {isLoading && (
+        <div className="flex justify-center items-center py-12">
+          <div className="flex flex-col items-center gap-4">
+            <svg className="animate-spin h-12 w-12 text-gray-400" viewBox="0 0 24 24">
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+                fill="none"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+            <p className="text-gray-600">Loading projects...</p>
+          </div>
+        </div>
+      )}
+
+      {/* Error State */}
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
+          <svg className="w-12 h-12 text-red-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <h3 className="text-lg font-semibold text-red-900 mb-2">Error Loading Projects</h3>
+          <p className="text-red-700">{(error as Error)?.message || 'Failed to load projects'}</p>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!isLoading && !error && filteredProjects.length === 0 && (
+        <div className="text-center py-12">
+          <svg
+            className="w-16 h-16 text-gray-300 mx-auto mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+            />
+          </svg>
+          <h3 className="text-xl font-semibold text-gray-700 mb-2">No projects found</h3>
+          <p className="text-gray-500 mb-6">
+            {searchQuery
+              ? 'Try adjusting your search criteria'
+              : 'Be the first to create a project!'}
+          </p>
+          {!searchQuery && address && (
+            <button
+              onClick={() => setShowCreateModal(true)}
+              className="bg-black text-white px-6 py-2 rounded-lg hover:bg-gray-800 transition-colors"
+            >
+              Create Project
+            </button>
+          )}
+          {!address && !searchQuery && (
+            <p className="text-gray-500 text-sm mt-4">
+              Connect your wallet to create projects
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Projects Grid */}
+      {!isLoading && !error && filteredProjects.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredProjects.map((project) => (
+            <ProjectCard
+              key={project.id}
+              project={project}
+              isOwner={isOwner(project)}
+              onEdit={() => handleEdit(project)}
+              onDelete={() => handleDelete(project)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Modals */}
+      <CreateProjectModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+      />
+
+      <EditProjectModal
+        isOpen={!!editingProject}
+        project={editingProject}
+        onClose={() => setEditingProject(null)}
+      />
+
+      <DeleteConfirmationDialog
+        isOpen={!!deletingProject}
+        projectId={deletingProject?.id || null}
+        projectName={deletingProject?.name || ''}
+        onClose={() => setDeletingProject(null)}
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/projects/project-page/ProjectActions.tsx b/frontend/src/components/projects/project-page/ProjectActions.tsx
new file mode 100644
index 0000000..8087e6e
--- /dev/null
+++ b/frontend/src/components/projects/project-page/ProjectActions.tsx
@@ -0,0 +1,96 @@
+import { useState } from "react";
+import { useAccount } from "wagmi";
+import EditProjectModal from "@/components/projects/EditProjectModal";
+import DeleteConfirmationDialog from "@/components/projects/DeleteConfirmationDialogue";
+import type { Project } from "@/lib/types/projects";
+
+interface ProjectActionsProps {
+  id: string;
+  name: string;
+  description: string;
+  ownerAddress: string;
+}
+
+export default function ProjectActions({
+  id,
+  name,
+  description,
+  ownerAddress,
+}: ProjectActionsProps) {
+  const { address } = useAccount();
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+  const isOwner = address && ownerAddress.toLowerCase() === address.toLowerCase();
+
+  if (!isOwner) {
+    return null;
+  }
+
+  const project: Project = {
+    id,
+    name,
+    description,
+    ownerAddress,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  };
+
+  return (
+    <>
+      <div className="flex gap-3">
+        <button
+          onClick={() => setShowEditModal(true)}
+          className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
+        >
+          <svg 
+            className="w-4 h-4" 
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path 
+              strokeLinecap="round" 
+              strokeLinejoin="round" 
+              strokeWidth={2} 
+              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" 
+            />
+          </svg>
+          Edit Project
+        </button>
+        <button
+          onClick={() => setShowDeleteDialog(true)}
+          className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
+        >
+          <svg 
+            className="w-4 h-4" 
+            fill="none" 
+            stroke="currentColor" 
+            viewBox="0 0 24 24"
+          >
+            <path 
+              strokeLinecap="round" 
+              strokeLinejoin="round" 
+              strokeWidth={2} 
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" 
+            />
+          </svg>
+          Delete Project
+        </button>
+      </div>
+
+      <EditProjectModal
+        isOpen={showEditModal}
+        project={project}
+        onClose={() => setShowEditModal(false)}
+      />
+
+      <DeleteConfirmationDialog
+        isOpen={showDeleteDialog}
+        projectId={id}
+        projectName={name}
+        onClose={() => setShowDeleteDialog(false)}
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/projects/project-page/ProjectDescription.tsx b/frontend/src/components/projects/project-page/ProjectDescription.tsx
new file mode 100644
index 0000000..6fbf443
--- /dev/null
+++ b/frontend/src/components/projects/project-page/ProjectDescription.tsx
@@ -0,0 +1,20 @@
+interface ProjectDescriptionProps {
+  description?: string;
+}
+
+export default function ProjectDescription({
+  description,
+}: ProjectDescriptionProps) {
+  if (!description) {
+    return null;
+  }
+
+  return (
+    <div className="mt-8">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4">Description</h2>
+      <div className="prose prose-gray max-w-none">
+        <p className="text-gray-700 whitespace-pre-wrap">{description}</p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/projects/project-page/ProjectHeader.tsx b/frontend/src/components/projects/project-page/ProjectHeader.tsx
new file mode 100644
index 0000000..38d5591
--- /dev/null
+++ b/frontend/src/components/projects/project-page/ProjectHeader.tsx
@@ -0,0 +1,88 @@
+interface ProjectHeaderProps {
+  id: string;
+  name: string;
+  ownerAddress: string;
+  createdAt: string;
+}
+
+const formatAddress = (address: string): string => {
+  if (!address) return '';
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+};
+
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', { 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  });
+};
+
+export default function ProjectHeader({
+  id,
+  name,
+  ownerAddress,
+  createdAt,
+}: ProjectHeaderProps) {
+  return (
+    <div className="border-b pb-6">
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-center gap-4">
+          <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
+            <svg 
+              className="w-8 h-8 text-blue-600" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path 
+                strokeLinecap="round" 
+                strokeLinejoin="round" 
+                strokeWidth={2} 
+                d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" 
+              />
+            </svg>
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">{name}</h1>
+            <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
+              <div className="flex items-center gap-1">
+                <svg 
+                  className="w-4 h-4" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                    strokeWidth={2} 
+                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" 
+                  />
+                </svg>
+                <span>{formatAddress(ownerAddress)}</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <svg 
+                  className="w-4 h-4" 
+                  fill="none" 
+                  stroke="currentColor" 
+                  viewBox="0 0 24 24"
+                >
+                  <path 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                    strokeWidth={2} 
+                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" 
+                  />
+                </svg>
+                <span>Created {formatDate(createdAt)}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/projects/project-page/ProjectMain.tsx b/frontend/src/components/projects/project-page/ProjectMain.tsx
new file mode 100644
index 0000000..28de881
--- /dev/null
+++ b/frontend/src/components/projects/project-page/ProjectMain.tsx
@@ -0,0 +1,71 @@
+import { useMemo } from "react";
+import { useProjects } from "@/hooks/projects/useprojects";
+import ProjectHeader from "@/components/projects/project-page/ProjectHeader";
+import ProjectActions from "@/components/projects/project-page/ProjectActions";
+import ProjectDescription from "@/components/projects/project-page/ProjectDescription";
+
+export function ProjectMain({ id }: { id: string }) {
+  const projectsQuery = useProjects();
+
+  const project = useMemo(() => {
+    const list = projectsQuery.data ?? [];
+    const p = list.find((x) => x.id === id);
+    return p;
+  }, [projectsQuery.data, id]);
+
+  if (projectsQuery.isLoading) {
+    return (
+      <div className="max-w-4xl mx-auto p-6">
+        <div className="flex justify-center items-center py-12">
+          <svg className="animate-spin h-12 w-12 text-gray-400" viewBox="0 0 24 24">
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+              fill="none"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        </div>
+      </div>
+    );
+  }
+
+  if (!project) {
+    return (
+      <div className="max-w-4xl mx-auto p-6">
+        <div className="text-center py-12">
+          <h2 className="text-2xl font-bold text-gray-900 mb-2">Project Not Found</h2>
+          <p className="text-gray-600">The project you're looking for doesn't exist.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-6">
+      <ProjectHeader
+        id={project.id}
+        name={project.name}
+        ownerAddress={project.ownerAddress}
+        createdAt={project.createdAt}
+      />
+      <div className="mt-6">
+        <ProjectActions
+          id={project.id}
+          name={project.name}
+          description={project.description}
+          ownerAddress={project.ownerAddress}
+        />
+      </div>
+      <ProjectDescription description={project.description} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/projects/useprojects.ts b/frontend/src/hooks/projects/useprojects.ts
new file mode 100644
index 0000000..75af647
--- /dev/null
+++ b/frontend/src/hooks/projects/useprojects.ts
@@ -0,0 +1,248 @@
+import { useMutation, useQuery, useQueryClient, type UseMutationResult, type UseQueryResult } from '@tanstack/react-query';
+import { useAccount } from 'wagmi';
+import type { 
+  Project, 
+  ProjectFromAPI, 
+  CreateProjectData, 
+  UpdateProjectData 
+} from '@/lib/types/projects';
+import { API_BASE_URL } from '@/lib/constants/apiConstants';
+import { isTokenValid, getToken } from '@/lib/utils/jwt';
+import { useLogin } from '@/hooks/use-login';
+
+// Transform API response to client format
+const transformProjectFromAPI = (apiProject: ProjectFromAPI): Project => {
+  return {
+    id: apiProject.id,
+    name: apiProject.name,
+    description: apiProject.description,
+    ownerAddress: apiProject.owner_address,
+    createdAt: apiProject.created_at,
+    updatedAt: apiProject.updated_at,
+  };
+};
+
+// API functions
+async function fetchProjects(): Promise<Project[]> {
+  const response = await fetch(`${API_BASE_URL}/projects`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  if (!response.ok) {
+    const text = await response.text().catch(() => '');
+    throw new Error(
+      `Failed to fetch projects: ${response.status} ${response.statusText}${
+        text ? ` - ${text}` : ''
+      }`
+    );
+  }
+
+  const data = (await response.json()) as ProjectFromAPI[];
+  return data.map(transformProjectFromAPI);
+}
+
+async function postCreateProject(
+  input: CreateProjectData,
+  token: string
+): Promise<Project> {
+  const response = await fetch(`${API_BASE_URL}/projects`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(input),
+  });
+  
+  if (!response.ok) {
+    const text = await response.text().catch(() => '');
+    throw new Error(
+      `Failed to create project: ${response.status} ${response.statusText}${
+        text ? ` - ${text}` : ''
+      }`
+    );
+  }
+  
+  try {
+    const apiProject = (await response.json()) as ProjectFromAPI;
+    return transformProjectFromAPI(apiProject);
+  } catch {
+    throw new Error('Failed to parse project response');
+  }
+}
+
+async function putUpdateProject(
+  id: string,
+  input: UpdateProjectData,
+  token: string
+): Promise<Project> {
+  const response = await fetch(`${API_BASE_URL}/projects/${id}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(input),
+  });
+  
+  if (!response.ok) {
+    const text = await response.text().catch(() => '');
+    throw new Error(
+      `Failed to update project: ${response.status} ${response.statusText}${
+        text ? ` - ${text}` : ''
+      }`
+    );
+  }
+  
+  try {
+    const apiProject = (await response.json()) as ProjectFromAPI;
+    return transformProjectFromAPI(apiProject);
+  } catch {
+    throw new Error('Failed to parse project response');
+  }
+}
+
+async function deleteProject(id: string, token: string): Promise<void> {
+  const response = await fetch(`${API_BASE_URL}/projects/${id}`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  
+  if (!response.ok) {
+    const text = await response.text().catch(() => '');
+    throw new Error(
+      `Failed to delete project: ${response.status} ${response.statusText}${
+        text ? ` - ${text}` : ''
+      }`
+    );
+  }
+}
+
+// React Query Hooks
+export function useProjects(): UseQueryResult<Project[], Error> {
+  return useQuery<Project[], Error>({
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+  });
+}
+
+type CreateProjectVariables = {
+  input: CreateProjectData;
+};
+
+export function useCreateProject(): UseMutationResult<
+  Project,
+  Error,
+  CreateProjectVariables
+> {
+  const { address } = useAccount();
+  const queryClient = useQueryClient();
+  const { login } = useLogin();
+
+  return useMutation<Project, Error, CreateProjectVariables>({
+    mutationKey: ['create-project'],
+    mutationFn: async ({ input }) => {
+      if (!address) {
+        throw new Error('Wallet not connected');
+      }
+
+      // Check if token is valid, if not trigger login
+      if (!isTokenValid()) {
+        await login();
+      }
+
+      const token = getToken();
+      if (!token) {
+        throw new Error('Authentication required. Please sign in.');
+      }
+
+      return postCreateProject(input, token);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+    },
+  });
+}
+
+type UpdateProjectVariables = {
+  id: string;
+  input: UpdateProjectData;
+};
+
+export function useUpdateProject(): UseMutationResult<
+  Project,
+  Error,
+  UpdateProjectVariables
+> {
+  const { address } = useAccount();
+  const queryClient = useQueryClient();
+  const { login } = useLogin();
+
+  return useMutation<Project, Error, UpdateProjectVariables>({
+    mutationKey: ['update-project'],
+    mutationFn: async ({ id, input }) => {
+      if (!address) {
+        throw new Error('Wallet not connected');
+      }
+
+      // Check if token is valid, if not trigger login
+      if (!isTokenValid()) {
+        await login();
+      }
+
+      const token = getToken();
+      if (!token) {
+        throw new Error('Authentication required. Please sign in.');
+      }
+
+      return putUpdateProject(id, input, token);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+    },
+  });
+}
+
+type DeleteProjectVariables = {
+  id: string;
+};
+
+export function useDeleteProject(): UseMutationResult<
+  void,
+  Error,
+  DeleteProjectVariables
+> {
+  const { address } = useAccount();
+  const queryClient = useQueryClient();
+  const { login } = useLogin();
+
+  return useMutation<void, Error, DeleteProjectVariables>({
+    mutationKey: ['delete-project'],
+    mutationFn: async ({ id }) => {
+      if (!address) {
+        throw new Error('Wallet not connected');
+      }
+
+      // Check if token is valid, if not trigger login
+      if (!isTokenValid()) {
+        await login();
+      }
+
+      const token = getToken();
+      if (!token) {
+        throw new Error('Authentication required. Please sign in.');
+      }
+
+      return deleteProject(id, token);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['projects'] });
+    },
+  });
+}
\ No newline at end of file
diff --git a/frontend/src/lib/constants/projectConstants.ts b/frontend/src/lib/constants/projectConstants.ts
new file mode 100644
index 0000000..b22b9ae
--- /dev/null
+++ b/frontend/src/lib/constants/projectConstants.ts
@@ -0,0 +1,99 @@
+import type { Project } from "../types/projects";
+
+export const PROJECTS: Project[] = [
+  {
+    id: "proj_001",
+    name: "DeFi Yield Aggregator",
+    description: "A comprehensive DeFi platform that aggregates yield farming opportunities across multiple protocols. Users can compare APYs, manage their positions, and automatically compound their rewards.",
+    ownerAddress: "0x1234...5678",
+    createdAt: "2026-01-15T10:30:00Z",
+    updatedAt: "2026-01-20T14:45:00Z",
+  },
+  {
+    id: "proj_002",
+    name: "NFT Marketplace",
+    description: "Decentralized NFT marketplace with low fees and cross-chain support. Features include lazy minting, batch transfers, and royalty management.",
+    ownerAddress: "0x9876...5432",
+    createdAt: "2026-01-18T09:15:00Z",
+    updatedAt: "2026-01-25T16:20:00Z",
+  },
+  {
+    id: "proj_003",
+    name: "Web3 Social Network",
+    description: "Privacy-focused social platform built on blockchain. Users own their data, earn tokens for content creation, and have encrypted messaging.",
+    ownerAddress: "0x1234...5678",
+    createdAt: "2026-01-20T11:00:00Z",
+    updatedAt: "2026-01-28T10:30:00Z",
+  },
+  {
+    id: "proj_004",
+    name: "DAO Governance Tool",
+    description: "Streamlined governance platform for DAOs with proposal creation, voting mechanisms, treasury management, and delegation features.",
+    ownerAddress: "0x5555...7777",
+    createdAt: "2026-01-22T14:20:00Z",
+    updatedAt: "2026-01-29T09:15:00Z",
+  },
+  {
+    id: "proj_005",
+    name: "Cross-Chain Bridge",
+    description: "Secure bridge for transferring assets between different blockchains. Supports EVM chains and includes liquidity pools for fast transfers.",
+    ownerAddress: "0x9876...5432",
+    createdAt: "2026-01-25T08:45:00Z",
+    updatedAt: "2026-02-01T11:00:00Z",
+  },
+  {
+    id: "proj_006",
+    name: "Blockchain Analytics Dashboard",
+    description: "Real-time analytics platform for tracking on-chain metrics, wallet activities, and DeFi protocol statistics with custom alerts.",
+    ownerAddress: "0x1234...5678",
+    createdAt: "2026-01-28T13:30:00Z",
+    updatedAt: "2026-02-02T15:45:00Z",
+  },
+  {
+    id: "proj_007",
+    name: "Smart Contract Auditing Tool",
+    description: "Automated security analysis tool for smart contracts. Detects common vulnerabilities and provides detailed security reports.",
+    ownerAddress: "0xabcd...ef01",
+    createdAt: "2026-01-30T10:00:00Z",
+    updatedAt: "2026-02-03T12:20:00Z",
+  },
+  {
+    id: "proj_008",
+    name: "Decentralized Identity System",
+    description: "Self-sovereign identity solution allowing users to control their personal data and credentials on the blockchain.",
+    ownerAddress: "0x5555...7777",
+    createdAt: "2026-02-01T09:30:00Z",
+    updatedAt: "2026-02-03T14:15:00Z",
+  },
+  {
+    id: "proj_009",
+    name: "GameFi Platform",
+    description: "Play-to-earn gaming platform with tokenized in-game assets, staking rewards, and competitive tournaments.",
+    ownerAddress: "0x9876...5432",
+    createdAt: "2026-02-02T11:45:00Z",
+    updatedAt: "2026-02-04T10:30:00Z",
+  },
+];
+
+// Get projects by owner's address //
+export function getProjectsByOwner(ownerAddress: string): Project[] {
+  return PROJECTS.filter(
+    (project) =>
+      project.ownerAddress.toLowerCase() === ownerAddress.toLowerCase()
+  );
+}
+
+// get project by ID //
+export function getProjectById(id: string): Project | undefined {
+  return PROJECTS.find((project) => project.id === id);
+}
+
+// get project by name and description //
+export function searchProjects(query: string): Project[] {
+  const lowerQuery = query.toLowerCase();
+  return PROJECTS.filter(
+    (project) =>
+      project.name.toLowerCase().includes(lowerQuery) ||
+      project.description.toLowerCase().includes(lowerQuery)
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/lib/types/projects.d.ts b/frontend/src/lib/types/projects.d.ts
new file mode 100644
index 0000000..7300340
--- /dev/null
+++ b/frontend/src/lib/types/projects.d.ts
@@ -0,0 +1,27 @@
+export type Project = {
+  id: string;
+  name: string;
+  description: string;
+  ownerAddress: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type ProjectFromAPI = {
+  id: string;
+  name: string;
+  description: string;
+  owner_address: string;
+  created_at: string;
+  updated_at: string;
+};
+
+export type CreateProjectData = {
+  name: string;
+  description: string;
+};
+
+export type UpdateProjectData = {
+  name: string;
+  description: string;
+};
\ No newline at end of file
diff --git a/frontend/src/pages/project/[id].astro b/frontend/src/pages/project/[id].astro
new file mode 100644
index 0000000..906cc7e
--- /dev/null
+++ b/frontend/src/pages/project/[id].astro
@@ -0,0 +1,10 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import ProjectPage from "@/components/pages/ProjectPage";
+
+const { id } = Astro.params;
+---
+
+<Layout title={`Project - The Guild Genesis`}>
+  <ProjectPage id={id} client:only="react" />
+</Layout>
\ No newline at end of file
diff --git a/frontend/src/pages/projects.astro b/frontend/src/pages/projects.astro
new file mode 100644
index 0000000..8bdff29
--- /dev/null
+++ b/frontend/src/pages/projects.astro
@@ -0,0 +1,8 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import ProjectsPage from "@/components/pages/ProjectsPage";
+---
+
+<Layout title="Projects - The Guild Genesis">
+  <ProjectsPage client:only="react" />
+</Layout>
\ No newline at end of file

From 9d89e6bb8ae5e064d8d30329a73c18cbcd2ed340 Mon Sep 17 00:00:00 2001
From: Ifeoluwa <pheobeayo@gmail.com>
Date: Tue, 10 Feb 2026 16:24:30 +0100
Subject: [PATCH 2/3] update

---
 .../006_add_owner_address_to_projects.sql     |  5 ++++
 .../application/commands/create_project.rs    |  8 +++---
 .../application/commands/update_project.rs    | 15 ++++-------
 backend/src/application/dtos/project_dtos.rs  |  1 +
 .../application/queries/get_all_projects.rs   | 27 +++++++++----------
 .../src/application/queries/get_project.rs    | 10 +++----
 .../queries/get_projects_by_creator.rs        | 25 ++++++++---------
 frontend/.astro/types.d.ts                    |  1 -
 frontend/src/hooks/projects/useprojects.ts    |  2 +-
 frontend/src/lib/types/projects.d.ts          |  4 ++-
 10 files changed, 51 insertions(+), 47 deletions(-)
 create mode 100644 backend/migrations/006_add_owner_address_to_projects.sql

diff --git a/backend/migrations/006_add_owner_address_to_projects.sql b/backend/migrations/006_add_owner_address_to_projects.sql
new file mode 100644
index 0000000..d6a67ca
--- /dev/null
+++ b/backend/migrations/006_add_owner_address_to_projects.sql
@@ -0,0 +1,5 @@
+ALTER TABLE projects
+    ADD COLUMN IF NOT EXISTS owner_address VARCHAR(42)
+        GENERATED ALWAYS AS (creator) STORED;
+
+CREATE INDEX IF NOT EXISTS idx_projects_owner_address ON projects(owner_address);
\ No newline at end of file
diff --git a/backend/src/application/commands/create_project.rs b/backend/src/application/commands/create_project.rs
index a157f7d..e6a6191 100644
--- a/backend/src/application/commands/create_project.rs
+++ b/backend/src/application/commands/create_project.rs
@@ -38,14 +38,16 @@ pub async fn create_project(
         .await
         .map_err(|e| e.to_string())?;
 
-    // Return response
+    let creator_str = project.creator.to_string();
+
     Ok(ProjectResponse {
         id: project.id.value().to_string(),
         name: project.name,
         description: project.description,
         status: project.status,
-        creator: project.creator.to_string(),
+        owner_address: creator_str.clone(),
+        creator: creator_str,
         created_at: project.created_at,
         updated_at: project.updated_at,
     })
-}
+}
\ No newline at end of file
diff --git a/backend/src/application/commands/update_project.rs b/backend/src/application/commands/update_project.rs
index ebc2e90..ae80377 100644
--- a/backend/src/application/commands/update_project.rs
+++ b/backend/src/application/commands/update_project.rs
@@ -15,15 +15,12 @@ pub async fn update_project(
     project_id: String,
     request: UpdateProjectRequest,
 ) -> Result<ProjectResponse, String> {
-    // Parse project ID
     let id = Uuid::parse_str(&project_id).map_err(|_| "Invalid project ID".to_string())?;
     let project_id = ProjectId::from_uuid(id);
 
-    // Validate requester address
     let requester = WalletAddress::new(requester_address)
         .map_err(|e| format!("Invalid wallet address: {}", e))?;
 
-    // Get existing project
     let mut project = repository
         .find_by_id(&project_id)
         .await
@@ -35,26 +32,24 @@ pub async fn update_project(
         return Err("Only the creator can update this project".to_string());
     }
 
-    // Update project
     project.update_info(request.name, request.description, request.status);
-
-    // Validate updated project
     project.validate()?;
 
-    // Save to repository
     repository
         .update(&project)
         .await
         .map_err(|e| e.to_string())?;
 
-    // Return response
+    let creator_str = project.creator.to_string();
+
     Ok(ProjectResponse {
         id: project.id.value().to_string(),
         name: project.name,
         description: project.description,
         status: project.status,
-        creator: project.creator.to_string(),
+        owner_address: creator_str.clone(),
+        creator: creator_str,
         created_at: project.created_at,
         updated_at: project.updated_at,
     })
-}
+}
\ No newline at end of file
diff --git a/backend/src/application/dtos/project_dtos.rs b/backend/src/application/dtos/project_dtos.rs
index d8af93a..6551495 100644
--- a/backend/src/application/dtos/project_dtos.rs
+++ b/backend/src/application/dtos/project_dtos.rs
@@ -27,6 +27,7 @@ pub struct ProjectResponse {
     pub description: String,
     pub status: ProjectStatus,
     pub creator: String,
+    pub owner_address: String,
     pub created_at: DateTime<Utc>,
     pub updated_at: DateTime<Utc>,
 }
diff --git a/backend/src/application/queries/get_all_projects.rs b/backend/src/application/queries/get_all_projects.rs
index 73fd935..cec8774 100644
--- a/backend/src/application/queries/get_all_projects.rs
+++ b/backend/src/application/queries/get_all_projects.rs
@@ -15,7 +15,6 @@ pub async fn get_all_projects(
     limit: Option<i64>,
     offset: Option<i64>,
 ) -> Result<Vec<ProjectResponse>, String> {
-    // Parse status if provided
     let status_filter = if let Some(status_str) = status {
         Some(
             status_str
@@ -26,7 +25,6 @@ pub async fn get_all_projects(
         None
     };
 
-    // Parse creator if provided
     let creator_filter = if let Some(creator_str) = creator {
         Some(
             WalletAddress::new(creator_str)
@@ -36,27 +34,28 @@ pub async fn get_all_projects(
         None
     };
 
-    // Validate and limit pagination
     let limit = limit.map(|l| l.clamp(1, 100));
     let offset = offset.map(|o| o.max(0));
 
-    // Get projects
     let projects = repository
         .find_all(status_filter, creator_filter.as_ref(), limit, offset)
         .await
         .map_err(|e| e.to_string())?;
 
-    // Convert to responses
     Ok(projects
         .into_iter()
-        .map(|project| ProjectResponse {
-            id: project.id.value().to_string(),
-            name: project.name,
-            description: project.description,
-            status: project.status,
-            creator: project.creator.to_string(),
-            created_at: project.created_at,
-            updated_at: project.updated_at,
+        .map(|project| {
+            let creator_str = project.creator.to_string();
+            ProjectResponse {
+                id: project.id.value().to_string(),
+                name: project.name,
+                description: project.description,
+                status: project.status,
+                owner_address: creator_str.clone(),
+                creator: creator_str,
+                created_at: project.created_at,
+                updated_at: project.updated_at,
+            }
         })
         .collect())
-}
+}
\ No newline at end of file
diff --git a/backend/src/application/queries/get_project.rs b/backend/src/application/queries/get_project.rs
index 60e7c1a..b572399 100644
--- a/backend/src/application/queries/get_project.rs
+++ b/backend/src/application/queries/get_project.rs
@@ -10,25 +10,25 @@ pub async fn get_project(
     repository: Arc<dyn ProjectRepository>,
     project_id: String,
 ) -> Result<ProjectResponse, String> {
-    // Parse project ID
     let id = Uuid::parse_str(&project_id).map_err(|_| "Invalid project ID".to_string())?;
     let project_id = ProjectId::from_uuid(id);
 
-    // Get project
     let project = repository
         .find_by_id(&project_id)
         .await
         .map_err(|e| e.to_string())?
         .ok_or_else(|| "Project not found".to_string())?;
 
-    // Return response
+    let creator_str = project.creator.to_string();
+
     Ok(ProjectResponse {
         id: project.id.value().to_string(),
         name: project.name,
         description: project.description,
         status: project.status,
-        creator: project.creator.to_string(),
+        owner_address: creator_str.clone(),
+        creator: creator_str,
         created_at: project.created_at,
         updated_at: project.updated_at,
     })
-}
+}
\ No newline at end of file
diff --git a/backend/src/application/queries/get_projects_by_creator.rs b/backend/src/application/queries/get_projects_by_creator.rs
index c6dc605..b574001 100644
--- a/backend/src/application/queries/get_projects_by_creator.rs
+++ b/backend/src/application/queries/get_projects_by_creator.rs
@@ -9,27 +9,28 @@ pub async fn get_projects_by_creator(
     repository: Arc<dyn ProjectRepository>,
     creator_address: String,
 ) -> Result<Vec<ProjectResponse>, String> {
-    // Validate creator address
     let creator = WalletAddress::new(creator_address)
         .map_err(|e| format!("Invalid wallet address: {}", e))?;
 
-    // Get projects
     let projects = repository
         .find_by_creator(&creator)
         .await
         .map_err(|e| e.to_string())?;
 
-    // Convert to responses
     Ok(projects
         .into_iter()
-        .map(|project| ProjectResponse {
-            id: project.id.value().to_string(),
-            name: project.name,
-            description: project.description,
-            status: project.status,
-            creator: project.creator.to_string(),
-            created_at: project.created_at,
-            updated_at: project.updated_at,
+        .map(|project| {
+            let creator_str = project.creator.to_string();
+            ProjectResponse {
+                id: project.id.value().to_string(),
+                name: project.name,
+                description: project.description,
+                status: project.status,
+                owner_address: creator_str.clone(),
+                creator: creator_str,
+                created_at: project.created_at,
+                updated_at: project.updated_at,
+            }
         })
         .collect())
-}
+}
\ No newline at end of file
diff --git a/frontend/.astro/types.d.ts b/frontend/.astro/types.d.ts
index 03d7cc4..f964fe0 100644
--- a/frontend/.astro/types.d.ts
+++ b/frontend/.astro/types.d.ts
@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
\ No newline at end of file
diff --git a/frontend/src/hooks/projects/useprojects.ts b/frontend/src/hooks/projects/useprojects.ts
index 75af647..ef895ac 100644
--- a/frontend/src/hooks/projects/useprojects.ts
+++ b/frontend/src/hooks/projects/useprojects.ts
@@ -16,7 +16,7 @@ const transformProjectFromAPI = (apiProject: ProjectFromAPI): Project => {
     id: apiProject.id,
     name: apiProject.name,
     description: apiProject.description,
-    ownerAddress: apiProject.owner_address,
+    ownerAddress: apiProject.owner_address ?? apiProject.creator ?? '',
     createdAt: apiProject.created_at,
     updatedAt: apiProject.updated_at,
   };
diff --git a/frontend/src/lib/types/projects.d.ts b/frontend/src/lib/types/projects.d.ts
index 7300340..11eafd5 100644
--- a/frontend/src/lib/types/projects.d.ts
+++ b/frontend/src/lib/types/projects.d.ts
@@ -11,7 +11,9 @@ export type ProjectFromAPI = {
   id: string;
   name: string;
   description: string;
-  owner_address: string;
+  status: string;
+  creator: string;
+  owner_address: string; 
   created_at: string;
   updated_at: string;
 };

From 45911b446de30f9e8f2c5e8ae7a7e99d7221d284 Mon Sep 17 00:00:00 2001
From: Ifeoluwa <pheobeayo@gmail.com>
Date: Tue, 10 Feb 2026 16:40:44 +0100
Subject: [PATCH 3/3] update formatting

---
 backend/src/application/commands/create_project.rs         | 2 +-
 backend/src/application/commands/update_project.rs         | 2 +-
 backend/src/application/queries/get_all_projects.rs        | 2 +-
 backend/src/application/queries/get_project.rs             | 2 +-
 backend/src/application/queries/get_projects_by_creator.rs | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/backend/src/application/commands/create_project.rs b/backend/src/application/commands/create_project.rs
index e6a6191..712153e 100644
--- a/backend/src/application/commands/create_project.rs
+++ b/backend/src/application/commands/create_project.rs
@@ -50,4 +50,4 @@ pub async fn create_project(
         created_at: project.created_at,
         updated_at: project.updated_at,
     })
-}
\ No newline at end of file
+}
diff --git a/backend/src/application/commands/update_project.rs b/backend/src/application/commands/update_project.rs
index ae80377..805a81c 100644
--- a/backend/src/application/commands/update_project.rs
+++ b/backend/src/application/commands/update_project.rs
@@ -52,4 +52,4 @@ pub async fn update_project(
         created_at: project.created_at,
         updated_at: project.updated_at,
     })
-}
\ No newline at end of file
+}
diff --git a/backend/src/application/queries/get_all_projects.rs b/backend/src/application/queries/get_all_projects.rs
index cec8774..e8ff758 100644
--- a/backend/src/application/queries/get_all_projects.rs
+++ b/backend/src/application/queries/get_all_projects.rs
@@ -58,4 +58,4 @@ pub async fn get_all_projects(
             }
         })
         .collect())
-}
\ No newline at end of file
+}
diff --git a/backend/src/application/queries/get_project.rs b/backend/src/application/queries/get_project.rs
index b572399..749bc87 100644
--- a/backend/src/application/queries/get_project.rs
+++ b/backend/src/application/queries/get_project.rs
@@ -31,4 +31,4 @@ pub async fn get_project(
         created_at: project.created_at,
         updated_at: project.updated_at,
     })
-}
\ No newline at end of file
+}
diff --git a/backend/src/application/queries/get_projects_by_creator.rs b/backend/src/application/queries/get_projects_by_creator.rs
index b574001..9723eb4 100644
--- a/backend/src/application/queries/get_projects_by_creator.rs
+++ b/backend/src/application/queries/get_projects_by_creator.rs
@@ -33,4 +33,4 @@ pub async fn get_projects_by_creator(
             }
         })
         .collect())
-}
\ No newline at end of file
+}