diff --git a/src/public/javascripts/services/sidebar.js b/src/public/javascripts/services/sidebar.js
index 7606b8035..4a8b8dbe7 100644
--- a/src/public/javascripts/services/sidebar.js
+++ b/src/public/javascripts/services/sidebar.js
@@ -79,14 +79,23 @@ class Sidebar {
                 const widget = new widgetClass(this.ctx, options, state);
 
                 if (await widget.isEnabled()) {
-                    const $el = await widget.render();
-
                     this.widgets.push(widget);
-                    this.$widgetContainer.append($el);
                 }
             }
             catch (e) {
-                messagingService.logError(`Error while loading widget ${widgetClass.name}: ${e.message}`);
+                messagingService.logError(`Error while creating widget ${widgetClass.name}: ${e.message}`);
+            }
+        }
+
+        this.widgets.sort((a, b) => a.getPosition() < b.getPosition() ? -1 : 1);
+
+        for (const widget of this.widgets) {
+            try {
+                const $el = await widget.render();
+                this.$widgetContainer.append($el);
+            }
+            catch (e) {
+                messagingService.logError(`Error while loading widget ${widget.widgetName}: ${e.message}`);
             }
         }
     }
diff --git a/src/public/javascripts/widgets/standard_widget.js b/src/public/javascripts/widgets/standard_widget.js
index 98452d404..9ec709365 100644
--- a/src/public/javascripts/widgets/standard_widget.js
+++ b/src/public/javascripts/widgets/standard_widget.js
@@ -36,6 +36,8 @@ class StandardWidget {
 
     getMaxHeight() { return null; }
 
+    getPosition() { return this.widgetOptions.position; }
+
     async render() {
         const widgetId = `tab-${this.ctx.tabId}-widget-${this.widgetName}`;