diff --git a/src/components/InfoPopover/__snapshots__/index.test.jsx.snap b/src/components/InfoPopover/__snapshots__/index.test.jsx.snap
index 3bd4645..086e040 100644
--- a/src/components/InfoPopover/__snapshots__/index.test.jsx.snap
+++ b/src/components/InfoPopover/__snapshots__/index.test.jsx.snap
@@ -6,7 +6,7 @@ exports[`Info Popover Component snapshot 1`] = `
   overlay={
     <Popover
       className="overlay-help-popover"
-      id="popover"
+      id="info-popover"
     >
       <Popover.Content>
         <div>
diff --git a/src/components/InfoPopover/index.jsx b/src/components/InfoPopover/index.jsx
index 9c68f29..276ed11 100644
--- a/src/components/InfoPopover/index.jsx
+++ b/src/components/InfoPopover/index.jsx
@@ -23,7 +23,7 @@ export const InfoPopover = ({ onClick, children, intl }) => (
     placement="right-end"
     flip
     overlay={(
-      <Popover id="popover" className="overlay-help-popover">
+      <Popover id="info-popover" className="overlay-help-popover">
         <Popover.Content>{children}</Popover.Content>
       </Popover>
     )}
diff --git a/src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap b/src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap
index 563dc67..c23e295 100644
--- a/src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap
+++ b/src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap
@@ -5,11 +5,11 @@ exports[`ResponseDisplay component snapshot file upload disable with valid respo
   className="response-display"
 >
   <Card>
-    <Card.Body
+    <Card.Section
       className="response-display-text-content"
     >
       parsed html (sanitized (some text response here))
-    </Card.Body>
+    </Card.Section>
   </Card>
 </div>
 `;
@@ -64,11 +64,11 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
     }
   />
   <Card>
-    <Card.Body
+    <Card.Section
       className="response-display-text-content"
     >
       parsed html (sanitized (some text response here))
-    </Card.Body>
+    </Card.Section>
   </Card>
 </div>
 `;
diff --git a/src/containers/ResponseDisplay/index.jsx b/src/containers/ResponseDisplay/index.jsx
index 366804e..4b0a761 100644
--- a/src/containers/ResponseDisplay/index.jsx
+++ b/src/containers/ResponseDisplay/index.jsx
@@ -48,7 +48,7 @@ export class ResponseDisplay extends React.Component {
           /*  eslint-disable react/no-array-index-key */
           this.textContents.map((textContent, index) => (
             <Card key={index}>
-              <Card.Body className="response-display-text-content">{textContent}</Card.Body>
+              <Card.Section className="response-display-text-content">{textContent}</Card.Section>
             </Card>
           ))
         }
diff --git a/src/containers/Rubric/__snapshots__/index.test.jsx.snap b/src/containers/Rubric/__snapshots__/index.test.jsx.snap
index 13ee9af..24e0498 100644
--- a/src/containers/Rubric/__snapshots__/index.test.jsx.snap
+++ b/src/containers/Rubric/__snapshots__/index.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`Rubric Container shapshot: hide footer 1`] = `
   <Card
     className="grading-rubric-card"
   >
-    <Card.Body
+    <Card.Section
       className="grading-rubric-body"
     >
       <h3>
@@ -28,7 +28,7 @@ exports[`Rubric Container shapshot: hide footer 1`] = `
       />
       <hr />
       <RubricFeedback />
-    </Card.Body>
+    </Card.Section>
   </Card>
   <DemoAlert
     prop="demo-alert-props"
@@ -41,7 +41,7 @@ exports[`Rubric Container snapshot: show footer 1`] = `
   <Card
     className="grading-rubric-card"
   >
-    <Card.Body
+    <Card.Section
       className="grading-rubric-body"
     >
       <h3>
@@ -64,7 +64,7 @@ exports[`Rubric Container snapshot: show footer 1`] = `
       />
       <hr />
       <RubricFeedback />
-    </Card.Body>
+    </Card.Section>
     <div
       className="grading-rubric-footer"
     >
diff --git a/src/containers/Rubric/index.jsx b/src/containers/Rubric/index.jsx
index 5e49648..26ecb65 100644
--- a/src/containers/Rubric/index.jsx
+++ b/src/containers/Rubric/index.jsx
@@ -29,13 +29,13 @@ export const Rubric = ({ intl }) => {
   return (
     <>
       <Card className="grading-rubric-card">
-        <Card.Body className="grading-rubric-body">
+        <Card.Section className="grading-rubric-body">
           <h3>{intl.formatMessage(messages.rubric)}</h3>
           <hr className="m-2.5" />
           {criteria.map(props => <CriterionContainer {...props} />)}
           <hr />
           <RubricFeedback />
-        </Card.Body>
+        </Card.Section>
         {showFooter && (
           <div className="grading-rubric-footer">
             <StatefulButton
diff --git a/src/setupTest.js b/src/setupTest.js
index 162b87a..7f16c8e 100755
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -38,6 +38,7 @@ jest.mock('@edx/paragon', () => jest.requireActual('testUtils').mockNestedCompon
   Button: 'Button',
   Card: {
     Body: 'Card.Body',
+    Section: 'Card.Section',
     Footer: 'Card.Footer',
   },
   Col: 'Col',