diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 8935b03e4..56f1388e6 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -48,8 +48,8 @@
 </template>
 
 <script>
-import MenuService from './service/MenuService';
 import {FilterService,FilterMatchMode} from 'primevue/api';
+import menudata from '@/assets/menu/menu.json';
 
 export default {
     props: {
@@ -58,33 +58,25 @@ export default {
     data() {
         return {
             activeSubmenus: {},
-            menu: null,
+            menu: menudata.data,
             filteredRoutes: null,
             selectedRoute: null,
             routes: []
         }
     },
-    menuService: null,
-    created() {
-        this.menuService = new MenuService();
-    },
     mounted() {
-        this.menuService.getMenu().then(data => {
-            this.menu = data;
+        this.menu.forEach((route) => {
+            let childRoute = {...route};
+            childRoute.children = childRoute.children.filter((child) => {
+                if (child.meta) {
+                    this.routes.push(child);
+                }
 
-            data.forEach((route) => {
-                let childRoute = {...route};
-                childRoute.children = childRoute.children.filter((child) => {
-                    if (child.meta) {
-                        this.routes.push(child);
-                    }
+                return !child.meta;
+            })
 
-                    return !child.meta;
-                })
-
-                this.routes.push(childRoute);            
-            });
-        })
+            this.routes.push(childRoute);            
+        });
     },
     methods: {
         toggleSubmenu(event, name) {
diff --git a/public/demo/menu/menu.json b/src/assets/menu/menu.json
similarity index 100%
rename from public/demo/menu/menu.json
rename to src/assets/menu/menu.json
diff --git a/src/service/MenuService.js b/src/service/MenuService.js
deleted file mode 100644
index 4f3ca26a2..000000000
--- a/src/service/MenuService.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import axios from 'axios';
-
-export default class MenuService {
-
-    getMenu() {
-        return axios.get('demo/menu/menu.json').then(res => res.data.data);
-    }
-}
diff --git a/src/views/overlaypanel/OverlayPanelDemo.vue b/src/views/overlaypanel/OverlayPanelDemo.vue
index 79da8be9a..9320c6d12 100755
--- a/src/views/overlaypanel/OverlayPanelDemo.vue
+++ b/src/views/overlaypanel/OverlayPanelDemo.vue
@@ -9,7 +9,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
+                <Button ref="btn" type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
 
                 <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width:450px" :breakpoints="{'960px': '75vw'}">
                     <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
@@ -50,6 +50,8 @@ export default {
     },
     mounted() {
         this.productService.getProductsSmall().then(data => this.products = data);
+
+        this.$refs.op.show({currentTarget: this.$refs.button.$el});
     },
     methods: {
         toggle(event) {