diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.html b/devtools/projects/ng-devtools/src/lib/devtools.component.html
index d1a95bf1221..0b501478193 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools.component.html
@@ -11,71 +11,82 @@
             ></ng-devtools-tabs>
           </div>
         } @else {
-          <p class="text-message">Angular Devtools only supports Angular versions 12 and above</p>
+          <div class="devtools-state-screen">
+            <mat-icon>upgrade</mat-icon>
+            <p class="text-message">
+              Angular DevTools only supports Angular versions 12 and above.
+            </p>
+          </div>
         }
       } @else {
-        <p
-          class="text-message"
-          matTooltip="A dev build is when the `optimization` flag is set to `false` in the angular.json config file."
-        >
-          We detected an application built with production configuration. Angular DevTools only
-          supports development builds.
-        </p>
+        <div class="devtools-state-screen">
+          <mat-icon>code_off</mat-icon>
+          <p
+            class="text-message"
+            matTooltip="A dev build is when the `optimization` flag is set to `false` in the angular.json config file."
+          >
+            We detected an application built with a production configuration. Angular DevTools only
+            supports development builds.
+          </p>
 
-        <div class="ng-dev-mode-causes">
-          <p>
-            If this application was built in development mode, please check if the
-            <code>window.ng</code> global object is available in your application. If it is missing,
-            then something is preventing Angular from running in development mode properly.
-          </p>
-          <ul>
-            <li>
-              Are you calling <code>enableProdMode()</code> in your application? Read more about
-              <a target="_blank" href="https://angular.dev/api/core/enableProdMode"
-                >enableProdMode()</a
-              >
-              on angular.dev.
-            </li>
-            <li>
-              Is <code>"optimization": true</code> set in your angular.json? Read more about
+          <div class="ng-dev-mode-causes">
+            <p>
+              If this application was built in development mode, please check if the
+              <code>window.ng</code> global object is available in your application. If it is
+              missing, then something is preventing Angular from running in development mode
+              properly.
+            </p>
+            <ul>
+              <li>
+                Are you calling <code>enableProdMode()</code> in your application? Read more about
+                <a target="_blank" href="https://angular.dev/api/core/enableProdMode"
+                  >enableProdMode()</a
+                >
+                on angular.dev.
+              </li>
+              <li>
+                Is <code>"optimization": true</code> set in your angular.json? Read more about
+                <a
+                  target="_blank"
+                  href="https://angular.dev/reference/configs/workspace-config#optimization-configuration"
+                  >optimization configuration</a
+                >
+                on angular.dev.
+              </li>
+              <li>
+                Is <code>"defaultConfiguration": "production"</code> set in your angular.json? Read
+                more about
+                <a
+                  target="_blank"
+                  href="https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app"
+                  >default configurations</a
+                >
+                on angular.dev.
+              </li>
+            </ul>
+            <p>
+              If you are still experiencing problems, you can open an issue with a reproduction on
+              our
               <a
                 target="_blank"
-                href="https://angular.dev/reference/configs/workspace-config#optimization-configuration"
-                >optimization configuration</a
-              >
-              on angular.dev.
-            </li>
-            <li>
-              Is <code>"defaultConfiguration": "production"</code> set in your angular.json? Read
-              more about
-              <a
-                target="_blank"
-                href="https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app"
-                >default configurations</a
-              >
-              on angular.dev.
-            </li>
-          </ul>
-          <p>
-            If you are still experiencing problems, you can open an issue with a reproduction on our
-            <a
-              target="_blank"
-              href="https://github.com/angular/angular/issues/new?assignees=&labels=&projects=&template=4-devtools.yaml"
-              >issue tracker</a
-            >.
-          </p>
+                href="https://github.com/angular/angular/issues/new?assignees=&labels=&projects=&template=4-devtools.yaml"
+                >issue tracker</a
+              >.
+            </p>
+          </div>
         </div>
       }
     }
     @case (AngularStatus.DOES_NOT_EXIST) {
-      <p class="text-message not-detected">
-        <span
-          class="info-icon"
+      <div class="devtools-state-screen">
+        <mat-icon>error</mat-icon>
+        <p
+          class="text-message"
           matTooltip="You see this message because the app is still loading, or this is not an Angular application"
-          >i</span
         >
-        Angular application not detected.
-      </p>
+          Angular application not detected.
+        </p>
+      </div>
     }
     @case (AngularStatus.UNKNOWN) {
       <div class="initializing">
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.scss b/devtools/projects/ng-devtools/src/lib/devtools.component.scss
index 3ddecdf3858..cae166f1980 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools.component.scss
@@ -42,21 +42,30 @@
   }
 }
 
-.text-message {
-  @extend %heading-500;
-  text-align: center;
-  cursor: help;
+.devtools-state-screen {
+  padding: 1rem;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
 
-  .info-icon {
-    display: inline-block;
-    font-size: 0.8em;
-    border-radius: 50%;
-    border: solid 2px var(--primary-contrast);
-    cursor: pointer;
-    width: 16px;
-    height: 16px;
-    font-weight: bold;
+  mat-icon {
+    display: block;
+    font-size: 32px;
+    width: 32px;
+    height: 32px;
+    margin-inline: auto;
+    margin-block-start: 0.5rem;
+    color: var(--quinary-contrast);
+  }
+
+  .text-message {
+    @extend %heading-500;
     text-align: center;
+    margin: 0;
+
+    &[matTooltip] {
+      cursor: help;
+    }
   }
 }
 
@@ -67,6 +76,15 @@
   margin: auto;
   border: 1px solid var(--quinary-contrast);
   border-radius: 16px;
+  margin-top: 1rem;
+
+  p:first-of-type {
+    margin-top: 0;
+  }
+
+  p:last-of-type {
+    margin-bottom: 0;
+  }
 
   code {
     padding: 2px;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.ts b/devtools/projects/ng-devtools/src/lib/devtools.component.ts
index e51f662f46d..3cb97fceb55 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools.component.ts
@@ -24,7 +24,7 @@ import {DevToolsTabsComponent} from './devtools-tabs/devtools-tabs.component';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {Frame} from './application-environment';
 import {BrowserStylesService} from './application-services/browser_styles_service';
-import {MatIconRegistry} from '@angular/material/icon';
+import {MatIcon, MatIconRegistry} from '@angular/material/icon';
 import {SUPPORTED_APIS} from './application-providers/supported_apis';
 
 const DETECT_ANGULAR_ATTEMPTS = 20;
@@ -47,13 +47,13 @@ enum AngularStatus {
   EXISTS,
 }
 
-const LAST_SUPPORTED_VERSION = 9;
+export const LAST_SUPPORTED_VERSION = 9;
 
 @Component({
   selector: 'ng-devtools',
   templateUrl: './devtools.component.html',
   styleUrls: ['./devtools.component.scss'],
-  imports: [DevToolsTabsComponent, MatTooltip, MatProgressSpinnerModule, MatTooltipModule],
+  imports: [DevToolsTabsComponent, MatIcon, MatTooltip, MatProgressSpinnerModule, MatTooltipModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DevToolsComponent implements OnDestroy {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools_spec.ts b/devtools/projects/ng-devtools/src/lib/devtools_spec.ts
index bbd2dd517c2..4671c4b041b 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools_spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools_spec.ts
@@ -9,7 +9,7 @@
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {FrameManager} from './application-services/frame_manager';
-import {DevToolsComponent} from './devtools.component';
+import {DevToolsComponent, LAST_SUPPORTED_VERSION} from './devtools.component';
 import {DevToolsTabsComponent} from './devtools-tabs/devtools-tabs.component';
 import {MessageBus} from '../../../protocol';
 import {SETTINGS_MOCK} from './application-services/test-utils/settings_mock';
@@ -54,8 +54,8 @@ describe('DevtoolsComponent', () => {
     component.angularStatus.set(component.AngularStatus.EXISTS);
     component.angularIsInDevMode.set(false);
     fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('.devtools').textContent).toContain(
-      'We detected an application built with production configuration. Angular DevTools only supports development builds.',
+    expect(fixture.nativeElement.querySelector('.devtools-state-screen').textContent).toContain(
+      'We detected an application built with a production configuration. Angular DevTools only supports development builds.',
     );
   });
 
@@ -64,8 +64,8 @@ describe('DevtoolsComponent', () => {
     component.angularIsInDevMode.set(true);
     component.angularVersion.set('1.0.0');
     fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('.devtools').textContent).toContain(
-      'Angular Devtools only supports Angular versions 12 and above',
+    expect(fixture.nativeElement.querySelector('.devtools-state-screen').textContent).toContain(
+      `Angular DevTools only supports Angular versions ${LAST_SUPPORTED_VERSION} and above`,
     );
   });
 
@@ -73,7 +73,7 @@ describe('DevtoolsComponent', () => {
     component.angularStatus.set(component.AngularStatus.DOES_NOT_EXIST);
     fixture.detectChanges();
     // expect the text to be "Angular application not detected"
-    expect(fixture.nativeElement.querySelector('.not-detected').textContent).toContain(
+    expect(fixture.nativeElement.querySelector('.devtools-state-screen').textContent).toContain(
       'Angular application not detected',
     );
   });
diff --git a/devtools/projects/ng-devtools/src/styles/_typography.scss b/devtools/projects/ng-devtools/src/styles/_typography.scss
index c79bea63b9c..5715c2a0743 100644
--- a/devtools/projects/ng-devtools/src/styles/_typography.scss
+++ b/devtools/projects/ng-devtools/src/styles/_typography.scss
@@ -17,7 +17,7 @@ $font-size: 0.75rem; // 12px
   font-family: $font-family;
   font-size: 1.125rem; // 18px
   font-weight: 500;
-  line-height: 1rem;
+  line-height: 1.375rem;
   letter-spacing: normal;
   padding: 0.5rem 0.25rem;
 }
@@ -26,7 +26,7 @@ $font-size: 0.75rem; // 12px
   font-family: $font-family;
   font-size: 1rem; // 16px
   font-weight: 500;
-  line-height: 1rem;
+  line-height: 1.375rem;
   letter-spacing: normal;
   padding: 0.5rem 0.25rem;
 }