diff --git a/Oqtane.Client/Modules/Admin/Roles/Add.razor b/Oqtane.Client/Modules/Admin/Roles/Add.razor
index 6eb6802a..c7daf524 100644
--- a/Oqtane.Client/Modules/Admin/Roles/Add.razor
+++ b/Oqtane.Client/Modules/Admin/Roles/Add.razor
@@ -6,30 +6,32 @@
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
 <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
-    <div class="row mb-1 align-items-center">
-        <Label Class="col-sm-3" For="name" HelpText="Name Of The Role" ResourceKey="Name">Name:</Label>
-        <div class="col-sm-9">
-            <input id="name" class="form-control" @bind="@_name" maxlength="256" required />
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="name" HelpText="Name Of The Role" ResourceKey="Name">Name:</Label>
+            <div class="col-sm-9">
+                <input id="name" class="form-control" @bind="@_name" maxlength="256" required />
+            </div>
         </div>
-    </div>
-    <div class="row mb-1 align-items-center">
-        <Label Class="col-sm-3" For="description" HelpText="A Short Description Of The Role Which Describes Its Purpose" ResourceKey="Description">Description:</Label>
-        <div class="col-sm-9">
-            <textarea id="description" class="form-control" @bind="@_description" rows="5" maxlength="256" required></textarea>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="description" HelpText="A Short Description Of The Role Which Describes Its Purpose" ResourceKey="Description">Description:</Label>
+            <div class="col-sm-9">
+                <textarea id="description" class="form-control" @bind="@_description" rows="5" maxlength="256" required></textarea>
+            </div>
         </div>
-    </div>
-    <div class="row mb-1 align-items-center">
-        <Label Class="col-sm-3" For="isautoassigned" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role" ResourceKey="AutoAssigned">Auto Assigned?</Label>
-        <div class="col-sm-9">
-            <select id="isautoassigned" class="form-select" @bind="@_isautoassigned">
-                <option value="True">@SharedLocalizer["Yes"]</option>
-                <option value="False">@SharedLocalizer["No"]</option>
-            </select>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="isautoassigned" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role" ResourceKey="AutoAssigned">Auto Assigned?</Label>
+            <div class="col-sm-9">
+                <select id="isautoassigned" class="form-select" @bind="@_isautoassigned">
+                    <option value="True">@SharedLocalizer["Yes"]</option>
+                    <option value="False">@SharedLocalizer["No"]</option>
+                </select>
+            </div>
         </div>
+        <br /><br />
+        <button type="button" class="btn btn-success" @onclick="SaveRole">@SharedLocalizer["Save"]</button>
+        <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
     </div>
-    <br /><br />
-    <button type="button" class="btn btn-success" @onclick="SaveRole">@SharedLocalizer["Save"]</button>
-    <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 </form>
 
 @code {
diff --git a/Oqtane.Client/Modules/Admin/Roles/Edit.razor b/Oqtane.Client/Modules/Admin/Roles/Edit.razor
index 54d1bb0f..50eec71b 100644
--- a/Oqtane.Client/Modules/Admin/Roles/Edit.razor
+++ b/Oqtane.Client/Modules/Admin/Roles/Edit.razor
@@ -6,39 +6,34 @@
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
 <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="name" HelpText="Name Of The Role" ResourceKey="Name">Name:</Label>
-            </td>
-            <td>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="name" HelpText="Name Of The Role" ResourceKey="Name">Name:</Label>
+            <div class="col-sm-9">
                 <input id="name" class="form-control" @bind="@_name" maxlength="256" required />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="description" HelpText="A Short Description Of The Role Which Describes Its Purpose" ResourceKey="Description">Description:</Label>
-            </td>
-            <td>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="description" HelpText="A Short Description Of The Role Which Describes Its Purpose" ResourceKey="Description">Description:</Label>
+            <div class="col-sm-9">
                 <textarea id="description" class="form-control" @bind="@_description" rows="5" maxlength="256" required></textarea>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="isautoassigned" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role" ResourceKey="AutoAssigned">Auto Assigned?</Label>
-            </td>
-            <td>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="isautoassigned" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role" ResourceKey="AutoAssigned">Auto Assigned?</Label>
+            <div class="col-sm-9">
                 <select id="isautoassigned" class="form-select" @bind="@_isautoassigned">
                     <option value="True">@SharedLocalizer["Yes"]</option>
                     <option value="False">@SharedLocalizer["No"]</option>
                 </select>
-            </td>
-        </tr>
-    </table>
-    <button type="button" class="btn btn-success" @onclick="SaveRole">@SharedLocalizer["Save"]</button>
-    <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
-    <br /><br />
-    <AuditInfo CreatedBy="@_createdby" CreatedOn="@_createdon" ModifiedBy="@_modifiedby" ModifiedOn="@_modifiedon"></AuditInfo>
+            </div>
+        </div>
+        <br /><br />
+        <button type="button" class="btn btn-success" @onclick="SaveRole">@SharedLocalizer["Save"]</button>
+        <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
+        <br /><br />
+        <AuditInfo CreatedBy="@_createdby" CreatedOn="@_createdon" ModifiedBy="@_modifiedby" ModifiedOn="@_modifiedon"></AuditInfo>
+    </div>
 </form>
 
 @code {
diff --git a/Oqtane.Client/Modules/Admin/Roles/Users.razor b/Oqtane.Client/Modules/Admin/Roles/Users.razor
index 4732c9f5..8799a816 100644
--- a/Oqtane.Client/Modules/Admin/Roles/Users.razor
+++ b/Oqtane.Client/Modules/Admin/Roles/Users.razor
@@ -11,68 +11,63 @@
 }
 else
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="role" HelpText="The role you are assigning users to" ResourceKey="Role">Role: </Label>
-            </td>
-            <td>
-                <input id="role" class="form-control" @bind="@name" disabled />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="user" HelpText="Select a user" ResourceKey="User">User: </Label>
-            </td>
-            <td>
-                <select id="user" class="form-select" @bind="@userid">
-                    <option value="-1">&lt;@Localizer["User.Select"]&gt;</option>
-                    @foreach (UserRole userrole in users)
-                    {
-                        <option value="@(userrole.UserId)">@userrole.User.DisplayName</option>
-                    }
-                </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="effectiveDate" HelpText="The date that this role assignment is active" ResourceKey="EffectiveDate">Effective Date: </Label>
-            </td>
-            <td>
-                <input type="date" id="effectiveDate" class="form-control" @bind="@effectivedate" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="expiryDate" HelpText="The date that this role assignment expires" ResourceKey="ExpiryDate">Expiry Date: </Label>
-            </td>
-            <td>
-                <input type="date" id="expiryDate" class="form-control" @bind="@expirydate" />
-            </td>
-        </tr>
-    </table>
+
+<div class="container">
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="role" HelpText="The role you are assigning users to" ResourceKey="Role">Role: </Label>
+        <div class="col-sm-9">
+            <input id="role" class="form-control" @bind="@name" disabled />
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="user" HelpText="Select a user" ResourceKey="User">User: </Label>
+        <div class="col-sm-9">
+            <select id="user" class="form-select" @bind="@userid">
+                <option value="-1">&lt;@Localizer["User.Select"]&gt;</option>
+                @foreach (UserRole userrole in users)
+                {
+                    <option value="@(userrole.UserId)">@userrole.User.DisplayName</option>
+                }
+            </select>
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="effectiveDate" HelpText="The date that this role assignment is active" ResourceKey="EffectiveDate">Effective Date: </Label>
+        <div class="col-sm-9">
+            <input type="date" id="effectiveDate" class="form-control" @bind="@effectivedate" />
+        </div>
+    </div>
+    <div class="row mb-1 align-items-center">
+        <Label Class="col-sm-3" For="expiryDate" HelpText="The date that this role assignment expires" ResourceKey="ExpiryDate">Expiry Date: </Label>
+        <div class="col-sm-9">
+            <input type="date" id="expiryDate" class="form-control" @bind="@expirydate" />
+        </div>
+    </div>
+    <br /><br />
     <button type="button" class="btn btn-success" @onclick="SaveUserRole">@SharedLocalizer["Save"]</button>
     <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
-
     <hr class="app-rule" />
-    <p align="center">
-        <Pager Items="@userroles">
-            <Header>
+    <div class="row mb-1 align-items-center">
+        <p align="center">
+            <Pager Items="@userroles">
+                <Header>
                 <th>@Localizer["Users"]</th>
                 <th>@Localizer["Effective"]</th>
                 <th>@Localizer["Expiry"]</th>
                 <th>&nbsp;</th>
-            </Header>
-            <Row>
-                <td>@context.User.DisplayName</td>
-                <td>@context.EffectiveDate</td>
-                <td>@context.ExpiryDate</td>
-                <td>
-                    <ActionDialog Header="Remove User" Message="@string.Format(Localizer["Confirm.User.DeleteRole"], context.User.DisplayName)" Action="Delete" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeleteUserRole(context.UserRoleId))" Disabled="@(context.Role.IsAutoAssigned || PageState.User.Username == UserNames.Host)" ResourceKey="DeleteUserRole" />
-                </td>
-            </Row>
-        </Pager>
-    </p>
+                </Header>
+                <Row>
+                    <td>@context.User.DisplayName</td>
+                    <td>@context.EffectiveDate</td>
+                    <td>@context.ExpiryDate</td>
+                    <td>
+                        <ActionDialog Header="Remove User" Message="@string.Format(Localizer["Confirm.User.DeleteRole"], context.User.DisplayName)" Action="Delete" Security="SecurityAccessLevel.Admin" Class="btn btn-danger" OnClick="@(async () => await DeleteUserRole(context.UserRoleId))" Disabled="@(context.Role.IsAutoAssigned || PageState.User.Username == UserNames.Host)" ResourceKey="DeleteUserRole" />
+                    </td>
+                </Row>
+            </Pager>
+        </p>
+    </div>
+</div>
 }
 
 @code {
diff --git a/Oqtane.Client/Modules/Admin/Users/Add.razor b/Oqtane.Client/Modules/Admin/Users/Add.razor
index 386bd1b0..4cde0a47 100644
--- a/Oqtane.Client/Modules/Admin/Users/Add.razor
+++ b/Oqtane.Client/Modules/Admin/Users/Add.razor
@@ -11,87 +11,78 @@
     <TabPanel Name="Identity" ResourceKey="Identity">
         @if (profiles != null)
         {
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="username" HelpText="A unique username for a user. Note that this field can not be modified once it is saved." ResourceKey="Username"></Label>
-                    </td>
-                    <td>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="username" HelpText="A unique username for a user. Note that this field can not be modified once it is saved." ResourceKey="Username"></Label>
+                    <div class="col-sm-9">
                         <input id="username" class="form-control" @bind="@username" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="password" HelpText="The user's password. Please choose a password which is sufficiently secure." ResourceKey="Password"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="password" HelpText="The user's password. Please choose a password which is sufficiently secure." ResourceKey="Password"></Label>
+                    <div class="col-sm-9">
                         <input id="password" type="password" class="form-control" @bind="@password" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="confirm" HelpText="Please enter the password again to confirm it matches with the value above" ResourceKey="Confirm"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="confirm" HelpText="Please enter the password again to confirm it matches with the value above" ResourceKey="Confirm"></Label>
+                    <div class="col-sm-9">
                         <input id="confirm" type="password" class="form-control" @bind="@confirm" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="email" HelpText="The email address where the user will receive notifications" ResourceKey="Email"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="email" HelpText="The email address where the user will receive notifications" ResourceKey="Email"></Label>
+                    <div class="col-sm-9">
                         <input id="email" class="form-control" @bind="@email" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="displayname" HelpText="The full name of the user" ResourceKey="DisplayName"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="displayname" HelpText="The full name of the user" ResourceKey="DisplayName"></Label>
+                    <div class="col-sm-9">
                         <input id="displayname" class="form-control" @bind="@displayname" />
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+            </div>
+
         }
     </TabPanel>
     <TabPanel Name="Profile" ResourceKey="Profile">
         @if (profiles != null)
         {
-            <table class="table table-borderless">
-                @foreach (Profile profile in profiles)
-                {
-                    var p = profile;
-                    if (p.Category != category)
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    @foreach (Profile profile in profiles)
                     {
-                        <tr>
-                            <th colspan="2" style="text-align: center;">
-                                @p.Category
-                            </th>
-                        </tr>
-                        category = p.Category;
+                        var p = profile;
+                        if (p.Category != category)
+                        {
+                            <div class="col text-center pb-2">
+                                <strong>@p.Category</strong>
+                            </div>
+                            category = p.Category;
+                        }
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="@p.Name" HelpText="@p.Description">@p.Title</Label>
+                            <div class="col-sm-9">
+                                @if (p.IsRequired)
+                                {
+                                    <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" required @onchange="@(e => ProfileChanged(e, p.Name))" />
+                                }
+                                else
+                                {
+                                    <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" @onchange="@(e => ProfileChanged(e, p.Name))" />
+                                }
+                            </div>
+                        </div>
                     }
-                    <tr>
-                        <td width="30%">
-                            <Label For="@p.Name" HelpText="@p.Description">@p.Title</Label>
-                        </td>
-                        <td>
-                            @if (p.IsRequired)
-                            {
-                                <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" required @onchange="@(e => ProfileChanged(e, p.Name))" />
-                            }
-                            else
-                            {
-                                <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" @onchange="@(e => ProfileChanged(e, p.Name))" />
-                            }
-                        </td>
-                    </tr>
-                }
-            </table>
+
+                </div>
+            </div>
         }
     </TabPanel>
 </TabStrip>
-
+<br />
+<br />
 <button type="button" class="btn btn-success" @onclick="SaveUser">@SharedLocalizer["Save"]</button>
 <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
 
diff --git a/Oqtane.Client/Modules/Admin/Users/Edit.razor b/Oqtane.Client/Modules/Admin/Users/Edit.razor
index 5f53e756..b95ea66b 100644
--- a/Oqtane.Client/Modules/Admin/Users/Edit.razor
+++ b/Oqtane.Client/Modules/Admin/Users/Edit.razor
@@ -20,73 +20,91 @@ else
     <TabPanel Name="Identity" ResourceKey="Identity">
         @if (profiles != null)
         {
-            <table class="table table-borderless">
-                <tr>
-                    <td width="30%">
-                        <Label For="username" HelpText="The unique username for a user. Note that this field can not be modified." ResourceKey="Username"></Label>
-                    </td>
-                    <td>
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="username" HelpText="The unique username for a user. Note that this field can not be modified." ResourceKey="Username"></Label>
+                    <div class="col-sm-9">
                         <input id="username" class="form-control" @bind="@username" readonly />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="password" HelpText="The user's password. Please choose a password which is sufficiently secure." ResourceKey="Password"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="password" HelpText="The user's password. Please choose a password which is sufficiently secure." ResourceKey="Password"></Label>
+                    <div class="col-sm-9">
                         <input id="password" type="password" class="form-control" @bind="@password" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="confirm" HelpText="Please enter the password again to confirm it matches with the value above" ResourceKey="Confirm"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="confirm" HelpText="Please enter the password again to confirm it matches with the value above" ResourceKey="Confirm"></Label>
+                    <div class="col-sm-9">
                         <input id="confirm" type="password" class="form-control" @bind="@confirm" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="email" HelpText="The email address where the user will receive notifications" ResourceKey="Email"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="email" HelpText="The email address where the user will receive notifications" ResourceKey="Email"></Label>
+                    <div class="col-sm-9">
                         <input id="email" class="form-control" @bind="@email" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="displayname" HelpText="The full name of the user" ResourceKey="DisplayName"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="displayname" HelpText="The full name of the user" ResourceKey="DisplayName"></Label>
+                    <div class="col-sm-9">
                         <input id="displayname" class="form-control" @bind="@displayname" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="@photofileid.ToString()" HelpText="A photo of the user" ResourceKey="Photo"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="@photofileid.ToString()" HelpText="A photo of the user" ResourceKey="Photo"></Label>
+                    <div class="col-sm-9">
                         <FileManager FileId="@photofileid" @ref="filemanager" />
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <Label For="isdeleted" HelpText="Indicate if the user is active" ResourceKey="IsDeleted"></Label>
-                    </td>
-                    <td>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="isdeleted" HelpText="Indicate if the user is active" ResourceKey="IsDeleted"></Label>
+                    <div class="col-sm-9">
                         <select id="isdeleted" class="form-select" @bind="@isdeleted">
                             <option value="True">@SharedLocalizer["Yes"]</option>
                             <option value="False">@SharedLocalizer["No"]</option>
                         </select>
-                    </td>
-                </tr>
-            </table>
+                    </div>
+                </div>
+            </div>
+
         }
     </TabPanel>
     <TabPanel Name="Profile" ResourceKey="Profile">
         @if (profiles != null)
         {
-            <table class="table table-borderless">
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    @foreach (Profile profile in profiles)
+                    {
+                        var p = profile;
+                        if (p.Category != category)
+                        {
+                            <div class="col text-center pb-2">
+                                <strong>@p.Category</strong>
+                            </div>
+                            category = p.Category;
+                        }
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="@p.Name" HelpText="@p.Description">@p.Title</Label>
+                            <div class="col-sm-9">
+                                @if (p.IsRequired)
+                                {
+                                    <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" required @onchange="@(e => ProfileChanged(e, p.Name))" />
+                                }
+                                else
+                                {
+                                    <input id="@p.Name" class="form-control" maxlength="@p.MaxLength" value="@GetProfileValue(p.Name, p.DefaultValue)" @onchange="@(e => ProfileChanged(e, p.Name))" />
+                                }
+                            </div>
+                        </div>
+                    }
+
+                </div>
+            </div>
+
+
+            @*<table class="table table-borderless">
                 @foreach (Profile profile in profiles)
                 {
                     var p = profile;
@@ -115,7 +133,7 @@ else
                         </td>
                     </tr>
                 }
-            </table>
+            </table>*@
         }
     </TabPanel>
 </TabStrip>
diff --git a/Oqtane.Client/Modules/Admin/Users/Index.razor b/Oqtane.Client/Modules/Admin/Users/Index.razor
index e14dc97d..a947ce96 100644
--- a/Oqtane.Client/Modules/Admin/Users/Index.razor
+++ b/Oqtane.Client/Modules/Admin/Users/Index.razor
@@ -14,26 +14,25 @@
 }
 else
 {
-    <table class="table table-borderless">
-        <tr>
-            <td>
-                <div><ActionLink Action="Add" Text="Add User" ResourceKey="AddUser" /></div>
-            </td>
-            <td>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <div class="col-sm-4">
+                <ActionLink Action="Add" Text="Add User" ResourceKey="AddUser" />
+            </div>
+            <div class="col-sm-4">
                 <input class="form-control" @bind="@_search" />
-            </td>
-            <td>
+            </div>
+            <div class="col-sm-4">
                 <button class="btn btn-secondary" @onclick="OnSearch">@SharedLocalizer["Search"]</button>
-            </td>
-        </tr>
-    </table>
-
+            </div>
+        </div>
+    </div>
     <Pager Items="@userroles">
         <Header>
-            <th style="width: 1px;">&nbsp;</th>
-            <th style="width: 1px;">&nbsp;</th>
-            <th style="width: 1px;">&nbsp;</th>
-            <th>@SharedLocalizer["Name"]</th>
+        <th style="width: 1px;">&nbsp;</th>
+        <th style="width: 1px;">&nbsp;</th>
+        <th style="width: 1px;">&nbsp;</th>
+        <th>@SharedLocalizer["Name"]</th>
         </Header>
         <Row>
             <td>
diff --git a/Oqtane.Client/Modules/Admin/Users/Roles.razor b/Oqtane.Client/Modules/Admin/Users/Roles.razor
index 260ecb12..59e4d00c 100644
--- a/Oqtane.Client/Modules/Admin/Users/Roles.razor
+++ b/Oqtane.Client/Modules/Admin/Users/Roles.razor
@@ -12,20 +12,16 @@
 }
 else
 {
-    <table class="table table-borderless">
-        <tr>
-            <td width="30%">
-                <Label For="user" HelpText="The user you are assigning roles to" ResourceKey="User">User: </Label>
-            </td>
-            <td>
+    <div class="container">
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="user" HelpText="The user you are assigning roles to" ResourceKey="User">User: </Label>
+            <div class="col-sm-9">
                 <input id="user" class="form-control" @bind="@name" disabled />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="role" HelpText="Select a role" ResourceKey="Role">Role: </Label>
-            </td>
-            <td>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="role" HelpText="Select a role" ResourceKey="Role">Role: </Label>
+            <div class="col-sm-9">
                 <select id="role" class="form-select" @bind="@roleid">
                     <option value="-1">&lt;@Localizer["Role.Select"]&gt;</option>
                     @foreach (Role role in roles)
@@ -33,36 +29,34 @@ else
                         <option value="@(role.RoleId)">@role.Name</option>
                     }
                 </select>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="effectiveDate" HelpText="The date that this role assignment is active" ResourceKey="EffectiveDate">Effective Date: </Label>
-            </td>
-            <td>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="effectiveDate" HelpText="The date that this role assignment is active" ResourceKey="EffectiveDate">Effective Date: </Label>
+            <div class="col-sm-9">
                 <input id="effectiveDate" class="form-control" @bind="@effectivedate" />
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <Label For="expiryDate" HelpText="The date that this role assignment expires" ResourceKey="ExpiryDate">Expiry Date: </Label>
-            </td>
-            <td>
+            </div>
+        </div>
+        <div class="row mb-1 align-items-center">
+            <Label Class="col-sm-3" For="expiryDate" HelpText="The date that this role assignment expires" ResourceKey="ExpiryDate">Expiry Date: </Label>
+            <div class="col-sm-9">
                 <input id="expiryDate" class="form-control" @bind="@expirydate" />
-            </td>
-        </tr>
-    </table>
+            </div>
+        </div>
+
+    </div>
+    <br />
+    <br />
     <button type="button" class="btn btn-success" @onclick="SaveUserRole">@SharedLocalizer["Save"]</button>
     <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
-
     <hr class="app-rule" />
     <p align="center">
         <Pager Items="@userroles">
             <Header>
-                <th>@Localizer["Roles"]</th>
-                <th>@Localizer["Effective"]</th>
-                <th>@Localizer["Expiry"]</th>
-                <th>&nbsp;</th>
+            <th>@Localizer["Roles"]</th>
+            <th>@Localizer["Effective"]</th>
+            <th>@Localizer["Expiry"]</th>
+            <th>&nbsp;</th>
             </Header>
             <Row>
                 <td>@context.Role.Name</td>