diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 3f520f9..44bbd35 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -12,8 +12,8 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jquery.ui.all
 //= require twitter/bootstrap
 //= require turbolinks
-//= require jquery.ui.all
 //= require modules
 //= require_tree .
diff --git a/app/assets/stylesheets/jqueryui_overrides.css b/app/assets/stylesheets/jqueryui_overrides.css
new file mode 100644
index 0000000..fcc3c3f
--- /dev/null
+++ b/app/assets/stylesheets/jqueryui_overrides.css
@@ -0,0 +1,4 @@
+/*Keeps bootstrap style*/
+.ui-widget-content a {
+  color: #0088CC;
+}
\ No newline at end of file
diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb
index 18f27a4..f81e46a 100644
--- a/app/views/repositories/show.html.erb
+++ b/app/views/repositories/show.html.erb
@@ -14,45 +14,54 @@
 
 <hr/>
 
-<h2>Processing information</h2>
-
-<p>
-  <strong>State:</strong>
-  <%= @processing.state %>
-</p>
-
-<p>
-  <strong>Creation date:</strong>
-  <%= @processing.date.strftime("%Y/%m/%d at %Hh%M (%z)") %>
-</p>
+<div id="repository-accordion">
+  <h3>Processing information</h3>
+  <div>
+    <p>
+      <strong>State:</strong>
+      <%= @processing.state %>
+    </p>
 
-<% unless @processing.process_times.nil? %>
-  <% @processing.process_times.each do |process_time| %>
     <p>
-      <strong><%= process_time.state %> time:</strong>
-      <%= humanize_eplased_time(process_time.time) %>
+      <strong>Creation date:</strong>
+      <%= @processing.date.strftime("%Y/%m/%d at %Hh%M (%z)") %>
     </p>
-  <% end %>
-<% end %>
 
-<hr/>
-<% if @processing.ready? %>
-  <h2>Modules Tree</h2>
-  <div id="module_tree"></div>
+    <% unless @processing.process_times.nil? %>
+      <% @processing.process_times.each do |process_time| %>
+        <p>
+          <strong><%= process_time.state %> time:</strong>
+          <%= humanize_eplased_time(process_time.time) %>
+        </p>
+      <% end %>
+    <% end %>
+  </div>
 
-  <hr/>
+  <% if @processing.ready? %>
+    <h3>Modules Tree</h3>
+    <div id="module_tree"></div>
 
-  <h2>Metric Results</h2>
-  <div id="metric_results"></div>
+    <h3>Metric Results</h3>
+    <div id="metric_results"></div>
 
-  <hr/>
-  
-  <script type="text/javascript">
+  <% end %>
+</div>
+<script type="text/javascript">
+  <% if @processing.ready? %>
     $(document).ready(function () {
-      Module.Tree.load("<%= escape_javascript(image_tag 'loader.gif') %> Loading data. Please, wait.", <%= @processing.results_root_id %>);
+        Module.Tree.load("<%= escape_javascript(image_tag 'loader.gif') %> Loading data. Please, wait.", <%= @processing.results_root_id %>);
     });
-  </script>
-<% end %>
+  <% end %>
+
+  //Loads the accorcion
+  $(function() {
+    $( "#repository-accordion" ).accordion({
+      heightStyle: "content"
+    });
+  });
+</script>
+
+<hr/>
 
 <%= link_to 'Back',  project_path(@repository.project_id), class: 'btn btn-default' %>
 <% if project_owner? @repository.project_id %>
diff --git a/features/repository/show.feature b/features/repository/show.feature
index e3185e0..2b3ebeb 100644
--- a/features/repository/show.feature
+++ b/features/repository/show.feature
@@ -21,7 +21,9 @@ Feature: Show Repository
     And I should see "LOADING time"
     And I should see "COLLECTING time"
     And I should see "ANALYZING time"
-    And I should see "Metric"
+    #TODO: test if the module results tree is getting rendered
+    When I click the "Metric Results" h3
+    Then I should see "Metric"
     And I should see "Value"
     And I should see "Weight"
     And I should see "Threshold"
@@ -71,6 +73,7 @@ Feature: Show Repository
     And I ask for the last ready processing of the given repository
     And I ask for the module result of the given processing
     When I visit the repository show page
+    And I click the "Modules Tree" h3
     Then I should see a sample child's name
     And I should see "Name"
     And I should see "Granularity"
@@ -88,6 +91,7 @@ Feature: Show Repository
     And I ask for the last ready processing of the given repository
     And I ask for the module result of the given processing
     When I visit the repository show page
+    And I click the "Modules Tree" h3
     And I click on the sample child's name
     Then I should see a sample child's name
 
@@ -104,6 +108,7 @@ Feature: Show Repository
     And I ask for the module result of the given processing
     And I ask for the metric results of the given module result
     When I visit the repository show page
+    And I click the "Metric Results" h3
     And I see a sample metric's name
     When I click on the sample metric's name
     Then I should see "Loading data. Please, wait."
diff --git a/features/step_definitions/repository_steps.rb b/features/step_definitions/repository_steps.rb
index 434af1e..c6012f5 100644
--- a/features/step_definitions/repository_steps.rb
+++ b/features/step_definitions/repository_steps.rb
@@ -77,6 +77,10 @@ When(/^I click on the sample child's name$/) do
   click_link @module_result.children.first.module.name
 end
 
+When(/^I click the "(.*?)" h3$/) do |text|
+  page.find('h3', text: text).click()
+end
+
 Then(/^I should see the sample repository name$/) do
   page.should have_content(@repository.name)
 end
--
libgit2 0.21.2