diff --git a/WebDoorCreator.UI/Components/DoorDef/StepsList.razor b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor
index 7206c45..e1dba8c 100644
--- a/WebDoorCreator.UI/Components/DoorDef/StepsList.razor
+++ b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor
@@ -1,5 +1,38 @@
-<div class="d-flex justify-content-between">
-    <div class="btn @doorCSS w-100" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Door)">Door</div>
-    <div class="btn @hwCSS w-100" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Hardware)">Hardware</div>
-    <div class="btn @reportCSS w-100" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Report)">Report</div>
+<div class="row bg-secondary text-light">
+    <div class="col-4 p-0 fs-3 d-flex justify-content-between" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Door)">
+        @if (DoorDefStep == Core.Enum.DoorDefStep.Door)
+        {
+            <div class="tail-left"></div>
+            <div class="@doorCSS flex-fill text-center">Door</div>
+            <div class="arrow-right"></div>
+        }
+        else
+        {
+            <div class="@doorCSS flex-fill text-center">Door</div>
+        }
+    </div>
+    <div class="col-4 p-0 fs-3 d-flex justify-content-between" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Hardware)">
+        @if (DoorDefStep == Core.Enum.DoorDefStep.Hardware)
+        {
+            <div class="tail-left"></div>
+            <div class="@hwCSS flex-fill text-center">Hardware</div>
+            <div class="arrow-right"></div>
+        }
+        else
+        {
+            <div class="@hwCSS flex-fill text-center">Hardware</div>
+        }
+    </div>
+    <div class="col-4 p-0 fs-3 d-flex justify-content-between" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Report)">
+        @if (DoorDefStep == Core.Enum.DoorDefStep.Report)
+        {
+            <div class="tail-left"></div>
+            <div class=" @reportCSS flex-fill text-center">Report</div>
+            <div class="arrow-right"></div>
+        }
+        else
+        {
+            <div class=" @reportCSS flex-fill text-center">Report</div>
+        }
+    </div>
 </div>
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.cs b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.cs
index 694a2ac..a513507 100644
--- a/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.cs
+++ b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.cs
@@ -10,30 +10,23 @@ namespace WebDoorCreator.UI.Components.DoorDef
         [Parameter]
         public EventCallback<Core.Enum.DoorDefStep> E_StepChanged { get; set; }
 
-        protected string doorCSS { get; set; } = "btn-secondary";
-        protected string hwCSS { get; set; } = "btn-secondary";
-        protected string reportCSS { get; set; } = "btn-secondary";
+        protected string doorCSS
+        {
+            get => DoorDefStep == Core.Enum.DoorDefStep.Door ? "bg-success" : "bg-secondary";
+        }
+        protected string hwCSS
+        {
+            get => DoorDefStep == Core.Enum.DoorDefStep.Hardware ? "bg-success" : "bg-secondary";
+        }
+        protected string reportCSS
+        {
+            get => DoorDefStep == Core.Enum.DoorDefStep.Report ? "bg-success" : "bg-secondary";
+        }
 
 
         protected override async Task OnParametersSetAsync()
         {
             await Task.Delay(1);
-
-            if(DoorDefStep == Core.Enum.DoorDefStep.Door)
-            {
-                doorCSS = "btn-success";
-            }
-            else if (DoorDefStep == Core.Enum.DoorDefStep.Hardware)
-            {
-                doorCSS = "btn-success";
-                hwCSS = "btn-success";
-            }
-            else if(DoorDefStep == Core.Enum.DoorDefStep.Report)
-            {
-                doorCSS = "btn-success";
-                hwCSS = "btn-success";
-                reportCSS = "btn-success";
-            }
         }
 
         protected async Task doChangeStep(Core.Enum.DoorDefStep actDoorDefStep)
diff --git a/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.css b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.css
new file mode 100644
index 0000000..4250bbd
--- /dev/null
+++ b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.css
@@ -0,0 +1,17 @@
+/*.arrowItem {
+    transform: skewX(20deg);
+}*/
+.arrow-right {
+  width: 0;
+  height: 0;
+  border-top: 25px solid transparent;
+  border-left: 30px solid #198754;
+  border-bottom: 25px solid transparent;
+}
+.tail-left {
+  width: 0;
+  height: 0;
+  border-top: 25px solid #198754;
+  border-left: 30px solid transparent;
+  border-bottom: 25px solid #198754;
+}
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.less b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.less
new file mode 100644
index 0000000..d657b52
--- /dev/null
+++ b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.less
@@ -0,0 +1,21 @@
+@bordL: 25px;
+@bordH: 30px;
+@itemColor: #198754;
+
+/*.arrowItem {
+    transform: skewX(20deg);
+}*/
+.arrow-right {
+    width: 0;
+    height: 0;
+    border-top: @bordL solid transparent;
+    border-left: @bordH solid @itemColor;
+    border-bottom: @bordL solid transparent;
+}
+.tail-left {
+    width: 0;
+    height: 0;
+    border-top: @bordL solid @itemColor;
+    border-left: @bordH solid transparent;
+    border-bottom: @bordL solid @itemColor;
+}
diff --git a/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.min.css b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.min.css
new file mode 100644
index 0000000..be84baa
--- /dev/null
+++ b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.min.css
@@ -0,0 +1 @@
+.arrow-right{width:0;height:0;border-top:25px solid transparent;border-left:30px solid #198754;border-bottom:25px solid transparent;}.tail-left{width:0;height:0;border-top:25px solid #198754;border-left:30px solid transparent;border-bottom:25px solid #198754;}
\ No newline at end of file
diff --git a/WebDoorCreator.UI/compilerconfig.json b/WebDoorCreator.UI/compilerconfig.json
index 2a96a61..84ca6a0 100644
--- a/WebDoorCreator.UI/compilerconfig.json
+++ b/WebDoorCreator.UI/compilerconfig.json
@@ -30,5 +30,9 @@
   {
     "outputFile": "Components/Hardware/HwSingleInstance.razor.css",
     "inputFile": "Components/Hardware/HwSingleInstance.razor.less"
+  },
+  {
+    "outputFile": "Components/DoorDef/StepsList.razor.css",
+    "inputFile": "Components/DoorDef/StepsList.razor.less"
   }
 ]
\ No newline at end of file