diff --git a/app/ayanova/src/views/About.vue b/app/ayanova/src/views/About.vue
index b4b6a331..97666af4 100644
--- a/app/ayanova/src/views/About.vue
+++ b/app/ayanova/src/views/About.vue
@@ -1,91 +1,113 @@
 <template>
-  <div class="about">
-    <v-img :src="require('../assets/bw-logo.svg')" class="my-3" contain height="200"></v-img>
-    <h1>About AyaNova</h1>
-    <v-list two-line subheader>
-      <v-subheader>Server</v-subheader>
-      <v-list-tile avatar>
-        <v-list-tile-content>
-          <v-list-tile-title>API version</v-list-tile-title>
-          <v-list-tile-sub-title>{{ serverInfo.serverVersion }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-      <v-list-tile avatar>
-        <v-list-tile-content>
-          <v-list-tile-title>DB Schema version</v-list-tile-title>
-          <v-list-tile-sub-title>{{ serverInfo.dbSchemaVersion }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-      <v-list-tile avatar>
-        <v-list-tile-content>
-          <v-list-tile-title>Server local time</v-list-tile-title>
-          <v-list-tile-sub-title>{{ serverInfo.serverLocalTime }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-      <v-list-tile avatar>
-        <v-list-tile-content>
-          <v-list-tile-title>Server timezone</v-list-tile-title>
-          <v-list-tile-sub-title>{{ serverInfo.serverTimeZone }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-    </v-list>
-    <v-divider></v-divider>
-    <v-list two-line subheader>
-      <v-subheader>License</v-subheader>
-      <v-list-tile avatar>
-        <v-list-tile-content>
-          <v-list-tile-title>Licensed to</v-list-tile-title>
-          <v-list-tile-sub-title>{{ serverInfo.license.license.licensedTo }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-      <v-list-tile avatar>
-        <v-list-tile-content>
-          <v-list-tile-title>DB instance ID</v-list-tile-title>
-          <v-list-tile-sub-title>{{ serverInfo.license.license.dbId }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-      <v-list-tile avatar>
-        <v-list-tile-content>
-          <v-list-tile-title>Key serial</v-list-tile-title>
-          <v-list-tile-sub-title>{{ serverInfo.license.license.keySerial }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-      <v-list-tile avatar>
-        <v-list-tile-content>
-          <v-list-tile-title>License expiration</v-list-tile-title>
-          <v-list-tile-sub-title>{{ serverInfo.license.license.licenseExpiration }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-      <v-list-tile avatar>
-        <v-list-tile-content>
-          <v-list-tile-title>Maintenance expiration</v-list-tile-title>
-          <v-list-tile-sub-title>{{ serverInfo.license.license.maintenanceExpiration }}</v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-      <v-list-tile avatar>
-        <v-list-tile-content>
-          <v-list-tile-title>Licensed features</v-list-tile-title>
-          <v-list-tile-sub-title
-            v-for="item in serverInfo.license.license.features"
-            :key="item.Feature"
-          >{{item.Feature}} - {{item.Count}}</v-list-tile-sub-title>
-        </v-list-tile-content>
-      </v-list-tile>
-    </v-list>
-    <h4>{{ serverInfo }}</h4>
-  </div>
+  <!-- <div class="about">
+     
+  <h1>About AyaNova</h1>-->
+  <v-layout row>
+    <v-flex xs12 sm6 offset-sm3>
+      <v-card>
+        <v-toolbar color="indigo" dark>
+          <v-toolbar-title>About AyaNova</v-toolbar-title>
+        </v-toolbar>
+        <v-img :src="require('../assets/bw-logo.svg')" class="my-3" contain height="200"></v-img>
+        <v-list two-line subheader>
+          <v-subheader>Client</v-subheader>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Version</v-list-tile-title>
+              <v-list-tile-sub-title>{{ clientInfo.version }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+        <v-divider></v-divider>
+        <v-list two-line subheader>
+          <v-subheader>Server</v-subheader>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>API version</v-list-tile-title>
+              <v-list-tile-sub-title>{{ serverInfo.serverVersion }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>DB Schema version</v-list-tile-title>
+              <v-list-tile-sub-title>{{ serverInfo.dbSchemaVersion }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Server local time</v-list-tile-title>
+              <v-list-tile-sub-title>{{ serverInfo.serverLocalTime }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Server timezone</v-list-tile-title>
+              <v-list-tile-sub-title>{{ serverInfo.serverTimeZone }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+        <v-divider></v-divider>
+        <v-list two-line subheader>
+          <v-subheader>License</v-subheader>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Licensed to</v-list-tile-title>
+              <v-list-tile-sub-title>{{ serverInfo.license.license.licensedTo }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>DB instance ID</v-list-tile-title>
+              <v-list-tile-sub-title>{{ serverInfo.license.license.dbId }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Key serial</v-list-tile-title>
+              <v-list-tile-sub-title>{{ serverInfo.license.license.keySerial }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>License expiration</v-list-tile-title>
+              <v-list-tile-sub-title>{{ serverInfo.license.license.licenseExpiration }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Maintenance expiration</v-list-tile-title>
+              <v-list-tile-sub-title>{{ serverInfo.license.license.maintenanceExpiration }}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Licensed features</v-list-tile-title>
+              <v-list-tile-sub-title
+                v-for="item in serverInfo.license.license.features"
+                :key="item.Feature"
+              >{{item.Feature}} {{item.Count ? item.Count : ""}}</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+      </v-card>
+    </v-flex>
+  </v-layout>
+  <!-- </div> -->
 </template>
 
 <script>
 /* xeslint-disable */
 import apiMeta from "../api/apimeta";
+import aboutInfo from "../utils/aboutinfo";
 export default {
   data() {
     return {
-      serverInfo: {}
+      serverInfo: { license: { license: {} } },
+      clientInfo: {}
     };
   },
   mounted() {
+    this.clientInfo.version = aboutInfo.version;
     apiMeta
       .fetchAPIInfo()
       .then(response => {