diff --git a/frontend/src/component/admin/enterprise-edge/EnterpriseEdge.tsx b/frontend/src/component/admin/enterprise-edge/EnterpriseEdge.tsx
index 3425b3e78d..f9cfef5e34 100644
--- a/frontend/src/component/admin/enterprise-edge/EnterpriseEdge.tsx
+++ b/frontend/src/component/admin/enterprise-edge/EnterpriseEdge.tsx
@@ -20,17 +20,18 @@ const StyledSeparator = styled('hr')(({ theme }) => ({
     height: '1px',
     background: theme.palette.divider,
     width: '100%',
-    margin: theme.spacing(5, 0),
+    margin: theme.spacing(2, 0),
 }));
 
 export const EnterpriseEdge = () => {
     usePageTitle('Enterprise Edge');
 
     const { connectedEdges } = useConnectedEdges({ refreshInterval: 30_000 });
+    const hasConnectedEdges = connectedEdges.length > 0;
 
     return (
         <StyledPageContent header='Enterprise Edge'>
-            {connectedEdges.length > 0 && (
+            {hasConnectedEdges && (
                 <>
                     <StyledPageContentSection>
                         <EnterpriseEdgeInstances
@@ -40,7 +41,7 @@ export const EnterpriseEdge = () => {
                     <StyledSeparator />
                 </>
             )}
-            <StyledPageContentSection>
+            <StyledPageContentSection sx={{ pb: hasConnectedEdges ? 6 : 4 }}>
                 <EnterpriseEdgeExplanation />
             </StyledPageContentSection>
         </StyledPageContent>
diff --git a/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx b/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx
index 449cc0a5f6..10ed86611d 100644
--- a/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx
+++ b/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx
@@ -1,5 +1,5 @@
 import { ArcherContainer, ArcherElement } from 'react-archer';
-import { Typography, styled, useTheme } from '@mui/material';
+import { Typography, alpha, styled, useTheme } from '@mui/material';
 import { unknownify } from 'utils/unknownify';
 import { useMemo } from 'react';
 import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
@@ -41,10 +41,10 @@ const StyledNode = styled('div')(({ theme }) => ({
     },
 }));
 
-const StyledGroup = styled(StyledNode)({
-    backgroundColor: 'transparent',
+const StyledGroup = styled(StyledNode)(({ theme }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.75),
     position: 'relative',
-});
+}));
 
 const StyledHostingBadge = styled(Badge)({
     position: 'absolute',