diff --git a/courses/templates/course/view.html b/courses/templates/course/view.html
index ea52079..6825163 100644
--- a/courses/templates/course/view.html
+++ b/courses/templates/course/view.html
@@ -19,21 +19,34 @@
 {% endblock %}
 
 {% block sidebar %}
-  {{block.super}}
+  <div class="panel panel-primary">
+        <div class="panel-heading">
+            <h5>{% trans 'Menu' %}</h5>
+        </div>
+        <div class="panel-body">
+            <ul class="nav nav-pills nav-stacked">
+                <li><a href="{% url 'core:home' %}">{% trans "Home" %}</a></li>
+                <li><a href="{% url 'users:profile' %}">{% trans 'Profile' %}</a></li>
+                <li><a href="{% url 'course:manage' %}">{% trans 'My Courses' %}</a></li>
+                <li><a href="{% url 'core:guest' %}">{% trans 'All Courses' %}</a></li>
+            </ul>
+        </div>
+    </div>
+
 
 {% endblock %}
 
 {% block content %}
 
-  <div class="col-md-12">
+  <div class="col-md-12 cards-content">
     <div class="panel panel-info">
-      <div class="panel-heading headingOne">
+      <div class="panel-heading course-detail">
         <div class="row">
-          <div class="col-xs-8 col-md-10 titleTopic">
-            <h4>{{course}}</h4>
+          <div class="col-xs-8 col-md-4 .titleTopic-detail">
+            <h4>{{course.name}}</h4>
           </div>
           {% if user|has_role:'professor' and user in course.professors or user|has_role:'system_admin' %}
-            <div class="col-xs-4 col-md-2" id="divMoreActions">
+            <div class="col-xs-4 col-md-8" id="divMoreActions">
               <div class="btn-group">
                 <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="moreActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   <i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
@@ -50,10 +63,10 @@
       </div>
     </div>
     <div class="panel-body">
-      <p><b>{% trans 'Course Name' %}: </b>{{course.name}}</p>
-      <p><b>{% trans 'Coordinator' %}: </b>{{course.professors}}</p>
+      <p><b>Course Name: </b>{{course.name}}</p>
+      <p><b>Coordinator: </b>{{course.professors}}</p>
       <p>
-        <b>{% trans 'Description' %}:</b>
+        <b>Description:</b>
         <i>
           {{course.description}}
         </i>
@@ -61,7 +74,7 @@
 
     </div>
   </div>
- 
+
 <!-- MODAL CREATE SUBJECT -->
 <div class="modal" tabindex="-1" role="dialog  " id="createSubject">
   <div class="modal-dialog">
@@ -108,26 +121,29 @@
   </div>
 </div>
 </div>
-<div>
+<div class="cards-detail">
     {% if request.GET.category == 'all' or none or request.GET.category == '' %}
       {% for subject in subjects %}
-        <div class="panel panel-info panel_{{ subject.id }}">
-          <div class="panel-heading headingTwo ui-sortable-handle" role="tab">
+        <div class="panel panel-default panel_{{ subject.id }}">
+          <div class="panel-heading heading_{{subject.id}} subject ui-sortable-handle">
             <div class="row">
-                <div class="col-xs-9 col-md-10 titleTopic">
-                  <a role="button" data-toggle="collapse" data-parent="#accordion" href=".collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
-                  <h4 style="color:white">{{subject.name}}</h4>
+                <div class="col-md-1 moreAccordion" data-toggle="collapse" data-parent="#accordion-{{subject.slug}}" href=".collapseSubject-{{subject.slug}}" aria-expanded="false" aria-controls="collapseSubject-{{subject.slug}}">
+                  <button class="btn btn-default btn-sm caret-square"><i class="fa fa-caret-square-o-down fa-2x" aria-hidden="true"></i></button>
+                </div>
+                <div class="col-xs-9 col-md-4 titleTopic">
+                  <a role="button" href="{% url 'course:view_subject' subject.slug %}">
+                    <h4>{{subject.name}}</h4>
                   </a>
                 </div>
                 {% if user|has_role:'professor' and user in subject.professors or user|has_role:'system_admin' %}
-                  <div class="col-xs-3 col-md-2" id="divMoreActions">
+                  <div class="col-xs-3 col-md-6" id="divMoreActions">
                     <div class="btn-group">
                       <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="moreActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
                       </button>
                       <ul class="dropdown-menu" aria-labelledby="moreActions">
-                        <li><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal3"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; {% trans 'Replicate' %}</a></li>
-                        <li><a href="javascript:void(0)" data-toggle="modal" data-target="#removeSubject2"><i class="fa fa-trash fa-fw" aria-hidden="true"></i>&nbsp; {% trans 'Remove' %}</a></li>
+                        <li><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal3"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Replicate</a></li>
+                        <li><a href="javascript:void(0)" data-toggle="modal" data-target="#removeSubject2"><i class="fa fa-trash fa-fw" aria-hidden="true"></i>&nbsp; Remove</a></li>
                       </ul>
                     </div>
                   </div>
@@ -140,47 +156,51 @@
                 {% endif %}
             </div>
           </div>
-          <div class="panel-body">
-              <p><b>{% trans "Professor" %}: </b>{% for professor in subject.professors.all %}{% if not forloop.first %},{% endif %}
-                {{professor}}{% if forloop.last %}.{% endif %}{% endfor %}</p>
-                <p>
-                  <b>{% trans "Description" %}: </b>
-                  <i>
-                    {{subject.description}}
-                  </i>
-                </p>
-                <div class="row">
-                  <div class="col-xs-6 col-md-6">
-                    <p><b>{% trans "Begining" %}: </b>{{subject.init_date}}</p>
-                  </div>
-                  <div class="col-xs-6 col-md-6">
-                    <p><b>{% trans "End" %}: </b>{{subject.end_date}}</p>
-                  </div>
+          <div class="panel-collapse collapseSubject-{{subject.slug}} collapse in" aria-labelledby="heading_{{subject.id}}" aria-expanded="true" aria-hidden="false">
+           <div class="panel-body">
+            <p><b>{% trans "Professor" %}: </b>{% for professor in subject.professors.all %}{% if not forloop.first %},{% endif %}
+              {{professor}}{% if forloop.last %}.{% endif %}{% endfor %}</p>
+              <p>
+                <b>{% trans "Description" %}: </b>
+                <i>
+                  {{subject.description}}
+                </i>
+              </p>
+              <div class="row">
+                <div class="col-xs-6 col-md-6">
+                  <p><b>{% trans "Begining" %}: </b>{{subject.init_date}}</p>
                 </div>
-                <a href="{% url 'course:view_subject' subject.slug %}" class="btn btn-raised btn-default center-block view_btn" {% if user|hide_subscribe_view_btn:subject %}style="display:none"{% endif %}>{% trans 'View Subject' %}<div class="ripple-container"></div></a>
-            </div>
+                <div class="col-xs-6 col-md-6">
+                  <p><b>{% trans "End" %}: </b>{{subject.end_date}}</p>
+                </div>
+              </div>
+          </div>
+         </div>
         </div>
       {% endfor %}
   {% else %}
         {% for subject in subjects_category %}
             {% if subject.category.name == request.GET.category %}
               <div class="panel panel-info panel_{{ subject.id }}">
-          <div class="panel-heading headingTwo ui-sortable-handle" role="tab">
-            <div class="row">
-                <div class="col-xs-9 col-md-10 titleTopic">
-                  <a role="button" data-toggle="collapse" data-parent="#accordion" href=".collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
-                  <h4 style="color:white">{{subject.name}}</h4>
-                  </a>
-                </div>
+               <div class="panel-heading heading_{{subject.id}} subject ui-sortable-handle" role="tab">
+                <div class="row">
+                 <div class="col-md-1 moreAccordion" data-toggle="collapse" data-parent="#accordion-{{subject.slug}}" href=".collapseSubject-{{subject.slug}}" aria-expanded="false" aria-controls="collapseSubject-{{subject.slug}}">
+                  <button class="btn btn-default btn-sm caret-square"><i class="fa fa-caret-square-o-down fa-2x" aria-hidden="true"></i></button>
+                 </div>
+                 <div class="col-xs-9 col-md-4 titleTopic">
+                   <a role="button" href="{% url 'course:view_subject' subject.slug %}">
+                    <h4>{{subject.name}}</h4>
+                   </a>
+                 </div>
                 {% if user|has_role:'professor' and user in subject.professors or user|has_role:'system_admin' %}
-                  <div class="col-xs-3 col-md-2" id="divMoreActions">
+                  <div class="col-xs-3 col-md-6" id="divMoreActions">
                     <div class="btn-group">
                       <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="moreActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <i class="fa fa-ellipsis-v fa-2x" aria-hidden="true"></i>
                       </button>
                       <ul class="dropdown-menu" aria-labelledby="moreActions">
-                        <li><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal3"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; {% trans 'Replicate' %}</a></li>
-                        <li><a href="javascript:void(0)" data-toggle="modal" data-target="#removeSubject2"><i class="fa fa-trash fa-fw" aria-hidden="true"></i>&nbsp; {% trans 'Remove' %}</a></li>
+                        <li><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal3"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Replicate</a></li>
+                        <li><a href="javascript:void(0)" data-toggle="modal" data-target="#removeSubject2"><i class="fa fa-trash fa-fw" aria-hidden="true"></i>&nbsp; Remove</a></li>
                       </ul>
                     </div>
                   </div>
@@ -192,7 +212,8 @@
                 {% endif %}
             </div>
           </div>
-          <div class="panel-body">
+          <div class="panel-collapse collapseSubject-{{subject.slug}} collapse in" aria-labelledby="heading_{{subject.id}}" aria-expanded="true" aria-hidden="false">
+           <div class="panel-body">
               <p><b>{% trans "Professor" %}: </b>{% for professor in subject.professors.all %}{% if not forloop.first %},{% endif %}
                 {{professor}}{% if forloop.last %}.{% endif %}{% endfor %}</p>
                 <p>
@@ -209,8 +230,8 @@
                     <p><b>{% trans "End" %}: </b>{{subject.end_date}}</p>
                   </div>
                 </div>
-                <a href="{% url 'course:view_subject' subject.slug %}" class="btn btn-raised btn-default center-block view_btn" {% if user|hide_subscribe_view_btn:subject %}style="display:none"{% endif %}>{% trans 'View Subject' %}<div class="ripple-container"></div></a>
             </div>
+           </div>
         </div>
             {% endif %}
         {% endfor %}
--
libgit2 0.21.2