diff --git a/src/App.vue b/src/App.vue
index 91506fe0..6cefddd1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,36 @@
 <template>
   <div id="app">
     <NavBar title="HyperFyre" :show="showUserNav" />
-    <div :class="[
+    <!-- <div :class="[
         showNavbar & !showUserNav
           ? isSidebarCollapsed
             ? 'showNavbar collapsed'
             : 'showNavbar notCollapsed'
           : 'hideNavbar',
+      ]"> -->
+    <div :class="[
+        isSidebarCollapsed 
+            ? 'container-collapsed-not hideNavbar'
+            : 'container-collapsed',
       ]">
       <sidebar-menu class="sidebar-wrapper" @toggle-collapse="onToggleCollapse" :collapsed="isSidebarCollapsed" @item-click="onItemClick" :theme="'white-theme'" width="220px" 
       :menu="isSubscribed? menu : unsubsSubscribedMenu" v-if="showNavbar">
-        <span slot="header" style="background:#363740">
+        <div slot="header" style="background:#363740">
           <div class="ml-1 mt-3 mb-2" style="padding-left:1px; text-align:center; margin-right: 2.25rem !important;" > 
           <a  v-if="!isSidebarCollapsed" href="/admin/dashboard"><img :src="require('./assets/logo.png')" alt="logo" width="175vw" /></a>
           <a v-if="isSidebarCollapsed" href="/admin/dashboard"><img :src="require('./assets/favicon.png')" alt="logo" width="35vw" /></a>
           </div>
           <!-- <p class="header-text">{{ $config.app.name }}</p> -->
           <hr class="rule" />
-        </span>
+        </div>
         <span slot="footer" class="text-center">{{ $config.app.version }}</span>
       </sidebar-menu>
-      <div class="content-wrapper">
+      <!-- <div class="content-wrapper"> -->
+       <div :class="[
+        showNavbar
+            ? 'content-wrapper'
+            : 'content-wrapper-not',
+      ]">
         <router-view />
       </div>
       <div class="footer">Powered By: <a href="https://hypersign.id/" target="_blank"> HyperSign</a></div>
@@ -62,24 +72,35 @@ export default {
           exactPath: true,
         },
         {
-          href: "/admin/subscription",
-          title: "Subscriptions",
-          icon: "fas fa-receipt",
-          exactPath: true,
-        },
-        {
-          href: "/admin/teams",
-          title: "Teams",
-          icon: "fas fa-user-plus",
-          exactPath: true,
-          
-        },
-        {
-          href: "/admin/login",
-          title: "Logout",
-          icon: "fas fa-sign-out-alt",
-          exactPath: true,
-        },
+          title: "Settings",
+          icon: "fas fa-cog",
+          badge: {
+            text: 'new',
+            class: 'vsm--badge_default'
+            // attributes: {}
+            // element: 'span'
+          },
+          child: [
+            {
+              href: "/admin/teams",
+              title: "Teams",
+              icon: "fas fa-user-plus",
+              exactPath: true,
+            },
+            {
+              href: "/admin/subscription",
+              title: "Subscriptions",
+              icon: "fas fa-receipt",
+              exactPath: true,
+            },
+            {
+              href: "/admin/login",
+              title: "Logout",
+              icon: "fas fa-sign-out-alt",
+              exactPath: true,
+            },
+          ]
+        }
       ],
       unsubsSubscribedMenu: [
         {
@@ -237,10 +258,12 @@ export default {
   margin-bottom: 1%;
 }
 
-.showNavbar .content-wrapper {
+.content-wrapper {
   padding: 50px 20px;
 }
-
+.container-collapsed {
+  padding-left: 150px;
+}
 .showNavbar.notCollapsed>.content-wrapper {
   width: calc(100vw - 200px);
   margin-left: auto;
diff --git a/src/components/admin/Profile.vue b/src/components/admin/Profile.vue
index 45a3a45f..f7613256 100644
--- a/src/components/admin/Profile.vue
+++ b/src/components/admin/Profile.vue
@@ -89,11 +89,12 @@
           <div class="card-body">
             <div class="row">
               <div class="col-md-4">
-                <img
+                <!-- <img
                   src="../../assets/avatar.png"
                   alt="John"
                   style="width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"
-                />
+                /> -->
+                <b-avatar style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" square size="8rem" variant="info" :src="getProfileIcon(user.name) "></b-avatar>
               </div>
               <div class="col-md-8" style="flex-wrap: wrap; padding: 20px">
                 <p>DID</p>
@@ -118,10 +119,13 @@
 </template>
 
 <script>
+import profileIconMixins from "../../mixins/profileIconMixins";
+
 export default {
   name: "Profile",
   mounted() {},
   components: {},
+  mixins: [profileIconMixins],
   data() {
     return {
       active: 0,
diff --git a/src/components/admin/createProjectSlider/components/GeneralConfig.vue b/src/components/admin/createProjectSlider/components/GeneralConfig.vue
index 789ea5ae..63b5d6cf 100644
--- a/src/components/admin/createProjectSlider/components/GeneralConfig.vue
+++ b/src/components/admin/createProjectSlider/components/GeneralConfig.vue
@@ -203,7 +203,9 @@
           <label for="endDate" class="col-form-label">Notification: </label>
       </div>
       <div class="col-lg-9 col-md-9 px-0"> 
-        <input  class="largerCheckbox" type="checkbox" v-model="project.isNotificaionEnabled" title="Check to notify all platform users about this event" id="">
+        <b-form-checkbox v-model="project.isNotificaionEnabled" name="check-button" switch>
+        </b-form-checkbox>
+        <!-- <input  class="largerCheckbox" type="checkbox" v-model="project.isNotificaionEnabled" title="Check to notify all platform users about this event" id=""> -->
       </div>  
     </div>
 
diff --git a/src/components/participant/Metrics.vue b/src/components/participant/Metrics.vue
index 3b6dfeb4..19822de8 100644
--- a/src/components/participant/Metrics.vue
+++ b/src/components/participant/Metrics.vue
@@ -9,7 +9,7 @@
     <b-col cols="4" sm="4" class="border-right" md="4">
       <div class="py-4">
         <div class="number">{{ totalEntries }}</div>
-        <div class="text">Total Entries</div>
+        <div class="text">Total Users</div>
       </div>
     </b-col>
     <b-col cols="4" sm="4" md="4">
diff --git a/src/components/participant/NavBar.vue b/src/components/participant/NavBar.vue
index 307002bc..3f9cc095 100644
--- a/src/components/participant/NavBar.vue
+++ b/src/components/participant/NavBar.vue
@@ -1,7 +1,7 @@
 <template>
 	<b-navbar class="nav-bar" toggleable="lg" v-if="show">
 		<b-navbar-brand href="https://fyre.hypersign.id/">
-			<img src="../../assets/logo.png" height="50px">
+			<img src="../../assets/logo.png" height="35px">
 		</b-navbar-brand>
 		<a href="#" class="menu ml-auto text-white text-decoration-none" v-if="authToken != '' && authToken != null" @click="logout">
 			<img src="../../assets/box-arrow-right.svg" height="30px">
diff --git a/src/mixins/profileIconMixins.js b/src/mixins/profileIconMixins.js
new file mode 100644
index 00000000..0c82ff2e
--- /dev/null
+++ b/src/mixins/profileIconMixins.js
@@ -0,0 +1,7 @@
+export default {
+    methods: {
+        getProfileIcon(name) {
+            return "https://avatars.dicebear.com/api/identicon/"+name+".svg"
+        },
+    },
+};
\ No newline at end of file
diff --git a/src/views/Invitation.vue b/src/views/Invitation.vue
index 974287c1..fd443458 100644
--- a/src/views/Invitation.vue
+++ b/src/views/Invitation.vue
@@ -56,7 +56,7 @@ methods:{
            return this.$swal.fire({
             position: 'center',
             icon: 'warning',
-            title: `${errorMsg}`,
+            title: `${errorMsg.Error}`,
             showConfirmButton: false,
             timer: 5000
             })
diff --git a/src/views/admin/Events.vue b/src/views/admin/Events.vue
index 434d7dfe..6af791a6 100644
--- a/src/views/admin/Events.vue
+++ b/src/views/admin/Events.vue
@@ -131,10 +131,10 @@ i {
 }
 
 .fixBanner {
-  min-width: 150px;
-  min-height: 150px;
-  max-width: 150px;
-  max-height: 150px;
+  min-width: 400px;
+  min-height: 200px;
+  max-width: 400px;
+  max-height: 200px;
 }
 </style>
 <style>
@@ -250,118 +250,114 @@ i {
     </div>
     <div class="row" style="margin-top: 2%">
       <div
-        class="col-md-12 my-5 w-100"
-        style="text-align: left; max-height: 660px; overflow-y: scroll"
+        class="col-md-4"
+        v-for="project in projectsToShow"
+        v-bind:key="project.projectName"
       >
-        <div
-          class="card event-card"
-          v-for="project in projectsToShow"
-          v-bind:key="project.projectName"
+      <div>
+        <b-card
+          :title="truncate1(project.projectName,25)"
+          :img-src="project.logoUrl"
+          img-alt="Image"
+          img-top
+          img-height="150"
+          tag="article"
+          style="max-width: 20rem;margin-top:20px;"
+          class="mb-2"
+          @error="onBannerError($event)"
         >
-          <div class="theme event-card-header">
-            <span style="">{{ truncate1(project.projectName, 25) }}</span>
-            <span
+          <ul style="list-style-type: none;padding-left: 0px;">
+            <li
               data-toggle="tooltip"
               data-placement="bottom"
-              title="Project Status"
-              style="float: right"
+              title="EventId"
             >
-              <span v-if="project.projectStatus == true">
-                <i class="fas fa-signal" style="color: green"></i>
+              <i class="far fa-id-card"></i
+              ><span class="card-title">{{ project._id }}</span>
+              <span @click="copy(project._id, 'EventId')" class="copy"
+                ><i class="far fa-copy"></i
+              ></span>
+            </li>
+            <li
+              data-toggle="tooltip"
+              data-placement="bottom"
+              title="Start Date"
+            >
+              <i class="fas fa-hourglass-start"></i>
+              {{ formateDate(project.fromDate)}}
+            </li>
+            <li
+              data-toggle="tooltip"
+              data-placement="bottom"
+              title="End Date"
+            >
+              <i class="fas fa-hourglass-end"></i>
+              {{ formateDate(project.toDate) }}
+            </li>
+
+            <li
+              data-toggle="tooltip"
+              data-placement="bottom"
+              title="Event Url"
+            >
+              <i class="fas fa-calendar-alt"></i>
+              <a
+                :href="project.whitelisting_link"
+                target="_blank"
+                class="card-body-custom"
+              >
+                Event Url</a
+              ><span
+                @click="copy(project.whitelisting_link, 'Form Url')"
+                class="copy"
+                ><i class="far fa-copy"></i
+              ></span>
+            </li>
+
+            <li
+              data-toggle="tooltip"
+              data-placement="bottom"
+              title="Participants List"
+            >
+              <i class="fas fa-users"></i
+              ><a
+                class="card-body-custom"
+                :href="`/admin/participants?projectId=${project._id}`"
+                >Participants ({{ project.investorsCount }})</a
+              >
+            </li>
+            <li
+              data-toggle="tooltip"
+              data-placement="bottom"
+              title="Edit Event"
+            >
+              <i class="fas fa-pencil-alt" ></i>          
+              <b-link href="#" variant="primary" @click="editProject(project)">Edit Event </b-link>
+            </li>
+          </ul>
+          <footer>
+            <small >
+                <b-badge  v-for="tag in project.tags"
+                :key="tag.id"
+                pill 
+                variant="secondary">{{tag.type.split('_')[0]}}</b-badge>
+            </small>
+            <small style="float:right">
+              <span v-if="project.projectStatus == true" data-toggle="tooltip" title="Active">
+              <i class="fas fa-signal" style="color: green"></i>
               </span>
               <span
-                v-if="!project.projectStatus || project.projectStatus == false"
+              v-if="!project.projectStatus || project.projectStatus == false"
+              data-toggle="tooltip" title="Inactive"
               >
-                <i class="fas fa-signal" style="color: red"></i>
+              <i class="fas fa-signal" style="color: red"></i>
               </span>
-            </span>
-          </div>
-          <div class="card-body card-body-custom">
-            <div class="row">
-              <div class="col-md-4">
-                <img
-                  :src="project.logoUrl"
-                  class="fixBanner"
-                  @error="onBannerError($event)"
-                />
-              </div>
-              <div class="col-md-8">
-                <ul style="list-style-type: none">
-                  <li
-                    data-toggle="tooltip"
-                    data-placement="bottom"
-                    title="EventId"
-                  >
-                    <i class="far fa-id-card"></i
-                    ><span class="card-title">{{ project._id }}</span>
-                    <span @click="copy(project._id, 'EventId')" class="copy"
-                      ><i class="far fa-copy"></i
-                    ></span>
-                  </li>
-                  <li
-                    data-toggle="tooltip"
-                    data-placement="bottom"
-                    title="Start Date"
-                  >
-                    <i class="fas fa-hourglass-start"></i>
-                    {{ new Date(project.fromDate).toLocaleString() }}
-                  </li>
-                  <li
-                    data-toggle="tooltip"
-                    data-placement="bottom"
-                    title="End Date"
-                  >
-                    <i class="fas fa-hourglass-end"></i>
-                    {{ new Date(project.toDate).toLocaleString() }}
-                  </li>
-
-                  <li
-                    data-toggle="tooltip"
-                    data-placement="bottom"
-                    title="Event Url"
-                  >
-                    <i class="fas fa-calendar-alt"></i>
-                    <a
-                      :href="project.whitelisting_link"
-                      target="_blank"
-                      class="card-body-custom"
-                    >
-                      Event Url</a
-                    ><span
-                      @click="copy(project.whitelisting_link, 'Form Url')"
-                      class="copy"
-                      ><i class="far fa-copy"></i
-                    ></span>
-                  </li>
-
-                  <li
-                    data-toggle="tooltip"
-                    data-placement="bottom"
-                    title="Participants List"
-                  >
-                    <i class="fas fa-users"></i
-                    ><a
-                      class="card-body-custom"
-                      :href="`/admin/participants?projectId=${project._id}`"
-                      >Participants ({{ project.investorsCount }})</a
-                    >
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div class="theme event-card-footer">
-            <span
-              style="float: right; cursor: pointer"
-              data-toggle="tooltip"
-              data-placement="bottom"
-              title="Edit this event"
-              ><i class="fas fa-pencil-alt" @click="editProject(project)"></i
-            ></span>
-          </div>
-        </div>
+            </small>
+          </footer>
+        </b-card>
       </div>
     </div>
+    </div>
     <paginate
       v-if="projectsToShow.length"
       :pageCount="Math.ceil(this.projects.length / this.perPage)"
@@ -399,6 +395,7 @@ export default {
 
   data() {
     return {
+      requiredColumn:2,
       project: {
         _id: "",
         projectName: "",
@@ -556,6 +553,7 @@ export default {
       }
     },
     onBannerError(e) {
+      console.log(e.target)
       e.target.src = require("../../assets/default-banner.png");
     },
     copy(textToCopy, contentType) {
@@ -796,7 +794,14 @@ export default {
       this.$router.push(`${id}`);
     },
     formateDate(d) {
-      return new Date(d).toLocaleString();
+      if(d) {
+        let date = new Date(d);
+        return date.toDateString() + " " + date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
+      } else {
+        return new Date()
+      }
+      
+      // return new Date(d).toLocaleString();
     },
     editProject(project) {
       this.resetAllValues();
@@ -1125,7 +1130,18 @@ export default {
       return truncate(str, number);
     },
   },
-
+  computed: {
+    columns () {
+      let columns = []
+
+      let mid = Math.ceil(this.projectsToShow.length / this.requiredColumn)
+      for (let col = 0; col < this.requiredColumn; col++) {
+        console.log(this.projectsToShow.slice(col * mid, col * mid + mid))
+        columns.push(this.projectsToShow.slice(col * mid, col * mid + mid))
+      }
+      return columns
+    }
+  },
   mixins: [notificationMixins],
 };
 </script>