diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 4b927601a24..210b2bb96b0 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -11,6 +11,7 @@ import browserify from 'browserify';
 import source from 'vinyl-source-stream';
 import buffer from 'vinyl-buffer';
 import babelify from 'babelify';
+import watch from 'gulp-watch';
 
 const $ = gulpLoadPlugins();
 const browserSync = require('browser-sync').create();
@@ -79,10 +80,10 @@ gulp.task('init-watch', () => {
     port: 9001,
     open: false
   });
-  gulp.watch([ 'src/sass/**/*.scss', 'node_modules/rancher-website-theme/**/*.scss' ], () => gulp.start('sass'));
-  gulp.watch('src/js/**/*.js', () => gulp.start('build:app'));
-  gulp.watch('src/img/**/*', () => gulp.start('img'));
-  gulp.watch(['archetypes/**/*', 'data/**/*', 'content/**/*', 'layouts/**/*', 'static/**/*.{js,css}', 'themes/**/*', 'node_modules/rancher-website-theme/**/*', 'config.toml'], () => gulp.start('hugo-dev'));
+  watch([ 'src/sass/**/*.scss', 'node_modules/rancher-website-theme/**/*.scss' ], () => gulp.start('sass'));
+  watch('src/js/**/*.js', () => gulp.start('build:app'));
+  watch('src/img/**/*', () => gulp.start('img'));
+  watch(['archetypes/**/*', 'data/**/*', 'content/**/*', 'layouts/**/*', 'static/**/*.{js,css}', 'themes/**/*', 'node_modules/rancher-website-theme/**/*', 'config.toml'], () => gulp.start('hugo-dev'));
 });
 
 
diff --git a/package.json b/package.json
index 2b1392450d2..0cb2c49bb74 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "jquery": "^3.3.1",
     "moment": "^2.20.1",
     "node-sass-tilde-importer": "^1.0.0",
+    "rancher-website-theme": "https://github.com/rancherlabs/website-theme.git",
     "run-sequence": "^2.0.0",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0"
@@ -46,7 +47,6 @@
     "hugo-search-index": "^0.4.1",
     "lory.js": "^2.4.1",
     "ml-stack-nav": "^1.1.2",
-    "rancher-website-theme": "https://github.com/rancherlabs/website-theme.git",
     "tingle.js": "^0.13.2"
   }
 }
diff --git a/src/js/app.js b/src/js/app.js
index 74e52916347..08752c6ebd6 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -224,7 +224,7 @@ const bootstrapScrollSpy = function () {
     let scrollTop          = $(window).scrollTop();
     let elementOffset      = $watch.offset().top;
     let distance           = (elementOffset - scrollTop);
-    let mainContentHeaders = $('.main-content').find(':header:visible');
+    let $mainContentHeaders = $('.main-content').find(':header:visible');
     let opts               = {
       height: $el.outerHeight(),
       width:  $el.outerWidth(),
@@ -232,15 +232,19 @@ const bootstrapScrollSpy = function () {
     };
 
     console.log(scrollTop, $(window).height())
-    for (var i = 0; i <= mainContentHeaders.length - 1; i++) {
-      var $mainContentHeadersEl = $(`#${mainContentHeaders[i].id}`);
-      var hTop = $mainContentHeadersEl.offset().top;
+    for (var i = 0; i <= $mainContentHeaders.length - 1; i++) {
+
+      var $mainContentHeadersEl = $(`#${$mainContentHeaders[i].id}`);
+      var hTop                  = $mainContentHeadersEl.offset().top;
 
       if (hTop - scrollTop >= 0) {
-        mainContentHeaders.each( ( i, a ) => {
+
+        $mainContentHeaders.each( ( i, a ) => {
           $('#TableOfContents').find(`a[href$=${a.id}]`).removeClass('active');
         });
-        $('#TableOfContents').find(`a[href$=${mainContentHeaders[i].id}]`).addClass('active');
+
+        $('#TableOfContents').find(`a[href$=${$mainContentHeaders[i].id}]`).addClass('active');
+
         break;
       }
     }
@@ -258,6 +262,8 @@ const bootstrapScrollSpy = function () {
     }
 
   }
+
+  //init position
   scrollHandler();
 }