diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index bf0cdff..e1e18d2 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -40,7 +40,6 @@ import useSelect from "../../hooks/useSelect";
 import useTypes from "../../hooks/useTypes";
 
 export default function Table(props) {
-  const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
   const [editField, setEditField] = useState({});
   const { layout } = useLayout();
@@ -61,23 +60,20 @@ export default function Table(props) {
         y={props.tableData.y}
         width={200}
         height={height}
-        className="drop-shadow-lg rounded-md cursor-move"
+        className="group drop-shadow-lg rounded-md cursor-move"
         onMouseDown={props.onMouseDown}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
       >
         <div
-          className={`border-2 ${
-            isHovered
-              ? "border-dashed border-blue-500"
-              : selectedElement.element === ObjectType.TABLE &&
-                selectedElement.id === props.tableData.id
-              ? "border-blue-500"
-              : "border-slate-400"
-          } select-none rounded-lg w-full ${
-            settings.mode === "light"
-              ? "bg-zinc-100 text-zinc-800"
-              : "bg-zinc-800 text-zinc-200"
+          className={`border-2 hover:border-dashed hover:border-blue-500
+               select-none rounded-lg w-full ${
+                 settings.mode === "light"
+                   ? "bg-zinc-100 text-zinc-800"
+                   : "bg-zinc-800 text-zinc-200"
+               } ${
+            selectedElement.id === props.tableData.id &&
+            selectedElement.element === ObjectType.TABLE
+              ? "border-solid border-blue-500"
+              : "border-zinc-500"
           }`}
         >
           <div
@@ -92,117 +88,115 @@ export default function Table(props) {
             <div className="px-3 overflow-hidden text-ellipsis whitespace-nowrap">
               {props.tableData.name}
             </div>
-            {isHovered && (
-              <div className="flex justify-end items-center mx-2">
+            <div className="invisible group-hover:visible flex justify-end items-center mx-2">
+              <Button
+                icon={<IconEdit />}
+                size="small"
+                theme="solid"
+                style={{
+                  backgroundColor: "#2f68ad",
+                  opacity: "0.7",
+                  marginRight: "6px",
+                }}
+                onClick={() => {
+                  if (!layout.sidebar) {
+                    setSelectedElement((prev) => ({
+                      ...prev,
+                      element: ObjectType.TABLE,
+                      id: props.tableData.id,
+                      open: true,
+                    }));
+                  } else {
+                    setSelectedElement((prev) => ({
+                      ...prev,
+                      currentTab: Tab.TABLES,
+                      element: ObjectType.TABLE,
+                      id: props.tableData.id,
+                      open: true,
+                    }));
+                    if (selectedElement.currentTab !== Tab.TABLES) return;
+                    document
+                      .getElementById(`scroll_table_${props.tableData.id}`)
+                      .scrollIntoView({ behavior: "smooth" });
+                  }
+                }}
+              />
+              <Popover
+                content={
+                  <div className="popover-theme">
+                    <div className="mb-2">
+                      <strong>Comment :</strong>{" "}
+                      {props.tableData.comment === "" ? (
+                        "No comment"
+                      ) : (
+                        <div>{props.tableData.comment}</div>
+                      )}
+                    </div>
+                    <div>
+                      <strong
+                        className={`${
+                          props.tableData.indices.length === 0 ? "" : "block"
+                        }`}
+                      >
+                        Indices :
+                      </strong>{" "}
+                      {props.tableData.indices.length === 0 ? (
+                        "No indices"
+                      ) : (
+                        <div>
+                          {props.tableData.indices.map((index, k) => (
+                            <div
+                              key={k}
+                              className={`flex items-center my-1 px-2 py-1 rounded ${
+                                settings.mode === "light"
+                                  ? "bg-gray-100"
+                                  : "bg-zinc-800"
+                              }`}
+                            >
+                              <i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
+                              <div>
+                                {index.fields.map((f) => (
+                                  <Tag color="blue" key={f} className="me-1">
+                                    {f}
+                                  </Tag>
+                                ))}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                    <Button
+                      icon={<IconDeleteStroked />}
+                      type="danger"
+                      block
+                      style={{ marginTop: "8px" }}
+                      onClick={() => {
+                        Toast.success(`Table deleted!`);
+                        deleteTable(props.tableData.id);
+                      }}
+                    >
+                      Delete table
+                    </Button>
+                  </div>
+                }
+                position="rightTop"
+                showArrow
+                trigger="click"
+                style={{ width: "200px" }}
+              >
                 <Button
-                  icon={<IconEdit />}
+                  icon={<IconMore />}
+                  type="tertiary"
                   size="small"
-                  theme="solid"
                   style={{
-                    backgroundColor: "#2f68ad",
                     opacity: "0.7",
-                    marginRight: "6px",
-                  }}
-                  onClick={() => {
-                    if (!layout.sidebar) {
-                      setSelectedElement((prev) => ({
-                        ...prev,
-                        element: ObjectType.TABLE,
-                        id: props.tableData.id,
-                        open: true,
-                      }));
-                    } else {
-                      setSelectedElement((prev) => ({
-                        ...prev,
-                        currentTab: Tab.TABLES,
-                        element: ObjectType.TABLE,
-                        id: props.tableData.id,
-                        open: true,
-                      }));
-                      if (selectedElement.currentTab !== Tab.TABLES) return;
-                      document
-                        .getElementById(`scroll_table_${props.tableData.id}`)
-                        .scrollIntoView({ behavior: "smooth" });
-                    }
+                    backgroundColor: "grey",
+                    color: "white",
                   }}
                 />
-                <Popover
-                  content={
-                    <div className="popover-theme">
-                      <div className="mb-2">
-                        <strong>Comment :</strong>{" "}
-                        {props.tableData.comment === "" ? (
-                          "No comment"
-                        ) : (
-                          <div>{props.tableData.comment}</div>
-                        )}
-                      </div>
-                      <div>
-                        <strong
-                          className={`${
-                            props.tableData.indices.length === 0 ? "" : "block"
-                          }`}
-                        >
-                          Indices :
-                        </strong>{" "}
-                        {props.tableData.indices.length === 0 ? (
-                          "No indices"
-                        ) : (
-                          <div>
-                            {props.tableData.indices.map((index, k) => (
-                              <div
-                                key={k}
-                                className={`flex items-center my-1 px-2 py-1 rounded ${
-                                  settings.mode === "light"
-                                    ? "bg-gray-100"
-                                    : "bg-zinc-800"
-                                }`}
-                              >
-                                <i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
-                                <div>
-                                  {index.fields.map((f) => (
-                                    <Tag color="blue" key={f} className="me-1">
-                                      {f}
-                                    </Tag>
-                                  ))}
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                      <Button
-                        icon={<IconDeleteStroked />}
-                        type="danger"
-                        block
-                        style={{ marginTop: "8px" }}
-                        onClick={() => {
-                          Toast.success(`Table deleted!`);
-                          deleteTable(props.tableData.id);
-                        }}
-                      >
-                        Delete table
-                      </Button>
-                    </div>
-                  }
-                  position="rightTop"
-                  showArrow
-                  trigger="click"
-                  style={{ width: "200px" }}
-                >
-                  <Button
-                    icon={<IconMore />}
-                    type="tertiary"
-                    size="small"
-                    style={{
-                      opacity: "0.7",
-                      backgroundColor: "grey",
-                      color: "white",
-                    }}
-                  />
-                </Popover>
-              </div>
-            )}
+              </Popover>
+            </div>
           </div>
           {props.tableData.fields.map((e, i) => {
             return settings.showFieldSummary ? (