diff --git a/packages/storybook-nuxt/playground/app.vue b/packages/storybook-nuxt/playground/app.vue
index ec738a1..63e642b 100644
--- a/packages/storybook-nuxt/playground/app.vue
+++ b/packages/storybook-nuxt/playground/app.vue
@@ -1,6 +1,9 @@
 <template>
-  <div>
+  <div class="text-center ">
     <h1> My Nuxt App</h1>
+  </div>
+  <hr>
+  <div>
     <MyNuxtPage />
   </div>
 </template>
diff --git a/packages/storybook-nuxt/playground/components/MyNuxtPage.vue b/packages/storybook-nuxt/playground/components/MyNuxtPage.vue
index f04ecb1..c0b322a 100644
--- a/packages/storybook-nuxt/playground/components/MyNuxtPage.vue
+++ b/packages/storybook-nuxt/playground/components/MyNuxtPage.vue
@@ -1,58 +1,53 @@
 <script setup>
+import { useRouter } from 'vue-router'
 
+const router = useRouter() //
+
+router.beforeEach((to, from, next) => {
+  next()
+})
+
+router.push('/')
 </script>
 
 <template>
-  <v-container>
-    <NuxtPage />
-    <template #footer>
-      <div class="text-center p-4 op-50">
-        Current route: <code>{{ $route.path }}</code>
-      </div>
-    </template>
-  </v-container>
-  <v-layout class="overflow-visible" style="height: 56px;">
-    <v-bottom-navigation
-      v-model="value"
-      active
-      color="primary"
-    >
-      <v-btn>
-        <v-icon>mdi-home</v-icon>
-
+  <div class="overflow-visible" style="padding: 40px;">
+    <div class="flex justify-center items-center h-full" style="display: flex;  padding: 20px;">
+      <my-button>
         <NuxtLink to="/" class="n-link-base">
           Home
         </NuxtLink>
-      </v-btn>
-      <v-btn>
-        <v-icon>mdi-history</v-icon>
-
+      </my-button>
+      <my-button>
         <NuxtLink to="/about" class="n-link-base">
           About
         </NuxtLink>
-      </v-btn>
-
-      <v-btn>
-        <v-icon>mdi-heart</v-icon>
+      </my-button>
 
+      <my-button>
         <NuxtLink to="/parent" class="n-link-base">
           Parent (index)
         </NuxtLink>
-      </v-btn>
-
-      <v-btn>
-        <v-icon>mdi-map-marker</v-icon>
+      </my-button>
 
+      <my-button>
         <NuxtLink to="/parent/b" class="n-link-base">
           Parent (b)
         </NuxtLink>
-      </v-btn>
-      <v-btn class="n-link-base" @click="$router.push(`/parent/reload-${(Math.random() * 100).toFixed()}`)">
+      </my-button>
+      <my-button class="n-link-base" @click="$router.push(`/parent/reload-${(Math.random() * 100).toFixed()}`)">
         Keyed child
-      </v-btn>
-      <v-btn class="n-link-base" @click="$router.push(`/parent/static-${(Math.random() * 100).toFixed()}`)">
+      </my-button>
+      <my-button class="n-link-base" @click="$router.push(`/parent/static-${(Math.random() * 100).toFixed()}`)">
         Non-keyed child
-      </v-btn>
-    </v-bottom-navigation>
-  </v-layout>
+      </my-button>
+    </div>
+  </div>
+
+  <div class="text-center">
+    <NuxtPage />
+  </div>
+  <div class="text-center p-4 op-50">
+    Current route: <code>{{ $route.path }}</code>
+  </div>
 </template>
diff --git a/packages/storybook-nuxt/playground/pages/about.vue b/packages/storybook-nuxt/playground/pages/about.vue
index 4e8b5f0..3b965de 100644
--- a/packages/storybook-nuxt/playground/pages/about.vue
+++ b/packages/storybook-nuxt/playground/pages/about.vue
@@ -5,12 +5,9 @@ defineProps({
 </script>
 
 <template>
-  <div>
-    About Storybook Nuxt Playground with Nuxt Image
-  </div>
+  <h1>About page</h1>
+  <MyNuxtImage />
   <div>
     {{ msg }}
   </div>
-  Nuxt Image
-  <MyNuxtImage />
 </template>
diff --git a/packages/storybook-nuxt/playground/pages/index.vue b/packages/storybook-nuxt/playground/pages/index.vue
index eb07db3..d708ce7 100644
--- a/packages/storybook-nuxt/playground/pages/index.vue
+++ b/packages/storybook-nuxt/playground/pages/index.vue
@@ -5,9 +5,8 @@ defineProps({
 </script>
 
 <template>
+  <h1>Index page</h1>
   <div>
-    Home Storybook
-    Nuxt Image
     <MyNuxtImage />
   </div>
   <div>
diff --git a/packages/storybook-nuxt/playground/pages/parent.vue b/packages/storybook-nuxt/playground/pages/parent.vue
index dd5a406..b7c84ac 100644
--- a/packages/storybook-nuxt/playground/pages/parent.vue
+++ b/packages/storybook-nuxt/playground/pages/parent.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    Parent
+    <h1>Parent page </h1>
     <NuxtPage />
   </div>
 </template>
diff --git a/packages/storybook-nuxt/playground/stories/pages/CustomNav.stories.ts b/packages/storybook-nuxt/playground/stories/pages/CustomNav.stories.ts
index 7214988..2adaf19 100644
--- a/packages/storybook-nuxt/playground/stories/pages/CustomNav.stories.ts
+++ b/packages/storybook-nuxt/playground/stories/pages/CustomNav.stories.ts
@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { useRouter } from 'vue-router'
-
 import MyNuxtPage from '~/components/MyNuxtPage.vue'
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
@@ -28,10 +26,9 @@ export const Home: Story = {
 
       components: { MyNuxtPage },
       setup() {
-        useRouter().push('/')
         return { args }
       },
-      template: '<div><MyNuxtPage /></div>',
+      template: '<div class="text-center"><h1> Custom PagesNav Story </h1><MyNuxtPage /></div>',
     })
   },
 }
diff --git a/packages/storybook-nuxt/src/preset.ts b/packages/storybook-nuxt/src/preset.ts
index f3b7de1..84e4ad7 100644
--- a/packages/storybook-nuxt/src/preset.ts
+++ b/packages/storybook-nuxt/src/preset.ts
@@ -66,12 +66,12 @@ async function defineNuxtConfig(baseConfig: Record<string, any>) {
 
   let extendedConfig: ViteConfig = {}
   nuxt.options.build.transpile.push(join(packageDir, 'preview'))
+  nuxt.options.build.transpile.push('@storybook-vue/nuxt')
 
   nuxt.hook('modules:done', () => {
     extendComposables(nuxt)
     // Override nuxt-link component to use storybook router
     extendComponents(nuxt)
-    // nuxt.options.build.transpile.push('@storybook-vue/nuxt')
     addPlugin({
       src: join(pluginsDir, 'storybook'),
       mode: 'client',
@@ -89,12 +89,23 @@ async function defineNuxtConfig(baseConfig: Record<string, any>) {
       (
         config: ViteConfig | PromiseLike<ViteConfig> | Record<string, any>,
         { isClient }: any,
-      ) => {
+      ): void => {
         if (isClient) {
-          const plugins = baseConfig.plugins.filter((plugin: any) => plugin.name !== 'vite:vue')
-          baseConfig.plugins = [...plugins,
-            vuePlugin(),
-          ]
+          const plugins = baseConfig.plugins
+
+          // Find the index of the plugin with name 'vite:vue'
+          const index = plugins.findIndex((plugin: any) => plugin.name === 'vite:vue')
+
+          // Check if the plugin was found
+          if (index !== -1) {
+            // Replace the plugin with the new one using vuePlugin()
+            plugins[index] = vuePlugin()
+          }
+          else {
+            // Handle the case where the plugin with name 'vite:vue' was not found
+            console.error('Plugin \'vite:vue\' not found in the array.')
+          }
+          baseConfig.plugins = plugins
           extendedConfig = mergeConfig(config, baseConfig)
         }
       },