app/ayanova/src/views/About.vue

@@ -1,7 +1,24 @@
 <template>
-  <div class="about">
+  <!-- <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>
-    <h1>About AyaNova</h1>
+        <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>
@@ -68,24 +85,29 @@
               <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>
+              >{{item.Feature}} {{item.Count ? item.Count : ""}}</v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
         </v-list>
-    <h4>{{ serverInfo }}</h4>
+      </v-card>
-  </div>
+    </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 => {