diff --git a/packages/hawtio/src/plugins/connect/Connect.tsx b/packages/hawtio/src/plugins/connect/Connect.tsx
index f4d4f5ab..88ac988d 100644
--- a/packages/hawtio/src/plugins/connect/Connect.tsx
+++ b/packages/hawtio/src/plugins/connect/Connect.tsx
@@ -1,10 +1,11 @@
 import {
+  Divider,
   Nav,
   NavItem,
   NavList,
   PageGroup,
-  PageNavigation,
   PageSection,
+  PageSectionVariants,
   Popover,
   Text,
   TextContent,
@@ -53,9 +54,13 @@ export const Connect: React.FunctionComponent = () => {
             Connect <ConnectHint />
           </Title>
         </PageSection>
-        <PageNavigation>{nav}</PageNavigation>
+        <Divider />
+        <PageSection type='tabs' variant={PageSectionVariants.light} hasShadowBottom>
+          {nav}
+        </PageSection>
+        <Divider />
       </PageGroup>
-      <PageSection id='connect-main'>
+      <PageSection id='connect-main' variant={PageSectionVariants.light}>
         <Routes>
           {routes}
           {/* connect/login should be hidden to nav */}
diff --git a/packages/hawtio/src/plugins/connect/discover/Discover.tsx b/packages/hawtio/src/plugins/connect/discover/Discover.tsx
index d91c4f87..c266df3c 100644
--- a/packages/hawtio/src/plugins/connect/discover/Discover.tsx
+++ b/packages/hawtio/src/plugins/connect/discover/Discover.tsx
@@ -194,7 +194,9 @@ export const Discover: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Card style={{ marginBottom: '1rem' }}>{toolbar}</Card>
+      <Card style={{ marginBottom: '1rem' }} isFlat>
+        {toolbar}
+      </Card>
       <Gallery hasGutter minWidths={{ default: '400px' }}>
         {label === 'Agent' &&
           filteredAgents.map((agent, index) => (