diff --git a/bin/web/js/config.js b/bin/web/js/config.js
index 07c6813..78059f0 100644
--- a/bin/web/js/config.js
+++ b/bin/web/js/config.js
@@ -45,6 +45,7 @@ const config = {
             'color',
             'letterDelays',
         ],
+        orderSpacing: 2,
         friendlyNames: {
             'fontFamily': 'Font Family',
             'textAlignButtonsHorizontal': '',
diff --git a/bin/web/js/layer.js b/bin/web/js/layer.js
index 9b5913c..4ccb295 100644
--- a/bin/web/js/layer.js
+++ b/bin/web/js/layer.js
@@ -512,7 +512,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                             const panelPropContainer = tp.getPanelPropContainer(panelPropTitle);
                             if (panelPropContainer !== null) {
                                 panelPropContainers[propKey] = panelPropContainer;
-                                const order_index = panelOrder.indexOf(propKey);
+                                const order_index = panelOrder.indexOf(propKey) * config.layer.orderSpacing;
                                 panelPropContainer.style.order = order_index;
                                 if (propKey === 'fontVariationAxes'
                                     || propKey === 'letterDelays') {
@@ -585,7 +585,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                             alignCenterButton.innerHTML = `<img src="/web/assets/align-center-horizontal.svg" alt="alignCenter" />`;
                             alignRightButton.innerHTML = `<img src="/web/assets/align-right.svg" alt="alignRight" />`;
                             panelControlsWrapper.append(alignButtons);
-                            const order_index = panelOrder.indexOf('alignButtonsHorizontal');
+                            const order_index = panelOrder.indexOf('alignButtonsHorizontal') * config.layer.orderSpacing;
                             alignButtons.style.order = order_index;
                             alignButtons.classList.add('alignButtons');
                             alignButtons.classList.add('alignButtonsHorizontal');
@@ -640,7 +640,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                             alignCenterButton.innerHTML = `<img src="/web/assets/align-center-vertical.svg" alt="alignCenter" />`;
                             alignBottomButton.innerHTML = `<img src="/web/assets/align-bottom.svg" alt="alignBottom" />`;
                             panelControlsWrapper.append(alignButtons);
-                            const order_index = panelOrder.indexOf('alignButtonsVertical');
+                            const order_index = panelOrder.indexOf('alignButtonsVertical') * config.layer.orderSpacing;
                             alignButtons.style.order = order_index;
                             alignButtons.classList.add('alignButtons');
                             alignButtons.classList.add('alignButtonsVertical');
@@ -708,7 +708,7 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                             textAlignCenterButton.innerHTML = `<img src="/web/assets/align-text-center.svg" alt="textAlignCenter" />`;
                             textAlignRightButton.innerHTML = `<img src="/web/assets/align-text-right.svg" alt="textAlignRight" />`;
                             textWrappingButton.innerHTML = `<img src="/web/assets/text-wrapping.svg" alt="textWrapping" />`;
-                            const order_index = panelOrder.indexOf('textAlignButtonsHorizontal');
+                            const order_index = panelOrder.indexOf('textAlignButtonsHorizontal') * config.layer.orderSpacing;
                             textAlignButtons.style.order = order_index; 
                             panelControlsWrapper.append(textAlignButtons);
                             textAlignButtons.classList.add('textAlignButtons');