diff --git a/src/OrchardCore.Modules/OrchardCore.Contents/Assets/scss/Contents.scss b/src/OrchardCore.Modules/OrchardCore.Contents/Assets/scss/Contents.scss
index a14b5ab7d9d..d32c7170875 100644
--- a/src/OrchardCore.Modules/OrchardCore.Contents/Assets/scss/Contents.scss
+++ b/src/OrchardCore.Modules/OrchardCore.Contents/Assets/scss/Contents.scss
@@ -4,23 +4,26 @@
     flex-direction: row;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
-    > .edit-body{
-        width:100%;
+
+    > .edit-body {
+        width: 100%;
+    }
+
+    &.sidebar > .edit-sidebar {
+        visibility: visible;
     }
-    &.sidebar > .edit-sidebar{
-       visibility:visible; 
+
+    &:not(.sidebar) > .edit-sidebar {
+        visibility: hidden;
     }
-    &:not(.sidebar) > .edit-sidebar{
-        visibility: hidden; 
-     }
-    width: 100%;        
+
+    width: 100%;
 }
 
 .edit-body {
     display: -ms-flexbox;
-    display:flex;
+    display: flex;
     flex-direction: column;
-    padding: 8px;  
 }
 
 .edit-sidebar-handler {
@@ -38,7 +41,7 @@
     visibility: hidden;
     vertical-align: top;
     display: -ms-flexbox;
-    display:flex;
+    display: flex;
     padding-left: 8px;
     flex-direction: column;
 }
@@ -54,28 +57,31 @@
 
 @media (min-width: 768px) {
     .edit-container {
-        &.sidebar > .edit-body{
+        &.sidebar > .edit-body {
             flex: 0 0 75%;
-            width:75%;
+            width: 75%;
         }
-        &:not(.sidebar) > .edit-body{
+
+        &:not(.sidebar) > .edit-body {
             flex: 0 0 100%;
         }
-    
-        &:not(.sidebar) > .edit-sidebar{
+
+        &:not(.sidebar) > .edit-sidebar {
             visibility: hidden;
         }
-        &.sidebar > .edit-sidebar{
+
+        &.sidebar > .edit-sidebar {
             flex: 0 0 24.42141%;
             order: 2;
-            padding-left: 15px;            
+            padding-left: 15px;
         }
+
         &.sidebar > .edit-sidebar-handler {
             display: block;
         }
     }
-    
+
     .edit-body {
         order: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Create.cshtml b/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Create.cshtml
index 60d33d9818a..a60cf5a91b5 100644
--- a/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Create.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Create.cshtml
@@ -13,6 +13,9 @@
 <zone Name="Title"><h1>@RenderTitleSegments(T["New {0}", typeDisplayName])</h1></zone>
 
 <form asp-action="Create" asp-route-returnUrl="@Context.Request.Query["ReturnUrl"]" method="post" enctype="multipart/form-data" class="no-multisubmit">
-    @Html.ValidationSummary()
+    @if (!ViewContext.ModelState.IsValid)
+    {
+        @Html.ValidationSummary()
+    }
     @await DisplayAsync(Model)
 </form>
diff --git a/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Edit.cshtml
index 2d996fee555..3f55bf652cf 100644
--- a/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Edit.cshtml
@@ -13,6 +13,9 @@
 <zone Name="Title"><h1>@RenderTitleSegments(T["Edit {0}", typeDisplayName])</h1></zone>
 
 <form asp-action="Edit" asp-route-contentitemid="@contentItem.ContentItemId" asp-route-returnUrl="@Context.Request.Query["ReturnUrl"]" method="post" enctype="multipart/form-data" class="no-multisubmit">
-    @Html.ValidationSummary()
+    @if (!ViewContext.ModelState.IsValid)
+    {
+        @Html.ValidationSummary()
+    }
     @await DisplayAsync(Model)
 </form>
diff --git a/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.css b/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.css
index d0a8f7d9a24..e0141d39a51 100644
--- a/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.css
+++ b/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.css
@@ -20,7 +20,6 @@
   display: -ms-flexbox;
   display: flex;
   flex-direction: column;
-  padding: 8px;
 }
 
 .edit-sidebar-handler {
diff --git a/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.min.css b/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.min.css
index ad98938ef94..f79a88cc4db 100644
--- a/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.min.css
+++ b/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.min.css
@@ -1 +1 @@
-.edit-container{display:-ms-flexbox;display:flex;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%}.edit-container>.edit-body{width:100%}.edit-container.sidebar>.edit-sidebar{visibility:visible}.edit-container:not(.sidebar)>.edit-sidebar{visibility:hidden}.edit-body{display:-ms-flexbox;display:flex;flex-direction:column;padding:8px}.edit-sidebar-handler{display:none;border:0;border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3;cursor:col-resize;padding-left:1px;padding-right:1px;width:3px}.edit-sidebar{visibility:hidden;vertical-align:top;display:-ms-flexbox;display:flex;padding-left:8px;flex-direction:column}#show-selected-card .list-group-item{min-height:64px}.list-group-item.disabled-content-type .icon-toolbar{display:none}@media (min-width:768px){.edit-container.sidebar>.edit-body{flex:0 0 75%;width:75%}.edit-container:not(.sidebar)>.edit-body{flex:0 0 100%}.edit-container:not(.sidebar)>.edit-sidebar{visibility:hidden}.edit-container.sidebar>.edit-sidebar{flex:0 0 24.42141%;order:2;padding-left:15px}.edit-container.sidebar>.edit-sidebar-handler{display:block}.edit-body{order:0}}
+.edit-container{display:-ms-flexbox;display:flex;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%}.edit-container>.edit-body{width:100%}.edit-container.sidebar>.edit-sidebar{visibility:visible}.edit-container:not(.sidebar)>.edit-sidebar{visibility:hidden}.edit-body{display:-ms-flexbox;display:flex;flex-direction:column}.edit-sidebar-handler{display:none;border:0;border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3;cursor:col-resize;padding-left:1px;padding-right:1px;width:3px}.edit-sidebar{visibility:hidden;vertical-align:top;display:-ms-flexbox;display:flex;padding-left:8px;flex-direction:column}#show-selected-card .list-group-item{min-height:64px}.list-group-item.disabled-content-type .icon-toolbar{display:none}@media (min-width:768px){.edit-container.sidebar>.edit-body{flex:0 0 75%;width:75%}.edit-container:not(.sidebar)>.edit-body{flex:0 0 100%}.edit-container:not(.sidebar)>.edit-sidebar{visibility:hidden}.edit-container.sidebar>.edit-sidebar{flex:0 0 24.42141%;order:2;padding-left:15px}.edit-container.sidebar>.edit-sidebar-handler{display:block}.edit-body{order:0}}
diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/BagPart.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/BagPart.Edit.cshtml
index 9ff57f13316..da96789f218 100644
--- a/src/OrchardCore.Modules/OrchardCore.Flows/Views/BagPart.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Flows/Views/BagPart.Edit.cshtml
@@ -56,7 +56,7 @@
     {
         var type = Model.ContainedContentTypeDefinitions.First();
 
-        <a class="btn btn-primary add-widget btn-sm"
+        <a class="btn btn-primary add-widget btn-sm mt-1"
        data-target-id="@widgetTemplatePlaceholderId"
        data-html-field-prefix="@htmlFieldPrefix"
        data-prefixes-name="@Html.NameFor(x => x.Prefixes)"
@@ -70,14 +70,14 @@
     }
     else if (totalItems > 1)
     {
-        <div class="btn-group btn-bag-add">
+        <div class="btn-group btn-bag-add mt-1">
             <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 @T["Add Item"]
             </button>
             <div class="dropdown-menu">
                 @foreach (var type in Model.ContainedContentTypeDefinitions)
                 {
-                    <a class="dropdown-item add-widget  btn-sm"
+                    <a class="dropdown-item add-widget btn-sm"
                data-target-id="@widgetTemplatePlaceholderId"
                data-html-field-prefix="@htmlFieldPrefix"
                data-prefixes-name="@Html.NameFor(x => x.Prefixes)"
@@ -120,32 +120,32 @@
 
     <script at="Foot">
         @* Only apply sortable if element is present in dom, do not call sortable on scripts for mock widgets *@
-                                                                                                                                            if ($('#@widgetTemplatePlaceholderId').length == 1) {
+        if ($('#@widgetTemplatePlaceholderId').length == 1) {
             $("#@widgetTemplatePlaceholderId").sortable({
                 handle: ".widget-editor-handle",
                 cursor: "move",
                 opacity: 0.7,
                 tolerance: "pointer",
                 placeholder: {
-                    element: function(currentItem) {
+                    element: function (currentItem) {
                         return $('<div class="widget-dragdrop-placeholder"><div></div></div>')[0];
                     },
-                    update: function(container, p) {
+                    update: function (container, p) {
                         return;
                     }
                 },
                 toleranceElement: '> div',
-                start: function(event, ui) {
+                start: function (event, ui) {
                     widgetDragItem = ui.item;
                     lastContainer = ui.item.parent();
                     lastContainer.toggleClass('widget-dropzone-hint');
                     widgetDragItem.find('.card').first().toggleClass('border-primary');
                     var classList = widgetDragItem.attr('class').split(' ');
-                    $.each(classList, function(id, item) {
+                    $.each(classList, function (id, item) {
                         if (item.indexOf('col-md-') === 0) ui.placeholder.addClass(item);
                     });
                 },
-                stop: function(event, ui) {
+                stop: function (event, ui) {
                     lastContainer.toggleClass('widget-dropzone-hint');
                     widgetDragItem.find('.card').first().toggleClass('border-primary');
                     //clear the global variables
@@ -155,7 +155,7 @@
                     widgetItemDestId = null;
                     $(document).trigger('contentpreview:render');
                 },
-                over: function(event, ui) {
+                over: function (event, ui) {
                     var $self = $(this);
                     if (lastContainer[0] != this) {
                         lastContainer.toggleClass('widget-dropzone-hint');
diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Edit.cshtml
index 26c7fe5e426..be7e0458c78 100644
--- a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Edit.cshtml
@@ -13,8 +13,8 @@
     }
 }
 
-<div class="widget widget-editor card my-1@(collapsed ? " collapsed" : String.Empty)">
-    <div class="widget-editor-header card-header text-muted py-1 ps-3 pe-1">
+<div class="widget widget-editor card@(collapsed ? " collapsed" : String.Empty)">
+    <div class="widget-editor-header card-header text-muted py-1 ps-2 pe-1">
         @if (Model.CanMove)
         {
             <div class="widget-editor-handle"><i class="fas fa-arrows-alt" aria-hidden="true"></i></div>
@@ -30,7 +30,7 @@
             </div>
         }
     </div>
-    <div class="widget-editor-body card-body px-2 py-1">
+    <div class="widget-editor-body card-body">
         <div class="w-100">
             @if (Model.ContentEditor != null)
             {
diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Frame.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Frame.cshtml
index 93b88bca303..d44109b75fd 100644
--- a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Frame.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Frame.cshtml
@@ -1,5 +1,5 @@
 @* This template can be Overridden to change the row behavior of widget collection *@
 @* For ROOT DIV its CSS classes widget-template and col-md-* are required - Do not remove then in customization*@
-<div class="widget-template col-md-12 px-1">
+<div class="widget-template col-md-12 px-0">
     @await DisplayAsync(Model.ChildContent)
 </div>
diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Edit.cshtml
index 8a43c1ab14d..b9b58fca06d 100644
--- a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Edit.cshtml
@@ -12,8 +12,8 @@
     var editorId = "contentEditor_" + Model.PrefixValue;
 }
 
-<div class="widget widget-editor card my-1 @(Model.Inline != true ? "collapsed" : "")">
-    <div class="widget-editor-header card-header text-muted py-1 ps-3 pe-1">
+<div class="widget widget-editor card my-1@(Model.Inline ? " collapsed" : String.Empty)">
+    <div class="widget-editor-header card-header text-muted py-1 ps-2 pe-1">
         @if (Model.CanMove != false)
         {
             <div class="widget-editor-handle"><i class="fas fa-arrows-alt" aria-hidden="true"></i></div>
@@ -63,7 +63,7 @@
             }
         </div>
     </div>
-    <div class="widget-editor-body card-body px-2 py-1">
+    <div class="widget-editor-body card-body">
         <div class="w-100">
             @if (Model.ContentEditor != null)
             {
diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Frame.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Frame.cshtml
index cb0f01783f4..91c872790c9 100644
--- a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Frame.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Frame.cshtml
@@ -1,5 +1,5 @@
 @* This template can be Overridden to change the row behavior of widget collection *@
 @* For ROOT DIV its CSS classes widget-template and col-md-* are required - Do not remove then in customization*@
-<div class="widget-template col-md-@Model.ColumnSize px-1">
+<div class="widget-template col-md-@Model.ColumnSize px-0">
     @await DisplayAsync(Model.ChildContent)
 </div>
diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/FlowPart.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/FlowPart.Edit.cshtml
index 80ae02bf1f1..0ae08c3ed04 100644
--- a/src/OrchardCore.Modules/OrchardCore.Flows/Views/FlowPart.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Flows/Views/FlowPart.Edit.cshtml
@@ -60,7 +60,7 @@
             }
         }
     </div>
-    <div class="btn-widget-add-below-wrapper w-100">
+    <div class="btn-widget-add-below-wrapper w-100 my-2">
         <div class="btn-widget-add-below w-100 border border-info">
             <div class="btn-group">
                 <button type="button" title="@T["Add Widget"]" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -75,7 +75,7 @@
                     {
                         @foreach (var type in widgetContentTypes.OrderBy(w => w.DisplayName))
                         {
-                            <a class="dropdown-item add-widget  btn-sm"
+                            <a class="dropdown-item add-widget btn-sm"
                             data-target-id="@widgetTemplatePlaceholderId"
                             data-html-field-prefix="@htmlFieldPrefix"
                             data-prefixes-name="@Html.NameFor(x => x.Prefixes)"
@@ -103,125 +103,123 @@
         }
 
         <script asp-src="~/OrchardCore.Flows/Scripts/flows.edit.min.js"
-                debug-src="~/OrchardCore.Flows/Scripts/flows.edit.js" at="Foot" depends-on="admin"></script>
+            debug-src="~/OrchardCore.Flows/Scripts/flows.edit.js" at="Foot" depends-on="admin"></script>
         <style asp-src="~/OrchardCore.Widgets/Styles/widgetslist.edit.min.css"
-               debug-src="~/OrchardCore.Widgets/Styles/widgetslist.edit.css"></style>
+           debug-src="~/OrchardCore.Widgets/Styles/widgetslist.edit.css"></style>
         <style asp-src="~/OrchardCore.Flows/Styles/flows.edit.css"
-               debug-src="~/OrchardCore.Flows/Styles/flows.edit.min.css"></style>
+           debug-src="~/OrchardCore.Flows/Styles/flows.edit.min.css"></style>
     }
 
     <script at="Foot">
-    function toggleWidgets(){
-        var icon = $('.dot');
+        function toggleWidgets() {
+            var icon = $('.dot');
 
-        if(icon.attr('data-icon') == 'angles-up')
-        {
-            icon.attr('data-icon', 'angles-down')
-        }
-        else
-        {
-            icon.attr('data-icon', 'angles-up')
-        }
+            if (icon.attr('data-icon') == 'angles-up') {
+                icon.attr('data-icon', 'angles-down')
+            }
+            else {
+                icon.attr('data-icon', 'angles-up')
+            }
 
-        $('.widget.widget-editor.card').toggleClass('collapsed');
-    }
+            $('.widget.widget-editor.card').toggleClass('collapsed');
+        }
 
-    @*Only apply sortable if element is present in dom, do not call sortable on scripts for mock widgets *@
-    if ($('#@widgetTemplatePlaceholderId').length == 1) {
-        $("#@widgetTemplatePlaceholderId").sortable({
-            handle: ".widget-editor-handle",
-            cursor: "move",
-            tolerance: "pointer",
-            opacity: 0.7,
-            placeholder: {
-                element: function(currentItem) {
-                    return $('<div class="widget-dragdrop-placeholder"><div></div></div>')[0];
+        @*Only apply sortable if element is present in dom, do not call sortable on scripts for mock widgets *@
+                    if ($('#@widgetTemplatePlaceholderId').length == 1) {
+            $("#@widgetTemplatePlaceholderId").sortable({
+                handle: ".widget-editor-handle",
+                cursor: "move",
+                tolerance: "pointer",
+                opacity: 0.7,
+                placeholder: {
+                    element: function (currentItem) {
+                        return $('<div class="widget-dragdrop-placeholder"><div></div></div>')[0];
+                    },
+                    update: function (container, p) {
+                        return;
+                    }
                 },
-                update: function (container, p) {
-                    return;
-                }
-            },
-            toleranceElement: '> div',
-            connectWith: '.widget-template-placeholder.widget-template-placeholder-flowpart',
-            start: function (event, ui) {
+                toleranceElement: '> div',
+                connectWith: '.widget-template-placeholder.widget-template-placeholder-flowpart',
+                start: function (event, ui) {
 
-                widgetDragItem = ui.item;
-                lastContainer = ui.item.parent();
-                lastContainer.toggleClass('widget-dropzone-hint');
+                    widgetDragItem = ui.item;
+                    lastContainer = ui.item.parent();
+                    lastContainer.toggleClass('widget-dropzone-hint');
 
-                widgetDragItem.find('.card').first().toggleClass('border-primary')
+                    widgetDragItem.find('.card').first().toggleClass('border-primary')
 
-                widgetItemSourceId = widgetDragItem.parent().attr('id');
+                    widgetItemSourceId = widgetDragItem.parent().attr('id');
 
-                var classList = widgetDragItem.attr('class').split(' ');
-                $.each(classList, function (id, item) {
-                    if (item.indexOf('col-md-') === 0) ui.placeholder.addClass(item);
-                });
+                    var classList = widgetDragItem.attr('class').split(' ');
+                    $.each(classList, function (id, item) {
+                        if (item.indexOf('col-md-') === 0) ui.placeholder.addClass(item);
+                    });
 
-            },
-            stop: function (event, ui) {
+                },
+                stop: function (event, ui) {
 
-                lastContainer.toggleClass('widget-dropzone-hint');
-                widgetDragItem.find('.card').first().toggleClass('border-primary');
+                    lastContainer.toggleClass('widget-dropzone-hint');
+                    widgetDragItem.find('.card').first().toggleClass('border-primary');
 
-                widgetItemDestId = widgetDragItem.parent().attr('id');
+                    widgetItemDestId = widgetDragItem.parent().attr('id');
 
-                if (widgetItemDestId !== widgetItemSourceId) {
+                    if (widgetItemDestId !== widgetItemSourceId) {
 
-                    var inputs = widgetDragItem.children("input[name*='FlowPart']");
+                        var inputs = widgetDragItem.children("input[name*='FlowPart']");
 
-                    var destination = $('#' + widgetItemDestId);
-                    var source = $('#' + widgetItemSourceId);
+                        var destination = $('#' + widgetItemDestId);
+                        var source = $('#' + widgetItemSourceId);
 
-                    var sourceGuid = widgetItemSourceId.substring(0, widgetItemSourceId.lastIndexOf('_') + 1);
-                    sourceNameGuid = sourceGuid.replaceAll('_', '.');
+                        var sourceGuid = widgetItemSourceId.substring(0, widgetItemSourceId.lastIndexOf('_') + 1);
+                        sourceNameGuid = sourceGuid.replaceAll('_', '.');
 
-                    if (destination.length > 0) {
+                        if (destination.length > 0) {
 
-                        var destGuid = widgetItemDestId.substring(0, widgetItemDestId.lastIndexOf('_') + 1);
-                        destNameGuid = destGuid.replaceAll('_', '.');
+                            var destGuid = widgetItemDestId.substring(0, widgetItemDestId.lastIndexOf('_') + 1);
+                            destNameGuid = destGuid.replaceAll('_', '.');
 
-                        if (source.length > 0) {
-                            inputs.each(function (index, item) {
-                                $(this).attr('id', $(this).attr('id').replace(sourceGuid, destGuid));
-                                $(this).attr('name', $(this).attr('name').replace(sourceNameGuid, destNameGuid));
-                            });
+                            if (source.length > 0) {
+                                inputs.each(function (index, item) {
+                                    $(this).attr('id', $(this).attr('id').replace(sourceGuid, destGuid));
+                                    $(this).attr('name', $(this).attr('name').replace(sourceNameGuid, destNameGuid));
+                                });
+
+                            } else {
 
-                        } else {
+                                inputs.each(function (index, item) {
+                                    $(this).attr('id', destGuid + $(this).attr('id'));
+                                    $(this).attr('name', destNameGuid + $(this).attr('name'));
+                                });
+                            }
 
+                        }
+                        else if (source.length > 0) {
                             inputs.each(function (index, item) {
-                                $(this).attr('id', destGuid + $(this).attr('id'));
-                                $(this).attr('name', destNameGuid  + $(this).attr('name'));
+                                $(this).attr('id', $(this).attr('id').replace(sourceGuid, ''));
+                                $(this).attr('name', $(this).attr('name').replace(sourceNameGuid, ''));
                             });
                         }
 
                     }
-                    else if (source.length > 0) {
-                        inputs.each(function (index, item) {
-                            $(this).attr('id', $(this).attr('id').replace(sourceGuid, '') );
-                            $(this).attr('name', $(this).attr('name').replace(sourceNameGuid, ''));
-                        });
-                    }
 
-                }
+                    $(document).trigger('contentpreview:render');
 
-                $(document).trigger('contentpreview:render');
-
-                //clear the global variables
-                widgetDragItem = null;
-                lastContainer = null;
-                widgetItemSourceId = null;
-                widgetItemDestId = null;
-            },
-            over: function (event, ui) {
-                var $self = $(this);
-                if (lastContainer[0] != this) {
-                    lastContainer.toggleClass('widget-dropzone-hint');
-                    lastContainer = $self;
-                    $self.toggleClass('widget-dropzone-hint');
+                    //clear the global variables
+                    widgetDragItem = null;
+                    lastContainer = null;
+                    widgetItemSourceId = null;
+                    widgetItemDestId = null;
+                },
+                over: function (event, ui) {
+                    var $self = $(this);
+                    if (lastContainer[0] != this) {
+                        lastContainer.toggleClass('widget-dropzone-hint');
+                        lastContainer = $self;
+                        $self.toggleClass('widget-dropzone-hint');
+                    }
                 }
-            }
-        });
-    }
+            });
+        }
     </script>
 </div>
diff --git a/src/OrchardCore.Modules/OrchardCore.Widgets/Views/ContentCard-WidgetsListPart.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Widgets/Views/ContentCard-WidgetsListPart.Edit.cshtml
index eef24fbdcd4..b6f14f53a1e 100644
--- a/src/OrchardCore.Modules/OrchardCore.Widgets/Views/ContentCard-WidgetsListPart.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Widgets/Views/ContentCard-WidgetsListPart.Edit.cshtml
@@ -8,18 +8,18 @@
     var widgetContentTypes = ContentDefinitionManager.ListTypeDefinitions().Where(t => t.GetStereotype() == "Widget");
 }
 
-<div class="widget widget-editor card my-1 @(Model.Inline != true ? "collapsed" : "")">
-    <div class="widget-editor-header card-header text-muted py-1 ps-3 pe-1">
-        @if (Model.CanMove != false)
+<div class="widget widget-editor card@(Model.Inline ? " collapsed" : String.Empty)">
+    <div class="widget-editor-header card-header text-muted py-1 ps-2 pe-1">
+        @if (Model.CanMove)
         {
             <div class="widget-editor-handle"><i class="fas fa-arrows-alt" aria-hidden="true"></i></div>
         }
         <button type="button" class="btn btn-outline-secondary btn-sm widget-list-editor-btn-toggle widget-editor-btn-collapse"><i class="fa fa-angle-down" aria-hidden="true"></i></button>
         <button type="button" class="btn btn-outline-secondary btn-sm widget-list-editor-btn-toggle widget-editor-btn-expand"><i class="fa fa-angle-@(Orchard.CultureDir() == LanguageDirection.LTR ? "right" : "left")" aria-hidden="true"></i></button>
         @contentType
-        <div class="btn-widget-metadata border border-info w-100">
+        <div class="btn-widget-metadata border border-info w-100 my-2">
             <div class="btn-group">
-                @if (Model.CanInsert != false)
+                @if (Model.CanInsert)
                 {
                     <button type="button" title="@T["Insert Widget"]" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <i class="fa fa-plus" aria-hidden="true"></i>
@@ -48,13 +48,13 @@
         </div>
 
         <div class="btn-group btn-group-sm float-sm-end" role="group">
-            @if (Model.CanDelete != false)
+            @if (Model.CanDelete)
             {
                 <button type="button" class="btn btn-danger widget-list-delete" data-title="@T["Delete"]" data-message="@T["Are you sure you want to remove this item?"]"><i class="fa fa-trash" aria-hidden="true"></i></button>
             }
         </div>
     </div>
-    <div class="widget-editor-body card-body px-2 py-2">
+    <div class="widget-editor-body card-body">
         <div class="w-100">
             @if (Model.ContentEditor != null)
             {
@@ -64,7 +64,7 @@
     </div>
     @if (Model.Footer != null)
     {
-        <div class="widget-editor-footer card-footer text-muted px-1 py-1">
+        <div class="widget-editor-footer card-footer text-muted py-1 px-2">
             @await DisplayAsync(Model.Footer)
         </div>
     }
diff --git a/src/OrchardCore.Modules/OrchardCore.Widgets/Views/ContentCard.Frame.cshtml b/src/OrchardCore.Modules/OrchardCore.Widgets/Views/ContentCard.Frame.cshtml
index 93b88bca303..d44109b75fd 100644
--- a/src/OrchardCore.Modules/OrchardCore.Widgets/Views/ContentCard.Frame.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Widgets/Views/ContentCard.Frame.cshtml
@@ -1,5 +1,5 @@
 @* This template can be Overridden to change the row behavior of widget collection *@
 @* For ROOT DIV its CSS classes widget-template and col-md-* are required - Do not remove then in customization*@
-<div class="widget-template col-md-12 px-1">
+<div class="widget-template col-md-12 px-0">
     @await DisplayAsync(Model.ChildContent)
 </div>
diff --git a/src/OrchardCore.Modules/OrchardCore.Widgets/Views/WidgetsListPart.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Widgets/Views/WidgetsListPart.Edit.cshtml
index cf4483b58ec..de6162ec39c 100644
--- a/src/OrchardCore.Modules/OrchardCore.Widgets/Views/WidgetsListPart.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Widgets/Views/WidgetsListPart.Edit.cshtml
@@ -28,7 +28,7 @@
                 <div class="card-header text-muted">
                 @zone
                 </div>
-                <div class="widget-editor-body card-body px-2 py-1" data-zone="@zone">
+                <div class="widget-editor-body card-body" data-zone="@zone">
                     <div class="w-100 mb-3">
                         <div id="@widgetTemplatePlaceholderId" class="widget-template-placeholder widget-template-placeholder-widget-list @( ($"widgetlist-{partName}-{zone}").HtmlClassify() ) row mx-0" data-buildeditorurl="@Url.Action("BuildEditor", "Admin", new { area = "OrchardCore.Widgets" })">
 
@@ -75,38 +75,38 @@
                         }
 
                             <script at="Foot">
-                            @*Only apply sortable if element is present in dom, do not call sortable on scripts for mock widgets *@
-                                                            if ($('#@widgetTemplatePlaceholderId').length == 1) {
+                                @*Only apply sortable if element is present in dom, do not call sortable on scripts for mock widgets *@
+                                if ($('#@widgetTemplatePlaceholderId').length == 1) {
                                     $("#@widgetTemplatePlaceholderId").sortable({
                                         handle: ".widget-editor-handle",
                                         cursor: "move",
                                         opacity: 0.7,
                                         tolerance: "pointer",
                                         placeholder: {
-                                            element: function(currentItem) {
+                                            element: function (currentItem) {
                                                 return $('<div class="widget-dragdrop-placeholder"><div></div></div>')[0];
                                             },
-                                            update: function(container, p) {
+                                            update: function (container, p) {
                                                 return;
                                             }
                                         },
                                         toleranceElement: '> div',
                                         connectWith: '.widget-template-placeholder.widget-template-placeholder-widget-list',
-                                        receive: function(event, ui) {
+                                        receive: function (event, ui) {
                                             var newZone = ui.item.closest('.widget-editor-body').data("zone");
                                             var zoneInput = ui.item.find('.source-zone').val(newZone);
                                         },
-                                        start: function(event, ui) {
+                                        start: function (event, ui) {
                                             widgetDragItem = ui.item;
                                             lastContainer = ui.item.parent();
                                             lastContainer.toggleClass('widget-dropzone-hint');
                                             widgetDragItem.find('.card').first().toggleClass('border-primary');
                                             var classList = widgetDragItem.attr('class').split(' ');
-                                            $.each(classList, function(id, item) {
+                                            $.each(classList, function (id, item) {
                                                 if (item.indexOf('col-md-') === 0) ui.placeholder.addClass(item);
                                             });
                                         },
-                                        stop: function(event, ui) {
+                                        stop: function (event, ui) {
                                             lastContainer.toggleClass('widget-dropzone-hint');
                                             widgetDragItem.find('.card').first().toggleClass('border-primary');
                                             //clear the global variables
@@ -116,7 +116,7 @@
                                             widgetItemDestId = null;
                                             $(document).trigger('contentpreview:render');
                                         },
-                                        over: function(event, ui) {
+                                        over: function (event, ui) {
                                             var $self = $(this);
                                             if (lastContainer[0] != this) {
                                                 lastContainer.toggleClass('widget-dropzone-hint');
@@ -128,15 +128,15 @@
                                 }
                             </script>
                         </div>
-                        <div class="btn-widget-add-below-wrapper w-100">
+                        <div class="btn-widget-add-below-wrapper w-100 my-2">
                             <div class="btn-widget-add-below w-100 border border-info">
                                 <div class="btn-group ">
                                     <button type="button" title="@T["Add Widget"]" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                         <i class="fa fa-plus" aria-hidden="true"></i>
                                     </button>
                                     <div class="dropdown-menu">
-                                    @foreach (var type in widgetContentTypes.OrderBy(w => w.DisplayName))
-                                    {
+                                        @foreach (var type in widgetContentTypes.OrderBy(w => w.DisplayName))
+                                        {
                                                 <a class="dropdown-item add-list-widget btn-sm"
                                    data-target-id="@widgetTemplatePlaceholderId"
                                    data-html-field-prefix="@htmlFieldPrefix"
@@ -149,7 +149,7 @@
                                    data-part-name="@partName"
                                    data-zone="@zone"
                                    href="javascript:;">@type.DisplayName</a>
-                                    }
+                                        }
                                     </div>
                                 </div>
                             </div>
@@ -169,9 +169,9 @@
             await DisplayAsync(await ContentItemDisplayManager.BuildEditorAsync(contentItem, Model.Updater, true, "", Guid.NewGuid().ToString("n")));
         }
 
-            <script asp-src="~/OrchardCore.Widgets/Scripts/widgetslist.edit.min.js"
+        <script asp-src="~/OrchardCore.Widgets/Scripts/widgetslist.edit.min.js"
             debug-src="~/OrchardCore.Widgets/Scripts/widgetslist.edit.js" at="Foot" depends-on="admin"></script>
-            <style asp-src="~/OrchardCore.Widgets/Styles/widgetslist.edit.min.css"
+        <style asp-src="~/OrchardCore.Widgets/Styles/widgetslist.edit.min.css"
            debug-src="~/OrchardCore.Widgets/Styles/widgetslist.edit.css"></style>
     }
 </div>