diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 8793f83b61127c3926cb0b733d3af74cc4716d4b..9a51547a1ca97ee93e481822e054a3b9ca4daa17 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -945,3 +945,46 @@ span.formula_line::-webkit-scrollbar-track {
     white-space: nowrap; 
 }
 
+.accordion {
+  width: 95%;
+  margin: 20px auto;
+  /* border: 1px solid #ccc; */
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.accordion-header {
+  background-color: #e4dfb4;
+  padding: 15px;
+  width: 100%;
+  cursor: pointer;
+  user-select: none; 
+  transition: background-color 0.3s ease;
+}
+
+.accordion-header:hover {
+  background-color: #e0e0e0;
+  cursor: url('https://static.igem.wiki/teams/5378/image/dg-pointer2.png') 18 18, pointer;
+}
+
+.accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+  background-color: #fff;
+  padding: 0 15px;
+}
+
+.accordion-content.open {
+  max-height: 100vh; 
+  padding: 15px;
+  margin-left: 5px;
+  border-left:3px solid #5bc0de ;
+  background-color: rgb(245, 245, 220);
+}
+
+.accordion-content p {
+  margin: 0;
+  font-size: 16px;
+  color: #333;
+}
\ No newline at end of file
diff --git a/src/contents/model.tsx b/src/contents/model.tsx
index 37b75dc576a1afd3427c2c1f769ecb8bf385beca..02c92d42422830bac1a99625a6db25e6e9cf475f 100644
--- a/src/contents/model.tsx
+++ b/src/contents/model.tsx
@@ -44,6 +44,10 @@ export function Model() {
     }, []);
     // sidenavbar end
 
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleAccordion = () => {
+      setIsOpen(!isOpen);
+    };
 
 
   return (
@@ -923,6 +927,17 @@ export function Model() {
                <div className="bd-callout bd-callout-info bg-gray">
                   <h1>What do we do to ...? See...</h1>
                 </div>
+
+                <div className="accordion">
+
+      <div className="accordion-header" onClick={toggleAccordion}>
+        <h3>{isOpen ? 'Collapse' : 'Learn more about'} ......</h3>
+      </div>
+      <div className={`accordion-content ${isOpen ? 'open' : ''}`}>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam possimus consequatur nesciunt iure labore voluptatem! Unde, voluptates ipsam et soluta minima hic, aliquid, nam doloribus illo quas odit ducimus? Vero?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem laudantium asperiores tempore quisquam repellendus deleniti corporis ratione dolores eligendi, atque impedit esse dolore eum sequi harum cum cumque quae necessitatibus!longerlore!</p>
+      </div>
+
+    </div>
               
               <Element name="section2" className="element" id='section2'>
                 <h2>Section 2</h2>