diff --git a/src/containers/CourseCard/CourseCard.scss b/src/containers/CourseCard/CourseCard.scss
new file mode 100644
index 0000000..f1dcf55
--- /dev/null
+++ b/src/containers/CourseCard/CourseCard.scss
@@ -0,0 +1,16 @@
+.course-card {
+  .card {
+    overflow: hidden;
+
+    .pgn__card-image-cap {
+      border-bottom-left-radius: 0 !important;
+    }
+  }
+
+  .course-card-banners {
+    > .alert {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/containers/CourseCard/__snapshots__/index.test.jsx.snap b/src/containers/CourseCard/__snapshots__/index.test.jsx.snap
index e9c6a51..4d679e2 100644
--- a/src/containers/CourseCard/__snapshots__/index.test.jsx.snap
+++ b/src/containers/CourseCard/__snapshots__/index.test.jsx.snap
@@ -8,65 +8,73 @@ exports[`CourseCard component snapshot 1`] = `
   <Card
     orientation="horizontal"
   >
-    <Card.ImageCap
-      src="hooks.bannerUrl"
-      srcAlt={
-        Object {
-          "formatted": Object {
-            "defaultMessage": "Course thumbnail",
-            "description": "Course card banner alt-text",
-            "id": "learner-dash.courseCard.bannerAlt",
-          },
-        }
-      }
-    />
-    <Card.Body>
-      <Card.Header
-        actions={
-          <CourseCardMenu
-            cardId="test-card-id"
-          />
-        }
-        title={
-          <span
-            data-testid="CourseCardTitle"
-          >
-            hooks.title
-          </span>
-        }
-      />
-      <Card.Section>
-        <CourseCardDetails
-          cardId="test-card-id"
-        />
-      </Card.Section>
-      <Card.Footer
-        orientation="vertical"
-        textElement={
-          <RelatedProgramsBadge
-            cardId="test-card-id"
-          />
-        }
+    <div
+      className="d-flex flex-column w-100"
+    >
+      <div
+        className="d-flex"
       >
-        <CourseCardActions
+        <Card.ImageCap
+          src="hooks.bannerUrl"
+          srcAlt={
+            Object {
+              "formatted": Object {
+                "defaultMessage": "Course thumbnail",
+                "description": "Course card banner alt-text",
+                "id": "learner-dash.courseCard.bannerAlt",
+              },
+            }
+          }
+        />
+        <Card.Body>
+          <Card.Header
+            actions={
+              <CourseCardMenu
+                cardId="test-card-id"
+              />
+            }
+            title={
+              <span
+                data-testid="CourseCardTitle"
+              >
+                hooks.title
+              </span>
+            }
+          />
+          <Card.Section>
+            <CourseCardDetails
+              cardId="test-card-id"
+            />
+          </Card.Section>
+          <Card.Footer
+            orientation="vertical"
+            textElement={
+              <RelatedProgramsBadge
+                cardId="test-card-id"
+              />
+            }
+          >
+            <CourseCardActions
+              cardId="test-card-id"
+            />
+          </Card.Footer>
+        </Card.Body>
+      </div>
+      <div
+        className="course-card-banners"
+        data-testid="CourseCardBanners"
+      >
+        <CourseBanner
           cardId="test-card-id"
         />
-      </Card.Footer>
-    </Card.Body>
+        <EntitlementBanner
+          cardId="test-card-id"
+        />
+        <CertificateBanner
+          cardId="test-card-id"
+        />
+      </div>
+    </div>
   </Card>
-  <div
-    className="course-card-banners"
-    data-testid="CourseCardBanners"
-  >
-    <CourseBanner
-      cardId="test-card-id"
-    />
-    <EntitlementBanner
-      cardId="test-card-id"
-    />
-    <CertificateBanner
-      cardId="test-card-id"
-    />
-  </div>
 </div>
 `;
diff --git a/src/containers/CourseCard/index.jsx b/src/containers/CourseCard/index.jsx
index c73204f..700f4b5 100644
--- a/src/containers/CourseCard/index.jsx
+++ b/src/containers/CourseCard/index.jsx
@@ -17,41 +17,47 @@ import CourseCardActions from './components/CourseCardActions';
 import messages from './messages';
 import CourseCardDetails from './components/CourseCardDetails';
 
+import './CourseCard.scss';
+
 export const CourseCard = ({ cardId }) => {
   const {
-    isEnrolled,
-    title,
-    bannerUrl,
-    formatMessage,
-  } = useCardData({ cardId });
+    isEnrolled, title, bannerUrl, formatMessage,
+  } = useCardData({
+    cardId,
+  });
   return (
     <div className="mb-4.5 course-card" data-testid="CourseCard">
       <Card orientation="horizontal">
-        <Card.ImageCap
-          src={bannerUrl}
-          srcAlt={formatMessage(messages.bannerAlt)}
-        />
-        <Card.Body>
-          <Card.Header
-            title={<span data-testid="CourseCardTitle">{title}</span>}
-            actions={<CourseCardMenu cardId={cardId} />}
-          />
-          <Card.Section>
-            <CourseCardDetails cardId={cardId} />
-          </Card.Section>
-          <Card.Footer
-            orientation="vertical"
-            textElement={<RelatedProgramsBadge cardId={cardId} />}
-          >
-            <CourseCardActions cardId={cardId} />
-          </Card.Footer>
-        </Card.Body>
+        <div className="d-flex flex-column w-100">
+          <div className="d-flex">
+            <Card.ImageCap
+              src={bannerUrl}
+              srcAlt={formatMessage(messages.bannerAlt)}
+            />
+            <Card.Body>
+              <Card.Header
+                title={<span data-testid="CourseCardTitle">{title}</span>}
+                actions={<CourseCardMenu cardId={cardId} />}
+              />
+              <Card.Section>
+                <CourseCardDetails cardId={cardId} />
+              </Card.Section>
+              <Card.Footer
+                orientation="vertical"
+                textElement={<RelatedProgramsBadge cardId={cardId} />}
+              >
+                <CourseCardActions cardId={cardId} />
+              </Card.Footer>
+            </Card.Body>
+          </div>
+
+          <div className="course-card-banners" data-testid="CourseCardBanners">
+            <CourseBanner cardId={cardId} />
+            <EntitlementBanner cardId={cardId} />
+            {isEnrolled && <CertificateBanner cardId={cardId} />}
+          </div>
+        </div>
       </Card>
-      <div className="course-card-banners" data-testid="CourseCardBanners">
-        <CourseBanner cardId={cardId} />
-        <EntitlementBanner cardId={cardId} />
-        {isEnrolled && <CertificateBanner cardId={cardId} />}
-      </div>
     </div>
   );
 };