diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4a666ae..30f8b78 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,6 +23,7 @@
         "expo-font": "~14.0.11",
         "expo-linear-gradient": "~15.0.8",
         "expo-status-bar": "~3.0.9",
+        "lucide-react-native": "^1.12.0",
         "nativewind": "^4.2.1",
         "react": "19.1.0",
         "react-dom": "19.1.0",
@@ -11106,6 +11107,17 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react-native": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/lucide-react-native/-/lucide-react-native-1.12.0.tgz",
+      "integrity": "sha512-qw9fMGWTFiGNHVoYOv2N5FzXJaP1/UwVbJAbATNGzJQPGWXVQXITjZUpTjZ/QWLWPz4tBYobn+dhDWGRePLqvg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-native": "*",
+        "react-native-svg": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
     "node_modules/make-dir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 43a8f61..c9e5431 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,6 +32,7 @@
     "expo-font": "~14.0.11",
     "expo-linear-gradient": "~15.0.8",
     "expo-status-bar": "~3.0.9",
+    "lucide-react-native": "^1.12.0",
     "nativewind": "^4.2.1",
     "react": "19.1.0",
     "react-dom": "19.1.0",
diff --git a/frontend/src/components/AddFoodModal.tsx b/frontend/src/components/AddFoodModal.tsx
index 543c8be..bf7f9f0 100644
--- a/frontend/src/components/AddFoodModal.tsx
+++ b/frontend/src/components/AddFoodModal.tsx
@@ -59,7 +59,7 @@ export function AddFoodModal({ visible, onClose }: Props) {
         placeholder="e.g. Milk, Wheat, Soy..."
         chipClassName='bg-remetra-burgundy'
         chipTextClassName='text-white'
-        removeTextClassName='text-white'
+        removeIconColor='#ffffff'
         onAdd={(ing) => setIngredients((prev) => [...prev, ing])}
         onRemove={(i) => setIngredients((prev) => prev.filter((_, idx) => idx !== i))}
       />
diff --git a/frontend/src/components/BarcodeScannerScreen.tsx b/frontend/src/components/BarcodeScannerScreen.tsx
index f2e9abf..df4c653 100644
--- a/frontend/src/components/BarcodeScannerScreen.tsx
+++ b/frontend/src/components/BarcodeScannerScreen.tsx
@@ -1,6 +1,7 @@
 import { View, Text, TouchableOpacity, TextInput, StyleSheet } from "react-native";
 import { useNavigation, useRoute } from "@react-navigation/native";
 import { CameraView, useCameraPermissions } from "expo-camera";
+import { ArrowLeft } from "lucide-react-native";
 import { useState, useRef } from "react";
 import { useBankStore } from "../store/bankStore";
 
@@ -91,7 +92,10 @@ export const BarcodeScannerScreen = () => {
       <View style={styles.overlay}>
         <Text style={styles.instructions}>Point at a barcode</Text>
         <TouchableOpacity style={styles.cancelBtn} onPress={() => navigation.goBack()}>
-          <Text style={styles.cancelText}>← Cancel</Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            <ArrowLeft size={18} color="#eea487" strokeWidth={2} />
+            <Text style={styles.cancelText}>Cancel</Text>
+          </View>
         </TouchableOpacity>
         {scanned && (
           <TouchableOpacity style={styles.btn} onPress={() => setScanned(false)}>
diff --git a/frontend/src/components/FoodLogForm.tsx b/frontend/src/components/FoodLogForm.tsx
index 860386a..7d0359e 100644
--- a/frontend/src/components/FoodLogForm.tsx
+++ b/frontend/src/components/FoodLogForm.tsx
@@ -7,6 +7,7 @@ import { useNavigation } from '@react-navigation/native';
 import { useUIStore } from "../store/uiStore";
 import { useState, useEffect } from "react";
 import { View, Text, TouchableOpacity, TextInput } from "react-native";
+import { ArrowLeft, Camera } from "lucide-react-native";
 import { LogDateTimePicker } from "./LogDateTimePicker";
 
 interface FoodLogFormProps {
@@ -96,14 +97,19 @@ export const FoodLogForm: React.FC<FoodLogFormProps> = ({ onSubmit, onBack, onCl
 
   return (
     <View className="pb-10">
-      <TouchableOpacity onPress={() => {
-        if (!selectedFood && !isCustom) {
-          onBack()
-        } else {
-          setIsCustom(false); setSearchQuery(""); setSelectedFood(null)
-        }
-        }}>
-        <Text className="text-base font-ptserif text-remetra-burgundy mb-4">← Back</Text>
+      <TouchableOpacity
+        onPress={() => {
+          if (!selectedFood && !isCustom) {
+            onBack()
+          } else {
+            setIsCustom(false); setSearchQuery(""); setSelectedFood(null)
+          }
+        }}
+        className="flex-row items-center gap-1.5 mb-4"
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+      >
+        <ArrowLeft size={18} color="#B8624F" strokeWidth={2} />
+        <Text className="text-base font-ptserif text-remetra-burgundy">Back</Text>
       </TouchableOpacity>
       <View className="flex-row justify-between items-center mb-3">
         <Text className="text-2xl font-bold font-ptserif text-remetra-espresso">
@@ -111,13 +117,15 @@ export const FoodLogForm: React.FC<FoodLogFormProps> = ({ onSubmit, onBack, onCl
         </Text>
         {!selectedFood && !isCustom && (
           <TouchableOpacity
-            className="border border-remetra-burgundy/80 bg-remetra-burgundy/80 rounded-full py-1 px-2"
+            className="border border-remetra-burgundy/80 bg-remetra-burgundy/80 rounded-full p-2"
             onPress={() => {
               onCloseModal();
               setTimeout(() => navigation.navigate('BarcodeScanner'), 300);
             }}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            accessibilityLabel="Scan Barcode"
           >
-            <Text className="text-s font-ptserif text-white">Scan Barcode</Text>
+            <Camera size={18} color="#ffffff" strokeWidth={2} />
           </TouchableOpacity>
         )}
       </View>
@@ -187,7 +195,7 @@ export const FoodLogForm: React.FC<FoodLogFormProps> = ({ onSubmit, onBack, onCl
             placeholder="Add Ingredients..."
             chipClassName='bg-remetra-burgundy/80'
             chipTextClassName='text-white'
-            removeTextClassName='text-white'
+            removeIconColor='#ffffff'
             onAdd={(ing) => setCustomIngredients((prev) => [...prev, ing])}
             onRemove={(i) => setCustomIngredients((prev) => prev.filter((_, idx) => idx !== i))}
           />
diff --git a/frontend/src/components/GenericChipComponent.tsx b/frontend/src/components/GenericChipComponent.tsx
index 2fc6a9d..f45fb51 100644
--- a/frontend/src/components/GenericChipComponent.tsx
+++ b/frontend/src/components/GenericChipComponent.tsx
@@ -5,6 +5,7 @@ import {
   TextInput,
   TouchableOpacity,
 } from "react-native";
+import { X } from "lucide-react-native";
 
 interface ChipsProps {
   items: string[];
@@ -14,7 +15,7 @@ interface ChipsProps {
   onRemove: (index: number) => void;
   chipClassName?: string;
   chipTextClassName?: string;
-  removeTextClassName?: string;
+  removeIconColor?: string;
 }
 
 export const Chips: React.FC<ChipsProps> = ({
@@ -25,7 +26,7 @@ export const Chips: React.FC<ChipsProps> = ({
   onRemove,
   chipClassName = "bg-neutral-200",
   chipTextClassName = "text-neutral-700",
-  removeTextClassName = "text-neutral-500"
+  removeIconColor = "#737373"
 }) => {
   const [input, setInput] = useState("");
 
@@ -45,8 +46,8 @@ export const Chips: React.FC<ChipsProps> = ({
             className={`flex-row items-center rounded-full py-1.5 px-3 gap-1.5 ${chipClassName}`}
           >
             <Text className={`text-sm ${chipTextClassName}`}>{item}</Text>
-            <TouchableOpacity onPress={() => onRemove(i)}>
-              <Text className={`text-sm font-semibold ${removeTextClassName}`}>✕</Text>
+            <TouchableOpacity onPress={() => onRemove(i)} hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}>
+              <X size={14} color={removeIconColor} strokeWidth={2.5} />
             </TouchableOpacity>
           </View>
         ))}
diff --git a/frontend/src/components/ItemBank.tsx b/frontend/src/components/ItemBank.tsx
index 41d632f..7a57de9 100644
--- a/frontend/src/components/ItemBank.tsx
+++ b/frontend/src/components/ItemBank.tsx
@@ -1,4 +1,5 @@
 import { View, Text, TouchableOpacity } from 'react-native';
+import { X } from 'lucide-react-native';
 
 interface ItemBankProps {
   title: string;
@@ -36,8 +37,9 @@ export function ItemBank({
               <TouchableOpacity
                 onPress={() => onRemove(item.id)}
                 hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                className="mr-2"
               >
-                <Text className="text-remetra-rose text-sm mr-2 font-bold">✕</Text>
+                <X size={14} color="#C85A4A" strokeWidth={2.5} />
               </TouchableOpacity>
               <Text className="text-remetra-espresso font-ptserif text-sm">
                 {item.name}
diff --git a/frontend/src/components/LogEntryModal.tsx b/frontend/src/components/LogEntryModal.tsx
index aa5d32c..834eb88 100644
--- a/frontend/src/components/LogEntryModal.tsx
+++ b/frontend/src/components/LogEntryModal.tsx
@@ -1,5 +1,6 @@
 import { Modal, ScrollView, View, TouchableOpacity, Text } from "react-native";
 import { useState, useEffect } from "react";
+import { X, Utensils, Stethoscope } from "lucide-react-native";
 
 import { LogEntry, ModalStep } from "../types/logs";
 import { FoodLogForm } from "./FoodLogForm";
@@ -49,8 +50,8 @@ const LogEntryModal: React.FC<LogEntryModalProps> = ({ visible, onClose, onLogEn
           onStartShouldSetResponder={() => true}
         >
           <View className="flex-row justify-end px-4 pt-3">
-            <TouchableOpacity onPress={handleClose}>
-              <Text className="text-xl p-1 font-ptserif text-remetra-accent">✕</Text>
+            <TouchableOpacity onPress={handleClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+              <X size={22} color="#eea487" strokeWidth={2.25} />
             </TouchableOpacity>
           </View>
 
@@ -65,7 +66,7 @@ const LogEntryModal: React.FC<LogEntryModalProps> = ({ visible, onClose, onLogEn
                   className="w-full flex-row items-center gap-4 border border-remetra-burgundy rounded-2xl p-5 bg-remetra-orange/10"
                   onPress={() => setStep("food")}
                 >
-                  <Text className="text-3xl">🍽</Text>
+                  <Utensils size={20} color="#5C2E14" strokeWidth={1.75} />
                   <Text className="text-lg font-semibold font-ptserif text-remetra-espresso">Food</Text>
                 </TouchableOpacity>
 
@@ -73,7 +74,7 @@ const LogEntryModal: React.FC<LogEntryModalProps> = ({ visible, onClose, onLogEn
                   className="w-full flex-row items-center gap-4 border border-remetra-burgundy rounded-2xl p-5 bg-remetra-orange/10"
                   onPress={() => setStep("symptom")}
                 >
-                  <Text className="text-3xl">🩺</Text>
+                  <Stethoscope size={20} color="#5C2E14" strokeWidth={1.75} />
                   <Text className="text-lg font-semibold font-ptserif text-remetra-espresso">Symptom</Text>
                 </TouchableOpacity>
               </View>
diff --git a/frontend/src/components/SymptomCard.tsx b/frontend/src/components/SymptomCard.tsx
index c4aa06e..fb3141b 100644
--- a/frontend/src/components/SymptomCard.tsx
+++ b/frontend/src/components/SymptomCard.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
+import { Check } from 'lucide-react-native';
 import { symptomLogService } from '../api/symptom_log_service';
 import { LogDateTimePicker } from './LogDateTimePicker';
 import { SymptomTimelineEntry } from '../types/timeline';
@@ -142,7 +143,7 @@ export function SymptomCard({
                 hasDuration ? 'bg-remetra-burgundy border-remetra-burgundy' : 'bg-white border-remetra-border'
               }`}
             >
-              {hasDuration ? <Text className="text-white text-xs">✓</Text> : null}
+              {hasDuration ? <Check size={12} color="#ffffff" strokeWidth={3} /> : null}
             </TouchableOpacity>
             <Text style={{ fontSize: 13, color: '#7B3B4E' }}>Duration (minutes)</Text>
           </View>
diff --git a/frontend/src/components/SymptomLogForm.tsx b/frontend/src/components/SymptomLogForm.tsx
index 78a2f8b..23fc352 100644
--- a/frontend/src/components/SymptomLogForm.tsx
+++ b/frontend/src/components/SymptomLogForm.tsx
@@ -4,6 +4,7 @@ import { symptomLogService } from "../api/symptom_log_service";
 import { useAuthStore } from "../store/useAuthStore";
 import { useState } from "react";
 import { View, Text, TouchableOpacity, TextInput } from "react-native";
+import { ArrowLeft } from "lucide-react-native";
 import { Dropdown } from "react-native-element-dropdown";
 import { LogDateTimePicker } from "./LogDateTimePicker";
 import { sensationOptions, locationOptions } from "../types/symptomOptions";
@@ -100,17 +101,20 @@ export const SymptomLogForm: React.FC<SymptomLogFormProps> = ({ onSubmit, onBack
 
   return (
     <View className="pb-10">
-      <TouchableOpacity onPress={() => {
-        if (!selectedSymptom && !isCustom) {
-          onBack()
-        } else {
-          setIsCustom(false); setSearchQuery(""); setSelectedSymptom(null);
-          setCustomSensation(""); setCustomLocation("");
-        }
-          onBack
-        }
-      }>
-        <Text className="text-base font-ptserif text-remetra-espresso mb-4">← Back</Text>
+      <TouchableOpacity
+        onPress={() => {
+          if (!selectedSymptom && !isCustom) {
+            onBack()
+          } else {
+            setIsCustom(false); setSearchQuery(""); setSelectedSymptom(null);
+            setCustomSensation(""); setCustomLocation("");
+          }
+        }}
+        className="flex-row items-center gap-1.5 mb-4"
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+      >
+        <ArrowLeft size={18} color="#5C2E14" strokeWidth={2} />
+        <Text className="text-base font-ptserif text-remetra-espresso">Back</Text>
       </TouchableOpacity>
 
       <Text className="text-2xl font-bold font-ptserif mb-3 text-remetra-espresso">
diff --git a/frontend/src/navigation/MainTabs.tsx b/frontend/src/navigation/MainTabs.tsx
index 69c8748..f5812d9 100644
--- a/frontend/src/navigation/MainTabs.tsx
+++ b/frontend/src/navigation/MainTabs.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { TimelineScreen } from '../screens/main/TimelineScreen';
 import { AnalysisScreen } from '../screens/main/AnalysisScreen';
 import { ProfileScreen } from '../screens/main/ProfileScreen';
 import LogEntryModal from '../components/LogEntryModal';
 import { useUIStore } from '../store/uiStore';
+import { ClipboardList, ChartColumn, User, type LucideIcon } from 'lucide-react-native';
 
 export type MainTabParamList = {
   History: undefined;
@@ -15,10 +16,13 @@ export type MainTabParamList = {
 
 const Tab = createBottomTabNavigator<MainTabParamList>();
 
-function TabIcon({ emoji, focused }: { emoji: string; focused: boolean }) {
+const TAB_ACTIVE_COLOR = '#B8624F';
+const TAB_INACTIVE_COLOR = '#b2939b';
+
+function TabIcon({ Icon, focused }: { Icon: LucideIcon; focused: boolean }) {
   return (
     <View style={{ alignItems: 'center', gap: 2 }}>
-      <Text style={{ fontSize: 20 }}>{emoji}</Text>
+      <Icon size={24} color={focused ? TAB_ACTIVE_COLOR : TAB_INACTIVE_COLOR} strokeWidth={focused ? 2.25 : 2} />
     </View>
   );
 }
@@ -54,7 +58,7 @@ export function MainTabs() {
           component={TimelineScreen}
           options={{
             tabBarIcon: ({ focused }) => (
-              <TabIcon emoji="📋" focused={focused} />
+              <TabIcon Icon={ClipboardList} focused={focused} />
             ),
           }}
         />
@@ -63,7 +67,7 @@ export function MainTabs() {
           component={AnalysisScreen}
           options={{
             tabBarIcon: ({ focused }) => (
-              <TabIcon emoji="📊"focused={focused} />
+              <TabIcon Icon={ChartColumn} focused={focused} />
             ),
           }}
         />
@@ -72,7 +76,7 @@ export function MainTabs() {
           component={ProfileScreen}
           options={{
             tabBarIcon: ({ focused }) => (
-              <TabIcon emoji="👤" focused={focused} />
+              <TabIcon Icon={User} focused={focused} />
             ),
           }}
         />
diff --git a/frontend/src/screens/main/AboutScreen.tsx b/frontend/src/screens/main/AboutScreen.tsx
index 9a61107..0528286 100644
--- a/frontend/src/screens/main/AboutScreen.tsx
+++ b/frontend/src/screens/main/AboutScreen.tsx
@@ -1,5 +1,13 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, ScrollView, Linking } from 'react-native';
+import {
+  HeartPlus,
+  NotebookPen,
+  Search,
+  ChartColumn,
+  ChevronRight,
+  type LucideIcon,
+} from 'lucide-react-native';
 import { BackgroundGradient } from '../../components/BackgroundGradient';
 
 const CONTACT_EMAIL = 'hello@remetra.app';
@@ -12,7 +20,7 @@ export function AboutScreen() {
         {/* Hero */}
         <View className="items-center mb-8 mt-2">
           <View className="w-24 h-24 rounded-full bg-remetra-peach justify-center items-center mb-3">
-            <Text className="text-5xl">⚕️</Text>
+            <HeartPlus size={44} color="#5C2E14" strokeWidth={1.75} />
           </View>
           <Text className="text-2xl font-semibold text-remetra-mauve italic tracking-[2px]">
             REMETRA
@@ -35,9 +43,9 @@ export function AboutScreen() {
         {/* How it works */}
         <SectionDivider label="How It Works" />
         <View className="gap-3">
-          <InfoRow emoji="📝" label="Lorem ipsum dolor sit amet" />
-          <InfoRow emoji="🔍" label="Consectetur adipiscing elit" />
-          <InfoRow emoji="📊" label="Sed do eiusmod tempor incididunt" />
+          <InfoRow Icon={NotebookPen} label="Lorem ipsum dolor sit amet" />
+          <InfoRow Icon={Search} label="Consectetur adipiscing elit" />
+          <InfoRow Icon={ChartColumn} label="Sed do eiusmod tempor incididunt" />
         </View>
 
         {/* Links */}
@@ -87,10 +95,10 @@ function SectionDivider({ label }: { label: string }) {
   );
 }
 
-function InfoRow({ emoji, label }: { emoji: string; label: string }) {
+function InfoRow({ Icon, label }: { Icon: LucideIcon; label: string }) {
   return (
     <View className="bg-white/70 rounded-xl p-4 flex-row items-center gap-3">
-      <Text className="text-xl">{emoji}</Text>
+      <Icon size={20} color="#5C2E14" strokeWidth={2} />
       <Text className="text-[15px] text-neutral-700 flex-1">{label}</Text>
     </View>
   );
@@ -103,7 +111,7 @@ function LinkRow({ label, onPress }: { label: string; onPress: () => void }) {
       className="bg-white/70 rounded-xl p-4 flex-row items-center gap-3"
     >
       <Text className="text-[15px] text-neutral-700 flex-1">{label}</Text>
-      <Text className="text-lg text-remetra-border">›</Text>
+      <ChevronRight size={20} color="#ccc" strokeWidth={2} />
     </TouchableOpacity>
   );
 }
diff --git a/frontend/src/screens/main/CorrelationsScreen.tsx b/frontend/src/screens/main/CorrelationsScreen.tsx
index ca59993..eb47471 100644
--- a/frontend/src/screens/main/CorrelationsScreen.tsx
+++ b/frontend/src/screens/main/CorrelationsScreen.tsx
@@ -1,4 +1,5 @@
 import { View, Text, ScrollView, TouchableOpacity, ActivityIndicator, TextInput } from 'react-native';
+import { ArrowLeft } from 'lucide-react-native';
 import { useEffect, useMemo } from 'react';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { BackgroundGradient } from '../../components/BackgroundGradient';
@@ -43,8 +44,13 @@ export function CorrelationsScreen({ navigation, route }: Props) {
       <View style={{ flex: 1 }}>
         {/* Header */}
         <View style={{ paddingTop: 56, paddingHorizontal: 24, paddingBottom: 8 }}>
-          <TouchableOpacity onPress={() => navigation.goBack()} style={{ marginBottom: 8 }}>
-            <Text style={{ color: '#ca5e5e', fontSize: 14 }}>← Back</Text>
+          <TouchableOpacity
+            onPress={() => navigation.goBack()}
+            style={{ marginBottom: 8, flexDirection: 'row', alignItems: 'center', gap: 6 }}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          >
+            <ArrowLeft size={16} color="#ca5e5e" strokeWidth={2} />
+            <Text style={{ color: '#ca5e5e', fontSize: 14 }}>Back</Text>
           </TouchableOpacity>
           <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
             <Text style={{ fontSize: 24, fontWeight: '600', color: '#b2939b', fontStyle: 'italic', textTransform: 'capitalize' }}>
diff --git a/frontend/src/screens/main/EditConditionsScreen.tsx b/frontend/src/screens/main/EditConditionsScreen.tsx
index 48672a7..3164ad4 100644
--- a/frontend/src/screens/main/EditConditionsScreen.tsx
+++ b/frontend/src/screens/main/EditConditionsScreen.tsx
@@ -46,7 +46,7 @@ export function EditConditionsScreen() {
               placeholder="Add condition..."
               chipClassName='bg-remetra-burgundy opacity-90'
               chipTextClassName='font-semibold text-remetra-surface-accent'
-              removeTextClassName='font-semibold text-remetra-surface-accent'
+              removeIconColor='#fff5f0'
               onAdd={(item) => setDisease((prev) => [...prev, item])}
               onRemove={(i) =>
                 setDisease((prev) => prev.filter((_, idx) => idx !== i))
diff --git a/frontend/src/screens/main/EditMedicationsScreen.tsx b/frontend/src/screens/main/EditMedicationsScreen.tsx
index 6a1a432..c41ef6c 100644
--- a/frontend/src/screens/main/EditMedicationsScreen.tsx
+++ b/frontend/src/screens/main/EditMedicationsScreen.tsx
@@ -46,7 +46,7 @@ export function EditMedicationsScreen() {
               placeholder="Add condition..."
               chipClassName='bg-remetra-burgundy opacity-90'
               chipTextClassName='font-semibold text-remetra-surface-accent'
-              removeTextClassName='font-semibold text-remetra-surface-accent'
+              removeIconColor='#fff5f0'
               onAdd={(item) => setMedication((prev) => [...prev, item])}
               onRemove={(i) =>
                 setMedication((prev) => prev.filter((_, idx) => idx !== i))
diff --git a/frontend/src/screens/main/ProfileScreen.tsx b/frontend/src/screens/main/ProfileScreen.tsx
index efd72c7..46dec2a 100644
--- a/frontend/src/screens/main/ProfileScreen.tsx
+++ b/frontend/src/screens/main/ProfileScreen.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { Info, ChevronRight, type LucideIcon } from 'lucide-react-native';
 import { BackgroundGradient } from '../../components/BackgroundGradient';
 import { useAuthStore } from '../../store/useAuthStore';
 import type { MainStackParamList } from '../../navigation/stacks/MainStack';
@@ -68,7 +69,7 @@ export function ProfileScreen() {
           <SectionDivider label="App" />
 
           <ActionRow
-            emoji="ⓘ"
+            Icon={Info}
             label="About Remetra"
             onPress={() => navigation.navigate('About')}
           />
@@ -97,11 +98,11 @@ function SectionDivider({ label }: { label: string }) {
 }
 
 function ActionRow({
-  emoji,
+  Icon,
   label,
   onPress,
 }: {
-  emoji: string;
+  Icon: LucideIcon;
   label: string;
   onPress: () => void;
 }) {
@@ -110,9 +111,9 @@ function ActionRow({
       onPress={onPress}
       className="bg-white/70 rounded-xl p-4 flex-row items-center gap-3"
     >
-      <Text className="text-xl font-semibold text-remetra-espresso">{emoji}</Text>
+      <Icon size={20} color="#5C2E14" strokeWidth={2} />
       <Text className="text-[15px] text-remetra-espresso flex-1">{label}</Text>
-      <Text className="text-lg text-remetra-espresso">›</Text>
+      <ChevronRight size={16} color="#5C2E14" strokeWidth={2} />
     </TouchableOpacity>
   );
 }
@@ -147,7 +148,7 @@ function EditableRow({
       </Text>
       <View className="flex-row items-center gap-2">
         <Text className="text-[15px] text-remetra-espresso">{value}</Text>
-        <Text className="text-lg text-remetra-espresso">›</Text>
+        <ChevronRight size={16} color="#5C2E14" strokeWidth={2} />
       </View>
     </TouchableOpacity>
   );
@@ -168,7 +169,7 @@ function EditableChipRow({
         <Text className="text-xs font-semibold text-remetra-espresso tracking-[1px]">
           {label.toUpperCase()}
         </Text>
-        <Text className="text-lg text-remetra-espresso">›</Text>
+        <ChevronRight size={16} color="#5C2E14" strokeWidth={2} />
       </View>
       {items.length === 0 ? (
         <Text className="text-[15px] text-neutral-400">—</Text>
diff --git a/frontend/src/screens/main/TimelineScreen.tsx b/frontend/src/screens/main/TimelineScreen.tsx
index 6a3279b..c46f223 100644
--- a/frontend/src/screens/main/TimelineScreen.tsx
+++ b/frontend/src/screens/main/TimelineScreen.tsx
@@ -7,6 +7,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
+import { ClipboardList } from 'lucide-react-native';
 import { BackgroundGradient } from '../../components/BackgroundGradient';
 import { FoodCard } from '../../components/FoodCard';
 import { SymptomCard } from '../../components/SymptomCard';
@@ -178,7 +179,7 @@ export function TimelineScreen() {
             <View className="w-3 h-3 rounded-full bg-remetra-mauve" />
             <Text className="text-xs text-remetra-muted">Symptom</Text>
           </View>
-          <Text className="text-xs text-neutral-300 ml-1">Tap a card to edit</Text>
+          <Text className="text-xs text-remetra-mauve ml-1">Tap a card to edit</Text>
         </View>
 
         {/* Content */}
@@ -198,9 +199,9 @@ export function TimelineScreen() {
           </View>
         ) : entries.length === 0 ? (
           <View className="flex-1 justify-center items-center p-6">
-            <Text className="text-5xl mb-3">📋</Text>
+            <ClipboardList size={56} color="#b2939b" strokeWidth={1.5} style={{ marginBottom: 12 }} />
             <Text className="text-lg text-remetra-mauve font-semibold text-center">No logs yet</Text>
-            <Text className="text-sm text-remetra-muted text-center mt-2">
+            <Text className="text-sm text-remetra-mauve text-center mt-2">
               Tap + Add Log to record your first food or symptom entry.
             </Text>
           </View>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 259320f..e3b349e 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -18,7 +18,7 @@ module.exports = {
         'remetra-terracotta':     '#ca5e5e',  // chart bar fill
         'remetra-mauve':          '#b2939b',  // screen headers, low intensity, spinners
         'remetra-espresso':       '#5C2E14',  // Dark text on gradient
-        'remetra-warm-brown':     '#7A4F35',  // Warmer brown for secondary text
+        'remetra-warm-brown':     '#7A4F35',  // Warmer brown for secondary
         // Structural / semantic
         'remetra-surface':        '#fafafa',  // input & list-item backgrounds
         'remetra-border':         '#ccc',     // generic input / card borders