diff --git a/.gitignore b/.gitignore
index e80eaeb4..43ab3b24 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 dist
 .vscode
-storybook-static
\ No newline at end of file
+storybook-static
+.idea
\ No newline at end of file
diff --git a/src/Components/Accordion/Accordion.stories.tsx b/src/Components/Accordion/Accordion.stories.tsx
index 841d3093..8395bba7 100644
--- a/src/Components/Accordion/Accordion.stories.tsx
+++ b/src/Components/Accordion/Accordion.stories.tsx
@@ -52,8 +52,28 @@ const sections = [
       },
       {
         id: 199,
-        title: "unbearably",
+        title: "Explore Bear Mountain on a Segway",
         order: 6
+      },
+      {
+        id: 1991,
+        title: "Attend a bear-themed costume party",
+        order: 7
+      },
+      {
+        id: 1992,
+        title: "Try bear-shaped pancakes for breakfast",
+        order: 8
+      },
+      {
+        id: 1993,
+        title: "Write a story about a bear on an adventure",
+        order: 9
+      },
+      {
+        id: 1994,
+        title: "unbearably",
+        order: 10
       }
     ]
   },
diff --git a/src/Components/Accordion/__snapshots__/Accordion.test.tsx.snap b/src/Components/Accordion/__snapshots__/Accordion.test.tsx.snap
index 8bb7f018..e5fcb644 100644
--- a/src/Components/Accordion/__snapshots__/Accordion.test.tsx.snap
+++ b/src/Components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`Accordion component > renders correctly 1`] = `
       </h3>
       <ul
         aria-labelledby="1"
-        class="ml-[10px] leading-8"
+        class="ml-[10px] animate-height-animation leading-8"
         role="region"
       >
         <li
diff --git a/src/Components/Accordion/index.tsx b/src/Components/Accordion/index.tsx
index 07f31db4..27a20624 100644
--- a/src/Components/Accordion/index.tsx
+++ b/src/Components/Accordion/index.tsx
@@ -73,7 +73,7 @@ const Accordion: FC<IAccordionProps> = ({
           </h3>
           {expanded.includes(section.id) && (
             <ul
-              className='ml-[10px] leading-8'
+              className='ml-[10px] animate-height-animation leading-8'
               role='region'
               aria-labelledby={section.id.toString()}
             >
diff --git a/tailwind.config.js b/tailwind.config.js
index c66be5c9..600f2289 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,17 @@ module.exports = {
         primary: "var(--color-primary)",
         "primary-text-color": "var(--text-color)",
         "primary-background-color-40": "var(--color-bg-rgb)"
+      },
+      keyframes: {
+        "height-animation": {
+          "0%": { height: "0", overflow: "hidden" },
+          "50%": { height: "10rem" },
+          "100%": { height: "20rem" }
+        }
+      },
+      animation: {
+        "height-animation":
+          "height-animation 100ms cubic-bezier(0.3, 0.31, 0.59, 0.7)"
       }
     }
   }