diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
index c9d202d38..5b1a38134 100644
--- a/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
+++ b/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
@@ -2,12 +2,14 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { useRetryEditedMessage } from "@/composables/serviceFailedMessage";
 import MessageHeader from "./EditMessageHeader.vue";
-import { EditAndRetryConfig } from "@/resources/Configuration";
 import type Header from "@/resources/Header";
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import parseContentType from "@/composables/contentTypeParser";
 import { CodeLanguage } from "@/components/codeEditorTypes";
 import CodeEditor from "@/components/CodeEditor.vue";
+import { useMessageStore } from "@/stores/MessageStore";
+import { storeToRefs } from "pinia";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import debounce from "lodash/debounce";
 
 interface HeaderWithEditing extends Header {
   isLocked: boolean;
@@ -18,13 +20,7 @@ interface HeaderWithEditing extends Header {
 
 const emit = defineEmits<{
   cancel: [];
-  retried: [];
-}>();
-
-const props = defineProps<{
-  id: string;
-  message: ExtendedFailedMessage;
-  configuration: EditAndRetryConfig;
+  confirm: [];
 }>();
 
 interface LocalMessageState {
@@ -46,27 +42,32 @@ const localMessage = ref<LocalMessageState>({
   isBodyEmpty: false,
   isContentTypeSupported: false,
   bodyContentType: undefined,
-  bodyUnavailable: true,
+  bodyUnavailable: false,
   isEvent: false,
   retried: false,
   headers: [],
   messageBody: "",
 });
-let origMessageBody: string;
-
 const showEditAndRetryConfirmation = ref(false);
 const showCancelConfirmation = ref(false);
 const showEditRetryGenericError = ref(false);
+const store = useMessageStore();
+const { state, headers, body, edit_and_retry_config } = storeToRefs(store);
+const id = computed(() => state.value.data.id ?? "");
+const uneditedMessageBody = computed(() => body.value.data.value ?? "");
+const regExToPruneLineEndings = new RegExp(/[\n\r]*/, "g");
+const debounceBodyUpdate = debounce((value: string) => {
+  const newValue = value.replaceAll(regExToPruneLineEndings, "");
+  localMessage.value.isBodyChanged = newValue !== uneditedMessageBody.value.replaceAll(regExToPruneLineEndings, "");
+  localMessage.value.isBodyEmpty = newValue === "";
+}, 100);
 
-const id = computed(() => props.id);
-const messageBody = computed(() => props.message.messageBody);
-
-watch(messageBody, (newValue) => {
-  if (newValue !== origMessageBody) {
-    localMessage.value.isBodyChanged = true;
+watch(
+  () => localMessage.value.messageBody,
+  (newValue) => {
+    debounceBodyUpdate(newValue);
   }
-  localMessage.value.isBodyEmpty = newValue === "";
-});
+);
 
 function close() {
   emit("cancel");
@@ -91,24 +92,10 @@ function confirmCancel() {
 }
 
 function resetBodyChanges() {
-  localMessage.value.messageBody = origMessageBody;
+  localMessage.value.messageBody = uneditedMessageBody.value;
   localMessage.value.isBodyChanged = false;
 }
 
-function findHeadersByKey(key: string) {
-  return localMessage.value.headers.find((header: HeaderWithEditing) => header.key === key);
-}
-
-function getContentType() {
-  const header = findHeadersByKey("NServiceBus.ContentType");
-  return header?.value;
-}
-
-function getMessageIntent() {
-  const intent = findHeadersByKey("NServiceBus.MessageIntent");
-  return intent?.value;
-}
-
 function removeHeadersMarkedAsRemoved() {
   localMessage.value.headers = localMessage.value.headers.filter((header: HeaderWithEditing) => !header.isMarkedAsRemoved);
 }
@@ -118,7 +105,7 @@ async function retryEditedMessage() {
   try {
     await useRetryEditedMessage(id.value, localMessage);
     localMessage.value.retried = true;
-    return emit("retried");
+    return emit("confirm");
   } catch {
     showEditAndRetryConfirmation.value = false;
     showEditRetryGenericError.value = true;
@@ -126,51 +113,54 @@ async function retryEditedMessage() {
 }
 
 function initializeMessageBodyAndHeaders() {
-  origMessageBody = props.message.messageBody;
-  localMessage.value = {
+  function getHeaderValue(key: string) {
+    const header = local.headers.find((header: HeaderWithEditing) => header.key === key);
+    return header?.value;
+  }
+
+  const local = <LocalMessageState>{
     isBodyChanged: false,
     isBodyEmpty: false,
     isContentTypeSupported: false,
     bodyContentType: undefined,
-    bodyUnavailable: props.message.bodyUnavailable,
+    bodyUnavailable: body.value.not_found ?? false,
     isEvent: false,
-    retried: props.message.retried,
-    headers: props.message.headers.map((header: Header) => ({ ...header })) as HeaderWithEditing[],
-    messageBody: props.message.messageBody,
+    retried: state.value.data.failure_status.retried ?? false,
+    headers: headers.value.data.map((header: Header) => ({ ...header })) as HeaderWithEditing[],
+    messageBody: body.value.data.value ?? "",
   };
-  localMessage.value.isBodyEmpty = false;
-  localMessage.value.isBodyChanged = false;
 
-  const contentType = getContentType();
-  localMessage.value.bodyContentType = contentType;
+  const contentType = getHeaderValue("NServiceBus.ContentType");
+  local.bodyContentType = contentType;
   const parsedContentType = parseContentType(contentType);
-  localMessage.value.isContentTypeSupported = parsedContentType.isSupported;
-  localMessage.value.language = parsedContentType.language;
+  local.isContentTypeSupported = parsedContentType.isSupported;
+  local.language = parsedContentType.language;
 
-  const messageIntent = getMessageIntent();
-  localMessage.value.isEvent = messageIntent === "Publish";
+  const messageIntent = getHeaderValue("NServiceBus.MessageIntent");
+  local.isEvent = messageIntent === "Publish";
 
-  for (let index = 0; index < props.message.headers.length; index++) {
-    const header: HeaderWithEditing = props.message.headers[index] as HeaderWithEditing;
+  for (let index = 0; index < headers.value.data.length; index++) {
+    const header: HeaderWithEditing = headers.value.data[index] as HeaderWithEditing;
 
     header.isLocked = false;
     header.isSensitive = false;
     header.isMarkedAsRemoved = false;
     header.isChanged = false;
 
-    if (props.configuration.locked_headers.includes(header.key)) {
+    if (edit_and_retry_config.value.locked_headers.includes(header.key)) {
       header.isLocked = true;
-    } else if (props.configuration.sensitive_headers.includes(header.key)) {
+    } else if (edit_and_retry_config.value.sensitive_headers.includes(header.key)) {
       header.isSensitive = true;
     }
 
-    localMessage.value.headers[index] = header;
+    local.headers[index] = header;
   }
+
+  localMessage.value = local;
 }
 
 function togglePanel(panelNum: number) {
   panel.value = panelNum;
-  return false;
 }
 
 onMounted(() => {
@@ -225,14 +215,22 @@ onMounted(() => {
                           </tr>
                         </tbody>
                       </table>
-                      <div role="tabpanel" v-if="panel === 2 && !localMessage.bodyUnavailable" style="height: calc(100% - 260px)">
-                        <div style="margin-top: 1.25rem">
-                          <CodeEditor aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true"></CodeEditor>
+                      <template v-if="panel === 2">
+                        <div role="tabpanel" v-if="!localMessage.bodyUnavailable">
+                          <div style="margin-top: 1.25rem">
+                            <LoadingSpinner v-if="body.loading" />
+                            <CodeEditor v-else aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true">
+                              <template #toolbarLeft>
+                                <span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
+                              </template>
+                              <template #toolbarRight>
+                                <button v-if="localMessage.isBodyChanged" type="button" class="btn btn-secondary btn-sm" @click="resetBodyChanges"><i class="fa fa-undo"></i> Reset changes</button>
+                              </template>
+                            </CodeEditor>
+                          </div>
                         </div>
-                        <span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
-                        <span class="reset-body" v-if="localMessage.isBodyChanged"><i class="fa fa-undo" v-tippy="`Reset changes`"></i> <a @click="resetBodyChanges()" href="javascript:void(0)">Reset changes</a></span>
-                        <div class="alert alert-info" v-if="panel === 2 && localMessage.bodyUnavailable">{{ localMessage.bodyUnavailable }}</div>
-                      </div>
+                        <div role="tabpanel" class="alert alert-info" v-else>{{ localMessage.bodyUnavailable }}</div>
+                      </template>
                     </div>
                   </div>
                 </div>
@@ -280,14 +278,6 @@ onMounted(() => {
   margin-right: 20px;
 }
 
-.modal-msg-editor .reset-body {
-  color: #00a3c4;
-  font-weight: bold;
-  text-align: left;
-  margin-top: 15px;
-  display: inline-block;
-}
-
 .modal-msg-editor .reset-body a:hover {
   cursor: pointer;
 }
@@ -297,8 +287,6 @@ onMounted(() => {
 }
 
 .modal-msg-editor .empty-error {
-  float: right;
-  margin-top: 15px;
   color: #ce4844;
   font-weight: bold;
 }
diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
deleted file mode 100644
index 5b1a38134..000000000
--- a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
+++ /dev/null
@@ -1,340 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
-import { useRetryEditedMessage } from "@/composables/serviceFailedMessage";
-import MessageHeader from "./EditMessageHeader.vue";
-import type Header from "@/resources/Header";
-import parseContentType from "@/composables/contentTypeParser";
-import { CodeLanguage } from "@/components/codeEditorTypes";
-import CodeEditor from "@/components/CodeEditor.vue";
-import { useMessageStore } from "@/stores/MessageStore";
-import { storeToRefs } from "pinia";
-import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import debounce from "lodash/debounce";
-
-interface HeaderWithEditing extends Header {
-  isLocked: boolean;
-  isSensitive: boolean;
-  isMarkedAsRemoved: boolean;
-  isChanged: boolean;
-}
-
-const emit = defineEmits<{
-  cancel: [];
-  confirm: [];
-}>();
-
-interface LocalMessageState {
-  isBodyChanged: boolean;
-  isBodyEmpty: boolean;
-  isContentTypeSupported: boolean;
-  language?: CodeLanguage;
-  bodyContentType: string | undefined;
-  bodyUnavailable: boolean;
-  isEvent: boolean;
-  retried: boolean;
-  headers: HeaderWithEditing[];
-  messageBody: string;
-}
-
-const panel = ref(0);
-const localMessage = ref<LocalMessageState>({
-  isBodyChanged: false,
-  isBodyEmpty: false,
-  isContentTypeSupported: false,
-  bodyContentType: undefined,
-  bodyUnavailable: false,
-  isEvent: false,
-  retried: false,
-  headers: [],
-  messageBody: "",
-});
-const showEditAndRetryConfirmation = ref(false);
-const showCancelConfirmation = ref(false);
-const showEditRetryGenericError = ref(false);
-const store = useMessageStore();
-const { state, headers, body, edit_and_retry_config } = storeToRefs(store);
-const id = computed(() => state.value.data.id ?? "");
-const uneditedMessageBody = computed(() => body.value.data.value ?? "");
-const regExToPruneLineEndings = new RegExp(/[\n\r]*/, "g");
-const debounceBodyUpdate = debounce((value: string) => {
-  const newValue = value.replaceAll(regExToPruneLineEndings, "");
-  localMessage.value.isBodyChanged = newValue !== uneditedMessageBody.value.replaceAll(regExToPruneLineEndings, "");
-  localMessage.value.isBodyEmpty = newValue === "";
-}, 100);
-
-watch(
-  () => localMessage.value.messageBody,
-  (newValue) => {
-    debounceBodyUpdate(newValue);
-  }
-);
-
-function close() {
-  emit("cancel");
-}
-
-function confirmEditAndRetry() {
-  showEditAndRetryConfirmation.value = true;
-}
-
-function confirmCancel() {
-  if (localMessage.value.isBodyChanged) {
-    showCancelConfirmation.value = true;
-    return;
-  }
-
-  if (localMessage.value.headers.some((header: HeaderWithEditing) => header.isChanged)) {
-    showCancelConfirmation.value = true;
-    return;
-  }
-
-  close();
-}
-
-function resetBodyChanges() {
-  localMessage.value.messageBody = uneditedMessageBody.value;
-  localMessage.value.isBodyChanged = false;
-}
-
-function removeHeadersMarkedAsRemoved() {
-  localMessage.value.headers = localMessage.value.headers.filter((header: HeaderWithEditing) => !header.isMarkedAsRemoved);
-}
-
-async function retryEditedMessage() {
-  removeHeadersMarkedAsRemoved();
-  try {
-    await useRetryEditedMessage(id.value, localMessage);
-    localMessage.value.retried = true;
-    return emit("confirm");
-  } catch {
-    showEditAndRetryConfirmation.value = false;
-    showEditRetryGenericError.value = true;
-  }
-}
-
-function initializeMessageBodyAndHeaders() {
-  function getHeaderValue(key: string) {
-    const header = local.headers.find((header: HeaderWithEditing) => header.key === key);
-    return header?.value;
-  }
-
-  const local = <LocalMessageState>{
-    isBodyChanged: false,
-    isBodyEmpty: false,
-    isContentTypeSupported: false,
-    bodyContentType: undefined,
-    bodyUnavailable: body.value.not_found ?? false,
-    isEvent: false,
-    retried: state.value.data.failure_status.retried ?? false,
-    headers: headers.value.data.map((header: Header) => ({ ...header })) as HeaderWithEditing[],
-    messageBody: body.value.data.value ?? "",
-  };
-
-  const contentType = getHeaderValue("NServiceBus.ContentType");
-  local.bodyContentType = contentType;
-  const parsedContentType = parseContentType(contentType);
-  local.isContentTypeSupported = parsedContentType.isSupported;
-  local.language = parsedContentType.language;
-
-  const messageIntent = getHeaderValue("NServiceBus.MessageIntent");
-  local.isEvent = messageIntent === "Publish";
-
-  for (let index = 0; index < headers.value.data.length; index++) {
-    const header: HeaderWithEditing = headers.value.data[index] as HeaderWithEditing;
-
-    header.isLocked = false;
-    header.isSensitive = false;
-    header.isMarkedAsRemoved = false;
-    header.isChanged = false;
-
-    if (edit_and_retry_config.value.locked_headers.includes(header.key)) {
-      header.isLocked = true;
-    } else if (edit_and_retry_config.value.sensitive_headers.includes(header.key)) {
-      header.isSensitive = true;
-    }
-
-    local.headers[index] = header;
-  }
-
-  localMessage.value = local;
-}
-
-function togglePanel(panelNum: number) {
-  panel.value = panelNum;
-}
-
-onMounted(() => {
-  togglePanel(1);
-  initializeMessageBodyAndHeaders();
-});
-</script>
-
-<template>
-  <section name="failed_message_editor">
-    <div class="model modal-msg-editor" style="z-index: 1050; display: block" role="dialog" aria-label="edit and retry message">
-      <div class="modal-mask">
-        <div class="modal-dialog">
-          <div class="modal-content">
-            <div class="modal-header">
-              <div class="modal-title">
-                <h3>Edit and retry message</h3>
-              </div>
-            </div>
-            <div class="modal-body">
-              <div class="row">
-                <div class="col-sm-12">
-                  <div class="row msg-editor-tabs">
-                    <div class="col-sm-12 no-side-padding">
-                      <div role="tablist" class="tabs msg-tabs">
-                        <h5 role="tab" :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Headers</a></h5>
-                        <h5 role="tab" :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="row msg-editor-content">
-                    <div class="col-sm-12 no-side-padding">
-                      <div class="alert alert-warning" v-if="localMessage.isEvent">
-                        <div class="col-sm-12">
-                          <i class="fa fa-exclamation-circle"></i> This message is an event. If it was already successfully handled by other subscribers, editing it now has the risk of changing the semantic meaning of the event and may result in
-                          altering the system behavior.
-                        </div>
-                      </div>
-                      <div class="alert alert-warning" v-if="!localMessage.isContentTypeSupported || localMessage.bodyUnavailable">
-                        <div role="status" aria-label="cannot edit message body" class="col-sm-12">
-                          <i class="fa fa-exclamation-circle"></i> Message body cannot be edited because content type "{{ localMessage.bodyContentType }}" is not supported. Only messages with content types "application/json" and "text/xml" can be
-                          edited.
-                        </div>
-                      </div>
-                      <div class="row alert alert-danger" v-if="showEditRetryGenericError">
-                        <div class="col-sm-12"><i class="fa fa-exclamation-triangle"></i> An error occurred while retrying the message, please check the ServiceControl logs for more details on the failure.</div>
-                      </div>
-                      <table role="tabpanel" class="table" v-if="panel === 1">
-                        <tbody>
-                          <tr class="interactiveList" v-for="header in localMessage.headers" :key="header.key">
-                            <MessageHeader :header="header"></MessageHeader>
-                          </tr>
-                        </tbody>
-                      </table>
-                      <template v-if="panel === 2">
-                        <div role="tabpanel" v-if="!localMessage.bodyUnavailable">
-                          <div style="margin-top: 1.25rem">
-                            <LoadingSpinner v-if="body.loading" />
-                            <CodeEditor v-else aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true">
-                              <template #toolbarLeft>
-                                <span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
-                              </template>
-                              <template #toolbarRight>
-                                <button v-if="localMessage.isBodyChanged" type="button" class="btn btn-secondary btn-sm" @click="resetBodyChanges"><i class="fa fa-undo"></i> Reset changes</button>
-                              </template>
-                            </CodeEditor>
-                          </div>
-                        </div>
-                        <div role="tabpanel" class="alert alert-info" v-else>{{ localMessage.bodyUnavailable }}</div>
-                      </template>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="modal-footer" v-if="!showEditAndRetryConfirmation && !showCancelConfirmation">
-              <button class="btn btn-default" @click="confirmCancel()">Cancel</button>
-              <button class="btn btn-primary" :disabled="localMessage.isBodyEmpty || localMessage.bodyUnavailable" @click="confirmEditAndRetry()">Retry</button>
-            </div>
-            <div class="modal-footer cancel-confirmation" v-if="showCancelConfirmation">
-              <div>Are you sure you want to cancel? Any changes you made will be lost.</div>
-              <button class="btn btn-default" @click="close()">Yes</button>
-              <button class="btn btn-primary" @click="showCancelConfirmation = false">No</button>
-            </div>
-            <div class="modal-footer edit-retry-confirmation" v-if="showEditAndRetryConfirmation">
-              <div>Are you sure you want to continue? If you edited the message, it may cause unexpected consequences in the system.</div>
-              <button class="btn btn-default" @click="retryEditedMessage()">Yes</button>
-              <button class="btn btn-primary" @click="showEditAndRetryConfirmation = false">No</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-@import "@/components/modal.css";
-
-.cancel-confirmation,
-.edit-retry-confirmation {
-  background: #181919;
-  color: #fff;
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
-.cancel-confirmation div,
-.edit-retry-confirmation div {
-  display: inline-block;
-  font-weight: bold;
-  font-size: 14px;
-  position: relative;
-  top: 1px;
-  margin-right: 20px;
-}
-
-.modal-msg-editor .reset-body a:hover {
-  cursor: pointer;
-}
-
-.modal-msg-editor .reset-body i.fa.fa-undo {
-  color: #00a3c4;
-}
-
-.modal-msg-editor .empty-error {
-  color: #ce4844;
-  font-weight: bold;
-}
-
-.modal-msg-editor .empty-error i.fa.fa-exclamation-triangle {
-  color: #ce4844;
-}
-
-.modal-msg-editor .row.alert.alert-danger i.fa.fa-exclamation-triangle {
-  color: #ce4844;
-}
-
-.modal-msg-editor .row.alert.alert-warning i.fa.fa-exclamation-circle {
-  color: #8a6d3b;
-}
-
-.modal-msg-editor .modal-dialog {
-  width: 70%;
-}
-
-.modal-msg-editor .modal-body {
-  overflow-y: auto;
-  height: 80vh;
-}
-
-.modal-msg-editor .msg-tabs {
-  margin-top: 20px;
-}
-
-.modal-msg-editor .row.msg-editor-tabs {
-  height: 52px;
-  position: relative;
-  box-shadow: -10px 20px 20px #fff;
-  z-index: 10;
-}
-
-.modal-msg-editor .row.msg-editor-content table {
-  margin-top: 20px;
-}
-
-.modal-msg-editor .row,
-.modal-msg-editor .col-sm-12 {
-  height: 100%;
-}
-
-.modal-msg-editor .row.msg-editor-content {
-  height: calc(100% - 37px);
-  overflow-y: auto;
-  padding-right: 15px;
-}
-</style>
diff --git a/src/Frontend/src/components/messages2/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/BodyView.vue
rename to src/Frontend/src/components/messages/BodyView.vue
diff --git a/src/Frontend/src/components/messages2/DeleteMessageButton.vue b/src/Frontend/src/components/messages/DeleteMessageButton.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/DeleteMessageButton.vue
rename to src/Frontend/src/components/messages/DeleteMessageButton.vue
diff --git a/src/Frontend/src/components/messages2/DiffContent.vue b/src/Frontend/src/components/messages/DiffContent.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/DiffContent.vue
rename to src/Frontend/src/components/messages/DiffContent.vue
diff --git a/src/Frontend/src/components/messages2/DiffViewer.vue b/src/Frontend/src/components/messages/DiffViewer.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/DiffViewer.vue
rename to src/Frontend/src/components/messages/DiffViewer.vue
diff --git a/src/Frontend/src/components/messages2/EditAndRetryButton.vue b/src/Frontend/src/components/messages/EditAndRetryButton.vue
similarity index 87%
rename from src/Frontend/src/components/messages2/EditAndRetryButton.vue
rename to src/Frontend/src/components/messages/EditAndRetryButton.vue
index f2f2925e5..47c7096b2 100644
--- a/src/Frontend/src/components/messages2/EditAndRetryButton.vue
+++ b/src/Frontend/src/components/messages/EditAndRetryButton.vue
@@ -3,7 +3,7 @@ import { useMessageStore } from "@/stores/MessageStore";
 import { computed, ref } from "vue";
 import { useShowToast } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
-import EditRetryDialog2 from "@/components/failedmessages/EditRetryDialog2.vue";
+import EditRetryDialog from "@/components/failedmessages/EditRetryDialog.vue";
 import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
@@ -33,7 +33,7 @@ async function openDialog() {
   <template v-if="isVisible">
     <button type="button" class="btn btn-default" aria-label="Edit & retry" :disabled="isDisabled" @click="openDialog"><i class="fa fa-pencil"></i> Edit & retry</button>
     <Teleport to="#modalDisplay">
-      <EditRetryDialog2 v-if="isConfirmDialogVisible" @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm"></EditRetryDialog2>
+      <EditRetryDialog v-if="isConfirmDialogVisible" @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm"></EditRetryDialog>
     </Teleport>
   </template>
 </template>
diff --git a/src/Frontend/src/components/messages2/ExportMessageButton.vue b/src/Frontend/src/components/messages/ExportMessageButton.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/ExportMessageButton.vue
rename to src/Frontend/src/components/messages/ExportMessageButton.vue
diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages/FlowDiagram/FlowDiagram.vue
similarity index 99%
rename from src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
rename to src/Frontend/src/components/messages/FlowDiagram/FlowDiagram.vue
index 133604a1b..d583d6f0c 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages/FlowDiagram/FlowDiagram.vue
@@ -13,7 +13,7 @@ import { useRouter } from "vue-router";
 import EndpointDetails from "@/resources/EndpointDetails.ts";
 import { hexToCSSFilter } from "hex-to-css-filter";
 import TextEllipses from "@/components/TextEllipses.vue";
-import { useLayout } from "@/components/messages2/FlowDiagram/useLayout.ts";
+import { useLayout } from "@/components/messages/FlowDiagram/useLayout.ts";
 import { formatTypeName } from "@/composables/formatUtils.ts";
 
 enum MessageType {
diff --git a/src/Frontend/src/components/messages2/FlowDiagram/useLayout.ts b/src/Frontend/src/components/messages/FlowDiagram/useLayout.ts
similarity index 100%
rename from src/Frontend/src/components/messages2/FlowDiagram/useLayout.ts
rename to src/Frontend/src/components/messages/FlowDiagram/useLayout.ts
diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages/HeadersView.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/HeadersView.vue
rename to src/Frontend/src/components/messages/HeadersView.vue
diff --git a/src/Frontend/src/components/messages2/MessageView.vue b/src/Frontend/src/components/messages/MessageView.vue
similarity index 92%
rename from src/Frontend/src/components/messages2/MessageView.vue
rename to src/Frontend/src/components/messages/MessageView.vue
index a5b5aab1a..082523195 100644
--- a/src/Frontend/src/components/messages2/MessageView.vue
+++ b/src/Frontend/src/components/messages/MessageView.vue
@@ -7,18 +7,18 @@ import FlowDiagram from "./FlowDiagram/FlowDiagram.vue";
 import SequenceDiagram from "./SequenceDiagram.vue";
 import routeLinks from "@/router/routeLinks";
 import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnected";
-import BodyView from "@/components/messages2/BodyView.vue";
-import HeadersView from "@/components/messages2/HeadersView.vue";
-import StackTraceView from "@/components/messages2/StacktraceView.vue";
+import BodyView from "@/components/messages/BodyView.vue";
+import HeadersView from "@/components/messages/HeadersView.vue";
+import StackTraceView from "@/components/messages/StacktraceView.vue";
 import { useMessageStore } from "@/stores/MessageStore";
-import DeleteMessageButton from "@/components/messages2/DeleteMessageButton.vue";
-import RestoreMessageButton from "@/components/messages2/RestoreMessageButton.vue";
-import RetryMessageButton from "@/components/messages2/RetryMessageButton.vue";
-import EditAndRetryButton from "@/components/messages2/EditAndRetryButton.vue";
-import ExportMessageButton from "@/components/messages2/ExportMessageButton.vue";
+import DeleteMessageButton from "@/components/messages/DeleteMessageButton.vue";
+import RestoreMessageButton from "@/components/messages/RestoreMessageButton.vue";
+import RetryMessageButton from "@/components/messages/RetryMessageButton.vue";
+import EditAndRetryButton from "@/components/messages/EditAndRetryButton.vue";
+import ExportMessageButton from "@/components/messages/ExportMessageButton.vue";
 import TabsLayout from "@/components/TabsLayout.vue";
 import { storeToRefs } from "pinia";
-import MetadataLabel from "@/components/messages2/MetadataLabel.vue";
+import MetadataLabel from "@/components/messages/MetadataLabel.vue";
 import { hexToCSSFilter } from "hex-to-css-filter";
 import SagaDiagram from "./SagaDiagram.vue";
 
diff --git a/src/Frontend/src/components/messages2/MetadataLabel.vue b/src/Frontend/src/components/messages/MetadataLabel.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/MetadataLabel.vue
rename to src/Frontend/src/components/messages/MetadataLabel.vue
diff --git a/src/Frontend/src/components/messages2/RestoreMessageButton.vue b/src/Frontend/src/components/messages/RestoreMessageButton.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/RestoreMessageButton.vue
rename to src/Frontend/src/components/messages/RestoreMessageButton.vue
diff --git a/src/Frontend/src/components/messages2/RetryMessageButton.vue b/src/Frontend/src/components/messages/RetryMessageButton.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/RetryMessageButton.vue
rename to src/Frontend/src/components/messages/RetryMessageButton.vue
diff --git a/src/Frontend/src/components/messages2/SagaDiagram.spec.ts b/src/Frontend/src/components/messages/SagaDiagram.spec.ts
similarity index 99%
rename from src/Frontend/src/components/messages2/SagaDiagram.spec.ts
rename to src/Frontend/src/components/messages/SagaDiagram.spec.ts
index 3166e8d4f..4f643fee9 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
+++ b/src/Frontend/src/components/messages/SagaDiagram.spec.ts
@@ -1,5 +1,5 @@
 import { render, describe, test, screen, expect, within } from "@component-test-utils";
-import sut from "../messages2/SagaDiagram.vue";
+import sut from "@/components/messages/SagaDiagram.vue";
 import { SagaHistory } from "@/resources/SagaHistory";
 import makeRouter from "@/router";
 import { createTestingPinia } from "@pinia/testing";
diff --git a/src/Frontend/src/components/messages2/SagaDiagram.vue b/src/Frontend/src/components/messages/SagaDiagram.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SagaDiagram.vue
rename to src/Frontend/src/components/messages/SagaDiagram.vue
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue b/src/Frontend/src/components/messages/SagaDiagram/MessageDataBox.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SagaDiagram/MessageDataBox.vue
rename to src/Frontend/src/components/messages/SagaDiagram/MessageDataBox.vue
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/NoSagaData.vue b/src/Frontend/src/components/messages/SagaDiagram/NoSagaData.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SagaDiagram/NoSagaData.vue
rename to src/Frontend/src/components/messages/SagaDiagram/NoSagaData.vue
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaCompletedNode.vue b/src/Frontend/src/components/messages/SagaDiagram/SagaCompletedNode.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SagaDiagram/SagaCompletedNode.vue
rename to src/Frontend/src/components/messages/SagaDiagram/SagaCompletedNode.vue
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts b/src/Frontend/src/components/messages/SagaDiagram/SagaDiagramParser.ts
similarity index 100%
rename from src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts
rename to src/Frontend/src/components/messages/SagaDiagram/SagaDiagramParser.ts
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaHeader.vue b/src/Frontend/src/components/messages/SagaDiagram/SagaHeader.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SagaDiagram/SagaHeader.vue
rename to src/Frontend/src/components/messages/SagaDiagram/SagaHeader.vue
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue b/src/Frontend/src/components/messages/SagaDiagram/SagaOutgoingMessage.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
rename to src/Frontend/src/components/messages/SagaDiagram/SagaOutgoingMessage.vue
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue b/src/Frontend/src/components/messages/SagaDiagram/SagaOutgoingTimeoutMessage.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
rename to src/Frontend/src/components/messages/SagaDiagram/SagaOutgoingTimeoutMessage.vue
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaPluginNeeded.vue b/src/Frontend/src/components/messages/SagaDiagram/SagaPluginNeeded.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SagaDiagram/SagaPluginNeeded.vue
rename to src/Frontend/src/components/messages/SagaDiagram/SagaPluginNeeded.vue
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages/SagaDiagram/SagaUpdateNode.vue
similarity index 99%
rename from src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
rename to src/Frontend/src/components/messages/SagaDiagram/SagaUpdateNode.vue
index 8c36088b4..3b5a03870 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
+++ b/src/Frontend/src/components/messages/SagaDiagram/SagaUpdateNode.vue
@@ -3,7 +3,7 @@ import { SagaUpdateViewModel } from "./SagaDiagramParser";
 import MessageDataBox from "./MessageDataBox.vue";
 import SagaOutgoingTimeoutMessage from "./SagaOutgoingTimeoutMessage.vue";
 import SagaOutgoingMessage from "./SagaOutgoingMessage.vue";
-import DiffViewer from "@/components/messages2/DiffViewer.vue";
+import DiffViewer from "@/components/messages/DiffViewer.vue";
 import MaximizableCodeEditor from "@/components/MaximizableCodeEditor.vue";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
 import { ref, watch, computed } from "vue";
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram.vue b/src/Frontend/src/components/messages/SequenceDiagram.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SequenceDiagram.vue
rename to src/Frontend/src/components/messages/SequenceDiagram.vue
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointTooltip.vue b/src/Frontend/src/components/messages/SequenceDiagram/EndpointTooltip.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SequenceDiagram/EndpointTooltip.vue
rename to src/Frontend/src/components/messages/SequenceDiagram/EndpointTooltip.vue
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue b/src/Frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
rename to src/Frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue b/src/Frontend/src/components/messages/SequenceDiagram/HandlerTooltip.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue
rename to src/Frontend/src/components/messages/SequenceDiagram/HandlerTooltip.vue
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue b/src/Frontend/src/components/messages/SequenceDiagram/HandlersComponent.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
rename to src/Frontend/src/components/messages/SequenceDiagram/HandlersComponent.vue
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/RouteTooltip.vue b/src/Frontend/src/components/messages/SequenceDiagram/RouteTooltip.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SequenceDiagram/RouteTooltip.vue
rename to src/Frontend/src/components/messages/SequenceDiagram/RouteTooltip.vue
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue b/src/Frontend/src/components/messages/SequenceDiagram/RoutesComponent.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
rename to src/Frontend/src/components/messages/SequenceDiagram/RoutesComponent.vue
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/TimelineComponent.vue b/src/Frontend/src/components/messages/SequenceDiagram/TimelineComponent.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/SequenceDiagram/TimelineComponent.vue
rename to src/Frontend/src/components/messages/SequenceDiagram/TimelineComponent.vue
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts b/src/Frontend/src/components/messages/SequenceDiagram/tooltipOverlay.ts
similarity index 100%
rename from src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts
rename to src/Frontend/src/components/messages/SequenceDiagram/tooltipOverlay.ts
diff --git a/src/Frontend/src/components/messages2/StacktraceFormatter.vue b/src/Frontend/src/components/messages/StacktraceFormatter.vue
similarity index 100%
rename from src/Frontend/src/components/messages2/StacktraceFormatter.vue
rename to src/Frontend/src/components/messages/StacktraceFormatter.vue
diff --git a/src/Frontend/src/components/messages2/StacktraceView.vue b/src/Frontend/src/components/messages/StacktraceView.vue
similarity index 93%
rename from src/Frontend/src/components/messages2/StacktraceView.vue
rename to src/Frontend/src/components/messages/StacktraceView.vue
index fcbfa546f..d14ecefdf 100644
--- a/src/Frontend/src/components/messages2/StacktraceView.vue
+++ b/src/Frontend/src/components/messages/StacktraceView.vue
@@ -2,7 +2,7 @@
 import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
-import StacktraceFormatter from "@/components/messages2/StacktraceFormatter.vue";
+import StacktraceFormatter from "@/components/messages/StacktraceFormatter.vue";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 
 const { state } = storeToRefs(useMessageStore());
diff --git a/src/Frontend/src/router/config.ts b/src/Frontend/src/router/config.ts
index 458c455cd..63da573ef 100644
--- a/src/Frontend/src/router/config.ts
+++ b/src/Frontend/src/router/config.ts
@@ -109,12 +109,12 @@ const config: RouteItem[] = [
   {
     path: routeLinks.messages.failedMessage.template,
     title: "Message",
-    component: () => import("@/components/messages2/MessageView.vue"),
+    component: () => import("@/components/messages/MessageView.vue"),
   },
   {
     path: routeLinks.messages.successMessage.template,
     title: "Message",
-    component: () => import("@/components/messages2/MessageView.vue"),
+    component: () => import("@/components/messages/MessageView.vue"),
   },
   {
     path: routeLinks.monitoring.root,