diff --git a/src/app/pages/home/home.component.css b/src/app/pages/home/home.component.css
new file mode 100644
index 0000000..571dc16
--- /dev/null
+++ b/src/app/pages/home/home.component.css
@@ -0,0 +1,72 @@
+.home-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.header {
+  background: white;
+  padding: 20px 40px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 24px;
+  color: #667eea;
+  font-weight: 700;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.username {
+  font-weight: 500;
+  color: #333;
+}
+
+.btn-logout {
+  padding: 8px 20px;
+  background-color: #667eea;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.3s;
+}
+
+.btn-logout:hover {
+  background-color: #5568d3;
+}
+
+.content {
+  padding: 40px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.welcome-message {
+  background: white;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.welcome-message h2 {
+  margin: 0 0 15px 0;
+  color: #333;
+  font-size: 28px;
+}
+
+.welcome-message p {
+  margin: 0;
+  color: #666;
+  font-size: 16px;
+}
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
new file mode 100644
index 0000000..aeafb1a
--- /dev/null
+++ b/src/app/pages/home/home.component.html
@@ -0,0 +1,29 @@
+<div class="home-container">
+  <header class="header">
+    <h1>Kanban Board</h1>
+    <div class="user-info">
+      @if (authService.currentUser()) {
+        <span class="username">{{ authService.currentUser()?.email }}</span>
+        <button class="btn-logout" (click)="logout()">Logout</button>
+      }
+    </div>
+  </header>
+
+  <main class="content">
+    <div class="welcome-message">
+      <h2>Welcome, {{ authService.currentUser()?.name }}! 👋</h2>
+    </div>
+
+    <div class="project-list">
+        
+        <ng-template *ngIf="projectList.length > 0; else noProjects">
+            <div class="project-item" *ngFor="let project of projectList">
+                <h3>{{ project.name }}</h3>
+                <p>{{ project.description }}</p>
+            </div>
+        </ng-template>
+        <ng-template #noProjects>
+            <p>You have no projects yet. Create one to get started!</p>
+        </ng-template>
+    </div>
+  </main>
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
new file mode 100644
index 0000000..0db18f0
--- /dev/null
+++ b/src/app/pages/home/home.component.ts
@@ -0,0 +1,23 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgIf, NgFor } from '@angular/common';
+import { AuthService } from '../../services/auth.service';
+
+import { Project } from '../../models/projects.models';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [CommonModule, NgIf, NgFor],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.css'
+})
+export class HomeComponent {
+  protected authService = inject(AuthService);
+
+  protected projectList : Project[] = this.authService.currentUser()?.projects || [];
+
+  logout() {
+    this.authService.logout().subscribe();
+  }
+}