diff --git a/public/index.html.ejs b/public/index.html.ejs
index 2b494aef..78cf9547 100644
--- a/public/index.html.ejs
+++ b/public/index.html.ejs
@@ -86,7 +86,7 @@
       </section>
     </aside>
     <div class="apollon-container">
-    <main id="apollon"></main>
+      <main id="apollon"></main>
     </div>
   </div>
 </body>
diff --git a/src/main/components/create-pane/create-pane.tsx b/src/main/components/create-pane/create-pane.tsx
index 2b835073..adce17e5 100644
--- a/src/main/components/create-pane/create-pane.tsx
+++ b/src/main/components/create-pane/create-pane.tsx
@@ -145,6 +145,7 @@ class CreatePaneComponent extends Component<Props, State> {
     };
 
     const { previews, utils } = this.state;
+
     const elements = [...previews, ...utils].reduce<UMLElementState>(
       (state, preview) => ({
         ...state,
@@ -155,7 +156,10 @@ class CreatePaneComponent extends Component<Props, State> {
 
     return (
       <StoreProvider initialState={{ elements, editor: { features } }}>
-        {this.getElementArray(previews)}
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
+          {this.getElementArray(previews)}
+        </div>
+
         {utils && utils.length > 0 ? (
           <>
             <Separator />
diff --git a/src/main/components/create-pane/preview-element-component.tsx b/src/main/components/create-pane/preview-element-component.tsx
index c88cf6bf..8915af46 100644
--- a/src/main/components/create-pane/preview-element-component.tsx
+++ b/src/main/components/create-pane/preview-element-component.tsx
@@ -19,7 +19,7 @@ export const Preview = styled(hoverable(CanvasElement)).attrs((props: { scale?:
   overflow: visible;
   fill: white;
   scale: ${(props) => props.scale ?? 0.8};
-  transform-origin: center center;
+  transform-origin: center;
 `;
 
 export class PreviewElementComponent extends Component<Props> {
diff --git a/src/main/packages/common/uml-interface/uml-interface-component.tsx b/src/main/packages/common/uml-interface/uml-interface-component.tsx
index 04598cda..c54dc100 100644
--- a/src/main/packages/common/uml-interface/uml-interface-component.tsx
+++ b/src/main/packages/common/uml-interface/uml-interface-component.tsx
@@ -13,7 +13,7 @@ export const UMLInterfaceComponent: FunctionComponent<Props> = ({ element, fillC
       strokeWidth={2}
       fillColor={fillColor || element.fillColor}
     />
-    <Text noY x={'25px'} dominantBaseline="auto" textAnchor="start" fill={element.textColor}>
+    <Text x={25} noY dominantBaseline="auto" textAnchor="start" fill={element.textColor}>
       {element.name}
     </Text>
   </g>
diff --git a/src/main/packages/uml-component-diagram/component-preview.ts b/src/main/packages/uml-component-diagram/component-preview.ts
index f931e8d1..fd905e19 100644
--- a/src/main/packages/uml-component-diagram/component-preview.ts
+++ b/src/main/packages/uml-component-diagram/component-preview.ts
@@ -1,6 +1,6 @@
 import { ILayer } from '../../services/layouter/layer';
 import { UMLElement } from '../../services/uml-element/uml-element';
-import { ComposePreview } from '../compose-preview';
+import { ComposePreview, PreviewElement } from '../compose-preview';
 import { UMLComponentInterface } from './uml-component-interface/uml-component-interface';
 import { UMLComponentComponent } from './uml-component/uml-component-component';
 import { UMLSubsystem } from './uml-component-subsystem/uml-component-subsystem';
@@ -8,8 +8,8 @@ import { UMLSubsystem } from './uml-component-subsystem/uml-component-subsystem'
 export const composeComponentPreview: ComposePreview = (
   layer: ILayer,
   translate: (id: string) => string,
-): UMLElement[] => {
-  const elements: UMLElement[] = [];
+): PreviewElement[] => {
+  const elements: PreviewElement[] = [];
 
   // UML Component
   const umlComponent = new UMLComponentComponent({ name: translate('packages.ComponentDiagram.Component') });
@@ -38,7 +38,8 @@ export const composeComponentPreview: ComposePreview = (
     width: umlComponentInterface.bounds.width,
     height: umlComponentInterface.bounds.height,
   };
-  const [umlInterface] = umlComponentInterface.render(layer) as [UMLElement];
+  const [umlInterface] = umlComponentInterface.render(layer) as [PreviewElement];
+  umlInterface.styles = { paddingTop: 8 };
   elements.push(umlInterface);
 
   return elements;
diff --git a/src/tests/unit/packages/uml-component-diagram/uml-component-interface/__snapshots__/uml-component-interface-test.tsx.snap b/src/tests/unit/packages/uml-component-diagram/uml-component-interface/__snapshots__/uml-component-interface-test.tsx.snap
index 10a1479c..9c6a0a48 100644
--- a/src/tests/unit/packages/uml-component-diagram/uml-component-interface/__snapshots__/uml-component-interface-test.tsx.snap
+++ b/src/tests/unit/packages/uml-component-diagram/uml-component-interface/__snapshots__/uml-component-interface-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`render the uml-component-component 1`] = `
           font-weight="bold"
           pointer-events="none"
           text-anchor="start"
-          x="25px"
+          x="25"
         >
           TestComponentComponent
         </text>
diff --git a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-interface/__snapshots__/uml-deployment-interface-test.tsx.snap b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-interface/__snapshots__/uml-deployment-interface-test.tsx.snap
index 61ff18ff..c517753b 100644
--- a/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-interface/__snapshots__/uml-deployment-interface-test.tsx.snap
+++ b/src/tests/unit/packages/uml-deployment-diagram/uml-deployment-interface/__snapshots__/uml-deployment-interface-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`render the uml-deployment-interface-component 1`] = `
           font-weight="bold"
           pointer-events="none"
           text-anchor="start"
-          x="25px"
+          x="25"
         >
           TestDeploymentComponent
         </text>