diff --git a/src/lib/components/settings/DataSourceSettings.svelte b/src/lib/components/settings/DataSourceSettings.svelte
new file mode 100644
index 0000000..5891573
--- /dev/null
+++ b/src/lib/components/settings/DataSourceSettings.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { SettingsInput, SettingsSwitch } from '$lib/components';
+	import { _ } from 'svelte-i18n';
+	import { Row, Col, FormGroup, Input, InputGroupText } from '@sveltestrap/sveltestrap';
+	import ToggleHeader from '../ToggleHeader.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+	import { isValidHexPubKey, getPubKey, isValidNpub } from '$lib';
+	import { createEventDispatcher } from 'svelte';
+	import { DataSourceType } from '$lib/types/dataSource';
+
+	const dispatch = createEventDispatcher();
+	export let settings;
+	export let isOpen = false;
+
+	const checkValidNostrPubkey = (key: string) => {
+		$settings[key] = $settings[key].trim();
+		if (isValidNpub($settings[key])) {
+			dispatch('showToast', {
+				color: 'info',
+				text: $_('section.settings.convertingValidNpub')
+			});
+		}
+
+		let ret = getPubKey($settings[key]);
+		if (ret) $settings[key] = ret;
+	};
+</script>
+
+<Row>
+	<ToggleHeader header={$_('section.settings.section.dataSource')} bind:isOpen defaultOpen={false}>
+		<Row>
+			<Col>
+				<h5>Data Source</h5>
+				<FormGroup>
+					<Row>
+						<Col xs="12" xl="6" class="mb-2">
+							<Input
+								type="radio"
+								id="btclock_source"
+								name="dataSource"
+								bind:group={$settings.dataSource}
+								value={DataSourceType.BTCLOCK_SOURCE}
+								label={$_('section.settings.dataSource.btclock')}
+							/>
+						</Col>
+						<Col xs="12" xl="6" class="mb-2">
+							<Input
+								type="radio"
+								id="third_party_source"
+								name="dataSource"
+								bind:group={$settings.dataSource}
+								value={DataSourceType.THIRD_PARTY_SOURCE}
+								label={$_('section.settings.dataSource.thirdParty')}
+							/>
+						</Col>
+						{#if $settings.nostrRelay}
+							<Col xs="12" xl="6" class="mb-2">
+								<Input
+									type="radio"
+									id="nostr_source"
+									name="dataSource"
+									bind:group={$settings.dataSource}
+									value={DataSourceType.NOSTR_SOURCE}
+									label={$_('section.settings.dataSource.nostr')}
+								/>
+							</Col>
+						{/if}
+						<Col xs="12" xl="6" class="mb-2">
+							<Input
+								type="radio"
+								id="custom_source"
+								name="dataSource"
+								bind:group={$settings.dataSource}
+								value={DataSourceType.CUSTOM_SOURCE}
+								label={$_('section.settings.dataSource.custom')}
+							/>
+						</Col>
+					</Row>
+				</FormGroup>
+			</Col>
+		</Row>
+
+		{#if $settings.dataSource === DataSourceType.THIRD_PARTY_SOURCE}
+			<SettingsInput
+				id="mempoolInstance"
+				label={$_('section.settings.mempoolnstance')}
+				bind:value={$settings.mempoolInstance}
+				required={true}
+				size={$uiSettings.inputSize}
+			>
+				<InputGroupText>
+					<Input
+						type="checkbox"
+						bind:checked={$settings.mempoolSecure}
+						bsSize={$uiSettings.inputSize}
+					/>
+					HTTPS
+				</InputGroupText>
+			</SettingsInput>
+		{/if}
+
+		{#if $settings.dataSource === DataSourceType.NOSTR_SOURCE}
+			<SettingsInput
+				id="nostrRelay"
+				label={$_('section.settings.nostrRelay')}
+				bind:value={$settings.nostrRelay}
+				required={true}
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsInput
+				id="nostrPubKey"
+				label={$_('section.settings.nostrPubKey')}
+				bind:value={$settings.nostrPubKey}
+				required={true}
+				minlength="64"
+				invalid={!isValidHexPubKey($settings.nostrPubKey)}
+				helpText={!isValidHexPubKey($settings.nostrPubKey)
+					? $_('section.settings.invalidNostrPubkey')
+					: undefined}
+				size={$uiSettings.inputSize}
+				onChange={() => checkValidNostrPubkey('nostrPubKey')}
+				onInput={() => checkValidNostrPubkey('nostrPubKey')}
+			/>
+		{/if}
+
+		{#if $settings.dataSource === DataSourceType.CUSTOM_SOURCE}
+			<SettingsInput
+				id="ceEndpoint"
+				label={$_('section.settings.ceEndpoint')}
+				bind:value={$settings.ceEndpoint}
+				required={true}
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsSwitch
+				id="ceDisableSSL"
+				bind:checked={$settings.ceDisableSSL}
+				label={$_('section.settings.ceDisableSSL')}
+				size={$uiSettings.inputSize}
+			/>
+		{/if}
+	</ToggleHeader>
+</Row>
diff --git a/src/lib/components/settings/DisplaySettings.svelte b/src/lib/components/settings/DisplaySettings.svelte
new file mode 100644
index 0000000..e391a8c
--- /dev/null
+++ b/src/lib/components/settings/DisplaySettings.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { SettingsInput, SettingsSwitch, SettingsSelect } from '$lib/components';
+	import { _ } from 'svelte-i18n';
+	import { Row } from '@sveltestrap/sveltestrap';
+	import ToggleHeader from '../ToggleHeader.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+	import { PUBLIC_BASE_URL } from '$lib/config';
+
+	export let settings;
+	export let isOpen = false;
+
+	const onFlBrightnessChange = async () => {
+		await fetch(`${PUBLIC_BASE_URL}/api/frontlight/brightness/${$settings.flMaxBrightness}`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+	};
+
+	const setTextColor = () => {
+		$settings.invertedColor = !$settings.invertedColor;
+		$settings.fgColor = $settings.invertedColor ? 65535 : 0;
+		$settings.bgColor = $settings.invertedColor ? 0 : 65535;
+	};
+
+	const textColorOptions: [string, boolean][] = [
+		[$_('colors.black') + ' on ' + $_('colors.white'), false],
+		[$_('colors.white') + ' on ' + $_('colors.black'), true]
+	];
+</script>
+
+<Row>
+	<ToggleHeader
+		header={$_('section.settings.section.displaysAndLed')}
+		bind:isOpen
+		defaultOpen={false}
+	>
+		<SettingsSelect
+			id="textColor"
+			label={$_('section.settings.textColor')}
+			bind:value={$settings.invertedColor}
+			options={textColorOptions}
+			size={$uiSettings.inputSize}
+			on:change={setTextColor}
+		/>
+
+		<SettingsInput
+			id="timePerScreen"
+			label={$_('section.settings.timePerScreen')}
+			bind:value={$settings.timePerScreen}
+			type="number"
+			min={1}
+			step={1}
+			required={true}
+			suffix={$_('time.minutes')}
+			size={$uiSettings.inputSize}
+		/>
+
+		<SettingsInput
+			id="fullRefreshMin"
+			label={$_('section.settings.fullRefreshEvery')}
+			bind:value={$settings.fullRefreshMin}
+			type="number"
+			min={1}
+			step={1}
+			required={true}
+			suffix={$_('time.minutes')}
+			size={$uiSettings.inputSize}
+		/>
+
+		<SettingsInput
+			id="minSecPriceUpd"
+			label={$_('section.settings.timeBetweenPriceUpdates')}
+			bind:value={$settings.minSecPriceUpd}
+			type="number"
+			min={1}
+			step={1}
+			suffix={$_('time.seconds')}
+			helpText={$_('section.settings.shortAmountsWarning')}
+			size={$uiSettings.inputSize}
+		/>
+
+		<SettingsInput
+			id="ledBrightness"
+			label={$_('section.settings.ledBrightness')}
+			bind:value={$settings.ledBrightness}
+			type="range"
+			min={0}
+			max={255}
+			step={1}
+			size={$uiSettings.inputSize}
+		/>
+
+		{#if $settings.hasFrontlight && !$settings.flDisable}
+			<SettingsInput
+				id="flMaxBrightness"
+				label={$_('section.settings.flMaxBrightness')}
+				bind:value={$settings.flMaxBrightness}
+				type="range"
+				min={0}
+				max={4095}
+				step={1}
+				size={$uiSettings.inputSize}
+				on:change={onFlBrightnessChange}
+			/>
+
+			<SettingsInput
+				id="flEffectDelay"
+				label={$_('section.settings.flEffectDelay')}
+				bind:value={$settings.flEffectDelay}
+				type="range"
+				min={5}
+				max={300}
+				step={1}
+				size={$uiSettings.inputSize}
+			/>
+		{/if}
+
+		{#if !$settings.flDisable && $settings.hasLightLevel}
+			<SettingsInput
+				id="luxLightToggle"
+				label={`${$_('section.settings.luxLightToggle')} (${$settings.luxLightToggle})`}
+				bind:value={$settings.luxLightToggle}
+				type="range"
+				min={0}
+				max={1000}
+				step={1}
+				helpText={$_('section.settings.luxLightToggleText')}
+				size={$uiSettings.inputSize}
+			/>
+		{/if}
+
+		<Row>
+			<SettingsSwitch
+				id="ledTestOnPower"
+				bind:checked={$settings.ledTestOnPower}
+				label={$_('section.settings.ledPowerOnTest')}
+				size={$uiSettings.inputSize}
+			/>
+
+			<SettingsSwitch
+				id="ledFlashOnUpd"
+				bind:checked={$settings.ledFlashOnUpd}
+				label={$_('section.settings.ledFlashOnBlock')}
+				size={$uiSettings.inputSize}
+			/>
+
+			<SettingsSwitch
+				id="disableLeds"
+				bind:checked={$settings.disableLeds}
+				label={$_('section.settings.disableLeds')}
+				size={$uiSettings.inputSize}
+			/>
+
+			{#if $settings.hasFrontlight}
+				<SettingsSwitch
+					id="flDisable"
+					bind:checked={$settings.flDisable}
+					label={$_('section.settings.flDisable')}
+					size={$uiSettings.inputSize}
+				/>
+			{/if}
+
+			{#if $settings.hasFrontlight && !$settings.flDisable}
+				<SettingsSwitch
+					id="flAlwaysOn"
+					bind:checked={$settings.flAlwaysOn}
+					label={$_('section.settings.flAlwaysOn')}
+					size={$uiSettings.inputSize}
+				/>
+
+				<SettingsSwitch
+					id="flFlashOnUpd"
+					bind:checked={$settings.flFlashOnUpd}
+					label={$_('section.settings.flFlashOnUpd')}
+					size={$uiSettings.inputSize}
+				/>
+
+				<SettingsSwitch
+					id="flOffWhenDark"
+					bind:checked={$settings.flOffWhenDark}
+					label={$_('section.settings.flOffWhenDark')}
+					size={$uiSettings.inputSize}
+				/>
+			{/if}
+		</Row>
+	</ToggleHeader>
+</Row>
diff --git a/src/lib/components/settings/ExtraFeaturesSettings.svelte b/src/lib/components/settings/ExtraFeaturesSettings.svelte
new file mode 100644
index 0000000..2d6615c
--- /dev/null
+++ b/src/lib/components/settings/ExtraFeaturesSettings.svelte
@@ -0,0 +1,190 @@
+<script lang="ts">
+	import { SettingsInput, SettingsSwitch, SettingsSelect } from '$lib/components';
+	import { _ } from 'svelte-i18n';
+	import { Row, Button, Col } from '@sveltestrap/sveltestrap';
+	import ToggleHeader from '../ToggleHeader.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+	import { isValidHexPubKey, getPubKey, isValidNpub } from '$lib';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	export let settings;
+	export let isOpen = false;
+	export let miningPoolMap: Map<string, string>;
+
+	let validBitaxe = false;
+	const testBitaxe = async () => {
+		try {
+			const response = await fetch(`http://${$settings.bitaxeHostname}/api/system/info`);
+
+			if (!response.ok) {
+				dispatch('showToast', {
+					color: 'danger',
+					text: `Failed to connect to BitAxe HTTP error! status: ${response.status}`
+				});
+				validBitaxe = false;
+				throw new Error();
+			}
+
+			const systemInfo = await response.json();
+			dispatch('showToast', {
+				color: 'success',
+				text: `Connected to BitAxe ${systemInfo.ASICModel} (Board version ${systemInfo.boardVersion}) running firmware ${systemInfo.version}.\r\nCurrent hashrate ${Math.round(systemInfo.hashRate)} GH/s`
+			});
+			validBitaxe = true;
+		} catch (error) {
+			if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
+				dispatch('showToast', {
+					color: 'danger',
+					text: `Failed to connect to BitAxe, make sure you are connected to the same network.`
+				});
+			}
+			console.error('Failed to fetch Bitaxe system info:', error);
+			validBitaxe = false;
+		}
+	};
+
+	const checkValidNostrPubkey = (key: string) => {
+		$settings[key] = $settings[key].trim();
+		if (isValidNpub($settings[key])) {
+			dispatch('showToast', {
+				color: 'info',
+				text: $_('section.settings.convertingValidNpub')
+			});
+		}
+
+		let ret = getPubKey($settings[key]);
+		if (ret) $settings[key] = ret;
+	};
+
+	$: poolOptions = ($settings.availablePools || []).map((pool: string): [string, string] => [
+		miningPoolMap.get(pool) || pool,
+		pool
+	]);
+</script>
+
+<Row>
+	<ToggleHeader
+		header={$_('section.settings.section.extraFeatures')}
+		bind:isOpen
+		defaultOpen={false}
+	>
+		<!-- BitAxe Settings -->
+		{#if 'bitaxeEnabled' in $settings}
+			<Row class="mb-3">
+				<Col>
+					<h5>BitAxe</h5>
+					<SettingsSwitch
+						id="bitaxeEnabled"
+						bind:checked={$settings.bitaxeEnabled}
+						label="{$_('section.settings.bitaxeEnabled')} ({$_('restartRequired')})"
+						size={$uiSettings.inputSize}
+						col={{ md: '12', xl: '12', xxl: '12' }}
+					/>
+					{#if $settings.bitaxeEnabled}
+						<SettingsInput
+							id="bitaxeHostname"
+							label={$_('section.settings.bitaxeHostname')}
+							bind:value={$settings.bitaxeHostname}
+							required={true}
+							valid={validBitaxe}
+							size={$uiSettings.inputSize}
+						>
+							<Button type="button" color="success" on:click={testBitaxe}>
+								{$_('test', { default: 'Test' })}
+							</Button>
+						</SettingsInput>
+					{/if}
+				</Col>
+			</Row>
+		{/if}
+
+		<!-- Mining Pool Settings -->
+		{#if 'miningPoolStats' in $settings}
+			<Row class="mb-3">
+				<Col>
+					<h5>Mining Pool stats</h5>
+					<SettingsSwitch
+						id="miningPoolStats"
+						bind:checked={$settings.miningPoolStats}
+						label="{$_('section.settings.miningPoolStats')} ({$_('restartRequired')})"
+						size={$uiSettings.inputSize}
+						col={{ md: '12', xl: '12', xxl: '12' }}
+					/>
+					{#if $settings.miningPoolStats}
+						<SettingsSelect
+							id="miningPoolName"
+							label={$_('section.settings.miningPoolName')}
+							bind:value={$settings.miningPoolName}
+							options={poolOptions}
+							size={$uiSettings.inputSize}
+							selectClass={$uiSettings.selectClass}
+						/>
+						<SettingsInput
+							id="miningPoolUser"
+							label={$_('section.settings.miningPoolUser')}
+							bind:value={$settings.miningPoolUser}
+							required={true}
+							size={$uiSettings.inputSize}
+						/>
+					{/if}
+				</Col>
+			</Row>
+		{/if}
+
+		<!-- Nostr Settings -->
+		{#if 'nostrZapNotify' in $settings}
+			<Row class="mb-3">
+				<Col>
+					<h5>Nostr</h5>
+					<SettingsInput
+						id="nostrRelay"
+						label={$_('section.settings.nostrRelay')}
+						bind:value={$settings.nostrRelay}
+						required={true}
+						size={$uiSettings.inputSize}
+					/>
+					<SettingsSwitch
+						id="nostrZapNotify"
+						bind:checked={$settings.nostrZapNotify}
+						label="{$_('section.settings.nostrZapNotify')} ({$_('restartRequired')})"
+						size={$uiSettings.inputSize}
+						col={{ md: '12', xl: '12', xxl: '12' }}
+					/>
+					{#if $settings.nostrZapNotify}
+						<Row>
+							<SettingsSwitch
+								id="ledFlashOnZap"
+								bind:checked={$settings.ledFlashOnZap}
+								label={$_('section.settings.ledFlashOnZap')}
+								size={$uiSettings.inputSize}
+							/>
+							{#if $settings.hasFrontlight && !$settings.flDisable}
+								<SettingsSwitch
+									id="flFlashOnZap"
+									bind:checked={$settings.flFlashOnZap}
+									label={$_('section.settings.flFlashOnZap')}
+									size={$uiSettings.inputSize}
+								/>
+							{/if}
+						</Row>
+						<SettingsInput
+							id="nostrZapPubkey"
+							label={$_('section.settings.nostrZapPubkey')}
+							bind:value={$settings.nostrZapPubkey}
+							required={true}
+							minlength="64"
+							invalid={!isValidHexPubKey($settings.nostrZapPubkey)}
+							helpText={!isValidHexPubKey($settings.nostrZapPubkey)
+								? $_('section.settings.invalidNostrPubkey')
+								: undefined}
+							size={$uiSettings.inputSize}
+							onChange={() => checkValidNostrPubkey('nostrZapPubkey')}
+							onInput={() => checkValidNostrPubkey('nostrZapPubkey')}
+						/>
+					{/if}
+				</Col>
+			</Row>
+		{/if}
+	</ToggleHeader>
+</Row>
diff --git a/src/lib/components/settings/ScreenSpecificSettings.svelte b/src/lib/components/settings/ScreenSpecificSettings.svelte
new file mode 100644
index 0000000..45f9313
--- /dev/null
+++ b/src/lib/components/settings/ScreenSpecificSettings.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { SettingsSwitch } from '$lib/components';
+	import { _ } from 'svelte-i18n';
+	import { Row, Col } from '@sveltestrap/sveltestrap';
+	import ToggleHeader from '../ToggleHeader.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+
+	export let settings;
+	export let isOpen = false;
+</script>
+
+<Row>
+	<ToggleHeader
+		header={$_('section.settings.section.screenSettings')}
+		bind:isOpen
+		defaultOpen={true}
+	>
+		<Row>
+			<SettingsSwitch
+				id="stealFocus"
+				bind:checked={$settings.stealFocus}
+				label={$_('section.settings.StealFocusOnNewBlock')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+			<SettingsSwitch
+				id="mcapBigChar"
+				bind:checked={$settings.mcapBigChar}
+				label={$_('section.settings.useBigCharsMcap')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+			<SettingsSwitch
+				id="useBlkCountdown"
+				bind:checked={$settings.useBlkCountdown}
+				label={$_('section.settings.useBlkCountdown')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+			<SettingsSwitch
+				id="useSatsSymbol"
+				bind:checked={$settings.useSatsSymbol}
+				label={$_('section.settings.useSatsSymbol')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+			<SettingsSwitch
+				id="suffixPrice"
+				bind:checked={$settings.suffixPrice}
+				label={$_('section.settings.suffixPrice')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+			<SettingsSwitch
+				id="mowMode"
+				bind:checked={$settings.mowMode}
+				label={$_('section.settings.mowMode')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+				disabled={!$settings.suffixPrice}
+			/>
+			<SettingsSwitch
+				id="suffixShareDot"
+				bind:checked={$settings.suffixShareDot}
+				label={$_('section.settings.suffixShareDot')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+				disabled={!$settings.suffixPrice}
+			/>
+			<SettingsSwitch
+				id="verticalDesc"
+				bind:checked={$settings.verticalDesc}
+				label={$_('section.settings.verticalDesc')}
+				size={$uiSettings.inputSize}
+				col={{ md: '6', xl: '12', xxl: '6' }}
+			/>
+
+			{#if !$settings.actCurrencies}
+				<SettingsSwitch
+					id="fetchEurPrice"
+					bind:checked={$settings.fetchEurPrice}
+					label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
+					size={$uiSettings.inputSize}
+					col={{ md: '6', xl: '12', xxl: '6' }}
+				/>
+			{/if}
+		</Row>
+		<Row>
+			<h5>{$_('section.settings.screens')}</h5>
+			{#if $settings.screens}
+				{#each $settings.screens as s}
+					<SettingsSwitch
+						id="screens_{s.id}"
+						bind:checked={s.enabled}
+						label={s.name}
+						size={$uiSettings.inputSize}
+						col={{ md: '6', xl: '12', xxl: '6' }}
+					/>
+				{/each}
+			{/if}
+		</Row>
+		{#if $settings.actCurrencies && $settings.useNostr !== true}
+			<Row>
+				<h5>{$_('section.settings.currencies')}</h5>
+				<small>{$_('restartRequired')}</small>
+				{#if $settings.availableCurrencies}
+					{#each $settings.availableCurrencies as c}
+						<Col md="6" xl="12" xxl="6">
+							<div class="form-check form-control-{$uiSettings.inputSize}">
+								<input
+									id="currency_{c}"
+									bind:group={$settings.actCurrencies}
+									value={c}
+									type="checkbox"
+									class="form-check-input"
+								/>
+								<label class="form-check-label" for="currency_{c}">{c}</label>
+							</div>
+						</Col>
+					{/each}
+				{/if}
+			</Row>
+		{/if}
+	</ToggleHeader>
+</Row>
diff --git a/src/lib/components/settings/SystemSettings.svelte b/src/lib/components/settings/SystemSettings.svelte
new file mode 100644
index 0000000..5f12e2d
--- /dev/null
+++ b/src/lib/components/settings/SystemSettings.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { SettingsInput, SettingsSwitch } from '$lib/components';
+	import { _ } from 'svelte-i18n';
+	import { Row, Button } from '@sveltestrap/sveltestrap';
+	import ToggleHeader from '../ToggleHeader.svelte';
+	import { uiSettings } from '$lib/uiSettings';
+	import EyeIcon from 'svelte-bootstrap-icons/lib/Eye.svelte';
+	import EyeSlashIcon from 'svelte-bootstrap-icons/lib/EyeSlash.svelte';
+
+	export let settings;
+	export let isOpen = false;
+
+	let showPassword = false;
+
+	const getTzOffsetFromSystem = () => {
+		const dt = new Date();
+		let diffTZ = dt.getTimezoneOffset();
+		$settings.tzOffset = diffTZ * -1;
+	};
+</script>
+
+<Row>
+	<ToggleHeader header={$_('section.settings.section.system')} bind:isOpen defaultOpen={false}>
+		<SettingsInput
+			id="tzOffset"
+			label={$_('section.settings.timezoneOffset')}
+			bind:value={$settings.tzOffset}
+			type="number"
+			step={1}
+			required={true}
+			suffix={$_('time.minutes')}
+			helpText={$_('section.settings.tzOffsetHelpText')}
+			size={$uiSettings.inputSize}
+		>
+			<Button type="button" color="info" on:click={getTzOffsetFromSystem}>
+				{$_('auto-detect')}
+			</Button>
+		</SettingsInput>
+
+		{#if $settings.httpAuthEnabled}
+			<SettingsInput
+				id="httpAuthUser"
+				label={$_('section.settings.httpAuthUser')}
+				bind:value={$settings.httpAuthUser}
+				required={true}
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsInput
+				id="httpAuthPass"
+				label={$_('section.settings.httpAuthPass')}
+				bind:value={$settings.httpAuthPass}
+				type={showPassword ? 'text' : 'password'}
+				required={true}
+				size={$uiSettings.inputSize}
+			>
+				<Button
+					type="button"
+					on:click={() => (showPassword = !showPassword)}
+					color={showPassword ? 'success' : 'danger'}
+				>
+					{#if !showPassword}<EyeIcon />{:else}<EyeSlashIcon />{/if}
+				</Button>
+			</SettingsInput>
+		{/if}
+
+		<SettingsInput
+			id="hostnamePrefix"
+			label={$_('section.settings.hostnamePrefix')}
+			bind:value={$settings.hostnamePrefix}
+			required={true}
+			size={$uiSettings.inputSize}
+		/>
+
+		<SettingsInput
+			id="wpTimeout"
+			label={$_('section.settings.wpTimeout')}
+			bind:value={$settings.wpTimeout}
+			type="number"
+			min={1}
+			step={1}
+			required={true}
+			suffix={$_('time.seconds')}
+			size={$uiSettings.inputSize}
+		/>
+
+		<Row>
+			<SettingsSwitch
+				id="otaEnabled"
+				bind:checked={$settings.otaEnabled}
+				label="{$_('section.settings.otaUpdates')} ({$_('restartRequired')})"
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsSwitch
+				id="mdnsEnabled"
+				bind:checked={$settings.mdnsEnabled}
+				label="{$_('section.settings.enableMdns')} ({$_('restartRequired')})"
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsSwitch
+				id="httpAuthEnabled"
+				bind:checked={$settings.httpAuthEnabled}
+				label="{$_('section.settings.httpAuthEnabled')} ({$_('restartRequired')})"
+				size={$uiSettings.inputSize}
+			/>
+			<SettingsSwitch
+				id="enableDebugLog"
+				bind:checked={$settings.enableDebugLog}
+				label="{$_('section.settings.enableDebugLog')} ({$_('restartRequired')})"
+				size={$uiSettings.inputSize}
+			/>
+		</Row>
+	</ToggleHeader>
+</Row>
diff --git a/src/lib/components/settings/index.ts b/src/lib/components/settings/index.ts
new file mode 100644
index 0000000..6ddfa7c
--- /dev/null
+++ b/src/lib/components/settings/index.ts
@@ -0,0 +1,5 @@
+export { default as ScreenSpecificSettings } from './ScreenSpecificSettings.svelte';
+export { default as DisplaySettings } from './DisplaySettings.svelte';
+export { default as DataSourceSettings } from './DataSourceSettings.svelte';
+export { default as ExtraFeaturesSettings } from './ExtraFeaturesSettings.svelte';
+export { default as SystemSettings } from './SystemSettings.svelte';
diff --git a/src/lib/i18n/en.json b/src/lib/i18n/en.json
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/locales/de.json b/src/lib/locales/de.json
index e9756ff..852e68b 100644
--- a/src/lib/locales/de.json
+++ b/src/lib/locales/de.json
@@ -30,7 +30,7 @@
 			"wifiTxPower": "WiFi-TX-Leistung",
 			"settingsSaved": "Einstellungen gespeichert",
 			"errorSavingSettings": "Fehler beim Speichern der Einstellungen",
-			"ownDataSource": "BTClock-Datenquelle verwenden",
+			"ownDataSource": "BTClock-Datenquelle",
 			"flAlwaysOn": "Displaybeleuchtung immer an",
 			"flEffectDelay": "Displaybeleuchtungeffekt Geschwindigkeit",
 			"flFlashOnUpd": "Displaybeleuchting bei neuem Block",
@@ -58,7 +58,16 @@
 			"hideAll": "Alles ausblenden",
 			"flOffWhenDark": "Displaybeleuchtung aus, wenn es dunkel ist",
 			"luxLightToggleText": "Zum Deaktivieren auf 0 setzen",
-			"verticalDesc": "Vrtikale Bildschirmbeschreibung"
+			"verticalDesc": "Vrtikale Bildschirmbeschreibung",
+			"enableDebugLog": "Debug-Protokoll aktivieren",
+			"bitaxeEnabled": "BitAxe-Integration aktivieren",
+			"miningPoolStats": "Mining-Pool-Statistiken Integration Aktivieren",
+			"nostrZapNotify": "Nostr Zap-Benachrichtigungen aktivieren",
+			"thirdPartySource": "mempool.space/coincap.io Verwenden",
+			"dataSource": {
+				"nostr": "Nostr-Verlag",
+				"custom": "Benutzerdefinierter dataquelle"
+			}
 		},
 		"control": {
 			"systemInfo": "Systeminfo",
diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json
index caab16c..4cd430c 100644
--- a/src/lib/locales/en.json
+++ b/src/lib/locales/en.json
@@ -29,7 +29,7 @@
 			"wifiTxPower": "WiFi TX power",
 			"settingsSaved": "Settings saved",
 			"errorSavingSettings": "Error saving settings",
-			"ownDataSource": "Use BTClock data source",
+			"ownDataSource": "BTClock data source",
 			"flMaxBrightness": "Frontlight brightness",
 			"flAlwaysOn": "Frontlight always on",
 			"flEffectDelay": "Frontlight effect speed",
@@ -40,11 +40,11 @@
 			"nostrPubKey": "Nostr source pubkey",
 			"nostrZapKey": "Nostr zap pubkey",
 			"nostrRelay": "Nostr Relay",
-			"nostrZapNotify": "Nostr Zap Notifications",
+			"nostrZapNotify": "Enable Nostr Zap Notifications",
 			"useNostr": "Use Nostr data source",
 			"bitaxeHostname": "BitAxe hostname or IP",
-			"bitaxeEnabled": "Enable BitAxe",
-			"miningPoolStats": "Enable Mining Pool Stats",
+			"bitaxeEnabled": "Enable BitAxe-integration",
+			"miningPoolStats": "Enable Mining Pool Stats integration",
 			"miningPoolName": "Mining Pool",
 			"miningPoolUser": "Mining Pool username or api key",
 			"nostrZapPubkey": "Nostr Zap pubkey",
@@ -56,7 +56,7 @@
 			"httpAuthPass": "WebUI Password",
 			"httpAuthText": "Only password-protects WebUI, not API-calls.",
 			"currencies": "Currencies",
-			"stagingSource": "Use Staging data source (for development)",
+			"customSource": "Use custom data source endpoint",
 			"useNostrTooltip": "Very experimental and unstable. Nostr data source is not required for Nostr Zap notifications.",
 			"mowMode": "Mow Suffix Mode",
 			"suffixShareDot": "Suffix compact notation",
@@ -73,7 +73,18 @@
 			"hideAll": "Hide all",
 			"flOffWhenDark": "Frontlight off when dark",
 			"luxLightToggleText": "Set to 0 to disable",
-			"verticalDesc": "Use vertical screen description"
+			"verticalDesc": "Use vertical screen description",
+			"enableDebugLog": "Enable Debug-log",
+			"dataSource": {
+				"label": "Data Source",
+				"btclock": "BTClock Data Source",
+				"thirdParty": "mempool.space/coincap.io",
+				"nostr": "Nostr publisher",
+				"custom": "Custom Endpoint"
+			},
+			"thirdPartySource": "Use mempool.space/coincap.io",
+			"ceDisableSSL": "Disable SSL",
+			"ceEndpoint": "Endpoint hostname"
 		},
 		"control": {
 			"systemInfo": "System info",
diff --git a/src/lib/locales/es.json b/src/lib/locales/es.json
index 79b6673..96824e3 100644
--- a/src/lib/locales/es.json
+++ b/src/lib/locales/es.json
@@ -28,7 +28,7 @@
 			"wifiTxPowerText": "En la mayoría de los casos no es necesario configurar esto.",
 			"settingsSaved": "Configuración guardada",
 			"errorSavingSettings": "Error al guardar la configuración",
-			"ownDataSource": "Utilice la fuente de datos BTClock",
+			"ownDataSource": "fuente de datos BTClock",
 			"flMaxBrightness": "Brillo de luz de la pantalla",
 			"flAlwaysOn": "Luz de la pantalla siempre encendida",
 			"flEffectDelay": "Velocidad del efecto de luz de la pantalla",
@@ -57,7 +57,16 @@
 			"hideAll": "Ocultar todo",
 			"flOffWhenDark": "Luz de la pantalla cuando está oscuro",
 			"luxLightToggleText": "Establecer en 0 para desactivar",
-			"verticalDesc": "Descripción de pantalla vertical"
+			"verticalDesc": "Descripción de pantalla vertical",
+			"enableDebugLog": "Habilitar registro de depuración",
+			"bitaxeEnabled": "Habilitar la integración de BitAxe",
+			"miningPoolStats": "Habilitar la integración de estadísticas del grupo minero",
+			"nostrZapNotify": "Habilitar notificaciones de Nostr Zap",
+			"thirdPartySource": "Utilice mempool.space/coincap.io",
+			"dataSource": {
+				"nostr": "editorial nostr",
+				"custom": "Punto final personalizado"
+			}
 		},
 		"control": {
 			"turnOff": "Apagar",
diff --git a/src/lib/types/dataSource.ts b/src/lib/types/dataSource.ts
new file mode 100644
index 0000000..ffadd46
--- /dev/null
+++ b/src/lib/types/dataSource.ts
@@ -0,0 +1,6 @@
+export enum DataSourceType {
+	BTCLOCK_SOURCE = 0,
+	THIRD_PARTY_SOURCE = 1,
+	NOSTR_SOURCE = 2,
+	CUSTOM_SOURCE = 3
+}
diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte
index 3360e22..1210ad6 100644
--- a/src/routes/Settings.svelte
+++ b/src/routes/Settings.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { isValidNostrRelay, getPubKey, isValidHexPubKey, isValidNpub } from '$lib';
 	import { PUBLIC_BASE_URL } from '$lib/config';
-	import { uiSettings } from '$lib/uiSettings';
 	import { createEventDispatcher } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import {
@@ -14,42 +12,27 @@
 		Form,
 		Row
 	} from '@sveltestrap/sveltestrap';
-	import EyeIcon from 'svelte-bootstrap-icons/lib/Eye.svelte';
-	import EyeSlashIcon from 'svelte-bootstrap-icons/lib/EyeSlash.svelte';
-	import { derived } from 'svelte/store';
-	import { SettingsSwitch, SettingsInput, SettingsSelect, ToggleHeader } from '$lib/components';
+	import {
+		ScreenSpecificSettings,
+		DisplaySettings,
+		DataSourceSettings,
+		ExtraFeaturesSettings,
+		SystemSettings
+	} from '$lib/components/settings';
 
 	export let settings;
 
-	const wifiTxPowerMap = new Map<string, number>([
-		['Default', 80],
-		['19.5dBm', 78], // 19.5dBm
-		['19dBm', 76], // 19dBm
-		['18.5dBm', 74], // 18.5dBm
-		['17dBm', 68], // 17dBm
-		['15dBm', 60], // 15dBm
-		['13dBm', 52], // 13dBm
-		['11dBm', 44], // 11dBm
-		['8.5dBm', 34], // 8.5dBm
-		['7dBm', 28], // 7dBm
-		['5dBm', 20] // 5dBm
-	]);
-
 	const miningPoolMap = new Map<string, string>([
 		['noderunners', 'Noderunners.network'],
 		['braiins', 'Braiins Pool'],
 		['ocean', 'ocean.xyz'],
 		['satoshi_radio', 'Satoshi Radio pool'],
 		['public_pool', 'public-pool.io'],
-		['gobrrr_pool', 'Go Brrr pool']
+		['gobrrr_pool', 'Go Brrr pool'],
+		['ckpool', 'CKPool'],
+		['eu_ckpool', 'EU CKPool']
 	]);
 
-	const getMiningPoolName = (name: string) => {
-		if (miningPoolMap.has(name)) return miningPoolMap.get(name);
-
-		return name;
-	};
-
 	const dispatch = createEventDispatcher();
 
 	const handleReset = (e: Event) => {
@@ -57,20 +40,10 @@
 		dispatch('formReset');
 	};
 
-	const getTzOffsetFromSystem = () => {
-		const dt = new Date();
-		let diffTZ = dt.getTimezoneOffset();
-		$settings.tzOffset = diffTZ * -1;
-	};
-
 	const onSave = async (e: Event) => {
 		e.preventDefault();
 
-		// const form = e.target as HTMLFormElement;
-		// const formData = new FormData(form);
-
 		let formSettings = $settings;
-
 		delete formSettings['gitRev'];
 		delete formSettings['ip'];
 		delete formSettings['lastBuildTime'];
@@ -79,10 +52,6 @@
 			'Content-Type': 'application/json'
 		});
 
-		//if ($settings.httpAuthEnabled) {
-		//	headers.set('Authorization', 'Basic ' + btoa($settings.httpAuthUser + ":" + $settings.httpAuthPass));
-		//}
-
 		await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
 			method: 'PATCH',
 			headers: headers,
@@ -110,110 +79,6 @@
 			});
 	};
 
-	let validNostrRelay = false;
-	const testNostrRelay = async () => {
-		validNostrRelay = await isValidNostrRelay($settings.nostrRelay);
-	};
-
-	let validBitaxe = false;
-	const testBitaxe = async () => {
-		try {
-			const response = await fetch(`http://${$settings.bitaxeHostname}/api/system/info`);
-
-			if (!response.ok) {
-				dispatch('showToast', {
-					color: 'danger',
-					text: `Failed to connect to BitAxe HTTP error! status: ${response.status}`
-				});
-				validBitaxe = false;
-				throw new Error();
-			}
-
-			const systemInfo = await response.json();
-			dispatch('showToast', {
-				color: 'success',
-				text: `Connected to BitAxe ${systemInfo.ASICModel} (Board version ${systemInfo.boardVersion}) running firmware ${systemInfo.version}.\r\nCurrent hashrate ${Math.round(systemInfo.hashRate)} GH/s`
-			});
-			validBitaxe = true;
-		} catch (error) {
-			if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
-				dispatch('showToast', {
-					color: 'danger',
-					text: `Failed to connect to BitAxe, make sure you are connected to the same network.`
-				});
-			}
-			console.error('Failed to fetch Bitaxe system info:', error);
-			validBitaxe = false;
-		}
-	};
-
-	const checkValidNostrPubkey = (key: string) => {
-		$settings[key] = $settings[key].trim();
-		if (isValidNpub($settings[key])) {
-			dispatch('showToast', {
-				color: 'info',
-				text: $_('section.settings.convertingValidNpub')
-			});
-		}
-
-		let ret = getPubKey($settings[key]);
-
-		if (ret) $settings[key] = ret;
-	};
-
-	const onFlBrightnessChange = async () => {
-		await fetch(`${PUBLIC_BASE_URL}/api/frontlight/brightness/${$settings.flMaxBrightness}`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json'
-			}
-		});
-	};
-
-	let showPassword = false;
-
-	let textColor = '0';
-	const colorStore = derived(settings, ($settings) => ({
-		fgColor: $settings.fgColor,
-		bgColor: $settings.bgColor
-	}));
-
-	// $: {
-	// 	if ($colorStore) {
-	// 		console.log('Settings model changed:', $colorStore);
-	// 		if ($colorStore.fgColor < $colorStore.bgColor)
-	// 			textColor = "0";
-	// 		else
-	// 			textColor = "1"; // 65535
-	// 	}
-	// }
-
-	colorStore.subscribe(() => {
-		if ($colorStore) {
-			if ($colorStore.fgColor < $colorStore.bgColor) textColor = '0';
-			else textColor = '1'; // 65535
-		}
-	});
-
-	const setTextColor = () => {
-		console.log(textColor);
-		if (textColor == '1') {
-			$settings.fgColor = 65535;
-			$settings.bgColor = 0;
-		} else {
-			$settings.fgColor = 0;
-			$settings.bgColor = 65535;
-		}
-	};
-
-	const showAll = (show: boolean) => {
-		screenSettingsIsOpen = show;
-		displaysAndLedIsOpen = show;
-		dataSourceIsOpen = show;
-		extraFeaturesIsOpen = show;
-		systemIsOpen = show;
-	};
-
 	export let xs = 12;
 	export let sm = xs;
 	export let md = sm;
@@ -221,578 +86,62 @@
 	export let xl = lg;
 	export let xxl = xl;
 
-	let screenSettingsIsOpen: boolean,
-		displaysAndLedIsOpen: boolean,
-		dataSourceIsOpen: boolean,
-		extraFeaturesIsOpen: boolean,
-		systemIsOpen: boolean;
+	let screenSettingsIsOpen = true,
+		displaySettingsIsOpen = false,
+		dataSourceIsOpen = false,
+		extraFeaturesIsOpen = false,
+		systemIsOpen = false;
+
+	const showAll = () => {
+		screenSettingsIsOpen = true;
+		displaySettingsIsOpen = true;
+		dataSourceIsOpen = true;
+		extraFeaturesIsOpen = true;
+		systemIsOpen = true;
+	};
+
+	const hideAll = () => {
+		screenSettingsIsOpen = false;
+		displaySettingsIsOpen = false;
+		dataSourceIsOpen = false;
+		extraFeaturesIsOpen = false;
+		systemIsOpen = false;
+	};
 </script>
 
 <Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
 	<Card id="settings">
 		<CardHeader>
 			<div class="float-end">
-				<small
-					><button
-						on:click={() => {
-							showAll(true);
-						}}
-						type="button">{$_('section.settings.showAll')}</button
-					>
+				<small>
+					<button type="button" on:click={showAll}>{$_('section.settings.showAll')}</button>
 					|
-					<button
-						type="button"
-						on:click={() => {
-							showAll(false);
-						}}>{$_('section.settings.hideAll')}</button
-					></small
-				>
+					<button type="button" on:click={hideAll}>{$_('section.settings.hideAll')}</button>
+				</small>
 			</div>
-			<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
+			<CardTitle>{$_('section.settings.title')}</CardTitle>
 		</CardHeader>
-
 		<CardBody>
-			<Form on:submit={onSave} class="clearfix">
-				<Row>
-					<ToggleHeader
-						header={$_('section.settings.section.screenSettings')}
-						defaultOpen={true}
-						isOpen={screenSettingsIsOpen}
-					>
-						<Row>
-							<SettingsSwitch
-								id="stealFocus"
-								bind:checked={$settings.stealFocus}
-								label={$_('section.settings.StealFocusOnNewBlock')}
-								size={$uiSettings.inputSize}
-								col={{ md: '6', xl: '12', xxl: '6' }}
-							/>
-							<SettingsSwitch
-								id="mcapBigChar"
-								bind:checked={$settings.mcapBigChar}
-								label={$_('section.settings.useBigCharsMcap')}
-								size={$uiSettings.inputSize}
-								col={{ md: '6', xl: '12', xxl: '6' }}
-							/>
-							<SettingsSwitch
-								id="useBlkCountdown"
-								bind:checked={$settings.useBlkCountdown}
-								label={$_('section.settings.useBlkCountdown')}
-								size={$uiSettings.inputSize}
-								col={{ md: '6', xl: '12', xxl: '6' }}
-							/>
-							<SettingsSwitch
-								id="useSatsSymbol"
-								bind:checked={$settings.useSatsSymbol}
-								label={$_('section.settings.useSatsSymbol')}
-								size={$uiSettings.inputSize}
-								col={{ md: '6', xl: '12', xxl: '6' }}
-							/>
-							<SettingsSwitch
-								id="suffixPrice"
-								bind:checked={$settings.suffixPrice}
-								label={$_('section.settings.suffixPrice')}
-								size={$uiSettings.inputSize}
-								col={{ md: '6', xl: '12', xxl: '6' }}
-							/>
-							<SettingsSwitch
-								id="mowMode"
-								bind:checked={$settings.mowMode}
-								label={$_('section.settings.mowMode')}
-								size={$uiSettings.inputSize}
-								col={{ md: '6', xl: '12', xxl: '6' }}
-								disabled={!$settings.suffixPrice}
-							/>
-							<SettingsSwitch
-								id="suffixShareDot"
-								bind:checked={$settings.suffixShareDot}
-								label={$_('section.settings.suffixShareDot')}
-								size={$uiSettings.inputSize}
-								col={{ md: '6', xl: '12', xxl: '6' }}
-								disabled={!$settings.suffixPrice}
-							/>
-							<SettingsSwitch
-								id="verticalDesc"
-								bind:checked={$settings.verticalDesc}
-								label={$_('section.settings.verticalDesc')}
-								size={$uiSettings.inputSize}
-								col={{ md: '6', xl: '12', xxl: '6' }}
-							/>
+			<Form on:submit={onSave}>
+				<ScreenSpecificSettings {settings} bind:isOpen={screenSettingsIsOpen} />
+				<DisplaySettings {settings} bind:isOpen={displaySettingsIsOpen} />
+				<DataSourceSettings {settings} bind:isOpen={dataSourceIsOpen} on:showToast />
+				<ExtraFeaturesSettings
+					{settings}
+					bind:isOpen={extraFeaturesIsOpen}
+					{miningPoolMap}
+					on:showToast
+				/>
+				<SystemSettings {settings} bind:isOpen={systemIsOpen} />
 
-							{#if !$settings.actCurrencies}
-								<SettingsSwitch
-									id="fetchEurPrice"
-									bind:checked={$settings.fetchEurPrice}
-									label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
-									size={$uiSettings.inputSize}
-									col={{ md: '6', xl: '12', xxl: '6' }}
-								/>
-							{/if}
-						</Row>
-						<Row>
-							<h5>{$_('section.settings.screens')}</h5>
-							{#if $settings.screens}
-								{#each $settings.screens as s}
-									<SettingsSwitch
-										id="screens_{s.id}"
-										bind:checked={s.enabled}
-										label={s.name}
-										size={$uiSettings.inputSize}
-										col={{ md: '6', xl: '12', xxl: '6' }}
-									/>
-								{/each}
-							{/if}
-						</Row>
-						{#if $settings.actCurrencies && $settings.useNostr !== true}
-							<Row>
-								<h5>{$_('section.settings.currencies')}</h5>
-								<small>{$_('restartRequired')}</small>
-								{#if $settings.availableCurrencies}
-									{#each $settings.availableCurrencies as c}
-										<Col md="6" xl="12" xxl="6">
-											<div class="form-check form-control-{$uiSettings.inputSize}">
-												<input
-													id="currency_{c}"
-													bind:group={$settings.actCurrencies}
-													value={c}
-													type="checkbox"
-													class="form-check-input"
-													bsSize={$uiSettings.inputSize}
-													label={c}
-												/>
-												<label class="form-check-label" for="currency_{c}">{c}</label>
-											</div>
-										</Col>
-									{/each}
-								{/if}
-							</Row>
-						{/if}
-					</ToggleHeader>
-				</Row><Row>
-					<ToggleHeader
-						header={$_('section.settings.section.displaysAndLed')}
-						isOpen={displaysAndLedIsOpen}
-					>
-						<SettingsSelect
-							id="textColor"
-							label={$_('section.settings.textColor')}
-							bind:value={textColor}
-							options={[
-								[$_('colors.black') + ' on ' + $_('colors.white'), '0'],
-								[$_('colors.white') + ' on ' + $_('colors.black'), '1']
-							]}
-							size={$uiSettings.inputSize}
-							selectClass={$uiSettings.selectClass}
-							onChange={setTextColor}
-						/>
-
-						<SettingsInput
-							id="timePerScreen"
-							label={$_('section.settings.timePerScreen')}
-							bind:value={$settings.timePerScreen}
-							type="number"
-							min={1}
-							step="1"
-							required={true}
-							suffix={$_('time.minutes')}
-							size={$uiSettings.inputSize}
-						/>
-
-						<SettingsInput
-							id="fullRefreshMin"
-							label={$_('section.settings.fullRefreshEvery')}
-							bind:value={$settings.fullRefreshMin}
-							type="number"
-							min={1}
-							step="1"
-							required={true}
-							suffix={$_('time.minutes')}
-							size={$uiSettings.inputSize}
-						/>
-
-						<SettingsInput
-							id="minSecPriceUpd"
-							label={$_('section.settings.timeBetweenPriceUpdates')}
-							bind:value={$settings.minSecPriceUpd}
-							type="number"
-							min={1}
-							step="1"
-							suffix={$_('time.seconds')}
-							helpText={$_('section.settings.shortAmountsWarning')}
-							size={$uiSettings.inputSize}
-						/>
-
-						<SettingsInput
-							id="ledBrightness"
-							label={$_('section.settings.ledBrightness')}
-							bind:value={$settings.ledBrightness}
-							type="range"
-							min={0}
-							max={255}
-							step={1}
-							size={$uiSettings.inputSize}
-						/>
-
-						{#if $settings.hasFrontlight && !$settings.flDisable}
-							<SettingsInput
-								id="flMaxBrightness"
-								label={$_('section.settings.flMaxBrightness')}
-								bind:value={$settings.flMaxBrightness}
-								type="range"
-								min={0}
-								max={4095}
-								step={1}
-								size={$uiSettings.inputSize}
-								onChange={onFlBrightnessChange}
-							/>
-
-							<SettingsInput
-								id="flEffectDelay"
-								label={$_('section.settings.flEffectDelay')}
-								bind:value={$settings.flEffectDelay}
-								type="range"
-								min={5}
-								max={300}
-								step={1}
-								size={$uiSettings.inputSize}
-							/>
-						{/if}
-
-						{#if !$settings.flDisable && $settings.hasLightLevel}
-							<SettingsInput
-								id="luxLightToggle"
-								label={`${$_('section.settings.luxLightToggle')} (${$settings.luxLightToggle})`}
-								bind:value={$settings.luxLightToggle}
-								type="range"
-								min={0}
-								max={1000}
-								step={1}
-								helpText={$_('section.settings.luxLightToggleText')}
-								size={$uiSettings.inputSize}
-							/>
-						{/if}
-
-						<Row>
-							<SettingsSwitch
-								id="ledTestOnPower"
-								bind:checked={$settings.ledTestOnPower}
-								label={$_('section.settings.ledPowerOnTest')}
-								size={$uiSettings.inputSize}
-							/>
-
-							<SettingsSwitch
-								id="ledFlashOnUpd"
-								bind:checked={$settings.ledFlashOnUpd}
-								label={$_('section.settings.ledFlashOnBlock')}
-								size={$uiSettings.inputSize}
-							/>
-
-							<SettingsSwitch
-								id="disableLeds"
-								bind:checked={$settings.disableLeds}
-								label={$_('section.settings.disableLeds')}
-								size={$uiSettings.inputSize}
-							/>
-
-							{#if $settings.hasFrontlight}
-								<SettingsSwitch
-									id="flDisable"
-									bind:checked={$settings.flDisable}
-									label={$_('section.settings.flDisable')}
-									size={$uiSettings.inputSize}
-								/>
-							{/if}
-
-							{#if $settings.hasFrontlight && !$settings.flDisable}
-								<SettingsSwitch
-									id="flAlwaysOn"
-									bind:checked={$settings.flAlwaysOn}
-									label={$_('section.settings.flAlwaysOn')}
-									size={$uiSettings.inputSize}
-								/>
-
-								<SettingsSwitch
-									id="flFlashOnUpd"
-									bind:checked={$settings.flFlashOnUpd}
-									label={$_('section.settings.flFlashOnUpd')}
-									size={$uiSettings.inputSize}
-								/>
-
-								<SettingsSwitch
-									id="flOffWhenDark"
-									bind:checked={$settings.flOffWhenDark}
-									label={$_('section.settings.flOffWhenDark')}
-									size={$uiSettings.inputSize}
-								/>
-							{/if}
-						</Row>
-					</ToggleHeader>
-				</Row><Row>
-					<ToggleHeader
-						header={$_('section.settings.section.dataSource')}
-						isOpen={dataSourceIsOpen}
-					>
-						<SettingsInput
-							id="mempoolInstance"
-							label={$_('section.settings.mempoolnstance')}
-							bind:value={$settings.mempoolInstance}
-							disabled={$settings.ownDataSource}
-							required={true}
-							helpText={$_('section.settings.mempoolInstanceHelpText')}
-							size={$uiSettings.inputSize}
-						/>
-
-						<Row>
-							<SettingsSwitch
-								id="ownDataSource"
-								bind:checked={$settings.ownDataSource}
-								label="{$_('section.settings.ownDataSource')} ({$_('restartRequired')})"
-								size={$uiSettings.inputSize}
-							/>
-
-							{#if $settings.nostrRelay}
-								<SettingsSwitch
-									id="useNostr"
-									bind:checked={$settings.useNostr}
-									label="{$_('section.settings.useNostr')} ({$_('restartRequired')})"
-									size={$uiSettings.inputSize}
-								/>
-							{/if}
-
-							{#if 'stagingSource' in $settings}
-								<SettingsSwitch
-									id="stagingSource"
-									bind:checked={$settings.stagingSource}
-									label="{$_('section.settings.stagingSource')} ({$_('restartRequired')})"
-									size={$uiSettings.inputSize}
-								/>
-							{/if}
-						</Row>
-					</ToggleHeader>
-				</Row><Row>
-					<ToggleHeader
-						header={$_('section.settings.section.extraFeatures')}
-						isOpen={extraFeaturesIsOpen}
-					>
-						{#if $settings.bitaxeEnabled}
-							<SettingsInput
-								id="bitaxeHostname"
-								label={$_('section.settings.bitaxeHostname')}
-								bind:value={$settings.bitaxeHostname}
-								required={true}
-								valid={validBitaxe}
-								size={$uiSettings.inputSize}
-							>
-								<Button type="button" color="success" on:click={testBitaxe}
-									>{$_('test', { default: 'Test' })}</Button
-								>
-							</SettingsInput>
-						{/if}
-						{#if $settings.miningPoolStats}
-							<SettingsSelect
-								id="miningPoolName"
-								label={$_('section.settings.miningPoolName')}
-								bind:value={$settings.miningPoolName}
-								options={$settings.availablePools.map((pool) => [getMiningPoolName(pool), pool])}
-								size={$uiSettings.inputSize}
-								selectClass={$uiSettings.selectClass}
-							/>
-							<SettingsInput
-								id="miningPoolUser"
-								label={$_('section.settings.miningPoolUser')}
-								bind:value={$settings.miningPoolUser}
-								required={true}
-								size={$uiSettings.inputSize}
-							/>
-						{/if}
-						{#if 'nostrZapNotify' in $settings && $settings['nostrZapNotify']}
-							<SettingsInput
-								id="nostrZapPubkey"
-								label={$_('section.settings.nostrZapPubkey')}
-								bind:value={$settings.nostrZapPubkey}
-								required={true}
-								minlength="64"
-								invalid={!isValidHexPubKey($settings.nostrZapPubkey)}
-								helpText={!isValidHexPubKey($settings.nostrZapPubkey)
-									? $_('section.settings.invalidNostrPubkey')
-									: undefined}
-								size={$uiSettings.inputSize}
-								onChange={() => checkValidNostrPubkey('nostrZapPubkey')}
-								onInput={() => checkValidNostrPubkey('nostrZapPubkey')}
-							/>
-						{/if}
-						{#if $settings.useNostr}
-							<SettingsInput
-								id="nostrPubKey"
-								label={$_('section.settings.nostrPubKey')}
-								bind:value={$settings.nostrPubKey}
-								invalid={!isValidHexPubKey($settings.nostrPubKey)}
-								helpText={!isValidHexPubKey($settings.nostrPubKey)
-									? $_('section.settings.invalidNostrPubkey')
-									: undefined}
-								size={$uiSettings.inputSize}
-								onChange={() => checkValidNostrPubkey('nostrPubKey')}
-								onInput={() => checkValidNostrPubkey('nostrPubKey')}
-							/>
-						{/if}
-						{#if 'nostrZapNotify' in $settings || $settings.useNostr}
-							<SettingsInput
-								id="nostrRelay"
-								label={$_('section.settings.nostrRelay')}
-								bind:value={$settings.nostrRelay}
-								required={true}
-								valid={validNostrRelay}
-								size={$uiSettings.inputSize}
-							>
-								<Button type="button" color="success" on:click={testNostrRelay}
-									>{$_('test', { default: 'Test' })}</Button
-								>
-							</SettingsInput>
-						{/if}
-						<Row>
-							{#if 'bitaxeEnabled' in $settings}
-								<SettingsSwitch
-									id="bitaxeEnabled"
-									bind:checked={$settings.bitaxeEnabled}
-									label="{$_('section.settings.bitaxeEnabled')} ({$_('restartRequired')})"
-									size={$uiSettings.inputSize}
-								/>
-							{/if}
-							{#if 'miningPoolStats' in $settings}
-								<SettingsSwitch
-									id="miningPoolStats"
-									bind:checked={$settings.miningPoolStats}
-									label="{$_('section.settings.miningPoolStats')} ({$_('restartRequired')})"
-									size={$uiSettings.inputSize}
-								/>
-							{/if}
-							{#if 'nostrZapNotify' in $settings}
-								<SettingsSwitch
-									id="nostrZapNotify"
-									bind:checked={$settings.nostrZapNotify}
-									label="{$_('section.settings.nostrZapNotify')} ({$_('restartRequired')})"
-									size={$uiSettings.inputSize}
-								/>
-								<SettingsSwitch
-									id="ledFlashOnZap"
-									bind:checked={$settings.ledFlashOnZap}
-									label={$_('section.settings.ledFlashOnZap')}
-									size={$uiSettings.inputSize}
-								/>
-								{#if $settings.hasFrontlight && !$settings.flDisable}
-									<SettingsSwitch
-										id="flFlashOnZap"
-										bind:checked={$settings.flFlashOnZap}
-										label={$_('section.settings.flFlashOnZap')}
-										size={$uiSettings.inputSize}
-									/>
-								{/if}
-							{/if}
-						</Row>
-					</ToggleHeader>
-				</Row><Row>
-					<ToggleHeader header={$_('section.settings.section.system')} isOpen={systemIsOpen}>
-						<SettingsInput
-							id="tzOffset"
-							label={$_('section.settings.timezoneOffset')}
-							bind:value={$settings.tzOffset}
-							type="number"
-							step="1"
-							required={true}
-							suffix={$_('time.minutes')}
-							helpText={$_('section.settings.tzOffsetHelpText')}
-							size={$uiSettings.inputSize}
-						>
-							<Button type="button" color="info" on:click={getTzOffsetFromSystem}
-								>{$_('auto-detect')}</Button
-							>
-						</SettingsInput>
-
-						{#if $settings.httpAuthEnabled}
-							<SettingsInput
-								id="httpAuthUser"
-								label={$_('section.settings.httpAuthUser')}
-								bind:value={$settings.httpAuthUser}
-								required={true}
-								size={$uiSettings.inputSize}
-							/>
-							<SettingsInput
-								id="httpAuthPass"
-								label={$_('section.settings.httpAuthPass')}
-								bind:value={$settings.httpAuthPass}
-								type={showPassword ? 'text' : 'password'}
-								required={true}
-								size={$uiSettings.inputSize}
-							>
-								<Button
-									type="button"
-									on:click={() => (showPassword = !showPassword)}
-									color={showPassword ? 'success' : 'danger'}
-								>
-									{#if !showPassword}<EyeIcon />{:else}<EyeSlashIcon />{/if}
-								</Button>
-							</SettingsInput>
-						{/if}
-
-						<SettingsInput
-							id="hostnamePrefix"
-							label={$_('section.settings.hostnamePrefix')}
-							bind:value={$settings.hostnamePrefix}
-							required={true}
-							minlength="1"
-							size={$uiSettings.inputSize}
-						/>
-
-						<SettingsSelect
-							id="wifiTxPower"
-							label={$_('section.settings.wifiTxPower', { default: 'WiFi Tx Power' })}
-							bind:value={$settings.txPower}
-							options={Array.from(wifiTxPowerMap.entries())}
-							size={$uiSettings.inputSize}
-							selectClass={$uiSettings.selectClass}
-							helpText={$_('section.settings.wifiTxPowerText')}
-						/>
-
-						<SettingsInput
-							id="wpTimeout"
-							label={$_('section.settings.wpTimeout')}
-							bind:value={$settings.wpTimeout}
-							type="number"
-							min={1}
-							step="1"
-							required={true}
-							suffix={$_('time.seconds')}
-							size={$uiSettings.inputSize}
-						/>
-
-						<Row>
-							<SettingsSwitch
-								id="otaEnabled"
-								bind:checked={$settings.otaEnabled}
-								label="{$_('section.settings.otaUpdates')} ({$_('restartRequired')})"
-								size={$uiSettings.inputSize}
-							/>
-							<SettingsSwitch
-								id="mdnsEnabled"
-								bind:checked={$settings.mdnsEnabled}
-								label="{$_('section.settings.enableMdns')} ({$_('restartRequired')})"
-								size={$uiSettings.inputSize}
-							/>
-							<SettingsSwitch
-								id="httpAuthEnabled"
-								bind:checked={$settings.httpAuthEnabled}
-								label="{$_('section.settings.httpAuthEnabled')} ({$_('restartRequired')})"
-								size={$uiSettings.inputSize}
-							/>
-						</Row>
-					</ToggleHeader>
-				</Row>
-
-				<Row>
-					<Col class="d-flex justify-content-end">
-						<Button on:click={handleReset} color="secondary">{$_('button.reset')}</Button>
-						<div class="mx-2"></div>
-						<Button color="primary">{$_('button.save')}</Button>
+				<Row class="mt-4">
+					<Col>
+						<Button type="submit" color="primary" class="me-2">
+							{$_('button.save')}
+						</Button>
+						<Button type="button" color="secondary" on:click={handleReset}>
+							{$_('button.reset')}
+						</Button>
 					</Col>
 				</Row>
 			</Form>
diff --git a/src/routes/Status.svelte b/src/routes/Status.svelte
index 812ee68..678a23a 100644
--- a/src/routes/Status.svelte
+++ b/src/routes/Status.svelte
@@ -17,6 +17,7 @@
 		Row
 	} from '@sveltestrap/sveltestrap';
 	import Rendered from './Rendered.svelte';
+	import { DataSourceType } from '$lib/types/dataSource';
 
 	export let settings;
 	export let status: writable<object>;
@@ -74,7 +75,7 @@
 	});
 
 	settings.subscribe((value: object) => {
-		lightMode = value.bgColor > value.fgColor;
+		lightMode = !value.invertedColor;
 
 		if (value.screens) buttonChunks = chunkArray(value.screens, 5);
 	});
@@ -218,7 +219,7 @@
 			{$_('section.status.uptime')}: {toUptimestring($status.espUptime)}
 			<br />
 			<p>
-				{#if $settings.useNostr || $settings.nostrZapNotify}
+				{#if $settings.dataSource == DataSourceType.NOSTR_SOURCE || $settings.nostrZapNotify}
 					{$_('section.status.nostrConnection')}:
 					<span>
 						{#if $status.connectionStatus && $status.connectionStatus.nostr}
@@ -228,8 +229,8 @@
 						{/if}
 					</span>
 				{/if}
-				{#if !$settings.useNostr}
-					{#if !$settings.ownDataSource}
+				{#if $settings.dataSource != DataSourceType.NOSTR_SOURCE}
+					{#if $settings.dataSource == DataSourceType.THIRD_PARTY_SOURCE}
 						{$_('section.status.wsPriceConnection')}:
 						<span>
 							{#if $status.connectionStatus && $status.connectionStatus.price}