diff --git a/src/assets/icons-v3/more-crytos.svg b/src/assets/icons-v3/more-crytos.svg
new file mode 100644
index 0000000..cf61270
--- /dev/null
+++ b/src/assets/icons-v3/more-crytos.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="44" height="44" viewBox="0 0 44 44"><g><g><ellipse cx="22.000001907348633" cy="22" rx="22.000001907348633" ry="22" fill="#F5F7F9" fill-opacity="1"/></g><g><g><ellipse cx="17.0833340883255" cy="22.125" rx="1.5000001192092896" ry="1.5" fill="#909399" fill-opacity="1"/></g><g><ellipse cx="22.5833340883255" cy="22.125" rx="1.5000001192092896" ry="1.5" fill="#909399" fill-opacity="1"/></g><g><ellipse cx="28.0833340883255" cy="22.125" rx="1.5000001192092896" ry="1.5" fill="#909399" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/pages/wallet/SendSuccess.vue b/src/pages/wallet/SendSuccess.vue
index e0a9489..12a02a5 100644
--- a/src/pages/wallet/SendSuccess.vue
+++ b/src/pages/wallet/SendSuccess.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { getLogo } from '@/data/logos'
+import { type Chain } from '@/lib/account'
 import { useRouter, useRoute } from 'vue-router'
 import { FlexBox, Divider, Button } from '@/components'
 import SuccessPNG from '@/assets/icons-v3/send-success.png'
-import { getLogo } from '@/data/logos'
-import { type Chain } from '@/lib/account'
 
 const route = useRoute()
 const router = useRouter()
diff --git a/src/pages/welcome/Create.vue b/src/pages/welcome/Create.vue
index e69de29..e5c1868 100644
--- a/src/pages/welcome/Create.vue
+++ b/src/pages/welcome/Create.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import { FlexBox } from '@/components'
+</script>
+
+<template>
+  <FlexBox ai="center" jc="center" class="w-screen h-screen"> Create Wallet </FlexBox>
+</template>
diff --git a/src/pages/welcome/Home.vue b/src/pages/welcome/Home.vue
index c16e036..da9f0a3 100644
--- a/src/pages/welcome/Home.vue
+++ b/src/pages/welcome/Home.vue
@@ -1,19 +1,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
 import { getAccounts } from '@/lib/account'
 import { FlexBox, Button } from '@/components'
 import { Checkbox } from '@/components/ui/checkbox'
 import WelcomeLogo from '@/assets/icons-v3/welcome-logo.svg'
 
-const router = useRouter()
-
 const checked = ref(false)
 
-const createWallet = () => {
-  router.push('/wallet/create')
-}
-
 const accountsCount = ref(0)
 getAccounts().then((accounts) => {
   accountsCount.value = accounts.size
@@ -21,7 +14,7 @@ getAccounts().then((accounts) => {
 </script>
 
 <template>
-  <FlexBox ai="center" jc="center" :gap="12">
+  <FlexBox ai="center" jc="center" :gap="12" class="w-full h-full">
     <FlexBox d="col" class="gap-y-15">
       <FlexBox d="col" :gap="3">
         <div class="text-2xl font-semibold">Metalet —— <br />The portal to exploring the Web3 blockchain world.</div>
diff --git a/src/pages/welcome/Import.vue b/src/pages/welcome/Import.vue
index 531d474..0f4e781 100644
--- a/src/pages/welcome/Import.vue
+++ b/src/pages/welcome/Import.vue
@@ -1,25 +1,28 @@
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
 import { addAccount } from '@/lib/account'
 import passwordManager from '@/lib/password'
 import { FlexBox, Button } from '@/components'
 import { ref, computed, Ref, watch } from 'vue'
+import MoreIcon from '@/assets/icons-v3/more-crytos.svg'
+import BtcLogoIcon from '@/assets/images/btc-logo.svg?url'
+import SpaceLogoIcon from '@/assets/icons-v3/space.svg?url'
+import SuccessPNG from '@/assets/icons-v3/send-success.png'
 import ArrowLeftIcon from '@/assets/icons-v3/arrow-left.svg'
+import CreatePassword from './components/CreatePassword.vue'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { deriveAllAddresses, scripts, type AddressType } from '@/lib/bip32-deriver'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 
 const step = ref(1)
+const stepLen = ref(3)
+const successed = ref(true)
+const hasPassword = ref(false)
 
-// Remove the last one
 const selectableScripts = scripts.slice(0, -1)
 const selectedScript = ref(selectableScripts[0])
 
-const router = useRouter()
-
-// 12/24个单词
-const wordsLengths = [12, 24]
 const selectedWordsLength = ref('12')
+const wordsLengths = [12, 15, 18, 21, 24]
 watch(
   () => selectedWordsLength.value,
   () => {
@@ -33,6 +36,13 @@ const clearWords = () => {
   words.value = Array(selectedWordsLength.value).fill('')
 }
 
+passwordManager.has().then((_hasPassword) => {
+  if (_hasPassword) {
+    hasPassword.value = true
+    stepLen.value = 2
+  }
+})
+
 const onPasteWords = (e: ClipboardEvent) => {
   error.value = ''
   const text = e.clipboardData?.getData('text')
@@ -90,10 +100,10 @@ const onSubmit = async () => {
 
     await addAccount(account)
 
-    // 查询有否设置密码
-    const hasPassword = await passwordManager.has()
-    const following = hasPassword ? '/wallet' : '/wallet/set-password'
-    router.push(following)
+    if (hasPassword.value) {
+      successed.value = true
+    }
+    step.value += step.value
   } catch (e) {
     console.log(e)
     error.value = 'Failed to import your wallet'
@@ -102,97 +112,135 @@ const onSubmit = async () => {
 </script>
 
 <template>
-  <FlexBox class="fixed top-6 left-1/2 -translate-x-1/2" :gap="2">
-    <FlexBox ai="center" jc="center" :class="['step-circle', step === 1 ? 'active' : undefined]">1</FlexBox>
-    <FlexBox ai="center" jc="center" :class="['step-circle', step === 2 ? 'active' : undefined]">2</FlexBox>
-  </FlexBox>
-  <FlexBox d="col" class="w-82">
-    <FlexBox ai="center" :gap="3">
-      <ArrowLeftIcon @click="$router.go(-1)" class="cursor-pointer" />
-      <div class="text-2xl font-medium">Import Wallet</div>
+  <FlexBox d="col" class="w-full gap-20">
+    <FlexBox ai="center" jc="center" class="w-full h-[70px]" :gap="2">
+      <FlexBox
+        ai="center"
+        jc="center"
+        :class="['step-circle', step === _step ? 'active' : undefined]"
+        v-for="_step in Array.from({ length: stepLen }, (_, i) => i + 1)"
+        >{{ _step }}</FlexBox
+      >
     </FlexBox>
-    <Tabs default-value="phrase" class="w-full mt-6">
-      <TabsList class="grid grid-cols-2 bg-gray-secondary rounded-lg text-gray-primary">
-        <TabsTrigger value="phrase" class="text-xs">Import from Phrase</TabsTrigger>
-        <TabsTrigger value="privateKey" class="text-xs">Import from PrivateKey</TabsTrigger>
-      </TabsList>
-      <TabsContent value="phrase">
-        <FlexBox d="col" :gap="4">
-          <FlexBox d="col">
-            <FlexBox ai="center" :gap="2">
-              <div class="text-gray-primary text-ss">BTC:</div>
-              <Select defaultValue="86">
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a path" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="84"> Native Segwit (m/84'/0'/0') </SelectItem>
-                    <SelectItem value="49"> Nested Segwit (m/49'/0'/0') </SelectItem>
-                    <SelectItem value="86"> Taproot (m/86'/0'/0') </SelectItem>
-                    <SelectItem value="44"> Legacy (m/44'/0'/0') </SelectItem>
-                    <SelectItem value="10001"> Same as Mvc (m/44'/10001'/0') </SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </FlexBox>
-            <FlexBox ai="center" :gap="2">
-              <div class="text-gray-primary text-ss">MVC:</div>
-              <div class="text-sm tracking-wide">
-                <span class="">m/44'/</span>
-                <input type="text" class="pit-input mx-2 w-16" v-model="mvcPath" />
-                <span class="">'/0'</span>
-              </div>
-            </FlexBox>
-            <FlexBox ai="center" :gap="1">
-              <span>My seed phrase has</span>
-              <Select v-model:modelValue="selectedWordsLength">
-                <SelectTrigger class="w-24 text-base">
-                  <SelectValue placeholder="Select a number of words" />
-                </SelectTrigger>
-                <SelectContent align="end">
-                  <SelectGroup>
-                    <SelectItem :value="length.toString()" v-for="length of wordsLengths">
-                      {{ length }} words
-                    </SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </FlexBox>
-          </FlexBox>
+    <FlexBox jc="center" class="w-full">
+      <FlexBox d="col" class="w-82" v-if="step === 1">
+        <FlexBox ai="center" :gap="3">
+          <ArrowLeftIcon @click="$router.go(-1)" class="cursor-pointer" />
+          <div class="text-2xl font-medium">Import Wallet</div>
+        </FlexBox>
+        <Tabs default-value="phrase" class="w-full mt-6">
+          <TabsList class="grid grid-cols-2 bg-gray-secondary rounded-lg text-gray-primary">
+            <TabsTrigger value="phrase" class="text-xs">Import from Phrase</TabsTrigger>
+            <TabsTrigger value="privateKey" class="text-xs">Import from PrivateKey</TabsTrigger>
+          </TabsList>
+          <TabsContent value="phrase">
+            <FlexBox d="col" :gap="4">
+              <FlexBox d="col">
+                <FlexBox ai="center" :gap="2">
+                  <div class="text-gray-primary text-ss">BTC:</div>
+                  <Select defaultValue="86">
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a path" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="84"> Native Segwit (m/84'/0'/0') </SelectItem>
+                        <SelectItem value="49"> Nested Segwit (m/49'/0'/0') </SelectItem>
+                        <SelectItem value="86"> Taproot (m/86'/0'/0') </SelectItem>
+                        <SelectItem value="44"> Legacy (m/44'/0'/0') </SelectItem>
+                        <SelectItem value="10001"> Same as Mvc (m/44'/10001'/0') </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </FlexBox>
+                <FlexBox ai="center" :gap="2">
+                  <div class="text-gray-primary text-ss">MVC:</div>
+                  <div class="text-sm tracking-wide">
+                    <span class="">m/44'/</span>
+                    <input type="text" class="pit-input mx-2 w-16" v-model="mvcPath" />
+                    <span class="">'/0'</span>
+                  </div>
+                </FlexBox>
+                <FlexBox ai="center" :gap="1">
+                  <span>My seed phrase has</span>
+                  <Select v-model:modelValue="selectedWordsLength">
+                    <SelectTrigger class="w-24 text-base">
+                      <SelectValue placeholder="Select a number of words" />
+                    </SelectTrigger>
+                    <SelectContent align="end">
+                      <SelectGroup>
+                        <SelectItem :value="length.toString()" v-for="length of wordsLengths">
+                          {{ length }} words
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </FlexBox>
+              </FlexBox>
 
-          <!-- input phrase -->
-          <div class="grid grid-cols-2 gap-2 pr-3 -mr-3 overflow-y-auto max-h-[304px]">
-            <FlexBox class="h-11 border-gray-soft border rounded-lg" v-for="(_, index) in words" ai="center">
-              <FlexBox ai="center" jc="center" class="w-7.5 h-full text-gray-primary bg-gray-secondary rounded-l-lg">{{
-                index + 1
-              }}</FlexBox>
-              <input
-                :key="index"
-                type="text"
-                v-model="words[index]"
-                @paste.prevent="onPasteWords"
-                class="h-full font-medium focus:outline-none w-full p-3 rounded-lg"
-              />
-            </FlexBox>
-          </div>
+              <!-- input phrase -->
+              <div class="grid grid-cols-2 gap-2 pr-3 -mr-3 overflow-y-auto max-h-[304px]">
+                <FlexBox class="h-11 border-gray-soft border rounded-lg" v-for="(_, index) in words" ai="center">
+                  <FlexBox
+                    ai="center"
+                    jc="center"
+                    class="w-7.5 h-full text-gray-primary bg-gray-secondary rounded-l-lg"
+                    >{{ index + 1 }}</FlexBox
+                  >
+                  <input
+                    :key="index"
+                    type="text"
+                    v-model="words[index]"
+                    @paste.prevent="onPasteWords"
+                    class="h-full font-medium focus:outline-none w-full p-3 rounded-lg"
+                  />
+                </FlexBox>
+              </div>
 
-          <Button type="primary" class="w-61.5 mt-15 mx-auto" @click="onSubmit">Confirm</Button>
+              <Button type="primary" class="w-61.5 mt-15 mx-auto" @click="onSubmit">Next</Button>
 
-          <!-- error -->
-          <div class="mt-4 text-center text-sm text-red-500" v-if="error">{{ error }}</div>
-        </FlexBox>
-      </TabsContent>
-      <TabsContent value="privateKey">
-        <textarea
-          placeholder="Enter your private key here"
-          class="w-full h-45 focus:outline-none border border-gray-soft rounded-lg px-4 py-3.5"
+              <!-- error -->
+              <div class="mt-4 text-center text-sm text-red-500" v-if="error">{{ error }}</div>
+            </FlexBox>
+          </TabsContent>
+          <TabsContent value="privateKey">
+            <div class="h-[450px]">
+              <textarea
+                placeholder="Enter your private key here"
+                class="w-full h-45 focus:outline-none border border-gray-soft rounded-lg px-4 py-3.5"
+              />
+            </div>
+            <Button type="primary" class="w-61.5 mt-15 mx-auto cursor-not-allowed opacity-50" @click="onSubmit" disabled
+              >Coming soon...</Button
+            >
+          </TabsContent>
+        </Tabs>
+      </FlexBox>
+      <FlexBox d="col" class="w-82" v-else-if="!hasPassword">
+        <CreatePassword
+          :callback="
+            () => {
+              step = step + 1
+              hasPassword = true
+              successed = true
+            }
+          "
         />
-        <Button type="primary" class="w-61.5 mt-15 mx-auto cursor-not-allowed opacity-50" @click="onSubmit" disabled
-          >Coming soon...</Button
-        >
-      </TabsContent>
-    </Tabs>
+      </FlexBox>
+      <FlexBox d="col" class="w-82" v-else-if="successed">
+        <FlexBox d="col" ai="center">
+          <img :src="SuccessPNG" alt="Send Success" class="w-30" />
+          <h1 class="text-2xl mt-6 font-medium">Wallet created successfully</h1>
+          <p class="text-sm mt-12 text-gray-primary">Metalet currently supports the following cryptos</p>
+          <FlexBox ai="center" :gap="4" class="mt-4">
+            <img :src="BtcLogoIcon" class="w-11" alt="Bitcoin" />
+            <img :src="SpaceLogoIcon" class="w-11" alt="Space" />
+            <MoreIcon />
+          </FlexBox>
+          <Button type="primary" class="mt-26 w-61.5" @click="() => $router.push('/wallet')">Activate Metalet</Button>
+        </FlexBox>
+      </FlexBox>
+    </FlexBox>
   </FlexBox>
 </template>
 
diff --git a/src/pages/welcome/Index.vue b/src/pages/welcome/Index.vue
index 72bc2ad..c558546 100644
--- a/src/pages/welcome/Index.vue
+++ b/src/pages/welcome/Index.vue
@@ -3,7 +3,7 @@ import { FlexBox } from '@/components'
 </script>
 
 <template>
-  <FlexBox ai="center" jc="center" class="w-screen h-screen">
+  <FlexBox class="w-screen h-screen">
     <RouterView />
   </FlexBox>
 </template>
diff --git a/src/pages/welcome/components/CreatePassword.vue b/src/pages/welcome/components/CreatePassword.vue
new file mode 100644
index 0000000..79eca58
--- /dev/null
+++ b/src/pages/welcome/components/CreatePassword.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import passwordManager from '@/lib/password'
+import { FlexBox, Button } from '@/components'
+import { Checkbox } from '@/components/ui/checkbox'
+import SuccessPNG from '@/assets/icons-v3/send-success.png'
+import ArrowLeftIcon from '@/assets/icons-v3/arrow-left.svg'
+import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid'
+
+const { callback } = defineProps<{ callback?: Function }>()
+
+const error = ref()
+const password = ref()
+const checked = ref(false)
+const isCovered = ref(true)
+const confirmPassword = ref()
+const isConfirmCovered = ref(true)
+const passwordInputType = computed(() => (isCovered.value ? 'password' : 'text'))
+const passwordConfirmInputType = computed(() => (isConfirmCovered.value ? 'password' : 'text'))
+const btnDisabled = computed(
+  () => !checked.value || !password.value || password.value.length < 8 || !confirmPassword.value
+)
+
+const submit = async () => {
+  error.value = undefined
+  if (password.value.length < 8) {
+    error.value = 'Password must be at least 8 characters.'
+    return
+  }
+  if (password.value !== confirmPassword.value) {
+    error.value = 'Password does not match.'
+    return
+  }
+
+    await passwordManager.set(password.value)
+  callback && callback()
+}
+</script>
+
+<template>
+  <FlexBox ai="center" :gap="3">
+    <ArrowLeftIcon @click="$router.go(-1)" class="cursor-pointer" />
+    <div class="text-2xl font-medium">Create Password</div>
+  </FlexBox>
+  <p class="mt-2 text-sm text-gray-primary"
+    >This password only unlocks your Metalet wallet on this device. Metalet cannot recover it for you.</p
+  >
+  <FlexBox d="col" class="mt-9 gap-y-6">
+    <div class="space-y-2">
+      <!-- TODO: Identify password strength -->
+      <h4 class="mb-2 text-sm">New password (min. 8 characters)</h4>
+      <div class="relative">
+        <input
+          v-model="password"
+          :type="passwordInputType"
+          class="w-full rounded-md py-3.5 px-4 pr-5 border border-gray-soft focus:outline-none"
+        />
+        <div class="absolute right-0 top-0 flex h-full items-center pr-4">
+          <button class="" @click="isCovered = !isCovered">
+            <EyeIcon v-if="!isCovered" class="h-5 w-5 text-gray-400 transition hover:text-blue-500" />
+            <EyeSlashIcon v-else class="h-5 w-5 text-gray-400 transition hover:text-blue-500" />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="space-y-2">
+      <h4 class="mb-2 text-sm">Confirm password</h4>
+      <div class="relative">
+        <input
+          v-model="confirmPassword"
+          :type="passwordConfirmInputType"
+          class="w-full rounded-md py-3.5 px-4 pr-5 border border-gray-soft focus:outline-none"
+        />
+        <div class="absolute right-0 top-0 flex h-full items-center pr-4">
+          <button class="" @click="isConfirmCovered = !isConfirmCovered">
+            <EyeIcon v-if="!isConfirmCovered" class="h-5 w-5 text-gray-400 transition hover:text-blue-500" />
+            <EyeSlashIcon v-else class="h-5 w-5 text-gray-400 transition hover:text-blue-500" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </FlexBox>
+  <FlexBox d="col" ai="center" jc="center" class="mt-16" :gap="4">
+    <FlexBox ai="center" :gap="1.5">
+      <Checkbox id="terms" v-model:checked="checked" />
+      <span class="text-slate-light"
+        >I agree to Metlet's <a href="javascript:void(0)" class="text-blue-primary">Terms of use</a></span
+      ></FlexBox
+    >
+    <Button
+      type="primary"
+      @click="submit"
+      :disabled="btnDisabled"
+      :class="['w-61.5', btnDisabled ? 'opacity-50' : undefined]"
+      >Confirm</Button
+    >
+    <div class="mt-4 text-center text-sm text-red-500" v-if="error">{{ error }}</div>
+  </FlexBox>
+</template>
diff --git a/src/router.ts b/src/router.ts
index ea02488..b3a3df4 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -411,7 +411,14 @@ const router = VueRouter.createRouter({
   routes,
 })
 
-const authPages = ['/welcome', '/lock', '/accounts', '/wallet/create', '/wallet/import', '/migrateV2']
+const authPages = [
+  '/welcome',
+  '/welcome/import',
+  '/welcome/create',
+  '/lock',
+  '/accounts',
+  '/migrateV2',
+]
 
 router.beforeEach(async (to, _, next) => {
   if (to.fullPath !== '/lock' && (await storage.get('locked'))) {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 58639b9..ac1356a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -64,6 +64,7 @@ module.exports = {
       },
       margin: {
         15: '3.75rem',
+        26: '6.5rem',
       },
       padding: {
         7.5: '1.875rem',