diff --git a/src/components/AnimatedContainer/AnimatedContainer.tsx b/src/components/AnimatedContainer/AnimatedContainer.tsx
index 1bf1fd1..1a92823 100644
--- a/src/components/AnimatedContainer/AnimatedContainer.tsx
+++ b/src/components/AnimatedContainer/AnimatedContainer.tsx
@@ -13,7 +13,8 @@ export default function AnimatedContainer(props: props) {
       contentContainerStyle={styles.container}
       from={{
         borderRadius: 0,
-        backgroundColor: colors.primary_3,
+        opacity: 0,
+        backgroundColor: colors.secondary_2,
         paddingTop: 4,
         paddingBottom: 4,
         marginHorizontal: "4%",
@@ -21,13 +22,14 @@ export default function AnimatedContainer(props: props) {
       }}
       animate={{
         borderRadius: 15,
-        backgroundColor: colors.primary_3,
+        opacity: 1,
+        backgroundColor: colors.secondary_2,
         paddingTop: 16,
         paddingBottom: 16,
         marginHorizontal: "4%",
         marginVertical: "5%",
       }}
-      transition={{ type: "timing", duration: 300 }}
+      transition={{ type: "timing", duration: 700 }}
     >
       {props.children}
     </MotiScrollView>
diff --git a/src/components/DrawerSettings/DrawerScreenSettings.tsx b/src/components/DrawerSettings/DrawerScreenSettings.tsx
index 8e4ccbf..608a118 100644
--- a/src/components/DrawerSettings/DrawerScreenSettings.tsx
+++ b/src/components/DrawerSettings/DrawerScreenSettings.tsx
@@ -10,14 +10,14 @@ const DrawerScreenSettings: DrawerNavigationOptions = {
     fontSize: font_sizes.medium,
   },
   unmountOnBlur: true,
-  headerStyle: { backgroundColor: colors.secondary_4 },
+  headerStyle: { backgroundColor: colors.primary_1 },
   headerTintColor: colors.text_default,
   drawerType: "slide",
   drawerLabelStyle: {
     color: colors.text_default,
   },
   drawerStyle: {
-    backgroundColor: colors.secondary_4,
+    backgroundColor: colors.primary_1,
     width: 260,
   },
   headerRight: () => (
diff --git a/src/routes/Login/Login.tsx b/src/routes/Login/Login.tsx
index 7c8e0e2..38f6333 100644
--- a/src/routes/Login/Login.tsx
+++ b/src/routes/Login/Login.tsx
@@ -101,13 +101,13 @@ export default function Login() {
               }
             });
           }}
-          color={colors.button_1}
+          color={colors.secondary_3}
         >
           <Text style={styles.text_white_small}>Login</Text>
         </Button>
         <Button
           onPress={() => navigation.navigate("Register")}
-          color={colors.button_2}
+          color={colors.secondary_3}
         >
           <Text style={styles.text_white_small}>Register</Text>
         </Button>
diff --git a/src/routes/Register/Register.tsx b/src/routes/Register/Register.tsx
index 074c8a2..dc3d55d 100644
--- a/src/routes/Register/Register.tsx
+++ b/src/routes/Register/Register.tsx
@@ -158,7 +158,7 @@ export default function Register() {
             {
             }
           }}
-          color={colors.button_2}
+          color={colors.secondary_3}
         >
           <Text style={styles.text_white_small}>Register</Text>
         </Button>
diff --git a/src/routes/UserInfo/UserInfo.tsx b/src/routes/UserInfo/UserInfo.tsx
index b360170..db33407 100644
--- a/src/routes/UserInfo/UserInfo.tsx
+++ b/src/routes/UserInfo/UserInfo.tsx
@@ -171,13 +171,13 @@ export default function UserInfo() {
                 color: "white",
               }}
               dropdownStyle={{
-                backgroundColor: colors.primary_4,
+                backgroundColor: colors.primary_2,
               }}
               data={subjectOptions}
               buttonStyle={{
                 width: "90%",
                 marginLeft: 10,
-                backgroundColor: colors.primary_4,
+                backgroundColor: colors.primary_2,
                 borderRadius: 8,
               }}
             />
diff --git a/src/styles.tsx b/src/styles.tsx
index f18eda2..7bc39d6 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -7,20 +7,19 @@ const containerWidth = width - width * 0.08;
 const containerHeight = height - height * 0.01;
 
 export const colors = {
-  primary_1: "#FFDEAD",
-  primary_2: "#FFE2C1",
-  primary_3: "#fdac1d",
-  primary_4: "#e3973f",
-  secondary_1: "#4C87A1",
-  secondary_2: "#77ACC3",
-  secondary_3: "#1B5D79",
-  secondary_4: "#0047AB",
+  primary_1: "#1C2C3F",
+  primary_2: "#445467",
+  primary_3: "#606F81",
+  primary_4: "#b4d0f3",
+  secondary_1: "#1E1F3D",
+  secondary_2: "#626297",
+  secondary_3: "#7a7abd",
+  secondary_4: "#FFE9CE",
+  secondary_5: "#FFF5E9",
   text_default: "#FFFF",
   text_error: "#e32d1e",
   text_success: "#2ecc71",
   icon_color: "#FFFF",
-  button_1: "#0047AB",
-  button_2: "#0096FF",
   head: "#FFFF",
 };
 
@@ -35,7 +34,7 @@ export const font_sizes = {
 
 const styles = StyleSheet.create({
   background: {
-    backgroundColor: colors.primary_1,
+    backgroundColor: colors.secondary_1,
     height: "100%",
     width: "100%",
   },
@@ -110,8 +109,9 @@ const styles = StyleSheet.create({
   },
   text_input: {
     color: colors.text_default,
-    backgroundColor: colors.primary_4,
-    borderColor: colors.primary_3,
+    backgroundColor: colors.primary_2,
+    borderColor: colors.primary_4,
+    borderWidth: 1,
     padding: 10,
     borderRadius: 8,
     width: width * 0.5,
@@ -140,7 +140,7 @@ const styles = StyleSheet.create({
     marginRight: 30,
     borderWidth: 1,
     color: colors.text_default,
-    backgroundColor: colors.primary_4,
+    backgroundColor: colors.primary_2,
     borderRadius: 8,
     borderColor: colors.primary_3,
     padding: 8,