diff --git a/src/App.tsx b/src/App.tsx
index 5b60ca0..ea12084 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import {
 	DEFAULT_THEME,
 	MantineProvider,
+	colorsTuple,
 	createTheme,
 	mergeMantineTheme,
 } from '@mantine/core';
@@ -13,7 +14,7 @@ import {
 	createBrowserRouter,
 	createRoutesFromElements,
 } from 'react-router-dom';
-import { Loading, MainLayout, ThemeProvider } from './components';
+import { Loading, MainLayout } from './components';
 import '@mantine/core/styles.css';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './index.css';
@@ -32,11 +33,18 @@ function App() {
 		useCommonHooks();
 	const [loaded, setLoaded] = useState<boolean>(false);
 	const overrides = createTheme({
+		primaryColor: 'primary',
+		colors: {
+			primary: colorsTuple(theme.primaryColor),
+			accent: colorsTuple(theme.accentColor),
+			background: colorsTuple(theme.backgroundColor),
+			border: colorsTuple(theme.borderColor),
+			search: colorsTuple(theme.searchColor),
+		},
 		white: theme?.backgroundColor,
 		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
 	});
 	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
-
 	const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
@@ -104,12 +112,10 @@ function App() {
 		<>
 			{theme && (
 				<MantineProvider theme={mantineTheme}>
-					<ThemeProvider theme={theme}>
-						<ToastContainer />
-						<Loading loaded={loaded} />
-						<RouterProvider router={router} />
-						<ReactQueryDevtools initialIsOpen={false} />
-					</ThemeProvider>
+					<ToastContainer />
+					<Loading loaded={loaded} />
+					<RouterProvider router={router} />
+					<ReactQueryDevtools initialIsOpen={false} />
 				</MantineProvider>
 			)}
 		</>
diff --git a/src/components/HelpModal/HelpModal.tsx b/src/components/HelpModal/HelpModal.tsx
index 90c26a6..7868ecf 100644
--- a/src/components/HelpModal/HelpModal.tsx
+++ b/src/components/HelpModal/HelpModal.tsx
@@ -21,7 +21,7 @@ export function HelpModal({
 	applicationData: Application[];
 	providerData: Provider[];
 }) {
-	const { theme, isMobile, modalStyle } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	return (
 		<Modal.Root
 			size={'60%'}
@@ -36,7 +36,6 @@ export function HelpModal({
 				setProviderURL('https://www.google.com/search?q=');
 				closeProviderModal();
 			}}
-			style={modalStyle}
 			closeOnEscape
 			closeOnClickOutside
 		>
@@ -57,7 +56,7 @@ export function HelpModal({
 								};
 							})}
 						/>
-						<Divider my={8} color={theme.accentColor} />
+						<Divider my={8} color={'var(--mantine-color-accent-0)'} />
 						<HelpSection
 							name={'Available Applications'}
 							items={applicationData.map((application: Application) => {
diff --git a/src/components/HelpModal/HelpSection.tsx b/src/components/HelpModal/HelpSection.tsx
index b886287..3b5add7 100644
--- a/src/components/HelpModal/HelpSection.tsx
+++ b/src/components/HelpModal/HelpSection.tsx
@@ -1,10 +1,8 @@
 import { Divider, Group } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
 import type { SearchShortcut } from 'types';
 import HintItem from './HintItem';
 
 function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
-	const { theme } = useCommonHooks();
 	return (
 		<>
 			<h3
@@ -14,17 +12,17 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
 					marginTop: 0,
 					marginBottom: -32,
 					borderRadius: '8px',
-					color: theme.backgroundColor,
-					backgroundColor: theme.borderColor,
+					color: 'var(--mantine-color-background-0)',
+					backgroundColor: 'var(--mantine-color-border-0)',
 				}}
 			>
 				{name}
 			</h3>
-			<Divider py={8} color={theme.accentColor} />
+			<Divider py={8} color={'var(--mantine-color-accent-0)'} />
 			<Group
 				style={{
 					width: '100%',
-					backgroundColor: theme.searchColor,
+					backgroundColor: 'var(--mantine-color-search-0)',
 					borderRadius: '8px',
 					padding: '24px',
 					justifyItems: 'center',
diff --git a/src/components/HelpModal/HintItem.tsx b/src/components/HelpModal/HintItem.tsx
index 8f3e4e3..2604e8c 100644
--- a/src/components/HelpModal/HintItem.tsx
+++ b/src/components/HelpModal/HintItem.tsx
@@ -10,13 +10,13 @@ function HintItem({ command, name }: { command: string; name: string }) {
 				display: 'flex',
 				padding: '8px',
 				borderRadius: '10px',
-				backgroundColor: 'var(--color-background)',
+				backgroundColor: 'var(--mantine-color-background-0)',
 			}}
 		>
 			<Text
 				style={{
-					color: 'var(--color-background)',
-					backgroundColor: 'var(--color-text-pri)',
+					color: 'var(--mantine-color-background-0)',
+					backgroundColor: 'var(--mantine-color-primary-0)',
 					padding: '8px',
 					borderTopLeftRadius: '10px',
 					borderBottomLeftRadius: '10px',
@@ -26,8 +26,8 @@ function HintItem({ command, name }: { command: string; name: string }) {
 			</Text>
 			<Text
 				style={{
-					color: 'var(--color-background)',
-					backgroundColor: 'var(--color-text-acc)',
+					color: 'var(--mantine-color-background-0)',
+					backgroundColor: 'var(--mantine-color-accent-0)',
 					padding: '8px',
 					borderTopRightRadius: '10px',
 					borderBottomRightRadius: '10px',
diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx
index 7e45b7f..52993fb 100644
--- a/src/components/MainLayout.tsx
+++ b/src/components/MainLayout.tsx
@@ -1,10 +1,17 @@
 import { Box } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { Outlet } from 'react-router-dom';
 import { boxClasses } from 'styles';
 
 export function MainLayout() {
+	const { theme } = useCommonHooks();
 	return (
-		<Box className={boxClasses.layoutContainer}>
+		<Box
+			className={boxClasses.layoutContainer}
+			style={{
+				'--image-background': `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
+			}}
+		>
 			<Outlet />
 		</Box>
 	);
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
deleted file mode 100644
index a2d4da4..0000000
--- a/src/components/ThemeProvider.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Box } from '@mantine/core';
-import type { Theme } from 'types';
-
-export function ThemeProvider({
-	theme,
-	children,
-}: { theme: Theme; children: React.ReactNode }) {
-	return (
-		<Box
-			style={{
-				'--color-text-pri': theme.primaryColor,
-				'--color-text-acc': theme.accentColor,
-				'--color-background': theme.backgroundColor,
-				'--color-border': theme.borderColor,
-				'--color-search-background': theme.searchColor,
-				'--image-background': `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
-				'--toastify-color-light': `hwb(from ${theme.primaryColor} h w b / 0.25)`,
-				'--toastify-color-dark': `hwb(from ${theme.primaryColor} h w b / 0.25)`,
-				'--toastify-text-color-light': theme.primaryColor,
-				'--toastify-text-color-dark': theme.primaryColor,
-				'--toastify-color-progress-light': theme.accentColor,
-				'--toastify-color-progress-bgo': 0.2,
-			}}
-		>
-			{children}
-		</Box>
-	);
-}
diff --git a/src/components/WeatherModal/CurrentWeather.tsx b/src/components/WeatherModal/CurrentWeather.tsx
index 5b40579..b8dea97 100644
--- a/src/components/WeatherModal/CurrentWeather.tsx
+++ b/src/components/WeatherModal/CurrentWeather.tsx
@@ -39,8 +39,8 @@ export default function CurrentWeather({ current }: { current: CW }) {
 					justify='space-between'
 					style={{
 						width: '100%',
-						color: 'var(--color-text-pri)',
-						backgroundColor: 'var(--color-search-background)',
+						color: 'var(--mantine-color-primary-0)',
+						backgroundColor: 'var(--mantine-color-search-0)',
 						padding: '1rem',
 						borderRadius: '8px',
 						paddingBottom: '.5rem',
diff --git a/src/components/WeatherModal/ExtendedForecastCard.tsx b/src/components/WeatherModal/ExtendedForecastCard.tsx
index b312925..e9598fc 100644
--- a/src/components/WeatherModal/ExtendedForecastCard.tsx
+++ b/src/components/WeatherModal/ExtendedForecastCard.tsx
@@ -14,7 +14,7 @@ export default function ExtendedForecastCard({
 			w={'100%'}
 			justify='space-between'
 			style={{
-				backgroundColor: 'var(--color-search-background)',
+				backgroundColor: 'var(--mantine-color-search-0)',
 				padding: '1rem',
 				borderRadius: '8px',
 				paddingBottom: '.5rem',
@@ -43,7 +43,7 @@ export default function ExtendedForecastCard({
 							key={item.name}
 							gap={0}
 							align='center'
-							bg={'var(--color-background)'}
+							bg={'var(--mantine-color-background-0)'}
 							style={{
 								borderRadius: '8px',
 							}}
diff --git a/src/components/WeatherModal/WeatherGraphs.tsx b/src/components/WeatherModal/WeatherGraphs.tsx
index b61e9a7..29a6721 100644
--- a/src/components/WeatherModal/WeatherGraphs.tsx
+++ b/src/components/WeatherModal/WeatherGraphs.tsx
@@ -20,7 +20,7 @@ export default function WeatherGraphs({
 			return (
 				<Stack
 					style={{
-						backgroundColor: 'var(--color-background)',
+						backgroundColor: 'var(--mantine-color-background-0)',
 						padding: '1rem',
 						borderRadius: '8px',
 					}}
@@ -41,7 +41,7 @@ export default function WeatherGraphs({
 	return (
 		<Stack
 			style={{
-				background: 'var(--color-search-background)',
+				background: 'var(--mantine-color-search-0)',
 				padding: '.5rem',
 				borderRadius: '.5rem',
 			}}
@@ -50,7 +50,7 @@ export default function WeatherGraphs({
 				<ComposedChart data={hourlyForecast}>
 					<XAxis
 						type='category'
-						stroke={'var(--color-text-pri)'}
+						stroke={'var(--mantine-color-primary-0)'}
 						dataKey={(data: HourlyForecast) => {
 							return new Date(data.startTime).toLocaleTimeString('en-US', {
 								hour: 'numeric',
@@ -59,7 +59,7 @@ export default function WeatherGraphs({
 						}}
 					/>
 					<YAxis
-						stroke={'var(--color-text-pri)'}
+						stroke={'var(--mantine-color-primary-0)'}
 						unit={'°F'}
 						domain={['dataMin', 'dataMax']}
 					/>
@@ -70,8 +70,8 @@ export default function WeatherGraphs({
 						type='monotone'
 						name='Temperature'
 						dataKey='temperature'
-						stroke={'var(--color-text-pri)'}
-						dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
+						stroke={'var(--mantine-color-primary-0)'}
+						dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
 					/>
 					<Line
 						unit={'°F'}
@@ -80,17 +80,17 @@ export default function WeatherGraphs({
 						dataKey={(data: HourlyForecast) => {
 							return (data.dewpoint.value * 9) / 5 + 32;
 						}}
-						stroke={'var(--color-text-acc)'}
-						dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
+						stroke={'var(--mantine-color-accent-0)'}
+						dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
 					/>
-					<Legend style={{ background: 'var(--color-search-background)' }} />
+					<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
 				</ComposedChart>
 			</ResponsiveContainer>
 			<ResponsiveContainer width={'100%'} height={150}>
 				<ComposedChart data={hourlyForecast}>
 					<XAxis
 						type='category'
-						stroke={'var(--color-text-pri)'}
+						stroke={'var(--mantine-color-primary-0)'}
 						dataKey={(data: HourlyForecast) => {
 							return new Date(data.startTime).toLocaleTimeString('en-US', {
 								hour: 'numeric',
@@ -98,7 +98,7 @@ export default function WeatherGraphs({
 							});
 						}}
 					/>
-					<YAxis stroke={'var(--color-text-pri)'} unit={'%'} domain={[0, 100]} />
+					<YAxis stroke={'var(--mantine-color-primary-0)'} unit={'%'} domain={[0, 100]} />
 					<CartesianGrid stroke='#f5f5f522' />
 					<Tooltip content={<CustomTooltip />} />
 					<Area
@@ -108,9 +108,9 @@ export default function WeatherGraphs({
 						dataKey={(data: HourlyForecast) => {
 							return data.probabilityOfPrecipitation.value;
 						}}
-						stroke={'var(--color-text-pri)'}
-						fill={'var(--color-text-pri)'}
-						dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
+						stroke={'var(--mantine-color-primary-0)'}
+						fill={'var(--mantine-color-primary-0)'}
+						dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
 					/>
 					<Area
 						unit={'%'}
@@ -119,11 +119,11 @@ export default function WeatherGraphs({
 						dataKey={(data: HourlyForecast) => {
 							return data.relativeHumidity.value;
 						}}
-						stroke={'var(--color-text-acc)'}
-						fill={'var(--color-text-acc)'}
-						dot={{ stroke: 'var(--color-text-pri)', strokeWidth: 1 }}
+						stroke={'var(--mantine-color-accent-0)'}
+						fill={'var(--mantine-color-accent-0)'}
+						dot={{ stroke: 'var(--mantine-color-primary-0)', strokeWidth: 1 }}
 					/>
-					<Legend style={{ background: 'var(--color-search-background)' }} />
+					<Legend style={{ background: 'var(--mantine-color-search-0)' }} />
 				</ComposedChart>
 			</ResponsiveContainer>
 		</Stack>
diff --git a/src/components/WeatherModal/WeatherModal.tsx b/src/components/WeatherModal/WeatherModal.tsx
index c28f328..339beb6 100644
--- a/src/components/WeatherModal/WeatherModal.tsx
+++ b/src/components/WeatherModal/WeatherModal.tsx
@@ -26,7 +26,7 @@ export function WeatherModal({
 	setProviderURL: (url: string) => void;
 	closeWeatherModal: () => void;
 }) {
-	const { isMobile, currentUser, currentLocation, modalStyle } = useCommonHooks();
+	const { isMobile, currentUser, currentLocation } = useCommonHooks();
 	const { data: hourly } = useWeatherAPI({
 		endpoint: 'hourly',
 		office: currentLocation.office,
@@ -54,7 +54,6 @@ export function WeatherModal({
 				setProviderURL('https://www.google.com/search?q=');
 				closeWeatherModal();
 			}}
-			style={modalStyle}
 			closeOnEscape
 			closeOnClickOutside
 		>
@@ -62,7 +61,10 @@ export function WeatherModal({
 			<Modal.Content>
 				<Modal.Header>
 					<Modal.Title>
-						<Group gap={8} style={{ borderBottom: '1px solid var(--color-border)' }}>
+						<Group
+							gap={8}
+							style={{ borderBottom: '1px solid var(--mantine-color-border-0)' }}
+						>
 							<Text fz={18} fw={200}>
 								Weather Forecast for{' '}
 							</Text>
diff --git a/src/components/index.ts b/src/components/index.ts
index 4afbd2e..d66a9bd 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,4 @@
 export { HelpModal } from './HelpModal/HelpModal';
 export { WeatherModal } from './WeatherModal/WeatherModal';
-export { ThemeProvider } from './ThemeProvider';
 export { MainLayout } from './MainLayout';
 export { Loading } from './Loading';
diff --git a/src/hooks/useCommonHooks.ts b/src/hooks/useCommonHooks.ts
index d584e06..6a6ddfe 100644
--- a/src/hooks/useCommonHooks.ts
+++ b/src/hooks/useCommonHooks.ts
@@ -72,15 +72,6 @@ export function useCommonHooks() {
 		},
 	});
 
-	const modalStyle = {
-		'--color-text-pri': theme?.primaryColor,
-		'--color-text-acc': theme?.accentColor,
-		'--color-background': theme?.backgroundColor,
-		'--color-border': theme?.borderColor,
-		'--color-search-background': theme?.searchColor,
-		'--image-background': `url(${theme?.backgroundImage})`,
-	};
-
 	const urlPattern = new RegExp(
 		'^(https?:\\/\\/)?' + // protocol
 			'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
@@ -131,7 +122,6 @@ export function useCommonHooks() {
 		isMobile,
 		theme,
 		setTheme,
-		modalStyle,
 		urlPattern,
 		fixDigits,
 		reorder,
diff --git a/src/pages/homepage/components/Search/Search.tsx b/src/pages/homepage/components/Search/Search.tsx
index 6ba18b8..e0c45a8 100644
--- a/src/pages/homepage/components/Search/Search.tsx
+++ b/src/pages/homepage/components/Search/Search.tsx
@@ -325,7 +325,7 @@ export default function Search({
 						)}
 					</Group>
 					<Group justify='space-between' w={'80%'}>
-						<Text c={theme.primaryColor}>{item.option.searchTerm}</Text>
+						<Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
 						<Text
 							style={{
 								color: `${theme.primaryColor}55`,
@@ -379,7 +379,7 @@ export default function Search({
 					</Text>
 				</Group>
 				<Group justify='space-between' w={'80%'}>
-					<Text c={theme.primaryColor}>{item.option.searchTerm}</Text>
+					<Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
 					<Text
 						style={{
 							color: `${theme.primaryColor}55`,
@@ -460,11 +460,12 @@ export default function Search({
 				value={searchValue}
 				searchValue={searchValue}
 				placeholder={placeholderValue}
-				nothingFoundMessage={<Text c={theme.primaryColor}>Nothing found...</Text>}
+				nothingFoundMessage={
+					<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
+				}
 				data-active={searchValue !== ''}
 				dropdownOpened={dropdownOpened}
 				comboboxProps={{
-					withinPortal: false,
 					transitionProps: { transition: 'fade', duration: 200 },
 				}}
 				spellCheck='true'
diff --git a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx
index 72556c6..cdece57 100644
--- a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx
+++ b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx
@@ -114,7 +114,6 @@ function SettingsButton() {
 			<Menu
 				classNames={menuClasses}
 				width={isMobile ? '98%' : 'auto'}
-				withinPortal={false}
 				withArrow
 				shadow='md'
 				position='top'
@@ -132,7 +131,7 @@ function SettingsButton() {
 							theme.backgroundImage.toLowerCase() !== 'none' &&
 							theme.backgroundImage !== undefined
 								? 'transparent'
-								: theme.backgroundColor,
+								: 'var(--mantine-color-background-0)',
 					}}
 				>
 					<Group p={'1rem'} gap={12}>
@@ -183,7 +182,10 @@ function SettingsButton() {
 										options: selectClasses.menuSelectOptions,
 										option: selectClasses.menuSelectOption,
 									}}
-									comboboxProps={{ withinPortal: false }}
+									comboboxProps={{
+										withinPortal: false,
+										width: 'fit-content',
+									}}
 								/>
 							</Stack>
 							<Stack
@@ -195,19 +197,23 @@ function SettingsButton() {
 							>
 								<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
 								<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
-									<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow>
+									<Tooltip
+										label='Shuffle Themes'
+										color={'var(--mantine-color-primary-0)'}
+										withArrow
+									>
 										<ActionIcon
 											className={actionIconClasses.menuActions}
 											classNames={actionIconClasses}
 											style={{
 												backgroundColor:
 													currentTheme === 'random'
-														? `${theme?.searchColor === theme.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
+														? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
 														: 'transparent',
 												color:
 													currentTheme === 'random'
-														? theme.accentColor
-														: theme.primaryColor,
+														? 'var(--mantine-color-accent-0)'
+														: 'var(--mantine-color-primary-0)',
 											}}
 											onClick={() => {
 												setCurrentTheme(
@@ -219,13 +225,17 @@ function SettingsButton() {
 											<FiShuffle />
 										</ActionIcon>
 									</Tooltip>
-									<Tooltip label='Random Theme' color={theme.primaryColor} withArrow>
+									<Tooltip
+										label='Random Theme'
+										color={'var(--mantine-color-primary-0)'}
+										withArrow
+									>
 										<ActionIcon
 											className={actionIconClasses.menuActions}
 											classNames={actionIconClasses}
 											style={{
 												backgroundColor: 'transparent',
-												color: theme.primaryColor,
+												color: 'var(--mantine-color-primary-0)',
 											}}
 											onClick={() => {
 												setCurrentThemePlaylist('All');
@@ -266,7 +276,10 @@ function SettingsButton() {
 										options: selectClasses.menuSelectOptions,
 										option: selectClasses.menuSelectOption,
 									}}
-									comboboxProps={{ withinPortal: false }}
+									comboboxProps={{
+										withinPortal: false,
+										width: 'fit-content',
+									}}
 									onChange={(_value, option: ComboboxItem) => {
 										setCurrentThemePlaylist(option.value);
 										if (option.value !== 'Time of Day') {
@@ -309,8 +322,8 @@ function SettingsButton() {
 										position: 'absolute',
 										left: '-12px',
 										top: '-8px',
-										backgroundColor: theme.primaryColor,
-										color: theme.backgroundColor,
+										backgroundColor: 'var(--mantine-color-primary-0)',
+										color: 'var(--mantine-color-background-0)',
 									}}
 								>
 									Apps
@@ -349,7 +362,9 @@ function SettingsButton() {
 											setAppFilter(data);
 										}}
 										classNames={multiSelectClasses}
-										comboboxProps={{ withinPortal: false }}
+										comboboxProps={{
+											withinPortal: false,
+										}}
 									/>
 									<Select
 										label={'Sorting'}
@@ -362,7 +377,9 @@ function SettingsButton() {
 											options: selectClasses.menuSelectOptions,
 											option: selectClasses.menuSelectOption,
 										}}
-										comboboxProps={{ withinPortal: false }}
+										comboboxProps={{
+											withinPortal: false,
+										}}
 										onChange={(_value, option: ComboboxItem) => {
 											setAppSort(option.value);
 										}}
@@ -388,8 +405,8 @@ function SettingsButton() {
 										position: 'absolute',
 										left: '-12px',
 										top: '-8px',
-										backgroundColor: theme.primaryColor,
-										color: theme.backgroundColor,
+										backgroundColor: 'var(--mantine-color-primary-0)',
+										color: 'var(--mantine-color-background-0)',
 									}}
 								>
 									Bookmarks
@@ -428,7 +445,9 @@ function SettingsButton() {
 											setBookmarkFilter(data);
 										}}
 										classNames={multiSelectClasses}
-										comboboxProps={{ withinPortal: false }}
+										comboboxProps={{
+											withinPortal: false,
+										}}
 									/>
 									<Select
 										label={'Sorting'}
@@ -441,7 +460,9 @@ function SettingsButton() {
 											options: selectClasses.menuSelectOptions,
 											option: selectClasses.menuSelectOption,
 										}}
-										comboboxProps={{ withinPortal: false }}
+										comboboxProps={{
+											withinPortal: false,
+										}}
 										onChange={(_value, option: ComboboxItem) => {
 											setBookmarkSort(option.value);
 										}}
diff --git a/src/pages/settings/components/Applications/AppSettingsItem.tsx b/src/pages/settings/components/Applications/AppSettingsItem.tsx
index b3a400a..7c95614 100644
--- a/src/pages/settings/components/Applications/AppSettingsItem.tsx
+++ b/src/pages/settings/components/Applications/AppSettingsItem.tsx
@@ -20,11 +20,13 @@ function AppSettingsItem({
 	const Icon = allIcons[icon];
 	const [textDecoration, setTextDecoration] = useState<string>('none');
 	const [hover, setHover] = useState<boolean>(false);
-	const { isMobile, theme } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	return (
 		<Box pos={'relative'}>
 			{enabled === 0 && (
-				<Tooltip label={<Text c={theme.primaryColor}>This app is disabled</Text>}>
+				<Tooltip
+					label={<Text c={'var(--mantine-color-primary-0)'}>This app is disabled</Text>}
+				>
 					<ActionIcon
 						className={actionIconClasses.settingsTooltip}
 						classNames={actionIconClasses}
diff --git a/src/pages/settings/components/Applications/Applications.tsx b/src/pages/settings/components/Applications/Applications.tsx
index 8710fdd..c4b6565 100644
--- a/src/pages/settings/components/Applications/Applications.tsx
+++ b/src/pages/settings/components/Applications/Applications.tsx
@@ -47,7 +47,7 @@ const ApplicationSettings = () => {
 	});
 	const [applications, setApplications] = useState<Application[]>([]);
 	const [applicationList, setApplicationList] = useState<Application[]>([]);
-	const { theme, isMobile, reorder } = useCommonHooks();
+	const { isMobile, reorder } = useCommonHooks();
 	const [newApplication, setNewApplication] = useState<Application>(defaultApplication);
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState('');
@@ -179,7 +179,6 @@ const ApplicationSettings = () => {
 								defaultValue={newApplication.icon}
 								comboboxProps={{
 									zIndex: 3000,
-									withinPortal: false,
 								}}
 								onChange={(value: string | null) => {
 									setNewApplication({
@@ -304,14 +303,14 @@ const ApplicationSettings = () => {
 													<Card
 														w={'400px'}
 														style={{
-															backgroundColor: theme.searchColor,
-															border: '1px solid var(--color-border)',
+															backgroundColor: 'var(--mantine-color-search-0)',
+															border: '1px solid var(--mantine-color-border-0)',
 															borderRadius: '8px',
 														}}
 													>
 														<Group gap={0} align='center' justify='space-between'>
 															<Stack gap={0}>
-																<Text c={theme.accentColor} fz={14}>
+																<Text c={'var(--mantine-color-accent-0)'} fz={14}>
 																	Name
 																</Text>
 																<Text
@@ -319,15 +318,15 @@ const ApplicationSettings = () => {
 																	style={{
 																		borderRadius: '4px',
 																		paddingLeft: '8px',
-																		color: theme.primaryColor,
-																		backgroundColor: theme.searchColor,
+																		color: 'var(--mantine-color-primary-0)',
+																		backgroundColor: 'var(--mantine-color-search-0)',
 																	}}
 																>
 																	{app.name}
 																</Text>
 															</Stack>
 															<Stack gap={0}>
-																<Text c={theme.accentColor} fz={14}>
+																<Text c={'var(--mantine-color-accent-0)'} fz={14}>
 																	Filter Name
 																</Text>
 																<Text
@@ -335,8 +334,8 @@ const ApplicationSettings = () => {
 																	style={{
 																		borderRadius: '4px',
 																		paddingLeft: '8px',
-																		color: theme.primaryColor,
-																		backgroundColor: theme.searchColor,
+																		color: 'var(--mantine-color-primary-0)',
+																		backgroundColor: 'var(--mantine-color-search-0)',
 																	}}
 																>
 																	{app.filterName}
@@ -367,7 +366,6 @@ const ApplicationSettings = () => {
 								<Popover
 									withArrow
 									withOverlay
-									withinPortal={false}
 									closeOnClickOutside={!isOpen}
 									classNames={popoverClasses}
 								>
diff --git a/src/pages/settings/components/Applications/DebouncedApplication.tsx b/src/pages/settings/components/Applications/DebouncedApplication.tsx
index 768ddb3..a1c1e7d 100644
--- a/src/pages/settings/components/Applications/DebouncedApplication.tsx
+++ b/src/pages/settings/components/Applications/DebouncedApplication.tsx
@@ -24,7 +24,7 @@ function DebouncedApplication({
 	setIsOpen,
 	allIcons,
 }: { application: Application; setIsOpen: (isOpen: boolean) => void; allIcons: any }) {
-	const { theme, handleDelete } = useCommonHooks();
+	const { handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -63,8 +63,8 @@ function DebouncedApplication({
 								padding: '8px',
 								margin: '8px',
 								borderRadius: '10px',
-								backgroundColor: 'var(--color-text-acc)',
-								color: 'var(--color-background)',
+								backgroundColor: 'var(--mantine-color-accent-0)',
+								color: 'var(--mantine-color-background-0)',
 							}}
 						>{`"${app.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
@@ -72,8 +72,8 @@ function DebouncedApplication({
 				}
 			/>
 			<Tooltip
-				color={theme.primaryColor}
-				bd={`solid 1px ${theme.borderColor}`}
+				color={'var(--mantine-color-primary-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={'Delete'}
 			>
 				<ActionIcon
@@ -89,8 +89,8 @@ function DebouncedApplication({
 				</ActionIcon>
 			</Tooltip>
 			<Tooltip
-				color={theme.primaryColor}
-				bd={`solid 1px ${theme.borderColor}`}
+				color={'var(--mantine-color-primary-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={'Enabled'}
 			>
 				<Switch
@@ -175,7 +175,6 @@ function DebouncedApplication({
 					defaultValue={app?.icon}
 					comboboxProps={{
 						zIndex: 3000,
-						withinPortal: false,
 					}}
 					onChange={(value: string | null) => {
 						setUpdate({
diff --git a/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx b/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
index 40ead35..ffdcee9 100644
--- a/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
+++ b/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
@@ -10,8 +10,8 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
 			style={{
 				cursor: 'pointer',
 				borderRadius: '4px',
-				color: 'var(--color-text-acc)',
-				backgroundColor: 'var(--color-search-background)',
+				color: 'var(--mantine-color-accent-0)',
+				backgroundColor: 'var(--mantine-color-search-0)',
 				padding: '8px',
 			}}
 			onMouseEnter={() => setHover(true)}
@@ -25,7 +25,7 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
 						style={{
 							position: 'absolute',
 							right: 24,
-							color: 'var(--color-text-acc)',
+							color: 'var(--mantine-color-accent-0)',
 						}}
 					>
 						<FiEdit />
diff --git a/src/pages/settings/components/Bookmarks/Bookmarks.tsx b/src/pages/settings/components/Bookmarks/Bookmarks.tsx
index 47eded0..f93da5c 100644
--- a/src/pages/settings/components/Bookmarks/Bookmarks.tsx
+++ b/src/pages/settings/components/Bookmarks/Bookmarks.tsx
@@ -28,7 +28,7 @@ const BookmarkSettings = () => {
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 	const [newGroup, setNewGroup] = useState<BookmarkGroup>(defaultGroup);
 	const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
-	const { theme, isMobile, reorder } = useCommonHooks();
+	const { isMobile, reorder } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -227,14 +227,14 @@ const BookmarkSettings = () => {
 													<Card
 														w={'400px'}
 														style={{
-															backgroundColor: theme.searchColor,
-															border: '1px solid var(--color-border)',
+															backgroundColor: 'var(--mantine-color-search-0)',
+															border: '1px solid var(--mantine-color-border-0)',
 															borderRadius: '8px',
 														}}
 													>
 														<Group gap={0} align='center' justify='space-between'>
 															<Stack gap={0}>
-																<Text c={theme.accentColor} fz={14}>
+																<Text c={'var(--mantine-color-accent-0)'} fz={14}>
 																	Name
 																</Text>
 																<Text
@@ -242,15 +242,15 @@ const BookmarkSettings = () => {
 																	style={{
 																		borderRadius: '4px',
 																		paddingLeft: '8px',
-																		color: theme.primaryColor,
-																		backgroundColor: theme.searchColor,
+																		color: 'var(--mantine-color-primary-0)',
+																		backgroundColor: 'var(--mantine-color-search-0)',
 																	}}
 																>
 																	{group.categoryName}
 																</Text>
 															</Stack>
 															<Stack gap={0}>
-																<Text c={theme.accentColor} fz={14}>
+																<Text c={'var(--mantine-color-accent-0)'} fz={14}>
 																	Filter Name
 																</Text>
 																<Text
@@ -258,8 +258,8 @@ const BookmarkSettings = () => {
 																	style={{
 																		borderRadius: '4px',
 																		paddingLeft: '8px',
-																		color: theme.primaryColor,
-																		backgroundColor: theme.searchColor,
+																		color: 'var(--mantine-color-primary-0)',
+																		backgroundColor: 'var(--mantine-color-search-0)',
 																	}}
 																>
 																	{group.filterName}
diff --git a/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
index 9daef92..38e0593 100644
--- a/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
+++ b/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
@@ -11,7 +11,7 @@ function DebouncedBookmarkItem({
 	bookmarkItem,
 	setIsOpen,
 }: { bookmarkItem: Bookmark; setIsOpen: (isOpen: boolean) => void }) {
-	const { theme, handleDelete } = useCommonHooks();
+	const { handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -50,8 +50,8 @@ function DebouncedBookmarkItem({
 								padding: '8px',
 								margin: '8px',
 								borderRadius: '10px',
-								backgroundColor: 'var(--color-text-acc)',
-								color: 'var(--color-background)',
+								backgroundColor: 'var(--mantine-color-accent-0)',
+								color: 'var(--mantine-color-background-0)',
 							}}
 						>{`"${bookmark.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
@@ -60,8 +60,8 @@ function DebouncedBookmarkItem({
 				title='Delete Bookmark'
 			/>
 			<Tooltip
-				color={theme.primaryColor}
-				bd={`solid 1px ${theme.borderColor}`}
+				color={'var(--mantine-color-primary-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={'Delete'}
 			>
 				<ActionIcon
diff --git a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
index 333758f..7e056c4 100644
--- a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
+++ b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
@@ -33,7 +33,7 @@ function DebouncedGroupSettingsItem({
 	bookmarks,
 	searchTerm,
 }: { bookmarkGroup: BookmarkGroup; bookmarks: Bookmark[]; searchTerm: string }) {
-	const { theme, isMobile, handleDelete, reorder } = useCommonHooks();
+	const { isMobile, handleDelete, reorder } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [popoverOpened, setPopoverOpened] = useState(false);
 	const { mutateAsync } = useMutationAPI();
@@ -113,8 +113,8 @@ function DebouncedGroupSettingsItem({
 								padding: '8px',
 								margin: '8px',
 								borderRadius: '10px',
-								backgroundColor: 'var(--color-text-acc)',
-								color: 'var(--color-background)',
+								backgroundColor: 'var(--mantine-color-accent-0)',
+								color: 'var(--mantine-color-background-0)',
 							}}
 						>{`"${group.categoryName}"`}</Text>
 						<Text style={{ fontWeight: 'bold', textTransform: 'uppercase' }}>
@@ -124,14 +124,18 @@ function DebouncedGroupSettingsItem({
 					</Stack>
 				}
 			/>
-			<Card.Section p={16} bg={theme.searchColor} c={theme.backgroundColor}>
+			<Card.Section
+				p={16}
+				bg={'var(--mantine-color-search-0)'}
+				c={'var(--mantine-color-background-0)'}
+			>
 				<Stack gap={0}>
 					<Group gap={0} align='center' justify='space-between'>
 						<TextInput
 							label={'Name'}
 							labelProps={{
 								style: {
-									color: theme.primaryColor,
+									color: 'var(--mantine-color-primary-0)',
 								},
 							}}
 							w={isMobile ? undefined : '58%'}
@@ -149,7 +153,7 @@ function DebouncedGroupSettingsItem({
 							label={'Filter Name'}
 							labelProps={{
 								style: {
-									color: theme.primaryColor,
+									color: 'var(--mantine-color-primary-0)',
 								},
 							}}
 							w={isMobile ? undefined : '28%'}
@@ -164,8 +168,8 @@ function DebouncedGroupSettingsItem({
 							}}
 						/>
 						<Tooltip
-							color={theme.primaryColor}
-							bd={`solid 1px ${theme.borderColor}`}
+							color={'var(--mantine-color-primary-0)'}
+							bd={'solid 1px var(--mantine-color-border-0)'}
 							label={'Delete'}
 						>
 							<ActionIcon
@@ -186,7 +190,7 @@ function DebouncedGroupSettingsItem({
 							width: '30px',
 							height: '30px',
 							borderRadius: '100%',
-							backgroundColor: theme.accentColor,
+							backgroundColor: 'var(--mantine-color-accent-0)',
 							position: 'absolute',
 							top: isMobile ? 164 : 78,
 							right: 18,
@@ -247,17 +251,7 @@ function DebouncedGroupSettingsItem({
 																<BookmarkSettingsItem bookmark={bookmark} />
 															</Box>
 														</Popover.Target>
-														<Popover.Dropdown
-															w={isMobile ? '100%' : undefined}
-															style={{
-																'--color-text-pri': theme.primaryColor,
-																'--color-text-acc': theme.accentColor,
-																'--color-background': theme.backgroundColor,
-																'--color-border': theme.borderColor,
-																'--color-search-background': theme.searchColor,
-																'--image-background': `url(${theme.backgroundImage})`,
-															}}
-														>
+														<Popover.Dropdown w={isMobile ? '100%' : undefined}>
 															<DebouncedBookmarkItem
 																bookmarkItem={bookmark}
 																setIsOpen={setIsOpen}
@@ -275,7 +269,11 @@ function DebouncedGroupSettingsItem({
 					</DragDropContext>
 				</Stack>
 			</Card.Section>
-			<Card.Section p={8} bg={theme.searchColor} c={theme.backgroundColor}>
+			<Card.Section
+				p={8}
+				bg={'var(--mantine-color-search-0)'}
+				c={'var(--mantine-color-background-0)'}
+			>
 				<Group align='center' justify='center'>
 					<Popover
 						withArrow
@@ -302,17 +300,7 @@ function DebouncedGroupSettingsItem({
 								<FiPlus /> Bookmark
 							</Button>
 						</Popover.Target>
-						<Popover.Dropdown
-							w={isMobile ? '100%' : undefined}
-							style={{
-								'--color-text-pri': theme.primaryColor,
-								'--color-text-acc': theme.accentColor,
-								'--color-background': theme.backgroundColor,
-								'--color-border': theme.borderColor,
-								'--color-search-background': theme.searchColor,
-								'--image-background': `url(${theme.backgroundImage})`,
-							}}
-						>
+						<Popover.Dropdown w={isMobile ? '100%' : undefined}>
 							<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 								<Stack w={'100%'} display={'flex'} pos={'relative'}>
 									<Group w={'100%'} justify='center'>
@@ -320,7 +308,7 @@ function DebouncedGroupSettingsItem({
 											label={'Name'}
 											labelProps={{
 												style: {
-													color: theme.primaryColor,
+													color: 'var(--mantine-color-primary-0)',
 												},
 											}}
 											className={textInputClasses.settingsItem}
@@ -337,7 +325,7 @@ function DebouncedGroupSettingsItem({
 											label={'Category'}
 											labelProps={{
 												style: {
-													color: theme.primaryColor,
+													color: 'var(--mantine-color-primary-0)',
 												},
 											}}
 											className={textInputClasses.settingsItem}
@@ -358,7 +346,7 @@ function DebouncedGroupSettingsItem({
 											label={'URL'}
 											labelProps={{
 												style: {
-													color: theme.primaryColor,
+													color: 'var(--mantine-color-primary-0)',
 												},
 											}}
 											className={textInputClasses.settingsItem}
diff --git a/src/pages/settings/components/Messages/DebouncedMessage.tsx b/src/pages/settings/components/Messages/DebouncedMessage.tsx
index d0a928f..a0b2c30 100644
--- a/src/pages/settings/components/Messages/DebouncedMessage.tsx
+++ b/src/pages/settings/components/Messages/DebouncedMessage.tsx
@@ -15,7 +15,7 @@ function DebouncedMessage({
 	message: Message;
 	setMessage: (message: Message) => void;
 }) {
-	const { theme, handleDelete } = useCommonHooks();
+	const { handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	return (
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
@@ -34,8 +34,8 @@ function DebouncedMessage({
 								padding: '8px',
 								margin: '8px',
 								borderRadius: '10px',
-								backgroundColor: 'var(--color-text-acc)',
-								color: 'var(--color-background)',
+								backgroundColor: 'var(--mantine-color-accent-0)',
+								color: 'var(--mantine-color-background-0)',
 							}}
 						>{`"${message.message}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
@@ -43,8 +43,8 @@ function DebouncedMessage({
 				}
 			/>
 			<Tooltip
-				color={theme.primaryColor}
-				bd={`solid 1px ${theme.borderColor}`}
+				color={'var(--mantine-color-primary-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={'Delete'}
 			>
 				<ActionIcon
diff --git a/src/pages/settings/components/Search/DebouncedSearchProvider.tsx b/src/pages/settings/components/Search/DebouncedSearchProvider.tsx
index c7ca4f6..8c86aee 100644
--- a/src/pages/settings/components/Search/DebouncedSearchProvider.tsx
+++ b/src/pages/settings/components/Search/DebouncedSearchProvider.tsx
@@ -14,7 +14,7 @@ function DebouncedSearchProvider({
 	searchProvider: Provider;
 	setIsOpen: (isOpen: boolean) => void;
 }) {
-	const { theme, handleDelete } = useCommonHooks();
+	const { handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -56,8 +56,8 @@ function DebouncedSearchProvider({
 								padding: '8px',
 								margin: '8px',
 								borderRadius: '10px',
-								backgroundColor: 'var(--color-text-acc)',
-								color: 'var(--color-background)',
+								backgroundColor: 'var(--mantine-color-accent-0)',
+								color: 'var(--mantine-color-background-0)',
 							}}
 						>{`"${provider.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
@@ -65,8 +65,8 @@ function DebouncedSearchProvider({
 				}
 			/>
 			<Tooltip
-				color={theme.primaryColor}
-				bd={`solid 1px ${theme.borderColor}`}
+				color={'var(--mantine-color-primary-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={'Delete'}
 			>
 				<ActionIcon
diff --git a/src/pages/settings/components/Search/SearchProviders.tsx b/src/pages/settings/components/Search/SearchProviders.tsx
index 97d32c6..3e82941 100644
--- a/src/pages/settings/components/Search/SearchProviders.tsx
+++ b/src/pages/settings/components/Search/SearchProviders.tsx
@@ -161,7 +161,6 @@ const SearchProviderSettings = () => {
 							<Popover
 								withArrow
 								withOverlay
-								withinPortal={false}
 								closeOnClickOutside={!isOpen}
 								classNames={popoverClasses}
 							>
diff --git a/src/pages/settings/components/Shared/AddItemModal.tsx b/src/pages/settings/components/Shared/AddItemModal.tsx
index 0a34084..f8ba530 100644
--- a/src/pages/settings/components/Shared/AddItemModal.tsx
+++ b/src/pages/settings/components/Shared/AddItemModal.tsx
@@ -14,7 +14,7 @@ function AddItemModal({
 	body: React.ReactNode;
 	title: string;
 }) {
-	const { isMobile, modalStyle } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	return (
 		<Modal.Root
 			size={'60%'}
@@ -23,7 +23,6 @@ function AddItemModal({
 			opened={modalOpened}
 			fullScreen={isMobile}
 			onClose={handleClose}
-			style={modalStyle}
 			closeOnEscape
 			closeOnClickOutside
 			centered
diff --git a/src/pages/settings/components/Shared/DeleteItemModal.tsx b/src/pages/settings/components/Shared/DeleteItemModal.tsx
index 1d519c6..f2688d0 100644
--- a/src/pages/settings/components/Shared/DeleteItemModal.tsx
+++ b/src/pages/settings/components/Shared/DeleteItemModal.tsx
@@ -15,7 +15,7 @@ function DeleteItemModal({
 	body: React.ReactNode;
 	title: string;
 }) {
-	const { isMobile, modalStyle } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	return (
 		<Modal.Root
 			size={'60%'}
@@ -24,7 +24,6 @@ function DeleteItemModal({
 			opened={modalOpened}
 			fullScreen={isMobile}
 			onClose={handleClose}
-			style={modalStyle}
 			closeOnEscape
 			closeOnClickOutside
 			centered
diff --git a/src/pages/settings/components/Shared/SettingsHeader.tsx b/src/pages/settings/components/Shared/SettingsHeader.tsx
index c287dfd..949f26d 100644
--- a/src/pages/settings/components/Shared/SettingsHeader.tsx
+++ b/src/pages/settings/components/Shared/SettingsHeader.tsx
@@ -41,7 +41,7 @@ function SettingsHeader({
 	setSearchValue: (searchValue: string) => void;
 	searchPlaceholder: string | undefined;
 }) {
-	const { isMobile, theme, modalStyle } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	return (
 		<Group
 			align='center'
@@ -66,15 +66,7 @@ function SettingsHeader({
 				>
 					{title}
 				</Text>
-				<Popover
-					withArrow
-					withOverlay
-					withinPortal={true}
-					styles={{
-						dropdown: modalStyle,
-					}}
-					classNames={popoverClasses}
-				>
+				<Popover withArrow withOverlay classNames={popoverClasses}>
 					<Popover.Target>
 						<ActionIcon
 							className={actionIconClasses.settingsTooltip}
@@ -85,8 +77,8 @@ function SettingsHeader({
 					</Popover.Target>
 					<Popover.Dropdown
 						style={{
-							color: theme.primaryColor,
-							backgroundColor: theme.backgroundColor,
+							color: 'var(--mantine-color-primary-0)',
+							backgroundColor: 'var(--mantine-color-background-0)',
 							width: isMobile ? '95%' : '500px',
 						}}
 					>
@@ -99,7 +91,8 @@ function SettingsHeader({
 								className={textClasses.settingsTooltip}
 								classNames={textClasses}
 								highlightStyles={{
-									backgroundImage: `linear-gradient(45deg, ${theme.accentColor}, ${theme.primaryColor})`,
+									backgroundImage:
+										'linear-gradient(45deg, var(--mantine-color-accent-0), var(--mantine-color-primary-0))',
 									fontWeight: 700,
 									WebkitBackgroundClip: 'text',
 									WebkitTextFillColor: 'transparent',
diff --git a/src/pages/settings/components/Theming/ThemeCard.tsx b/src/pages/settings/components/Theming/ThemeCard.tsx
index 00c1665..208e19a 100644
--- a/src/pages/settings/components/Theming/ThemeCard.tsx
+++ b/src/pages/settings/components/Theming/ThemeCard.tsx
@@ -58,8 +58,8 @@ function ThemeCard({
 								padding: '8px',
 								margin: '8px',
 								borderRadius: '10px',
-								backgroundColor: 'var(--color-text-acc)',
-								color: 'var(--color-background)',
+								backgroundColor: 'var(--mantine-color-accent-0)',
+								color: 'var(--mantine-color-background-0)',
 							}}
 						>{`"${cardTheme.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
@@ -205,12 +205,13 @@ function ThemeCard({
 							position: 'absolute',
 							left: 0,
 							top: 27 - shiftEdit,
-							backgroundColor: shiftEdit === 0 ? 'white' : 'var(--color-background)',
+							backgroundColor:
+								shiftEdit === 0 ? 'white' : 'var(--mantine-color-background-0)',
 							borderRadius: '50%',
 							padding: '8px',
 							margin: '4px',
 							border: 'solid 2px',
-							borderColor: shiftEdit === 0 ? 'black' : 'var(--color-text-pri)',
+							borderColor: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
 							transition: 'all 0.2s',
 						}}
 					>
@@ -221,7 +222,7 @@ function ThemeCard({
 							style={{
 								fontSize: '2em',
 								fontWeight: 'bold',
-								color: shiftEdit === 0 ? 'black' : 'var(--color-text-pri)',
+								color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
 							}}
 						/>
 					</Group>
@@ -241,12 +242,14 @@ function ThemeCard({
 							position: 'absolute',
 							right: 0,
 							top: 27 - shiftShuffle,
-							backgroundColor: shiftShuffle === 0 ? 'white' : 'var(--color-background)',
+							backgroundColor:
+								shiftShuffle === 0 ? 'white' : 'var(--mantine-color-background-0)',
 							borderRadius: '50%',
 							padding: '8px',
 							margin: '4px',
 							border: 'solid 2px',
-							borderColor: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)',
+							borderColor:
+								shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
 							transition: 'all 0.2s',
 						}}
 					>
@@ -265,7 +268,7 @@ function ThemeCard({
 							style={{
 								fontSize: '2em',
 								fontWeight: 'bold',
-								color: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)',
+								color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
 							}}
 						/>
 					</Group>
diff --git a/src/pages/settings/components/Theming/ThemeModal.tsx b/src/pages/settings/components/Theming/ThemeModal.tsx
index ca36fd1..f89b627 100644
--- a/src/pages/settings/components/Theming/ThemeModal.tsx
+++ b/src/pages/settings/components/Theming/ThemeModal.tsx
@@ -47,7 +47,7 @@ function ThemeModal({
 	closePicker: () => void;
 	handleSaveTheme: () => void;
 }) {
-	const { theme, isMobile } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	const viewportRef = useRef<HTMLDivElement>(null);
 	const [query, setQuery] = useState('');
 	const [hovered, setHovered] = useState(-1);
@@ -101,7 +101,7 @@ function ThemeModal({
 							padding: 8,
 							marginTop: 34,
 							borderTopLeftRadius: 4,
-							color: theme.accentColor,
+							color: 'var(--mantine-color-accent-0)',
 						}}
 					>
 						{re.exec(item.toUpperCase())?.[1]}
@@ -130,20 +130,12 @@ function ThemeModal({
 			onClose={handleClose}
 			fullScreen={isMobile}
 			centered
-			style={{
-				'--color-text-pri': theme.primaryColor,
-				'--color-text-acc': theme.accentColor,
-				'--color-background': theme.backgroundColor,
-				'--color-border': theme.borderColor,
-				'--color-search-background': theme.searchColor,
-				'--image-background': `url("${theme.backgroundImage}")`,
-			}}
 		>
 			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>
-						<Text c={theme.backgroundColor}>Name:</Text>
+						<Text c={'var(--mantine-color-background-0)'}>Name:</Text>
 						<TextInput
 							className={textInputClasses.default}
 							classNames={textInputClasses}
@@ -153,12 +145,12 @@ function ThemeModal({
 							}
 							styles={{
 								label: {
-									color: theme.primaryColor,
+									color: 'var(--mantine-color-primary-0)',
 								},
 								input: {
-									color: theme.primaryColor,
+									color: 'var(--mantine-color-primary-0)',
 									border: 'none',
-									borderBottom: `1px solid ${theme.primaryColor}`,
+									borderBottom: '1px solid var(--mantine-color-primary-0)',
 								},
 							}}
 						/>
@@ -255,7 +247,7 @@ function ThemeModal({
 											color={selectedTheme.primaryColor}
 											style={{
 												cursor: 'pointer',
-												border: `2px dashed ${theme.primaryColor}`,
+												border: '2px dashed var(--mantine-color-primary-0)',
 											}}
 										/>
 									</Group>
@@ -274,7 +266,7 @@ function ThemeModal({
 											color={selectedTheme.accentColor}
 											style={{
 												cursor: 'pointer',
-												border: `2px dashed ${theme.primaryColor}`,
+												border: '2px dashed var(--mantine-color-primary-0)',
 											}}
 										/>
 									</Group>
@@ -293,7 +285,7 @@ function ThemeModal({
 											color={selectedTheme.backgroundColor}
 											style={{
 												cursor: 'pointer',
-												border: `2px dashed ${theme.primaryColor}`,
+												border: '2px dashed var(--mantine-color-primary-0)',
 											}}
 										/>
 									</Group>
@@ -312,7 +304,7 @@ function ThemeModal({
 											color={selectedTheme.borderColor}
 											style={{
 												cursor: 'pointer',
-												border: `2px dashed ${theme.primaryColor}`,
+												border: '2px dashed var(--mantine-color-primary-0)',
 											}}
 										/>
 									</Group>
@@ -331,7 +323,7 @@ function ThemeModal({
 											color={selectedTheme.searchColor}
 											style={{
 												cursor: 'pointer',
-												border: `2px dashed ${theme.primaryColor}`,
+												border: '2px dashed var(--mantine-color-primary-0)',
 											}}
 										/>
 									</Group>
diff --git a/src/pages/settings/components/Theming/ThemeModalContent.tsx b/src/pages/settings/components/Theming/ThemeModalContent.tsx
index f079895..28b071b 100644
--- a/src/pages/settings/components/Theming/ThemeModalContent.tsx
+++ b/src/pages/settings/components/Theming/ThemeModalContent.tsx
@@ -5,7 +5,7 @@ import { stackClasses } from 'styles';
 import type { Theme } from 'types';
 
 export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
-	const ExampleApp = ({ theme }: { theme: Theme }) => {
+	const ExampleApp = () => {
 		const [textDecoration, setTextDecoration] = useState<string>('none');
 
 		return (
@@ -23,7 +23,11 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 						paddingTop: '15px',
 					}}
 				>
-					<FiCheck style={{ color: theme.primaryColor }} height={32} width={32} />
+					<FiCheck
+						style={{ color: 'var(--mantine-color-primary-0)' }}
+						height={32}
+						width={32}
+					/>
 				</Stack>
 				<Stack
 					style={{
@@ -40,7 +44,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 							fontWeight: 400,
 							fontSize: 11,
 							fontStyle: 'normal',
-							color: theme.primaryColor,
+							color: 'var(--mantine-color-primary-0)',
 							fontFamily:
 								'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
 							margin: 0,
@@ -53,7 +57,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 							fontWeight: 400,
 							fontSize: 11,
 							fontStyle: 'italic',
-							color: theme.accentColor,
+							color: 'var(--mantine-color-accent-0)',
 							fontFamily:
 								'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
 							margin: 0,
@@ -124,9 +128,9 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 					alignContent: 'center',
 				}}
 			>
-				<ExampleApp theme={selectedTheme} />
-				<ExampleApp theme={selectedTheme} />
-				<ExampleApp theme={selectedTheme} />
+				<ExampleApp />
+				<ExampleApp />
+				<ExampleApp />
 			</Stack>
 			<Text
 				pl={'1.5rem'}
diff --git a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
index 3bd4207..82e48d7 100644
--- a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
@@ -58,8 +58,8 @@ function ThemePlaylistCard({
 								padding: '8px',
 								margin: '8px',
 								borderRadius: '10px',
-								backgroundColor: 'var(--color-text-acc)',
-								color: 'var(--color-background)',
+								backgroundColor: 'var(--mantine-color-accent-0)',
+								color: 'var(--mantine-color-background-0)',
 							}}
 						>{`"${cardPlaylist.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
@@ -73,12 +73,12 @@ function ThemePlaylistCard({
 					left: 6,
 					paddingRight: 4,
 					paddingLeft: 4,
-					backgroundColor: theme.borderColor,
+					backgroundColor: 'var(--mantine-color-border-0)',
 					borderRadius: '4px',
 					color:
 						theme.borderColor === theme.primaryColor
-							? theme.accentColor
-							: theme.backgroundColor,
+							? 'var(--mantine-color-accent-0)'
+							: 'var(--mantine-color-background-0)',
 					zIndex: 3,
 				}}
 			>
@@ -92,12 +92,12 @@ function ThemePlaylistCard({
 						right: 6,
 						paddingRight: 4,
 						paddingLeft: 4,
-						backgroundColor: theme.borderColor,
+						backgroundColor: 'var(--mantine-color-border-0)',
 						borderRadius: '4px',
 						color:
 							theme.borderColor === theme.primaryColor
-								? theme.accentColor
-								: theme.backgroundColor,
+								? 'var(--mantine-color-accent-0)'
+								: 'var(--mantine-color-background-0)',
 						zIndex: 3,
 					}}
 					onClick={(event) => {
@@ -160,12 +160,12 @@ function ThemePlaylistCard({
 							right: 6,
 							paddingRight: 4,
 							paddingLeft: 4,
-							backgroundColor: theme.borderColor,
+							backgroundColor: 'var(--mantine-color-border-0)',
 							borderRadius: '4px',
 							color:
 								theme.borderColor === theme.primaryColor
-									? theme.accentColor
-									: theme.backgroundColor,
+									? 'var(--mantine-color-accent-0)'
+									: 'var(--mantine-color-background-0)',
 							zIndex: 3,
 						}}
 						onClick={() => {
@@ -182,12 +182,12 @@ function ThemePlaylistCard({
 								right: 40,
 								paddingRight: 4,
 								paddingLeft: 4,
-								backgroundColor: theme.borderColor,
+								backgroundColor: 'var(--mantine-color-border-0)',
 								borderRadius: '4px',
 								color:
 									theme.borderColor === theme.primaryColor
-										? theme.accentColor
-										: theme.backgroundColor,
+										? 'var(--mantine-color-accent-0)'
+										: 'var(--mantine-color-background-0)',
 								zIndex: 3,
 							}}
 							onClick={() => {
@@ -204,9 +204,9 @@ function ThemePlaylistCard({
 				h={'320px'}
 				style={{
 					backgroundSize: 'cover',
-					backgroundColor: theme.searchColor,
-					color: theme.accentColor,
-					border: `solid ${theme.borderColor}`,
+					backgroundColor: 'var(--mantine-color-search-0)',
+					color: 'var(--mantine-color-accent-0)',
+					border: 'solid var(--mantine-color-border-0)',
 				}}
 				onClick={() => {
 					setCurrentThemePlaylist(cardPlaylist.name);
@@ -222,8 +222,8 @@ function ThemePlaylistCard({
 								mt={8}
 								mb={-8}
 								style={{
-									color: theme.backgroundColor,
-									backgroundColor: theme.primaryColor,
+									color: 'var(--mantine-color-background-0)',
+									backgroundColor: 'var(--mantine-color-primary-0)',
 									borderRadius: '4px',
 								}}
 							>
@@ -249,8 +249,8 @@ function ThemePlaylistCard({
 								mt={8}
 								mb={-8}
 								style={{
-									color: theme.backgroundColor,
-									backgroundColor: theme.primaryColor,
+									color: 'var(--mantine-color-background-0)',
+									backgroundColor: 'var(--mantine-color-primary-0)',
 									borderRadius: '4px',
 								}}
 							>
diff --git a/src/pages/settings/components/Theming/ThemePlaylistModal.tsx b/src/pages/settings/components/Theming/ThemePlaylistModal.tsx
index 126405e..222afd0 100644
--- a/src/pages/settings/components/Theming/ThemePlaylistModal.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylistModal.tsx
@@ -33,7 +33,7 @@ function ThemePlaylistModal({
 	handleSavePlaylist: () => void;
 	allThemes: Theme[];
 }) {
-	const { theme, isMobile, modalStyle } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	const [themeList, setThemeList] = useState<any>([]);
 
 	useEffect(() => {
@@ -57,13 +57,12 @@ function ThemePlaylistModal({
 				handleClose();
 				setThemeList('[]');
 			}}
-			style={modalStyle}
 		>
 			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>
-						<Text c={theme.backgroundColor}>Name:</Text>
+						<Text c={'var(--mantine-color-background-0)'}>Name:</Text>
 						<TextInput
 							className={textInputClasses.default}
 							classNames={textInputClasses}
@@ -74,12 +73,12 @@ function ThemePlaylistModal({
 							}
 							styles={{
 								label: {
-									color: theme.primaryColor,
+									color: 'var(--mantine-color-primary-0)',
 								},
 								input: {
-									color: theme.primaryColor,
+									color: 'var(--mantine-color-primary-0)',
 									border: 'none',
-									borderBottom: `1px solid ${theme.primaryColor}`,
+									borderBottom: '1px solid var(--mantine-color-primary-0)',
 								},
 							}}
 						/>
diff --git a/src/pages/settings/components/Theming/ThemePlaylists.tsx b/src/pages/settings/components/Theming/ThemePlaylists.tsx
index eceaf01..dba10d6 100644
--- a/src/pages/settings/components/Theming/ThemePlaylists.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists.tsx
@@ -101,11 +101,11 @@ function ThemePlaylists() {
 												fontSize: '2em',
 												fontWeight: 'bold',
 												borderRadius: '50%',
-												backgroundColor: theme.borderColor,
+												backgroundColor: 'var(--mantine-color-border-0)',
 												color:
 													theme.borderColor === theme.primaryColor
-														? theme.accentColor
-														: theme.backgroundColor,
+														? 'var(--mantine-color-accent-0)'
+														: 'var(--mantine-color-background-0)',
 											}}
 										/>
 									)}
@@ -149,11 +149,11 @@ function ThemePlaylists() {
 												fontSize: '2em',
 												fontWeight: 'bold',
 												borderRadius: '50%',
-												backgroundColor: theme.borderColor,
+												backgroundColor: 'var(--mantine-color-border-0)',
 												color:
 													theme.borderColor === theme.primaryColor
-														? theme.accentColor
-														: theme.primaryColor,
+														? 'var(--mantine-color-accent-0)'
+														: 'var(--mantine-color-primary-0)',
 											}}
 										/>
 									)}
diff --git a/src/pages/settings/components/Theming/ThemeSelect.tsx b/src/pages/settings/components/Theming/ThemeSelect.tsx
index 9eff2fe..4b9df81 100644
--- a/src/pages/settings/components/Theming/ThemeSelect.tsx
+++ b/src/pages/settings/components/Theming/ThemeSelect.tsx
@@ -30,7 +30,6 @@ function ThemeSelect({
 			<Text w={'100px'}>{timeIndex}</Text>
 			<Select
 				labelProps={{ display: 'none' }}
-				comboboxProps={{ withinPortal: false }}
 				placeholder='Select Theme'
 				defaultValue={themeList[index]}
 				data={allThemes?.map((theme: Theme) => {
diff --git a/src/pages/settings/components/Theming/Themes.tsx b/src/pages/settings/components/Theming/Themes.tsx
index 25a8bd8..87155f6 100644
--- a/src/pages/settings/components/Theming/Themes.tsx
+++ b/src/pages/settings/components/Theming/Themes.tsx
@@ -121,9 +121,9 @@ function ThemesSettings() {
 			<Switch
 				label={
 					isMobile ? (
-						<FaDice size={20} color={theme.primaryColor} />
+						<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
 					) : (
-						<Text c={theme.primaryColor}>Random Theme</Text>
+						<Text c={'var(--mantine-color-primary-0)'}>Random Theme</Text>
 					)
 				}
 				labelPosition='left'
diff --git a/src/pages/settings/components/WoL/DebouncedWolClient.tsx b/src/pages/settings/components/WoL/DebouncedWolClient.tsx
index 0d65448..3a4dca9 100644
--- a/src/pages/settings/components/WoL/DebouncedWolClient.tsx
+++ b/src/pages/settings/components/WoL/DebouncedWolClient.tsx
@@ -14,7 +14,7 @@ function DebouncedWolClient({
 	wolClient: WolClient;
 	setIsOpen: (isOpen: boolean) => void;
 }) {
-	const { theme, handleDelete } = useCommonHooks();
+	const { handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -55,8 +55,8 @@ function DebouncedWolClient({
 								padding: '8px',
 								margin: '8px',
 								borderRadius: '10px',
-								backgroundColor: 'var(--color-text-acc)',
-								color: 'var(--color-background)',
+								backgroundColor: 'var(--mantine-color-accent-0)',
+								color: 'var(--mantine-color-background-0)',
 							}}
 						>{`"${client.hostname}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
@@ -64,8 +64,8 @@ function DebouncedWolClient({
 				}
 			/>
 			<Tooltip
-				color={theme.primaryColor}
-				bd={`solid 1px ${theme.borderColor}`}
+				color={'var(--mantine-color-primary-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={'Delete'}
 			>
 				<ActionIcon
diff --git a/src/pages/settings/components/WoL/WolClients.tsx b/src/pages/settings/components/WoL/WolClients.tsx
index b654eec..f524c96 100644
--- a/src/pages/settings/components/WoL/WolClients.tsx
+++ b/src/pages/settings/components/WoL/WolClients.tsx
@@ -144,7 +144,6 @@ const WolClientSettings = () => {
 							<Popover
 								withArrow
 								withOverlay
-								withinPortal={false}
 								closeOnClickOutside={!isOpen}
 								classNames={popoverClasses}
 							>
diff --git a/src/styles/ActionIcon.module.css b/src/styles/ActionIcon.module.css
index 060ee7b..f7d06c2 100644
--- a/src/styles/ActionIcon.module.css
+++ b/src/styles/ActionIcon.module.css
@@ -1,7 +1,7 @@
 .backButton {
 	&.root {
 		background-color: transparent !important;
-		color: var(--color-text-pri) !important;
+		color: var(--mantine-color-primary-0) !important;
 		width: 2rem;
 		height: 2rem;
 		margin-top: 1.5rem;
@@ -13,7 +13,7 @@
 		}
 		:hover {
 			background-color: transparent !important;
-			color: var(--color-text-pri) !important;
+			color: var(--mantine-color-primary-0) !important;
 		}
 	}
 }
@@ -28,8 +28,8 @@
 			display: none;
 		}
 		:hover {
-			background-color: var(--color-text-pri) !important;
-			color: var(--color-text-acc) !important;
+			background-color: var(--mantine-color-primary-0) !important;
+			color: var(--mantine-color-accent-0) !important;
 		}
 	}
 }
@@ -48,8 +48,8 @@
 			display: none;
 		}
 		:hover {
-			background-color: var(--color-text-pri) !important;
-			color: var(--color-text-acc) !important;
+			background-color: var(--mantine-color-primary-0) !important;
+			color: var(--mantine-color-accent-0) !important;
 			transition: all .1s ease;
 		}
 	}
@@ -63,7 +63,7 @@
 		border-radius: 100%;
 		border: none;
 		background-color: transparent;
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 		.icon {
 			font-size: 24px;
 		}
@@ -71,8 +71,8 @@
 			display: none;
 		}
 		:hover {
-			background-color: var(--color-text-pri) !important;
-			color: var(--color-text-acc) !important;
+			background-color: var(--mantine-color-primary-0) !important;
+			color: var(--mantine-color-accent-0) !important;
 			transition: all .1s ease;
 		}
 	}
@@ -81,7 +81,7 @@
 .selectOptionActions {
 	&.root {
 		background-color: transparent !important;
-		color: var(--color-text-acc) !important;
+		color: var(--mantine-color-accent-0) !important;
 		.icon {
 			font-size: 24px;
 		}
@@ -89,7 +89,7 @@
 			display: none;
 		}
 		:hover {
-			color: var(--color-text-pri) !important;
+			color: var(--mantine-color-primary-0) !important;
 		}
 	}
 }
diff --git a/src/styles/Box.module.css b/src/styles/Box.module.css
index 8585b44..bb88e9f 100644
--- a/src/styles/Box.module.css
+++ b/src/styles/Box.module.css
@@ -29,7 +29,7 @@
 	stroke-dasharray: 260;
 	stroke-width: 10px;
 	fill: transparent;
-	stroke: var(--color-search-background);
+	stroke: var(--mantine-color-search-0);
 	animation: svgAnimation 1.5s linear infinite;
 }
 
diff --git a/src/styles/Button.module.css b/src/styles/Button.module.css
index 524f4e9..848a958 100644
--- a/src/styles/Button.module.css
+++ b/src/styles/Button.module.css
@@ -7,15 +7,15 @@
 		position: fixed;
 		bottom: 10px;
 		left: 10px;
-		color: var(--color-text-pri);
-		background-color: var(--color-background);
+		color: var(--mantine-color-primary-0);
+		background-color: var(--mantine-color-background-0);
 		border-radius: 100%;
-		border: solid 2px var(--color-text-pri);
+		border: solid 2px var(--mantine-color-primary-0);
 		cursor: pointer;
 	}
 	&:hover {
-		background-color: var(--color-background) !important;
-		color: var(--color-text-pri) !important;
+		background-color: var(--mantine-color-background-0) !important;
+		color: var(--mantine-color-primary-0) !important;
 	}
 }
 
@@ -30,14 +30,14 @@
 		text-align: center;
 		text-transform: uppercase;
 		border-radius: 1em;
-		color: var(--color-text-acc);
-		background-color: var(--color-background);
-		border: solid 2px var(--color-text-pri);
+		color: var(--mantine-color-accent-0);
+		background-color: var(--mantine-color-background-0);
+		border: solid 2px var(--mantine-color-primary-0);
 		transition: all .2s ease;
 		&:hover {
-			color: var(--color-background);
-			background-color: var(--color-text-pri);
-			border: solid 2px var(--color-text-acc);
+			color: var(--mantine-color-background-0);
+			background-color: var(--mantine-color-primary-0);
+			border: solid 2px var(--mantine-color-accent-0);
 		}
 	}
 }
@@ -51,12 +51,12 @@
 		height: 2rem;
 		padding: 8px;
 		margin: 0px;
-		background-color: var(--color-search-background);
-		color: var(--color-text-acc);
+		background-color: var(--mantine-color-search-0);
+		color: var(--mantine-color-accent-0);
 	}
 	&:hover {
-		background-color: var(--color-text-pri) !important;
-		color: var(--color-background) !important;
+		background-color: var(--mantine-color-primary-0) !important;
+		color: var(--mantine-color-background-0) !important;
 	}
 }
 
@@ -64,13 +64,13 @@
 	&.root {
 		padding: 10px;
 		margin: 0px;
-		color: var(--color-background);
-		background-color: var(--color-text-pri);
+		color: var(--mantine-color-background-0);
+		background-color: var(--mantine-color-primary-0);
 		border-radius: 20px;
 		cursor: pointer;
 	}
 	&:hover {
-		background-color: var(--color-text-acc) !important;
-		color: var(--color-background) !important;
+		background-color: var(--mantine-color-accent-0) !important;
+		color: var(--mantine-color-background-0) !important;
 	}
 }
diff --git a/src/styles/Card.module.css b/src/styles/Card.module.css
index d4a7e2a..34f4625 100644
--- a/src/styles/Card.module.css
+++ b/src/styles/Card.module.css
@@ -1,6 +1,6 @@
 .settingsItem {
 	&.root {
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 		background-color: transparent;
 		backdrop-filter: blur(10px) brightness(1.25) !important;
 	}
@@ -8,12 +8,12 @@
 
 .settingsItemHover {
 	&.root {
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 		background-color: transparent;
 		backdrop-filter: blur(10px) brightness(1.25) !important;
 		cursor: pointer;
 		&:hover {
-			color: var(--color-text-acc);
+			color: var(--mantine-color-accent-0);
 		}
 	}
 }
diff --git a/src/styles/Menu.module.css b/src/styles/Menu.module.css
index e6ab6f2..58c5427 100644
--- a/src/styles/Menu.module.css
+++ b/src/styles/Menu.module.css
@@ -1,14 +1,14 @@
 .dropdown {
-	color: var(--color-text-pri);
-	border-color: var(--color-text-pri) !important;
+	color: var(--mantine-color-primary-0);
+	border-color: var(--mantine-color-primary-0) !important;
 	backdrop-filter: blur(10px) brightness(3) !important;
 }
 .item {
 	&:hover {
-		background-color: var(--color-text-pri);
-		color: var(--color-background);
+		background-color: var(--mantine-color-primary-0);
+		color: var(--mantine-color-background-0);
 	}
 }
 .label {
-	color: var(--color-text-pri) !important;
+	color: var(--mantine-color-primary-0) !important;
 }
diff --git a/src/styles/Modal.module.css b/src/styles/Modal.module.css
index 3b23c49..27474d4 100644
--- a/src/styles/Modal.module.css
+++ b/src/styles/Modal.module.css
@@ -2,10 +2,10 @@
 	&.root {
 		.content {
 			border-radius: 15px;
-			color: var(--color-text-pri);
-			background-color: var(--color-background);
+			color: var(--mantine-color-primary-0);
+			background-color: var(--mantine-color-background-0);
 			.header {
-				color: var(--color-text-pri);
+				color: var(--mantine-color-primary-0);
 				.title {
 					font-size: 22px;
 				}
@@ -31,11 +31,11 @@
 		.content {
 			justify-content: center;
 			align-content: center;
-			color: var(--color-text-pri);
-			background-color: var(--color-background);
+			color: var(--mantine-color-primary-0);
+			background-color: var(--mantine-color-background-0);
 			.header {
-				color: var(--color-text-pri);
-				background-color: var(--color-text-acc);
+				color: var(--mantine-color-primary-0);
+				background-color: var(--mantine-color-accent-0);
 				.close {
 					color: white;
 					background-color: var(--mantine-color-red-6);
diff --git a/src/styles/MultiSelect.module.css b/src/styles/MultiSelect.module.css
index 45bb5b3..b3fa0e8 100644
--- a/src/styles/MultiSelect.module.css
+++ b/src/styles/MultiSelect.module.css
@@ -1,47 +1,47 @@
 .label {
 	margin-bottom: 5px !important;
-	color: var(--color-text-pri) !important;
+	color: var(--mantine-color-primary-0) !important;
 	font-size: 14px !important;
 }
 .input {
-	border-color: var(--color-border) !important;
-	background-color: var(--color-background) !important;
-	color: var(--color-text-pri) !important;
+	border-color: var(--mantine-color-border-0) !important;
+	background-color: var(--mantine-color-background-0) !important;
+	color: var(--mantine-color-primary-0) !important;
 	&:focus {
-		border-color: var(--color-text-pri) !important;
+		border-color: var(--mantine-color-primary-0) !important;
 	}
 	display: flex !important;
 	overflow: clip !important;
 	height: 36px !important;
 	&::placeholder {
-		color: var(--color-text-acc) !important;
+		color: var(--mantine-color-accent-0) !important;
 	}
 }
 
 .options {
-	color: var(--color-text-pri) !important;
+	color: var(--mantine-color-primary-0) !important;
 }
 
 .option {
-	color: var(--color-text-pri) !important;
+	color: var(--mantine-color-primary-0) !important;
 	font-size: 14px !important;
 	&[data-checked] {
-		background-color: var(--color-text-acc) !important;
-		color: var(--color-background) !important;
+		background-color: var(--mantine-color-accent-0) !important;
+		color: var(--mantine-color-background-0) !important;
 		&:hover {
-			background-color: var(--color-text-acc) !important;
-			color: var(--color-background) !important;
+			background-color: var(--mantine-color-accent-0) !important;
+			color: var(--mantine-color-background-0) !important;
 		}
 	}
 
 	&:hover {
-		background-color: var(--color-text-pri) !important;
-		color: var(--color-background) !important;
+		background-color: var(--mantine-color-primary-0) !important;
+		color: var(--mantine-color-background-0) !important;
 	}
 }
 
 .dropdown {
-	background-color: var(--color-background) !important;
+	background-color: var(--mantine-color-background-0) !important;
 }
 
 .pillsList {
@@ -51,9 +51,9 @@
 }
 
 .inputField {
-	color: var(--color-text-acc) !important;
+	color: var(--mantine-color-accent-0) !important;
 	&::placeholder {
-		color: var(--color-text-pri) !important;
+		color: var(--mantine-color-primary-0) !important;
 	}
 }
 
diff --git a/src/styles/Popover.module.css b/src/styles/Popover.module.css
index 6deaf10..5a76101 100644
--- a/src/styles/Popover.module.css
+++ b/src/styles/Popover.module.css
@@ -1,3 +1,3 @@
 .dropdown {
-	border: solid 2px var(--color-border) !important;
+	border: solid 2px var(--mantine-color-border-0) !important;
 }
diff --git a/src/styles/Select.module.css b/src/styles/Select.module.css
index 30ac1f7..4723df5 100644
--- a/src/styles/Select.module.css
+++ b/src/styles/Select.module.css
@@ -1,60 +1,60 @@
 .menuSelectLabel {
 	margin-bottom: 5px !important;
-	color: var(--color-text-pri) !important;
+	color: var(--mantine-color-primary-0) !important;
 	font-size: 14px !important;
 }
 .menuSelectInput {
-	border-color: var(--color-border) !important;
-	background-color: var(--color-background) !important;
-	color: var(--color-text-pri) !important;
+	border-color: var(--mantine-color-border-0) !important;
+	background-color: var(--mantine-color-background-0) !important;
+	color: var(--mantine-color-primary-0) !important;
 	&:focus {
-		border-color: var(--color-text-pri) !important;
+		border-color: var(--mantine-color-primary-0) !important;
 	}
 	display: flex !important;
 	overflow: clip !important;
 	height: 36px !important;
 	&::placeholder {
-		color: var(--color-text-acc) !important;
+		color: var(--mantine-color-accent-0) !important;
 	}
 }
 
 .menuSelectOptions {
-	color: var(--color-text-pri) !important;
+	color: var(--mantine-color-primary-0) !important;
 }
 
 .menuSelectOption {
-	color: var(--color-text-pri) !important;
+	color: var(--mantine-color-primary-0) !important;
 	font-size: 14px !important;
 	&[data-checked] {
-		background-color: var(--color-text-acc) !important;
-		color: var(--color-background) !important;
+		background-color: var(--mantine-color-accent-0) !important;
+		color: var(--mantine-color-background-0) !important;
 		&:hover {
-			background-color: var(--color-text-acc) !important;
-			color: var(--color-background) !important;
+			background-color: var(--mantine-color-accent-0) !important;
+			color: var(--mantine-color-background-0) !important;
 		}
 	}
 	&:hover {
-		background-color: var(--color-text-pri) !important;
-		color: var(--color-background) !important;
+		background-color: var(--mantine-color-primary-0) !important;
+		color: var(--mantine-color-background-0) !important;
 	}
 }
 
 .dropdown {
 	border: none !important;
-	background-color: var(--color-search-background) !important;
+	background-color: var(--mantine-color-search-0) !important;
 	backdrop-filter: blur(10px) !important;
 }
 
 .options {
 	.option {
 		transition: all .1s ease !important;
-		color: var(--color-text-acc);
+		color: var(--mantine-color-accent-0);
 		font-size: 18px;
 		&[data-combobox-selected="true"] {
-			background-color: var(--color-background);
+			background-color: var(--mantine-color-background-0);
 		}
 		&:hover {
-			background-color: var(--color-background);
+			background-color: var(--mantine-color-background-0);
 		}
 	}
 }
@@ -64,9 +64,9 @@
 	justify-content: center;
 	.input {
 		border: 0;
-		border-bottom: thin solid var(--color-border);
+		border-bottom: thin solid var(--mantine-color-border-0);
 		background-color: transparent;
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 		font-style: italic;
 		font-size: 0.8em;
 		height: 3.5em;
@@ -76,14 +76,10 @@
 		padding-right: 1em;
 		text-align: center;
 		&[data-active="true"] {
-			background-color: color-mix(
-				in srgb,
-				var(--color-search-background),
-				transparent 50%
-			);
-			border-color: var(--color-border);
+			background-color: color-mix(in srgb, var(--mantine-color-search-0), transparent 50%);
+			border-color: var(--mantine-color-border-0);
 			outline: none;
-			color: var(--color-text-pri);
+			color: var(--mantine-color-primary-0);
 			font-style: normal;
 			font-weight: 500;
 			font-size: 1.2em;
@@ -97,7 +93,7 @@
 	}
 	.section {
 		transition: opacity 0.1s 0s ease;
-		color: var(--color-border);
+		color: var(--mantine-color-border-0);
 		width: auto;
 		padding-left: .5rem;
 		opacity: 0;
@@ -105,10 +101,10 @@
 }
 .wrapper:focus-within {
 	.input {
-		background-color: var(--color-search-background);
-		border-color: var(--color-border);
+		background-color: var(--mantine-color-search-0);
+		border-color: var(--mantine-color-border-0);
 		outline: none;
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 		font-style: normal;
 		font-weight: 500;
 		font-size: 1.2em;
@@ -119,10 +115,10 @@
 		border-bottom-left-radius: .25em;
 		border-bottom-right-radius: .25em;
 		&[data-active="true"] {
-			background-color: var(--color-search-background);
-			border-color: var(--color-border);
+			background-color: var(--mantine-color-search-0);
+			border-color: var(--mantine-color-border-0);
 			outline: none;
-			color: var(--color-text-pri);
+			color: var(--mantine-color-primary-0);
 			font-style: normal;
 			font-weight: 500;
 			font-size: 1.2em;
@@ -136,7 +132,7 @@
 	}
 	.section {
 		transition: opacity 0.4s 0.4s ease;
-		color: var(--color-border);
+		color: var(--mantine-color-border-0);
 		width: auto;
 		padding-left: .5rem;
 		opacity: 1;
diff --git a/src/styles/Slider.module.css b/src/styles/Slider.module.css
index 725130b..8347a8f 100644
--- a/src/styles/Slider.module.css
+++ b/src/styles/Slider.module.css
@@ -1,23 +1,23 @@
 .default {
 	.trackContainer {
 		.track::before {
-			background-color: var(--color-border);
+			background-color: var(--mantine-color-border-0);
 		}
 		.bar {
-			background-color: var(--color-text-pri);
+			background-color: var(--mantine-color-primary-0);
 		}
 		.mark {
-			border-color: var(--color-text-acc);
+			border-color: var(--mantine-color-accent-0);
 		}
 		.thumb {
-			border-color: var(--color-text-acc);
+			border-color: var(--mantine-color-accent-0);
 		}
 		.markLabel {
 			display: none;
 		}
 	}
 	.label {
-		color: var(--color-background);
-		background-color: var(--color-text-pri);
+		color: var(--mantine-color-background-0);
+		background-color: var(--mantine-color-primary-0);
 	}
 }
diff --git a/src/styles/Stack.module.css b/src/styles/Stack.module.css
index 0f1cf26..6204b4d 100644
--- a/src/styles/Stack.module.css
+++ b/src/styles/Stack.module.css
@@ -30,7 +30,7 @@
 	stroke-dasharray: 260;
 	stroke-width: 10px;
 	fill: transparent;
-	stroke: var(--color-search-background);
+	stroke: var(--mantine-color-search-0);
 	animation: svgAnimation 1.5s linear infinite;
 }
 
@@ -49,7 +49,7 @@
 
 .menuStack {
 	height: 150px;
-	background-color: var(--color-search-background);
+	background-color: var(--mantine-color-search-0);
 	border-radius: 10px;
 }
 
@@ -65,7 +65,7 @@
 	backdrop-filter: blur(15px);
 	&[data-loaded="true"] {
 		opacity: 0;
-		background-color: var(--color-background);
+		background-color: var(--mantine-color-background-0);
 		z-index: -1;
 	}
 }
diff --git a/src/styles/Switch.module.css b/src/styles/Switch.module.css
index 416f995..0695ee2 100644
--- a/src/styles/Switch.module.css
+++ b/src/styles/Switch.module.css
@@ -11,26 +11,26 @@
 	&.root {
 		.label {
 			font-size: 16px;
-			color: var(--color-text-pri);
+			color: var(--mantine-color-primary-0);
 		}
 		.track {
 			transition: all .2s ease !important;
 			border: none;
-			background-color: var(--color-search-background);
-			border-color: var(--color-text-acc);
+			background-color: var(--mantine-color-search-0);
+			border-color: var(--mantine-color-accent-0);
 		}
 		.thumb {
 			transition: all .2s ease !important;
 			border: none;
-			background-color: var(--color-text-acc);
+			background-color: var(--mantine-color-accent-0);
 		}
 		.input:checked + * > .thumb {
 			transition: all .2s ease !important;
-			background-color: var(--color-background);
+			background-color: var(--mantine-color-background-0);
 		}
 		.input:checked + .track {
 			transition: all .2s ease !important;
-			background-color: var(--color-text-acc);
+			background-color: var(--mantine-color-accent-0);
 		}
 	}
 }
diff --git a/src/styles/Tabs.module.css b/src/styles/Tabs.module.css
index 09ea049..fd98bc6 100644
--- a/src/styles/Tabs.module.css
+++ b/src/styles/Tabs.module.css
@@ -10,26 +10,26 @@
 		}
 	}
 	.panel {
-		border-top: solid 2px var(--color-text-acc);
+		border-top: solid 2px var(--mantine-color-accent-0);
 	}
 	.tab {
-		color: var(--color-text-pri);
-		border-color: var(--color-text-acc);
+		color: var(--mantine-color-primary-0);
+		border-color: var(--mantine-color-accent-0);
 		&:hover {
-			color: var(--color-background);
-			background-color: var(--color-text-acc);
+			color: var(--mantine-color-background-0);
+			background-color: var(--mantine-color-accent-0);
 		}
 		&[data-active="true"] {
-			border-color: var(--color-text-pri);
+			border-color: var(--mantine-color-primary-0);
 		}
 	}
 	.list {
-		border-top: solid 2px var(--color-text-acc);
+		border-top: solid 2px var(--mantine-color-accent-0);
 		padding-left: 2rem;
 		padding-top: 2rem;
 	}
 	.list::before {
-		border-color: var(--color-text-acc);
+		border-color: var(--mantine-color-accent-0);
 	}
 	&.root {
 		overflow: hidden;
diff --git a/src/styles/Text.module.css b/src/styles/Text.module.css
index ad40314..21089bf 100644
--- a/src/styles/Text.module.css
+++ b/src/styles/Text.module.css
@@ -8,7 +8,7 @@
 		font-size: 3.5em;
 		font-weight: 400;
 		width: max-content;
-		color: var(--color-text-acc);
+		color: var(--mantine-color-accent-0);
 	}
 }
 
@@ -23,7 +23,7 @@
 		margin-right: 1em;
 		text-transform: uppercase;
 		font-weight: 300;
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 	}
 }
 
@@ -37,13 +37,13 @@
 		text-transform: uppercase;
 		margin-top: 20px;
 		margin-bottom: 20px;
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 	}
 }
 
 .label {
 	&.root {
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 	}
 }
 
@@ -52,7 +52,7 @@
 		font-weight: 400;
 		font-size: 11px;
 		font-style: normal;
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 		font-family: "Jost", sans-serif;
 		margin: 0;
 	}
@@ -64,7 +64,7 @@
 		font-weight: 400;
 		font-style: italic;
 		text-transform: uppercase;
-		color: var(--color-text-acc);
+		color: var(--mantine-color-accent-0);
 		margin: 0;
 	}
 }
@@ -74,7 +74,7 @@
 		font-size: 14px;
 		font-weight: 400;
 		height: 10px;
-		color: var(--color-text-acc);
+		color: var(--mantine-color-accent-0);
 		text-transform: uppercase;
 		margin-top: 20px;
 		margin-bottom: 20px;
@@ -86,7 +86,7 @@
 		display: block;
 		font-size: 14px;
 		line-height: 2;
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 		width: min-content;
 		&:hover {
 			text-decoration: underline;
@@ -99,8 +99,8 @@
 		font-size: 32px;
 		font-weight: bold;
 		margin-top: 1.5rem;
-		color: var(--color-text-acc);
-		background-color: var(--color-search-background);
+		color: var(--mantine-color-accent-0);
+		background-color: var(--mantine-color-search-0);
 		border-radius: 8px;
 		padding-left: 8px;
 		padding-right: 8px;
@@ -111,7 +111,7 @@
 	&.root {
 		font-size: 24px;
 		font-weight: bold;
-		color: var(--color-text-pri);
+		color: var(--mantine-color-primary-0);
 	}
 }
 
@@ -137,6 +137,6 @@
 }
 
 a {
-	color: var(--color-text-pri);
+	color: var(--mantine-color-primary-0);
 	text-decoration: none;
 }
diff --git a/src/styles/TextInput.module.css b/src/styles/TextInput.module.css
index f95c9ad..1df9f95 100644
--- a/src/styles/TextInput.module.css
+++ b/src/styles/TextInput.module.css
@@ -6,12 +6,12 @@
 			.input {
 				width: 100%;
 				border: none;
-				background-color: var(--color-search-background);
-				color: var(--color-text-pri);
+				background-color: var(--mantine-color-search-0);
+				color: var(--mantine-color-primary-0);
 				font-size: 18px;
 			}
 			.section {
-				color: var(--color-border);
+				color: var(--mantine-color-border-0);
 				width: auto;
 				padding-left: .5rem;
 				opacity: 1;
@@ -28,18 +28,18 @@
 			.input {
 				width: 100%;
 				border: none;
-				background-color: var(--color-search-background);
-				color: var(--color-text-pri);
+				background-color: var(--mantine-color-search-0);
+				color: var(--mantine-color-primary-0);
 				font-size: 18px;
 			}
 			.section {
-				color: var(--color-border);
+				color: var(--mantine-color-border-0);
 				width: auto;
 				padding-left: .5rem;
 				opacity: 1;
 			}
 			::placeholder {
-				color: var(--color-text-acc) !important;
+				color: var(--mantine-color-accent-0) !important;
 				opacity: 50%;
 			}
 		}
diff --git a/src/styles/ThemeIcon.module.css b/src/styles/ThemeIcon.module.css
index af42d95..278850c 100644
--- a/src/styles/ThemeIcon.module.css
+++ b/src/styles/ThemeIcon.module.css
@@ -1,6 +1,6 @@
 .weatherIcon {
 	height: auto !important;
 	width: auto !important;
-	color: var(--color-text-pri) !important;
+	color: var(--mantine-color-primary-0) !important;
 	background: transparent !important;
 }