GenerateNU · BeWelsh · Apr 29, 2026 · Apr 29, 2026
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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
@@ -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
@@ -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 @@
       <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
@@ -7,6 +7,7 @@
 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 {
@@ -35,7 +36,7 @@
      setIsCustom(true);
      setScannedFood(null);
    }
  }, []);

  const [servings, setServings] = useState("1");
  const [timestamp, setTimestamp] = useState(new Date());
@@ -96,28 +97,35 @@
 
   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">
           Log Food
         </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 @@
             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
@@ -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
@@ -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
@@ -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,15 +66,15 @@ 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>
 
                 <TouchableOpacity
                   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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 }