From b64313470ea9b07e52ff79ccfa6610ebf0603ccc Mon Sep 17 00:00:00 2001
From: abaicus <baicusandrei@me.com>
Date: Wed, 15 Jan 2025 17:48:15 +0200
Subject: [PATCH] feat: new backend dashboard [wip][ref
 Codeinwp/neve-pro-addon#2914]

---
 .github/workflows/playwright.yml              |   4 +-
 assets/apps/dashboard/src/Components/App.js   |  36 +-
 .../dashboard/src/Components/Common/Button.js |   8 +-
 .../src/Components/Common/Multiselect.js      | 122 +++++++
 .../src/Components/Common/Notification.js     |   2 +-
 .../dashboard/src/Components/Common/Pill.js   |   2 +-
 .../dashboard/src/Components/Common/Select.js |  92 ++++++
 .../src/Components/Common/TextInput.js        |  52 +++
 .../src/Components/{ => Common}/Toast.js      |  18 +-
 .../dashboard/src/Components/Common/Toggle.js |  56 +++-
 .../Components/Common/TransitionWrapper.js    |  43 +++
 .../src/Components/Content/Changelog.js       |   5 +-
 .../src/Components/Content/FreePro.js         |  49 +--
 .../src/Components/Content/ModuleGrid.js      | 162 ++++++++-
 .../Content/ModuleGridPlaceholder.js          |  62 ----
 .../dashboard/src/Components/Content/Pro.js   |  23 --
 .../src/Components/Content/Settings.js        | 139 ++++++++
 .../Content/Settings/AccessRestriction.js     | 195 +++++++++++
 .../Content/Settings/GeneralTabContent.js     | 154 +++++++++
 .../Settings/ManageModulesTabContent.js       |   5 +
 .../Content/Settings/OptionGroup.js           | 123 +++++++
 .../Content/Settings/PerformanceTabContent.js | 100 ++++++
 .../Content/Settings/WhiteLabelTabContent.js  | 310 ++++++++++++++++++
 .../{ => Content/Sidebar}/LicenseCard.js      |  30 +-
 .../{ => Content/Sidebar}/PluginsCard.js      |  15 +-
 .../{ => Content/Sidebar}/Sidebar.js          |  55 ++--
 .../{ => Content/Sidebar}/SupportCard.js      |   4 +-
 .../Content/StarterSitesUnavailable.js        |  76 +++--
 .../src/Components/Content/Welcome.js         |  33 +-
 .../src/Components/Controls/ControlWrap.js    |  52 +++
 .../Components/Controls/MultiselectControl.js |  80 +++++
 .../src/Components/Controls/SelectControl.js  |  66 ++++
 .../src/Components/Controls/TextControl.js    |  90 +++++
 .../src/Components/Controls/ToggleControl.js  |  76 +++++
 .../apps/dashboard/src/Components/Header.js   | 104 +++---
 .../dashboard/src/Components/Notifications.js |  14 +-
 .../dashboard/src/Components/PluginCard.js    | 179 ----------
 .../{Loading.js => SkeletonLoader.js}         |   8 +-
 .../apps/dashboard/src/Components/Snackbar.js |  77 +++--
 .../dashboard/src/Components/TabsContent.js   |   7 -
 .../dashboard/src/Hooks/useLicenseData.js     |  19 ++
 assets/apps/dashboard/src/Layout/Container.js |   2 +-
 assets/apps/dashboard/src/store/reducer.js    |   1 -
 assets/apps/dashboard/src/tailwind.config.js  |   1 -
 assets/apps/dashboard/src/utils/common.js     |  35 +-
 assets/apps/dashboard/src/utils/constants.js  |  18 +-
 assets/apps/dashboard/src/utils/rest.js       |   9 +-
 inc/admin/dashboard/main.php                  |  18 +-
 48 files changed, 2239 insertions(+), 592 deletions(-)
 create mode 100644 assets/apps/dashboard/src/Components/Common/Multiselect.js
 create mode 100644 assets/apps/dashboard/src/Components/Common/Select.js
 create mode 100644 assets/apps/dashboard/src/Components/Common/TextInput.js
 rename assets/apps/dashboard/src/Components/{ => Common}/Toast.js (71%)
 create mode 100644 assets/apps/dashboard/src/Components/Common/TransitionWrapper.js
 delete mode 100644 assets/apps/dashboard/src/Components/Content/ModuleGridPlaceholder.js
 delete mode 100644 assets/apps/dashboard/src/Components/Content/Pro.js
 create mode 100644 assets/apps/dashboard/src/Components/Content/Settings.js
 create mode 100644 assets/apps/dashboard/src/Components/Content/Settings/AccessRestriction.js
 create mode 100644 assets/apps/dashboard/src/Components/Content/Settings/GeneralTabContent.js
 create mode 100644 assets/apps/dashboard/src/Components/Content/Settings/ManageModulesTabContent.js
 create mode 100644 assets/apps/dashboard/src/Components/Content/Settings/OptionGroup.js
 create mode 100644 assets/apps/dashboard/src/Components/Content/Settings/PerformanceTabContent.js
 create mode 100644 assets/apps/dashboard/src/Components/Content/Settings/WhiteLabelTabContent.js
 rename assets/apps/dashboard/src/Components/{ => Content/Sidebar}/LicenseCard.js (85%)
 rename assets/apps/dashboard/src/Components/{ => Content/Sidebar}/PluginsCard.js (89%)
 rename assets/apps/dashboard/src/Components/{ => Content/Sidebar}/Sidebar.js (68%)
 rename assets/apps/dashboard/src/Components/{ => Content/Sidebar}/SupportCard.js (88%)
 create mode 100644 assets/apps/dashboard/src/Components/Controls/ControlWrap.js
 create mode 100644 assets/apps/dashboard/src/Components/Controls/MultiselectControl.js
 create mode 100644 assets/apps/dashboard/src/Components/Controls/SelectControl.js
 create mode 100644 assets/apps/dashboard/src/Components/Controls/TextControl.js
 create mode 100644 assets/apps/dashboard/src/Components/Controls/ToggleControl.js
 delete mode 100644 assets/apps/dashboard/src/Components/PluginCard.js
 rename assets/apps/dashboard/src/Components/{Loading.js => SkeletonLoader.js} (94%)
 delete mode 100644 assets/apps/dashboard/src/Components/TabsContent.js
 create mode 100644 assets/apps/dashboard/src/Hooks/useLicenseData.js

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index c0c31e96cc..60a282ee2e 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -27,7 +27,7 @@ jobs:
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -39,7 +39,7 @@ jobs:
         run: |
           echo "::set-output name=dir::$(composer config cache-files-dir)"
       - name: Configure Composer cache
-        uses: actions/cache@v1
+        uses: actions/cache@v3
         with:
           path: ${{ steps.composer-cache.outputs.dir }}
           key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
diff --git a/assets/apps/dashboard/src/Components/App.js b/assets/apps/dashboard/src/Components/App.js
index 2bd5178632..e64ca42f4f 100644
--- a/assets/apps/dashboard/src/Components/App.js
+++ b/assets/apps/dashboard/src/Components/App.js
@@ -1,25 +1,25 @@
+import Container from '../Layout/Container';
+import { fetchOptions } from '../utils/rest';
+import Sidebar from './Content/Sidebar/Sidebar';
 import Header from './Header';
 import Notifications from './Notifications';
-import TabsContent from './TabsContent';
-import Sidebar from './Sidebar';
-import Loading from './Loading';
+import SkeletonLoader from './SkeletonLoader';
 import Snackbar from './Snackbar';
-import Container from '../Layout/Container';
-import { fetchOptions } from '../utils/rest';
 
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
-import Deal from './Deal';
+import { useEffect, useState } from '@wordpress/element';
+import { tabs } from '../utils/common';
+import { TransitionWrapper } from './Common/TransitionWrapper';
+import { NEVE_STORE } from '../utils/constants';
 
 const App = () => {
 	const [loading, setLoading] = useState(true);
 
-	const { setSettings, setTab } = useDispatch('neve-dashboard');
+	const { setSettings, setTab } = useDispatch(NEVE_STORE);
 
-	const { toast, currentTab } = useSelect((select) => {
-		const { getToast, getTab } = select('neve-dashboard');
+	const { currentTab } = useSelect((select) => {
+		const { getTab } = select(NEVE_STORE);
 		return {
-			toast: getToast(),
 			currentTab: getTab(),
 		};
 	});
@@ -32,7 +32,7 @@ const App = () => {
 	}, []);
 
 	if (loading) {
-		return <Loading />;
+		return <SkeletonLoader />;
 	}
 	return (
 		<div className="antialiased grow flex flex-col gap-6 h-full">
@@ -42,18 +42,16 @@ const App = () => {
 			{'starter-sites' !== currentTab && <Notifications />}
 
 			<Container className="flex flex-col lg:flex-row gap-6 h-full grow">
-				<div className="grow">
-					<TabsContent currentTab={currentTab} setTab={setTab} />
-				</div>
+				<div className="grow">{tabs[currentTab].render(setTab)}</div>
 
-				{'starter-sites' !== currentTab && (
-					<div className="shrink-0 lg:w-[435px]">
+				{!['starter-sites', 'settings'].includes(currentTab) && (
+					<TransitionWrapper className="shrink-0 lg:w-[435px]">
 						<Sidebar />
-					</div>
+					</TransitionWrapper>
 				)}
 			</Container>
 
-			{toast && <Snackbar />}
+			<Snackbar />
 		</div>
 	);
 };
diff --git a/assets/apps/dashboard/src/Components/Common/Button.js b/assets/apps/dashboard/src/Components/Common/Button.js
index cd06b52110..414c35cb46 100644
--- a/assets/apps/dashboard/src/Components/Common/Button.js
+++ b/assets/apps/dashboard/src/Components/Common/Button.js
@@ -6,7 +6,7 @@ const Button = (props) => {
 	const {
 		href,
 		onClick,
-		className,
+		className = '',
 		isSubmit,
 		isPrimary,
 		isSecondary,
@@ -17,20 +17,22 @@ const Button = (props) => {
 	} = props;
 
 	const classNames = cn([
-		'flex items-center px-3 py-2 transition-colors duration-150 rounded text-sm border gap-2',
+		'flex items-center px-3 py-2 transition-colors duration-150 text-sm border gap-2',
 		{
+			rounded: !className.includes('rounded'),
 			'border-transparent bg-blue-600 text-white hover:bg-blue-700 hover:text-white':
 				isPrimary,
 			'border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white':
 				isSecondary,
 			'border-transparent text-gray-600 hover:text-gray-900': isLink,
-			'cursor-not-allowed opacity-50 pointer-events-none': disabled,
+			'cursor-not-allowed opacity-50': disabled,
 		},
 		className,
 	]);
 
 	const passedProps = {
 		className: classNames,
+		disabled,
 		onClick,
 	};
 
diff --git a/assets/apps/dashboard/src/Components/Common/Multiselect.js b/assets/apps/dashboard/src/Components/Common/Multiselect.js
new file mode 100644
index 0000000000..ea4c9582da
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Multiselect.js
@@ -0,0 +1,122 @@
+import { useRef, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import cn from 'classnames';
+import { Check, ChevronDown } from 'lucide-react';
+import { useEffect } from 'react';
+const MultiSelect = ({ value, label, disabled, choices = {}, onChange }) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const dropdownRef = useRef(null);
+
+	const closeDropdown = (e) => {
+		if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+			setIsOpen(false);
+		}
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			document.addEventListener('click', closeDropdown);
+		} else {
+			document.removeEventListener('click', closeDropdown);
+		}
+
+		return () => {
+			document.removeEventListener('click', closeDropdown);
+		};
+	}, [isOpen]);
+
+	const handleChange = (optionValue) => {
+		const nextValues = value.includes(optionValue)
+			? value.filter((v) => v !== optionValue)
+			: [...value, optionValue];
+		onChange(nextValues);
+	};
+
+	return (
+		<div className="grid gap-1">
+			{label && (
+				<span className="text-sm text-gray-600 font-medium">
+					{label}
+				</span>
+			)}
+			<div className="relative">
+				<button
+					onClick={() => !disabled && setIsOpen(!isOpen)}
+					className={cn(
+						'relative w-full py-1.5 px-2 text-sm rounded border flex items-center gap-3 min-w-[200px]',
+						'border-gray-300 hover:border-gray-500',
+						{
+							'bg-gray-100': disabled,
+						}
+					)}
+					disabled={disabled}
+				>
+					<div className="flex flex-wrap gap-1 max-w-[160px] overflow-hidden">
+						{Object.entries(value).length === 0 ? (
+							<span className="text-gray-500">
+								{__('Select options', 'neve')}...
+							</span>
+						) : (
+							value.map((choice, index) => {
+								if (!choices[choice]) {
+									return null;
+								}
+
+								return (
+									<span
+										key={index}
+										className="inline-flex items-center gap-1 bg-blue-100 text-blue-800 rounded px-2 py-0.5 text-xs"
+									>
+										{choices[choice]}
+									</span>
+								);
+							})
+						)}
+					</div>
+
+					<ChevronDown
+						size={18}
+						className={`ml-auto transition-transform ${
+							isOpen ? 'transform rotate-180' : ''
+						}`}
+						aria-hidden="true"
+					/>
+				</button>
+
+				{isOpen && (
+					<div
+						ref={dropdownRef}
+						className="absolute z-10 w-full mt-1 bg-white border rounded shadow-lg"
+					>
+						<div className="max-h-60 overflow-y-auto p-1">
+							{Object.entries(choices).map(
+								([optionValue, optionLabel]) => (
+									<button
+										key={optionValue}
+										className="flex w-full items-center gap-2 text-sm rounded py-1.5 px-3 hover:bg-blue-100 hover:text-blue-700 cursor-pointer"
+										onClick={() =>
+											handleChange(optionValue)
+										}
+									>
+										<div className="w-4 h-4 border bg-white rounded flex items-center justify-center">
+											{value.includes(optionValue) && (
+												<Check
+													size={12}
+													className="text-blue-600"
+												/>
+											)}
+										</div>
+										{optionLabel}
+									</button>
+								)
+							)}
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default MultiSelect;
diff --git a/assets/apps/dashboard/src/Components/Common/Notification.js b/assets/apps/dashboard/src/Components/Common/Notification.js
index 27a7a8d28c..8811fe691a 100644
--- a/assets/apps/dashboard/src/Components/Common/Notification.js
+++ b/assets/apps/dashboard/src/Components/Common/Notification.js
@@ -15,7 +15,7 @@ import Tooltip from './Tooltip';
 import TransitionInOut from './TransitionInOut';
 import { useEffect } from 'react';
 
-const Notification = ({ data, slug }) => {
+const Notification = ({ data }) => {
 	const [hidden, setHidden] = useState(false);
 	const { text, cta, type, update, url, targetBlank } = data;
 	const { canInstallPlugins } = neveDash;
diff --git a/assets/apps/dashboard/src/Components/Common/Pill.js b/assets/apps/dashboard/src/Components/Common/Pill.js
index d732a7e1fd..6d4137c8c8 100644
--- a/assets/apps/dashboard/src/Components/Common/Pill.js
+++ b/assets/apps/dashboard/src/Components/Common/Pill.js
@@ -8,7 +8,7 @@ export default ({ children, type = 'primary', className }) => {
 	const typeClasses = {
 		primary: 'bg-blue-100 text-blue-700',
 		secondary: 'bg-gray-100 text-gray-700',
-		success: 'bg-green-100 text-green-700',
+		success: 'bg-lime-100 text-lime-700',
 		error: 'bg-red-100 text-red-700',
 		warning: 'bg-yellow-100 text-yellow-700',
 	};
diff --git a/assets/apps/dashboard/src/Components/Common/Select.js b/assets/apps/dashboard/src/Components/Common/Select.js
new file mode 100644
index 0000000000..9f3e3b7e00
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Select.js
@@ -0,0 +1,92 @@
+import cn from 'classnames';
+import { LoaderCircle, LucideChevronDown } from 'lucide-react';
+
+import {
+	Field,
+	Label,
+	Listbox,
+	ListboxButton,
+	ListboxOption,
+	ListboxOptions,
+} from '@headlessui/react';
+import { __ } from '@wordpress/i18n';
+
+export default ({
+	label,
+	value,
+	onChange,
+	disabled = false,
+	loading,
+	choices,
+}) => {
+	return (
+		<Field className="grid gap-1">
+			{label && (
+				<Label className="text-sm text-gray-600 font-medium">
+					{label}
+				</Label>
+			)}
+			<div className="flex items-center gap-3">
+				{loading && (
+					<LoaderCircle size={18} className="animate-spin shrink-0" />
+				)}
+				<Listbox
+					value={value}
+					onChange={onChange}
+					disabled={loading || disabled}
+				>
+					{({ open }) => (
+						<>
+							<ListboxButton
+								className={cn(
+									'relative w-full rounded py-1.5 px-2 text-left',
+									'rounded border border-gray-300 hover:border-gray-500',
+									'flex items-center gap-3 min-w-[200px]',
+									{
+										'bg-gray-100': disabled || loading,
+									}
+								)}
+							>
+								{choices[value] ||
+									__('Select an option', 'neve')}
+
+								<LucideChevronDown
+									size={18}
+									className={cn(
+										'ml-auto transition-transform',
+										{
+											'transform rotate-180': open,
+										}
+									)}
+									aria-hidden="true"
+								/>
+							</ListboxButton>
+
+							<ListboxOptions
+								anchor="bottom"
+								transition
+								className={cn(
+									'text-sm font-normal shadow-lg',
+									'rounded border bg-white p-1 my-1 min-w-[200px]',
+									'transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0 antialiased'
+								)}
+							>
+								{Object.entries(choices).map(
+									([optionValue, optionLabel]) => (
+										<ListboxOption
+											key={optionValue}
+											value={optionValue}
+											className="flex w-full items-center gap-2 text-sm rounded py-1.5 px-3 hover:bg-blue-100 hover:text-blue-700 data-[focus]:bg-blue-100 data-[focus]:text-blue-700 cursor-pointer"
+										>
+											{optionLabel}
+										</ListboxOption>
+									)
+								)}
+							</ListboxOptions>
+						</>
+					)}
+				</Listbox>
+			</div>
+		</Field>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Common/TextInput.js b/assets/apps/dashboard/src/Components/Common/TextInput.js
new file mode 100644
index 0000000000..6c178baa1a
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/TextInput.js
@@ -0,0 +1,52 @@
+import { Description, Field, Input, Label } from '@headlessui/react';
+import { Fragment } from '@wordpress/element';
+import cn from 'classnames';
+
+const TextInput = ({
+	value,
+	label,
+	disabled,
+	onChange,
+	name,
+	className = '',
+	type = 'text',
+	description,
+}) => {
+	let TagName = 'input';
+
+	if (type === 'textarea') {
+		TagName = 'textarea';
+	}
+
+	return (
+		<Field className="grid gap-1">
+			{label && (
+				<Label className="text-sm text-gray-600 font-medium">
+					{label}
+				</Label>
+			)}
+			{description && (
+				<Description className="text-xs text-gray-600">
+					{description}
+				</Description>
+			)}
+			<Input type={type} as={Fragment} name={name}>
+				<TagName
+					type={type}
+					value={value}
+					onChange={onChange}
+					disabled={disabled}
+					className={cn(
+						'block w-full px-3 !py-1 text-sm border rounded disabled:bg-gray-100 !border-gray-300 focus:!border-gray-500 focus:!shadow-none',
+						{
+							'cursor-not-allowed': disabled,
+						},
+						className
+					)}
+				/>
+			</Input>
+		</Field>
+	);
+};
+
+export default TextInput;
diff --git a/assets/apps/dashboard/src/Components/Toast.js b/assets/apps/dashboard/src/Components/Common/Toast.js
similarity index 71%
rename from assets/apps/dashboard/src/Components/Toast.js
rename to assets/apps/dashboard/src/Components/Common/Toast.js
index ca6851c000..009b11beab 100644
--- a/assets/apps/dashboard/src/Components/Toast.js
+++ b/assets/apps/dashboard/src/Components/Common/Toast.js
@@ -7,9 +7,9 @@ import {
 	LucideCircleX,
 	LucideInfo,
 } from 'lucide-react';
-import TransitionInOut from './Common/TransitionInOut';
+import TransitionInOut from './TransitionInOut';
 
-const Toast = ({ message, dismiss, time, type = 'info' }) => {
+const Toast = ({ message, dismiss, time, type = 'info', className }) => {
 	const [show, setShow] = useState(false);
 
 	useEffect(() => {
@@ -23,7 +23,7 @@ const Toast = ({ message, dismiss, time, type = 'info' }) => {
 		}, timeBeforeHide);
 
 		const dismissTimeout = setTimeout(() => {
-			dismiss('');
+			if (dismiss) dismiss('');
 		}, timeBeforeDismiss);
 
 		return () => {
@@ -42,12 +42,12 @@ const Toast = ({ message, dismiss, time, type = 'info' }) => {
 	const classes = cn(
 		'px-2 py-1.5 flex items-center text-sm border rounded gap-2',
 		{
-			'border-sky-300 bg-sky-50 text-sky-800': type === 'info',
-			'border-red-300 bg-red-50 text-red-800': type === 'error',
-			'border-lime-300 bg-lime-50 text-lime-800': type === 'success',
-			'border-orange-300 bg-orange-50 text-orange-800':
-				type === 'warning',
-		}
+			'bg-sky-50 text-sky-800': type === 'info',
+			'bg-red-50 text-red-800': type === 'error',
+			'bg-lime-50 text-lime-800': type === 'success',
+			'bg-orange-50 text-orange-800': type === 'warning',
+		},
+		className
 	);
 
 	const ICON = iconMap[type];
diff --git a/assets/apps/dashboard/src/Components/Common/Toggle.js b/assets/apps/dashboard/src/Components/Common/Toggle.js
index 0a82469904..d5e94a462b 100644
--- a/assets/apps/dashboard/src/Components/Common/Toggle.js
+++ b/assets/apps/dashboard/src/Components/Common/Toggle.js
@@ -1,7 +1,16 @@
-import { Switch, Label, Field } from '@headlessui/react';
+import { Switch, Label, Field, Description } from '@headlessui/react';
 import cn from 'classnames';
 
-export default ({ checked, onToggle, label, disabled = false, className }) => {
+export default ({
+	checked,
+	onToggle,
+	label,
+	disabled = false,
+	className,
+	labelBefore = false,
+	labelClassName = '',
+	description,
+}) => {
 	const switchClasses = cn(
 		'group inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition data-[checked]:bg-blue-600',
 		{
@@ -11,18 +20,41 @@ export default ({ checked, onToggle, label, disabled = false, className }) => {
 
 	const wrapClasses = cn('flex items-center gap-3', className);
 
+	const labelClasses = cn(
+		{
+			'font-medium': !labelClassName.includes('font-'),
+			'text-sm': !labelClassName.includes('text-'),
+			'text-gray-600': !labelClassName.includes('text-'),
+		},
+		labelClassName
+	);
+
 	return (
-		<Field className={wrapClasses}>
-			<Switch
-				checked={checked}
-				onChange={onToggle}
-				disabled={disabled}
-				className={switchClasses}
-			>
-				<span className="size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6" />
-			</Switch>
+		<Field className="grid gap-2">
+			<div className={wrapClasses}>
+				{label && labelBefore && (
+					<Label className={labelClasses}>{label}</Label>
+				)}
+
+				<Switch
+					checked={checked}
+					onChange={onToggle}
+					disabled={disabled}
+					className={switchClasses}
+				>
+					<span className="size-4 translate-x-1 rounded-full bg-white transition group-data-[checked]:translate-x-6" />
+				</Switch>
+
+				{label && !labelBefore && (
+					<Label className={labelClasses}>{label}</Label>
+				)}
+			</div>
 
-			<Label className="text-sm text-gray-600">{label}</Label>
+			{description && (
+				<Description className="text-xs text-gray-600">
+					{description}
+				</Description>
+			)}
 		</Field>
 	);
 };
diff --git a/assets/apps/dashboard/src/Components/Common/TransitionWrapper.js b/assets/apps/dashboard/src/Components/Common/TransitionWrapper.js
new file mode 100644
index 0000000000..eb89938b58
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/TransitionWrapper.js
@@ -0,0 +1,43 @@
+import { Transition } from '@headlessui/react';
+import cn from 'classnames';
+
+export const TransitionWrapper = ({ children, from = 'bottom', className }) => {
+	const directionClasses = {
+		left: {
+			enterFrom: '-translate-x-2',
+			enterTo: 'translate-x-0',
+		},
+		right: {
+			enterFrom: 'translate-x-2',
+			enterTo: 'translate-x-0',
+		},
+		top: {
+			enterFrom: '-translate-y-2',
+			enterTo: 'translate-y-0',
+		},
+		bottom: {
+			enterFrom: 'translate-y-2',
+			enterTo: 'translate-y-0',
+		},
+	};
+
+	const animationData = directionClasses[from] || directionClasses.bottom;
+
+	const transitionClasses = {
+		enter: 'ease-out duration-150',
+		enterFrom: `opacity-0 ${animationData.enterFrom}`,
+		enterTo: `opacity-100 ${animationData.enterTo}`,
+	};
+
+	return (
+		<Transition
+			as="div"
+			show
+			appear
+			className={cn('transition', className)}
+			{...transitionClasses}
+		>
+			{children}
+		</Transition>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Changelog.js b/assets/apps/dashboard/src/Components/Content/Changelog.js
index 6f9033c725..6cfefdac64 100644
--- a/assets/apps/dashboard/src/Components/Content/Changelog.js
+++ b/assets/apps/dashboard/src/Components/Content/Changelog.js
@@ -7,6 +7,7 @@ import { useState } from '@wordpress/element';
 import Card from '../../Layout/Card';
 import Button from '../Common/Button';
 import Pill from '../Common/Pill';
+import { TransitionWrapper } from '../Common/TransitionWrapper';
 
 const TAB_CHOICES = {
 	FREE: 'free',
@@ -112,7 +113,7 @@ const Changelog = () => {
 		activeTab === TAB_CHOICES.FREE ? changelog : changelogPro;
 
 	return (
-		<div className="grid gap-5">
+		<TransitionWrapper className="grid gap-5">
 			{changelogPro && (
 				<Card>
 					<div className="flex items-center justify-between">
@@ -165,7 +166,7 @@ const Changelog = () => {
 					</Button>
 				</div>
 			)}
-		</div>
+		</TransitionWrapper>
 	);
 };
 
diff --git a/assets/apps/dashboard/src/Components/Content/FreePro.js b/assets/apps/dashboard/src/Components/Content/FreePro.js
index 9c629d9623..43346990c9 100644
--- a/assets/apps/dashboard/src/Components/Content/FreePro.js
+++ b/assets/apps/dashboard/src/Components/Content/FreePro.js
@@ -13,42 +13,7 @@ import {
 import Card from '../../Layout/Card';
 import Tooltip from '../Common/Tooltip';
 import Button from '../Common/Button';
-
-const IntroCard = () => {
-	const upgradeList = [
-		__('Need advanced header/footer customization options', 'neve'),
-		__(
-			'Run an online store and want enhanced WooCommerce features',
-			'neve'
-		),
-		__('Build multilingual or RTL websites', 'neve'),
-		__('Create websites for clients and need white-labeling', 'neve'),
-	];
-
-	return (
-		<Card title={__('Understanding Neve Pro Features', 'neve')}>
-			<div className="text-gray-600 space-y-4">
-				<p className="text-sm">
-					{__(
-						"While Neve's free version includes everything you need to build a great website, Neve Pro adds advanced customization options and specific features for e-commerce, multilingual sites, and client projects. Here's a detailed comparison to help you decide if Pro is right for your needs.",
-						'neve'
-					)}
-				</p>
-				<div className="bg-blue-50 border-l-4 border-blue-600 p-4 text-sm">
-					<strong className="text-gray-900 mb-3 block">
-						{__('Considering an upgrade?', 'neve')}
-					</strong>
-					{__('Pro features are most helpful if you:', 'neve')}
-					<ul className="mt-2 space-y-1">
-						{upgradeList.map((item, index) => (
-							<li key={index}>• {item}</li>
-						))}
-					</ul>
-				</div>
-			</div>
-		</Card>
-	);
-};
+import { TransitionWrapper } from '../Common/TransitionWrapper';
 
 const FreeProCard = () => (
 	<Card className="!p-0">
@@ -122,14 +87,14 @@ const UpsellCard = () => {
 				<h3 className="text-lg font-semibold mb-4">
 					{__('Need help deciding?', 'neve')}
 				</h3>
-				<div className="space-y-4 mb-6 text-[13px] text-gray-600">
+				<div className="space-y-4 mb-6 text-gray-600">
 					<p>
 						{__(
 							'Our support team is happy to answer your questions about specific Pro features and help you determine if they match your needs.',
 							'neve'
 						)}
 					</p>
-					<div className="flex items-start space-x-2 text-[13px]">
+					<div className="flex items-start space-x-2">
 						<div className="bg-gray-100 px-3 py-1.5 rounded">
 							{__(
 								'Average response time: ~8 hours during business days',
@@ -166,8 +131,12 @@ const UpsellCard = () => {
 export default () => {
 	return (
 		<div className="grid gap-6">
-			<FreeProCard />
-			<UpsellCard />
+			<TransitionWrapper from="top">
+				<FreeProCard />
+			</TransitionWrapper>
+			<TransitionWrapper className="delay-150">
+				<UpsellCard />
+			</TransitionWrapper>
 		</div>
 	);
 };
diff --git a/assets/apps/dashboard/src/Components/Content/ModuleGrid.js b/assets/apps/dashboard/src/Components/Content/ModuleGrid.js
index bb7a63a6e1..754bd26ef7 100644
--- a/assets/apps/dashboard/src/Components/Content/ModuleGrid.js
+++ b/assets/apps/dashboard/src/Components/Content/ModuleGrid.js
@@ -1,6 +1,164 @@
+/* global neveDash */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { NEVE_HAS_VALID_PRO } from '../../utils/constants';
+import { LoaderCircle, LucideSettings } from 'lucide-react';
+
+import useLicenseData from '../../Hooks/useLicenseData';
+import Card from '../../Layout/Card';
+import {
+	NEVE_HAS_PRO,
+	NEVE_MODULE_ICON_MAP,
+	NEVE_STORE,
+} from '../../utils/constants';
+import Link from '../Common/Link';
+import Pill from '../Common/Pill';
+import Toggle from '../Common/Toggle';
+import Tooltip from '../Common/Tooltip';
+import { changeOption } from '../../utils/rest';
+import Button from '../Common/Button';
+
+const ModuleToggle = ({ slug, moduleData }) => {
+	const [loading, setLoading] = useState(false);
+
+	const { licenseTier, isLicenseValid } = useLicenseData();
+	const { changeModuleStatus, setToast } = useDispatch(NEVE_STORE);
+	const { moduleStatus } = useSelect((select) => {
+		const { getModuleStatus } = select(NEVE_STORE);
+
+		return {
+			moduleStatus: getModuleStatus(slug) || false,
+		};
+	});
+
+	if (!NEVE_HAS_PRO) {
+		return (
+			<Tooltip
+				text={__('These features are available in Neve Pro.', 'neve')}
+			>
+				<Pill className="ml-2 !px-2 !py-1 text-xs bg-blue-100 text-blue-800 rounded">
+					{__('Pro', 'neve')}
+				</Pill>
+			</Tooltip>
+		);
+	}
+
+	const { nicename, availabilityLevel } = moduleData;
+	const { upgradeLinks } = neveDash;
+
+	if (!isLicenseValid || licenseTier < availabilityLevel) {
+		return (
+			<Button isPrimary href={upgradeLinks[availabilityLevel]}>
+				{__('Upgrade', 'neve')}
+			</Button>
+		);
+	}
+
+	const handleToggle = (value) => {
+		setLoading(true);
+		changeModuleStatus(slug, value);
+
+		changeOption(slug, value, true).then((r) => {
+			if (r.success) {
+				setLoading(false);
+				setToast(
+					(value
+						? __('Module Activated', 'neve')
+						: __('Module Deactivated.', 'neve')) + ` (${nicename})`
+				);
+				return;
+			}
+			changeModuleStatus(slug, !value);
+			setLoading(false);
+			setToast(
+				__('Could not activate module. Please try again.', 'neve')
+			);
+		});
+	};
+
+	return (
+		<div className="flex gap-2 items-center">
+			{loading && <LoaderCircle size={18} className="animate-spin" />}
+			<Toggle
+				checked={moduleStatus}
+				onToggle={handleToggle}
+				disabled={loading}
+			/>
+		</div>
+	);
+};
+
+const ModuleCard = ({ moduleData, slug }) => {
+	const { nicename, description, documentation, hide } = moduleData;
+	const CardIcon = NEVE_MODULE_ICON_MAP[slug] || LucideSettings;
+
+	if (hide) {
+		return null;
+	}
+
+	return (
+		<Card
+			icon={<CardIcon size={18} />}
+			title={nicename}
+			className="bg-white p-6 rounded-lg shadow-sm"
+			afterTitle={<ModuleToggle slug={slug} moduleData={moduleData} />}
+		>
+			<p className="text-gray-600 text-sm leading-relaxed">
+				{description}{' '}
+				{documentation && documentation.url && (
+					<Link
+						isExternal
+						url={documentation.url}
+						text={__('Learn more', 'neve')}
+					/>
+				)}
+			</p>
+		</Card>
+	);
+};
+
+const ModulesHeader = () => {
+	const { isLicenseValid } = useLicenseData();
+
+	return (
+		<div className="flex items-center justify-between">
+			<h2 className="text-lg font-semibold">
+				{__('Neve Pro Modules', 'neve')}
+			</h2>
+			{!isLicenseValid && (
+				<Link
+					className="text-sm font-medium"
+					text={__('Get Neve Pro', 'neve')}
+					url={neveDash.upgradeURLModules}
+					isExternal
+				/>
+			)}
+		</div>
+	);
+};
 
 export default () => {
-	return <div className="grid grid-cols-2 gap-6"></div>;
+	const unorderedModuels = Object.entries(neveDash.modules);
+
+	const orderedModules = unorderedModuels.sort((a, b) => {
+		if (a[1].order && b[1].order) {
+			return a[1].order - b[1].order;
+		}
+		return 0;
+	});
+
+	return (
+		<>
+			<ModulesHeader />
+			<div className="grid xl:grid-cols-2 gap-6">
+				{orderedModules.map(([slug, moduleData]) => (
+					<ModuleCard
+						key={slug}
+						moduleData={moduleData}
+						slug={slug}
+					/>
+				))}
+			</div>
+		</>
+	);
 };
diff --git a/assets/apps/dashboard/src/Components/Content/ModuleGridPlaceholder.js b/assets/apps/dashboard/src/Components/Content/ModuleGridPlaceholder.js
deleted file mode 100644
index 2b53eeca3c..0000000000
--- a/assets/apps/dashboard/src/Components/Content/ModuleGridPlaceholder.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/* global neveDash */
-import { __ } from '@wordpress/i18n';
-import { LucideSettings } from 'lucide-react';
-import Card from '../../Layout/Card';
-import {
-	NEVE_HAS_VALID_PRO,
-	NEVE_MODULE_ICON_MAP,
-} from '../../utils/constants';
-import Tooltip from '../Common/Tooltip';
-import Pill from '../Common/Pill';
-import Link from '../Common/Link';
-
-const ModuleCardPlaceholder = ({ slug, title, description }) => {
-	const CardIcon = NEVE_MODULE_ICON_MAP[slug] || LucideSettings;
-
-	const ProBadge = (
-		<Tooltip text={__('These features are available in Neve Pro.', 'neve')}>
-			<Pill type="secondary">{__('Pro', 'neve')}</Pill>
-		</Tooltip>
-	);
-
-	return (
-		<Card
-			icon={<CardIcon size={18} />}
-			title={title}
-			className="bg-white p-6 rounded-lg shadow-sm"
-			afterTitle={ProBadge}
-		>
-			<p className="text-gray-600 text-sm leading-relaxed">
-				{description}
-			</p>
-		</Card>
-	);
-};
-
-export default () => {
-	return (
-		<div className="grid xl:grid-cols-2 gap-6">
-			<div className="xl:col-span-2 flex items-center justify-between">
-				<h2 className="text-lg font-semibold">
-					{__('Neve Pro Modules', 'neve')}
-				</h2>
-				<Link
-					className="text-sm font-medium"
-					text={__('Get Neve Pro', 'neve')}
-					url={neveDash.upgradeURLModules}
-					isExternal
-				/>
-			</div>
-			{Object.entries(neveDash.modules).map(
-				([slug, { nicename, description }]) => (
-					<ModuleCardPlaceholder
-						key={slug}
-						slug={slug}
-						title={nicename}
-						description={description}
-					/>
-				)
-			)}
-		</div>
-	);
-};
diff --git a/assets/apps/dashboard/src/Components/Content/Pro.js b/assets/apps/dashboard/src/Components/Content/Pro.js
deleted file mode 100644
index ad358d15fd..0000000000
--- a/assets/apps/dashboard/src/Components/Content/Pro.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* global neveDash */
-import { CircleFadingArrowUp } from 'lucide-react';
-import Notice from '../Common/Notice';
-import ModuleCard from '../ModuleCard';
-const Pro = () => {
-	const { modules, hasOldPro, strings } = neveDash;
-
-	if (hasOldPro) {
-		return (
-			<Notice icon={CircleFadingArrowUp}>{strings.updateOldPro}</Notice>
-		);
-	}
-
-	return (
-		<div className="col">
-			{Object.keys(modules).map((id, index) => {
-				return <ModuleCard key={index} slug={id} />;
-			})}
-		</div>
-	);
-};
-
-export default Pro;
diff --git a/assets/apps/dashboard/src/Components/Content/Settings.js b/assets/apps/dashboard/src/Components/Content/Settings.js
new file mode 100644
index 0000000000..ab8ce0cfe4
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings.js
@@ -0,0 +1,139 @@
+/* global neveDash */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import cn from 'classnames';
+import {
+	CircleFadingArrowUp,
+	LucideBriefcase,
+	LucideGauge,
+	LucidePuzzle,
+	LucideSettings,
+} from 'lucide-react';
+
+import { useSelect } from '@wordpress/data';
+import Card from '../../Layout/Card';
+import {
+	NEVE_HAS_PRO,
+	NEVE_IS_WHITELABEL,
+	NEVE_STORE,
+} from '../../utils/constants';
+import Notice from '../Common/Notice';
+import { TransitionWrapper } from '../Common/TransitionWrapper';
+import GeneralTabContent from './Settings/GeneralTabContent';
+import ManageModulesTabContent from './Settings/ManageModulesTabContent';
+import PerformanceTabContent from './Settings/PerformanceTabContent';
+import WhiteLabelTabContent from './Settings/WhiteLabelTabContent';
+
+const NAV_ITEMS = [
+	{
+		id: 'general',
+		label: __('General', 'neve'),
+		icon: LucideSettings,
+	},
+	{
+		id: 'performance',
+		label: __('Performance', 'neve'),
+		icon: LucideGauge,
+	},
+	{
+		id: 'white-label',
+		label: __('White Label', 'neve'),
+		icon: LucideBriefcase,
+	},
+	{
+		id: 'manage-modules',
+		label: __('Manage Modules', 'neve'),
+		icon: LucidePuzzle,
+	},
+];
+
+const Menu = ({ tab, setTab }) => {
+	const { whiteLabelStatus } = useSelect((select) => {
+		const { getModuleStatus } = select(NEVE_STORE);
+
+		return {
+			whiteLabelStatus: getModuleStatus('white_label') || false,
+		};
+	});
+
+	const menuItems = NAV_ITEMS.filter(({ id }) => {
+		if (id === 'manage-modules') return NEVE_HAS_PRO;
+
+		if (id === 'white-label')
+			return whiteLabelStatus && !NEVE_IS_WHITELABEL;
+
+		return true;
+	});
+
+	return (
+		<Card className="!p-0 overflow-hidden">
+			<TransitionWrapper>
+				{menuItems.map(({ id, label, icon }) => {
+					const Icon = icon;
+					const classes = cn(
+						'w-full flex items-center px-4 py-3 text-left',
+						{
+							'text-gray-600 hover:bg-gray-50': tab !== id,
+							'bg-blue-50 text-blue-600': tab === id,
+						}
+					);
+
+					return (
+						<button
+							key={id}
+							className={classes}
+							onClick={() => setTab(id)}
+						>
+							<Icon className="w-5 h-5 mr-3" />
+							<span className="font-medium">{label}</span>
+						</button>
+					);
+				})}
+			</TransitionWrapper>
+		</Card>
+	);
+};
+
+const Settings = () => {
+	const { hasOldPro, strings } = neveDash;
+
+	const [tab, setTab] = useState(NAV_ITEMS[0].id);
+
+	if (hasOldPro) {
+		return (
+			<Notice icon={CircleFadingArrowUp}>{strings.updateOldPro}</Notice>
+		);
+	}
+
+	return (
+		<div className="flex flex-col lg:flex-row gap-6">
+			<div className="shrink-0 w-full lg:w-[300px]">
+				<Menu tab={tab} setTab={setTab} />
+			</div>
+			<Card className="grow">
+				{tab === 'general' && (
+					<TransitionWrapper>
+						<GeneralTabContent />
+					</TransitionWrapper>
+				)}
+				{tab === 'performance' && (
+					<TransitionWrapper>
+						<PerformanceTabContent />
+					</TransitionWrapper>
+				)}
+				{tab === 'white-label' && (
+					<TransitionWrapper>
+						<WhiteLabelTabContent />
+					</TransitionWrapper>
+				)}
+				{tab === 'manage-modules' && (
+					<TransitionWrapper>
+						<ManageModulesTabContent />
+					</TransitionWrapper>
+				)}
+			</Card>
+		</div>
+	);
+};
+
+export default Settings;
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/AccessRestriction.js b/assets/apps/dashboard/src/Components/Content/Settings/AccessRestriction.js
new file mode 100644
index 0000000000..cba6a517bc
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/AccessRestriction.js
@@ -0,0 +1,195 @@
+/* global neveAccessRestriction */
+
+import apiFetch from '@wordpress/api-fetch';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { LucideLoaderCircle } from 'lucide-react';
+import Notice from '../../Common/Notice';
+import Select from '../../Common/Select';
+import Toggle from '../../Common/Toggle';
+import ControlWrap from '../../Controls/ControlWrap';
+import { NEVE_STORE } from '../../../utils/constants';
+import { useDispatch } from '@wordpress/data';
+
+export const saveOption = (value) => {
+	return new Promise((resolve) => {
+		apiFetch({
+			path: neveAccessRestriction.settingsRoute,
+			method: 'POST',
+			data: { settings: value },
+		})
+			.then((responseRaw) => {
+				const response = JSON.parse(responseRaw);
+				const status = response.status === 'success';
+				resolve({ success: status });
+			})
+			.catch(() => {
+				resolve({ success: false });
+			});
+	});
+};
+
+const AccessRestriction = ({ optionData }) => {
+	const [settings, setSettings] = useState(neveAccessRestriction.options);
+	const [saving, setSaving] = useState(false);
+	const [error, setError] = useState('');
+
+	const { setToast } = useDispatch(NEVE_STORE);
+
+	const updateContentTypeStatus = (slug, status) => {
+		const newSettings = { ...settings };
+
+		newSettings.content_types[slug].enabled = status;
+
+		setSettings(newSettings);
+		saveAsync(newSettings);
+	};
+
+	const updateSetting = (slug, value) => {
+		const newSettings = {
+			...settings,
+			[slug]: value,
+		};
+
+		setSettings(newSettings);
+		saveAsync(newSettings);
+	};
+
+	const saveAsync = (newSettings = null) => {
+		const settingsToSave = newSettings || settings;
+		setSaving(true);
+		setError('');
+		saveOption(JSON.stringify(settingsToSave))
+			.then((r) => {
+				if (!r.success) {
+					setError(
+						__('An error occurred. Please try again.', 'neve')
+					);
+					setToast(false);
+					return;
+				}
+				setToast(true);
+				neveAccessRestriction.options = newSettings;
+			})
+			.finally(() => {
+				setSaving(false);
+			});
+	};
+
+	return (
+		<ControlWrap
+			label={optionData.label}
+			icon={optionData.icon}
+			description={optionData.description}
+			afterTitle={
+				saving ? (
+					<div className="flex items-center gap-3 text-sm">
+						<LucideLoaderCircle
+							size={20}
+							className="animate-spin"
+						/>
+						<span>{__('Saving', 'neve')}...</span>
+					</div>
+				) : null
+			}
+		>
+			<div className="grid gap-4 grid-cols-2 xl:grid-cols-3">
+				<Fields
+					type="content_types"
+					updateSetting={updateContentTypeStatus}
+					valueCallback={(callbackSettings, callbackKey) => {
+						return callbackSettings[callbackKey].enabled;
+					}}
+					settings={neveAccessRestriction.options.content_types}
+				/>
+			</div>
+
+			<div className="grid gap-4 grid-cols-2 xl:grid-cols-3 mt-4 pt-4 border-t border-gray-200">
+				<Fields
+					type="restriction_behavior"
+					updateSetting={updateSetting}
+					settings={settings}
+				/>
+			</div>
+
+			{'' !== error && (
+				<Notice className="mt-4" isError>
+					{error}
+				</Notice>
+			)}
+		</ControlWrap>
+	);
+};
+
+const defaultValueCallback = (settings, key) => settings[key];
+
+const Fields = ({
+	type,
+	updateSetting,
+	settings,
+	valueCallback = defaultValueCallback,
+}) => {
+	const { fields } = neveAccessRestriction.fields[type];
+
+	return (
+		<>
+			{Object.keys(fields).map((key, index) => {
+				const { type: fieldType, label, description } = fields[key];
+
+				if (fields[key].parent) {
+					const parent = fields[key].parent;
+
+					if (settings[parent.fieldKey] !== parent.fieldValue) {
+						return null;
+					}
+				}
+
+				const value = valueCallback(settings, key);
+
+				return (
+					<div key={index}>
+						{'toggle' === fieldType && (
+							<>
+								<Toggle
+									checked={value === 'yes' || false}
+									label={label}
+									onToggle={(newValue) => {
+										const status = newValue ? 'yes' : 'no';
+										updateSetting(key, status);
+									}}
+								/>
+								{value && description && (
+									<p className="description">{description}</p>
+								)}
+							</>
+						)}
+						{'select' === fieldType && (
+							<>
+								<Select
+									label={label}
+									value={value}
+									choices={fields[key].options.reduce(
+										(acc, { value: v, label: l }) => ({
+											...acc,
+											[v]: l,
+										}),
+										{}
+									)}
+									onChange={(newValue) => {
+										updateSetting(key, newValue);
+									}}
+								/>
+
+								{value && description && (
+									<p className="description">{description}</p>
+								)}
+							</>
+						)}
+					</div>
+				);
+			})}
+		</>
+	);
+};
+
+export default AccessRestriction;
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/GeneralTabContent.js b/assets/apps/dashboard/src/Components/Content/Settings/GeneralTabContent.js
new file mode 100644
index 0000000000..33f1f93be2
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/GeneralTabContent.js
@@ -0,0 +1,154 @@
+/* global neveDash */
+import { __ } from '@wordpress/i18n';
+import {
+	LucideImage,
+	LucideLock,
+	LucideMenu,
+	LucideMonitorDown,
+	LucideTags,
+	LucideType,
+} from 'lucide-react';
+import useLicenseData from '../../../Hooks/useLicenseData';
+import { NEVE_HAS_VALID_PRO } from '../../../utils/constants';
+import TextControl from '../../Controls/TextControl';
+import ToggleControl from '../../Controls/ToggleControl';
+import OptionGroup from './OptionGroup';
+
+const DUMMY_SETTINGS_ARGS = {
+	typekit_id: {
+		icon: LucideType,
+		label: __('Embed Typekit', 'neve'),
+		type: 'text',
+		placeholder: __('Paste your Typekit code here', 'neve'),
+		description: __(
+			'Add your Typekit embed code here to use custom fonts.',
+			'neve'
+		),
+	},
+	enable_featured_image_taxonomy: {
+		icon: LucideImage,
+		label: __('Featured image for taxonomy', 'neve'),
+		description: __(
+			'Enable featured images for categories and tags.',
+			'neve'
+		),
+	},
+	enable_mega_menu: {
+		icon: LucideMenu,
+		label: __('Enable Mega Menu', 'neve'),
+		description: __(
+			'Enable Mega menu fuctionality in the menu dashboard page.',
+			'neve'
+		),
+	},
+	neve_access_restriction: {
+		icon: LucideLock,
+		label: __('Enable Content Restriction', 'neve'),
+		description: __(
+			'Restrict content access on Posts, Pages, and set a default login page.',
+			'neve'
+		),
+	},
+};
+
+if (NEVE_HAS_VALID_PRO) {
+	DUMMY_SETTINGS_ARGS.typekit_loading_method = {
+		icon: LucideMonitorDown,
+		label: __('Typekit loading method', 'neve'),
+		description: __(
+			'Choose if Typekit fonts should be loaded with JavaScript or CSS. JavaScript is usually faster.',
+			'neve'
+		),
+	};
+
+	DUMMY_SETTINGS_ARGS.featured_image_taxonomies = {
+		icon: LucideTags,
+		description: __(
+			'Enable featured images for the following taxonomies.',
+			'neve'
+		),
+	};
+
+	DUMMY_SETTINGS_ARGS.neve_access_restriction = {
+		...DUMMY_SETTINGS_ARGS.neve_access_restriction,
+		description: __(
+			'Adds a metabox to control content restriction on the post/taxonomy edit page.',
+			'neve'
+		),
+	};
+}
+
+const EXCLUDED_MODULES = ['performance_features'];
+
+const DummySettings = () => {
+	return (
+		<>
+			{Object.values(DUMMY_SETTINGS_ARGS).map((setting, idx) => {
+				if (!setting.type) {
+					return <ToggleControl key={idx} locked {...setting} />;
+				}
+				if (setting.type === 'text') {
+					return <TextControl key={idx} locked {...setting} />;
+				}
+
+				return <div key={idx}>{setting.label}</div>;
+			})}
+		</>
+	);
+};
+
+const ProModuleSettings = () => {
+	const { modules } = neveDash;
+
+	const displayedModules = Object.entries(modules)
+		.filter(
+			([key, moduleArgs]) =>
+				!EXCLUDED_MODULES.includes(key) &&
+				moduleArgs.options &&
+				moduleArgs.options.length > 0
+		)
+		.map(([key, moduleArgs]) => {
+			return [key, moduleArgs.options];
+		});
+
+	return (
+		<>
+			{displayedModules.map(([key, optionGroups]) => {
+				if (!optionGroups || optionGroups.length < 1) {
+					return null;
+				}
+
+				return optionGroups.map(({ options }, idx) => {
+					if (!options || Object.keys(options).length < 1) {
+						return null;
+					}
+
+					return (
+						<OptionGroup
+							module={key}
+							key={key + idx}
+							options={options}
+							overrides={DUMMY_SETTINGS_ARGS}
+						/>
+					);
+				});
+			})}
+		</>
+	);
+};
+
+export default () => {
+	const { isLicenseValid } = useLicenseData();
+
+	return (
+		<>
+			<h1 className="text-lg font-semibold mb-6">
+				{__('General Settings', 'neve')}
+			</h1>
+
+			<div className="">
+				{(isLicenseValid && <ProModuleSettings />) || <DummySettings />}
+			</div>
+		</>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/ManageModulesTabContent.js b/assets/apps/dashboard/src/Components/Content/Settings/ManageModulesTabContent.js
new file mode 100644
index 0000000000..8a077600b0
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/ManageModulesTabContent.js
@@ -0,0 +1,5 @@
+import ModuleGrid from '../ModuleGrid';
+
+export default () => {
+	return <ModuleGrid />;
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/OptionGroup.js b/assets/apps/dashboard/src/Components/Content/Settings/OptionGroup.js
new file mode 100644
index 0000000000..a273a8eab7
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/OptionGroup.js
@@ -0,0 +1,123 @@
+import { useSelect } from '@wordpress/data';
+import MultiselectControl from '../../Controls/MultiselectControl';
+import SelectControl from '../../Controls/SelectControl';
+import TextControl from '../../Controls/TextControl';
+import ToggleControl from '../../Controls/ToggleControl';
+import { NEVE_STORE } from '../../../utils/constants';
+import { useEffect } from '@wordpress/element';
+import AccessRestriction from './AccessRestriction';
+import ControlWrap from '../../Controls/ControlWrap';
+
+export default ({ options, overrides = {}, module }) => {
+	const { getProOption, getModuleStatus } = useSelect(NEVE_STORE);
+
+	if (!getModuleStatus(module)) {
+		return null;
+	}
+
+	return (
+		<>
+			{Object.entries(options).map(([slug, optionData]) => {
+				if (
+					optionData.depends_on &&
+					getProOption(optionData.depends_on) !== true
+				) {
+					return null;
+				}
+
+				if (slug === 'enable_local_fonts') {
+					return null;
+				}
+
+				if (overrides[slug]) {
+					optionData = { ...optionData, ...overrides[slug] };
+				}
+
+				const { type } = optionData;
+
+				switch (type) {
+					case 'toggle':
+						return (
+							<ToggleControl
+								key={slug}
+								option={slug}
+								icon={optionData.icon}
+								label={optionData.label}
+								description={optionData.description}
+								checked={optionData.value}
+							/>
+						);
+
+					case 'text':
+						return (
+							<TextControl
+								key={slug}
+								option={slug}
+								icon={optionData.icon}
+								label={optionData.label}
+								description={optionData.description}
+							/>
+						);
+
+					case 'select':
+						return (
+							<SelectControl
+								key={slug}
+								icon={optionData.icon}
+								label={optionData.label}
+								description={optionData.description}
+								option={slug}
+								choices={optionData.choices}
+							/>
+						);
+					case 'multi_select':
+						return (
+							<MultiselectControl
+								key={slug}
+								icon={optionData.icon}
+								label={optionData.label}
+								description={optionData.description}
+								option={slug}
+								choices={optionData.choices}
+							/>
+						);
+
+					case 'react':
+						return slug === 'neve_access_restriction' ? (
+							<AccessRestriction
+								key={slug}
+								optionData={optionData}
+							/>
+						) : (
+							<ControlWrap
+								key={slug}
+								label={optionData.label}
+								description={optionData.description}
+								icon={optionData.icon}
+								locked={optionData.locked}
+							>
+								<ReactPlaceholder key={slug} slug={slug} />
+							</ControlWrap>
+						);
+
+					default:
+						return null;
+				}
+			})}
+		</>
+	);
+};
+
+const ReactPlaceholder = ({ slug }) => {
+	useEffect(() => {
+		window.dispatchEvent(
+			new window.CustomEvent('neve-dashboard-react-placeholder', {
+				detail: {
+					slug,
+				},
+			})
+		);
+	}, []);
+
+	return <div id={slug} />;
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/PerformanceTabContent.js b/assets/apps/dashboard/src/Components/Content/Settings/PerformanceTabContent.js
new file mode 100644
index 0000000000..536e468d8a
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/PerformanceTabContent.js
@@ -0,0 +1,100 @@
+/* global neveDash */
+import { __ } from '@wordpress/i18n';
+import { LucideCode, LucideSmile, LucideText, LucideZap } from 'lucide-react';
+import ToggleControl from '../../Controls/ToggleControl';
+import useLicenseData from '../../../Hooks/useLicenseData';
+import OptionGroup from './OptionGroup';
+
+const LOCAL_HOSTING_OPTION = 'enable_local_fonts';
+
+const DUMMY_SETTINGS_ARGS = {
+	enable_emoji_removal: {
+		icon: LucideSmile,
+		label: __('Emoji Removal', 'neve'),
+		description: __(
+			'Remove emoji scripts to improve page load time.',
+			'neve'
+		),
+	},
+	enable_embedded_removal: {
+		icon: LucideCode,
+		label: __('Embed Removal', 'neve'),
+		description: __('Remove embed scripts for better performance.', 'neve'),
+	},
+	enable_lazy_content: {
+		icon: LucideZap,
+		label: __('Lazy Rendering', 'neve'),
+		description: __(
+			'Enable lazy rendering for better initial page load.',
+			'neve'
+		),
+	},
+};
+
+const DummySettings = () => {
+	return (
+		<>
+			{Object.values(DUMMY_SETTINGS_ARGS).map((setting, index) => {
+				return (
+					<ToggleControl
+						key={index}
+						icon={setting.icon}
+						label={setting.label}
+						description={setting.description}
+						locked={true}
+						checked={false}
+					/>
+				);
+			})}
+		</>
+	);
+};
+
+const ProModuleSettings = () => {
+	const optionGroups = neveDash?.modules?.performance_features.options || [];
+
+	if (optionGroups.length < 1) {
+		return null;
+	}
+
+	return optionGroups.map(({ options }, idx) => {
+		if (!options || Object.keys(options).length < 1) {
+			return null;
+		}
+
+		return (
+			<OptionGroup
+				module={'performance_features'}
+				key={idx}
+				options={options}
+				overrides={DUMMY_SETTINGS_ARGS}
+			/>
+		);
+	});
+};
+
+export default () => {
+	const { isLicenseValid } = useLicenseData();
+
+	return (
+		<>
+			<h1 className="text-lg font-semibold mb-6">
+				{__('Performance Settings', 'neve')}
+			</h1>
+
+			<div>
+				<ToggleControl
+					icon={LucideText}
+					label={__('Enable Local Fonts Hosting', 'neve')}
+					option={LOCAL_HOSTING_OPTION}
+					description={__(
+						'Host Google Fonts locally for better performance and GDPR compliance.',
+						'neve'
+					)}
+				/>
+
+				{(isLicenseValid && <ProModuleSettings />) || <DummySettings />}
+			</div>
+		</>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/WhiteLabelTabContent.js b/assets/apps/dashboard/src/Components/Content/Settings/WhiteLabelTabContent.js
new file mode 100644
index 0000000000..f452896938
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/WhiteLabelTabContent.js
@@ -0,0 +1,310 @@
+/* global neveDash */
+import { __ } from '@wordpress/i18n';
+import useLicenseData from '../../../Hooks/useLicenseData';
+import {
+	CircleFadingArrowUp,
+	LucideBuilding,
+	LucideMessageCircleQuestion,
+	LucidePlug,
+	LucideSettings,
+	LucideToggleRight,
+	LucideWallpaper,
+} from 'lucide-react';
+import TextInput from '../../Common/TextInput';
+import { useReducer, useState } from '@wordpress/element';
+import Button from '../../Common/Button';
+import ControlWrap from '../../Controls/ControlWrap';
+import Toggle from '../../Common/Toggle';
+import Notice from '../../Common/Notice';
+import { changeOption } from '../../../utils/rest';
+import { useDispatch } from '@wordpress/data';
+import { NEVE_STORE } from '../../../utils/constants';
+
+const DUMMY_SECTIONS = {
+	agency: {
+		title: __('Agency Branding', 'neve'),
+		icon: LucideBuilding,
+		fields: {
+			author_name: {
+				type: 'text',
+				label: __('Agency Author', 'neve'),
+			},
+			author_url: {
+				type: 'text',
+				label: __('Agency Author URL', 'neve'),
+			},
+			starter_sites: {
+				type: 'toggle',
+				label: __('Hide Sites Library', 'neve'),
+			},
+			my_library: {
+				type: 'toggle',
+				label: __('Hide My Library', 'neve'),
+			},
+		},
+	},
+	theme: {
+		title: __('Theme Branding', 'neve'),
+		icon: LucideWallpaper,
+		fields: {
+			theme_name: {
+				type: 'text',
+				label: __('Theme Name', 'neve'),
+			},
+			theme_description: {
+				type: 'textarea',
+				label: __('Theme Description', 'neve'),
+			},
+			screenshot_url: {
+				type: 'text',
+				label: __('Screenshot URL', 'neve'),
+			},
+		},
+	},
+	plugin: {
+		title: __('Plugin Branding', 'neve'),
+		icon: LucidePlug,
+		fields: {
+			plugin_name: {
+				type: 'text',
+				label: __('Plugin Name', 'neve'),
+			},
+			plugin_description: {
+				type: 'textarea',
+				label: __('Plugin Description', 'neve'),
+			},
+		},
+	},
+	sidebar: {
+		title: __('Enable White Label', 'neve'),
+		icon: LucideToggleRight,
+		fields: {
+			white_label: {
+				type: 'toggle',
+				label: __('Hide Options from Dashboard', 'neve'),
+			},
+			license: {
+				type: 'toggle',
+				label: __('Enable License Hiding', 'neve'),
+			},
+		},
+	},
+};
+
+const PlaceholderComponent = () => {
+	return (
+		<div>
+			{Object.entries(DUMMY_SECTIONS).map(([id, section]) => {
+				const ICON = section.icon;
+
+				return (
+					<ControlWrap
+						key={id}
+						label={section.title}
+						icon={ICON}
+						locked={true}
+					>
+						<div className="grid gap-4">
+							{Object.entries(section.fields).map(
+								([sid, setting]) => {
+									return (
+										<div key={sid} className="opacity-75">
+											{setting.type === 'toggle' ? (
+												<Toggle
+													disabled
+													locked
+													checked={false}
+													label={setting.label}
+												/>
+											) : (
+												<TextInput
+													label={setting.label}
+													disabled={true}
+													name={sid}
+												/>
+											)}
+										</div>
+									);
+								}
+							)}
+						</div>
+					</ControlWrap>
+				);
+			})}
+
+			<div className="flex justify-end mt-6">
+				<Button isPrimary disabled>
+					{__('Save', 'neve')}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+const WhiteLabelSettings = () => {
+	const { strings } = neveDash;
+
+	const { fields, optionKey, options } = neveDash.whiteLabelData;
+
+	const allFields = Object.values(fields)
+		.map((all) => all.fields)
+		.reduce((acc, val) => ({ ...acc, ...val }), {});
+
+	// remap values from options if the field type is toggle parse for '0' and '1'.
+	const formDefaults = Object.keys(allFields).reduce((acc, key) => {
+		if (allFields[key].type === 'toggle') {
+			acc[key] = options[key] === '1';
+		} else {
+			acc[key] = options[key];
+		}
+		return acc;
+	}, {});
+
+	const [loading, setLoading] = useState(false);
+	const [formData, setFormData] = useReducer((state, action) => {
+		return {
+			...state,
+			[action.name]: action.value,
+		};
+	}, formDefaults);
+
+	const { setToast } = useDispatch(NEVE_STORE);
+
+	if (!neveDash.whiteLabelData) {
+		return (
+			<Notice icon={CircleFadingArrowUp}>{strings.updateOldPro}</Notice>
+		);
+	}
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+
+		setLoading(true);
+
+		changeOption(optionKey, JSON.stringify(formData), false, false)
+			.then((r) => {
+				if (r.success) {
+					setToast(__('White Label settings saved.', 'neve'));
+					neveDash.whiteLabelData.options = formData;
+					return;
+				}
+
+				setToast(r.message ? r.message : false);
+			})
+			.catch((err) => {
+				setToast(err.message ? err.message : false);
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			{Object.entries(fields).map(([id, section]) => {
+				// We replace the icon as there's no way to retro-fit it from PRO.
+				section.icon = DUMMY_SECTIONS[id]?.icon || LucideSettings;
+
+				return (
+					<ControlWrap
+						key={id}
+						label={section.title}
+						icon={section.icon}
+					>
+						<div className="grid gap-4">
+							{Object.entries(section.fields).map(
+								([sid, setting]) => {
+									return (
+										<div key={sid}>
+											{[
+												'text',
+												'url',
+												'textarea',
+											].includes(setting.type) && (
+												<TextInput
+													label={setting.label}
+													type={setting.type}
+													onChange={(e) =>
+														setFormData({
+															name: sid,
+															value: e.target
+																.value,
+														})
+													}
+													value={formData[sid]}
+												/>
+											)}
+											{setting.type === 'toggle' && (
+												<Toggle
+													checked={
+														formData[sid] === '1' ||
+														formData[sid] === true
+													}
+													description={
+														setting.description
+													}
+													label={setting.label}
+													onToggle={(value) =>
+														setFormData({
+															name: sid,
+															value,
+														})
+													}
+												/>
+											)}
+										</div>
+									);
+								}
+							)}
+						</div>
+					</ControlWrap>
+				);
+			})}
+			<div className="flex justify-end mt-6">
+				<Button
+					isSubmit
+					isPrimary
+					onClick={handleSubmit}
+					loading={loading}
+					disabled={loading}
+				>
+					{loading
+						? __('Saving', 'neve') + '...'
+						: __('Save', 'neve')}
+				</Button>
+			</div>
+		</form>
+	);
+};
+
+export default () => {
+	const { isLicenseValid, licenseTier } = useLicenseData();
+
+	const showPlaceholder = !isLicenseValid || licenseTier < 3;
+
+	const [showTierInfo, setShowTierInfo] = useState(false);
+
+	return (
+		<>
+			<div className="flex items-center justify-between mb-6">
+				<h1 className="text-lg font-semibold">
+					{__('White Label Settings', 'neve')}
+				</h1>
+
+				{showPlaceholder && (
+					<Button
+						className="!p-0"
+						isLink
+						onClick={() => setShowTierInfo(!showTierInfo)}
+					>
+						<LucideMessageCircleQuestion size={18} />
+						{__('Available in Agency Plan', 'neve')}
+					</Button>
+				)}
+			</div>
+
+			{showPlaceholder && <PlaceholderComponent />}
+			{!showPlaceholder && <WhiteLabelSettings />}
+		</>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/LicenseCard.js b/assets/apps/dashboard/src/Components/Content/Sidebar/LicenseCard.js
similarity index 85%
rename from assets/apps/dashboard/src/Components/LicenseCard.js
rename to assets/apps/dashboard/src/Components/Content/Sidebar/LicenseCard.js
index 8819d2ed0a..4f04f9abb3 100644
--- a/assets/apps/dashboard/src/Components/LicenseCard.js
+++ b/assets/apps/dashboard/src/Components/Content/Sidebar/LicenseCard.js
@@ -1,31 +1,25 @@
 /* global neveDash */
-import { fetchOptions, send } from '../utils/rest';
-import Toast from './Toast';
+import { fetchOptions, send } from '../../../utils/rest';
+import Toast from '../../Common/Toast';
 
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Fragment, useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import Card from '../Layout/Card';
-import { NEVE_STORE } from '../utils/constants';
-import Pill from './Common/Pill';
 import { LucideCircleCheck, LucideCircleX } from 'lucide-react';
-import Button from './Common/Button';
+import useLicenseData from '../../../Hooks/useLicenseData';
+import Card from '../../../Layout/Card';
+import { NEVE_STORE } from '../../../utils/constants';
+import Button from '../../Common/Button';
+import Pill from '../../Common/Pill';
 
 const LicenseCard = () => {
 	const { proApi } = neveDash;
 
 	const { changeLicense, setSettings } = useDispatch(NEVE_STORE);
 
-	const { license } = useSelect((select) => {
-		const { getLicense } = select(NEVE_STORE);
-		return {
-			license: getLicense(),
-		};
-	});
+	const { license, isLicenseValid } = useLicenseData();
 
-	const [key, setKey] = useState(
-		license && 'valid' === license.valid ? license.key || '' : ''
-	);
+	const [key, setKey] = useState(isLicenseValid ? license.key || '' : '');
 	const [status, setStatus] = useState(false);
 
 	const [toast, setToast] = useState('');
@@ -114,7 +108,7 @@ const LicenseCard = () => {
 					<Button
 						isPrimary={'valid' !== valid}
 						isSecondary={'valid' === valid}
-						disabled={status || !key}
+						disabled={!!status || !key}
 						isSubmit
 					>
 						{getStatusLabel()}
diff --git a/assets/apps/dashboard/src/Components/PluginsCard.js b/assets/apps/dashboard/src/Components/Content/Sidebar/PluginsCard.js
similarity index 89%
rename from assets/apps/dashboard/src/Components/PluginsCard.js
rename to assets/apps/dashboard/src/Components/Content/Sidebar/PluginsCard.js
index 9192aa9528..d9050de60a 100644
--- a/assets/apps/dashboard/src/Components/PluginsCard.js
+++ b/assets/apps/dashboard/src/Components/Content/Sidebar/PluginsCard.js
@@ -1,16 +1,19 @@
 /* global neveDash */
-import usePluginActions from '../Hooks/usePluginActions';
-import Card from '../Layout/Card';
-import { NEVE_HIDE_PLUGINS, NEVE_PLUGIN_ICON_MAP } from '../utils/constants';
+import usePluginActions from '../../../Hooks/usePluginActions';
+import Card from '../../../Layout/Card';
+import {
+	NEVE_HIDE_PLUGINS,
+	NEVE_PLUGIN_ICON_MAP,
+} from '../../../utils/constants';
 
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import cn from 'classnames';
 import { LoaderCircle, LucidePuzzle } from 'lucide-react';
-import Pill from './Common/Pill';
-import TransitionInOut from './Common/TransitionInOut';
-import Toast from './Toast';
+import Pill from '../../Common/Pill';
+import Toast from '../../Common/Toast';
+import TransitionInOut from '../../Common/TransitionInOut';
 
 const PluginCard = ({ slug, data }) => {
 	const ICON = NEVE_PLUGIN_ICON_MAP[slug] || LucidePuzzle;
diff --git a/assets/apps/dashboard/src/Components/Sidebar.js b/assets/apps/dashboard/src/Components/Content/Sidebar/Sidebar.js
similarity index 68%
rename from assets/apps/dashboard/src/Components/Sidebar.js
rename to assets/apps/dashboard/src/Components/Content/Sidebar/Sidebar.js
index b82e1dc1bd..19a9e33ab0 100644
--- a/assets/apps/dashboard/src/Components/Sidebar.js
+++ b/assets/apps/dashboard/src/Components/Content/Sidebar/Sidebar.js
@@ -1,5 +1,4 @@
-/* global neveDash */
-import { changeOption } from '../utils/rest';
+import { changeOption } from '../../../utils/rest';
 import SupportCard from './SupportCard';
 import LicenseCard from './LicenseCard';
 import { __ } from '@wordpress/i18n';
@@ -10,11 +9,12 @@ import {
 	NEVE_HIDE_PLUGINS,
 	NEVE_IS_WHITELABEL,
 	NEVE_STORE,
-} from '../utils/constants';
-import Card from '../Layout/Card';
-import Link from './Common/Link';
-import Toggle from './Common/Toggle';
+} from '../../../utils/constants';
+import Card from '../../../Layout/Card';
+import Link from '../../Common/Link';
+import Toggle from '../../Common/Toggle';
 import PluginsCard from './PluginsCard';
+import { LucideLoaderCircle } from 'lucide-react';
 
 const ReviewCard = () => (
 	<Card title={__('Leave us a review', 'neve')}>
@@ -41,27 +41,34 @@ const ContributingCard = () => {
 	});
 
 	const [tracking, setTracking] = useState('yes' === loggerEnabled);
+	const [loading, setLoading] = useState(false);
 
 	const { setToast, setLogger } = useDispatch(NEVE_STORE);
 
 	const handleTrackingChange = (value) => {
+		setLoading(true);
 		setTracking(value);
-		changeOption(
-			'neve_logger_flag',
-			value ? 'yes' : 'no',
-			false,
-			false
-		).then((r) => {
-			if (!r.success) {
+		changeOption('neve_logger_flag', value ? 'yes' : 'no', false, false)
+			.then((r) => {
+				if (!r.success) {
+					setToast(
+						__('Could not update option. Please try again.', 'neve')
+					);
+					setTracking(!value);
+					return;
+				}
+				setLogger(value ? 'yes' : 'no');
+				setToast(__('Option Updated', 'neve'));
+			})
+			.catch(() => {
 				setToast(
 					__('Could not update option. Please try again.', 'neve')
 				);
 				setTracking(!value);
-				return false;
-			}
-			setLogger(value ? 'yes' : 'no');
-			setToast(__('Option Updated', 'neve'));
-		});
+			})
+			.finally(() => {
+				setLoading(false);
+			});
 	};
 
 	return (
@@ -85,7 +92,17 @@ const ContributingCard = () => {
 				className="mt-4"
 				onToggle={handleTrackingChange}
 				checked={tracking}
-				label={__('Allow Anonymous Tracking', 'neve')}
+				label={
+					<div className="flex items-center gap-3">
+						{__('Allow Anonymous Tracking', 'neve')}
+						{loading && (
+							<LucideLoaderCircle
+								size={18}
+								className="animate-spin"
+							/>
+						)}
+					</div>
+				}
 			/>
 		</Card>
 	);
diff --git a/assets/apps/dashboard/src/Components/SupportCard.js b/assets/apps/dashboard/src/Components/Content/Sidebar/SupportCard.js
similarity index 88%
rename from assets/apps/dashboard/src/Components/SupportCard.js
rename to assets/apps/dashboard/src/Components/Content/Sidebar/SupportCard.js
index 75eb890b0e..49bc6ec8ad 100644
--- a/assets/apps/dashboard/src/Components/SupportCard.js
+++ b/assets/apps/dashboard/src/Components/Content/Sidebar/SupportCard.js
@@ -1,6 +1,6 @@
 import { useSelect } from '@wordpress/data';
-import { NEVE_STORE } from '../utils/constants';
-import Link from './Common/Link';
+import { NEVE_STORE } from '../../../utils/constants';
+import Link from '../../Common/Link';
 
 const SupportCard = () => {
 	const { license } = useSelect((select) => {
diff --git a/assets/apps/dashboard/src/Components/Content/StarterSitesUnavailable.js b/assets/apps/dashboard/src/Components/Content/StarterSitesUnavailable.js
index 9c2fd2bf20..5082a0a4cd 100644
--- a/assets/apps/dashboard/src/Components/Content/StarterSitesUnavailable.js
+++ b/assets/apps/dashboard/src/Components/Content/StarterSitesUnavailable.js
@@ -4,23 +4,30 @@ import { withSelect } from '@wordpress/data';
 import Card from '../../Layout/Card';
 import Container from '../../Layout/Container';
 import { __ } from '@wordpress/i18n';
+import { useState } from 'react';
+import { TransitionWrapper } from '../Common/TransitionWrapper';
 
-const BackgroundPlaceholder = () => (
-	<div
-		className="block absolute overflow-hidden inset-0 bg-cover opacity-15 mx-auto max-w-[1300px]"
-		style={
-			{
-				// height: 'calc: (100vh -100px)',
-			}
-		}
-	>
-		<img
-			src={`${neveDash.assets}starter.jpg`}
-			// style={{ marginTop: '-350px' }}
-			alt={__('Starter Sites', 'neve')}
-		/>
-	</div>
-);
+const BackgroundPlaceholder = () => {
+	const [show, setShow] = useState(false);
+
+	const handleImageLoaded = () => {
+		setShow(true);
+	};
+
+	return (
+		<div className="block absolute overflow-hidden inset-0 bg-cover opacity-15 mx-auto max-w-[1300px]">
+			<TransitionWrapper show={show} from="bottom" className="delay-150">
+				<img
+					style={{ marginTop: '-200px' }}
+					className="transition duration-300"
+					onLoad={handleImageLoaded}
+					src={`${neveDash.assets}starter.jpg`}
+					alt={__('Starter Sites', 'neve')}
+				/>
+			</TransitionWrapper>
+		</div>
+	);
+};
 
 const StarterSitesUnavailable = ({ templatesPluginData }) => {
 	const { tpcPath, tpcAdminURL, canInstallPlugins } = neveDash;
@@ -42,25 +49,26 @@ const StarterSitesUnavailable = ({ templatesPluginData }) => {
 	return (
 		<Container className="relative min-h-full">
 			<BackgroundPlaceholder />
+			<TransitionWrapper from="top">
+				<Card className="z-50 relative flex flex-col justify-center items-center text-center max-w-3xl mx-auto">
+					<p
+						className="text-gray-800 text-base leading-relaxed mb-6 max-w-2xl mx-auto"
+						dangerouslySetInnerHTML={description}
+					/>
 
-			<Card className="z-50 relative flex flex-col justify-center items-center text-center max-w-3xl mx-auto">
-				<p
-					className="text-gray-800 text-base leading-relaxed mb-6 max-w-2xl mx-auto"
-					dangerouslySetInnerHTML={description}
-				/>
-
-				<InstallActivate
-					successUpdate={redirectToStarterSites}
-					successActivation={redirectToStarterSites}
-					pluginData={{
-						name: 'Starter Sites & Templates',
-						slug: 'templates-patterns-collection',
-						pluginBasename: tpcPath,
-						pluginState: currentState,
-						activateURL: templatesPluginData?.activate || '',
-					}}
-				/>
-			</Card>
+					<InstallActivate
+						successUpdate={redirectToStarterSites}
+						successActivation={redirectToStarterSites}
+						pluginData={{
+							name: 'Starter Sites & Templates',
+							slug: 'templates-patterns-collection',
+							pluginBasename: tpcPath,
+							pluginState: currentState,
+							activateURL: templatesPluginData?.activate || '',
+						}}
+					/>
+				</Card>
+			</TransitionWrapper>
 		</Container>
 	);
 };
diff --git a/assets/apps/dashboard/src/Components/Content/Welcome.js b/assets/apps/dashboard/src/Components/Content/Welcome.js
index 3b55aadcae..2151bfb30c 100644
--- a/assets/apps/dashboard/src/Components/Content/Welcome.js
+++ b/assets/apps/dashboard/src/Components/Content/Welcome.js
@@ -1,24 +1,21 @@
 /* global neveDash */
 import { __ } from '@wordpress/i18n';
 import { LucidePanelsTopLeft } from 'lucide-react';
+
 import Card from '../../Layout/Card';
-import { NEVE_HAS_PRO, NEVE_HAS_VALID_PRO } from '../../utils/constants';
+import { NEVE_HAS_PRO } from '../../utils/constants';
 import Link from '../Common/Link';
+import ModuleCard from '../ModuleCard';
 import ModuleGrid from './ModuleGrid';
-import ModuleGridPlaceholder from './ModuleGridPlaceholder';
+import { TransitionWrapper } from '../Common/TransitionWrapper';
 
-export default () => {
-	return (
-		<div className="grid gap-6">
-			<CustomizerShortcutsCard />
-			{!NEVE_HAS_PRO || !NEVE_HAS_VALID_PRO ? (
-				<ModuleGridPlaceholder />
-			) : (
-				<ModuleGrid />
-			)}
-		</div>
-	);
-};
+export default () => (
+	<TransitionWrapper className="grid gap-6">
+		<CustomizerShortcutsCard />
+		{!NEVE_HAS_PRO && <ModuleGrid />}
+		{/* <OldModuleGrid /> */}
+	</TransitionWrapper>
+);
 
 const CustomizerShortcutsCard = () => (
 	<Card
@@ -32,3 +29,11 @@ const CustomizerShortcutsCard = () => (
 		</div>
 	</Card>
 );
+
+// const OldModuleGrid = () => (
+// 	<div className="grid xl:grid-cols-2 gap-6">
+// 		{Object.entries(neveDash.modules).map(([slug, moduleData]) => (
+// 			<ModuleCard key={slug} moduleData={moduleData} slug={slug} />
+// 		))}
+// 	</div>
+// );
diff --git a/assets/apps/dashboard/src/Components/Controls/ControlWrap.js b/assets/apps/dashboard/src/Components/Controls/ControlWrap.js
new file mode 100644
index 0000000000..6a74602764
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Controls/ControlWrap.js
@@ -0,0 +1,52 @@
+import { __ } from '@wordpress/i18n';
+import cn from 'classnames';
+import { LucideSettings } from 'lucide-react';
+import Pill from '../Common/Pill';
+
+export default ({
+	icon,
+	label,
+	description,
+	locked,
+	afterTitle = null,
+	className,
+	children,
+}) => {
+	const ICON = icon || LucideSettings;
+
+	return (
+		<div
+			className={cn(
+				className,
+				'last:pb-0 pb-6 border-b last:border-0 first:mt-0 mt-6 grid gap-6'
+			)}
+		>
+			<div className="flex items-center gap-3">
+				<div className="grid gap-3 grow">
+					<div className="flex items-center">
+						{icon !== null && (
+							<ICON size={20} className="text-blue-600 mr-2" />
+						)}
+						<h3 className="text-base font-semibold">{label}</h3>
+						{locked && (
+							<Pill className="ml-2 !px-2 !py-1 text-xs bg-blue-100 text-blue-800 rounded">
+								{__('Pro', 'neve')}
+							</Pill>
+						)}
+					</div>
+
+					{description && (
+						<p className="text-gray-600">{description}</p>
+					)}
+				</div>
+
+				{afterTitle && (
+					<span className="ml-auto flex gap-3 items-center shrink-0">
+						{afterTitle}
+					</span>
+				)}
+			</div>
+			{children && <div>{children}</div>}
+		</div>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Controls/MultiselectControl.js b/assets/apps/dashboard/src/Components/Controls/MultiselectControl.js
new file mode 100644
index 0000000000..06feb141b3
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Controls/MultiselectControl.js
@@ -0,0 +1,80 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { LoaderCircle } from 'lucide-react';
+import { NEVE_STORE } from '../../utils/constants';
+import { changeOption } from '../../utils/rest';
+import MultiSelect from '../Common/Multiselect';
+import ControlWrap from './ControlWrap';
+
+const MultiSelectControl = ({
+	icon,
+	label,
+	description,
+	option,
+	isPro = true,
+	disabled,
+	locked,
+	choices = {},
+}) => {
+	const [loading, setLoading] = useState(false);
+
+	const { changeModuleOption, setToast } = useDispatch(NEVE_STORE);
+	const value = useSelect((select) => {
+		const { getOption, getProOption } = select(NEVE_STORE);
+
+		return isPro ? getProOption(option) : getOption(option);
+	});
+
+	const handleChange = (nextValues) => {
+		setLoading(true);
+
+		window.tiTrk?.with('neve').set(option, {
+			feature: 'module-settings',
+			featureComponent: option,
+			featureValue: nextValues,
+		});
+
+		changeModuleOption(option, nextValues);
+
+		changeOption(option, nextValues)
+			.then((r) => {
+				if (r.success) {
+					setToast(true);
+					return;
+				}
+				changeModuleOption(option, value);
+				setToast(false);
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	};
+
+	return (
+		<ControlWrap
+			label={label}
+			description={description}
+			icon={icon}
+			locked={locked}
+			afterTitle={
+				<>
+					{loading && (
+						<LoaderCircle
+							size={18}
+							className="animate-spin shrink-0"
+						/>
+					)}
+
+					<MultiSelect
+						choices={choices}
+						value={value}
+						disabled={loading || locked || disabled}
+						onChange={handleChange}
+					/>
+				</>
+			}
+		/>
+	);
+};
+
+export default MultiSelectControl;
diff --git a/assets/apps/dashboard/src/Components/Controls/SelectControl.js b/assets/apps/dashboard/src/Components/Controls/SelectControl.js
new file mode 100644
index 0000000000..15a3ff7ed3
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Controls/SelectControl.js
@@ -0,0 +1,66 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { NEVE_STORE } from '../../utils/constants';
+import { changeOption as changeSetting } from '../../utils/rest';
+
+import Select from '../Common/Select';
+import ControlWrap from './ControlWrap';
+
+export default ({
+	icon,
+	label,
+	description,
+	option,
+	isPro = true,
+	disabled,
+	locked,
+	choices,
+}) => {
+	const [loading, setLoading] = useState(false);
+
+	const { changeModuleOption, setToast } = useDispatch(NEVE_STORE);
+	const value = useSelect((select) => {
+		const { getOption, getProOption } = select(NEVE_STORE);
+
+		return isPro ? getProOption(option) : getOption(option);
+	});
+
+	const handleChange = (nextValue) => {
+		setLoading(true);
+		window.tiTrk?.with('neve').set(option, {
+			feature: 'module-settings',
+			featureComponent: option,
+			featureValue: nextValue,
+		});
+		changeSetting(option, nextValue)
+			.then((r) => {
+				if (r.success) {
+					changeModuleOption(option, nextValue);
+					setToast(true);
+					return;
+				}
+				setToast(false);
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	};
+
+	return (
+		<ControlWrap
+			description={description}
+			label={label}
+			icon={icon}
+			locked={locked}
+			afterTitle={
+				<Select
+					choices={choices}
+					value={value}
+					loading={loading}
+					disabled={disabled}
+					onChange={handleChange}
+				/>
+			}
+		></ControlWrap>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Controls/TextControl.js b/assets/apps/dashboard/src/Components/Controls/TextControl.js
new file mode 100644
index 0000000000..d1652585a1
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Controls/TextControl.js
@@ -0,0 +1,90 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { NEVE_STORE } from '../../utils/constants';
+import { changeOption } from '../../utils/rest';
+import Button from '../Common/Button';
+import TextInput from '../Common/TextInput';
+import ControlWrap from './ControlWrap';
+
+export default ({
+	icon,
+	label,
+	description,
+	option,
+	isPro = true,
+	disabled,
+	locked,
+	placeholder = '',
+}) => {
+	const { changeModuleOption, setToast } = useDispatch(NEVE_STORE);
+	const value = useSelect((select) => {
+		const { getOption, getProOption } = select(NEVE_STORE);
+
+		return isPro ? getProOption(option) : getOption(option);
+	});
+
+	const [loading, setLoading] = useState(false);
+
+	return (
+		<ControlWrap
+			label={label}
+			description={description}
+			icon={icon}
+			locked={locked}
+			afterTitle={
+				<form
+					disabled={loading || disabled || locked}
+					onSubmit={(e) => {
+						e.preventDefault();
+						setLoading(true);
+						changeOption(option, value)
+							.then((r) => {
+								if (r.success) {
+									setToast(true);
+									return;
+								}
+								setToast(r.message ? r.message : false);
+							})
+							.finally(() => {
+								setLoading(false);
+							});
+					}}
+				>
+					<div className="flex">
+						<TextInput
+							type="text"
+							id={option}
+							placeholder={placeholder}
+							disabled={loading || disabled || locked}
+							className="!border-r-0 !rounded-r-none px-2"
+							value={value}
+							onChange={(e) => {
+								changeModuleOption(option, e.target.value);
+								if (option === 'typekit_id') {
+									window.tiTrk?.with('neve').add({
+										feature: 'typekit-fonts',
+										featureComponent: 'typekit-id',
+										featureValue: 'enabled',
+									});
+								}
+							}}
+						/>
+
+						<Button
+							loading={loading}
+							type="submit"
+							isSecondary
+							disabled={loading || disabled || locked}
+							className="rounded-r"
+						>
+							{loading
+								? __('Saving', 'neve') + '...'
+								: __('Save', 'neve')}
+						</Button>
+					</div>
+				</form>
+			}
+		/>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Controls/ToggleControl.js b/assets/apps/dashboard/src/Components/Controls/ToggleControl.js
new file mode 100644
index 0000000000..eaff8f0243
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Controls/ToggleControl.js
@@ -0,0 +1,76 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { LucideLoaderCircle } from 'lucide-react';
+import { useState } from 'react';
+import { NEVE_STORE } from '../../utils/constants';
+import { changeOption } from '../../utils/rest';
+import Toggle from '../Common/Toggle';
+import ControlWrap from './ControlWrap';
+
+export default ({
+	icon,
+	label,
+	description,
+	option,
+	isPro = true,
+	disabled,
+	locked,
+}) => {
+	const [loading, setLoading] = useState(false);
+
+	const value = useSelect((select) => {
+		const { getOption, getProOption } = select(NEVE_STORE);
+
+		return isPro ? getProOption(option) : getOption(option);
+	});
+
+	const { setToast, changeModuleOption } = useDispatch(NEVE_STORE);
+
+	const onToggleChange = (nextValue) => {
+		setLoading(true);
+		window.tiTrk?.with('neve').set(option, {
+			feature: 'module-settings',
+			featureComponent: option,
+			featureValue: nextValue,
+		});
+		changeModuleOption(option, nextValue);
+		changeOption(option, nextValue)
+			.then((r) => {
+				if (!r.success) {
+					changeModuleOption(option, !nextValue);
+					setToast(false);
+
+					return;
+				}
+
+				setToast(true);
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	};
+
+	return (
+		<ControlWrap
+			label={label}
+			description={description}
+			icon={icon}
+			locked={locked}
+			afterTitle={
+				<>
+					{loading && (
+						<LucideLoaderCircle
+							size={20}
+							className="animate-spin"
+						/>
+					)}
+					<Toggle
+						checked={value}
+						onToggle={onToggleChange}
+						disabled={loading || disabled || locked}
+						loading={loading}
+					/>
+				</>
+			}
+		></ControlWrap>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Header.js b/assets/apps/dashboard/src/Components/Header.js
index 025bca5ec8..749707234b 100644
--- a/assets/apps/dashboard/src/Components/Header.js
+++ b/assets/apps/dashboard/src/Components/Header.js
@@ -1,20 +1,17 @@
 /* global neveDash */
-import { addUrlHash, getTabHash, tabs } from '../utils/common';
 import cn from 'classnames';
+import { getTabHash, tabs } from '../utils/common';
 
-import { __ } from '@wordpress/i18n';
 import { Fragment, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
-import { LucideBookOpen, LucideFileText } from 'lucide-react';
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	NEVE_HAS_VALID_PRO,
-	NEVE_IS_WHITELABEL,
-	NEVE_STORE,
-} from '../utils/constants';
+import { LucideBookOpen, LucideFileText } from 'lucide-react';
+import useLicenseData from '../Hooks/useLicenseData';
 import Container from '../Layout/Container';
-import Pill from './Common/Pill';
+import { NEVE_IS_WHITELABEL, NEVE_STORE } from '../utils/constants';
 import Button from './Common/Button';
+import Pill from './Common/Pill';
 
 const HeaderTopBar = ({ currentTab, setTab }) => {
 	const NAV_BUTTONS = {
@@ -30,6 +27,8 @@ const HeaderTopBar = ({ currentTab, setTab }) => {
 		},
 	};
 
+	const { isLicenseValid } = useLicenseData();
+
 	return (
 		<div className="border-b border-gray-100">
 			<Container>
@@ -46,7 +45,7 @@ const HeaderTopBar = ({ currentTab, setTab }) => {
 							{neveDash.strings.header}
 						</span>
 						<Pill type="secondary">
-							{NEVE_HAS_VALID_PRO
+							{isLicenseValid
 								? __('Pro', 'neve')
 								: __('Free', 'neve')}
 						</Pill>
@@ -78,16 +77,13 @@ const HeaderTopBar = ({ currentTab, setTab }) => {
 
 								return (
 									<Fragment key={slug}>
+										{index > 0 && (
+											<div className="w-px h-4 bg-gray-200 mx-3" />
+										)}
 										<Button isLink {...props}>
 											{icon}
 											<span>{label}</span>
 										</Button>
-
-										{index <
-											Object.keys(NAV_BUTTONS).length -
-												1 && (
-											<div className="w-px h-4 bg-gray-200 mx-3" />
-										)}
 									</Fragment>
 								);
 							}
@@ -104,45 +100,43 @@ const Navigation = ({ setTab, currentTab }) => {
 		<div className="border-b border-gray-200">
 			<Container>
 				<nav className="flex -mb-px">
-					{Object.entries(tabs).map(
-						([slug, { label, url, render }]) => {
-							if (!label) {
-								return null;
-							}
-							const itemClasses = cn([
-								'relative px-4 py-3 text-[13px] font-medium border-b-2',
-								{
-									'text-blue-600 border-blue-600':
-										currentTab === slug,
-									'border-transparent text-gray-600 hover:text-gray-900 transition-colors duration-150':
-										currentTab !== slug,
-								},
-							]);
-
-							const handleLinkClick = (e) => {
-								e.preventDefault();
-								setTab(slug);
-							};
-
-							const linkProps = {
-								href: url ? url : '#' + slug,
-							};
-
-							if (!url) {
-								linkProps.onClick = handleLinkClick;
-							}
-
-							return (
-								<a
-									{...linkProps}
-									key={slug}
-									className={itemClasses}
-								>
-									{label}
-								</a>
-							);
+					{Object.entries(tabs).map(([slug, { label, url }]) => {
+						if (!label) {
+							return null;
 						}
-					)}
+						const itemClasses = cn([
+							'relative px-4 py-3 font-medium border-b-2',
+							{
+								'text-blue-600 border-blue-600':
+									currentTab === slug,
+								'border-transparent text-gray-600 hover:text-gray-900 transition-colors duration-150':
+									currentTab !== slug,
+							},
+						]);
+
+						const handleLinkClick = (e) => {
+							e.preventDefault();
+							setTab(slug);
+						};
+
+						const linkProps = {
+							href: url ? url : '#' + slug,
+						};
+
+						if (!url) {
+							linkProps.onClick = handleLinkClick;
+						}
+
+						return (
+							<a
+								{...linkProps}
+								key={slug}
+								className={itemClasses}
+							>
+								{label}
+							</a>
+						);
+					})}
 				</nav>
 			</Container>
 		</div>
@@ -178,7 +172,7 @@ const Header = () => {
 
 	const handleTabSwitch = (slug) => {
 		setTab(slug);
-		addUrlHash(slug);
+		window.location.hash = slug;
 	};
 
 	return (
diff --git a/assets/apps/dashboard/src/Components/Notifications.js b/assets/apps/dashboard/src/Components/Notifications.js
index a676773d91..39d5a6c3c7 100644
--- a/assets/apps/dashboard/src/Components/Notifications.js
+++ b/assets/apps/dashboard/src/Components/Notifications.js
@@ -1,6 +1,7 @@
 /* global neveDash */
 import Notification from './Common/Notification';
 import Container from '../Layout/Container';
+import { TransitionWrapper } from './Common/TransitionWrapper';
 
 const Notifications = () => {
 	if (!neveDash.notifications) {
@@ -14,11 +15,16 @@ const Notifications = () => {
 		<Container className="grid gap-3">
 			{Object.keys(neveDash.notifications).map((slug, index) => {
 				return (
-					<Notification
+					<TransitionWrapper
 						key={index}
-						data={neveDash.notifications[slug]}
-						slug={slug}
-					/>
+						from="top"
+						className="delay-200"
+					>
+						<Notification
+							data={neveDash.notifications[slug]}
+							slug={slug}
+						/>
+					</TransitionWrapper>
 				);
 			})}
 		</Container>
diff --git a/assets/apps/dashboard/src/Components/PluginCard.js b/assets/apps/dashboard/src/Components/PluginCard.js
deleted file mode 100644
index e6068a8c99..0000000000
--- a/assets/apps/dashboard/src/Components/PluginCard.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/* global neveDash */
-import classnames from 'classnames';
-import { get } from '../utils/rest';
-
-import { sprintf, __ } from '@wordpress/i18n';
-import { Button, Dashicon, ExternalLink, Tooltip } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { withDispatch } from '@wordpress/data';
-
-const Card = ({ slug, data, setPluginState }) => {
-	const {
-		banner,
-		name,
-		description,
-		version,
-		author,
-		url,
-		premium,
-		network,
-	} = data;
-	const { canInstallPlugins, canActivatePlugins } = neveDash;
-	const action = data.cta;
-	const [inProgress, setInProgress] = useState(false);
-
-	const stringMap = {
-		install: {
-			static: __('Install', 'neve'),
-			progress: __('Installing', 'neve'),
-		},
-		activate: {
-			static: __('Activate', 'neve'),
-			progress: __('Activating', 'neve'),
-		},
-		deactivate: {
-			static: __('Deactivate', 'neve'),
-			progress: __('Deactivating', 'neve'),
-		},
-		external: __('Learn More', 'neve'),
-	};
-
-	const ctaContent = () => {
-		if (action === 'external') {
-			return null;
-		}
-
-		const isButtonDisabled = () => {
-			if (inProgress) {
-				return true;
-			}
-			return actionsAreDisabled;
-		};
-
-		return (
-			<Button
-				className="plugin-action"
-				isPrimary={['install', 'activate'].includes(action)}
-				isSecondary={'deactivate' === action}
-				disabled={isButtonDisabled()}
-				onClick={() => {
-					setInProgress(true);
-					if ('install' === action) {
-						installPlugin(slug).then((r) => {
-							if (!r.success) {
-								// Todo handle error with toasts?
-								setInProgress(false);
-								return false;
-							}
-							setInProgress(false);
-							setPluginState(slug, 'activate');
-						});
-						return false;
-					}
-					get(data[action], true).then((r) => {
-						if (!r.ok) {
-							// Todo handle error with toasts?
-							setInProgress(false);
-							return false;
-						}
-
-						if ('activate' === action) {
-							setPluginState(slug, 'deactivate');
-						} else {
-							setPluginState(slug, 'activate');
-						}
-						if ('templates-patterns-collection' === slug) {
-							window.location.href =
-								neveDash.tpcAdminURL +
-								(neveDash.canInstallPlugins
-									? '&onboarding=yes'
-									: '');
-						}
-						setInProgress(false);
-					});
-				}}
-			>
-				{!inProgress && stringMap[action].static}
-				{inProgress && (
-					<span
-						style={{
-							display: 'flex',
-							alignItems: 'center',
-						}}
-					>
-						<Dashicon icon="update" />
-						{stringMap[action].progress + '...'}
-					</span>
-				)}
-			</Button>
-		);
-	};
-
-	const actionsAreDisabled =
-		(!canInstallPlugins && action === 'install') ||
-		(!canActivatePlugins && action === 'activate') ||
-		(network && action === 'deactivate') ||
-		false;
-
-	const wrappedButtonContent = actionsAreDisabled ? (
-		<Tooltip
-			text={sprintf(
-				// translators: %s: Plugin name.
-				__('Ask your admin to handle %s on your site', 'neve'),
-				name
-			)}
-			position="top center"
-		>
-			{ctaContent()}
-		</Tooltip>
-	) : (
-		ctaContent()
-	);
-
-	return (
-		<div className={classnames(['card', 'plugin', slug])}>
-			<div className="card-header">
-				<img src={banner} alt={__('Banner Image', 'name')} />
-				{premium && <span className="premium-label">{'Premium'}</span>}
-			</div>
-			<div className="card-body">
-				<h3 className="card-title">{name}</h3>
-				<p className="card-description">{description}</p>
-			</div>
-			<div className="card-footer">
-				<div className="plugin-data">
-					{version && <span className="version">v{version} | </span>}
-					{author && <span className="author">{author}</span>}
-				</div>
-				{wrappedButtonContent}
-				{action === 'external' && (
-					<ExternalLink className="plugin-action" href={url}>
-						{stringMap[action]}
-					</ExternalLink>
-				)}
-			</div>
-		</div>
-	);
-};
-
-const installPlugin = (slug) => {
-	return new Promise((resolve) => {
-		wp.updates.ajax('install-plugin', {
-			slug,
-			success: () => {
-				resolve({ success: true });
-			},
-			error: () => {
-				// errorCode, errorMessage are params of err if we toast.
-				resolve({ success: false });
-			},
-		});
-	});
-};
-
-export default withDispatch((dispatch) => {
-	const { setPluginState } = dispatch('neve-dashboard');
-	return {
-		setPluginState: (slug, newState) => setPluginState(slug, newState),
-	};
-})(Card);
diff --git a/assets/apps/dashboard/src/Components/Loading.js b/assets/apps/dashboard/src/Components/SkeletonLoader.js
similarity index 94%
rename from assets/apps/dashboard/src/Components/Loading.js
rename to assets/apps/dashboard/src/Components/SkeletonLoader.js
index 3fa50cc1ba..59bed50123 100644
--- a/assets/apps/dashboard/src/Components/Loading.js
+++ b/assets/apps/dashboard/src/Components/SkeletonLoader.js
@@ -1,9 +1,9 @@
-const Loading = () => (
+const SkeletonLoader = () => (
 	<div className="antialiased grow flex flex-col gap-6 h-full">
 		<header className="bg-white z-50">
 			<div>
 				<div className="border-b border-gray-100">
-					<div className="max-w-[90vw] lg:container mx-auto px-2 lg:px-6">
+					<div className="max-w-[90vw] w-full lg:container mx-auto px-2 lg:px-6">
 						<div className="flex items-center justify-between h-14">
 							<div className="flex items-center space-x-3">
 								<div className="size-7 bg-gray-200 rounded-sm" />
@@ -46,7 +46,7 @@ const Loading = () => (
 			</div>
 		</header>
 
-		<div className="max-w-[90vw] lg:container mx-auto px-2 lg:px-6 flex flex-col lg:flex-row gap-6 h-full grow">
+		<div className="max-w-[90vw] w-full lg:container mx-auto px-2 lg:px-6 flex flex-col lg:flex-row gap-6 h-full grow">
 			<div className="grow">
 				<div className="grid gap-6">
 					<div className="p-6 rounded-lg bg-white shadow-sm">
@@ -128,4 +128,4 @@ const Loading = () => (
 	</div>
 );
 
-export default Loading;
+export default SkeletonLoader;
diff --git a/assets/apps/dashboard/src/Components/Snackbar.js b/assets/apps/dashboard/src/Components/Snackbar.js
index 444ec85ec6..1bbf3896cc 100644
--- a/assets/apps/dashboard/src/Components/Snackbar.js
+++ b/assets/apps/dashboard/src/Components/Snackbar.js
@@ -1,40 +1,75 @@
-import { Snackbar } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useState } from 'react';
 import { NEVE_STORE } from '../utils/constants';
+import Toast from './Common/Toast';
+
+const SingleToast = ({ message, type, onRemove }) => {
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			onRemove();
+		}, 3000);
+
+		return () => clearTimeout(timer);
+	}, [onRemove]);
+
+	return <Toast className="shadow-lg" type={type} message={message} />;
+};
 
 const GlobalSnackbar = () => {
+	const [toasts, setToasts] = useState([]);
 	const { setToast } = useDispatch(NEVE_STORE);
 
-	const { toast } = useSelect((select) => {
+	const toast = useSelect((select) => {
 		const { getToast } = select(NEVE_STORE);
-		return {
-			toast: getToast,
-		};
+		return getToast();
 	});
 
+	const buildToast = (message) => {
+		if (message === false) {
+			return {
+				message: __(
+					'Could not Update Option. Please try again.',
+					'neve'
+				),
+				type: 'error',
+			};
+		}
+		if ('boolean' !== typeof message) {
+			return { message, type: 'success' };
+		}
+		return { message: __('Option Updated', 'neve'), type: 'success' };
+	};
+
 	useEffect(() => {
-		setTimeout(() => {
-			setToast(null);
-		}, 3000);
-	}, []);
+		if (null === toast) {
+			return;
+		}
+
+		const newToast = {
+			id: Date.now(),
+			...buildToast(toast),
+		};
+
+		setToasts((prev) => [...prev, newToast]);
+		setToast(null);
+	}, [toast, setToast]);
 
-	const message = toast();
-	const style = {
-		opacity: null === message ? 0 : 1,
+	const onRemove = (id) => {
+		setToasts((prev) => prev.filter((item) => item.id !== id));
 	};
-	let renderToast = __('Option Updated', 'neve');
-	if (message === false) {
-		renderToast = __('Could not Update Option. Please try again.', 'neve');
-	}
-	if ('boolean' !== typeof message) {
-		renderToast = toast();
-	}
 
 	return (
-		<div style={style}>
-			<Snackbar className="fixed bottom-5 ml-5">{renderToast}</Snackbar>
+		<div className="fixed bottom-5 ml-5 grid gap-2 z-max">
+			{toasts.map(({ id, message, type }) => (
+				<SingleToast
+					key={id}
+					message={message}
+					type={type}
+					onRemove={() => onRemove(id)}
+				/>
+			))}
 		</div>
 	);
 };
diff --git a/assets/apps/dashboard/src/Components/TabsContent.js b/assets/apps/dashboard/src/Components/TabsContent.js
deleted file mode 100644
index 12ea40c627..0000000000
--- a/assets/apps/dashboard/src/Components/TabsContent.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { tabs } from '../utils/common';
-
-const TabsContent = ({ currentTab, setTab }) => {
-	return tabs[currentTab].render(setTab);
-};
-
-export default TabsContent;
diff --git a/assets/apps/dashboard/src/Hooks/useLicenseData.js b/assets/apps/dashboard/src/Hooks/useLicenseData.js
new file mode 100644
index 0000000000..69966efe21
--- /dev/null
+++ b/assets/apps/dashboard/src/Hooks/useLicenseData.js
@@ -0,0 +1,19 @@
+/* global neveDash */
+
+import { useSelect } from '@wordpress/data';
+import { NEVE_STORE } from '../utils/constants';
+
+export default () => {
+	const { license } = useSelect((select) => {
+		const { getLicense } = select(NEVE_STORE);
+		return {
+			license: getLicense(),
+		};
+	});
+
+	return {
+		isLicenseValid: neveDash.pro && license && 'valid' === license.valid,
+		licenseTier: (license && license.tier) || 1,
+		license,
+	};
+};
diff --git a/assets/apps/dashboard/src/Layout/Container.js b/assets/apps/dashboard/src/Layout/Container.js
index 5d6876e092..1e2d3443f1 100644
--- a/assets/apps/dashboard/src/Layout/Container.js
+++ b/assets/apps/dashboard/src/Layout/Container.js
@@ -3,7 +3,7 @@ import cn from 'classnames';
 export default ({ children, className }) => (
 	<div
 		className={cn([
-			'max-w-[90vw] lg:container mx-auto px-2 lg:px-6',
+			'max-w-[90vw] w-full lg:container mx-auto px-2 lg:px-6',
 			className,
 		])}
 	>
diff --git a/assets/apps/dashboard/src/store/reducer.js b/assets/apps/dashboard/src/store/reducer.js
index 9612c35204..375854f26c 100644
--- a/assets/apps/dashboard/src/store/reducer.js
+++ b/assets/apps/dashboard/src/store/reducer.js
@@ -4,7 +4,6 @@ import { getTabHash } from '../utils/common';
 const initialState = {
 	settings: {},
 	plugins: neveDash.plugins || {},
-	tier: neveDash.pro ? neveDash.license.tier : 0,
 	toast: null,
 	currentTab: 'start',
 	license: neveDash.pro ? neveDash.license : {},
diff --git a/assets/apps/dashboard/src/tailwind.config.js b/assets/apps/dashboard/src/tailwind.config.js
index b648c321a0..9b1fce30e4 100644
--- a/assets/apps/dashboard/src/tailwind.config.js
+++ b/assets/apps/dashboard/src/tailwind.config.js
@@ -1,4 +1,3 @@
-/** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['assets/apps/dashboard/src/**/*.js'],
 	theme: {
diff --git a/assets/apps/dashboard/src/utils/common.js b/assets/apps/dashboard/src/utils/common.js
index 3732eb75b0..4773307c57 100644
--- a/assets/apps/dashboard/src/utils/common.js
+++ b/assets/apps/dashboard/src/utils/common.js
@@ -3,16 +3,11 @@ import compareVersions from 'compare-versions';
 
 import StarterSitesUnavailable from '../Components/Content/StarterSitesUnavailable';
 import Welcome from '../Components/Content/Welcome';
-import Pro from '../Components/Content/Pro';
-
-import Changelog from '../Components/Content/Changelog';
 import FreePro from '../Components/Content/FreePro';
-import { __ } from '@wordpress/i18n';
-import { NEVE_HAS_VALID_PRO } from './constants';
+import Settings from '../Components/Content/Settings';
+import Changelog from '../Components/Content/Changelog';
 
-const addUrlHash = (hash) => {
-	window.location.hash = hash;
-};
+import { __ } from '@wordpress/i18n';
 
 const getTabHash = () => {
 	let hash = window.location.hash;
@@ -45,7 +40,7 @@ const tabs = {
 	},
 	settings: {
 		label: __('Settings', 'neve'),
-		render: () => <Pro hasPro={NEVE_HAS_VALID_PRO} />,
+		render: () => <Settings />,
 	},
 	changelog: {
 		render: () => <Changelog />,
@@ -69,35 +64,15 @@ if (activeTPC && properTPC) {
 	tabs['starter-sites'].url = neveDash.tpcAdminURL;
 }
 
-if (
-	(neveDash.pro || neveDash.hasOldPro) &&
-	neveDash.license &&
-	neveDash.license.valid === 'valid'
-) {
-	delete tabs['custom-layouts'];
-}
-
 if (neveDash.pro || neveDash.hasOldPro) {
-	tabs.settings = {
-		label: __('Settings', 'neve'),
-		render: () => <Pro />,
-	};
 	delete tabs['free-pro'];
 }
 
 if (neveDash.whiteLabel) {
 	delete tabs.changelog;
-	delete tabs.plugins;
 	if (neveDash.whiteLabel.hideStarterSites) {
 		delete tabs['starter-sites'];
 	}
 }
 
-if (neveDash.hidePluginsTab) {
-	delete tabs.plugins;
-}
-
-const untrailingSlashIt = (str) => str.replace(/\/$/, '');
-const trailingSlashIt = (str) => untrailingSlashIt(str) + '/';
-
-export { addUrlHash, getTabHash, trailingSlashIt, untrailingSlashIt, tabs };
+export { getTabHash, tabs };
diff --git a/assets/apps/dashboard/src/utils/constants.js b/assets/apps/dashboard/src/utils/constants.js
index 2bdfe80d34..5908c8a0de 100644
--- a/assets/apps/dashboard/src/utils/constants.js
+++ b/assets/apps/dashboard/src/utils/constants.js
@@ -2,26 +2,26 @@
 
 import {
 	LucideArrowUp,
+	LucideBriefcase,
+	LucideCreditCard,
 	LucideGalleryVertical,
 	LucideGauge,
 	LucideGraduationCap,
+	LucideImage,
+	LucideLayoutTemplate,
 	LucideNewspaper,
 	LucidePalette,
 	LucidePanelRightDashed,
 	LucidePanelTopDashed,
 	LucidePin,
+	LucideRss,
 	LucideScanBarcode,
 	LucideScroll,
-	LucideSettings,
 	LucideShield,
 	LucideShoppingCart,
-	LucideTypeOutline,
-	LucideToyBrick,
-	LucideLayoutTemplate,
-	LucideCreditCard,
-	LucideImage,
 	LucideTimer,
-	LucideRss,
+	LucideToyBrick,
+	LucideTypeOutline,
 } from 'lucide-react';
 
 export const NEVE_STORE = 'neve-dashboard';
@@ -32,7 +32,7 @@ export const NEVE_HAS_VALID_PRO =
 
 export const NEVE_HAS_PRO = neveDash.pro;
 
-export const NEVE_IS_WHITELABEL = neveDash.whiteLabel;
+export const NEVE_IS_WHITELABEL = !neveDash.modules.white_label;
 
 export const NEVE_HIDE_PLUGINS = neveDash.hidePluginsTab;
 
@@ -45,7 +45,7 @@ export const NEVE_MODULE_ICON_MAP = {
 	scroll_to_top: LucideArrowUp,
 	performance_features: LucideGauge,
 	block_editor_booster: LucideScroll,
-	white_label: LucideSettings,
+	white_label: LucideBriefcase,
 	custom_layouts: LucideGalleryVertical,
 	elementor_booster: LucidePalette,
 	lifterlms_booster: LucideGraduationCap,
diff --git a/assets/apps/dashboard/src/utils/rest.js b/assets/apps/dashboard/src/utils/rest.js
index 36d28bffea..5cce1ce5a6 100644
--- a/assets/apps/dashboard/src/utils/rest.js
+++ b/assets/apps/dashboard/src/utils/rest.js
@@ -12,18 +12,19 @@ export const fetchOptions = () => {
 };
 
 export const changeOption = (option, value, module = false, pro = true) => {
-	option = (pro ? 'nv_pro_' : '') + option + (module ? '_status' : '');
+	const actualOption =
+		(pro ? 'nv_pro_' : '') + option + (module ? '_status' : '');
 
 	const model = new models.Settings({
-		[option]: value,
+		[actualOption]: value,
 	});
 
 	return new Promise((resolve) => {
 		model.save().then((r) => {
-			if (!r || !r[option] === value) {
+			if (!r || !r[actualOption] === value) {
 				resolve({ success: false });
 			}
-			resolve(isValid(option, r));
+			resolve(isValid(actualOption, r));
 		});
 	});
 };
diff --git a/inc/admin/dashboard/main.php b/inc/admin/dashboard/main.php
index e54fdf73af..61e2019c0d 100755
--- a/inc/admin/dashboard/main.php
+++ b/inc/admin/dashboard/main.php
@@ -8,6 +8,7 @@
 namespace Neve\Admin\Dashboard;
 
 use Neve\Core\Limited_Offers;
+use Neve\Core\Settings\Config;
 use Neve\Core\Theme_Info;
 use Neve\Core\Tracker;
 
@@ -143,6 +144,16 @@ public function register_settings() {
 				'default'      => '',
 			]
 		);
+
+		register_setting(
+			'neve_settings',
+			Config::OPTION_LOCAL_GOOGLE_FONTS_HOSTING,
+			[
+				'type'         => 'boolean',
+				'show_in_rest' => true,
+				'default'      => false,
+			]
+		);
 	}
 
 	/**
@@ -333,7 +344,6 @@ private function get_localization() {
 			'isValidLicense'          => $this->has_valid_addons(),
 			'notifications'           => $this->get_notifications(),
 			'customizerShortcuts'     => $this->get_customizer_shortcuts(),
-			'plugins'                 => $this->get_useful_plugins(),
 			'plugins'                 => $this->get_recommended_plugins(),
 			'modules'                 => $this->get_modules(),
 			'featureData'             => $this->get_free_pro_features(),
@@ -736,12 +746,6 @@ private function get_recommended_plugins() {
 
 			$action = $this->plugin_helper->get_plugin_state( $slug );
 
-			if ( $action === 'deactivate' ) {
-				unset( $plugins[ $slug ] );
-
-				continue;
-			}
-
 			$plugins[ $slug ] = array_merge(
 				[
 					'cta'        => $action,