diff --git a/src/components/TriStateFilter.module.css b/src/components/TriStateFilter.module.css
index 18d7694..4bee934 100644
--- a/src/components/TriStateFilter.module.css
+++ b/src/components/TriStateFilter.module.css
@@ -1,46 +1,40 @@
 .input {
-	padding: var(--mantine-spacing-2xs) var(--mantine-spacing-xs);
-	border: 1px solid var(--tri-state-filter-color);
+	padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
 	border-radius: var(--mantine-radius-default);
 	cursor: pointer;
-	background-color: light-dark(
-		var(--mantine-color-input-1),
-		var(--mantine-color-input-9)
-	);
 	min-height: 32px;
 	display: flex;
 	align-items: center;
 	width: 100%;
 	text-align: left;
 	transition: border-color 0.2s ease;
-
-	&:hover {
-		border-color: var(--tri-state-filter-color-hover);
-	}
+	background-color: light-dark(
+			var(--mantine-color-input-1),
+			var(--mantine-color-input-9)
+	);
+	border: 1px solid var(--mantine-color-border-4);
+	color: var(--mantine-color-inputFg-5);
 }
 
 .dropdown {
 	background-color: light-dark(
-		var(--mantine-color-input-1),
-		var(--mantine-color-input-9)
+			var(--mantine-color-input-1),
+			var(--mantine-color-input-9)
 	);
-	border: 1px solid var(--tri-state-filter-color);
+	color: var(--mantine-color-inputFg-5);
 }
 
 .searchInput {
 	background-color: light-dark(
-		var(--mantine-color-input-1),
-		var(--mantine-color-input-9)
-	);
-	border-color: light-dark(
-		var(--mantine-color-input-6),
-		var(--mantine-color-input-5)
+			var(--mantine-color-input-1),
+			var(--mantine-color-input-9)
 	);
-	color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+	border: 1px solid var(--mantine-color-border-4);
+	color: var(--mantine-color-inputFg-5);
 }
 
 .option {
-	padding: var(--mantine-spacing-3xs) var(--mantine-spacing-xs);
+	padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
 	cursor: pointer;
 	border-radius: var(--mantine-radius-sm);
 	background-color: transparent;
@@ -49,11 +43,9 @@
 	text-align: left;
 	transition: background-color 0.2s ease;
 
+
 	&:hover {
-		background-color: light-dark(
-			var(--tri-state-filter-option-hover-light),
-			var(--tri-state-filter-option-hover-dark)
-		);
+		background-color: var(--mantine-primary-color-light-hover);
 	}
 }
 
@@ -65,31 +57,31 @@
 
 	&:hover {
 		background-color: light-dark(
-			var(--tri-state-filter-option-active-hover-light),
-			var(--tri-state-filter-option-active-hover-dark)
+				var(--mantine-color-gray-3),
+				var(--mantine-color-dark-4)
 		);
 	}
 }
 
 .pillInclude {
 	background-color: light-dark(
-		var(--mantine-color-success-1),
-		var(--mantine-color-success-9)
+		var(--mantine-color-green-1),
+		var(--mantine-color-green-9)
 	);
 	color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
 	border: 1px solid
-		light-dark(var(--mantine-color-success-3), var(--mantine-color-success-7));
+		light-dark(var(--mantine-color-green-3), var(--mantine-color-green-7));
 	font-size: var(--mantine-font-size-xs);
 }
 
 .pillExclude {
 	background-color: light-dark(
-		var(--mantine-color-error-1),
-		var(--mantine-color-error-9)
+		var(--mantine-color-red-1),
+		var(--mantine-color-red-9)
 	);
 	color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
 	border: 1px solid
-		light-dark(var(--mantine-color-error-3), var(--mantine-color-error-7));
+		light-dark(var(--mantine-color-red-3), var(--mantine-color-red-7));
 	font-size: var(--mantine-font-size-xs);
 }
 
diff --git a/src/components/TriStateFilter.tsx b/src/components/TriStateFilter.tsx
index 351dd64..60cfee7 100644
--- a/src/components/TriStateFilter.tsx
+++ b/src/components/TriStateFilter.tsx
@@ -2,7 +2,6 @@ import {
 	Checkbox,
 	CloseButton,
 	Group,
-	type MantineColor,
 	Pill,
 	Popover,
 	Stack,
@@ -22,7 +21,6 @@ type TriStateFilterProps = {
 	value: TriStateFilterValue;
 	onChange: (value: TriStateFilterValue) => void;
 	placeholder?: string;
-	color?: MantineColor;
 };
 
 const TriStateFilter = ({
@@ -31,7 +29,6 @@ const TriStateFilter = ({
 	value,
 	onChange,
 	placeholder,
-	color = "primary",
 }: TriStateFilterProps) => {
 	const [searchQuery, setSearchQuery] = useState("");
 	const [opened, setOpened] = useState(false);
@@ -110,9 +107,6 @@ const TriStateFilter = ({
 				position="bottom-start"
 				opened={opened}
 				onChange={setOpened}
-				classNames={{
-					dropdown: classes.dropdown,
-				}}
 			>
 				<Popover.Target>
 					<div>
@@ -131,16 +125,6 @@ const TriStateFilter = ({
 									setOpened((o) => !o);
 								}
 							}}
-							style={
-								{
-									"--tri-state-filter-color": `var(--mantine-color-${color}-6)`,
-									"--tri-state-filter-color-hover": `var(--mantine-color-${color}-5)`,
-									"--tri-state-filter-option-hover-light": `var(--mantine-color-${color}-0)`,
-									"--tri-state-filter-option-hover-dark": `var(--mantine-color-${color}-7)`,
-									"--tri-state-filter-option-active-hover-light": `var(--mantine-color-${color}-1)`,
-									"--tri-state-filter-option-active-hover-dark": `var(--mantine-color-${color}-8)`,
-								} as React.CSSProperties
-							}
 						>
 							{totalActive === 0 ? (
 								<Text size="sm" c="dimmed">
@@ -191,7 +175,6 @@ const TriStateFilter = ({
 								onChange={(e) => setSearchQuery(e.currentTarget.value)}
 								size="xs"
 								style={{ flex: 1 }}
-								classNames={{ input: classes.searchInput }}
 							/>
 							<Group gap="2xs">
 								{totalActive > 0 && (
diff --git a/src/components/navigation/NavbarLinksGroup.module.css b/src/components/navigation/NavbarLinksGroup.module.css
index f2e1c91..2c8dce0 100644
--- a/src/components/navigation/NavbarLinksGroup.module.css
+++ b/src/components/navigation/NavbarLinksGroup.module.css
@@ -6,7 +6,7 @@
   font-size: var(--mantine-font-size-sm);
   color: var(--mantine-color-primary-3);
 
-  @mixin hover {
+  &:hover {
     background-color: var(--mantine-color-primary-5);
     color: var(--mantine-color-primaryFg-5);
   }
@@ -31,7 +31,7 @@
   text-align: left;
   cursor: pointer;
 
-  @mixin hover {
+  &:hover {
     background-color: var(--mantine-color-primary-5);
     color: var(--mantine-color-primaryFg-5);
   }
@@ -40,7 +40,7 @@
 .label {
   color: var(--mantine-color-primaryFg-5);
 
-  @mixin hover {
+  &:hover {
     background-color: var(--mantine-color-primary-5);
   }
 }
diff --git a/src/features/game/core/GameSwitcher.module.css b/src/features/game/core/GameSwitcher.module.css
index 3f731e3..201015e 100644
--- a/src/features/game/core/GameSwitcher.module.css
+++ b/src/features/game/core/GameSwitcher.module.css
@@ -5,7 +5,7 @@
 	border-radius: var(--mantine-radius-sm);
 	transition: all 150ms ease;
 
-	@mixin hover {
+	&:hover {
 		border-color: var(--mantine-color-border-5);
 	}
 }
@@ -32,7 +32,7 @@
 	);
 	transition: all 150ms ease;
 
-	@mixin hover {
+	&:hover {
 		border-color: var(--mantine-color-border-7);
 	}
 
diff --git a/src/features/game/items/SearchItemInput.module.css b/src/features/game/items/SearchItemInput.module.css
deleted file mode 100644
index e24bf1b..0000000
--- a/src/features/game/items/SearchItemInput.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.input {
-  background-color: light-dark(var(--mantine-color-input-1), var(--mantine-color-input-9)) !important;
-  border: 1px solid var(--search-item-input-color) !important;
-}
-
-.input:focus {
-  border-color: var(--search-item-input-color-hover) !important;
-}
-
-.dropdown {
-  background-color: light-dark(var(--mantine-color-input-1), var(--mantine-color-input-9)) !important;
-  border: 1px solid var(--search-item-input-color) !important;
-}
-
-.option[data-combobox-selected] {
-  background-color: var(--search-item-input-color-light) !important;
-}
-
-.option:hover {
-  background-color: var(--search-item-input-color-light-hover) !important;
-}
diff --git a/src/features/game/items/SearchItemInput.tsx b/src/features/game/items/SearchItemInput.tsx
index 3c6e2ae..339de34 100644
--- a/src/features/game/items/SearchItemInput.tsx
+++ b/src/features/game/items/SearchItemInput.tsx
@@ -1,21 +1,18 @@
-import { type MantineColor, Select } from "@mantine/core";
-import { useRef, useState } from "react";
+import { Select } from "@mantine/core";
 import { useGameId } from "#/features/game/core/use-game-id";
 import { getGameItems } from "#/features/game/registry/game-registry";
-import classes from "./SearchItemInput.module.css";
+import {useRef, useState} from "react";
 
 type SearchItemInputProps = {
 	searchValue: string;
 	onSearchChange: (query: string) => void;
 	onLoadingChange?: (loading: boolean) => void;
-	color?: MantineColor;
 };
 
 const SearchItemInput = ({
 	searchValue,
 	onSearchChange,
 	onLoadingChange,
-	color = "primary",
 }: SearchItemInputProps) => {
 	const timeoutRef = useRef<number>(-1);
 	const [value, setValue] = useState(searchValue);
@@ -63,20 +60,7 @@ const SearchItemInput = ({
 			data={data}
 			nothingFoundMessage="No items found"
 			comboboxProps={{ transitionProps: { transition: "pop", duration: 200 } }}
-			style={
-				{
-					width: "100%",
-					"--search-item-input-color": `var(--mantine-color-${color}-6)`,
-					"--search-item-input-color-hover": `var(--mantine-color-${color}-5)`,
-					"--search-item-input-color-light": `var(--mantine-color-${color}-light)`,
-					"--search-item-input-color-light-hover": `var(--mantine-color-${color}-light-hover)`,
-				} as React.CSSProperties
-			}
-			classNames={{
-				input: classes.input,
-				dropdown: classes.dropdown,
-				option: classes.option,
-			}}
+			w="100%"
 		/>
 	);
 };
diff --git a/src/features/theme/modules/Input.module.css b/src/features/theme/modules/Input.module.css
index e1bf1f3..4149439 100644
--- a/src/features/theme/modules/Input.module.css
+++ b/src/features/theme/modules/Input.module.css
@@ -1,5 +1,5 @@
 .input {
   background-color: var(--mantine-color-input-5);
-  border: var(--mantine-color-border-4);
+  border: 1px solid var(--mantine-color-border-4);
   color: var(--mantine-color-inputFg-5);
 }
diff --git a/src/features/theme/modules/MultiSelect.module.css b/src/features/theme/modules/MultiSelect.module.css
index c9b34ca..909efb1 100644
--- a/src/features/theme/modules/MultiSelect.module.css
+++ b/src/features/theme/modules/MultiSelect.module.css
@@ -12,7 +12,6 @@
     var(--mantine-color-input-1),
     var(--mantine-color-input-9)
   );
-  border: 1px solid var(--mantine-color-border-4);
   color: var(--mantine-color-inputFg-5);
 }
 
@@ -23,7 +22,7 @@
     background-color: var(--mantine-primary-color-light);
   }
 
-  @mixin hover {
+  &:hover {
     background-color: var(--mantine-primary-color-light-hover);
   }
 }
@@ -38,5 +37,5 @@
 .label {
   font-size: var(--mantine-font-size-sm);
   font-weight: 500;
-  margin-bottom: var(--mantine-spacing-2xs);
+  margin-bottom: var(--mantine-spacing-xs);
 }
diff --git a/src/features/theme/modules/Select.module.css b/src/features/theme/modules/Select.module.css
index 4f81329..5afacb7 100644
--- a/src/features/theme/modules/Select.module.css
+++ b/src/features/theme/modules/Select.module.css
@@ -18,7 +18,7 @@
 
 .option {
   background-color: transparent;
-  @mixin hover {
+  &:hover {
     background-color: light-dark(var(--mantine-color-primary-3), var(--mantine-color-primary-5));
   }
 }
\ No newline at end of file
diff --git a/src/features/theme/themes/base-theme.ts b/src/features/theme/themes/base-theme.ts
index 8439c5b..0e62296 100644
--- a/src/features/theme/themes/base-theme.ts
+++ b/src/features/theme/themes/base-theme.ts
@@ -1,4 +1,4 @@
-import type { MantineThemeOverride } from "@mantine/core";
+import type {MantineThemeOverride} from "@mantine/core";
 import {
 	Button,
 	Card,