diff --git a/.vitepress/sidebar.ts b/.vitepress/sidebar.ts
index 61ac6b43..88f4601c 100644
--- a/.vitepress/sidebar.ts
+++ b/.vitepress/sidebar.ts
@@ -479,7 +479,7 @@ export function getSidebar() {
             ],
           },
           {
-            text: '💬 Web3Telegram <span class="VPBadge warning" style="margin-left: 8px; margin-bottom: -1px; transform: translateY(-1px);">alpha</span>',
+            text: '💬 Web3Telegram',
             link: '/use-iapp/web3telegram',
             collapsed: true,
             items: [
diff --git a/package-lock.json b/package-lock.json
index 2dccf20b..fabb7040 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@vueuse/core": "^13.6.0",
         "@wagmi/vue": "^0.1.24",
         "clsx": "^2.1.1",
+        "figlet": "^1.8.2",
         "pinia": "^3.0.3",
         "reka-ui": "^2.4.1",
         "tailwind-merge": "^3.3.1",
@@ -32,6 +33,7 @@
       "devDependencies": {
         "@iconify/vue": "^5.0.0",
         "@shikijs/vitepress-twoslash": "^3.8.0",
+        "@types/figlet": "^1.7.0",
         "@types/prop-types": "^15.7.15",
         "@types/react": "^18.3.23",
         "prettier": "^3.6.2",
@@ -2736,6 +2738,13 @@
       "version": "1.0.8",
       "license": "MIT"
     },
+    "node_modules/@types/figlet": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@types/figlet/-/figlet-1.7.0.tgz",
+      "integrity": "sha512-KwrT7p/8Eo3Op/HBSIwGXOsTZKYiM9NpWRBJ5sVjWP/SmlS+oxxRvJht/FNAtliJvja44N3ul1yATgohnVBV0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "dev": true,
@@ -7462,6 +7471,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/figlet": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/figlet/-/figlet-1.8.2.tgz",
+      "integrity": "sha512-iPCpE9B/rOcjewIzDnagP9F2eySzGeHReX8WlrZQJkqFBk2wvq8gY0c6U6Hd2y9HnX1LQcYSeP7aEHoPt6sVKQ==",
+      "license": "MIT",
+      "bin": {
+        "figlet": "bin/index.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index ac5df8b1..e805e9b9 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@vueuse/core": "^13.6.0",
     "@wagmi/vue": "^0.1.24",
     "clsx": "^2.1.1",
+    "figlet": "^1.8.2",
     "pinia": "^3.0.3",
     "reka-ui": "^2.4.1",
     "tailwind-merge": "^3.3.1",
@@ -33,6 +34,7 @@
   "devDependencies": {
     "@iconify/vue": "^5.0.0",
     "@shikijs/vitepress-twoslash": "^3.8.0",
+    "@types/figlet": "^1.7.0",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^18.3.23",
     "prettier": "^3.6.2",
diff --git a/src/build-iapp/guides/build-&-deploy.md b/src/build-iapp/guides/build-&-deploy.md
index 1b1def7c..b5106cba 100644
--- a/src/build-iapp/guides/build-&-deploy.md
+++ b/src/build-iapp/guides/build-&-deploy.md
@@ -6,6 +6,12 @@ description:
 
 # Create and Deploy an iApp
 
+iApps (iExec Applications) are decentralized applications that run on the iExec
+network. They leverage confidential computing to ensure data privacy and
+security while providing scalable off-chain computation.
+
+## About iApp Generator
+
 Bootstrap TEE-compatible applications in minutes without any hardcoding skills,
 iApp Generator handles all the low-level complexity for you.
 
@@ -20,20 +26,254 @@ iApp Generator handles all the low-level complexity for you.
 - **Check and deploy iApps quickly** - iApp Generator checks that your iApp
   complies with the iExec Framework and streamlines its deployment.
 
-```bash
-# Create your iApp (Python or Node.js supported)
-iapp init my-privacy-app
-cd my-privacy-app
+## Prerequisites
+
+Before getting started, make sure you have the following installed:
+
+- **Node.js** (version 18 or higher) - [Download here](https://nodejs.org/)
+- **Docker** - [Download here](https://www.docker.com/get-started)
+- **Docker Hub account** - [Sign up here](https://hub.docker.com/) (required for
+  deployment)
+
+## Installation
+
+First, install the iApp Generator CLI tool using your preferred package manager:
+
+::: code-group
+
+```sh [npm]
+npm install -g @iexec/iapp
+```
+
+```sh [yarn]
+yarn global add @iexec/iapp
+```
+
+```sh [pnpm]
+pnpm add -g @iexec/iapp
+```
 
-# Develop and test locally (simulates TEE environment)
-iapp test
-# Deploy to the network
-iapp deploy
+```sh [bun]
+bun add -g @iexec/iapp
 ```
 
-<div class="bg-gradient-to-r from-blue-400/10 to-blue-400/5 rounded-[6px] p-4 border-l-4 border-blue-600 mb-6">
-  <p class="m-0! text-sm"><strong>Note:</strong> iApp Generator currently supports Python and Node.js, but iApps can be built in any language that runs in Docker.</p>
-</div>
+:::
+
+## Quick Start
+
+Once installed, you can create and deploy your first iApp. The CLI will guide
+you through an interactive setup process to configure your project name,
+programming language, and template:
+
+<CLIDemo
+  initialCommand="iapp init"
+  asciiText="iApp"
+  :steps="[
+    {
+      showAt: 2,
+      completeAt: 4,
+      question: 'What is your project name? (A folder with this name will be created)',
+      answer: 'hello-world',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 4,
+      completeAt: 6,
+      question: 'Which language do you want to use?',
+      answer: 'JavaScript',
+      options: [
+        { label: 'JavaScript', selected: true },
+        { label: 'Python', selected: false }
+      ],
+      highlighted: false,
+      isComplete: false
+    },
+    {
+      showAt: 6,
+      completeAt: 8,
+      question: 'What kind of project do you want to init?',
+      answer: 'Hello World',
+      options: [
+        { label: 'Hello World - iapp quick start', selected: true },
+        { label: 'advanced', selected: false }
+      ],
+      highlighted: false,
+      isComplete: false
+    }
+  ]"
+  :completionStep="8"
+  :completionMessage="'Generating your iApp...'"
+  :completionItems="[
+    '📁 Created hello-world/',
+    '📄 Added package.json',
+    '🐳 Added Dockerfile',
+    '⚙️ Added iExec configuration'
+  ]"
+  :successMessage="'Your iApp is ready!'"
+/>
+
+After the interactive setup, continue with development and deployment:
+
+## Development and Testing
+
+Navigate to your project and run tests locally to simulate the TEE environment.
+The CLI will build a Docker image, run your app, and show you the results:
+
+<CLIDemo
+  initialCommand="iapp test"
+  :steps="[
+    {
+      showAt: 2,
+      question: 'No app secret is configured (from iapp.config.json)',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 3,
+      question: 'App docker image built (sha256:9cc0de820aaaf8f86700a3ec4082fe69b9e9a48a117ebb0ade0d82d0879cbe41)',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 4,
+      question: 'App docker image ran and exited successfully.',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 5,
+      completeAt: 6,
+      question: 'Would you like to see the app logs? (12 lines)',
+      answer: 'no',
+      options: [
+        { label: 'yes', selected: false },
+        { label: 'no', selected: true }
+      ],
+      highlighted: false,
+      showTyping: false,
+      isComplete: false
+    },
+    {
+      showAt: 7,
+      question: 'Checked app output',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 8,
+      completeAt: 10,
+      question: 'Would you like to see the result? (View ./output/)',
+      answer: 'yes',
+      options: [
+        { label: 'yes', selected: true },
+        { label: 'no', selected: false }
+      ],
+      highlighted: false,
+      showTyping: false,
+      isComplete: false
+    }
+  ]"
+  :completionStep="11"
+  :completionMessage="'📁 output directory content:'"
+  :completionItems="[
+    '└ computed.json',
+    '└ result.txt'
+  ]"
+  :successMessage="'hello world'"
+  :autoRestart="true"
+/>
+
+## Deployment
+
+After your tests pass and the package is built, you can deploy your iApp to a
+supported network. During deployment, you'll enter your DockerHub credentials,
+specify your app version, and push both standard and TEE-compatible images:
+
+<CLIDemo
+  initialCommand="iapp deploy"
+  asciiText="Deploy"
+  :steps="[
+    {
+      showAt: 2,
+      question: 'Using chain bellecour',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 3,
+      question: 'Using saved walletPrivateKey (from iapp.config.json)',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 4,
+      completeAt: 6,
+      question: 'What is your username on DockerHub? (It will be used to properly tag the Docker image)',
+      answer: 'bob',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 6,
+      completeAt: 8,
+      question: 'What is your DockerHub access token?',
+      answer: '**********************',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 8,
+      completeAt: 10,
+      question: 'What is the version of your iApp?',
+      answer: '0.0.1',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 10,
+      question: 'Docker image built (sha256:a53fc4c480f482c384a13266ea2cb6cc5572733c866c44a5f604f4bfab3a744a) and tagged bob/hello-world:0.0.1',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 11,
+      question: 'Pushed image bob/hello-world:0.0.1 on dockerhub',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 12,
+      question: 'Pushed TEE image bob/hello-world:0.0.1-tee-scone-5.9.1-v16-debug-ce3a01d9c5d7 on dockerhub',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    },
+    {
+      showAt: 13,
+      question: 'TEE app deployed',
+      answer: '',
+      showTyping: false,
+      isComplete: true
+    }
+  ]"
+  :completionStep="14"
+  :completionMessage="'Deployment of your iApp completed successfully:'"
+  :completionItems="[
+    '└ Docker image: bob/hello-world:0.0.1-tee-scone-5.9.1-v16-debug-ce3a01d9c5d7',
+    '└ iApp address: 0x1f80DCebc2EAAff0Db7156413C43B7e88D189923'
+  ]"
+  :successMessage="'Run iapp run 0x1f80DCebc2EAAff0Db7156413C43B7e88D189923 to execute your iApp on an iExec TEE worker'"
+  :autoRestart="true"
+/>
 
 ## Real Examples
 
@@ -91,7 +331,7 @@ update_oracle_contract(average_price)
 
 :::
 
-**Automated Transactions iApp**
+### Automated Transactions iApp
 
 This iApp automates monthly payments using protected payment details, so
 financial information remains private.
@@ -116,3 +356,7 @@ for month in range(12):
 ```
 
 :::
+
+<script setup>
+import CLIDemo from '../../components/CLIDemo.vue';
+</script>
diff --git a/src/build-iapp/guides/manage-access.md b/src/build-iapp/guides/manage-access.md
index c121ca1e..fad6bb19 100644
--- a/src/build-iapp/guides/manage-access.md
+++ b/src/build-iapp/guides/manage-access.md
@@ -62,7 +62,7 @@ Here's an example app order for a sentiment analysis iApp:
 }
 ```
 
-## Creating an App Order from an iApp Generator Project
+## Creating an App Order
 
 ### Step 1: Install the iExec SDK
 
diff --git a/src/build-iapp/iapp-generator/building-your-iexec-app.md b/src/build-iapp/iapp-generator/building-your-iexec-app.md
index bfcc03bf..d59293d8 100644
--- a/src/build-iapp/iapp-generator/building-your-iexec-app.md
+++ b/src/build-iapp/iapp-generator/building-your-iexec-app.md
@@ -16,11 +16,53 @@ environment.
 
 ### 🏗 Define your Project
 
-Run:
-
-```sh
-iapp init
-```
+<CLIDemo
+  initialCommand="iapp init"
+  asciiText="iApp"
+  :steps="[
+    {
+      showAt: 2,
+      completeAt: 4,
+      question: 'What is your project name? (A folder with this name will be created)',
+      answer: 'hello-world',
+      showTyping: true,
+      isComplete: false
+    },
+    {
+      showAt: 4,
+      completeAt: 6,
+      question: 'Which language do you want to use?',
+      answer: 'JavaScript',
+      options: [
+        { label: 'JavaScript', selected: true },
+        { label: 'Python', selected: false }
+      ],
+      highlighted: false,
+      isComplete: false
+    },
+    {
+      showAt: 6,
+      completeAt: 8,
+      question: 'What kind of project do you want to init?',
+      answer: 'Hello World',
+      options: [
+        { label: 'Hello World - iapp quick start', selected: true },
+        { label: 'advanced', selected: false }
+      ],
+      highlighted: false,
+      isComplete: false
+    }
+  ]"
+  :completionStep="8"
+  :completionMessage="'Generating your iApp...'"
+  :completionItems="[
+    '📁 Created hello-world/',
+    '📄 Added package.json',
+    '🐳 Added Dockerfile',
+    '⚙️ Added iExec configuration'
+  ]"
+  :successMessage="'Your iApp is ready!'"
+/>
 
 Follow the prompts to specify:
 
@@ -156,3 +198,7 @@ Once your application is **stable** and **functional**, you can:
 - 🔗
   [Order Management](https://protocol.docs.iex.ec/for-developers/advanced/manage-your-apporders)
 - 🔗 [iExec Protocol Documentation](https://protocol.docs.iex.ec/)
+
+<script setup>
+import CLIDemo from '../../components/CLIDemo.vue';
+</script>
diff --git a/src/components/CLIDemo.vue b/src/components/CLIDemo.vue
new file mode 100644
index 00000000..e30d2c8a
--- /dev/null
+++ b/src/components/CLIDemo.vue
@@ -0,0 +1,363 @@
+<template>
+  <div class="my-8">
+    <div
+      class="h-96 w-full overflow-hidden rounded-lg bg-gray-900 font-mono shadow-2xl"
+    >
+      <!-- Terminal Header -->
+      <div
+        class="flex items-center gap-3 border-b border-gray-700 bg-gray-800 px-4 py-3"
+      >
+        <div class="flex gap-2">
+          <div class="h-3 w-3 rounded-full bg-red-500"></div>
+          <div class="h-3 w-3 rounded-full bg-yellow-500"></div>
+          <div class="h-3 w-3 rounded-full bg-green-400"></div>
+        </div>
+        <div class="text-sm font-medium text-gray-400">Terminal</div>
+      </div>
+
+      <!-- Terminal Content -->
+      <div
+        class="h-80 overflow-x-hidden overflow-y-auto p-5 text-sm leading-relaxed text-white"
+        ref="terminalContent"
+      >
+        <!-- Initial Command -->
+        <div class="mb-2">
+          <span class="font-bold text-green-400">$ </span>
+          <span class="ml-1 text-white">{{ initialCommand }}</span>
+        </div>
+
+        <!-- ASCII Art -->
+        <div
+          v-if="displayAsciiArt"
+          class="my-2 font-mono text-xs text-blue-400"
+        >
+          <pre>{{ displayAsciiArt }}</pre>
+        </div>
+
+        <!-- Dynamic Steps -->
+        <template v-for="(step, index) in steps" :key="index">
+          <!-- Question/Step -->
+          <div
+            v-if="showStep >= step.showAt"
+            class="animate-fade-in my-2 flex items-start gap-2"
+          >
+            <span
+              class="mt-0.5 flex-shrink-0 font-bold"
+              :class="step.isComplete ? 'text-green-400' : 'text-blue-400'"
+            >
+              {{ step.isComplete ? '✔' : '?' }}
+            </span>
+            <div class="flex-1">
+              <span class="text-white">{{ step.question }}</span>
+              <!-- Show typed text if currently typing -->
+              <span
+                v-if="
+                  step.answer &&
+                  step.showTyping &&
+                  showStep > step.showAt &&
+                  (typedAnswers[index] || '').length < step.answer.length
+                "
+                class="ml-2 font-medium text-yellow-400"
+                >{{ typedAnswers[index] || '' }}</span
+              >
+              <!-- Show full answer if typing is done or no typing animation -->
+              <span
+                v-else-if="
+                  step.answer &&
+                  showStep > step.showAt &&
+                  (!step.showTyping ||
+                    (typedAnswers[index] || '').length >= step.answer.length)
+                "
+                class="ml-2 font-medium text-yellow-400"
+                >{{ step.answer }}</span
+              >
+              <!-- Typing cursor -->
+              <span
+                v-if="
+                  step.showTyping &&
+                  step.answer &&
+                  showStep > step.showAt &&
+                  (typedAnswers[index] || '').length < step.answer.length
+                "
+                class="animate-blink ml-0.5 inline-block h-4 w-0.5 bg-yellow-400"
+              ></span>
+            </div>
+          </div>
+
+          <!-- Options for selection steps -->
+          <div
+            v-if="
+              step.options &&
+              showStep >= step.showAt &&
+              step.completeAt &&
+              showStep < step.completeAt
+            "
+            class="animate-fade-in mb-1 ml-5"
+          >
+            <div
+              v-for="(option, optIndex) in step.options"
+              :key="optIndex"
+              class="flex items-center gap-1 py-0.5 transition-all duration-200"
+              :class="{
+                '-mx-2 animate-pulse rounded bg-blue-400/10 px-2':
+                  step.highlighted && option.selected,
+              }"
+            >
+              <span class="w-3 font-bold text-blue-400">{{
+                option.selected ? '❯' : '\u00A0'
+              }}</span>
+              <span class="text-white">{{ option.label }}</span>
+            </div>
+          </div>
+        </template>
+
+        <!-- Completion Message -->
+        <div
+          v-if="showStep >= completionStep"
+          class="animate-fade-in mt-2 mb-4 border-t border-gray-700 pt-2"
+        >
+          <div class="mb-2 flex items-center gap-2">
+            <span class="font-bold text-green-400">✨</span>
+            <span class="font-medium text-green-400">{{
+              completionMessage
+            }}</span>
+          </div>
+          <div class="ml-5 space-y-0.5 text-xs text-gray-400">
+            <div v-for="(item, index) in completionItems" :key="index">
+              {{ item }}
+            </div>
+          </div>
+          <div class="mt-2 flex items-center gap-2">
+            <span class="font-bold text-green-400">✅</span>
+            <span class="font-medium text-green-400">{{ successMessage }}</span>
+          </div>
+        </div>
+
+        <!-- Cursor (only show if not completed) -->
+        <div
+          v-if="showStep < totalSteps && showStep < completionStep"
+          class="animate-blink ml-1 inline-block h-4 w-2 bg-green-400"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
+import figlet from 'figlet';
+
+// Props interface
+interface CLIProps {
+  initialCommand?: string;
+  asciiText?: string;
+  steps?: CLIStep[];
+  completionStep?: number;
+  completionMessage?: string;
+  completionItems?: string[];
+  successMessage?: string;
+  autoStart?: boolean;
+  autoRestart?: boolean;
+}
+
+interface CLIStep {
+  showAt: number;
+  completeAt?: number;
+  question: string;
+  answer?: string;
+  options?: CLIOption[];
+  highlighted?: boolean;
+  showTyping?: boolean;
+  isComplete?: boolean;
+}
+
+interface CLIOption {
+  label: string;
+  selected: boolean;
+}
+
+// Props with defaults
+const props = withDefaults(defineProps<CLIProps>(), {
+  initialCommand: 'iapp init',
+  steps: () => [],
+  completionStep: 8,
+  completionMessage: 'Process completed',
+  completionItems: () => [],
+  successMessage: 'Ready!',
+  autoStart: true,
+  autoRestart: true,
+});
+
+// Constants
+const TYPING_SPEED = 120;
+const RESTART_DELAY = 3000;
+
+// Computed values
+const totalSteps = computed(
+  () => Math.max(...props.steps.map((s) => s.showAt), props.completionStep) + 1
+);
+
+// Generate ASCII art using figlet
+const displayAsciiArt = computed(() => {
+  // Only generate ASCII art if asciiText prop is provided and not empty
+  if (props.asciiText && props.asciiText.trim()) {
+    try {
+      return figlet.textSync(props.asciiText.trim(), { font: 'Standard' });
+    } catch (error) {
+      console.warn('Figlet error:', error);
+      return ''; // Return empty string on error
+    }
+  }
+  return ''; // Return empty string if no asciiText provided
+});
+
+// Reactive state
+const showStep = ref(0);
+const terminalContent = ref<HTMLElement | null>(null);
+const typedAnswers = ref<Record<number, string>>({});
+
+// Timers
+let animationTimer: NodeJS.Timeout | null = null;
+let typingTimer: NodeJS.Timeout | null = null;
+
+// Typing animation
+const typeText = (text: string, stepIndex: number, onComplete?: () => void) => {
+  let currentIndex = 0;
+  typedAnswers.value[stepIndex] = '';
+
+  const typeNextChar = () => {
+    if (currentIndex < text.length) {
+      typedAnswers.value[stepIndex] = text.substring(0, currentIndex + 1);
+      currentIndex++;
+      scrollToBottom(); // Scroll after each character
+      typingTimer = setTimeout(typeNextChar, TYPING_SPEED);
+    } else {
+      // Typing finished, update completion status and call callback
+      updateStepCompletion();
+      scrollToBottom(); // Scroll after typing completion
+      if (onComplete) {
+        setTimeout(onComplete, 500); // Small delay before next step
+      }
+    }
+  };
+
+  typeNextChar();
+};
+
+// Auto-scroll to bottom (always scroll when content changes)
+const scrollToBottom = () => {
+  if (terminalContent.value) {
+    // Use nextTick to ensure DOM is updated before scrolling
+    nextTick(() => {
+      if (terminalContent.value) {
+        terminalContent.value.scrollTop = terminalContent.value.scrollHeight;
+      }
+    });
+  }
+};
+
+// Update step completion status
+const updateStepCompletion = () => {
+  props.steps.forEach((step, index) => {
+    // For typing steps, only mark complete when typing is finished
+    if (step.completeAt && showStep.value >= step.completeAt) {
+      if (step.showTyping && step.answer) {
+        // Only mark complete if typing is finished
+        const typedAnswer = typedAnswers.value[index] || '';
+        if (typedAnswer.length >= step.answer.length) {
+          step.isComplete = true;
+        }
+      } else {
+        step.isComplete = true;
+      }
+    }
+    if (step.highlighted !== undefined && step.options && step.completeAt) {
+      step.highlighted = showStep.value >= step.completeAt - 1;
+    }
+  });
+};
+
+// Main animation loop
+const animate = () => {
+  let currentStep = 0;
+
+  const nextStep = () => {
+    if (currentStep < totalSteps.value) {
+      showStep.value = currentStep + 1;
+      currentStep++;
+      scrollToBottom(); // Scroll when new step is shown
+
+      // Find if this step needs typing animation
+      const typingStep = props.steps.find(
+        (s) => s.showTyping && s.answer && showStep.value === s.showAt + 1
+      );
+
+      if (typingStep && typingStep.answer) {
+        // Start typing animation with callback for next step
+        const stepIndex = props.steps.findIndex((s) => s === typingStep);
+        setTimeout(() => {
+          typeText(typingStep.answer!, stepIndex, () => {
+            // Continue to next step after typing is complete
+            if (currentStep < totalSteps.value) {
+              animationTimer = setTimeout(nextStep, 1000);
+            } else if (props.autoRestart) {
+              // Auto-restart after completion
+              animationTimer = setTimeout(() => {
+                showStep.value = 0;
+                typedAnswers.value = {};
+                animate();
+              }, RESTART_DELAY);
+            }
+          });
+        }, 200);
+      } else {
+        // No typing, just update completion and continue
+        updateStepCompletion();
+
+        if (currentStep < totalSteps.value) {
+          // Fixed delay for non-typing steps
+          animationTimer = setTimeout(nextStep, 2000);
+        } else if (props.autoRestart) {
+          // Auto-restart after completion
+          animationTimer = setTimeout(() => {
+            showStep.value = 0;
+            typedAnswers.value = {};
+            animate();
+          }, RESTART_DELAY);
+        }
+      }
+
+      scrollToBottom();
+    }
+  };
+
+  animationTimer = setTimeout(nextStep, 1000);
+};
+
+// Cleanup timers
+const cleanup = () => {
+  if (animationTimer) clearTimeout(animationTimer);
+  if (typingTimer) clearTimeout(typingTimer);
+};
+
+// Watch for prop changes to restart animation
+watch(
+  () => props.initialCommand,
+  () => {
+    if (props.autoStart) {
+      cleanup();
+      showStep.value = 0;
+      typedAnswers.value = {};
+      animate();
+    }
+  }
+);
+
+onMounted(() => {
+  if (props.autoStart) {
+    animate();
+  }
+});
+
+onUnmounted(cleanup);
+</script>
diff --git a/src/overview/welcome.md b/src/overview/welcome.md
index f6bb652b..351f64ed 100644
--- a/src/overview/welcome.md
+++ b/src/overview/welcome.md
@@ -4,7 +4,7 @@ description:
   Discover how iExec empowers developers to build privacy-first applications
 ---
 
-# 💡 The Privacy Toolkit
+# 💡 Privacy Made Easy
 
 <div class="bg-gradient-to-r from-[#fcd15a] to-[#ffad4d] rounded-[6px] px-8 pb-4 text-gray-800 max-w-3xl mx-auto mb-6">
   <h2 class="text-2xl font-bold mt-0 !border-none">Welcome to iExec</h2>