diff --git a/src/common/components/Qris.tsx b/src/common/components/Qris.tsx
index 06ff592..4878180 100644
--- a/src/common/components/Qris.tsx
+++ b/src/common/components/Qris.tsx
@@ -12,8 +12,8 @@ const Qris = ({ onBack }: { onBack: () => void }) => {
 
   return (
     <>
-      <Image src="/images/qris-long.webp" alt="QRIS" width={300} height={50} />
-      <Image src="/images/qris.svg" alt="QRIS" width={500} height={500} />
+      <Image src="/images/qris-long.webp" alt="QRIS" width={200} height={50} />
+      <Image src="/images/qris.svg" alt="QRIS" width={300} height={300} />
       <div className="flex w-full px-3 gap-3">
         <button
           onClick={onBack}
diff --git a/src/common/constant/socials.tsx b/src/common/constant/socials.tsx
index 882a47d..8510725 100644
--- a/src/common/constant/socials.tsx
+++ b/src/common/constant/socials.tsx
@@ -18,7 +18,7 @@ export const SOCIAL_MEDIA: SocialItemProps[] = [
     isShow: true,
     isExternal: true,
     eventName: "Social: Github",
-    className: "hover:bg-black",
+    className: "text-slate-800 hover:bg-slate-800",
   },
   {
     title: "Linkedin",
@@ -27,16 +27,7 @@ export const SOCIAL_MEDIA: SocialItemProps[] = [
     isShow: true,
     isExternal: true,
     eventName: "Social: Linkedin",
-    className: "hover:bg-blue-600",
-  },
-  {
-    title: "X",
-    href: "https://x.com/aulianzaa",
-    icon: <TwitterXIcon size={iconSize} />,
-    isShow: true,
-    isExternal: true,
-    eventName: "Social: X",
-    className: "hover:bg-black",
+    className: "text-blue-600 hover:bg-blue-600",
   },
   {
     title: "Instagram",
@@ -45,7 +36,16 @@ export const SOCIAL_MEDIA: SocialItemProps[] = [
     isShow: true,
     isExternal: true,
     eventName: "Social: Instagram",
-    className: "hover:bg-amber-700",
+    className: "text-pink-600 hover:bg-pink-600",
+  },
+  {
+    title: "X",
+    href: "https://x.com/aulianzaa",
+    icon: <TwitterXIcon size={19} />,
+    isShow: true,
+    isExternal: true,
+    eventName: "Social: X",
+    className: "hover:bg-black",
   },
   {
     title: "Blog",
@@ -54,6 +54,6 @@ export const SOCIAL_MEDIA: SocialItemProps[] = [
     isShow: true,
     isExternal: true,
     eventName: "Social: Blog",
-    className: "hover:bg-orange-500",
+    className: "text-orange-500 hover:bg-orange-500",
   },
 ];
diff --git a/src/modules/homepage/components/ButtonLink.tsx b/src/modules/homepage/components/ButtonLink.tsx
deleted file mode 100644
index bdb49c7..0000000
--- a/src/modules/homepage/components/ButtonLink.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client";
-
-import { clsx } from "clsx";
-import { useState } from "react";
-import { PiLinkBreakDuotone as LinkIcon } from "react-icons/pi";
-
-import BottomSheet from "@/common/components/BottomSheet";
-import { LINKS } from "@/common/constant/links";
-
-import BuyACoffee from "./BuyACoffee";
-
-const ButtonLink = () => {
-  const [isBottomSheetOpen, setBottomSheetOpen] = useState(false);
-
-  const handleClick = (url: string, target: string | undefined) => {
-    if (url !== "#") {
-      window.open(url, target);
-    } else {
-      setBottomSheetOpen(true);
-    }
-  };
-
-  return (
-    <>
-      <div
-        className="flex items-center gap-2 px-3"
-        data-aos="flip-down"
-        data-aos-duration="1000"
-      >
-        <LinkIcon size={24} />
-        <h2 className="font-medium text-neutral-600">Links</h2>
-      </div>
-      <div className="flex flex-col w-full gap-y-3">
-        {LINKS?.map((item, index) => (
-          <button
-            key={index}
-            onClick={() => handleClick(item.href, item.target)}
-            className="relative inline-flex items-center justify-start py-4 pl-4 pr-14 overflow-hidden font-medium text-neutral-800 transition-all duration-150 ease-in-out rounded-lg hover:pl-12 hover:pr-6 bg-white group border shadow-sm"
-            data-aos="fade-down"
-            data-aos-duration="1000"
-            data-aos-delay={index * 100}
-          >
-            <span
-              className={clsx(
-                "absolute bottom-0 left-0 w-full h-0.5 transition-all duration-150 ease-in-out group-hover:h-full",
-                item.className,
-              )}
-            ></span>
-            <span className="absolute right-0 pr-4 duration-200 ease-out group-hover:translate-x-12">
-              <svg
-                className="w-5 h-5 text-green-500"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M14 5l7 7m0 0l-7 7m7-7H3"
-                ></path>
-              </svg>
-            </span>
-            <span className="absolute left-0 pl-4 -translate-x-12 group-hover:translate-x-0 ease-out duration-200">
-              <svg
-                className="w-5 h-5 text-green-300"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M14 5l7 7m0 0l-7 7m7-7H3"
-                ></path>
-              </svg>
-            </span>
-            <div className="flex items-center gap-3">
-              <span className="group-hover:hidden">{item.icon}</span>
-              <span className="relative w-full text-[15px] md:text-base text-left transition-colors duration-200 ease-in-out group-hover:text-white">
-                {item.label}
-              </span>
-            </div>
-          </button>
-        ))}
-      </div>
-
-      <BottomSheet
-        key={isBottomSheetOpen ? "bottom-sheet-open" : "bottom-sheet-closed"}
-        title="Buy me a Cup of Coffee"
-        isOpen={isBottomSheetOpen}
-        onClose={() => setBottomSheetOpen(false)}
-      >
-        <BuyACoffee />
-      </BottomSheet>
-    </>
-  );
-};
-
-export default ButtonLink;
diff --git a/src/modules/homepage/components/Home.tsx b/src/modules/homepage/components/Home.tsx
index eb7a8b8..df6187f 100644
--- a/src/modules/homepage/components/Home.tsx
+++ b/src/modules/homepage/components/Home.tsx
@@ -1,9 +1,9 @@
 import Breakline from "@/common/components/Breakline";
 import Footer from "@/common/components/Footer";
 
-import ButtonLink from "./ButtonLink";
 import Contact from "./Contact";
 import Hero from "./Hero";
+import Links from "./Links";
 import Socials from "./Socials";
 
 const Home = () => {
@@ -12,7 +12,7 @@ const Home = () => {
       <Hero />
       <Socials />
       <Breakline />
-      <ButtonLink />
+      <Links />
       <Breakline />
       <Contact />
       <Footer />
diff --git a/src/modules/homepage/components/LinkItem.tsx b/src/modules/homepage/components/LinkItem.tsx
new file mode 100644
index 0000000..98e41f7
--- /dev/null
+++ b/src/modules/homepage/components/LinkItem.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { clsx } from "clsx";
+
+import { LinkProps } from "@/common/types/link";
+
+interface LinkItemProps extends LinkProps {
+  key: number;
+  onClick: (href: string, target: string) => void;
+}
+
+const LinkItem = ({
+  key,
+  label,
+  icon,
+  href,
+  target = "",
+  className,
+  onClick,
+}: LinkItemProps) => {
+  return (
+    <button
+      onClick={() => onClick(href, target)}
+      className="relative inline-flex items-center justify-start py-4 pl-4 pr-14 overflow-hidden font-medium text-neutral-800 transition-all duration-150 ease-in-out rounded-lg hover:pl-12 hover:pr-6 bg-white group border shadow-sm"
+      data-aos="fade-down"
+      data-aos-duration="1000"
+      data-aos-delay={key * 100}
+    >
+      <span
+        className={clsx(
+          "absolute bottom-0 left-0 w-full h-0.5 transition-all duration-150 ease-in-out group-hover:h-full",
+          className,
+        )}
+      ></span>
+      <span className="absolute right-0 pr-4 duration-200 ease-out group-hover:translate-x-12">
+        <svg
+          className="w-5 h-5 text-green-500"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M14 5l7 7m0 0l-7 7m7-7H3"
+          ></path>
+        </svg>
+      </span>
+      <span className="absolute left-0 pl-4 -translate-x-12 group-hover:translate-x-0 ease-out duration-200">
+        <svg
+          className="w-5 h-5 text-green-300"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M14 5l7 7m0 0l-7 7m7-7H3"
+          ></path>
+        </svg>
+      </span>
+      <div className="flex items-center gap-3">
+        <span className="group-hover:hidden">{icon}</span>
+        <span className="relative w-full text-[15px] md:text-base text-left transition-colors duration-200 ease-in-out group-hover:text-white">
+          {label}
+        </span>
+      </div>
+    </button>
+  );
+};
+
+export default LinkItem;
diff --git a/src/modules/homepage/components/Links.tsx b/src/modules/homepage/components/Links.tsx
new file mode 100644
index 0000000..842448f
--- /dev/null
+++ b/src/modules/homepage/components/Links.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useState } from "react";
+import { PiLinkBreakDuotone as LinkIcon } from "react-icons/pi";
+
+import BottomSheet from "@/common/components/BottomSheet";
+import { LINKS } from "@/common/constant/links";
+
+import BuyACoffee from "./BuyACoffee";
+import LinkItem from "./LinkItem";
+
+const Links = () => {
+  const [isBottomSheetOpen, setBottomSheetOpen] = useState(false);
+
+  const handleClick = (url: string, target: string | undefined) => {
+    if (url !== "#") {
+      window.open(url, target);
+    } else {
+      setBottomSheetOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <div
+        className="flex items-center gap-2 px-3"
+        data-aos="flip-down"
+        data-aos-duration="1000"
+      >
+        <LinkIcon size={24} />
+        <h2 className="font-medium text-neutral-600">Links</h2>
+      </div>
+      <div className="flex flex-col w-full gap-y-3">
+        {LINKS?.map((item, index) => (
+          <LinkItem key={index} onClick={handleClick} {...item} />
+        ))}
+      </div>
+
+      <BottomSheet
+        key={isBottomSheetOpen ? "bottom-sheet-open" : "bottom-sheet-closed"}
+        title="Buy me a Cup of Coffee"
+        isOpen={isBottomSheetOpen}
+        onClose={() => setBottomSheetOpen(false)}
+      >
+        <BuyACoffee />
+      </BottomSheet>
+    </>
+  );
+};
+
+export default Links;
diff --git a/src/modules/homepage/components/Socials.tsx b/src/modules/homepage/components/Socials.tsx
index 0c02b42..c5ebff1 100644
--- a/src/modules/homepage/components/Socials.tsx
+++ b/src/modules/homepage/components/Socials.tsx
@@ -25,6 +25,7 @@ const Socials = () => {
             data-aos="zoom-in"
             data-aos-duration="1000"
             data-aos-delay={index * 100}
+            title={item?.title}
           >
             {item?.icon}
           </a>