diff --git a/src/lib/components/startScreen/StartScreen.svelte b/src/lib/components/startScreen/StartScreen.svelte
index 7306817b..f36c1a51 100644
--- a/src/lib/components/startScreen/StartScreen.svelte
+++ b/src/lib/components/startScreen/StartScreen.svelte
@@ -31,7 +31,7 @@
 					click={startNewProject}
 					icon={Add}
 					id={`start-new-project`}
-					color="var(--sidebar-text-color)"
+					color="var(--text-color)"
 					justifyContent="center"
 					><p style="font-size: 1.7em">
 						New Blank Project
@@ -51,7 +51,7 @@
 							await projectHandler.openExampleProject(
 								exampleLoader,
 							);
-						}}>{exampleName}</SvgButton
+						}}><p>{exampleName}</p></SvgButton
 					>
 				{/each}
 			</div>
@@ -64,7 +64,7 @@
 					}}
 					icon={File_open}
 					id={`open-project`}
-					color="var(--sidebar-text-color)"
+					color="var(--text-color)"
 					justifyContent="center"
 					><p style="font-size: 1.7em">Open A Project</p></SvgButton
 				>
@@ -76,7 +76,7 @@
 					<SvgButton
 						icon={File_open}
 						id={`open-project`}
-						color="var(--sidebar-text-color)"
+						color="var(--text-color)"
 						justifyContent="center"
 						click={async () => {
 							await projectHandler.openRecentProject(
@@ -129,4 +129,8 @@
 		width: 50%;
 		margin: 5%;
 	}
+
+	p {
+		color: var(--text-color);
+	}
 </style>
diff --git a/src/lib/components/svgView/Component.svelte b/src/lib/components/svgView/Component.svelte
new file mode 100644
index 00000000..25d56206
--- /dev/null
+++ b/src/lib/components/svgView/Component.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { iPoint } from "$lib/interfaces/iPoint";
+	import DraggableSvg from "./helpers/DraggableSVG.svelte";
+
+	export let position: iPoint = { x: 10, y: 10 };
+
+	// TODO: these should not be hard coded they should scale with the things inside the component
+	let width = 800;
+	let height = 1000;
+	const cutOff = 100;
+</script>
+
+<g transform="translate({position.x}, {position.y})">
+	<path
+		class="background stroke"
+		d="M 0 {cutOff} L {cutOff} 0 L {width} 0 L {width} {height} L 0 {height} Z"
+	/>
+	<DraggableSvg bind:position>
+		<path
+			class="bar stroke"
+			d="M {cutOff / 2} {cutOff /
+				2} L {cutOff} 0 L {width} 0 L {width} {cutOff / 2} Z"
+		/>
+		<text x={cutOff} y={cutOff / 3} font-size="2rem">Hello</text>
+		<g
+			on:pointerup={() => {
+				alert("Initiate Text Editor");
+			}}
+		>
+			<rect
+				x={width - 50}
+				y="0"
+				width={cutOff / 2}
+				height={cutOff / 2}
+				fill="pink"
+				class="stroke"
+			></rect>
+			<text x={width - 44} y="34" fill="white" font-size="28px"
+				>&lt; &gt;</text
+			>
+		</g>
+		<slot />
+	</DraggableSvg>
+</g>
+
+<style>
+	.background {
+		fill: blue;
+		fill-opacity: 0.5;
+	}
+
+	.bar {
+		fill: blue;
+	}
+
+	.stroke {
+		stroke: black;
+		stroke-width: 8;
+		stroke-linejoin: round;
+		stroke-linecap: round;
+	}
+</style>
diff --git a/src/lib/components/svgView/Label.svelte b/src/lib/components/svgView/Label.svelte
index de44dea7..1398c423 100644
--- a/src/lib/components/svgView/Label.svelte
+++ b/src/lib/components/svgView/Label.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import DraggableSvg from "./DraggableSVG.svelte";
+	import DraggableSvg from "./helpers/DraggableSVG.svelte";
 	import type { iPoint } from "$lib/interfaces/iPoint";
 
 	export let parentPosition: iPoint;
diff --git a/src/lib/components/svgView/Location.svelte b/src/lib/components/svgView/Location.svelte
index a99c3933..354ef5e9 100644
--- a/src/lib/components/svgView/Location.svelte
+++ b/src/lib/components/svgView/Location.svelte
@@ -2,8 +2,8 @@
 
 <script lang="ts">
 	import type { iPoint } from "$lib/interfaces/iPoint";
+	import type { Nickname } from "$lib/classes/automaton";
 	import type { LocationId } from "$lib/classes/automaton/LocationId";
-	import type { iNickname } from "$lib/interfaces/iNickname";
 	import { contextMenu } from "$lib/components/contextMenu/contextMenu";
 	import LocationMenu from "$lib/components/contextMenu/contentTypes/locationMenu/LocationMenu.svelte";
 	import Label from "./Label.svelte";
@@ -11,7 +11,7 @@
 
 	export let position: iPoint;
 	export let locationId: LocationId;
-	export let nickname: iNickname | undefined;
+	export let nickname: Nickname | undefined;
 
 	let group: SVGElement;
 	let menuProps = {
diff --git a/src/lib/components/svgView/Nail.svelte b/src/lib/components/svgView/Nail.svelte
index 51719808..60853a14 100644
--- a/src/lib/components/svgView/Nail.svelte
+++ b/src/lib/components/svgView/Nail.svelte
@@ -8,6 +8,7 @@
 	export let text: string;
 
 	let radius: number;
+	// having this reactive fixes some bugs where some nails were small
 	$: radius = text == "" ? 5 : 10;
 </script>
 
diff --git a/src/lib/components/svgView/Node.svelte b/src/lib/components/svgView/Node.svelte
index 704d7674..8edd16fe 100644
--- a/src/lib/components/svgView/Node.svelte
+++ b/src/lib/components/svgView/Node.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { iPoint } from "$lib/interfaces/iPoint";
-	import DraggableSVG from "./DraggableSVG.svelte";
+	import DraggableSVG from "./helpers/DraggableSVG.svelte";
 
 	export let position: iPoint;
 	export let text: string;
diff --git a/src/lib/components/svgView/SvgView.svelte b/src/lib/components/svgView/SvgView.svelte
index 67273447..f06e7de1 100644
--- a/src/lib/components/svgView/SvgView.svelte
+++ b/src/lib/components/svgView/SvgView.svelte
@@ -3,13 +3,15 @@
 		type CurrentValues,
 		type PanzoomChangeEvent,
 	} from "./panzoom/panzoom";
+
 	import { onMount } from "svelte";
 	import { scale } from "$lib/globalState/scaleStore";
 	import { activeView } from "$lib/globalState/activeProject";
-	import { Component } from "$lib/classes/automaton/component/Component";
+	import { Component as automatonComponent } from "$lib/classes/automaton/component/Component";
 	import Edge from "./Edge.svelte";
 	import Location from "$lib/components/svgView/Location.svelte";
-	import { System } from "$lib/classes/automaton";
+	import { System } from "$lib/classes/automaton/system/System";
+	import Component from "./Component.svelte";
 
 	/**
 	 * The parent svg element that the entire view is shown with.
@@ -70,28 +72,31 @@
 		style:transform
 		style:transition
 	>
-		{#if $activeView instanceof Component}
+		{#if $activeView instanceof automatonComponent}
 			{@const component = $activeView}
-			<!--All edges are drawn with their reference to their source location-->
-			{#each $activeView.edges as edge}
-				<Edge
-					sourcePoint={component.locations.getSure(edge.source)
-						.position}
-					targetPoint={component.locations.getSure(edge.target)
-						.position}
-					nails={edge.nails}
-					edgeType={edge.status}
-				/>
-			{/each}
 
-			<!--All locations are drawn-->
-			{#each $activeView.locations as location}
-				<Location
-					locationId={location.id}
-					bind:position={location.position}
-					bind:nickname={location.nickname}
-				/>
-			{/each}
+			<Component>
+				<!--All edges are drawn with their reference to their source location-->
+				{#each $activeView.edges as edge}
+					<Edge
+						sourcePoint={component.locations.getSure(edge.source)
+							.position}
+						targetPoint={component.locations.getSure(edge.target)
+							.position}
+						nails={edge.nails}
+						edgeType={edge.status}
+					/>
+				{/each}
+
+				<!--All locations are drawn-->
+				{#each $activeView.locations as location}
+					<Location
+						locationId={location.id}
+						bind:position={location.position}
+						bind:nickname={location.nickname}
+					/>
+				{/each}
+			</Component>
 		{:else if $activeView instanceof System}
 			<text>TODO: Not implemented yet</text>
 		{/if}
diff --git a/src/lib/components/svgView/DraggableSVG.svelte b/src/lib/components/svgView/helpers/DraggableSVG.svelte
similarity index 100%
rename from src/lib/components/svgView/DraggableSVG.svelte
rename to src/lib/components/svgView/helpers/DraggableSVG.svelte