diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx
index fd7a36a..fc49816 100644
--- a/frontend/src/app/for-lawyers/components/Hero.tsx
+++ b/frontend/src/app/for-lawyers/components/Hero.tsx
@@ -2,9 +2,9 @@ import React from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import ExternalLink from "@/components/ExternalLink";
 import { request } from "@/utils/graphQLClient";
 
@@ -24,16 +24,11 @@ const Hero: React.FC = async () => {
         <p className="max-w-[685px] text-lg">{subtitle}</p>
         <div className="flex flex-wrap gap-6">
           {buttons.map((button) => (
-            <Link
-              key={button.text}
-              href={button.link.url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <CustomLink key={button.text} href={button.link.url}>
               <Button variant="secondary">
                 <span>{button.text}</span>
               </Button>
-            </Link>
+            </CustomLink>
           ))}
         </div>
         <ExternalLink
diff --git a/frontend/src/app/home/components/Hero.tsx b/frontend/src/app/home/components/Hero.tsx
index 5cb59b6..2dcaca2 100644
--- a/frontend/src/app/home/components/Hero.tsx
+++ b/frontend/src/app/home/components/Hero.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import { request } from "@/utils/graphQLClient";
 
 import { HeroQueryType, heroQuery } from "../queries/hero";
@@ -26,33 +26,21 @@ const Hero: React.FC = async () => {
         <h1 className="text-2xl lg:text-3xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
         <div className="lg:hidden">
-          <Link
-            href={primaryButton.link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink href={primaryButton.link.url}>
             <Button>
               <span className="text-background-2"> {primaryButton.text} </span>
             </Button>
-          </Link>
+          </CustomLink>
         </div>
         <div>
-          <Link
-            href={secondaryButton.link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink href={secondaryButton.link.url}>
             <Button variant="secondary">
               <span>{secondaryButton.text}</span>
             </Button>
-          </Link>
+          </CustomLink>
         </div>
         <div>
-          <Link
-            href={arrowLink.link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink href={arrowLink.link.url}>
             <span className="mr-4">{arrowLink.text}</span>
             <Image
               src={LinkArrow}
@@ -61,7 +49,7 @@ const Hero: React.FC = async () => {
               alt="Arrow link image"
               className="inline"
             />
-          </Link>
+          </CustomLink>
         </div>
       </div>
       <Image
diff --git a/frontend/src/app/home/components/LearnPosts.tsx b/frontend/src/app/home/components/LearnPosts.tsx
index 4a5aa40..0a8b761 100644
--- a/frontend/src/app/home/components/LearnPosts.tsx
+++ b/frontend/src/app/home/components/LearnPosts.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 
-import Link from "next/link";
-
 import CtaCard from "@/components/CtaCard";
+import CustomLink from "@/components/CustomLink";
 import { request } from "@/utils/graphQLClient";
 
 import {
@@ -34,12 +33,12 @@ const LearnPosts: React.FC = async () => {
           <p className="text-center text-base lg:text-lg">
             {introduction.heading_text}
             <br />
-            <Link
+            <CustomLink
               className="text-primary-blue"
               href={introduction.link.link.url}
             >
               {introduction.link.text}
-            </Link>
+            </CustomLink>
             <br />
             {introduction.closing_text}
           </p>
diff --git a/frontend/src/app/home/components/TrustedBy.tsx b/frontend/src/app/home/components/TrustedBy.tsx
index 9f9a914..c259e0a 100644
--- a/frontend/src/app/home/components/TrustedBy.tsx
+++ b/frontend/src/app/home/components/TrustedBy.tsx
@@ -2,8 +2,8 @@ import React from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
+import CustomLink from "@/components/CustomLink";
 import { request } from "@/utils/graphQLClient";
 
 import { partnersQuery, PartnersQueryType } from "../queries/trusted-by";
@@ -33,12 +33,7 @@ const TrustedBy: React.FC = async () => {
         )}
       >
         {institutions.map(({ name, link, image }) => (
-          <Link
-            key={name}
-            href={link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink key={name} href={link.url}>
             <Image
               src={image.url}
               alt={name}
@@ -46,7 +41,7 @@ const TrustedBy: React.FC = async () => {
               height="1"
               className="h-auto w-auto"
             />
-          </Link>
+          </CustomLink>
         ))}
       </div>
     </div>
diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/components/BrandAssets/Hero.tsx
index f9e5eb2..fddaf8e 100644
--- a/frontend/src/components/BrandAssets/Hero.tsx
+++ b/frontend/src/components/BrandAssets/Hero.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 import { HeroQueryType } from "@/queries/brand-assets/hero";
 
+import CustomLink from "../CustomLink";
+
 interface IHero {
   heroData: HeroQueryType["brandAssetsPageHero"];
 }
@@ -17,15 +18,11 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <h1 className="w-min text-3xl">{heroData.header}</h1>
         <p className="text-lg">{heroData.subtitle}</p>
         <div>
-          <Link
-            href={heroData.button?.link?.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink href={heroData.button?.link?.url}>
             <Button variant="secondary">
               <span>{heroData.button?.text}</span>
             </Button>
-          </Link>
+          </CustomLink>
         </div>
       </div>
       <Image
diff --git a/frontend/src/components/BrandAssets/LogosPackageSection.tsx b/frontend/src/components/BrandAssets/LogosPackageSection.tsx
index e42796c..83a9734 100644
--- a/frontend/src/components/BrandAssets/LogosPackageSection.tsx
+++ b/frontend/src/components/BrandAssets/LogosPackageSection.tsx
@@ -1,8 +1,7 @@
-import Link from "next/link";
-
 import { LogosPackageSectionQueryType } from "@/queries/brand-assets/logos-package-section";
 
 import Button from "../Button";
+import CustomLink from "../CustomLink";
 import ExternalLink from "../ExternalLink";
 
 interface ILogosPackageSection {
@@ -17,17 +16,13 @@ const LogosPackageSection: React.FC<ILogosPackageSection> = ({
       <h1 className="w-min text-3xl">{logosPackageData.header}</h1>
       <p className="text-lg text-secondary-text">{logosPackageData.subtitle}</p>
       <div>
-        <Link
-          href={logosPackageData.button?.link?.url}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <CustomLink href={logosPackageData.button?.link?.url}>
           <Button variant="primary">
             <span className="text-background-2">
               {logosPackageData.button?.text}
             </span>
           </Button>
-        </Link>
+        </CustomLink>
       </div>
       <ExternalLink
         url={logosPackageData.arrowLink.link.url}
diff --git a/frontend/src/components/Community/CommunityCard.tsx b/frontend/src/components/Community/CommunityCard.tsx
index aaccd7b..f8bc6cb 100644
--- a/frontend/src/components/Community/CommunityCard.tsx
+++ b/frontend/src/components/Community/CommunityCard.tsx
@@ -1,11 +1,12 @@
 import Image from "next/image";
-import Link from "next/link";
 
 import { Community } from "@/queries/community/hero";
 
+import CustomLink from "../CustomLink";
+
 const CommunityCard: React.FC<Community> = ({ title, subtitle, icon, url }) => {
   return (
-    <Link href={url} target="_blank" rel="noreferrer noopener">
+    <CustomLink href={url}>
       <div className="flex min-h-[326px] flex-col items-center justify-center rounded-2xl border border-stroke bg-background-2 hover:scale-[1.01]">
         <Image
           src={icon.url}
@@ -19,7 +20,7 @@ const CommunityCard: React.FC<Community> = ({ title, subtitle, icon, url }) => {
         </h2>
         <label className="text-base text-secondary-text">{subtitle}</label>
       </div>
-    </Link>
+    </CustomLink>
   );
 };
 
diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/components/Community/hero.tsx
index 52994d2..f7ac6e5 100644
--- a/frontend/src/components/Community/hero.tsx
+++ b/frontend/src/components/Community/hero.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 import { HeroQueryType } from "@/queries/community/hero";
 
+import CustomLink from "../CustomLink";
+
 interface IHero {
   heroData: HeroQueryType["communityPageHero"];
 }
@@ -21,16 +22,11 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <p className="text-lg">{subtitle}</p>
         <div className="flex flex-wrap items-center gap-6">
           {communityButtons.map((button) => (
-            <Link
-              key={button.text}
-              href={button.link.url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <CustomLink key={button.text} href={button.link.url}>
               <Button variant="secondary">
                 <span>{button.text}</span>
               </Button>
-            </Link>
+            </CustomLink>
           ))}
         </div>
       </div>
diff --git a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx b/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
index 9075a77..ac1a724 100644
--- a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
+++ b/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
@@ -4,9 +4,9 @@ import { useState } from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import { Report } from "@/queries/cooperative/report-section";
 
 import DropdownContainer from "./DropdownContainer";
@@ -53,7 +53,7 @@ const ReportCard: React.FC<IReportCard> = ({
           }}
         />
 
-        <Link href={reportUrl ?? ""} target="_blank" rel="noreferrer noopener">
+        <CustomLink href={reportUrl ?? ""}>
           <Button
             variant="primary"
             className="text-background-1"
@@ -61,7 +61,7 @@ const ReportCard: React.FC<IReportCard> = ({
           >
             {downloadButtonText}
           </Button>
-        </Link>
+        </CustomLink>
       </div>
 
       <div
diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/components/Cooperative/hero.tsx
index 3648e9a..1f13b95 100644
--- a/frontend/src/components/Cooperative/hero.tsx
+++ b/frontend/src/components/Cooperative/hero.tsx
@@ -1,12 +1,13 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 import ExternalLink from "@/components/ExternalLink";
 import { HeroQueryType } from "@/queries/cooperative/hero";
 
+import CustomLink from "../CustomLink";
+
 interface IHero {
   heroData: HeroQueryType["cooperativePageHero"];
 }
@@ -22,16 +23,11 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <p className="max-w-[685px] text-lg">{subtitle}</p>
         <div className="flex flex-wrap items-center gap-6">
           {buttons.map((button) => (
-            <Link
-              key={button.text}
-              href={button.link.url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <CustomLink key={button.text} href={button.link.url}>
               <Button variant="secondary">
                 <span>{button.text}</span>
               </Button>
-            </Link>
+            </CustomLink>
           ))}
         </div>
         <ExternalLink
diff --git a/frontend/src/components/CtaBox.tsx b/frontend/src/components/CtaBox.tsx
index 738799f..a89b3a2 100644
--- a/frontend/src/components/CtaBox.tsx
+++ b/frontend/src/components/CtaBox.tsx
@@ -2,10 +2,11 @@ import React from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 
+import CustomLink from "./CustomLink";
+
 interface ICtaBox {
   background: {
     url: string;
@@ -37,11 +38,11 @@ const CtaBox: React.FC<ICtaBox> = ({ background, header, button }) => {
         <h2 className="mb-8 text-center text-lg text-primary-text lg:text-xl">
           {header}
         </h2>
-        <Link href={button.link.url} target="_blank" rel="noopener noreferrer">
+        <CustomLink href={button.link.url}>
           <Button>
             <span className="text-background-2"> {button.text} </span>
           </Button>
-        </Link>
+        </CustomLink>
       </div>
     </div>
   );
diff --git a/frontend/src/components/CustomLink.tsx b/frontend/src/components/CustomLink.tsx
new file mode 100644
index 0000000..b5db966
--- /dev/null
+++ b/frontend/src/components/CustomLink.tsx
@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+interface ICustomLink extends React.ComponentProps<typeof Link> {
+  children: React.ReactNode;
+}
+
+const CustomLink: React.FC<ICustomLink> = ({ children, href, ...props }) => (
+  <Link
+    {...{ href }}
+    {...props}
+    {...(isExternal(href.toString())
+      ? { target: "_blank", rel: "noopener noreferrer" }
+      : undefined)}
+  >
+    {children}
+  </Link>
+);
+
+const isExternal = (url: string) => /^https?:\/\//.test(url);
+
+export default CustomLink;
diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx b/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
index e620378..34ba3ce 100644
--- a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
+++ b/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import ExternalLink from "@/components/ExternalLink";
 import { KlerosScoutSection as IKlerosScoutSection } from "@/queries/earn/tabs-data";
 
@@ -44,14 +44,12 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
           "flex items-center justify-center pt-3 md:pt-0",
         )}
       >
-        <Link
+        <CustomLink
           href={learnMoreButton.link.url}
-          target="_blank"
-          rel="noreferrer noopener"
           className="z-[1] mt-16 md:mt-0"
         >
           <Button className="text-background-1">{learnMoreButton.text}</Button>
-        </Link>
+        </CustomLink>
       </div>
       <div className="flex flex-col items-center gap-8 md:flex-row">
         {arrowLinks.map((arrowLink) => (
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx b/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
index 364ee96..1aabb4d 100644
--- a/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
+++ b/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
-import Link from "next/link";
 
 import PlusIcon from "@/assets/svgs/icons/plus-icon.svg";
+import CustomLink from "@/components/CustomLink";
 import Tag from "@/components/Tag";
 import { Court } from "@/queries/earn/tabs-data";
 import { ArrowLink } from "@/queries/navbar";
@@ -29,11 +29,7 @@ const CourtsSection: React.FC<ICourtsSection> = ({
             className="!text-base leading-none"
           />
         ))}
-        <Link
-          href={courtsButton.link.url}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
+        <CustomLink href={courtsButton.link.url}>
           <button className="border-gradient-purple-blue h-12 w-12">
             <Image
               src={PlusIcon}
@@ -43,7 +39,7 @@ const CourtsSection: React.FC<ICourtsSection> = ({
               className="inline"
             />
           </button>
-        </Link>
+        </CustomLink>
       </div>
     </>
   );
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx b/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
index b90609c..ec28cc2 100644
--- a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
+++ b/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import ExternalLink from "@/components/ExternalLink";
 import { EnterCourtSection as IEnterCourtSection } from "@/queries/earn/tabs-data";
 
@@ -14,16 +14,11 @@ const EnterCourtSection: React.FC<IEnterCourtSection> = ({
 }) => {
   return (
     <div className="relative mt-16 flex w-full flex-col items-center justify-center p-8">
-      <Link
-        href={button.link.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="z-[1] mb-8"
-      >
+      <CustomLink href={button.link.url} className="z-[1] mb-8">
         <Button>
           <span className="text-background-2">{button.text}</span>
         </Button>
-      </Link>
+      </CustomLink>
       <ExternalLink
         url={arrowLink.link.url}
         text={arrowLink.text}
diff --git a/frontend/src/components/ExternalLink.tsx b/frontend/src/components/ExternalLink.tsx
index ab5e856..4514e49 100644
--- a/frontend/src/components/ExternalLink.tsx
+++ b/frontend/src/components/ExternalLink.tsx
@@ -2,10 +2,11 @@ import React, { HTMLAttributes } from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
 
+import CustomLink from "./CustomLink";
+
 interface IExternalLink {
   text: string;
   url: string;
@@ -13,10 +14,8 @@ interface IExternalLink {
 }
 const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
   return (
-    <Link
+    <CustomLink
       href={url}
-      target="_blank"
-      rel="noopener noreferrer"
       className={clsx("block hover:brightness-[1.2]", className)}
     >
       <span className="text-center text-primary-blue md:text-lg">{text}</span>
@@ -27,7 +26,7 @@ const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
         alt="Arrow link image"
         className="inline aspect-square w-4 md:w-6"
       />
-    </Link>
+    </CustomLink>
   );
 };
 export default ExternalLink;
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 5d8ac29..cd8b4a2 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -2,12 +2,13 @@ import React from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 import { FooterQueryType, footerQuery } from "@/queries/footer";
 import { request } from "@/utils/graphQLClient";
 
+import CustomLink from "./CustomLink";
+
 const hoverScaleUp = clsx("hover:scale-105 transform transition duration-75");
 
 const Footer: React.FC = async () => {
@@ -26,15 +27,13 @@ const Footer: React.FC = async () => {
             <div key={title} className="flex flex-col gap-4">
               <h2 className="text-background-2">{title}</h2>
               {links.map(({ name, url }) => (
-                <Link
+                <CustomLink
                   className={clsx(hoverScaleUp, "w-max")}
                   key={name}
                   href={url}
-                  target={/^https?:\/\//.test(url) ? "_blank" : undefined}
-                  rel="noopener noreferrer"
                 >
                   {name}
-                </Link>
+                </CustomLink>
               ))}
             </div>
           ))}
@@ -42,15 +41,9 @@ const Footer: React.FC = async () => {
         <hr className="mx-6 mb-6 mt-16 h-0.5 border-t-0 bg-secondary-purple" />
         <div className="flex items-center justify-center gap-8">
           {socials.map(({ name, icon_white: icon, url }) => (
-            <Link
-              className={hoverScaleUp}
-              key={name}
-              href={url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <CustomLink className={hoverScaleUp} key={name} href={url}>
               <Image src={icon.url} alt={name} width="24" height="24" />
-            </Link>
+            </CustomLink>
           ))}
         </div>
       </div>
diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx
index 82a94d5..9a5c15e 100644
--- a/frontend/src/components/ForBuilders/Hero.tsx
+++ b/frontend/src/components/ForBuilders/Hero.tsx
@@ -1,12 +1,13 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
 import Button from "@/components/Button";
 import { HeroQueryType } from "@/queries/for-builders/hero";
 
+import CustomLink from "../CustomLink";
+
 interface IHero {
   heroData: HeroQueryType["forBuildersPageHero"];
 }
@@ -18,24 +19,15 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <h1 className="w-min text-3xl">{heroData.title}</h1>
         <p className="text-lg">{heroData.subtitle}</p>
         <div>
-          <Link
-            href={heroData.button.link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink href={heroData.button.link.url}>
             <Button variant="secondary">
               <span>{heroData.button.text}</span>
             </Button>
-          </Link>
+          </CustomLink>
         </div>
         <div className="block space-x-2">
           {heroData.arrowLink?.map((arrowLink) => (
-            <Link
-              key={arrowLink.text}
-              href={arrowLink.link.url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <CustomLink key={arrowLink.text} href={arrowLink.link.url}>
               <span className="mr-2">{arrowLink.text}</span>
               <Image
                 src={LinkArrow}
@@ -44,7 +36,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
                 alt="Arrow link image"
                 className="inline"
               />
-            </Link>
+            </CustomLink>
           ))}
         </div>
       </div>
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
index aafefd4..32f70c8 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
@@ -2,8 +2,8 @@ import React from "react";
 
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
+import CustomLink from "@/components/CustomLink";
 import Card from "@/components/Navbar/AppsDropdownContent/Card";
 import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
 
@@ -41,11 +41,9 @@ const HowKlerosSolvesIt: React.FC<IHowKlerosSolvesIt> = ({ useCasesData }) => {
         </div>
         <div className="flex flex-row gap-x-6 rounded-2xl border border-stroke p-4">
           {useCasesData.solutionSections.partners.map((partner) => (
-            <Link
+            <CustomLink
               key={partner?.name}
               href={partner?.url}
-              rel="noopener noreferrer"
-              target="_blank"
               className={clsx(hoverEffect, "cursor-pointer")}
             >
               <Image
@@ -55,7 +53,7 @@ const HowKlerosSolvesIt: React.FC<IHowKlerosSolvesIt> = ({ useCasesData }) => {
                 width={64}
                 height={64}
               />
-            </Link>
+            </CustomLink>
           ))}
         </div>
       </div>
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx
index 630eec5..ab04e36 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
+import CustomLink from "@/components/CustomLink";
 import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
 
 interface ILearnMore {
@@ -12,10 +12,8 @@ interface ILearnMore {
 
 const LearnMore: React.FC<ILearnMore> = ({ useCasesData }) => {
   return (
-    <Link
+    <CustomLink
       href={useCasesData.arrowLink.link.url}
-      target="_blank"
-      rel="noopener noreferrer"
       className="mt-16 block text-center"
     >
       <span className="mr-4 text-lg text-primary-blue">
@@ -28,7 +26,7 @@ const LearnMore: React.FC<ILearnMore> = ({ useCasesData }) => {
         alt="Arrow link image"
         className="inline"
       />
-    </Link>
+    </CustomLink>
   );
 };
 export default LearnMore;
diff --git a/frontend/src/components/IntegrateSection/LearnMore.tsx b/frontend/src/components/IntegrateSection/LearnMore.tsx
index 266eb0b..096dc73 100644
--- a/frontend/src/components/IntegrateSection/LearnMore.tsx
+++ b/frontend/src/components/IntegrateSection/LearnMore.tsx
@@ -1,21 +1,20 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
 import { IntegrateQueryType } from "@/queries/integrate";
 
+import CustomLink from "../CustomLink";
+
 interface ILearnMore {
   integrateData: IntegrateQueryType["forBuildersPageIntegrateSection"];
 }
 
 const LearnMore: React.FC<ILearnMore> = ({ integrateData }) => {
   return (
-    <Link
+    <CustomLink
       href={integrateData.arrowLink.link.url}
-      target="_blank"
-      rel="noopener noreferrer"
       className="mt-16 block text-center"
     >
       <span className="mr-4 text-lg text-primary-blue">
@@ -28,7 +27,7 @@ const LearnMore: React.FC<ILearnMore> = ({ integrateData }) => {
         alt="Arrow link image"
         className="inline"
       />
-    </Link>
+    </CustomLink>
   );
 };
 export default LearnMore;
diff --git a/frontend/src/components/LearnMore.tsx b/frontend/src/components/LearnMore.tsx
index 179b670..416147b 100644
--- a/frontend/src/components/LearnMore.tsx
+++ b/frontend/src/components/LearnMore.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 import { ArrowLink } from "@/queries/navbar";
 
+import CustomLink from "./CustomLink";
+
 interface ILearnMore {
   title: string;
   button: ArrowLink;
@@ -24,16 +25,11 @@ const LearnMore: React.FC<ILearnMore> = ({ title, button, background }) => {
       <h2 className="z-[1] mb-8 text-center text-lg text-primary-text lg:text-xl">
         {title}
       </h2>
-      <Link
-        href={button.link.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="z-[1]"
-      >
+      <CustomLink href={button.link.url} className="z-[1]">
         <Button>
           <span className="text-background-2">{button.text}</span>
         </Button>
-      </Link>
+      </CustomLink>
       <Image
         src={background.url}
         alt="Learn more Image Background"
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
index 22f6066..79d5f80 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
+import CustomLink from "@/components/CustomLink";
 import { Solution } from "@/queries/navbar";
 import { hoverEffect } from "@/styles";
 
@@ -21,11 +21,9 @@ interface CardProps {
 
 const Card: React.FC<CardProps> = ({ solution, variant }) => {
   return (
-    <Link
+    <CustomLink
       key={solution?.solution_name}
       href={solution?.url}
-      rel="noopener noreferrer"
-      target="_blank"
       className={clsx(cardBaseStyle, hoverEffect, "flex-row", "w-full", {
         "xl:flex-col xl:pb-8": variant === "large",
         "xl:flex-row": variant === "medium" || variant === "small",
@@ -67,7 +65,7 @@ const Card: React.FC<CardProps> = ({ solution, variant }) => {
           </p>
         )}
       </div>
-    </Link>
+    </CustomLink>
   );
 };
 
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
index b1d3159..d65f1cf 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
+import CustomLink from "@/components/CustomLink";
 import { AppsSection } from "@/queries/navbar";
 
 import Card from "./Card";
@@ -51,9 +51,7 @@ const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
             variant="small"
           />
         ))}
-        <Link
-          rel="noopener noreferrer"
-          target="_blank"
+        <CustomLink
           href={appsSection?.arrowLink.link.url}
           className="self-start text-primary-blue xl:self-end"
         >
@@ -65,7 +63,7 @@ const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
             alt="Arrow link"
             className="inline"
           />
-        </Link>
+        </CustomLink>
       </div>
     </div>
   );
diff --git a/frontend/src/components/Navbar/MobileMenu.tsx b/frontend/src/components/Navbar/MobileMenu.tsx
index 0975c45..62ed86d 100644
--- a/frontend/src/components/Navbar/MobileMenu.tsx
+++ b/frontend/src/components/Navbar/MobileMenu.tsx
@@ -16,6 +16,8 @@ import {
   Social,
 } from "@/queries/navbar";
 
+import CustomLink from "../CustomLink";
+
 import AppsDropdownContent from "./AppsDropdownContent";
 import ResourcesDropdownContent from "./ResourcesDropdownContent";
 
@@ -101,15 +103,11 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
       </nav>
 
       <div className="mt-6">
-        <Link
-          href={navbarButton?.link.url}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
+        <CustomLink href={navbarButton?.link.url}>
           <Button className="text-background-2">
             {navbarButton?.link.name}
           </Button>
-        </Link>
+        </CustomLink>
       </div>
     </div>
   );
diff --git a/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx b/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
index 0f60c26..2f0990b 100644
--- a/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
+++ b/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
+import CustomLink from "@/components/CustomLink";
 import { ResourceSection, Social } from "@/queries/navbar";
 
 const hoverScaleUp = clsx("transform transition duration-75");
@@ -48,13 +48,7 @@ const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
               <ul className="flex flex-col gap-2">
                 {section.links?.map((link) => (
                   <li key={link.url} className={hoverScaleUpLink}>
-                    <Link
-                      href={link.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {link.name}
-                    </Link>
+                    <CustomLink href={link.url}>{link.name}</CustomLink>
                   </li>
                 ))}
               </ul>
@@ -69,11 +63,9 @@ const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
         )}
       >
         {socials?.map((social) => (
-          <Link
+          <CustomLink
             key={social.name}
             href={social.url}
-            target="_blank"
-            rel="noopener noreferrer"
             className={hoverScaleUpLogo}
           >
             <Image
@@ -82,7 +74,7 @@ const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
               width={24}
               height={24}
             />
-          </Link>
+          </CustomLink>
         ))}
       </div>
     </div>
diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx
index bcf3e1a..502e88f 100644
--- a/frontend/src/components/Navbar/index.tsx
+++ b/frontend/src/components/Navbar/index.tsx
@@ -13,6 +13,8 @@ import Button from "@/components/Button";
 import { NavbarQueryType } from "@/queries/navbar";
 import { responsiveSize } from "@/styles/responsiveSize";
 
+import CustomLink from "../CustomLink";
+
 import DesktopNavigation from "./DesktopNavigation";
 import MobileMenu from "./MobileMenu";
 
@@ -75,15 +77,11 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
       </div>
 
       <div className="hidden items-center lg:flex">
-        <Link
-          href={navbarButton?.link.url}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
+        <CustomLink href={navbarButton?.link.url}>
           <Button className="text-background-2">
             {navbarButton?.link.name}
           </Button>
-        </Link>
+        </CustomLink>
       </div>
 
       {menuOpen && (
diff --git a/frontend/src/components/PNKToken/BuySection/Exchanges.tsx b/frontend/src/components/PNKToken/BuySection/Exchanges.tsx
index 7d95006..b521071 100644
--- a/frontend/src/components/PNKToken/BuySection/Exchanges.tsx
+++ b/frontend/src/components/PNKToken/BuySection/Exchanges.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
-import Link from "next/link";
 
+import CustomLink from "@/components/CustomLink";
 import { Exchange } from "@/queries/pnk-token/token-buy";
 import { hoverEffect } from "@/styles";
 
@@ -12,12 +12,7 @@ const Exchanges: React.FC<IExchanges> = ({ exchanges }) => {
   return (
     <div className="mb-8 flex w-full flex-wrap justify-center gap-6 md:mb-0 md:gap-16 lg:gap-20">
       {exchanges.map((exchange) => (
-        <Link
-          href={exchange.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          key={exchange.name}
-        >
+        <CustomLink href={exchange.url} key={exchange.name}>
           <Image
             width={64}
             height={64}
@@ -25,7 +20,7 @@ const Exchanges: React.FC<IExchanges> = ({ exchanges }) => {
             alt={exchange.name}
             className={hoverEffect}
           />
-        </Link>
+        </CustomLink>
       ))}
     </div>
   );
diff --git a/frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx b/frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx
index f02e4c6..4eba98f 100644
--- a/frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx
+++ b/frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
+import CustomLink from "@/components/CustomLink";
 import { Exchange } from "@/queries/pnk-token/token-buy";
 import { hoverEffect } from "@/styles";
 
@@ -10,7 +10,7 @@ interface IFeaturedExchange {
 }
 const FeaturedExchange: React.FC<IFeaturedExchange> = ({ exchange }) => {
   return (
-    <Link href={exchange.url} target="_blank" rel="noopener noreferrer">
+    <CustomLink href={exchange.url}>
       <div
         className={clsx(
           "flex h-40 flex-col items-center justify-center gap-5 rounded-2xl border border-stroke px-2",
@@ -23,7 +23,7 @@ const FeaturedExchange: React.FC<IFeaturedExchange> = ({ exchange }) => {
 
         <p className="text-secondary-text">{exchange.name}</p>
       </div>
-    </Link>
+    </CustomLink>
   );
 };
 
diff --git a/frontend/src/components/PNKToken/Explorers.tsx b/frontend/src/components/PNKToken/Explorers.tsx
index ab0289b..0e6c599 100644
--- a/frontend/src/components/PNKToken/Explorers.tsx
+++ b/frontend/src/components/PNKToken/Explorers.tsx
@@ -1,8 +1,9 @@
 import Image from "next/image";
-import Link from "next/link";
 
 import { HeroQueryType } from "@/queries/pnk-token/hero";
 
+import CustomLink from "../CustomLink";
+
 interface IExplorers {
   explorers: HeroQueryType["tokenExplorers"];
 }
@@ -11,11 +12,9 @@ const Explorers: React.FC<IExplorers> = ({ explorers }) => {
   return (
     <div className="flex flex-wrap gap-6 pb-2 lg:gap-12 lg:pb-1">
       {explorers.map((explorer) => (
-        <Link
+        <CustomLink
           key={explorer.name}
           href={explorer.url}
-          target="_blank"
-          rel="noopener noreferrer"
           className="relative block h-6 min-w-32 items-start"
         >
           <Image
@@ -24,7 +23,7 @@ const Explorers: React.FC<IExplorers> = ({ explorers }) => {
             alt={explorer.name}
             className="!w-min"
           />
-        </Link>
+        </CustomLink>
       ))}
     </div>
   );
diff --git a/frontend/src/components/PNKToken/Hero.tsx b/frontend/src/components/PNKToken/Hero.tsx
index 7308cb3..2331eb8 100644
--- a/frontend/src/components/PNKToken/Hero.tsx
+++ b/frontend/src/components/PNKToken/Hero.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 import { HeroQueryType } from "@/queries/pnk-token/hero";
 
+import CustomLink from "../CustomLink";
+
 import Explorers from "./Explorers";
 
 interface IHero {
@@ -22,15 +23,11 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         </h1>
         <p className="max-w-[685px] text-lg">{subtitle}</p>
         <div>
-          <Link
-            href={buyButton.link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <CustomLink href={buyButton.link.url}>
             <Button variant="secondary">
               <span>{buyButton.text}</span>
             </Button>
-          </Link>
+          </CustomLink>
         </div>
         <Explorers explorers={heroData.tokenExplorers} />
       </div>
diff --git a/frontend/src/components/ResearchDevelopment/Hero.tsx b/frontend/src/components/ResearchDevelopment/Hero.tsx
index ce2f7b2..c307122 100644
--- a/frontend/src/components/ResearchDevelopment/Hero.tsx
+++ b/frontend/src/components/ResearchDevelopment/Hero.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
 import { HeroQueryType } from "@/queries/research-development/hero";
 
+import CustomLink from "../CustomLink";
 import ExternalLink from "../ExternalLink";
 
 interface IHero {
@@ -24,16 +24,11 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <p className="max-w-[685px] text-lg">{subtitle}</p>
         <div className="flex flex-wrap gap-6">
           {buttons.map((button) => (
-            <Link
-              key={button.text}
-              href={button.link.url}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <CustomLink key={button.text} href={button.link.url}>
               <Button variant="secondary">
                 <span>{button.text}</span>
               </Button>
-            </Link>
+            </CustomLink>
           ))}
         </div>
         <div className="flex flex-wrap gap-8">
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/TestimonialCard.tsx b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/TestimonialCard.tsx
index 795e3d3..5f6c467 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/TestimonialCard.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/TestimonialCard.tsx
@@ -1,10 +1,10 @@
 import Image from "next/image";
-import Link from "next/link";
 
+import CustomLink from "@/components/CustomLink";
 import { Testimonial } from "@/queries/research-development/tabs-data";
 
 const TestimonialCard: React.FC<Testimonial> = ({ url, thumbnail }) => (
-  <Link href={url} target="_blank" rel="noreferrer noopener">
+  <CustomLink href={url}>
     <div className="relative h-[203px] w-full overflow-hidden rounded-2xl">
       <Image
         src={thumbnail.url}
@@ -13,7 +13,7 @@ const TestimonialCard: React.FC<Testimonial> = ({ url, thumbnail }) => (
         className="object-cover"
       />
     </div>
-  </Link>
+  </CustomLink>
 );
 
 export default TestimonialCard;
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
index 9f8f585..ee5d19a 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import { KlerosBook as IKlerosBook } from "@/queries/research-development/tabs-data";
 
 const KlerosBook: React.FC<IKlerosBook> = ({
@@ -35,14 +35,9 @@ const KlerosBook: React.FC<IKlerosBook> = ({
         </div>
         <div className="flex flex-wrap gap-4">
           {downloadFormats.map((format) => (
-            <Link
-              key={format.text}
-              href={format.link.url}
-              target="_blank"
-              rel="noreferrer noopener"
-            >
+            <CustomLink key={format.text} href={format.link.url}>
               <Button className="text-background-1">{format.text}</Button>
-            </Link>
+            </CustomLink>
           ))}
         </div>
       </div>