diff --git a/README.md b/README.md
index 57199bd..96cc4dc 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 # Tilework
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=tileworkdev_tilework&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=tileworkdev_tilework)
 
 ## About
 
diff --git a/tilework.ui/Components/Dialogs/RuleDialog.razor b/tilework.ui/Components/Dialogs/RuleDialog.razor
index a324eed..f3b6480 100644
--- a/tilework.ui/Components/Dialogs/RuleDialog.razor
+++ b/tilework.ui/Components/Dialogs/RuleDialog.razor
@@ -15,58 +15,96 @@
     </TitleContent>
     <DialogContent>
         <MudForm @ref="form">
-            @foreach (var condition in Rule.Conditions)
-            {
-                <ConditionForm Condition="condition"
-                               OnDelete="@(() => RemoveCondition(condition))" />
-            }
-
-            <MudStack AlignItems="AlignItems.Start" Row>
-                <MudMenu Disabled="@(!CanAddCondition)" AnchorOrigin="Origin.BottomCenter" Class="mb-4">
-                    <ActivatorContent>
-                        <MudTooltip Disabled="@(AllowedConditionTypes.Any())" Text="This protocol does not support rule conditions.">
-                            <MudButton Disabled="@(!CanAddCondition)" Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add">
-                                Add condition
-                            </MudButton>
-                        </MudTooltip>
-                    </ActivatorContent>
-                    <ChildContent>
-                        @foreach (var type in AvailableConditionTypes)
-                        {
-                            <MudMenuItem OnClick="@(() => AddCondition(type))">@type.GetDescription()</MudMenuItem>
-                        }
-                    </ChildContent>
-                </MudMenu>
-            </MudStack>
-            <MudNumericField T="int" @bind-Value="Rule.Priority" Label="Priority" Variant="Variant.Outlined" HideSpinButtons="true" Required="true" Class="mb-4" />
-
-            <MudSelect T="RuleActionType" @bind-Value="Rule.Action.Type" Label="Action" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" Required="true" Class="mb-4">
-                @foreach (var type in AllowedActionTypes)
-                {
-                    <MudSelectItem T="RuleActionType" Value="@type">@type.GetDescription()</MudSelectItem>
-                }
-            </MudSelect>
-
-            @if (Rule.Action?.Type == RuleActionType.Forward)
-            {
-                <MudSelect T="Guid?" @bind-Value="SelectedTargetGroup" Label="Target group" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" Required="true">
-                    @foreach (var group in TargetGroups)
-                    {
-                        <MudSelectItem T="Guid?" Value="@group.Id">@group.Name</MudSelectItem>
-                    }
-                </MudSelect>
-            }
-            else if (Rule.Action?.Type == RuleActionType.Redirect)
-            {
-                <MudTextField T="string" @bind-Value="Rule.Action.RedirectUrl" Label="Redirect URL" Variant="Variant.Outlined" Required="true" Class="mb-4" />
-                <MudNumericField T="int?" @bind-Value="Rule.Action.RedirectStatusCode" Label="Redirect status code" Variant="Variant.Outlined" HideSpinButtons="true" Required="true" />
-            }
-            else if (Rule.Action?.Type == RuleActionType.FixedResponse)
-            {
-                <MudNumericField T="int?" @bind-Value="Rule.Action.FixedResponseStatusCode" Label="Response status code" Variant="Variant.Outlined" HideSpinButtons="true" Required="true" Class="mb-4" />
-                <MudTextField T="string" @bind-Value="Rule.Action.FixedResponseContentType" Label="Content type" Variant="Variant.Outlined" Class="mb-4" />
-                <MudTextField T="string" @bind-Value="Rule.Action.FixedResponseBody" Label="Response body" Variant="Variant.Outlined" Lines="3" />
-            }
+            <MudGrid Spacing="3">
+                <MudItem xs="12">
+                    <MudCard Outlined="true">
+                        <MudCardHeader>
+                            <CardHeaderContent>
+                                <MudText Typo="Typo.subtitle1"><strong>Details</strong></MudText>
+                            </CardHeaderContent>
+                        </MudCardHeader>
+                        <MudCardContent>
+                            <MudNumericField T="int" @bind-Value="Rule.Priority" Label="Priority" Variant="Variant.Outlined"
+                                            HideSpinButtons="true" Required="true" Class="mb-4" />
+                        </MudCardContent>
+                    </MudCard>
+                </MudItem>
+                
+                <MudItem xs="12">
+                    <MudCard Outlined="true">
+                        <MudCardHeader>
+                            <CardHeaderContent>
+                                <MudText Typo="Typo.subtitle1"><strong>Conditions</strong></MudText>
+                            </CardHeaderContent>
+                        </MudCardHeader>
+                        <MudCardContent>
+                            @foreach (var condition in Rule.Conditions)
+                            {
+                                <ConditionForm Condition="condition"
+                                            OnDelete="@(() => RemoveCondition(condition))" />
+                                <MudDivider/>
+                            }
+
+                            <MudStack AlignItems="AlignItems.Start" Row>
+                                <MudMenu Disabled="@(!CanAddCondition)" AnchorOrigin="Origin.BottomCenter" Class="mt-4">
+                                    <ActivatorContent>
+                                        <MudTooltip Disabled="@(AllowedConditionTypes.Any())" Text="This protocol does not support rule conditions.">
+                                            <MudButton Disabled="@(!CanAddCondition)" Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add">
+                                                Add condition
+                                            </MudButton>
+                                        </MudTooltip>
+                                    </ActivatorContent>
+                                    <ChildContent>
+                                        @foreach (var type in AvailableConditionTypes)
+                                        {
+                                            <MudMenuItem OnClick="@(() => AddCondition(type))">@type.GetDescription()</MudMenuItem>
+                                        }
+                                    </ChildContent>
+                                </MudMenu>
+                            </MudStack>
+                        </MudCardContent>
+                    </MudCard>
+                </MudItem>
+
+                <MudItem xs="12">
+                    <MudCard Outlined="true">
+                        <MudCardHeader>
+                            <CardHeaderContent>
+                                <MudText Typo="Typo.subtitle1"><strong>Action</strong></MudText>
+                            </CardHeaderContent>
+                        </MudCardHeader>
+                        <MudCardContent>
+                            <MudSelect T="RuleActionType" @bind-Value="Rule.Action.Type" Label="Action" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" Required="true" Class="mb-4">
+                                @foreach (var type in AllowedActionTypes)
+                                {
+                                    <MudSelectItem T="RuleActionType" Value="@type">@type.GetDescription()</MudSelectItem>
+                                }
+                            </MudSelect>
+
+                            @if (Rule.Action?.Type == RuleActionType.Forward)
+                            {
+                                <MudSelect T="Guid?" @bind-Value="SelectedTargetGroup" Label="Target group" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" Required="true">
+                                    @foreach (var group in TargetGroups)
+                                    {
+                                        <MudSelectItem T="Guid?" Value="@group.Id">@group.Name</MudSelectItem>
+                                    }
+                                </MudSelect>
+                            }
+                            else if (Rule.Action?.Type == RuleActionType.Redirect)
+                            {
+                                <MudTextField T="string" @bind-Value="Rule.Action.RedirectUrl" Label="Redirect URL" Variant="Variant.Outlined" Required="true" Class="mb-4" />
+                                <MudNumericField T="int?" @bind-Value="Rule.Action.RedirectStatusCode" Label="Redirect status code" Variant="Variant.Outlined" HideSpinButtons="true" Required="true" />
+                            }
+                            else if (Rule.Action?.Type == RuleActionType.FixedResponse)
+                            {
+                                <MudNumericField T="int?" @bind-Value="Rule.Action.FixedResponseStatusCode" Label="Response status code" Variant="Variant.Outlined" HideSpinButtons="true" Required="true" Class="mb-4" />
+                                <MudTextField T="string" @bind-Value="Rule.Action.FixedResponseContentType" Label="Content type" Variant="Variant.Outlined" Class="mb-4" />
+                                <MudTextField T="string" @bind-Value="Rule.Action.FixedResponseBody" Label="Response body" Variant="Variant.Outlined" Lines="3" />
+                            }
+                        </MudCardContent>
+                    </MudCard>
+                </MudItem>
+            </MudGrid>
         </MudForm>
     </DialogContent>
     <DialogActions>
diff --git a/tilework.ui/Components/Forms/ConditionForm.razor b/tilework.ui/Components/Forms/ConditionForm.razor
index 1258dcd..1d010be 100644
--- a/tilework.ui/Components/Forms/ConditionForm.razor
+++ b/tilework.ui/Components/Forms/ConditionForm.razor
@@ -5,28 +5,36 @@
 
 @namespace Tilework.Ui.Components.Forms
 
-<MudPaper Class="mb-4 p-4" Outlined="true">
-    <MudStack Spacing="1" Class="ma-1" StretchItems="StretchItems.Start" Row>
-        <MudText Typo="Typo.subtitle2">@Condition.Type.GetDescription()</MudText>
-        <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Variant="Variant.Text" Size="Size.Small" OnClick="OnDelete" />
-    </MudStack>
-    <MudDivider/>
-    <MudStack Spacing="1" Class="ma-2">
-        @for (var i = 0; i < Condition.Values.Count; i++)
-        {
-            var index = i;
-            <MudStack StretchItems="StretchItems.Start" Row>
-                <MudTextField @bind-Value="Condition.Values[index]" Label="Value" Variant="Variant.Outlined" Required="true" Margin="Margin.Dense" />
-                <MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Text" Size="Size.Small" OnClick="@(() => RemoveValue(index))" />
-            </MudStack>
-        }
-        <MudStack AlignItems="AlignItems.Start" Row>
-            <MudButton Size="Size.Small" Variant="Variant.Text" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="AddValue">
-                Add OR condition value
-            </MudButton>
+<style>
+.condition-prefix {
+    display:inline-block;
+    width:2ch;
+    text-align:center;
+}
+</style>
+
+<MudStack Spacing="1" Class="ma-2" StretchItems="StretchItems.Start" Row>
+    <MudText Typo="Typo.subtitle2"><strong>@Condition.Type.GetDescription()</strong></MudText>
+    <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Variant="Variant.Text" Size="Size.Small" OnClick="OnDelete"/>
+</MudStack>
+
+<MudStack Spacing="1" Class="ma-2">
+    @for (var i = 0; i < Condition.Values.Count; i++)
+    {
+        var index = i;
+        <MudStack AlignItems="AlignItems.Center" StretchItems="StretchItems.Middle" Row>
+            <MudText Typo="Typo.subtitle2" Class="condition-prefix"><strong>@(index == 0 ? "=" : "or")</strong></MudText>
+            <MudTextField @bind-Value="Condition.Values[index]" Variant="Variant.Outlined" Required="true" Margin="Margin.Dense" />
+            <MudIconButton Icon="@Icons.Material.Filled.DeleteOutline" Variant="Variant.Text" Size="Size.Small" OnClick="@(() => RemoveValue(index))" />
         </MudStack>
+    }
+    <MudStack AlignItems="AlignItems.Start" Row>
+        <MudText Typo="Typo.subtitle2" Class="condition-prefix"></MudText>
+        <MudButton Size="Size.Small" Variant="Variant.Text" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="AddValue">
+            Add
+        </MudButton>
     </MudStack>
-</MudPaper>
+</MudStack>
 
 @code {
     [Parameter] public Condition Condition { get; set; }