diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 04abc4875..68c508e40 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -3577,7 +3577,7 @@
       "version": "16.18.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz",
       "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -5623,7 +5623,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx
index 3cd836c1f..cb762cc0e 100644
--- a/src/frontend/src/components/AccordionComponent/index.tsx
+++ b/src/frontend/src/components/AccordionComponent/index.tsx
@@ -45,7 +45,7 @@ export default function AccordionComponent({
           >
             {trigger}
           </AccordionTrigger>
-          <AccordionContent>{children}</AccordionContent>
+          <AccordionContent className="AccordionContent">{children}</AccordionContent>
         </AccordionItem>
       </Accordion>
     </>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 15556b27c..12519851d 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -152,6 +152,34 @@ The cursor: default; property value restores the browser's default cursor style
   cursor: default;
 }
 
+.AccordionContent {
+  overflow: hidden;
+}
+.AccordionContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+.AccordionContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
 
 @layer components {
   .round-buttons-position {
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 3f2b21551..0fa13d0d5 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -452,7 +452,7 @@ export default function FormModal({
                             </div>
                           </div>
                         </AccordionTrigger>
-                        <AccordionContent>
+                        <AccordionContent className="AccordionContent">
                           <div className="file-component-tab-column">
                             {tabsState[
                               id.current
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index a3e0452c9..15cf93ff2 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -28,20 +28,7 @@ module.exports = {
       },
     },
     extend: {
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
+
       colors: {
         connection: "var(--connection)",
         "almost-dark-gray": "var(--almost-dark-gray)",
@@ -129,20 +116,7 @@ module.exports = {
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
       },
-      keyframes: {
-        slideDown: {
-          from: { height: 0 },
-          to: { height: "100vh" },
-        },
-        slideUp: {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "slideDown 300ms ease-out",
-        "accordion-up": "slideUp 300ms ease-in",
-      },
+
     },
   },