Index: src/app/manager/manager-drivers/manager-drivers.component.css
===================================================================
--- src/app/manager/manager-drivers/manager-drivers.component.css	(revision 667595956be358284bdf79aa59bb679fcadb5c23)
+++ src/app/manager/manager-drivers/manager-drivers.component.css	(revision f47607171df196b7fede32519f14e524272280e9)
@@ -0,0 +1,116 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.table-container {
+  margin-top: 20px;
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th {
+  background-color: #f5f5f5;
+  font-weight: bold;
+  text-align: left;
+  padding: 12px 15px;
+  border-bottom: 2px solid #ddd;
+}
+
+td {
+  padding: 12px 15px;
+  border-bottom: 1px solid #ddd;
+  vertical-align: middle;
+}
+
+.driver-info, .contact-info, .vehicle-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.driver-name {
+  font-weight: bold;
+}
+
+.driver-id, .license-plate, .expiration-date {
+  font-size: 0.85em;
+  color: #666;
+}
+
+.license-status {
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.status-valid {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.status-expiring {
+  background-color: #fff3cd;
+  color: #856404;
+}
+
+.status-expired {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.driver-status {
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.status-active {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.status-inactive {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.deliveries-count {
+  font-weight: bold;
+  text-align: center;
+}
+
+.no-vehicle {
+  color: #6c757d;
+  font-style: italic;
+}
+
+.loading-spinner, .error-container, .empty-state {
+  text-align: center;
+  margin: 40px 0;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+.error-message {
+  color: #721c24;
+  margin-bottom: 15px;
+}
+
+.retry-button {
+  padding: 8px 16px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.retry-button:hover {
+  background-color: #0069d9;
+}
Index: src/app/manager/manager-drivers/manager-drivers.component.html
===================================================================
--- src/app/manager/manager-drivers/manager-drivers.component.html	(revision 667595956be358284bdf79aa59bb679fcadb5c23)
+++ src/app/manager/manager-drivers/manager-drivers.component.html	(revision f47607171df196b7fede32519f14e524272280e9)
@@ -1,1 +1,72 @@
-<p>manager-drivers works!</p>
+<app-navbar></app-navbar>
+
+<div class="container mt-4">
+  <h1 class="mb-4">Driver Management</h1>
+
+  <div *ngIf="errorMessage" class="error-container">
+    <p class="error-message">{{ errorMessage }}</p>
+    <button class="retry-button" (click)="loadDrivers()">Retry</button>
+  </div>
+
+  <div *ngIf="!errorMessage && drivers.length === 0" class="empty-state">
+    <p>No drivers found. Add drivers to manage your delivery staff.</p>
+  </div>
+
+  <div *ngIf="drivers.length > 0" class="table-container">
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th>Driver</th>
+          <th>Contact</th>
+          <th>License Status</th>
+          <th>Vehicle</th>
+          <th>Deliveries</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let driver of drivers">
+          <td>
+            <div class="driver-info">
+              <span class="driver-name">{{ driver.name }} {{ driver.name }}</span>
+              <span class="driver-id">ID: {{ driver.id }}</span>
+            </div>
+          </td>
+          <td>
+            <div class="contact-info">
+              <span>{{ driver.phone }}</span>
+              <span>{{ driver.email }}</span>
+            </div>
+          </td>
+          <td>
+            <!-- <span class="license-status" [ngClass]="getLicenseStatusClass(driver.licenseStatus)">
+              {{ driver.licenseStatus }}
+              <span *ngIf="driver.licenseExpiration" class="expiration-date">
+                Exp: {{ driver.licenseExpiration | date }}
+              </span>
+            </span> -->
+          </td>
+          <td>
+            <ng-container *ngIf="driver.vehId; else noVehicle">
+              <div class="vehicle-info">
+                <span>{{ driver.vehId }} {{ driver.vehId }}</span>
+                <span class="license-plate">{{ driver.vehId }}</span>
+              </div>
+            </ng-container>
+            <ng-template #noVehicle>
+              <span class="no-vehicle">No vehicle assigned</span>
+            </ng-template>
+          </td>
+          <td class="deliveries-count">
+            <!-- {{ driver.deliveriesCompleted }} -->
+          </td>
+          <td>
+            <!-- <span class="driver-status" [ngClass]="{'status-active': driver.isActive, 'status-inactive': !driver.isActive}">
+              {{ driver.isActive ? 'Active' : 'Inactive' }}
+            </span> -->
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
Index: src/app/manager/manager-drivers/manager-drivers.component.ts
===================================================================
--- src/app/manager/manager-drivers/manager-drivers.component.ts	(revision 667595956be358284bdf79aa59bb679fcadb5c23)
+++ src/app/manager/manager-drivers/manager-drivers.component.ts	(revision f47607171df196b7fede32519f14e524272280e9)
@@ -1,11 +1,41 @@
 import { Component } from '@angular/core';
+import { NavbarComponent } from '../../navbar/navbar.component';
+import { CommonModule } from '@angular/common';
+import { Driver } from '../../models/driver.model';
+import { ManagerService } from '../../services/manager.service';
 
 @Component({
   selector: 'app-manager-drivers',
-  imports: [],
+  imports: [NavbarComponent, CommonModule],
   templateUrl: './manager-drivers.component.html',
   styleUrl: './manager-drivers.component.css'
 })
 export class ManagerDriversComponent {
+  drivers: Driver[] = [];
+  errorMessage: string | null = null;
 
+  constructor(private managerService: ManagerService) { }
+
+  ngOnInit(){
+    this.loadDrivers();
+  }
+
+  loadDrivers(){
+    this.managerService
+    .getDrivers()
+    .subscribe((drivers) => (this.drivers = drivers));
+  }
+
+  getLicenseStatusClass(status: string): string {
+    switch (status.toLowerCase()) {
+      case 'valid':
+        return 'status-valid';
+      case 'expiring':
+        return 'status-expiring';
+      case 'expired':
+        return 'status-expired';
+      default:
+        return '';
+    }
+  }
 }
Index: src/app/models/driver.model.ts
===================================================================
--- src/app/models/driver.model.ts	(revision f47607171df196b7fede32519f14e524272280e9)
+++ src/app/models/driver.model.ts	(revision f47607171df196b7fede32519f14e524272280e9)
@@ -0,0 +1,8 @@
+export interface Driver {
+    id: number;
+    name: string;
+    email: string;
+    phone: string;
+    image: string;
+    vehId: number;
+}
Index: src/app/models/vehicle.model.ts
===================================================================
--- src/app/models/vehicle.model.ts	(revision f47607171df196b7fede32519f14e524272280e9)
+++ src/app/models/vehicle.model.ts	(revision f47607171df196b7fede32519f14e524272280e9)
@@ -0,0 +1,8 @@
+export interface Vehicle {
+  id: number;
+  make: string;
+  model: string;
+  year?: number;
+  licensePlate: string;
+  capacity?: number;
+}
Index: src/app/services/manager.service.ts
===================================================================
--- src/app/services/manager.service.ts	(revision 667595956be358284bdf79aa59bb679fcadb5c23)
+++ src/app/services/manager.service.ts	(revision f47607171df196b7fede32519f14e524272280e9)
@@ -6,4 +6,5 @@
 import { FinancialSummary } from '../models/financial-summary.model';
 import { ProForma, ProFormaResponseDto } from '../models/pro-forma-dtos.model';
+import { Driver } from '../models/driver.model';
 
 @Injectable({
@@ -11,5 +12,5 @@
 })
 export class ManagerService {
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) { }
 
   getProfile(): Observable<Manager> {
@@ -37,14 +38,18 @@
   }
 
-  getMonthlyFinancialSummary(): Observable<FinancialSummary>{
+  getMonthlyFinancialSummary(): Observable<FinancialSummary> {
     return this.http.get<FinancialSummary>(`${environment.apiUrl}/manager/finances/monthly-report`);
   }
 
-  getQuarterlyFinancialSummary(): Observable<FinancialSummary>{
-    return this.http.get<FinancialSummary>(`${environment.apiUrl}/manager/finances/quarterly-report`)
+  getQuarterlyFinancialSummary(): Observable<FinancialSummary> {
+    return this.http.get<FinancialSummary>(`${environment.apiUrl}/manager/finances/quarterly-report`);
   }
 
-  createProForma(proForma: number): Observable<ProFormaResponseDto>{
+  createProForma(proForma: number): Observable<ProFormaResponseDto> {
     return this.http.post<ProFormaResponseDto>(`${environment.apiUrl}/manager/pro-formas`, proForma);
   }
+
+  getDrivers(): Observable<Driver[]> {
+    return this.http.get<Driver[]>(`${environment.apiUrl}/driver/manager/list-all`);
+  }
 }