diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index 83fc9e2bcf..3d326dffcb 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -94,6 +94,7 @@
                         v-model="answer.answer"
                         class="editor"
                         :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
+                        minHeight="80px"
                         :imageProcessor="EditorImageProcessor"
                         @update="updateAnswerText($event, answerIdx)"
                         @minimize="emitClose"
@@ -164,6 +165,7 @@
                       v-model="answer.answer"
                       class="editor"
                       :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
+                      minHeight="80px"
                       :imageProcessor="EditorImageProcessor"
                       @update="updateAnswerText($event, answerIdx)"
                       @minimize="emitClose"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js
index 3f2b2f42d3..e908768f04 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js
@@ -92,12 +92,6 @@ const clickClose = async assessmentItemWrapper => {
   await assessmentItemWrapper.findComponent('[data-test="closeBtn"]').trigger('click');
 };
 
-const clickEdit = async assessmentItemWrapper => {
-  await assessmentItemWrapper
-    .findComponent(`[data-test="toolbarIcon-${AssessmentItemToolbarActions.EDIT_ITEM}"]`)
-    .trigger('click');
-};
-
 const clickDelete = async assessmentItemWrapper => {
   await assessmentItemWrapper
     .findComponent(`[data-test="toolbarMenuItem-${AssessmentItemToolbarActions.DELETE_ITEM}"]`)
@@ -210,6 +204,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 +236,25 @@ 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);
-  });
-
-  it('opens an item on toolbar edit icon click', async () => {
-    const items = getItems(wrapper);
-    await clickEdit(items.at(1));
-
-    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..f6ccb6c2b0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
@@ -1,125 +1,125 @@
 <template>
 
-  <VContainer fluid>
+  <VContainer
+    fluid
+    :style="containerStyle"
+  >
     <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"
+        noPadding
+      >
+        <div class="show-answers-inner">
+          <Checkbox
+            v-model="displayAnswersPreview"
+            :label="$tr('showAnswers')"
+            class="ma-0"
+            data-test="showAnswersCheckbox"
+            style="font-size: 16px"
+          />
+        </div>
+      </KPageContainer>
 
       <transition-group
         name="list-complete"
         tag="div"
       >
-        <VCard
+        <KPageContainer
           v-for="(item, idx) in sortedItems"
+          :key="itemCardKey(item)"
           ref="questionCardRef"
-          :key="`question-${item.assessment_id}`"
-          pa-1
-          class="elevation-4 list-complete-item"
+          noPadding
+          :topMargin="0"
+          class="question-card"
           :class="itemClasses(item)"
           data-test="item"
-          @click="onItemClick($event, item)"
+          @click.native="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-if="$vuetify.breakpoint.lgAndUp">
-                    <Icon icon="error" />
-                    <span class="font-weight-bold red--text">
-                      {{ $tr('incompleteItemIndicatorLabel') }}
-                    </span>
-                  </template>
-                  <template v-else>
-                    <Icon
-                      ref="incompleteError"
-                      icon="error"
-                    />
-                    <KTooltip
-                      reference="incompleteError"
-                      placement="bottom"
-                      :refs="$refs"
-                    >
-                      {{ $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)"
+          <div
+            class="question-card-header"
+            :style="{ borderBottom: `1px solid ${$themePalette.grey.v_200}` }"
+          >
+            <h3
+              class="question-card-title"
+              :style="{ color: $themePalette.grey.v_800 }"
+            >
+              <template v-if="isItemActive(item)">
+                {{ questionNumberLabel(idx) }}
+              </template>
+              <template v-else>
+                {{ questionNumberAndTypeLabel(item, idx) }}
+              </template>
+            </h3>
+
+            <div class="question-card-actions toolbar">
+              <div v-if="!isItemValid(item)">
+                <template v-if="$vuetify.breakpoint.lgAndUp">
+                  <Icon icon="error" />
+                  <span class="font-weight-bold red--text">
+                    {{ $tr('incompleteItemIndicatorLabel') }}
+                  </span>
+                </template>
+                <template v-else>
+                  <Icon
+                    ref="incompleteError"
+                    icon="error"
                   />
-                </VFlex>
-              </VLayout>
-            </VLayout>
+                  <KTooltip
+                    reference="incompleteError"
+                    placement="bottom"
+                    :refs="$refs"
+                  >
+                    {{ $tr('incompleteItemIndicatorLabel') }}
+                  </KTooltip>
+                </template>
+              </div>
+
+              <AssessmentItemToolbar
+                :iconActionsConfig="itemToolbarIconActions()"
+                :displayMenu="true"
+                :menuActionsConfig="itemToolbarMenuActions()"
+                :canMoveUp="!isItemFirst(item)"
+                :canMoveDown="!isItemLast(item)"
+                :collapse="!$vuetify.breakpoint.mdAndUp"
+                :itemLabel="$tr('toolbarItemLabel')"
+                analyticsLabel="Question"
+                @click="onItemToolbarClick($event, item)"
+              />
+            </div>
+          </div>
 
-            <VLayout
+          <div class="question-card-body">
+            <AssessmentItemEditor
               v-if="isItemActive(item)"
-              justify-end
-            >
-              <KButton
-                :text="$tr('closeBtnLabel')"
-                class="close-item-btn"
-                data-test="closeBtn"
-                @click="closeActiveItem"
-              />
-            </VLayout>
-          </VCardText>
-        </VCard>
+              :item="item"
+              :errors="itemErrors(item)"
+              :openDialog="openDialog"
+              :nodeId="nodeId"
+              data-test="editor"
+              @update="onItemUpdate"
+              @close="closeActiveItem"
+            />
+            <AssessmentItemPreview
+              v-else
+              :item="item"
+              :detailed="displayAnswersPreview"
+              :showTypeLabel="false"
+            />
+          </div>
+
+          <div
+            v-if="isItemActive(item)"
+            class="question-card-footer"
+          >
+            <KButton
+              :text="$tr('closeBtnLabel')"
+              class="close-item-btn"
+              data-test="closeBtn"
+              @click="closeActiveItem"
+            />
+          </div>
+        </KPageContainer>
       </transition-group>
     </template>
 
@@ -140,8 +140,9 @@
 
 <script>
 
-  import { AssessmentItemToolbarActions } from '../../constants';
+  import { AssessmentItemToolbarActions, AssessmentItemTypeLabels } from '../../constants';
   import { assessmentItemKey } from '../../utils';
+  import translator from '../../translator';
 
   import AssessmentItemToolbar from '../AssessmentItemToolbar';
   import AssessmentItemEditor from '../AssessmentItemEditor/AssessmentItemEditor';
@@ -199,16 +200,15 @@
         type: Function,
         default: () => {},
       },
+      windowIsSmall: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
         activeItem: null,
         displayAnswersPreview: false,
-        itemToolbarMenuActions: [
-          AssessmentItemToolbarActions.ADD_ITEM_ABOVE,
-          AssessmentItemToolbarActions.ADD_ITEM_BELOW,
-          AssessmentItemToolbarActions.DELETE_ITEM,
-        ],
       };
     },
     computed: {
@@ -224,6 +224,9 @@
       lastItem() {
         return this.sortedItems.length ? this.sortedItems[this.sortedItems.length - 1] : null;
       },
+      containerStyle() {
+        return this.windowIsSmall ? {} : { maxWidth: '85%', margin: '0 auto' };
+      },
     },
     watch: {
       items(newItems) {
@@ -247,6 +250,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();
@@ -266,6 +275,21 @@
       isItemActive(item) {
         return areItemsEqual(this.activeItem, item);
       },
+      itemCardKey(item) {
+        return `question-card-${item.assessment_id}`;
+      },
+      questionNumberAndTypeLabel(item, idx) {
+        const kind = item?.type || '';
+        const kindLabel =
+          kind && AssessmentItemTypeLabels[kind]
+            ? translator.$tr(AssessmentItemTypeLabels[kind])
+            : '';
+        return this.$tr('questionNumberAndTypeLabel', {
+          number: idx + 1,
+          total: this.sortedItems.length,
+          type: kindLabel,
+        });
+      },
       isPerseusItem(item) {
         return item && item.type === AssessmentItemTypes.PERSEUS_QUESTION;
       },
@@ -293,17 +317,18 @@
 
         return classes;
       },
-      itemToolbarIconActions(item) {
-        const actions = [
+      itemToolbarIconActions() {
+        return [
           [AssessmentItemToolbarActions.MOVE_ITEM_UP, { collapse: true }],
           [AssessmentItemToolbarActions.MOVE_ITEM_DOWN, { collapse: true }],
         ];
-
-        if (!this.isItemActive(item)) {
-          actions.unshift([AssessmentItemToolbarActions.EDIT_ITEM, { collapse: false }]);
-        }
-
-        return actions;
+      },
+      itemToolbarMenuActions() {
+        return [
+          AssessmentItemToolbarActions.ADD_ITEM_ABOVE,
+          AssessmentItemToolbarActions.ADD_ITEM_BELOW,
+          AssessmentItemToolbarActions.DELETE_ITEM,
+        ];
       },
       onItemUpdate(item) {
         this.$emit('updateItem', item);
@@ -459,6 +484,8 @@
       closeBtnLabel: 'Close',
       newQuestionBtnLabel: 'New question',
       showAnswers: 'Show answers',
+      questionNumberLabel: 'Question {number} of {total}',
+      questionNumberAndTypeLabel: 'Question {number} of {total} — {type}',
     },
   };
 
@@ -467,21 +494,57 @@
 
 <style lang="scss" scoped>
 
-  .item {
+  .show-answers-container,
+  .question-card {
+    margin-bottom: 16px;
+  }
+
+  .show-answers-inner {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+  }
+
+  .question-card {
+    --question-card-horizontal-padding: 20px;
+
     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;
+    padding: 12px var(--question-card-horizontal-padding);
+  }
+
+  .question-card-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .question-card-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .question-card-body {
+    min-width: 0;
+    padding: 10px var(--question-card-horizontal-padding);
+  }
+
+  .question-card-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 var(--question-card-horizontal-padding) 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..2119ec9bd8 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
@@ -2,25 +2,25 @@
 
   <div>
     <VLayout>
-      <DropdownWrapper
-        component="VFlex"
-        xs7
-        lg5
+      <div
+        class="kind-select-container"
+        style="width: 100%"
       >
-        <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"
+          :style="{ color: $themePalette.grey.v_800 }"
+        >
+          {{ $tr('typeLabel') }}
+        </div>
+        <KSelect
+          :key="kindSelectKey"
+          v-model="selectedKind"
+          :options="kindSelectItems"
+          :label="$tr('questionTypeLabel')"
+          class="kind-select"
+          data-test="kindSelect"
+        />
+      </div>
     </VLayout>
 
     <VLayout>
@@ -41,6 +41,7 @@
               v-if="isQuestionOpen"
               v-model="question"
               mode="edit"
+              minHeight="80px"
               :autofocus="shouldAutofocusQuestion"
               :imageProcessor="EditorImageProcessor"
               @update="onQuestionUpdate"
@@ -50,6 +51,7 @@
             <div
               v-else
               class="pb-3 pl-2 pr-2 pt-3 question-text"
+              :style="{ border: `1px solid ${$themePalette.grey.v_300}` }"
               data-test="questionText"
               @click="openQuestion"
             >
@@ -104,8 +106,9 @@
           @close="closeAnswer"
         />
 
+        <VDivider class="hints-divider" />
+
         <HintsEditor
-          class="mt-4"
           :hints="hints"
           :openHintIdx="openHintIdx"
           @update="onHintsUpdate"
@@ -136,13 +139,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 +235,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 +257,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?.value;
+          if (!newKind) {
+            return;
+          }
+          this.onKindUpdate(newKind);
+        },
+      },
       answers() {
         if (!this.item || !this.item.answers) {
           return [];
@@ -344,7 +360,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 +476,7 @@
       },
     },
     $trs: {
+      typeLabel: 'Type',
       questionTypeLabel: 'Response type',
       questionLabel: 'Question',
       dialogTitle: 'Changing question type',
@@ -480,8 +497,28 @@
 
 <style lang="scss" scoped>
 
+  .kind-select-container {
+    margin-bottom: 16px;
+  }
+
+  .field-label {
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .kind-select {
+    width: 100%;
+    max-width: 314px;
+  }
+
+  .hints-divider {
+    max-width: none !important;
+    // Negative margin to match the horizontal padding of the parent container
+    margin: 16px calc(-1 * var(--question-card-horizontal-padding, 20px)) 0;
+  }
+
   .question-text {
-    border: 1px solid #b4b4b4;
     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..4022762e3d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js
@@ -89,4 +89,17 @@ describe('AssessmentItemPreview', () => {
       expect(editors.at(5).props('value')).toBe('Hint 2');
     });
   });
+
+  describe('showTypeLabel property', () => {
+    it('should render type label by default', () => {
+      expect(wrapper.find('[data-test="type-label"]').exists()).toBe(true);
+    });
+
+    it('should hide type label when showTypeLabel is false', async () => {
+      await wrapper.setProps({
+        showTypeLabel: false,
+      });
+      expect(wrapper.find('[data-test="type-label"]').exists()).toBe(false);
+    });
+  });
 });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
index 39e903abe3..67e3b01b48 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue
@@ -5,8 +5,12 @@
       align-top
       justify-space-between
     >
-      <VFlex mt-2>
-        <div class="caption grey--text mb-2">
+      <VFlex>
+        <div
+          v-if="showTypeLabel"
+          class="caption grey--text mb-2"
+          data-test="type-label"
+        >
           {{ kindLabel }}
         </div>
         <TipTapEditor
@@ -84,9 +88,9 @@
 
         <div class="my-1">
           <!--
-            class="hints-preview" is needed for precise click
-            target detection in AssessmentView.vue
-          -->
+          class="hints-preview" is needed for precise click
+          target detection in AssessmentView.vue
+        -->
           <div
             v-if="hintsCount"
             class="hints-preview"
@@ -168,6 +172,10 @@
         type: Boolean,
         default: false,
       },
+      showTypeLabel: {
+        type: Boolean,
+        default: true,
+      },
     },
     data() {
       return {
@@ -207,6 +215,10 @@
         return sortBy(this.item.hints, 'order');
       },
       kindLabel() {
+        if (!this.kind || !AssessmentItemTypeLabels[this.kind]) {
+          return '';
+        }
+
         return translator.$tr(AssessmentItemTypeLabels[this.kind]);
       },
       isSingleSelection() {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
index 2cffd9536d..0b421614f8 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
@@ -1,66 +1,45 @@
 <template>
 
-  <VLayout justify-end>
-    <VFlex
-      v-for="(action, idx) in iconActions"
-      :key="`${action}-${idx}`"
-      class="toolbar-item"
-    >
-      <VTooltip
-        top
-        lazy
-      >
-        <template #activator="{ on }">
-          <VBtn
-            icon
-            :disabled="!isIconClickable(action)"
-            :data-test="`toolbarIcon-${action}`"
-            v-on="on"
-            @click="clickItem(action)"
-          >
-            <Icon
-              v-if="config[action] && config[action].icon"
-              :icon="config[action].icon"
-              style="font-size: 20px"
-              :color="iconColor(action)"
-            />
-          </VBtn>
-        </template>
-        <span>{{ config[action].label }}</span>
-      </VTooltip>
-    </VFlex>
+  <div class="assessment-item-toolbar">
+    <div class="icon-actions-wrapper">
+      <KIconButton
+        v-for="action in iconActions"
+        :key="action"
+        :icon="config[action].icon"
+        :tooltip="config[action].label"
+        :disabled="!isIconClickable(action)"
+        :color="iconColor(action)"
+        :data-test="`toolbarIcon-${action}`"
+        @click="clickItem(action)"
+      />
+    </div>
 
-    <VFlex
+    <BaseMenu
       v-if="displayMenu"
-      class="toolbar-item"
+      bottom
     >
-      <BaseMenu bottom>
-        <template #activator="{ on }">
-          <VBtn
-            icon
-            v-on="on"
-          >
-            <Icon
-              icon="optionsVertical"
-              :color="$themePalette.grey.v_800"
-            />
-          </VBtn>
-        </template>
+      <template #activator="{ on }">
+        <KIconButton
+          icon="optionsVertical"
+          :color="$themePalette.grey.v_800"
+          :tooltip="$tr('options')"
+          v-on="on"
+        />
+      </template>
 
-        <VList
-          v-for="(action, idx) in menuActions"
-          :key="idx"
+      <VList
+        v-for="(action, idx) in menuActions"
+        :key="idx"
+      >
+        <VListTile
+          :data-test="`toolbarMenuItem-${action}`"
+          @click="clickItem(action)"
         >
-          <VListTile
-            :data-test="`toolbarMenuItem-${action}`"
-            @click="clickItem(action)"
-          >
-            <VListTileTitle>{{ config[action].label }}</VListTileTitle>
-          </VListTile>
-        </VList>
-      </BaseMenu>
-    </VFlex>
-  </VLayout>
+          <VListTileTitle>{{ config[action].label }}</VListTileTitle>
+        </VListTile>
+      </VList>
+    </BaseMenu>
+  </div>
 
 </template>
 
@@ -290,9 +269,6 @@
       },
       clickItem(action) {
         this.$emit('click', action);
-        document.querySelectorAll('.v-tooltip__content').forEach(tooltip => {
-          tooltip.style.display = 'none';
-        });
         this.trackAnalyticsEvent(action);
       },
       trackAnalyticsEvent(action) {
@@ -311,6 +287,7 @@
       toolbarLabelDelete: 'Delete',
       toolbarLabelAddAbove: 'Add {itemLabel} above',
       toolbarLabelAddBelow: 'Add {itemLabel} below',
+      options: 'Options',
     },
   };
 
@@ -319,8 +296,17 @@
 
 <style lang="scss" scoped>
 
-  .toolbar-item {
-    max-width: 50px;
+  .assessment-item-toolbar {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .icon-actions-wrapper {
+    display: flex;
+    gap: 16px;
+    align-items: center;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentTab/AssessmentTab.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentTab/AssessmentTab.vue
index 7074264d9c..a8fbc846e2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentTab/AssessmentTab.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentTab/AssessmentTab.vue
@@ -1,15 +1,22 @@
 <template>
 
   <div>
-    <VAlert
-      :value="!areAssessmentItemsValid"
-      icon="error"
-      type="error"
-      outline
-      data-test="alert"
+    <VContainer
+      v-show="!areAssessmentItemsValid"
+      fluid
+      class="pb-0"
+      :style="alertStyle"
     >
-      <span class="font-weight-bold red--text">{{ invalidItemsErrorMessage }}</span>
-    </VAlert>
+      <VAlert
+        :value="true"
+        icon="error"
+        type="error"
+        outline
+        data-test="alert"
+      >
+        <span class="font-weight-bold red--text">{{ invalidItemsErrorMessage }}</span>
+      </VAlert>
+    </VContainer>
 
     <AssessmentEditor
       ref="assessmentEditor"
@@ -17,6 +24,7 @@
       :items="assessmentItems"
       :itemsErrors="assessmentItemsErrors"
       :openDialog="openDialog"
+      :windowIsSmall="windowIsSmall"
       @addItem="onAddAssessmentItem"
       @updateItem="onUpdateAssessmentItem"
       @updateItems="onUpdateAssessmentItems"
@@ -41,6 +49,7 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
   import AssessmentEditor from '../AssessmentEditor/AssessmentEditor';
 
@@ -49,6 +58,10 @@
     components: {
       AssessmentEditor,
     },
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { windowIsSmall };
+    },
     props: {
       nodeId: {
         type: String,
@@ -75,6 +88,9 @@
         'getAssessmentItemsAreValid',
         'getInvalidAssessmentItemsCount',
       ]),
+      alertStyle() {
+        return this.windowIsSmall ? {} : { maxWidth: '85%', margin: '0 auto' };
+      },
       assessmentItems() {
         return this.getAssessmentItems(this.nodeId);
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
index e5844856b5..398e2c2031 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
@@ -114,7 +114,10 @@
             </VTab>
           </Tabs>
         </ToolBar>
-        <VContainer fluid>
+        <VContainer
+          fluid
+          :style="questionsTabStyles"
+        >
           <VTabsItems v-model="currentTab">
             <VTabItem
               :key="tabs.DETAILS"
@@ -292,6 +295,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;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index 70a2b6b77c..e97352648d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -4,6 +4,7 @@
     ref="editorContainer"
     class="editor-container"
     :class="{ 'view-mode': editorMode === 'view' }"
+    :style="minHeight && editorMode !== 'view' ? { minHeight } : {}"
     :tabindex="tabindex"
     role="textbox"
     :aria-label="editorMode === 'edit' ? TipTapEditorLabel$() : TipTapViewerLabel$()"
@@ -303,6 +304,10 @@
         type: Object,
         default: () => ({}),
       },
+      minHeight: {
+        type: String,
+        default: null,
+      },
     },
     emits: ['update', 'minimize', 'open-editor'],
   });