diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index 9601e4d..19d8da1 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -100,8 +100,7 @@ export default function Table(props) {
                   size="small"
                   theme="solid"
                   style={{
-                    backgroundColor: "#2f68ad",
-                    opacity: "0.7",
+                    backgroundColor: "#2f68adb3",
                     marginRight: "6px",
                   }}
                   onClick={openEditor}
@@ -176,8 +175,7 @@ export default function Table(props) {
                     type="tertiary"
                     size="small"
                     style={{
-                      opacity: "0.7",
-                      backgroundColor: "grey",
+                      backgroundColor: "#808080b3",
                       color: "white",
                     }}
                   />
@@ -290,7 +288,7 @@ export default function Table(props) {
           } flex items-center gap-2 overflow-hidden`}
         >
           <button
-            className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full"
+            className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full"
             onMouseDown={() => {
               handleGripField(index);
               setLinkingLine((prev) => ({
@@ -324,8 +322,7 @@ export default function Table(props) {
               theme="solid"
               size="small"
               style={{
-                opacity: "0.7",
-                backgroundColor: "#d42020",
+                backgroundColor: "#d42020b3",
               }}
               icon={<IconMinus />}
               onClick={() => deleteField(fieldData, tableData.id)}
diff --git a/src/components/SimpleCanvas.jsx b/src/components/SimpleCanvas.jsx
index 5adfa44..28b3870 100644
--- a/src/components/SimpleCanvas.jsx
+++ b/src/components/SimpleCanvas.jsx
@@ -51,7 +51,7 @@ function Table({ table, grab }) {
           >
             <div className={hoveredField === i ? "text-zinc-500" : ""}>
               <button
-                className={`w-[9px] h-[9px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
+                className={`w-[9px] h-[9px] bg-[#2f68adcc] rounded-full me-2`}
               />
               {e.name}
             </div>
diff --git a/src/components/Thumbnail.jsx b/src/components/Thumbnail.jsx
index b5093d5..bcee00f 100644
--- a/src/components/Thumbnail.jsx
+++ b/src/components/Thumbnail.jsx
@@ -116,7 +116,7 @@ export default function Thumbnail({ diagram, i, zoom, theme }) {
                     >
                       <div className="flex items-center justify-start">
                         <div
-                          className={`w-[6px] h-[6px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
+                          className={`w-[6px] h-[6px] bg-[#2f68adcc] rounded-full me-2`}
                         ></div>
                         <div>{f.name}</div>
                       </div>