diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
index 090d64b..b949475 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -1,34 +1,30 @@
-import React from "react";
+import React, { useState } from "react";
 
 type Props = {
   text: string;
 };
 
-const CopyButton = ({ text }: Props) => {
+const CopyButton: React.FC<Props> = ({ text }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return (
     <div
-      className="bi-copy text-xl text-neutral btn btn-sm btn-square btn-ghost"
-      onClick={() => {
-        try {
-          navigator.clipboard.writeText(text).then(() => {
-            const copyIcon = document.querySelector(".bi-copy");
-            if (copyIcon) {
-              copyIcon.classList.remove("bi-copy");
-              copyIcon.classList.add("bi-check2");
-              copyIcon.classList.add("text-success");
-            }
-            setTimeout(() => {
-              if (copyIcon) {
-                copyIcon.classList.remove("bi-check2");
-                copyIcon.classList.remove("text-success");
-                copyIcon.classList.add("bi-copy");
-              }
-            }, 1000);
-          });
-        } catch (err) {
-          console.log(err);
-        }
-      }}
+      className={`text-xl text-neutral btn btn-sm btn-square btn-ghost ${
+        copied ? "bi-check2 text-success" : "bi-copy"
+      }`}
+      onClick={handleCopy}
     ></div>
   );
 };
diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx
index 0aecf70..fab7ffb 100644
--- a/components/LinkViews/LinkComponents/LinkActions.tsx
+++ b/components/LinkViews/LinkComponents/LinkActions.tsx
@@ -17,11 +17,10 @@ import usePinLink from "@/lib/client/pinLink";
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
-  className?: string;
   btnStyle?: string;
 };
 
-export default function LinkActions({ link, className, btnStyle }: Props) {
+export default function LinkActions({ link, btnStyle }: Props) {
   const { t } = useTranslation();
 
   const permissions = usePermissions(link.collection.id as number);
@@ -60,9 +59,7 @@ export default function LinkActions({ link, className, btnStyle }: Props) {
     <>
       {isPublicRoute ? (
         <div
-          className={clsx(className || "top-3 right-3 absolute z-20")}
-          tabIndex={0}
-          role="button"
+          className="absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
           onMouseDown={dropdownTriggerer}
           onClick={() => setLinkModal(true)}
         >
@@ -72,9 +69,7 @@ export default function LinkActions({ link, className, btnStyle }: Props) {
         </div>
       ) : (
         <div
-          className={`dropdown dropdown-end absolute ${
-            className || "top-3 right-3"
-          } z-20`}
+          className={`dropdown dropdown-end absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100 z-20`}
         >
           <div
             tabIndex={0}
diff --git a/components/LinkViews/LinkComponents/LinkCard.tsx b/components/LinkViews/LinkComponents/LinkCard.tsx
index afb9552..abee366 100644
--- a/components/LinkViews/LinkComponents/LinkCard.tsx
+++ b/components/LinkViews/LinkComponents/LinkCard.tsx
@@ -232,17 +232,8 @@ export default function LinkCard({ link, columns, editMode }: Props) {
 
       {/* Overlay on hover */}
       <div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
-      <LinkActions
-        link={link}
-        collection={collection}
-        className={
-          "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-        }
-      />
-      <LinkPin
-        link={link}
-        className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-      />
+      <LinkActions link={link} collection={collection} />
+      <LinkPin link={link} />
     </div>
   );
 }
diff --git a/components/LinkViews/LinkComponents/LinkList.tsx b/components/LinkViews/LinkComponents/LinkList.tsx
index 3ba5156..b43c595 100644
--- a/components/LinkViews/LinkComponents/LinkList.tsx
+++ b/components/LinkViews/LinkComponents/LinkList.tsx
@@ -135,19 +135,8 @@ export default function LinkCardCompact({ link, editMode }: Props) {
             </div>
           </div>
         </div>
-        <LinkPin
-          link={link}
-          className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-          btnStyle="btn-ghost"
-        />
-        <LinkActions
-          link={link}
-          collection={collection}
-          className={
-            "absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-          }
-          btnStyle="btn-ghost"
-        />
+        <LinkPin link={link} btnStyle="btn-ghost" />
+        <LinkActions link={link} collection={collection} btnStyle="btn-ghost" />
       </div>
       <div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>
     </>
diff --git a/components/LinkViews/LinkComponents/LinkMasonry.tsx b/components/LinkViews/LinkComponents/LinkMasonry.tsx
index 196db11..529e46e 100644
--- a/components/LinkViews/LinkComponents/LinkMasonry.tsx
+++ b/components/LinkViews/LinkComponents/LinkMasonry.tsx
@@ -240,17 +240,8 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
 
       {/* Overlay on hover */}
       <div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
-      <LinkActions
-        link={link}
-        collection={collection}
-        className={
-          "top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-        }
-      />
-      <LinkPin
-        link={link}
-        className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-      />
+      <LinkActions link={link} collection={collection} />
+      <LinkPin link={link} />
     </div>
   );
 }
diff --git a/components/LinkViews/LinkComponents/LinkPin.tsx b/components/LinkViews/LinkComponents/LinkPin.tsx
index 9156333..fdb8f46 100644
--- a/components/LinkViews/LinkComponents/LinkPin.tsx
+++ b/components/LinkViews/LinkComponents/LinkPin.tsx
@@ -5,11 +5,10 @@ import usePinLink from "@/lib/client/pinLink";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
-  className?: string;
   btnStyle?: string;
 };
 
-export default function LinkPin({ link, className, btnStyle }: Props) {
+export default function LinkPin({ link, btnStyle }: Props) {
   const pinLink = usePinLink();
   const router = useRouter();
 
@@ -18,7 +17,7 @@ export default function LinkPin({ link, className, btnStyle }: Props) {
 
   return (
     <div
-      className={clsx(className || "top-3 right-3 absolute")}
+      className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
       onClick={() => pinLink(link)}
     >
       <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>