diff --git a/www/src/Data/Pins.ts b/www/src/Data/Pins.ts
index 94b7fa658..023aaa24a 100644
--- a/www/src/Data/Pins.ts
+++ b/www/src/Data/Pins.ts
@@ -45,14 +45,5 @@ export const BUTTON_ACTIONS = {
 	CUSTOM_BUTTON_COMBO: 40,
 } as const;
 
-// Hide from select options / Disable select if returned from board
-export const NON_SELECTABLE_BUTTON_ACTIONS = [
-	BUTTON_ACTIONS.RESERVED,
-	BUTTON_ACTIONS.ASSIGNED_TO_ADDON,
-	BUTTON_ACTIONS.BUTTON_PRESS_TURBO,
-	BUTTON_ACTIONS.BUTTON_PRESS_MACRO,
-	BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO,
-] as const;
-
 type PinActionKeys = keyof typeof BUTTON_ACTIONS;
 export type PinActionValues = (typeof BUTTON_ACTIONS)[PinActionKeys];
diff --git a/www/src/Pages/PinMapping.tsx b/www/src/Pages/PinMapping.tsx
index f82da1168..78b1caa51 100644
--- a/www/src/Pages/PinMapping.tsx
+++ b/www/src/Pages/PinMapping.tsx
@@ -1,19 +1,12 @@
-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, Col, Form, Nav, Row, 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, { MaskPayload, setPinType } from '../Store/usePinStore';
+import usePinStore, { MaskPayload } from '../Store/usePinStore';
 import useProfilesStore from '../Store/useProfilesStore';
 
 import Section from '../Components/Section';
@@ -21,24 +14,53 @@ import CustomSelect from '../Components/CustomSelect';
 import CaptureButton from '../Components/CaptureButton';
 
 import { BUTTON_MASKS, DPAD_MASKS, getButtonLabels } from '../Data/Buttons';
-import {
-	BUTTON_ACTIONS,
-	NON_SELECTABLE_BUTTON_ACTIONS,
-	PinActionValues,
-} from '../Data/Pins';
+import { BUTTON_ACTIONS, PinActionValues } from '../Data/Pins';
 import './PinMapping.scss';
+import { ActionMeta, MultiValue, SingleValue } from 'react-select';
 
-type PinCell = [string, MaskPayload];
-type PinRow = [PinCell, PinCell];
-type PinList = [PinRow];
+type OptionType = {
+	label: string;
+	value: PinActionValues;
+	type: string;
+	customButtonMask: number;
+	customDpadMask: number;
+};
+
+type PinSectionType = {
+	title: string;
+	pins: { [key: string]: MaskPayload | PinActionValues };
+	onChange: (
+		pin: string,
+	) =>
+		| ((
+				newValue: MultiValue<OptionType> | SingleValue<OptionType>,
+				actionMeta: ActionMeta<OptionType>,
+		  ) => void)
+		| undefined;
+	onSave: () => Promise<object>;
+	isMulti?: boolean;
+};
+
+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))
@@ -59,279 +81,202 @@ const options = Object.entries(BUTTON_ACTIONS)
 		};
 	});
 
-type PinsFormTypes = {
-	savePins: () => void;
-	pins: { [key: string]: MaskPayload };
-	setPin: setPinType;
-	onCopy?: () => void;
+const groupedOptions = [
+	{
+		label: 'Buttons',
+		options: options.filter(({ type }) => type !== 'action'),
+	},
+	{
+		label: 'Actions',
+		options: options.filter(({ type }) => type === 'action'),
+	},
+];
+
+const getMultiValue = (pinData: MaskPayload) => {
+	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 getSingleValue = (pinData: PinActionValues) => {
+	const actionKey = invert(BUTTON_ACTIONS)[pinData];
+	return { label: actionKey, value: pinData };
 };
 
-const PinsForm = ({ savePins, pins, setPin, onCopy }: PinsFormTypes) => {
+const PinSection = ({
+	title,
+	pins,
+	onChange,
+	onSave,
+	isMulti = true,
+}: PinSectionType) => {
 	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 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 savePins();
+			await onSave();
 			updateUsedPins();
 			setSaveMessage(t('Common:saved-success-message'));
 		} 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, pinData]: 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={
-						pinData.action === BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO
-							? options.filter(
-									({ type, customButtonMask, customDpadMask }) =>
-										(pinData.customButtonMask & customButtonMask &&
-											type === 'customButtonMask') ||
-										(pinData.customDpadMask & customDpadMask &&
-											type === 'customDpadMask'),
-							  )
-							: options.find((option) => option.value === pinData.action)
-					}
-					isDisabled={
-						isNonSelectable(pinData.action) &&
-						pinData.action !== BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO
-					}
-					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}`)
-						);
-					}}
-					// Show multi selection
-					isMulti={
-						pinData.action === BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO ||
-						options.find(({ value }) => value === pinData.action)?.type !==
-							'action'
-					}
-					onChange={(selected) => {
-						if (Array.isArray(selected) && selected.length) {
-							const actionOption = selected.find(
-								({ type }) => type === 'action',
-							);
-							// Replace current options to single option if choosing none mask type
-							if (actionOption) {
-								setPin(pin, {
-									action: actionOption.value,
-									customButtonMask: 0,
-									customDpadMask: 0,
-								});
-							} else {
-								setPin(
-									pin,
-									selected.reduce(
-										(masks, option) => ({
-											action: BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO,
-											customButtonMask:
-												option.type === 'customButtonMask'
-													? masks.customButtonMask ^ option.customButtonMask
-													: masks.customButtonMask,
-											customDpadMask:
-												option.type === 'customDpadMask'
-													? masks.customDpadMask ^ option.customDpadMask
-													: masks.customDpadMask,
-										}),
-										{ customButtonMask: 0, customDpadMask: 0 },
-									),
-								);
-							}
-						} else {
-							setPin(pin, {
-								action: selected?.value || BUTTON_ACTIONS.NONE,
-								customButtonMask: 0,
-								customDpadMask: 0,
-							});
-						}
-					}}
-				/>
-			</div>
-		),
-		[buttonNames],
-	);
+	}, []);
 
 	return (
-		<Form onSubmit={handleSubmit}>
-			<div className="d-flex">
-				<div className="py-3">
-					<CaptureButton
-						labels={Object.values(buttonNames)}
-						onChange={(label, pin) =>
-							setPin(
-								// Convert getHeldPins format to setPinMappings format
-								parseInt(pin) < 10 ? `pin0${pin}` : `pin${pin}`,
-								// Maps current mode buttons to actions
-								BUTTON_ACTIONS[
-									`BUTTON_PRESS_${invert(buttonNames)[label].toUpperCase()}`
-								],
-							)
-						}
-					/>
-				</div>
-				{onCopy && (
-					<div className="py-3 mx-3">
-						<Button variant="secondary" onClick={() => onCopy()}>
-							{t(`PinMapping:profile-copy-base`)}
-						</Button>
-					</div>
-				)}
+		<>
+			<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>
-			<div className="gx-3">
-				{pinList.map(([cell1, cell2], i) => (
-					<div key={`pin-row-${i}`} className="row">
-						{createCell(cell1)}
-						{createCell(cell2)}
+			<Section title={title}>
+				<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={isMulti && !isDisabled(pinData?.action)}
+									options={groupedOptions}
+									isDisabled={isDisabled(isMulti ? pinData?.action : pinData)}
+									getOptionLabel={getOptionLabel}
+									onChange={onChange(pin)}
+									value={
+										isMulti ? getMultiValue(pinData) : getSingleValue(pinData)
+									}
+								/>
+							</div>
+						))}
 					</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="my-4">
+						{t('Common:button-save-label')}
+					</Button>
+					{saveMessage && <Alert variant="info">{saveMessage}</Alert>}
+				</Form>
+			</Section>
+		</>
 	);
 };
-
-// export default function PinMappingPage() {
-// 	const { fetchPins, pins, savePins, setPin } = usePinStore();
-// 	const {
-// 		fetchProfiles,
-// 		profiles,
-// 		saveProfiles,
-// 		setProfileAction,
-// 		setProfile,
-// 	} = useProfilesStore();
-
-// 	const [pressedPin, setPressedPin] = useState<number | null>(null);
-
-// 	const { t } = useTranslation('');
-
-// 	useEffect(() => {
-// 		fetchPins();
-// 		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} setPin={setPin} />
-// 					</Tab>
-// 					{/* {profiles.map((profilePins, profileIndex) => (
-// 						<Tab
-// 							key={`Profile${profileIndex + 2}`}
-// 							eventKey={`Profile${profileIndex + 2}`}
-// 							title={`Profile ${profileIndex + 2}`}
-// 						>
-// 							<PinsForm
-// 								pins={profilePins}
-// 								savePins={saveAll}
-// 								setPin={(pin, action) => {
-// 									setProfileAction(profileIndex, pin, action);
-// 								}}
-// 								onCopy={() => {
-// 									setProfile(profileIndex, pins);
-// 								}}
-// 							/>
-// 						</Tab>
-// 					))} */}
-// 				</Tabs>
-// 			</Section>
-// 		</>
-// 	);
-// }
-
 export default function PinMapping() {
-	const { buttonLabels, updateUsedPins } = useContext(AppContext);
 	const { fetchPins, pins, savePins, setPin } = usePinStore();
+	const { fetchProfiles, profiles, saveProfiles, setProfileAction } =
+		useProfilesStore();
 	const [pressedPin, setPressedPin] = useState<number | null>(null);
 	const { t } = useTranslation('');
 
-	const { buttonLabelType, swapTpShareLabels } = buttonLabels;
-	const CURRENT_BUTTONS = getButtonLabels(buttonLabelType, swapTpShareLabels);
-	const buttonNames = omit(CURRENT_BUTTONS, ['label', 'value']);
-
 	useEffect(() => {
 		fetchPins();
+		fetchProfiles();
+		console.log('WTF');
 	}, []);
 
-	const isDisabled = useCallback(
-		(action: PinActionValues) =>
-			isNonSelectable(action) && action !== BUTTON_ACTIONS.CUSTOM_BUTTON_COMBO,
+	const onBaseChange = 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) => {
-			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 onProfileChange = useCallback(
+		(pin: string, profileIndex: number) =>
+			(selected: MultiValue<OptionType> | SingleValue<OptionType>) => {
+				setProfileAction(
+					profileIndex,
+					pin,
+					selected?.value === undefined ? BUTTON_ACTIONS.NONE : selected.value,
+				);
+			},
+		[],
 	);
 
 	return (
@@ -353,7 +298,7 @@ export default function PinMapping() {
 						</Nav.Item>
 					</Nav>
 					<hr />
-					{/* <p>{t('PinMapping:sub-header-text')}</p> */}
+					<p className="text-center">{t('PinMapping:sub-header-text')}</p>
 					<div className="d-flex justify-content-center">
 						<CaptureButton
 							buttonLabel={t('PinMapping:pin-viewer')}
@@ -370,31 +315,28 @@ export default function PinMapping() {
 				<Col sm={10}>
 					<Tab.Content>
 						<Tab.Pane eventKey="profile-1">
-							<Section title={t('PinMapping:header-text')}>
-								<div className="pin-grid gap-3">
-									{Object.entries(pins).map(([key, pinData], index) => (
-										<div
-											key={`select-${index}`}
-											className="d-flex col align-items-center"
-										>
-											<div className="d-flex " style={{ width: '4rem' }}>
-												<label htmlFor={key}>{key.toUpperCase()}</label>
-											</div>
-											<CustomSelect
-												isClearable
-												isMulti
-												options={options}
-												isDisabled={isDisabled(pinData.action)}
-												getOptionLabel={getOptionLabel}
-											/>
-										</div>
-									))}
-								</div>
-							</Section>
+							<PinSection
+								title={`Base(Profile 1) - Pin Mapping`}
+								pins={pins}
+								onChange={onBaseChange}
+								onSave={savePins}
+							/>
 						</Tab.Pane>
-						<Tab.Pane eventKey="profile-2">profile-2</Tab.Pane>
-						<Tab.Pane eventKey="profile-3">profile-3</Tab.Pane>
-						<Tab.Pane eventKey="profile-4">profile-4</Tab.Pane>
+
+						{profiles.map((profilePins, profileIndex) => (
+							<Tab.Pane
+								key={`profile-${profileIndex + 2}`}
+								eventKey={`profile-${profileIndex + 2}`}
+							>
+								<PinSection
+									title={`Profile ${profileIndex + 2} - Pin Mapping`}
+									pins={profilePins}
+									onChange={(pin) => onProfileChange(pin, profileIndex)}
+									onSave={saveProfiles}
+									isMulti={false}
+								/>
+							</Tab.Pane>
+						))}
 					</Tab.Content>
 				</Col>
 			</Row>