diff --git a/src/components/drawing/DrawingBoard.tsx b/src/components/drawing/DrawingBoard.tsx
index 3672f240..8e9900f0 100644
--- a/src/components/drawing/DrawingBoard.tsx
+++ b/src/components/drawing/DrawingBoard.tsx
@@ -14,7 +14,7 @@ import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 
 import ErasingAllConfirmationButton from './ErasingAllConfirmationButton';
-import DrawingColorsPalette from './DrawingColorsPalette';
+import DrawingColors from './DrawingColors';
 import { RoomState } from '../../store/slices/roomSlice';
 
 const DrawingBoard: React.FC = () => {
@@ -42,7 +42,7 @@ const DrawingBoard: React.FC = () => {
 	const [ sizeLabel, setSizeLabel ] = useState<number>();
 
 	// colors
-	const isColorMenuRow = useMediaQuery(theme.breakpoints.between('xs', 'md'));
+	const isColorsMenuRow = useMediaQuery(theme.breakpoints.between('xs', 'md'));
 	const colorsMenu = useAppSelector((state) => state.room.drawing.colorsMenu);
 	const colors = useAppSelector((state) => state.room.drawing.colors);
 	const color = useAppSelector((state) => state.room.drawing.color);
@@ -161,12 +161,12 @@ const DrawingBoard: React.FC = () => {
     
 	/* colors menu */
 	useEffect(() => {
-		if (isColorMenuRow) {
+		if (isColorsMenuRow) {
 			dispatch(roomActions.setDrawingColorsMenu('Menu'));
 		} else {
 			dispatch(roomActions.setDrawingColorsMenu('Row'));
 		}
-	}, [ isColorMenuRow ]);
+	}, [ isColorsMenuRow ]);
 
 	/* history */
 	useEffect(() => {
@@ -389,7 +389,7 @@ const DrawingBoard: React.FC = () => {
 		}
 	};
 
-	const handleUsePaletteColor = (selectedColor: RoomState['drawing']['color']) => {
+	const handleUseColor = (selectedColor: RoomState['drawing']['color']) => {
 		dispatch(roomActions.setDrawingColor(selectedColor));
 
 	};
@@ -567,11 +567,11 @@ const DrawingBoard: React.FC = () => {
 						container
 						xs='auto'
 					>							
-						<DrawingColorsPalette
+						<DrawingColors
 							type={colorsMenu}
-							paletteColors={colors}
-							paletteColor={color}
-							handleUsePaletteColor={handleUsePaletteColor}
+							colors={colors}
+							color={color}
+							handleUseColor={handleUseColor}
 						/>
 					</Grid>
 
diff --git a/src/components/drawing/DrawingColorsPalette.tsx b/src/components/drawing/DrawingColors.tsx
similarity index 53%
rename from src/components/drawing/DrawingColorsPalette.tsx
rename to src/components/drawing/DrawingColors.tsx
index ac18c058..bd364aa3 100644
--- a/src/components/drawing/DrawingColorsPalette.tsx
+++ b/src/components/drawing/DrawingColors.tsx
@@ -5,12 +5,12 @@ import { RoomState } from '../../store/slices/roomSlice';
 
 interface Props {
 	type: RoomState['drawing']['colorsMenu'];
-	paletteColors: RoomState['drawing']['colors'];
-	paletteColor: RoomState['drawing']['color'];
-	handleUsePaletteColor: (selectedColor: RoomState['drawing']['color']) => void; // eslint-disable-line
+	colors: RoomState['drawing']['colors'];
+	color: RoomState['drawing']['color'];
+	handleUseColor: (selectedColor: RoomState['drawing']['color']) => void; // eslint-disable-line
 }
 
-const DrawingColorsPalette: React.FC<Props> = (props) => {
+const DrawingColors: React.FC<Props> = (props) => {
   
 	const Component = { Row, Menu }[props.type] || null;
 
@@ -18,4 +18,4 @@ const DrawingColorsPalette: React.FC<Props> = (props) => {
 
 };
 
-export default DrawingColorsPalette;
\ No newline at end of file
+export default DrawingColors;
\ No newline at end of file
diff --git a/src/components/drawing/colorsMenus/Menu.tsx b/src/components/drawing/colorsMenus/Menu.tsx
index 79b93e46..87e2ed22 100644
--- a/src/components/drawing/colorsMenus/Menu.tsx
+++ b/src/components/drawing/colorsMenus/Menu.tsx
@@ -5,14 +5,14 @@ import { useState } from 'react';
 import { RoomState } from '../../../store/slices/roomSlice';
 
 interface Props {
-	paletteColors: RoomState['drawing']['colors'];
-	paletteColor: RoomState['drawing']['color'];
-	handleUsePaletteColor: (selectedColor: RoomState['drawing']['color']) => void; // eslint-disable-line
+	colors: RoomState['drawing']['colors'];
+	color: RoomState['drawing']['color'];
+	handleUseColor: (selectedColor: RoomState['drawing']['color']) => void; // eslint-disable-line
 }
 
 const Menu: React.FC<Props> = (props) => {
   
-	const { paletteColors, paletteColor, handleUsePaletteColor } = props;
+	const { colors, color, handleUseColor } = props;
 	
 	const [ anchorEl, setAnchorEl ] = useState<HTMLButtonElement | null>(null);
 
@@ -29,7 +29,7 @@ const Menu: React.FC<Props> = (props) => {
 	return <>
 		<IconButton
 			onClick={handleClick}
-			style={{ color: paletteColor, borderRadius: '50%' }}
+			style={{ color: color, borderRadius: '50%' }}
 			size='small'
 		>
 			<CircleIcon />
@@ -61,20 +61,20 @@ const Menu: React.FC<Props> = (props) => {
 				border={0}
 			>
 					
-				{paletteColors.map((color) => (
+				{colors.map((value) => (
 					<Grid
 						item
-						key={color}
+						key={value}
 					>
-						{color !== paletteColor &&
+						{value !== color &&
 						<IconButton
 							onClick={() => {
 								handleClose();
-								handleUsePaletteColor(color);
+								handleUseColor(value);
 							}}
 							size='small'
 						>
-							<CircleIcon style={{ color: color, borderRadius: '50%' }} />
+							<CircleIcon style={{ color: value, borderRadius: '50%' }} />
 						</IconButton>
 						}
 					</Grid>
diff --git a/src/components/drawing/colorsMenus/Row.tsx b/src/components/drawing/colorsMenus/Row.tsx
index b9d19842..bdccdfca 100644
--- a/src/components/drawing/colorsMenus/Row.tsx
+++ b/src/components/drawing/colorsMenus/Row.tsx
@@ -3,23 +3,23 @@ import CircleIcon from '@mui/icons-material/Circle';
 import { RoomState } from '../../../store/slices/roomSlice';
 
 interface Props {
-	paletteColors: RoomState['drawing']['colors'];
-	paletteColor: RoomState['drawing']['color'];
-	handleUsePaletteColor: (selectedColor: RoomState['drawing']['color']) => void; // eslint-disable-line
+	colors: RoomState['drawing']['colors'];
+	color: RoomState['drawing']['color'];
+	handleUseColor: (selectedColor: RoomState['drawing']['color']) => void; // eslint-disable-line
 }
 
 const Row: React.FC<Props> = (props) => {
   
-	const { paletteColors, paletteColor, handleUsePaletteColor } = props;
+	const { colors, color, handleUseColor } = props;
 
 	return <>
-		{paletteColors.map((value) => (
+		{colors.map((value) => (
 			<IconButton
 				key={value}
 				aria-label={`Use ${value} color`}
 				title={value}
-				onClick={() => handleUsePaletteColor(value)}
-				style={{ border: paletteColor === value ? '2px solid gray' : '2px solid lightgray' }}
+				onClick={() => handleUseColor(value)}
+				style={{ border: color === value ? '2px solid gray' : '2px solid lightgray' }}
 				size='small'
 			>
 				<CircleIcon