diff --git a/src/components/MentorProjectCard.tsx b/src/components/MentorProjectCard.tsx
index 0ddd333a..762db48b 100644
--- a/src/components/MentorProjectCard.tsx
+++ b/src/components/MentorProjectCard.tsx
@@ -5,6 +5,7 @@ import { IProjectDashboardInfo } from "../util/types";
 import { ROUTER_PATHS } from "../util/constants";
 import { Link } from "react-router-dom";
 import { useAuthContext } from "../util/auth";
+import "../styles/MentorProjectCard.css";
 
 function MentorProjectCard({
   id,
diff --git a/src/styles/MentorProjectCard.css b/src/styles/MentorProjectCard.css
new file mode 100644
index 00000000..8cb14891
--- /dev/null
+++ b/src/styles/MentorProjectCard.css
@@ -0,0 +1,167 @@
+.mentor-project-card {
+  background: #020f2b;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition:
+    transform 0.3s,
+    box-shadow 0.3s;
+  padding: 20px;
+  margin: 15px;
+  max-width: 380px;
+  width: 100%;
+}
+
+.mentor-project-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+}
+
+.project-header {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.project-title {
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.status-approved,
+.status-awaiting {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.status-approved {
+  background-color: #4caf50;
+  color: #fff;
+}
+
+.status-awaiting {
+  background-color: #ff9800;
+  color: #fff;
+}
+
+.mentor-info {
+  margin-bottom: 20px;
+}
+
+.mentor {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.mentor span {
+  margin-left: 5px;
+  font-weight: 500;
+}
+
+.mentor-link,
+.co-mentor-link {
+  color: #1e88e5;
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.3s;
+}
+
+.mentor-link:hover,
+.co-mentor-link:hover {
+  color: #1565c0;
+}
+
+.commit-pull-info {
+  display: flex;
+  justify-content: space-between;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+}
+
+.info-item span {
+  margin-left: 5px;
+  font-weight: 600;
+}
+
+.lines-changed {
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
+
+.lines-header {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.lines-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bar {
+  display: flex;
+  width: 100%;
+  height: 10px;
+  background-color: #e0e0e0;
+  border-radius: 5px;
+  margin: 0 10px;
+}
+
+.added-bar {
+  background-color: #4caf50;
+  border-radius: 5px;
+  height: 100%;
+}
+
+.removed-bar {
+  background-color: #f44336;
+  border-radius: 5px;
+  height: 100%;
+}
+
+.project-links {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.view-project-btn,
+.edit-project-btn {
+  padding: 8px 15px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 4px;
+  text-decoration: none;
+  color: #fff;
+  transition: background-color 0.3s;
+}
+
+.view-project-btn {
+  background-color: #1e88e5;
+}
+
+.view-project-btn:hover {
+  background-color: #1565c0;
+}
+
+.edit-project-btn {
+  background-color: #ff9800;
+}
+
+.edit-project-btn:hover {
+  background-color: #fb8c00;
+}
+
+.no-co-mentor {
+  color: #757575;
+}