diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
index 7eb5cd85da..b33bed826f 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
@@ -15,15 +15,16 @@ import { DragDropContext } from 'react-dnd';
 @DragDropContext(HTML5Backend)
 export default class DataBrowserHeaderBar extends React.Component {
   render() {
-    let { headers, onResize, selected, selectAll, onAddColumn, updateOrdering, readonly, handleDragDrop } = this.props;
+    let { headers, onResize, selected, selectAll, onAddColumn, updateOrdering, readonly, handleDragDrop, minWidth } = this.props;
     let elements = [
       // Note: bulk checkbox is disabled as all rows are selected (not just visible ones due to current lazy loading implementation)
       // TODO: add bulk checking only visible rows
-      <div key='check' className={[styles.wrap, styles.check].join(' ')}>
+      <div key='check' className={styles.check}>
         {readonly ? null : <input className={styles.disabled} type='checkbox' disabled={true} checked={false} onChange={(e) => selectAll(e.target.checked)} />}
       </div>
     ];
 
+
     headers.forEach(({ width, name, type, targetClass, order }, i) => {
       let wrapStyle = { width };
       if (i % 2) {
@@ -48,7 +49,7 @@ export default class DataBrowserHeaderBar extends React.Component {
             targetClass={targetClass}
             order={order}
             index={i}
-            moveDataBrowserHeader={this.props.handleDragDrop}/>
+            moveDataBrowserHeader={handleDragDrop}/>
         </div>
       );
       elements.push(
@@ -62,7 +63,7 @@ export default class DataBrowserHeaderBar extends React.Component {
     }
     elements.push(
       readonly ? null : (
-        <div key='add' className={styles.addColumn} style={finalStyle}>
+        <div key='add' className={[styles.wrap, styles.addColumn].join(' ')} style={finalStyle}>
           <a
             href='javascript:;'
             role='button'
@@ -74,6 +75,6 @@ export default class DataBrowserHeaderBar extends React.Component {
       )
     );
 
-    return <div className={styles.bar}>{elements}</div>;
+    return <div className={styles.bar} style={{ minWidth: minWidth }}>{elements}</div>;
   }
 }
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
index be4c3dc317..8f28d26049 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
@@ -12,10 +12,11 @@
   top: 0;
   left: 0;
   height: 30px;
-  background: #66637a;
+  background-color: #66637a;
   white-space: nowrap;
   display: inline-block;
   min-width: 100%;
+  width: 100%;
   // to resolve rendering issue with retina displays
   -webkit-transform: translate3d(0,0,0);
 }
@@ -48,6 +49,7 @@
 }
 
 .check {
+  display: inline-block;
   line-height: 30px;
   height: 30px;
   vertical-align: top;
diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
index 7cf6b2a7de..0fabf8754f 100644
--- a/src/dashboard/Data/Browser/Browser.scss
+++ b/src/dashboard/Data/Browser/Browser.scss
@@ -22,6 +22,10 @@
   &.safari {
     -webkit-transform: translate3d(0,0,0);
   }
+
+  &.showAddRow {
+    bottom: 36px;
+  }
 }
 
 @media (max-width: 980px) {
@@ -89,6 +93,7 @@
   top: 30px;
   bottom: 0;
   left: 0;
+  width: 100%;
   min-width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
@@ -98,6 +103,15 @@
   top: 126px;
 }
 
+.rowsHolder {
+  position: absolute;
+  top: 0;
+  right:0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
 .tableRow {
   @include MonospaceFont;
   font-size: 12px;
@@ -121,13 +135,15 @@
 }
 
 .addRow {
-  height: 30px;
+  position: fixed;
+  left: 300px;
+  right: 0;
+  bottom: 0;
+  height: 36px;
   padding: 8px;
-
-  a {
-    cursor: pointer;
-    display: inline-block;
-  }
+  display: inline-flex;
+  align-items: center;
+  border-top: 1px solid #ccc;
 
   svg {
     fill: $blue;
@@ -136,6 +152,42 @@
       fill: $darkBlue;
     }
   }
+
+  a {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 14px;
+    font-size: 12px;
+    font-weight: 700;
+    height: 24px;
+    padding: 0 10px;
+    border-radius: 2px;
+    border: 1px solid transparent;
+  }
+
+  + .rowsHolder {
+    bottom: 60px;
+  }
+}
+
+.addNewRow {
+  position: relative;
+  margin-bottom: 30px;
+  border-bottom: 1px solid #169CEE;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    border-bottom: 2px solid #0092ff;
+  }
+
+  + .rowsHolder {
+    position: relative;
+  }
 }
 
 .notification {
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 98199624f2..95b697633d 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -87,7 +87,7 @@ export default class BrowserTable extends React.Component {
     let attributes = obj.attributes;
     let index = row - this.state.offset;
     return (
-      <div key={`row${index}`} className={styles.tableRow} style={{ minWidth: rowWidth }}>
+      <div key={`row${index}`} className={styles.tableRow}>
         <span className={styles.checkCell}>
           <input
             type='checkbox'
@@ -154,15 +154,19 @@ export default class BrowserTable extends React.Component {
     ));
     let editor = null;
     let table = <div ref='table' />;
+    let classes = [styles.browser, browserUtils.isSafari() ? styles.safari : '']
+    let addRow = null;
+    let rowWidth = 0;
+
     if (this.props.data) {
-      let rowWidth = 210;
+      rowWidth = 210;
       for (let i = 0; i < this.props.order.length; i++) {
         rowWidth += this.props.order[i].width;
       }
       let newRow = null;
       if (this.props.newObject && this.state.offset <= 0) {
         newRow = (
-          <div style={{ marginBottom: 30, borderBottom: '1px solid #169CEE' }}>
+          <div className={styles.addNewRow}>
             {this.renderRow({ row: -1, obj: this.props.newObject, rowWidth: rowWidth })}
           </div>
         );
@@ -238,47 +242,34 @@ export default class BrowserTable extends React.Component {
         }
       }
 
-      let addRow = null;
-      if (!this.props.newObject) {
-        if (this.props.relation) {
-          addRow = (
-            <div className={styles.addRow}>
-              <Button
-                onClick={this.props.onAddRow}
-                primary
-                value={`Create a ${this.props.relation.targetClassName} and attach`}
-              />
-              {' '}
-              <Button
-                onClick={this.props.onAttachRows}
-                primary
-                value={`Attach existing rows from ${this.props.relation.targetClassName}`}
-              />
-            </div>
-          );
-        } else {
-          addRow = (
-            <div className={styles.addRow}>
-              <a onClick={this.props.onAddRow}>
-                <Icon
-                  name='plus-outline'
-                  width={14}
-                  height={14}
-                />
-              </a>
-            </div>
-          );
-        }
+      if (!this.props.newObject && this.props.relation) {
+        classes.push(styles.showAddRow);
+
+        addRow = (
+          <div className={styles.addRow}>
+            <Button
+              onClick={this.props.onAddRow}
+              primary
+              value={`Create a ${this.props.relation.targetClassName} and attach`}
+            />
+            {' '}
+            <Button
+              onClick={this.props.onAttachRows}
+              primary
+              value={`Attach existing rows from ${this.props.relation.targetClassName}`}
+            />
+          </div>
+        );
       }
 
       if (this.props.newObject || this.props.data.length > 0) {
         table = (
-          <div className={styles.table} ref='table'>
-            <div style={{ height: Math.max(0, this.state.offset * ROW_HEIGHT) }} />
+          <div className={styles.table} ref='table' style={{ minWidth: rowWidth }}>
             {newRow}
-            {rows}
-            <div style={{ height: Math.max(0, (this.props.data.length - this.state.offset - MAX_ROWS) * ROW_HEIGHT) }} />
             {addRow}
+            <div className={styles.rowsHolder} style={{ top: Math.max(0, this.state.offset * ROW_HEIGHT) }}>
+              {rows}
+            </div>
             {editor}
           </div>
         );
@@ -309,7 +300,7 @@ export default class BrowserTable extends React.Component {
     }
 
     return (
-      <div className={[styles.browser, browserUtils.isSafari() ? styles.safari : ''].join(' ')}>
+      <div className={classes.join(' ')}>
         {table}
         <DataBrowserHeaderBar
           selected={this.props.selection['*']}
@@ -319,7 +310,8 @@ export default class BrowserTable extends React.Component {
           readonly={!!this.props.relation}
           handleDragDrop={this.props.handleHeaderDragDrop}
           onResize={this.props.handleResize}
-          onAddColumn={this.props.onAddColumn} />
+          onAddColumn={this.props.onAddColumn}
+          minWidth={rowWidth} />
       </div>
     );
   }