diff --git a/airflow/www/static/js/dag/details/taskInstance/Details.tsx b/airflow/www/static/js/dag/details/taskInstance/Details.tsx
index e8905d659357f5..7d9dfa1a1c20b7 100644
--- a/airflow/www/static/js/dag/details/taskInstance/Details.tsx
+++ b/airflow/www/static/js/dag/details/taskInstance/Details.tsx
@@ -25,7 +25,7 @@ import {
   Tbody,
   Tr,
   Td,
-  Heading,
+  Divider,
 } from '@chakra-ui/react';
 
 import { finalStatesMap } from 'src/utils';
@@ -34,8 +34,8 @@ import { SimpleStatus } from 'src/dag/StatusBox';
 import Time from 'src/components/Time';
 import { ClipboardText } from 'src/components/Clipboard';
 import type { Task, TaskInstance, TaskState } from 'src/types';
+import useTaskInstance from 'src/api/useTaskInstance';
 import DatasetUpdateEvents from './DatasetUpdateEvents';
-import useTaskInstance from '../../../api/useTaskInstance';
 
 interface Props {
   instance: TaskInstance;
@@ -57,9 +57,6 @@ const Details = ({ instance, group, dagId }: Props) => {
     mapIndex,
   } = instance;
 
-  const { data: apiTI } = useTaskInstance({
-    dagId, dagRunId: runId, taskId, mapIndex, enabled: true,
-  });
   const {
     isMapped,
     tooltip,
@@ -67,6 +64,14 @@ const Details = ({ instance, group, dagId }: Props) => {
     hasOutletDatasets,
   } = group;
 
+  const { data: apiTI } = useTaskInstance({
+    dagId,
+    dagRunId: runId,
+    taskId,
+    mapIndex,
+    enabled: !isGroup && !isMapped,
+  });
+
   const numMap = finalStatesMap();
   let numMapped = 0;
   if (isGroup) {
@@ -109,21 +114,12 @@ const Details = ({ instance, group, dagId }: Props) => {
   const isOverall = (isMapped || isGroup) && 'Overall ';
   return (
     <Flex flexWrap="wrap" justifyContent="space-between">
-      <Table variant="striped">
-        <Tbody>
-          {tooltip && (
-            <Tr>
-              <Td colSpan={2}>{tooltip}</Td>
-            </Tr>
-          )}
-          {state === 'deferred' && (
-            <>
-              <Tr borderBottomWidth={2} borderBottomColor="gray.300">
-                <Td>
-                  <Heading size="sm">Triggerer info</Heading>
-                </Td>
-                <Td />
-              </Tr>
+      {state === 'deferred' && (
+        <>
+          <Text as="strong">Triggerer info</Text>
+          <Divider my={2} />
+          <Table variant="striped" mb={3}>
+            <Tbody>
               <Tr>
                 <Td>Trigger class</Td>
                 <Td>{`${apiTI?.trigger?.classpath}`}</Td>
@@ -140,17 +136,20 @@ const Details = ({ instance, group, dagId }: Props) => {
                 <Td>Latest triggerer heartbeat</Td>
                 <Td>{`${apiTI?.triggererJob?.latestHeartbeat}`}</Td>
               </Tr>
-            </>
+            </Tbody>
+          </Table>
+        </>
+      )}
+
+      <Text as="strong">Task Instance Details</Text>
+      <Divider my={2} />
+      <Table variant="striped">
+        <Tbody>
+          {tooltip && (
+            <Tr>
+              <Td colSpan={2}>{tooltip}</Td>
+            </Tr>
           )}
-          <Tr
-            borderBottomWidth={2}
-            borderBottomColor="gray.300"
-          >
-            <Td>
-              <Heading size="sm">Task Instance Details</Heading>
-            </Td>
-            <Td />
-          </Tr>
           <Tr>
             <Td>
               {isOverall}
@@ -173,16 +172,20 @@ const Details = ({ instance, group, dagId }: Props) => {
               </Td>
             </Tr>
           )}
-          {summary.length > 0 && (
-            summary
-          )}
+          {summary.length > 0 && summary}
           <Tr>
             <Td>{taskIdTitle}</Td>
-            <Td><ClipboardText value={taskId} /></Td>
+            <Td>
+              <ClipboardText value={taskId} />
+            </Td>
           </Tr>
           <Tr>
             <Td>Run ID</Td>
-            <Td><Text whiteSpace="nowrap"><ClipboardText value={runId} /></Text></Td>
+            <Td>
+              <Text whiteSpace="nowrap">
+                <ClipboardText value={runId} />
+              </Text>
+            </Td>
           </Tr>
           {mapIndex !== undefined && (
             <Tr>
@@ -206,13 +209,17 @@ const Details = ({ instance, group, dagId }: Props) => {
           {startDate && (
             <Tr>
               <Td>Started</Td>
-              <Td><Time dateTime={startDate} /></Td>
+              <Td>
+                <Time dateTime={startDate} />
+              </Td>
             </Tr>
           )}
           {endDate && isStateFinal && (
             <Tr>
               <Td>Ended</Td>
-              <Td><Time dateTime={endDate} /></Td>
+              <Td>
+                <Time dateTime={endDate} />
+              </Td>
             </Tr>
           )}
         </Tbody>
diff --git a/airflow/www/static/js/dag/details/taskInstance/index.tsx b/airflow/www/static/js/dag/details/taskInstance/index.tsx
index 1e1b5356bc142e..91d70f246181f1 100644
--- a/airflow/www/static/js/dag/details/taskInstance/index.tsx
+++ b/airflow/www/static/js/dag/details/taskInstance/index.tsx
@@ -190,14 +190,14 @@ const TaskInstance = ({
           {/* Mapped Task Instances Tab */}
           {
             isMappedTaskSummary && (
-            <TabPanel>
-              <MappedInstances
-                dagId={dagId}
-                runId={runId}
-                taskId={taskId}
-                onRowClicked={(row) => onSelect({ runId, taskId, mapIndex: row.values.mapIndex })}
-              />
-            </TabPanel>
+              <TabPanel>
+                <MappedInstances
+                  dagId={dagId}
+                  runId={runId}
+                  taskId={taskId}
+                  onRowClicked={(row) => onSelect({ runId, taskId, mapIndex: row.values.mapIndex })}
+                />
+              </TabPanel>
             )
           }
         </TabPanels>