diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 8051d4fd..9c59e621 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -32,7 +32,7 @@ export function Card({ linkData, isInEditMode, onClick }: CardProps) {
 
    const dragPseudo = isDragEventInProgress
       ? ""
-      : "hover:bg-white hover:bg-opacity-10 focus-visible:outline-none focus-visible:ring focus-visible:ring-[rgba(66,153,225,0.6)] active:bg-white active:bg-opacity-[.16] dark:hover:bg-[#EDF2F7] dark:active:bg-[#E2E8F0]";
+      : "hover:bg-white hover:bg-opacity-10 focus-visible:outline-none focus-visible:ring focus-visible:focus-visible:ring-chakra-focus active:bg-white active:bg-opacity-[.16] dark:hover:bg-[#EDF2F7] dark:active:bg-[#E2E8F0]";
    const dragTruncate = isDragEventInProgress
       ? ""
       : "group-hover:overflow-visible group-hover:whitespace-normal";
diff --git a/src/components/Cell.tsx b/src/components/Cell.tsx
index d186f7d1..886d6a49 100644
--- a/src/components/Cell.tsx
+++ b/src/components/Cell.tsx
@@ -143,14 +143,14 @@ export default function Cell({
             <div className="absolute left-0 top-0 z-10 flex flex-col items-center justify-center space-y-0.5">
                <button
                   aria-label="Edit this link"
-                  className="relative inline-flex h-6 min-w-[1.5rem] select-none appearance-none items-center justify-center whitespace-nowrap rounded-md bg-transparent align-middle text-xs font-semibold leading-tight outline outline-2 outline-offset-2 outline-transparent transition duration-200 hover:bg-white/10 focus-visible:outline-none focus-visible:ring focus-visible:ring-[rgba(66,153,225,0.6)] active:bg-white/20"
+                  className="relative inline-flex h-6 min-w-[1.5rem] select-none appearance-none items-center justify-center whitespace-nowrap rounded-md bg-transparent align-middle text-xs font-semibold leading-tight outline outline-2 outline-offset-2 outline-transparent transition duration-200 hover:bg-white/10 focus-visible:outline-none focus-visible:ring focus-visible:ring-chakra-focus active:bg-white/20"
                   onClick={() => openUpdateLinkModal(index)}
                >
                   <Edit2 size={16} />
                </button>
                <button
                   aria-label="Delete this link"
-                  className="relative inline-flex h-6 min-w-[1.5rem] select-none appearance-none items-center justify-center whitespace-nowrap rounded-md bg-transparent align-middle text-xs font-semibold leading-tight text-red-300 outline outline-2 outline-offset-2 outline-transparent transition duration-200 hover:bg-red-300/10 focus-visible:outline-none focus-visible:ring focus-visible:ring-[rgba(66,153,225,0.6)] active:bg-red-300/20"
+                  className="relative inline-flex h-6 min-w-[1.5rem] select-none appearance-none items-center justify-center whitespace-nowrap rounded-md bg-transparent align-middle text-xs font-semibold leading-tight text-red-300 outline outline-2 outline-offset-2 outline-transparent transition duration-200 hover:bg-red-300/10 focus-visible:outline-none focus-visible:ring focus-visible:ring-chakra-focus active:bg-red-300/20"
                   onClick={deleteChildCard}
                >
                   <X size={20} />
diff --git a/tailwind.config.js b/tailwind.config.js
index 0b2caa83..a04bcb66 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,11 @@
 module.exports = {
    content: ["./src/**/*{.html,.ts,.tsx}"],
    theme: {
-      extend: {},
+      extend: {
+         ringColor: {
+            "chakra-focus": "rgba(66,153,225,0.6)",
+         },
+      },
    },
    plugins: [],
 };