diff --git a/vipra-ui/app/html/about.html b/vipra-ui/app/html/about.html
index 83bd3d4591f51b9ac75d5a45a824be4a2b009523..35f097b55e3e51013c58dc6dc41399f5ccb7e04a 100644
--- a/vipra-ui/app/html/about.html
+++ b/vipra-ui/app/html/about.html
@@ -1,277 +1,281 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'about'">
-  <div class="page-header">
-    <h1>About</h1>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="page-header">
+        <h1>About</h1>
+      </div>
+      <p><strong>Vipra</strong></p>
+      <p>Created by Eike Cochu</p>
+      <h3>Description</h3>
+      <p>The Vipra application is a topic modeling based search system with a frontend web application, a backend REST service and a maintenance tool for data import and modeling. It attempts to leverage automatically discovered topic informations in document collections to ease collection browsing and organization. The search system relies on ElasticSearch and Apache Lucene.</p>
+      <p>This application was created by Eike Cochu for his master's degree thesis in computer science, 2015-2016 at the Freie Universit&auml;t in Berlin, Germany.</p>
+      <h3>License</h3>
+      <p>The MIT License (MIT)</p>
+      <p>Copyright 2016 Eike Cochu</p>
+      <p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
+      <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
+      <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
+      <hr>
+      <h3>Version</h3>
+      <table class="table table-bordered table-fixed">
+        <tbody>
+          <tr>
+            <th style="width:33%">Git Version</th>
+            <td ng-bind="::info.app.gitsha1"></td>
+          </tr>
+          <tr>
+            <th>Artifact Version</th>
+            <td ng-bind="::info.app.version"></td>
+          </tr>
+          <tr>
+            <th>Build date</th>
+            <td ng-bind="::buildDate"></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Host</h3>
+      <table class="table table-bordered table-fixed">
+        <tbody>
+          <tr>
+            <th style="width:33%">CPU Cores</th>
+            <td ng-bind="::info.host.cores"></td>
+          </tr>
+          <tr>
+            <th>Available memory</th>
+            <td ng-bind="::info.host.memory"></td>
+          </tr>
+          <tr>
+            <th>OS</th>
+            <td ng-bind-template="{{::info.host.os.name}} ({{::info.host.os.arch}}) {{::info.host.os.version}}"></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>VM</h3>
+      <table class="table table-bordered table-fixed">
+        <tbody>
+          <tr>
+            <th style="width:33%">Java</th>
+            <td ng-bind-template="{{::info.vm.java.vendor}} {{::info.vm.java.version}}"></td>
+          </tr>
+          <tr>
+            <th>Start time</th>
+            <td ng-bind-template="{{::startTime}} (up {{::upTime}})"></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Database</h3>
+      <table class="table table-bordered table-fixed">
+        <tbody>
+          <tr>
+            <th style="width:33%"># of articles</th>
+            <td ng-bind-template="{{::info.db.articles}}"></td>
+          </tr>
+          <tr>
+            <th># of topics</th>
+            <td ng-bind-template="{{::info.db.topics}}"></td>
+          </tr>
+          <tr>
+            <th># of words</th>
+            <td ng-bind-template="{{::info.db.words}}"></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Constants</h3>
+      <table class="table table-bordered table-fixed">
+        <tbody>
+          <tr>
+            <th style="width:33%">Analyzer</th>
+            <td ng-bind-template="{{::info.const.analyzer}}"></td>
+          </tr>
+          <tr>
+            <th>Processor</th>
+            <td ng-bind-template="{{::info.const.processor}}"></td>
+          </tr>
+          <tr>
+            <th>Window resolution</th>
+            <td ng-bind-template="{{::info.const.windowres}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Analyzer, text processor and dynamic window resolution.
+            </td>
+          </tr>
+          <tr>
+            <th>Import buffer</th>
+            <td ng-bind-template="{{::info.const.importbuf}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The number of articles that are imported in one go.
+            </td>
+          </tr>
+          <tr>
+            <th>ES boost topics</th>
+            <td ng-bind-template="{{::info.const.esboosttopics}}"></td>
+          </tr>
+          <tr>
+            <th>ES boost titles</th>
+            <td ng-bind-template="{{::info.const.esboosttitles}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Boost parameters to modify the importance of search fields. Default is 1, all greater values raise field importance.
+            </td>
+          </tr>
+          <tr>
+            <th>Topic auto naming words</th>
+            <td ng-bind-template="{{::info.const.topicautoname}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The number of topic words to be used to automatically generate a topic name. Words are sorted by descending topic association likeliness.
+            </td>
+          </tr>
+          <tr>
+            <th>K topics</th>
+            <td ng-bind-template="{{::info.const.ktopics}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The number of topics to be generated in the topic modeling process.
+            </td>
+          </tr>
+          <tr>
+            <th>K topic words</th>
+            <td ng-bind-template="{{::info.const.ktopicwords}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The maximum number of words that are associated to a single topic.
+            </td>
+          </tr>
+          <tr>
+            <th>Rising decay weight</th>
+            <td ng-bind-template="{{::info.const.decaylambda}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              A weight to the rising decay caulculation of topic relevances. The higher this value, the more focus is put on later sequences containing more recent documents.
+            </td>
+          </tr>
+          <tr>
+            <th>Minimum relative probability</th>
+            <td ng-bind-template="{{::info.const.minrelprob}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The minimum relative probability of topic words. Words are accepted into a topic, if their probability exceeds
+              <it>maximum_probability * minimum_relative_probability</it>.
+            </td>
+          </tr>
+          <tr>
+            <th>Minimum share</th>
+            <td ng-bind-template="{{::info.const.minshare}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The minimum share of a topic to be accepted for an article. Topic shares are renormalized after rejecting topics below this threshold.
+            </td>
+          </tr>
+          <tr>
+            <th>Maximum similar documents</th>
+            <td ng-bind-template="{{::info.const.maxsimdocs}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Maximum number of similar documents for each document.
+            </td>
+          </tr>
+          <tr>
+            <th>Maximum divergence</th>
+            <td ng-bind-template="{{::info.const.maxdiv}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Maximum divergence between a document and similar documents. Lower values mean more similar documents (less divergence).
+            </td>
+          </tr>
+          <tr>
+            <th>Dynamic minimum iterations</th>
+            <td ng-bind-template="{{::info.const.dynminiter}}"></td>
+          </tr>
+          <tr>
+            <th>Dynamic maximum iterations</th>
+            <td ng-bind-template="{{::info.const.dynmaxiter}}"></td>
+          </tr>
+          <tr>
+            <th>Static iterations</th>
+            <td ng-bind-template="{{::info.const.statiter}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Iteration values for dynamic and static topic modeling.
+            </td>
+          </tr>
+          <tr>
+            <th>Word minimum frequency</th>
+            <td ng-bind-template="{{::info.const.docminfreq}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The minimum word frequency for unique words in an article to be used in the topic modeling process. Unique words with a lower frequency are ignored.
+            </td>
+          </tr>
+          <tr>
+            <th>Document minimum word count</th>
+            <td ng-bind-template="{{::info.const.docminlength}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The minimum article word count. Articles with less words are not included in the topic modeling process.
+            </td>
+          </tr>
+          <tr>
+            <th>Regex disallowed chars</th>
+            <td ng-bind-template="{{::info.const.charsdisallow}}"></td>
+          </tr>
+          <tr>
+            <th>Regex email</th>
+            <td ng-bind-template="{{::info.const.regexemail}}"></td>
+          </tr>
+          <tr>
+            <th>Regex URL</th>
+            <td ng-bind-template="{{::info.const.regexurl}}"></td>
+          </tr>
+          <tr>
+            <th>Regex number</th>
+            <td ng-bind-template="{{::info.const.regexnumber}}"></td>
+          </tr>
+          <tr>
+            <th>Regex single characters</th>
+            <td ng-bind-template="{{::info.const.regexchar}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              Regular expressions used in the article text procession. These regular expressions are used to remove unwanted text passages. Each match is replaced by empty strings.
+            </td>
+          </tr>
+          <tr>
+            <th>Excerpt length</th>
+            <td ng-bind-template="{{::info.const.excerptlength}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The maximum excerpt length that is inserted in the ElasticSearch index for display on the search result page.
+            </td>
+          </tr>
+          <tr>
+            <th>Date time format</th>
+            <td ng-bind-template="{{::info.const.dateformat}}"></td>
+          </tr>
+          <tr class="well">
+            <td colspan="2">
+              The date and time format for backend-frontend communication. This is not the format used for frontend display, which is based on localization.
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
-  <p><strong>Vipra</strong></p>
-  <p>Created by Eike Cochu</p>
-  <h3>Description</h3>
-  <p>The Vipra application is a topic modeling based search system with a frontend web application, a backend REST service and a maintenance tool for data import and modeling. It attempts to leverage automatically discovered topic informations in document collections to ease collection browsing and organization. The search system relies on ElasticSearch and Apache Lucene.</p>
-  <p>This application was created by Eike Cochu for his master's degree thesis in computer science, 2015-2016 at the Freie Universit&auml;t in Berlin, Germany.</p>
-  <h3>License</h3>
-  <p>The MIT License (MIT)</p>
-  <p>Copyright 2016 Eike Cochu</p>
-  <p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
-  <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
-  <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
-  <hr>
-  <h3>Version</h3>
-  <table class="table table-bordered table-fixed">
-    <tbody>
-      <tr>
-        <th style="width:33%">Git Version</th>
-        <td ng-bind="::info.app.gitsha1"></td>
-      </tr>
-      <tr>
-        <th>Artifact Version</th>
-        <td ng-bind="::info.app.version"></td>
-      </tr>
-      <tr>
-        <th>Build date</th>
-        <td ng-bind="::buildDate"></td>
-      </tr>
-    </tbody>
-  </table>
-  <h3>Host</h3>
-  <table class="table table-bordered table-fixed">
-    <tbody>
-      <tr>
-        <th style="width:33%">CPU Cores</th>
-        <td ng-bind="::info.host.cores"></td>
-      </tr>
-      <tr>
-        <th>Available memory</th>
-        <td ng-bind="::info.host.memory"></td>
-      </tr>
-      <tr>
-        <th>OS</th>
-        <td ng-bind-template="{{::info.host.os.name}} ({{::info.host.os.arch}}) {{::info.host.os.version}}"></td>
-      </tr>
-    </tbody>
-  </table>
-  <h3>VM</h3>
-  <table class="table table-bordered table-fixed">
-    <tbody>
-      <tr>
-        <th style="width:33%">Java</th>
-        <td ng-bind-template="{{::info.vm.java.vendor}} {{::info.vm.java.version}}"></td>
-      </tr>
-      <tr>
-        <th>Start time</th>
-        <td ng-bind-template="{{::startTime}} (up {{::upTime}})"></td>
-      </tr>
-    </tbody>
-  </table>
-  <h3>Database</h3>
-  <table class="table table-bordered table-fixed">
-    <tbody>
-      <tr>
-        <th style="width:33%"># of articles</th>
-        <td ng-bind-template="{{::info.db.articles}}"></td>
-      </tr>
-      <tr>
-        <th># of topics</th>
-        <td ng-bind-template="{{::info.db.topics}}"></td>
-      </tr>
-      <tr>
-        <th># of words</th>
-        <td ng-bind-template="{{::info.db.words}}"></td>
-      </tr>
-    </tbody>
-  </table>
-  <h3>Constants</h3>
-  <table class="table table-bordered table-fixed">
-    <tbody>
-      <tr>
-        <th style="width:33%">Analyzer</th>
-        <td ng-bind-template="{{::info.const.analyzer}}"></td>
-      </tr>
-      <tr>
-        <th>Processor</th>
-        <td ng-bind-template="{{::info.const.processor}}"></td>
-      </tr>
-      <tr>
-        <th>Window resolution</th>
-        <td ng-bind-template="{{::info.const.windowres}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Analyzer, text processor and dynamic window resolution.
-        </td>
-      </tr>
-      <tr>
-        <th>Import buffer</th>
-        <td ng-bind-template="{{::info.const.importbuf}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The number of articles that are imported in one go.
-        </td>
-      </tr>
-      <tr>
-        <th>ES boost topics</th>
-        <td ng-bind-template="{{::info.const.esboosttopics}}"></td>
-      </tr>
-      <tr>
-        <th>ES boost titles</th>
-        <td ng-bind-template="{{::info.const.esboosttitles}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Boost parameters to modify the importance of search fields. Default is 1, all greater values raise field importance.
-        </td>
-      </tr>
-      <tr>
-        <th>Topic auto naming words</th>
-        <td ng-bind-template="{{::info.const.topicautoname}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The number of topic words to be used to automatically generate a topic name. Words are sorted by descending topic association likeliness.
-        </td>
-      </tr>
-      <tr>
-        <th>K topics</th>
-        <td ng-bind-template="{{::info.const.ktopics}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The number of topics to be generated in the topic modeling process.
-        </td>
-      </tr>
-      <tr>
-        <th>K topic words</th>
-        <td ng-bind-template="{{::info.const.ktopicwords}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The maximum number of words that are associated to a single topic.
-        </td>
-      </tr>
-      <tr>
-        <th>Rising decay weight</th>
-        <td ng-bind-template="{{::info.const.decaylambda}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          A weight to the rising decay caulculation of topic relevances. The higher this value, the more focus is put on later sequences containing more recent documents.
-        </td>
-      </tr>
-      <tr>
-        <th>Minimum relative probability</th>
-        <td ng-bind-template="{{::info.const.minrelprob}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The minimum relative probability of topic words. Words are accepted into a topic, if their probability exceeds
-          <it>maximum_probability * minimum_relative_probability</it>.
-        </td>
-      </tr>
-      <tr>
-        <th>Minimum share</th>
-        <td ng-bind-template="{{::info.const.minshare}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The minimum share of a topic to be accepted for an article. Topic shares are renormalized after rejecting topics below this threshold.
-        </td>
-      </tr>
-      <tr>
-        <th>Maximum similar documents</th>
-        <td ng-bind-template="{{::info.const.maxsimdocs}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Maximum number of similar documents for each document.
-        </td>
-      </tr>
-      <tr>
-        <th>Maximum divergence</th>
-        <td ng-bind-template="{{::info.const.maxdiv}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Maximum divergence between a document and similar documents. Lower values mean more similar documents (less divergence).
-        </td>
-      </tr>
-      <tr>
-        <th>Dynamic minimum iterations</th>
-        <td ng-bind-template="{{::info.const.dynminiter}}"></td>
-      </tr>
-      <tr>
-        <th>Dynamic maximum iterations</th>
-        <td ng-bind-template="{{::info.const.dynmaxiter}}"></td>
-      </tr>
-      <tr>
-        <th>Static iterations</th>
-        <td ng-bind-template="{{::info.const.statiter}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Iteration values for dynamic and static topic modeling.
-        </td>
-      </tr>
-      <tr>
-        <th>Word minimum frequency</th>
-        <td ng-bind-template="{{::info.const.docminfreq}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The minimum word frequency for unique words in an article to be used in the topic modeling process. Unique words with a lower frequency are ignored.
-        </td>
-      </tr>
-      <tr>
-        <th>Document minimum word count</th>
-        <td ng-bind-template="{{::info.const.docminlength}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The minimum article word count. Articles with less words are not included in the topic modeling process.
-        </td>
-      </tr>
-      <tr>
-        <th>Regex disallowed chars</th>
-        <td ng-bind-template="{{::info.const.charsdisallow}}"></td>
-      </tr>
-      <tr>
-        <th>Regex email</th>
-        <td ng-bind-template="{{::info.const.regexemail}}"></td>
-      </tr>
-      <tr>
-        <th>Regex URL</th>
-        <td ng-bind-template="{{::info.const.regexurl}}"></td>
-      </tr>
-      <tr>
-        <th>Regex number</th>
-        <td ng-bind-template="{{::info.const.regexnumber}}"></td>
-      </tr>
-      <tr>
-        <th>Regex single characters</th>
-        <td ng-bind-template="{{::info.const.regexchar}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          Regular expressions used in the article text procession. These regular expressions are used to remove unwanted text passages. Each match is replaced by empty strings.
-        </td>
-      </tr>
-      <tr>
-        <th>Excerpt length</th>
-        <td ng-bind-template="{{::info.const.excerptlength}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The maximum excerpt length that is inserted in the ElasticSearch index for display on the search result page.
-        </td>
-      </tr>
-      <tr>
-        <th>Date time format</th>
-        <td ng-bind-template="{{::info.const.dateformat}}"></td>
-      </tr>
-      <tr class="well">
-        <td colspan="2">
-          The date and time format for backend-frontend communication. This is not the format used for frontend display, which is based on localization.
-        </td>
-      </tr>
-    </tbody>
-  </table>
 </div>
 <div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/articles/index.html b/vipra-ui/app/html/articles/index.html
index f07ba3a876b52262df0aec5c79d66b1fd8f5f47e..49ab0bc935473eecd1d9cef885b21b3e164b6d46 100644
--- a/vipra-ui/app/html/articles/index.html
+++ b/vipra-ui/app/html/articles/index.html
@@ -1,28 +1,50 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'articles'">
-  <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">
-      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>
-        <li value="date" class="nya-bs-option"><a>Date</a></li>
-        <li value="created" class="nya-bs-option"><a>Added</a></li>
-      </ol>
-      Direction
-      <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.order">
-        <li value="+" class="nya-bs-option"><a>Ascending</a></li>
-        <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 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">
+          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>
+            <li value="date" class="nya-bs-option"><a>Date</a></li>
+            <li value="created" class="nya-bs-option"><a>Added</a></li>
+          </ol>
+          Direction
+          <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.order">
+            <li value="+" class="nya-bs-option"><a>Ascending</a></li>
+            <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>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <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>
+              &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>
-  <pagination total="articlesTotal" page="page" limit="limit" change="changePage" />
-  <ol ng-attr-start="{{(page-1)*limit+1}}">
-    <li ng-repeat="article in articles">
-      <a ui-sref="articles.show({id: article.id})" ng-bind="::article.title"></a>
-    </li>
-  </ol>
-  <pagination total="articlesTotal" page="page" limit="limit" />
 </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 748b9853cd65547d04a76c7d487ea7d4c78ccfa5..3f335dee4593485392aded28bf80ab4ebabb4bff 100644
--- a/vipra-ui/app/html/articles/show.html
+++ b/vipra-ui/app/html/articles/show.html
@@ -1,85 +1,92 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'articles.show'">
-  <div class="page-header">
-    <h1 ng-bind="::article.title"></h1>
-    <table class="item-actions">
-      <tr>
-        <td>
-          <a class="btn btn-default" ui-sref="network({type:'articles', id:article.id})">
-            Network graph
-          </a>
-        </td>
-        <td>
-          <a class="btn btn-default" ui-sref="articles.show.similar({id:article.id})">
-            Similar
-          </a>
-        </td>
-      </tr>
-    </table>
-  </div>
-  <h3>Info</h3>
   <div class="row">
     <div class="col-md-12">
-      <table class="table table-bordered table-condensed table-fixed table-infos">
-        <tbody>
-          <tr>
-            <th>ID</th>
-            <td ng-bind="::article.id"></td>
-          </tr>
-          <tr>
-            <th>Date</th>
-            <td ng-bind="::articleDate"></td>
-          </tr>
+      <div class="page-header">
+        <h1 ng-bind="::article.title"></h1>
+        <table class="item-actions">
           <tr>
-            <th>URL</th>
             <td>
-              <a ng-href="{{::article.url}}" target="_blank">
-                <span class="glyphicon glyphicon-link"></span>
-                <span ng-bind="::article.url"></span>
+              <a class="btn btn-default" ui-sref="network({type:'articles', id:article.id})">
+                Network graph
               </a>
             </td>
           </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-8">
+      <div class="row">
+        <div class="col-md-12">
+          <h3>Info</h3>
+          <table class="table table-bordered table-condensed table-infos">
+            <tbody>
+              <tr>
+                <th>ID</th>
+                <td ng-bind="::article.id"></td>
+              </tr>
+              <tr>
+                <th>Date</th>
+                <td ng-bind="::articleDate"></td>
+              </tr>
+              <tr>
+                <th>URL</th>
+                <td>
+                  <a ng-href="{{::article.url}}" target="_blank">
+                    <span class="glyphicon glyphicon-link"></span>
+                    <span ng-bind="::article.url"></span>
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <th>Word count</th>
+                <td ng-bind="::article.stats.wordCount"></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <h3>Similar articles</h3>
+          <ul class="list-unstyled" ng-attr-start="{{(page-1)*limit+1}}">
+            <li ng-repeat="simArticle in article.similarArticles" class="ellipsize">
+              <small class="text-muted percent-align" ng-bind-template="({{((1-simArticle.divergence)*100).toFixed(0)}}%)"></small>
+              <a ui-sref="articles.show({id: simArticle.article.id})" ng-attr-title="{{::simArticle.article.title}}" ng-bind="::simArticle.article.title"></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4">
+      <h3>Topics</h3>
+      <table class="table table-bordered table-condensed table-nomargin" ng-show="article.topics.length > 0">
+        <tbody>
           <tr>
-            <th>Created</th>
-            <td ng-bind="::articleCreated"></td>
-          </tr>
-          <tr>
-            <th>Last modified</th>
-            <td ng-bind="::articleModified"></td>
+            <th>
+              Name
+            </th>
+            <th class="topic-share text-right">
+              Share
+            </th>
           </tr>
-          <tr>
-            <th>Word count</th>
-            <td ng-bind="::article.stats.wordCount"></td>
+          <tr ng-repeat="topic in article.topics | orderBy:topicSort:topicSortRev">
+            <td>
+              <topic-link topic="topic.topic" />
+              <span class="colorbox" style="background:{{::topic.color}}"></span>
+            </td>
+            <td class="text-right" ng-bind-template="{{(topic.share*100).toFixed(1)}}%"></td>
           </tr>
         </tbody>
       </table>
-    </div>
-  </div>
-  <h3>Topics</h3>
-  <div class="row">
-    <div class="col-md-5">
-      <table class="table table-morecondensed" ng-show="article.topics.length > 0">
-        <tr>
-          <th>
-            Name
-          </th>
-          <th class="topic-share">
-            Share
-          </th>
-        </tr>
-        <tr ng-repeat="topic in article.topics | orderBy:topicSort:topicSortRev">
-          <td>
-            <topic-link topic="topic.topic" />
-          </td>
-          <td class="text-right" ng-bind-template="{{(topic.share*100).toFixed(1)}}%"></td>
-        </tr>
-      </table>
       <span class="text-muted" ng-hide="article.topics.length > 0">No topics</span>
-    </div>
-    <div class="col-md-7">
       <div class="pie-chart" id="topic-share" highcharts="topicShare"></div>
     </div>
   </div>
   <hr>
-  <p ng-bind-html="::article.text" class="text-justify"></p>
+  <div class="row">
+    <div class="col-md-12 text-justify" ng-bind-html="::article.text"></div>
+  </div>
 </div>
 <div ng-cloak ui-view></div>
diff --git a/vipra-ui/app/html/articles/similar.html b/vipra-ui/app/html/articles/similar.html
deleted file mode 100644
index a8d167b5e0d5e71a76f4f70851af6a673712029f..0000000000000000000000000000000000000000
--- a/vipra-ui/app/html/articles/similar.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="container" ng-cloak ng-hide="$state.current.name !== 'articles.show.similar'">
-  <div class="page-header">
-    <h1 ng-bind="::article.title"></h1>
-    <table class="item-actions">
-      <tr>
-        <td>
-          <a class="btn btn-default" ui-sref="^">Back</a>
-        </td>
-      </tr>
-    </table>
-  </div>
-  <h3>Similar articles</h3>
-  <div class="row">
-
-  </div>
-</div>
\ No newline at end of file
diff --git a/vipra-ui/app/html/explorer.html b/vipra-ui/app/html/explorer.html
index dca997dde3e850eaa5bcf5686cff12d3ad3a2f58..8734f3db1e4bc341738930b8adaf6ab75b7af631 100644
--- a/vipra-ui/app/html/explorer.html
+++ b/vipra-ui/app/html/explorer.html
@@ -24,7 +24,7 @@
           <label class="check" ng-attr-for="{{::topic.id}}">
             <span class="ellipsis" ng-bind="::topic.name"></span>
           </label>
-          <span class="colorbox" style="background:rgb({{::topic.color.join()}})"></span>
+          <span class="colorbox" style="background:{{::topic.color}}"></span>
         </div>
       </li>
     </ul>
diff --git a/vipra-ui/app/html/index.html b/vipra-ui/app/html/index.html
index e672fa4cab3518df7d542c772e10b02bb3c41783..060ae53dcf0550b946a9206e627187ee4379a0cb 100644
--- a/vipra-ui/app/html/index.html
+++ b/vipra-ui/app/html/index.html
@@ -47,7 +47,7 @@
           <p>
             <span class="text" ng-bind="article.text"></span>
             <br>
-            <small class="text-muted" ng-bind-template="{{article.meta.score | toPercent}}% &ndash; {{article.date | formatDate}}"></small>
+            <small class="text-muted" ng-bind-template="{{::Vipra.toPercent(article.meta.score)}}% &ndash; {{::Vipra.formatDate(article.date)}}"></small>
           </p>
         </li>
       </ul>
diff --git a/vipra-ui/app/html/topics/index.html b/vipra-ui/app/html/topics/index.html
index 9e831c834ea646f4754cb3c249235bf6dbc70923..9cb3bc813f67dc49fc226b61e7e5f150bb99e266 100644
--- a/vipra-ui/app/html/topics/index.html
+++ b/vipra-ui/app/html/topics/index.html
@@ -1,27 +1,47 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'topics'">
-  <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">
-      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>
-        <li value="created" class="nya-bs-option"><a>Added</a></li>
-      </ol>
-      Direction
-      <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.order">
-        <li value="+" class="nya-bs-option"><a>Ascending</a></li>
-        <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 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">
+          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>
+            <li value="created" class="nya-bs-option"><a>Added</a></li>
+          </ol>
+          Direction
+          <ol class="nya-bs-select nya-bs-condensed" ng-model="opts.order">
+            <li value="+" class="nya-bs-option"><a>Ascending</a></li>
+            <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>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <pagination total="topicsTotal" 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="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>
-  <pagination total="topicsTotal" page="page" limit="limit" change="changePage" />
-  <ol ng-attr-start="{{(page-1)*limit+1}}">
-    <li ng-repeat="topic in topics">
-      <a ui-sref="topics.show({id: topic.id})">{{topic.name}}</a>
-    </li>
-  </ol>
-  <pagination total="topicsTotal" page="page" limit="limit" />
 </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 9a1e5f06ac8cc3dc01f4f574f95e31bd7c3f56a2..0f3b21d51df118480f9930154224d255e0ef4e63 100644
--- a/vipra-ui/app/html/topics/show.html
+++ b/vipra-ui/app/html/topics/show.html
@@ -1,44 +1,48 @@
 <div class="container" ng-cloak ng-hide="$state.current.name !== 'topics.show'">
-  <div class="page-header">
-    <h1>
-      <div ng-bind="topic.name" ng-hide="isRename"></div>
-      <div class="input-group input-group-lg" ng-show="isRename">
-        <input type="text" class="form-control" ng-model="topic.name" id="topicName" ng-keyup="keyup($event)">
-        <div class="input-group-btn">
-          <button class="btn btn-success" ng-click="endRename(true)">
-            <span class="glyphicon glyphicon-ok"></span>
-          </button>
-          <button class="btn btn-danger" ng-click="endRename(false)">
-            <span class="glyphicon glyphicon-remove"></span>
-          </button>
-        </div>
-      </div>
-    </h1>
-    <table class="item-actions">
-      <tr>
-        <td>
-          <div class="dropdown">
-            <button class="btn btn-default dropdown-toggle" type="button" id="actionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-              Actions
-              <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="actionsDropdown">
-              <li><a ng-click="startRename()">Rename</a></li>
-            </ul>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="page-header">
+        <h1>
+          <div ng-bind="topic.name" ng-hide="isRename"></div>
+          <div class="input-group input-group-lg" ng-show="isRename">
+            <input type="text" class="form-control" ng-model="topic.name" id="topicName" ng-keyup="keyup($event)">
+            <div class="input-group-btn">
+              <button class="btn btn-success" ng-click="endRename(true)">
+                <span class="glyphicon glyphicon-ok"></span>
+              </button>
+              <button class="btn btn-danger" ng-click="endRename(false)">
+                <span class="glyphicon glyphicon-remove"></span>
+              </button>
+            </div>
           </div>
-        </td>
-        <td>
-          <a class="btn btn-default" ui-sref="network({type:'topics', id:topic.id})">Network graph</a>
-        </td>
-        <td>
-          <a class="btn btn-default" ui-sref="topics.show.articles({id:topic.id})">Articles</a>
-        </td>
-      </tr>
-    </table>
+        </h1>
+        <table class="item-actions">
+          <tr>
+            <td>
+              <div class="dropdown">
+                <button class="btn btn-default dropdown-toggle" type="button" id="actionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                  Actions
+                  <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="actionsDropdown">
+                  <li><a ng-click="startRename()">Rename</a></li>
+                </ul>
+              </div>
+            </td>
+            <td>
+              <a class="btn btn-default" ui-sref="network({type:'topics', id:topic.id})">Network graph</a>
+            </td>
+            <td>
+              <a class="btn btn-default" ui-sref="topics.show.articles({id:topic.id})">Articles</a>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
   </div>
-  <h3>Info</h3>
   <div class="row">
     <div class="col-md-12">
+      <h3>Info</h3>
       <table class="table table-bordered table-condensed table-fixed table-infos">
         <tbody>
           <tr>
@@ -57,9 +61,9 @@
       </table>
     </div>
   </div>
-  <h3>Relevance over time</h3>
   <div class="row">
     <div class="col-md-12">
+      <h3>Relevance over time</h3>
       <div class="well well-sm">
         <div class="radio radio-inline">
           <input type="radio" id="seqAbsolute" ng-model="opts.seqstyle" value="absolute">
@@ -72,8 +76,7 @@
       </div>
     </div>
   </div>
-  <br>
-  <div class="row">
+  <div class="row row-spaced">
     <div class="col-md-12">
       <div class="area-chart" id="topic-seq" highcharts="topicSeq"></div>
     </div>
diff --git a/vipra-ui/app/js/app.js b/vipra-ui/app/js/app.js
index cfa37ff395f75cd560a4a2ac1842f6e1b02f8312..35b6b0e1b9428b47315a3fc535caaf5cf3871108 100644
--- a/vipra-ui/app/js/app.js
+++ b/vipra-ui/app/js/app.js
@@ -16,7 +16,6 @@
     'vipra.controllers',
     'vipra.directives',
     'vipra.factories',
-    'vipra.filters',
     'vipra.templates'
   ]);
 
@@ -64,12 +63,6 @@
       controller: 'ArticlesShowController'
     });
 
-    $stateProvider.state('articles.show.similar', {
-      url: '/similar',
-      templateUrl: 'html/articles/similar.html',
-      controller: 'ArticlesSimilarController'
-    });
-
     // states: topics
 
     $stateProvider.state('topics', {
@@ -136,6 +129,8 @@
 
     $rootScope.loading = {};
 
+    $rootScope.Vipra = window.Vipra;
+
   }]);
 
 })();
diff --git a/vipra-ui/app/js/controllers.js b/vipra-ui/app/js/controllers.js
index 4b791524bc1b5836aaecfb4f73372957fde61e7d..e5067fb8826a20df6f44c87b24cc2e44eb7c4cd7 100644
--- a/vipra-ui/app/js/controllers.js
+++ b/vipra-ui/app/js/controllers.js
@@ -2,7 +2,7 @@
  * Vipra Application
  * Controllers
  ******************************************************************************/
-/* globals angular, Vipra, moment, vis, console, $, prompt */
+/* globals angular, Vipra, moment, vis, console, $, prompt, randomColor */
 (function() {
 
   "use strict";
@@ -309,7 +309,7 @@
         fields: 'name,sequences,avgRelevance,varRelevance,risingRelevance,fallingRelevance,risingDecayRelevance'
       }, function(data) {
         $scope.topics = data;
-        var colors = Vipra.generateColors($scope.topics.length);
+        var colors = randomColor({ count: $scope.topics.length, seed: 1 });
         for (var i = 0; i < $scope.topics.length; i++)
           $scope.topics[i].color = colors[i];
       }, function(err) {
@@ -353,7 +353,7 @@
             series.push({
               name: topic.name,
               data: relevances,
-              color: 'rgb(' + topic.color.join() + ')'
+              color: topic.color
             });
           }
         }
@@ -430,11 +430,26 @@
         // calculate percentage share
         if ($scope.article.topics) {
           var topicShareSeries = [],
-            topics = $scope.article.topics;
-          for (var i = 0; i < topics.length; i++) {
-            topicShareSeries.push({ name: topics[i].topic.name.ellipsize(20), y: topics[i].share });
+            topics = $scope.article.topics,
+            maximum = { y: 0 },
+            colors = randomColor({ count: $scope.article.topics.length });
+          for (var i = 0, d; i < topics.length; i++) {
+            d = {
+              name: topics[i].topic.name,
+              y: topics[i].share,
+              color: colors[i]
+            };
+
+            topicShareSeries.push(d);
+            if(d.y > maximum.y)
+              maximum = d;
+
+            $scope.article.topics[i].color = colors[i];
           }
 
+          // preselect biggest value
+          maximum.selected = maximum.sliced = true;
+
           // highcharts data
           $scope.topicShare = topicShareChart([{
             name: 'Topic Share',
@@ -452,16 +467,8 @@
   /**
    * Article Similar route
    */
-  app.controller('ArticlesSimilarController', ['$scope', '$stateParams', 'ArticleFactory',
-    function($scope, $stateParams, ArticleFactory) {
-
-      ArticleFactory.get({
-        id: $stateParams.id
-      }, function(data) {
-        $scope.articles = data;
-      }, function(err) {
-        $scope.errors = err;
-      });
+  app.controller('ArticlesSimilarController', [
+    function() {
 
     }
   ]);
@@ -696,10 +703,20 @@
 
   function topicShareChart(series) {
     return {
-      chart: { type: 'pie' },
+      chart: {
+        type: 'pie',
+        spacingBottom: 0,
+        spacingTop: 0,
+        spacingLeft: 20,
+        spacingRight: 20,
+      },
       credits: { enabled: false },
       plotOptions: {
-        pie: { allowPointSelect: true }
+        pie: {
+          size: '100%',
+          dataLabels: { enabled: false },
+          allowPointSelect: true
+        }
       },
       title: { text: '' },
       tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
diff --git a/vipra-ui/app/js/filters.js b/vipra-ui/app/js/filters.js
deleted file mode 100644
index ecf60ee713e03aba567ea4680473ab803453bf80..0000000000000000000000000000000000000000
--- a/vipra-ui/app/js/filters.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/******************************************************************************
- * Vipra Application
- * Filters
- ******************************************************************************/
-/* globals angular, Vipra */
-(function() {
-
-  "use strict";
-
-  var app = angular.module('vipra.filters', []);
-
-  app.filter('toPercent', function() {
-    return Vipra.toPercent;
-  });
-
-  app.filter('formatDate', function() {
-    return Vipra.formatDate;
-  });
-
-  app.filter('formatDateTime', function() {
-    return Vipra.formatDateTime;
-  });
-
-})();
diff --git a/vipra-ui/app/js/helpers.js b/vipra-ui/app/js/helpers.js
index 0898a924c40c7fe542c34652a2c0ee64bcd96996..27d36b43d6b95676b7e74ad3a5fb7af1236086d6 100644
--- a/vipra-ui/app/js/helpers.js
+++ b/vipra-ui/app/js/helpers.js
@@ -9,6 +9,8 @@
 
   window.Vipra = window.Vipra || {};
 
+  Vipra.momo = 'hi';
+
   /**
    * Helpers
    */
@@ -36,98 +38,6 @@
     return 'id' + Math.random().toString(36).substring(7);
   };
 
-  /**
-   * taken from
-   * https://jsfiddle.net/aldass/9f0yadfy/
-   */
-  Vipra.generateColors = function(t) {
-    t = parseInt(t);
-    if (t < 2)
-      throw new Error("'t' must be greater than 1.");
-
-    // distribute the colors evenly on
-    // the hue range (the 'H' in HSV)
-    var i = 360 / (t - 1);
-
-    // hold the generated colors
-    var r = [];
-    var sv = 70;
-    for (var x = 0; x < t; x++) {
-      // alternate the s, v for more
-      // contrast between the colors.
-      sv = sv > 90 ? 70 : sv + 10;
-      r.push(Vipra.hsvToRgb(i * x, sv, sv));
-    }
-    return r;
-  };
-
-  /**
-   * HSV to RGB color conversion
-   *
-   * H runs from 0 to 360 degrees
-   * S and V run from 0 to 100
-   * 
-   * Ported from the excellent java algorithm by Eugene Vishnevsky at:
-   * http://www.cs.rit.edu/~ncs/color/t_convert.html
-   */
-  Vipra.hsvToRgb = function(h, s, v) {
-    var r, g, b;
-    var i;
-    var f, p, q, t;
-
-    h = Math.max(0, Math.min(360, h));
-    s = Math.max(0, Math.min(100, s));
-    v = Math.max(0, Math.min(100, v));
-    s /= 100;
-    v /= 100;
-
-    if (s === 0) {
-      r = g = b = v;
-      return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-    }
-
-    h /= 60;
-    i = Math.floor(h);
-    f = h - i;
-    p = v * (1 - s);
-    q = v * (1 - s * f);
-    t = v * (1 - s * (1 - f));
-
-    switch (i) {
-      case 0:
-        r = v;
-        g = t;
-        b = p;
-        break;
-      case 1:
-        r = q;
-        g = v;
-        b = p;
-        break;
-      case 2:
-        r = p;
-        g = v;
-        b = t;
-        break;
-      case 3:
-        r = p;
-        g = q;
-        b = v;
-        break;
-      case 4:
-        r = t;
-        g = p;
-        b = v;
-        break;
-      default:
-        r = v;
-        g = p;
-        b = q;
-    }
-
-    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-  };
-
   /**
    * Polyfills
    */
diff --git a/vipra-ui/app/less/app.less b/vipra-ui/app/less/app.less
index 1afc146e80ab034ac4894875d5d5d4f50b43d04a..59964cbc5db78c0ce4e4fb74636b876a047be350 100644
--- a/vipra-ui/app/less/app.less
+++ b/vipra-ui/app/less/app.less
@@ -181,13 +181,6 @@ ul.dashed {
   }
 }
 
-.row {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .caret.caret-up {
   content: "";
   border-top: 0;
@@ -198,18 +191,16 @@ ul.dashed {
   padding: 0;
 }
 
-.page-header h1 {
-  min-height: 48px;
-}
-
 .table-fixed {
   table-layout: fixed;
 }
 
-.table-infos {
-  tr > *:first-child {
-    width: 200px;
-  }
+.table-nomargin {
+  margin: 0;
+}
+
+.page-header h1 {
+  min-height: 48px;
 }
 
 .nya-bs-condensed {
@@ -288,6 +279,14 @@ revolve-select, [revolve-select] {
   vertical-align: middle;
 }
 
+.colorbox {
+  display: inline-block;
+  width: 10px;
+  height: 20px;
+  vertical-align: middle;
+  float: right;
+}
+
 .explorer {
   @sidebar-width: 300px;
 
@@ -338,14 +337,10 @@ revolve-select, [revolve-select] {
   }
 
   .colorbox {
-    display: inline-block;
-    visibility: hidden;
-    width: 10px;
-    height: 20px;
-    vertical-align: middle;
     position: absolute;
     right: 0;
     top: 0;
+    visibility: hidden;
   }
 
   .checkbox:hover .colorbox,
@@ -415,6 +410,19 @@ input[type=checkbox],
   }
 }
 
+.table-infos {
+  th {
+    white-space: nowrap;
+  }
+}
+
+.percent-align {
+  width: 45px;
+  text-align: right;
+  display: inline-block;
+  vertical-align: text-top;
+}
+
 @-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } }
 @-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } }
 @keyframes spin { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }
diff --git a/vipra-ui/bower.json b/vipra-ui/bower.json
index f45e1e27a253877a749b43b3f68067bbf6d214de..e227cf749faed4d09b2360ff40aa8e11400cf589 100644
--- a/vipra-ui/bower.json
+++ b/vipra-ui/bower.json
@@ -21,15 +21,15 @@
     "jquery": "^2.x",
     "angular": "^1.x",
     "angular-resource": "^1.x",
-    "angular-ui-router": "^0.2.17",
+    "angular-ui-router": "^0.x",
     "angular-sanitize": "^1.x",
     "highcharts": "^4.x",
     "vis": "^4.x",
     "moment": "^2.x",
     "nya-bootstrap-select": "^2.x",
     "font-awesome": "^4.x",
-    "awesome-bootstrap-checkbox": "^0.3.7",
-    "angular-bootstrap": "^1.x",
-    "angular-animate": "^1.5.0"
+    "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 e520fc6108a569b06372ca9480d7d885ce14834e..a6d5e5c8bab86626b58ff6d60c62e6fe782e259f 100644
--- a/vipra-ui/gulpfile.js
+++ b/vipra-ui/gulpfile.js
@@ -19,11 +19,11 @@ var assets = {
     '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',
-    //'bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
     'bower_components/highcharts/highcharts.js',
     'bower_components/vis/dist/vis.min.js',
     'bower_components/moment/min/moment.min.js',
-    'bower_components/nya-bootstrap-select/dist/js/nya-bs-select.min.js'
+    'bower_components/nya-bootstrap-select/dist/js/nya-bs-select.min.js',
+    'bower_components/randomcolor/randomColor.js'
   ],
   css: [
     'bower_components/bootstrap/dist/css/bootstrap.min.css',
diff --git a/vipra-util/src/main/java/de/vipra/util/Constants.java b/vipra-util/src/main/java/de/vipra/util/Constants.java
index d479aca51ff904e98abac1704118125a993c60d3..4c03608ca34f485db591b732dd43cd3162bd9329 100644
--- a/vipra-util/src/main/java/de/vipra/util/Constants.java
+++ b/vipra-util/src/main/java/de/vipra/util/Constants.java
@@ -106,7 +106,7 @@ public class Constants {
 	 * Maximum divergence between a document and similar documents. Lower values
 	 * mean more similar documents (less divergence). Default 1.0.
 	 */
-	public static final double MAX_DIVERGENCE = 1.0;
+	public static final double MAX_DIVERGENCE = 0.25;
 
 	/**
 	 * Dynamic minimum iterations. Used for dynamic topic modeling. Default 100.