diff --git a/i18n/en.json b/i18n/en.json
index 7d1322ee..cf433314 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -7,6 +7,8 @@
 	"message-documentation": "qqq"
 },
 "ext-uls-display-settings-title": "Display settings",
+"ext-uls-display-settings-language-tab": "Language",
+"ext-uls-display-settings-fonts-tab": "Fonts",
 "ext-uls-display-settings-title-short": "Display",
 "ext-uls-display-settings-desc": "Set language used for menus and fonts.",
 "ext-uls-select-language-settings-icon-tooltip": "Language settings",
@@ -15,7 +17,7 @@
 "ext-uls-language-settings-apply": "Apply settings",
 "ext-uls-language-settings-cancel": "Cancel",
 "ext-uls-display-settings-font-settings": "Font settings",
-"ext-uls-display-settings-ui-language": "Language for display",
+"ext-uls-display-settings-ui-language": "Display language",
 "ext-uls-webfonts-settings-title": "Download font when needed",
 "ext-uls-webfonts-settings-info": "Webfonts will be downloaded for displaying text in special scripts.",
 "ext-uls-webfonts-settings-info-link": "More information",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 52f57cbf..0108faa0 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -9,6 +9,8 @@
 		]
 	},
 	"ext-uls-display-settings-title": "Display settings title text",
+	"ext-uls-display-settings-language-tab": "A button label, which shows the language selection buttons",
+	"ext-uls-display-settings-fonts-tab": "A button label, which shows the fonts settings",
 	"ext-uls-display-settings-title-short": "A short name for display settings screen. Can be a translation for 'Display'",
 	"ext-uls-display-settings-desc": "Short description about display settings.  'Set language used for menus and set fonts' is equivalent in meaning to the source message.",
 	"ext-uls-select-language-settings-icon-tooltip": "A tooltip for the icon that shows the language selector.",
diff --git a/resources/css/ext.uls.displaysettings.css b/resources/css/ext.uls.displaysettings.css
index d880a438..7586d9f1 100644
--- a/resources/css/ext.uls.displaysettings.css
+++ b/resources/css/ext.uls.displaysettings.css
@@ -10,6 +10,56 @@ div.display-settings-block {
 	cursor: pointer;
 }
 
+.uls-display-settings-tab-switcher {
+	text-align: center;
+}
+
+.uls-button-group {
+	display: inline-block;
+	position: relative;
+	padding: 0 0 0 0;
+	left: -20px;
+	z-index: 1;
+}
+
+.uls-button-group > button.button {
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+	-ms-border-radius: 0;
+	-o-border-radius: 0;
+	border-radius: 0;
+	float: left;
+	padding: 8px 10px;
+	min-width: 80px;
+	margin: 0;
+}
+
+.uls-button-group > button.button:first-child {
+	-moz-border-radius-topleft: 3px;
+	-webkit-border-top-left-radius: 3px;
+	border-top-left-radius: 3px;
+	-moz-border-radius-bottomleft: 3px;
+	-webkit-border-bottom-left-radius: 3px;
+	border-bottom-left-radius: 3px;
+}
+
+.uls-button-group > button.button:last-child {
+	-moz-border-radius-topright: 3px;
+	-webkit-border-top-right-radius: 3px;
+	border-top-right-radius: 3px;
+	-moz-border-radius-bottomright: 3px;
+	-webkit-border-bottom-right-radius: 3px;
+	border-bottom-right-radius: 3px;
+}
+
+.ext-uls-sub-panel {
+	border-top: 1px solid #EEEEEE;
+	padding-top: 25px;
+	top: -20px;
+	position:relative;
+	min-height: 150px;
+}
+
 .uls-font-label,
 .uls-font-select {
 	font-size: 10pt;
diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js
index 2fbde477..08709ed8 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -21,13 +21,19 @@
 	'use strict';
 
 	var template = '<div class="uls-display-settings">'
-		+ '<div class="row">' // Top "Display settings" title
-		+ '<div class="twelve columns">'
-		+ '<h3 data-i18n="ext-uls-display-settings-title"></h3>'
+
+		+ '<div class="row">' // Tab switcher buttons
+		+ '<div class="twelve columns uls-display-settings-tab-switcher">'
+		+ '<div class="uls-button-group">'
+		+ '<button id="uls-display-settings-language-tab" class="button down" data-i18n="ext-uls-display-settings-language-tab"></button>'
+		+ '<button id="uls-display-settings-fonts-tab" class="button" data-i18n="ext-uls-display-settings-fonts-tab"></button>'
+		+ '</div>'
 		+ '</div>'
 		+ '</div>'
 
-		// "Language for display", title above the buttons row
+		+ '<div class="ext-uls-sub-panel uls-display-settings-language-tab">' // Begin display language sub-panel
+
+		// "Display language", title above the buttons row
 		+ '<div class="row">'
 		+ '<div class="eleven columns">'
 		+ '<h4 data-i18n="ext-uls-display-settings-ui-language"></h4>'
@@ -39,6 +45,10 @@
 		+ '<div class="uls-ui-languages eleven columns"></div>'
 		+ '</div>'
 
+		+ '</div>' // End display language section
+
+		+ '<div class="ext-uls-sub-panel uls-display-settings-fonts-tab hide">' // Begin font settings section, hidden by default
+
 		// "Font settings" title
 		+ '<div class="row">'
 		+ '<div class="twelve columns">'
@@ -74,6 +84,8 @@
 		+ '<select id="ui-font-selector" class="four columns end uls-font-select"></select>'
 		+ '</div>'
 
+		+ '</div>' // End font settings section
+
 		// Separator
 		+ '<div class="row"></div>'
 
@@ -391,23 +403,18 @@
 		 */
 		listen: function () {
 			var displaySettings = this,
-				$contentFontSelector, $uiFontSelector,
-				oldFont;
-
-			$contentFontSelector = this.$template
-				.find( '#content-font-selector' );
-			$uiFontSelector = this.$template
-				.find( '#ui-font-selector' );
-
-			oldFont = $uiFontSelector.find( 'option:selected' ).val();
+				$contentFontSelector = this.$template.find( '#content-font-selector' ),
+				$uiFontSelector = this.$template.find( '#ui-font-selector' ),
+				oldFont = $uiFontSelector.find( 'option:selected' ).val(),
+				$tabButtons = displaySettings.$template.find( '.uls-display-settings-tab-switcher button' );
 
 			// TODO all these repeated selectors can be placed in object constructor.
 
-			this.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () {
+			displaySettings.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () {
 				displaySettings.apply();
 			} );
 
-			this.$template.find( 'button.uls-display-settings-cancel' ).on( 'click', function () {
+			displaySettings.$template.find( 'button.uls-display-settings-cancel' ).on( 'click', function () {
 				mw.webfonts.preferences.setFont( displaySettings.contentLanguage, oldFont );
 				displaySettings.$webfonts.refresh();
 
@@ -424,7 +431,7 @@
 				displaySettings.close();
 			} );
 
-			this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
+			displaySettings.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
 				displaySettings.enableApplyButton();
 
 				if ( this.checked ) {
@@ -462,6 +469,27 @@
 				displaySettings.$webfonts.refresh();
 			} );
 
+			$tabButtons.on( 'click', function () {
+				var $subPanels,
+					$button = $( this );
+
+				if ( $button.hasClass( 'down' ) ) {
+					return;
+				}
+
+				displaySettings.$template.find( '.ext-uls-sub-panel' ).each( function () {
+					var $subPanel = $( this );
+
+					if ( $subPanel.hasClass( $button.attr( 'id' ) ) ) {
+						$subPanel.removeClass( 'hide' );
+					} else {
+						$subPanel.addClass( 'hide' );
+					}
+				} );
+
+				$tabButtons.filter( '.down' ).removeClass( 'down');
+				$button.addClass( 'down' );
+			} );
 		},
 
 		/**