diff --git a/features.txt b/features.txt
index f0d0a89..3801bb7 100644
--- a/features.txt
+++ b/features.txt
@@ -1,5 +1,5 @@
-1) Ctrl + Z to undo last edit, Ctrl + Shift + Z to redo last edit
-2) Colour wheel option for pencil
+1) Ctrl + Z to undo last edit, Ctrl + Shift + Z to redo last edit [DONE]
+2) Colour wheel option for pencil [DONE]
 3) Vertical scrolling is sorted, horizontal scrolling needs to be checked  [DONE]
 4) Enable drawing only when mouse is clicked. If i want to move around the canvas, I can press middle mouse button to do so. [DONE]
 5) Clear button [DONE]
diff --git a/package-lock.json b/package-lock.json
index 8349655..25e8a1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "drawing-app",
       "version": "0.0.0",
       "dependencies": {
+        "@melloware/coloris": "^0.24.0",
         "lucide-react": "^0.469.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
@@ -972,6 +973,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@melloware/coloris": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@melloware/coloris/-/coloris-0.24.0.tgz",
+      "integrity": "sha512-9RGKHqZJsUSsxb/0xaBCK5OKywobiK/xRtV8f4KQDmviqmVfkMLR3kK4DRuTTLSFdSOqkV0OQ/Niitu+rlXXYw=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/package.json b/package.json
index 7a8d95d..26c6dec 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@melloware/coloris": "^0.24.0",
     "lucide-react": "^0.469.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/src/components/DrawingApp.jsx b/src/components/DrawingApp.jsx
index c61530e..5692ed4 100644
--- a/src/components/DrawingApp.jsx
+++ b/src/components/DrawingApp.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Pencil, Eraser, Move } from 'lucide-react';
+import { Pencil, Eraser, Move, Trash2, Undo2, Redo2 } from 'lucide-react';
 
 const CANVAS_SIZE = 2000;
 
@@ -266,7 +266,7 @@ const DrawingApp = () => {
     if (touchMode === 'pan') return 'cursor-grab';
     return 'cursor-crosshair';
   };
-
+  
    return (
     <div className="fixed inset-0 w-screen h-screen overflow-hidden bg-gray-100">
       <div className="fixed top-4 left-4 bg-white rounded-lg shadow-lg p-2 flex gap-2 z-50">
@@ -306,17 +306,38 @@ const DrawingApp = () => {
                   }}
                 />
               ))}
+              <div className="w-8 h-8 rounded color-picker" title={`Selected color: ${color}`} onClick={()=> document.getElementById('hidden-color-picker').click()}>
+                <input className="w-8 h-8 rounded" onChange={(e)=>{
+                  setColor(e.target.value)
+                  setTool('pencil')
+                }} type="color" id="hidden-color-picker" style={{position: 'absolute ', opacity: '0', pointerEvents: 'none'}} ></input>
+              </div>       
             </div>
           </>
         )}
-        
         <div className="w-px h-8 bg-gray-200 mx-2" />
-        <button 
-          className="p-2 rounded hover:bg-blue-50"
-          onClick={clearCanvas}
-        >
-          Clear
+        <button
+              className={`p-2 rounded hover:bg-blue-50`}
+              onClick={clearCanvas}
+              title={"Clear canvas"}
+            >
+              <Trash2 className="w-4 h-4" />
+        </button>
+        <button
+              className={`p-2 rounded hover:bg-blue-50`}
+              onClick={handleUndo}
+              title={"Undo"}
+            >
+              <Undo2 className="w-4 h-4" />
+        </button>
+        <button
+              className={`p-2 rounded hover:bg-blue-50 `}
+              onClick={handleRedo}
+              title={"Redo"}
+            >
+              <Redo2 className="w-4 h-4" />
         </button>
+        <div className="w-px h-8 bg-gray-200 mx-2" />
       </div>
 
       <div
diff --git a/src/index.css b/src/index.css
index 966368c..accc949 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,26 @@
 @tailwind components;
 @tailwind utilities;
 
-body{
-    overscroll-behavior: contain;
-}
\ No newline at end of file
+body {
+  overscroll-behavior: contain;
+}
+
+.color-picker {
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  border-radius: 50%;
+  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
+  cursor: pointer;
+  padding: 0;
+  position: relative;
+}
+
+.color-picker::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.color-picker::-webkit-color-swatch {
+  border: none;
+  border-radius: 50%;
+}
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..e9dd5df 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,6 +2,10 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
+import "@melloware/coloris/dist/coloris.css";
+import { coloris, init } from "@melloware/coloris";
+init();
+coloris({el: "#coloris"});
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>