diff --git a/config.yml b/config.yml
new file mode 100644
index 0000000..7de20fa
--- /dev/null
+++ b/config.yml
@@ -0,0 +1 @@
+pwa: true
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8d23a3f..62d1c2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1117,6 +1117,35 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.30",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz",
+      "integrity": "sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.30",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.30.tgz",
+      "integrity": "sha512-E3sAXATKCSVnT17HYmZjjbcmwihrNOCkoU7dVMlasrcwiJAHxSKeZ+4WN5O+ElgO/FaYgJmASl8p9N7/B/RttA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.30"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.14.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz",
+      "integrity": "sha512-M933RDM8cecaKMWDSk3FRYdnzWGW7kBBlGNGfvqLVwcwhUPNj9gcw+xZMrqBdRqxnSXdl3zWzTCNNGEtFUq67Q==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.30"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.11.tgz",
+      "integrity": "sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
diff --git a/package.json b/package.json
index 72908bc..4f28486 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,14 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "@types/lodash": "^4.14.156",
-    "@types/react-color": "^3.0.4",
     "react": "^16.13.1",
-    "react-color": "^2.18.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
     "typescript": "^3.9.5"
diff --git a/src/Components/CanvasComponent.tsx b/src/Components/CanvasComponent.tsx
index 277c216..2867e9d 100644
--- a/src/Components/CanvasComponent.tsx
+++ b/src/Components/CanvasComponent.tsx
@@ -1,24 +1,29 @@
 import React from "react";
-import { SketchPicker } from "react-color";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEraser, faCircle, faSquare, faPaintBrush, faDownload, faSync } from '@fortawesome/free-solid-svg-icons'
 
 interface Point {
   x: number;
   y: number;
 }
 
-interface Color {
-  hex: string;
-}
 
 class CanvasComponent extends React.Component {
+  colorInput;
+
+  constructor(props) {
+    super(props);
+    this.colorInput = React.createRef();
+  }
+
   state = {
-    background: "#121212",
+    color: "#000000",
     choice: "brush",
     canvas: {} as HTMLCanvasElement,
   };
 
-  handleChangeComplete = (color) => {
-    this.setState({ background: color.hex });
+  handleChangeComplete = (e) => {
+    this.setState({ color: e.target.value });
   };
 
   componentDidMount() {
@@ -29,6 +34,11 @@ class CanvasComponent extends React.Component {
     const canvas: HTMLCanvasElement = document.getElementById(
       "canvas"
     ) as HTMLCanvasElement;
+    
+    // Setting up width and height of canvas
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    
     const canvasWidth = canvas.width;
     const canvasHeight = canvas.height;
     const ctx:any = canvas.getContext("2d");
@@ -41,7 +51,7 @@ class CanvasComponent extends React.Component {
     this.setState({ canvas });
 
     ctx.beginPath();
-    ctx.rect(0, 0, canvasHeight, canvasWidth);
+    ctx.rect(0, 0, canvasWidth, canvasHeight);
     ctx.fillStyle = "#ffffff";
     ctx.fill();
 
@@ -112,7 +122,7 @@ class CanvasComponent extends React.Component {
             plvaly = e.clientY;
           }
           ctx.drawImage(canvasPic, 0, 0);
-          ctx.fillStyle = this.state.background;
+          ctx.fillStyle = this.state.color;
           ctx.beginPath();
           ctx.rect(
             lastPoint.x,
@@ -142,7 +152,7 @@ class CanvasComponent extends React.Component {
             plvaly = e.clientY;
           }
           ctx.drawImage(canvasPic, 0, 0);
-          ctx.fillStyle = this.state.background;
+          ctx.fillStyle = this.state.color;
           ctx.beginPath();
           ctx.arc(
             lastPoint.x,
@@ -169,7 +179,7 @@ class CanvasComponent extends React.Component {
       for (let i = 0; i < dist; i++) {
         x = lastPoint.x + Math.sin(angle) * i - 0;
         y = lastPoint.y + Math.cos(angle) * i - 0;
-        ctx.fillStyle = this.state.background;
+        ctx.fillStyle = this.state.color;
         ctx.beginPath();
         ctx.rect(x, y, 5, 5);
         ctx.fill();
@@ -192,22 +202,33 @@ class CanvasComponent extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <canvas id="canvas" ref="canvas" width={500} height={500} />
+        <canvas id="canvas" ref="canvas"/>
         <div className="toolset">
           <button
             onClick={() => {
               this.setState({ choice: "brush" });
             }}
           >
-            Brush
+            <FontAwesomeIcon icon={faPaintBrush}/>
           </button>
 
+          <button
+            onClick={() => {
+              this.colorInput.current.value="#ffffff";
+              this.setState({ choice: "brush" });
+              this.setState({ color: "#ffffff" });
+            }}
+          >
+            <FontAwesomeIcon icon={faEraser}/>
+          </button>
+
+
           <button
             onClick={() => {
               this.setState({ choice: "rectangle" });
             }}
           >
-            Rectangle
+            <FontAwesomeIcon icon={faSquare}/>
           </button>
 
           <button
@@ -215,10 +236,12 @@ class CanvasComponent extends React.Component {
               this.setState({ choice: "circle" });
             }}
           >
-            Circle
+            <FontAwesomeIcon icon={faCircle}/>
           </button>
 
-          <button onClick={this.updateCanvas.bind(this)}>Clear</button>
+          <button onClick={this.updateCanvas.bind(this)}>
+            <FontAwesomeIcon icon={faSync}/>
+          </button>
 
           <button
             onClick={() => {
@@ -228,12 +251,9 @@ class CanvasComponent extends React.Component {
               link.click();
             }}
           >
-            Download
+            <FontAwesomeIcon icon={faDownload}/>
           </button>
-          <SketchPicker
-            color={this.state.background}
-            onChangeComplete={this.handleChangeComplete}
-          />
+          <input type="color" ref={this.colorInput} onChange={this.handleChangeComplete}/>
         </div>
       </React.Fragment>
     );
diff --git a/src/index.tsx b/src/index.tsx
index 6a22009..5e7a8f9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,4 +13,4 @@ class Main extends React.Component {
   }
 }
 
-ReactDOM.render(<Main />, document.getElementById("root"));
+ReactDOM.render(<Main />, document.getElementById("root"));
\ No newline at end of file
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
index b04b771..f040fa6 100644
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@@ -20,7 +20,7 @@ const isLocalhost = Boolean(
     )
 );
 
-export function register(config) {
+export default function register(config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
diff --git a/src/styles.css b/src/styles.css
index 23cf957..44a8c51 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,17 +2,35 @@ body{
 	margin: 0;
 	overflow: hidden;
 }
+.main{
+	height: 100vh;
+	width: 100vw;
+	position: relative;
+	box-shadow: 0 0 5px gray;
+}
 canvas{
 	box-shadow: 0 0 5px gray;
 	cursor: crosshair;
 }
 .toolset{
-	float: right;
+	position: absolute;
+	top: 0;
+	right: 0;
 	display: flex;
 	flex-direction: column;
-	padding: 5px;
 }
-.sketch-picker{
-	width: 115px !Important;
+.toolset > button{
+	height: 30px;
+}
+.circle-picker{
+	border: 1px solid rgba(0,0,0,0.4);
+	background-color: #e5e5e5;
+	text-align: center !important;
+	width: 90px !Important;
 	cursor: pointer;
+}
+.circle-picker > span >div{
+	width: 22px !important;
+	height: 22px !important;
+	margin: 2px !important;
 }
\ No newline at end of file