diff --git a/docs/components/Repl.vue b/docs/components/Repl.vue
index cf193275..c8c0d4e4 100644
--- a/docs/components/Repl.vue
+++ b/docs/components/Repl.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Repl, ReplStore } from '@vue/repl'
+import { ReplStore, Repl as VueRepl } from '@vue/repl'
 import { useVueFlow } from '@vue-flow/core'
 import '@vue/repl/style.css'
 import { exampleImports } from './examples'
@@ -58,7 +58,7 @@ for (const example of Object.keys(imports).filter((i) => i !== 'additionalImport
 }
 
 onMounted(async () => {
-  await store.setVueVersion('3.2.25')
+  await store.setVueVersion('3.2.37')
 
   await store.setFiles(
     {
@@ -86,7 +86,7 @@ const sfcOptions = {
 </script>
 
 <template>
-  <Repl
+  <VueRepl
     :clear-console="true"
     :auto-resize="true"
     :store="store"
diff --git a/docs/components/home/flows/Basic.vue b/docs/components/home/flows/Basic.vue
index 56253210..802f7459 100644
--- a/docs/components/home/flows/Basic.vue
+++ b/docs/components/home/flows/Basic.vue
@@ -119,7 +119,7 @@ onConnect((param) => {
     class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
   >
     <VueFlow class="basic">
-      <Controls class="md:(!left-auto !right-[10px])" />
+      <Controls position="bottom-right" />
       <Background :gap="60">
         <template #pattern>
           <Cross :style="{ fontSize: `${8 * viewport.zoom || 1}px` }" class="text-[#10b981] opacity-50" />