diff --git a/package.json b/package.json
index cdd0cc995..5aa794f76 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "tdp_core",
   "description": "Target discovery platform for exploring rankings of genes, disease models, and other entities.",
   "homepage": "https://phovea.caleydo.org",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "author": {
     "name": "datavisyn",
     "email": "contact@caleydo.org",
diff --git a/src/lineup/ARankingView.ts b/src/lineup/ARankingView.ts
index 90ed1e381..9341c9b7a 100644
--- a/src/lineup/ARankingView.ts
+++ b/src/lineup/ARankingView.ts
@@ -63,7 +63,7 @@ export interface IARankingViewOptions {
    */
   enableZoom: boolean;
 
-  enableSidePanel: boolean | 'collapsed';
+  enableSidePanel: boolean | 'collapsed' | 'top';
 
   enableAddingColumns: boolean;
 
@@ -233,7 +233,9 @@ export abstract class ARankingView extends AView {
 
     if (this.options.enableSidePanel) {
       this.node.appendChild(this.panel.node);
-      this.taggle.pushUpdateAble((ctx) => this.panel.panel.update(ctx));
+      if (this.options.enableSidePanel !== 'top') {
+        this.taggle.pushUpdateAble((ctx) => this.panel.panel.update(ctx));
+      }
     }
 
     this.selectionHelper = new LineUpSelectionHelper(this.provider, () => this.itemIDType);
@@ -248,7 +250,12 @@ export abstract class ARankingView extends AView {
       // inject stats
       const base = <HTMLElement>params.querySelector('form') || params;
       base.insertAdjacentHTML('beforeend', `<div class="form-group"></div>`);
-      base.lastElementChild!.appendChild(this.stats);
+      const container = <HTMLElement>base.lastElementChild!;
+      container.appendChild(this.stats);
+
+      if (this.options.enableSidePanel === 'top') {
+        container.insertAdjacentElement('afterbegin', this.panel.node);
+      }
     });
   }
 
diff --git a/src/lineup/internal/LineUpPanelActions.ts b/src/lineup/internal/LineUpPanelActions.ts
index 458939211..5a96db31c 100644
--- a/src/lineup/internal/LineUpPanelActions.ts
+++ b/src/lineup/internal/LineUpPanelActions.ts
@@ -59,7 +59,8 @@ export default class LineUpPanelActions extends EventHandler {
 
   private readonly search: SearchBox<ISearchOption> | null;
 
-  readonly panel: SidePanel;
+  readonly panel: SidePanel | null;
+  readonly node: HTMLElement;
   private overview: HTMLElement;
   private wasCollapsed = false;
 
@@ -71,18 +72,22 @@ export default class LineUpPanelActions extends EventHandler {
         placeholder: 'Add Column...'
       });
       this.search.on(SearchBox.EVENT_SELECT, (item) => {
-        this.node.querySelector('header')!.classList.remove('once');
+        this.node.querySelector('.lu-adder')!.classList.remove('once');
         item.action();
       });
     }
 
-    this.panel = new SidePanel(ctx, doc, {
-      chooser: false
-    });
-
-    if (options.enableSidePanel === 'collapsed') {
-      this.collapse = true;
+    if (this.options.enableSidePanel !== 'top') {
+      this.panel = new SidePanel(ctx, doc, {
+        chooser: false
+      });
+      this.node = this.panel.node;
+    } else {
+      this.node = doc.createElement('div');
+      this.node.classList.add('lu-side-panel', 'lu-side-panel-top');
     }
+    this.node.classList.add('tdp-view-lineup');
+    this.collapse = options.enableSidePanel === 'top' || options.enableSidePanel === 'collapsed';
 
     this.init();
   }
@@ -118,26 +123,28 @@ export default class LineUpPanelActions extends EventHandler {
     this.node.style.display = 'flex';
   }
 
-  get wasHidden() {
-    return this.node.style.display === 'none';
+  private get isTopMode() {
+    return this.options.enableSidePanel === 'top';
   }
 
-  get node() {
-    return this.panel.node;
+  get wasHidden() {
+    return this.node.style.display === 'none';
   }
 
   private init() {
     this.node.insertAdjacentHTML('afterbegin', `
-      <a href="#" title="(Un)Collapse"></a>
       <section></section>
       <div class="lu-adder">${this.search ? '<button class="fa fa-plus" title="Add Column"></button>' : ''}
       </div>`);
 
-    this.node.querySelector('a')!.addEventListener('click', (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-      this.collapse = !this.collapse;
-    });
+    if (!this.isTopMode) { // top mode doesn't need collapse feature
+      this.node.insertAdjacentHTML('afterbegin', `<a href="#" title="(Un)Collapse"></a>`);
+      this.node.querySelector('a')!.addEventListener('click', (evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.collapse = !this.collapse;
+      });
+    }
 
     const buttons = this.node.querySelector('section');
     this.appendExtraButtons().forEach((b) => buttons.appendChild(b));
@@ -211,7 +218,7 @@ export default class LineUpPanelActions extends EventHandler {
     node.innerHTML = `
       <button type="button" class="dropdown-toggle fa fa-download" style="width: 100%;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Download Data">
       </button>
-      <ul class="dropdown-menu dropdown-menu-right">
+      <ul class="dropdown-menu dropdown-menu-${this.isTopMode ? 'left' : 'right'}">
         <li class="dropdown-header">Download All Rows</li>
         <li><a href="#" data-s="a" data-t="csv">CSV (comma separated)</a></li>
         <li><a href="#" data-s="a" data-t="tsv">TSV (tab separated)</a></li>
diff --git a/src/styles/_view_lineup.scss b/src/styles/_view_lineup.scss
index 5bcabe057..a8434de44 100644
--- a/src/styles/_view_lineup.scss
+++ b/src/styles/_view_lineup.scss
@@ -11,23 +11,126 @@
     line-height: 1;
   }
 
-  %lu-panel-button {
-    background: #fff;
-    border: 1px solid #ddd;
-    padding: 5px 10px;
-    cursor: pointer;
-    z-index: 1;
-    color: #000;
-
-    &:hover {
-      background-color: #eaeaea;
+  > div {
+    flex: 1 1 auto;
+    position: relative;
+  }
+
+  &.overview-detail {
+    > div {
+      display: flex;
+      flex-direction: column;
+
+      > header {
+        flex: 0 0 auto;
+      }
+
+      > div {
+        flex: 1 1 auto;
+        position: relative;
+      }
+    }
+
+    header.overview {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      overflow: auto;
     }
   }
+}
+
+.lu-dialog {
+  label: {
+    margin: 0;
+  }
+
+  &.lu-filter-table > div:first-of-type > * {
+    flex: 0 0 auto;
+  }
+}
+
+.lu-collapser {
+  display: none;
+}
+
+.lineup-engine {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+
+  > header {
+    padding-bottom: 1px; // no idea otherwise scrollbar
+  }
+
+  footer {
+    display: block !important;
+  }
+}
+
+$lu_assets: '~lineupjs/src/assets';
+
+@at-root {
+
+  .tdp-ranking-export-form {
+    user-select: none;
+    -moz-user-select: none;
+
+    .radio {
+      margin-left: 1em;
+    }
+  }
+
+  .tdp-ranking-export-form-handle {
+    > span {
+      visibility: hidden;
+      padding: 0 0.5em 0 1em;
+      cursor: grab;
+    }
+
+    &:hover > span,
+    &.dragging > span {
+      visibility: visible;
+    }
+
+    &.dragging {
+      border: 1px solid lightgray;
+      border-radius: 3px;
+      cursor: grabbing;
+    }
+  }
+
+  .lu-side-panel > main > section::before {
+    content: 'Column Summaries';
+  }
+
+  .lu-hierarchy .lu-search::before {
+    height: 19px;
+  }
 
-  .lu-side-panel {
+  .tdp-view-lineup.lu-side-panel {
     flex: 0 0 auto;
     position: relative;
 
+
+    %lu-panel-button {
+      background: #fff;
+      border: 1px solid #ddd;
+      padding: 5px 10px;
+      cursor: pointer;
+      z-index: 1;
+      color: #000;
+
+      &:hover {
+        background-color: #eaeaea;
+      }
+    }
+
     > section {
       flex: 0 0 auto;
       display: flex;
@@ -174,105 +277,47 @@
     }
   }
 
-  > div {
-    flex: 1 1 auto;
-    position: relative;
-  }
+  .lu-sidepanel-top-form {
+    display: flex;
 
-  &.overview-detail {
-    > div {
-      display: flex;
-      flex-direction: column;
-
-      > header {
-        flex: 0 0 auto;
-      }
-
-      > div {
-        flex: 1 1 auto;
-        position: relative;
-      }
-    }
-
-    header.overview {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      overflow: auto;
+    > p {
+      flex: 1 1 0;
     }
   }
-}
 
-.lu-dialog {
-  label: {
-    margin: 0;
-  }
+  .lu-side-panel-top.tdp-view-lineup.lu-side-panel.collapsed {
+    display: inline-flex;
+    flex-direction: row;
+    z-index: 100;
+    max-width: unset;
+    width: unset;
+    float: right;
 
-  &.lu-filter-table > div:first-of-type > * {
-    flex: 0 0 auto;
-  }
-}
-
-.lu-collapser {
-  display: none;
-}
-
-.lineup-engine {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-
-  > header {
-    padding-bottom: 1px; // no idea otherwise scrollbar
-  }
-
-  footer {
-    display: block !important;
-  }
-}
-
-$lu_assets: '~lineupjs/src/assets';
-
-@at-root {
-
-  .tdp-ranking-export-form {
-    user-select: none;
-    -moz-user-select: none;
+    > section {
+      flex-direction: row;
+      max-width: unset;
+    }
 
-    .radio {
+    .gap {
+      margin-top: unset;
       margin-left: 1em;
     }
-  }
 
-  .tdp-ranking-export-form-handle {
-    > span {
-      visibility: hidden;
-      padding: 0 0.5em 0 1em;
-      cursor: grab;
-    }
+    > div.lu-adder {
+      margin-top: 0;
 
-    &:hover > span,
-    &.dragging > span {
-      visibility: visible;
-    }
+      &.once .lu-search {
+        left: -1.2em;
+      }
 
-    &.dragging {
-      border: 1px solid lightgray;
-      border-radius: 3px;
-      cursor: grabbing;
+      &.once::before {
+        content: '';
+        top: -10px;
+        left: -2.5em;
+        right: -15em;
+        bottom: -3em;
+        position: absolute;
+      }
     }
   }
-
-  .lu-side-panel > main > section::before {
-    content: 'Column Summaries';
-  }
-
-  .lu-hierarchy .lu-search::before {
-    height: 19px;
-  }
 }