diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss
index 6e251d6dd..9e991d89b 100644
--- a/app/assets/stylesheets/debates.scss
+++ b/app/assets/stylesheets/debates.scss
@@ -1,6 +1,8 @@
 // Table of Contents
 //
 // 01. Variables
+//  01.1. Fonts
+//  01.2. Colors
 // 02. Global styles
 // 03. Header
 // 04. Footer
@@ -17,174 +19,170 @@
 // 01. Variables
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
+// 01.1. Fonts
+// - - - - - - - - - - - -
+
 $font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $line-height: rem-calc(24);
 
+// 01.2. Colors
+// - - - - - - - - - - - -
+
 $background:        #E9E9E9;
 $border:            #DEE0E3;
-$brand:				#0077B9;
+$brand:             #0077B9;
 
 $debates:           #008CCF;
 
-$comments-bg:       #FAF9F8;
+$comments-bg:       #F1F1F1;//FAF9F8;
 $comments-info:     #A5B2B9;
 $comments-text:     #3F4549;
 
 
-$header-color:		#292B33;
+$header-color:      #292B33;
 $link:              #0077B9;
 
 $tags-bg:           #FAFAFA;
 $tags-border:       #F0F0F0;
 $tags-color:        #8F8F8F;
 
-$text-color:        #919399;
+$text-color:        #222222;
 $text-medium:       #999999;
-$text-light:        #a3a6ad;
+$text-light:        #A3A6AD;
 
-$votes-background:  #EDEDED;
-$votes-border:      #DEE0E3;
-$votes-dislike:     #EF8585;
-$votes-dislike-b:   #D26463;//FF7978;
+$votes:             #A0AEC4;
+$votes-background:  #F0F0F0;
+$votes-border:      #D8D8D8;
+$votes-unlike:      #EF8585;
 $votes-like:        #7BD2A8;
-$votes-like-b:      #56A47D;
+$votes-text:        #54627C;
 
 // 02. Global styles
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 *, html {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-    background: white;
-    font-family: $font-family-sans-serif;
-    font-size: rem-calc(13);
-    font-weight: normal;
-
-    p {
-        font-weight: normal;
-    }
+  background: white;
+  font-family: $font-family-sans-serif;
+  font-size: rem-calc(13);
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
 }
 
 .row {
-    max-width: 1170px;
+  max-width: 1170px;
 }
 
 .row-full {
-    max-width: 100% !important;
+  max-width: 100% !important;
 }
 
 .clear {
-    clear: both;
+  clear: both;
 }
 
 .inline-block {
-    display: inline-block;
+  display: inline-block;
 }
 
-::selection {
-    background: $brand;
-    color: white;
-}
-
-::-moz-selection {
-    background: $brand;
-    color: white;
+::selection, ::-moz-selection {
+  background: $brand;
+  color: white;
 }
 
 // 03. Header
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 header {
-    background: url('home_header_bg.jpg');
-    background-position: 50% 50%;
-    background-size: cover;
-    min-height: $line-height*20;
+  background: url('home_header_bg.jpg');
+  background-position: 50% 50%;
+  background-size: cover;
+  min-height: $line-height*20;
 
-    &.results {
-        min-height: $line-height*8;
-    }
+  &.results {
+    min-height: $line-height*8;
+  }
 
-    h1 {
-        color: white;
-        font-size: rem-calc(45);
-        font-weight: bolder;
-        line-height: $line-height*3;
-        margin: $line-height 0 0 0;
-        padding: 0;
-    }
+  h1 {
+    color: white;
+    font-size: rem-calc(45);
+    font-weight: bolder;
+    line-height: $line-height*3;
+    margin: $line-height 0 0 0;
+    padding: 0;
+  }
 
-    h2 {
-        @extend h1;
-        font-size: rem-calc(24);
-        font-weight: normal;
-        line-height: $line-height*2;
-        margin: 0;
-    }
+  h2 {
+    @extend h1;
+    font-size: rem-calc(24);
+    font-weight: normal;
+    line-height: $line-height*2;
+    margin: 0;
+  }
 
-    .button {
-        background: none;
-        border: 2px solid white;
-        color: white;
-        margin-top: $line-height*2;
-    }
+  .button {
+    color: white;
+    margin-top: $line-height*2;
+  }
 }
 
 .contain-to-grid {
-    background: none;
+  background: none;
 }
 
 .top-bar {
-    background: white;
-    color: $header-color;
-    height: $line-height*4;
-    max-width: 1170px !important;
+  background: white;
+  color: $header-color;
+  height: $line-height*4;
+  max-width: 1170px !important;
 
-    .name a {
-        color: black;
-        font-family: 'Lato';
-        font-size: rem-calc(36);
-        font-weight: lighter;
-        line-height: $line-height*4;
-        padding-left: 0;
+  .name a {
+    color: black;
+    font-family: 'Lato';
+    font-size: rem-calc(36);
+    font-weight: lighter;
+    line-height: $line-height*4;
+    padding-left: 0;
 
-        span {
-            color: $brand;
-            font-size: rem-calc(24);
-            font-weight: normal;
-        }
-
-        img {
-            margin-right: $line-height/2;
-        }
+    span {
+      color: $brand;
+      font-size: rem-calc(24);
+      font-weight: normal;
     }
+
+    img {
+      margin-right: $line-height/2;
+    }
+  }
 }
 
 .top-bar-section {
 
-    li:not(.has-form) a:not(.button) {
-        background: white;
-        color: $brand;
-        line-height: $line-height*4;
-    }
+  li:not(.has-form) a:not(.button) {
+    background: white;
+    color: $brand;
+    line-height: $line-height*4;
+  }
 
-    li.active:not(.has-form) a:not(.button) {
-        height: $line-height*4;
-        line-height: $line-height*4;
-    }
+  li.active:not(.has-form) a:not(.button) {
+    height: $line-height*4;
+    line-height: $line-height*4;
+  }
 }
 
 .top-links {
-    color: white;
-    font-size: rem-calc(14);
-    height: $line-height*2;
-    padding: $line-height/2 0;
+  color: white;
+  font-size: rem-calc(14);
+  height: $line-height*2;
+  padding: $line-height/2 0;
 
-    a {
-        color: white;
-    }
+  a {
+    color: white;
+  }
 }
 
 // 04. Footer
@@ -197,315 +195,448 @@ header {
 // 05. Debates
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
+aside {
+  .button {
+    margin-top: $line-height;
+  }
+}
+
 // 05.1. Debates Index
 // - - - - - - - - - - - -
 
-.debates-index {
-    margin-top: $line-height;
+.debates-list {
+  margin-top: $line-height;
 }
 
-.debate {
+.debates-featured {
+
+  .debate {
 
     .panel {
-        background: white;
-        box-shadow: 0 2px 0 rgba(0,0,0,.1);
+      background: white;
+      box-shadow: 0 2px 0 rgba(0,0,0,.1);
+      padding: rem-calc(20) rem-calc(20) 0 rem-calc(20);
 
-        .fi-comment-quotes {
-            color: $debates;
-            font-size: rem-calc(36);
-            line-height: $line-height;
-            margin-bottom: $line-height*0.77;
+      .debate-content {
+        min-height: $line-height*11;
+      }
+
+      .label {
+        background: none;
+        clear: both;
+        color: $debates;
+        display: block;
+        font-weight: bold;
+        text-transform: uppercase;
+        padding: 0;
+      }
+
+      .icon-quote-right {
+        color: $debates;
+        font-size: rem-calc(30);
+        line-height: $line-height;
+        position: absolute;
+        right: $line-height;
+        top: $line-height/2;
+      }
+
+      .icon-chat-bubble-two {
+        vertical-align: middle;
+      }
+
+      h3 {
+        margin: rem-calc(12) 0 0 0;
+        font-weight: bold;
+
+        a {
+          clear: both;
+          color: $header-color;
+          display: block;
+          font-size: rem-calc(16);
+          line-height: $line-height;
         }
+      }
 
-        .fi-price-tag {
-            color: $text-color;
-            font-size: rem-calc(18);
-            line-height: $line-height;
+      .debate-info {
+        color: $text-light;
+        font-weight: lighter;
+        margin-bottom: 0;
+
+        .icon-chat-bubble-two {
+          font-size: rem-calc(16);
         }
+      }
 
-        .label {
-            margin-top: $line-height/4;
-        }
-
-        h3 {
-            margin: 0;
-            font-weight: bold;
-
-            a {
-                clear: both;
-                color: $header-color;
-                display: block;
-                font-size: rem-calc(16);
-                line-height: $line-height;
-            }
-        }
-
-        p {
-            color: $text-color;
-            font-size: rem-calc(13);
-            line-height: $line-height;
-            margin-bottom: $line-height;
-        }
+      p {
+        color: $text-color;
+        font-size: rem-calc(13);
+        line-height: $line-height;
+        margin-bottom: $line-height/2;
+      }
     }
 
     .votes {
+      border-top: 1px solid $votes-border;
+      padding: $line-height/2 0;
+
+      .icon-like {
         background: $votes-background;
-        margin: -5px -20px -20px -20px;
-        padding: 1.25rem 1.25rem 0 1.25rem;
+        border: 1px solid $votes-border;
+        border-radius: rem-calc(3);
+        color: $votes;
+        display: inline-block;
+        font-size: rem-calc(30);
+        line-height: rem-calc(30);
+        padding: rem-calc(6) rem-calc(12);
+        //when active => color: $votes-like;
 
-        .fi-like {
-            color: $votes-like;
-            font-size: rem-calc(48);
-            line-height: $line-height*2;
+        &:hover {
+          background: white;
+          color: $brand;
         }
+      }
 
-        .fi-dislike {
-            color: $votes-dislike;
-            display: inline-block;
-            font-size: rem-calc(48);
-            line-height: $line-height*2;
-            padding-top: $line-height/3;
+      .icon-unlike {
+        background: $votes-background;
+        border: 1px solid $votes-border;
+        border-radius: rem-calc(3);
+        color: $votes;
+        display: inline-block;
+        font-size: rem-calc(30);
+        line-height: rem-calc(30);
+        padding: rem-calc(6) rem-calc(12);
+        //when active => color: $votes-unlike;
+
+        &:hover {
+          background: white;
+          color: $brand;
         }
+      }
 
-        .in-favor {
-            color: $votes-like;
-            line-height: rem-calc(48);
-            vertical-align: top;
+      .like {
+        line-height: rem-calc(48);
+        vertical-align: super;
 
-            span {
-                display: inline-block;
-                line-height: 48px;
-                padding-top: 5px;
-                vertical-align: top;
-            }
+        span {
+          color: $votes-text;
+          display: inline-block;
+          font-size: rem-calc(18);
+          font-weight: bold;
+          line-height: $line-height*2;
+          padding-left: rem-calc(6);
+          vertical-align: top;
         }
+      }
 
-        .against {
-            @extend .in-favor;
-            color: $votes-dislike;
-            display: inline-block;
-        }
+      .unlike {
+        @extend .like;
+      }
 
-        .total-votes {
-            font-size: rem-calc(12);
-            line-height: $line-height*2;
-        }
+      .total-votes {
+        color: $votes-text;
+        line-height: $line-height*2;
+      }
 
-        .divider {
-            background: rgba(0,0,0, .1);
-            display: inline-block;
-            height: 3rem;
-            margin: 0 .5rem;
-            width: 1px;
-        }
+      .divider {
+        margin: 0 rem-calc(3);
+      }
     }
+  }
+}
+
+.debates-index {
+  @extend .debates-featured;
+
+  .debate {
+    margin-bottom: rem-calc(6);
+
+    .panel {
+      border: 0;
+      box-shadow: none;
+      margin-bottom: 0;
+      padding: 0 rem-calc(6);
+
+      p {
+        text-align: justify;
+      }
+
+      .debate-content {
+        min-height: 0;
+      }
+
+      .icon-quote-right {
+        font-size: rem-calc(14);
+        position: initial;
+        vertical-align: bottom;
+      }
+
+      .label {
+        line-height: $line-height;
+        margin-right: rem-calc(5);
+      }
+    }
+
+    .votes {
+      border: 0;
+      margin-top: $line-height;
+
+      .like {
+
+        span {
+          color: $votes-text;
+          display: block;
+          font-size: rem-calc(18);
+          font-weight: bold;
+          line-height: $line-height*1.5;
+        }
+      }
+    }
+  }
 }
 
 // 05.2. Debates Show
 // - - - - - - - - - - - -
 
 .debate-show {
-    color: $text-medium;
-    margin-top: $line-height;
-    margin-bottom: $line-height*2;
-    padding: 0 $line-height/2;
+  margin-top: $line-height;
+  padding: 0 rem-calc(12);
 
-    .back {
-        color: $text-light;
-        font-size: rem-calc(13);
-        line-height: $line-height;
+  .back {
+    color: $text-light;
+    font-size: rem-calc(13);
+    line-height: $line-height;
+  }
+
+  .icon-angle-left {
+   @extend .back;
+  }
+
+  h1 {
+    clear: both;
+    font-size: rem-calc(24);
+    font-weight: bold;
+    line-height: $line-height*2;
+    margin: 0;
+  }
+
+  .debate-info {
+    clear: both;
+    color: $text-light;
+    font-weight: lighter;
+    line-height: $line-height*2;
+    text-align: justify;
+
+    .bullet {
+      color: $border;
     }
 
-    h1 {
-        clear: both;
-        font-size: rem-calc(24);
+    p {
+      font-size: rem-calc(14);
+      line-height: $line-height;
+      margin-bottom: 0;
+    }
+  }
+
+  .author-photo {
+    border-radius: 2px;
+    display: inline-block;
+    height: 32px;
+    line-height: $line-height*2;
+    margin-right: $line-height/4;
+    vertical-align: middle;
+    width: 32px;
+  }
+
+  .author {
+    color: $text-color;
+    font-weight: bold;
+  }
+
+  .votes {
+    padding-top: 0;
+
+    @media (min-width: 480px) {
+      padding-top: $line-height*1.5;
+    }
+
+    h3 {
+      border-bottom: 1px solid $border;
+      font-size: rem-calc(18);
+      margin: 0 0 $line-height 0;
+      text-transform: uppercase;
+    }
+
+    .icon-like {
+      background: $votes-background;
+      border: 1px solid $votes-border;
+      border-radius: rem-calc(3);
+      color: $votes;
+      display: inline-block;
+      font-size: rem-calc(30);
+      line-height: rem-calc(30);
+      padding: rem-calc(6) rem-calc(12);
+      //when active => color: $votes-like;
+
+      &:hover {
+        background: white;
+        color: $brand;
+      }
+    }
+
+    .icon-unlike {
+      background: $votes-background;
+      border: 1px solid $votes-border;
+      border-radius: rem-calc(3);
+      color: $votes;
+      display: inline-block;
+      font-size: rem-calc(30);
+      line-height: rem-calc(30);
+      padding: rem-calc(6) rem-calc(12);
+      //when active => color: $votes-unlike;
+
+      &:hover {
+        background: white;
+        color: $brand;
+      }
+    }
+
+    .like {
+
+      span {
+        color: $votes-text;
+        display: block;
+        font-size: rem-calc(18);
         font-weight: bold;
-        line-height: $line-height*1.3333;
-        margin: 0;
-        padding-top: $line-height/2;
+        line-height: $line-height*1.5;
+      }
     }
 
-    .debate-info {
-        color: $text-light;
-        font-weight: lighter;
-        line-height: $line-height*2;
-        margin-bottom: $line-height*0.5;
-        text-align: justify;
-
-        span {
-            color: $border;
-        }
-
-        p {
-            font-size: rem-calc(14);
-            line-height: $line-height;
-            margin-bottom: 0;
-        }
+    .unlike {
+      @extend .like;
     }
 
-    .author-photo {
-        border-radius: 2px;
-        display: inline-block;
-        height: 32px;
-        line-height: $line-height*2;
-        margin-right: $line-height/4;
-        vertical-align: middle;
-        width: 32px;
+    .total-votes {
+      color: $votes-text;
+      font-size: rem-calc(14);
+      line-height: $line-height;
     }
 
-    .votes {
-        border: 1px solid $votes-border;
-        box-shadow: 0 2px 0 rgba(0,0,0,.1);
-        border-radius: 3px;
-        padding: $line-height/2;
-
-        .fi-like {
-            background: $votes-like;
-            border: 1px solid $votes-like-b;
-            border-radius: $line-height*2.5;
-            color: white;
-            display: block;
-            font-size: rem-calc(48);
-            height: $line-height*2.5;
-            line-height: $line-height*2.5;
-            width: $line-height*2.5;
-        }
-
-        .fi-dislike {
-            background: $votes-dislike;
-            border: 1px solid $votes-dislike-b;
-            border-radius: $line-height*2.5;
-            color: white;
-            display: block;
-            font-size: rem-calc(48);
-            height: $line-height*2.5;
-            line-height: $line-height*2.5;
-            width: $line-height*2.5;
-        }
-
-        .in-favor {
-            color: $votes-like;
-            line-height: rem-calc(48);
-
-            span {
-                display: inline-block;
-                font-size: rem-calc(18);
-                font-weight: bold;
-                line-height: $line-height;
-                padding-top: $line-height/4;
-                vertical-align: top;
-            }
-        }
-
-        .against {
-            @extend .in-favor;
-            color: $votes-dislike;
-        }
-
-        .total-votes {
-            font-size: rem-calc(14);
-            margin: 0;
-        }
-
-        .divider {
-            background: rgba(0,0,0,.05);
-            display: inline-block;
-            height: $line-height*4;
-            margin: 0 $line-height;
-            width: 1px;
-        }
+    .divider {
+      margin: 0 rem-calc(12);
     }
+  }
 
-    .publish-comment {
-        margin-top: $line-height;
-    }
+  .leave-comment {
+    display: inline-block;
+    margin-top: $line-height;
+  }
 }
 
 // 06. Comments
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .comments {
-    background: $comments-bg;
-    background-image: url('comments_divider.png');
-    background-repeat: repeat-x;
-    padding-top: $line-height;
-    padding-bottom: $line-height*4;
+  background: $comments-bg;
+  background-image: url('comments_divider.png');
+  background-repeat: repeat-x;
+  padding-top: $line-height;
+  padding-bottom: $line-height*4;
 
-    h2 {
-        margin: 0;
-        font-weight: bold;
+  h2 {
+    margin: 0;
+    font-weight: bold;
+  }
+
+  .comment {
+    margin: $line-height/4 0;
+
+    p {
+      color: $comments-text;
+      font-size: rem-calc(15);
+      margin-bottom: 0;
     }
 
-    .comment {
-        margin: $line-height/4 0;
-
-        p {
-            color: $comments-text;
-            font-size: rem-calc(15);
-            margin-bottom: 0;
-        }
-
-        a {
-            color: $comments-info;
-        }
-
-        .user-photo {
-            border-radius: 2px;
-            display: inline-block;
-            height: 32px;
-            line-height: $line-height*2;
-            margin-right: $line-height/4;
-            vertical-align: top;
-            width: 32px;
-        }
-
-        .comment-body {
-            margin-left: $line-height*1.6;
-
-            .reply {
-                font-size: rem-calc(12);
-                font-weight: lighter;
-            }
-        }
-
-        .comment-children {
-            border-left: 1px dotted $border;
-            margin-left: $line-height*1.6;
-            padding-left: $line-height/4;
-
-            @media only screen and (max-width: 40em) {
-                margin-left: $line-height/1.5;
-            }
-        }
-
-        .comment-info {
-            color: $comments-info;
-            font-size: rem-calc(13);
-            font-weight: lighter;
-            vertical-align: middle;
-        }
+    a {
+      color: $comments-info;
     }
+
+    .user-photo {
+      border-radius: 2px;
+      display: inline-block;
+      height: 32px;
+      line-height: $line-height*2;
+      margin-right: $line-height/4;
+      vertical-align: top;
+      width: 32px;
+    }
+
+    .comment-body {
+      margin-left: $line-height*1.6;
+
+      .reply {
+        font-size: rem-calc(12);
+        font-weight: lighter;
+      }
+    }
+
+    .comment-children {
+      border-left: 1px dotted $border;
+      margin-left: $line-height*1.6;
+      padding-left: $line-height/4;
+
+      @media only screen and (max-width: 40em) {
+        margin-left: $line-height/1.5;
+      }
+    }
+
+    .comment-info {
+      color: $comments-info;
+      font-size: rem-calc(13);
+      font-weight: lighter;
+      vertical-align: middle;
+    }
+  }
 }
 
 // 07. Tags
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.tags a {
+.tags {
+
+  a {
     background: $tags-bg;
     border: 1px solid $tags-border;
     border-radius: 3px;
     color: $tags-color;
+    display: inline-block;
     font-size: rem-calc(13);
-    margin-bottom: 8px;
-    margin-right: $line-height/3;
-    padding: $line-height/4 $line-height/3;
+    margin-bottom: rem-calc(8);
+    margin-right: rem-calc(8);
+    padding: 0 rem-calc(6);
+
 
     &:hover {
-        color: $link;
-        cursor: pointer;
-        background: #e5f1f8;
-        border: 1px solid $brand;
+      color: $link;
+      cursor: pointer;
+      background: #e5f1f8;
+      border: 1px solid $brand;
     }
+  }
+}
+
+.tag-cloud {
+  @extend .tags;
+
+  h3 {
+    font-size: rem-calc(24);
+    font-weight: bold;
+    line-height: $line-height*2;
+    margin: 0;
+  }
+
+  a {
+    padding: $line-height/4 $line-height/3;
+  }
 }
 
 // 08. Login and Sign Up
@@ -515,57 +646,22 @@ header {
 // - - - - - - - - - - - -
 
 .auth {
-    background: $background;
-    box-shadow: 0px -4px 5px $background;
-    min-height: $line-height*20;
+  background: $background;
+  box-shadow: 0px -4px 5px $background;
+  min-height: $line-height*20;
 
-    .panel {
-        background: white;
-        margin-top: $line-height*2;
+  .panel {
+    background: white;
+    margin-top: $line-height*2;
 
-        h1 {
-            font-size: rem-calc(30);
-            font-weight: bolder;
-        }
+    h1 {
+      font-size: rem-calc(30);
+      font-weight: bolder;
     }
+  }
 }
 
 
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/app/views/debates/_debate.html.erb b/app/views/debates/_debate.html.erb
index 4253143a6..93d4ad209 100644
--- a/app/views/debates/_debate.html.erb
+++ b/app/views/debates/_debate.html.erb
@@ -1,33 +1,39 @@
-<div id="debate-<%= debate.id %>" class="small-12 medium-6 large-4 column debate end">
+<div class="debates-index">
+  <div id="debate-<%= debate.id %>" class="debate">
     <div class="panel">
-        <i class="fi-comment-quotes left"></i>
-        <span class="label radius right"><%= t("debates.debate.debate") %></span>
+      <div class="row">
+        <div class="small-12 medium-9 column">
+          <div class="debate-content">
+            <span class="label left"><%= t("debates.debate.debate") %></span>
+            <i class="icon-quote-right"></i>
+            <h3><%= link_to debate.title, debate %></h3>
+            <p class="debate-info">
+              <i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(debate.comment_threads.count, t("debates.debate.comment"), t("debates.debate.comments")) %>
+            </p>
+            <p><%= sanitize(truncate(debate.description, length: 200).html_safe) %></p>
+            <%= render "shared/tags", debate: debate %>
+          </div>
+        </div>
+        <div class="small-12 medium-3 column">
+          <div class="text-center votes">
+            <%= link_to debate_votes_path(debate, value: 'yes'), class: "like inline-block", title: t('votes.agree'), method: "post" do %>
+              <i class="icon-like"></i>
+              <span><%= percentage('likes', debate) %></span>
+            <% end %>
 
-        <h3><%= link_to debate.title, debate %></h3>
-        <p>Por <%= debate.author.name %> el <%= l debate.created_at.to_date %></p>
-        <p><%= sanitize(debate.description.html_safe) %></p>
+            <span class="divider"></span>
 
-        <p><%= render 'shared/tags', debate: debate %></p>
-
-		<div class="row votes">
-        	<div class="small-8 column">
-
-	    		<%= link_to debate_votes_path(debate, value: 'yes'), class: 'in-favor', method: "post" do %>
-	    			<i class="fi-like"></i>
-	    			<span><%= percentage('likes', debate) %></span>
-	    		<% end %>
-
-	    		<span class="divider"></span>
-
-	    		<%= link_to debate_votes_path(debate, value: 'no'), class: 'against', method: "post" do %>
-	    			<i class="fi-dislike"></i>
-	    			<span><%= percentage('dislikes', debate) %></span>
-	    		<% end %>
-			</div>
-
-			<div class="small-4 column">
-    			<p class="total-votes right"><%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %></p>
-    		</div>
-    	</div>
+            <%= link_to debate_votes_path(debate, value: 'no'), class: "unlike inline-block", title: t('votes.disagree'), method: "post" do %>
+              <i class="icon-unlike"></i>
+              <span><%= percentage('dislikes', debate) %></span>
+            <% end %>
+            <br>
+            <span class="total-votes">
+              <%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
-</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/views/debates/index.html.erb b/app/views/debates/index.html.erb
index f48884c24..b88d5e9bd 100644
--- a/app/views/debates/index.html.erb
+++ b/app/views/debates/index.html.erb
@@ -1,9 +1,59 @@
-<section id='debates' class="debates-index">
-    <div class="row">
-        <%= render @debates %>
-    </div>
-</section>
+<section id="debates" role="main">
+  <div class="row">
+  <!-- HTML for debates featured (3) -->
+    <% debate = @debates.first %>
+    <div class="small-12 medium-4 column debates-list">
+      <div class="row">
+        <div class="debates-featured">
+          <div id="debate-<%= debate.id %>" class="small-12 column end debate">
+            <div class="panel">
+              <div class="debate-content">
+                <span class="label left"><%= t("debates.debate.debate") %></span>
+                <i class="icon-quote-right right"></i>
 
-<aside>
-    <%= render 'shared/tag_cloud' %>
-</aside>
+                <h3><%= link_to debate.title, debate %></h3>
+                <p class="debate-info">
+                  <i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
+                </p>
+                <p><%= sanitize(truncate(debate.description, length: 200).html_safe) %></p>
+                <p><%= render "shared/tags", debate: debate %></p>
+              </div>
+
+              <div class="row votes">
+                <div class="small-12 column">
+                  <%= link_to debate_votes_path(debate, value: "yes"), class: "like", title: t('votes.agree'), method: "post" do %>
+                    <i class="icon-like"></i>
+                    <span><%= percentage('likes', debate) %></span>
+                  <% end %>
+
+                  <span class="divider"></span>
+
+                  <%= link_to debate_votes_path(debate, value: "no"), class: "unlike", title: t('votes.disagree'), method: "post" do %>
+                    <i class="icon-unlike"></i>
+                    <span><%= percentage('dislikes', debate) %></span>
+                  <% end %>
+
+                  <span class="total-votes right">
+                    <%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <!-- HTML for debates featured (3) -->
+    <div class="small-12 medium-9 column debates-list">
+      <%= render @debates %>
+    </div>
+    <div class="small-12 medium-3 column">
+      <aside role="complementary">
+        <%= link_to t("debates.index.create_debate"), new_debate_path, class: 'button radius' %>
+        <%= render "shared/tag_cloud" %>
+      </aside>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb
index c9ce7abf1..76c76e71c 100644
--- a/app/views/debates/show.html.erb
+++ b/app/views/debates/show.html.erb
@@ -1,42 +1,36 @@
 <section class="debate-show">
-
-    <div id="debate-<%= @debate.id %>" class="row">
-
-        <div class="small-12 medium-9 column">
-
-            <%= link_to "&laquo;&nbsp;".html_safe + t("debates.show.back_link"), debates_path, class: 'left back' %>
-
-            <h1><%= @debate.title %></h1>
-            <div class="debate-info">
-
-                <%= image_tag('user_default.jpg', class: 'author-photo', size: '32x32') %>
-
-                <%= @debate.author.name %> <span>&nbsp;&bullet;&nbsp;</span> <%= l @debate.created_at.to_date %> <span>&nbsp;&bullet;&nbsp;</span> <%= pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
-            </div>
-            <div class="debate-description">
-              <%= @debate.description.html_safe %>
-            </div>
-            <p><%= render 'shared/tags', debate: @debate %></p>
-        </div>
-
-      <div id="votes" class="votes small-12 medium-3 column">
-        <%= render 'votes/votes' %>
+  <div id="debate-<%= @debate.id %>" class="row">
+    <div class="small-12 medium-9 column">
+      <i class="icon-angle-left left"></i>&nbsp;<%= link_to t("debates.show.back_link"), debates_path, class: 'left back' %>
+      <div class="debate-info">
+        <%= image_tag('user_default.jpg', class: 'author-photo', size: '32x32') %>
+        <span class="author"><%= @debate.author.name %></span><span class="bullet">&nbsp;&bullet;&nbsp;</span> <%= l @debate.created_at.to_date %> <span class="bullet">&nbsp;&bullet;&nbsp;</span><i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
+      </div>
+      <h1><%= @debate.title %></h1>
+      <p><%= @debate.description %></p>
+      <p><%= render 'shared/tags', debate: @debate %></p>
+    </div>
+    <div id="votes" class="small-12 medium-3 column votes">
+      <%= render 'votes/votes' %>
+      <div class="text-center">
+        <%= link_to t("debates.show.leave_comment"), "#comments", class: "leave-comment" %>
       </div>
     </div>
+  </div>
 </section>
 
 <section class="row-full comments">
-    <div class="row">
-        <div id="comments" class="small-12 column">
-            <h2><%= t("debates.show.comments") %></h2>
-                <div>
-                    <%= t("debates.show.leave_comment") %>
-                    <%= render 'comments/form', parent: @debate %>
-                </div>
-            <%= render @debate.root_comments %>
+  <div class="row">
+    <div id="comments" class="small-12 column">
+      <h2><%= t("debates.show.comments") %></h2>
+        <div>
+          <%= t("debates.show.leave_comment") %>
+          <%= render 'comments/form', parent: @debate %>
         </div>
-        <% if current_user && @debate.editable_by?(current_user) %>
-            <%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), :class => 'button radius right' %>
-        <% end %>
+      <%= render @debate.root_comments %>
     </div>
-</section>
+    <% if current_user && @debate.editable_by?(current_user) %>
+      <%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), :class => 'button radius right' %>
+    <% end %>
+  </div>
+</section>
\ No newline at end of file
diff --git a/app/views/shared/_tag_cloud.html.erb b/app/views/shared/_tag_cloud.html.erb
index bb61c5a4d..c113a76bb 100644
--- a/app/views/shared/_tag_cloud.html.erb
+++ b/app/views/shared/_tag_cloud.html.erb
@@ -1,5 +1,6 @@
-<div id="tag-cloud">
+<div id="tag-cloud" class="tag-cloud">
+  <h3><%= t("shared.tags_cloud.tags") %></h3>
   <% tag_cloud Debate.tag_counts, %w[s m l] do |tag, css_class| %>
     <%= link_to sanitize("#{tag.name}(#{tag.taggings_count})"), debates_path(tag: tag.name), class: css_class %>
   <% end %>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/views/votes/_votes.html.erb b/app/views/votes/_votes.html.erb
index fd2704ed4..b88de32a9 100644
--- a/app/views/votes/_votes.html.erb
+++ b/app/views/votes/_votes.html.erb
@@ -1,23 +1,25 @@
-<div class="small-12 column text-center">
-  <div id="in_favor" class="inline-block">
-    <%= link_to debate_votes_path(@debate, value: 'yes'), class: 'in-favor', method: "post", remote: true do %>
-      <i class="fi-like"></i>
-      <span><%= percentage('likes', @debate) %></span>
-    <% end %>
-  </div>
-
-  <span class="divider"></span>
-
-  <div id="against" class="inline-block">
-    <%= link_to debate_votes_path(@debate, value: 'no'), class: 'against', method: "post", remote: true do %>
-      <i class="fi-dislike"></i>
-      <span><%= percentage('dislikes', @debate) %></span>
-    <% end %>
-  </div>
-</div>
-
-<div class="small-12 column text-center">
-  <p class="total-votes">
+<div class="small-12 column">
+  <p class="total-votes right">
     <%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
   </p>
-</div>
+
+  <h3><%= t("votes.supports") %></h3>
+
+  <div class="text-center">
+    <div id="in_favor" class="inline-block">
+      <%= link_to debate_votes_path(@debate, value: 'yes'), class: "like", title: t('votes.agree'), method: "post", remote: true do %>
+        <i class="icon-like"></i>
+        <span><%= percentage('likes', @debate) %></span>
+      <% end %>
+    </div>
+
+    <span class="divider"></span>
+
+    <div id="against" class="inline-block">
+      <%= link_to debate_votes_path(@debate, value: 'no'), class: "unlike", title: t('votes.disagree'), method: "post", remote: true do %>
+        <i class="icon-unlike"></i>
+        <span><%= percentage('dislikes', @debate) %></span>
+      <% end %>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 7842b7e0b..75e5bd1af 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -12,10 +12,17 @@ en:
       create_debate: Create a debate
       my_account_link: My account
   debates:
+    index:
+      create_debate: Create a debate
     debate:
       debate: Debate
       vote: vote
       votes: votes
+      comment: Comment
+      comments: Comments
+      agree: I agree
+      disagree: I disagree
+      leave_comment: Comment
     form:
       one_error: error
       plural_errors: errors
@@ -45,9 +52,15 @@ en:
     reply_link: Reply
     reply_button: Publish reply
   votes:
+    agree: I agree
+    disagree: I disagree
+    supports: Supports
     notice_thanks: "Thanks for voting."
     notice_already_registered: "Your vote is already registered."
   account:
     show:
       title: "My account"
       save_changes_submit: "Save changes"
+  shared:
+    tags_cloud:
+        tags: Tags
diff --git a/config/locales/es.yml b/config/locales/es.yml
index eb36d241a..1cb2dd4c3 100644
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -12,10 +12,16 @@ es:
       create_debate: Crea un debate
       my_account_link: Mi cuenta
   debates:
+    index:
+      create_debate: Crea un debate
     debate:
       debate: Debate
       vote: voto
       votes: votos
+      comment: Comentario
+      comments: Comentarios
+      agree: Estoy de acuerdo
+      disagree: No estoy de acuerdo
     form:
       one_error: error
       plural_errors: errores
@@ -45,9 +51,15 @@ es:
     reply_link: Responder
     reply_button: Publicar respuesta
   votes:
+    agree: Estoy de acuerdo
+    disagree: No estoy de acuerdo
+    supports: Apoyos
     notice_thanks: "Gracias por votar."
     notice_already_registered: "Tu voto ya ha sido registrado."
   account:
     show:
       title: "Mi cuenta"
       save_changes_submit: "Guardar cambios"
+  shared:
+    tags_cloud:
+        tags: Etiquetas