diff --git a/frontend/occupi-mobile4/components/GradientButton.tsx b/frontend/occupi-mobile4/components/GradientButton.tsx
new file mode 100644
index 00000000..adb1f72b
--- /dev/null
+++ b/frontend/occupi-mobile4/components/GradientButton.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { LinearGradient } from 'expo-linear-gradient';
+import { StyleSheet } from 'react-native';
+import { Heading } from '@gluestack-ui/themed';
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
+
+const GradientButton = ({ onPress, text }) => {
+  return (
+  <LinearGradient
+    colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
+    locations={[0.02, 0.31, 0.67, 0.97]}
+    start={[0, 1]}
+    end={[1, 0]}
+    style={styles.buttonContainer}
+  >
+    <Heading style={styles.buttonText} onPress={onPress}>
+      {text}
+    </Heading>
+  </LinearGradient>
+  )
+};
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    borderRadius: 15,
+    marginTop: hp('2%'),
+    alignSelf: 'center',
+    width: wp('90%'),
+    height: hp('6%'),
+  },
+  buttonText: {
+    color: 'black',
+    fontSize: wp('4%'),
+    textAlign: 'center',
+    lineHeight: hp('6%'),
+  },
+});
+
+export default GradientButton
\ No newline at end of file
diff --git a/frontend/occupi-mobile4/screens/Login/Onboarding1.tsx b/frontend/occupi-mobile4/screens/Login/Onboarding1.tsx
index 0a5db70c..b4be21ab 100644
--- a/frontend/occupi-mobile4/screens/Login/Onboarding1.tsx
+++ b/frontend/occupi-mobile4/screens/Login/Onboarding1.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LinearGradient } from 'expo-linear-gradient';
 import {
   Image,
   Center,
@@ -9,20 +8,7 @@ import {
 import { StyleSheet, View } from 'react-native';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
-
-const GradientButton = ({ onPress, text }) => (
-  <LinearGradient
-    colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-    locations={[0.02, 0.31, 0.67, 0.97]}
-    start={[0, 1]}
-    end={[1, 0]}
-    style={styles.buttonContainer}
-  >
-    <Heading style={styles.buttonText} onPress={onPress}>
-      {text}
-    </Heading>
-  </LinearGradient>
-);
+import GradientButton from '@/components/GradientButton';
 
 const Onboarding1 = () => {
   return (
@@ -74,20 +60,7 @@ const styles = StyleSheet.create({
     padding: wp('4%'),
     fontWeight: '300',
     marginBottom: hp('4%'),
-  },
-  buttonContainer: {
-    borderRadius: 15,
-    marginTop: hp('2%'),
-    alignSelf: 'center',
-    width: wp('90%'),
-    height: hp('6%'),
-  },
-  buttonText: {
-    color: 'black',
-    fontSize: wp('4%'),
-    textAlign: 'center',
-    lineHeight: hp('6%'),
-  },
+  }
 });
 
 export default Onboarding1;
diff --git a/frontend/occupi-mobile4/screens/Login/Onboarding2.tsx b/frontend/occupi-mobile4/screens/Login/Onboarding2.tsx
index 605e2618..dce23b07 100644
--- a/frontend/occupi-mobile4/screens/Login/Onboarding2.tsx
+++ b/frontend/occupi-mobile4/screens/Login/Onboarding2.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LinearGradient } from 'expo-linear-gradient';
 import {
  Image,
   Center,
@@ -9,20 +8,7 @@ import {
 import { StyleSheet, View } from 'react-native';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
-
-const GradientButton = ({ onPress, text }) => (
-  <LinearGradient
-    colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-    locations={[0.02, 0.31, 0.67, 0.97]}
-    start={[0, 1]}
-    end={[1, 0]}
-    style={styles.buttonContainer}
-  >
-    <Heading style={styles.buttonText} onPress={onPress}>
-      {text}
-    </Heading>
-  </LinearGradient>
-);
+import GradientButton from '@/components/GradientButton';
 
 const Onboarding2 = () => {
   return (
@@ -74,20 +60,7 @@ const styles = StyleSheet.create({
     padding: wp('4%'),
     fontWeight: '300',
     marginBottom: hp('4%'),
-  },
-  buttonContainer: {
-    borderRadius: 15,
-    marginTop: hp('2%'),
-    alignSelf: 'center',
-    width: wp('90%'),
-    height: hp('6%'),
-  },
-  buttonText: {
-    color: 'black',
-    fontSize: wp('4%'),
-    textAlign: 'center',
-    lineHeight: hp('6%'),
-  },
+  }
 });
 
 export default Onboarding2;
diff --git a/frontend/occupi-mobile4/screens/Login/Onboarding3.tsx b/frontend/occupi-mobile4/screens/Login/Onboarding3.tsx
index e7c65a56..40b074c6 100644
--- a/frontend/occupi-mobile4/screens/Login/Onboarding3.tsx
+++ b/frontend/occupi-mobile4/screens/Login/Onboarding3.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LinearGradient } from 'expo-linear-gradient';
 import {
   Image,
   Center,
@@ -9,20 +8,7 @@ import {
 import { StyleSheet, View } from 'react-native';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
-
-const GradientButton = ({ onPress, text }) => (
-  <LinearGradient
-    colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-    locations={[0.02, 0.31, 0.67, 0.97]}
-    start={[0, 1]}
-    end={[1, 0]}
-    style={styles.buttonContainer}
-  >
-    <Heading style={styles.buttonText} onPress={onPress}>
-      {text}
-    </Heading>
-  </LinearGradient>
-);
+import GradientButton from '@/components/GradientButton';
 
 const Onboarding3 = () => {
   return (
@@ -74,20 +60,7 @@ const styles = StyleSheet.create({
     padding: wp('4%'),
     fontWeight: '300',
     marginBottom: hp('4%'),
-  },
-  buttonContainer: {
-    borderRadius: 15,
-    marginTop: hp('2%'),
-    alignSelf: 'center',
-    width: wp('90%'),
-    height: hp('6%'),
-  },
-  buttonText: {
-    color: 'black',
-    fontSize: wp('4%'),
-    textAlign: 'center',
-    lineHeight: hp('6%'),
-  },
+  }
 });
 
 export default Onboarding3;
diff --git a/frontend/occupi-mobile4/screens/Login/SignIn.tsx b/frontend/occupi-mobile4/screens/Login/SignIn.tsx
index d907d875..21df7803 100644
--- a/frontend/occupi-mobile4/screens/Login/SignIn.tsx
+++ b/frontend/occupi-mobile4/screens/Login/SignIn.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, Keyboard } from 'react-native';
-import { LinearGradient } from 'expo-linear-gradient';
+import { Keyboard } from 'react-native';
 import { router } from 'expo-router';
 import * as LocalAuthentication from 'expo-local-authentication';
 // import CookieManager from '@react-native-cookies/cookies';
@@ -41,6 +40,7 @@ import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-nat
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import Logo from '../../screens/Login/assets/images/Occupi/file.png';
 import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
+import GradientButton from '@/components/GradientButton';
 
 const signInSchema = z.object({
   email: z.string().min(1, 'Email is required').email(),
@@ -218,36 +218,6 @@ const SignInForm = () => {
     setShowPassword((showState) => !showState);
   };
 
-  const GradientButton = ({ onPress, text }) => (
-    <LinearGradient
-      colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-      locations={[0.02, 0.31, 0.67, 0.97]}
-      start={[0, 1]}
-      end={[1, 0]}
-      style={styles.buttonContainer}
-    >
-      <Heading style={styles.buttonText} onPress={onPress}>
-        {text}
-      </Heading>
-    </LinearGradient>
-  );
-
-  const styles = StyleSheet.create({
-    buttonContainer: {
-      borderRadius: 15,
-      marginTop: hp('2%'),
-      alignSelf: 'center',
-      width: wp('90%'),
-      height: hp('6%'),
-    },
-    buttonText: {
-      color: 'black',
-      fontSize: wp('4%'),
-      textAlign: 'center',
-      lineHeight: hp('6%'),
-    },
-  });
-
   return (
     <>
       <View style={{ alignItems: 'center', marginBottom: hp('2%') }}>
diff --git a/frontend/occupi-mobile4/screens/Login/SignUp.tsx b/frontend/occupi-mobile4/screens/Login/SignUp.tsx
index ba39e64b..874d99ba 100644
--- a/frontend/occupi-mobile4/screens/Login/SignUp.tsx
+++ b/frontend/occupi-mobile4/screens/Login/SignUp.tsx
@@ -27,16 +27,15 @@ import {
   InputSlot,
   FormControlLabel,
   FormControlLabelText,
+  View
 } from '@gluestack-ui/themed';
-
+import GradientButton from '@/components/GradientButton';
 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, StyleSheet } from 'react-native';
-import { LinearGradient } from 'expo-linear-gradient';
+import { Keyboard } from 'react-native';
 // import { FacebookIcon, GoogleIcon } from './assets/Icons/Social';
-import GuestLayout from '../../layouts/GuestLayout';
 import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
@@ -115,7 +114,6 @@ const SignUpForm = () => {
           router.push({pathname:'/verify-otp', params: { email: _data.email}});
         } else {
           setLoading(false);
-          // console.log(data);
           toast.show({
             placement: 'top',
             render: ({ id }) => {
@@ -162,36 +160,6 @@ const SignUpForm = () => {
     });
   };
 
-  const GradientButton = ({ onPress, text }) => (
-    <LinearGradient
-      colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-      locations={[0.02, 0.31, 0.67, 0.97]}
-      start={[0, 1]}
-      end={[1, 0]}
-      style={styles.buttonContainer}
-    >
-      <Heading style={styles.buttonText} onPress={onPress}>
-        {text}
-      </Heading>
-    </LinearGradient>
-  );
-
-  const styles = StyleSheet.create({
-    buttonContainer: {
-      borderRadius: 15,
-      marginTop: hp('2%'),
-      alignSelf: 'center',
-      width: wp('90%'),
-      height: hp('6%'),
-    },
-    buttonText: {
-      color: 'black',
-      fontSize: wp('4%'),
-      textAlign: 'center',
-      lineHeight: hp('6%'),
-    }
-  });
-
   return (
     <>
       <VStack justifyContent="space-between">
@@ -516,6 +484,7 @@ function SignUpFormComponent() {
           alignItems="center"
           justifyContent="center"
           mt="$5"
+          mb="$8"
         >
           <Text
             color="$textLight500"
@@ -529,7 +498,7 @@ function SignUpFormComponent() {
             Have an account?
           </Text>
 
-          <StyledExpoRouterLink href="/login">
+          <StyledExpoRouterLink replace href="/login">
             <LinkText color="yellowgreen" fontSize="$sm">Login</LinkText>
           </StyledExpoRouterLink>
         </HStack>
@@ -540,7 +509,7 @@ function SignUpFormComponent() {
 
 export default function SignUp() {
   return (
-    <GuestLayout>
+    <View flex="$1" pt="$12" backgroundColor='white'>
       <Box
         sx={{
           '@md': {
@@ -555,6 +524,6 @@ export default function SignUp() {
       <Box flex={1}>
         <SignUpFormComponent />
       </Box>
-    </GuestLayout>
+    </View>
   );
 }
diff --git a/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx b/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
index a5350c5e..da25d77e 100644
--- a/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
+++ b/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
@@ -93,7 +93,7 @@ export default function SplashScreen() {
   useEffect(() => {
     const timer = setTimeout(() => {
       setSelectedIndex(1); // Assuming Onboarding1 is at index 1
-      router.replace('/onboarding1'); // Navigate to Onboarding1 screen
+      router.replace('/signup'); // Navigate to Onboarding1 screen
     }, 5000); // 8 seconds
 
     return () => clearTimeout(timer); // Clean up timer on component unmount
diff --git a/frontend/occupi-mobile4/screens/Login/Welcome.tsx b/frontend/occupi-mobile4/screens/Login/Welcome.tsx
index fbcb82b6..06662f45 100644
--- a/frontend/occupi-mobile4/screens/Login/Welcome.tsx
+++ b/frontend/occupi-mobile4/screens/Login/Welcome.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LinearGradient } from 'expo-linear-gradient';
 import {
   Image,
   Center,
@@ -9,20 +8,7 @@ import {
 import { StyleSheet, View } from 'react-native';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
-
-const GradientButton = ({ onPress, text }) => (
-  <LinearGradient
-    colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-    locations={[0.02, 0.31, 0.67, 0.97]}
-    start={[0, 1]}
-    end={[1, 0]}
-    style={styles.buttonContainer}
-  >
-    <Heading style={styles.buttonText} onPress={onPress}>
-      {text}
-    </Heading>
-  </LinearGradient>
-);
+import GradientButton from '@/components/GradientButton';
 
 const Welcome = () => {
   return (
@@ -75,19 +61,6 @@ const styles = StyleSheet.create({
     fontWeight: '300',
     marginBottom: hp('6%'),
   },
-  buttonContainer: {
-    borderRadius: 15,
-    marginTop: hp('2%'),
-    alignSelf: 'center',
-    width: wp('90%'),
-    height: hp('6%'),
-  },
-  buttonText: {
-    color: 'black',
-    fontSize: wp('4%'),
-    textAlign: 'center',
-    lineHeight: hp('6%'),
-  },
   registerText: {
     fontWeight: 'bold',
     marginTop: hp('3%'),
diff --git a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx
index 3ce76880..559ad181 100644
--- a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx
+++ b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx
@@ -24,6 +24,7 @@ import { LinearGradient } from "expo-linear-gradient";
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import { ActivityIndicator } from 'react-native';
 import * as LocalAuthentication from "expo-local-authentication";
+import GradientButton from '@/components/GradientButton';
 
 const getTimeForSlot = (slot) => {
   console.log(slot);
@@ -395,32 +396,10 @@ const BookingDetails = () => {
               </View>
             </View>
           </View>
-          <TouchableOpacity
-            style={{ margin: 15, borderRadius: 25 }}
-            onPress={handleBiometricAuth}
-          >
-            <LinearGradient
-              colors={["#614DC8", "#86EBCC", "#B2FC3A", "#EEF060"]}
-              locations={[0.02, 0.31, 0.67, 0.97]}
-              start={[0, 1]}
-              end={[1, 0]}
-              style={{
-                padding: 15,
-                alignItems: "center",
-                borderRadius: 15,
-              }}
-            >
-              <Text
-                style={{
-                  color: isDark ? "#000" : "#fff",
-                  fontSize: 16,
-                  fontWeight: "bold",
-                }}
-              >
-                Confirm booking
-              </Text>
-            </LinearGradient>
-          </TouchableOpacity>
+          <GradientButton
+            onPress={() => handleBiometricAuth()}
+            text="Confirm booking"
+          />
         </View>
       )}
 
@@ -480,32 +459,11 @@ const BookingDetails = () => {
             }}
           />
 
-          {!loading ? (<TouchableOpacity
-            style={{ margin: 15, borderRadius: 15 }}
-            onPress={() => onSubmit()}
-          >
-            <LinearGradient
-              colors={["#614DC8", "#86EBCC", "#B2FC3A", "#EEF060"]}
-              locations={[0.02, 0.31, 0.67, 0.97]}
-              start={[0, 1]}
-              end={[1, 0]}
-              style={{
-                padding: 15,
-                alignItems: "center",
-                borderRadius: 15,
-              }}
-            >
-              <Text
-                style={{
-                  color: isDark ? '#000' : '#fff',
-                  fontSize: 16,
-                  fontWeight: "bold",
-                }}
-              >
-                Send invites
-              </Text>
-            </LinearGradient>
-          </TouchableOpacity>
+          {!loading ? (
+            <GradientButton
+              onPress={() => onSubmit()}
+              text="Send invites" 
+            />
           ) : (
             <TouchableOpacity
               style={{ margin: 15, borderRadius: 15 }}
diff --git a/frontend/occupi-mobile4/screens/Profile/Profile.tsx b/frontend/occupi-mobile4/screens/Profile/Profile.tsx
index ec013a0e..07444500 100644
--- a/frontend/occupi-mobile4/screens/Profile/Profile.tsx
+++ b/frontend/occupi-mobile4/screens/Profile/Profile.tsx
@@ -21,10 +21,10 @@ import {
   Icon,
 } from '@gluestack-ui/themed';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
-import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import { useColorScheme } from 'react-native';
 import { heightPercentageToDP as hp } from 'react-native-responsive-screen';
+import GradientButton from '@/components/GradientButton';
 
 const COLORS = {
   white: '#FFFFFF',
@@ -200,16 +200,10 @@ const Profile = () => {
           onChangeText={setPronouns}
         />
 
-        <TouchableOpacity style={styles.saveButton} onPress={onSave}>
-          <LinearGradient
-            colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
-            style={styles.saveButtonGradient}
-          >
-            <Text style={styles.saveButtonText}>Save</Text>
-          </LinearGradient>
-        </TouchableOpacity>
+        <GradientButton
+          onPress={onSave}
+          text="Save"
+        />
       </ScrollView>
     </SafeAreaView>
   );