diff --git a/src/events/intro/introSummary.js b/src/events/intro/introSummary.js
index 32357cf84a0a625aa450a5ab62c4a085485b8b9f..e0702d87ac428dcb282ee6d84e343e849453b259 100644
--- a/src/events/intro/introSummary.js
+++ b/src/events/intro/introSummary.js
@@ -305,7 +305,6 @@ App.Intro.summary = function() {
 		App.UI.DOM.appendNewElement("h2", el, "Economy");
 
 		let options = new App.UI.OptionsGroup();
-		let option;
 
 		V.localEcon = V.economy;
 		options.addOption("Economic climate", "baseDifficulty")
@@ -367,13 +366,10 @@ App.Intro.summary = function() {
 		}
 		/* closes V.customVariety is defined */
 
-		el.append(options.render());
 		if (V.customVariety) {
-			el.append(App.UI.nationalitiesDisplay());
+			options.addCustom(App.UI.nationalitiesDisplay());
 		}
 
-		options = new App.UI.OptionsGroup();
-
 		options.addOption("", "plot")
 			.addValue("Enable non-erotic events", 1).on().customDescription("Game mode: <strong>two-handed</strong>. Includes non-erotic events concerning the changing world.")
 			.addValue("Disable non-erotic events", 0).off().customDescription("Game mode: <strong>one-handed</strong>. No non-erotic events concerning the changing world.");
diff --git a/src/gui/css/options.css b/src/gui/css/options.css
index baea93813c6d493bf4826dc1a9ad342c525fdcf3..7ce9fb2705cc625456d3c1fb5e887d9fd6954241 100644
--- a/src/gui/css/options.css
+++ b/src/gui/css/options.css
@@ -103,4 +103,9 @@ table.invisible {
     border-collapse: separate;
     border-spacing: 5px;
     margin:1em auto;
-}
\ No newline at end of file
+}
+
+/* custom row */
+.options-group .custom-row {
+	grid-column-start: span 2;
+}
diff --git a/src/gui/options/options.js b/src/gui/options/options.js
index 16429633e0672b696031935d43860ebf9b499b9e..f4ad29f7a0ecf6353d51a332d513d23adb284d9d 100644
--- a/src/gui/options/options.js
+++ b/src/gui/options/options.js
@@ -2,8 +2,9 @@ App.UI.OptionsGroup = (function() {
 	class Row {
 		/**
 		 * @param {HTMLDivElement} container
+		 * @param {boolean} doubleColumn
 		 */
-		render(container) {} // jshint ignore:line
+		render(container, doubleColumn) {} // jshint ignore:line
 	}
 
 	/**
@@ -304,7 +305,6 @@ App.UI.OptionsGroup = (function() {
 	}
 
 	class Comment extends Row {
-
 		/**
 		 * @param {string} comment can be SC markup
 		 */
@@ -329,12 +329,38 @@ App.UI.OptionsGroup = (function() {
 		}
 	}
 
+	class CustomRow extends Row {
+		/**
+		 * @param {HTMLElement|string} element
+		 */
+		constructor(element) {
+			super();
+			this.element = element;
+		}
+
+		/**
+		 * @param {HTMLDivElement} container
+		 * @param {boolean}doubleColumn
+		 */
+		render(container, doubleColumn) {
+			/** @type {HTMLDivElement} */
+			const div = App.UI.DOM.makeElement("div", this.element, "custom-row");
+			let factor = 0.7;
+			if (doubleColumn) {
+				factor *= 0.5;
+			}
+			div.style.width = `${Math.round(window.innerWidth * factor)}px`;
+			container.append(div);
+		}
+	}
+
 	return class {
 		constructor() {
 			/**
 			 * @type {Array<Row>}
 			 */
 			this.rows = [];
+			this.doubleColumn = false;
 		}
 
 		/**
@@ -367,11 +393,28 @@ App.UI.OptionsGroup = (function() {
 			return this._addRow(option);
 		}
 
+		/**
+		 * @param {string} comment may contain SC markup
+		 * @returns {Comment}
+		 */
 		addComment(comment) {
 			const c = new Comment(comment);
 			return this._addRow(c);
 		}
 
+		/**
+		 * Adds a custom element taking up both rows
+		 *
+		 * @param {HTMLElement|string} element
+		 * @returns {CustomRow}
+		 */
+		addCustom(element) {
+			return this._addRow(new CustomRow(element));
+		}
+
+		/**
+		 * @returns {HTMLDivElement}
+		 */
 		render() {
 			const container = document.createElement("div");
 			container.className = "options-group";
@@ -380,7 +423,7 @@ App.UI.OptionsGroup = (function() {
 			}
 
 			for (/** @type {Row} */ const row of this.rows) {
-				row.render(container);
+				row.render(container, this.doubleColumn);
 			}
 
 			return container;