diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template-picker/template-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template-picker/template-picker-modal.element.ts
index bffb7ff596..49a14aa0d0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template-picker/template-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/template-picker/template-picker-modal.element.ts
@@ -12,6 +12,54 @@ export class UmbTemplatePickerModalElement extends UmbModalBaseElement<
 	UmbTemplatePickerModalData,
 	UmbTemplatePickerModalResult
 > {
+	@state()
+	_selection: Array<string> = [];
+
+	@state()
+	_multiple = true;
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._selection = this.data?.selection ?? [];
+		this._multiple = this.data?.multiple ?? true;
+	}
+
+	private _handleSelectionChange(e: CustomEvent) {
+		e.stopPropagation();
+		const element = e.target as UmbTreeElement;
+		this._selection = this._multiple ? element.selection : [element.selection[element.selection.length - 1]];
+	}
+
+	private _submit() {
+		this.modalHandler?.submit({ selection: this._selection });
+	}
+
+	private _close() {
+		this.modalHandler?.reject();
+	}
+
+	// TODO: implement search
+	// TODO: make umb-tree have a disabled option (string array like selection)?
+	render() {
+		return html`
+			<umb-workspace-layout headline="Select Content">
+				<uui-box>
+					<uui-input></uui-input>
+					<hr />
+					<umb-tree
+						alias="Umb.Tree.Templates"
+						@selected=${this._handleSelectionChange}
+						.selection=${this._selection}
+						selectable></umb-tree>
+				</uui-box>
+				<div slot="actions">
+					<uui-button label="Close" @click=${this._close}></uui-button>
+					<uui-button label="Submit" look="primary" color="positive" @click=${this._submit}></uui-button>
+				</div>
+			</umb-workspace-layout>
+		`;
+	}
+
 	static styles = [
 		UUITextStyles,
 		css`
@@ -46,53 +94,6 @@ export class UmbTemplatePickerModalElement extends UmbModalBaseElement<
 			}
 		`,
 	];
-
-	@state()
-	_selection: Array<string> = [];
-
-	@state()
-	_multiple = true;
-
-	connectedCallback() {
-		super.connectedCallback();
-		this._selection = this.data?.selection ?? [];
-		this._multiple = this.data?.multiple ?? true;
-	}
-
-	private _handleSelectionChange(e: CustomEvent) {
-		e.stopPropagation();
-		const element = e.target as UmbTreeElement;
-		this._selection = this._multiple ? element.selection : [element.selection[element.selection.length - 1]];
-	}
-
-	private _submit() {
-		this.modalHandler?.submit({ selection: this._selection });
-	}
-
-	private _close() {
-		this.modalHandler?.reject();
-	}
-
-	// TODO: make umb-tree have a disabled option (string array like selection)?
-	render() {
-		return html`
-			<umb-workspace-layout headline="Select Content">
-				<uui-box>
-					<uui-input></uui-input>
-					<hr />
-					<umb-tree
-						alias="Umb.Tree.Templates"
-						@selected=${this._handleSelectionChange}
-						.selection=${this._selection}
-						selectable></umb-tree>
-				</uui-box>
-				<div slot="actions">
-					<uui-button label="Close" @click=${this._close}></uui-button>
-					<uui-button label="Submit" look="primary" color="positive" @click=${this._submit}></uui-button>
-				</div>
-			</umb-workspace-layout>
-		`;
-	}
 }
 
 export default UmbTemplatePickerModalElement;