diff --git a/package.json b/package.json
index f43f8b0..b504e77 100644
--- a/package.json
+++ b/package.json
@@ -14,13 +14,11 @@
         "@emoji-mart/data": "^1.2.1",
         "@emoji-mart/react": "^1.1.1",
         "@tanstack/react-virtual": "3.13.24",
-        "@types/react-transition-group": "^4.4.12",
         "dompurify": "^3.4.1",
         "emoji-mart": "^5.6.0",
         "emoji-toolkit": "10.0.0",
         "framer-motion": "^12.38.0",
         "react": "^19.2.5",
-        "react-bootstrap": "^2.10.10",
         "react-dom": "^19.2.5",
         "react-icons": "^5.5.0",
         "react-slider": "^2.0.6",
diff --git a/src/common/transitions/TransitionAnimation.tsx b/src/common/transitions/TransitionAnimation.tsx
index 8e34849..db90938 100644
--- a/src/common/transitions/TransitionAnimation.tsx
+++ b/src/common/transitions/TransitionAnimation.tsx
@@ -1,6 +1,6 @@
-import { FC, ReactNode, useEffect, useState } from 'react';
-import { Transition } from 'react-transition-group';
-import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
+import { AnimatePresence, motion, Variants } from 'framer-motion';
+import { FC, ReactNode } from 'react';
+import { getTransitionVariants } from './TransitionAnimationStyles';
 
 interface TransitionAnimationProps
 {
@@ -15,38 +15,22 @@ export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
 {
     const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
 
-    const [ isChildrenVisible, setChildrenVisible ] = useState(false);
-
-    useEffect(() =>
-    {
-        let timeoutData: ReturnType<typeof setTimeout> = null;
-
-        if(inProp)
-        {
-            setChildrenVisible(true);
-        }
-        else
-        {
-            timeoutData = setTimeout(() =>
-            {
-                setChildrenVisible(false);
-                clearTimeout(timeout);
-            }, timeout);
-        }
-
-        return () =>
-        {
-            if(timeoutData) clearTimeout(timeoutData);
-        };
-    }, [ inProp, timeout ]);
+    const variants: Variants = getTransitionVariants(type);
+    const duration = timeout / 1000;
 
     return (
-        <Transition in={ inProp } timeout={ timeout }>
-            { state => (
-                <div className={ (className ?? '') + ' animate__animated' } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
-                    { isChildrenVisible && children }
-                </div>
+        <AnimatePresence initial={ false }>
+            { inProp && (
+                <motion.div
+                    className={ className ?? '' }
+                    variants={ variants }
+                    initial="hidden"
+                    animate="visible"
+                    exit="exit"
+                    transition={ { duration } }>
+                    { children }
+                </motion.div>
             ) }
-        </Transition>
+        </AnimatePresence>
     );
 };
diff --git a/src/common/transitions/TransitionAnimationStyles.ts b/src/common/transitions/TransitionAnimationStyles.ts
index feebdcc..ab7315e 100644
--- a/src/common/transitions/TransitionAnimationStyles.ts
+++ b/src/common/transitions/TransitionAnimationStyles.ts
@@ -1,136 +1,66 @@
-import { CSSProperties } from 'react';
-import { TransitionStatus } from 'react-transition-group';
-import { ENTERING, EXITING } from 'react-transition-group/Transition';
+import { Variants } from 'framer-motion';
 import { TransitionAnimationTypes } from './TransitionAnimationTypes';
 
-export function getTransitionAnimationStyle(type: string, transition: TransitionStatus, timeout: number = 300): Partial<CSSProperties>
+export function getTransitionVariants(type: string): Variants
 {
     switch(type)
     {
         case TransitionAnimationTypes.BOUNCE:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'bounceIn',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'bounceOut',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
+            return {
+                hidden: { opacity: 0, scale: 0.3 },
+                visible: { opacity: 1, scale: 1, transition: { type: 'spring', stiffness: 260, damping: 12 } },
+                exit: { opacity: 0, scale: 0.3 }
+            };
         case TransitionAnimationTypes.SLIDE_LEFT:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'slideInLeft',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'slideOutLeft',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
+            return {
+                hidden: { opacity: 0, x: '-100%' },
+                visible: { opacity: 1, x: 0 },
+                exit: { opacity: 0, x: '-100%' }
+            };
         case TransitionAnimationTypes.SLIDE_RIGHT:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'slideInRight',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'slideOutRight',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
+            return {
+                hidden: { opacity: 0, x: '100%' },
+                visible: { opacity: 1, x: 0 },
+                exit: { opacity: 0, x: '100%' }
+            };
         case TransitionAnimationTypes.FLIP_X:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'flipInX',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'flipOutX',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
+            return {
+                hidden: { opacity: 0, rotateX: 90 },
+                visible: { opacity: 1, rotateX: 0 },
+                exit: { opacity: 0, rotateX: 90 }
+            };
         case TransitionAnimationTypes.FADE_UP:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'fadeInUp',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'fadeOutDown',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
+            return {
+                hidden: { opacity: 0, y: 20 },
+                visible: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: 20 }
+            };
         case TransitionAnimationTypes.FADE_IN:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'fadeIn',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'fadeOut',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
+            return {
+                hidden: { opacity: 0 },
+                visible: { opacity: 1 },
+                exit: { opacity: 0 }
+            };
         case TransitionAnimationTypes.FADE_DOWN:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'fadeInDown',
-                        animationDuration: `${ timeout }ms`
-                    };
-                case EXITING:
-                    return {
-                        animationName: 'fadeOutUp',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
+            return {
+                hidden: { opacity: 0, y: -20 },
+                visible: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: -20 }
+            };
         case TransitionAnimationTypes.HEAD_SHAKE:
-            switch(transition)
-            {
-                default:
-                    return {};
-                case ENTERING:
-                    return {
-                        animationName: 'headShake',
-                        animationDuration: `${ timeout }ms`
-                    };
-            }
+            return {
+                hidden: { x: 0 },
+                visible: {
+                    x: [ 0, -6, 5, -3, 2, 0 ],
+                    transition: { duration: 0.5 }
+                },
+                exit: { x: 0 }
+            };
     }
 
-    return null;
+    return {
+        hidden: {},
+        visible: {},
+        exit: {}
+    };
 }
diff --git a/src/components/purse/views/CurrencyView.tsx b/src/components/purse/views/CurrencyView.tsx
index 9f72158..47c07ab 100644
--- a/src/components/purse/views/CurrencyView.tsx
+++ b/src/components/purse/views/CurrencyView.tsx
@@ -1,5 +1,4 @@
 import { FC, useMemo } from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { LocalizeFormattedNumber, LocalizeShortNumber } from '../../../api';
 import { Flex, LayoutCurrencyIcon, Text } from '../../../common';
 
@@ -17,23 +16,22 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
     const element = useMemo(() =>
     {
         return (
-            <Flex justifyContent="end" pointer gap={ 1 } className={`nitro-purse-button rounded allcurrencypurse nitro-purse-button currency-${type}`}>
+            <Flex justifyContent="end" pointer gap={ 1 } className={ `nitro-purse-button rounded allcurrencypurse nitro-purse-button currency-${ type }` }>
                 <Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
                 <LayoutCurrencyIcon type={ type } />
             </Flex>);
     }, [ amount, short, type ]);
 
     if(!short) return element;
-    
+
     return (
-        <OverlayTrigger
-            placement="left"
-            overlay={
-                <Tooltip id={ `tooltip-${ type }` }>
-                    { LocalizeFormattedNumber(amount) }
-                </Tooltip>
-            }>
+        <div className="group relative">
             { element }
-        </OverlayTrigger>
+            <div
+                role="tooltip"
+                className="pointer-events-none absolute right-full top-1/2 z-50 mr-2 -translate-y-1/2 whitespace-nowrap rounded bg-black/80 px-2 py-1 text-xs text-white opacity-0 shadow transition-opacity duration-150 group-hover:opacity-100">
+                { LocalizeFormattedNumber(amount) }
+            </div>
+        </div>
     );
 }