diff --git a/src/ui/src/components/core/base/BaseCollapseButton.vue b/src/ui/src/components/core/base/BaseCollapseButton.vue
new file mode 100644
index 000000000..aaa712928
--- /dev/null
+++ b/src/ui/src/components/core/base/BaseCollapseButton.vue
@@ -0,0 +1,55 @@
+<template>
+	<button
+		role="button"
+		class="BaseCollapseIcon"
+		:class="{ 'BaseCollapseIcon--collapsed': isCollapsed }"
+		@click="isCollapsed = !isCollapsed"
+	>
+		<i class="material-symbols-outlined">{{ icon }}</i>
+	</button>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+
+const props = defineProps({
+	direction: {
+		type: String as PropType<"left-right" | "top-bottom">,
+		required: true,
+	},
+});
+
+const isCollapsed = defineModel({ type: Boolean, required: true });
+
+const icon = computed(() =>
+	props.direction === "left-right" ? "chevron_left" : "keyboard_arrow_up",
+);
+</script>
+
+<style scoped>
+.BaseCollapseIcon {
+	border: none;
+	border-radius: 50%;
+	padding: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: transparent;
+
+	height: 32px;
+	width: 32px;
+	cursor: pointer;
+
+	transition: all 0.3s ease-in-out;
+	transform: rotate(0deg);
+
+	border: 1px solid var(--separatorColor);
+}
+.BaseCollapseIcon:hover {
+	background: var(--separatorColor);
+}
+
+.BaseCollapseIcon--collapsed {
+	transform: rotate(180deg);
+}
+</style>
diff --git a/src/ui/src/components/core/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
index bed519a72..7a38059d3 100644
--- a/src/ui/src/components/core/layout/CoreColumn.vue
+++ b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -13,16 +13,12 @@
 			<div v-if="!isCollapsed" class="titleContainer">
 				<h3 v-if="fields.title.value">{{ fields.title.value }}</h3>
 			</div>
-			<div
+			<BaseCollapseButton
 				v-if="isCollapsible"
+				v-model="isCollapsed"
 				class="collapser"
-				@click="toggleCollapsed"
-			>
-				<IconGen
-					class="collapserArrow"
-					icon-key="collapseArrow"
-				></IconGen>
-			</div>
+				direction="left-right"
+			/>
 		</div>
 		<div v-if="isCollapsed && fields.title.value" class="collapsedTitle">
 			<div class="transformed">
@@ -31,6 +27,7 @@
 		</div>
 		<BaseContainer
 			class="container"
+			:aria-expanded="isCollapsible ? isCollapsed : null"
 			:content-h-align="fields.contentHAlign.value"
 			:content-v-align="fields.contentVAlign.value"
 			:content-padding="fields.contentPadding.value"
@@ -48,7 +45,10 @@ import {
 	contentVAlign,
 	cssClasses,
 	separatorColor,
+	startCollapsed,
+	isCollapsible as isCollapsibleField,
 } from "@/renderer/sharedStyleFields";
+import BaseCollapseButton from "../base/BaseCollapseButton.vue";
 
 const description =
 	"A layout component that organises its child components in columns. Must be inside a Column Container component.";
@@ -83,25 +83,9 @@ export default {
 				},
 				category: FieldCategory.Style,
 			},
-			isCollapsible: {
-				name: "Collapsible",
-				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
-				category: FieldCategory.Style,
-			},
+			isCollapsible: isCollapsibleField,
 			startCollapsed: {
-				name: "Start collapsed",
-				type: FieldType.Text,
-				category: FieldCategory.Style,
-				default: "no",
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
+				...startCollapsed,
 				desc: "Only applied when the column is collapsible.",
 			},
 			separatorColor,
@@ -111,13 +95,11 @@ export default {
 			cssClasses,
 		},
 	},
-	components: { IconGen },
 };
 </script>
 <script setup lang="ts">
 import { computed, ComputedRef, inject, Ref, ref, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
-import IconGen from "@/renderer/IconGen.vue";
 import BaseContainer from "../base/BaseContainer.vue";
 const instancePath = inject(injectionKeys.instancePath);
 const instanceData = inject(injectionKeys.instanceData);
@@ -144,10 +126,6 @@ const rootStyle = computed(() => {
 	return style;
 });
 
-const toggleCollapsed = () => {
-	isCollapsed.value = !isCollapsed.value;
-};
-
 /* Collapsing direction
 The minimum non-collapsible column position (mnccp) determines how other columns collapse.
 Those with a position lower than mnccp collapse to the left.
@@ -232,13 +210,6 @@ watch(
 .CoreColumn > .header > .collapser {
 	order: 2;
 	flex: 0 0 32px;
-	border-radius: 16px;
-	padding: 4px;
-	background: var(--separatorColor);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	stroke: var(--primaryTextColor);
 }
 
 .CoreColumn > .header > .collapser > .collapserArrow {
diff --git a/src/ui/src/components/core/layout/CoreSection.vue b/src/ui/src/components/core/layout/CoreSection.vue
index f063db07c..1d1f1b828 100644
--- a/src/ui/src/components/core/layout/CoreSection.vue
+++ b/src/ui/src/components/core/layout/CoreSection.vue
@@ -1,9 +1,27 @@
 <template>
-	<section class="CoreSection">
-		<h3 v-if="fields.title.value">{{ fields.title.value }}</h3>
+	<section
+		class="CoreSection"
+		:class="{ 'CoreSection--collapsible': isCollapsible }"
+	>
+		<div
+			v-if="fields.title.value || isCollapsible"
+			class="CoreSection__title"
+			:class="{
+				'CoreSection__title--collapsed': isCollapsible && isCollapsed,
+			}"
+		>
+			<h3>{{ fields.title.value }}</h3>
+			<BaseCollapseButton
+				v-if="isCollapsible"
+				v-model="isCollapsed"
+				direction="top-bottom"
+			/>
+		</div>
 		<BaseContainer
+			v-if="!isCollapsed"
 			:content-h-align="fields.contentHAlign.value"
 			:content-padding="fields.contentPadding.value"
+			:aria-expanded="isCollapsible ? isCollapsed : null"
 		>
 			<slot></slot>
 		</BaseContainer>
@@ -25,6 +43,8 @@ import {
 	cssClasses,
 	contentHAlign,
 	contentPadding,
+	isCollapsible as isCollapsibleField,
+	startCollapsed,
 } from "@/renderer/sharedStyleFields";
 
 const description =
@@ -43,6 +63,8 @@ export default {
 				desc: "Leave blank to hide.",
 				type: FieldType.Text,
 			},
+			isCollapsible: isCollapsibleField,
+			startCollapsed,
 			accentColor,
 			primaryTextColor,
 			secondaryTextColor,
@@ -64,11 +86,17 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { inject } from "vue";
+import { computed, inject, ref } from "vue";
 import injectionKeys from "@/injectionKeys";
 import BaseContainer from "../base/BaseContainer.vue";
+import BaseCollapseButton from "../base/BaseCollapseButton.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
+
+const isCollapsible = computed(() => fields.isCollapsible.value === "yes");
+const isCollapsed = ref<boolean>(
+	isCollapsible.value && fields.startCollapsed.value === "yes",
+);
 </script>
 
 <style scoped>
@@ -80,7 +108,12 @@ const fields = inject(injectionKeys.evaluatedFields);
 	background-color: var(--containerBackgroundColor);
 }
 
-h3 {
+.CoreSection__title {
 	margin: 16px 16px 0 16px;
+	display: grid;
+	grid-template-columns: 1fr auto;
+}
+.CoreSection__title--collapsed {
+	margin: 16px;
 }
 </style>
diff --git a/src/ui/src/components/core/layout/CoreSidebar.vue b/src/ui/src/components/core/layout/CoreSidebar.vue
index feede9019..81e6199ef 100644
--- a/src/ui/src/components/core/layout/CoreSidebar.vue
+++ b/src/ui/src/components/core/layout/CoreSidebar.vue
@@ -7,12 +7,7 @@
 		}"
 	>
 		<div class="collapserContainer">
-			<div class="collapser" @click="toggleCollapsed">
-				<IconGen
-					class="collapserArrow"
-					icon-key="collapseArrow"
-				></IconGen>
-			</div>
+			<BaseCollapseButton v-model="isCollapsed" direction="left-right" />
 		</div>
 		<div class="container" data-writer-container>
 			<slot></slot>
@@ -33,7 +28,9 @@ import {
 	buttonTextColor,
 	buttonShadow,
 	cssClasses,
+	startCollapsed,
 } from "@/renderer/sharedStyleFields";
+import BaseCollapseButton from "../base/BaseCollapseButton.vue";
 
 const description =
 	"A container component that organises its children in a sidebar. Its parent must be a Page component.";
@@ -49,14 +46,8 @@ export default {
 		category: "Layout",
 		fields: {
 			startCollapsed: {
-				name: "Start collapsed",
-				type: FieldType.Text,
-				category: FieldCategory.Style,
-				default: "no",
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
+				...startCollapsed,
+				desc: undefined,
 			},
 			sidebarBackgroundColor: {
 				name: "Background",
@@ -82,7 +73,6 @@ export default {
 <script setup lang="ts">
 import { computed, inject, onMounted, Ref, ref, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
-import IconGen from "@/renderer/IconGen.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const isCollapsed: Ref<boolean> = ref(fields.startCollapsed.value == "yes");
@@ -91,10 +81,6 @@ const ssbm = inject(injectionKeys.builderManager);
 const componentId = inject(injectionKeys.componentId);
 const selectedId = computed(() => ssbm?.getSelectedId());
 
-const toggleCollapsed = () => {
-	isCollapsed.value = !isCollapsed.value;
-};
-
 const rendererTop = ref(0);
 
 const rootStyle = computed(() => {
@@ -153,15 +139,6 @@ onMounted(() => {
 
 .collapserContainer > .collapser {
 	flex: 0 0 32px;
-	min-width: 32px;
-	border-radius: 16px;
-	padding: 4px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	stroke: var(--primaryTextColor);
-	border: 1px solid var(--separatorColor);
-	pointer: cursor;
 }
 
 .collapserContainer .collapserArrow {
diff --git a/src/ui/src/renderer/IconGen.vue b/src/ui/src/renderer/IconGen.vue
deleted file mode 100644
index 4b9c08680..000000000
--- a/src/ui/src/renderer/IconGen.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-	<div class="IconGen">
-		<svg
-			v-if="iconKey == 'collapseArrow'"
-			width="5"
-			height="9"
-			viewBox="0 0 5 9"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path d="M4 1L1 4.64L4 8" />
-		</svg>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { toRefs } from "vue";
-
-const props = defineProps<{
-	iconKey: "collapseArrow";
-}>();
-const { iconKey } = toRefs(props);
-</script>
-
-<style scoped>
-path {
-	color: currentColor;
-}
-</style>
diff --git a/src/ui/src/renderer/sharedStyleFields.ts b/src/ui/src/renderer/sharedStyleFields.ts
index 4e9512001..e6f990810 100644
--- a/src/ui/src/renderer/sharedStyleFields.ts
+++ b/src/ui/src/renderer/sharedStyleFields.ts
@@ -1,27 +1,31 @@
-import { FieldCategory, FieldType } from "@/writerTypes";
+import {
+	FieldCategory,
+	FieldType,
+	WriterComponentDefinitionField,
+} from "@/writerTypes";
 
-export const accentColor = {
+export const accentColor: WriterComponentDefinitionField = {
 	name: "Accent",
 	type: FieldType.Color,
 	category: FieldCategory.Style,
 	applyStyleVariable: true,
 };
 
-export const primaryTextColor = {
+export const primaryTextColor: WriterComponentDefinitionField = {
 	name: "Primary text",
 	type: FieldType.Color,
 	category: FieldCategory.Style,
 	applyStyleVariable: true,
 };
 
-export const secondaryTextColor = {
+export const secondaryTextColor: WriterComponentDefinitionField = {
 	name: "Secondary text",
 	type: FieldType.Color,
 	category: FieldCategory.Style,
 	applyStyleVariable: true,
 };
 
-export const emptinessColor = {
+export const emptinessColor: WriterComponentDefinitionField = {
 	name: "Emptiness",
 	desc: "Page background color",
 	type: FieldType.Color,
@@ -29,56 +33,56 @@ export const emptinessColor = {
 	applyStyleVariable: true,
 };
 
-export const containerBackgroundColor = {
+export const containerBackgroundColor: WriterComponentDefinitionField = {
 	name: "Container background",
 	type: FieldType.Color,
 	category: FieldCategory.Style,
 	applyStyleVariable: true,
 };
 
-export const containerShadow = {
+export const containerShadow: WriterComponentDefinitionField = {
 	name: "Container shadow",
 	type: FieldType.Shadow,
 	category: FieldCategory.Style,
 	applyStyleVariable: true,
 };
 
-export const separatorColor = {
+export const separatorColor: WriterComponentDefinitionField = {
 	name: "Separator",
 	type: FieldType.Color,
 	category: FieldCategory.Style,
 	applyStyleVariable: true,
 };
 
-export const buttonColor = {
+export const buttonColor: WriterComponentDefinitionField = {
 	name: "Button",
 	type: FieldType.Color,
 	category: FieldCategory.Style,
 	applyStyleVariable: true,
 };
 
-export const buttonTextColor = {
+export const buttonTextColor: WriterComponentDefinitionField = {
 	name: "Button text",
 	type: FieldType.Color,
 	category: FieldCategory.Style,
 	applyStyleVariable: true,
 };
 
-export const buttonShadow = {
+export const buttonShadow: WriterComponentDefinitionField = {
 	name: "Button shadow",
 	type: FieldType.Shadow,
 	category: FieldCategory.Style,
 	applyStyleVariable: true,
 };
 
-export const cssClasses = {
+export const cssClasses: WriterComponentDefinitionField = {
 	name: "Custom CSS classes",
 	type: FieldType.Text,
 	category: FieldCategory.Style,
 	desc: "CSS classes, separated by spaces. You can define classes in custom stylesheets.",
 };
 
-export const contentWidth = {
+export const contentWidth: WriterComponentDefinitionField = {
 	name: "Content width",
 	type: FieldType.Width,
 	default: "100%",
@@ -86,23 +90,42 @@ export const contentWidth = {
 	desc: "Configure content width using CSS units, e.g. 100px, 50%, 10vw, etc.",
 };
 
-export const contentHAlign = {
+export const contentHAlign: WriterComponentDefinitionField = {
 	name: "Content alignment (H)",
 	type: FieldType.HAlign,
 	default: "unset",
 	category: FieldCategory.Style,
 };
 
-export const contentVAlign = {
+export const contentVAlign: WriterComponentDefinitionField = {
 	name: "Content alignment (V)",
 	type: FieldType.VAlign,
 	default: "unset",
 	category: FieldCategory.Style,
 };
 
-export const contentPadding = {
+export const contentPadding: WriterComponentDefinitionField = {
 	name: "Padding",
 	type: FieldType.Padding,
 	default: "0",
 	category: FieldCategory.Style,
 };
+
+const yesNoOptions = { yes: "Yes", no: "No" };
+
+export const isCollapsible: WriterComponentDefinitionField = {
+	name: "Collapsible",
+	default: "no",
+	type: FieldType.Text,
+	options: yesNoOptions,
+	category: FieldCategory.Style,
+};
+
+export const startCollapsed: WriterComponentDefinitionField = {
+	name: "Start collapsed",
+	type: FieldType.Text,
+	category: FieldCategory.Style,
+	default: "no",
+	options: yesNoOptions,
+	desc: "Only applied when the component is collapsible.",
+};
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index b611f6893..242b5e739 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -56,6 +56,28 @@ export type InstancePath = InstancePathItem[];
  * Defines component structure and behaviour. Included in Component templates.
  */
 
+export type WriterComponentDefinitionField = {
+	/** Display name */
+	name: string;
+	/** Initial value */
+	init?: string;
+	/** Description */
+	desc?: string;
+	/** Value used if the field is empty, e.g. "(No text)" */
+	default?: string;
+	/** Which control (text, textarea, etc) to use if not the default for the type */
+	control?: FieldControl;
+	options?:
+		| Record<string, string>
+		| ((wf?: Core, componentId?: ComponentId) => Record<string, string>); // List of values to be provided as autocomplete options
+	/** Data type for the field */
+	type: FieldType;
+	/** Category (Layout, Content, etc) */
+	category?: FieldCategory;
+	/** Use the value of this field as a CSS variable */
+	applyStyleVariable?: boolean;
+};
+
 export type WriterComponentDefinition = {
 	name: string; // Display name for the component
 	description: string; // Short description
@@ -67,22 +89,7 @@ export type WriterComponentDefinition = {
 	slot?: string; // In which slot component should render whgen "*" is used it will render in all slots
 	fields?: Record<
 		string, // Id for the field
-		{
-			name: string; // Display name
-			init?: string; // Initial value
-			desc?: string; // Description
-			default?: string; // Value used if the field is empty, e.g. "(No text)"
-			control?: FieldControl; // Which control (text, textarea, etc) to use if not the default for the type
-			options?:
-				| Record<string, string>
-				| ((
-						wf?: Core,
-						componentId?: ComponentId,
-				  ) => Record<string, string>); // List of values to be provided as autocomplete options
-			type: FieldType; // Data type for the field
-			category?: FieldCategory; // Category (Layout, Content, etc)
-			applyStyleVariable?: boolean; // Use the value of this field as a CSS variable
-		}
+		WriterComponentDefinitionField
 	>;
 	events?: Record<
 		string, // Event type