diff --git a/client/src/Components/inputs/ToggleButton.tsx b/client/src/Components/inputs/ToggleButton.tsx
index 40b4309b8..e0a6f0ea2 100644
--- a/client/src/Components/inputs/ToggleButton.tsx
+++ b/client/src/Components/inputs/ToggleButton.tsx
@@ -3,8 +3,10 @@ import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import type { ToggleButtonProps } from "@mui/material/ToggleButton";
 import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
 import { useTheme } from "@mui/material/styles";
+import { alpha } from "@mui/material/styles";
 
 export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
+	const theme = useTheme();
 	return (
 		<ToggleButton
 			{...props}
@@ -17,8 +19,18 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 				textOverflow: "ellipsis",
 				overflow: "hidden",
 				boxShadow: "none",
+				color: theme.palette.text.secondary,
 				"&:hover": {
 					boxShadow: "none",
+					backgroundColor: theme.palette.action.hover,
+				},
+				"&.Mui-selected": {
+					backgroundColor: alpha(theme.palette.primary.main, 0.06),
+					color: theme.palette.text.primary,
+					fontWeight: 500,
+					"&:hover": {
+						backgroundColor: alpha(theme.palette.primary.main, 0.1),
+					},
 				},
 				...sx,
 			}}
@@ -34,7 +46,6 @@ export const ToggleButtonGroupInput = ({ sx, ...props }: ToggleButtonGroupProps)
 			sx={{
 				"& .MuiToggleButtonGroup-grouped": {
 					borderColor: theme.palette.divider,
-
 					borderRadius: 0,
 					"&:first-of-type": {
 						borderTopLeftRadius: 2,