diff --git a/frontend/src/components/assessment/ActivityDetectionSection.vue b/frontend/src/components/assessment/ActivityDetectionSection.vue
index 6d62eb5..78ca662 100644
--- a/frontend/src/components/assessment/ActivityDetectionSection.vue
+++ b/frontend/src/components/assessment/ActivityDetectionSection.vue
@@ -2,6 +2,7 @@
 import { ChevronDown } from 'lucide-vue-next';
 import { computed } from 'vue';
 import ActivityAssetsManager from '@/components/assessment/ActivityAssetsManager.vue';
+import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
     Collapsible,
@@ -19,7 +20,9 @@ import {
     SelectValue,
 } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
+import { usePreferencesStore } from '@/stores/preferences';
 import type { ActivityRead, AssetRead } from '@/types/utils';
+import { formatDateTime } from '@/utils/dateFormatter';
 import { schemas } from '@/types/zod';
 
 const props = defineProps<{
@@ -37,6 +40,17 @@ const formData = defineModel<Partial<ActivityRead>>('formData', {
 });
 
 const severityOptions = schemas.ActivitySeverity.options;
+const preferencesStore = usePreferencesStore();
+
+// Formatted date strings for readonly display
+function readonlyDate(value: string | null | undefined): string {
+    return formatDateTime(
+        value,
+        preferencesStore.effectiveTimezone,
+        preferencesStore.dateFormat,
+        preferencesStore.timeFormat,
+    );
+}
 
 // Writable computed properties for detection toggles
 const logged = computed({
@@ -139,17 +153,26 @@ const stakeholderNotificationCreated = computed({
                             <div class="flex items-center gap-3">
                                 <Label class="text-sm font-semibold" for="switch_logged">Activity Logged</Label>
                             </div>
-                            <Switch id="switch_logged" v-model="logged" :disabled="readonly" />
+                            <template v-if="readonly">
+                                <Badge :class="logged ? 'bg-green-600 text-white' : 'bg-muted text-muted-foreground'">{{ logged ? 'Yes' : 'No' }}</Badge>
+                            </template>
+                            <template v-else>
+                                <Switch id="switch_logged" v-model="logged" />
+                            </template>
                         </div>
 
                         <div v-if="logged" class="space-y-4 pt-2 border-t">
                             <div class="space-y-2 w-full sm:w-1/2 pr-2">
                                 <Label class="text-sm font-medium">Log Time</Label>
-                                <DateTimePicker
-                                    :model-value="formData.log_time ?? undefined"
-                                    @update:model-value="formData.log_time = $event ?? null"
-                                    :disabled="readonly"
-                                />
+                                <template v-if="readonly">
+                                    <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center">{{ readonlyDate(formData.log_time) }}</div>
+                                </template>
+                                <template v-else>
+                                    <DateTimePicker
+                                        :model-value="formData.log_time ?? undefined"
+                                        @update:model-value="formData.log_time = $event ?? null"
+                                    />
+                                </template>
                             </div>
                             <ActivityAssetsManager
                                 :sources="formData.log_sources ?? []"
@@ -185,17 +208,26 @@ const stakeholderNotificationCreated = computed({
                             <div class="flex items-center gap-3">
                                 <Label class="text-sm font-semibold" for="switch_prevented">Activity Prevented</Label>
                             </div>
-                            <Switch id="switch_prevented" v-model="prevented" :disabled="readonly" />
+                            <template v-if="readonly">
+                                <Badge :class="prevented ? 'bg-green-600 text-white' : 'bg-muted text-muted-foreground'">{{ prevented ? 'Yes' : 'No' }}</Badge>
+                            </template>
+                            <template v-else>
+                                <Switch id="switch_prevented" v-model="prevented" />
+                            </template>
                         </div>
 
                         <div v-if="prevented" class="space-y-4 pt-2 border-t">
                             <div class="space-y-2 w-full sm:w-1/2 pr-2">
                                 <Label class="text-sm font-medium">Prevention Time</Label>
-                                <DateTimePicker
-                                    :model-value="formData.prevent_time ?? undefined"
-                                    @update:model-value="formData.prevent_time = $event ?? null"
-                                    :disabled="readonly"
-                                />
+                                <template v-if="readonly">
+                                    <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center">{{ readonlyDate(formData.prevent_time) }}</div>
+                                </template>
+                                <template v-else>
+                                    <DateTimePicker
+                                        :model-value="formData.prevent_time ?? undefined"
+                                        @update:model-value="formData.prevent_time = $event ?? null"
+                                    />
+                                </template>
                             </div>
                             <ActivityAssetsManager
                                 :sources="formData.prevention_sources ?? []"
@@ -231,31 +263,45 @@ const stakeholderNotificationCreated = computed({
                             <div class="flex items-center gap-3">
                                 <Label class="text-sm font-semibold" for="switch_alerted">Alert Generated</Label>
                             </div>
-                            <Switch id="switch_alerted" v-model="alerted" :disabled="readonly" />
+                            <template v-if="readonly">
+                                <Badge :class="alerted ? 'bg-green-600 text-white' : 'bg-muted text-muted-foreground'">{{ alerted ? 'Yes' : 'No' }}</Badge>
+                            </template>
+                            <template v-else>
+                                <Switch id="switch_alerted" v-model="alerted" />
+                            </template>
                         </div>
 
                         <div v-if="alerted" class="space-y-4 pt-2 border-t">
                             <div class="space-y-4">
                                 <div class="space-y-2 w-full sm:w-1/2 pr-2">
                                     <Label class="text-sm font-medium">Alert Time</Label>
-                                    <DateTimePicker
-                                        :model-value="formData.alert_time ?? undefined"
-                                        @update:model-value="formData.alert_time = $event ?? null"
-                                        :disabled="readonly"
-                                    />
+                                    <template v-if="readonly">
+                                        <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center">{{ readonlyDate(formData.alert_time) }}</div>
+                                    </template>
+                                    <template v-else>
+                                        <DateTimePicker
+                                            :model-value="formData.alert_time ?? undefined"
+                                            @update:model-value="formData.alert_time = $event ?? null"
+                                        />
+                                    </template>
                                 </div>
                                 <div class="space-y-2 w-full sm:w-1/2 pr-2">
                                     <Label class="text-sm font-medium">Alert Severity</Label>
-                                    <Select v-model="formData.alert_severity" :disabled="readonly">
-                                        <SelectTrigger class="w-full">
-                                            <SelectValue :placeholder="formData.alert_severity || '\xa0'" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem v-for="opt in severityOptions" :key="opt" :value="opt">
-                                                {{ opt }}
-                                            </SelectItem>
-                                        </SelectContent>
-                                    </Select>
+                                    <template v-if="readonly">
+                                        <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center">{{ formData.alert_severity || '—' }}</div>
+                                    </template>
+                                    <template v-else>
+                                        <Select v-model="formData.alert_severity">
+                                            <SelectTrigger class="w-full">
+                                                <SelectValue :placeholder="formData.alert_severity || '\xa0'" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem v-for="opt in severityOptions" :key="opt" :value="opt">
+                                                    {{ opt }}
+                                                </SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                    </template>
                                 </div>
                             </div>
                             <ActivityAssetsManager
@@ -292,31 +338,45 @@ const stakeholderNotificationCreated = computed({
                             <div class="flex items-center gap-3">
                                 <Label class="text-sm font-semibold" for="switch_stakeholder">Stakeholder Notification Created</Label>
                             </div>
-                            <Switch id="switch_stakeholder" v-model="stakeholderNotificationCreated" :disabled="readonly" />
+                            <template v-if="readonly">
+                                <Badge :class="stakeholderNotificationCreated ? 'bg-green-600 text-white' : 'bg-muted text-muted-foreground'">{{ stakeholderNotificationCreated ? 'Yes' : 'No' }}</Badge>
+                            </template>
+                            <template v-else>
+                                <Switch id="switch_stakeholder" v-model="stakeholderNotificationCreated" />
+                            </template>
                         </div>
 
                         <div v-if="stakeholderNotificationCreated" class="space-y-4 pt-2 border-t">
                             <div class="space-y-4">
                                 <div class="space-y-2 w-full sm:w-1/2 pr-2">
                                     <Label class="text-sm font-medium">Notification Time</Label>
-                                    <DateTimePicker
-                                        :model-value="formData.stakeholder_notification_time ?? undefined"
-                                        @update:model-value="formData.stakeholder_notification_time = $event ?? null"
-                                        :disabled="readonly"
-                                    />
+                                    <template v-if="readonly">
+                                        <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center">{{ readonlyDate(formData.stakeholder_notification_time) }}</div>
+                                    </template>
+                                    <template v-else>
+                                        <DateTimePicker
+                                            :model-value="formData.stakeholder_notification_time ?? undefined"
+                                            @update:model-value="formData.stakeholder_notification_time = $event ?? null"
+                                        />
+                                    </template>
                                 </div>
                                 <div class="space-y-2 w-full sm:w-1/2 pr-2">
                                     <Label class="text-sm font-medium">Notification Severity</Label>
-                                    <Select v-model="formData.stakeholder_notification_severity" :disabled="readonly">
-                                        <SelectTrigger class="w-full">
-                                            <SelectValue :placeholder="formData.stakeholder_notification_severity || '\xa0'" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            <SelectItem v-for="opt in severityOptions" :key="opt" :value="opt">
-                                                {{ opt }}
-                                            </SelectItem>
-                                        </SelectContent>
-                                    </Select>
+                                    <template v-if="readonly">
+                                        <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center">{{ formData.stakeholder_notification_severity || '—' }}</div>
+                                    </template>
+                                    <template v-else>
+                                        <Select v-model="formData.stakeholder_notification_severity">
+                                            <SelectTrigger class="w-full">
+                                                <SelectValue :placeholder="formData.stakeholder_notification_severity || '\xa0'" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem v-for="opt in severityOptions" :key="opt" :value="opt">
+                                                    {{ opt }}
+                                                </SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                    </template>
                                 </div>
                             </div>
                             <ActivityAssetsManager
diff --git a/frontend/src/components/assessment/ActivityEvaluation.vue b/frontend/src/components/assessment/ActivityEvaluation.vue
index e06a57d..53ba9a5 100644
--- a/frontend/src/components/assessment/ActivityEvaluation.vue
+++ b/frontend/src/components/assessment/ActivityEvaluation.vue
@@ -183,9 +183,9 @@ async function handleDynamicQuestionsUpdated() {
                                     <Badge :class="evalBadgeClass(eventToAlertEvalStatus)">{{ eventToAlertEvalStatus }}</Badge>
                                 </div>
                                 <EvalResultToggle
+                                    v-if="!readonly"
                                     :model-value="(formData.evaluation as any)?.event_to_alert_evaluation_result || 'n/a'"
                                     @update:model-value="formData.evaluation = { ...formData.evaluation!, ['event_to_alert_evaluation_result']: $event as any }"
-                                    :disabled="readonly"
                                 />
                             </div>
                             <MarkdownEditor :on-upload="uploadImage" :resolve-image-url="resolveImageUrl"
@@ -204,9 +204,9 @@ async function handleDynamicQuestionsUpdated() {
                                     <Badge :class="evalBadgeClass(alertToStakeholderEvalStatus)">{{ alertToStakeholderEvalStatus }}</Badge>
                                 </div>
                                 <EvalResultToggle
+                                    v-if="!readonly"
                                     :model-value="(formData.evaluation as any)?.alert_to_stakeholder_evaluation_result || 'n/a'"
                                     @update:model-value="formData.evaluation = { ...formData.evaluation!, ['alert_to_stakeholder_evaluation_result']: $event as any }"
-                                    :disabled="readonly"
                                 />
                             </div>
                             <MarkdownEditor :on-upload="uploadImage" :resolve-image-url="resolveImageUrl"
@@ -225,9 +225,9 @@ async function handleDynamicQuestionsUpdated() {
                                     <Badge :class="evalBadgeClass(alertSeverityEvalStatus)">{{ alertSeverityEvalStatus }}</Badge>
                                 </div>
                                 <EvalResultToggle
+                                    v-if="!readonly"
                                     :model-value="(formData.evaluation as any)?.alert_severity_evaluation_result || 'n/a'"
                                     @update:model-value="formData.evaluation = { ...formData.evaluation!, ['alert_severity_evaluation_result']: $event as any }"
-                                    :disabled="readonly"
                                 />
                             </div>
                             <MarkdownEditor :on-upload="uploadImage" :resolve-image-url="resolveImageUrl"
@@ -246,9 +246,9 @@ async function handleDynamicQuestionsUpdated() {
                                     <Badge :class="evalBadgeClass(stakeholderSeverityEvalStatus)">{{ stakeholderSeverityEvalStatus }}</Badge>
                                 </div>
                                 <EvalResultToggle
+                                    v-if="!readonly"
                                     :model-value="(formData.evaluation as any)?.stakeholder_notification_severity_evaluation_result || 'n/a'"
                                     @update:model-value="formData.evaluation = { ...formData.evaluation!, ['stakeholder_notification_severity_evaluation_result']: $event as any }"
-                                    :disabled="readonly"
                                 />
                             </div>
                             <MarkdownEditor :on-upload="uploadImage" :resolve-image-url="resolveImageUrl"
@@ -290,9 +290,9 @@ async function handleDynamicQuestionsUpdated() {
                                         </Badge>
                                     </div>
                                     <EvalResultToggle
+                                        v-if="!readonly"
                                         :model-value="question.evaluation_result || 'n/a'"
                                         @update:model-value="updateDynamicQuestion(question.evaluation_template_id, 'evaluation_result', $event)"
-                                        :disabled="readonly"
                                     />
                                 </div>
                                 <p v-if="evaluationTemplates[question.evaluation_template_id]?.description" class="text-xs text-muted-foreground">
diff --git a/frontend/src/components/assessment/ActivityForm.vue b/frontend/src/components/assessment/ActivityForm.vue
index e0c0557..c6886ae 100644
--- a/frontend/src/components/assessment/ActivityForm.vue
+++ b/frontend/src/components/assessment/ActivityForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { BookOpen, ChevronDown, Copy, History } from 'lucide-vue-next';
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 import ActivityAssetsManager from '@/components/assessment/ActivityAssetsManager.vue';
 import ActivityAttachments from '@/components/assessment/ActivityAttachments.vue';
@@ -10,6 +10,7 @@ import ActivityGeneralInfo from '@/components/assessment/ActivityGeneralInfo.vue
 import ActivityHistoryModal from '@/components/assessment/ActivityHistoryModal.vue';
 import ConflictResolutionDialog from '@/components/assessment/ConflictResolutionDialog.vue';
 import KnowledgeBaseModal from '@/components/assessment/KnowledgeBaseModal.vue';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -50,7 +51,9 @@ import type {
     AssetRead,
     TagRead,
 } from '@/types/utils';
+import { formatDateTime } from '@/utils/dateFormatter';
 import { schemas } from '@/types/zod';
+import { usePreferencesStore } from '@/stores/preferences';
 
 const props = defineProps<{
     activity: ActivityRead;
@@ -107,6 +110,18 @@ const headerStateDisabled = computed(
     () => isSpectator.value || (isBlue.value && !stateEditable.value),
 );
 
+const preferencesStore = usePreferencesStore();
+
+// Formatted date strings for readonly display
+function readonlyDate(value: string | null | undefined): string {
+    return formatDateTime(
+        value,
+        preferencesStore.effectiveTimezone,
+        preferencesStore.dateFormat,
+        preferencesStore.timeFormat,
+    );
+}
+
 const showKBModal = ref(false);
 const showHistoryModal = ref(false);
 const attachmentRefreshKey = ref(0);
@@ -188,7 +203,7 @@ watch(
 
             // Full Initialization (Switching activities or first load)
             formData.value = JSON.parse(JSON.stringify(newVal));
-            originalData.value = JSON.parse(JSON.stringify(newVal)); // Save original snapshot
+
             // Ensure arrays are initialized
             formData.value.sources = formData.value.sources || [];
             formData.value.targets = formData.value.targets || [];
@@ -206,6 +221,11 @@ watch(
             formData.value.prevented = formData.value.prevented ?? false;
             formData.value.stakeholder_notification_created =
                 formData.value.stakeholder_notification_created ?? false;
+
+            // Save original snapshot AFTER default values are applied, watchers run, and v-model normalizes
+            nextTick(() => {
+                originalData.value = JSON.parse(JSON.stringify(formData.value));
+            });
         }
     },
     { immediate: true, deep: true },
@@ -475,6 +495,65 @@ async function handleCloneActivity() {
         isCloning.value = false;
     }
 }
+
+// Unsaved changes detection
+const hasUnsavedChanges = computed(() => {
+    if (!formData.value.id || !originalData.value.id) return false;
+    if (formData.value.id !== originalData.value.id) return false;
+
+    // Fields to ignore when comparing (volatile / externally updated)
+    const ignoreKeys = new Set([
+        'updated_at',
+        'created_at',
+        'linked_knowledge_base_articles',
+    ]);
+
+    const cleanAndSort = (obj: any, isRoot = false): any => {
+        if (Array.isArray(obj)) {
+            const arr = obj
+                .map((v) => cleanAndSort(v, false))
+                .filter((v) => v !== null && v !== undefined && v !== '');
+            return arr.length > 0 ? arr : undefined;
+        }
+        if (obj !== null && typeof obj === 'object') {
+            const sortedKeys = Object.keys(obj).sort();
+            const result: Record<string, any> = {};
+            for (const key of sortedKeys) {
+                if (isRoot && ignoreKeys.has(key)) continue;
+                const val = cleanAndSort(obj[key], false);
+                if (val !== null && val !== undefined && val !== '') {
+                    if (Array.isArray(val) && val.length === 0) continue;
+                    if (
+                        typeof val === 'object' &&
+                        Object.keys(val).length === 0
+                    )
+                        continue;
+                    result[key] = val;
+                }
+            }
+            return Object.keys(result).length > 0 ? result : undefined;
+        }
+        return obj;
+    };
+
+    return (
+        JSON.stringify(cleanAndSort(formData.value, true)) !==
+        JSON.stringify(cleanAndSort(originalData.value, true))
+    );
+});
+
+// Warn on browser tab close / refresh with unsaved changes
+function handleBeforeUnload(e: BeforeUnloadEvent) {
+    if (hasUnsavedChanges.value) {
+        e.preventDefault();
+    }
+}
+onMounted(() => window.addEventListener('beforeunload', handleBeforeUnload));
+onUnmounted(() =>
+    window.removeEventListener('beforeunload', handleBeforeUnload),
+);
+
+defineExpose({ hasUnsavedChanges });
 </script>
 
 <template>
@@ -491,20 +570,24 @@ async function handleCloneActivity() {
                     </p>
                 </div>
                 <div class="flex items-center gap-2">
-                    <Select
-                        :model-value="formData.state ?? undefined"
-                        @update:model-value="formData.state = $event as any"
-                        :disabled="headerStateDisabled"
-                    >
-                        <SelectTrigger class="w-[160px]">
-                            <SelectValue :placeholder="formData.state ?? '\xa0'" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem v-for="opt in headerStateOptions" :key="opt" :value="opt">
-                                {{ opt }}
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
+                    <template v-if="headerStateDisabled">
+                        <Badge variant="outline" class="text-sm px-4 py-2 h-auto">{{ formData.state || '—' }}</Badge>
+                    </template>
+                    <template v-else>
+                        <Select
+                            :model-value="formData.state ?? undefined"
+                            @update:model-value="formData.state = $event as any"
+                        >
+                            <SelectTrigger class="w-[160px]">
+                                <SelectValue :placeholder="formData.state ?? '\xa0'" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem v-for="opt in headerStateOptions" :key="opt" :value="opt">
+                                    {{ opt }}
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </template>
                     <Button v-if="!isSpectator && !isBlue" variant="outline" size="lg" @click="showKBModal = true">
                         <BookOpen class="mr-2 h-4 w-4" />
                         Knowledge Base
@@ -593,19 +676,27 @@ async function handleCloneActivity() {
                         <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                             <div class="space-y-2">
                                 <Label class="text-sm font-medium">Start Time</Label>
-                                <DateTimePicker
-                                    :model-value="formData.activity_start_time ?? undefined"
-                                    @update:model-value="formData.activity_start_time = $event ?? null"
-                                    :disabled="redTeamReadonly"
-                                />
+                                <template v-if="redTeamReadonly">
+                                    <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center">{{ readonlyDate(formData.activity_start_time) }}</div>
+                                </template>
+                                <template v-else>
+                                    <DateTimePicker
+                                        :model-value="formData.activity_start_time ?? undefined"
+                                        @update:model-value="formData.activity_start_time = $event ?? null"
+                                    />
+                                </template>
                             </div>
                             <div class="space-y-2">
                                 <Label class="text-sm font-medium">End Time</Label>
-                                <DateTimePicker
-                                    :model-value="formData.activity_end_time ?? undefined"
-                                    @update:model-value="formData.activity_end_time = $event ?? null"
-                                    :disabled="redTeamReadonly"
-                                />
+                                <template v-if="redTeamReadonly">
+                                    <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center">{{ readonlyDate(formData.activity_end_time) }}</div>
+                                </template>
+                                <template v-else>
+                                    <DateTimePicker
+                                        :model-value="formData.activity_end_time ?? undefined"
+                                        @update:model-value="formData.activity_end_time = $event ?? null"
+                                    />
+                                </template>
                             </div>
                         </div>
                     </div>
diff --git a/frontend/src/components/assessment/ActivityGeneralInfo.vue b/frontend/src/components/assessment/ActivityGeneralInfo.vue
index 5222e75..e9d9732 100644
--- a/frontend/src/components/assessment/ActivityGeneralInfo.vue
+++ b/frontend/src/components/assessment/ActivityGeneralInfo.vue
@@ -2,6 +2,7 @@
 import { ChevronDown } from 'lucide-vue-next';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { toast } from 'vue-sonner';
+import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
     Collapsible,
@@ -11,6 +12,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import MarkdownEditor from '@/components/ui/MarkdownEditor.vue';
+import ReadonlyField from '@/components/ui/ReadonlyField.vue';
 import SearchableSelect from '@/components/ui/SearchableSelect.vue';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
@@ -81,6 +83,31 @@ const activityGroupOptions = computed(() => {
     }));
 });
 
+// Readonly display labels
+const displayTactic = computed(() => {
+    if (!formData.value.mitre_tactic) return null;
+    const opt = availableTacticOptions.value.find(
+        (o) => o.value === formData.value.mitre_tactic,
+    );
+    return opt?.label || formData.value.mitre_tactic;
+});
+
+const displayTechnique = computed(() => {
+    if (!formData.value.mitre_technique) return null;
+    const opt = availableTechniqueOptions.value.find(
+        (o) => o.value === formData.value.mitre_technique,
+    );
+    return opt?.label || formData.value.mitre_technique;
+});
+
+const displayGroup = computed(() => {
+    if (!formData.value.activity_group_id) return null;
+    const opt = activityGroupOptions.value.find(
+        (o) => o.value === formData.value.activity_group_id,
+    );
+    return opt?.label || formData.value.activity_group_id;
+});
+
 // MITRE change handlers
 function handleTacticChange(newTacticId: string | null) {
     formData.value.mitre_tactic = newTacticId || undefined;
@@ -212,67 +239,80 @@ onUnmounted(() => {
                 <!-- Activity Name -->
                 <div class="space-y-2">
                     <Label class="text-sm font-medium">Activity Name</Label>
-                    <Input
-                        v-model="formData.name"
-                        placeholder="Enter activity name"
-                        class="text-base"
-                        :disabled="readonly"
-                    />
+                    <template v-if="readonly">
+                        <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center text-base font-medium">{{ formData.name || '—' }}</div>
+                    </template>
+                    <template v-else>
+                        <Input
+                            v-model="formData.name"
+                            placeholder="Enter activity name"
+                            class="text-base"
+                        />
+                    </template>
                 </div>
 
                 <!-- MITRE ATT&CK -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div class="space-y-2">
-                        <Label class="text-sm font-medium">MITRE Tactic</Label>
-                        <SearchableSelect
-                            :model-value="formData.mitre_tactic"
-                            :options="availableTacticOptions"
-                            placeholder="Select a tactic"
-                            search-placeholder="Search tactics..."
-                            :disabled="readonly"
-                            @update:model-value="handleTacticChange"
-                        />
-                    </div>
-                    <div class="space-y-2">
-                        <Label class="text-sm font-medium">MITRE Technique</Label>
-                        <SearchableSelect
-                            :model-value="formData.mitre_technique"
-                            :options="availableTechniqueOptions"
-                            placeholder="Select a technique"
-                            search-placeholder="Search techniques..."
-                            :disabled="readonly"
-                            @update:model-value="handleTechniqueChange"
-                        />
-                    </div>
+                    <template v-if="readonly">
+                        <ReadonlyField label="MITRE Tactic" :model-value="displayTactic" />
+                        <ReadonlyField label="MITRE Technique" :model-value="displayTechnique" />
+                    </template>
+                    <template v-else>
+                        <div class="space-y-2">
+                            <Label class="text-sm font-medium">MITRE Tactic</Label>
+                            <SearchableSelect
+                                :model-value="formData.mitre_tactic"
+                                :options="availableTacticOptions"
+                                placeholder="Select a tactic"
+                                search-placeholder="Search tactics..."
+                                @update:model-value="handleTacticChange"
+                            />
+                        </div>
+                        <div class="space-y-2">
+                            <Label class="text-sm font-medium">MITRE Technique</Label>
+                            <SearchableSelect
+                                :model-value="formData.mitre_technique"
+                                :options="availableTechniqueOptions"
+                                placeholder="Select a technique"
+                                search-placeholder="Search techniques..."
+                                @update:model-value="handleTechniqueChange"
+                            />
+                        </div>
+                    </template>
                 </div>
 
                 <!-- Priority & Activity Group -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div class="space-y-2">
-                        <Label class="text-sm font-medium">Priority</Label>
-                        <Select :model-value="formData.priority ?? undefined" @update:model-value="formData.priority = $event as any" :disabled="readonly">
-                            <SelectTrigger class="w-full">
-                                <SelectValue :placeholder="formData.priority ?? '\xa0'" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem v-for="opt in priorityOptions" :key="opt" :value="opt">
-                                    {{ opt }}
-                                </SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    <div class="space-y-2">
-                        <Label class="text-sm font-medium">Activity Group</Label>
-                        <SearchableSelect
-                            :model-value="formData.activity_group_id"
-                            :options="activityGroupOptions"
-                            placeholder="Select a group"
-                            search-placeholder="Search groups..."
-                            :clearable="false"
-                            :disabled="readonly"
-                            @update:model-value="formData.activity_group_id = $event || null"
-                        />
-                    </div>
+                    <template v-if="readonly">
+                        <ReadonlyField label="Priority" :model-value="formData.priority as string" />
+                        <ReadonlyField label="Activity Group" :model-value="displayGroup" />
+                    </template>
+                    <template v-else>
+                        <div class="space-y-2">
+                            <Label class="text-sm font-medium">Priority</Label>
+                            <Select :model-value="formData.priority ?? undefined" @update:model-value="formData.priority = $event as any">
+                                <SelectTrigger class="w-full">
+                                    <SelectValue :placeholder="formData.priority ?? '\xa0'" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem v-for="opt in priorityOptions" :key="opt" :value="opt">
+                                        {{ opt }}
+                                    </SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <div class="space-y-2">
+                            <Label class="text-sm font-medium">Activity Group</Label>
+                            <SearchableSelect
+                                :model-value="formData.activity_group_id"
+                                :options="activityGroupOptions"
+                                placeholder="Select a group"
+                                search-placeholder="Search groups..."
+                                :clearable="false"
+                                @update:model-value="formData.activity_group_id = $event || null"
+                            />
+                        </div>
+                    </template>
                 </div>
 
                 <div class="space-y-4">
@@ -308,49 +348,70 @@ onUnmounted(() => {
                         <div class="space-y-4">
                             <div class="space-y-2">
                                 <Label class="text-sm font-medium">Expected Severity</Label>
-                                <Select :model-value="formData.expected_severity ?? undefined" @update:model-value="formData.expected_severity = $event as any" :disabled="readonly">
-                                    <SelectTrigger class="w-full">
-                                        <SelectValue :placeholder="formData.expected_severity ?? '\xa0'" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem v-for="opt in severityOptions" :key="opt" :value="opt">
-                                            {{ opt }}
-                                        </SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                            <div class="flex items-center space-x-3 border rounded-lg p-3.5 hover:bg-accent/50 transition-colors">
-                                <Switch
-                                    id="exp_log"
-                                    v-model="formData.expected_logging"
-                                    :disabled="readonly"
-                                />
-                                <Label htmlFor="exp_log" class="cursor-pointer text-sm font-normal">Expected Logging</Label>
-                            </div>
-                            <div class="flex items-center space-x-3 border rounded-lg p-3.5 hover:bg-accent/50 transition-colors">
-                                <Switch
-                                    id="exp_prev"
-                                    v-model="formData.expected_prevention"
-                                    :disabled="readonly"
-                                />
-                                <Label htmlFor="exp_prev" class="cursor-pointer text-sm font-normal">Expected Prevention</Label>
-                            </div>
-                            <div class="flex items-center space-x-3 border rounded-lg p-3.5 hover:bg-accent/50 transition-colors">
-                                <Switch
-                                    id="exp_alert"
-                                    v-model="formData.expected_alert_creation"
-                                    :disabled="readonly"
-                                />
-                                <Label htmlFor="exp_alert" class="cursor-pointer text-sm font-normal">Expected Alert Creation</Label>
-                            </div>
-                            <div class="flex items-center space-x-3 border rounded-lg p-3.5 hover:bg-accent/50 transition-colors">
-                                <Switch
-                                    id="exp_stakeholder"
-                                    v-model="formData.expected_stakeholder_notification"
-                                    :disabled="readonly"
-                                />
-                                <Label htmlFor="exp_stakeholder" class="cursor-pointer text-sm font-normal">Expected Stakeholder Notification</Label>
+                                <template v-if="readonly">
+                                    <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center">{{ formData.expected_severity || '—' }}</div>
+                                </template>
+                                <template v-else>
+                                    <Select :model-value="formData.expected_severity ?? undefined" @update:model-value="formData.expected_severity = $event as any">
+                                        <SelectTrigger class="w-full">
+                                            <SelectValue :placeholder="formData.expected_severity ?? '\xa0'" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem v-for="opt in severityOptions" :key="opt" :value="opt">
+                                                {{ opt }}
+                                            </SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </template>
                             </div>
+                            <template v-if="readonly">
+                                <div class="flex items-center justify-between border rounded-lg p-3.5">
+                                    <Label class="text-sm font-normal">Expected Logging</Label>
+                                    <Badge :class="formData.expected_logging ? 'bg-green-600 text-white' : 'bg-muted text-muted-foreground'">{{ formData.expected_logging ? 'Yes' : 'No' }}</Badge>
+                                </div>
+                                <div class="flex items-center justify-between border rounded-lg p-3.5">
+                                    <Label class="text-sm font-normal">Expected Prevention</Label>
+                                    <Badge :class="formData.expected_prevention ? 'bg-green-600 text-white' : 'bg-muted text-muted-foreground'">{{ formData.expected_prevention ? 'Yes' : 'No' }}</Badge>
+                                </div>
+                                <div class="flex items-center justify-between border rounded-lg p-3.5">
+                                    <Label class="text-sm font-normal">Expected Alert Creation</Label>
+                                    <Badge :class="formData.expected_alert_creation ? 'bg-green-600 text-white' : 'bg-muted text-muted-foreground'">{{ formData.expected_alert_creation ? 'Yes' : 'No' }}</Badge>
+                                </div>
+                                <div class="flex items-center justify-between border rounded-lg p-3.5">
+                                    <Label class="text-sm font-normal">Expected Stakeholder Notification</Label>
+                                    <Badge :class="formData.expected_stakeholder_notification ? 'bg-green-600 text-white' : 'bg-muted text-muted-foreground'">{{ formData.expected_stakeholder_notification ? 'Yes' : 'No' }}</Badge>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <div class="flex items-center space-x-3 border rounded-lg p-3.5 hover:bg-accent/50 transition-colors">
+                                    <Switch
+                                        id="exp_log"
+                                        v-model="formData.expected_logging"
+                                    />
+                                    <Label htmlFor="exp_log" class="cursor-pointer text-sm font-normal">Expected Logging</Label>
+                                </div>
+                                <div class="flex items-center space-x-3 border rounded-lg p-3.5 hover:bg-accent/50 transition-colors">
+                                    <Switch
+                                        id="exp_prev"
+                                        v-model="formData.expected_prevention"
+                                    />
+                                    <Label htmlFor="exp_prev" class="cursor-pointer text-sm font-normal">Expected Prevention</Label>
+                                </div>
+                                <div class="flex items-center space-x-3 border rounded-lg p-3.5 hover:bg-accent/50 transition-colors">
+                                    <Switch
+                                        id="exp_alert"
+                                        v-model="formData.expected_alert_creation"
+                                    />
+                                    <Label htmlFor="exp_alert" class="cursor-pointer text-sm font-normal">Expected Alert Creation</Label>
+                                </div>
+                                <div class="flex items-center space-x-3 border rounded-lg p-3.5 hover:bg-accent/50 transition-colors">
+                                    <Switch
+                                        id="exp_stakeholder"
+                                        v-model="formData.expected_stakeholder_notification"
+                                    />
+                                    <Label htmlFor="exp_stakeholder" class="cursor-pointer text-sm font-normal">Expected Stakeholder Notification</Label>
+                                </div>
+                            </template>
                         </div>
                     </div>
 
@@ -363,25 +424,38 @@ onUnmounted(() => {
                         <div class="space-y-4">
                             <div class="space-y-2">
                                 <Label class="text-sm font-medium">State</Label>
-                                <Select :model-value="formData.state ?? undefined" @update:model-value="formData.state = $event as any" :disabled="readonly && !stateEditable">
-                                    <SelectTrigger class="w-full">
-                                        <SelectValue :placeholder="formData.state ?? '\xa0'" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem v-for="opt in availableStateOptions" :key="opt" :value="opt">
-                                            {{ opt }}
-                                        </SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                            <div class="flex items-center space-x-3 border rounded-lg p-3.5 hover:bg-accent/50 transition-colors">
-                                <Switch id="visible" v-model="formData.visible" :disabled="readonly" />
-                                <Label htmlFor="visible" class="cursor-pointer text-sm font-medium">Visible</Label>
+                                <template v-if="readonly && !stateEditable">
+                                    <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center">{{ formData.state || '—' }}</div>
+                                </template>
+                                <template v-else>
+                                    <Select :model-value="formData.state ?? undefined" @update:model-value="formData.state = $event as any">
+                                        <SelectTrigger class="w-full">
+                                            <SelectValue :placeholder="formData.state ?? '\xa0'" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem v-for="opt in availableStateOptions" :key="opt" :value="opt">
+                                                {{ opt }}
+                                            </SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </template>
                             </div>
+                            <template v-if="readonly">
+                                <div class="flex items-center justify-between border rounded-lg p-3.5">
+                                    <Label class="text-sm font-medium">Visible</Label>
+                                    <Badge :class="formData.visible ? 'bg-green-600 text-white' : 'bg-muted text-muted-foreground'">{{ formData.visible ? 'Yes' : 'No' }}</Badge>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <div class="flex items-center space-x-3 border rounded-lg p-3.5 hover:bg-accent/50 transition-colors">
+                                    <Switch id="visible" v-model="formData.visible" />
+                                    <Label htmlFor="visible" class="cursor-pointer text-sm font-medium">Visible</Label>
+                                </div>
+                            </template>
 
                             <div class="space-y-2 relative tags-input-container">
                                 <Label class="text-sm font-medium">Tags</Label>
-                                <TagsInput v-model="currentTagNames" :disabled="tagsReadonly ?? readonly" @focus="showTagSuggestions = true">
+                                <TagsInput v-model="currentTagNames" :disabled="tagsReadonly ?? readonly" @focus="showTagSuggestions = true" class="min-h-[38px]">
                                     <TagsInputItem
                                         v-for="item in currentTagNames"
                                         :key="item"
diff --git a/frontend/src/components/assessment/ManageAssetsModal.vue b/frontend/src/components/assessment/ManageAssetsModal.vue
index 5626905..5a6086a 100644
--- a/frontend/src/components/assessment/ManageAssetsModal.vue
+++ b/frontend/src/components/assessment/ManageAssetsModal.vue
@@ -53,6 +53,7 @@ import { useConfirmDialog } from '@/composables/useConfirmDialog';
 import { cn } from '@/lib/utils';
 import { assetService } from '@/services/assetService';
 import { useAuthStore } from '@/stores/auth';
+import CreatableCombobox from '@/components/ui/CreatableCombobox.vue';
 import type { AssetBase, AssetRead } from '@/types/utils';
 
 const props = defineProps<{
@@ -187,6 +188,32 @@ const filteredAssets = computed(() => {
     return assets;
 });
 
+// All unique property keys for autocomplete
+const availablePropertyKeys = computed(() => {
+    const keys = new Set<string>();
+    for (const asset of localAssets.value) {
+        if (asset.properties) {
+            for (const key of Object.keys(asset.properties)) {
+                keys.add(key);
+            }
+        }
+    }
+    return Array.from(keys).sort();
+});
+
+// All unique property values for autocomplete
+const availablePropertyValues = computed(() => {
+    const vals = new Set<string>();
+    for (const asset of localAssets.value) {
+        if (asset.properties) {
+            for (const val of Object.values(asset.properties)) {
+                if (val) vals.add(String(val));
+            }
+        }
+    }
+    return Array.from(vals).sort();
+});
+
 // Helper functions for properties
 function hasProperties(asset: AssetRead): boolean {
     return !!(asset.properties && Object.keys(asset.properties).length > 0);
@@ -672,15 +699,19 @@ watch(
                   :key="index"
                   class="flex gap-2"
                 >
-                  <Input
+                  <CreatableCombobox
                     v-model="prop.key"
+                    :options="availablePropertyKeys"
                     placeholder="Key"
+                    searchPlaceholder="Search or create key..."
                     class="flex-1"
                     :disabled="loading"
                   />
-                  <Input
+                  <CreatableCombobox
                     v-model="prop.value"
+                    :options="availablePropertyValues"
                     placeholder="Value"
+                    searchPlaceholder="Search or create value..."
                     class="flex-1"
                     :disabled="loading"
                   />
diff --git a/frontend/src/components/ui/CreatableCombobox.vue b/frontend/src/components/ui/CreatableCombobox.vue
new file mode 100644
index 0000000..a1d1e93
--- /dev/null
+++ b/frontend/src/components/ui/CreatableCombobox.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Check, ChevronsUpDown } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+    defineProps<{
+        modelValue: string;
+        options: string[];
+        placeholder?: string;
+        searchPlaceholder?: string;
+        disabled?: boolean;
+    }>(),
+    {
+        placeholder: 'Select or create...',
+        searchPlaceholder: 'Search or type...',
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string];
+}>();
+
+const open = ref(false);
+const searchQuery = ref('');
+
+// When opening, reset search to current value
+watch(open, (isOpen) => {
+    if (isOpen) {
+        searchQuery.value = props.modelValue || '';
+    }
+});
+
+const filteredOptions = computed(() => {
+    if (!searchQuery.value) return props.options;
+    const query = searchQuery.value.toLowerCase();
+    return props.options.filter((opt) => opt.toLowerCase().includes(query));
+});
+
+const showCreateOption = computed(() => {
+    if (!searchQuery.value) return false;
+    // Don't show create if exact match exists (case-insensitive)
+    const query = searchQuery.value.toLowerCase();
+    return !props.options.some((opt) => opt.toLowerCase() === query);
+});
+
+function selectOption(value: string) {
+    emit('update:modelValue', value);
+    open.value = false;
+}
+</script>
+
+<template>
+    <div class="relative w-full">
+        <Popover v-model:open="open">
+            <PopoverTrigger as-child>
+                <Button
+                    variant="outline"
+                    role="combobox"
+                    :aria-expanded="open"
+                    :disabled="disabled"
+                    class="w-full justify-between font-normal px-3"
+                    :class="!modelValue && 'text-muted-foreground'"
+                >
+                    <span class="truncate">{{ modelValue || placeholder }}</span>
+                    <ChevronsUpDown class="h-4 w-4 shrink-0 opacity-50 ml-2" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-[var(--reka-popper-anchor-width)] p-0" align="start">
+                <div class="flex flex-col">
+                    <div class="p-2 border-b">
+                        <Input
+                            v-model="searchQuery"
+                            :placeholder="searchPlaceholder"
+                            class="h-9"
+                            @keydown.escape="open = false"
+                            @keydown.enter.prevent="searchQuery ? selectOption(searchQuery) : null"
+                        />
+                    </div>
+                    <div class="max-h-[200px] overflow-y-auto p-1">
+                        <button
+                            v-if="showCreateOption"
+                            type="button"
+                            class="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground border-b mb-1 font-medium text-primary"
+                            @click="selectOption(searchQuery)"
+                        >
+                            <span class="truncate">Create "{{ searchQuery }}"</span>
+                        </button>
+                        
+                        <div
+                            v-if="filteredOptions.length === 0 && !showCreateOption"
+                            class="py-4 text-center text-sm text-muted-foreground"
+                        >
+                            No results found.
+                        </div>
+                        
+                        <button
+                            v-for="option in filteredOptions"
+                            :key="option"
+                            type="button"
+                            class="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
+                            :class="cn('justify-between', modelValue === option && 'bg-accent')"
+                            @click="selectOption(option)"
+                        >
+                            <span class="truncate">{{ option }}</span>
+                            <Check
+                                v-if="modelValue === option"
+                                class="h-4 w-4 shrink-0"
+                            />
+                        </button>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    </div>
+</template>
diff --git a/frontend/src/components/ui/MarkdownEditor.vue b/frontend/src/components/ui/MarkdownEditor.vue
index ce8739d..1d43196 100644
--- a/frontend/src/components/ui/MarkdownEditor.vue
+++ b/frontend/src/components/ui/MarkdownEditor.vue
@@ -2,7 +2,6 @@
 import { ref, computed, nextTick, watch, onMounted, onUnmounted, type ComponentPublicInstance } from 'vue';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
-import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { Loader2, Eye, Pencil, Upload } from 'lucide-vue-next';
 import { useVModel } from '@vueuse/core';
@@ -198,65 +197,71 @@ const handlePaste = async (event: ClipboardEvent) => {
 
 <template>
   <div :class="cn('flex flex-col gap-2 w-full group', className)">
-    <div class="flex items-center justify-between mb-1 min-h-[24px]">
-        <label v-if="label" :for="id" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{{ label }}</label>
-        <div class="flex items-center gap-2 ml-auto" v-if="!disabled">
-             <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                class="h-6 px-2 text-xs flex gap-1 items-center hover:bg-muted"
-                @click="toggleMode"
-                :title="isEditing ? 'Switch to Preview' : 'Edit Markdown'"
-            >
-                <template v-if="isEditing">
-                    <Eye class="h-3 w-3" />
-                    <span>Preview</span>
-                </template>
-                <template v-else>
-                    <Pencil class="h-3 w-3" />
-                    <span>Edit</span>
-                </template>
-            </Button>
-        </div>
-    </div>
+    <label v-if="label" :for="id" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{{ label }}</label>
 
-    <!-- View Mode -->
-    <div
-      v-if="!isEditing"
-      ref="previewRef"
-      class="min-h-[80px] w-full rounded-md border border-input bg-background/50 px-3 py-2 text-sm ring-offset-background md:text-sm prose dark:prose-invert max-w-none hover:bg-muted/20 cursor-pointer transition-colors"
-      :class="{'cursor-default': disabled, 'text-muted-foreground italic': !value}"
-      @click="handlePreviewClick"
-    >
-      <div v-if="value" class="markdown-content" v-html="renderedContent"></div>
-      <div v-else class="select-none flex items-center gap-2">
-         <Pencil class="h-3 w-3 opacity-50"/> <span>{{ placeholder }}</span>
+    <!-- Editor container with tabs -->
+    <div class="rounded-md border border-input overflow-hidden">
+      <!-- Tab bar (hidden when disabled/readonly) -->
+      <div v-if="!disabled" class="flex items-center border-b border-input bg-muted/30 px-1">
+          <button
+              type="button"
+              class="px-3 py-2.5 text-sm font-medium transition-colors relative"
+              :class="!isEditing
+                  ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-primary after:rounded-t'
+                  : 'text-muted-foreground hover:text-foreground'"
+              @click="isEditing && toggleMode()"
+          >
+              <span class="flex items-center gap-1"><Eye class="h-3 w-3" /> Preview</span>
+          </button>
+          <button
+              type="button"
+              class="px-3 py-2.5 text-sm font-medium transition-colors relative"
+              :class="isEditing
+                  ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-primary after:rounded-t'
+                  : 'text-muted-foreground hover:text-foreground'"
+              @click="!isEditing && toggleMode()"
+          >
+              <span class="flex items-center gap-1"><Pencil class="h-3 w-3" /> Write</span>
+          </button>
       </div>
-    </div>
 
-    <!-- Edit Mode -->
-    <div v-else class="relative">
-      <Textarea
-        ref="textareaRef"
-        v-model="value"
-        :id="id"
-        :placeholder="placeholder"
-        :disabled="disabled || isLoading"
-        class="min-h-[150px] font-mono resize-y"
-        @paste="handlePaste"
-        @keydown.esc="toggleMode"
-      />
-      <!-- Loading Overlay -->
-      <div v-if="isLoading" class="absolute inset-0 bg-background/80 flex flex-col items-center justify-center rounded-md backdrop-blur-sm z-10">
-        <Loader2 class="h-6 w-6 animate-spin text-primary" />
-        <span class="text-xs text-muted-foreground mt-2">Uploading image...</span>
+      <!-- View Mode -->
+      <div
+        v-if="!isEditing"
+        ref="previewRef"
+        class="min-h-[80px] w-full bg-background/50 px-3 py-2 text-sm prose dark:prose-invert max-w-none transition-colors"
+        :class="{'cursor-default': disabled, 'hover:bg-muted/20 cursor-pointer': !disabled, 'text-muted-foreground italic': !value}"
+        @click="handlePreviewClick"
+      >
+        <div v-if="value" class="markdown-content" v-html="renderedContent"></div>
+        <div v-else class="select-none flex items-center gap-2">
+           <Pencil v-if="!disabled" class="h-3 w-3 opacity-50"/> <span>{{ placeholder }}</span>
+        </div>
       </div>
-       <div class="text-[10px] text-muted-foreground mt-1 flex gap-4 justify-between px-1">
-            <span v-if="onUpload" class="flex items-center gap-1"><Upload class="h-3 w-3"/> Paste image to upload</span>
-            <span v-else></span>
-            <span>ESC to preview</span>
+
+      <!-- Edit Mode -->
+      <div v-else class="relative">
+        <Textarea
+          ref="textareaRef"
+          v-model="value"
+          :id="id"
+          :placeholder="placeholder"
+          :disabled="disabled || isLoading"
+          class="min-h-[150px] font-mono resize-y border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
+          @paste="handlePaste"
+          @keydown.esc="toggleMode"
+        />
+        <!-- Loading Overlay -->
+        <div v-if="isLoading" class="absolute inset-0 bg-background/80 flex flex-col items-center justify-center rounded-md backdrop-blur-sm z-10">
+          <Loader2 class="h-6 w-6 animate-spin text-primary" />
+          <span class="text-xs text-muted-foreground mt-2">Uploading image...</span>
         </div>
+         <div class="text-[10px] text-muted-foreground mt-1 flex gap-4 justify-between px-1 pb-1">
+              <span v-if="onUpload" class="flex items-center gap-1"><Upload class="h-3 w-3"/> Paste image to upload</span>
+              <span v-else></span>
+              <span>ESC to preview</span>
+          </div>
+      </div>
     </div>
 
     <!-- Image Lightbox -->
diff --git a/frontend/src/components/ui/ReadonlyField.vue b/frontend/src/components/ui/ReadonlyField.vue
new file mode 100644
index 0000000..c0a95ff
--- /dev/null
+++ b/frontend/src/components/ui/ReadonlyField.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Label } from '@/components/ui/label';
+
+withDefaults(defineProps<{
+    label?: string;
+    modelValue?: string | null;
+}>(), {
+    modelValue: null,
+});
+</script>
+
+<template>
+    <div class="space-y-2">
+        <Label v-if="label" class="text-sm font-medium">{{ label }}</Label>
+        <div class="text-sm px-3 py-2 rounded-md border bg-muted/30 min-h-[36px] flex items-center text-foreground">
+            <slot>{{ modelValue || '—' }}</slot>
+        </div>
+    </div>
+</template>
diff --git a/frontend/src/views/AssessmentActivityView.vue b/frontend/src/views/AssessmentActivityView.vue
index d463f78..6439611 100644
--- a/frontend/src/views/AssessmentActivityView.vue
+++ b/frontend/src/views/AssessmentActivityView.vue
@@ -1,9 +1,25 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import {
+    type NavigationGuardNext,
+    onBeforeRouteLeave,
+    onBeforeRouteUpdate,
+    useRoute,
+    useRouter,
+} from 'vue-router';
 import ActivityForm from '@/components/assessment/ActivityForm.vue';
 import ActivityGroupForm from '@/components/assessment/ActivityGroupForm.vue';
 import ActivitySidebar from '@/components/assessment/ActivitySidebar.vue';
+import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
 import {
     ResizableHandle,
     ResizablePanel,
@@ -123,6 +139,53 @@ function handleSidebarToggle() {
         }
     }
 }
+
+const activityFormRef = ref<any>(null);
+const showUnsavedDialog = ref(false);
+let resolveNavigation: ((value: boolean) => void) | null = null;
+
+function checkUnsavedChanges(next: NavigationGuardNext) {
+    if (activityFormRef.value?.hasUnsavedChanges) {
+        showUnsavedDialog.value = true;
+        resolveNavigation = (proceed: boolean) => {
+            if (proceed) next();
+            else next(false);
+        };
+    } else {
+        next();
+    }
+}
+
+onBeforeRouteLeave((_to, _from, next) => {
+    checkUnsavedChanges(next);
+});
+
+onBeforeRouteUpdate((to, from, next) => {
+    if (
+        to.params.activityId !== from.params.activityId ||
+        to.params.groupId !== from.params.groupId
+    ) {
+        checkUnsavedChanges(next);
+    } else {
+        next();
+    }
+});
+
+function confirmDiscard() {
+    showUnsavedDialog.value = false;
+    if (resolveNavigation) {
+        resolveNavigation(true);
+        resolveNavigation = null;
+    }
+}
+
+function cancelNavigation() {
+    showUnsavedDialog.value = false;
+    if (resolveNavigation) {
+        resolveNavigation(false);
+        resolveNavigation = null;
+    }
+}
 </script>
 
 <template>
@@ -146,6 +209,7 @@ function handleSidebarToggle() {
                     <main>
                         <div v-if="currentActivity" class="w-full py-6 px-8 max-w-[2500px] mx-auto">
                             <ActivityForm
+                                ref="activityFormRef"
                                 :activity="currentActivity"
                                 :assessment-id="assessmentId"
                                 :role="userRole"
@@ -172,5 +236,23 @@ function handleSidebarToggle() {
                 </ScrollArea>
             </ResizablePanel>
         </ResizablePanelGroup>
+
+        <!-- Unsaved Changes Dialog -->
+        <AlertDialog :open="showUnsavedDialog" @update:open="(val) => !val && cancelNavigation()">
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Unsaved Changes</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        You have unsaved changes in this activity. Are you sure you want to leave? Your changes will be lost.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel @click="cancelNavigation">Stay on Page</AlertDialogCancel>
+                    <Button variant="destructive" @click="confirmDiscard">
+                        Discard Changes
+                    </Button>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
     </div>
 </template>