diff --git a/client/src/ee/pages/embedded/integration-instance-configurations/components/IntegrationInstanceConfigurationsFilterTitle.tsx b/client/src/ee/pages/embedded/integration-instance-configurations/components/IntegrationInstanceConfigurationsFilterTitle.tsx
index b240d98a45d..47c284f8d8d 100644
--- a/client/src/ee/pages/embedded/integration-instance-configurations/components/IntegrationInstanceConfigurationsFilterTitle.tsx
+++ b/client/src/ee/pages/embedded/integration-instance-configurations/components/IntegrationInstanceConfigurationsFilterTitle.tsx
@@ -1,4 +1,4 @@
-import {Badge} from '@/components/ui/badge';
+import Badge from '@/components/Badge/Badge';
 import {Type} from '@/ee/pages/embedded/integration-instance-configurations/IntegrationInstanceConfigurations';
 import {Integration, Tag} from '@/ee/shared/middleware/embedded/configuration';
 import {ReactNode} from 'react';
@@ -31,7 +31,7 @@ const IntegrationInstanceConfigurationsFilterTitle = ({
                 {searchParams.get('tagId') ? 'tag' : 'integration'}:
             </span>
 
-            <Badge variant="secondary">
+            <Badge styleType="secondary-filled" weight="semibold">
                 <span className="text-sm">{pageTitle ?? 'All Integrations'}</span>
             </Badge>
         </div>
diff --git a/client/src/ee/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationListItem.tsx b/client/src/ee/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationListItem.tsx
index 1f89b356c33..b598a85a237 100644
--- a/client/src/ee/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationListItem.tsx
+++ b/client/src/ee/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationListItem.tsx
@@ -1,5 +1,5 @@
+import Badge from '@/components/Badge/Badge';
 import LoadingIcon from '@/components/LoadingIcon';
-import {Badge} from '@/components/ui/badge';
 import {CollapsibleTrigger} from '@/components/ui/collapsible';
 import {Switch} from '@/components/ui/switch';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
@@ -162,11 +162,11 @@ const IntegrationInstanceConfigurationListItem = ({
                     <div className="flex items-center justify-end gap-x-6">
                         <Tooltip>
                             <TooltipTrigger asChild>
-                                <Badge variant="secondary">
-                                    <Badge variant="secondary">
-                                        V{integrationInstanceConfiguration.integrationVersion}
-                                    </Badge>
-                                </Badge>
+                                <Badge
+                                    label={`V${integrationInstanceConfiguration.integrationVersion}`}
+                                    styleType="secondary-filled"
+                                    weight="semibold"
+                                />
                             </TooltipTrigger>
 
                             <TooltipContent>The integration version</TooltipContent>
diff --git a/client/src/ee/pages/embedded/integration/components/IntegrationVersionHistorySheet.tsx b/client/src/ee/pages/embedded/integration/components/IntegrationVersionHistorySheet.tsx
index 143a1a99a49..61225b696e8 100644
--- a/client/src/ee/pages/embedded/integration/components/IntegrationVersionHistorySheet.tsx
+++ b/client/src/ee/pages/embedded/integration/components/IntegrationVersionHistorySheet.tsx
@@ -1,5 +1,5 @@
+import Badge from '@/components/Badge/Badge';
 import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from '@/components/ui/accordion';
-import {Badge} from '@/components/ui/badge';
 import {Sheet, SheetCloseButton, SheetContent, SheetHeader, SheetTitle} from '@/components/ui/sheet';
 import {IntegrationStatus} from '@/ee/shared/middleware/embedded/configuration';
 import {useGetIntegrationVersionsQuery} from '@/ee/shared/queries/embedded/integrationVersions.queries';
@@ -51,14 +51,14 @@ const IntegrationVersionHistorySheet = ({integrationId, onClose}: IntegrationVer
                                                 )}
 
                                                 <Badge
-                                                    variant={
+                                                    label={integrationVersion.status ?? ''}
+                                                    styleType={
                                                         integrationVersion.status === IntegrationStatus.Published
-                                                            ? 'success'
-                                                            : 'secondary'
+                                                            ? 'success-outline'
+                                                            : 'secondary-filled'
                                                     }
-                                                >
-                                                    {integrationVersion.status}
-                                                </Badge>
+                                                    weight="semibold"
+                                                />
                                             </div>
                                         </div>
                                     </AccordionTrigger>
diff --git a/client/src/ee/pages/embedded/integration/components/integration-header/IntegrationHeaderTitle.tsx b/client/src/ee/pages/embedded/integration/components/integration-header/IntegrationHeaderTitle.tsx
index 79c97687f2e..bda304c389b 100644
--- a/client/src/ee/pages/embedded/integration/components/integration-header/IntegrationHeaderTitle.tsx
+++ b/client/src/ee/pages/embedded/integration/components/integration-header/IntegrationHeaderTitle.tsx
@@ -1,4 +1,4 @@
-import {Badge} from '@/components/ui/badge';
+import Badge from '@/components/Badge/Badge';
 import {Button} from '@/components/ui/button';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
 import useIntegrationsLeftSidebarStore from '@/ee/pages/embedded/integration/stores/useIntegrationsLeftSidebarStore';
@@ -37,7 +37,7 @@ const IntegrationHeaderTitle = ({integration}: {integration: Integration}) => {
             <h1>{integration?.name}</h1>
 
             {integration && (
-                <Badge className="flex space-x-1" variant="secondary">
+                <Badge className="flex space-x-1" styleType="secondary-filled" weight="semibold">
                     <span>V{integration.lastIntegrationVersion}</span>
 
                     <span>{integration.lastStatus}</span>
diff --git a/client/src/ee/pages/embedded/integration/components/integrations-sidebar/IntegrationsSidebar.tsx b/client/src/ee/pages/embedded/integration/components/integrations-sidebar/IntegrationsSidebar.tsx
index 3c3ac5886ed..932a553a93f 100644
--- a/client/src/ee/pages/embedded/integration/components/integrations-sidebar/IntegrationsSidebar.tsx
+++ b/client/src/ee/pages/embedded/integration/components/integrations-sidebar/IntegrationsSidebar.tsx
@@ -1,4 +1,4 @@
-import {Badge} from '@/components/ui/badge';
+import Badge from '@/components/Badge/Badge';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
 import {useGetIntegrationsQuery} from '@/ee/shared/queries/embedded/integrations.queries';
 import * as React from 'react';
@@ -62,13 +62,13 @@ const IntegrationsSidebar = ({integrationId}: {integrationId: number}) => {
                             </div>
 
                             {curIntegration.lastPublishedDate && curIntegration.lastIntegrationVersion ? (
-                                <Badge className="flex space-x-1" variant="success">
+                                <Badge className="flex space-x-1" styleType="success-outline" weight="semibold">
                                     <span>V{curIntegration.lastIntegrationVersion - 1}</span>
 
                                     <span>PUBLISHED</span>
                                 </Badge>
                             ) : (
-                                <Badge className="flex space-x-1" variant="outline">
+                                <Badge className="flex space-x-1" styleType="secondary-filled" weight="semibold">
                                     <span>V{curIntegration.lastIntegrationVersion}</span>
 
                                     <span>{curIntegration.lastStatus}</span>
diff --git a/client/src/ee/pages/embedded/integrations/components/IntegrationsFilterTitle.tsx b/client/src/ee/pages/embedded/integrations/components/IntegrationsFilterTitle.tsx
index a98af8c1b40..a7885fc323c 100644
--- a/client/src/ee/pages/embedded/integrations/components/IntegrationsFilterTitle.tsx
+++ b/client/src/ee/pages/embedded/integrations/components/IntegrationsFilterTitle.tsx
@@ -1,4 +1,4 @@
-import {Badge} from '@/components/ui/badge';
+import Badge from '@/components/Badge/Badge';
 import {Type} from '@/ee/pages/embedded/integrations/Integrations';
 import {Category, Tag} from '@/ee/shared/middleware/embedded/configuration';
 import {ReactNode} from 'react';
@@ -27,9 +27,11 @@ const IntegrationsFilterTitle = ({
         <div className="space-x-1">
             <span className="text-sm uppercase text-muted-foreground">{`Filter by ${searchParams.get('tagId') ? 'tag' : 'category'}:`}</span>
 
-            <Badge variant="secondary">
-                <span className="text-sm">{pageTitle ?? 'All Categories'}</span>
-            </Badge>
+            <Badge
+                label={typeof pageTitle === 'string' ? pageTitle : 'All Categories'}
+                styleType="secondary-filled"
+                weight="semibold"
+            />
         </div>
     );
 };
diff --git a/client/src/ee/pages/embedded/integrations/components/integration-list/IntegrationListItem.tsx b/client/src/ee/pages/embedded/integrations/components/integration-list/IntegrationListItem.tsx
index 173d9eb9fcf..7fa6c11b23a 100644
--- a/client/src/ee/pages/embedded/integrations/components/integration-list/IntegrationListItem.tsx
+++ b/client/src/ee/pages/embedded/integrations/components/integration-list/IntegrationListItem.tsx
@@ -1,4 +1,5 @@
 import '@/shared/styles/dropdownMenu.css';
+import Badge from '@/components/Badge/Badge';
 import Button from '@/components/Button/Button';
 import {
     AlertDialog,
@@ -10,7 +11,6 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Badge} from '@/components/ui/badge';
 import {CollapsibleTrigger} from '@/components/ui/collapsible';
 import {
     DropdownMenu,
@@ -213,13 +213,13 @@ const IntegrationListItem = ({integration, remainingTags}: IntegrationItemProps)
                         {integration.lastIntegrationVersion && (
                             <div className="flex flex-col items-end gap-y-4">
                                 {integration.lastPublishedDate && integration.lastIntegrationVersion ? (
-                                    <Badge className="flex space-x-1" variant="success">
+                                    <Badge className="flex space-x-1" styleType="success-outline" weight="semibold">
                                         <span>V{integration.lastIntegrationVersion - 1}</span>
 
                                         <span>PUBLISHED</span>
                                     </Badge>
                                 ) : (
-                                    <Badge className="flex space-x-1" variant="secondary">
+                                    <Badge className="flex space-x-1" styleType="secondary-filled" weight="semibold">
                                         <span>V{integration.lastIntegrationVersion}</span>
 
                                         <span>{integration.lastStatus}</span>