diff --git a/app/Http/Controllers/LedgerController.php b/app/Http/Controllers/LedgerController.php
index efb3abf..b428dab 100644
--- a/app/Http/Controllers/LedgerController.php
+++ b/app/Http/Controllers/LedgerController.php
@@ -73,13 +73,7 @@ class LedgerController extends Controller
             },
             'mutations.user',
             'mutations.media',
-            'mutations.chat.messages.user',
-            'mutations.chat.messages.media',
-            'mutations.chat.messages.subject' => function ($morphTo) {
-                $morphTo->morphWith([
-                    \App\Models\Mutation::class => ['ledger'],
-                ]);
-            }
+            'mutations.chat',
         ]);
 
         $isOwner = $dynamic->participants()
diff --git a/resources/js/components/Chat.vue b/resources/js/components/Chat.vue
index 4b6d5cc..5879203 100644
--- a/resources/js/components/Chat.vue
+++ b/resources/js/components/Chat.vue
@@ -90,6 +90,18 @@ useEcho(`chats.${props.chat.id}`, 'MessageSent', (e: any) => {
     messages.value.push(e.message);
 });
 
+function formatTimestamp(isoString: string): { full: string; time: string } {
+    const date = new Date(isoString);
+    return {
+        full: date.toLocaleString(),
+        time: date.toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+        }),
+    };
+}
+
 const participantsById = computed(() => {
     const list = props.participants || [];
     return list.reduce(
@@ -245,13 +257,14 @@ function closeLightbox() {
                         <span class="c-chat__message-author">{{
                             message.user.name
                         }}</span>
-                        <span class="c-chat__message-time">{{
-                            new Date(message.created_at).toLocaleString()
-                        }}</span>
+                        <span
+                            class="c-chat__message-time"
+                            :title="formatTimestamp(message.created_at).full"
+                        >
+                            {{ formatTimestamp(message.created_at).time }}
+                        </span>
                     </div>
-                    <p class="c-chat__message-text">
-                        {{ message.content }}
-                    </p>
+                    <p class="c-chat__message-text" v-html="parseMessageContent(message)"></p>
 
                     <!-- Attached Media Display -->
                     <div
@@ -293,13 +306,11 @@ function closeLightbox() {
                             class="c-chat__system-text"
                             v-html="parseMessageContent(message)"
                         ></span>
-                        <span class="c-chat__system-time">
-                            {{
-                                new Date(message.created_at).toLocaleTimeString(
-                                    [],
-                                    { hour: '2-digit', minute: '2-digit' },
-                                )
-                            }}
+                        <span
+                            class="c-chat__system-time"
+                            :title="formatTimestamp(message.created_at).full"
+                        >
+                            {{ formatTimestamp(message.created_at).time }}
                         </span>
                     </div>
                 </template>
diff --git a/resources/js/pages/Dynamics/Participants/Show.vue b/resources/js/pages/Dynamics/Participants/Show.vue
index 6db4bd8..8a3482c 100644
--- a/resources/js/pages/Dynamics/Participants/Show.vue
+++ b/resources/js/pages/Dynamics/Participants/Show.vue
@@ -1,7 +1,28 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
-import AppLayout from '@/layouts/AppLayout.vue';
+
+defineOptions({
+    layout: {
+        breadcrumbs: [
+            {
+                name: 'Dynamics',
+                href: route('dynamics.index'),
+                isCurrent: false,
+            },
+            {
+                name: 'dynamic.name',
+                href: 'route(\'dynamics.show\', dynamic.id)',
+                isCurrent: false,
+            },
+            {
+                name: 'participant.display_name',
+                href: 'route(\'dynamics.users.show\', { dynamic: dynamic.id, user: participant.id })',
+                isCurrent: true,
+            },
+        ],
+    },
+});
 
 const props = defineProps<{
     dynamic: {
@@ -43,44 +64,42 @@ const breadcrumbs = [
 <template>
     <Head :title="participant.display_name ?? participant.name" />
 
-    <AppLayout :breadcrumbs="breadcrumbs">
-        <div class="c-participant-show">
-            <div class="c-participant-show__container">
-                <h2 class="c-participant-show__title">
-                    Activity for {{ participant.display_name ?? participant.name }} ({{ participant.role.toUpperCase() }}) in {{ dynamic.name }}
-                </h2>
+    <div class="c-participant-show">
+        <div class="c-participant-show__container">
+            <h2 class="c-participant-show__title">
+                Activity for {{ participant.display_name ?? participant.name }} ({{ participant.role.toUpperCase() }}) in {{ dynamic.name }}
+            </h2>
 
-                <div class="c-participant-show__activity-list">
-                    <div
-                        v-for="mutation in mutations"
-                        :key="mutation.id"
-                        class="c-participant-show__activity-item"
-                    >
-                        <Link :href="route('dynamics.ledgers.show', [dynamic.id, mutation.ledger.id])" class="block">
-                            <div class="c-participant-show__activity-meta">
-                                <span class="c-participant-show__activity-time">
-                                    {{ new Date(mutation.created_at).toLocaleString() }}
-                                </span>
-                                <span class="font-semibold ml-2" :class="mutation.amount > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
-                                    {{ mutation.amount > 0 ? '+' : '' }}{{ mutation.amount }}
-                                </span>
-                                <span class="text-neutral-400 ml-2">on {{ mutation.ledger.name }}</span>
-                                <span class="uppercase text-xs px-1.5 py-0.5 rounded ml-auto" :class="mutation.status === 'approved' ? 'bg-green-100 text-green-700 dark:bg-green-950/30 dark:text-green-400' : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-950/30 dark:text-yellow-400'">
-                                    {{ mutation.status }}
-                                </span>
-                            </div>
-                            <p class="c-participant-show__activity-desc">
-                                {{ mutation.description }}
-                            </p>
-                        </Link>
-                    </div>
-                    <div v-if="mutations.length === 0" class="text-neutral-500 text-sm">
-                        No mutations recorded for this participant in this Dynamic yet.
-                    </div>
+            <div class="c-participant-show__activity-list">
+                <div
+                    v-for="mutation in mutations"
+                    :key="mutation.id"
+                    class="c-participant-show__activity-item"
+                >
+                    <Link :href="route('dynamics.ledgers.show', [dynamic.id, mutation.ledger.id])" class="block">
+                        <div class="c-participant-show__activity-meta">
+                            <span class="c-participant-show__activity-time">
+                                {{ new Date(mutation.created_at).toLocaleString() }}
+                            </span>
+                            <span class="font-semibold ml-2" :class="mutation.amount > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
+                                {{ mutation.amount > 0 ? '+' : '' }}{{ mutation.amount }}
+                            </span>
+                            <span class="text-neutral-400 ml-2">on {{ mutation.ledger.name }}</span>
+                            <span class="uppercase text-xs px-1.5 py-0.5 rounded ml-auto" :class="mutation.status === 'approved' ? 'bg-green-100 text-green-700 dark:bg-green-950/30 dark:text-green-400' : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-950/30 dark:text-yellow-400'">
+                                {{ mutation.status }}
+                            </span>
+                        </div>
+                        <p class="c-participant-show__activity-desc">
+                            {{ mutation.description }}
+                        </p>
+                    </Link>
+                </div>
+                <div v-if="mutations.length === 0" class="text-neutral-500 text-sm">
+                    No mutations recorded for this participant in this Dynamic yet.
                 </div>
             </div>
         </div>
-    </AppLayout>
+    </div>
 </template>
 
 <style scoped>
diff --git a/resources/js/pages/Dynamics/Show.vue b/resources/js/pages/Dynamics/Show.vue
index 8b2a8a9..64322ae 100644
--- a/resources/js/pages/Dynamics/Show.vue
+++ b/resources/js/pages/Dynamics/Show.vue
@@ -5,6 +5,23 @@ import LedgerList from '@/components/LedgerList.vue';
 import { Head, Link as InertiaLink } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
 
+defineOptions({
+    layout: {
+        breadcrumbs: [
+            {
+                name: 'Dynamics',
+                href: route('dynamics.index'),
+                isCurrent: false,
+            },
+            {
+                name: 'dynamic.name',
+                href: 'route(\'dynamics.show\', dynamic.id)',
+                isCurrent: true,
+            },
+        ],
+    },
+});
+
 const props = defineProps<{
     dynamic: {
         id: number;
@@ -65,7 +82,7 @@ const breadcrumbs = [
             <Chat :chat="dynamic.chat" :initial-messages="messages" :participants="dynamic.participants" :dynamic-id="dynamic.id" />
 
             <!-- Participants Component -->
-            <ParticipantsList :participants="dynamic.participants" />
+            <ParticipantsList :dynamic-id="dynamic.id" :participants="dynamic.participants" />
 
             <!-- Ledgers List Component -->
             <LedgerList :dynamic-id="dynamic.id" :ledgers="dynamic.ledgers" />
diff --git a/resources/js/pages/Ledgers/Show.vue b/resources/js/pages/Ledgers/Show.vue
index dff1c6c..e191d4a 100644
--- a/resources/js/pages/Ledgers/Show.vue
+++ b/resources/js/pages/Ledgers/Show.vue
@@ -7,6 +7,28 @@ import AddMutationForm from '@/components/AddMutationForm.vue';
 import Chat from '@/components/Chat.vue';
 import MutationList from '@/components/MutationList.vue';
 
+defineOptions({
+    layout: {
+        breadcrumbs: [
+            {
+                name: 'Dynamics',
+                href: route('dynamics.index'),
+                isCurrent: false,
+            },
+            {
+                name: 'dynamic.name',
+                href: 'route(\'dynamics.show\', dynamic.id)',
+                isCurrent: false,
+            },
+            {
+                name: 'ledger.name',
+                href: 'route(\'dynamics.ledgers.show\', { dynamic: dynamic.id, ledger: ledger.id })',
+                isCurrent: true,
+            },
+        ],
+    },
+});
+
 const props = defineProps<{
     dynamic: {
         id: number;