diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index e5ba67a85..6e9dbd172 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,9 +1,9 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/python
 {
-	"name": "Python 3.12 with Node",
+	"name": "Python 3.11 with Node",
 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye",
+	"image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
 	"features": {
 		"ghcr.io/devcontainers/features/node:1": {
 			"nodeGypDependencies": true,
diff --git a/src/streamsync/core.py b/src/streamsync/core.py
index 793d570d0..879cd3fe1 100644
--- a/src/streamsync/core.py
+++ b/src/streamsync/core.py
@@ -674,6 +674,14 @@ def _transform_page_open(self, ev) -> str:
         payload = str(ev.payload)
         return payload
 
+    def _transform_chat_message(self, ev) -> str:
+        payload = str(ev.payload)
+        return payload
+
+    def _transform_chat_action_click(self, ev) -> str:
+        payload = str(ev.payload)
+        return payload
+
     def _transform_change(self, ev) -> str:
         payload = str(ev.payload)
         return payload
diff --git a/ui/src/core/templateMap.ts b/ui/src/core/templateMap.ts
index d6f707ac2..19373dc9d 100644
--- a/ui/src/core/templateMap.ts
+++ b/ui/src/core/templateMap.ts
@@ -10,6 +10,7 @@ import CorePlotlyGraph from "../core_components/content/CorePlotlyGraph.vue";
 import CoreText from "../core_components/content/CoreText.vue";
 import CoreVegaLiteChart from "../core_components/content/CoreVegaLiteChart.vue";
 import CoreVideoPlayer from "../core_components/content/CoreVideoPlayer.vue";
+import CoreChat from "../core_components/content/CoreChat.vue";
 // input
 import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
 import CoreDateInput from "../core_components/input/CoreDateInput.vue";
@@ -22,6 +23,7 @@ import CoreSelectInput from "../core_components/input/CoreSelectInput.vue";
 import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
 import CoreTextInput from "../core_components/input/CoreTextInput.vue";
 import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
+import CoreRating from "../core_components/input/CoreRatingInput.vue";
 // layout
 import CoreColumn from "../core_components/layout/CoreColumn.vue";
 import CoreColumns from "../core_components/layout/CoreColumns.vue";
@@ -32,6 +34,8 @@ import CoreSeparator from "../core_components/layout/CoreSeparator.vue";
 import CoreSidebar from "../core_components/layout/CoreSidebar.vue";
 import CoreTab from "../core_components/layout/CoreTab.vue";
 import CoreTabs from "../core_components/layout/CoreTabs.vue";
+import CoreStep from "../core_components/layout/CoreStep.vue";
+import CoreSteps from "../core_components/layout/CoreSteps.vue";
 // other
 import CoreButton from "../core_components/other/CoreButton.vue";
 import CoreHtml from "../core_components/other/CoreHtml.vue";
@@ -95,6 +99,10 @@ const templateMap = {
 	metric: CoreMetric,
 	message: CoreMessage,
 	videoplayer: CoreVideoPlayer,
+	chat: CoreChat,
+	step: CoreStep,
+	steps: CoreSteps,
+	ratinginput: CoreRating
 };
 
 if (STREAMSYNC_LIVE_CCT === "yes") {
diff --git a/ui/src/core_components/base/BaseMarkdown.vue b/ui/src/core_components/base/BaseMarkdown.vue
new file mode 100644
index 000000000..3d115133f
--- /dev/null
+++ b/ui/src/core_components/base/BaseMarkdown.vue
@@ -0,0 +1,100 @@
+<template>
+	<div
+		v-if="isMarkedLoaded"
+		v-dompurify-html="marked.parse(props.rawText).trim()"
+		class="BaseMarkdown markdown"
+	></div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, ref } from "vue";
+
+let marked: typeof import("marked");
+const isMarkedLoaded = ref(false);
+
+const props = defineProps<{
+	rawText: string;
+}>();
+
+onBeforeMount(async () => {
+	marked = await import("marked");
+	isMarkedLoaded.value = true;
+});
+</script>
+
+<style scoped>
+.markdown:deep() h1,
+.markdown:deep() h2,
+.markdown:deep() h3,
+.markdown:deep() h4 {
+	font-weight: 300;
+	margin: 0;
+	color: var(--primaryTextColor);
+}
+
+.markdown:deep() h1 {
+	font-size: 1.3rem;
+}
+
+.markdown:deep() h2 {
+	font-size: 1rem;
+}
+
+.markdown:deep() h3 {
+	font-size: 0.9rem;
+}
+
+.markdown:deep() h4 {
+	text-transform: uppercase;
+	font-weight: bold;
+	font-size: 0.65rem;
+	letter-spacing: 0.2ch;
+}
+
+.markdown:deep() ul,
+.markdown:deep() ol {
+	padding: 0;
+	padding-inline-start: 0;
+	margin-block-start: 0;
+}
+
+.markdown:deep() li {
+	margin: 0 0 0 32px;
+}
+
+.markdown:deep() hr {
+	border: none;
+	border-top: 1px solid var(--separatorColor);
+}
+
+.markdown:deep() pre {
+	background-color: var(--separatorColor);
+	font-family: monospace;
+	padding: 8px;
+}
+
+.markdown:deep() code {
+	background-color: var(--separatorColor);
+	font-family: monospace;
+	padding: 2px;
+}
+
+.markdown:deep() pre > code {
+	background-color: unset;
+}
+
+.markdown:deep() table {
+	border-collapse: collapse;
+}
+
+.markdown:deep() th {
+	padding: 8px;
+	background: var(--separatorColor);
+	border: 1px solid var(--separatorColor);
+}
+
+.markdown:deep() td {
+	padding: 8px;
+	border: 1px solid var(--separatorColor);
+}
+</style>
diff --git a/ui/src/core_components/content/CoreChat.vue b/ui/src/core_components/content/CoreChat.vue
new file mode 100644
index 000000000..280eedb7a
--- /dev/null
+++ b/ui/src/core_components/content/CoreChat.vue
@@ -0,0 +1,519 @@
+<template>
+	<div ref="rootEl" class="CoreChat">
+		<div ref="messageAreaEl" class="messageArea">
+			<div ref="messagesEl" class="messages">
+				<div
+					v-for="(message, messageId) in messages"
+					:key="messageId"
+					class="message"
+					:class="message.origin"
+				>
+					<div class="avatar">
+						{{
+							message.origin == "incoming"
+								? fields.incomingInitials.value
+								: fields.outgoingInitials.value
+						}}
+					</div>
+					<div class="contents">
+						<div v-if="message.isLoading" class="loadingContainer">
+							<LoadingSymbol
+								class="loadingSymbol"
+							></LoadingSymbol>
+						</div>
+						<template v-else>
+							<div class="text">
+								<BaseMarkdown
+									v-if="
+										message.origin == 'incoming' &&
+										fields.useMarkdown.value == 'yes'
+									"
+									:raw-text="message.contents.text"
+								>
+								</BaseMarkdown>
+								<template v-else>
+									{{ message.contents.text }}
+								</template>
+							</div>
+							<div
+								v-if="message.contents.actions"
+								class="actions"
+							>
+								<button
+									v-for="(action, actionIndex) in message
+										.contents.actions"
+									:key="actionIndex"
+									class="action"
+									@click="handleActionClick(action)"
+								>
+									<div
+										v-if="action.subheading"
+										class="subheading"
+									>
+										{{ action.subheading }}
+									</div>
+									<h3 class="name">{{ action.name }}</h3>
+									<div v-if="action.desc" class="desc">
+										{{ action.desc }}
+									</div>
+								</button>
+							</div>
+						</template>
+					</div>
+					<div
+						v-if="message.date"
+						class="time"
+						:title="getFormattedDate(message.date, false)"
+					>
+						{{ getFormattedDate(message.date, true) }}
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="inputArea">
+			<textarea
+				v-model="outgoingMessage"
+				placeholder="Write something..."
+				@keydown.prevent.enter="handleMessageSent"
+			></textarea>
+			<button @click="handleMessageSent">
+				<i class="ri-send-plane-line"></i>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
+import BaseMarkdown from "../base/BaseMarkdown.vue";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import {
+	buttonColor,
+	buttonTextColor,
+	containerBackgroundColor,
+	cssClasses,
+	primaryTextColor,
+	secondaryTextColor,
+	separatorColor,
+} from "../../renderer/sharedStyleFields";
+import { onMounted } from "vue";
+import { onBeforeUnmount } from "vue";
+
+const description = "A chat component to build human-to-AI interactions.";
+
+const docs = `
+Connect it to an LLM by handling the \`ss-chat-message\` event, which is triggered every time the user sends a message. When the response is ready, return it.
+
+You can add \`actions\` to your response, which are buttons that trigger the \`ss-chat-action-click\`.
+
+See the stubs for more details.`.trim();
+
+const chatMessageStub = `
+def handle_message_simple(payload):
+    query = payload
+
+    if query == "Hello":
+
+		# You can simply return a string
+
+        return "Hello, human."
+    elif query == "Surprise me":
+
+		# Or you can return a dict with actions, which are buttons
+		# added to the conversation
+
+        return {
+            "text": "I can help you with that.",
+            "actions": [{
+            	"subheading": "Resource",
+            	"name": "Surprise",
+            	"desc": "Click to be surprised",
+            	"data": "change_title" 
+        	}]
+        }
+    else:
+        return "I don't know"
+`.trim();
+
+const chatActionClickStub = `
+def handle_action_simple(payload, state):
+    
+    # payload contains the "data" property of the action 
+    
+    if payload == "change_title":
+        state["app_title"] = "Surprise!"
+        state["app_background_color"] = "red"
+    
+    # A message can be added to the chat
+    
+    return "Hope you're surprised."
+`.trim();
+
+export default {
+	streamsync: {
+		name: "Chat",
+		description,
+		docs,
+		category: "Content",
+		fields: {
+			incomingInitials: {
+				name: "Incoming initials",
+				default: "AI",
+				type: FieldType.Text,
+			},
+			outgoingInitials: {
+				name: "Outgoing initials",
+				default: "YOU",
+				type: FieldType.Text,
+			},
+			useMarkdown: {
+				name: "Use Markdown",
+				desc: "It'll only be applied to incoming messages. The output will be sanitised; unsafe elements will be removed.",
+				default: "no",
+				type: FieldType.Text,
+				options: {
+					yes: "Yes",
+					no: "No",
+				},
+			},
+			incomingColor: {
+				name: "Incoming",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+				applyStyleVariable: true,
+			},
+			outgoingColor: {
+				name: "Outgoing",
+				default: "#F5F5F9",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+				applyStyleVariable: true,
+			},
+			avatarBackgroundColor: {
+				name: "Avatar",
+				default: "#2C2D30",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+				applyStyleVariable: true,
+			},
+			avatarTextColor: {
+				name: "Avatar text",
+				default: "#FFFFFF",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+				applyStyleVariable: true,
+			},
+			containerBackgroundColor,
+			primaryTextColor,
+			secondaryTextColor,
+			separatorColor,
+			buttonColor,
+			buttonTextColor,
+			cssClasses,
+		},
+		events: {
+			"ss-chat-message": {
+				desc: "Triggered when the user sends a message.",
+				stub: chatMessageStub,
+			},
+			"ss-chat-action-click": {
+				desc: "Handle clicks on actions.",
+				stub: chatActionClickStub,
+			},
+		},
+	},
+};
+</script>
+<script setup lang="ts">
+import { Ref, inject, ref } from "vue";
+import injectionKeys from "../../injectionKeys";
+
+type Message = {
+	origin: "incoming" | "outgoing";
+	isLoading?: boolean;
+	date?: Date;
+	contents: {
+		text: string;
+		actions?: {
+			subheading?: string;
+			name: string;
+			desc?: string;
+			data?: string;
+		}[];
+	};
+};
+
+const rootEl: Ref<HTMLElement> = ref(null);
+const messageAreaEl: Ref<HTMLElement> = ref(null);
+const messagesEl: Ref<HTMLElement> = ref(null);
+const fields = inject(injectionKeys.evaluatedFields);
+const messages: Ref<Record<string, Message>> = ref({});
+let messageCounter = 0;
+let resizeObserver: ResizeObserver;
+
+const outgoingMessage: Ref<string> = ref("");
+
+function getFormattedDate(date: Date, isTimeOnly: boolean) {
+	if (!date) return;
+
+	if (!isTimeOnly) {
+		return date.toLocaleString();
+	}
+
+	const options: Intl.DateTimeFormatOptions = {
+		hour: "numeric",
+		minute: "numeric",
+		hour12: true,
+	};
+	return date.toLocaleTimeString(undefined, options);
+}
+
+function addMessage(message: Message) {
+	messageCounter += 1;
+	const messageKey = `msg${messageCounter}`;
+	messages.value[messageKey] = message;
+	return messageKey;
+}
+
+function replaceMessage(messageKey: string, message: Message) {
+	messages.value[messageKey] = message;
+}
+
+function handleMessageSent() {
+	addMessage({
+		origin: "outgoing",
+		contents: {
+			text: outgoingMessage.value,
+		},
+		date: new Date(),
+	});
+	const outgoingMessageKey = addMessage({
+		origin: "incoming",
+		contents: {
+			text: "Loading...",
+		},
+		isLoading: true,
+	});
+	const event = new CustomEvent("ss-chat-message", {
+		detail: {
+			payload: outgoingMessage.value,
+			callback: ({ payload }) => {
+				const callbackResult = payload.result?.result;
+				if (!callbackResult) return;
+				replaceMessage(outgoingMessageKey, {
+					origin: "incoming",
+					contents: getNormalisedCallbackResult(callbackResult),
+					date: new Date(),
+				});
+			},
+		},
+	});
+	rootEl.value.dispatchEvent(event);
+	outgoingMessage.value = "";
+}
+
+/**
+ * Allows strings to be sent from the backend as a substitute of Message["contents"].
+ *
+ * @param callbackResult
+ */
+function getNormalisedCallbackResult(
+	callbackResult: string | Message["contents"],
+): Message["contents"] {
+	if (typeof callbackResult == "string") {
+		return {
+			text: callbackResult,
+		};
+	}
+	return callbackResult;
+}
+
+function handleActionClick(action: Message["contents"]["actions"][number]) {
+	const { data } = action;
+	const event = new CustomEvent("ss-chat-action-click", {
+		detail: {
+			payload: data,
+			callback: ({ payload }) => {
+				const callbackResult = payload.result?.result;
+				if (!callbackResult) return;
+				addMessage({
+					origin: "incoming",
+					contents: getNormalisedCallbackResult(callbackResult),
+					date: new Date(),
+				});
+			},
+		},
+	});
+	rootEl.value.dispatchEvent(event);
+}
+
+function scrollToBottom() {
+	messageAreaEl.value.scrollTo({
+		top: messageAreaEl.value.scrollHeight,
+		left: 0,
+	});
+}
+
+onMounted(() => {
+	/**
+	 * A ResizeObserver allows the component to scroll to the bottom when a
+	 * new message is added or grows in size. For example, after markdown rendering is finished.
+	 *
+	 * CSS overflow-anchor wasn't used due to problematic support in Safari.
+	 */
+
+	resizeObserver = new ResizeObserver(() => {
+		scrollToBottom();
+	});
+
+	/**
+	 * ResizeObserver only watches the client height, not the scroll height.
+	 * So it's the element inside that needs to be watched to detect changes.
+	 */
+
+	resizeObserver.observe(messagesEl.value);
+});
+
+onBeforeUnmount(() => {
+	resizeObserver.unobserve(messagesEl.value);
+});
+</script>
+<style scoped>
+@import "../../renderer/sharedStyles.css";
+
+.CoreChat {
+	display: flex;
+	flex-direction: column;
+	height: 80vh;
+	border-radius: 8px;
+	overflow: hidden;
+	background: var(--containerBackgroundColor);
+	border: 1px solid var(--separatorColor);
+}
+
+.messageArea {
+	overflow-y: auto;
+	overflow-x: hidden;
+	flex: 0 0 80%;
+}
+
+.messages {
+	padding: 16px;
+	display: flex;
+	gap: 16px;
+	flex-direction: column;
+}
+
+.message {
+	display: flex;
+	gap: 8px;
+}
+
+.message .avatar {
+	border-radius: 50%;
+	background: var(--avatarBackgroundColor);
+	color: var(--avatarTextColor);
+	height: 36px;
+	width: 36px;
+	flex: 0 0 36px;
+	display: flex;
+	font-weight: bold;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	text-transform: uppercase;
+}
+
+.message .contents {
+	border-radius: 8px;
+	width: fit-content;
+	flex: 0 1 auto;
+	color: var(--primaryTextColor);
+	white-space: pre-wrap;
+}
+
+.message .time {
+	color: var(--secondaryTextColor);
+	font-size: 0.7rem;
+	align-self: end;
+	text-wrap: nowrap;
+}
+
+.message.incoming .contents {
+	background: v-bind(
+		"fields.incomingColor.value ? fields.incomingColor.value : 'linear-gradient(264.27deg, rgb(245, 235, 255) 0.71%, rgb(255, 241, 237) 100%)'"
+	);
+}
+
+.message.outgoing .contents {
+	background: var(--outgoingColor);
+}
+
+.contents .loadingContainer {
+	padding: 16px;
+}
+
+.contents .text {
+	line-height: 2;
+	padding: 12px 16px 12px 16px;
+}
+
+.contents .actions {
+	padding: 16px;
+	background: rgba(0, 0, 0, 0.02);
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+
+.contents .actions .action {
+	padding: 12px;
+	border-radius: 4px;
+	background: var(--containerBackgroundColor);
+	overflow: hidden;
+	line-height: normal;
+	display: flex;
+	gap: 4px;
+	flex-direction: column;
+	box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.1);
+	cursor: pointer;
+	border: 0;
+}
+
+.action .subheading {
+	color: var(--secondaryTextColor);
+	font-size: 0.7rem;
+}
+
+.action .desc {
+	font-size: 0.7rem;
+}
+
+.inputArea {
+	border-top: 1px solid var(--separatorColor);
+	flex: 1 1 auto;
+	text-align: right;
+	display: flex;
+	align-items: top;
+}
+
+.inputArea textarea {
+	border: none;
+	width: 100%;
+	height: 100%;
+	padding: 16px;
+	resize: none;
+	background: transparent;
+	color: var(--primaryTextColor);
+	font-size: 0.8rem;
+}
+
+.inputArea button {
+	margin: 16px;
+	height: fit-content;
+	flex: 0 0 auto;
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+</style>
diff --git a/ui/src/core_components/content/CoreMessage.vue b/ui/src/core_components/content/CoreMessage.vue
index ddaa3f375..a840625de 100644
--- a/ui/src/core_components/content/CoreMessage.vue
+++ b/ui/src/core_components/content/CoreMessage.vue
@@ -87,7 +87,6 @@ export default {
 		},
 		previewField: "name",
 	},
-	components: { LoadingSymbol },
 };
 </script>
 <script setup lang="ts">
@@ -182,6 +181,7 @@ const rootStyle = computed(() => {
 	padding: 16px;
 	background-color: var(--separatorColor);
 }
+
 .empty > h2 {
 	text-align: center;
 	color: var(--primaryTextColor);
diff --git a/ui/src/core_components/content/CoreText.vue b/ui/src/core_components/content/CoreText.vue
index 45a2521d7..0f3280b10 100644
--- a/ui/src/core_components/content/CoreText.vue
+++ b/ui/src/core_components/content/CoreText.vue
@@ -1,17 +1,14 @@
 <template>
 	<div ref="rootEl" class="CoreText" :style="rootStyle" @click="handleClick">
-		<template v-if="fields.useMarkdown.value == 'no'">
-			<div class="plainText" :style="contentStyle">
-				{{ fields.text.value }}
-			</div>
-		</template>
-		<template v-else-if="fields.useMarkdown.value == 'yes'">
-			<div
-				v-dompurify-html="unsanitisedMarkdownHtml"
-				class="markdown"
-				:style="contentStyle"
-			></div>
-		</template>
+		<BaseMarkdown
+			v-if="fields.useMarkdown.value == 'yes'"
+			:raw-text="fields.text.value"
+			:style="contentStyle"
+		>
+		</BaseMarkdown>
+		<div v-else class="plainText" :style="contentStyle">
+			{{ fields.text.value }}
+		</div>
 	</div>
 </template>
 
@@ -19,6 +16,7 @@
 import { FieldCategory, FieldControl, FieldType } from "../../streamsyncTypes";
 import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
 import { getClick } from "../../renderer/syntheticEvents";
+import BaseMarkdown from "../base/BaseMarkdown.vue";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -78,7 +76,6 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { marked } from "marked";
 import { Ref, computed, inject, ref } from "vue";
 import injectionKeys from "../../injectionKeys";
 
@@ -102,11 +99,6 @@ const contentStyle = computed(() => {
 	};
 });
 
-const unsanitisedMarkdownHtml = computed(() => {
-	const unsanitisedHtml = marked.parse(fields.text.value).trim();
-	return unsanitisedHtml;
-});
-
 function handleClick(ev: MouseEvent) {
 	const ssEv = getClick(ev);
 	rootEl.value.dispatchEvent(ssEv);
@@ -132,68 +124,4 @@ function handleClick(ev: MouseEvent) {
 .CoreText img {
 	width: 100%;
 }
-
-/*
-Markdown styling
-*/
-
-.markdown:deep() h1,
-.markdown:deep() h2,
-.markdown:deep() h3,
-.markdown:deep() h4 {
-	font-weight: 300;
-	margin: 0;
-	color: var(--primaryTextColor);
-}
-
-.markdown:deep() h1 {
-	font-size: 1.3rem;
-}
-
-.markdown:deep() h2 {
-	font-size: 1rem;
-}
-
-.markdown:deep() h3 {
-	font-size: 0.9rem;
-}
-
-.markdown:deep() h4 {
-	text-transform: uppercase;
-	font-weight: bold;
-	font-size: 0.65rem;
-	letter-spacing: 0.2ch;
-}
-
-.markdown:deep() ul,
-.markdown:deep() ol {
-	padding: 0;
-	padding-inline-start: 0;
-	margin-block-start: 0;
-}
-
-.markdown:deep() li {
-	margin: 0 0 0 32px;
-}
-
-.markdown:deep() hr {
-	border: none;
-	border-top: 1px solid var(--separatorColor);
-}
-
-.markdown:deep() pre {
-	background-color: var(--separatorColor);
-	font-family: monospace;
-	padding: 8px;
-}
-
-.markdown:deep() code {
-	background-color: var(--separatorColor);
-	font-family: monospace;
-	padding: 2px;
-}
-
-.markdown:deep() pre > code {
-	background-color: unset;
-}
 </style>
diff --git a/ui/src/core_components/input/CoreFileInput.vue b/ui/src/core_components/input/CoreFileInput.vue
index 5814c885b..9b13a04e3 100644
--- a/ui/src/core_components/input/CoreFileInput.vue
+++ b/ui/src/core_components/input/CoreFileInput.vue
@@ -74,7 +74,6 @@ export default {
 			},
 		},
 	},
-	components: { LoadingSymbol },
 };
 </script>
 
diff --git a/ui/src/core_components/input/CoreRatingInput.vue b/ui/src/core_components/input/CoreRatingInput.vue
new file mode 100644
index 000000000..03a98ba60
--- /dev/null
+++ b/ui/src/core_components/input/CoreRatingInput.vue
@@ -0,0 +1,333 @@
+<template>
+	<div ref="rootEl" class="CoreRatingInput">
+		<label>{{ fields.label.value }}</label>
+		<div
+			ref="unitsEl"
+			class="units"
+			:class="{ valueSet: feedbackRating !== null }"
+			@click="handleClick"
+			@mousemove="handleMousemove"
+			@mouseout="handleMouseout"
+		>
+			<div
+				v-for="n in [...Array(normalisedMaxValue).keys()]"
+				:key="n"
+				class="unit"
+				:class="fields.feedback.value"
+			>
+				<div
+					class="filler"
+					:style="{
+						width: `${
+							feedbackRating > n
+								? Math.min(feedbackRating - n, 1) * 100
+								: 0
+						}%`,
+					}"
+				></div>
+				<div v-if="feedbackRating !== null" class="filler light"></div>
+				<div v-if="fields.feedback.value == 'faces'" class="face">
+					<svg viewBox="0 0 100 100">
+						<circle class="eye left" cx="35" cy="38" r="6"></circle>
+						<circle
+							class="eye right"
+							cx="65"
+							cy="38"
+							r="6"
+						></circle>
+						<path
+							class="mouth"
+							:d="getMouthPath(feedbackRating ?? n + 1)"
+						></path>
+					</svg>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { FieldType } from "../../streamsyncTypes";
+import {
+	accentColor,
+	cssClasses,
+	primaryTextColor,
+} from "../../renderer/sharedStyleFields";
+
+const description =
+	"A user input component that allows users to provide a rating.";
+
+const onChangeHandlerStub = `
+def onchange_handler(state, payload):
+
+	# Set the state variable "rating" to the new value
+
+	state["rating"] = payload`;
+
+export default {
+	streamsync: {
+		name: "Rating Input",
+		description,
+		category: "Input",
+		fields: {
+			label: {
+				name: "Label",
+				init: "Input Label",
+				type: FieldType.Text,
+			},
+			feedback: {
+				name: "Feedback",
+				default: "stars",
+				type: FieldType.Text,
+				options: {
+					stars: "Stars",
+					faces: "Faces",
+					hearts: "Hearts",
+				},
+			},
+			minValue: {
+				name: "Minimum value",
+				type: FieldType.Number,
+				default: "1",
+				desc: "Valid values are 0 and 1.",
+			},
+			maxValue: {
+				name: "Max value",
+				type: FieldType.Number,
+				default: "5",
+				desc: "Valid values are between 2 and 11.",
+			},
+			valueStep: {
+				name: "Step",
+				type: FieldType.Number,
+				default: "1",
+				desc: "Valid values are between 0.25 and 1.",
+			},
+			accentColor,
+			primaryTextColor,
+			cssClasses,
+		},
+		events: {
+			"ss-number-change": {
+				stub: onChangeHandlerStub,
+				bindable: true,
+			},
+		},
+	},
+};
+</script>
+
+<script setup lang="ts">
+import { Ref, computed, inject, ref } from "vue";
+import injectionKeys from "../../injectionKeys";
+import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+
+const fields = inject(injectionKeys.evaluatedFields);
+const rootEl = ref(null);
+const unitsEl: Ref<HTMLElement> = ref(null);
+const ss = inject(injectionKeys.core);
+const instancePath = inject(injectionKeys.instancePath);
+const provisionalValue: Ref<number> = ref(null);
+
+const { formValue, handleInput } = useFormValueBroker(ss, instancePath, rootEl);
+
+function getRawRatingFromEvent(event: MouseEvent) {
+	const evX = event.offsetX;
+	const unitEls = unitsEl.value.querySelectorAll(".unit");
+	let n = 0;
+	unitEls.forEach((unitEl) => {
+		const unitHtmlEl = unitEl as HTMLElement;
+		if (evX > unitHtmlEl.offsetLeft + unitHtmlEl.offsetWidth) {
+			n++;
+		} else if (evX > unitHtmlEl.offsetLeft) {
+			n += (evX - unitHtmlEl.offsetLeft) / unitHtmlEl.offsetWidth;
+		}
+	});
+	return n;
+}
+
+function normaliseRawRating(n: number) {
+	let nn =
+		Math.ceil(n / normalisedStepValue.value) * normalisedStepValue.value;
+	nn = Math.max(
+		Math.min(nn, normalisedMaxValue.value),
+		normalisedMinValue.value,
+	);
+
+	return nn;
+}
+
+function getRatingFromEvent(event: MouseEvent) {
+	const rawRating = getRawRatingFromEvent(event);
+	return normaliseRawRating(rawRating);
+}
+
+function handleMousemove(event: MouseEvent) {
+	const n = getRatingFromEvent(event);
+	provisionalValue.value = n;
+}
+
+function handleMouseout() {
+	provisionalValue.value = null;
+}
+
+function getMouthPath(n: number) {
+	const nn = Math.max(
+		Math.min(n, normalisedMaxValue.value),
+		normalisedMinValue.value,
+	);
+	const MIN_POINT = 45;
+	const MAX_POINT = 95;
+	const level =
+		(nn - normalisedMinValue.value) /
+		(normalisedMaxValue.value - normalisedMinValue.value);
+
+	const mouthOffsetY = level * -10;
+	const mouthY = 70 + mouthOffsetY;
+	const guideY = MIN_POINT + level * (MAX_POINT - MIN_POINT) + mouthOffsetY;
+
+	const d = `M30,${mouthY} Q50,${guideY} 70,${mouthY}`;
+	return d;
+}
+
+function handleClick(event: MouseEvent) {
+	const n = getRatingFromEvent(event);
+	handleInput(n, "ss-number-change");
+}
+
+const normalisedMinValue = computed(() => {
+	const MIN_VALUE_LOWER_LIMIT = 0;
+	const MIN_VALUE_UPPER_LIMIT = 1;
+	const minValue = Math.max(
+		Math.min(fields.minValue.value, MIN_VALUE_UPPER_LIMIT),
+		MIN_VALUE_LOWER_LIMIT,
+	);
+	return minValue;
+});
+
+const normalisedMaxValue = computed(() => {
+	const MAX_VALUE_LOWER_LIMIT = 2;
+	const MAX_VALUE_UPPER_LIMIT = 11;
+	const maxValue = Math.max(
+		Math.min(fields.maxValue.value, MAX_VALUE_UPPER_LIMIT),
+		MAX_VALUE_LOWER_LIMIT,
+	);
+	return maxValue;
+});
+
+const normalisedStepValue = computed(() => {
+	const STEP_VALUE_LOWER_LIMIT = 0.25;
+	const STEP_VALUE_UPPER_LIMIT = 1;
+	const step = Math.max(
+		Math.min(fields.valueStep.value, STEP_VALUE_UPPER_LIMIT),
+		STEP_VALUE_LOWER_LIMIT,
+	);
+	return step;
+});
+
+const feedbackRating = computed(() => {
+	if (provisionalValue.value !== null) return provisionalValue.value;
+	const formN = parseFloat(formValue.value);
+	if (isNaN(formN)) return null;
+	return formN;
+});
+</script>
+
+<style scoped>
+@import "../../renderer/sharedStyles.css";
+
+.CoreRatingInput {
+	width: fit-content;
+}
+
+label {
+	display: block;
+	margin-bottom: 8px;
+	color: var(--primaryTextColor);
+}
+
+.units {
+	margin-left: -8px;
+	padding-left: 8px;
+	padding-right: 8px;
+	display: flex;
+	gap: 8px;
+	flex-wrap: nowrap;
+	position: relative;
+}
+
+.unit {
+	pointer-events: none;
+	height: 28px;
+	width: 28px;
+	background: var(--separatorColor);
+	overflow: hidden;
+	position: relative;
+}
+
+.unit.stars {
+	clip-path: polygon(
+		50% 0%,
+		61% 35%,
+		98% 35%,
+		68% 57%,
+		79% 91%,
+		50% 70%,
+		21% 91%,
+		32% 57%,
+		2% 35%,
+		39% 35%
+	);
+}
+
+.unit.faces {
+	clip-path: circle(50%);
+}
+
+.unit.hearts {
+	clip-path: path(
+		"M2.54139 14.2987C0.97724 12.7905 0 10.646 0 8.26667C0 3.70111 3.5983 0 8.03704 0C10.4025 0 12.5293 1.05112 14 2.72404C15.4707 1.05112 17.5975 0 19.963 0C24.4017 0 28 3.70111 28 8.26667C28 10.6181 27.0455 12.7402 25.5133 14.2455L14.0815 28L2.54139 14.2987Z"
+	);
+}
+
+.unit .filler {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 28px;
+	height: 28px;
+	background: var(--accentColor);
+}
+
+.unit .filler.light {
+	opacity: 20%;
+}
+
+.unit .face {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 28px;
+	height: 28px;
+	color: var(--primaryTextColor);
+}
+
+.valueSet .unit .face {
+	color: var(--containerBackgroundColor);
+}
+
+.unit .face svg {
+	width: 100%;
+	height: 100%;
+}
+
+.unit .face .eye {
+	fill: currentColor;
+}
+
+.unit .face .mouth {
+	stroke: currentColor;
+	fill: transparent;
+	stroke-width: 5px;
+}
+</style>
diff --git a/ui/src/core_components/layout/CoreStep.vue b/ui/src/core_components/layout/CoreStep.vue
new file mode 100644
index 000000000..7034ede9d
--- /dev/null
+++ b/ui/src/core_components/layout/CoreStep.vue
@@ -0,0 +1,401 @@
+<template>
+	<div
+		v-show="
+			stepContainerDirectChildInstanceItem?.instanceNumber ==
+				STEP_BIT_INSTANCE_NUMBER ||
+			(stepContainerDirectChildInstanceItem?.instanceNumber ==
+				CONTENT_DISPLAYING_INSTANCE_NUMBER &&
+				isStepActive)
+		"
+		class="CoreStep"
+	>
+		<button
+			v-if="
+				stepContainerDirectChildInstanceItem?.instanceNumber ==
+				STEP_BIT_INSTANCE_NUMBER
+			"
+			class="bit"
+			:disabled="!isBeingEdited"
+			:class="{
+				active: isStepActive,
+				completed: fields.isCompleted.value == 'yes',
+			}"
+			stepindex="0"
+			@click="activateStep"
+		>
+			<div class="indicator">
+				<div class="linker left"></div>
+				<div
+					class="status"
+					:class="{
+						completed: fields.isCompleted.value == 'yes',
+					}"
+				>
+					<i
+						v-if="fields.isCompleted.value == 'yes'"
+						class="ri-check-line"
+					></i>
+				</div>
+				<div class="linker right"></div>
+			</div>
+			<div class="label">{{ fields.name.value }}</div>
+		</button>
+		<BaseContainer
+			v-if="
+				stepContainerDirectChildInstanceItem?.instanceNumber ==
+				CONTENT_DISPLAYING_INSTANCE_NUMBER
+			"
+			v-show="isStepActive"
+			class="container"
+			:content-h-align="fields.contentHAlign.value"
+			:content-padding="fields.contentPadding.value"
+		>
+			<slot></slot>
+		</BaseContainer>
+	</div>
+</template>
+
+<script lang="ts">
+/**
+ * This component follows a logic similar to the one seen in Tab and Tab Container.
+ * Most of the complexity arises from allowing Repeater components between the Step Container (parent) and the Step (child).
+ */
+
+const STEP_BIT_INSTANCE_NUMBER = 0;
+const CONTENT_DISPLAYING_INSTANCE_NUMBER = 1;
+
+import { Component, FieldType, InstancePath } from "../../streamsyncTypes";
+import { useEvaluator } from "../../renderer/useEvaluator";
+import {
+	contentHAlign,
+	cssClasses,
+	contentPadding,
+} from "../../renderer/sharedStyleFields";
+import { onBeforeUnmount } from "vue";
+
+const description =
+	"A container component that displays its child components as a step inside a Step Container.";
+
+export default {
+	streamsync: {
+		name: "Step",
+		description,
+		allowedParentTypes: ["steps", "repeater"],
+		allowedChildrenTypes: ["*"],
+		category: "Layout",
+		fields: {
+			name: {
+				name: "Name",
+				default: "(No name)",
+				init: "Step name",
+				type: FieldType.Text,
+			},
+			contentPadding: {
+				...contentPadding,
+				default: "16px",
+			},
+			isCompleted: {
+				name: "Completed",
+				desc: "Use a state element to mark this step as complete.",
+				default: "no",
+				type: FieldType.Text,
+				options: {
+					yes: "Yes",
+					no: "No",
+				},
+			},
+			contentHAlign,
+			cssClasses,
+		},
+		previewField: "name",
+	},
+};
+</script>
+<script setup lang="ts">
+import { Ref, computed, inject, onBeforeMount, watch } from "vue";
+import injectionKeys from "../../injectionKeys";
+import BaseContainer from "./../base/BaseContainer.vue";
+import { type StepsData } from "./CoreSteps.vue";
+
+const fields = inject(injectionKeys.evaluatedFields);
+const instancePath = inject(injectionKeys.instancePath);
+const instanceData = inject(injectionKeys.instanceData);
+const isBeingEdited = inject(injectionKeys.isBeingEdited);
+
+const ss = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
+const componentId = inject(injectionKeys.componentId);
+const { isComponentVisible } = useEvaluator(ss);
+const selectedId = computed(() => ssbm?.getSelectedId());
+
+const stepContainerData: Ref<StepsData> = getStepContainerData();
+
+/**
+ * Gets the negative index in the instancePath for the steps (Step Container) component
+ * that governs this step.
+ *
+ * In line with Array.at(), -1 is the last element, -2 the previous in the chain.
+ */
+function getStepContainerNegativeIndex(): number {
+	for (let i = -1; i > -1 * instancePath.length; i--) {
+		const item = instancePath.at(i);
+		const component = ss.getComponentById(item.componentId);
+		if (!component) return;
+		const type = component.type;
+		if (type !== "steps") continue;
+		return i;
+	}
+	return;
+}
+
+/**
+ * Returns the InstanceData for the parent Step Container.
+ */
+function getStepContainerData(): Ref<StepsData> {
+	const negativeIndex = getStepContainerNegativeIndex();
+	if (typeof negativeIndex == "undefined") return;
+	return instanceData.at(negativeIndex);
+}
+
+/**
+ * Returns the InstancePath of the main instance (content-displaying) of this Step component.
+ */
+function getMatchingStepInstancePath() {
+	const i = getStepContainerNegativeIndex() + 1; // Gets negative index for direct child of Step Container
+	const itemsBefore = instancePath.slice(0, i);
+	const itemsAfter = i + 1 < 0 ? instancePath.slice(i + 1) : [];
+	const matchingInstancePath = [
+		...itemsBefore,
+		{
+			componentId: instancePath.at(i).componentId,
+			instanceNumber: CONTENT_DISPLAYING_INSTANCE_NUMBER,
+		},
+		...itemsAfter,
+	];
+	return matchingInstancePath;
+}
+
+/**
+ * Activate this step (self-activate).
+ */
+function activateStep() {
+	stepContainerData.value = {
+		...stepContainerData.value,
+		activeStep: getMatchingStepInstancePath(),
+	};
+}
+
+/**
+ * Activate the next step that hasn't been marked as completed.
+ */
+function activateNextStep() {
+	const currentStepIndex = stepContainerData.value.steps.findIndex(
+		(step) =>
+			JSON.stringify(step.instancePath) == JSON.stringify(instancePath),
+	);
+	if (
+		currentStepIndex == -1 ||
+		currentStepIndex + 1 > stepContainerData.value.steps.length
+	)
+		return;
+	const subsequentSteps = stepContainerData.value.steps.slice(
+		currentStepIndex + 1,
+	);
+	let nextStep = subsequentSteps.find((step) => step.isCompleted != "yes");
+	if (!nextStep) {
+		const lastStep = stepContainerData.value.steps.at(-1);
+		nextStep = lastStep;
+	}
+	stepContainerData.value = {
+		...stepContainerData.value,
+		activeStep: nextStep.instancePath,
+	};
+}
+
+function checkIfStepIsParent(childId: Component["id"]): boolean {
+	const child = ss.getComponentById(childId);
+	if (!child || child.type == "root") return false;
+	if (child.parentId == componentId) return true;
+	return checkIfStepIsParent(child.parentId);
+}
+
+function activateDefaultStep() {
+	if (fields.isCompleted.value != "yes") {
+		activateStep();
+		return;
+	}
+	activateNextStep();
+}
+
+const stepContainerDirectChildInstanceItem = computed(() => {
+	const i = getStepContainerNegativeIndex() + 1;
+	return instancePath.at(i);
+});
+
+/*
+Activate the step if a component inside it was selected.
+*/
+watch(selectedId, (newSelectedId) => {
+	if (!newSelectedId) return;
+	if (!checkIfStepIsParent(newSelectedId)) return;
+	activateStep();
+});
+
+/*
+Determine whether this step is active by checking whether this step's InstancePath matches the 
+active step's in the parent Step Container.
+*/
+const isStepActive = computed(() => {
+	let contentDisplayingInstancePath: InstancePath;
+	if (
+		stepContainerDirectChildInstanceItem?.value.instanceNumber ==
+		STEP_BIT_INSTANCE_NUMBER
+	) {
+		contentDisplayingInstancePath = getMatchingStepInstancePath();
+	} else {
+		contentDisplayingInstancePath = instancePath;
+	}
+	const activeStep = stepContainerData.value?.activeStep;
+	return (
+		JSON.stringify(activeStep) ==
+		JSON.stringify(contentDisplayingInstancePath)
+	);
+});
+
+/*
+Prevent a step of being active while completed.
+*/
+watch([isStepActive, fields.isCompleted], () => {
+	if (isBeingEdited.value) return;
+	if (!isStepActive.value) return;
+	if (fields.isCompleted.value == "yes") {
+		activateNextStep();
+	}
+});
+
+onBeforeMount(() => {
+	if (
+		stepContainerDirectChildInstanceItem?.value.instanceNumber ==
+		STEP_BIT_INSTANCE_NUMBER
+	)
+		return;
+
+	// Register steps in the Step Container
+
+	if (
+		typeof stepContainerData.value.steps.find(
+			(step) => step.instancePath == instancePath,
+		) === "undefined"
+	) {
+		stepContainerData.value.steps.push({
+			instancePath,
+			isCompleted: fields.isCompleted.value,
+		});
+	}
+
+	const activeStep = stepContainerData.value?.activeStep;
+	if (activeStep) return;
+	if (!isComponentVisible(componentId, instancePath)) return;
+
+	// During render of first step, mark the first non-completed step as active
+
+	activateDefaultStep();
+});
+
+onBeforeUnmount(() => {
+	const currentStepIndex = stepContainerData.value.steps.findIndex(
+		(step) =>
+			JSON.stringify(step.instancePath) == JSON.stringify(instancePath),
+	);
+	stepContainerData.value.steps.splice(currentStepIndex, 1);
+});
+</script>
+
+<style scoped>
+@import "../../renderer/sharedStyles.css";
+
+button.bit {
+	padding: 16px 0 0 0;
+	border: none;
+	border-radius: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+button.bit:disabled {
+	cursor: auto;
+}
+
+button.bit:focus {
+	color: var(--primaryTextColor);
+}
+
+button.bit.active,
+button.bit.active:focus {
+	color: var(--primaryTextColor);
+}
+
+.indicator {
+	width: 100%;
+	display: flex;
+	gap: 4px;
+	flex-direction: row;
+	align-items: center;
+}
+
+.indicator .status {
+	color: var(--primaryTextColor);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 18px;
+	width: 18px;
+	border-radius: 50%;
+	background: var(--containerBackgroundColor);
+	border: 1px solid var(--separatorColor);
+	outline: 4px solid var(--separatorColor);
+	margin: 4px;
+}
+
+.bit.active .indicator .status {
+	border: 2px solid var(--separatorColor);
+	background: var(--accentColor);
+	color: var(--containerBackgroundColor);
+}
+
+.bit:not(.active).completed .indicator .status {
+	background: var(--separatorColor);
+	border-color: transparent;
+	color: var(--primaryTextColor);
+}
+
+.linker {
+	height: 1px;
+	background: var(--separatorColor);
+	flex: 1 0 auto;
+}
+
+/* These declarations remove the lines before the first step and after the last step */
+
+:not(.CoreRepeater) > .CoreStep:not(.beingEdited):first-child .linker.left {
+	background: transparent;
+}
+
+:not(.CoreRepeater) > .CoreStep.beingEdited:nth-child(2) .linker.left {
+	background: transparent;
+}
+
+:not(.CoreRepeater) > .CoreStep:not(.beingEdited):last-child .linker.right {
+	background: transparent;
+}
+
+:not(.CoreRepeater) > .CoreStep.beingEdited:nth-last-child(2) .linker.right {
+	background: transparent;
+}
+
+.label {
+	padding: 8px 16px 0 16px;
+}
+</style>
diff --git a/ui/src/core_components/layout/CoreSteps.vue b/ui/src/core_components/layout/CoreSteps.vue
new file mode 100644
index 000000000..aea30fb8d
--- /dev/null
+++ b/ui/src/core_components/layout/CoreSteps.vue
@@ -0,0 +1,111 @@
+<template>
+	<div class="CoreSteps">
+		<nav
+			class="stepSelector horizontal"
+			data-streamsync-cage
+			data-streamsync-container
+		>
+			<slot :instance-number="0"></slot>
+		</nav>
+		<div class="container">
+			<slot :instance-number="1"></slot>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import {
+	accentColor,
+	primaryTextColor,
+	secondaryTextColor,
+	containerBackgroundColor,
+	containerShadow,
+	separatorColor,
+	buttonColor,
+	buttonTextColor,
+	buttonShadow,
+	cssClasses,
+} from "../../renderer/sharedStyleFields";
+
+const description =
+	"A container component for displaying Step components, allowing you to implement a stepped workflow.";
+
+export default {
+	streamsync: {
+		name: "Step Container",
+		description,
+		category: "Layout",
+		allowedChildrenTypes: ["step", "repeater"],
+		fields: {
+			accentColor,
+			primaryTextColor,
+			secondaryTextColor,
+			containerBackgroundColor,
+			containerShadow,
+			separatorColor,
+			buttonColor,
+			buttonTextColor,
+			buttonShadow,
+			cssClasses,
+		},
+	},
+};
+</script>
+<script setup lang="ts">
+import { inject } from "vue";
+import injectionKeys from "../../injectionKeys";
+import { InstancePath } from "../../streamsyncTypes";
+
+export type StepsData = {
+	activeStep: InstancePath;
+	steps: {
+		instancePath: InstancePath;
+		isCompleted: string;
+	}[];
+};
+
+const instanceData = inject(injectionKeys.instanceData);
+
+const stepsData: StepsData = {
+	activeStep: undefined,
+	steps: [],
+};
+
+instanceData.at(-1).value = stepsData;
+</script>
+
+<style scoped>
+@import "../../renderer/sharedStyles.css";
+
+.CoreSteps {
+	width: 100%;
+	border: 1px solid var(--separatorColor);
+	border-radius: 8px;
+	background: var(--containerBackgroundColor);
+	overflow: hidden;
+}
+
+.stepSelector {
+	pointer-events: all;
+	display: flex;
+	gap: 0;
+	color: var(--secondaryTextColor);
+	padding: 0 16px 0 16px;
+	max-width: 100%;
+	overflow-x: auto;
+	justify-content: center;
+}
+
+.childless > .stepSelector {
+	display: none;
+}
+
+.container {
+	background: var(--containerBackgroundColor);
+	box-shadow: var(--containerShadow);
+}
+
+.childless > .container {
+	border: none;
+}
+</style>
diff --git a/ui/src/renderer/sharedStyles.css b/ui/src/renderer/sharedStyles.css
index 6616c1083..6afef58df 100644
--- a/ui/src/renderer/sharedStyles.css
+++ b/ui/src/renderer/sharedStyles.css
@@ -133,6 +133,7 @@ button:hover {
 [data-streamsync-container].crackedContainer.horizontal
 	> [data-streamsync-slot-of-id] {
 	animation: appearHorizontal 0.2s forwards;
+	align-self:center;
 	display: block;
 }