diff --git a/packages/client/hmi-client/src/assets/css/style.scss b/packages/client/hmi-client/src/assets/css/style.scss
index c6fe45766f..8a28002e1a 100644
--- a/packages/client/hmi-client/src/assets/css/style.scss
+++ b/packages/client/hmi-client/src/assets/css/style.scss
@@ -237,4 +237,8 @@
 		}
 	}
 
+	/* Adjust tooltip width to support longer text */
+	.p-tooltip {
+		max-width: 380px;
+	}
 }
diff --git a/packages/client/hmi-client/src/assets/css/theme/_variables.scss b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
index 9b60923594..05697f0744 100644
--- a/packages/client/hmi-client/src/assets/css/theme/_variables.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
@@ -652,9 +652,9 @@ $confirmPopupContentPadding: 1.5rem !default;
 $confirmPopupFooterPadding: 0 1.5rem 1rem 1.5rem !default;
 
 //tooltip
-$tooltipBg: rgba(97, 97, 97, .9) !default;
+$tooltipBg: rgba(52, 52, 52, 1) !default;
 $tooltipTextColor: #ffffff !default;
-$tooltipPadding: .5rem !default;
+$tooltipPadding: .85rem !default;
 
 //steps
 $stepsItemBg: transparent !default;
diff --git a/packages/client/hmi-client/src/components/dataset/tera-column-info.vue b/packages/client/hmi-client/src/components/dataset/tera-column-info.vue
index aaa7e900a6..af30bc2f68 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-column-info.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-column-info.vue
@@ -1,8 +1,8 @@
 <template>
-	<div class="flex gap-3">
+	<div class="column-info-card">
 		<section class="entries">
-			<h6>{{ column.symbol }}</h6>
 			<span class="name">
+				<h6>{{ column.symbol }}</h6>
 				<template v-if="featureConfig.isPreview">{{ column.name }}</template>
 				<tera-input-text
 					v-else
@@ -63,6 +63,9 @@
 		</section>
 		<tera-boxplot class="flex-1" v-if="column.stats" :stats="column.stats" />
 	</div>
+	<div class="thin-divider">
+		<div class="line"></div>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -126,20 +129,27 @@ watch(
 </script>
 
 <style scoped>
+.column-info-card {
+	padding: var(--gap-3) var(--gap-4);
+	border-left: 4px solid var(--surface-300);
+	margin-bottom: var(--gap-2);
+}
+.column-info-card:hover {
+	background-color: var(--surface-50);
+}
 section.entries {
 	display: grid;
 	grid-template-areas:
-		'symbol name unit data-type . concept'
-		'expression expression expression expression expression expression'
-		'description description description description description description';
-	grid-template-columns: max-content max-content max-content auto max-content;
+		'name name unit data-type concept'
+		'expression expression expression expression expression '
+		'description description description description description';
+	grid-template-columns: auto max-content max-content max-content max-content;
 	grid-auto-flow: dense;
 	overflow: hidden;
-	gap: var(--gap-2);
+	gap: var(--gap-1) var(--gap-2);
 	align-items: center;
 	font-size: var(--font-caption);
 	overflow: auto;
-	width: 85%;
 
 	& > *:empty {
 		display: none;
@@ -163,6 +173,9 @@ h6 {
 
 .name {
 	grid-area: name;
+	display: flex;
+	align-items: center;
+	gap: var(--gap-2);
 }
 
 .description {
@@ -172,15 +185,12 @@ h6 {
 
 .unit {
 	grid-area: unit;
+	margin-right: var(--gap-6);
 }
 
 .data-type {
 	grid-area: data-type;
-}
-
-.unit,
-.data-type {
-	max-width: 15rem;
+	margin-right: var(--gap-6);
 }
 
 .expression {
@@ -190,7 +200,6 @@ h6 {
 
 .concept {
 	grid-area: concept;
-	margin-left: auto;
 }
 
 .unit,
@@ -205,4 +214,10 @@ h6 {
 :deep(.p-autocomplete-input) {
 	padding: var(--gap-1) var(--gap-2);
 }
+.thin-divider {
+	margin: var(--gap-2) 0;
+	& > .line {
+		border-top: 1px solid var(--surface-border-light);
+	}
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
index 3c08edbfd2..a21b2dd0d3 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
@@ -318,12 +318,6 @@ watch(
 </script>
 
 <style scoped>
-.column-info {
-	border-bottom: 1px solid var(--surface-border);
-	margin-bottom: var(--gap-3);
-	padding-bottom: var(--gap-3);
-}
-
 .description {
 	margin-left: var(--gap-6);
 
diff --git a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
index 4460ea8a23..66f861607e 100644
--- a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
+++ b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
@@ -83,12 +83,18 @@ header .tabs-row:deep(.p-tabview .p-tabview-panels) {
 }
 
 a {
-	height: 2.75rem;
 	display: flex;
 	align-items: center;
 	color: var(--primary-color);
 	margin-left: auto;
 	margin-right: var(--gap-4);
+	margin-bottom: 2px;
+	font-size: var(--font-caption);
+	padding: var(--gap-3);
+	border-radius: var(--border-radius-medium);
+}
+a:hover {
+	background-color: rgba(27, 128, 115, 0.04);
 }
 
 :deep(.p-tabview-header:not(.p-highlight) .p-tabview-nav-link) {
diff --git a/packages/client/hmi-client/src/components/drilldown/tera-notebook-error.vue b/packages/client/hmi-client/src/components/drilldown/tera-notebook-error.vue
index b2d6b9c72f..b54a0c3e9a 100644
--- a/packages/client/hmi-client/src/components/drilldown/tera-notebook-error.vue
+++ b/packages/client/hmi-client/src/components/drilldown/tera-notebook-error.vue
@@ -32,8 +32,9 @@ watch(
 
 <style scoped>
 .container {
+	margin: 0 var(--gap-3) var(--gap-3) var(--gap-3);
 	background-color: #ffdcdc;
-	padding: var(--gap-2);
+	padding: var(--gap-3);
 	border-radius: var(--border-radius);
 }
 
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 fe25293fda..fd6ef4ad9c 100644
--- a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
+++ b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
@@ -27,6 +27,7 @@
 				size="small"
 				severity="primary"
 				@click="stopEvaluationScenario"
+				class="shadow-2"
 			/>
 			<Button v-else label="Start" rounded size="small" severity="primary" @click="beginEvaluationScenario" />
 		</aside>
@@ -73,7 +74,7 @@
 						@change="onScenarioChange"
 					/>
 
-					<label class="text-sm" for="evaluation-scenario-task">Task</label>
+					<label class="text-sm mt-3" for="evaluation-scenario-task">Task</label>
 					<Dropdown
 						id="evaluation-scenario-task"
 						:options="evaluationScenario?.questions ?? []"
@@ -83,7 +84,7 @@
 						@change="onTaskChange"
 					/>
 
-					<label class="text-sm" for="evaluation-scenario-description">Description</label>
+					<label class="text-sm mt-3" for="evaluation-scenario-description">Description</label>
 					<Textarea
 						id="evaluation-scenario-description"
 						rows="5"
@@ -96,7 +97,7 @@
 
 					<div class="field-checkbox">
 						<Checkbox name="multipleUsers" binary v-model="evaluationScenarioMultipleUsers" />
-						<label for="multipleUsers">Multiple Users</label>
+						<label for="multipleUsers">Multiple users</label>
 					</div>
 				</form>
 			</template>
@@ -128,16 +129,20 @@
 		>
 			<article>
 				<img src="@/assets/svg/terarium-logo.svg" alt="Terarium logo" class="about-terarium-logo" />
-				<p class="text-2xl line-height-3 about-top-line">
+				<p class="text-lg line-height-3 about-top-line">
 					Terarium is a comprehensive <span class="underlined">modeling</span> and
 					<span class="underlined">simulation</span> platform designed to help researchers and analysts:
 				</p>
-				<p class="about-middle"><span class="pi pi-search about-bullet"></span>Find models in academic literature</p>
-				<p class="about-middle"><span class="pi pi-sliders-h about-bullet"></span>Parameterize and calibrate them</p>
+				<p class="about-middle">
+					<span class="pi pi-search about-bullet"></span>Extract models from academic literature
+				</p>
+				<p class="about-middle">
+					<span class="pi pi-sliders-h about-bullet"></span>Calibrate them with real world data
+				</p>
 				<p class="about-middle">
 					<span class="pi pi-cog about-bullet"></span>Run simulations to test a variety of scenarios, and
 				</p>
-				<p class="about-middle"><span class="pi pi-chart-line about-bullet"></span>Analyze the results.</p>
+				<p class="about-middle"><span class="pi pi-chart-line about-bullet"></span>Compare the results.</p>
 			</article>
 			<article class="about-uncharted-section">
 				<img
@@ -379,7 +384,7 @@ const userMenuItems = ref([
 		}
 	},
 	{
-		label: 'User Administration',
+		label: 'User administration',
 		command: () => {
 			router.push(RoutePath.UserAdmin);
 		},
@@ -553,7 +558,7 @@ nav {
 	border-radius: 50%;
 }
 .about-middle {
-	font-size: 1.25rem;
+	font-size: 1rem;
 	display: flex;
 	align-items: center;
 }
@@ -574,6 +579,7 @@ nav {
 	margin-right: auto;
 	align-items: center;
 	gap: var(--gap-4);
+	box-shadow: inset 0px 0px 5px var(--surface-border-light);
 
 	.evaluation-scenario-widget-timer {
 		font-feature-settings: 'tnum';
@@ -585,7 +591,7 @@ nav {
 	margin-bottom: 0.5rem;
 }
 .about-bottom-line {
-	color: var(--text-color-subdued);
+	color: var(--text-color);
 }
 
 .modal-footer {
@@ -609,5 +615,10 @@ nav {
 	font-size: var(--font-body-small);
 	color: var(--text-color-primary);
 	margin-bottom: 0;
+	display: flex;
+	align-items: center;
+	& > label {
+		margin-bottom: 0px !important;
+	}
 }
 </style>
diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
index 20e55d794d..c2a14bcb77 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
@@ -16,6 +16,7 @@
 				@focusout="$emit('focusout', $event)"
 				type="text"
 				:placeholder="placeholder"
+				@keydown="handleArrowKeys"
 			/>
 		</main>
 		<aside v-if="getErrorMessage"><i class="ml-2 pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
@@ -24,7 +25,7 @@
 
 <script setup lang="ts">
 import { numberToNist } from '@/utils/number';
-import { isNaN, toNumber, isEmpty } from 'lodash';
+import { debounce, isNaN, toNumber, isEmpty } from 'lodash';
 import { CSSProperties, computed, ref, watch } from 'vue';
 
 const props = defineProps<{
@@ -57,7 +58,7 @@ const inputStyle = computed(() => {
 	if (props.autoWidth) {
 		const textToMeasure = input.value || props.placeholder;
 		// Estimate the width based on the length of the text to measure.
-		const width = (textToMeasure?.length || 1) * 8 + 4; // 8px per character + 4px padding
+		const width = (textToMeasure?.length || 1) * 10 + 4; // 10px per character + 6px padding
 		style.width = `${width}px`; // Dynamically set the width
 		style['min-width'] = '20px'; // Ensure a minimum width
 	}
@@ -107,10 +108,43 @@ watch(
 	},
 	{ immediate: true }
 );
+
+// Handle the arrow key presses
+function handleArrowKeys(event: KeyboardEvent) {
+	if (getDisabled) return;
+
+	const step = 1; // You can adjust this step size if needed
+	const currentValue = toNumber(maskedValue.value);
+	const isValidNumber = !isNaN(currentValue);
+
+	if (event.key === 'ArrowUp') {
+		// Increase the number
+		const newValue = isValidNumber ? currentValue + step : step;
+		updateNumber(newValue);
+	} else if (event.key === 'ArrowDown') {
+		// Decrease the number
+		const newValue = isValidNumber ? currentValue - step : -step;
+		updateNumber(newValue);
+	}
+}
+
+// Helper function to update the number and emit the change
+function updateNumber(value: number) {
+	// Prevent setting negative numbers if invalidateNegative is true
+	if (props.invalidateNegative && value < 0) {
+		error.value = 'Invalid number';
+		return;
+	}
+
+	error.value = '';
+	maskedValue.value = value.toString();
+	debounce(() => emit('update:model-value', value), 150);
+}
 </script>
 
 <style scoped>
 input {
+	margin-right: var(--gap-0-5);
 	text-align: right;
 }
 </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 e58ed41c57..932cff857a 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
@@ -16,15 +16,14 @@
 			>
 				<template #content>
 					<div class="toolbar">
-						<p>Set your mapping, calibration and visualization settings then click run.</p>
+						<Button
+							label="Reset"
+							outlined
+							@click="resetState"
+							severity="secondary"
+							:disabled="_.isEmpty(node.outputs[0].value)"
+						/>
 						<span class="flex gap-2">
-							<Button
-								label="Reset"
-								outlined
-								@click="resetState"
-								severity="secondary"
-								:disabled="_.isEmpty(node.outputs[0].value)"
-							/>
 							<tera-pyciemss-cancel-button class="mr-auto" :simulation-run-id="cancelRunId" />
 							<Button label="Run" icon="pi pi-play" @click="runCalibrate" :disabled="disableRunButton" />
 						</span>
@@ -33,7 +32,7 @@
 					<!-- Mapping section -->
 					<div class="form-section">
 						<h5 class="mb-1">Mapping</h5>
-						<p class="mb-2">
+						<p class="mb-2 p-text-secondary text-sm">
 							Select a subset of output variables of the model and individually associate them to columns in the
 							dataset.
 						</p>
@@ -137,7 +136,7 @@
 								@update:model-value="setPresetValues"
 							/>
 						</div>
-						<label class="mb-1 p-text-secondary text-sm">
+						<label class="p-text-secondary text-sm flex align-items-center gap-2 my-1">
 							<i class="pi pi-info-circle" />
 							This impacts solver method, iterations and learning rate.
 						</label>
@@ -146,7 +145,7 @@
 								<label>Number of Samples</label>
 								<tera-input-number inputId="integeronly" v-model="knobs.numSamples" @update:model-value="updateState" />
 							</div>
-							<div class="spacer m-3" />
+							<div class="spacer m-4" />
 
 							<h6 class="mb-2">ODE solver options</h6>
 
@@ -165,7 +164,7 @@
 									<tera-input-number inputId="integeronly" v-model="knobs.stepSize" />
 								</div>
 							</div>
-							<div class="spacer m-3" />
+							<div class="spacer m-4" />
 							<h6 class="mb-2">Inference Options</h6>
 							<div class="input-row">
 								<div class="label-and-input">
@@ -192,7 +191,7 @@
 									<label>Loss function</label>
 									<tera-input-text disabled model-value="ELBO" />
 								</div>
-								<div class="label-and-input">
+								<div class="label-and-input mb-3">
 									<label>Optimizer method</label>
 									<tera-input-text disabled model-value="ADAM" />
 								</div>
@@ -223,8 +222,9 @@
 		<!-- Output section -->
 		<template #preview>
 			<tera-drilldown-section v-if="showOutputSection">
-				<template #header-controls-left v-if="configuredModelConfig?.name">
-					<h5 class="ml-3">{{ configuredModelConfig.name }}</h5>
+				<template #header-controls-left>
+					<h5 v-if="configuredModelConfig?.name" class="ml-3">{{ configuredModelConfig.name }}</h5>
+					<p class="ml-3" v-else>No output to show</p>
 				</template>
 				<template #header-controls-right>
 					<Button
@@ -1137,7 +1137,7 @@ th {
 .column-header {
 	color: var(--text-color-primary);
 	font-size: var(--font-body-small);
-	font-weight: var(--font-weight-semibold);
+	font-weight: var(--font-weight);
 	padding-top: var(--gap-2);
 }
 
@@ -1250,6 +1250,7 @@ img {
 	background: var(--surface-200);
 	padding: var(--gap-3);
 	border-radius: var(--border-radius-medium);
+	box-shadow: inset 0px 0px 4px var(--surface-border);
 }
 
 input {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
index dc7aeea703..b7f15d5b00 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
@@ -1,5 +1,5 @@
 <template>
-	<section>
+	<section class="pt-2">
 		<i class="ml-2" v-if="config.constraintType === ConstraintType.Following">
 			"following" option is not supported yet
 		</i>
@@ -8,6 +8,7 @@
 				:model-value="config.name"
 				tag="h3"
 				@update:model-value="emit('update-self', { key: 'name', value: $event })"
+				class="nudge-left"
 			/>
 			<div class="ml-auto flex align-items-center">
 				<label class="mr-2">Active</label>
@@ -29,6 +30,7 @@
 				:model-value="config.constraint"
 				:options="Object.values(Constraint)"
 				@update:model-value="emit('update-self', { key: 'constraint', value: $event })"
+				class="madlib-input"
 			/>
 			<MultiSelect
 				:maxSelectedLabels="5"
@@ -36,6 +38,7 @@
 				placeholder="Select variables"
 				:options="variableOptions"
 				@update:model-value="emit('update-self', { key: 'variables', value: $event })"
+				class="madlib-input"
 			/>
 			should be
 			<Dropdown
@@ -50,6 +53,7 @@
 						emit('update-self', { key: 'constraintType', value: $event });
 					}
 				"
+				class="madlib-input"
 			/>
 			<tera-input-number
 				v-if="
@@ -59,6 +63,7 @@
 				auto-width
 				:model-value="config.interval.ub"
 				@update:model-value="emit('update-self', { key: 'interval', value: { lb: config.interval.lb, ub: $event } })"
+				class="madlib-input"
 			/>
 			<tera-input-number
 				v-else-if="
@@ -68,6 +73,7 @@
 				auto-width
 				:model-value="config.interval.lb"
 				@update:model-value="emit('update-self', { key: 'interval', value: { lb: $event, ub: config.interval.ub } })"
+				class="madlib-input"
 			/>
 			<template
 				v-if="
@@ -87,6 +93,7 @@
 					@update:model-value="
 						emit('update-self', { key: 'timepoints', value: { lb: $event, ub: config.timepoints.ub } })
 					"
+					class="madlib-input"
 				/>
 				day to timepoint
 				<tera-input-number
@@ -95,12 +102,13 @@
 					@update:model-value="
 						emit('update-self', { key: 'timepoints', value: { lb: config.timepoints.lb, ub: $event } })
 					"
+					class="madlib-input"
 				/>
 			</template>
 			<!--Wrong variables being mutated-->
 			<template v-else>
 				time-series dataset within +/-
-				<tera-input-number auto-width :model-value="0" />
+				<tera-input-number auto-width :model-value="0" class="madlib-input" />
 				persons within a time window of
 				<tera-input-number
 					auto-width
@@ -108,6 +116,7 @@
 					@update:model-value="
 						emit('update-self', { key: 'timepoints', value: { lb: config.timepoints.lb, ub: $event } })
 					"
+					class="madlib-input"
 				/>
 			</template>
 			<!--TODO: should be based on time variable in model semantics-->
@@ -122,6 +131,7 @@
 				auto-width
 				:model-value="config.interval.lb"
 				@update:model-value="emit('update-self', { key: 'interval', value: { lb: $event, ub: config.interval.ub } })"
+				class="madlib-input"
 			/>
 			<katex-element :expression="stringToLatexExpression(`\\leq [`)" />
 			<template v-for="(variable, index) in config.variables" :key="index">
@@ -136,6 +146,7 @@
 							emit('update-self', { key: 'weights', value: newWeights });
 						}
 					"
+					class="madlib-input"
 				/>
 				<katex-element
 					:expression="stringToLatexExpression(`${variable} ${index === config.variables.length - 1 ? '' : '\\ +'}`)"
@@ -146,6 +157,7 @@
 				auto-width
 				:model-value="config.interval.ub"
 				@update:model-value="emit('update-self', { key: 'interval', value: { lb: config.interval.lb, ub: $event } })"
+				class="madlib-input"
 			/>
 			<katex-element
 				:expression="stringToLatexExpression(`\\forall \\ t \\in [${config.timepoints.lb}, ${config.timepoints.ub}]`)"
@@ -256,4 +268,21 @@ ul {
 		text-align: right;
 	}
 }
+
+/* make all the madlib-inputs the same height */
+.madlib-input {
+	height: 28px;
+	display: flex;
+	align-items: center;
+}
+.madlib-input:deep(.p-multiselect-label) {
+	padding: 5px;
+}
+:deep(main:has(.madlib-input)) {
+	padding: 0;
+	height: 28px;
+}
+.nudge-left {
+	margin-left: -0.5rem;
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
index 3c2ace5528..d9e314e9c1 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
@@ -12,13 +12,11 @@
 			class="input-config"
 			v-model:is-open="isSliderOpen"
 			header="Validate configuration settings"
-			content-width="420px"
+			content-width="440px"
 		>
 			<template #content>
 				<div class="top-toolbar">
-					<p>Set your model checks and settings then click run.</p>
 					<div class="btn-group">
-						<Button label="Reset" outlined severity="secondary" disabled />
 						<Button :loading="showSpinner" label="Run" icon="pi pi-play" @click="run" />
 					</div>
 				</div>
@@ -29,15 +27,15 @@
 								Model checks
 								<i class="pi pi-info-circle pl-2" v-tooltip="validateParametersToolTip" />
 							</template>
-							<p class="mb-3">
+							<p class="mb-3 secondary-text">
 								Implement sanity checks on the state space of the model to see how the parameter space of the model is
 								partitioned into satisfiable and unsatisfiable regions separated by decision boundaries.
 							</p>
 							<ul>
 								<li>
-									<section>
+									<section class="shadow-1 pt-2">
 										<header class="flex w-full gap-3 mb-2">
-											<tera-toggleable-input v-model="knobs.compartmentalConstraint.name" tag="h3" />
+											<tera-toggleable-input v-model="knobs.compartmentalConstraint.name" tag="h3" class="nudge-left" />
 											<div class="ml-auto flex align-items-center">
 												<label class="mr-2">Active</label>
 												<InputSwitch class="mr-3" v-model="knobs.compartmentalConstraint.isActive" />
@@ -50,7 +48,7 @@
 										/>
 									</section>
 								</li>
-								<li v-for="(cfg, index) in node.state.constraintGroups" :key="index">
+								<li v-for="(cfg, index) in node.state.constraintGroups" :key="index" class="shadow-1">
 									<tera-constraint-group-form
 										:config="cfg"
 										:index="index"
@@ -63,7 +61,7 @@
 								</li>
 							</ul>
 							<Button
-								class="mt-2"
+								class="my-2"
 								text
 								icon="pi pi-plus"
 								label="Add constraint"
@@ -89,7 +87,7 @@
 									placeholder="Select variables"
 									@update:model-value="onToggleVariableOfInterest"
 								/>
-								<span class="timespan">
+								<span class="timespan mt-3">
 									<div>
 										<label>Start time</label>
 										<tera-input-number class="w-12" v-model="knobs.currentTimespan.start" />
@@ -103,11 +101,11 @@
 										<tera-input-number class="w-12" v-model="knobs.numberOfSteps" />
 									</div>
 								</span>
-								<label>Timepoints</label>
-								<code>
+								<label class="mt-3">Timepoints</label>
+								<code class="inset">
 									{{ stepList.map((step) => Number(step.toFixed(3))).join(', ') }}
 								</code>
-								<label>Tolerance</label>
+								<label class="mt-3">Tolerance</label>
 								<div class="input-tolerance fadein animation-ease-in-out animation-duration-350">
 									<tera-input-number v-model="knobs.tolerance" />
 									<Slider v-model="knobs.tolerance" :min="0" :max="1" :step="0.01" class="w-full mr-2" />
@@ -975,7 +973,7 @@ watch(
 }
 
 code {
-	background-color: var(--gray-50);
+	background-color: var(--gray-200);
 	color: var(--text-color-subdued);
 	border-radius: var(--border-radius);
 	border: 1px solid var(--surface-border);
@@ -986,6 +984,10 @@ code {
 	overflow: auto;
 }
 
+.inset {
+	box-shadow: inset 0px 0px 4px var(--surface-border);
+}
+
 .timespan {
 	display: flex;
 	align-items: end;
@@ -1052,4 +1054,8 @@ ul {
 	padding-left: var(--gap-4);
 	font-size: var(--font-caption);
 }
+
+.nudge-left {
+	margin-left: -0.5rem;
+}
 </style>
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 52023b37a6..ec8848f57a 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
@@ -894,8 +894,8 @@ onUnmounted(() => {
 }
 
 .notebook-section {
-	background-color: var(--surface-disabled);
-	border-right: 1px solid var(--surface-border-dark);
+	background-color: var(--surface-200);
+	border-right: 1px solid var(--surface-border-light);
 	padding: var(--gap-4);
 }
 
@@ -992,6 +992,7 @@ button.start-edit {
 
 .executed-code {
 	white-space: pre-wrap;
+	padding: var(--gap-4);
 }
 :deep(.content-wrapper) {
 	& > section {
diff --git a/packages/client/hmi-client/src/page/Home.vue b/packages/client/hmi-client/src/page/Home.vue
index 89e0cbf76e..240c21e152 100644
--- a/packages/client/hmi-client/src/page/Home.vue
+++ b/packages/client/hmi-client/src/page/Home.vue
@@ -5,10 +5,10 @@
 			<header>
 				<!-- Welcome text -->
 				<section class="w-full">
-					<h3>From data to discovery</h3>
+					<h3>AI-assisted modeling for scientific decision-making</h3>
 					<p>
-						Accelerate scientific modeling and simulation using AI. Search available knowledge, enhance extracted models
-						and data, and test scenarios to simulate real-world problems.
+						Pair your expertise with AI to accelerate scientific modeling and simulation. Build on existing models and
+						data to simulate and communicate complex real-world scenarios.
 					</p>
 					<!--Placeholder - button is disabled for now-->
 					<!-- <Button
@@ -404,7 +404,7 @@ header h3 {
 }
 
 header p {
-	max-width: 40%;
+	max-width: 580px;
 	line-height: 1.5;
 }