diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js
index 3f2b2f42d3..9afd337ef2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js
@@ -94,7 +94,7 @@ const clickClose = async assessmentItemWrapper => {
 
 const clickEdit = async assessmentItemWrapper => {
   await assessmentItemWrapper
-    .findComponent(`[data-test="toolbarIcon-${AssessmentItemToolbarActions.EDIT_ITEM}"]`)
+    .findComponent(`[data-test="toolbarMenuItem-${AssessmentItemToolbarActions.EDIT_ITEM}"]`)
     .trigger('click');
 };
 
@@ -210,6 +210,15 @@ describe('AssessmentEditor', () => {
     expect(wrapper.findComponent('[data-test="showAnswersCheckbox"]').exists()).toBe(true);
   });
 
+  it("wraps 'Show answers' checkbox in a page container", () => {
+    expect(wrapper.find('.show-answers-container').exists()).toBe(true);
+  });
+
+  it('renders question card headers', () => {
+    expect(wrapper.html()).toContain('Question 1 of 4 — Numeric input');
+    expect(wrapper.html()).toContain('Question 2 of 4 — Single choice');
+  });
+
   it("doesn't render answers preview by default", () => {
     const items = getItems(wrapper);
 
@@ -233,32 +242,36 @@ describe('AssessmentEditor', () => {
   it('opens an item on item click', async () => {
     const items = getItems(wrapper);
     await items.at(1).trigger('click');
+    const updatedItems = getItems(wrapper);
 
-    expect(isItemOpen(items.at(0))).toBe(false);
-    expect(isItemOpen(items.at(1))).toBe(true);
-    expect(isItemOpen(items.at(2))).toBe(false);
-    expect(isItemOpen(items.at(3))).toBe(false);
+    expect(isItemOpen(updatedItems.at(0))).toBe(false);
+    expect(isItemOpen(updatedItems.at(1))).toBe(true);
+    expect(isItemOpen(updatedItems.at(2))).toBe(false);
+    expect(isItemOpen(updatedItems.at(3))).toBe(false);
   });
 
-  it('opens an item on toolbar edit icon click', async () => {
+  it('opens an item on toolbar edit menu click', async () => {
     const items = getItems(wrapper);
     await clickEdit(items.at(1));
+    const updatedItems = getItems(wrapper);
 
-    expect(isItemOpen(items.at(0))).toBe(false);
-    expect(isItemOpen(items.at(1))).toBe(true);
-    expect(isItemOpen(items.at(2))).toBe(false);
-    expect(isItemOpen(items.at(3))).toBe(false);
+    expect(isItemOpen(updatedItems.at(0))).toBe(false);
+    expect(isItemOpen(updatedItems.at(1))).toBe(true);
+    expect(isItemOpen(updatedItems.at(2))).toBe(false);
+    expect(isItemOpen(updatedItems.at(3))).toBe(false);
   });
 
   it('closes an item on close button click', async () => {
     // open an item at first
     const items = getItems(wrapper);
     await items.at(1).trigger('click');
-    expect(isItemOpen(items.at(1))).toBe(true);
+    let updatedItems = getItems(wrapper);
+    expect(isItemOpen(updatedItems.at(1))).toBe(true);
 
     // now close it
-    await clickClose(items.at(1));
-    expect(isItemOpen(items.at(1))).toBe(false);
+    await clickClose(updatedItems.at(1));
+    updatedItems = getItems(wrapper);
+    expect(isItemOpen(updatedItems.at(1))).toBe(false);
   });
 
   describe('on "Delete" click', () => {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
index c1bd5257e0..e2c547a5d1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
@@ -2,72 +2,43 @@
 
   <VContainer fluid>
     <template v-if="sortedItems && sortedItems.length">
-      <Checkbox
-        v-model="displayAnswersPreview"
-        :label="$tr('showAnswers')"
-        class="mb-4"
-        data-test="showAnswersCheckbox"
-        style="font-size: 16px"
-      />
+      <KPageContainer
+        class="show-answers-container"
+        :topMargin="0"
+      >
+        <Checkbox
+          v-model="displayAnswersPreview"
+          :label="$tr('showAnswers')"
+          class="ma-0"
+          data-test="showAnswersCheckbox"
+          style="font-size: 16px"
+        />
+      </KPageContainer>
 
       <transition-group
         name="list-complete"
         tag="div"
       >
-        <VCard
-          v-for="(item, idx) in sortedItems"
-          ref="questionCardRef"
-          :key="`question-${item.assessment_id}`"
-          pa-1
-          class="elevation-4 list-complete-item"
-          :class="itemClasses(item)"
-          data-test="item"
-          @click="onItemClick($event, item)"
-        >
-          <VCardText>
-            <VLayout align-start>
-              <VFlex
-                :style="{ 'margin-right': '1.5rem' }"
-                shrink
-                mt-2
-              >
-                {{ idx + 1 }}
-              </VFlex>
-
-              <VFlex
-                v-if="!isItemActive(item)"
-                xs10
-              >
-                <AssessmentItemPreview
-                  :item="item"
-                  :detailed="displayAnswersPreview"
-                />
-              </VFlex>
-
-              <VFlex
-                v-else
-                xs11
-              >
-                <AssessmentItemEditor
-                  :item="item"
-                  :errors="itemErrors(item)"
-                  :openDialog="openDialog"
-                  :nodeId="nodeId"
-                  data-test="editor"
-                  @update="onItemUpdate"
-                  @close="closeActiveItem"
-                />
-              </VFlex>
-
-              <VSpacer />
-
-              <VLayout
-                align-center
-                class="toolbar"
-              >
-                <VFlex
-                  v-if="!isItemActive(item) && !isItemValid(item)"
-                  mr-2
+        <template v-for="(item, idx) in sortedItems">
+          <AssessmentItemPreview
+            v-if="!isItemActive(item)"
+            ref="questionCardRef"
+            :key="`question-preview-${item.assessment_id}`"
+            :item="item"
+            :detailed="displayAnswersPreview"
+            :questionIndex="idx"
+            :questionCount="sortedItems.length"
+            renderCard
+            class="list-complete-item"
+            :class="itemClasses(item)"
+            data-test="item"
+            @click.native="onItemClick($event, item)"
+          >
+            <template #actions>
+              <div class="question-card-actions toolbar">
+                <div
+                  v-if="!isItemValid(item)"
+                  class="incomplete-indicator"
                 >
                   <template v-if="$vuetify.breakpoint.lgAndUp">
                     <Icon icon="error" />
@@ -88,38 +59,78 @@
                       {{ $tr('incompleteItemIndicatorLabel') }}
                     </KTooltip>
                   </template>
-                </VFlex>
-
-                <VFlex>
-                  <AssessmentItemToolbar
-                    :iconActionsConfig="itemToolbarIconActions(item)"
-                    :displayMenu="true"
-                    :menuActionsConfig="itemToolbarMenuActions"
-                    :canEdit="!isPerseusItem(item)"
-                    :canMoveUp="!isItemFirst(item)"
-                    :canMoveDown="!isItemLast(item)"
-                    :collapse="!$vuetify.breakpoint.mdAndUp"
-                    :itemLabel="$tr('toolbarItemLabel')"
-                    analyticsLabel="Question"
-                    @click="onItemToolbarClick($event, item)"
-                  />
-                </VFlex>
-              </VLayout>
-            </VLayout>
-
-            <VLayout
-              v-if="isItemActive(item)"
-              justify-end
-            >
+                </div>
+
+                <AssessmentItemToolbar
+                  :iconActionsConfig="itemToolbarIconActions()"
+                  :displayMenu="true"
+                  :menuActionsConfig="itemToolbarMenuActions(item)"
+                  :canEdit="!isPerseusItem(item)"
+                  :canMoveUp="!isItemFirst(item)"
+                  :canMoveDown="!isItemLast(item)"
+                  :collapse="!$vuetify.breakpoint.mdAndUp"
+                  :itemLabel="$tr('toolbarItemLabel')"
+                  analyticsLabel="Question"
+                  @click="onItemToolbarClick($event, item)"
+                />
+              </div>
+            </template>
+          </AssessmentItemPreview>
+
+          <KPageContainer
+            v-else
+            ref="questionCardRef"
+            :key="`question-editor-${item.assessment_id}`"
+            noPadding
+            :topMargin="0"
+            class="list-complete-item question-card"
+            :class="itemClasses(item)"
+            data-test="item"
+            @click.native="onItemClick($event, item)"
+          >
+            <div class="question-card-header">
+              <h3 class="question-card-title">
+                {{ questionNumberLabel(idx) }}
+              </h3>
+
+              <div class="question-card-actions toolbar">
+                <AssessmentItemToolbar
+                  :iconActionsConfig="itemToolbarIconActions()"
+                  :displayMenu="true"
+                  :menuActionsConfig="itemToolbarMenuActions(item)"
+                  :canEdit="!isPerseusItem(item)"
+                  :canMoveUp="!isItemFirst(item)"
+                  :canMoveDown="!isItemLast(item)"
+                  :collapse="!$vuetify.breakpoint.mdAndUp"
+                  :itemLabel="$tr('toolbarItemLabel')"
+                  analyticsLabel="Question"
+                  @click="onItemToolbarClick($event, item)"
+                />
+              </div>
+            </div>
+
+            <div class="question-card-body">
+              <AssessmentItemEditor
+                :item="item"
+                :errors="itemErrors(item)"
+                :openDialog="openDialog"
+                :nodeId="nodeId"
+                data-test="editor"
+                @update="onItemUpdate"
+                @close="closeActiveItem"
+              />
+            </div>
+
+            <div class="question-card-footer">
               <KButton
                 :text="$tr('closeBtnLabel')"
                 class="close-item-btn"
                 data-test="closeBtn"
                 @click="closeActiveItem"
               />
-            </VLayout>
-          </VCardText>
-        </VCard>
+            </div>
+          </KPageContainer>
+        </template>
       </transition-group>
     </template>
 
@@ -204,11 +215,6 @@
       return {
         activeItem: null,
         displayAnswersPreview: false,
-        itemToolbarMenuActions: [
-          AssessmentItemToolbarActions.ADD_ITEM_ABOVE,
-          AssessmentItemToolbarActions.ADD_ITEM_BELOW,
-          AssessmentItemToolbarActions.DELETE_ITEM,
-        ],
       };
     },
     computed: {
@@ -247,6 +253,12 @@
       itemIdx(item) {
         return this.sortedItems.findIndex(i => areItemsEqual(i, item));
       },
+      questionNumberLabel(idx) {
+        return this.$tr('questionNumberLabel', {
+          number: idx + 1,
+          total: this.sortedItems.length,
+        });
+      },
       openItem(item) {
         if (!this.isPerseusItem(item)) {
           this.closeActiveItem();
@@ -293,14 +305,21 @@
 
         return classes;
       },
-      itemToolbarIconActions(item) {
-        const actions = [
+      itemToolbarIconActions() {
+        return [
           [AssessmentItemToolbarActions.MOVE_ITEM_UP, { collapse: true }],
           [AssessmentItemToolbarActions.MOVE_ITEM_DOWN, { collapse: true }],
         ];
+      },
+      itemToolbarMenuActions(item) {
+        const actions = [
+          AssessmentItemToolbarActions.ADD_ITEM_ABOVE,
+          AssessmentItemToolbarActions.ADD_ITEM_BELOW,
+          AssessmentItemToolbarActions.DELETE_ITEM,
+        ];
 
-        if (!this.isItemActive(item)) {
-          actions.unshift([AssessmentItemToolbarActions.EDIT_ITEM, { collapse: false }]);
+        if (!this.isItemActive(item) && !this.isPerseusItem(item)) {
+          actions.unshift(AssessmentItemToolbarActions.EDIT_ITEM);
         }
 
         return actions;
@@ -459,6 +478,7 @@
       closeBtnLabel: 'Close',
       newQuestionBtnLabel: 'New question',
       showAnswers: 'Show answers',
+      questionNumberLabel: 'Question {number} of {total}',
     },
   };
 
@@ -467,21 +487,53 @@
 
 <style lang="scss" scoped>
 
-  .item {
+  .show-answers-container,
+  .question-card {
+    margin-bottom: 16px;
+  }
+
+  .question-card {
     position: relative;
     min-height: 75px;
-    margin: 8px -4px;
-
-    .toolbar {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-    }
+    padding: 0;
 
     &.closed {
-      margin: 0 4px;
       cursor: pointer;
     }
   }
 
+  .question-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 76px;
+    padding: 16px 28px;
+    border-bottom: 1px solid var(--v-grey-lighten4);
+  }
+
+  .question-card-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .question-card-actions {
+    display: flex;
+    align-items: center;
+  }
+
+  .incomplete-indicator {
+    margin-right: 8px;
+  }
+
+  .question-card-body {
+    padding: 16px 28px 12px;
+  }
+
+  .question-card-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 28px 20px;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.spec.js
index 157e6a4fc6..bd7a4ac282 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.spec.js
@@ -38,16 +38,15 @@ const updateQuestion = async (wrapper, newQuestionText) => {
 };
 
 const selectKind = async (wrapper, kind) => {
-  const input = wrapper.findComponent('[data-test="kindSelect"]');
-  await input.setValue(kind);
-  await input.trigger('input', kind);
+  wrapper.vm.onKindUpdate(kind);
+  await wrapper.vm.$nextTick();
 };
 
 describe('AssessmentItemEditor', () => {
   let wrapper;
 
   it('smoke test', () => {
-    const wrapper = shallowMount(AssessmentItemEditor);
+    const wrapper = shallowMount(AssessmentItemEditor, { store });
 
     expect(wrapper.exists()).toBe(true);
   });
@@ -73,6 +72,19 @@ describe('AssessmentItemEditor', () => {
     expect(wrapper.findComponent({ name: 'HintsEditor' }).exists()).toBe(true);
   });
 
+  it('renders the type label and hints divider', () => {
+    wrapper = mount(AssessmentItemEditor, {
+      store,
+      propsData: {
+        item: ITEM,
+      },
+      listeners,
+    });
+
+    expect(wrapper.find('.field-label').text()).toBe('Type');
+    expect(wrapper.find('.hints-divider').exists()).toBe(true);
+  });
+
   describe('on question text update', () => {
     beforeEach(async () => {
       wrapper = mount(AssessmentItemEditor, {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
index 3bf4d09799..ebea781e4b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -2,25 +2,23 @@
 
   <div>
     <VLayout>
-      <DropdownWrapper
-        component="VFlex"
+      <VFlex
         xs7
         lg5
+        class="kind-select-container"
       >
-        <template #default="{ attach, menuProps }">
-          <VSelect
-            :key="kindSelectKey"
-            :items="kindSelectItems"
-            :value="kind"
-            :label="$tr('questionTypeLabel')"
-            data-test="kindSelect"
-            :menu-props="menuProps"
-            :attach="attach"
-            box
-            @input="onKindUpdate"
-          />
-        </template>
-      </DropdownWrapper>
+        <div class="field-label">
+          {{ $tr('typeLabel') }}
+        </div>
+        <KSelect
+          :key="kindSelectKey"
+          v-model="selectedKind"
+          :options="kindSelectItems"
+          :label="$tr('questionTypeLabel')"
+          class="kind-select"
+          data-test="kindSelect"
+        />
+      </VFlex>
     </VLayout>
 
     <VLayout>
@@ -41,6 +39,7 @@
               v-if="isQuestionOpen"
               v-model="question"
               mode="edit"
+              class="question-editor"
               :autofocus="shouldAutofocusQuestion"
               :imageProcessor="EditorImageProcessor"
               @update="onQuestionUpdate"
@@ -104,8 +103,9 @@
           @close="closeAnswer"
         />
 
+        <VDivider class="hints-divider" />
+
         <HintsEditor
-          class="mt-4"
           :hints="hints"
           :openHintIdx="openHintIdx"
           @update="onHintsUpdate"
@@ -136,13 +136,11 @@
     FeatureFlagKeys,
   } from 'shared/constants';
   import ErrorList from 'shared/views/ErrorList/ErrorList';
-  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
   export default {
     name: 'AssessmentItemEditor',
     components: {
-      DropdownWrapper,
       ErrorList,
       AnswersEditor,
       HintsEditor,
@@ -234,19 +232,19 @@
         const items = [
           {
             value: AssessmentItemTypes.SINGLE_SELECTION,
-            text: translator.$tr(AssessmentItemTypeLabels[AssessmentItemTypes.SINGLE_SELECTION]),
+            label: translator.$tr(AssessmentItemTypeLabels[AssessmentItemTypes.SINGLE_SELECTION]),
           },
           {
             value: AssessmentItemTypes.MULTIPLE_SELECTION,
-            text: translator.$tr(AssessmentItemTypeLabels[AssessmentItemTypes.MULTIPLE_SELECTION]),
+            label: translator.$tr(AssessmentItemTypeLabels[AssessmentItemTypes.MULTIPLE_SELECTION]),
           },
           {
             value: AssessmentItemTypes.INPUT_QUESTION,
-            text: translator.$tr(AssessmentItemTypeLabels[AssessmentItemTypes.INPUT_QUESTION]),
+            label: translator.$tr(AssessmentItemTypeLabels[AssessmentItemTypes.INPUT_QUESTION]),
           },
           {
             value: AssessmentItemTypes.TRUE_FALSE,
-            text: translator.$tr(AssessmentItemTypeLabels[AssessmentItemTypes.TRUE_FALSE]),
+            label: translator.$tr(AssessmentItemTypeLabels[AssessmentItemTypes.TRUE_FALSE]),
           },
         ];
 
@@ -256,12 +254,27 @@
         ) {
           items.push({
             value: AssessmentItemTypes.FREE_RESPONSE,
-            text: translator.$tr(AssessmentItemTypeLabels[AssessmentItemTypes.FREE_RESPONSE]),
+            label: translator.$tr(AssessmentItemTypeLabels[AssessmentItemTypes.FREE_RESPONSE]),
           });
         }
 
         return items;
       },
+      selectedKind: {
+        get() {
+          return (
+            this.kindSelectItems.find(option => option.value === this.kind) ||
+            this.kindSelectItems[0]
+          );
+        },
+        set(option) {
+          const newKind = option && option.value ? option.value : option;
+          if (!newKind) {
+            return;
+          }
+          this.onKindUpdate(newKind);
+        },
+      },
       answers() {
         if (!this.item || !this.item.answers) {
           return [];
@@ -344,7 +357,7 @@
           answers: newAnswers,
         });
       },
-      // question type VSelect needs to be rerended when confirmation dialog
+      // question type KSelect needs to be rerendered when confirmation dialog
       // cancelled to display a correct, previous, value that has changed
       // in the select but has not been changed in data storage actually
       // because of cancel action
@@ -460,6 +473,7 @@
       },
     },
     $trs: {
+      typeLabel: 'Type',
       questionTypeLabel: 'Response type',
       questionLabel: 'Question',
       dialogTitle: 'Changing question type',
@@ -480,8 +494,34 @@
 
 <style lang="scss" scoped>
 
+  .kind-select-container {
+    margin-bottom: 16px;
+  }
+
+  .field-label {
+    margin-bottom: 8px;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .kind-select {
+    max-width: 440px;
+  }
+
+  .question-editor {
+    min-height: 112px;
+  }
+
+  ::v-deep .question-editor.editor-container {
+    min-height: 112px;
+  }
+
+  .hints-divider {
+    margin: 16px -28px 0;
+  }
+
   .question-text {
-    border: 1px solid #b4b4b4;
+    border: 1px solid var(--v-grey-lighten4);
     transition: 0.7s;
 
     &:hover {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js
index f05c41a1b7..33abe645d9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js
@@ -24,6 +24,9 @@ describe('AssessmentItemPreview', () => {
             { hint: 'Hint 2', order: 2 },
           ],
         },
+        renderCard: true,
+        questionIndex: 0,
+        questionCount: 3,
       },
     });
   });
@@ -38,6 +41,10 @@ describe('AssessmentItemPreview', () => {
     expect(questionEditor.props('value')).toBe('Question');
   });
 
+  it('renders question number and type header', () => {
+    expect(wrapper.html()).toContain('Question 1 of 3 — Single choice');
+  });
+
   it("doesn't render answers by default", () => {
     expect(wrapper.html()).not.toContain('Answer 1');
     expect(wrapper.html()).not.toContain('Answer 2');
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
index 39e903abe3..01de5227b3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
@@ -1,133 +1,153 @@
 <template>
 
-  <div>
-    <VLayout
-      align-top
-      justify-space-between
+  <component
+    :is="renderCard ? 'KPageContainer' : 'div'"
+    v-bind="cardContainerProps"
+    :class="{ 'question-card': renderCard }"
+  >
+    <div
+      v-if="renderCard"
+      class="question-card-header"
     >
-      <VFlex mt-2>
-        <div class="caption grey--text mb-2">
-          {{ kindLabel }}
-        </div>
-        <TipTapEditor
-          v-model="question"
-          mode="view"
-          tabindex="-1"
-        />
-      </VFlex>
-    </VLayout>
-
-    <VLayout
-      v-if="detailed && !isPerseus"
-      mt-3
-      class="item-answers-preview"
-      data-test="item-answers-preview"
-    >
-      <VFlex>
-        <div class="caption grey--text mb-2">
-          {{ $tr('answersLabel') }}
-        </div>
-
-        <div v-if="!answers || !answers.length">
-          {{ $tr('noAnswersPlaceholder') }}
-        </div>
-
-        <template v-else>
-          <template v-if="isSingleSelection || isTrueFalse">
-            <VRadioGroup v-model="correctAnswersIndices">
-              <VRadio
+      <h3 class="question-card-title">
+        {{ questionNumberAndTypeLabel }}
+      </h3>
+
+      <slot name="actions"></slot>
+    </div>
+
+    <div :class="{ 'question-card-body': renderCard }">
+      <VLayout
+        align-top
+        justify-space-between
+      >
+        <VFlex :class="{ 'mt-2': !renderCard }">
+          <div
+            v-if="!renderCard"
+            class="caption grey--text mb-2"
+          >
+            {{ kindLabel }}
+          </div>
+          <TipTapEditor
+            v-model="question"
+            mode="view"
+            tabindex="-1"
+          />
+        </VFlex>
+      </VLayout>
+
+      <VLayout
+        v-if="detailed && !isPerseus"
+        mt-3
+        class="item-answers-preview"
+        data-test="item-answers-preview"
+      >
+        <VFlex>
+          <div class="caption grey--text mb-2">
+            {{ $tr('answersLabel') }}
+          </div>
+
+          <div v-if="!answers || !answers.length">
+            {{ $tr('noAnswersPlaceholder') }}
+          </div>
+
+          <template v-else>
+            <template v-if="isSingleSelection || isTrueFalse">
+              <VRadioGroup v-model="correctAnswersIndices">
+                <VRadio
+                  v-for="(answer, idx) in answers"
+                  :key="idx"
+                  :value="idx"
+                  readonly
+                >
+                  <template #label>
+                    <div class="px-2">
+                      <TipTapEditor
+                        v-model="answer.answer"
+                        mode="view"
+                        tabindex="-1"
+                      />
+                    </div>
+                  </template>
+                </VRadio>
+              </VRadioGroup>
+            </template>
+
+            <template v-if="isMultipleSelection">
+              <Checkbox
                 v-for="(answer, idx) in answers"
                 :key="idx"
+                v-model="correctAnswersIndices"
                 :value="idx"
-                readonly
+                disabled
               >
-                <template #label>
-                  <div class="px-2">
-                    <TipTapEditor
-                      v-model="answer.answer"
-                      mode="view"
-                      tabindex="-1"
-                    />
-                  </div>
-                </template>
-              </VRadio>
-            </VRadioGroup>
-          </template>
+                <div class="px-2">
+                  <TipTapEditor
+                    v-model="answer.answer"
+                    mode="view"
+                    tabindex="-1"
+                  />
+                </div>
+              </Checkbox>
+            </template>
 
-          <template v-if="isMultipleSelection">
-            <Checkbox
-              v-for="(answer, idx) in answers"
-              :key="idx"
-              v-model="correctAnswersIndices"
-              :value="idx"
-              disabled
-            >
-              <div class="px-2">
-                <TipTapEditor
-                  v-model="answer.answer"
-                  mode="view"
-                  tabindex="-1"
-                />
-              </div>
-            </Checkbox>
+            <VList v-if="isInputQuestion">
+              <VListTile
+                v-for="(answer, idx) in answers"
+                :key="idx"
+              >
+                {{ answer.answer }}
+              </VListTile>
+            </VList>
           </template>
 
-          <VList v-if="isInputQuestion">
-            <VListTile
-              v-for="(answer, idx) in answers"
-              :key="idx"
-            >
-              {{ answer.answer }}
-            </VListTile>
-          </VList>
-        </template>
-
-        <div class="my-1">
-          <!--
+          <div class="my-1">
+            <!--
             class="hints-preview" is needed for precise click
             target detection in AssessmentView.vue
           -->
-          <div
-            v-if="hintsCount"
-            class="hints-preview"
-          >
-            <span
-              class="grey--text hints-toggle"
-              :class="{ open: areHintsOpen }"
-              data-test="hintsToggle"
-              @click="areHintsOpen = !areHintsOpen"
+            <div
+              v-if="hintsCount"
+              class="hints-preview"
             >
-              <Icon icon="chevronRight" />
-              <span>{{ hintsToggleLabel }}</span>
-            </span>
-
-            <div v-if="areHintsOpen">
-              <VLayout
-                v-for="(hint, hintIdx) in hints"
-                :key="hintIdx"
-                class="hint"
-                flat
+              <span
+                class="grey--text hints-toggle"
+                :class="{ open: areHintsOpen }"
+                data-test="hintsToggle"
+                @click="areHintsOpen = !areHintsOpen"
               >
-                <VFlex
-                  class="hint-number"
-                  shrink
+                <Icon icon="chevronRight" />
+                <span>{{ hintsToggleLabel }}</span>
+              </span>
+
+              <div v-if="areHintsOpen">
+                <VLayout
+                  v-for="(hint, hintIdx) in hints"
+                  :key="hintIdx"
+                  class="hint"
+                  flat
                 >
-                  {{ hintIdx + 1 }}
-                </VFlex>
-                <VFlex>
-                  <TipTapEditor
-                    v-model="hint.hint"
-                    mode="view"
-                    tabindex="-1"
-                  />
-                </VFlex>
-              </VLayout>
+                  <VFlex
+                    class="hint-number"
+                    shrink
+                  >
+                    {{ hintIdx + 1 }}
+                  </VFlex>
+                  <VFlex>
+                    <TipTapEditor
+                      v-model="hint.hint"
+                      mode="view"
+                      tabindex="-1"
+                    />
+                  </VFlex>
+                </VLayout>
+              </div>
             </div>
           </div>
-        </div>
-      </VFlex>
-    </VLayout>
-  </div>
+        </VFlex>
+      </VLayout>
+    </div>
+  </component>
 
 </template>
 
@@ -168,6 +188,18 @@
         type: Boolean,
         default: false,
       },
+      renderCard: {
+        type: Boolean,
+        default: false,
+      },
+      questionIndex: {
+        type: Number,
+        default: 0,
+      },
+      questionCount: {
+        type: Number,
+        default: 1,
+      },
     },
     data() {
       return {
@@ -207,8 +239,29 @@
         return sortBy(this.item.hints, 'order');
       },
       kindLabel() {
+        if (!this.kind || !AssessmentItemTypeLabels[this.kind]) {
+          return '';
+        }
+
         return translator.$tr(AssessmentItemTypeLabels[this.kind]);
       },
+      cardContainerProps() {
+        if (!this.renderCard) {
+          return {};
+        }
+
+        return {
+          noPadding: true,
+          topMargin: 0,
+        };
+      },
+      questionNumberAndTypeLabel() {
+        return this.$tr('questionNumberAndTypeLabel', {
+          number: this.questionIndex + 1,
+          total: this.questionCount,
+          type: this.kindLabel,
+        });
+      },
       isSingleSelection() {
         return this.kind === AssessmentItemTypes.SINGLE_SELECTION;
       },
@@ -242,6 +295,7 @@
     $trs: {
       answersLabel: 'Answers',
       noAnswersPlaceholder: 'Question has no answer options',
+      questionNumberAndTypeLabel: 'Question {number} of {total} — {type}',
       hintsToggleLabelHide: 'Hide hints',
       hintsToggleLabelShow: 'Show {hintsCount} {hintsCount, plural, one {hint} other {hints}}',
     },
@@ -252,6 +306,31 @@
 
 <style lang="scss" scoped>
 
+  .question-card {
+    min-height: 75px;
+    margin-bottom: 16px;
+    cursor: pointer;
+  }
+
+  .question-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 76px;
+    padding: 16px 28px;
+    border-bottom: 1px solid var(--v-grey-lighten4);
+  }
+
+  .question-card-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .question-card-body {
+    padding: 16px 28px;
+  }
+
   .hints-toggle {
     cursor: pointer;
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
index e5844856b5..f875739535 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
@@ -158,6 +158,7 @@
               :key="tabs.QUESTIONS"
               ref="questionwindow"
               :value="tabs.QUESTIONS"
+              :style="questionsTabStyles"
               lazy
             >
               <AssessmentTab :nodeId="nodeIds[0]" />
@@ -292,6 +293,15 @@
 
         return this.getAssessmentItemsCount(this.nodeIds[0]);
       },
+      questionsTabStyles() {
+        if (this.currentTab === this.tabs.QUESTIONS) {
+          return {
+            backgroundColor: this.$themePalette.grey.v_100,
+          };
+        }
+
+        return {};
+      },
       relatedResourcesCount() {
         if (!this.oneSelected) {
           return;