diff --git a/vipra-ui/app/html/articles/index.html b/vipra-ui/app/html/articles/index.html
index 2aae37d40bba5977d759450a9972ea9c78bb0181..b37d4ad6e5686bd06fb3ea72eb98e7aca3bdb22c 100644
--- a/vipra-ui/app/html/articles/index.html
+++ b/vipra-ui/app/html/articles/index.html
@@ -1,10 +1,16 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'articles'">
   <div class="row">
     <div class="col-md-12">
-      <div class="text-muted">
-        Found
-        <ng-pluralize count="articlesTotal||0" when="{0:'no articles',1:'1 article',other:'{} articles'}"></ng-pluralize> in the database.
-        <span ng-show="articlesTotal">
+      <pagination total="articlesTotal" page="page" limit="limit" />
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Found
+          <ng-pluralize count="articlesTotal||0" when="{0:'no articles',1:'1 article',other:'{} articles'}"></ng-pluralize> in the database.
+          <span ng-show="articlesTotal">
           Sort by
           <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort">
             <li value="title" class="nya-bs-option"><a>Title</a></li>
@@ -17,7 +23,21 @@
             <li value="-" class="nya-bs-option"><a>Descending</a></li>
           </ol>
         </span>
-        <br> Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>.
+        </div>
+        <table class="table table-hover table-condensed">
+          <tbody>
+            <tr ng-repeat="article in articles">
+              <td>
+                <a ui-sref="articles.show({id: article.id})" ng-bind="::article.title"></a>
+                &nbsp;
+                <small class="text-muted" ng-bind-template="[{{::Vipra.formatDate(article.date)}}]"></small>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="panel-footer">
+          Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>
+        </div>
       </div>
     </div>
   </div>
@@ -26,25 +46,5 @@
       <pagination total="articlesTotal" page="page" limit="limit" />
     </div>
   </div>
-  <div class="row">
-    <div class="col-md-12">
-      <table class="table table-hover table-condensed">
-        <tbody>
-          <tr ng-repeat="article in articles">
-            <td>
-              <a ui-sref="articles.show({id: article.id})" ng-bind="::article.title"></a>
-              &nbsp;
-              <small class="text-muted" ng-bind-template="[{{::Vipra.formatDate(article.date)}}]"></small>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-md-12">
-      <pagination total="articlesTotal" page="page" limit="limit" />
-    </div>
-  </div>
 </div>
 <div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/articles/show.html b/vipra-ui/app/html/articles/show.html
index 8666ede849312103b2f1283386cf32d7af3e7712..398eb46434a5f4da6f0254fa7b6a963118597dc5 100644
--- a/vipra-ui/app/html/articles/show.html
+++ b/vipra-ui/app/html/articles/show.html
@@ -7,7 +7,7 @@
           <tr>
             <td>
               <a class="btn btn-default" ui-sref="network({type:'articles', id:article.id})">
-                Network graph
+                <i class="fa fa-sitemap"></i> Network
               </a>
             </td>
           </tr>
@@ -34,7 +34,7 @@
                 <th>URL</th>
                 <td>
                   <a ng-href="{{::article.url}}" target="_blank">
-                    <span class="glyphicon glyphicon-link"></span>
+                    <i class="fa fa-link"></i>
                     <span ng-bind="::article.url"></span>
                   </a>
                 </td>
diff --git a/vipra-ui/app/html/explorer.html b/vipra-ui/app/html/explorer.html
index 0ddaf29a78e5057110c2d826d367f67812013ba5..a75e5115437f55bfe6c9b2c157fb92db519c0204 100644
--- a/vipra-ui/app/html/explorer.html
+++ b/vipra-ui/app/html/explorer.html
@@ -7,8 +7,8 @@
     </div>
     <div class="btn-group btn-group-justified">
       <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'name'" title="Sort by name">&#945;</a>
-      <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'avgRelevance'" title="Sort by relevance average">&#956;</a>
-      <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'varRelevance'" title="Sort by relevance variance">&#963;</a>
+      <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'avgRelevance'" title="Sort by average relevance">&#956;</a>
+      <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'varRelevance'" title="Sort by variance in relevance">&#963;</a>
       <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'fallingRelevance'" title="Sort by falling relevance">&#8600;</a>
       <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'risingRelevance'" title="Sort by rising relevance">&#8599;</a>
       <a class="btn btn-sm btn-default" ng-model="opts.sorttopics" bs-radio="'risingDecayRelevance'" title="Sort by rising relevance with decay">&#8605;</a>
@@ -22,9 +22,9 @@
     </div>
     <ul class="list-unstyled topic-choice">
       <li ng-repeat="topic in topics | orderBy:opts.sorttopics:opts.sortdir | filter:search">
-        <div class="checkbox checkbox-condensed" ng-class="{selected:opts.selectedTopics[topic.id]}" bs-popover popover-title="{{::topic.name}}" popover-template="partials/topic-popover.html">
+        <div class="checkbox checkbox-condensed" ng-class="{selected:topic.selected}" bs-popover popover-title="{{::topic.name}}" popover-template="partials/topic-popover.html">
           <span class="valuebar" ng-style="{width:topicCurrValue(topic)}"></span>
-          <input type="checkbox" ng-model="opts.selectedTopics[topic.id]" ng-attr-id="{{::topic.id}}">
+          <input type="checkbox" ng-model="topic.selected" ng-attr-id="{{::topic.id}}" ng-change="redrawGraph()">
           <label class="check" ng-attr-for="{{::topic.id}}">
             <span class="ellipsis" ng-bind="::topic.name"></span>
           </label>
@@ -55,8 +55,28 @@
           <a class="btn btn-sm btn-default" ng-model="opts.chartstack" bs-radio="'percent'">Percent</a>
         </div>
       </div>
-      <div class="chart" id="topic-seq" highcharts="topicSeq"></div>
+      <div class="chart" highcharts="topicSeq"></div>
       <div class="message text-muted" ng-show="!topicsSelected">No topic selected</div>
+      <div class="topics">
+        <div class="row">
+          <div class="col-md-6 col-sm-12" ng-repeat="topic in topics | filter:{selected:true}">
+            <div class="panel panel-default panel-condensed">
+              <div class="panel-heading">
+                <span ng-bind="topic.name"></span>
+                <a ui-sref="topics.show({id:topic.id})">
+                  <i class="fa fa-link"></i>
+                </a>
+                <a ui-sref="network({type:'topics', id:topic.id})">
+                  <i class="fa fa-sitemap"></i>
+                </a>
+                <span class="colorbox shown" style="background:{{::topic.color}}"></span>
+              </div>
+              <div class="panel-body">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/vipra-ui/app/html/topics/articles.html b/vipra-ui/app/html/topics/articles.html
index 363190a7405a5ff41bf5ec286ed28ae5f30f707b..c27bec67acd32dc01dc8fcb3335bf2fdb91c1df8 100644
--- a/vipra-ui/app/html/topics/articles.html
+++ b/vipra-ui/app/html/topics/articles.html
@@ -15,10 +15,16 @@
   </div>
   <div class="row">
     <div class="col-md-12">
-      <div class="text-muted">
-        Found
-        <ng-pluralize count="articlesTotal||0" when="{0:'no articles',1:'1 article',other:'{} articles'}"></ng-pluralize> in the database.
-        <span ng-show="articlesTotal">
+      <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Found
+          <ng-pluralize count="articlesTotal||0" when="{0:'no articles',1:'1 article',other:'{} articles'}"></ng-pluralize> in the database.
+          <span ng-show="articlesTotal">
           Sort by
           <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort">
             <li value="title" class="nya-bs-option"><a>Title</a></li>
@@ -31,7 +37,19 @@
             <li value="-" class="nya-bs-option"><a>Descending</a></li>
           </ol>
         </span>
-        <br> Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>.
+        </div>
+        <table class="table table-hover table-condensed">
+          <tbody>
+            <tr ng-repeat="article in articles">
+              <td>
+                <a ui-sref="articles.show({id: article.id})" ng-bind="::article.title"></a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="panel-footer">
+          Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>
+        </div>
       </div>
     </div>
   </div>
@@ -40,23 +58,5 @@
       <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
     </div>
   </div>
-  <div class="row">
-    <div class="col-md-12">
-      <table class="table table-hover table-condensed">
-        <tbody>
-          <tr ng-repeat="article in articles">
-            <td>
-              <a ui-sref="articles.show({id: article.id})" ng-bind="::article.title"></a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-md-12">
-      <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
-    </div>
-  </div>
 </div>
 <div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/topics/index.html b/vipra-ui/app/html/topics/index.html
index 95ce765a5ccec091780deb037192d9e022c817db..50d6d7a4290b26e086a1f8fe2d5b6695c12911c0 100644
--- a/vipra-ui/app/html/topics/index.html
+++ b/vipra-ui/app/html/topics/index.html
@@ -1,10 +1,16 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'topics'">
   <div class="row">
     <div class="col-md-12">
-      <div class="text-muted">
-        Found
-        <ng-pluralize count="topicsTotal||0" when="{0:'no topics',1:'1 topic',other:'{} topics'}"></ng-pluralize> in the database.
-        <span ng-show="topicsTotal">
+      <pagination total="topicsTotal" page="page" limit="limit" />
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Found
+          <ng-pluralize count="topicsTotal||0" when="{0:'no topics',1:'1 topic',other:'{} topics'}"></ng-pluralize> in the database.
+          <span ng-show="topicsTotal">
           Sort by
           <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.sort">
             <li value="name" class="nya-bs-option"><a>Name</a></li>
@@ -16,7 +22,19 @@
             <li value="-" class="nya-bs-option"><a>Descending</a></li>
           </ol>
         </span>
-        <br> Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>.
+        </div>
+        <table class="table table-hover table-condensed">
+          <tbody>
+            <tr ng-repeat="topic in topics">
+              <td>
+                <a ui-sref="topics.show({id: topic.id})" ng-bind="::topic.name"></a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="panel-footer">
+          Page <span ng-bind="page||1"></span> of <span ng-bind="maxPage||1"></span>
+        </div>
       </div>
     </div>
   </div>
@@ -25,23 +43,5 @@
       <pagination total="topicsTotal" page="page" limit="limit" />
     </div>
   </div>
-  <div class="row">
-    <div class="col-md-12">
-      <table class="table table-hover table-condensed">
-        <tbody>
-          <tr ng-repeat="topic in topics">
-            <td>
-              <a ui-sref="topics.show({id: topic.id})" ng-bind="::topic.name"></a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-md-12">
-      <pagination total="topicsTotal" page="page" limit="limit" />
-    </div>
-  </div>
 </div>
 <div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/topics/show.html b/vipra-ui/app/html/topics/show.html
index 75e9aecfdcfac65004a46e4234ccb34094405c4f..cf69e48b409e1ff3b9e09f1038269e9bd2e0b972 100644
--- a/vipra-ui/app/html/topics/show.html
+++ b/vipra-ui/app/html/topics/show.html
@@ -30,7 +30,7 @@
               </div>
             </td>
             <td>
-              <a class="btn btn-default" ui-sref="network({type:'topics', id:topic.id})">Network graph</a>
+              <a class="btn btn-default" ui-sref="network({type:'topics', id:topic.id})"><i class="fa fa-sitemap"></i> Network</a>
             </td>
             <td>
               <a class="btn btn-default" ui-sref="topics.show.articles({id:topic.id})">Articles</a>
@@ -77,26 +77,24 @@
   <div class="row">
     <div class="col-md-12">
       <h3>Words</h3>
-      <div class="wrapper">
-        <div class="topbar">
-          <small>Sequence:</small>
-          <sequence-dropdown ng-model="sequenceId" sequences="topic.sequences"></sequence-dropdown>
-        </div>
-        <table class="table table-condensed table-bordered table-hover" ng-show="sequence">
-          <thead>
-            <tr>
-              <th ng-model="opts.sortwords" sort-by="id">Word</th>
-              <th ng-model="opts.sortwords" sort-by="likeliness">Likeliness</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr ng-repeat="word in sequence.words | orderBy:opts.sortwords">
-              <td ng-bind="word.id"></td>
-              <td ng-bind="word.likeliness.toFixed(4)"></td>
-            </tr>
-          </tbody>
-        </table>
+      <div class="topbar">
+        <small>Sequence:</small>
+        <sequence-dropdown ng-model="sequenceId" sequences="topic.sequences"></sequence-dropdown>
       </div>
+      <table class="table table-condensed table-bordered table-hover" ng-show="sequence">
+        <thead>
+          <tr>
+            <th ng-model="opts.sortwords" sort-by="id">Word</th>
+            <th ng-model="opts.sortwords" sort-by="likeliness">Likeliness</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="word in sequence.words | orderBy:opts.sortwords">
+            <td ng-bind="word.id"></td>
+            <td ng-bind="word.likeliness.toFixed(4)"></td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </div>
diff --git a/vipra-ui/app/js/app.js b/vipra-ui/app/js/app.js
index 35b6b0e1b9428b47315a3fc535caaf5cf3871108..9b0ad989a68b0419c619ac412378a22b7fc56960 100644
--- a/vipra-ui/app/js/app.js
+++ b/vipra-ui/app/js/app.js
@@ -10,7 +10,6 @@
   var app = angular.module('vipra.app', [
     'ngResource',
     'ngSanitize',
-    'ngAnimate',
     'ui.router',
     'nya.bootstrap.select',
     'vipra.controllers',
diff --git a/vipra-ui/app/js/controllers.js b/vipra-ui/app/js/controllers.js
index 4b1af8b2a79e2488ab3a90062310c460708274c5..8012e8e96486f85cb64e07690c98b772ccd29db7 100644
--- a/vipra-ui/app/js/controllers.js
+++ b/vipra-ui/app/js/controllers.js
@@ -124,7 +124,7 @@
         }
       };
       $scope.shown = {
-        articles: $scope.type === 'articles',
+        articles: true,
         topics: true,
         words: true
       };
@@ -335,24 +335,20 @@
 
       $scope.checkTopics = function(to) {
         var toggle = typeof to === 'undefined';
-        if (!$scope.opts.selectedTopics)
-          $scope.opts.selectedTopics = {};
         for (var i = 0, t; i < $scope.topics.length; i++) {
           t = $scope.topics[i];
-          if (toggle)
-            $scope.opts.selectedTopics[t.id] = !$scope.opts.selectedTopics[t.id];
-          else
-            $scope.opts.selectedTopics[t.id] = to;
+          t.selected = toggle ? !t.selected : to;
         }
+        $scope.redrawGraph();
       };
 
       $scope.redrawGraph = function() {
-        if (!$scope.topics || !$scope.opts.selectedTopics) return;
+        if (!$scope.topics) return;
         var series = [];
 
         // create series of selected topics
         for (var i = 0; i < $scope.topics.length; i++) {
-          if ($scope.opts.selectedTopics[$scope.topics[i].id]) {
+          if ($scope.topics[i].selected) {
             var topic = $scope.topics[i],
               relevances = [];
 
@@ -410,7 +406,6 @@
         return (percent * 100) + '%';
       };
 
-      $scope.$watchCollection('opts.selectedTopics', $scope.redrawGraph);
       $scope.$watchGroup(['opts.seqstyle', 'opts.chartstyle', 'opts.chartstack'], $scope.redrawGraph);
     }
   ]);
@@ -592,7 +587,7 @@
         $scope.origName = $scope.topic.name;
         $scope.isRename = true;
         $timeout(function() {
-          $('#topicName').select();
+          document.getElementById('topicName').select();
         }, 0);
       };
 
diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less
index ca7415feb1b834cb33b6cc1db5b42fa202913fe2..b819dc5a22a8fe46e7642a83051bf467f9c597fd 100644
--- a/vipra-ui/app/less/app.less
+++ b/vipra-ui/app/less/app.less
@@ -250,8 +250,12 @@ a:hover {
     right: 0;
     bottom: 0;
   }
+  .topics,
   .chart {
-    padding: 5px;
+    padding: 15px;
+  }
+  .topics .panel-heading {
+    position: relative;
   }
   .sequence {
     flex: 1 0 0;
@@ -279,7 +283,8 @@ a:hover {
     visibility: hidden;
   }
   .checkbox:hover .colorbox,
-  .selected .colorbox {
+  .selected .colorbox,
+  .colorbox.shown {
     visibility: visible;
   }
 }
@@ -337,6 +342,8 @@ input[type=checkbox],
   position: relative;
   width: 100%;
   height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 [sort-by] {
@@ -348,6 +355,15 @@ input[type=checkbox],
   border-bottom: 4px solid #000000;
 }
 
+.panel.panel-condensed {
+  .panel-heading {
+    padding: 5px 10px;
+  }
+  .panel-body {
+    padding: 5px;
+  }
+}
+
 @-moz-keyframes spin {
   100% {
     -moz-transform: rotateY(360deg);
diff --git a/vipra-ui/bower.json b/vipra-ui/bower.json
index e227cf749faed4d09b2360ff40aa8e11400cf589..7e8613c217b10bc8794b907822b9de8905de2cf4 100644
--- a/vipra-ui/bower.json
+++ b/vipra-ui/bower.json
@@ -29,7 +29,6 @@
     "nya-bootstrap-select": "^2.x",
     "font-awesome": "^4.x",
     "awesome-bootstrap-checkbox": "^0.x",
-    "angular-animate": "^1.x",
     "randomcolor": "randomColor#^0.x"
   }
 }
diff --git a/vipra-ui/gulpfile.js b/vipra-ui/gulpfile.js
index 07c59711b24582a8847e0e43100f8a46bacf8e91..bc5fed521378568cee5cd595a4ad74f3a3b07a8c 100644
--- a/vipra-ui/gulpfile.js
+++ b/vipra-ui/gulpfile.js
@@ -15,7 +15,6 @@ var assets = {
     'bower_components/jquery/dist/jquery.min.js',
     'bower_components/angular/angular.min.js',
     'bower_components/angular-resource/angular-resource.min.js',
-    'bower_components/angular-animate/angular-animate.min.js',
     'bower_components/angular-sanitize/angular-sanitize.min.js',
     'bower_components/angular-ui-router/release/angular-ui-router.min.js',
     'bower_components/bootstrap/dist/js/bootstrap.min.js',