diff --git a/bootstrap/web/config.php b/bootstrap/web/config.php
index 18424c4..bee7612 100644
--- a/bootstrap/web/config.php
+++ b/bootstrap/web/config.php
@@ -61,7 +61,8 @@ return [
         'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/icons.woff2',
         'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/outline-icons.woff',
         'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/outline-icons.woff2',
-        'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap'
+        'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap',
+        'https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap'
       ]
     ]
   ]
diff --git a/common/Controller/Web/Home.php b/common/Controller/Web/Home.php
index 767bcf5..8b054e6 100644
--- a/common/Controller/Web/Home.php
+++ b/common/Controller/Web/Home.php
@@ -20,7 +20,7 @@ class Home {
     ];
     $clientes = [];
     for ($i = 0; $i < 20; $i ++) {
-      $clientes[$i] = '<div class="ui fluid placeholder"><div class="rectangular image"></div>' . $i . '</div>';
+      $clientes[$i] = '<div class="ui fluid placeholder"><div class="circular image"></div>' . $i . '</div>';
     }
 
     $testimonios = $this->loadData($container, 'testimonios');
@@ -29,13 +29,11 @@ class Home {
       if (!isset($evento->image)) {
         $evento->image = '<div class="ui fluid placeholder"><div class="rectangular image"></div></div>';
       }
+      if (!isset($evento->servicio)) {
+        $evento->servicio = mt_rand(0, count($servicios) - 1);
+      }
     }
-    /*$eventos = [
-      (object) [
-        'titulo' => '2da Corrida Famliar Inclusiva DIMERC',
-        'image' => '<div class="ui fluid placeholder"><div class="rectangular image"></div></div>'
-      ]
-    ];*/
+
 
     return $view->render($response, 'home', compact('banner', 'servicios', 'frase', 'clientes', 'testimonios', 'eventos'));
   }
diff --git a/public/assets/styles/header.css b/public/assets/styles/header.css
deleted file mode 100644
index 16c8451..0000000
--- a/public/assets/styles/header.css
+++ /dev/null
@@ -1,9 +0,0 @@
-#page_logo {
-  font-family: Raleway, sans-serif;
-  font-weight: 800;
-  font-size: 2.2rem;
-  color: #404041;
-}
-#page_logo .orange {
-  color: #F26721;
-}
diff --git a/public/assets/styles/home.css b/public/assets/styles/home.css
index 17bad2c..abfb4a8 100644
--- a/public/assets/styles/home.css
+++ b/public/assets/styles/home.css
@@ -41,9 +41,9 @@
 #clientes .header:first-child {
   padding-bottom: 1rem;
 }
-#clientes .ci {
-  display: flex;
-  align-items: center
+#clientes #img_clientes .row {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 #testimonios {
diff --git a/public/assets/styles/main.css b/public/assets/styles/main.css
index 11b773b..8fc42f5 100644
--- a/public/assets/styles/main.css
+++ b/public/assets/styles/main.css
@@ -2,6 +2,16 @@ body, .ui {
   font-family: Roboto, sans-serif !important;
 }
 
+#page_logo {
+  font-family: Raleway, sans-serif;
+  font-weight: 800;
+  font-size: 2.2rem;
+  color: #404041;
+}
+#page_logo .orange {
+  color: #F26721;
+}
+
 footer {
   flex: none;
   color: white;
@@ -9,7 +19,7 @@ footer {
   font-family: Roboto;
 }
 footer .dark-grey {
-  background-color: grey;
+  background-color: #404041;
 }
 footer .grid {
   margin: 0 !important;
diff --git a/resources/views/home/clientes.blade.php b/resources/views/home/clientes.blade.php
index f359b54..14e3f91 100644
--- a/resources/views/home/clientes.blade.php
+++ b/resources/views/home/clientes.blade.php
@@ -3,29 +3,33 @@
     CLIENTES
   </div>
   <div class="ui grid">
-    <div class="column ci">
-      <i class="left chevron big icon" id="left_arrow"></i>
-    </div>
-    <div class="fourteen wide column">
-      <div class="ui center aligned stackable grid" id="img_clientes">
-        <div class="row">
-          @for ($i = 0; $i < min(10, count($clientes)); $i += 2)
-            <div class="three wide column">
-              {!!$clientes[$i]!!}
-            </div>
-          @endfor
-        </div>
-        <div class="row">
-          @for ($i = 1; $i < min(10, count($clientes)); $i += 2)
-            <div class="three wide column">
-              {!!$clientes[$i]!!}
-            </div>
-          @endfor
-        </div>
+    <div class="two column row">
+      <div class="left alined column ci">
+        <i class="left chevron big icon" id="left_arrow"></i>
+      </div>
+      <div class="right aligned column ci">
+        <i class="right chevron big icon" id="right_arrow"></i>
       </div>
     </div>
-    <div class="column ci">
-      <i class="right chevron big icon" id="right_arrow"></i>
+    <div class="one column row">
+      <div class="column">
+        <div class="ui center aligned grid" id="img_clientes">
+          <div class="row">
+            @for ($i = 0; $i < min(12, count($clientes)); $i += 2)
+              <div class="five wide tablet two wide computer column">
+                {!!$clientes[$i]!!}
+              </div>
+            @endfor
+          </div>
+          <div class="row">
+            @for ($i = 1; $i < min(12, count($clientes)); $i += 2)
+              <div class="five wide tablet two wide computer column">
+                {!!$clientes[$i]!!}
+              </div>
+            @endfor
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -38,34 +42,36 @@
       @endforeach
     ]
     var current = 0
+    var rows = 2
+    var cols = 6
     function decreaseClientes() {
       $('#img_clientes').find('.row').find('.column:last-child').remove()
-      current -= 2
-      if (current < -8) {
-        current = clientes.length - 10
+      current -= rows
+      if (current < - cols * rows) {
+        current = clientes.length - (cols - 1) * rows
       }
       n = current
       if (n < 0) {
         n = clientes.length + n
       }
       $('#img_clientes').find('.row:first-child').prepend(
-        $('<div></div>').attr('class', 'three wide column').append(clientes[n])
+        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n])
       )
       $('#img_clientes').find('.row:last-child').prepend(
-        $('<div></div>').attr('class', 'three wide column').append(clientes[n + 1])
+        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n + 1])
       )
     }
     function increaseClientes() {
       $('#img_clientes').find('.row').find('.column:first-child').remove()
       current += 2
-      if (current > clientes.length - 10) {
-        current = -8
+      if (current > clientes.length - cols * rows) {
+        current = - (cols - 1) * rows
       }
       $('#img_clientes').find('.row:first-child').append(
-        $('<div></div>').attr('class', 'three wide column').append(clientes[current + 8])
+        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + (cols - 1) * rows])
       )
       $('#img_clientes').find('.row:last-child').append(
-        $('<div></div>').attr('class', 'three wide column').append(clientes[current + 9])
+        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + cols * rows - 1])
       )
     }
     $(document).ready(function() {
diff --git a/resources/views/home/contacto.blade.php b/resources/views/home/contacto.blade.php
index ea4a895..0d5ac5e 100644
--- a/resources/views/home/contacto.blade.php
+++ b/resources/views/home/contacto.blade.php
@@ -8,7 +8,7 @@
   </div>
   <div class="ui stackable two columns grid">
     <div class="column">
-      <form class="ui form" id="formulario" method="post" action="{{$urls->base}}/contacto">
+      <form class="ui form" id="formulario_contacto" method="post" action="{{$urls->base}}/contacto">
         <div class="field">
           <input type="text" name="nombre" placeholder="Nombre" />
         </div>
@@ -35,7 +35,7 @@
 @push('scripts')
   <script type="text/javascript">
     $(document).ready(function() {
-      $('#formulario').submit(function(e) {
+      $('#formulario_contacto').submit(function(e) {
         e.preventDefault()
 
         var nombre = $(this).find("[name='nombre']").val()
diff --git a/resources/views/home/eventos.blade.php b/resources/views/home/eventos.blade.php
index c924175..ecab45e 100644
--- a/resources/views/home/eventos.blade.php
+++ b/resources/views/home/eventos.blade.php
@@ -5,17 +5,17 @@
     </div>
     <div class="ui centered grid">
       <div class="center aligned column">
-        <div class="ui tabular compact menu">
-          <a class="active item" data-filter="none">Todos</a>
+        <div class="ui tabular stackable compact menu">
+          <a class="active item servicio" data-filter="none">Todos</a>
           @foreach ($servicios as $i => $servicio)
-            <a class="item" data-filter="{{$i}}">{{$servicio->titulo}}</a>
+            <a class="item servicio" data-filter="{{$i}}">{{$servicio->titulo}}</a>
           @endforeach
         </div>
       </div>
     </div>
-    <div class="ui stackable center aligned grid">
+    <div class="ui center aligned grid" id="eventos_cards">
       @foreach ($eventos as $evento)
-        <div class="four wide column">
+        <div class="eight wide tablet four wide computer column">
           <div class="ui basic segment">
             {!!$evento->image!!}
             <div class="ui center aligned header">
@@ -29,3 +29,53 @@
     </div>
   </div>
 </div>
+
+@push('scripts')
+  <script type="text/javascript">
+    var eventos = [
+      @foreach ($eventos as $evento)
+        {
+          titulo: '{{$evento->titulo}}',
+          image: '{!!$evento->image!!}',
+          empresa: '{{$evento->empresa}}',
+          servicio: {{$evento->servicio}}
+        },
+      @endforeach
+    ];
+    function changeEventos(filter) {
+      var grid = $('#eventos_cards')
+      grid.html('')
+      $.each(eventos, function(i, el) {
+        if (filter != 'none' && el.servicio != filter) {
+          return
+        }
+        grid.append(
+          $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
+            $('<div></div>').attr('class', 'ui basic segment').append(el.image).append(
+              $('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
+                $('<br />')
+              ).append(el.empresa)
+            )
+          )
+        )
+      })
+    }
+    var current_tab = 'none'
+    function changeTab(filter) {
+      $('.servicio.active').removeClass('active')
+      $(".servicio[data-filter='" + filter + "']").addClass('active')
+      current_tab = filter
+    }
+    $(document).ready(function() {
+      $('.servicio').click(function(e) {
+        e.preventDefault()
+        var filter = $(this).attr('data-filter')
+        if (filter == current_tab) {
+          return
+        }
+        changeTab(filter)
+        changeEventos(filter)
+      })
+    })
+  </script>
+@endpush
diff --git a/resources/views/home/testimonios.blade.php b/resources/views/home/testimonios.blade.php
index 2ecf216..a38b26e 100644
--- a/resources/views/home/testimonios.blade.php
+++ b/resources/views/home/testimonios.blade.php
@@ -32,9 +32,9 @@
         },
       @endforeach
     ]
-    var current = 0
+    var current_testimonio = 0
     function cambiar(id) {
-      if (id == current) {
+      if (id == current_testimonio) {
         return
       }
       $('#testimonio').html('').append(
@@ -42,15 +42,18 @@
       ).append(
         $('<div></div>').attr('class', 'ui header').html(testimonios[id].emisor)
       )
-      $('#marcador').find(".icon[data-id='" + current + "']").addClass('outline')
+      $('#marcador').find(".icon[data-id='" + current_testimonio + "']").addClass('outline')
       $('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
-      current = id
+      $('#marcador').find('.icon.outline').css('cursor', 'pointer')
+      $('#marcador').find('.icon:not(.outline)').css('cursor', 'default')
+      current_testimonio = id
     }
     $(document).ready(function() {
-      $('#marcador').find('.icon').css('cursor', 'pointer').click(function() {
+      $('#marcador').find('.icon').click(function() {
         var id = $(this).attr('data-id')
         cambiar(id)
       })
+      $('#marcador').find('.icon.outline').css('cursor', 'pointer')
     })
   </script>
 @endpush
diff --git a/resources/views/layout/footer.blade.php b/resources/views/layout/footer.blade.php
index e2bc714..c976ed1 100644
--- a/resources/views/layout/footer.blade.php
+++ b/resources/views/layout/footer.blade.php
@@ -3,13 +3,13 @@
     <div class="ui inverted container main">
       <div class="ui stackable grid">
         <div class="three columns row">
-          <div class="column">
+          <div class="middle aligned column">
             @include('layout.footer.contacto')
           </div>
-          <div class="column">
+          <div class="middle aligned column">
             @include('layout.footer.ubicacion')
           </div>
-          <div class="column">
+          <div class="middle aligned column">
             @include('layout.footer.redes')
           </div>
         </div>
diff --git a/resources/views/layout/footer/contacto.blade.php b/resources/views/layout/footer/contacto.blade.php
index 04a4edd..75c5541 100644
--- a/resources/views/layout/footer/contacto.blade.php
+++ b/resources/views/layout/footer/contacto.blade.php
@@ -1,5 +1,5 @@
 <div style="text-align: center;">
-  <a href="{{$urls->base}}/contacto">
+  <a href="{{$urls->base}}#contacto">
     <i class="big icon icon-contacto"></i>
     <p>
       <strong>
diff --git a/resources/views/layout/footer/redes.blade.php b/resources/views/layout/footer/redes.blade.php
index e69de29..d855bef 100644
--- a/resources/views/layout/footer/redes.blade.php
+++ b/resources/views/layout/footer/redes.blade.php
@@ -0,0 +1,17 @@
+<div class="ui stackable five columns center aligned grid">
+  <div class="column">
+    <i class="youtube big icon"></i>
+  </div>
+  <div class="column">
+    <i class="instagram big icon"></i>
+  </div>
+  <div class="column">
+    <i class="facebook big icon"></i>
+  </div>
+  <div class="column">
+    <i class="linkedin big icon"></i>
+  </div>
+  <div class="column">
+    <i class="twitter big icon"></i>
+  </div>
+</div>
diff --git a/resources/views/layout/footer/ubicacion.blade.php b/resources/views/layout/footer/ubicacion.blade.php
index 0e5c03f..22d71a1 100644
--- a/resources/views/layout/footer/ubicacion.blade.php
+++ b/resources/views/layout/footer/ubicacion.blade.php
@@ -1,5 +1,5 @@
 <div style="text-align: center;">
-  <a href="{{$urls->base}}/contacto">
+  <a href="{{$urls->base}}#contacto">
     <i class="big icon icon-ubicacion"></i>
     <p>
       <strong>
@@ -7,7 +7,7 @@
       </strong>
     </p>
   </a>
-  <a href="{{$urls->base}}/contacto">
+  <a href="{{$urls->base}}#contacto">
     <p>
       Av. Nueva Providencia 1945, Of. 919,
       <br />
diff --git a/resources/views/layout/menu.blade.php b/resources/views/layout/menu.blade.php
index 6398851..9317ed1 100644
--- a/resources/views/layout/menu.blade.php
+++ b/resources/views/layout/menu.blade.php
@@ -1,21 +1,16 @@
-<nav class="ui massive stackable center aligned text fluid three item grey menu">
-  <nav class="three item stackable menu">
+<nav class="ui massive stackable center aligned text three item grey menu">
+  <div class="left three item menu">
     <a class="item" href="{{$urls->base}}#servicios">Servicios</a>
     <a class="item" href="{{$urls->base}}#nosotros">Nosotros</a>
     <a class="item" href="{{$urls->base}}#clientes">Clientes</a>
-  </nav>
+  </div>
   <a class="item" href="{{$urls->base}}">
     <div class="ui header" id="page_logo">
       Total<span class="orange">Sport</span>
     </div>
   </a>
-  <nav class="two item stackable menu">
+  <div class="right two item menu">
     <a class="item" href="{{$urls->base}}#eventos">Eventos</a>
     <a class="item" href="{{$urls->base}}#contacto">Contacto</a>
-  </nav>
+  </div>
 </nav>
-
-@push('styles')
-  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/header.css" />
-  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" />
-@endpush