diff --git a/src/components/base/BaseStepper.vue b/src/components/base/BaseStepper.vue
new file mode 100644
index 0000000..248ba9a
--- /dev/null
+++ b/src/components/base/BaseStepper.vue
@@ -0,0 +1,54 @@
+<template lang="pug">
+  .wrap.flex
+    .step.flex(v-for="step in steps", :key="step.id" )
+      .line.flex.mx-2(v-if="step.id > 0", :class="{'filled': filled(step.id)}")
+      .step-num.flex.mx-2(:class="{'filled': filled(step.id)}")
+        .step-icon {{step.label}}
+      span.mx-2 {{step.value}}
+</template>
+
+<script>
+export default {
+  name: "BaseStepper",
+  data() {
+    return {};
+  },
+  props: {
+    steps: Array,
+    currentStep: {
+      type: Number,
+      default: 0,
+    },
+  },
+  methods: {
+    filled(id) {
+      return id <= this.currentStep;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.step
+  align-items: center
+.step-num
+  background-color: var(--btn-grey-color)
+  gap: 8px
+  padding: 0
+  border-radius: 50%
+  height: 32px
+  width: 32px
+  justify-content: center
+  align-items: center
+  &.filled
+    background-color: var(--btn-blue-color)
+    .step-icon
+      color: var(--default-white)
+
+.line
+  width: 78px
+  border: 1.5px solid var(--btn-grey-color)
+  &.filled
+    background-color: var(--btn-blue-color)
+    border-color: var(--btn-blue-color)
+</style>