diff --git a/frontend/occupi-mobile4/screens/Login/CreatePassword.tsx b/frontend/occupi-mobile4/screens/Login/CreatePassword.tsx
index 2b5d648f..e5f60595 100644
--- a/frontend/occupi-mobile4/screens/Login/CreatePassword.tsx
+++ b/frontend/occupi-mobile4/screens/Login/CreatePassword.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import {
   VStack,
   Box,
@@ -14,12 +14,14 @@ import {
   Input,
   useToast,
   Toast,
+  Icon,
   InputField,
   ToastTitle,
   FormControlHelper,
   FormControlError,
   FormControlErrorIcon,
   FormControlErrorText,
+  ChevronLeftIcon,
   InputIcon,
   InputSlot,
   ScrollView,
@@ -28,15 +30,16 @@ import {
 } from '@gluestack-ui/themed';
 import { AlertTriangle } from 'lucide-react-native';
 import { LinearGradient } from 'expo-linear-gradient';
-import Logo from './assets/images/Occupi/file.png';
+import Logo from '../../screens/Login/assets/images/Occupi/Occupi-gradient.png';
 import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
-import { Keyboard } from 'react-native';
+import { Keyboard,StyleSheet, TextInput,Animated, Easing } from 'react-native';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import GuestLayout from '../../layouts/GuestLayout';
 import { router } from 'expo-router';
 import { styled } from '@gluestack-style/react';
+import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
 
 const StyledImage = styled(Image, {
   props: {
@@ -165,14 +168,42 @@ export default function CreatePassword() {
   });
 
   function ScreenText() {
+    const spinValue = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      Animated.loop(
+        Animated.timing(spinValue, {
+          toValue: 2,
+          duration: 10000,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        })
+      ).start();
+    }, []);
+  
+    const spin = spinValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '360deg'],
+    });
+
     return (
       <VStack space="md">
+        <StyledExpoRouterLink href="/login">
+        <Icon
+          as={ChevronLeftIcon}
+          color="$textLight800"
+          m="$0" w="$10" h="$16"
+          sx={{ _dark: { color: '$textDark800' } }}
+        />
+      </StyledExpoRouterLink>
          <HStack space="md" alignItems="center" justifyContent="center">
+         <Animated.View style={{ transform: [{ rotate: spin }] }}>
           <Image
             alt="logo"
             source={Logo}
             style={{ width: wp('27%'), height: wp('27%') }}
           />
+           </Animated.View>
         </HStack>
         <Heading
           fontSize={wp('6%')}
@@ -190,25 +221,7 @@ export default function CreatePassword() {
     );
   }
 
-  function WebSideContainer() {
-    return (
-      <Center
-        flex={1}
-        bg="$primary500"
-        sx={{
-          _dark: { bg: '$primary500' },
-        }}
-      >
-        <StyledImage
-          w="$80"
-          h="$10"
-          alt="Gluestack-ui pro"
-          resizeMode="contain"
-          source={require('./assets/images/gluestackUiProLogo_web_light.svg')}
-        />
-      </Center>
-    );
-  }
+  
   return (
     <GuestLayout>
       <Box
@@ -224,7 +237,6 @@ export default function CreatePassword() {
         }}
         flex={1}
       >
-        <WebSideContainer />
       </Box>
       <ScrollView
         contentContainerStyle={{
diff --git a/frontend/occupi-mobile4/screens/Login/ForgotPassword.tsx b/frontend/occupi-mobile4/screens/Login/ForgotPassword.tsx
index e0be8c99..5be12176 100644
--- a/frontend/occupi-mobile4/screens/Login/ForgotPassword.tsx
+++ b/frontend/occupi-mobile4/screens/Login/ForgotPassword.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState, useEffect }  from 'react';
 import { LinearGradient } from 'expo-linear-gradient';
 import {
   FormControl,
@@ -23,11 +23,11 @@ import {
   FormControlLabelText,
 } from '@gluestack-ui/themed';
 import GuestLayout from '../../layouts/GuestLayout';
-import Logo from '../../screens/Login/assets/images/Occupi/file.png';
+import Logo from '../../screens/Login/assets/images/Occupi/Occupi-gradient.png';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { Keyboard, StyleSheet } from 'react-native';
+import { Keyboard, StyleSheet, TextInput,Animated, Easing } from 'react-native';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import { AlertTriangle } from 'lucide-react-native';
 import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
@@ -130,9 +130,27 @@ export default function ForgotPassword() {
     }
   });
 
+  const spinValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 2,
+        duration: 10000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
   return (
     <GuestLayout>
-      <StyledExpoRouterLink bg="$white" href="..">
+      <StyledExpoRouterLink  href="/login">
         <Icon
           as={ChevronLeftIcon}
           color="$textLight800"
@@ -146,15 +164,16 @@ export default function ForgotPassword() {
           '_dark': { bg: '$backgroundDark900' },
         }}
         flex={1}
-        bg="white"
       >
         <Box sx={{ '$md': { display: 'none' } }}>
           <HStack space="$md" alignItems="center" justifyContent="center">
+          <Animated.View style={{ transform: [{ rotate: spin }] }}>
             <Image
               alt="logo"
               source={Logo}
               style={{ width: 150, height: 150 }}
             />
+             </Animated.View>
           </HStack>
         </Box>
         <Box sx={{ '$md': { display: 'flex' } }} display="none" flex={1}>
@@ -211,7 +230,7 @@ export default function ForgotPassword() {
 
           <FormControl
             my="$8"
-            isInvalid={(!!errors.email || isEmailFocused) && !!errors.email}
+            isInvalid={(!!errors.email ) && !!errors.email}
             isRequired={true}
           >
             <FormControlLabel mb="$1">
diff --git a/frontend/occupi-mobile4/screens/Login/OtpVerification.tsx b/frontend/occupi-mobile4/screens/Login/OtpVerification.tsx
index 81181bd0..1c696210 100644
--- a/frontend/occupi-mobile4/screens/Login/OtpVerification.tsx
+++ b/frontend/occupi-mobile4/screens/Login/OtpVerification.tsx
@@ -1,12 +1,12 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { View, StyleSheet, TextInput } from 'react-native';
+import { View, StyleSheet, TextInput,Animated, Easing } from 'react-native';
 import { VStack, Box, HStack, Image, Heading, Toast, useToast, ToastTitle, Text, } from '@gluestack-ui/themed';
 // import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 // import { zodResolver } from '@hookform/resolvers/zod';
 import * as SecureStore from 'expo-secure-store';
 import { useRouter, useLocalSearchParams } from 'expo-router';
-import Logo from './assets/images/Occupi/file.png';
+import Logo from '../../screens/Login/assets/images/Occupi/Occupi-gradient.png';
 import StyledExpoRouterLink from '@/components/StyledExpoRouterLink';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -21,7 +21,7 @@ type OTPSchemaType = z.infer<typeof OTPSchema>;
 const OTPVerification = () => {
   const [email, setEmail] = useState("");
   // const email = 'kamo@gmail.com';
-  const [remainingTime, setRemainingTime] = useState(60); // 1 minute
+  const [remainingTime, setRemainingTime] = useState(10); // 1 minute
   const otpSent = useState(false);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const [loading, setLoading] = useState(false);
@@ -102,7 +102,10 @@ const OTPVerification = () => {
       locations={[0.02, 0.31, 0.67, 0.97]}
       start={[0, 1]}
       end={[1, 0]}
-      style={styles.buttonContainer}
+      style={{ 
+        ...styles.buttonContainer, 
+        marginTop: 16, 
+      }}
     >
       <Heading style={styles.buttonText} onPress={onPress}>
         {text}
@@ -115,7 +118,7 @@ const OTPVerification = () => {
       bg="$backgroundLight0"
       sx={{
         '@md': {
-          p: '$8',
+          p: '$5',
         },
         '_dark': {
           bg: '$backgroundDark800',
@@ -124,12 +127,16 @@ const OTPVerification = () => {
       py="$8"
       px="$4"
       flex={1}
+       mt="$4"
+          mb="$4"
     >
       <MainText email={email} />
-      <VStack space="md">
+      <VStack >
         <OTPInput otp={otp} setOtp={setOtp} />
-        <Text>Entered OTP: {otp.join('')}</Text>
-        <Text fontSize="$md">{remainingTime} seconds remaining</Text>
+        <HStack justifyContent="space-between" width="100%">
+          <Text>Entered OTP: {otp.join('')}</Text>
+          {/* <Text fontSize="$sm">{remainingTime} minutes remaining</Text> */}
+        </HStack>
         {loading ? (
           <GradientButton
             onPress={onSubmit}
@@ -141,7 +148,6 @@ const OTPVerification = () => {
             text="Verify"
           />
         )}
-
         <GradientButton text="Resend OTP" />
       </VStack>
       <AccountLink />
@@ -150,11 +156,30 @@ const OTPVerification = () => {
 };
 
 const MainText = (email) => {
-  // console.log("email",email.email);
+  const spinValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 2,
+        duration: 10000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
   return (
     <VStack space="xs">
       <HStack space="md" alignItems="center" justifyContent="center" m="$12">
+      <Animated.View style={{ transform: [{ rotate: spin }] }}>
         <Image source={Logo} alt="occupi" style={{ width: wp('30%'), height: wp('30%') }} />
+        </Animated.View>
       </HStack>
       <Heading
         fontSize={wp('8%')}
@@ -169,7 +194,8 @@ const MainText = (email) => {
       <HStack space="sm" alignItems="center">
         <Text
           color="$black"
-          mt="$2"
+          mt="$4"
+          mb="$4"
           sx={{
             '@md': {
               pb: '$12',
@@ -181,7 +207,7 @@ const MainText = (email) => {
           fontSize={wp('5%')}
           fontWeight="$light"
         >
-          We have sent the OTP code to {email.email}
+          We have sent the OTP code to <Text fontWeight="bold">{email.email}</Text>
         </Text>
       </HStack>
     </VStack>
@@ -196,14 +222,13 @@ function AccountLink() {
           mt: '$40',
         },
       }}
-      mt="auto"
-      space="xs"
+      mt="$5"
       alignItems="center"
       justifyContent="center"
     >
       <Text
         color="$textLight800"
-        mt="$4"
+        
         sx={{
           _dark: {
             color: '$textDark400',
@@ -214,7 +239,7 @@ function AccountLink() {
         Already have an account?
       </Text>
       <StyledExpoRouterLink href="/login">
-        <Text style={{ color: '#7FFF00', fontSize: wp('4%') }}>
+        <Text style={{ color: '#7FFF00', fontSize: wp('4%') }} >
           Login
         </Text>
       </StyledExpoRouterLink>
diff --git a/frontend/occupi-mobile4/screens/Login/SignIn.tsx b/frontend/occupi-mobile4/screens/Login/SignIn.tsx
index d938634b..66c1a471 100644
--- a/frontend/occupi-mobile4/screens/Login/SignIn.tsx
+++ b/frontend/occupi-mobile4/screens/Login/SignIn.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { Keyboard } from 'react-native';
+import React, { useState, useEffect, useRef } from 'react';
+import { Keyboard,Animated, Easing } from 'react-native';
 import { router } from 'expo-router';
 import * as LocalAuthentication from 'expo-local-authentication';
 // import CookieManager from '@react-native-cookies/cookies';
@@ -37,7 +37,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { AlertTriangle, EyeIcon, EyeOffIcon } from 'lucide-react-native';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
-import Logo from '../../screens/Login/assets/images/Occupi/file.png';
+import Logo from '../../screens/Login/assets/images/Occupi/Occupi-gradient.png';
 import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
 import GradientButton from '@/components/GradientButton';
 import { UserLogin } from '@/utils/auth';
@@ -74,8 +74,11 @@ const SignInForm = () => {
 
   const toast = useToast();
 
+
+
   useEffect(() => {
     checkBiometricAvailability();
+   
   }, []);
 
   const checkBiometricAvailability = async () => {
@@ -84,6 +87,7 @@ const SignInForm = () => {
     // console.log('Biometric hardware available:', isBiometricAvailable);
   };
 
+ 
   const handleBiometricSignIn = async () => {
     const biometricType = await LocalAuthentication.supportedAuthenticationTypesAsync();
     console.log('Supported biometric types:', biometricType);
@@ -205,7 +209,7 @@ const SignInForm = () => {
             render={({ field: { onChange, onBlur, value } }) => (
               <Input backgroundColor="#f2f2f2" borderRadius="$md" borderColor="$#f2f2f2" h={hp('7%')}>
                 <InputField
-                  fontSize="$md"
+                  fontSize="$sm"
                   placeholder="john.doe@gmail.com"
                   type="text"
                   value={value}
@@ -244,7 +248,7 @@ const SignInForm = () => {
               },
             }}
             render={({ field: { onChange, onBlur, value } }) => (
-              <Input backgroundColor="#f2f2f2" borderRadius="$md" borderColor="$#f2f2f2" h={hp('7%')}>
+              <Input mb={hp('1%')} backgroundColor="#f2f2f2" borderRadius="$md" borderColor="$#f2f2f2" h={hp('7%') }>
                 <InputField
                   fontSize="$sm"
                   placeholder="Enter your password"
@@ -255,8 +259,8 @@ const SignInForm = () => {
                   returnKeyType="done"
                   type={showPassword ? 'text' : 'password'}
                 />
-                <InputSlot onPress={handleState} pr="$3">
-                  <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
+                <InputSlot onPress={handleState} pr="$5">
+                  <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} size="md" />
                 </InputSlot>
               </Input>
             )}
@@ -283,7 +287,7 @@ const SignInForm = () => {
           render={({ field: { onChange, value } }) => (
             <Checkbox
               aria-label="Close"
-              size="sm"
+              size="md"
               value="Remember me"
               isChecked={value}
               onChange={onChange}
@@ -297,7 +301,7 @@ const SignInForm = () => {
         />
 
         <StyledExpoRouterLink href="/forgot-password">
-          <LinkText color="yellowgreen" fontSize="$sm">
+          <LinkText color="yellowgreen" fontSize="$md">
             Forgot Password?
           </LinkText>
         </StyledExpoRouterLink>
@@ -320,6 +324,24 @@ const SignInForm = () => {
 };
 
 const Main = () => {
+  const spinValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 2,
+        duration: 10000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
   return (
     <Box
       px={wp('4%')}
@@ -339,11 +361,13 @@ const Main = () => {
     >
       <VStack mt={hp('2%')} mb={hp('2%')} space="md">
         <HStack space="md" alignItems="center" justifyContent="center">
+        <Animated.View style={{ transform: [{ rotate: spin }] }}>
           <Image
             alt="Occupi Logo"
             source={Logo}
             style={{ width: wp('40%'), height: wp('40%') }}
           />
+           </Animated.View>
         </HStack>
         <VStack space="xs" mt={hp('2%')} my={hp('2%')}>
           <Heading
diff --git a/frontend/occupi-mobile4/screens/Login/SignUp.tsx b/frontend/occupi-mobile4/screens/Login/SignUp.tsx
index f9242e30..c0cb31e3 100644
--- a/frontend/occupi-mobile4/screens/Login/SignUp.tsx
+++ b/frontend/occupi-mobile4/screens/Login/SignUp.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import Logo from '../../screens/Login/assets/images/Occupi/file.png';
+import React, { useState, useEffect, useRef } from 'react';
+import Logo from '../../screens/Login/assets/images/Occupi/Occupi-gradient.png';
 import {
   Checkbox,
   Image,
@@ -35,7 +35,8 @@ import { Controller, useForm } from 'react-hook-form';
 import { AlertTriangle, EyeIcon, EyeOffIcon } from 'lucide-react-native';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Keyboard, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { Keyboard,Animated, Easing,KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+
 // import { FacebookIcon, GoogleIcon } from './assets/Icons/Social';
 import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
 import { router } from 'expo-router';
@@ -256,7 +257,7 @@ const SignUpForm = () => {
                   type={showPassword ? 'text' : 'password'}
                 />
                 <InputSlot onPress={handleState} pr="$3">
-                  <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
+                  <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} size="md"/>
                 </InputSlot>
               </Input>
             )}
@@ -303,7 +304,7 @@ const SignUpForm = () => {
                   type={showConfirmPassword ? 'text' : 'password'}
                 />
                 <InputSlot onPress={handleConfirmPwState} pr="$3">
-                  <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
+                  <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} size="md"/>
                 </InputSlot>
               </Input>
             )}
@@ -323,13 +324,11 @@ const SignUpForm = () => {
         render={({ field: { onChange, value } }) => (
           <Checkbox
             aria-label="termsofuse"
-            size="sm"
+            size="md"
             value="privacy"
             isChecked={value}
             onChange={onChange}
             alignSelf="flex-start"
-            mt="$2"
-            mb="$12"
           >
             <CheckboxIndicator mr="$2">
               <CheckboxIcon color="yellowgreen" as={CheckIcon} />
@@ -394,6 +393,24 @@ const SignUpForm = () => {
 };
 
 function SignUpFormComponent() {
+  const spinValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 2,
+        duration: 10000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
   return (
     <>
       <Box
@@ -426,11 +443,13 @@ function SignUpFormComponent() {
         <VStack mb="$5" space="md">
 
           <HStack alignItems="center" justifyContent="center">
+          <Animated.View style={{ transform: [{ rotate: spin }] }}>
             <Image
               alt="Occupi Logo"
               source={Logo}
               style={{ width: wp('30%'), height: wp('30%') }}
             />
+             </Animated.View>
           </HStack>
           <VStack space="xs" mb="$2">
             <Heading
@@ -454,8 +473,6 @@ function SignUpFormComponent() {
           space="xs"
           alignItems="center"
           justifyContent="center"
-          mt="$5"
-          mb="$8"
         >
           <Text
             color="$textLight500"
@@ -464,13 +481,13 @@ function SignUpFormComponent() {
                 color: '$textDark400',
               },
             }}
-            fontSize="$sm"
+            fontSize={wp('4%')}
           >
             Have an account?
           </Text>
 
           <StyledExpoRouterLink replace href="/login">
-            <LinkText color="yellowgreen" fontSize="$sm">Login</LinkText>
+            <LinkText color="yellowgreen"  fontSize={wp('4%')}>Login</LinkText>
           </StyledExpoRouterLink>
         </HStack>
       </Box>
diff --git a/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx b/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
index 1c5dce6c..d5fef1e4 100644
--- a/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
+++ b/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
@@ -93,6 +93,7 @@ export default function SplashScreen() {
   useEffect(() => {
     const timer = setTimeout(() => {
       setSelectedIndex(1); // Assuming Onboarding1 is at index 1
+
       router.replace('/login'); // Navigate to Onboarding1 screen
     }, 5000); // 8 seconds
 
diff --git a/frontend/occupi-mobile4/screens/Login/Welcome.tsx b/frontend/occupi-mobile4/screens/Login/Welcome.tsx
index 06662f45..29a9e189 100644
--- a/frontend/occupi-mobile4/screens/Login/Welcome.tsx
+++ b/frontend/occupi-mobile4/screens/Login/Welcome.tsx
@@ -1,24 +1,44 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   Image,
   Center,
   Text,
   Heading,
 } from '@gluestack-ui/themed';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, Animated, Easing } from 'react-native';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 import GradientButton from '@/components/GradientButton';
 
 const Welcome = () => {
+  const spinValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 2,
+        duration: 10000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
   return (
     <View style={styles.container}>
       <Center style={styles.center}>
-        <Image
-          alt="logo"
-          source={require('../../screens/Login/assets/images/Occupi/logo-white.png')}
-          style={styles.logo}
-        />
+        <Animated.View style={{ transform: [{ rotate: spin }] }}>
+          <Image
+            alt="logo"
+            source={require('../../screens/Login/assets/images/Occupi/Occupi-gradient.png')}
+            style={styles.logo}
+          />
+        </Animated.View>
         <Heading style={styles.heading}>Log in. Let's Plan.</Heading>
         <Text style={styles.subHeading}>Predict. Plan. Perfect.</Text>
         <GradientButton
diff --git a/frontend/occupi-mobile4/screens/Login/assets/images/Occupi/Occupi-gradient.png b/frontend/occupi-mobile4/screens/Login/assets/images/Occupi/Occupi-gradient.png
new file mode 100644
index 00000000..d405ea74
Binary files /dev/null and b/frontend/occupi-mobile4/screens/Login/assets/images/Occupi/Occupi-gradient.png differ