diff --git a/frontend/sac-mobile/app/(auth)/login.tsx b/frontend/sac-mobile/app/(auth)/login.tsx
index 9f9457f16..e84977009 100644
--- a/frontend/sac-mobile/app/(auth)/login.tsx
+++ b/frontend/sac-mobile/app/(auth)/login.tsx
@@ -56,20 +56,20 @@ const Login = () => {
         <SafeAreaView className="bg-neutral-500 h-[100%]" edges={['top']}>
             <View className="flex-1">
                 <View className="px-[8%] pb-[10%]">
-                    <Wordmark textColor="white" />
-                    <View className="pt-[10%] pb-[5%]">
+                    <View className="pt-[1%]"><Wordmark textColor="white" /></View>
+                    <View className="pt-[10%] pb-[6.5%]">
                         <Header
                             text="Let's go"
                             fontSize="45"
                             color="white"
                         ></Header>
                     </View>
-                    <Text className="text-white pt-[2%] text-lg leading-5">
+                    <Text className="text-white pt-[3%] text-lg leading-5">
                         Discover, follow, and join all the clubs & events
                         Northeastern has to offer
                     </Text>
                 </View>
-                <View className="bg-white pt-[10%] pb-[2%] flex-1 pt-[12%] rounded-tl-3xl rounded-tr-3xl px-[8%]">
+                <View className="bg-white pt-[13.5%] pb-[2%] flex-1 rounded-tl-3xl rounded-tr-3xl px-[8%]">
                     <View>
                         <Controller
                             control={control}
@@ -114,11 +114,12 @@ const Login = () => {
                         <Text>Forgot password?</Text>
                     </View>
 
-                    <View className="flex-row justify-around">
+                    <View className="flex-row justify-between">
                         <Button
                             backgroundColor="white"
                             title="Sign up"
                             borderColor="gray"
+                            fullWidth={false}
                             onPress={() => router.push('/(auth)/register')}
                         />
                         <Button
@@ -126,10 +127,11 @@ const Login = () => {
                             color="white"
                             borderColor="gray"
                             backgroundColor="gray"
+                            fullWidth={false}
                             onPress={handleSubmit(onSubmit)}
                         />
                     </View>
-                    <View className="mt-[5%] flex-row justify-center">
+                    <View className="mt-[9%] flex-row justify-center">
                         <Text className="font-bold">Not a student?</Text>
                         <Text> Continue as a guest.</Text>
                     </View>
diff --git a/frontend/sac-mobile/app/(auth)/register.tsx b/frontend/sac-mobile/app/(auth)/register.tsx
index b1ecd13a0..2beeed423 100644
--- a/frontend/sac-mobile/app/(auth)/register.tsx
+++ b/frontend/sac-mobile/app/(auth)/register.tsx
@@ -3,6 +3,7 @@ import { Controller, useForm } from 'react-hook-form';
 import {
     Alert,
     ScrollView,
+    ScrollViewBase,
     StyleSheet,
     Text,
     TextInput,
@@ -20,21 +21,34 @@ import { DropdownComponent } from '@/components/dropdown';
 import Header from '@/components/header';
 import Input from '@/components/input';
 
+// list of items for dropdown menu
+type Item = {
+    label: string,
+    value: string,
+}
+
+// list of graduation year
+const graduationYear = () => {
+    var year = new Date().getFullYear();
+    const graduationYear: Item[] = [];
+    for (let i = 0; i < 5; i++) {
+        graduationYear.push({
+            label: String(year + i),
+            value: String(year + i)
+        });
+    }
+    return graduationYear;
+}
+
 type RegisterFormData = {
     firstName: string;
     lastName: string;
     email: string;
     password: string;
+    passwordConfirm: string;
+    id: string;
 };
 
-const graduationYear = [
-    { label: '2024', value: '2024' },
-    { label: '2025', value: '2025' },
-    { label: '2026', value: '2026' },
-    { label: '2027', value: '2027' },
-    { label: '2028', value: '2028' }
-];
-
 const registerSchema = z.object({
     firstName: z
         .string()
@@ -70,28 +84,28 @@ const Register = () => {
     };
 
     return (
+        <ScrollView className="scroll-smooth">
         <SafeAreaView
             edges={['top']}
-            style={styles.container}
             className="bg-neutral-500"
         >
-            <View className="px-[8%] pb-[10%]">
+            <View className="px-[8%] pb-[9%]">
                 <Wordmark
                     textColor="white"
                     button={true}
                     func={() => router.push('/(auth)/login')}
                     title="Login"
                 />
-                <View className="pt-[10%] pb-[5%]">
+                <View className="pt-[9%] pb-[6%]">
                     <Header text="Sign up" fontSize="45" color="white"></Header>
                 </View>
-                <Text style={styles.description}>
+                <Text className="text-lg text-white">
                     Discover, follow, and join all the clubs & events
                     Northeastern has to offer
                 </Text>
             </View>
-            <View style={styles.lowerContainer}>
-                <View className="w-full mb-4">
+            <View className="bg-white px-[8%] pt-[13%] rounded-t-3xl">
+                <View className="w-full mb-7">
                     <Controller
                         control={control}
                         render={({ field: { onChange, value } }) => (
@@ -112,7 +126,7 @@ const Register = () => {
                     )}
                 </View>
 
-                <View className="w-full mb-4">
+                <View className="w-full mb-7">
                     <Controller
                         control={control}
                         render={({ field: { onChange, value } }) => (
@@ -131,7 +145,7 @@ const Register = () => {
                     {errors.lastName && <Text>{errors.lastName.message}</Text>}
                 </View>
 
-                <View className="w-full mb-4">
+                <View className="w-full mb-7">
                     <Controller
                         control={control}
                         render={({ field: { onChange, value } }) => (
@@ -150,7 +164,7 @@ const Register = () => {
                     {errors.email && <Text>{errors.email.message}</Text>}
                 </View>
 
-                <View className="w-full mb-4">
+                <View className="w-full mb-7">
                     <Controller
                         control={control}
                         render={({ field: { onChange, value } }) => (
@@ -163,13 +177,21 @@ const Register = () => {
                                 onSubmitEditing={handleSubmit(onSubmit)}
                             />
                         )}
-                        name="password"
+                        name="id"
                         rules={{ required: 'Password is required' }}
                     />
                     {errors.password && <Text>{errors.password.message}</Text>}
                 </View>
 
-                <View className="w-full mb-4">
+                <View className="mb-6">
+                    <DropdownComponent
+                        title="Intended Graduation Year"
+                        item={graduationYear()}
+                        placeholder="Select Year"
+                    />
+                </View>
+
+                <View className="w-full mb-7">
                     <Controller
                         control={control}
                         render={({ field: { onChange, value } }) => (
@@ -189,78 +211,37 @@ const Register = () => {
                     {errors.password && <Text>{errors.password.message}</Text>}
                 </View>
 
-                <View className="w-full mb-4">
+                <View className="w-full mb-7">
                     <Controller
                         control={control}
                         render={({ field: { onChange, value } }) => (
                             <Input
                                 title="Password Confirmation"
                                 autoCorrect={false}
-                                placeholder="Password"
+                                placeholder="Confirm your password"
                                 onChangeText={onChange}
                                 value={value}
                                 onSubmitEditing={handleSubmit(onSubmit)}
                                 secureTextEntry={true}
                             />
                         )}
-                        name="password"
+                        name="passwordConfirm"
                         rules={{ required: 'Password is required' }}
                     />
                     {errors.password && <Text>{errors.password.message}</Text>}
                 </View>
-
-                <View>
-                    <DropdownComponent
-                        title="Intended Graduation Year"
-                        item={graduationYear}
-                        placeholder="Select Year"
-                    />
-                </View>
-                <View style={styles.submit}>
+                <View className="pt-[2%] pb-[25%]">
                     <Button
                         title="Submit"
+                        fullWidth={true}
                         color="white"
                         onPress={handleSubmit(onSubmit)}
                     />
                 </View>
             </View>
         </SafeAreaView>
+        </ScrollView>
     );
 };
 
 export default Register;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1
-    },
-    lowerContainer: {
-        backgroundColor: 'white',
-        borderRadius: 20,
-        flex: 1,
-        padding: '8%'
-    },
-    description: {
-        fontSize: 20,
-        color: 'white'
-    },
-    wordmarkButton: {
-        flexDirection: 'row',
-        justifyContent: 'space-evenly'
-    },
-    wordmark: {
-        flex: 1
-    },
-    button: {
-        flexDirection: 'row',
-        justifyContent: 'flex-end',
-        height: '50%'
-    },
-    submit: {
-        flexDirection: 'row',
-        justifyContent: 'center'
-    },
-    header: {
-        marginTop: '9%'
-    }
-});
diff --git a/frontend/sac-mobile/app/(auth)/welcome.tsx b/frontend/sac-mobile/app/(auth)/welcome.tsx
index 32aab1ede..84ed5ae94 100644
--- a/frontend/sac-mobile/app/(auth)/welcome.tsx
+++ b/frontend/sac-mobile/app/(auth)/welcome.tsx
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
     },
     description: {
         height: '15%',
-        fontSize: 23
+        fontSize: 24
     },
     button: {
         height: '5%'
diff --git a/frontend/sac-mobile/components/button.tsx b/frontend/sac-mobile/components/button.tsx
index 1cf73be70..e23cfdd8b 100644
--- a/frontend/sac-mobile/components/button.tsx
+++ b/frontend/sac-mobile/components/button.tsx
@@ -6,6 +6,7 @@ type ButtonProps = {
     color?: string;
     onPress?: () => void;
     borderColor?: string;
+    fullWidth?: boolean;
 };
 
 const Button = (props: ButtonProps) => {
@@ -14,28 +15,27 @@ const Button = (props: ButtonProps) => {
             backgroundColor: props.backgroundColor || 'gray',
             fontSize: 24,
             fontWeight: 'bold',
-            borderRadius: 15,
-            width: '47.5%',
-            borderColor: 'black'
+            borderRadius: 14,
+            width: props.fullWidth ? '100%' : '47.5%',
+            borderColor: 'black',
         },
         title: {
             color: props.color || 'black',
-            textAlign: 'center'
+            textAlign: 'center',
         },
         border: {
             borderWidth: 1,
-            borderRadius: 15,
-            borderColor: props.borderColor || 'gray'
+            borderColor: props.borderColor || 'gray',
         }
     });
 
     return (
         <Pressable onPress={props.onPress} style={styles.button}>
             <View
-                className="border-1 rounded-xl pt-[10%]"
+                className="border-1 rounded-xl pt-4 pb-4"
                 style={styles.border}
             >
-                <Text className="pb-[10%] px-[5%]" style={styles.title}>
+                <Text className="px-[5%]" style={styles.title}>
                     {props.title}
                 </Text>
             </View>
diff --git a/frontend/sac-mobile/components/dropdown.tsx b/frontend/sac-mobile/components/dropdown.tsx
index 86012131c..14fc99cd0 100644
--- a/frontend/sac-mobile/components/dropdown.tsx
+++ b/frontend/sac-mobile/components/dropdown.tsx
@@ -2,6 +2,9 @@ import React, { useState } from 'react';
 import {View, ScrollView, Text, StyleSheet} from 'react-native'; 
 import { Dropdown } from 'react-native-element-dropdown';
 
+// Library Component
+// for more customization --> https://www.npmjs.com/package/react-native-element-dropdown?activeTab=code
+
 type Item = {
     label: string, 
     value: string,
@@ -25,19 +28,22 @@ export const DropdownComponent = (props: ListOfItem) => {
 
   return (
     <ScrollView style={styles.container}>
-        <Text>{props.title}</Text>
+        <Text className="pb-[2%]">{props.title}</Text>
       {renderLabel()}
       <Dropdown
         style={[styles.dropdown, isFocus && { borderColor: 'black' }]}
         placeholderStyle={styles.placeholderStyle}
         selectedTextStyle={styles.selectedTextStyle}
         inputSearchStyle={styles.inputSearchStyle}
+        containerStyle={styles.containerStyle}
+        itemTextStyle={styles.itemTextStyle}
+        itemContainerStyle={styles.itemContainerStyle}
         data={props.item}
         search
         maxHeight={300}
         labelField="label"
         valueField="value"
-        placeholder={!isFocus ? props.placeholder : ''}
+        placeholder={!isFocus ? props.placeholder : 'Select Year'}
         searchPlaceholder="Search..."
         value={value}
         onFocus={() => setIsFocus(true)}
@@ -54,18 +60,19 @@ export const DropdownComponent = (props: ListOfItem) => {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',
-    height: '20%',
+    height: 80,
   },
   dropdown: {
-    height: '80%',
-    borderColor: 'gray',
+    height: '85%',
+    borderColor: 'black',
     borderWidth: 0.5,
-    borderRadius: 8,
-    paddingHorizontal: '3%',
+    borderRadius: 12,
+    paddingHorizontal: '5%',
   },
   placeholderStyle: {
     fontSize: 14,
-    color: 'gray'
+    color: '#CDCBCB',
+    borderRadius: 12,
   },
   selectedTextStyle: {
     fontSize: 14,
@@ -73,5 +80,20 @@ const styles = StyleSheet.create({
   inputSearchStyle: {
     height: 40,
     fontSize: 14,
+    borderRadius: 12,
+  },
+  containerStyle: {
+    borderRadius: 12,
+    marginTop: '2%',
+    borderColor: '#CDCBCB',
+  },
+  itemTextStyle: {
+    fontSize: 14,
+    paddingHorizontal: '3.5%',
+    borderBottomColor: 'grey',
   },
+  itemContainerStyle: {
+    borderBottomWidth: 0.8,
+    borderColor: '#CDCBCB',
+  }
 });
\ No newline at end of file