diff --git a/src/screens/notification/Notification.tsx b/src/screens/notification/Notification.tsx
index a9aaa4b..5b73218 100644
--- a/src/screens/notification/Notification.tsx
+++ b/src/screens/notification/Notification.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+// import React from 'react';
 import {
     View,
     Text,
@@ -19,6 +19,7 @@ import AppView from '../../components/AppView';
 import Header from '../../components/common/Header';
 import { useNavigation } from '@react-navigation/native';
 import { useNotificationHandler } from '../hook/useNotificationHandler';
+import colors from '../../components/colors';
 
 type FilterType = 'all' | 'JOIN_REQUEST' | 'CONTRIBUTION' | 'CONTRIBUTION_ACK' |
     'CYCLE_COMPLETED' | 'WITHDRAWAL' | 'WITHDRAWAL_NOTIFY' |
@@ -145,31 +146,31 @@ const Notification = () => {
     const getNotificationColor = (msgType: string) => {
         switch (msgType) {
             case 'JOIN_REQUEST':
-                return '#FF6B35'; // Orange
+                return '#FFB6C1'; // Pastel Pink
             case 'CONTRIBUTION':
-                return '#4CAF50'; // Green
+                return '#98FB98'; // Pastel Green
             case 'CONTRIBUTION_ACK':
-                return '#2196F3'; // Blue
+                return '#ADD8E6'; // Pastel Blue
             case 'CYCLE_COMPLETED':
-                return '#9C27B0'; // Purple
+                return '#D8BFD8'; // Pastel Purple
             case 'WITHDRAWAL':
-                return '#FF9800'; // Amber
+                return '#FFD700'; // Pastel Yellow
             case 'WITHDRAWAL_NOTIFY':
-                return '#F44336'; // Red
+                return '#FFA07A'; // Pastel Orange
             case 'CYCLE_WAIVER':
-                return '#607D8B'; // Blue Grey
+                return '#B0C4DE'; // Pastel Steel Blue
             case 'WAIVER_RECEIVED':
-                return '#009688'; // Teal
+                return '#AFEEEE'; // Pastel Turquoise
             case 'USER_SELECTED':
-                return '#673AB7'; // Deep Purple
+                return '#DDA0DD'; // Pastel Plum
             case 'GROUP_STARTED':
-                return '#00BCD4'; // Cyan
+                return '#87CEFA'; // Pastel Sky Blue
             case 'JOIN_APPROVED':
-                return '#4CAF50'; // Green
+                return '#98FB98'; // Pastel Green
             case 'JOIN_VIA_INVITE':
-                return '#FFC107'; // Yellow
+                return '#FFFACD'; // Pastel Lemon
             default:
-                return '#757575'; // Grey
+                return '#D3D3D3'; // Pastel Gray
         }
     };
 
@@ -210,11 +211,11 @@ const Notification = () => {
         <AppView>
             {/* Header with actions */}
             <Header
-                title={`Notifications ${unreadCount > 0 ? `(${unreadCount})` : ''}`} />
+                title={`Notifications ${unreadCount > 0 ? `(${unreadCount})` : ''}`}  arrowColor='#000' titleColor='#000'/>
             <View style={styles.headerActions}>
                 {unreadCount > 0 && (
                     <LinearGradient
-                        colors={['#4CAF50', '#45a049']}
+                        colors={[colors.primary, colors.pastelPink]} // Pastel Green gradient
                         style={[styles.headerButton, styles.markReadButton]}>
                         <TouchableOpacity onPress={handleMarkAllAsRead}>
                             <Text style={styles.headerButtonText}>Mark All Read</Text>
@@ -223,7 +224,7 @@ const Notification = () => {
                 )}
                 {notifications.length > 0 && (
                     <LinearGradient
-                        colors={['#FF6B6B', '#FF8E53']}
+                        colors={[colors.pastelPink, colors.pastelBlue]} // Pastel Pink to Pastel Orange gradient
                         style={styles.headerButton}>
                         <TouchableOpacity onPress={handleClearAll}>
                             <Text style={styles.headerButtonText}>Clear All</Text>
@@ -246,10 +247,11 @@ const Notification = () => {
                             activeOpacity={0.7}
                         >
                             <LinearGradient
-                                colors={item.read ? ['#f8f9fa', '#e9ecef'] : ['#ffffff', '#f8f9fa']}
+                                colors={item.read ? ['#F5F5F5', '#E8E8E8'] : ['#FFFFFF', '#F8F8FF']} // Pastel grays and whites
                                 style={[
                                     styles.notificationCard,
-                                    !item.read && styles.unreadNotification, { borderLeftColor: getNotificationColor(item.data.msgType) }
+                                    !item.read && styles.unreadNotification, 
+                                    { borderLeftColor: getNotificationColor(item.data.msgType) }
                                 ]}>
                                 <View style={styles.notificationContent}>
                                     {/* Icon */}
@@ -285,7 +287,6 @@ const Notification = () => {
                                                     styles.tag,
                                                     { backgroundColor: getNotificationColor(item.data.msgType) }
                                                 ]}>
-                                                    {/* {item.data.msgType} */}
                                                     {getFilterDisplayName(item.data.msgType as FilterType)}
                                                 </Text>
                                             </View>
@@ -301,7 +302,7 @@ const Notification = () => {
                                             onPress={() => handleDelete(item.messageId)}
                                             style={styles.deleteButton}
                                         >
-                                            <Ionicons name="trash-outline" size={20} color="#e63946" />
+                                            <Ionicons name="trash-outline" size={20} color={colors.pastelPink} /> {/* Pastel Pink */}
                                         </TouchableOpacity>
                                     </View>
                                 </View>
@@ -311,7 +312,7 @@ const Notification = () => {
                 }}
                 ListEmptyComponent={
                     <View style={styles.emptyContainer}>
-                        <Ionicons name="notifications-off-outline" size={64} color="#ccc" />
+                        <Ionicons name="notifications-off-outline" size={64} color="#D3D3D3" /> {/* Pastel Gray */}
                         <Text style={styles.emptyText}>No notifications yet</Text>
                         <Text style={styles.emptySubtext}>
                             When you get notifications, they'll appear here
@@ -344,7 +345,7 @@ const styles = StyleSheet.create({
         minWidth: 100,
     },
     headerButtonText: {
-        color: '#fff',
+        color: '#FFFFFF', // White text for better contrast on pastel backgrounds
         fontWeight: '600',
         fontSize: 12,
     },
@@ -358,15 +359,14 @@ const styles = StyleSheet.create({
         padding: 16,
         marginBottom: 10,
         shadowColor: '#000',
-        shadowOpacity: 0.1,
-        shadowRadius: 5,
-        elevation: 3,
+        shadowOpacity: 0.05, // Reduced opacity for softer shadow
+        shadowRadius: 4,
+        elevation: 2,
         borderLeftWidth: 4,
         borderLeftColor: 'transparent',
     },
     unreadNotification: {
-        // borderLeftColor: colors.primary,
-        backgroundColor: '#fff',
+        backgroundColor: '#F8F8FF', // Pastel Lavender
     },
     notificationContent: {
         flexDirection: 'row',
@@ -389,22 +389,22 @@ const styles = StyleSheet.create({
     title: {
         fontWeight: '600',
         fontSize: 16,
-        color: '#333',
+        color: '#696969', // Dim Gray
         flex: 1,
         marginRight: 8,
     },
     unreadTitle: {
         fontWeight: '700',
-        color: '#000',
+        color: '#2F4F4F', // Dark Slate Gray
     },
     message: {
         fontSize: 14,
-        color: '#666',
+        color: '#808080', // Gray
         lineHeight: 20,
     },
     time: {
         fontSize: 12,
-        color: '#999',
+        color: '#A9A9A9', // Dark Gray
         fontWeight: '500',
     },
     tagContainer: {
@@ -412,7 +412,7 @@ const styles = StyleSheet.create({
     },
     tag: {
         fontSize: 10,
-        color: '#fff',
+        color: '#FFFFFF', // White text for better contrast
         paddingHorizontal: 8,
         paddingVertical: 2,
         borderRadius: 4,
@@ -428,7 +428,7 @@ const styles = StyleSheet.create({
         width: 8,
         height: 8,
         borderRadius: 4,
-        backgroundColor: '#2196F3',
+        backgroundColor: '#87CEEB', // Pastel Sky Blue
     },
     deleteButton: {
         padding: 4,
@@ -442,13 +442,13 @@ const styles = StyleSheet.create({
     emptyText: {
         fontSize: 18,
         fontWeight: '600',
-        color: '#666',
+        color: '#A9A9A9', // Dark Gray
         marginTop: 16,
         marginBottom: 8,
     },
     emptySubtext: {
         fontSize: 14,
-        color: '#999',
+        color: '#C0C0C0', // Silver
         textAlign: 'center',
         lineHeight: 20,
     },