diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.html
index 665c94c609c6..39899e0c2b4f 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.html
@@ -1,6 +1,6 @@
 <!-- TODO: Reconsider the existence of this component. -->
-<th>{{ label() }}</th>
-<td>
+<dt>{{ label() }}</dt>
+<dd>
   @switch (type()) {
     @case ('flag') {
       <span [class]="rowValue() ? 'tag-active' : 'tag-inactive'">
@@ -45,7 +45,7 @@
       }
     }
   }
-</td>
+</dd>
 
 <ng-template #actionBtn let-value="value">
   @if (actionBtnType() !== 'none') {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.scss
index 6ba52f9513f4..e7c2e601a695 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.scss
@@ -46,7 +46,7 @@ button {
   }
 }
 
-td {
+dd {
   width: 100%;
 }
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.spec.ts
index 7a3fd5c5832a..42b94afc1b61 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.spec.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-details-row/route-details-row.component.spec.ts
@@ -34,10 +34,10 @@ describe('RouteDetailsRowComponent', () => {
     fixture.componentRef.setInput('dataKey', 'value');
     await fixture.whenStable();
 
-    const labelElement = fixture.debugElement.query(By.css('th'));
+    const labelElement = fixture.debugElement.query(By.css('dt'));
     expect(labelElement.nativeElement.innerText).toEqual('Route Title');
 
-    const dataElements = fixture.debugElement.queryAll(By.css('td'));
+    const dataElements = fixture.debugElement.queryAll(By.css('dd'));
     expect(dataElements.length).toEqual(1);
     expect(dataElements[0].nativeElement.innerText).toEqual('Route Data');
   });
@@ -48,7 +48,7 @@ describe('RouteDetailsRowComponent', () => {
     fixture.componentRef.setInput('dataKey', 'isActive');
     await fixture.whenStable();
 
-    const labelElement = fixture.debugElement.query(By.css('th'));
+    const labelElement = fixture.debugElement.query(By.css('dt'));
     expect(labelElement.nativeElement.innerText).toEqual('Route Title');
 
     const dataElements = fixture.debugElement.queryAll(By.css('.tag-active'));
@@ -62,7 +62,7 @@ describe('RouteDetailsRowComponent', () => {
     fixture.componentRef.setInput('dataKey', 'isLazy');
     await fixture.whenStable();
 
-    const labelElement = fixture.debugElement.query(By.css('th'));
+    const labelElement = fixture.debugElement.query(By.css('dt'));
     expect(labelElement.nativeElement.innerText).toEqual('Route Title');
 
     const dataElements = fixture.debugElement.queryAll(By.css('.tag-inactive'));
@@ -77,7 +77,7 @@ describe('RouteDetailsRowComponent', () => {
     fixture.componentRef.setInput('actionBtnType', 'view-source');
     await fixture.whenStable();
 
-    const labelElement = fixture.debugElement.query(By.css('th'));
+    const labelElement = fixture.debugElement.query(By.css('dt'));
     expect(labelElement.nativeElement.innerText).toEqual('Route Title');
 
     const dataElements = fixture.debugElement.queryAll(By.css('button'));
@@ -92,7 +92,7 @@ describe('RouteDetailsRowComponent', () => {
     fixture.componentRef.setInput('actionBtnDisabled', true);
     await fixture.whenStable();
 
-    const labelElement = fixture.debugElement.query(By.css('th'));
+    const labelElement = fixture.debugElement.query(By.css('dt'));
     expect(labelElement.nativeElement.innerText).toEqual('Route Title');
 
     const dataElements = fixture.debugElement.queryAll(By.css('button'));
@@ -107,7 +107,7 @@ describe('RouteDetailsRowComponent', () => {
     fixture.componentRef.setInput('actionBtnType', 'view-source');
     await fixture.whenStable();
 
-    const labelElement = fixture.debugElement.query(By.css('th'));
+    const labelElement = fixture.debugElement.query(By.css('dt'));
     expect(labelElement.nativeElement.innerText).toEqual('Route Title');
 
     const dataElements = fixture.debugElement.queryAll(By.css('button'));
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html
index 9d21a1a0d413..5b289a02043d 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html
@@ -48,9 +48,9 @@ <h2 class="router-title">Routes Details</h2>
 
           <!-- TODO: Convert to a description list (<dl>) -->
           <div class="scrollable-wrapper">
-            <table class="ng-table">
+            <dl class="ng-dl">
               @if (!data.matcher) {
-                <tr
+                <div
                   ng-route-details-row
                   label="Path"
                   dataKey="path"
@@ -58,9 +58,9 @@ <h2 class="router-title">Routes Details</h2>
                   actionBtnType="navigate"
                   [actionBtnTooltip]="'Navigate to ' + data.path"
                   (actionBtnClick)="navigateRoute(route)"
-                ></tr>
+                ></div>
               } @else {
-                <tr
+                <div
                   ng-route-details-row
                   label="Matcher"
                   dataKey="matcher"
@@ -68,11 +68,11 @@ <h2 class="router-title">Routes Details</h2>
                   actionBtnType="view-source"
                   actionBtnTooltip="View source"
                   (actionBtnClick)="viewFunctionSource(data.matcher, 'matcher')"
-                ></tr>
+                ></div>
               }
 
               @if (!data.redirectTo) {
-                <tr
+                <div
                   ng-route-details-row
                   label="Component"
                   dataKey="component"
@@ -81,9 +81,9 @@ <h2 class="router-title">Routes Details</h2>
                   actionBtnTooltip="View source"
                   [actionBtnDisabled]="!!data?.isLazy"
                   (actionBtnClick)="viewComponentSource(data.component)"
-                ></tr>
+                ></div>
               } @else {
-                <tr
+                <div
                   ng-route-details-row
                   label="Redirect to"
                   dataKey="redirectTo"
@@ -91,23 +91,28 @@ <h2 class="router-title">Routes Details</h2>
                   actionBtnType="view-source"
                   actionBtnTooltip="View source"
                   (actionBtnClick)="viewFunctionSource(data.redirectTo, 'redirectTo')"
-                ></tr>
+                ></div>
               }
 
               @if (data.pathMatch) {
-                <tr ng-route-details-row label="Path Match" dataKey="pathMatch" [data]="data"></tr>
+                <div
+                  ng-route-details-row
+                  label="Path Match"
+                  dataKey="pathMatch"
+                  [data]="data"
+                ></div>
               }
               @if (data.data) {
-                <tr
+                <div
                   ng-route-details-row
                   label="Data"
                   [renderValueAsJson]="true"
                   dataKey="data"
                   [data]="data"
-                ></tr>
+                ></div>
               }
               @if (data.resolvers) {
-                <tr
+                <div
                   ng-route-details-row
                   label="Resolvers"
                   [renderValueAsJson]="true"
@@ -115,11 +120,11 @@ <h2 class="router-title">Routes Details</h2>
                   [data]="data"
                   actionBtnType="view-source"
                   (actionBtnClick)="viewSourceFromRouter($event, 'resolvers')"
-                ></tr>
+                ></div>
               }
 
               @if (data.canActivateGuards && data.canActivateGuards.length > 0) {
-                <tr
+                <div
                   ng-route-details-row
                   label="Can Activate Guards"
                   type="list"
@@ -128,20 +133,20 @@ <h2 class="router-title">Routes Details</h2>
                   actionBtnType="view-source"
                   actionBtnTooltip="View source"
                   (actionBtnClick)="viewSourceFromRouter($event, 'canActivate')"
-                ></tr>
+                ></div>
               }
               @if (data.canActivateChildGuards && data.canActivateChildGuards.length > 0) {
-                <tr
+                <div
                   ng-route-details-row
                   label="Can Activate Child Guards"
                   type="list"
                   dataKey="canActivateChildGuards"
                   [data]="data"
                   (actionBtnClick)="viewSourceFromRouter($event, 'canActivateChild')"
-                ></tr>
+                ></div>
               }
               @if (data.canDeactivateGuards && data.canDeactivateGuards.length > 0) {
-                <tr
+                <div
                   ng-route-details-row
                   label="Can DeActivate Guards"
                   type="list"
@@ -150,10 +155,10 @@ <h2 class="router-title">Routes Details</h2>
                   actionBtnType="view-source"
                   actionBtnTooltip="View source"
                   (actionBtnClick)="viewSourceFromRouter($event, 'canDeactivate')"
-                ></tr>
+                ></div>
               }
               @if (data.canMatchGuards && data.canMatchGuards.length > 0) {
-                <tr
+                <div
                   ng-route-details-row
                   label="Can Match Guards"
                   type="list"
@@ -162,11 +167,11 @@ <h2 class="router-title">Routes Details</h2>
                   actionBtnType="view-source"
                   actionBtnTooltip="View source"
                   (actionBtnClick)="viewSourceFromRouter($event, 'canMatch')"
-                ></tr>
+                ></div>
               }
 
               @if (data.providers && data.providers.length > 0) {
-                <tr
+                <div
                   ng-route-details-row
                   label="Providers"
                   type="list"
@@ -175,10 +180,10 @@ <h2 class="router-title">Routes Details</h2>
                   actionBtnType="view-source"
                   actionBtnTooltip="View source"
                   (actionBtnClick)="viewSourceFromRouter($event, 'providers')"
-                ></tr>
+                ></div>
               }
               @if (data.title) {
-                <tr
+                <div
                   ng-route-details-row
                   label="Title"
                   dataKey="title"
@@ -186,11 +191,11 @@ <h2 class="router-title">Routes Details</h2>
                   actionBtnType="view-source"
                   actionBtnTooltip="View source"
                   (actionBtnClick)="viewFunctionSource(data.title, 'title')"
-                ></tr>
+                ></div>
               }
 
               @if (data.runGuardsAndResolvers) {
-                <tr
+                <div
                   ng-route-details-row
                   label="RunGuardsAndResolvers"
                   dataKey="runGuardsAndResolvers"
@@ -200,25 +205,31 @@ <h2 class="router-title">Routes Details</h2>
                   (actionBtnClick)="
                     viewFunctionSource(data.runGuardsAndResolvers, 'runGuardsAndResolvers')
                   "
-                ></tr>
+                ></div>
               }
 
-              <tr
+              <div
                 ng-route-details-row
                 label="Active"
                 type="flag"
                 dataKey="isActive"
                 [data]="data"
-              ></tr>
-              <tr
+              ></div>
+              <div
                 ng-route-details-row
                 label="Auxiliary"
                 type="flag"
                 dataKey="isAux"
                 [data]="data"
-              ></tr>
-              <tr ng-route-details-row label="Lazy" type="flag" dataKey="isLazy" [data]="data"></tr>
-            </table>
+              ></div>
+              <div
+                ng-route-details-row
+                label="Lazy"
+                type="flag"
+                dataKey="isLazy"
+                [data]="data"
+              ></div>
+            </dl>
           </div>
         </div>
       </as-split-area>
diff --git a/devtools/projects/ng-devtools/src/styles/_tables.scss b/devtools/projects/ng-devtools/src/styles/_tables.scss
index de01b0a1e412..718354b6b35f 100644
--- a/devtools/projects/ng-devtools/src/styles/_tables.scss
+++ b/devtools/projects/ng-devtools/src/styles/_tables.scss
@@ -38,3 +38,32 @@ table.ng-table {
     padding: 0.625rem 0.375rem;
   }
 }
+
+dl.ng-dl {
+  width: 100%;
+  margin: 0;
+
+  > div,
+  > [ng-route-details-row] {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--senary-contrast);
+    padding: 0.625rem 0.375rem;
+
+    dt {
+      @extend %body-bold-01;
+      margin: 0;
+      flex: 0 0 30%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    dd {
+      @extend %body-01;
+      margin: 0;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}