diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
index cb042198a5..71158b2f43 100644
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
+++ b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
@@ -3,22 +3,22 @@
 		<span class="flex align-items-center gap-3">
 			<h6>{{ symbol }}</h6>
 			<span class="name">
-				<template v-if="featureConfig.isPreview">{{ item.name }}</template>
+				<template v-if="featureConfig.isPreview">{{ nameText }}</template>
 				<tera-input-text
 					v-else
 					placeholder="Add a name"
-					v-model="name"
-					@change="$emit('update-item', { key: 'name', value: name })"
+					v-model="nameText"
+					@change="$emit('update-item', { key: 'name', value: nameText })"
 				/>
 			</span>
 			<span class="unit">
-				<template v-if="item.input && item.output">
-					<span><label>Input:</label> {{ item.input }}</span>
-					<span class="ml-"><label>Output:</label> {{ item.output }}</span>
+				<template v-if="input && output">
+					<span><label>Input:</label> {{ input }}</span>
+					<span class="ml-"><label>Output:</label> {{ output }}</span>
 				</template>
 				<!--amr_to_mmt doesn't like unit expressions with spaces, removing them here before they are saved to the amr-->
 				<template v-else-if="showUnit">
-					<template v-if="featureConfig.isPreview"><label>Unit</label>{{ item.unitExpression }}</template>
+					<template v-if="featureConfig.isPreview"><label>Unit</label>{{ unitExpression }}</template>
 					<!-- we use a dropdown for units with time semantic-->
 					<Dropdown
 						v-else-if="isTimePart"
@@ -47,7 +47,7 @@
 			<span v-if="!featureConfig.isPreview" class="flex ml-auto gap-3">
 				<!-- Three states of description buttons: Hide / Show / Add description -->
 				<Button
-					v-if="(item.description && showDescription) || (!item.description && showDescription)"
+					v-if="(descriptionText && showDescription) || (!descriptionText && showDescription)"
 					text
 					size="small"
 					label="Hide description"
@@ -57,7 +57,7 @@
 					v-else-if="!showDescription"
 					text
 					size="small"
-					:label="item.description ? 'Show description' : 'Add description'"
+					:label="descriptionText ? 'Show description' : 'Add description'"
 					@click="showDescription = true"
 				/>
 				<span v-if="showConcept" class="concept">
@@ -79,18 +79,18 @@
 			</span>
 		</span>
 		<katex-element
-			v-if="item.expression"
+			v-if="expression"
 			class="expression"
-			:expression="stringToLatexExpression(item.expression)"
+			:expression="stringToLatexExpression(expression)"
 			:throw-on-error="false"
 		/>
 		<span class="description">
-			<template v-if="featureConfig.isPreview">{{ item.description }}</template>
+			<template v-if="featureConfig.isPreview">{{ descriptionText }}</template>
 			<tera-input-text
 				v-if="showDescription"
 				placeholder="Add a description"
-				v-model="description"
-				@change="$emit('update-item', { key: 'description', value: description })"
+				v-model="descriptionText"
+				@change="$emit('update-item', { key: 'description', value: descriptionText })"
 			/>
 		</span>
 	</section>
@@ -101,7 +101,6 @@ import { ref, computed, watch } from 'vue';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import AutoComplete from 'primevue/autocomplete';
 import Button from 'primevue/button';
-import type { ModelPartItem } from '@/types/Model';
 import { stringToLatexExpression } from '@/services/model';
 import type { DKG } from '@/types/Types';
 import { getCurieFromGroundingIdentifier, getNameOfCurieCached, searchCuriesEntities } from '@/services/concept';
@@ -110,23 +109,31 @@ import Dropdown from 'primevue/dropdown';
 import { CalendarDateType } from '@/types/common';
 
 const props = defineProps<{
-	item: ModelPartItem;
+	description?: string;
+	name?: string;
+	unitExpression?: string;
+	templateId?: string;
+	id?: string;
+	grounding?: any;
+	expression?: string;
+	input?: any;
+	output?: any;
 	featureConfig: FeatureConfig;
 	isTimePart?: boolean;
 }>();
 
 const emit = defineEmits(['update-item']);
 
-const name = ref(props.item.name);
-const unitExpression = ref(props.item.unitExpression);
-const description = ref(props.item.description);
+const nameText = ref(props.name);
+const unitExpression = ref(props.unitExpression);
+const descriptionText = ref(props.description);
 const query = ref('');
 const results = ref<DKG[]>([]);
 
-const symbol = computed(() => (props.item.templateId ? `${props.item.templateId}, ${props.item.id}` : props.item.id));
+const symbol = computed(() => (props.templateId ? `${props.templateId}, ${props.id}` : props.id));
 
 // If we are in preview mode and there is no content, show nothing
-const showUnit = computed(() => !(props.featureConfig.isPreview && !props.item.unitExpression));
+const showUnit = computed(() => !(props.featureConfig.isPreview && !unitExpression.value));
 const showConcept = computed(() => !(props.featureConfig.isPreview && !query.value));
 
 // Used if an option isn't selected from the Autocomplete suggestions but is typed in regularly
@@ -145,15 +152,22 @@ function applyValidConcept() {
 }
 
 watch(
-	() => props.item.grounding?.identifiers,
+	() => props.grounding?.identifiers,
 	async (identifiers) => {
 		if (identifiers) query.value = await getNameOfCurieCached(getCurieFromGroundingIdentifier(identifiers));
 	},
 	{ immediate: true }
 );
 
-const showDescription = ref(false);
-if (props.item.description) showDescription.value = true;
+watch(
+	() => props.description,
+	(newDescription) => {
+		showDescription.value = !!newDescription;
+		descriptionText.value = newDescription;
+	},
+	{ deep: true }
+);
+const showDescription = ref(!!descriptionText.value);
 </script>
 
 <style scoped>
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue
index 86b4d2f102..646876e253 100644
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue
+++ b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue
@@ -119,7 +119,14 @@
 							:key="child.id"
 						>
 							<tera-model-part-entry
-								:item="child"
+								:description="child.description"
+								:name="child.name"
+								:id="child.id"
+								:grounding="child.grounding"
+								:templateId="child.templateId"
+								:input="child.input"
+								:output="child.output"
+								:unitExpression="child.unitExpression"
 								:feature-config="featureConfig"
 								@update-item="$emit('update-item', { id: child.id, ...$event })"
 							/>
@@ -140,7 +147,14 @@
 			<tera-model-part-entry
 				v-else
 				:is-time-part="!!isTimePart"
-				:item="base"
+				:description="base.description"
+				:name="base.name"
+				:id="base.id"
+				:grounding="base.grounding"
+				:templateId="base.templateId"
+				:input="base.input"
+				:output="base.output"
+				:unitExpression="base.unitExpression"
 				:feature-config="featureConfig"
 				@update-item="$emit('update-item', { id: base.id, ...$event })"
 			/>
@@ -172,7 +186,7 @@ import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import Paginator from 'primevue/paginator';
 
 const props = defineProps<{
-	items: { base: ModelPartItem; children: ModelPartItem[]; isParent: boolean }[];
+	items: any[];
 	featureConfig: FeatureConfig;
 	collapsedItems?: Map<string, string[]>;
 	showMatrix?: boolean;
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-observables.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-observables.vue
deleted file mode 100644
index cf19bc7d86..0000000000
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-observables.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-	<tera-model-part
-		:items="observablesList"
-		:feature-config="featureConfig"
-		:filter="filter"
-		@update-observable="emit('update-observable', $event)"
-	/>
-</template>
-
-<script setup lang="ts">
-import { ModelPartItem } from '@/types/Model';
-import { Model, Observable } from '@/types/Types';
-import { MiraModel } from '@/model-representation/mira/mira-common';
-import TeraModelPart from '@/components/model/model-parts/tera-model-part.vue';
-import type { FeatureConfig } from '@/types/common';
-
-const props = defineProps<{
-	model: Model;
-	mmt: MiraModel;
-	observables: Observable[];
-	featureConfig: FeatureConfig;
-	filter?: string;
-}>();
-
-const emit = defineEmits(['update-observable']);
-
-const observablesList: {
-	base: ModelPartItem;
-	children: ModelPartItem[];
-	isParent: boolean;
-}[] = props.observables.map((observable) => {
-	const { id, name, expression, description, units, grounding } = observable;
-	return {
-		base: {
-			id,
-			name,
-			description,
-			unitExpression: units?.expression,
-			grounding,
-			expression,
-			expression_mathml: observable.expression_mathml
-		},
-		// Observables can't be stratified therefore don't have children
-		children: [],
-		isParent: false
-	};
-});
-</script>
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue
deleted file mode 100644
index ecf90e2e48..0000000000
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-parameters.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-	<tera-model-part
-		:items="parameterList"
-		:collapsed-items="collapsedParameters"
-		:feature-config="featureConfig"
-		show-matrix
-		:filter="filter"
-		@open-matrix="(id: string) => (matrixModalId = id)"
-		@update-item="emit('update-parameter', $event)"
-	/>
-	<tera-stratified-matrix-modal
-		v-if="matrixModalId"
-		:id="matrixModalId"
-		:mmt="mmt"
-		:mmt-params="mmtParams"
-		:stratified-matrix-type="StratifiedMatrix.Parameters"
-		is-read-only
-		@close-modal="matrixModalId = ''"
-	/>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { StratifiedMatrix } from '@/types/Model';
-import type { ModelPartItem } from '@/types/Model';
-import { Model } from '@/types/Types';
-import { MiraModel, MiraTemplateParams } from '@/model-representation/mira/mira-common';
-import { getParameters } from '@/model-representation/service';
-import { collapseParameters } from '@/model-representation/mira/mira';
-import TeraModelPart from '@/components/model/model-parts/tera-model-part.vue';
-import TeraStratifiedMatrixModal from '@/components/model/petrinet/model-configurations/tera-stratified-matrix-modal.vue';
-import type { FeatureConfig } from '@/types/common';
-
-const props = defineProps<{
-	model: Model;
-	mmt: MiraModel;
-	mmtParams: MiraTemplateParams;
-	featureConfig: FeatureConfig;
-	filter?: string;
-}>();
-
-const emit = defineEmits(['update-parameter']);
-
-const parameters = getParameters(props.model);
-const collapsedParameters = collapseParameters(props.mmt, props.mmtParams);
-const parameterList: {
-	base: ModelPartItem;
-	children: ModelPartItem[];
-	isParent: boolean;
-}[] = Array.from(collapsedParameters.keys()).map((id) => {
-	const childIds = collapsedParameters.get(id) ?? [];
-	const isParent = childIds.length > 1;
-	const children = childIds
-		.map((childId) => {
-			const p = parameters.find((param) => param.id === childId);
-			if (!p) return null;
-			return {
-				id: p.id,
-				name: p.name,
-				description: p.description,
-				grounding: p.grounding,
-				unitExpression: p.units?.expression
-			};
-		})
-		.filter(Boolean) as ModelPartItem[];
-
-	const baseParameter = parameters.find((p) => p.id === id);
-	const base: ModelPartItem =
-		isParent || !baseParameter
-			? { id }
-			: {
-					id,
-					name: baseParameter.name,
-					description: baseParameter.description,
-					grounding: baseParameter.grounding,
-					unitExpression: baseParameter.units?.expression
-				};
-
-	return { base, children, isParent };
-});
-
-const matrixModalId = ref('');
-</script>
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-states.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-states.vue
deleted file mode 100644
index 77301487cc..0000000000
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-states.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-	<tera-model-part
-		:items="stateList"
-		:collapsed-items="collapsedInitials"
-		:feature-config="featureConfig"
-		:filter="filter"
-		@update-item="emit('update-state', $event)"
-	/>
-</template>
-
-<script setup lang="ts">
-import { ModelPartItem } from '@/types/Model';
-import { Model } from '@/types/Types';
-import { getStates } from '@/model-representation/service';
-import { MiraModel } from '@/model-representation/mira/mira-common';
-import { collapseInitials } from '@/model-representation/mira/mira';
-import TeraModelPart from '@/components/model/model-parts/tera-model-part.vue';
-import type { FeatureConfig } from '@/types/common';
-
-const props = defineProps<{
-	model: Model;
-	mmt: MiraModel;
-	featureConfig: FeatureConfig;
-	filter?: string;
-}>();
-
-const emit = defineEmits(['update-state']);
-
-const states = getStates(props.model); // could be states, vertices, and stocks type
-const collapsedInitials = collapseInitials(props.mmt);
-const stateList: {
-	base: ModelPartItem;
-	children: ModelPartItem[];
-	isParent: boolean;
-}[] = Array.from(collapsedInitials.keys()).map((id) => {
-	const childTargets = collapsedInitials.get(id) ?? [];
-	const isParent = childTargets.length > 1;
-	const children = childTargets
-		.map((childTarget) => {
-			const s = states.find((state) => state.id === childTarget);
-			if (!s) return null;
-			return {
-				id: s.id,
-				name: s.name,
-				description: s.description,
-				grounding: s.grounding,
-				unitExpression: s.units?.expression
-			};
-		})
-		.filter(Boolean) as ModelPartItem[];
-
-	const baseState: any = states.find((s) => s.id === id);
-	const base: ModelPartItem =
-		isParent || !baseState
-			? { id }
-			: {
-					id,
-					name: baseState.name,
-					description: baseState.description,
-					grounding: baseState.grounding,
-					unitExpression: baseState.units?.expression
-				};
-
-	return { base, children, isParent };
-});
-</script>
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-transitions.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-transitions.vue
deleted file mode 100644
index 4602933dcd..0000000000
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-transitions.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-	<tera-model-part
-		:items="transitionsList"
-		:collapsed-items="collapsedTemplates"
-		:feature-config="featureConfig"
-		:filter="filter"
-		show-matrix
-		@open-matrix="(id: string) => (matrixModalId = id)"
-		@update-item="$emit('update-transition', $event)"
-	/>
-	<tera-stratified-matrix-modal
-		v-if="matrixModalId"
-		:id="matrixModalId"
-		:mmt="mmt"
-		:mmt-params="mmtParams"
-		:stratified-matrix-type="StratifiedMatrix.Rates"
-		is-read-only
-		@close-modal="matrixModalId = ''"
-	/>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { StratifiedMatrix } from '@/types/Model';
-import type { ModelPartItem } from '@/types/Model';
-import type { Transition } from '@/types/Types';
-import type { MiraModel, MiraTemplateParams } from '@/model-representation/mira/mira-common';
-import { collapseTemplates } from '@/model-representation/mira/mira';
-import TeraModelPart from '@/components/model/model-parts/tera-model-part.vue';
-import TeraStratifiedMatrixModal from '@/components/model/petrinet/model-configurations/tera-stratified-matrix-modal.vue';
-import type { FeatureConfig } from '@/types/common';
-
-const props = defineProps<{
-	mmt: MiraModel;
-	mmtParams: MiraTemplateParams;
-	transitions: Transition[];
-	featureConfig: FeatureConfig;
-	filter?: string;
-}>();
-
-defineEmits(['update-transition']);
-
-// Convert templateId: string => templates: MiraTemplate[] map to templateId: string => childIds: string[] map
-const collapsedTemplates = (() => {
-	const templateMap = new Map<string, string[]>();
-	const collapsedTemplatesMap = collapseTemplates(props.mmt).matrixMap;
-	Array.from(collapsedTemplatesMap.keys()).forEach((templateId) => {
-		templateMap.set(
-			templateId,
-			Array.from(collapsedTemplatesMap.get(templateId) ?? []).map(({ name }) => name)
-		);
-	});
-	return templateMap;
-})();
-
-const transitionsList: {
-	base: ModelPartItem;
-	children: ModelPartItem[];
-	isParent: boolean;
-}[] = Array.from(collapsedTemplates.keys()).map((templateId) => {
-	const childIds = collapsedTemplates.get(templateId) ?? [];
-	const isParent = childIds.length > 1;
-	const children = childIds
-		.map((childId) => {
-			const t = props.transitions.find((transition) => transition.id === childId);
-			if (!t) return null;
-			return {
-				id: t.id,
-				name: t.name,
-				description: t.description,
-				grounding: t.grounding,
-				expression: t.expression,
-				input: t.input.join(', '),
-				output: t.output.join(', ')
-			};
-		})
-		.filter(Boolean) as ModelPartItem[];
-
-	// There is only one "child" if there is no parent in the UI it's displayed like: template-X, transitionId
-	const baseTransition = props.transitions.find((t) => t.id === childIds[0]);
-	const base: ModelPartItem =
-		isParent || !baseTransition
-			? { id: templateId }
-			: {
-					id: baseTransition.id,
-					name: baseTransition.name,
-					description: baseTransition.description,
-					grounding: baseTransition.grounding,
-					expression: baseTransition.expression,
-					templateId,
-					input: baseTransition.input.join(', '),
-					output: baseTransition.output.join(', ')
-				};
-
-	return { base, children, isParent };
-});
-
-const matrixModalId = ref('');
-</script>
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-petrinet-parts.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-petrinet-parts.vue
index b6d917dc49..aa6ae49419 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-petrinet-parts.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-petrinet-parts.vue
@@ -5,13 +5,13 @@
 				State variables<span class="artifact-amount">({{ states.length }})</span>
 				<tera-input-text class="ml-auto" placeholder="Filter" v-model="statesFilter" />
 			</template>
-			<tera-states
+			<tera-model-part
 				v-if="!isEmpty(mmt.initials)"
-				:model="model"
-				:mmt="mmt"
+				:items="stateList"
+				:collapsed-items="collapsedInitials"
 				:feature-config="featureConfig"
 				:filter="statesFilter"
-				@update-state="emit('update-state', $event)"
+				@update-item="emit('update-state', $event)"
 			/>
 		</AccordionTab>
 		<AccordionTab>
@@ -19,14 +19,24 @@
 				Parameters<span class="artifact-amount">({{ parameters.length }})</span>
 				<tera-input-text class="ml-auto" placeholder="Filter" v-model="parametersFilter" />
 			</template>
-			<tera-parameters
+			<tera-model-part
 				v-if="!isEmpty(mmt.parameters)"
-				:model="model"
-				:mmt="mmt"
-				:mmt-params="mmtParams"
+				:items="parameterList"
+				:collapsed-items="collapsedParameters"
 				:feature-config="featureConfig"
+				show-matrix
 				:filter="parametersFilter"
-				@update-parameter="emit('update-parameter', $event)"
+				@open-matrix="(id: string) => (parameterMatrixModalId = id)"
+				@update-item="emit('update-parameter', $event)"
+			/>
+			<tera-stratified-matrix-modal
+				v-if="parameterMatrixModalId"
+				:id="parameterMatrixModalId"
+				:mmt="mmt"
+				:mmt-params="mmtParams"
+				:stratified-matrix-type="StratifiedMatrix.Parameters"
+				is-read-only
+				@close-modal="parameterMatrixModalId = ''"
 			/>
 		</AccordionTab>
 		<AccordionTab>
@@ -34,11 +44,9 @@
 				Observables <span class="artifact-amount">({{ observables.length }})</span>
 				<tera-input-text class="ml-auto" placeholder="Filter" v-model="observablesFilter" />
 			</template>
-			<tera-observables
+			<tera-model-part
 				v-if="!isEmpty(observables)"
-				:model="model"
-				:mmt="mmt"
-				:observables="observables"
+				:items="observablesList"
 				:feature-config="featureConfig"
 				:filter="observablesFilter"
 				@update-item="emit('update-observable', $event)"
@@ -49,21 +57,37 @@
 				Transitions<span class="artifact-amount">({{ transitions.length }})</span>
 				<tera-input-text class="ml-auto" placeholder="Filter" v-model="transitionsFilter" />
 			</template>
-			<tera-transitions
+			<tera-model-part
 				v-if="!isEmpty(transitions) && !isEmpty(mmt.templates)"
-				:mmt="mmt"
-				:mmt-params="mmtParams"
-				:transitions="transitions"
+				:items="transitionsList"
+				:collapsed-items="collapsedTemplates"
 				:feature-config="featureConfig"
 				:filter="transitionsFilter"
-				@update-transition="emit('update-transition', $event)"
+				show-matrix
+				@open-matrix="(id: string) => (transitionMatrixModalId = id)"
+				@update-item="$emit('update-transition', $event)"
+			/>
+			<tera-stratified-matrix-modal
+				v-if="transitionMatrixModalId"
+				:id="transitionMatrixModalId"
+				:mmt="mmt"
+				:mmt-params="mmtParams"
+				:stratified-matrix-type="StratifiedMatrix.Rates"
+				is-read-only
+				@close-modal="transitionMatrixModalId = ''"
 			/>
 		</AccordionTab>
 		<AccordionTab>
 			<template #header>
 				Time <span class="artifact-amount">({{ time.length }})</span>
 			</template>
-			<tera-time v-if="time" :time="time" :feature-config="featureConfig" @update-time="emit('update-time', $event)" />
+			<tera-model-part
+				v-if="time"
+				is-time-part
+				:items="timeList"
+				:feature-config="featureConfig"
+				@update-item="$emit('update-time', $event)"
+			/>
 		</AccordionTab>
 	</Accordion>
 </template>
@@ -73,15 +97,15 @@ import type { Model, Transition, State } from '@/types/Types';
 import { isEmpty } from 'lodash';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { MiraModel, MiraTemplateParams } from '@/model-representation/mira/mira-common';
-import TeraStates from '@/components/model/model-parts/tera-states.vue';
-import TeraParameters from '@/components/model/model-parts/tera-parameters.vue';
-import TeraObservables from '@/components/model/model-parts/tera-observables.vue';
-import TeraTransitions from '@/components/model/model-parts/tera-transitions.vue';
-import TeraTime from '@/components/model/model-parts/tera-time.vue';
+import { collapseInitials, collapseParameters, collapseTemplates } from '@/model-representation/mira/mira';
+import TeraModelPart from '@/components/model/model-parts/tera-model-part.vue';
 import type { FeatureConfig } from '@/types/common';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import { createPartsList, createObservablesList, createTimeList, PartType } from '@/model-representation/service';
+import TeraStratifiedMatrixModal from '@/components/model/petrinet/model-configurations/tera-stratified-matrix-modal.vue';
+import { ModelPartItem, StratifiedMatrix } from '@/types/Model';
 
 const props = defineProps<{
 	model: Model;
@@ -103,7 +127,35 @@ const parameters = computed(() => props.model?.semantics?.ode.parameters ?? []);
 const observables = computed(() => props.model?.semantics?.ode?.observables ?? []);
 const time = computed(() => (props.model?.semantics?.ode?.time ? [props.model?.semantics.ode.time] : []));
 
+const collapsedInitials = collapseInitials(props.mmt);
 const states = computed<State[]>(() => props.model?.model?.states ?? []);
+let stateList: {
+	base: ModelPartItem;
+	children: ModelPartItem[];
+	isParent: boolean;
+}[] = createPartsList(collapsedInitials, props.model, PartType.STATE);
+
+watch(
+	() => props.model?.model?.states,
+	() => {
+		stateList = createPartsList(collapsedInitials, props.model, PartType.STATE);
+	}
+);
+
+const collapsedParameters = collapseParameters(props.mmt, props.mmtParams);
+let parameterList: {
+	base: ModelPartItem;
+	children: ModelPartItem[];
+	isParent: boolean;
+}[] = createPartsList(collapsedParameters, props.model, PartType.PARAMETER);
+
+watch(
+	() => props.model.semantics?.ode?.parameters,
+	() => {
+		parameterList = createPartsList(collapsedParameters, props.model, PartType.PARAMETER);
+	}
+);
+
 const transitions = computed<Transition[]>(() =>
 	props.model.model.transitions?.map((transition: Transition) => ({
 		...transition,
@@ -111,6 +163,33 @@ const transitions = computed<Transition[]>(() =>
 		expression: props.model?.semantics?.ode?.rates?.find((rate) => rate.target === transition.id)?.expression
 	}))
 );
+
+const collapsedTemplates = (() => {
+	const templateMap = new Map<string, string[]>();
+	const collapsedTemplatesMap = collapseTemplates(props.mmt).matrixMap;
+	Array.from(collapsedTemplatesMap.keys()).forEach((templateId) => {
+		templateMap.set(
+			templateId,
+			Array.from(collapsedTemplatesMap.get(templateId) ?? []).map(({ name }) => name)
+		);
+	});
+	return templateMap;
+})();
+
+const transitionsList: {
+	base: ModelPartItem;
+	children: ModelPartItem[];
+	isParent: boolean;
+}[] = createPartsList(collapsedTemplates, transitions.value, PartType.TRANSITION);
+
+const parameterMatrixModalId = ref('');
+const transitionMatrixModalId = ref('');
+const observablesList = computed(() => createObservablesList(observables));
+const timeList: {
+	base: ModelPartItem;
+	children: ModelPartItem[];
+	isParent: boolean;
+}[] = createTimeList(time.value);
 </script>
 
 <style scoped>
diff --git a/packages/client/hmi-client/src/components/model/regnet/tera-regnet-parts.vue b/packages/client/hmi-client/src/components/model/regnet/tera-regnet-parts.vue
deleted file mode 100644
index 2136fad8e3..0000000000
--- a/packages/client/hmi-client/src/components/model/regnet/tera-regnet-parts.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-	<Accordion multiple :active-index="currentActiveIndicies">
-		<AccordionTab header="Vertices">
-			<DataTable
-				v-if="!isEmpty(vertices)"
-				data-key="id"
-				:value="vertices"
-				v-on:cell-edit-complete="onCellEditComplete"
-				edit-mode="cell"
-			>
-				<Column field="id" header="Symbol" />
-				<Column field="name" header="Name" />
-				<Column field="rate_constant" header="Rate Constant" />
-				<Column field="initial" header="Initial Value" />
-			</DataTable>
-		</AccordionTab>
-		<AccordionTab header="Edges">
-			<DataTable v-if="!isEmpty(edges)" data-key="id" :value="edges">
-				<Column field="id" header="Symbol" />
-				<Column field="source" header="Source" />
-				<Column field="target" header="Target" />
-				<Column field="properties.rate_constant" header="Rate Constant" />
-			</DataTable>
-		</AccordionTab>
-		<AccordionTab header="Parameters">
-			<tera-parameters
-				v-if="!isEmpty(mmt.parameters)"
-				:model="model"
-				:mmt="mmt"
-				:mmt-params="mmtParams"
-				:feature-config="featureConfig"
-				@update-parameter="emit('update-parameter', $event)"
-			/>
-		</AccordionTab>
-	</Accordion>
-</template>
-
-<script setup lang="ts">
-import type { Model } from '@/types/Types';
-import { isEmpty } from 'lodash';
-import Accordion from 'primevue/accordion';
-import AccordionTab from 'primevue/accordiontab';
-import { computed, ref } from 'vue';
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
-import type { MiraModel, MiraTemplateParams, ObservableSummary } from '@/model-representation/mira/mira-common';
-import TeraParameters from '@/components/model/model-parts/tera-parameters.vue';
-import type { FeatureConfig } from '@/types/common';
-
-const props = defineProps<{
-	model: Model;
-	mmt: MiraModel;
-	mmtParams: MiraTemplateParams;
-	observableSummary: ObservableSummary;
-	featureConfig: FeatureConfig;
-}>();
-
-const emit = defineEmits(['update-parameter']);
-const currentActiveIndicies = ref([0, 1, 2]);
-const vertices = computed(() => props.model?.model?.vertices ?? []);
-const edges = computed(() => props.model.model?.edges ?? []);
-const conceptSearchTerm = ref('');
-
-function onCellEditComplete() {
-	conceptSearchTerm.value = '';
-}
-</script>
diff --git a/packages/client/hmi-client/src/components/model/stockflow/tera-stockflow-parts.vue b/packages/client/hmi-client/src/components/model/stockflow/tera-stockflow-parts.vue
deleted file mode 100644
index ebdbf1b7a1..0000000000
--- a/packages/client/hmi-client/src/components/model/stockflow/tera-stockflow-parts.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-	<Accordion multiple :active-index="currentActiveIndicies">
-		<AccordionTab>
-			<template #header>
-				Initial variables<span class="artifact-amount">({{ initialsLength }})</span>
-			</template>
-			<tera-states
-				v-if="!isEmpty(mmt.initials)"
-				:model="model"
-				:mmt="mmt"
-				:feature-config="featureConfig"
-				@update-state="emit('update-state', $event)"
-			/>
-		</AccordionTab>
-		<AccordionTab>
-			<template #header>
-				Parameters<span class="artifact-amount">({{ parametersLength }})</span>
-			</template>
-			<tera-parameters
-				v-if="!isEmpty(mmt.parameters)"
-				:model="model"
-				:mmt="mmt"
-				:mmt-params="mmtParams"
-				:feature-config="featureConfig"
-				@update-parameter="emit('update-parameter', $event)"
-			/>
-		</AccordionTab>
-		<AccordionTab>
-			<template #header>
-				Observables <span class="artifact-amount">({{ observables.length }})</span>
-			</template>
-			<tera-observables
-				v-if="!isEmpty(observables)"
-				:model="model"
-				:mmt="mmt"
-				:observables="observables"
-				:feature-config="featureConfig"
-				@update-item="emit('update-observable', $event)"
-			/>
-		</AccordionTab>
-		<AccordionTab>
-			<template #header>
-				Flows<span class="artifact-amount">({{ flows.length }})</span>
-			</template>
-			<DataTable v-if="!isEmpty(flows)" data-key="id" :value="flows">
-				<Column field="id" header="ID" />
-				<Column field="name" header="Name" />
-				<Column field="upstream_stock" header="Upstream stock" />
-				<Column field="downstream_stock" header="Downstream stock" />
-				<Column field="rate_expression" header="Rate expression">
-					<template #body="{ data }">
-						<katex-element
-							v-if="data.rate_expression"
-							:expression="stringToLatexExpression(data.rate_expression)"
-							:throw-on-error="false"
-						/>
-						<template v-else>--</template>
-					</template>
-				</Column>
-			</DataTable>
-		</AccordionTab>
-		<AccordionTab>
-			<template #header>
-				Time
-				<span class="artifact-amount">({{ time.length }})</span>
-			</template>
-			<tera-time v-if="time" :time="time" :feature-config="featureConfig" @update-time="emit('update-time', $event)" />
-		</AccordionTab>
-	</Accordion>
-</template>
-
-<script setup lang="ts">
-import type { Model } from '@/types/Types';
-import { isEmpty } from 'lodash';
-import Accordion from 'primevue/accordion';
-import AccordionTab from 'primevue/accordiontab';
-import { computed, ref } from 'vue';
-import { stringToLatexExpression } from '@/services/model';
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
-import type { MiraModel, MiraTemplateParams, ObservableSummary } from '@/model-representation/mira/mira-common';
-import TeraStates from '@/components/model/model-parts/tera-states.vue';
-import TeraParameters from '@/components/model/model-parts/tera-parameters.vue';
-import TeraObservables from '@/components/model/model-parts/tera-observables.vue';
-import TeraTime from '@/components/model/model-parts/tera-time.vue';
-import type { FeatureConfig } from '@/types/common';
-
-const props = defineProps<{
-	model: Model;
-	mmt: MiraModel;
-	mmtParams: MiraTemplateParams;
-	observableSummary: ObservableSummary;
-	featureConfig: FeatureConfig;
-}>();
-
-const emit = defineEmits(['update-state', 'update-parameter', 'update-observable', 'update-time']);
-
-const currentActiveIndicies = ref([0, 1, 2, 3, 4, 5]);
-const initialsLength = computed(() => props.model?.semantics?.ode?.initials?.length ?? 0);
-const parametersLength = computed(
-	() => (props.model?.semantics?.ode.parameters?.length ?? 0) + (props.model?.model?.auxiliaries?.length ?? 0)
-);
-const observables = computed(() => props.model?.semantics?.ode?.observables ?? []);
-const time = computed(() => (props.model?.semantics?.ode?.time ? [props.model?.semantics.ode.time] : []));
-
-const flows = computed(() => props.model?.model?.flows ?? []);
-</script>
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 9b407c0c37..fa0b535948 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
@@ -225,11 +225,9 @@
 							/>
 							<Accordion :active-index="observableActiveIndex" v-if="!isEmpty(calibratedConfigObservables)">
 								<AccordionTab v-if="!isEmpty(calibratedConfigObservables)" header="Observables">
-									<tera-observables
+									<tera-model-part
 										class="pl-4"
-										:model="model"
-										:mmt="configuredMmt"
-										:observables="calibratedConfigObservables"
+										:items="calibratedConfigObservables"
 										:feature-config="{ isPreview: true }"
 									/>
 								</AccordionTab>
@@ -350,7 +348,7 @@ import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
-import TeraObservables from '@/components/model/model-parts/tera-observables.vue';
+import TeraModelPart from '@/components/model/model-parts/tera-model-part.vue';
 import TeraInitialTable from '@/components/model/petrinet/tera-initial-table.vue';
 import TeraParameterTable from '@/components/model/petrinet/tera-parameter-table.vue';
 import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
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 15113f73f6..0fa75a00ad 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
@@ -155,11 +155,9 @@
 					/>
 					<Accordion :active-index="observableActiveIndicies" v-if="!isEmpty(calibratedConfigObservables)">
 						<AccordionTab header="Observables">
-							<tera-observables
+							<tera-model-part
 								class="pl-4"
-								:model="model"
-								:mmt="configuredMmt"
-								:observables="calibratedConfigObservables"
+								:items="calibratedConfigObservables"
 								:feature-config="{ isPreview: true }"
 							/>
 						</AccordionTab>
@@ -241,7 +239,7 @@ import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraNotebookError from '@/components/drilldown/tera-notebook-error.vue';
 import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-input.vue';
 import TeraModelDiagram from '@/components/model/petrinet/tera-model-diagram.vue';
-import TeraObservables from '@/components/model/model-parts/tera-observables.vue';
+import TeraModelPart from '@/components/model/model-parts/tera-model-part.vue';
 import TeraInitialTable from '@/components/model/petrinet/tera-initial-table.vue';
 import TeraParameterTable from '@/components/model/petrinet/tera-parameter-table.vue';
 import { downloadDocumentAsset, getDocumentAsset, getDocumentFileAsText } from '@/services/document-assets';
diff --git a/packages/client/hmi-client/src/model-representation/service.ts b/packages/client/hmi-client/src/model-representation/service.ts
index 476f2a1de6..5f18dac438 100644
--- a/packages/client/hmi-client/src/model-representation/service.ts
+++ b/packages/client/hmi-client/src/model-representation/service.ts
@@ -2,6 +2,7 @@
 import _, { isEmpty } from 'lodash';
 import { runDagreLayout, rerouteEdges } from '@/services/graph';
 import { MiraModel } from '@/model-representation/mira/mira-common';
+import { ModelPartItem } from '@/types/Model';
 import { extractNestedStratas } from '@/model-representation/petrinet/mira-petri';
 import type { Initial, Model, ModelParameter, State, RegNetVertex, Transition, Rate } from '@/types/Types';
 import { getModelType } from '@/services/model';
@@ -350,3 +351,105 @@ export function checkPetrinetAMR(amr: Model) {
 
 	return results;
 }
+
+export enum PartType {
+	STATE = 'STATE',
+	PARAMETER = 'PARAMETER',
+	TRANSITION = 'TRANSITION'
+}
+
+export function createPartsList(parts, model, partType) {
+	return Array.from(parts.keys()).map((id) => {
+		const childTargets = parts.get(id) ?? [];
+		const isParent = childTargets.length > 1;
+		let types;
+
+		switch (partType) {
+			case PartType.STATE:
+				types = getStates(model);
+				break;
+			case PartType.PARAMETER:
+				types = getParameters(model);
+				break;
+			default:
+				types = model;
+		}
+
+		const children = childTargets
+			.map((childTarget) => {
+				const t = types.find((part) => part.id === childTarget);
+				if (!t) return null;
+				const returnObj = {
+					id: t.id,
+					name: t.name,
+					description: t.description,
+					grounding: t.grounding,
+					unitExpression: null,
+					expression: null,
+					input: null,
+					output: null
+				};
+				if (partType === PartType.STATE || PartType.PARAMETER) {
+					returnObj.unitExpression = t.units?.expression;
+				} else if (partType === PartType.TRANSITION) {
+					returnObj.expression = t.expression;
+					returnObj.input = t.input.join(', ');
+					returnObj.output = t.output.join(', ');
+				}
+				return returnObj;
+			})
+			.filter(Boolean) as ModelPartItem[];
+
+		const basePart: any = types.find((t) => {
+			if (partType === PartType.TRANSITION) {
+				return t.id === childTargets[0];
+			}
+			return t.id === id;
+		});
+		const base: ModelPartItem =
+			isParent || !basePart
+				? { id: `${id}` }
+				: {
+						id: `${id}`,
+						name: basePart.name,
+						description: basePart.description,
+						grounding: basePart.grounding,
+						unitExpression: basePart.units?.expression
+					};
+		if (partType === PartType.TRANSITION) {
+			base.templateId = `${id}`;
+			base.input = basePart.input.join(', ');
+			base.output = basePart.output.join(', ');
+		}
+
+		return { base, children, isParent };
+	});
+}
+
+export function createObservablesList(observables) {
+	return observables.map((observable) => {
+		const { id, name, expression, description, units, grounding } = observable;
+		return {
+			base: {
+				id,
+				name,
+				description,
+				unitExpression: units?.expression,
+				grounding,
+				expression,
+				expression_mathml: observable.expression_mathml
+			},
+			// Observables can't be stratified therefore don't have children
+			children: [],
+			isParent: false
+		};
+	});
+}
+
+export function createTimeList(time) {
+	return time.map(({ id, name, description, grounding, units }) => ({
+		base: { id, name, description, grounding, unitExpression: units?.expression },
+		children: [],
+		isParent: false
+	}));
+}