diff --git a/index.html b/index.html
index 7af3110..752f874 100644
--- a/index.html
+++ b/index.html
@@ -34,8 +34,9 @@
         <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>
         <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
         <script src="./node_modules/foca-admin-seguimiento/dist/foca-admin-seguimiento.min.js"></script>
-        <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
         <script src="./node_modules/foca-botonera-facturador/dist/foca-botonera-facturador.min.js"></script>
+        <script src="./node_modules/foca-botonera-lateral/dist/foca-botonera-lateral.min.js"></script>
+        <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
         <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
         <script src="./node_modules/foca-cabecera-facturador/dist/foca-cabecera-facturador.min.js"></script>
         <script src="./node_modules/foca-configuracion/dist/foca-configuracion.min.js"></script>
@@ -86,19 +87,14 @@
         <foca-nombre-empresa></foca-nombre-empresa>
         <div ng-view class="container contenedor"></div>
         <div ng-controller="appWrapperDemoController" class="teclado-container container d-none d-md-block ">
-            <div
-                class="btn-group-toggle"
-                data-toggle="buttons"
-                ng-click="cambioUsoTeclado()">
-                <label
-                    class="btn btn-secondary active boton-activar-teclado"
-                    ng-class="{'teclado-activar': usarTeclado}">
-                    <input
-                        type="checkbox"
-                        autocomplete="off"
-                        >
-                        Teclado
-                </label>
+            <div class="container">
+                <div class="row">
+                    <div class="col-auto my-2 col-lg-2 offset-lg-10 d-none d-md-flex" style="min-height: 176px">
+                        <div class="px-2 mt-auto">
+                            <foca-botonera-lateral></foca-botonera-lateral>
+                        </div>
+                    </div>
+                </div>
             </div>
             <foca-teclado
                 ng-show="usarTeclado && mostrarTeclado"
diff --git a/package.json b/package.json
index 35c0e57..85a8b89 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
         "foca-abm-vehiculo": "git+ssh://git@debonline.dyndns.org:npm/foca-abm-vehiculo.git",
         "foca-admin-seguimiento": "git+ssh://git@debonline.dyndns.org:npm/foca-admin-seguimiento.git",
         "foca-botonera-principal": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-principal.git",
+        "foca-botonera-lateral": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-lateral.git",
         "foca-botonera-facturador": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-facturador.git",
         "foca-busqueda-cliente": "git+ssh://git@debonline.dyndns.org:npm/foca-busqueda-cliente.git",
         "foca-cabecera-facturador": "git+ssh://git@debonline.dyndns.org:npm/foca-cabecera-facturador.git",
diff --git a/src/js/app.js b/src/js/app.js
index a6c327a..44b10ff 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -17,8 +17,9 @@ angular.module('appWrapperDemo', [
     'focaAbmVehiculo',
     'focaAbmChofer',
     'focaAdminSeguimiento',
-    'focaBotoneraPrincipal',
     'focaBotoneraFacturador',
+    'focaBotoneraLateral',
+    'focaBotoneraPrincipal',
     'focaBusquedaCliente',
     'focaBusquedaProductos',
     'focaCabeceraFacturador',
diff --git a/src/sass/_botonera-lateral.scss b/src/sass/_botonera-lateral.scss
index 5a71173..8390735 100644
--- a/src/sass/_botonera-lateral.scss
+++ b/src/sass/_botonera-lateral.scss
@@ -1,9 +1,64 @@
 .botonera-lateral {
-    >.row {
-        height: 420px;
-    }
 
     @media (min-width: 768px){
         display: grid !important;
     }
+
+    button{
+        pointer-events: all;
+        background-color: #DDD;
+    }
+
+    .teclado-activar {
+        background-color: #17d236 !important;
+        color: #FFF !important;
+    }
+
+    button, .btn-group-toggle{
+        background-color: #DDD;
+        color: #000;
+        text-transform: uppercase;
+        min-width: 109px;
+        &:hover{
+            color: #FFF;
+            .boton-activar-teclado{
+                color: #FFF;
+            }
+            background-color: #000;
+        }
+    }
+    
+    
+    .btn-group-toggle{
+        pointer-events: all;
+        &.active{
+            background-color: $primary-color;
+            .boton-activar-teclado{
+                color: #FFF;
+            }
+        }
+        
+        .boton-activar-teclado{
+            cursor: pointer;
+            color: #000;
+            background-color: transparent;
+        }
+
+        input{
+            display: none;
+        }
+    }
 }
+.teclado-container > div{
+    pointer-events: none;
+    position: absolute;
+    z-index: 100000;
+    left: 0;
+    right: 0;
+    top: 449px;
+    .row{
+        margin: 0 !important;
+        pointer-events: none;
+    }
+    
+}
\ No newline at end of file
diff --git a/src/sass/_botonera-secundaria.scss b/src/sass/_botonera-secundaria.scss
index 3ae0c99..33e309a 100644
--- a/src/sass/_botonera-secundaria.scss
+++ b/src/sass/_botonera-secundaria.scss
@@ -33,4 +33,22 @@
             font-weight: 700;
         }
     }
+    @media(min-width: 1200px){
+        .btn{
+            min-height: 85px;
+        }
+    }
+
+    @media(min-width: 992px) and (max-width: 1200px){
+        .btn{
+            min-height: 73px;
+        }
+    }
+
+    @media(min-width: 768px) and (max-width: 992px){
+        .btn{
+            min-height: 62px;
+        }
+    }
+
 }
diff --git a/src/sass/_contenedor.scss b/src/sass/_contenedor.scss
index 4fa8fd5..cddac3d 100644
--- a/src/sass/_contenedor.scss
+++ b/src/sass/_contenedor.scss
@@ -2,18 +2,13 @@ body {
     @media (min-width: 768px) {
         background-color: #cccccc;
     }
-    @media (max-width: 768px) {
-        background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
-    }
 }
 
 .contenedor {
     @media (min-width: 768px) {
-        background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
         min-height: 600px;
         min-width: 800px;
     }
-
 }
 
 .grilla-articulo {
diff --git a/src/sass/_swiper.scss b/src/sass/_swiper.scss
index c45f696..c6ec68a 100644
--- a/src/sass/_swiper.scss
+++ b/src/sass/_swiper.scss
@@ -1,6 +1,6 @@
 .swiper {
     &-container {
-        height: 400px;
+        height: 300px;
     }
     &-slide {
         background: transparent;
diff --git a/src/sass/_teclado.scss b/src/sass/_teclado.scss
index 581526f..573dfa9 100644
--- a/src/sass/_teclado.scss
+++ b/src/sass/_teclado.scss
@@ -65,19 +65,3 @@
         height: 50px;
     }
 }
-.teclado-container > div{
-    position: relative;
-}
-.teclado-activar {
-    background-color: #17d236;
-}
-.boton-activar-teclado {
-    top: -450px;
-    position: absolute;
-    z-index: 100000;
-    right: 1.6rem;
-
-    @media(min-width: 1200px){
-        right: 2.5rem !important;
-    }
-}
diff --git a/src/sass/general.scss b/src/sass/general.scss
index 33f6051..56f202b 100644
--- a/src/sass/general.scss
+++ b/src/sass/general.scss
@@ -1,3 +1,6 @@
+$primary-color: #e09125;
+
+
 @import 'admin-seguimiento';
 @import 'bootstrap';
 @import 'botonera';