diff --git a/extension.json b/extension.json
index 61fd58ae..cc51b85b 100644
--- a/extension.json
+++ b/extension.json
@@ -116,7 +116,9 @@
 				"ext.uls.mediawiki",
 				"ext.uls.webfonts",
 				"mediawiki.api.parse",
-				"mediawiki.Uri"
+				"mediawiki.Uri",
+				"mediawiki.ui.checkbox",
+				"mediawiki.ui.button"
 			],
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
@@ -181,7 +183,9 @@
 				"ext.uls.ime",
 				"ext.uls.languagesettings",
 				"ext.uls.mediawiki",
-				"jquery.ime"
+				"jquery.ime",
+				"mediawiki.ui.button",
+				"mediawiki.ui.radio"
 			],
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
@@ -211,7 +215,8 @@
 				"ext.uls.buttons",
 				"ext.uls.messages",
 				"ext.uls.preferences",
-				"jquery.uls.grid"
+				"jquery.uls.grid",
+				"mediawiki.ui.button"
 			],
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css
index e02dcf54..a0fa04df 100644
--- a/resources/css/ext.uls.css
+++ b/resources/css/ext.uls.css
@@ -23,9 +23,12 @@
 }
 
 .uls-ui-languages button {
-	width: 23%;
+	width: 22%;
 	text-overflow: ellipsis;
-	margin-right: 4%;
+	margin-right: 2%;
+	white-space: nowrap;
+	overflow: hidden;
+	padding: 0.5em 0;
 }
 
 button.uls-more-languages {
diff --git a/resources/css/ext.uls.displaysettings.less b/resources/css/ext.uls.displaysettings.less
index 01dedd47..d8204705 100644
--- a/resources/css/ext.uls.displaysettings.less
+++ b/resources/css/ext.uls.displaysettings.less
@@ -21,24 +21,6 @@ div.display-settings-block {
 	z-index: 1;
 }
 
-.uls-button-group > button.button {
-	border-radius: 0;
-	float: left;
-	padding: 8px 10px;
-	min-width: 80px;
-	margin: 0;
-}
-
-.uls-button-group > button.button:first-child {
-	border-top-left-radius: 3px;
-	border-bottom-left-radius: 3px;
-}
-
-.uls-button-group > button.button:last-child {
-	border-top-right-radius: 3px;
-	border-bottom-right-radius: 3px;
-}
-
 .ext-uls-sub-panel {
 	border-top: 1px solid #EEEEEE;
 	padding-top: 25px;
@@ -64,10 +46,6 @@ div.display-settings-block {
 	font-size: 10pt;
 }
 
-.uls-font-select {
-	min-height: 16pt;
-}
-
 .uls-content-fonts:hover,
 .uls-ui-fonts:hover {
 	background-color: #F6F6F6;
diff --git a/resources/css/ext.uls.languagesettings.css b/resources/css/ext.uls.languagesettings.css
index 223d1a1a..4711c5c2 100644
--- a/resources/css/ext.uls.languagesettings.css
+++ b/resources/css/ext.uls.languagesettings.css
@@ -120,6 +120,11 @@
 	font-size: 10pt;
 }
 
+/* mediawiki.ui does not have a pressed state style. */
+#languagesettings-panels .mw-ui-pressed {
+	background-color: #D8D8D8;
+}
+
 .checkbox input[type="checkbox"] {
 	margin-left: 0;
 }
diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js
index 436ad276..555bfd1d 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -24,9 +24,10 @@
 
 		+ '<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 class="uls-button-group mw-ui-button-group">'
+		+ '<button id="uls-display-settings-language-tab" class="mw-ui-button mw-ui-pressed" '
+		+ 'data-i18n="ext-uls-display-settings-language-tab"></button>'
+		+ '<button id="uls-display-settings-fonts-tab" class="mw-ui-button" data-i18n="ext-uls-display-settings-fonts-tab"></button>'
 		+ '</div>'
 		+ '</div>'
 		+ '</div>'
@@ -81,14 +82,16 @@
 		// Webfonts enabling checkbox with label
 		+ '<div class="row">'
 		+ '<div class="eleven columns">'
-		+ '<label class="checkbox">'
+		+ '<div class="mw-ui-checkbox">'
 		+ '<input type="checkbox" id="webfonts-enable-checkbox" />'
+		+ '<label class="checkbox" for="webfonts-enable-checkbox" >'
 		+ '<strong data-i18n="ext-uls-webfonts-settings-title"></strong> '
 		+ '<span data-i18n="ext-uls-webfonts-settings-info"></span> '
 		+ '<a target="_blank" href="https://www.mediawiki.org/wiki/Universal_Language_Selector/WebFonts" data-i18n="ext-uls-webfonts-settings-info-link"></a>'
 		+ '</label>'
 		+ '</div>'
 		+ '</div>'
+		+ '</div>'
 
 		+ '</div>'; // End font settings section
 
@@ -243,8 +246,8 @@
 				return function () {
 					displaySettings.markDirty();
 					displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage;
-					$( 'div.uls-ui-languages button.button' ).removeClass( 'down' );
-					button.addClass( 'down' );
+					$( 'div.uls-ui-languages button.mw-ui-button' ).removeClass( 'mw-ui-pressed' );
+					button.addClass( 'mw-ui-pressed' );
 					displaySettings.prepareUIFonts();
 					displaySettings.preview( displaySettings.uiLanguage );
 				};
@@ -254,7 +257,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[ i ];
 				$button = $( '<button>' )
-					.addClass( 'button uls-language-button autonym' )
+					.addClass( 'mw-ui-button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -262,7 +265,7 @@
 					} );
 
 				if ( language === this.uiLanguage ) {
-					$button.addClass( 'down' );
+					$button.addClass( 'mw-ui-pressed' );
 				}
 
 				$button.data( 'language', language );
@@ -283,7 +286,7 @@
 			$languages = this.$template.find( 'div.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'button' ).text( '...' );
+				.addClass( 'mw-ui-button' ).text( '...' );
 
 			$languages.append( $moreLanguagesButton );
 			// Show the long language list to select a language for display settings
@@ -581,7 +584,7 @@
 			$tabButtons.on( 'click', function () {
 				var $button = $( this );
 
-				if ( $button.hasClass( 'down' ) ) {
+				if ( $button.hasClass( 'mw-ui-pressed' ) ) {
 					return;
 				}
 
@@ -596,8 +599,8 @@
 				} );
 
 				displaySettings.$parent.position();
-				$tabButtons.filter( '.down' ).removeClass( 'down' );
-				$button.addClass( 'down' );
+				$tabButtons.removeClass( 'mw-ui-pressed' );
+				$button.addClass( 'mw-ui-pressed' );
 
 			} );
 
diff --git a/resources/js/ext.uls.inputsettings.js b/resources/js/ext.uls.inputsettings.js
index d628ae0a..2a47444f 100644
--- a/resources/js/ext.uls.inputsettings.js
+++ b/resources/js/ext.uls.inputsettings.js
@@ -49,9 +49,9 @@
 
 		// Disable IME system button
 		+ '<div class="row">'
-		+ '<div class="eleven columns button uls-input-settings-disable-info"></div>'
-		+ '<div class="six columns button uls-input-settings-toggle">'
-		+ '<button class="active green button uls-input-toggle-button"></button>'
+		+ '<div class="eleven columns uls-input-settings-disable-info"></div>'
+		+ '<div class="ten columns uls-input-settings-toggle">'
+		+ '<button class="active mw-ui-constructive mw-ui-button uls-input-toggle-button"></button>'
 		+ '</div>'
 		+ '</div>';
 
@@ -120,7 +120,7 @@
 			$imeListTitle = this.$template.find( '.ext-uls-input-settings-imes-title' );
 			$imeListContainer = this.$template.find( '.uls-input-settings-inputmethods-list' );
 
-			$imeListContainer.find( 'label' ).remove();
+			$imeListContainer.empty();
 
 			if ( !imes ) {
 				$imeListContainer.append( $( '<label>' )
@@ -168,10 +168,7 @@
 				return $();
 			}
 
-			$imeLabel = $( '<label>' ).attr( {
-				'for': imeId,
-				'class': 'imelabel'
-			} );
+			$imeLabel = $( '<label>' ).attr( 'for', imeId );
 
 			$inputMethodItem = $( '<input type="radio">' ).attr( {
 				name: 'ime',
@@ -180,8 +177,6 @@
 			} )
 			.prop( 'checked', selected );
 
-			$imeLabel.append( $inputMethodItem );
-
 			if ( imeId === 'system' ) {
 				name = $.i18n( 'ext-uls-disable-input-method' );
 				description = '';
@@ -210,7 +205,9 @@
 				$helplink
 			);
 
-			return $imeLabel;
+			return $( '<div>' )
+				.addClass( 'mw-ui-radio twelve columns' )
+				.append( $inputMethodItem, $imeLabel );
 		},
 
 		/**
@@ -275,8 +272,8 @@
 						$.ime.preferences.setLanguage( language );
 					}
 					// Mark the button selected
-					$( '.uls-ui-languages .button' ).removeClass( 'down' );
-					button.addClass( 'down' );
+					$( '.uls-ui-languages .mw-ui-button' ).removeClass( 'mw-ui-pressed' );
+					button.addClass( 'mw-ui-pressed' );
 					inputSettings.prepareInputmethods( language );
 				};
 			}
@@ -287,7 +284,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[ i ];
 				$button = $( '<button>' )
-					.addClass( 'button uls-language-button autonym' )
+					.addClass( 'mw-ui-button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -319,7 +316,7 @@
 			$languages = this.$template.find( '.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'button' ).text( '...' );
+				.addClass( 'mw-ui-button' ).text( '...' );
 
 			$languages.append( $moreLanguagesButton );
 			// Show the long language list to select a language for ime settings
diff --git a/resources/js/ext.uls.languagesettings.js b/resources/js/ext.uls.languagesettings.js
index c18b6690..a27a67ec 100644
--- a/resources/js/ext.uls.languagesettings.js
+++ b/resources/js/ext.uls.languagesettings.js
@@ -35,8 +35,8 @@
 	// Apply and Cancel buttons
 	buttonsRow = '<div class="row language-settings-buttons">' +
 		'<div class="eleven columns">' +
-		'<button class="button uls-settings-cancel" data-i18n="ext-uls-language-settings-cancel"></button>' +
-		'<button class="button active blue uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>' +
+		'<button class="mw-ui-button uls-settings-cancel" data-i18n="ext-uls-language-settings-cancel"></button>' +
+		'<button class="mw-ui-button mw-ui-progressive active uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>' +
 		'</div>' +
 		'</div>' +
 		'</div>';