diff --git a/www/public/images/logo.png b/www/public/images/logo.png
index a4e48ada2..ddff6d10c 100644
Binary files a/www/public/images/logo.png and b/www/public/images/logo.png differ
diff --git a/www/src/Components/Navigation.jsx b/www/src/Components/Navigation.jsx
index 136c94835..b4fdebcb2 100644
--- a/www/src/Components/Navigation.jsx
+++ b/www/src/Components/Navigation.jsx
@@ -50,23 +50,19 @@ const Navigation = () => {
 	let eventKey = 0;
 
 	return (
-		<Navbar
-			collapseOnSelect
-			bg="primary"
-			variant="dark"
-			expand="md"
-			fixed="top"
-		>
-			<Navbar.Brand href="/" title={`GP2040-CE ${t('Navigation:home-label')}`}>
-				<img
-					src="images/logo.png"
-					className="title-logo"
-					alt="GP2040-CE logo"
-				/>{' '}
+		<Navbar collapseOnSelect expand="md" fixed="top">
+			<Navbar.Brand title={`GP2040-CE ${t('Navigation:home-label')}`}>
+				<Nav.Link as={NavLink} to="/" eventKey={eventKey++}>
+					<img
+						src="images/logo.png"
+						className="title-logo"
+						alt="GP2040-CE logo"
+					/>
+				</Nav.Link>
 			</Navbar.Brand>
 			<Navbar.Toggle aria-controls="responsive-navbar-nav" />
 			<Navbar.Collapse id="basic-navbar-nav">
-				<Nav className="me-auto">
+				<Nav className="me-auto nav-menu">
 					<Nav.Link as={NavLink} to="/settings" eventKey={eventKey++}>
 						{t('Navigation:settings-label')}
 					</Nav.Link>
diff --git a/www/src/Components/Navigation.scss b/www/src/Components/Navigation.scss
index 82ac53ea5..12c843fcf 100644
--- a/www/src/Components/Navigation.scss
+++ b/www/src/Components/Navigation.scss
@@ -6,6 +6,8 @@ $nav-outer-margin: 0.75rem;
 
 nav.navbar {
 	padding: 0;
+	background-color: white;
+	box-shadow: 0 1px 2px 0 #0000001a;
 
 	.navbar-brand {
 		margin-right: $nav-outer-margin;
@@ -30,17 +32,17 @@ nav.navbar {
 		color: #ff0000;
 	}
 }
+[data-bs-theme="dark"] {
+	nav.navbar {
+		background-color: #242526;
+	}
+}
 
 .title-logo {
 	height: 40px;
 	margin: 0.25rem 0rem 0.25rem $nav-outer-margin;
 }
 
-.nav-link,
-.nav-item * {
-	font-size: 0.875rem;
-}
-
 @media (max-width: 767.98px) {
 	nav.navbar {
 		.navbar-actions {
@@ -51,5 +53,14 @@ nav.navbar {
 		.nav-link {
 			margin-left: $nav-outer-margin;
 		}
+		.nav-menu {
+			.dropdown-menu {
+				background-color: transparent;
+				border: none;
+				.dropdown-item {
+					padding-left: 1.5rem;
+				}
+			}
+		}
 	}
 }
diff --git a/www/src/Pages/InputMacroAddonPage.tsx b/www/src/Pages/InputMacroAddonPage.tsx
index 4e37858d1..285f0ec31 100644
--- a/www/src/Pages/InputMacroAddonPage.tsx
+++ b/www/src/Pages/InputMacroAddonPage.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { AppContext } from '../Contexts/AppContext';
 import {
 	Badge,
 	Button,
@@ -7,17 +6,16 @@ import {
 	Form,
 	InputGroup,
 	Nav,
-	OverlayTrigger,
 	Row,
 	Tab,
 	Table,
-	Tooltip,
 } from 'react-bootstrap';
 import { Formik, useFormikContext } from 'formik';
 import * as yup from 'yup';
 import { Trans, useTranslation } from 'react-i18next';
 import omit from 'lodash/omit';
 
+import { AppContext } from '../Contexts/AppContext';
 import Section from '../Components/Section';
 import WebApi from '../Services/WebApi';
 import {
@@ -83,11 +81,8 @@ const defaultValues = {
 const ONE_FRAME_US = 16666;
 
 const FormContext = () => {
-	const { values, setValues } = useFormikContext();
-	const { buttonLabels, setLoading } = useContext(AppContext);
-	const { buttonLabelType, swapTpShareLabels } = buttonLabels;
-
-	const CURRENT_BUTTONS = getButtonLabels(buttonLabelType, swapTpShareLabels);
+	const { setValues } = useFormikContext();
+	const { setLoading } = useContext(AppContext);
 
 	useEffect(() => {
 		async function fetchData() {
@@ -132,8 +127,6 @@ const ButtonMasksComponent = (props) => {
 	);
 };
 
-const tooltip = <Tooltip id="tooltip">Double click to delete.</Tooltip>;
-
 const MacroInputComponent = (props) => {
 	const {
 		value: { duration, buttonMask, waitDuration },
@@ -147,8 +140,8 @@ const MacroInputComponent = (props) => {
 	} = props;
 
 	return (
-		<Row className="align-content-start align-items-center row-gap-2 pb-2">
-			<Col xs="auto" style={{ width: 180 }}>
+		<Row className="align-content-start align-items-center row-gap-2 gx-2 pb-2">
+			<Col xs="auto" style={{ width: 150 }}>
 				<InputGroup size="sm">
 					<Form.Control
 						className="text-center"
@@ -244,19 +237,9 @@ const MacroInputComponent = (props) => {
 				</InputGroup>
 			</Col>
 			<Col xs="auto">
-				<OverlayTrigger
-					placement="right"
-					overlay={tooltip}
-					delay={{ show: 500, hide: 100 }}
-				>
-					<Button
-						variant="transparent"
-						size="sm"
-						onDoubleClick={deleteMacroInput}
-					>
-						💥
-					</Button>
-				</OverlayTrigger>
+				<Button size="sm" onClick={deleteMacroInput}>
+					{'✕'}
+				</Button>
 			</Col>
 		</Row>
 	);
@@ -437,22 +420,20 @@ const MacroComponent = (props) => {
 					/>
 				</Col>
 			</Row>
-			<Row>
-				{macroInputs.map((macroInput, a) => (
-					<MacroInputComponent
-						key={`${key}.macroInputs[${a}]`}
-						id={`${key}.macroInputs[${a}]`}
-						value={macroInput}
-						errors={errors?.macroInputs?.at(a)}
-						showFrames={showFrames}
-						translation={t}
-						buttonLabelType={buttonLabelType}
-						deleteMacroInput={() => deleteMacroInput(a)}
-						handleChange={handleChange}
-						setFieldValue={setFieldValue}
-					/>
-				))}
-			</Row>
+			{macroInputs.map((macroInput, a) => (
+				<MacroInputComponent
+					key={`${key}.macroInputs[${a}]`}
+					id={`${key}.macroInputs[${a}]`}
+					value={macroInput}
+					errors={errors?.macroInputs?.at(a)}
+					showFrames={showFrames}
+					translation={t}
+					buttonLabelType={buttonLabelType}
+					deleteMacroInput={() => deleteMacroInput(a)}
+					handleChange={handleChange}
+					setFieldValue={setFieldValue}
+				/>
+			))}
 			<Row>
 				<Col sm={3}>
 					{macroInputs.length < MACRO_INPUTS_MAX ? (
diff --git a/www/src/Pages/SettingsPage.jsx b/www/src/Pages/SettingsPage.jsx
index 10af51245..ee15bc565 100644
--- a/www/src/Pages/SettingsPage.jsx
+++ b/www/src/Pages/SettingsPage.jsx
@@ -698,7 +698,12 @@ export default function SettingsPage() {
 		);
 	};
 
-	const keyboardModeSpecifics = (values, errors, setFieldValue, handleChange) => {
+	const keyboardModeSpecifics = (
+		values,
+		errors,
+		setFieldValue,
+		handleChange,
+	) => {
 		return (
 			<div>
 				<Row className="mb-3">
@@ -723,7 +728,13 @@ export default function SettingsPage() {
 		);
 	};
 
-	const ps4ModeSpecifics = (values, errors, setFieldValue, handleChange, inputMode) => {
+	const ps4ModeSpecifics = (
+		values,
+		errors,
+		setFieldValue,
+		handleChange,
+		inputMode,
+	) => {
 		return (
 			<div className="row mb-3">
 				<Row className="mb-3">
@@ -738,10 +749,7 @@ export default function SettingsPage() {
 							isInvalid={false}
 							checked={Boolean(values.switchTpShareForDs4)}
 							onChange={(e) => {
-								setFieldValue(
-									'switchTpShareForDs4',
-									e.target.checked ? 1 : 0,
-								);
+								setFieldValue('switchTpShareForDs4', e.target.checked ? 1 : 0);
 							}}
 						/>
 					</Col>
@@ -883,7 +891,13 @@ export default function SettingsPage() {
 		);
 	};
 
-	const ps5ModeSpecifics = (values, errors, setFieldValue, handleChange, inputMode) => {
+	const ps5ModeSpecifics = (
+		values,
+		errors,
+		setFieldValue,
+		handleChange,
+		inputMode,
+	) => {
 		return (
 			<div className="row mb-3">
 				<Row className="mb-3">
@@ -898,10 +912,7 @@ export default function SettingsPage() {
 							isInvalid={false}
 							checked={Boolean(values.switchTpShareForDs4)}
 							onChange={(e) => {
-								setFieldValue(
-									'switchTpShareForDs4',
-									e.target.checked ? 1 : 0,
-								);
+								setFieldValue('switchTpShareForDs4', e.target.checked ? 1 : 0);
 							}}
 						/>
 					</Col>
@@ -981,118 +992,137 @@ export default function SettingsPage() {
 							isInvalid={false}
 							checked={Boolean(values.usbDescOverride)}
 							onChange={(e) => {
-								setFieldValue(
-									'usbDescOverride',
-									e.target.checked ? 1 : 0,
-								);
+								setFieldValue('usbDescOverride', e.target.checked ? 1 : 0);
 							}}
 						/>
 					</Col>
 				</Row>
-				{ values.usbDescOverride === 1 && (
+				{values.usbDescOverride === 1 && (
 					<>
-					<Row className="mb-4 mt-4">
-						<Col>
-							<span className="alert alert-danger">{t('SettingsPage:usb-override.invalid-warning-danger')}</span>
-						</Col>
-					</Row>
-					<Row className="mb-3">
-						<Col sm={4}>
-							<Form.Label>{t('SettingsPage:usb-override.product-name')}</Form.Label>
-							<Form.Control
-								size="sm"
-								type="text"
-								placeholder={'test'}
-								name="usbDescProduct"
-								value={values.usbDescProduct}
-								error={errors?.usbDescProduct}
-								isInvalid={errors?.usbDescProduct}
-								onChange={handleChange}
-								maxLength={32}
-							/>
-						</Col>
-						<Col sm={4}>
-							<Form.Label>{t('SettingsPage:usb-override.manufacturer')}</Form.Label>
-							<Form.Control
-								size="sm"
-								type="text"
-								name="usbDescManufacturer"
-								value={values.usbDescManufacturer}
-								error={errors?.usbDescManufacturer}
-								isInvalid={errors?.usbDescManufacturer}
-								onChange={handleChange}
-								maxLength={32}
-							/>
-						</Col>
-						<Col sm={2}>
-							<Form.Label>{t('SettingsPage:usb-override.version')}</Form.Label>
-							<Form.Control
-								size="sm"
-								type="text"
-								name="usbDescVersion"
-								value={values.usbDescVersion}
-								error={errors?.usbDescVersion}
-								isInvalid={errors?.usbDescVersion}
-								onChange={handleChange}
-								maxLength={8}
-							/>
-						</Col>
-					</Row>
-					<Row className="mb-3">
-						<Col sm={6}>
-							<Form.Check
-								label={t('SettingsPage:usb-override.physical-warning-danger')}
-								type="switch"
-								id="usbOverrideID"
-								isInvalid={false}
-								checked={Boolean(values.usbOverrideID)}
-								onChange={(e) => {
-									setFieldValue(
-										'usbOverrideID',
-										e.target.checked ? 1 : 0,
-									);
-								}}
-							/>
-						</Col>
-					</Row>
-					<Row className="mb-3" hidden={values.usbOverrideID !== 1}>
-						<Col sm={2}>
-							<Form.Label>{t('SettingsPage:usb-override.vendor-id')}</Form.Label>
-							<Form.Control
-								size="sm"
-								type="text"
-								name="usbVendorID"
-								value={values.usbVendorID}
-								error={errors.usbVendorID}
-								isInvalid={errors?.usbVendorID}
-								onChange={handleChange}
-								onBlur={(e)=>{e.target.value = e.target.value.padStart(4,'0'); return handleChange(e)}}
-								minLength={4}
-								maxLength={4}
-							/>
-						</Col>
-						<Col sm={2}>
-							<Form.Label>{t('SettingsPage:usb-override.product-id')}</Form.Label>
-							<Form.Control
-								size="sm"
-								type="text"
-								name="usbProductID"
-								value={values.usbProductID}
-								error={errors?.usbProductID}
-								isInvalid={errors?.usbProductID}
-								onChange={handleChange}
-								onBlur={(e)=>{e.target.value = e.target.value.padStart(4,'0'); return handleChange(e)}}
-								minLength={4}
-								maxLength={4}
-							/>
-						</Col>
-					</Row>
-					</>)}
+						<Row className="mb-4 mt-4">
+							<Col>
+								<span className="alert alert-danger">
+									{t('SettingsPage:usb-override.invalid-warning-danger')}
+								</span>
+							</Col>
+						</Row>
+						<Row className="mb-3">
+							<Col sm={4}>
+								<Form.Label>
+									{t('SettingsPage:usb-override.product-name')}
+								</Form.Label>
+								<Form.Control
+									size="sm"
+									type="text"
+									placeholder={'test'}
+									name="usbDescProduct"
+									value={values.usbDescProduct}
+									error={errors?.usbDescProduct}
+									isInvalid={errors?.usbDescProduct}
+									onChange={handleChange}
+									maxLength={32}
+								/>
+							</Col>
+							<Col sm={4}>
+								<Form.Label>
+									{t('SettingsPage:usb-override.manufacturer')}
+								</Form.Label>
+								<Form.Control
+									size="sm"
+									type="text"
+									name="usbDescManufacturer"
+									value={values.usbDescManufacturer}
+									error={errors?.usbDescManufacturer}
+									isInvalid={errors?.usbDescManufacturer}
+									onChange={handleChange}
+									maxLength={32}
+								/>
+							</Col>
+							<Col sm={2}>
+								<Form.Label>
+									{t('SettingsPage:usb-override.version')}
+								</Form.Label>
+								<Form.Control
+									size="sm"
+									type="text"
+									name="usbDescVersion"
+									value={values.usbDescVersion}
+									error={errors?.usbDescVersion}
+									isInvalid={errors?.usbDescVersion}
+									onChange={handleChange}
+									maxLength={8}
+								/>
+							</Col>
+						</Row>
+						<Row className="mb-3">
+							<Col sm={6}>
+								<Form.Check
+									label={t('SettingsPage:usb-override.physical-warning-danger')}
+									type="switch"
+									id="usbOverrideID"
+									isInvalid={false}
+									checked={Boolean(values.usbOverrideID)}
+									onChange={(e) => {
+										setFieldValue('usbOverrideID', e.target.checked ? 1 : 0);
+									}}
+								/>
+							</Col>
+						</Row>
+						<Row className="mb-3" hidden={values.usbOverrideID !== 1}>
+							<Col sm={2}>
+								<Form.Label>
+									{t('SettingsPage:usb-override.vendor-id')}
+								</Form.Label>
+								<Form.Control
+									size="sm"
+									type="text"
+									name="usbVendorID"
+									value={values.usbVendorID}
+									error={errors.usbVendorID}
+									isInvalid={errors?.usbVendorID}
+									onChange={handleChange}
+									onBlur={(e) => {
+										e.target.value = e.target.value.padStart(4, '0');
+										return handleChange(e);
+									}}
+									minLength={4}
+									maxLength={4}
+								/>
+							</Col>
+							<Col sm={2}>
+								<Form.Label>
+									{t('SettingsPage:usb-override.product-id')}
+								</Form.Label>
+								<Form.Control
+									size="sm"
+									type="text"
+									name="usbProductID"
+									value={values.usbProductID}
+									error={errors?.usbProductID}
+									isInvalid={errors?.usbProductID}
+									onChange={handleChange}
+									onBlur={(e) => {
+										e.target.value = e.target.value.padStart(4, '0');
+										return handleChange(e);
+									}}
+									minLength={4}
+									maxLength={4}
+								/>
+							</Col>
+						</Row>
+					</>
+				)}
 			</div>
 		);
 	};
 
-	const xinputModeSpecifics = (values, errors, setFieldValue, handleChange, inputMode) => {
+	const xinputModeSpecifics = (
+		values,
+		errors,
+		setFieldValue,
+		handleChange,
+		inputMode,
+	) => {
 		return (
 			<div className="row mb-3">
 				{generateAuthSelection(
@@ -1112,7 +1142,7 @@ export default function SettingsPage() {
 						/>
 					</Col>
 				</Row>
-				{ usbOverride(values, errors, setFieldValue, handleChange) }
+				{usbOverride(values, errors, setFieldValue, handleChange)}
 			</div>
 		);
 	};
@@ -1133,10 +1163,16 @@ export default function SettingsPage() {
 		);
 	};
 
-	const genericHidModeSpecifics = (values, errors, setFieldValue, handleChange, inputMode) => {
+	const genericHidModeSpecifics = (
+		values,
+		errors,
+		setFieldValue,
+		handleChange,
+		inputMode,
+	) => {
 		return (
 			<div className="row mb-3">
-				{ usbOverride(values, errors, setFieldValue, handleChange) }
+				{usbOverride(values, errors, setFieldValue, handleChange)}
 			</div>
 		);
 	};
@@ -1150,15 +1186,43 @@ export default function SettingsPage() {
 		const inputMode = INPUT_MODES.find((o) => o.value == values.inputMode);
 		switch (inputMode.labelKey) {
 			case 'input-mode-options.keyboard':
-				return keyboardModeSpecifics(values, errors, setFieldValue, handleChange);
+				return keyboardModeSpecifics(
+					values,
+					errors,
+					setFieldValue,
+					handleChange,
+				);
 			case 'input-mode-options.ps4':
-				return ps4ModeSpecifics(values, errors, setFieldValue, handleChange, inputMode);
+				return ps4ModeSpecifics(
+					values,
+					errors,
+					setFieldValue,
+					handleChange,
+					inputMode,
+				);
 			case 'input-mode-options.ps5':
-				return ps5ModeSpecifics(values, errors, setFieldValue, handleChange, inputMode);
+				return ps5ModeSpecifics(
+					values,
+					errors,
+					setFieldValue,
+					handleChange,
+					inputMode,
+				);
 			case 'input-mode-options.generic':
-				return genericHidModeSpecifics(values, errors, setFieldValue, handleChange);
+				return genericHidModeSpecifics(
+					values,
+					errors,
+					setFieldValue,
+					handleChange,
+				);
 			case 'input-mode-options.xinput':
-				return xinputModeSpecifics(values, errors, setFieldValue, handleChange, inputMode);
+				return xinputModeSpecifics(
+					values,
+					errors,
+					setFieldValue,
+					handleChange,
+					inputMode,
+				);
 			case 'input-mode-options.xbone':
 				return xboneModeSpecifics(values, errors, setFieldValue, handleChange);
 			default:
@@ -1210,8 +1274,8 @@ export default function SettingsPage() {
 		const data = {
 			...values,
 			usbProductID: hexToInt(values.usbProductID || '0000'),
-			usbVendorID: hexToInt(values.usbVendorID || '0000')
-		}
+			usbVendorID: hexToInt(values.usbVendorID || '0000'),
+		};
 
 		if (values.forcedSetupMode > 1) {
 			setWarning({ show: true, acceptText: '' });
@@ -1322,9 +1386,8 @@ export default function SettingsPage() {
 										<Tab.Content>
 											<Tab.Pane eventKey="inputmode">
 												<Section title={t('SettingsPage:settings-header-text')}>
-
 													<Form.Group className="row mb-3">
-														  <Row className="mb-3">
+														<Row className="mb-3">
 															<Col sm={4}>
 																<Form.Label>
 																	{t('SettingsPage:current-input-mode-label')}
@@ -1378,7 +1441,6 @@ export default function SettingsPage() {
 														<span className="alert">{saveMessage}</span>
 													) : null}
 												</Section>
- 
 											</Tab.Pane>
 											<Tab.Pane eventKey="gamepad">
 												<Section
@@ -1620,7 +1682,7 @@ export default function SettingsPage() {
 														{Object.keys(hotkeyFields).map((o, i) => (
 															<Form.Group
 																key={`hotkey-${i}-base`}
-																className="row mb-3"
+																className="row row-gap-2 gx-2 pb-2"
 															>
 																<Col sm="auto">
 																	<Form.Check
diff --git a/www/src/index.scss b/www/src/index.scss
index 7be333d62..ae057e811 100644
--- a/www/src/index.scss
+++ b/www/src/index.scss
@@ -1,14 +1,19 @@
+$gp-primary: #ec008c;
+
 // Override default variables before the import
 $primary: #495057;
 $danger: #7b2d26;
+
+$body-color-dark: #e3e3e3;
+$body-bg-dark: #1b1b1d;
+
+$navbar-light-hover-color: $gp-primary;
+$navbar-light-active-color: $gp-primary;
+
 $enable-cssgrid: true;
 
 @import "~bootstrap/scss/bootstrap";
 
-:root {
-	--bs-primary-rgb: 20, 23, 30;
-}
-
 * {
 	font-size: 16px;
 }
@@ -21,7 +26,6 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
-
 h1 {
 	font-size: 1.5rem;
 }