diff --git a/package.json b/package.json
index fa5681a0..b165323e 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "pdf-lib": "^1.16.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.0",
+    "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.3",
     "react-dropzone": "^11.3.2",
diff --git a/src/pages/Sketch/components/Toolbox/Toolbox.jsx b/src/pages/Sketch/components/Toolbox/Toolbox.jsx
index fa017de0..143c7a38 100644
--- a/src/pages/Sketch/components/Toolbox/Toolbox.jsx
+++ b/src/pages/Sketch/components/Toolbox/Toolbox.jsx
@@ -1,5 +1,4 @@
-// import React, {useState} from "react";
-import React from "react";
+import React, { useState } from "react";
 import styles from "./toolbox.module.scss";
 import {
 	AiOutlineLine,
@@ -30,6 +29,7 @@ import {
 	ListItemText,
 	ListItemIcon,
 	Divider,
+	ClickAwayListener,
 } from "@material-ui/core";
 import {
 	AccountTree,
@@ -42,6 +42,7 @@ import {
 	Save,
 } from "@material-ui/icons";
 import IconsLibrary from "./../IconLibrary/IconsLibrary";
+import { ChromePicker } from "react-color";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -136,6 +137,41 @@ function VerticalTabs(props) {
 		loadLastState,
 		saveInstance,
 	} = props;
+	const [displayColorPicker, setDisplayColorPicker] = useState(false);
+	const ColorPicker = props => {
+		const { width, name, color, onColorChange } = props;
+		return (
+			<div className={styles.root}>
+				<div className={styles.swatch}>
+					<div
+						className={styles.colorIndicator}
+						style={{
+							backgroundColor: props.color || "#fff",
+						}}
+						onMouseDown={() => {
+							setDisplayColorPicker(true);
+						}}
+					/>
+				</div>
+				{displayColorPicker ? (
+					<ClickAwayListener
+						onClickAway={() => {
+							setDisplayColorPicker(false);
+						}}
+					>
+						<div className={styles.popover}>
+							<ChromePicker
+								width={width}
+								name={name}
+								color={color}
+								onChangeComplete={color => onColorChange(color.hex)}
+							/>
+						</div>
+					</ClickAwayListener>
+				) : null}
+			</div>
+		);
+	};
 
 	const classes = useStyles();
 	const [value, setValue] = React.useState(0);
@@ -296,11 +332,11 @@ function VerticalTabs(props) {
 					<List component="div">
 						<Feature title="Canvas Setup">
 							<div className={styles.colorPicker}>
-								<input
-									type="color"
+								<ColorPicker
+									width={200}
 									name="canvas_bg_color"
-									value={background}
-									onChange={e => setBackground(e.target.value)}
+									color={background}
+									onColorChange={setBackground}
 								/>
 								<input
 									className={styles.hexInput}
@@ -372,11 +408,11 @@ function VerticalTabs(props) {
 									<>
 										<Feature title="Fill Color">
 											<div className={styles.colorPicker}>
-												<input
-													type="color"
+												<ColorPicker
+													width={200}
 													name="canvas_pen_color"
-													value={fillColor}
-													onChange={e => setFillColor(e.target.value)}
+													color={fillColor}
+													onColorChange={setFillColor}
 												/>
 												<input
 													className={styles.hexInput}
@@ -455,11 +491,11 @@ function VerticalTabs(props) {
 
 						<Feature title="Stroke">
 							<div className={styles.colorPicker}>
-								<input
-									type="color"
+								<ColorPicker
+									width={200}
 									name="canvas_pen_color"
-									value={color}
-									onChange={e => setColor(e.target.value)}
+									color={color}
+									onColorChange={setColor}
 								/>
 								<input
 									className={styles.hexInput}
@@ -550,11 +586,11 @@ function VerticalTabs(props) {
 					<List component="div">
 						<Feature title="Stroke">
 							<div className={styles.colorPicker}>
-								<input
-									type="color"
+								<ColorPicker
+									width={200}
 									name="canvas_pen_color"
-									value={color}
-									onChange={e => setColor(e.target.value)}
+									color={color}
+									onColorChange={setColor}
 								/>
 								<input
 									className={styles.hexInput}
diff --git a/src/pages/Sketch/components/Toolbox/toolbox.module.scss b/src/pages/Sketch/components/Toolbox/toolbox.module.scss
index 1a3ba31e..31f4159e 100644
--- a/src/pages/Sketch/components/Toolbox/toolbox.module.scss
+++ b/src/pages/Sketch/components/Toolbox/toolbox.module.scss
@@ -89,14 +89,25 @@
 			display: flex;
 			justify-content: flex-start;
 			align-items: center;
-			input[type="color"] {
-				border: none;
-				outline: none;
-				width: 20px;
-				height: 20px;
+			.root {
+				position: relative;
+				.swatch {
+					box-shadow: 0px 0px 8px 5px #ede8e8;
+					border-radius: 5px;
+					padding: 2px;
+					.colorIndicator {
+						border-radius: 3px;
+						height: 22px;
+						width: 27px;
+					}
+				}
+				.popover {
+					position: absolute;
+				}
 			}
 			.hexInput {
 				font-size: 80%;
+				font-family: monospace;
 				height: 1.7rem;
 				margin-top: 2px;
 				margin-left: 10px;
diff --git a/yarn.lock b/yarn.lock
index 4f937045..d7c5dac9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1322,6 +1322,11 @@
     gud "^1.0.0"
     warning "^4.0.3"
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -7523,7 +7528,7 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash-es@^4.17.20:
+lodash-es@^4.17.15, lodash-es@^4.17.20:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
@@ -7598,7 +7603,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5, lodash@^4.7.0:
+"lodash@>=3.5 <5", lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7705,6 +7710,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9743,6 +9753,19 @@ react-bootstrap@^1.6.0:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
@@ -10049,6 +10072,13 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 reactstrap@^8.9.0:
   version "8.9.0"
   resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.9.0.tgz#bca4afa3f5cd18899ef9b33d877a141886d5abae"
@@ -11544,6 +11574,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"