diff --git a/backend/projects/models.py b/backend/projects/models.py
index 4a3bd66..eedfb55 100644
--- a/backend/projects/models.py
+++ b/backend/projects/models.py
@@ -5,7 +5,7 @@
 # PROJECTS MODEL
 class Project(models.Model):
     # Auto generated
-    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)  
+    id=models.CharField(primary_key=True,default=uuid.uuid4, editable=False, max_length=36)
 
     # REQUIRED
     title = models.CharField(max_length=255, blank=False, null=False)
diff --git a/backend/projects/views.py b/backend/projects/views.py
index 73bf3c6..b21bb57 100644
--- a/backend/projects/views.py
+++ b/backend/projects/views.py
@@ -27,7 +27,13 @@ def post(self, request):
         if serializer.is_valid():
             serializer.save()
             return Response(serializer.data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        else:
+            print(serializer.errors)
+            error_details = {
+                "message": "Invalid project data provided.",
+                "errors": serializer.errors,
+            }
+            return Response(error_details, status=status.HTTP_400_BAD_REQUEST)
 
     # Get a single project by ID (GET)
     def get(self, request, pk):
@@ -42,7 +48,13 @@ def put(self, request, pk):
         if serializer.is_valid():
             serializer.save()
             return Response(serializer.data)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        else:
+            print(serializer.errors)
+            error_details = {
+                "message": "Invalid project data provided.",
+                "errors": serializer.errors,
+            }
+            return Response(error_details, status=status.HTTP_400_BAD_REQUEST)
 
     # Delete a project by ID (DELETE)
     def delete(self, request, pk):
diff --git a/frontend/bitmatch/eslint.config.js b/frontend/bitmatch/eslint.config.js
index b0f220b..1b66b69 100644
--- a/frontend/bitmatch/eslint.config.js
+++ b/frontend/bitmatch/eslint.config.js
@@ -34,6 +34,7 @@ export default [
         "warn",
         { allowConstantExport: true },
       ],
+      "react/prop-types": "warn",
     },
   },
 ];
diff --git a/frontend/bitmatch/src/App.jsx b/frontend/bitmatch/src/App.jsx
index ce46024..b38fe75 100644
--- a/frontend/bitmatch/src/App.jsx
+++ b/frontend/bitmatch/src/App.jsx
@@ -11,6 +11,7 @@ import { Button } from "./components/ui/button";
 import HomePage from "./views/HomePage";
 import ProjectListPage from "./views/ProjectListPage";
 import ProjectDetailPage from "./views/IndividualProjectPage";
+import AddProjectPage from "./views/AddProjectPage";
 import "./styles/global.css";
 
 export default function App() {
@@ -99,6 +100,7 @@ export default function App() {
             <Route path="/" element={<HomePage />} />
             <Route path="/project-list" element={<ProjectListPage />} />
             <Route path="/projects/:id" element={<ProjectDetailPage />} />
+            <Route path="/create-project" element={<AddProjectPage />} />
           </Routes>
         </SignedIn>
       </div>
diff --git a/frontend/bitmatch/src/components/project/DiscussionCard.jsx b/frontend/bitmatch/src/components/project/DiscussionCard.jsx
new file mode 100644
index 0000000..a3e2bd4
--- /dev/null
+++ b/frontend/bitmatch/src/components/project/DiscussionCard.jsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+
+export function ReplyForm({ postId, onCancel, onSubmit }) {
+  const [content, setContent] = useState("");
+
+  const handleSubmit = () => {
+    if (content.trim()) {
+      onSubmit(postId, content);
+      setContent("");
+    }
+  };
+
+  return (
+    <div className="border p-4 mb-4">
+      <div className="mb-4">
+        <textarea
+          placeholder="Add your comments here"
+          className="w-full p-4 min-h-[100px] border rounded"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+        />
+      </div>
+      <div className="flex justify-end space-x-2">
+        <Button
+          variant="secondary"
+          className="bg-gray-300 hover:bg-gray-400 text-black"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="secondary"
+          className="bg-gray-300 hover:bg-gray-400 text-black"
+          onClick={handleSubmit}
+        >
+          Comment
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function DiscussionPost({
+  id,
+  author,
+  content,
+  datePosted,
+  isReply = false,
+  parentId,
+  onReply,
+  onDelete,
+  onReaction,
+}) {
+  return (
+    <div className={`border-t py-4 ${isReply ? "ml-12 relative" : ""}`}>
+      {isReply && (
+        <div className="absolute left-[-24px] top-0 bottom-0 w-[2px] bg-gray-300"></div>
+      )}
+
+      <div className="flex">
+        <div className="mr-4 relative">
+          <div className="bg-white border rounded-lg px-3 py-1 absolute top-0 left-0 z-10">
+            <span className="font-semibold">{isReply ? "Reply" : "Post"}</span>
+          </div>
+          <div className="w-20 h-20 bg-gray-300 rounded-full flex items-center justify-center text-sm mt-8">
+            {author.profileImage ? (
+              <img
+                src={author.profileImage || "/placeholder.svg"}
+                alt={`${author.name}'s profile`}
+                width={80}
+                height={80}
+                className="rounded-full object-cover w-full h-full"
+              />
+            ) : (
+              <span className="text-center">
+                img
+                <br />
+                profile
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex-1">
+          <div className="mb-4 mt-8">
+            <h3 className="font-bold text-lg">{author.name}</h3>
+            {author.title && <p>{author.title}</p>}
+            <p className="text-sm text-gray-600">{datePosted}</p>
+          </div>
+
+          <div className="mb-4">
+            <p>{content}</p>
+          </div>
+
+          <div className="flex space-x-2">
+            <Button
+              variant="secondary"
+              className="bg-gray-300 hover:bg-gray-400 text-black"
+              onClick={() => onReply && onReply(id)}
+            >
+              Reply
+            </Button>
+            <Button
+              variant="secondary"
+              className="bg-gray-300 hover:bg-gray-400 text-black"
+              onClick={() => onDelete && onDelete(id)}
+            >
+              Delete Post
+            </Button>
+            <Button
+              variant="secondary"
+              className="bg-gray-300 hover:bg-gray-400 text-black ml-auto"
+              onClick={() => onReaction && onReaction(id)}
+            >
+              Emoji Reactions
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/bitmatch/src/components/project/EditProjectDialog.jsx b/frontend/bitmatch/src/components/project/EditProjectDialog.jsx
new file mode 100644
index 0000000..85c00be
--- /dev/null
+++ b/frontend/bitmatch/src/components/project/EditProjectDialog.jsx
@@ -0,0 +1,311 @@
+"use client";
+import axios from "axios";
+import { useState } from "react";
+import { X, Plus, Edit2, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/ScrollArea";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Card } from "@/components/ui/card";
+import { useNavigate } from "react-router-dom";
+
+const SERVER_HOST = import.meta.env.VITE_SERVER_HOST;
+
+export function EditProjectDialog({ open, onOpenChange, projectData, onSave }) {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState(projectData);
+  const [newPosition, setNewPosition] = useState({ title: "" });
+  const [editingIndex, setEditingIndex] = useState(-1);
+
+  const handleChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSave(formData);
+    onOpenChange(false);
+  };
+
+  const handleDelete = async () => {
+    const confirmDelete = window.confirm(
+      "Are you sure you want to delete this project?"
+    );
+    if (!confirmDelete) return;
+
+    try {
+      await axios.delete(`${SERVER_HOST}/projects/${formData.id}/`);
+      alert("Project deleted successfully!");
+      onOpenChange(false);
+      navigate(`/project-list/`);
+    } catch (error) {
+      console.error("Error deleting project:", error);
+      alert("Failed to delete the project. Please try again.");
+    }
+  };
+
+  const addPosition = () => {
+    if (!newPosition.title.trim()) return;
+
+    if (editingIndex >= 0) {
+      // Update existing position
+      const updatedPositions = [...formData.positions];
+      updatedPositions[editingIndex] = { title: newPosition.title };
+      setFormData((prev) => ({ ...prev, positions: updatedPositions }));
+      setEditingIndex(-1);
+    } else {
+      // Add new position
+      setFormData((prev) => ({
+        ...prev,
+        positions: [...prev.positions, { title: newPosition.title }],
+      }));
+    }
+
+    // Reset the input fields
+    setNewPosition({ title: "" });
+  };
+
+  const removePosition = (index) => {
+    const updatedPositions = formData.positions.filter((_, i) => i !== index);
+    setFormData((prev) => ({ ...prev, positions: updatedPositions }));
+  };
+
+  const editPosition = (index) => {
+    setNewPosition({ title: formData.positions[index].title });
+    setEditingIndex(index);
+  };
+
+  return (
+    <Dialog
+      className="flex-1 custom-scrollbar"
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <div className="flex items-center justify-between">
+            <DialogTitle className="text-xl font-bold">
+              Edit Project
+            </DialogTitle>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => onOpenChange(false)}
+              className="h-8 w-8 rounded-full"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Make changes to your project details below.
+          </p>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-5 py-2">
+          <div className="space-y-2">
+            <Label htmlFor="title" className="text-sm font-medium">
+              Title
+            </Label>
+            <Input
+              id="title"
+              value={formData.title}
+              onChange={(e) => handleChange("title", e.target.value)}
+              className="w-full"
+              placeholder="Enter project title"
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="Group" className="text-sm font-medium">
+                Group
+              </Label>
+              <Input
+                id="group"
+                value={formData.group}
+                onChange={(e) => handleChange("group", e.target.value)}
+                className="w-full"
+                placeholder="Enter project group"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="institution" className="text-sm font-medium">
+                Institution
+              </Label>
+              <Input
+                id="institution"
+                value={formData.institution || ""}
+                onChange={(e) => handleChange("institution", e.target.value)}
+                className="w-full"
+                placeholder="Enter project institution"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="description" className="text-sm font-medium">
+              Description
+            </Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => handleChange("description", e.target.value)}
+              className="min-h-[120px] w-full"
+              placeholder="Enter project description"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="full_description" className="text-sm font-medium">
+              Project Background/More Details
+            </Label>
+            <Textarea
+              id="full_description"
+              value={formData.full_description}
+              onChange={(e) => handleChange("full_description", e.target.value)}
+              className="min-h-[120px] w-full"
+              placeholder="Enter project background/more details"
+            />
+          </div>
+
+          {/* Image Upload Section */}
+          <div className="space-y-2">
+            <Label htmlFor="image" className="text-sm font-medium">
+              Cover Image
+            </Label>
+            <Input
+              id="image"
+              type="file"
+              accept="image/*"
+              onChange={(e) => {
+                const file = e.target.files[0];
+                if (file) {
+                  setFormData((prev) => ({
+                    ...prev,
+                    new_image: file,
+                  }));
+                }
+              }}
+              className="w-full"
+            />
+            {formData.new_image && (
+              <div className="mt-2">
+                {formData.new_image instanceof File && (
+                  <img
+                    src={URL.createObjectURL(formData.new_image)}
+                    alt="Project"
+                    className="max-h-40 rounded-md"
+                  />
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Open Positions Section */}
+          <div className="space-y-3 pt-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-medium">Open Positions</Label>
+            </div>
+
+            <Card className="p-4">
+              <div className="flex flex-col gap-4">
+                {/* Add/Edit Position Form */}
+                <div className="flex flex-col gap-3">
+                  <div className="grid grid-cols-3 gap-2">
+                    <div className="col-span-2">
+                      <Input
+                        placeholder="Position title"
+                        value={newPosition.title}
+                        onChange={(e) =>
+                          setNewPosition({
+                            ...newPosition,
+                            title: e.target.value,
+                          })
+                        }
+                      />
+                    </div>
+                  </div>
+                  <Button
+                    type="button"
+                    onClick={addPosition}
+                    className="w-full"
+                    variant="outline"
+                    size="sm"
+                  >
+                    <Plus className="h-4 w-4 mr-2" />
+                    {editingIndex >= 0 ? "Update Position" : "Add Position"}
+                  </Button>
+                </div>
+
+                {formData.positions.length > 0 && (
+                  <ScrollArea className="h-[150px] pr-4">
+                    <div className="space-y-2">
+                      {formData.positions.map((position, index) => (
+                        <div
+                          key={index}
+                          className="flex items-center justify-between p-2 rounded-md bg-muted/50"
+                        >
+                          <div className="flex-1">
+                            <p className="font-medium">{position.title}</p>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => editPosition(index)}
+                              className="h-7 w-7"
+                              type="button"
+                            >
+                              <Edit2 className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => removePosition(index)}
+                              className="h-7 w-7 text-destructive"
+                              type="button"
+                            >
+                              <Trash2 className="h-3.5 w-3.5" />
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </ScrollArea>
+                )}
+              </div>
+            </Card>
+          </div>
+
+          <DialogFooter className="pt-2">
+            <Button
+              variant="outline"
+              type="button"
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              type="button"
+              className="bg-red-500 text-white hover:bg-red-600"
+              onClick={handleDelete}
+            >
+              Delete
+            </Button>
+
+            <Button type="submit">Save Changes</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/bitmatch/src/components/project/MemberCard.jsx b/frontend/bitmatch/src/components/project/MemberCard.jsx
new file mode 100644
index 0000000..cf4c130
--- /dev/null
+++ b/frontend/bitmatch/src/components/project/MemberCard.jsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+export function MemberCard({
+  name,
+  position,
+  joinDate,
+  profileImage,
+  onAssignPosition,
+  onPermissions,
+  onRemove,
+}) {
+  return (
+    <div className="bg-gray-100 p-4 rounded-lg flex items-center">
+      <div className="w-20 h-20 bg-gray-300 rounded-full flex items-center justify-center text-sm mr-6">
+        {profileImage ? (
+          <img
+            src={profileImage || "/placeholder.svg"}
+            alt={`${name}'s profile`}
+            width={80}
+            height={80}
+            className="rounded-full object-cover w-full h-full"
+          />
+        ) : (
+          <span className="text-center">
+            img
+            <br />
+            profile
+          </span>
+        )}
+      </div>
+      <div className="flex-1">
+        <h3 className="font-bold text-lg">{name}</h3>
+        <p>{position}</p>
+        <p>{joinDate}</p>
+      </div>
+      <div className="space-y-2">
+        <Button
+          variant="secondary"
+          className="w-full bg-gray-300 hover:bg-gray-400 text-black text-sm"
+          onClick={onAssignPosition}
+        >
+          Assign Position
+        </Button>
+        <Button
+          variant="secondary"
+          className="w-full bg-gray-300 hover:bg-gray-400 text-black text-sm"
+          onClick={onPermissions}
+        >
+          Permissions
+        </Button>
+        <Button
+          variant="secondary"
+          className="w-full bg-gray-300 hover:bg-gray-400 text-black text-sm"
+          onClick={onRemove}
+        >
+          Remove Member
+        </Button>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/bitmatch/src/components/project/PositionCard.jsx b/frontend/bitmatch/src/components/project/PositionCard.jsx
new file mode 100644
index 0000000..280869a
--- /dev/null
+++ b/frontend/bitmatch/src/components/project/PositionCard.jsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+export function PositionCard({
+  id,
+  title,
+  datePosted,
+  description,
+  responsibilities,
+  skillSets,
+  qualification,
+  skillMatch,
+  onEdit,
+  onDelete,
+  onApply,
+}) {
+  return (
+    <div className="border-t py-6">
+      <div className="flex items-center mb-4">
+        <div className="bg-white border rounded-lg px-4 py-2 mr-4">
+          <span className="font-semibold">Position{id}</span>
+        </div>
+        <h3 className="text-xl font-bold">Title: {title}</h3>
+      </div>
+
+      <p className="text-sm mb-6">{datePosted}</p>
+
+      <div className="mb-6">
+        <h4 className="font-bold mb-2">About this Position</h4>
+        <p>{description}</p>
+      </div>
+
+      <div className="mb-6">
+        <h4 className="font-bold mb-2">Role Responsibilities</h4>
+        <ul className="list-disc pl-6 space-y-2">
+          {responsibilities.map((responsibility, index) => (
+            <li key={index}>{responsibility}</li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="mb-6">
+        <h4 className="font-bold mb-2">Skill Sets Needed for this Position</h4>
+        <div className="grid grid-cols-3 gap-4">
+          <ul className="list-disc pl-6">
+            {skillSets.technical.map((skill, index) => (
+              <li key={index}>{skill}</li>
+            ))}
+          </ul>
+          <ul className="list-disc pl-6">
+            {skillSets.tools.map((tool, index) => (
+              <li key={index}>{tool}</li>
+            ))}
+          </ul>
+          <ul className="list-disc pl-6">
+            {skillSets.soft.map((soft, index) => (
+              <li key={index}>{soft}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <p className="mb-6 font-medium">
+        Must be a part of {qualification} to qualify for this position
+      </p>
+
+      <div className="flex justify-between items-center">
+        <div>
+          <Button
+            className="bg-gray-200 hover:bg-gray-300 text-black mr-2"
+            onClick={() => onApply && onApply(id)}
+          >
+            Apply For this Position
+          </Button>
+        </div>
+
+        <div className="flex items-center">
+          <div className="flex space-x-2 mr-6">
+            <Button
+              variant="outline"
+              className="bg-gray-200 hover:bg-gray-300 text-black"
+              onClick={() => onEdit && onEdit(id)}
+            >
+              Edit Position
+            </Button>
+            <Button
+              variant="outline"
+              className="bg-gray-200 hover:bg-gray-300 text-black"
+              onClick={() => onDelete && onDelete(id)}
+            >
+              Delete Position
+            </Button>
+          </div>
+
+          {skillMatch !== undefined && (
+            <div className="text-right">
+              <span className="font-bold">{skillMatch}% Skill Match</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+PositionCard.defaultProps = {
+    responsibilities: [],
+    skillSets: {
+      technical: [],
+      tools: [],
+      soft: [],
+    },
+    qualification: "Not specified",
+    skillMatch: undefined,
+    onEdit: undefined,
+    onDelete: undefined,
+    onApply: undefined,
+  };
\ No newline at end of file
diff --git a/frontend/bitmatch/src/components/ui/Card.jsx b/frontend/bitmatch/src/components/ui/Card.jsx
new file mode 100644
index 0000000..1fbd077
--- /dev/null
+++ b/frontend/bitmatch/src/components/ui/Card.jsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
\ No newline at end of file
diff --git a/frontend/bitmatch/src/components/ui/Dialog.jsx b/frontend/bitmatch/src/components/ui/Dialog.jsx
new file mode 100644
index 0000000..4a5520e
--- /dev/null
+++ b/frontend/bitmatch/src/components/ui/Dialog.jsx
@@ -0,0 +1,101 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
\ No newline at end of file
diff --git a/frontend/bitmatch/src/components/ui/ImageSlideshow.jsx b/frontend/bitmatch/src/components/ui/ImageSlideshow.jsx
index fd3c3ee..4b972b5 100644
--- a/frontend/bitmatch/src/components/ui/ImageSlideshow.jsx
+++ b/frontend/bitmatch/src/components/ui/ImageSlideshow.jsx
@@ -51,12 +51,7 @@ export default function ImageSlideshow({ items }) {
     "absolute top-1/2 -translate-y-1/2 cursor-pointer z-20 hover:scale-110 transition-transform";
 
   return (
-    <a
-      href={items[currentIndex]?.link}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="block"
-    >
+    <div className="block">
       <div className="relative w-full h-[600px] bg-gray-200 overflow-hidden">
         <div className="h-full relative cursor-pointer">
           {items.map((slide, index) => (
@@ -136,9 +131,10 @@ export default function ImageSlideshow({ items }) {
           ))}
         </div>
       </div>
-    </a>
+    </div>
   );
 }
+
 ImageSlideshow.propTypes = {
   items: PropTypes.arrayOf(
     PropTypes.shape({
diff --git a/frontend/bitmatch/src/components/ui/Label.jsx b/frontend/bitmatch/src/components/ui/Label.jsx
new file mode 100644
index 0000000..1701e41
--- /dev/null
+++ b/frontend/bitmatch/src/components/ui/Label.jsx
@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
\ No newline at end of file
diff --git a/frontend/bitmatch/src/components/ui/ProjectCarousel.jsx b/frontend/bitmatch/src/components/ui/ProjectCarousel.jsx
index 8c8f274..531a873 100644
--- a/frontend/bitmatch/src/components/ui/ProjectCarousel.jsx
+++ b/frontend/bitmatch/src/components/ui/ProjectCarousel.jsx
@@ -10,6 +10,7 @@ export default function ProjectCarousel({ projects }) {
   const [maxScroll, setMaxScroll] = useState(0);
   const [visibleCards, setVisibleCards] = useState(3);
   const carouselRef = useRef(null);
+  const limitedProjects = projects.slice(0, 5);
 
   useEffect(() => {
     const handleResize = () => {
@@ -33,10 +34,11 @@ export default function ProjectCarousel({ projects }) {
   useEffect(() => {
     if (carouselRef.current) {
       const containerWidth = carouselRef.current.clientWidth;
-      const totalWidth = containerWidth * (projects.length / visibleCards);
+      const totalWidth =
+        containerWidth * (limitedProjects.length / visibleCards);
       setMaxScroll(totalWidth - containerWidth);
     }
-  }, [projects.length, visibleCards]);
+  }, [limitedProjects.length, visibleCards]);
 
   const scrollLeft = () => {
     if (carouselRef.current) {
@@ -74,9 +76,9 @@ export default function ProjectCarousel({ projects }) {
         className="flex overflow-x-hidden scroll-smooth"
         style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
       >
-        {projects.map((project, index) => (
+        {limitedProjects.map((project, index) => (
           <div
-            key={project.id || `project-${index}`} // Ensures a unique key, even if `id` is missing
+            key={project.id || `project-${index}`}
             className={`flex-shrink-0 px-1 ${
               visibleCards === 1
                 ? "w-full"
diff --git a/frontend/bitmatch/src/components/ui/ScrollArea.jsx b/frontend/bitmatch/src/components/ui/ScrollArea.jsx
new file mode 100644
index 0000000..d1c12d8
--- /dev/null
+++ b/frontend/bitmatch/src/components/ui/ScrollArea.jsx
@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      ref={ref}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+);
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
\ No newline at end of file
diff --git a/frontend/bitmatch/src/components/ui/Textarea.jsx b/frontend/bitmatch/src/components/ui/Textarea.jsx
new file mode 100644
index 0000000..d362b5e
--- /dev/null
+++ b/frontend/bitmatch/src/components/ui/Textarea.jsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };
\ No newline at end of file
diff --git a/frontend/bitmatch/src/views/AddProjectPage.jsx b/frontend/bitmatch/src/views/AddProjectPage.jsx
new file mode 100644
index 0000000..7493142
--- /dev/null
+++ b/frontend/bitmatch/src/views/AddProjectPage.jsx
@@ -0,0 +1,391 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { ChevronRight } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+const SERVER_HOST = import.meta.env.VITE_SERVER_HOST;
+const CREATE_PROJECT_ENDPOINT = `${SERVER_HOST}/projects/create/`;
+
+export default function CreateProjectForm() {
+  const navigate = useNavigate();
+  const [projectName, setProjectName] = useState("");
+  const [university, setUniversity] = useState("");
+  const [group, setGroup] = useState("");
+  const [shortDescription, setShortDescription] = useState("");
+  const [fullDescription, setFullDescription] = useState("");
+  const [roles, setRoles] = useState([]);
+  const [newRole, setNewRole] = useState("");
+  const [coverImagePreview, setCoverImagePreview] = useState(null);
+  const [coverImageFile, setCoverImageFile] = useState(null);
+  const [sliderImages, setSliderImages] = useState([
+    "slideshow_img1.jpg",
+    "slideshow_img2.jpg",
+    "slideshow_img3.jpg",
+    "slideshow_img4.jpg",
+    "slideshow_img5.jpg",
+  ]);
+  const [selectedCategories, setSelectedCategories] = useState([
+    "Technology",
+    "Health & Fitness",
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [roleError, setRoleError] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
+
+  const handleCoverImageUpload = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      setCoverImageFile(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setCoverImagePreview(reader.result);
+      };
+      reader.readAsDataURL(file);
+      setError("");
+    }
+  };
+
+  const handleRemoveCoverImage = () => {
+    setCoverImagePreview(null);
+    setCoverImageFile(null);
+    const fileInput = document.getElementById("cover-upload");
+    if (fileInput) {
+      fileInput.value = "";
+    }
+  };
+
+  const handleShortDescriptionChange = (e) => {
+    if (e.target.value.length <= 255) {
+      setShortDescription(e.target.value);
+    }
+  };
+
+  const handleFullDescriptionChange = (e) => {
+    if (e.target.value.length <= 540) {
+      setFullDescription(e.target.value);
+    }
+  };
+
+  const handleAddRole = () => {
+    if (newRole.trim()) {
+      setRoles((prevRoles) => [...prevRoles, { title: newRole.trim() }]);
+      setNewRole("");
+      setRoleError("");
+    } else {
+      setRoleError("Role can't be empty.");
+    }
+  };
+
+  const handleRemoveRole = (index) => {
+    setRoles((prevRoles) => prevRoles.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    setSuccessMessage("");
+    setIsLoading(true);
+
+    if (!projectName.trim()) {
+      setError("Project Name is required.");
+      setIsLoading(false);
+      return;
+    }
+    if (!university.trim()) {
+      setError("University / College Name is required.");
+      setIsLoading(false);
+      return;
+    }
+    if (!shortDescription.trim()) {
+      setError("Description is required.");
+      setIsLoading(false);
+      return;
+    }
+    if (!coverImageFile) {
+      setError("Cover Image is required.");
+      setIsLoading(false);
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("title", projectName);
+    formData.append("institution", university);
+    formData.append("group", group);
+    formData.append("description", shortDescription);
+    formData.append("full_description", fullDescription);
+    formData.append("positions", JSON.stringify(roles));
+    formData.append("image_url", coverImageFile);
+
+    try {
+      const response = await fetch(CREATE_PROJECT_ENDPOINT, {
+        method: "POST",
+        body: formData,
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        throw new Error(
+          result.message || `HTTP error! status: ${response.status}`
+        );
+      }
+
+      setSuccessMessage("Project created successfully!");
+      if (result.id) {
+        navigate(`/projects/${result.id}`);
+      }
+    } catch (err) {
+      setError(
+        err.message || "An unexpected error occurred. Please try again."
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <header className="border-b p-4">
+        <div className="flex justify-between items-center">
+          <Button
+            variant="ghost"
+            size="lg"
+            onClick={() => window.history.back()}
+          >
+            <ChevronRight className="h-4 w-4 mr-2 transform rotate-180" />
+            Back to Projects
+          </Button>
+        </div>
+      </header>
+      <form onSubmit={handleSubmit} className="max-w-4xl mx-auto px-6 py-8">
+        <h1 className="text-3xl font-bold mb-8 border-b pb-4">
+          Add a New Project
+        </h1>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+          <div>
+            <h2 className="font-lg mb-1">
+              Cover Image <span className="text-red-500">*</span>
+            </h2>
+            <p className="text-sm text-gray-600 mb-2">
+              Minimum: 315x250, Recommended: 630x500
+            </p>
+            <div className="bg-gray-200 h-64 flex items-center justify-center relative border">
+              {coverImagePreview ? (
+                <>
+                  <img
+                    src={coverImagePreview}
+                    alt="Cover Preview"
+                    className="w-full h-full object-cover"
+                  />
+                  <button
+                    type="button"
+                    onClick={handleRemoveCoverImage}
+                    className="absolute top-2 right-2 bg-red-500 text-white p-1 rounded-full leading-none hover:bg-red-600 transition-colors"
+                    aria-label="Remove cover image"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                </>
+              ) : (
+                <label
+                  htmlFor="cover-upload"
+                  className="bg-black text-white px-4 py-2 cursor-pointer hover:bg-gray-800 transition-colors"
+                >
+                  Upload Cover Image
+                </label>
+              )}
+              <input
+                id="cover-upload"
+                type="file"
+                className="hidden"
+                onChange={handleCoverImageUpload}
+                accept="image/*"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div>
+            <label htmlFor="title" className="block font-medium mb-1">
+              Project Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              id="title"
+              className="w-full border rounded-md p-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="Enter Project Name"
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+              required
+            />
+          </div>
+
+          <div>
+            <label htmlFor="university" className="block font-medium mb-1">
+              University / College Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              id="university"
+              className="w-full border rounded-md p-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="Enter University Name"
+              value={university}
+              onChange={(e) => setUniversity(e.target.value)}
+              required
+            />
+          </div>
+
+          <div>
+            <label htmlFor="group" className="block font-medium mb-1">
+              Group (Optional)
+            </label>
+            <input
+              type="text"
+              id="group"
+              className="w-full border rounded-md p-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="Enter Group Name (if applicable)"
+              value={group}
+              onChange={(e) => setGroup(e.target.value)}
+            />
+            <p className="text-sm text-gray-600 mt-1">
+              Will this project be associated with a Group? If so, type the
+              group name.
+            </p>
+          </div>
+
+          <div>
+            <label htmlFor="short-desc" className="block font-medium mb-1">
+              Description <span className="text-red-500">*</span>
+            </label>
+            <textarea
+              id="short-desc"
+              className="w-full border rounded-md p-2 resize-none focus:ring-blue-500 focus:border-blue-500"
+              rows={4}
+              value={shortDescription}
+              onChange={handleShortDescriptionChange}
+              required
+              placeholder="Enter a concise description of your project"
+              maxLength={255}
+            ></textarea>
+            <div className="flex justify-between text-sm text-gray-600 mt-1">
+              <span>Max Characters: 255</span>
+              <span>Character Count: {shortDescription.length}</span>
+            </div>
+
+            <br></br>
+
+            <label htmlFor="full-desc" className="block font-medium mb-1">
+              Project Background/More Details (Optional)
+            </label>
+            <textarea
+              id="full-desc"
+              className="w-full border rounded-md p-2 resize-none focus:ring-blue-500 focus:border-blue-500"
+              rows={4}
+              value={fullDescription}
+              onChange={handleFullDescriptionChange}
+              required
+              placeholder="Enter your project's background information, or any additional details."
+              maxLength={1000}
+            ></textarea>
+            <div className="flex justify-between text-sm text-gray-600 mt-1">
+              <span>Max Characters: 1000</span>
+              <span>Character Count: {fullDescription.length}</span>
+            </div>
+          </div>
+
+          <div>
+            <label className="block font-medium mb-2">
+              Roles/Positions Needed (Optional)
+            </label>
+            <div className="flex items-center space-x-2 mb-2">
+              <input
+                type="text"
+                value={newRole}
+                onChange={(e) => {
+                  setNewRole(e.target.value);
+                  setRoleError("");
+                }}
+                className="flex-grow border rounded-md p-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="e.g., Frontend Developer, UI/UX Designer"
+              />
+              <button
+                type="button"
+                onClick={handleAddRole}
+                className="bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition-colors text-sm"
+              >
+                Add Role
+              </button>
+            </div>
+
+            {roleError && (
+              <p className="text-red-500 text-sm mt-1">{roleError}</p>
+            )}
+
+            <div className="mt-3 border rounded-md overflow-hidden">
+              {roles.length === 0 ? (
+                <p className="text-sm text-gray-500 px-4 py-3">
+                  No roles added yet.
+                </p>
+              ) : (
+                roles.map((role, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between px-4 py-2 border-b last:border-b-0 bg-gray-50"
+                  >
+                    <span className="text-sm">{role.title}</span>
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveRole(index)}
+                      className="text-red-500 hover:text-red-700 transition-colors font-bold"
+                      aria-label={`Remove role: ${role.title}`}
+                    >
+                      &#x2715;
+                    </button>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+
+          {error && (
+            <p className="mb-4 text-red-600 bg-red-100 border border-red-400 p-3 rounded">
+              {error}
+            </p>
+          )}
+          {successMessage && (
+            <p className="mb-4 text-green-600 bg-green-100 border border-green-400 p-3 rounded">
+              {successMessage}
+            </p>
+          )}
+          <div className="mt-8 pt-6 border-t">
+            <button
+              type="submit"
+              className={`bg-black text-white px-8 py-2 rounded-md hover:bg-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed`}
+              disabled={isLoading}
+            >
+              {isLoading ? "Creating..." : "Create Project"}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/frontend/bitmatch/src/views/IndividualProjectPage.jsx b/frontend/bitmatch/src/views/IndividualProjectPage.jsx
index 6521536..a06b050 100644
--- a/frontend/bitmatch/src/views/IndividualProjectPage.jsx
+++ b/frontend/bitmatch/src/views/IndividualProjectPage.jsx
@@ -1,10 +1,21 @@
-import { ChevronRight, ChevronLeft, Plus, Edit, Icon } from "lucide-react";
+import {
+  ChevronRight,
+  ChevronLeft,
+  Plus,
+  Edit,
+  Icon,
+  ThumbsUp,
+  UserRound,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { MemberCard } from "@/components/project/MemberCard";
+import { PositionCard } from "@/components/project/PositionCard";
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-import Modal from "@/components/project/Modal";
+import { DiscussionPost, ReplyForm } from "@/components/project/DiscussionCard";
+import { EditProjectDialog } from "@/components/project/EditProjectDialog";
 const SERVER_HOST = import.meta.env.VITE_SERVER_HOST;
 import axios from "axios";
 
@@ -25,7 +36,6 @@ const fetchProjectInfo = async (id) => {
     }
 
     const projectData = await response.json();
-    console.log(projectData);
 
     return projectData;
   } catch (error) {
@@ -34,14 +44,19 @@ const fetchProjectInfo = async (id) => {
   }
 };
 
+const editProjectInfo = async (id) => {};
+
 const ProjectDetailPage = () => {
   const { id } = useParams(); // Access the dynamic `id` parameter from the URL
   const [project, setProject] = useState(null); // State to store project details
   const [loading, setLoading] = useState(true); // State to handle loading state
   const [error, setError] = useState(null); // State to handle errors
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const [activeTab, setActiveTab] = useState("overview");
+  const [discussions, setDiscussions] = useState([]);
+  const [showCommentForm, setShowCommentForm] = useState(false);
+  const [replyingTo, setReplyingTo] = useState(null);
 
   useEffect(() => {
     // Fetch project details when the component mounts or the `id` changes
@@ -64,6 +79,42 @@ const ProjectDetailPage = () => {
     loadProjectInfo();
   }, [id]);
 
+  const handleSave = async (data) => {
+    console.log("Saving project data:", data);
+
+    const formData = new FormData();
+
+    formData.append("title", data.title);
+    formData.append("group", data.group);
+    formData.append("institution", data.institution);
+    formData.append("description", data.description);
+    formData.append("full_description", data.full_description);
+    formData.append("positions", JSON.stringify(data.positions));
+
+    if (data.new_image) {
+      formData.append("image_url", data.new_image);
+    }
+
+    try {
+      const response = await axios.put(
+        `${SERVER_HOST}/projects/${data.id}/`,
+        formData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      );
+
+      alert("Project updated successfully!");
+      editProjectInfo(response.data);
+      window.location.reload();
+    } catch (error) {
+      console.error("Error updating project:", error);
+      alert("Failed to update the project. Please try again.");
+    }
+  };
+
   const nextImage = () => {
     if (project.images) {
       setCurrentImageIndex((prev) =>
@@ -84,6 +135,100 @@ const ProjectDetailPage = () => {
     setCurrentImageIndex(index);
   };
 
+  const handleAddComment = () => {
+    setShowCommentForm(true);
+    setReplyingTo(null);
+  };
+
+  const handleCancelComment = () => {
+    setShowCommentForm(false);
+    setReplyingTo(null);
+  };
+
+  const handleSubmitComment = (postId, content) => {
+    if (postId) {
+      // Add reply to existing post
+      const updatedDiscussions = discussions.map((discussion) => {
+        if (discussion.id === postId) {
+          return {
+            ...discussion,
+            replies: [
+              ...(discussion.replies || []),
+              {
+                id: Date.now().toString(),
+                parentId: postId,
+                author: {
+                  name: "Current User",
+                  title: "Project Member",
+                  profileImage: "",
+                },
+                content,
+                datePosted: new Date().toLocaleString(),
+              },
+            ],
+          };
+        }
+        return discussion;
+      });
+      setDiscussions(updatedDiscussions);
+    } else {
+      // Add new post
+      const newPost = {
+        id: Date.now().toString(),
+        author: {
+          name: "Current User",
+          title: "Project Member",
+          profileImage: "",
+        },
+        content,
+        datePosted: new Date().toLocaleString(),
+        replies: [],
+      };
+      setDiscussions([...discussions, newPost]);
+    }
+    setShowCommentForm(false);
+    setReplyingTo(null);
+  };
+
+  const handleReplyToPost = (id) => {
+    setReplyingTo(id);
+  };
+
+  const handleDeletePost = (id) => {
+    // In a real app, this would show a confirmation dialog
+    if (confirm(`Delete post with ID ${id}?`)) {
+      // Check if it's a main post or a reply
+      const isMainPost = discussions.some((discussion) => discussion.id === id);
+
+      if (isMainPost) {
+        // Delete the main post and all its replies
+        const updatedDiscussions = discussions.filter(
+          (discussion) => discussion.id !== id
+        );
+        setDiscussions(updatedDiscussions);
+      } else {
+        // Delete a reply
+        const updatedDiscussions = discussions.map((discussion) => {
+          if (
+            discussion.replies &&
+            discussion.replies.some((reply) => reply.id === id)
+          ) {
+            return {
+              ...discussion,
+              replies: discussion.replies.filter((reply) => reply.id !== id),
+            };
+          }
+          return discussion;
+        });
+        setDiscussions(updatedDiscussions);
+      }
+    }
+  };
+
+  const handleReaction = (id) => {
+    alert(`Add reaction to post with ID ${id}`);
+  };
+
   // Loading state
   if (loading) {
     return (
@@ -119,19 +264,19 @@ const ProjectDetailPage = () => {
               onClick={() => window.history.back()}
             >
               <ChevronRight className="h-4 w-4 mr-2 transform rotate-180" />
-              Back
+              Back to Projects
             </Button>
           </div>
         </header>
 
         {/* Main content */}
         <main className="flex-1 p-6 max-w-7xl mx-auto w-full">
-          <h1 className="text-4xl font-bold mb-8">{project.title}</h1>
+          <h1 className="text-5xl font-bold mb-6">{project.title}</h1>
 
           {/* Project showcase */}
-          <div className="grid md:grid-cols-2 gap-8 mb-8">
+          <div className="grid md:grid-cols-2 gap-6 mb-9">
             {/* Image Slider */}
-            <div className="relative bg-gray-200 aspect-[4/3] flex items-center justify-center">
+            <div className="relslative bg-gray-200 aspect-[4/3] flex items-center justify-center mt-1">
               {project.images && project.images.length > 0 ? (
                 <>
                   <div className="relative w-full h-full">
@@ -142,7 +287,7 @@ const ProjectDetailPage = () => {
                       alt="Project image"
                       className="object-cover"
                     />
-                    <div className="absolute inset-0 flex items-center justify-between px-4">
+                    <div className="relative inset-0 flex items-center justify-between px-4">
                       <Button
                         variant="secondary"
                         size="icon"
@@ -161,13 +306,7 @@ const ProjectDetailPage = () => {
                       </Button>
                     </div>
                   </div>
-                  <div className="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
-                    <p className="text-center text-sm text-gray-600 bg-white/80 px-2 py-1 rounded">
-                      Slider
-                      <br />
-                      Image snapshots are below
-                    </p>
-                  </div>
+                  <div className="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"></div>
                 </>
               ) : (
                 <span>No images available</span>
@@ -175,7 +314,7 @@ const ProjectDetailPage = () => {
             </div>
             {/* Project info */}
             <div className="bg-muted/30 rounded-lg p-6">
-              <div className="flex items-center gap-4 mb-4">
+              <div className="flex items-center gap-4 mb-2">
                 {project.image_url ? (
                   <img
                     src={project.image_url}
@@ -186,19 +325,23 @@ const ProjectDetailPage = () => {
                   <span>Cover Image goes here</span>
                 )}
               </div>
-
               <div className="mb-6">
+                <h5 className="text-sm">From</h5>
                 <h2 className="text-xl font-bold">{project.group}</h2>
                 <p className="text-sm">{project.description}</p>
               </div>
 
               <div className="flex gap-4 mb-2">
                 <div className="flex items-center gap-2">
-                  <div className="w-4 h-4 rounded-full bg-gray-300"></div>
+                  <Button variant="ghost" size="icon">
+                    <ThumbsUp className="h-6 w-6"></ThumbsUp>
+                  </Button>
                   <span>{project.likes_count} Likes</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <div className="w-4 h-4 rounded-full bg-gray-300"></div>
+                  <Button variant="ghost" size="icon">
+                    <UserRound className="h-6 w-6"></UserRound>
+                  </Button>
                   <span>{project.followers_count} Followers</span>
                 </div>
               </div>
@@ -206,7 +349,7 @@ const ProjectDetailPage = () => {
           </div>
 
           {/* Thumbnails */}
-          <div className="relative mb-8">
+          <div className="relative mt-1 mb-6">
             <div className="flex overflow-x-auto space-x-2 py-2">
               {project.images &&
                 project.images.map((image, index) => (
@@ -220,8 +363,8 @@ const ProjectDetailPage = () => {
                     <img
                       src={image || "/placeholder.svg"}
                       alt={`Pic ${index + 1}`}
-                      width={64}
-                      height={64}
+                      width={60}
+                      height={60}
                       className="object-cover w-full h-full"
                     />
                   </div>
@@ -231,149 +374,451 @@ const ProjectDetailPage = () => {
 
           {/* Tabs */}
           <Tabs
-            defaultValue="overview"
-            className="mb-8"
-            onValueChange={setActiveTab}
+            className="mb-2"
+            selectedIndex={[
+              "overview",
+              "updates",
+              "members",
+              "wanted",
+              "discussions",
+              "contact",
+              "edit",
+            ].indexOf(activeTab)}
+            onSelect={(index) => {
+              const tabNames = [
+                "overview",
+                "updates",
+                "members",
+                "wanted",
+                "discussions",
+                "contact",
+                "edit",
+              ];
+              const selectedTab = tabNames[index];
+
+              if (selectedTab === "edit") {
+                setIsOpen(true); // Open the dialog
+                setActiveTab("overview"); // Stay on the default tab (e.g., Overview)
+              } else {
+                setActiveTab(selectedTab); // Change tab normally
+              }
+            }}
           >
-            <TabList className="grid grid-cols-6 w-full bg-gray-100 mb-8">
+            <TabList className="grid grid-cols-7 w-full bg-gray-100 mb-8">
               <Tab
                 value="overview"
-                className="font-medium px-4 py-2 transition-all hover:bg-blue-100 hover:text-blue-600 rounded-md"
+                className="font-medium px-4 py-2 transition-all text-center cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-md"
                 selectedClassName="bg-blue-200 text-black"
               >
                 Overview
               </Tab>
               <Tab
                 value="updates"
-                className="font-medium px-4 py-2 transition-all hover:bg-blue-100 hover:text-blue-600 rounded-md"
+                className="font-medium px-4 py-2 transition-all text-center cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-md"
                 selectedClassName="bg-blue-200 text-black"
               >
                 Updates
               </Tab>
               <Tab
                 value="members"
-                className="font-medium px-4 py-2 transition-all hover:bg-blue-100 hover:text-blue-600 rounded-md"
+                className="font-medium px-4 py-2 transition-all text-center cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-md"
                 selectedClassName="bg-blue-200 text-black"
               >
                 Members
               </Tab>
               <Tab
                 value="wanted"
-                className="font-medium px-4 py-2 transition-all hover:bg-blue-100 hover:text-blue-600 rounded-md"
+                className="font-medium px-4 py-2 transition-all text-center cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-md"
                 selectedClassName="bg-blue-200 text-black"
               >
                 Wanted
               </Tab>
               <Tab
                 value="discussions"
-                className="font-medium px-4 py-2 transition-all hover:bg-blue-100 hover:text-blue-600 rounded-md"
+                className="font-medium px-4 py-2 transition-all text-center cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-md"
                 selectedClassName="bg-blue-200 text-black"
               >
                 Discussions
               </Tab>
               <Tab
                 value="contact"
-                className="font-medium px-4 py-2 transition-all hover:bg-blue-100 hover:text-blue-600 rounded-md"
+                className="font-medium px-4 py-2 transition-all text-center cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-md"
                 selectedClassName="bg-blue-200 text-black"
               >
                 Contact
               </Tab>
+
+              <Tab
+                value="edit"
+                className="font-medium px-4 py-2 transition-all text-center cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-md"
+                selectedClassName="bg-blue-200 text-black"
+                onClick={(e) => {
+                  setIsOpen(true);
+                  e.preventDefault();
+                }}
+              >
+                Edit Project
+              </Tab>
             </TabList>
 
+            <EditProjectDialog
+              open={isOpen}
+              onOpenChange={setIsOpen}
+              projectData={project}
+              onSave={handleSave}
+            />
+
             <TabPanel value="overview" className="mt-6">
               <div className="flex justify-between items-center mb-4">
-                <h3 className="text-2xl font-bold">Overview</h3>
+                <h2 className="text-3xl font-bold">Overview</h2>
               </div>
-              <h4 className="text-xl font-semibold mb-4">
+              <h2 className="text-xl font-semibold mb-4">
                 Background & More Details About the Project
-              </h4>
+              </h2>
               <div className="mb-6">
-                <h5 className="font-semibold mb-2">
-                  This space will be filled in by the owner
-                </h5>
-                <p className="text-sm">{project.description}</p>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setIsModalOpen(true)}
-                >
-                  <Edit className="h-4 w-4 mr-1" />
-                  Edit Project
-                </Button>
-                <Modal
-                  isOpen={isModalOpen}
-                  onClose={() => setIsModalOpen(false)}
-                >
-                  <h2 className="text-xl font-bold">Edit Project</h2>
-                  <div className="grid grid-cols-4 items-center gap-4">
-                    <p hclassName="text-right">Title</p>
-                    <Input
-                      id="title"
-                      defaultValue={project.title}
-                      className="col-span-3"
-                    />
-                    <p hclassName="text-right">Description</p>
-                    <Input
-                      id="description"
-                      defaultValue={project.description}
-                      className="col-span-3"
-                    />
-                  </div>
-                  <button
-                    onClick={() => setIsModalOpen(false)}
-                    className="mt-4 bg-red-500 text-white px-4 py-2 rounded-lg"
-                  >
-                    Close
-                  </button>
-                </Modal>
+                <p className="text-sm mb-8">{project.full_description}</p>
               </div>
             </TabPanel>
 
             <TabPanel value="updates">
-              <div className="p-4 text-center">
-                <p className="text-muted-foreground">
-                  Updates content will go here
-                </p>
+              <div className="border rounded-lg p-4 overflow-hidden">
+                <div className="p-5 border-solid">
+                  <h2 className="text-2xl font-bold text-left mb-5">
+                    Updates{" "}
+                    <span className="text-yellow-500 font-bold">(W.I.P)</span>
+                  </h2>
+                  <div className="gap-4">
+                    <h3 className="text-sm mb-3">Title</h3>
+                    <Input
+                      type="text"
+                      className="flex-1 border rounded px-4 py-2 mb-6 h-10"
+                    />
+                    {showCommentForm ? (
+                      <ReplyForm
+                        postId={replyingTo || ""}
+                        onCancel={handleCancelComment}
+                        onSubmit={handleSubmitComment}
+                      />
+                    ) : (
+                      <div className="border p-4 mb-4">
+                        <div className="mb-4">
+                          <div
+                            className="w-full p-4 min-h-[100px] border rounded cursor-pointer bg-gray-50 hover:bg-gray-100"
+                            onClick={handleAddComment}
+                          >
+                            <p className="text-gray-500">
+                              Add your comments here
+                            </p>
+                          </div>
+                        </div>
+                        <div className="flex justify-end space-x-2">
+                          <Button
+                            variant="secondary"
+                            className="bg-gray-300 hover:bg-gray-400 text-black"
+                            onClick={handleCancelComment}
+                          >
+                            Cancel
+                          </Button>
+                          <Button
+                            variant="secondary"
+                            className="bg-gray-300 hover:bg-gray-400 text-black"
+                            onClick={handleAddComment}
+                          >
+                            Comment
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
               </div>
             </TabPanel>
 
             <TabPanel value="members">
-              <div className="p-4 text-center">
-                <p className="text-muted-foreground">
-                  Members content will go here
-                </p>
+              <div className="border rounded-lg overflow-hidden">
+                {/* Search and Add Member Section */}
+                <div className="p-5 border-b">
+                  <div className="flex gap-4">
+                    <Input
+                      type="text"
+                      placeholder="Search for students to add"
+                      className="flex-1 border rounded px-4 py-2"
+                    />
+                    <Button
+                      variant="secondary"
+                      className="bg-gray-300 hover:bg-gray-400 text-black"
+                    >
+                      Add Member
+                    </Button>
+                  </div>
+                </div>
+
+                {/* Members List Section */}
+                <div className="p-5">
+                  <h2 className="text-2xl font-bold mb-6">
+                    Students Working on This Project{" "}
+                    <span className="text-yellow-500 font-bold">(W.I.P)</span>
+                  </h2>
+
+                  <div className="space-y-4">
+                    {/* Member 1 */}
+                    <MemberCard
+                      name="John Doe"
+                      position="Backend Developer"
+                      joinDate="01-01-2024"
+                      profileImage="/placeholder.svg"
+                    />
+                    {/* Member 2 */}
+                    <MemberCard
+                      name="Jane Done"
+                      position="Frontend Developer"
+                      joinDate="01-01-2024"
+                      profileImage="/placeholder.svg"
+                    />
+                    {/* Member 3 */}
+                    <MemberCard
+                      name="Jim Dope"
+                      position="Backend Developer"
+                      joinDate="01-01-2024"
+                      profileImage="/placeholder.svg"
+                    />
+                  </div>
+                </div>
               </div>
             </TabPanel>
 
             <TabPanel value="wanted">
-              <div className="p-4 text-center">
-                <p className="text-muted-foreground">
-                  Wanted content will go here
-                </p>
+              <div className="rounded-lg overflow-hidden">
+                {/* Wanted Header */}
+                <h2 className="text-4xl font-bold mb-6">
+                  Wanted{" "}
+                  <span className="text-yellow-500 font-bold">(W.I.P)</span>
+                </h2>
+                {/* Positions Section */}
+                <div>
+                  <div className="p-6 flex justify-between items-center border-b">
+                    <h2 className="text-2xl font-bold">
+                      Positions Needed for This Project
+                    </h2>
+                    <Button
+                      variant="secondary"
+                      className="hover:bg-gray-400 text-black"
+                    >
+                      <Plus className="h-4 w-4 mr-2" />
+                      Add Position
+                    </Button>
+                  </div>
+
+                  <div>
+                    <PositionCard
+                      id="1"
+                      title="Backend Developer"
+                      datePosted="02-02-2024"
+                      description="Work with Java Spring to implement the backend for a web app"
+                      responsibilities={[
+                        "General Description of the role. Lorem Ipsum is simply dummy text of the printing typesetting industry.",
+                        "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
+                        "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+                      ]}
+                      skillSets={{
+                        technical: ["Python", "SQL", "C++", "Java"],
+                        tools: ["Pandas", "AI Models", "Matlab", "TensorFlow"],
+                        soft: [
+                          "Communication",
+                          "Analytical",
+                          "Problem Solver",
+                          "Detail Oriented",
+                        ],
+                      }}
+                      qualification="Pursuing a BA in Computer Science"
+                      skillMatch="35"
+                    />
+                    <PositionCard
+                      id="2"
+                      title="Backend Developer"
+                      datePosted="02-02-2024"
+                      description="Work with Java Spring to implement the backend for a web app"
+                      responsibilities={[
+                        "General Description of the role. Lorem Ipsum is simply dummy text of the printing typesetting industry.",
+                        "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
+                        "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+                      ]}
+                      skillSets={{
+                        technical: ["Python", "SQL", "C++", "Java"],
+                        tools: ["Pandas", "AI Models", "Matlab", "TensorFlow"],
+                        soft: [
+                          "Communication",
+                          "Analytical",
+                          "Problem Solver",
+                          "Detail Oriented",
+                        ],
+                      }}
+                      qualification="Pursuing a BA in Computer Science"
+                      skillMatch="35"
+                    />
+                  </div>
+                </div>
               </div>
             </TabPanel>
 
-            <TabPanel value="discussions">
-              <div className="p-4 text-center">
-                <p className="text-muted-foreground">
-                  Discussions content will go here
-                </p>
+            <TabPanel value="discussions" className="mt-6">
+              <div className="bg-gray-100 rounded-lg overflow-hidden">
+                {/* Discussions Header */}
+                <div className="p-6">
+                  <div className="inline-block bg-white border rounded-lg px-4 py-2 mb-4">
+                    <span className="font-bold">
+                      Discussions{" "}
+                      <span className="text-yellow-500 font-bold">(W.I.P)</span>
+                    </span>
+                  </div>
+                </div>
+
+                {/* Comment Form */}
+                <div className="bg-white border-t p-6">
+                  {showCommentForm ? (
+                    <ReplyForm
+                      postId={replyingTo || ""}
+                      onCancel={handleCancelComment}
+                      onSubmit={handleSubmitComment}
+                    />
+                  ) : (
+                    <div className="border p-4 mb-4">
+                      <div className="mb-4">
+                        <div
+                          className="w-full p-4 min-h-[100px] border rounded cursor-pointer bg-gray-50 hover:bg-gray-100"
+                          onClick={handleAddComment}
+                        >
+                          <p className="text-gray-500">
+                            Add your comments here
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex justify-end space-x-2">
+                        <Button
+                          variant="secondary"
+                          className="bg-gray-300 hover:bg-gray-400 text-black"
+                          onClick={handleCancelComment}
+                        >
+                          Cancel
+                        </Button>
+                        <Button
+                          variant="secondary"
+                          className="bg-gray-300 hover:bg-gray-400 text-black"
+                          onClick={handleAddComment}
+                        >
+                          Comment
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Discussion Posts */}
+                  <div>
+                    {discussions.length > 0 ? (
+                      discussions.map((discussion) => (
+                        <div key={discussion.id}>
+                          <DiscussionPost
+                            id={discussion.id}
+                            author={discussion.author}
+                            content={discussion.content}
+                            datePosted={discussion.datePosted}
+                            onReply={handleReplyToPost}
+                            onDelete={handleDeletePost}
+                            onReaction={handleReaction}
+                          />
+
+                          {replyingTo === discussion.id && (
+                            <div className="ml-12 mt-4">
+                              <ReplyForm
+                                postId={discussion.id}
+                                onCancel={handleCancelComment}
+                                onSubmit={handleSubmitComment}
+                              />
+                            </div>
+                          )}
+
+                          {discussion.replies &&
+                            discussion.replies.map((reply) => (
+                              <div key={reply.id}>
+                                <DiscussionPost
+                                  id={reply.id}
+                                  author={reply.author}
+                                  content={reply.content}
+                                  datePosted={reply.datePosted}
+                                  isReply={true}
+                                  parentId={discussion.id}
+                                  onReply={handleReplyToPost}
+                                  onDelete={handleDeletePost}
+                                  onReaction={handleReaction}
+                                />
+
+                                {replyingTo === reply.id && (
+                                  <div className="ml-12 mt-4">
+                                    <ReplyForm
+                                      postId={reply.id}
+                                      onCancel={handleCancelComment}
+                                      onSubmit={handleSubmitComment}
+                                    />
+                                  </div>
+                                )}
+                              </div>
+                            ))}
+                        </div>
+                      ))
+                    ) : (
+                      <p className="text-center py-8">
+                        No discussions yet. Start the conversation!
+                      </p>
+                    )}
+                  </div>
+                </div>
               </div>
             </TabPanel>
 
             <TabPanel value="contact">
-              <div className="p-4 text-center">
-                <p className="text-muted-foreground">
-                  Contact content will go here
-                </p>
+              <div className="border rounded-lg overflow-hidden">
+                <div className="p-5 border-b">
+                  <h1 className="text-2xl font-bold mb-10">
+                    Contact The Owner of This Project{" "}
+                    <span className="text-yellow-500 font-bold">(W.I.P)</span>
+                  </h1>
+                  <h3 className="text-sm mb-3">Full Name</h3>
+                  <Input
+                    type="text"
+                    className="flex-1 border rounded px-4 py-2 mb-6"
+                  />
+                  <h3 className="text-sm mb-3">Email Address</h3>
+                  <Input
+                    type="text"
+                    className="flex-1 border rounded px-4 py-2 mb-6"
+                  />
+                  <h3 className="text-sm mb-3">Subject</h3>
+                  <Input
+                    type="text"
+                    className="flex-1 border rounded px-4 py-2 mb-6"
+                  />
+                  <h3 className="text-sm mb-3">Description</h3>
+                  <Input
+                    type="text"
+                    className="flex-1 border rounded px-4 py-2 mb-6 h-60"
+                  />
+                  <Button
+                    variant="secondary"
+                    size="lg"
+                    className="bg-gray-100 hover:bg-gray-400 text-black"
+                  >
+                    Submit
+                  </Button>
+                </div>
               </div>
             </TabPanel>
+            <TabPanel value="edit"></TabPanel>
           </Tabs>
         </main>
 
         {/* Footer */}
         <footer className="border-t p-4 text-center">
-          <p className="text-muted-foreground">Footer</p>
+          <p className="text-muted-foreground"></p>
         </footer>
       </div>
 
diff --git a/frontend/bitmatch/src/views/ProjectListPage.jsx b/frontend/bitmatch/src/views/ProjectListPage.jsx
index da0099f..97aa371 100644
--- a/frontend/bitmatch/src/views/ProjectListPage.jsx
+++ b/frontend/bitmatch/src/views/ProjectListPage.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { ChevronRight, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Link } from "react-router-dom";
 import ProjectCardLarge from "@/components/project/ProjectCardLarge";
 const SERVER_HOST = import.meta.env.VITE_SERVER_HOST;
 import axios from "axios";
@@ -51,21 +52,15 @@ export default function ProjectListPage() {
         <h1 className="font-bold sans-display flex-grow">
           Public Projects List
         </h1>
-        <Button variant="outline" className="flex items-center gap-2">
-          <Plus className="h-4 w-4" />
-          Add New Project
-        </Button>
+        <a href="/create-project/">
+          <Button variant="outline" className="flex items-center gap-2">
+            <Plus className="h-4 w-4" />
+            Add New Project
+          </Button>
+        </a>
       </div>
       <hr className="border-t-2 border-gray-200 my-2" />
 
-      {/* "More" Button */}
-      <div className="flex justify-end mb-4">
-        <Button variant="ghost" className="flex items-center gap-2">
-          More
-          <ChevronRight className="h-4 w-4" />
-        </Button>
-      </div>
-
       {/* Project Grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {projects.map((project, index) => (