diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 160966c..b7c6a22 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -1,41 +1,12 @@
 "use client";
 
-import React, { useState } from "react";
+import React from "react";
+import ProjectsPage from "@/components/projects/ProjectsPage";
 
 export default function Projects() {
-  const [isHovered, setIsHovered] = useState(false);
-
   return (
-    <div className="flex min-h-screen items-center justify-center bg-[#080d14] font-Michroma text-white">
-      <div
-        className="group relative flex flex-col items-center gap-6 rounded-lg border border-white/10 bg-black/20 p-12 backdrop-blur-sm transition-all duration-500 hover:border-white/20 hover:shadow-lg hover:shadow-white/5"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        {/* Main text */}
-        <h1 className="text-center font-Michroma text-4xl font-bold tracking-wider">
-          COMING
-        </h1>
-        <h1 className="text-center font-Michroma text-5xl font-bold tracking-wider text-blue-400">
-          SOON!
-        </h1>
-
-        {/* Animated underline */}
-        <div className="relative mt-2">
-          <div
-            className={`h-0.5 bg-gradient-to-r from-transparent via-blue-400 to-transparent transition-all duration-500 ${
-              isHovered ? "w-48" : "w-32"
-            }`}
-          />
-        </div>
-
-        {/* Subtitle */}
-        <p className="mt-4 text-center text-sm text-gray-400">
-          We're building something awesome.
-          <br />
-          Stay tuned!
-        </p>
-      </div>
+    <div>
+      <ProjectsPage />
     </div>
   );
 }
diff --git a/src/components/admin/projects/AddForm.tsx b/src/components/admin/projects/AddForm.tsx
index 08dbe94..f08abca 100644
--- a/src/components/admin/projects/AddForm.tsx
+++ b/src/components/admin/projects/AddForm.tsx
@@ -1,8 +1,10 @@
+"use client";
+
 import React, { useState } from "react";
 import { addDoc, collection } from "firebase/firestore";
 import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
 import { db, storage } from "@/lib/firebase/firebase";
-import { ProjectFormData, Parts, Project } from "@/types/project";
+import { ProjectFormData, Parts } from "@/types/project";
 
 interface AddFormProps {
   initialData?: ProjectFormData;
@@ -27,6 +29,10 @@ const emptyFormState: ProjectFormData = {
   Photos: "",
   Image: "",
   Builders: [""],
+  semester: {
+    term: "Fall",
+    year: new Date().getFullYear(),
+  },
 };
 
 export default function AddForm({
@@ -40,7 +46,6 @@ export default function AddForm({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
-
   const [selectedImage, setSelectedImage] = useState<File | null>(null);
   const [imagePreview, setImagePreview] = useState<string>(
     formData.Image || "",
@@ -48,23 +53,33 @@ export default function AddForm({
   const [uploadProgress, setUploadProgress] = useState<number>(0);
 
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
   ) => {
     const { name, value } = e.target;
     if (name.includes(".")) {
-      // Handle nested Parts object
+      // Handle nested objects (Parts and semester)
       const [parent, child] = name.split(".");
       if (parent === "Parts") {
-        setFormData((prev: ProjectFormData) => ({
+        setFormData((prev) => ({
           ...prev,
           Parts: {
             ...prev.Parts,
             [child]: value,
           },
         }));
+      } else if (parent === "semester") {
+        setFormData((prev) => ({
+          ...prev,
+          semester: {
+            ...prev.semester,
+            [child]: child === "year" ? Number(value) : value,
+          },
+        }));
       }
     } else {
-      setFormData((prev: ProjectFormData) => ({
+      setFormData((prev) => ({
         ...prev,
         [name]: value,
       }));
@@ -103,33 +118,39 @@ export default function AddForm({
     try {
       let imageUrl = formData.Image;
 
+      // Upload new image if selected
       if (selectedImage) {
         imageUrl = await uploadImage(selectedImage);
       }
 
-      // Filter out empty builders
-      const cleanedData = {
+      // Clean the data
+      const cleanedData: ProjectFormData = {
         ...formData,
         Image: imageUrl,
         Builders: formData.Builders.filter((builder) => builder.trim() !== ""),
       };
 
       if (onSubmit) {
+        // If onSubmit prop exists (editing mode), use it
         await onSubmit(cleanedData);
       } else {
+        // Direct submission to Firebase
+        console.log("Submitting to Firebase:", cleanedData); // Debug log
         const docRef = await addDoc(collection(db, "Projects"), cleanedData);
         console.log("Document written with ID: ", docRef.id);
       }
 
       setSuccess(true);
+
+      // Only reset form if not editing
       if (!isEditing) {
         setFormData(emptyFormState);
         setSelectedImage(null);
         setImagePreview("");
       }
     } catch (e) {
+      console.error("Error in submission:", e); // Debug log
       setError(e instanceof Error ? e.message : "An error occurred");
-      console.error("Error adding document: ", e);
     } finally {
       setIsSubmitting(false);
     }
@@ -174,11 +195,11 @@ export default function AddForm({
   };
 
   return (
-    <div className="mx-auto max-w-4xl sm:p-6 py-5 px-4">
+    <div className="mx-auto max-w-4xl px-4 py-5 sm:p-6">
       <form onSubmit={handleSubmit} className="space-y-6">
         {/* Basic Information */}
         <div className="space-y-4">
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div>
               <label htmlFor="Title" className="block text-sm font-medium">
                 Title
@@ -194,6 +215,50 @@ export default function AddForm({
               />
             </div>
 
+            {/* Add Semester Selection */}
+            <div className="flex gap-4">
+              <div className="flex-1">
+                <label
+                  htmlFor="semesterTerm"
+                  className="block text-sm font-medium"
+                >
+                  Term
+                </label>
+                <select
+                  id="semesterTerm"
+                  name="semester.term"
+                  value={formData.semester.term}
+                  onChange={handleChange}
+                  className="mt-1 w-full rounded-md border bg-white p-2 text-gray-900"
+                  required
+                >
+                  <option value="Spring">Spring</option>
+                  <option value="Summer">Summer</option>
+                  <option value="Fall">Fall</option>
+                </select>
+              </div>
+
+              <div className="flex-1">
+                <label
+                  htmlFor="semesterYear"
+                  className="block text-sm font-medium"
+                >
+                  Year
+                </label>
+                <input
+                  type="number"
+                  id="semesterYear"
+                  name="semester.year"
+                  value={formData.semester.year}
+                  onChange={handleChange}
+                  min="2000"
+                  max="2099"
+                  className="mt-1 w-full rounded-md border bg-white p-2 text-gray-900"
+                  required
+                />
+              </div>
+            </div>
+
             <div>
               <label
                 htmlFor="Description"
@@ -260,7 +325,7 @@ export default function AddForm({
                     <img
                       src={imagePreview}
                       alt="Preview"
-                      className="max-w-[320px] w-full rounded"
+                      className="w-full max-w-[320px] rounded"
                     />
                   </div>
                 )}
@@ -329,7 +394,7 @@ export default function AddForm({
           <button
             type="button"
             onClick={addBuilder}
-            className="rounded-md bg-green-500 px-4 py-2 text-white text-sm sm:text-base"
+            className="rounded-md bg-green-500 px-4 py-2 text-sm text-white sm:text-base"
           >
             Add Builder
           </button>
@@ -339,7 +404,7 @@ export default function AddForm({
         <button
           type="submit"
           disabled={isSubmitting}
-          className="w-full rounded-md bg-blue-500 p-3 text-white disabled:bg-blue-300 text-sm sm:text-base"
+          className="w-full rounded-md bg-blue-500 p-3 text-sm text-white disabled:bg-blue-300 sm:text-base"
         >
           {isSubmitting
             ? "Submitting..."
@@ -349,7 +414,6 @@ export default function AddForm({
         </button>
 
         {error && <div className="mt-2 text-red-500">{error}</div>}
-
         {success && (
           <div className="mt-2 text-green-500">
             {isEditing
diff --git a/src/components/admin/projects/EditForm.tsx b/src/components/admin/projects/EditForm.tsx
index 44b1485..a3c30b5 100644
--- a/src/components/admin/projects/EditForm.tsx
+++ b/src/components/admin/projects/EditForm.tsx
@@ -64,7 +64,6 @@ export default function EditForm() {
     try {
       const projectRef = doc(db, "Projects", selectedProject.id);
 
-      // Convert ProjectFormData to a plain object that Firestore can handle
       const firestoreData = {
         Youtube: updatedData.Youtube,
         Description: updatedData.Description,
@@ -72,6 +71,10 @@ export default function EditForm() {
         Photos: updatedData.Photos,
         Image: updatedData.Image,
         Builders: updatedData.Builders,
+        semester: {
+          term: updatedData.semester.term,
+          year: updatedData.semester.year,
+        },
         Parts: {
           RAM: updatedData.Parts.RAM,
           Cooling: updatedData.Parts.Cooling,
@@ -88,16 +91,13 @@ export default function EditForm() {
 
       // Update local state
       setProjects((prevProjects) =>
-        prevProjects.map((project) =>
-          project.id === selectedProject.id
-            ? { ...project, ...updatedData }
-            : project,
+        prevProjects.map((proj) =>
+          proj.id === selectedProject.id ? { ...proj, ...updatedData } : proj,
         ),
       );
 
       setIsModalOpen(false);
       setSelectedProject(null);
-      //alert('Project updated successfully');
     } catch (err) {
       console.error("Error updating project:", err);
       setError("Failed to update project");
@@ -163,26 +163,30 @@ export default function EditForm() {
         </div>
 
         {/* Projects List */}
-        <div className="space-y-4">
-          {projects
-            .filter((project) =>
-              project.Title.toLowerCase().includes(searchQuery.toLowerCase()),
-            )
-            .map((project) => (
+        {projects
+          .filter(
+            (
+              proj, // Changed from project to proj
+            ) => proj.Title.toLowerCase().includes(searchQuery.toLowerCase()),
+          )
+          .map(
+            (
+              proj, // Changed from project to proj
+            ) => (
               <div
-                key={project.id}
+                key={proj.id} // Changed from project to proj
                 className="flex items-center justify-between rounded border p-4 text-sm sm:text-base"
               >
-                <h3 className="font-bold">{project.Title}</h3>
+                <h3 className="font-bold">{proj.Title}</h3>
                 <div className="flex gap-2">
                   <button
-                    onClick={() => handleEditClick(project)}
+                    onClick={() => handleEditClick(proj)} // Changed from project to proj
                     className="rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
                   >
                     Edit
                   </button>
                   <button
-                    onClick={() => handleDeleteClick(project)}
+                    onClick={() => handleDeleteClick(proj)} // Changed from project to proj
                     className="flex items-center gap-2 rounded bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
                   >
                     <Trash2 size={18} />
@@ -190,8 +194,8 @@ export default function EditForm() {
                   </button>
                 </div>
               </div>
-            ))}
-        </div>
+            ),
+          )}
 
         {/* Edit Modal */}
         {isModalOpen && selectedProject && (
diff --git a/src/components/projects/ProjectModal.tsx b/src/components/projects/ProjectModal.tsx
new file mode 100644
index 0000000..e073787
--- /dev/null
+++ b/src/components/projects/ProjectModal.tsx
@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { Project } from "@/types/project";
+import { X } from "lucide-react";
+
+interface ProjectModalProps {
+  project: Project;
+  onClose: () => void;
+}
+
+export default function ProjectModal({ project, onClose }: ProjectModalProps) {
+  const [activeTab, setActiveTab] = useState<
+    "description" | "specs" | "builders"
+  >("description");
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4 backdrop-blur-sm">
+      <div className="shadow-white-glow relative max-h-[90vh] w-full max-w-6xl overflow-hidden rounded-xl bg-[#080d14] text-white">
+        {/* Noise background */}
+        <div className="absolute inset-0 opacity-30" />
+
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-4 z-10 rounded-full bg-white/10 p-2 text-white/80 backdrop-blur-md transition-all hover:bg-white/20 hover:text-white"
+        >
+          <X size={20} />
+        </button>
+
+        <div className="flex h-[85vh] flex-col md:flex-row">
+          {/* Left side - Image */}
+          <div className="w-full md:w-1/2">
+            <div className="relative h-full">
+              <img
+                src={project.Image}
+                alt={project.Title}
+                className="h-full w-full object-cover"
+              />
+              {/* Gradient overlay */}
+              <div className="absolute inset-0 hidden bg-gradient-to-r from-transparent to-[#080d14] md:block" />
+            </div>
+          </div>
+
+          {/* Right side - Content */}
+          <div className="relative flex w-full flex-col p-8 md:w-1/2">
+            <h2 className="text-3xl font-bold tracking-tight">
+              {project.Title}
+            </h2>
+            <p className="mt-2 font-medium text-blue-400">
+              {project.semester.term} {project.semester.year}
+            </p>
+
+            {/* Tabs */}
+            <div className="mt-8 flex space-x-6">
+              {(["description", "specs", "builders"] as const).map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => setActiveTab(tab)}
+                  className={`pb-2 transition-all ${
+                    activeTab === tab
+                      ? "border-b-2 border-blue-500 font-medium text-blue-400"
+                      : "text-gray-400 hover:text-white"
+                  }`}
+                >
+                  {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                </button>
+              ))}
+            </div>
+
+            {/* Tab Content */}
+            <div className="scrollbar-thin scrollbar-track-blue-900/20 scrollbar-thumb-blue-400/20 mt-6 flex-1 overflow-y-auto pr-4">
+              {activeTab === "description" && (
+                <p className="leading-relaxed text-gray-300">
+                  {project.Description}
+                </p>
+              )}
+
+              {activeTab === "specs" && (
+                <div className="space-y-3">
+                  {Object.entries(project.Parts).map(([part, value]) => (
+                    <div
+                      key={part}
+                      className="flex items-center justify-between rounded-lg bg-white/5 p-3 backdrop-blur-sm"
+                    >
+                      <span className="font-medium text-gray-300">{part}</span>
+                      <span className="text-white">{value}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {activeTab === "builders" && (
+                <div className="space-y-2">
+                  {project.Builders.map((builder, index) => (
+                    <div key={index} className="text-gray-300">
+                      {builder}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Links */}
+            <div className="mt-6 space-y-3 border-t border-white/10 pt-6">
+              <a
+                href={project.Youtube}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-between rounded-lg bg-white/5 p-4 text-blue-400 transition-all hover:bg-white/10 hover:text-blue-300"
+              >
+                <span>Watch Build Stream</span>
+                <span>→</span>
+              </a>
+              <a
+                href={project.Photos}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-between rounded-lg bg-white/5 p-4 text-blue-400 transition-all hover:bg-white/10 hover:text-blue-300"
+              >
+                <span>View Photo Album</span>
+                <span>→</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/projects/ProjectsPage.tsx b/src/components/projects/ProjectsPage.tsx
new file mode 100644
index 0000000..0eb8485
--- /dev/null
+++ b/src/components/projects/ProjectsPage.tsx
@@ -0,0 +1,148 @@
+import GlowingLine from "@/components/decorations/GlowingLine";
+import { useEffect, useState } from "react";
+import { collection, getDocs } from "firebase/firestore";
+import { db } from "@/lib/firebase/firebase";
+import { Project } from "@/types/project";
+import ProjectModal from "./ProjectModal";
+
+const sortProjects = (projects: Project[]) => {
+  const termOrder = { Fall: 3, Summer: 2, Spring: 1 };
+
+  return [...projects].sort((a, b) => {
+    // First compare years
+    if (a.semester.year !== b.semester.year) {
+      return b.semester.year - a.semester.year; // Descending order
+    }
+
+    // If years are equal, compare terms
+    return termOrder[b.semester.term] - termOrder[a.semester.term];
+  });
+};
+
+export default function ProjectsPage() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      try {
+        const querySnapshot = await getDocs(collection(db, "Projects"));
+        const projectsData = querySnapshot.docs.map((doc) => ({
+          id: doc.id,
+          ...doc.data(),
+        })) as Project[];
+        setProjects(projectsData);
+      } catch (error) {
+        console.error("Error fetching projects:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProjects();
+  }, []);
+
+  return (
+    <div className="relative min-h-screen w-full bg-[#080d14] pb-32">
+      {/* Applied noise background for consistency */}
+      <div className="noise-bg" />
+
+      {/* Hero Section with Title */}
+      <div className="relative flex min-h-[40vh] items-center justify-center">
+        {/* Decorative Lines */}
+        <GlowingLine
+          xPoints={["-1", "20"]}
+          yPoints={["40", "40"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["-1", "18"]}
+          yPoints={["45", "45"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["85", "101"]}
+          yPoints={["95", "95"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["75", "101"]}
+          yPoints={["100", "100"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+        <GlowingLine
+          xPoints={["80", "101"]}
+          yPoints={["105", "105"]}
+          color="#1E90FF"
+          thickness={2}
+          circleSize={6}
+        />
+
+        {/* Title Content */}
+        <div className="z-10 text-center">
+          <h1 className="my-4 mt-32 text-5xl font-bold text-white">
+            Our Projects
+          </h1>
+          <p className="text-lg text-gray-300">
+            Discover our latest custom PC builds
+          </p>
+        </div>
+      </div>
+
+      {/* Projects Grid */}
+      <div className="container mx-auto px-4 py-16">
+        {loading ? (
+          <div className="flex h-64 items-center justify-center">
+            <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+            {sortProjects(projects).map((project) => (
+              <div
+                key={project.id}
+                onClick={() => setSelectedProject(project)}
+                className="shadow-white-glow group relative cursor-pointer overflow-hidden rounded-lg bg-gray-950 p-4 transition-transform hover:scale-105"
+              >
+                {/* Project Image */}
+                <div className="aspect-video overflow-hidden rounded-lg">
+                  <img
+                    src={project.Image}
+                    alt={project.Title}
+                    className="h-full w-full object-cover transition-transform group-hover:scale-110"
+                  />
+                </div>
+
+                {/* Project Info */}
+                <div className="mt-4">
+                  <h3 className="text-xl font-bold text-white">
+                    {project.Title}
+                  </h3>
+                  <p className="mt-2 line-clamp-2 text-gray-300">
+                    {project.semester.term + " " + project.semester.year}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Project Modal */}
+      {selectedProject && (
+        <ProjectModal
+          project={selectedProject}
+          onClose={() => setSelectedProject(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/types/project.ts b/src/types/project.ts
index 9871a46..7dc77c0 100644
--- a/src/types/project.ts
+++ b/src/types/project.ts
@@ -1,25 +1,28 @@
 export interface Parts {
-    RAM: string;
-    Cooling: string;
-    Case: string;
-    Motherboard: string;
-    PSU: string;
-    GPU: string;
-    Storage: string;
-    CPU: string;
-  }
-  
-  export interface ProjectFormData {
-    Youtube: string;
-    Description: string;
-    Parts: Parts;
-    Title: string;
-    Photos: string;
-    Image: string;
-    Builders: string[];
-  }
-  
-  export interface Project extends ProjectFormData {
-    id: string;
-  }
+  RAM: string;
+  Cooling: string;
+  Case: string;
+  Motherboard: string;
+  PSU: string;
+  GPU: string;
+  Storage: string;
+  CPU: string;
+}
 
+export interface ProjectFormData {
+  Youtube: string;
+  Description: string;
+  Parts: Parts;
+  Title: string;
+  Photos: string;
+  Image: string;
+  Builders: string[];
+  semester: {
+    term: "Spring" | "Summer" | "Fall";
+    year: number;
+  };
+}
+
+export interface Project extends ProjectFormData {
+  id: string;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1ba8981..3f5cfbf 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -37,6 +37,10 @@ const config = {
       fontFamily: {
         Michroma: ["Michroma", "sans-serif"],
       },
+      boxShadow: {
+        "white-glow": "0 0 15px rgba(255,255,255,0.15)",
+        "white-glow-hover": "0 0 30px rgba(255,255,255,0.3)",
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],