Index: src/app/customer/customer-profile/customer-profile.component.ts
===================================================================
--- src/app/customer/customer-profile/customer-profile.component.ts	(revision b18b234bd7f3f2ab78505a726fd776d129e03a92)
+++ src/app/customer/customer-profile/customer-profile.component.ts	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
@@ -75,16 +75,24 @@
 
     const file: File = input.files[0];
-    this.imageSvc.uploadImage(file, 'CUSTOMER', this.profile.id).subscribe({
-      next: (res) => {
-        this.profile.image = res.imgPath;
-      },
-      error: (err) => {
+    this.imageSvc
+      .uploadImage(file, 'CUSTOMER', this.profile.id)
+      .then((obs) => {
+        obs.subscribe({
+          next: (res) => {
+            this.profile.image = res.imgPath;
+          },
+          error: (err) => {
+            console.error('Upload failed', err);
+            alert('Failed to upload profile image.');
+          },
+        });
+      })
+      .catch((err) => {
         console.error('Upload failed', err);
         alert('Failed to upload profile image.');
-      },
-    });
+      });
   }
 
-  changeRepImage(event: Event) {
+  async changeRepImage(event: Event) {
     const input = event.target as HTMLInputElement;
     if (!input.files || input.files.length === 0) {
@@ -92,13 +100,23 @@
     }
     const file: File = input.files[0];
-    this.imageSvc.uploadImage(file, 'CUSTOMER_REP', this.profile.id).subscribe({
-      next: (res) => {
-        this.profile.repImage = res.imgPath;
-      },
-      error: (err) => {
-        console.error('Upload failed', err);
-        alert('Failed to upload representative image.');
-      },
-    });
+    try {
+      const obs = await this.imageSvc.uploadImage(
+        file,
+        'CUSTOMER_REP',
+        this.profile.id,
+      );
+      obs.subscribe({
+        next: (res) => {
+          this.profile.repImage = res.imgPath;
+        },
+        error: (err) => {
+          console.error('Upload failed', err);
+          alert('Failed to upload representative image.');
+        },
+      });
+    } catch (err) {
+      console.error('Upload failed', err);
+      alert('Failed to upload representative image.');
+    }
   }
 }
Index: src/app/manager/manager-profile/manager-profile.component.html
===================================================================
--- src/app/manager/manager-profile/manager-profile.component.html	(revision b18b234bd7f3f2ab78505a726fd776d129e03a92)
+++ src/app/manager/manager-profile/manager-profile.component.html	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
@@ -1,1 +1,85 @@
-<p>manager-profile works!</p>
+<app-navbar></app-navbar>
+<div class="container mt-4">
+  <h2>My Profile</h2>
+
+  <!-- Profile -->
+  <div class="d-flex align-items-center mb-4">
+    <!-- Profile Image -->
+    <img
+      *ngIf="profile.image"
+      [src]="profile.image"
+      class="rounded-circle me-3"
+      width="100"
+      height="100"
+      alt="Profile"
+    />
+    <label class="btn btn-outline-primary me-4">
+      Change Photo
+      <input type="file" hidden (change)="changeProfileImage($event)" />
+    </label>
+  </div>
+
+  <!-- Editable Form -->
+  <form *ngIf="editMode; else viewMode" [formGroup]="form">
+    <div class="row g-3">
+      <div class="col-md-6">
+        <label>First Name</label>
+        <input formControlName="firstName" class="form-control" />
+      </div>
+      <div class="col-md-6">
+        <label>Last Name</label>
+        <input formControlName="lastName" class="form-control" />
+      </div>
+      <div class="col-md-6">
+        <label>Email</label>
+        <input formControlName="email" class="form-control" />
+      </div>
+      <div class="col-md-6">
+        <label>Phone</label>
+        <input formControlName="phone" class="form-control" />
+      </div>
+      <div class="col-md-6">
+        <label>City ID</label>
+        <input formControlName="cityId" class="form-control" type="number" />
+      </div>
+      <!-- optionally show cityName as read‑only: -->
+      <div class="col-md-6">
+        <label>City Name</label>
+        <input [value]="profile.cityName" class="form-control" disabled />
+      </div>
+    </div>
+    <div class="mt-4">
+      <button
+        class="btn btn-primary me-2"
+        (click)="saveProfile()"
+        [disabled]="form.invalid"
+        type="button"
+      >
+        Save
+      </button>
+      <button class="btn btn-secondary" (click)="toggleEdit()" type="button">
+        Cancel
+      </button>
+    </div>
+  </form>
+
+  <!-- View‑Only Mode -->
+  <ng-template #viewMode>
+    <dl class="row">
+      <dt class="col-sm-3">Name</dt>
+      <dd class="col-sm-9">{{ profile.firstName }} {{ profile.lastName }}</dd>
+
+      <dt class="col-sm-3">Email</dt>
+      <dd class="col-sm-9">{{ profile.email }}</dd>
+
+      <dt class="col-sm-3">Phone</dt>
+      <dd class="col-sm-9">{{ profile.phone }}</dd>
+
+      <dt class="col-sm-3">City</dt>
+      <dd class="col-sm-9">{{ profile.cityName }}</dd>
+    </dl>
+    <button class="btn btn-outline-primary" (click)="toggleEdit()">
+      Edit Details
+    </button>
+  </ng-template>
+</div>
Index: src/app/manager/manager-profile/manager-profile.component.ts
===================================================================
--- src/app/manager/manager-profile/manager-profile.component.ts	(revision b18b234bd7f3f2ab78505a726fd776d129e03a92)
+++ src/app/manager/manager-profile/manager-profile.component.ts	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
@@ -1,11 +1,97 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { NavbarComponent } from '../../navbar/navbar.component';
+import { RouterModule } from '@angular/router';
+import { Manager } from '../../models/manager.model';
+import { ManagerService } from '../../services/manager.service';
+import { ImageService } from '../../services/image.service';
 
 @Component({
   selector: 'app-manager-profile',
-  imports: [],
+  imports: [CommonModule, ReactiveFormsModule, NavbarComponent, RouterModule],
   templateUrl: './manager-profile.component.html',
-  styleUrl: './manager-profile.component.css'
+  styleUrl: './manager-profile.component.css',
 })
 export class ManagerProfileComponent {
+  profile!: Manager;
+  form!: FormGroup;
+  editMode = false;
 
+  constructor(
+    private svc: ManagerService,
+    private fb: FormBuilder,
+    private imageSvc: ImageService,
+  ) {}
+
+  ngOnInit() {
+    this.loadProfile();
+  }
+
+  loadProfile() {
+    this.svc.getProfile().subscribe((profile) => {
+      this.profile = profile;
+      this.buildForm(profile);
+    });
+  }
+
+  // TODO: Update build form to match Manager's attributes
+  private buildForm(p: Manager) {
+    this.form = this.fb.group({
+      firstName: [p.firstName, Validators.required],
+      lastName: [p.lastName, Validators.required],
+      email: [p.email, [Validators.required, Validators.email]],
+      phone: [p.phone, Validators.required],
+      city: [p.cityId, Validators.required],
+    });
+  }
+
+  onSubmit() {
+    this.svc.updateProfile(this.form.value).subscribe();
+  }
+
+  toggleEdit() {
+    this.editMode = !this.editMode;
+    if (!this.editMode) this.buildForm(this.profile);
+  }
+
+  saveProfile() {
+    if (this.form.invalid) return;
+    this.svc.updateProfile(this.form.value).subscribe({
+      next: () => {
+        this.loadProfile();
+        this.editMode = false;
+      },
+      error: (err) => alert('Save failed: ' + err.message),
+    });
+  }
+
+  changeProfileImage(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (!input.files || input.files.length === 0) return;
+
+    const file: File = input.files[0];
+    this.imageSvc
+      .uploadImage(file, 'MANAGER', this.profile.id)
+      .then((obs) => {
+        obs.subscribe({
+          next: (res) => {
+            this.profile.image = res.imgPath;
+          },
+          error: (err) => {
+            console.error('Upload failed', err);
+            alert('Failed to upload profile image.');
+          },
+        });
+      })
+      .catch((err) => {
+        console.error('Upload failed', err);
+        alert('Failed to upload profile image.');
+      });
+  }
 }
Index: src/app/models/manager.model.ts
===================================================================
--- src/app/models/manager.model.ts	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/models/manager.model.ts	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
@@ -0,0 +1,17 @@
+export interface Manager {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  image?: string;
+  cityId?: number;
+  cityName?: string;
+  regionName?: string;
+  role: string;
+  clazz_: string;
+  userActive: boolean;
+  warehouseId: number;
+  warehouseRegion: string;
+  warehouseCity: string;
+}
Index: src/app/services/manager.service.ts
===================================================================
--- src/app/services/manager.service.ts	(revision b18b234bd7f3f2ab78505a726fd776d129e03a92)
+++ src/app/services/manager.service.ts	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
@@ -1,9 +1,32 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from '../../environment';
+import { Manager } from '../models/manager.model';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ManagerService {
+  constructor(private http: HttpClient) {}
 
-  constructor() { }
+  getProfile(): Observable<Manager> {
+    return this.http.get<Manager>(`${environment.apiUrl}/manager/profile`);
+  }
+
+  updateProfile(data: Partial<Manager>): Observable<Manager> {
+    return this.http.put<Manager>(
+      `${environment.apiUrl}/manager/profile`,
+      data,
+    );
+  }
+
+  updateProfilePicture(file: File): Observable<Manager> {
+    const formData = new FormData();
+    formData.append('file', file);
+    return this.http.post<Manager>(
+      `${environment.apiUrl}/manager/profile-picture`,
+      formData,
+    );
+  }
 }