diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index b5b439ae7f7..04bdbf86b70 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",
+    "ngtoast": "~1.5.5"
   },
   "devDependencies": {
     "angular-mocks": "1.3.8"
diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js
index 6dfa8e5d911..28a84e07a3c 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',
+    'ngToast'
   ])
   .filter('breakFilter', function() {
     return function (text) {
@@ -39,7 +40,7 @@ angular.module('zeppelinWebApp', [
       }
     };
   })
-  .config(function ($routeProvider) {
+  .config(function ($routeProvider, ngToastProvider) {
     $routeProvider
       .when('/', {
         templateUrl: 'app/home/home.html',
@@ -60,4 +61,10 @@ angular.module('zeppelinWebApp', [
       .otherwise({
         redirectTo: '/'
       });
+  
+    ngToastProvider.configure({
+      dismissButton: true,
+      dismissOnClick: false,
+      timeout: 6000
+    });
   });
diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css
index 5d5e1159808..c42b4695089 100644
--- a/zeppelin-web/src/app/home/home.css
+++ b/zeppelin-web/src/app/home/home.css
@@ -285,6 +285,28 @@ kbd {
   min-height: 400px;
 }
 
+/* ngToast style */
+
+.ng-toast .alert {
+  color: white !important;
+  border: none !important;
+}
+
+.ng-toast .alert-danger {
+  background-color: #A94442 !important;
+}
+
+.ng-toast .alert-warning {
+  background-color: #CE9532 !important;
+}
+
+.ng-toast .alert-info {
+  background-color: #589EC1 !important;
+}
+
+.ng-toast .alert-success {
+  background-color: #428443 !important;
+}
 
 /*
 temporary fix for bootstrap issue (https://github.com/twbs/bootstrap/issues/5865)
diff --git a/zeppelin-web/src/assets/styles/looknfeel/default.css b/zeppelin-web/src/assets/styles/looknfeel/default.css
index 8aeee956399..56db526d3b9 100644
--- a/zeppelin-web/src/assets/styles/looknfeel/default.css
+++ b/zeppelin-web/src/assets/styles/looknfeel/default.css
@@ -64,4 +64,4 @@ body {
 .executionTime,
 .nv-controlsWrap {
   display:block;
-}
\ No newline at end of file
+}
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index 90b3f0a0569..9e41b30060c 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/ngtoast/dist/ngToast.css" />
     <!-- endbower -->
     <link rel="stylesheet" href="bower_components/jquery-ui/themes/base/all.css" />
     <!-- endbuild -->
@@ -60,6 +61,7 @@
     <!--[if lt IE 7]>
 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
 <![endif]-->
+    <toast></toast>
     <div ng-include src="'components/navbar/navbar.html'"></div>
     <!-- Add your site or application content here -->
     <div id="main" class="container">
@@ -112,6 +114,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/ngtoast/dist/ngToast.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 ffbc99699bb..d76f72cb661 100644
--- a/zeppelin-web/test/karma.conf.js
+++ b/zeppelin-web/test/karma.conf.js
@@ -53,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/ngtoast/dist/ngToast.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       'src/app/app.js',