diff --git a/src/features/project/components/ProjectCard.tsx b/src/features/project/components/ProjectCard.tsx
index 873ddda..8be4091 100644
--- a/src/features/project/components/ProjectCard.tsx
+++ b/src/features/project/components/ProjectCard.tsx
@@ -4,8 +4,8 @@ import { match, P } from "ts-pattern";
 import { UseQueryResult } from "@tanstack/react-query";
 
 import { Project } from "@/features/project/types/types";
-import { BannerImage } from "@/primitives/BannerImage";
-import { Avatar } from "@/primitives/Avatar";
+import { BannerImage } from "@/primitives/BannerImage/BannerImage";
+import { Avatar } from "@/primitives/Avatar/Avatar";
 import { Skeleton } from "@/ui-shadcn/skeleton";
 
 interface ProjectCardProps {
diff --git a/src/primitives/Avatar.mdx b/src/primitives/Avatar/Avatar.mdx
similarity index 100%
rename from src/primitives/Avatar.mdx
rename to src/primitives/Avatar/Avatar.mdx
diff --git a/src/primitives/Avatar.stories.tsx b/src/primitives/Avatar/Avatar.stories.tsx
similarity index 98%
rename from src/primitives/Avatar.stories.tsx
rename to src/primitives/Avatar/Avatar.stories.tsx
index 9c0c62e..cc81cf0 100644
--- a/src/primitives/Avatar.stories.tsx
+++ b/src/primitives/Avatar/Avatar.stories.tsx
@@ -4,6 +4,7 @@ import { expect, within } from "@storybook/test";
 import { Avatar } from "./Avatar";
 
 const meta: Meta<typeof Avatar> = {
+  title: "Primitives/Avatar",
   component: Avatar,
 };
 
diff --git a/src/primitives/Avatar.tsx b/src/primitives/Avatar/Avatar.tsx
similarity index 100%
rename from src/primitives/Avatar.tsx
rename to src/primitives/Avatar/Avatar.tsx
diff --git a/src/primitives/Badge/StatusBadge.stories.tsx b/src/primitives/Badge/StatusBadge.stories.tsx
new file mode 100644
index 0000000..002e61b
--- /dev/null
+++ b/src/primitives/Badge/StatusBadge.stories.tsx
@@ -0,0 +1,25 @@
+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
new file mode 100644
index 0000000..064b26d
--- /dev/null
+++ b/src/primitives/Badge/StatusBadge.tsx
@@ -0,0 +1,48 @@
+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/BannerImage.mdx b/src/primitives/BannerImage/BannerImage.mdx
similarity index 100%
rename from src/primitives/BannerImage.mdx
rename to src/primitives/BannerImage/BannerImage.mdx
diff --git a/src/primitives/BannerImage.stories.tsx b/src/primitives/BannerImage/BannerImage.stories.tsx
similarity index 98%
rename from src/primitives/BannerImage.stories.tsx
rename to src/primitives/BannerImage/BannerImage.stories.tsx
index c2b9b10..eed8626 100644
--- a/src/primitives/BannerImage.stories.tsx
+++ b/src/primitives/BannerImage/BannerImage.stories.tsx
@@ -4,6 +4,7 @@ import { expect, within } from "@storybook/test";
 import { BannerImage } from "./BannerImage";
 
 const meta: Meta<typeof BannerImage> = {
+  title: "Primitives/BannerImage",
   component: BannerImage,
 };
 
diff --git a/src/primitives/BannerImage.tsx b/src/primitives/BannerImage/BannerImage.tsx
similarity index 100%
rename from src/primitives/BannerImage.tsx
rename to src/primitives/BannerImage/BannerImage.tsx