diff --git a/apps/mobile/app.config.js b/apps/mobile/app.config.js
index 96c2c77..cb6aaff 100644
--- a/apps/mobile/app.config.js
+++ b/apps/mobile/app.config.js
@@ -9,7 +9,7 @@ export default {
     splash: {
       image: "./assets/splash.png",
       resizeMode: "cover",
-      backgroundColor: "#4338ca"
+      backgroundColor: "#2f3e4e"
     },
     ios: {
       supportsTablet: true
@@ -18,7 +18,7 @@ export default {
       googleServicesFile: process.env.GOOGLE_SERVICES_JSON ?? "./google-services.json",
       adaptiveIcon: {
         foregroundImage: "./assets/adaptive-icon.png",
-        backgroundColor: "#4338ca"
+        backgroundColor: "#2f3e4e"
       },
       package: "com.inspirebyte.vaastio",
       edgeToEdgeEnabled: false,
diff --git a/apps/mobile/assets/logo.png b/apps/mobile/assets/logo.png
new file mode 100644
index 0000000..30f98f4
Binary files /dev/null and b/apps/mobile/assets/logo.png differ
diff --git a/apps/mobile/src/constants/colors.ts b/apps/mobile/src/constants/colors.ts
index 154e520..960f3c0 100644
--- a/apps/mobile/src/constants/colors.ts
+++ b/apps/mobile/src/constants/colors.ts
@@ -1,5 +1,5 @@
 export const Colors = {
-  primary: '#4338ca',
+  primary: '#2f3e4e',
   background: '#f8fafc',
   surface: '#ffffff',
   text: '#0f172a',
diff --git a/apps/mobile/src/screens/announcements/AnnouncementDetailScreen.tsx b/apps/mobile/src/screens/announcements/AnnouncementDetailScreen.tsx
index 82050d6..d7bddd9 100644
--- a/apps/mobile/src/screens/announcements/AnnouncementDetailScreen.tsx
+++ b/apps/mobile/src/screens/announcements/AnnouncementDetailScreen.tsx
@@ -27,15 +27,19 @@ import { getApiErrorCode } from '../../services/api'
 import { getErrorMessage } from '../../utils/errorMessages'
 import { Colors } from '../../constants/colors'
 import { Spacing } from '../../constants/spacing'
+import { Ionicons } from '@expo/vector-icons'
 
 type Props = NativeStackScreenProps<AppStackParamList, 'AnnouncementDetail'>
 
-const CATEGORY_ICON: Record<AnnouncementCategory, string> = {
-  GENERAL:     '📢',
-  MAINTENANCE: '🔧',
-  MEETING:     '👥',
-  EMERGENCY:   '🚨',
-  CELEBRATION: '🎉',
+const CATEGORY_ICON: Record<
+  AnnouncementCategory,
+  keyof typeof Ionicons.glyphMap
+> = {
+  GENERAL:     'megaphone-outline',
+  MAINTENANCE: 'construct-outline',
+  MEETING:     'people-outline',
+  EMERGENCY:   'warning-outline',
+  CELEBRATION: 'sparkles-outline',
 }
 
 const CATEGORY_COLORS: Record<AnnouncementCategory, { bg: string; text: string }> = {
@@ -122,7 +126,11 @@ export function AnnouncementDetailScreen({ route, navigation }: Props) {
         {/* Badges row */}
         <View style={styles.badgeRow}>
           <View style={[styles.categoryBadge, { backgroundColor: colors.bg }]}>
-            <Text style={styles.categoryIcon}>{CATEGORY_ICON[announcement.category]}</Text>
+            <Ionicons
+              name={CATEGORY_ICON[announcement.category]}
+              size={20}
+              color={Colors.primary}
+            />
             <Text style={[styles.categoryText, { color: colors.text }]}>
               {announcement.category.charAt(0) + announcement.category.slice(1).toLowerCase()}
             </Text>
diff --git a/apps/mobile/src/screens/announcements/AnnouncementsListScreen.tsx b/apps/mobile/src/screens/announcements/AnnouncementsListScreen.tsx
index 417b644..3080580 100644
--- a/apps/mobile/src/screens/announcements/AnnouncementsListScreen.tsx
+++ b/apps/mobile/src/screens/announcements/AnnouncementsListScreen.tsx
@@ -20,6 +20,7 @@ import { useAuth } from '../../hooks/useAuth'
 import { listAnnouncements, Announcement, AnnouncementCategory } from '../../services/announcements'
 import { Colors } from '../../constants/colors'
 import { Spacing } from '../../constants/spacing'
+import { Ionicons } from '@expo/vector-icons'
 
 type Props = NativeStackScreenProps<AppStackParamList, 'AnnouncementsList'>
 
@@ -34,13 +35,16 @@ const FILTERS: { label: string; value: CategoryFilter }[] = [
   { label: 'Celebration', value: 'CELEBRATION' },
 ]
 
-const CATEGORY_ICON: Record<AnnouncementCategory, string> = {
-  GENERAL:     '📢',
-  MAINTENANCE: '🔧',
-  MEETING:     '👥',
-  EMERGENCY:   '🚨',
-  CELEBRATION: '🎉',
-}
+const CATEGORY_ICON: Record<
+  AnnouncementCategory,
+  keyof typeof Ionicons.glyphMap
+  > = {
+    GENERAL:     'megaphone-outline',
+    MAINTENANCE: 'construct-outline',
+    MEETING:     'people-outline',
+    EMERGENCY:   'warning-outline',
+    CELEBRATION: 'sparkles-outline',
+  }
 
 const CATEGORY_COLORS: Record<AnnouncementCategory, { bg: string; text: string; icon: string }> = {
   GENERAL:     { bg: '#f3f4f6', text: '#6b7280', icon: '#9ca3af' },
@@ -98,14 +102,24 @@ export function AnnouncementsListScreen({ route, navigation }: Props) {
         style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
       >
         <View style={[styles.rowIcon, { backgroundColor: colors.bg }]}>
-          <Text style={styles.rowIconText}>{CATEGORY_ICON[item.category]}</Text>
+          <Ionicons
+            name={CATEGORY_ICON[item.category]}
+            size={20}
+            color={colors.icon}
+          />
         </View>
         <View style={styles.rowContent}>
           <View style={styles.rowTop}>
             <Text style={styles.rowTitle} numberOfLines={1}>
               {item.title}
             </Text>
-            {item.isPinned ? <Text style={styles.pinIcon}>📌</Text> : null}
+            {item.isPinned ? (
+                <Ionicons
+                  name="pin"
+                  size={14}
+                  color={Colors.subtle}
+                />
+              ) : null}
           </View>
           <Text style={styles.rowBody} numberOfLines={2}>
             {item.body}
@@ -262,7 +276,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexShrink: 0,
   },
-  rowIconText: { fontSize: 18 },
   rowContent: { flex: 1, gap: 4 },
   rowTop: { flexDirection: 'row', alignItems: 'center', gap: 6 },
   rowTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: Colors.text },
diff --git a/apps/mobile/src/screens/auth/LoginOTPScreen.tsx b/apps/mobile/src/screens/auth/LoginOTPScreen.tsx
index 2bf9d2b..b2d8067 100644
--- a/apps/mobile/src/screens/auth/LoginOTPScreen.tsx
+++ b/apps/mobile/src/screens/auth/LoginOTPScreen.tsx
@@ -25,7 +25,7 @@ import { Colors } from '../../constants/colors'
 type Props = NativeStackScreenProps<AuthStackParamList, 'LoginOTP'>
 
 const OTP_LENGTH = 6
-const BRAND = '#4338ca'
+const BRAND = '#2f3e4e'
 
 export function LoginOTPScreen({ route, navigation }: Props) {
   const { phone } = route.params
@@ -125,7 +125,7 @@ export function LoginOTPScreen({ route, navigation }: Props) {
   if (!fontsLoaded) return null
 
   return (
-    <LinearGradient colors={['#4338ca', '#3730a3']} style={styles.root}>
+    <LinearGradient colors={['#2f3e4e', '#3730a3']} style={styles.root}>
       <StatusBar barStyle="light-content" backgroundColor={BRAND} translucent={false} />
 
       {/* ── Top: gradient header ── */}
diff --git a/apps/mobile/src/screens/auth/LoginPhoneScreen.tsx b/apps/mobile/src/screens/auth/LoginPhoneScreen.tsx
index ca162bb..46c3aea 100644
--- a/apps/mobile/src/screens/auth/LoginPhoneScreen.tsx
+++ b/apps/mobile/src/screens/auth/LoginPhoneScreen.tsx
@@ -24,7 +24,7 @@ import { Colors } from '../../constants/colors'
 
 type Props = NativeStackScreenProps<AuthStackParamList, 'LoginPhone'>
 
-const BRAND = '#4338ca'
+const BRAND = '#2f3e4e'
 
 export function LoginPhoneScreen({ navigation }: Props) {
   const insets = useSafeAreaInsets()
@@ -62,7 +62,7 @@ export function LoginPhoneScreen({ navigation }: Props) {
   if (!fontsLoaded) return null
 
   return (
-    <LinearGradient colors={['#4338ca', '#3730a3']} style={styles.root}>
+    <LinearGradient colors={['#2f3e4e', '#3730a3']} style={styles.root}>
       <StatusBar barStyle="light-content" backgroundColor={BRAND} translucent={false} />
 
       {/* ── Top: gradient header ── */}
@@ -77,7 +77,7 @@ export function LoginPhoneScreen({ navigation }: Props) {
         </Pressable>
 
         <Image
-          source={require('../../../assets/icon.png')}
+          source={require('../../../assets/logo.png')}
           style={styles.logo}
           resizeMode="contain"
         />
diff --git a/apps/mobile/src/screens/auth/SetNameScreen.tsx b/apps/mobile/src/screens/auth/SetNameScreen.tsx
index 1697dac..03618ba 100644
--- a/apps/mobile/src/screens/auth/SetNameScreen.tsx
+++ b/apps/mobile/src/screens/auth/SetNameScreen.tsx
@@ -21,7 +21,7 @@ import { Colors } from '../../constants/colors'
 
 type Props = NativeStackScreenProps<AuthStackParamList, 'SetName'>
 
-const BRAND = '#4338ca'
+const BRAND = '#2f3e4e'
 
 export function SetNameScreen({ route, navigation }: Props) {
   const { requiresOrgSelection, memberships, currentOrgId } = route.params
@@ -70,7 +70,7 @@ export function SetNameScreen({ route, navigation }: Props) {
   if (!fontsLoaded) return null
 
   return (
-    <LinearGradient colors={['#4338ca', '#3730a3']} style={styles.root}>
+    <LinearGradient colors={['#2f3e4e', '#3730a3']} style={styles.root}>
       <StatusBar barStyle="light-content" backgroundColor={BRAND} translucent={false} />
 
       {/* ── Top: gradient header ── */}
diff --git a/apps/mobile/src/screens/auth/WelcomeScreen.tsx b/apps/mobile/src/screens/auth/WelcomeScreen.tsx
index 22e3ff8..9e0fb3c 100644
--- a/apps/mobile/src/screens/auth/WelcomeScreen.tsx
+++ b/apps/mobile/src/screens/auth/WelcomeScreen.tsx
@@ -9,7 +9,7 @@ import { AuthStackParamList } from '../../navigation/AuthNavigator'
 
 type Props = NativeStackScreenProps<AuthStackParamList, 'Welcome'>
 
-const BRAND = '#4338ca'
+const BRAND = '#2f3e4e'
 
 const FEATURES: React.ComponentProps<typeof Ionicons>['name'][] = [
   'business-outline',
@@ -26,13 +26,13 @@ export function WelcomeScreen({ navigation }: Props) {
   if (!fontsLoaded) return null
 
   return (
-    <LinearGradient colors={['#4338ca', '#3730a3']} style={styles.root}>
+    <LinearGradient colors={['#2f3e4e', '#3730a3']} style={styles.root}>
       <StatusBar barStyle="light-content" backgroundColor={BRAND} translucent={false} />
 
       {/* ── Brand area ── */}
       <View style={[styles.top, { paddingTop: insets.top + 24 }]}>
         <Image
-          source={require('../../../assets/icon.png')}
+          source={require('../../../assets/logo.png')}
           style={styles.logo}
           resizeMode="contain"
         />
@@ -81,7 +81,6 @@ const styles = StyleSheet.create({
   logo: {
     width: 92,
     height: 116,
-    tintColor: '#fff',
     marginBottom: 4,
   },
   appName: {
diff --git a/apps/mobile/src/screens/complaints/ComplaintDetailScreen.tsx b/apps/mobile/src/screens/complaints/ComplaintDetailScreen.tsx
index cc050a1..624aed0 100644
--- a/apps/mobile/src/screens/complaints/ComplaintDetailScreen.tsx
+++ b/apps/mobile/src/screens/complaints/ComplaintDetailScreen.tsx
@@ -25,6 +25,7 @@ import { getApiErrorCode } from '../../services/api'
 import { getErrorMessage } from '../../utils/errorMessages'
 import { Colors } from '../../constants/colors'
 import { Spacing } from '../../constants/spacing'
+import { Ionicons } from '@expo/vector-icons'
 
 type Props = NativeStackScreenProps<AppStackParamList, 'ComplaintDetail'>
 
@@ -168,14 +169,32 @@ export function ComplaintDetailScreen({ route }: Props) {
         {/* Category + Visibility tags */}
         <View style={styles.tagsRow}>
           <View style={styles.tag}>
-            <Text style={styles.tagText}>
-              {CATEGORY_ICON[complaint.category]}{'  '}{CATEGORY_LABEL[complaint.category]}
-            </Text>
+            <View style={styles.tagRow}>
+              <Ionicons
+                name={CATEGORY_ICON[complaint.category] ?? 'document-text-outline'}
+                size={16}
+                color={Colors.primary}
+                style={{ marginRight: 6 }}
+              />
+              <Text style={styles.tagText}>
+                {CATEGORY_LABEL[complaint.category]}
+              </Text>
+            </View>
           </View>
           <View style={styles.tag}>
-            <Text style={styles.tagText}>
-              {complaint.visibility === 'PUBLIC' ? '🌐  Public' : '🔒  Private'}
-            </Text>
+            <View style={styles.tagRow}>
+              <Ionicons
+                name={complaint.visibility === 'PUBLIC'
+                  ? 'globe-outline'
+                  : 'lock-closed-outline'}
+                size={16}
+                color={Colors.primary}
+                style={{ marginRight: 6 }}
+              />
+              <Text style={styles.tagText}>
+                {complaint.visibility === 'PUBLIC' ? 'Public' : 'Private'}
+              </Text>
+            </View>
           </View>
         </View>
 
diff --git a/apps/mobile/src/screens/complaints/ComplaintListScreen.tsx b/apps/mobile/src/screens/complaints/ComplaintListScreen.tsx
index e63f77d..abadab6 100644
--- a/apps/mobile/src/screens/complaints/ComplaintListScreen.tsx
+++ b/apps/mobile/src/screens/complaints/ComplaintListScreen.tsx
@@ -21,6 +21,7 @@ import { listComplaints, ComplaintListItem, ComplaintStatus } from '../../servic
 import { CATEGORY_LABEL, CATEGORY_ICON, STATUS_LABEL, STATUS_COLORS } from '../../utils/complaintMeta'
 import { Colors } from '../../constants/colors'
 import { Spacing } from '../../constants/spacing'
+import { Ionicons } from '@expo/vector-icons'
 
 type Props = NativeStackScreenProps<AppStackParamList, 'ComplaintList'>
 
@@ -146,7 +147,11 @@ export function ComplaintListScreen({ route, navigation }: Props) {
         style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
       >
         <View style={styles.rowIcon}>
-          <Text style={styles.rowIconText}>{CATEGORY_ICON[c.category] ?? '📋'}</Text>
+          <Ionicons
+            name={CATEGORY_ICON[c.category] ?? 'document-text-outline'}
+            size={20}
+            color={Colors.primary}
+          />
         </View>
         <View style={styles.rowContent}>
           <View style={styles.rowTop}>
@@ -365,7 +370,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexShrink: 0,
   },
-  rowIconText: { fontSize: 18 },
   rowContent: { flex: 1, gap: 4 },
   rowTop: { flexDirection: 'row', alignItems: 'center', gap: 8 },
   rowTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: Colors.text },
diff --git a/apps/mobile/src/screens/complaints/RaiseComplaintScreen.tsx b/apps/mobile/src/screens/complaints/RaiseComplaintScreen.tsx
index 6dfe701..b7f964e 100644
--- a/apps/mobile/src/screens/complaints/RaiseComplaintScreen.tsx
+++ b/apps/mobile/src/screens/complaints/RaiseComplaintScreen.tsx
@@ -21,6 +21,7 @@ import { getApiErrorCode, getApiErrorDetails } from '../../services/api'
 import { getErrorMessage } from '../../utils/errorMessages'
 import { Colors } from '../../constants/colors'
 import { Spacing } from '../../constants/spacing'
+import { Ionicons } from '@expo/vector-icons'
 
 type Props = NativeStackScreenProps<AppStackParamList, 'RaiseComplaint'>
 
@@ -186,31 +187,74 @@ export function RaiseComplaintScreen({ route, navigation }: Props) {
 
       {/* Visibility toggle */}
       <View style={styles.field}>
-        <Text style={styles.fieldLabel}>Visibility</Text>
-        <View style={styles.visibilityRow}>
-          <Pressable
-            onPress={() => setVisibility('PRIVATE')}
-            style={[styles.visibilityCard, visibility === 'PRIVATE' && styles.visibilityCardActive]}
-          >
-            <Text style={styles.visibilityIcon}>🔒</Text>
-            <Text style={[styles.visibilityLabel, visibility === 'PRIVATE' && styles.visibilityLabelActive]}>
-              Private
-            </Text>
-            <Text style={styles.visibilityDesc}>Only admins can see this</Text>
-          </Pressable>
-
-          <Pressable
-            onPress={() => setVisibility('PUBLIC')}
-            style={[styles.visibilityCard, visibility === 'PUBLIC' && styles.visibilityCardActive]}
-          >
-            <Text style={styles.visibilityIcon}>🌐</Text>
-            <Text style={[styles.visibilityLabel, visibility === 'PUBLIC' && styles.visibilityLabelActive]}>
-              Public
-            </Text>
-            <Text style={styles.visibilityDesc}>Visible to all residents</Text>
-          </Pressable>
-        </View>
-      </View>
+            <Text style={styles.fieldLabel}>Visibility</Text>
+
+            <View style={styles.visibilityRow}>
+
+              {/* Private */}
+              <Pressable
+                onPress={() => setVisibility('PRIVATE')}
+                style={[
+                  styles.visibilityCard,
+                  visibility === 'PRIVATE' && styles.visibilityCardActive,
+                ]}
+              >
+                <Ionicons
+                  name="lock-closed-outline"
+                  size={22}
+                  color={visibility === 'PRIVATE'
+                    ? Colors.primary
+                    : Colors.subtle}
+                  style={styles.visibilityIcon}
+                />
+
+                <Text
+                  style={[
+                    styles.visibilityLabel,
+                    visibility === 'PRIVATE' && styles.visibilityLabelActive,
+                  ]}
+                >
+                  Private
+                </Text>
+
+                <Text style={styles.visibilityDesc}>
+                  Only admins can see this
+                </Text>
+              </Pressable>
+
+              {/* Public */}
+              <Pressable
+                onPress={() => setVisibility('PUBLIC')}
+                style={[
+                  styles.visibilityCard,
+                  visibility === 'PUBLIC' && styles.visibilityCardActive,
+                ]}
+              >
+                <Ionicons
+                  name="globe-outline"
+                  size={22}
+                  color={visibility === 'PUBLIC'
+                    ? Colors.primary
+                    : Colors.subtle}
+                  style={styles.visibilityIcon}
+                />
+
+                <Text
+                  style={[
+                    styles.visibilityLabel,
+                    visibility === 'PUBLIC' && styles.visibilityLabelActive,
+                  ]}
+                >
+                  Public
+                </Text>
+
+                <Text style={styles.visibilityDesc}>
+                  Visible to all residents
+                </Text>
+              </Pressable>
+
+            </View>
+          </View>
 
       {/* Image picker */}
       <View style={styles.field}>
@@ -338,7 +382,7 @@ const styles = StyleSheet.create({
     borderColor: Colors.primary,
     backgroundColor: '#ede9fe',
   },
-  visibilityIcon: { fontSize: 22 },
+  visibilityIcon: { marginBottom: 6 },
   visibilityLabel: {
     fontSize: 14,
     fontWeight: '600',
diff --git a/apps/mobile/src/screens/society/DashboardScreen.tsx b/apps/mobile/src/screens/society/DashboardScreen.tsx
index 9b5596b..78550af 100644
--- a/apps/mobile/src/screens/society/DashboardScreen.tsx
+++ b/apps/mobile/src/screens/society/DashboardScreen.tsx
@@ -25,6 +25,7 @@ import { getApiErrorCode } from '../../services/api'
 import { getErrorMessage } from '../../utils/errorMessages'
 import { Colors } from '../../constants/colors'
 import { Spacing } from '../../constants/spacing'
+import { Ionicons } from '@expo/vector-icons'
 
 type Props = NativeStackScreenProps<AppStackParamList, 'Dashboard'>
 
@@ -218,7 +219,7 @@ export function DashboardScreen({ route, navigation }: Props) {
             <View style={styles.actionsList}>
               {canViewAnnouncements ? (
                 <ActionRow
-                  icon="📢"
+                  icon="megaphone-outline"
                   label="Announcements"
                   subtitle="Society notices and updates"
                   onPress={() => navigation.navigate('AnnouncementsList', { societyId })}
@@ -226,7 +227,7 @@ export function DashboardScreen({ route, navigation }: Props) {
               ) : null}
               {canViewStructure ? (
                 <ActionRow
-                  icon="🏗"
+                  icon="business-outline"
                   label="Manage Structure"
                   subtitle="Towers, wings, and units"
                   onPress={() => navigation.navigate('Structure', { societyId })}
@@ -234,7 +235,7 @@ export function DashboardScreen({ route, navigation }: Props) {
               ) : null}
               {canInvite ? (
                 <ActionRow
-                  icon="✉️"
+                  icon="mail-outline"
                   label="Invite Member"
                   subtitle="Send invitation via SMS"
                   onPress={() => navigation.navigate('InviteMember', { societyId })}
@@ -242,7 +243,7 @@ export function DashboardScreen({ route, navigation }: Props) {
               ) : null}
               {canViewMembers ? (
                 <ActionRow
-                  icon="👥"
+                  icon="people-outline"
                   label="View Members"
                   subtitle="Active residents and staff"
                   onPress={() => navigation.navigate('MemberList', { societyId })}
@@ -250,7 +251,7 @@ export function DashboardScreen({ route, navigation }: Props) {
               ) : null}
               {canViewComplaints ? (
                 <ActionRow
-                  icon="📋"
+                  icon="warning-outline"
                   label="Complaints"
                   subtitle="View and raise complaints"
                   onPress={() => navigation.navigate('ComplaintList', { societyId })}
@@ -258,7 +259,7 @@ export function DashboardScreen({ route, navigation }: Props) {
               ) : null}
               {canViewUnitInventory ? (
                 <ActionRow
-                  icon="🏢"
+                  icon="clipboard-outline"
                   label="Unit Inventory"
                   subtitle="All flats, owners, and occupants"
                   onPress={() => navigation.navigate('UnitInventory', { societyId })}
@@ -266,7 +267,7 @@ export function DashboardScreen({ route, navigation }: Props) {
               ) : null}
               {canViewMyHome && currentMemberId ? (
                 <ActionRow
-                  icon="🏠"
+                  icon="home-outline"
                   label="My Home"
                   subtitle="Your flat details and co-occupants"
                   onPress={() => navigation.navigate('MyHome', { societyId, memberId: currentMemberId })}
@@ -274,7 +275,7 @@ export function DashboardScreen({ route, navigation }: Props) {
               ) : null}
               {canSwitchSociety ? (
                 <ActionRow
-                  icon="🔀"
+                  icon="swap-horizontal-outline"
                   label="Switch Society"
                   subtitle="You belong to multiple societies"
                   onPress={() => navigation.navigate('SwitchSociety')}
@@ -351,25 +352,31 @@ export function DashboardScreen({ route, navigation }: Props) {
 // ─── Action Row ──────────────────────────────────────────────────────────────
 
 interface ActionRowProps {
-  icon: string
-  label: string
-  subtitle: string
-  onPress: () => void
+  icon: keyof typeof Ionicons.glyphMap
 }
 
 function ActionRow({ icon, label, subtitle, onPress }: ActionRowProps) {
   return (
     <Pressable
       onPress={onPress}
-      style={({ pressed }) => [styles.actionRow, pressed && styles.actionRowPressed]}
+      style={({ pressed }) => [
+        styles.actionRow,
+        pressed && styles.actionRowPressed,
+      ]}
     >
       <View style={styles.actionIcon}>
-        <Text style={styles.actionIconText}>{icon}</Text>
+        <Ionicons
+          name={icon}
+          size={20}
+          color={Colors.primary}
+        />
       </View>
+
       <View style={styles.actionText}>
         <Text style={styles.actionLabel}>{label}</Text>
         <Text style={styles.actionSubtitle}>{subtitle}</Text>
       </View>
+
       <Text style={styles.actionChevron}>›</Text>
     </Pressable>
   )
diff --git a/apps/mobile/src/utils/complaintMeta.ts b/apps/mobile/src/utils/complaintMeta.ts
index 7f13ce9..d415c3f 100644
--- a/apps/mobile/src/utils/complaintMeta.ts
+++ b/apps/mobile/src/utils/complaintMeta.ts
@@ -1,4 +1,5 @@
 import { ComplaintCategory, ComplaintStatus } from '../services/complaints'
+import { Ionicons } from '@expo/vector-icons'
 
 export const CATEGORY_LABEL: Record<ComplaintCategory, string> = {
   WATER_SUPPLY: 'Water Supply',
@@ -22,26 +23,29 @@ export const CATEGORY_LABEL: Record<ComplaintCategory, string> = {
   OTHER: 'Other',
 }
 
-export const CATEGORY_ICON: Record<ComplaintCategory, string> = {
-  WATER_SUPPLY: '💧',
-  ELECTRICITY: '⚡',
-  LIFT_ELEVATOR: '🔼',
-  GENERATOR: '🔋',
-  INTERNET_CABLE: '📡',
-  PARKING: '🅿️',
-  GARBAGE_WASTE: '🗑️',
-  GARDEN_LANDSCAPING: '🌿',
-  GYM_CLUBHOUSE: '🏋️',
-  SWIMMING_POOL: '🏊',
-  SECURITY: '🔒',
-  NOISE: '📢',
-  PET_RELATED: '🐾',
-  DOMESTIC_HELP: '🧹',
-  NEIGHBOUR_BEHAVIOUR: '👥',
-  STAFF_BEHAVIOUR: '👷',
-  MAINTENANCE_REPAIR: '🔧',
-  RULE_VIOLATION: '⚠️',
-  OTHER: '📋',
+export const CATEGORY_ICON: Record<
+  ComplaintCategory,
+  keyof typeof Ionicons.glyphMap
+> = {
+  WATER_SUPPLY: 'water-outline',
+  ELECTRICITY: 'flash-outline',
+  LIFT_ELEVATOR: 'arrow-up-circle-outline',
+  GENERATOR: 'battery-charging-outline',
+  INTERNET_CABLE: 'wifi-outline',
+  PARKING: 'car-outline',
+  GARBAGE_WASTE: 'trash-outline',
+  GARDEN_LANDSCAPING: 'leaf-outline',
+  GYM_CLUBHOUSE: 'barbell-outline',
+  SWIMMING_POOL: 'water-outline',
+  SECURITY: 'shield-checkmark-outline',
+  NOISE: 'volume-high-outline',
+  PET_RELATED: 'paw-outline',
+  DOMESTIC_HELP: 'home-outline',
+  NEIGHBOUR_BEHAVIOUR: 'people-outline',
+  STAFF_BEHAVIOUR: 'person-outline',
+  MAINTENANCE_REPAIR: 'construct-outline',
+  RULE_VIOLATION: 'warning-outline',
+  OTHER: 'document-text-outline',
 }
 
 export const STATUS_LABEL: Record<ComplaintStatus, string> = {