diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/.prettierignore b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/.prettierignore
index 2e6d78c196..4e65d169f6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/.prettierignore
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/.prettierignore
@@ -31,6 +31,9 @@ npm-debug.log
 /connect.lock
 /coverage
 
+# Theme
+src/assets/themes/*
+
 # System files
 .DS_Store
 Thumbs.db
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/override-policy-dialog/override-policy-dialog.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/override-policy-dialog/override-policy-dialog.component.html
index a4a3de8300..fdd1cbf6d8 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/override-policy-dialog/override-policy-dialog.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/override-policy-dialog/override-policy-dialog.component.html
@@ -25,7 +25,7 @@
         </mat-radio-group>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-        <button mat-raised-button mat-dialog-close color="accent">Cancel</button>
+        <button mat-stroked-button mat-dialog-close color="primary">Cancel</button>
         <button mat-raised-button [disabled]="overridePolicyForm.invalid" (click)="overrideClicked()" color="primary">
             Override
         </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/_canvas.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/_canvas.component-theme.scss
index 0ef9146ce8..b2e8a3f504 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/_canvas.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/_canvas.component-theme.scss
@@ -65,7 +65,7 @@
     .canvas-background {
         background-color: $canvas-primary-palette-600;
         background-image: linear-gradient(to right, $canvas-primary-palette-700 1px, transparent 1px),
-        linear-gradient(to bottom, $canvas-primary-palette-700 1px, transparent 1px);
+            linear-gradient(to bottom, $canvas-primary-palette-700 1px, transparent 1px);
     }
 
     /* svg styles */
@@ -79,7 +79,7 @@
           All components
       */
         .transparent {
-            fill: transparent
+            fill: transparent;
         }
 
         .warn-200 {
@@ -360,7 +360,7 @@
 
         g.connection rect.backpressure-object,
         g.connection rect.backpressure-data-size {
-            fill: $canvas-primary-palette-500
+            fill: $canvas-primary-palette-500;
         }
 
         g.connection rect.backpressure-object.not-configured,
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/header.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/header/header.component.html
index 7a2c476c19..963b88a462 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/header.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/header/header.component.html
@@ -17,34 +17,43 @@
 
 <header class="nifi-header">
     <navigation>
-        <new-canvas-item
-            [type]="ComponentType.Processor"
-            iconClass="icon-processor"
-            iconHoverClass="icon-processor-add"></new-canvas-item>
-        <new-canvas-item
-            [type]="ComponentType.InputPort"
-            iconClass="icon-port-in"
-            iconHoverClass="icon-port-in-add"></new-canvas-item>
-        <new-canvas-item
-            [type]="ComponentType.OutputPort"
-            iconClass="icon-port-out"
-            iconHoverClass="icon-port-out-add"></new-canvas-item>
-        <new-canvas-item
-            [type]="ComponentType.ProcessGroup"
-            iconClass="icon-group"
-            iconHoverClass="icon-group-add"></new-canvas-item>
-        <new-canvas-item
-            [type]="ComponentType.RemoteProcessGroup"
-            iconClass="icon-group-remote"
-            iconHoverClass="icon-group-remote-add"></new-canvas-item>
-        <new-canvas-item
-            [type]="ComponentType.Funnel"
-            iconClass="icon-funnel"
-            iconHoverClass="icon-funnel-add"></new-canvas-item>
-        <new-canvas-item
-            [type]="ComponentType.Label"
-            iconClass="icon-label"
-            iconHoverClass="icon-label-add"></new-canvas-item>
+        <ng-container *ngIf="canvasPermissions$ | async; let canvasPermissions">
+            <new-canvas-item
+                [type]="ComponentType.Processor"
+                [disabled]="!canvasPermissions.canWrite"
+                iconClass="icon-processor"
+                iconHoverClass="icon-processor-add"></new-canvas-item>
+            <new-canvas-item
+                [type]="ComponentType.InputPort"
+                [disabled]="!canvasPermissions.canWrite"
+                iconClass="icon-port-in"
+                iconHoverClass="icon-port-in-add"></new-canvas-item>
+            <new-canvas-item
+                [type]="ComponentType.OutputPort"
+                [disabled]="!canvasPermissions.canWrite"
+                iconClass="icon-port-out"
+                iconHoverClass="icon-port-out-add"></new-canvas-item>
+            <new-canvas-item
+                [type]="ComponentType.ProcessGroup"
+                [disabled]="!canvasPermissions.canWrite"
+                iconClass="icon-group"
+                iconHoverClass="icon-group-add"></new-canvas-item>
+            <new-canvas-item
+                [type]="ComponentType.RemoteProcessGroup"
+                [disabled]="!canvasPermissions.canWrite"
+                iconClass="icon-group-remote"
+                iconHoverClass="icon-group-remote-add"></new-canvas-item>
+            <new-canvas-item
+                [type]="ComponentType.Funnel"
+                [disabled]="!canvasPermissions.canWrite"
+                iconClass="icon-funnel"
+                iconHoverClass="icon-funnel-add"></new-canvas-item>
+            <new-canvas-item
+                [type]="ComponentType.Label"
+                [disabled]="!canvasPermissions.canWrite"
+                iconClass="icon-label"
+                iconHoverClass="icon-label-add"></new-canvas-item>
+        </ng-container>
     </navigation>
     <flow-status
         [controllerStatus]="(controllerStatus$ | async)!"
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/header.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/header/header.component.ts
index 5af040a7aa..65089d3ffb 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/header.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/header/header.component.ts
@@ -20,6 +20,7 @@ import { ComponentType } from '../../../../../state/shared';
 import { Store } from '@ngrx/store';
 import { CanvasState } from '../../../state';
 import {
+    selectCanvasPermissions,
     selectClusterSummary,
     selectControllerBulletins,
     selectControllerStatus,
@@ -62,6 +63,7 @@ export class HeaderComponent {
     clusterSummary$ = this.store.select(selectClusterSummary);
     controllerBulletins$ = this.store.select(selectControllerBulletins);
     currentProcessGroupId$ = this.store.select(selectCurrentProcessGroupId);
+    canvasPermissions$ = this.store.select(selectCanvasPermissions);
 
     constructor(
         private store: Store<CanvasState>,
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 a1609e9425..242dc8d037 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
@@ -43,11 +43,11 @@
 
                 .component-button-grip {
                     background: repeating-linear-gradient(
-                            90deg,
-                            $primary-palette-300,
-                            $primary-palette-300 4px,
-                            $primary-palette-300 4px,
-                            $primary-palette-300 6px
+                        90deg,
+                        $primary-palette-300,
+                        $primary-palette-300 4px,
+                        $primary-palette-300 4px,
+                        $primary-palette-300 6px
                     );
                 }
             }
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.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/header/new-canvas-item/new-canvas-item.component.html
index 089fc26961..538d5dfa9f 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.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/header/new-canvas-item/new-canvas-item.component.html
@@ -20,6 +20,7 @@
         class="h-16 w-16 pl-1.5 -mt-16 flex items-center justify-center relative icon"
         [class]="isHovering() ? iconHoverClass + ' hovering' : iconClass"
         [class.dragging]="dragging"
+        [disabled]="disabled"
         (mouseenter)="mouseEnter()"
         (mouseleave)="mouseLeave()"
         cdkDrag
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.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.scss
index ba51cc7c86..e0695991a6 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.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.scss
@@ -30,4 +30,8 @@
         cursor: -moz-grabbing;
         cursor: -webkit-grabbing;
     }
+
+    &:disabled {
+        box-shadow: none;
+    }
 }
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.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/header/new-canvas-item/new-canvas-item.component.ts
index c7b87c5619..45fa0d4594 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.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/header/new-canvas-item/new-canvas-item.component.ts
@@ -39,6 +39,7 @@ export class NewCanvasItem {
     @Input() type!: ComponentType;
     @Input() iconClass = '';
     @Input() iconHoverClass = '';
+    @Input() disabled = false;
 
     dragging = false;
 
@@ -68,11 +69,15 @@ export class NewCanvasItem {
     }
 
     mouseEnter() {
-        this.hovering = true;
+        if (!this.disabled) {
+            this.hovering = true;
+        }
     }
 
     mouseLeave() {
-        this.hovering = false;
+        if (!this.disabled) {
+            this.hovering = false;
+        }
     }
 
     isHovering(): boolean {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
index 7193719afb..2a8f8040f6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
@@ -38,7 +38,7 @@
 
     .provenance-header {
         color: $primary-palette-500;
-    };
+    }
 
     rect.lineage {
         fill: $canvas-primary-palette-600;
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/lineage/_lineage.component-theme.scss 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/lineage/_lineage.component-theme.scss
index d0c5b6f3d3..aba6602f63 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/lineage/_lineage.component-theme.scss
+++ 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/lineage/_lineage.component-theme.scss
@@ -35,7 +35,6 @@
     $canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200');
 
     #lineage {
-
         canvas,
         svg {
             path.link.selected {
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-search-dialog/provenance-search-dialog.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-search-dialog/provenance-search-dialog.component.html
index f447a6508d..83e80ea609 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-search-dialog/provenance-search-dialog.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-search-dialog/provenance-search-dialog.component.html
@@ -25,10 +25,7 @@
                     <input matInput formControlName="value" type="text" />
                 </mat-form-field>
                 <div class="-mt-6 mb-4">
-                    <mat-checkbox
-                        color="primary"
-                        formControlName="inverse"
-                        name="inverse"> Exclude </mat-checkbox>
+                    <mat-checkbox color="primary" formControlName="inverse" name="inverse"> Exclude </mat-checkbox>
                 </div>
             </div>
         </ng-container>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
index eaaf07c697..009e965093 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-
 @use 'sass:map';
 @use '@angular/material' as mat;
 
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/disable-controller-service/disable-controller-service.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/disable-controller-service/disable-controller-service.component.html
index 9cf4d849be..b6ad993bd3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.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/disable-controller-service/disable-controller-service.component.html
@@ -124,7 +124,9 @@
                     <button color="primary" mat-raised-button mat-dialog-close>Close</button>
                 </ng-container>
                 <ng-template #updateInProgressActions>
-                    <button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close>Cancel</button>
+                    <button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close>
+                        Cancel
+                    </button>
                 </ng-template>
             </mat-dialog-actions>
         </ng-template>
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/enable-controller-service/enable-controller-service.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/enable-controller-service/enable-controller-service.component.html
index 06878a8340..3ada0f87e7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.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/enable-controller-service/enable-controller-service.component.html
@@ -153,7 +153,9 @@
                     <button color="primary" mat-raised-button mat-dialog-close>Close</button>
                 </ng-container>
                 <ng-template #updateInProgressActions>
-                    <button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close>Cancel</button>
+                    <button color="primary" (click)="cancelClicked()" mat-stroked-button mat-dialog-close>
+                        Cancel
+                    </button>
                 </ng-template>
             </mat-dialog-actions>
         </ng-template>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html
index 18bd105d7b..7cf3a9ac6a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html
@@ -32,7 +32,9 @@
             </mat-form-field>
         </div>
         <div class="-mt-4 mb-4">
-            <mat-checkbox color="primary" formControlName="empty" (change)="setEmptyStringChanged()">Set empty string</mat-checkbox>
+            <mat-checkbox color="primary" formControlName="empty" (change)="setEmptyStringChanged()"
+                >Set empty string</mat-checkbox
+            >
         </div>
         <div class="flex flex-col mb-4">
             <label>Sensitive Value</label>
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 40183ba704..760179a9bc 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
@@ -43,9 +43,7 @@
         @include mat.button-density(-1);
 
         .type-table {
-
             table {
-
                 th {
                     background-color: $primary-palette-500;
                     color: $canvas-primary-palette-900;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
index 0c89420949..7dd485ea04 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
@@ -399,7 +399,11 @@
                                         "></ng-container>
                                 </div>
                                 <div>
-                                    <button color="primary" mat-stroked-button mat-dialog-close (click)="replayClicked()">
+                                    <button
+                                        color="primary"
+                                        mat-stroked-button
+                                        mat-dialog-close
+                                        (click)="replayClicked()">
                                         <i class="fa fa-repeat"></i>
                                         Replay
                                     </button>
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 4da34607ca..476026d32e 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
@@ -22,31 +22,41 @@
 @use 'assets/styles/listing-table-theme' 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;
-@use 'app/pages/access-policies/ui/component-access-policies/component-access-policies.component-theme' as component-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;
+@use 'app/pages/access-policies/ui/component-access-policies/component-access-policies.component-theme' as
+    component-access-policies;
 @use 'app/pages/bulletins/feature/bulletins.component-theme' as bulletins;
-@use 'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme' as bulletin-board-list;
+@use 'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme' as
+    bulletin-board-list;
 @use 'app/pages/counters/feature/counters.component-theme' as counters;
 @use 'app/pages/flow-designer/ui/canvas/canvas.component-theme' as canvas;
 @use 'app/pages/flow-designer/ui/canvas/footer/footer.component-theme' as footer;
-@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component-theme' as navigation-control;
-@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component-theme' as birdseye-control;
-@use 'app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component-theme' as operation-control;
+@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component-theme' as
+    navigation-control;
+@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component-theme' as
+    birdseye-control;
+@use 'app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component-theme' as
+    operation-control;
 @use 'app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component-theme' as flow-status;
 @use 'app/pages/flow-designer/ui/canvas/header/header.component-theme' as header;
 @use 'app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component-theme' as new-canvas-item;
 @use 'app/pages/flow-designer/ui/canvas/header/search/search.component-theme' as search;
 @use 'app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component-theme' as prioritizers;
-@use 'app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component-theme' as create-process-group;
+@use 'app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component-theme'
+    as create-process-group;
 @use 'app/pages/flow-designer/ui/common/banner/banner.component-theme' as banner;
 @use 'app/pages/flow-designer/ui/controller-service/controller-services.component-theme' as controller-service;
 @use 'app/pages/login/feature/login.component-theme' as login;
 @use 'app/pages/login/ui/login-form/login-form.component-theme' as login-form;
 @use 'app/pages/provenance/feature/provenance.component-theme' as provenance;
-@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component-theme' as provenance-event-table;
-@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme' as lineage;
+@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component-theme' as
+    provenance-event-table;
+@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme' as
+    lineage;
 @use 'app/pages/parameter-contexts/feature/parameter-contexts.component-theme' as parameter-contexts;
-@use 'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme' as parameter-context-inheritance;
+@use 'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme'
+    as parameter-context-inheritance;
 @use 'app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component-theme' as flowfile-dialog;
 @use 'app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component-theme' as flowfile-table;
 @use 'app/pages/settings/feature/settings.component-theme' as settings;
@@ -226,7 +236,6 @@ $appFontPath: '~roboto-fontface/fonts';
         text-decoration-color: $primary-palette-A400;
     }
 
-
     //Icon for styling mat-icon in forms throughout the application.
     .info-icon {
         font-size: 14px;
@@ -402,8 +411,12 @@ $appFontPath: '~roboto-fontface/fonts';
         border-color: $primary-palette-A400;
     }
 
-    button.nifi-button:disabled {
+    button:disabled {
+        color: $primary-palette-200 !important;
         cursor: not-allowed;
+    }
+
+    button.nifi-button:disabled {
         border: 1px solid $primary-palette-200;
 
         i {
@@ -431,27 +444,27 @@ $warn-light: mat.define-palette($warn-light-palette, 400, 100, 700);
 
 // Create the theme objects. We can extract the values we need from the theme passed into the mixins.
 $material-theme-light: mat.define-light-theme(
-        (
-            color: (
-                primary: $material-primary-light,
-                accent: $material-accent-light,
-                warn: $warn-light,
-            ),
-            //typography: mat.define-typography-config(), // TODO: typography
-            density: -3
-        )
+    (
+        color: (
+            primary: $material-primary-light,
+            accent: $material-accent-light,
+            warn: $warn-light
+        ),
+        //typography: mat.define-typography-config(), // TODO: typography
+        density: -3
+    )
 );
 
 $nifi-canvas-theme-light: mat.define-light-theme(
-        (
-            color: (
-                primary: $nifi-canvas-primary-light,
-                accent: $nifi-canvas-accent-light,
-                warn: $warn-light,
-            ),
-            //typography: mat.define-typography-config(), // TODO: typography
-            density: -3
-        )
+    (
+        color: (
+            primary: $nifi-canvas-primary-light,
+            accent: $nifi-canvas-accent-light,
+            warn: $warn-light
+        ),
+        //typography: mat.define-typography-config(), // TODO: typography
+        density: -3
+    )
 );
 
 @include mat.all-component-themes($material-theme-light);