diff --git a/client/src/components/layout/Canvas/components/Tooltip.jsx b/client/src/components/layout/Canvas/components/Tooltip.jsx
new file mode 100644
index 0000000..e073082
--- /dev/null
+++ b/client/src/components/layout/Canvas/components/Tooltip.jsx
@@ -0,0 +1,45 @@
+import { useState, useRef } from "react";
+import { chakra, useSlotRecipe } from "@chakra-ui/react";
+
+
+export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children}) {
+  const [isVisible, setIsVisible] = useState(!sidebarIsOpen);
+  const recipe = useSlotRecipe({ key: "sidebar" });
+  const styles = recipe();
+  const timeoutId = useRef(null);
+
+  return (
+    <chakra.div
+      width={sidebarIsOpen ? "194px" : "55px"}
+      transition="width 0.4s ease"
+      onMouseEnter={() => { timeoutId.current = setTimeout(() => setIsVisible(true), 1000); }}
+      onMouseLeave={() => {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+          timeoutId.current = null;
+        }
+        setIsVisible(false);
+      }} 
+    >
+      {children}
+      {isVisible && !sidebarIsOpen && (
+        <>
+          <chakra.div 
+            fontSize="xs"
+            position="absolute"
+            bg="gray.700"
+            color="white"
+            left="65px"
+            px={2}
+            py={1}
+            borderRadius="md"
+            whiteSpace="nowrap"
+            zIndex={10}
+          >
+            {content}
+          </chakra.div>
+        </>
+      )}
+    </chakra.div>
+  )
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/components/Widget.jsx b/client/src/components/layout/Canvas/components/Widget.jsx
index 0f6e9ea..314924f 100644
--- a/client/src/components/layout/Canvas/components/Widget.jsx
+++ b/client/src/components/layout/Canvas/components/Widget.jsx
@@ -12,13 +12,13 @@ export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }
         {isDelete ? (
           <>
             <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
-              <Text className="widget-handle" w="100%">{title}</Text>
+              <Text className="widget-handle" w="100%" fontWeight="bold">{title}</Text>
               <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
             </Flex>
           </>
         ):(
           <>
-            <Text className="widget-handle" >{title}</Text>
+            <Text className="widget-handle" fontWeight="bold">{title}</Text>
           </>
         )}
       </chakra.div>
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
index 25effed..4b7bf4c 100644
--- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
@@ -106,7 +106,7 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
         zIndex="dropdown" // zIndex: 1100
 				bg="base200"
 				px={6}
-				py={3}
+				pt={3}
 				align="center"
 				justify="space-between"
       >
@@ -114,10 +114,10 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
           <Tabs.Trigger value="widget">
             My Dashboard
           </Tabs.Trigger>
-          <Tabs.Trigger value="gas">
+          <Tabs.Trigger value="gas" >
             Gas
           </Tabs.Trigger>
-          <Tabs.Trigger value="seismic">
+          <Tabs.Trigger value="seismic" >
             Seismic
           </Tabs.Trigger>
           <Tabs.Trigger value="remote">
diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx
index f527395..7cff5a5 100644
--- a/client/src/components/layout/Sidebar/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar/Sidebar.jsx
@@ -1,6 +1,7 @@
 import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
 import { ColorModeButton } from "@/components/ui/color-mode";
-import { Tooltip } from "@/components/ui/tooltip";
+// import { Tooltip } from "@/components/ui/tooltip";
+import Tooltip from "../Canvas/components/Tooltip.jsx";
 import { FaVolcano } from "react-icons/fa6";
 import { FaHome } from "react-icons/fa";
 import { FaGlobeAmericas } from "react-icons/fa";
@@ -14,6 +15,8 @@ import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 export default function Sidebar({ view, onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
   const [activeButton, setActiveButton] = useState(0)
+  const recipe = useSlotRecipe({ key: "sidebar" });
+  const styles = recipe();
 
     // this list of btns will come from the db (not every usr will have access to admin)
   const buttons = [
@@ -23,9 +26,6 @@ export default function Sidebar({ view, onChangeView }) {
     {icon: FaVolcano, name: "Volcano", view: "volcano"},
     {icon: HiUsers, name: "Admin", view: "admin"}
   ];
-  
-  const recipe = useSlotRecipe({ key: "sidebar" });
-  const styles = recipe();
 
   const toggleSidebar = () => {
     if (isOpen) setIsOpen(false);
@@ -55,6 +55,7 @@ export default function Sidebar({ view, onChangeView }) {
       css={styles.root}
       width={isOpen ? "210px" : "71px"}
       transition="width 0.4s ease"
+      position="relative"
     >
       <IconButton
         aria-label="Toggle Sidebar"
@@ -68,20 +69,22 @@ export default function Sidebar({ view, onChangeView }) {
 
       {buttons.map((button, idx) => {
         const Icon = button.icon;
-        const buttonElement = (
-          <Button 
-                  key={idx} 
-                  css={styles.buttons} 
-                  onClick={() => {
-                    setActiveButton(idx);
-                    onChangeView(button.view); // Trigger state change in Dashboard
-                  }} 
-                  bg={activeButton === idx ? "primary":undefined} 
-                  color={activeButton === idx ? "#FFFFFF":undefined} 
-                  justifyContent="flex-start"
-          >           
-            <Icon />
-              <span style={{
+        return (
+          <Tooltip tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
+            <Button 
+              key={idx} 
+              css={styles.buttons} 
+              onClick={() => {
+                setActiveButton(idx);
+                onChangeView(button.view); // Trigger state change in Dashboard
+              }} 
+              bg={activeButton === idx ? "primary":undefined} 
+              color={activeButton === idx ? "#FFFFFF":undefined} 
+              justifyContent="flex-start"
+            >           
+              <Icon />
+              <span
+                style={{
                 opacity: isOpen ? 1 : 0,
                 transition: "opacity 0.4s ease",
                 overflow: "hidden",
@@ -92,16 +95,9 @@ export default function Sidebar({ view, onChangeView }) {
               >
                 {button.name}
               </span>
-          </Button>
-        );
-        console.log("Returning:", !isOpen ? "Tooltip" : "Button", buttonElement);
-        return !isOpen ? (
-          <Tooltip key={ idx } content={ button.name } placement="right" hasArrow>
-            { buttonElement }
+            </Button>
           </Tooltip>
-        ) : (
-          buttonElement 
-        );
+        )
       })}
       <ColorModeButton position="absolute" bottom="2"/>
     </Box>