diff --git a/web/components/SettledUpState.tsx b/web/components/SettledUpState.tsx
new file mode 100644
index 00000000..3fbae54c
--- /dev/null
+++ b/web/components/SettledUpState.tsx
@@ -0,0 +1,52 @@
+import { motion } from 'framer-motion';
+import { Check } from 'lucide-react';
+import React from 'react';
+import { THEMES } from '../constants';
+import { useTheme } from '../contexts/ThemeContext';
+import { Confetti } from './ui/Confetti';
+
+export const SettledUpState = () => {
+    const { style } = useTheme();
+
+    return (
+        <div className="col-span-full flex flex-col items-center justify-center py-20 relative">
+            <Confetti count={100} />
+
+            <motion.div
+                initial={{ scale: 0, rotate: -180 }}
+                animate={{ scale: 1, rotate: 0 }}
+                transition={{
+                    type: "spring",
+                    stiffness: 260,
+                    damping: 20,
+                    delay: 0.1
+                }}
+                className={`w-24 h-24 flex items-center justify-center mx-auto mb-6 ${
+                    style === THEMES.NEOBRUTALISM
+                        ? 'bg-emerald-100 border-2 border-black rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]'
+                        : 'bg-emerald-100 dark:bg-emerald-900/20 rounded-full ring-4 ring-emerald-500/20'
+                }`}
+            >
+                <motion.div
+                    initial={{ opacity: 0, scale: 0.5 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ delay: 0.2 }}
+                >
+                    <Check size={48} strokeWidth={3} className={style === THEMES.NEOBRUTALISM ? 'text-black' : 'text-emerald-500'} />
+                </motion.div>
+            </motion.div>
+
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.3 }}
+                className="text-center"
+            >
+                <h3 className={`text-3xl font-black mb-2 ${style === THEMES.NEOBRUTALISM ? 'text-black' : 'text-emerald-500'}`}>
+                    All Settled Up!
+                </h3>
+                <p className="opacity-60 text-lg">No outstanding balances in this group.</p>
+            </motion.div>
+        </div>
+    );
+};
diff --git a/web/components/ui/Confetti.tsx b/web/components/ui/Confetti.tsx
new file mode 100644
index 00000000..53cd4c79
--- /dev/null
+++ b/web/components/ui/Confetti.tsx
@@ -0,0 +1,65 @@
+import { motion } from 'framer-motion';
+import React, { useEffect, useState } from 'react';
+import { COLORS } from '../../constants';
+
+interface ConfettiProps {
+  count?: number;
+}
+
+interface Particle {
+  id: number;
+  x: number;
+  y: number;
+  color: string;
+  size: number;
+  rotation: number;
+  duration: number;
+  delay: number;
+}
+
+export const Confetti = ({ count = 50 }: ConfettiProps) => {
+  const [particles, setParticles] = useState<Particle[]>([]);
+
+  useEffect(() => {
+    const newParticles: Particle[] = Array.from({ length: count }).map((_, i) => ({
+      id: i,
+      x: Math.random() * 100, // percent
+      y: -10, // start above
+      color: COLORS[Math.floor(Math.random() * COLORS.length)],
+      size: Math.random() * 8 + 4,
+      rotation: Math.random() * 360,
+      duration: Math.random() * 2 + 2,
+      delay: Math.random() * 0.5,
+    }));
+    setParticles(newParticles);
+  }, [count]);
+
+  return (
+    <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden" aria-hidden="true">
+      {particles.map((p) => (
+        <motion.div
+          key={p.id}
+          initial={{ y: '-5vh', x: `${p.x}vw`, rotate: p.rotation, opacity: 1 }}
+          animate={{
+            y: '105vh',
+            rotate: p.rotation + 720,
+            x: `${p.x + (Math.random() * 20 - 10)}vw`,
+            opacity: 0,
+          }}
+          transition={{
+            duration: p.duration,
+            delay: p.delay,
+            ease: 'easeOut',
+          }}
+          style={{
+            position: 'absolute',
+            width: p.size,
+            height: p.size,
+            backgroundColor: p.color,
+            borderRadius: Math.random() > 0.5 ? '50%' : '0%',
+          }}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/web/pages/GroupDetails.tsx b/web/pages/GroupDetails.tsx
index b2b76c25..62ffe176 100644
--- a/web/pages/GroupDetails.tsx
+++ b/web/pages/GroupDetails.tsx
@@ -3,6 +3,7 @@ import { ArrowRight, Banknote, Check, Copy, DollarSign, Hash, Layers, LogOut, Pi
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { AnalyticsContent } from '../components/AnalyticsContent';
+import { SettledUpState } from '../components/SettledUpState';
 import { Button } from '../components/ui/Button';
 import { Input } from '../components/ui/Input';
 import { Modal } from '../components/ui/Modal';
@@ -847,13 +848,7 @@ export const GroupDetails = () => {
                             </motion.div>
                         ))}
                         {!loading && settlements.length === 0 && (
-                            <div className="col-span-full text-center py-20">
-                                <div className={`w-24 h-24 flex items-center justify-center mx-auto mb-6 ${style === THEMES.NEOBRUTALISM ? 'bg-emerald-100 border-2 border-black rounded-none' : 'bg-emerald-100 dark:bg-emerald-900/20 rounded-full'}`}>
-                                    <Check size={48} className={style === THEMES.NEOBRUTALISM ? 'text-black' : 'text-emerald-500'} />
-                                </div>
-                                <h3 className={`text-2xl font-black ${style === THEMES.NEOBRUTALISM ? 'text-black' : 'text-emerald-500'}`}>All Settled Up!</h3>
-                                <p className="opacity-60">No outstanding balances in this group.</p>
-                            </div>
+                            <SettledUpState />
                         )}
                     </motion.div>
                 )}