diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 67b0ab47c..f153fc4d7 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -5,11 +5,11 @@ import { storeToRefs } from "pinia";
 import SortableColumn from "../SortableColumn.vue";
 import { MessageStatus } from "@/resources/Message";
 import moment from "moment";
-import { useFormatTime } from "@/composables/formatter";
 import RefreshConfig from "../RefreshConfig.vue";
 import ItemsPerPage from "../ItemsPerPage.vue";
 import PaginationStrip from "../PaginationStrip.vue";
 import { useRoute } from "vue-router";
+import { friendlyTypeName, formatDotNetTimespan } from "../messages2/utils";
 
 const store = useAuditStore();
 const { messages, sortByInstances, itemsPerPage, selectedPage, totalCount } = storeToRefs(store);
@@ -48,21 +48,6 @@ function statusToIcon(messageStatus: MessageStatus) {
       return "fa retry-issued";
   }
 }
-
-function friendlyTypeName(messageType: string) {
-  if (messageType == null) return null;
-
-  const typeClass = messageType.split(",")[0];
-  const typeName = typeClass.split(".").reverse()[0];
-  return typeName.replace(/\+/g, ".");
-}
-
-function formatDotNetTimespan(timespan: string) {
-  //assuming if we have days in the timespan then something is very, very wrong
-  const [hh, mm, ss] = timespan.split(":");
-  const time = useFormatTime(((parseInt(hh) * 60 + parseInt(mm)) * 60 + parseFloat(ss)) * 1000);
-  return `${time.value} ${time.unit}`;
-}
 </script>
 
 <template>
diff --git a/src/Frontend/src/components/failedmessages/DeletedMessages.vue b/src/Frontend/src/components/failedmessages/DeletedMessages.vue
index 678e15c45..70ec1f3a7 100644
--- a/src/Frontend/src/components/failedmessages/DeletedMessages.vue
+++ b/src/Frontend/src/components/failedmessages/DeletedMessages.vue
@@ -12,7 +12,7 @@ import MessageList, { IMessageList } from "./MessageList.vue";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import PaginationStrip from "../../components/PaginationStrip.vue";
 import moment from "moment";
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import { TYPE } from "vue-toastification";
 import FailureGroup from "@/resources/FailureGroup";
 import { useConfiguration } from "@/composables/configuration";
diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
index c9d202d38..d6bc978ba 100644
--- a/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
+++ b/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
@@ -4,7 +4,7 @@ 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 { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import parseContentType from "@/composables/contentTypeParser";
 import { CodeLanguage } from "@/components/codeEditorTypes";
 import CodeEditor from "@/components/CodeEditor.vue";
diff --git a/src/Frontend/src/components/failedmessages/FailedMessages.vue b/src/Frontend/src/components/failedmessages/FailedMessages.vue
index 6ceb69d78..b84229603 100644
--- a/src/Frontend/src/components/failedmessages/FailedMessages.vue
+++ b/src/Frontend/src/components/failedmessages/FailedMessages.vue
@@ -14,7 +14,8 @@ import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
 import MessageList, { IMessageList } from "./MessageList.vue";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import PaginationStrip from "../../components/PaginationStrip.vue";
-import { ExtendedFailedMessage, FailedMessageStatus } from "@/resources/FailedMessage";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import SortOptions, { SortDirection } from "@/resources/SortOptions";
 import { TYPE } from "vue-toastification";
 import GroupOperation from "@/resources/GroupOperation";
diff --git a/src/Frontend/src/components/failedmessages/MessageList.vue b/src/Frontend/src/components/failedmessages/MessageList.vue
index 216559345..898f0a535 100644
--- a/src/Frontend/src/components/failedmessages/MessageList.vue
+++ b/src/Frontend/src/components/failedmessages/MessageList.vue
@@ -3,7 +3,8 @@ import { useRouter } from "vue-router";
 import TimeSince from "../TimeSince.vue";
 import NoData from "../NoData.vue";
 import routeLinks from "@/router/routeLinks";
-import { FailedMessageStatus, ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import { hexToCSSFilter } from "hex-to-css-filter";
 
 export interface IMessageList {
diff --git a/src/Frontend/src/components/failedmessages/PendingRetries.vue b/src/Frontend/src/components/failedmessages/PendingRetries.vue
index 30d6f608c..638564a25 100644
--- a/src/Frontend/src/components/failedmessages/PendingRetries.vue
+++ b/src/Frontend/src/components/failedmessages/PendingRetries.vue
@@ -11,7 +11,8 @@ import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
 import MessageList, { IMessageList } from "./MessageList.vue";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import PaginationStrip from "../../components/PaginationStrip.vue";
-import { ExtendedFailedMessage, FailedMessageStatus } from "@/resources/FailedMessage";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import SortOptions, { SortDirection } from "@/resources/SortOptions";
 import QueueAddress from "@/resources/QueueAddress";
 import { TYPE } from "vue-toastification";
diff --git a/src/Frontend/src/components/messages/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
index d4b90a8ca..06dcc8661 100644
--- a/src/Frontend/src/components/messages/BodyView.vue
+++ b/src/Frontend/src/components/messages/BodyView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import { computed } from "vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import parseContentType from "@/composables/contentTypeParser";
diff --git a/src/Frontend/src/components/messages/FlowDiagram.vue b/src/Frontend/src/components/messages/FlowDiagram.vue
index e2eaea508..b44fddfe8 100644
--- a/src/Frontend/src/components/messages/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages/FlowDiagram.vue
@@ -7,7 +7,7 @@ import routeLinks from "@/router/routeLinks";
 import Message from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
 import { useRoute } from "vue-router";
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import { Controls } from "@vue-flow/controls";
 
 const props = defineProps<{
diff --git a/src/Frontend/src/components/messages/HeadersView.vue b/src/Frontend/src/components/messages/HeadersView.vue
index fb742c09f..ba6c3aafd 100644
--- a/src/Frontend/src/components/messages/HeadersView.vue
+++ b/src/Frontend/src/components/messages/HeadersView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 import FilterInput from "@/components/FilterInput.vue";
 import { computed, ref } from "vue";
diff --git a/src/Frontend/src/components/messages/MessageView.vue b/src/Frontend/src/components/messages/MessageView.vue
index c0a4f66d9..dd53b4ae3 100644
--- a/src/Frontend/src/components/messages/MessageView.vue
+++ b/src/Frontend/src/components/messages/MessageView.vue
@@ -14,7 +14,8 @@ import EditRetryDialog from "../failedmessages/EditRetryDialog.vue";
 import routeLinks from "@/router/routeLinks";
 import { EditAndRetryConfig } from "@/resources/Configuration";
 import { TYPE } from "vue-toastification";
-import { ExtendedFailedMessage, FailedMessageError, FailedMessageStatus, isError } from "@/resources/FailedMessage";
+import { FailedMessageError, FailedMessageStatus } from "@/resources/FailedMessage";
+import { ExtendedFailedMessage, isError } from "../messages2/FailedMessage";
 import Message from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
 import { useConfiguration } from "@/composables/configuration";
diff --git a/src/Frontend/src/components/messages/StacktraceView.vue b/src/Frontend/src/components/messages/StacktraceView.vue
index 6638ea9ea..99e35f6bd 100644
--- a/src/Frontend/src/components/messages/StacktraceView.vue
+++ b/src/Frontend/src/components/messages/StacktraceView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CodeEditor from "@/components/CodeEditor.vue";
+import { ExtendedFailedMessage } from "../messages2/FailedMessage";
 
 const props = defineProps<{
   message: ExtendedFailedMessage;
diff --git a/src/Frontend/src/components/messages2/FailedMessage.ts b/src/Frontend/src/components/messages2/FailedMessage.ts
new file mode 100644
index 000000000..53fcbf6d5
--- /dev/null
+++ b/src/Frontend/src/components/messages2/FailedMessage.ts
@@ -0,0 +1,33 @@
+import FailedMessage, { FailedMessageError } from "@/resources/FailedMessage";
+import Header from "@/resources/Header";
+import { ConversationModel } from "./SequenceDiagram/SequenceModel";
+
+export interface ExtendedFailedMessage extends FailedMessage {
+  error_retention_period: number;
+  delete_soon: boolean;
+  deleted_in: string;
+  retryInProgress: boolean;
+  deleteInProgress: boolean;
+  restoreInProgress: boolean;
+  selected: boolean;
+  retried: boolean;
+  archiving: boolean;
+  restoring: boolean;
+  archived: boolean;
+  resolved: boolean;
+  headersNotFound: boolean;
+  messageBodyNotFound: boolean;
+  bodyUnavailable: boolean;
+  headers: Header[];
+  conversationId: string;
+  conversation?: ConversationModel;
+  messageBody: string;
+  contentType: string;
+  isEditAndRetryEnabled: boolean;
+  redirect: boolean;
+  submittedForRetrial: boolean;
+}
+
+export function isError(obj: ExtendedFailedMessage | FailedMessageError): obj is FailedMessageError {
+  return (obj as FailedMessageError).error !== undefined || (obj as FailedMessageError).notFound !== undefined;
+}
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram.vue b/src/Frontend/src/components/messages2/SequenceDiagram.vue
index 08dd5f20f..e21e65eff 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram.vue
@@ -18,6 +18,7 @@ onMounted(() => store.refreshConversation());
 </script>
 
 <template>
+  <a class="help-link" target="_blank" href="https://docs.particular.net/servicepulse/sequence-diagram"><i class="fa fa-info-circle" /> Sequence Diagram Help</a>
   <div class="outer" @scroll="(ev) => (endpointYOffset = (ev.target as Element).scrollTop)">
     <svg class="sequence-diagram" :style="{ width: `max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)` }" :height="maxHeight + 20">
       <Timeline />
@@ -48,4 +49,11 @@ onMounted(() => store.refreshConversation());
   --highlight-background: #c5dee9;
   background: white;
 }
+
+.help-link {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 0.15rem;
+}
 </style>
diff --git a/src/Frontend/src/resources/SequenceDiagram/Endpoint.ts b/src/Frontend/src/components/messages2/SequenceDiagram/Endpoint.ts
similarity index 96%
rename from src/Frontend/src/resources/SequenceDiagram/Endpoint.ts
rename to src/Frontend/src/components/messages2/SequenceDiagram/Endpoint.ts
index b9bfc6eed..a98e01c0a 100644
--- a/src/Frontend/src/resources/SequenceDiagram/Endpoint.ts
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/Endpoint.ts
@@ -1,5 +1,5 @@
-import { NServiceBusHeaders } from "../Header";
-import Message from "../Message";
+import { NServiceBusHeaders } from "../../../resources/Header";
+import Message from "../../../resources/Message";
 import { Handler } from "./Handler";
 
 export interface Endpoint {
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointTooltip.vue b/src/Frontend/src/components/messages2/SequenceDiagram/EndpointTooltip.vue
index 14b616567..51913c5ac 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointTooltip.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/EndpointTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Endpoint } from "@/resources/SequenceDiagram/Endpoint";
+import { Endpoint } from "@/components/messages2/SequenceDiagram/Endpoint";
 
 defineProps<{ endpoint: Endpoint }>();
 </script>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
index ded1ec7b2..3b13a37ea 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Endpoint } from "@/resources/SequenceDiagram/Endpoint";
+import { Endpoint } from "@/components/messages2/SequenceDiagram/Endpoint";
 import { Endpoint_Width, EndpointCentrePoint, useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
@@ -67,7 +67,7 @@ const endpointItems = computed(() =>
 );
 
 watch(endpointItems, () => {
-  store.setEndpointCentrePoints(endpointItems.value.map((endpoint) => ({ name: endpoint.name, centre: endpoint.x ?? 0, top: (endpoint.surround?.y ?? 0) + (endpoint.surround?.height ?? 0) + 15 }) as EndpointCentrePoint));
+  store.setEndpointCentrePoints(endpointItems.value.map((endpoint) => ({ name: endpoint.name, centre: endpoint.x, top: (endpoint.surround?.y ?? 0) + (endpoint.surround?.height ?? 0) + 15 }) as EndpointCentrePoint));
   const lastEndpoint = endpointItems.value[endpointItems.value.length - 1];
   store.setMaxWidth((lastEndpoint.x ?? 0) + lastEndpoint.width);
 });
diff --git a/src/Frontend/src/resources/SequenceDiagram/Handler.ts b/src/Frontend/src/components/messages2/SequenceDiagram/Handler.ts
similarity index 88%
rename from src/Frontend/src/resources/SequenceDiagram/Handler.ts
rename to src/Frontend/src/components/messages2/SequenceDiagram/Handler.ts
index a7bd3a068..6ca9008f4 100644
--- a/src/Frontend/src/resources/SequenceDiagram/Handler.ts
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/Handler.ts
@@ -1,8 +1,8 @@
-import { NServiceBusHeaders } from "../Header";
-import Message, { MessageStatus } from "../Message";
+import { NServiceBusHeaders } from "../../../resources/Header";
+import Message, { MessageStatus } from "../../../resources/Message";
 import { Direction, MessageProcessingRoute, RoutedMessage } from "./RoutedMessage";
 import { Endpoint } from "./Endpoint";
-import { friendlyTypeName } from "./SequenceModel";
+import { formatDotNetTimespan, friendlyTypeName } from "../utils";
 
 export interface Handler {
   readonly id: string;
@@ -16,7 +16,7 @@ export interface Handler {
   readonly outMessages: RoutedMessage[];
   processedAt?: Date;
   readonly handledAt?: Date;
-  processingTime?: number;
+  processingTime?: string;
   readonly direction: Direction;
   route?: MessageProcessingRoute;
   readonly selectedMessage?: Message;
@@ -58,10 +58,7 @@ export class HandlerRegistry {
 
 export function updateProcessingHandler(handler: Handler, message: Message) {
   handler.processedAt = new Date(message.processed_at);
-  //assuming if we have days in the timespan then something is very, very wrong
-  //TODO: extract logic since it's also currently used in AuditList
-  const [hh, mm, ss] = message.processing_time.split(":");
-  handler.processingTime = ((parseInt(hh) * 60 + parseInt(mm)) * 60 + parseFloat(ss)) * 1000;
+  handler.processingTime = formatDotNetTimespan(message.processing_time);
   handler.name = message.message_type;
   handler.friendlyName = friendlyTypeName(message.message_type);
 
@@ -90,7 +87,7 @@ class HandlerItem implements Handler {
   inMessage?: RoutedMessage;
   state: HandlerState = HandlerState.Unknown;
   processedAt?: Date;
-  processingTime?: number;
+  processingTime?: string;
   route?: MessageProcessingRoute;
   uiRef?: SVGElement;
 
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue
index 0f1d52578..5e0be6f95 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts">
-import { useFormatTime } from "@/composables/formatter";
-import { Handler } from "@/resources/SequenceDiagram/Handler";
+import { Handler } from "@/components/messages2/SequenceDiagram/Handler";
 
 defineProps<{ handler: Handler }>();
-
-function formatTime(milliseconds: number) {
-  const time = useFormatTime(milliseconds);
-  return `${time.value} ${time.unit}`;
-}
 </script>
 
 <template>
@@ -16,7 +10,7 @@ function formatTime(milliseconds: number) {
     <div class="title">Processing of Message</div>
     <div class="details">
       <label>Processing Time:</label>
-      <span>{{ formatTime(handler.processingTime ?? 0) }}</span>
+      <span>{{ handler.processingTime }}</span>
       <label>Processing Of:</label>
       <span>{{ handler.friendlyName }}</span>
       <label v-if="handler.partOfSaga">Sagas Invoked:</label>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
index 9f3a4d5d6..69ef88d58 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { HandlerState } from "@/resources/SequenceDiagram/Handler";
+import { HandlerState } from "@/components/messages2/SequenceDiagram/Handler";
 import { computed, onActivated, ref, watch } from "vue";
-import { Direction } from "@/resources/SequenceDiagram/RoutedMessage";
+import { Direction } from "@/components/messages2/SequenceDiagram/RoutedMessage";
 import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
 
@@ -52,8 +52,8 @@ const handlerItems = computed(() => {
 
     //determine which side of the handler to render the messageType on. If it's the left side (for a right arrow) then we apply a negative offset
     const messageTypeOffset = handler.direction === Direction.Right ? ((messageTypeElement?.getBBox().width ?? 0) + 24) * -1 : 20;
-    const left = (endpoint?.centre ?? 0) - Handler_Width / 2;
-    const right = (endpoint?.centre ?? 0) + Handler_Width / 2;
+    const left = (endpoint?.centre ?? store.startX) - Handler_Width / 2;
+    const right = (endpoint?.centre ?? store.startX) + Handler_Width / 2;
     if (left + messageTypeOffset < 0) {
       store.setStartX(-1 * (left + messageTypeOffset) + 20);
     }
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/RouteTooltip.vue b/src/Frontend/src/components/messages2/SequenceDiagram/RouteTooltip.vue
index 0d27be4ee..d55c93696 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/RouteTooltip.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/RouteTooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RoutedMessage, RoutedMessageType } from "@/resources/SequenceDiagram/RoutedMessage";
+import { RoutedMessage, RoutedMessageType } from "@/components/messages2/SequenceDiagram/RoutedMessage";
 
 defineProps<{ routedMessage: RoutedMessage }>();
 </script>
diff --git a/src/Frontend/src/resources/SequenceDiagram/RoutedMessage.ts b/src/Frontend/src/components/messages2/SequenceDiagram/RoutedMessage.ts
similarity index 92%
rename from src/Frontend/src/resources/SequenceDiagram/RoutedMessage.ts
rename to src/Frontend/src/components/messages2/SequenceDiagram/RoutedMessage.ts
index c4c3c8541..a6019afdd 100644
--- a/src/Frontend/src/resources/SequenceDiagram/RoutedMessage.ts
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/RoutedMessage.ts
@@ -1,8 +1,8 @@
-import EndpointDetails from "../EndpointDetails";
-import { NServiceBusHeaders } from "../Header";
-import Message, { MessageIntent, MessageStatus } from "../Message";
+import EndpointDetails from "../../../resources/EndpointDetails";
+import { NServiceBusHeaders } from "../../../resources/Header";
+import Message, { MessageIntent, MessageStatus } from "../../../resources/Message";
 import { Handler } from "./Handler";
-import { friendlyTypeName } from "./SequenceModel";
+import { friendlyTypeName } from "../utils";
 
 export interface RoutedMessage {
   id: string;
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
index d8cd9bcb5..60a2174e3 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Direction, RoutedMessageType } from "@/resources/SequenceDiagram/RoutedMessage";
+import { Direction, RoutedMessageType } from "@/components/messages2/SequenceDiagram/RoutedMessage";
 import { computed, ref } from "vue";
 import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
-import { HandlerState } from "@/resources/SequenceDiagram/Handler";
+import { HandlerState } from "@/components/messages2/SequenceDiagram/Handler";
 
 const Arrow_Head_Width = 10;
 const Message_Type_Margin = 4;
diff --git a/src/Frontend/src/resources/SequenceDiagram/SequenceModel.ts b/src/Frontend/src/components/messages2/SequenceDiagram/SequenceModel.ts
similarity index 90%
rename from src/Frontend/src/resources/SequenceDiagram/SequenceModel.ts
rename to src/Frontend/src/components/messages2/SequenceDiagram/SequenceModel.ts
index 3ce04dad6..26dd25a2c 100644
--- a/src/Frontend/src/resources/SequenceDiagram/SequenceModel.ts
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/SequenceModel.ts
@@ -1,5 +1,5 @@
-import { NServiceBusHeaders } from "../Header";
-import Message from "../Message";
+import { NServiceBusHeaders } from "../../../resources/Header";
+import Message from "../../../resources/Message";
 import { createRoutedMessage, createRoute, MessageProcessingRoute } from "./RoutedMessage";
 import { createProcessingEndpoint, createSendingEndpoint, Endpoint, EndpointRegistry } from "./Endpoint";
 import { ConversationStartHandlerName, createProcessingHandler, createSendingHandler, Handler, HandlerRegistry, updateProcessingHandler } from "./Handler";
@@ -8,15 +8,6 @@ export interface ConversationModel {
   endpoints: Endpoint[];
 }
 
-//TODO: extract to common area if this continues to be used in AuditList
-export function friendlyTypeName(messageType: string) {
-  if (messageType == null) return undefined;
-
-  const typeClass = messageType.split(",")[0];
-  const typeName = typeClass.split(".").reverse()[0];
-  return typeName.replace(/\+/g, ".");
-}
-
 export class ModelCreator implements ConversationModel {
   #endpoints: Endpoint[];
   #handlers: Handler[];
@@ -136,7 +127,6 @@ class MessageTreeNode {
   }
 
   walk(): Message[] {
-    //TODO: check performance of this. We may need to pre-calculate the processed_at as a date on the message object
     return [this.#message, ...this.children.sort((a, b) => new Date(a.message.processed_at).getTime() - new Date(b.message.processed_at).getTime()).flatMap((child) => child.walk())];
   }
 }
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/TimelineComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/TimelineComponent.vue
index faad6f882..550dc974a 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/TimelineComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/TimelineComponent.vue
@@ -8,6 +8,6 @@ const { endpointCentrePoints, maxHeight } = storeToRefs(store);
 
 <template>
   <g v-for="timeline in endpointCentrePoints" :key="timeline.name">
-    <path :d="`M${timeline.centre} ${timeline.top} v0 ${maxHeight - timeline.top}`" stroke="var(--gray90)" stroke-width="2" />
+    <path v-if="timeline.centre" :d="`M${timeline.centre} ${timeline.top} v0 ${maxHeight - timeline.top}`" stroke="var(--gray90)" stroke-width="2" />
   </g>
 </template>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts b/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts
index b72e5f6f5..bfff85bd0 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts
@@ -5,7 +5,7 @@ import { useTippy } from "vue-tippy";
 import EndpointTooltip from "./EndpointTooltip.vue";
 import HandlerTooltip from "./HandlerTooltip.vue";
 import RouteTooltip from "./RouteTooltip.vue";
-import { HandlerState } from "@/resources/SequenceDiagram/Handler";
+import { HandlerState } from "@/components/messages2/SequenceDiagram/Handler";
 
 export default function useTooltips() {
   const store = useSequenceDiagramStore();
diff --git a/src/Frontend/src/components/messages2/utils.ts b/src/Frontend/src/components/messages2/utils.ts
new file mode 100644
index 000000000..7bbc4f6ef
--- /dev/null
+++ b/src/Frontend/src/components/messages2/utils.ts
@@ -0,0 +1,16 @@
+import { useFormatTime } from "@/composables/formatter";
+
+export function friendlyTypeName(messageType: string) {
+  if (messageType == null) return undefined;
+
+  const typeClass = messageType.split(",")[0];
+  const typeName = typeClass.split(".").reverse()[0];
+  return typeName.replace(/\+/g, ".");
+}
+
+export function formatDotNetTimespan(timespan: string) {
+  //assuming if we have days in the timespan then something is very, very wrong
+  const [hh, mm, ss] = timespan.split(":");
+  const time = useFormatTime(((parseInt(hh) * 60 + parseInt(mm)) * 60 + parseFloat(ss)) * 1000);
+  return `${time.value} ${time.unit}`;
+}
diff --git a/src/Frontend/src/resources/FailedMessage.ts b/src/Frontend/src/resources/FailedMessage.ts
index 20002e990..e29e7abfe 100644
--- a/src/Frontend/src/resources/FailedMessage.ts
+++ b/src/Frontend/src/resources/FailedMessage.ts
@@ -1,6 +1,4 @@
 import type EndpointDetails from "@/resources/EndpointDetails";
-import type Header from "@/resources/Header";
-import { ConversationModel } from "./SequenceDiagram/SequenceModel";
 
 export default interface FailedMessage {
   id: string;
@@ -20,41 +18,11 @@ export default interface FailedMessage {
   edit_of: string;
 }
 
-export interface ExtendedFailedMessage extends FailedMessage {
-  error_retention_period: number;
-  delete_soon: boolean;
-  deleted_in: string;
-  retryInProgress: boolean;
-  deleteInProgress: boolean;
-  restoreInProgress: boolean;
-  selected: boolean;
-  retried: boolean;
-  archiving: boolean;
-  restoring: boolean;
-  archived: boolean;
-  resolved: boolean;
-  headersNotFound: boolean;
-  messageBodyNotFound: boolean;
-  bodyUnavailable: boolean;
-  headers: Header[];
-  conversationId: string;
-  conversation?: ConversationModel;
-  messageBody: string;
-  contentType: string;
-  isEditAndRetryEnabled: boolean;
-  redirect: boolean;
-  submittedForRetrial: boolean;
-}
-
 export interface FailedMessageError {
   notFound: boolean;
   error: boolean;
 }
 
-export function isError(obj: ExtendedFailedMessage | FailedMessageError): obj is FailedMessageError {
-  return (obj as FailedMessageError).error !== undefined || (obj as FailedMessageError).notFound !== undefined;
-}
-
 export interface ExceptionDetails {
   exception_type: string;
   message: string;
diff --git a/src/Frontend/src/stores/SequenceDiagramStore.ts b/src/Frontend/src/stores/SequenceDiagramStore.ts
index 72e6f2634..e10e16b5b 100644
--- a/src/Frontend/src/stores/SequenceDiagramStore.ts
+++ b/src/Frontend/src/stores/SequenceDiagramStore.ts
@@ -1,16 +1,16 @@
 import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
-import { ModelCreator } from "@/resources/SequenceDiagram/SequenceModel";
-import { Endpoint } from "@/resources/SequenceDiagram/Endpoint";
-import { Handler } from "@/resources/SequenceDiagram/Handler";
-import { MessageProcessingRoute } from "@/resources/SequenceDiagram/RoutedMessage";
+import { ModelCreator } from "@/components/messages2/SequenceDiagram/SequenceModel";
+import { Endpoint } from "@/components/messages2/SequenceDiagram/Endpoint";
+import { Handler } from "@/components/messages2/SequenceDiagram/Handler";
+import { MessageProcessingRoute } from "@/components/messages2/SequenceDiagram/RoutedMessage";
 import { useMessageStore } from "./MessageStore";
 import { useRouter } from "vue-router";
 import routeLinks from "@/router/routeLinks";
 
 export interface EndpointCentrePoint {
   name: string;
-  centre: number;
+  centre?: number;
   top: number;
 }