diff --git a/src/components/eidolonsInfo/index.tsx b/src/components/eidolonsInfo/index.tsx
index 0d047f4..512bd8d 100644
--- a/src/components/eidolonsInfo/index.tsx
+++ b/src/components/eidolonsInfo/index.tsx
@@ -7,6 +7,7 @@ import useUserDataStore from "@/stores/userDataStore";
 import { useMemo } from "react";
 import { useTranslations } from "next-intl";
 import useCurrentDataStore from "@/stores/currentDataStore";
+import ExtraEffectList from '../extraInfo';
 
 
 export default function EidolonsInfo() {
@@ -35,58 +36,43 @@ export default function EidolonsInfo() {
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                         {Object.entries(charRank || {}).map(([key, rank]) => (
                             <div key={key}
-                                className="flex flex-col items-center cursor-pointer hover:scale-105"
-                                onClick={() => {
-                                    let newRank = Number(key)
-                                    if (avatars[avatarSelected?.ID || ""]?.data?.rank == Number(key)) {
-                                        newRank = Number(key) - 1
-                                    }
-                                    setAvatars({ ...avatars, [avatarSelected?.ID || ""]: { ...avatars[avatarSelected?.ID || ""], data: { ...avatars[avatarSelected?.ID || ""].data, rank: newRank } } })
-                                }}
-                            >
-                                <Image
-                                    className={`w-60 object-contain mb-2 ${Number(key) <= avatars[avatarSelected?.ID.toString() || ""]?.data?.rank ? "" : "grayscale"}`}
-                                    src={`${process.env.CDN_URL}/ui/ui3d/rank/_dependencies/textures/${avatarSelected?.ID}/${avatarSelected?.ID}_Rank_${key}.png`}
-                                    alt={`Rank ${key}`}
-                                    priority
-                                    unoptimized
-                                    crossOrigin="anonymous"
-                                    width={240}
-                                    height={240}
-                                />
+                                className="flex flex-col items-center"
 
-                                <div className="text-lg pb-1 flex items-center justify-items-center gap-2">
-                                    <span className="inline-block text-indigo-500">{key}.</span>
-                                    <ParseText
-                                        locale={locale}
-                                        text={getLocaleName(locale, rank.Name)}
-                                        className="text-center text-base font-normal leading-tight"
+                            >
+                                <div
+                                    className="cursor-pointer"
+                                    onClick={() => {
+                                        let newRank = Number(key)
+                                        if (avatars[avatarSelected?.ID || ""]?.data?.rank == Number(key)) {
+                                            newRank = Number(key) - 1
+                                        }
+                                        setAvatars({ ...avatars, [avatarSelected?.ID || ""]: { ...avatars[avatarSelected?.ID || ""], data: { ...avatars[avatarSelected?.ID || ""].data, rank: newRank } } })
+                                    }}
+                                >
+                                    <Image
+                                        className={`w-60 object-contain mb-2 ${Number(key) <= avatars[avatarSelected?.ID.toString() || ""]?.data?.rank ? "" : "grayscale"}`}
+                                        src={`${process.env.CDN_URL}/ui/ui3d/rank/_dependencies/textures/${avatarSelected?.ID}/${avatarSelected?.ID}_Rank_${key}.png`}
+                                        alt={`Rank ${key}`}
+                                        priority
+                                        unoptimized
+                                        crossOrigin="anonymous"
+                                        width={240}
+                                        height={240}
                                     />
+
+                                    <div className="text-lg pb-1 flex items-center justify-items-center gap-2">
+                                        <span className="inline-block text-indigo-500">{key}.</span>
+                                        <ParseText
+                                            locale={locale}
+                                            text={getLocaleName(locale, rank.Name)}
+                                            className="text-center text-base font-normal leading-tight"
+                                        />
+                                    </div>
                                 </div>
+
                                 <div className="text-sm font-normal">
                                     <div dangerouslySetInnerHTML={{ __html: replaceByParam(getLocaleName(locale, rank.Desc), rank.Param) }} />
-                                    {Object.values(rank?.Extra || {}).map((extra) => (
-                                        <div
-                                            key={extra.ID}
-                                            className="mt-3 pl-3 border-l-2 border-primary/30 bg-primary/5 py-2 rounded-r-sm"
-                                        >
-                                            <div className="flex items-center gap-2 mb-1">
-                                                <span className="text-[10px] uppercase font-bold bg-primary/50 px-1.5 py-0.5 rounded">
-                                                    Extra Effect
-                                                </span>
-                                                <span className="text-sm font-semibold text-primary/80">
-                                                    {getLocaleName(locale, extra.Name)}
-                                                </span>
-                                            </div>
-
-                                            <div
-                                                className="text-sm leading-relaxed opacity-90"
-                                                dangerouslySetInnerHTML={{
-                                                    __html: replaceByParam(getLocaleName(locale, extra.Desc), extra.Param)
-                                                }}
-                                            />
-                                        </div>
-                                    ))}
+                                    <ExtraEffectList extras={rank?.Extra} locale={locale} />
                                 </div>
                             </div>
                         ))}
diff --git a/src/components/extraInfo/index.tsx b/src/components/extraInfo/index.tsx
new file mode 100644
index 0000000..f6527b3
--- /dev/null
+++ b/src/components/extraInfo/index.tsx
@@ -0,0 +1,98 @@
+"use client"
+
+import { useState } from "react"
+import { replaceByParam, getLocaleName } from "@/helper"
+import { ExtraEffect } from "@/types"
+
+type Props = {
+    extras: Record<string, ExtraEffect> | undefined
+    locale: string
+}
+
+export default function ExtraEffectList({ extras, locale }: Props) {
+    const [openList, setOpenList] = useState(false)
+    const [openId, setOpenId] = useState<number | null>(null)
+
+    if (!extras || Object.keys(extras).length === 0) return null
+
+    return (
+        <div className="mt-3">
+            <div
+                className="flex items-center justify-between cursor-pointer bg-primary/10 px-3 py-2 rounded-md"
+                onClick={() => setOpenList(!openList)}
+            >
+                <span className="text-sm font-semibold text-primary">
+                    List Extra Effect ({Object.keys(extras).length})
+                </span>
+
+                <span
+                    className={`transition-transform ${
+                        openList ? "rotate-90" : ""
+                    }`}
+                >
+                    ▶
+                </span>
+            </div>
+
+            <div
+                className={`overflow-hidden transition-all duration-300 ${
+                    openList ? "max-h-[500px] mt-2" : "max-h-0"
+                }`}
+            >
+                <div className="flex flex-col gap-2">
+                    {Object.values(extras).map((extra) => {
+                        const isOpen = openId === extra.ID
+
+                        return (
+                            <div
+                                key={extra.ID}
+                                className="bg-primary/5 rounded-md"
+                            >
+                                <div
+                                    className="flex items-center justify-between px-3 py-2 cursor-pointer"
+                                    onClick={() =>
+                                        setOpenId(isOpen ? null : extra.ID)
+                                    }
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-[10px] uppercase font-bold bg-primary/50 px-1.5 py-0.5 rounded">
+                                            Extra
+                                        </span>
+
+                                        <span className="text-sm font-medium text-primary/80">
+                                            {getLocaleName(locale, extra.Name)}
+                                        </span>
+                                    </div>
+
+                                    <span
+                                        className={`transition-transform ${
+                                            isOpen ? "rotate-90" : ""
+                                        }`}
+                                    >
+                                        ▶
+                                    </span>
+                                </div>
+
+                                <div
+                                    className={`overflow-hidden transition-all duration-300 ${
+                                        isOpen ? "max-h-40 px-3 pb-2" : "max-h-0"
+                                    }`}
+                                >
+                                    <div
+                                        className="text-sm opacity-90"
+                                        dangerouslySetInnerHTML={{
+                                            __html: replaceByParam(
+                                                getLocaleName(locale, extra.Desc),
+                                                extra.Param
+                                            )
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/skillsInfo/skillDescription.tsx b/src/components/skillsInfo/skillDescription.tsx
index f61af7d..8abc2ac 100644
--- a/src/components/skillsInfo/skillDescription.tsx
+++ b/src/components/skillsInfo/skillDescription.tsx
@@ -1,5 +1,6 @@
 import { getLocaleName, replaceByParam } from "@/helper";
 import { AvatarStore, SkillDetail, SkillTreePoint } from "@/types";
+import ExtraEffectList from "../extraInfo";
 
 export const SkillDescription = ({ skill, locale, avatarData, skillInfo }: {
     skill: SkillDetail,
@@ -12,8 +13,8 @@ export const SkillDescription = ({ skill, locale, avatarData, skillInfo }: {
     const descHtml = getLocaleName(locale, skill.Desc) || getLocaleName(locale, skill.SimpleDesc);
 
     const extraList = Object.values(skill.Extra).length > 0
-        ? Object.values(skill.Extra)
-        : Object.values(skill?.SimpleExtra || {});
+        ? skill.Extra
+        : skill?.SimpleExtra || {};
 
     return (
         <div className="flex flex-col gap-2">
@@ -32,28 +33,9 @@ export const SkillDescription = ({ skill, locale, avatarData, skillInfo }: {
                 />
             </div>
 
-            {extraList.map((extra) => (
-                <div
-                    key={extra.ID}
-                    className="mt-3 pl-3 border-l-2 border-primary/30 bg-primary/5 py-2 rounded-r-sm"
-                >
-                    <div className="flex items-center gap-2 mb-1">
-                        <span className="text-[10px] uppercase font-bold bg-primary/50 px-1.5 py-0.5 rounded">
-                            Extra Effect
-                        </span>
-                        <span className="text-sm font-semibold text-primary/80">
-                            {getLocaleName(locale, extra.Name)}
-                        </span>
-                    </div>
-
-                    <div
-                        className="text-sm leading-relaxed opacity-90"
-                        dangerouslySetInnerHTML={{
-                            __html: replaceByParam(getLocaleName(locale, extra.Desc), extra.Param)
-                        }}
-                    />
-                </div>
-            ))}
+            {Object.keys(extraList).length > 0 && (
+                <ExtraEffectList extras={extraList} locale={locale} />
+            )}
         </div>
     );
 };
\ No newline at end of file