diff --git a/apps/web/app/(org)/dashboard/caps/components/Folders.tsx b/apps/web/app/(org)/dashboard/caps/components/Folders.tsx
index 4c10c09440..64193387f9 100644
--- a/apps/web/app/(org)/dashboard/caps/components/Folders.tsx
+++ b/apps/web/app/(org)/dashboard/caps/components/Folders.tsx
@@ -29,11 +29,19 @@ export const NormalFolder = React.forwardRef<
 		() => ({
 			play: (animationName: string) => {
 				if (!rive) return;
-				rive.play(animationName);
+				try {
+					rive.play(animationName);
+				} catch (error) {
+					console.warn("Failed to play folder animation", error);
+				}
 			},
 			stop: () => {
 				if (!rive) return;
-				rive.stop();
+				try {
+					rive.stop();
+				} catch (error) {
+					console.warn("Failed to stop folder animation", error);
+				}
 			},
 		}),
 		[rive],
@@ -66,11 +74,19 @@ export const BlueFolder = React.forwardRef<
 		() => ({
 			play: (animationName: string) => {
 				if (!rive) return;
-				rive.play(animationName);
+				try {
+					rive.play(animationName);
+				} catch (error) {
+					console.warn("Failed to play folder animation", error);
+				}
 			},
 			stop: () => {
 				if (!rive) return;
-				rive.stop();
+				try {
+					rive.stop();
+				} catch (error) {
+					console.warn("Failed to stop folder animation", error);
+				}
 			},
 		}),
 		[rive],
@@ -98,11 +114,19 @@ export const RedFolder = React.forwardRef<
 		() => ({
 			play: (animationName: string) => {
 				if (!rive) return;
-				rive.play(animationName);
+				try {
+					rive.play(animationName);
+				} catch (error) {
+					console.warn("Failed to play folder animation", error);
+				}
 			},
 			stop: () => {
 				if (!rive) return;
-				rive.stop();
+				try {
+					rive.stop();
+				} catch (error) {
+					console.warn("Failed to stop folder animation", error);
+				}
 			},
 		}),
 		[rive],
@@ -130,11 +154,19 @@ export const YellowFolder = React.forwardRef<
 		() => ({
 			play: (animationName: string) => {
 				if (!rive) return;
-				rive.play(animationName);
+				try {
+					rive.play(animationName);
+				} catch (error) {
+					console.warn("Failed to play folder animation", error);
+				}
 			},
 			stop: () => {
 				if (!rive) return;
-				rive.stop();
+				try {
+					rive.stop();
+				} catch (error) {
+					console.warn("Failed to stop folder animation", error);
+				}
 			},
 		}),
 		[rive],
@@ -177,11 +209,19 @@ export const AllFolders = React.forwardRef<FolderHandle, AllFoldersProps>(
 			() => ({
 				play: (animationName: string) => {
 					if (!rive) return;
-					rive.play(animationName);
+					try {
+						rive.play(animationName);
+					} catch (error) {
+						console.warn("Failed to play folder animation", error);
+					}
 				},
 				stop: () => {
 					if (!rive) return;
-					rive.stop();
+					try {
+						rive.stop();
+					} catch (error) {
+						console.warn("Failed to stop folder animation", error);
+					}
 				},
 			}),
 			[rive],
diff --git a/apps/web/app/(org)/dashboard/caps/components/NewFolderDialog.tsx b/apps/web/app/(org)/dashboard/caps/components/NewFolderDialog.tsx
index 065f2e4ea9..886e9055fe 100644
--- a/apps/web/app/(org)/dashboard/caps/components/NewFolderDialog.tsx
+++ b/apps/web/app/(org)/dashboard/caps/components/NewFolderDialog.tsx
@@ -84,7 +84,12 @@ export const NewFolderDialog: React.FC<Props> = ({
 	});
 
 	useEffect(() => {
-		if (!open) setSelectedColor(null);
+		if (!open) {
+			setSelectedColor(null);
+			Object.values(folderRefs.current).forEach((ref) => {
+				ref.current?.stop();
+			});
+		}
 	}, [open]);
 
 	const folderRefs = useRef(
@@ -156,21 +161,27 @@ export const NewFolderDialog: React.FC<Props> = ({
 										setSelectedColor(option.value);
 									}}
 									onMouseEnter={() => {
+										if (!riveFile) return;
 										const folderRef = folderRefs.current[option.value]?.current;
 										if (!folderRef) return;
 										folderRef.stop();
 										folderRef.play("folder-open");
 									}}
 									onMouseLeave={() => {
+										if (!riveFile) return;
 										const folderRef = folderRefs.current[option.value]?.current;
 										if (!folderRef) return;
 										folderRef.stop();
 										folderRef.play("folder-close");
 									}}
 								>
-									{option.component(
-										riveFile as RiveFile,
-										folderRefs.current[option.value],
+									{riveFile &&
+										option.component(
+											riveFile as RiveFile,
+											folderRefs.current[option.value],
+										)}
+									{!riveFile && (
+										<div className="w-[50px] h-[50px] bg-gray-4 rounded animate-pulse" />
 									)}
 									<p className="text-xs text-gray-10">{option.label}</p>
 								</div>
diff --git a/apps/web/app/(org)/dashboard/folder/[id]/components/SubfolderDialog.tsx b/apps/web/app/(org)/dashboard/folder/[id]/components/SubfolderDialog.tsx
index 3fdc67ba35..1cc7070b14 100644
--- a/apps/web/app/(org)/dashboard/folder/[id]/components/SubfolderDialog.tsx
+++ b/apps/web/app/(org)/dashboard/folder/[id]/components/SubfolderDialog.tsx
@@ -91,6 +91,9 @@ export const SubfolderDialog: React.FC<Props> = ({
 		if (!open) {
 			setSelectedColor(null);
 			setFolderName("");
+			Object.values(folderRefs.current).forEach((ref) => {
+				ref.current?.stop();
+			});
 		}
 	}, [open]);
 
@@ -163,21 +166,27 @@ export const SubfolderDialog: React.FC<Props> = ({
 										setSelectedColor(option.value);
 									}}
 									onMouseEnter={() => {
+										if (!riveFile) return;
 										const folderRef = folderRefs.current[option.value]?.current;
 										if (!folderRef) return;
 										folderRef.stop();
 										folderRef.play("folder-open");
 									}}
 									onMouseLeave={() => {
+										if (!riveFile) return;
 										const folderRef = folderRefs.current[option.value]?.current;
 										if (!folderRef) return;
 										folderRef.stop();
 										folderRef.play("folder-close");
 									}}
 								>
-									{option.component(
-										riveFile as RiveFile,
-										folderRefs.current[option.value],
+									{riveFile &&
+										option.component(
+											riveFile as RiveFile,
+											folderRefs.current[option.value],
+										)}
+									{!riveFile && (
+										<div className="w-[50px] h-[50px] rounded bg-gray-4 animate-pulse" />
 									)}
 									<p className="text-xs text-gray-10">{option.label}</p>
 								</div>