diff --git a/www/package-lock.json b/www/package-lock.json
index 566420bb5..46608c9fb 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -1219,10 +1219,11 @@
 			"dev": true
 		},
 		"node_modules/@types/lodash": {
-			"version": "4.17.1",
-			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.1.tgz",
-			"integrity": "sha512-X+2qazGS3jxLAIz5JDXDzglAF3KpijdhFxlf/V1+hEsOUc+HnWi81L/uv/EvGuV90WY+7mPGFCUDGfQC3Gj95Q==",
-			"dev": true
+			"version": "4.17.5",
+			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.5.tgz",
+			"integrity": "sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/@types/node": {
 			"version": "20.5.9",
diff --git a/www/server/app.js b/www/server/app.js
index 2da7b59f6..e15b278f4 100644
--- a/www/server/app.js
+++ b/www/server/app.js
@@ -253,6 +253,18 @@ app.get('/api/getCustomTheme', (req, res) => {
 	});
 });
 
+app.get('/api/getPinMappingsV2', (req, res) => {
+	return res.send(
+		Object.entries(picoController).reduce(
+			(acc, [key, value]) => ({
+				...acc,
+				[key]: { action: value, customButtonMask: 0, customDpadMask: 0 },
+			}),
+			{},
+		),
+	);
+});
+
 app.get('/api/getPinMappings', (req, res) => {
 	return res.send(picoController);
 });
diff --git a/www/src/Addons/Bootsel.tsx b/www/src/Addons/Bootsel.tsx
index 42d08aa33..1ff8a461d 100644
--- a/www/src/Addons/Bootsel.tsx
+++ b/www/src/Addons/Bootsel.tsx
@@ -5,7 +5,7 @@ import * as yup from 'yup';
 
 import Section from '../Components/Section';
 import FormSelect from '../Components/FormSelect';
-import { BUTTON_MASKS } from '../Data/Buttons';
+import { BUTTON_MASKS_OPTIONS } from '../Data/Buttons';
 
 export const bootselScheme = {
 	BootselButtonAddonEnabled: yup
@@ -15,7 +15,10 @@ export const bootselScheme = {
 	bootselButtonMap: yup
 		.number()
 		.label('BOOTSEL Button Map')
-		.validateSelectionWhenValue('BootselButtonAddonEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue(
+			'BootselButtonAddonEnabled',
+			BUTTON_MASKS_OPTIONS,
+		),
 };
 
 export const bootselState = {
@@ -42,7 +45,7 @@ const Bootsel = ({ values, errors, handleChange, handleCheckbox }) => {
 					isInvalid={errors.bootselButtonMap}
 					onChange={handleChange}
 				>
-					{BUTTON_MASKS.map((o, i) => (
+					{BUTTON_MASKS_OPTIONS.map((o, i) => (
 						<option key={`bootselButtonMap-option-${i}`} value={o.value}>
 							{o.label}
 						</option>
diff --git a/www/src/Addons/FocusMode.tsx b/www/src/Addons/FocusMode.tsx
index a8a40c428..ac444fb8e 100644
--- a/www/src/Addons/FocusMode.tsx
+++ b/www/src/Addons/FocusMode.tsx
@@ -7,7 +7,7 @@ import Section from '../Components/Section';
 
 import FormControl from '../Components/FormControl';
 import FormSelect from '../Components/FormSelect';
-import { BUTTON_MASKS } from '../Data/Buttons';
+import { BUTTON_MASKS_OPTIONS } from '../Data/Buttons';
 
 export const focusModeScheme = {
 	FocusModeAddonEnabled: yup
@@ -93,7 +93,7 @@ const FocusMode = ({
 						/>
 					</div>
 					<Row>
-						{BUTTON_MASKS.map((mask) =>
+						{BUTTON_MASKS_OPTIONS.map((mask) =>
 							values.focusModeButtonLockMask & mask.value ? (
 								<FormSelect
 									key={`focusModeButtonLockMask-${mask.label}`}
@@ -111,7 +111,7 @@ const FocusMode = ({
 										);
 									}}
 								>
-									{BUTTON_MASKS.map((o, i) => (
+									{BUTTON_MASKS_OPTIONS.map((o, i) => (
 										<option
 											key={`focusModeButtonLockMask-option-${i}`}
 											value={o.value}
@@ -138,7 +138,7 @@ const FocusMode = ({
 								);
 							}}
 						>
-							{BUTTON_MASKS.map((o, i) => (
+							{BUTTON_MASKS_OPTIONS.map((o, i) => (
 								<option
 									key={`focusModeButtonLockMask-option-${i}`}
 									value={o.value}
diff --git a/www/src/Addons/Turbo.tsx b/www/src/Addons/Turbo.tsx
index 29454b618..56dd8d51e 100644
--- a/www/src/Addons/Turbo.tsx
+++ b/www/src/Addons/Turbo.tsx
@@ -7,7 +7,7 @@ import Section from '../Components/Section';
 import FormSelect from '../Components/FormSelect';
 import FormControl from '../Components/FormControl';
 import AnalogPinOptions from '../Components/AnalogPinOptions';
-import { BUTTON_MASKS } from '../Data/Buttons';
+import { BUTTON_MASKS_OPTIONS } from '../Data/Buttons';
 import { DUAL_STICK_MODES } from '../Data/Addons';
 
 const SHMUP_MIXED_MODES = [
@@ -70,35 +70,35 @@ export const turboScheme = {
 	shmupAlwaysOn1: yup
 		.number()
 		.label('Turbo-Button 1 (Always On)')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupAlwaysOn2: yup
 		.number()
 		.label('Turbo-Button 2 (Always On)')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupAlwaysOn3: yup
 		.number()
 		.label('Turbo-Button 3 (Always On)')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupAlwaysOn4: yup
 		.number()
 		.label('Turbo-Button 4 (Always On)')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupBtnMask1: yup
 		.number()
 		.label('Charge Shot Button 1 Map')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupBtnMask2: yup
 		.number()
 		.label('Charge Shot Button 2 Map')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupBtnMask3: yup
 		.number()
 		.label('Charge Shot Button 3 Map')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupBtnMask4: yup
 		.number()
 		.label('Charge Shot Button 4 Map')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 };
 
 export const turboState = {
diff --git a/www/src/Addons/Wii.tsx b/www/src/Addons/Wii.tsx
index 4a9a9384f..0aed655a8 100644
--- a/www/src/Addons/Wii.tsx
+++ b/www/src/Addons/Wii.tsx
@@ -1,29 +1,17 @@
 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, Row, FormCheck, Tab, Tabs, FormLabel } from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
 import * as yup from 'yup';
 
 import Section from '../Components/Section';
 
-import FormControl from '../Components/FormControl';
 import FormSelect from '../Components/FormSelect';
-import { I2C_BLOCKS, PERIPHERAL_DEVICES } from '../Data/Peripherals';
-import { BUTTON_MASKS } from '../Data/Buttons';
+import { I2C_BLOCKS } from '../Data/Peripherals';
+import { BUTTON_MASKS_OPTIONS } from '../Data/Buttons';
 
-import WebApi, {
-	baseWiiControls,
-	basePeripheralMapping,
-} from '../Services/WebApi';
+import WebApi, { baseWiiControls } from '../Services/WebApi';
 
 export const wiiScheme = {
 	WiiExtensionAddonEnabled: yup
@@ -454,7 +442,7 @@ const Wii = ({
 													}))
 												}
 											>
-												{BUTTON_MASKS.map((o, i) => (
+												{BUTTON_MASKS_OPTIONS.map((o, i) => (
 													<option
 														key={`wiiExtensionController${controlObj.id}Button${buttonObj.id}-option-${i}`}
 														value={o.value}
diff --git a/www/src/Components/CaptureButton.tsx b/www/src/Components/CaptureButton.tsx
index d1c62ab2b..5828361ef 100644
--- a/www/src/Components/CaptureButton.tsx
+++ b/www/src/Components/CaptureButton.tsx
@@ -94,7 +94,7 @@ const CaptureButton = ({
 				</Modal.Body>
 				<Modal.Footer>
 					{hasNext && (
-						<Button variant="secondary" onClick={() => skipButton()}>
+						<Button onClick={() => skipButton()}>
 							{t('CaptureButton:capture-button-modal-skip')}
 						</Button>
 					)}
@@ -103,7 +103,7 @@ const CaptureButton = ({
 					</Button>
 				</Modal.Footer>
 			</Modal>
-			<Button variant="secondary" onClick={() => setTriggerCapture(true)}>
+			<Button onClick={() => setTriggerCapture(true)}>
 				{small
 					? '🎮'
 					: `${
diff --git a/www/src/Components/CustomSelect.scss b/www/src/Components/CustomSelect.scss
index 057ab7749..a58ff0bbc 100644
--- a/www/src/Components/CustomSelect.scss
+++ b/www/src/Components/CustomSelect.scss
@@ -31,6 +31,12 @@
 	.react-select__input-container {
 		color: inherit;
 	}
+	.react-select__multi-value {
+		background-color: var(--bs-secondary-bg);
+		.react-select__multi-value__label {
+			color: inherit;
+		}
+	}
 }
 
 .react-select__option {
diff --git a/www/src/Components/FormSelect.jsx b/www/src/Components/FormSelect.jsx
index 3ddee23c0..226a3256a 100644
--- a/www/src/Components/FormSelect.jsx
+++ b/www/src/Components/FormSelect.jsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import { Form } from 'react-bootstrap';
 
-const FormSelect = ({ label, error, groupClassName, ...props }) => {
+const FormSelect = ({
+	label = null,
+	error = null,
+	groupClassName = '',
+	...props
+}) => {
 	return (
 		<Form.Group className={groupClassName}>
 			{label && <Form.Label>{label}</Form.Label>}
diff --git a/www/src/Data/Buttons.js b/www/src/Data/Buttons.js
index 8e6ba0827..3b695a8c4 100644
--- a/www/src/Data/Buttons.js
+++ b/www/src/Data/Buttons.js
@@ -323,6 +323,12 @@ const KEYBOARD_LAYOUT = [
 	['R1', 'R2'],
 	['L1', 'L2'],
 ];
+export const DPAD_MASKS = [
+	{ label: 'Up', value: 1 << 0 },
+	{ label: 'Down', value: 1 << 1 },
+	{ label: 'Left', value: 1 << 2 },
+	{ label: 'Right', value: 1 << 3 },
+];
 
 export const BUTTON_LAYOUTS = [
     {
@@ -384,7 +390,6 @@ export const BUTTON_LAYOUTS = [
 ];
 
 export const BUTTON_MASKS = [
-	{ label: 'None', value: 0 },
 	{ label: 'B1', value: 1 << 0 },
 	{ label: 'B2', value: 1 << 1 },
 	{ label: 'B3', value: 1 << 2 },
@@ -399,6 +404,11 @@ export const BUTTON_MASKS = [
 	{ label: 'R3', value: 1 << 11 },
 	{ label: 'A1', value: 1 << 12 },
 	{ label: 'A2', value: 1 << 13 },
+];
+
+export const BUTTON_MASKS_OPTIONS = [
+	{ label: 'None', value: 0 },
+	...BUTTON_MASKS,
 	{ label: 'Up', value: 1 << 16 },
 	{ label: 'Down', value: 1 << 17 },
 	{ label: 'Left', value: 1 << 18 },
diff --git a/www/src/Data/Controllers.json b/www/src/Data/Controllers.json
index f45563443..3179300a3 100644
--- a/www/src/Data/Controllers.json
+++ b/www/src/Data/Controllers.json
@@ -29,6 +29,6 @@
 		"pin26": -10,
 		"pin27": -10,
 		"pin28": -10,
-		"pin29": -10
+		"pin29": -5
 	}
 }
diff --git a/www/src/Data/Pins.ts b/www/src/Data/Pins.ts
index 77ef0b49a..443c9fa42 100644
--- a/www/src/Data/Pins.ts
+++ b/www/src/Data/Pins.ts
@@ -1,6 +1,3 @@
-// Hide from select options / Disable select if returned from board
-export const NON_SELECTABLE_BUTTON_ACTIONS = [-5, 0];
-
 // These could theoretically be created from enums.proto
 export const BUTTON_ACTIONS = {
 	NONE: -10,
@@ -45,6 +42,7 @@ export const BUTTON_ACTIONS = {
 	BUTTON_PRESS_MACRO_4: 37,
 	BUTTON_PRESS_MACRO_5: 38,
 	BUTTON_PRESS_MACRO_6: 39,
+	CUSTOM_BUTTON_COMBO: 40,
 } as const;
 
 export const PIN_DIRECTIONS = {
diff --git a/www/src/Locales/en/Navigation.jsx b/www/src/Locales/en/Navigation.jsx
index db5011069..a7fb2f55b 100644
--- a/www/src/Locales/en/Navigation.jsx
+++ b/www/src/Locales/en/Navigation.jsx
@@ -12,6 +12,7 @@ export default {
 	'links-label': 'Links',
 	'macro-label': 'Macros Configuration',
 	'pin-mapping-label': 'Pin Mapping',
+	'multi-mapping-label': 'Multi Mapping',
 	'peripheral-mapping-label': 'Peripheral Mapping',
 	'profile-settings-label': 'Profile Settings',
 	'reboot-label': 'Reboot',
diff --git a/www/src/Locales/en/PinMapping.jsx b/www/src/Locales/en/PinMapping.jsx
index e9c3002f6..83dce6983 100644
--- a/www/src/Locales/en/PinMapping.jsx
+++ b/www/src/Locales/en/PinMapping.jsx
@@ -1,6 +1,6 @@
 export default {
 	'header-text': 'Pin Mapping',
-	'sub-header-text': `Here you can configure what pin has what action. If you're unsure what button is connect to what pin, try out the pin viewer.`,
+	'sub-header-text': `If you're unsure what button is connect to what pin, try out the pin viewer.`,
 	'alert-text':
 		"Mapping buttons to pins that aren't connected or available can leave the device in non-functional state. To clear the invalid configuration go to the <2>Reset Settings</2> page.",
 	'pin-viewer': 'Pin viewer',
@@ -59,5 +59,6 @@ export default {
 		BUTTON_PRESS_MACRO_4: 'Macro 4',
 		BUTTON_PRESS_MACRO_5: 'Macro 5',
 		BUTTON_PRESS_MACRO_6: 'Macro 6',
+		CUSTOM_BUTTON_COMBO: 'Assigned to multi mapping',
 	},
 };
diff --git a/www/src/Pages/InputMacroAddonPage.tsx b/www/src/Pages/InputMacroAddonPage.tsx
index 25709f8ce..494149107 100644
--- a/www/src/Pages/InputMacroAddonPage.tsx
+++ b/www/src/Pages/InputMacroAddonPage.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { AppContext } from '../Contexts/AppContext';
 import {
 	Badge,
@@ -19,7 +19,11 @@ import omit from 'lodash/omit';
 
 import Section from '../Components/Section';
 import WebApi from '../Services/WebApi';
-import { getButtonLabels, BUTTONS, BUTTON_MASKS } from '../Data/Buttons';
+import {
+	getButtonLabels,
+	BUTTONS,
+	BUTTON_MASKS_OPTIONS,
+} from '../Data/Buttons';
 
 const MACRO_TYPES = [
 	{ label: 'InputMacroAddon:input-macro-type.press', value: 1 },
@@ -181,7 +185,7 @@ const MacroInputComponent = (props) => {
 			</Col>
 			<Col sm={'auto'}>
 				<Row className="d-flex justify-content-center">
-					{BUTTON_MASKS.filter((mask) => buttonMask & mask.value).map(
+					{BUTTON_MASKS_OPTIONS.filter((mask) => buttonMask & mask.value).map(
 						(mask, i1) => (
 							<Col
 								key={`${key}.buttonMask[${i1}]`}
@@ -201,7 +205,7 @@ const MacroInputComponent = (props) => {
 									isInvalid={errors?.buttonMask}
 									translation={t}
 									buttonLabelType={buttonLabelType}
-									buttonMasks={BUTTON_MASKS}
+									buttonMasks={BUTTON_MASKS_OPTIONS}
 								/>
 							</Col>
 						),
@@ -218,7 +222,7 @@ const MacroInputComponent = (props) => {
 							isInvalid={errors?.buttonMask}
 							translation={t}
 							buttonLabelType={buttonLabelType}
-							buttonMasks={BUTTON_MASKS}
+							buttonMasks={BUTTON_MASKS_OPTIONS}
 						/>
 					</Col>
 				</Row>
@@ -433,7 +437,7 @@ const MacroComponent = (props) => {
 								}}
 								buttonLabelType={buttonLabelType}
 								translation={t}
-								buttonMasks={BUTTON_MASKS.filter(
+								buttonMasks={BUTTON_MASKS_OPTIONS.filter(
 									(b, i) =>
 										macroList.find(
 											(m, macroIdx) =>
@@ -621,7 +625,7 @@ export default function MacrosPage() {
 																			</td>
 																		) : (
 																			<td>{`${
-																				BUTTON_MASKS.find(
+																				BUTTON_MASKS_OPTIONS.find(
 																					(b) =>
 																						b.value == macro.macroTriggerButton,
 																				).label
diff --git a/www/src/Pages/PinMapping.scss b/www/src/Pages/PinMapping.scss
new file mode 100644
index 000000000..7de724164
--- /dev/null
+++ b/www/src/Pages/PinMapping.scss
@@ -0,0 +1,6 @@
+.pin-grid {
+	display: grid;
+	grid-auto-flow: column;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: repeat(15, auto);
+}
diff --git a/www/src/Pages/PinMapping.tsx b/www/src/Pages/PinMapping.tsx
index bf6d0114c..c4530b5d4 100644
--- a/www/src/Pages/PinMapping.tsx
+++ b/www/src/Pages/PinMapping.tsx
@@ -1,16 +1,9 @@
-import React, {
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { NavLink } from 'react-router-dom';
-import { Alert, Button, Form, Tab, Tabs } from 'react-bootstrap';
+import { Alert, Button, Col, Form, Nav, Row, Tab } from 'react-bootstrap';
 import { Trans, useTranslation } from 'react-i18next';
 import invert from 'lodash/invert';
 import omit from 'lodash/omit';
-import zip from 'lodash/zip';
 
 import { AppContext } from '../Contexts/AppContext';
 import usePinStore from '../Store/usePinStore';
@@ -20,49 +13,191 @@ import Section from '../Components/Section';
 import CustomSelect from '../Components/CustomSelect';
 import CaptureButton from '../Components/CaptureButton';
 
-import { getButtonLabels } from '../Data/Buttons';
-import {
-	BUTTON_ACTIONS,
-	NON_SELECTABLE_BUTTON_ACTIONS,
-	PinActionValues,
-} from '../Data/Pins';
+import { BUTTON_MASKS, DPAD_MASKS, getButtonLabels } from '../Data/Buttons';
+import { BUTTON_ACTIONS, PinActionValues } from '../Data/Pins';
+import './PinMapping.scss';
+import { MultiValue, SingleValue } from 'react-select';
 
-type PinCell = [string, PinActionValues];
-type PinRow = [PinCell, PinCell];
-type PinList = [PinRow];
+type OptionType = {
+	label: string;
+	value: PinActionValues;
+	type: string;
+	customButtonMask: number;
+	customDpadMask: number;
+};
+
+type ProfilePinSectionType = {
+	title: string;
+	profilePins: { [key: string]: PinActionValues };
+	profileIndex: number;
+};
+
+const disabledOptions = [
+	BUTTON_ACTIONS.RESERVED,
+	BUTTON_ACTIONS.ASSIGNED_TO_ADDON,
+	BUTTON_ACTIONS.BUTTON_PRESS_TURBO,
+	BUTTON_ACTIONS.BUTTON_PRESS_MACRO,
+];
+
+const getMask = (maskArr, key) =>
+	maskArr.find(
+		({ label }) => label?.toUpperCase() === key.split('BUTTON_PRESS_')?.pop(),
+	);
 
-const isNonSelectable = (value) =>
-	NON_SELECTABLE_BUTTON_ACTIONS.includes(value);
+const isNonSelectable = (action) =>
+	[
+		BUTTON_ACTIONS.NONE,
+		BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO,
+		...disabledOptions,
+	].includes(action);
+
+const isDisabled = (action) => disabledOptions.includes(action);
 
 const options = Object.entries(BUTTON_ACTIONS)
 	.filter(([, value]) => !isNonSelectable(value))
-	.map(([key, value]) => ({
-		label: key,
-		value,
-	}));
-
-const getOption = (actionId) => ({
-	label: invert(BUTTON_ACTIONS)[actionId],
-	value: actionId,
-});
-
-type PinsFormTypes = {
-	savePins: () => void;
-	pins: { [key: string]: PinActionValues };
-	setPinAction: (pin: string, action: PinActionValues) => void;
-	onCopy?: () => void;
+	.map(([key, value]) => {
+		const buttonMask = getMask(BUTTON_MASKS, key);
+		const dpadMask = getMask(DPAD_MASKS, key);
+
+		return {
+			label: key,
+			value,
+			type: buttonMask
+				? 'customButtonMask'
+				: dpadMask
+				? 'customDpadMask'
+				: 'action',
+			customButtonMask: buttonMask?.value || 0,
+			customDpadMask: dpadMask?.value || 0,
+		};
+	});
+
+const groupedOptions = [
+	{
+		label: 'Buttons',
+		options: options.filter(({ type }) => type !== 'action'),
+	},
+	{
+		label: 'Actions',
+		options: options.filter(({ type }) => type === 'action'),
+	},
+];
+
+const getMultiValue = (pinData) => {
+	if (pinData.action === BUTTON_ACTIONS.NONE) return;
+	if (isDisabled(pinData.action)) {
+		const actionKey = invert(BUTTON_ACTIONS)[pinData.action];
+		return [{ label: actionKey, ...pinData }];
+	}
+
+	return pinData.action === BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO
+		? options.filter(
+				({ type, customButtonMask, customDpadMask }) =>
+					(pinData.customButtonMask & customButtonMask &&
+						type === 'customButtonMask') ||
+					(pinData.customDpadMask & customDpadMask &&
+						type === 'customDpadMask'),
+		  )
+		: options.filter((option) => option.value === pinData.action);
 };
 
-const PinsForm = ({ savePins, pins, setPinAction, onCopy }: PinsFormTypes) => {
+const getSingleValue = (pinData) => {
+	const actionKey = invert(BUTTON_ACTIONS)[pinData];
+	return { label: actionKey, value: pinData };
+};
+
+const PinMappingWarning = () => {
+	const { t } = useTranslation('');
+	return (
+		<div className="alert alert-warning">
+			<Trans ns="PinMapping" i18nKey="alert-text">
+				Mapping buttons to pins that aren&apos;t connected or available can
+				leave the device in non-functional state. To clear the invalid
+				configuration go to the{' '}
+				<NavLink to="/reset-settings">Reset Settings</NavLink> page.
+			</Trans>
+			<br />
+			<br />
+			{t(`PinMapping:profile-pins-warning`)}
+		</div>
+	);
+};
+const BasePinSection = () => {
+	const { pins, savePins, setPin } = usePinStore();
 	const { buttonLabels, updateUsedPins } = useContext(AppContext);
+	const { t } = useTranslation('');
 	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 handleSubmit = async (e) => {
+	const onChange = useCallback(
+		(pin: string) =>
+			(selected: MultiValue<OptionType> | SingleValue<OptionType>) => {
+				// Handle clearing
+				if (!selected || (Array.isArray(selected) && !selected.length)) {
+					setPin(pin, {
+						action: BUTTON_ACTIONS.NONE,
+						customButtonMask: 0,
+						customDpadMask: 0,
+					});
+				} else if (Array.isArray(selected) && selected.length > 1) {
+					const lastSelected = selected[selected.length - 1];
+					// Revert to single option if choosing action type
+					if (lastSelected.type === 'action') {
+						setPin(pin, {
+							action: lastSelected.value,
+							customButtonMask: 0,
+							customDpadMask: 0,
+						});
+					} else {
+						setPin(
+							pin,
+							selected.reduce(
+								(masks, option) => ({
+									...masks,
+									customButtonMask:
+										option.type === 'customButtonMask'
+											? masks.customButtonMask ^ option.customButtonMask
+											: masks.customButtonMask,
+									customDpadMask:
+										option.type === 'customDpadMask'
+											? masks.customDpadMask ^ option.customDpadMask
+											: masks.customDpadMask,
+								}),
+								{
+									action: BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO,
+									customButtonMask: 0,
+									customDpadMask: 0,
+								},
+							),
+						);
+					}
+				} else {
+					setPin(pin, {
+						action: selected[0].value,
+						customButtonMask: 0,
+						customDpadMask: 0,
+					});
+				}
+			},
+		[],
+	);
+
+	const getOptionLabel = useCallback(
+		(option: OptionType) => {
+			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}`)
+			);
+		},
+		[buttonNames],
+	);
+
+	const handleSubmit = useCallback(async (e) => {
 		e.preventDefault();
 		e.stopPropagation();
 		try {
@@ -72,59 +207,144 @@ const PinsForm = ({ savePins, pins, setPinAction, onCopy }: PinsFormTypes) => {
 		} catch (error) {
 			setSaveMessage(t('Common:saved-error-message'));
 		}
-	};
-
-	const pinList = useMemo<PinList>(() => {
-		const pinArray = Object.entries(pins);
-		return zip(
-			pinArray.slice(0, pinArray.length / 2),
-			pinArray.slice(pinArray.length / 2, pinArray.length),
-		);
-	}, [pins]);
-
-	const createCell = useCallback(
-		([pin, pinAction]: PinCell) => (
-			<div className="d-flex col py-2">
-				<div className="d-flex align-items-center" style={{ width: '4rem' }}>
-					<label htmlFor={pin}>{pin.toUpperCase()}</label>
-				</div>
-				<CustomSelect
-					inputId={pin}
-					isClearable
-					isSearchable
-					options={options}
-					value={getOption(pinAction)}
-					isDisabled={isNonSelectable(pinAction)}
-					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(
-							pin,
-							change?.value === undefined ? -10 : change.value, // On clear set to -10
-						)
-					}
-				/>
-			</div>
-		),
+	}, []);
+
+	return (
+		<>
+			<PinMappingWarning />
+			<Section title={`Base(Profile 1) - Pin Mapping`}>
+				<Form onSubmit={handleSubmit}>
+					<div className="pin-grid gap-3">
+						{Object.entries(pins).map(([pin, pinData], index) => (
+							<div
+								key={`select-${index}`}
+								className="d-flex col align-items-center"
+							>
+								<div className="d-flex flex-shrink-0" style={{ width: '4rem' }}>
+									<label>{pin.toUpperCase()}</label>
+								</div>
+								<CustomSelect
+									isClearable
+									isMulti={!isDisabled(pinData.action)}
+									options={groupedOptions}
+									isDisabled={isDisabled(pinData.action)}
+									getOptionLabel={getOptionLabel}
+									onChange={onChange(pin)}
+									value={getMultiValue(pinData)}
+								/>
+							</div>
+						))}
+					</div>
+					<CaptureButton
+						labels={Object.values(buttonNames)}
+						onChange={(label, pin) =>
+							setPin(
+								// Convert getHeldPins format to setPinMappings format
+								pin < 10 ? `pin0${pin}` : `pin${pin}`,
+								{
+									// Maps current mode buttons to actions
+									action:
+										BUTTON_ACTIONS[
+											`BUTTON_PRESS_${invert(buttonNames)[label].toUpperCase()}`
+										],
+									customButtonMask: 0,
+									customDpadMask: 0,
+								},
+							)
+						}
+					/>
+					<Button type="submit" className="m-4">
+						{t('Common:button-save-label')}
+					</Button>
+					{saveMessage && <Alert variant="info">{saveMessage}</Alert>}
+				</Form>
+			</Section>
+		</>
+	);
+};
+
+const ProfilePinSection = ({
+	title,
+	profilePins,
+	profileIndex,
+}: ProfilePinSectionType) => {
+	const { saveProfiles, setProfileAction } = useProfilesStore();
+	const { buttonLabels, updateUsedPins } = useContext(AppContext);
+	const { t } = useTranslation('');
+	const [saveMessage, setSaveMessage] = useState('');
+
+	const { buttonLabelType, swapTpShareLabels } = buttonLabels;
+	const CURRENT_BUTTONS = getButtonLabels(buttonLabelType, swapTpShareLabels);
+	const buttonNames = omit(CURRENT_BUTTONS, ['label', 'value']);
+
+	const onChange = useCallback(
+		(pin: string, profileIndex: number) =>
+			(selected: SingleValue<OptionType>) => {
+				setProfileAction(
+					profileIndex,
+					pin,
+					selected?.value === undefined ? BUTTON_ACTIONS.NONE : selected.value,
+				);
+			},
+		[],
+	);
+
+	const getOptionLabel = useCallback(
+		(option: OptionType) => {
+			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}`)
+			);
+		},
 		[buttonNames],
 	);
 
+	const handleSubmit = useCallback(async (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		try {
+			await saveProfiles();
+			updateUsedPins();
+			setSaveMessage(t('Common:saved-success-message'));
+		} catch (error) {
+			setSaveMessage(t('Common:saved-error-message'));
+		}
+	}, []);
+
 	return (
-		<Form onSubmit={handleSubmit}>
-			<div className="d-flex">
-				<div className="py-3">
+		<>
+			<PinMappingWarning />
+			<Section title={title}>
+				<Form onSubmit={handleSubmit}>
+					<div className="pin-grid gap-3">
+						{Object.entries(profilePins).map(([pin, pinData], index) => (
+							<div
+								key={`select-${index}`}
+								className="d-flex col align-items-center"
+							>
+								<div className="d-flex flex-shrink-0" style={{ width: '4rem' }}>
+									<label>{pin.toUpperCase()}</label>
+								</div>
+								<CustomSelect
+									isClearable
+									options={groupedOptions}
+									isDisabled={isDisabled(pinData)}
+									getOptionLabel={getOptionLabel}
+									onChange={onChange(pin, profileIndex)}
+									value={getSingleValue(pinData)}
+								/>
+							</div>
+						))}
+					</div>
 					<CaptureButton
 						labels={Object.values(buttonNames)}
 						onChange={(label, pin) =>
-							setPinAction(
+							setProfileAction(
+								profileIndex,
 								// Convert getHeldPins format to setPinMappings format
-								parseInt(pin) < 10 ? `pin0${pin}` : `pin${pin}`,
+								pin < 10 ? `pin0${pin}` : `pin${pin}`,
 								// Maps current mode buttons to actions
 								BUTTON_ACTIONS[
 									`BUTTON_PRESS_${invert(buttonNames)[label].toUpperCase()}`
@@ -132,43 +352,20 @@ const PinsForm = ({ savePins, pins, setPinAction, onCopy }: PinsFormTypes) => {
 							)
 						}
 					/>
-				</div>
-				{onCopy && (
-					<div className="py-3 mx-3">
-						<Button variant="secondary" onClick={() => onCopy()}>
-							{t(`PinMapping:profile-copy-base`)}
-						</Button>
-					</div>
-				)}
-			</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="submit" className="my-4">
-				{t('Common:button-save-label')}
-			</Button>
-			{saveMessage && <Alert variant="secondary">{saveMessage}</Alert>}
-		</Form>
+					<Button type="submit" className="m-4">
+						{t('Common:button-save-label')}
+					</Button>
+					{saveMessage && <Alert variant="info">{saveMessage}</Alert>}
+				</Form>
+			</Section>
+		</>
 	);
 };
 
-export default function PinMappingPage() {
-	const { fetchPins, pins, savePins, setPinAction } = usePinStore();
-	const {
-		fetchProfiles,
-		profiles,
-		saveProfiles,
-		setProfileAction,
-		setProfile,
-	} = useProfilesStore();
-
+export default function PinMapping() {
+	const { fetchPins } = usePinStore();
+	const { fetchProfiles, profiles } = useProfilesStore();
 	const [pressedPin, setPressedPin] = useState<number | null>(null);
-
 	const { t } = useTranslation('');
 
 	useEffect(() => {
@@ -176,67 +373,60 @@ export default function PinMappingPage() {
 		fetchProfiles();
 	}, []);
 
-	const saveAll = useCallback(() => {
-		savePins();
-		saveProfiles();
-	}, [savePins, saveProfiles]);
-
 	return (
-		<>
-			<div className="alert alert-warning">
-				<Trans ns="PinMapping" i18nKey="alert-text">
-					Mapping buttons to pins that aren&apos;t connected or available can
-					leave the device in non-functional state. To clear the invalid
-					configuration go to the{' '}
-					<NavLink to="/reset-settings">Reset Settings</NavLink> page.
-				</Trans>
-				<br />
-				<br />
-				{t(`PinMapping:profile-pins-warning`)}
-			</div>
-			<Section title={t('PinMapping:header-text')}>
-				<p>{t('PinMapping:sub-header-text')}</p>
-				<div className="mb-3">
-					<CaptureButton
-						buttonLabel={t('PinMapping:pin-viewer')}
-						labels={['']}
-						onChange={(_, pin) => setPressedPin(pin)}
-					/>
-				</div>
-				{pressedPin !== null && (
-					<div className="alert alert-info">
-						<strong>{t('PinMapping:pin-pressed', { pressedPin })}</strong>
-					</div>
-				)}
-
-				<Tabs id="profiles">
-					<Tab eventKey="Base" title="Base(Profile 1)">
-						<PinsForm
-							pins={pins}
-							savePins={saveAll}
-							setPinAction={setPinAction}
+		<Tab.Container defaultActiveKey="profile-1">
+			<Row>
+				<Col sm={2}>
+					<Nav variant="pills" className="flex-column">
+						<Nav.Item>
+							<Nav.Link eventKey="profile-1">Base(Profile 1)</Nav.Link>
+						</Nav.Item>
+						<Nav.Item>
+							<Nav.Link eventKey="profile-2">Profile 2</Nav.Link>
+						</Nav.Item>
+						<Nav.Item>
+							<Nav.Link eventKey="profile-3">Profile 3</Nav.Link>
+						</Nav.Item>
+						<Nav.Item>
+							<Nav.Link eventKey="profile-4">Profile 4</Nav.Link>
+						</Nav.Item>
+					</Nav>
+					<hr />
+					<p className="text-center">{t('PinMapping:sub-header-text')}</p>
+					<div className="d-flex justify-content-center">
+						<CaptureButton
+							buttonLabel={t('PinMapping:pin-viewer')}
+							labels={['']}
+							onChange={(_, pin) => setPressedPin(pin)}
 						/>
-					</Tab>
-					{profiles.map((profilePins, profileIndex) => (
-						<Tab
-							key={`Profile${profileIndex + 2}`}
-							eventKey={`Profile${profileIndex + 2}`}
-							title={`Profile ${profileIndex + 2}`}
-						>
-							<PinsForm
-								pins={profilePins}
-								savePins={saveAll}
-								setPinAction={(pin, action) => {
-									setProfileAction(profileIndex, pin, action);
-								}}
-								onCopy={() => {
-									setProfile(profileIndex, pins);
-								}}
-							/>
-						</Tab>
-					))}
-				</Tabs>
-			</Section>
-		</>
+					</div>
+					{pressedPin !== null && (
+						<div className="alert alert-info mt-3">
+							<strong>{t('PinMapping:pin-pressed', { pressedPin })}</strong>
+						</div>
+					)}
+				</Col>
+				<Col sm={10}>
+					<Tab.Content>
+						<Tab.Pane eventKey="profile-1">
+							<BasePinSection />
+						</Tab.Pane>
+
+						{profiles.map((profilePins, profileIndex) => (
+							<Tab.Pane
+								key={`profile-${profileIndex + 2}`}
+								eventKey={`profile-${profileIndex + 2}`}
+							>
+								<ProfilePinSection
+									title={`Profile ${profileIndex + 2} - Pin Mapping`}
+									profilePins={profilePins}
+									profileIndex={profileIndex}
+								/>
+							</Tab.Pane>
+						))}
+					</Tab.Content>
+				</Col>
+			</Row>
+		</Tab.Container>
 	);
 }
diff --git a/www/src/Pages/SettingsPage.jsx b/www/src/Pages/SettingsPage.jsx
index 04fcb66d4..7819da86d 100644
--- a/www/src/Pages/SettingsPage.jsx
+++ b/www/src/Pages/SettingsPage.jsx
@@ -11,7 +11,7 @@ import { AppContext } from '../Contexts/AppContext';
 import KeyboardMapper, { validateMappings } from '../Components/KeyboardMapper';
 import Section from '../Components/Section';
 import WebApi, { baseButtonMappings } from '../Services/WebApi';
-import { BUTTON_MASKS, getButtonLabels } from '../Data/Buttons';
+import { BUTTON_MASKS_OPTIONS, getButtonLabels } from '../Data/Buttons';
 
 import './SettingsPage.scss';
 
@@ -1350,7 +1350,7 @@ export default function SettingsPage() {
 																	</Form.Control.Feedback>
 																</Col>
 																<Col sm="auto">+</Col>
-																{BUTTON_MASKS.map((mask) =>
+																{BUTTON_MASKS_OPTIONS.map((mask) =>
 																	values[o] &&
 																	values[o]?.buttonsMask & mask.value ? (
 																		<>
@@ -1377,7 +1377,7 @@ export default function SettingsPage() {
 																						);
 																					}}
 																				>
-																					{BUTTON_MASKS.map((o, i2) => (
+																					{BUTTON_MASKS_OPTIONS.map((o, i2) => (
 																						<option
 																							key={`hotkey-${i}-button${i2}`}
 																							value={o.value}
@@ -1408,7 +1408,7 @@ export default function SettingsPage() {
 																			);
 																		}}
 																	>
-																		{BUTTON_MASKS.map((o, i2) => (
+																		{BUTTON_MASKS_OPTIONS.map((o, i2) => (
 																			<option
 																				key={`hotkey-${i}-buttonZero-${i2}`}
 																				value={o.value}
diff --git a/www/src/Services/WebApi.js b/www/src/Services/WebApi.js
index 9494e1d09..ec1de1625 100644
--- a/www/src/Services/WebApi.js
+++ b/www/src/Services/WebApi.js
@@ -361,6 +361,18 @@ async function setCustomTheme(customThemeOptions) {
 			return false;
 		});
 }
+async function getPinMappingsV2() {
+	try {
+		const { data } = await Http.get(`${baseUrl}/api/getPinMappingsV2`);
+		return data;
+	} catch (error) {
+		console.log(error);
+	}
+}
+
+async function setPinMappingsV2(mappings) {
+	return Http.post(`${baseUrl}/api/setPinMappingsV2`, mappings);
+}
 
 async function getButtonLayouts(setLoading) {
 	try {
@@ -673,7 +685,7 @@ function sanitizeRequest(request) {
 	return newRequest;
 }
 
-const WebApi = {
+export default {
 	resetSettings,
 	getDisplayOptions,
 	setDisplayOptions,
@@ -710,6 +722,6 @@ const WebApi = {
 	getHeldPins,
 	abortGetHeldPins,
 	reboot,
+	getPinMappingsV2,
+	setPinMappingsV2,
 };
-
-export default WebApi;
diff --git a/www/src/Store/usePinStore.ts b/www/src/Store/usePinStore.ts
index cb00940b8..fe50223a7 100644
--- a/www/src/Store/usePinStore.ts
+++ b/www/src/Store/usePinStore.ts
@@ -1,51 +1,70 @@
 import { create } from 'zustand';
 
 import WebApi from '../Services/WebApi';
-import { PinActionValues } from '../Data/Pins';
+import { BUTTON_ACTIONS, PinActionValues } from '../Data/Pins';
+
+type CustomMasks = {
+	customButtonMask: number;
+	customDpadMask: number;
+};
+
+export type MaskPayload = {
+	action: PinActionValues;
+} & CustomMasks;
 
 type State = {
-	pins: { [key: string]: PinActionValues };
+	pins: { [key: string]: MaskPayload };
 	loadingPins: boolean;
 };
+export type setPinType = (
+	pin: string,
+	{ action, customButtonMask, customDpadMask }: MaskPayload,
+) => void;
 
 type Actions = {
 	fetchPins: () => void;
-	setPinAction: (pin: string, action: PinActionValues) => void;
+	setPin: setPinType;
 	savePins: () => Promise<object>;
 };
 
+const DEFAULT_PIN_STATE = {
+	action: BUTTON_ACTIONS.NONE,
+	customButtonMask: 0,
+	customDpadMask: 0,
+};
+
 const INITIAL_STATE: State = {
 	pins: {
-		pin00: -10,
-		pin01: -10,
-		pin02: -10,
-		pin03: -10,
-		pin04: -10,
-		pin05: -10,
-		pin06: -10,
-		pin07: -10,
-		pin08: -10,
-		pin09: -10,
-		pin10: -10,
-		pin11: -10,
-		pin12: -10,
-		pin13: -10,
-		pin14: -10,
-		pin15: -10,
-		pin16: -10,
-		pin17: -10,
-		pin18: -10,
-		pin19: -10,
-		pin20: -10,
-		pin21: -10,
-		pin22: -10,
-		pin23: -10,
-		pin24: -10,
-		pin25: -10,
-		pin26: -10,
-		pin27: -10,
-		pin28: -10,
-		pin29: -10,
+		pin00: DEFAULT_PIN_STATE,
+		pin01: DEFAULT_PIN_STATE,
+		pin02: DEFAULT_PIN_STATE,
+		pin03: DEFAULT_PIN_STATE,
+		pin04: DEFAULT_PIN_STATE,
+		pin05: DEFAULT_PIN_STATE,
+		pin06: DEFAULT_PIN_STATE,
+		pin07: DEFAULT_PIN_STATE,
+		pin08: DEFAULT_PIN_STATE,
+		pin09: DEFAULT_PIN_STATE,
+		pin10: DEFAULT_PIN_STATE,
+		pin11: DEFAULT_PIN_STATE,
+		pin12: DEFAULT_PIN_STATE,
+		pin13: DEFAULT_PIN_STATE,
+		pin14: DEFAULT_PIN_STATE,
+		pin15: DEFAULT_PIN_STATE,
+		pin16: DEFAULT_PIN_STATE,
+		pin17: DEFAULT_PIN_STATE,
+		pin18: DEFAULT_PIN_STATE,
+		pin19: DEFAULT_PIN_STATE,
+		pin20: DEFAULT_PIN_STATE,
+		pin21: DEFAULT_PIN_STATE,
+		pin22: DEFAULT_PIN_STATE,
+		pin23: DEFAULT_PIN_STATE,
+		pin24: DEFAULT_PIN_STATE,
+		pin25: DEFAULT_PIN_STATE,
+		pin26: DEFAULT_PIN_STATE,
+		pin27: DEFAULT_PIN_STATE,
+		pin28: DEFAULT_PIN_STATE,
+		pin29: DEFAULT_PIN_STATE,
 	},
 	loadingPins: false,
 };
@@ -54,19 +73,27 @@ const usePinStore = create<State & Actions>()((set, get) => ({
 	...INITIAL_STATE,
 	fetchPins: async () => {
 		set({ loadingPins: true });
-		const pins = await WebApi.getPinMappings();
+		const pins = await WebApi.getPinMappingsV2();
 		set((state) => ({
 			...state,
-			pins: { ...state.pins, ...pins }, // Merge saved pins with defaults
+			pins,
 			loadingPins: false,
 		}));
 	},
-	setPinAction: (pin, action) =>
+
+	setPin: (pin, { action, customButtonMask = 0, customDpadMask = 0 }) =>
 		set((state) => ({
 			...state,
-			pins: { ...state.pins, [pin]: action },
+			pins: {
+				...state.pins,
+				[pin]: {
+					action,
+					customButtonMask,
+					customDpadMask,
+				},
+			},
 		})),
-	savePins: async () => WebApi.setPinMappings(get().pins),
+	savePins: async () => WebApi.setPinMappingsV2(get().pins),
 }));
 
 export default usePinStore;
diff --git a/www/src/index.scss b/www/src/index.scss
index 9742f1edb..f2c86d8d9 100644
--- a/www/src/index.scss
+++ b/www/src/index.scss
@@ -1,6 +1,7 @@
 // Override default variables before the import
 $primary: #495057;
 $danger: #7b2d26;
+$enable-cssgrid: true;
 
 @import "~bootstrap/scss/bootstrap";