diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index 4c1cf44..0dff7ab 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -1,14 +1,39 @@
 {{ define "main" }}
-  {{ $data := .Data }}
-  <div class="container" role="main">
+
+{{ $data := .Data }}
+
+<div class="container" role="main">
+  <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 
     <article class="post-preview">
-      <div class="list-group col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3">
-      {{ range $key, $value := .Data.Terms.ByCount }}
-      <a href="{{ $.Site.LanguagePrefix | absURL }}/{{ $data.Plural }}/{{ $value.Name | urlize }}/" class="list-group-item">
-          {{ $value.Name }}<span class="badge">{{ $value.Count }}</span></a>
-      {{ end }}
+      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+        {{ range $key, $value := .Data.Terms.ByCount }}
+          <div class="panel panel-default">
+            <a class="collapsed" role="button" data-toggle="collapse" data-target="#collapse{{ $value.Name }}" data-parent="#accordion"
+               href="#" aria-expanded="false" aria-controls="collapse{{ $value.Name }}">
+                <div class="panel-heading" role="tab" id="header{{ $value.Name }}">
+                  <h4 class="panel-title">
+                      {{ $value.Name }}
+                    <span class="badge">{{ $value.Count }}</span>
+                  </h4>
+                </div>
+            </a>
+            <div id="collapse{{ $value.Name }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{ $value.Name }}">
+              <div class="panel-body">
+                <a href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/" class="list-group-item view-all">
+                View all</a>
+                <div class="list-group">
+                  {{ range $item := $value.WeightedPages }}
+                    <a href="{{$item.Permalink}}" class="list-group-item">{{ $item.Title }}</a>
+                  {{ end }}
+                </div>
+              </div>
+            </div>
+          </div>
+        {{ end }}
       </div>
     </article>
   </div>
-{{ end }}
+</div>
 
+
+{{ end }}
diff --git a/static/css/main.css b/static/css/main.css
index e5b3a5e..d712772 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -14,6 +14,14 @@ body {
   margin-bottom:50px;
   flex: 1 0 auto;
 }
+
+@media only screen and (max-width: 767px) {
+.container[role=main] {
+    margin-left: 0;
+    margin-right: 0;
+}
+}
+
 p {
   line-height: 1.5;
   margin: 6px 0;
@@ -69,6 +77,23 @@ hr.small {
   display: none;
 }
 
+div.panel-body a.list-group-item {
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 800;
+  border-radius: 0;
+  border: none;
+}
+div.panel-group .panel {
+    border-radius: 0;
+}
+div.panel-group .panel+.panel {
+    margin-top: 0;
+}
+
+div.panel-body a.list-group-item.view-all {
+  font-weight: 600;
+}
+
 ::-moz-selection {
   color: white;
   text-shadow: none;
@@ -621,6 +646,10 @@ footer .theme-by {
   margin-top:10px;
 }
 
+h4.panel-title > span.badge {
+    float: right;
+}
+
 @media only screen and (min-width: 768px) {
   .pager.blog-pager  {
     margin-top: 40px;