diff --git a/app/assets/javascripts/admin/broadcast_messages/components/base.vue b/app/assets/javascripts/admin/broadcast_messages/components/base.vue
index 667ab4c34f5f2c15f3f70769772f1674f53991db..55bffe0a340d7b1495c88f0d4972fc3d3b36ce07 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/base.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/base.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlPagination } from '@gitlab/ui';
+import { GlButton, GlCard, GlIcon, GlPagination } from '@gitlab/ui';
 import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
 import { buildUrlWithCurrentLocation } from '~/lib/utils/common_utils';
 import { createAlert, VARIANT_DANGER } from '~/alert';
@@ -15,6 +15,9 @@ export default {
   name: 'BroadcastMessagesBase',
   NEW_BROADCAST_MESSAGE,
   components: {
+    GlButton,
+    GlCard,
+    GlIcon,
     GlPagination,
     MessageForm,
     MessagesTable,
@@ -36,6 +39,10 @@ export default {
   },
 
   i18n: {
+    title: s__('BroadcastMessages|Messages'),
+    addTitle: s__('BroadcastMessages|Add new message'),
+    emptyMessage: s__('BroadcastMessages|No broadcast messages defined yet.'),
+    addButton: s__('BroadcastMessages|Add new message'),
     deleteError: s__(
       'BroadcastMessages|There was an issue deleting this message, please try again later.',
     ),
@@ -49,6 +56,7 @@ export default {
         ...message,
         disable_delete: false,
       })),
+      showAddForm: false,
     };
   },
 
@@ -75,7 +83,12 @@ export default {
     buildPageUrl(newPage) {
       return buildUrlWithCurrentLocation(`?page=${newPage}`);
     },
-
+    toggleAddForm() {
+      this.showAddForm = !this.showAddForm;
+    },
+    closeAddForm() {
+      this.showAddForm = false;
+    },
     async deleteMessage(messageId) {
       const index = this.visibleMessages.findIndex((m) => m.id === messageId);
       if (!index === -1) return;
@@ -101,17 +114,48 @@ export default {
 
 <template>
   <div>
-    <message-form :broadcast-message="$options.NEW_BROADCAST_MESSAGE" />
-    <messages-table
-      v-if="hasVisibleMessages"
-      :messages="visibleMessages"
-      @delete-message="deleteMessage"
-    />
+    <gl-card
+      class="gl-new-card"
+      header-class="gl-new-card-header"
+      body-class="gl-new-card-body gl-overflow-hidden gl-px-0"
+    >
+      <template #header>
+        <div class="gl-new-card-title-wrapper">
+          <h3 class="gl-new-card-title">{{ $options.i18n.title }}</h3>
+          <div class="gl-new-card-count">
+            <gl-icon name="messages" class="gl-mr-2" />
+            {{ messagesCount }}
+          </div>
+        </div>
+        <gl-button v-if="!showAddForm" size="small" @click="toggleAddForm">{{
+          $options.i18n.addButton
+        }}</gl-button>
+      </template>
+
+      <div v-if="showAddForm" class="gl-new-card-add-form gl-m-3">
+        <h4 class="gl-mt-0">{{ $options.i18n.addTitle }}</h4>
+        <message-form
+          :broadcast-message="$options.NEW_BROADCAST_MESSAGE"
+          @close-add-form="closeAddForm"
+        />
+      </div>
+
+      <messages-table
+        v-if="hasVisibleMessages"
+        :messages="visibleMessages"
+        @delete-message="deleteMessage"
+      />
+      <div v-else-if="!showAddForm" class="gl-new-card-empty gl-px-5 gl-py-4">
+        {{ $options.i18n.emptyMessage }}
+      </div>
+    </gl-card>
+
     <gl-pagination
       v-model="currentPage"
       :total-items="totalMessages"
       :link-gen="buildPageUrl"
       align="center"
+      class="gl-mt-5"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue b/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue
index 42a959e1b89c173a9f1dd5841c6d5ffc66208f68..b06b6e1437a87199933cf5ae7d580514bbe2c5d0 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue
@@ -172,6 +172,9 @@ export default {
     this.targetSelected = this.initialTarget();
   },
   methods: {
+    closeForm() {
+      this.$emit('close-add-form');
+    },
     async onSubmit() {
       this.loading = true;
 
@@ -182,7 +185,6 @@ export default {
         this.loading = false;
       }
     },
-
     async submitForm() {
       const requestMethod = this.isAddForm ? 'post' : 'patch';
 
@@ -197,7 +199,6 @@ export default {
       }
       return true;
     },
-
     async renderPreview() {
       try {
         const res = await axios.post(this.previewPath, this.formPayload, FORM_HEADERS);
@@ -206,7 +207,6 @@ export default {
         this.renderedMessage = '';
       }
     },
-
     initialTarget() {
       if (this.targetAccessLevels.length > 0) {
         return TARGET_ROLES;
@@ -238,6 +238,7 @@ export default {
         id="message-textarea"
         v-model="message"
         size="sm"
+        autofocus
         :debounce="$options.DEFAULT_DEBOUNCE_AND_THROTTLE_MS"
         :placeholder="$options.i18n.messagePlaceholder"
         data-testid="message-input"
@@ -329,7 +330,10 @@ export default {
       >
         {{ isAddForm ? $options.i18n.add : $options.i18n.update }}
       </gl-button>
-      <gl-button v-if="!isAddForm" :href="messagesPath" data-testid="cancel-button">
+      <gl-button v-if="isAddForm" @click="closeForm">
+        {{ $options.i18n.cancel }}
+      </gl-button>
+      <gl-button v-else :href="messagesPath" data-testid="cancel-button">
         {{ $options.i18n.cancel }}
       </gl-button>
     </div>
diff --git a/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue b/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
index c95d4c96ea9f0919bddb9f5f3e3f0d1be43c3afd..924b6e7451bba77bcf1090736ab8adc578c7b4f6 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
@@ -1,7 +1,7 @@
 <script>
-import { GlBroadcastMessage, GlButton, GlTableLite } from '@gitlab/ui';
+import { GlBroadcastMessage, GlButton, GlTableLite, GlModal, GlModalDirective } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import { formatDate } from '~/lib/utils/datetime/date_format_utility';
 
 const DEFAULT_TD_CLASSES = 'gl-vertical-align-middle!';
@@ -12,13 +12,31 @@ export default {
     GlBroadcastMessage,
     GlButton,
     GlTableLite,
+    GlModal,
   },
   directives: {
     SafeHtml,
+    GlModal: GlModalDirective,
   },
   i18n: {
+    title: s__('BroadcastMessages|Delete broadcast message'),
     edit: __('Edit'),
     delete: __('Delete'),
+    modalMessage: s__('BroadcastMessages|Do you really want to delete this broadcast message?'),
+  },
+  modal: {
+    actionPrimary: {
+      text: s__('BroadcastMessages|Delete message'),
+      attributes: {
+        variant: 'danger',
+      },
+    },
+    actionSecondary: {
+      text: __('Cancel'),
+      attributes: {
+        variant: 'default',
+      },
+    },
   },
   props: {
     messages: {
@@ -81,6 +99,7 @@ export default {
     :items="messages"
     :fields="$options.fields"
     :tbody-tr-attr="{ 'data-testid': 'message-row' }"
+    class="gl-mt-n1 gl-mb-n2"
     stacked="md"
   >
     <template #cell(preview)="{ item: { message, theme, broadcast_type, dismissable } }">
@@ -104,17 +123,25 @@ export default {
         :href="edit_path"
         data-testid="edit-message"
       />
-
       <gl-button
+        v-gl-modal="`delete-message-${id}`"
         class="gl-ml-3"
         icon="remove"
-        variant="danger"
         :aria-label="$options.i18n.delete"
         rel="nofollow"
         :disabled="disable_delete"
         :data-testid="`delete-message-${id}`"
-        @click="$emit('delete-message', id)"
       />
+      <gl-modal
+        :title="$options.i18n.title"
+        :action-primary="$options.modal.actionPrimary"
+        :action-secondary="$options.modal.actionSecondary"
+        :modal-id="`delete-message-${id}`"
+        size="sm"
+        @primary="$emit('delete-message', id)"
+      >
+        {{ $options.i18n.modalMessage }}
+      </gl-modal>
     </template>
   </gl-table-lite>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 779f0e4fb2ae6bda9b4a9db1a7816d86b49ebd1a..ff2c06aa8ce2d39b2397b38752f7432d34015c4b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8376,6 +8376,9 @@ msgstr ""
 msgid "BroadcastMessages|Add broadcast message"
 msgstr ""
 
+msgid "BroadcastMessages|Add new message"
+msgstr ""
+
 msgid "BroadcastMessages|Allow users to dismiss the broadcast message"
 msgstr ""
 
@@ -8388,9 +8391,18 @@ msgstr ""
 msgid "BroadcastMessages|Dark"
 msgstr ""
 
+msgid "BroadcastMessages|Delete broadcast message"
+msgstr ""
+
+msgid "BroadcastMessages|Delete message"
+msgstr ""
+
 msgid "BroadcastMessages|Dismissable"
 msgstr ""
 
+msgid "BroadcastMessages|Do you really want to delete this broadcast message?"
+msgstr ""
+
 msgid "BroadcastMessages|Ends at"
 msgstr ""
 
@@ -8421,6 +8433,12 @@ msgstr ""
 msgid "BroadcastMessages|Message"
 msgstr ""
 
+msgid "BroadcastMessages|Messages"
+msgstr ""
+
+msgid "BroadcastMessages|No broadcast messages defined yet."
+msgstr ""
+
 msgid "BroadcastMessages|Notification"
 msgstr ""
 
diff --git a/spec/features/admin/broadcast_messages_spec.rb b/spec/features/admin/broadcast_messages_spec.rb
index fca4cdb0ff40a7bb1b32a06b006e7ce50f644a3a..b89ebc34d6a89adecbc2144fb145af9ad6ef9dc4 100644
--- a/spec/features/admin/broadcast_messages_spec.rb
+++ b/spec/features/admin/broadcast_messages_spec.rb
@@ -12,6 +12,12 @@
       # create
       visit admin_broadcast_messages_path
 
+      click_button('Add new message')
+
+      page.within(preview_container) do
+        expect(page).to have_content('Your message here')
+      end
+
       fill_in 'Message', with: 'test message'
 
       wait_for_requests
@@ -24,10 +30,6 @@
 
       wait_for_requests
 
-      page.within(preview_container) do
-        expect(page).to have_content('Your message here')
-      end
-
       page.within(first_message_container) do
         expect(page).to have_content('test message')
       end
@@ -53,10 +55,6 @@
 
       wait_for_requests
 
-      page.within(preview_container) do
-        expect(page).to have_content('Your message here')
-      end
-
       page.within(first_message_container) do
         expect(page).to have_content('changed test message')
       end
diff --git a/spec/features/broadcast_messages_spec.rb b/spec/features/broadcast_messages_spec.rb
index 2e0f4e3b83b69dbab97003ab44c11daf29bd7517..98f87face15914e3e8e1115051efac52bf08ec23 100644
--- a/spec/features/broadcast_messages_spec.rb
+++ b/spec/features/broadcast_messages_spec.rb
@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 RSpec.describe 'Broadcast Messages', feature_category: :onboarding do
+  include Spec::Support::Helpers::ModalHelpers
+
   let_it_be(:user) { create(:user) }
   let(:path) { explore_projects_path }
 
@@ -127,6 +129,8 @@
         find("[data-testid='delete-message-#{message.id}']").click
       end
 
+      accept_gl_confirm(button_text: 'Delete message')
+
       visit path
 
       expect_no_broadcast_message
diff --git a/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js b/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js
index 6d536b2d0e4e89f80c448d9176147efc315a2000..c92820735ff47c67c608f32dc4c168e9dd268fd4 100644
--- a/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js
+++ b/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js
@@ -1,3 +1,4 @@
+import { GlModal } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MessagesTable from '~/admin/broadcast_messages/components/messages_table.vue';
 import { MOCK_MESSAGES } from '../mock_data';
@@ -8,6 +9,7 @@ describe('MessagesTable', () => {
   const findRows = () => wrapper.findAll('[data-testid="message-row"]');
   const findTargetRoles = () => wrapper.find('[data-testid="target-roles-th"]');
   const findDeleteButton = (id) => wrapper.find(`[data-testid="delete-message-${id}"]`);
+  const findModal = () => wrapper.findComponent(GlModal);
 
   function createComponent(props = {}) {
     wrapper = mount(MessagesTable, {
@@ -34,6 +36,8 @@ describe('MessagesTable', () => {
     const { id } = MOCK_MESSAGES[0];
     createComponent();
     findDeleteButton(id).element.click();
+    findModal().vm.$emit('primary');
+
     expect(wrapper.emitted('delete-message')).toHaveLength(1);
     expect(wrapper.emitted('delete-message')[0]).toEqual([id]);
   });