diff --git a/public/pages/QueryGroupDetails/Components/QueryGroupAggregateSummary.tsx b/public/pages/QueryGroupDetails/Components/QueryGroupAggregateSummary.tsx
index 0d9e1e0..03d2bd7 100644
--- a/public/pages/QueryGroupDetails/Components/QueryGroupAggregateSummary.tsx
+++ b/public/pages/QueryGroupDetails/Components/QueryGroupAggregateSummary.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 {
   AVERAGE_CPU_TIME,
   AVERAGE_LATENCY,
@@ -17,28 +24,37 @@ import { calculateMetric } from '../../../../common/utils/MetricUtils';
 // Panel component for displaying query group 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>
 );
 
 export const QueryGroupAggregateSummary = ({ query }: { query: any }) => {
   if (!query) {
-    return <EuiText size="s">No query data available.</EuiText>;
+    return (
+      <EuiTitle size="s">
+        <h2>No query data available.</h2>
+      </EuiTitle>
+    );
   }
   const { measurements, id: id, group_by: groupBy } = query;
   const queryCount =
     measurements.latency?.count || measurements.cpu?.count || measurements.memory?.count || 1;
   return (
     <EuiPanel>
-      <EuiText size="xs">
+      <EuiTitle size="s">
         <h2>
           Aggregate summary for {queryCount} {queryCount === 1 ? 'query' : 'queries'}
         </h2>
-      </EuiText>
-      <EuiHorizontalRule margin="m" />
+      </EuiTitle>
+      <EuiHorizontalRule margin="xs" />
       <EuiFlexGrid columns={4}>
         <PanelItem label={ID} value={id} />
         <PanelItem
diff --git a/public/pages/QueryGroupDetails/Components/QueryGroupSampleQuerySummary.tsx b/public/pages/QueryGroupDetails/Components/QueryGroupSampleQuerySummary.tsx
index cf5a0d1..167eca9 100644
--- a/public/pages/QueryGroupDetails/Components/QueryGroupSampleQuerySummary.tsx
+++ b/public/pages/QueryGroupDetails/Components/QueryGroupSampleQuerySummary.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 {
   INDICES,
   NODE_ID,
@@ -15,16 +22,25 @@ import {
 
 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>
 );
 
 export const QueryGroupSampleQuerySummary = ({ query }: { query: any }) => {
   if (!query) {
-    return <EuiText size="s">No query data available.</EuiText>;
+    return (
+      <EuiTitle size="s">
+        <h2>No query data available.</h2>
+      </EuiTitle>
+    );
   }
   const convertTime = (unixTime: number) => {
     const date = new Date(unixTime);
@@ -41,10 +57,10 @@ export const QueryGroupSampleQuerySummary = ({ query }: { query: any }) => {
   } = query;
   return (
     <EuiPanel>
-      <EuiText size="xs">
+      <EuiTitle size="s">
         <h2>Sample query summary</h2>
-      </EuiText>
-      <EuiHorizontalRule margin="m" />
+      </EuiTitle>
+      <EuiHorizontalRule margin="xs" />
       <EuiFlexGrid columns={4}>
         <PanelItem label={TIMESTAMP} value={convertTime(timestamp)} />
         <PanelItem label={INDICES} value={indices.toString()} />
diff --git a/public/pages/QueryGroupDetails/QueryGroupDetails.tsx b/public/pages/QueryGroupDetails/QueryGroupDetails.tsx
index d892d89..0f43cd3 100644
--- a/public/pages/QueryGroupDetails/QueryGroupDetails.tsx
+++ b/public/pages/QueryGroupDetails/QueryGroupDetails.tsx
@@ -18,7 +18,6 @@ import {
   EuiHorizontalRule,
   EuiPanel,
   EuiSpacer,
-  EuiText,
   EuiTitle,
   EuiIconTip,
 } from '@elastic/eui';
@@ -193,12 +192,13 @@ export const QueryGroupDetails = ({
             <EuiPanel>
               <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
                 <EuiFlexItem>
-                  <EuiText size="xs">
+                  <EuiTitle size="xs">
                     <h2>Query</h2>
-                  </EuiText>
+                  </EuiTitle>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <EuiButton
+                    size="s"
                     iconSide="right"
                     iconType="popout"
                     target="_blank"
@@ -223,10 +223,10 @@ export const QueryGroupDetails = ({
           </EuiFlexItem>
           <EuiFlexItem grow={1} style={{ alignSelf: 'start' }}>
             <EuiPanel>
-              <EuiText size="xs">
+              <EuiTitle size="s">
                 <h2>Latency</h2>
-              </EuiText>
-              <EuiHorizontalRule margin="m" />
+              </EuiTitle>
+              <EuiHorizontalRule margin="xs" />
               <div id="latency" />
             </EuiPanel>
           </EuiFlexItem>
diff --git a/public/pages/QueryGroupDetails/__snapshots__/QueryGroupDetails.test.tsx.snap b/public/pages/QueryGroupDetails/__snapshots__/QueryGroupDetails.test.tsx.snap
index e561247..6143988 100644
--- a/public/pages/QueryGroupDetails/__snapshots__/QueryGroupDetails.test.tsx.snap
+++ b/public/pages/QueryGroupDetails/__snapshots__/QueryGroupDetails.test.tsx.snap
@@ -41,18 +41,16 @@ exports[`QueryGroupDetails matches snapshot 1`] = `
       <div
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
-        <div
-          class="euiText euiText--extraSmall"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Aggregate summary for 
-            8
-             
-            queries
-          </h2>
-        </div>
+          Aggregate summary for 
+          8
+           
+          queries
+        </h2>
         <hr
-          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
         />
         <div
           class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
@@ -60,82 +58,102 @@ exports[`QueryGroupDetails matches snapshot 1`] = `
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              <h4>
-                Id
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              8c1e50c035663459d567fa11d8eb494d
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Id
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                8c1e50c035663459d567fa11d8eb494d
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              <h4>
-                Average Latency
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              2.50 ms
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Average Latency
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                2.50 ms
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              <h4>
-                Average CPU Time
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              1.42 ms
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Average CPU Time
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                1.42 ms
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              <h4>
-                Average Memory Usage
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              16528.00 B
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Average Memory Usage
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                16528.00 B
+              </dd>
+            </dl>
           </div>
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              <h4>
-                Group by
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              SIMILARITY
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Group by
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                SIMILARITY
+              </dd>
+            </dl>
           </div>
         </div>
       </div>
@@ -184,15 +202,13 @@ exports[`QueryGroupDetails matches snapshot 1`] = `
       <div
         class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
-        <div
-          class="euiText euiText--extraSmall"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Sample query summary
-          </h2>
-        </div>
+          Sample query summary
+        </h2>
         <hr
-          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
         />
         <div
           class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
@@ -200,82 +216,102 @@ exports[`QueryGroupDetails matches snapshot 1`] = `
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              <h4>
-                Timestamp
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              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>
-                Indices
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              my-index
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Indices
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                my-index
+              </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"
+            <dl
+              class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
             >
-              <h4>
-                Coordinator Node ID
-              </h4>
-            </div>
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              HjvgxQ4AQTiddd43OV7pJA
-            </div>
+              <dt
+                class="euiDescriptionList__title"
+              >
+                <h4>
+                  Coordinator Node ID
+                </h4>
+              </dt>
+              <dd
+                class="euiDescriptionList__description"
+              >
+                HjvgxQ4AQTiddd43OV7pJA
+              </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>
@@ -297,19 +333,17 @@ exports[`QueryGroupDetails matches snapshot 1`] = `
               <div
                 class="euiFlexItem"
               >
-                <div
-                  class="euiText euiText--extraSmall"
+                <h2
+                  class="euiTitle euiTitle--xsmall"
                 >
-                  <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"
@@ -638,15 +672,13 @@ exports[`QueryGroupDetails matches snapshot 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
           >
-            <div
-              class="euiText euiText--extraSmall"
+            <h2
+              class="euiTitle euiTitle--small"
             >
-              <h2>
-                Latency
-              </h2>
-            </div>
+              Latency
+            </h2>
             <hr
-              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
             />
             <div
               id="latency"