diff --git a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html
index 8be48cc..f77451c 100644
--- a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html
+++ b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html
@@ -1,4 +1,4 @@
-    <div class="purchase-item">
+    <div class="purchase-item" [routerLink]="[purchase.id]" style="cursor: pointer;">
       <div class="purchase-info">
         <span class="purchase-id">Compra {{ purchase.id }}.</span>
         <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
diff --git a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts
index 393f6e5..b423d1c 100644
--- a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts
+++ b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts
@@ -1,9 +1,10 @@
 import { Component, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-purchase-list-item',
   standalone: true,
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './purchase-list-item.html',
   styleUrl: './purchase-list-item.scss',
 })
diff --git a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
new file mode 100644
index 0000000..1f34489
--- /dev/null
+++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
@@ -0,0 +1,74 @@
+<div class="page-container">
+  <div class="d-flex align-items-center mb-4">
+    <a routerLink="../" class="text-decoration-none me-3" style="color: #888;">
+      <i class="bi bi-arrow-left fs-5"></i>
+    </a>
+    <h2 class="page-title m-0">MIS COMPRAS</h2>
+  </div>
+
+  <div class="d-flex justify-content-between align-items-end mb-4 pb-2 border-bottom">
+    <div class="purchase-info pb-3">
+      <span class="purchase-id">Compra #{{ purchase.id }}.</span>
+      <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
+    </div>
+    <div class="purchase-total pb-3">
+      <span class="purchase-total-label">Total:</span>
+      <span class="purchase-total-value">${{ purchase.total }}</span>
+    </div>
+  </div>
+
+  <p class="mb-3" style="font-size: 12px; color: #666666; font-weight: 325;">Productos:</p>
+
+  <div class="d-flex flex-column">
+    @for (product of purchase.products; track product.id) {
+      <article class="w-100 py-3 rounded-0 cart-item">
+        <div class="position-relative overflow-hidden cart-item-media">
+          @if (product.discountPercentage) {
+            <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ product.discountPercentage }}%</span>
+          }
+          
+          @if (product.imageUrl) {
+            <img class="w-100 h-100 object-fit-cover d-block" [src]="product.imageUrl" [alt]="product.name" />
+          } @else {
+            <div class="w-100 h-100 cart-item-placeholder" aria-hidden="true"></div>
+          }
+        </div>
+
+        <div class="d-grid min-w-0 cart-item-content">
+          <div class="d-grid align-items-start cart-item-top-row">
+            <h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ product.name }}</h3>
+
+            <div class="text-nowrap cart-item-prices">
+              @if (product.originalPrice) {
+                <span class="text-decoration-line-through mb-1 fw-light cart-item-original-price">$ {{ product.originalPrice }}</span>
+              }
+              <span class="fw-bold cart-item-discounted-price">$ {{ product.discountedPrice }}</span>
+            </div>
+          </div>
+
+          <div class="d-flex justify-content-between align-items-center mt-auto">
+            <div class="d-grid cart-item-attributes">
+              <div class="cart-item-attribute">
+                <span class="fw-normal cart-item-attribute-label">Cantidad: </span>
+                <span class="fw-bold">{{ product.quantity }} unidad</span>
+              </div>
+              <div class="cart-item-attribute">
+                <span class="fw-normal cart-item-attribute-label">Color: </span>
+                <span class="fw-bold">{{ product.color }}</span>
+              </div>
+              <div class="cart-item-attribute">
+                <span class="fw-normal cart-item-attribute-label">Talle: </span>
+                <span class="fw-bold">{{ product.size }}</span>
+              </div>
+            </div>
+
+            <div class="cart-item-transfer-price text-end">
+              <span class="fw-bold">${{ product.transferPrice }}</span>
+              <span class="fw-normal ms-1">con transferencia</span>
+            </div>
+          </div>
+        </div>
+      </article>
+    }
+  </div>
+</div>
diff --git a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss
new file mode 100644
index 0000000..f2fc769
--- /dev/null
+++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.scss
@@ -0,0 +1,142 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+}
+
+.page-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #888;
+}
+
+.purchase-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.purchase-id {
+  font-weight: bold;
+  color: #666666;
+  font-size: 13px;
+}
+.purchase-date {
+  font-weight: 325;
+  color: #666666;
+  font-size: 10px;
+}
+
+.purchase-total {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.purchase-total-label {
+  font-size: 13px;
+  color: #666666;
+  font-weight: 325;
+}
+.purchase-total-value {
+  color: var(--bs-primary, #5b75ff);
+  font-weight: bold;
+  font-size: 15px;
+}
+
+.cart-item {
+  display: grid;
+  grid-template-columns: 90px minmax(0, 1fr);
+  gap: 0.75rem;
+  background-color: transparent;
+  position: relative;
+  border-bottom: 1px solid #eaeaea;
+}
+
+.cart-item:last-child {
+  border-bottom: none;
+}
+
+.cart-item-media {
+  width: 90px;
+  aspect-ratio: 1 / 1;
+  border-radius: 5px 0 0 5px;
+  background-color: #ffffff;
+  border: 1px solid #eaeaea;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.cart-item-discount-badge {
+  padding: 2px 5px;
+  border-bottom-right-radius: 4px;
+  background-color: var(--bs-primary, #5b75ff);
+  color: #ffffff;
+  font-size: 8px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.cart-item-placeholder {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
+}
+
+.cart-item-content {
+  gap: 0.5rem;
+}
+
+.cart-item-top-row {
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+}
+
+.cart-item-product {
+  color: #666666;
+  font-size: 12px;
+  line-height: 1.25;
+  font-weight: 325;
+}
+
+.cart-item-prices {
+  display: grid;
+  justify-items: end;
+  line-height: 1.1;
+}
+
+.cart-item-original-price {
+  color: #a0a0a0;
+  font-size: 10px;
+  font-weight: 325;
+}
+
+.cart-item-discounted-price {
+  color: var(--bs-primary, #5b75ff);
+  font-size: 13px;
+  font-weight: 425;
+}
+
+.cart-item-attributes {
+  gap: 0.125rem;
+}
+
+.cart-item-attribute {
+  color: #666666;
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.cart-item-attribute-label {
+  font-weight: 325;
+}
+
+.cart-item-transfer-price {
+  color: #666666;
+  font-size: 10px;
+  line-height: 1.2;
+}
diff --git a/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts
new file mode 100644
index 0000000..5e92219
--- /dev/null
+++ b/src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.ts
@@ -0,0 +1,80 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-purchase-detail-page',
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+  templateUrl: './purchase-detail-page.html',
+  styleUrl: './purchase-detail-page.scss',
+})
+export class PurchaseDetailPage {
+  purchaseId = 'A00013';
+
+  // Mocked data based on the provided image
+  purchase = {
+    id: this.purchaseId,
+    date: '15/04/2026',
+    total: '365.480,00',
+    products: [
+      {
+        id: 1,
+        name: 'PANTALÓN RECTO DE SCUBA NEGRO',
+        quantity: 1,
+        color: 'Beige',
+        size: 'S',
+        originalPrice: '95.000',
+        discountedPrice: '76.000',
+        transferPrice: '74.800',
+        discountPercentage: '20',
+        imageUrl: '' // placeholder
+      },
+      {
+        id: 2,
+        name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU',
+        quantity: 1,
+        color: 'Beige',
+        size: 'M',
+        originalPrice: '68.500',
+        discountedPrice: '61.000',
+        transferPrice: '59.800',
+        discountPercentage: '10',
+        imageUrl: ''
+      },
+      {
+        id: 3,
+        name: 'CALZA TÉRMICA UNISEX CON PROCESO SENSE Y CINTURA CON MAYOR AGARRE',
+        quantity: 1,
+        color: 'Beige',
+        size: 'M',
+        originalPrice: null,
+        discountedPrice: '120.000',
+        transferPrice: '180.000',
+        discountPercentage: null,
+        imageUrl: ''
+      },
+      {
+        id: 4,
+        name: 'CALZA SIN TIRO DE LYCRA METALIZADA BORDEAU',
+        quantity: 1,
+        color: 'Beige',
+        size: 'M',
+        originalPrice: '68.500',
+        discountedPrice: '61.000',
+        transferPrice: '59.800',
+        discountPercentage: '10',
+        imageUrl: ''
+      }
+    ]
+  };
+
+  constructor(private route: ActivatedRoute) {
+    this.route.params.subscribe(params => {
+      if (params['id']) {
+        this.purchaseId = params['id'];
+        this.purchase.id = this.purchaseId;
+      }
+    });
+  }
+}
diff --git a/src/app/features/store/store.routes.ts b/src/app/features/store/store.routes.ts
index 15325a4..027e776 100644
--- a/src/app/features/store/store.routes.ts
+++ b/src/app/features/store/store.routes.ts
@@ -88,6 +88,13 @@ export const routes: Routes = [
                 (m) => m.PurchasesPage
               )
           },
+          {
+            path: 'compras/:id',
+            loadComponent: () =>
+              import('./pages/account-page/pages/purchase-detail-page/purchase-detail-page').then(
+                (m) => m.PurchaseDetailPage
+              )
+          },
           {
             path: '',
             redirectTo: 'datos-personales',