diff --git a/scripts/webpack.config.babel.js b/scripts/webpack.config.babel.js
index cc9d5f5..943b9c5 100644
--- a/scripts/webpack.config.babel.js
+++ b/scripts/webpack.config.babel.js
@@ -25,7 +25,7 @@ let rules = [
     loader : 'ignore-loader',
   },
   {
-    test   : /\.jade$/,
+    test   : /\.pug$/,
     loader : 'pug-loader',
   },
   {
diff --git a/src/alert/component.js b/src/alert/component.js
index 0b94ada..87854cc 100644
--- a/src/alert/component.js
+++ b/src/alert/component.js
@@ -1,6 +1,6 @@
 import _        from 'lodash';
 import angular  from 'angular';
-import Template from './index.jade';
+import Template from './index.pug';
 import Config   from './config';
 
 export default function ($timeout) {
diff --git a/src/alert/index.jade b/src/alert/index.pug
similarity index 100%
rename from src/alert/index.jade
rename to src/alert/index.pug
diff --git a/src/calendar/component.js b/src/calendar/component.js
index b7128c0..b465336 100644
--- a/src/calendar/component.js
+++ b/src/calendar/component.js
@@ -1,6 +1,6 @@
 import _        from 'lodash';
 import moment   from 'moment';
-import Template from './index.jade';
+import Template from './index.pug';
 
 export default function () {
   return {
diff --git a/src/calendar/index.jade b/src/calendar/index.pug
similarity index 100%
rename from src/calendar/index.jade
rename to src/calendar/index.pug
diff --git a/src/calendar/modal.js b/src/calendar/modal.js
index e01debd..852c9e7 100644
--- a/src/calendar/modal.js
+++ b/src/calendar/modal.js
@@ -1,5 +1,5 @@
 import angular  from 'angular';
-import Template from './modal.jade';
+import Template from './modal.pug';
 
 export default function ($rootScope, $timeout) {
   return {
diff --git a/src/calendar/modal.jade b/src/calendar/modal.pug
similarity index 100%
rename from src/calendar/modal.jade
rename to src/calendar/modal.pug
diff --git a/src/captcha/component.js b/src/captcha/component.js
index 692229d..e7c9723 100644
--- a/src/captcha/component.js
+++ b/src/captcha/component.js
@@ -1,5 +1,5 @@
 import angular  from 'angular';
-import Template from './index.jade';
+import Template from './index.pug';
 
 export default function ($uiCaptcha) {
   return {
diff --git a/src/captcha/index.jade b/src/captcha/index.pug
similarity index 100%
rename from src/captcha/index.jade
rename to src/captcha/index.pug
diff --git a/src/checkbox/component.js b/src/checkbox/component.js
index 935387e..4e2fc7c 100644
--- a/src/checkbox/component.js
+++ b/src/checkbox/component.js
@@ -1,6 +1,6 @@
 import _          from 'lodash';
 import angular    from 'angular';
-import Template   from './index.jade';
+import Template   from './index.pug';
 import Controller from './controller';
 
 export default function ($rootScope) {
diff --git a/src/checkbox/index.jade b/src/checkbox/index.pug
similarity index 100%
rename from src/checkbox/index.jade
rename to src/checkbox/index.pug
diff --git a/src/cropper/component.js b/src/cropper/component.js
index 831a301..20e26bb 100644
--- a/src/cropper/component.js
+++ b/src/cropper/component.js
@@ -2,7 +2,7 @@
  * Cropper: https://github.com/fengyuanchen/cropperjs
  */
 import _          from 'lodash';
-import Template   from './index.jade';
+import Template   from './index.pug';
 import Controller from './controller';
 
 export default function ($rootScope, cropperPromptInterceptor) {
diff --git a/src/cropper/index.jade b/src/cropper/index.pug
similarity index 100%
rename from src/cropper/index.jade
rename to src/cropper/index.pug
diff --git a/src/lazier/component.js b/src/lazier/component.js
index 8a5148e..058ad24 100644
--- a/src/lazier/component.js
+++ b/src/lazier/component.js
@@ -1,5 +1,5 @@
 import _        from 'lodash';
-import Template from './index.jade';
+import Template from './index.pug';
 
 export default function ($lazier) {
   'ngInject';
diff --git a/src/lazier/index.jade b/src/lazier/index.pug
similarity index 100%
rename from src/lazier/index.jade
rename to src/lazier/index.pug
diff --git a/src/locker/component.js b/src/locker/component.js
index cce46c9..0939ae4 100644
--- a/src/locker/component.js
+++ b/src/locker/component.js
@@ -1,6 +1,6 @@
 import _        from 'lodash';
 import Config   from './config';
-import Template from './index.jade';
+import Template from './index.pug';
 
 export default function ($timeout) {
   'ngInject';
diff --git a/src/locker/index.jade b/src/locker/index.pug
similarity index 100%
rename from src/locker/index.jade
rename to src/locker/index.pug
diff --git a/src/radio/component.js b/src/radio/component.js
index 4baaef1..ad0a24f 100644
--- a/src/radio/component.js
+++ b/src/radio/component.js
@@ -1,6 +1,6 @@
 import _          from 'lodash';
 import angular    from 'angular';
-import Template   from './index.jade';
+import Template   from './index.pug';
 import Controller from './controller';
 
 export default function ($rootScope) {
diff --git a/src/radio/index.jade b/src/radio/index.pug
similarity index 100%
rename from src/radio/index.jade
rename to src/radio/index.pug
diff --git a/src/spinner/component.js b/src/spinner/component.js
index 6503482..811d52e 100644
--- a/src/spinner/component.js
+++ b/src/spinner/component.js
@@ -1,4 +1,4 @@
-import Template from './index.jade';
+import Template from './index.pug';
 
 export default function () {
   return {
diff --git a/src/spinner/index.jade b/src/spinner/index.pug
similarity index 100%
rename from src/spinner/index.jade
rename to src/spinner/index.pug
diff --git a/src/switch/component.js b/src/switch/component.js
index 44cd83f..746fdec 100644
--- a/src/switch/component.js
+++ b/src/switch/component.js
@@ -1,7 +1,7 @@
 import _          from 'lodash';
 import angular    from 'angular';
 import Controller from './controller';
-import Template   from './index.jade';
+import Template   from './index.pug';
 
 export default function ($rootScope) {
   'ngInject';
diff --git a/src/switch/index.jade b/src/switch/index.pug
similarity index 100%
rename from src/switch/index.jade
rename to src/switch/index.pug
diff --git a/src/toast/component.js b/src/toast/component.js
index 96a2a4e..f6868fc 100644
--- a/src/toast/component.js
+++ b/src/toast/component.js
@@ -1,6 +1,6 @@
 import _        from 'lodash';
 import angular  from 'angular';
-import Template from './index.jade';
+import Template from './index.pug';
 import Config   from './config';
 
 export default function ($timeout) {
diff --git a/src/toast/index.jade b/src/toast/index.pug
similarity index 100%
rename from src/toast/index.jade
rename to src/toast/index.pug
diff --git a/src/utilitybar/component.js b/src/utilitybar/component.js
index 3840914..1f9d00a 100644
--- a/src/utilitybar/component.js
+++ b/src/utilitybar/component.js
@@ -1,7 +1,7 @@
 import _          from 'lodash';
 import angular    from 'angular';
 import Controller from './controller.js';
-import Template   from './index.jade';
+import Template   from './index.pug';
 
 export default function ($compile, $stateParams, $utilitybar) {
   'ngInject';
diff --git a/src/utilitybar/index.jade b/src/utilitybar/index.pug
similarity index 100%
rename from src/utilitybar/index.jade
rename to src/utilitybar/index.pug