diff --git a/WebDoorCreator.UI/Components/SvgComp/DoorSvgObj.razor b/WebDoorCreator.UI/Components/SvgComp/DoorSvgObj.razor
index 9cef7db..9a79579 100644
--- a/WebDoorCreator.UI/Components/SvgComp/DoorSvgObj.razor
+++ b/WebDoorCreator.UI/Components/SvgComp/DoorSvgObj.razor
@@ -1,14 +1,14 @@
 <svg viewBox="0 0 @ObjW @ObjH" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-    <rect x="0" y="0" width="100%" height="100%" fill="white" fill-opacity="0.1"></rect>
+    @*<rect x="0" y="0" width="100%" height="100%" fill="white" fill-opacity="0.1"></rect>*@
     <g transform="translate(0,@LineDist)">
         <foreignObject width="@TextAreaWidth" height="@TextAreaHeight">
             <div class="row" style="@TextStyle">
                 @foreach (var item in TextData)
                 {
-                    <div class="@LeftTextClass">
+                    <div class="">
                         @item.Key
                     </div>
-                    <div class="@RightTextClass text-end">
+                    <div class="text-end">
                         <b>@item.Value</b>
                     </div>
                 }
@@ -28,8 +28,8 @@
             <image x="@(CircleImg.rad/2)" y="0" href="@ImagePath" width="@CircleImg.rad" height="100%"></image>
             @if (ShowPlusMinus)
             {
-                <rect x="0" y="0" width="100%" height="50%" fill="@PlusColor" style="opacity: 20%;" @onclick="()=>execPlus()" />
-                <rect x="0" y="@(ObjH/2)" width="100%" height="50%" fill="@MinusColor" style="opacity: 20%;" @onclick="()=>execMinus()" />
+                <rect x="0" y="0" width="100%" height="50%" fill="@PlusColor" style="opacity: 20%;" />
+                <rect x="0" y="@(ObjH/2)" width="100%" height="50%" fill="@MinusColor" style="opacity: 20%;" />
             }
             else if (ShowClone)
             {
@@ -41,6 +41,8 @@
     @if (ShowPlusMinus)
     {
         <circle id="circleCont" cx="@CircleImg.cx" cy="@CircleImg.cy" r="@CircleImg.rad" fill="url(#@($"contImg_{ObjId}"))" style="cursor: pointer;" />
+        <rect x="@ClickArea.p1.px" y="0" width="@(ClickArea.p2.px-ClickArea.p1.px)" height="50%" fill="white" style="opacity: 0%;" @onclick="()=>execPlus()" />
+        <rect x="@ClickArea.p1.px" y="@(ObjH/2)" width="@(ClickArea.p2.px-ClickArea.p1.px)" height="50%" fill="white" style="opacity: 0%;" @onclick="()=>execMinus()" />
     }
     else if (ShowClone)
     {
diff --git a/WebDoorCreator.UI/Components/SvgComp/DoorSvgObj.razor.cs b/WebDoorCreator.UI/Components/SvgComp/DoorSvgObj.razor.cs
index 1b7aaf8..7f21997 100644
--- a/WebDoorCreator.UI/Components/SvgComp/DoorSvgObj.razor.cs
+++ b/WebDoorCreator.UI/Components/SvgComp/DoorSvgObj.razor.cs
@@ -71,6 +71,8 @@ namespace WebDoorCreator.UI.Components.SvgComp
 
         protected LineData BaseLine { get; set; } = null!;
 
+        protected LineData ClickArea { get; set; } = null!;
+
         protected CircleData CircleImg { get; set; } = null!;
 
         protected CircleData CircleLine { get; set; } = null!;
@@ -191,6 +193,7 @@ namespace WebDoorCreator.UI.Components.SvgComp
             CircleLine = new CircleData(ObjW - LineWidth - (ObjH / 2), ObjH / 2, (ObjH - LineWidth) / 2);
             CircleImg = new CircleData(ObjW - LineWidth - (ObjH / 2), ObjH / 2, (ObjH - 2 * LineWidth) / 2);
             BaseLine = new LineData(new PointData(0, ObjH - LineWidth / 2), new PointData(ObjW - LineWidth - (ObjH / 2), ObjH - LineWidth / 2));
+            ClickArea = new LineData(new PointData(ObjW - LineWidth - ObjH, 0), new PointData(ObjW, 0));
             LineDist = ObjH / 4;
         }
 
diff --git a/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor b/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor
new file mode 100644
index 0000000..bcdd3f8
--- /dev/null
+++ b/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor
@@ -0,0 +1,44 @@
+<svg viewBox="0 0 @ObjW @ObjH" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(0,@LineDist)">
+        <foreignObject width="@TextAreaWidth" height="100%">
+            <div class="d-flex justify-content-between rectangle p-3 @cardClass" style="@TextStyle" @onclick="()=>execFunc(false)">
+                <div>
+                    @ItemName
+                </div>
+                <div class="pe-4">
+                    @if (ItemCount > 0)
+                    {
+                        <b>@ItemCount</b>
+                    }
+                    else
+                    {
+                        <p>&nbsp;</p>
+                    }
+                </div>
+            </div>
+        </foreignObject>
+    </g>
+    <circle id="circleLine" cx="@CircleLine.cx" cy="@CircleLine.cy" r="@CircleLine.rad" stroke="@LineColor" stroke-width="@LineWidth" fill="blue" />
+    <defs>
+        <pattern id="@($"contImg_{ObjId}")" patternContentUnits="userSpaceOnUse" width="1" height="1">
+            <linearGradient id="BckGrad" x1="0" x2="0" y1="0" y2="1">
+                <stop offset="0%" stop-color="#AFCFD1" />
+                <stop offset="100%" stop-color="#92B2C4" />
+            </linearGradient>
+            <rect fill="url(#BckGrad)" x="0" y="0" height="100%" width="100%" style="opacity: 100%;"></rect>
+            <image x="@(CircleImg.rad/2)" y="0" href="@ImagePath" width="@CircleImg.rad" height="100%"></image>
+            @if (ShowPlus)
+            {
+                <rect x="0" y="0" width="100%" height="100%" fill="@PlusColor" style="opacity: 20%;"  />
+            }
+        </pattern>
+    </defs>
+    @if (ShowPlus)
+    {
+        <circle id="circleCont" cx="@CircleImg.cx" cy="@CircleImg.cy" r="@CircleImg.rad" fill="url(#@($"contImg_{ObjId}"))" style="cursor: pointer;" @onclick="()=>execPlus()" />
+    }
+    else
+    {
+        <circle id="circleCont" cx="@CircleImg.cx" cy="@CircleImg.cy" r="@CircleImg.rad" fill="url(#@($"contImg_{ObjId}"))" style="cursor: pointer;" @onclick="()=>execFunc(true)" />
+    }
+</svg>
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.cs b/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.cs
new file mode 100644
index 0000000..d5b65cf
--- /dev/null
+++ b/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.cs
@@ -0,0 +1,209 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using System.Net.Http;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Components.Authorization;
+using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.Web.Virtualization;
+using Microsoft.JSInterop;
+using WebDoorCreator.UI;
+using WebDoorCreator.UI.Components;
+using WebDoorCreator.UI.Components.Buttons;
+using WebDoorCreator.UI.Components.CompMan;
+using WebDoorCreator.UI.Components.DoorMan;
+using WebDoorCreator.UI.Components.DoorDef;
+using WebDoorCreator.UI.Components.Gen;
+using WebDoorCreator.UI.Components.Order;
+using WebDoorCreator.UI.Components.Users;
+using WebDoorCreator.UI.Components.Hardware;
+using WebDoorCreator.UI.Components.SvgComp;
+using WebDoorCreator.UI.Components.Filters;
+using WebDoorCreator.UI.Components.Report;
+using WebDoorCreator.UI.Shared;
+using WebDoorCreator.Data.DbModels;
+using EgwCoreLib.Razor;
+
+namespace WebDoorCreator.UI.Components.SvgComp
+{
+    public partial class HwSvgObj
+    {
+        #region Public Properties
+
+        [Parameter]
+        public EventCallback<bool> EC_ExeFunct { get; set; }
+
+        [Parameter]
+        public EventCallback<bool> EC_ExePlus { get; set; }
+
+        [Parameter]
+        public string ImagePath { get; set; } = "images/LogoEgw.png";
+
+        [Parameter]
+        public string LineColor { get; set; } = "#00838F";
+
+        [Parameter]
+        public int LineWidth { get; set; } = 8;
+
+        [Parameter]
+        public string ItemName { get; set; } = "";
+
+        [Parameter]
+        public int ItemCount { get; set; } = 0;
+
+
+        [Parameter]
+        public string PlusColor { get; set; } = "green";
+
+        [Parameter]
+        public int ObjH { get; set; } = 204;
+
+        [Parameter]
+        public int ObjId { get; set; } = 0;
+
+        [Parameter]
+        public int ObjW { get; set; } = 450;
+
+        [Parameter]
+        public bool ShowPlus { get; set; } = false;
+
+        [Parameter]
+        public string TextStyle { get; set; } = "font-size: 2.5em;";
+
+        #endregion Public Properties
+
+        #region Protected Properties
+
+
+        protected CircleData CircleImg { get; set; } = null!;
+
+        protected CircleData CircleLine { get; set; } = null!;
+
+        protected int LineDist { get; set; } = 20;
+
+        protected int TextAreaHeight
+        {
+            get => (ObjH / 2 * 110 / 100);
+        }
+
+        protected int TextAreaWidth
+        {
+            get => ObjW - (ObjH * 90 / 100);
+        }
+
+        protected string cardClass
+        {
+            get => ItemCount > 0 ? "bg-primary text-light" : "bg-inactive text-dark";
+        }
+
+        #endregion Protected Properties
+
+        #region Protected Methods
+
+        /// <summary>
+        /// Invia evento principale
+        /// </summary>
+        /// <param name="forceSend">se true manda sempre EC_ExeFunct, altrimenti NON invia se showPlus attivo...</param>
+        protected void execFunc(bool forceSend)
+        {
+            if (forceSend || !ShowPlus)
+            {
+                EC_ExeFunct.InvokeAsync(true);
+            }
+        }
+
+        protected void execPlus()
+        {
+            EC_ExePlus.InvokeAsync(true);
+        }
+
+        protected override void OnParametersSet()
+        {
+            setupGraphParams();
+        }
+
+        #endregion Protected Methods
+
+        #region Protected Classes
+
+        protected class CircleData
+        {
+            #region Public Constructors
+
+            public CircleData(int px, int py, int radius)
+            {
+                cx = px;
+                cy = py;
+                rad = radius;
+            }
+
+            #endregion Public Constructors
+
+            #region Public Properties
+
+            public int cx { get; set; } = 0;
+            public int cy { get; set; } = 0;
+            public int rad { get; set; } = 100;
+
+            #endregion Public Properties
+        }
+
+        protected class LineData
+        {
+            #region Public Constructors
+
+            public LineData(PointData pA, PointData pB)
+            {
+                p1 = pA;
+                p2 = pB;
+            }
+
+            #endregion Public Constructors
+
+            #region Public Properties
+
+            public PointData p1 { get; set; }
+            public PointData p2 { get; set; }
+
+            #endregion Public Properties
+        }
+
+        protected class PointData
+        {
+            #region Public Constructors
+
+            public PointData(int valx, int valy)
+            {
+                px = valx;
+                py = valy;
+            }
+
+            #endregion Public Constructors
+
+            #region Public Properties
+
+            public int px { get; set; } = 0;
+            public int py { get; set; } = 0;
+
+            #endregion Public Properties
+        }
+
+        #endregion Protected Classes
+
+        #region Private Methods
+
+        private void setupGraphParams()
+        {
+            // calcolo i dati del cerchi...
+            CircleLine = new CircleData(ObjW - LineWidth - (ObjH / 2), ObjH / 2, (ObjH - LineWidth) / 2);
+            CircleImg = new CircleData(ObjW - LineWidth - (ObjH / 2), ObjH / 2, (ObjH - 2 * LineWidth) / 2);
+            LineDist = ObjH / 4;
+        }
+
+        #endregion Private Methods
+    }
+}
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.css b/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.css
new file mode 100644
index 0000000..2434347
--- /dev/null
+++ b/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.css
@@ -0,0 +1,7 @@
+.rectangle {
+  border-radius: 1.2rem;
+  font-weight: bold;
+}
+.bg-inactive {
+  background-color: #CFD8DC;
+}
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.less b/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.less
new file mode 100644
index 0000000..d2f89a7
--- /dev/null
+++ b/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.less
@@ -0,0 +1,8 @@
+.rectangle {
+    border-radius: 1.2rem;
+    font-weight: bold;
+}
+
+.bg-inactive {
+    background-color: #CFD8DC;
+}
diff --git a/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.min.css b/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.min.css
new file mode 100644
index 0000000..f657e59
--- /dev/null
+++ b/WebDoorCreator.UI/Components/SvgComp/HwSvgObj.razor.min.css
@@ -0,0 +1 @@
+.rectangle{border-radius:1.2rem;font-weight:bold;}.bg-inactive{background-color:#cfd8dc;}
\ No newline at end of file
diff --git a/WebDoorCreator.UI/Pages/TestPage.razor b/WebDoorCreator.UI/Pages/TestPage.razor
index d9eac41..e2fcaca 100644
--- a/WebDoorCreator.UI/Pages/TestPage.razor
+++ b/WebDoorCreator.UI/Pages/TestPage.razor
@@ -15,12 +15,27 @@
     }
 </div>
 <div class="row my-2">
-    <div class="col-6">
+    <div class="col-3">
+    </div>
+    <div class="col-3">
         <DoorSvgObj LineColor="#8E44AD" LineWidth="8" ObjH="200" ObjW="900" LeftTextClass="col-10 fs-1 fw-bold" RightTextClass="col-2" EC_ExeFunct="@(()=> exeFun())" ObjId="1" TextData="@msgList" Message1="messaggio 1" Message2="messaggio 2" ImagePath="@svgUrl(196)"></DoorSvgObj>
     </div>
-    <div class="col-6">
+    <div class="col-3">
         <DoorSvgObj LineColor="#8E44AD" LineWidth="8" ObjH="200" ObjW="900" LeftTextClass="col-10 fs-1 fw-bold" RightTextClass="col-2" EC_ExeFunct="@(()=> exeFun())" ObjId="2" TextData="@msgList" Message1="messaggio 1" Message2="messaggio 2" ShowPlusMinus="true" ImagePath="@svgUrl(186)"></DoorSvgObj>
     </div>
+    <div class="col-3">
+    </div>
+</div>
+
+<div class="row my-2">
+    <div class="col-4">
+        <HwSvgObj LineColor="#CFD8DC" LineWidth="8" ObjH="200" ObjW="700" EC_ExeFunct="@(()=> exeFun())" ObjId="21" ItemName="Flush Pull" ItemCount="2" ImagePath="@svgUrl(196)"></HwSvgObj>
+    </div>
+    <div class="col-4">
+    </div>
+    <div class="col-4">
+        <HwSvgObj LineColor="#CFD8DC" LineWidth="8" ObjH="200" ObjW="700" EC_ExeFunct="@(()=> exeFun())" ObjId="22" ItemName="Hinge" ItemCount="0" ShowPlus="true" ImagePath="@svgUrl(186)"></HwSvgObj>
+    </div>
 </div>
 
 
@@ -28,7 +43,7 @@
     @for (int i = 183; i < 205; i++)
     {
         <div class="col-1 text-center border rounded-2 m-2" style="height:100%; background: linear-gradient(#AFCFD1, #92B2C4);">
-            <b>@i</b><br/>
+            <b>@i</b><br />
             <img width="80" height="80" src="@svgUrl(i)" />
         </div>
     }
diff --git a/WebDoorCreator.UI/compilerconfig.json b/WebDoorCreator.UI/compilerconfig.json
index eceb08e..b299ce6 100644
--- a/WebDoorCreator.UI/compilerconfig.json
+++ b/WebDoorCreator.UI/compilerconfig.json
@@ -70,5 +70,13 @@
   {
     "outputFile": "Components/Hardware/HardwareNewPanel.razor.css",
     "inputFile": "Components/Hardware/HardwareNewPanel.razor.less"
+  },
+  {
+    "outputFile": "Components/SvgComp/HwSvgObj.css",
+    "inputFile": "Components/SvgComp/HwSvgObj.less"
+  },
+  {
+    "outputFile": "Components/SvgComp/HwSvgObj.razor.css",
+    "inputFile": "Components/SvgComp/HwSvgObj.razor.less"
   }
 ]
\ No newline at end of file
diff --git a/WebDoorCreator.UI/temp/Conf.yaml b/WebDoorCreator.UI/temp/Conf.yaml
index 4ca811f..3d9e04d 100644
--- a/WebDoorCreator.UI/temp/Conf.yaml
+++ b/WebDoorCreator.UI/temp/Conf.yaml
@@ -12,7 +12,7 @@ order:
   project: 
   pO: 
   line: 
-date: 2023-05-16T00:00:00.0000000+02:00
+date: 2023-05-17T00:00:00.0000000+02:00
 piece: DO_1
 size:
   width: 33.8125