diff --git a/.env b/.env
index f074f658b3..2a7f8262ef 100644
--- a/.env
+++ b/.env
@@ -6,6 +6,7 @@
 PROWLER_UI_VERSION="latest"
 SITE_URL=http://localhost:3000
 API_BASE_URL=http://prowler-api:8080/api/v1
+NEXT_PUBLIC_API_DOCS_URL=http://prowler-api:8080/api/v1/docs
 AUTH_TRUST_HOST=true
 UI_PORT=3000
 # openssl rand -base64 32
diff --git a/ui/components/invitations/invitation-details.tsx b/ui/components/invitations/invitation-details.tsx
index 7bdc910db7..117928e4cc 100644
--- a/ui/components/invitations/invitation-details.tsx
+++ b/ui/components/invitations/invitation-details.tsx
@@ -26,8 +26,14 @@ interface InvitationDetailsProps {
 }
 
 export const InvitationDetails = ({ attributes }: InvitationDetailsProps) => {
-  const baseURL = process.env.SITE_URL;
-  const invitationLink = `${baseURL}/sign-up?invitation_token=${attributes.token}`;
+  // window.location.origin to get the current base URL
+  const baseUrl =
+    typeof window !== "undefined"
+      ? window.location.origin
+      : "http://localhost:3000";
+
+  const invitationLink = `${baseUrl}/invitations/check-details?id=${attributes.token}`;
+
   return (
     <div className="flex flex-col gap-x-4 gap-y-8">
       <Card
diff --git a/ui/components/ui/sidebar/sidebar-wrap.tsx b/ui/components/ui/sidebar/sidebar-wrap.tsx
index 0f8900854b..48306327df 100644
--- a/ui/components/ui/sidebar/sidebar-wrap.tsx
+++ b/ui/components/ui/sidebar/sidebar-wrap.tsx
@@ -160,6 +160,50 @@ export const SidebarWrap = () => {
             )}
           </CustomButton>
         </Tooltip>
+        <Tooltip
+          content="API reference"
+          isDisabled={!isCompact}
+          placement="right"
+        >
+          <CustomButton
+            asLink={
+              process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true"
+                ? "https://api.prowler.com/api/v1/docs"
+                : `${process.env.NEXT_PUBLIC_API_DOCS_URL}`
+            }
+            target="_blank"
+            ariaLabel="API reference"
+            variant="flat"
+            className={clsx(
+              "justify-start truncate bg-transparent text-default-500 data-[hover=true]:text-foreground dark:bg-transparent",
+              {
+                "justify-center": isCompact,
+              },
+            )}
+            isIconOnly={isCompact}
+            startContent={
+              isCompact ? null : (
+                <Icon
+                  className="flex-none text-default-500"
+                  icon="tabler:api"
+                  width={24}
+                  aria-hidden="true"
+                />
+              )
+            }
+          >
+            {isCompact ? (
+              <Icon
+                className="text-default-500"
+                icon="tabler:api"
+                width={24}
+                aria-hidden="true"
+              />
+            ) : (
+              "API reference"
+            )}
+          </CustomButton>
+        </Tooltip>
 
         <Tooltip content="Support" isDisabled={!isCompact} placement="right">
           <CustomButton