From bfc72170c572afe9a47a34af777d98e6fa1af768 Mon Sep 17 00:00:00 2001
From: sumit_chaturvedi <chaturvedi.sumit@tftus.com>
Date: Mon, 7 Jul 2025 10:19:50 +0530
Subject: [PATCH] feat(ui): create CustomLink component decoupled from
 CustomButton

---
 .../compliance/no-scans-available.tsx         |  10 +-
 .../findings/table/delta-indicator.tsx        |  11 +-
 .../invitations/invitation-details.tsx        |  10 +-
 .../invitations/send-invitation-button.tsx    |  10 +-
 .../manage-groups/manage-groups-button.tsx    |  12 +-
 .../link-to-findings/link-to-findings.tsx     |   9 +-
 .../provider-overview/provider-overview.tsx   |   9 +-
 .../providers/add-provider-button.tsx         |  10 +-
 ui/components/providers/link-to-scans.tsx     |   9 +-
 .../workflow/credentials-role-helper.tsx      |  20 +--
 ui/components/roles/add-role-button.tsx       |  10 +-
 .../scans/link-to-findings-from-scan.tsx      |  13 +-
 ui/components/scans/no-providers-added.tsx    |  10 +-
 .../scans/no-providers-connected.tsx          |  10 +-
 ui/components/ui/custom/custom-button.tsx     |   5 -
 ui/components/ui/custom/custom-link.tsx       | 124 ++++++++++++++++++
 ui/components/ui/custom/index.ts              |   1 +
 .../ui/headers/navigation-header.tsx          |  14 +-
 ui/components/ui/sidebar/menu.tsx             |  15 ++-
 ui/components/users/add-user-button.tsx       |  10 +-
 20 files changed, 218 insertions(+), 104 deletions(-)
 create mode 100644 ui/components/ui/custom/custom-link.tsx

diff --git a/ui/components/compliance/no-scans-available.tsx b/ui/components/compliance/no-scans-available.tsx
index 6089bfd846..f8a8f66a75 100644
--- a/ui/components/compliance/no-scans-available.tsx
+++ b/ui/components/compliance/no-scans-available.tsx
@@ -2,8 +2,9 @@
 
 import React from "react";
 
+import { CustomLink } from "@/components/ui/custom";
+
 import { InfoIcon } from "../icons/Icons";
-import { CustomButton } from "../ui/custom";
 
 export const NoScansAvailable = () => {
   return (
@@ -23,16 +24,15 @@ export const NoScansAvailable = () => {
                 </p>
               </div>
             </div>
-            <CustomButton
-              asLink="/scans"
+            <CustomLink
+              path="/scans"
               className="flex-shrink-0"
               ariaLabel="Go to Scans page"
               variant="solid"
               color="action"
-              size="sm"
             >
               Go to Scans
-            </CustomButton>
+            </CustomLink>
           </div>
         </div>
       </div>
diff --git a/ui/components/findings/table/delta-indicator.tsx b/ui/components/findings/table/delta-indicator.tsx
index 86f89b02a6..4e1a023b99 100644
--- a/ui/components/findings/table/delta-indicator.tsx
+++ b/ui/components/findings/table/delta-indicator.tsx
@@ -1,6 +1,6 @@
 import { Tooltip } from "@nextui-org/react";
 
-import { CustomButton } from "@/components/ui/custom/custom-button";
+import { CustomLink } from "@/components/ui/custom";
 import { cn } from "@/lib/utils";
 
 interface DeltaIndicatorProps {
@@ -18,16 +18,15 @@ export const DeltaIndicator = ({ delta }: DeltaIndicatorProps) => {
               ? "New finding."
               : "Status changed since the previous scan."}
           </span>
-          <CustomButton
+          <CustomLink
             ariaLabel="Learn more about findings"
             color="transparent"
-            size="sm"
-            className="h-auto min-w-0 p-0 text-primary"
-            asLink="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-8-analyze-the-findings"
+            className="h-auto min-w-0 p-0 text-xs text-primary"
+            path="https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/prowler-app/#step-8-analyze-the-findings"
             target="_blank"
           >
             Learn more
-          </CustomButton>
+          </CustomLink>
         </div>
       }
     >
diff --git a/ui/components/invitations/invitation-details.tsx b/ui/components/invitations/invitation-details.tsx
index f91aef5f19..38f68aafc3 100644
--- a/ui/components/invitations/invitation-details.tsx
+++ b/ui/components/invitations/invitation-details.tsx
@@ -2,8 +2,9 @@
 
 import { Card, CardBody, Divider, Snippet } from "@nextui-org/react";
 
+import { CustomLink } from "@/components/ui/custom";
+
 import { AddIcon } from "../icons";
-import { CustomButton } from "../ui/custom";
 import { DateWithTime } from "../ui/entities";
 
 interface InvitationDetailsProps {
@@ -108,16 +109,15 @@ export const InvitationDetails = ({ attributes }: InvitationDetailsProps) => {
         </CardBody>
       </Card>
       <div className="flex w-full items-center justify-end">
-        <CustomButton
-          asLink="/invitations/"
+        <CustomLink
+          path={"/invitations/"}
           ariaLabel="Send Invitation"
           variant="solid"
           color="action"
-          size="md"
           endContent={<AddIcon size={20} />}
         >
           Back to Invitations
-        </CustomButton>
+        </CustomLink>
       </div>
     </div>
   );
diff --git a/ui/components/invitations/send-invitation-button.tsx b/ui/components/invitations/send-invitation-button.tsx
index ae13d33b1d..dc41181e76 100644
--- a/ui/components/invitations/send-invitation-button.tsx
+++ b/ui/components/invitations/send-invitation-button.tsx
@@ -1,21 +1,21 @@
 "use client";
 
+import { CustomLink } from "@/components/ui/custom";
+
 import { AddIcon } from "../icons";
-import { CustomButton } from "../ui/custom";
 
 export const SendInvitationButton = () => {
   return (
     <div className="flex w-full items-center justify-end">
-      <CustomButton
-        asLink="/invitations/new"
+      <CustomLink
+        path={"/invitations/new"}
         ariaLabel="Send Invitation"
         variant="solid"
         color="action"
-        size="md"
         endContent={<AddIcon size={20} />}
       >
         Send Invitation
-      </CustomButton>
+      </CustomLink>
     </div>
   );
 };
diff --git a/ui/components/manage-groups/manage-groups-button.tsx b/ui/components/manage-groups/manage-groups-button.tsx
index 7bfc0cdc0d..5c70eb4d8b 100644
--- a/ui/components/manage-groups/manage-groups-button.tsx
+++ b/ui/components/manage-groups/manage-groups-button.tsx
@@ -2,19 +2,19 @@
 
 import { SettingsIcon } from "lucide-react";
 
-import { CustomButton } from "../ui/custom";
+import { CustomLink } from "@/components/ui/custom";
 
 export const ManageGroupsButton = () => {
   return (
-    <CustomButton
-      asLink="/manage-groups"
+    <CustomLink
+      path={"/manage-groups"}
       ariaLabel="Manage Groups"
       variant="dashed"
-      color="warning"
-      size="md"
+      color="secondary"
+      className="rounded-md px-4 py-2 !font-bold hover:border-solid hover:bg-default-100"
       startContent={<SettingsIcon size={20} />}
     >
       Manage Groups
-    </CustomButton>
+    </CustomLink>
   );
 };
diff --git a/ui/components/overview/new-findings-table/link-to-findings/link-to-findings.tsx b/ui/components/overview/new-findings-table/link-to-findings/link-to-findings.tsx
index e5766db634..aa07772c61 100644
--- a/ui/components/overview/new-findings-table/link-to-findings/link-to-findings.tsx
+++ b/ui/components/overview/new-findings-table/link-to-findings/link-to-findings.tsx
@@ -1,19 +1,18 @@
 "use client";
 
-import { CustomButton } from "@/components/ui/custom";
+import { CustomLink } from "@/components/ui/custom";
 
 export const LinkToFindings = () => {
   return (
     <div className="mt-4 flex w-full items-center justify-end">
-      <CustomButton
-        asLink="/findings?sort=severity,-inserted_at&filter[status__in]=FAIL&filter[delta__in]=new"
+      <CustomLink
+        path="/findings?sort=severity,-inserted_at&filter[status__in]=FAIL&filter[delta__in]=new"
         ariaLabel="Go to Findings page"
         variant="solid"
         color="action"
-        size="sm"
       >
         Check out on Findings
-      </CustomButton>
+      </CustomLink>
     </div>
   );
 };
diff --git a/ui/components/overview/provider-overview/provider-overview.tsx b/ui/components/overview/provider-overview/provider-overview.tsx
index 41d518eb8a..200858c1ba 100644
--- a/ui/components/overview/provider-overview/provider-overview.tsx
+++ b/ui/components/overview/provider-overview/provider-overview.tsx
@@ -10,7 +10,7 @@ import {
   KS8ProviderBadge,
   M365ProviderBadge,
 } from "@/components/icons/providers-badge";
-import { CustomButton } from "@/components/ui/custom/custom-button";
+import { CustomLink } from "@/components/ui/custom";
 import { ProviderOverviewProps } from "@/types";
 
 export const ProvidersOverview = ({
@@ -178,16 +178,15 @@ export const ProvidersOverview = ({
           </div>
         </div>
         <div className="mt-4 flex w-full items-center justify-end">
-          <CustomButton
-            asLink="/providers"
+          <CustomLink
+            path="/providers"
             ariaLabel="Go to Providers page"
             variant="solid"
             color="action"
-            size="sm"
             endContent={<AddIcon size={20} />}
           >
             Add Provider
-          </CustomButton>
+          </CustomLink>
         </div>
       </CardBody>
     </Card>
diff --git a/ui/components/providers/add-provider-button.tsx b/ui/components/providers/add-provider-button.tsx
index 24b1b54c86..8a7cc45fd9 100644
--- a/ui/components/providers/add-provider-button.tsx
+++ b/ui/components/providers/add-provider-button.tsx
@@ -1,19 +1,19 @@
 "use client";
 
+import { CustomLink } from "@/components/ui/custom";
+
 import { AddIcon } from "../icons";
-import { CustomButton } from "../ui/custom";
 
 export const AddProviderButton = () => {
   return (
-    <CustomButton
-      asLink="/providers/connect-account"
+    <CustomLink
+      path="/providers/connect-account"
       ariaLabel="Add Cloud Provider"
       variant="solid"
       color="action"
-      size="md"
       endContent={<AddIcon size={20} />}
     >
       Add Cloud Provider
-    </CustomButton>
+    </CustomLink>
   );
 };
diff --git a/ui/components/providers/link-to-scans.tsx b/ui/components/providers/link-to-scans.tsx
index bcd694cbe0..6630298fb5 100644
--- a/ui/components/providers/link-to-scans.tsx
+++ b/ui/components/providers/link-to-scans.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CustomButton } from "@/components/ui/custom";
+import { CustomLink } from "@/components/ui/custom";
 
 interface LinkToScansProps {
   providerUid?: string;
@@ -8,14 +8,13 @@ interface LinkToScansProps {
 
 export const LinkToScans = ({ providerUid }: LinkToScansProps) => {
   return (
-    <CustomButton
-      asLink={`/scans?filter[provider_uid]=${providerUid}`}
+    <CustomLink
+      path={`/scans?filter[provider_uid]=${providerUid}`}
       ariaLabel="Go to Scans page"
       variant="solid"
       color="action"
-      size="sm"
     >
       View Scan Jobs
-    </CustomButton>
+    </CustomLink>
   );
 };
diff --git a/ui/components/providers/workflow/credentials-role-helper.tsx b/ui/components/providers/workflow/credentials-role-helper.tsx
index 855a3e6fab..1716ad47a0 100644
--- a/ui/components/providers/workflow/credentials-role-helper.tsx
+++ b/ui/components/providers/workflow/credentials-role-helper.tsx
@@ -3,7 +3,7 @@
 import { Snippet } from "@nextui-org/react";
 import { useSession } from "next-auth/react";
 
-import { CustomButton } from "@/components/ui/custom";
+import { CustomLink } from "@/components/ui/custom";
 import { getAWSCredentialsTemplateLinks } from "@/lib";
 
 export const CredentialsRoleHelper = () => {
@@ -16,15 +16,15 @@ export const CredentialsRoleHelper = () => {
           A <strong>new read-only IAM role</strong> must be manually created.
         </p>
 
-        <CustomButton
+        <CustomLink
           ariaLabel="Use the following AWS CloudFormation Quick Link to deploy the IAM Role"
           color="transparent"
           className="h-auto w-fit min-w-0 p-0 text-blue-500"
-          asLink={`${getAWSCredentialsTemplateLinks().cloudformationQuickLink}${session?.tenantId}`}
+          path={`${getAWSCredentialsTemplateLinks().cloudformationQuickLink}${session?.tenantId}`}
           target="_blank"
         >
           Use the following AWS CloudFormation Quick Link to deploy the IAM Role
-        </CustomButton>
+        </CustomLink>
 
         <div className="flex items-center gap-2">
           <div className="h-px flex-1 bg-gray-200 dark:bg-gray-700" />
@@ -38,24 +38,24 @@ export const CredentialsRoleHelper = () => {
         </p>
 
         <div className="flex w-fit flex-col gap-2">
-          <CustomButton
+          <CustomLink
             ariaLabel="CloudFormation Template"
             color="transparent"
             className="h-auto w-fit min-w-0 p-0 text-blue-500"
-            asLink={getAWSCredentialsTemplateLinks().cloudformation}
+            path={getAWSCredentialsTemplateLinks().cloudformation}
             target="_blank"
           >
             CloudFormation Template
-          </CustomButton>
-          <CustomButton
+          </CustomLink>
+          <CustomLink
             ariaLabel="Terraform Code"
             color="transparent"
             className="h-auto w-fit min-w-0 p-0 text-blue-500"
-            asLink={getAWSCredentialsTemplateLinks().terraform}
+            path={getAWSCredentialsTemplateLinks().terraform}
             target="_blank"
           >
             Terraform Code
-          </CustomButton>
+          </CustomLink>
         </div>
 
         <p className="text-xs font-bold text-gray-600 dark:text-gray-400">
diff --git a/ui/components/roles/add-role-button.tsx b/ui/components/roles/add-role-button.tsx
index 3ac3b67126..05c8e5369b 100644
--- a/ui/components/roles/add-role-button.tsx
+++ b/ui/components/roles/add-role-button.tsx
@@ -1,21 +1,21 @@
 "use client";
 
+import { CustomLink } from "@/components/ui/custom";
+
 import { AddIcon } from "../icons";
-import { CustomButton } from "../ui/custom";
 
 export const AddRoleButton = () => {
   return (
     <div className="flex w-full items-center justify-end">
-      <CustomButton
-        asLink="/roles/new"
+      <CustomLink
+        path="/roles/new"
         ariaLabel="Add Role"
         variant="solid"
         color="action"
-        size="md"
         endContent={<AddIcon size={20} />}
       >
         Add Role
-      </CustomButton>
+      </CustomLink>
     </div>
   );
 };
diff --git a/ui/components/scans/link-to-findings-from-scan.tsx b/ui/components/scans/link-to-findings-from-scan.tsx
index 6f94773cee..2b55405983 100644
--- a/ui/components/scans/link-to-findings-from-scan.tsx
+++ b/ui/components/scans/link-to-findings-from-scan.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CustomButton } from "@/components/ui/custom";
+import { CustomLink } from "@/components/ui/custom";
 
 interface LinkToFindingsProps {
   scanId?: string;
@@ -12,15 +12,14 @@ export const LinkToFindingsFromScan = ({
   isDisabled,
 }: LinkToFindingsProps) => {
   return (
-    <CustomButton
-      asLink={`/findings?filter[scan__in]=${scanId}&filter[status__in]=FAIL`}
+    <CustomLink
+      path={`/findings?filter[scan__in]=${scanId}&filter[status__in]=FAIL`}
       ariaLabel="Go to Findings page"
-      variant="ghost"
-      className="text-xs font-medium text-default-500 hover:text-primary disabled:opacity-30"
-      size="sm"
+      color="muted"
+      className="w-[7rem] rounded-md border border-prowler-theme-green px-4 py-2 text-xs !font-bold text-default-500 hover:bg-prowler-theme-green hover:!text-black disabled:opacity-30"
       isDisabled={isDisabled}
     >
       See Findings
-    </CustomButton>
+    </CustomLink>
   );
 };
diff --git a/ui/components/scans/no-providers-added.tsx b/ui/components/scans/no-providers-added.tsx
index 5abc68a0ab..f0bafe5ac4 100644
--- a/ui/components/scans/no-providers-added.tsx
+++ b/ui/components/scans/no-providers-added.tsx
@@ -3,8 +3,9 @@
 import { Card, CardBody } from "@nextui-org/react";
 import React from "react";
 
+import { CustomLink } from "@/components/ui/custom";
+
 import { InfoIcon } from "../icons/Icons";
-import { CustomButton } from "../ui/custom";
 
 export const NoProvidersAdded = () => {
   return (
@@ -25,16 +26,15 @@ export const NoProvidersAdded = () => {
               </p>
             </div>
 
-            <CustomButton
-              asLink="/providers/connect-account"
+            <CustomLink
+              path="/providers/connect-account"
               ariaLabel="Go to Add Cloud Provider page"
               className="w-full max-w-xs justify-center"
               variant="solid"
               color="action"
-              size="lg"
             >
               Get Started
-            </CustomButton>
+            </CustomLink>
           </CardBody>
         </Card>
       </div>
diff --git a/ui/components/scans/no-providers-connected.tsx b/ui/components/scans/no-providers-connected.tsx
index 96acb15e15..4a9f32e13b 100644
--- a/ui/components/scans/no-providers-connected.tsx
+++ b/ui/components/scans/no-providers-connected.tsx
@@ -2,8 +2,9 @@
 
 import React from "react";
 
+import { CustomLink } from "@/components/ui/custom";
+
 import { InfoIcon } from "../icons/Icons";
-import { CustomButton } from "../ui/custom";
 
 export const NoProvidersConnected = () => {
   return (
@@ -26,16 +27,15 @@ export const NoProvidersConnected = () => {
           </p>
         </div>
         <div className="w-full md:w-auto md:flex-shrink-0">
-          <CustomButton
-            asLink="/providers"
+          <CustomLink
+            path="/providers"
             className="w-full justify-center md:w-fit"
             ariaLabel="Go to Cloud providers page"
             variant="solid"
             color="action"
-            size="md"
           >
             Review Cloud Providers
-          </CustomButton>
+          </CustomLink>
         </div>
       </div>
     </div>
diff --git a/ui/components/ui/custom/custom-button.tsx b/ui/components/ui/custom/custom-button.tsx
index ed8db8ef4d..bc5c649000 100644
--- a/ui/components/ui/custom/custom-button.tsx
+++ b/ui/components/ui/custom/custom-button.tsx
@@ -1,7 +1,6 @@
 import { Button, CircularProgress } from "@nextui-org/react";
 import type { PressEvent } from "@react-types/shared";
 import clsx from "clsx";
-import Link from "next/link";
 import React from "react";
 
 import { NextUIColors, NextUIVariants } from "@/types";
@@ -53,7 +52,6 @@ interface CustomButtonProps {
   isLoading?: boolean;
   isIconOnly?: boolean;
   ref?: React.RefObject<HTMLButtonElement>;
-  asLink?: string;
 }
 
 export const CustomButton = React.forwardRef<
@@ -78,14 +76,11 @@ export const CustomButton = React.forwardRef<
       isDisabled = false,
       isLoading = false,
       isIconOnly,
-      asLink,
       ...props
     },
     ref,
   ) => (
     <Button
-      as={asLink ? Link : undefined}
-      href={asLink}
       target={target}
       type={type}
       aria-label={ariaLabel}
diff --git a/ui/components/ui/custom/custom-link.tsx b/ui/components/ui/custom/custom-link.tsx
new file mode 100644
index 0000000000..9cf9160f49
--- /dev/null
+++ b/ui/components/ui/custom/custom-link.tsx
@@ -0,0 +1,124 @@
+import clsx from "clsx";
+import Link from "next/link";
+import React from "react";
+
+interface CustomLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  path: string;
+  target?: "_self" | "_blank";
+  rel?: string;
+  className?: string;
+  children?: React.ReactNode;
+  variant?:
+    | "default"
+    | "dashed"
+    | "underline"
+    | "ghost"
+    | "block"
+    | "solid"
+    | "unstyled";
+  color?:
+    | "primary"
+    | "secondary"
+    | "action"
+    | "transparent"
+    | "danger"
+    | "success"
+    | "muted";
+  startContent?: React.ReactNode;
+  endContent?: React.ReactNode;
+  isIconOnly?: boolean;
+  ariaLabel?: string;
+  isDisabled?: boolean;
+}
+
+const linkClasses = {
+  base: "inline-flex items-center gap-1 text-sm font-medium transition-colors duration-200",
+  iconOnly: "p-2 rounded-full justify-center",
+  disabled: "opacity-30 pointer-events-none cursor-not-allowed",
+};
+
+const variantClasses = {
+  default: "",
+  dashed: "border border-dashed border-current",
+  underline: "underline hover:opacity-80",
+  ghost: "bg-transparent text-inherit",
+  block: "block w-full text-left",
+  unstyled: "",
+  solid: "rounded-md px-4 py-2 !font-bold",
+};
+
+const colorClasses = {
+  primary: "text-prowler-theme-green",
+  secondary: "text-default-800 dark:text-white",
+  action: "bg-prowler-theme-green font-bold text-prowler-theme-midnight ",
+  transparent: "border-0 border-transparent bg-transparent",
+  danger: "text-red-600 dark:text-red-400",
+  success: "text-green-600 dark:text-green-400",
+  muted: "text-gray-500 dark:text-gray-400",
+};
+
+export const CustomLink = React.forwardRef<HTMLAnchorElement, CustomLinkProps>(
+  (
+    {
+      path,
+      target = "_self",
+      rel,
+      className,
+      children,
+      variant = "default",
+      color = "primary",
+      startContent,
+      endContent,
+      isIconOnly = false,
+      ariaLabel,
+      isDisabled = false,
+      ...rest
+    },
+    ref,
+  ) => {
+    const isExternal = target === "_blank";
+    const computedRel = isExternal ? "noopener noreferrer" : rel;
+
+    const content = (
+      <>
+        {startContent && <span>{startContent}</span>}
+        {!isIconOnly && children}
+        {endContent && <span>{endContent}</span>}
+      </>
+    );
+
+    const combinedClasses = clsx(
+      linkClasses.base,
+      colorClasses[color],
+      variantClasses[variant],
+      isIconOnly && linkClasses.iconOnly,
+      isDisabled && linkClasses.disabled,
+      className,
+    );
+
+    return isDisabled ? (
+      <span
+        className={combinedClasses}
+        aria-disabled="true"
+        aria-label={ariaLabel}
+      >
+        {content}
+      </span>
+    ) : (
+      <Link
+        href={path}
+        target={target}
+        rel={computedRel}
+        ref={ref}
+        aria-label={ariaLabel}
+        className={combinedClasses}
+        {...rest}
+      >
+        {content}
+      </Link>
+    );
+  },
+);
+
+CustomLink.displayName = "CustomLink";
diff --git a/ui/components/ui/custom/index.ts b/ui/components/ui/custom/index.ts
index 4e7a55b03f..67554823d9 100644
--- a/ui/components/ui/custom/index.ts
+++ b/ui/components/ui/custom/index.ts
@@ -4,6 +4,7 @@ export * from "./custom-button";
 export * from "./custom-dropdown-filter";
 export * from "./custom-dropdown-selection";
 export * from "./custom-input";
+export * from "./custom-link";
 export * from "./custom-loader";
 export * from "./custom-radio";
 export * from "./custom-server-input";
diff --git a/ui/components/ui/headers/navigation-header.tsx b/ui/components/ui/headers/navigation-header.tsx
index eb2c92201f..9530b65887 100644
--- a/ui/components/ui/headers/navigation-header.tsx
+++ b/ui/components/ui/headers/navigation-header.tsx
@@ -2,7 +2,7 @@ import { Icon } from "@iconify/react";
 import { Divider } from "@nextui-org/react";
 import React from "react";
 
-import { CustomButton } from "@/components/ui/custom/custom-button";
+import { CustomLink } from "@/components/ui/custom/custom-link";
 
 interface NavigationHeaderProps {
   title: string;
@@ -18,16 +18,14 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
   return (
     <>
       <header className="flex items-center gap-3 border-b border-gray-200 px-6 py-4 dark:border-gray-800">
-        <CustomButton
-          asLink={href || ""}
-          className="border-gray-200 bg-transparent p-0"
+        <CustomLink
+          path={href || ""}
+          className="rounded-xl border-2 border-gray-200 bg-prowler-grey-medium bg-transparent p-3"
           ariaLabel="Navigation button"
-          variant="bordered"
-          isIconOnly
-          radius="lg"
+          color="muted"
         >
           <Icon icon={icon} className="text-gray-600 dark:text-gray-400" />
-        </CustomButton>
+        </CustomLink>
         <Divider orientation="vertical" className="h-6" />
         <h1 className="text-xl font-light text-default-700">{title}</h1>
       </header>
diff --git a/ui/components/ui/sidebar/menu.tsx b/ui/components/ui/sidebar/menu.tsx
index f8c1188f10..273c1aa0f8 100644
--- a/ui/components/ui/sidebar/menu.tsx
+++ b/ui/components/ui/sidebar/menu.tsx
@@ -7,6 +7,7 @@ import { usePathname } from "next/navigation";
 
 import { logOut } from "@/actions/auth";
 import { AddIcon, InfoIcon } from "@/components/icons";
+import { CustomLink } from "@/components/ui/custom";
 import { CollapseMenuButton } from "@/components/ui/sidebar/collapse-menu-button";
 import {
   Tooltip,
@@ -18,7 +19,6 @@ import { getMenuList } from "@/lib/menu-list";
 import { cn } from "@/lib/utils";
 
 import { Button } from "../button/button";
-import { CustomButton } from "../custom/custom-button";
 import { ScrollArea } from "../scroll-area/scroll-area";
 
 export const Menu = ({ isOpen }: { isOpen: boolean }) => {
@@ -28,17 +28,18 @@ export const Menu = ({ isOpen }: { isOpen: boolean }) => {
   return (
     <>
       <div className="px-2">
-        <CustomButton
-          asLink="/scans"
-          className={cn(isOpen ? "w-full" : "w-fit")}
+        <CustomLink
+          path="/scans"
+          className={cn(
+            isOpen ? "w-full" : "w-fit",
+            "px justify-center rounded-md px-8 py-3 !font-bold",
+          )}
           ariaLabel="Launch Scan"
-          variant="solid"
           color="action"
-          size="md"
           endContent={isOpen ? <AddIcon size={20} /> : null}
         >
           {isOpen ? "Launch Scan" : <AddIcon size={20} />}
-        </CustomButton>
+        </CustomLink>
       </div>
       <ScrollArea className="[&>div>div[style]]:!block">
         <nav className="mt-2 h-full w-full lg:mt-6">
diff --git a/ui/components/users/add-user-button.tsx b/ui/components/users/add-user-button.tsx
index b4a63fc7a7..050305aade 100644
--- a/ui/components/users/add-user-button.tsx
+++ b/ui/components/users/add-user-button.tsx
@@ -1,21 +1,21 @@
 "use client";
 
+import { CustomLink } from "@/components/ui/custom";
+
 import { AddIcon } from "../icons";
-import { CustomButton } from "../ui/custom";
 
 export const AddUserButton = () => {
   return (
     <div className="flex w-full items-center justify-end">
-      <CustomButton
-        asLink="/invitations/new"
+      <CustomLink
+        path="/invitations/new"
         ariaLabel="Invite User"
         variant="solid"
         color="action"
-        size="md"
         endContent={<AddIcon size={20} />}
       >
         Invite User
-      </CustomButton>
+      </CustomLink>
     </div>
   );
 };