diff --git a/src/app/components/comanda/comanda.component.html b/src/app/components/comanda/comanda.component.html
index 068013f..d8d7a9c 100644
--- a/src/app/components/comanda/comanda.component.html
+++ b/src/app/components/comanda/comanda.component.html
@@ -1,58 +1,110 @@
 <div class="container-fluid fade-in p-0">
-  <div class="row m-1 fade-in disable-user-select">
+  <div class="card-columns m-1 fade-in disable-user-select">   
     <div
-      [ngClass]="{ 'swing-out-top-bck': comanda.estado === 3 }"
-      class="col-2 col-1-5 p-1" *ngFor="let comanda of comandas">
-      
-      <div
-        class="card-comanda fade-in d-flex align-items-end flex-column bg-danger rounded-xs shadow-sm border-0 h-100"
-        [ngClass]="
-        {
-          'bg-light': comanda.estado === 1,
-          'bg-danger': comanda.estado === 2,
-          'bg-success': comanda.estado === 3
-        }">
-        <img
-          class="card-img-top rounded-xs shadow-sm"
-          src="{{apiImagenes}}/imagenes/{{comanda.detalles[0].articulo.imagenes[0].imagen}}"/>
-        <div class="row w-100 m-0 mt-2">
-          <p class="col-12 px-2 mb-2 m-0 h6">{{comanda.detalles[0].articulo.DetArt}}</p>
-          <p class="col-12 px-2 mb-2 m-0 h6"><small>{{comanda.detalles[0].articulo.DET_LAR}}</small></p>
-        </div>
-        <div class="row w-100 m-0 mb-2 mt-auto">
-          <div
-            class="col-12 px-2"
-            *ngIf="comanda.estado === 1">
-            <button
-              class="btn btn-block btn-danger shadow-sm"
-              (click)="updateComanda(comanda, 2, 'En elaboracion')">
-              Elaborar
-            </button>
-          </div>
-          <div
-            class="col-12 px-2"
-            *ngIf="comanda.estado === 2">
-            <button
-              class="btn btn-block btn-success shadow-sm"
-              (click)="updateComanda(comanda, 3, 'Terminado')">
-              Terminado
-            </button>
-          </div>
+      *ngFor="let comanda of comandas"
+      class="card fade-in rounded-xs shadow-sm"
+      [ngClass]="{
+        'bg-light': comanda.estado === 1,
+        'bg-danger': comanda.estado === 2,
+        'bg-success swing-out-top-bck': comanda.estado === 3
+      }">
+      <div class="card-body p-2">
+        <p class="h5 card-title text-center mb-1">{{comanda.id}}.</p>
+        <p
+          *ngFor="let detalle of comanda.detalles"
+          [ngClass]="
+          {
+            'border-secondary': comanda.estado === 1,
+            'border-light': comanda.estado != 1
+          }"
+          class="card-text border-top pt-2 mb-2">
+          <small>
+            {{detalle.articulo.DET_LAR}}
+          </small>
+        </p>
+        <button
+          *ngIf="comanda.estado === 1"
+          class="btn btn-block btn-danger shadow-sm"
+          (click)="updateComanda(comanda, 2, 'En elaboracion')">
+          Elaborar
+        </button>
+        <button
+          *ngIf="comanda.estado === 2"
+          class="btn btn-block btn-success shadow-sm"
+          (click)="updateComanda(comanda, 3, 'Terminado')">
+          Terminado
+        </button>                    
+        <button
+          *ngIf="comanda.estado === 2"
+          class="btn btn-block btn-light btn-sm shadow-sm p-0"
+          (click)="updateComanda(comanda, 1, 'Pagado')">
+          <span class="pr-1 h6"><small>En espera</small></span>
+          <i class="fa fa-undo text-warning" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- <div class="row m-0">
+  <div
+    [ngClass]="{'swing-out-top-bck': comanda.estado === 3}"
+    class="col-2 col-1-5 p-1" *ngFor="let comanda of comandas">
+    
+    <div
+      class="fade-in rounded-xs shadow-sm"
+      [ngClass]="
+      {
+        'bg-light': comanda.estado === 1,
+        'bg-danger': comanda.estado === 2,
+        'bg-success': comanda.estado === 3
+      }">
+      <div class="row w-100 m-0">
+        <p class="col-12 p-1 mb-2 m-0 h5 text-center">{{comanda.id}}.</p>
+        <p
+          [ngClass]="
+          {
+            'border-secondary': comanda.estado === 1,
+            'border-light': comanda.estado != 1
+          }"
+          class="col-12 p-2 mb-2 m-0 h6 border-top">
+          <small>
+            {{comanda.detalles[0].articulo.DET_LAR}}
+          </small>
+        </p>
+      </div>
+      <div class="row w-100 m-0 mb-2 mt-auto">
+        <div
+          class="col-12 p-2"
+          *ngIf="comanda.estado === 1">
+          <button
+            class="btn btn-block btn-danger shadow-sm"
+            (click)="updateComanda(comanda, 2, 'En elaboracion')">
+            Elaborar
+          </button>
         </div>
         <div
-          *ngIf="comanda.estado === 2"
-          class="row w-100 mx-0 mb-2">
-          <div class="col-12 px-2">
-            <button
-              class="btn btn-block btn-light btn-sm shadow-sm p-0"
-              (click)="updateComanda(comanda, 1, 'Pagado')">
-              <span class="pr-1 h6"><small>En espera</small></span>
-              <i class="fa fa-undo text-warning" aria-hidden="true"></i>
-            </button>
-          </div>
+          class="col-12 p-2"
+          *ngIf="comanda.estado === 2">
+          <button
+            class="btn btn-block btn-success shadow-sm"
+            (click)="updateComanda(comanda, 3, 'Terminado')">
+            Terminado
+          </button>
+        </div>
+      </div>
+      <div
+        *ngIf="comanda.estado === 2"
+        class="row w-100 mx-0 mb-2">
+        <div class="col-12 px-2 pb-2">
+          <button
+            class="btn btn-block btn-light btn-sm shadow-sm p-0"
+            (click)="updateComanda(comanda, 1, 'Pagado')">
+            <span class="pr-1 h6"><small>En espera</small></span>
+            <i class="fa fa-undo text-warning" aria-hidden="true"></i>
+          </button>
         </div>
       </div>
-
     </div>
   </div>
-</div>
+</div-->