diff --git a/web/src/config/colors/light.js b/web/src/config/colors/light.js
index 38f7fd13ca..0df99ef413 100644
--- a/web/src/config/colors/light.js
+++ b/web/src/config/colors/light.js
@@ -4,7 +4,7 @@ const options = { safe: true, delimiter: '_' };
 export const nestedColors = {
 	base: {
 		background: '#f8f8f8',
-		'top-bar-navigation': '#f3f3f3',
+		'top-bar-navigation': '#000000',
 		'secondary-navigation-bar': '#e9e9e9',
 		'wallet-sidebar-and-popup': '#f8f8f8',
 		footer: '#000000',
diff --git a/web/src/containers/OperatorControls/_OperatorControls.scss b/web/src/containers/OperatorControls/_OperatorControls.scss
index c12b7abacb..46ef1db4c8 100644
--- a/web/src/containers/OperatorControls/_OperatorControls.scss
+++ b/web/src/containers/OperatorControls/_OperatorControls.scss
@@ -226,6 +226,12 @@ $operator-controls__panel-border-color: #a7a7a7;
 		}
 	}
 
+	&.add-theme {
+		.ReactModal__Content {
+			width: 532px !important;
+		}
+	}
+
 	.ReactModal__Overlay {
 		position: fixed;
 		z-index: 10001 !important;
@@ -296,3 +302,13 @@ $operator-controls__panel-border-color: #a7a7a7;
 		border: none !important;
 	}
 }
+
+.operator-button_underline {
+	&.ant-btn > span {
+		text-decoration: underline;
+	}
+	&.ant-btn-link {
+		padding: 4px 8px;
+		color: white;
+	}
+}
diff --git a/web/src/containers/OperatorControls/components/AddTheme.js b/web/src/containers/OperatorControls/components/AddTheme.js
index e61ab07f3f..fa2aceb439 100644
--- a/web/src/containers/OperatorControls/components/AddTheme.js
+++ b/web/src/containers/OperatorControls/components/AddTheme.js
@@ -1,11 +1,17 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import Modal from 'components/Dialog/DesktopDialog';
 import { bool, object, func, string } from 'prop-types';
 import { Input, Button, Radio, Divider, Collapse, Tooltip } from 'antd';
-import { UndoOutlined, BgColorsOutlined } from '@ant-design/icons';
-import initialTheme, {
+import {
+	UndoOutlined,
+	BgColorsOutlined,
+	CaretDownOutlined,
+} from '@ant-design/icons';
+import Color from 'color';
+import initialLightTheme, {
 	nestedColors as nestedStructure,
 } from 'config/colors/light';
+import initialDarkTheme from 'config/colors/dark';
 import systemThemes from 'config/colors';
 import {
 	getColorByKey,
@@ -25,15 +31,18 @@ class AddTheme extends Component {
 		const { themes, selectedTheme: themeKey = '' } = this.props;
 		const isEditTheme = !!themeKey;
 		const theme =
-			themeKey && themes[themeKey] ? themes[themeKey] : initialTheme;
+			themeKey && themes[themeKey] ? themes[themeKey] : initialLightTheme;
 		const filteredTheme = filterTheme(theme);
 		const baseRatios = CALCULATED_COLOR_RATIO_OBJECT;
+		const isSingleBase = !isEditTheme;
 
 		this.state = {
 			isEditTheme,
+			upstreamSelected: isEditTheme,
+			upstreamTheme: 'white',
 			themeKey,
 			theme: filteredTheme,
-			isSingleBase: false,
+			isSingleBase,
 			isDarken: true,
 			baseRatios,
 		};
@@ -111,7 +120,12 @@ class AddTheme extends Component {
 	};
 
 	onReset = (name) => {
-		const value = getColorByKey(name);
+		const { theme } = this.state;
+		const baseColor = theme['base_background'];
+		const upstreamTheme = Color(baseColor).isLight()
+			? initialLightTheme
+			: initialDarkTheme;
+		const value = getColorByKey(name, upstreamTheme);
 		this.updateTheme(value, name);
 	};
 
@@ -130,11 +144,11 @@ class AddTheme extends Component {
 		}
 	};
 
-	handleColorMode = ({ target: { value } }) => {
-		this.setState({
-			isDarken: value,
-		});
-	};
+	// handleColorMode = ({ target: { value } }) => {
+	// 	this.setState({
+	// 		isDarken: value,
+	// 	});
+	// };
 
 	validateRatio = (value) => {
 		return value >= 0 && value <= 1;
@@ -167,6 +181,24 @@ class AddTheme extends Component {
 		return Object.keys(systemThemes).includes(themeKey);
 	};
 
+	handleUpstreamTheme = ({ target: { value } }) => {
+		this.setState({
+			upstreamTheme: value,
+		});
+	};
+
+	next = () => {
+		const { upstreamTheme } = this.state;
+
+		if (upstreamTheme) {
+			const upstreamThemeObject = systemThemes[upstreamTheme];
+			this.setState({
+				theme: upstreamThemeObject,
+				upstreamSelected: true,
+			});
+		}
+	};
+
 	render() {
 		const { isOpen, onCloseDialog } = this.props;
 		const {
@@ -175,14 +207,16 @@ class AddTheme extends Component {
 			theme,
 			isSingleBase,
 			baseRatios,
-			isDarken,
+			// isDarken,
+			upstreamTheme,
+			upstreamSelected,
 		} = this.state;
 
 		return (
 			<Modal
 				isOpen={isOpen}
 				label="operator-controls-modal"
-				className="operator-controls__modal"
+				className="operator-controls__modal add-theme"
 				disableTheme={true}
 				onCloseDialog={() => onCloseDialog(true)}
 				shouldCloseOnOverlayClick={true}
@@ -194,162 +228,237 @@ class AddTheme extends Component {
 						{`${isEditTheme ? 'Edit' : 'Add'} theme`}
 					</div>
 				</div>
-				<div className="my-4 d-flex align-center">
-					<div className="bold mr-4">Theme:</div>
-					<Input
-						disabled={isEditTheme}
-						type="text"
-						name="theme-key"
-						placeholder="Please enter a theme name"
-						className="operator-controls__input mr-2"
-						value={themeKey}
-						onChange={this.handleThemeKey}
-					/>
-					<Button
-						ghost
-						shape="circle"
-						size="small"
-						className="operator-controls__all-strings-settings-button"
-						disabled={!this.isSystemDefined()}
-						onClick={this.resetTheme}
-						icon={<UndoOutlined />}
-					/>
-				</div>
-				<div className="mb-5">
-					<Group onChange={this.handleBaseMode} value={isSingleBase}>
-						<Radio value={false}>
-							<Tooltip
-								overlayStyle={{ zIndex: 10001 }}
-								title="Edit multiple colors in the theme separately"
-							>
-								Use separated base
-							</Tooltip>
-						</Radio>
-						<Radio value={true}>
-							<Tooltip
-								overlayStyle={{ zIndex: 10001 }}
-								title="Easily edit the whole theme through a single base background color"
-							>
-								Use single base
-							</Tooltip>
-						</Radio>
-					</Group>
-					{isSingleBase && (
-						<div className="pl-5">
-							<Group onChange={this.handleColorMode} value={isDarken}>
-								<Radio value={true}>Darken</Radio>
-								<Radio value={false}>Lighten</Radio>
+				{!upstreamSelected && (
+					<Fragment>
+						<div className="my-4">
+							Select the base color type. This can be directly edited later in
+							the separated base color settings.
+						</div>
+						<div className="mb-4">
+							<Group onChange={this.handleUpstreamTheme} value={upstreamTheme}>
+								<Radio value="white">Light based theme</Radio>
+								<Radio value="dark">Dark based theme</Radio>
+							</Group>
+						</div>
+					</Fragment>
+				)}
+				{upstreamSelected && (
+					<Fragment>
+						<div className="my-4 d-flex align-center">
+							<div className="bold mr-4">Theme:</div>
+							<Input
+								disabled={isEditTheme}
+								type="text"
+								name="theme-key"
+								placeholder="Please enter a theme name"
+								className="operator-controls__input mr-2"
+								value={themeKey}
+								onChange={this.handleThemeKey}
+							/>
+							<Button
+								ghost
+								shape="circle"
+								size="small"
+								className="operator-controls__all-strings-settings-button"
+								disabled={!this.isSystemDefined()}
+								onClick={this.resetTheme}
+								icon={<UndoOutlined />}
+							/>
+						</div>
+						<div className="mb-5">
+							<Group onChange={this.handleBaseMode} value={isSingleBase}>
+								<Radio value={false}>
+									<Tooltip
+										overlayStyle={{ zIndex: 10001 }}
+										title="Edit multiple colors in the theme separately"
+									>
+										Use separated base
+									</Tooltip>
+								</Radio>
+								<Radio value={true}>
+									<Tooltip
+										overlayStyle={{ zIndex: 10001 }}
+										title="Easily edit the whole theme through a single base background color"
+									>
+										Use single base
+									</Tooltip>
+								</Radio>
 							</Group>
+							{/*{isSingleBase && (*/}
+							{/*<div className="pl-5">*/}
+							{/*<Group onChange={this.handleColorMode} value={isDarken}>*/}
+							{/*<Radio value={true}>Darken</Radio>*/}
+							{/*<Radio value={false}>Lighten</Radio>*/}
+							{/*</Group>*/}
+							{/*</div>*/}
+							{/*)}*/}
+						</div>
+						<div>
+							{Object.entries(nestedStructure)
+								.filter(
+									([clusterKey, clusterObj]) =>
+										!isSingleBase || clusterKey === 'base'
+								)
+								.map(([clusterKey, clusterObj]) => {
+									const renderCollapse = clusterKey === 'base' && isSingleBase;
+
+									return (
+										<div className="pb-4" key={clusterKey}>
+											<Divider orientation="left">
+												<span className="caps">
+													<BgColorsOutlined /> {clusterKey}
+												</span>
+											</Divider>
+											{renderCollapse ? (
+												<Collapse
+													defaultActiveKey={['1']}
+													bordered={false}
+													ghost
+												>
+													<Collapse.Panel
+														showArrow={false}
+														key="1"
+														disabled={true}
+													>
+														{Object.keys(clusterObj)
+															.filter(
+																(localColorKey) =>
+																	localColorKey === 'background'
+															)
+															.map((localColorKey) => {
+																const colorKey = `${clusterKey}_${localColorKey}`;
+																const isCalculated = this.isCalculated(
+																	colorKey
+																);
+																const colorValue = isCalculated
+																	? baseRatios[colorKey]
+																	: theme[colorKey];
+
+																return (
+																	<ColorInput
+																		colorKey={colorKey}
+																		isCalculated={isCalculated}
+																		colorValue={colorValue}
+																		pickerHandler={this.pickerHandler}
+																		onReset={this.onReset}
+																		validateColor={this.validateColor}
+																		onChange={this.handleInputChange}
+																	/>
+																);
+															})}
+													</Collapse.Panel>
+													<Collapse.Panel
+														showArrow={false}
+														header={
+															<span>
+																<CaretDownOutlined /> Modify theme breakdown
+															</span>
+														}
+														key="2"
+													>
+														{Object.keys(clusterObj)
+															.filter(
+																(localColorKey) =>
+																	localColorKey !== 'background'
+															)
+															.map((localColorKey) => {
+																const colorKey = `${clusterKey}_${localColorKey}`;
+																const isCalculated = this.isCalculated(
+																	colorKey
+																);
+																const colorValue = isCalculated
+																	? baseRatios[colorKey]
+																	: theme[colorKey];
+
+																return (
+																	<ColorInput
+																		colorKey={colorKey}
+																		isCalculated={isCalculated}
+																		colorValue={colorValue}
+																		pickerHandler={this.pickerHandler}
+																		onReset={this.onReset}
+																		validateColor={this.validateColor}
+																		onChange={this.handleInputChange}
+																	/>
+																);
+															})}
+														{isSingleBase && (
+															<div className="pt-3">
+																<span>
+																	To edit more colors directly try switching to
+																	the
+																</span>
+																<Button
+																	type="link"
+																	value={false}
+																	className="operator-button_underline"
+																	onClick={() =>
+																		this.setState({
+																			isSingleBase: false,
+																		})
+																	}
+																>
+																	separated base color
+																</Button>
+																<span>configuration</span>
+															</div>
+														)}
+													</Collapse.Panel>
+												</Collapse>
+											) : (
+												<div className="pt-2">
+													{Object.keys(clusterObj).map((localColorKey) => {
+														const colorKey = `${clusterKey}_${localColorKey}`;
+														const isCalculated = this.isCalculated(colorKey);
+														const colorValue = isCalculated
+															? baseRatios[colorKey]
+															: theme[colorKey];
+
+														return (
+															<ColorInput
+																colorKey={colorKey}
+																isCalculated={isCalculated}
+																colorValue={colorValue}
+																pickerHandler={this.pickerHandler}
+																onReset={this.onReset}
+																validateColor={this.validateColor}
+																onChange={this.handleInputChange}
+															/>
+														);
+													})}
+												</div>
+											)}
+										</div>
+									);
+								})}
 						</div>
+					</Fragment>
+				)}
+				<div className="pt-3">
+					{upstreamSelected ? (
+						<Button
+							block
+							type="primary"
+							size="large"
+							className="operator-controls__save-button"
+							disabled={this.isSaveDisabled()}
+							onClick={this.addTheme}
+						>
+							Save
+						</Button>
+					) : (
+						<Button
+							block
+							type="primary"
+							size="large"
+							className="operator-controls__save-button"
+							disabled={!upstreamTheme}
+							onClick={this.next}
+						>
+							Next
+						</Button>
 					)}
 				</div>
-				<div>
-					{Object.entries(nestedStructure).map(([clusterKey, clusterObj]) => {
-						const renderCollapse = clusterKey === 'base' && isSingleBase;
-
-						return (
-							<div className="pb-4" key={clusterKey}>
-								<Divider orientation="left">
-									<span className="caps">
-										<BgColorsOutlined /> {clusterKey}
-									</span>
-								</Divider>
-								{renderCollapse ? (
-									<Collapse defaultActiveKey={['1']} bordered={false} ghost>
-										<Collapse.Panel showArrow={false} key="1" disabled={true}>
-											{Object.keys(clusterObj)
-												.filter(
-													(localColorKey) => localColorKey === 'background'
-												)
-												.map((localColorKey) => {
-													const colorKey = `${clusterKey}_${localColorKey}`;
-													const isCalculated = this.isCalculated(colorKey);
-													const colorValue = isCalculated
-														? baseRatios[colorKey]
-														: theme[colorKey];
-
-													return (
-														<ColorInput
-															colorKey={colorKey}
-															isCalculated={isCalculated}
-															colorValue={colorValue}
-															pickerHandler={this.pickerHandler}
-															onReset={this.onReset}
-															validateColor={this.validateColor}
-															onChange={this.handleInputChange}
-														/>
-													);
-												})}
-										</Collapse.Panel>
-										<Collapse.Panel
-											showArrow={false}
-											header="Modify theme breakdown"
-											key="2"
-										>
-											{Object.keys(clusterObj)
-												.filter(
-													(localColorKey) => localColorKey !== 'background'
-												)
-												.map((localColorKey) => {
-													const colorKey = `${clusterKey}_${localColorKey}`;
-													const isCalculated = this.isCalculated(colorKey);
-													const colorValue = isCalculated
-														? baseRatios[colorKey]
-														: theme[colorKey];
-
-													return (
-														<ColorInput
-															colorKey={colorKey}
-															isCalculated={isCalculated}
-															colorValue={colorValue}
-															pickerHandler={this.pickerHandler}
-															onReset={this.onReset}
-															validateColor={this.validateColor}
-															onChange={this.handleInputChange}
-														/>
-													);
-												})}
-										</Collapse.Panel>
-									</Collapse>
-								) : (
-									<div className="pt-2">
-										{Object.keys(clusterObj).map((localColorKey) => {
-											const colorKey = `${clusterKey}_${localColorKey}`;
-											const isCalculated = this.isCalculated(colorKey);
-											const colorValue = isCalculated
-												? baseRatios[colorKey]
-												: theme[colorKey];
-
-											return (
-												<ColorInput
-													colorKey={colorKey}
-													isCalculated={isCalculated}
-													colorValue={colorValue}
-													pickerHandler={this.pickerHandler}
-													onReset={this.onReset}
-													validateColor={this.validateColor}
-													onChange={this.handleInputChange}
-												/>
-											);
-										})}
-									</div>
-								)}
-							</div>
-						);
-					})}
-				</div>
-				<div className="pt-4">
-					<Button
-						block
-						type="primary"
-						size="large"
-						className="operator-controls__save-button"
-						disabled={this.isSaveDisabled()}
-						onClick={this.addTheme}
-					>
-						Save
-					</Button>
-				</div>
 			</Modal>
 		);
 	}
diff --git a/web/src/containers/OperatorControls/components/ColorInput.js b/web/src/containers/OperatorControls/components/ColorInput.js
index c2848ba660..9a2e560e78 100644
--- a/web/src/containers/OperatorControls/components/ColorInput.js
+++ b/web/src/containers/OperatorControls/components/ColorInput.js
@@ -19,7 +19,7 @@ const ColorInput = ({
 			key={colorKey}
 		>
 			<div className="bold">{colorKey.split('_')[1].replace(/-/g, ' ')}</div>
-			<div className="d-flex align-items-center">
+			<div className="d-flex align-items-center pl-2">
 				{!isCalculated && (
 					<ColorPicker
 						color={colorValue}
diff --git a/web/src/index.css b/web/src/index.css
index 0112c40e13..5f8229130f 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -3527,6 +3527,9 @@ table th {
 .operator-controls__modal.extended .ReactModal__Content {
   height: calc(100vh - 160px) !important; }
 
+.operator-controls__modal.add-theme .ReactModal__Content {
+  width: 532px !important; }
+
 .operator-controls__modal .ReactModal__Overlay {
   position: fixed;
   z-index: 10001 !important;
@@ -3579,6 +3582,13 @@ table th {
 .operator-controls__table tbody > tr > td {
   border: none !important; }
 
+.operator-button_underline.ant-btn > span {
+  text-decoration: underline; }
+
+.operator-button_underline.ant-btn-link {
+  padding: 4px 8px;
+  color: white; }
+
 .init-container {
   flex: 1;
   height: 100%; }
diff --git a/web/src/utils/color.js b/web/src/utils/color.js
index fdc8b7d23c..f6f7d12dd2 100644
--- a/web/src/utils/color.js
+++ b/web/src/utils/color.js
@@ -155,10 +155,10 @@ export const filterTheme = (theme) => {
 };
 
 export const CALCULATED_COLOR_RATIO_OBJECT = {
-	'base_top-bar-navigation': 0.7,
-	'base_secondary-navigation-bar': 0.5,
-	'base_wallet-sidebar-and-popup': 0.3,
-	base_footer: 0.6,
+	'base_top-bar-navigation': 1,
+	'base_secondary-navigation-bar': 0.1,
+	'base_wallet-sidebar-and-popup': 0,
+	base_footer: 1,
 };
 
 export const CALCULATED_COLOR_KEYS = Object.keys(CALCULATED_COLOR_RATIO_OBJECT);