diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index f4b9e81ef0..d7e1058a09 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -91,7 +91,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-tooltip>
     </a-menu-item>
 
-    <SmartsheetSidebarMenuApiSnippet :model-value="showApiSnippet" @update:model-value="(val) => (showApiSnippet = val)" />
+    <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" />
     <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
       <button
         class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
index b69a3fec5c..4c15a689ad 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -1,27 +1,24 @@
 <script setup lang="ts">
 import HTTPSnippet from 'httpsnippet'
 import { useClipboard } from '@vueuse/core'
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import { ActiveViewInj, MetaInj } from '~/context'
 
 const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const toast = useToast()
-
 interface Props {
   modelValue: boolean
 }
 
 const { project } = $(useProject())
-const { appInfo } = $(useGlobal())
+const { appInfo, token } = $(useGlobal())
 const meta = $(inject(MetaInj))
 const view = $(inject(ActiveViewInj))
 const { xWhere } = useSmartsheetStoreOrThrow()
 const { queryParams } = $(useViewData(meta, view as any, xWhere))
 const { copy } = useClipboard()
-const { $state } = useNuxtApp()
 
 let vModel = $(useVModel(props, 'modelValue', emits))
 
@@ -73,7 +70,7 @@ const snippet = $computed(
   () =>
     new HTTPSnippet({
       method: 'GET',
-      headers: [{ name: 'xc-auth', value: $state.token.value as string, comment: 'JWT Auth token' }],
+      headers: [{ name: 'xc-auth', value: token as string, comment: 'JWT Auth token' }],
       url: apiUrl,
       queryString: Object.entries(queryParams || {}).map(([name, value]) => {
         return {
@@ -92,7 +89,7 @@ const code = $computed(() => {
 const api = new Api({
   baseURL: ${JSON.stringify(apiUrl)},
   headers: {
-    "xc-auth": ${JSON.stringify($state.token.value as string)}
+    "xc-auth": ${JSON.stringify(token as string)}
   }
 })
 
@@ -113,7 +110,7 @@ api.dbViewRow.list(
 
 const onCopyToClipboard = () => {
   copy(code)
-  toast.info('Copied to clipboard')
+  notification.info({ message: 'Copied to clipboard' })
 }
 
 const afterVisibleChange = (visible: boolean) => {
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index 5de2635183..fdc8c4da9a 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -1,7 +1,7 @@
 import { usePreferredLanguages, useStorage } from '@vueuse/core'
 import { useJwt } from '@vueuse/integrations/useJwt'
 import type { JwtPayload } from 'jwt-decode'
-import type { State, StoredState } from './types'
+import type { AppInfo, State, StoredState } from './types'
 import { computed, ref, toRefs, useCounter, useNuxtApp, useTimestamp } from '#imports'
 import type { User } from '~/lib'
 
@@ -71,6 +71,8 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     set: (val) => (storage.value.token = val),
   })
 
+  const appInfo = ref<AppInfo>({ ncSiteUrl: 'localhost:8080' })
+
   /** reactive token payload */
   const { payload } = useJwt<JwtPayload & User>(token)
 
@@ -88,5 +90,6 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     timestamp,
     runningRequests,
     error,
+    appInfo,
   }
 }
diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 1e1f5d5b8c..7d4fc760db 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -11,7 +11,6 @@ export function useProject(projectId?: MaybeRef<string>) {
   const _projectId = $computed(() => unref(projectId))
 
   const project = useState<ProjectType>('project')
-  const appInfo = useState<any>('appInfo')
   const tables = useState<TableType[]>('tables', () => [] as TableType[])
 
   async function loadProjectRoles() {
@@ -50,5 +49,5 @@ export function useProject(projectId?: MaybeRef<string>) {
     () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
   )
 
-  return { project, tables, loadProjectRoles, loadProject, appInfo, loadTables, isMysql, isPg, sqlUi }
+  return { project, tables, loadProjectRoles, loadProject, loadTables, isMysql, isPg, sqlUi }
 }
diff --git a/packages/nc-gui-v2/plugins/state.ts b/packages/nc-gui-v2/plugins/state.ts
index d792e744da..ea16d99185 100644
--- a/packages/nc-gui-v2/plugins/state.ts
+++ b/packages/nc-gui-v2/plugins/state.ts
@@ -23,7 +23,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   nuxtApp.vueApp.i18n.locale.value = state.lang.value
 
   try {
-    state.appInfo = await $api.utils.appInfo()
+    state.appInfo.value = await $api.utils.appInfo()
   } catch (e) {
     console.error(e)
   }