diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
index b5222156f..9699669ff 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -12,8 +12,12 @@
 
     let method: Method = Method.NPM;
 
-    const example1 = `import { Appwrite } from 'appwrite';`;
-    const example2 = `<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}" />`;
+    const example1 = `import { Client } from 'appwrite';`;
+    const example2 =
+        `<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}" />
+<script>
+    const { Client } = Appwrite;
+</script` + `>`; // Prevent svelte from processing the closing script tag
 </script>
 
 <WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
index e13329c53..c9685da2e 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
@@ -4,9 +4,9 @@
     import { sdkForProject } from '$lib/stores/sdk';
 
     const { endpoint, project } = sdkForProject.client.config;
-    const code = `const appwrite = new Appwrite();
+    const code = `const client = new Client();
 
-appwrite
+client
     .setEndpoint('${endpoint}')
     .setProject('${project}');`;
 </script>