diff --git a/frontend/App.js b/frontend/App.js
index 7a4d422..df7beb0 100644
--- a/frontend/App.js
+++ b/frontend/App.js
@@ -8,6 +8,7 @@ import "react-native-gesture-handler";
 import Theme from "./components/Shared/Theme";
 import AuthModal from "./components/Pages/Auth/AuthModal";
 import MainNavigator from "./components/Navigation";
+import Confetti from "./components/Shared/Confetti/Confetti";
 import { CommunityProvider } from "./components/Contexts/CommunityContext";
 
 export default function App() {
@@ -17,6 +18,7 @@ export default function App() {
       <CommunityProvider>
         <NavigationContainer>
           <AuthModal />
+          <Confetti />
           <MainNavigator />
         </NavigationContainer>
       </CommunityProvider>
diff --git a/frontend/components/Pages/ActionsPage/ActionDetails.js b/frontend/components/Pages/ActionsPage/ActionDetails.js
index 1073f25..96ddad5 100644
--- a/frontend/components/Pages/ActionsPage/ActionDetails.js
+++ b/frontend/components/Pages/ActionsPage/ActionDetails.js
@@ -22,6 +22,7 @@ import { CommunityContext, useDetails } from "../../Contexts/CommunityContext";
 import { TestimonialCard } from "../TestimonialsPage/TestimonialsCard";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import { getActionMetric } from "../../Shared/Utils";
+import ConfettiController from "../../Shared/Confetti/ConfettiController";
 
 export default function ActionDetails({ route, navigation }) {
   const { action_id } = route.params;
@@ -142,6 +143,11 @@ export default function ActionDetails({ route, navigation }) {
     }
   };
 
+  const completeThisAction = () => {
+    setIsDoneOpen(true);
+    ConfettiController.startConfetti();
+  }
+
   return (
     <Page>
       {isActionLoading ? (
@@ -197,7 +203,7 @@ export default function ActionDetails({ route, navigation }) {
                         color: "white",
                         fontWeight: "bold",
                       }}
-                      onPress={() => setIsDoneOpen(true)}
+                      onPress={completeThisAction}
                     >
                       Done
                     </Button>
diff --git a/frontend/components/Shared/Confetti/Confetti.js b/frontend/components/Shared/Confetti/Confetti.js
new file mode 100644
index 0000000..e36e41c
--- /dev/null
+++ b/frontend/components/Shared/Confetti/Confetti.js
@@ -0,0 +1,38 @@
+import React, { forwardRef, useLayoutEffect, useState } from "react";
+
+import { View } from "native-base";
+import ConfettiCannon from "react-native-confetti-cannon";
+
+import ConfettiController from "./ConfettiController";
+
+const Confetti = () => {
+  let ref;
+  const [isConfettiVisible, setIsConfettiVisible] = useState(false);
+
+  useLayoutEffect(() => {
+    ConfettiController.setConfettiRef(ref);
+  }, []);
+
+  return (
+    <View
+      position="absolute"
+      height="100%"
+      width="100%"
+      zIndex={999}
+      display={isConfettiVisible ? "block" : "none"}
+    >
+      <ConfettiCannon
+        count={50}
+        origin={{ x: -10, y: 0 }}
+        fallSpeed={1500}
+        fadeOut={true}
+        autoStart={false}
+        onAnimationStart={() => setIsConfettiVisible(true)}
+        onAnimationEnd={() => setIsConfettiVisible(false)}
+        ref={(_ref) => (ref = _ref)}
+      />
+    </View>
+  );
+};
+
+export default forwardRef(Confetti);
diff --git a/frontend/components/Shared/Confetti/ConfettiController.js b/frontend/components/Shared/Confetti/ConfettiController.js
new file mode 100644
index 0000000..67f4af4
--- /dev/null
+++ b/frontend/components/Shared/Confetti/ConfettiController.js
@@ -0,0 +1,15 @@
+export default class ConfettiController {
+    static confettiRef;
+
+    static setConfettiRef = (ref) => {
+        this.confettiRef = ref;
+    };
+
+    static startConfetti() {
+        this.confettiRef?.start();
+    }
+
+    static stopConfetti() {
+        this.confettiRef?.stop();
+    }
+}
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1bbf50a..3e56a45 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,6 +23,7 @@
         "pinar": "^0.12.2",
         "react": "18.2.0",
         "react-native": "0.72.3",
+        "react-native-confetti-cannon": "^1.5.2",
         "react-native-gesture-handler": "~2.12.0",
         "react-native-reanimated": "~3.3.0",
         "react-native-render-html": "^6.3.4",
@@ -15139,6 +15140,11 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-confetti-cannon": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/react-native-confetti-cannon/-/react-native-confetti-cannon-1.5.2.tgz",
+      "integrity": "sha512-IZuWjlW7QsdxEGNnvpD6W+7iKCCQhnd5BvuNvMtirU7Nxm8WS2N6LPGMBz1ZYDuusG+GRZkoXXTNCdoAAGpCTg=="
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6985c8f..3776555 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "pinar": "^0.12.2",
     "react": "18.2.0",
     "react-native": "0.72.3",
+    "react-native-confetti-cannon": "^1.5.2",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-reanimated": "~3.3.0",
     "react-native-render-html": "^6.3.4",