diff --git a/packages/web/app/src/components/ui/badge.tsx b/packages/web/app/src/components/ui/badge.tsx
index 8ba082ce6..9a96c6fae 100644
--- a/packages/web/app/src/components/ui/badge.tsx
+++ b/packages/web/app/src/components/ui/badge.tsx
@@ -29,4 +29,32 @@ function Badge({ className, variant, ...props }: BadgeProps) {
   return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
-export { Badge, badgeVariants };
+const badgeRoundedVariants = cva(
+  'inline-block rounded-full mx-1 border-[3px] p-[3px] align-middle text-xs font-bold leading-none text-white',
+  {
+    variants: {
+      color: {
+        red: 'border-red-900 bg-red-500',
+        yellow: 'border-yellow-900 bg-yellow-500',
+        green: 'border-green-900 bg-green-500',
+        gray: 'border-gray-900 bg-gray-500',
+        orange: 'border-orange-900 bg-orange-500',
+      },
+    },
+    defaultVariants: {
+      color: 'green',
+    },
+  },
+);
+
+export interface BadgeRoundedProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeRoundedVariants> {
+  color: 'red' | 'yellow' | 'green' | 'gray' | 'orange';
+}
+
+function BadgeRounded({ className, color, ...props }: BadgeRoundedProps) {
+  return <div className={cn(badgeRoundedVariants({ color }), className)} {...props} />;
+}
+
+export { Badge, BadgeRounded, badgeRoundedVariants, badgeVariants };
diff --git a/packages/web/app/src/components/v2/badge.tsx b/packages/web/app/src/components/v2/badge.tsx
deleted file mode 100644
index 08ce90ffc..000000000
--- a/packages/web/app/src/components/v2/badge.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import clsx from 'clsx';
-
-export const Badge = ({
-  children,
-  color = 'gray',
-  ...props
-}: {
-  children?: ReactNode;
-  color?: 'red' | 'yellow' | 'green' | 'gray' | 'orange';
-}): ReactElement => {
-  return (
-    <span
-      className={clsx(
-        'inline-block rounded-full border-[3px] p-[3px] align-middle text-xs font-bold leading-none text-white',
-        {
-          red: 'border-red-900 bg-red-500',
-          yellow: 'border-yellow-900 bg-yellow-500',
-          green: 'border-green-900 bg-green-500',
-          gray: 'border-gray-900 bg-gray-500',
-          orange: 'border-orange-900 bg-orange-500',
-          // TODO: add variants and uncomment https://javisperez.github.io/tailwindcolorshades/?jumbo=7f818c&alizarin-crimson=ed2e39
-          // cyan: 'bg-cyan-500 border-cyan-900',
-          // purple: 'border-purple-900 bg-purple-500',
-          // blue: 'border-blue-900 bg-blue-500',
-          // magenta: 'bg-magenta-500 border-magenta-900',
-        }[color],
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-};
diff --git a/packages/web/app/src/pages/target-checks.tsx b/packages/web/app/src/pages/target-checks.tsx
index 74495b67a..d1d0e46b3 100644
--- a/packages/web/app/src/pages/target-checks.tsx
+++ b/packages/web/app/src/pages/target-checks.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useQuery } from 'urql';
 import { Page, TargetLayout } from '@/components/layouts/target';
+import { BadgeRounded } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { DocsLink } from '@/components/ui/docs-note';
 import { EmptyList } from '@/components/ui/empty-list';
@@ -10,7 +11,6 @@ import { Subtitle, Title } from '@/components/ui/page';
 import { QueryError } from '@/components/ui/query-error';
 import { Switch } from '@/components/ui/switch';
 import { TimeAgo } from '@/components/ui/time-ago';
-import { Badge } from '@/components/v2/badge';
 import { graphql } from '@/gql';
 import { cn } from '@/lib/utils';
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
@@ -123,9 +123,12 @@ const Navigation = (props: {
                   <div
                     className={cn(
                       edge.node.__typename === 'FailedSchemaCheck' ? 'text-red-500' : null,
+                      'flex flex-row items-center gap-1',
                     )}
                   >
-                    <Badge color={edge.node.__typename === 'FailedSchemaCheck' ? 'red' : 'green'} />{' '}
+                    <BadgeRounded
+                      color={edge.node.__typename === 'FailedSchemaCheck' ? 'red' : 'green'}
+                    />
                     <TimeAgo date={edge.node.createdAt} />
                   </div>
 
diff --git a/packages/web/app/src/pages/target-history.tsx b/packages/web/app/src/pages/target-history.tsx
index f30620efb..9d393a1a5 100644
--- a/packages/web/app/src/pages/target-history.tsx
+++ b/packages/web/app/src/pages/target-history.tsx
@@ -1,13 +1,13 @@
 import { ReactElement, useEffect, useState } from 'react';
 import { useQuery } from 'urql';
 import { Page, TargetLayout } from '@/components/layouts/target';
+import { BadgeRounded } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { noSchemaVersion } from '@/components/ui/empty-list';
 import { Meta } from '@/components/ui/meta';
 import { Subtitle, Title } from '@/components/ui/page';
 import { QueryError } from '@/components/ui/query-error';
 import { TimeAgo } from '@/components/ui/time-ago';
-import { Badge } from '@/components/v2/badge';
 import { graphql } from '@/gql';
 import { cn } from '@/lib/utils';
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
@@ -114,8 +114,10 @@ function ListPage(props: {
               </div>
             ) : null}
             <div className="mb-1.5 mt-2.5 flex align-middle text-xs font-medium text-[#c4c4c4]">
-              <div className={cn(!version.valid && 'text-red-500')}>
-                <Badge color={version.valid ? 'green' : 'red'} /> Published{' '}
+              <div
+                className={cn(!version.valid && 'text-red-500', 'flex flex-row items-center gap-1')}
+              >
+                <BadgeRounded color={version.valid ? 'green' : 'red'} /> Published
                 <TimeAgo date={version.date} />
               </div>
 
diff --git a/packages/web/app/src/stories/badge.stories.tsx b/packages/web/app/src/stories/badge.stories.tsx
new file mode 100644
index 000000000..11d6ffbd5
--- /dev/null
+++ b/packages/web/app/src/stories/badge.stories.tsx
@@ -0,0 +1,107 @@
+import {
+  Badge,
+  BadgeProps,
+  BadgeRounded,
+  BadgeRoundedProps,
+  badgeRoundedVariants,
+  badgeVariants,
+} from '@/components/ui/badge';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Components/Badge',
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: Object.keys(badgeVariants({ variant: 'default' })),
+    },
+    color: {
+      control: { type: 'select' },
+      options: Object.keys(badgeRoundedVariants({ color: 'green' })),
+    },
+  },
+};
+
+export default meta;
+
+// Badge Stories
+const BadgeTemplate = (args: BadgeProps) => <Badge {...args} />;
+
+export const DefaultBadge: StoryObj<typeof Badge> = {
+  name: 'Default Badge',
+  render: BadgeTemplate,
+  args: {
+    variant: 'default',
+    children: 'Default Badge',
+  },
+};
+
+export const SecondaryBadge: StoryObj<typeof Badge> = {
+  name: 'Secondary Badge',
+  render: BadgeTemplate,
+  args: {
+    variant: 'secondary',
+    children: 'Secondary Badge',
+  },
+};
+
+export const DestructiveBadge: StoryObj<typeof Badge> = {
+  name: 'Destructive Badge',
+  render: BadgeTemplate,
+  args: {
+    variant: 'destructive',
+    children: 'Destructive Badge',
+  },
+};
+
+export const OutlineBadge: StoryObj<typeof Badge> = {
+  name: 'Outline Badge',
+  render: BadgeTemplate,
+  args: {
+    variant: 'outline',
+    children: 'Outline Badge',
+  },
+};
+
+// BadgeRounded Stories
+const BadgeRoundedTemplate = (args: BadgeRoundedProps) => <BadgeRounded {...args} />;
+
+export const RedBadgeRounded: StoryObj<typeof BadgeRounded> = {
+  name: 'Red BadgeRounded',
+  render: BadgeRoundedTemplate,
+  args: {
+    color: 'red',
+  },
+};
+
+export const YellowBadgeRounded: StoryObj<typeof BadgeRounded> = {
+  name: 'Yellow BadgeRounded',
+  render: BadgeRoundedTemplate,
+  args: {
+    color: 'yellow',
+  },
+};
+
+export const GreenBadgeRounded: StoryObj<typeof BadgeRounded> = {
+  name: 'Green BadgeRounded',
+  render: BadgeRoundedTemplate,
+  args: {
+    color: 'green',
+  },
+};
+
+export const GrayBadgeRounded: StoryObj<typeof BadgeRounded> = {
+  name: 'Gray BadgeRounded',
+  render: BadgeRoundedTemplate,
+  args: {
+    color: 'gray',
+  },
+};
+
+export const OrangeBadgeRounded: StoryObj<typeof BadgeRounded> = {
+  name: 'Orange BadgeRounded',
+  render: BadgeRoundedTemplate,
+  args: {
+    color: 'orange',
+  },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 228532683..c30a15438 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17531,10 +17531,10 @@ snapshots:
       '@aws-crypto/sha1-browser': 5.2.0
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/client-sso-oidc': 3.600.0(@aws-sdk/client-sts@3.600.0)
-      '@aws-sdk/client-sts': 3.600.0
+      '@aws-sdk/client-sso-oidc': 3.600.0
+      '@aws-sdk/client-sts': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)
       '@aws-sdk/core': 3.598.0
-      '@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)
+      '@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))
       '@aws-sdk/middleware-bucket-endpoint': 3.598.0
       '@aws-sdk/middleware-expect-continue': 3.598.0
       '@aws-sdk/middleware-flexible-checksums': 3.598.0
@@ -17634,13 +17634,13 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sso-oidc@3.600.0(@aws-sdk/client-sts@3.600.0)':
+  '@aws-sdk/client-sso-oidc@3.600.0':
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/client-sts': 3.600.0
+      '@aws-sdk/client-sts': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)
       '@aws-sdk/core': 3.598.0
-      '@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)
+      '@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))
       '@aws-sdk/middleware-host-header': 3.598.0
       '@aws-sdk/middleware-logger': 3.598.0
       '@aws-sdk/middleware-recursion-detection': 3.598.0
@@ -17677,7 +17677,6 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.6.3
     transitivePeerDependencies:
-      - '@aws-sdk/client-sts'
       - aws-crt
 
   '@aws-sdk/client-sso@3.592.0':
@@ -17812,13 +17811,13 @@ snapshots:
       - '@aws-sdk/client-sso-oidc'
       - aws-crt
 
-  '@aws-sdk/client-sts@3.600.0':
+  '@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0)':
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/client-sso-oidc': 3.600.0(@aws-sdk/client-sts@3.600.0)
+      '@aws-sdk/client-sso-oidc': 3.600.0
       '@aws-sdk/core': 3.598.0
-      '@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)
+      '@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))
       '@aws-sdk/middleware-host-header': 3.598.0
       '@aws-sdk/middleware-logger': 3.598.0
       '@aws-sdk/middleware-recursion-detection': 3.598.0
@@ -17855,6 +17854,7 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.6.3
     transitivePeerDependencies:
+      - '@aws-sdk/client-sso-oidc'
       - aws-crt
 
   '@aws-sdk/core@3.592.0':
@@ -17933,9 +17933,9 @@ snapshots:
       - '@aws-sdk/client-sso-oidc'
       - aws-crt
 
-  '@aws-sdk/credential-provider-ini@3.598.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)':
+  '@aws-sdk/credential-provider-ini@3.598.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))':
     dependencies:
-      '@aws-sdk/client-sts': 3.600.0
+      '@aws-sdk/client-sts': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)
       '@aws-sdk/credential-provider-env': 3.598.0
       '@aws-sdk/credential-provider-http': 3.598.0
       '@aws-sdk/credential-provider-process': 3.598.0
@@ -17970,11 +17970,11 @@ snapshots:
       - '@aws-sdk/client-sts'
       - aws-crt
 
-  '@aws-sdk/credential-provider-node@3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)':
+  '@aws-sdk/credential-provider-node@3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))':
     dependencies:
       '@aws-sdk/credential-provider-env': 3.598.0
       '@aws-sdk/credential-provider-http': 3.598.0
-      '@aws-sdk/credential-provider-ini': 3.598.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)
+      '@aws-sdk/credential-provider-ini': 3.598.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))
       '@aws-sdk/credential-provider-process': 3.598.0
       '@aws-sdk/credential-provider-sso': 3.598.0(@aws-sdk/client-sso-oidc@3.600.0)
       '@aws-sdk/credential-provider-web-identity': 3.598.0(@aws-sdk/client-sts@3.600.0)
@@ -18041,7 +18041,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-web-identity@3.598.0(@aws-sdk/client-sts@3.600.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.600.0
+      '@aws-sdk/client-sts': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)
       '@aws-sdk/types': 3.598.0
       '@smithy/property-provider': 3.1.2
       '@smithy/types': 3.2.0
@@ -18214,7 +18214,7 @@ snapshots:
 
   '@aws-sdk/token-providers@3.598.0(@aws-sdk/client-sso-oidc@3.600.0)':
     dependencies:
-      '@aws-sdk/client-sso-oidc': 3.600.0(@aws-sdk/client-sts@3.600.0)
+      '@aws-sdk/client-sso-oidc': 3.600.0
       '@aws-sdk/types': 3.598.0
       '@smithy/property-provider': 3.1.2
       '@smithy/shared-ini-file-loader': 3.1.2