diff --git a/package.json b/package.json
index ba5c41c4..9d94e588 100644
--- a/package.json
+++ b/package.json
@@ -1,83 +1,83 @@
-{
-  "private": true,
-  "name": "doc2pen",
-  "version": "0.1.0",
-  "homepage": ".",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint --ext js,jsx src",
-    "lint:fix": "eslint --ext js,jsx src --fix"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^13.1.9",
-    "bootstrap": "^5.0.1",
-    "dom-to-image": "^2.6.0",
-    "file-saver": "^2.0.5",
-    "jspdf": "^2.3.1",
-    "jszip": "^3.6.0",
-    "leaflet": "^1.7.1",
-    "mousetrap": "^1.6.5",
-    "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",
-    "react-easy-emoji": "^1.4.0",
-    "react-helmet": "^6.1.0",
-    "react-icons": "^4.2.0",
-    "react-js-snackbar": "^1.0.4",
-    "react-leaflet": "^3.2.0",
-    "react-progressbar-semicircle": "^1.2.1",
-    "react-reveal": "^1.2.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
-    "react-scroll": "^1.8.2",
-    "react-useanimations": "^2.0.6",
-    "reactstrap": "^8.9.0",
-    "roughjs": "^4.4.1",
-    "sass": "^1.34.0",
-    "web-vitals": "^1.1.2"
-  },
-  "devDependencies": {
-    "eslint": "^7.27.0",
-    "eslint-plugin-react": "^7.24.0",
-    "gh-pages": "^3.2.0",
-    "husky": "^6.0.0",
-    "lint-staged": "^11.0.0",
-    "prettier": "^2.3.0"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.json": "prettier-package-json --write",
-    "*./src/*.{js,jsx,ts,tsx}": [
-      "npx prettier --write",
-      "eslint --fix"
-    ],
-    "*.{md,mdx,json,css,scss,yaml,yml}": [
-      "npx prettier --write"
-    ]
-  }
-}
+{
+  "private": true,
+  "name": "doc2pen",
+  "version": "0.1.0",
+  "homepage": ".",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint --ext js,jsx src",
+    "lint:fix": "eslint --ext js,jsx src --fix"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^13.1.9",
+    "bootstrap": "^5.0.1",
+    "dom-to-image": "^2.6.0",
+    "file-saver": "^2.0.5",
+    "jspdf": "^2.3.1",
+    "jszip": "^3.6.0",
+    "leaflet": "^1.7.1",
+    "mousetrap": "^1.6.5",
+    "pdf-lib": "^1.16.0",
+    "react": "^17.0.2",
+    "react-bootstrap": "^1.6.0",
+    "react-dom": "^17.0.2",
+    "react-draggable": "^4.4.3",
+    "react-dropzone": "^11.3.2",
+    "react-easy-emoji": "^1.4.0",
+    "react-helmet": "^6.1.0",
+    "react-icons": "^4.2.0",
+    "react-js-snackbar": "^1.0.4",
+    "react-leaflet": "^3.2.0",
+    "react-progressbar-semicircle": "^1.2.1",
+    "react-reveal": "^1.2.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.3",
+    "react-scroll": "^1.8.2",
+    "react-useanimations": "^2.0.6",
+    "reactstrap": "^8.9.0",
+    "roughjs": "^4.4.1",
+    "sass": "^1.34.0",
+    "web-vitals": "^1.1.2",
+    "react-color": "^2.19.3"
+  },
+  "devDependencies": {
+    "eslint": "^7.27.0",
+    "eslint-plugin-react": "^7.24.0",
+    "gh-pages": "^3.2.0",
+    "husky": "^6.0.0",
+    "lint-staged": "^11.0.0",
+    "prettier": "^2.3.0"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.json": "prettier-package-json --write",
+    "*./src/*.{js,jsx,ts,tsx}": [
+      "npx prettier --write",
+      "eslint --fix"
+    ],
+    "*.{md,mdx,json,css,scss,yaml,yml}": [
+      "npx prettier --write"
+    ]
+  }
+}
diff --git a/src/pages/Sketch/components/Canvas.jsx b/src/pages/Sketch/components/Canvas.jsx
index bf57686f..b1385a64 100644
--- a/src/pages/Sketch/components/Canvas.jsx
+++ b/src/pages/Sketch/components/Canvas.jsx
@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import styles from "./canvas.module.scss";
 import Toolbox from "./Toolbox/Toolbox";
-import { MdUndo, MdRedo } from "react-icons/md";
+import { DragIndicator, Undo, Redo } from "@material-ui/icons";
+import Draggable from "react-draggable";
 import ReactSnackBar from "react-js-snackbar";
 import checkBox from "./../../../assets/images/checkmark.svg";
 import rough from "roughjs/bin/rough";
@@ -629,39 +630,41 @@ function Canvas() {
 			/>
 
 			{/* ----- Undo & Redo----- */}
-			<div
-				className={`${styles.feature_container} ${styles.download_clear_container}`}
-			>
-				<label htmlFor="sketch-dcd-undo" title="Undo">
-					<div
-						className={styles.feature}
-						onClick={() => undo()}
-						style={{
-							cursor: `${canvasStateAt === -1 ? "not-allowed" : "pointer"}`,
-						}}
-						id="sketch-dcd-undo"
-					>
-						<MdUndo size={20} />
-					</div>
-				</label>
-				<label htmlFor="sketch-dcd-redo" title="Redo">
-					<div
-						className={styles.feature}
-						onClick={() => redo()}
-						style={{
-							cursor: `${
-								canvasStateAt === canvasStates.length - 1
-									? "not-allowed"
-									: "pointer"
-							}`,
-						}}
-						id="sketch-dcd-redo"
-					>
-						<MdRedo size={20} />
-					</div>
-				</label>
-			</div>
-
+			<Draggable>
+				<div
+					className={`${styles.feature_container} ${styles.download_clear_container}`}
+				>
+					<label htmlFor="sketch-dcd-undo" title="Undo">
+						<div
+							className={styles.feature}
+							onClick={() => undo()}
+							style={{
+								cursor: `${canvasStateAt === -1 ? "not-allowed" : "pointer"}`,
+							}}
+							id="sketch-dcd-undo"
+						>
+							<Undo fontSize="small" />
+						</div>
+					</label>
+					<label htmlFor="sketch-dcd-redo" title="Redo">
+						<div
+							className={styles.feature}
+							onClick={() => redo()}
+							style={{
+								cursor: `${
+									canvasStateAt === canvasStates.length - 1
+										? "not-allowed"
+										: "pointer"
+								}`,
+							}}
+							id="sketch-dcd-redo"
+						>
+							<Redo fontSize="small" />
+						</div>
+					</label>
+					<DragIndicator style={{ cursor: "grab" }} fontSize="large" />
+				</div>
+			</Draggable>
 			<canvas
 				ref={canvasRef}
 				width={`${canvasWidth}`}
@@ -677,6 +680,7 @@ function Canvas() {
 			</div>
 
 			{/* ----- Text ----- */}
+
 			<div
 				style={{ height: canvasHeight, width: canvasWidth }}
 				className={styles.text_container}
diff --git a/src/pages/Sketch/components/canvas.module.scss b/src/pages/Sketch/components/canvas.module.scss
index d387c09d..1172c68c 100644
--- a/src/pages/Sketch/components/canvas.module.scss
+++ b/src/pages/Sketch/components/canvas.module.scss
@@ -3,7 +3,8 @@
 .feature_container {
 	position: absolute;
 	display: flex;
-	padding: 0.3rem;
+	align-items: center;
+	padding: 0.05rem;
 	border-radius: 5px;
 	background-color: colors.$white;
 	box-shadow: 0 0 3px 0.3px colors.$grey;
@@ -13,7 +14,7 @@
 		margin: 0;
 		.feature {
 			position: relative;
-			padding: 0.7rem 0.5rem;
+			padding: 0.3rem 0.2rem;
 			margin: 0 0.2rem;
 			border-radius: 5px;
 			cursor: pointer;
diff --git a/yarn.lock b/yarn.lock
index c55056a0..6de63e56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3455,7 +3455,7 @@ check-types@^11.1.1:
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"
   integrity sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ==
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
+"chokidar@>=3.0.0 <4.0.0":
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
   integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
@@ -3489,6 +3489,21 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
+chokidar@^3.4.1:
+  version "3.4.3"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz"
+  integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.5.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 chownr@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -5544,6 +5559,11 @@ fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.3.1:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"