diff --git a/src/app/app.ts b/src/app/app.ts
index 3ccb34f..5b97050 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -31,12 +31,22 @@ function hexToRgb(hex: string): string {
     '[style.--tenant-secondary]': 'tenantSecondaryColor()',
     '[style.--tenant-danger]': 'tenantDangerColor()',
     '[style.--tenant-success]': 'tenantSuccessColor()',
+    '[style.--color-primary]': 'tenantPrimaryColor()',
+    '[style.--color-secondary]': 'tenantSecondaryColor()',
+    '[style.--color-danger]': 'tenantDangerColor()',
+    '[style.--color-success]': 'tenantSuccessColor()',
     '[style.--tenant-primary-rgb]': 'tenantPrimaryColorRgb()',
     '[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
     '[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
     '[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
+    '[style.--color-primary-rgb]': 'tenantPrimaryColorRgb()',
+    '[style.--color-secondary-rgb]': 'tenantSecondaryColorRgb()',
+    '[style.--color-danger-rgb]': 'tenantDangerColorRgb()',
+    '[style.--color-success-rgb]': 'tenantSuccessColorRgb()',
     '[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
-    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()'
+    '[style.--tenant-footer-bg]': 'tenantFooterBgColor()',
+    '[style.--color-header-bg]': 'tenantHeaderBgColor()',
+    '[style.--color-footer-bg]': 'tenantFooterBgColor()'
   }
 })
 export class App {
@@ -78,5 +88,4 @@ export class App {
       this.tenantService.tenant()?.footer_bg_color ??
       DEFAULT_TENANT_BRANDING.footerBgColor
   );
-}
-
+}
\ No newline at end of file
diff --git a/src/app/core/layout/simple-layout/simple-layout.component.scss b/src/app/core/layout/simple-layout/simple-layout.component.scss
index 834ee92..5901932 100644
--- a/src/app/core/layout/simple-layout/simple-layout.component.scss
+++ b/src/app/core/layout/simple-layout/simple-layout.component.scss
@@ -15,7 +15,7 @@
 }
 
 .simple-layout__card {
-  border-radius: 1.5rem;
+  border-radius: 5px;
   overflow: hidden;
 }
 
diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html
index 303332b..dfa4566 100644
--- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html
+++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.html
@@ -5,28 +5,39 @@
     </div>
     <h2 class="status-content__title">Cargando estado...</h2>
   } @else if (status() === 'approved') {
-    <div class="status-content__icon status-content__icon--success">
-      <i class="fa-solid fa-check"></i>
+    <div class="status-content__section status-content__section--primary">
+      <div class="status-content__icon status-content__icon--success">
+        <i class="fa-solid fa-check"></i>
+      </div>
+      <h2 class="status-content__title">COMPRA REALIZADA!</h2>
+      <p class="status-content__subtitle">Tu compra fue realizada con &eacute;xito</p>
     </div>
-    <h2 class="status-content__title">COMPRA REALIZADA!</h2>
-    <p class="status-content__subtitle">Tu compra fue realizada con éxito</p>
-    
+
     <hr class="status-content__divider" />
-    
-    <p class="status-content__message">Comunicate con nosotros para coordinar el envío.</p>
-    
-    <a [href]="getWhatsAppLink()" target="_blank" rel="noopener noreferrer" class="status-content__button">
-      <i class="fa-brands fa-whatsapp"></i> WhatsApp
-    </a>
+
+    <div class="status-content__section status-content__section--secondary">
+      <p class="status-content__message">Comunicate con nosotros para coordinar el env&iacute;o.</p>
+
+      <app-button
+        type="button"
+        variant="secondary"
+        hostClass="status-content__button d-block"
+        buttonClass="status-content__button-control d-inline-flex align-items-center justify-content-center gap-2 py-2"
+        (click)="openWhatsApp()"
+      >
+        <i class="fa-brands fa-whatsapp status-content__button-icon"></i>
+        <span>WhatsApp</span>
+      </app-button>
+    </div>
   } @else if (status() === 'pending') {
     <div class="status-content__icon status-content__icon--warning">
       <i class="fa-solid fa-clock"></i>
     </div>
     <h2 class="status-content__title">PAGO PENDIENTE</h2>
-    <p class="status-content__subtitle">Estamos esperando la confirmación de tu pago</p>
-    
+    <p class="status-content__subtitle">Estamos esperando la confirmaci&oacute;n de tu pago</p>
+
     <hr class="status-content__divider" />
-    
+
     <p class="status-content__message">Una vez que el pago sea procesado, actualizaremos el estado de tu compra.</p>
   } @else {
     <div class="status-content__icon status-content__icon--error">
@@ -35,4 +46,4 @@
     <h2 class="status-content__title">HUBO UN ERROR</h2>
     <p class="status-content__subtitle">No pudimos obtener el estado de tu compra</p>
   }
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.scss b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.scss
index 63cace8..79aa713 100644
--- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.scss
+++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.scss
@@ -1,25 +1,49 @@
+:host {
+  --color-primary: var(--tenant-primary, #6376f3);
+  --color-primary-rgb: var(--tenant-primary-rgb, 99, 118, 243);
+}
+
 .status-content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  width: 100%;
   text-align: center;
   padding: 2rem 1rem;
 
+  &__section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__section--primary {
+    gap: 0.75rem;
+  }
+
+  &__section--secondary {
+    gap: 1rem;
+  }
+
   &__icon {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 80px;
-    height: 80px;
+    width: 92px;
+    height: 92px;
     border-radius: 50%;
     font-size: 2rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.25rem;
+
+    i {
+      line-height: 1;
+    }
 
     &--success {
-      background-color: rgba(var(--color-success-rgb), 0.1);
-      color: var(--color-success);
-      border: 2px solid var(--color-success);
+      background-color: color-mix(in srgb, white 92%, var(--color-primary));
+      color: var(--color-primary) !important;
+      border: 1.5px solid color-mix(in srgb, white 20%, var(--color-primary));
     }
 
     &--warning {
@@ -35,52 +59,58 @@
     }
 
     &--loading {
-      background-color: rgba(var(--color-primary-rgb), 0.1);
+      background-color: color-mix(in srgb, white 90%, var(--color-primary));
       color: var(--color-primary);
       border: 2px solid var(--color-primary);
     }
   }
 
   &__title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--color-primary);
     margin: 0;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1.25;
+    color: var(--color-primary) !important;
   }
 
   &__subtitle {
-    font-size: 1rem;
-    color: var(--color-text-muted);
     margin: 0;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 1.35;
+    color: #8a8a8a;
   }
 
   &__divider {
-    width: 100%;
-    border: none;
-    border-top: 1px solid var(--color-border);
-    margin: 1.5rem 0;
+    display: block;
+    width: min(100%, 410px);
+    height: 1px;
+    background-color: #d9d9d9 !important;
+    border: 0;
+    opacity: 1;
+    margin: 1.75rem 0 1.5rem;
   }
 
   &__message {
-    font-size: 0.9rem;
+    max-width: 280px;
+    margin: 0;
+    font-size: 13px;
+    font-weight: 325;
+    line-height: 1.45;
     color: var(--color-text);
-    margin-bottom: 1.5rem;
   }
 
   &__button {
+    width: auto;
+  }
+
+  &__button-icon {
     display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1.5rem;
-    border-radius: var(--border-radius-md);
-    background-color: #25D366; /* WhatsApp color */
-    color: white;
-    font-weight: 600;
-    text-decoration: none;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: #1EBE5D;
-    }
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    line-height: 1;
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts
index 2fea395..2f9baea 100644
--- a/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts
+++ b/src/app/features/store/pages/purchase-status-page/purchase-status-page.component.ts
@@ -5,11 +5,12 @@ import { firstValueFrom } from 'rxjs';
 
 import { environment } from '../../../../../environments/environment';
 import { TenantService } from '../../../../core/services/tenant.service';
+import { ButtonComponent } from '../../../../shared/components/button/button.component';
 
 @Component({
   selector: 'app-purchase-status-page',
   standalone: true,
-  imports: [],
+  imports: [ButtonComponent],
   templateUrl: './purchase-status-page.component.html',
   styleUrl: './purchase-status-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -36,21 +37,14 @@ export class PurchaseStatusPageComponent implements OnInit {
   }
 
   private async checkPurchaseStatus(tenantCode: string, purchaseId: string): Promise<void> {
+    // MOCK DATA FOR DESIGN TESTING
     try {
       this.isLoading.set(true);
-      const response = await firstValueFrom(
-        this.http.get<{ data: { payment_status: string } }>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}`)
-      );
+      // Simular un delay de red
+      await new Promise((resolve) => setTimeout(resolve, 500));
 
-      const paymentStatus = response?.data?.payment_status;
-
-      if (paymentStatus === 'approved') {
-        this.status.set('approved');
-      } else {
-        this.status.set('pending');
-      }
+      this.status.set('approved'); // Cambiar a 'pending' o 'error' para probar otros estados
     } catch (error) {
-      console.error('Failed to fetch purchase status:', error);
       this.status.set('error');
     } finally {
       this.isLoading.set(false);
@@ -59,7 +53,11 @@ export class PurchaseStatusPageComponent implements OnInit {
 
   protected getWhatsAppLink(): string {
     const phone = '5493416658247';
-    const message = encodeURIComponent('Hola! Mi compra fue realizada con éxito.');
+    const message = encodeURIComponent('Hola! Mi compra fue realizada con \u00e9xito.');
     return `https://wa.me/${phone}?text=${message}`;
   }
-}
+
+  protected openWhatsApp(): void {
+    window.open(this.getWhatsAppLink(), '_blank', 'noopener,noreferrer');
+  }
+}
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index b50656e..e5c08bf 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,3 @@
-
 @use "./fonts";
 
 @import "@fortawesome/fontawesome-free/css/all.min.css";
@@ -9,14 +8,24 @@
 
 :root, app-root {
   --bs-body-font-family: "Gotham", sans-serif;
-  --bs-primary: var(--tenant-primary);
-  --bs-primary-rgb: var(--tenant-primary-rgb);
-  --bs-secondary: var(--tenant-secondary);
-  --bs-secondary-rgb: var(--tenant-secondary-rgb);
-  --bs-danger: var(--tenant-danger);
-  --bs-danger-rgb: var(--tenant-danger-rgb);
-  --bs-success: var(--tenant-success);
-  --bs-success-rgb: var(--tenant-success-rgb);
+  --color-primary: var(--tenant-primary);
+  --color-primary-rgb: var(--tenant-primary-rgb);
+  --color-secondary: var(--tenant-secondary);
+  --color-secondary-rgb: var(--tenant-secondary-rgb);
+  --color-danger: var(--tenant-danger);
+  --color-danger-rgb: var(--tenant-danger-rgb);
+  --color-success: var(--tenant-success);
+  --color-success-rgb: var(--tenant-success-rgb);
+  --color-header-bg: var(--tenant-header-bg);
+  --color-footer-bg: var(--tenant-footer-bg);
+  --bs-primary: var(--color-primary);
+  --bs-primary-rgb: var(--color-primary-rgb);
+  --bs-secondary: var(--color-secondary);
+  --bs-secondary-rgb: var(--color-secondary-rgb);
+  --bs-danger: var(--color-danger);
+  --bs-danger-rgb: var(--color-danger-rgb);
+  --bs-success: var(--color-success);
+  --bs-success-rgb: var(--color-success-rgb);
 }
 
 label {
@@ -24,4 +33,4 @@ label {
   margin-bottom: 0.375rem;
   font-size: 13px;
   font-weight: 400;
-}
+}
\ No newline at end of file