diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 1b8faac1521345513353e96050dd24d94610d432..2adf6a996400727b81b568a3d3d81c4073e43e90 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,20 +1,43 @@
 <script setup>
+
+import { ref } from 'vue'
+
 defineProps({
   msg: {
     type: String,
     required: true
   }
 })
+
+
+const active = ref(0)
+const activeName = ref("1")
+
+const next = () => {
+  if (active.value++ > 2) active.value = 3
+  activeName.value = ""+active.value;
+  console.log();
+}
+const prev = () => {
+  if (active.value-- < 0) active.value = 1
+  activeName.value = ""+active.value;
+}
 </script>
 
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
+  <div>
+    <el-button style="margin-top: 12px" @click="prev">Prev step</el-button>
+    <el-steps :active="active" finish-status="success">
+    <el-step title="Step 1" >asdasd</el-step>
+    <el-step title="Step 2" />
+    <el-step title="Step 3" />
+  </el-steps>
+  <el-button style="margin-top: 12px" @click="next">Next step</el-button>
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="1" name="1">User</el-tab-pane>
+    <el-tab-pane label="2" name="2">Config</el-tab-pane>
+    <el-tab-pane label="3" name="3">Role</el-tab-pane>
+  </el-tabs>
   </div>
 </template>