diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html
index e4b83b0b0f..adcbdc8801 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html
@@ -15,14 +15,14 @@
   ~  limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
     <div class="px-5">
         <h3 class="primary-color">Access Policies</h3>
     </div>
-    <div class="px-5 flex-1">
+    <div class="pb-5 px-5 flex-1">
         <router-outlet></router-outlet>
     </div>
 </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html
index ef7b325143..5c0af4ab60 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html
@@ -23,67 +23,69 @@
     } @else {
         @if (policyComponentState$ | async; as policyComponentState) {
             @if (flowConfiguration$ | async; as flowConfiguration) {
-                <div class="component-access-policies flex flex-col h-full gap-y-2">
+                <div class="component-access-policies flex flex-col h-full">
                     <error-banner></error-banner>
-                    <div class="accent-color font-medium">
-                        <div class="mb-2">
-                            @switch (accessPolicyState.policyStatus) {
-                                @case (PolicyStatus.NotFound) {
-                                    No policy for the specified resource.
-                                    @if (flowConfiguration.supportsConfigurableAuthorizer) {
-                                        <a (click)="createNewPolicy()">Create</a> a new policy.
-                                    }
-                                }
-                                @case (PolicyStatus.Inherited) {
-                                    @if (accessPolicyState.accessPolicy) {
-                                        <ng-container
-                                            *ngTemplateOutlet="
-                                                getTemplateForInheritedPolicy(accessPolicyState.accessPolicy);
-                                                context: {
-                                                    $implicit: accessPolicyState.accessPolicy,
-                                                    supportsConfigurableAuthorizer:
-                                                        flowConfiguration.supportsConfigurableAuthorizer
-                                                }
-                                            "></ng-container>
-                                    }
-                                }
-                                @case (PolicyStatus.Forbidden) {
-                                    Not authorized to access the policy for the specified resource.
-                                }
-                            }
-                        </div>
-                    </div>
                     <div class="flex justify-between items-center">
-                        <form [formGroup]="policyForm">
-                            <div class="flex gap-x-2">
-                                <component-context
-                                    [type]="getContextType()"
-                                    [name]="
-                                        policyComponentState.label ? policyComponentState.label : resourceIdentifier
-                                    "></component-context>
-                                <div class="policy-select">
-                                    <mat-form-field>
-                                        <mat-label>Policy</mat-label>
-                                        <mat-select
-                                            formControlName="policyAction"
-                                            (selectionChange)="policyActionChanged($event.value)">
-                                            @for (option of policyActionOptions; track option) {
-                                                @if (isComponentPolicy(option, policyComponentState)) {
-                                                    <mat-option
-                                                        [value]="option.value"
-                                                        nifiTooltip
-                                                        [tooltipComponentType]="TextTip"
-                                                        [tooltipInputData]="option.description"
-                                                        [delayClose]="false"
-                                                        >{{ option.text }}
-                                                    </mat-option>
+                        <div>
+                            <form [formGroup]="policyForm" class="my-2">
+                                <div class="flex gap-x-2">
+                                    <component-context
+                                        [type]="getContextType()"
+                                        [name]="
+                                            policyComponentState.label ? policyComponentState.label : resourceIdentifier
+                                        "></component-context>
+                                    <div class="policy-select">
+                                        <mat-form-field subscriptSizing="dynamic">
+                                            <mat-label>Policy</mat-label>
+                                            <mat-select
+                                                formControlName="policyAction"
+                                                (selectionChange)="policyActionChanged($event.value)">
+                                                @for (option of policyActionOptions; track option) {
+                                                    @if (isComponentPolicy(option, policyComponentState)) {
+                                                        <mat-option
+                                                            [value]="option.value"
+                                                            nifiTooltip
+                                                            [tooltipComponentType]="TextTip"
+                                                            [tooltipInputData]="option.description"
+                                                            [delayClose]="false"
+                                                            >{{ option.text }}
+                                                        </mat-option>
+                                                    }
                                                 }
+                                            </mat-select>
+                                        </mat-form-field>
+                                    </div>
+                                </div>
+                            </form>
+                            <div class="accent-color font-medium my-2">
+                                <div>
+                                    @switch (accessPolicyState.policyStatus) {
+                                        @case (PolicyStatus.NotFound) {
+                                            No policy for the specified resource.
+                                            @if (flowConfiguration.supportsConfigurableAuthorizer) {
+                                                <a (click)="createNewPolicy()">Create</a> a new policy.
                                             }
-                                        </mat-select>
-                                    </mat-form-field>
+                                        }
+                                        @case (PolicyStatus.Inherited) {
+                                            @if (accessPolicyState.accessPolicy) {
+                                                <ng-container
+                                                    *ngTemplateOutlet="
+                                                        getTemplateForInheritedPolicy(accessPolicyState.accessPolicy);
+                                                        context: {
+                                                            $implicit: accessPolicyState.accessPolicy,
+                                                            supportsConfigurableAuthorizer:
+                                                                flowConfiguration.supportsConfigurableAuthorizer
+                                                        }
+                                                    "></ng-container>
+                                            }
+                                        }
+                                        @case (PolicyStatus.Forbidden) {
+                                            Not authorized to access the policy for the specified resource.
+                                        }
+                                    }
                                 </div>
                             </div>
-                        </form>
+                        </div>
                         @if (flowConfiguration.supportsConfigurableAuthorizer) {
                             <div class="flex gap-x-2">
                                 <button
@@ -106,7 +108,7 @@
                         }
                     </div>
                     @if (currentUser$ | async; as user) {
-                        <div class="flex-1 -mt-2">
+                        <div class="flex-1">
                             <policy-table
                                 [policy]="accessPolicyState.accessPolicy"
                                 [supportsPolicyModification]="
@@ -116,7 +118,7 @@
                                 (removeTenantFromPolicy)="removeTenantFromPolicy($event)"></policy-table>
                         </div>
                     }
-                    <div class="flex justify-between">
+                    <div class="flex justify-between mt-2">
                         <div class="refresh-container flex items-center gap-x-2">
                             <button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
                                 <i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html
index 1a82d2c956..50c825de4c 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html
@@ -22,66 +22,19 @@
         </div>
     } @else {
         @if (flowConfiguration$ | async; as flowConfiguration) {
-            <div class="global-access-policies flex flex-col h-full gap-y-2">
+            <div class="global-access-policies flex flex-col h-full">
                 <error-banner></error-banner>
-                <div class="accent-color font-medium">
-                    <div class="mb-2">
-                        @switch (accessPolicyState.policyStatus) {
-                            @case (PolicyStatus.NotFound) {
-                                No policy for the specified resource.
-                                @if (flowConfiguration.supportsConfigurableAuthorizer) {
-                                    <a (click)="createNewPolicy()">Create</a> a new policy.
-                                }
-                            }
-                            @case (PolicyStatus.Inherited) {
-                                @if (accessPolicyState.accessPolicy) {
-                                    <ng-container
-                                        *ngTemplateOutlet="
-                                            getTemplateForInheritedPolicy(accessPolicyState.accessPolicy);
-                                            context: {
-                                                $implicit: accessPolicyState.accessPolicy,
-                                                supportsConfigurableAuthorizer:
-                                                    flowConfiguration.supportsConfigurableAuthorizer
-                                            }
-                                        "></ng-container>
-                                }
-                            }
-                            @case (PolicyStatus.Forbidden) {
-                                Not authorized to access the policy for the specified resource.
-                            }
-                        }
-                    </div>
-                </div>
                 <div class="flex justify-between items-center">
-                    <form [formGroup]="policyForm">
-                        <div class="flex gap-x-2">
-                            <div class="resource-select">
-                                <mat-form-field>
-                                    <mat-label>Policy</mat-label>
-                                    <mat-select
-                                        formControlName="resource"
-                                        (selectionChange)="resourceChanged($event.value)">
-                                        @for (option of resourceOptions; track option) {
-                                            <mat-option
-                                                [value]="option.value"
-                                                nifiTooltip
-                                                [tooltipComponentType]="TextTip"
-                                                [tooltipInputData]="option.description"
-                                                [delayClose]="false"
-                                                >{{ option.text }}
-                                            </mat-option>
-                                        }
-                                    </mat-select>
-                                </mat-form-field>
-                            </div>
-                            @if (supportsResourceIdentifier) {
-                                <div class="resource-identifier-select">
-                                    <mat-form-field>
-                                        <mat-label>Option</mat-label>
+                    <div>
+                        <form [formGroup]="policyForm" class="my-2">
+                            <div class="flex gap-x-2">
+                                <div class="resource-select">
+                                    <mat-form-field subscriptSizing="dynamic">
+                                        <mat-label>Policy</mat-label>
                                         <mat-select
-                                            formControlName="resourceIdentifier"
-                                            (selectionChange)="resourceIdentifierChanged()">
-                                            @for (option of requiredPermissionOptions; track option) {
+                                            formControlName="resource"
+                                            (selectionChange)="resourceChanged($event.value)">
+                                            @for (option of resourceOptions; track option) {
                                                 <mat-option
                                                     [value]="option.value"
                                                     nifiTooltip
@@ -94,18 +47,67 @@
                                         </mat-select>
                                     </mat-form-field>
                                 </div>
-                            }
-                            <div class="action-select" [class.hidden]="!supportsReadWriteAction">
-                                <mat-form-field>
-                                    <mat-label>Action</mat-label>
-                                    <mat-select formControlName="action" (selectionChange)="actionChanged()">
-                                        <mat-option [value]="Action.Read">view</mat-option>
-                                        <mat-option [value]="Action.Write">modify</mat-option>
-                                    </mat-select>
-                                </mat-form-field>
+                                @if (supportsResourceIdentifier) {
+                                    <div class="resource-identifier-select">
+                                        <mat-form-field subscriptSizing="dynamic">
+                                            <mat-label>Option</mat-label>
+                                            <mat-select
+                                                formControlName="resourceIdentifier"
+                                                (selectionChange)="resourceIdentifierChanged()">
+                                                @for (option of requiredPermissionOptions; track option) {
+                                                    <mat-option
+                                                        [value]="option.value"
+                                                        nifiTooltip
+                                                        [tooltipComponentType]="TextTip"
+                                                        [tooltipInputData]="option.description"
+                                                        [delayClose]="false"
+                                                        >{{ option.text }}
+                                                    </mat-option>
+                                                }
+                                            </mat-select>
+                                        </mat-form-field>
+                                    </div>
+                                }
+                                <div class="action-select" [class.hidden]="!supportsReadWriteAction">
+                                    <mat-form-field subscriptSizing="dynamic">
+                                        <mat-label>Action</mat-label>
+                                        <mat-select formControlName="action" (selectionChange)="actionChanged()">
+                                            <mat-option [value]="Action.Read">view</mat-option>
+                                            <mat-option [value]="Action.Write">modify</mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+                                </div>
+                            </div>
+                        </form>
+                        <div class="accent-color font-medium my-2">
+                            <div>
+                                @switch (accessPolicyState.policyStatus) {
+                                    @case (PolicyStatus.NotFound) {
+                                        No policy for the specified resource.
+                                        @if (flowConfiguration.supportsConfigurableAuthorizer) {
+                                            <a (click)="createNewPolicy()">Create</a> a new policy.
+                                        }
+                                    }
+                                    @case (PolicyStatus.Inherited) {
+                                        @if (accessPolicyState.accessPolicy) {
+                                            <ng-container
+                                                *ngTemplateOutlet="
+                                                    getTemplateForInheritedPolicy(accessPolicyState.accessPolicy);
+                                                    context: {
+                                                        $implicit: accessPolicyState.accessPolicy,
+                                                        supportsConfigurableAuthorizer:
+                                                            flowConfiguration.supportsConfigurableAuthorizer
+                                                    }
+                                                "></ng-container>
+                                        }
+                                    }
+                                    @case (PolicyStatus.Forbidden) {
+                                        Not authorized to access the policy for the specified resource.
+                                    }
+                                }
                             </div>
                         </div>
-                    </form>
+                    </div>
                     @if (flowConfiguration.supportsConfigurableAuthorizer) {
                         <div class="flex gap-x-2 items-center">
                             <button
@@ -128,7 +130,7 @@
                     }
                 </div>
                 @if (currentUser$ | async; as user) {
-                    <div class="flex-1 -mt-2">
+                    <div class="flex-1">
                         <policy-table
                             [policy]="accessPolicyState.accessPolicy"
                             [supportsPolicyModification]="
@@ -138,7 +140,7 @@
                             (removeTenantFromPolicy)="removeTenantFromPolicy($event)"></policy-table>
                     </div>
                 }
-                <div class="flex justify-between">
+                <div class="flex justify-between mt-2">
                     <div class="refresh-container flex items-center gap-x-2">
                         <button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
                             <i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html
index ac2fefd54b..da9a984ff5 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html
@@ -15,11 +15,11 @@
   ~  limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1 flex flex-col">
+    <div class="pb-5 px-5 flex-1 flex flex-col">
         <h3 class="primary-color">NiFi Bulletin Board</h3>
         <bulletin-board class="flex-1"></bulletin-board>
     </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.html
index ab03775bc2..d543a096e0 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.html
@@ -17,16 +17,16 @@
 
 <div class="bulletin-board-list-container h-full flex flex-col">
     <div class="bulletin-board-list-filter-container">
-        <form [formGroup]="filterForm">
-            <div class="flex pt-2">
+        <form [formGroup]="filterForm" class="my-2">
+            <div class="flex">
                 <div class="mr-2">
-                    <mat-form-field>
+                    <mat-form-field subscriptSizing="dynamic">
                         <mat-label>Filter</mat-label>
                         <input matInput type="text" class="small" formControlName="filterTerm" />
                     </mat-form-field>
                 </div>
                 <div>
-                    <mat-form-field>
+                    <mat-form-field subscriptSizing="dynamic">
                         <mat-label>Filter By</mat-label>
                         <mat-select formControlName="filterColumn">
                             <mat-option value="message"> message </mat-option>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/feature/cluster.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/feature/cluster.component.html
index 2037e0cbd3..0714a092d6 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/feature/cluster.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/feature/cluster.component.html
@@ -15,43 +15,45 @@
   ~ limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1 flex flex-col gap-y-2">
+    <div class="pb-5 px-5 flex-1 flex flex-col">
         <h3 class="primary-color">NiFi Cluster</h3>
         <error-banner></error-banner>
-        @if (getTabLinks(); as tabs) {
-            <!-- Don't show the tab bar if there is only 1 tab to show -->
-            <div class="cluster-tabs" [class.hidden]="tabs.length === 1">
-                <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
-                    @for (tab of tabs; track tab) {
-                        <a
-                            mat-tab-link
-                            [routerLink]="[tab.link]"
-                            routerLinkActive
-                            #rla="routerLinkActive"
-                            [active]="rla.isActive">
-                            {{ tab.label }}
-                        </a>
-                    }
-                </nav>
+        <div class="flex flex-col h-full gap-y-2">
+            @if (getTabLinks(); as tabs) {
+                <!-- Don't show the tab bar if there is only 1 tab to show -->
+                <div class="cluster-tabs" [class.hidden]="tabs.length === 1">
+                    <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
+                        @for (tab of tabs; track tab) {
+                            <a
+                                mat-tab-link
+                                [routerLink]="[tab.link]"
+                                routerLinkActive
+                                #rla="routerLinkActive"
+                                [active]="rla.isActive">
+                                {{ tab.label }}
+                            </a>
+                        }
+                    </nav>
+                </div>
+            }
+            <div class="pt-4 flex-1">
+                <mat-tab-nav-panel #tabPanel>
+                    <router-outlet></router-outlet>
+                </mat-tab-nav-panel>
             </div>
-        }
-        <div class="pt-4 flex-1">
-            <mat-tab-nav-panel #tabPanel>
-                <router-outlet></router-outlet>
-            </mat-tab-nav-panel>
-        </div>
 
-        <div class="flex justify-between align-middle">
-            <div class="refresh-container flex items-center gap-x-2">
-                <button mat-icon-button color="primary" (click)="refresh()">
-                    <i class="fa fa-refresh" [class.fa-spin]="listingStatus() === 'loading'"></i>
-                </button>
-                <div>Last updated:</div>
-                <div class="accent-color font-medium">{{ loadedTimestamp() }}</div>
+            <div class="flex justify-between align-middle">
+                <div class="refresh-container flex items-center gap-x-2">
+                    <button mat-icon-button color="primary" (click)="refresh()">
+                        <i class="fa fa-refresh" [class.fa-spin]="listingStatus() === 'loading'"></i>
+                    </button>
+                    <div>Last updated:</div>
+                    <div class="accent-color font-medium">{{ loadedTimestamp() }}</div>
+                </div>
             </div>
         </div>
     </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/common/cluster-table-filter/cluster-table-filter.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/common/cluster-table-filter/cluster-table-filter.component.html
index d5a29ae3f2..70e936fd58 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/common/cluster-table-filter/cluster-table-filter.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/common/cluster-table-filter/cluster-table-filter.component.html
@@ -15,28 +15,28 @@
 ~  limitations under the License.
 -->
 
-<div>
-    <div class="accent-color font-medium {{ showFilterMatchedLabel ? 'visible' : 'invisible' }}">
-        Filter matched {{ filteredCount }} of {{ totalCount }}
+<div class="flex justify-between items-center">
+    <div>
+        <form [formGroup]="filterForm" class="my-2">
+            <div class="flex gap-x-2">
+                <div>
+                    <mat-form-field subscriptSizing="dynamic">
+                        <mat-label>Filter</mat-label>
+                        <input matInput type="text" class="small" formControlName="filterTerm" />
+                    </mat-form-field>
+                </div>
+                <div>
+                    <mat-form-field subscriptSizing="dynamic">
+                        <mat-label>Filter By</mat-label>
+                        <mat-select formControlName="filterColumn">
+                            @for (option of filterableColumns; track option) {
+                                <mat-option [value]="option.key"> {{ option.label }}</mat-option>
+                            }
+                        </mat-select>
+                    </mat-form-field>
+                </div>
+            </div>
+        </form>
+        <div class="my-2 accent-color font-medium">Filter matched {{ filteredCount }} of {{ totalCount }}</div>
     </div>
-    <form [formGroup]="filterForm">
-        <div class="flex pt-1 gap-1 items-baseline">
-            <div>
-                <mat-form-field>
-                    <mat-label>Filter</mat-label>
-                    <input matInput type="text" class="small" formControlName="filterTerm" />
-                </mat-form-field>
-            </div>
-            <div>
-                <mat-form-field>
-                    <mat-label>Filter By</mat-label>
-                    <mat-select formControlName="filterColumn">
-                        @for (option of filterableColumns; track option) {
-                            <mat-option [value]="option.key"> {{ option.label }}</mat-option>
-                        }
-                    </mat-select>
-                </mat-form-field>
-            </div>
-        </div>
-    </form>
 </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html
index 875942461a..5390875065 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html
@@ -15,11 +15,11 @@
   ~  limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1 flex flex-col">
+    <div class="pb-5 px-5 flex-1 flex flex-col">
         <h3 class="primary-color">NiFi Counters</h3>
         <counter-listing class="flex-1"></counter-listing>
     </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.html
index 6d3424f6cb..e6b0798ce4 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.html
@@ -16,17 +16,16 @@
 -->
 <div class="counter-table h-full flex flex-col">
     <div class="counter-table-filter-container">
-        <div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
-        <form [formGroup]="filterForm">
-            <div class="flex pt-2">
+        <form [formGroup]="filterForm" class="my-2">
+            <div class="flex">
                 <div class="mr-2">
-                    <mat-form-field>
+                    <mat-form-field subscriptSizing="dynamic">
                         <mat-label>Filter</mat-label>
                         <input matInput type="text" class="small" formControlName="filterTerm" />
                     </mat-form-field>
                 </div>
                 <div>
-                    <mat-form-field>
+                    <mat-form-field subscriptSizing="dynamic">
                         <mat-label>Filter By</mat-label>
                         <mat-select formControlName="filterColumn">
                             <mat-option value="name"> name </mat-option>
@@ -36,6 +35,7 @@
                 </div>
             </div>
         </form>
+        <div class="my-2 accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
     </div>
     <div class="flex-1 relative">
         <div class="listing-table overflow-y-auto absolute inset-0">
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/feature/flow-configuration-history.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/feature/flow-configuration-history.component.html
index 450435febe..078c7603e7 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/feature/flow-configuration-history.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/feature/flow-configuration-history.component.html
@@ -15,11 +15,11 @@
   ~ limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1 flex flex-col">
+    <div class="pb-5 px-5 flex-1 flex flex-col">
         <h3 class="primary-color">Flow Configuration History</h3>
         <flow-configuration-history-listing class="flex-1"></flow-configuration-history-listing>
     </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.html
index ab130b8092..d703767be9 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.html
@@ -21,19 +21,19 @@
             <ngx-skeleton-loader count="3"></ngx-skeleton-loader>
         </div>
     } @else {
-        <div class="flow-configuration-history-listing flex flex-col h-full gap-y-2">
+        <div class="flow-configuration-history-listing flex flex-col h-full">
             <div class="flex align-middle justify-between">
                 <div class="flow-configuration-filter flex-1">
-                    <form [formGroup]="filterForm">
-                        <div class="flex pt-2 gap-1 items-baseline">
+                    <form [formGroup]="filterForm" class="my-2">
+                        <div class="flex gap-1 items-baseline">
                             <div>
-                                <mat-form-field>
+                                <mat-form-field subscriptSizing="dynamic">
                                     <mat-label>Filter</mat-label>
                                     <input matInput type="text" class="small" formControlName="filterTerm" />
                                 </mat-form-field>
                             </div>
                             <div>
-                                <mat-form-field>
+                                <mat-form-field subscriptSizing="dynamic">
                                     <mat-label>Filter By</mat-label>
                                     <mat-select formControlName="filterColumn">
                                         @for (option of filterableColumns; track option) {
@@ -43,7 +43,7 @@
                                 </mat-form-field>
                             </div>
                             <div class="flex ml-6 gap-x-2">
-                                <mat-form-field>
+                                <mat-form-field subscriptSizing="dynamic">
                                     <mat-label>Date Range</mat-label>
                                     <mat-date-range-input [rangePicker]="picker">
                                         <input
@@ -61,7 +61,7 @@
                                     <mat-date-range-picker #picker></mat-date-range-picker>
                                 </mat-form-field>
                                 <div>
-                                    <mat-form-field>
+                                    <mat-form-field subscriptSizing="dynamic">
                                         <mat-label>Start Time ({{ (about$ | async)?.timezone }})</mat-label>
                                         <input
                                             matInput
@@ -73,7 +73,7 @@
                                     </mat-form-field>
                                 </div>
                                 <div>
-                                    <mat-form-field>
+                                    <mat-form-field subscriptSizing="dynamic">
                                         <mat-label>End Time ({{ (about$ | async)?.timezone }})</mat-label>
                                         <input
                                             matInput
@@ -109,7 +109,7 @@
                     (sortChanged)="sortChanged($event)"></flow-configuration-history-table>
             </div>
 
-            <div class="flex justify-between align-middle">
+            <div class="flex justify-between align-middle mt-2">
                 <div class="refresh-container flex items-center gap-x-2">
                     <button mat-icon-button color="primary" (click)="refresh()">
                         <i class="fa fa-refresh" [class.fa-spin]="state.status === 'loading'"></i>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
index 23b6d035b4..b34a7a03ec 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
@@ -17,17 +17,21 @@
 
 <div class="local-changes-table h-full flex flex-col">
     <div>
-        <div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
-        <form [formGroup]="filterForm">
-            <div class="flex pt-2">
-                <div class="mr-2">
-                    <mat-form-field>
-                        <mat-label>Filter</mat-label>
-                        <input matInput type="text" class="small" formControlName="filterTerm" />
-                    </mat-form-field>
+        <div>
+            <form [formGroup]="filterForm" class="my-2">
+                <div class="flex pt-2">
+                    <div class="mr-2">
+                        <mat-form-field subscriptSizing="dynamic">
+                            <mat-label>Filter</mat-label>
+                            <input matInput type="text" class="small" formControlName="filterTerm" />
+                        </mat-form-field>
+                    </div>
                 </div>
+            </form>
+            <div class="my-2 accent-color leading-none font-medium">
+                Displaying {{ filteredCount }} of {{ totalCount }}
             </div>
-        </form>
+        </div>
     </div>
     <div class="listing-table flex-1 relative">
         <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html
index d0c0083a7d..32fad2f672 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html
@@ -43,10 +43,10 @@
                 </div>
                 <div>
                     <div>Flow Description</div>
-                    @if (versionControlInformation.flowDescription === '') {
-                        <div class="unset surface-color">Empty string set</div>
+                    @if (!versionControlInformation.flowDescription) {
+                        <div class="unset surface-color">No value set</div>
                     } @else {
-                        <div class="accent-color">{{ versionControlInformation.flowDescription }}</div>
+                        <div class="accent-color font-medium">{{ versionControlInformation.flowDescription }}</div>
                     }
                 </div>
             </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html
index 896d86a409..ff63ae537c 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html
@@ -15,11 +15,11 @@
   ~ limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1 flex flex-col">
+    <div class="pb-5 px-5 flex-1 flex flex-col">
         <h3 class="primary-color">Controller Services</h3>
         @if (serviceState$ | async; as serviceState) {
             @if (isInitialLoading(serviceState)) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
index eba8f58d82..c9da258e39 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
@@ -15,12 +15,12 @@
   ~ limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1 flex flex-col">
-        <h3 class="primary-color pb-5">Manage Remote Ports</h3>
+    <div class="pb-5 px-5 flex-1 flex flex-col">
+        <h3 class="primary-color">Manage Remote Ports</h3>
         @if (portsState$ | async; as portsState) {
             <div class="grid-container grid grid-cols-2">
                 <div class="col-span-1 pr-5">
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html
index 2fd8ca24bf..63acbe9d77 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html
@@ -16,7 +16,7 @@
   -->
 
 <div class="login-form w-96 flex flex-col gap-y-5">
-    <div class="flex justify-between items-center">
+    <div class="flex justify-between items-start">
         <h3 class="primary-color">Log In</h3>
         <div class="flex gap-x-2">
             @if (logoutSupported()) {
@@ -26,7 +26,7 @@
         </div>
     </div>
     <div>
-        <form [formGroup]="loginForm" (ngSubmit)="login()">
+        <form [formGroup]="loginForm" (ngSubmit)="login()" class="my-2">
             <div>
                 <mat-form-field>
                     <mat-label>Username</mat-label>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html
index e2be63bd6e..dd2eb9e240 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html
@@ -15,11 +15,11 @@
   ~ limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1 flex flex-col">
+    <div class="pb-5 px-5 flex-1 flex flex-col">
         <h3 class="primary-color">Parameter Contexts</h3>
         <parameter-context-listing class="flex-1"></parameter-context-listing>
     </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html
index b139445711..33a519cc20 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html
@@ -15,12 +15,14 @@
   ~ limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <h3 class="px-5 primary-color">Provenance</h3>
-    <div class="px-5 flex-1">
+    <div class="px-5">
+        <h3 class="primary-color">Provenance</h3>
+    </div>
+    <div class="pb-5 px-5 flex-1">
         <router-outlet></router-outlet>
     </div>
 </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.html
index c07a832823..26a9a7b2a3 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.html
@@ -15,14 +15,11 @@
   ~ limitations under the License.
   -->
 
-<div class="provenance-event-table h-full flex flex-col gap-y-2">
+<div class="provenance-event-table h-full flex flex-col">
     <error-banner></error-banner>
-    <div [class.hidden]="showLineage" class="h-full flex flex-col gap-y-2">
+    <div [class.hidden]="showLineage" class="h-full flex flex-col">
         <div class="flex flex-col">
-            <div [class.invisible]="!filterApplied" class="accent-color font-medium font-bold">
-                Filter matched {{ filteredCount }} of {{ totalCount }}
-            </div>
-            <div class="flex justify-between">
+            <div class="flex justify-between mb-1">
                 <div>
                     Oldest event available:
                     <span class="accent-color font-medium">{{ oldestEventAvailable }}</span>
@@ -35,26 +32,31 @@
                 </div>
             </div>
             <div class="flex justify-between">
-                <form [formGroup]="filterForm">
-                    <div class="flex pt-2">
-                        <div class="mr-2">
-                            <mat-form-field>
-                                <mat-label>Filter</mat-label>
-                                <input matInput type="text" class="small" formControlName="filterTerm" />
-                            </mat-form-field>
-                        </div>
-                        <div>
-                            <mat-form-field>
-                                <mat-label>Filter By</mat-label>
-                                <mat-select formControlName="filterColumn">
-                                    @for (option of filterColumnOptions; track option) {
-                                        <mat-option [value]="option">{{ option }} </mat-option>
-                                    }
-                                </mat-select>
-                            </mat-form-field>
+                <div>
+                    <form [formGroup]="filterForm" class="my-2">
+                        <div class="flex">
+                            <div class="mr-2">
+                                <mat-form-field subscriptSizing="dynamic">
+                                    <mat-label>Filter</mat-label>
+                                    <input matInput type="text" class="small" formControlName="filterTerm" />
+                                </mat-form-field>
+                            </div>
+                            <div>
+                                <mat-form-field subscriptSizing="dynamic">
+                                    <mat-label>Filter By</mat-label>
+                                    <mat-select formControlName="filterColumn">
+                                        @for (option of filterColumnOptions; track option) {
+                                            <mat-option [value]="option">{{ option }} </mat-option>
+                                        }
+                                    </mat-select>
+                                </mat-form-field>
+                            </div>
                         </div>
+                    </form>
+                    <div class="accent-color font-medium my-2">
+                        Filter matched {{ filteredCount }} of {{ totalCount }}
                     </div>
-                </form>
+                </div>
                 <div class="flex flex-col justify-center">
                     <button mat-icon-button color="primary" (click)="searchClicked()">
                         <i class="fa fa-search"></i>
@@ -62,7 +64,7 @@
                 </div>
             </div>
         </div>
-        <div class="flex-1 relative -mt-4">
+        <div class="flex-1 relative">
             <div class="listing-table absolute inset-0 overflow-y-auto">
                 <table
                     mat-table
@@ -181,7 +183,7 @@
                 </table>
             </div>
         </div>
-        <div class="flex justify-between">
+        <div class="flex justify-between mt-2">
             <div class="refresh-container flex items-center gap-x-2">
                 <button mat-icon-button color="primary" (click)="refreshClicked()">
                     <i class="fa fa-refresh" [class.fa-spin]="loading"></i>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.html
index ee813dae39..564654a2f9 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.html
@@ -15,11 +15,11 @@
   ~ limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1">
+    <div class="pb-5 px-5 flex-1">
         <router-outlet></router-outlet>
     </div>
 </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.html
index a44dcf75be..3561167340 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.html
@@ -15,10 +15,10 @@
   ~ limitations under the License.
   -->
 
-<div class="flowfile-table h-full flex flex-col gap-y-2">
+<div class="flowfile-table h-full flex flex-col">
     <h3 class="queue-listing-header primary-color">{{ connectionLabel }}</h3>
     <error-banner></error-banner>
-    <div class="flex justify-between">
+    <div class="flex justify-between mb-2">
         <div class="accent-color font-medium">
             Display {{ displayObjectCount }} of {{ formatCount(queueSizeObjectCount) }} ({{
                 formatBytes(queueSizeByteCount)
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html
index b46bcb3414..6ee28f6320 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html
@@ -15,11 +15,11 @@
   ~ limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1 flex flex-col">
+    <div class="pb-5 px-5 flex-1 flex flex-col">
         <h3 class="primary-color">NiFi Settings</h3>
         <div class="settings-tabs">
             <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
@@ -35,7 +35,7 @@
                 }
             </nav>
         </div>
-        <div class="pt-4 flex-1">
+        <div class="pt-5 flex-1">
             <mat-tab-nav-panel #tabPanel>
                 <router-outlet></router-outlet>
             </mat-tab-nav-panel>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/general/general-form/general-form.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/general/general-form/general-form.component.html
index 1e52b46a17..c51750be32 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/general/general-form/general-form.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/general/general-form/general-form.component.html
@@ -17,7 +17,7 @@
 
 <div class="general-form w-96">
     @if (currentUser$ | async; as currentUser) {
-        <form [formGroup]="controllerForm">
+        <form [formGroup]="controllerForm" class="my-2">
             <div>
                 <mat-form-field>
                     <mat-label>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
index 6ca5bc18b8..deeffc3e07 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
@@ -15,11 +15,11 @@
 ~  limitations under the License.
 -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1 flex flex-col gap-y-2">
+    <div class="pb-5 px-5 flex-1 flex flex-col">
         <h3 class="primary-color">
             @if (selectedClusterNode$ | async; as selectedNode) {
                 @if (selectedNode.id !== 'All') {
@@ -45,7 +45,7 @@
                 }
             </nav>
         </div>
-        <div class="pt-4 flex-1">
+        <div class="mt-5 flex-1">
             <mat-tab-nav-panel #tabPanel>
                 <router-outlet></router-outlet>
             </mat-tab-nav-panel>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/summary-table-filter/summary-table-filter.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/summary-table-filter/summary-table-filter.component.html
index 1c5cc29efc..bec08f9269 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/summary-table-filter/summary-table-filter.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/summary-table-filter/summary-table-filter.component.html
@@ -16,61 +16,61 @@
 -->
 
 <div class="summary-table-filter-container">
-    <div class="accent-color font-medium {{ showFilterMatchedLabel ? 'visible' : 'invisible' }}">
-        Filter matched {{ filteredCount }} of {{ totalCount }}
-    </div>
-    <form [formGroup]="filterForm">
-        <div class="flex pt-1 gap-1 items-baseline">
-            <div>
-                <mat-form-field>
-                    <mat-label>Filter</mat-label>
-                    <input matInput type="text" class="small" formControlName="filterTerm" />
-                </mat-form-field>
-            </div>
-            <div>
-                <mat-form-field>
-                    <mat-label>Filter By</mat-label>
-                    <mat-select formControlName="filterColumn">
-                        @for (option of filterableColumns; track option) {
-                            <mat-option [value]="option.key"> {{ option.label }}</mat-option>
-                        }
-                    </mat-select>
-                </mat-form-field>
-            </div>
-            @if (includeStatusFilter) {
+    <div>
+        <form [formGroup]="filterForm" class="my-2">
+            <div class="flex mt-2 gap-1 items-baseline">
                 <div>
-                    <mat-form-field>
-                        <mat-label>Status</mat-label>
-                        <mat-select formControlName="filterStatus">
-                            <mat-option value="All"> All Statuses</mat-option>
-                            <mat-option value="Running"> Running</mat-option>
-                            <mat-option value="Stopped"> Stopped</mat-option>
-                            <mat-option value="Validating"> Validating</mat-option>
-                            <mat-option value="Disabled"> Disabled</mat-option>
-                            <mat-option value="Invalid"> Invalid</mat-option>
-                        </mat-select>
+                    <mat-form-field subscriptSizing="dynamic">
+                        <mat-label>Filter</mat-label>
+                        <input matInput type="text" class="small" formControlName="filterTerm" />
                     </mat-form-field>
                 </div>
-            }
-            @if (includePrimaryNodeOnlyFilter) {
                 <div>
-                    <mat-checkbox color="primary" formControlName="primaryOnly"></mat-checkbox>
-                    <mat-label class="whitespace-nowrap">Primary Node</mat-label>
-                </div>
-            }
-
-            @if (clusterNodes && clusterNodes.length > 0) {
-                <div class="cluster-node-selection flex flex-1 flex-row-reverse">
-                    <mat-form-field>
-                        <mat-label>Cluster Node</mat-label>
-                        <mat-select formControlName="clusterNode" panelWidth="">
-                            @for (node of clusterNodes; track node) {
-                                <mat-option [value]="node">{{ node.address }}</mat-option>
+                    <mat-form-field subscriptSizing="dynamic">
+                        <mat-label>Filter By</mat-label>
+                        <mat-select formControlName="filterColumn">
+                            @for (option of filterableColumns; track option) {
+                                <mat-option [value]="option.key"> {{ option.label }}</mat-option>
                             }
                         </mat-select>
                     </mat-form-field>
                 </div>
-            }
-        </div>
-    </form>
+                @if (includeStatusFilter) {
+                    <div>
+                        <mat-form-field subscriptSizing="dynamic">
+                            <mat-label>Status</mat-label>
+                            <mat-select formControlName="filterStatus">
+                                <mat-option value="All"> All Statuses</mat-option>
+                                <mat-option value="Running"> Running</mat-option>
+                                <mat-option value="Stopped"> Stopped</mat-option>
+                                <mat-option value="Validating"> Validating</mat-option>
+                                <mat-option value="Disabled"> Disabled</mat-option>
+                                <mat-option value="Invalid"> Invalid</mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                }
+                @if (includePrimaryNodeOnlyFilter) {
+                    <div>
+                        <mat-checkbox color="primary" formControlName="primaryOnly"></mat-checkbox>
+                        <mat-label class="whitespace-nowrap">Primary Node</mat-label>
+                    </div>
+                }
+
+                @if (clusterNodes && clusterNodes.length > 0) {
+                    <div class="cluster-node-selection flex flex-1 flex-row-reverse">
+                        <mat-form-field subscriptSizing="dynamic">
+                            <mat-label>Cluster Node</mat-label>
+                            <mat-select formControlName="clusterNode" panelWidth="">
+                                @for (node of clusterNodes; track node) {
+                                    <mat-option [value]="node">{{ node.address }}</mat-option>
+                                }
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                }
+            </div>
+        </form>
+        <div class="my-2 accent-color font-medium">Filter matched {{ filteredCount }} of {{ totalCount }}</div>
+    </div>
 </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html
index d3ad93e668..4af92d625f 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html
@@ -15,11 +15,11 @@
   ~  limitations under the License.
   -->
 
-<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
-    <header class="nifi-header">
+<div class="flex flex-col h-screen justify-between">
+    <header class="mb-5 nifi-header">
         <navigation></navigation>
     </header>
-    <div class="px-5 flex-1 flex flex-col">
+    <div class="pb-5 px-5 flex-1 flex flex-col">
         <h3 class="user-header primary-color">NiFi Users</h3>
         <user-listing class="flex-1"></user-listing>
     </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.html
index 89c4e1fd48..50c4f041b6 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-table/user-table.component.html
@@ -17,17 +17,16 @@
 <div class="user-table h-full flex flex-col">
     <div class="flex justify-between">
         <div>
-            <div class="accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
-            <form [formGroup]="filterForm">
-                <div class="flex pt-2">
+            <form [formGroup]="filterForm" class="my-2">
+                <div class="flex">
                     <div class="mr-2">
-                        <mat-form-field>
+                        <mat-form-field subscriptSizing="dynamic">
                             <mat-label>Filter</mat-label>
                             <input matInput type="text" class="small" formControlName="filterTerm" />
                         </mat-form-field>
                     </div>
                     <div>
-                        <mat-form-field>
+                        <mat-form-field subscriptSizing="dynamic">
                             <mat-label>Filter By</mat-label>
                             <mat-select formControlName="filterColumn">
                                 <mat-option value="user"> user</mat-option>
@@ -37,6 +36,7 @@
                     </div>
                 </div>
             </form>
+            <div class="my-2 accent-color font-medium">Displaying {{ filteredCount }} of {{ totalCount }}</div>
         </div>
         <div class="flex flex-col justify-center">
             @if (canModifyTenants(currentUser)) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
index 5e047d9ce5..36c39291d8 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
@@ -33,22 +33,26 @@
                 </div>
             </div>
             <div class="flex flex-1 flex-col">
-                <form [formGroup]="filterForm" class="flex flex-col gap-y-2">
-                    <div class="accent-color font-medium">Displaying {{ filteredEntries }} of {{ totalEntries }}</div>
-                    <div class="flex justify-between items-center">
-                        <mat-form-field>
-                            <mat-label>Filter</mat-label>
-                            <input matInput type="text" class="small" formControlName="filterTerm" />
-                        </mat-form-field>
-                        @if ({ value: (canClear$ | async)! }; as canClear) {
-                            @if (canClear.value && totalEntries > 0) {
-                                <div>
-                                    <a (click)="clearState()">Clear state</a>
-                                </div>
+                <div>
+                    <form [formGroup]="filterForm" class="flex flex-col my-2">
+                        <div class="flex justify-between items-center">
+                            <mat-form-field subscriptSizing="dynamic">
+                                <mat-label>Filter</mat-label>
+                                <input matInput type="text" class="small" formControlName="filterTerm" />
+                            </mat-form-field>
+                            @if ({ value: (canClear$ | async)! }; as canClear) {
+                                @if (canClear.value && totalEntries > 0) {
+                                    <div>
+                                        <a (click)="clearState()">Clear state</a>
+                                    </div>
+                                }
                             }
-                        }
+                        </div>
+                    </form>
+                    <div class="my-2 accent-color leading-none font-medium">
+                        Displaying {{ filteredEntries }} of {{ totalEntries }}
                     </div>
-                </form>
+                </div>
                 <div class="listing-table flex-1 relative">
                     <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
                         <table
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/error-banner/error-banner.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/error-banner/error-banner.component.html
index 6ca541bfde..5d6a55a9e9 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/error-banner/error-banner.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/error-banner/error-banner.component.html
@@ -16,18 +16,20 @@
   -->
 
 @if ((messages$ | async)!; as messages) {
-    <div class="banner-container border-t border-b px-6 py-3 flex justify-between items-center">
-        @if (messages.length === 1) {
-            <div>{{ messages[0] }}</div>
-        } @else {
-            <ul>
-                @for (message of messages; track message) {
-                    <li>{{ message }}</li>
-                }
-            </ul>
-        }
-        <div class="flex flex-col mt-auto">
-            <button mat-stroked-button (click)="dismiss()">Dismiss</button>
+    <div class="mb-4">
+        <div class="banner-container border-t border-b px-6 py-3 flex justify-between items-center">
+            @if (messages.length === 1) {
+                <div>{{ messages[0] }}</div>
+            } @else {
+                <ul>
+                    @for (message of messages; track message) {
+                        <li>{{ message }}</li>
+                    }
+                </ul>
+            }
+            <div class="flex flex-col mt-auto">
+                <button mat-stroked-button (click)="dismiss()">Dismiss</button>
+            </div>
         </div>
     </div>
 }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/page-content.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/page-content.component.html
index 92726ece57..ceabfffe18 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/page-content.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/page-content.component.html
@@ -16,7 +16,7 @@
   -->
 
 <div class="page-content w-1/2 flex flex-col gap-y-5">
-    <div class="flex justify-between items-center gap-x-3">
+    <div class="flex justify-between items-start gap-x-3">
         <h3 class="primary-color whitespace-nowrap overflow-hidden text-ellipsis" [title]="title">{{ title }}</h3>
         <div class="flex gap-x-3">
             @if (logoutSupported()) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
index 85676dab0c..1b54543f51 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
@@ -326,13 +326,6 @@
         margin: unset;
     }
 
-    .mat-h3,
-    .mat-typography .mat-h3,
-    .mat-typography h3 {
-        // Because angular material typography adds bottom margin
-        margin: unset;
-    }
-
     .mat-h4,
     .mat-typography .mat-h4,
     .mat-typography h4 {