diff --git a/src/primitives/Badge/StatusBadge.stories.tsx b/src/primitives/Badge/StatusBadge.stories.tsx
deleted file mode 100644
index 002e61b..0000000
--- a/src/primitives/Badge/StatusBadge.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, within } from "@storybook/test";
-
-import { StatusBadge } from "./StatusBadge";
-
-const meta: Meta<typeof StatusBadge> = {
-  title: "Primitives/StatusBadge",
-
-  component: StatusBadge,
-};
-
-export default meta;
-type Story = StoryObj<typeof StatusBadge>;
-
-export const InProgress: Story = {
-  args: {
-    status: "In Progress",
-  },
-};
-
-export const Ended: Story = {
-  args: {
-    status: "Ended",
-  },
-};
diff --git a/src/primitives/Badge/StatusBadge.tsx b/src/primitives/Badge/StatusBadge.tsx
deleted file mode 100644
index 064b26d..0000000
--- a/src/primitives/Badge/StatusBadge.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-type Status = "In Progress" | "Ended" | "default" | undefined | null;
-
-interface StatusBadgeProps {
-  status: Status;
-}
-
-export const StatusBadge = ({ status = "default" }: StatusBadgeProps) => {
-  return <Badge variant={status?.replace(" ", "") as Status}>{status} </Badge>;
-};
-
-const badgeVariants = cva(
-  "ui-inline-flex ui-items-center ui-rounded-full ui-border ui-px-2.5  ui-py-0.5 ui-font-sans ui-text-xs ui-font-semibold ",
-  // ui-border-neutral-200 ui-transition-colors focus:ui-outline-none focus:ui-ring-2 focus:ui-ring-neutral-950 focus:ui-ring-offset-2 dark:ui-border-neutral-800 dark:focus:ui-ring-neutral-300
-  {
-    variants: {
-      variant: {
-        default:
-          "ui-border-transparent ui-bg-neutral-900 ui-text-neutral-50 hover:ui-bg-neutral-900/80 dark:ui-bg-neutral-50 dark:ui-text-neutral-900 dark:hover:ui-bg-neutral-50/80",
-        // secondary:
-        //   "ui-border-transparent ui-bg-neutral-100 ui-text-neutral-900 hover:ui-bg-neutral-100/80 dark:ui-bg-neutral-800 dark:ui-text-neutral-50 dark:hover:ui-bg-neutral-800/80",
-        // destructive:
-        //   "ui-border-transparent ui-bg-red-500 ui-text-neutral-50 hover:ui-bg-red-500/80 dark:ui-bg-red-900 dark:ui-text-neutral-50 dark:hover:ui-bg-red-900/80",
-        // outline: "ui-text-neutral-950 dark:ui-text-neutral-50",
-
-        "In Progress": "ui-border-red-800",
-        Ended: "ui-border-blue-800",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };
diff --git a/src/primitives/StatusBadge/StatusBadge.mdx b/src/primitives/StatusBadge/StatusBadge.mdx
new file mode 100644
index 0000000..523f2e9
--- /dev/null
+++ b/src/primitives/StatusBadge/StatusBadge.mdx
@@ -0,0 +1,23 @@
+import { Meta, Title, Primary, Stories, Controls, Story } from "@storybook/blocks";
+import * as StatusBadgeStories from "./StatusBadge.stories";
+import { StatusBadge } from "./StatusBadge";
+
+# StatusBadge
+
+<Meta of={StatusBadgeStories} />
+
+The StatusBadge component renders a Status in a Badge.
+
+# Example
+
+## Default
+
+<Story of={StatusBadgeStories.Default} />
+
+# Controls
+
+<Controls />
+
+# Other variations
+
+<Stories />
diff --git a/src/primitives/StatusBadge/StatusBadge.stories.tsx b/src/primitives/StatusBadge/StatusBadge.stories.tsx
new file mode 100644
index 0000000..935e800
--- /dev/null
+++ b/src/primitives/StatusBadge/StatusBadge.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, within } from "@storybook/test";
+
+import { Status, StatusBadge } from "./StatusBadge";
+
+const meta: Meta<typeof StatusBadge> = {
+  title: "Primitives/StatusBadge",
+  args: {
+    status: Status.INPROGRESS,
+  },
+  argTypes: {
+    status: {
+      control: "select",
+      options: Object.values(Status),
+    },
+  },
+
+  component: StatusBadge,
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusBadge>;
+
+export const Default: Story = {};
+
+export const Ended: Story = {
+  args: {
+    status: Status.ENDED,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    status: Status.HIDDEN,
+  },
+};
+
+// export const AsString: Story = {
+//   args: {
+//     status: "Active"
+//   },
+// };
diff --git a/src/primitives/StatusBadge/StatusBadge.tsx b/src/primitives/StatusBadge/StatusBadge.tsx
new file mode 100644
index 0000000..250b47e
--- /dev/null
+++ b/src/primitives/StatusBadge/StatusBadge.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { match, P } from "ts-pattern";
+
+export enum Status {
+  INPROGRESS = "Active",
+  ENDED = "Ended",
+  HIDDEN = "Hidden",
+}
+
+interface StatusBadgeProps {
+  status: `${Status}`;
+}
+
+const statusMap = {
+  [Status.INPROGRESS]: {
+    variant: "InProgress" as const,
+    display: "In Progress",
+  },
+  [Status.ENDED]: {
+    variant: "Ended" as const,
+    display: "Ended",
+  },
+  [Status.HIDDEN]: {
+    variant: "Hidden" as const,
+    display: "",
+  },
+};
+
+const badgeVariants = cva(
+  "ui-inline-flex ui-items-center ui-rounded-full ui-border ui-font-sans ui-text-xs ui-font-semibold ",
+  {
+    variants: {
+      variant: {
+        InProgress: "ui-bg-blue-100 ui-px-2.5  ui-py-0.5",
+        Ended: "ui-bg-orange-100 ui-px-2.5  ui-py-0.5",
+        Hidden: "ui-hidden",
+      },
+    },
+  },
+);
+
+export const StatusBadge = ({ status }: StatusBadgeProps) => {
+  const key: Status = match({ status })
+    .with({ status: "Active" }, () => Status.INPROGRESS)
+    .with({ status: "In Progress" }, () => Status.INPROGRESS)
+    .with({ status: "Ended" }, () => Status.ENDED)
+    .otherwise(() => Status.HIDDEN);
+
+  const { variant, display } = statusMap[key];
+
+  return <Badge variant={variant}>{display} </Badge>;
+};
+
+interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
diff --git a/src/tokens/colors.ts b/src/tokens/colors.ts
index be6f5fa..7872a8f 100644
--- a/src/tokens/colors.ts
+++ b/src/tokens/colors.ts
@@ -1,11 +1,17 @@
 import { Colors } from "./types";
 
 export const colors: Colors = {
-  grey: {
+  "ui-grey": {
     "50": "#f7f7f7",
     "400": "#555555",
     "500": "#000000",
   },
-  white: "#ffffff",
-  black: "#000000",
+  "ui-blue": {
+    "100": "#D3EDFE",
+  },
+  "ui-orange": {
+    "100": "#FFD9CD",
+  },
+  "ui-white": "#ffffff",
+  "ui-black": "#000000",
 };