diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.html
index 8c5a845f27..60fe975412 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.html
@@ -15,7 +15,7 @@
 ~  limitations under the License.
 -->
 <div class="policy-table h-full relative">
-    <div class="listing-table overflow-y-auto border absolute inset-0">
+    <div class="listing-table overflow-y-auto absolute inset-0">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/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-nar-bundles/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 e7d28783bf..aa8846011d 100644
--- a/nifi-nar-bundles/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-nar-bundles/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
@@ -90,14 +90,14 @@
                         @if (flowConfiguration.supportsConfigurableAuthorizer) {
                             <div class="flex gap-x-2">
                                 <button
-                                    class="nifi-button"
+                                    mat-icon-button
                                     title="Add users/groups to this policy"
                                     [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                     (click)="addTenantToPolicy()">
                                     <i class="fa fa-user-plus"></i>
                                 </button>
                                 <button
-                                    class="nifi-button"
+                                    mat-icon-button
                                     title="Delete this policy"
                                     [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                     (click)="deletePolicy()">
@@ -119,7 +119,7 @@
                     }
                     <div class="flex justify-between">
                         <div class="refresh-container flex items-center gap-x-2">
-                            <button class="nifi-button" (click)="refreshGlobalAccessPolicy()">
+                            <button mat-icon-button (click)="refreshGlobalAccessPolicy()">
                                 <i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
                             </button>
                             <div>Last updated:</div>
diff --git a/nifi-nar-bundles/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.module.ts b/nifi-nar-bundles/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.module.ts
index 4b058d8024..94e7b6d481 100644
--- a/nifi-nar-bundles/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.module.ts
+++ b/nifi-nar-bundles/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.module.ts
@@ -27,6 +27,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { ComponentAccessPoliciesRoutingModule } from './component-access-policies-routing.module';
 import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
 import { PolicyTable } from '../common/policy-table/policy-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [ComponentAccessPolicies],
@@ -41,7 +42,8 @@ import { PolicyTable } from '../common/policy-table/policy-table.component';
         ReactiveFormsModule,
         MatSelectModule,
         NifiTooltipDirective,
-        PolicyTable
+        PolicyTable,
+        MatButtonModule
     ]
 })
 export class ComponentAccessPoliciesModule {}
diff --git a/nifi-nar-bundles/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-nar-bundles/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 c5a0228845..c4195adc8d 100644
--- a/nifi-nar-bundles/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-nar-bundles/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
@@ -108,14 +108,14 @@
                     @if (flowConfiguration.supportsConfigurableAuthorizer) {
                         <div class="flex gap-x-2 items-center">
                             <button
-                                class="nifi-button"
+                                mat-icon-button
                                 title="Add users/groups to this policy"
                                 [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                 (click)="addTenantToPolicy()">
                                 <i class="fa fa-user-plus"></i>
                             </button>
                             <button
-                                class="nifi-button"
+                                mat-icon-button
                                 title="Delete this policy"
                                 [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                 (click)="deletePolicy()">
@@ -137,7 +137,7 @@
                 }
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button class="nifi-button" (click)="refreshGlobalAccessPolicy()">
+                        <button mat-icon-button (click)="refreshGlobalAccessPolicy()">
                             <i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
diff --git a/nifi-nar-bundles/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.module.ts b/nifi-nar-bundles/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.module.ts
index 8a95b78bfd..b0dcd699c2 100644
--- a/nifi-nar-bundles/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.module.ts
+++ b/nifi-nar-bundles/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.module.ts
@@ -27,6 +27,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { GlobalAccessPoliciesRoutingModule } from './global-access-policies-routing.module';
 import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
 import { PolicyTable } from '../common/policy-table/policy-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [GlobalAccessPolicies],
@@ -41,7 +42,8 @@ import { PolicyTable } from '../common/policy-table/policy-table.component';
         ReactiveFormsModule,
         MatSelectModule,
         NifiTooltipDirective,
-        PolicyTable
+        PolicyTable,
+        MatButtonModule
     ]
 })
 export class GlobalAccessPoliciesModule {}
diff --git a/nifi-nar-bundles/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-nar-bundles/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 f37b82a041..ab03775bc2 100644
--- a/nifi-nar-bundles/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-nar-bundles/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
@@ -41,7 +41,7 @@
     </div>
 
     <div class="flex-1 relative">
-        <div class="bulletin-board-list overflow-y-auto absolute inset-0 border-2 p-4" #scrollContainer>
+        <div class="overflow-y-auto absolute inset-0 border-2 p-4" #scrollContainer>
             <ul class="flex flex-wrap gap-y-2">
                 @for (item of bulletinBoardItems; track item) {
                     <!-- each item can either be a BulletinEntity or BulletinBoardEvent -->
@@ -72,7 +72,7 @@
                     } @else {
                         @if (asBulletinEvent(item); as event) {
                             <li class="w-full mt-4">
-                                <div class="border-b-2 flex-1 p-2">
+                                <div class="bulletin-board-event border-b-2 flex-1 p-2">
                                     {{ event.message }}
                                 </div>
                             </li>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html
index 1b5df94263..53569af2f4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html
@@ -34,7 +34,7 @@
                             >Auto-refresh</mat-slide-toggle
                         >
                     </div>
-                    <button class="nifi-button" (click)="refreshBulletinBoard(bulletinBoardState.lastBulletinId)">
+                    <button mat-icon-button (click)="refreshBulletinBoard(bulletinBoardState.lastBulletinId)">
                         <i class="fa fa-refresh" [class.fa-spin]="bulletinBoardState.status === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.ts
index d1dfbd3711..8aceb1e110 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.ts
@@ -42,6 +42,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { BulletinBoardList } from './bulletin-board-list/bulletin-board-list.component';
 import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'bulletin-board',
@@ -55,7 +56,8 @@ import { CommonModule } from '@angular/common';
         ReactiveFormsModule,
         BulletinBoardList,
         MatSlideToggleModule,
-        CommonModule
+        CommonModule,
+        MatButtonModule
     ],
     templateUrl: './bulletin-board.component.html',
     styleUrls: ['./bulletin-board.component.scss']
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.html
index 4209ca0fb7..b6688c0ba7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.component.html
@@ -32,7 +32,7 @@
             }
             <div class="flex justify-between">
                 <div class="refresh-container flex items-center gap-x-2">
-                    <button class="nifi-button" (click)="refreshCounterListing()">
+                    <button mat-icon-button (click)="refreshCounterListing()">
                         <i class="fa fa-refresh" [class.fa-spin]="counterListingState.status === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.module.ts
index cf85491aef..051c35d43f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-listing.module.ts
@@ -25,6 +25,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatInputModule } from '@angular/material/input';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [CounterListing, CounterTable],
@@ -36,7 +37,8 @@ import { MatSelectModule } from '@angular/material/select';
         MatSortModule,
         MatInputModule,
         ReactiveFormsModule,
-        MatSelectModule
+        MatSelectModule,
+        MatButtonModule
     ]
 })
 export class CounterListingModule {}
diff --git a/nifi-nar-bundles/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-nar-bundles/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 9c5ce0fefa..7fc5fb32ab 100644
--- a/nifi-nar-bundles/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-nar-bundles/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
@@ -38,7 +38,7 @@
         </form>
     </div>
     <div class="flex-1 relative">
-        <div class="listing-table overflow-y-auto border absolute inset-0">
+        <div class="listing-table overflow-y-auto absolute inset-0">
             <table
                 mat-table
                 [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/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-nar-bundles/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 b20c87688e..417b274522 100644
--- a/nifi-nar-bundles/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-nar-bundles/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
@@ -93,7 +93,7 @@
                 </div>
                 @if ((currentUser$ | async)?.controllerPermissions?.canWrite) {
                     <div class="mt-4">
-                        <button class="nifi-button" (click)="purgeHistoryClicked()">
+                        <button mat-icon-button (click)="purgeHistoryClicked()">
                             <i class="fa fa-eraser"></i>
                         </button>
                     </div>
@@ -111,7 +111,7 @@
 
             <div class="flex justify-between align-middle">
                 <div class="refresh-container flex items-center gap-x-2">
-                    <button class="nifi-button" (click)="refresh()">
+                    <button mat-icon-button (click)="refresh()">
                         <i class="fa fa-refresh" [class.fa-spin]="state.status === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
diff --git a/nifi-nar-bundles/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-table/flow-configuration-history-table.component.html b/nifi-nar-bundles/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-table/flow-configuration-history-table.component.html
index 76962ace1a..e0b7c33f0f 100644
--- a/nifi-nar-bundles/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-table/flow-configuration-history-table.component.html
+++ b/nifi-nar-bundles/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-table/flow-configuration-history-table.component.html
@@ -16,7 +16,7 @@
   -->
 
 <div class="flow-configuration-history-table flex-1 relative h-full w-full">
-    <div class="listing-table overflow-y-auto border absolute inset-0">
+    <div class="listing-table overflow-y-auto absolute inset-0">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.html
index de1601750d..4d3043afbb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.html
@@ -34,21 +34,21 @@
         <div class="w-72 px-2.5 pb-2.5 flex flex-col gap-y-2">
             <div class="flex justify-between">
                 <div class="flex gap-x-1">
-                    <button class="nifi-button" type="button" (click)="zoomIn()">
+                    <button mat-icon-button type="button" (click)="zoomIn()">
                         <i class="fa fa-search-plus"></i>
                     </button>
-                    <button class="nifi-button mr-2" type="button" (click)="zoomOut()">
+                    <button mat-icon-button class="mr-2" type="button" (click)="zoomOut()">
                         <i class="fa fa-search-minus"></i>
                     </button>
-                    <button class="nifi-button" type="button" (click)="zoomFit()">
+                    <button mat-icon-button type="button" (click)="zoomFit()">
                         <i class="ml-1 icon icon-zoom-fit"></i>
                     </button>
-                    <button class="nifi-button" type="button" (click)="zoomActual()">
+                    <button mat-icon-button type="button" (click)="zoomActual()">
                         <i class="ml-1 icon icon-zoom-actual"></i>
                     </button>
                 </div>
                 @if (isNotRootGroup()) {
-                    <button class="nifi-button" type="button" (click)="leaveProcessGroup()">
+                    <button mat-icon-button type="button" (click)="leaveProcessGroup()">
                         <i class="fa fa-level-up"></i>
                     </button>
                 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss
index 6449d8cdcc..0d8578ea54 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss
@@ -18,9 +18,9 @@
 div.navigation-control {
     margin-bottom: 2px;
 
-    .fa,
-    .icon {
-        font-size: 18px;
+    .mat-mdc-icon-button {
+        --mdc-icon-button-state-layer-size: 34px;
+        --mdc-icon-button-icon-size: 17px;
     }
 
     .navigation-control-header {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.ts
index 11bce0878c..e8013e6cf3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.ts
@@ -25,12 +25,13 @@ import { initialState } from '../../../../state/flow/flow.reducer';
 import { Storage } from '../../../../../../service/storage.service';
 
 import { Birdseye } from './birdseye/birdseye.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'navigation-control',
     standalone: true,
     templateUrl: './navigation-control.component.html',
-    imports: [Birdseye],
+    imports: [Birdseye, MatButtonModule],
     styleUrls: ['./navigation-control.component.scss']
 })
 export class NavigationControl {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html
index 797a696b57..fdf54a425e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html
@@ -48,7 +48,7 @@
                 <div class="flex flex-col gap-y-1">
                     <div class="flex gap-x-1">
                         <button
-                            class="nifi-button"
+                            mat-icon-button
                             type="button"
                             [disabled]="!canConfigure(selection)"
                             (click)="configure(selection)">
@@ -56,7 +56,8 @@
                         </button>
                         @if (supportsManagedAuthorizer()) {
                             <button
-                                class="nifi-button mr-2"
+                                mat-icon-button
+                                class="mr-2"
                                 type="button"
                                 [disabled]="!canManageAccess(selection)"
                                 (click)="manageAccess(selection)">
@@ -64,28 +65,29 @@
                             </button>
                         }
                         <button
-                            class="nifi-button"
+                            mat-icon-button
                             type="button"
                             [disabled]="!canEnable(selection)"
                             (click)="enable(selection)">
                             <i class="fa fa-flash"></i>
                         </button>
                         <button
-                            class="nifi-button mr-2"
+                            mat-icon-button
+                            class="mr-2"
                             type="button"
                             [disabled]="!canDisable(selection)"
                             (click)="disable(selection)">
                             <i class="ml-1 icon icon-enable-false"></i>
                         </button>
                         <button
-                            class="nifi-button"
+                            mat-icon-button
                             type="button"
                             [disabled]="!canStart(selection)"
                             (click)="start(selection)">
                             <i class="fa fa-play"></i>
                         </button>
                         <button
-                            class="nifi-button"
+                            mat-icon-button
                             type="button"
                             [disabled]="!canStop(selection)"
                             (click)="stop(selection)">
@@ -94,35 +96,38 @@
                     </div>
                     <div class="flex gap-x-1">
                         <button
-                            class="nifi-button"
+                            mat-icon-button
                             type="button"
                             [disabled]="!canCopy(selection)"
                             (click)="copy(selection)">
                             <i class="fa fa-copy"></i>
                         </button>
                         <button
-                            class="nifi-button mr-2"
+                            mat-icon-button
+                            class="mr-2"
                             type="button"
                             [disabled]="!canPaste(selection)"
                             (click)="paste(selection)">
                             <i class="fa fa-paste"></i>
                         </button>
                         <button
-                            class="nifi-button mr-2"
+                            mat-icon-button
+                            class="mr-2"
                             type="button"
                             [disabled]="!canGroup(selection)"
                             (click)="group(selection)">
                             <i class="ml-1 icon icon-group"></i>
                         </button>
                         <button
-                            class="nifi-button mr-2"
+                            mat-icon-button
+                            class="mr-2"
                             type="button"
                             [disabled]="!canColor(selection)"
                             (click)="color(selection)">
                             <i class="fa fa-paint-brush"></i>
                         </button>
                         <button
-                            class="nifi-button"
+                            mat-icon-button
                             type="button"
                             [disabled]="!canDelete(selection)"
                             (click)="delete(selection)">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss
index 5412ef68d0..094b02f853 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss
@@ -18,9 +18,9 @@
 div.operation-control {
     margin-bottom: 2px;
 
-    .fa,
-    .icon {
-        font-size: 18px;
+    .mat-mdc-icon-button {
+        --mdc-icon-button-state-layer-size: 34px;
+        --mdc-icon-button-icon-size: 17px;
     }
 
     .operation-control-header {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.ts
index 1344e55dd5..853c0bd1d9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.ts
@@ -42,12 +42,13 @@ import {
 
 import { BreadcrumbEntity } from '../../../../state/shared';
 import { ComponentType } from '../../../../../../state/shared';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'operation-control',
     standalone: true,
     templateUrl: './operation-control.component.html',
-    imports: [],
+    imports: [MatButtonModule],
     styleUrls: ['./operation-control.component.scss']
 })
 export class OperationControl {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
index 0f83eb7e74..36b0cc5d30 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
@@ -36,12 +36,12 @@
     $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
 
     // Use the same logic as _navigation.component-theme.scss to determine the bg color for hover
-    $hover-bg: mat.get-color-from-palette($primary-palette, "navbar");
+    $hover-bg: mat.get-color-from-palette($primary-palette, 'navbar');
     @if ($hover-bg) {
         // Nothing to do here, we have special color from the palette.
     } @else {
         // There was not a special value set for the navbar, so we use Angular Material behavior.
-        $hover-bg: mat.get-color-from-palette($primary-palette, "default");
+        $hover-bg: mat.get-color-from-palette($primary-palette, 'default');
     }
 
     .new-canvas-item {
@@ -63,6 +63,7 @@
                     );
                 }
             }
+
             &.cdk-drag-dragging {
                 color: utils.get-color-on-surface($color-config, $surface-darker);
                 mix-blend-mode: difference; // Make sure the dragged icon is always visible
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
index 66c6bc6e56..cac2507955 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
@@ -19,7 +19,7 @@
 @use '@angular/material' as mat;
 @use '../../../../../../../assets/utils.scss' as utils;
 
-@mixin nifi-theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($canvas-theme) {
     // Get the color config from the theme.
     $canvas-color-config: mat.get-color-config($canvas-theme);
 
@@ -30,8 +30,6 @@
     $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
 
     .search-container {
-        border-left: 1px solid $on-surface-lighter;
-
         &:hover,
         &.open {
             background-color: $surface;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
index d1045ad119..41c537e33d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
@@ -30,7 +30,6 @@
 
     // Get hues from palette
     $primary-palette-default: mat.get-color-from-palette($primary-palette, default);
-    $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200);
     $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
     $surface: utils.get-surface($canvas-color-config);
     $on-surface: utils.get-on-surface($canvas-color-config);
@@ -39,22 +38,11 @@
     .prioritizers {
         .prioritizers-list {
             background: $primary-palette-default;
-
-            border: solid 1px $canvas-primary-palette-500;
-
-            .cdk-drag-disabled {
-                background: $on-surface-lighter;
-            }
         }
 
         .prioritizer-draggable-item {
-            border-bottom: solid 1px $canvas-primary-palette-500;
             color: $on-surface;
             background: $surface;
         }
-
-        .cdk-drag-preview {
-            box-shadow: 0 3px 6px $canvas-primary-palette-A200;
-        }
     }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
index e92b7730c1..de1077aa90 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
@@ -19,14 +19,14 @@
     <div class="flex flex-col">
         <div>Available Prioritizers</div>
         <div
-            class="prioritizers-list"
+            class="prioritizers-list border"
             cdkDropList
             cdkDropListSortingDisabled
             [cdkDropListDisabled]="isDisabled"
             [cdkDropListData]="availablePrioritizers"
             (cdkDropListDropped)="dropAvailable($event)">
             @for (item of availablePrioritizers; track item; let i = $index) {
-                <div class="prioritizer-draggable-item" cdkDrag cdkDragPreviewContainer="parent">
+                <div class="prioritizer-draggable-item border-b m-1" cdkDrag cdkDragPreviewContainer="parent">
                     <ng-container
                         *ngTemplateOutlet="
                             prioritizerItem;
@@ -39,13 +39,13 @@
     <div class="flex flex-col">
         <div>Selected Prioritizers</div>
         <div
-            class="prioritizers-list"
+            class="prioritizers-list border"
             cdkDropList
             [cdkDropListDisabled]="isDisabled"
             [cdkDropListData]="selectedPrioritizers"
             (cdkDropListDropped)="dropSelected($event)">
             @for (item of selectedPrioritizers; track item; let i = $index) {
-                <div class="prioritizer-draggable-item" cdkDrag cdkDragPreviewContainer="parent">
+                <div class="prioritizer-draggable-item border-b m-1" cdkDrag cdkDragPreviewContainer="parent">
                     <ng-container
                         *ngTemplateOutlet="
                             prioritizerItem;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
index d55aad5802..cb091d6d4f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
@@ -17,14 +17,10 @@
 
 .prioritizers {
     .prioritizers-list {
-        min-height: 66px;
+        min-height: 74px;
         border-radius: 4px;
         overflow: hidden;
         display: block;
-
-        .cdk-drag-disabled {
-            cursor: not-allowed;
-        }
     }
 
     .prioritizer-draggable-item {
@@ -41,17 +37,4 @@
             border: none;
         }
     }
-
-    .cdk-drag-preview {
-        box-sizing: border-box;
-        border-radius: 4px;
-    }
-
-    .cdk-drag-placeholder {
-        opacity: 0;
-    }
-
-    .cdk-drop-list-dragging {
-        cursor: grabbing;
-    }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
index 6774f8cc86..da35106936 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/import-from-registry/import-from-registry.component.html
@@ -95,7 +95,7 @@
             <div class="value">{{ selectedFlowDescription || 'No description provided' }}</div>
         </div>
         <div class="listing-table">
-            <div class="h-48 overflow-y-auto overflow-x-hidden border">
+            <div class="h-48 overflow-y-auto overflow-x-hidden">
                 <table
                     mat-table
                     [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/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-nar-bundles/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 97225eef18..63b993eb93 100644
--- a/nifi-nar-bundles/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-nar-bundles/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
@@ -32,7 +32,7 @@
                         <breadcrumbs
                             [entity]="serviceState.breadcrumb"
                             [currentProcessGroupId]="serviceState.processGroupId"></breadcrumbs>
-                        <button class="nifi-button" (click)="openNewControllerServiceDialog()">
+                        <button mat-icon-button (click)="openNewControllerServiceDialog()">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -57,7 +57,7 @@
                     }
                     <div class="flex justify-between">
                         <div class="refresh-container flex items-center gap-x-2">
-                            <button class="nifi-button" (click)="refreshControllerServiceListing()">
+                            <button mat-icon-button (click)="refreshControllerServiceListing()">
                                 <i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
                             </button>
                             <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.module.ts
index 1184d8d1d1..f211a8aab7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.module.ts
@@ -23,6 +23,7 @@ import { ControllerServiceTable } from '../../../../ui/common/controller-service
 import { ControllerServicesRoutingModule } from './controller-services-routing.module';
 import { Breadcrumbs } from '../common/breadcrumbs/breadcrumbs.component';
 import { Navigation } from '../../../../ui/common/navigation/navigation.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [ControllerServices],
@@ -33,7 +34,8 @@ import { Navigation } from '../../../../ui/common/navigation/navigation.componen
         ControllerServicesRoutingModule,
         ControllerServiceTable,
         Breadcrumbs,
-        Navigation
+        Navigation,
+        MatButtonModule
     ]
 })
 export class ControllerServicesModule {}
diff --git a/nifi-nar-bundles/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-nar-bundles/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 a4647849b5..a249621e1b 100644
--- a/nifi-nar-bundles/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-nar-bundles/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
@@ -51,7 +51,7 @@
             } @else {
                 <div class="flex flex-col h-full gap-y-2">
                     <div class="flex-1">
-                        <div class="manage-remote-ports-table relative h-full border">
+                        <div class="manage-remote-ports-table relative h-full">
                             <div class="listing-table absolute inset-0 overflow-y-auto">
                                 <table
                                     mat-table
@@ -226,7 +226,7 @@
                     </div>
                     <div class="flex justify-between">
                         <div class="refresh-container flex items-center gap-x-2">
-                            <button class="nifi-button" (click)="refreshManageRemotePortsListing()">
+                            <button mat-icon-button (click)="refreshManageRemotePortsListing()">
                                 <i class="fa fa-refresh" [class.fa-spin]="portsState.status === 'loading'"></i>
                             </button>
                             <div>Last updated:</div>
diff --git a/nifi-nar-bundles/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.module.ts b/nifi-nar-bundles/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.module.ts
index 9578ec9ce8..bc7eec7da1 100644
--- a/nifi-nar-bundles/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.module.ts
+++ b/nifi-nar-bundles/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.module.ts
@@ -31,6 +31,7 @@ import { EffectsModule } from '@ngrx/effects';
 import { ManageRemotePortsEffects } from '../../state/manage-remote-ports/manage-remote-ports.effects';
 import { remotePortsFeatureKey } from '../../state/manage-remote-ports';
 import { manageRemotePortsReducer } from '../../state/manage-remote-ports/manage-remote-ports.reducer';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [ManageRemotePorts],
@@ -46,7 +47,8 @@ import { manageRemotePortsReducer } from '../../state/manage-remote-ports/manage
         Navigation,
         MatTableModule,
         MatSortModule,
-        NifiTooltipDirective
+        NifiTooltipDirective,
+        MatButtonModule
     ]
 })
 export class ManageRemotePortsModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
index 49e398f2de..4d5c7f5d85 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
@@ -30,32 +30,18 @@
 
     // Get hues from palette
     $primary-palette-default: mat.get-color-from-palette($primary-palette, default);
-    $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200);
-    $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
 
     $surface: utils.get-surface($canvas-color-config);
     $on-surface: utils.get-on-surface($canvas-color-config);
-    $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
 
     .parameter-context-inheritance {
         .parameter-context-inheritance-list {
             background: $primary-palette-default;
-
-            border: solid 1px $canvas-primary-palette-500;
-
-            .cdk-drag-disabled {
-                background: $on-surface-lighter;
-            }
         }
 
         .parameter-context-draggable-item {
-            border-bottom: solid 1px $canvas-primary-palette-500;
             color: $on-surface;
             background: $surface;
         }
-
-        .cdk-drag-preview {
-            box-shadow: 0 3px 6px $canvas-primary-palette-A200;
-        }
     }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
index 893a867942..a5847bffe5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
@@ -19,7 +19,7 @@
     <div class="flex flex-col w-full">
         <div>Available Parameter Contexts</div>
         <div
-            class="parameter-context-inheritance-list"
+            class="parameter-context-inheritance-list border"
             cdkDropList
             cdkDropListSortingDisabled
             [cdkDropListDisabled]="isDisabled"
@@ -27,7 +27,7 @@
             (cdkDropListDropped)="dropAvailable($event)">
             @for (item of availableParameterContexts; track item; let i = $index) {
                 <div
-                    class="parameter-context-draggable-item"
+                    class="parameter-context-draggable-item border-b m-1"
                     cdkDrag
                     cdkDragPreviewContainer="parent"
                     [cdkDragDisabled]="!item.permissions.canRead">
@@ -45,14 +45,14 @@
     <div class="flex flex-col w-full">
         <div>Selected Parameter Contexts</div>
         <div
-            class="parameter-context-inheritance-list"
+            class="parameter-context-inheritance-list border"
             cdkDropList
             [cdkDropListDisabled]="isDisabled"
             [cdkDropListData]="selectedParameterContexts"
             (cdkDropListDropped)="dropSelected($event)">
             @for (item of selectedParameterContexts; track item; let i = $index) {
                 <div
-                    class="parameter-context-draggable-item"
+                    class="parameter-context-draggable-item border-b m-1"
                     cdkDrag
                     cdkDragPreviewContainer="parent"
                     [cdkDragDisabled]="!item.permissions.canRead">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.scss
index be70e461cc..823fb0e9b7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.scss
@@ -17,14 +17,10 @@
 
 .parameter-context-inheritance {
     .parameter-context-inheritance-list {
-        min-height: 66px;
+        min-height: 74px;
         border-radius: 4px;
         overflow: hidden;
         display: block;
-
-        .cdk-drag-disabled {
-            cursor: not-allowed;
-        }
     }
 
     .parameter-context-draggable-item {
@@ -41,17 +37,4 @@
             border: none;
         }
     }
-
-    .cdk-drag-preview {
-        box-sizing: border-box;
-        border-radius: 4px;
-    }
-
-    .cdk-drag-placeholder {
-        opacity: 0;
-    }
-
-    .cdk-drop-list-dragging {
-        cursor: grabbing;
-    }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.component.html
index 4ac84182c5..8b71ef4949 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.component.html
@@ -23,7 +23,7 @@
     } @else {
         <div class="flex flex-col h-full gap-y-2">
             <div class="flex justify-end">
-                <button class="nifi-button" (click)="openNewParameterContextDialog()">
+                <button mat-icon-button (click)="openNewParameterContextDialog()">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -39,7 +39,7 @@
             </div>
             <div class="flex justify-between">
                 <div class="refresh-container flex items-center gap-x-2">
-                    <button class="nifi-button" (click)="refreshParameterContextListing()">
+                    <button mat-icon-button (click)="refreshParameterContextListing()">
                         <i
                             class="fa fa-refresh"
                             [class.fa-spin]="parameterContextListingState.status === 'loading'"></i>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.module.ts
index 24fdbcf7be..5becff2b0c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-listing.module.ts
@@ -25,6 +25,7 @@ import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-toolti
 import { ParameterContextTable } from './parameter-context-table/parameter-context-table.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [ParameterContextListing, ParameterContextTable],
@@ -36,7 +37,8 @@ import { RouterLink } from '@angular/router';
         MatTableModule,
         MatDialogModule,
         NifiTooltipDirective,
-        RouterLink
+        RouterLink,
+        MatButtonModule
     ]
 })
 export class ParameterContextListingModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
index b70de2952b..dd0643c167 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div class="relative h-full border">
+<div class="relative h-full">
     <div class="listing-table absolute inset-0 overflow-y-auto">
         <table
             mat-table
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
index c68bba566c..1869e48b44 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
@@ -15,114 +15,116 @@
   ~ limitations under the License.
   -->
 
-<div class="parameter-table listing-table flex gap-x-3">
-    <div class="flex flex-col gap-y-3" style="flex-grow: 3">
+<div class="parameter-table flex gap-x-3">
+    <div class="flex flex-col gap-y-3">
         @if (canAddParameters) {
             <div class="flex justify-end items-center">
-                <button class="nifi-button" type="button" (click)="newParameterClicked()">
+                <button mat-icon-button type="button" (click)="newParameterClicked()">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
         }
-        <div class="h-96 overflow-y-auto overflow-x-hidden border">
-            <table mat-table [dataSource]="dataSource">
-                <!-- Name Column -->
-                <ng-container matColumnDef="name">
-                    <th mat-header-cell *matHeaderCellDef>Name</th>
-                    <td mat-cell *matCellDef="let item">
-                        <div class="flex justify-between items-center">
-                            <div>
-                                {{ item.entity.parameter.name }}
-                            </div>
-                            <div>
-                                @if (hasDescription(item)) {
-                                    <div
-                                        class="fa fa-question-circle"
-                                        nifiTooltip
-                                        [tooltipComponentType]="TextTip"
-                                        [tooltipInputData]="getDescriptionTipData(item)"></div>
-                                }
-                            </div>
-                        </div>
-                    </td>
-                </ng-container>
-
-                <!-- Value Column -->
-                <ng-container matColumnDef="value">
-                    <th mat-header-cell *matHeaderCellDef>Value</th>
-                    <td mat-cell *matCellDef="let item">
-                        @if (isNull(item.entity.parameter.value)) {
-                            <div class="unset">No value set</div>
-                        } @else {
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    isSensitiveParameter(item) ? sensitive : nonSensitive;
-                                    context: { $implicit: item.entity.parameter.value }
-                                "></ng-container>
-                            <ng-template #sensitive>
-                                <div class="sensitive">Sensitive value set</div>
-                            </ng-template>
-                            <ng-template #nonSensitive let-value>
-                                <ng-container
-                                    *ngTemplateOutlet="
-                                        isEmptyString(value) ? blank : nonBlank;
-                                        context: { $implicit: value }
-                                    "></ng-container>
-                            </ng-template>
-                            <ng-template #blank>
-                                <div class="empty">Empty string set</div>
-                            </ng-template>
-                            <ng-template #nonBlank let-value>
-                                <div class="flex justify-between items-center">
-                                    <div class="whitespace-nowrap overflow-hidden text-ellipsis">
-                                        {{ value }}
-                                    </div>
-                                    @if (hasExtraWhitespace(value)) {
+        <div class="listing-table">
+            <div class="h-96 overflow-y-auto overflow-x-hidden">
+                <table mat-table [dataSource]="dataSource">
+                    <!-- Name Column -->
+                    <ng-container matColumnDef="name">
+                        <th mat-header-cell *matHeaderCellDef>Name</th>
+                        <td mat-cell *matCellDef="let item">
+                            <div class="flex justify-between items-center">
+                                <div>
+                                    {{ item.entity.parameter.name }}
+                                </div>
+                                <div>
+                                    @if (hasDescription(item)) {
                                         <div
-                                            class="fa fa-info"
+                                            class="fa fa-question-circle"
                                             nifiTooltip
                                             [tooltipComponentType]="TextTip"
-                                            [tooltipInputData]="getExtraWhitespaceTipData()"></div>
+                                            [tooltipInputData]="getDescriptionTipData(item)"></div>
                                     }
                                 </div>
-                            </ng-template>
-                        }
-                    </td>
-                </ng-container>
+                            </div>
+                        </td>
+                    </ng-container>
 
-                <!-- Actions Column -->
-                <ng-container matColumnDef="actions">
-                    <th mat-header-cell *matHeaderCellDef></th>
-                    <td mat-cell *matCellDef="let item">
-                        <div class="flex items-center gap-x-3">
-                            @if (canGoToParameter(item)) {
-                                <div
-                                    class="pointer fa fa-long-arrow-right"
-                                    [routerLink]="getParameterLink(item)"
-                                    mat-dialog-close="ROUTED"
-                                    title="Go to"></div>
+                    <!-- Value Column -->
+                    <ng-container matColumnDef="value">
+                        <th mat-header-cell *matHeaderCellDef>Value</th>
+                        <td mat-cell *matCellDef="let item">
+                            @if (isNull(item.entity.parameter.value)) {
+                                <div class="unset">No value set</div>
+                            } @else {
+                                <ng-container
+                                    *ngTemplateOutlet="
+                                        isSensitiveParameter(item) ? sensitive : nonSensitive;
+                                        context: { $implicit: item.entity.parameter.value }
+                                    "></ng-container>
+                                <ng-template #sensitive>
+                                    <div class="sensitive">Sensitive value set</div>
+                                </ng-template>
+                                <ng-template #nonSensitive let-value>
+                                    <ng-container
+                                        *ngTemplateOutlet="
+                                            isEmptyString(value) ? blank : nonBlank;
+                                            context: { $implicit: value }
+                                        "></ng-container>
+                                </ng-template>
+                                <ng-template #blank>
+                                    <div class="empty">Empty string set</div>
+                                </ng-template>
+                                <ng-template #nonBlank let-value>
+                                    <div class="flex justify-between items-center">
+                                        <div class="whitespace-nowrap overflow-hidden text-ellipsis">
+                                            {{ value }}
+                                        </div>
+                                        @if (hasExtraWhitespace(value)) {
+                                            <div
+                                                class="fa fa-info"
+                                                nifiTooltip
+                                                [tooltipComponentType]="TextTip"
+                                                [tooltipInputData]="getExtraWhitespaceTipData()"></div>
+                                        }
+                                    </div>
+                                </ng-template>
                             }
-                            @if (canEdit(item)) {
-                                <div class="pointer fa fa-pencil" (click)="editClicked(item)" title="Edit"></div>
-                            }
-                            @if (canDelete(item)) {
-                                <div class="pointer fa fa-trash" (click)="deleteClicked(item)" title="Delete"></div>
-                            }
-                        </div>
-                    </td>
-                </ng-container>
+                        </td>
+                    </ng-container>
 
-                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-                <tr
-                    mat-row
-                    *matRowDef="let row; let even = even; columns: displayedColumns"
-                    (click)="selectParameter(row)"
-                    [class.selected]="isSelected(row)"
-                    [class.even]="even"></tr>
-            </table>
+                    <!-- Actions Column -->
+                    <ng-container matColumnDef="actions">
+                        <th mat-header-cell *matHeaderCellDef></th>
+                        <td mat-cell *matCellDef="let item">
+                            <div class="flex items-center gap-x-3">
+                                @if (canGoToParameter(item)) {
+                                    <div
+                                        class="pointer fa fa-long-arrow-right"
+                                        [routerLink]="getParameterLink(item)"
+                                        mat-dialog-close="ROUTED"
+                                        title="Go to"></div>
+                                }
+                                @if (canEdit(item)) {
+                                    <div class="pointer fa fa-pencil" (click)="editClicked(item)" title="Edit"></div>
+                                }
+                                @if (canDelete(item)) {
+                                    <div class="pointer fa fa-trash" (click)="deleteClicked(item)" title="Delete"></div>
+                                }
+                            </div>
+                        </td>
+                    </ng-container>
+
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; let even = even; columns: displayedColumns"
+                        (click)="selectParameter(row)"
+                        [class.selected]="isSelected(row)"
+                        [class.even]="even"></tr>
+                </table>
+            </div>
         </div>
     </div>
-    <div class="flex flex-col justify-between gap-y-3" style="flex-grow: 1">
+    <div class="flex flex-col justify-between gap-y-3 w-full">
         <div class="flex flex-col">
             <div>Parameter</div>
             <div class="value">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.scss
index 345a672e6a..ed0d2a33b8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.scss
@@ -17,20 +17,15 @@
 
 @use '@angular/material' as mat;
 
-.parameter-table.listing-table {
-    @include mat.table-density(-4);
-    min-width: 740px;
+.parameter-table {
+    .listing-table {
+        @include mat.table-density(-4);
+        width: 506px;
 
-    table {
-        width: auto;
-
-        td,
-        th {
-            cursor: default;
-        }
-
-        .mat-column-actions {
-            width: 75px;
+        table {
+            .mat-column-actions {
+                width: 75px;
+            }
         }
     }
 }
diff --git a/nifi-nar-bundles/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-nar-bundles/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 c490cbf385..0a0324eec5 100644
--- a/nifi-nar-bundles/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-nar-bundles/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
@@ -55,14 +55,14 @@
                     </div>
                 </form>
                 <div class="flex flex-col justify-center">
-                    <button class="nifi-button" (click)="searchClicked()">
+                    <button mat-icon-button (click)="searchClicked()">
                         <i class="fa fa-search"></i>
                     </button>
                 </div>
             </div>
         </div>
         <div class="flex-1 relative -mt-4">
-            <div class="listing-table border absolute inset-0 overflow-y-auto">
+            <div class="listing-table absolute inset-0 overflow-y-auto">
                 <table
                     mat-table
                     [dataSource]="dataSource"
@@ -171,7 +171,7 @@
         </div>
         <div class="flex justify-between">
             <div class="refresh-container flex items-center gap-x-2">
-                <button class="nifi-button" (click)="refreshClicked()">
+                <button mat-icon-button (click)="refreshClicked()">
                     <i class="fa fa-refresh" [class.fa-spin]="loading"></i>
                 </button>
                 <div>Last updated:</div>
diff --git a/nifi-nar-bundles/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.ts b/nifi-nar-bundles/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.ts
index ab2b3a8fe8..0b3ae62147 100644
--- a/nifi-nar-bundles/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.ts
+++ b/nifi-nar-bundles/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.ts
@@ -40,6 +40,7 @@ import { MatSliderModule } from '@angular/material/slider';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ErrorBanner } from '../../../../../ui/common/error-banner/error-banner.component';
 import { ClusterSummary } from '../../../../../state/cluster-summary';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'provenance-event-table',
@@ -59,7 +60,8 @@ import { ClusterSummary } from '../../../../../state/cluster-summary';
         MatPaginatorModule,
         LineageComponent,
         MatSliderModule,
-        ErrorBanner
+        ErrorBanner,
+        MatButtonModule
     ],
     styleUrls: ['./provenance-event-table.component.scss']
 })
diff --git a/nifi-nar-bundles/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-nar-bundles/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 26ff0b9bac..ada74f6eec 100644
--- a/nifi-nar-bundles/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-nar-bundles/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
@@ -39,7 +39,7 @@
         </div>
     </div>
     <div class="flex-1 relative">
-        <div class="listing-table border absolute inset-0 overflow-y-auto">
+        <div class="listing-table absolute inset-0 overflow-y-auto">
             <table mat-table [dataSource]="dataSource">
                 <!-- More Details Column -->
                 <ng-container matColumnDef="moreDetails">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.component.html
index 022c204386..a84fcab858 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.component.html
@@ -36,7 +36,7 @@
         </div>
         <div class="flex justify-between">
             <div class="flex items-center gap-x-2">
-                <button class="nifi-button" (click)="refreshClicked()">
+                <button mat-icon-button (click)="refreshClicked()">
                     <i class="fa fa-refresh" [class.fa-spin]="status === 'loading'"></i>
                 </button>
                 <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.module.ts
index 5e77a8f6ab..848fe88553 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/queue-listing.module.ts
@@ -27,6 +27,7 @@ import { EffectsModule } from '@ngrx/effects';
 import { queueFeatureKey, reducers } from '../../state';
 import { QueueListingEffects } from '../../state/queue-listing/queue-listing.effects';
 import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [QueueListing],
@@ -39,7 +40,8 @@ import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.com
         FlowFileTable,
         StoreModule.forFeature(queueFeatureKey, reducers),
         EffectsModule.forFeature(QueueListingEffects),
-        ErrorBanner
+        ErrorBanner,
+        MatButtonModule
     ]
 })
 export class QueueListingModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.html
index 579c18998a..a6c2153598 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.html
@@ -15,8 +15,8 @@
   ~ limitations under the License.
   -->
 
-<div class="relative h-full border">
-    <div class="flow-analysis-rule-table listing-table absolute inset-0 overflow-y-auto">
+<div class="flow-analysis-rule-table relative h-full">
+    <div class="listing-table absolute inset-0 overflow-y-auto">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.scss
index fad04378a6..0934915f54 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.scss
@@ -15,10 +15,12 @@
  * limitations under the License.
  */
 
-.flow-analysis-rule-table.listing-table {
-    table {
-        .mat-column-moreDetails {
-            min-width: 100px;
+.flow-analysis-rule-table {
+    .listing-table {
+        table {
+            .mat-column-moreDetails {
+                min-width: 100px;
+            }
         }
     }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.component.html
index db79394f5f..73af552820 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.component.html
@@ -25,7 +25,7 @@
             <div class="flex flex-col h-full gap-y-2">
                 @if (currentUser.controllerPermissions.canWrite) {
                     <div class="flex justify-end">
-                        <button class="nifi-button" (click)="openNewFlowAnalysisRuleDialog()">
+                        <button mat-icon-button (click)="openNewFlowAnalysisRuleDialog()">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -45,7 +45,7 @@
                 </div>
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button class="nifi-button" (click)="refreshFlowAnalysisRuleListing()">
+                        <button mat-icon-button (click)="refreshFlowAnalysisRuleListing()">
                             <i class="fa fa-refresh" [class.fa-spin]="flowAnalysisRuleState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.module.ts
index 4337832580..6354fac243 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rules.module.ts
@@ -24,6 +24,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
 import { PropertyTable } from '../../../../ui/common/property-table/property-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [FlowAnalysisRules],
@@ -35,7 +36,8 @@ import { PropertyTable } from '../../../../ui/common/property-table/property-tab
         MatTableModule,
         NifiTooltipDirective,
         FlowAnalysisRuleTable,
-        PropertyTable
+        PropertyTable,
+        MatButtonModule
     ]
 })
 export class FlowAnalysisRulesModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.component.html
index daf29d4257..61485af17a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.component.html
@@ -25,7 +25,7 @@
             <div class="flex flex-col h-full gap-y-2">
                 @if (currentUser.controllerPermissions.canWrite) {
                     <div class="flex justify-end">
-                        <button class="nifi-button" (click)="openNewControllerServiceDialog()">
+                        <button mat-icon-button (click)="openNewControllerServiceDialog()">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -49,7 +49,7 @@
                 </div>
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button class="nifi-button" (click)="refreshControllerServiceListing()">
+                        <button mat-icon-button (click)="refreshControllerServiceListing()">
                             <i class="fa fa-refresh" [class.fa-spin]="serviceState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.module.ts
index 815f85abb2..dc00b3a6a2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.module.ts
@@ -21,10 +21,11 @@ import { ManagementControllerServices } from './management-controller-services.c
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { ControllerServiceTable } from '../../../../ui/common/controller-service/controller-service-table/controller-service-table.component';
 import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [ManagementControllerServices],
     exports: [ManagementControllerServices],
-    imports: [CommonModule, NgxSkeletonLoaderModule, ControllerServiceTable, ErrorBanner]
+    imports: [CommonModule, NgxSkeletonLoaderModule, ControllerServiceTable, ErrorBanner, MatButtonModule]
 })
 export class ManagementControllerServicesModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
index 48814d22b7..579d6fc0c8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
@@ -202,7 +202,7 @@
                                         </div>
 
                                         <div class="flex-1 relative">
-                                            <div class="listing-table overflow-y-auto border absolute inset-0">
+                                            <div class="listing-table overflow-y-auto absolute inset-0">
                                                 <table
                                                     mat-table
                                                     [dataSource]="getParameterMappingDataSource(parameterGroupConfig)"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
index 8b5f3826fd..e7ce6d45a5 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/parameter-groups-table/parameter-groups-table.component.html
@@ -17,7 +17,7 @@
 
 <div class="parameter-group-table h-full flex flex-col">
     <div class="flex-1 relative">
-        <div class="listing-table overflow-y-auto border absolute inset-0">
+        <div class="listing-table overflow-y-auto absolute inset-0">
             <table
                 mat-table
                 [dataSource]="parameterGroupsDataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.html
index c32575eea1..6be22c50db 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.html
@@ -18,7 +18,7 @@
 <ng-container>
     <div class="parameter-providers-table h-full flex flex-col">
         <div class="flex-1 relative">
-            <div class="listing-table overflow-y-auto border absolute inset-0">
+            <div class="listing-table overflow-y-auto absolute inset-0">
                 <table
                     mat-table
                     [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.component.html
index 7f1f1e2ce1..18621fa90b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.component.html
@@ -26,7 +26,7 @@
                 @if (currentUser.controllerPermissions.canWrite) {
                     <div class="flex justify-end">
                         <button
-                            class="nifi-button"
+                            mat-icon-button
                             (click)="openNewParameterProviderDialog()"
                             title="Add a new parameter provider">
                             <i class="fa fa-plus"></i>
@@ -47,7 +47,7 @@
                 </div>
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button class="nifi-button" (click)="refreshParameterProvidersListing()">
+                        <button mat-icon-button (click)="refreshParameterProvidersListing()">
                             <i class="fa fa-refresh" [class.fa-spin]="parameterProvidersState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.module.ts
index ec080ddc10..5887d4e404 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers.module.ts
@@ -20,10 +20,11 @@ import { CommonModule } from '@angular/common';
 import { ParameterProviders } from './parameter-providers.component';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { ParameterProvidersTable } from './parameter-providers-table/parameter-providers-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [ParameterProviders],
     exports: [ParameterProviders],
-    imports: [CommonModule, NgxSkeletonLoaderModule, ParameterProvidersTable]
+    imports: [CommonModule, NgxSkeletonLoaderModule, ParameterProvidersTable, MatButtonModule]
 })
 export class ParameterProvidersModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
index 349d942b08..1302e6dfcd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div class="relative h-full border">
+<div class="relative h-full">
     <div class="registry-client-table listing-table absolute inset-0 overflow-y-auto">
         <table
             mat-table
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.component.html
index 7733d04790..f2b5a399f6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.component.html
@@ -25,7 +25,7 @@
             <div class="flex flex-col h-full gap-y-2">
                 @if (currentUser.controllerPermissions.canWrite) {
                     <div class="flex justify-end">
-                        <button class="nifi-button" (click)="openNewRegistryClientDialog()">
+                        <button mat-icon-button (click)="openNewRegistryClientDialog()">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -40,7 +40,7 @@
                 </div>
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button class="nifi-button" (click)="refreshRegistryClientListing()">
+                        <button mat-icon-button (click)="refreshRegistryClientListing()">
                             <i class="fa fa-refresh" [class.fa-spin]="registryClientState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.module.ts
index 020a0c8e41..3bbd38df7f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-clients.module.ts
@@ -23,10 +23,18 @@ import { RegistryClientTable } from './registry-client-table/registry-client-tab
 import { MatTableModule } from '@angular/material/table';
 import { MatSortModule } from '@angular/material/sort';
 import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [RegistryClients, RegistryClientTable],
     exports: [RegistryClients],
-    imports: [CommonModule, NgxSkeletonLoaderModule, MatTableModule, MatSortModule, NifiTooltipDirective]
+    imports: [
+        CommonModule,
+        NgxSkeletonLoaderModule,
+        MatTableModule,
+        MatSortModule,
+        NifiTooltipDirective,
+        MatButtonModule
+    ]
 })
 export class RegistryClientsModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
index b19f5a2fb6..771c0234ba 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div class="relative h-full border">
+<div class="relative h-full">
     <div class="reporting-task-table listing-table absolute inset-0 overflow-y-auto">
         <table
             mat-table
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.component.html
index 4ca91dead4..4da8a4bab6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.component.html
@@ -25,7 +25,7 @@
             <div class="flex flex-col h-full gap-y-2">
                 @if (currentUser.controllerPermissions.canWrite) {
                     <div class="flex justify-end">
-                        <button class="nifi-button" (click)="openNewReportingTaskDialog()">
+                        <button mat-icon-button (click)="openNewReportingTaskDialog()">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -46,7 +46,7 @@
                 </div>
                 <div class="flex justify-between">
                     <div class="refresh-container flex items-center gap-x-2">
-                        <button class="nifi-button" (click)="refreshReportingTaskListing()">
+                        <button mat-icon-button (click)="refreshReportingTaskListing()">
                             <i class="fa fa-refresh" [class.fa-spin]="reportingTaskState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.module.ts
index 7652d8c55d..0d85cc2e71 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-tasks.module.ts
@@ -25,6 +25,7 @@ import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-toolti
 import { ReportingTaskTable } from './reporting-task-table/reporting-task-table.component';
 import { ControllerServiceTable } from '../../../../ui/common/controller-service/controller-service-table/controller-service-table.component';
 import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [ReportingTasks, ReportingTaskTable],
@@ -36,7 +37,8 @@ import { RouterLink } from '@angular/router';
         MatTableModule,
         NifiTooltipDirective,
         ControllerServiceTable,
-        RouterLink
+        RouterLink,
+        MatButtonModule
     ]
 })
 export class ReportingTasksModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
index d1ca40d32a..5c87a1fa95 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
@@ -72,7 +72,7 @@
     <mat-dialog-actions>
         <div class="flex justify-between align-middle w-full">
             <div class="refresh-container flex items-center gap-x-2">
-                <button class="nifi-button" (click)="refresh()">
+                <button mat-icon-button (click)="refresh()">
                     <i class="fa fa-refresh" [class.fa-spin]="loading$ | async"></i>
                 </button>
                 <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.ts
index 979887c1a3..7de7c562ed 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.ts
@@ -23,7 +23,7 @@ import {
     MatDialogContent,
     MatDialogTitle
 } from '@angular/material/dialog';
-import { MatButton } from '@angular/material/button';
+import { MatButton, MatButtonModule } from '@angular/material/button';
 import { ComponentType, isDefinedAndNotNull } from '../../../../../state/shared';
 import { ComponentContext } from '../../../../../ui/common/component-context/component-context.component';
 import {
@@ -68,7 +68,8 @@ interface Helper {
         PortClusterTable,
         RemoteProcessGroupClusterTable,
         ConnectionClusterTable,
-        ProcessGroupClusterTable
+        ProcessGroupClusterTable,
+        MatButtonModule
     ],
     templateUrl: './cluster-summary-dialog.component.html',
     styleUrl: './cluster-summary-dialog.component.scss'
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html
index c22b86e949..786742a280 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html
@@ -16,7 +16,7 @@
   -->
 
 <div class="connection-cluster-table flex flex-1 h-full">
-    <div class="listing-table overflow-y-auto border flex-1">
+    <div class="listing-table overflow-y-auto flex-1">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
index c335a9a31d..343ca899fc 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
@@ -16,7 +16,7 @@
   -->
 
 <div class="port-cluster-table flex flex-1 h-full">
-    <div class="listing-table overflow-y-auto border flex-1">
+    <div class="listing-table overflow-y-auto flex-1">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
index 9770f0b79d..7e9303df13 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
@@ -16,7 +16,7 @@
   -->
 
 <div class="process-group-cluster-table flex flex-1 h-full">
-    <div class="listing-table overflow-y-auto border flex-1">
+    <div class="listing-table overflow-y-auto flex-1">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
index 093629e6db..bc1a591628 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
@@ -16,7 +16,7 @@
   -->
 
 <div class="processor-cluster-table flex flex-1 h-full">
-    <div class="listing-table overflow-y-auto border flex-1">
+    <div class="listing-table overflow-y-auto flex-1">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
index e90da24e6a..8cce9454b4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
@@ -16,7 +16,7 @@
   -->
 
 <div class="remote-process-group-cluster-table flex flex-1 h-full">
-    <div class="listing-table overflow-y-auto border flex-1">
+    <div class="listing-table overflow-y-auto flex-1">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.html
index 296b70a047..29429ec81e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.html
@@ -30,7 +30,7 @@
                     (filterChanged)="applyFilter($event)"></summary-table-filter>
 
                 <div class="flex-1 relative">
-                    <div class="listing-table overflow-y-auto border absolute inset-0">
+                    <div class="listing-table overflow-y-auto absolute inset-0">
                         <table
                             mat-table
                             [dataSource]="dataSource"
@@ -171,7 +171,7 @@
     </div>
     <div class="flex justify-between align-middle">
         <div class="refresh-container flex items-center gap-x-2">
-            <button class="nifi-button" (click)="refresh.next()">
+            <button mat-icon-button (click)="refresh.next()">
                 <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
             </button>
             <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
index e42698c244..72cc0c0fa2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
@@ -27,13 +27,22 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { PortStatusSnapshot, PortStatusSnapshotEntity } from '../../../state';
 import { ComponentStatusTable } from '../component-status-table/component-status-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 export type SupportedColumns = 'name' | 'runStatus' | 'in' | 'out';
 
 @Component({
     selector: 'port-status-table',
     standalone: true,
-    imports: [CommonModule, SummaryTableFilterModule, MatSortModule, MatTableModule, RouterLink, MatPaginatorModule],
+    imports: [
+        CommonModule,
+        SummaryTableFilterModule,
+        MatSortModule,
+        MatTableModule,
+        RouterLink,
+        MatPaginatorModule,
+        MatButtonModule
+    ],
     templateUrl: './port-status-table.component.html',
     styleUrls: ['./port-status-table.component.scss']
 })
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.html
index 7706656ae8..1675dd1644 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.html
@@ -31,7 +31,7 @@
                     (filterChanged)="applyFilter($event)"></summary-table-filter>
 
                 <div class="flex-1 relative">
-                    <div class="listing-table overflow-y-auto border absolute inset-0">
+                    <div class="listing-table overflow-y-auto absolute inset-0">
                         <table
                             mat-table
                             [dataSource]="dataSource"
@@ -241,7 +241,7 @@
     </div>
     <div class="flex justify-between align-middle">
         <div class="refresh-container flex items-center gap-x-2">
-            <button class="nifi-button" (click)="refresh.next()">
+            <button mat-icon-button (click)="refresh.next()">
                 <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
             </button>
             <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.ts
index df0e1f83ab..8300e8c47e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/connection-status-listing/connection-status-table/connection-status-table.component.ts
@@ -27,13 +27,22 @@ import { RouterLink } from '@angular/router';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { ConnectionStatusSnapshot, ConnectionStatusSnapshotEntity } from '../../../state';
 import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 export type SupportedColumns = 'name' | 'queue' | 'in' | 'out' | 'threshold' | 'sourceName' | 'destinationName';
 
 @Component({
     selector: 'connection-status-table',
     standalone: true,
-    imports: [CommonModule, SummaryTableFilterModule, MatSortModule, RouterLink, MatTableModule, MatPaginatorModule],
+    imports: [
+        CommonModule,
+        SummaryTableFilterModule,
+        MatSortModule,
+        RouterLink,
+        MatTableModule,
+        MatPaginatorModule,
+        MatButtonModule
+    ],
     templateUrl: './connection-status-table.component.html',
     styleUrls: ['./connection-status-table.component.scss']
 })
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.html
index 362e65487c..bd1dd3e918 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.html
@@ -30,7 +30,7 @@
                     (filterChanged)="applyFilter($event)"></summary-table-filter>
 
                 <div class="flex-1 relative">
-                    <div class="listing-table overflow-y-auto border absolute inset-0">
+                    <div class="listing-table overflow-y-auto absolute inset-0">
                         <table
                             mat-table
                             [dataSource]="dataSource"
@@ -369,7 +369,7 @@
     </div>
     <div class="flex justify-between align-middle">
         <div class="refresh-container flex items-center gap-x-2">
-            <button class="nifi-button" (click)="refresh.next()">
+            <button mat-icon-button (click)="refresh.next()">
                 <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
             </button>
             <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
index 99fc53ed28..e5e48f3d17 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
@@ -26,6 +26,7 @@ import { RouterLink } from '@angular/router';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { ProcessGroupStatusSnapshot, ProcessGroupStatusSnapshotEntity } from '../../../state';
 import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 export type SupportedColumns =
     | 'name'
@@ -42,7 +43,15 @@ export type SupportedColumns =
 @Component({
     selector: 'process-group-status-table',
     standalone: true,
-    imports: [CommonModule, MatSortModule, MatTableModule, SummaryTableFilterModule, RouterLink, MatPaginatorModule],
+    imports: [
+        CommonModule,
+        MatSortModule,
+        MatTableModule,
+        SummaryTableFilterModule,
+        RouterLink,
+        MatPaginatorModule,
+        MatButtonModule
+    ],
     templateUrl: './process-group-status-table.component.html',
     styleUrls: ['./process-group-status-table.component.scss']
 })
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html
index 833c487863..d1372ef4de 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.html
@@ -30,7 +30,7 @@
                     (filterChanged)="applyFilter($event)"></summary-table-filter>
 
                 <div class="flex-1 relative">
-                    <div class="listing-table overflow-y-auto border absolute inset-0">
+                    <div class="listing-table overflow-y-auto absolute inset-0">
                         <table
                             mat-table
                             [dataSource]="dataSource"
@@ -285,7 +285,7 @@
     </div>
     <div class="flex justify-between align-middle">
         <div class="refresh-container flex items-center gap-x-2">
-            <button class="nifi-button" (click)="refresh.next()">
+            <button mat-icon-button (click)="refresh.next()">
                 <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
             </button>
             <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
index f83e659039..0129643d9e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
@@ -27,6 +27,7 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { ProcessorStatusSnapshot, ProcessorStatusSnapshotEntity } from '../../../state';
 import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 export type SupportedColumns = 'name' | 'type' | 'processGroup' | 'runStatus' | 'in' | 'out' | 'readWrite' | 'tasks';
 
@@ -35,7 +36,15 @@ export type SupportedColumns = 'name' | 'type' | 'processGroup' | 'runStatus' |
     templateUrl: './processor-status-table.component.html',
     styleUrls: ['./processor-status-table.component.scss'],
     standalone: true,
-    imports: [RouterLink, SummaryTableFilterModule, MatTableModule, MatSortModule, NgClass, MatPaginatorModule]
+    imports: [
+        RouterLink,
+        SummaryTableFilterModule,
+        MatTableModule,
+        MatSortModule,
+        NgClass,
+        MatPaginatorModule,
+        MatButtonModule
+    ]
 })
 export class ProcessorStatusTable extends ComponentStatusTable<ProcessorStatusSnapshotEntity> {
     filterableColumns: SummaryTableFilterColumn[] = [
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.html
index a2754c9d7c..32167af54f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.html
@@ -31,7 +31,7 @@
                     (filterChanged)="applyFilter($event)"></summary-table-filter>
 
                 <div class="flex-1 relative">
-                    <div class="listing-table overflow-y-auto border absolute inset-0">
+                    <div class="listing-table overflow-y-auto absolute inset-0">
                         <table
                             mat-table
                             [dataSource]="dataSource"
@@ -183,7 +183,7 @@
     </div>
     <div class="flex justify-between align-middle">
         <div class="refresh-container flex items-center gap-x-2">
-            <button class="nifi-button" (click)="refresh.next()">
+            <button mat-icon-button (click)="refresh.next()">
                 <i class="fa fa-refresh" [class.fa-spin]="summaryListingStatus === 'loading'"></i>
             </button>
             <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
index 554c564bcb..9d8a3d48c2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
@@ -27,13 +27,22 @@ import { RouterLink } from '@angular/router';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { RemoteProcessGroupStatusSnapshot, RemoteProcessGroupStatusSnapshotEntity } from '../../../state';
 import { ComponentStatusTable } from '../../common/component-status-table/component-status-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 export type SupportedColumns = 'name' | 'uri' | 'transmitting' | 'sent' | 'received';
 
 @Component({
     selector: 'remote-process-group-status-table',
     standalone: true,
-    imports: [CommonModule, SummaryTableFilterModule, MatSortModule, MatTableModule, RouterLink, MatPaginatorModule],
+    imports: [
+        CommonModule,
+        SummaryTableFilterModule,
+        MatSortModule,
+        MatTableModule,
+        RouterLink,
+        MatPaginatorModule,
+        MatButtonModule
+    ],
     templateUrl: './remote-process-group-status-table.component.html',
     styleUrls: ['./remote-process-group-status-table.component.scss']
 })
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
index fc28e7178c..7074af5b84 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
@@ -24,7 +24,7 @@
                 <div class="value">{{ request.identity }}</div>
             </div>
             <div class="listing-table">
-                <div class="h-96 overflow-y-auto overflow-x-hidden border">
+                <div class="h-96 overflow-y-auto overflow-x-hidden">
                     <table
                         mat-table
                         [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.component.html
index 26515386d1..5d4856af1a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.component.html
@@ -41,7 +41,7 @@
             }
             <div class="flex justify-between">
                 <div class="refresh-container flex items-center gap-x-2">
-                    <button class="nifi-button" (click)="refreshUserListing()">
+                    <button mat-icon-button (click)="refreshUserListing()">
                         <i class="fa fa-refresh" [class.fa-spin]="userListingState.status === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.module.ts
index 5d07bd3029..5c05c1a6fd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-listing.module.ts
@@ -20,10 +20,11 @@ import { UserListing } from './user-listing.component';
 import { CommonModule } from '@angular/common';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { UserTable } from './user-table/user-table.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
     declarations: [UserListing],
     exports: [UserListing],
-    imports: [CommonModule, NgxSkeletonLoaderModule, UserTable]
+    imports: [CommonModule, NgxSkeletonLoaderModule, UserTable, MatButtonModule]
 })
 export class UserListingModule {}
diff --git a/nifi-nar-bundles/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-nar-bundles/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 960c36d33a..9757d724fa 100644
--- a/nifi-nar-bundles/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-nar-bundles/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
@@ -40,14 +40,14 @@
         </div>
         <div class="flex flex-col justify-center">
             @if (canModifyTenants(currentUser)) {
-                <button class="nifi-button" (click)="createClicked()">
+                <button mat-icon-button (click)="createClicked()">
                     <i class="fa fa-plus"></i>
                 </button>
             }
         </div>
     </div>
     <div class="flex-1 relative">
-        <div class="listing-table overflow-y-auto border absolute inset-0">
+        <div class="listing-table overflow-y-auto absolute inset-0">
             <table
                 mat-table
                 [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/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.ts b/nifi-nar-bundles/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.ts
index 41461f7ddb..78f605612f 100644
--- a/nifi-nar-bundles/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.ts
+++ b/nifi-nar-bundles/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.ts
@@ -28,6 +28,7 @@ import { MatSelectModule } from '@angular/material/select';
 
 import { MatInputModule } from '@angular/material/input';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
 
 export interface TenantItem {
     id: string;
@@ -46,7 +47,15 @@ export interface Tenants {
     selector: 'user-table',
     standalone: true,
     templateUrl: './user-table.component.html',
-    imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatTableModule, MatSortModule, MatInputModule],
+    imports: [
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatTableModule,
+        MatSortModule,
+        MatInputModule,
+        MatButtonModule
+    ],
     styleUrls: ['./user-table.component.scss']
 })
 export class UserTable implements AfterViewInit {
diff --git a/nifi-nar-bundles/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
index ff41e3be29..efc6f74485 100644
--- a/nifi-nar-bundles/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
@@ -48,7 +48,7 @@
                         }
                     </div>
                 </form>
-                <div class="h-72 overflow-y-auto overflow-x-hidden border">
+                <div class="h-72 overflow-y-auto overflow-x-hidden">
                     <table
                         mat-table
                         [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
index 06ceff163c..94ca6568c1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div class="relative h-full border">
+<div class="relative h-full">
     <div class="controller-service-table listing-table absolute inset-0 overflow-y-auto">
         <table
             mat-table
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.scss
index 3a513b3e55..2a467a8a47 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.scss
@@ -17,12 +17,12 @@
 
 @use '@angular/material' as mat;
 
-.controller-service-table.listing-table {
-    @include mat.table-density(-4);
-
-    table {
-        .mat-column-moreDetails {
-            min-width: 90px;
+.controller-service-table {
+    .listing-table {
+        table {
+            .mat-column-moreDetails {
+                min-width: 90px;
+            }
         }
     }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
index fefc8d1e32..be2dc47451 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
@@ -25,56 +25,21 @@
     $canvas-color-config: mat.get-color-config($canvas-theme);
 
     // Get the color palette from the color-config.
-    $primary-palette: map.get($color-config, 'primary');
     $accent-palette: map.get($color-config, 'accent');
     $warn-palette: map.get($color-config, 'warn');
 
     // Get hues from palette
-    $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
-    $primary-palette-default-contrast: mat.get-color-from-palette($primary-palette, 'default-contrast');
-    $primary-palette-darker: mat.get-color-from-palette($primary-palette, 'darker');
-    $primary-palette-darker-contrast: mat.get-color-from-palette($primary-palette, 'darker-contrast');
     $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
     $warn-palette-default: mat.get-color-from-palette($warn-palette, default);
-
-    $surface-darker: utils.get-surface($canvas-color-config, darker);
-    $surface: utils.get-surface($canvas-color-config);
-    $accent-surface: utils.get-surface($color-config, default, 'accent');
-    $header-surface: utils.ensure-contrast($primary-palette-default, $surface, $primary-palette-darker);
-    $header-on-surface: utils.ensure-contrast(
-        $primary-palette-default-contrast,
-        $header-surface,
-        $primary-palette-darker-contrast
-    );
-    $surface-highlight: utils.get-on-surface($canvas-color-config, 'highlight');
     $on-surface-medium: utils.get-on-surface($canvas-color-config, medium);
 
     .extension-creation-dialog {
         @include mat.button-density(-1);
 
-        .type-table {
+        .listing-table {
+            @include mat.table-density(-4);
+
             table {
-                th {
-                    background-color: $header-surface;
-                    color: $header-on-surface;
-
-                    .mat-sort-header-arrow {
-                        color: $header-on-surface;
-                    }
-                }
-
-                tr:hover {
-                    background-color: $surface-highlight !important;
-                }
-
-                .selected {
-                    background-color: $accent-surface !important;
-                }
-
-                .even {
-                    background-color: $surface-darker;
-                }
-
                 .fa.fa-shield {
                     color: $warn-palette-default;
                 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
index 5173a4d8a1..35d4e2a00a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
@@ -24,15 +24,15 @@
                     <mat-label>Filter types</mat-label>
                     <input
                         matInput
-                        class="border px-1.5 py-1 w-64"
+                        class="px-1.5 py-1 w-64"
                         type="text"
                         (keyup)="filterTypes($event)"
                         placeholder="Filter types..." />
                 </mat-form-field>
             </div>
         </div>
-        <div class="type-table">
-            <div class="h-96 overflow-y-auto overflow-x-hidden border">
+        <div class="listing-table">
+            <div class="h-96 overflow-y-auto overflow-x-hidden">
                 <table
                     mat-table
                     [dataSource]="dataSource"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.scss
index aa11c3a007..87fb21d73e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.scss
@@ -20,24 +20,11 @@
 .extension-creation-dialog {
     @include mat.button-density(-1);
 
-    .type-table {
-        @include mat.table-density(-4);
-        min-width: 740px;
+    .listing-table {
+        width: 740px;
 
         table {
-            width: 100%;
-
-            td,
-            th {
-                max-width: 300px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                padding: 0 8px;
-                cursor: default;
-            }
-
-            .fa {
+            .fa.fa-shield {
                 width: 10px;
                 height: 14px;
                 margin-right: 2px;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
index db536e4a18..3913791ae0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
@@ -28,14 +28,14 @@
     $primary-palette: map.get($color-config, 'primary');
 
     // Get hues from palette
-    $navbar-surface: mat.get-color-from-palette($primary-palette, "navbar");
-    $navbar-on-surface: mat.get-color-from-palette($primary-palette, "navbar-contrast");
+    $navbar-surface: mat.get-color-from-palette($primary-palette, 'navbar');
+    $navbar-on-surface: mat.get-color-from-palette($primary-palette, 'navbar-contrast');
     @if ($navbar-surface) {
         // Nothing to do here, we have special colors from the palette.
     } @else {
         // There was not a special value set for the navbar, so we use Angular Material behavior.
-        $navbar-surface: mat.get-color-from-palette($primary-palette, "default");
-        $navbar-on-surface: mat.get-color-from-palette($primary-palette, "default-contrast");
+        $navbar-surface: mat.get-color-from-palette($primary-palette, 'default');
+        $navbar-on-surface: mat.get-color-from-palette($primary-palette, 'default-contrast');
     }
 
     // We need this to get the right color value for the global menu items.
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
index 4a9ae8626f..a12c88d7a3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
@@ -41,13 +41,11 @@
 
         .nf-editor {
             .CodeMirror {
-                border: 1px solid $canvas-primary-palette-500;
                 background-color: $surface;
 
                 &.blank {
                     background: $primary-palette-default;
                     color: $primary-palette-lighter;
-                    border: 1px solid $primary-palette-default;
                 }
             }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.scss
index 4d8b396cfd..4059149d78 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.scss
@@ -35,9 +35,16 @@
         cursor: default;
 
         .CodeMirror {
+            border-width: 1px;
+            border-style: solid;
             font-family: monospace;
             cursor: default;
             line-height: normal;
+
+            &.blank {
+                border-width: 1px;
+                border-style: solid;
+            }
         }
 
         .CodeMirror-scroll {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
index a8550b2007..439d7cdeef 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
@@ -15,158 +15,160 @@
   ~ limitations under the License.
   -->
 
-<div class="property-table listing-table flex flex-col gap-y-3">
+<div class="property-table flex flex-col gap-y-3">
     <div class="flex justify-between items-center">
         <div class="font-bold">Required field</div>
         <div>
             <!-- TODO Property Verification -->
-            <button class="nifi-button" type="button" (click)="newPropertyClicked()">
+            <button mat-icon-button type="button" (click)="newPropertyClicked()">
                 <i class="fa fa-plus"></i>
             </button>
         </div>
     </div>
-    <div class="h-96 overflow-y-auto overflow-x-hidden border">
-        <table mat-table #propertyTable [dataSource]="dataSource">
-            <!-- Property Column -->
-            <ng-container matColumnDef="property">
-                <th mat-header-cell *matHeaderCellDef>Property</th>
-                <td mat-cell *matCellDef="let item" [class.font-bold]="item.descriptor.required">
-                    <div class="flex justify-between items-center">
-                        <div>
-                            {{ item.descriptor.displayName }}
+    <div class="listing-table">
+        <div class="h-96 overflow-y-auto overflow-x-hidden">
+            <table mat-table #propertyTable [dataSource]="dataSource">
+                <!-- Property Column -->
+                <ng-container matColumnDef="property">
+                    <th mat-header-cell *matHeaderCellDef>Property</th>
+                    <td mat-cell *matCellDef="let item" [class.font-bold]="item.descriptor.required">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                {{ item.descriptor.displayName }}
+                            </div>
+                            <div>
+                                @if (hasInfo(item.descriptor)) {
+                                    <div
+                                        class="fa fa-question-circle"
+                                        nifiTooltip
+                                        [tooltipComponentType]="PropertyTip"
+                                        [tooltipInputData]="getPropertyTipData(item)"
+                                        [delayClose]="false"></div>
+                                }
+                            </div>
                         </div>
-                        <div>
-                            @if (hasInfo(item.descriptor)) {
-                                <div
-                                    class="fa fa-question-circle"
-                                    nifiTooltip
-                                    [tooltipComponentType]="PropertyTip"
-                                    [tooltipInputData]="getPropertyTipData(item)"
-                                    [delayClose]="false"></div>
-                            }
-                        </div>
-                    </div>
-                </td>
-            </ng-container>
+                    </td>
+                </ng-container>
 
-            <!-- Value Column -->
-            <ng-container matColumnDef="value">
-                <th mat-header-cell *matHeaderCellDef>Value</th>
-                <td mat-cell *matCellDef="let item">
-                    <div
-                        [id]="formatId(item)"
-                        class="pointer"
-                        cdkOverlayOrigin
-                        #trigger="cdkOverlayOrigin"
-                        (click)="openEditor(trigger, item, $event)">
-                        @if (isNull(item.value)) {
-                            <div class="unset">No value set</div>
-                        } @else {
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    isSensitiveProperty(item.descriptor) ? sensitive : nonSensitive;
-                                    context: { $implicit: resolvePropertyValue(item) }
-                                "></ng-container>
-                            <ng-template #sensitive>
-                                <div class="sensitive">Sensitive value set</div>
-                            </ng-template>
-                            <ng-template #nonSensitive let-resolvedValue>
+                <!-- Value Column -->
+                <ng-container matColumnDef="value">
+                    <th mat-header-cell *matHeaderCellDef>Value</th>
+                    <td mat-cell *matCellDef="let item">
+                        <div
+                            [id]="formatId(item)"
+                            class="pointer"
+                            cdkOverlayOrigin
+                            #trigger="cdkOverlayOrigin"
+                            (click)="openEditor(trigger, item, $event)">
+                            @if (isNull(item.value)) {
+                                <div class="unset">No value set</div>
+                            } @else {
                                 <ng-container
                                     *ngTemplateOutlet="
-                                        isEmptyString(resolvedValue) ? blank : nonBlank;
-                                        context: { $implicit: resolvedValue }
+                                        isSensitiveProperty(item.descriptor) ? sensitive : nonSensitive;
+                                        context: { $implicit: resolvePropertyValue(item) }
                                     "></ng-container>
-                            </ng-template>
-                            <ng-template #blank>
-                                <div class="empty">Empty string set</div>
-                            </ng-template>
-                            <ng-template #nonBlank let-resolvedValue>
-                                <div class="flex justify-between items-center">
-                                    <div class="whitespace-nowrap overflow-hidden text-ellipsis">
-                                        {{ resolvedValue }}
+                                <ng-template #sensitive>
+                                    <div class="sensitive">Sensitive value set</div>
+                                </ng-template>
+                                <ng-template #nonSensitive let-resolvedValue>
+                                    <ng-container
+                                        *ngTemplateOutlet="
+                                            isEmptyString(resolvedValue) ? blank : nonBlank;
+                                            context: { $implicit: resolvedValue }
+                                        "></ng-container>
+                                </ng-template>
+                                <ng-template #blank>
+                                    <div class="empty">Empty string set</div>
+                                </ng-template>
+                                <ng-template #nonBlank let-resolvedValue>
+                                    <div class="flex justify-between items-center">
+                                        <div class="whitespace-nowrap overflow-hidden text-ellipsis">
+                                            {{ resolvedValue }}
+                                        </div>
+                                        @if (hasExtraWhitespace(resolvedValue)) {
+                                            <div
+                                                class="fa fa-info"
+                                                nifiTooltip
+                                                [tooltipComponentType]="TextTip"
+                                                [tooltipInputData]="getExtraWhitespaceTipData()"></div>
+                                        }
                                     </div>
-                                    @if (hasExtraWhitespace(resolvedValue)) {
-                                        <div
-                                            class="fa fa-info"
-                                            nifiTooltip
-                                            [tooltipComponentType]="TextTip"
-                                            [tooltipInputData]="getExtraWhitespaceTipData()"></div>
-                                    }
-                                </div>
-                            </ng-template>
-                        }
-                    </div>
-                </td>
-            </ng-container>
+                                </ng-template>
+                            }
+                        </div>
+                    </td>
+                </ng-container>
 
-            <!-- Actions Column -->
-            <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef></th>
-                <td mat-cell *matCellDef="let item">
-                    <div class="flex items-center gap-x-3">
-                        @if (item.descriptor.identifiesControllerService) {
-                            <div
-                                class="pointer fa fa-plus"
-                                (click)="createNewControllerService(item)"
-                                title="Create new service"></div>
-                        }
-                        @if (canConvertToParameter(item)) {
-                            <div
-                                class="pointer fa fa-level-up"
-                                (click)="convertToParameterClicked(item)"
-                                title="Convert to Parameter"></div>
-                        }
-                        @if (canGoToParameter(item)) {
-                            <div
-                                class="pointer fa fa-long-arrow-right"
-                                (click)="goToParameterClicked(item)"
-                                title="Go to Parameter"></div>
-                        }
-                        @if (canGoToService(item)) {
-                            <div
-                                class="pointer fa fa-long-arrow-right"
-                                (click)="goToServiceClicked(item)"
-                                title="Go to Service"></div>
-                        }
-                        @if (item.type == 'userDefined') {
-                            <div class="pointer fa fa-trash" (click)="deleteProperty(item)" title="Delete"></div>
-                        }
-                    </div>
-                </td>
-            </ng-container>
+                <!-- Actions Column -->
+                <ng-container matColumnDef="actions">
+                    <th mat-header-cell *matHeaderCellDef></th>
+                    <td mat-cell *matCellDef="let item">
+                        <div class="flex items-center gap-x-3">
+                            @if (item.descriptor.identifiesControllerService) {
+                                <div
+                                    class="pointer fa fa-plus"
+                                    (click)="createNewControllerService(item)"
+                                    title="Create new service"></div>
+                            }
+                            @if (canConvertToParameter(item)) {
+                                <div
+                                    class="pointer fa fa-level-up"
+                                    (click)="convertToParameterClicked(item)"
+                                    title="Convert to Parameter"></div>
+                            }
+                            @if (canGoToParameter(item)) {
+                                <div
+                                    class="pointer fa fa-long-arrow-right"
+                                    (click)="goToParameterClicked(item)"
+                                    title="Go to Parameter"></div>
+                            }
+                            @if (canGoToService(item)) {
+                                <div
+                                    class="pointer fa fa-long-arrow-right"
+                                    (click)="goToServiceClicked(item)"
+                                    title="Go to Service"></div>
+                            }
+                            @if (item.type == 'userDefined') {
+                                <div class="pointer fa fa-trash" (click)="deleteProperty(item)" title="Delete"></div>
+                            }
+                        </div>
+                    </td>
+                </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-            <tr
-                mat-row
-                *matRowDef="let row; let even = even; columns: displayedColumns"
-                (click)="selectProperty(row)"
-                [class.selected]="isSelected(row)"
-                [class.even]="even"></tr>
-        </table>
-        <ng-template
-            cdkConnectedOverlay
-            [cdkConnectedOverlayOrigin]="editorTrigger"
-            [cdkConnectedOverlayPositions]="editorPositions"
-            [cdkConnectedOverlayHasBackdrop]="true"
-            [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
-            [cdkConnectedOverlayOpen]="editorOpen"
-            (detach)="closeEditor()"
-            (backdropClick)="closeEditor()">
-            @if (hasAllowableValues(editorItem)) {
-                <combo-editor
-                    [item]="editorItem"
-                    [getParameters]="getParameters"
-                    [width]="editorWidth"
-                    (ok)="savePropertyValue(editorItem, $event)"
-                    (cancel)="closeEditor()"></combo-editor>
-            } @else {
-                <nf-editor
-                    [item]="editorItem"
-                    [getParameters]="getParameters"
-                    [width]="editorWidth"
-                    (ok)="savePropertyValue(editorItem, $event)"
-                    (cancel)="closeEditor()"></nf-editor>
-            }
-        </ng-template>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                <tr
+                    mat-row
+                    *matRowDef="let row; let even = even; columns: displayedColumns"
+                    (click)="selectProperty(row)"
+                    [class.selected]="isSelected(row)"
+                    [class.even]="even"></tr>
+            </table>
+            <ng-template
+                cdkConnectedOverlay
+                [cdkConnectedOverlayOrigin]="editorTrigger"
+                [cdkConnectedOverlayPositions]="editorPositions"
+                [cdkConnectedOverlayHasBackdrop]="true"
+                [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
+                [cdkConnectedOverlayOpen]="editorOpen"
+                (detach)="closeEditor()"
+                (backdropClick)="closeEditor()">
+                @if (hasAllowableValues(editorItem)) {
+                    <combo-editor
+                        [item]="editorItem"
+                        [getParameters]="getParameters"
+                        [width]="editorWidth"
+                        (ok)="savePropertyValue(editorItem, $event)"
+                        (cancel)="closeEditor()"></combo-editor>
+                } @else {
+                    <nf-editor
+                        [item]="editorItem"
+                        [getParameters]="getParameters"
+                        [width]="editorWidth"
+                        (ok)="savePropertyValue(editorItem, $event)"
+                        (cancel)="closeEditor()"></nf-editor>
+                }
+            </ng-template>
+        </div>
     </div>
 </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.scss
index 67d151216e..9fbb08d6d1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.scss
@@ -17,28 +17,9 @@
 
 @use '@angular/material' as mat;
 
-.property-table.listing-table {
-    @include mat.table-density(-4);
-    min-width: 740px;
-
-    table {
-        width: auto;
-
-        td,
-        th {
-            cursor: default;
-        }
-
-        .mat-column-property {
-            min-width: 230px;
-        }
-
-        .mat-column-value {
-            min-width: 230px;
-        }
-
-        .mat-column-actions {
-            min-width: 50px;
-        }
+.property-table {
+    .listing-table {
+        @include mat.table-density(-4);
+        width: 740px;
     }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss
deleted file mode 100644
index 3f2efdb8b7..0000000000
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@use 'sass:math' as math;
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../../assets/utils.scss' as utils;
-
-@mixin nifi-theme($material-theme, $canvas-theme) {
-    // Get the color config from the theme.
-    $color-config: mat.get-color-config($material-theme);
-    $canvas-color-config: mat.get-color-config($canvas-theme);
-
-    // Get the color palette from the color-config.
-    $primary-palette: map.get($color-config, 'primary');
-
-    // Get hues from palette
-    $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
-
-    $handle-size: 15px;
-    $handle-color: $on-surface-lighter;
-
-    .resizable-triangle {
-        border-right: math.div($handle-size, 2) solid $handle-color;
-        border-bottom: math.div($handle-size, 2) solid $handle-color;
-    }
-}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss
index ad1a0c7709..0c3c3ddf0d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss
@@ -41,6 +41,10 @@ $handle-size: 15px;
     height: 0;
     border-left: math.div($handle-size, 2) solid transparent;
     border-top: math.div($handle-size, 2) solid transparent;
+    border-right-width: math.div($handle-size, 2);
+    border-right-style: solid;
+    border-bottom-width: math.div($handle-size, 2);
+    border-bottom-style: solid;
     bottom: 0;
     right: 0;
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
index a5e980cb9b..f352712633 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
@@ -161,7 +161,7 @@
                     <div class="flex-1">
                         @if (instances.length > 0) {
                             <div class="refresh-container flex items-center gap-x-2">
-                                <button class="nifi-button" (click)="refresh()">
+                                <button mat-icon-button (click)="refresh()">
                                     <i
                                         class="fa fa-refresh"
                                         [class.fa-spin]="statusHistoryState.status === 'loading'"></i>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
index 4f16aec166..8ebb07ac08 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
@@ -229,7 +229,7 @@
         <mat-dialog-actions>
             <div class="flex flex-1 justify-between">
                 <div class="refresh-container flex items-center gap-x-2">
-                    <button class="nifi-button" (click)="refreshSystemDiagnostics()">
+                    <button mat-icon-button (click)="refreshSystemDiagnostics()">
                         <i class="fa fa-refresh" [class.fa-spin]="(status$ | async) === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
new file mode 100644
index 0000000000..f5223e3395
--- /dev/null
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
@@ -0,0 +1,330 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../utils.scss' as utils;
+
+@mixin styles() {
+    html,
+    body {
+        height: 100%;
+    }
+
+    body {
+        margin: 0;
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+    }
+
+    a {
+        font-size: 13px;
+        cursor: pointer;
+        font-weight: normal;
+        display: inline-block;
+        font-family: Roboto;
+        text-decoration: underline;
+        text-underline-offset: 3px;
+    }
+
+    //Icon for styling mat-icon in forms throughout the application.
+    .info-icon {
+        font-size: 14px;
+        height: 14px !important;
+        width: 14px !important;
+    }
+
+    //This style is needed due to an incompatibility between material and tailwind.
+    .mdc-notched-outline__notch {
+        border-right: none;
+    }
+
+    .small-dialog {
+        min-width: 320px;
+    }
+
+    .medium-dialog {
+        min-width: 470px;
+    }
+
+    .medium-short-dialog {
+        max-height: 32%;
+        max-width: 34%;
+        min-height: 250px;
+        min-width: 440px;
+        font-size: 13px;
+    }
+
+    .large-dialog {
+        max-height: 72%;
+        max-width: 55%;
+        min-height: 520px;
+        min-width: 760px;
+    }
+
+    .xl-dialog {
+        max-height: 72%;
+        max-width: 85%;
+        min-height: 560px;
+        min-width: 1024px;
+    }
+
+    .edit-parameter-context-dialog {
+        max-height: 72%;
+        max-width: 55%;
+        min-width: 850px;
+        min-height: 575px;
+    }
+
+    .tooltip {
+        position: fixed;
+        max-width: 500px;
+        padding: 10px;
+        border-radius: 2px;
+        border-width: 1px;
+        font-size: 13px;
+        font-family: Roboto;
+        font-weight: 400;
+        word-wrap: break-word;
+        white-space: normal;
+        z-index: 1;
+
+        ul {
+            list-style: disc outside;
+            margin-left: 1em;
+        }
+    }
+
+    .property-editor {
+        font-size: 13px;
+        font-family: Roboto;
+        font-weight: 400;
+    }
+
+    .CodeMirror-hints {
+        font-size: 13px !important;
+        z-index: 1000 !important;
+        overflow-y: scroll !important;
+    }
+
+    .blank,
+    .unset,
+    .sensitive {
+        font-weight: normal !important;
+    }
+
+    .mat-mdc-icon-button {
+        --mdc-icon-button-state-layer-size: 28px;
+        --mdc-icon-button-icon-size: 14px;
+        line-height: var(--mdc-icon-button-state-layer-size);
+        padding: 0;
+
+        &.mat-mdc-button-base.mdc-icon-button {
+            padding: 0;
+        }
+    }
+
+    .pointer {
+        cursor: pointer;
+    }
+
+    .disabled {
+        cursor: not-allowed;
+    }
+
+    .value,
+    .refresh-timestamp {
+        font-weight: 500;
+    }
+}
+
+@mixin colors($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $accent-palette: map.get($color-config, 'accent');
+    $warn-palette: map.get($color-config, 'warn');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+    $canvas-accent-palette: map.get($canvas-color-config, 'accent');
+
+    // Get hues from palette
+
+    // Start with the canvas theme.
+    $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200);
+    $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
+    $canvas-accent-palette-lighter: mat.get-color-from-palette($canvas-accent-palette, lighter);
+    $canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default);
+
+    $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
+    $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
+    $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
+
+    $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
+    $accent-palette-lighter: mat.get-color-from-palette($accent-palette, 'lighter');
+
+    $warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter);
+    $warn-palette-default: mat.get-color-from-palette($warn-palette, 'default');
+
+    // Alternative hue for warn colors.
+    $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
+
+    $surface: utils.get-surface($canvas-color-config);
+    $surface-darker: utils.get-surface($canvas-color-config, darker);
+    $surface-highlight: utils.get-on-surface($canvas-color-config, highlight);
+    $on-surface: utils.get-on-surface($canvas-color-config);
+    $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
+
+    * {
+        // Tailwind sets a default that doesn't shift with light and dark themes
+        border-color: $on-surface-lighter;
+    }
+
+    .cdk-drag-disabled {
+        cursor: not-allowed !important;
+        background: $on-surface-lighter !important;
+    }
+
+    .cdk-drag-preview {
+        box-sizing: border-box;
+        border-radius: 4px;
+        box-shadow: 0 3px 6px $canvas-primary-palette-A200;
+    }
+
+    .cdk-drag-placeholder {
+        opacity: 0;
+    }
+
+    .cdk-drop-list-dragging {
+        cursor: grabbing;
+    }
+
+    a {
+        color: utils.get-color-on-surface($color-config, $surface);
+        text-decoration-color: $primary-palette-lighter;
+    }
+
+    a:hover {
+        text-decoration-color: utils.get-color-on-surface($color-config, $surface);
+    }
+
+    .tooltip {
+        background-color: $surface;
+        border-color: $on-surface;
+        box-shadow: 0 2px 5px $canvas-primary-palette-A200;
+        color: $on-surface;
+    }
+
+    .property-editor {
+        background-color: $surface;
+        box-shadow: 0 2px 5px $canvas-primary-palette-A200;
+    }
+
+    .disabled {
+        color: $primary-palette-default !important;
+        fill: $primary-palette-default !important;
+    }
+
+    .enabled {
+        color: $primary-palette-A400 !important;
+        fill: $primary-palette-A400 !important;
+    }
+
+    .stopped {
+        color: $warn-palette-lighter !important;
+        fill: $warn-palette-lighter !important;
+    }
+
+    .running {
+        color: $canvas-accent-palette-lighter !important;
+        fill: $canvas-accent-palette-lighter !important;
+    }
+
+    .has-errors,
+    .invalid {
+        color: $warn-palette-A200 !important;
+        fill: $warn-palette-A200 !important;
+    }
+
+    .validating {
+        color: $canvas-primary-palette-500 !important;
+        fill: $canvas-primary-palette-500 !important;
+    }
+
+    .transmitting {
+        color: $canvas-accent-palette-default !important;
+        fill: $canvas-accent-palette-default !important;
+    }
+
+    .up-to-date {
+        color: $canvas-accent-palette-default !important;
+        fill: $canvas-accent-palette-default !important;
+    }
+
+    .locally-modified,
+    .sync-failure {
+        color: $accent-palette-lighter !important;
+        fill: $accent-palette-lighter !important;
+    }
+
+    .stale,
+    .locally-modified-and-stale {
+        color: $warn-palette-default !important;
+        fill: $warn-palette-default !important;
+    }
+
+    .zero {
+        opacity: 0.5;
+    }
+
+    .blank,
+    .unset,
+    .sensitive {
+        color: $canvas-primary-palette-500 !important;
+    }
+
+    .mat-mdc-icon-button {
+        color: utils.get-color-on-surface($color-config, $surface-darker) !important;
+    }
+
+    .mat-mdc-icon-button:hover {
+        background-color: $surface-highlight !important;
+    }
+
+    .mat-mdc-icon-button:disabled {
+        color: $on-surface-lighter !important;
+        background-color: transparent !important;
+
+        i {
+            color: $on-surface-lighter !important;
+        }
+    }
+
+    .value,
+    .refresh-timestamp {
+        color: utils.get-color-on-surface($color-config, $surface, 'accent');
+    }
+
+    h3.page-header {
+        color: $primary-palette-default;
+    }
+
+    ngx-skeleton-loader .skeleton-loader {
+        background: $on-surface-lighter;
+    }
+}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
similarity index 87%
rename from nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss
rename to nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
index 7ff0b6488f..1fe69b156b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
@@ -17,9 +17,53 @@
 
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../../assets/utils.scss' as utils;
+@use '../utils.scss' as utils;
 
-@mixin nifi-theme($material-theme, $canvas-theme) {
+@mixin styles() {
+    .listing-table {
+        border-width: 1px;
+        border-style: solid;
+
+        table {
+            width: 100%;
+            table-layout: fixed;
+
+            td,
+            th {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding: 0 8px;
+                cursor: default;
+            }
+
+            .fa {
+                width: 10px;
+                height: 14px;
+                text-align: center;
+            }
+
+            .icon {
+                width: 10px;
+                text-align: center;
+            }
+
+            .mat-column-moreDetails {
+                min-width: 30px;
+            }
+
+            .mat-column-actions {
+                min-width: 115px;
+            }
+        }
+    }
+
+    .mat-sort-header-content {
+        overflow: hidden;
+    }
+}
+
+@mixin colors($material-theme, $canvas-theme) {
     // Get the color config from the theme.
     $color-config: mat.get-color-config($material-theme);
     $canvas-color-config: mat.get-color-config($canvas-theme);
@@ -42,21 +86,12 @@
         $primary-palette-darker-contrast
     );
     $surface-highlight: utils.get-on-surface($canvas-color-config, 'highlight');
+    $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
 
     .listing-table {
+        border-color: $on-surface-lighter;
+
         table {
-            width: 100%;
-            table-layout: fixed;
-
-            td,
-            th {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                padding: 0 8px;
-                cursor: default;
-            }
-
             th {
                 background-color: $header-surface !important;
                 color: $header-on-surface;
@@ -67,6 +102,12 @@
                 }
             }
 
+            th,
+            td {
+                border-bottom-width: 1px;
+                border-bottom-style: solid;
+            }
+
             tr:hover {
                 background-color: $surface-highlight !important;
             }
@@ -81,36 +122,11 @@
 
             .fa {
                 color: utils.get-color-on-surface($color-config, $surface);
-                width: 10px;
-                height: 14px;
-                text-align: center;
             }
 
             .icon {
                 color: utils.get-color-on-surface($color-config, $surface);
-                width: 10px;
-                text-align: center;
-            }
-
-            .mat-column-moreDetails {
-                min-width: 30px;
-            }
-
-            .mat-column-actions {
-                min-width: 115px;
             }
         }
-
-        .mat-mdc-table .mdc-data-table__header-row {
-            height: 35px;
-        }
-
-        .mat-mdc-table .mdc-data-table__row {
-            height: 35px;
-        }
-    }
-
-    .mat-sort-header-content {
-        overflow: hidden;
     }
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
index d1b925e538..5f71d72017 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
@@ -29,7 +29,7 @@ $material-primary-light-palette: (
     // 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-light-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
     50: rgba(#F9FAFB, 0.97),
     100: #e5ebed, // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect,
-    200: #cbd8dd, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled
+    200: #cbd8dd, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a
     300: #abbdc5, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
     400: #8aa2ad, // Default hue for this palette (color="primary").
     500: #728e9b, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header,
@@ -43,7 +43,7 @@ $material-primary-light-palette: (
     A100: rgba(#1491C1, 0.12), // .hint-pattern
     A200: #aabec7, // .zero
     A400: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
-    A700: #004849, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu
+    A700: #004849, // a, a:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu
     // These are the $material-primary-light-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
     // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important
     // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc.
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss
index 075c973468..84be81e597 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss
@@ -29,7 +29,7 @@ $material-primary-light-palette: (
     // 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-light-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
     50: #f0e7f2, // .context-menu
     100: #dac3e0, // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect,
-    200: #c29dcc, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled
+    200: #c29dcc, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a
     300: #aa79b7, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
     400: #985fa7, // Default hue for this palette (color="primary").
     500: #874b98, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header,
@@ -43,7 +43,7 @@ $material-primary-light-palette: (
     A100: rgba(20, 145, 193, 0.12), // .hint-pattern
     A200: #aabec7, // .zero
     A400: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
-    A700: #004849, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu
+    A700: #004849, // a, a:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu
 
     // These are the $material-primary-light-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
     // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
index 486bc6a41c..188168ac55 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
@@ -19,7 +19,8 @@
 // For more information: https://v16.material.angular.io/guide/theming-your-components
 @use '@angular/material' as mat;
 @use 'sass:map';
-@use 'assets/styles/listing-table-theme' as listing-table;
+@use 'assets/styles/app' as app;
+@use 'assets/styles/listing-table' as listing-table;
 @use 'app/app.component-theme' as app-component;
 @use 'app/pages/access-policies/feature/access-policies.component-theme' as access-policies;
 @use 'app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component-theme' as add-tenant-to-policy;
@@ -58,7 +59,6 @@
 @use 'app/ui/common/extension-creation/extension-creation.component-theme' as extension-creation;
 @use 'app/ui/common/navigation/navigation.component-theme' as navigation;
 @use 'app/ui/common/property-table/editors/nf-editor/nf-editor.component-theme' as nf-editor;
-@use 'app/ui/common/resizable/resizable.component-theme' as resizable;
 @use 'app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component-theme' as system-diagnostics-dialog;
 @use 'app/ui/common/status-history/status-history.component-theme' as status-history;
 @use 'app/ui/common/tooltips/property-hint-tip/property-hint-tip.component-theme' as property-hint-tip;
@@ -73,10 +73,6 @@
 @use 'codemirror/lib/codemirror.css';
 @use 'codemirror/addon/hint/show-hint.css';
 
-@use 'assets/utils.scss' as utils;
-
-// NOTE: for faster developer cycles during theme development the theme can also be changed here.
-// Ex: @import 'assets/themes/purple';
 // To override the canvas theme, you need to set the variables $nifi-canvas-theme-light and $nifi-canvas-theme-dark
 @import 'assets/themes/nifi-canvas';
 // To override the NiFi theme, you need to set the variables $material-theme-light and $material-theme-dark
@@ -178,310 +174,15 @@ $appFontPath: '~roboto-fontface/fonts';
 @tailwind components;
 @tailwind utilities;
 
-//General status styles. TODO - Reconsider this... separating canvas/style styles from html styles...
-@mixin nifi-colors($material-theme, $canvas-theme) {
-    // Get the color config from the theme.
-    $color-config: mat.get-color-config($material-theme);
-    $canvas-color-config: mat.get-color-config($canvas-theme);
-
-    // Get the color palette from the color-config.
-    $primary-palette: map.get($color-config, 'primary');
-    $accent-palette: map.get($color-config, 'accent');
-    $warn-palette: map.get($color-config, 'warn');
-    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
-    $canvas-accent-palette: map.get($canvas-color-config, 'accent');
-
-    // Get hues from palette
-
-    // Start with the canvas theme.
-    $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200);
-    $canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400);
-    $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
-    $canvas-accent-palette-lighter: mat.get-color-from-palette($canvas-accent-palette, lighter);
-    $canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default);
-
-    $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
-    $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
-    $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
-
-    $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
-    $accent-palette-lighter: mat.get-color-from-palette($accent-palette, 'lighter');
-
-    $warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter);
-    $warn-palette-default: mat.get-color-from-palette($warn-palette, 'default');
-
-    // Alternative hue for warn colors.
-    $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
-
-    $surface: utils.get-surface($canvas-color-config);
-    $surface-darker: utils.get-surface($canvas-color-config, darker);
-    $surface-highlight: utils.get-on-surface($canvas-color-config, highlight);
-    $on-surface: utils.get-on-surface($canvas-color-config);
-    $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
-
-    * { // Tailwind sets a default that doesn't shift with light and dark themes
-        border-color: $on-surface-lighter;
-    }
-
-    a {
-        color: utils.get-color-on-surface($color-config, $surface);
-        text-decoration-color: $primary-palette-lighter;
-    }
-
-    a:hover {
-        text-decoration-color: utils.get-color-on-surface($color-config, $surface);
-    }
-
-    .tooltip {
-        background-color: $surface;
-        border-color: $on-surface;
-        box-shadow: 0 2px 5px $canvas-primary-palette-A200;
-        color: $on-surface;
-    }
-
-    .property-editor {
-        background-color: $surface;
-        box-shadow: 0 2px 5px $canvas-primary-palette-A200;
-    }
-
-    .disabled {
-        color: $primary-palette-default !important;
-        fill: $primary-palette-default !important;
-    }
-
-    .enabled {
-        color: $primary-palette-A400 !important;
-        fill: $primary-palette-A400 !important;
-    }
-
-    .stopped {
-        color: $warn-palette-lighter !important;
-        fill: $warn-palette-lighter !important;
-    }
-
-    .running {
-        color: $canvas-accent-palette-lighter !important;
-        fill: $canvas-accent-palette-lighter !important;
-    }
-
-    .has-errors,
-    .invalid {
-        color: $warn-palette-A200 !important;
-        fill: $warn-palette-A200 !important;
-    }
-
-    .validating {
-        color: $canvas-primary-palette-500 !important;
-        fill: $canvas-primary-palette-500 !important;
-    }
-
-    .transmitting {
-        color: $canvas-accent-palette-default !important;
-        fill: $canvas-accent-palette-default !important;
-    }
-
-    .up-to-date {
-        color: $canvas-accent-palette-default !important;
-        fill: $canvas-accent-palette-default !important;
-    }
-
-    .locally-modified,
-    .sync-failure {
-        color: $accent-palette-lighter !important;
-        fill: $accent-palette-lighter !important;
-    }
-
-    .stale,
-    .locally-modified-and-stale {
-        color: $warn-palette-default !important;
-        fill: $warn-palette-default !important;
-    }
-
-    .zero {
-        opacity: 0.5;
-    }
-
-    .blank,
-    .unset,
-    .sensitive {
-        color: $canvas-primary-palette-500 !important;
-    }
-
-    button.nifi-button {
-        color: utils.get-color-on-surface($color-config, $surface-darker);
-    }
-
-    button.nifi-button:hover {
-        background-color: $surface-highlight;
-    }
-
-    button.nifi-button:disabled {
-        color: $on-surface-lighter;
-        background-color: transparent;
-        cursor: not-allowed;
-        
-        i {
-            color: $on-surface-lighter;
-        }
-    }
-
-    .value,
-    .refresh-timestamp {
-        color: utils.get-color-on-surface($color-config, $surface, 'accent');
-    }
-
-    .accent-palette-default {
-        color: $accent-palette-default;
-    }
-
-    ngx-skeleton-loader .skeleton-loader {
-        background: $canvas-primary-palette-400;
-    }
-}
-
-@mixin nifi-styles() {
-    html,
-    body {
-        height: 100%;
-    }
-
-    body {
-        margin: 0;
-        font-family: Roboto, 'Helvetica Neue', sans-serif;
-    }
-
-    a {
-        font-size: 13px;
-        cursor: pointer;
-        font-weight: normal;
-        display: inline-block;
-        font-family: Roboto;
-        text-decoration: underline;
-        text-underline-offset: 3px;
-    }
-
-    //Icon for styling mat-icon in forms throughout the application.
-    .info-icon {
-        font-size: 14px;
-        height: 14px !important;
-        width: 14px !important;
-    }
-
-    //This style is needed due to an incompatibility between material and tailwind.
-    .mdc-notched-outline__notch {
-        border-right: none;
-    }
-
-    .small-dialog {
-        min-width: 320px;
-    }
-
-    .medium-dialog {
-        min-width: 470px;
-    }
-
-    .medium-short-dialog {
-        max-height: 32%;
-        max-width: 34%;
-        min-height: 250px;
-        min-width: 440px;
-        font-size: 13px;
-    }
-
-    .large-dialog {
-        max-height: 72%;
-        max-width: 55%;
-        min-height: 520px;
-        min-width: 760px;
-    }
-
-    .xl-dialog {
-        max-height: 72%;
-        max-width: 85%;
-        min-height: 560px;
-        min-width: 1024px;
-    }
-
-    .edit-parameter-context-dialog {
-        max-height: 72%;
-        max-width: 55%;
-        min-width: 850px;
-        min-height: 575px;
-    }
-
-    .tooltip {
-        position: fixed;
-        max-width: 500px;
-        padding: 10px;
-        border-radius: 2px;
-        border-width: 1px;
-        font-size: 13px;
-        font-family: Roboto;
-        font-weight: 400;
-        word-wrap: break-word;
-        white-space: normal;
-        z-index: 1;
-
-        ul {
-            list-style: disc outside;
-            margin-left: 1em;
-        }
-    }
-
-    .property-editor {
-        font-size: 13px;
-        font-family: Roboto;
-        font-weight: 400;
-    }
-
-    .CodeMirror-hints {
-        font-size: 13px !important;
-        z-index: 1000 !important;
-        overflow-y: scroll !important;
-    }
-
-    .blank,
-    .unset,
-    .sensitive {
-        font-weight: normal !important;
-    }
-
-    button.nifi-button {
-        height: 28px;
-        width: 28px;
-        line-height: 28px;
-    }
-
-    button.nifi-button:hover {
-        cursor: pointer;
-    }
-
-    button.nifi-button:disabled {
-        cursor: not-allowed;
-    }
-
-    .pointer {
-        cursor: pointer;
-    }
-
-    .disabled {
-        cursor: not-allowed;
-    }
-
-    .value,
-    .refresh-timestamp {
-        font-weight: 500;
-    }
-}
-
 // only include this once (not needed for dark mode)
-@include nifi-styles();
+@include app.styles();
+@include listing-table.styles();
 
-// generate light mode nifi stylesheets
+// generate light mode stylesheets
 @include mat.all-component-themes($material-theme-light);
 @include app-component.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
-@include nifi-colors($material-theme-light, $nifi-canvas-theme-light);
-@include listing-table.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
+@include app.colors($material-theme-light, $nifi-canvas-theme-light);
+@include listing-table.colors($material-theme-light, $nifi-canvas-theme-light);
 @include access-policies.nifi-theme($material-theme-light);
 @include add-tenant-to-policy.nifi-theme($material-theme-light);
 @include component-access-policies.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
@@ -499,7 +200,7 @@ $appFontPath: '~roboto-fontface/fonts';
 @include flow-status.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
 @include header.nifi-theme($nifi-canvas-theme-light);
 @include new-canvas-item.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
-@include search.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
+@include search.nifi-theme($nifi-canvas-theme-light);
 @include prioritizers.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
 @include create-process-group.nifi-theme($material-theme-light);
 @include create-remote-process-group.nifi-theme($material-theme-light);
@@ -519,7 +220,6 @@ $appFontPath: '~roboto-fontface/fonts';
 @include extension-creation.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
 @include navigation.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
 @include nf-editor.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
-@include resizable.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
 @include system-diagnostics-dialog.nifi-theme($material-theme-light);
 @include status-history.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
 @include property-hint-tip.nifi-theme($material-theme-light);
@@ -531,10 +231,10 @@ $appFontPath: '~roboto-fontface/fonts';
     // Include the dark theme color styles.
     @include mat.all-component-colors($material-theme-dark);
 
-    // generate dark mode nifi stylesheets
+    // generate dark mode stylesheets
     @include app-component.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
-    @include nifi-colors($material-theme-dark, $nifi-canvas-theme-dark);
-    @include listing-table.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
+    @include app.colors($material-theme-dark, $nifi-canvas-theme-dark);
+    @include listing-table.colors($material-theme-dark, $nifi-canvas-theme-dark);
     @include access-policies.nifi-theme($material-theme-dark);
     @include add-tenant-to-policy.nifi-theme($material-theme-dark);
     @include component-access-policies.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
@@ -552,7 +252,7 @@ $appFontPath: '~roboto-fontface/fonts';
     @include flow-status.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
     @include header.nifi-theme($nifi-canvas-theme-dark);
     @include new-canvas-item.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
-    @include search.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
+    @include search.nifi-theme($nifi-canvas-theme-dark);
     @include prioritizers.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
     @include create-process-group.nifi-theme($material-theme-dark);
     @include create-remote-process-group.nifi-theme($material-theme-dark);
@@ -572,7 +272,6 @@ $appFontPath: '~roboto-fontface/fonts';
     @include extension-creation.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
     @include navigation.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
     @include nf-editor.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
-    @include resizable.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
     @include system-diagnostics-dialog.nifi-theme($material-theme-dark);
     @include status-history.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
     @include property-hint-tip.nifi-theme($material-theme-dark);