diff --git a/ui/lib/config-ui/addon/components/messages/page/create-and-edit-message-form.hbs b/ui/lib/config-ui/addon/components/messages/page/create-and-edit-message-form.hbs
index e4806fcf90..6aeffedc4e 100644
--- a/ui/lib/config-ui/addon/components/messages/page/create-and-edit-message-form.hbs
+++ b/ui/lib/config-ui/addon/components/messages/page/create-and-edit-message-form.hbs
@@ -23,7 +23,8 @@
       </FormField>
       {{#if (and (eq attr.name "message") (not @message.authenticated))}}
         <Hds::Alert class="has-top-margin-negative-m has-bottom-margin-l" @type="compact" @color="highlight" as |A|>
-          <A.Description>Note: Do not include sensitive info in this message since users are unauthenticated at this stage.</A.Description>
+          <A.Description data-test-unauth-info>Note: Do not include sensitive info in this message since users are
+            unauthenticated at this stage.</A.Description>
         </Hds::Alert>
       {{/if}}
     {{/each}}
@@ -48,7 +49,7 @@
       @size="large"
       @color="warning"
       @onClose={{fn (mut this.showMultipleModalsMessage) false}}
-      data-test-modal="preview modal"
+      data-test-modal="multiple modal messages"
       as |M|
     >
       <M.Header data-test-modal-title="Warning: more than one modal">
diff --git a/ui/lib/config-ui/addon/components/messages/page/list.hbs b/ui/lib/config-ui/addon/components/messages/page/list.hbs
index fe8a4da454..b500e55fff 100644
--- a/ui/lib/config-ui/addon/components/messages/page/list.hbs
+++ b/ui/lib/config-ui/addon/components/messages/page/list.hbs
@@ -36,7 +36,7 @@
 {{#if @messages.length}}
   {{#each this.formattedMessages as |message|}}
     <LinkedBlock
-      data-test-list-item={{message.id}}
+      data-test-list-item={{message.title}}
       class="list-item-row"
       @params={{array "messages.message.details" message.id}}
       @linkPrefix="vault.cluster.config-ui"
diff --git a/ui/tests/acceptance/config-ui/messages/messages-test.js b/ui/tests/acceptance/config-ui/messages/messages-test.js
new file mode 100644
index 0000000000..463fea2093
--- /dev/null
+++ b/ui/tests/acceptance/config-ui/messages/messages-test.js
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import { click, visit, fillIn, currentRouteName } from '@ember/test-helpers';
+import authPage from 'vault/tests/pages/auth';
+import logout from 'vault/tests/pages/logout';
+import { format, addDays, startOfDay } from 'date-fns';
+import { datetimeLocalStringFormat } from 'core/utils/date-formatters';
+import { PAGE } from 'vault/tests/helpers/config-ui/message-selectors';
+
+module('Acceptance | config-ui', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  hooks.beforeEach(async function () {
+    this.createMessage = async (messageType = 'banner', endTime = '2023-12-12', authenticated = true) => {
+      await visit(`vault/config-ui/messages?authenticated=${authenticated}`);
+      await click(PAGE.button('create message'));
+      await fillIn(PAGE.input('title'), 'Awesome custom message title');
+      await click(PAGE.radio(messageType));
+      await fillIn(
+        PAGE.input('message'),
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare.'
+      );
+      await fillIn(
+        PAGE.input('startTime'),
+        format(addDays(startOfDay(new Date('2023-12-12')), 1), datetimeLocalStringFormat)
+      );
+      if (endTime) {
+        await click('#specificDate');
+        await fillIn(
+          PAGE.input('endTime'),
+          format(addDays(startOfDay(new Date('2023-12-12')), 10), datetimeLocalStringFormat)
+        );
+      }
+      await fillIn('[data-test-kv-key="0"]', 'Learn more');
+      await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
+
+      await click(PAGE.button('create-message'));
+    };
+    await authPage.login();
+  });
+  hooks.afterEach(async function () {
+    await logout.visit();
+  });
+
+  test('it should show an empty state when no messages are created', async function (assert) {
+    assert.expect(4);
+    await visit('vault/config-ui/messages');
+    assert.dom('[data-test-component="empty-state"]').exists();
+    assert.dom(PAGE.emptyStateTitle).hasText('No messages yet');
+    await click(PAGE.tab('On login page'));
+    assert.dom('[data-test-component="empty-state"]').exists();
+    assert.dom(PAGE.emptyStateTitle).hasText('No messages yet');
+  });
+
+  module('Authenticated messages', function () {
+    test('it should create, edit, view, and delete a message', async function (assert) {
+      assert.expect(3);
+      await this.createMessage();
+      assert.dom(PAGE.title).hasText('Awesome custom message title', 'on the details screen');
+      await click('[data-test-link="edit"]');
+      await fillIn(PAGE.input('title'), 'Edited custom message title');
+      await click(PAGE.button('create-message'));
+      assert.dom(PAGE.title).hasText('Edited custom message title');
+      await click(PAGE.confirmActionButton('Delete message'));
+      await click(PAGE.confirmButton);
+      assert.strictEqual(
+        currentRouteName(),
+        'vault.cluster.config-ui.messages.index',
+        'redirects to messages page after delete'
+      );
+    });
+    test('it should show multiple messages modal', async function (assert) {
+      assert.expect(4);
+      await this.createMessage('modal', null);
+      assert.dom(PAGE.title).hasText('Awesome custom message title');
+      await this.createMessage('modal', null);
+      assert.dom(PAGE.modal('multiple modal messages')).exists();
+      assert
+        .dom(PAGE.modalTitle('Warning: more than one modal'))
+        .hasText('Warning: more than one modal after the user logs in');
+      await click(PAGE.modalButton('cancel'));
+      await visit('vault/config-ui/messages');
+      await click(PAGE.listItem('Awesome custom message title'));
+      await click(PAGE.confirmActionButton('Delete message'));
+      await click(PAGE.confirmButton);
+      assert.dom('[data-test-component="empty-state"]').exists('Message was deleted');
+    });
+    test('it should display preview a message when all required fields are filled out', async function (assert) {
+      assert.expect(2);
+      await visit(`vault/config-ui/messages`);
+      await click(PAGE.button('create message'));
+      await fillIn(PAGE.input('title'), 'Awesome custom message title');
+      await click(PAGE.radio('banner'));
+      await fillIn(
+        PAGE.input('message'),
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare.'
+      );
+      await fillIn('[data-test-kv-key="0"]', 'Learn more');
+      await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
+      await click(PAGE.button('preview'));
+      assert.dom(PAGE.modal('preview image')).exists();
+      await click(PAGE.modalButton('Close'));
+      await click(PAGE.radio('modal'));
+      await click(PAGE.button('preview'));
+      assert.dom(PAGE.modal('preview modal')).exists();
+    });
+    test('it should not display preview a message when all required fields are not filled out', async function (assert) {
+      assert.expect(2);
+      await visit(`vault/config-ui/messages`);
+      await click(PAGE.button('create message'));
+      await click(PAGE.radio('banner'));
+      await fillIn(
+        PAGE.input('message'),
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare.'
+      );
+      await fillIn('[data-test-kv-key="0"]', 'Learn more');
+      await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
+      await click(PAGE.button('preview'));
+      assert.dom(PAGE.modal('preview image')).doesNotExist();
+      assert.dom(PAGE.input('title')).hasClass('has-error-border');
+    });
+  });
+
+  module('Unauthenticated messages', function () {
+    test('it should create, edit, view, and delete a message', async function (assert) {
+      assert.expect(3);
+      await this.createMessage('banner', null, false);
+      assert.dom(PAGE.title).hasText('Awesome custom message title', 'on the details screen');
+      await click('[data-test-link="edit"]');
+      await fillIn(PAGE.input('title'), 'Edited custom message title');
+      await click(PAGE.button('create-message'));
+      assert.dom(PAGE.title).hasText('Edited custom message title');
+      await click(PAGE.confirmActionButton('Delete message'));
+      await click(PAGE.confirmButton);
+      assert.strictEqual(
+        currentRouteName(),
+        'vault.cluster.config-ui.messages.index',
+        'redirects to messages page after delete'
+      );
+    });
+    test('it should show multiple messages modal', async function (assert) {
+      assert.expect(4);
+      await this.createMessage('modal', null, false);
+      assert.dom(PAGE.title).hasText('Awesome custom message title');
+      await this.createMessage('modal', null, false);
+      assert.dom(PAGE.modal('multiple modal messages')).exists();
+      assert
+        .dom(PAGE.modalTitle('Warning: more than one modal'))
+        .hasText('Warning: more than one modal on the login page');
+      await click(PAGE.modalButton('cancel'));
+      await visit('vault/config-ui/messages?authenticated=false');
+      await click(PAGE.listItem('Awesome custom message title'));
+      await click(PAGE.confirmActionButton('Delete message'));
+      await click(PAGE.confirmButton);
+      assert.dom('[data-test-component="empty-state"]').exists('Message was deleted');
+    });
+    test('it should show info message on create and edit form', async function (assert) {
+      assert.expect(1);
+      await visit('vault/config-ui/messages?authenticated=false');
+      await click(PAGE.button('create message'));
+      assert
+        .dom(PAGE.unauthCreateFormInfo)
+        .hasText(
+          'Note: Do not include sensitive info in this message since users are unauthenticated at this stage.'
+        );
+    });
+    test('it should display preview a message when all required fields are filled out', async function (assert) {
+      assert.expect(2);
+      await visit('vault/config-ui/messages?authenticated=false');
+      await click(PAGE.button('create message'));
+      await fillIn(PAGE.input('title'), 'Awesome custom message title');
+      await click(PAGE.radio('banner'));
+      await fillIn(
+        PAGE.input('message'),
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare.'
+      );
+      await fillIn('[data-test-kv-key="0"]', 'Learn more');
+      await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
+      await click(PAGE.button('preview'));
+      assert.dom(PAGE.modal('preview image')).exists();
+      await click(PAGE.modalButton('Close'));
+      await click(PAGE.radio('modal'));
+      await click(PAGE.button('preview'));
+      assert.dom(PAGE.modal('preview modal')).exists();
+    });
+    test('it should not display preview a message when all required fields are not filled out', async function (assert) {
+      assert.expect(2);
+      await visit('vault/config-ui/messages?authenticated=false');
+      await click(PAGE.button('create message'));
+      await click(PAGE.radio('banner'));
+      await fillIn(
+        PAGE.input('message'),
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare.'
+      );
+      await fillIn('[data-test-kv-key="0"]', 'Learn more');
+      await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
+      await click(PAGE.button('preview'));
+      assert.dom(PAGE.modal('preview image')).doesNotExist();
+      assert.dom(PAGE.input('title')).hasClass('has-error-border');
+    });
+  });
+});
diff --git a/ui/tests/helpers/config-ui/message-selectors.js b/ui/tests/helpers/config-ui/message-selectors.js
index 76a9cd208f..e0c0471968 100644
--- a/ui/tests/helpers/config-ui/message-selectors.js
+++ b/ui/tests/helpers/config-ui/message-selectors.js
@@ -3,13 +3,17 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+import { SELECTORS as GENERAL } from 'vault/tests/helpers/general-selectors';
+
 export const PAGE = {
   // General selectors that are common between pages
+  ...GENERAL,
+  inlineErrorMessage: `[data-test-inline-error-message]`,
+  unauthCreateFormInfo: '[data-test-unauth-info]',
   radio: (radioName) => `[data-test-radio="${radioName}"]`,
   field: (fieldName) => `[data-test-field="${fieldName}"]`,
   input: (input) => `[data-test-input="${input}"]`,
   button: (buttonName) => `[data-test-button="${buttonName}"]`,
-  inlineErrorMessage: `[data-test-inline-error-message]`,
   fieldVaildation: (fieldName) => `[data-test-field-validation="${fieldName}"]`,
   modal: (name) => `[data-test-modal="${name}"]`,
   modalTitle: (title) => `[data-test-modal-title="${title}"]`,
@@ -21,4 +25,6 @@ export const PAGE = {
   alertAction: (name) => `[data-test-custom-alert-action="${name}"]`,
   badge: (name) => `[data-test-badge="${name}"]`,
   tab: (name) => `[data-test-custom-messages-tab="${name}"]`,
+  confirmActionButton: (name) => `[data-test-confirm-action="${name}"]`,
+  listItem: (name) => `[data-test-list-item="${name}"]`,
 };
diff --git a/ui/tests/helpers/general-selectors.js b/ui/tests/helpers/general-selectors.js
index 9df84c1e07..4a4641f410 100644
--- a/ui/tests/helpers/general-selectors.js
+++ b/ui/tests/helpers/general-selectors.js
@@ -18,6 +18,7 @@ export const SELECTORS = {
   filterInput: '[data-test-filter-input]',
   confirmModalInput: '[data-test-confirmation-modal-input]',
   confirmButton: '[data-test-confirm-button]',
+  confirmTrigger: '[data-test-confirm-action-trigger]',
   emptyStateTitle: '[data-test-empty-state-title]',
   emptyStateMessage: '[data-test-empty-state-message]',
   emptyStateActions: '[data-test-empty-state-actions]',
diff --git a/ui/tests/integration/components/config-ui/messages/page/list-test.js b/ui/tests/integration/components/config-ui/messages/page/list-test.js
index fdcc0bbf17..94e9bb355b 100644
--- a/ui/tests/integration/components/config-ui/messages/page/list-test.js
+++ b/ui/tests/integration/components/config-ui/messages/page/list-test.js
@@ -89,7 +89,7 @@ module('Integration | Component | messages/page/list', function (hooks) {
     });
     assert.dom('[data-test-icon="message-circle"]').exists();
     for (const message of this.messages) {
-      assert.dom(`[data-test-list-item="${message.id}"]`).exists();
+      assert.dom(PAGE.listItem('Message title 1')).exists();
       assert.dom(`[data-linked-block-title="${message.id}"]`).hasText(message.title);
     }
   });