diff --git a/src/app/home/index.less b/src/app/home/index.less
index 7c37190ba23..afc619f42b1 100644
--- a/src/app/home/index.less
+++ b/src/app/home/index.less
@@ -62,8 +62,8 @@
 .collection-view {
   header {
     padding: 12px 0 0;
-    position: relative;
-    z-index: 1;
+    position: fixed;
+    z-index: 4;
     background: @pw;
     .row {
       margin-left: 0;
@@ -94,6 +94,10 @@
     }
   }
 
+  .header-margin {
+    margin-top: 154px; // size of header
+  }
+
   .column {
     overflow: auto;
     height: auto;
diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index fc5a0cba99a..095c4dd0f25 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -236,7 +236,7 @@ class DocumentList extends React.Component {
    */
   render() {
     return (
-      <div>
+      <div className="header-margin">
         <this.samplingMessage insertHandler={this.handleOpenInsert.bind(this)} />
         <div className="column-container with-refinebar-and-message">
           <div className="column main">
diff --git a/src/internal-packages/explain/lib/components/compass-explain.jsx b/src/internal-packages/explain/lib/components/compass-explain.jsx
index 7b69a27cacd..b7643fb6d3f 100644
--- a/src/internal-packages/explain/lib/components/compass-explain.jsx
+++ b/src/internal-packages/explain/lib/components/compass-explain.jsx
@@ -35,7 +35,7 @@ class CompassExplain extends React.Component {
    */
   render() {
     return (
-      <div className="compass-explain">
+      <div className="compass-explain header-margin">
         <div className="flexbox-fix"></div>
         <div className="column-container with-refinebar">
           <div className="column main">
diff --git a/src/internal-packages/indexes/lib/component/indexes.jsx b/src/internal-packages/indexes/lib/component/indexes.jsx
index c11786849b1..9cac29b9ab2 100644
--- a/src/internal-packages/indexes/lib/component/indexes.jsx
+++ b/src/internal-packages/indexes/lib/component/indexes.jsx
@@ -16,7 +16,7 @@ class Indexes extends React.Component {
    */
   render() {
     return (
-      <div className="index-container">
+      <div className="index-container header-margin">
         <div className="flexbox-fix"></div>
         <div className="column-container">
           <div className="column main">
diff --git a/src/internal-packages/schema/lib/component/index.jsx b/src/internal-packages/schema/lib/component/index.jsx
index 6aaeaaf2a29..b1708d2527c 100644
--- a/src/internal-packages/schema/lib/component/index.jsx
+++ b/src/internal-packages/schema/lib/component/index.jsx
@@ -82,7 +82,7 @@ const Schema = React.createClass({
       return <Field key={field.name} {...field} />;
     });
     return (
-      <div>
+      <div className="header-margin">
         <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
         <div className="column-container with-refinebar-and-message">
           <div className="column main">
diff --git a/src/internal-packages/validation/lib/components/validation.jsx b/src/internal-packages/validation/lib/components/validation.jsx
index c240eae6d65..932f5dcdd08 100644
--- a/src/internal-packages/validation/lib/components/validation.jsx
+++ b/src/internal-packages/validation/lib/components/validation.jsx
@@ -62,7 +62,7 @@ class Validation extends React.Component {
       this.props.viewMode : 'JSON';
 
     return (
-      <div className="validation">
+      <div className="validation header-margin">
         <Grid fluid>
           <StatusRow>
             <ViewSwitcher