diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
index facfc6fc6f7..a04259fa95f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
@@ -7,65 +7,67 @@
   [color]="'accent'"
   [tabPanel]="tabPanel"
 >
-  <div id="nav-buttons">
-    <button (click)="toggleInspector()" matTooltip="Inspect element" aria-label="Inspect element">
-      <mat-icon [class.inspector-active]="inspectorRunning()"> pin_end </mat-icon>
-    </button>
-    <button [matMenuTriggerFor]="menu" matTooltip="Open settings" aria-label="Open settings">
-      <mat-icon> settings </mat-icon>
-    </button>
-    <button [matMenuTriggerFor]="info" matTooltip="Info" aria-label="Info">
-      <mat-icon> info </mat-icon>
-    </button>
-  </div>
+  <div class="nav-wrapper">
+    <div id="nav-buttons">
+      <button (click)="toggleInspector()" matTooltip="Inspect element" aria-label="Inspect element">
+        <mat-icon [class.inspector-active]="inspectorRunning()"> pin_end </mat-icon>
+      </button>
+      <button [matMenuTriggerFor]="menu" matTooltip="Open settings" aria-label="Open settings">
+        <mat-icon> settings </mat-icon>
+      </button>
+      <button [matMenuTriggerFor]="info" matTooltip="Info" aria-label="Info">
+        <mat-icon> info </mat-icon>
+      </button>
+    </div>
 
-  <select
-    matTooltip="Select a frame to inspect with Angular Devtools"
-    class="frame-selector"
-    (change)="emitSelectedFrame($event)"
-  >
-    @for (frame of frameManager.frames(); track frame.id) {
-      <option [value]="frame.id" [selected]="frameManager.isSelectedFrame(frame)">
-        @if (frame.id === TOP_LEVEL_FRAME_ID) {
-          top
-        } @else {
-          {{ frame.name }} ({{ frame.id }})
-        }
-      </option>
-    } @empty {
-      <option value="0" selected>top</option>
+    <select
+      matTooltip="Select a frame to inspect with Angular Devtools"
+      class="ng-select size-compact frame-selector"
+      (change)="emitSelectedFrame($event)"
+    >
+      @for (frame of frameManager.frames(); track frame.id) {
+        <option [value]="frame.id" [selected]="frameManager.isSelectedFrame(frame)">
+          @if (frame.id === TOP_LEVEL_FRAME_ID) {
+            top
+          } @else {
+            {{ frame.name }} ({{ frame.id }})
+          }
+        </option>
+      } @empty {
+        <option value="0" selected>top</option>
+      }
+    </select>
+
+    @for (tab of tabs(); track $index) {
+      <a class="mat-tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab() === tab">
+        {{ tab }}
+      </a>
     }
-  </select>
+    @if (angularVersion()) {
+      <section id="app-angular-version">
+        Angular version:
 
-  @for (tab of tabs(); track $index) {
-    <a class="mat-tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab() === tab">
-      {{ tab }}
-    </a>
-  }
-  @if (angularVersion()) {
-    <section id="app-angular-version">
-      Angular version:
-
-      @if (majorAngularVersion() > 12 || majorAngularVersion() == 0) {
-        <span id="version-number">
-          {{ angularVersion() }}
-        </span>
-      } @else {
-        <span
-          id="version-number"
-          matTooltip="
+        @if (majorAngularVersion() > 12 || majorAngularVersion() == 0) {
+          <span id="version-number">
+            {{ angularVersion() }}
+          </span>
+        } @else {
+          <span
+            id="version-number"
+            matTooltip="
             Angular Devtools supports Angular versions 12 and above. Some DevTools features may be available in
             older versions of Angular, but it is not officially supported.
           "
-          class="unsupported-version"
-        >
-          {{ angularVersion() }} (unsupported)
-        </span>
-      }
+            class="unsupported-version"
+          >
+            {{ angularVersion() }} (unsupported)
+          </span>
+        }
 
-      | DevTools: {{ extensionVersion() }}
-    </section>
-  }
+        | DevTools: {{ extensionVersion() }}
+      </section>
+    }
+  </div>
 </nav>
 
 <mat-tab-nav-panel #tabPanel>
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
index 1e8be60d54e..88f80df2b2f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
@@ -14,6 +14,13 @@
 
 nav {
   border-bottom: 1px solid var(--color-separator);
+
+  .nav-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
 }
 
 #nav-buttons {
@@ -99,10 +106,6 @@ mat-icon {
 }
 
 .frame-selector {
-  border-radius: 2px;
-  border: none;
-  margin: 4px 4px 2px 4px;
-  padding: 2px;
-  outline-offset: -2px;
   width: 100px;
+  margin: 0 0.5rem;
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
index f6bd6926c11..3e21619db80 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/filter.component.scss
@@ -24,7 +24,7 @@
 
     .filter-input {
       border: none;
-      padding-left: 5px;
+      padding: 1px;
       width: 100%;
       height: 30px;
       outline: none;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html
index f2970447478..e8d116154f2 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler.component.html
@@ -19,6 +19,7 @@
         <br />
         <input
           type="file"
+          class="ng-input"
           (change)="importProfilerResults($event)"
           placeholder="Upload file"
           accept=".json"
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline-controls/recording-timeline-controls.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline-controls/recording-timeline-controls.component.html
index f41b172f2ab..8a29f8f13e2 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline-controls/recording-timeline-controls.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline-controls/recording-timeline-controls.component.html
@@ -1,6 +1,6 @@
 <input
   matInput
-  class="filter-input"
+  class="ng-input filter-input"
   (keyup)="filter.emit($any($event.target).value)"
   placeholder="duration: >30 source: click"
 />
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/visualizer-controls/visualizer-controls.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/visualizer-controls/visualizer-controls.component.html
index f0fd384ed96..74251ee2ba2 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/visualizer-controls/visualizer-controls.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/visualizer-controls/visualizer-controls.component.html
@@ -30,7 +30,7 @@
   }
 </div>
 
-<select [hidden]="!record()" (change)="onVisualizationChange($event)">
+<select [hidden]="!record()" (change)="onVisualizationChange($event)" class="ng-select">
   <option [value]="VisMode.FlameGraph" [selected]="visualizationMode() === VisMode.FlameGraph">
     Flame graph
   </option>
diff --git a/devtools/projects/ng-devtools/src/styles/BUILD.bazel b/devtools/projects/ng-devtools/src/styles/BUILD.bazel
index b0e0c613776..24431779725 100644
--- a/devtools/projects/ng-devtools/src/styles/BUILD.bazel
+++ b/devtools/projects/ng-devtools/src/styles/BUILD.bazel
@@ -15,6 +15,7 @@ sass_library(
     srcs = ["_global.scss"],
     deps = [
         ":colors",
+        ":inputs",
         ":material_sass_deps",
         ":typography",
     ],
@@ -38,6 +39,15 @@ sass_library(
     ],
 )
 
+sass_library(
+    name = "inputs",
+    srcs = ["_inputs.scss"],
+    deps = [
+        ":theme",
+        ":typography",
+    ],
+)
+
 sass_library(
     name = "typography",
     srcs = [
diff --git a/devtools/projects/ng-devtools/src/styles/_global.scss b/devtools/projects/ng-devtools/src/styles/_global.scss
index 06a6132514c..671b0789298 100644
--- a/devtools/projects/ng-devtools/src/styles/_global.scss
+++ b/devtools/projects/ng-devtools/src/styles/_global.scss
@@ -4,6 +4,7 @@
 @use 'external/npm/node_modules/@angular/material/index' as mat;
 @use './colors' as clr;
 @use './typography' as tg;
+@use './inputs';
 
 @include mat.all-component-typographies();
 @include mat.core();
@@ -114,13 +115,6 @@ body {
   @extend %body-01;
 }
 
-input,
-select {
-  color: var(--primary-contrast);
-  background: var(--color-foreground);
-  @extend %body-01;
-}
-
 ng-devtools {
   .mdc-card {
     padding: 4px;
diff --git a/devtools/projects/ng-devtools/src/styles/_inputs.scss b/devtools/projects/ng-devtools/src/styles/_inputs.scss
new file mode 100644
index 00000000000..29ab0461586
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/styles/_inputs.scss
@@ -0,0 +1,58 @@
+/* Global input styles */
+@use './typography';
+@use './theme' as theme;
+
+.ng-input,
+.ng-select,
+.ng-textarea {
+  @extend %body-01;
+  color: var(--primary-contrast);
+  background: var(--color-foreground);
+  border: none;
+  padding: 0.375rem 0.75rem;
+  border-radius: 2rem;
+}
+
+.ng-input {
+  &::placeholder {
+    color: var(--tertiary-contrast);
+  }
+
+  &.size-mid {
+    padding: 0.25rem 0.75rem;
+  }
+
+  &.size-compact {
+    padding: 0.1rem 0.5rem;
+  }
+}
+
+.ng-select {
+  position: relative;
+  appearance: none;
+  padding-right: 2rem;
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-size: 18px;
+  background-position: top 50% right 0.375rem;
+  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="black"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
+
+  &.size-mid {
+    padding: 0.25rem 2rem 0.25rem 0.75rem;
+  }
+
+  &.size-compact {
+    padding: 0.1rem 2rem 0.1rem 0.5rem;
+  }
+}
+
+/* We can't use the theme mixins on top-level styles due to `:host-context` */
+:root.#{theme.$dark-theme-class} {
+  .ng-select {
+    background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="white"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
+  }
+}
+
+.ng-textarea {
+  border-radius: 0.75rem;
+}