diff --git a/src/components/AttributionPanel.js b/src/components/AttributionPanel.js
index 2ba7b6cb2f..b1d9c6ebec 100644
--- a/src/components/AttributionPanel.js
+++ b/src/components/AttributionPanel.js
@@ -6,6 +6,7 @@ import Link from '@mui/material/Link';
 import Skeleton from '@mui/material/Skeleton';
 import { Img } from 'react-image';
 import CompanionWindow from '../containers/CompanionWindow';
+import { CompanionWindowSection } from './CompanionWindowSection';
 import { LabelValueMetadata } from './LabelValueMetadata';
 import ns from '../config/css-ns';
 import { PluginHook } from './PluginHook';
@@ -18,10 +19,6 @@ const StyledPlaceholder = styled(Skeleton)(({ theme }) => ({
   backgroundColor: theme.palette.grey[300],
 }));
 
-const StyledSection = styled('div')({
-  borderBottom: '.5px solid',
-});
-
 /**
  * WindowSideBarInfoPanel
  */
@@ -47,7 +44,7 @@ export class AttributionPanel extends Component {
         windowId={windowId}
         id={id}
       >
-        <StyledSection sx={{ paddingLeft: 2 }}>
+        <CompanionWindowSection>
           { requiredStatement && (
             <LabelValueMetadata labelValuePairs={requiredStatement} defaultLabel={t('attribution')} />
           )}
@@ -65,17 +62,10 @@ export class AttributionPanel extends Component {
               </dl>
             )
           }
-        </StyledSection>
+        </CompanionWindowSection>
 
         { manifestLogo && (
-          <StyledSection sx={{
-            borderBottomColor: 'section_divider',
-            paddingBottom: 1,
-            paddingLeft: 2,
-            paddingRight: 1,
-            paddingTop: 2,
-          }}
-          >
+          <CompanionWindowSection>
             <StyledLogo
               src={[manifestLogo]}
               alt=""
@@ -84,7 +74,7 @@ export class AttributionPanel extends Component {
                 <StyledPlaceholder variant="rectangular" height={60} width={60} />
               }
             />
-          </StyledSection>
+          </CompanionWindowSection>
         )}
 
         <PluginHook {...this.props} />
diff --git a/src/components/CompanionWindowSection.js b/src/components/CompanionWindowSection.js
new file mode 100644
index 0000000000..312164e85b
--- /dev/null
+++ b/src/components/CompanionWindowSection.js
@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+
+export const CompanionWindowSection = styled('div', { name: 'CompanionWindowSection', slot: 'root' })(({ theme }) => ({
+  paddingBlockEnd: theme.spacing(1),
+  paddingBlockStart: theme.spacing(2),
+  paddingInlineEnd: theme.spacing(1),
+  paddingInlineStart: theme.spacing(2),
+}));
diff --git a/src/components/WindowSideBarAnnotationsPanel.js b/src/components/WindowSideBarAnnotationsPanel.js
index d6b2937e0c..d2e6f781d0 100644
--- a/src/components/WindowSideBarAnnotationsPanel.js
+++ b/src/components/WindowSideBarAnnotationsPanel.js
@@ -1,15 +1,12 @@
 import { createRef, Component } from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import AnnotationSettings from '../containers/AnnotationSettings';
 import CanvasAnnotations from '../containers/CanvasAnnotations';
 import CompanionWindow from '../containers/CompanionWindow';
+import { CompanionWindowSection } from './CompanionWindowSection';
 import ns from '../config/css-ns';
 
-const StyledSection = styled('div')({
-  borderBottom: '.5px solid',
-});
 /**
  * WindowSideBarAnnotationsPanel ~
 */
@@ -37,16 +34,9 @@ export class WindowSideBarAnnotationsPanel extends Component {
         ref={this.containerRef}
         titleControls={<AnnotationSettings windowId={windowId} />}
       >
-        <StyledSection sx={{
-          borderBottomColor: 'section_divider',
-          paddingBottom: 1,
-          paddingLeft: 2,
-          paddingRight: 1,
-          paddingTop: 2,
-        }}
-        >
+        <CompanionWindowSection>
           <Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography>
-        </StyledSection>
+        </CompanionWindowSection>
 
         {canvasIds.map((canvasId, index) => (
           <CanvasAnnotations
diff --git a/src/components/WindowSideBarInfoPanel.js b/src/components/WindowSideBarInfoPanel.js
index fe8c84788d..3261679503 100644
--- a/src/components/WindowSideBarInfoPanel.js
+++ b/src/components/WindowSideBarInfoPanel.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import CompanionWindow from '../containers/CompanionWindow';
+import { CompanionWindowSection } from './CompanionWindowSection';
 import CanvasInfo from '../containers/CanvasInfo';
 import LocalePicker from '../containers/LocalePicker';
 import ManifestInfo from '../containers/ManifestInfo';
@@ -9,9 +9,6 @@ import CollectionInfo from '../containers/CollectionInfo';
 import ManifestRelatedLinks from '../containers/ManifestRelatedLinks';
 import ns from '../config/css-ns';
 
-const StyledSection = styled('div')({
-  borderBottom: '.5px solid',
-});
 /**
  * WindowSideBarInfoPanel
  */
@@ -52,14 +49,7 @@ export class WindowSideBarInfoPanel extends Component {
       >
         {
           canvasIds.map((canvasId, index) => (
-            <StyledSection
-              sx={{
-                borderBottomColor: 'section_divider',
-                paddingBottom: 1,
-                paddingLeft: 2,
-                paddingRight: 1,
-                paddingTop: 2,
-              }}
+            <CompanionWindowSection
               key={canvasId}
             >
               <CanvasInfo
@@ -69,43 +59,22 @@ export class WindowSideBarInfoPanel extends Component {
                 totalSize={canvasIds.length}
                 windowId={windowId}
               />
-            </StyledSection>
+            </CompanionWindowSection>
           ))
         }
         { collectionPath.length > 0 && (
-          <StyledSection sx={{
-            borderBottomColor: 'section_divider',
-            paddingBottom: 1,
-            paddingLeft: 2,
-            paddingRight: 1,
-            paddingTop: 2,
-          }}
-          >
+          <CompanionWindowSection>
             <CollectionInfo id={id} windowId={windowId} />
-          </StyledSection>
+          </CompanionWindowSection>
         )}
 
-        <StyledSection sx={{
-          borderBottomColor: 'section_divider',
-          paddingBottom: 1,
-          paddingLeft: 2,
-          paddingRight: 1,
-          paddingTop: 2,
-        }}
-        >
+        <CompanionWindowSection>
           <ManifestInfo id={id} windowId={windowId} />
-        </StyledSection>
+        </CompanionWindowSection>
 
-        <StyledSection sx={{
-          borderBottomColor: 'section_divider',
-          paddingBottom: 1,
-          paddingLeft: 2,
-          paddingRight: 1,
-          paddingTop: 2,
-        }}
-        >
+        <CompanionWindowSection>
           <ManifestRelatedLinks id={id} windowId={windowId} />
-        </StyledSection>
+        </CompanionWindowSection>
       </CompanionWindow>
     );
   }
diff --git a/src/config/settings.js b/src/config/settings.js
index 5425c2c7de..c7f53e48a7 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -169,6 +169,13 @@ export default {
       useNextVariants: true // set so that console deprecation warning is removed
     },
     components: {
+      CompanionWindowSection: {
+        styleOverrides: {
+          root: {
+            borderBlockEnd: '.5px solid rgba(0, 0, 0, 0.25)'
+          },
+        },
+      },
       MuiButtonBase: {
         defaultProps: {
           disableTouchRipple: true,