diff --git a/src/app/components/comanda/comanda.component.html b/src/app/components/comanda/comanda.component.html
index 90e0a05..fa3a540 100644
--- a/src/app/components/comanda/comanda.component.html
+++ b/src/app/components/comanda/comanda.component.html
@@ -1,37 +1,56 @@
-<div class="container-fluid p-0">
+<div class="container-fluid fade-in p-0">
   <div class="row m-1 fade-in disable-user-select">
-    <div class="col-2 col-1-5 p-1" *ngFor="let item of itemsArray">
+    <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 rounded-sm shadow-sm"
-        [ngClass]="{ 'green-card': false, 'red-card': false }"
-      >
-        <img
-          class="card-img-top rounded-sm shadow"
-          src="{{ apiImagenes }}/imagenes/cerealitas.jpg"
-        />
-        <div class="card-body px-1 py-2">
-          <p class="h6 card-title">Title</p>
-          <p class="card-text">Text</p>
-          <button class="btn btn-block btn-danger shadow p-1">Elaborar</button>
-          <button class="btn btn-block btn-success shadow p-1">
-            Terminado
-          </button>
-          <div class="row mt-2 m-0">
-            <div class="col-6 p-0 pr-1">
-              <button class="btn btn-block btn-secondary btn-sm shadow p-0">
-                <span class="pr-1 h7"><small>Eliminar</small></span>
-                <i class="fa fa-trash" aria-hidden="true"></i>
-              </button>
-            </div>
-            <div class="col-6 p-0 pl-1">
-              <button class="btn btn-block btn-light btn-sm shadow p-0">
-                <span class="pr-1 h7"><small>En espera</small></span>
-                <i class="fa fa-undo text-warning" aria-hidden="true"></i>
-              </button>
-            </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" src="{{apiImagenes}}/imagenes/cerealitas.jpg"/>
+        <div class="row w-100 m-0 mt-2">
+          <p class="col-12 px-2 mb-2 m-0 h6">Title</p>
+          <p class="col-12 px-2 mb-2 m-0 h6"><small>Text</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"
+              (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"
+              (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">
+            <button
+              class="btn btn-block btn-light btn-sm shadow 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>
diff --git a/src/app/components/comanda/comanda.component.scss b/src/app/components/comanda/comanda.component.scss
index ded63f7..27a5c1c 100644
--- a/src/app/components/comanda/comanda.component.scss
+++ b/src/app/components/comanda/comanda.component.scss
@@ -9,20 +9,88 @@
   }
 }
 
-.h7 {
-  font-size: 0.75rem;
+.bg-danger {
+  background-color: #8c000e !important;
+  p {
+    color: #fff;
+  }
 }
 
-.red-card {
-  background-color: #8c000e;
-  .card-body {
+.bg-success {
+  background-color: #00751b !important;
+  p {
     color: #fff;
   }
 }
 
-.green-card {
-  background-color: #00751B;
-  .card-body {
-    color: #fff;
+.bg-light {
+  background-color: white !important;
+  p {
+    color: #212529;
+  }
+}
+
+.rounded-xs {
+  border-radius: 0.5rem;
+}
+
+.card-comanda {
+  min-height: 250px;
+}
+
+.swing-out-top-bck {
+  -webkit-animation: swing-out-top-bck 0.45s
+    cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both;
+  animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s
+    both;
+}
+
+@-webkit-keyframes swing-out-top-bck {
+  0% {
+    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 1;
+  }
+  75% {
+    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+  }
+  100% {
+    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 0;
+    display: none;
+    position: absolute;
+  }
+}
+
+@keyframes swing-out-top-bck {
+  0% {
+    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 1;
+  }
+  75% {
+    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+  }
+  100% {
+    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 0;
+    display: none;
+    position: absolute;
   }
 }
diff --git a/src/app/components/comanda/comanda.component.ts b/src/app/components/comanda/comanda.component.ts
index c256e85..c990054 100644
--- a/src/app/components/comanda/comanda.component.ts
+++ b/src/app/components/comanda/comanda.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { appSettings } from 'src/etc/AppSettings';
+import { ComandaService } from 'src/app/services/comanda.service';
+import { Comanda } from 'src/app/wrappers/comanda';
 
 @Component({
   selector: 'app-comanda',
@@ -9,11 +11,31 @@ import { appSettings } from 'src/etc/AppSettings';
 export class ComandaComponent implements OnInit {
 
   private apiImagenes = appSettings.apiImagenes;
-  private itemsArray = [{},{},{},{},{},{},{},{}]
+  private comandas: Comanda[] = [];
 
-  constructor() { }
+  constructor(
+    private comandaService: ComandaService
+  ) { }
 
   ngOnInit() {
+
+    this.comandaService.getAll()
+      .subscribe((res: Comanda[]) => {
+
+        this.comandas = res;
+      }, e => console.error(e))
+  }
+
+  updateComanda(comanda: Comanda, estadoNuevo: number, observacionNueva: string) {
+
+    this.comandaService.updateComanda(comanda.id, estadoNuevo, observacionNueva)
+      .subscribe(res => {
+
+        if (res.data) {
+          comanda.estado = estadoNuevo;
+          comanda.observacion = observacionNueva;
+        }
+      }, e => console.error(e))
   }
 
 }