Index: src/main/java/com/db/finki/www/build_board/controller/ProjectController.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/controller/ProjectController.java	(revision 71ac555e78384cdef99014906affeafbde48a7f5)
+++ src/main/java/com/db/finki/www/build_board/controller/ProjectController.java	(revision 71ac555e78384cdef99014906affeafbde48a7f5)
@@ -0,0 +1,21 @@
+package com.db.finki.www.build_board.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+@RequestMapping("/projects")
+public class ProjectController {
+    @GetMapping()
+    public String getProjectsPage(Model model) {
+        return "project";
+    }
+    @GetMapping("{pid}")
+    public String getProjectPage(@PathVariable Long pid, Model model) {
+        return "project";
+    }
+
+}
Index: src/main/resources/templates/project.html
===================================================================
--- src/main/resources/templates/project.html	(revision 71ac555e78384cdef99014906affeafbde48a7f5)
+++ src/main/resources/templates/project.html	(revision 71ac555e78384cdef99014906affeafbde48a7f5)
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Projects</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+  <style>
+    body {
+      background-color: #000d20; /* Dark background for the whole page */
+    }
+    .card {
+      background-color: #030e23; /* Darker blue shade for the cards */
+      border: 2px solid #262a2d; /* Light blue border */
+      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Adding depth with a stronger shadow */
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      height: 350px; /* Fixed height for larger cards */
+    }
+    .card:hover {
+      transform: translateY(-10px); /* More prominent lift on hover */
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); /* Deeper shadow on hover */
+    }
+    .card-header {
+      /*1a6e9c*/
+      background-color: #168f77; /* Green accent header color */
+      color: #000000;
+    }
+    .card-body {
+      background-color: #00386e; /* Same blue as the card body */
+      color: #ffffff;
+      height: 200px; /* Larger height for the card body */
+      overflow-y: auto; /* Allow scrolling if content exceeds height */
+    }
+    .card-footer {
+      background-color: #000d20;
+      color: #ffffff;
+    }
+    .card-title {
+      color: #e0e0e0;
+    }
+    .card-text {
+      color: #ffffff;
+    }
+    .btn-link {
+      color: #53daa2; /* Green accent for buttons */
+    }
+  </style>
+</head>
+<body>
+
+<header class="container ms-4 mt-4">
+  <h1 class="text-light">Projects</h1>
+  <h2 class="text-muted ps-3 fs-5">View All Projects</h2>
+</header>
+
+<div class="container w-100 pt-5">
+  <!-- Card 1 -->
+  <div class="card mb-4">
+    <div class="card-header">
+      <h2 class="card-title">Project 1</h2>
+    </div>
+    <div class="card-body">
+      <p class="card-text">Short description of Project 1.</p>
+      <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProject1" aria-expanded="false" aria-controls="collapseProject1">
+        Learn More
+      </button>
+      <div class="collapse mt-3" id="collapseProject1">
+        <div class="card card-body">
+          <p>More detailed information about Project 1...</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Card 2 -->
+  <div class="card mb-4">
+    <div class="card-header">
+      <h2 class="card-title">Project 2</h2>
+    </div>
+    <div class="card-body">
+      <p class="card-text">Short description of Project 2.</p>
+      <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProject2" aria-expanded="false" aria-controls="collapseProject2">
+        Learn More
+      </button>
+      <div class="collapse mt-3" id="collapseProject2">
+        <div class="card card-body">
+          <p>More detailed information about Project 2...</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Card 3 -->
+  <div class="card mb-4">
+    <div class="card-header">
+      <h2 class="card-title">Project 3</h2>
+    </div>
+    <div class="card-body">
+      <p class="card-text">Short description of Project 3.</p>
+      <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProject3" aria-expanded="false" aria-controls="collapseProject3">
+        Learn More
+      </button>
+      <div class="collapse mt-3" id="collapseProject3">
+        <div class="card card-body">
+          <p>More detailed information about Project 3...</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Card 4 -->
+  <div class="card mb-4">
+    <div class="card-header">
+      <h2 class="card-title">Project 4</h2>
+    </div>
+    <div class="card-body">
+      <p class="card-text">Short description of Project 4.</p>
+      <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProject4" aria-expanded="false" aria-controls="collapseProject4">
+        Learn More
+      </button>
+      <div class="collapse mt-3" id="collapseProject4">
+        <div class="card card-body">
+          <p>More detailed information about Project 4...</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
