https://github.com/project-chip/zap/issues/343

src/layouts/ZclLayout.vue

@@ -62,6 +62,9 @@ limitations under the License.
           id="preference"
           to="/preference"
         />
+        <q-btn flat @click="homeDialog = !homeDialog" icon="mdi-alert-circle">
+          <q-tooltip> About </q-tooltip>
+        </q-btn>
       </q-toolbar>
       <q-layout
         view="hHh Lpr lff"
@@ -161,6 +164,9 @@ limitations under the License.
         </q-page-container>
       </q-layout>
     </div>
+    <q-dialog v-model="homeDialog">
+      <About />
+    </q-dialog>
   </div>
 </template>
 
@@ -170,6 +176,7 @@ import Exceptions from '../components/Exceptions.vue'
 import ZclInformationSetup from '../components/ZclInformationSetup.vue'
 import ZclConfiguratorLayout from './ZclConfiguratorLayout.vue'
 import SqlQuery from '../components/SqlQuery.vue'
+import About from '../pages/About.vue'
 const restApi = require(`../../src-shared/rest-api.js`)
 const rendApi = require(`../../src-shared/rend-api.js`)
 const observable = require('../util/observable.js')
@@ -245,6 +252,7 @@ export default {
     ZclConfiguratorLayout,
     SqlQuery,
     Exceptions,
+    About,
   },
   data() {
     return {
@@ -264,6 +272,7 @@ export default {
       index: 0,
       maxIndex: 0,
       generationDirectory: '',
+      homeDialog: false,
     }
   },
   computed: {

src/pages/About.vue

@@ -14,15 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <div>
-    <q-img src="~assets/zap_splash.png">
-      <div class="absolute-bottom text-subtitle1 text-center">
-        Version {{ version }} (fl {{ featureLevel }}, {{ date }}, #{{ hash }})
-        <br />
-        &copy; 2020 by the authors. Released as open-source, under terms of
-        Apache 2.0 license. {{ version }}
-      </div>
-    </q-img>
+  <div style="width: 100%; height: auto">
+    <q-card>
+      <q-card-section
+        ><q-img src="~assets/zap_splash.png">
+          <div class="absolute-bottom text-subtitle1 text-center">
+            Version {{ version }} (fl {{ featureLevel }}, {{ date }}, #{{
+              hash
+            }})
+            <br />
+            &copy; 2020 by the authors. Released as open-source, under terms of
+            Apache 2.0 license. {{ version }}
+          </div>
+        </q-img>
+      </q-card-section>
+    </q-card>
   </div>
 </template>
 <script>

src/pages/Preference.vue

@@ -15,12 +15,8 @@ limitations under the License.
 -->
 <template>
   <div>
-    <q-toolbar class="shadow-2" >
-      <q-btn 
-      icon="arrow_back"
-      to="/"
-      label="Back"
-      />
+    <q-toolbar class="shadow-2">
+      <q-btn icon="arrow_back" to="/" label="Back" />
     </q-toolbar>
     <q-splitter v-model="splitterModel" style="height: 100%">
       <template v-slot:before>
@@ -32,11 +28,6 @@ limitations under the License.
             icon="mdi-file-document-edit-outline"
             label="Generation"
           />
-          <q-tab
-            name="About"
-            icon="mdi-alert-circle"
-            label="About"
-          />
         </q-tabs>
       </template>
 
@@ -49,7 +40,7 @@ limitations under the License.
           transition-prev="jump-up"
           transition-next="jump-up"
         >
-        <q-tab-panel name="user">
+          <q-tab-panel name="user">
             <PreferenceUser />
           </q-tab-panel>
           <q-tab-panel name="package">
@@ -59,11 +50,6 @@ limitations under the License.
           <q-tab-panel name="gen">
             <PreferenceGeneration />
           </q-tab-panel>
-          <q-tab-panel name="About">
-            <About />
-          </q-tab-panel>
-
-          
         </q-tab-panels>
       </template>
     </q-splitter>
@@ -73,14 +59,12 @@ limitations under the License.
 import PreferencePackage from './PreferencePackage.vue'
 import PreferenceGeneration from './PreferenceGeneration.vue'
 import PreferenceUser from './PreferenceUser.vue'
-import About from './About.vue'
 export default {
   name: 'Preference',
   components: {
     PreferencePackage,
     PreferenceGeneration,
     PreferenceUser,
-    About,
   },
   data() {
     return {