diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/featured-integrations.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/featured-integrations.tsx
index 3492168487..c586acad4a 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/featured-integrations.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/featured-integrations.tsx
@@ -172,8 +172,8 @@ export function FeaturedIntegrationsLoader() {
     <div>
       <div className="overflow-hidden">
         <div className="-ml-4 flex -translate-x-1/2">
-          {[...Array(3)].map(() => (
-            <div className="min-w-0 shrink-0 grow-0 basis-2/3 pl-4">
+          {[...Array(3)].map((_, idx) => (
+            <div key={idx} className="min-w-0 shrink-0 grow-0 basis-2/3 pl-4">
               <div className="border border-transparent">
                 <div className="aspect-[900/580] animate-pulse rounded-lg bg-neutral-200" />
               </div>
@@ -182,8 +182,11 @@ export function FeaturedIntegrationsLoader() {
         </div>
       </div>
       <div className="mt-6 flex items-center justify-center gap-4 pb-1">
-        {[...Array(4)].map(() => (
-          <div className="size-8 animate-pulse rounded-lg bg-neutral-200" />
+        {[...Array(4)].map((_, idx) => (
+          <div
+            key={idx}
+            className="size-8 animate-pulse rounded-lg bg-neutral-200"
+          />
         ))}
       </div>
     </div>
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/integrations-cards.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/integrations-cards.tsx
index 26cdcc5630..cc6233057b 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/integrations-cards.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/integrations-cards.tsx
@@ -28,7 +28,7 @@ const PRESENCE_ANIMATION = {
   transition: { duration: 0.1 },
 };
 
-export async function IntegrationsCards({
+export function IntegrationsCards({
   integrations,
 }: {
   integrations: IntegrationsWithInstallations;
diff --git a/packages/ui/src/icons/card-discover.tsx b/packages/ui/src/icons/card-discover.tsx
index 5cda5bf021..4b0b9f98da 100644
--- a/packages/ui/src/icons/card-discover.tsx
+++ b/packages/ui/src/icons/card-discover.tsx
@@ -1,6 +1,8 @@
-import { SVGProps } from "react";
+import { SVGProps, useId } from "react";
 
 export function CardDiscover(props: SVGProps<SVGSVGElement>) {
+  const id = useId();
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -10,25 +12,20 @@ export function CardDiscover(props: SVGProps<SVGSVGElement>) {
       viewBox="0 0 22 22"
       {...props}
     >
-      <g filter="url(#filter0_i_3233_2334)">
-        <circle
-          cx="11"
-          cy="11"
-          r="10.1145"
-          fill="url(#paint0_linear_3233_2334)"
-        />
+      <g filter={`url(#${id}-filter)`}>
+        <circle cx="11" cy="11" r="10.1145" fill={`url(#${id}-gradient)`} />
       </g>
       <defs>
         <filter
-          id="filter0_i_3233_2334"
+          id={`${id}-filter`}
           x="0.885498"
           y="0.885483"
           width="22.229"
           height="22.229"
           filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
+          colorInterpolationFilters="sRGB"
         >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feBlend
             mode="normal"
             in="SourceGraphic"
@@ -55,15 +52,15 @@ export function CardDiscover(props: SVGProps<SVGSVGElement>) {
           />
         </filter>
         <linearGradient
-          id="paint0_linear_3233_2334"
+          id={`${id}-gradient`}
           x1="0.885498"
           y1="0.885483"
           x2="21.1145"
           y2="21.1145"
           gradientUnits="userSpaceOnUse"
         >
-          <stop offset="0.28" stop-color="#E0481E" />
-          <stop offset="0.765" stop-color="#F59214" />
+          <stop offset="0.28" stopColor="#E0481E" />
+          <stop offset="0.765" stopColor="#F59214" />
         </linearGradient>
       </defs>
     </svg>
diff --git a/packages/ui/src/icons/dub-crafted-shield.tsx b/packages/ui/src/icons/dub-crafted-shield.tsx
index 56e7ae8d6e..278f32c100 100644
--- a/packages/ui/src/icons/dub-crafted-shield.tsx
+++ b/packages/ui/src/icons/dub-crafted-shield.tsx
@@ -50,7 +50,7 @@ export function DubCraftedShield(props: SVGProps<SVGSVGElement>) {
           filterUnits="userSpaceOnUse"
           colorInterpolationFilters="sRGB"
         >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"