diff --git a/WebWindowComplex/Compo/AreaSash.razor b/WebWindowComplex/Compo/AreaSash.razor
index 68d18e5..5e153d5 100644
--- a/WebWindowComplex/Compo/AreaSash.razor
+++ b/WebWindowComplex/Compo/AreaSash.razor
@@ -54,6 +54,7 @@
                         <div class="dropdown" @onfocusout="HandleFocusOut" tabindex="0">
                             <button class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center gap-2"
                                     type="button"
+                                    style="background-color: @(isOpenDropdown ? "#f8f9fa" : "#ffffff"); color: @(isOpenDropdown ? "#333333" : "");"
                                     @onclick="ToggleDropdownOpening"
                                     aria-expanded="@isOpenDropdown">
                                 <span class="d-flex align-items-center">
@@ -68,6 +69,7 @@
                                         <div class="col p-0">
                                             <button type="button"
                                                     class="dropdown-item d-flex flex-column align-items-center justify-content-center p-2 rounded text-center h-100 @ButtonOpeningCss(openingType.Id)"
+                                                    style="background-color: @(OpeningTypeIndex == openingType.Id ? "#d4e6fa" : "#f8f9fa");"
                                                     @onclick="() => SelOpeningSash(openingType.Id, openingType.Name)">
                                                 <img class="img-fluid" src="@GetImageOpeningPath(openingType.Name)"
                                                      title="@(openingType.Name)" width="100" />
diff --git a/WebWindowComplex/Compo/CardFrame.razor b/WebWindowComplex/Compo/CardFrame.razor
index 7b49e88..3b69032 100644
--- a/WebWindowComplex/Compo/CardFrame.razor
+++ b/WebWindowComplex/Compo/CardFrame.razor
@@ -30,17 +30,17 @@
                         @foreach (var i in CurrFrameWindow.ShapeList)
                         {
                             <div class="col-auto">
-                                <button type="button" class="btn @ButtonShapeCss(i.Id) shadow-sm mx-1 px-1 py-1" @onclick="() => SelShapeFrame(i.Id)">
+                                <button type="button" class="btn-icone @ButtonShapeCss(i.Id) mx-1 px-1 py-1" @onclick="() => SelShapeFrame(i.Id)">
                                     <img class="img-fluid" src="@GetImageShapePath(i.Name)" title="@(i.Name)" width="40" />
                                 </button>
                             </div>
                             @* <div class="col-auto">
                                 <button type="button" @onclick="() => SelShapeFrame(i.Id)"
                                     class="btn btn-light mx-1 px-1 py-1"
-                                    style="border-width: @(SelShapeIndex == i.Id ? 3 : 1)px; 
+                                    style="border-width: @(SelShapeIndex == i.Id ? 4 : 1)px; 
                                            border-style: solid; 
                                            border-color: @(SelShapeIndex == i.Id ? "#0d6efd" : "#dee2e6");">
-                                    <img class="img-fluid" src="@GetImagePath(i.Name)" alt="@(i.Name)" width="40" />
+                                    <img class="img-fluid" src="@GetImageShapePath(i.Name)" title="@(i.Name)" width="40" />
                                 </button>
                             </div> *@
                         }
diff --git a/WebWindowComplex/Compo/CardFrame.razor.css b/WebWindowComplex/Compo/CardFrame.razor.css
new file mode 100644
index 0000000..5d3fc50
--- /dev/null
+++ b/WebWindowComplex/Compo/CardFrame.razor.css
@@ -0,0 +1,43 @@
+/* Palette Colori: Bianco, Grigio Tenue, Azzurro e Blu */
+
+/* Stato Normale (Non Attivo) */
+.btn-icone {
+    background-color: #ffffff;
+    border: 2px solid #d1d5db; /* Bordo grigio tenue di media visibilità */
+    box-shadow: 0 4px 12px rgba(212, 230, 250, 0.8); /* Ombra azzurra delicata */
+    font-weight: 600;
+    padding: 10px 22px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.2s ease, background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
+}
+
+    /* Hover (Passaggio del mouse - si applica in tutti gli stati) */
+    .btn-icone:hover {
+        transform: scale(1.08); /* Ingrandimento del bottone */
+        border-color: #9ca3af; /* Bordo grigio leggermente più nitido all'hover */
+        box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35); /* Ombra blu leggermente più intensa */
+    }
+
+    /* Stato Attivo (Selezionato) */
+    .btn-icone.active {
+        background-color: #ffffff; /* Sfondo bianco */
+        border: 3px solid #a6ccf5; /* Bordo azzurro */
+        box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
+    }
+
+        /* Hover specifico quando il bottone è Attivo */
+        .btn-icone.active:hover {
+            transform: scale(1.08);
+            background-color: #ffffff; /* Azzurro leggermente più carico al passaggio */
+            border-color: #a6ccf5; /* Sottile affinamento del bordo */
+            box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
+        }
+
+        /* Effetto Pressione al Click (Mouse premuto) */
+        .btn-icone:active,
+        .btn-icone.active:active {
+            transform: scale(0.96) translateY(2px);
+            box-shadow: 0 2px 4px rgba(212, 230, 250, 0.15);
+            transition: transform 0.05s ease, box-shadow 0.05s ease;
+        }
diff --git a/WebWindowComplex/Compo/CardSashGroup.razor b/WebWindowComplex/Compo/CardSashGroup.razor
index def183e..270e4bf 100644
--- a/WebWindowComplex/Compo/CardSashGroup.razor
+++ b/WebWindowComplex/Compo/CardSashGroup.razor
@@ -38,18 +38,21 @@
                     <div class="row">
                         @foreach (var i in CurrSashGroup.OrientationSashTypeList)
                         {
+                            @* <div class="col-auto">
+                                <button type="button" @onclick="() => SelTipologySash(i.Id)"
+                                        class="btn mx-1 px-1 py-1"
+                                        style="border-width: @(OrientationSashTypeIndex == i.Id ? 4 : 1)px;
+                                               border-style: solid;
+                                               border-color: @(OrientationSashTypeIndex == i.Id ? "#0d6efd" : "#dee2e6");">
+                                    <img class="img-fluid" src="@GetImageTipologyPath(i.Name)" title="@(i.Name)" width="40" />
+                                </button>
+                            </div> *@
                             <div class="col-auto">
-                                <button type="button" class="btn @ButtonTipologyCss(i.Id) shadow-sm mx-1 px-1 py-1" @onclick="() => SelTipologySash(i.Id)">
+                                <button type="button"
+                                    class="btn-icone @ButtonTipologyCss(i.Id) mx-1 px-1 py-1" @onclick="() => SelTipologySash(i.Id)">
                                     <img class="img-fluid" src="@GetImageTipologyPath(i.Name)" title="@(i.Name)" width="40" />
                                 </button>
                             </div>
-                            @* <label class="input-group-text">Tipology</label>
-                                <select class="form-select" @bind="@OrientationSashTypeIndex">
-                                    @foreach (var orientationSash in CurrSashGroup.OrientationSashTypeList)
-                                    {
-                                        <option value="@(orientationSash.Id)">@(orientationSash.Name)</option>
-                                    }
-                                </select> *@
                         }
                     </div>
                 }
@@ -174,55 +177,6 @@
                     <option value="1">Glass</option>
                 </select>
             </div>
-            @* <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#MeasureSettingModal">
-                <i class="fa-solid fa-gear"></i>
-            </button>
-            <div class="modal fade" id="MeasureSettingModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
-                <div class="modal-dialog modal-dialog-centered">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h1 class="modal-title fs-5" id="staticBackdropLabel">Measure settings</h1>
-                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                        </div>
-                        <div class="modal-body">
-                            <div class="d-flex justify-content-between align-items-center pb-2">
-                                <div class="col-md-6 px-2">
-                                    <select class="form-select" @bind="@MeasureType">
-                                        <option value="@MeasureTypes.ABSOLUTE">Absolute (mm)</option>
-                                        <option value="@MeasureTypes.PROPORTIONAL">Proportional (*)</option>
-                                        <option value="@MeasureTypes.PERCENTAGE">Percentage (%)</option>
-                                    </select>
-                                </div>
-                                <div class="col-md-6 px-2">
-                                    <select class="form-select" @bind="@ChangeType">
-                                        <option value="0">Sash</option>
-                                        <option value="1">Glass</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div> *@
-            @* <div class="dropdown px-4">
-                <button class="btn btn-outline-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown">
-                    Unità misura
-                </button>
-                <ul class="dropdown-menu" style="min-width:5rem; max-width:10rem">
-                    <li><button class="@MeasureTypeCss(MeasureTypes.ABSOLUTE)" @onclick="() => SetMeasureType(MeasureTypes.ABSOLUTE)">Absolute</button></li>
-                    <li><button class="@MeasureTypeCss(MeasureTypes.ABSOLUTE)" @onclick="() => SetMeasureType(MeasureTypes.PROPORTIONAL)">Proportional</button></li>
-                    <li><button class="@MeasureTypeCss(MeasureTypes.ABSOLUTE)" @onclick="() => SetMeasureType(MeasureTypes.PERCENTAGE)">Percentage</button></li>
-                </ul>
-            </div> *@
-           @*  <div class="dropdown">
-                <button class="btn btn-outline-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown">
-                    Measure type
-                </button>
-                <ul class="dropdown-menu" style="min-width:7rem; max-width:10rem">
-                    <li><button class="@TypeDimensionCss(false)" @onclick="() => ChangeTypeDimension(false)">Sash</button></li>
-                    <li><button class="@TypeDimensionCss(true)" @onclick="() => ChangeTypeDimension(true)">Glass</button></li>
-                </ul>
-            </div> *@
         </div>
         @for (int i = 0; i < CurrSashGroup.SashList.Count; i++)
         {
diff --git a/WebWindowComplex/Compo/CardSashGroup.razor.css b/WebWindowComplex/Compo/CardSashGroup.razor.css
new file mode 100644
index 0000000..5d3fc50
--- /dev/null
+++ b/WebWindowComplex/Compo/CardSashGroup.razor.css
@@ -0,0 +1,43 @@
+/* Palette Colori: Bianco, Grigio Tenue, Azzurro e Blu */
+
+/* Stato Normale (Non Attivo) */
+.btn-icone {
+    background-color: #ffffff;
+    border: 2px solid #d1d5db; /* Bordo grigio tenue di media visibilità */
+    box-shadow: 0 4px 12px rgba(212, 230, 250, 0.8); /* Ombra azzurra delicata */
+    font-weight: 600;
+    padding: 10px 22px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.2s ease, background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
+}
+
+    /* Hover (Passaggio del mouse - si applica in tutti gli stati) */
+    .btn-icone:hover {
+        transform: scale(1.08); /* Ingrandimento del bottone */
+        border-color: #9ca3af; /* Bordo grigio leggermente più nitido all'hover */
+        box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35); /* Ombra blu leggermente più intensa */
+    }
+
+    /* Stato Attivo (Selezionato) */
+    .btn-icone.active {
+        background-color: #ffffff; /* Sfondo bianco */
+        border: 3px solid #a6ccf5; /* Bordo azzurro */
+        box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
+    }
+
+        /* Hover specifico quando il bottone è Attivo */
+        .btn-icone.active:hover {
+            transform: scale(1.08);
+            background-color: #ffffff; /* Azzurro leggermente più carico al passaggio */
+            border-color: #a6ccf5; /* Sottile affinamento del bordo */
+            box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
+        }
+
+        /* Effetto Pressione al Click (Mouse premuto) */
+        .btn-icone:active,
+        .btn-icone.active:active {
+            transform: scale(0.96) translateY(2px);
+            box-shadow: 0 2px 4px rgba(212, 230, 250, 0.15);
+            transition: transform 0.05s ease, box-shadow 0.05s ease;
+        }
diff --git a/WebWindowComplex/Compo/CardSplit.razor b/WebWindowComplex/Compo/CardSplit.razor
index ae61036..42e58dc 100644
--- a/WebWindowComplex/Compo/CardSplit.razor
+++ b/WebWindowComplex/Compo/CardSplit.razor
@@ -58,8 +58,17 @@
                     <div class="row align-items-center">
                         @foreach (var i in CurrSplit.SplitShapeList)
                         {
+                            @* <div class="col-auto">
+                                <button type="button" @onclick="() => SelShapeSplit(i.Id)"
+                                        class="btn mx-1 px-1 py-1"
+                                        style="border-width: @(SplitShapeIndex == i.Id ? 4 : 1)px;
+                                                       border-style: solid;
+                                                               border-color: @(SplitShapeIndex == i.Id ? "#0d6efd" : "#dee2e6");">
+                                    <img class="img-fluid" src="@GetImageShapePath(i.Name)" title="@(i.Name)" width="40" />
+                                </button>
+                            </div> *@
                             <div class="col-auto">
-                                <button type="button" class="btn @ButtonShapeCss(i.Id) shadow-sm mx-1 px-1 py-1" @onclick="() => SelShapeSplit(i.Id)">
+                                <button type="button" class="btn-icone @ButtonShapeCss(i.Id) mx-1 px-1 py-1" @onclick="() => SelShapeSplit(i.Id)">
                                     <img class="img-fluid" src="@GetImageShapePath(i.Name)" title="@(i.Name)" width="40" />
                                 </button>
                             </div>
diff --git a/WebWindowComplex/Compo/CardSplit.razor.css b/WebWindowComplex/Compo/CardSplit.razor.css
new file mode 100644
index 0000000..5d3fc50
--- /dev/null
+++ b/WebWindowComplex/Compo/CardSplit.razor.css
@@ -0,0 +1,43 @@
+/* Palette Colori: Bianco, Grigio Tenue, Azzurro e Blu */
+
+/* Stato Normale (Non Attivo) */
+.btn-icone {
+    background-color: #ffffff;
+    border: 2px solid #d1d5db; /* Bordo grigio tenue di media visibilità */
+    box-shadow: 0 4px 12px rgba(212, 230, 250, 0.8); /* Ombra azzurra delicata */
+    font-weight: 600;
+    padding: 10px 22px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.2s ease, background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
+}
+
+    /* Hover (Passaggio del mouse - si applica in tutti gli stati) */
+    .btn-icone:hover {
+        transform: scale(1.08); /* Ingrandimento del bottone */
+        border-color: #9ca3af; /* Bordo grigio leggermente più nitido all'hover */
+        box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35); /* Ombra blu leggermente più intensa */
+    }
+
+    /* Stato Attivo (Selezionato) */
+    .btn-icone.active {
+        background-color: #ffffff; /* Sfondo bianco */
+        border: 3px solid #a6ccf5; /* Bordo azzurro */
+        box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
+    }
+
+        /* Hover specifico quando il bottone è Attivo */
+        .btn-icone.active:hover {
+            transform: scale(1.08);
+            background-color: #ffffff; /* Azzurro leggermente più carico al passaggio */
+            border-color: #a6ccf5; /* Sottile affinamento del bordo */
+            box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);
+        }
+
+        /* Effetto Pressione al Click (Mouse premuto) */
+        .btn-icone:active,
+        .btn-icone.active:active {
+            transform: scale(0.96) translateY(2px);
+            box-shadow: 0 2px 4px rgba(212, 230, 250, 0.15);
+            transition: transform 0.05s ease, box-shadow 0.05s ease;
+        }
diff --git a/WebWindowComplex/Models/Frame.cs b/WebWindowComplex/Models/Frame.cs
index 26067be..a93bbef 100644
--- a/WebWindowComplex/Models/Frame.cs
+++ b/WebWindowComplex/Models/Frame.cs
@@ -771,13 +771,13 @@ namespace WebWindowComplex.Models
         private List<IdNameStruct> m_ShapeList = new List<IdNameStruct>
         {
             new IdNameStruct((int)Shapes.RECTANGLE, "Rectangle"),
-                new IdNameStruct((int)Shapes.RIGHTCHAMFER, "Right Chamfer"),
-                new IdNameStruct((int)Shapes.LEFTCHAMFER, "Left Chamfer"),
-                new IdNameStruct((int)Shapes.DOUBLECHAMFER, "Double Chamfer"),
+                new IdNameStruct((int)Shapes.RIGHTCHAMFER, "RightChamfer"),
+                new IdNameStruct((int)Shapes.LEFTCHAMFER, "LeftChamfer"),
+                new IdNameStruct((int)Shapes.DOUBLECHAMFER, "DoubleChamfer"),
                 new IdNameStruct((int)Shapes.ARC, "Arc"),
-                new IdNameStruct((int)Shapes.ARC_FULL, "Arc Full"),
-                new IdNameStruct((int)Shapes.DOUBLEARC, "Double Arc"),
-                new IdNameStruct((int)Shapes.THREECENTERARC, "Three Center Arc"),
+                new IdNameStruct((int)Shapes.ARC_FULL, "ArcFull"),
+                new IdNameStruct((int)Shapes.DOUBLEARC, "DoubleArc"),
+                new IdNameStruct((int)Shapes.THREECENTERARC, "ThreeCenterArc"),
                 new IdNameStruct((int)Shapes.TRIANGLE, "Triangle")
         };
 
diff --git a/WebWindowComplex/WebWindowComplex.csproj b/WebWindowComplex/WebWindowComplex.csproj
index aeecff1..fe1483f 100644
--- a/WebWindowComplex/WebWindowComplex.csproj
+++ b/WebWindowComplex/WebWindowComplex.csproj
@@ -6,7 +6,7 @@
     <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <Version>3.1.8.517</Version>
+    <Version>3.1.8.717</Version>
     <Authors>Annamaria Sassi</Authors>
     <Company>Egalware</Company>
     <Description>Componente gestione Configurazioni avanzate Window per LUX</Description>
@@ -60,6 +60,33 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
diff --git a/WebWindowComplex/wwwroot/icone/frame/shape/Arc Full.svg b/WebWindowComplex/wwwroot/icone/frame/shape/ArcFull.svg
similarity index 100%
rename from WebWindowComplex/wwwroot/icone/frame/shape/Arc Full.svg
rename to WebWindowComplex/wwwroot/icone/frame/shape/ArcFull.svg
diff --git a/WebWindowComplex/wwwroot/icone/frame/shape/Double Arc.svg b/WebWindowComplex/wwwroot/icone/frame/shape/DoubleArc.svg
similarity index 100%
rename from WebWindowComplex/wwwroot/icone/frame/shape/Double Arc.svg
rename to WebWindowComplex/wwwroot/icone/frame/shape/DoubleArc.svg
diff --git a/WebWindowComplex/wwwroot/icone/frame/shape/Double Chamfer.svg b/WebWindowComplex/wwwroot/icone/frame/shape/DoubleChamfer.svg
similarity index 100%
rename from WebWindowComplex/wwwroot/icone/frame/shape/Double Chamfer.svg
rename to WebWindowComplex/wwwroot/icone/frame/shape/DoubleChamfer.svg
diff --git a/WebWindowComplex/wwwroot/icone/frame/shape/Left Chamfer.svg b/WebWindowComplex/wwwroot/icone/frame/shape/LeftChamfer.svg
similarity index 100%
rename from WebWindowComplex/wwwroot/icone/frame/shape/Left Chamfer.svg
rename to WebWindowComplex/wwwroot/icone/frame/shape/LeftChamfer.svg
diff --git a/WebWindowComplex/wwwroot/icone/frame/shape/Right Chamfer.svg b/WebWindowComplex/wwwroot/icone/frame/shape/RightChamfer.svg
similarity index 100%
rename from WebWindowComplex/wwwroot/icone/frame/shape/Right Chamfer.svg
rename to WebWindowComplex/wwwroot/icone/frame/shape/RightChamfer.svg
diff --git a/WebWindowComplex/wwwroot/icone/frame/shape/Three Center Arc.svg b/WebWindowComplex/wwwroot/icone/frame/shape/ThreeCenterArc.svg
similarity index 100%
rename from WebWindowComplex/wwwroot/icone/frame/shape/Three Center Arc.svg
rename to WebWindowComplex/wwwroot/icone/frame/shape/ThreeCenterArc.svg
diff --git a/WebWindowConfigurator/WebWindowConfigurator.csproj b/WebWindowConfigurator/WebWindowConfigurator.csproj
index 8d3c7e7..0fcc369 100644
--- a/WebWindowConfigurator/WebWindowConfigurator.csproj
+++ b/WebWindowConfigurator/WebWindowConfigurator.csproj
@@ -6,7 +6,7 @@
         <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
-        <Version>3.1.8.517</Version>
+        <Version>3.1.8.717</Version>
         <Authors>Annamaria Sassi</Authors>
         <Company>Egalware</Company>
         <Description>Componente gestione JWD per LUX</Description>
@@ -354,6 +354,13 @@
 
 
 
+
+
+
+
+
+
+