diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
index 95aed56196..b01d127bf7 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
@@ -1,148 +1,129 @@
 <template>
 
-  <VDialog
-    v-model="show"
-    width="600"
-    max-width="100vw"
-    persistent
+  <KModal
+    v-if="show"
+    :size="600"
+    title="Send email"
+    submitText="Send email"
+    cancelText="Cancel"
+    data-test="email-dialog"
+    @submit="submit"
+    @cancel="cancel"
   >
-    <VCard class="px-2 py-3">
-      <VCardTitle class="font-weight-bold pb-0 title"> Send email </VCardTitle>
-      <VForm
-        ref="form"
-        lazy-validation
-        @submit.prevent="emailHandler"
-      >
-        <VCardText class="pb-4 pt-3">
-          <VLayout
-            align-top
-            row
-            class="mb-2"
-          >
-            <VFlex
-              shrink
-              class="pa-2"
-            >
-              From:
-            </VFlex>
-            <VFlex>
-              <VChip small>
-                {{ senderEmail }}
-              </VChip>
-            </VFlex>
-          </VLayout>
-          <VLayout
-            align-top
-            row
+    <form
+      ref="form"
+      @submit.prevent="onSubmit"
+    >
+      <div class="form-container">
+        <div class="form-row form-row-margin">
+          <div class="form-label">From:</div>
+          <div class="form-content">
+            <StudioChip :text="senderEmail" />
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-label">To:</div>
+          <div
+            style="flex-grow: 1"
+            data-test="to-line"
           >
-            <VFlex
-              shrink
-              class="pa-2"
+            <ExpandableList
+              v-if="initialRecipients"
+              :items="users"
+              :max="4"
+              inline
+              :delimit="false"
             >
-              To:
-            </VFlex>
-            <VFlex data-test="to-line">
-              <ExpandableList
-                v-if="initialRecipients"
-                :items="users"
-                :max="4"
-                inline
-                :delimit="false"
-              >
-                <template #item="{ item }">
-                  <VTooltip
-                    bottom
-                    lazy
+              <template #item="{ item }">
+                <div class="chip-container">
+                  <KTooltip
+                    :refs="getRefs()"
+                    :reference="`tooltip-${item.id}`"
+                    placement="bottom"
                   >
-                    <template #activator="{ on }">
-                      <VChip
-                        small
-                        :close="recipients.length > 1"
-                        data-test="remove"
-                        v-on="on"
-                        @input="remove(item.id)"
-                      >
-                        <div style="max-width: 72px">
-                          <div class="text-truncate">
-                            {{ item.name }}
-                          </div>
-                        </div>
-                      </VChip>
-                    </template>
                     <span>{{ item.name }} &lt;{{ item.email }}&gt;</span>
-                  </VTooltip>
-                </template>
-              </ExpandableList>
-              <VChip
-                v-else-if="usersFilterFetchQueryParams"
-                small
-              >
-                {{ searchString }}
-              </VChip>
-            </VFlex>
-          </VLayout>
-          <VTextField
-            v-model="subject"
-            class="mt-4"
-            box
-            label="Subject line"
-            required
-            :rules="requiredRules"
-          />
-          <div class="caption grey--text">Add placeholder to message</div>
-          <div class="mb-1">
-            <VBtn
-              v-for="placeholder in placeholders"
-              :key="`placeholder-${placeholder.label}`"
-              small
-              round
-              depressed
-              color="grey lighten-4"
-              style="text-transform: none"
-              @click="addPlaceholder(placeholder.placeholder)"
-            >
-              {{ placeholder.label }}
-            </VBtn>
+                  </KTooltip>
+                  <StudioChip
+                    :ref="`tooltip-${item.id}`"
+                    :text="item.name"
+                    :close="recipients.length > 1"
+                    data-test="remove"
+                    @close="remove(item.id)"
+                  >
+                    <div class="text-truncate">
+                      {{ item.name }}
+                    </div>
+                  </StudioChip>
+                </div>
+              </template>
+            </ExpandableList>
+            <StudioChip v-else-if="usersFilterFetchQueryParams">
+              {{ searchString }}
+            </StudioChip>
           </div>
-          <VTextarea
+        </div>
+        <KTextbox
+          v-model="subject"
+          class="mt-4"
+          label="Subject line"
+          :required="true"
+          :invalid="errors.subject"
+          :showInvalidText="true"
+          invalidText="Field is required"
+          :showLabel="true"
+          :appearanceOverrides="getAppearanceOverrides()"
+        />
+        <div :style="{ color: $themeTokens.annotation, fontSize: '12px' }">
+          Add placeholder to message
+        </div>
+        <div class="placeholder-buttons-container">
+          <button
+            v-for="placeholder in placeholders"
+            :key="`placeholder-${placeholder.label}`"
+            class="placeholder-button"
+            :style="placeholderButtonStyles"
+            :class="
+              $computedClass({
+                ':hover': { backgroundColor: $themePalette.grey.v_300 },
+                ':focus': { ...$coreOutline, outlineOffset: 0 },
+              })
+            "
+            type="button"
+            @click="addPlaceholder(placeholder.placeholder)"
+          >
+            {{ placeholder.label }}
+          </button>
+        </div>
+        <div class="email-textarea">
+          <KTextbox
             ref="message"
             v-model="message"
-            box
-            auto-grow
             label="Email body"
-            required
-            :rules="requiredRules"
+            :required="true"
+            :invalid="errors.message"
+            :showInvalidText="true"
+            invalidText="Field is required"
+            :showLabel="true"
+            :appearanceOverrides="getAppearanceOverrides()"
+            :textArea="true"
           />
-        </VCardText>
-        <VCardActions data-test="buttons">
-          <VSpacer />
-          <VBtn
-            data-test="cancel"
-            flat
-            @click="cancel"
-          >
-            Cancel
-          </VBtn>
-          <VBtn
-            data-test="send"
-            color="primary"
-            type="submit"
-          >
-            Send email
-          </VBtn>
-        </VCardActions>
-      </VForm>
-      <ConfirmationDialog
-        v-model="showWarning"
-        title="Draft in progress"
-        text="Draft will be lost upon exiting this editor. Are you sure you want to continue?"
-        confirmButtonText="Discard draft"
-        cancelButtonText="Keep open"
-        data-test="confirm"
-        @confirm="close"
-      />
-    </VCard>
-  </VDialog>
+        </div>
+      </div>
+    </form>
+
+    <!-- Warning modal for draft -->
+    <KModal
+      v-if="showWarning"
+      title="Draft in progress"
+      submitText="Discard draft"
+      cancelText="Keep open"
+      data-test="confirm"
+      @submit="close"
+      @cancel="showWarning = false"
+    >
+      <p>Draft will be lost upon exiting this editor. Are you sure you want to continue?</p>
+    </KModal>
+  </KModal>
 
 </template>
 
@@ -150,15 +131,22 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import ConfirmationDialog from '../../components/ConfirmationDialog';
   import ExpandableList from 'shared/views/ExpandableList';
+  import { generateFormMixin } from 'shared/mixins';
+  import StudioChip from 'shared/views/StudioChip';
+
+  const formMixin = generateFormMixin({
+    subject: { required: true },
+    message: { required: true },
+  });
 
   export default {
     name: 'EmailUsersDialog',
     components: {
       ExpandableList,
-      ConfirmationDialog,
+      StudioChip,
     },
+    mixins: [formMixin],
     props: {
       value: {
         type: Boolean,
@@ -188,10 +176,8 @@
     },
     data() {
       return {
-        subject: '',
-        message: '',
         showWarning: false,
-        recipients: [],
+        recipients: this.initialRecipients || [],
       };
     },
     computed: {
@@ -207,12 +193,15 @@
       users() {
         return this.getUsers(this.recipients);
       },
-      requiredRules() {
-        return [v => Boolean(v.trim()) || 'Field is required'];
-      },
       senderEmail() {
         return window.senderEmail;
       },
+      placeholderButtonStyles() {
+        return {
+          backgroundColor: this.$themePalette.grey.v_200,
+          color: this.$themeTokens.text,
+        };
+      },
       placeholders() {
         return [
           {
@@ -264,35 +253,46 @@
         this.show = false;
         this.subject = '';
         this.message = '';
-        this.$refs.form.resetValidation();
-      },
-      emailHandler() {
-        if (this.$refs.form.validate()) {
-          const query = this.initialRecipients
-            ? { ids: this.recipients.join(',') }
-            : this.usersFilterFetchQueryParams;
-
-          this.sendEmail({
-            query,
-            subject: this.subject,
-            message: this.message,
-          })
-            .then(() => {
-              this.close();
-              this.$store.dispatch('showSnackbarSimple', 'Email sent');
-            })
-            .catch(() => {
-              this.$store.dispatch('showSnackbarSimple', 'Email failed to send');
-            });
-        }
+        this.showWarning = false;
+        this.reset(); // Reset form validation state
       },
       addPlaceholder(placeholder) {
         this.message += ` ${placeholder}`;
-        this.$refs.message.focus();
+        this.$refs.message.$el.focus();
       },
       remove(id) {
         this.recipients = this.recipients.filter(u => u !== id);
       },
+      getRefs() {
+        return this.$refs;
+      },
+      getAppearanceOverrides() {
+        const baseStyles = { maxWidth: '100%', width: '100%' };
+
+        return baseStyles;
+      },
+      onSubmit() {
+        if (this.errorCount() > 0) {
+          return;
+        }
+
+        const query = this.initialRecipients
+          ? { ids: this.recipients.join(',') }
+          : this.usersFilterFetchQueryParams;
+
+        this.sendEmail({
+          query,
+          subject: this.subject,
+          message: this.message,
+        })
+          .then(() => {
+            this.close();
+            this.$store.dispatch('showSnackbarSimple', 'Email sent');
+          })
+          .catch(() => {
+            this.$store.dispatch('showSnackbarSimple', 'Email failed to send');
+          });
+      },
     },
   };
 
@@ -301,8 +301,67 @@
 
 <style lang="scss" scoped>
 
-  ::v-deep .v-chip__close {
-    padding-top: 4px;
+  ::v-deep textarea {
+    height: 120px;
+    min-height: 120px;
+  }
+
+  .chip-container {
+    display: inline;
+    margin: 2px;
+  }
+
+  .form-container {
+    padding-top: 12px;
+    padding-bottom: 16px;
+  }
+
+  .form-row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .form-row-margin {
+    margin-bottom: 8px;
+  }
+
+  .form-label {
+    flex: 0 0 auto;
+    padding: 8px;
+  }
+
+  .form-content {
+    flex: 1 1 auto;
+  }
+
+  .text-truncate {
+    display: inline-block;
+    max-width: 68px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .placeholder-buttons-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    width: 100%;
+    padding: 8px;
+  }
+
+  .placeholder-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 88px;
+    height: 30px;
+    font-size: 13px;
+    text-transform: none;
+    cursor: pointer;
+    border-radius: 14px;
+    transition: all 0.2s ease;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
index 5108d40aac..d59124ed25 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
@@ -43,7 +43,7 @@
     />
     <EmailUsersDialog
       v-model="emailDialog"
-      :query="{ ids: [userId] }"
+      :initialRecipients="[userId]"
     />
     <BaseMenu>
       <template #activator="{ on }">
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
index 2f3849d17f..b35bf282b4 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
@@ -11,14 +11,14 @@
         :text="`Email ${$formatNumber(count)} ${count === 1 ? 'user' : 'users'}`"
         @click="showMassEmailDialog = true"
       />
-      <EmailUsersDialog
-        v-model="showMassEmailDialog"
-        :userTypeFilter="userTypeFilter"
-        :locationFilter="locationFilter"
-        :keywordFilter="keywordInput"
-        :usersFilterFetchQueryParams="filterFetchQueryParams"
-      />
     </h1>
+    <EmailUsersDialog
+      v-model="showMassEmailDialog"
+      :userTypeFilter="userTypeFilter"
+      :locationFilter="locationFilter"
+      :keywordFilter="keywordInput"
+      :usersFilterFetchQueryParams="filterFetchQueryParams"
+    />
     <VLayout
       wrap
       class="mb-2"
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js b/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js
index 2eec573edd..25c1433497 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/__tests__/emailUsersDialog.spec.js
@@ -1,43 +1,93 @@
-import { mount } from '@vue/test-utils';
-import { VChip } from 'vuetify/lib/components/VChip';
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
 import EmailUsersDialog from '../EmailUsersDialog';
-import { factory } from '../../../store';
 
-const store = factory();
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
 
 const userId = 'test-user-id';
-const userEmail = 'test@user.com';
 const userId2 = 'test-user-id2';
-const userEmail2 = 'test2@user.com';
 const user1 = {
   id: userId,
   name: 'Testy User',
-  email: userEmail,
+  email: 'test@user.com',
 };
 const user2 = {
   id: userId2,
   name: 'Testier User',
-  email: userEmail2,
+  email: 'test2@user.com',
 };
 
-function makeWrapper() {
-  return mount(EmailUsersDialog, {
-    store,
-    propsData: {
-      initialRecipients: [userId, userId2],
-    },
-    computed: {
-      users() {
-        return [user1, user2];
+const mockActions = {
+  sendEmail: jest.fn(() => Promise.resolve()),
+  showSnackbarSimple: jest.fn(() => Promise.resolve()),
+};
+
+const createMockStore = () => {
+  return new Vuex.Store({
+    modules: {
+      userAdmin: {
+        namespaced: true,
+        getters: {
+          getUsers: () => ids => {
+            const usersMap = {
+              [userId]: user1,
+              [userId2]: user2,
+            };
+            return ids.map(id => usersMap[id]);
+          },
+        },
+        actions: {
+          sendEmail: mockActions.sendEmail,
+        },
       },
     },
+    actions: {
+      showSnackbarSimple: mockActions.showSnackbarSimple,
+    },
   });
-}
+};
 
-function makeBulkWrapper() {
-  return mount(EmailUsersDialog, {
+const renderComponent = (props = {}) => {
+  const defaultProps = {
+    value: true,
+    ...props,
+  };
+
+  const store = createMockStore();
+
+  return render(EmailUsersDialog, {
+    localVue,
     store,
-    propsData: {
+    props: defaultProps,
+    routes: new VueRouter(),
+  });
+};
+
+describe('EmailUsersDialog', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.senderEmail = 'sender@example.com';
+  });
+
+  it('renders email dialog with correct title and sender', () => {
+    renderComponent();
+    expect(screen.getByRole('heading', { name: 'Send email' })).toBeInTheDocument();
+    expect(screen.getByText('sender@example.com')).toBeInTheDocument();
+  });
+
+  it('shows user chips when initialRecipients are provided', () => {
+    renderComponent({ initialRecipients: [userId, userId2] });
+    expect(screen.getByText('Testy User')).toBeInTheDocument();
+    expect(screen.getByText('Testier User')).toBeInTheDocument();
+  });
+
+  it('shows filter description when usersFilterFetchQueryParams exist', () => {
+    renderComponent({
       userTypeFilter: 'active',
       locationFilter: 'Czech Republic',
       keywordFilter: 'test',
@@ -46,117 +96,107 @@ function makeBulkWrapper() {
         location: 'Czech Republic',
         keywords: 'test',
       },
-    },
+    });
+    expect(
+      screen.getByText('All active users from Czech Republic matching "test"'),
+    ).toBeInTheDocument();
   });
-}
-
-describe('emailUsersDialog', () => {
-  let wrapper;
 
-  beforeEach(async () => {
-    wrapper = makeWrapper();
-    await wrapper.setProps({ value: true }); // Allow watch event to trigger
+  it('shows placeholder buttons', () => {
+    renderComponent();
+    ['First name', 'Last name', 'Email', 'Date', 'Time'].forEach(text =>
+      expect(screen.getByRole('button', { name: text })).toBeInTheDocument(),
+    );
   });
 
-  it('recipients should get set to userIds on dialog open', () => {
-    expect(wrapper.vm.recipients).toEqual([userId, userId2]);
-  });
+  describe('form validation', () => {
+    it('shows validation errors when submitting empty form', async () => {
+      const user = userEvent.setup();
+      renderComponent({ initialRecipients: [userId] });
 
-  describe('on close', () => {
-    it('should emit input event with false value', () => {
-      wrapper.vm.show = false;
-      expect(wrapper.emitted('input')[0][0]).toBe(false);
-    });
+      await user.click(screen.getByRole('button', { name: 'Send email' }));
 
-    it('should show warning if subject is not blank', async () => {
-      await wrapper.setData({ subject: 'subject' });
-      await wrapper.findComponent('[data-test="cancel"]').trigger('click');
-      expect(wrapper.vm.showWarning).toBe(true);
+      expect(screen.getAllByText('Field is required').length).toBeGreaterThan(0);
+      expect(mockActions.sendEmail).not.toHaveBeenCalled();
     });
 
-    it('should show warning if message is not blank', async () => {
-      await wrapper.setData({ message: 'message' });
-      await wrapper.findComponent('[data-test="cancel"]').trigger('click');
-      expect(wrapper.vm.showWarning).toBe(true);
-    });
+    it('does not submit with missing subject or message', async () => {
+      const user = userEvent.setup();
+      renderComponent({ initialRecipients: [userId] });
 
-    it('confirming close should reset fields and close dialog', async () => {
-      await wrapper.setData({ subject: 'subject', message: 'message' });
-      wrapper.findComponent('[data-test="confirm"]').vm.$emit('confirm');
-      expect(wrapper.vm.subject).toBe('');
-      expect(wrapper.vm.message).toBe('');
-      expect(wrapper.emitted('input')[0][0]).toBe(false);
-    });
-  });
+      const messageInput = screen.getByLabelText(/email body/i);
+      const subjectInput = screen.getByLabelText(/subject line/i);
 
-  describe('on submit', () => {
-    let sendEmail;
+      await user.type(messageInput, 'Test Message');
+      await user.click(screen.getByRole('button', { name: 'Send email' }));
+      expect(mockActions.sendEmail).not.toHaveBeenCalled();
 
-    beforeEach(() => {
-      sendEmail = jest.spyOn(wrapper.vm, 'sendEmail').mockReturnValue(Promise.resolve());
+      await user.clear(messageInput);
+      await user.type(subjectInput, 'Test Subject');
+      await user.click(screen.getByRole('button', { name: 'Send email' }));
+      expect(mockActions.sendEmail).not.toHaveBeenCalled();
     });
+  });
 
-    it('should not send if subject is empty', async () => {
-      await wrapper.setData({ message: 'message' });
-      await wrapper.findComponent('[data-test="send"]').trigger('click');
-      expect(sendEmail).not.toHaveBeenCalled();
-    });
+  describe('placeholders', () => {
+    it('adds placeholder text to message when clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent({ initialRecipients: [userId] });
+
+      const messageInput = screen.getByLabelText(/email body/i);
+      await user.type(messageInput, 'Hello');
+      await user.click(screen.getByRole('button', { name: 'First name' }));
 
-    it('should not send if message is empty', async () => {
-      await wrapper.setData({ subject: 'subject' });
-      await wrapper.findComponent('[data-test="send"]').trigger('click');
-      expect(sendEmail).not.toHaveBeenCalled();
+      expect(messageInput.value).toBe('Hello {first_name}');
     });
   });
 
-  it('clicking placeholder should add it to the message', async () => {
-    const message = 'Testing';
-    await wrapper.setData({ message });
-    wrapper.vm.addPlaceholder('{test}');
-    expect(wrapper.vm.message).toBe(`${message} {test}`);
-  });
+  describe('recipients handling', () => {
+    it('submits with correct arguments for individual users', async () => {
+      const user = userEvent.setup();
+      renderComponent({ initialRecipients: [userId, userId2] });
 
-  describe('when used with individual users', () => {
-    it('submitting should call sendEmail with correct arguments if form is valid', async () => {
-      const sendEmail = jest.spyOn(wrapper.vm, 'sendEmail').mockReturnValue(Promise.resolve());
+      await user.type(screen.getByLabelText(/subject line/i), 'Test Subject');
+      await user.type(screen.getByLabelText(/email body/i), 'Test Message');
+      await user.click(screen.getByRole('button', { name: 'Send email' }));
 
-      const emailData = { subject: 'subject', message: 'message' };
-      await wrapper.setData(emailData);
-      await wrapper.findComponent('[data-test="send"]').trigger('click');
-      expect(sendEmail).toHaveBeenCalledWith({
-        ...emailData,
-        query: {
-          ids: `${userId},${userId2}`,
-        },
+      expect(mockActions.sendEmail).toHaveBeenCalledWith(expect.any(Object), {
+        subject: 'Test Subject',
+        message: 'Test Message',
+        query: { ids: `${userId},${userId2}` },
       });
     });
 
-    it('user chips should be shown in the "To" line', () => {
-      const chips = wrapper.find('[data-test="to-line"]').findAllComponents(VChip);
+    it('removes a recipient when the remove button is clicked', async () => {
+      const user = userEvent.setup();
+      renderComponent({ initialRecipients: [userId, userId2] });
 
-      expect(chips).toHaveLength(2);
-    });
+      const removeButton = screen.getByRole('button', { name: 'Remove Testy User' });
+      await user.click(removeButton);
 
-    it('clicking remove on user should remove user from recipients', () => {
-      wrapper.findComponent('[data-test="remove"]').vm.$emit('input', userId);
-      expect(wrapper.vm.recipients).toEqual([userId2]);
+      expect(screen.queryByText('Testy User')).not.toBeInTheDocument();
+      expect(screen.getByText('Testier User')).toBeInTheDocument();
     });
   });
 
-  describe('when used with user filters', () => {
-    beforeEach(async () => {
-      wrapper = makeBulkWrapper();
-      await wrapper.setProps({ value: true }); // Allow watch event to trigger
-    });
+  describe('filtered users', () => {
+    it('calls sendEmail with filter parameters', async () => {
+      const user = userEvent.setup();
+      renderComponent({
+        usersFilterFetchQueryParams: {
+          is_active: true,
+          location: 'Czech Republic',
+          keywords: 'test',
+        },
+      });
 
-    it('submitting should call sendEmail with correct arguments if form is valid', async () => {
-      const sendEmail = jest.spyOn(wrapper.vm, 'sendEmail').mockReturnValue(Promise.resolve());
+      await user.type(screen.getByLabelText(/subject line/i), 'Bulk Email Subject');
+      await user.type(screen.getByLabelText(/email body/i), 'Bulk Email Message');
+      await user.click(screen.getByRole('button', { name: 'Send email' }));
 
-      const emailData = { subject: 'subject', message: 'message' };
-      await wrapper.setData(emailData);
-      await wrapper.findComponent('[data-test="send"]').trigger('click');
-      expect(sendEmail).toHaveBeenCalledWith({
-        ...emailData,
+      expect(mockActions.sendEmail).toHaveBeenCalledWith(expect.any(Object), {
+        subject: 'Bulk Email Subject',
+        message: 'Bulk Email Message',
         query: {
           is_active: true,
           location: 'Czech Republic',
@@ -164,10 +204,82 @@ describe('emailUsersDialog', () => {
         },
       });
     });
+  });
+
+  describe('draft warning modal', () => {
+    it('shows modal when canceling with draft content', async () => {
+      const user = userEvent.setup();
+      renderComponent({ initialRecipients: [userId] });
+
+      await user.type(screen.getByLabelText(/subject line/i), 'Draft Subject');
+      await user.click(screen.getByRole('button', { name: 'Cancel' }));
+
+      expect(screen.getByText('Draft in progress')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'Draft will be lost upon exiting this editor. Are you sure you want to continue?',
+        ),
+      ).toBeInTheDocument();
+    });
+
+    it('does not show modal when no draft content', async () => {
+      const user = userEvent.setup();
+      renderComponent({ initialRecipients: [userId] });
+
+      await user.click(screen.getByRole('button', { name: 'Cancel' }));
+
+      expect(screen.queryByText('Draft in progress')).not.toBeInTheDocument();
+    });
+
+    it('emits input event with false value when discard confirmed', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderComponent({ initialRecipients: [userId] });
+
+      await user.type(screen.getByLabelText(/subject line/i), 'Draft Subject');
+      await user.click(screen.getByRole('button', { name: 'Cancel' }));
+      await user.click(screen.getByRole('button', { name: /discard draft/i }));
+
+      expect(emitted().input?.[0]).toEqual([false]);
+    });
+
+    it('keeps dialog open when canceling discard', async () => {
+      const user = userEvent.setup();
+      renderComponent({ initialRecipients: [userId] });
+
+      await user.type(screen.getByLabelText(/subject line/i), 'Draft Subject');
+      await user.click(screen.getByRole('button', { name: 'Cancel' }));
+      await user.click(screen.getByRole('button', { name: /keep open/i }));
+
+      expect(screen.getByRole('heading', { name: 'Send email' })).toBeInTheDocument();
+      expect(screen.queryByText('Draft in progress')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('success & error handling', () => {
+    it('shows success snackbar when email sends successfully', async () => {
+      const user = userEvent.setup();
+      renderComponent({ initialRecipients: [userId] });
+
+      await user.type(screen.getByLabelText(/subject line/i), 'Test Subject');
+      await user.type(screen.getByLabelText(/email body/i), 'Test Message');
+      await user.click(screen.getByRole('button', { name: 'Send email' }));
+
+      expect(mockActions.showSnackbarSimple).toHaveBeenCalledWith(expect.any(Object), 'Email sent');
+    });
+
+    it('shows error snackbar when sending fails', async () => {
+      mockActions.sendEmail.mockRejectedValueOnce(new Error('Send failed'));
+      const user = userEvent.setup();
+      renderComponent({ initialRecipients: [userId] });
+
+      await user.type(screen.getByLabelText(/subject line/i), 'Test Subject');
+      await user.type(screen.getByLabelText(/email body/i), 'Test Message');
+      await user.click(screen.getByRole('button', { name: 'Send email' }));
 
-    it('a descriptive string should be shown in the "To" line', () => {
-      const toLineChip = wrapper.find('[data-test="to-line"]').findComponent(VChip);
-      expect(toLineChip.text()).toEqual('All active users from Czech Republic matching "test"');
+      expect(mockActions.showSnackbarSimple).toHaveBeenCalledWith(
+        expect.any(Object),
+        'Email failed to send',
+      );
     });
   });
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/HelpButton.vue b/contentcuration/contentcuration/frontend/shared/views/HelpButton.vue
index 6e4327ac35..e10c0b3c29 100644
--- a/contentcuration/contentcuration/frontend/shared/views/HelpButton.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/HelpButton.vue
@@ -8,6 +8,8 @@
     <HoverIcon
       outlineIcon="helpOutline"
       filledIcon="help"
+      :outlineColor="$themePalette.blue.v_500"
+      :filledColor="$themePalette.blue.v_500"
     />
   </button>
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
index eeff6ca98b..9b58e61162 100644
--- a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
@@ -8,6 +8,8 @@
       outlineIcon="infoOutline"
       filledIcon="info"
       :aria-label="text"
+      :outlineColor="$themePalette.blue.v_500"
+      :filledColor="$themePalette.blue.v_500"
     />
     <KTooltip
       class="tooltip"
diff --git a/contentcuration/contentcuration/frontend/shared/views/HoverIcon.vue b/contentcuration/contentcuration/frontend/shared/views/HoverIcon.vue
index e6e02cf378..a4ae35aa86 100644
--- a/contentcuration/contentcuration/frontend/shared/views/HoverIcon.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/HoverIcon.vue
@@ -3,12 +3,12 @@
   <span class="hover-icon">
     <KIcon
       :icon="outlineIcon"
-      :color="$themePalette.blue.v_500"
+      :color="outlineColor"
       class="outline"
     />
     <KIcon
       :icon="filledIcon"
-      :color="$themePalette.blue.v_500"
+      :color="filledColor"
       class="filled"
     />
   </span>
@@ -22,7 +22,7 @@
    * Displays an outline icon that smoothly
    * transitions to a filled icon on hover.
    *
-   * Icon is blue and 16px by default (for current
+   * Icon is 16px by default (for current
    * usages, customization is not needed).
    **/
   export default {
@@ -42,6 +42,20 @@
         type: String,
         required: true,
       },
+      /**
+       * Color for the outline icon
+       **/
+      outlineColor: {
+        type: String,
+        required: true,
+      },
+      /**
+       * Color for the filled icon
+       **/
+      filledColor: {
+        type: String,
+        required: true,
+      },
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioChip.vue b/contentcuration/contentcuration/frontend/shared/views/StudioChip.vue
new file mode 100644
index 0000000000..01d8778ddf
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioChip.vue
@@ -0,0 +1,133 @@
+<template>
+
+  <div
+    class="studio-chip"
+    :class="{ 'has-close-button': close }"
+    :style="chipStyles"
+  >
+    <div class="content">
+      <div class="text">
+        <slot>
+          {{ text }}
+        </slot>
+      </div>
+
+      <button
+        v-if="close"
+        class="close-button"
+        :class="closeButtonClass"
+        :aria-label="removeLabel"
+        type="button"
+        data-test="remove-chip"
+        @click.stop="handleClose"
+      >
+        <HoverIcon
+          outlineIcon="delete"
+          filledIcon="delete"
+          :outlineColor="$themePalette.grey.v_400"
+          :filledColor="$themePalette.grey.v_900"
+          class="close-icon"
+        />
+      </button>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import HoverIcon from './HoverIcon.vue';
+
+  export default {
+    name: 'StudioChip',
+    components: {
+      HoverIcon,
+    },
+    props: {
+      text: {
+        type: String,
+        default: '',
+      },
+      close: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      chipStyles() {
+        const baseColor = this.$themePalette.grey.v_200;
+        return {
+          backgroundColor: baseColor,
+        };
+      },
+      removeLabel() {
+        return `Remove ${this.text}`;
+      },
+      closeButtonClass() {
+        return this.$computedClass({
+          ':focus': {
+            ...this.$coreOutline,
+            outlineOffset: 0,
+          },
+        });
+      },
+    },
+    methods: {
+      handleClose() {
+        this.$emit('close');
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .studio-chip {
+    display: inline-flex;
+    align-items: center;
+    height: 26px;
+    min-height: 26px;
+    padding: 2px 12px;
+    margin: 5px;
+    font-size: 13px;
+    white-space: nowrap;
+    user-select: none;
+    border-radius: 12px;
+    transition: all 0.2s ease;
+  }
+
+  .content {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .text {
+    display: flex;
+    align-items: center;
+  }
+
+  .close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
+  .studio-chip.has-close-button {
+    padding: 3px 6px 2px 12px;
+  }
+
+  .close-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 18px;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioChip.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioChip.spec.js
new file mode 100644
index 0000000000..efc172b6a2
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioChip.spec.js
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
+import StudioChip from '../StudioChip.vue';
+
+const mockRouter = new VueRouter();
+
+const renderComponent = (props = {}) => {
+  const defaultProps = {
+    text: 'Test Chip',
+    close: false,
+    ...props,
+  };
+
+  return render(StudioChip, {
+    props: defaultProps,
+    routes: mockRouter,
+  });
+};
+
+describe('StudioChip', () => {
+  test('renders with text prop', () => {
+    renderComponent({ text: 'Test Chip' });
+    expect(screen.getByText('Test Chip')).toBeInTheDocument();
+  });
+
+  test('renders close button when close prop is true', () => {
+    renderComponent({ close: true });
+    expect(screen.getByRole('button', { name: 'Remove Test Chip' })).toBeInTheDocument();
+  });
+
+  test('does not render close button when close prop is false', () => {
+    renderComponent({ close: false });
+    expect(screen.queryByRole('button', { name: 'Remove Test Chip' })).not.toBeInTheDocument();
+  });
+
+  test('emits close event when close button is clicked', async () => {
+    const user = userEvent.setup();
+    const { emitted } = renderComponent({ close: true });
+
+    await user.click(screen.getByRole('button', { name: 'Remove Test Chip' }));
+    expect(emitted().close).toHaveLength(1);
+  });
+});