diff --git a/src/Cropper.Blazor/Client/Components/AspectRatioSettings.razor b/src/Cropper.Blazor/Client/Components/AspectRatioSettings.razor
index 001d653f..1dc9d5df 100644
--- a/src/Cropper.Blazor/Client/Components/AspectRatioSettings.razor
+++ b/src/Cropper.Blazor/Client/Components/AspectRatioSettings.razor
@@ -1,4 +1,4 @@
-<MudCard Class="d-flex justify-space-between flex-column mb-6 mud-height-full">
+<MudCard Class="mud-height-full">
     <MudCardHeader Class="border-solid border-b mud-border-lines-default">
         <CardHeaderContent>
             <div class="d-flex flex-column gap-2">
@@ -22,7 +22,7 @@
             <MudChip Variant="Variant.Outlined" Color="Color.Primary" Class="flex-1 ma-0 mt-4">
                 Current aspect ratio:
             </MudChip>
-            <MudNumericField @bind-Value="AspectRatio" Format="N2" Variant="Variant.Text"
+            <MudNumericField @bind-Value="AspectRatio" Format="N4" Variant="Variant.Text"
                              HideSpinButtons="true" ReadOnly="true" Class="flex-1" />
         </div>
     </MudCardContent>
diff --git a/src/Cropper.Blazor/Client/Components/CroppedDimensionsSettings.razor b/src/Cropper.Blazor/Client/Components/CroppedDimensionsSettings.razor
index b1bced79..406fc01f 100644
--- a/src/Cropper.Blazor/Client/Components/CroppedDimensionsSettings.razor
+++ b/src/Cropper.Blazor/Client/Components/CroppedDimensionsSettings.razor
@@ -1,4 +1,4 @@
-<MudCard Class="d-flex justify-space-between flex-column mb-6 mud-height-full">
+<MudCard Class="mud-height-full">
     <MudCardHeader Class="border-solid border-b mud-border-lines-default">
         <CardHeaderContent>
             <div class="d-flex flex-column gap-2">
diff --git a/src/Cropper.Blazor/Client/Components/CropperDataPreview.razor b/src/Cropper.Blazor/Client/Components/CropperDataPreview.razor
index 2ab25db6..ff8a490d 100644
--- a/src/Cropper.Blazor/Client/Components/CropperDataPreview.razor
+++ b/src/Cropper.Blazor/Client/Components/CropperDataPreview.razor
@@ -1,11 +1,11 @@
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="X" Step=".2M" Label="X" Variant="Variant.Text"
-                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" />
+                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="Y" Label="Y" Step=".2M" Variant="Variant.Text"
-                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" />
+                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="Width" Label="Width" Step=".2M" Variant="Variant.Text"
-                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" />
+                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="Height" Label="Height" Step=".2M" Variant="Variant.Text"
-                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" />
+                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="Rotate" Label="Rotate" Step=".2M" Variant="Variant.Text"
                  Adornment="Adornment.End" AdornmentText="deg" AdornmentColor="Color.Primary" Margin="Margin.Dense" />
 <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="ScaleX" Label="ScaleX" Variant="Variant.Text" Step=".2M" />
diff --git a/src/Cropper.Blazor/Client/Components/GetSetCropperData.razor b/src/Cropper.Blazor/Client/Components/GetSetCropperData.razor
index 1827dc2a..7a934f0f 100644
--- a/src/Cropper.Blazor/Client/Components/GetSetCropperData.razor
+++ b/src/Cropper.Blazor/Client/Components/GetSetCropperData.razor
@@ -1,12 +1,12 @@
 @using Cropper.Blazor.Models
 
-<MudItem xxl="12" xl="12" lg="12" md="12" sm="12" xs="12">
+<MudItem xxl="12" xl="12" lg="12" md="12" sm="12" xs="12" Class="pt-0">
     <MudExpansionPanels Dense="true" DisableGutters="true" DisableBorders="true" Elevation="0">
         <MudExpansionPanel IsInitiallyExpanded="true" Style="background-color: var(--mud-palette-background)">
             <TitleContent>
                 <div class="d-flex">
                     <MudIcon Icon="@Icons.Material.Filled.Handyman" class="mr-3"></MudIcon>
-                    <MudText Typo="Typo.h6">Event`s settings</MudText>
+                    <MudText Typo="Typo.h6">Event's settings</MudText>
                 </div>
             </TitleContent>
             <ChildContent>
@@ -32,12 +32,12 @@
 </MudItem>
 
 
-<MudItem xxl="12" xl="12" lg="12" md="12" sm="12" xs="12">
+<MudItem xxl="12" xl="12" lg="12" md="12" sm="12" xs="12" Class="pt-0">
     <MudExpansionPanels Dense="true" DisableGutters="true" DisableBorders="true" Elevation="0">
         <MudExpansionPanel IsInitiallyExpanded="true" Style="background-color: var(--mud-palette-background)">
             <TitleContent>
                 <div class="d-flex">
-                    <MudIcon Icon="@Icons.Material.Filled.Handyman" class="mr-3"></MudIcon>
+                    <MudIcon Icon="@Icons.Material.Filled.MobiledataOff" class="mr-3"></MudIcon>
                     <MudText Typo="Typo.h6">Get or Set cropper component data</MudText>
                 </div>
             </TitleContent>
diff --git a/src/Cropper.Blazor/Client/Components/ZoomRatioSettings.razor b/src/Cropper.Blazor/Client/Components/ZoomRatioSettings.razor
index 1c94edf0..7fc1427d 100644
--- a/src/Cropper.Blazor/Client/Components/ZoomRatioSettings.razor
+++ b/src/Cropper.Blazor/Client/Components/ZoomRatioSettings.razor
@@ -1,4 +1,4 @@
-<MudCard Class="d-flex justify-space-between flex-column mb-6 mud-height-full">
+<MudCard Class="mud-height-full">
     <MudCardHeader Class="border-solid border-b mud-border-lines-default">
         <CardHeaderContent>
             <div class="d-flex flex-column gap-2">
diff --git a/src/Cropper.Blazor/Client/Pages/CropperDemo.razor b/src/Cropper.Blazor/Client/Pages/CropperDemo.razor
index f1594ccf..0410a804 100644
--- a/src/Cropper.Blazor/Client/Pages/CropperDemo.razor
+++ b/src/Cropper.Blazor/Client/Pages/CropperDemo.razor
@@ -49,7 +49,7 @@
             </MudPaper>
         </MudItem>
 
-        <MudItem sm="12" xs="12">
+        <MudItem sm="12" xs="12" Class="pt-0">
             <MudExpansionPanels Dense="true" DisableGutters="true" DisableBorders="true" Elevation="0">
                 <MudExpansionPanel IsInitiallyExpanded="true" Style="background-color: var(--mud-palette-background)">
                     <TitleContent>