diff --git a/Vue_Full_Project/package.json b/Vue_Full_Project/package.json
index 688e6bc1..656fecd9 100644
--- a/Vue_Full_Project/package.json
+++ b/Vue_Full_Project/package.json
@@ -64,13 +64,13 @@
     "karma-webpack": "2.0.4",
     "lolex": "2.1.2",
     "mocha": "3.5.0",
-    "chai": "4.1.1",
+    "chai": "4.1.2",
     "sinon": "3.2.1",
     "sinon-chai": "2.13.0",
     "inject-loader": "3.0.1",
     "babel-plugin-istanbul": "4.1.4",
     "phantomjs-prebuilt": "^2.1.15",
-    "chromedriver": "2.31.0",
+    "chromedriver": "2.32.0",
     "cross-spawn": "^5.0.1",
     "nightwatch": "0.9.16",
     "selenium-server": "3.5.2",
diff --git a/Vue_Full_Project/scss/core/_callout.scss b/Vue_Full_Project/scss/core/_callout.scss
index ddd3e226..58b76ac0 100644
--- a/Vue_Full_Project/scss/core/_callout.scss
+++ b/Vue_Full_Project/scss/core/_callout.scss
@@ -11,10 +11,10 @@
 
   .chart-wrapper {
     position: absolute;
-    top: 18px;
+    top: 10px;
     left: 50%;
     float: right;
-    width: 60%;
+    width: 50%;
   }
 }
 
diff --git a/Vue_Full_Project/src/views/Dashboard.vue b/Vue_Full_Project/src/views/Dashboard.vue
index 4dc87a35..80cbc165 100644
--- a/Vue_Full_Project/src/views/Dashboard.vue
+++ b/Vue_Full_Project/src/views/Dashboard.vue
@@ -100,7 +100,7 @@
             <strong>29.703 Users (40%)</strong>
             <b-progress class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress>
           </li>
-          <li class="hidden-sm-down">
+          <li class="d-none d-md-table-cell">
             <div class="text-muted">Unique</div>
             <strong>24.093 Users (20%)</strong>
             <b-progress class="progress-xs mt-2" :precision="1" variant="info" :value="20"></b-progress>
@@ -110,12 +110,12 @@
             <strong>78.706 Views (60%)</strong>
             <b-progress class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress>
           </li>
-          <li class="hidden-sm-down">
+          <li class="d-none d-md-table-cell">
             <div class="text-muted">New Users</div>
             <strong>22.123 Users (80%)</strong>
             <b-progress class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress>
           </li>
-          <li class="hidden-sm-down">
+          <li class="d-none d-md-table-cell">
             <div class="text-muted">Bounce Rate</div>
             <strong>40.15%</strong>
             <b-progress class="progress-xs mt-2" :precision="1" :value="40"></b-progress>
@@ -207,7 +207,7 @@
                   <Callout variant="info">
                     <small class="text-muted">New Clients</small><br>
                     <strong class="h4">9,123</strong>
-                    <div class="chart-wrapper" style="width:60%">
+                    <div class="chart-wrapper">
                       <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />
                     </div>
                   </Callout>
@@ -216,7 +216,7 @@
                   <Callout variant="danger">
                     <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
-                    <div class="chart-wrapper" style="width:60%">
+                    <div class="chart-wrapper">
                       <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#f86c6b" width="80" height="30" />
                     </div>
                   </Callout>
@@ -298,7 +298,7 @@
                   <Callout variant="warning">
                     <small class="text-muted">Pageviews</small><br>
                     <strong class="h4">78,623</strong>
-                    <div class="chart-wrapper" style="width:60%">
+                    <div class="chart-wrapper">
                       <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30" />
                     </div>
                   </Callout>
@@ -307,7 +307,7 @@
                   <Callout variant="success">
                     <small class="text-muted">Organic</small><br>
                     <strong class="h4">49,123</strong>
-                    <div class="chart-wrapper" style="width:60%">
+                    <div class="chart-wrapper">
                       <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80px" height="30" />
                     </div>
                   </Callout>
@@ -375,7 +375,7 @@
                   <Callout>
                     <small class="text-muted">CTR</small><br>
                     <strong class="h4">23%</strong>
-                    <div class="chart-wrapper" style="width:60%">
+                    <div class="chart-wrapper">
                       <callout-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" width="80px" height="30" />
                     </div>
                   </Callout>
@@ -384,8 +384,8 @@
                   <Callout variant="primary">
                     <small class="text-muted">Bounce Rate</small><br>
                     <strong class="h4">5%</strong>
-                    <div class="chart-wrapper" style="width:60%">
-                      <callout-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" variant="#20a8d8" width="80px" height="30" />
+                    <div class="chart-wrapper">
+                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80px" height="30" />
                     </div>
                   </Callout>
                 </div><!--/.col-->
diff --git a/Vue_Starter/package.json b/Vue_Starter/package.json
index 7ebbe338..656fecd9 100644
--- a/Vue_Starter/package.json
+++ b/Vue_Starter/package.json
@@ -14,31 +14,31 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "bootstrap-vue": "0.20.1",
+    "bootstrap-vue": "^0.23.0",
     "chart.js": "2.6.0",
     "vue": "2.4.2",
-    "vue-chartjs": "2.8.1",
+    "vue-chartjs": "2.8.2",
     "vue-router": "2.7.0",
     "font-awesome": "^4.7.0",
     "simple-line-icons": "^2.4.1"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.2",
-    "babel-core": "6.25.0",
+    "autoprefixer": "7.1.3",
+    "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
-    "babel-loader": "7.1.1",
+    "babel-loader": "7.1.2",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "1.6.0",
     "babel-preset-stage-2": "6.24.1",
-    "babel-register": "6.24.1",
+    "babel-register": "6.26.0",
     "chalk": "2.1.0",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "0.28.4",
-    "eslint": "4.4.1",
+    "css-loader": "0.28.7",
+    "eslint": "4.5.0",
     "eslint-friendly-formatter": "3.0.0",
     "eslint-loader": "1.9.0",
-    "eslint-plugin-html": "3.1.1",
+    "eslint-plugin-html": "3.2.0",
     "eslint-plugin-import": "2.7.0",
     "eslint-plugin-node": "5.1.1",
     "eslint-config-standard": "10.2.1",
@@ -53,38 +53,38 @@
     "http-proxy-middleware": "0.17.4",
     "webpack-bundle-analyzer": "2.9.0",
     "cross-env": "5.0.5",
-    "karma": "1.7.0",
+    "karma": "1.7.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "1.0.4",
     "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "1.3.1",
+    "karma-sinon-chai": "1.3.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.31",
     "karma-webpack": "2.0.4",
     "lolex": "2.1.2",
     "mocha": "3.5.0",
-    "chai": "4.1.1",
-    "sinon": "3.2.0",
-    "sinon-chai": "2.12.0",
+    "chai": "4.1.2",
+    "sinon": "3.2.1",
+    "sinon-chai": "2.13.0",
     "inject-loader": "3.0.1",
     "babel-plugin-istanbul": "4.1.4",
-    "phantomjs-prebuilt": "^2.1.14",
-    "chromedriver": "2.31.0",
+    "phantomjs-prebuilt": "^2.1.15",
+    "chromedriver": "2.32.0",
     "cross-spawn": "^5.0.1",
     "nightwatch": "0.9.16",
-    "selenium-server": "3.4.0",
+    "selenium-server": "3.5.2",
     "semver": "5.4.1",
     "shelljs": "0.7.8",
     "opn": "5.1.0",
-    "optimize-css-assets-webpack-plugin": "3.0.0",
+    "optimize-css-assets-webpack-plugin": "3.1.1",
     "ora": "1.3.0",
     "rimraf": "^2.6.0",
     "url-loader": "0.5.9",
     "vue-loader": "13.0.4",
     "vue-style-loader": "3.0.1",
     "vue-template-compiler": "2.4.2",
-    "webpack": "3.5.3",
+    "webpack": "3.5.5",
     "webpack-dev-middleware": "1.12.0",
     "webpack-hot-middleware": "2.18.2",
     "webpack-merge": "4.1.0",
diff --git a/Vue_Starter/scss/core/_callout.scss b/Vue_Starter/scss/core/_callout.scss
index ddd3e226..58b76ac0 100644
--- a/Vue_Starter/scss/core/_callout.scss
+++ b/Vue_Starter/scss/core/_callout.scss
@@ -11,10 +11,10 @@
 
   .chart-wrapper {
     position: absolute;
-    top: 18px;
+    top: 10px;
     left: 50%;
     float: right;
-    width: 60%;
+    width: 50%;
   }
 }
 
diff --git a/Vue_Starter/scss/core/_temp.scss b/Vue_Starter/scss/core/_temp.scss
index 63cb04b7..d5b4d592 100644
--- a/Vue_Starter/scss/core/_temp.scss
+++ b/Vue_Starter/scss/core/_temp.scss
@@ -31,9 +31,9 @@
 }
 
 //
-//.modal-open .modal {
-//  display: block;
-//}
+.modal-open .modal {
+  display: block;
+}
 
 // navbar dropdown fix
 .navbar .dropdown-toggle {