diff --git a/apps/mobile/app/screens/Authenticated/MembersSettingsScreen/index.tsx b/apps/mobile/app/screens/Authenticated/MembersSettingsScreen/index.tsx
index 8035b030d..e4dd2c4a6 100644
--- a/apps/mobile/app/screens/Authenticated/MembersSettingsScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/MembersSettingsScreen/index.tsx
@@ -1,102 +1,96 @@
 /* eslint-disable camelcase */
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-native/no-color-literals */
-import { View, Text, ViewStyle, TouchableOpacity, StyleSheet } from "react-native"
-import React, { FC, SetStateAction, useState } from "react"
+import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, StatusBar } from 'react-native';
+import React, { FC, SetStateAction, useState } from 'react';
 import {
 	AuthenticatedDrawerScreenProps,
 	DrawerNavigationProp,
-	SettingScreenNavigationProp,
-} from "../../../navigators/AuthenticatedNavigator"
-import { Screen } from "../../../components"
-import { typography, useAppTheme } from "../../../theme"
-import { AntDesign, Feather } from "@expo/vector-icons"
-import { translate } from "../../../i18n"
-import { useStores } from "../../../models"
-import MembersList from "./components/MembersList"
-import { OT_Member } from "../../../services/interfaces/IOrganizationTeam"
-import { SvgXml } from "react-native-svg"
-import { moreButtonDark, moreButtonLight } from "../../../components/svgs/icons"
-import { GLOBAL_STYLE as GS } from "../../../../assets/ts/styles"
-import ChangeRoleModal from "./components/ChangeRoleModal"
-import ConfirmationModal from "../../../components/ConfirmationModal"
-import { useOrganizationTeam } from "../../../services/hooks/useOrganization"
-import { useTeamMemberCard } from "../../../services/hooks/features/useTeamMemberCard"
-import { useNavigation } from "@react-navigation/native"
+	SettingScreenNavigationProp
+} from '../../../navigators/AuthenticatedNavigator';
+import { Screen } from '../../../components';
+import { typography, useAppTheme } from '../../../theme';
+import { AntDesign, Feather } from '@expo/vector-icons';
+import { translate } from '../../../i18n';
+import { useStores } from '../../../models';
+import MembersList from './components/MembersList';
+import { OT_Member } from '../../../services/interfaces/IOrganizationTeam';
+import { SvgXml } from 'react-native-svg';
+import { moreButtonDark, moreButtonLight } from '../../../components/svgs/icons';
+import { GLOBAL_STYLE as GS } from '../../../../assets/ts/styles';
+import ChangeRoleModal from './components/ChangeRoleModal';
+import ConfirmationModal from '../../../components/ConfirmationModal';
+import { useOrganizationTeam } from '../../../services/hooks/useOrganization';
+import { useTeamMemberCard } from '../../../services/hooks/features/useTeamMemberCard';
+import { useNavigation } from '@react-navigation/native';
 
-export const MembersSettingsScreen: FC<AuthenticatedDrawerScreenProps<"MembersSettingsScreen">> = (
-	_props,
-) => {
-	const { colors, dark } = useAppTheme()
+export const MembersSettingsScreen: FC<AuthenticatedDrawerScreenProps<'MembersSettingsScreen'>> = (_props) => {
+	const { colors, dark } = useAppTheme();
 	// const { navigation } = _props
-	const { isTeamManager } = useOrganizationTeam()
+	const { isTeamManager } = useOrganizationTeam();
 
 	const {
-		teamStore: { activeTeam },
-	} = useStores()
+		teamStore: { activeTeam }
+	} = useStores();
 
-	const [selectMode, setSelectMode] = useState<boolean>(false)
-	const [showDropdownMenu, setShowDropdownMenu] = useState<boolean>(false)
-	const [selectedMembers, setSelectedMembers] = useState<OT_Member[]>([])
-	const [isNameEditMode, setIsNameEditMode] = useState<boolean>(false)
+	const [selectMode, setSelectMode] = useState<boolean>(false);
+	const [showDropdownMenu, setShowDropdownMenu] = useState<boolean>(false);
+	const [selectedMembers, setSelectedMembers] = useState<OT_Member[]>([]);
+	const [isNameEditMode, setIsNameEditMode] = useState<boolean>(false);
 
-	const navigation = useNavigation<SettingScreenNavigationProp<"Profile">>()
-	const alternateNavigation = useNavigation<DrawerNavigationProp<"AuthenticatedTab">>()
+	const navigation = useNavigation<SettingScreenNavigationProp<'Profile'>>();
+	const alternateNavigation = useNavigation<DrawerNavigationProp<'AuthenticatedTab'>>();
 
 	const addOrRemoveToSelectedList = (member: OT_Member): void => {
 		if (selectMode) {
 			if (!selectedMembers.some((selected) => selected.id === member.id)) {
-				setSelectedMembers([...selectedMembers, member])
+				setSelectedMembers([...selectedMembers, member]);
 			} else {
 				const updatedSelectedMembers = selectedMembers.filter(
-					(selectedMember) => selectedMember.id !== member.id,
-				)
-				setSelectedMembers(updatedSelectedMembers)
+					(selectedMember) => selectedMember.id !== member.id
+				);
+				setSelectedMembers(updatedSelectedMembers);
 				if (selectedMembers.length === 1) {
-					setSelectMode(false)
-					setShowDropdownMenu(false)
+					setSelectMode(false);
+					setShowDropdownMenu(false);
 				}
 			}
 		} else {
-			alternateNavigation.navigate("AuthenticatedTab")
+			alternateNavigation.navigate('AuthenticatedTab');
 			setTimeout(() => {
-				navigation.navigate("Profile", {
+				navigation.navigate('Profile', {
 					userId: member?.employee?.userId,
-					activeTab: "worked",
-				})
-			}, 50)
+					activeTab: 'worked'
+				});
+			}, 50);
 		}
-	}
+	};
 
 	const setSelectMembersMode = (member: OT_Member): void => {
-		if (!isTeamManager) return
+		if (!isTeamManager) return;
 		if (!selectMode) {
-			setSelectMode(true)
+			setSelectMode(true);
 		}
 		if (!selectedMembers.some((selectedMember) => selectedMember.id === member.id)) {
-			const updatedSelectedMembers = [...selectedMembers, member]
-			setSelectedMembers(updatedSelectedMembers)
+			const updatedSelectedMembers = [...selectedMembers, member];
+			setSelectedMembers(updatedSelectedMembers);
 		}
-		setSelectMode(true)
-	}
+		setSelectMode(true);
+	};
 
 	return (
-		<Screen
-			contentContainerStyle={[$container, { backgroundColor: colors.background }]}
-			safeAreaEdges={["top"]}
-		>
+		<Screen contentContainerStyle={[$container, { backgroundColor: colors.background }]} safeAreaEdges={['top']}>
+			<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
 			<View style={[$headerContainer, { backgroundColor: colors.background }]}>
 				<View style={[styles.container, { backgroundColor: colors.background }]}>
-					<TouchableOpacity onPress={() => navigation.navigate("Setting")}>
+					<TouchableOpacity onPress={() => navigation.navigate('Setting')}>
 						<AntDesign name="arrowleft" size={24} color={colors.primary} />
 					</TouchableOpacity>
 					<Text style={[styles.title, { color: colors.primary }]}>
-						{translate("settingScreen.membersSettingsScreen.mainTitle")}
+						{translate('settingScreen.membersSettingsScreen.mainTitle')}
 					</Text>
-					<View style={{ position: "relative" }}>
-						<TouchableOpacity
-							onPress={() => selectMode && setShowDropdownMenu(!showDropdownMenu)}
-						>
+					<View style={{ position: 'relative' }}>
+						<TouchableOpacity onPress={() => selectMode && setShowDropdownMenu(!showDropdownMenu)}>
 							{selectMode ? (
 								showDropdownMenu ? (
 									<AntDesign name="close" size={24} color={colors.primary} />
@@ -128,16 +122,16 @@ export const MembersSettingsScreen: FC<AuthenticatedDrawerScreenProps<"MembersSe
 				addOrRemoveToSelectedList={addOrRemoveToSelectedList}
 			/>
 		</Screen>
-	)
-}
+	);
+};
 
 interface IMenuDropdown {
-	showDropdownMenu: boolean
-	setShowDropdownMenu: React.Dispatch<SetStateAction<boolean>>
-	selectedMembers: OT_Member[]
-	setIsNameEditMode: React.Dispatch<SetStateAction<boolean>>
-	setSelectedMembers: React.Dispatch<SetStateAction<OT_Member[]>>
-	setSelectMode: React.Dispatch<SetStateAction<boolean>>
+	showDropdownMenu: boolean;
+	setShowDropdownMenu: React.Dispatch<SetStateAction<boolean>>;
+	selectedMembers: OT_Member[];
+	setIsNameEditMode: React.Dispatch<SetStateAction<boolean>>;
+	setSelectedMembers: React.Dispatch<SetStateAction<OT_Member[]>>;
+	setSelectMode: React.Dispatch<SetStateAction<boolean>>;
 }
 
 const MenuDropdown: React.FC<IMenuDropdown> = ({
@@ -146,19 +140,19 @@ const MenuDropdown: React.FC<IMenuDropdown> = ({
 	selectedMembers,
 	setIsNameEditMode,
 	setSelectMode,
-	setSelectedMembers,
+	setSelectedMembers
 }) => {
-	const [showRoleModal, setShowRoleModal] = useState<boolean>(false)
-	const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<boolean>(false)
+	const [showRoleModal, setShowRoleModal] = useState<boolean>(false);
+	const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<boolean>(false);
 
-	const { colors } = useAppTheme()
+	const { colors } = useAppTheme();
 
-	const { removeMemberFromTeam } = useTeamMemberCard(selectedMembers[0])
+	const { removeMemberFromTeam } = useTeamMemberCard(selectedMembers[0]);
 
 	const reset = () => {
-		setSelectMode(false)
-		setSelectedMembers([])
-	}
+		setSelectMode(false);
+		setSelectedMembers([]);
+	};
 
 	return showDropdownMenu ? (
 		<>
@@ -166,27 +160,25 @@ const MenuDropdown: React.FC<IMenuDropdown> = ({
 				member={selectedMembers[0]}
 				visible={showRoleModal}
 				onDismiss={() => {
-					setShowRoleModal(false)
-					setTimeout(() => setShowDropdownMenu(false), 300)
-					reset()
+					setShowRoleModal(false);
+					setTimeout(() => setShowDropdownMenu(false), 300);
+					reset();
 				}}
 			/>
 			<ConfirmationModal
 				visible={showDeleteConfirmation}
 				onDismiss={() => {
-					setShowDeleteConfirmation(false)
-					setTimeout(() => setShowDropdownMenu(false), 300)
-					reset()
+					setShowDeleteConfirmation(false);
+					setTimeout(() => setShowDropdownMenu(false), 300);
+					reset();
 				}}
 				onConfirm={() => {
-					removeMemberFromTeam()
-					setShowDeleteConfirmation(false)
-					setShowDropdownMenu(false)
-					reset()
+					removeMemberFromTeam();
+					setShowDeleteConfirmation(false);
+					setShowDropdownMenu(false);
+					reset();
 				}}
-				confirmationText={translate(
-					"settingScreen.membersSettingsScreen.deleteUserConfirmation",
-				)}
+				confirmationText={translate('settingScreen.membersSettingsScreen.deleteUserConfirmation')}
 			/>
 			{selectedMembers.length === 1 && (
 				<View
@@ -194,38 +186,36 @@ const MenuDropdown: React.FC<IMenuDropdown> = ({
 						styles.dropdownContainer,
 						{
 							...GS.shadowLg,
-							backgroundColor: colors.background,
-						},
+							backgroundColor: colors.background
+						}
 					]}
 				>
 					<TouchableOpacity
 						onPress={() => {
-							setShowRoleModal(true)
+							setShowRoleModal(true);
 						}}
 					>
 						<Text style={{ fontSize: 12, color: colors.primary }}>
-							{translate("settingScreen.membersSettingsScreen.changeRole")}
+							{translate('settingScreen.membersSettingsScreen.changeRole')}
 						</Text>
 					</TouchableOpacity>
 
 					<TouchableOpacity
 						onPress={() => {
-							setIsNameEditMode(true)
-							setShowDropdownMenu(false)
+							setIsNameEditMode(true);
+							setShowDropdownMenu(false);
 						}}
 					>
-						<Text style={{ fontSize: 12, color: colors.primary }}>
-							{translate("common.edit")}
-						</Text>
+						<Text style={{ fontSize: 12, color: colors.primary }}>{translate('common.edit')}</Text>
 					</TouchableOpacity>
 
 					<TouchableOpacity
 						onPress={() => {
-							setShowDeleteConfirmation(true)
+							setShowDeleteConfirmation(true);
 						}}
 					>
-						<Text style={{ fontSize: 12, color: "#DA5E5E" }}>
-							{translate("settingScreen.membersSettingsScreen.delete")}
+						<Text style={{ fontSize: 12, color: '#DA5E5E' }}>
+							{translate('settingScreen.membersSettingsScreen.delete')}
 						</Text>
 					</TouchableOpacity>
 				</View>
@@ -233,51 +223,51 @@ const MenuDropdown: React.FC<IMenuDropdown> = ({
 		</>
 	) : (
 		<></>
-	)
-}
+	);
+};
 
 const $container: ViewStyle = {
-	flex: 1,
-}
+	flex: 1
+};
 
 const $headerContainer: ViewStyle = {
 	padding: 20,
 	paddingVertical: 16,
-	shadowColor: "rgba(0, 0, 0, 0.6)",
+	shadowColor: 'rgba(0, 0, 0, 0.6)',
 	shadowOffset: {
 		width: 0,
-		height: 5,
+		height: 5
 	},
 	shadowOpacity: 0.07,
 	shadowRadius: 10,
 	elevation: 1,
-	zIndex: 10,
-}
+	zIndex: 10
+};
 
 const styles = StyleSheet.create({
 	container: {
-		alignItems: "center",
-		flexDirection: "row",
-		justifyContent: "space-between",
-		width: "100%",
+		alignItems: 'center',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		width: '100%'
 	},
 	dropdownContainer: {
 		borderRadius: 14,
-		flexDirection: "column",
+		flexDirection: 'column',
 		gap: 8,
 		padding: 10,
-		position: "absolute",
+		position: 'absolute',
 		right: 20,
-		shadowColor: "rgba(0, 0, 0, 0.52)",
+		shadowColor: 'rgba(0, 0, 0, 0.52)',
 		top: 6,
-		width: 100,
+		width: 100
 	},
 
 	title: {
-		alignSelf: "center",
+		alignSelf: 'center',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		textAlign: "center",
-		width: "80%",
-	},
-})
+		textAlign: 'center',
+		width: '80%'
+	}
+});
diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/index.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/index.tsx
index 2558eb1f7..7d44e1da0 100644
--- a/apps/mobile/app/screens/Authenticated/ProfileScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/ProfileScreen/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
 import React, { FC, useState } from 'react';
-import { ViewStyle, LogBox } from 'react-native';
+import { ViewStyle, LogBox, StatusBar } from 'react-native';
 import { AuthenticatedTabScreenProps } from '../../../navigators/AuthenticatedNavigator';
 import { Screen } from '../../../components';
 import HomeHeader from '../../../components/HomeHeader';
@@ -17,6 +17,7 @@ import NoTeam from '../../../components/NoTeam';
 import CreateTeamModal from '../../../components/CreateTeamModal';
 import { useOrganizationTeam } from '../../../services/hooks/useOrganization';
 import { useProfileScreenLogic } from './logics/useProfileScreenLogic';
+import { useAppTheme } from '../../../theme';
 
 export const AuthenticatedProfileScreen: FC<AuthenticatedTabScreenProps<'Profile'>> =
 	function AuthenticatedProfileScreen(_props) {
@@ -25,6 +26,8 @@ export const AuthenticatedProfileScreen: FC<AuthenticatedTabScreenProps<'Profile
 			TimerStore: { localTimerStatus }
 		} = useStores();
 
+		const { dark, colors } = useAppTheme();
+
 		const { activeTab, userId } = _props.route.params || { activeTab: 'worked' };
 
 		const { openModal, closeModal, activeInvitation, onRejectInvitation, onAcceptInvitation } =
@@ -36,7 +39,13 @@ export const AuthenticatedProfileScreen: FC<AuthenticatedTabScreenProps<'Profile
 		const [showCreateTeamModal, setShowCreateTeamModal] = useState(false);
 
 		return (
-			<Screen preset="fixed" contentContainerStyle={$container} safeAreaEdges={['top']}>
+			<Screen
+				preset="fixed"
+				contentContainerStyle={$container}
+				safeAreaEdges={['top']}
+				backgroundColor={dark ? 'rgb(16,17,20)' : colors.background}
+			>
+				<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
 				{profile.isLoading ? (
 					<ProfileScreenSkeleton />
 				) : (
diff --git a/apps/mobile/app/screens/Authenticated/SettingScreen/index.tsx b/apps/mobile/app/screens/Authenticated/SettingScreen/index.tsx
index 405dc7a29..c24e67503 100644
--- a/apps/mobile/app/screens/Authenticated/SettingScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/SettingScreen/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { FC, useState } from 'react';
-import { View, ViewStyle, Dimensions, TouchableWithoutFeedback, LogBox } from 'react-native';
+import { View, ViewStyle, Dimensions, TouchableWithoutFeedback, LogBox, StatusBar } from 'react-native';
 import Animated from 'react-native-reanimated';
 import BottomSheet from 'reanimated-bottom-sheet';
 import { BlurView } from 'expo-blur';
@@ -38,7 +38,7 @@ export type IPopup =
 export const AuthenticatedSettingScreen: FC<AuthenticatedDrawerScreenProps<'Setting'>> =
 	function AuthenticatedDrawerScreen(_props) {
 		LogBox.ignoreAllLogs();
-		const { colors } = useAppTheme();
+		const { colors, dark } = useAppTheme();
 		const { isLoading } = useSettings();
 		const { activeTeam } = useOrganizationTeam();
 		const route = useRoute<SettingScreenRouteProp<'Setting'>>();
@@ -64,6 +64,7 @@ export const AuthenticatedSettingScreen: FC<AuthenticatedDrawerScreenProps<'Sett
 				contentContainerStyle={[$container, { backgroundColor: colors.background }]}
 				safeAreaEdges={['top']}
 			>
+				<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
 				<View style={{ flex: 1 }}>
 					{isOpen && (
 						<TouchableWithoutFeedback
diff --git a/apps/mobile/app/screens/Authenticated/TaskLabelScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TaskLabelScreen/index.tsx
index 135e6d007..c6f5afa7c 100644
--- a/apps/mobile/app/screens/Authenticated/TaskLabelScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/TaskLabelScreen/index.tsx
@@ -1,84 +1,81 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
-import React, { FC, useState } from "react"
-import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from "react-native"
-import { AntDesign, Ionicons } from "@expo/vector-icons"
-import { Screen } from "../../../components"
-import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator"
-import { translate } from "../../../i18n"
-import BottomSheet from "reanimated-bottom-sheet"
-import { typography, useAppTheme } from "../../../theme"
-import { ActivityIndicator } from "react-native-paper"
-import Animated from "react-native-reanimated"
-import LabelItem from "./components/LabelItem"
-import TaskLabelForm from "./components/TaskLabelForm"
-import { ITaskLabelItem } from "../../../services/interfaces/ITaskLabel"
-import { useTaskLabels } from "../../../services/hooks/features/useTaskLabels"
-import { BlurView } from "expo-blur"
+import React, { FC, useState } from 'react';
+import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList, StatusBar } from 'react-native';
+import { AntDesign, Ionicons } from '@expo/vector-icons';
+import { Screen } from '../../../components';
+import { AuthenticatedDrawerScreenProps } from '../../../navigators/AuthenticatedNavigator';
+import { translate } from '../../../i18n';
+import BottomSheet from 'reanimated-bottom-sheet';
+import { typography, useAppTheme } from '../../../theme';
+import { ActivityIndicator } from 'react-native-paper';
+import Animated from 'react-native-reanimated';
+import LabelItem from './components/LabelItem';
+import TaskLabelForm from './components/TaskLabelForm';
+import { ITaskLabelItem } from '../../../services/interfaces/ITaskLabel';
+import { useTaskLabels } from '../../../services/hooks/features/useTaskLabels';
+import { BlurView } from 'expo-blur';
 
-export const TaskLabelScreen: FC<AuthenticatedDrawerScreenProps<"TaskLabelScreen">> =
+export const TaskLabelScreen: FC<AuthenticatedDrawerScreenProps<'TaskLabelScreen'>> =
 	function AuthenticatedDrawerScreen(_props) {
-		const { colors, dark } = useAppTheme()
-		const { navigation } = _props
-		const { isLoading, labels, deleteLabel, updateLabel, createLabel } = useTaskLabels()
-		const [editMode, setEditMode] = useState(false)
-		const [itemToEdit, setItemToEdit] = useState<ITaskLabelItem>(null)
-		const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
+		const { colors, dark } = useAppTheme();
+		const { navigation } = _props;
+		const { isLoading, labels, deleteLabel, updateLabel, createLabel } = useTaskLabels();
+		const [editMode, setEditMode] = useState(false);
+		const [itemToEdit, setItemToEdit] = useState<ITaskLabelItem>(null);
+		const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
 		// ref
-		const sheetRef = React.useRef(null)
+		const sheetRef = React.useRef(null);
 
 		// variables
 		// const snapPoints = useMemo(() => ["25%", "50%"], [])
-		const fall = new Animated.Value(1)
+		const fall = new Animated.Value(1);
 		const openForEdit = (item: ITaskLabelItem) => {
-			setEditMode(true)
-			setIsSheetOpen(true)
-			setItemToEdit(item)
-			sheetRef.current.snapTo(0)
-		}
+			setEditMode(true);
+			setIsSheetOpen(true);
+			setItemToEdit(item);
+			sheetRef.current.snapTo(0);
+		};
 
 		return (
 			<Screen
 				contentContainerStyle={[$container, { backgroundColor: colors.background2 }]}
-				safeAreaEdges={["top"]}
+				safeAreaEdges={['top']}
 			>
+				<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
 				<Animated.View>
 					<View style={[$headerContainer, { backgroundColor: colors.background }]}>
 						<View style={[styles.container, { backgroundColor: colors.background }]}>
-							<TouchableOpacity onPress={() => navigation.navigate("Setting")}>
+							<TouchableOpacity onPress={() => navigation.navigate('Setting')}>
 								<AntDesign name="arrowleft" size={24} color={colors.primary} />
 							</TouchableOpacity>
 							<Text style={[styles.title, { color: colors.primary }]}>
-								{translate("settingScreen.labelScreen.mainTitle")}
+								{translate('settingScreen.labelScreen.mainTitle')}
 							</Text>
 						</View>
 					</View>
-					<View style={{ width: "100%", padding: 20, height: "80%" }}>
+					<View style={{ width: '100%', padding: 20, height: '80%' }}>
 						<View>
-							<Text style={styles.title2}>
-								{translate("settingScreen.labelScreen.listLabels")}
-							</Text>
+							<Text style={styles.title2}>{translate('settingScreen.labelScreen.listLabels')}</Text>
 						</View>
 						<View
 							style={{
 								minHeight: 200,
-								justifyContent: "center",
-								alignItems: "center",
+								justifyContent: 'center',
+								alignItems: 'center'
 							}}
 						>
-							{isLoading ? (
-								<ActivityIndicator size={"small"} color={"#3826A6"} />
-							) : null}
+							{isLoading ? <ActivityIndicator size={'small'} color={'#3826A6'} /> : null}
 							{!isLoading && labels?.total === 0 ? (
 								<Text style={{ ...styles.noStatusTxt, color: colors.primary }}>
-									{translate("settingScreen.labelScreen.noActiveLabels")}
+									{translate('settingScreen.labelScreen.noActiveLabels')}
 								</Text>
 							) : null}
 
 							<FlatList
 								bounces={false}
 								showsVerticalScrollIndicator={false}
-								style={{ width: "100%" }}
+								style={{ width: '100%' }}
 								data={labels?.items}
 								renderItem={({ item }) => (
 									<LabelItem
@@ -95,17 +92,17 @@ export const TaskLabelScreen: FC<AuthenticatedDrawerScreenProps<"TaskLabelScreen
 					<TouchableOpacity
 						style={{
 							...styles.createButton,
-							borderColor: dark ? "#6755C9" : "#3826A6",
+							borderColor: dark ? '#6755C9' : '#3826A6'
 						}}
 						onPress={() => {
-							setEditMode(false)
-							setIsSheetOpen(true)
-							sheetRef.current.snapTo(0)
+							setEditMode(false);
+							setIsSheetOpen(true);
+							sheetRef.current.snapTo(0);
 						}}
 					>
-						<Ionicons name="add" size={24} color={dark ? "#6755C9" : "#3826A6"} />
-						<Text style={{ ...styles.btnText, color: dark ? "#6755C9" : "#3826A6" }}>
-							{translate("settingScreen.labelScreen.createNewLabelText")}
+						<Ionicons name="add" size={24} color={dark ? '#6755C9' : '#3826A6'} />
+						<Text style={{ ...styles.btnText, color: dark ? '#6755C9' : '#3826A6' }}>
+							{translate('settingScreen.labelScreen.createNewLabelText')}
 						</Text>
 					</TouchableOpacity>
 				</Animated.View>
@@ -114,9 +111,9 @@ export const TaskLabelScreen: FC<AuthenticatedDrawerScreenProps<"TaskLabelScreen
 						intensity={15}
 						tint="dark"
 						style={{
-							position: "absolute",
-							width: "100%",
-							height: "100%",
+							position: 'absolute',
+							width: '100%',
+							height: '100%'
 						}}
 					/>
 				)}
@@ -131,9 +128,9 @@ export const TaskLabelScreen: FC<AuthenticatedDrawerScreenProps<"TaskLabelScreen
 						<TaskLabelForm
 							item={itemToEdit}
 							onDismiss={() => {
-								setEditMode(false)
-								setIsSheetOpen(false)
-								sheetRef.current.snapTo(1)
+								setEditMode(false);
+								setIsSheetOpen(false);
+								sheetRef.current.snapTo(1);
 							}}
 							onUpdateLabel={updateLabel}
 							onCreateLabel={createLabel}
@@ -142,66 +139,66 @@ export const TaskLabelScreen: FC<AuthenticatedDrawerScreenProps<"TaskLabelScreen
 					)}
 				/>
 			</Screen>
-		)
-	}
+		);
+	};
 
 const $container: ViewStyle = {
-	flex: 1,
-}
+	flex: 1
+};
 const $headerContainer: ViewStyle = {
 	padding: 20,
 	paddingVertical: 16,
-	shadowColor: "rgba(0, 0, 0, 0.6)",
+	shadowColor: 'rgba(0, 0, 0, 0.6)',
 	shadowOffset: {
 		width: 0,
-		height: 2,
+		height: 2
 	},
 	shadowOpacity: 0.07,
 	shadowRadius: 1.0,
 	elevation: 1,
-	zIndex: 10,
-}
+	zIndex: 10
+};
 
 const styles = StyleSheet.create({
 	btnText: {
-		color: "#3826A6",
+		color: '#3826A6',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 18,
-		fontStyle: "normal",
+		fontStyle: 'normal'
 	},
 	container: {
-		alignItems: "center",
-		flexDirection: "row",
-		width: "100%",
+		alignItems: 'center',
+		flexDirection: 'row',
+		width: '100%'
 	},
 	createButton: {
-		alignItems: "center",
-		alignSelf: "center",
-		borderColor: "#3826A6",
+		alignItems: 'center',
+		alignSelf: 'center',
+		borderColor: '#3826A6',
 		borderRadius: 12,
 		borderWidth: 2,
-		flexDirection: "row",
-		justifyContent: "center",
+		flexDirection: 'row',
+		justifyContent: 'center',
 		marginTop: 24,
 		padding: 16,
-		width: "90%",
+		width: '90%'
 	},
 	noStatusTxt: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.primary.semiBold,
-		fontSize: 16,
+		fontSize: 16
 	},
 	title: {
-		alignSelf: "center",
+		alignSelf: 'center',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		textAlign: "center",
-		width: "80%",
+		textAlign: 'center',
+		width: '80%'
 	},
 	title2: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		marginBottom: 8,
-	},
-})
+		marginBottom: 8
+	}
+});
diff --git a/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/index.tsx
index 0270ad648..7643ee18a 100644
--- a/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/TaskPrioritiesScreen/index.tsx
@@ -1,85 +1,83 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
-import React, { FC, useState } from "react"
-import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from "react-native"
-import { AntDesign, Ionicons } from "@expo/vector-icons"
-import { Screen } from "../../../components"
-import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator"
-import { translate } from "../../../i18n"
-import BottomSheet from "reanimated-bottom-sheet"
-import { typography, useAppTheme } from "../../../theme"
-import { ActivityIndicator } from "react-native-paper"
-import Animated from "react-native-reanimated"
-import { ITaskPriorityItem } from "../../../services/interfaces/ITaskPriority"
-import TaskPriorityForm from "./components/TaskPriorityForm"
-import { useTaskPriority } from "../../../services/hooks/features/useTaskPriority"
-import PriorityItem from "./components/PriorityItem"
-import { BlurView } from "expo-blur"
+import React, { FC, useState } from 'react';
+import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList, StatusBar } from 'react-native';
+import { AntDesign, Ionicons } from '@expo/vector-icons';
+import { Screen } from '../../../components';
+import { AuthenticatedDrawerScreenProps } from '../../../navigators/AuthenticatedNavigator';
+import { translate } from '../../../i18n';
+import BottomSheet from 'reanimated-bottom-sheet';
+import { typography, useAppTheme } from '../../../theme';
+import { ActivityIndicator } from 'react-native-paper';
+import Animated from 'react-native-reanimated';
+import { ITaskPriorityItem } from '../../../services/interfaces/ITaskPriority';
+import TaskPriorityForm from './components/TaskPriorityForm';
+import { useTaskPriority } from '../../../services/hooks/features/useTaskPriority';
+import PriorityItem from './components/PriorityItem';
+import { BlurView } from 'expo-blur';
 
-export const TaskPriorityScreen: FC<AuthenticatedDrawerScreenProps<"TaskPriority">> =
+export const TaskPriorityScreen: FC<AuthenticatedDrawerScreenProps<'TaskPriority'>> =
 	function AuthenticatedDrawerScreen(_props) {
-		const { colors, dark } = useAppTheme()
-		const { navigation } = _props
-		const { isLoading, priorities, deletePriority, updatePriority, createPriority } =
-			useTaskPriority()
-		const [editMode, setEditMode] = useState(false)
-		const [itemToEdit, setItemToEdit] = useState<ITaskPriorityItem>(null)
-		const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
+		const { colors, dark } = useAppTheme();
+		const { navigation } = _props;
+		const { isLoading, priorities, deletePriority, updatePriority, createPriority } = useTaskPriority();
+		const [editMode, setEditMode] = useState(false);
+		const [itemToEdit, setItemToEdit] = useState<ITaskPriorityItem>(null);
+		const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
 		// ref
-		const sheetRef = React.useRef(null)
+		const sheetRef = React.useRef(null);
 
 		// variables
 		// const snapPoints = useMemo(() => ["25%", "50%"], [])
-		const fall = new Animated.Value(1)
+		const fall = new Animated.Value(1);
 		const openForEdit = (item: ITaskPriorityItem) => {
-			setEditMode(true)
-			setIsSheetOpen(true)
-			setItemToEdit(item)
-			sheetRef.current.snapTo(0)
-		}
+			setEditMode(true);
+			setIsSheetOpen(true);
+			setItemToEdit(item);
+			sheetRef.current.snapTo(0);
+		};
 
 		return (
 			<Screen
 				contentContainerStyle={[$container, { backgroundColor: colors.background2 }]}
-				safeAreaEdges={["top"]}
+				safeAreaEdges={['top']}
 			>
+				<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
 				<Animated.View>
 					<View style={[$headerContainer, { backgroundColor: colors.background }]}>
 						<View style={[styles.container, { backgroundColor: colors.background }]}>
-							<TouchableOpacity onPress={() => navigation.navigate("Setting")}>
+							<TouchableOpacity onPress={() => navigation.navigate('Setting')}>
 								<AntDesign name="arrowleft" size={24} color={colors.primary} />
 							</TouchableOpacity>
 							<Text style={[styles.title, { color: colors.primary }]}>
-								{translate("settingScreen.priorityScreen.mainTitle")}
+								{translate('settingScreen.priorityScreen.mainTitle')}
 							</Text>
 						</View>
 					</View>
-					<View style={{ width: "100%", padding: 20, height: "80%" }}>
+					<View style={{ width: '100%', padding: 20, height: '80%' }}>
 						<View>
 							<Text style={styles.title2}>
-								{translate("settingScreen.priorityScreen.listPriorities")}
+								{translate('settingScreen.priorityScreen.listPriorities')}
 							</Text>
 						</View>
 						<View
 							style={{
 								minHeight: 200,
-								justifyContent: "center",
-								alignItems: "center",
+								justifyContent: 'center',
+								alignItems: 'center'
 							}}
 						>
-							{isLoading ? (
-								<ActivityIndicator size={"small"} color={"#3826A6"} />
-							) : null}
+							{isLoading ? <ActivityIndicator size={'small'} color={'#3826A6'} /> : null}
 							{!isLoading && priorities?.total === 0 ? (
 								<Text style={{ ...styles.noStatusTxt, color: colors.primary }}>
-									{translate("settingScreen.priorityScreen.noActivePriorities")}
+									{translate('settingScreen.priorityScreen.noActivePriorities')}
 								</Text>
 							) : null}
 
 							<FlatList
 								bounces={false}
 								showsVerticalScrollIndicator={false}
-								style={{ width: "100%" }}
+								style={{ width: '100%' }}
 								data={priorities?.items}
 								renderItem={({ item }) => (
 									<PriorityItem
@@ -96,17 +94,17 @@ export const TaskPriorityScreen: FC<AuthenticatedDrawerScreenProps<"TaskPriority
 					<TouchableOpacity
 						style={{
 							...styles.createButton,
-							borderColor: dark ? "#6755C9" : "#3826A6",
+							borderColor: dark ? '#6755C9' : '#3826A6'
 						}}
 						onPress={() => {
-							setEditMode(false)
-							setIsSheetOpen(true)
-							sheetRef.current.snapTo(0)
+							setEditMode(false);
+							setIsSheetOpen(true);
+							sheetRef.current.snapTo(0);
 						}}
 					>
-						<Ionicons name="add" size={24} color={dark ? "#6755C9" : "#3826A6"} />
-						<Text style={{ ...styles.btnText, color: dark ? "#6755C9" : "#3826A6" }}>
-							{translate("settingScreen.priorityScreen.createNewPriorityText")}
+						<Ionicons name="add" size={24} color={dark ? '#6755C9' : '#3826A6'} />
+						<Text style={{ ...styles.btnText, color: dark ? '#6755C9' : '#3826A6' }}>
+							{translate('settingScreen.priorityScreen.createNewPriorityText')}
 						</Text>
 					</TouchableOpacity>
 				</Animated.View>
@@ -115,9 +113,9 @@ export const TaskPriorityScreen: FC<AuthenticatedDrawerScreenProps<"TaskPriority
 						intensity={15}
 						tint="dark"
 						style={{
-							position: "absolute",
-							width: "100%",
-							height: "100%",
+							position: 'absolute',
+							width: '100%',
+							height: '100%'
 						}}
 					/>
 				)}
@@ -132,9 +130,9 @@ export const TaskPriorityScreen: FC<AuthenticatedDrawerScreenProps<"TaskPriority
 						<TaskPriorityForm
 							item={itemToEdit}
 							onDismiss={() => {
-								setEditMode(false)
-								setIsSheetOpen(false)
-								sheetRef.current.snapTo(1)
+								setEditMode(false);
+								setIsSheetOpen(false);
+								sheetRef.current.snapTo(1);
 							}}
 							onUpdatePriority={updatePriority}
 							onCreatePriority={createPriority}
@@ -143,66 +141,66 @@ export const TaskPriorityScreen: FC<AuthenticatedDrawerScreenProps<"TaskPriority
 					)}
 				/>
 			</Screen>
-		)
-	}
+		);
+	};
 
 const $container: ViewStyle = {
-	flex: 1,
-}
+	flex: 1
+};
 const $headerContainer: ViewStyle = {
 	padding: 20,
 	paddingVertical: 16,
-	shadowColor: "rgba(0, 0, 0, 0.6)",
+	shadowColor: 'rgba(0, 0, 0, 0.6)',
 	shadowOffset: {
 		width: 0,
-		height: 2,
+		height: 2
 	},
 	shadowOpacity: 0.07,
 	shadowRadius: 1.0,
 	elevation: 1,
-	zIndex: 10,
-}
+	zIndex: 10
+};
 
 const styles = StyleSheet.create({
 	btnText: {
-		color: "#3826A6",
+		color: '#3826A6',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 18,
-		fontStyle: "normal",
+		fontStyle: 'normal'
 	},
 	container: {
-		alignItems: "center",
-		flexDirection: "row",
-		width: "100%",
+		alignItems: 'center',
+		flexDirection: 'row',
+		width: '100%'
 	},
 	createButton: {
-		alignItems: "center",
-		alignSelf: "center",
-		borderColor: "#3826A6",
+		alignItems: 'center',
+		alignSelf: 'center',
+		borderColor: '#3826A6',
 		borderRadius: 12,
 		borderWidth: 2,
-		flexDirection: "row",
-		justifyContent: "center",
+		flexDirection: 'row',
+		justifyContent: 'center',
 		marginTop: 24,
 		padding: 16,
-		width: "90%",
+		width: '90%'
 	},
 	noStatusTxt: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.primary.semiBold,
-		fontSize: 16,
+		fontSize: 16
 	},
 	title: {
-		alignSelf: "center",
+		alignSelf: 'center',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		textAlign: "center",
-		width: "80%",
+		textAlign: 'center',
+		width: '80%'
 	},
 	title2: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		marginBottom: 8,
-	},
-})
+		marginBottom: 8
+	}
+});
diff --git a/apps/mobile/app/screens/Authenticated/TaskScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TaskScreen/index.tsx
index c40156229..103c14a94 100644
--- a/apps/mobile/app/screens/Authenticated/TaskScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/TaskScreen/index.tsx
@@ -1,55 +1,51 @@
 /* eslint-disable react-native/no-inline-styles */
-import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, ScrollView } from "react-native"
-import React, { FC, useEffect } from "react"
-import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator"
-import { Screen } from "../../../components"
-import { typography, useAppTheme } from "../../../theme"
-import { AntDesign } from "@expo/vector-icons"
-import { useTeamTasks } from "../../../services/hooks/features/useTeamTasks"
-import TaskTitleBlock from "../../../components/Task/TitleBlock"
-import DetailsBlock from "../../../components/Task/DetailsBlock"
-import { translate } from "../../../i18n"
-import EstimateBlock from "../../../components/Task/EstimateBlock"
-import TimeBlock from "../../../components/Task/TimeBlock"
-import LinkedIssuesBlock from "../../../components/Task/LinkedIssuesBlock"
-import DescriptionBlock from "../../../components/Task/DescrptionBlock"
+import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, ScrollView, StatusBar } from 'react-native';
+import React, { FC, useEffect } from 'react';
+import { AuthenticatedDrawerScreenProps } from '../../../navigators/AuthenticatedNavigator';
+import { Screen } from '../../../components';
+import { typography, useAppTheme } from '../../../theme';
+import { AntDesign } from '@expo/vector-icons';
+import { useTeamTasks } from '../../../services/hooks/features/useTeamTasks';
+import TaskTitleBlock from '../../../components/Task/TitleBlock';
+import DetailsBlock from '../../../components/Task/DetailsBlock';
+import { translate } from '../../../i18n';
+import EstimateBlock from '../../../components/Task/EstimateBlock';
+import TimeBlock from '../../../components/Task/TimeBlock';
+import LinkedIssuesBlock from '../../../components/Task/LinkedIssuesBlock';
+import DescriptionBlock from '../../../components/Task/DescrptionBlock';
 
-export const AuthenticatedTaskScreen: FC<AuthenticatedDrawerScreenProps<"TaskScreen">> = (
-	_props,
-) => {
-	const { colors } = useAppTheme()
-	const { navigation, route } = _props
-	const { taskId } = route.params
-	const { getTaskById, detailedTask: task } = useTeamTasks()
+export const AuthenticatedTaskScreen: FC<AuthenticatedDrawerScreenProps<'TaskScreen'>> = (_props) => {
+	const { colors, dark } = useAppTheme();
+	const { navigation, route } = _props;
+	const { taskId } = route.params;
+	const { getTaskById, detailedTask: task } = useTeamTasks();
 
 	useEffect(() => {
 		if (route.params.taskId) {
-			getTaskById(taskId)
+			getTaskById(taskId);
 		}
-	}, [getTaskById, route, task, route.params.taskId])
+	}, [getTaskById, route, task, route.params.taskId]);
 
 	return (
-		<Screen
-			contentContainerStyle={[$container, { backgroundColor: colors.background2 }]}
-			safeAreaEdges={["top"]}
-		>
+		<Screen contentContainerStyle={[$container, { backgroundColor: colors.background2 }]} safeAreaEdges={['top']}>
+			<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
 			<View style={{ flex: 1 }}>
 				<View style={[$headerContainer, { backgroundColor: colors.background }]}>
 					<View style={[styles.container, { backgroundColor: colors.background }]}>
-						<TouchableOpacity onPress={() => navigation.navigate("AuthenticatedTab")}>
+						<TouchableOpacity onPress={() => navigation.navigate('AuthenticatedTab')}>
 							<AntDesign name="arrowleft" size={24} color={colors.primary} />
 						</TouchableOpacity>
 						<Text style={[styles.title, { color: colors.primary }]}>
-							{translate("taskDetailsScreen.taskScreen")}
+							{translate('taskDetailsScreen.taskScreen')}
 						</Text>
 					</View>
 				</View>
 				<View style={styles.screenContentWrapper}>
 					<ScrollView
 						style={{
-							width: "100%",
-							height: "100%",
-							paddingHorizontal: 20,
+							width: '100%',
+							height: '100%',
+							paddingHorizontal: 20
 						}}
 						bounces={false}
 						showsVerticalScrollIndicator={false}
@@ -64,46 +60,46 @@ export const AuthenticatedTaskScreen: FC<AuthenticatedDrawerScreenProps<"TaskScr
 				</View>
 			</View>
 		</Screen>
-	)
-}
+	);
+};
 
 const $container: ViewStyle = {
-	flex: 1,
-}
+	flex: 1
+};
 
 const $headerContainer: ViewStyle = {
 	padding: 20,
 	paddingVertical: 16,
-	shadowColor: "rgba(0, 0, 0, 0.6)",
+	shadowColor: 'rgba(0, 0, 0, 0.6)',
 	shadowOffset: {
 		width: 0,
-		height: 2,
+		height: 2
 	},
 	shadowOpacity: 0.07,
 	shadowRadius: 1.0,
 	elevation: 1,
-	zIndex: 10,
-}
+	zIndex: 10
+};
 
 const styles = StyleSheet.create({
 	container: {
-		alignItems: "center",
-		flexDirection: "row",
-		width: "100%",
+		alignItems: 'center',
+		flexDirection: 'row',
+		width: '100%'
 	},
 	screenContentWrapper: {
-		alignItems: "center",
+		alignItems: 'center',
 		flex: 4,
 		gap: 12,
 		paddingBottom: 20,
-		width: "100%",
+		width: '100%'
 	},
 
 	title: {
-		alignSelf: "center",
+		alignSelf: 'center',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		textAlign: "center",
-		width: "80%",
-	},
-})
+		textAlign: 'center',
+		width: '80%'
+	}
+});
diff --git a/apps/mobile/app/screens/Authenticated/TaskSizeScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TaskSizeScreen/index.tsx
index 61075069f..5a7cf8f07 100644
--- a/apps/mobile/app/screens/Authenticated/TaskSizeScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/TaskSizeScreen/index.tsx
@@ -1,210 +1,205 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
-import React, { FC, useState } from "react"
-import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from "react-native"
-import { AntDesign, Ionicons } from "@expo/vector-icons"
-import { Screen } from "../../../components"
-import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator"
-import { translate } from "../../../i18n"
-import BottomSheet from "reanimated-bottom-sheet"
-import { typography, useAppTheme } from "../../../theme"
-import { ActivityIndicator } from "react-native-paper"
-import Animated from "react-native-reanimated"
-import { ITaskStatusItem } from "../../../services/interfaces/ITaskStatus"
-import TaskSizeForm from "./components/TaskSizeForm"
-import SizeItem from "./components/SizeItem"
-import { useTaskSizes } from "../../../services/hooks/features/useTaskSizes"
-import { BlurView } from "expo-blur"
+import React, { FC, useState } from 'react';
+import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList, StatusBar } from 'react-native';
+import { AntDesign, Ionicons } from '@expo/vector-icons';
+import { Screen } from '../../../components';
+import { AuthenticatedDrawerScreenProps } from '../../../navigators/AuthenticatedNavigator';
+import { translate } from '../../../i18n';
+import BottomSheet from 'reanimated-bottom-sheet';
+import { typography, useAppTheme } from '../../../theme';
+import { ActivityIndicator } from 'react-native-paper';
+import Animated from 'react-native-reanimated';
+import { ITaskStatusItem } from '../../../services/interfaces/ITaskStatus';
+import TaskSizeForm from './components/TaskSizeForm';
+import SizeItem from './components/SizeItem';
+import { useTaskSizes } from '../../../services/hooks/features/useTaskSizes';
+import { BlurView } from 'expo-blur';
 
-export const TaskSizeScreen: FC<AuthenticatedDrawerScreenProps<"TaskSizeScreen">> =
-	function AuthenticatedDrawerScreen(_props) {
-		const { colors, dark } = useAppTheme()
-		const { navigation } = _props
-		const { isLoading, sizes, deleteSize, updateSize, createSize } = useTaskSizes()
-		const [editMode, setEditMode] = useState(false)
-		const [itemToEdit, setItemToEdit] = useState<ITaskStatusItem>(null)
-		const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
-		// ref
-		const sheetRef = React.useRef(null)
+export const TaskSizeScreen: FC<AuthenticatedDrawerScreenProps<'TaskSizeScreen'>> = function AuthenticatedDrawerScreen(
+	_props
+) {
+	const { colors, dark } = useAppTheme();
+	const { navigation } = _props;
+	const { isLoading, sizes, deleteSize, updateSize, createSize } = useTaskSizes();
+	const [editMode, setEditMode] = useState(false);
+	const [itemToEdit, setItemToEdit] = useState<ITaskStatusItem>(null);
+	const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+	// ref
+	const sheetRef = React.useRef(null);
 
-		// variables
-		// const snapPoints = useMemo(() => ["25%", "50%"], [])
-		const fall = new Animated.Value(1)
+	// variables
+	// const snapPoints = useMemo(() => ["25%", "50%"], [])
+	const fall = new Animated.Value(1);
 
-		// console.log(fall)
+	// console.log(fall)
 
-		const openForEdit = (item: ITaskStatusItem) => {
-			setEditMode(true)
-			setIsSheetOpen(true)
-			setItemToEdit(item)
-			sheetRef.current.snapTo(0)
-		}
+	const openForEdit = (item: ITaskStatusItem) => {
+		setEditMode(true);
+		setIsSheetOpen(true);
+		setItemToEdit(item);
+		sheetRef.current.snapTo(0);
+	};
 
-		return (
-			<Screen
-				contentContainerStyle={[$container, { backgroundColor: colors.background2 }]}
-				safeAreaEdges={["top"]}
-			>
-				<Animated.View>
-					<View style={[$headerContainer, { backgroundColor: colors.background }]}>
-						<View style={[styles.container, { backgroundColor: colors.background }]}>
-							<TouchableOpacity onPress={() => navigation.navigate("Setting")}>
-								<AntDesign name="arrowleft" size={24} color={colors.primary} />
-							</TouchableOpacity>
-							<Text style={[styles.title, { color: colors.primary }]}>
-								{translate("settingScreen.sizeScreen.mainTitle")}
-							</Text>
-						</View>
+	return (
+		<Screen contentContainerStyle={[$container, { backgroundColor: colors.background2 }]} safeAreaEdges={['top']}>
+			<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
+			<Animated.View>
+				<View style={[$headerContainer, { backgroundColor: colors.background }]}>
+					<View style={[styles.container, { backgroundColor: colors.background }]}>
+						<TouchableOpacity onPress={() => navigation.navigate('Setting')}>
+							<AntDesign name="arrowleft" size={24} color={colors.primary} />
+						</TouchableOpacity>
+						<Text style={[styles.title, { color: colors.primary }]}>
+							{translate('settingScreen.sizeScreen.mainTitle')}
+						</Text>
 					</View>
-					<View style={{ width: "100%", padding: 20, height: "80%" }}>
-						<View>
-							<Text style={styles.title2}>
-								{translate("settingScreen.sizeScreen.listSizes")}
-							</Text>
-						</View>
-						<View
-							style={{
-								minHeight: 200,
-								justifyContent: "center",
-								alignItems: "center",
-							}}
-						>
-							{isLoading ? (
-								<ActivityIndicator size={"small"} color={"#3826A6"} />
-							) : null}
-							{!isLoading && sizes?.total === 0 ? (
-								<Text style={{ ...styles.noStatusTxt, color: colors.primary }}>
-									{translate("settingScreen.sizeScreen.noActiveSizes")}
-								</Text>
-							) : null}
-
-							<FlatList
-								bounces={false}
-								showsVerticalScrollIndicator={false}
-								style={{ width: "100%" }}
-								data={sizes?.items}
-								renderItem={({ item }) => (
-									<SizeItem
-										openForEdit={() => openForEdit(item)}
-										onDeleteSize={() => deleteSize(item.id)}
-										size={item}
-									/>
-								)}
-								keyExtractor={(_, index) => index.toString()}
-								ListFooterComponent={() => <View style={{ marginBottom: 40 }} />}
-							/>
-						</View>
+				</View>
+				<View style={{ width: '100%', padding: 20, height: '80%' }}>
+					<View>
+						<Text style={styles.title2}>{translate('settingScreen.sizeScreen.listSizes')}</Text>
 					</View>
-					<TouchableOpacity
+					<View
 						style={{
-							...styles.createButton,
-							borderColor: dark ? "#6755C9" : "#3826A6",
-						}}
-						onPress={() => {
-							setEditMode(false)
-							setIsSheetOpen(true)
-							sheetRef.current.snapTo(0)
+							minHeight: 200,
+							justifyContent: 'center',
+							alignItems: 'center'
 						}}
 					>
-						<Ionicons name="add" size={24} color={dark ? "#6755C9" : "#3826A6"} />
-						<Text style={{ ...styles.btnText, color: dark ? "#6755C9" : "#3826A6" }}>
-							{translate("settingScreen.sizeScreen.createSizeButton")}
-						</Text>
-					</TouchableOpacity>
-				</Animated.View>
-				{isSheetOpen && (
-					<BlurView
-						intensity={15}
-						tint="dark"
-						style={{
-							position: "absolute",
-							width: "100%",
-							height: "100%",
+						{isLoading ? <ActivityIndicator size={'small'} color={'#3826A6'} /> : null}
+						{!isLoading && sizes?.total === 0 ? (
+							<Text style={{ ...styles.noStatusTxt, color: colors.primary }}>
+								{translate('settingScreen.sizeScreen.noActiveSizes')}
+							</Text>
+						) : null}
+
+						<FlatList
+							bounces={false}
+							showsVerticalScrollIndicator={false}
+							style={{ width: '100%' }}
+							data={sizes?.items}
+							renderItem={({ item }) => (
+								<SizeItem
+									openForEdit={() => openForEdit(item)}
+									onDeleteSize={() => deleteSize(item.id)}
+									size={item}
+								/>
+							)}
+							keyExtractor={(_, index) => index.toString()}
+							ListFooterComponent={() => <View style={{ marginBottom: 40 }} />}
+						/>
+					</View>
+				</View>
+				<TouchableOpacity
+					style={{
+						...styles.createButton,
+						borderColor: dark ? '#6755C9' : '#3826A6'
+					}}
+					onPress={() => {
+						setEditMode(false);
+						setIsSheetOpen(true);
+						sheetRef.current.snapTo(0);
+					}}
+				>
+					<Ionicons name="add" size={24} color={dark ? '#6755C9' : '#3826A6'} />
+					<Text style={{ ...styles.btnText, color: dark ? '#6755C9' : '#3826A6' }}>
+						{translate('settingScreen.sizeScreen.createSizeButton')}
+					</Text>
+				</TouchableOpacity>
+			</Animated.View>
+			{isSheetOpen && (
+				<BlurView
+					intensity={15}
+					tint="dark"
+					style={{
+						position: 'absolute',
+						width: '100%',
+						height: '100%'
+					}}
+				/>
+			)}
+			<BottomSheet
+				ref={sheetRef}
+				snapPoints={[452, 0]}
+				borderRadius={24}
+				initialSnap={1}
+				callbackNode={fall}
+				enabledGestureInteraction={true}
+				renderContent={() => (
+					<TaskSizeForm
+						item={itemToEdit}
+						onDismiss={() => {
+							setEditMode(false);
+							setIsSheetOpen(false);
+							sheetRef.current.snapTo(1);
 						}}
+						onUpdateSize={updateSize}
+						onCreateSize={createSize}
+						isEdit={editMode}
 					/>
 				)}
-				<BottomSheet
-					ref={sheetRef}
-					snapPoints={[452, 0]}
-					borderRadius={24}
-					initialSnap={1}
-					callbackNode={fall}
-					enabledGestureInteraction={true}
-					renderContent={() => (
-						<TaskSizeForm
-							item={itemToEdit}
-							onDismiss={() => {
-								setEditMode(false)
-								setIsSheetOpen(false)
-								sheetRef.current.snapTo(1)
-							}}
-							onUpdateSize={updateSize}
-							onCreateSize={createSize}
-							isEdit={editMode}
-						/>
-					)}
-				/>
-			</Screen>
-		)
-	}
+			/>
+		</Screen>
+	);
+};
 
 const $container: ViewStyle = {
-	flex: 1,
-}
+	flex: 1
+};
 const $headerContainer: ViewStyle = {
 	padding: 20,
 	paddingVertical: 16,
-	shadowColor: "rgba(0, 0, 0, 0.6)",
+	shadowColor: 'rgba(0, 0, 0, 0.6)',
 	shadowOffset: {
 		width: 0,
-		height: 2,
+		height: 2
 	},
 	shadowOpacity: 0.07,
 	shadowRadius: 1.0,
 	elevation: 1,
-	zIndex: 10,
-}
+	zIndex: 10
+};
 
 const styles = StyleSheet.create({
 	btnText: {
-		color: "#3826A6",
+		color: '#3826A6',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 18,
-		fontStyle: "normal",
+		fontStyle: 'normal'
 	},
 	container: {
-		alignItems: "center",
-		flexDirection: "row",
-		width: "100%",
+		alignItems: 'center',
+		flexDirection: 'row',
+		width: '100%'
 	},
 	createButton: {
-		alignItems: "center",
-		alignSelf: "center",
-		borderColor: "#3826A6",
+		alignItems: 'center',
+		alignSelf: 'center',
+		borderColor: '#3826A6',
 		borderRadius: 12,
 		borderWidth: 2,
-		flexDirection: "row",
-		justifyContent: "center",
+		flexDirection: 'row',
+		justifyContent: 'center',
 		marginTop: 24,
 		padding: 16,
-		width: "90%",
+		width: '90%'
 	},
 	noStatusTxt: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.primary.semiBold,
-		fontSize: 16,
+		fontSize: 16
 	},
 	title: {
-		alignSelf: "center",
+		alignSelf: 'center',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		textAlign: "center",
-		width: "80%",
+		textAlign: 'center',
+		width: '80%'
 	},
 	title2: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		marginBottom: 8,
-	},
-})
+		marginBottom: 8
+	}
+});
diff --git a/apps/mobile/app/screens/Authenticated/TaskStatusScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TaskStatusScreen/index.tsx
index 33af4bb84..2d6dacab5 100644
--- a/apps/mobile/app/screens/Authenticated/TaskStatusScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/TaskStatusScreen/index.tsx
@@ -1,207 +1,202 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
-import React, { FC, useState } from "react"
-import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList } from "react-native"
-import { AntDesign, Ionicons } from "@expo/vector-icons"
-import { Screen } from "../../../components"
-import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator"
-import { translate } from "../../../i18n"
-import BottomSheet from "reanimated-bottom-sheet"
-import { typography, useAppTheme } from "../../../theme"
-import StatusItem from "./components/StatusItem"
-import { ActivityIndicator } from "react-native-paper"
-import { useTaskStatus } from "../../../services/hooks/features/useTaskStatus"
-import Animated from "react-native-reanimated"
-import { ITaskStatusItem } from "../../../services/interfaces/ITaskStatus"
-import TaskStatusForm from "./components/TaskStatusForm"
-import { BlurView } from "expo-blur"
+import React, { FC, useState } from 'react';
+import { View, Text, ViewStyle, TouchableOpacity, StyleSheet, FlatList, StatusBar } from 'react-native';
+import { AntDesign, Ionicons } from '@expo/vector-icons';
+import { Screen } from '../../../components';
+import { AuthenticatedDrawerScreenProps } from '../../../navigators/AuthenticatedNavigator';
+import { translate } from '../../../i18n';
+import BottomSheet from 'reanimated-bottom-sheet';
+import { typography, useAppTheme } from '../../../theme';
+import StatusItem from './components/StatusItem';
+import { ActivityIndicator } from 'react-native-paper';
+import { useTaskStatus } from '../../../services/hooks/features/useTaskStatus';
+import Animated from 'react-native-reanimated';
+import { ITaskStatusItem } from '../../../services/interfaces/ITaskStatus';
+import TaskStatusForm from './components/TaskStatusForm';
+import { BlurView } from 'expo-blur';
 
-export const TaskStatusScreen: FC<AuthenticatedDrawerScreenProps<"TaskStatus">> =
-	function AuthenticatedDrawerScreen(_props) {
-		const { colors, dark } = useAppTheme()
-		const { navigation } = _props
-		const { isLoading, statuses, deleteStatus, updateStatus, createStatus } = useTaskStatus()
-		const [editMode, setEditMode] = useState(false)
-		const [itemToEdit, setItemToEdit] = useState<ITaskStatusItem>(null)
-		const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
-		// ref
-		const sheetRef = React.useRef(null)
+export const TaskStatusScreen: FC<AuthenticatedDrawerScreenProps<'TaskStatus'>> = function AuthenticatedDrawerScreen(
+	_props
+) {
+	const { colors, dark } = useAppTheme();
+	const { navigation } = _props;
+	const { isLoading, statuses, deleteStatus, updateStatus, createStatus } = useTaskStatus();
+	const [editMode, setEditMode] = useState(false);
+	const [itemToEdit, setItemToEdit] = useState<ITaskStatusItem>(null);
+	const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
+	// ref
+	const sheetRef = React.useRef(null);
 
-		// variables
-		const fall = new Animated.Value(1)
-		const openForEdit = (item: ITaskStatusItem) => {
-			setEditMode(true)
-			setIsSheetOpen(true)
-			setItemToEdit(item)
-			sheetRef.current.snapTo(0)
-		}
-		// console.log("in-progress-again".replaceAll("-", " "))
+	// variables
+	const fall = new Animated.Value(1);
+	const openForEdit = (item: ITaskStatusItem) => {
+		setEditMode(true);
+		setIsSheetOpen(true);
+		setItemToEdit(item);
+		sheetRef.current.snapTo(0);
+	};
+	// console.log("in-progress-again".replaceAll("-", " "))
 
-		return (
-			<Screen
-				contentContainerStyle={[$container, { backgroundColor: colors.background2 }]}
-				safeAreaEdges={["top"]}
-			>
-				<Animated.View>
-					<View style={[$headerContainer, { backgroundColor: colors.background }]}>
-						<View style={[styles.container, { backgroundColor: colors.background }]}>
-							<TouchableOpacity onPress={() => navigation.navigate("Setting")}>
-								<AntDesign name="arrowleft" size={24} color={colors.primary} />
-							</TouchableOpacity>
-							<Text style={[styles.title, { color: colors.primary }]}>
-								{translate("settingScreen.statusScreen.mainTitle")}
-							</Text>
-						</View>
+	return (
+		<Screen contentContainerStyle={[$container, { backgroundColor: colors.background2 }]} safeAreaEdges={['top']}>
+			<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
+			<Animated.View>
+				<View style={[$headerContainer, { backgroundColor: colors.background }]}>
+					<View style={[styles.container, { backgroundColor: colors.background }]}>
+						<TouchableOpacity onPress={() => navigation.navigate('Setting')}>
+							<AntDesign name="arrowleft" size={24} color={colors.primary} />
+						</TouchableOpacity>
+						<Text style={[styles.title, { color: colors.primary }]}>
+							{translate('settingScreen.statusScreen.mainTitle')}
+						</Text>
 					</View>
-					<View style={{ width: "100%", padding: 20, height: "80%" }}>
-						<View>
-							<Text style={styles.title2}>
-								{translate("settingScreen.statusScreen.listStatuses")}
-							</Text>
-						</View>
-						<View
-							style={{
-								minHeight: 200,
-								justifyContent: "center",
-								alignItems: "center",
-							}}
-						>
-							{isLoading ? (
-								<ActivityIndicator size={"small"} color={"#3826A6"} />
-							) : null}
-							{!isLoading && statuses?.total === 0 ? (
-								<Text style={{ ...styles.noStatusTxt, color: colors.primary }}>
-									{translate("settingScreen.statusScreen.noActiveStatuses")}
-								</Text>
-							) : null}
-
-							<FlatList
-								bounces={false}
-								showsVerticalScrollIndicator={false}
-								style={{ width: "100%" }}
-								data={statuses?.items}
-								renderItem={({ item }) => (
-									<StatusItem
-										openForEdit={() => openForEdit(item)}
-										onDeleteTask={() => deleteStatus(item.id)}
-										status={item}
-									/>
-								)}
-								keyExtractor={(_, index) => index.toString()}
-								ListFooterComponent={() => <View style={{ marginBottom: 40 }} />}
-							/>
-						</View>
+				</View>
+				<View style={{ width: '100%', padding: 20, height: '80%' }}>
+					<View>
+						<Text style={styles.title2}>{translate('settingScreen.statusScreen.listStatuses')}</Text>
 					</View>
-					<TouchableOpacity
+					<View
 						style={{
-							...styles.createButton,
-							borderColor: dark ? "#6755C9" : "#3826A6",
-						}}
-						onPress={() => {
-							setEditMode(false)
-							setIsSheetOpen(true)
-							sheetRef.current.snapTo(0)
+							minHeight: 200,
+							justifyContent: 'center',
+							alignItems: 'center'
 						}}
 					>
-						<Ionicons name="add" size={24} color={dark ? "#6755C9" : "#3826A6"} />
-						<Text style={{ ...styles.btnText, color: dark ? "#6755C9" : "#3826A6" }}>
-							{translate("settingScreen.statusScreen.createStatusButton")}
-						</Text>
-					</TouchableOpacity>
-				</Animated.View>
-				{isSheetOpen && (
-					<BlurView
-						intensity={15}
-						tint="dark"
-						style={{
-							position: "absolute",
-							width: "100%",
-							height: "100%",
+						{isLoading ? <ActivityIndicator size={'small'} color={'#3826A6'} /> : null}
+						{!isLoading && statuses?.total === 0 ? (
+							<Text style={{ ...styles.noStatusTxt, color: colors.primary }}>
+								{translate('settingScreen.statusScreen.noActiveStatuses')}
+							</Text>
+						) : null}
+
+						<FlatList
+							bounces={false}
+							showsVerticalScrollIndicator={false}
+							style={{ width: '100%' }}
+							data={statuses?.items}
+							renderItem={({ item }) => (
+								<StatusItem
+									openForEdit={() => openForEdit(item)}
+									onDeleteTask={() => deleteStatus(item.id)}
+									status={item}
+								/>
+							)}
+							keyExtractor={(_, index) => index.toString()}
+							ListFooterComponent={() => <View style={{ marginBottom: 40 }} />}
+						/>
+					</View>
+				</View>
+				<TouchableOpacity
+					style={{
+						...styles.createButton,
+						borderColor: dark ? '#6755C9' : '#3826A6'
+					}}
+					onPress={() => {
+						setEditMode(false);
+						setIsSheetOpen(true);
+						sheetRef.current.snapTo(0);
+					}}
+				>
+					<Ionicons name="add" size={24} color={dark ? '#6755C9' : '#3826A6'} />
+					<Text style={{ ...styles.btnText, color: dark ? '#6755C9' : '#3826A6' }}>
+						{translate('settingScreen.statusScreen.createStatusButton')}
+					</Text>
+				</TouchableOpacity>
+			</Animated.View>
+			{isSheetOpen && (
+				<BlurView
+					intensity={15}
+					tint="dark"
+					style={{
+						position: 'absolute',
+						width: '100%',
+						height: '100%'
+					}}
+				/>
+			)}
+			<BottomSheet
+				ref={sheetRef}
+				snapPoints={[452, 0]}
+				borderRadius={24}
+				initialSnap={1}
+				callbackNode={fall}
+				enabledGestureInteraction={true}
+				renderContent={() => (
+					<TaskStatusForm
+						item={itemToEdit}
+						onDismiss={() => {
+							setEditMode(false);
+							setIsSheetOpen(false);
+							sheetRef.current.snapTo(1);
 						}}
+						onUpdateStatus={updateStatus}
+						onCreateStatus={createStatus}
+						isEdit={editMode}
 					/>
 				)}
-				<BottomSheet
-					ref={sheetRef}
-					snapPoints={[452, 0]}
-					borderRadius={24}
-					initialSnap={1}
-					callbackNode={fall}
-					enabledGestureInteraction={true}
-					renderContent={() => (
-						<TaskStatusForm
-							item={itemToEdit}
-							onDismiss={() => {
-								setEditMode(false)
-								setIsSheetOpen(false)
-								sheetRef.current.snapTo(1)
-							}}
-							onUpdateStatus={updateStatus}
-							onCreateStatus={createStatus}
-							isEdit={editMode}
-						/>
-					)}
-				/>
-			</Screen>
-		)
-	}
+			/>
+		</Screen>
+	);
+};
 
 const $container: ViewStyle = {
-	flex: 1,
-}
+	flex: 1
+};
 const $headerContainer: ViewStyle = {
 	padding: 20,
 	paddingVertical: 16,
-	shadowColor: "rgba(0, 0, 0, 0.6)",
+	shadowColor: 'rgba(0, 0, 0, 0.6)',
 	shadowOffset: {
 		width: 0,
-		height: 2,
+		height: 2
 	},
 	shadowOpacity: 0.07,
 	shadowRadius: 1.0,
 	elevation: 1,
-	zIndex: 10,
-}
+	zIndex: 10
+};
 
 const styles = StyleSheet.create({
 	btnText: {
-		color: "#3826A6",
+		color: '#3826A6',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 18,
-		fontStyle: "normal",
+		fontStyle: 'normal'
 	},
 	container: {
-		alignItems: "center",
-		flexDirection: "row",
-		width: "100%",
+		alignItems: 'center',
+		flexDirection: 'row',
+		width: '100%'
 	},
 	createButton: {
-		alignItems: "center",
-		alignSelf: "center",
-		borderColor: "#3826A6",
+		alignItems: 'center',
+		alignSelf: 'center',
+		borderColor: '#3826A6',
 		borderRadius: 12,
 		borderWidth: 2,
-		flexDirection: "row",
-		justifyContent: "center",
+		flexDirection: 'row',
+		justifyContent: 'center',
 		marginTop: 24,
 		padding: 16,
-		width: "90%",
+		width: '90%'
 	},
 	noStatusTxt: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.primary.semiBold,
-		fontSize: 16,
+		fontSize: 16
 	},
 	title: {
-		alignSelf: "center",
+		alignSelf: 'center',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		textAlign: "center",
-		width: "80%",
+		textAlign: 'center',
+		width: '80%'
 	},
 	title2: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		marginBottom: 8,
-	},
-})
+		marginBottom: 8
+	}
+});
diff --git a/apps/mobile/app/screens/Authenticated/TaskVersionScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TaskVersionScreen/index.tsx
index c72f909b6..f19f654e6 100644
--- a/apps/mobile/app/screens/Authenticated/TaskVersionScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/TaskVersionScreen/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable react-native/no-inline-styles */
-import React, { FC, useRef, useState } from "react"
+import React, { FC, useRef, useState } from 'react';
 import {
 	View,
 	Text,
@@ -9,208 +9,203 @@ import {
 	StyleSheet,
 	ActivityIndicator,
 	FlatList,
-} from "react-native"
-import { AntDesign, Ionicons } from "@expo/vector-icons"
-import { Screen } from "../../../components"
-import { AuthenticatedDrawerScreenProps } from "../../../navigators/AuthenticatedNavigator"
-import { translate } from "../../../i18n"
-import { typography, useAppTheme } from "../../../theme"
-import BottomSheet from "reanimated-bottom-sheet"
-import Animated from "react-native-reanimated"
-import { useTaskVersion } from "../../../services/hooks/features/useTaskVersion"
-import { ITaskVersionItemList } from "../../../services/interfaces/ITaskVersion"
-import { BlurView } from "expo-blur"
-import VersionItem from "./components/VersionItem"
-import TaskVersionForm from "./components/TaskVersionForm"
+	StatusBar
+} from 'react-native';
+import { AntDesign, Ionicons } from '@expo/vector-icons';
+import { Screen } from '../../../components';
+import { AuthenticatedDrawerScreenProps } from '../../../navigators/AuthenticatedNavigator';
+import { translate } from '../../../i18n';
+import { typography, useAppTheme } from '../../../theme';
+import BottomSheet from 'reanimated-bottom-sheet';
+import Animated from 'react-native-reanimated';
+import { useTaskVersion } from '../../../services/hooks/features/useTaskVersion';
+import { ITaskVersionItemList } from '../../../services/interfaces/ITaskVersion';
+import { BlurView } from 'expo-blur';
+import VersionItem from './components/VersionItem';
+import TaskVersionForm from './components/TaskVersionForm';
 
-export const TaskVersionScreen: FC<AuthenticatedDrawerScreenProps<"TaskVersion">> =
-	function AuthenticatedDrawerScreen(_props) {
-		const { colors, dark } = useAppTheme()
-		const { navigation } = _props
+export const TaskVersionScreen: FC<AuthenticatedDrawerScreenProps<'TaskVersion'>> = function AuthenticatedDrawerScreen(
+	_props
+) {
+	const { colors, dark } = useAppTheme();
+	const { navigation } = _props;
 
-		const { isLoading, versions, deleteTaskVersion, updateTaskVersion, createTaskVersion } =
-			useTaskVersion()
+	const { isLoading, versions, deleteTaskVersion, updateTaskVersion, createTaskVersion } = useTaskVersion();
 
-		const [editMode, setEditMode] = useState(false)
-		const [itemToEdit, setItemToEdit] = useState<ITaskVersionItemList>(null)
-		const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
+	const [editMode, setEditMode] = useState(false);
+	const [itemToEdit, setItemToEdit] = useState<ITaskVersionItemList>(null);
+	const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false);
 
-		const sheetRef = useRef(null)
+	const sheetRef = useRef(null);
 
-		const fall = new Animated.Value(1)
-		const openForEdit = (item: ITaskVersionItemList) => {
-			setEditMode(true)
-			setIsSheetOpen(true)
-			setItemToEdit(item)
-			sheetRef.current.snapTo(0)
-		}
+	const fall = new Animated.Value(1);
+	const openForEdit = (item: ITaskVersionItemList) => {
+		setEditMode(true);
+		setIsSheetOpen(true);
+		setItemToEdit(item);
+		sheetRef.current.snapTo(0);
+	};
 
-		return (
-			<Screen
-				contentContainerStyle={[$container, { backgroundColor: colors.background2 }]}
-				safeAreaEdges={["top"]}
-			>
-				<Animated.View>
-					<View style={[$headerContainer, { backgroundColor: colors.background }]}>
-						<View style={[styles.container, { backgroundColor: colors.background }]}>
-							<TouchableOpacity onPress={() => navigation.navigate("Setting")}>
-								<AntDesign name="arrowleft" size={24} color={colors.primary} />
-							</TouchableOpacity>
-							<Text style={[styles.title, { color: colors.primary }]}>
-								{translate("settingScreen.versionScreen.mainTitle")}
-							</Text>
-						</View>
+	return (
+		<Screen contentContainerStyle={[$container, { backgroundColor: colors.background2 }]} safeAreaEdges={['top']}>
+			<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
+			<Animated.View>
+				<View style={[$headerContainer, { backgroundColor: colors.background }]}>
+					<View style={[styles.container, { backgroundColor: colors.background }]}>
+						<TouchableOpacity onPress={() => navigation.navigate('Setting')}>
+							<AntDesign name="arrowleft" size={24} color={colors.primary} />
+						</TouchableOpacity>
+						<Text style={[styles.title, { color: colors.primary }]}>
+							{translate('settingScreen.versionScreen.mainTitle')}
+						</Text>
 					</View>
+				</View>
 
-					<View style={{ width: "100%", padding: 20, height: "80%" }}>
-						<View>
-							<Text style={styles.title2}>
-								{translate("settingScreen.versionScreen.listOfVersions")}
-							</Text>
-						</View>
-						<View
-							style={{
-								minHeight: 200,
-								justifyContent: "center",
-								alignItems: "center",
-							}}
-						>
-							{isLoading ? (
-								<ActivityIndicator size={"small"} color={"#3826A6"} />
-							) : null}
-							{!isLoading && versions?.total === 0 ? (
-								<Text style={{ ...styles.noVersionTxt, color: colors.primary }}>
-									{translate("settingScreen.versionScreen.noActiveVersions")}
-								</Text>
-							) : null}
-
-							<FlatList
-								bounces={false}
-								showsVerticalScrollIndicator={false}
-								style={{ width: "100%" }}
-								data={versions?.items}
-								renderItem={({ item }) => (
-									<VersionItem
-										openForEdit={() => openForEdit(item)}
-										onDeleteTask={() => deleteTaskVersion(item.id)}
-										version={item}
-									/>
-								)}
-								keyExtractor={(_, index) => index.toString()}
-								ListFooterComponent={() => <View style={{ marginBottom: 40 }} />}
-							/>
-						</View>
+				<View style={{ width: '100%', padding: 20, height: '80%' }}>
+					<View>
+						<Text style={styles.title2}>{translate('settingScreen.versionScreen.listOfVersions')}</Text>
 					</View>
-					<TouchableOpacity
+					<View
 						style={{
-							...styles.createButton,
-							borderColor: dark ? "#6755C9" : "#3826A6",
-						}}
-						onPress={() => {
-							setEditMode(false)
-							setIsSheetOpen(true)
-							sheetRef.current.snapTo(0)
+							minHeight: 200,
+							justifyContent: 'center',
+							alignItems: 'center'
 						}}
 					>
-						<Ionicons name="add" size={24} color={dark ? "#6755C9" : "#3826A6"} />
-						<Text style={{ ...styles.btnText, color: dark ? "#6755C9" : "#3826A6" }}>
-							{translate("settingScreen.versionScreen.createNewVersionButton")}
-						</Text>
-					</TouchableOpacity>
-				</Animated.View>
-				{isSheetOpen && (
-					<BlurView
-						intensity={15}
-						tint="dark"
-						style={{
-							position: "absolute",
-							width: "100%",
-							height: "100%",
+						{isLoading ? <ActivityIndicator size={'small'} color={'#3826A6'} /> : null}
+						{!isLoading && versions?.total === 0 ? (
+							<Text style={{ ...styles.noVersionTxt, color: colors.primary }}>
+								{translate('settingScreen.versionScreen.noActiveVersions')}
+							</Text>
+						) : null}
+
+						<FlatList
+							bounces={false}
+							showsVerticalScrollIndicator={false}
+							style={{ width: '100%' }}
+							data={versions?.items}
+							renderItem={({ item }) => (
+								<VersionItem
+									openForEdit={() => openForEdit(item)}
+									onDeleteTask={() => deleteTaskVersion(item.id)}
+									version={item}
+								/>
+							)}
+							keyExtractor={(_, index) => index.toString()}
+							ListFooterComponent={() => <View style={{ marginBottom: 40 }} />}
+						/>
+					</View>
+				</View>
+				<TouchableOpacity
+					style={{
+						...styles.createButton,
+						borderColor: dark ? '#6755C9' : '#3826A6'
+					}}
+					onPress={() => {
+						setEditMode(false);
+						setIsSheetOpen(true);
+						sheetRef.current.snapTo(0);
+					}}
+				>
+					<Ionicons name="add" size={24} color={dark ? '#6755C9' : '#3826A6'} />
+					<Text style={{ ...styles.btnText, color: dark ? '#6755C9' : '#3826A6' }}>
+						{translate('settingScreen.versionScreen.createNewVersionButton')}
+					</Text>
+				</TouchableOpacity>
+			</Animated.View>
+			{isSheetOpen && (
+				<BlurView
+					intensity={15}
+					tint="dark"
+					style={{
+						position: 'absolute',
+						width: '100%',
+						height: '100%'
+					}}
+				/>
+			)}
+			<BottomSheet
+				ref={sheetRef}
+				snapPoints={[280, 0]}
+				borderRadius={24}
+				initialSnap={1}
+				callbackNode={fall}
+				enabledGestureInteraction={true}
+				renderContent={() => (
+					<TaskVersionForm
+						item={itemToEdit}
+						onDismiss={() => {
+							setEditMode(false);
+							setIsSheetOpen(false);
+							sheetRef.current.snapTo(1);
 						}}
+						onUpdateVersion={updateTaskVersion}
+						onCreateVersion={createTaskVersion}
+						isEdit={editMode}
 					/>
 				)}
-				<BottomSheet
-					ref={sheetRef}
-					snapPoints={[280, 0]}
-					borderRadius={24}
-					initialSnap={1}
-					callbackNode={fall}
-					enabledGestureInteraction={true}
-					renderContent={() => (
-						<TaskVersionForm
-							item={itemToEdit}
-							onDismiss={() => {
-								setEditMode(false)
-								setIsSheetOpen(false)
-								sheetRef.current.snapTo(1)
-							}}
-							onUpdateVersion={updateTaskVersion}
-							onCreateVersion={createTaskVersion}
-							isEdit={editMode}
-						/>
-					)}
-				/>
-			</Screen>
-		)
-	}
+			/>
+		</Screen>
+	);
+};
 
 const $container: ViewStyle = {
-	flex: 1,
-}
+	flex: 1
+};
 const $headerContainer: ViewStyle = {
 	padding: 20,
 	paddingVertical: 16,
-	shadowColor: "rgba(0, 0, 0, 0.6)",
+	shadowColor: 'rgba(0, 0, 0, 0.6)',
 	shadowOffset: {
 		width: 0,
-		height: 2,
+		height: 2
 	},
 	shadowOpacity: 0.07,
 	shadowRadius: 1.0,
 	elevation: 1,
-	zIndex: 10,
-}
+	zIndex: 10
+};
 
 const styles = StyleSheet.create({
 	btnText: {
-		color: "#3826A6",
+		color: '#3826A6',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 18,
-		fontStyle: "normal",
+		fontStyle: 'normal'
 	},
 	container: {
-		alignItems: "center",
-		flexDirection: "row",
-		width: "100%",
+		alignItems: 'center',
+		flexDirection: 'row',
+		width: '100%'
 	},
 	createButton: {
-		alignItems: "center",
-		alignSelf: "center",
-		borderColor: "#3826A6",
+		alignItems: 'center',
+		alignSelf: 'center',
+		borderColor: '#3826A6',
 		borderRadius: 12,
 		borderWidth: 2,
-		flexDirection: "row",
-		justifyContent: "center",
+		flexDirection: 'row',
+		justifyContent: 'center',
 		marginTop: 24,
 		padding: 16,
-		width: "90%",
+		width: '90%'
 	},
 	noVersionTxt: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.primary.semiBold,
-		fontSize: 16,
+		fontSize: 16
 	},
 	title: {
-		alignSelf: "center",
+		alignSelf: 'center',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		textAlign: "center",
-		width: "80%",
+		textAlign: 'center',
+		width: '80%'
 	},
 	title2: {
-		color: "#7E7991",
+		color: '#7E7991',
 		fontFamily: typography.primary.semiBold,
 		fontSize: 16,
-		marginBottom: 8,
-	},
-})
+		marginBottom: 8
+	}
+});
diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx
index 55d533f55..5ae74c70f 100644
--- a/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/TeamScreen/index.tsx
@@ -89,7 +89,7 @@ export const AuthenticatedTeamScreen: FC<AuthenticatedTabScreenProps<'Team'>> =
 				StatusBarProps={{ backgroundColor: 'black' }}
 				safeAreaEdges={['top']}
 			>
-				<StatusBar barStyle="default" />
+				<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
 				{isLoading ? (
 					<TeamScreenSkeleton />
 				) : (
diff --git a/apps/mobile/app/screens/Authenticated/TimerScreen/index.tsx b/apps/mobile/app/screens/Authenticated/TimerScreen/index.tsx
index affe29b0d..514fc56d0 100644
--- a/apps/mobile/app/screens/Authenticated/TimerScreen/index.tsx
+++ b/apps/mobile/app/screens/Authenticated/TimerScreen/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { ViewStyle, View, LogBox, TouchableWithoutFeedback } from 'react-native';
+import { ViewStyle, View, LogBox, TouchableWithoutFeedback, StatusBar } from 'react-native';
 
 // COMPONENTS
 import { Screen } from '../../../components';
@@ -48,6 +48,7 @@ export const AuthenticatedTimerScreen: FC<AuthenticatedTabScreenProps<'Timer'>>
 			backgroundColor={dark ? 'rgb(16,17,20)' : colors.background}
 			safeAreaEdges={['top']}
 		>
+			<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
 			<TouchableWithoutFeedback onPress={() => onClickOutside()}>
 				<View style={{ flex: 1 }}>
 					{isLoading ? (