diff --git a/app/call.tsx b/app/call.tsx
index b9058bdc9..c6b4badd7 100644
--- a/app/call.tsx
+++ b/app/call.tsx
@@ -1,13 +1,116 @@
-import { View, Text } from 'react-native';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { Image, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import RNBootSplash from 'react-native-bootsplash';
+import changeNavigationBarColor from 'react-native-navigation-bar-color';
+import * as Haptics from 'expo-haptics';
+
+import { AnimatedRinger } from './containers/AnimatedRinger';
+import { CustomIcon, TIconsName } from './containers/CustomIcon';
+import { colors } from './lib/constants';
+import { getTheme, initialTheme } from './lib/methods/helpers/theme';
+import customStyle from './views/Styles';
+
+const CallButton = ({
+	backgroundColor,
+	iconName,
+	label,
+	onPress
+}: {
+	backgroundColor: string;
+	iconName: TIconsName;
+	label: string;
+	onPress: () => void;
+}) => (
+	<View style={{ alignItems: 'center' }}>
+		<TouchableOpacity onPress={() => onPress()} style={{ ...styles.callButton, backgroundColor }}>
+			<CustomIcon name={iconName} size={40} color='#FFF' />
+		</TouchableOpacity>
+		<Text style={styles.callButtonLabel}>{label}</Text>
+	</View>
+);
+
+const Call = () => {
+	const iTheme = initialTheme();
+	const theme = getTheme(iTheme);
+	const color = colors[theme];
+
+	useEffect(() => {
+		(async () => {
+			await RNBootSplash.hide({ fade: true });
+			changeNavigationBarColor(color.callBackgroundColor, true, true);
+		})();
+	}, []);
+
+	useEffect(() => {
+		let count = 0;
+
+		const interval = setInterval(() => {
+			Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+			count++;
+			if (count >= 10) {
+				clearInterval(interval);
+			}
+		}, 1000);
+
+		return () => clearInterval(interval);
+	}, []);
 
-const call = () => {
-	console.log('call');
 	return (
-		<View style={{ flex: 1 }}>
-			<Text>call</Text>
-		</View>
+		<>
+			<StatusBar backgroundColor={color.callBackgroundColor} barStyle={'dark-content'} />
+			<View style={{ flex: 1, backgroundColor: color.callBackgroundColor }}>
+				<View style={{ flex: 2 }}>
+					<View style={styles.topContainer}>
+						<View style={styles.imageContainer}>
+							<Image source={{ uri: 'https://i.ibb.co/VBsqb1k/download.jpg' }} style={styles.image} />
+						</View>
+						<Text style={styles.incomingCall}>Incoming Call</Text>
+						<AnimatedRinger delay={0} />
+						<AnimatedRinger delay={250} />
+						<AnimatedRinger delay={500} />
+						<AnimatedRinger delay={750} />
+						<AnimatedRinger delay={1000} />
+					</View>
+				</View>
+				<View style={styles.buttonsContainer}>
+					<CallButton backgroundColor={color.cancelCallButton} iconName='phone-end' label='Reject' onPress={() => {}} />
+					<CallButton backgroundColor={color.acceptCallButton} iconName='phone' label='Accept' onPress={() => {}} />
+				</View>
+			</View>
+		</>
 	);
 };
 
-export default call;
+export const styles = StyleSheet.create({
+	callButton: {
+		alignItems: 'center',
+		justifyContent: 'center',
+		height: 80,
+		width: 80,
+		borderRadius: 40
+	},
+	callButtonLabel: {
+		color: '#FFF',
+		marginTop: 16,
+		...customStyle.textMedium
+	},
+	incomingCall: {
+		color: '#FFF',
+		position: 'absolute',
+		zIndex: 1000,
+		bottom: 100,
+		fontSize: 20,
+		...customStyle.textMedium
+	},
+	topContainer: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'column'
+	},
+	buttonsContainer: { flex: 1, justifyContent: 'space-around', alignItems: 'center', flexDirection: 'row' },
+	imageContainer: { overflow: 'hidden', borderRadius: 100, width: 200, height: 200, zIndex: 1000 },
+	image: { width: 200, height: 200 }
+});
+
+export default Call;
diff --git a/app/lib/notifications/backgroundNotificationHandler.ts b/app/lib/notifications/backgroundNotificationHandler.ts
index 1ece182cd..db7985c40 100644
--- a/app/lib/notifications/backgroundNotificationHandler.ts
+++ b/app/lib/notifications/backgroundNotificationHandler.ts
@@ -1,8 +1,7 @@
 import notifee, { AndroidCategory, AndroidImportance, AndroidVisibility } from '@notifee/react-native';
 import messaging from '@react-native-firebase/messaging';
 import { Alert } from 'react-native';
-
-import { INotification } from '../../definitions';
+import ejson from 'ejson';
 
 export const backgroundNotificationHandler = async (): Promise<void> => {
 	// 1. get info on the device and the Power Manager settings
@@ -52,62 +51,71 @@ export const backgroundNotificationHandler = async (): Promise<void> => {
 			],
 			{ cancelable: false }
 		);
-
-		// videoConf channel
-		await notifee.createChannel({
-			id: 'call',
-			name: 'Video Call',
-			lights: true,
-			vibration: true,
-			importance: AndroidImportance.HIGH,
-			vibrationPattern: [300, 500]
-		});
 	}
 
-	notifee.registerForegroundService(notification => new Promise(() => {}));
+	// videoConf channel
+	await notifee.createChannel({
+		id: 'video-conf-call',
+		name: 'Video Call',
+		lights: true,
+		vibration: true,
+		importance: AndroidImportance.HIGH
+	});
 
-	notifee.onBackgroundEvent(e => new Promise(() => {}));
+	notifee.registerForegroundService(
+		notification =>
+			new Promise(() => {
+				console.log('registerForegroundService', notification);
+			})
+	);
+
+	notifee.onBackgroundEvent(
+		event =>
+			new Promise(() => {
+				console.log('onBackgroundEvent', event);
+			})
+	);
 };
 
 const setBackgroundNotificationHandler = async (): Promise<void> => {
-	messaging().setBackgroundMessageHandler(async (notification: INotification) => {
-		console.log('backgroundMessageHandler', notification);
-		await notifee.displayNotification({
-			title: '(21) 1234-1234',
-			body: 'Incoming call',
-			android: {
-				channelId: 'call',
-				category: AndroidCategory.CALL,
-				visibility: AndroidVisibility.PUBLIC,
-				importance: AndroidImportance.HIGH,
-				smallIcon: 'ic_launcher',
-				timestamp: Date.now(),
-				showTimestamp: true,
-				pressAction: {
-					id: 'default',
-					launchActivity: 'chat.rocket.reactnative.CustomCallActivity'
-				},
-				actions: [
-					{
-						title: 'Accept',
-						pressAction: {
-							id: 'accept',
-							launchActivity: 'default'
+	messaging().setBackgroundMessageHandler(async (n: any) => {
+		const notification = ejson.parse(n.data.ejson);
+		console.log('setBackgroundMessageHandler', notification, n);
+		if (notification) {
+			await notifee.displayNotification({
+				title: notification.sender?.name || notification.sender.username || 'Rocket.Chat',
+				body: 'Incoming call',
+				android: {
+					channelId: 'video-conf-call',
+					category: AndroidCategory.CALL,
+					visibility: AndroidVisibility.PUBLIC,
+					importance: AndroidImportance.HIGH,
+					smallIcon: 'ic_notification',
+					timestamp: Date.now(),
+					color: '#F5455C',
+					actions: [
+						{
+							title: 'Accept',
+							pressAction: {
+								id: 'accept',
+								launchActivity: 'default'
+							}
+						},
+						{
+							title: 'Decline',
+							pressAction: {
+								id: 'reject'
+							}
 						}
+					],
+					fullScreenAction: {
+						id: 'full-screen',
+						launchActivity: 'chat.rocket.reactnative.CustomCallActivity'
 					},
-					{
-						title: 'Decline',
-						pressAction: {
-							id: 'reject'
-						}
-					}
-				],
-				fullScreenAction: {
-					id: 'default',
-					launchActivity: 'chat.rocket.reactnative.CustomCallActivity'
+					lightUpScreen: true
 				}
-			}
-		});
+			});
+		}
 	});
 };