diff --git a/src/def.d.ts b/src/def.d.ts
index d7a5f87..3f4d11d 100644
--- a/src/def.d.ts
+++ b/src/def.d.ts
@@ -11,6 +11,7 @@ interface SummaryProps {
     label: string;
     icon?: string;
     noPadding?: boolean;
+    noAnimation?: boolean;
     children: JSX.Element | JSX.Element[];
 }
 
diff --git a/src/ui/components/Summary.tsx b/src/ui/components/Summary.tsx
index ef9347b..55c38a7 100644
--- a/src/ui/components/Summary.tsx
+++ b/src/ui/components/Summary.tsx
@@ -3,10 +3,9 @@ import { Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
 import { ReactNative as RN } from "@metro/common";
 
-// TODO: Animated would be awesome
 // TODO: Destructuring Forms doesn't work here. Why?
 
-export default function Summary({ label, icon, noPadding = false, children }: SummaryProps) {
+export default function Summary({ label, icon, noPadding = false, noAnimation = false, children }: SummaryProps) {
     const [hidden, setHidden] = React.useState(true);
 
     return (
@@ -14,8 +13,11 @@ export default function Summary({ label, icon, noPadding = false, children }: Su
             <Forms.FormRow
                 label={label}
                 leading={icon && <Forms.FormRow.Icon source={getAssetIDByName(icon)} />}
-                trailing={<Forms.FormRow.Arrow style={{ transform: [{ rotate: `${hidden ? 180 : 90}deg` }] }} source={getAssetIDByName("down_arrow")} />}
-                onPress={() => setHidden(!hidden)}
+                trailing={<Forms.FormRow.Arrow style={{ transform: [{ rotate: `${hidden ? 180 : 90}deg` }] }} />}
+                onPress={() => {
+                    setHidden(!hidden);
+                    if (!noAnimation) RN.LayoutAnimation.configureNext(RN.LayoutAnimation.Presets.easeInEaseOut);
+                }}
             />
             {!hidden && <>
                 <Forms.FormDivider />