diff --git a/src/components/common/Heatmap.tsx b/src/components/common/Heatmap.tsx
index 1e11811..f7aeede 100644
--- a/src/components/common/Heatmap.tsx
+++ b/src/components/common/Heatmap.tsx
@@ -13,7 +13,7 @@ import {
 import { OTHER_PHENOTYPE_LABEL } from '../../settings.ts';
 import { useDataContext } from '../../context/DataContext.ts';
 
-const { gray50, primaryPurple500, gray100A, gray500 } = vars;
+const { gray50, primaryPurple500, gray100A, gray500, primaryPurple600 } = vars;
 
 interface HeatmapGridProps {
   xAxis: string[];
@@ -219,12 +219,13 @@ const HeatmapGrid: FC<HeatmapGridProps> = ({
             height: '2rem',
             marginRight: '0.5rem',
             borderRadius: '0.25rem',
-            border: `0.0625rem solid ${gray500}`,
+            border: `0.0625rem solid ${primaryPurple600}`,
+            color: primaryPurple600,
           },
         }}
       >
-        <Button onClick={() => handleExpandAll()}>Expand All</Button>
-        <Button onClick={() => handleCompressAll()}>Compress All</Button>
+        <Button onClick={() => handleExpandAll()}>Open All</Button>
+        <Button onClick={() => handleCompressAll()}>Close All</Button>
       </ButtonGroup>
       <Box mb={1.5} pl="17.375rem">
         <Typography
diff --git a/src/components/connections/SummaryDetails.tsx b/src/components/connections/SummaryDetails.tsx
index d09dcaf..a794e7e 100644
--- a/src/components/connections/SummaryDetails.tsx
+++ b/src/components/connections/SummaryDetails.tsx
@@ -60,6 +60,11 @@ const SummaryDetails = ({
 
   // Details shown in the dropdown - from composer
   const detailsObject = [
+    {
+      label: 'Name',
+      value: connectionDetails?.id || '-',
+      icon: undefined,
+    },
     {
       label: 'Laterality',
       value: connectionDetails?.laterality || '-',
diff --git a/src/components/connections/SummaryHeader.tsx b/src/components/connections/SummaryHeader.tsx
index 33280a5..0e368e2 100644
--- a/src/components/connections/SummaryHeader.tsx
+++ b/src/components/connections/SummaryHeader.tsx
@@ -7,8 +7,7 @@ import {
   Stack,
 } from '@mui/material';
 import { vars } from '../../theme/variables';
-import IconButton from '@mui/material/IconButton';
-import { CloseArrows, ArrowRight, ArrowLeft, HelpCircle } from '../icons';
+import { ArrowRight } from '../icons';
 import Breadcrumbs from '@mui/material/Breadcrumbs';
 import { SummaryType, KsRecord } from '../common/Types';
 import { useDataContext } from '../../context/DataContext.ts';
@@ -37,11 +36,6 @@ const SummaryHeader = ({
 
   const { selectedConnectionSummary } = useDataContext();
 
-  function getConnectionId() {
-    return Object.keys(knowledgeStatementsMap)[connectionPage - 1] || '';
-  }
-  const connectionId = getConnectionId();
-
   const handleUpClick = () => {
     if (connectionPage < totalUniqueKS) {
       setConnectionPage(connectionPage + 1);
@@ -91,38 +85,49 @@ const SummaryHeader = ({
             variant="outlined"
             sx={{
               '& .MuiButtonBase-root': {
-                width: '2rem',
+                width: '7.8rem',
                 height: '2rem',
                 borderRadius: '0.25rem',
                 border: `0.0625rem solid ${primaryPurple600}`,
+                color: primaryPurple600,
+                marginRight: '1rem',
               },
             }}
           >
-            <IconButton onClick={() => setShowDetails(SummaryType.Summary)}>
-              <CloseArrows />
-            </IconButton>
-            <IconButton
+            <Button onClick={() => setShowDetails(SummaryType.Summary)}>
+              Back to Summary
+            </Button>
+            <Button
               sx={{
+                width: '4rem !important',
                 marginLeft: '.25rem',
               }}
               onClick={handleDownClick}
             >
-              <ArrowLeft />
-            </IconButton>
-            <IconButton
+              Previous
+            </Button>
+            <Typography
+              variant="subtitle1"
+              color={gray500}
+              style={{ width: '8rem' }}
+            >
+              Connection {connectionPage} of {totalUniqueKS}
+            </Typography>
+            <Button
               sx={{
+                width: '4rem !important',
                 marginLeft: '.25rem',
               }}
               onClick={handleUpClick}
             >
-              <ArrowRight />
-            </IconButton>
+              Next
+            </Button>
           </ButtonGroup>
         )}
 
         <Breadcrumbs separator={<ArrowRight />} aria-label="breadcrumb">
           {showDetails === SummaryType.DetailedSummary ? (
-            <Typography>{connectionId}</Typography>
+            <></>
           ) : (
             <Typography>Summary</Typography>
           )}
@@ -137,12 +142,7 @@ const SummaryHeader = ({
         }}
       >
         {showDetails === SummaryType.DetailedSummary ? (
-          <>
-            <Typography variant="subtitle1" color={gray500}>
-              Displaying connection {connectionPage} of {totalUniqueKS}
-            </Typography>
-            <HelpCircle />
-          </>
+          <></>
         ) : (
           <>
             <Box