diff --git a/components/PanelPreviewClient.client.vue b/components/PanelPreviewClient.client.vue
index fac066fd..e26f8ec3 100644
--- a/components/PanelPreviewClient.client.vue
+++ b/components/PanelPreviewClient.client.vue
@@ -43,13 +43,6 @@ watch(
   syncColorMode,
   { flush: 'sync' },
 )
-
-onMounted(async () => {
-  await mountPlayground(
-    play,
-    colorMode.value,
-  )
-})
 </script>
 
 <template>
diff --git a/components/PanelTerminal.vue b/components/PanelTerminal.vue
index ade8d82b..c43bd297 100644
--- a/components/PanelTerminal.vue
+++ b/components/PanelTerminal.vue
@@ -17,7 +17,7 @@ const play = usePlaygroundStore()
         v-if="play.status !== 'init' && play.status !== 'mount'"
         hover="bg-active" rounded p1
         title="Restart terminal"
-        @click="play.actions.restartServer()"
+        @click="play.restartServer()"
       >
         <div i-ph-arrow-clockwise-duotone />
       </button>
diff --git a/components/TheNav.vue b/components/TheNav.vue
index 77cd2603..51a620fd 100644
--- a/components/TheNav.vue
+++ b/components/TheNav.vue
@@ -14,7 +14,7 @@ const play = usePlaygroundStore()
       rounded p2
       hover="bg-active"
       title="Download as ZIP"
-      @click="play.actions.downloadZip()"
+      @click="play.downloadZip()"
     >
       <div i-ph-download-duotone text-2xl />
     </button>
diff --git a/composables/web-container.ts b/composables/web-container.ts
deleted file mode 100644
index 81702c88..00000000
--- a/composables/web-container.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Please create an issue first before submiting PRs.
- * So that we can discuss about the directions and plans, to avoid wasted efforts. Thank you!
- */
-
-import type { WebContainerProcess } from '@webcontainer/api'
-import { WebContainer } from '@webcontainer/api'
-import type { PlaygroundStore } from '../stores/playground'
-import { templates } from '~/templates'
-
-if (import.meta.server)
-  throw new Error('WebContainer cannot be mounted on server')
-
-let _webContainerPromise: Promise<WebContainer>
-
-export async function useWebContainer() {
-  if (!_webContainerPromise)
-    _webContainerPromise = WebContainer.boot()
-  return await _webContainerPromise
-}
-
-export async function mountPlayground(
-  play: PlaygroundStore,
-  colorMode: string,
-) {
-  const { files, tree } = await templates.basic({
-    nuxtrc: [
-      // Have color mode on initial load
-      colorMode === 'dark'
-        ? 'app.head.htmlAttrs.class=dark'
-        : '',
-    ],
-  })
-
-  const wc = await useWebContainer()
-
-  play.webcontainer = wc
-  play.files = files
-
-  files.forEach((file) => {
-    file.wc = wc
-  })
-
-  wc.on('server-ready', async (port, url) => {
-    // Nuxt listen to multiple ports, and 'server-ready' is emitted for each of them
-    // We need the main one
-    if (port === 3000) {
-      play.previewLocation = {
-        origin: url,
-        fullPath: '/',
-      }
-    }
-  })
-
-  wc.on('error', (err) => {
-    play.status = 'error'
-    play.error = err
-  })
-
-  play.status = 'mount'
-  await wc.mount(tree)
-
-  let processInstall: WebContainerProcess | undefined
-  let processDev: WebContainerProcess | undefined
-
-  // Assign actions
-  play.actions.restartServer = startServer
-  play.actions.downloadZip = downloadZip
-
-  function killPreviousProcess() {
-    processInstall?.kill()
-    processDev?.kill()
-  }
-
-  async function startServer() {
-    killPreviousProcess()
-
-    play.status = 'install'
-
-    processInstall = await wc.spawn('pnpm', ['install'])
-    play.stream = processInstall.output
-    const installExitCode = await processInstall.exit
-
-    if (installExitCode !== 0) {
-      play.status = 'error'
-      play.error = {
-        message: `Unable to run npm install, exit as ${installExitCode}`,
-      }
-      throw new Error('Unable to run npm install')
-    }
-
-    play.status = 'start'
-    processDev = await wc.spawn('pnpm', ['run', 'dev', '--no-qr'])
-    play.stream = processDev.output
-  }
-
-  async function downloadZip() {
-    const { default: JSZip } = await import('jszip')
-    const zip = new JSZip()
-
-    type Zip = typeof zip
-
-    async function crawlFiles(dir: string, zip: Zip) {
-      const files = await wc.fs.readdir(dir, { withFileTypes: true })
-
-      await Promise.all(
-        files.map(async (file) => {
-          if (isFileIgnored(file.name))
-            return
-
-          if (file.isFile()) {
-            // TODO: If it's package.json, we modify to remove some fields
-            const content = await wc.fs.readFile(`${dir}/${file.name}`, 'utf8')
-            zip.file(file.name, content)
-          }
-          else if (file.isDirectory()) {
-            const folder = zip.folder(file.name)!
-            return crawlFiles(`${dir}/${file.name}`, folder)
-          }
-        }),
-      )
-    }
-
-    await crawlFiles('.', zip)
-
-    const blob = await zip.generateAsync({ type: 'blob' })
-    const url = URL.createObjectURL(blob)
-    const date = new Date()
-    const dateString = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}-${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`
-    const link = document.createElement('a')
-    link.href = url
-    // TODO: have a better name with the current tutorial name
-    link.download = `nuxt-playground-${dateString}.zip`
-    link.click()
-    link.remove()
-    URL.revokeObjectURL(url)
-  }
-
-  startServer()
-
-  // In dev, when doing HMR, we kill the previous process while reusing the same WebContainer
-  if (import.meta.hot) {
-    import.meta.hot.accept(() => {
-      killPreviousProcess()
-    })
-  }
-}
diff --git a/stores/playground.ts b/stores/playground.ts
index 16f56657..e7744870 100644
--- a/stores/playground.ts
+++ b/stores/playground.ts
@@ -1,6 +1,7 @@
 import type { Raw } from 'vue'
-import type { WebContainer } from '@webcontainer/api'
+import type { WebContainer, WebContainerProcess } from '@webcontainer/api'
 import type { VirtualFile } from '../structures/VirtualFile'
+import { templates } from '~/templates'
 
 export const PlaygroundStatusOrder = [
   'init',
@@ -12,11 +13,6 @@ export const PlaygroundStatusOrder = [
 
 export type PlaygroundStatus = typeof PlaygroundStatusOrder[number] | 'error'
 
-export interface PlaygroundActions {
-  restartServer(): Promise<void>
-  downloadZip(): Promise<void>
-}
-
 export const usePlaygroundStore = defineStore('playground', () => {
   const status = ref<PlaygroundStatus>('init')
   const error = shallowRef<{ message: string }>()
@@ -30,10 +26,140 @@ export const usePlaygroundStore = defineStore('playground', () => {
   })
   const previewUrl = computed(() => previewLocation.value.origin + previewLocation.value.fullPath)
 
-  // Actions that will be replaced later on
-  const actions: PlaygroundActions = {
-    async restartServer() {},
-    async downloadZip() {},
+  const colorMode = useColorMode()
+
+  let processInstall: WebContainerProcess | undefined
+  let processDev: WebContainerProcess | undefined
+
+  // Mount the playground
+  if (import.meta.client) {
+    ;(async () => {
+      const { files: _files, tree } = await templates.basic({
+        nuxtrc: [
+          // Have color mode on initial load
+          colorMode.value === 'dark'
+            ? 'app.head.htmlAttrs.class=dark'
+            : '',
+        ],
+      })
+
+      const wc = await import('@webcontainer/api')
+        .then(({ WebContainer }) => WebContainer.boot())
+
+      webcontainer.value = wc
+      files.value = _files
+
+      _files.forEach((file) => {
+        file.wc = wc
+      })
+
+      wc.on('server-ready', async (port, url) => {
+        // Nuxt listen to multiple ports, and 'server-ready' is emitted for each of them
+        // We need the main one
+        if (port === 3000) {
+          previewLocation.value = {
+            origin: url,
+            fullPath: '/',
+          }
+        }
+      })
+
+      wc.on('error', (err) => {
+        status.value = 'error'
+        error.value = err
+      })
+
+      status.value = 'mount'
+      await wc.mount(tree)
+
+      startServer()
+
+      // In dev, when doing HMR, we kill the previous process while reusing the same WebContainer
+      if (import.meta.hot) {
+        import.meta.hot.accept(() => {
+          killPreviousProcess()
+        })
+      }
+    })()
+  }
+
+  function killPreviousProcess() {
+    processInstall?.kill()
+    processDev?.kill()
+  }
+
+  async function startServer() {
+    if (!import.meta.client)
+      return
+
+    const wc = webcontainer.value!
+
+    killPreviousProcess()
+
+    status.value = 'install'
+
+    processInstall = await wc.spawn('pnpm', ['install'])
+    stream.value = processInstall.output
+    const installExitCode = await processInstall.exit
+
+    if (installExitCode !== 0) {
+      status.value = 'error'
+      error.value = {
+        message: `Unable to run npm install, exit as ${installExitCode}`,
+      }
+      throw new Error('Unable to run npm install')
+    }
+
+    status.value = 'start'
+    processDev = await wc.spawn('pnpm', ['run', 'dev', '--no-qr'])
+    stream.value = processDev.output
+  }
+
+  async function downloadZip() {
+    if (!import.meta.client)
+      return
+
+    const wc = webcontainer.value!
+
+    const { default: JSZip } = await import('jszip')
+    const zip = new JSZip()
+
+    type Zip = typeof zip
+
+    const crawlFiles = async (dir: string, zip: Zip) => {
+      const files = await wc.fs.readdir(dir, { withFileTypes: true })
+
+      await Promise.all(
+        files.map(async (file) => {
+          if (isFileIgnored(file.name))
+            return
+
+          if (file.isFile()) {
+            // TODO: If it's package.json, we modify to remove some fields
+            const content = await wc.fs.readFile(`${dir}/${file.name}`, 'utf8')
+            zip.file(file.name, content)
+          }
+          else if (file.isDirectory()) {
+            const folder = zip.folder(file.name)!
+            return crawlFiles(`${dir}/${file.name}`, folder)
+          }
+        }),
+      )
+    }
+
+    await crawlFiles('.', zip)
+
+    const blob = await zip.generateAsync({ type: 'blob' })
+    const url = URL.createObjectURL(blob)
+    const date = new Date()
+    const dateString = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}-${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`
+    const link = document.createElement('a')
+    link.href = url
+    // TODO: have a better name with the current tutorial name
+    link.download = `nuxt-playground-${dateString}.zip`
+    link.click()
+    link.remove()
+    URL.revokeObjectURL(url)
   }
 
   return {
@@ -44,7 +170,8 @@ export const usePlaygroundStore = defineStore('playground', () => {
     webcontainer,
     previewUrl,
     previewLocation,
-    actions,
+    restartServer: startServer,
+    downloadZip,
   }
 })