diff --git a/JoyboyCommunity/src/assets/tipping-modal.png b/JoyboyCommunity/src/assets/tipping-modal.png
new file mode 100644
index 00000000..17e896f1
Binary files /dev/null and b/JoyboyCommunity/src/assets/tipping-modal.png differ
diff --git a/JoyboyCommunity/src/components/TippingModal/index.tsx b/JoyboyCommunity/src/components/TippingModal/index.tsx
new file mode 100644
index 00000000..30ee7927
--- /dev/null
+++ b/JoyboyCommunity/src/components/TippingModal/index.tsx
@@ -0,0 +1,69 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {Image, View} from 'react-native';
+import {Portal} from 'react-native-portalize';
+
+import {useStyles} from '../../hooks';
+import {MainStackNavigationProps} from '../../types';
+import {Button, Text} from '..';
+import stylesheet from './styles';
+
+export type TippingModalProps = {
+  user: string;
+  symbol: string;
+  amount: number;
+  visible?: boolean;
+};
+
+export const TippingModal: React.FC<TippingModalProps> = ({
+  user,
+  symbol,
+  amount,
+  visible = true,
+}) => {
+  const styles = useStyles(stylesheet);
+
+  const navigation = useNavigation<MainStackNavigationProps>();
+
+  if (!visible) return null;
+
+  return (
+    <Portal>
+      <View style={styles.container}>
+        <View style={styles.modalContainer}>
+          <View style={styles.modal}>
+            <View style={styles.logo}>
+              <Image
+                style={styles.logoImage}
+                source={require('../../assets/tipping-modal.png')}
+                resizeMode="cover"
+              />
+            </View>
+
+            <View style={styles.content}>
+              <Text color="text" weight="bold" fontSize={21} lineHeight={24}>
+                Tipped {user}
+              </Text>
+              <Text color="primary" weight="bold" fontSize={21} lineHeight={24}>
+                {amount} {symbol}
+              </Text>
+              <Text color="textSecondary" weight="medium" fontSize={15} lineHeight={24}>
+                Keep spreading love
+              </Text>
+
+              <Button
+                style={styles.button}
+                onPress={() => {
+                  navigation.navigate('Home');
+                }}
+                variant="secondary"
+              >
+                Home
+              </Button>
+            </View>
+          </View>
+        </View>
+      </View>
+    </Portal>
+  );
+};
diff --git a/JoyboyCommunity/src/components/TippingModal/styles.ts b/JoyboyCommunity/src/components/TippingModal/styles.ts
new file mode 100644
index 00000000..5b9b47cd
--- /dev/null
+++ b/JoyboyCommunity/src/components/TippingModal/styles.ts
@@ -0,0 +1,47 @@
+import {Spacing, ThemedStyleSheet} from '../../styles';
+
+export default ThemedStyleSheet((theme) => ({
+  container: {
+    flex: 1,
+  },
+  modalContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modal: {
+    width: '80%',
+    height: '40%',
+    backgroundColor: theme.colors.surface,
+    borderRadius: 24,
+  },
+  logo: {
+    position: 'absolute',
+    top: '-43%',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logoImage: {
+    width: 238,
+  },
+  content: {
+    gap: Spacing.small,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingHorizontal: Spacing.large,
+    paddingVertical: Spacing.medium,
+  },
+  button: {
+    width: '100%',
+  },
+}));