diff --git a/amadeus/static/css/base/amadeus.css b/amadeus/static/css/base/amadeus.css
index efbd19a..1aa6f72 100755
--- a/amadeus/static/css/base/amadeus.css
+++ b/amadeus/static/css/base/amadeus.css
@@ -73,11 +73,11 @@ a:focus {
 /* side bar menu ends*/
 
 /* category app starts */
-.category-panel > .panel-heading, .subject-panel > .panel-heading, .special-panel > .panel-heading {
+.category-panel > .panel-heading, .subject-panel > .panel-heading, .special-panel > .panel-heading, .topic-panel > .panel-heading {
     padding: 2px 0px;
 }
 
-.subject-panel-invisible > .panel-heading{
+.subject-panel-invisible > .panel-heading, .topic-panel-invisible > .panel-heading {
     padding: 2px 0px;
 }
 
diff --git a/amadeus/static/css/themes/green.css b/amadeus/static/css/themes/green.css
index af8c641..9334f49 100644
--- a/amadeus/static/css/themes/green.css
+++ b/amadeus/static/css/themes/green.css
@@ -59,6 +59,15 @@ a, a:focus, a:hover {
     background-color: #039BE5 !important;
 }
 
+.topic-panel > .panel-heading {
+    background-color: #7BA5B9 !important;
+}
+
+.topic-panel-invisible > .panel-heading {
+    background-color: #BDBDBD !important;
+    color: #F5F5F5;
+}
+
 .category-header i {
 	color: white;
 }
diff --git a/subjects/templates/subjects/view.html b/subjects/templates/subjects/view.html
index bac61a7..61d4a34 100644
--- a/subjects/templates/subjects/view.html
+++ b/subjects/templates/subjects/view.html
@@ -84,6 +84,7 @@
                 <a href="{% url 'topics:create' subject.slug %}" class="btn btn-sm btn-success btn-raised btn-block">{% trans "Create new topic" %}</a>
             {% endif %}
             
+            {% include 'topics/list.html' with subject=subject %}
         </div>
     </div>
 {% endblock content %}
\ No newline at end of file
diff --git a/topics/models.py b/topics/models.py
index e13d1f6..7ea8447 100644
--- a/topics/models.py
+++ b/topics/models.py
@@ -18,6 +18,7 @@ class Topic(models.Model):
 	class Meta:
 		verbose_name = _('Topic')
 		verbose_name_plural = _('Topics')
+		ordering = ['order']
 
 	def __str__(self):
 		return self.name
\ No newline at end of file
diff --git a/topics/templates/topics/list.html b/topics/templates/topics/list.html
new file mode 100644
index 0000000..ff55f77
--- /dev/null
+++ b/topics/templates/topics/list.html
@@ -0,0 +1,81 @@
+{% load static i18n pagination permissions_tags %}
+{% load django_bootstrap_breadcrumbs %}
+
+{% subject_permissions request.user subject as has_subject_permissions %}
+
+<div class="panel-group subject-group" id="topics-accordion" role="tablist" aria-multiselectable="true">
+	{% for topic in subject.topic_subject.all %}
+		{% if not topic.repository and topic.visible or has_subject_permissions %}
+			<div class="panel panel-info {% if not topic.visible or topic.repository %} topic-panel-invisible {% else %} topic-panel {% endif %} topic-panel">
+		        <div class="panel-heading">
+		            <div class="row">
+		                <div class="col-md-12 category-header">
+		                    <h4 class="panel-title">
+		                        <a class="category-course-link pull-left" data-parent="#topics-accordion" data-toggle="collapse" href="#{{topic.slug}}">
+		                            <button class="btn btn-default btn-xs text-center cat-selector"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></button> {{ topic }}
+		                        </a>
+		                    </h4>
+
+	                        {% if has_subject_permissions %}
+		                    	<div class="col-md-5 pull-right category-card-items">
+		                            <a href="" id="moreActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
+		                                <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
+		                            </a>
+		                            <ul class="dropdown-menu pull-right" aria-labelledby="moreActions">
+		                                <li><a href="{% url 'subjects:replicate' subject.slug %}"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i>{% trans 'Replicate' %}</a></li>
+		                                <li><a href="{% url 'subjects:update' subject.slug %}"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>{% trans 'Edit' %}</a></li>
+		                                <li><a href="javascript:delete_subject.get('{% url 'subjects:delete' subject.slug %}?view=index','#subject','#modal_subject')"><i class="fa fa-trash fa-fw" aria-hidden="true"></i>&nbsp;{% trans 'Remove' %}</a></li>
+		                            </ul>
+		                            <a href="" ><i class="fa fa-arrows" aria-hidden="true"></i></a>
+		                    	</div>
+	                        {% endif %}
+		                </div>
+		            </div>
+		        </div>
+			    <div id="{{topic.slug}}" class="panel-collapse collapse category-panel-content">
+			    	<input type="hidden" class="id_inp" name="id" value="{{ topic.id }}" />
+			    	<input type="hidden" class="order_inp" name="order" value="{{ topic.order }}" />
+			    </div>
+		    </div>
+		{% endif %}
+	{% endfor %}
+</div>
+
+<script type="text/javascript">
+	$("#topics-accordion").sortable({ // utilizado para fazer a re-organização dos tópicos
+	    delay: 100,
+	    distance: 5,
+	    handler: 'i.fa-arrows',
+	    update: function( event, ui ) {
+      		var cont = 1;
+      		var data = [];
+      		
+      		$("#topics-accordion").find('.order_inp').each(function () {
+      			$(this).val(cont++);
+
+      			data.push({
+      				'topic_id': $(this).parent().find('.id_inp').val(),
+      				'topic_order': $(this).val()
+      			});
+      		});
+
+      		data = JSON.stringify(data);
+
+      		sendUpdate(data);
+	    },
+	});
+
+	function sendUpdate(data) {
+		$.ajax({
+			url: '{% url "topics:update_order" %}',
+			dataType: 'json',
+			data: {'data': data},
+			success: function(response) {
+				console.log(response);
+			},
+			error: function(response) {
+				console.log(response);	
+			}
+		});
+	}
+</script>
\ No newline at end of file
diff --git a/topics/urls.py b/topics/urls.py
index 67e6698..01ca0e5 100644
--- a/topics/urls.py
+++ b/topics/urls.py
@@ -5,4 +5,5 @@ from . import views
 
 urlpatterns = [
 	url(r'^create/(?P<slug>[\w_-]+)/$', views.CreateView.as_view(), name = 'create'),
+	url(r'^update_order/$', views.update_order, name = 'update_order'),
 ]
diff --git a/topics/views.py b/topics/views.py
index 39bc7c7..5488e2e 100644
--- a/topics/views.py
+++ b/topics/views.py
@@ -1,10 +1,13 @@
 from django.shortcuts import get_object_or_404, redirect, render
 from django.views import generic
 from django.contrib import messages
+from django.http import JsonResponse
 from django.core.urlresolvers import reverse, reverse_lazy
 from django.utils.translation import ugettext_lazy as _
 from django.contrib.auth.mixins import LoginRequiredMixin
 
+import json
+
 from amadeus.permissions import has_subject_permissions
 
 from subjects.models import Subject
@@ -66,3 +69,18 @@ class CreateView(LoginRequiredMixin, generic.edit.CreateView):
 		messages.success(self.request, _('Topic "%s" was created on virtual enviroment "%s" successfully!')%(self.object.name, self.object.subject.name))
 
 		return reverse_lazy('subjects:view', kwargs = {'slug': self.object.subject.slug})
+
+def update_order(request):
+	data = request.GET.get('data', None)
+
+	if not data is None:
+		data = json.loads(data)
+
+		for t_data in data:
+			topic = get_object_or_404(Topic, id = t_data['topic_id'])
+			topic.order = t_data['topic_order']
+			topic.save()
+
+		return JsonResponse({'message': 'ok'})
+
+	return JsonResponse({'message': 'No data received'})
\ No newline at end of file
--
libgit2 0.21.2