diff --git a/src/plays/accordian/Accordian.jsx b/src/plays/accordian/Accordian.jsx
new file mode 100644
index 0000000000..bae8196cae
--- /dev/null
+++ b/src/plays/accordian/Accordian.jsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import PlayHeader from 'common/playlists/PlayHeader';
+import AccordionData from './AccordianData';
+import './styles.css';
+import { accordionData } from './data';
+
+// WARNING: Do not change the entry componenet name
+function Accordian(props) {
+  const [activeAccordion, setActiveAccordion] = useState(null);
+  const handleAccordionClick = (index) => {
+    setActiveAccordion(index === activeAccordion ? null : index);
+  };
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div className="accordion">
+            {accordionData.map(({ title, content }, index) => (
+              <AccordionData
+                content={content}
+                isActive={index === activeAccordion}
+                key={index}
+                title={title}
+                onClick={() => handleAccordionClick(index)}
+              />
+            ))}
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Accordian;
diff --git a/src/plays/accordian/AccordianData.jsx b/src/plays/accordian/AccordianData.jsx
new file mode 100644
index 0000000000..43b3a224ba
--- /dev/null
+++ b/src/plays/accordian/AccordianData.jsx
@@ -0,0 +1,13 @@
+function AccordionData({ title, content, isActive, onClick }) {
+  return (
+    <div className="accordion-item">
+      <div className="accordion-title" onClick={onClick}>
+        <div>{title}</div>
+        <div>{isActive ? '-' : '+'}</div>
+      </div>
+      {isActive && <div className="accordion-content">{content}</div>}
+    </div>
+  );
+}
+
+export default AccordionData;
diff --git a/src/plays/accordian/Readme.md b/src/plays/accordian/Readme.md
new file mode 100644
index 0000000000..094d5c5299
--- /dev/null
+++ b/src/plays/accordian/Readme.md
@@ -0,0 +1,14 @@
+# Accordian
+
+When you click on a section, it opens up to show more details, and when you click again, it closes to keep things tidy and prevent information overload.
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: clavy123
+- Gihub Link: https://github.com/clavy123
+
diff --git a/src/plays/accordian/cover.png b/src/plays/accordian/cover.png
new file mode 100644
index 0000000000..d97574f05b
Binary files /dev/null and b/src/plays/accordian/cover.png differ
diff --git a/src/plays/accordian/data.js b/src/plays/accordian/data.js
new file mode 100644
index 0000000000..03626e1032
--- /dev/null
+++ b/src/plays/accordian/data.js
@@ -0,0 +1,36 @@
+export const accordionData = [
+  {
+    title: 'Section 1',
+    content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
+    laborum cupiditate possimus labore, hic temporibus velit dicta earum
+    suscipit commodi eum enim atque at? Et perspiciatis dolore iure
+    voluptatem.`
+  },
+  {
+    title: 'Section 2',
+    content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
+    reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
+    quaerat iure quos dolorum accusantium ducimus in illum vero commodi
+    pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
+    quidem maiores doloremque est numquam praesentium eos voluptatem amet!
+    Repudiandae, mollitia id reprehenderit a ab odit!`
+  },
+  {
+    title: 'Section 3',
+    content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
+    quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
+    dolor ut sequi minus iste? Quas?`
+  },
+  {
+    title: 'Section 4',
+    content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
+      quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
+      dolor ut sequi minus iste? Quas?`
+  },
+  {
+    title: 'Section 5',
+    content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
+    quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
+    dolor ut sequi minus iste? Quas?`
+  }
+];
diff --git a/src/plays/accordian/styles.css b/src/plays/accordian/styles.css
new file mode 100644
index 0000000000..8b63d271ae
--- /dev/null
+++ b/src/plays/accordian/styles.css
@@ -0,0 +1,37 @@
+.accordion {
+    max-width: 600px;
+    margin: 2rem auto;
+  }
+  
+  .accordion-item {
+    border: 1px solid #ccc;
+    border-radius: 0.5rem;
+    margin-bottom: 1rem;
+    overflow: hidden;
+  }
+  
+  .accordion-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background-color: #f0f0f0;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  .accordion-title:hover {
+    background-color: #e0e0e0;
+  }
+  
+  .accordion-content {
+    padding: 1rem;
+    background-color: #ffffff;
+  }
+  
+  @media screen and (max-width: 768px) {
+    .accordion {
+      width: 90%;
+    }
+  }
+  
\ No newline at end of file