diff --git a/src/components/avatar-effects/AvatarEffectsView.tsx b/src/components/avatar-effects/AvatarEffectsView.tsx
index cc98168..887b9fb 100644
--- a/src/components/avatar-effects/AvatarEffectsView.tsx
+++ b/src/components/avatar-effects/AvatarEffectsView.tsx
@@ -111,6 +111,13 @@ export const AvatarEffectsView: FC<{}> = () =>
         setIsVisible(false);
     }, [ selectedId ]);
 
+    const removeCurrentEffect = useCallback(() =>
+    {
+        SendMessageComposer(new AvatarEffectActivatedComposer(0));
+        setSelectedId(0);
+        setIsVisible(false);
+    }, []);
+
     const onClose = useCallback(() => setIsVisible(false), []);
 
     const filteredEffects = useMemo(() =>
@@ -194,9 +201,14 @@ export const AvatarEffectsView: FC<{}> = () =>
                             </div>
                         }
                     </div>
-                    <Button variant="success" disabled={ !selectedId } onClick={ applySelectedEffect } className="w-full mt-2">
-                        { LocalizeText('inventory.effects.activate') || 'Use' }
-                    </Button>
+                    <div className="flex gap-1 mt-2">
+                        <Button variant="success" disabled={ !selectedId } onClick={ applySelectedEffect } className="flex-1">
+                            { LocalizeText('inventory.effects.activate') || 'Use effect' }
+                        </Button>
+                        <Button variant="danger" onClick={ removeCurrentEffect } className="flex-1">
+                            { LocalizeText('inventory.effects.remove') || 'Remove effect' }
+                        </Button>
+                    </div>
                 </Column>
                 <Column overflow="hidden" className="flex-1 min-h-0">
                     <div className="relative">