Index: package-lock.json
===================================================================
--- package-lock.json	(revision 18471b740c986ba359ae32c632c8bbbfc506abf1)
+++ package-lock.json	(revision 871630ecbcb1724aade3ae1c42aa971e12a8107f)
@@ -39,5 +39,5 @@
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
-        "prettier": "3.5.3",
+        "prettier": "^3.5.3",
         "typescript": "~5.6.2"
       }
Index: package.json
===================================================================
--- package.json	(revision 18471b740c986ba359ae32c632c8bbbfc506abf1)
+++ package.json	(revision 871630ecbcb1724aade3ae1c42aa971e12a8107f)
@@ -42,5 +42,5 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "prettier": "3.5.3",
+    "prettier": "^3.5.3",
     "typescript": "~5.6.2"
   }
Index: src/app/customer/customer-profile/customer-profile.component.html
===================================================================
--- src/app/customer/customer-profile/customer-profile.component.html	(revision 18471b740c986ba359ae32c632c8bbbfc506abf1)
+++ src/app/customer/customer-profile/customer-profile.component.html	(revision 871630ecbcb1724aade3ae1c42aa971e12a8107f)
@@ -1,1 +1,101 @@
-<p>customer-profile works!</p>
+<app-navbar></app-navbar>
+
+<div class="container mt-4">
+  <h2>My Profile</h2>
+
+  <div class="d-flex align-items-center mb-4">
+    <img
+      [src]="profile.image"
+      class="rounded-circle me-3"
+      width="100"
+      height="100"
+    />
+    <label class="btn btn-outline-primary">
+      Change Photo
+      <input type="file" hidden (change)="changeProfileImage($event)" />
+    </label>
+
+    <img
+      [src]="profile.image"
+      class="rounded-circle me-3"
+      width="100"
+      height="100"
+    />
+    <label class="btn btn-outline-primary">
+      Change Rep Image
+      <input type="file" hidden (change)="changeRepImage($event)" />
+    </label>
+  </div>
+
+  <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>EDB</label>
+        <input formControlName="edb" class="form-control" />
+      </div>
+      <div class="col-md-6">
+        <label>Company Name</label>
+        <input formControlName="compName" class="form-control" />
+      </div>
+      <div class="col-md-12">
+        <label>Address</label>
+        <input formControlName="address" class="form-control" />
+      </div>
+      <div class="col-md-12">
+        <label>City</label>
+        <input formControlName="city" class="form-control" />
+      </div>
+    </div>
+    <div class="mt-4">
+      <button
+        class="btn btn-primary me-2"
+        (click)="saveProfile()"
+        [disabled]="form.invalid"
+      >
+        Save
+      </button>
+      <button class="btn btn-secondary" (click)="toggleEdit()">Cancel</button>
+    </div>
+  </form>
+
+  <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">EDB</dt>
+      <dd class="col-sm-9">{{ profile.edb }}</dd>
+
+      <dt class="col-sm-3">Company</dt>
+      <dd class="col-sm-9">{{ profile.compName }}</dd>
+
+      <dt class="col-sm-3">Address</dt>
+      <dt class="col-sm-3">{{ profile.address }}</dt>
+    </dl>
+    <button class="btn btn-outline-primary" (click)="toggleEdit()">
+      Edit Details
+    </button>
+  </ng-template>
+</div>
Index: src/app/customer/customer-profile/customer-profile.component.ts
===================================================================
--- src/app/customer/customer-profile/customer-profile.component.ts	(revision 18471b740c986ba359ae32c632c8bbbfc506abf1)
+++ src/app/customer/customer-profile/customer-profile.component.ts	(revision 871630ecbcb1724aade3ae1c42aa971e12a8107f)
@@ -1,11 +1,83 @@
+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 { Customer } from '../../models';
+import { CustomerService } from '../../services/customer.service';
 
 @Component({
   selector: 'app-customer-profile',
-  imports: [],
+  imports: [CommonModule, ReactiveFormsModule, NavbarComponent, RouterModule],
   templateUrl: './customer-profile.component.html',
-  styleUrl: './customer-profile.component.css'
+  styleUrl: './customer-profile.component.css',
 })
 export class CustomerProfileComponent {
+  profile!: Customer;
+  form!: FormGroup;
+  editMode = false;
 
+  constructor(
+    private svc: CustomerService,
+    private fb: FormBuilder,
+  ) {}
+
+  ngOnInit() {
+    this.loadProfile();
+  }
+
+  loadProfile() {
+    this.svc.getProfile().subscribe((profile) => {
+      this.profile = profile;
+      this.buildForm(profile);
+    });
+  }
+
+  private buildForm(p: Customer) {
+    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],
+      edb: [p.edb, Validators.required],
+      compName: [p.compName, Validators.required],
+      address: [p.address, Validators.required],
+      city: [p.cityId, Validators.required],
+    });
+  }
+
+  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 file = (event.target as HTMLInputElement).files?.[0];
+    if (file) {
+      this.svc.updateProfilePicture(file).subscribe((u) => (this.profile = u));
+    }
+  }
+
+  changeRepImage(event: Event) {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (file) {
+      this.svc.updateRepImage(file).subscribe((u) => (this.profile = u));
+    }
+  }
 }
Index: src/app/models/customer.model.ts
===================================================================
--- src/app/models/customer.model.ts	(revision 871630ecbcb1724aade3ae1c42aa971e12a8107f)
+++ src/app/models/customer.model.ts	(revision 871630ecbcb1724aade3ae1c42aa971e12a8107f)
@@ -0,0 +1,21 @@
+export interface Customer {
+    id: number
+    // from UserDto:
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    image?: string;
+    cityId?: number;
+    cityName?: string;
+    regionName?: string;
+    role: string;
+    clazz_: string;
+    userActive: boolean;
+
+    // from CustomerDto:
+    edb: string;
+    compName: string;
+    address: string;
+    repImage?: string;
+}
Index: src/app/models/index.ts
===================================================================
--- src/app/models/index.ts	(revision 18471b740c986ba359ae32c632c8bbbfc506abf1)
+++ src/app/models/index.ts	(revision 871630ecbcb1724aade3ae1c42aa971e12a8107f)
@@ -3,2 +3,6 @@
 export * from './article.model';
 export * from './order-item.model';
+export * from './order.model';
+export * from './page-response.model';
+export * from './paged-model';
+export * from './customer.model';
Index: src/app/services/customer.service.ts
===================================================================
--- src/app/services/customer.service.ts	(revision 18471b740c986ba359ae32c632c8bbbfc506abf1)
+++ src/app/services/customer.service.ts	(revision 871630ecbcb1724aade3ae1c42aa971e12a8107f)
@@ -5,18 +5,51 @@
 import { environment } from '../../environment';
 import { Delivery } from '../models/delivery.model';
+import { Customer } from '../models';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class CustomerService {
-
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {}
 
   getCurrentOrders(): Observable<Order[]> {
-    return this.http.get<Order[]>(`${environment.apiUrl}/order/customer-current-orders`);
+    return this.http.get<Order[]>(
+      `${environment.apiUrl}/order/customer-current-orders`,
+    );
   }
 
-  getCurrentDeliveries(): Observable<Delivery[]>{
-    return this.http.get<Delivery[]>(`${environment.apiUrl}/delivery/customer-current-deliveries`);
+  getCurrentDeliveries(): Observable<Delivery[]> {
+    return this.http.get<Delivery[]>(
+      `${environment.apiUrl}/delivery/customer-current-deliveries`,
+    );
+  }
+
+  getProfile(): Observable<Customer> {
+    return this.http.get<Customer>(`${environment.apiUrl}/customer/profile`);
+  }
+
+  updateProfile(data: Partial<Customer>): Observable<Customer> {
+    return this.http.put<Customer>(
+      `${environment.apiUrl}/customer/profile`,
+      data,
+    );
+  }
+
+  updateProfilePicture(file: File): Observable<Customer> {
+    const fd = new FormData();
+    fd.append('image', file);
+    return this.http.post<Customer>(
+      `${environment.apiUrl}/customer/profile/picture`,
+      fd,
+    );
+  }
+
+  updateRepImage(file: File): Observable<Customer> {
+    const fd = new FormData();
+    fd.append('repImage', file);
+    return this.http.post<Customer>(
+      `${environment.apiUrl}/customer/profile/rep-image`,
+      fd,
+    );
   }
 }