diff --git a/src/app/components/project-item/project-item.component.css b/src/app/components/project-item/project-item.component.css
new file mode 100644
index 0000000..c4cde1f
--- /dev/null
+++ b/src/app/components/project-item/project-item.component.css
@@ -0,0 +1,91 @@
+.project-item {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-left: 4px solid #667eea;
+}
+
+.project-item:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+}
+
+/* Header */
+.project-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.project-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+  flex: 1;
+}
+
+.project-actions {
+  display: flex;
+  gap: 8px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.project-item:hover .project-actions {
+  opacity: 1;
+}
+
+.btn-icon {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.btn-icon:hover {
+  background-color: #f5f7fa;
+}
+
+.btn-delete:hover {
+  background-color: #fee;
+}
+
+/* Description */
+.project-description {
+  margin: 0 0 12px 0;
+  color: #7f8c8d;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* Footer */
+.project-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+/* Project ID */
+.project-id {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  background-color: #e8f4f8;
+  color: #2980b9;
+}
diff --git a/src/app/components/project-item/project-item.component.html b/src/app/components/project-item/project-item.component.html
new file mode 100644
index 0000000..768f418
--- /dev/null
+++ b/src/app/components/project-item/project-item.component.html
@@ -0,0 +1,9 @@
+<div class="project-item" (click)="onProjectClick()">
+  <div class="project-header">
+    <h3 class="project-title">{{ project.name }}</h3>
+  </div>
+
+  @if (project.description) {
+    <p class="project-description">{{ project.description }}</p>
+  }
+</div>
diff --git a/src/app/components/project-item/project-item.component.ts b/src/app/components/project-item/project-item.component.ts
new file mode 100644
index 0000000..058b360
--- /dev/null
+++ b/src/app/components/project-item/project-item.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Project } from '../../models/projects.models';
+
+@Component({
+  selector: 'app-project-item',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './project-item.component.html',
+  styleUrl: './project-item.component.css'
+})
+export class ProjectItemComponent {
+  @Input({ required: true }) project!: Project;
+  @Output() projectClick = new EventEmitter<Project>();
+
+  onProjectClick() {
+    this.projectClick.emit(this.project);
+  }
+}