diff --git a/WebDoorCreator.UI/Components/DoorDef/DoorDefOrderTopRow.razor b/WebDoorCreator.UI/Components/DoorDef/DoorDefOrderTopRow.razor
index 8d88929..36ebda0 100644
--- a/WebDoorCreator.UI/Components/DoorDef/DoorDefOrderTopRow.razor
+++ b/WebDoorCreator.UI/Components/DoorDef/DoorDefOrderTopRow.razor
@@ -1,6 +1,6 @@
 @if (currOrderStatus != null)
 {
-    <div class="d-flex justify-content-between">
+    <div class="d-flex justify-content-between p-2" style="background-color: @bgColor">
         <div>
             <div class="badge rounded-pilll bg-dark text-light">Insert Date</div>
             <div>@currOrderStatus.DateIns</div>
diff --git a/WebDoorCreator.UI/Components/DoorDef/DoorDefOrderTopRow.razor.cs b/WebDoorCreator.UI/Components/DoorDef/DoorDefOrderTopRow.razor.cs
index c6b3ef4..f7ec723 100644
--- a/WebDoorCreator.UI/Components/DoorDef/DoorDefOrderTopRow.razor.cs
+++ b/WebDoorCreator.UI/Components/DoorDef/DoorDefOrderTopRow.razor.cs
@@ -8,5 +8,8 @@ namespace WebDoorCreator.UI.Components.DoorDef
         [Parameter]
         public OrderStatusViewModel? currOrderStatus { get; set; } = null;
 
+        [Parameter]
+        public string bgColor { get; set; } = "";
+
     }
 }
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor b/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor
new file mode 100644
index 0000000..4721263
--- /dev/null
+++ b/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor
@@ -0,0 +1,28 @@
+@using Components.SvgComp
+
+<div class="containerAll row text-light" style="background-color: #34495E;">
+    @if (currListDoorDefStatus != null)
+    {
+        @foreach (var item in currListDoorDefStatus)
+        {
+
+            <div class="col px-0" @onclick="()=>changeStep(int.Parse(item.Value))">
+                @if (int.Parse(item.Value) == CurrDoorDefStatus)
+                {
+                    <WebDoorCreator.UI.Components.SvgComp.StepArrow ObjId="@int.Parse(item.Value)" StepText="@item.Label" BlockStyle="@($"fill:{item.DefaultVal};")" ObjW="650" ObjH="100"></WebDoorCreator.UI.Components.SvgComp.StepArrow>
+                }
+                else
+                {
+                    @if (int.Parse(item.Value) < CurrDoorDefStatus)
+                    {
+                        <WebDoorCreator.UI.Components.SvgComp.StepArrow ObjId="@int.Parse(item.Value)" StepText="@($"{item.Label} ✓")" BlockStyle="@($"fill:{item.DefaultVal};")" ObjW="650" ObjH="100"></WebDoorCreator.UI.Components.SvgComp.StepArrow>
+                    }
+                    else
+                    {
+                        <WebDoorCreator.UI.Components.SvgComp.StepArrow ObjId="@int.Parse(item.Value)" StepText="@item.Label" BlockStyle="@($"fill:transparent;")" ObjW="650" ObjH="100"></WebDoorCreator.UI.Components.SvgComp.StepArrow>
+                    }
+                }
+            </div>
+        }
+    }
+</div>
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.cs b/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.cs
new file mode 100644
index 0000000..c301f5b
--- /dev/null
+++ b/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.cs
@@ -0,0 +1,58 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
+using WebDoorCreator.Data.DbModels;
+using WebDoorCreator.UI.Data;
+
+namespace WebDoorCreator.UI.Components.DoorDef
+{
+    public partial class DoorDefStepList
+    {
+
+        [Inject]
+        protected WebDoorCreatorService WDService { get; set; } = null!;
+
+        [Parameter]
+        public int CurrDoorDefStatus { get; set; } = 10;
+
+        [Parameter]
+        public EventCallback<int> E_CurrStep { get; set; }
+
+        protected override async Task OnParametersSetAsync()
+        {
+            await Task.Delay(1);
+        }
+
+        protected async Task doChangeStep(string actDoorDefStep)
+        {
+            await Task.Delay(1);
+
+            //await E_StepChanged.InvokeAsync(actDoorDefStep);
+        }
+
+        protected List<ListValuesModel>? currListDoorDefStatus { get; set; } = null;
+        protected string currColor { get; set; } = "";
+
+        protected override async Task OnInitializedAsync()
+        {
+            await Task.Delay(1);
+            currListDoorDefStatus = await WDService.ListValuesGetAll("All", "DoorDefStep");
+
+            if (currListDoorDefStatus != null)
+            {
+                var stat2Display = currListDoorDefStatus.Where(x => x.Value == CurrDoorDefStatus.ToString()).FirstOrDefault();
+                if (stat2Display != null)
+                {
+                    currColor = stat2Display.DefaultVal;
+
+                }
+            }
+        }
+
+        protected async Task changeStep(int step)
+        {
+            await E_CurrStep.InvokeAsync(step);
+            StateHasChanged();
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.css b/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.css
new file mode 100644
index 0000000..b098677
--- /dev/null
+++ b/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.css
@@ -0,0 +1,23 @@
+/*.arrowItem {
+    transform: skewX(20deg);
+}*/
+.button2Click {
+  background-color: var(--itemColor);
+}
+.arrow-right {
+  width: 0;
+  height: 0;
+  border-top: 25px solid transparent;
+  border-left: 30px solid var(--itemColor);
+  border-bottom: 25px solid transparent;
+}
+.tail-left {
+  width: 0;
+  height: 0;
+  border-top: 25px solid var(--itemColor);
+  border-left: 30px solid transparent;
+  border-bottom: 25px solid var(--itemColor);
+}
+.containerAll {
+  border-radius: 0.3rem;
+}
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.less b/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.less
new file mode 100644
index 0000000..d634fe9
--- /dev/null
+++ b/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.less
@@ -0,0 +1,31 @@
+@bordL: 25px;
+@bordH: 30px;
+
+
+/*.arrowItem {
+    transform: skewX(20deg);
+}*/
+
+.button2Click{
+    background-color: var(--itemColor);
+}
+
+.arrow-right {
+    width: 0;
+    height: 0;
+    border-top: @bordL solid transparent;
+    border-left: @bordH solid var(--itemColor);
+    border-bottom: @bordL solid transparent;
+}
+
+.tail-left {
+    width: 0;
+    height: 0;
+    border-top: @bordL solid var(--itemColor);
+    border-left: @bordH solid transparent;
+    border-bottom: @bordL solid var(--itemColor);
+}
+
+.containerAll{
+    border-radius: 0.3rem;
+}
diff --git a/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.min.css b/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.min.css
new file mode 100644
index 0000000..eae86cf
--- /dev/null
+++ b/WebDoorCreator.UI/Components/DoorDef/DoorDefStepList.razor.min.css
@@ -0,0 +1 @@
+.button2Click{background-color:var(--itemColor);}.arrow-right{width:0;height:0;border-top:25px solid transparent;border-left:30px solid var(--itemColor);border-bottom:25px solid transparent;}.tail-left{width:0;height:0;border-top:25px solid var(--itemColor);border-left:30px solid transparent;border-bottom:25px solid var(--itemColor);}.containerAll{border-radius:.3rem;}
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/DoorDef/DoorPreview.razor b/WebDoorCreator.UI/Components/DoorDef/DoorPreview.razor
index a21cf31..64c0640 100644
--- a/WebDoorCreator.UI/Components/DoorDef/DoorPreview.razor
+++ b/WebDoorCreator.UI/Components/DoorDef/DoorPreview.razor
@@ -1,4 +1,4 @@
-<div class="bg-secondary" style="min-height:45rem; min-width:45rem; position:fixed;">
+<div class="bg-secondary" style="height:100%; width:100%; position:sticky;">
     @if (!string.IsNullOrEmpty(@SvgContent))
     {
         @svgPreview
diff --git a/WebDoorCreator.UI/Components/DoorDef/StepsList.razor b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor
index e1dba8c..ec83315 100644
--- a/WebDoorCreator.UI/Components/DoorDef/StepsList.razor
+++ b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor
@@ -1,4 +1,4 @@
-<div class="row bg-secondary text-light">
+@*<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)
         {
@@ -35,4 +35,4 @@
             <div class=" @reportCSS flex-fill text-center">Report</div>
         }
     </div>
-</div>
\ No newline at end of file
+</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 a513507..edc96bc 100644
--- a/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.cs
+++ b/WebDoorCreator.UI/Components/DoorDef/StepsList.razor.cs
@@ -10,18 +10,18 @@ namespace WebDoorCreator.UI.Components.DoorDef
         [Parameter]
         public EventCallback<Core.Enum.DoorDefStep> E_StepChanged { get; set; }
 
-        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 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()
@@ -35,5 +35,7 @@ namespace WebDoorCreator.UI.Components.DoorDef
 
             await E_StepChanged.InvokeAsync(actDoorDefStep);
         }
+
+
     }
 }
\ No newline at end of file