diff --git a/src/pages-and-resources/index.scss b/src/pages-and-resources/index.scss
index 6702bd929..483b4c2e0 100644
--- a/src/pages-and-resources/index.scss
+++ b/src/pages-and-resources/index.scss
@@ -1,5 +1 @@
 @import "./discussions/DiscussionAppList";
-
-.course-page-config-card {
-  flex-basis: 100%;
-}
diff --git a/src/pages-and-resources/pages/PageCard.jsx b/src/pages-and-resources/pages/PageCard.jsx
index 18a70ed1d..71750cf25 100644
--- a/src/pages-and-resources/pages/PageCard.jsx
+++ b/src/pages-and-resources/pages/PageCard.jsx
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -9,7 +8,7 @@ import { faCog } from '@fortawesome/free-solid-svg-icons';
 
 import messages from '../messages';
 
-const pageShape = PropTypes.shape({
+const CoursePageShape = PropTypes.shape({
   id: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
@@ -19,43 +18,54 @@ const pageShape = PropTypes.shape({
   showEnable: PropTypes.bool.isRequired,
 });
 
-function PageCard({ intl, coursePage }) {
-  const pageStatusMsgId = coursePage.isEnabled ? 'pageStatus.enabled' : 'pageStatus.disabled';
+export { CoursePageShape };
+
+function PageCard({ intl, page }) {
+  const pageStatusMsgId = page.isEnabled ? 'pageStatus.enabled' : 'pageStatus.disabled';
   const componentClasses = classNames(
-    'course-page-config-card d-flex flex-column align-content-stretch',
+    'd-flex flex-column align-content-stretch',
     'bg-white p-3 border shadow',
-    { 'border-info-300': coursePage.isEnabled, 'border-gray-100': !coursePage.isEnabled },
+    { 'border-info-300': page.isEnabled, 'border-gray-100': !page.isEnabled },
   );
 
   return (
-    <div className={componentClasses}>
-      <div className="d-flex flex-row">
-        <span className="font-weight-bold">{coursePage.title}</span>
-        {coursePage.showSettings && <FontAwesomeIcon icon={faCog} className="ml-auto" />}
-      </div>
+    <div
+      className="d-flex flex-column align-content-stretch p-3 col-sm-12 col-md-6 col-lg-4"
+    >
+      <div
+        className={componentClasses}
+        style={{
+          flexBasis: '100%',
+        }}
+      >
+        <div className="d-flex flex-row">
+          <span className="font-weight-bold">{page.title}</span>
+          {page.showSettings && <FontAwesomeIcon icon={faCog} className="ml-auto" />}
+        </div>
 
-      <div>
-        {coursePage.showStatus && <span>{intl.formatMessage(messages[pageStatusMsgId])}</span>}
-      </div>
+        <div>
+          {page.showStatus && <span>{intl.formatMessage(messages[pageStatusMsgId])}</span>}
+        </div>
 
-      <div className="mt-3">
-        <p>{coursePage.description}</p>
-      </div>
+        <div className="mt-3">
+          <p>{page.description}</p>
+        </div>
 
-      {coursePage.showEnable && !coursePage.isEnabled && (
+        {page.showEnable && !page.isEnabled && (
         <div className="d-flex justify-content-center">
           <Button variant="outline-primary">
             {intl.formatMessage(messages['enable.button'])}
           </Button>
         </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }
 
 PageCard.propTypes = {
   intl: intlShape.isRequired,
-  coursePage: pageShape.isRequired,
+  page: CoursePageShape.isRequired,
 };
 
 export default injectIntl(PageCard);