diff --git a/src/components/pageHeader/AppToolbar.vue b/src/components/pageHeader/AppToolbar.vue
index eee4c96..536ff2b 100644
--- a/src/components/pageHeader/AppToolbar.vue
+++ b/src/components/pageHeader/AppToolbar.vue
@@ -18,6 +18,7 @@
       <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title>
     </v-flex>
     <v-spacer></v-spacer>
+    <v-btn type="button" @click="goToSchool" v-if="adminRole">Towards School!</v-btn>
     <v-toolbar-items class="hidden-sm-and-down">
       <v-icon class="header-icon">notifications_none</v-icon>
     </v-toolbar-items>
@@ -84,7 +85,8 @@ export default {
           window.getApp.$emit("APP_LOGOUT");
         }
       }
-    ]
+    ],
+    adminRole: ""
   }),
   computed: {
     toolbarColor() {
@@ -93,6 +95,8 @@ export default {
   },
   mounted() {
     // this.getUserData();
+    this.adminRole = this.$store.state.role;
+    console.log("this.adminRole", this.adminRole);
   },
   methods: {
     // emitSearch(ev) {
@@ -121,6 +125,17 @@ export default {
           //   this.$store.dispatch("Id", null);
           // }
         });
+    },
+    goToSchool() {
+      console.log("click");
+      if (this.$store.state.role === "ADMIN") {
+        this.$store.dispatch("Role", null);
+        this.$store.dispatch("setToken", null);
+        this.$router.push("/schooldashboard");
+        setTimeout(() => {
+          location.reload();
+        }, 1000);
+      }
     }
   }
 };
diff --git a/src/pages/Dashboard/dashboard.vue b/src/pages/Dashboard/dashboard.vue
index 7405dbf..8856d6d 100644
--- a/src/pages/Dashboard/dashboard.vue
+++ b/src/pages/Dashboard/dashboard.vue
@@ -144,15 +144,16 @@
                           </template>
                         </v-list>
                       </v-flex>
-                      <v-flex xs12 sm12 md9>
-                        <div id="chart">
+                      <v-flex xs12 sm12 md9 lg9>
+                        <!-- <div id="chart"> -->
                           <apexchart
                             type="bar"
                             height="250"
+                            style="max-width: 800px !important"
                             :options="chartOptions"
                             :series="series"
                           ></apexchart>
-                        </div>
+                        <!-- </div> -->
                       </v-flex>
                     </v-layout>
                   </v-card>
@@ -361,19 +362,20 @@ export default {
         chart: {
           type: "bar",
           height: 150,
-          animations: {
-            enabled: true,
-            easing: "easeinout",
-            speed: 1200,
-            animateGradually: {
-              enabled: true,
-              delay: 450
-            },
-            dynamicAnimation: {
-              enabled: true,
-              speed: 450
-            }
-          }
+          stacked: true
+          // animations: {
+          //   enabled: true,
+          //   easing: "easeinout",
+          //   speed: 1200,
+          //   animateGradually: {
+          //     enabled: true,
+          //     delay: 450
+          //   },
+          //   dynamicAnimation: {
+          //     enabled: true,
+          //     speed: 450
+          //   }
+          // }
         },
         plotOptions: {
           bar: {
@@ -383,6 +385,18 @@ export default {
             distributed: true
           }
         },
+        responsive: [
+          {
+            breakpoint: 480,
+            options: {
+              legend: {
+                position: "bottom",
+                offsetX: -10,
+                offsetY: 0
+              }
+            }
+          }
+        ],
         legend: {
           show: false
         },
diff --git a/src/pages/School/school.vue b/src/pages/School/school.vue
index f4303e3..35b936f 100644
--- a/src/pages/School/school.vue
+++ b/src/pages/School/school.vue
@@ -969,7 +969,9 @@ export default {
           this.$store.dispatch("Id", response.data.data.id);
           this.$store.dispatch("Role", response.data.data.role);
           this.$router.push("/dashboard");
-          location.reload();
+          setTimeout(() => {
+            location.reload();
+          }, 1000);
           // let routeData = this.$router.resolve({
           //   name: "dashboardAdmin"
           // });
diff --git a/src/pages/School/viewSchoolDashboard.vue b/src/pages/School/viewSchoolDashboard.vue
index 7405dbf..1ecf18d 100644
--- a/src/pages/School/viewSchoolDashboard.vue
+++ b/src/pages/School/viewSchoolDashboard.vue
@@ -144,15 +144,10 @@
                           </template>
                         </v-list>
                       </v-flex>
-                      <v-flex xs12 sm12 md9>
-                        <div id="chart">
-                          <apexchart
-                            type="bar"
-                            height="250"
-                            :options="chartOptions"
-                            :series="series"
-                          ></apexchart>
-                        </div>
+                      <v-flex xs12 sm12 md9 lg9 >
+                        <!-- <div id="chart"> -->
+                        <apexchart type="bar" height="250" style="max-width:800px !important" :options="chartOptions" :series="series"></apexchart>
+                        <!-- </div> -->
                       </v-flex>
                     </v-layout>
                   </v-card>
@@ -359,21 +354,23 @@ export default {
       ],
       chartOptions: {
         chart: {
-          type: "bar",
+          // type: "bar",
           height: 150,
-          animations: {
-            enabled: true,
-            easing: "easeinout",
-            speed: 1200,
-            animateGradually: {
-              enabled: true,
-              delay: 450
-            },
-            dynamicAnimation: {
-              enabled: true,
-              speed: 450
-            }
-          }
+          stacked: true
+          
+          // animations: {
+          //   enabled: true,
+          //   easing: "easeinout",
+          //   speed: 1200,
+          //   animateGradually: {
+          //     enabled: true,
+          //     delay: 450
+          //   },
+          //   dynamicAnimation: {
+          //     enabled: true,
+          //     speed: 450
+          //   }
+          // }
         },
         plotOptions: {
           bar: {
@@ -383,8 +380,22 @@ export default {
             distributed: true
           }
         },
+        responsive: [
+          {
+            breakpoint: 480,
+            options: {
+              legend: {
+                position: "bottom",
+                offsetX: -10,
+                offsetY: 0
+              }
+            }
+          }
+        ],
+
         legend: {
-          show: false
+          position: "right",
+          offsetY: 40
         },
         colors: ["#7852cc", "#f9a825", "#ff8a89"],
         dataLabels: {
diff --git a/static/css/custom.css b/static/css/custom.css
index 4126303..b99e23b 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -145,7 +145,7 @@ h4 {
     padding: 8px;
 }
 
-.apexcharts-canvas {
+/* .apexcharts-canvas {
     width: 100% !important;
 }
 .apexcharts-canvas > svg{
@@ -153,7 +153,7 @@ h4 {
 }
 .apexcharts-canvas > svg > apexcharts-inner > apexcharts-graphical {
     transform: translate(0);
-}
+} */
 
 #dialog {
     height: 550px;