diff --git a/src/App.vue b/src/App.vue
index b15d03a..988b560 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -155,7 +155,7 @@
 
     <sidebar-menu class="sidebar-wrapper" v-if="showSideNavbar" @toggle-collapse="onToggleCollapse"
       :collapsed="isSidebarCollapsed" :theme="'white-theme'" width="220px" :menu="getSideMenu()">
-      <div slot="header" class="border">
+      <div slot="header" style="border-bottom: 1px solid #d3d3d354;">
         <div class="row center p-1">
           <div class="col">
             <div class="p-1 center">
@@ -200,8 +200,8 @@
   padding: 5px !important;
   padding-left: 1.5%;
   text-align: left;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px 0px,
-    rgba(0, 0, 0, 0.02) 0px 3px 1px -2px, rgba(0, 0, 0, 0.01) 0px 1px 5px 0px;
+  box-shadow: 0 2px 6px 0 rgba(32, 33, 37, .1);
+  z-index: -1;
 }
 
 .orgNameCss {
@@ -258,7 +258,8 @@
 .sidebar-wrapper {
   min-width: 70px;
   margin-top: 65px;
-  box-shadow: 0 0 15px 0 rgba(34, 41, 47, 0.05);
+  /* box-shadow: 0 0 15px 0 rgba(34, 41, 47, 0.05); */
+  box-shadow: 0 2px 6px 0 rgba(32, 33, 37, .1);
 }
 
 .v-sidebar-menu.vsm_white-theme .vsm--mobile-bg {
diff --git a/src/assets/css/gblStyle.css b/src/assets/css/gblStyle.css
index 0c8ef2d..9b533ac 100644
--- a/src/assets/css/gblStyle.css
+++ b/src/assets/css/gblStyle.css
@@ -1,6 +1,7 @@
+
 #app {
     text-align: left;
-    background-color: #fff;
+    /* background-color: #fff; */
     font-size: 13px;
     font-style: normal;
     font-weight: 400;
@@ -9,6 +10,7 @@
     color: #636363;
 }
 
+
 .button-theme{
     background-color: #905ab0;
     border-collapse: #905ab0;
@@ -97,10 +99,18 @@ a {
 }
 
 .card {
-    border-radius: 10px;
+    border-radius: 8px;
+    box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%);
 }
 
 .mandatory{
     color: indianred
 }
 
+
+.btn{
+    /* border-radius: 20px; */
+    /* background-color: #a55be6; */
+    /* color: white; */
+    /* border: none */
+}
\ No newline at end of file
diff --git a/src/store/mainStore.js b/src/store/mainStore.js
index c69b19c..63d0171 100644
--- a/src/store/mainStore.js
+++ b/src/store/mainStore.js
@@ -932,7 +932,7 @@ const mainStore = {
                 if (!getters.getSelectedService || !getters.getSelectedService.tenantUrl) {
                     return reject(new Error('Tenant url is null or empty, service is not selected'))
                 }
-                const url = `${sanitizeUrl(getters.getSelectedService.tenantUrl)}/api/v1/e-kyc/verification/widget-config`;
+                const url = `${sanitizeUrl(getters.getSelectedService.tenantUrl)}/api/v1/e-kyc/verification/webhook-config`;
                 // const url = `http://localhost:3001/api/v1/e-kyc/verification/webhook-config`
                 const authToken = getters.getSelectedService.access_token
                 const headers = UtilsMixin.methods.getHeader(authToken);
diff --git a/src/views/Apps.vue b/src/views/Apps.vue
index 9cfb0f8..114bd09 100644
--- a/src/views/Apps.vue
+++ b/src/views/Apps.vue
@@ -606,10 +606,10 @@
   cursor: grab;
 }
 
-.card {
+/* .card {
   box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%);
   border-radius: 20px;
-}
+} */
 
 .icons {
   cursor: pointer;
diff --git a/src/views/SettingConfig.vue b/src/views/SettingConfig.vue
index 073de0a..26095a1 100644
--- a/src/views/SettingConfig.vue
+++ b/src/views/SettingConfig.vue
@@ -63,11 +63,7 @@
         </div>
     </div>
 </template>
-<style>
-.card {
-    box-shadow: 0 0 2rem 0 rgb(136 152 170 / 15%);
-}
-</style>
+
 
 <script>
 import TeamMembers from '../components/teams/TeamMembers.vue';
diff --git a/src/views/playground/DID.vue b/src/views/playground/DID.vue
index f9c1b49..94246b2 100644
--- a/src/views/playground/DID.vue
+++ b/src/views/playground/DID.vue
@@ -63,9 +63,6 @@
   padding: 0px;
 }
 
-.card {
-  border-radius: 10px;
-}
 
 .goschema {
   color: #339af0;
diff --git a/src/views/playground/OnChainKycSystems.vue b/src/views/playground/OnChainKycSystems.vue
index b932483..ca4bc51 100644
--- a/src/views/playground/OnChainKycSystems.vue
+++ b/src/views/playground/OnChainKycSystems.vue
@@ -63,10 +63,6 @@
   padding: 0px;
 }
 
-.card {
-  border-radius: 10px;
-}
-
 .goschema {
   color: #339af0;
 }
diff --git a/src/views/playground/OrgSidebar.vue b/src/views/playground/OrgSidebar.vue
index d5923d9..794aca1 100644
--- a/src/views/playground/OrgSidebar.vue
+++ b/src/views/playground/OrgSidebar.vue
@@ -6,7 +6,8 @@
       </h3>
       <h4 v-else class="mt-4" style="text-align: left;">Create your first organization!</h4>
 
-      <hf-buttons name="Create" iconClass="fa fa-plus" style="text-align: right;" class="ml-auto mt-4" @executeAction="openSlider()">
+      <hf-buttons name="Create" iconClass="fa fa-plus" style="text-align: right;" class="ml-auto mt-4"
+        @executeAction="openSlider()">
       </hf-buttons>
     </div>
     <StudioSideBar :title="edit ? 'Edit Organization' : 'Add Organization'">
@@ -18,8 +19,7 @@
           <input type="text" class="form-control" id="orgDid" v-model="orgStore.orgDid" aria-describedby="orgNameHelp"
             disabled>
           <small id="orgNameHelp" class="form-text text-muted">
-            <a :href="`${$config.explorer.BASE_URL}identity/${orgStore.orgDid}`"
-              target="_blank">Resolve DID</a>
+            <a :href="`${$config.explorer.BASE_URL}identity/${orgStore.orgDid}`" target="_blank">Resolve DID</a>
           </small>
         </div>
 
@@ -36,24 +36,25 @@
           <input type="text" class="form-control" id="domain" v-model="orgStore.domain" aria-describedby="domainHelp"
             placeholder="Enter your domain name">
         </div>
-     
+
         <div class="form-group">
-          
-          
+
+
           <div>
             <tool-tip infoMessage="Organistaion Controller"></tool-tip>
             <label for="controller"><strong>Controllers<span style="color: red">*</span>:</strong></label>
           </div>
-          
-          <div class="selected-media-wrapper d-flex p-2 mb-4" style="overflow-y: auto" v-if="orgStore.controller.length > 0">
+
+          <div class="selected-media-wrapper d-flex p-2 mb-4" style="overflow-y: auto"
+            v-if="orgStore.controller.length > 0">
             <div v-for="ctl in orgStore.controller" v-bind:key="ctl">
-              <div :class="
-                flash == ctl
-                ? 'flash card rounded m-1 p-1 d-flex flex-row align-items-center'
-                : 'card rounded m-1 p-1 d-flex flex-row align-items-center pointer'"
-                style="min-width:90px; background-color: lightyellow; box-shadow: #80808042 1px 1px 1px 1px; color: grey" :title="ctl">
+              <div :class="flash == ctl
+                  ? 'flash card rounded m-1 p-1 d-flex flex-row align-items-center'
+                  : 'card rounded m-1 p-1 d-flex flex-row align-items-center pointer'"
+                style="min-width:90px; background-color: lightyellow; box-shadow: #80808042 1px 1px 1px 1px; color: grey"
+                :title="ctl">
                 <div>
-                  {{ truncate(ctl,25)  }}
+                  {{ truncate(ctl, 25) }}
                 </div>
                 <!-- <div style="padding: 5px; color: lightcoral;cursor: pointer;" @click="deleteController(ctl)" title="Remove this controller">
                   <i style="" class="fa fa-trash"></i>
@@ -63,8 +64,8 @@
           </div>
 
 
-          
-<!-- 
+
+          <!-- 
           <div v-if="isAdd">
             <div class="input-group mb-3">
               <input type="text" class="form-control" id="controllers" v-model="controllerValue" aria-describedby="controllerHelp" placeholder="did:hid:...8HPRgfJAnph">
@@ -93,53 +94,56 @@
     <div class="row scroll" v-if="orgList.length > 0">
       <div class="col-lg-4" v-for="eachOrg in orgList" :key="eachOrg._id">
 
-        <b-card :title="truncate(eachOrg.name,20)" tag="article" style="max-width: 30rem; margin-top: 10px; height:13rem"
-          class="mb-2 eventCard" img-top>
-          <ul style="list-style-type: none;padding-left: 0px;min-height: 80px;">            
-            <img style="float:right;" :src="`${getProfileIcon(eachOrg.name)}`" class="mr-2" alt="center" width="70px"/>            
-            <li class="" v-if="eachOrg.status ==='Registered'" style="">
+        <b-card :title="truncate(eachOrg.name, 20)" tag="article"
+          style="max-width: 30rem; margin-top: 10px; height:13rem" class="mb-2 eventCard" img-top>
+          <ul style="list-style-type: none;padding-left: 0px;min-height: 80px;">
+            <img style="float:right;" :src="`${getProfileIcon(eachOrg.name)}`" class="mr-2" alt="center" width="70px" />
+            <li class="" v-if="eachOrg.status === 'Registered'" style="">
               <i class="fa fa-user mr-2"></i>
-              <span class=""><a target="_blank" :href="`${$config.explorer.BASE_URL}identity/${eachOrg.orgDid}`">{{ truncate(eachOrg.orgDid,25) }}</a></span>
-              <span v-if="eachOrg.status === 'Registered'" @click="copyToClip(eachOrg.orgDid,'Org DID')"
-              ><i class="far fa-copy"></i></span>
-            </li>
-            <div v-if="eachOrg.status ==='Registered'">
-            <li class="">
-              <span><i class="fa fa-id-card mr-2"></i>Credentials : <span class="badge badge-secondary badge-pill">{{eachOrg.credentialsCount}}</span></span>
-            </li>
-            <li class="">
-              <span><i class="fa fa-table mr-2"></i>Schemas   : <span class="badge badge-secondary badge-pill">{{eachOrg.schemasCount}}</span></span>
-            </li>
-            <li class="">
-              <span><i class="fa fa-desktop mr-2"></i>Templates : <span class="badge badge-secondary badge-pill">{{eachOrg.templatesCount}}</span></span>
+              <span class=""><a target="_blank" :href="`${$config.explorer.BASE_URL}identity/${eachOrg.orgDid}`">{{
+                truncate(eachOrg.orgDid,25) }}</a></span>
+              <span v-if="eachOrg.status === 'Registered'" @click="copyToClip(eachOrg.orgDid, 'Org DID')"><i
+                  class="far fa-copy"></i></span>
             </li>
+            <div v-if="eachOrg.status === 'Registered'">
+              <li class="">
+                <span><i class="fa fa-id-card mr-2"></i>Credentials : <span
+                    class="badge badge-secondary badge-pill">{{ eachOrg.credentialsCount }}</span></span>
+              </li>
+              <li class="">
+                <span><i class="fa fa-table mr-2"></i>Schemas : <span
+                    class="badge badge-secondary badge-pill">{{ eachOrg.schemasCount }}</span></span>
+              </li>
+              <li class="">
+                <span><i class="fa fa-desktop mr-2"></i>Templates : <span
+                    class="badge badge-secondary badge-pill">{{ eachOrg.templatesCount }}</span></span>
+              </li>
             </div>
           </ul>
           <footer>
             <div class="form-group row" style="margin-bottom: 0rem;">
               <div class="col-sm-10">
-              <ul style="list-style-type: none;padding-left: 0px;">
-              <li v-if="eachOrg.status === 'Failed'">
-              <span class="card-title" >
-                <img :src="images.redcross" height="25" width="25" /> Failed
-              </span>
-            </li>
-            <li v-else-if="eachOrg.status === 'Registered'">
-              <span class="card-title" >
-                <img :src="images.greentick" height="21" width="21"/> Registered
-              </span>
-            </li>
-            <li v-else>
-              <span class="card-title" >
-                <img :src="images.loader"  height="25" width="25"/> Processing ..... 
-              </span>
-            </li>
-            </ul>
-            </div>
-                <div class="pl-2" v-if="eachOrg.status === 'Registered'">            
-                <i class="fas fa-pencil-alt"
-                @click="editOrg(eachOrg._id)" title="Click to edit this event" style="cursor: pointer"
-                ></i>
+                <ul style="list-style-type: none;padding-left: 0px;">
+                  <li v-if="eachOrg.status === 'Failed'">
+                    <span class="card-title">
+                      <img :src="images.redcross" height="25" width="25" /> Failed
+                    </span>
+                  </li>
+                  <li v-else-if="eachOrg.status === 'Registered'">
+                    <span class="card-title">
+                      <img :src="images.greentick" height="21" width="21" /> Registered
+                    </span>
+                  </li>
+                  <li v-else>
+                    <span class="card-title">
+                      <img :src="images.loader" height="25" width="25" /> Processing .....
+                    </span>
+                  </li>
+                </ul>
+              </div>
+              <div class="pl-2" v-if="eachOrg.status === 'Registered'">
+                <i class="fas fa-pencil-alt" @click="editOrg(eachOrg._id)" title="Click to edit this event"
+                  style="cursor: pointer"></i>
                 <span class="ml-3"></span>
                 <i class="fas fa-sync" aria-hidden="true" @click="switchOrg(eachOrg._id)" title="Click to switch to org"
                   style="cursor: pointer"></i>
@@ -181,8 +185,6 @@
   cursor: pointer;
 }
 
-.card {}
-
 .card-body {
   -ms-flex: 1 1 auto;
   -webkit-box-flex: 1;
@@ -210,7 +212,7 @@ import Loading from "vue-loading-overlay";
 import HfButtons from '../../components/element/HfButtons.vue'
 import ToolTip from '../../components/element/ToolTip.vue'
 import messages from '../../mixins/messages';
-import  { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
+import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 export default {
   computed: {
     ...mapState({
@@ -249,48 +251,48 @@ export default {
   components: { HfPopUp, Loading, StudioSideBar, HfButtons, ToolTip },
   methods: {
     ...mapActions('playgroundStore', ['fetchAllOrgDataOnOrgSelect']),
-    ...mapMutations('playgroundStore', ['shiftContainer', 'updateSideNavStatus', 'increaseOrgCount', 'selectAnOrg', 'insertAnOrg','updateAnOrg']),
+    ...mapMutations('playgroundStore', ['shiftContainer', 'updateSideNavStatus', 'increaseOrgCount', 'selectAnOrg', 'insertAnOrg', 'updateAnOrg']),
     selectController(id) {
-      this.isAdd=false
+      this.isAdd = false
       this.flash = id
     },
-    deleteController(id){
+    deleteController(id) {
       this.orgStore.controller.splice(id, 1)
       this.flash = null
-      this.isAdd=true
+      this.isAdd = true
     }
     ,
-    cancelController(){
+    cancelController() {
       this.flash = null
-      this.isAdd=true
-    
+      this.isAdd = true
+
     },
     addController() {
 
-      try{
-        if(!this.controllerValue){
+      try {
+        if (!this.controllerValue) {
           throw new Error("Please enter contoller id")
         }
 
-        if(!this.controllerValue.startsWith("did:hid")){
+        if (!this.controllerValue.startsWith("did:hid")) {
           throw new Error("DID method not supported")
         }
 
-        if(this.orgStore.controller.indexOf(this.controllerValue) >= 0){
+        if (this.orgStore.controller.indexOf(this.controllerValue) >= 0) {
           throw new Error("The controller has already been added")
         }
 
         this.isAdd = true
         this.orgStore.controller.push(this.controllerValue)
-        
-      }catch(e){
+
+      } catch (e) {
         this.notifyErr(e.message)
       } finally {
         this.controllerValue = ""
       }
     },
     getProfileIcon(name) {
-      return "https://api.dicebear.com/7.x/identicon/svg?seed="+name
+      return "https://api.dicebear.com/7.x/identicon/svg?seed=" + name
     },
     ssePopulateOrg(id, store) {
       const sse = new EventSource(`${this.$config.studioServer.ORG_SSE}${id}`);
@@ -351,7 +353,7 @@ export default {
 
       this.selectAnOrg(orgDid)
       this.$router.push({ name: 'playgroundCredential' })
-    
+
       await this.fetchAllOrgDataOnOrgSelect();
 
       this.shiftContainer(false)
@@ -416,10 +418,10 @@ export default {
           let QR_DATA = j.data.QrData
           let URL = `${this.$config.webWalletAddress}/deeplink?url=${JSON.stringify(QR_DATA)}`
 
-          if(this.edit===true){
+          if (this.edit === true) {
             this.notifySuccess("Org Edited successfull");
             return this.$root.$emit("bv::toggle::collapse", "sidebar-right");
-            
+
           }
           this.openWallet(URL)
           if (j.error === false) {
@@ -439,7 +441,7 @@ export default {
               this.$root.$emit("bv::toggle::collapse", "sidebar-right");
             }
 
-            
+
           }
 
 
@@ -453,8 +455,8 @@ export default {
     clearAll() {
       this.controllerValue = ""
       this.orgStore = {
-      flash: null,
-      isAdd: true,
+        flash: null,
+        isAdd: true,
 
         name: "",
         domain: "https://entity.hypersign.id",
diff --git a/src/views/playground/Presentation.vue b/src/views/playground/Presentation.vue
index c6515fb..6e44712 100644
--- a/src/views/playground/Presentation.vue
+++ b/src/views/playground/Presentation.vue
@@ -2,28 +2,31 @@
 .floatLeft {
   float: left;
 }
-.card {
-  border-radius: 10px;
-}
+
 .card-header {
   background: aliceblue;
   padding: 0px;
 }
-.goschema{
+
+.goschema {
   color: #339af0;
 }
+
 .goschema:hover {
-    text-decoration: underline;
-    cursor: pointer;
+  text-decoration: underline;
+  cursor: pointer;
 }
+
 .scrollit {
-  overflow:hidden;  
-  height:600px;
+  overflow: hidden;
+  height: 600px;
 }
-.scrollit:hover{
+
+.scrollit:hover {
   overflow-y: auto;
 }
-.far{
+
+.far {
   color: gray;
   font-size: 1.5em;
   /* padding-top: 10px; */
@@ -40,136 +43,115 @@
 }
 
 .multiselect__tag {
-  background:var(--button-bg-color)
+  background: var(--button-bg-color)
 }
 </style>
 <template>
-  <div :class="isContainerShift ?'homeShift':'home'">
+  <div :class="isContainerShift ? 'homeShift' : 'home'">
     <loading :active.sync="isLoading" :can-cancel="true" :is-full-page="fullPage"></loading>
 
     <div class="row">
       <div class="col-md-12" style="text-align: left">
         <!-- <Info :message="description" /> -->
-        
-          <div class="form-group" style="display:flex">
-           <h3 v-if="templateList.length > 0" class="mt-4" style="text-align: left;">
+
+        <div class="form-group" style="display:flex">
+          <h3 v-if="templateList.length > 0" class="mt-4" style="text-align: left;">
             Presentation Templates</h3>
-            <h3 v-else class="mt-4" style="text-align: left;">Create your first presentation template!</h3>            
-            <hf-buttons 
-              name="Create" iconClass="fa fa-plus"
-              style="text-align: right;"
-              class="ml-auto mt-4"
-              @executeAction="openSlider()"
-            ></hf-buttons>
-          </div>
-          <StudioSideBar :title="isEdit ? 'Edit Presentation Template' : 'Create Presentation Template'">
+          <h3 v-else class="mt-4" style="text-align: left;">Create your first presentation template!</h3>
+          <hf-buttons name="Create" iconClass="fa fa-plus" style="text-align: right;" class="ml-auto mt-4"
+            @executeAction="openSlider()"></hf-buttons>
+        </div>
+        <StudioSideBar :title="isEdit ? 'Edit Presentation Template' : 'Create Presentation Template'">
 
-              <div class="form-group row container">
-                <div class="col-md-12">
-                  <form>
-                    <!-- <div class="form-group">
+          <div class="form-group row container">
+            <div class="col-md-12">
+              <form>
+                <!-- <div class="form-group">
                       <label class="floatLeft"><strong> Domain :</strong></label>
                       <input class="form-control" type="url" v-model="presentationTemplate.domain" disabled/>
 
 
                     </div> -->
-                    <div class="form-group">
-                      <tool-tip infoMessage="Name for the Presentation template"></tool-tip>
-                      <label ><strong>Name (optional) :</strong></label>                      
-                      <input class="form-control" type="text" v-model="presentationTemplate.name" 
-                      placeholder="Enter name for this presentation"/>
+                <div class="form-group">
+                  <tool-tip infoMessage="Name for the Presentation template"></tool-tip>
+                  <label><strong>Name (optional) :</strong></label>
+                  <input class="form-control" type="text" v-model="presentationTemplate.name"
+                    placeholder="Enter name for this presentation" />
 
 
-                    </div>
-                    <div class="form-group">
-                      <tool-tip infoMessage="Did of the issuer"></tool-tip>
-                      <label><strong> Issuer DID<span style="color: red">*</span>:</strong></label>                      
+                </div>
+                <div class="form-group">
+                  <tool-tip infoMessage="Did of the issuer"></tool-tip>
+                  <label><strong> Issuer DID<span style="color: red">*</span>:</strong></label>
 
-                      <input class="form-control" type="text" v-model="presentationTemplate.issuerDid"
-                      placeholder="Issuer did (did:hs:...)" disabled/>
+                  <input class="form-control" type="text" v-model="presentationTemplate.issuerDid"
+                    placeholder="Issuer did (did:hs:...)" disabled />
 
 
-                    </div>
-                    <!-- <div class="form-group">
+                </div>
+                <!-- <div class="form-group">
                       <label class="floatLeft"><strong>Schema Id :<strong></label>
                       <input class="form-control" type="text" v-model="presentationTemplate.schemaId" />
 
 
                     </div> -->
-                    <div class="form-group">
-                      <tool-tip infoMessage="Select Schema to create template"></tool-tip>
-                      <label for="forselectschema"><strong>Select Schema<span style="color: red">*</span>:</strong></label>                      
-                      <!-- <hf-select-drop-down
+                <div class="form-group">
+                  <tool-tip infoMessage="Select Schema to create template"></tool-tip>
+                  <label for="forselectschema"><strong>Select Schema<span style="color: red">*</span>:</strong></label>
+                  <!-- <hf-select-drop-down
                       :options="selectOptions"
                        @selected="e =>{OnSchemaSelectDropDownChange(e)}"
                       ></hf-select-drop-down> -->
 
 
-                      <multiSelect
-                        v-model="selectedSchemIdsInMultiSelect"
-                        placeholder="Search or select schema (s)"
-                        label="text"
-                        track-by="value"
-                        :options="selectOptions"
-                        :multiple="true"
-                        :taggable="false"
-                        :close-on-select="false"
-                        :clear-on-select="false"
-                        @input="onInputTag"
-                      >
-                      </multiselect>
-
-                      <div v-if="selectOptions.length === 1">
-                      <span class="goschema" @click="gotosubpage('playgroundSchema')">Create Schema</span>                      
-                      </div>
-                    </div>              
-                    <div class="form-group">
-                      <tool-tip infoMessage="Reason for the template"></tool-tip>
-                      <label><strong>Reason<span style="color: red">*</span>:</strong></label>                      
-                      <input class="form-control" type="text" @keyup='charCount()' v-model="presentationTemplate.reason" 
-                      placeholder="Reason for the template"/>
-                      <span>{{remainingCharText}}</span>
-
-                    </div>
-                    <div class="form-group">
-                      <tool-tip infoMessage="Callback URI"></tool-tip>
-                      <label><strong>Callback URI<span style="color: red">*</span>:</strong></label>                      
-
-                      <input class="form-control" type="url" v-model="presentationTemplate.callbackUrl" 
-                      placeholder="Callback URI"/>
-
-
-                    </div>
-                    <!-- <div class="form-group">
+                  <multiSelect v-model="selectedSchemIdsInMultiSelect" placeholder="Search or select schema (s)"
+                    label="text" track-by="value" :options="selectOptions" :multiple="true" :taggable="false"
+                    :close-on-select="false" :clear-on-select="false" @input="onInputTag">
+                  </multiselect>
+
+                  <div v-if="selectOptions.length === 1">
+                    <span class="goschema" @click="gotosubpage('playgroundSchema')">Create Schema</span>
+                  </div>
+                </div>
+                <div class="form-group">
+                  <tool-tip infoMessage="Reason for the template"></tool-tip>
+                  <label><strong>Reason<span style="color: red">*</span>:</strong></label>
+                  <input class="form-control" type="text" @keyup='charCount()' v-model="presentationTemplate.reason"
+                    placeholder="Reason for the template" />
+                  <span>{{ remainingCharText }}</span>
+
+                </div>
+                <div class="form-group">
+                  <tool-tip infoMessage="Callback URI"></tool-tip>
+                  <label><strong>Callback URI<span style="color: red">*</span>:</strong></label>
+
+                  <input class="form-control" type="url" v-model="presentationTemplate.callbackUrl"
+                    placeholder="Callback URI" />
+
+
+                </div>
+                <!-- <div class="form-group">
                       <tool-tip infoMessage="Required"></tool-tip>                      
                       <label><strong>Required </strong></label>
                       <input type="checkbox" class="ml-2" v-model="presentationTemplate.required" />
                     </div> -->
 
-                  </form>
-                  <hr />
-                  <hf-buttons 
-                  v-if="isEdit === true"
-                    name="Update"                    
-                    @executeAction="generatePresentation()"
-                  ></hf-buttons>
-                  <hf-buttons 
-                    v-else
-                    name="Save"                    
-                    @executeAction="generatePresentation()"
-                  ></hf-buttons>
-                </div>
-              </div>
-            </StudioSideBar>
-          
+              </form>
+              <hr />
+              <hf-buttons v-if="isEdit === true" name="Update" @executeAction="generatePresentation()"></hf-buttons>
+              <hf-buttons v-else name="Save" @executeAction="generatePresentation()"></hf-buttons>
+            </div>
+          </div>
+        </StudioSideBar>
+
       </div>
     </div>
-    <div class="row scrollit" style="margin-top: 2%;" v-if="templateList.length >0">
+    <div class="row scrollit" style="margin-top: 2%;" v-if="templateList.length > 0">
       <div class="col-md-12">
         <table class="table table-bordered event-card" style="background:#FFFF">
           <thead class="thead-light">
             <tr>
-              <th>Template Id </th>        
+              <th>Template Id </th>
               <th>Name</th>
               <!-- <th>Issuer DID</th> -->
               <th>Schema Id (s)</th>
@@ -183,54 +165,39 @@
             <tr v-for="row in templateList" :key="row._id">
               <td class="align-middle">
                 <div class="align-middle" style="display:flex;">
-                <span class="mr-1">{{row._id}}</span>
-                <i class="far fa-copy"
-                style="cursor:pointer;"
-                title="Click to copy Template Id"
-                @click="copyToClip(row._id,'Template Id')"
-                ></i>
+                  <span class="mr-1">{{ row._id }}</span>
+                  <i class="far fa-copy" style="cursor:pointer;" title="Click to copy Template Id"
+                    @click="copyToClip(row._id, 'Template Id')"></i>
                 </div>
-              </td>              
-              <td class="align-middle">{{row.name}}</td>
+              </td>
+              <td class="align-middle">{{ row.name }}</td>
               <!-- <td>{{row.issuerDid.toString()}}</td> -->
               <td class="align-middle">
                 <span v-for="eachschema in row.schemaId" v-if="Array.isArray(row.schemaId)">
-                  <a :href="`${$config.explorer.BASE_URL}schemas/${eachschema}`" target="_blank">{{ shorten(eachschema)}}
+                  <a :href="`${$config.explorer.BASE_URL}schemas/${eachschema}`" target="_blank">{{
+                    shorten(eachschema)}}
                   </a>
-                  <i class="far fa-copy"
-                  style="cursor:pointer;"
-                  title="Click to copy Schema Id"
-                  @click="copyToClip(eachschema,'Schema Id')"
-                  ></i> <br>
+                  <i class="far fa-copy" style="cursor:pointer;" title="Click to copy Schema Id"
+                    @click="copyToClip(eachschema, 'Schema Id')"></i> <br>
                 </span>
                 <span v-else>
-                  <a :href="`${$config.explorer.BASE_URL}schemas/${row.schemaId}`" target="_blank">{{ shorten(row.schemaId)}}
+                  <a :href="`${$config.explorer.BASE_URL}schemas/${row.schemaId}`" target="_blank">{{
+                    shorten(row.schemaId)}}
                   </a>
-                  <i class="far fa-copy"
-                  style="cursor:pointer;"
-                  title="Click to copy Schema Id"
-                  @click="copyToClip(row.schemaId,'Schema Id')"
-                  ></i>
+                  <i class="far fa-copy" style="cursor:pointer;" title="Click to copy Schema Id"
+                    @click="copyToClip(row.schemaId, 'Schema Id')"></i>
                 </span>
-                  
+
               </td>
               <!-- <td class="align-middle">{{row.reason}}</td> -->
-              <td class="align-middle" :title="row.callbackUrl">{{truncate(row.callbackUrl,40)}}</td>
+              <td class="align-middle" :title="row.callbackUrl">{{ truncate(row.callbackUrl, 40) }}</td>
               <td class="align-middle">
-              <div style="display:flex">
-              <i 
-              class="fas fa-pencil-alt pr-1"
-              style="cursor: pointer"
-              title="Click to update"
-              @click="editTemp(row)"
-              ></i>
-              <i 
-              class="fas fa-trash-alt"
-              style="cursor: pointer;"
-              title="Click to delete"
-              @click="clickRowToDelete(row)"
-              ></i>
-              </div>
+                <div style="display:flex">
+                  <i class="fas fa-pencil-alt pr-1" style="cursor: pointer" title="Click to update"
+                    @click="editTemp(row)"></i>
+                  <i class="fas fa-trash-alt" style="cursor: pointer;" title="Click to delete"
+                    @click="clickRowToDelete(row)"></i>
+                </div>
               </td>
             </tr>
           </tbody>
@@ -241,24 +208,19 @@
       </div>
       <!-- </div> -->
     </div>
-    <hf-pop-up
-    Header="Delete Presentation Template"
-    >
-    <div class="row g-3 align-items-center  mt-4">
+    <hf-pop-up Header="Delete Presentation Template">
+      <div class="row g-3 align-items-center  mt-4">
         <div class="col-lg-3 col-md-3 text-left">
           <label for="DeleteId" class="col-form-label">Template Id :</label>
         </div>
         <div class=" col-lg-9 col-md-9">
-          <input v-model="deleteId" type="text" placeholder="6241c8057f5e...e2eaec05d" id="DeleteId" class="form-control w-100" >
-        </div>   
-    </div>
+          <input v-model="deleteId" type="text" placeholder="6241c8057f5e...e2eaec05d" id="DeleteId"
+            class="form-control w-100">
+        </div>
+      </div>
       <div class="mt-5 text-center">
-      <hf-buttons
-      name="Delete"
-      @executeAction="deleteTemp()"
-      title="Delete Presentation Template"
-      customClass="btn btn-danger"
-      ></hf-buttons>
+        <hf-buttons name="Delete" @executeAction="deleteTemp()" title="Delete Presentation Template"
+          customClass="btn btn-danger"></hf-buttons>
       </div>
     </hf-pop-up>
   </div>
@@ -281,21 +243,21 @@ import EventBus from "../../eventbus"
 import ToolTip from "../../components/element/ToolTip.vue"
 import message from '../../mixins/messages'
 import { isEmpty, isValidURL, isValidDid } from '../../mixins/fieldValidation'
-import { mapGetters, mapState, mapActions  } from "vuex";
+import { mapGetters, mapState, mapActions } from "vuex";
 export default {
   name: "Presentation",
-  components: { QrcodeVue , StudioSideBar, HfButtons, Loading, HfSelectDropDown, ToolTip, HfPopUp},
-  computed:{
+  components: { QrcodeVue, StudioSideBar, HfButtons, Loading, HfSelectDropDown, ToolTip, HfPopUp },
+  computed: {
     ...mapGetters('playgroundStore', ['listOfAllSchemaOptions', 'getSelectedOrg']),
     ...mapState({
       templateList: state => state.playgroundStore.templateList,
       containerShift: state => state.playgroundStore.containerShift,
       selectedOrgDid: state => state.playgroundStore.selectedOrgDid
     }),
-    selectedOrg(){
+    selectedOrg() {
       return this.getSelectedOrg;
     },
-    selectOptions(){
+    selectOptions() {
       return this.listOfAllSchemaOptions;
     },
     isContainerShift() {
@@ -305,11 +267,11 @@ export default {
   data() {
     return {
       selectedSchemIdsInMultiSelect: [],
-      isEdit:false,
-      deleteId:'',
-      maxChar:105,
-      remainingCharText:'Remaining 105 characters',
-      tempToDelete:'',    
+      isEdit: false,
+      deleteId: '',
+      maxChar: 105,
+      remainingCharText: 'Remaining 105 characters',
+      tempToDelete: '',
       // description: "The subject (or holder) generates verifiable presentation from one or more verifiable \
       // credentials, issued by one or more issuers, that is shared with a specific verifier. \
       // A verifiable presentation is a tamper-evident presentation encoded in such a way that \
@@ -325,14 +287,14 @@ export default {
         queryType: 'QueryByExample',
         domain: "",
         name: '',
-        issuerDid:'',
+        issuerDid: '',
         schemaId: '',
         reason: '',
         required: true,
         callbackUrl: 'https://entity.hypersign.id',
       },
-      id:'',
-      selected:null,
+      id: '',
+      selected: null,
       active: 0,
       host: location.hostname,
       user: {},
@@ -352,7 +314,7 @@ export default {
       ],
       attributeValues: {},
       authToken: localStorage.getItem("authToken"),
-   
+
       schemaMap: {},
       vcList: [],
       schemaList: [],
@@ -369,7 +331,7 @@ export default {
   created() {
     const usrStr = localStorage.getItem("user");
     this.user = JSON.parse(usrStr);
-    this.$store.commit('playgroundStore/updateSideNavStatus',true)
+    this.$store.commit('playgroundStore/updateSideNavStatus', true)
     // this.fetchTemplates()
     this.fetchSchemasForOrg()
   },
@@ -380,22 +342,22 @@ export default {
   },
   methods: {
     ...mapActions('playgroundStore', ['fetchSchemasForOrg']),
-    onInputTag(){
+    onInputTag() {
       console.log('onInputTag ()  got called')
-      if(this.selectedSchemIdsInMultiSelect.length > 0){
-        console.log('Inside if mapping');  
+      if (this.selectedSchemIdsInMultiSelect.length > 0) {
+        console.log('Inside if mapping');
         this.presentationTemplate.schemaId = this.selectedSchemIdsInMultiSelect.map(x => x.value)
       } else {
-        this.presentationTemplate.schemaId = []; 
+        this.presentationTemplate.schemaId = [];
       }
-    },  
-    charCount(){
-      if(this.presentationTemplate.reason.length > this.maxChar) {
-        this.remainingCharText = "Exceeded"+" "+this.maxChar+" "+"characters limit"
+    },
+    charCount() {
+      if (this.presentationTemplate.reason.length > this.maxChar) {
+        this.remainingCharText = "Exceeded" + " " + this.maxChar + " " + "characters limit"
       } else {
         let remainingChar = this.maxChar - this.presentationTemplate.reason.length;
-        this.remainingCharText = "Remaining"+" "+remainingChar+" "+"characters."      
-        }
+        this.remainingCharText = "Remaining" + " " + remainingChar + " " + "characters."
+      }
     },
     editTemp(temp) {
       this.selectedSchemIdsInMultiSelect = []
@@ -404,64 +366,64 @@ export default {
       this.id = temp._id
       this.presentationTemplate.name = temp.name
       this.presentationTemplate.issuerDid = temp.issuerDid[0]
-      
-      if(Array.isArray(temp.schemaId)){
+
+      if (Array.isArray(temp.schemaId)) {
         this.presentationTemplate.schemaId = temp.schemaId
         this.selectOptions.forEach(eachOpt => {
-          if(temp.schemaId.find(x => x == eachOpt.value)){
+          if (temp.schemaId.find(x => x == eachOpt.value)) {
             this.selectedSchemIdsInMultiSelect.push(eachOpt)
           }
         });
-        
-        
+
+
       } else {
         this.presentationTemplate.schemaId = [temp.schemaId]
-        
+
         const t = this.selectOptions.find(x => x.value === temp.schemaId)
         this.selectedSchemIdsInMultiSelect.push(t)
       }
-      
+
       this.presentationTemplate.reason = temp.reason
       this.charCount()
       this.presentationTemplate.callbackUrl = temp.callbackUrl
       // this.presentationTemplate.required = temp.required
     },
     clickRowToDelete(temp) {
-     this.deleteId = ''
+      this.deleteId = ''
       this.tempToDelete = temp._id;
       this.$root.$emit('modal-show');
     },
-   async deleteTemp() {
+    async deleteTemp() {
       try {
-        if(this.deleteId === "") {
+        if (this.deleteId === "") {
           this.notifyErr("Please enter template id")
-        } 
+        }
         this.isLoading = true
-        if(this.deleteId) {
-          if(this.deleteId === this.tempToDelete) {
+        if (this.deleteId) {
+          if (this.deleteId === this.tempToDelete) {
             const url = `${this.$config.studioServer.BASE_URL}${this.$config.studioServer.PRESENTATION_TEMPLATE_EP}/${this.tempToDelete}`;
-                const headers = {
-                  "Content-Type": "application/json",
-                  "Authorization": `Bearer ${this.authToken}`               
-                };
-                const resp = await fetch(url, {
-                  headers,
-                  method: "DELETE",
-                });
-                const json = await resp.json();
-                console.log(json.data._id)
-                if(json.data._id){
-                  const id = json.data._id
-                  this.$store.commit('playgroundStore/deleteTemplate',id)
-                  this.notifySuccess(`Template with ${id} id deleted successfully`)
-                  this.$root.$emit('modal-close')
-                  this.$store.commit('playgroundStore/DecreaseOrgTemplateCount','templatesCount')
-                }          
+            const headers = {
+              "Content-Type": "application/json",
+              "Authorization": `Bearer ${this.authToken}`
+            };
+            const resp = await fetch(url, {
+              headers,
+              method: "DELETE",
+            });
+            const json = await resp.json();
+            console.log(json.data._id)
+            if (json.data._id) {
+              const id = json.data._id
+              this.$store.commit('playgroundStore/deleteTemplate', id)
+              this.notifySuccess(`Template with ${id} id deleted successfully`)
+              this.$root.$emit('modal-close')
+              this.$store.commit('playgroundStore/DecreaseOrgTemplateCount', 'templatesCount')
+            }
           } else {
             this.notifyErr('Please enter correct template id')
           }
         }
-      }catch (e){
+      } catch (e) {
         console.log(e)
       } finally {
         this.isLoading = false
@@ -469,7 +431,7 @@ export default {
 
     },
     clearAll() {
-      EventBus.$emit("resetOption",this.selected)
+      EventBus.$emit("resetOption", this.selected)
       this.presentationTemplate.issuerDid = ''
       this.presentationTemplate.domain = ''
       this.presentationTemplate.name = ''
@@ -477,13 +439,13 @@ export default {
       this.presentationTemplate.callbackUrl = 'https://entity.hypersign.id'
       this.presentationTemplate.reason = ''
       this.isEdit = false
-      this.maxChar=105,
-      this.remainingCharText='Remaining 105 characters'
+      this.maxChar = 105,
+        this.remainingCharText = 'Remaining 105 characters'
       this.selectedSchemIdsInMultiSelect = []
     },
     openSlider() {
       this.clearAll()
-      this.presentationTemplate.issuerDid= this.getSelectedOrg.orgDid
+      this.presentationTemplate.issuerDid = this.getSelectedOrg.orgDid
       // this.presentationTemplate.issuerDid = JSON.parse(localStorage.getItem("user")).id
       this.presentationTemplate.domain = this.selectedOrg.domain;
       this.$root.$emit("bv::toggle::collapse", "sidebar-right");
@@ -517,7 +479,7 @@ export default {
         })
         .catch((e) => this.notifyErr(`Error: ${e.message}`));
     },
-    gotosubpage (name){
+    gotosubpage(name) {
       this.$router.push({ name });
     },
     addBlankAttrBox() {
@@ -563,25 +525,25 @@ export default {
       this.isLoading = true
       let issuerDid = []
       try {
-          if(this.presentationTemplate.name!=='' && this.presentationTemplate.name.length >31){
-            return this.notifyErr(message.PRESENTATION.NAME_LIMIT_EXCEED)
-        } else if(this.presentationTemplate.name!=='' && isValidURL(this.presentationTemplate.name)){
+        if (this.presentationTemplate.name !== '' && this.presentationTemplate.name.length > 31) {
+          return this.notifyErr(message.PRESENTATION.NAME_LIMIT_EXCEED)
+        } else if (this.presentationTemplate.name !== '' && isValidURL(this.presentationTemplate.name)) {
           return this.notifyErr(message.PRESENTATION.VALID_NAME)
-        } else if(isEmpty(this.presentationTemplate.issuerDid)){
+        } else if (isEmpty(this.presentationTemplate.issuerDid)) {
           return this.notifyErr(message.PRESENTATION.ISSUER_DID_EMPTY)
-        } else if(!isValidDid(this.presentationTemplate.issuerDid)){
+        } else if (!isValidDid(this.presentationTemplate.issuerDid)) {
           return this.notifyErr(message.CREDENTIAL.INVALID_DID)
         } else if (this.presentationTemplate.schemaId.length <= 0) {
           return this.notifyErr(message.CREDENTIAL.SELECT_SCHEMA)
         } else if (isEmpty(this.presentationTemplate.reason)) {
           return this.notifyErr(message.PRESENTATION.REASON)
-        } else if (this.presentationTemplate.reason.length >this.maxChar) {
+        } else if (this.presentationTemplate.reason.length > this.maxChar) {
           return this.notifyErr(message.PRESENTATION.REASON_LIMIT_EXCEED)
         } else if (isEmpty(this.presentationTemplate.callbackUrl)) {
           return this.notifyErr(message.PRESENTATION.CALLBACK_URL)
         } else if (!isValidURL(this.presentationTemplate.callbackUrl)) {
           return this.notifyErr(message.PRESENTATION.INVALID_URL)
-        } 
+        }
         issuerDid.push(this.presentationTemplate.issuerDid)
         const headers = {
           "Content-Type": "application/json",
@@ -597,21 +559,21 @@ export default {
           reason: this.presentationTemplate.reason,
           // required: this.presentationTemplate.required,
           callbackUrl: this.presentationTemplate.callbackUrl,
-          orgDid:this.selectedOrgDid
+          orgDid: this.selectedOrgDid
         }
-        if(this.isEdit === true) {
+        if (this.isEdit === true) {
           body = {
-          _id:this.id,
-          issuerDid,
-          queryType: this.presentationTemplate.queryType,
-          name: this.presentationTemplate.name,
-          schemaId: this.presentationTemplate.schemaId,
-          reason: this.presentationTemplate.reason,
-          // required: this.presentationTemplate.required,
-          callbackUrl: this.presentationTemplate.callbackUrl,
-          orgDid:this.selectedOrgDid
-        }
-        method = "PUT"
+            _id: this.id,
+            issuerDid,
+            queryType: this.presentationTemplate.queryType,
+            name: this.presentationTemplate.name,
+            schemaId: this.presentationTemplate.schemaId,
+            reason: this.presentationTemplate.reason,
+            // required: this.presentationTemplate.required,
+            callbackUrl: this.presentationTemplate.callbackUrl,
+            orgDid: this.selectedOrgDid
+          }
+          method = "PUT"
         }
         let url = `${this.$config.studioServer.BASE_URL}${this.$config.studioServer.PRESENTATION_TEMPLATE_EP}`
         fetch(url, {
@@ -619,13 +581,13 @@ export default {
           method: method,
           headers: headers,
         }).then((res) => res.json()).then(json => {
-          if(this.isEdit === true) {
-            this.$store.commit('playgroundStore/updateTemplate',json.data)
+          if (this.isEdit === true) {
+            this.$store.commit('playgroundStore/updateTemplate', json.data)
             this.notifySuccess('Template Successfully updated')
-          } else{
+          } else {
             this.$store.commit('playgroundStore/insertApresentationTemplate', json.data.presentationTemplateObj)
             this.notifySuccess('Template Successfully created')
-            this.$store.commit('playgroundStore/increaseOrgDataCount','templatesCount')
+            this.$store.commit('playgroundStore/increaseOrgDataCount', 'templatesCount')
           }
           // this.openSlider();
           this.clearAll()
@@ -696,8 +658,6 @@ export default {
       }
     },
   },
-    mixins: [UtilsMixin],
+  mixins: [UtilsMixin],
 };
 </script>
-
-
diff --git a/src/views/playground/SSIDashboardCredit.vue b/src/views/playground/SSIDashboardCredit.vue
index e474026..70ecc1d 100644
--- a/src/views/playground/SSIDashboardCredit.vue
+++ b/src/views/playground/SSIDashboardCredit.vue
@@ -63,10 +63,6 @@
     padding: 0px;
 }
 
-.card {
-    border-radius: 10px;
-}
-
 .goschema {
     color: #339af0;
 }
@@ -287,7 +283,7 @@ h5 span {
                         <label for="bananas">DID Operations:</label>
                         <span style="float: right;">{{
                             numberFormat(bananaQuantity)
-                        }}</span>
+                            }}</span>
                         <input class="form-control-range" type="range" id="bananas" v-model="bananaQuantity" min="0"
                             :max="maxBananas" step="50" />
 
@@ -306,7 +302,7 @@ h5 span {
                         <label for="oranges">Schema Operations:</label>
                         <span style="float: right;">{{
                             numberFormat(orangeQuantity)
-                        }}</span>
+                            }}</span>
                         <input class="form-control-range" step="50" type="range" id="oranges" v-model="orangeQuantity"
                             min="0" :max="maxOranges" />
 
diff --git a/src/views/playground/Schema.vue b/src/views/playground/Schema.vue
index 82f36f1..a274aaf 100644
--- a/src/views/playground/Schema.vue
+++ b/src/views/playground/Schema.vue
@@ -6,14 +6,17 @@
   box-shadow: 2px 0 10px rgb(0 0 0 / 10%);
   animation: flash 0.4s cubic-bezier(1, 0, 0, 1);
 }
+
 @keyframes flash {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
+
 .addmargin {
   margin-top: 10px;
   margin-bottom: 10px;
@@ -53,12 +56,14 @@
   background: #f5dda71c;
   color: #888b8f;
 }
-.far{
+
+.far {
   color: gray;
   font-size: 1.5em;
   padding-top: 10px;
   cursor: pointer;
 }
+
 .sm-tiles:hover {
   float: left;
   padding: 5px;
@@ -75,142 +80,138 @@
   word-wrap: anywhere;
 }
 
-.card {
-  border-radius: 10px;
-}
 
 .container {
-    padding: 20px;
-    text-align: left;
-  }
+  padding: 20px;
+  text-align: left;
+}
 
-  .tile{
-    max-height:150px;
-    overflow: auto
-  }
-  .selected-media-wrapper {
+.tile {
+  max-height: 150px;
+  overflow: auto
+}
+
+.selected-media-wrapper {
   border: 1px dashed;
   max-height: 100px;
   background-color: #f5f5f5;
   border-radius: 10px;
 }
+
 .rounded {
   cursor: pointer;
 }
+
 .schemaProp {
   background-color: lightgoldenrodyellow;
   color: grey;
   border: 1ps solid lightcyan;
-  font-size:small;  
+  font-size: small;
 }
-.theme-color{
-  background-color:rgba(241, 179, 25, 0.24);
+
+.theme-color {
+  background-color: rgba(241, 179, 25, 0.24);
   color: #212529;
 }
-.bg-transparant{
+
+.bg-transparant {
   background-color: transparent !important;
   color: #212529;
 }
+
 .scrollit {
-  overflow:hidden;  
-  height:600px;
+  overflow: hidden;
+  height: 600px;
 }
-.scrollit:hover{
+
+.scrollit:hover {
   overflow-y: auto;
 }
-.head{
+
+.head {
   position: fixed;
   z-index: 400;
 }
 </style>
 <template>
-  <div :class="isContainerShift ?'homeShift':'home'">
+  <div :class="isContainerShift ? 'homeShift' : 'home'">
     <loading :active.sync="isLoading" :can-cancel="true" :is-full-page="fullPage"></loading>
 
     <div class="row">
       <div class="col-md-12" style="text-align: left">
         <!-- <Info :message="description" /> -->
-          <div class="form-group" style="display:flex">
-           <h3 v-if="schemaList.length > 0" class="mt-4" style="text-align: left;">
+        <div class="form-group" style="display:flex">
+          <h3 v-if="schemaList.length > 0" class="mt-4" style="text-align: left;">
             Schemas</h3>
-            <h3 v-else class="mt-4" style="text-align: left;">Create your first schema!</h3>      
-            <hf-buttons 
-              name="Create" iconClass="fa fa-plus"
-              style="text-align: right;"
-              class="ml-auto mt-4"
-              @executeAction="openSlider()"
-            ></hf-buttons>
-          </div> 
-          <StudioSideBar title="Create Schema">
-              <div class="container">
-                <div class="form-group">
-                  <tool-tip infoMessage="Name of the schema"></tool-tip>
-                  <label for="schemaName"><strong>Name<span style="color: red">*</span>:</strong></label>                  
-                  <input type="text" class="form-control" id="schemaName" v-model="credentialName" aria-describedby="schemaNameHelp"
-                  placeholder="Enter Schema name">
-                </div>
-                <div class="form-group">
-                  <tool-tip infoMessage="Description for the schema"></tool-tip>
-                  <label for="schDescription"><strong>Description:</strong></label>                  
+          <h3 v-else class="mt-4" style="text-align: left;">Create your first schema!</h3>
+          <hf-buttons name="Create" iconClass="fa fa-plus" style="text-align: right;" class="ml-auto mt-4"
+            @executeAction="openSlider()"></hf-buttons>
+        </div>
+        <StudioSideBar title="Create Schema">
+          <div class="container">
+            <div class="form-group">
+              <tool-tip infoMessage="Name of the schema"></tool-tip>
+              <label for="schemaName"><strong>Name<span style="color: red">*</span>:</strong></label>
+              <input type="text" class="form-control" id="schemaName" v-model="credentialName"
+                aria-describedby="schemaNameHelp" placeholder="Enter Schema name">
+            </div>
+            <div class="form-group">
+              <tool-tip infoMessage="Description for the schema"></tool-tip>
+              <label for="schDescription"><strong>Description:</strong></label>
 
-                  <textarea type="text" class="form-control" id="schDescription" v-model="credentialDescription"  rows="5" cols="20" aria-describedby="orgNameHelp"
-                  placeholder="Enter Description for this schema"></textarea>
-                </div>
-                <div class="form-group card">
-                  <b-card-header header-tag="header" class="p-1 border-0 accordin-header theme-color" role="tab">
-                    <b-button block v-b-toggle.accordion-1 style="text-decoration:none; color:#212529;" variant="secondary"
-                    :aria-expanded="visible ? 'true' : 'false'"
-                    @click="visible = !visible"
-                    aria-controls="collapse-1"
-                    class="text-left border-0 theme-color bg-transparant"
-                    title="Create schema configuration">Fields Configurations
-                    <i :class="!visible ? 'fa fa-arrow-down' : 'fa fa-arrow-up'" style="float:right;"></i>
-                    </b-button>
-                  </b-card-header>
-                  <b-collapse id="collapse-1" class="mt-2" v-model="visible" style="padding:10px">
-                    <div class="selected-media-wrapper d-flex p-2 mb-4"  style="overflow-y: auto" v-if="attributes.length > 0">
-                      <div v-for="(attr,id) in attributes" v-bind:key="attr.id">
-                        <div :class="
-                            flash == attr.id
-                            ? 'flash card rounded m-1 p-1 d-flex flex-row align-items-center'
-                            : 'card rounded m-1 p-1 d-flex flex-row align-items-center pointer'"
-                            @click="handleClick(attr.id)"                            
-                            :title="attr.name"
-                          >
-                          {{ truncate(attr.name,15) }}
-                           <span style="color: gray; padding-left: 5px">
-                            <i v-if="flash==attr.id" title="click to delete" class="fas fa-minus-circle" @click="deleteAttribute" style="color:#d9534f	"></i>
-                          </span>
-                        </div>
-                      </div>
+              <textarea type="text" class="form-control" id="schDescription" v-model="credentialDescription" rows="5"
+                cols="20" aria-describedby="orgNameHelp" placeholder="Enter Description for this schema"></textarea>
+            </div>
+            <div class="form-group card">
+              <b-card-header header-tag="header" class="p-1 border-0 accordin-header theme-color" role="tab">
+                <b-button block v-b-toggle.accordion-1 style="text-decoration:none; color:#212529;" variant="secondary"
+                  :aria-expanded="visible ? 'true' : 'false'" @click="visible = !visible" aria-controls="collapse-1"
+                  class="text-left border-0 theme-color bg-transparant" title="Create schema configuration">Fields
+                  Configurations
+                  <i :class="!visible ? 'fa fa-arrow-down' : 'fa fa-arrow-up'" style="float:right;"></i>
+                </b-button>
+              </b-card-header>
+              <b-collapse id="collapse-1" class="mt-2" v-model="visible" style="padding:10px">
+                <div class="selected-media-wrapper d-flex p-2 mb-4" style="overflow-y: auto"
+                  v-if="attributes.length > 0">
+                  <div v-for="(attr, id) in attributes" v-bind:key="attr.id">
+                    <div :class="flash == attr.id
+                        ? 'flash card rounded m-1 p-1 d-flex flex-row align-items-center'
+                        : 'card rounded m-1 p-1 d-flex flex-row align-items-center pointer'"
+                      @click="handleClick(attr.id)" :title="attr.name">
+                      {{ truncate(attr.name, 15) }}
+                      <span style="color: gray; padding-left: 5px">
+                        <i v-if="flash == attr.id" title="click to delete" class="fas fa-minus-circle"
+                          @click="deleteAttribute" style="color:#d9534f	"></i>
+                      </span>
                     </div>
+                  </div>
+                </div>
 
-                    <div class="row g-3 align-items-center w-100">
-                        <div class="col-lg-3 col-md-3 text-left">
-                          <tool-tip infoMessage="Attribute Name"></tool-tip>
-                          <label for="attributeName" class="col-form-label">Name<span style="color: red">*</span>: </label>                          
-                        </div>
-                        <div class="col-lg-9 col-md-9 px-0">
-                            <input v-model="selected.attributeName" type="text" id="attributeName" class="form-control w-100"
-                            placeholder="firstName">
-                        </div>
-                    </div>
+                <div class="row g-3 align-items-center w-100">
+                  <div class="col-lg-3 col-md-3 text-left">
+                    <tool-tip infoMessage="Attribute Name"></tool-tip>
+                    <label for="attributeName" class="col-form-label">Name<span style="color: red">*</span>: </label>
+                  </div>
+                  <div class="col-lg-9 col-md-9 px-0">
+                    <input v-model="selected.attributeName" type="text" id="attributeName" class="form-control w-100"
+                      placeholder="firstName">
+                  </div>
+                </div>
 
-                    <div class="row g-3 align-items-center w-100 mt-4">
-                        <div class="col-lg-3 col-md-3 text-left">
-                        <tool-tip infoMessage="Type of the attribute"></tool-tip>
-                        <label for="type" class="col-form-label">Type<span style="color: red">*</span>:</label>                        
+                <div class="row g-3 align-items-center w-100 mt-4">
+                  <div class="col-lg-3 col-md-3 text-left">
+                    <tool-tip infoMessage="Type of the attribute"></tool-tip>
+                    <label for="type" class="col-form-label">Type<span style="color: red">*</span>:</label>
 
-                        </div>
-                        <div class="col-lg-9 col-md-9 px-0">
-                      <hf-select-drop-down
-                        :options="options"
-                        @selected="e =>(selected.attributeTypes=e)"
-                      ></hf-select-drop-down>
-                      </div>
-                    </div>
+                  </div>
+                  <div class="col-lg-9 col-md-9 px-0">
+                    <hf-select-drop-down :options="options"
+                      @selected="e => (selected.attributeTypes = e)"></hf-select-drop-down>
+                  </div>
+                </div>
 
-                     <!-- <div class="row g-3 align-items-center w-100 mt-4">
+                <!-- <div class="row g-3 align-items-center w-100 mt-4">
                         <div class="col-lg-3 col-md-3 text-left">
                           <tool-tip infoMessage="Format of the attribute"></tool-tip>
                           <label for="format" class="col-form-label">Format: </label>                          
@@ -220,57 +221,44 @@
                         </div>
                     </div> -->
 
-                     <div class="row g-3 align-items-center w-100 mt-4">
-                        <div class="col-lg-3 col-md-3 text-left">
-                        <tool-tip infoMessage="Required field"></tool-tip>
-                        <label for="required" class="col-form-label">Required: </label>                        
-                        </div>
-                        <div class="col-lg-9 col-md-9 px-0">
-                             <input type="checkbox" v-model="selected.attributeRequired" id="required">
-                        </div>
-                    </div>
+                <div class="row g-3 align-items-center w-100 mt-4">
+                  <div class="col-lg-3 col-md-3 text-left">
+                    <tool-tip infoMessage="Required field"></tool-tip>
+                    <label for="required" class="col-form-label">Required: </label>
+                  </div>
+                  <div class="col-lg-9 col-md-9 px-0">
+                    <input type="checkbox" v-model="selected.attributeRequired" id="required">
+                  </div>
+                </div>
 
-                    <div class="form-group row mt-4" v-if="isAdd">
-                      <div class="col-sm-10">                        
-                        <hf-buttons 
-                          name="Add"                          
-                          @executeAction="addBlankAttrBox()"
-                        ></hf-buttons>
-                      </div>
-                    </div>
-                    <div class="form-group row mt-4" v-else>
-                      <div class="col-sm-10">                        
-                        <hf-buttons 
-                          name="Update"        
-                          class="btn btn-primary"
-                          @executeAction="updateSchemaAttribute()"
-                        ></hf-buttons>
-                        <hf-buttons 
-                          name="Cancel"        
-                          class="btn btn-danger ml-2"
-                          @executeAction="cancelUpdate()"
-                        ></hf-buttons>
-                      </div>
-                    </div>
-                  </b-collapse>
+                <div class="form-group row mt-4" v-if="isAdd">
+                  <div class="col-sm-10">
+                    <hf-buttons name="Add" @executeAction="addBlankAttrBox()"></hf-buttons>
+                  </div>
+                </div>
+                <div class="form-group row mt-4" v-else>
+                  <div class="col-sm-10">
+                    <hf-buttons name="Update" class="btn btn-primary"
+                      @executeAction="updateSchemaAttribute()"></hf-buttons>
+                    <hf-buttons name="Cancel" class="btn btn-danger ml-2" @executeAction="cancelUpdate()"></hf-buttons>
+                  </div>
                 </div>
-                <!-- <div class="form-group">
+              </b-collapse>
+            </div>
+            <!-- <div class="form-group">
                   <tool-tip infoMessage="Additional Properties"></tool-tip>                             
                   <label for="schDescription"><strong>Additional Properties</strong></label>
                   <input v-model="additionalProperties" type="checkbox" style="margin-left:5px;" />
 
                 </div> -->
-                <div class="form-group row">
-                  <div class="col-md-12">
-                    <hr/>                    
-                    <hf-buttons 
-                      name="Save"                      
-                      @executeAction="createSchema()"
-                    ></hf-buttons>
-                  </div>
-                </div>
+            <div class="form-group row">
+              <div class="col-md-12">
+                <hr />
+                <hf-buttons name="Save" @executeAction="createSchema()"></hf-buttons>
               </div>
-          </StudioSideBar>
+            </div>
+          </div>
+        </StudioSideBar>
       </div>
     </div>
     <div class="row scrollit" style="margin-top: 2%;" v-if="schemaList.length > 0">
@@ -293,15 +281,12 @@
             <tr v-for="row in schemaList" :key="row._id">
               <td>
                 <div v-if="row.schemaId">
-                <a :href="`${$config.explorer.BASE_URL}schemas/${row.schemaId}`"
-                  target="_blank">{{ row.schemaId ? shorten(row.schemaId) : "-" }}</a>
-                <i class="far fa-copy ml-1"
-                style="cursor:pointer;"
-                title="Click to copy Schema Id"
-                @click="copyToClip(row.schemaId,'Schema Id')"
-                ></i>
-                  </div>
-                  <span v-else>-</span>
+                  <a :href="`${$config.explorer.BASE_URL}schemas/${row.schemaId}`" target="_blank">{{ row.schemaId ?
+                    shorten(row.schemaId) : "-" }}</a>
+                  <i class="far fa-copy ml-1" style="cursor:pointer;" title="Click to copy Schema Id"
+                    @click="copyToClip(row.schemaId, 'Schema Id')"></i>
+                </div>
+                <span v-else>-</span>
               </td>
 
               <td>{{ row.schemaDetails ? row.schemaDetails.name : "-" }}</td>
@@ -310,7 +295,7 @@
               <td>
                 <div v-if="row.schemaDetails">
                   <div v-for="prop in Object.keys(row.schemaDetails.schema.properties)" style="display:inline-block;">
-                    <b-badge pill variant="info" class="mr-2">{{prop}}</b-badge>
+                    <b-badge pill variant="info" class="mr-2">{{ prop }}</b-badge>
                   </div>
                 </div>
                 <span v-else>-</span>
@@ -320,14 +305,10 @@
 
               <td style="word-wrap: break-word;min-width: 200px;max-width: 200px;">
                 <div v-if="row.transactionHash">
-                <a target="_blank"
-                  :href="`${$config.explorer.BASE_URL}tx/${row.transactionHash}`"
-                  >{{ shorten(row.transactionHash) }}</a>
-                <i class="far fa-copy ml-1"
-                style="cursor:pointer;"
-                title="Click to copy Transaction Hash"
-                @click="copyToClip(row.transactionHash,'Transaction Hash')"
-                ></i>
+                  <a target="_blank" :href="`${$config.explorer.BASE_URL}tx/${row.transactionHash}`">{{
+                    shorten(row.transactionHash) }}</a>
+                  <i class="far fa-copy ml-1" style="cursor:pointer;" title="Click to copy Transaction Hash"
+                    @click="copyToClip(row.transactionHash, 'Transaction Hash')"></i>
                 </div>
                 <span v-else>-</span>
               </td>
@@ -372,31 +353,31 @@ export default {
   },
   data() {
     return {
-      reservedKeys:['id', 'type'],
-      counter:0,
-      flash:null,
-      isAdd:true,
+      reservedKeys: ['id', 'type'],
+      counter: 0,
+      flash: null,
+      isAdd: true,
       // description: "Credential Schema defines what information will go inside a verifiable credential. For example: Directorate General of Civil Aviation (DGCA) can define a schema (or format) for flights tickets, being issued by all airline companies in India.",
       active: 0,
       host: location.hostname,
       user: {},
       options: [
-          { text: "Select Type", value: null },
-          { text: "string", value: "string" },
-          { text: "integer", value: "integer" },
-          { text: "number", value: "number" },
-          { text: "boolean", value: "boolean" },
-          { text: "date-time", value: "date" },
-        ],
+        { text: "Select Type", value: null },
+        { text: "string", value: "string" },
+        { text: "integer", value: "integer" },
+        { text: "number", value: "number" },
+        { text: "boolean", value: "boolean" },
+        { text: "date-time", value: "date" },
+      ],
       page: 1,
-      visible:false,
+      visible: false,
       prevRoute: null,
-      selectedId:null,
-      selected:{
-      attributeName: "",
-      attributeTypes: null,
-      // attributeFormat: "",
-      attributeRequired: false,
+      selectedId: null,
+      selected: {
+        attributeName: "",
+        attributeTypes: null,
+        // attributeFormat: "",
+        attributeRequired: false,
       },
       attributes: [],
       issueCredAttributes: [],
@@ -435,28 +416,28 @@ export default {
   },
   methods: {
     ...mapActions('playgroundStore', ['upsertAschemaAction', 'fetchSchemasForOrg']),
-    ...mapMutations('playgroundStore',['updateSideNavStatus', 'increaseOrgDataCount']),
+    ...mapMutations('playgroundStore', ['updateSideNavStatus', 'increaseOrgDataCount']),
     handleClick(id) {
       this.flash = id
-      const found = this.attributes.find((x)=>x.id === id)
+      const found = this.attributes.find((x) => x.id === id)
       let updateData = found
       this.selectedId = id
       this.selected.attributeName = updateData.name
       // this.selected.attributeFormat = updateData.format
       this.selected.attributeRequired = updateData.isRequired
-      EventBus.$emit("setOption",updateData.type);
+      EventBus.$emit("setOption", updateData.type);
       this.isAdd = false
     },
-    cancelUpdate(){
+    cancelUpdate() {
       this.flash = null;
       this.selected.attributeName = ""
-      EventBus.$emit("resetOption",this.selected.attributeTypes);
+      EventBus.$emit("resetOption", this.selected.attributeTypes);
       this.selected.attributeRequired = false
       this.isAdd = true
     },
     updateSchemaAttribute() {
       let isValid = this.handleValidation(true)
-      if(isValid) {
+      if (isValid) {
         let obj = {
           name: this.selected.attributeName,
           type: this.selected.attributeTypes,
@@ -464,10 +445,10 @@ export default {
           isRequired: this.selected.attributeRequired,
           id: this.selectedId
         }
-        const indexToUpdate = this.attributes.findIndex((x)=>x.id === this.selectedId)
-        if(indexToUpdate > -1){
+        const indexToUpdate = this.attributes.findIndex((x) => x.id === this.selectedId)
+        if (indexToUpdate > -1) {
           this.attributes[indexToUpdate] = obj
-          EventBus.$emit("resetOption",this.selected.attributeTypes);
+          EventBus.$emit("resetOption", this.selected.attributeTypes);
           this.clearSelected()
           this.isAdd = true
         }
@@ -475,12 +456,12 @@ export default {
     },
     deleteAttribute() {
       let id = this.selectedId
-      const actionIndex =  this.attributes.findIndex((x)=> x.id === id)
-      if(actionIndex > -1 ) {
+      const actionIndex = this.attributes.findIndex((x) => x.id === id)
+      if (actionIndex > -1) {
         this.attributes.splice(actionIndex, 1);
       }
-      
-      EventBus.$emit("resetOption",this.selected.attributeTypes);
+
+      EventBus.$emit("resetOption", this.selected.attributeTypes);
       this.clearSelected()
       this.isAdd = true
     },
@@ -488,9 +469,9 @@ export default {
       this.flash = null
       this.selectedId = null
       this.selected = {
-        attributeName : "",
-        attributeTypes : null,
-        attributeRequired : false,
+        attributeName: "",
+        attributeTypes: null,
+        attributeRequired: false,
         // attributeFormat : ""
       }
     },
@@ -499,24 +480,24 @@ export default {
       this.clearAll();
       this.$root.$emit("bv::toggle::collapse", "sidebar-right");
     },
-    clearAll(){
-      this.visible=false
+    clearAll() {
+      this.visible = false
       this.credentialName = ''
       this.credentialDescription = ''
       this.selected.attributeName = ''
-      EventBus.$emit("resetOption",this.selected.attributeTypes)
+      EventBus.$emit("resetOption", this.selected.attributeTypes)
       this.selected.attributeTypes = null
       // this.selected.attributeFormat = ''
       this.selected.attributeRequired = false
       // this.additionalProperties = false
-      this.attributes = []      
+      this.attributes = []
     },
-    handleValidation(update=false) {
+    handleValidation(update = false) {
       let isValid = true
       if (isEmpty(this.selected.attributeName)) {
         isValid = false
         return this.notifyErr(message.SCHEMA.EMPTY_SCHEMA_ATTRIBUTE_NAME)
-      } else if(this.reservedKeys.includes(this.selected.attributeName)) {
+      } else if (this.reservedKeys.includes(this.selected.attributeName)) {
         isValid = false
         return this.notifyErr(this.selected.attributeName + ' ' + message.SCHEMA.PROTECTED_TERM)
       } else if (isValidURL(this.selected.attributeName)) {
@@ -525,59 +506,59 @@ export default {
       } else if (ifSpaceExists(this.selected.attributeName)) {
         isValid = false
         return this.notifyErr(message.SCHEMA.NO_SPACE)
-      } else if(!isValidSchemaAttrName(this.selected.attributeName)){
+      } else if (!isValidSchemaAttrName(this.selected.attributeName)) {
         isValid = false
         return this.notifyErr(message.SCHEMA.NAME_CAMELCASE)
-      } else if(this.isPresent(this.selected,update)){
+      } else if (this.isPresent(this.selected, update)) {
         isValid = false
-        if(update){
+        if (update) {
           return this.notifyErr(message.SCHEMA.DUPLICATE_ATTRIBUTE_UPDATE)
         }
         return this.notifyErr(message.SCHEMA.DUPLICATE_ATTRIBUTE)
       } else if (this.selected.attributeTypes === ' ' || this.selected.attributeTypes === null) {
         isValid = false
         return this.notifyErr(message.SCHEMA.EMPTY_ATTRIBUTE_TYPE)
-      } 
+      }
       // else if (isValidURL(this.selected.attributeFormat)) {
       //   isValid = false
       //   return this.notifyErr(message.SCHEMA.INVALID_FORMAT)
       // }
-    return isValid
+      return isValid
     },
-    isPresent(attr, update=false) {
-    const element = this.attributes.find((x) => {
-           if(update){
-            return x.name === attr.attributeName  && x.type === attr.attributeTypes && x.isRequired === attr.attributeRequired
+    isPresent(attr, update = false) {
+      const element = this.attributes.find((x) => {
+        if (update) {
+          return x.name === attr.attributeName && x.type === attr.attributeTypes && x.isRequired === attr.attributeRequired
+
+        }
+        return x.name === attr.attributeName
 
-           } 
-           return x.name === attr.attributeName
+      });
+      return typeof element === "undefined" ? false : true;
 
-        });
-        return typeof element === "undefined" ? false : true;
-    
     },
     addBlankAttrBox() {
       let isValid = this.handleValidation()
-      if(isValid){
+      if (isValid) {
         let obj = {
           name: this.selected.attributeName,
           type: this.selected.attributeTypes,
           // format: this.selected.attributeFormat,
           isRequired: this.selected.attributeRequired,
         }
-        this.counter +=1
+        this.counter += 1
         obj['id'] = this.counter
         this.attributes.push(obj)
         this.selected.attributeName = "";
-        EventBus.$emit("resetOption",this.selected.attributeTypes)
+        EventBus.$emit("resetOption", this.selected.attributeTypes)
         // this.selected.attributeFormat = "";
-        this.selected.attributeRequired = false;     
+        this.selected.attributeRequired = false;
       }
     },
     ssePopulateSchema(id, store) {
       const sse = new EventSource(`${this.$config.studioServer.SCHEMA_SSE}${id}`);
-    
-      const that =  this
+
+      const that = this
       sse.onmessage = function (e) {
         const data = JSON.parse(e.data)
         if (data.status === "Registered" || data.status === "Failed") {
@@ -586,7 +567,7 @@ export default {
         }
       }
       sse.onopen = function (e) {
-        console.log("Connection to server opened.",e);
+        console.log("Connection to server opened.", e);
       };
 
       sse.onerror = function (e) {
@@ -616,7 +597,7 @@ export default {
           return this.notifyErr(message.SCHEMA.EMPTY_SCHEMA_ATTRIBUTE)
         }
         const url = `${this.$config.studioServer.BASE_URL}${this.$config.studioServer.SAVE_SCHEMA_EP}`;
-        const {orgDid}=this.getSelectedOrg;
+        const { orgDid } = this.getSelectedOrg;
         const schemaData = {
           name: this.credentialName,
           author: orgDid,
@@ -663,5 +644,3 @@ export default {
   mixins: [UtilsMixin],
 };
 </script>
-
-
diff --git a/src/views/playground/SessionsDetails.vue b/src/views/playground/SessionsDetails.vue
index 5846245..a4e8ed3 100644
--- a/src/views/playground/SessionsDetails.vue
+++ b/src/views/playground/SessionsDetails.vue
@@ -4,9 +4,7 @@
     padding: 0px;
 }
 
-.card {
-    border-radius: 10px;
-}
+
 
 .goschema {
     color: #339af0;
diff --git a/src/views/playground/Usage.vue b/src/views/playground/Usage.vue
index 185eee6..8704df1 100644
--- a/src/views/playground/Usage.vue
+++ b/src/views/playground/Usage.vue
@@ -63,10 +63,6 @@
   padding: 0px;
 }
 
-.card {
-  border-radius: 10px;
-}
-
 .goschema {
   color: #339af0;
 }