diff --git a/packages/db/src/Component/CollapsibleContent.tsx b/packages/db/src/Component/CollapsibleContent.tsx
index 75624b52..61be1731 100644
--- a/packages/db/src/Component/CollapsibleContent.tsx
+++ b/packages/db/src/Component/CollapsibleContent.tsx
@@ -13,24 +13,23 @@ export function ArrowToggle({ eventKey }: { eventKey: string }) {
     return <FontAwesomeIcon className={`collapsible-header-collapse-actions ${rotateClass}`} icon={faChevronDown} />;
 }
 
-function renderCollapsibleContent(
-    {
-        title,
-        content,
-        subheader,
-        separator,
-        initialOpen,
-        accordionKey,
-    }: {
-        title: Renderable;
-        content: Renderable;
-        subheader: boolean;
-        separator?: boolean;
-        initialOpen?: boolean;
-        accordionKey?: string;
-    },
-    enableBottomMargin = true
-) {
+export default function CollapsibleContent({
+    title,
+    content,
+    subheader,
+    separator,
+    initialOpen,
+    accordionKey,
+    enableBottomMargin,
+}: {
+    title: Renderable;
+    content: Renderable;
+    subheader: boolean;
+    separator?: boolean;
+    initialOpen?: boolean;
+    accordionKey?: string;
+    enableBottomMargin?: boolean;
+}) {
     if (initialOpen === undefined) initialOpen = true;
     if (separator === undefined) separator = true;
     const eventKey = accordionKey ?? `${title}`;
@@ -50,7 +49,7 @@ function renderCollapsibleContent(
                 </Accordion.Toggle>
                 {/* 2 px to align the hr line with the start of content */}
                 <Accordion.Collapse eventKey={eventKey}>
-                    <div style={{ marginTop: "2px", marginBottom: enableBottomMargin ? "1em" : "unset" }}>
+                    <div style={{ marginTop: "2px", marginBottom: enableBottomMargin === false ? "unset" : "1em" }}>
                         {content}
                     </div>
                 </Accordion.Collapse>
@@ -59,8 +58,6 @@ function renderCollapsibleContent(
     );
 }
 
-export default renderCollapsibleContent;
-
 export const CollapsibleLight = ({
     title,
     content,
diff --git a/packages/db/src/Component/QuestAiNpc.tsx b/packages/db/src/Component/QuestAiNpc.tsx
index 2def1be1..6573b368 100644
--- a/packages/db/src/Component/QuestAiNpc.tsx
+++ b/packages/db/src/Component/QuestAiNpc.tsx
@@ -6,7 +6,7 @@ import { Ai, Quest, QuestEnemy, Region } from "@atlasacademy/api-connector";
 
 import AiDescriptor from "../Descriptor/AiDescriptor";
 import EntityDescriptor from "../Descriptor/EntityDescriptor";
-import renderCollapsibleContent from "./CollapsibleContent";
+import CollapsibleContent from "./CollapsibleContent";
 import { QuestEnemyMainData, QuestEnemySubData } from "./QuestEnemy";
 
 const BasicAiNpcDescriptor = ({
@@ -63,18 +63,16 @@ const QuestAiNpc = ({ region, aiNpcs }: { region: Region; aiNpcs: Quest.QuestPha
         }
 
         return (
-            <>
-                {renderCollapsibleContent({
-                    title: (
-                        <>
-                            {t("AI NPC")}: <BasicAiNpcDescriptor region={region} aiNpc={aiNpc} iconHeight={40} />
-                        </>
-                    ),
-                    content: <AiNpcDetailTable region={region} enemy={aiNpc.detail} />,
-                    subheader: true,
-                    initialOpen: false,
-                })}
-            </>
+            <CollapsibleContent
+                title={
+                    <>
+                        {t("AI NPC")}: <BasicAiNpcDescriptor region={region} aiNpc={aiNpc} iconHeight={40} />
+                    </>
+                }
+                content={<AiNpcDetailTable region={region} enemy={aiNpc.detail} />}
+                subheader
+                initialOpen={false}
+            />
         );
     }
 
@@ -93,16 +91,7 @@ const QuestAiNpc = ({ region, aiNpcs }: { region: Region; aiNpcs: Quest.QuestPha
         </>
     );
 
-    return (
-        <>
-            {renderCollapsibleContent({
-                title: t("AI NPC"),
-                content: multiNpcContent,
-                subheader: true,
-                initialOpen: false,
-            })}
-        </>
-    );
+    return <CollapsibleContent title={t("AI NPC")} content={multiNpcContent} subheader initialOpen={false} />;
 };
 
 export default QuestAiNpc;
diff --git a/packages/db/src/Page/Ai/AiTable.tsx b/packages/db/src/Page/Ai/AiTable.tsx
index 5e08466e..b4df7708 100644
--- a/packages/db/src/Page/Ai/AiTable.tsx
+++ b/packages/db/src/Page/Ai/AiTable.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Ai, Region, Trait } from "@atlasacademy/api-connector";
 import { toTitleCase } from "@atlasacademy/api-descriptor";
 
-import renderCollapsibleContent from "../../Component/CollapsibleContent";
+import CollapsibleContent from "../../Component/CollapsibleContent";
 import AiDescriptor from "../../Descriptor/AiDescriptor";
 import { BuffIdDescriptor } from "../../Descriptor/BuffDescription";
 import NoblePhantasmPopover from "../../Descriptor/NoblePhantasmPopover";
@@ -364,9 +364,5 @@ export default function AiTable(props: {
             </tbody>
         </Table>
     );
-    return renderCollapsibleContent({
-        title: `AI ${ais[0].id}`,
-        content: outputTable,
-        subheader: false,
-    });
+    return <CollapsibleContent title={`AI ${ais[0].id}`} content={outputTable} subheader={false} />;
 }
diff --git a/packages/db/src/Page/ChangelogPage.tsx b/packages/db/src/Page/ChangelogPage.tsx
index 086c18ea..11fcf9b7 100644
--- a/packages/db/src/Page/ChangelogPage.tsx
+++ b/packages/db/src/Page/ChangelogPage.tsx
@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
 import { Change, CraftEssence, Region, Servant } from "@atlasacademy/api-connector";
 
 import Api from "../Api";
-import renderCollapsibleContent from "../Component/CollapsibleContent";
+import CollapsibleContent from "../Component/CollapsibleContent";
 import ErrorStatus from "../Component/ErrorStatus";
 import Loading from "../Component/Loading";
 import { BasicCraftEssenceDescriptor } from "../Descriptor/CraftEssenceDescriptor";
@@ -220,17 +220,19 @@ class ChangelogPage extends React.Component<IProps, IState> {
                 }
 
                 let timestamp = new Date(+change.timestamp * 1000);
-                return renderCollapsibleContent({
-                    title: (
-                        <>
-                            <span style={{ fontFamily: "monospace" }}>{change.commit.slice(0, 6)}</span>
-                            &nbsp;- {localTime ? timestamp.toString() : timestamp.toUTCString()}
-                        </>
-                    ),
-                    content: <>{hasChanges ? renderedChanges : t("No visible changes found")}</>,
-                    subheader: true,
-                    initialOpen: initialOpen,
-                });
+                return (
+                    <CollapsibleContent
+                        title={
+                            <>
+                                <span style={{ fontFamily: "monospace" }}>{change.commit.slice(0, 6)}</span>
+                                &nbsp;- {localTime ? timestamp.toString() : timestamp.toUTCString()}
+                            </>
+                        }
+                        content={<>{hasChanges ? renderedChanges : t("No visible changes found")}</>}
+                        subheader
+                        initialOpen={initialOpen}
+                    />
+                );
             });
 
         if (visibleOnly) content = content.filter(Boolean);
diff --git a/packages/db/src/Page/Event/EventLottery.tsx b/packages/db/src/Page/Event/EventLottery.tsx
index 87fc7b61..9e3e050c 100644
--- a/packages/db/src/Page/Event/EventLottery.tsx
+++ b/packages/db/src/Page/Event/EventLottery.tsx
@@ -1,13 +1,12 @@
 import { faStar } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
 import { Table } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 import { Event, Item, Region } from "@atlasacademy/api-connector";
 
-import renderCollapsibleContent from "../../Component/CollapsibleContent";
+import CollapsibleContent from "../../Component/CollapsibleContent";
 import ItemIcon from "../../Component/ItemIcon";
 import GiftDescriptor from "../../Descriptor/GiftDescriptor";
 import { mergeElements } from "../../Helper/OutputHelper";
@@ -99,14 +98,13 @@ const EventLottery = ({
                 }${t("EventLotteryBoxBehind")}`;
 
                 return (
-                    <React.Fragment key={boxIndex}>
-                        {renderCollapsibleContent({
-                            title: title,
-                            content: <EventLotteryBox region={region} boxes={boxes} itemMap={itemMap} />,
-                            subheader: true,
-                            initialOpen: false,
-                        })}
-                    </React.Fragment>
+                    <CollapsibleContent
+                        key={boxIndex}
+                        title={title}
+                        content={<EventLotteryBox region={region} boxes={boxes} itemMap={itemMap} />}
+                        subheader
+                        initialOpen={false}
+                    />
                 );
             })}
         </>
diff --git a/packages/db/src/Page/Event/EventVoices.tsx b/packages/db/src/Page/Event/EventVoices.tsx
index 43361709..6b9f99fc 100644
--- a/packages/db/src/Page/Event/EventVoices.tsx
+++ b/packages/db/src/Page/Event/EventVoices.tsx
@@ -1,10 +1,9 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 
 import { Event, Profile, Region, Servant } from "@atlasacademy/api-connector";
 import { toTitleCase } from "@atlasacademy/api-descriptor";
 
-import renderCollapsibleContent from "../../Component/CollapsibleContent";
+import CollapsibleContent from "../../Component/CollapsibleContent";
 import { lang } from "../../Setting/Manager";
 import { VoiceLinesTable } from "../Servant/ServantVoiceLines";
 
@@ -52,15 +51,14 @@ const EventVoices = ({
                 const voiceGroupKey = `${voiceGroup.svtId}-${voiceGroup.voicePrefix}-${voiceGroup.type}`;
 
                 return (
-                    <React.Fragment key={voiceGroupKey}>
-                        {renderCollapsibleContent({
-                            title: <span lang={lang(region)}>{title}</span>,
-                            content: voiceLineTable,
-                            subheader: false,
-                            accordionKey: voiceGroupKey,
-                            separator: i !== 0,
-                        })}
-                    </React.Fragment>
+                    <CollapsibleContent
+                        key={voiceGroupKey}
+                        title={<span lang={lang(region)}>{title}</span>}
+                        content={voiceLineTable}
+                        subheader={false}
+                        accordionKey={voiceGroupKey}
+                        separator={i !== 0}
+                    />
                 );
             })}
         </>
diff --git a/packages/db/src/Page/MysticCode/MysticCodeAsset.tsx b/packages/db/src/Page/MysticCode/MysticCodeAsset.tsx
index c09aa486..9387cc2f 100644
--- a/packages/db/src/Page/MysticCode/MysticCodeAsset.tsx
+++ b/packages/db/src/Page/MysticCode/MysticCodeAsset.tsx
@@ -1,10 +1,16 @@
+import { useTranslation } from "react-i18next";
+
 import { MysticCode } from "@atlasacademy/api-connector";
 
-import renderCollapsibleContent from "../../Component/CollapsibleContent";
+import CollapsibleContent from "../../Component/CollapsibleContent";
 
 const Image = ({ url, alt, floatDir }: { url: string; alt?: string; floatDir?: string }) => (
     <a href={url} target="_blank" rel="noopener noreferrer">
-        <img alt={alt ?? ""} src={url} className={"mw-100" + floatDir ? `float-${floatDir} w-50` : ""} />
+        <img
+            alt={alt ?? ""}
+            src={url}
+            className={"mw-100" + (floatDir !== undefined ? `float-${floatDir} w-50` : "")}
+        />
     </a>
 );
 
@@ -12,33 +18,33 @@ const MCImages = ({
     mcAssets,
     mcName,
     assetType,
-    float = undefined,
+    float,
 }: {
     mcAssets: { male: string; female: string };
     mcName: string;
     assetType: "Figure" | "Face" | "Item";
-    float?: true;
+    float?: boolean;
 }) => (
     <>
-        <Image url={mcAssets.male} alt={`Male ${mcName} ${assetType}`} floatDir={float && "start"} />
-        <Image url={mcAssets.female} alt={`Female ${mcName} ${assetType}`} floatDir={float && "end"} />
+        <Image url={mcAssets.male} alt={`Male ${mcName} ${assetType}`} floatDir={float ? "start" : undefined} />
+        <Image url={mcAssets.female} alt={`Female ${mcName} ${assetType}`} floatDir={float ? "end" : undefined} />
     </>
 );
 
 const MysticCodeAssets = ({ mysticCode }: { mysticCode: MysticCode.MysticCode }) => {
+    const { t } = useTranslation();
     const mcName = `${mysticCode.name} Mystic Code`;
     return (
         <>
-            {renderCollapsibleContent({
-                title: "Figures",
-                content: (
+            <CollapsibleContent
+                title={t("Figures")}
+                content={
                     <>
-                        {" "}
                         <MCImages
                             mcAssets={mysticCode.extraAssets.masterFigure}
                             mcName={mcName}
                             assetType="Face"
-                            float={true}
+                            float
                         />
                         {mysticCode.costumes.map((costume, idx) => (
                             <MCImages
@@ -46,41 +52,39 @@ const MysticCodeAssets = ({ mysticCode }: { mysticCode: MysticCode.MysticCode })
                                 mcAssets={costume.extraAssets.masterFigure}
                                 mcName={mcName}
                                 assetType="Face"
-                                float={true}
+                                float
                             />
-                        ))}{" "}
+                        ))}
                     </>
-                ),
-                subheader: false,
-            })}
-            {renderCollapsibleContent(
-                {
-                    title: "Faces",
-                    content: (
-                        <>
-                            <MCImages mcAssets={mysticCode.extraAssets.masterFace} mcName={mcName} assetType="Face" />
-                            {mysticCode.costumes.map((costume) => (
+                }
+                subheader={false}
+            />
+            <CollapsibleContent
+                title={t("Faces")}
+                content={
+                    <>
+                        <MCImages mcAssets={mysticCode.extraAssets.masterFace} mcName={mcName} assetType="Face" />
+                        {mysticCode.costumes.map((costume) => (
+                            <div>
                                 <MCImages
                                     key={costume.id}
                                     mcAssets={costume.extraAssets.masterFace}
                                     mcName={mcName}
                                     assetType="Face"
                                 />
-                            ))}
-                        </>
-                    ),
-                    subheader: false,
-                },
-                false
-            )}
-            {renderCollapsibleContent(
-                {
-                    title: "Items",
-                    content: <MCImages mcAssets={mysticCode.extraAssets.item} mcName={mcName} assetType="Item" />,
-                    subheader: true,
-                },
-                true
-            )}
+                            </div>
+                        ))}
+                    </>
+                }
+                subheader={false}
+                enableBottomMargin={false}
+            />
+            <CollapsibleContent
+                title={t("Items")}
+                content={<MCImages mcAssets={mysticCode.extraAssets.item} mcName={mcName} assetType="Item" />}
+                subheader
+                enableBottomMargin
+            />
         </>
     );
 };
diff --git a/packages/db/src/Page/QuestPage.tsx b/packages/db/src/Page/QuestPage.tsx
index b2294113..f40d1b6c 100644
--- a/packages/db/src/Page/QuestPage.tsx
+++ b/packages/db/src/Page/QuestPage.tsx
@@ -8,7 +8,7 @@ import { RouteComponentProps } from "react-router-dom";
 import { Quest, Region } from "@atlasacademy/api-connector";
 
 import Api from "../Api";
-import renderCollapsibleContent from "../Component/CollapsibleContent";
+import CollapsibleContent from "../Component/CollapsibleContent";
 import ErrorStatus from "../Component/ErrorStatus";
 import Loading from "../Component/Loading";
 import QuestAiNpc from "../Component/QuestAiNpc";
@@ -113,7 +113,7 @@ class QuestPage extends React.Component<IProps, IState> {
                         <QuestSubData region={this.props.region} quest={quest} />
                     </Col>
                 </Row>
-                {quest.messages.length > 0 ? (
+                {quest.messages.length > 0 && (
                     <Alert variant="success" className="text-prewrap" lang={lang(this.props.region)}>
                         {quest.messages.length > 1 ? (
                             <ul className="mb-0">
@@ -127,8 +127,8 @@ class QuestPage extends React.Component<IProps, IState> {
                             <FGOText text={quest.messages[0].message} />
                         )}
                     </Alert>
-                ) : null}
-                {quest.extraDetail.hintTitle || quest.hints.length > 0 ? (
+                )}
+                {(quest.extraDetail.hintTitle || quest.hints.length > 0) && (
                     <Alert variant="success" className="text-prewrap" lang={lang(this.props.region)}>
                         {quest.extraDetail.hintTitle && (
                             <>
@@ -149,8 +149,8 @@ class QuestPage extends React.Component<IProps, IState> {
                             </>
                         )}
                     </Alert>
-                ) : null}
-                {quest.scripts.length > 0 ? (
+                )}
+                {quest.scripts.length > 0 && (
                     <Alert variant="success">
                         {quest.scripts.length > 1 ? (
                             <ul className="mb-0">
@@ -164,7 +164,7 @@ class QuestPage extends React.Component<IProps, IState> {
                             <ScriptDescriptor region={this.props.region} scriptId={quest.scripts[0].scriptId} />
                         )}
                     </Alert>
-                ) : null}
+                )}
                 {quest.extraDetail.questSelect !== undefined &&
                 quest.extraDetail.questSelect.filter((questId) => questId !== this.props.id).length > 0 ? (
                     <Alert variant="success">
@@ -197,11 +197,11 @@ class QuestPage extends React.Component<IProps, IState> {
                     }
                     questHashAverageGoTo={() => this.setState({ hash: undefined })}
                 />
-                {quest.restrictions.length > 0 ? (
+                {quest.restrictions.length > 0 && (
                     <Alert variant="success">
                         <QuestRestriction region={this.props.region} questRestrictions={quest.restrictions} />
                     </Alert>
-                ) : null}
+                )}
                 {quest.availableEnemyHashes.length > 1 && quest.type !== Quest.QuestType.WAR_BOARD && (
                     <Alert variant="success">
                         {t("This quest can have multiple enemy versions")}. {t("Currently showing enemy version")}:{" "}
@@ -225,33 +225,30 @@ class QuestPage extends React.Component<IProps, IState> {
                         </Dropdown>
                     </Alert>
                 )}
-                {quest.extraDetail.aiNpc !== undefined || quest.extraDetail.aiMultiNpc !== undefined ? (
+                {(quest.extraDetail.aiNpc !== undefined || quest.extraDetail.aiMultiNpc !== undefined) && (
                     <QuestAiNpc
                         region={this.props.region}
                         aiNpcs={(quest.extraDetail.aiNpc !== undefined ? [quest.extraDetail.aiNpc] : []).concat(
                             quest.extraDetail.aiMultiNpc ?? []
                         )}
                     />
-                ) : null}
-                {quest.supportServants.length > 0 ? (
-                    <>
-                        {renderCollapsibleContent({
-                            title: quest.isNpcOnly
+                )}
+                {quest.supportServants.length > 0 && (
+                    <CollapsibleContent
+                        title={
+                            quest.isNpcOnly
                                 ? t("Forced Support Servant", { count: quest.supportServants.length })
-                                : t("Support Servant", { count: quest.supportServants.length }),
-                            content: (
-                                <SupportServantTables
-                                    region={this.props.region}
-                                    supportServants={quest.supportServants}
-                                />
-                            ),
-                            subheader: false,
-                            initialOpen: false,
-                        })}
-                    </>
-                ) : null}
+                                : t("Support Servant", { count: quest.supportServants.length })
+                        }
+                        content={
+                            <SupportServantTables region={this.props.region} supportServants={quest.supportServants} />
+                        }
+                        subheader={false}
+                        initialOpen={false}
+                    />
+                )}
 
-                {quest.stages.length > 0 ? (
+                {quest.stages.length > 0 && (
                     <Tabs
                         activeKey={this.props.stage !== undefined ? this.props.stage : 1}
                         onSelect={(key: string | null) => {
@@ -268,7 +265,7 @@ class QuestPage extends React.Component<IProps, IState> {
                             </Tab>
                         ))}
                     </Tabs>
-                ) : null}
+                )}
             </div>
         );
     }
diff --git a/packages/db/src/Page/Servant/ServantAssets.tsx b/packages/db/src/Page/Servant/ServantAssets.tsx
index 07396770..c95b9dc5 100644
--- a/packages/db/src/Page/Servant/ServantAssets.tsx
+++ b/packages/db/src/Page/Servant/ServantAssets.tsx
@@ -4,7 +4,7 @@ import { WithTranslation, withTranslation } from "react-i18next";
 
 import { Entity, Region, Servant } from "@atlasacademy/api-connector";
 
-import renderCollapsibleContent from "../../Component/CollapsibleContent";
+import CollapsibleContent from "../../Component/CollapsibleContent";
 import IllustratorDescriptor from "../../Descriptor/IllustratorDescriptor";
 import ServantLimitImage from "./ServantLimitImage";
 import ServantModelViewer from "./ServantModelViewer";
@@ -76,23 +76,21 @@ class ServantAssets extends React.Component<IProps> {
                 {this.displayAssets(this.props.servant.extraAssets.charaFigure)}
                 <br />
                 {Object.entries(this.props.servant.extraAssets.charaFigureForm).map(([form, assetMap]) => (
-                    <div key={form}>
-                        {renderCollapsibleContent({
-                            title: `${t("Form")} ${form}`,
-                            content: this.displayAssets(assetMap),
-                            subheader: true,
-                        })}
-                    </div>
+                    <CollapsibleContent
+                        key={form}
+                        title={`${t("Form")} ${form}`}
+                        content={this.displayAssets(assetMap)}
+                        subheader
+                    />
                 ))}
                 <br />
                 {Object.entries(this.props.servant.extraAssets.charaFigureMulti).map(([idx, assetMap]) => (
-                    <div key={idx}>
-                        {renderCollapsibleContent({
-                            title: `${t("Character")} ${idx}`,
-                            content: this.displayAssets(assetMap),
-                            subheader: true,
-                        })}
-                    </div>
+                    <CollapsibleContent
+                        key={idx}
+                        title={`${t("Character")} ${idx}`}
+                        content={this.displayAssets(assetMap)}
+                        subheader
+                    />
                 ))}
             </>
         );
@@ -151,32 +149,38 @@ class ServantAssets extends React.Component<IProps> {
                 <ServantModelViewer servant={this.props.servant} />
                 <ServantLimitImage region={this.props.region} servant={this.props.servant} />
                 {content.map((content) => (
-                    <div key={content.title}>{renderCollapsibleContent(content)}</div>
+                    <CollapsibleContent
+                        key={content.title}
+                        title={content.title}
+                        content={content.content}
+                        subheader={content.subheader}
+                    />
                 ))}
                 {(this.props.servant.extraAssets.charaFigure.story ||
-                    Object.keys(this.props.servant.extraAssets.image.story ?? {}).length > 0) &&
-                    renderCollapsibleContent({
-                        title: `${t("Story Figure")} (${t("May contain spoilers")})`,
-                        content: (
+                    Object.keys(this.props.servant.extraAssets.image.story ?? {}).length > 0) && (
+                    <CollapsibleContent
+                        title={`${t("Story Figure")} (${t("May contain spoilers")})`}
+                        content={
                             <>
                                 {this.displayAssets(this.props.servant.extraAssets.charaFigure, undefined, true)}
                                 {this.displayAssets(this.props.servant.extraAssets.image, undefined, true)}
                             </>
-                        ),
-                        subheader: false,
-                        initialOpen: false,
-                    })}
+                        }
+                        subheader={false}
+                        initialOpen={false}
+                    />
+                )}
                 <br />
                 {Object.entries(this.props.servant.extraAssets.charaFigureForm).map(([form, assetMap]) => (
                     <div key={form}>
-                        {assetMap.story
-                            ? renderCollapsibleContent({
-                                  title: `${t("Story Figure")} ${t("Form")} ${form}`,
-                                  content: this.displayAssets(assetMap, undefined, true),
-                                  subheader: true,
-                                  initialOpen: false,
-                              })
-                            : null}
+                        {assetMap.story && (
+                            <CollapsibleContent
+                                title={`${t("Story Figure")} ${t("Form")} ${form}`}
+                                content={this.displayAssets(assetMap, undefined, true)}
+                                subheader
+                                initialOpen={false}
+                            />
+                        )}
                     </div>
                 ))}
             </div>
diff --git a/packages/db/src/Page/Servant/ServantVoiceLines.tsx b/packages/db/src/Page/Servant/ServantVoiceLines.tsx
index 57a4feda..5cae8b4c 100644
--- a/packages/db/src/Page/Servant/ServantVoiceLines.tsx
+++ b/packages/db/src/Page/Servant/ServantVoiceLines.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 
 import { CraftEssence, Entity, Profile, ProfileVoiceType, Region, Servant } from "@atlasacademy/api-connector";
 
-import renderCollapsibleContent from "../../Component/CollapsibleContent";
+import CollapsibleContent from "../../Component/CollapsibleContent";
 import EntityDescriptor from "../../Descriptor/EntityDescriptor";
 import { ProfileVoiceTypeDescriptor } from "../../Descriptor/ProfileVoiceTypeDescriptor";
 import ScriptDescriptor from "../../Descriptor/ScriptDescriptor";
@@ -243,11 +243,7 @@ export default function ServantVoiceLines(props: {
                     costumes={profile?.costume}
                 />
             );
-            return (
-                <React.Fragment key={prefix}>
-                    {renderCollapsibleContent({ title, content: outputTable, subheader: false })}
-                </React.Fragment>
-            );
+            return <CollapsibleContent key={prefix} title={title} content={outputTable} subheader={false} />;
         } else {
             return <React.Fragment key={prefix}>{outputTable}</React.Fragment>;
         }
diff --git a/packages/db/src/Page/WarPage.tsx b/packages/db/src/Page/WarPage.tsx
index 88fa32a8..55ab1c8b 100644
--- a/packages/db/src/Page/WarPage.tsx
+++ b/packages/db/src/Page/WarPage.tsx
@@ -11,7 +11,7 @@ import { RouteComponentProps } from "react-router-dom";
 import { Bgm, CondType, Event, Gift, Item, Quest, Region, War } from "@atlasacademy/api-connector";
 
 import Api from "../Api";
-import renderCollapsibleContent from "../Component/CollapsibleContent";
+import CollapsibleContent from "../Component/CollapsibleContent";
 import DataTable from "../Component/DataTable";
 import ErrorStatus from "../Component/ErrorStatus";
 import Loading from "../Component/Loading";
@@ -330,11 +330,7 @@ const MainQuests = (props: {
         />
     );
 
-    return renderCollapsibleContent({
-        title: t("Main Quests"),
-        content: questTable,
-        subheader: false,
-    });
+    return <CollapsibleContent title={t("Main Quests")} content={questTable} subheader={false} />;
 };
 
 const Spot = (props: {
@@ -366,12 +362,7 @@ const Spot = (props: {
         <QuestTable region={region} quests={filteredQuest} itemMap={itemMap} heelPortraits={heelPortraits} />
     );
 
-    return renderCollapsibleContent({
-        title: title,
-        content: questTable,
-        subheader: true,
-        initialOpen: filteredQuest.length > 0,
-    });
+    return <CollapsibleContent title={title} content={questTable} subheader initialOpen={filteredQuest.length > 0} />;
 };
 
 const SpotQuestList = (props: {
@@ -398,13 +389,8 @@ const SpotQuestList = (props: {
         </div>
     );
 
-    return renderCollapsibleContent(
-        {
-            title: props.title,
-            content: spots,
-            subheader: false,
-        },
-        !props.last
+    return (
+        <CollapsibleContent title={props.title} content={spots} subheader={false} enableBottomMargin={!props.last} />
     );
 };
 
@@ -471,14 +457,7 @@ const WarMapList = (props: {
             })}
         </Tabs>
     );
-    return renderCollapsibleContent(
-        {
-            title: props.title,
-            content: warMaps,
-            subheader: false,
-        },
-        !last
-    );
+    return <CollapsibleContent title={props.title} content={warMaps} subheader={false} enableBottomMargin={!last} />;
 };
 
 interface IProps extends RouteComponentProps, WithTranslation {
diff --git a/packages/db/src/Translations/en-US/common.json b/packages/db/src/Translations/en-US/common.json
index f1cf31ad..57c38a54 100644
--- a/packages/db/src/Translations/en-US/common.json
+++ b/packages/db/src/Translations/en-US/common.json
@@ -186,6 +186,7 @@
     "Field AI ID": "Field AI ID",
     "Field Trait": "Field Trait",
     "Figure": "Figure",
+    "Figures": "Figures",
     "Flag": "Flag",
     "Flags": "Flags",
     "Forced Support Servant_one": "Forced Support Servant",
@@ -229,6 +230,7 @@
     "interlude": "interlude",
     "Interlude": "Interlude",
     "Item": "Item",
+    "Items": "Items",
     "Label": "Label",
     "Level": "Level",
     "Limit": "Limit",
@@ -586,4 +588,4 @@
     "with local timestamps": "with local timestamps",
     "with UTC timestamps": "with UTC timestamps",
     "Yes": "Yes"
-}
\ No newline at end of file
+}
diff --git a/packages/db/src/Translations/id-ID/common.json b/packages/db/src/Translations/id-ID/common.json
index 72fc6d1f..3e035671 100644
--- a/packages/db/src/Translations/id-ID/common.json
+++ b/packages/db/src/Translations/id-ID/common.json
@@ -186,6 +186,7 @@
     "Field AI ID": "ID Field AI",
     "Field Trait": "Trait Field",
     "Figure": "Potret Figur",
+    "Figures": "Figures",
     "Flag": "Flag",
     "Flags": "Flag",
     "Forced Support Servant_one": "Support Servant Terharus",
@@ -229,6 +230,7 @@
     "interlude": "interlude",
     "Interlude": "Interlude",
     "Item": "Item",
+    "Items": "Items",
     "Label": "Label",
     "Level": "Level",
     "Limit": "Limit",
diff --git a/packages/db/src/Translations/ja-JP/common.json b/packages/db/src/Translations/ja-JP/common.json
index f070545c..38a431b9 100644
--- a/packages/db/src/Translations/ja-JP/common.json
+++ b/packages/db/src/Translations/ja-JP/common.json
@@ -186,6 +186,7 @@
     "Field AI ID": "フィールド AI ID",
     "Field Trait": "フィールド特性",
     "Figure": "人物像",
+    "Figures": "人物像",
     "Flag": "フラグ",
     "Flags": "フラグ",
     "Forced Support Servant_one": "サポートサーヴァント強制",
@@ -229,6 +230,7 @@
     "interlude": "幕間の物語",
     "Interlude": "幕間の物語",
     "Item": "アイテム",
+    "Items": "アイテム",
     "Label": "ラベル",
     "Level": "Level",
     "Limit": "制限",
diff --git a/packages/db/src/Translations/ko-KR/common.json b/packages/db/src/Translations/ko-KR/common.json
index c55f136f..c011c191 100644
--- a/packages/db/src/Translations/ko-KR/common.json
+++ b/packages/db/src/Translations/ko-KR/common.json
@@ -185,6 +185,7 @@
     "Field AI ID": "필드 AI ID",
     "Field Trait": "필드 특성",
     "Figure": "스탠딩",
+    "Figures": "스탠딩",
     "Flag": "태그",
     "Flags": "태그",
     "Forced Support Servant_one": "강제 서포트 서번트",
@@ -227,6 +228,7 @@
     "interlude": "막간",
     "Interlude": "막간",
     "Item": "아이템",
+    "Items": "아이템",
     "Label": "라벨",
     "Level": "Level",
     "Limit": "제한",
@@ -584,4 +586,4 @@
     "with local timestamps": "지역 시간 기준",
     "with UTC timestamps": "UTC 기준",
     "Yes": "Yes"
-}
+}
\ No newline at end of file
diff --git a/packages/db/src/Translations/zh-CN/common.json b/packages/db/src/Translations/zh-CN/common.json
index 89963686..2533ece4 100644
--- a/packages/db/src/Translations/zh-CN/common.json
+++ b/packages/db/src/Translations/zh-CN/common.json
@@ -185,6 +185,7 @@
     "Field AI ID": "场地AI ID",
     "Field Trait": "场地特性",
     "Figure": "立绘",
+    "Figures": "立绘",
     "Flag": "标志",
     "Flags": "标志",
     "Forced Support Servant_one": "限定助战",
@@ -226,6 +227,7 @@
     "interlude": "幕间物语",
     "Interlude": "幕间物语",
     "Item": "道具",
+    "Items": "道具",
     "Label": "标签",
     "Level": "Level",
     "Limit": "限制",
@@ -583,4 +585,4 @@
     "with local timestamps": "使用本地时间戳",
     "with UTC timestamps": "使用UTC时间戳",
     "Yes": "Yes"
-}
+}
\ No newline at end of file
diff --git a/packages/db/src/Translations/zh-TW/common.json b/packages/db/src/Translations/zh-TW/common.json
index 1b002b65..c30abed9 100644
--- a/packages/db/src/Translations/zh-TW/common.json
+++ b/packages/db/src/Translations/zh-TW/common.json
@@ -185,6 +185,7 @@
     "Field AI ID": "場地AI ID",
     "Field Trait": "場地特性",
     "Figure": "立繪",
+    "Figures": "立繪",
     "Flag": "標記",
     "Flags": "標記",
     "Forced Support Servant_one": "強制支援從者",
@@ -226,6 +227,7 @@
     "interlude": "幕間物語",
     "Interlude": "幕間物語",
     "Item": "道具",
+    "Items": "道具",
     "Label": "標籤",
     "Level": "Level",
     "Limit": "限制",
@@ -583,4 +585,4 @@
     "with local timestamps": "以本地時間戳記",
     "with UTC timestamps": "以UTC時間戳記",
     "Yes": "Yes"
-}
+}
\ No newline at end of file