diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index 699a29632a8..b1e549c5e99 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -55,7 +55,11 @@
   top: 50px;
   width: 100%;
   height: 54px;
-  z-index: 3;
+  z-index: 4;
+}
+
+.noBoxShadow {
+  box-shadow: none !important;
 }
 
 .noteAction h3 {
@@ -112,12 +116,34 @@
 
 .setting {
   background-color: white;
-  padding: 10px 15px 15px 15px;
-  margin-left: -10px;
-  margin-right: -10px;
+  padding: 0px 0px 15px 0px;
+  margin: 44px -10px 0px -10px;
   font-family: 'Roboto', sans-serif;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
   border-bottom: 1px solid #E5E5E5;
+  position: fixed;
+  width: 100%;
+  z-index: 3;
+  /* max-height = page - (Navbar 54px + ActionBar 49px + Style Margin 30px) */
+  max-height: calc(100% - 133px);
+  overflow: auto;
+}
+
+.setting .settings-header {
+  position: fixed;
+  background-color: white;
+  width: 100%;
+}
+.setting .settings-body {
+  margin-top: 55px;
+}
+
+.settings-content-padding {
+  padding: 0px 15px 0px 15px;
+}
+
+.setting hr {
+  margin: 10px 0px 10px 0px;
 }
 
 .setting .interpreterSettings {
diff --git a/zeppelin-web/src/app/notebook/notebook.html b/zeppelin-web/src/app/notebook/notebook.html
index 9c5440d886b..c40c12f852d 100644
--- a/zeppelin-web/src/app/notebook/notebook.html
+++ b/zeppelin-web/src/app/notebook/notebook.html
@@ -12,7 +12,7 @@
 limitations under the License.
 -->
 <!-- Here the controller <NotebookCtrl> is not needed because explicitly set in the app.js (route) -->
-<div class="noteAction" ng-show="note.id && !paragraphUrl">
+<div class="noteAction" ng-class="{'noBoxShadow':showSetting}" ng-show="note.id && !paragraphUrl">
   <h3>
     <input type="text" class="form-control2" placeholder="{{note.name || 'Note ' + note.id}}" style="width:200px;"
            ng-show="showEditor" ng-model="note.name" ng-enter="sendNewName()" ng-escape="showEditor = false" autofocus/>
@@ -135,38 +135,41 @@ <h3>
   </h3>
 </div>
 
-<div style="padding-top: 36px;">
-  <!-- settings -->
-  <div ng-if="showSetting" class="setting">
+<!-- settings -->
+<div ng-if="showSetting" class="setting">
+  <div class="settings-header settings-content-padding">
     <div>
       <h4>Settings</h4>
     </div>
     <hr />
-    <div>
-      <h5>Interpreter binding</h5>
-      <p>
-        Bind interpreter for this note.
-        Click to Bind/Unbind interpreter.
-        Drag and drop to reorder interpreters. <br />
-        The first interpreter on the list becomes default. To create/remove interpreters, go to <a href="/#/interpreter">Interpreter</a> menu.
-      </p>
+  </div>
+  <div class="settings-body settings-content-padding">
+    <h5>Interpreter binding</h5>
+    <p>
+      Bind interpreter for this note.
+      Click to Bind/Unbind interpreter.
+      Drag and drop to reorder interpreters. <br />
+      The first interpreter on the list becomes default. To create/remove interpreters, go to <a href="/#/interpreter">Interpreter</a> menu.
+    </p>
 
-      <div class="interpreterSettings"
-           as-sortable="interpreterSelectionListeners" data-ng-model="interpreterBindings">
-        <div data-ng-repeat="item in interpreterBindings" as-sortable-item>
-          <div as-sortable-item-handle
-               ng-click="item.selected = !item.selected"
-               class="btn"
-               ng-class="{'btn-info': item.selected, 'btn-default': !item.selected}"><font style="font-size:16px">{{item.name}}</font> <small><span ng-repeat="intp in item.interpreters"><span ng-show="!$first">, </span>%{{intp.name}}</span></small></div>
-        </div>
+    <div class="interpreterSettings"
+         as-sortable="interpreterSelectionListeners" data-ng-model="interpreterBindings">
+      <div data-ng-repeat="item in interpreterBindings" as-sortable-item>
+        <div as-sortable-item-handle
+             ng-click="item.selected = !item.selected"
+             class="btn"
+             ng-class="{'btn-info': item.selected, 'btn-default': !item.selected}"><font style="font-size:16px">{{item.name}}</font> <small><span ng-repeat="intp in item.interpreters"><span ng-show="!$first">, </span>%{{intp.name}}</span></small></div>
       </div>
     </div>
-    <br />
-    <div>
-      <button class="btn btn-primary" ng-click="saveSetting()">Save</button>
-      <button class="btn btn-default" ng-click="closeSetting()">Cancel</button>
-    </div>
   </div>
+  <br />
+  <div class="settings-content-padding">
+    <button class="btn btn-primary" ng-click="saveSetting()">Save</button>
+    <button class="btn btn-default" ng-click="closeSetting()">Cancel</button>
+  </div>
+</div>
+
+<div style="padding-top: 36px;">
 
   <div class="note-jump"></div>