diff --git a/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss b/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss
index 4badc5fc5..140335b95 100644
--- a/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss
+++ b/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss
@@ -2,6 +2,7 @@
 @use "@/styles/Radius.module.scss";
 @use "@/styles/Spacings.module.scss";
 @use "@/styles/Typography.module.scss";
+@use "@/styles/Transitions.module.scss";
 
 .foldable_section_wrapper {
   display: flex;
@@ -11,6 +12,15 @@
   overflow: hidden;
   font-size: Typography.$small;
 
+  .contentWrapper {
+    overflow: hidden;
+    transition: max-height 0.3s Transitions.$easeOutBack;
+  }
+  
+  .contentCollapsed {
+    max-height: 0;
+  }
+
   &.hide_border {
     border-color: transparent;
   }
@@ -37,4 +47,16 @@
       background-color: Colors.$lightest-black;
     }
   }
+  
+  .iconRotate {
+    transition: transform 0.3s Transitions.$easeOutBack;
+  }
+
+  .iconRotateDown {
+    transform: rotate(0deg);
+  }
+
+  .iconRotateRight {
+    transform: rotate(-90deg);
+  }
 }
diff --git a/frontend/lib/components/ui/FoldableSection/FoldableSection.tsx b/frontend/lib/components/ui/FoldableSection/FoldableSection.tsx
index c410e24c2..fdf62ab24 100644
--- a/frontend/lib/components/ui/FoldableSection/FoldableSection.tsx
+++ b/frontend/lib/components/ui/FoldableSection/FoldableSection.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { iconList } from "@/lib/helpers/iconList";
 
@@ -16,11 +16,16 @@ interface FoldableSectionProps {
 
 export const FoldableSection = (props: FoldableSectionProps): JSX.Element => {
   const [folded, setFolded] = useState<boolean>(false);
+  const contentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setFolded(props.foldedByDefault ?? false);
   }, [props.foldedByDefault]);
 
+  const getContentHeight = (): string => {
+    return folded ? "0" : `${contentRef.current?.scrollHeight}px`;
+  };
+
   return (
     <div
       className={`
@@ -35,12 +40,22 @@ export const FoldableSection = (props: FoldableSectionProps): JSX.Element => {
           <p className={styles.header_title}>{props.label}</p>
         </div>
         <Icon
-          name={folded ? "chevronDown" : "chevronRight"}
+          name="chevronDown"
           size="normal"
           color="black"
+          classname={`${styles.iconRotate} ${
+            folded ? styles.iconRotateDown : styles.iconRotateRight
+          }`}
         />
       </div>
-      <div style={{ height: folded ? "0" : "auto" }}>{props.children}</div>
+      <div
+        ref={contentRef}
+        className={`${styles.contentWrapper} ${
+          folded ? styles.contentCollapsed : styles.contentExpanded
+        }`}
+        style={{ maxHeight: getContentHeight() }}
+        {props.children}
+      </div>
     </div>
   );
 };
diff --git a/frontend/styles/_Transitions.module.scss b/frontend/styles/_Transitions.module.scss
new file mode 100644
index 000000000..76c92eb55
--- /dev/null
+++ b/frontend/styles/_Transitions.module.scss
@@ -0,0 +1,2 @@
+// Transition animations
+$easeOutBack: cubic-bezier(0.65, 0.05, 0.36, 1);