diff --git a/src/components/DrawingShapes.jsx b/src/components/DrawingShapes.jsx
index 182b943..91e1a5c 100644
--- a/src/components/DrawingShapes.jsx
+++ b/src/components/DrawingShapes.jsx
@@ -4,6 +4,7 @@ import circleImg from "../assets/images/circle.svg";
 import triangleImg from "../assets/images/triangle.svg";
 import lineImg from "../assets/images/line.svg";
 import { GiPencilBrush } from "react-icons/gi";
+
 const DrawingShapes = ({
   brushWidth,
   selectedColor,
@@ -15,22 +16,22 @@ const DrawingShapes = ({
   const [isDrawing, setIsDrawing] = useState(false);
   const [prevMouseX, setPrevMouseX] = useState(0);
   const [prevMouseY, setPrevMouseY] = useState(0);
-
   const [snapshot, setSnapshot] = useState(null);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [currentToolName, setCurrentToolName] = useState();
 
   const shapeDropRef = useRef(null);
 
-  const handleoutsideClick = (event) => {
+  const handleOutsideClick = (event) => {
     if (shapeDropRef.current && !shapeDropRef.current.contains(event.target)) {
       setIsDropdownOpen(false);
     }
   };
 
   useEffect(() => {
-    document.addEventListener("mousedown", handleoutsideClick);
+    document.addEventListener("mousedown", handleOutsideClick);
     return () => {
-      document.removeEventListener("mousedown", handleoutsideClick);
+      document.removeEventListener("mousedown", handleOutsideClick);
     };
   }, [isDropdownOpen]);
 
@@ -56,7 +57,8 @@ const DrawingShapes = ({
       ctx.putImageData(snapshot, 0, 0);
       ctx.beginPath();
       const radius = Math.sqrt(
-        Math.pow(prevMouseX - e.offsetX, 2) + Math.pow(prevMouseY - e.offsetY, 2)
+        Math.pow(prevMouseX - e.offsetX, 2) +
+          Math.pow(prevMouseY - e.offsetY, 2)
       );
       ctx.arc(prevMouseX, prevMouseY, radius, 0, 2 * Math.PI);
       fillColor ? ctx.fill() : ctx.stroke();
@@ -95,7 +97,15 @@ const DrawingShapes = ({
       ctx.translate(prevMouseX, prevMouseY);
       ctx.rotate(angle);
       ctx.beginPath();
-      ctx.rect(0, -brushWidth / 2, Math.sqrt(Math.pow(e.offsetX - prevMouseX, 2) + Math.pow(e.offsetY - prevMouseY, 2)), brushWidth);
+      ctx.rect(
+        0,
+        -brushWidth / 2,
+        Math.sqrt(
+          Math.pow(e.offsetX - prevMouseX, 2) +
+            Math.pow(e.offsetY - prevMouseY, 2)
+        ),
+        brushWidth
+      );
       ctx.fillStyle = selectedColor;
       ctx.fill();
       ctx.restore();
@@ -171,7 +181,17 @@ const DrawingShapes = ({
       canvas.removeEventListener("mouseup", stopDrawing);
       canvas.removeEventListener("mouseout", stopDrawing);
     };
-  }, [brushWidth, fillColor, selectedTool, selectedColor, snapshot, canvasRef, isDrawing, prevMouseX, prevMouseY]);
+  }, [
+    brushWidth,
+    fillColor,
+    selectedTool,
+    selectedColor,
+    snapshot,
+    canvasRef,
+    isDrawing,
+    prevMouseX,
+    prevMouseY,
+  ]);
 
   function toggleDropDown() {
     setIsDropdownOpen(!isDropdownOpen);
@@ -201,50 +221,56 @@ const DrawingShapes = ({
 
   const [lower, setLower] = useState(false);
 
-  const handleBrushSelect = (brush) => {
+  const handleBrushSelect = (brush, brushName) => {
     setSelectedTool(brush);
+    setCurrentToolName(brushName);
     setIsDropdownOpen(false); // Close dropdown after selection
   };
 
   return (
     <>
-      <div>
+      <div className="tooltip">
         <button
-          className=" h-10 p-2 rounded-md text-xl shadow-md hover:bg-gray-400"
-          style={{ backgroundColor: '#D1D5DB', color: '#000' }}
+          className="h-10 p-2 rounded-md text-xl shadow-md hover:bg-gray-400"
+          style={{ backgroundColor: "#D1D5DB", color: "#000" }}
           onClick={() => setLower(!lower)}
         >
           <GiPencilBrush />
         </button>
-        {lower && (
-          <div className="absolute bg-slate-300 p-1 h-40 overflow-auto">
-            <div
-              onClick={() => handleBrushSelect("rounded")}
-              className="hover:bg-gray-400 p-2 cursor-pointer"
-            >
-              <h1 className="mb-2">Rounded Brush</h1>
-            </div>
-            <div
-              onClick={() => handleBrushSelect("flat")}
-              className="hover:bg-gray-400 p-2 cursor-pointer"
-            >
-              <h1 className="mb-2">Flat Brush</h1>
-            </div>
-            <div
-              onClick={() => handleBrushSelect("watercolor")}
-              className="hover:bg-gray-400 p-2 cursor-pointer"
-            >
-              <h1 className="mb-2">Watercolor Brush</h1>
-            </div>
-            <div
-              onClick={() => handleBrushSelect("blur")}
-              className="hover:bg-gray-400 p-2 cursor-pointer"
-            >
-              <h1 className="mb-2">Blur Brush</h1>
-            </div>
-          </div>
-        )}
+        <span className="tooltiptext">Brush</span>
       </div>
+      {lower && (
+        <div className="absolute bg-slate-300 p-1 h-40 overflow-auto">
+          <div
+            onClick={() => handleBrushSelect("rounded", "Rounded Brush")}
+            className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip"
+          >
+            <h1 className="mb-2">Rounded Brush</h1>
+            <span className="tooltiptext">Rounded Brush</span>
+          </div>
+          <div
+            onClick={() => handleBrushSelect("flat", "Flat Brush")}
+            className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip"
+          >
+            <h1 className="mb-2">Flat Brush</h1>
+            <span className="tooltiptext">Flat Brush</span>
+          </div>
+          <div
+            onClick={() => handleBrushSelect("watercolor", "Watercolor Brush")}
+            className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip"
+          >
+            <h1 className="mb-2">Watercolor Brush</h1>
+            <span className="tooltiptext">Watercolor Brush</span>
+          </div>
+          <div
+            onClick={() => handleBrushSelect("blur", "Blur Brush")}
+            className="hover:bg-gray-400 p-2 cursor-pointer relative group tooltip"
+          >
+            <h1 className="mb-2">Blur Brush</h1>
+            <span className="tooltiptext">Blur Brush</span>
+          </div>
+        </div>
+      )}
 
       <div
         className="drawing-container flex-shrink-0"
@@ -252,49 +278,52 @@ const DrawingShapes = ({
         ref={shapeDropRef}
       >
         <div className="relative controls">
+          <div className="text-center mb-2 p-2 bg-blue-200 rounded text-blue-800">
+            {currentToolName}
+          </div>
           <ul className="options flex relative w-[50px]">
             <div className="absolute md:top-[-20px] top-[-16px] flex flex-col text-[2rem] md:text-[3rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#CBCCCF] transform transition duration-300 ease-in-out">
               {isDropdownOpen ? (
                 <>
                   <li
-                    className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem]"
+                    className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem] relative tooltip"
                     id="rectangle"
                     onClick={() => {
-                      setSelectedTool("rectangle");
-                      setIsDropdownOpen(false);
+                      handleBrushSelect("rectangle", "Rectangle");
                     }}
                   >
                     <img src={rectImg} alt="Rectangle" />
+                    <span className="tooltiptext">Rectangle</span>
                   </li>
                   <li
-                    className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem]"
+                    className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem] relative tooltip"
                     id="circle"
                     onClick={() => {
-                      setSelectedTool("circle");
-                      setIsDropdownOpen(false);
+                      handleBrushSelect("circle", "Circle");
                     }}
                   >
                     <img src={circleImg} alt="Circle" />
+                    <span className="tooltiptext">Circle</span>
                   </li>
                   <li
-                    className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem]"
+                    className="hover:bg-[#B7BABF] p-[0.5rem] md:p-[0.8rem] relative tooltip"
                     id="triangle"
                     onClick={() => {
-                      setSelectedTool("triangle");
-                      setIsDropdownOpen(false);
+                      handleBrushSelect("triangle", "Triangle");
                     }}
                   >
                     <img src={triangleImg} alt="Triangle" />
+                    <span className="tooltiptext">Triangle</span>
                   </li>
                   <li
-                    className="hover:bg-[#B7BABF] px-[0.5rem] py-[0.5rem] md:py-[1rem] md:px-[0.8rem]"
+                    className="hover:bg-[#B7BABF] px-[0.5rem] py-[0.5rem] md:py-[1rem] md:px-[0.8rem] relative tooltip"
                     id="line"
                     onClick={() => {
-                      setSelectedTool("line");
-                      setIsDropdownOpen(false);
+                      handleBrushSelect("line", "Line");
                     }}
                   >
                     <img src={lineImg} alt="Line" />
+                    <span className="tooltiptext">Line</span>
                   </li>
                 </>
               ) : (
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 017fb37..2dcf563 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,50 +1,37 @@
 import React from "react";
 import {
-  AiOutlineInfoCircle,
-  AiOutlineMessage,
-  AiOutlineTeam,
-} from "react-icons/ai";
-import {
-  FaNewspaper,
   FaLinkedin,
   FaTwitter,
+  FaGithub,
+  FaNewspaper,
   FaInstagram,
   FaYoutube,
-  FaGithub,
 } from "react-icons/fa";
+import {
+  AiOutlineInfoCircle,
+  AiOutlineMessage,
+  AiOutlineTeam,
+} from "react-icons/ai";
 
 const Footer = () => {
   return (
-    <footer className="relative bg-black gap-52 md:gap-0">
-      <div className="flex flex-col items-center gap-20 px-8 py-4 justify-evenly md:justify-between md:flex-row ">
-        <div className="footerNav ">
+    <footer className="relative bg-black">
+      <div className="flex flex-col items-center gap-20 px-8 py-4 justify-evenly md:justify-between md:flex-row">
+        <div className="footerNav">
           <ul className="flex flex-wrap gap-4 justify-evenly md:justify-between">
             {[
-              { label: "News", icon: FaNewspaper, content: "News Content" },
-              {
-                label: "About Us",
-                icon: AiOutlineInfoCircle,
-                content: "About Us Content",
-              },
-              {
-                label: "Contact Us",
-                icon: AiOutlineMessage,
-                content: "Contact Us Content",
-                link:'/contact'
-              },
-              {
-                label: "Our Team",
-                icon: AiOutlineTeam,
-                content: "Our Team Content",
-                link:'/team'
-              },
+              { label: "Home", href: "#" },
+              { label: "News", href: "#", icon: FaNewspaper },
+              { label: "About Us", href: "#", icon: AiOutlineInfoCircle },
+              { label: "Contact Us", href: "/contact", icon: AiOutlineMessage },
+              { label: "Our Team", href: "/team", icon: AiOutlineTeam },
             ].map((item, index) => (
               <li key={index}>
                 <a
-                  href={item.link}
+                  href={item.href}
                   className="flex items-center text-white hover:text-gray-600"
                 >
-                  <item.icon className="w-6 h-6" />
+                  {item.icon && <item.icon className="w-6 h-6" />}
                   <span className="ml-2">{item.label}</span>
                 </a>
               </li>
@@ -106,7 +93,7 @@ const Footer = () => {
           >
             Master Mickey
           </a>{" "}
-          Copyright &copy;{new Date().getFullYear()}
+          &copy;{new Date().getFullYear()}
         </p>
       </div>
     </footer>
diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index acfcaef..3e9aec5 100644
--- a/src/components/Menu.jsx
+++ b/src/components/Menu.jsx
@@ -3,24 +3,22 @@ import { PiPencilSimpleFill, PiPlus, PiMinus } from "react-icons/pi";
 import { FaFeatherPointed } from "react-icons/fa6";
 import { FaFilePdf } from "react-icons/fa";
 import { TbFileTypeSvg } from "react-icons/tb";
-import { useState, useEffect, useRef } from "react";
 import { IoCloudDownloadOutline } from "react-icons/io5";
-
-import { BiSolidPolygon } from "react-icons/bi";
-import { BiPolygon } from "react-icons/bi";
-import { BiArea } from "react-icons/bi";
-import { increaseHeight, decreaseHeight, changeAspect} from "../utils/canvas.js";
-
+import { BiSolidPolygon, BiPolygon, BiArea } from "react-icons/bi";
+import { useState, useEffect, useRef } from "react";
+import {
+  increaseHeight,
+  decreaseHeight,
+  changeAspect,
+} from "../utils/canvas.js";
 import {
   convertToPDF,
   convertToSVG,
   convertToJPG,
   convertToPng,
 } from "../utils/canvas.js";
-
 import DrawingShapes from "./DrawingShapes.jsx";
 
-
 function Brush(props) {
   const {
     isDropdownOpen,
@@ -48,26 +46,28 @@ function Brush(props) {
   }, []);
 
   return (
-    <div className="relative" ref={dropdownRef}>
+    <div className="relative tooltip" ref={dropdownRef}>
       <PiPencilSimpleFill
-        className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] cursor-pointer text-black bg-[#CBCCCF] hover:bg-[#B7BABF] ${isDropdownOpen ? "bg-gray-400" : ""
-          } ${isVisible ? "bg-gray-400" : ""}`}
+        className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] cursor-pointer text-black bg-[#CBCCCF] hover:bg-[#007bff] hover:text-white ${
+          isDropdownOpen ? "bg-gray-400" : ""
+        } ${isVisible ? "bg-gray-400" : ""}`}
         onClick={() => {
           toggleDropdown();
           toggleVisible();
           setSelectedTool("brush");
         }}
-        title="Draw"
       />
+      <span className="tooltiptext">Pen</span>
       <div
-        className={`absolute top-full bg-[#CBCCCF] mx-auto rounded-[0.5rem] left-1/2 transform -translate-x-1/2 ${isDropdownOpen ? "block" : "hidden"
-          }`}
+        className={`absolute top-full bg-[#CBCCCF] mx-auto rounded-[0.5rem] left-1/2 transform -translate-x-1/2 ${
+          isDropdownOpen ? "block" : "hidden"
+        }`}
       >
-        {/* Dropdown content */}
         <div className={`py-2 bg-[#CBCCCF] text-black`}>
           <button
-            className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${brushStyle === "solid" ? "font-bold" : ""
-              }`}
+            className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${
+              brushStyle === "solid" ? "font-bold" : ""
+            }`}
             onClick={() => {
               setBrushStyle("solid");
               setIsDropdownOpen(!isDropdownOpen);
@@ -76,8 +76,9 @@ function Brush(props) {
             Solid
           </button>
           <button
-            className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${brushStyle === "dotted" ? "font-bold" : ""
-              }`}
+            className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${
+              brushStyle === "dotted" ? "font-bold" : ""
+            }`}
             onClick={() => {
               setBrushStyle("dotted");
               setIsDropdownOpen(!isDropdownOpen);
@@ -86,8 +87,9 @@ function Brush(props) {
             Dotted
           </button>
           <button
-            className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${brushStyle === "dashed" ? "font-bold" : ""
-              }`}
+            className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${
+              brushStyle === "dashed" ? "font-bold" : ""
+            }`}
             onClick={() => {
               setBrushStyle("dashed");
               setIsDropdownOpen(!isDropdownOpen);
@@ -96,8 +98,9 @@ function Brush(props) {
             Dashed
           </button>
           <button
-            className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${brushStyle === "faded" ? "font-bold" : ""
-              }`}
+            className={`block px-4 py-2 text-left hover:bg-gray-200 w-full ${
+              brushStyle === "faded" ? "font-bold" : ""
+            }`}
             onClick={() => {
               setBrushStyle("faded");
               setIsDropdownOpen(!isDropdownOpen);
@@ -127,8 +130,7 @@ const Menu = ({
   const [isOpen, setIsOpen] = useState(false);
   const [fillColor, setFillColor] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
-
-  const [bgColor, setBgColor] = useState('bg-slate-950');
+  const [bgColor, setBgColor] = useState("bg-slate-950");
   const [isAspectDropOpen, setAspectDropOpen] = useState(false);
 
   const toggleDropdown = () => {
@@ -138,7 +140,7 @@ const Menu = ({
   };
 
   const toggleAspectDrop = () => {
-    setAspectDropOpen(!isAspectDropOpen); 
+    setAspectDropOpen(!isAspectDropOpen);
   };
 
   const toggleVisible = () => {
@@ -148,7 +150,7 @@ const Menu = ({
   const toggleSaveAs = () => {
     setIsOpen(!isOpen);
   };
-  
+
   const handleBrushStyleChange = (style) => {
     setBrushStyle(style);
     setIsDropdownOpen(false); // Close the dropdown after selecting a style
@@ -157,7 +159,10 @@ const Menu = ({
   const aspectDropRef = useRef(null);
 
   const handleOutClick = (event) => {
-    if (aspectDropRef.current && !aspectDropRef.current.contains(event.target)) {
+    if (
+      aspectDropRef.current &&
+      !aspectDropRef.current.contains(event.target)
+    ) {
       setAspectDropOpen(false);
     }
   };
@@ -170,8 +175,14 @@ const Menu = ({
   // }, [isAspectDropOpen]);
 
   return (
-    <>
-      <div id="toolbar" className="md:scale-[0.7] lg:scale-[0.8] scale-[0.8] max-w-[100%] bg-[#CBCCCF] shadow-mdm dark:bg-[#111111] flex flex-row justify-center md:justify-start lg:justify-center items-center gap-[1rem] px-[1rem] pt-2 pb-2 rounded-[0.6rem] flex-wrap">
+    <div
+      id="toolbar"
+      className="scale-[0.8] max-w-[100%] bg-[#CBCCCF] shadow-mdm dark:bg-[#111111] flex flex-row justify-center items-center gap-[1rem] px-[1rem] pt-2 pb-2 rounded-[0.6rem] flex-wrap"
+    >
+      <div
+        id="toolbar"
+        className="md:scale-[0.7] lg:scale-[0.8] scale-[0.8] max-w-[100%] bg-[#CBCCCF] shadow-mdm dark:bg-[#111111] flex flex-row justify-center md:justify-start lg:justify-center items-center gap-[1rem] px-[1rem] pt-2 pb-2 rounded-[0.6rem] flex-wrap"
+      >
         <Brush
           isDropdownOpen={isDropdownOpen}
           toggleDropdown={toggleDropdown}
@@ -192,31 +203,36 @@ const Menu = ({
         />
 
         {/* Shape fill mode */}
-        <button
-          className="flex flex-col items-center"
-          onClick={() => setFillColor(!fillColor)}
-        >
-          {fillColor ? (
-            <BiSolidPolygon
-              className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#CBCCCF] hover:bg-[#B7BABF] transform transition duration-300 ease-in-out`}
-            />
-          ) : (
-            <BiPolygon
-              className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#CBCCCF] hover:bg-[#B7BABF] transform transition duration-300 ease-in-out`}
-            />
-          )}
-        </button>
+        <div className="tooltip hover-effect">
+          <button
+            className="flex flex-col items-center"
+            onClick={() => setFillColor(!fillColor)}
+          >
+            {fillColor ? (
+              <BiSolidPolygon
+                className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#CBCCCF] hover:bg-[#007bff] hover:text-white transform transition duration-300 ease-in-out`}
+              />
+            ) : (
+              <BiPolygon
+                className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#CBCCCF] hover:bg-[#007bff] hover:text-white transform transition duration-300 ease-in-out`}
+              />
+            )}
+          </button>
+          <span className="tooltiptext">Fill Mode</span>
+        </div>
 
-        <div className="flex flex-col relative">
+        <div className="relative tooltip hover-effect">
           <button className="relative">
             <FaFeatherPointed
-              className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm mx-auto rounded-[0.5rem] text-black bg-[#CBCCCF] cursor-pointer hover:bg-[#B7BABF] transform transition duration-300 ease-in-out ${isVisible ? "block" : "hidden"
-                } ${pencilWidth ? "bg-gray-200" : ""}`}
+              className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm mx-auto rounded-[0.5rem] text-black bg-[#CBCCCF] cursor-pointer hover:bg-[#007bff] hover:text-white transform transition duration-300 ease-in-out ${
+                isVisible ? "block" : "hidden"
+              } ${pencilWidth ? "bg-gray-200" : ""}`}
               onClick={() => {
                 setPencilWidth(!pencilWidth);
                 setSelectedTool("brush");
               }}
             />
+            <span className="tooltiptext">Pencil Width</span>
           </button>
           {pencilWidth && (
             <input
@@ -229,31 +245,32 @@ const Menu = ({
               onChange={(e) => {
                 setThickness(e.target.value);
               }}
-              className={`cursor-pointer absolute bottom-[-40px] ${isVisible ? "block" : "hidden"
-                }`}
+              className={`cursor-pointer absolute bottom-[-40px] ${
+                isVisible ? "block" : "hidden"
+              }`}
             />
           )}
         </div>
-        <div className="py-[1rem] px-[1.5rem] rounded-[0.5rem] w-12 h-12 relative shadow-vsm hover:bg-[#B7BABF] text-black cursor-pointer">
-          <input
-            type="color"
-            name="color"
-            id="color"
-            title="Color Picker"
-            onChange={(e) => setColor(e.target.value)}
-            className={`bg-[#CBCCCF] p-[0.5rem] shadow-vsm rounded-[0.5rem] cursor-pointer outline-none hover:bg-[#B7BABF] flex-[0.5] w-full h-full z-[5] absolute top-0 left-0 transform transition duration-300 ease-in-out`}
-          />
-          <span className="absolute top-14 left-[0.3rem] dark:text-[#ffffff]">
-            {/* Color */}
-          </span>
+
+        <div className="relative tooltip hover-effect">
+          <div className="py-[1rem] px-[1.5rem] rounded-[0.5rem] w-12 h-12 relative shadow-vsm hover:bg-[#007bff] hover:text-white text-black cursor-pointer">
+            <input
+              type="color"
+              name="color"
+              id="color"
+              onChange={(e) => setColor(e.target.value)}
+              className={`bg-[#CBCCCF] p-[0.5rem] shadow-vsm rounded-[0.5rem] cursor-pointer outline-none hover:bg-[#007bff] flex-[0.5] w-full h-full z-[5] absolute top-0 left-0 transform transition duration-300 ease-in-out`}
+            />
+            <span className="tooltiptext">Color Picker</span>
+          </div>
         </div>
-        <div className="relative">
+
+        <div className="relative tooltip hover-effect">
           <button
             className="text-gray-700 bg-[#B7BABF] focus:ring-4 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center transform transition duration-300 ease-in-out"
             type="button"
             onClick={toggleSaveAs}
           >
-            {/* Save As */}
             <IoCloudDownloadOutline />
             <svg
               className={`w-2.5 h-2.5 ms-3 ${isOpen ? "rotate-180" : ""}`}
@@ -271,10 +288,11 @@ const Menu = ({
               />
             </svg>
           </button>
-
+          <span className="tooltiptext">Save As</span>
           <div
-            className={`absolute z-10 ${isOpen ? "" : "hidden"
-              } divide-y bg-[#CBCCCF] rounded-lg shadow w-59 top-[3.1rem] `}
+            className={`absolute z-10 ${
+              isOpen ? "" : "hidden"
+            } divide-y bg-[#CBCCCF] rounded-lg shadow w-59 top-[3.1rem] `}
           >
             <ul
               className="text-sm text-gray-700 flex space-y-5 md:space-x-5 p-5 justify-center items-center flex flex-col md:flex-row"
@@ -282,7 +300,7 @@ const Menu = ({
             >
               <li>
                 <button
-                  className={`text-[1rem] md:text-[1rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] md:mt-4 cursor-pointer hover:bg-[#B7BABF]`}
+                  className={`text-[1rem] md:text-[1rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#007bff] hover:text-white`}
                   onClick={() => convertToPng(canvasRef.current)}
                   title="toPNG"
                 >
@@ -292,7 +310,7 @@ const Menu = ({
 
               <li>
                 <button
-                  className={`text-[1rem] md:text-[1rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF]`}
+                  className={`text-[1rem] md:text-[1rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#007bff] hover:text-white`}
                   onClick={() => convertToJPG(canvasRef.current)}
                   title="ToJPG"
                 >
@@ -301,14 +319,14 @@ const Menu = ({
               </li>
               <li>
                 <FaFilePdf
-                  className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF]`}
+                  className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#007bff] hover:text-white`}
                   onClick={() => convertToPDF(canvasRef.current)}
                   title="PDF"
                 />
               </li>
               <li>
                 <TbFileTypeSvg
-                  className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#B7BABF]  `}
+                  className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-mdm rounded-[0.5rem] cursor-pointer hover:bg-[#007bff] hover:text-white`}
                   onClick={() => convertToSVG(canvasRef.current)}
                   title="SVG"
                 />
@@ -316,71 +334,133 @@ const Menu = ({
             </ul>
           </div>
         </div>
-        <button>
-          <PiPlus
-            className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#c5c5c9] hover:bg-[#B7BABF]  transform transition duration-300 ease-in-out `}
-            onClick={() =>
-              increaseHeight(
-                canvasRef.current,
-                setBgColor,
-                thickness,
-                color,
-                brushStyle
-              )
-            }
-            title="IncreaseHeight"
-          />
-        </button>
-        <button>
-          <PiMinus
-            className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#c5c5c9] hover:bg-[#B7BABF]  transform transition duration-300 ease-in-out `}
-            onClick={() =>
-              decreaseHeight(
-                canvasRef.current,
-                bgColor,
-                thickness,
-                color,
-                brushStyle
-              )
-            }
-            title="DecreaseHeight"
-          />
-        </button>
-        <div className="relative inline-">
-        <button onClick={toggleAspectDrop} ref={aspectDropRef}>
-        <BiArea
-          className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#CBCCCF] hover:bg-[#B7BABF] transform transition duration-300 ease-in-out`}
-          title="Canvas Size"
-        />
-      </button>
-      <div className={`absolute left-0 w-auto bg-[#CBCCCF] rounded-[0.5rem] mt-2 ${isAspectDropOpen ? "block" : "hidden"}`}>
-        <div className={`py-2 bg-[#CBCCCF] w-auto`}>
-          <button className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
-            onClick={() => { toggleAspectDrop(); changeAspect(canvasRef.current, bgColor, thickness, color, brushStyle, 50, 80)}}>
-            16:9
-          </button>
 
-          <button className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
-            onClick={() => { toggleAspectDrop(); changeAspect(canvasRef.current, bgColor, thickness, color, brushStyle, 70, 50)}}>
-            9:16         
+        <div className="relative tooltip hover-effect">
+          <button>
+            <PiPlus
+              className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#c5c5c9] hover:bg-[#007bff] hover:text-white transform transition duration-300 ease-in-out `}
+              onClick={() =>
+                increaseHeight(
+                  canvasRef.current,
+                  setBgColor,
+                  thickness,
+                  color,
+                  brushStyle
+                )
+              }
+              title="IncreaseHeight"
+            />
           </button>
-          <button className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
-            onClick={() => { toggleAspectDrop(); changeAspect(canvasRef.current, bgColor, thickness, color, brushStyle, 50, 60)}}>
-            1:1
+          <span className="tooltiptext">Increase Height</span>
+        </div>
+
+        <div className="relative tooltip hover-effect">
+          <button>
+            <PiMinus
+              className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#c5c5c9] hover:bg-[#007bff] hover:text-white transform transition duration-300 ease-in-out `}
+              onClick={() =>
+                decreaseHeight(
+                  canvasRef.current,
+                  bgColor,
+                  thickness,
+                  color,
+                  brushStyle
+                )
+              }
+              title="DecreaseHeight"
+            />
           </button>
-          <button className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
-            onClick={() => { toggleAspectDrop(); changeAspect(canvasRef.current, bgColor, thickness, color, brushStyle, 100, 100)}}>
-            Default
+          <span className="tooltiptext">Decrease Height</span>
+        </div>
+
+        <div className="relative tooltip hover-effect">
+          <button onClick={toggleAspectDrop} ref={aspectDropRef}>
+            <BiArea
+              className={`text-[2rem] md:text-[3rem] p-[0.5rem] md:p-[0.8rem] shadow-vsm rounded-[0.5rem] text-black cursor-pointer bg-[#CBCCCF] hover:bg-[#007bff] hover:text-white transform transition duration-300 ease-in-out`}
+              title="Canvas Size"
+            />
           </button>
-          {/* <button className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
-            onClick={() => { toggleAspectDrop(); changeAspect(canvasRef.current, bgColor, thickness, color, brushStyle, x, y)}}>
-            Add more options for aspect ratio 
-          </button> */}
+          <span className="tooltiptext">Canvas Size</span>
+          <div
+            className={`absolute left-0 w-auto bg-[#CBCCCF] rounded-[0.5rem] mt-2 ${
+              isAspectDropOpen ? "block" : "hidden"
+            }`}
+          >
+            <div className={`py-2 bg-[#CBCCCF] w-auto`}>
+              <button
+                className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
+                onClick={() => {
+                  toggleAspectDrop();
+                  changeAspect(
+                    canvasRef.current,
+                    bgColor,
+                    thickness,
+                    color,
+                    brushStyle,
+                    50,
+                    80
+                  );
+                }}
+              >
+                16:9
+              </button>
+              <button
+                className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
+                onClick={() => {
+                  toggleAspectDrop();
+                  changeAspect(
+                    canvasRef.current,
+                    bgColor,
+                    thickness,
+                    color,
+                    brushStyle,
+                    70,
+                    50
+                  );
+                }}
+              >
+                9:16
+              </button>
+              <button
+                className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
+                onClick={() => {
+                  toggleAspectDrop();
+                  changeAspect(
+                    canvasRef.current,
+                    bgColor,
+                    thickness,
+                    color,
+                    brushStyle,
+                    50,
+                    60
+                  );
+                }}
+              >
+                1:1
+              </button>
+              <button
+                className={`block px-4 py-2 text-left hover:bg-gray-200 w-full dark:text-black dark:hover:bg-##3a3838`}
+                onClick={() => {
+                  toggleAspectDrop();
+                  changeAspect(
+                    canvasRef.current,
+                    bgColor,
+                    thickness,
+                    color,
+                    brushStyle,
+                    100,
+                    100
+                  );
+                }}
+              >
+                Default
+              </button>
+            </div>
+          </div>
         </div>
       </div>
-      </div>
-      </div>
-    </>
+    </div>
   );
 };
+
 export default Menu;
diff --git a/src/index.css b/src/index.css
index 7a05623..3f7c98b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,6 +9,34 @@
   padding: 0;
 }
 
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%; /* Position the tooltip above the text */
+  left: 50%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
+
 body{
   height: 100%;
   width: 100%;