diff --git a/public/assets/styles/template.scss b/public/assets/styles/template.scss
index 9a9cc9387ca8bc65ec2b65415ce7a1a52de0a25e..50cb16496f6a26b3a21b6358d4b0be37d97bc6ad 100644
--- a/public/assets/styles/template.scss
+++ b/public/assets/styles/template.scss
@@ -473,6 +473,9 @@ textarea.form-control {
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     transition: all 0.4s ease;
+    &.page-login {margin-left: 0; padding-top: 0;
+        > .content {padding: 0;}
+    }
 }
 
 .page-wrapper>.content {
@@ -958,4 +961,236 @@ background-color: #01c0c8;
     .timeline {
         flex-direction: column;
     }
+}
+
+
+
+
+.bg-purple {
+    background-image: linear-gradient(-225deg, #01c0c8 0%, #6B8DD6 48%, #8E37D7 100%);
+}
+
+.nav-link {
+    display: block;
+    padding: 1.5rem 1rem;
+}
+
+.welcome-area {
+    background: #fff;
+
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+    padding: 20px;
+    margin-bottom: 30px;
+}
+
+.welcome-area h3 {
+    color: #36434d;
+    font-size: 23px;
+}
+
+.welcome-area p {
+    font-size: 16px;
+    color: #a09ea2;
+    margin: 0;
+}
+
+.carousel-wrapper {
+    margin-bottom: 50px;
+}
+
+.swiper-container {
+
+    width: 100%;
+}
+
+@media(min-width: 992px) {
+    .swiper-container {
+        height: auto;
+    }
+}
+
+.swiper-slide {
+    padding: 50px;
+    text-align: center;
+
+
+    /*background-color: #fff;*/
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.swiper-pagination-bullet-custom {
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    font-size: 12px;
+    color: #000;
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.swiper-pagination-bullet-custom.swiper-pagination-bullet-active {
+    color: #fff;
+    background: #007aff;
+}
+
+.menu-wrapper i {
+    font-size: 40px;
+    margin-bottom: 20px;
+
+
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(1) i {
+    color: #9055A2;
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(2) i {
+    color: #e8384d;
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(3) i {
+    color: #8CD790;
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(4) i {
+    color: #F68657;
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(5) i {
+    color: #2fd4e7;
+}
+
+.menu-wrapper .row:first-child .col-6:nth-child(6) i {
+    color: #0be881;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(1) i {
+    color: #ffa801;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(2) i {
+    color: #575fcf;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(3) i {
+    color: #ff4d4d;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(4) i {
+    color: #1e90ff;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(5) i {
+    color: #f78fb3;
+}
+
+.menu-wrapper .row:last-child .col-6:nth-child(6) i {
+    color: #0097a7;
+}
+
+
+
+
+.menu-wrapper h3 {
+    font-size: 16px;
+    font-weight: 400;
+
+}
+
+.menu-link {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  align-items: center;
+    padding: 20px;
+    margin-bottom: 30px;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    box-shadow: 0 4px 9px 0 rgba(30, 59, 91, 0.1);
+    display: block;
+    background: #fff;
+    color: #333;
+    transition: all .2s ease-in;
+}
+
+.menu-link:hover {
+    background: #fff;
+    color: #333;
+    border: 1px solid #3afe;
+}
+
+.menu-card {
+    padding: 30px 40px;
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0 4px 9px 0 rgba(30, 59, 91, 0.1);
+}
+
+.menu-card h3 {
+    text-align: center;
+    font-size: 18px;
+    margin: 0;
+}
+
+.menu-card img {
+    height: 100px;
+    display: block;
+    margin: auto;
+}
+
+.bg-blue {
+    background: #36A2EB;
+
+    color: #fff;
+}
+
+.bg-green {
+    background: #4BC0C0;
+    color: #fff;
+}
+
+.bg-red {
+    background: #FF6384;
+    color: #fff;
+}
+
+.bg-black {
+    /*background: #333538;*/
+    background: #5d7dad;
+    color: #fff;
+}
+
+.container {
+    max-width: 1200px;
+}
+
+.footer {
+    color: #fff;
+    background: #333538;
+    padding: 15px 0;
+
+}
+
+.footer p {
+    margin-bottom: 0;
+    text-align: center;
+
+}
+
+main {
+    padding: 0 0 60px;
+}
+@media(max-width: 425px){
+  .swiper-slide {
+    padding: 10px;
+  }
 }
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index c03b96945513713646b0e1b6634ec95b0680015f..9e7a56517578bf9ac62463bc7b34dba57989b567 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
     <div id="app-loader" v-if="$store.getters.isPageBlocked">
       <img src="../public/assets/tail-spin.svg" alt="loader" />
     </div>
-    <div class="wrapper" v-if="$route.path !== '/theme'">
+    <div class="wrapper" v-if="$route.path == '/something'">
       <div id="nav">
         <router-link to="/">
           <i class="mdi mdi-home" /> Home
@@ -45,7 +45,17 @@
       </div>
       <router-view />
     </div>
-    <div class="main-wrapper" v-if="$route.path == '/theme'">
+    <div
+      class="main-wrapper"
+      :class="{ 'page-login': $route.path == '/login' }"
+      v-if="$route.path == '/login' || $route.path == '/i18Demo'"
+    >
+      <router-view />
+    </div>
+    <div
+      class="main-wrapper"
+      v-if="$route.path !== '/login' && $route.path !== '/i18Demo'"
+    >
       <headerbar></headerbar>
       <sidebar></sidebar>
       <div class="page-wrapper">
diff --git a/src/views/I18Demo.vue b/src/views/I18Demo.vue
index e15eb0fab3468c2caa218540d7889bb9557a8c1a..37000a6b30564a87efe0e0ce7b186caf3f6a4e6d 100644
--- a/src/views/I18Demo.vue
+++ b/src/views/I18Demo.vue
@@ -1,8 +1,43 @@
 /* eslint-disable semi */
-/* eslint-disable semi */
-/* eslint-disable semi */
 <template>
   <div class="validator" id="app">
+    <b-navbar toggleable="lg" type="dark" variant="purple">
+        <div class="container-fluid">
+            <b-navbar-brand href="#">Digital University</b-navbar-brand>
+            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+            <b-collapse id="nav-collapse" is-nav>
+                <b-navbar-nav>
+                    <!--    <b-nav-item href="#">Link</b-nav-item>
+                    <b-nav-item href="#" disabled>Disabled</b-nav-item> -->
+                </b-navbar-nav>
+                <!-- Right aligned nav items -->
+                <b-navbar-nav class="ml-auto">
+                    <!-- <b-nav-form>
+                        <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
+                        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
+                    </b-nav-form>
+                    <b-nav-item-dropdown text="Lang" right>
+                        <b-dropdown-item href="#">EN</b-dropdown-item>
+                        <b-dropdown-item href="#">ES</b-dropdown-item>
+                        <b-dropdown-item href="#">RU</b-dropdown-item>
+                        <b-dropdown-item href="#">FA</b-dropdown-item>
+                    </b-nav-item-dropdown> -->
+                    <b-nav-item-dropdown right>
+                        <!-- Using 'button-content' slot -->
+                        <template slot="button-content"><em>Prashant Savekar</em></template>
+                        <b-dropdown-item href="#">Profile</b-dropdown-item>
+                        <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+                    </b-nav-item-dropdown>
+                </b-navbar-nav>
+            </b-collapse>
+        </div>
+    </b-navbar>
+    <div class="welcome-area">
+        <div class="container">
+            <h3>Welcome Chhatrapati Shivaji Night College of Arts and Commerce ! </h3>
+            <p>You have logged in as College and your last logon was 6/15/2019 3:14:17 PM</p>
+        </div>
+    </div>
     <form class="ui form" @submit.prevent="onSubmit" />
     <div class="container">
       <div class="row left-content-center text-left">
@@ -436,6 +471,15 @@
         </div>
       </div>
     </div>
+    <footer class="footer">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <p>Copyright 2011. All Rights Reserved. Powered By (MKCL)</p>
+                    </div>
+                </div>
+            </div>
+        </footer>
   </div>
 </template>
 
diff --git a/src/views/Login.vue b/src/views/Login.vue
index c562d32b4fe77534e136556327252b5d9aeda148..f467c4aa65f8433adb205e2687838dc896a1f54c 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -201,6 +201,7 @@
     </div>
   </section> -->
 </template>
+
 <script>
 import Vue from 'vue'
 import Response from '@/plugins/response.js'
@@ -300,6 +301,7 @@ export default {
     }
 }
 </script>
+
 <style lang="scss">
 .login-2 {
     background: #f5f5f5;