diff --git a/addons/default/visiosoft/advs-module/resources/css/step.scss b/addons/default/visiosoft/advs-module/resources/css/step.scss
new file mode 100644
index 000000000..b898317a4
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/css/step.scss
@@ -0,0 +1,86 @@
+#stepProgressBar {
+  counter-reset: step;
+
+  .step  {
+    text-align:  center;
+    min-width: 0;
+
+    &.current {
+      &::after {
+        background: linear-gradient(to right, #209579 50%, #dfdfdf 50%);
+      }
+
+      .bullet {
+        color: #209579;
+        background-color: #fff;
+        border: .2rem solid #209579;
+        @media only screen and (min-width: 768px) {
+          border: .3rem solid #209579;
+        }
+      }
+
+      .step-text  {
+        font-weight: 500;
+      }
+
+      & ~ * {
+        &::after {
+          background-color: #dfdfdf;
+        }
+
+        .bullet {
+          color: #999;
+          background-color: #DFDFDF;
+        }
+      }
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      height: .16rem;
+      top: 0.96rem;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      background-color: #209579;
+      @media only screen and (min-width: 768px) {
+        height: .3rem;
+        top: 1.4rem;
+      }
+    }
+
+    .bullet {
+      height: 2rem;
+      width: 2rem;
+      border-radius: 100%;
+      color: #fff;
+      display: inline-block;
+      position: relative;
+      line-height: 20px;
+      background-color: #209579;
+      @media only screen and (min-width: 768px) {
+        height: 3rem;
+        width: 3rem;
+      }
+
+        &::before {
+        content: counter(step);
+        counter-increment: step;
+        font-size: 14px;
+        font-weight: 600;
+        @media only screen and (min-width: 768px) {
+          font-size: 20px;
+        }
+      }
+    }
+
+    .step-text  {
+      color: #999;
+      font-size: 12px;
+      @media only screen and (min-width: 768px) {
+        font-size: initial;
+      }
+    }
+  }
+}
diff --git a/addons/default/visiosoft/advs-module/resources/lang/en/field.php b/addons/default/visiosoft/advs-module/resources/lang/en/field.php
index 6fd4f4005..c3ec7489f 100644
--- a/addons/default/visiosoft/advs-module/resources/lang/en/field.php
+++ b/addons/default/visiosoft/advs-module/resources/lang/en/field.php
@@ -301,6 +301,10 @@ return [
 
     // New create page
     'options' => 'Options',
+    'category_selection' => 'Category Selection',
+    'listing_details' => 'Listing Details',
+    'preview' => 'Preview',
+    'congratulations' => 'Congratulations',
 
     'free' => 'Free',
     'ad_date' => 'Ad Date',
diff --git a/addons/default/visiosoft/advs-module/resources/views/new-ad/new-create.twig b/addons/default/visiosoft/advs-module/resources/views/new-ad/new-create.twig
index f8b2952e2..40a74f785 100644
--- a/addons/default/visiosoft/advs-module/resources/views/new-ad/new-create.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/new-ad/new-create.twig
@@ -2,6 +2,8 @@
 
 {% block content %}
     <section class="clearfix home-default">
+        {% include 'visiosoft.module.advs::new-ad/partials/steps' with {'step': 'new-create'} %}
+
         <div>
             <nav aria-label="breadcrumb">
                 <ol class="breadcrumb">
diff --git a/addons/default/visiosoft/advs-module/resources/views/new-ad/partials/steps.twig b/addons/default/visiosoft/advs-module/resources/views/new-ad/partials/steps.twig
new file mode 100644
index 000000000..92757a6ff
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/views/new-ad/partials/steps.twig
@@ -0,0 +1,33 @@
+<style>
+    {{ asset_inline("visiosoft.module.advs::css/step.scss") }}
+</style>
+
+<div id="stepProgressBar" class="mt-5 mb-4 row mx-0">
+    <div class="step col{{ step == 'post-cat' ? ' current' }}">
+        <div class="bullet d-flex align-items-center justify-content-center mx-auto"></div>
+        <p class="step-text text-truncate mb-0 mt-2 d-none d-sm-block">
+            {{ trans('visiosoft.module.advs::field.category_selection') }}
+        </p>
+    </div>
+    <div class="step col{{ step == 'new-create' ? ' current' }}">
+        <div class="bullet d-flex align-items-center justify-content-center mx-auto"></div>
+        <p class="step-text text-truncate mb-0 mt-2 d-none d-sm-block">
+            {{ trans('visiosoft.module.advs::field.listing_details') }}
+        </p>
+    </div>
+    <div class="step col{{ step == 'preview' ? ' current' }}">
+        <div class="bullet d-flex align-items-center justify-content-center mx-auto"></div>
+        <p class="step-text text-truncate mb-0 mt-2 d-none d-sm-block">
+            {{ trans('visiosoft.module.advs::field.preview') }}
+        </p>
+    </div>
+
+    {{ addBlock('new-ad/steps/step', {'step': step})|raw }}
+
+    <div class="step col">
+        <div class="bullet d-flex align-items-center justify-content-center mx-auto"></div>
+        <p class="step-text text-truncate mb-0 mt-2 d-none d-sm-block">
+            {{ trans('visiosoft.module.advs::field.congratulations') }}
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/addons/default/visiosoft/advs-module/resources/views/new-ad/post-cat.twig b/addons/default/visiosoft/advs-module/resources/views/new-ad/post-cat.twig
index 45666e944..330d1154c 100644
--- a/addons/default/visiosoft/advs-module/resources/views/new-ad/post-cat.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/new-ad/post-cat.twig
@@ -1,14 +1,19 @@
 {% extends layout('post-cat') %}
 
 {% block styles %}
-    {{ asset_style("visiosoft.module.advs::css/post-category.css") }}
+    <style>
+        {{ asset_inline("visiosoft.module.advs::css/post-category.css") }}
+    </style>
 {% endblock %}
 
 {% block content %}
     <section class="clearfix ad-post-page">
+        {% include 'visiosoft.module.advs::new-ad/partials/steps' with {'step': 'post-cat'} %}
+
         {% if setting_value('visiosoft.module.advs::show_breadcrumb_when_creating_ad') %}
             {% include "visiosoft.module.advs::new-ad/partials/breadcrumb" %}
         {% endif %}
+
         <div id="ad-cat-section" class="border rounded shadow-sm bg-light py-4 px-3">
             <h5 class="mb-3">
                 <img src="{{ img('visiosoft.module.advs::images/ascend.svg').url }}" class="step-icon mr-1">
diff --git a/addons/default/visiosoft/advs-module/resources/views/new-ad/preview/preview.twig b/addons/default/visiosoft/advs-module/resources/views/new-ad/preview/preview.twig
index f016f7040..a3a710cec 100644
--- a/addons/default/visiosoft/advs-module/resources/views/new-ad/preview/preview.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/new-ad/preview/preview.twig
@@ -1,6 +1,8 @@
 {% extends "theme::layouts/default" %}
 
 {% block content %}
+    {% include 'visiosoft.module.advs::new-ad/partials/steps' with {'step': 'preview'} %}
+
     <div class="pt-5">
         <p class="preview-paragraph">
             {{ trans('visiosoft.module.advs::field.preview_text.part_1') }}