diff --git a/public/pages/QueryDetails/Components/QuerySummary.tsx b/public/pages/QueryDetails/Components/QuerySummary.tsx
index ca6ae82..f24c8e4 100644
--- a/public/pages/QueryDetails/Components/QuerySummary.tsx
+++ b/public/pages/QueryDetails/Components/QuerySummary.tsx
@@ -4,7 +4,14 @@
  */
 
 import React from 'react';
-import { EuiFlexGrid, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiText } from '@elastic/eui';
+import {
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiTitle,
+  EuiDescriptionList,
+} from '@elastic/eui';
 import { SearchQueryRecord } from '../../../../types/types';
 import {
   CPU_TIME,
@@ -21,10 +28,15 @@ import { calculateMetric } from '../../../../common/utils/MetricUtils';
 // Panel component for displaying query detail values
 const PanelItem = ({ label, value }: { label: string; value: string | number }) => (
   <EuiFlexItem>
-    <EuiText size="xs">
-      <h4>{label}</h4>
-    </EuiText>
-    <EuiText size="xs">{value}</EuiText>
+    <EuiDescriptionList
+      compressed={true}
+      listItems={[
+        {
+          title: <h4>{label}</h4>,
+          description: value,
+        },
+      ]}
+    />
   </EuiFlexItem>
 );
 
@@ -33,9 +45,9 @@ const QuerySummary = ({ query }: { query: SearchQueryRecord | null }) => {
   if (!query) {
     return (
       <EuiPanel data-test-subj={'query-details-summary-section'}>
-        <EuiText size="xs">
+        <EuiTitle size="xs">
           <h2>No Data Available</h2>
-        </EuiText>
+        </EuiTitle>
       </EuiPanel>
     );
   }
@@ -49,9 +61,9 @@ const QuerySummary = ({ query }: { query: SearchQueryRecord | null }) => {
   const { timestamp, measurements, indices, search_type, node_id, total_shards } = query;
   return (
     <EuiPanel data-test-subj={'query-details-summary-section'}>
-      <EuiText size="xs">
+      <EuiTitle size="s">
         <h2>Summary</h2>
-      </EuiText>
+      </EuiTitle>
       <EuiHorizontalRule margin="m" />
       <EuiFlexGrid columns={4}>
         <PanelItem label={TIMESTAMP} value={convertTime(timestamp)} />
diff --git a/public/pages/QueryDetails/QueryDetails.test.tsx b/public/pages/QueryDetails/QueryDetails.test.tsx
index c55eda5..aa3eeb2 100644
--- a/public/pages/QueryDetails/QueryDetails.test.tsx
+++ b/public/pages/QueryDetails/QueryDetails.test.tsx
@@ -142,7 +142,7 @@ describe('QueryDetails component', () => {
       expect(retrieveQueryById).toHaveBeenCalled();
     });
 
-    const dateElements = container.getElementsByClassName('euiText euiText--extraSmall');
+    const dateElements = container.getElementsByClassName('euiDescriptionList__description');
     Array.from(dateElements).forEach((element) => {
       if (element.textContent?.includes('@')) {
         element.textContent = 'Sep 24, 2021 @ 12:00:00 AM';
diff --git a/public/pages/QueryDetails/QueryDetails.tsx b/public/pages/QueryDetails/QueryDetails.tsx
index e9ff5ca..ab1c085 100644
--- a/public/pages/QueryDetails/QueryDetails.tsx
+++ b/public/pages/QueryDetails/QueryDetails.tsx
@@ -15,7 +15,6 @@ import {
   EuiHorizontalRule,
   EuiPanel,
   EuiSpacer,
-  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -162,12 +161,13 @@ const QueryDetails = ({
             <EuiPanel data-test-subj={'query-details-source-section'}>
               <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
                 <EuiFlexItem>
-                  <EuiText size="xs">
+                  <EuiTitle size="s">
                     <h2>Query</h2>
-                  </EuiText>
+                  </EuiTitle>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <EuiButton
+                    size="s"
                     iconSide="right"
                     iconType="popout"
                     target="_blank"
@@ -192,10 +192,10 @@ const QueryDetails = ({
           </EuiFlexItem>
           <EuiFlexItem grow={1} style={{ alignSelf: 'start' }}>
             <EuiPanel data-test-subj={'query-details-latency-chart'}>
-              <EuiText size="xs">
+              <EuiTitle size="xs">
                 <h2>Latency</h2>
-              </EuiText>
-              <EuiHorizontalRule margin="m" />
+              </EuiTitle>
+              <EuiHorizontalRule margin="xs" />
               <div id="latency" />
             </EuiPanel>
           </EuiFlexItem>
diff --git a/public/pages/QueryDetails/__snapshots__/QueryDetails.test.tsx.snap b/public/pages/QueryDetails/__snapshots__/QueryDetails.test.tsx.snap
index 4f2f277..9769341 100644
--- a/public/pages/QueryDetails/__snapshots__/QueryDetails.test.tsx.snap
+++ b/public/pages/QueryDetails/__snapshots__/QueryDetails.test.tsx.snap
@@ -18,13 +18,11 @@ exports[`QueryDetails component matches snapshot 1`] = `
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
         data-test-subj="query-details-summary-section"
       >
-        <div
-          class="euiText euiText--extraSmall"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Summary
-          </h2>
-        </div>
+          Summary
+        </h2>
         <hr
           class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
         />
@@ -34,130 +32,162 @@ exports[`QueryDetails component matches snapshot 1`] = `
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              <h4>
-                Timestamp
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              Sep 24, 2021 @ 12:00:00 AM
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Timestamp
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                Sep 24, 2021 @ 12:00:00 AM
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              <h4>
-                Latency
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              8.00 ms
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Latency
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                8.00 ms
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              <h4>
-                CPU Time
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              5.51 ms
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  CPU Time
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                5.51 ms
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              <h4>
-                Memory Usage
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              N/A
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Memory Usage
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                N/A
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              <h4>
-                Indices
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              top_queries-2024.09.12
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Indices
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                top_queries-2024.09.12
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              <h4>
-                Search Type
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              query then fetch
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Search Type
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                query then fetch
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              <h4>
-                Coordinator Node ID
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              Q36D2z_NRGKim6EZZMgi6A
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Coordinator Node ID
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                Q36D2z_NRGKim6EZZMgi6A
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              <h4>
-                Total Shards
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              1
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Total Shards
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                1
+              </dd>
+            </dl>
           </div>
         </div>
       </div>
@@ -180,19 +210,17 @@ exports[`QueryDetails component matches snapshot 1`] = `
               <div
                 class="euiFlexItem"
               >
-                <div
-                  class="euiText euiText--extraSmall"
+                <h2
+                  class="euiTitle euiTitle--small"
                 >
-                  <h2>
-                    Query
-                  </h2>
-                </div>
+                  Query
+                </h2>
               </div>
               <div
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <a
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   href="https://playground.opensearch.org/app/searchRelevance#/"
                   rel="noopener noreferrer"
                   target="_blank"
@@ -1137,15 +1165,13 @@ exports[`QueryDetails component matches snapshot 1`] = `
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
             data-test-subj="query-details-latency-chart"
           >
-            <div
-              class="euiText euiText--extraSmall"
+            <h2
+              class="euiTitle euiTitle--xsmall"
             >
-              <h2>
-                Latency
-              </h2>
-            </div>
+              Latency
+            </h2>
             <hr
-              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
             />
             <div
               id="latency"