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 a27d848057..b2abc5cebd 100644
--- a/packages/client/hmi-client/src/assets/css/theme/_variables.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
@@ -905,6 +905,7 @@ $petri-inputBox: var(--gray-300);
 	--surface-b: #fafafa;
 	--surface-border: #D0D5DD;
 	--surface-border-light: #EAEAEA;
+	--surface-border-warning: #D92D20;
 	--surface-c: rgba(0, 0, 0, .04);
 	--surface-card: #ffffff;
 	--surface-d: rgba(0, 0, 0, .12);
diff --git a/packages/client/hmi-client/src/components/mathml/tera-math-editor.vue b/packages/client/hmi-client/src/components/mathml/tera-math-editor.vue
index ff63e3317a..8a98104cbf 100644
--- a/packages/client/hmi-client/src/components/mathml/tera-math-editor.vue
+++ b/packages/client/hmi-client/src/components/mathml/tera-math-editor.vue
@@ -10,7 +10,7 @@
 			<Button
 				@click="toggleEditEquation"
 				:label="isEditingEq ? 'Save equation' : 'Edit equation'"
-				class="p-button-sm p-button-outlined edit-button"
+				:class="isEditingEq ? 'p-button-sm' : 'p-button-sm p-button-outlined edit-button'"
 			/>
 		</span>
 	</section>
@@ -174,7 +174,7 @@ const cancelEditEquation = () => {
 
 <style scoped>
 math-field {
-	background-color: var(--gray-100);
+	background-color: var(--gray-0);
 	border-radius: 4px;
 	border: none;
 	outline: none;
diff --git a/packages/client/hmi-client/src/components/models/Model.vue b/packages/client/hmi-client/src/components/models/Model.vue
index 5147c098ea..d96c2a192e 100644
--- a/packages/client/hmi-client/src/components/models/Model.vue
+++ b/packages/client/hmi-client/src/components/models/Model.vue
@@ -61,38 +61,42 @@
 											<template #start>
 												<Button
 													@click="resetZoom"
-													label="Reset Zoom"
-													class="p-button-sm p-button-secondary"
+													label="Reset zoom"
+													class="p-button-sm p-button-outlined toolbar-button"
 												/>
 											</template>
 											<template #center>
-												<span class="p-buttonset">
+												<span class="toolbar-subgroup">
 													<Button
 														v-if="isEditing"
 														@click="addState"
-														label="Add State"
-														class="p-button-sm p-button-secondary"
+														label="Add state"
+														class="p-button-sm p-button-outlined toolbar-button"
 													/>
 													<Button
 														v-if="isEditing"
 														@click="addTransition"
-														label="Add Transition"
-														class="p-button-sm p-button-secondary"
+														label="Add transition"
+														class="p-button-sm p-button-outlined toolbar-button"
 													/>
 												</span>
 											</template>
 											<template #end>
-												<span class="p-buttonset">
+												<span class="toolbar-subgroup">
 													<Button
 														v-if="isEditing"
 														@click="cancelEdit"
 														label="Cancel"
-														class="p-button-sm p-button-secondary"
+														class="p-button-sm p-button-outlined toolbar-button"
 													/>
 													<Button
 														@click="toggleEditMode"
 														:label="isEditing ? 'Save model' : 'Edit model'"
-														class="p-button-sm p-button-secondary"
+														:class="
+															isEditing
+																? 'p-button-sm toolbar-button-saveModel'
+																: 'p-button-sm p-button-outlined toolbar-button'
+														"
 													/>
 												</span>
 											</template>
@@ -855,12 +859,20 @@ const mathJaxEq = (eq) => {
 	z-index: 1;
 	isolation: isolate;
 	background: transparent;
-	padding: 0.25rem;
+	padding: 0.5rem;
 }
 
-.button-container {
+.p-button.p-component.p-button-sm.p-button-outlined.toolbar-button {
+	background-color: var(--surface-0);
+	margin: 0.25rem;
+}
+
+.toolbar-button-saveModel {
+	margin: 0.25rem;
+}
+
+.toolbar-subgroup {
 	display: flex;
-	float: right;
 }
 
 .fixed-header {
@@ -905,16 +917,17 @@ section math-editor {
 	width: 100%;
 	height: 100%;
 	flex-direction: column;
-	border-width: 2px;
+	border: 4px solid transparent;
+	border-radius: 0px var(--border-radius) var(--border-radius) 0px;
 	overflow: auto;
 }
 
 .math-editor-selected {
-	outline: 2px solid var(--primary-color);
+	border: 4px solid var(--primary-color);
 }
 
 .math-editor-error {
-	outline: 2px solid red;
+	border: 4px solid var(--surface-border-warning);
 	transition: outline 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 
diff --git a/packages/client/hmi-client/src/petrinet/petrinet-renderer.ts b/packages/client/hmi-client/src/petrinet/petrinet-renderer.ts
index 315a64d7fe..e28b69eca8 100644
--- a/packages/client/hmi-client/src/petrinet/petrinet-renderer.ts
+++ b/packages/client/hmi-client/src/petrinet/petrinet-renderer.ts
@@ -30,8 +30,8 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
 		super.initialize(element);
 
 		d3.select(this.svgEl)
-			.style('border', '2px solid transparent')
-			.style('border-radius', '8px 0px 0px 8px');
+			.style('border', '4px solid transparent')
+			.style('border-radius', 'var(--border-radius) 0px 0px var(--border-radius)');
 	}
 
 	setupDefs() {
@@ -66,9 +66,9 @@ export class PetrinetRenderer extends BasicRenderer<NodeData, EdgeData> {
 
 		const svg = d3.select(this.svgEl);
 		if (this.editMode) {
-			svg.style('border', '2px solid var(--primary-color)');
+			svg.style('border', '4px solid var(--primary-color)');
 		} else {
-			svg.style('border', '2px solid transparent');
+			svg.style('border', '4px solid transparent');
 		}
 	}