diff --git a/main/css/chamilo/default.css b/main/css/chamilo/default.css
index cac7fc4a29..c534c8b1b3 100644
--- a/main/css/chamilo/default.css
+++ b/main/css/chamilo/default.css
@@ -84,8 +84,8 @@ a:active {
 .nav-list > li > a {
     font-size: 14px;
     padding-bottom: 6px;
-    padding-left: 15px;
-    padding-right: 15px;
+   /* padding-left: 15px;
+    padding-right: 15px;*/
     padding-top: 6px;
 }
 .controls .btn{
@@ -246,6 +246,14 @@ a:active {
     text-indent: -9000px;
     z-index: 1;
 }
+/*ICON INBOX*/
+.home-icon{
+  background:url(images/);
+}
+
+
+/* END ICON INBOX */
+
 /*CSS SLIDER ANUNCIOS*/
 
 .pagerslide h2{
@@ -312,7 +320,7 @@ a:active {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
   margin-bottom: 20px;
   min-height: 20px;
-  padding: 19px;
+  padding: 20px 10px;
 }
 .sidebar-nav img{
     -webkit-border-radius: 10px;
@@ -323,7 +331,7 @@ a:active {
     font-size: 26px;
     font-weight: bold;
     color: #0191C7;
-    padding-bottom: 10px;
+    padding-bottom: 8px;
 }
 #homepage .row .span9 p,#homepage .row .span9 ol {
     color: #6E6E6E;
@@ -523,53 +531,88 @@ button.arrowl, input.arrowl {
 .portal {
     background-image:url(images/portal.png);
 }
-/*+++++++++++++++++++++++++++++++++
-RESPONSIVE CSS
-+++++++++++++++++++++++++++++++++*/
 
-.navbar .brand {
-  float: left;
-  font-size: 16px;
-  font-weight: 200;
-  line-height: 20px;
-  padding-bottom: 12px;
-  padding-top: 8px;
-}
-
-@media (min-width: 481px) and (max-width: 800px) {
 /*CSS ICON BLOCK USER*/
    .inbox-social{
-        background: url("images/inbox.png") no-repeat left center;
+        background: url("images/sprite-icon.png") no-repeat 0 0;
         padding-left: 40px;
     }
+    .inbox-social:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -43px;
+    }
     .new-message-social{
-        background: url("images/new.png") no-repeat left center;
+        background: url("images/sprite-icon.png") no-repeat 0 -75px;
+        padding-left: 40px;
+    }
+    .new-message-social:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -108px;
         padding-left: 40px;
     }
     .invitations-social{
-        background: url("images/invitation.png") no-repeat left center;
+        background: url("images/sprite-icon.png") no-repeat 0 -148px;
+        padding-left: 40px;
+    }
+    .invitations-social:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -191px;
         padding-left: 40px;
     }
     .profile-social{
-        background: url("images/perfil.png") no-repeat left center;
+        background: url("images/sprite-icon.png") no-repeat 0 -236px;
+        padding-left: 40px;
+    }
+    .profile-social:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -278px;
         padding-left: 40px;
     }
     .add-course{
-        background: url("images/course.png") no-repeat left center;
+        background: url("images/sprite-icon.png") no-repeat 0 -320px;
+        padding-left: 40px;
+    }
+    .add-course:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -363px;
+        padding-left: 40px;
+    }
+    .order-course{
+        background: url("images/sprite-icon.png") no-repeat 0 -408px;
+        padding-left: 40px;
+    }
+    .order-course:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -451px;
         padding-left: 40px;
     }
     .history-course{
-        background: url("images/history.png") no-repeat left center;
+        background: url("images/sprite-icon.png") no-repeat 0 -489px;
+        padding-left: 40px;
+    }
+    .history-course:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -532px;
         padding-left: 40px;
     }
     .list-course{
-        background: url("images/list-course.png") no-repeat left center;
+        background: url("images/sprite-icon.png") no-repeat 0 -575px;
         padding-left: 40px;
     }
-    .order-course{
-        background: url("images/order-course.png") no-repeat left center;
+    .list-course:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -618px;
         padding-left: 40px;
     }
+    
+
+/*+++++++++++++++++++++++++++++++++
+RESPONSIVE CSS
++++++++++++++++++++++++++++++++++*/
+
+.navbar .brand {
+  float: left;
+  font-size: 16px;
+  font-weight: 200;
+  line-height: 20px;
+  padding-bottom: 12px;
+  padding-top: 8px;
+}
+
+@media (min-width: 481px) and (max-width: 800px) {
+
     .sidebar-nav h4 {
         color: #037FB2;
         font-size: 18px;
@@ -590,12 +633,101 @@ RESPONSIVE CSS
 @media (max-width: 600px) {
 #main_content .course-box .row .span7 .row .span6 {
   float: left;
-  width: 615px;
+  /*width: 615px;*/
   padding-left: 10px;
 }
 #main_content .course-box .row .span7 .row .span6 h3 {
         font-size: 16px;
-        width: 500px;
+        /*width: 500px;*/
+    }
+}
+
+@media (min-width: 801px){
+  .nav-list > li > a {
+  font-size: 13px;
+  padding-bottom: 6px;
+  padding-top: 6px;
+}
+
+/*CSS ICON BLOCK USER*/
+   .inbox-social{
+        background: url("images/sprite-icon.png") no-repeat 0 0;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .inbox-social:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -36px;
+        background-size: 25px auto;
+    }
+    .new-message-social{
+        background: url("images/sprite-icon.png") no-repeat 0 -65px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .new-message-social:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -93px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .invitations-social{
+        background: url("images/sprite-icon.png") no-repeat 0 -127px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .invitations-social:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -163px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .profile-social{
+        background: url("images/sprite-icon.png") no-repeat 0 -198px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .profile-social:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -233px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .add-course{
+        background: url("images/sprite-icon.png") no-repeat 0 -267px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .add-course:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -303px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .order-course{
+        background: url("images/sprite-icon.png") no-repeat 0 -339px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .order-course:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -375px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .history-course{
+        background: url("images/sprite-icon.png") no-repeat 0 -410px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .history-course:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -446px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .list-course{
+        background: url("images/sprite-icon.png") no-repeat 0 -480px;
+        padding-left: 30px;
+        background-size: 25px auto;
+    }
+    .list-course:hover{
+        background: url("images/sprite-icon.png") no-repeat 0 -516px;
+        padding-left: 30px;
+        background-size: 25px auto;
     }
 }
 /*+++++++++++++++++++++++++++++++++
diff --git a/main/css/chamilo/images/sprite-icon.png b/main/css/chamilo/images/sprite-icon.png
new file mode 100644
index 0000000000..b2b042bc13
Binary files /dev/null and b/main/css/chamilo/images/sprite-icon.png differ
diff --git a/main/css/responsive.css b/main/css/responsive.css
index f700022be5..e61e4f3a10 100644
--- a/main/css/responsive.css
+++ b/main/css/responsive.css
@@ -122,9 +122,22 @@ The more frequent ones have been marked with *
 }
 
 @media (min-width: 321px) and (max-width: 480px) {
+    body {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
     header #header_center, header #header_right, header #header_left {
         display:none;
     }
+    #top_main_content .menu-column #reservation_block, #top_main_content .menu-column #notice_block, #top_main_content .menu-column #help_block {
+      clear: both;
+      display: block;
+      width: auto;
+    }
+    #profile_block .nav-list li, #course_block .nav-list li {
+        padding-bottom: 3px;
+        padding-top: 3px;
+    }
     .navbar {
       margin-top: 0em;
     }
@@ -144,6 +157,25 @@ The more frequent ones have been marked with *
     #chatmain {
         display:none;
     }
+    #top_main_content .menu-column #profile_block{
+        float: none;
+        clear: both;
+        width: 250px;
+        margin-left: 10px;
+        background: none;
+        border:none;
+        box-shadow: none;
+     }
+     #top_main_content .menu-column #course_block{
+        float: none;
+        clear: both;
+        width: 250px;
+        margin-left: 10px;
+        background: none;
+        border:none;
+        box-shadow: none;
+     }
+
 
     /* No topbar */
     #topbar {
@@ -261,17 +293,18 @@ The more frequent ones have been marked with *
         display: none;
     }
     .section-mycampus #homepage {
-        width: 400px;
+        width: auto;
     }
     .section-mycampus #hot_courses {
         width: 400px;
     }
     .section-mycourses #top_main_content {
-        margin-right: 15px;
+        margin-right: 0px;
     }
     .section-mycourses #main_content {
         margin-right: 15px;
-        width: 400px;
+        width: 100%
+        ;
     }
     .section-mycourses .course-box .course-box-actions {
         display: none;
@@ -352,8 +385,8 @@ The more frequent ones have been marked with *
 
     #top_main_content .menu-column #reservation_block, #top_main_content .menu-column #notice_block, #top_main_content .menu-column #help_block {
         clear: both;
-        display: inline-block;
-        width: 96%;
+        display: block;
+        width: auto;
     }
     #top_main_content .menu-column .well{
         padding: 15px;
@@ -375,7 +408,7 @@ The more frequent ones have been marked with *
     }
     #login_block #formLogin, #login_block #lang_form, #notice_block .homepage_notice {
       color: #666666;
-      font-size: 16px;
+      font-size: 14px;
       padding-bottom: 3px;
       padding-left: 15px;
       padding-right: 15px;
@@ -549,9 +582,7 @@ The more frequent ones have been marked with *
         -moz-border-radius: 10px;
         border-radius: 10px;
         border: 3px solid #FFFFFF;
-        -webkit-box-shadow: 1px 0px 6px 0px rgba(50, 50, 50, 0.71);
-        -moz-box-shadow:    1px 0px 6px 0px rgba(50, 50, 50, 0.71);
-            box-shadow:         1px 0px 6px 0px rgba(50, 50, 50, 0.71);
+        box-shadow: none;
     }
 }
 
@@ -566,9 +597,7 @@ The more frequent ones have been marked with *
         visibility: hidden;
     }
     #top_main_content .menu-column #reservation_block, #top_main_content .menu-column #notice_block, #top_main_content .menu-column #help_block {
-      clear: both;
-      display: inline-block;
-      width: 94%;
+      /*width: 94%;*/
     }
     footer {
         padding-top: 2em;
@@ -579,8 +608,8 @@ The more frequent ones have been marked with *
         padding-right: 1em;
     }
     #top_main_content .span9 {
-    float: left;
-    width: 570px;
+    width: 100%;
+    clear: both;
     }
     .section-mycampus #hot_courses .page-header {
     width: 565px;
@@ -593,13 +622,15 @@ The more frequent ones have been marked with *
       background-image: none;
       float: left;
       margin-right: 10px;
+      border: none;
+      box-shadow: none;
     }
     #top_main_content .menu-column .block_user_info {
         float: left;
         width: 280px;
     }
     .section-mycampus .hot-course-box, .section-mycourses .course-box {
-        width: 94%;
+        width: auto;
     }
     .course-box-thumbnail-box{
         float: left;
diff --git a/main/inc/lib/social.lib.php b/main/inc/lib/social.lib.php
index 2951008f57..3834d07cc1 100644
--- a/main/inc/lib/social.lib.php
+++ b/main/inc/lib/social.lib.php
@@ -643,29 +643,29 @@ class SocialManager extends UserManager
 
             $html .= '<div class="well sidebar-nav"><ul class="nav nav-list">';
             $active = $show == 'home' ? 'active' : null;
-            $html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/home.php">'.Display::return_icon('home.png', get_lang('Home'), array()).get_lang('Home').'</a></li>';
+            $html .= '<li class="home-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/home.php">'.Display::return_icon('home.png', get_lang('Home'), array()).get_lang('Home').'</a></li>';
             $active = $show == 'messages' ? 'active' : null;
-            $html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/messages/inbox.php?f=social">'.Display::return_icon('instant_message.png', get_lang('Messages'), array()).get_lang('Messages').$count_unread_message.'</a></li>';
+            $html .= '<li class="messages-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/messages/inbox.php?f=social">'.Display::return_icon('instant_message.png', get_lang('Messages'), array()).get_lang('Messages').$count_unread_message.'</a></li>';
 
             //Invitations
             $active = $show == 'invitations' ? 'active' : null;
-            $html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/invitations.php">'.Display::return_icon('invitation.png', get_lang('Invitations'), array()).get_lang('Invitations').$total_invitations.'</a></li>';
+            $html .= '<li class="invitations-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/invitations.php">'.Display::return_icon('invitation.png', get_lang('Invitations'), array()).get_lang('Invitations').$total_invitations.'</a></li>';
 
             //Shared profile and groups
             $active = $show == 'shared_profile' ? 'active' : null;
-            $html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/profile.php">'.Display::return_icon('my_shared_profile.png', get_lang('ViewMySharedProfile'), array()).get_lang('ViewMySharedProfile').'</a></li>';
+            $html .= '<li class="shared-profile-icon'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/profile.php">'.Display::return_icon('my_shared_profile.png', get_lang('ViewMySharedProfile'), array()).get_lang('ViewMySharedProfile').'</a></li>';
             $active = $show == 'friends' ? 'active' : null;
-            $html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/friends.php">'.Display::return_icon('friend.png', get_lang('Friends'), array()).get_lang('Friends').'</a></li>';
+            $html .= '<li class="friends-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/friends.php">'.Display::return_icon('friend.png', get_lang('Friends'), array()).get_lang('Friends').'</a></li>';
             $active = $show == 'browse_groups' ? 'active' : null;
-            $html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/groups.php">'.Display::return_icon('group_s.png', get_lang('SocialGroups'), array()).get_lang('SocialGroups').'</a></li>';
+            $html .= '<li class="browse-groups-icon'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/groups.php">'.Display::return_icon('group_s.png', get_lang('SocialGroups'), array()).get_lang('SocialGroups').'</a></li>';
 
             //Search users
             $active = $show == 'search' ? 'active' : null;
-            $html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/search.php">'.Display::return_icon('zoom.png', get_lang('Search'), array()).get_lang('Search').'</a></li>';
+            $html .= '<li class="search-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/search.php">'.Display::return_icon('zoom.png', get_lang('Search'), array()).get_lang('Search').'</a></li>';
 
             //My files
             $active = $show == 'myfiles' ? 'active' : null;
-            $html .= '<li class="'.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/myfiles.php">'.Display::return_icon('briefcase.png', get_lang('MyFiles'), array(), 16).get_lang('MyFiles').'</span></a></li>';
+            $html .= '<li class="myfiles-icon '.$active.'"><a href="'.api_get_path(WEB_PATH).'main/social/myfiles.php">'.Display::return_icon('briefcase.png', get_lang('MyFiles'), array(), 16).get_lang('MyFiles').'</span></a></li>';
             $html .='</ul>
                   </div>';
         }
diff --git a/main/template/default/layout/layout_2_col.tpl b/main/template/default/layout/layout_2_col.tpl
index 57760efe05..8207af4ba6 100644
--- a/main/template/default/layout/layout_2_col.tpl
+++ b/main/template/default/layout/layout_2_col.tpl
@@ -37,6 +37,7 @@
         {# Course block - teacher #}
 		{{ teacher_block }}
         </div>
+        <div class="user_notification">
 		{# Notice #}
 		{{ notice_block }}
 
@@ -51,7 +52,7 @@
 
 		{# Search (xapian) #}
 		{{ search_block }}
-
+        </div>
 		{# Classes #}
 		{{ classes_block }}