diff --git a/client/src/pages/automation/project-deployments/components/ProjectDeploymentFilterTitle.tsx b/client/src/pages/automation/project-deployments/components/ProjectDeploymentFilterTitle.tsx
index a7929d87a33..e8d4f3f1feb 100644
--- a/client/src/pages/automation/project-deployments/components/ProjectDeploymentFilterTitle.tsx
+++ b/client/src/pages/automation/project-deployments/components/ProjectDeploymentFilterTitle.tsx
@@ -1,4 +1,4 @@
-import {Badge} from '@/components/ui/badge';
+import Badge from '@/components/Badge/Badge';
 import {Type} from '@/pages/automation/project-deployments/ProjectDeployments';
 import {Project, Tag} from '@/shared/middleware/automation/configuration';
 import {ReactNode} from 'react';
@@ -32,9 +32,7 @@ const ProjectDeploymentFilterTitle = ({
                 {searchParams.get('tagId') ? 'tag' : 'project'}:
             </span>
 
-            <Badge variant="secondary">
-                <span className="text-sm">{pageTitle ?? 'All Projects'}</span>
-            </Badge>
+            <Badge label={`${pageTitle ?? 'All Projects'}`} styleType="secondary-filled" weight="semibold" />
         </div>
     );
 };
diff --git a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
index c6ff710d7d5..54c391e492a 100644
--- a/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.tsx
+++ b/client/src/pages/automation/project-deployments/components/project-deployment-list/ProjectDeploymentListItem.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';
@@ -143,7 +143,11 @@ const ProjectDeploymentListItem = ({projectDeployment, remainingTags}: ProjectDe
                     <div className="flex items-center justify-end gap-x-6">
                         <Tooltip>
                             <TooltipTrigger asChild>
-                                <Badge variant="secondary">V{projectDeployment.projectVersion}</Badge>
+                                <Badge
+                                    label={`V${projectDeployment.projectVersion}`}
+                                    styleType="secondary-filled"
+                                    weight="semibold"
+                                />
                             </TooltipTrigger>
 
                             <TooltipContent>The project version</TooltipContent>
diff --git a/client/src/pages/automation/project/components/ProjectVersionHistorySheet.tsx b/client/src/pages/automation/project/components/ProjectVersionHistorySheet.tsx
index f776878a10c..a81ab97183f 100644
--- a/client/src/pages/automation/project/components/ProjectVersionHistorySheet.tsx
+++ b/client/src/pages/automation/project/components/ProjectVersionHistorySheet.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 {ProjectStatus, ProjectVersion} from '@/shared/middleware/automation/configuration';
 
@@ -51,16 +51,18 @@ const ProjectVersionHistorySheet = ({
                                                     )}
 
                                                     <Badge
-                                                        variant={
+                                                        label={
                                                             projectVersion.status === ProjectStatus.Published
-                                                                ? 'success'
-                                                                : 'secondary'
+                                                                ? 'Published'
+                                                                : 'Draft'
                                                         }
-                                                    >
-                                                        {projectVersion.status === ProjectStatus.Published
-                                                            ? `Published`
-                                                            : 'Draft'}
-                                                    </Badge>
+                                                        styleType={
+                                                            projectVersion.status === ProjectStatus.Published
+                                                                ? 'success-outline'
+                                                                : 'secondary-filled'
+                                                        }
+                                                        weight="semibold"
+                                                    />
                                                 </div>
                                             </div>
                                         </AccordionTrigger>
diff --git a/client/src/pages/automation/project/components/project-header/components/ProjectTitle.tsx b/client/src/pages/automation/project/components/project-header/components/ProjectTitle.tsx
index d7822850376..c0c8df34e0f 100644
--- a/client/src/pages/automation/project/components/project-header/components/ProjectTitle.tsx
+++ b/client/src/pages/automation/project/components/project-header/components/ProjectTitle.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 {Project, ProjectStatus} from '@/shared/middleware/automation/configuration';
 
@@ -13,8 +13,11 @@ const ProjectTitle = ({project}: {project: Project}) => {
 
                     {project && (
                         <Badge
-                            className="flex space-x-1 bg-white"
-                            variant={project.lastStatus === ProjectStatus.Published ? 'success' : 'outline'}
+                            className="flex space-x-1 bg-surface-neutral-primary"
+                            styleType={
+                                project.lastStatus === ProjectStatus.Published ? 'success-outline' : 'outline-outline'
+                            }
+                            weight="semibold"
                         >
                             <span>V{project.lastProjectVersion}</span>
 
diff --git a/client/src/pages/automation/project/components/projects-sidebar/components/ProjectWorkflowsList.tsx b/client/src/pages/automation/project/components/projects-sidebar/components/ProjectWorkflowsList.tsx
index d15a2b4040a..19aedb461ba 100644
--- a/client/src/pages/automation/project/components/projects-sidebar/components/ProjectWorkflowsList.tsx
+++ b/client/src/pages/automation/project/components/projects-sidebar/components/ProjectWorkflowsList.tsx
@@ -1,4 +1,4 @@
-import {Badge} from '@/components/ui/badge';
+import Badge from '@/components/Badge/Badge';
 import {Separator} from '@/components/ui/separator';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
 import WorkflowsListItem from '@/pages/automation/project/components/projects-sidebar/components/WorkflowsListItem';
@@ -53,7 +53,7 @@ const ProjectWorkflowsList = ({
                     </Tooltip>
 
                     {project.lastPublishedDate && project.lastProjectVersion ? (
-                        <Badge className="flex space-x-1" variant="success">
+                        <Badge className="flex space-x-1" styleType="success-outline" weight="semibold">
                             <span>V{project.lastProjectVersion - 1}</span>
 
                             <span>PUBLISHED</span>
@@ -61,7 +61,8 @@ const ProjectWorkflowsList = ({
                     ) : (
                         <Badge
                             className="flex space-x-1 bg-surface-neutral-secondary text-content-neutral-primary"
-                            variant="secondary"
+                            styleType="secondary-filled"
+                            weight="semibold"
                         >
                             <span>V{project.lastProjectVersion}</span>
 
diff --git a/client/src/pages/automation/projects/components/ProjectsFilterTitle.tsx b/client/src/pages/automation/projects/components/ProjectsFilterTitle.tsx
index 3ffc793ed58..392020a2466 100644
--- a/client/src/pages/automation/projects/components/ProjectsFilterTitle.tsx
+++ b/client/src/pages/automation/projects/components/ProjectsFilterTitle.tsx
@@ -1,4 +1,4 @@
-import {Badge} from '@/components/ui/badge';
+import Badge from '@/components/Badge/Badge';
 import {Type} from '@/pages/automation/projects/Projects';
 import {Category, Tag} from '@/shared/middleware/automation/configuration';
 import {ReactNode} from 'react';
@@ -27,9 +27,7 @@ const ProjectsFilterTitle = ({
         <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={`${pageTitle ?? 'All Categories'}`} styleType="secondary-filled" weight="semibold" />
         </div>
     );
 };
diff --git a/client/src/pages/automation/projects/components/project-list/ProjectListItem.tsx b/client/src/pages/automation/projects/components/project-list/ProjectListItem.tsx
index 72ec3f82748..bbf5b67c2e9 100644
--- a/client/src/pages/automation/projects/components/project-list/ProjectListItem.tsx
+++ b/client/src/pages/automation/projects/components/project-list/ProjectListItem.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 {ButtonGroup} from '@/components/ui/button-group';
 import {CollapsibleTrigger} from '@/components/ui/collapsible';
 import {
@@ -342,7 +342,7 @@ const ProjectListItem = ({project, projectGitConfiguration, remainingTags}: Proj
                             <div className="flex items-center space-x-2">
                                 {project.lastPublishedDate && project.lastProjectVersion ? (
                                     <>
-                                        <Badge className="flex space-x-1" variant="success">
+                                        <Badge className="flex space-x-1" styleType="success-outline" weight="semibold">
                                             <span>V{project.lastProjectVersion - 1}</span>
 
                                             <span>PUBLISHED</span>
@@ -365,7 +365,7 @@ const ProjectListItem = ({project, projectGitConfiguration, remainingTags}: Proj
                                         {/*/>*/}
                                     </>
                                 ) : (
-                                    <Badge className="flex space-x-1" variant="secondary">
+                                    <Badge className="flex space-x-1" styleType="secondary-filled" weight="semibold">
                                         <span>V{project.lastProjectVersion}</span>
 
                                         <span>{project.lastStatus}</span>