diff --git a/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor b/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor
new file mode 100644
index 0000000..df6f21a
--- /dev/null
+++ b/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor
@@ -0,0 +1,7 @@
+<svg width="@ObjW" height="@ObjH">
+    <rect width="@rectW" height="@rectH" style="@BlockStyle" transform="skewX(@step)" />
+    <g transform="translate(@step,@rectH)">
+        <rect width="@rectW" height="@rectH" style="@BlockStyle" transform="skewX(@(-step))" />
+    </g>
+    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="@TextStyle">@StepText</text>
+</svg>
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor.cs b/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor.cs
new file mode 100644
index 0000000..aba9c11
--- /dev/null
+++ b/WebDoorCreator.UI/Components/SvgComp/StepArrow.razor.cs
@@ -0,0 +1,49 @@
+using Microsoft.AspNetCore.Components;
+
+namespace WebDoorCreator.UI.Components.SvgComp
+{
+    public partial class StepArrow
+    {
+        #region Public Properties
+
+        [Parameter]
+        public int ObjH { get; set; } = 100;
+
+        [Parameter]
+        public int ObjId { get; set; } = 0;
+
+        [Parameter]
+        public int ObjW { get; set; } = 500;
+
+        [Parameter]
+        public string StepText { get; set; } = "Arrow Stepped";
+
+        [Parameter]
+        public string TextStyle { get; set; } = "font-size: 2.5em; font-weight:bold; fill: white;";
+
+
+        [Parameter]
+        public string BlockStyle { get; set; } = "fill:rgb(0,0,255);stroke-width:0;stroke:rgb(0,0,0);";
+
+        #endregion Public Properties
+
+        #region Protected Properties
+
+        protected int rectH
+        {
+            get => ObjH / 2;
+        }
+
+        protected int rectW
+        {
+            get => ObjW - ObjH / 2;
+        }
+
+        protected int step
+        {
+            get => ObjH / 3;
+        }
+
+        #endregion Protected Properties
+    }
+}
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Pages/TestPage.razor b/WebDoorCreator.UI/Pages/TestPage.razor
new file mode 100644
index 0000000..50570f8
--- /dev/null
+++ b/WebDoorCreator.UI/Pages/TestPage.razor
@@ -0,0 +1,40 @@
+@using WebDoorCreator.UI.Components.SvgComp
+@page "/TestPage"
+
+<h3>TestPage</h3>
+
+
+<div class="row">
+    @for (int i = 0; i < 6; i++)
+    {
+        stepText = $"Block_{idxObj:00}";
+        <div class="col-2">
+            <StepArrow ObjId="@idxObj" StepText="@stepText" BlockStyle="@blockStyle(idxObj)"></StepArrow>
+        </div>
+        idxObj++;
+    }
+</div>
+
+@code {
+    protected int idxObj { get; set; } = 1;
+    protected string stepText { get; set; } = "---";
+    protected string blockStyle(int idx)
+    {
+        string answ = "";
+        int resto = idx % 3;
+        switch (resto)
+        {
+            case 1:
+                answ = "fill:rgb(0,255,0);stroke-width:0;stroke:rgb(0,0,0);";
+                break;
+            case 2:
+                answ = "fill:rgb(0,0,255);stroke-width:0;stroke:rgb(0,0,0);";
+                break;
+            case 0:
+            default:
+                answ = "fill:rgb(255,0,0);stroke-width:0;stroke:rgb(0,0,0);";
+                break;
+        }
+        return answ;
+    }
+}