diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx
index 98fbe88..49606ac 100644
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -4,10 +4,11 @@ import * as React from "react"
 import * as Tooltip from "@radix-ui/react-tooltip"
 
 interface Props {
+  isExpanded: boolean
   onClick: () => void
 }
 
-const PlayButton: React.FC<Props> = ({ onClick }) => {
+const PlayButton: React.FC<Props> = ({ isExpanded, onClick }) => {
   return (
     <Tooltip.Provider delayDuration={200}>
       <Tooltip.Root key={"Play Animation"}>
diff --git a/components/illustration/Alerts.tsx b/components/illustration/Alerts.tsx
index 534ea52..90cfb55 100644
--- a/components/illustration/Alerts.tsx
+++ b/components/illustration/Alerts.tsx
@@ -639,6 +639,7 @@ const Alerts: React.FC<{ isExpanded?: boolean }> = ({ isExpanded = false }) => {
         </defs>
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/Dashboard.tsx b/components/illustration/Dashboard.tsx
index a58a5de..1d19924 100644
--- a/components/illustration/Dashboard.tsx
+++ b/components/illustration/Dashboard.tsx
@@ -488,6 +488,7 @@ const Dashboard: React.FC<{ isExpanded?: boolean }> = ({
         </defs>
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/DataChangeAlert.tsx b/components/illustration/DataChangeAlert.tsx
index 48e308d..f21a52b 100644
--- a/components/illustration/DataChangeAlert.tsx
+++ b/components/illustration/DataChangeAlert.tsx
@@ -317,6 +317,7 @@ const DataChangeAlert: React.FC<{ isExpanded?: boolean }> = ({
         />
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/DataExport.tsx b/components/illustration/DataExport.tsx
index 088100f..e80d6a4 100644
--- a/components/illustration/DataExport.tsx
+++ b/components/illustration/DataExport.tsx
@@ -594,6 +594,7 @@ const DataExport: React.FC<{ isExpanded?: boolean }> = ({
         </defs>
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/DataSourceConnection.tsx b/components/illustration/DataSourceConnection.tsx
index ecdc67e..1e70cc0 100644
--- a/components/illustration/DataSourceConnection.tsx
+++ b/components/illustration/DataSourceConnection.tsx
@@ -115,6 +115,7 @@ const DataSourceConnection: React.FC<{ isExpanded?: boolean }> = ({
         />
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/DataThresholdAlert.tsx b/components/illustration/DataThresholdAlert.tsx
index 32c5b35..f16f2de 100644
--- a/components/illustration/DataThresholdAlert.tsx
+++ b/components/illustration/DataThresholdAlert.tsx
@@ -116,6 +116,7 @@ const DataThresholdAlert: React.FC<{ isExpanded?: boolean }> = ({
         />
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/GroupDashboard.tsx b/components/illustration/GroupDashboard.tsx
index db6e836..d808240 100644
--- a/components/illustration/GroupDashboard.tsx
+++ b/components/illustration/GroupDashboard.tsx
@@ -373,6 +373,7 @@ const GroupDashboard: React.FC<{ isExpanded?: boolean }> = ({
         />
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/Permissions.tsx b/components/illustration/Permissions.tsx
index b4175d6..be0fd17 100644
--- a/components/illustration/Permissions.tsx
+++ b/components/illustration/Permissions.tsx
@@ -599,6 +599,7 @@ const Permissions: React.FC<{ isExpanded?: boolean }> = ({
         </defs>
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/QueryBuilder.tsx b/components/illustration/QueryBuilder.tsx
index a59189b..2f89b79 100644
--- a/components/illustration/QueryBuilder.tsx
+++ b/components/illustration/QueryBuilder.tsx
@@ -784,6 +784,7 @@ const QueryBuilder: React.FC<{ isExpanded?: boolean }> = ({
         </defs>
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/SavedQuery.tsx b/components/illustration/SavedQuery.tsx
index e6c7ac8..07a6a6a 100644
--- a/components/illustration/SavedQuery.tsx
+++ b/components/illustration/SavedQuery.tsx
@@ -393,6 +393,7 @@ const SavedQuery: React.FC<{ isExpanded?: boolean }> = ({
         </defs>
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/SetAlerts.tsx b/components/illustration/SetAlerts.tsx
index e236d38..4a0fd87 100644
--- a/components/illustration/SetAlerts.tsx
+++ b/components/illustration/SetAlerts.tsx
@@ -275,6 +275,7 @@ const SetAlerts: React.FC<{ isExpanded?: boolean }> = ({
         </defs>
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/Sharing.tsx b/components/illustration/Sharing.tsx
index f052337..a3d32c7 100644
--- a/components/illustration/Sharing.tsx
+++ b/components/illustration/Sharing.tsx
@@ -462,6 +462,7 @@ const Sharing: React.FC<{ isExpanded?: boolean }> = ({
         </defs>
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/SlackAlert.tsx b/components/illustration/SlackAlert.tsx
index 6a218cb..e446b47 100644
--- a/components/illustration/SlackAlert.tsx
+++ b/components/illustration/SlackAlert.tsx
@@ -439,6 +439,7 @@ const SlackAlert: React.FC<{ isExpanded?: boolean }> = ({
         </defs>
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/TimelyUpdates.tsx b/components/illustration/TimelyUpdates.tsx
index be8e4f3..f76ccd0 100644
--- a/components/illustration/TimelyUpdates.tsx
+++ b/components/illustration/TimelyUpdates.tsx
@@ -282,6 +282,7 @@ const TimelyUpdates: React.FC<{ isExpanded?: boolean }> = ({
         />
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}
diff --git a/components/illustration/Visualize.tsx b/components/illustration/Visualize.tsx
index c32e554..2245e6b 100644
--- a/components/illustration/Visualize.tsx
+++ b/components/illustration/Visualize.tsx
@@ -450,6 +450,7 @@ const Visualize: React.FC<{ isExpanded?: boolean }> = ({
         </defs>
       </motion.svg>
       <PlayButton
+        isExpanded={isExpanded}
         onClick={() => {
           playAnimation()
         }}