diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84c3073bf..0def7d613 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sikka/hawa
 
+## 0.21.2
+
+### Patch Changes
+
+- Added `chip` prop to `Accordion` item [#SIKKA-5849](https://app.clickup.com/t/613523/SIKKA-5849)
+
 ## 0.21.1
 
 ### Patch Changes
diff --git a/components/elements/Accordion.tsx b/components/elements/Accordion.tsx
index 5ec27c497..c20583b00 100644
--- a/components/elements/Accordion.tsx
+++ b/components/elements/Accordion.tsx
@@ -2,12 +2,15 @@ import * as React from "react";
 
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 
+import { Chip, ChipTypes } from "@elements/index";
+
 import { cn } from "../util";
 
 export type AccordionItemProps = {
   trigger: string;
   content: string;
   disabled?: boolean;
+  chip?: ChipTypes;
 };
 
 type AccordionProps = {
@@ -62,7 +65,14 @@ const Accordion = React.forwardRef<
                 triggerclassNames
               )}
             >
-              {item.trigger}
+              <span
+                className={cn(
+                  "hawa-flex hawa-flex-row",
+                  item.chip && "hawa-gap-2"
+                )}
+              >
+                {item.trigger} {item.chip && <Chip {...item.chip} />}
+              </span>
             </AccordionTrigger>
             <AccordionContent
               aria-disabled={item.disabled || false}
diff --git a/package.json b/package.json
index 4c4463d84..28eaca536 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.21.1",
+  "version": "0.21.2",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
diff --git a/stories/ElementsStories/Accordion.stories.tsx b/stories/ElementsStories/Accordion.stories.tsx
index 68c7e3c74..7d0f8f134 100644
--- a/stories/ElementsStories/Accordion.stories.tsx
+++ b/stories/ElementsStories/Accordion.stories.tsx
@@ -1,13 +1,14 @@
+import { ArgsTable, Story, Title } from "@storybook/blocks";
 import type { Meta, StoryObj } from "@storybook/react";
+
 import {
   Accordion,
   AccordionRoot,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-  AccordionItemProps,
+  AccordionItemProps
 } from "../../components/elements";
-import { ArgsTable, Story, Title } from "@storybook/blocks";
 import { setLocale, t } from "../translations/i18n";
 
 const meta = {
@@ -20,10 +21,10 @@ const meta = {
           <h1>{"<Accordion/>"}</h1>
           <ArgsTable />
         </>
-      ),
-    },
+      )
+    }
   },
-  tags: ["autodocs"],
+  tags: ["autodocs"]
 } satisfies Meta<typeof Accordion>;
 
 export default meta;
@@ -33,12 +34,18 @@ const accordionData: AccordionItemProps[] = [
   {
     trigger: "Another Question",
     content: "Here's another answer.",
-    disabled: true,
+    disabled: true
+  },
+  {
+    trigger: "Another Question",
+    content: "Here's another answer.",
+    chip: {
+      label: "soon"
+    }
   },
   { trigger: "Another Question", content: "Here's another answer." },
   { trigger: "Another Question", content: "Here's another answer." },
-  { trigger: "Another Question", content: "Here's another answer." },
-  { trigger: "Another Question", content: "Here's another answer." },
+  { trigger: "Another Question", content: "Here's another answer." }
 ];
 const Template = (args: any, globals: any) => {
   const locale = globals.globals?.locale === "ar" ? "ar" : "en";
@@ -52,7 +59,7 @@ const Template = (args: any, globals: any) => {
   );
 };
 export const Default: Story = {
-  render: Template.bind({}),
+  render: Template.bind({})
 };
 export const SeparatedVariant: Story = {
   render: (args: any, globals: any) => {
@@ -70,7 +77,7 @@ export const SeparatedVariant: Story = {
         />
       </div>
     );
-  },
+  }
 };
 export const CustomMade: Story = {
   render: (args: any, globals: any) => {
@@ -90,5 +97,5 @@ export const CustomMade: Story = {
         </AccordionItem>
       </AccordionRoot>
     );
-  },
+  }
 };