diff --git a/packages/client/hmi-client/src/App.vue b/packages/client/hmi-client/src/App.vue
index 424c41e90e..f630dfc065 100644
--- a/packages/client/hmi-client/src/App.vue
+++ b/packages/client/hmi-client/src/App.vue
@@ -1,38 +1,25 @@
 <template>
-	<!-- Sets the Toast notification groups and their respective levels-->
-	<Toast position="top-center" group="error" />
-	<Toast position="top-center" group="warn" />
-	<Toast position="top-center" group="info" />
-	<Toast position="top-center" group="success" />
-	<header>
-		<tera-navbar :active="displayNavBar" />
-	</header>
-	<main>
-		<router-view v-slot="{ Component }">
-			<component class="page" :is="Component" />
-		</router-view>
-		<ConfirmDialog class="w-4" />
-	</main>
-	<footer>
-		<tera-footer />
-	</footer>
+	<Toast position="top-center" />
+	<tera-navbar :active="displayNavBar" />
+	<router-view v-slot="{ Component }">
+		<component class="page" :is="Component" />
+	</router-view>
+	<tera-footer />
 	<tera-common-modal-dialogs />
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, watch } from 'vue';
-import Toast from 'primevue/toast';
-
-import { ToastSeverity, ToastSummaries, useToastService } from '@/services/toast';
 import { useRoute, useRouter } from 'vue-router';
+import Toast from 'primevue/toast';
 import API from '@/api/api';
 import TeraNavbar from '@/components/navbar/tera-navbar.vue';
 import TeraFooter from '@/components/navbar/tera-footer.vue';
+import TeraCommonModalDialogs from '@/components/widgets/tera-common-modal-dialogs.vue';
 import { useProjects } from '@/composables/project';
+import { useCurrentRoute } from '@/router';
+import { ToastSeverity, ToastSummaries, useToastService } from '@/services/toast';
 import { Project } from '@/types/Types';
-import ConfirmDialog from 'primevue/confirmdialog';
-import TeraCommonModalDialogs from './components/widgets/tera-common-modal-dialogs.vue';
-import { useCurrentRoute } from './router/index';
 
 const toast = useToastService();
 
@@ -59,37 +46,23 @@ onMounted(() => useProjects().getAll());
 // Update the project when the projectId changes
 watch(
 	() => route.params.projectId,
-	(projectId) => {
-		useProjects().get(projectId as Project['id']);
+	(projectId, oldProjectId) => {
+		if (projectId !== oldProjectId) {
+			useProjects().get(projectId as Project['id']);
+		}
 	},
 	{ immediate: true }
 );
 </script>
 
 <style scoped>
-main {
-	grid-area: main;
+.page {
 	display: flex;
-	flex-grow: 1;
+	flex: 1;
+	grid-area: main;
 	isolation: isolate;
-	z-index: 1;
 	overflow: hidden;
 	position: relative;
-}
-
-header {
-	grid-area: header;
-}
-
-footer {
-	grid-area: footer;
-}
-
-.page {
 	z-index: 1;
-	flex: 1;
-	min-width: 0;
-	display: flex;
-	flex-grow: 1;
 }
 </style>
diff --git a/packages/client/hmi-client/src/components/intervention-policy/tera-intervention-summary-card.vue b/packages/client/hmi-client/src/components/intervention-policy/tera-intervention-summary-card.vue
new file mode 100644
index 0000000000..9de1c7a679
--- /dev/null
+++ b/packages/client/hmi-client/src/components/intervention-policy/tera-intervention-summary-card.vue
@@ -0,0 +1,57 @@
+<template>
+	<div>
+		<aside>{{ !isEmpty(intervention.dynamicInterventions) ? 'Dynamic' : 'Static' }}</aside>
+		<h5>{{ intervention.name }}</h5>
+		<ul>
+			<li v-for="(staticIntervention, index) in intervention.staticInterventions" :key="`static-${index}`">
+				Set {{ staticIntervention.type }} <strong>{{ staticIntervention.appliedTo }}</strong> to
+				<strong>{{ staticIntervention.value }}</strong> starting at <strong>{{ staticIntervention.timestep }}</strong
+				>&nbsp;day.
+			</li>
+			<li v-for="(dynamicIntervention, index) in intervention.dynamicInterventions" :key="`dynamic-${index}`">
+				Set {{ dynamicIntervention.type }} <strong>{{ dynamicIntervention.appliedTo }}</strong> to
+				<strong>{{ dynamicIntervention.value }}</strong> when
+				<strong>{{ dynamicIntervention.parameter }}</strong> crosses the threshold&nbsp;<strong>{{
+					dynamicIntervention.threshold
+				}}</strong
+				>.
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Intervention } from '@/types/Types';
+import { isEmpty } from 'lodash';
+
+defineProps<{
+	intervention: Intervention;
+}>();
+</script>
+
+<style scoped>
+div {
+	background: var(--surface-section);
+	border: 1px solid var(--surface-border-light);
+	border-radius: var(--border-radius-medium);
+	padding: var(--gap-4) var(--gap-5);
+	box-shadow:
+		0 2px 2px -1px rgba(0, 0, 0, 0.06),
+		0 2px 4px -1px rgba(0, 0, 0, 0.08);
+}
+
+ul {
+	list-style: none;
+	margin-top: var(--gap-2);
+}
+
+li + li {
+	margin-top: var(--gap-1);
+}
+
+aside {
+	color: var(--text-color-subdued);
+	font-size: var(--font-caption);
+	float: right;
+}
+</style>
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
index ce54438630..de61c01a92 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
@@ -4,45 +4,37 @@
 			<h4>Other configuration values for '{{ otherValueList[0].target }}'</h4>
 		</template>
 		<DataTable
-			:value="otherValueList"
-			@update:selection="onCustomSelectionChange"
 			dataKey="id"
-			:rowsPerPageOptions="[10, 20, 50]"
 			tableStyle="min-width: 55rem"
+			:rowsPerPageOptions="[10, 20, 50]"
+			:value="otherValueList"
+			@update:selection="onCustomSelectionChange"
 		>
 			<template #header> </template>
-			<Column headerStyle="width: 2rem">
+			<Column>
 				<template #body="{ data }">
 					<RadioButton
 						v-model="customSelection"
+						variant="filled"
 						:inputId="data.id"
 						:value="data"
-						variant="filled"
 						@change="onCustomSelectionChange(data)"
 					/>
 				</template>
 			</Column>
-			<Column
-				v-for="(col, index) in selectedColumns"
-				:field="col.field"
-				:header="col.header"
-				:sortable="col.field !== 'stats'"
-				:key="index"
-				:style="`width: ${getColumnWidth(col.field)}%`"
-			>
+			<Column sortable>
+				<template #header>Configuration name</template>
+				<template #body="{ data }">{{ data.name }}</template>
+			</Column>
+			<Column sortable>
+				<template #header>Source</template>
+				<template #body="{ data }">{{ data.source }}</template>
+			</Column>
+			<Column sortable>
+				<template #header>Value</template>
 				<template #body="{ data }">
-					<template v-if="col.field === 'name'">
-						{{ data.name }}
-					</template>
-					<template v-if="col.field === 'source'">
-						{{ data.source }}
-					</template>
-					<template v-if="col.field === 'expression'">
-						<section class="inline-flex gap-1">
-							<span class="value-label">Constants</span>
-							<span class="value">{{ numberToNist(data.expression) || data.expression }}</span>
-						</section>
-					</template>
+					<span class="value-label">Constants</span>
+					{{ numberToNist(data.expression) || data.expression }}
 				</template>
 			</Column>
 			<ColumnGroup type="footer">
@@ -85,25 +77,25 @@
 			</ColumnGroup>
 		</DataTable>
 		<template #footer>
-			<Button label="Apply selected value" @click="applySelectedValue" :disabled="!selection" />
+			<Button label="Apply selected value" :disabled="!selection" @click="applySelectedValue" />
 			<Button label="Cancel" severity="secondary" outlined @click="emit('close-modal')" />
 		</template>
 	</tera-modal>
 </template>
 
 <script setup lang="ts">
-import { numberToNist } from '@/utils/number';
-import TeraInputText from '@/components/widgets/tera-input-text.vue';
-import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
-import { DistributionType } from '@/services/distribution';
 import { ref } from 'vue';
 import Button from 'primevue/button';
-import TeraModal from '@/components/widgets/tera-modal.vue';
-import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
-import Row from 'primevue/row';
+import DataTable from 'primevue/datatable';
 import ColumnGroup from 'primevue/columngroup';
 import RadioButton from 'primevue/radiobutton';
+import Row from 'primevue/row';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraModal from '@/components/widgets/tera-modal.vue';
+import { numberToNist } from '@/utils/number';
+import { DistributionType } from '@/services/distribution';
 
 const props = defineProps<{
 	id: string;
@@ -112,11 +104,6 @@ const props = defineProps<{
 }>();
 
 const otherValueList = ref(props.otherValueList);
-const columns = ref([
-	{ field: 'name', header: 'Configuration name' },
-	{ field: 'source', header: 'Source' },
-	{ field: 'expression', header: 'Value' }
-]);
 
 const emit = defineEmits(['update-expression', 'update-source', 'close-modal']);
 
@@ -126,7 +113,6 @@ const customConstant = ref(0);
 
 const numberOptions = [DistributionType.Constant, DistributionType.Uniform];
 
-const selectedColumns = ref(columns.value);
 const customSelection = ref(false);
 const selection = ref<null | { id?: string; source?: string; constant?: number }>(null);
 
@@ -141,19 +127,6 @@ const onCustomSelectionChange = (val) => {
 	}
 };
 
-function getColumnWidth(columnField: string) {
-	switch (columnField) {
-		case 'name':
-			return 40;
-		case 'source':
-			return 20;
-		case 'expression':
-			return 100;
-		default:
-			return 100;
-	}
-}
-
 function applySelectedValue() {
 	emit('update-expression', { id: props.id, value: selection.value?.constant });
 	emit('update-source', { id: props.id, value: selection.value?.source });
@@ -162,26 +135,34 @@ function applySelectedValue() {
 </script>
 
 <style scoped>
-.value-label {
-	color: var(--surface-600);
-	padding-right: 1rem;
+/* Override PrimeVue styles */
+:deep(.p-datatable-table) th {
+	padding: var(--gap-4);
+	width: 100%;
 }
-.value {
-	color: var(--surface-900);
+:deep(.p-datatable-table) th:nth-of-type(1) {
+	width: 2rem;
+}
+:deep(.p-datatable-table) th:nth-of-type(2) {
+	width: 40%;
+}
+:deep(.p-datatable-table) th:nth-of-type(3) {
+	width: 20%;
+}
+
+.value-label {
+	color: var(--text-color-subdued);
+	padding-right: var(--gap-4);
 }
 
 .custom-input-label {
+	align-items: center;
 	display: flex;
 	justify-content: left;
-	align-items: center;
-	padding-right: 1rem;
+	padding-right: var(--gap-4);
 }
 
 .custom-input {
 	height: 100%;
 }
-
-:deep(input) {
-	margin-top: 1rem;
-}
 </style>
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
index 250417a441..9d99911fc1 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
@@ -6,7 +6,7 @@
 				<tera-input-text v-model="filterText" placeholder="Filter" class="w-2 p-1" />
 			</template>
 
-			<ul class="pl-1">
+			<ul>
 				<li v-for="{ baseInitial, childInitials, isVirtual } in initialList" :key="baseInitial">
 					<!-- Stratified -->
 					<section v-if="isVirtual" class="initial-entry-stratified">
@@ -16,22 +16,19 @@
 									<span>{{ baseInitial }}</span>
 									<Button label="Open Matrix" text size="small" @click.stop="matrixModalId = baseInitial" />
 								</template>
-								<div class="flex">
-									<ul class="ml-1">
-										<li v-for="{ target } in childInitials" :key="target">
-											<tera-initial-entry
-												:model="model"
-												:model-configuration="modelConfiguration"
-												:modelConfigurations="modelConfigurations"
-												:initial-id="target"
-												:feature-config="featureConfig"
-												@update-expression="emit('update-expression', $event)"
-												@update-source="emit('update-source', $event)"
-											/>
-											<Divider type="solid" />
-										</li>
-									</ul>
-								</div>
+								<ul>
+									<li v-for="{ target } in childInitials" :key="target">
+										<tera-initial-entry
+											:model="model"
+											:model-configuration="modelConfiguration"
+											:modelConfigurations="modelConfigurations"
+											:feature-config="featureConfig"
+											:initial-id="target"
+											@update-expression="emit('update-expression', $event)"
+											@update-source="emit('update-source', $event)"
+										/>
+									</li>
+								</ul>
 							</AccordionTab>
 						</Accordion>
 					</section>
@@ -47,7 +44,6 @@
 						@update-expression="emit('update-expression', $event)"
 						@update-source="emit('update-source', $event)"
 					/>
-					<Divider type="solid" />
 				</li>
 			</ul>
 		</AccordionTab>
@@ -74,7 +70,6 @@ import { MiraModel, MiraTemplateParams } from '@/model-representation/mira/mira-
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import Button from 'primevue/button';
-import Divider from 'primevue/divider';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import type { FeatureConfig } from '@/types/common';
 import TeraStratifiedMatrixModal from './model-configurations/tera-stratified-matrix-modal.vue';
@@ -125,8 +120,13 @@ const filterText = ref('');
 <style scoped>
 ul {
 	flex-grow: 1;
+	padding-left: var(--gap-1);
+
 	li {
+		border-bottom: 1px solid var(--gray-300);
 		list-style: none;
+		margin-bottom: var(--gap-1-5);
+		padding-bottom: var(--gap-1-5);
 	}
 }
 
@@ -141,16 +141,4 @@ ul {
 	margin-left: var(--gap-1);
 	margin-right: auto;
 }
-
-:deep(.p-divider) {
-	&.p-divider-horizontal {
-		margin-top: var(--gap-2);
-		margin-bottom: var(--gap-2);
-		color: var(--gray-300);
-	}
-	&.p-divider-vertical {
-		margin-left: var(--gap-small);
-		margin-right: var(--gap);
-	}
-}
 </style>
diff --git a/packages/client/hmi-client/src/components/navbar/tera-footer.vue b/packages/client/hmi-client/src/components/navbar/tera-footer.vue
index 91293fa0e6..c1335d8524 100644
--- a/packages/client/hmi-client/src/components/navbar/tera-footer.vue
+++ b/packages/client/hmi-client/src/components/navbar/tera-footer.vue
@@ -1,6 +1,6 @@
 <template>
-	<section>
-		<img src="@assets/svg/uncharted-logo-dark.svg" alt="logo" class="ml-2" />
+	<footer>
+		<img src="@assets/svg/uncharted-logo-dark.svg" alt="logo" />
 		<nav>
 			<a target="_blank" rel="noopener noreferrer" href="https://terarium.canny.io/report-an-issue">
 				Report an issue
@@ -9,27 +9,32 @@
 				Request a feature
 			</a>
 		</nav>
-	</section>
+	</footer>
 </template>
 
 <style scoped>
-section {
+footer {
 	align-items: center;
 	background-color: var(--surface-section);
 	border-top: 1px solid var(--surface-border-light);
 	display: flex;
-	gap: 2rem;
+	gap: var(--gap-8);
+	grid-area: footer;
 	height: 3rem;
 	justify-content: space-between;
 }
 
+img {
+	margin-left: var(--gap-2);
+}
+
 nav {
-	font-size: var(--font-caption);
-	margin: 0 2rem;
-	display: flex;
 	align-items: center;
+	display: flex;
+	font-size: var(--font-caption);
+	gap: var(--gap-8);
 	justify-content: space-around;
-	gap: 2rem;
+	margin: 0 var(--gap-8);
 }
 
 a {
@@ -39,8 +44,4 @@ a {
 p {
 	max-width: 40rem;
 }
-
-article > img {
-	margin: 1rem 0;
-}
 </style>
diff --git a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
index 17950257f4..20817b5eb6 100644
--- a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
+++ b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
@@ -450,9 +450,10 @@ nav {
 	align-items: center;
 	background-color: var(--surface-section);
 	border-bottom: 1px solid var(--surface-border-light);
-	padding: 0.5rem 1rem;
+	padding: var(--gap-2) var(--gap-4);
 	display: flex;
 	gap: var(--gap-large);
+	grid-area: header;
 
 	a,
 	a:hover {
@@ -461,21 +462,21 @@ nav {
 }
 
 .terarium-logo {
-	margin-top: 5px;
+	margin-top: var(--gap-1-5);
 }
 .layout-project-selection {
 	margin-right: auto;
 }
 
 .avatar {
-	color: var(--text-color-subdued);
 	background-color: var(--primary-color-lighter);
+	color: var(--text-color-subdued);
 	cursor: pointer;
 }
 
 .avatar:hover {
-	color: var(--text-color);
 	background-color: var(--primary-color-light);
+	color: var(--text-color);
 }
 
 /* Split button
@@ -597,12 +598,12 @@ nav {
 }
 .status-chip {
 	background-color: var(--surface-highlight);
+	border-radius: var(--border-radius);
 	padding: var(--gap-small);
-	border-radius: 3rem;
 }
 .field-checkbox {
-	font-size: var(--font-small);
+	font-size: var(--font-body-small);
 	color: var(--text-color-primary);
-	margin-bottom: 0rem;
+	margin-bottom: 0;
 }
 </style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index 69ef6bfede..fe1753502f 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -498,7 +498,7 @@ import TeraSaveSimulationModal from '@/components/project/tera-save-simulation-m
 import { useClientEvent } from '@/composables/useClientEvent';
 import { useDrilldownChartSize } from '@/composables/useDrilldownChartSize';
 import { flattenInterventionData, getInterventionPolicyById } from '@/services/intervention-policy';
-import TeraInterventionSummaryCard from '@/components/workflow/ops/simulate-ciemss/tera-intervention-summary-card.vue';
+import TeraInterventionSummaryCard from '@/components/intervention-policy/tera-intervention-summary-card.vue';
 import { getParameters } from '@/model-representation/service';
 import type { CalibrationOperationStateCiemss } from './calibrate-operation';
 import { renameFnGenerator, mergeResults, getErrorData } from './calibrate-utils';
diff --git a/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-card.vue b/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-card.vue
index df2bf90db7..61032a08a5 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-card.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-card.vue
@@ -1,15 +1,12 @@
 <template>
-	<div class="policy-card" :class="{ 'card-selected': selected }">
-		<div>
-			<span class="flex align-items-center">
-				<h6>{{ interventionPolicy.name }}</h6>
-				<Button class="ml-auto" text icon="pi pi-ellipsis-v" @click.stop="toggleContextMenu" />
-			</span>
-			<ContextMenu ref="contextMenu" :model="contextMenuItems"></ContextMenu>
-			<p>{{ interventionPolicy.description }}</p>
-			<p>{{ formatTimestamp(interventionPolicy.createdOn) }}</p>
-		</div>
-		<Divider />
+	<div :class="{ selected: selected }">
+		<header>
+			<h6>{{ interventionPolicy.name }}</h6>
+			<Button text icon="pi pi-ellipsis-v" @click.stop="toggleContextMenu" />
+		</header>
+		<ContextMenu ref="contextMenu" :model="contextMenuItems"></ContextMenu>
+		<p v-if="interventionPolicy.description">{{ interventionPolicy.description }}</p>
+		<p>{{ formatTimestamp(interventionPolicy.createdOn) }}</p>
 	</div>
 </template>
 
@@ -17,7 +14,6 @@
 import { formatTimestamp } from '@/utils/date';
 import ContextMenu from 'primevue/contextmenu';
 import { ref } from 'vue';
-import Divider from 'primevue/divider';
 import Button from 'primevue/button';
 import { InterventionPolicy } from '@/types/Types';
 
@@ -45,32 +41,42 @@ const toggleContextMenu = (event) => {
 </script>
 
 <style scoped>
-.policy-card {
+div {
 	background-color: var(--gray-0);
 	border-left: 4px solid var(--surface-300);
+	border-bottom: 1px solid var(--gray-300);
+	padding: var(--gap-1) var(--gap-1) var(--gap-3) var(--gap-3);
 
-	&.card-selected {
-		border-left: 4px solid var(--primary-color);
+	&.selected {
+		border-left-color: var(--primary-color);
+	}
+
+	&,
+	&.selected {
+		transition: border-left-color 250ms;
 	}
 
 	&:not(.card-selected):hover {
-		cursor: pointer;
 		background-color: var(--gray-50);
+		cursor: pointer;
 	}
+}
+
+header {
+	align-items: center;
+	display: flex;
 
-	& > div {
-		padding-left: var(--gap-small);
+	& > *:last-child {
+		margin-left: auto;
 	}
 }
 
 p {
 	color: var(--text-color-subdued);
+	font-size: var(--font-caption);
 }
-:deep(.p-divider) {
-	&.p-divider-horizontal {
-		margin-top: var(--gap);
-		margin-bottom: 0;
-		color: var(--gray-300);
-	}
+
+p + p {
+	margin-top: var(--gap-2);
 }
 </style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue
index 87b2d1d3de..c4f8f0fd0a 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue
@@ -45,7 +45,7 @@
 			</tera-slider-panel>
 		</template>
 		<tera-columnar-panel>
-			<tera-drilldown-section class="px-3 intervention-settings-section">
+			<tera-drilldown-section class="intervention-settings-section">
 				<template #header-controls-left> Add and configure intervention settings for this policy. </template>
 				<template #header-controls-right>
 					<Button outlined severity="secondary" label="Reset" @click="onResetPolicy" />
@@ -556,10 +556,28 @@ onMounted(() => {
 <style scoped>
 .intervention-settings-section {
 	background-color: var(--surface-100);
+	padding: 0 var(--gap-3);
 }
 
-ul {
-	list-style: none;
+.input-config {
+	ul {
+		list-style: none;
+	}
+	li {
+		& > * {
+			border-bottom: 1px solid var(--gray-300);
+			border-right: 1px solid var(--gray-300);
+		}
+		&:first-child > * {
+			border-top: 1px solid var(--gray-300);
+			border-top-left-radius: var(--border-radius);
+			border-top-right-radius: var(--border-radius);
+		}
+		&:last-child > * {
+			border-bottom-left-radius: var(--border-radius);
+			border-bottom-right-radius: var(--border-radius);
+		}
+	}
 }
 
 section {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
index 55405d5d6a..536def7d58 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
@@ -14,22 +14,17 @@
 				content-width="360px"
 			>
 				<template #content>
-					<div class="m-3">
+					<main class="m-3">
 						<div class="flex flex-row gap-1">
 							<tera-input-text v-model="filterModelConfigurationsText" placeholder="Filter" class="w-full" />
-
 							<Button
 								label="Extract from inputs"
-								@click="extractConfigurationsFromInputs"
 								severity="primary"
 								class="white-space-nowrap min-w-min"
+								size="small"
 								:loading="isLoading"
-								:disabled="
-									!props.node.inputs[1]?.value &&
-									!props.node.inputs[2]?.value &&
-									!props.node.inputs[3]?.value &&
-									!props.node.inputs[4]?.value
-								"
+								:disabled="!props.node.inputs.slice(1, 5).some((input) => input?.value)"
+								@click="extractConfigurationsFromInputs"
 							/>
 						</div>
 						<!-- Show a spinner if loading -->
@@ -42,21 +37,20 @@
 							<li v-for="configuration in filteredModelConfigurations" :key="configuration.id">
 								<tera-model-configuration-item
 									:configuration="configuration"
-									@click="onSelectConfiguration(configuration)"
 									:selected="selectedConfigId === configuration.id"
-									@use="onSelectConfiguration(configuration)"
+									@click="onSelectConfiguration(configuration)"
 									@delete="fetchConfigurations(model.id)"
 									@download="downloadModelArchive(configuration)"
+									@use="onSelectConfiguration(configuration)"
 								/>
 							</li>
 							<!-- Show a message if nothing found after filtering -->
 							<li v-if="filteredModelConfigurations.length === 0">No configurations found</li>
 						</ul>
-					</div>
+					</main>
 				</template>
 			</tera-slider-panel>
 		</template>
-
 		<tera-drilldown-section :tabName="ConfigTabs.Wizard" class="px-3 mb-10">
 			<template #header-controls-left>
 				<tera-toggleable-input
@@ -66,9 +60,15 @@
 				/>
 			</template>
 			<template #header-controls-right>
-				<Button label="Reset" @click="resetConfiguration" outlined severity="secondary" />
-				<Button label="Save as..." outlined severity="secondary" @click="showSaveModal = true" />
-				<Button class="mr-2" :disabled="isSaveDisabled" label="Save" @click="onSaveConfiguration" />
+				<Button
+					label="Reset"
+					outlined
+					severity="secondary"
+					:disabled="!isModelConfigChanged"
+					@click="resetConfiguration"
+				/>
+				<Button label="Save as" outlined severity="secondary" @click="showSaveModal = true" />
+				<Button :disabled="isSaveDisabled" label="Save" @click="onSaveConfiguration" />
 			</template>
 			<Accordion multiple :active-index="[0, 1]">
 				<AccordionTab>
@@ -178,6 +178,7 @@
 			</tera-drilldown-preview>
 		</tera-columnar-panel>
 	</tera-drilldown>
+
 	<tera-save-asset-modal
 		:initial-name="knobs.transientModelConfig.name"
 		:is-visible="showSaveModal"
@@ -186,6 +187,7 @@
 		@close-modal="showSaveModal = false"
 		@on-save="onSaveAsModelConfiguration"
 	/>
+
 	<!-- Matrix effect easter egg  -->
 	<canvas id="matrix-canvas" />
 </template>
@@ -286,6 +288,11 @@ const calibratedConfigObservables = computed<Observable[]>(() =>
 	}))
 );
 
+// Check if the model configuration is the same as the original
+const isModelConfigChanged = computed(
+	() => !isModelConfigsEqual(originalConfig.value, knobs.value.transientModelConfig)
+);
+
 // Save button is disabled if the model configuration name is empty, the values have changed, or the configuration is the same as the original
 const isSaveDisabled = computed(
 	() =>
@@ -627,7 +634,6 @@ const applyConfigValues = (config: ModelConfiguration) => {
 			state: omit(state, ['transientModelConfig'])
 		});
 	}
-	logger.success(`Configuration applied ${config.name}`);
 };
 
 const onEditDescription = async () => {
@@ -794,9 +800,29 @@ onUnmounted(() => {
 	padding: var(--gap-2);
 }
 
-ul {
-	list-style: none;
-	padding-top: var(--gap-small);
+.input-config {
+	ul {
+		list-style: none;
+		padding-top: var(--gap-4);
+	}
+
+	li {
+		& > * {
+			border-bottom: 1px solid var(--gray-300);
+			border-right: 1px solid var(--gray-300);
+		}
+
+		&:first-child > * {
+			border-top: 1px solid var(--gray-300);
+			border-top-left-radius: var(--border-radius);
+			border-top-right-radius: var(--border-radius);
+		}
+
+		&:last-child > * {
+			border-bottom-left-radius: var(--border-radius);
+			border-bottom-right-radius: var(--border-radius);
+		}
+	}
 }
 
 button.start-edit {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-configuration-item.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-configuration-item.vue
index 99659c4e72..ffb0b719bb 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-configuration-item.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-configuration-item.vue
@@ -1,15 +1,12 @@
 <template>
-	<div class="config-card" :class="{ 'card-selected': selected }">
-		<div>
-			<span class="flex align-items-center"
-				><h6>{{ configuration.name }}</h6>
-				<Button class="ml-auto" text icon="pi pi-ellipsis-v" @click.stop="toggleContextMenu"></Button
-			></span>
-			<ContextMenu ref="contextMenu" :model="contextMenuItems"></ContextMenu>
-			<p>{{ configuration.description }}</p>
-			<p>{{ formatTimestamp(configuration.createdOn) }}</p>
-		</div>
-		<Divider />
+	<div :class="{ selected: selected }">
+		<header>
+			<h6>{{ configuration.name }}</h6>
+			<Button text icon="pi pi-ellipsis-v" @click.stop="toggleContextMenu" />
+		</header>
+		<ContextMenu ref="contextMenu" :model="contextMenuItems" />
+		<p>{{ configuration.description }}</p>
+		<p>{{ formatTimestamp(configuration.createdOn) }}</p>
 	</div>
 </template>
 
@@ -17,7 +14,6 @@
 import { ModelConfiguration } from '@/types/Types';
 import { formatTimestamp } from '@/utils/date';
 import Button from 'primevue/button';
-import Divider from 'primevue/divider';
 import ContextMenu from 'primevue/contextmenu';
 import { ref } from 'vue';
 import { useConfirm } from 'primevue/useconfirm';
@@ -77,30 +73,42 @@ const onDeleteConfiguration = () => {
 </script>
 
 <style scoped>
-.config-card {
+div {
 	background: var(--surface-0);
 	border-left: 4px solid var(--surface-300);
+	padding: var(--gap-1) var(--gap-1) var(--gap-3) var(--gap-3);
+
 	&:hover {
-		cursor: pointer;
 		background-color: var(--gray-50);
+		cursor: pointer;
+	}
+
+	&.selected {
+		border-left-color: var(--primary-color);
 	}
-	&.card-selected {
-		border-left: 4px solid var(--primary-color);
+
+	&,
+	&.selected {
+		transition: border-left-color 250ms;
 	}
+}
+
+header {
+	display: flex;
+	align-items: center;
 
-	> div {
-		padding-left: var(--gap);
+	& > *:last-child {
+		margin-left: auto;
 	}
 }
 
 p {
 	color: var(--text-color-subdued);
+	font-size: var(--font-caption);
+	padding-right: var(--gap-6);
 }
-:deep(.p-divider) {
-	&.p-divider-horizontal {
-		margin-top: var(--gap);
-		margin-bottom: 0;
-		color: var(--gray-300);
-	}
+
+p + p {
+	margin-top: var(--gap-2);
 }
 </style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-intervention-summary-card.vue b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-intervention-summary-card.vue
deleted file mode 100644
index 39eecab607..0000000000
--- a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-intervention-summary-card.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-	<section class="policy-group">
-		<h5>{{ intervention.name }}</h5>
-		<ul>
-			<li v-for="(staticIntervention, index) in intervention.staticInterventions" :key="index">
-				Set the <strong>{{ staticIntervention.type }}</strong
-				>&nbsp; <strong>{{ staticIntervention.appliedTo }}</strong> to the value of
-				<strong>{{ staticIntervention.value }}</strong> day at start time
-				<strong>{{ staticIntervention.timestep }}</strong> day.
-			</li>
-			<li v-for="(dynamicIntervention, index) in intervention.dynamicInterventions" :key="`dynamic_${index}`">
-				Set the {{ dynamicIntervention.type }}&nbsp; <strong>{{ dynamicIntervention.appliedTo }}</strong> to
-				<strong>{{ dynamicIntervention.threshold }}</strong> days when it crosses the threshold value
-				<strong>{{ dynamicIntervention.value }}</strong> person.
-			</li>
-		</ul>
-	</section>
-</template>
-
-<script setup lang="ts">
-import { Intervention } from '@/types/Types';
-
-defineProps<{
-	intervention: Intervention;
-}>();
-</script>
-
-<style scoped>
-.policy-group {
-	display: flex;
-	padding: var(--gap-4);
-	padding-left: var(--gap-5);
-	flex-direction: column;
-	justify-content: center;
-	align-items: flex-start;
-	gap: var(--gap-2);
-	border-radius: var(--gap-1-5);
-	background: var(--surface-section);
-	border: 1px solid var(--surface-border-light);
-	/* Shadow/medium */
-	box-shadow:
-		0 2px 4px -1px rgba(0, 0, 0, 0.06),
-		0 4px 6px -1px rgba(0, 0, 0, 0.08);
-}
-
-ul {
-	list-style: none;
-}
-</style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
index 155776b02c..ce60fbe289 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
@@ -242,7 +242,7 @@ import VegaChart from '@/components/widgets/VegaChart.vue';
 import { CiemssPresetTypes, DrilldownTabs } from '@/types/common';
 import { getModelConfigurationById } from '@/services/model-configurations';
 import { flattenInterventionData, getInterventionPolicyById } from '@/services/intervention-policy';
-import TeraInterventionSummaryCard from '@/components/workflow/ops/simulate-ciemss/tera-intervention-summary-card.vue';
+import TeraInterventionSummaryCard from '@/components/intervention-policy/tera-intervention-summary-card.vue';
 import TeraSaveSimulationModal from '@/components/project/tera-save-simulation-modal.vue';
 import { SimulateCiemssOperationState } from './simulate-ciemss-operation';
 import TeraChartControl from '../../tera-chart-control.vue';
diff --git a/packages/client/hmi-client/src/services/toast.ts b/packages/client/hmi-client/src/services/toast.ts
index bb608cd73a..8691b010d9 100644
--- a/packages/client/hmi-client/src/services/toast.ts
+++ b/packages/client/hmi-client/src/services/toast.ts
@@ -33,7 +33,6 @@ export const useToastService = () => {
 		ToastEventBus.emit('add', {
 			severity: ToastSeverity.warn,
 			summary: summary || ToastSummaries.WARNING,
-			group: ToastSeverity.warn,
 			detail,
 			life
 		});
@@ -43,7 +42,6 @@ export const useToastService = () => {
 		ToastEventBus.emit('add', {
 			severity: ToastSeverity.error,
 			summary: summary || ToastSummaries.ERROR,
-			group: ToastSeverity.error,
 			detail,
 			life
 		});
@@ -53,7 +51,6 @@ export const useToastService = () => {
 		ToastEventBus.emit('add', {
 			severity: ToastSeverity.success,
 			summary: summary || ToastSummaries.SUCCESS,
-			group: ToastSeverity.success,
 			detail,
 			life
 		});
@@ -63,7 +60,6 @@ export const useToastService = () => {
 		ToastEventBus.emit('add', {
 			severity: ToastSeverity.info,
 			summary: summary || ToastSummaries.INFO,
-			group: ToastSeverity.info,
 			detail,
 			life
 		});
diff --git a/packages/gollm/gollm_openai/prompts/config_from_document.py b/packages/gollm/gollm_openai/prompts/config_from_document.py
index 10e4450dea..6ab4a72378 100644
--- a/packages/gollm/gollm_openai/prompts/config_from_document.py
+++ b/packages/gollm/gollm_openai/prompts/config_from_document.py
@@ -26,13 +26,13 @@
     a.	`target` should reference the id of the initial variable from the AMR model ODE semantics.
     b.	`source` should reference the title or file name of the research paper.
     c.	`type` should be set to "initial”.
-    d.	You should extract a numerical value or an expression of the initial state from the user-provided text if possible and add it to `expression`
+    d.	You should extract a numerical value or an expression of the initial state from the user-provided text if possible and add it to `expression`. If you can not find a value in the text leave expression and expressionMathml blank.
     e.	`expression_mathml` should be `expression` written in MathML format.
 5.	For each parameter specified in the AMR model ODE semantics, create a parameter semantic object. Do not create new parameter semantic objects if they are not included in the original AMR model. You should set parameter semantic object fields using the following rules:
     a.	`reference_id` should reference the id of the parameter.
     b.	`source` should reference the title or file name of the research paper.
     c.	`type` should be set to "parameter".
-    d.	Be sure to extract parameter values from the user-provided text, and do not use the default values from the AMR model.
+    d.	Be sure to extract parameter values from the user-provided text, and do not use the default values from the AMR model. If you can not find a value in the text set `type` to "Constant" and leave `value`, `minimum`, and `maximum` blank.
         -	If the extracted parameter value is a single constant value, set the parameter `value` to the constant value and set `type` to "Constant".
         -	If the extracted parameter value is a distribution with a maximum and minimum value, set `type` to only "Uniform" and populate the `minimum` and `maximum` fields.
 6. `observableSemanticList` should be an empty list.
diff --git a/packages/server/src/main/java/software/uncharted/terarium/hmiserver/controller/knowledge/KnowledgeController.java b/packages/server/src/main/java/software/uncharted/terarium/hmiserver/controller/knowledge/KnowledgeController.java
index a1c85f941d..f9434b6e36 100644
--- a/packages/server/src/main/java/software/uncharted/terarium/hmiserver/controller/knowledge/KnowledgeController.java
+++ b/packages/server/src/main/java/software/uncharted/terarium/hmiserver/controller/knowledge/KnowledgeController.java
@@ -21,6 +21,7 @@
 import java.util.Optional;
 import java.util.UUID;
 import java.util.concurrent.ExecutionException;
+import java.util.concurrent.Future;
 import java.util.concurrent.TimeoutException;
 import java.util.zip.ZipEntry;
 import java.util.zip.ZipOutputStream;
@@ -73,6 +74,7 @@
 import software.uncharted.terarium.hmiserver.service.data.ProvenanceService;
 import software.uncharted.terarium.hmiserver.service.tasks.EnrichAmrResponseHandler;
 import software.uncharted.terarium.hmiserver.service.tasks.TaskService;
+import software.uncharted.terarium.hmiserver.service.tasks.TaskService.TaskMode;
 import software.uncharted.terarium.hmiserver.utils.ByteMultipartFile;
 import software.uncharted.terarium.hmiserver.utils.Messages;
 import software.uncharted.terarium.hmiserver.utils.StringMultipartFile;
@@ -797,14 +799,23 @@ public ResponseEntity<Void> variableExtractions(
 	)
 	public ResponseEntity<Void> pdfExtractions(
 		@RequestParam("document-id") final UUID documentId,
-		@RequestParam(name = "domain", defaultValue = "epi") final String domain,
-		@RequestParam(name = "project-id", required = false) final UUID projectId
+		@RequestParam(name = "project-id", required = false) final UUID projectId,
+		@RequestParam(name = "mode", required = false, defaultValue = "ASYNC") final TaskMode mode
 	) {
 		final Schema.Permission permission = projectService.checkPermissionCanWrite(
 			currentUserService.get().getId(),
 			projectId
 		);
-		extractionService.extractPDFAndApplyToDocument(documentId, projectId, permission);
+
+		final Future<DocumentAsset> f = extractionService.extractPDFAndApplyToDocument(documentId, projectId, permission);
+		if (mode == TaskMode.SYNC) {
+			try {
+				f.get();
+			} catch (InterruptedException | ExecutionException e) {
+				log.error("Error extracting PDF", e);
+				throw new ResponseStatusException(HttpStatus.INTERNAL_SERVER_ERROR, messages.get("document.extracton.failed"));
+			}
+		}
 		return ResponseEntity.accepted().build();
 	}
 
diff --git a/packages/server/src/main/resources/application.properties b/packages/server/src/main/resources/application.properties
index 6696ce873c..98c38bbb01 100644
--- a/packages/server/src/main/resources/application.properties
+++ b/packages/server/src/main/resources/application.properties
@@ -87,6 +87,7 @@ terarium.serviceRequestPatterns[11]=/simulations/**
 terarium.serviceRequestPatterns[12]=/code-asset/**
 terarium.serviceRequestPatterns[13]=/workflows/**
 terarium.serviceRequestPatterns[14]=/interventions/**
+terarium.serviceRequestPatterns[15]=/knowledge/**
 terarium.extractionService.poolSize=10
 terarium.cacheHeadersMaxAge=86400
 management.endpoints.web.exposure.include=health,prometheus
diff --git a/packages/server/src/main/resources/messages.properties b/packages/server/src/main/resources/messages.properties
index 43fef9ea86..c6a9fb48ca 100644
--- a/packages/server/src/main/resources/messages.properties
+++ b/packages/server/src/main/resources/messages.properties
@@ -32,6 +32,7 @@ document.not-found = We couldn't find the requested document. Please verify that
 document.unable-to-delete = We couldn't delete the document. Please try again later.
 document.unable-to-update = We couldn't update the document. Please try again later.
 document.text-length-exceeded = This document exceeds our 600,000-word limit. If you still need to analyze this document, contact support.
+document.extracton.failed = Document extraction failed. Please try again later.
 
 mira.concept.bad-curies = Our domain knowledge service (MIRA) couldn't find any valid concepts for the selected IDs. Please review the IDs that you selected and try again.
 mira.concept.bad-query = Our domain knowledge service (MIRA) couldn't find any valid concepts for the entered query. Please review your search criteria and try again.