diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index b5b439ae7f7..6db1f927851 100644
--- a/zeppelin-web/bower.json
+++ b/zeppelin-web/bower.json
@@ -25,7 +25,8 @@
     "angular-xeditable": "0.1.8",
     "highlightjs": "~8.4.0",
     "lodash": "~3.9.3",
-    "angular-filter": "~0.5.4"
+    "angular-filter": "~0.5.4",
+    "angular-ui-notification": "0.0.11"
   },
   "devDependencies": {
     "angular-mocks": "1.3.8"
diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js
index 6dfa8e5d911..b8cad77d6e0 100644
--- a/zeppelin-web/src/app/app.js
+++ b/zeppelin-web/src/app/app.js
@@ -30,7 +30,8 @@ angular.module('zeppelinWebApp', [
     'angular.filter',
     'monospaced.elastic',
     'puElasticInput',
-    'xeditable'
+    'xeditable',
+    'ui-notification',
   ])
   .filter('breakFilter', function() {
     return function (text) {
diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index 0d3de89b64d..1de61e1e3bd 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -83,6 +83,19 @@
   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
 }
 
+.ui-notification{
+  position:fixed;
+  z-index:9999;
+  width:100px;
+  cursor:pointer;
+  -webkit-transition:all ease .5s;
+  -o-transition:all ease .5s;
+  transition:all ease .5s;
+  color:#fff;
+  background:#337ab7;
+  box-shadow:5px 5px 10px rgba(0,0,0,.3)
+}
+
 .ace_marker-layer .ace_selection {
     z-index: 0 !important;
 }
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 3102869f2a0..48d275a8259 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -17,7 +17,7 @@
 
 angular.module('zeppelinWebApp')
   .controller('ParagraphCtrl', function($scope,$rootScope, $route, $window, $element, $routeParams, $location,
-                                         $timeout, $compile, websocketMsgSrv) {
+                                         $timeout, $compile, websocketMsgSrv, Notification) {
 
   $scope.paragraph = null;
   $scope.editor = null;
@@ -258,6 +258,7 @@ angular.module('zeppelinWebApp')
       return;
     }
     commitParagraph($scope.paragraph.title, $scope.dirtyText, $scope.paragraph.config, $scope.paragraph.settings.params);
+    Notification.info({message: 'Saved', positionY: 'bottom', positionX: 'right'});
     $scope.dirtyText = undefined;
   };
 
@@ -434,7 +435,6 @@ angular.module('zeppelinWebApp')
       $scope.editor.setShowFoldWidgets(false);
       $scope.editor.setHighlightActiveLine(false);
       $scope.editor.setHighlightGutterLine(false);
-      $scope.editor.setTheme('ace/theme/github');
       $scope.editor.setTheme('ace/theme/chrome');
       $scope.editor.focus();
       var hight = $scope.editor.getSession().getScreenLength() * $scope.editor.renderer.lineHeight + $scope.editor.renderer.scrollBar.getWidth();
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index 6fdc2f2f4ca..7d6c947fda0 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -42,6 +42,7 @@
     <link rel="stylesheet" href="bower_components/ng-sortable/dist/ng-sortable.css" />
     <link rel="stylesheet" href="bower_components/angular-xeditable/dist/css/xeditable.css" />
     <link rel="stylesheet" href="bower_components/highlightjs/styles/github.css" />
+    <link rel="stylesheet" href="bower_components/angular-ui-notification/dist/angular-ui-notification.min.css" />
     <!-- endbower -->
     <link rel="stylesheet" href="bower_components/jquery-ui/themes/base/all.css" />
     <!-- endbuild -->
@@ -110,6 +111,7 @@
     <script src="bower_components/highlightjs/highlight.pack.js"></script>
     <script src="bower_components/lodash/lodash.js"></script>
     <script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
+    <script src="bower_components/angular-ui-notification/dist/angular-ui-notification.min.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->
diff --git a/zeppelin-web/test/karma.conf.js b/zeppelin-web/test/karma.conf.js
index e85abdb0741..cce4f96f064 100644
--- a/zeppelin-web/test/karma.conf.js
+++ b/zeppelin-web/test/karma.conf.js
@@ -35,9 +35,10 @@ module.exports = function(config) {
       'bower_components/ace-builds/src-noconflict/mode-scala.js',
       'bower_components/ace-builds/src-noconflict/mode-sql.js',
       'bower_components/ace-builds/src-noconflict/mode-markdown.js',
+      'bower_components/ace-builds/src-noconflict/mode-sh.js',
       'bower_components/ace-builds/src-noconflict/keybinding-emacs.js',
       'bower_components/ace-builds/src-noconflict/ext-language_tools.js',
-      'bower_components/ace-builds/src-noconflict/theme-github.js',
+      'bower_components/ace-builds/src-noconflict/theme-chrome.js',
       'bower_components/angular-ui-ace/ui-ace.js',
       'bower_components/jquery.scrollTo/jquery.scrollTo.js',
       'bower_components/d3/d3.js',
@@ -52,6 +53,7 @@ module.exports = function(config) {
       'bower_components/highlightjs/highlight.pack.js',
       'bower_components/lodash/lodash.js',
       'bower_components/angular-filter/dist/angular-filter.min.js',
+      'bower_components/angular-ui-notification/dist/angular-ui-notification.min.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       'src/app/app.js',