diff --git a/src/editor/components/index.js b/src/editor/components/index.js
index 72583d5d..07b104cf 100644
--- a/src/editor/components/index.js
+++ b/src/editor/components/index.js
@@ -3,3 +3,4 @@ import './seFlyingButton.js';
import './seExplorerButton.js';
import './seDropdown.js';
import './seInput.js';
+import './seSpinInput.js';
diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
new file mode 100644
index 00000000..7d5af110
--- /dev/null
+++ b/src/editor/components/seSpinInput.js
@@ -0,0 +1,148 @@
+/* eslint-disable node/no-unpublished-import */
+import NumberSpinBox from 'elix/define/NumberSpinBox.js';
+import {defaultState} from 'elix/src/base/internal.js';
+import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
+import {internal} from 'elix';
+
+/**
+ * @class SeSpinInput
+ */
+class SeSpinInput extends NumberSpinBox {
+ /**
+ * @function get
+ * @returns {PlainObject}
+ */
+ get [defaultState] () {
+ return Object.assign(super[defaultState], {
+ label: '',
+ src: '',
+ value: '',
+ min: 1,
+ step: 1
+ });
+ }
+
+ /**
+ * @function get
+ * @returns {PlainObject}
+ */
+ get [internal.template] () {
+ const result = super[internal.template];
+ result.content.prepend(fragmentFrom.html`
+ `.cloneNode(true));
+ // change the style so it fits in our toolbar
+ result.content.append(
+ templateFrom.html`
+
+ `.content
+ );
+ return result;
+ }
+ /**
+ * @function observedAttributes
+ * @returns {any} observed
+ */
+ static get observedAttributes () {
+ return ['value', 'class', 'label', 'src', 'min', 'max', 'step'];
+ }
+ /**
+ * @function attributeChangedCallback
+ * @param {string} name
+ * @param {string} oldValue
+ * @param {string} newValue
+ * @returns {void}
+ */
+ attributeChangedCallback (name, oldValue, newValue) {
+ if (oldValue === newValue) return;
+ console.log({this: this, name, oldValue, newValue});
+ switch (name) {
+ case 'label':
+ this.label = newValue;
+ break;
+ case 'src':
+ this.src = newValue;
+ break;
+ default:
+ super.attributeChangedCallback(name, oldValue, newValue);
+ break;
+ }
+ }
+ /**
+ * @function [internal.render]
+ * @param {PlainObject} changed
+ * @returns {void}
+ */
+ [internal.render] (changed) {
+ super[internal.render](changed);
+ if (this[internal.firstRender]) {
+ this.$input = this.shadowRoot.getElementById('input');
+ this.$label = this.shadowRoot.querySelector('label');
+ this.$img = this.shadowRoot.querySelector('img');
+ this.$span = this.shadowRoot.querySelector('span');
+ this.$event = new CustomEvent('change');
+ this.addEventListener('change', (e) => {
+ e.preventDefault();
+ this.value = e.target.value;
+ });
+ }
+ if (changed.src) {
+ if (this[internal.state].src !== '') {
+ this.$img.src = this[internal.state].src;
+ this.$img.style.display = 'block';
+ this.$label.style.display = 'block';
+ }
+ }
+ if (changed.label) {
+ if (this[internal.state].label !== '') {
+ this.$span.prepend(this[internal.state].label);
+ this.$img.style.display = 'none';
+ this.$label.style.display = 'block';
+ }
+ }
+ if (changed.value) {
+ this.dispatchEvent(this.$event);
+ }
+ }
+ /**
+ * @function src
+ * @returns {string} src
+ */
+ get src () {
+ return this[internal.state].src;
+ }
+ /**
+ * @function src
+ * @returns {void}
+ */
+ set src (src) {
+ this[internal.setState]({src});
+ }
+ /**
+ * @function label
+ * @returns {string} label
+ */
+ get label () {
+ return this[internal.state].label;
+ }
+ /**
+ * @function label
+ * @returns {void}
+ */
+ set label (label) {
+ this[internal.setState]({label});
+ }
+}
+
+// Register
+customElements.define('se-spin-input', SeSpinInput);
diff --git a/src/editor/images/angle.svg b/src/editor/images/angle.svg
new file mode 100644
index 00000000..81a47b09
--- /dev/null
+++ b/src/editor/images/angle.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/src/editor/images/c_radius.svg b/src/editor/images/c_radius.svg
new file mode 100644
index 00000000..4c90d6f7
--- /dev/null
+++ b/src/editor/images/c_radius.svg
@@ -0,0 +1,5 @@
+