diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index e1d9641a..dc98fc7d 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -87,9 +87,6 @@ const StepCardHeader = styled.div`
       button.ox-icon-angle-left, button.ox-icon-angle-right {
           display: none;
       }
-      .separator {
-          display: inherit;
-      }
   `}
 
     /*
diff --git a/src/components/Exercise.stories.tsx b/src/components/Exercise.stories.tsx
index fd0592dc..9dc26d21 100644
--- a/src/components/Exercise.stories.tsx
+++ b/src/components/Exercise.stories.tsx
@@ -7,6 +7,7 @@ import {
 import { Answer } from '../types';
 import { IncludeRemoveQuestion } from './IncludeRemoveQuestion';
 import styled from 'styled-components';
+import { ExercisePreview } from './ExercisePreview';
 
 const exerciseWithStepDataProps: ExerciseWithStepDataProps = {
   exercise: {
@@ -76,10 +77,10 @@ const exerciseWithStepDataProps: ExerciseWithStepDataProps = {
   canUpdateCurrentStep: false,
 };
 
-const exerciseWithQuestionStatesProps = (): ExerciseWithQuestionStatesProps => {
+const exerciseWithQuestionStatesProps = (uid?: string): ExerciseWithQuestionStatesProps => {
   return {
     exercise: {
-      uid: '1@1',
+      uid: uid || '1@1',
       uuid: 'e4e27897-4abc-40d3-8565-5def31795edc',
       group_uuid: '20e82bf6-232e-40c8-ba68-2d22c6498f69',
       number: 1,
@@ -817,7 +818,7 @@ export const PreviewCard = () => {
 export const OverlayCard = () => {
   const randomlyCorrectAnswer = Math.floor(Math.random() * 3) + 1;
   const props1: ExerciseWithQuestionStatesProps = {
-    ...exerciseWithQuestionStatesProps(),
+    ...exerciseWithQuestionStatesProps('1@123'),
     ...exerciseWithOverlayProps(<button>Overlay</button>),
     questionStates: {
       '1': {
@@ -920,7 +921,7 @@ export const OverlayCard = () => {
   const [buttonVariant, setButtonVariant] = React.useState<'include' | 'remove'>('include');
 
   const props2: ExerciseWithQuestionStatesProps = {
-    ...exerciseWithQuestionStatesProps(),
+    ...exerciseWithQuestionStatesProps('1@321'),
     ...exerciseWithOverlayProps(
       <IncludeRemoveQuestion 
         buttonVariant={buttonVariant}
@@ -948,10 +949,37 @@ export const OverlayCard = () => {
     },
   };
 
+  const [selectedQuestions, setSelectedQuestions] = useState<string[]>([]);
+  const [showDetails1, setShowDetails1] = useState<boolean>(false);
+  const [showDetails2, setShowDetails2] = useState<boolean>(false);
+
+  const includeHandler = (exerciseUid: string) => setSelectedQuestions(previous => previous.concat(exerciseUid));
+  const removeHandler = (exerciseUid: string) => setSelectedQuestions(previous => previous.filter((id) => id !== exerciseUid));
+
   return (
     <TextResizerProvider>
+      <h2>Exercise cards</h2>
       <Exercise {...props1} className='preview-card' />
       <Exercise {...props2} className='preview-card' />
+      <h2>Exercise Preview cards</h2>
+      {showDetails1 && <h2>Details 1!</h2>}
+      <ExercisePreview 
+        selected={selectedQuestions.includes(props1.exercise.uid)} 
+        onIncludeHandler={()=> includeHandler(props1.exercise.uid)} 
+        onRemoveHandler={()=> removeHandler(props1.exercise.uid)}
+        onClickDetails={()=> setShowDetails1((previous) => !previous)}
+        enableOverlay 
+        exercise={props1.exercise} 
+      />
+      {showDetails2 && <h2>Details 2!</h2>}
+      <ExercisePreview 
+        selected={selectedQuestions.includes(props2.exercise.uid)} 
+        onIncludeHandler={()=> includeHandler(props2.exercise.uid)} 
+        onRemoveHandler={()=> removeHandler(props2.exercise.uid)}
+        onClickDetails={()=> setShowDetails2((previous) => !previous)}
+        enableOverlay 
+        exercise={props2.exercise} 
+      />
     </TextResizerProvider>
   );
 };
diff --git a/src/components/Exercise/styles.ts b/src/components/Exercise/styles.ts
index 48e17bb4..adc1f803 100644
--- a/src/components/Exercise/styles.ts
+++ b/src/components/Exercise/styles.ts
@@ -1,11 +1,25 @@
+import { colors } from "../../theme";
 import { css } from "styled-components";
 
 export const exerciseStyles = css`
+
+  &.is-selected {
+    background-color: ${colors.card.header.background};
+    
+    .step-card-footer-inner, 
+    .step-card-body, 
+    .step-card-header, 
+    .answer-letter-wrapper::before {
+      background-color: ${colors.card.header.background} !important;
+    }
+  }
+
   &.preview-card {
     --spacing: 0.8rem;
 
     .step-card-header,
     .step-card-body {
+      background-color: ${colors.palette.white};
       padding: var(--spacing);
       font-size: 1.6rem;
       line-height: 2rem;
@@ -44,6 +58,7 @@ export const exerciseStyles = css`
     .openstax-question {
       .openstax-answer {
         padding: 0;
+        border: none;
 
         .answer-label {
           padding-top: var(--spacing);
@@ -53,6 +68,13 @@ export const exerciseStyles = css`
           .answer-answer {
             margin-left: var(--spacing);
           }
+
+          &::before {
+            min-width: 2.3rem;
+            min-height: 2.3rem;
+            width: 2.3rem;
+            height: 2.3rem;
+          }
         }
 
         .answer-letter {
@@ -74,13 +96,31 @@ export const exerciseStyles = css`
       }
     }
 
-    .step-card-footer {
+    .step-card-footer, .detailed-solution {
       display: none;
     }
 
     .question-stem,
-    .question-feedback-content {
+    .question-feedback-content,
+    .question-info,
+    .exercise-context {
       line-height: 2rem;
     }
+
+    .question-info {
+      font-weight: bold;
+      font-size: 1.2rem;
+    }
+
+    .question-id {
+      font-weight: 400;
+      font-size: 1.2rem;
+    }
+
+    .question-stem {
+      color: ${colors.palette.neutralDarker};
+      font-weight: bold;
+      font-size: 1.6rem;
+    }
   }
 `;
diff --git a/src/components/ExercisePreview.spec.tsx b/src/components/ExercisePreview.spec.tsx
new file mode 100644
index 00000000..edb6c7ef
--- /dev/null
+++ b/src/components/ExercisePreview.spec.tsx
@@ -0,0 +1,69 @@
+import { ExercisePreview } from './ExercisePreview';
+import renderer from 'react-test-renderer';
+import { ExerciseData } from 'src/types';
+
+describe('ExercisePreview', () => {
+  describe('using step data', () => {
+
+    let exercise: ExerciseData;
+
+    beforeEach(() => {
+      exercise = {
+        uid: '1@1',
+        uuid: 'e4e27897-4abc-40d3-8565-5def31795edc',
+        group_uuid: '20e82bf6-232e-40c8-ba68-2d22c6498f69',
+        number: 1,
+        version: 1,
+        published_at: '2022-09-06T20:32:21.981Z',
+        context: 'Context',
+        stimulus_html: '<b>Stimulus HTML</b>',
+        tags: [],
+        authors: [{ user_id: 1, name: 'OpenStax' }],
+        copyright_holders: [{ user_id: 1, name: 'OpenStax' }],
+        derived_from: [],
+        is_vocab: false,
+        solutions_are_public: false,
+        versions: [1],
+        questions: [{
+          id: '1234@5',
+          collaborator_solutions: [],
+          formats: ['true-false'],
+          stimulus_html: '',
+          stem_html: '',
+          is_answer_order_important: false,
+          answers: [{
+            id: '1',
+            correctness: undefined,
+            content_html: 'True',
+          }, {
+            id: '2',
+            correctness: undefined,
+            content_html: 'False',
+          }],
+        }],
+      };
+    });
+
+    it.each`
+        enableOverlay | selected | description
+        ${true}       | ${true}  | ${'with overlay and selected true'}
+        ${true}       | ${true}  | ${'with overlay and selected false'}
+        ${false}      | ${false} | ${'without overlay'}
+    `('matches snapshot %description', ({ enableOverlay, selected }: { enableOverlay: boolean, selected: boolean }) => {
+      const onIncludeMock = jest.fn();
+      const onRemoveMock = jest.fn();
+      const onDetailsMock = jest.fn();
+      const tree = renderer.create(
+        <ExercisePreview 
+          exercise={exercise} 
+          enableOverlay={enableOverlay}
+          selected={selected}
+          onIncludeHandler={onIncludeMock}
+          onRemoveHandler={onRemoveMock}
+          onClickDetails={onDetailsMock}
+        />
+      ).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/components/ExercisePreview.tsx b/src/components/ExercisePreview.tsx
new file mode 100644
index 00000000..b75bed2a
--- /dev/null
+++ b/src/components/ExercisePreview.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import { ExerciseData, ExerciseQuestionData, StepBase } from "src/types";
+import { IncludeRemoveQuestion } from "./IncludeRemoveQuestion";
+import { Exercise } from "./Exercise";
+
+export interface ExercisePreviewProps {
+    exercise: ExerciseData;
+    selected: boolean;
+    onIncludeHandler: () => void;
+    onRemoveHandler: () => void;
+    onClickDetails: () => void;
+    enableOverlay?: boolean;
+}
+
+/** 
+ * An Exercise version with less interaction with card and grants an Overlay with Include/Remove component
+ */ 
+export const ExercisePreview = (
+    {
+        exercise,
+        selected,
+        onIncludeHandler,
+        onRemoveHandler,
+        onClickDetails,
+        enableOverlay = false,
+    }: ExercisePreviewProps) => {
+
+    const exercisePreviewProps = (exercise: ExerciseData) => {
+        const formatAnswerData = (questions: ExerciseQuestionData[]) => questions.map((q) => (
+            { id: q.id, correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || '') }));
+
+        const questionStateFields = {
+            available_points: '1.0',
+            is_completed: true,
+            answer_id: '1',
+            free_response: '',
+            feedback_html: '',
+            correct_answer_feedback_html: '',
+            attempts_remaining: 0,
+            attempt_number: 1,
+            incorrectAnswerId: 0
+        }
+
+        const questionStates = formatAnswerData(exercise.questions).reduce((acc, answer) => {
+            const { id, correct_answer_id } = answer;
+            return { ...acc, [id]: { ...questionStateFields, correct_answer_id } };
+        }, {});
+
+        const step: StepBase = {
+            id: 1,
+            uid: exercise.uid,
+            available_points: '1.0',
+        };
+
+        return {
+            canAnswer: true,
+            needsSaved: true,
+            hasMultipleAttempts: false,
+            onAnswerChange: () => undefined,
+            onAnswerSave: () => undefined,
+            onNextStep: () => undefined,
+            apiIsPending: false,
+            canUpdateCurrentStep: false,
+            step: step,
+            questionNumber: exercise.number as number,
+            numberOfQuestions: exercise.questions.length,
+            questionStates: questionStates,
+            show_all_feedback: false, // Hide all feedback
+        };
+    };
+
+    const includeRemoveQuestionComponent = React.useMemo(() =>
+        <IncludeRemoveQuestion
+            buttonVariant={selected ? 'remove' : 'include'}
+            onIncludeHandler={onIncludeHandler}
+            onRemoveHandler={onRemoveHandler}
+            onClickDetails={onClickDetails}
+        />
+        , [selected, onIncludeHandler, onRemoveHandler, onClickDetails]);
+
+    return (
+        <Exercise
+            exercise={exercise}
+            className={selected ? 'preview-card is-selected' : 'preview-card'}
+            {
+            ...(enableOverlay
+                ? {
+                    overlayChildren: includeRemoveQuestionComponent,
+                }
+                : {})
+            }
+            {...exercisePreviewProps(exercise)}
+        />
+    );
+};
\ No newline at end of file
diff --git a/src/components/IncludeRemoveQuestion.spec.tsx b/src/components/IncludeRemoveQuestion.spec.tsx
index 40c539ba..aa5794dd 100644
--- a/src/components/IncludeRemoveQuestion.spec.tsx
+++ b/src/components/IncludeRemoveQuestion.spec.tsx
@@ -9,15 +9,23 @@ describe('IncludeRemoveQuestion', () => {
   `('matches snapshot', ({ buttonVariant }: { buttonVariant: 'include' | 'remove' }) => {
     const mockIncludeHandler = jest.fn();
     const mockRemoveHandler = jest.fn();
+    const mockOnClickDetails = jest.fn();
     const component = renderer.create(
-      <IncludeRemoveQuestion buttonVariant={buttonVariant} onIncludeHandler={mockIncludeHandler} onRemoveHandler={mockRemoveHandler}/>
+      <IncludeRemoveQuestion 
+        buttonVariant={buttonVariant} 
+        onIncludeHandler={mockIncludeHandler} 
+        onRemoveHandler={mockRemoveHandler}
+        onClickDetails={mockOnClickDetails}
+      />
     );
   
     renderer.act(() => {
         component.root.findAllByType('button')[0].props.onClick();
+        component.root.findAllByType('button')[1].props.onClick();
     });
     
     expect(buttonVariant === 'include' ? mockIncludeHandler : mockRemoveHandler).toHaveBeenCalled();
+    expect(mockOnClickDetails).toHaveBeenCalled();
     expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/components/IncludeRemoveQuestion/index.tsx b/src/components/IncludeRemoveQuestion/index.tsx
index 3a7b104b..e05e790a 100644
--- a/src/components/IncludeRemoveQuestion/index.tsx
+++ b/src/components/IncludeRemoveQuestion/index.tsx
@@ -7,40 +7,43 @@ export interface IncludeRemoveQuestionProps {
   buttonVariant: 'include' | 'remove';
   // Method invoked when the include button is clicked
   onIncludeHandler: () => void;
-    // Method invoked when the remove button is clicked
+  // Method invoked when the remove button is clicked
   onRemoveHandler: () => void;
+  // Method invoked when the details button is pressed
+  onClickDetails?: () => void;
 }
 
-export const IncludeRemoveQuestion = ({buttonVariant, onIncludeHandler, onRemoveHandler }: IncludeRemoveQuestionProps) => {
+export const IncludeRemoveQuestion = (
+  { buttonVariant, onIncludeHandler, onRemoveHandler, onClickDetails }: IncludeRemoveQuestionProps) => {
 
-    const buttonIcon = React.useMemo(() => buttonVariant === 'include' ? faPlus : faMinus, [buttonVariant]);
-    const onClickHandler = (variant: 'include' | 'remove') => { 
-        switch (variant) {
-            case 'include':
-              onIncludeHandler();
-              break;
-            case 'remove':
-              onRemoveHandler();
-              break;
-            default:
-              break;
-          }
-    };
+  const buttonIcon = React.useMemo(() => buttonVariant === 'include' ? faPlus : faMinus, [buttonVariant]);
+  const onClickHandler = (variant: 'include' | 'remove') => {
+    switch (variant) {
+      case 'include':
+        onIncludeHandler();
+        break;
+      case 'remove':
+        onRemoveHandler();
+        break;
+      default:
+        break;
+    }
+  };
 
-    const generateButtonText = (string: string) => {
-      return string.charAt(0).toUpperCase() + string.slice(1) + ' question';
-    };
-    
-    return (
-        <StyledContainer>
-            <StyledButton className={buttonVariant} onClick={() => onClickHandler(buttonVariant)} aria-label={buttonVariant}>
-                <StyledIcon className={buttonVariant} icon={buttonIcon} aria-label={buttonVariant + ' question'} border size="lg" />
-                <span>{generateButtonText(buttonVariant)}</span>
-            </StyledButton>
-            <StyledButton className="details" aria-label="details">
-                <StyledIcon className="details" icon={faEllipsisH} border size="lg"/>
-                <span>Details</span>
-            </StyledButton>
-        </StyledContainer>
-    );
+  const generateButtonText = (string: string) => {
+    return string.charAt(0).toUpperCase() + string.slice(1) + ' question';
+  };
+
+  return (
+    <StyledContainer>
+      <StyledButton className={buttonVariant} onClick={() => onClickHandler(buttonVariant)} aria-label={buttonVariant}>
+        <StyledIcon className={buttonVariant} icon={buttonIcon} aria-label={buttonVariant + ' question'} border size="lg" />
+        <span>{generateButtonText(buttonVariant)}</span>
+      </StyledButton>
+      <StyledButton className="details" aria-label="details" onClick={onClickDetails}>
+        <StyledIcon className="details" icon={faEllipsisH} border size="lg" />
+        <span>Details</span>
+      </StyledButton>
+    </StyledContainer>
+  );
 }; 
\ No newline at end of file
diff --git a/src/components/__snapshots__/Card.spec.tsx.snap b/src/components/__snapshots__/Card.spec.tsx.snap
index 1882d238..722a4364 100644
--- a/src/components/__snapshots__/Card.spec.tsx.snap
+++ b/src/components/__snapshots__/Card.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`StepCard matches snapshot 1`] = `
         id="step-card"
       >
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          className="sc-dkzDqf igaccC step-card-header"
         >
           <div>
             <h2
@@ -65,7 +65,7 @@ exports[`StepCard matches snapshot with more than one question 1`] = `
         id="step-card"
       >
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          className="sc-dkzDqf igaccC step-card-header"
         >
           <div>
             <h2
@@ -125,7 +125,7 @@ exports[`TaskStepCard can optionally provide task 1`] = `
         id="step-card"
       >
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          className="sc-dkzDqf igaccC step-card-header"
         >
           <div>
             <h2
@@ -170,7 +170,7 @@ exports[`TaskStepCard can optionally provide type 1`] = `
         id="step-card"
       >
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          className="sc-dkzDqf igaccC step-card-header"
         >
           <div>
             <h2
@@ -215,7 +215,7 @@ exports[`TaskStepCard matches snapshot 1`] = `
         id="step-card"
       >
         <div
-          className="sc-dkzDqf kooVfX step-card-header"
+          className="sc-dkzDqf igaccC step-card-header"
         >
           <div>
             <h2
diff --git a/src/components/__snapshots__/Exercise.spec.tsx.snap b/src/components/__snapshots__/Exercise.spec.tsx.snap
index 6214b6af..18a389bc 100644
--- a/src/components/__snapshots__/Exercise.spec.tsx.snap
+++ b/src/components/__snapshots__/Exercise.spec.tsx.snap
@@ -9,14 +9,14 @@ exports[`Exercise using step data matches snapshot 1`] = `
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl RyOjk"
+      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
     >
       <div>
         <div
           id="step-card"
         >
           <div
-            className="sc-dkzDqf kooVfX step-card-header"
+            className="sc-dkzDqf igaccC step-card-header"
           >
             <div>
               <h2
@@ -69,7 +69,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
                 data-test-id="student-exercise-question"
               >
                 <div
-                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  className="sc-iBkjds lXypw openstax-question step-card-body"
                   data-question-number={1}
                   data-test-id="question"
                 >
@@ -206,7 +206,7 @@ exports[`Exercise with overlay rendering matches snapshot 1`] = `
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl RyOjk"
+      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
     >
       <div
         onBlur={[Function]}
@@ -218,7 +218,7 @@ exports[`Exercise with overlay rendering matches snapshot 1`] = `
           id="step-card"
         >
           <div
-            className="sc-dkzDqf kooVfX step-card-header"
+            className="sc-dkzDqf igaccC step-card-header"
           >
             <div>
               <h2
@@ -271,7 +271,7 @@ exports[`Exercise with overlay rendering matches snapshot 1`] = `
                 data-test-id="student-exercise-question"
               >
                 <div
-                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  className="sc-iBkjds lXypw openstax-question step-card-body"
                   data-question-number={1}
                   data-test-id="question"
                 >
@@ -408,14 +408,14 @@ exports[`Exercise with question state data matches snapshot 1`] = `
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl RyOjk"
+      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
     >
       <div>
         <div
           id="step-card"
         >
           <div
-            className="sc-dkzDqf kooVfX step-card-header"
+            className="sc-dkzDqf igaccC step-card-header"
           >
             <div>
               <h2
@@ -462,7 +462,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
                 data-test-id="student-exercise-question"
               >
                 <div
-                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  className="sc-iBkjds lXypw openstax-question step-card-body"
                   data-question-number={1}
                   data-test-id="question"
                 >
@@ -653,14 +653,14 @@ exports[`Exercise with question state data renders header icons with multiple ch
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl RyOjk"
+      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
     >
       <div>
         <div
           id="step-card"
         >
           <div
-            className="sc-dkzDqf kooVfX step-card-header"
+            className="sc-dkzDqf igaccC step-card-header"
           >
             <div>
               <h2
@@ -793,7 +793,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
                 data-test-id="student-exercise-question"
               >
                 <div
-                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  className="sc-iBkjds lXypw openstax-question step-card-body"
                   data-question-number={1}
                   data-test-id="question"
                 >
@@ -984,14 +984,14 @@ exports[`Exercise with question state data renders header icons with two-step ex
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl RyOjk"
+      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
     >
       <div>
         <div
           id="step-card"
         >
           <div
-            className="sc-dkzDqf kooVfX step-card-header"
+            className="sc-dkzDqf igaccC step-card-header"
           >
             <div>
               <h2
@@ -1164,7 +1164,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
                 data-test-id="student-exercise-question"
               >
                 <div
-                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  className="sc-iBkjds lXypw openstax-question step-card-body"
                   data-question-number={1}
                   data-test-id="question"
                 >
@@ -1301,14 +1301,14 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl RyOjk"
+      className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hAXkpq"
     >
       <div>
         <div
           id="step-card"
         >
           <div
-            className="sc-dkzDqf kooVfX step-card-header"
+            className="sc-dkzDqf igaccC step-card-header"
           >
             <div>
               <h2
@@ -1355,7 +1355,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
                 data-test-id="student-exercise-question"
               >
                 <div
-                  className="sc-iBkjds bohpoA openstax-question step-card-body"
+                  className="sc-iBkjds lXypw openstax-question step-card-body"
                   data-question-number={1}
                   data-test-id="question"
                 >
diff --git a/src/components/__snapshots__/ExercisePreview.spec.tsx.snap b/src/components/__snapshots__/ExercisePreview.spec.tsx.snap
new file mode 100644
index 00000000..8d995569
--- /dev/null
+++ b/src/components/__snapshots__/ExercisePreview.spec.tsx.snap
@@ -0,0 +1,587 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExercisePreview using step data matches snapshot %description 1`] = `
+<div
+  className="sc-fEOsli eTaXVj"
+>
+  <div
+    className="sc-eCYdqJ jqafet"
+    data-task-step-id={1}
+  >
+    <div
+      className="sc-hKMtZM doPJeP exercise-step sc-fnykZs elrDSM sc-bjUoiL dcgACV preview-card is-selected"
+    >
+      <div
+        onBlur={[Function]}
+        onMouseLeave={[Function]}
+        onMouseOver={[Function]}
+        tabIndex={0}
+      >
+        <div
+          id="step-card"
+        >
+          <div
+            className="sc-jSMfEi cfhjdW step-card-header"
+          >
+            <div>
+              <h2
+                className="question-info"
+              >
+                <span>
+                  Question 1
+                </span>
+                <span
+                  className="separator"
+                >
+                  |
+                </span>
+                <span
+                  className="question-id"
+                >
+                  ID: 
+                  1@1
+                </span>
+              </h2>
+            </div>
+          </div>
+          <div
+            className="sc-gKXOVf eiZLwY"
+          >
+            <div>
+              <div
+                className="step-card-body exercise-context"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Context",
+                  }
+                }
+              />
+              <div
+                className="step-card-body exercise-stimulus"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<b>Stimulus HTML</b>",
+                  }
+                }
+              />
+              <div
+                data-test-id="student-exercise-question"
+              >
+                <div
+                  className="sc-jqUVSM kmbXEX openstax-question step-card-body"
+                  data-question-number={1}
+                  data-test-id="question"
+                >
+                  <div
+                    aria-label="Answer choices"
+                    className="answers-table"
+                    role="radiogroup"
+                  >
+                    <div
+                      className="openstax-answer"
+                    >
+                      <section
+                        className="answers-answer disabled answer-selected"
+                      >
+                        <input
+                          checked={true}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1234@5-option-0"
+                          name="1234@5-options"
+                          onChange={[Function]}
+                          type="radio"
+                        />
+                        <label
+                          className="answer-label"
+                          htmlFor="1234@5-option-0"
+                        >
+                          <span
+                            aria-label="Selected Choice A:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="A"
+                            data-test-id="answer-choice-A"
+                          />
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "True",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                    <div
+                      className="openstax-answer"
+                    >
+                      <section
+                        className="answers-answer disabled"
+                      >
+                        <input
+                          checked={false}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1234@5-option-1"
+                          name="1234@5-options"
+                          onChange={[Function]}
+                          type="radio"
+                        />
+                        <label
+                          className="answer-label"
+                          htmlFor="1234@5-option-1"
+                        >
+                          <span
+                            aria-label="Choice B:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="B"
+                            data-test-id="answer-choice-B"
+                          />
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "False",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="sc-kDDrLX eDCkPk step-card-footer"
+                >
+                  <div
+                    className="step-card-footer-inner"
+                  >
+                    <div
+                      className="points"
+                      role="status"
+                    >
+                      <span
+                        className="attempts-left"
+                      />
+                    </div>
+                    <div
+                      className="controls"
+                    >
+                      <button
+                        className="sc-ftvSup gRHhHP"
+                        data-test-id="submit-answer-btn"
+                        disabled={false}
+                        onClick={[Function]}
+                      >
+                        Submit & continue
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ExercisePreview using step data matches snapshot %description 2`] = `
+<div
+  className="sc-fEOsli eTaXVj"
+>
+  <div
+    className="sc-eCYdqJ jqafet"
+    data-task-step-id={1}
+  >
+    <div
+      className="sc-hKMtZM doPJeP exercise-step sc-fnykZs elrDSM sc-bjUoiL dcgACV preview-card is-selected"
+    >
+      <div
+        onBlur={[Function]}
+        onMouseLeave={[Function]}
+        onMouseOver={[Function]}
+        tabIndex={0}
+      >
+        <div
+          id="step-card"
+        >
+          <div
+            className="sc-jSMfEi cfhjdW step-card-header"
+          >
+            <div>
+              <h2
+                className="question-info"
+              >
+                <span>
+                  Question 1
+                </span>
+                <span
+                  className="separator"
+                >
+                  |
+                </span>
+                <span
+                  className="question-id"
+                >
+                  ID: 
+                  1@1
+                </span>
+              </h2>
+            </div>
+          </div>
+          <div
+            className="sc-gKXOVf eiZLwY"
+          >
+            <div>
+              <div
+                className="step-card-body exercise-context"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Context",
+                  }
+                }
+              />
+              <div
+                className="step-card-body exercise-stimulus"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<b>Stimulus HTML</b>",
+                  }
+                }
+              />
+              <div
+                data-test-id="student-exercise-question"
+              >
+                <div
+                  className="sc-jqUVSM kmbXEX openstax-question step-card-body"
+                  data-question-number={1}
+                  data-test-id="question"
+                >
+                  <div
+                    aria-label="Answer choices"
+                    className="answers-table"
+                    role="radiogroup"
+                  >
+                    <div
+                      className="openstax-answer"
+                    >
+                      <section
+                        className="answers-answer disabled answer-selected"
+                      >
+                        <input
+                          checked={true}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1234@5-option-0"
+                          name="1234@5-options"
+                          onChange={[Function]}
+                          type="radio"
+                        />
+                        <label
+                          className="answer-label"
+                          htmlFor="1234@5-option-0"
+                        >
+                          <span
+                            aria-label="Selected Choice A:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="A"
+                            data-test-id="answer-choice-A"
+                          />
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "True",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                    <div
+                      className="openstax-answer"
+                    >
+                      <section
+                        className="answers-answer disabled"
+                      >
+                        <input
+                          checked={false}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1234@5-option-1"
+                          name="1234@5-options"
+                          onChange={[Function]}
+                          type="radio"
+                        />
+                        <label
+                          className="answer-label"
+                          htmlFor="1234@5-option-1"
+                        >
+                          <span
+                            aria-label="Choice B:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="B"
+                            data-test-id="answer-choice-B"
+                          />
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "False",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="sc-kDDrLX eDCkPk step-card-footer"
+                >
+                  <div
+                    className="step-card-footer-inner"
+                  >
+                    <div
+                      className="points"
+                      role="status"
+                    >
+                      <span
+                        className="attempts-left"
+                      />
+                    </div>
+                    <div
+                      className="controls"
+                    >
+                      <button
+                        className="sc-ftvSup gRHhHP"
+                        data-test-id="submit-answer-btn"
+                        disabled={false}
+                        onClick={[Function]}
+                      >
+                        Submit & continue
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ExercisePreview using step data matches snapshot %description 3`] = `
+<div
+  className="sc-fEOsli eTaXVj"
+>
+  <div
+    className="sc-eCYdqJ jqafet"
+    data-task-step-id={1}
+  >
+    <div
+      className="sc-hKMtZM doPJeP exercise-step sc-fnykZs elrDSM sc-bjUoiL dcgACV preview-card"
+    >
+      <div>
+        <div
+          id="step-card"
+        >
+          <div
+            className="sc-jSMfEi cfhjdW step-card-header"
+          >
+            <div>
+              <h2
+                className="question-info"
+              >
+                <span>
+                  Question 1
+                </span>
+                <span
+                  className="separator"
+                >
+                  |
+                </span>
+                <span
+                  className="question-id"
+                >
+                  ID: 
+                  1@1
+                </span>
+              </h2>
+            </div>
+          </div>
+          <div
+            className="sc-gKXOVf eiZLwY"
+          >
+            <div>
+              <div
+                className="step-card-body exercise-context"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Context",
+                  }
+                }
+              />
+              <div
+                className="step-card-body exercise-stimulus"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<b>Stimulus HTML</b>",
+                  }
+                }
+              />
+              <div
+                data-test-id="student-exercise-question"
+              >
+                <div
+                  className="sc-jqUVSM kmbXEX openstax-question step-card-body"
+                  data-question-number={1}
+                  data-test-id="question"
+                >
+                  <div
+                    aria-label="Answer choices"
+                    className="answers-table"
+                    role="radiogroup"
+                  >
+                    <div
+                      className="openstax-answer"
+                    >
+                      <section
+                        className="answers-answer disabled answer-selected"
+                      >
+                        <input
+                          checked={true}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1234@5-option-0"
+                          name="1234@5-options"
+                          onChange={[Function]}
+                          type="radio"
+                        />
+                        <label
+                          className="answer-label"
+                          htmlFor="1234@5-option-0"
+                        >
+                          <span
+                            aria-label="Selected Choice A:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="A"
+                            data-test-id="answer-choice-A"
+                          />
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "True",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                    <div
+                      className="openstax-answer"
+                    >
+                      <section
+                        className="answers-answer disabled"
+                      >
+                        <input
+                          checked={false}
+                          className="answer-input-box"
+                          disabled={true}
+                          id="1234@5-option-1"
+                          name="1234@5-options"
+                          onChange={[Function]}
+                          type="radio"
+                        />
+                        <label
+                          className="answer-label"
+                          htmlFor="1234@5-option-1"
+                        >
+                          <span
+                            aria-label="Choice B:"
+                            className="answer-letter-wrapper"
+                            data-answer-choice="B"
+                            data-test-id="answer-choice-B"
+                          />
+                          <div
+                            className="answer-answer"
+                          >
+                            <span
+                              className="answer-content"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "False",
+                                }
+                              }
+                            />
+                          </div>
+                        </label>
+                      </section>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="sc-kDDrLX eDCkPk step-card-footer"
+                >
+                  <div
+                    className="step-card-footer-inner"
+                  >
+                    <div
+                      className="points"
+                      role="status"
+                    >
+                      <span
+                        className="attempts-left"
+                      />
+                    </div>
+                    <div
+                      className="controls"
+                    >
+                      <button
+                        className="sc-ftvSup gRHhHP"
+                        data-test-id="submit-answer-btn"
+                        disabled={false}
+                        onClick={[Function]}
+                      >
+                        Submit & continue
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap b/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
index 4e23af6f..8f6ff4db 100644
--- a/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
+++ b/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`ExerciseQuestion matches snapshot 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf eRmTaj openstax-question step-card-body"
+    className="sc-dkzDqf ksHPTL openstax-question step-card-body"
     data-question-number={1}
     data-test-id="question"
   >
@@ -145,7 +145,7 @@ exports[`ExerciseQuestion renders Re-submit button 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf eRmTaj openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf ksHPTL openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -292,7 +292,7 @@ exports[`ExerciseQuestion renders Save button 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf eRmTaj openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf ksHPTL openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -439,7 +439,7 @@ exports[`ExerciseQuestion renders Submit & continue button 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf eRmTaj openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf ksHPTL openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -586,7 +586,7 @@ exports[`ExerciseQuestion renders all attempts remaining 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf eRmTaj openstax-question step-card-body"
+    className="sc-dkzDqf ksHPTL openstax-question step-card-body"
     data-question-number={1}
     data-test-id="question"
   >
@@ -733,7 +733,7 @@ exports[`ExerciseQuestion renders continue button (unused?) 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf eRmTaj openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf ksHPTL openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -879,7 +879,7 @@ exports[`ExerciseQuestion renders detailed solution and published comments 1`] =
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf eRmTaj openstax-question step-card-body has-correct-answer has-incorrect-answer"
+    className="sc-dkzDqf ksHPTL openstax-question step-card-body has-correct-answer has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -1050,7 +1050,7 @@ exports[`ExerciseQuestion renders free response 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf eRmTaj openstax-question step-card-body"
+    className="sc-dkzDqf ksHPTL openstax-question step-card-body"
     data-question-number={1}
     data-test-id="question"
   >
@@ -1195,7 +1195,7 @@ exports[`ExerciseQuestion renders no attempts remaining 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf eRmTaj openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf ksHPTL openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -1341,7 +1341,7 @@ exports[`ExerciseQuestion renders some attempts remaining 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf eRmTaj openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf ksHPTL openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
diff --git a/src/components/__snapshots__/IncludeRemoveQuestion.spec.tsx.snap b/src/components/__snapshots__/IncludeRemoveQuestion.spec.tsx.snap
index e1d396ac..3e3022ea 100644
--- a/src/components/__snapshots__/IncludeRemoveQuestion.spec.tsx.snap
+++ b/src/components/__snapshots__/IncludeRemoveQuestion.spec.tsx.snap
@@ -34,6 +34,19 @@ exports[`IncludeRemoveQuestion matches snapshot 1`] = `
   <button
     aria-label="details"
     className="sc-gsnTZi gmAXwu details"
+    onClick={
+      [MockFunction] {
+        "calls": Array [
+          Array [],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
   >
     <svg
       aria-hidden="true"
@@ -93,6 +106,19 @@ exports[`IncludeRemoveQuestion matches snapshot 2`] = `
   <button
     aria-label="details"
     className="sc-gsnTZi gmAXwu details"
+    onClick={
+      [MockFunction] {
+        "calls": Array [
+          Array [],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
   >
     <svg
       aria-hidden="true"
diff --git a/src/components/__snapshots__/Question.spec.tsx.snap b/src/components/__snapshots__/Question.spec.tsx.snap
index 5b9f84c2..483d4412 100644
--- a/src/components/__snapshots__/Question.spec.tsx.snap
+++ b/src/components/__snapshots__/Question.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Question defaults QuestionHtml html 1`] = `
 <div
-  className="sc-gsnTZi gkbTrE openstax-question"
+  className="sc-gsnTZi iZtJmc openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -106,7 +106,7 @@ exports[`Question defaults QuestionHtml html 1`] = `
 
 exports[`Question defaults collaborator_solutions 1`] = `
 <div
-  className="sc-gsnTZi gkbTrE openstax-question"
+  className="sc-gsnTZi iZtJmc openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -210,7 +210,7 @@ exports[`Question defaults collaborator_solutions 1`] = `
 
 exports[`Question defaults formats 1`] = `
 <div
-  className="sc-gsnTZi gkbTrE openstax-question"
+  className="sc-gsnTZi iZtJmc openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -323,7 +323,7 @@ exports[`Question defaults formats 1`] = `
 
 exports[`Question matches snapshot 1`] = `
 <div
-  className="sc-gsnTZi gkbTrE openstax-question"
+  className="sc-gsnTZi iZtJmc openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -427,7 +427,7 @@ exports[`Question matches snapshot 1`] = `
 
 exports[`Question renders exercise uid 1`] = `
 <div
-  className="sc-gsnTZi gkbTrE openstax-question"
+  className="sc-gsnTZi iZtJmc openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -536,7 +536,7 @@ exports[`Question renders exercise uid 1`] = `
 
 exports[`Question renders formats 1`] = `
 <div
-  className="sc-gsnTZi gkbTrE openstax-question"
+  className="sc-gsnTZi iZtJmc openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -652,7 +652,7 @@ exports[`Question renders formats 1`] = `
 
 exports[`Question renders solutions 1`] = `
 <div
-  className="sc-gsnTZi gkbTrE openstax-question"
+  className="sc-gsnTZi iZtJmc openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
diff --git a/src/theme.ts b/src/theme.ts
index 5231ec61..bd010171 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -160,7 +160,7 @@ export const mixins = {
     .answer-letter-wrapper::before {
       color: ${invertBubble ? '#fff' : color};
       border-color: ${color};
-      ${invertBubble ? `background-color: ${color};` : null}
+      ${invertBubble ? `background-color: ${color} !important;` : null}
     }
   `,
   answerChecked: () => mixins.answerColor(colors.answer.checked, true),