diff --git a/src/main/components/controls/icon/stereotype-off.tsx b/src/main/components/controls/icon/stereotype-off.tsx
new file mode 100644
index 000000000..1ae0a4d8f
--- /dev/null
+++ b/src/main/components/controls/icon/stereotype-off.tsx
@@ -0,0 +1,16 @@
+import React, { SVGAttributes } from 'react';
+import { Icon } from './icon';
+
+type Props = SVGAttributes<SVGSVGElement>;
+
+export const StereotypeOffIcon = (props: Props): React.JSX.Element => (
+  <Icon viewBox="0 0 128 128" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M82.1654 32.6199C82.0806 32.6106 81.9949 32.6059 81.9085 32.6059H74.1387C73.2767 32.6059 72.4831 33.0754 72.068 33.8309C71.653 34.5864 71.6824 35.508 72.1447 36.2356L74.6334 40.1518L82.1654 32.6199ZM42.8297 71.9556L37.7981 64.0579L55.5222 36.2378C55.9856 35.5104 56.0158 34.5883 55.601 33.8321C55.1861 33.0759 54.3922 32.6059 53.5297 32.6059H45.7599C44.9738 32.6059 44.2392 32.9969 43.8002 33.6489L24.6599 62.0751C24.3973 62.465 24.257 62.9245 24.257 63.3946V64.7212C24.257 65.1913 24.3973 65.6507 24.6599 66.0407L34.3513 80.4339L42.8297 71.9556ZM47.3686 95.5099L53.7626 89.116L55.5222 91.8779C55.9856 92.6054 56.0158 93.5275 55.601 94.2837C55.1861 95.0399 54.3922 95.5099 53.5297 95.5099H47.3686ZM28.0126 86.7726L19.9011 94.8841C19.7674 94.7608 19.647 94.6212 19.5431 94.4669L0.402837 66.0407C0.140261 65.6507 0 65.1913 0 64.7212V63.3946C0 62.9245 0.140261 62.465 0.402837 62.0751L19.5431 33.6489C19.9822 32.9969 20.7168 32.6059 21.5028 32.6059H29.2727C30.1352 32.6059 30.9291 33.0759 31.344 33.8321C31.7588 34.5883 31.7286 35.5104 31.2652 36.2378L13.5411 64.0579L28.0126 86.7726ZM85.5494 57.3292L94.0734 48.8051L103.009 62.0751C103.271 62.465 103.411 62.9245 103.411 63.3946V64.7212C103.411 65.1913 103.271 65.6507 103.009 66.0407L83.8682 94.4669C83.4292 95.1189 82.6946 95.5099 81.9085 95.5099H74.1387C73.2767 95.5099 72.4831 95.0404 72.068 94.2849C71.653 93.5294 71.6824 92.6078 72.1447 91.8802L89.8253 64.0579L85.5494 57.3292ZM100.584 42.2947L114.414 64.0579L96.7334 91.8802C96.271 92.6078 96.2416 93.5294 96.6567 94.2849C97.0717 95.0404 97.8653 95.5099 98.7273 95.5099H106.497C107.283 95.5099 108.018 95.1189 108.457 94.4669L127.597 66.0407C127.86 65.6507 128 65.1913 128 64.7212V63.3946C128 62.9245 127.86 62.465 127.597 62.0751L108.768 34.1107L100.584 42.2947Z"
+      fill="black"
+    />
+    <rect x="110.479" y="10" width="11.8127" height="141.697" rx="2" transform="rotate(45 110.479 10)" fill="black" />
+  </Icon>
+);
diff --git a/src/main/components/controls/icon/stereotype-on.tsx b/src/main/components/controls/icon/stereotype-on.tsx
new file mode 100644
index 000000000..f1e32e177
--- /dev/null
+++ b/src/main/components/controls/icon/stereotype-on.tsx
@@ -0,0 +1,29 @@
+import React, { SVGAttributes } from 'react';
+import { Icon } from './icon';
+
+type Props = SVGAttributes<SVGSVGElement>;
+
+export const StereotypeOnIcon = (props: Props): React.JSX.Element => (
+  <Icon viewBox="0 0 128 128" {...props}>
+    <path
+      d="M74.1387 93.5415L92.8052 64.1677H101.049V65.1153L81.9085 93.5415H74.1387ZM74.1387 35.3625H81.9085L101.049 63.7887V64.7363H92.8052L74.1387 35.3625ZM98.7273 93.5415L117.394 64.1677H125.637V65.1153L106.497 93.5415H98.7273ZM98.7273 35.3625H106.497L125.637 63.7887V64.7363H117.394L98.7273 35.3625Z"
+      fill="black"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M72.068 34.225C72.4831 33.4695 73.2767 33 74.1387 33H81.9085C82.6946 33 83.4292 33.391 83.8682 34.043L103.009 62.4692C103.271 62.8592 103.411 63.3186 103.411 63.7887V65.1153C103.411 65.5854 103.271 66.0448 103.009 66.4348L83.8682 94.861C83.4292 95.513 82.6946 95.904 81.9085 95.904H74.1387C73.2767 95.904 72.4831 95.4345 72.068 94.679C71.653 93.9235 71.6824 93.0019 72.1447 92.2743L89.8254 64.452L72.1447 36.6297C71.6824 35.9021 71.653 34.9805 72.068 34.225ZM93.7418 67.0988L78.4393 91.1789H80.6511L96.8651 67.0988H93.7418ZM96.8651 61.8052H93.7418L78.4393 37.7251H80.6511L96.8651 61.8052ZM96.6567 34.225C97.0717 33.4695 97.8653 33 98.7273 33H106.497C107.283 33 108.018 33.391 108.457 34.043L127.597 62.4692C127.86 62.8592 128 63.3186 128 63.7887V65.1153C128 65.5854 127.86 66.0448 127.597 66.4348L108.457 94.861C108.018 95.513 107.283 95.904 106.497 95.904H98.7273C97.8653 95.904 97.0717 95.4345 96.6567 94.679C96.2416 93.9235 96.271 93.0019 96.7334 92.2743L114.414 64.452L96.7334 36.6297C96.271 35.9021 96.2416 34.9805 96.6567 34.225ZM118.33 67.0988L103.028 91.1789H105.24L121.454 67.0988H118.33ZM121.454 61.8052H118.33L103.028 37.7251H105.24L121.454 61.8052Z"
+      fill="black"
+    />
+    <path
+      d="M29.2727 93.5415H21.5028L2.36253 65.1153V64.1677H10.5588L29.2727 93.5415ZM29.2727 35.3625L10.5588 64.7363H2.36253V63.7887L21.5028 35.3625H29.2727ZM53.5297 93.5415H45.7599L26.6196 65.1153V64.1677H34.8158L53.5297 93.5415ZM53.5297 35.3625L34.8158 64.7363H26.6196V63.7887L45.7599 35.3625H53.5297Z"
+      fill="black"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.5431 34.043C19.9822 33.391 20.7168 33 21.5028 33H29.2727C30.1352 33 30.9291 33.47 31.344 34.2262C31.7588 34.9824 31.7286 35.9045 31.2652 36.632L13.5411 64.452L31.2652 92.2721C31.7286 92.9995 31.7588 93.9216 31.344 94.6778C30.9291 95.434 30.1352 95.904 29.2727 95.904H21.5028C20.7168 95.904 19.9822 95.513 19.5431 94.861L0.402837 66.4348C0.140261 66.0448 0 65.5854 0 65.1153V63.7887C0 63.3186 0.140261 62.8592 0.402837 62.4692L19.5431 34.043ZM6.54628 67.0988L22.7602 91.1789H24.9662L9.62486 67.0988H6.54628ZM9.62486 61.8052H6.54628L22.7602 37.7251H24.9662L9.62486 61.8052ZM43.8002 34.043C44.2392 33.391 44.9738 33 45.7599 33H53.5297C54.3922 33 55.1861 33.47 55.601 34.2262C56.0158 34.9824 55.9856 35.9045 55.5222 36.632L37.7981 64.452L55.5222 92.2721C55.9856 92.9995 56.0158 93.9216 55.601 94.6778C55.1861 95.434 54.3922 95.904 53.5297 95.904H45.7599C44.9738 95.904 44.2392 95.513 43.8002 94.861L24.6599 66.4348C24.3973 66.0448 24.257 65.5854 24.257 65.1153V63.7887C24.257 63.3186 24.3973 62.8592 24.6599 62.4692L43.8002 34.043ZM30.8033 67.0988L47.0173 91.1789H49.2233L33.8819 67.0988H30.8033ZM33.8819 61.8052H30.8033L47.0173 37.7251H49.2233L33.8819 61.8052Z"
+      fill="black"
+    />
+  </Icon>
+);
diff --git a/src/main/components/controls/stereotype-toggle/stereotype-toggle.tsx b/src/main/components/controls/stereotype-toggle/stereotype-toggle.tsx
new file mode 100644
index 000000000..19fec39ec
--- /dev/null
+++ b/src/main/components/controls/stereotype-toggle/stereotype-toggle.tsx
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+import { StereotypeOnIcon } from '../icon/stereotype-on';
+import { StereotypeOffIcon } from '../icon/stereotype-off';
+import { Button } from '../button/button';
+
+type Props = { onChange: () => void; value: boolean };
+
+export class StereotypeToggle extends Component<Props> {
+  render(): React.JSX.Element {
+    const { value, onChange } = this.props;
+
+    return (
+      <Button color="link" tabIndex={-1} onClick={onChange}>
+        {value ? <StereotypeOnIcon /> : <StereotypeOffIcon />}
+      </Button>
+    );
+  }
+}
diff --git a/src/main/packages/common/uml-classifier/uml-classifier-member.ts b/src/main/packages/common/uml-classifier/uml-classifier-member.ts
index a5c58d48f..482508136 100644
--- a/src/main/packages/common/uml-classifier/uml-classifier-member.ts
+++ b/src/main/packages/common/uml-classifier/uml-classifier-member.ts
@@ -3,7 +3,7 @@ import { ILayoutable } from '../../../services/layouter/layoutable';
 import { IUMLElement, UMLElement } from '../../../services/uml-element/uml-element';
 import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features';
 import { assign } from '../../../utils/fx/assign';
-import { IBoundary } from '../../../utils/geometry/boundary';
+import { IBoundary, computeDimension } from '../../../utils/geometry/boundary';
 import { Text } from '../../../utils/svg/text';
 import { DeepPartial } from '../../../typings';
 
@@ -19,7 +19,7 @@ export abstract class UMLClassifierMember extends UMLElement {
     updatable: false,
   };
 
-  bounds: IBoundary = { ...this.bounds, height: 30 };
+  bounds: IBoundary = { ...this.bounds, height: computeDimension(1.0, 30) };
 
   constructor(values?: DeepPartial<IUMLElement>) {
     super(values);
diff --git a/src/main/packages/common/uml-component/uml-component-component.tsx b/src/main/packages/common/uml-component/uml-component-component.tsx
index 475ef2121..c66f16211 100644
--- a/src/main/packages/common/uml-component/uml-component-component.tsx
+++ b/src/main/packages/common/uml-component/uml-component-component.tsx
@@ -28,12 +28,12 @@ export const UMLComponentComponent: FunctionComponent<Props> = ({ element, child
       />
     </g>
     <Text fill={element.textColor}>
-      {element.stereotype && (
+      {element.stereotype && element.displayStereotype && (
         <tspan x="50%" dy={-8} textAnchor="middle" fontSize="85%">
           {`«${element.stereotype}»`}
         </tspan>
       )}
-      <tspan x="50%" dy={element.stereotype ? 18 : 10} textAnchor="middle">
+      <tspan x="50%" dy={element.stereotype && element.displayStereotype ? 18 : 0} textAnchor="middle">
         {element.name}
       </tspan>
     </Text>
diff --git a/src/main/packages/common/uml-component/uml-component-update.tsx b/src/main/packages/common/uml-component/uml-component-update.tsx
new file mode 100644
index 000000000..42e750319
--- /dev/null
+++ b/src/main/packages/common/uml-component/uml-component-update.tsx
@@ -0,0 +1,89 @@
+import React, { Component, ComponentType } from 'react';
+import { connect, ConnectedComponent } from 'react-redux';
+import { Button } from '../../../components/controls/button/button';
+import { ColorButton } from '../../../components/controls/color-button/color-button';
+import { TrashIcon } from '../../../components/controls/icon/trash';
+import { Textfield } from '../../../components/controls/textfield/textfield';
+import { ModelState } from '../../../components/store/model-state';
+import { StylePane } from '../../../components/style-pane/style-pane';
+import { styled } from '../../../components/theme/styles';
+import { UMLElementRepository } from '../../../services/uml-element/uml-element-repository';
+import { AsyncDispatch } from '../../../utils/actions/actions';
+import { IUMLComponent, UMLComponent } from './uml-component';
+import { StereotypeToggle } from '../../../components/controls/stereotype-toggle/stereotype-toggle';
+
+const Flex = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+`;
+
+type State = { colorOpen: boolean };
+
+class ComponentUpdate extends Component<Props, State> {
+  state = { colorOpen: false };
+
+  private toggleColor = () => {
+    this.setState((state) => ({
+      colorOpen: !state.colorOpen,
+    }));
+  };
+
+  render() {
+    const { element } = this.props;
+
+    return (
+      <div>
+        <section>
+          <Flex>
+            <Textfield value={element.name} onChange={this.onRename} autoFocus />
+            <ColorButton onClick={this.toggleColor} />
+            <StereotypeToggle value={element.displayStereotype} onChange={this.onStereotypeVisibilityToggle} />
+            <Button color="link" tabIndex={-1} onClick={() => this.props.delete(element.id)}>
+              <TrashIcon />
+            </Button>
+          </Flex>
+        </section>
+        <StylePane
+          open={this.state.colorOpen}
+          element={element}
+          onColorChange={this.props.update}
+          lineColor
+          textColor
+          fillColor
+        />
+      </div>
+    );
+  }
+
+  private onRename = (value: string) => {
+    const { element, update } = this.props;
+    update<IUMLComponent>(element.id, { name: value });
+  };
+
+  private onStereotypeVisibilityToggle = () => {
+    const { element, update } = this.props;
+    const newVisibilityValue = !element.displayStereotype;
+    update<IUMLComponent>(element.id, { displayStereotype: newVisibilityValue });
+  };
+}
+
+type OwnProps = {
+  element: UMLComponent;
+};
+
+type StateProps = {};
+
+type DispatchProps = {
+  update: typeof UMLElementRepository.update;
+  delete: AsyncDispatch<typeof UMLElementRepository.delete>;
+};
+
+type Props = OwnProps & StateProps & DispatchProps;
+
+const enhance = connect<StateProps, DispatchProps, OwnProps, ModelState>(null, {
+  update: UMLElementRepository.update,
+  delete: UMLElementRepository.delete,
+});
+
+export const UMLComponentUpdate: ConnectedComponent<ComponentType<Props>, OwnProps> = enhance(ComponentUpdate);
diff --git a/src/main/packages/common/uml-component/uml-component.ts b/src/main/packages/common/uml-component/uml-component.ts
index bd1cbbbea..cb7934d47 100644
--- a/src/main/packages/common/uml-component/uml-component.ts
+++ b/src/main/packages/common/uml-component/uml-component.ts
@@ -1,9 +1,12 @@
+import { IUMLContainer } from '../../../services/uml-container/uml-container';
 import { UMLPackage } from '../uml-package/uml-package';
 
-export interface IUMLComponent {
+export interface IUMLComponent extends IUMLContainer {
   stereotype: string;
+  displayStereotype: boolean;
 }
 
 export abstract class UMLComponent extends UMLPackage implements IUMLComponent {
   stereotype = 'component';
+  displayStereotype = true;
 }
diff --git a/src/main/packages/popups.ts b/src/main/packages/popups.ts
index 6be2b02d9..30dcd5292 100644
--- a/src/main/packages/popups.ts
+++ b/src/main/packages/popups.ts
@@ -4,6 +4,8 @@ import { DefaultRelationshipPopup } from './common/default-relationship-popup';
 import { UMLClassifierUpdate } from './common/uml-classifier/uml-classifier-update';
 import { UMLActivityControlFlowUpdate } from './uml-activity-diagram/uml-activity-control-flow/uml-activity-control-flow-update';
 import { UMLActivityMergeNodeUpdate } from './uml-activity-diagram/uml-activity-merge-node/uml-activity-merge-node-update';
+import { UMLComponentSubsystemUpdate } from './uml-component-diagram/uml-component-subsystem/uml-component-subsystem-update';
+import { UMLComponentUpdate } from './common/uml-component/uml-component-update';
 import { UMLClassAssociationUpdate } from './uml-class-diagram/uml-class-association/uml-class-association-update';
 import { UMLCommunicationLinkUpdate } from './uml-communication-diagram/uml-communication-link/uml-communication-link-update';
 import { UMLComponentAssociationUpdate } from './uml-component-diagram/uml-component-association-update';
@@ -58,11 +60,11 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT
   [UMLElementType.UseCase]: DefaultPopup,
   [UMLElementType.UseCaseActor]: DefaultPopup,
   [UMLElementType.UseCaseSystem]: DefaultPopup,
-  [UMLElementType.Component]: DefaultPopup,
-  [UMLElementType.Subsystem]: DefaultPopup,
+  [UMLElementType.Component]: UMLComponentUpdate,
+  [UMLElementType.Subsystem]: UMLComponentSubsystemUpdate,
   [UMLElementType.ComponentInterface]: DefaultPopup,
   [UMLElementType.DeploymentNode]: UMLDeploymentNodeUpdate,
-  [UMLElementType.DeploymentComponent]: DefaultPopup,
+  [UMLElementType.DeploymentComponent]: UMLComponentUpdate,
   [UMLElementType.DeploymentArtifact]: DefaultPopup,
   [UMLElementType.DeploymentInterface]: DefaultPopup,
   [UMLElementType.PetriNetPlace]: UMLPetriNetPlaceUpdate,
diff --git a/src/main/packages/uml-class-diagram/class-preview.ts b/src/main/packages/uml-class-diagram/class-preview.ts
index 7841c4f1e..345728392 100644
--- a/src/main/packages/uml-class-diagram/class-preview.ts
+++ b/src/main/packages/uml-class-diagram/class-preview.ts
@@ -40,7 +40,7 @@ export const composeClassPreview: ComposePreview = (layer: ILayer, translate: (i
       x: 0,
       y: 0,
       width: computeDimension(1.0, 200),
-      height: computeDimension(1.0, 40),
+      height: computeDimension(1.0, 30),
     },
   });
 
@@ -51,7 +51,7 @@ export const composeClassPreview: ComposePreview = (layer: ILayer, translate: (i
       x: 0,
       y: 0,
       width: computeDimension(1.0, 200),
-      height: computeDimension(1.0, 40),
+      height: computeDimension(1.0, 30),
     },
   });
 
@@ -72,7 +72,7 @@ export const composeClassPreview: ComposePreview = (layer: ILayer, translate: (i
       x: 0,
       y: 40,
       width: computeDimension(1.0, 200),
-      height: computeDimension(1.0, 40),
+      height: computeDimension(1.0, 30),
     },
   });
   const umlAbstractMethod = new UMLClassMethod({
@@ -82,7 +82,7 @@ export const composeClassPreview: ComposePreview = (layer: ILayer, translate: (i
       x: 0,
       y: 70,
       width: computeDimension(1.0, 200),
-      height: computeDimension(1.0, 40),
+      height: computeDimension(1.0, 30),
     },
   });
   umlAbstract.ownedElements = [umlAbstractAttribute.id, umlAbstractMethod.id];
@@ -104,7 +104,7 @@ export const composeClassPreview: ComposePreview = (layer: ILayer, translate: (i
       x: 0,
       y: 50,
       width: computeDimension(1.0, 200),
-      height: computeDimension(1.0, 40),
+      height: computeDimension(1.0, 30),
     },
   });
   const umlInterfaceMethod = new UMLClassMethod({
@@ -114,7 +114,7 @@ export const composeClassPreview: ComposePreview = (layer: ILayer, translate: (i
       x: 0,
       y: 80,
       width: computeDimension(1.0, 200),
-      height: computeDimension(1.0, 40),
+      height: computeDimension(1.0, 30),
     },
   });
   umlInterface.ownedElements = [umlInterfaceAttribute.id, umlInterfaceMethod.id];
@@ -136,7 +136,7 @@ export const composeClassPreview: ComposePreview = (layer: ILayer, translate: (i
       x: 0,
       y: 50,
       width: computeDimension(1.0, 200),
-      height: computeDimension(1.0, 40),
+      height: computeDimension(1.0, 30),
     },
   });
   const umlEnumerationCase2 = new UMLClassAttribute({
@@ -146,7 +146,7 @@ export const composeClassPreview: ComposePreview = (layer: ILayer, translate: (i
       x: 0,
       y: 80,
       width: computeDimension(1.0, 200),
-      height: computeDimension(1.0, 40),
+      height: computeDimension(1.0, 30),
     },
   });
   const umlEnumerationCase3 = new UMLClassAttribute({
@@ -156,7 +156,7 @@ export const composeClassPreview: ComposePreview = (layer: ILayer, translate: (i
       x: 0,
       y: 110,
       width: computeDimension(1.0, 200),
-      height: computeDimension(1.0, 40),
+      height: computeDimension(1.0, 30),
     },
   });
   umlEnumeration.ownedElements = [umlEnumerationCase1.id, umlEnumerationCase2.id, umlEnumerationCase3.id];
diff --git a/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem-component.tsx b/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem-component.tsx
index d717de65d..71e3809ab 100644
--- a/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem-component.tsx
+++ b/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem-component.tsx
@@ -28,12 +28,12 @@ export const UMLComponentSubsystem: FunctionComponent<Props> = ({ element, child
       />
     </g>
     <Text fill={element.textColor} y={`${25}px`}>
-      {element.stereotype && (
+      {element.stereotype && element.displayStereotype && (
         <tspan x="50%" dy={-8} textAnchor="middle" fontSize="85%">
           {`«${element.stereotype}»`}
         </tspan>
       )}
-      <tspan x="50%" dy={element.stereotype ? 18 : 10} textAnchor="middle">
+      <tspan x="50%" dy={element.stereotype && element.displayStereotype ? 18 : 0} textAnchor="middle">
         {element.name}
       </tspan>
     </Text>
diff --git a/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem-update.tsx b/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem-update.tsx
new file mode 100644
index 000000000..a621ce492
--- /dev/null
+++ b/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem-update.tsx
@@ -0,0 +1,91 @@
+import React, { Component, ComponentType } from 'react';
+import { connect, ConnectedComponent } from 'react-redux';
+import { Button } from '../../../components/controls/button/button';
+import { ColorButton } from '../../../components/controls/color-button/color-button';
+import { TrashIcon } from '../../../components/controls/icon/trash';
+import { Textfield } from '../../../components/controls/textfield/textfield';
+import { ModelState } from '../../../components/store/model-state';
+import { StylePane } from '../../../components/style-pane/style-pane';
+import { styled } from '../../../components/theme/styles';
+import { UMLElementRepository } from '../../../services/uml-element/uml-element-repository';
+import { AsyncDispatch } from '../../../utils/actions/actions';
+import { IUMLSubsystem, UMLSubsystem } from './uml-component-subsystem';
+import { StereotypeToggle } from '../../../components/controls/stereotype-toggle/stereotype-toggle';
+
+const Flex = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+`;
+
+type State = { colorOpen: boolean };
+
+class ComponentSubsystemUpdate extends Component<Props, State> {
+  state = { colorOpen: false };
+
+  private toggleColor = () => {
+    this.setState((state) => ({
+      colorOpen: !state.colorOpen,
+    }));
+  };
+
+  render() {
+    const { element } = this.props;
+
+    return (
+      <div>
+        <section>
+          <Flex>
+            <Textfield value={element.name} onChange={this.onRename} autoFocus />
+            <ColorButton onClick={this.toggleColor} />
+            <StereotypeToggle value={element.displayStereotype} onChange={this.onStereotypeVisibilityToggle} />
+            <Button color="link" tabIndex={-1} onClick={() => this.props.delete(element.id)}>
+              <TrashIcon />
+            </Button>
+          </Flex>
+        </section>
+        <StylePane
+          open={this.state.colorOpen}
+          element={element}
+          onColorChange={this.props.update}
+          lineColor
+          textColor
+          fillColor
+        />
+      </div>
+    );
+  }
+
+  private onRename = (value: string) => {
+    const { element, update } = this.props;
+    update<IUMLSubsystem>(element.id, { name: value });
+  };
+
+  private onStereotypeVisibilityToggle = () => {
+    const { element, update } = this.props;
+    const newVisibilityValue = !element.displayStereotype;
+    update<IUMLSubsystem>(element.id, { displayStereotype: newVisibilityValue });
+  };
+}
+
+type OwnProps = {
+  element: UMLSubsystem;
+};
+
+type StateProps = {};
+
+type DispatchProps = {
+  update: typeof UMLElementRepository.update;
+  delete: AsyncDispatch<typeof UMLElementRepository.delete>;
+};
+
+type Props = OwnProps & StateProps & DispatchProps;
+
+const enhance = connect<StateProps, DispatchProps, OwnProps, ModelState>(null, {
+  update: UMLElementRepository.update,
+  delete: UMLElementRepository.delete,
+});
+
+export const UMLComponentSubsystemUpdate: ConnectedComponent<ComponentType<Props>, OwnProps> = enhance(
+  ComponentSubsystemUpdate,
+);
diff --git a/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem.ts b/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem.ts
index 0abb1b793..963132267 100644
--- a/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem.ts
+++ b/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem.ts
@@ -1,8 +1,13 @@
+import { DeepPartial } from 'redux';
 import { UMLPackage } from '../../common/uml-package/uml-package';
 import { ComponentElementType, ComponentRelationshipType } from '..';
+import { IUMLContainer } from '../../../services/uml-container/uml-container';
+import * as Apollon from '../../../typings';
+import { assign } from '../../../utils/fx/assign';
 
-export interface IUMLSubsystem {
+export interface IUMLSubsystem extends IUMLContainer {
   stereotype: string;
+  displayStereotype: boolean;
 }
 
 export class UMLSubsystem extends UMLPackage implements IUMLSubsystem {
@@ -12,5 +17,32 @@ export class UMLSubsystem extends UMLPackage implements IUMLSubsystem {
     ComponentRelationshipType.ComponentInterfaceRequired,
   ];
   stereotype = 'subsystem';
+  displayStereotype = true;
   type = ComponentElementType.Subsystem;
+
+  constructor(values?: DeepPartial<IUMLSubsystem>) {
+    super();
+    assign<IUMLSubsystem>(this, values);
+  }
+
+  serialize(): Apollon.UMLComponentSubsystem {
+    return {
+      ...super.serialize(),
+      type: this.type as keyof typeof ComponentElementType,
+      stereotype: this.stereotype,
+      displayStereotype: this.displayStereotype,
+    };
+  }
+
+  deserialize<T extends Apollon.UMLModelElement>(values: T, children?: Apollon.UMLModelElement[]): void {
+    const assert = (v: Apollon.UMLModelElement): v is Apollon.UMLComponentSubsystem =>
+      v.type === ComponentElementType.Subsystem;
+    if (!assert(values)) {
+      return;
+    }
+
+    super.deserialize(values, children);
+    this.stereotype = values.stereotype;
+    this.displayStereotype = values.displayStereotype;
+  }
 }
diff --git a/src/main/packages/uml-component-diagram/uml-component/uml-component-component.ts b/src/main/packages/uml-component-diagram/uml-component/uml-component-component.ts
index f371f190d..efb243fea 100644
--- a/src/main/packages/uml-component-diagram/uml-component/uml-component-component.ts
+++ b/src/main/packages/uml-component-diagram/uml-component/uml-component-component.ts
@@ -1,5 +1,8 @@
 import { ComponentElementType, ComponentRelationshipType } from '..';
-import { UMLComponent } from '../../common/uml-component/uml-component';
+import { IUMLComponent, UMLComponent } from '../../common/uml-component/uml-component';
+import { DeepPartial } from 'redux';
+import * as Apollon from '../../../typings';
+import { assign } from '../../../utils/fx/assign';
 
 export class UMLComponentComponent extends UMLComponent {
   static supportedRelationships = [
@@ -8,4 +11,28 @@ export class UMLComponentComponent extends UMLComponent {
     ComponentRelationshipType.ComponentInterfaceRequired,
   ];
   type = ComponentElementType.Component;
+
+  constructor(values?: DeepPartial<IUMLComponent>) {
+    super();
+    assign<IUMLComponent>(this, values);
+  }
+
+  serialize(): Apollon.UMLComponentComponent {
+    return {
+      ...super.serialize(),
+      type: this.type as keyof typeof ComponentElementType,
+      displayStereotype: this.displayStereotype,
+    };
+  }
+
+  deserialize<T extends Apollon.UMLModelElement>(values: T, children?: Apollon.UMLModelElement[]): void {
+    const assert = (v: Apollon.UMLModelElement): v is Apollon.UMLComponentComponent =>
+      v.type === ComponentElementType.Component;
+    if (!assert(values)) {
+      return;
+    }
+
+    super.deserialize(values, children);
+    this.displayStereotype = values.displayStereotype;
+  }
 }
diff --git a/src/main/packages/uml-deployment-diagram/uml-deployment-component/uml-component.ts b/src/main/packages/uml-deployment-diagram/uml-deployment-component/uml-component.ts
index 68d9ac952..61b9e4a4c 100644
--- a/src/main/packages/uml-deployment-diagram/uml-deployment-component/uml-component.ts
+++ b/src/main/packages/uml-deployment-diagram/uml-deployment-component/uml-component.ts
@@ -1,4 +1,8 @@
+import { DeepPartial } from 'redux';
 import { DeploymentElementType, DeploymentRelationshipType } from '..';
+import { IUMLComponent } from '../../common/uml-component/uml-component';
+import * as Apollon from '../../../typings';
+import { assign } from '../../../utils/fx/assign';
 import { UMLComponent } from '../../common/uml-component/uml-component';
 
 export class UMLDeploymentComponent extends UMLComponent {
@@ -9,4 +13,28 @@ export class UMLDeploymentComponent extends UMLComponent {
     DeploymentRelationshipType.DeploymentInterfaceRequired,
   ];
   type = DeploymentElementType.DeploymentComponent;
+
+  constructor(values?: DeepPartial<IUMLComponent>) {
+    super();
+    assign<IUMLComponent>(this, values);
+  }
+
+  serialize(): Apollon.UMLDeploymentComponent {
+    return {
+      ...super.serialize(),
+      type: this.type as keyof typeof DeploymentElementType,
+      displayStereotype: this.displayStereotype,
+    };
+  }
+
+  deserialize<T extends Apollon.UMLModelElement>(values: T, children?: Apollon.UMLModelElement[]): void {
+    const assert = (v: Apollon.UMLModelElement): v is Apollon.UMLDeploymentComponent =>
+      v.type === DeploymentElementType.DeploymentComponent;
+    if (!assert(values)) {
+      return;
+    }
+
+    super.deserialize(values, children);
+    this.displayStereotype = values.displayStereotype;
+  }
 }
diff --git a/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component.tsx b/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component.tsx
index 7a22395c5..3ed1d1b58 100644
--- a/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component.tsx
+++ b/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-component.tsx
@@ -26,12 +26,17 @@ export const UMLDeploymentNodeComponent: FunctionComponent<Props> = ({ element,
       />
     </g>
     <Text y={30} fill={element.textColor}>
-      {element.stereotype && (
+      {element.stereotype && element.displayStereotype && (
         <tspan x="50%" dy={-8} textAnchor="middle" fontSize="85%">
           {`«${element.stereotype}»`}
         </tspan>
       )}
-      <tspan x="50%" dy={element.stereotype ? 18 : 10} textDecoration="underline" textAnchor="middle">
+      <tspan
+        x="50%"
+        dy={element.stereotype && element.displayStereotype ? 18 : 0}
+        textDecoration="underline"
+        textAnchor="middle"
+      >
         {element.name}
       </tspan>
     </Text>
diff --git a/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-update.tsx b/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-update.tsx
index 73b5dabc7..64c3b04c6 100644
--- a/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-update.tsx
+++ b/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-update.tsx
@@ -11,6 +11,7 @@ import { styled } from '../../../components/theme/styles';
 import { UMLElementRepository } from '../../../services/uml-element/uml-element-repository';
 import { AsyncDispatch } from '../../../utils/actions/actions';
 import { IUMLDeploymentNode, UMLDeploymentNode } from './uml-deployment-node';
+import { StereotypeToggle } from '../../../components/controls/stereotype-toggle/stereotype-toggle';
 
 const Flex = styled.div`
   display: flex;
@@ -38,6 +39,7 @@ class DeploymentNodeUpdate extends Component<Props, State> {
           <Flex>
             <Textfield value={element.name} onChange={this.onRename} autoFocus />
             <ColorButton onClick={this.toggleColor} />
+            <StereotypeToggle value={element.displayStereotype} onChange={this.onStereotypeVisibilityToggle} />
             <Button color="link" tabIndex={-1} onClick={() => this.props.delete(element.id)}>
               <TrashIcon />
             </Button>
@@ -54,7 +56,7 @@ class DeploymentNodeUpdate extends Component<Props, State> {
         <section>
           <Divider />
           <Flex>
-            <Textfield value={element.stereotype} onChange={this.onUpdate} />
+            <Textfield value={element.stereotype} onChange={this.onStereotypeRename} />
           </Flex>
         </section>
       </div>
@@ -66,7 +68,13 @@ class DeploymentNodeUpdate extends Component<Props, State> {
     update<IUMLDeploymentNode>(element.id, { name: value });
   };
 
-  private onUpdate = (value: string) => {
+  private onStereotypeVisibilityToggle = () => {
+    const { element, update } = this.props;
+    const newVisibilityValue = !element.displayStereotype;
+    update<IUMLDeploymentNode>(element.id, { displayStereotype: newVisibilityValue });
+  };
+
+  private onStereotypeRename = (value: string) => {
     const { element, update } = this.props;
     update<IUMLDeploymentNode>(element.id, { stereotype: value });
   };
diff --git a/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node.ts b/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node.ts
index 6c6cbf323..aca288653 100644
--- a/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node.ts
+++ b/src/main/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node.ts
@@ -8,6 +8,7 @@ import { UMLElementType } from '../../uml-element-type';
 
 export interface IUMLDeploymentNode extends IUMLContainer {
   stereotype: string;
+  displayStereotype: boolean;
 }
 
 export class UMLDeploymentNode extends UMLPackage implements IUMLDeploymentNode {
@@ -19,6 +20,7 @@ export class UMLDeploymentNode extends UMLPackage implements IUMLDeploymentNode
   ];
   type: UMLElementType = DeploymentElementType.DeploymentNode;
   stereotype: string = 'node';
+  displayStereotype = true;
 
   constructor(values?: DeepPartial<IUMLDeploymentNode>) {
     super();
@@ -30,10 +32,11 @@ export class UMLDeploymentNode extends UMLPackage implements IUMLDeploymentNode
       ...super.serialize(),
       type: this.type as keyof typeof DeploymentElementType,
       stereotype: this.stereotype,
+      displayStereotype: this.displayStereotype,
     };
   }
 
-  deserialize<T extends Apollon.UMLModelElement>(values: T, children?: Apollon.UMLModelElement[]) {
+  deserialize<T extends Apollon.UMLModelElement>(values: T, children?: Apollon.UMLModelElement[]): void {
     const assert = (v: Apollon.UMLModelElement): v is Apollon.UMLDeploymentNode =>
       v.type === DeploymentElementType.DeploymentNode;
     if (!assert(values)) {
@@ -42,5 +45,6 @@ export class UMLDeploymentNode extends UMLPackage implements IUMLDeploymentNode
 
     super.deserialize(values, children);
     this.stereotype = values.stereotype;
+    this.displayStereotype = values.displayStereotype;
   }
 }
diff --git a/src/main/typings.ts b/src/main/typings.ts
index 8c74c6ca2..845720378 100644
--- a/src/main/typings.ts
+++ b/src/main/typings.ts
@@ -85,6 +85,20 @@ export type UMLClassifier = UMLElement & {
 
 export type UMLDeploymentNode = UMLElement & {
   stereotype: string;
+  displayStereotype: boolean;
+};
+
+export type UMLDeploymentComponent = UMLElement & {
+  displayStereotype: boolean;
+};
+
+export type UMLComponentSubsystem = UMLElement & {
+  stereotype: string;
+  displayStereotype: boolean;
+};
+
+export type UMLComponentComponent = UMLElement & {
+  displayStereotype: boolean;
 };
 
 export type UMLPetriNetPlace = UMLElement & {
diff --git a/src/tests/unit/packages/flowchart/flowchart-decision/__snapshots__/flowchart-decision-update-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-decision/__snapshots__/flowchart-decision-update-test.tsx.snap
index ef5dfd57e..841f71125 100644
--- a/src/tests/unit/packages/flowchart/flowchart-decision/__snapshots__/flowchart-decision-update-test.tsx.snap
+++ b/src/tests/unit/packages/flowchart/flowchart-decision/__snapshots__/flowchart-decision-update-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test flowchart decision update render 1`] = `
     <div>
       <section>
         <div
-          class="sc-eZkCL cXjuPz"
+          class="sc-cmaqmh hwbMan"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"
diff --git a/src/tests/unit/packages/flowchart/flowchart-flowline/__snapshots__/flowchart-flowline-update-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-flowline/__snapshots__/flowchart-flowline-update-test.tsx.snap
index 9c3231384..64889584f 100644
--- a/src/tests/unit/packages/flowchart/flowchart-flowline/__snapshots__/flowchart-flowline-update-test.tsx.snap
+++ b/src/tests/unit/packages/flowchart/flowchart-flowline/__snapshots__/flowchart-flowline-update-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test flowchart flowline update render 1`] = `
     <div>
       <section>
         <div
-          class="sc-ggpjZQ kUxKux"
+          class="sc-kAkpmW dNrItb"
         >
           <h1
             class="sc-lcIPJg cQIeHE"
diff --git a/src/tests/unit/packages/flowchart/flowchart-function-call/__snapshots__/flowchart-function-call-update-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-function-call/__snapshots__/flowchart-function-call-update-test.tsx.snap
index 303747c6d..6d943533b 100644
--- a/src/tests/unit/packages/flowchart/flowchart-function-call/__snapshots__/flowchart-function-call-update-test.tsx.snap
+++ b/src/tests/unit/packages/flowchart/flowchart-function-call/__snapshots__/flowchart-function-call-update-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test flowchart function call update render 1`] = `
     <div>
       <section>
         <div
-          class="sc-eZkCL cXjuPz"
+          class="sc-cmaqmh hwbMan"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"
diff --git a/src/tests/unit/packages/flowchart/flowchart-input-output/__snapshots__/flowchart-input-output-update-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-input-output/__snapshots__/flowchart-input-output-update-test.tsx.snap
index 3e5f01744..6a9b01dad 100644
--- a/src/tests/unit/packages/flowchart/flowchart-input-output/__snapshots__/flowchart-input-output-update-test.tsx.snap
+++ b/src/tests/unit/packages/flowchart/flowchart-input-output/__snapshots__/flowchart-input-output-update-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test flowchart input output update render 1`] = `
     <div>
       <section>
         <div
-          class="sc-eZkCL cXjuPz"
+          class="sc-cmaqmh hwbMan"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"
diff --git a/src/tests/unit/packages/flowchart/flowchart-process/__snapshots__/flowchart-process-update-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-process/__snapshots__/flowchart-process-update-test.tsx.snap
index 3e5f01744..6a9b01dad 100644
--- a/src/tests/unit/packages/flowchart/flowchart-process/__snapshots__/flowchart-process-update-test.tsx.snap
+++ b/src/tests/unit/packages/flowchart/flowchart-process/__snapshots__/flowchart-process-update-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test flowchart input output update render 1`] = `
     <div>
       <section>
         <div
-          class="sc-eZkCL cXjuPz"
+          class="sc-cmaqmh hwbMan"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"
diff --git a/src/tests/unit/packages/flowchart/flowchart-terminal/__snapshots__/flowchart-terminal-update-test.tsx.snap b/src/tests/unit/packages/flowchart/flowchart-terminal/__snapshots__/flowchart-terminal-update-test.tsx.snap
index 3e5f01744..6a9b01dad 100644
--- a/src/tests/unit/packages/flowchart/flowchart-terminal/__snapshots__/flowchart-terminal-update-test.tsx.snap
+++ b/src/tests/unit/packages/flowchart/flowchart-terminal/__snapshots__/flowchart-terminal-update-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test flowchart input output update render 1`] = `
     <div>
       <section>
         <div
-          class="sc-eZkCL cXjuPz"
+          class="sc-cmaqmh hwbMan"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"
diff --git a/src/tests/unit/packages/uml-class-diagram/class-association-popup/__snapshots__/class-association-popup-test.tsx.snap b/src/tests/unit/packages/uml-class-diagram/class-association-popup/__snapshots__/class-association-popup-test.tsx.snap
index 9f28ebd34..170265b26 100644
--- a/src/tests/unit/packages/uml-class-diagram/class-association-popup/__snapshots__/class-association-popup-test.tsx.snap
+++ b/src/tests/unit/packages/uml-class-diagram/class-association-popup/__snapshots__/class-association-popup-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test class association popup render 1`] = `
     <div>
       <section>
         <div
-          class="sc-cfxfcM iJlpTp"
+          class="sc-gmPhUn kYucFZ"
         >
           <h1
             class="sc-lcIPJg cQIeHE"
@@ -53,10 +53,10 @@ exports[`test class association popup render 1`] = `
       </section>
       <section>
         <div
-          class="sc-hCPjZK"
+          class="sc-cfxfcM"
         >
           <button
-            class="sc-eeDRCY sc-koXPp fShmjg jICzlH sc-hknOHE tqbxh"
+            class="sc-eeDRCY sc-koXPp fShmjg jICzlH sc-hCPjZK lhcboe"
             color="primary"
           >
             Association (bidirectional)
@@ -71,7 +71,7 @@ exports[`test class association popup render 1`] = `
           class="sc-lcIPJg chQxvR"
         />
         <div
-          class="sc-cfxfcM iJlpTp"
+          class="sc-gmPhUn kYucFZ"
         >
           <span
             class="sc-lcIPJg gscKFM"
@@ -87,7 +87,7 @@ exports[`test class association popup render 1`] = `
           />
         </div>
         <div
-          class="sc-cfxfcM iJlpTp"
+          class="sc-gmPhUn kYucFZ"
         >
           <span
             class="sc-lcIPJg gscKFM"
@@ -110,7 +110,7 @@ exports[`test class association popup render 1`] = `
           class="sc-lcIPJg chQxvR"
         />
         <div
-          class="sc-cfxfcM iJlpTp"
+          class="sc-gmPhUn kYucFZ"
         >
           <span
             class="sc-lcIPJg gscKFM"
@@ -126,7 +126,7 @@ exports[`test class association popup render 1`] = `
           />
         </div>
         <div
-          class="sc-cfxfcM iJlpTp"
+          class="sc-gmPhUn kYucFZ"
         >
           <span
             class="sc-lcIPJg gscKFM"
diff --git a/src/tests/unit/packages/uml-communication-diagram/uml-communication-link/__snapshots__/uml-communication-link-popup-test.tsx.snap b/src/tests/unit/packages/uml-communication-diagram/uml-communication-link/__snapshots__/uml-communication-link-popup-test.tsx.snap
index 92d1fb7e3..13689925b 100644
--- a/src/tests/unit/packages/uml-communication-diagram/uml-communication-link/__snapshots__/uml-communication-link-popup-test.tsx.snap
+++ b/src/tests/unit/packages/uml-communication-diagram/uml-communication-link/__snapshots__/uml-communication-link-popup-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test communication link popup render 1`] = `
     <div>
       <section>
         <div
-          class="sc-gFAWRd gHOPDJ"
+          class="sc-hRJfrW gziudj"
         >
           <h1
             class="sc-lcIPJg cQIeHE"
@@ -46,7 +46,7 @@ exports[`test communication link popup render 1`] = `
           )
         </h1>
         <div
-          class="sc-gFAWRd gHOPDJ"
+          class="sc-hRJfrW gziudj"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL etmSlo"
@@ -89,7 +89,7 @@ exports[`test communication link popup render 1`] = `
           </button>
         </div>
         <div
-          class="sc-gFAWRd gHOPDJ"
+          class="sc-hRJfrW gziudj"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL etmSlo"
@@ -132,7 +132,7 @@ exports[`test communication link popup render 1`] = `
           </button>
         </div>
         <div
-          class="sc-gFAWRd gHOPDJ"
+          class="sc-hRJfrW gziudj"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL etmSlo"
@@ -175,7 +175,7 @@ exports[`test communication link popup render 1`] = `
           </button>
         </div>
         <div
-          class="sc-gFAWRd gHOPDJ"
+          class="sc-hRJfrW gziudj"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL etmSlo"
@@ -218,7 +218,7 @@ exports[`test communication link popup render 1`] = `
           </button>
         </div>
         <div
-          class="sc-gFAWRd gHOPDJ"
+          class="sc-hRJfrW gziudj"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL etmSlo"
@@ -261,7 +261,7 @@ exports[`test communication link popup render 1`] = `
           </button>
         </div>
         <div
-          class="sc-gFAWRd gHOPDJ"
+          class="sc-hRJfrW gziudj"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL etmSlo"
diff --git a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-popup/__snapshots__/deployment-node-popup-test.tsx.snap b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-popup/__snapshots__/deployment-node-popup-test.tsx.snap
index 91620e897..347dd40fa 100644
--- a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-popup/__snapshots__/deployment-node-popup-test.tsx.snap
+++ b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-node/uml-deployment-node-popup/__snapshots__/deployment-node-popup-test.tsx.snap
@@ -6,13 +6,47 @@ exports[`test deployment node popup render 1`] = `
     <div>
       <section>
         <div
-          class="sc-iHbSHJ brJDWu"
+          class="sc-bypJrT hnnasP"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"
             maxlength="100"
             value=""
           />
+          <button
+            class="sc-eeDRCY sc-koXPp fShmjg dCdHsc"
+            color="link"
+            tabindex="-1"
+          >
+            <svg
+              class="sc-dhKdcB dMUpVV"
+              height="16px"
+              viewBox="0 0 128 128"
+              width="16px"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M74.1387 93.5415L92.8052 64.1677H101.049V65.1153L81.9085 93.5415H74.1387ZM74.1387 35.3625H81.9085L101.049 63.7887V64.7363H92.8052L74.1387 35.3625ZM98.7273 93.5415L117.394 64.1677H125.637V65.1153L106.497 93.5415H98.7273ZM98.7273 35.3625H106.497L125.637 63.7887V64.7363H117.394L98.7273 35.3625Z"
+                fill="black"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M72.068 34.225C72.4831 33.4695 73.2767 33 74.1387 33H81.9085C82.6946 33 83.4292 33.391 83.8682 34.043L103.009 62.4692C103.271 62.8592 103.411 63.3186 103.411 63.7887V65.1153C103.411 65.5854 103.271 66.0448 103.009 66.4348L83.8682 94.861C83.4292 95.513 82.6946 95.904 81.9085 95.904H74.1387C73.2767 95.904 72.4831 95.4345 72.068 94.679C71.653 93.9235 71.6824 93.0019 72.1447 92.2743L89.8254 64.452L72.1447 36.6297C71.6824 35.9021 71.653 34.9805 72.068 34.225ZM93.7418 67.0988L78.4393 91.1789H80.6511L96.8651 67.0988H93.7418ZM96.8651 61.8052H93.7418L78.4393 37.7251H80.6511L96.8651 61.8052ZM96.6567 34.225C97.0717 33.4695 97.8653 33 98.7273 33H106.497C107.283 33 108.018 33.391 108.457 34.043L127.597 62.4692C127.86 62.8592 128 63.3186 128 63.7887V65.1153C128 65.5854 127.86 66.0448 127.597 66.4348L108.457 94.861C108.018 95.513 107.283 95.904 106.497 95.904H98.7273C97.8653 95.904 97.0717 95.4345 96.6567 94.679C96.2416 93.9235 96.271 93.0019 96.7334 92.2743L114.414 64.452L96.7334 36.6297C96.271 35.9021 96.2416 34.9805 96.6567 34.225ZM118.33 67.0988L103.028 91.1789H105.24L121.454 67.0988H118.33ZM121.454 61.8052H118.33L103.028 37.7251H105.24L121.454 61.8052Z"
+                fill="black"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M29.2727 93.5415H21.5028L2.36253 65.1153V64.1677H10.5588L29.2727 93.5415ZM29.2727 35.3625L10.5588 64.7363H2.36253V63.7887L21.5028 35.3625H29.2727ZM53.5297 93.5415H45.7599L26.6196 65.1153V64.1677H34.8158L53.5297 93.5415ZM53.5297 35.3625L34.8158 64.7363H26.6196V63.7887L45.7599 35.3625H53.5297Z"
+                fill="black"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M19.5431 34.043C19.9822 33.391 20.7168 33 21.5028 33H29.2727C30.1352 33 30.9291 33.47 31.344 34.2262C31.7588 34.9824 31.7286 35.9045 31.2652 36.632L13.5411 64.452L31.2652 92.2721C31.7286 92.9995 31.7588 93.9216 31.344 94.6778C30.9291 95.434 30.1352 95.904 29.2727 95.904H21.5028C20.7168 95.904 19.9822 95.513 19.5431 94.861L0.402837 66.4348C0.140261 66.0448 0 65.5854 0 65.1153V63.7887C0 63.3186 0.140261 62.8592 0.402837 62.4692L19.5431 34.043ZM6.54628 67.0988L22.7602 91.1789H24.9662L9.62486 67.0988H6.54628ZM9.62486 61.8052H6.54628L22.7602 37.7251H24.9662L9.62486 61.8052ZM43.8002 34.043C44.2392 33.391 44.9738 33 45.7599 33H53.5297C54.3922 33 55.1861 33.47 55.601 34.2262C56.0158 34.9824 55.9856 35.9045 55.5222 36.632L37.7981 64.452L55.5222 92.2721C55.9856 92.9995 56.0158 93.9216 55.601 94.6778C55.1861 95.434 54.3922 95.904 53.5297 95.904H45.7599C44.9738 95.904 44.2392 95.513 43.8002 94.861L24.6599 66.4348C24.3973 66.0448 24.257 65.5854 24.257 65.1153V63.7887C24.257 63.3186 24.3973 62.8592 24.6599 62.4692L43.8002 34.043ZM30.8033 67.0988L47.0173 91.1789H49.2233L33.8819 67.0988H30.8033ZM33.8819 61.8052H30.8033L47.0173 37.7251H49.2233L33.8819 61.8052Z"
+                fill="black"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
           <button
             class="sc-eeDRCY sc-koXPp fShmjg dCdHsc"
             color="link"
@@ -37,7 +71,7 @@ exports[`test deployment node popup render 1`] = `
           class="sc-tagGq XeZYh"
         />
         <div
-          class="sc-iHbSHJ brJDWu"
+          class="sc-bypJrT hnnasP"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"
diff --git a/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-arc/__snapshots__/uml-petri-net-arc-update-test.tsx.snap b/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-arc/__snapshots__/uml-petri-net-arc-update-test.tsx.snap
index 5478354b2..adba8f6c1 100644
--- a/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-arc/__snapshots__/uml-petri-net-arc-update-test.tsx.snap
+++ b/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-arc/__snapshots__/uml-petri-net-arc-update-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test petri net arc update render 1`] = `
     <div>
       <section>
         <div
-          class="sc-dSCufp fAuGzn"
+          class="sc-hIUJlX bGysum"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"
diff --git a/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-place/__snapshots__/uml-petri-net-place-update-test.tsx.snap b/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-place/__snapshots__/uml-petri-net-place-update-test.tsx.snap
index 41d60f995..52e1d9244 100644
--- a/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-place/__snapshots__/uml-petri-net-place-update-test.tsx.snap
+++ b/src/tests/unit/packages/uml-petri-diagram/uml-petri-net-place/__snapshots__/uml-petri-net-place-update-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test petri net arc update render 1`] = `
     <div>
       <section>
         <div
-          class="sc-ddjGPC hMjkq"
+          class="sc-fxwrCY jnjvWh"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"
@@ -37,7 +37,7 @@ exports[`test petri net arc update render 1`] = `
       </section>
       <section>
         <div
-          class="sc-ddjGPC hMjkq"
+          class="sc-fxwrCY jnjvWh"
         >
           <span
             class="sc-lcIPJg gscKFM"
@@ -56,7 +56,7 @@ exports[`test petri net arc update render 1`] = `
       </section>
       <section>
         <div
-          class="sc-ddjGPC hMjkq"
+          class="sc-fxwrCY jnjvWh"
           style="margin-top: 0.5em; align-items: center;"
         >
           <span
diff --git a/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-arc/__snapshots__/uml-reachability-graph-arc-update-test.tsx.snap b/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-arc/__snapshots__/uml-reachability-graph-arc-update-test.tsx.snap
index 182afc8d6..3d3414e5a 100644
--- a/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-arc/__snapshots__/uml-reachability-graph-arc-update-test.tsx.snap
+++ b/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-arc/__snapshots__/uml-reachability-graph-arc-update-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test reachability graph arc update render 1`] = `
     <div>
       <section>
         <div
-          class="sc-fxwrCY jnjvWh"
+          class="sc-jnOGJG djsxMp"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"
diff --git a/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/__snapshots__/uml-reachability-graph-marking-update-test.tsx.snap b/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/__snapshots__/uml-reachability-graph-marking-update-test.tsx.snap
index ad28e9d50..0619ebb39 100644
--- a/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/__snapshots__/uml-reachability-graph-marking-update-test.tsx.snap
+++ b/src/tests/unit/packages/uml-reachability-graph/uml-reachability-graph-marking/__snapshots__/uml-reachability-graph-marking-update-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test reachability graph arc update render 1`] = `
     <div>
       <section>
         <div
-          class="sc-hIUJlX bGysum"
+          class="sc-dZoequ jKvDgE"
         >
           <input
             class="sc-bmzYkS sc-iHGNWf fEVqYL gacFBO"