diff --git a/frontend-admin/src/screens/admin/CategoriesScreen.tsx b/frontend-admin/src/screens/admin/CategoriesScreen.tsx
index 6d0c825c..872746ae 100644
--- a/frontend-admin/src/screens/admin/CategoriesScreen.tsx
+++ b/frontend-admin/src/screens/admin/CategoriesScreen.tsx
@@ -110,7 +110,7 @@ export default function CategoriesScreen() {
     };
 
     const styles = StyleSheet.create({
-        container: { flex: 1, backgroundColor: colors.background },
+        container: { flex: 1, backgroundColor: colors.bgPrimary },
         header: {
             flexDirection: "row",
             alignItems: "center",
@@ -119,7 +119,7 @@ export default function CategoriesScreen() {
             borderBottomWidth: 1,
             borderBottomColor: colors.border,
         },
-        title: { fontSize: fontSize.xl, fontWeight: "700", color: colors.text },
+        title: { fontSize: fontSize.xl, fontWeight: "700", color: colors.textPrimary },
         addBtn: {
             flexDirection: "row",
             alignItems: "center",
@@ -127,60 +127,69 @@ export default function CategoriesScreen() {
             backgroundColor: colors.accent,
             paddingHorizontal: spacing.m,
             paddingVertical: spacing.s,
-            borderRadius: borderRadius.m,
+            borderRadius: borderRadius.md,
         },
-        addBtnText: { color: "#fff", fontWeight: "600", fontSize: fontSize.s },
+        addBtnText: { color: colors.textWhite, fontWeight: "600", fontSize: fontSize.sm },
         list: { padding: spacing.m, gap: spacing.s },
         row: {
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between",
         },
-        catName: { fontSize: fontSize.m, color: colors.text, fontWeight: "600", textTransform: "capitalize" },
+        catName: {
+            fontSize: fontSize.md,
+            color: colors.textPrimary,
+            fontWeight: "600",
+            textTransform: "capitalize",
+        },
         catDate: { fontSize: fontSize.xs, color: colors.textSecondary, marginTop: 2 },
         actions: { flexDirection: "row", gap: spacing.s },
         actionBtn: { padding: 8 },
         overlay: {
             flex: 1,
-            backgroundColor: "rgba(0,0,0,0.5)",
+            backgroundColor: colors.overlay,
             justifyContent: "center",
-            padding: spacing.l,
+            padding: spacing.xl,
         },
         modal: {
-            backgroundColor: colors.surface,
-            borderRadius: borderRadius.l,
+            backgroundColor: colors.bgCard,
+            borderRadius: borderRadius.lg,
             padding: spacing.l,
             gap: spacing.m,
         },
-        modalTitle: { fontSize: fontSize.l, fontWeight: "700", color: colors.text },
+        modalTitle: { fontSize: fontSize.lg, fontWeight: "700", color: colors.textPrimary },
         input: {
             borderWidth: 1,
             borderColor: colors.border,
-            borderRadius: borderRadius.m,
+            borderRadius: borderRadius.md,
             padding: spacing.m,
-            color: colors.text,
-            fontSize: fontSize.m,
-            backgroundColor: colors.background,
+            color: colors.textPrimary,
+            fontSize: fontSize.md,
+            backgroundColor: colors.bgInput,
         },
         modalBtns: { flexDirection: "row", gap: spacing.s },
         cancelBtn: {
             flex: 1,
             padding: spacing.m,
-            borderRadius: borderRadius.m,
+            borderRadius: borderRadius.md,
             borderWidth: 1,
             borderColor: colors.border,
             alignItems: "center",
         },
-        cancelBtnText: { color: colors.text, fontWeight: "600" },
+        cancelBtnText: { color: colors.textPrimary, fontWeight: "600" },
         saveBtn: {
             flex: 1,
             padding: spacing.m,
-            borderRadius: borderRadius.m,
+            borderRadius: borderRadius.md,
             backgroundColor: colors.accent,
             alignItems: "center",
         },
-        saveBtnText: { color: "#fff", fontWeight: "600" },
-        empty: { textAlign: "center", color: colors.textSecondary, marginTop: spacing.xl },
+        saveBtnText: { color: colors.textWhite, fontWeight: "600" },
+        empty: {
+            textAlign: "center",
+            color: colors.textSecondary,
+            marginTop: spacing.xl,
+        },
     });
 
     if (loading) return <LoadingSpinner />;
@@ -190,7 +199,7 @@ export default function CategoriesScreen() {
             <View style={styles.header}>
                 <Text style={styles.title}>Catégories</Text>
                 <TouchableOpacity style={styles.addBtn} onPress={openCreate}>
-                    <Ionicons name="add" size={18} color="#fff" />
+                    <Ionicons name="add" size={18} color={colors.textWhite} />
                     <Text style={styles.addBtnText}>Ajouter</Text>
                 </TouchableOpacity>
             </View>
@@ -208,7 +217,8 @@ export default function CategoriesScreen() {
                             <View>
                                 <Text style={styles.catName}>{item.name}</Text>
                                 <Text style={styles.catDate}>
-                                    Créée le {new Date(item.created_at).toLocaleDateString("fr-FR")}
+                                    Créée le{" "}
+                                    {new Date(item.created_at).toLocaleDateString("fr-FR")}
                                 </Text>
                             </View>
                             <View style={styles.actions}>
@@ -216,13 +226,21 @@ export default function CategoriesScreen() {
                                     style={styles.actionBtn}
                                     onPress={() => openEdit(item)}
                                 >
-                                    <Ionicons name="pencil-outline" size={20} color={colors.info} />
+                                    <Ionicons
+                                        name="pencil-outline"
+                                        size={20}
+                                        color={colors.info}
+                                    />
                                 </TouchableOpacity>
                                 <TouchableOpacity
                                     style={styles.actionBtn}
                                     onPress={() => handleDelete(item)}
                                 >
-                                    <Ionicons name="trash-outline" size={20} color={colors.danger} />
+                                    <Ionicons
+                                        name="trash-outline"
+                                        size={20}
+                                        color={colors.danger}
+                                    />
                                 </TouchableOpacity>
                             </View>
                         </View>
@@ -270,10 +288,10 @@ export default function CategoriesScreen() {
                 type={alert.type}
                 title={alert.title}
                 message={alert.message}
-                onConfirm={alert.onConfirm || hideAlert}
-                onCancel={alert.type === "confirm" ? hideAlert : undefined}
-                confirmText={alert.type === "confirm" ? "Confirmer" : "OK"}
-                cancelText="Annuler"
+                onClose={hideAlert}
+                onConfirm={alert.onConfirm}
+                confirmText={alert.confirmText || (alert.type === "confirm" ? "Confirmer" : "OK")}
+                cancelText={alert.cancelText || "Annuler"}
             />
         </View>
     );