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.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/canvas.component.html
index 9054ddb323ef..85fb83e8abbc 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.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/canvas.component.html
@@ -18,7 +18,10 @@
 <div class="flex flex-col h-screen justify-between">
     <fd-header></fd-header>
     <div class="flex-1">
-        <div id="canvas-container" class="canvas-background h-full" [cdkContextMenuTriggerFor]="contextMenu.menu"></div>
+        <div
+            id="canvas-container"
+            class="canvas-background h-full select-none"
+            [cdkContextMenuTriggerFor]="contextMenu.menu"></div>
         <fd-context-menu #contextMenu [menuProvider]="canvasContextMenu" menuId="root"></fd-context-menu>
         <graph-controls></graph-controls>
     </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/canvas/header/flow-status/flow-status.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/flow-status/flow-status.component.html
index ff5d3bd30f7e..6be27a229fa8 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/flow-status/flow-status.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/flow-status/flow-status.component.html
@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div class="h-8 flow-status">
+<div class="h-8 flow-status select-none">
     <div class="flex justify-between">
         <div class="flex flex-1 justify-around pr-20">
             @if (clusterSummary?.clustered) {
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.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/header.component.scss
index 2944f9819474..f0dfba977ad9 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.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/header.component.scss
@@ -14,3 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+new-canvas-item:focus-visible {
+    outline: 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.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 f02f654e2648..423d8ab3b2a2 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
@@ -32,6 +32,10 @@
         }
     }
 
+    button:focus-visible {
+        outline: none;
+    }
+
     .icon-import-from-registry-add:before {
         margin-left: 1px;
     }
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.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/search/search.component.html
index abf20a2b4051..899e434cb2bb 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.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/search/search.component.html
@@ -18,15 +18,6 @@
 <div class="h-8 flex justify-around search-container" [class.open]="searchInputVisible">
     <button class="w-8" (click)="toggleSearchVisibility()"><i class="fa fa-search primary-color"></i></button>
     <form [formGroup]="searchForm">
-        <input
-            type="text"
-            matInput
-            placeholder="Search"
-            class="search-input on-surface-default"
-            [class.open]="searchInputVisible"
-            cdkOverlayOrigin
-            #searchInput="cdkOverlayOrigin"
-            formControlName="searchBar" />
         <ng-template
             cdkConnectedOverlay
             [cdkConnectedOverlayOrigin]="searchInput"
@@ -34,7 +25,7 @@
             [cdkConnectedOverlayPositions]="positions"
             [cdkConnectedOverlayHasBackdrop]="true"
             [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
-            (backdropClick)="backdropClicked()">
+            (overlayOutsideClick)="backdropClicked($event)">
             <div class="search-results w-96 border p-2 text-sm max-h-96 overflow-y-auto">
                 @if (searching) {
                     <div class="unset nifi-surface-default italic">Searching</div>
@@ -185,6 +176,15 @@
                 }
             </div>
         </ng-template>
+        <input
+            type="text"
+            matInput
+            placeholder="Search"
+            class="search-input on-surface-default"
+            [class.open]="searchInputVisible"
+            cdkOverlayOrigin
+            #searchInput="cdkOverlayOrigin"
+            formControlName="searchBar" />
         <ng-template #renderResults let-results let-header="header" let-icon="icon" let-path="path">
             <li class="flex items-center">
                 <span class="icon mr-1" [class]="icon"></span>
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.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/search/search.component.ts
index b5e31341047d..aa49279a03da 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.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/search/search.component.ts
@@ -170,7 +170,9 @@ export class Search implements OnInit {
         );
     }
 
-    backdropClicked() {
+    backdropClicked(event: MouseEvent): void {
+        event.stopPropagation();
+        event.preventDefault();
         this.searchingResultsVisible = false;
         this.searchForm.get('searchBar')?.setValue('');
 
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/change-version-progress-dialog/change-version-progress-dialog.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/change-version-progress-dialog/change-version-progress-dialog.html
index cbe532f053a9..bea31874c3dd 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/change-version-progress-dialog/change-version-progress-dialog.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/change-version-progress-dialog/change-version-progress-dialog.html
@@ -31,9 +31,7 @@ <h2 mat-dialog-title>Change Flow Version</h2>
                     <mat-progress-bar
                         mode="determinate"
                         [value]="versionChangeRequest.request.percentCompleted"></mat-progress-bar>
-                    <div class="accent-color font-medium">
-                        {{ versionChangeRequest.request.percentCompleted }}%
-                    </div>
+                    <div class="accent-color font-medium">{{ versionChangeRequest.request.percentCompleted }}%</div>
                 </div>
             }
         </div>
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/edit-parameter-context/edit-parameter-context.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/edit-parameter-context/edit-parameter-context.component.html
index 4360eaf7155a..585b4209a148 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/edit-parameter-context/edit-parameter-context.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/edit-parameter-context/edit-parameter-context.component.html
@@ -30,7 +30,7 @@ <h2 mat-dialog-title>{{ this.isNew ? 'Add' : 'Edit' }} Parameter Context</h2>
                                     {{ updateStep.description }}
                                 </div>
                                 @if (updateStep.failureReason) {
-                                    <div class="fa fa-times mat-warn"></div>
+                                    <div class="fa fa-times warn-color"></div>
                                 } @else {
                                     @if (updateStep.complete) {
                                         <div class="fa fa-check nifi-success-default"></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/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 0ecde1a1ddde..9fd134b593b6 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
@@ -24,7 +24,7 @@ <h3 class="text-xl bold queue-listing-header primary-color">{{ connectionLabel }
                 formatBytes(queueSizeByteCount)
             }}) bytes
         </div>
-        <div class="listing-message mat-warn">
+        <div class="listing-message warn-color">
             @if (sourceRunning && destinationRunning) {
                 The source and destination of this queue are currently running. This listing may no longer be accurate.
             } @else {
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 fa6854bda4d3..ea13206db478 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
@@ -38,9 +38,7 @@
                     <td mat-cell *matCellDef="let item">
                         <div class="flex items-center gap-x-3">
                             @if (isSyncedToParameterContext(item)) {
-                                <div
-                                    class="fa fa-star primary-color"
-                                    title="Synced to a parameter context."></div>
+                                <div class="fa fa-star primary-color" title="Synced to a parameter context."></div>
                             }
                         </div>
                     </td>
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 243e353ce23f..6ab8237df81c 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
@@ -34,9 +34,7 @@
                             @if (canRead(item)) {
                                 <div class="flex items-center gap-x-3">
                                     <!-- TODO: open details -->
-                                    <div
-                                        class="pointer fa fa-info-circle primary-color"
-                                        title="View details"></div>
+                                    <div class="pointer fa fa-info-circle primary-color" title="View details"></div>
 
                                     <div
                                         class="pointer fa fa-book primary-color"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/status-history/status-history.effects.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/status-history/status-history.effects.ts
index dea6e81c2ad7..6a8469e0b97f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/status-history/status-history.effects.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/status-history/status-history.effects.ts
@@ -22,7 +22,7 @@ import { NiFiState } from '../index';
 import { StatusHistoryService } from '../../service/status-history.service';
 import * as StatusHistoryActions from './status-history.actions';
 import { StatusHistoryRequest } from './index';
-import { catchError, from, map, of, switchMap, tap } from 'rxjs';
+import { catchError, filter, from, map, of, switchMap, tap } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
 import { StatusHistory } from '../../ui/common/status-history/status-history.component';
 
@@ -35,10 +35,11 @@ export class StatusHistoryEffects {
         private dialog: MatDialog
     ) {}
 
-    reloadStatusHistory$ = createEffect(() =>
+    reloadComponentStatusHistory$ = createEffect(() =>
         this.actions$.pipe(
             ofType(StatusHistoryActions.reloadStatusHistory),
             map((action) => action.request),
+            filter((request) => !!request.componentId && !!request.componentType),
             switchMap((request: StatusHistoryRequest) =>
                 from(
                     this.statusHistoryService
@@ -67,6 +68,37 @@ export class StatusHistoryEffects {
         )
     );
 
+    reloadNodeStatusHistory$ = createEffect(() =>
+        this.actions$.pipe(
+            ofType(StatusHistoryActions.reloadStatusHistory),
+            map((action) => action.request),
+            filter((request) => !request.componentId && !request.componentType),
+            switchMap(() =>
+                from(
+                    this.statusHistoryService.getNodeStatusHistory().pipe(
+                        map((response: any) =>
+                            StatusHistoryActions.reloadStatusHistorySuccess({
+                                response: {
+                                    statusHistory: {
+                                        canRead: response.canRead,
+                                        statusHistory: response.statusHistory
+                                    }
+                                }
+                            })
+                        ),
+                        catchError((error) =>
+                            of(
+                                StatusHistoryActions.statusHistoryApiError({
+                                    error: error.error
+                                })
+                            )
+                        )
+                    )
+                )
+            )
+        )
+    );
+
     getStatusHistoryAndOpenDialog$ = createEffect(() =>
         this.actions$.pipe(
             ofType(StatusHistoryActions.getStatusHistoryAndOpenDialog),
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 d2cac26ff82f..3ec36528de4a 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
@@ -33,9 +33,7 @@ <h2 mat-dialog-title>Component State</h2>
             </div>
             <div>
                 <form [formGroup]="filterForm" class="flex flex-col gap-y-2">
-                    <div class="accent-color font-medium">
-                        Displaying {{ filteredEntries }} of {{ totalEntries }}
-                    </div>
+                    <div class="accent-color font-medium">Displaying {{ filteredEntries }} of {{ totalEntries }}</div>
                     <div class="flex justify-between items-center">
                         <mat-form-field>
                             <mat-label>Filter</mat-label>
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-references/controller-service-references.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-references/controller-service-references.component.html
index f8c0c7764926..42f6a96b6f37 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-references/controller-service-references.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-references/controller-service-references.component.html
@@ -121,11 +121,7 @@ <h4>
         <ng-template #service let-references>
             @if (references.length > 0) {
                 <li>
-                    <h4>
-                        <span class="accent-color font-medium">Controller Services</span> ({{
-                            references.length
-                        }})
-                    </h4>
+                    <h4><span class="accent-color font-medium">Controller Services</span> ({{ references.length }})</h4>
                     <div class="references">
                         @for (service of references; track service) {
                             <div class="flex flex-col">
@@ -179,9 +175,7 @@ <h4>
         <ng-template #unauthorized let-references>
             @if (references.length > 0) {
                 <li>
-                    <h4>
-                        <span class="accent-color font-medium">Unauthorized</span> ({{ references.length }})
-                    </h4>
+                    <h4><span class="accent-color font-medium">Unauthorized</span> ({{ references.length }})</h4>
                     <div class="references">
                         @for (reference of references; track reference) {
                             <div class="flex">
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 a86b5d2dd264..3b0024ec7640 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
@@ -114,9 +114,7 @@ <h2 mat-dialog-title>Disable Controller Service</h2>
                                         </div>
                                     }
                                     <div class="flex justify-between items-center">
-                                        <div class="accent-color font-medium">
-                                            Disabling this controller service
-                                        </div>
+                                        <div class="accent-color font-medium">Disabling this controller service</div>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 getTemplateForStep(SetEnableStep.DisableService, disableRequest)
@@ -165,6 +163,6 @@ <h2 mat-dialog-title>Disable Controller Service</h2>
     <div class="complete fa fa-check nifi-success-default"></div>
 </ng-template>
 <ng-template #stepError>
-    <div class="fa fa-times mat-warn"></div>
+    <div class="fa fa-times warn-color"></div>
 </ng-template>
 <ng-template #stepNotStarted><div class="w-3.5"></div></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 5edf7f35ee53..fe5cebc9559d 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
@@ -94,9 +94,7 @@ <h2 mat-dialog-title>Enable Controller Service</h2>
                                 </div>
                                 <div class="flex flex-col gap-y-1.5">
                                     <div class="flex justify-between items-center">
-                                        <div class="accent-color font-medium">
-                                            Enabling this controller service
-                                        </div>
+                                        <div class="accent-color font-medium">Enabling this controller service</div>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 getTemplateForStep(SetEnableStep.EnableService, enableRequest)
@@ -186,6 +184,6 @@ <h2 mat-dialog-title>Enable Controller Service</h2>
     <div class="complete fa fa-check nifi-success-default"></div>
 </ng-template>
 <ng-template #stepError>
-    <div class="fa fa-times mat-warn"></div>
+    <div class="fa fa-times warn-color"></div>
 </ng-template>
 <ng-template #stepNotStarted><div class="w-3.5"></div></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/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 565a46a69ab6..63f6958f926d 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
@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<section tabindex="0">
+<section tabindex="0" (keyup)="navigateSelectionList($event)">
     <div class="extension-creation-dialog p-4 flex flex-col justify-between gap-y-3">
         <div class="flex justify-between items-center">
             <h3 class="text-lg">Add {{ componentType }}</h3>
@@ -32,7 +32,7 @@ <h3 class="text-lg">Add {{ componentType }}</h3>
                 </mat-form-field>
             </div>
         </div>
-        <div class="listing-table">
+        <div class="listing-table select-none">
             <div class="h-96 overflow-y-auto overflow-x-hidden">
                 <table
                     mat-table
@@ -46,14 +46,27 @@ <h3 class="text-lg">Add {{ componentType }}</h3>
                     <ng-container matColumnDef="type">
                         <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
                         <td mat-cell *matCellDef="let item">
-                            <div
-                                class="fa"
-                                [class.fa-shield]="item.restricted"
-                                [class.mat-warn]="item.restricted"
-                                nifiTooltip
-                                [tooltipComponentType]="RestrictionsTip"
-                                [tooltipInputData]="getRestrictionTipData(item)"></div>
-                            {{ formatType(item) }}
+                            @if (isSelected(item)) {
+                                <div #selectedRow>
+                                    <div
+                                        class="fa"
+                                        [class.fa-shield]="item.restricted"
+                                        [class.warn-color]="item.restricted"
+                                        nifiTooltip
+                                        [tooltipComponentType]="RestrictionsTip"
+                                        [tooltipInputData]="getRestrictionTipData(item)"></div>
+                                    {{ formatType(item) }}
+                                </div>
+                            } @else {
+                                <div
+                                    class="fa"
+                                    [class.fa-shield]="item.restricted"
+                                    [class.warn-color]="item.restricted"
+                                    nifiTooltip
+                                    [tooltipComponentType]="RestrictionsTip"
+                                    [tooltipInputData]="getRestrictionTipData(item)"></div>
+                                {{ formatType(item) }}
+                            }
                         </td>
                     </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/extension-creation/extension-creation.component.ts 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.ts
index 9ff118596083..d7a33386407d 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.ts
+++ 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.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -68,6 +68,8 @@ export class ExtensionCreation {
 
     @Output() extensionTypeSelected: EventEmitter<DocumentedType> = new EventEmitter<DocumentedType>();
 
+    @ViewChild('selectedRow', { static: false }) selectedRow: ElementRef | null | undefined;
+
     protected readonly RestrictionsTip = RestrictionsTip;
     protected readonly ControllerServiceApiTip = ControllerServiceApiTip;
 
@@ -133,10 +135,23 @@ export class ExtensionCreation {
         return '';
     }
 
-    filterTypes(event: Event): void {
+    filterTypes(event: KeyboardEvent): void {
+        switch (event.key) {
+            case 'Enter':
+            case 'ArrowUp':
+            case 'ArrowDown':
+                // handled in navigateSelectionList
+                return;
+        }
+
         const filterText: string = (event.target as HTMLInputElement).value;
         this.dataSource.filter = filterText.trim().toLowerCase();
-        this.selectedType = null;
+
+        if (this.dataSource.filteredData.length > 0) {
+            this.selectType(this.dataSource.filteredData[0]);
+        } else {
+            this.selectedType = null;
+        }
     }
 
     selectType(documentedType: DocumentedType): void {
@@ -156,6 +171,45 @@ export class ExtensionCreation {
         }
     }
 
+    navigateSelectionList(event: KeyboardEvent): void {
+        if (this.selectedType !== null) {
+            switch (event.key) {
+                case 'Enter':
+                    this.createExtension(this.selectedType);
+                    break;
+                case 'ArrowUp':
+                    this.selectRow(-1);
+                    break;
+                case 'ArrowDown':
+                    this.selectRow(1);
+                    break;
+            }
+            if (this.selectedRow) {
+                this.selectedRow?.nativeElement.scrollIntoView({
+                    behavior: 'instant',
+                    block: 'center',
+                    inline: 'nearest'
+                });
+            }
+        }
+    }
+
+    private selectRow(offset: number) {
+        if (this.selectedType && this.dataSource.filteredData.length > 0) {
+            // find the index of the currently selected row
+            const selectedIndex = this.dataSource.filteredData.findIndex(
+                (data) => data.type === this.selectedType?.type
+            );
+
+            if (selectedIndex > -1) {
+                const newSelectedIndex = selectedIndex + offset;
+                if (newSelectedIndex > -1 && newSelectedIndex < this.dataSource.filteredData.length) {
+                    this.selectType(this.dataSource.filteredData[newSelectedIndex]);
+                }
+            }
+        }
+    }
+
     sortData(sort: Sort) {
         this.activeSort = sort;
         this.dataSource.data = this.sortEntities(this.dataSource.data, sort);
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.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html
index 6adb28f7c82b..5f442bbd3742 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.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html
@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<nav class="nifi-navigation">
+<nav class="nifi-navigation select-none">
     <div class="flex justify-between items-center h-16 pl-4">
         <div class="flex">
             <div class="h-16 w-28 mr-6 relative">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html
index 526c36d81969..7de673df915a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html
@@ -90,11 +90,7 @@ <h4><span class="accent-color font-medium">Processors</span> ({{ references.leng
         <ng-template #service let-references>
             @if (references.length > 0) {
                 <li>
-                    <h4>
-                        <span class="accent-color font-medium">Controller Services</span> ({{
-                            references.length
-                        }})
-                    </h4>
+                    <h4><span class="accent-color font-medium">Controller Services</span> ({{ references.length }})</h4>
                     <div class="references">
                         @for (service of references; track service) {
                             <div class="flex flex-col">
@@ -132,9 +128,7 @@ <h4>
         <ng-template #unauthorized let-references>
             @if (references.length > 0) {
                 <li>
-                    <h4>
-                        <span class="accent-color font-medium">Unauthorized</span> ({{ references.length }})
-                    </h4>
+                    <h4><span class="accent-color font-medium">Unauthorized</span> ({{ references.length }})</h4>
                     <div class="references">
                         @for (reference of references; track reference) {
                             <div class="flex">
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-chart/status-history-chart.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-chart/status-history-chart.component.html
index 823d73664f22..8847edc71068 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-chart/status-history-chart.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-chart/status-history-chart.component.html
@@ -15,7 +15,7 @@
   ~  limitations under the License.
   -->
 
-<div id="status-history-container" class="flex-1 flex flex-col">
+<div id="status-history-container" class="flex-1 flex flex-col select-none">
     <div id="status-history-chart-container" class="grow"></div>
     <div id="status-history-chart-control-container"></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/status-history/status-history.component.scss 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.scss
index 165ea615f291..0d420ac1ca08 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.scss
+++ 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.scss
@@ -41,6 +41,11 @@
         .chart-panel {
             min-width: 495px;
         }
+
+        .component-details {
+            min-width: 300px;
+            max-width: 300px;
+        }
     }
 }