diff --git a/www/server/app.js b/www/server/app.js
index 5e940a27e..71c37c273 100644
--- a/www/server/app.js
+++ b/www/server/app.js
@@ -481,54 +481,54 @@ app.get('/api/getAddonsOptions', (req, res) => {
 		analog1256DrdyPin: -1,
 		analog1256AnalogMax: 3.3,
 		analog1256EnableTriggers: false,
-        encoderOneEnabled: 0,
-        encoderOnePinA: -1,
-        encoderOnePinB: -1,
-        encoderOneMode: 0,
-        encoderOnePPR: 24,
-        encoderOneResetAfter: 0,
-        encoderOneAllowWrapAround: false,
-        encoderOneMultiplier: 1,
-        encoderTwoEnabled: 0,
-        encoderTwoPinA: -1,
-        encoderTwoPinB: -1,
-        encoderTwoMode: 0,
-        encoderTwoPPR: 24,
-        encoderTwoResetAfter: 0,
-        encoderTwoAllowWrapAround: false,
-        encoderTwoMultiplier: 1,
-        RotaryAddonEnabled: 1,
-        pcf8575Block: 0,
-        PCF8575AddonEnabled: 1,
+		encoderOneEnabled: 0,
+		encoderOnePinA: -1,
+		encoderOnePinB: -1,
+		encoderOneMode: 0,
+		encoderOnePPR: 24,
+		encoderOneResetAfter: 0,
+		encoderOneAllowWrapAround: false,
+		encoderOneMultiplier: 1,
+		encoderTwoEnabled: 0,
+		encoderTwoPinA: -1,
+		encoderTwoPinB: -1,
+		encoderTwoMode: 0,
+		encoderTwoPPR: 24,
+		encoderTwoResetAfter: 0,
+		encoderTwoAllowWrapAround: false,
+		encoderTwoMultiplier: 1,
+		RotaryAddonEnabled: 1,
+		pcf8575Block: 0,
+		PCF8575AddonEnabled: 1,
 		usedPins: Object.values(picoController),
 	});
 });
 
 app.get('/api/getExpansionPins', (req, res) => {
-    return res.send({
-        "pins": {
-            "pcf8575": [
-                {
-                    "pin00": {"option": 2,"direction": 0},
-                    "pin01": {"option": -10,"direction": 0},
-                    "pin02": {"option": -10,"direction": 0},
-                    "pin03": {"option": -10,"direction": 0},
-                    "pin04": {"option": -10,"direction": 0},
-                    "pin05": {"option": -10,"direction": 0},
-                    "pin06": {"option": -10,"direction": 0},
-                    "pin07": {"option": -10,"direction": 0},
-                    "pin08": {"option": -10,"direction": 0},
-                    "pin09": {"option": -10,"direction": 0},
-                    "pin10": {"option": -10,"direction": 0},
-                    "pin11": {"option": -10,"direction": 0},
-                    "pin12": {"option": -10,"direction": 0},
-                    "pin13": {"option": -10,"direction": 0},
-                    "pin14": {"option": -10,"direction": 0},
-                    "pin15": {"option": -10,"direction": 0}
-                }
-            ]
-        }
-    });
+	return res.send({
+		pins: {
+			pcf8575: [
+				{
+					pin00: { option: 2, direction: 0 },
+					pin01: { option: -10, direction: 0 },
+					pin02: { option: -10, direction: 0 },
+					pin03: { option: -10, direction: 0 },
+					pin04: { option: -10, direction: 0 },
+					pin05: { option: -10, direction: 0 },
+					pin06: { option: -10, direction: 0 },
+					pin07: { option: -10, direction: 0 },
+					pin08: { option: -10, direction: 0 },
+					pin09: { option: -10, direction: 0 },
+					pin10: { option: -10, direction: 0 },
+					pin11: { option: -10, direction: 0 },
+					pin12: { option: -10, direction: 0 },
+					pin13: { option: -10, direction: 0 },
+					pin14: { option: -10, direction: 0 },
+					pin15: { option: -10, direction: 0 },
+				},
+			],
+		},
+	});
 });
 
 app.get('/api/getMacroAddonOptions', (req, res) => {
@@ -553,26 +553,61 @@ app.get('/api/getMacroAddonOptions', (req, res) => {
 					},
 				],
 			},
-			{ enabled: 0, exclusive: 1, interruptible: 1, showFrames: 1,
-				macroType: 1, useMacroTriggerButton: 0,
-				macroTriggerButton: 0, macroLabel: '',
-				macroInputs: [],},
-			{ enabled: 0, exclusive: 1, interruptible: 1, showFrames: 1,
-				macroType: 1, useMacroTriggerButton: 0,
-				macroTriggerButton: 0, macroLabel: '',
-				macroInputs: [],},
-			{ enabled: 0, exclusive: 1, interruptible: 1, showFrames: 1,
-				macroType: 1, useMacroTriggerButton: 0,
-				macroTriggerButton: 0, macroLabel: '',
-				macroInputs: [],},
-			{ enabled: 0, exclusive: 1, interruptible: 1, showFrames: 1,
-				macroType: 1, useMacroTriggerButton: 0,
-				macroTriggerButton: 0, macroLabel: '',
-				macroInputs: [],},
-			{ enabled: 0, exclusive: 1, interruptible: 1, showFrames: 1,
-				macroType: 1, useMacroTriggerButton: 0,
-				macroTriggerButton: 0, macroLabel: '',
-				macroInputs: [],},
+			{
+				enabled: 0,
+				exclusive: 1,
+				interruptible: 1,
+				showFrames: 1,
+				macroType: 1,
+				useMacroTriggerButton: 0,
+				macroTriggerButton: 0,
+				macroLabel: '',
+				macroInputs: [],
+			},
+			{
+				enabled: 0,
+				exclusive: 1,
+				interruptible: 1,
+				showFrames: 1,
+				macroType: 1,
+				useMacroTriggerButton: 0,
+				macroTriggerButton: 0,
+				macroLabel: '',
+				macroInputs: [],
+			},
+			{
+				enabled: 0,
+				exclusive: 1,
+				interruptible: 1,
+				showFrames: 1,
+				macroType: 1,
+				useMacroTriggerButton: 0,
+				macroTriggerButton: 0,
+				macroLabel: '',
+				macroInputs: [],
+			},
+			{
+				enabled: 0,
+				exclusive: 1,
+				interruptible: 1,
+				showFrames: 1,
+				macroType: 1,
+				useMacroTriggerButton: 0,
+				macroTriggerButton: 0,
+				macroLabel: '',
+				macroInputs: [],
+			},
+			{
+				enabled: 0,
+				exclusive: 1,
+				interruptible: 1,
+				showFrames: 1,
+				macroType: 1,
+				useMacroTriggerButton: 0,
+				macroTriggerButton: 0,
+				macroLabel: '',
+				macroInputs: [],
+			},
 		],
 		macroBoardLedEnabled: 1,
 	});
@@ -608,34 +643,80 @@ app.get('/api/getButtonLayoutCustomOptions', (req, res) => {
 
 app.get('/api/getButtonLayoutDefs', (req, res) => {
 	return res.send({
-		"buttonLayout":{
-			"BUTTON_LAYOUT_STICK":0,"BUTTON_LAYOUT_STICKLESS":1,"BUTTON_LAYOUT_BUTTONS_ANGLED":2,
-			"BUTTON_LAYOUT_BUTTONS_BASIC":3,"BUTTON_LAYOUT_KEYBOARD_ANGLED":4,"BUTTON_LAYOUT_KEYBOARDA":5,
-			"BUTTON_LAYOUT_DANCEPADA":6,"BUTTON_LAYOUT_TWINSTICKA":7,"BUTTON_LAYOUT_BLANKA":8,
-			"BUTTON_LAYOUT_VLXA":9,"BUTTON_LAYOUT_FIGHTBOARD_STICK":10,"BUTTON_LAYOUT_FIGHTBOARD_MIRRORED":11,
-			"BUTTON_LAYOUT_CUSTOMA":12,"BUTTON_LAYOUT_OPENCORE0WASDA":13,"BUTTON_LAYOUT_STICKLESS_13":14,
-			"BUTTON_LAYOUT_STICKLESS_16":15,"BUTTON_LAYOUT_STICKLESS_14":16,"BUTTON_LAYOUT_DANCEPAD_DDR_LEFT":17,
-			"BUTTON_LAYOUT_DANCEPAD_DDR_SOLO":18,"BUTTON_LAYOUT_DANCEPAD_PIU_LEFT":19,"BUTTON_LAYOUT_POPN_A":20,
-			"BUTTON_LAYOUT_TAIKO_A":21,"BUTTON_LAYOUT_BM_TURNTABLE_A":22,"BUTTON_LAYOUT_BM_5KEY_A":23,
-			"BUTTON_LAYOUT_BM_7KEY_A":24,"BUTTON_LAYOUT_GITADORA_FRET_A":25,"BUTTON_LAYOUT_GITADORA_STRUM_A":26,
-			"BUTTON_LAYOUT_BOARD_DEFINED_A":27,"BUTTON_LAYOUT_BANDHERO_FRET_A":28,"BUTTON_LAYOUT_BANDHERO_STRUM_A":29,
-            "BUTTON_LAYOUT_6GAWD_A":30,"BUTTON_LAYOUT_6GAWD_ALLBUTTON_A":31,"BUTTON_LAYOUT_6GAWD_ALLBUTTONPLUS_A":32
+		buttonLayout: {
+			BUTTON_LAYOUT_STICK: 0,
+			BUTTON_LAYOUT_STICKLESS: 1,
+			BUTTON_LAYOUT_BUTTONS_ANGLED: 2,
+			BUTTON_LAYOUT_BUTTONS_BASIC: 3,
+			BUTTON_LAYOUT_KEYBOARD_ANGLED: 4,
+			BUTTON_LAYOUT_KEYBOARDA: 5,
+			BUTTON_LAYOUT_DANCEPADA: 6,
+			BUTTON_LAYOUT_TWINSTICKA: 7,
+			BUTTON_LAYOUT_BLANKA: 8,
+			BUTTON_LAYOUT_VLXA: 9,
+			BUTTON_LAYOUT_FIGHTBOARD_STICK: 10,
+			BUTTON_LAYOUT_FIGHTBOARD_MIRRORED: 11,
+			BUTTON_LAYOUT_CUSTOMA: 12,
+			BUTTON_LAYOUT_OPENCORE0WASDA: 13,
+			BUTTON_LAYOUT_STICKLESS_13: 14,
+			BUTTON_LAYOUT_STICKLESS_16: 15,
+			BUTTON_LAYOUT_STICKLESS_14: 16,
+			BUTTON_LAYOUT_DANCEPAD_DDR_LEFT: 17,
+			BUTTON_LAYOUT_DANCEPAD_DDR_SOLO: 18,
+			BUTTON_LAYOUT_DANCEPAD_PIU_LEFT: 19,
+			BUTTON_LAYOUT_POPN_A: 20,
+			BUTTON_LAYOUT_TAIKO_A: 21,
+			BUTTON_LAYOUT_BM_TURNTABLE_A: 22,
+			BUTTON_LAYOUT_BM_5KEY_A: 23,
+			BUTTON_LAYOUT_BM_7KEY_A: 24,
+			BUTTON_LAYOUT_GITADORA_FRET_A: 25,
+			BUTTON_LAYOUT_GITADORA_STRUM_A: 26,
+			BUTTON_LAYOUT_BOARD_DEFINED_A: 27,
+			BUTTON_LAYOUT_BANDHERO_FRET_A: 28,
+			BUTTON_LAYOUT_BANDHERO_STRUM_A: 29,
+			BUTTON_LAYOUT_6GAWD_A: 30,
+			BUTTON_LAYOUT_6GAWD_ALLBUTTON_A: 31,
+			BUTTON_LAYOUT_6GAWD_ALLBUTTONPLUS_A: 32,
+		},
+		buttonLayoutRight: {
+			BUTTON_LAYOUT_ARCADE: 0,
+			BUTTON_LAYOUT_STICKLESSB: 1,
+			BUTTON_LAYOUT_BUTTONS_ANGLEDB: 2,
+			BUTTON_LAYOUT_VEWLIX: 3,
+			BUTTON_LAYOUT_VEWLIX7: 4,
+			BUTTON_LAYOUT_CAPCOM: 5,
+			BUTTON_LAYOUT_CAPCOM6: 6,
+			BUTTON_LAYOUT_SEGA2P: 7,
+			BUTTON_LAYOUT_NOIR8: 8,
+			BUTTON_LAYOUT_KEYBOARDB: 9,
+			BUTTON_LAYOUT_DANCEPADB: 10,
+			BUTTON_LAYOUT_TWINSTICKB: 11,
+			BUTTON_LAYOUT_BLANKB: 12,
+			BUTTON_LAYOUT_VLXB: 13,
+			BUTTON_LAYOUT_FIGHTBOARD: 14,
+			BUTTON_LAYOUT_FIGHTBOARD_STICK_MIRRORED: 15,
+			BUTTON_LAYOUT_CUSTOMB: 16,
+			BUTTON_LAYOUT_KEYBOARD8B: 17,
+			BUTTON_LAYOUT_OPENCORE0WASDB: 18,
+			BUTTON_LAYOUT_STICKLESS_13B: 19,
+			BUTTON_LAYOUT_STICKLESS_16B: 20,
+			BUTTON_LAYOUT_STICKLESS_14B: 21,
+			BUTTON_LAYOUT_DANCEPAD_DDR_RIGHT: 22,
+			BUTTON_LAYOUT_DANCEPAD_PIU_RIGHT: 23,
+			BUTTON_LAYOUT_POPN_B: 24,
+			BUTTON_LAYOUT_TAIKO_B: 25,
+			BUTTON_LAYOUT_BM_TURNTABLE_B: 26,
+			BUTTON_LAYOUT_BM_5KEY_B: 27,
+			BUTTON_LAYOUT_BM_7KEY_B: 28,
+			BUTTON_LAYOUT_GITADORA_FRET_B: 29,
+			BUTTON_LAYOUT_GITADORA_STRUM_B: 30,
+			BUTTON_LAYOUT_BOARD_DEFINED_B: 31,
+			BUTTON_LAYOUT_BANDHERO_FRET_B: 32,
+			BUTTON_LAYOUT_BANDHERO_STRUM_B: 33,
+			BUTTON_LAYOUT_6GAWD_B: 34,
+			BUTTON_LAYOUT_6GAWD_ALLBUTTON_B: 35,
+			BUTTON_LAYOUT_6GAWD_ALLBUTTONPLUS_B: 36,
 		},
-		"buttonLayoutRight":{
-			"BUTTON_LAYOUT_ARCADE":0,"BUTTON_LAYOUT_STICKLESSB":1,"BUTTON_LAYOUT_BUTTONS_ANGLEDB":2,
-			"BUTTON_LAYOUT_VEWLIX":3,"BUTTON_LAYOUT_VEWLIX7":4,"BUTTON_LAYOUT_CAPCOM":5,
-			"BUTTON_LAYOUT_CAPCOM6":6,"BUTTON_LAYOUT_SEGA2P":7,"BUTTON_LAYOUT_NOIR8":8,
-			"BUTTON_LAYOUT_KEYBOARDB":9,"BUTTON_LAYOUT_DANCEPADB":10,"BUTTON_LAYOUT_TWINSTICKB":11,
-			"BUTTON_LAYOUT_BLANKB":12,"BUTTON_LAYOUT_VLXB":13,"BUTTON_LAYOUT_FIGHTBOARD":14,
-			"BUTTON_LAYOUT_FIGHTBOARD_STICK_MIRRORED":15,"BUTTON_LAYOUT_CUSTOMB":16,
-			"BUTTON_LAYOUT_KEYBOARD8B":17,"BUTTON_LAYOUT_OPENCORE0WASDB":18,"BUTTON_LAYOUT_STICKLESS_13B":19,
-			"BUTTON_LAYOUT_STICKLESS_16B":20,"BUTTON_LAYOUT_STICKLESS_14B":21,"BUTTON_LAYOUT_DANCEPAD_DDR_RIGHT":22,
-			"BUTTON_LAYOUT_DANCEPAD_PIU_RIGHT":23,"BUTTON_LAYOUT_POPN_B":24,"BUTTON_LAYOUT_TAIKO_B":25,
-			"BUTTON_LAYOUT_BM_TURNTABLE_B":26,"BUTTON_LAYOUT_BM_5KEY_B":27,"BUTTON_LAYOUT_BM_7KEY_B":28,
-			"BUTTON_LAYOUT_GITADORA_FRET_B":29,"BUTTON_LAYOUT_GITADORA_STRUM_B":30,"BUTTON_LAYOUT_BOARD_DEFINED_B":31,
-            "BUTTON_LAYOUT_BANDHERO_FRET_B":32,"BUTTON_LAYOUT_BANDHERO_STRUM_B":33,"BUTTON_LAYOUT_6GAWD_B":34,
-            "BUTTON_LAYOUT_6GAWD_ALLBUTTON_B":35,"BUTTON_LAYOUT_6GAWD_ALLBUTTONPLUS_B":36
-		}
 	});
 });
 
diff --git a/www/src/Addons/Analog1256.tsx b/www/src/Addons/Analog1256.tsx
index 761883001..42d6cf49c 100644
--- a/www/src/Addons/Analog1256.tsx
+++ b/www/src/Addons/Analog1256.tsx
@@ -13,16 +13,12 @@ import { SPI_BLOCKS } from '../Data/Peripherals';
 import WebApi from '../Services/WebApi';
 
 export const analog1256Scheme = {
-	Analog1256Enabled: yup
-		.number()
-		.label('Analog1256 Input Enabled'),
+	Analog1256Enabled: yup.number().label('Analog1256 Input Enabled'),
 	analog1256Block: yup
 		.number()
 		.label('Analog1256 Block')
 		.validateSelectionWhenValue('Analog1256Enabled', SPI_BLOCKS),
-	analog1256CsPin: yup
-		.number()
-		.label('Analog1256 CS Pin'),
+	analog1256CsPin: yup.number().label('Analog1256 CS Pin'),
 	analog1256DrdyPin: yup
 		.number()
 		.label('Analog1256 DRDY Pin')
@@ -39,7 +35,12 @@ export const analog1256State = {
 };
 
 const Analog1256 = ({ values, errors, handleChange, handleCheckbox }) => {
-	const { getAvailablePeripherals, getSelectedPeripheral, setLoading, usedPins } = useContext(AppContext);
+	const {
+		getAvailablePeripherals,
+		getSelectedPeripheral,
+		setLoading,
+		usedPins,
+	} = useContext(AppContext);
 	const [csPins, setCsPins] = useState([]);
 
 	const { t } = useTranslation();
@@ -53,13 +54,20 @@ const Analog1256 = ({ values, errors, handleChange, handleCheckbox }) => {
 		const csPins = [];
 
 		const peripheralOptions = await WebApi.getPeripheralOptions(setLoading);
-		if (peripheralOptions.peripheral[`spi${spiBlock}`] && peripheralOptions.peripheral[`spi${spiBlock}`].cs > -1)
-			csPins.push({ pin: peripheralOptions.peripheral[`spi${spiBlock}`].cs, hwcs: true });
+		if (
+			peripheralOptions.peripheral[`spi${spiBlock}`] &&
+			peripheralOptions.peripheral[`spi${spiBlock}`].cs > -1
+		)
+			csPins.push({
+				pin: peripheralOptions.peripheral[`spi${spiBlock}`].cs,
+				hwcs: true,
+			});
 
-		const availablePins = [...Array(boards[import.meta.env.VITE_GP2040_BOARD].maxPin + 1).keys()]
-			.filter(p => (usedPins || []).indexOf(p) === -1) // Filter out used pins
+		const availablePins = [
+			...Array(boards[import.meta.env.VITE_GP2040_BOARD].maxPin + 1).keys(),
+		].filter((p) => (usedPins || []).indexOf(p) === -1); // Filter out used pins
 
-		csPins.push(...availablePins.map(pin => ({ pin, hwcs: false })));
+		csPins.push(...availablePins.map((pin) => ({ pin, hwcs: false })));
 
 		return csPins;
 	};
@@ -77,9 +85,7 @@ const Analog1256 = ({ values, errors, handleChange, handleCheckbox }) => {
 		<Section title={t('AddonsConfig:analog1256-header-text')}>
 			<div
 				id="Analog1256InputOptions"
-				hidden={
-					!(values.Analog1256Enabled && getAvailablePeripherals('spi'))
-				}
+				hidden={!(values.Analog1256Enabled && getAvailablePeripherals('spi'))}
 			>
 				<Row className="mb-3">
 					{getAvailablePeripherals('spi') ? (
@@ -113,7 +119,10 @@ const Analog1256 = ({ values, errors, handleChange, handleCheckbox }) => {
 						onChange={handleChange}
 					>
 						{csPins.map((p, i) => (
-							<option key={`cs-pin-select-${i}`} value={p.pin}>{p.pin}{p.hwcs ? ' (HW)' : ''}</option>
+							<option key={`cs-pin-select-${i}`} value={p.pin}>
+								{p.pin}
+								{p.hwcs ? ' (HW)' : ''}
+							</option>
 						))}
 					</FormSelect>
 					<FormControl
@@ -164,8 +173,7 @@ const Analog1256 = ({ values, errors, handleChange, handleCheckbox }) => {
 					reverse
 					isInvalid={false}
 					checked={
-						Boolean(values.Analog1256Enabled) &&
-						getAvailablePeripherals('spi')
+						Boolean(values.Analog1256Enabled) && getAvailablePeripherals('spi')
 					}
 					onChange={(e) => {
 						handleCheckbox('Analog1256Enabled', values);
diff --git a/www/src/Addons/DualDirection.tsx b/www/src/Addons/DualDirection.tsx
index a2a7a1485..12424ed33 100644
--- a/www/src/Addons/DualDirection.tsx
+++ b/www/src/Addons/DualDirection.tsx
@@ -57,11 +57,7 @@ const DualDirection = ({ values, errors, handleChange, handleCheckbox }) => {
 				hidden={!values.DualDirectionalInputEnabled}
 			>
 				<Row className="mb-3">
-					<p>
-						{t(
-							'AddonsConfig:pin-config-moved-to-core-text',
-						)}
-					</p>
+					<p>{t('AddonsConfig:pin-config-moved-to-core-text')}</p>
 					<FormSelect
 						label={t('AddonsConfig:dual-directional-input-dpad-mode-label')}
 						name="dualDirDpadMode"
diff --git a/www/src/Addons/InputHistory.tsx b/www/src/Addons/InputHistory.tsx
index 512259109..1c59f6d24 100644
--- a/www/src/Addons/InputHistory.tsx
+++ b/www/src/Addons/InputHistory.tsx
@@ -37,10 +37,7 @@ const InputHistory = ({ values, errors, handleChange, handleCheckbox }) => {
 	const { t } = useTranslation();
 	return (
 		<Section title={t('AddonsConfig:input-history-header-text')}>
-			<div
-				id="InputHistoryOptions"
-				hidden={!values.InputHistoryAddonEnabled}
-			>
+			<div id="InputHistoryOptions" hidden={!values.InputHistoryAddonEnabled}>
 				<Row className="mb-3">
 					<FormControl
 						type="number"
diff --git a/www/src/Addons/Joystick.tsx b/www/src/Addons/Joystick.tsx
index 93a21e505..2bbfac475 100644
--- a/www/src/Addons/Joystick.tsx
+++ b/www/src/Addons/Joystick.tsx
@@ -27,11 +27,7 @@ const Joystick = ({ values, errors, handleChange, handleCheckbox }) => {
 		<Section title={t('AddonsConfig:joystick-selection-slider-header-text')}>
 			<div id="JSliderInputOptions" hidden={!values.JSliderInputEnabled}>
 				<Row className="mb-3">
-					<p>
-						{t(
-							'AddonsConfig:pin-config-moved-to-core-text',
-						)}
-					</p>
+					<p>{t('AddonsConfig:pin-config-moved-to-core-text')}</p>
 					<FormSelect
 						label={t('AddonsConfig:joystick-selection-slider-mode-zero-label')}
 						name="sliderModeZero"
diff --git a/www/src/Addons/Keyboard.tsx b/www/src/Addons/Keyboard.tsx
index 83b3c47a9..7ec48491f 100644
--- a/www/src/Addons/Keyboard.tsx
+++ b/www/src/Addons/Keyboard.tsx
@@ -50,7 +50,9 @@ const Keyboard = ({
 		<Section title={t('AddonsConfig:keyboard-host-header-text')}>
 			<div
 				id="KeyboardHostAddonOptions"
-				hidden={!(values.KeyboardHostAddonEnabled && getAvailablePeripherals('usb'))}
+				hidden={
+					!(values.KeyboardHostAddonEnabled && getAvailablePeripherals('usb'))
+				}
 			>
 				<Row className="mb-3">
 					<p>{t('AddonsConfig:keyboard-host-sub-header-text')}</p>
@@ -62,22 +64,32 @@ const Keyboard = ({
 					/>
 				</Row>
 			</div>
-            {getAvailablePeripherals('usb') ?
-			<FormCheck
-				label={t('Common:switch-enabled')}
-				type="switch"
-				id="KeyboardHostAddonButton"
-				reverse
-				isInvalid={false}
-				checked={Boolean(values.KeyboardHostAddonEnabled)}
-				onChange={(e) => {
-					handleCheckbox('KeyboardHostAddonEnabled', values);
-					handleChange(e);
-				}}
-			/>
-            :
-            <FormLabel><Trans ns="PeripheralMapping" i18nKey="peripheral-toggle-unavailable" values={{'name':'USB'}}><NavLink exact="true" to="/peripheral-mapping">{t('PeripheralMapping:header-text')}</NavLink></Trans></FormLabel>
-            }
+			{getAvailablePeripherals('usb') ? (
+				<FormCheck
+					label={t('Common:switch-enabled')}
+					type="switch"
+					id="KeyboardHostAddonButton"
+					reverse
+					isInvalid={false}
+					checked={Boolean(values.KeyboardHostAddonEnabled)}
+					onChange={(e) => {
+						handleCheckbox('KeyboardHostAddonEnabled', values);
+						handleChange(e);
+					}}
+				/>
+			) : (
+				<FormLabel>
+					<Trans
+						ns="PeripheralMapping"
+						i18nKey="peripheral-toggle-unavailable"
+						values={{ name: 'USB' }}
+					>
+						<NavLink exact="true" to="/peripheral-mapping">
+							{t('PeripheralMapping:header-text')}
+						</NavLink>
+					</Trans>
+				</FormLabel>
+			)}
 		</Section>
 	);
 };
diff --git a/www/src/Addons/PCF8575.tsx b/www/src/Addons/PCF8575.tsx
index fdf6b3d54..fdb40e121 100644
--- a/www/src/Addons/PCF8575.tsx
+++ b/www/src/Addons/PCF8575.tsx
@@ -28,15 +28,21 @@ import { getButtonLabels } from '../Data/Buttons';
 
 import {
 	BUTTON_ACTIONS,
-    PIN_DIRECTIONS,
-//	NON_SELECTABLE_BUTTON_ACTIONS,
+	PIN_DIRECTIONS,
+	//	NON_SELECTABLE_BUTTON_ACTIONS,
 	PinActionValues,
-    PinDirectionValues,
+	PinDirectionValues,
 } from '../Data/Pins';
 // currently using only the gamepad values here
-const NON_SELECTABLE_BUTTON_ACTIONS = [-5,0,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39];
+const NON_SELECTABLE_BUTTON_ACTIONS = [
+	-5, 0, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36,
+	37, 38, 39,
+];
 
-type PinCell = [string, {option: PinActionValues, direction: PinDirectionValues}];
+type PinCell = [
+	string,
+	{ option: PinActionValues; direction: PinDirectionValues },
+];
 type PinRow = [PinCell, PinCell];
 type PinList = [PinRow];
 
@@ -45,7 +51,7 @@ export const pcf8575Scheme = {
 		.number()
 		.required()
 		.label('PCF8575 IO Add-On Enabled'),
-    pcf8575Block: yup
+	pcf8575Block: yup
 		.number()
 		.required()
 		.label('PCF8575 I2C Block')
@@ -54,29 +60,28 @@ export const pcf8575Scheme = {
 
 export const pcf8575State = {
 	PCF8575AddonEnabled: 0,
-    pcf8575Block: 0,
+	pcf8575Block: 0,
 };
 
-const getOption = (foo,actionId) => {
-    return {
-        label: invert(BUTTON_ACTIONS)[actionId],
-        value: actionId,
-    }
+const getOption = (foo, actionId) => {
+	return {
+		label: invert(BUTTON_ACTIONS)[actionId],
+		value: actionId,
+	};
 };
 
 const getPinDirection = (dir) => ({
-    label: invert(PIN_DIRECTIONS)[dir],
-    value: dir
+	label: invert(PIN_DIRECTIONS)[dir],
+	value: dir,
 });
 
 const isNonSelectable = (value) =>
 	NON_SELECTABLE_BUTTON_ACTIONS.includes(value);
 
-const pinDirections = Object.entries(PIN_DIRECTIONS)
-	.map(([key, value]) => ({
-		label: key,
-		value,
-	}));
+const pinDirections = Object.entries(PIN_DIRECTIONS).map(([key, value]) => ({
+	label: key,
+	value,
+}));
 
 const options = Object.entries(BUTTON_ACTIONS)
 	.filter(([, value]) => !isNonSelectable(value))
@@ -86,200 +91,226 @@ const options = Object.entries(BUTTON_ACTIONS)
 	}));
 
 type ExpansionPinsFormTypes = {
-    savePins: () => void;
-    pins: { [key: string]: [ { [key: string]: { option: PinActionValues, direction: PinDirectionValues } } ] };
-    setPinAction: (expansion: string, index: number, pin: string, action: PinActionValues) => void;
-    setPinDirection: (expansion: string, index: number, pin: string, dir: PinDirectionValues) => void;
-    expansionType: string;
+	savePins: () => void;
+	pins: {
+		[key: string]: [
+			{
+				[key: string]: {
+					option: PinActionValues;
+					direction: PinDirectionValues;
+				};
+			},
+		];
+	};
+	setPinAction: (
+		expansion: string,
+		index: number,
+		pin: string,
+		action: PinActionValues,
+	) => void;
+	setPinDirection: (
+		expansion: string,
+		index: number,
+		pin: string,
+		dir: PinDirectionValues,
+	) => void;
+	expansionType: string;
 };
 
-const ExpansionPinsForm = ({ savePins, pins, setPinAction, setPinDirection, expansionType }: ExpansionPinsFormTypes) => {
-    const { buttonLabels } = useContext(AppContext);
-    const [saveMessage, setSaveMessage] = useState('');
+const ExpansionPinsForm = ({
+	savePins,
+	pins,
+	setPinAction,
+	setPinDirection,
+	expansionType,
+}: ExpansionPinsFormTypes) => {
+	const { buttonLabels } = useContext(AppContext);
+	const [saveMessage, setSaveMessage] = useState('');
 
-    const { buttonLabelType, swapTpShareLabels } = buttonLabels;
-    const CURRENT_BUTTONS = getButtonLabels(buttonLabelType, swapTpShareLabels);
-    const buttonNames = omit(CURRENT_BUTTONS, ['label', 'value']);
-    const { t } = useTranslation('');
+	const { buttonLabelType, swapTpShareLabels } = buttonLabels;
+	const CURRENT_BUTTONS = getButtonLabels(buttonLabelType, swapTpShareLabels);
+	const buttonNames = omit(CURRENT_BUTTONS, ['label', 'value']);
+	const { t } = useTranslation('');
 
-    const handleSave = async (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        try {
-            await savePins();
-            setSaveMessage(t('Common:saved-success-message'));
-        } catch (error) {
-            setSaveMessage(t('Common:saved-error-message'));
-        }
-    };
+	const handleSave = async (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		try {
+			await savePins();
+			setSaveMessage(t('Common:saved-success-message'));
+		} catch (error) {
+			setSaveMessage(t('Common:saved-error-message'));
+		}
+	};
 
-    const pinList = useMemo<PinList>(() => {
-        if (pins && pins[expansionType]) {
-            const pinArray = Object.entries(pins[expansionType][0]);
-            return zip(
-                pinArray.slice(0, pinArray.length / 2),
-                pinArray.slice(pinArray.length / 2, pinArray.length),
-            );
-        }
-        return [];
-    }, [pins]);
+	const pinList = useMemo<PinList>(() => {
+		if (pins && pins[expansionType]) {
+			const pinArray = Object.entries(pins[expansionType][0]);
+			return zip(
+				pinArray.slice(0, pinArray.length / 2),
+				pinArray.slice(pinArray.length / 2, pinArray.length),
+			);
+		}
+		return [];
+	}, [pins]);
 
-    const createCell = useCallback(
-        ([pin, pinAction]: PinCell) => (
-            <div className="d-flex col py-2">
-                <div className="d-flex align-items-center col-1">
-                    <label htmlFor={pin}>{pin.toUpperCase()}</label>
-                </div>
-                <CustomSelect
-                    inputId={`pinMode${pin}`}
-                    isSearchable={false}
-                    isClearable={false}
-                    options={pinDirections}
-                    value={getPinDirection(pinAction.direction)}
-                    className="col-2 react-select__container"
-                    getOptionLabel={(option) => {
-                        const labelKey = option.label.replace('_','.').toLowerCase();
-                        return t(`PCF8575:label-${labelKey}`);
-                    }}
-                    onChange={(change) =>
-                        setPinDirection(
-                            expansionType,
-                            0,
-                            pin,
-                            change?.value === undefined ? -10 : change.value, // On clear set to -10
-                        )
-                    }
-                />
-                <CustomSelect
-                    inputId={pin}
-                    isClearable
-                    isSearchable
-                    className="col-9 mx-2 react-select__container"
-                    options={options}
-                    value={getOption(pinAction,pinAction.option)}
-                    isDisabled={isNonSelectable(pinAction.option)}
-                    getOptionLabel={(option) => {
-                        const labelKey = option.label.split('BUTTON_PRESS_').pop();
-                        // Need to fallback as some button actions are not part of button names
-                        return (
-                            (labelKey && buttonNames[labelKey]) ||
-                            t(`PinMapping:actions.${option.label}`)
-                        );
-                    }}
-                    onChange={(change) =>
-                        setPinAction(
-                            expansionType,
-                            0,
-                            pin,
-                            change?.value === undefined ? -10 : change.value, // On clear set to -10
-                        )
-                    }
-                />
-            </div>
-        ),
-        [buttonNames],
-    );
+	const createCell = useCallback(
+		([pin, pinAction]: PinCell) => (
+			<div className="d-flex col py-2">
+				<div className="d-flex align-items-center col-1">
+					<label htmlFor={pin}>{pin.toUpperCase()}</label>
+				</div>
+				<CustomSelect
+					inputId={`pinMode${pin}`}
+					isSearchable={false}
+					isClearable={false}
+					options={pinDirections}
+					value={getPinDirection(pinAction.direction)}
+					className="col-2 react-select__container"
+					getOptionLabel={(option) => {
+						const labelKey = option.label.replace('_', '.').toLowerCase();
+						return t(`PCF8575:label-${labelKey}`);
+					}}
+					onChange={(change) =>
+						setPinDirection(
+							expansionType,
+							0,
+							pin,
+							change?.value === undefined ? -10 : change.value, // On clear set to -10
+						)
+					}
+				/>
+				<CustomSelect
+					inputId={pin}
+					isClearable
+					isSearchable
+					className="col-9 mx-2 react-select__container"
+					options={options}
+					value={getOption(pinAction, pinAction.option)}
+					isDisabled={isNonSelectable(pinAction.option)}
+					getOptionLabel={(option) => {
+						const labelKey = option.label.split('BUTTON_PRESS_').pop();
+						// Need to fallback as some button actions are not part of button names
+						return (
+							(labelKey && buttonNames[labelKey]) ||
+							t(`PinMapping:actions.${option.label}`)
+						);
+					}}
+					onChange={(change) =>
+						setPinAction(
+							expansionType,
+							0,
+							pin,
+							change?.value === undefined ? -10 : change.value, // On clear set to -10
+						)
+					}
+				/>
+			</div>
+		),
+		[buttonNames],
+	);
 
-    return (
-        <div>
-            <div className="gx-3">
-                {pinList.map(([cell1, cell2], i) => (
-                    <div key={`pin-row-${i}`} className="row">
-                        {createCell(cell1)}
-                        {createCell(cell2)}
-                    </div>
-                ))}
-            </div>
+	return (
+		<div>
+			<div className="gx-3">
+				{pinList.map(([cell1, cell2], i) => (
+					<div key={`pin-row-${i}`} className="row">
+						{createCell(cell1)}
+						{createCell(cell2)}
+					</div>
+				))}
+			</div>
 			<Button type="button" onClick={handleSave} className="my-4">
 				{t('Common:button-save-label')}
 			</Button>
 			{saveMessage && <Alert variant="secondary">{saveMessage}</Alert>}
-        </div>
-    );
+		</div>
+	);
 };
 
 const PCF8575 = ({ values, errors, handleChange, handleCheckbox }) => {
-    const { buttonLabels, getAvailablePeripherals, getSelectedPeripheral } = useContext(AppContext);
-    const { fetchPins, pins, savePins, setPinAction, setPinDirection } = useExpansionPinStore();
-    const { t } = useTranslation();
+	const { buttonLabels, getAvailablePeripherals, getSelectedPeripheral } =
+		useContext(AppContext);
+	const { fetchPins, pins, savePins, setPinAction, setPinDirection } =
+		useExpansionPinStore();
+	const { t } = useTranslation();
 
-    const expansionType = 'pcf8575';
+	const expansionType = 'pcf8575';
 
-    const { buttonLabelType, swapTpShareLabels } = buttonLabels;
-    const CURRENT_BUTTONS = getButtonLabels(buttonLabelType, swapTpShareLabels);
-    const buttonNames = omit(CURRENT_BUTTONS, ['label', 'value']);
+	const { buttonLabelType, swapTpShareLabels } = buttonLabels;
+	const CURRENT_BUTTONS = getButtonLabels(buttonLabelType, swapTpShareLabels);
+	const buttonNames = omit(CURRENT_BUTTONS, ['label', 'value']);
 
-    const PIN_MODES = [
-        {"value": 0, "label": "Input"},
-        {"value": 1, "label": "Output"}
-    ];
+	const PIN_MODES = [
+		{ value: 0, label: 'Input' },
+		{ value: 1, label: 'Output' },
+	];
 
-    const handlePeripheralChange = (e) => {
-        let device = getSelectedPeripheral('i2c', e.target.value);
-        handleChange(e);
-    };
+	const handlePeripheralChange = (e) => {
+		let device = getSelectedPeripheral('i2c', e.target.value);
+		handleChange(e);
+	};
 
-    useEffect(() => {
-        fetchPins();
-    }, []);
+	useEffect(() => {
+		fetchPins();
+	}, []);
 
 	const saveAll = useCallback(() => {
 		savePins();
 	}, [savePins]);
 
-    return (
-        <Section title={t('PCF8575:header-text')}>
-            <div
-                id="PCF8575AddonOptions"
-                hidden={!(values.PCF8575AddonEnabled && getAvailablePeripherals('i2c'))}
-            >
-                <Row className="mb-3">
-                    {getAvailablePeripherals('i2c') ?
-                    <FormSelect
-                        label={t('PCF8575:block-label')}
-                        name="pcf8575Block"
-                        className="form-select-sm"
-                        groupClassName="col-sm-2 col-md-2 mb-3"
-                        value={values.pcf8575Block}
-                        error={errors.pcf8575Block}
-                        isInvalid={errors.pcf8575Block}
-                        onChange={handlePeripheralChange}
-                    >
-                        {getAvailablePeripherals('i2c').map((o, i) => (
-                            <option
-                                key={`pcf8575Block-option-${i}`}
-                                value={o.value}
-                            >
-                                {o.label}
-                            </option>
-                        ))}
-                    </FormSelect>
-                    : ''}
-                </Row>
-                <Row className="mb-2">
-                    <ExpansionPinsForm
-                        pins={pins}
-                        expansionType={expansionType}
-                        savePins={saveAll}
-                        setPinAction={setPinAction}
-                        setPinDirection={setPinDirection}
-                    />
-                </Row>
-            </div>
-            <FormCheck
-                label={t('Common:switch-enabled')}
-                type="switch"
-                id="PCF8575AddonButton"
-                reverse
-                isInvalid={false}
-                checked={Boolean(values.PCF8575AddonEnabled)}
-                onChange={(e) => {
-                    handleCheckbox('PCF8575AddonEnabled', values);
-                    handleChange(e);
-                }}
-            />
-        </Section>
-    );
+	return (
+		<Section title={t('PCF8575:header-text')}>
+			<div
+				id="PCF8575AddonOptions"
+				hidden={!(values.PCF8575AddonEnabled && getAvailablePeripherals('i2c'))}
+			>
+				<Row className="mb-3">
+					{getAvailablePeripherals('i2c') ? (
+						<FormSelect
+							label={t('PCF8575:block-label')}
+							name="pcf8575Block"
+							className="form-select-sm"
+							groupClassName="col-sm-2 col-md-2 mb-3"
+							value={values.pcf8575Block}
+							error={errors.pcf8575Block}
+							isInvalid={errors.pcf8575Block}
+							onChange={handlePeripheralChange}
+						>
+							{getAvailablePeripherals('i2c').map((o, i) => (
+								<option key={`pcf8575Block-option-${i}`} value={o.value}>
+									{o.label}
+								</option>
+							))}
+						</FormSelect>
+					) : (
+						''
+					)}
+				</Row>
+				<Row className="mb-2">
+					<ExpansionPinsForm
+						pins={pins}
+						expansionType={expansionType}
+						savePins={saveAll}
+						setPinAction={setPinAction}
+						setPinDirection={setPinDirection}
+					/>
+				</Row>
+			</div>
+			<FormCheck
+				label={t('Common:switch-enabled')}
+				type="switch"
+				id="PCF8575AddonButton"
+				reverse
+				isInvalid={false}
+				checked={Boolean(values.PCF8575AddonEnabled)}
+				onChange={(e) => {
+					handleCheckbox('PCF8575AddonEnabled', values);
+					handleChange(e);
+				}}
+			/>
+		</Section>
+	);
 };
 
 export default PCF8575;
diff --git a/www/src/Addons/Rotary.tsx b/www/src/Addons/Rotary.tsx
index 872da7601..be7a30a7c 100644
--- a/www/src/Addons/Rotary.tsx
+++ b/www/src/Addons/Rotary.tsx
@@ -8,34 +8,34 @@ import FormControl from '../Components/FormControl';
 import { FormCheck, Row, Col } from 'react-bootstrap';
 
 const ENCODER_MODES = [
-    { label: 'encoder-mode-none', value: 0 },
-    { label: 'encoder-mode-left-analog-x', value: 1 },
-    { label: 'encoder-mode-left-analog-y', value: 2 },
-    { label: 'encoder-mode-right-analog-x', value: 3 },
-    { label: 'encoder-mode-right-analog-y', value: 4 },
-    { label: 'encoder-mode-left-trigger', value: 5 },
-    { label: 'encoder-mode-right-trigger', value: 6 },
-    { label: 'encoder-mode-dpad-x', value: 7 },
-    { label: 'encoder-mode-dpad-y', value: 8 },
+	{ label: 'encoder-mode-none', value: 0 },
+	{ label: 'encoder-mode-left-analog-x', value: 1 },
+	{ label: 'encoder-mode-left-analog-y', value: 2 },
+	{ label: 'encoder-mode-right-analog-x', value: 3 },
+	{ label: 'encoder-mode-right-analog-y', value: 4 },
+	{ label: 'encoder-mode-left-trigger', value: 5 },
+	{ label: 'encoder-mode-right-trigger', value: 6 },
+	{ label: 'encoder-mode-dpad-x', value: 7 },
+	{ label: 'encoder-mode-dpad-y', value: 8 },
 ];
 
 const ENCODER_MULTIPLES = [
-    { value: 0.25 },
-    { value: 0.50 },
-    { value: 0.75 },
-    { value: 1, default: true },
-    { value: 2 },
-    { value: 4 },
-    { value: 8 },
-    { value: 16 },
-    { value: 32 },
-    { value: 64 },
+	{ value: 0.25 },
+	{ value: 0.5 },
+	{ value: 0.75 },
+	{ value: 1, default: true },
+	{ value: 2 },
+	{ value: 4 },
+	{ value: 8 },
+	{ value: 16 },
+	{ value: 32 },
+	{ value: 64 },
 ];
 
 const ENCODER_MIN_PPR = 10;
 const ENCODER_MAX_PPR = 800;
 
-const ENCODER_MIN_MULTIPLE = 0.10;
+const ENCODER_MIN_MULTIPLE = 0.1;
 const ENCODER_MAX_MULTIPLE = 200;
 
 export const rotaryScheme = {
@@ -43,332 +43,299 @@ export const rotaryScheme = {
 		.number()
 		.required()
 		.label('Rotary Encoder Add-On Enabled'),
-    encoderOneEnabled: yup
-        .boolean()
-        .required()
-		.label('Encoder One Enabled'),
-    encoderOnePinA: yup
+	encoderOneEnabled: yup.boolean().required().label('Encoder One Enabled'),
+	encoderOnePinA: yup
 		.number()
 		.label('Encoder One Pin A')
-        .required()
+		.required()
 		.validatePinWhenValue('RotaryAddonEnabled'),
-    encoderOnePinB: yup
+	encoderOnePinB: yup
 		.number()
 		.label('Encoder One Pin B')
-        .required()
+		.required()
 		.validatePinWhenValue('RotaryAddonEnabled'),
-    encoderOneMode: yup
-		.number()
-        .required()
-		.label('Encoder One Mode'),
-    encoderOnePPR: yup
-		.number()
-		.label('Encoder One PPR')
-        .required(),
-    encoderOneResetAfter: yup
+	encoderOneMode: yup.number().required().label('Encoder One Mode'),
+	encoderOnePPR: yup.number().label('Encoder One PPR').required(),
+	encoderOneResetAfter: yup
 		.number()
 		.label('Encoder One Reset After')
-        .required(),
-    encoderOneAllowWrapAround: yup
-        .boolean()
-        .required()
+		.required(),
+	encoderOneAllowWrapAround: yup
+		.boolean()
+		.required()
 		.label('Encoder One Allow Wrap Around'),
-    encoderOneMultiplier: yup
-		.number()
-		.label('Encoder One Multiplier')
-        .required(),
-    encoderTwoEnabled: yup
-        .boolean()
-        .required()
-		.label('Encoder Two Enabled'),
-    encoderTwoPinA: yup
+	encoderOneMultiplier: yup.number().label('Encoder One Multiplier').required(),
+	encoderTwoEnabled: yup.boolean().required().label('Encoder Two Enabled'),
+	encoderTwoPinA: yup
 		.number()
 		.label('Encoder Two Pin A')
-        .required()
+		.required()
 		.validatePinWhenValue('RotaryAddonEnabled'),
-    encoderTwoPinB: yup
+	encoderTwoPinB: yup
 		.number()
 		.label('Encoder Two Pin B')
-        .required()
+		.required()
 		.validatePinWhenValue('RotaryAddonEnabled'),
-    encoderTwoMode: yup
-		.number()
-        .required()
-		.label('Encoder Two Mode'),
-    encoderTwoPPR: yup
-		.number()
-		.label('Encoder Two PPR')
-        .required(),
-    encoderTwoResetAfter: yup
+	encoderTwoMode: yup.number().required().label('Encoder Two Mode'),
+	encoderTwoPPR: yup.number().label('Encoder Two PPR').required(),
+	encoderTwoResetAfter: yup
 		.number()
 		.label('Encoder Two Reset After')
-        .required(),
-    encoderTwoAllowWrapAround: yup
-        .boolean()
-        .required()
+		.required(),
+	encoderTwoAllowWrapAround: yup
+		.boolean()
+		.required()
 		.label('Encoder Two Allow Wrap Around'),
-    encoderTwoMultiplier: yup
-		.number()
-		.label('Encoder Two Multiplier')
-        .required(),
+	encoderTwoMultiplier: yup.number().label('Encoder Two Multiplier').required(),
 };
 
 export const rotaryState = {
-    encoderOneEnabled: 0,
-    encoderOnePinA: -1,
-    encoderOnePinB: -1,
-    encoderOneMode: 0,
-    encoderOnePPR: 24,
-    encoderOneResetAfter: 0,
-    encoderOneAllowWrapAround: 0,
-    encoderOneMultiplier: 0,
-    encoderTwoEnabled: 0,
-    encoderTwoPinA: -1,
-    encoderTwoPinB: -1,
-    encoderTwoMode: 0,
-    encoderTwoPPR: 24,
-    encoderTwoResetAfter: 0,
-    encoderTwoAllowWrapAround: 0,
-    encoderTwoMultiplier: 0,
-    RotaryAddonEnabled: 0,
+	encoderOneEnabled: 0,
+	encoderOnePinA: -1,
+	encoderOnePinB: -1,
+	encoderOneMode: 0,
+	encoderOnePPR: 24,
+	encoderOneResetAfter: 0,
+	encoderOneAllowWrapAround: 0,
+	encoderOneMultiplier: 0,
+	encoderTwoEnabled: 0,
+	encoderTwoPinA: -1,
+	encoderTwoPinB: -1,
+	encoderTwoMode: 0,
+	encoderTwoPPR: 24,
+	encoderTwoResetAfter: 0,
+	encoderTwoAllowWrapAround: 0,
+	encoderTwoMultiplier: 0,
+	RotaryAddonEnabled: 0,
 };
 
 const Rotary = ({ values, errors, handleChange, handleCheckbox }) => {
 	const { t } = useTranslation();
 	return (
 		<Section title={t('Rotary:header-text')}>
-			<div
-				id="RotaryAddonEnabledOptions"
-				hidden={!values.RotaryAddonEnabled}
-			>
-                <Row className="mb-3">
-                    <div className="col-3">
-                        <label>{t('Rotary:encoder-one-label')}</label>
-                        <FormCheck
-                            label={t('Common:switch-enabled')}
-                            type="switch"
-                            id="encoderOneEnabled"
-                            isInvalid={false}
-                            checked={Boolean(values.encoderOneEnabled)}
-                            value={Boolean(values.encoderOneEnabled)}
-                            onChange={(e) => {
-                                handleCheckbox('encoderOneEnabled', values);
-                                handleChange(e);
-                            }}
-                        />
-                        <div id="" hidden={!values.encoderOneEnabled}>
-                            <FormControl
-                                type="number"
-                                label={t('Rotary:encoder-pin-a-label')}
-                                name="encoderOnePinA"
-                                className="form-control-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderOnePinA}
-                                error={errors.encoderOnePinA}
-                                isInvalid={errors.encoderOnePinA}
-                                onChange={handleChange}
-                                min={-1}
-                                max={29}
-                            />
-                            <FormControl
-                                type="number"
-                                label={t('Rotary:encoder-pin-b-label')}
-                                name="encoderOnePinB"
-                                className="form-control-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderOnePinB}
-                                error={errors.encoderOnePinB}
-                                isInvalid={errors.encoderOnePinB}
-                                onChange={handleChange}
-                                min={-1}
-                                max={29}
-                            />
-                            <FormControl
-                                type="number"
-                                label={t('Rotary:encoder-ppr-label')}
-                                name="encoderOnePPR"
-                                className="form-control-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderOnePPR}
-                                error={errors.encoderOnePPR}
-                                isInvalid={errors.encoderOnePPR}
-                                onChange={handleChange}
-                                min={ENCODER_MIN_PPR}
-                                max={ENCODER_MAX_PPR}
-                            />
-                            <FormControl
-                                type="number"
-                                label={t('Rotary:encoder-multiplier-label')}
-                                name="encoderOneMultiplier"
-                                className="form-select-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderOneMultiplier}
-                                error={errors.encoderOneMultiplier}
-                                isInvalid={errors.encoderOneMultiplier}
-                                onChange={handleChange}
-                                min={ENCODER_MIN_MULTIPLE}
-                                max={ENCODER_MAX_MULTIPLE}
-                            />
-                            <FormControl
-                                type="number"
-                                label={t('Rotary:encoder-reset-after-label')}
-                                name="encoderOneResetAfter"
-                                className="form-control-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderOneResetAfter}
-                                error={errors.encoderOneResetAfter}
-                                isInvalid={errors.encoderOneResetAfter}
-                                onChange={handleChange}
-                                min={0}
-                                max={500}
-                            />
-                            <FormSelect
-                                label={t('Rotary:encoder-mode-label')}
-                                name="encoderOneMode"
-                                className="form-select-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderOneMode}
-                                error={errors.encoderOneMode}
-                                isInvalid={errors.encoderOneMode}
-                                onChange={handleChange}
-                            >
-                                {ENCODER_MODES.map((o, i) => (
-                                    <option
-                                        key={`encoderOneMode-option-${i}`}
-                                        value={o.value}
-                                    >
-                                        {t(`Rotary:${o.label}`)}
-                                    </option>
-                                ))}
-                            </FormSelect>
-                            <FormCheck
-                            label={t('Rotary:encoder-allow-wrap-around-label')}
-                            type="switch"
-                            id="encoderOneAllowWrapAround"
-                            isInvalid={false}
-                            checked={Boolean(values.encoderOneAllowWrapAround)}
-                            value={Boolean(values.encoderOneAllowWrapAround)}
-                            onChange={(e) => {
-                                handleCheckbox('encoderOneAllowWrapAround', values);
-                                handleChange(e);
-                            }}
-                            />
-                        </div>
-                    </div>
-                    <div className="col-3">
-                        <label>{t('Rotary:encoder-two-label')}</label>
-                        <FormCheck
-                            label={t('Common:switch-enabled')}
-                            type="switch"
-                            id="encoderTwoEnabled"
-                            isInvalid={false}
-                            checked={Boolean(values.encoderTwoEnabled)}
-                            value={Boolean(values.encoderTwoEnabled)}
-                            onChange={(e) => {
-                                handleCheckbox('encoderTwoEnabled', values);
-                                handleChange(e);
-                            }}
-                        />
-                        <div id="" hidden={!values.encoderTwoEnabled}>
-                            <FormControl
-                                type="number"
-                                label={t('Rotary:encoder-pin-a-label')}
-                                name="encoderTwoPinA"
-                                className="form-control-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderTwoPinA}
-                                error={errors.encoderTwoPinA}
-                                isInvalid={errors.encoderTwoPinA}
-                                onChange={handleChange}
-                                min={-1}
-                                max={29}
-                            />
-                            <FormControl
-                                type="number"
-                                label={t('Rotary:encoder-pin-b-label')}
-                                name="encoderTwoPinB"
-                                className="form-control-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderTwoPinB}
-                                error={errors.encoderTwoPinB}
-                                isInvalid={errors.encoderTwoPinB}
-                                onChange={handleChange}
-                                min={-1}
-                                max={29}
-                            />
-                            <FormControl
-                                type="number"
-                                label={t('Rotary:encoder-ppr-label')}
-                                name="encoderTwoPPR"
-                                className="form-control-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderTwoPPR}
-                                error={errors.encoderTwoPPR}
-                                isInvalid={errors.encoderTwoPPR}
-                                onChange={handleChange}
-                                min={ENCODER_MIN_PPR}
-                                max={ENCODER_MAX_PPR}
-                            />
-                            <FormControl
-                                type="number"
-                                label={t('Rotary:encoder-multiplier-label')}
-                                name="encoderTwoMultiplier"
-                                className="form-select-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderTwoMultiplier}
-                                error={errors.encoderTwoMultiplier}
-                                isInvalid={errors.encoderTwoMultiplier}
-                                onChange={handleChange}
-                                min={ENCODER_MIN_MULTIPLE}
-                                max={ENCODER_MAX_MULTIPLE}
-                            />
-                            <FormControl
-                                type="number"
-                                label={t('Rotary:encoder-reset-after-label')}
-                                name="encoderTwoResetAfter"
-                                className="form-control-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderTwoResetAfter}
-                                error={errors.encoderTwoResetAfter}
-                                isInvalid={errors.encoderTwoResetAfter}
-                                onChange={handleChange}
-                                min={0}
-                                max={500}
-                            />
-                            <FormSelect
-                                label={t('Rotary:encoder-mode-label')}
-                                name="encoderTwoMode"
-                                className="form-select-sm"
-                                groupClassName="mb-3"
-                                value={values.encoderTwoMode}
-                                error={errors.encoderTwoMode}
-                                isInvalid={errors.encoderTwoMode}
-                                onChange={handleChange}
-                            >
-                                {ENCODER_MODES.map((o, i) => (
-                                    <option
-                                        key={`encoderTwoMode-option-${i}`}
-                                        value={o.value}
-                                    >
-                                        {t(`Rotary:${o.label}`)}
-                                    </option>
-                                ))}
-                            </FormSelect>
-                            <FormCheck
-                            label={t('Rotary:encoder-allow-wrap-around-label')}
-                            type="switch"
-                            id="encoderTwoAllowWrapAround"
-                            isInvalid={false}
-                            checked={Boolean(values.encoderTwoAllowWrapAround)}
-                            value={Boolean(values.encoderTwoAllowWrapAround)}
-                            onChange={(e) => {
-                                handleCheckbox('encoderTwoAllowWrapAround', values);
-                                handleChange(e);
-                            }}
-                            />
-                        </div>
-                    </div>
-                </Row>
+			<div id="RotaryAddonEnabledOptions" hidden={!values.RotaryAddonEnabled}>
+				<Row className="mb-3">
+					<div className="col-3">
+						<label>{t('Rotary:encoder-one-label')}</label>
+						<FormCheck
+							label={t('Common:switch-enabled')}
+							type="switch"
+							id="encoderOneEnabled"
+							isInvalid={false}
+							checked={Boolean(values.encoderOneEnabled)}
+							value={Boolean(values.encoderOneEnabled)}
+							onChange={(e) => {
+								handleCheckbox('encoderOneEnabled', values);
+								handleChange(e);
+							}}
+						/>
+						<div id="" hidden={!values.encoderOneEnabled}>
+							<FormControl
+								type="number"
+								label={t('Rotary:encoder-pin-a-label')}
+								name="encoderOnePinA"
+								className="form-control-sm"
+								groupClassName="mb-3"
+								value={values.encoderOnePinA}
+								error={errors.encoderOnePinA}
+								isInvalid={errors.encoderOnePinA}
+								onChange={handleChange}
+								min={-1}
+								max={29}
+							/>
+							<FormControl
+								type="number"
+								label={t('Rotary:encoder-pin-b-label')}
+								name="encoderOnePinB"
+								className="form-control-sm"
+								groupClassName="mb-3"
+								value={values.encoderOnePinB}
+								error={errors.encoderOnePinB}
+								isInvalid={errors.encoderOnePinB}
+								onChange={handleChange}
+								min={-1}
+								max={29}
+							/>
+							<FormControl
+								type="number"
+								label={t('Rotary:encoder-ppr-label')}
+								name="encoderOnePPR"
+								className="form-control-sm"
+								groupClassName="mb-3"
+								value={values.encoderOnePPR}
+								error={errors.encoderOnePPR}
+								isInvalid={errors.encoderOnePPR}
+								onChange={handleChange}
+								min={ENCODER_MIN_PPR}
+								max={ENCODER_MAX_PPR}
+							/>
+							<FormControl
+								type="number"
+								label={t('Rotary:encoder-multiplier-label')}
+								name="encoderOneMultiplier"
+								className="form-select-sm"
+								groupClassName="mb-3"
+								value={values.encoderOneMultiplier}
+								error={errors.encoderOneMultiplier}
+								isInvalid={errors.encoderOneMultiplier}
+								onChange={handleChange}
+								min={ENCODER_MIN_MULTIPLE}
+								max={ENCODER_MAX_MULTIPLE}
+							/>
+							<FormControl
+								type="number"
+								label={t('Rotary:encoder-reset-after-label')}
+								name="encoderOneResetAfter"
+								className="form-control-sm"
+								groupClassName="mb-3"
+								value={values.encoderOneResetAfter}
+								error={errors.encoderOneResetAfter}
+								isInvalid={errors.encoderOneResetAfter}
+								onChange={handleChange}
+								min={0}
+								max={500}
+							/>
+							<FormSelect
+								label={t('Rotary:encoder-mode-label')}
+								name="encoderOneMode"
+								className="form-select-sm"
+								groupClassName="mb-3"
+								value={values.encoderOneMode}
+								error={errors.encoderOneMode}
+								isInvalid={errors.encoderOneMode}
+								onChange={handleChange}
+							>
+								{ENCODER_MODES.map((o, i) => (
+									<option key={`encoderOneMode-option-${i}`} value={o.value}>
+										{t(`Rotary:${o.label}`)}
+									</option>
+								))}
+							</FormSelect>
+							<FormCheck
+								label={t('Rotary:encoder-allow-wrap-around-label')}
+								type="switch"
+								id="encoderOneAllowWrapAround"
+								isInvalid={false}
+								checked={Boolean(values.encoderOneAllowWrapAround)}
+								value={Boolean(values.encoderOneAllowWrapAround)}
+								onChange={(e) => {
+									handleCheckbox('encoderOneAllowWrapAround', values);
+									handleChange(e);
+								}}
+							/>
+						</div>
+					</div>
+					<div className="col-3">
+						<label>{t('Rotary:encoder-two-label')}</label>
+						<FormCheck
+							label={t('Common:switch-enabled')}
+							type="switch"
+							id="encoderTwoEnabled"
+							isInvalid={false}
+							checked={Boolean(values.encoderTwoEnabled)}
+							value={Boolean(values.encoderTwoEnabled)}
+							onChange={(e) => {
+								handleCheckbox('encoderTwoEnabled', values);
+								handleChange(e);
+							}}
+						/>
+						<div id="" hidden={!values.encoderTwoEnabled}>
+							<FormControl
+								type="number"
+								label={t('Rotary:encoder-pin-a-label')}
+								name="encoderTwoPinA"
+								className="form-control-sm"
+								groupClassName="mb-3"
+								value={values.encoderTwoPinA}
+								error={errors.encoderTwoPinA}
+								isInvalid={errors.encoderTwoPinA}
+								onChange={handleChange}
+								min={-1}
+								max={29}
+							/>
+							<FormControl
+								type="number"
+								label={t('Rotary:encoder-pin-b-label')}
+								name="encoderTwoPinB"
+								className="form-control-sm"
+								groupClassName="mb-3"
+								value={values.encoderTwoPinB}
+								error={errors.encoderTwoPinB}
+								isInvalid={errors.encoderTwoPinB}
+								onChange={handleChange}
+								min={-1}
+								max={29}
+							/>
+							<FormControl
+								type="number"
+								label={t('Rotary:encoder-ppr-label')}
+								name="encoderTwoPPR"
+								className="form-control-sm"
+								groupClassName="mb-3"
+								value={values.encoderTwoPPR}
+								error={errors.encoderTwoPPR}
+								isInvalid={errors.encoderTwoPPR}
+								onChange={handleChange}
+								min={ENCODER_MIN_PPR}
+								max={ENCODER_MAX_PPR}
+							/>
+							<FormControl
+								type="number"
+								label={t('Rotary:encoder-multiplier-label')}
+								name="encoderTwoMultiplier"
+								className="form-select-sm"
+								groupClassName="mb-3"
+								value={values.encoderTwoMultiplier}
+								error={errors.encoderTwoMultiplier}
+								isInvalid={errors.encoderTwoMultiplier}
+								onChange={handleChange}
+								min={ENCODER_MIN_MULTIPLE}
+								max={ENCODER_MAX_MULTIPLE}
+							/>
+							<FormControl
+								type="number"
+								label={t('Rotary:encoder-reset-after-label')}
+								name="encoderTwoResetAfter"
+								className="form-control-sm"
+								groupClassName="mb-3"
+								value={values.encoderTwoResetAfter}
+								error={errors.encoderTwoResetAfter}
+								isInvalid={errors.encoderTwoResetAfter}
+								onChange={handleChange}
+								min={0}
+								max={500}
+							/>
+							<FormSelect
+								label={t('Rotary:encoder-mode-label')}
+								name="encoderTwoMode"
+								className="form-select-sm"
+								groupClassName="mb-3"
+								value={values.encoderTwoMode}
+								error={errors.encoderTwoMode}
+								isInvalid={errors.encoderTwoMode}
+								onChange={handleChange}
+							>
+								{ENCODER_MODES.map((o, i) => (
+									<option key={`encoderTwoMode-option-${i}`} value={o.value}>
+										{t(`Rotary:${o.label}`)}
+									</option>
+								))}
+							</FormSelect>
+							<FormCheck
+								label={t('Rotary:encoder-allow-wrap-around-label')}
+								type="switch"
+								id="encoderTwoAllowWrapAround"
+								isInvalid={false}
+								checked={Boolean(values.encoderTwoAllowWrapAround)}
+								value={Boolean(values.encoderTwoAllowWrapAround)}
+								onChange={(e) => {
+									handleCheckbox('encoderTwoAllowWrapAround', values);
+									handleChange(e);
+								}}
+							/>
+						</div>
+					</div>
+				</Row>
 			</div>
 			<FormCheck
 				label={t('Common:switch-enabled')}
diff --git a/www/src/Addons/SOCD.tsx b/www/src/Addons/SOCD.tsx
index 4d72fba23..c9d5b3981 100644
--- a/www/src/Addons/SOCD.tsx
+++ b/www/src/Addons/SOCD.tsx
@@ -35,10 +35,9 @@ const SOCD = ({ values, errors, handleChange, handleCheckbox }) => {
 					<p>
 						{t(
 							'AddonsConfig:socd-cleaning-mode-selection-slider-sub-header-text',
-						)}<br />
-						{t(
-							'AddonsConfig:pin-config-moved-to-core-text',
 						)}
+						<br />
+						{t('AddonsConfig:pin-config-moved-to-core-text')}
 					</p>
 					<FormSelect
 						label={t(
diff --git a/www/src/Addons/Tilt.tsx b/www/src/Addons/Tilt.tsx
index ff4e4e49d..a0a8d34cd 100644
--- a/www/src/Addons/Tilt.tsx
+++ b/www/src/Addons/Tilt.tsx
@@ -14,7 +14,7 @@ export const tiltScheme = {
 	tilt1Pin: yup
 		.number()
 		.label('Tilt 1 Pin')
-		.validatePinWhenValue('TiltInputEnabled'),	
+		.validatePinWhenValue('TiltInputEnabled'),
 	factorTilt1LeftX: yup
 		.number()
 		.label('Tilt 1 Factor Left X')
diff --git a/www/src/Addons/Wii.tsx b/www/src/Addons/Wii.tsx
index adecc75f6..4a9a9384f 100644
--- a/www/src/Addons/Wii.tsx
+++ b/www/src/Addons/Wii.tsx
@@ -1,7 +1,15 @@
 import { AppContext } from '../Contexts/AppContext';
 import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Button, Form, Row, FormCheck, Tab, Tabs, FormLabel } from 'react-bootstrap';
+import {
+	Button,
+	Form,
+	Row,
+	FormCheck,
+	Tab,
+	Tabs,
+	FormLabel,
+} from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
 import * as yup from 'yup';
 
@@ -12,7 +20,10 @@ import FormSelect from '../Components/FormSelect';
 import { I2C_BLOCKS, PERIPHERAL_DEVICES } from '../Data/Peripherals';
 import { BUTTON_MASKS } from '../Data/Buttons';
 
-import WebApi, { baseWiiControls, basePeripheralMapping } from '../Services/WebApi';
+import WebApi, {
+	baseWiiControls,
+	basePeripheralMapping,
+} from '../Services/WebApi';
 
 export const wiiScheme = {
 	WiiExtensionAddonEnabled: yup
@@ -32,258 +43,565 @@ export const wiiState = {
 };
 
 const WII_EXTENSION_CONTROLS = [
-    { id: 'Nunchuk',   value: 0, inputs: { analog: [ { id: 'Stick', axes: [ { id: 'X', axis: 0 }, { id: 'Y', axis: 1 } ] } ], digital: [ { id: 'C' }, { id: 'Z' } ] } },
-    { id: 'Classic',   value: 1, inputs: { analog: [ { id: 'LeftStick', axes: [ { id: 'X', axis: 0 }, { id: 'Y', axis: 1 } ] }, { id: 'RightStick', axes: [ { id: 'X', axis: 2 }, { id: 'Y', axis: 3 } ] }, { id: 'LeftTrigger', axes: [ { id: 'Trigger', axis: 4 } ] }, { id: 'RightTrigger', axes: [ { id : 'Trigger', axis: 5 } ] } ], digital: [ { id: 'A' }, { id: 'B' }, { id: 'X' }, { id: 'Y' }, { id: 'L' }, { id: 'R' }, { id: 'ZL' }, { id: 'ZR' }, { id: 'Minus' }, { id: 'Home' }, { id: 'Plus' }, { id: 'Up' }, { id: 'Down' }, { id: 'Left' }, { id: 'Right' } ] } },
-    { id: 'Guitar',    value: 3, inputs: { analog: [ { id: 'Stick', axes: [ { id: 'X', axis: 0 }, { id: 'Y', axis: 1 } ] }, { id: 'WhammyBar', axes: [ { id: 'Trigger', axis: 4 } ] } ], digital: [ { id: 'Orange' }, { id: 'Red' }, { id: 'Blue' }, { id: 'Green' }, { id: 'Yellow' }, { id: 'Pedal' }, { id: 'Minus' }, { id: 'Plus' }, { id: 'StrumUp' }, { id: 'StrumDown' } ] } },
-    { id: 'Drum',      value: 4, inputs: { analog: [ { id: 'Stick', axes: [ { id: 'X', axis: 0 }, { id: 'Y', axis: 1 } ] } ], digital: [ { id: 'Orange' }, { id: 'Red' }, { id: 'Blue' }, { id: 'Green' }, { id: 'Yellow' }, { id: 'Pedal' }, { id: 'Minus' }, { id: 'Plus' } ] } },
-    { id: 'Turntable', value: 5, inputs: { analog: [ { id: 'Stick', axes: [ { id: 'X', axis: 0 }, { id: 'Y', axis: 1 } ] }, { id: 'LeftTurntable', axes: [ { id: 'Trigger', axis: 0 } ] }, { id: 'RightTurntable', axes: [ { id: 'Trigger', axis: 2 } ] }, { id: 'Fader', axes: [ { id: 'Trigger', axis: 4 } ] }, { id: 'Effects', axes: [ { id: 'Trigger', axis: 5 } ] } ], digital: [ { id: 'LeftGreen' }, { id: 'LeftRed' }, { id: 'LeftBlue' }, { id: 'RightGreen' }, { id: 'RightRed' }, { id: 'RightBlue' }, { id: 'Euphoria' }, { id: 'Minus' }, { id: 'Plus' } ] } },
-    { id: 'Taiko',     value: 6, inputs: { analog: [], digital: [ { id: 'DonLeft' }, { id: 'KatLeft' }, { id: 'DonRight' }, { id: 'KatRight' } ] } },
+	{
+		id: 'Nunchuk',
+		value: 0,
+		inputs: {
+			analog: [
+				{
+					id: 'Stick',
+					axes: [
+						{ id: 'X', axis: 0 },
+						{ id: 'Y', axis: 1 },
+					],
+				},
+			],
+			digital: [{ id: 'C' }, { id: 'Z' }],
+		},
+	},
+	{
+		id: 'Classic',
+		value: 1,
+		inputs: {
+			analog: [
+				{
+					id: 'LeftStick',
+					axes: [
+						{ id: 'X', axis: 0 },
+						{ id: 'Y', axis: 1 },
+					],
+				},
+				{
+					id: 'RightStick',
+					axes: [
+						{ id: 'X', axis: 2 },
+						{ id: 'Y', axis: 3 },
+					],
+				},
+				{ id: 'LeftTrigger', axes: [{ id: 'Trigger', axis: 4 }] },
+				{ id: 'RightTrigger', axes: [{ id: 'Trigger', axis: 5 }] },
+			],
+			digital: [
+				{ id: 'A' },
+				{ id: 'B' },
+				{ id: 'X' },
+				{ id: 'Y' },
+				{ id: 'L' },
+				{ id: 'R' },
+				{ id: 'ZL' },
+				{ id: 'ZR' },
+				{ id: 'Minus' },
+				{ id: 'Home' },
+				{ id: 'Plus' },
+				{ id: 'Up' },
+				{ id: 'Down' },
+				{ id: 'Left' },
+				{ id: 'Right' },
+			],
+		},
+	},
+	{
+		id: 'Guitar',
+		value: 3,
+		inputs: {
+			analog: [
+				{
+					id: 'Stick',
+					axes: [
+						{ id: 'X', axis: 0 },
+						{ id: 'Y', axis: 1 },
+					],
+				},
+				{ id: 'WhammyBar', axes: [{ id: 'Trigger', axis: 4 }] },
+			],
+			digital: [
+				{ id: 'Orange' },
+				{ id: 'Red' },
+				{ id: 'Blue' },
+				{ id: 'Green' },
+				{ id: 'Yellow' },
+				{ id: 'Pedal' },
+				{ id: 'Minus' },
+				{ id: 'Plus' },
+				{ id: 'StrumUp' },
+				{ id: 'StrumDown' },
+			],
+		},
+	},
+	{
+		id: 'Drum',
+		value: 4,
+		inputs: {
+			analog: [
+				{
+					id: 'Stick',
+					axes: [
+						{ id: 'X', axis: 0 },
+						{ id: 'Y', axis: 1 },
+					],
+				},
+			],
+			digital: [
+				{ id: 'Orange' },
+				{ id: 'Red' },
+				{ id: 'Blue' },
+				{ id: 'Green' },
+				{ id: 'Yellow' },
+				{ id: 'Pedal' },
+				{ id: 'Minus' },
+				{ id: 'Plus' },
+			],
+		},
+	},
+	{
+		id: 'Turntable',
+		value: 5,
+		inputs: {
+			analog: [
+				{
+					id: 'Stick',
+					axes: [
+						{ id: 'X', axis: 0 },
+						{ id: 'Y', axis: 1 },
+					],
+				},
+				{ id: 'LeftTurntable', axes: [{ id: 'Trigger', axis: 0 }] },
+				{ id: 'RightTurntable', axes: [{ id: 'Trigger', axis: 2 }] },
+				{ id: 'Fader', axes: [{ id: 'Trigger', axis: 4 }] },
+				{ id: 'Effects', axes: [{ id: 'Trigger', axis: 5 }] },
+			],
+			digital: [
+				{ id: 'LeftGreen' },
+				{ id: 'LeftRed' },
+				{ id: 'LeftBlue' },
+				{ id: 'RightGreen' },
+				{ id: 'RightRed' },
+				{ id: 'RightBlue' },
+				{ id: 'Euphoria' },
+				{ id: 'Minus' },
+				{ id: 'Plus' },
+			],
+		},
+	},
+	{
+		id: 'Taiko',
+		value: 6,
+		inputs: {
+			analog: [],
+			digital: [
+				{ id: 'DonLeft' },
+				{ id: 'KatLeft' },
+				{ id: 'DonRight' },
+				{ id: 'KatRight' },
+			],
+		},
+	},
 ];
 
 const WII_JOYSTICK_MODES = [
-	{ label: 'None', value: 0, options: {'x': 0, 'y': 0} },
-	{ label: 'Left Analog', value: 1, options: {'x': 1, 'y': 2} },
-	{ label: 'Right Analog', value: 2, options: {'x': 3, 'y': 4} },
-	{ label: 'D-Pad', value: 3, options: {'x': 5, 'y': 6} },
+	{ label: 'None', value: 0, options: { x: 0, y: 0 } },
+	{ label: 'Left Analog', value: 1, options: { x: 1, y: 2 } },
+	{ label: 'Right Analog', value: 2, options: { x: 3, y: 4 } },
+	{ label: 'D-Pad', value: 3, options: { x: 5, y: 6 } },
 ];
 
-const Wii = ({ values, errors, handleChange, handleCheckbox, setFieldValue }) => {
+const Wii = ({
+	values,
+	errors,
+	handleChange,
+	handleCheckbox,
+	setFieldValue,
+}) => {
 	const { t } = useTranslation();
-    const [wiiControls, setWiiControls] = useState(baseWiiControls);
-    const [selectedControls] = useState(baseWiiControls);
-    const { setLoading, getAvailablePeripherals, getSelectedPeripheral } = useContext(AppContext);
+	const [wiiControls, setWiiControls] = useState(baseWiiControls);
+	const [selectedControls] = useState(baseWiiControls);
+	const { setLoading, getAvailablePeripherals, getSelectedPeripheral } =
+		useContext(AppContext);
 
 	useEffect(() => {
 		async function fetchData() {
-            const wc = await WebApi.getWiiControls(setLoading);
+			const wc = await WebApi.getWiiControls(setLoading);
 			setWiiControls(wc);
 		}
 
 		fetchData();
 	}, [setWiiControls, selectedControls]);
 
-    const ANALOG_SINGLE_AXIS_MODES = [
-        { label: 'None',                 value: 0 },
-        { label: 'Left Trigger',         value: 7 },
-        { label: 'Right Trigger',        value: 8 },
-        { label: 'Left Analog X+ Axis',  value: 9 },
-        { label: 'Left Analog X- Axis',  value: 10 },
-        { label: 'Left Analog Y+ Axis',  value: 11 },
-        { label: 'Left Analog Y- Axis',  value: 12 },
-        { label: 'Right Analog X+ Axis', value: 13 },
-        { label: 'Right Analog X- Axis', value: 14 },
-        { label: 'Right Analog Y+ Axis', value: 15 },
-        { label: 'Right Analog Y- Axis', value: 16 },
-    ];
-    
-    const saveWiiOptions = async () => {
-        let wiiButtonsMap = Array.from(document.querySelectorAll('#WiiExtensionAddonOptions .wii-buttons'));
-        let wiiMap = wiiButtonsMap
-            .reduce(
-                (o, i) => Object.assign(o, { [i.getAttribute('controlid')+'.button'+i.getAttribute('buttonid')]: parseInt(i.value) }), {});
+	const ANALOG_SINGLE_AXIS_MODES = [
+		{ label: 'None', value: 0 },
+		{ label: 'Left Trigger', value: 7 },
+		{ label: 'Right Trigger', value: 8 },
+		{ label: 'Left Analog X+ Axis', value: 9 },
+		{ label: 'Left Analog X- Axis', value: 10 },
+		{ label: 'Left Analog Y+ Axis', value: 11 },
+		{ label: 'Left Analog Y- Axis', value: 12 },
+		{ label: 'Right Analog X+ Axis', value: 13 },
+		{ label: 'Right Analog X- Axis', value: 14 },
+		{ label: 'Right Analog Y+ Axis', value: 15 },
+		{ label: 'Right Analog Y- Axis', value: 16 },
+	];
 
-        let wiiAnalogMap = Array.from(document.querySelectorAll('#WiiExtensionAddonOptions .wii-analogs'));
-        wiiMap = wiiAnalogMap
-        .reduce(
-            (o, i) => {
-                let modeID = i.value;
-                let axes = i.getAttribute('axiscount') || 2;
-                let joyMode = (axes == 2 ? getJoystickMode(modeID) : null);
-                if (joyMode && joyMode.options) {
-                    let r = o;
-                    Object.keys(joyMode.options).forEach(key => {
-                        Object.assign(r, { [i.getAttribute('controlid')+'.analog'+i.getAttribute('analogid')+'.'+key+'.axisType']: joyMode.options[key] });
-                    });
-                    o = r;
-                } else {
-                    o = Object.assign(o, { [i.getAttribute('controlid')+'.analog'+i.getAttribute('analogid')+'.axisType']: parseInt(i.value) });
-                }
-                return o;
-            }, wiiMap);
-    
-        try {
-            let success = await WebApi.setWiiControls(wiiMap);
-    
-            if (success) {
-    
-            } else {
-                
-            }
-        } catch (e) {
-        }
-    };
+	const saveWiiOptions = async () => {
+		let wiiButtonsMap = Array.from(
+			document.querySelectorAll('#WiiExtensionAddonOptions .wii-buttons'),
+		);
+		let wiiMap = wiiButtonsMap.reduce(
+			(o, i) =>
+				Object.assign(o, {
+					[i.getAttribute('controlid') +
+					'.button' +
+					i.getAttribute('buttonid')]: parseInt(i.value),
+				}),
+			{},
+		);
 
-    const getJoystickMode = (searchValue: number) => WII_JOYSTICK_MODES.find(({ value }) => parseInt(value) === parseInt(searchValue));
+		let wiiAnalogMap = Array.from(
+			document.querySelectorAll('#WiiExtensionAddonOptions .wii-analogs'),
+		);
+		wiiMap = wiiAnalogMap.reduce((o, i) => {
+			let modeID = i.value;
+			let axes = i.getAttribute('axiscount') || 2;
+			let joyMode = axes == 2 ? getJoystickMode(modeID) : null;
+			if (joyMode && joyMode.options) {
+				let r = o;
+				Object.keys(joyMode.options).forEach((key) => {
+					Object.assign(r, {
+						[i.getAttribute('controlid') +
+						'.analog' +
+						i.getAttribute('analogid') +
+						'.' +
+						key +
+						'.axisType']: joyMode.options[key],
+					});
+				});
+				o = r;
+			} else {
+				o = Object.assign(o, {
+					[i.getAttribute('controlid') +
+					'.analog' +
+					i.getAttribute('analogid') +
+					'.axisType']: parseInt(i.value),
+				});
+			}
+			return o;
+		}, wiiMap);
 
-    const setWiiAnalogEntry = (controlID,analogID,axes,e) => {
-        let analogEntry = {};
-        let modeID = e.target.value;
-        let joyMode = (axes == 2 ? getJoystickMode(modeID) : null);
-        if (joyMode && joyMode.options) {
-            let r = analogEntry;
-            Object.keys(joyMode.options).forEach(key => {
-                Object.assign(r, { [controlID.toLowerCase()+'.analog'+analogID+'.'+key+'.axisType']: joyMode.options[key] });
-            });
-            analogEntry = r;
-        } else {
-            analogEntry[`${controlID.toLowerCase()}.analog${analogID}.axisType`] = e.target.value;
-        }
+		try {
+			let success = await WebApi.setWiiControls(wiiMap);
 
-        setWiiControls(controls => ({
-            ...wiiControls,
-            ...analogEntry
-        }));
-    };
+			if (success) {
+			} else {
+			}
+		} catch (e) {}
+	};
 
-    const handlePeripheralChange = (e) => {
-        let device = getSelectedPeripheral('i2c', e.target.value);
-        handleChange(e);
-    };
+	const getJoystickMode = (searchValue: number) =>
+		WII_JOYSTICK_MODES.find(
+			({ value }) => parseInt(value) === parseInt(searchValue),
+		);
 
-    const getJoystickModeValue = (controlObj, analogObj) => {
-        let joystickMode = 0;
-        let foundOpt = false;
-        WII_JOYSTICK_MODES.forEach(mode => {
-            if (!foundOpt) {
-                Object.keys(mode.options).forEach(opt => {
-                    if (!foundOpt) {
-                        let modeEntry = mode.options[opt];
-                        let entryID = controlObj.id.toLowerCase()+'.analog'+analogObj.id+'.'+opt+'.axisType';
-                        let entry = wiiControls[entryID];
-                        if (wiiControls[entryID] == modeEntry) {
-                            foundOpt = true;
-                            joystickMode = mode.value;
-                        }
-                    }
-                });
-            }
-        });
-        return joystickMode;
-    };
+	const setWiiAnalogEntry = (controlID, analogID, axes, e) => {
+		let analogEntry = {};
+		let modeID = e.target.value;
+		let joyMode = axes == 2 ? getJoystickMode(modeID) : null;
+		if (joyMode && joyMode.options) {
+			let r = analogEntry;
+			Object.keys(joyMode.options).forEach((key) => {
+				Object.assign(r, {
+					[controlID.toLowerCase() +
+					'.analog' +
+					analogID +
+					'.' +
+					key +
+					'.axisType']: joyMode.options[key],
+				});
+			});
+			analogEntry = r;
+		} else {
+			analogEntry[`${controlID.toLowerCase()}.analog${analogID}.axisType`] =
+				e.target.value;
+		}
+
+		setWiiControls((controls) => ({
+			...wiiControls,
+			...analogEntry,
+		}));
+	};
+
+	const handlePeripheralChange = (e) => {
+		let device = getSelectedPeripheral('i2c', e.target.value);
+		handleChange(e);
+	};
+
+	const getJoystickModeValue = (controlObj, analogObj) => {
+		let joystickMode = 0;
+		let foundOpt = false;
+		WII_JOYSTICK_MODES.forEach((mode) => {
+			if (!foundOpt) {
+				Object.keys(mode.options).forEach((opt) => {
+					if (!foundOpt) {
+						let modeEntry = mode.options[opt];
+						let entryID =
+							controlObj.id.toLowerCase() +
+							'.analog' +
+							analogObj.id +
+							'.' +
+							opt +
+							'.axisType';
+						let entry = wiiControls[entryID];
+						if (wiiControls[entryID] == modeEntry) {
+							foundOpt = true;
+							joystickMode = mode.value;
+						}
+					}
+				});
+			}
+		});
+		return joystickMode;
+	};
 
 	return (
-        <Section title={t('WiiAddon:header-text')}>
-            <div
-                id="WiiExtensionAddonOptions"
-                hidden={!(values.WiiExtensionAddonEnabled && getAvailablePeripherals('i2c'))}
-            >
-                <Row>
-                    <Trans
-                        ns="WiiAddon"
-                        i18nKey="sub-header-text"
-                    >
-                        <p>
-                            Note: If the Display is enabled at the same time, this Addon
-                            will be disabled.
-                        </p>
-                    </Trans>
-                </Row>
-                <Row className="mb-3">
-                    {getAvailablePeripherals('i2c') ?
-                    <FormSelect
-                        label={t('WiiAddon:block-label')}
-                        name="wiiExtensionBlock"
-                        className="form-select-sm"
-                        groupClassName="col-sm-2 col-md-2 mb-3"
-                        value={values.wiiExtensionBlock}
-                        error={errors.wiiExtensionBlock}
-                        isInvalid={errors.wiiExtensionBlock}
-                        onChange={handlePeripheralChange}
-                    >
-                        {getAvailablePeripherals('i2c').map((o, i) => (
-                            <option
-                                key={`wiiExtensionI2cBlock-option-${i}`}
-                                value={o.value}
-                            >
-                                {o.label}
-                            </option>
-                        ))}
-                    </FormSelect>
-                    : ''}
-                </Row>
-                <Row className="mb-3">
-                    <Tabs
-                        defaultActiveKey={`wii${WII_EXTENSION_CONTROLS[0].id}Config`}
-                        id="wiiControllerConfig"
-                        className="mb-3"
-                        fill
-                    >
-                        {WII_EXTENSION_CONTROLS.map((controlObj, controlID) => (
-                            <Tab key={`wii-addon-controller-${controlID}`} eventKey={`wii${controlObj.id}Config`} title={t(`WiiAddon:controller-${controlObj.id.toLowerCase()}`)}>
-                                <Row className="mb-3">
-                                    {controlObj.inputs.digital?.length > 0 ? <h1>{t('WiiAddon:section-digital')}</h1> : ''}
-                                    {controlObj.inputs.digital?.map((buttonObj,buttonID) => (
-                                        <div className="col-sm-12 col-md-6 col-lg-2 mb-2" key={`wiiExtensionController${controlObj.id}Digital${buttonID}`}>
-                                            <label className="form-label" htmlFor={`wiiExtensionController${controlObj.id}Button${buttonObj.id}`}>{t(`WiiAddon:controller-button-${buttonObj.id.toLowerCase()}`)}</label>
-                                            <select className="form-select-sm form-control wii-buttons" controlid={`${controlObj.id.toLowerCase()}`} buttonid={`${buttonObj.id}`} id={`wiiExtensionController${controlObj.id}Button${buttonObj.id}`} value={wiiControls[controlObj.id.toLowerCase()+'.button'+buttonObj.id]} onChange={(e) => setWiiControls((controls) => ({...controls,[`${controlObj.id.toLowerCase()}.button${buttonObj.id}`]: e.target.value,}))}>
-                                            {BUTTON_MASKS.map((o, i) => (
-                                                <option key={`wiiExtensionController${controlObj.id}Button${buttonObj.id}-option-${i}`} value={o.value}>
-                                                    {o.label}
-                                                </option>
-                                            ))}
-                                            </select>
-                                        </div>
-                                    ))}
+		<Section title={t('WiiAddon:header-text')}>
+			<div
+				id="WiiExtensionAddonOptions"
+				hidden={
+					!(values.WiiExtensionAddonEnabled && getAvailablePeripherals('i2c'))
+				}
+			>
+				<Row>
+					<Trans ns="WiiAddon" i18nKey="sub-header-text">
+						<p>
+							Note: If the Display is enabled at the same time, this Addon will
+							be disabled.
+						</p>
+					</Trans>
+				</Row>
+				<Row className="mb-3">
+					{getAvailablePeripherals('i2c') ? (
+						<FormSelect
+							label={t('WiiAddon:block-label')}
+							name="wiiExtensionBlock"
+							className="form-select-sm"
+							groupClassName="col-sm-2 col-md-2 mb-3"
+							value={values.wiiExtensionBlock}
+							error={errors.wiiExtensionBlock}
+							isInvalid={errors.wiiExtensionBlock}
+							onChange={handlePeripheralChange}
+						>
+							{getAvailablePeripherals('i2c').map((o, i) => (
+								<option
+									key={`wiiExtensionI2cBlock-option-${i}`}
+									value={o.value}
+								>
+									{o.label}
+								</option>
+							))}
+						</FormSelect>
+					) : (
+						''
+					)}
+				</Row>
+				<Row className="mb-3">
+					<Tabs
+						defaultActiveKey={`wii${WII_EXTENSION_CONTROLS[0].id}Config`}
+						id="wiiControllerConfig"
+						className="mb-3"
+						fill
+					>
+						{WII_EXTENSION_CONTROLS.map((controlObj, controlID) => (
+							<Tab
+								key={`wii-addon-controller-${controlID}`}
+								eventKey={`wii${controlObj.id}Config`}
+								title={t(`WiiAddon:controller-${controlObj.id.toLowerCase()}`)}
+							>
+								<Row className="mb-3">
+									{controlObj.inputs.digital?.length > 0 ? (
+										<h1>{t('WiiAddon:section-digital')}</h1>
+									) : (
+										''
+									)}
+									{controlObj.inputs.digital?.map((buttonObj, buttonID) => (
+										<div
+											className="col-sm-12 col-md-6 col-lg-2 mb-2"
+											key={`wiiExtensionController${controlObj.id}Digital${buttonID}`}
+										>
+											<label
+												className="form-label"
+												htmlFor={`wiiExtensionController${controlObj.id}Button${buttonObj.id}`}
+											>
+												{t(
+													`WiiAddon:controller-button-${buttonObj.id.toLowerCase()}`,
+												)}
+											</label>
+											<select
+												className="form-select-sm form-control wii-buttons"
+												controlid={`${controlObj.id.toLowerCase()}`}
+												buttonid={`${buttonObj.id}`}
+												id={`wiiExtensionController${controlObj.id}Button${buttonObj.id}`}
+												value={
+													wiiControls[
+														controlObj.id.toLowerCase() +
+															'.button' +
+															buttonObj.id
+													]
+												}
+												onChange={(e) =>
+													setWiiControls((controls) => ({
+														...controls,
+														[`${controlObj.id.toLowerCase()}.button${
+															buttonObj.id
+														}`]: e.target.value,
+													}))
+												}
+											>
+												{BUTTON_MASKS.map((o, i) => (
+													<option
+														key={`wiiExtensionController${controlObj.id}Button${buttonObj.id}-option-${i}`}
+														value={o.value}
+													>
+														{o.label}
+													</option>
+												))}
+											</select>
+										</div>
+									))}
 
-                                    {controlObj.inputs.analog?.length > 0 ? <h1>{t('WiiAddon:section-analog')}</h1> : ''}
-                                    {controlObj.inputs.analog?.map((analogObj,analogID) => (
-                                        <div className="row" key={`analog-input-${analogID}`}>
-                                            <div className="col-sm-1 mb-2" key={`wiiExtensionController${controlObj.id}Analog${analogID}`}>
-                                                {t(`WiiAddon:controller-analog-${analogObj.id.toLowerCase()}`)}
-                                            </div>
-                                            <div className="col-sm-11 mb-2" key={`wiiExtensionController${controlObj.id}Analog${analogID}Options`}>
-                                                <div className="col-sm-12 col-md-6 col-lg-2 mb-2">
-                                                    {analogObj.axes?.length == 1 &&
-                                                    <div className="row">
-                                                        <select className="form-select-sm form-control wii-analogs" controlid={`${controlObj.id.toLowerCase()}`} analogid={`${analogObj.id}`} axisid={`${analogObj.axes[0].axis}`} axiscount={analogObj.axes?.length} id={`wiiExtensionController${controlObj.id}Analog${analogObj.id}`} value={wiiControls[controlObj.id.toLowerCase()+'.analog'+analogObj.id+'.axisType']} onChange={(e) => setWiiAnalogEntry(controlObj.id, analogObj.id, analogObj.axes?.length, e)}>
-                                                            {ANALOG_SINGLE_AXIS_MODES.map((o,i) => (
-                                                                <option key={`wiiSingleAxisMode${controlObj.id}${analogID}${i}`} value={o.value}>{o.label}</option>
-                                                            ))}
-                                                        </select>
-                                                    </div>
-                                                    }
-                                                    {analogObj.axes?.length == 2 &&
-                                                    <div className="row">
-                                                        <select className="form-select-sm form-control wii-analogs" controlid={`${controlObj.id.toLowerCase()}`} analogid={`${analogObj.id}`} axisid={`${analogObj.axes[0].axis}`} axiscount={analogObj.axes?.length} id={`wiiExtensionController${controlObj.id}Analog${analogObj.id}`} value={getJoystickModeValue(controlObj, analogObj)} onChange={(e) => setWiiAnalogEntry(controlObj.id, analogObj.id, analogObj.axes?.length, e)}>
-                                                            {WII_JOYSTICK_MODES.map((o,i) => (
-                                                                <option key={`wiiJoystickMode${controlObj.id}${analogID}${i}`} value={o.value}>{o.label}</option>
-                                                            ))}
-                                                        </select>
-                                                    </div>
-                                                    }
-                                                </div>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </Row>
-                            </Tab>
-                        ))}
-                    </Tabs>
-                </Row>
-                <Row className="mb-3">
-                    <div className="col-sm-3 mb-3">
-                        <Button type="button" onClick={saveWiiOptions}>
-                            {t('WiiAddon:button-save')}
-                        </Button>
-                    </div>
-                </Row>
-            </div>
-            {getAvailablePeripherals('i2c') ?
-            <FormCheck
-				label={t('Common:switch-enabled')}
-				type="switch"
-				id="WiiExtensionButton"
-				reverse={true}
-				isInvalid={false}
-				checked={Boolean(values.WiiExtensionAddonEnabled) && getAvailablePeripherals('i2c')}
-				onChange={(e) => {
-					handleCheckbox('WiiExtensionAddonEnabled', values);
-					handleChange(e);
-				}}
-			/>
-            :
-            <FormLabel><Trans ns="PeripheralMapping" i18nKey="peripheral-toggle-unavailable" values={{'name':'I2C'}}><NavLink exact="true" to="/peripheral-mapping">{t('PeripheralMapping:header-text')}</NavLink></Trans></FormLabel>
-            }
+									{controlObj.inputs.analog?.length > 0 ? (
+										<h1>{t('WiiAddon:section-analog')}</h1>
+									) : (
+										''
+									)}
+									{controlObj.inputs.analog?.map((analogObj, analogID) => (
+										<div className="row" key={`analog-input-${analogID}`}>
+											<div
+												className="col-sm-1 mb-2"
+												key={`wiiExtensionController${controlObj.id}Analog${analogID}`}
+											>
+												{t(
+													`WiiAddon:controller-analog-${analogObj.id.toLowerCase()}`,
+												)}
+											</div>
+											<div
+												className="col-sm-11 mb-2"
+												key={`wiiExtensionController${controlObj.id}Analog${analogID}Options`}
+											>
+												<div className="col-sm-12 col-md-6 col-lg-2 mb-2">
+													{analogObj.axes?.length == 1 && (
+														<div className="row">
+															<select
+																className="form-select-sm form-control wii-analogs"
+																controlid={`${controlObj.id.toLowerCase()}`}
+																analogid={`${analogObj.id}`}
+																axisid={`${analogObj.axes[0].axis}`}
+																axiscount={analogObj.axes?.length}
+																id={`wiiExtensionController${controlObj.id}Analog${analogObj.id}`}
+																value={
+																	wiiControls[
+																		controlObj.id.toLowerCase() +
+																			'.analog' +
+																			analogObj.id +
+																			'.axisType'
+																	]
+																}
+																onChange={(e) =>
+																	setWiiAnalogEntry(
+																		controlObj.id,
+																		analogObj.id,
+																		analogObj.axes?.length,
+																		e,
+																	)
+																}
+															>
+																{ANALOG_SINGLE_AXIS_MODES.map((o, i) => (
+																	<option
+																		key={`wiiSingleAxisMode${controlObj.id}${analogID}${i}`}
+																		value={o.value}
+																	>
+																		{o.label}
+																	</option>
+																))}
+															</select>
+														</div>
+													)}
+													{analogObj.axes?.length == 2 && (
+														<div className="row">
+															<select
+																className="form-select-sm form-control wii-analogs"
+																controlid={`${controlObj.id.toLowerCase()}`}
+																analogid={`${analogObj.id}`}
+																axisid={`${analogObj.axes[0].axis}`}
+																axiscount={analogObj.axes?.length}
+																id={`wiiExtensionController${controlObj.id}Analog${analogObj.id}`}
+																value={getJoystickModeValue(
+																	controlObj,
+																	analogObj,
+																)}
+																onChange={(e) =>
+																	setWiiAnalogEntry(
+																		controlObj.id,
+																		analogObj.id,
+																		analogObj.axes?.length,
+																		e,
+																	)
+																}
+															>
+																{WII_JOYSTICK_MODES.map((o, i) => (
+																	<option
+																		key={`wiiJoystickMode${controlObj.id}${analogID}${i}`}
+																		value={o.value}
+																	>
+																		{o.label}
+																	</option>
+																))}
+															</select>
+														</div>
+													)}
+												</div>
+											</div>
+										</div>
+									))}
+								</Row>
+							</Tab>
+						))}
+					</Tabs>
+				</Row>
+				<Row className="mb-3">
+					<div className="col-sm-3 mb-3">
+						<Button type="button" onClick={saveWiiOptions}>
+							{t('WiiAddon:button-save')}
+						</Button>
+					</div>
+				</Row>
+			</div>
+			{getAvailablePeripherals('i2c') ? (
+				<FormCheck
+					label={t('Common:switch-enabled')}
+					type="switch"
+					id="WiiExtensionButton"
+					reverse={true}
+					isInvalid={false}
+					checked={
+						Boolean(values.WiiExtensionAddonEnabled) &&
+						getAvailablePeripherals('i2c')
+					}
+					onChange={(e) => {
+						handleCheckbox('WiiExtensionAddonEnabled', values);
+						handleChange(e);
+					}}
+				/>
+			) : (
+				<FormLabel>
+					<Trans
+						ns="PeripheralMapping"
+						i18nKey="peripheral-toggle-unavailable"
+						values={{ name: 'I2C' }}
+					>
+						<NavLink exact="true" to="/peripheral-mapping">
+							{t('PeripheralMapping:header-text')}
+						</NavLink>
+					</Trans>
+				</FormLabel>
+			)}
 		</Section>
 	);
 };
diff --git a/www/src/Components/ColorScheme.jsx b/www/src/Components/ColorScheme.jsx
index 8bd9d84a2..c51f147df 100644
--- a/www/src/Components/ColorScheme.jsx
+++ b/www/src/Components/ColorScheme.jsx
@@ -47,11 +47,7 @@ const ColorScheme = () => {
 	};
 
 	return (
-		<DropdownButton
-			variant="secondary"
-			align="end"
-			title={<MoonStarsIcon />}
-		>
+		<DropdownButton variant="secondary" align="end" title={<MoonStarsIcon />}>
 			{translatedDropdownOptions.map((option) => (
 				<Dropdown.Item
 					key={option.scheme}
diff --git a/www/src/Components/ContextualHelpOverlay.tsx b/www/src/Components/ContextualHelpOverlay.tsx
index 1000c6386..58a499da5 100644
--- a/www/src/Components/ContextualHelpOverlay.tsx
+++ b/www/src/Components/ContextualHelpOverlay.tsx
@@ -5,22 +5,24 @@ import Offcanvas from 'react-bootstrap/Offcanvas';
 import InfoCircle from '../Icons/InfoCircle';
 
 const ContextualHelpOverlay = ({ name, ...props }) => {
-    const [show, setShow] = useState(false);
+	const [show, setShow] = useState(false);
 
-    const handleClose = () => setShow(false);
-    const handleShow = () => setShow(true);
+	const handleClose = () => setShow(false);
+	const handleShow = () => setShow(true);
 
-    return (
-        <>
-            <Button variant="link" onClick={handleShow} className="me-2"><InfoCircle /></Button>
-            <Offcanvas show={show} onHide={handleClose} {...props}>
-                <Offcanvas.Header closeButton>
-                    <Offcanvas.Title>{props.title}</Offcanvas.Title>
-                </Offcanvas.Header>
-                <Offcanvas.Body>{props.body}</Offcanvas.Body>
-            </Offcanvas>
-        </>
-    );
+	return (
+		<>
+			<Button variant="link" onClick={handleShow} className="me-2">
+				<InfoCircle />
+			</Button>
+			<Offcanvas show={show} onHide={handleClose} {...props}>
+				<Offcanvas.Header closeButton>
+					<Offcanvas.Title>{props.title}</Offcanvas.Title>
+				</Offcanvas.Header>
+				<Offcanvas.Body>{props.body}</Offcanvas.Body>
+			</Offcanvas>
+		</>
+	);
 };
 
-export default ContextualHelpOverlay;
\ No newline at end of file
+export default ContextualHelpOverlay;
diff --git a/www/src/Components/LanguageSelector.jsx b/www/src/Components/LanguageSelector.jsx
index d292a0660..90c0538f9 100644
--- a/www/src/Components/LanguageSelector.jsx
+++ b/www/src/Components/LanguageSelector.jsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from 'react';
-import { Dropdown , DropdownButton } from 'react-bootstrap';
+import { Dropdown, DropdownButton } from 'react-bootstrap';
 import { AppContext } from '../Contexts/AppContext';
 import { useTranslation } from 'react-i18next';
 import GlobeIcon from '../Icons/Globe';
@@ -37,11 +37,7 @@ const LanguageSelector = () => {
 	};
 
 	return (
-		<DropdownButton
-			variant="secondary"
-			align="end"
-			title={<GlobeIcon />}
-		>
+		<DropdownButton variant="secondary" align="end" title={<GlobeIcon />}>
 			{dropdownOptions.map((option) => (
 				<Dropdown.Item
 					key={option.code}
diff --git a/www/src/Components/Navigation.jsx b/www/src/Components/Navigation.jsx
index d310b7150..2bc0929b7 100644
--- a/www/src/Components/Navigation.jsx
+++ b/www/src/Components/Navigation.jsx
@@ -1,11 +1,5 @@
 import React, { useContext, useState } from 'react';
-import {
-	Nav,
-	NavDropdown,
-	Navbar,
-	Button,
-	Modal,
-} from 'react-bootstrap';
+import { Nav, NavDropdown, Navbar, Button, Modal } from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { AppContext } from '../Contexts/AppContext';
@@ -50,7 +44,7 @@ const Navigation = () => {
 	};
 
 	const { t } = useTranslation('');
-	
+
 	// eventKey prop is required on NavLink components in order for mobile menu
 	// to autoclose, so just auto increment as we build the menu
 	let eventKey = 0;
@@ -64,7 +58,11 @@ const Navigation = () => {
 			fixed="top"
 		>
 			<Navbar.Brand href="/" title={`GP2040-CE ${t('Navigation:home-label')}`}>
-				<img src="images/logo.png" className="title-logo" alt="GP2040-CE logo" />{' '}
+				<img
+					src="images/logo.png"
+					className="title-logo"
+					alt="GP2040-CE logo"
+				/>{' '}
 			</Navbar.Brand>
 			<Navbar.Toggle aria-controls="responsive-navbar-nav" />
 			<Navbar.Collapse id="basic-navbar-nav">
@@ -73,19 +71,39 @@ const Navigation = () => {
 						{t('Navigation:settings-label')}
 					</Nav.Link>
 					<NavDropdown title={t('Navigation:config-label')}>
-						<NavDropdown.Item as={NavLink} eventKey={eventKey++} to="/pin-mapping">
+						<NavDropdown.Item
+							as={NavLink}
+							eventKey={eventKey++}
+							to="/pin-mapping"
+						>
 							{t('Navigation:pin-mapping-label')}
 						</NavDropdown.Item>
-						<NavDropdown.Item as={NavLink} eventKey={eventKey++} to="/peripheral-mapping">
+						<NavDropdown.Item
+							as={NavLink}
+							eventKey={eventKey++}
+							to="/peripheral-mapping"
+						>
 							{t('Navigation:peripheral-mapping-label')}
 						</NavDropdown.Item>
-						<NavDropdown.Item as={NavLink} eventKey={eventKey++} to="/led-config">
+						<NavDropdown.Item
+							as={NavLink}
+							eventKey={eventKey++}
+							to="/led-config"
+						>
 							{t('Navigation:led-config-label')}
 						</NavDropdown.Item>
-						<NavDropdown.Item as={NavLink} eventKey={eventKey++} to="/custom-theme">
+						<NavDropdown.Item
+							as={NavLink}
+							eventKey={eventKey++}
+							to="/custom-theme"
+						>
 							{t('Navigation:custom-theme-label')}
 						</NavDropdown.Item>
-						<NavDropdown.Item as={NavLink} eventKey={eventKey++} to="/display-config">
+						<NavDropdown.Item
+							as={NavLink}
+							eventKey={eventKey++}
+							to="/display-config"
+						>
 							{t('Navigation:display-config-label')}
 						</NavDropdown.Item>
 						<NavDropdown.Item as={NavLink} eventKey={eventKey++} to="/add-ons">
@@ -97,8 +115,14 @@ const Navigation = () => {
 						<NavDropdown.Item as={NavLink} eventKey={eventKey++} to="/backup">
 							{t('Navigation:backup-label')}
 						</NavDropdown.Item>
-						<NavDropdown.Item as={NavLink} eventKey={eventKey++} to="/reset-settings">
-							<span className="reset-settings-link">{t('Navigation:resetSettings-label')}</span>
+						<NavDropdown.Item
+							as={NavLink}
+							eventKey={eventKey++}
+							to="/reset-settings"
+						>
+							<span className="reset-settings-link">
+								{t('Navigation:resetSettings-label')}
+							</span>
 						</NavDropdown.Item>
 					</NavDropdown>
 					<NavDropdown title={t('Navigation:links-label')}>
@@ -114,10 +138,7 @@ const Navigation = () => {
 					</NavDropdown>
 				</Nav>
 				<Nav className="navbar-actions">
-					<Button
-						variant="success"
-						onClick={handleShow}
-					>
+					<Button variant="success" onClick={handleShow}>
 						{t('Navigation:reboot-label')}
 					</Button>
 					<ColorScheme />
diff --git a/www/src/Components/Navigation.scss b/www/src/Components/Navigation.scss
index ec0d0f494..095dfa980 100644
--- a/www/src/Components/Navigation.scss
+++ b/www/src/Components/Navigation.scss
@@ -23,7 +23,7 @@ nav.navbar {
 	}
 
 	.reset-settings-link {
-		color: #FF0000;
+		color: #ff0000;
 	}
 }
 
diff --git a/www/src/Contexts/AppContext.jsx b/www/src/Contexts/AppContext.jsx
index 80cb1d03c..7ff39723c 100644
--- a/www/src/Contexts/AppContext.jsx
+++ b/www/src/Contexts/AppContext.jsx
@@ -77,7 +77,7 @@ yup.addMethod(yup.NumberSchema, 'validatePinWhenValue', function (name) {
 		is: 1,
 		then: () => this.checkUsedPins(),
 		otherwise: () => yup.mixed().notRequired().strip(),
-	})
+	});
 });
 
 yup.addMethod(yup.NumberSchema, 'checkUsedPins', function () {
@@ -178,7 +178,9 @@ export const AppContextProvider = ({ children, ...props }) => {
 	};
 
 	const [usedPins, setUsedPins] = useState([]);
-	const [availablePeripherals, setAvailablePeripherals] = useState(basePeripheralMapping);
+	const [availablePeripherals, setAvailablePeripherals] = useState(
+		basePeripheralMapping,
+	);
 	const [expansionPins, setExpansionPins] = useState({});
 	const [availableAddons, setAvailableAddons] = useState({});
 
@@ -221,30 +223,50 @@ export const AppContextProvider = ({ children, ...props }) => {
 
 	console.log('usedPins:', usedPins);
 
-	useEffect(() => {
-	}, [expansionPins, setExpansionPins]);
+	useEffect(() => {}, [expansionPins, setExpansionPins]);
 
 	const getAvailablePeripherals = (device) => {
 		// gymnastics to make sure the device is defined before trusting config value
 		let peripherals = Object.keys(availablePeripherals.peripheral)
-			.filter((p) => PERIPHERAL_DEVICES.find((d) => d.label == device).blocks.map(({label}) => label).indexOf(p) > -1)
+			.filter(
+				(p) =>
+					PERIPHERAL_DEVICES.find((d) => d.label == device)
+						.blocks.map(({ label }) => label)
+						.indexOf(p) > -1,
+			)
 			.filter((label) => availablePeripherals.peripheral[label].enabled)
-			.map((l) => ({label: l, value: PERIPHERAL_DEVICES.find((d) => d.label == device).blocks.find(({label}) => label == l).value}));
-		return (peripherals.length > 0 ? peripherals : false);
+			.map((l) => ({
+				label: l,
+				value: PERIPHERAL_DEVICES.find((d) => d.label == device).blocks.find(
+					({ label }) => label == l,
+				).value,
+			}));
+		return peripherals.length > 0 ? peripherals : false;
 	};
 
-	const getSelectedPeripheral = (device,block) => {
-		let peripheral = availablePeripherals.peripheral[Object.keys(availablePeripherals.peripheral)
-			.filter((p) => PERIPHERAL_DEVICES.find((d) => d.label == device).blocks.map(({label}) => label).indexOf(p) > -1)
-			.filter((label) => availablePeripherals.peripheral[label].enabled)
-			.map((l) => ({label: l, value: PERIPHERAL_DEVICES.find((d) => d.label == device).blocks.find(({label}) => label == l).value}))
-			.find((p) => p.value == block).label];
+	const getSelectedPeripheral = (device, block) => {
+		let peripheral =
+			availablePeripherals.peripheral[
+				Object.keys(availablePeripherals.peripheral)
+					.filter(
+						(p) =>
+							PERIPHERAL_DEVICES.find((d) => d.label == device)
+								.blocks.map(({ label }) => label)
+								.indexOf(p) > -1,
+					)
+					.filter((label) => availablePeripherals.peripheral[label].enabled)
+					.map((l) => ({
+						label: l,
+						value: PERIPHERAL_DEVICES.find(
+							(d) => d.label == device,
+						).blocks.find(({ label }) => label == l).value,
+					}))
+					.find((p) => p.value == block).label
+			];
 		return peripheral;
 	};
 
-	useEffect(() => {
-
-	}, [availablePeripherals, setAvailablePeripherals]);
+	useEffect(() => {}, [availablePeripherals, setAvailablePeripherals]);
 
 	useEffect(() => {
 		async function fetchData() {
diff --git a/www/src/Data/Buttons.js b/www/src/Data/Buttons.js
index 86a9a42c6..e343da572 100644
--- a/www/src/Data/Buttons.js
+++ b/www/src/Data/Buttons.js
@@ -234,7 +234,7 @@ export const BUTTON_MASKS = [
 export const ANALOG_PINS = [26, 27, 28, 29];
 
 // deep copy and swp
-export const getButtonLabels = (labelType, swapTpShareLabels = false)=> {
+export const getButtonLabels = (labelType, swapTpShareLabels = false) => {
 	const buttons = BUTTONS[labelType];
 
 	if (labelType == 'ps4' && swapTpShareLabels) {
@@ -242,10 +242,10 @@ export const getButtonLabels = (labelType, swapTpShareLabels = false)=> {
 		const buttonLabelA2 = buttons['A2'];
 		return {
 			...buttons,
-			"S1": buttonLabelA2,
-			"A2": buttonLabelS1,
-		}
+			S1: buttonLabelA2,
+			A2: buttonLabelS1,
+		};
 	} else {
-		return buttons
+		return buttons;
 	}
-}
\ No newline at end of file
+};
diff --git a/www/src/Data/Peripherals.ts b/www/src/Data/Peripherals.ts
index 3616678b7..aa075f8f6 100644
--- a/www/src/Data/Peripherals.ts
+++ b/www/src/Data/Peripherals.ts
@@ -1,48 +1,74 @@
 export const I2C_BLOCKS = [
-	{ label: 'i2c0', value: 0, pins: { sda: [0,4,8,12,16,20], scl: [1,5,9,13,17,21] } },
-	{ label: 'i2c1', value: 1, pins: { sda: [2,6,10,14,18,26], scl: [3,7,11,15,19,27] } }
+	{
+		label: 'i2c0',
+		value: 0,
+		pins: { sda: [0, 4, 8, 12, 16, 20], scl: [1, 5, 9, 13, 17, 21] },
+	},
+	{
+		label: 'i2c1',
+		value: 1,
+		pins: { sda: [2, 6, 10, 14, 18, 26], scl: [3, 7, 11, 15, 19, 27] },
+	},
 ];
 
 export const SPI_BLOCKS = [
-	{ label: 'spi0', value: 0, pins: { rx: [0,4,16,20], cs: [1,5,17,21], sck: [2,6,18,22], tx: [3,7,19,23] } },
-	{ label: 'spi1', value: 1, pins: { rx: [8,12,24,28], cs: [9,13,25,29], sck: [10,14,26], tx: [11,15,27] } }
+	{
+		label: 'spi0',
+		value: 0,
+		pins: {
+			rx: [0, 4, 16, 20],
+			cs: [1, 5, 17, 21],
+			sck: [2, 6, 18, 22],
+			tx: [3, 7, 19, 23],
+		},
+	},
+	{
+		label: 'spi1',
+		value: 1,
+		pins: {
+			rx: [8, 12, 24, 28],
+			cs: [9, 13, 25, 29],
+			sck: [10, 14, 26],
+			tx: [11, 15, 27],
+		},
+	},
 ];
 
 export const USB_BLOCKS = [
-	{ label: 'usb0', value: 0, pins: { dp: [], enable5v: [] } }
+	{ label: 'usb0', value: 0, pins: { dp: [], enable5v: [] } },
 ];
 
 export const PERIPHERAL_DEVICES = [
-    { 
-        label: 'i2c', 
-        value: 0, 
-        blocks: I2C_BLOCKS,
-        pinTable: true,
-        options: {
-            speed: [ 
-                { label: 'Normal', value: 100000 },
-                { label: 'Fast', value: 400000, isDefault: true },
-                { label: 'Fast Plus', value: 1000000 },
-            ]
-        }
-    },
-    {
-        label: 'spi', 
-        value: 1, 
-        blocks: SPI_BLOCKS,
-        pinTable: true,
-        options: {}
-    },
-    {
-        label: 'usb', 
-        value: 2, 
-        blocks: USB_BLOCKS,
-        pinTable: false,
-        options: {
-            order: [
-                { label: 'D+/D-', value: 0, isDefault: true },
-                { label: 'D-/D+', value: 1 },
-            ]
-        }
-    },
+	{
+		label: 'i2c',
+		value: 0,
+		blocks: I2C_BLOCKS,
+		pinTable: true,
+		options: {
+			speed: [
+				{ label: 'Normal', value: 100000 },
+				{ label: 'Fast', value: 400000, isDefault: true },
+				{ label: 'Fast Plus', value: 1000000 },
+			],
+		},
+	},
+	{
+		label: 'spi',
+		value: 1,
+		blocks: SPI_BLOCKS,
+		pinTable: true,
+		options: {},
+	},
+	{
+		label: 'usb',
+		value: 2,
+		blocks: USB_BLOCKS,
+		pinTable: false,
+		options: {
+			order: [
+				{ label: 'D+/D-', value: 0, isDefault: true },
+				{ label: 'D-/D+', value: 1 },
+			],
+		},
+	},
 ];
diff --git a/www/src/Data/Pins.ts b/www/src/Data/Pins.ts
index f2be322ec..77ef0b49a 100644
--- a/www/src/Data/Pins.ts
+++ b/www/src/Data/Pins.ts
@@ -48,8 +48,8 @@ export const BUTTON_ACTIONS = {
 } as const;
 
 export const PIN_DIRECTIONS = {
-    DIRECTION_INPUT: 0,
-    DIRECTION_OUTPUT: 1,
+	DIRECTION_INPUT: 0,
+	DIRECTION_OUTPUT: 1,
 } as const;
 
 type PinActionKeys = keyof typeof BUTTON_ACTIONS;
diff --git a/www/src/Icons/InfoCircle.tsx b/www/src/Icons/InfoCircle.tsx
index 7dfcc06e0..882f803f6 100644
--- a/www/src/Icons/InfoCircle.tsx
+++ b/www/src/Icons/InfoCircle.tsx
@@ -3,15 +3,15 @@ import React from 'react';
 // Source: https://icons.getbootstrap.com/icons/info-circle/
 
 const InfoCircle = () => (
-	<svg 
-		xmlns="http://www.w3.org/2000/svg" 
-		width="16" 
-		height="16" 
-		fill="currentColor" 
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="16"
+		height="16"
+		fill="currentColor"
 		viewBox="0 0 16 16"
 	>
-		<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-		<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+		<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+		<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
 	</svg>
 );
-export default InfoCircle;
\ No newline at end of file
+export default InfoCircle;
diff --git a/www/src/Locales/de-DE/Addons/WiiAddon.jsx b/www/src/Locales/de-DE/Addons/WiiAddon.jsx
index 19a3adf5d..f335eadda 100644
--- a/www/src/Locales/de-DE/Addons/WiiAddon.jsx
+++ b/www/src/Locales/de-DE/Addons/WiiAddon.jsx
@@ -1,72 +1,77 @@
 export default {
-    'header-text': 'Wii Erweiterung',
-    'sub-header-text': '<0>Hinweis: Wenn das Display gleichzeitig aktiviert ist, wird dieses Add-On deaktiviert.</0>',
-    'sda-pin-label': 'I2C SDA Pin',
-    'scl-pin-label': 'I2C SCL Pin',
-    'block-label': 'I2C Block',
-    'speed-label': 'I2C Geschwindigkeit',
-    'section-digital': 'Digital',
-    'section-analog': 'Analog',
-    'option-simple': 'Simpel',
-    'option-advanced': 'Fortgeschritten',
-    'controller-nunchuk': 'Nunchuk',
-    'controller-classic': 'Klassisch',
-    'controller-taiko': 'Taiko',
-    'controller-guitar': 'Gitarre',
-    'controller-drum': 'Trommeln',
-    'controller-turntable': 'Plattenteller',
-    'controller-button-a': 'A',
-    'controller-button-b': 'B',
-    'controller-button-c': 'C',
-    'controller-button-x': 'X',
-    'controller-button-y': 'Y',
-    'controller-button-z': 'Z',
-    'controller-button-l': 'L',
-    'controller-button-r': 'R',
-    'controller-button-zl': 'ZL',
-    'controller-button-zr': 'ZR',
-    'controller-button-minus': 'Minus',
-    'controller-button-home': 'Home',
-    'controller-button-plus': 'Plus',
-    'controller-button-up': 'Hoch',
-    'controller-button-down': 'Runter',
-    'controller-button-left': 'Links',
-    'controller-button-right': 'Rechts',
-    'controller-button-euphoria': 'Euphorie',
-    'controller-button-leftgreen': 'Links Grün',
-    'controller-button-leftred': 'Links Rot',
-    'controller-button-leftblue': 'Links Blau',
-    'controller-button-rightgreen': 'Rechts Grün',
-    'controller-button-rightred': 'Rechts Rot',
-    'controller-button-rightblue': 'Rechts Blau',
-    'controller-button-orange': 'Orange',
-    'controller-button-red': 'Rot',
-    'controller-button-blue': 'Blau',
-    'controller-button-green': 'Grün',
-    'controller-button-yellow': 'Gelb',
-    'controller-button-pedal': 'Pedal',
-    'controller-button-strumup': 'Hochklimpern',
-    'controller-button-strumdown': 'Runterklimpern',
-    'controller-button-donleft': 'Don Links',
-    'controller-button-katleft': 'Kat Links',
-    'controller-button-donright': 'Don Rechts',
-    'controller-button-katright': 'Kat Rechts',
-    'controller-analog-stick': 'Stick',
-    'controller-analog-leftstick': 'Linker Stick',
-    'controller-analog-rightstick': 'Rechter Stick',
-    'controller-analog-lefttrigger': 'L',
-    'controller-analog-righttrigger': 'R',
-    'controller-analog-leftturntable': 'Plattenteller Links',
-    'controller-analog-rightturntable': 'Plattenteller Rechts',
-    'controller-analog-fader': 'Fader',
-    'controller-analog-effects': 'Effektregler',
-    'controller-analog-whammybar': 'Whammy Bar',
-    'controller-analog-axis-x': 'X +/- Achse',
-    'controller-analog-axis-y': 'Y +/- Achse',
-    'controller-analog-axis-trigger': 'Auslöser',
-    'analog-axis-mode-trigger': '<0>Der gesamte Wertebereich wird an die Schnittstelle gesendet.</0>',
-    'analog-axis-mode-button': '<0>Fungiert als digitaler Schalter und stellt nach einem definierten Schwellenwert einen „gedrückten“ Zustand ein.</0>',
-    'analog-axis-mode-normal-direction': '<0>Der gesamte Wertebereich wird auf die Achse eines Joysticks übertragen, wobei der niedrigste Wert als negative Flanke und der maximale Wert als positive Flanke angenommen wird.</0>',
-    'analog-axis-mode-invert-direction': '<0>Der gesamte Wertebereich wird auf die Achse eines Joysticks übertragen, wobei der niedrigste Wert als positive Flanke und der maximale Wert als negative Flanke angenommen wird.</0>',
-    'button-save': 'Controller Speichern',
+	'header-text': 'Wii Erweiterung',
+	'sub-header-text':
+		'<0>Hinweis: Wenn das Display gleichzeitig aktiviert ist, wird dieses Add-On deaktiviert.</0>',
+	'sda-pin-label': 'I2C SDA Pin',
+	'scl-pin-label': 'I2C SCL Pin',
+	'block-label': 'I2C Block',
+	'speed-label': 'I2C Geschwindigkeit',
+	'section-digital': 'Digital',
+	'section-analog': 'Analog',
+	'option-simple': 'Simpel',
+	'option-advanced': 'Fortgeschritten',
+	'controller-nunchuk': 'Nunchuk',
+	'controller-classic': 'Klassisch',
+	'controller-taiko': 'Taiko',
+	'controller-guitar': 'Gitarre',
+	'controller-drum': 'Trommeln',
+	'controller-turntable': 'Plattenteller',
+	'controller-button-a': 'A',
+	'controller-button-b': 'B',
+	'controller-button-c': 'C',
+	'controller-button-x': 'X',
+	'controller-button-y': 'Y',
+	'controller-button-z': 'Z',
+	'controller-button-l': 'L',
+	'controller-button-r': 'R',
+	'controller-button-zl': 'ZL',
+	'controller-button-zr': 'ZR',
+	'controller-button-minus': 'Minus',
+	'controller-button-home': 'Home',
+	'controller-button-plus': 'Plus',
+	'controller-button-up': 'Hoch',
+	'controller-button-down': 'Runter',
+	'controller-button-left': 'Links',
+	'controller-button-right': 'Rechts',
+	'controller-button-euphoria': 'Euphorie',
+	'controller-button-leftgreen': 'Links Grün',
+	'controller-button-leftred': 'Links Rot',
+	'controller-button-leftblue': 'Links Blau',
+	'controller-button-rightgreen': 'Rechts Grün',
+	'controller-button-rightred': 'Rechts Rot',
+	'controller-button-rightblue': 'Rechts Blau',
+	'controller-button-orange': 'Orange',
+	'controller-button-red': 'Rot',
+	'controller-button-blue': 'Blau',
+	'controller-button-green': 'Grün',
+	'controller-button-yellow': 'Gelb',
+	'controller-button-pedal': 'Pedal',
+	'controller-button-strumup': 'Hochklimpern',
+	'controller-button-strumdown': 'Runterklimpern',
+	'controller-button-donleft': 'Don Links',
+	'controller-button-katleft': 'Kat Links',
+	'controller-button-donright': 'Don Rechts',
+	'controller-button-katright': 'Kat Rechts',
+	'controller-analog-stick': 'Stick',
+	'controller-analog-leftstick': 'Linker Stick',
+	'controller-analog-rightstick': 'Rechter Stick',
+	'controller-analog-lefttrigger': 'L',
+	'controller-analog-righttrigger': 'R',
+	'controller-analog-leftturntable': 'Plattenteller Links',
+	'controller-analog-rightturntable': 'Plattenteller Rechts',
+	'controller-analog-fader': 'Fader',
+	'controller-analog-effects': 'Effektregler',
+	'controller-analog-whammybar': 'Whammy Bar',
+	'controller-analog-axis-x': 'X +/- Achse',
+	'controller-analog-axis-y': 'Y +/- Achse',
+	'controller-analog-axis-trigger': 'Auslöser',
+	'analog-axis-mode-trigger':
+		'<0>Der gesamte Wertebereich wird an die Schnittstelle gesendet.</0>',
+	'analog-axis-mode-button':
+		'<0>Fungiert als digitaler Schalter und stellt nach einem definierten Schwellenwert einen „gedrückten“ Zustand ein.</0>',
+	'analog-axis-mode-normal-direction':
+		'<0>Der gesamte Wertebereich wird auf die Achse eines Joysticks übertragen, wobei der niedrigste Wert als negative Flanke und der maximale Wert als positive Flanke angenommen wird.</0>',
+	'analog-axis-mode-invert-direction':
+		'<0>Der gesamte Wertebereich wird auf die Achse eines Joysticks übertragen, wobei der niedrigste Wert als positive Flanke und der maximale Wert als negative Flanke angenommen wird.</0>',
+	'button-save': 'Controller Speichern',
 };
diff --git a/www/src/Locales/de-DE/AddonsConfig.jsx b/www/src/Locales/de-DE/AddonsConfig.jsx
index a71b1ff92..6aa443382 100644
--- a/www/src/Locales/de-DE/AddonsConfig.jsx
+++ b/www/src/Locales/de-DE/AddonsConfig.jsx
@@ -46,7 +46,8 @@ export default {
 	'joystick-selection-slider-header-text': 'Joystick Auswahl Schieberegler',
 	'joystick-selection-slider-pin-one-label': 'Schieberegler Pin Eins',
 	'joystick-selection-slider-pin-two-label': 'Schieberegler Pin Zwei',
-	'joystick-selection-slider-mode-zero-label': 'Schieberegler Pin Modus Standard',
+	'joystick-selection-slider-mode-zero-label':
+		'Schieberegler Pin Modus Standard',
 	'joystick-selection-slider-mode-one-label': 'Schieberegler Pin Modus Eins',
 	'joystick-selection-slider-mode-two-label': 'Schieberegler Pin Modus Zwei',
 	'input-reverse-header-text': 'Eingabe Umkehren',
@@ -108,16 +109,19 @@ export default {
 	'socd-cleaning-mode-selection-slider-header-text':
 		'SOCD Säuberungsmodus Auswahl-Schieberegler',
 	'socd-cleaning-mode-selection-slider-sub-header-text':
-		'Hinweis: PS4, PS3 und Nintendo Switch modi unterstützen nicht die SOCD-Säuberung auf \'Aus\' und verwenden standardmäßig den neutralen SOCD-Säuberungsmodus',
+		"Hinweis: PS4, PS3 und Nintendo Switch modi unterstützen nicht die SOCD-Säuberung auf 'Aus' und verwenden standardmäßig den neutralen SOCD-Säuberungsmodus",
 	'socd-cleaning-mode-selection-slider-mode-default-label':
 		'SOCD Schieberegler Modus Standard',
-	'socd-cleaning-mode-selection-slider-mode-one-label': 'SOCD Schieberegler Modus Eins',
+	'socd-cleaning-mode-selection-slider-mode-one-label':
+		'SOCD Schieberegler Modus Eins',
 	'socd-cleaning-mode-selection-slider-pin-one-label': 'Pin Eins',
-	'socd-cleaning-mode-selection-slider-mode-two-label': 'SOCD Schieberegler Modus Zwei',
+	'socd-cleaning-mode-selection-slider-mode-two-label':
+		'SOCD Schieberegler Modus Zwei',
 	'socd-cleaning-mode-selection-slider-pin-two-label': 'Pin Zwei',
 	'ps4-mode-header-text': 'PS4 Modus',
 	'ps4-mode-sub-header': 'HAFTUNGSAUSSCHLUSS!',
-	'ps4-mode-sub-header-text': 'GP2040-CE WIRD NIEMALS DIESE DATEIEN ZUR VERFÜGUNG STELLEN!!!',
+	'ps4-mode-sub-header-text':
+		'GP2040-CE WIRD NIEMALS DIESE DATEIEN ZUR VERFÜGUNG STELLEN!!!',
 	'ps4-mode-text':
 		'Bitte laden Sie die 3 benötigten Dateien hoch und klicken Sie die "Verifizieren & Speichern" Schaltfläche, um den PS4 Modus zu benutzen.',
 	'ps4-mode-private-key-label': 'Privater Schlüssel (PEM)',
@@ -126,7 +130,7 @@ export default {
 	'snes-extension-header-text': 'SNES-Erweiterungskonfiguration',
 	'snes-extension-sub-header-text':
 		'<0>Hinweis: Falls das Display zur gleichen Zeit aktiviert ist, wird diese Addon deaktiviert.</0> <1>Derzeit unterstützte Controller</1> <0>SNES pad: D-Pad Unterstützung. B = B1, A = B2, Y = B3, X = B4, L = L1, R = R1, Select = S1, Start = S2</0> <0>SNES maus: Analog Stick Unterstützt. Linksklick = B1, Rechtsklick = B2</0> <0>NES: D-Pad Unterstützt. B = B1, A = B2, Select = S1, Start = S2</0>',
-	'snes-extension-clock-pin-label': 'Takt Pin', 
+	'snes-extension-clock-pin-label': 'Takt Pin',
 	'snes-extension-latch-pin-label': 'Latch Pin',
 	'snes-extension-data-pin-label': 'Daten Pin',
 	'focus-mode-header-text': 'Fokus-Modus-Konfiguration',
@@ -137,9 +141,10 @@ export default {
 	'keyboard-host-d-plus-label': 'D+',
 	'keyboard-host-d-minus-label': 'D-',
 	'keyboard-host-five-v-label': '5V-Stromversorgung (optional)',
-	'pin-config-moved-to-core-text': 'Hinweis: Die Pins für dieses Add-On werden jetzt auf der Seite für die Pin-Zuordnung konfiguriert',
+	'pin-config-moved-to-core-text':
+		'Hinweis: Die Pins für dieses Add-On werden jetzt auf der Seite für die Pin-Zuordnung konfiguriert',
 	'input-history-header-text': 'Eingabeverlauf',
 	'input-history-length-label': 'Verlaufslänge (Zeichen)',
 	'input-history-col-label': 'Spalte',
-	'input-history-row-label': 'Reihe'
+	'input-history-row-label': 'Reihe',
 };
diff --git a/www/src/Locales/de-DE/Common.jsx b/www/src/Locales/de-DE/Common.jsx
index a7fe1fe2b..24e409967 100644
--- a/www/src/Locales/de-DE/Common.jsx
+++ b/www/src/Locales/de-DE/Common.jsx
@@ -2,7 +2,7 @@ export default {
 	'brand-text': 'GP2040-CE',
 	'button-clear-all-label': 'Alles löschen',
 	'button-delete-color-label': 'Farbe Löschen',
-	'button-dismiss-label': 'Verwerfen', 
+	'button-dismiss-label': 'Verwerfen',
 	'button-load-label': 'Laden',
 	'button-reset-settings-label': 'Einstellungen zurücksetzen',
 	'button-save-color-label': 'Farbe Speichern',
diff --git a/www/src/Locales/de-DE/CustomTheme.jsx b/www/src/Locales/de-DE/CustomTheme.jsx
index 719217673..124c2ca53 100644
--- a/www/src/Locales/de-DE/CustomTheme.jsx
+++ b/www/src/Locales/de-DE/CustomTheme.jsx
@@ -3,10 +3,10 @@ export default {
 	'sub-header-text':
 		'Hier können Sie benutzerdefinierte LED-Thema aktivieren und konfigurieren.<br />Das benutzerdefinierte Thema kann mithilfe der Tastenkürzel für die nächste und vorherige Animation auf Ihrem Controller ausgewählt werden.',
 	'list-text':
-		"<1>Klicken Sie auf eine Taste, um die Auswahl der Normal- und Gedrückt-Farben anzuzeigen.</1> <1>Klicken Sie auf den Controller Hintergrund, um die Farbauswahl zu verwerfen.</1> <1>Rechtsclick auf eine Taste, um eine Vorschau der gedrückten Farbe der Taste zu sehen.</1>",
+		'<1>Klicken Sie auf eine Taste, um die Auswahl der Normal- und Gedrückt-Farben anzuzeigen.</1> <1>Klicken Sie auf den Controller Hintergrund, um die Farbauswahl zu verwerfen.</1> <1>Rechtsclick auf eine Taste, um eine Vorschau der gedrückten Farbe der Taste zu sehen.</1>',
 	'led-layout-label': 'Layout-Vorschau',
 	'has-custom-theme-label': 'Aktivieren',
-	'modal-title': 'Bestätigen Sie das Löschen des benutzerdefinierten Themas', 
+	'modal-title': 'Bestätigen Sie das Löschen des benutzerdefinierten Themas',
 	'modal-body':
 		'Sind Sie sicher, dass Sie Ihr aktuelles benutzerdefiniertes LED-Thema löschen möchten?',
 	'modal-no': 'Nein',
diff --git a/www/src/Locales/de-DE/DisplayConfig.jsx b/www/src/Locales/de-DE/DisplayConfig.jsx
index 16107253a..c729f7825 100644
--- a/www/src/Locales/de-DE/DisplayConfig.jsx
+++ b/www/src/Locales/de-DE/DisplayConfig.jsx
@@ -4,11 +4,11 @@ export default {
 		'Ein monochromes Display kann dazu verwendet werden, um den Status des Controllers und die Aktivität der Tasten anzuzeigen. Stellen Sie sicher, dass Ihr Display-Modul die folgenden Eigenschaften hat:',
 	'list-text':
 		'<1>Monochromes Display mit 128x64 Auflösung</1> <1>Verwendet I2C mit einem SSD1306-, SH1106-, SH1107- oder einem anderen kompatiblen Anzeige-IC</1> <1>Unterstützt den Betrieb mit 3,3V</1>',
-    section: {
-        'hardware-header': 'Hardware Optionen',
-        'screen-header': 'Bildschirm Optionen',
-        'layout-header': 'Layout Optionen',
-    },
+	section: {
+		'hardware-header': 'Hardware Optionen',
+		'screen-header': 'Bildschirm Optionen',
+		'layout-header': 'Layout Optionen',
+	},
 	table: {
 		header:
 			'Verwenden Sie diese Tabellen, um zu bestimmen, welchen I2C-Block Sie basierend auf den konfigurierten SDA- und SCL-Pins auswählen haben:',
@@ -33,9 +33,11 @@ export default {
 		'button-layout-custom-button-radius-label': 'Tasten Radius',
 		'button-layout-custom-button-padding-label': 'Tastenabstand',
 		'splash-mode-label': 'Splash Modus',
-		'splash-duration-label': 'Splash Dauer (Sekunden, 0 für immer eingeschaltet)',
-		'display-saver-timeout-label': 'Timeout für den Bildschirmschoner (Minuten)',
+		'splash-duration-label':
+			'Splash Dauer (Sekunden, 0 für immer eingeschaltet)',
+		'display-saver-timeout-label':
+			'Timeout für den Bildschirmschoner (Minuten)',
 		'inverted-label': 'Invertiert',
-		'turn-off-when-suspended': 'Ausschalten im Ruhezustand'
+		'turn-off-when-suspended': 'Ausschalten im Ruhezustand',
 	},
 };
diff --git a/www/src/Locales/de-DE/InputMacroAddon.jsx b/www/src/Locales/de-DE/InputMacroAddon.jsx
index 784ad1411..5e6254b1e 100644
--- a/www/src/Locales/de-DE/InputMacroAddon.jsx
+++ b/www/src/Locales/de-DE/InputMacroAddon.jsx
@@ -8,12 +8,13 @@ export default {
 	'input-macro-wait-duration-label': 'Warte Dauer',
 	'input-macro-time-label-ms': 'ms',
 	'input-macro-time-label-frames': 'frame(s)',
-	'input-macro-warning': 'Der Makro-Tasten-Pin ist nicht zugewiesen. "Benutzt Tasten" Option wird deaktiviert.',
+	'input-macro-warning':
+		'Der Makro-Tasten-Pin ist nicht zugewiesen. "Benutzt Tasten" Option wird deaktiviert.',
 	'input-macro-pin-label': 'Makro Tasten Pin',
 	'input-macro-macro-label-label': 'Bezeichnung',
 	'input-macro-type': {
 		press: 'Drücken',
 		'hold-repeat': 'Wiederholung Halten',
-		'toggle': 'Umschalten',
+		toggle: 'Umschalten',
 	},
 };
diff --git a/www/src/Locales/de-DE/LedConfig.jsx b/www/src/Locales/de-DE/LedConfig.jsx
index 8d97a5464..44c70de55 100644
--- a/www/src/Locales/de-DE/LedConfig.jsx
+++ b/www/src/Locales/de-DE/LedConfig.jsx
@@ -31,5 +31,5 @@ export default {
 		'available-header-text': 'Verfügbare Tasten',
 		'assigned-header-text': 'Zugeordnete Tasten',
 	},
-	'turn-off-when-suspended': 'Ausschalten im Ruhezustand'
+	'turn-off-when-suspended': 'Ausschalten im Ruhezustand',
 };
diff --git a/www/src/Locales/de-DE/Navigation.jsx b/www/src/Locales/de-DE/Navigation.jsx
index 3ff6cdb48..b8a27d783 100644
--- a/www/src/Locales/de-DE/Navigation.jsx
+++ b/www/src/Locales/de-DE/Navigation.jsx
@@ -23,7 +23,8 @@ export default {
 	'reboot-modal-button-progress-label': 'Starte neu',
 	'reboot-modal-button-success-label': 'Fertig!',
 	'reboot-modal-label': 'Neustart?',
-	'reboot-modal-success': 'Neustart ausgeführt, dieser Browser-Tab kann nun geschlossen werden.',
+	'reboot-modal-success':
+		'Neustart ausgeführt, dieser Browser-Tab kann nun geschlossen werden.',
 	'resetSettings-label': 'Neustart Einstellungen',
 	'settings-label': 'Einstellungen',
 };
diff --git a/www/src/Locales/de-DE/PeripheralMapping.jsx b/www/src/Locales/de-DE/PeripheralMapping.jsx
index 210e9fa37..932400b55 100644
--- a/www/src/Locales/de-DE/PeripheralMapping.jsx
+++ b/www/src/Locales/de-DE/PeripheralMapping.jsx
@@ -1,31 +1,35 @@
 export default {
-    'header-text': 'Peripherie Zuordnung',
-    'sub-header-text': '',
-    'pins-label': 'Pins',
-    'pin-in-use': 'in Benutzung',
-    'i2c-label': 'I\u00B2C',
-    'i2c-desc-header': 'I\u00B2C Information',
-    'i2c-description': 'I\u00B2C  ist eine Zwei-Draht-Schnittstelle, die für Zubehörgeräte wie Displays, GPIO-Erweiterungen und Sensoren über die SDA- und SCL-Leitungen verwendet wird. Der RP2040 unterstützt zwei I\u00B2C Controllerblöcke: I2C0 und I2C1. Folgende GPIO-Pins werden für den jeweiligen Block unterstützt:',
-    'spi-label': 'SPI',
-    'spi-desc-header': 'SPI Information',
-    'spi-description': 'SPI (Serial Peripheral Interface) ist eine Vier-Draht-Schnittstelle, die für Zubehörgeräte wie Displays, GPIO-Erweiterungen und Sensoren über eine RX- und TX-Datenleitung, sowie eine SCK-Taktleitung und eine CS-Synchron-/Chip-Select-Leitung verwendet wird. Der RP2040 unterstützt zwei SPI-Controllerblöcke: SPI0 und SPI1. Folgende GPIO-Pins werden für den jeweiligen Block unterstützt:',
-    'usb-label': 'USB Host',
-    'usb-desc-header': 'USB Host Information',
-    'usb-description': 'USB-Host ermöglicht die Verwendung unterstützter USB-Client-Geräte wie Tastaturen, Gamepads oder anderen Geräten.',
-    'peripheral-toggle-unavailable': 'Kann nicht aktiviert werden. Peripheriegerät "{{name}}" nicht verfügbar. Aktivieren Sie es im <0>Peripherie Zuordnung</0> Abschnitt.',
-    'pin-sda-label': 'SDA',
-    'pin-scl-label': 'SCL',
-    'option-speed-label': 'Geschwindigkeit',
-    'option-speed-choice-100000-label': 'Normal',
-    'option-speed-choice-400000-label': 'Schnell',
-    'option-speed-choice-1000000-label': 'Schnell Plus',
-    'pin-rx-label': 'RX',
-    'pin-cs-label': 'CS',
-    'pin-sck-label': 'SCK',
-    'pin-tx-label': 'TX',
-    'pin-dp-label': 'D+',
-    'pin-enable5v-label': '5V Aktivieren',
-    'option-order-label': 'Pin Reihenfolge',
-    'option-order-choice-0-label': 'D+/D-',
-    'option-order-choice-1-label': 'D-/D+',
+	'header-text': 'Peripherie Zuordnung',
+	'sub-header-text': '',
+	'pins-label': 'Pins',
+	'pin-in-use': 'in Benutzung',
+	'i2c-label': 'I\u00B2C',
+	'i2c-desc-header': 'I\u00B2C Information',
+	'i2c-description':
+		'I\u00B2C  ist eine Zwei-Draht-Schnittstelle, die für Zubehörgeräte wie Displays, GPIO-Erweiterungen und Sensoren über die SDA- und SCL-Leitungen verwendet wird. Der RP2040 unterstützt zwei I\u00B2C Controllerblöcke: I2C0 und I2C1. Folgende GPIO-Pins werden für den jeweiligen Block unterstützt:',
+	'spi-label': 'SPI',
+	'spi-desc-header': 'SPI Information',
+	'spi-description':
+		'SPI (Serial Peripheral Interface) ist eine Vier-Draht-Schnittstelle, die für Zubehörgeräte wie Displays, GPIO-Erweiterungen und Sensoren über eine RX- und TX-Datenleitung, sowie eine SCK-Taktleitung und eine CS-Synchron-/Chip-Select-Leitung verwendet wird. Der RP2040 unterstützt zwei SPI-Controllerblöcke: SPI0 und SPI1. Folgende GPIO-Pins werden für den jeweiligen Block unterstützt:',
+	'usb-label': 'USB Host',
+	'usb-desc-header': 'USB Host Information',
+	'usb-description':
+		'USB-Host ermöglicht die Verwendung unterstützter USB-Client-Geräte wie Tastaturen, Gamepads oder anderen Geräten.',
+	'peripheral-toggle-unavailable':
+		'Kann nicht aktiviert werden. Peripheriegerät "{{name}}" nicht verfügbar. Aktivieren Sie es im <0>Peripherie Zuordnung</0> Abschnitt.',
+	'pin-sda-label': 'SDA',
+	'pin-scl-label': 'SCL',
+	'option-speed-label': 'Geschwindigkeit',
+	'option-speed-choice-100000-label': 'Normal',
+	'option-speed-choice-400000-label': 'Schnell',
+	'option-speed-choice-1000000-label': 'Schnell Plus',
+	'pin-rx-label': 'RX',
+	'pin-cs-label': 'CS',
+	'pin-sck-label': 'SCK',
+	'pin-tx-label': 'TX',
+	'pin-dp-label': 'D+',
+	'pin-enable5v-label': '5V Aktivieren',
+	'option-order-label': 'Pin Reihenfolge',
+	'option-order-choice-0-label': 'D+/D-',
+	'option-order-choice-1-label': 'D-/D+',
 };
diff --git a/www/src/Locales/de-DE/ResetSettings.jsx b/www/src/Locales/de-DE/ResetSettings.jsx
index 8f6d064db..0ed582429 100644
--- a/www/src/Locales/de-DE/ResetSettings.jsx
+++ b/www/src/Locales/de-DE/ResetSettings.jsx
@@ -2,5 +2,6 @@ export default {
 	'header-text': 'Einstellungen zurücksetzen',
 	'sub-header-text':
 		'<0 className="card-text"> Diese Option setzt alle gespeicherten Konfigurationen auf Ihrem Controller zurück. Verwenden Sie diese Option als letzte Möglichkeit oder wenn Sie versuchen, seltsame Probleme mit Ihrem Controller zu diagnostizieren. </0> <0 className="card-text">Dieser Vorgang setzt den Controller automatisch zurück.</0>',
-	'confirm-text': 'Sind Sie sicher, dass Sie die gespeicherten Konfigurationen zurücksetzen möchten?',
+	'confirm-text':
+		'Sind Sie sicher, dass Sie die gespeicherten Konfigurationen zurücksetzen möchten?',
 };
diff --git a/www/src/Locales/de-DE/SettingsPage.jsx b/www/src/Locales/de-DE/SettingsPage.jsx
index d4dac79b9..b77cd562a 100644
--- a/www/src/Locales/de-DE/SettingsPage.jsx
+++ b/www/src/Locales/de-DE/SettingsPage.jsx
@@ -3,14 +3,14 @@ export default {
 	'input-mode-label': 'Eingabemodus',
 	'input-mode-extra-label': 'Touchpad und Share-Taste vertauschen',
 	'input-mode-options': {
-        none: 'Kein Modus ausgewählt',
+		none: 'Kein Modus ausgewählt',
 		xinput: 'XInput',
 		'nintendo-switch': 'Nintendo Switch',
 		ps3: 'PS3/DirectInput',
 		keyboard: 'Tastatur',
 		ps4: 'PS4',
 	},
-    'boot-input-mode-label': 'Eingabemodi beim Start',
+	'boot-input-mode-label': 'Eingabemodi beim Start',
 	'ps4-mode-options': {
 		controller: 'Controller',
 		arcadestick: 'Arcade Stick',
@@ -23,7 +23,7 @@ export default {
 	},
 	'socd-cleaning-mode-label': 'SOCD Säuberungsmodus',
 	'socd-cleaning-mode-note':
-		'Hinweis: PS4, PS3 und Nintendo Switch modi unterstützen nicht die SOCD-Säuberung auf \'Aus\' und verwenden standardmäßig den neutralen SOCD-Säuberungsmodus.',
+		"Hinweis: PS4, PS3 und Nintendo Switch modi unterstützen nicht die SOCD-Säuberung auf 'Aus' und verwenden standardmäßig den neutralen SOCD-Säuberungsmodus.",
 	'socd-cleaning-mode-options': {
 		'up-priority': 'Hoch-Taste Priorität',
 		neutral: 'Neutral',
diff --git a/www/src/Locales/en/Addons/PCF8575.jsx b/www/src/Locales/en/Addons/PCF8575.jsx
index c1cb481c3..e0a780501 100644
--- a/www/src/Locales/en/Addons/PCF8575.jsx
+++ b/www/src/Locales/en/Addons/PCF8575.jsx
@@ -1,8 +1,8 @@
 export default {
-    'header-text': 'PCF8575 IO Expander',
-    'block-label': 'I2C Block',
-    'label-direction': {
-        'input': 'Input',
-        'output': 'Output'
-    }
+	'header-text': 'PCF8575 IO Expander',
+	'block-label': 'I2C Block',
+	'label-direction': {
+		input: 'Input',
+		output: 'Output',
+	},
 };
diff --git a/www/src/Locales/en/Addons/Rotary.jsx b/www/src/Locales/en/Addons/Rotary.jsx
index f4e065c1b..83eb1244e 100644
--- a/www/src/Locales/en/Addons/Rotary.jsx
+++ b/www/src/Locales/en/Addons/Rotary.jsx
@@ -1,21 +1,21 @@
 export default {
-    'header-text': 'Rotary Encoders',
-    'encoder-one-label': 'Encoder 1',
-    'encoder-two-label': 'Encoder 2',
-    'encoder-pin-a-label': 'Pin A/CLK',
-    'encoder-pin-b-label': 'Pin B/DT',
-    'encoder-ppr-label': 'Pulses/Revolution (PPR)',
-    'encoder-reset-after-label': 'Reset After (ms)',
-    'encoder-allow-wrap-around-label': 'Allow Wrap-Around',
-    'encoder-multiplier-label': 'Multiplier',
-    'encoder-mode-label': 'Control Mode',
-    'encoder-mode-none': 'None',
-    'encoder-mode-left-analog-x': 'Left Analog X',
-    'encoder-mode-left-analog-y': 'Left Analog Y',
-    'encoder-mode-right-analog-x': 'Right Analog X',
-    'encoder-mode-right-analog-y': 'Right Analog Y',
-    'encoder-mode-left-trigger': 'Left Trigger',
-    'encoder-mode-right-trigger': 'Right Trigger',
-    'encoder-mode-dpad-x': 'D-Pad Left/Right',
-    'encoder-mode-dpad-y': 'D-Pad Up/Down',
+	'header-text': 'Rotary Encoders',
+	'encoder-one-label': 'Encoder 1',
+	'encoder-two-label': 'Encoder 2',
+	'encoder-pin-a-label': 'Pin A/CLK',
+	'encoder-pin-b-label': 'Pin B/DT',
+	'encoder-ppr-label': 'Pulses/Revolution (PPR)',
+	'encoder-reset-after-label': 'Reset After (ms)',
+	'encoder-allow-wrap-around-label': 'Allow Wrap-Around',
+	'encoder-multiplier-label': 'Multiplier',
+	'encoder-mode-label': 'Control Mode',
+	'encoder-mode-none': 'None',
+	'encoder-mode-left-analog-x': 'Left Analog X',
+	'encoder-mode-left-analog-y': 'Left Analog Y',
+	'encoder-mode-right-analog-x': 'Right Analog X',
+	'encoder-mode-right-analog-y': 'Right Analog Y',
+	'encoder-mode-left-trigger': 'Left Trigger',
+	'encoder-mode-right-trigger': 'Right Trigger',
+	'encoder-mode-dpad-x': 'D-Pad Left/Right',
+	'encoder-mode-dpad-y': 'D-Pad Up/Down',
 };
diff --git a/www/src/Locales/en/Addons/WiiAddon.jsx b/www/src/Locales/en/Addons/WiiAddon.jsx
index 558f644f9..1b70a0ad0 100644
--- a/www/src/Locales/en/Addons/WiiAddon.jsx
+++ b/www/src/Locales/en/Addons/WiiAddon.jsx
@@ -1,72 +1,77 @@
 export default {
-    'header-text': 'Wii Extension',
-    'sub-header-text': '<0>Note: If the Display is enabled at the same time, this Addon will be disabled.</0>',
-    'sda-pin-label': 'I2C SDA Pin',
-    'scl-pin-label': 'I2C SCL Pin',
-    'block-label': 'I2C Block',
-    'speed-label': 'I2C Speed',
-    'section-digital': 'Digital',
-    'section-analog': 'Analog',
-    'option-simple': 'Simple',
-    'option-advanced': 'Advanced',
-    'controller-nunchuk': 'Nunchuk',
-    'controller-classic': 'Classic',
-    'controller-taiko': 'Taiko',
-    'controller-guitar': 'Guitar',
-    'controller-drum': 'Drums',
-    'controller-turntable': 'Turntable',
-    'controller-button-a': 'A',
-    'controller-button-b': 'B',
-    'controller-button-c': 'C',
-    'controller-button-x': 'X',
-    'controller-button-y': 'Y',
-    'controller-button-z': 'Z',
-    'controller-button-l': 'L',
-    'controller-button-r': 'R',
-    'controller-button-zl': 'ZL',
-    'controller-button-zr': 'ZR',
-    'controller-button-minus': 'Minus',
-    'controller-button-home': 'Home',
-    'controller-button-plus': 'Plus',
-    'controller-button-up': 'Up',
-    'controller-button-down': 'Down',
-    'controller-button-left': 'Left',
-    'controller-button-right': 'Right',
-    'controller-button-euphoria': 'Euphoria',
-    'controller-button-leftgreen': 'Left Green',
-    'controller-button-leftred': 'Left Red',
-    'controller-button-leftblue': 'Left Blue',
-    'controller-button-rightgreen': 'Right Green',
-    'controller-button-rightred': 'Right Red',
-    'controller-button-rightblue': 'Right Blue',
-    'controller-button-orange': 'Orange',
-    'controller-button-red': 'Red',
-    'controller-button-blue': 'Blue',
-    'controller-button-green': 'Green',
-    'controller-button-yellow': 'Yellow',
-    'controller-button-pedal': 'Pedal',
-    'controller-button-strumup': 'Strum Up',
-    'controller-button-strumdown': 'Strum Down',
-    'controller-button-donleft': 'Don Left',
-    'controller-button-katleft': 'Kat Left',
-    'controller-button-donright': 'Don Right',
-    'controller-button-katright': 'Kat Right',
-    'controller-analog-stick': 'Stick',
-    'controller-analog-leftstick': 'Left Stick',
-    'controller-analog-rightstick': 'Right Stick',
-    'controller-analog-lefttrigger': 'L',
-    'controller-analog-righttrigger': 'R',
-    'controller-analog-leftturntable': 'Turntable Left',
-    'controller-analog-rightturntable': 'Turntable Right',
-    'controller-analog-fader': 'Fader',
-    'controller-analog-effects': 'Effects Dial',
-    'controller-analog-whammybar': 'Whammy Bar',
-    'controller-analog-axis-x': 'X +/- Axis',
-    'controller-analog-axis-y': 'Y +/- Axis',
-    'controller-analog-axis-trigger': 'Trigger',
-    'analog-axis-mode-trigger': '<0>The full range of values will be sent to the interface.</0>',
-    'analog-axis-mode-button': '<0>Acts as a digital switch, setting a "pressed" state after a defined threshold.</0>',
-    'analog-axis-mode-normal-direction': '<0>The full range of values will be translated to an axis of a joystick, where the lowest value is assumed the negative edge, and maximum is the positive edge.</0>',
-    'analog-axis-mode-invert-direction': '<0>The full range of values will be translated to an axis of a joystick, where the lowest value is assumed the positive edge, and maximum is the negative edge.</0>',
-    'button-save': 'Save Controllers',
+	'header-text': 'Wii Extension',
+	'sub-header-text':
+		'<0>Note: If the Display is enabled at the same time, this Addon will be disabled.</0>',
+	'sda-pin-label': 'I2C SDA Pin',
+	'scl-pin-label': 'I2C SCL Pin',
+	'block-label': 'I2C Block',
+	'speed-label': 'I2C Speed',
+	'section-digital': 'Digital',
+	'section-analog': 'Analog',
+	'option-simple': 'Simple',
+	'option-advanced': 'Advanced',
+	'controller-nunchuk': 'Nunchuk',
+	'controller-classic': 'Classic',
+	'controller-taiko': 'Taiko',
+	'controller-guitar': 'Guitar',
+	'controller-drum': 'Drums',
+	'controller-turntable': 'Turntable',
+	'controller-button-a': 'A',
+	'controller-button-b': 'B',
+	'controller-button-c': 'C',
+	'controller-button-x': 'X',
+	'controller-button-y': 'Y',
+	'controller-button-z': 'Z',
+	'controller-button-l': 'L',
+	'controller-button-r': 'R',
+	'controller-button-zl': 'ZL',
+	'controller-button-zr': 'ZR',
+	'controller-button-minus': 'Minus',
+	'controller-button-home': 'Home',
+	'controller-button-plus': 'Plus',
+	'controller-button-up': 'Up',
+	'controller-button-down': 'Down',
+	'controller-button-left': 'Left',
+	'controller-button-right': 'Right',
+	'controller-button-euphoria': 'Euphoria',
+	'controller-button-leftgreen': 'Left Green',
+	'controller-button-leftred': 'Left Red',
+	'controller-button-leftblue': 'Left Blue',
+	'controller-button-rightgreen': 'Right Green',
+	'controller-button-rightred': 'Right Red',
+	'controller-button-rightblue': 'Right Blue',
+	'controller-button-orange': 'Orange',
+	'controller-button-red': 'Red',
+	'controller-button-blue': 'Blue',
+	'controller-button-green': 'Green',
+	'controller-button-yellow': 'Yellow',
+	'controller-button-pedal': 'Pedal',
+	'controller-button-strumup': 'Strum Up',
+	'controller-button-strumdown': 'Strum Down',
+	'controller-button-donleft': 'Don Left',
+	'controller-button-katleft': 'Kat Left',
+	'controller-button-donright': 'Don Right',
+	'controller-button-katright': 'Kat Right',
+	'controller-analog-stick': 'Stick',
+	'controller-analog-leftstick': 'Left Stick',
+	'controller-analog-rightstick': 'Right Stick',
+	'controller-analog-lefttrigger': 'L',
+	'controller-analog-righttrigger': 'R',
+	'controller-analog-leftturntable': 'Turntable Left',
+	'controller-analog-rightturntable': 'Turntable Right',
+	'controller-analog-fader': 'Fader',
+	'controller-analog-effects': 'Effects Dial',
+	'controller-analog-whammybar': 'Whammy Bar',
+	'controller-analog-axis-x': 'X +/- Axis',
+	'controller-analog-axis-y': 'Y +/- Axis',
+	'controller-analog-axis-trigger': 'Trigger',
+	'analog-axis-mode-trigger':
+		'<0>The full range of values will be sent to the interface.</0>',
+	'analog-axis-mode-button':
+		'<0>Acts as a digital switch, setting a "pressed" state after a defined threshold.</0>',
+	'analog-axis-mode-normal-direction':
+		'<0>The full range of values will be translated to an axis of a joystick, where the lowest value is assumed the negative edge, and maximum is the positive edge.</0>',
+	'analog-axis-mode-invert-direction':
+		'<0>The full range of values will be translated to an axis of a joystick, where the lowest value is assumed the positive edge, and maximum is the negative edge.</0>',
+	'button-save': 'Save Controllers',
 };
diff --git a/www/src/Locales/en/AddonsConfig.jsx b/www/src/Locales/en/AddonsConfig.jsx
index bebaa22d7..dcc9fa85d 100644
--- a/www/src/Locales/en/AddonsConfig.jsx
+++ b/www/src/Locales/en/AddonsConfig.jsx
@@ -138,7 +138,8 @@ export default {
 	'keyboard-host-d-plus-label': 'D+',
 	'keyboard-host-d-minus-label': 'D-',
 	'keyboard-host-five-v-label': '5V Power (optional)',
-	'pin-config-moved-to-core-text': 'Note: the pins for this add-on are now configured on the Pin Mapping page.',
+	'pin-config-moved-to-core-text':
+		'Note: the pins for this add-on are now configured on the Pin Mapping page.',
 	'input-history-header-text': 'Input History',
 	'input-history-length-label': 'History length (characters)',
 	'input-history-col-label': 'Column',
diff --git a/www/src/Locales/en/DisplayConfig.jsx b/www/src/Locales/en/DisplayConfig.jsx
index 0ae2b7ddf..9a0be6f66 100644
--- a/www/src/Locales/en/DisplayConfig.jsx
+++ b/www/src/Locales/en/DisplayConfig.jsx
@@ -4,11 +4,11 @@ export default {
 		'A monochrome display can be used to show controller status and button activity. Ensure your display module has the following attributes:',
 	'list-text':
 		'<1>Monochrome display with 128x64 resolution</1> <1>Uses I2C with a SSD1306, SH1106, SH1107 or other compatible display IC</1> <1>Supports 3.3v operation</1>',
-    section: {
-        'hardware-header': 'Hardware Options',
-        'screen-header': 'Screen Options',
-        'layout-header': 'Layout Options',
-    },
+	section: {
+		'hardware-header': 'Hardware Options',
+		'screen-header': 'Screen Options',
+		'layout-header': 'Layout Options',
+	},
 	table: {
 		header:
 			'Use these tables to determine which I2C block to select based on the configured SDA and SCL pins:',
@@ -37,6 +37,6 @@ export default {
 		'display-saver-timeout-label': 'Display Saver Timeout (minutes)',
 		'inverted-label': 'Inverted',
 		'power-management-header': 'Power Management',
-		'turn-off-when-suspended': 'Turn Off When Suspended'
+		'turn-off-when-suspended': 'Turn Off When Suspended',
 	},
 };
diff --git a/www/src/Locales/en/Index.jsx b/www/src/Locales/en/Index.jsx
index eae69005f..cc394cfb5 100644
--- a/www/src/Locales/en/Index.jsx
+++ b/www/src/Locales/en/Index.jsx
@@ -37,5 +37,5 @@ export default {
 	Rotary,
 	InputMacroAddon,
 	LayoutConfig,
-    PCF8575,
+	PCF8575,
 };
diff --git a/www/src/Locales/en/InputMacroAddon.jsx b/www/src/Locales/en/InputMacroAddon.jsx
index 8ed3adb66..07788bde7 100644
--- a/www/src/Locales/en/InputMacroAddon.jsx
+++ b/www/src/Locales/en/InputMacroAddon.jsx
@@ -1,10 +1,13 @@
 export default {
 	'input-macro-board-led-enabled': 'Use Board LED to Display Macro Status',
 	'input-macro-macro-enabled': 'Enabled',
-	'input-macro-macro-exclusive': 'Exclusive (Cannot Be Switched to Another Macro)',
-	'input-macro-macro-interruptible': 'Interruptible (User Input Cancels the Macro)',
+	'input-macro-macro-exclusive':
+		'Exclusive (Cannot Be Switched to Another Macro)',
+	'input-macro-macro-interruptible':
+		'Interruptible (User Input Cancels the Macro)',
 	'input-macro-macro-show-frames': 'Show Frames (1 Frame = 16.666 ms)',
-	'input-macro-macro-uses-buttons': 'Use Macro Button + Gamepad Button to Trigger',
+	'input-macro-macro-uses-buttons':
+		'Use Macro Button + Gamepad Button to Trigger',
 	'input-macro-macro-button-pin-plus': 'Button Assignment:',
 	'input-macro-header-text': 'Macros Overview',
 	'input-macro-1-header-text': 'Macro 1 Settings',
@@ -18,13 +21,14 @@ export default {
 	'input-macro-time-label-ms': 'ms',
 	'input-macro-time-label-frames': 'frame(s)',
 	'input-macro-sub-header':
-		"Note: For pin mapped macros, please see the Pin Mapping page under Configuration. Macros can also be assigned to a gamepad button with the corresponding held single Macro button.",
-	'input-macro-warning': 'Macro Button Pin is not mapped. "Uses Buttons" option will be disabled.',
+		'Note: For pin mapped macros, please see the Pin Mapping page under Configuration. Macros can also be assigned to a gamepad button with the corresponding held single Macro button.',
+	'input-macro-warning':
+		'Macro Button Pin is not mapped. "Uses Buttons" option will be disabled.',
 	'input-macro-pin-label': 'Macro Button Pin',
 	'input-macro-macro-label-label': 'Label',
 	'input-macro-type': {
 		press: 'Press',
 		'hold-repeat': 'Hold Repeat',
-		'toggle': 'Toggle',
+		toggle: 'Toggle',
 	},
 };
diff --git a/www/src/Locales/en/LayoutConfig.jsx b/www/src/Locales/en/LayoutConfig.jsx
index d5c27d724..215cbf298 100644
--- a/www/src/Locales/en/LayoutConfig.jsx
+++ b/www/src/Locales/en/LayoutConfig.jsx
@@ -2,82 +2,82 @@ export default {
 	'header-text': 'Layout Configuration',
 	'layout-left-header-text': 'Left Layout',
 	'layout-right-header-text': 'Right Layout',
-	'layouts': {
-		'left': {
-			'BUTTON_LAYOUT_STICK': 'Stick',
-			'BUTTON_LAYOUT_STICKLESS': 'Stickless',
-			'BUTTON_LAYOUT_BUTTONS_ANGLED': 'Buttons Angled',
-			'BUTTON_LAYOUT_BUTTONS_BASIC': 'Buttons Basic',
-			'BUTTON_LAYOUT_KEYBOARD_ANGLED': 'Keyboard Angled',
-			'BUTTON_LAYOUT_KEYBOARDA': 'Keyboard',
-			'BUTTON_LAYOUT_DANCEPADA': 'Dancepad',
-			'BUTTON_LAYOUT_TWINSTICKA': 'Twinstick',
-			'BUTTON_LAYOUT_BLANKA': 'Blank',
-			'BUTTON_LAYOUT_VLXA': 'VLX',
-			'BUTTON_LAYOUT_FIGHTBOARD_STICK': 'Fightboard', 
-			'BUTTON_LAYOUT_FIGHTBOARD_MIRRORED': 'Fightboard Mirrored', 
-			'BUTTON_LAYOUT_CUSTOM': 'Custom', 
-			'BUTTON_LAYOUT_OPENCORE0WASDA': 'Open_Core0 WASD', 
-			'BUTTON_LAYOUT_STICKLESS_13': 'Stickless 13', 
-			'BUTTON_LAYOUT_STICKLESS_16': 'Stickless 16', 
-			'BUTTON_LAYOUT_STICKLESS_14': 'Stickless 14', 
-			'BUTTON_LAYOUT_DANCEPAD_DDR_LEFT': 'DDR Dancepad Left', 
-			'BUTTON_LAYOUT_DANCEPAD_DDR_SOLO': 'DDR Dancepad Solo', 
-			'BUTTON_LAYOUT_DANCEPAD_PIU_LEFT': 'PIU Dancepad Left', 
-			'BUTTON_LAYOUT_POPN_A': 'Popn Left', 
-			'BUTTON_LAYOUT_TAIKO_A': 'Taiko', 
-			'BUTTON_LAYOUT_BM_TURNTABLE_A': 'Beatmania Turntable Left', 
-			'BUTTON_LAYOUT_BM_5KEY_A': 'Beatmania 5 Key Left', 
-			'BUTTON_LAYOUT_BM_7KEY_A': 'Beatmania 7 Key Left', 
-			'BUTTON_LAYOUT_GITADORA_FRET_A': 'Gitadora Fret', 
-			'BUTTON_LAYOUT_GITADORA_STRUM_A': 'Gitadora Strum', 
-			'BUTTON_LAYOUT_BOARD_DEFINED_A': 'Board Defined', 
-			'BUTTON_LAYOUT_CUSTOMA': 'Custom', 
-			'BUTTON_LAYOUT_BANDHERO_FRET_A': 'GH/RB Fret', 
-			'BUTTON_LAYOUT_BANDHERO_STRUM_A': 'GH/RB Strum', 
-			'BUTTON_LAYOUT_6GAWD_A': '6GAWD Left', 
-			'BUTTON_LAYOUT_6GAWD_ALLBUTTON_A': '6GAWD All Button Left', 
-			'BUTTON_LAYOUT_6GAWD_ALLBUTTONPLUS_A': '6GAWD All Button Pinky Left', 
+	layouts: {
+		left: {
+			BUTTON_LAYOUT_STICK: 'Stick',
+			BUTTON_LAYOUT_STICKLESS: 'Stickless',
+			BUTTON_LAYOUT_BUTTONS_ANGLED: 'Buttons Angled',
+			BUTTON_LAYOUT_BUTTONS_BASIC: 'Buttons Basic',
+			BUTTON_LAYOUT_KEYBOARD_ANGLED: 'Keyboard Angled',
+			BUTTON_LAYOUT_KEYBOARDA: 'Keyboard',
+			BUTTON_LAYOUT_DANCEPADA: 'Dancepad',
+			BUTTON_LAYOUT_TWINSTICKA: 'Twinstick',
+			BUTTON_LAYOUT_BLANKA: 'Blank',
+			BUTTON_LAYOUT_VLXA: 'VLX',
+			BUTTON_LAYOUT_FIGHTBOARD_STICK: 'Fightboard',
+			BUTTON_LAYOUT_FIGHTBOARD_MIRRORED: 'Fightboard Mirrored',
+			BUTTON_LAYOUT_CUSTOM: 'Custom',
+			BUTTON_LAYOUT_OPENCORE0WASDA: 'Open_Core0 WASD',
+			BUTTON_LAYOUT_STICKLESS_13: 'Stickless 13',
+			BUTTON_LAYOUT_STICKLESS_16: 'Stickless 16',
+			BUTTON_LAYOUT_STICKLESS_14: 'Stickless 14',
+			BUTTON_LAYOUT_DANCEPAD_DDR_LEFT: 'DDR Dancepad Left',
+			BUTTON_LAYOUT_DANCEPAD_DDR_SOLO: 'DDR Dancepad Solo',
+			BUTTON_LAYOUT_DANCEPAD_PIU_LEFT: 'PIU Dancepad Left',
+			BUTTON_LAYOUT_POPN_A: 'Popn Left',
+			BUTTON_LAYOUT_TAIKO_A: 'Taiko',
+			BUTTON_LAYOUT_BM_TURNTABLE_A: 'Beatmania Turntable Left',
+			BUTTON_LAYOUT_BM_5KEY_A: 'Beatmania 5 Key Left',
+			BUTTON_LAYOUT_BM_7KEY_A: 'Beatmania 7 Key Left',
+			BUTTON_LAYOUT_GITADORA_FRET_A: 'Gitadora Fret',
+			BUTTON_LAYOUT_GITADORA_STRUM_A: 'Gitadora Strum',
+			BUTTON_LAYOUT_BOARD_DEFINED_A: 'Board Defined',
+			BUTTON_LAYOUT_CUSTOMA: 'Custom',
+			BUTTON_LAYOUT_BANDHERO_FRET_A: 'GH/RB Fret',
+			BUTTON_LAYOUT_BANDHERO_STRUM_A: 'GH/RB Strum',
+			BUTTON_LAYOUT_6GAWD_A: '6GAWD Left',
+			BUTTON_LAYOUT_6GAWD_ALLBUTTON_A: '6GAWD All Button Left',
+			BUTTON_LAYOUT_6GAWD_ALLBUTTONPLUS_A: '6GAWD All Button Pinky Left',
 		},
-		'right': {
-			'BUTTON_LAYOUT_ARCADE': 'Arcade',
-			'BUTTON_LAYOUT_STICKLESSB': 'Stickless',
-			'BUTTON_LAYOUT_BUTTONS_ANGLEDB': 'Buttons Angled',
-			'BUTTON_LAYOUT_VEWLIX': 'Viewlix',
-			'BUTTON_LAYOUT_VEWLIX7': 'Viewlix 7',
-			'BUTTON_LAYOUT_CAPCOM': 'Capcom',
-			'BUTTON_LAYOUT_CAPCOM6': 'Capcom 6',
-			'BUTTON_LAYOUT_SEGA2P': 'Sega 2P',
-			'BUTTON_LAYOUT_NOIR8': 'Noir 8',
-			'BUTTON_LAYOUT_KEYBOARDB': 'Keyboard',
-			'BUTTON_LAYOUT_DANCEPADB': 'Dancepad',
-			'BUTTON_LAYOUT_TWINSTICKB': 'Twinstick',
-			'BUTTON_LAYOUT_BLANKB': 'Blank',
-			'BUTTON_LAYOUT_VLXB': 'VLX',
-			'BUTTON_LAYOUT_FIGHTBOARD': 'Fightboard',
-			'BUTTON_LAYOUT_FIGHTBOARD_STICK_MIRRORED': 'Fightboard Mirrored',
-			'BUTTON_LAYOUT_CUSTOM': 'Custom',
-			'BUTTON_LAYOUT_KEYBOARD8B': 'Keyboard 8',
-			'BUTTON_LAYOUT_OPENCORE0WASDB': 'Open_Core0 WASD',
-			'BUTTON_LAYOUT_STICKLESS_13B': 'Stickless 13',
-			'BUTTON_LAYOUT_STICKLESS_16B': 'Stickless 16',
-			'BUTTON_LAYOUT_STICKLESS_14B': 'Stickless 14',
-			'BUTTON_LAYOUT_DANCEPAD_DDR_RIGHT': 'DDR Dancepad Right',
-			'BUTTON_LAYOUT_DANCEPAD_PIU_RIGHT': 'PIU Dancepad Right',
-			'BUTTON_LAYOUT_POPN_B': 'Popn Right',
-			'BUTTON_LAYOUT_TAIKO_B': 'Taiko',
-			'BUTTON_LAYOUT_BM_TURNTABLE_B': 'Beatmania Turntable Right',
-			'BUTTON_LAYOUT_BM_5KEY_B': 'Beatmania 5 Key Right',
-			'BUTTON_LAYOUT_BM_7KEY_B': 'Beatmania 7 Key Right',
-			'BUTTON_LAYOUT_GITADORA_FRET_B': 'Gitadora Fret',
-			'BUTTON_LAYOUT_GITADORA_STRUM_B': 'Gitadora Strum',
-			'BUTTON_LAYOUT_BOARD_DEFINED_B': 'Board Defined',
-			'BUTTON_LAYOUT_CUSTOMB': 'Custom', 
-			'BUTTON_LAYOUT_BANDHERO_FRET_B': 'GH/RB Fret', 
-			'BUTTON_LAYOUT_BANDHERO_STRUM_B': 'GH/RB Strum', 
-			'BUTTON_LAYOUT_6GAWD_B': '6GAWD Right', 
-			'BUTTON_LAYOUT_6GAWD_ALLBUTTON_B': '6GAWD All Button Right', 
-			'BUTTON_LAYOUT_6GAWD_ALLBUTTONPLUS_B': '6GAWD All Button Pinky Right', 
-		}
-	}
-};
\ No newline at end of file
+		right: {
+			BUTTON_LAYOUT_ARCADE: 'Arcade',
+			BUTTON_LAYOUT_STICKLESSB: 'Stickless',
+			BUTTON_LAYOUT_BUTTONS_ANGLEDB: 'Buttons Angled',
+			BUTTON_LAYOUT_VEWLIX: 'Viewlix',
+			BUTTON_LAYOUT_VEWLIX7: 'Viewlix 7',
+			BUTTON_LAYOUT_CAPCOM: 'Capcom',
+			BUTTON_LAYOUT_CAPCOM6: 'Capcom 6',
+			BUTTON_LAYOUT_SEGA2P: 'Sega 2P',
+			BUTTON_LAYOUT_NOIR8: 'Noir 8',
+			BUTTON_LAYOUT_KEYBOARDB: 'Keyboard',
+			BUTTON_LAYOUT_DANCEPADB: 'Dancepad',
+			BUTTON_LAYOUT_TWINSTICKB: 'Twinstick',
+			BUTTON_LAYOUT_BLANKB: 'Blank',
+			BUTTON_LAYOUT_VLXB: 'VLX',
+			BUTTON_LAYOUT_FIGHTBOARD: 'Fightboard',
+			BUTTON_LAYOUT_FIGHTBOARD_STICK_MIRRORED: 'Fightboard Mirrored',
+			BUTTON_LAYOUT_CUSTOM: 'Custom',
+			BUTTON_LAYOUT_KEYBOARD8B: 'Keyboard 8',
+			BUTTON_LAYOUT_OPENCORE0WASDB: 'Open_Core0 WASD',
+			BUTTON_LAYOUT_STICKLESS_13B: 'Stickless 13',
+			BUTTON_LAYOUT_STICKLESS_16B: 'Stickless 16',
+			BUTTON_LAYOUT_STICKLESS_14B: 'Stickless 14',
+			BUTTON_LAYOUT_DANCEPAD_DDR_RIGHT: 'DDR Dancepad Right',
+			BUTTON_LAYOUT_DANCEPAD_PIU_RIGHT: 'PIU Dancepad Right',
+			BUTTON_LAYOUT_POPN_B: 'Popn Right',
+			BUTTON_LAYOUT_TAIKO_B: 'Taiko',
+			BUTTON_LAYOUT_BM_TURNTABLE_B: 'Beatmania Turntable Right',
+			BUTTON_LAYOUT_BM_5KEY_B: 'Beatmania 5 Key Right',
+			BUTTON_LAYOUT_BM_7KEY_B: 'Beatmania 7 Key Right',
+			BUTTON_LAYOUT_GITADORA_FRET_B: 'Gitadora Fret',
+			BUTTON_LAYOUT_GITADORA_STRUM_B: 'Gitadora Strum',
+			BUTTON_LAYOUT_BOARD_DEFINED_B: 'Board Defined',
+			BUTTON_LAYOUT_CUSTOMB: 'Custom',
+			BUTTON_LAYOUT_BANDHERO_FRET_B: 'GH/RB Fret',
+			BUTTON_LAYOUT_BANDHERO_STRUM_B: 'GH/RB Strum',
+			BUTTON_LAYOUT_6GAWD_B: '6GAWD Right',
+			BUTTON_LAYOUT_6GAWD_ALLBUTTON_B: '6GAWD All Button Right',
+			BUTTON_LAYOUT_6GAWD_ALLBUTTONPLUS_B: '6GAWD All Button Pinky Right',
+		},
+	},
+};
diff --git a/www/src/Locales/en/LedConfig.jsx b/www/src/Locales/en/LedConfig.jsx
index 7c79226c2..37e188e28 100644
--- a/www/src/Locales/en/LedConfig.jsx
+++ b/www/src/Locales/en/LedConfig.jsx
@@ -31,5 +31,5 @@ export default {
 		'available-header-text': 'Available Buttons',
 		'assigned-header-text': 'Assigned Buttons',
 	},
-	'turn-off-when-suspended': 'Turn Off When Suspended'
+	'turn-off-when-suspended': 'Turn Off When Suspended',
 };
diff --git a/www/src/Locales/en/PeripheralMapping.jsx b/www/src/Locales/en/PeripheralMapping.jsx
index 08a4aa531..a79aff093 100644
--- a/www/src/Locales/en/PeripheralMapping.jsx
+++ b/www/src/Locales/en/PeripheralMapping.jsx
@@ -1,31 +1,35 @@
 export default {
-    'header-text': 'Peripheral Mapping',
-    'sub-header-text': '',
-    'pins-label': 'Pins',
-    'pin-in-use': 'in use',
-    'i2c-label': 'I\u00B2C',
-    'i2c-desc-header': 'I\u00B2C Information',
-    'i2c-description': 'I\u00B2C is a two-wire interface used for accessory devices, such as displays, GPIO expansion, and sensors via the SDA and SCL lines.  The RP2040 supports two I\u00B2C controller blocks: I2C0 and I2C1.  The following are the supported GPIO pins for each block:',
-    'spi-label': 'SPI',
-    'spi-desc-header': 'SPI Information',
-    'spi-description': 'SPI is a four-wire interface used for accessory devices, such as displays, GPIO expansion, and sensors via a RX and TX data line, as well as a SCK clock line, and a CS sync/chip select line.  The RP2040 supports two SPI controller blocks: SPI0 and SPI1. The following are the supported GPIO pins for each block:',
-    'usb-label': 'USB Host',
-    'usb-desc-header': 'USB Host Information',
-    'usb-description': 'USB Host allows supported USB client devices to be used, such as keyboards, gamepads, or other devices.',
-    'peripheral-toggle-unavailable': 'Cannot Enable. Peripheral "{{name}}" unavailable. Enable it in the <0>Peripheral Mapping</0> section.',
-    'pin-sda-label': 'SDA',
-    'pin-scl-label': 'SCL',
-    'option-speed-label': 'Speed',
-    'option-speed-choice-100000-label': 'Normal',
-    'option-speed-choice-400000-label': 'Fast',
-    'option-speed-choice-1000000-label': 'Fast Plus',
-    'pin-rx-label': 'RX',
-    'pin-cs-label': 'CS',
-    'pin-sck-label': 'SCK',
-    'pin-tx-label': 'TX',
-    'pin-dp-label': 'D+',
-    'pin-enable5v-label': 'Enable 5V',
-    'option-order-label': 'Pin Order',
-    'option-order-choice-0-label': 'D+/D-',
-    'option-order-choice-1-label': 'D-/D+',
+	'header-text': 'Peripheral Mapping',
+	'sub-header-text': '',
+	'pins-label': 'Pins',
+	'pin-in-use': 'in use',
+	'i2c-label': 'I\u00B2C',
+	'i2c-desc-header': 'I\u00B2C Information',
+	'i2c-description':
+		'I\u00B2C is a two-wire interface used for accessory devices, such as displays, GPIO expansion, and sensors via the SDA and SCL lines.  The RP2040 supports two I\u00B2C controller blocks: I2C0 and I2C1.  The following are the supported GPIO pins for each block:',
+	'spi-label': 'SPI',
+	'spi-desc-header': 'SPI Information',
+	'spi-description':
+		'SPI is a four-wire interface used for accessory devices, such as displays, GPIO expansion, and sensors via a RX and TX data line, as well as a SCK clock line, and a CS sync/chip select line.  The RP2040 supports two SPI controller blocks: SPI0 and SPI1. The following are the supported GPIO pins for each block:',
+	'usb-label': 'USB Host',
+	'usb-desc-header': 'USB Host Information',
+	'usb-description':
+		'USB Host allows supported USB client devices to be used, such as keyboards, gamepads, or other devices.',
+	'peripheral-toggle-unavailable':
+		'Cannot Enable. Peripheral "{{name}}" unavailable. Enable it in the <0>Peripheral Mapping</0> section.',
+	'pin-sda-label': 'SDA',
+	'pin-scl-label': 'SCL',
+	'option-speed-label': 'Speed',
+	'option-speed-choice-100000-label': 'Normal',
+	'option-speed-choice-400000-label': 'Fast',
+	'option-speed-choice-1000000-label': 'Fast Plus',
+	'pin-rx-label': 'RX',
+	'pin-cs-label': 'CS',
+	'pin-sck-label': 'SCK',
+	'pin-tx-label': 'TX',
+	'pin-dp-label': 'D+',
+	'pin-enable5v-label': 'Enable 5V',
+	'option-order-label': 'Pin Order',
+	'option-order-choice-0-label': 'D+/D-',
+	'option-order-choice-1-label': 'D-/D+',
 };
diff --git a/www/src/Locales/zh-CN/AddonsConfig.jsx b/www/src/Locales/zh-CN/AddonsConfig.jsx
index e035b5e79..fab99116f 100644
--- a/www/src/Locales/zh-CN/AddonsConfig.jsx
+++ b/www/src/Locales/zh-CN/AddonsConfig.jsx
@@ -135,5 +135,5 @@ export default {
 	'input-history-header-text': '输入历史',
 	'input-history-length-label': '历史长度（字符）',
 	'input-history-col-label': '列',
-	'input-history-row-label': '行'
+	'input-history-row-label': '行',
 };
diff --git a/www/src/Pages/AddonsConfigPage.jsx b/www/src/Pages/AddonsConfigPage.jsx
index 8d10817da..d73235738 100644
--- a/www/src/Pages/AddonsConfigPage.jsx
+++ b/www/src/Pages/AddonsConfigPage.jsx
@@ -11,14 +11,20 @@ import { AppContext } from '../Contexts/AppContext';
 
 import WebApi from '../Services/WebApi';
 import Analog, { analogScheme, analogState } from '../Addons/Analog';
-import Analog1256, { analog1256Scheme, analog1256State } from '../Addons/Analog1256';
+import Analog1256, {
+	analog1256Scheme,
+	analog1256State,
+} from '../Addons/Analog1256';
 import Bootsel, { bootselScheme, bootselState } from '../Addons/Bootsel';
 import Buzzer, { buzzerScheme, buzzerState } from '../Addons/Buzzer';
 import DualDirection, {
 	dualDirectionScheme,
 	dualDirectionState,
 } from '../Addons/DualDirection';
-import I2CAnalog1219, { i2cAnalogScheme, i2cAnalogState } from '../Addons/I2CAnalog1219';
+import I2CAnalog1219, {
+	i2cAnalogScheme,
+	i2cAnalogState,
+} from '../Addons/I2CAnalog1219';
 import Joystick, { joystickScheme, joystickState } from '../Addons/Joystick';
 import OnBoardLed, {
 	onBoardLedScheme,
@@ -39,7 +45,10 @@ import FocusMode, {
 	focusModeState,
 } from '../Addons/FocusMode';
 import Keyboard, { keyboardScheme, keyboardState } from '../Addons/Keyboard';
-import InputHistory, { inputHistoryScheme, inputHistoryState } from '../Addons/InputHistory';
+import InputHistory, {
+	inputHistoryScheme,
+	inputHistoryState,
+} from '../Addons/InputHistory';
 import Rotary, { rotaryScheme, rotaryState } from '../Addons/Rotary';
 import PCF8575, { pcf8575Scheme, pcf8575State } from '../Addons/PCF8575';
 
@@ -62,7 +71,7 @@ const schema = yup.object().shape({
 	...keyboardScheme,
 	...inputHistoryScheme,
 	...rotaryScheme,
-    ...pcf8575Scheme,
+	...pcf8575Scheme,
 });
 
 const defaultValues = {
@@ -85,7 +94,7 @@ const defaultValues = {
 	...keyboardState,
 	...inputHistoryState,
 	...rotaryState,
-    ...pcf8575State,
+	...pcf8575State,
 };
 
 const ADDONS = [
@@ -107,8 +116,8 @@ const ADDONS = [
 	FocusMode,
 	Keyboard,
 	InputHistory,
-    Rotary,
-    PCF8575,
+	Rotary,
+	PCF8575,
 ];
 
 const FormContext = ({ setStoredData }) => {
@@ -167,9 +176,9 @@ export default function AddonsConfigPage() {
 
 	const { t } = useTranslation();
 
-    useEffect(() => {
-        updatePeripherals();
-    }, []);
+	useEffect(() => {
+		updatePeripherals();
+	}, []);
 
 	const onSuccess = async (values) => {
 		const flattened = flattenObject(storedData);
@@ -206,31 +215,34 @@ export default function AddonsConfigPage() {
 			onSubmit={onSuccess}
 			initialValues={defaultValues}
 		>
-			{({ handleSubmit, handleChange, values, errors, setFieldValue }) => 
-			console.log('errors', errors) || (
-				<Form noValidate onSubmit={handleSubmit}>
-					<h1>{t('AddonsConfig:header-text')}</h1>
-					<p>{t('AddonsConfig:sub-header-text')}</p>
-					{ADDONS.map((Addon, index) => (
-						<Addon
-							key={`addon-${index}`}
-							values={values}
-							errors={errors}
-							handleChange={handleChange}
-							handleCheckbox={handleCheckbox}
-							setFieldValue={setFieldValue}
-						/>
-					))}
-
-					<div className="mt-3">
-						<Button type="submit" id="save">
-							{t('Common:button-save-label')}
-						</Button>
-						{saveMessage ? <span className="alert">{saveMessage}</span> : null}
-					</div>
-					<FormContext setStoredData={setStoredData} />
-				</Form>
-			)}
+			{({ handleSubmit, handleChange, values, errors, setFieldValue }) =>
+				console.log('errors', errors) || (
+					<Form noValidate onSubmit={handleSubmit}>
+						<h1>{t('AddonsConfig:header-text')}</h1>
+						<p>{t('AddonsConfig:sub-header-text')}</p>
+						{ADDONS.map((Addon, index) => (
+							<Addon
+								key={`addon-${index}`}
+								values={values}
+								errors={errors}
+								handleChange={handleChange}
+								handleCheckbox={handleCheckbox}
+								setFieldValue={setFieldValue}
+							/>
+						))}
+
+						<div className="mt-3">
+							<Button type="submit" id="save">
+								{t('Common:button-save-label')}
+							</Button>
+							{saveMessage ? (
+								<span className="alert">{saveMessage}</span>
+							) : null}
+						</div>
+						<FormContext setStoredData={setStoredData} />
+					</Form>
+				)
+			}
 		</Formik>
 	);
 }
diff --git a/www/src/Pages/DisplayConfig.jsx b/www/src/Pages/DisplayConfig.jsx
index 0780fffdc..563fd2560 100644
--- a/www/src/Pages/DisplayConfig.jsx
+++ b/www/src/Pages/DisplayConfig.jsx
@@ -20,7 +20,7 @@ const ON_OFF_OPTIONS = [
 ];
 
 const SPLASH_MODES = [
-	{ label: 'Enabled (Custom Splash Screen)', value: 0 },  // STATICSPLASH
+	{ label: 'Enabled (Custom Splash Screen)', value: 0 }, // STATICSPLASH
 	{ label: 'Logo Close In', value: 1 }, // CLOSEIN
 	{ label: 'Logo Close In Custom', value: 2 }, // CLOSEINCUSTOM
 	{ label: 'Disabled', value: 3 }, // NOSPLASH
@@ -64,16 +64,14 @@ const defaultValues = {
 	displaySaverTimeout: 0,
 };
 
-let buttonLayoutDefinitions = {buttonLayout:{},buttonLayoutRight:{}};
+let buttonLayoutDefinitions = { buttonLayout: {}, buttonLayoutRight: {} };
 
-const buttonLayoutSchemaBase = yup
-	.number()
-	.required();
+const buttonLayoutSchemaBase = yup.number().required();
 
-let buttonLayoutSchema = buttonLayoutSchemaBase
-	.label('Button Layout Left');
-let buttonLayoutRightSchema = buttonLayoutSchemaBase
-	.label('Button Layout Right');
+let buttonLayoutSchema = buttonLayoutSchemaBase.label('Button Layout Left');
+let buttonLayoutRightSchema = buttonLayoutSchemaBase.label(
+	'Button Layout Right',
+);
 
 const schema = yup.object().shape({
 	enabled: yup.number().label('Enabled?'),
@@ -144,9 +142,13 @@ const FormContext = () => {
 			const data = await WebApi.getDisplayOptions();
 			const splashImageResponse = await WebApi.getSplashImage();
 			data.splashImage = splashImageResponse.splashImage;
-            buttonLayoutDefinitions = await WebApi.getButtonLayoutDefs();
-            buttonLayoutSchema = buttonLayoutSchema.oneOf(Object.values(buttonLayoutDefinitions.buttonLayout));
-            buttonLayoutRightSchema = buttonLayoutRightSchema.oneOf(Object.values(buttonLayoutDefinitions.buttonLayoutRight));
+			buttonLayoutDefinitions = await WebApi.getButtonLayoutDefs();
+			buttonLayoutSchema = buttonLayoutSchema.oneOf(
+				Object.values(buttonLayoutDefinitions.buttonLayout),
+			);
+			buttonLayoutRightSchema = buttonLayoutRightSchema.oneOf(
+				Object.values(buttonLayoutDefinitions.buttonLayoutRight),
+			);
 			setValues(data);
 		}
 		fetchData();
@@ -209,15 +211,21 @@ const isButtonLayoutCustom = (values) =>
 	values.buttonLayout === 12 || values.buttonLayoutRight === 16;
 
 export default function DisplayConfigPage() {
-	const { updateUsedPins, getAvailablePeripherals, getSelectedPeripheral, updatePeripherals, updateAddons } = useContext(AppContext);
+	const {
+		updateUsedPins,
+		getAvailablePeripherals,
+		getSelectedPeripheral,
+		updatePeripherals,
+		updateAddons,
+	} = useContext(AppContext);
 	const [saveMessage, setSaveMessage] = useState('');
 
 	const { t } = useTranslation('');
 
-    useEffect(() => {
-        updateAddons();
-        updatePeripherals();
-    }, []);
+	useEffect(() => {
+		updateAddons();
+		updatePeripherals();
+	}, []);
 
 	const onSuccess = async (values) => {
 		const success = await WebApi.setDisplayOptions(values, false).then(() =>
@@ -244,429 +252,475 @@ export default function DisplayConfigPage() {
 			initialValues={defaultValues}
 		>
 			{({ handleSubmit, handleChange, values, errors, setFieldValue }) => {
-                const handlePeripheralChange = (e) => {
-                    let device = getSelectedPeripheral('i2c', e.target.value);
-                    handleChange(e);
-                };
-                
-				return console.log('errors', errors) ||
-				console.log('values', values) || (
-					<Section title={t('DisplayConfig:header-text')}>
-                        {getAvailablePeripherals('i2c') ?
-                        <div>
-                            <p>{t('DisplayConfig:sub-header-text')}</p>
-                            <ul>
-                                <Trans ns="DisplayConfig" i18nKey="list-text">
-                                    <li>Monochrome display with 128x64 resolution</li>
-                                    <li>
-                                        Uses I2C with a SSD1306, SH1106, SH1107 or other compatible
-                                        display IC
-                                    </li>
-                                    <li>Supports 3.3v operation</li>
-                                </Trans>
-                            </ul>
-                            <Form noValidate onSubmit={handleSubmit}>
-                                <h1>{t('DisplayConfig:section.hardware-header')}</h1>
-                                <Row className="mb-4">
-                                    <FormSelect
-                                        label={t('Common:switch-enabled')}
-                                        name="enabled"
-                                        className="form-select-sm"
-                                        groupClassName="col-sm-3 mb-3"
-                                        value={values.enabled}
-                                        error={errors.enabled}
-                                        isInvalid={errors.enabled}
-                                        onChange={handleChange}
-                                    >
-                                        {ON_OFF_OPTIONS.map((o, i) => (
-                                            <option key={`enabled-option-${i}`} value={o.value}>
-                                                {o.label}
-                                            </option>
-                                        ))}
-                                    </FormSelect>
-                                    <FormSelect
-                                        label={t('DisplayConfig:form.i2c-block-label')}
-                                        name="i2cBlock"
-                                        className="form-select-sm"
-                                        groupClassName="col-sm-3 mb-3"
-                                        value={values.i2cBlock}
-                                        error={errors.i2cBlock}
-                                        isInvalid={errors.i2cBlock}
-                                        onChange={handlePeripheralChange}
-                                    >
-                                        {getAvailablePeripherals('i2c').map((o, i) => (
-                                            <option key={`i2cBlock-option-${i}`} value={o.value}>
-                                                {o.label}
-                                            </option>
-                                        ))}
-                                    </FormSelect>
-                                    <FormControl
-                                        type="text"
-                                        label={t('DisplayConfig:form.i2c-address-label')}
-                                        name="i2cAddress"
-                                        className="form-control-sm"
-                                        groupClassName="col-sm-3 mb-3"
-                                        value={values.i2cAddress}
-                                        error={errors.i2cAddress}
-                                        isInvalid={errors.i2cAddress}
-                                        onChange={handleChange}
-                                        maxLength={4}
-                                    />
-                                </Row>
-                                <h1>{t('DisplayConfig:section.screen-header')}</h1>
-                                <Row className="mb-4">
-                                    <FormSelect
-                                        label={t('DisplayConfig:form.flip-display-label')}
-                                        name="flipDisplay"
-                                        className="form-select-sm"
-                                        groupClassName="col-sm-3 mb-3"
-                                        value={values.flipDisplay}
-                                        error={errors.flipDisplay}
-                                        isInvalid={errors.flipDisplay}
-                                        onChange={handleChange}
-                                    >
-                                        {DISPLAY_FLIP_MODES.map((o, i) => (
-                                            <option key={`flipDisplay-option-${i}`} value={o.value}>
-                                                {o.label}
-                                            </option>
-                                        ))}
-                                    </FormSelect>
-                                    <FormSelect
-                                        label={t('DisplayConfig:form.invert-display-label')}
-                                        name="invertDisplay"
-                                        className="form-select-sm"
-                                        groupClassName="col-sm-3 mb-3"
-                                        value={values.invertDisplay}
-                                        error={errors.invertDisplay}
-                                        isInvalid={errors.invertDisplay}
-                                        onChange={handleChange}
-                                    >
-                                        {ON_OFF_OPTIONS.map((o, i) => (
-                                            <option key={`invertDisplay-option-${i}`} value={o.value}>
-                                                {o.label}
-                                            </option>
-                                        ))}
-                                    </FormSelect>
-                                    <div className="col-sm-3 mb-3">
-                                        <label className="form-label">{t('DisplayConfig:form.power-management-header')}</label>
-                                        <Form.Check
-                                            label={t('DisplayConfig:form.turn-off-when-suspended')}
-                                            type="switch"
-                                            name="turnOffWhenSuspended"
-                                            className="align-middle"
-                                            isInvalid={false}
-                                            checked={Boolean(values.turnOffWhenSuspended)}
-                                            onChange={(e) => {
-                                                setFieldValue(
-                                                    'turnOffWhenSuspended',
-                                                    e.target.checked ? 1 : 0,
-                                                );
-                                            }}
-                                        />
-                                    </div>
-                                </Row>
-                                <h1>{t('DisplayConfig:section.layout-header')}</h1>
-                                <Row className="mb-4">
-                                    <FormSelect
-                                        label={t('DisplayConfig:form.button-layout-label')}
-                                        name="buttonLayout"
-                                        className="form-select-sm"
-                                        groupClassName="col-sm-3 mb-3"
-                                        value={values.buttonLayout}
-                                        error={errors.buttonLayout}
-                                        isInvalid={errors.buttonLayout}
-                                        onChange={handleChange}
-                                    >
-                                        {Object.keys(buttonLayoutDefinitions.buttonLayout).map((o, i) => (
-                                            <option
-                                                key={`buttonLayout-option-${i}`}
-                                                value={buttonLayoutDefinitions.buttonLayout[o]}
-                                            >
-                                                {t(`LayoutConfig:layouts.left.${o}`)}
-                                            </option>
-                                        ))}
-                                    </FormSelect>
-                                    <FormSelect
-                                        label={t('DisplayConfig:form.button-layout-right-label')}
-                                        name="buttonLayoutRight"
-                                        className="form-select-sm"
-                                        groupClassName="col-sm-3 mb-3"
-                                        value={values.buttonLayoutRight}
-                                        error={errors.buttonLayoutRight}
-                                        isInvalid={errors.buttonLayoutRight}
-                                        onChange={handleChange}
-                                    >
-                                        {Object.keys(buttonLayoutDefinitions.buttonLayoutRight).map((o, i) => (
-                                            <option
-                                                key={`buttonLayoutRight-option-${i}`}
-                                                value={buttonLayoutDefinitions.buttonLayoutRight[o]}
-                                            >
-                                                {t(`LayoutConfig:layouts.right.${o}`)}
-                                            </option>
-                                        ))}
-                                    </FormSelect>
-                                    <FormSelect
-                                        label={t('DisplayConfig:form.splash-mode-label')}
-                                        name="splashMode"
-                                        className="form-select-sm"
-                                        groupClassName="col-sm-3 mb-3"
-                                        value={values.splashMode}
-                                        error={errors.splashMode}
-                                        isInvalid={errors.splashMode}
-                                        onChange={handleChange}
-                                    >
-                                        {SPLASH_MODES.map((o, i) => (
-                                            <option key={`splashMode-option-${i}`} value={o.value}>
-                                                {o.label}
-                                            </option>
-                                        ))}
-                                    </FormSelect>
-                                </Row>
-                                {isButtonLayoutCustom(values) && (
-                                    <Row className="mb-3">
-                                        <FormLabel>
-                                            {t('DisplayConfig:form.button-layout-custom-header')}
-                                        </FormLabel>
-                                        <Col sm="6">
-                                            <Form.Group as={Row} name="buttonLayoutCustomOptions">
-                                                <Form.Label column>
-                                                    {t(
-                                                        'DisplayConfig:form.button-layout-custom-left-label',
-                                                    )}
-                                                </Form.Label>
-                                                <FormSelect
-                                                    name="buttonLayoutCustomOptions.params.layout"
-                                                    className="form-select-sm"
-                                                    groupClassName="col-sm-10 mb-1"
-                                                    value={values.buttonLayoutCustomOptions.params.layout}
-                                                    onChange={handleChange}
-                                                >
-                                                    {Object.keys(buttonLayoutDefinitions.buttonLayout).map((o, i) => (
-                                                        <option
-                                                            key={`buttonLayout-option-${i}`}
-                                                            value={buttonLayoutDefinitions.buttonLayout[o]}
-                                                        >
-                                                            {t(`LayoutConfig:layouts.left.${o}`)}
-                                                        </option>
-                                                    ))}
-                                                </FormSelect>
-                                            </Form.Group>
-                                            <Form.Group as={Row}>
-                                                <Form.Label column>
-                                                    {t(
-                                                        'DisplayConfig:form.button-layout-custom-start-x-label',
-                                                    )}
-                                                </Form.Label>
-                                                <Col sm="10">
-                                                    <Field
-                                                        column
-                                                        className="mb-1"
-                                                        name="buttonLayoutCustomOptions.params.startX"
-                                                        type="number"
-                                                        as={Form.Control}
-                                                    />
-                                                </Col>
-                                            </Form.Group>
-                                            <Form.Group as={Row}>
-                                                <Form.Label column>
-                                                    {t(
-                                                        'DisplayConfig:form.button-layout-custom-start-y-label',
-                                                    )}
-                                                </Form.Label>
-                                                <Col sm="10">
-                                                    <Field
-                                                        column
-                                                        className="mb-1"
-                                                        name="buttonLayoutCustomOptions.params.startY"
-                                                        type="number"
-                                                        as={Form.Control}
-                                                    />
-                                                </Col>
-                                            </Form.Group>
-                                            <Form.Group as={Row}>
-                                                <Form.Label column>
-                                                    {t(
-                                                        'DisplayConfig:form.button-layout-custom-button-radius-label',
-                                                    )}
-                                                </Form.Label>
-                                                <Col sm="10">
-                                                    <Field
-                                                        column
-                                                        className="mb-1"
-                                                        name="buttonLayoutCustomOptions.params.buttonRadius"
-                                                        type="number"
-                                                        as={Form.Control}
-                                                    />
-                                                </Col>
-                                            </Form.Group>
-                                            <Form.Group as={Row}>
-                                                <Form.Label column>
-                                                    {t(
-                                                        'DisplayConfig:form.button-layout-custom-button-padding-label',
-                                                    )}
-                                                </Form.Label>
-                                                <Col sm="10">
-                                                    <Field
-                                                        column
-                                                        className="mb-1"
-                                                        name="buttonLayoutCustomOptions.params.buttonPadding"
-                                                        type="number"
-                                                        as={Form.Control}
-                                                    />
-                                                </Col>
-                                            </Form.Group>
-                                        </Col>
-                                        <Col sm="6">
-                                            <Form.Group as={Row}>
-                                                <Form.Label column>
-                                                    {t(
-                                                        'DisplayConfig:form.button-layout-custom-right-label',
-                                                    )}
-                                                </Form.Label>
-                                                <FormSelect
-                                                    name="buttonLayoutCustomOptions.paramsRight.layout"
-                                                    className="form-select-sm"
-                                                    groupClassName="col-sm-10 mb-1"
-                                                    value={
-                                                        values.buttonLayoutCustomOptions.paramsRight.layout
-                                                    }
-                                                    onChange={handleChange}
-                                                >
-                                                    {Object.keys(buttonLayoutDefinitions.buttonLayoutRight).map((o, i) => (
-                                                        <option
-                                                            key={`buttonLayoutRight-option-${i}`}
-                                                            value={buttonLayoutDefinitions.buttonLayoutRight[o]}
-                                                        >
-                                                            {t(`LayoutConfig:layouts.right.${o}`)}
-                                                        </option>
-                                                    ))}
-                                                </FormSelect>
-                                            </Form.Group>
-                                            <Form.Group as={Row}>
-                                                <Form.Label column>
-                                                    {t(
-                                                        'DisplayConfig:form.button-layout-custom-start-x-label',
-                                                    )}
-                                                </Form.Label>
-                                                <Col sm="10">
-                                                    <Field
-                                                        column
-                                                        className="mb-1"
-                                                        name="buttonLayoutCustomOptions.paramsRight.startX"
-                                                        type="number"
-                                                        as={Form.Control}
-                                                    />
-                                                </Col>
-                                            </Form.Group>
-                                            <Form.Group as={Row}>
-                                                <Form.Label column>
-                                                    {t(
-                                                        'DisplayConfig:form.button-layout-custom-start-y-label',
-                                                    )}
-                                                </Form.Label>
-                                                <Col sm="10">
-                                                    <Field
-                                                        column
-                                                        className="mb-1"
-                                                        name="buttonLayoutCustomOptions.paramsRight.startY"
-                                                        type="number"
-                                                        as={Form.Control}
-                                                    />
-                                                </Col>
-                                            </Form.Group>
-                                            <Form.Group as={Row}>
-                                                <Form.Label column>
-                                                    {t(
-                                                        'DisplayConfig:form.button-layout-custom-button-radius-label',
-                                                    )}
-                                                </Form.Label>
-                                                <Col sm="10">
-                                                    <Field
-                                                        column
-                                                        className="mb-1"
-                                                        name="buttonLayoutCustomOptions.paramsRight.buttonRadius"
-                                                        type="number"
-                                                        as={Form.Control}
-                                                    />
-                                                </Col>
-                                            </Form.Group>
-                                            <Form.Group as={Row}>
-                                                <Form.Label column>
-                                                    {t(
-                                                        'DisplayConfig:form.button-layout-custom-button-padding-label',
-                                                    )}
-                                                </Form.Label>
-                                                <Col sm="10">
-                                                    <Field
-                                                        column
-                                                        className="mb-1"
-                                                        name="buttonLayoutCustomOptions.paramsRight.buttonPadding"
-                                                        type="number"
-                                                        as={Form.Control}
-                                                    />
-                                                </Col>
-                                            </Form.Group>
-                                        </Col>
-                                    </Row>
-                                )}
-                                <Row className="mb-3">
-                                    <FormControl
-                                        type="number"
-                                        label={t('DisplayConfig:form.splash-duration-label')}
-                                        name="splashDuration"
-                                        className="form-select-sm"
-                                        groupClassName="col-sm-3 mb-3"
-                                        value={values.splashDuration}
-                                        error={errors.splashDuration}
-                                        isInvalid={errors.splashDuration}
-                                        onChange={handleChange}
-                                        min={0}
-                                    />
-                                    <FormControl
-                                        type="number"
-                                        label={t('DisplayConfig:form.display-saver-timeout-label')}
-                                        name="displaySaverTimeout"
-                                        className="form-select-sm"
-                                        groupClassName="col-sm-3 mb-3"
-                                        value={values.displaySaverTimeout}
-                                        error={errors.displaySaverTimeout}
-                                        isInvalid={errors.displaySaverTimeout}
-                                        onChange={handleChange}
-                                        min={0}
-                                    />
-                                </Row>
-                                <Row>
-                                    <Field name="splashImage">
-                                        {({
-                                            field, // { name, value, onChange, onBlur }
-                                            form, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
-                                        }) => (
-                                            <div className="mt-3">
-                                                <Canvas
-                                                    onChange={(base64) =>
-                                                        onChangeCanvas(base64, form, field)
-                                                    }
-                                                    value={field.value}
-                                                />
-                                            </div>
-                                        )}
-                                    </Field>
-                                </Row>
-                                <div className="mt-3">
-                                    <Button type="submit">{t('Common:button-save-label')}</Button>
-                                    {saveMessage ? (
-                                        <span className="alert">{saveMessage}</span>
-                                    ) : null}
-                                </div>
-                                <FormContext />
-                            </Form>
-                        </div>
-                        : 
-                        <FormLabel><Trans ns="PeripheralMapping" i18nKey="peripheral-toggle-unavailable" values={{'name':'I2C'}}><NavLink exact="true" to="/peripheral-mapping">{t('PeripheralMapping:header-text')}</NavLink></Trans></FormLabel>
-                    }
-					</Section>
-				)}
-			}
+				const handlePeripheralChange = (e) => {
+					let device = getSelectedPeripheral('i2c', e.target.value);
+					handleChange(e);
+				};
+
+				return (
+					console.log('errors', errors) ||
+					console.log('values', values) || (
+						<Section title={t('DisplayConfig:header-text')}>
+							{getAvailablePeripherals('i2c') ? (
+								<div>
+									<p>{t('DisplayConfig:sub-header-text')}</p>
+									<ul>
+										<Trans ns="DisplayConfig" i18nKey="list-text">
+											<li>Monochrome display with 128x64 resolution</li>
+											<li>
+												Uses I2C with a SSD1306, SH1106, SH1107 or other
+												compatible display IC
+											</li>
+											<li>Supports 3.3v operation</li>
+										</Trans>
+									</ul>
+									<Form noValidate onSubmit={handleSubmit}>
+										<h1>{t('DisplayConfig:section.hardware-header')}</h1>
+										<Row className="mb-4">
+											<FormSelect
+												label={t('Common:switch-enabled')}
+												name="enabled"
+												className="form-select-sm"
+												groupClassName="col-sm-3 mb-3"
+												value={values.enabled}
+												error={errors.enabled}
+												isInvalid={errors.enabled}
+												onChange={handleChange}
+											>
+												{ON_OFF_OPTIONS.map((o, i) => (
+													<option key={`enabled-option-${i}`} value={o.value}>
+														{o.label}
+													</option>
+												))}
+											</FormSelect>
+											<FormSelect
+												label={t('DisplayConfig:form.i2c-block-label')}
+												name="i2cBlock"
+												className="form-select-sm"
+												groupClassName="col-sm-3 mb-3"
+												value={values.i2cBlock}
+												error={errors.i2cBlock}
+												isInvalid={errors.i2cBlock}
+												onChange={handlePeripheralChange}
+											>
+												{getAvailablePeripherals('i2c').map((o, i) => (
+													<option key={`i2cBlock-option-${i}`} value={o.value}>
+														{o.label}
+													</option>
+												))}
+											</FormSelect>
+											<FormControl
+												type="text"
+												label={t('DisplayConfig:form.i2c-address-label')}
+												name="i2cAddress"
+												className="form-control-sm"
+												groupClassName="col-sm-3 mb-3"
+												value={values.i2cAddress}
+												error={errors.i2cAddress}
+												isInvalid={errors.i2cAddress}
+												onChange={handleChange}
+												maxLength={4}
+											/>
+										</Row>
+										<h1>{t('DisplayConfig:section.screen-header')}</h1>
+										<Row className="mb-4">
+											<FormSelect
+												label={t('DisplayConfig:form.flip-display-label')}
+												name="flipDisplay"
+												className="form-select-sm"
+												groupClassName="col-sm-3 mb-3"
+												value={values.flipDisplay}
+												error={errors.flipDisplay}
+												isInvalid={errors.flipDisplay}
+												onChange={handleChange}
+											>
+												{DISPLAY_FLIP_MODES.map((o, i) => (
+													<option
+														key={`flipDisplay-option-${i}`}
+														value={o.value}
+													>
+														{o.label}
+													</option>
+												))}
+											</FormSelect>
+											<FormSelect
+												label={t('DisplayConfig:form.invert-display-label')}
+												name="invertDisplay"
+												className="form-select-sm"
+												groupClassName="col-sm-3 mb-3"
+												value={values.invertDisplay}
+												error={errors.invertDisplay}
+												isInvalid={errors.invertDisplay}
+												onChange={handleChange}
+											>
+												{ON_OFF_OPTIONS.map((o, i) => (
+													<option
+														key={`invertDisplay-option-${i}`}
+														value={o.value}
+													>
+														{o.label}
+													</option>
+												))}
+											</FormSelect>
+											<div className="col-sm-3 mb-3">
+												<label className="form-label">
+													{t('DisplayConfig:form.power-management-header')}
+												</label>
+												<Form.Check
+													label={t(
+														'DisplayConfig:form.turn-off-when-suspended',
+													)}
+													type="switch"
+													name="turnOffWhenSuspended"
+													className="align-middle"
+													isInvalid={false}
+													checked={Boolean(values.turnOffWhenSuspended)}
+													onChange={(e) => {
+														setFieldValue(
+															'turnOffWhenSuspended',
+															e.target.checked ? 1 : 0,
+														);
+													}}
+												/>
+											</div>
+										</Row>
+										<h1>{t('DisplayConfig:section.layout-header')}</h1>
+										<Row className="mb-4">
+											<FormSelect
+												label={t('DisplayConfig:form.button-layout-label')}
+												name="buttonLayout"
+												className="form-select-sm"
+												groupClassName="col-sm-3 mb-3"
+												value={values.buttonLayout}
+												error={errors.buttonLayout}
+												isInvalid={errors.buttonLayout}
+												onChange={handleChange}
+											>
+												{Object.keys(buttonLayoutDefinitions.buttonLayout).map(
+													(o, i) => (
+														<option
+															key={`buttonLayout-option-${i}`}
+															value={buttonLayoutDefinitions.buttonLayout[o]}
+														>
+															{t(`LayoutConfig:layouts.left.${o}`)}
+														</option>
+													),
+												)}
+											</FormSelect>
+											<FormSelect
+												label={t(
+													'DisplayConfig:form.button-layout-right-label',
+												)}
+												name="buttonLayoutRight"
+												className="form-select-sm"
+												groupClassName="col-sm-3 mb-3"
+												value={values.buttonLayoutRight}
+												error={errors.buttonLayoutRight}
+												isInvalid={errors.buttonLayoutRight}
+												onChange={handleChange}
+											>
+												{Object.keys(
+													buttonLayoutDefinitions.buttonLayoutRight,
+												).map((o, i) => (
+													<option
+														key={`buttonLayoutRight-option-${i}`}
+														value={buttonLayoutDefinitions.buttonLayoutRight[o]}
+													>
+														{t(`LayoutConfig:layouts.right.${o}`)}
+													</option>
+												))}
+											</FormSelect>
+											<FormSelect
+												label={t('DisplayConfig:form.splash-mode-label')}
+												name="splashMode"
+												className="form-select-sm"
+												groupClassName="col-sm-3 mb-3"
+												value={values.splashMode}
+												error={errors.splashMode}
+												isInvalid={errors.splashMode}
+												onChange={handleChange}
+											>
+												{SPLASH_MODES.map((o, i) => (
+													<option
+														key={`splashMode-option-${i}`}
+														value={o.value}
+													>
+														{o.label}
+													</option>
+												))}
+											</FormSelect>
+										</Row>
+										{isButtonLayoutCustom(values) && (
+											<Row className="mb-3">
+												<FormLabel>
+													{t('DisplayConfig:form.button-layout-custom-header')}
+												</FormLabel>
+												<Col sm="6">
+													<Form.Group as={Row} name="buttonLayoutCustomOptions">
+														<Form.Label column>
+															{t(
+																'DisplayConfig:form.button-layout-custom-left-label',
+															)}
+														</Form.Label>
+														<FormSelect
+															name="buttonLayoutCustomOptions.params.layout"
+															className="form-select-sm"
+															groupClassName="col-sm-10 mb-1"
+															value={
+																values.buttonLayoutCustomOptions.params.layout
+															}
+															onChange={handleChange}
+														>
+															{Object.keys(
+																buttonLayoutDefinitions.buttonLayout,
+															).map((o, i) => (
+																<option
+																	key={`buttonLayout-option-${i}`}
+																	value={
+																		buttonLayoutDefinitions.buttonLayout[o]
+																	}
+																>
+																	{t(`LayoutConfig:layouts.left.${o}`)}
+																</option>
+															))}
+														</FormSelect>
+													</Form.Group>
+													<Form.Group as={Row}>
+														<Form.Label column>
+															{t(
+																'DisplayConfig:form.button-layout-custom-start-x-label',
+															)}
+														</Form.Label>
+														<Col sm="10">
+															<Field
+																column
+																className="mb-1"
+																name="buttonLayoutCustomOptions.params.startX"
+																type="number"
+																as={Form.Control}
+															/>
+														</Col>
+													</Form.Group>
+													<Form.Group as={Row}>
+														<Form.Label column>
+															{t(
+																'DisplayConfig:form.button-layout-custom-start-y-label',
+															)}
+														</Form.Label>
+														<Col sm="10">
+															<Field
+																column
+																className="mb-1"
+																name="buttonLayoutCustomOptions.params.startY"
+																type="number"
+																as={Form.Control}
+															/>
+														</Col>
+													</Form.Group>
+													<Form.Group as={Row}>
+														<Form.Label column>
+															{t(
+																'DisplayConfig:form.button-layout-custom-button-radius-label',
+															)}
+														</Form.Label>
+														<Col sm="10">
+															<Field
+																column
+																className="mb-1"
+																name="buttonLayoutCustomOptions.params.buttonRadius"
+																type="number"
+																as={Form.Control}
+															/>
+														</Col>
+													</Form.Group>
+													<Form.Group as={Row}>
+														<Form.Label column>
+															{t(
+																'DisplayConfig:form.button-layout-custom-button-padding-label',
+															)}
+														</Form.Label>
+														<Col sm="10">
+															<Field
+																column
+																className="mb-1"
+																name="buttonLayoutCustomOptions.params.buttonPadding"
+																type="number"
+																as={Form.Control}
+															/>
+														</Col>
+													</Form.Group>
+												</Col>
+												<Col sm="6">
+													<Form.Group as={Row}>
+														<Form.Label column>
+															{t(
+																'DisplayConfig:form.button-layout-custom-right-label',
+															)}
+														</Form.Label>
+														<FormSelect
+															name="buttonLayoutCustomOptions.paramsRight.layout"
+															className="form-select-sm"
+															groupClassName="col-sm-10 mb-1"
+															value={
+																values.buttonLayoutCustomOptions.paramsRight
+																	.layout
+															}
+															onChange={handleChange}
+														>
+															{Object.keys(
+																buttonLayoutDefinitions.buttonLayoutRight,
+															).map((o, i) => (
+																<option
+																	key={`buttonLayoutRight-option-${i}`}
+																	value={
+																		buttonLayoutDefinitions.buttonLayoutRight[o]
+																	}
+																>
+																	{t(`LayoutConfig:layouts.right.${o}`)}
+																</option>
+															))}
+														</FormSelect>
+													</Form.Group>
+													<Form.Group as={Row}>
+														<Form.Label column>
+															{t(
+																'DisplayConfig:form.button-layout-custom-start-x-label',
+															)}
+														</Form.Label>
+														<Col sm="10">
+															<Field
+																column
+																className="mb-1"
+																name="buttonLayoutCustomOptions.paramsRight.startX"
+																type="number"
+																as={Form.Control}
+															/>
+														</Col>
+													</Form.Group>
+													<Form.Group as={Row}>
+														<Form.Label column>
+															{t(
+																'DisplayConfig:form.button-layout-custom-start-y-label',
+															)}
+														</Form.Label>
+														<Col sm="10">
+															<Field
+																column
+																className="mb-1"
+																name="buttonLayoutCustomOptions.paramsRight.startY"
+																type="number"
+																as={Form.Control}
+															/>
+														</Col>
+													</Form.Group>
+													<Form.Group as={Row}>
+														<Form.Label column>
+															{t(
+																'DisplayConfig:form.button-layout-custom-button-radius-label',
+															)}
+														</Form.Label>
+														<Col sm="10">
+															<Field
+																column
+																className="mb-1"
+																name="buttonLayoutCustomOptions.paramsRight.buttonRadius"
+																type="number"
+																as={Form.Control}
+															/>
+														</Col>
+													</Form.Group>
+													<Form.Group as={Row}>
+														<Form.Label column>
+															{t(
+																'DisplayConfig:form.button-layout-custom-button-padding-label',
+															)}
+														</Form.Label>
+														<Col sm="10">
+															<Field
+																column
+																className="mb-1"
+																name="buttonLayoutCustomOptions.paramsRight.buttonPadding"
+																type="number"
+																as={Form.Control}
+															/>
+														</Col>
+													</Form.Group>
+												</Col>
+											</Row>
+										)}
+										<Row className="mb-3">
+											<FormControl
+												type="number"
+												label={t('DisplayConfig:form.splash-duration-label')}
+												name="splashDuration"
+												className="form-select-sm"
+												groupClassName="col-sm-3 mb-3"
+												value={values.splashDuration}
+												error={errors.splashDuration}
+												isInvalid={errors.splashDuration}
+												onChange={handleChange}
+												min={0}
+											/>
+											<FormControl
+												type="number"
+												label={t(
+													'DisplayConfig:form.display-saver-timeout-label',
+												)}
+												name="displaySaverTimeout"
+												className="form-select-sm"
+												groupClassName="col-sm-3 mb-3"
+												value={values.displaySaverTimeout}
+												error={errors.displaySaverTimeout}
+												isInvalid={errors.displaySaverTimeout}
+												onChange={handleChange}
+												min={0}
+											/>
+										</Row>
+										<Row>
+											<Field name="splashImage">
+												{({
+													field, // { name, value, onChange, onBlur }
+													form, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
+												}) => (
+													<div className="mt-3">
+														<Canvas
+															onChange={(base64) =>
+																onChangeCanvas(base64, form, field)
+															}
+															value={field.value}
+														/>
+													</div>
+												)}
+											</Field>
+										</Row>
+										<div className="mt-3">
+											<Button type="submit">
+												{t('Common:button-save-label')}
+											</Button>
+											{saveMessage ? (
+												<span className="alert">{saveMessage}</span>
+											) : null}
+										</div>
+										<FormContext />
+									</Form>
+								</div>
+							) : (
+								<FormLabel>
+									<Trans
+										ns="PeripheralMapping"
+										i18nKey="peripheral-toggle-unavailable"
+										values={{ name: 'I2C' }}
+									>
+										<NavLink exact="true" to="/peripheral-mapping">
+											{t('PeripheralMapping:header-text')}
+										</NavLink>
+									</Trans>
+								</FormLabel>
+							)}
+						</Section>
+					)
+				);
+			}}
 		</Formik>
 	);
 }
diff --git a/www/src/Pages/HomePage.jsx b/www/src/Pages/HomePage.jsx
index ee6189045..e6ba5570c 100644
--- a/www/src/Pages/HomePage.jsx
+++ b/www/src/Pages/HomePage.jsx
@@ -30,10 +30,9 @@ export default function HomePage() {
 						label: boardConfigLabel,
 						fileName: boardConfigFileName,
 					});
-					Http
-						.get(
-							'https://api.github.com/repos/OpenStickCommunity/GP2040-CE/releases/latest',
-						)
+					Http.get(
+						'https://api.github.com/repos/OpenStickCommunity/GP2040-CE/releases/latest',
+					)
 						.then((response) => {
 							const latestTag = response.data.tag_name;
 							setLatestVersion(latestTag);
@@ -83,18 +82,20 @@ export default function HomePage() {
 					<div>{`${boardConfigProperties.label} (${boardConfigProperties.fileName}.uf2)`}</div>
 					<div>{t('HomePage:current-text', { version: currentVersion })}</div>
 					<div>{t('HomePage:latest-text', { version: latestVersion })}</div>
-					{latestVersion && currentVersion?.split("-").length == 1 && currentVersion !== latestVersion && (
-						<div className="mt-3 mb-3">
-							<a
-								target="_blank"
-								rel="noreferrer"
-								href={latestDownloadUrl}
-								className="btn btn-primary"
-							>
-								{t('HomePage:get-update-text')}
-							</a>
-						</div>
-					)}
+					{latestVersion &&
+						currentVersion?.split('-').length == 1 &&
+						currentVersion !== latestVersion && (
+							<div className="mt-3 mb-3">
+								<a
+									target="_blank"
+									rel="noreferrer"
+									href={latestDownloadUrl}
+									className="btn btn-primary"
+								>
+									{t('HomePage:get-update-text')}
+								</a>
+							</div>
+						)}
 					{memoryReport && (
 						<div>
 							<strong>{t('HomePage:memory-header-text')}</strong>
diff --git a/www/src/Pages/InputMacroAddonPage.tsx b/www/src/Pages/InputMacroAddonPage.tsx
index 8852f62f7..25709f8ce 100644
--- a/www/src/Pages/InputMacroAddonPage.tsx
+++ b/www/src/Pages/InputMacroAddonPage.tsx
@@ -1,6 +1,17 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { AppContext } from '../Contexts/AppContext';
-import { Badge, Button, Col, Form, Nav, OverlayTrigger, Row, Tab, Table, Tooltip } from 'react-bootstrap';
+import {
+	Badge,
+	Button,
+	Col,
+	Form,
+	Nav,
+	OverlayTrigger,
+	Row,
+	Tab,
+	Table,
+	Tooltip,
+} from 'react-bootstrap';
 import { Formik, useFormikContext } from 'formik';
 import * as yup from 'yup';
 import { useTranslation } from 'react-i18next';
@@ -44,9 +55,9 @@ const MACRO_INPUTS_MAX = 30;
 const MACRO_LIMIT = 6;
 
 const defaultMacroInput = {
-    buttonMask: 0,
-    duration: 16666,
-    waitDuration: 0
+	buttonMask: 0,
+	duration: 16666,
+	waitDuration: 0,
 };
 
 const defaultValues = {
@@ -93,7 +104,7 @@ const ButtonMasksComponent = (props) => {
 		isInvalid,
 		className,
 		buttonLabelType,
-		buttonMasks
+		buttonMasks,
 	} = props;
 	return (
 		<div key={key} className={className}>
@@ -132,61 +143,70 @@ const MacroInputComponent = (props) => {
 
 	return (
 		<Row key={key} className="py-2 flex-nowrap">
-			<Col style={{
-				'minWidth': '150px',
-				'maxWidth': '150px',
-			}}>
+			<Col
+				style={{
+					minWidth: '150px',
+					maxWidth: '150px',
+				}}
+			>
 				<Row className="d-flex justify-content-center">
 					<Col sm={6} className="px-0">
-					<Form.Control
-						className="text-center"
-						size="sm"
-						type="number"
-						placeholder={t('InputMacroAddon:input-macro-duration-label')}
-						name={`${key}.duration`}
-						value={duration / (showFrames ? ONE_FRAME_US : 1000)}
-						step="any"
-						error={errors?.duration}
-						isInvalid={errors?.duration}
-						onChange={(e) => {
-							setFieldValue(
-								`${key}.duration`,
-								e.target.value * (showFrames ? ONE_FRAME_US : 1000),
-							);
-						}}
-						min={0}
-					/></Col>
+						<Form.Control
+							className="text-center"
+							size="sm"
+							type="number"
+							placeholder={t('InputMacroAddon:input-macro-duration-label')}
+							name={`${key}.duration`}
+							value={duration / (showFrames ? ONE_FRAME_US : 1000)}
+							step="any"
+							error={errors?.duration}
+							isInvalid={errors?.duration}
+							onChange={(e) => {
+								setFieldValue(
+									`${key}.duration`,
+									e.target.value * (showFrames ? ONE_FRAME_US : 1000),
+								);
+							}}
+							min={0}
+						/>
+					</Col>
 					<Col sm={5} className="px-1 text-nowrap">
-					{t(
-						showFrames
-							? 'InputMacroAddon:input-macro-time-label-frames'
-							: 'InputMacroAddon:input-macro-time-label-ms',
-					)}
+						{t(
+							showFrames
+								? 'InputMacroAddon:input-macro-time-label-frames'
+								: 'InputMacroAddon:input-macro-time-label-ms',
+						)}
 					</Col>
 				</Row>
 			</Col>
-			<Col sm={"auto"}>
+			<Col sm={'auto'}>
 				<Row className="d-flex justify-content-center">
-					{BUTTON_MASKS.filter(mask => buttonMask & mask.value).map((mask, i1) =>
-						<Col key={`${key}.buttonMask[${i1}]`} sm={"auto"} className="px-1">
-							<ButtonMasksComponent
-								id={`${key}.buttonMask[${i1}]`}
-								value={buttonMask & mask.value}
-								onChange={(e) => {
-									setFieldValue(
-										`${key}.buttonMask`,
-										(buttonMask ^ mask.value) | e.target.value,
-									);
-								}}
-								error={errors?.buttonMask}
-								isInvalid={errors?.buttonMask}
-								translation={t}
-								buttonLabelType={buttonLabelType}
-								buttonMasks={BUTTON_MASKS}
-							/>
-						</Col>
+					{BUTTON_MASKS.filter((mask) => buttonMask & mask.value).map(
+						(mask, i1) => (
+							<Col
+								key={`${key}.buttonMask[${i1}]`}
+								sm={'auto'}
+								className="px-1"
+							>
+								<ButtonMasksComponent
+									id={`${key}.buttonMask[${i1}]`}
+									value={buttonMask & mask.value}
+									onChange={(e) => {
+										setFieldValue(
+											`${key}.buttonMask`,
+											(buttonMask ^ mask.value) | e.target.value,
+										);
+									}}
+									error={errors?.buttonMask}
+									isInvalid={errors?.buttonMask}
+									translation={t}
+									buttonLabelType={buttonLabelType}
+									buttonMasks={BUTTON_MASKS}
+								/>
+							</Col>
+						),
 					)}
-					<Col sm={"auto"} className="px-1">
+					<Col sm={'auto'} className="px-1">
 						<ButtonMasksComponent
 							id={`${key}.buttonMaskPlaceholder`}
 							className="col-sm-auto"
@@ -203,41 +223,49 @@ const MacroInputComponent = (props) => {
 					</Col>
 				</Row>
 			</Col>
-			<Col style={{
-				'minWidth': '125px',
-				'maxWidth': '125px',
-			}} className="d-flex justify-content-center text-nowrap"> release and wait </Col>
-			<Col style={{
-				'minWidth': '150px',
-				'maxWidth': '150px',
-			}}>
+			<Col
+				style={{
+					minWidth: '125px',
+					maxWidth: '125px',
+				}}
+				className="d-flex justify-content-center text-nowrap"
+			>
+				{' '}
+				release and wait{' '}
+			</Col>
+			<Col
+				style={{
+					minWidth: '150px',
+					maxWidth: '150px',
+				}}
+			>
 				<Row className="d-flex justify-content-center">
 					<Col sm={6} className="px-0">
-					<Form.Control
-						className="text-center"
-						size="sm"
-						type="number"
-						placeholder={t('InputMacroAddon:input-macro-wait-duration-label')}
-						name={`${key}.waitDuration`}
-						value={waitDuration / (showFrames ? ONE_FRAME_US : 1000)}
-						step="any"
-						error={errors?.waitDuration}
-						isInvalid={errors?.waitDuration}
-						onChange={(e) => {
-							setFieldValue(
-								`${key}.waitDuration`,
-								e.target.value * (showFrames ? ONE_FRAME_US : 1000),
-							);
-						}}
-						min={0}
-					/>
+						<Form.Control
+							className="text-center"
+							size="sm"
+							type="number"
+							placeholder={t('InputMacroAddon:input-macro-wait-duration-label')}
+							name={`${key}.waitDuration`}
+							value={waitDuration / (showFrames ? ONE_FRAME_US : 1000)}
+							step="any"
+							error={errors?.waitDuration}
+							isInvalid={errors?.waitDuration}
+							onChange={(e) => {
+								setFieldValue(
+									`${key}.waitDuration`,
+									e.target.value * (showFrames ? ONE_FRAME_US : 1000),
+								);
+							}}
+							min={0}
+						/>
 					</Col>
 					<Col sm={5} className="px-1 text-nowrap">
-					{t(
-						showFrames
-							? 'InputMacroAddon:input-macro-time-label-frames'
-							: 'InputMacroAddon:input-macro-time-label-ms',
-					)}
+						{t(
+							showFrames
+								? 'InputMacroAddon:input-macro-time-label-frames'
+								: 'InputMacroAddon:input-macro-time-label-ms',
+						)}
 					</Col>
 					<Col sm={1} className="px-0 text-nowrap">
 						<OverlayTrigger
@@ -287,7 +315,7 @@ const MacroComponent = (props) => {
 	return (
 		<div key={key}>
 			<Row>
-				<Col sm={"auto"}>
+				<Col sm={'auto'}>
 					<Form.Check
 						name={`${key}.enabled`}
 						label={t('InputMacroAddon:input-macro-macro-enabled')}
@@ -302,10 +330,8 @@ const MacroComponent = (props) => {
 				</Col>
 			</Row>
 			<Row className="my-2">
-				<Col sm={"auto"}>
-					Macro Name:
-				</Col>
-				<Col sm={"auto"}>
+				<Col sm={'auto'}>Macro Name:</Col>
+				<Col sm={'auto'}>
 					<Form.Control
 						size="sm"
 						type="text"
@@ -320,10 +346,10 @@ const MacroComponent = (props) => {
 				</Col>
 			</Row>
 			<Row className="my-2">
-				<Col sm={"auto"} mb={2}>
+				<Col sm={'auto'} mb={2}>
 					Macro Activation Type:
 				</Col>
-				<Col sm={"auto"}>
+				<Col sm={'auto'}>
 					<Form.Select
 						name={`${key}.macroType`}
 						className="form-select-sm sm-1"
@@ -340,10 +366,10 @@ const MacroComponent = (props) => {
 					</Form.Select>
 				</Col>
 			</Row>
-			
+
 			<hr className="mt-3" />
 			<Row>
-				<Col sm={"auto"}>
+				<Col sm={'auto'}>
 					<Form.Check
 						name={`${key}.interruptible`}
 						label={t('InputMacroAddon:input-macro-macro-interruptible')}
@@ -358,7 +384,7 @@ const MacroComponent = (props) => {
 				</Col>
 			</Row>
 			<Row>
-				<Col sm={"auto"}>
+				<Col sm={'auto'}>
 					<Form.Check
 						name={`${key}.exclusive`}
 						label={t('InputMacroAddon:input-macro-macro-exclusive')}
@@ -374,7 +400,7 @@ const MacroComponent = (props) => {
 				</Col>
 			</Row>
 			<Row mt={2} className="align-items-center">
-				<Col sm={"auto"}>
+				<Col sm={'auto'}>
 					<Form.Check
 						name={`${key}.useMacroTriggerButton`}
 						label={t('InputMacroAddon:input-macro-macro-uses-buttons')}
@@ -392,14 +418,14 @@ const MacroComponent = (props) => {
 				</Col>
 				{useMacroTriggerButton == true && (
 					<Row>
-						<Col sm={"auto"}>
+						<Col sm={'auto'}>
 							{t('InputMacroAddon:input-macro-macro-button-pin-plus')}
 						</Col>
-						<Col sm={"auto"}>
+						<Col sm={'auto'}>
 							<ButtonMasksComponent
 								className="col-sm-auto"
 								value={macroTriggerButton}
-								onChange={(e) => {	
+								onChange={(e) => {
 									setFieldValue(
 										`${key}.macroTriggerButton`,
 										parseInt(e.target.value),
@@ -407,10 +433,14 @@ const MacroComponent = (props) => {
 								}}
 								buttonLabelType={buttonLabelType}
 								translation={t}
-								buttonMasks={BUTTON_MASKS.filter((b, i) =>
-									macroList.find((m, macroIdx) =>
-										index != macroIdx && m.useMacroTriggerButton && (m.macroTriggerButton === b.value)
-									) === undefined
+								buttonMasks={BUTTON_MASKS.filter(
+									(b, i) =>
+										macroList.find(
+											(m, macroIdx) =>
+												index != macroIdx &&
+												m.useMacroTriggerButton &&
+												m.macroTriggerButton === b.value,
+										) === undefined,
 								)}
 							/>
 						</Col>
@@ -419,7 +449,7 @@ const MacroComponent = (props) => {
 			</Row>
 			<hr className="mt-3" />
 			<Row>
-				<Col sm={"auto"}>
+				<Col sm={'auto'}>
 					<Form.Check
 						name={`${key}.showFrames`}
 						label={t('InputMacroAddon:input-macro-macro-show-frames')}
@@ -451,23 +481,22 @@ const MacroComponent = (props) => {
 			</Row>
 			<Row>
 				<Col sm={3}>
-				{macroInputs.length < MACRO_INPUTS_MAX ? (
-					<Button
-						variant="success"
-						className="col px-2"
-						size="sm"
-						onClick={() => {
-							setFieldValue(
-								`${key}.macroInputs[${macroInputs.length}]`,
-								{ ...defaultMacroInput },
-							);
-						}}
-					>
-						Add Input +
-					</Button>
-				) : (
-					<></>
-				)}
+					{macroInputs.length < MACRO_INPUTS_MAX ? (
+						<Button
+							variant="success"
+							className="col px-2"
+							size="sm"
+							onClick={() => {
+								setFieldValue(`${key}.macroInputs[${macroInputs.length}]`, {
+									...defaultMacroInput,
+								});
+							}}
+						>
+							Add Input +
+						</Button>
+					) : (
+						<></>
+					)}
 				</Col>
 			</Row>
 		</div>
@@ -495,7 +524,6 @@ export default function MacrosPage() {
 
 	const { t } = useTranslation('');
 
-
 	const handleCheckbox = async (name, values) => {
 		values[name] = values[name] === 1 ? 0 : 1;
 	};
@@ -506,101 +534,160 @@ export default function MacrosPage() {
 			onSubmit={onSuccess}
 			initialValues={defaultValues}
 		>
-			{({ handleSubmit, handleChange, values, errors, setFieldValue, setValues }) =>
-				(
-					<div>
-						<Form noValidate onSubmit={handleSubmit}>
-							<Tab.Container defaultActiveKey="settings">
-									<Row>
-									<Col sm={2}>
-										<Nav variant="pills" className="flex-column text-nowrap">
-											<Nav.Item key="pills-header">
-												<Nav.Link eventKey="settings">{t('InputMacroAddon:input-macro-header-text')}</Nav.Link>
+			{({
+				handleSubmit,
+				handleChange,
+				values,
+				errors,
+				setFieldValue,
+				setValues,
+			}) => (
+				<div>
+					<Form noValidate onSubmit={handleSubmit}>
+						<Tab.Container defaultActiveKey="settings">
+							<Row>
+								<Col sm={2}>
+									<Nav variant="pills" className="flex-column text-nowrap">
+										<Nav.Item key="pills-header">
+											<Nav.Link eventKey="settings">
+												{t('InputMacroAddon:input-macro-header-text')}
+											</Nav.Link>
+										</Nav.Item>
+										{values.macroList.map((macro, i) => (
+											<Nav.Item key={`pills-item-${i}`}>
+												<Nav.Link eventKey={`macro-${i}`}>
+													{macro.macroLabel.length == 0
+														? `Macro ${i + 1}`
+														: macro.macroLabel.length > 24
+														? macro.macroLabel.substr(0, 24) + '...'
+														: macro.macroLabel}
+												</Nav.Link>
 											</Nav.Item>
-											{values.macroList.map((macro, i) => (
-												<Nav.Item key={`pills-item-${i}`}>
-													<Nav.Link eventKey={`macro-${i}`}>
-														{macro.macroLabel.length == 0 ? `Macro ${i+1}` :
-															macro.macroLabel.length > 24 ?
-																macro.macroLabel.substr(0, 24) + "..." :
-																	macro.macroLabel}
-													</Nav.Link>
-												</Nav.Item>
-											))}
-										</Nav>
-									</Col>
-									<Col sm={10}>
+										))}
+									</Nav>
+								</Col>
+								<Col sm={10}>
 									<Tab.Content>
 										<Tab.Pane eventKey="settings">
-											<Section title={t('InputMacroAddon:input-macro-header-text')}>
-											<Row>
-												<Col>
-												<Table striped bordered hover className="text-center">
-												<thead>
-												<tr>
-													<th>#</th>
-													<th>Label</th>
-													<th>Type</th>
-													<th>Assigned To</th>
-													<th>Button</th>
-													<th>Actions</th>
-													<th>Status</th>
-												</tr>
-												</thead>
-												<tbody>
-											{values.macroList.map((macro, i) => (
-												<tr key={`macro-list-item-${i}`}>
-													<td>{i+1}</td>
-													<td>{macro.macroLabel.length==0 && <em>None</em>}{macro.macroLabel.length>0 && macro.macroLabel.slice(0,32)}{macro.macroLabel.length>32 && "..."}</td>
-													<td>{t(MACRO_TYPES.find((m) => m.value === macro.macroType).label)}</td>
-													<td>{macro.useMacroTriggerButton==1 ? "Button" : "Pin"}</td>
-													{macro.useMacroTriggerButton ==0 ? <td><em>---</em></td> :
-															<td>{`${BUTTON_MASKS.find((b) => b.value == macro.macroTriggerButton).label}`}</td>}
-													<td>{macro.macroInputs.length}</td>
-													<td>{macro.enabled==true ? <Badge bg="success">Enabled</Badge> : <Badge bg="danger">Disabled</Badge>}</td>
-												</tr>
-											))}
-												</tbody>
-											</Table>
-											</Col></Row>
-											<hr className="mt-3" />
-											<Row>
-												<Col>
-													<Form.Label>
-														<em>{t('InputMacroAddon:input-macro-sub-header')}</em>
-													</Form.Label>
-												</Col>
-											</Row>
-											<Row>
-												<Col sm={10}>
-												<Form.Check
-													label={t('InputMacroAddon:input-macro-board-led-enabled')}
-													type="switch"
-													id="InputMacroAddonBoardLed"
-													isInvalid={false}
-													checked={Boolean(values.macroBoardLedEnabled)}
-													onChange={(e) => {
-														handleCheckbox('macroBoardLedEnabled', values);
-														handleChange(e);
-													}}
-												/>
-												</Col>
-											</Row>
-											<hr className="mt-3" />
-											<Row>
-												<Col sm={10}>
-												<Button type="submit">{t('Common:button-save-label')}</Button>
-												{saveMessage ? (
-													<span className="alert">{saveMessage}</span>
-												) : null}
-												</Col>
-											</Row>
-										</Section>
+											<Section
+												title={t('InputMacroAddon:input-macro-header-text')}
+											>
+												<Row>
+													<Col>
+														<Table
+															striped
+															bordered
+															hover
+															className="text-center"
+														>
+															<thead>
+																<tr>
+																	<th>#</th>
+																	<th>Label</th>
+																	<th>Type</th>
+																	<th>Assigned To</th>
+																	<th>Button</th>
+																	<th>Actions</th>
+																	<th>Status</th>
+																</tr>
+															</thead>
+															<tbody>
+																{values.macroList.map((macro, i) => (
+																	<tr key={`macro-list-item-${i}`}>
+																		<td>{i + 1}</td>
+																		<td>
+																			{macro.macroLabel.length == 0 && (
+																				<em>None</em>
+																			)}
+																			{macro.macroLabel.length > 0 &&
+																				macro.macroLabel.slice(0, 32)}
+																			{macro.macroLabel.length > 32 && '...'}
+																		</td>
+																		<td>
+																			{t(
+																				MACRO_TYPES.find(
+																					(m) => m.value === macro.macroType,
+																				).label,
+																			)}
+																		</td>
+																		<td>
+																			{macro.useMacroTriggerButton == 1
+																				? 'Button'
+																				: 'Pin'}
+																		</td>
+																		{macro.useMacroTriggerButton == 0 ? (
+																			<td>
+																				<em>---</em>
+																			</td>
+																		) : (
+																			<td>{`${
+																				BUTTON_MASKS.find(
+																					(b) =>
+																						b.value == macro.macroTriggerButton,
+																				).label
+																			}`}</td>
+																		)}
+																		<td>{macro.macroInputs.length}</td>
+																		<td>
+																			{macro.enabled == true ? (
+																				<Badge bg="success">Enabled</Badge>
+																			) : (
+																				<Badge bg="danger">Disabled</Badge>
+																			)}
+																		</td>
+																	</tr>
+																))}
+															</tbody>
+														</Table>
+													</Col>
+												</Row>
+												<hr className="mt-3" />
+												<Row>
+													<Col>
+														<Form.Label>
+															<em>
+																{t('InputMacroAddon:input-macro-sub-header')}
+															</em>
+														</Form.Label>
+													</Col>
+												</Row>
+												<Row>
+													<Col sm={10}>
+														<Form.Check
+															label={t(
+																'InputMacroAddon:input-macro-board-led-enabled',
+															)}
+															type="switch"
+															id="InputMacroAddonBoardLed"
+															isInvalid={false}
+															checked={Boolean(values.macroBoardLedEnabled)}
+															onChange={(e) => {
+																handleCheckbox('macroBoardLedEnabled', values);
+																handleChange(e);
+															}}
+														/>
+													</Col>
+												</Row>
+												<hr className="mt-3" />
+												<Row>
+													<Col sm={10}>
+														<Button type="submit">
+															{t('Common:button-save-label')}
+														</Button>
+														{saveMessage ? (
+															<span className="alert">{saveMessage}</span>
+														) : null}
+													</Col>
+												</Row>
+											</Section>
 										</Tab.Pane>
 										{values.macroList.map((macro, i) => (
-											<Tab.Pane key={`macro-list-tab-pane-${i}`} eventKey={`macro-${i}`}>
-											<Section title={`Macro ${i+1}`}>
-												<MacroComponent
+											<Tab.Pane
+												key={`macro-list-tab-pane-${i}`}
+												eventKey={`macro-${i}`}
+											>
+												<Section title={`Macro ${i + 1}`}>
+													<MacroComponent
 														key={`macroList[${i}]`}
 														id={`macroList[${i}]`}
 														value={values.macroList?.at(i)}
@@ -618,21 +705,23 @@ export default function MacrosPage() {
 														macroList={values.macroList}
 													/>
 													<hr className="mt-3" />
-													<Button type="submit">{t('Common:button-save-label')}</Button>
+													<Button type="submit">
+														{t('Common:button-save-label')}
+													</Button>
 													{saveMessage ? (
 														<span className="alert">{saveMessage}</span>
 													) : null}
-											</Section>
+												</Section>
 											</Tab.Pane>
 										))}
 									</Tab.Content>
-									</Col></Row>
-							</Tab.Container>
-							<FormContext />
-						</Form>
-					</div>
-				)
-			}
+								</Col>
+							</Row>
+						</Tab.Container>
+						<FormContext />
+					</Form>
+				</div>
+			)}
 		</Formik>
 	);
 }
diff --git a/www/src/Pages/LEDConfigPage.jsx b/www/src/Pages/LEDConfigPage.jsx
index eaf2b3d8b..4cdd116bd 100644
--- a/www/src/Pages/LEDConfigPage.jsx
+++ b/www/src/Pages/LEDConfigPage.jsx
@@ -143,7 +143,7 @@ const schema = yup.object().shape({
 const createDataSource = (ledButtonMap, buttonLabelType, swapTpShareLabels) => {
 	let available = {};
 	let assigned = {};
-	
+
 	Object.keys(ledButtonMap).forEach((p) => {
 		if (ledButtonMap[p] === null) available[p] = ledButtonMap[p];
 		else assigned[p] = ledButtonMap[p];
@@ -155,7 +155,7 @@ const createDataSource = (ledButtonMap, buttonLabelType, swapTpShareLabels) => {
 	];
 
 	return dataSources;
-}
+};
 
 const getLedButtons = (buttonLabels, map, excludeNulls, swapTpShareLabels) => {
 	const current_buttons = getButtonLabels(buttonLabels, swapTpShareLabels);
@@ -199,7 +199,11 @@ const FormContext = ({
 	useEffect(() => {
 		async function fetchData() {
 			const data = await WebApi.getLedOptions(setLoading);
-			const dataSources = createDataSource(data.ledButtonMap, buttonLabelType, swapTpShareLabels);
+			const dataSources = createDataSource(
+				data.ledButtonMap,
+				buttonLabelType,
+				swapTpShareLabels,
+			);
 			setDataSources(dataSources);
 			setValues(data);
 		}
@@ -208,7 +212,11 @@ const FormContext = ({
 	}, []);
 
 	useEffect(() => {
-		const dataSources = createDataSource(ledButtonMap, buttonLabelType, swapTpShareLabels);
+		const dataSources = createDataSource(
+			ledButtonMap,
+			buttonLabelType,
+			swapTpShareLabels,
+		);
 		setDataSources(dataSources);
 	}, [buttonLabelType, swapTpShareLabels]);
 
@@ -236,7 +244,10 @@ export default function LEDConfigPage() {
 	const ledOrderChanged = (setFieldValue, ledOrderArrays, ledsPerButton) => {
 		if (ledOrderArrays.length === 2) {
 			setRgbLedStartIndex(ledOrderArrays[1].length * (ledsPerButton || 0));
-			setFieldValue('ledButtonMap', getLedMap(buttonLabelType, ledOrderArrays[1]));
+			setFieldValue(
+				'ledButtonMap',
+				getLedMap(buttonLabelType, ledOrderArrays[1]),
+			);
 			console.log(
 				'new start index: ',
 				ledOrderArrays[1].length * (ledsPerButton || 0),
@@ -264,11 +275,14 @@ export default function LEDConfigPage() {
 		};
 
 		const success = await WebApi.setLedOptions(data);
-		if (success)
-			updateUsedPins();
+		if (success) updateUsedPins();
 
 		// Need to recreate the DraggableList data source after save
-		const dataSources = createDataSource(data.ledButtonMap, buttonLabelType, swapTpShareLabels);
+		const dataSources = createDataSource(
+			data.ledButtonMap,
+			buttonLabelType,
+			swapTpShareLabels,
+		);
 		setDataSources(dataSources);
 
 		setSaveMessage(
@@ -298,10 +312,7 @@ export default function LEDConfigPage() {
 				errors,
 				setFieldValue,
 			}) => (
-				<Form
-					noValidate
-					onSubmit={(e) => onSubmit(e, handleSubmit)}
-				>
+				<Form noValidate onSubmit={(e) => onSubmit(e, handleSubmit)}>
 					<Section title={t('LedConfig:rgb.header-text')}>
 						<Row>
 							<FormControl
@@ -325,7 +336,9 @@ export default function LEDConfigPage() {
 								value={values.ledFormat}
 								error={errors.ledFormat}
 								isInvalid={errors.ledFormat}
-								onChange={(e) => setFieldValue('ledFormat', parseInt(e.target.value))}
+								onChange={(e) =>
+									setFieldValue('ledFormat', parseInt(e.target.value))
+								}
 							>
 								{LED_FORMATS.map((o, i) => (
 									<option key={`ledFormat-option-${i}`} value={o.value}>
@@ -341,7 +354,9 @@ export default function LEDConfigPage() {
 								value={values.ledLayout}
 								error={errors.ledLayout}
 								isInvalid={errors.ledLayout}
-								onChange={(e) => setFieldValue('ledLayout', parseInt(e.target.value))}
+								onChange={(e) =>
+									setFieldValue('ledLayout', parseInt(e.target.value))
+								}
 							>
 								{BUTTON_LAYOUTS.map((o, i) => (
 									<option key={`ledLayout-option-${i}`} value={o.value}>
@@ -420,7 +435,9 @@ export default function LEDConfigPage() {
 								t('LedConfig:rgb-order.assigned-header-text'),
 							]}
 							dataSources={dataSources}
-							onChange={(a) => ledOrderChanged(setFieldValue, a, values.ledsPerButton)}
+							onChange={(a) =>
+								ledOrderChanged(setFieldValue, a, values.ledsPerButton)
+							}
 						/>
 					</Section>
 					<Section title={t('LedConfig:player.header-text')}>
@@ -434,7 +451,9 @@ export default function LEDConfigPage() {
 									value={values.pledType}
 									error={errors.pledType}
 									isInvalid={errors.pledType}
-									onChange={(e) => setFieldValue('pledType', parseInt(e.target.value))}
+									onChange={(e) =>
+										setFieldValue('pledType', parseInt(e.target.value))
+									}
 								>
 									<option value="-1" defaultValue={true}>
 										{t('LedConfig:player.pled-type-off')}
@@ -456,7 +475,9 @@ export default function LEDConfigPage() {
 									value={values.pledPin1}
 									error={errors.pledPin1}
 									isInvalid={errors.pledPin1}
-									onChange={(e) => setFieldValue('pledPin1', parseInt(e.target.value))}
+									onChange={(e) =>
+										setFieldValue('pledPin1', parseInt(e.target.value))
+									}
 									min={0}
 								/>
 								<FormControl
@@ -469,7 +490,9 @@ export default function LEDConfigPage() {
 									value={values.pledPin2}
 									error={errors.pledPin2}
 									isInvalid={errors.pledPin2}
-									onChange={(e) => setFieldValue('pledPin2', parseInt(e.target.value))}
+									onChange={(e) =>
+										setFieldValue('pledPin2', parseInt(e.target.value))
+									}
 									min={0}
 								/>
 								<FormControl
@@ -482,7 +505,9 @@ export default function LEDConfigPage() {
 									value={values.pledPin3}
 									error={errors.pledPin3}
 									isInvalid={errors.pledPin3}
-									onChange={(e) => setFieldValue('pledPin3', parseInt(e.target.value))}
+									onChange={(e) =>
+										setFieldValue('pledPin3', parseInt(e.target.value))
+									}
 									min={0}
 								/>
 								<FormControl
@@ -495,7 +520,9 @@ export default function LEDConfigPage() {
 									value={values.pledPin4}
 									error={errors.pledPin4}
 									isInvalid={errors.pledPin4}
-									onChange={(e) => setFieldValue('pledPin4', parseInt(e.target.value))}
+									onChange={(e) =>
+										setFieldValue('pledPin4', parseInt(e.target.value))
+									}
 									min={0}
 								/>
 								<FormControl
@@ -508,7 +535,9 @@ export default function LEDConfigPage() {
 									value={values.pledIndex1}
 									error={errors.pledIndex1}
 									isInvalid={errors.pledIndex1}
-									onChange={(e) => setFieldValue('pledIndex1', parseInt(e.target.value))}
+									onChange={(e) =>
+										setFieldValue('pledIndex1', parseInt(e.target.value))
+									}
 									min={0}
 								/>
 								<FormControl
@@ -521,7 +550,9 @@ export default function LEDConfigPage() {
 									value={values.pledIndex2}
 									error={errors.pledIndex2}
 									isInvalid={errors.pledIndex2}
-									onChange={(e) => setFieldValue('pledIndex2', parseInt(e.target.value))}
+									onChange={(e) =>
+										setFieldValue('pledIndex2', parseInt(e.target.value))
+									}
 									min={0}
 								/>
 								<FormControl
@@ -534,7 +565,9 @@ export default function LEDConfigPage() {
 									value={values.pledIndex3}
 									error={errors.pledIndex3}
 									isInvalid={errors.pledIndex3}
-									onChange={(e) => setFieldValue('pledIndex3', parseInt(e.target.value))}
+									onChange={(e) =>
+										setFieldValue('pledIndex3', parseInt(e.target.value))
+									}
 									min={0}
 								/>
 								<FormControl
@@ -547,7 +580,9 @@ export default function LEDConfigPage() {
 									value={values.pledIndex4}
 									error={errors.pledIndex4}
 									isInvalid={errors.pledIndex4}
-									onChange={(e) => setFieldValue('pledIndex4', parseInt(e.target.value))}
+									onChange={(e) =>
+										setFieldValue('pledIndex4', parseInt(e.target.value))
+									}
 									min={0}
 								/>
 								<FormControl
diff --git a/www/src/Pages/PeripheralMappingPage.jsx b/www/src/Pages/PeripheralMappingPage.jsx
index 5e73b289d..bfbc14720 100644
--- a/www/src/Pages/PeripheralMappingPage.jsx
+++ b/www/src/Pages/PeripheralMappingPage.jsx
@@ -11,22 +11,38 @@ import WebApi, { basePeripheralMapping } from '../Services/WebApi';
 import { PERIPHERAL_DEVICES } from '../Data/Peripherals';
 import boards from '../Data/Boards.json';
 
-let peripheralFieldsSchema = {peripheral: yup.object().shape(Object.assign({}, ...PERIPHERAL_DEVICES.map((device) => {
-    let deviceProps = Object.assign({}, ...device.blocks.map((block) => {
-        return {
-            [block.label] : yup.object().shape(Object.assign(
-                { enabled: yup.boolean().label(`${block.label} Enabled`) },
-                //...Array.from(Object.keys(block.pins), (pin) => ({[pin]: yup.number().label(`${pin} Pin`).validatePinWhenValue(`peripheral.${block.label}.enabled`)}) ),
-                ...Array.from(Object.keys(block.pins), (pin) => ({[pin]: yup.number().label(`${pin} Pin`)}) ),
-                ...Array.from(Object.keys(device.options), (opt) => ({[opt]: yup.number().label('${block.label} ${opt} Setting')}) )
-            ))
-        };
-    }));
-    return deviceProps;
-})))};
+let peripheralFieldsSchema = {
+	peripheral: yup.object().shape(
+		Object.assign(
+			{},
+			...PERIPHERAL_DEVICES.map((device) => {
+				let deviceProps = Object.assign(
+					{},
+					...device.blocks.map((block) => {
+						return {
+							[block.label]: yup.object().shape(
+								Object.assign(
+									{ enabled: yup.boolean().label(`${block.label} Enabled`) },
+									//...Array.from(Object.keys(block.pins), (pin) => ({[pin]: yup.number().label(`${pin} Pin`).validatePinWhenValue(`peripheral.${block.label}.enabled`)}) ),
+									...Array.from(Object.keys(block.pins), (pin) => ({
+										[pin]: yup.number().label(`${pin} Pin`),
+									})),
+									...Array.from(Object.keys(device.options), (opt) => ({
+										[opt]: yup.number().label('${block.label} ${opt} Setting'),
+									})),
+								),
+							),
+						};
+					}),
+				);
+				return deviceProps;
+			}),
+		),
+	),
+};
 
 const schema = yup.object().shape({
-    ...peripheralFieldsSchema
+	...peripheralFieldsSchema,
 });
 
 const FormContext = () => {
@@ -43,26 +59,27 @@ const FormContext = () => {
 		fetchData();
 	}, [setValues]);
 
-	useEffect(() => {
-	}, [values, setValues]);
+	useEffect(() => {}, [values, setValues]);
 
 	return null;
 };
 
 export default function PeripheralMappingPage() {
-    const { setButtonLabels, usedPins } = useContext(AppContext);
-    const [saveMessage, setSaveMessage] = useState('');
+	const { setButtonLabels, usedPins } = useContext(AppContext);
+	const [saveMessage, setSaveMessage] = useState('');
 
-    let allPins = [...Array(boards[import.meta.env.VITE_GP2040_BOARD].maxPin+1).keys()];
-    const pinLookup = (pinList) => {
-        return ((pinList && pinList.length > 0) ? pinList : allPins);
-    };
+	let allPins = [
+		...Array(boards[import.meta.env.VITE_GP2040_BOARD].maxPin + 1).keys(),
+	];
+	const pinLookup = (pinList) => {
+		return pinList && pinList.length > 0 ? pinList : allPins;
+	};
 
 	const onSuccess = async (values) => {
-        const cleanValues = schema.cast(values);
-        console.dir(cleanValues);
+		const cleanValues = schema.cast(values);
+		console.dir(cleanValues);
 
-        const success = await WebApi.setPeripheralOptions(cleanValues);
+		const success = await WebApi.setPeripheralOptions(cleanValues);
 
 		setSaveMessage(
 			success
@@ -71,135 +88,227 @@ export default function PeripheralMappingPage() {
 		);
 	};
 
-    const generatePeripheralDetails = (header,peripheral) => {
-        return (
-            <div key={`details-${peripheral.value}-${peripheral.label}`}>
-                <div key={`details-${peripheral.value}-header`} className="mb-3">{header}</div>
-                {peripheral.pinTable && peripheral.blocks.map((block,i) => {
-                    let colCount = Math.max.apply(null, Object.keys(block.pins).map((pin) => block.pins[pin].length));
-                    return (
-                    <Table className="caption-top" striped="columns" responsive bordered hover variant="dark" size="sm">
-                        <caption>{block.label.toUpperCase()}</caption>
-                        <tbody>
-                            <tr>
-                                <th scope="row"></th>
-                                <th colSpan={colCount}>{t('PeripheralMapping:pins-label')}</th>
-                            </tr>
-                            {Object.keys(block.pins).map((pinName) => (
-                                <tr key={`block-info-${pinName}`}>
-                                    <th scope="row" className="col-2">{pinName.toUpperCase()}</th>
-                                    {block.pins[pinName].map((pin) => (
-                                        <td key={`block-info-${pinName}-${pin}`}>{pin}</td>
-                                    ))}
-                                    {block.pins[pinName].length < colCount ? <td></td> : ''}
-                                </tr>
-                            ))}
-                        </tbody>
-                    </Table>
-                    );
-                })}
-            </div>
-        );
-    };
+	const generatePeripheralDetails = (header, peripheral) => {
+		return (
+			<div key={`details-${peripheral.value}-${peripheral.label}`}>
+				<div key={`details-${peripheral.value}-header`} className="mb-3">
+					{header}
+				</div>
+				{peripheral.pinTable &&
+					peripheral.blocks.map((block, i) => {
+						let colCount = Math.max.apply(
+							null,
+							Object.keys(block.pins).map((pin) => block.pins[pin].length),
+						);
+						return (
+							<Table
+								className="caption-top"
+								striped="columns"
+								responsive
+								bordered
+								hover
+								variant="dark"
+								size="sm"
+							>
+								<caption>{block.label.toUpperCase()}</caption>
+								<tbody>
+									<tr>
+										<th scope="row"></th>
+										<th colSpan={colCount}>
+											{t('PeripheralMapping:pins-label')}
+										</th>
+									</tr>
+									{Object.keys(block.pins).map((pinName) => (
+										<tr key={`block-info-${pinName}`}>
+											<th scope="row" className="col-2">
+												{pinName.toUpperCase()}
+											</th>
+											{block.pins[pinName].map((pin) => (
+												<td key={`block-info-${pinName}-${pin}`}>{pin}</td>
+											))}
+											{block.pins[pinName].length < colCount ? <td></td> : ''}
+										</tr>
+									))}
+								</tbody>
+							</Table>
+						);
+					})}
+			</div>
+		);
+	};
 
 	const { t } = useTranslation('');
 
 	return (
-		<Formik onSubmit={onSuccess} validationSchema={schema} initialValues={basePeripheralMapping}>
+		<Formik
+			onSubmit={onSuccess}
+			validationSchema={schema}
+			initialValues={basePeripheralMapping}
+		>
 			{({ errors, handleSubmit, setFieldValue, values }) =>
 				console.log('errors', errors) || (
 					<div>
 						<Form noValidate onSubmit={handleSubmit}>
-                            <Section title={t('PeripheralMapping:header-text')}>
-                                <p>{t('PeripheralMapping:sub-header-text')}</p>
-                                {PERIPHERAL_DEVICES.map((peripheral,i) => (
-                                    <Form.Group key={`peripheral-${peripheral.value}`} className="row mb-3">
-                                        <Form.Label>
-                                            {t(`PeripheralMapping:${peripheral.label}-label`)}
-                                            <ContextualHelpOverlay title={t(`PeripheralMapping:${peripheral.label}-desc-header`)} body={generatePeripheralDetails(t(`PeripheralMapping:${peripheral.label}-description`),peripheral)}></ContextualHelpOverlay>
-                                        </Form.Label>
-                                        {peripheral.blocks.map((block,i) => (
-                                            <div key={`peripheral${peripheral.value}block${block.value}`} className="row mb-3">
-                                                <div className="col-sm-auto">
-                                                    <FormCheck
-                                                        key={`peripheral.${block.label}.enabled`}
-                                                        name={`peripheral.${block.label}.enabled`}
-                                                        label={`${block.label.toUpperCase()}`}
-                                                        id={`peripheral.${block.label}.enabled`}
-                                                        type="switch"
-                                                        reverse={true}
-                                                        isInvalid={false}
-                                                        className="form-select-sm"
-                                                        value={values.peripheral[`${block.label}`].enabled}
-                                                        checked={Boolean(values.peripheral[`${block.label}`].enabled)}
-                                                        onChange={(e) => {
-                                                            setFieldValue(`peripheral.${block.label}.enabled`, (e.target.checked?1:0));
-                                                        }}
-                                                    />
-                                                </div>
-                                                {Object.keys(block.pins).map((pin,i) => (
-                                                <div key={`${block.label}.${pin}`} className="col-sm-auto">
-                                                    <Form.Label>{t(`PeripheralMapping:pin-${pin.toLowerCase()}-label`)}</Form.Label>
-                                                    <FormSelect
-                                                        key={`peripheral.${block.label}.${pin}`}
-                                                        id={`peripheral.${block.label}.${pin}`}
-                                                        name={`peripheral.${block.label}.${pin}`}
-                                                        className="form-select-sm sm-1"
-                                                        disabled={!Boolean(values.peripheral[`${block.label}`].enabled)}
-                                                        error={getIn(errors,`peripheral.${block.label}.${pin}`)}
-                                                        value={values.peripheral[`${block.label}`][`${pin}`]}
-                                                        onChange={(e) => {
-                                                            setFieldValue(`peripheral.${block.label}.${pin}`, e.target.value);
-                                                        }}
-                                                    >
-                                                        <option key={`block-${block.label}-pin-unset`} value="-1">Unset</option>
-                                                        {pinLookup(block.pins[pin]).map((o, i2) => (
-                                                            <option
-                                                                key={`block-${block.label}-pin-${i2}`}
-                                                                value={o}
-                                                            >
-                                                                {!usedPins.includes(o) ? o : `${o} - ${t('PeripheralMapping:pin-in-use')}`}
-                                                            </option>
-                                                        ))}
-                                                    </FormSelect>
-                                                </div>
-                                                ))}
-                                                {Object.keys(peripheral.options).map((option,i) => (
-                                                <div key={`${block.label}.${option}`} className="col-sm-auto">
-                                                    <Form.Label>{t(`PeripheralMapping:option-${option.toLowerCase()}-label`)}</Form.Label>
-                                                    <FormSelect
-                                                        key={`peripheral.${block.label}.${option}`}
-                                                        id={`peripheral.${block.label}.${option}`}
-                                                        name={`peripheral.${block.label}.${option}`}
-                                                        className="form-select-sm sm-1"
-                                                        disabled={!Boolean(values.peripheral[`${block.label}`].enabled)}
-                                                        error={getIn(errors,`peripheral.${block.label}.${option}`)}
-                                                        value={values.peripheral[`${block.label}`][`${option}`]}
-                                                        onChange={(e) => {
-                                                            setFieldValue(`peripheral.${block.label}.${option}`, e.target.value);
-                                                        }}
-                                                    >
-                                                        {peripheral.options[option].map((o, i2) => (
-                                                            <option
-                                                                key={`block-${block.label}-option-${option}-${o.value}`}
-                                                                value={o.value}
-                                                            >
-                                                                {`${t(`PeripheralMapping:option-${option}-choice-${o.value}-label`)} - ${o.value}`}
-                                                            </option>
-                                                        ))}
-                                                    </FormSelect>
-                                                </div>
-                                                ))}
-                                            </div>
-                                        ))}
-                                    </Form.Group>
-                                ))}
-                            </Section>
+							<Section title={t('PeripheralMapping:header-text')}>
+								<p>{t('PeripheralMapping:sub-header-text')}</p>
+								{PERIPHERAL_DEVICES.map((peripheral, i) => (
+									<Form.Group
+										key={`peripheral-${peripheral.value}`}
+										className="row mb-3"
+									>
+										<Form.Label>
+											{t(`PeripheralMapping:${peripheral.label}-label`)}
+											<ContextualHelpOverlay
+												title={t(
+													`PeripheralMapping:${peripheral.label}-desc-header`,
+												)}
+												body={generatePeripheralDetails(
+													t(
+														`PeripheralMapping:${peripheral.label}-description`,
+													),
+													peripheral,
+												)}
+											></ContextualHelpOverlay>
+										</Form.Label>
+										{peripheral.blocks.map((block, i) => (
+											<div
+												key={`peripheral${peripheral.value}block${block.value}`}
+												className="row mb-3"
+											>
+												<div className="col-sm-auto">
+													<FormCheck
+														key={`peripheral.${block.label}.enabled`}
+														name={`peripheral.${block.label}.enabled`}
+														label={`${block.label.toUpperCase()}`}
+														id={`peripheral.${block.label}.enabled`}
+														type="switch"
+														reverse={true}
+														isInvalid={false}
+														className="form-select-sm"
+														value={values.peripheral[`${block.label}`].enabled}
+														checked={Boolean(
+															values.peripheral[`${block.label}`].enabled,
+														)}
+														onChange={(e) => {
+															setFieldValue(
+																`peripheral.${block.label}.enabled`,
+																e.target.checked ? 1 : 0,
+															);
+														}}
+													/>
+												</div>
+												{Object.keys(block.pins).map((pin, i) => (
+													<div
+														key={`${block.label}.${pin}`}
+														className="col-sm-auto"
+													>
+														<Form.Label>
+															{t(
+																`PeripheralMapping:pin-${pin.toLowerCase()}-label`,
+															)}
+														</Form.Label>
+														<FormSelect
+															key={`peripheral.${block.label}.${pin}`}
+															id={`peripheral.${block.label}.${pin}`}
+															name={`peripheral.${block.label}.${pin}`}
+															className="form-select-sm sm-1"
+															disabled={
+																!Boolean(
+																	values.peripheral[`${block.label}`].enabled,
+																)
+															}
+															error={getIn(
+																errors,
+																`peripheral.${block.label}.${pin}`,
+															)}
+															value={
+																values.peripheral[`${block.label}`][`${pin}`]
+															}
+															onChange={(e) => {
+																setFieldValue(
+																	`peripheral.${block.label}.${pin}`,
+																	e.target.value,
+																);
+															}}
+														>
+															<option
+																key={`block-${block.label}-pin-unset`}
+																value="-1"
+															>
+																Unset
+															</option>
+															{pinLookup(block.pins[pin]).map((o, i2) => (
+																<option
+																	key={`block-${block.label}-pin-${i2}`}
+																	value={o}
+																>
+																	{!usedPins.includes(o)
+																		? o
+																		: `${o} - ${t(
+																				'PeripheralMapping:pin-in-use',
+																		  )}`}
+																</option>
+															))}
+														</FormSelect>
+													</div>
+												))}
+												{Object.keys(peripheral.options).map((option, i) => (
+													<div
+														key={`${block.label}.${option}`}
+														className="col-sm-auto"
+													>
+														<Form.Label>
+															{t(
+																`PeripheralMapping:option-${option.toLowerCase()}-label`,
+															)}
+														</Form.Label>
+														<FormSelect
+															key={`peripheral.${block.label}.${option}`}
+															id={`peripheral.${block.label}.${option}`}
+															name={`peripheral.${block.label}.${option}`}
+															className="form-select-sm sm-1"
+															disabled={
+																!Boolean(
+																	values.peripheral[`${block.label}`].enabled,
+																)
+															}
+															error={getIn(
+																errors,
+																`peripheral.${block.label}.${option}`,
+															)}
+															value={
+																values.peripheral[`${block.label}`][`${option}`]
+															}
+															onChange={(e) => {
+																setFieldValue(
+																	`peripheral.${block.label}.${option}`,
+																	e.target.value,
+																);
+															}}
+														>
+															{peripheral.options[option].map((o, i2) => (
+																<option
+																	key={`block-${block.label}-option-${option}-${o.value}`}
+																	value={o.value}
+																>
+																	{`${t(
+																		`PeripheralMapping:option-${option}-choice-${o.value}-label`,
+																	)} - ${o.value}`}
+																</option>
+															))}
+														</FormSelect>
+													</div>
+												))}
+											</div>
+										))}
+									</Form.Group>
+								))}
+							</Section>
 							<Button type="submit">{t('Common:button-save-label')}</Button>
 							{saveMessage ? (
 								<span className="alert">{saveMessage}</span>
 							) : null}
-							<FormContext/>
+							<FormContext />
 						</Form>
 					</div>
 				)
diff --git a/www/src/Pages/SettingsPage.scss b/www/src/Pages/SettingsPage.scss
index ca9de4fa6..52501c92e 100644
--- a/www/src/Pages/SettingsPage.scss
+++ b/www/src/Pages/SettingsPage.scss
@@ -1,16 +1,16 @@
-[data-bs-theme=dark] {
-    optgroup {
-        background-color: var(--bs-secondary-bg);
-        color: var(--bs-secondary-text-emphasis);
-    }
-    option {
-        background-color: var(--bs-body-bg);
-        color: var(--bs-primary-text-emphasis);
+[data-bs-theme="dark"] {
+	optgroup {
+		background-color: var(--bs-secondary-bg);
+		color: var(--bs-secondary-text-emphasis);
+	}
+	option {
+		background-color: var(--bs-body-bg);
+		color: var(--bs-primary-text-emphasis);
 
-        &[disabled] {
-            font-style: italic;
-            background-color: var(--bs-tertiary-bg);
-            color: var(--bs-tertiary-color);
-        }
-    }
+		&[disabled] {
+			font-style: italic;
+			background-color: var(--bs-tertiary-bg);
+			color: var(--bs-tertiary-color);
+		}
+	}
 }
diff --git a/www/src/Services/Http.ts b/www/src/Services/Http.ts
index 2cd4d51f0..3aa9272e7 100644
--- a/www/src/Services/Http.ts
+++ b/www/src/Services/Http.ts
@@ -2,9 +2,9 @@
 // if more than simple GET and POST requests are required.
 
 type GetOptions = {
-	headers?: Record<string, string>,
-	signal?: AbortSignal
-}
+	headers?: Record<string, string>;
+	signal?: AbortSignal;
+};
 
 class Http {
 	async get(url: string, { headers = {}, signal }: GetOptions = {}) {
@@ -15,13 +15,12 @@ class Http {
 					'Content-Type': 'application/json',
 					...headers,
 				},
-				signal
+				signal,
 			});
 
 			const json = await response.json();
 			return Promise.resolve({ data: json });
-		}
-		catch (err) {
+		} catch (err) {
 			return Promise.reject(err);
 		}
 	}
@@ -39,8 +38,7 @@ class Http {
 
 			const json = await response.json();
 			return Promise.resolve({ data: json });
-		}
-		catch (err) {
+		} catch (err) {
 			return Promise.reject(err);
 		}
 	}
diff --git a/www/src/Services/WebApi.js b/www/src/Services/WebApi.js
index 4de2b8707..9494e1d09 100644
--- a/www/src/Services/WebApi.js
+++ b/www/src/Services/WebApi.js
@@ -182,8 +182,7 @@ export const baseWiiControls = {
 };
 
 async function resetSettings() {
-	return Http
-		.get(`${baseUrl}/api/resetSettings`)
+	return Http.get(`${baseUrl}/api/resetSettings`)
 		.then((response) => response.data)
 		.catch(console.error);
 }
@@ -229,8 +228,7 @@ async function setDisplayOptions(options, isPreview) {
 	const url = !isPreview
 		? `${baseUrl}/api/setDisplayOptions`
 		: `${baseUrl}/api/setPreviewDisplayOptions`;
-	return Http
-		.post(url, newOptions)
+	return Http.post(url, newOptions)
 		.then((response) => {
 			console.log(response.data);
 			return true;
@@ -251,12 +249,11 @@ async function getSplashImage() {
 }
 
 async function setSplashImage({ splashImage }) {
-	return Http
-		.post(`${baseUrl}/api/setSplashImage`, {
-			splashImage: btoa(
-				String.fromCharCode.apply(null, new Uint8Array(splashImage)),
-			),
-		})
+	return Http.post(`${baseUrl}/api/setSplashImage`, {
+		splashImage: btoa(
+			String.fromCharCode.apply(null, new Uint8Array(splashImage)),
+		),
+	})
 		.then((response) => {
 			return response.data;
 		})
@@ -277,8 +274,7 @@ async function getGamepadOptions(setLoading) {
 }
 
 async function setGamepadOptions(options) {
-	return Http
-		.post(`${baseUrl}/api/setGamepadOptions`, sanitizeRequest(options))
+	return Http.post(`${baseUrl}/api/setGamepadOptions`, sanitizeRequest(options))
 		.then((response) => {
 			console.log(response.data);
 			return true;
@@ -306,8 +302,7 @@ async function getLedOptions(setLoading) {
 }
 
 async function setLedOptions(options) {
-	return Http
-		.post(`${baseUrl}/api/setLedOptions`, sanitizeRequest(options))
+	return Http.post(`${baseUrl}/api/setLedOptions`, sanitizeRequest(options))
 		.then((response) => {
 			console.log(response.data);
 			return true;
@@ -356,8 +351,7 @@ async function setCustomTheme(customThemeOptions) {
 		};
 	});
 
-	return Http
-		.post(`${baseUrl}/api/setCustomTheme`, sanitizeRequest(options))
+	return Http.post(`${baseUrl}/api/setCustomTheme`, sanitizeRequest(options))
 		.then((response) => {
 			console.log(response.data);
 			return true;
@@ -438,8 +432,7 @@ async function setKeyMappings(mappings) {
 	let data = {};
 	Object.keys(mappings).map((button) => (data[button] = mappings[button].key));
 
-	return Http
-		.post(`${baseUrl}/api/setKeyMappings`, sanitizeRequest(data))
+	return Http.post(`${baseUrl}/api/setKeyMappings`, sanitizeRequest(data))
 		.then((response) => {
 			console.log(response.data);
 			return true;
@@ -480,8 +473,7 @@ async function setAddonsOptions(options) {
 		options.keyboardHostMap = data;
 	}
 
-	return Http
-		.post(`${baseUrl}/api/setAddonsOptions`, sanitizeRequest(options))
+	return Http.post(`${baseUrl}/api/setAddonsOptions`, sanitizeRequest(options))
 		.then((response) => {
 			console.log(response.data);
 			return true;
@@ -508,8 +500,10 @@ async function getMacroAddonOptions(setLoading) {
 }
 
 async function setMacroAddonOptions(options) {
-	return Http
-		.post(`${baseUrl}/api/setMacroAddonOptions`, sanitizeRequest(options))
+	return Http.post(
+		`${baseUrl}/api/setMacroAddonOptions`,
+		sanitizeRequest(options),
+	)
 		.then((response) => {
 			console.log(response.data);
 			return true;
@@ -521,8 +515,7 @@ async function setMacroAddonOptions(options) {
 }
 
 async function setPS4Options(options) {
-	return Http
-		.post(`${baseUrl}/api/setPS4Options`, options)
+	return Http.post(`${baseUrl}/api/setPS4Options`, options)
 		.then((response) => {
 			console.log(response.data);
 			return true;
@@ -551,8 +544,7 @@ async function getWiiControls(setLoading) {
 async function setWiiControls(mappings) {
 	console.dir(mappings);
 
-	return Http
-		.post(`${baseUrl}/api/setWiiControls`, sanitizeRequest(mappings))
+	return Http.post(`${baseUrl}/api/setWiiControls`, sanitizeRequest(mappings))
 		.then((response) => {
 			console.log(response.data);
 			return true;
@@ -580,8 +572,10 @@ async function getPeripheralOptions(setLoading) {
 async function setPeripheralOptions(mappings) {
 	console.dir(mappings);
 
-	return Http
-		.post(`${baseUrl}/api/setPeripheralOptions`, sanitizeRequest(mappings))
+	return Http.post(
+		`${baseUrl}/api/setPeripheralOptions`,
+		sanitizeRequest(mappings),
+	)
 		.then((response) => {
 			console.log(response.data);
 			return true;
@@ -668,8 +662,7 @@ async function abortGetHeldPins() {
 }
 
 async function reboot(bootMode) {
-	return Http
-		.post(`${baseUrl}/api/reboot`, { bootMode })
+	return Http.post(`${baseUrl}/api/reboot`, { bootMode })
 		.then((response) => response.data)
 		.catch(console.error);
 }
@@ -705,8 +698,8 @@ const WebApi = {
 	setWiiControls,
 	getPeripheralOptions,
 	setPeripheralOptions,
-    getExpansionPins,
-    setExpansionPins,
+	getExpansionPins,
+	setExpansionPins,
 	getButtonLayouts,
 	getButtonLayoutDefs,
 	getSplashImage,
diff --git a/www/src/Store/useExpansionPinStore.ts b/www/src/Store/useExpansionPinStore.ts
index 030fedb13..a9cee004b 100644
--- a/www/src/Store/useExpansionPinStore.ts
+++ b/www/src/Store/useExpansionPinStore.ts
@@ -4,42 +4,59 @@ import WebApi from '../Services/WebApi';
 import { PinActionValues, PinDirectionValues } from '../Data/Pins';
 
 type State = {
-    pins: {
-        [key: string]: [ { [key: string]: { option: PinActionValues, direction: PinDirectionValues } } ]
-    };
+	pins: {
+		[key: string]: [
+			{
+				[key: string]: {
+					option: PinActionValues;
+					direction: PinDirectionValues;
+				};
+			},
+		];
+	};
 	loadingPins: boolean;
 };
 
 type Actions = {
 	fetchPins: () => void;
-	setPinAction: (expansion: string, index: number, pin: string, action: PinActionValues) => void;
-    setPinDirection: (expansion: string, index: number, pin: string, dir: PinDirectionValues) => void;
+	setPinAction: (
+		expansion: string,
+		index: number,
+		pin: string,
+		action: PinActionValues,
+	) => void;
+	setPinDirection: (
+		expansion: string,
+		index: number,
+		pin: string,
+		dir: PinDirectionValues,
+	) => void;
 	savePins: () => Promise<object>;
 };
 
 const INITIAL_STATE: State = {
-    pins: {
-        pcf8575: [
-            {
-                pin00: { option: -10, direction: 0},
-                pin01: { option: -10, direction: 0},
-                pin02: { option: -10, direction: 0},
-                pin03: { option: -10, direction: 0},
-                pin04: { option: -10, direction: 0},
-                pin05: { option: -10, direction: 0},
-                pin06: { option: -10, direction: 0},
-                pin07: { option: -10, direction: 0},
-                pin08: { option: -10, direction: 0},
-                pin09: { option: -10, direction: 0},
-                pin10: { option: -10, direction: 0},
-                pin11: { option: -10, direction: 0},
-                pin12: { option: -10, direction: 0},
-                pin13: { option: -10, direction: 0},
-                pin14: { option: -10, direction: 0},
-                pin15: { option: -10, direction: 0},
-            }
-        ],
-    },
+	pins: {
+		pcf8575: [
+			{
+				pin00: { option: -10, direction: 0 },
+				pin01: { option: -10, direction: 0 },
+				pin02: { option: -10, direction: 0 },
+				pin03: { option: -10, direction: 0 },
+				pin04: { option: -10, direction: 0 },
+				pin05: { option: -10, direction: 0 },
+				pin06: { option: -10, direction: 0 },
+				pin07: { option: -10, direction: 0 },
+				pin08: { option: -10, direction: 0 },
+				pin09: { option: -10, direction: 0 },
+				pin10: { option: -10, direction: 0 },
+				pin11: { option: -10, direction: 0 },
+				pin12: { option: -10, direction: 0 },
+				pin13: { option: -10, direction: 0 },
+				pin14: { option: -10, direction: 0 },
+				pin15: { option: -10, direction: 0 },
+			},
+		],
+	},
 	loadingPins: false,
 };
 
@@ -50,50 +67,58 @@ const useExpansionPinStore = create<State & Actions>()((set, get) => ({
 		const pins = await WebApi.getExpansionPins();
 		set((state) => ({
 			...state,
-            ...pins,
+			...pins,
 			loadingPins: false,
 		}));
 	},
 	setPinAction: (expansion, index, pin, action) => {
-        set((state) => {
-            const newPins = { ...state.pins };
+		set((state) => {
+			const newPins = { ...state.pins };
 
-            if (newPins[expansion] && newPins[expansion][index] && newPins[expansion][index][pin]) {
-                newPins[expansion][index] = {
-                    ...newPins[expansion][index],
-                    [pin]: {
-                        ...newPins[expansion][index][pin],
-                        option: action,
-                    },
-                };
-            }
+			if (
+				newPins[expansion] &&
+				newPins[expansion][index] &&
+				newPins[expansion][index][pin]
+			) {
+				newPins[expansion][index] = {
+					...newPins[expansion][index],
+					[pin]: {
+						...newPins[expansion][index][pin],
+						option: action,
+					},
+				};
+			}
 
-            return ({
-                ...state,
-                pins: newPins,
-            });
-        });
-    },
+			return {
+				...state,
+				pins: newPins,
+			};
+		});
+	},
 	setPinDirection: (expansion, index, pin, dir) => {
-        set((state) => {
-            const newPins = { ...state.pins };
+		set((state) => {
+			const newPins = { ...state.pins };
 
-            if (newPins[expansion] && newPins[expansion][index] && newPins[expansion][index][pin]) {
-                newPins[expansion][index] = {
-                    ...newPins[expansion][index],
-                    [pin]: {
-                        ...newPins[expansion][index][pin],
-                        direction: dir,
-                    },
-                };
-            }
+			if (
+				newPins[expansion] &&
+				newPins[expansion][index] &&
+				newPins[expansion][index][pin]
+			) {
+				newPins[expansion][index] = {
+					...newPins[expansion][index],
+					[pin]: {
+						...newPins[expansion][index][pin],
+						direction: dir,
+					},
+				};
+			}
 
-            return ({
-                ...state,
-                pins: newPins,
-            });
-        });
-    },
+			return {
+				...state,
+				pins: newPins,
+			};
+		});
+	},
 	savePins: async () => WebApi.setExpansionPins(get()),
 }));