diff --git a/frontend/src/components/ColorPicker/index.js b/frontend/src/components/ColorPicker/index.js
index c10360e..7cf1396 100644
--- a/frontend/src/components/ColorPicker/index.js
+++ b/frontend/src/components/ColorPicker/index.js
@@ -5,6 +5,59 @@ import { GithubPicker } from "react-color";
 
 const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
   const [selectedColor, setSelectedColor] = useState(currentColor);
+  const colors = [
+    "#B80000",
+    "#DB3E00",
+    "#FCCB00",
+    "#008B02",
+    "#006B76",
+    "#1273DE",
+    "#004DCF",
+    "#5300EB",
+    "#EB9694",
+    "#FAD0C3",
+    "#FEF3BD",
+    "#C1E1C5",
+    "#BEDADC",
+    "#C4DEF6",
+    "#BED3F3",
+    "#D4C4FB",
+    "#4D4D4D",
+    "#999999",
+    "#FFFFFF",
+    "#F44E3B",
+    "#FE9200",
+    "#FCDC00",
+    "#DBDF00",
+    "#A4DD00",
+    "#68CCCA",
+    "#73D8FF",
+    "#AEA1FF",
+    "#FDA1FF",
+    "#333333",
+    "#808080",
+    "#cccccc",
+    "#D33115",
+    "#E27300",
+    "#FCC400",
+    "#B0BC00",
+    "#68BC00",
+    "#16A5A5",
+    "#009CE0",
+    "#7B64FF",
+    "#FA28FF",
+    "#666666",
+    "#B3B3B3",
+    "#9F0500",
+    "#C45100",
+    "#FB9E00",
+    "#808900",
+    "#194D33",
+    "#0C797D",
+    "#0062B1",
+    "#653294",
+    "#AB149E",
+  ];
 
   const handleChange = (color) => {
     setSelectedColor(color.hex);
@@ -16,11 +69,14 @@ const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
       onClose={handleClose}
       aria-labelledby="simple-dialog-title"
       open={open}
+      maxWidth="xs"
+      paperFullWidth
     >
       <GithubPicker
         width={"100%"}
         triangle="hide"
         color={selectedColor}
+        colors={colors}
         onChange={handleChange}
         onChangeComplete={(color) => onChange(color.hex)}
       />