please improve this application UI

(tabs)/_layout.tsx

import { Tabs } from 'expo-router';
import { Platform } from 'react-native';
import { Warehouse, Tags, FileText, Settings } from 'lucide-react-native';
import { useTheme } from '../../components/ThemeContext';

export default function TabLayout() {
const { darkMode } = useTheme();

return (
<Tabs
screenOptions={{
tabBarActiveTintColor: '#6366f1',
tabBarInactiveTintColor: darkMode ? '#6b7280' : '#94a3b8',
tabBarStyle: {
paddingTop: 10,
paddingBottom: Platform.OS === 'ios' ? 25 : 10,
height: Platform.OS === 'ios' ? 85 : 70,
backgroundColor: darkMode ? '#1f2937' : '#ffffff',
borderTopWidth: 1,
borderTopColor: darkMode ? '#374151' : '#e2e8f0',
},
tabBarLabelStyle: {
fontFamily: 'Inter-Medium',
fontSize: 12,
marginTop: 2,
},
headerShown: false,
}}>
<Tabs.Screen
name="index"
options={{
title: 'Inventory',
tabBarIcon: ({ color, size }) => (
<Warehouse size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="categories"
options={{
title: 'Categories',
tabBarIcon: ({ color, size }) => (
<Tags size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="compounds"
options={{
title: 'Formulations',
tabBarIcon: ({ color, size }) => (
<FileText size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="settings"
options={{
title: 'Settings',
tabBarIcon: ({ color, size }) => (
<Settings size={size} color={color} />
),
}}
/>
</Tabs>
);
}

Categories.tsx

import { useState, useEffect, useCallback } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, RefreshControl } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter, useFocusEffect } from 'expo-router';
import { Plus, Pencil } from 'lucide-react-native';
import { Category } from '../../types';
import { getCategories } from '../../utils/storage';
import Header from '../../components/Header';
import EmptyState from '../../components/EmptyState';
import Card from '../../components/Card';

export default function CategoriesScreen() {
const router = useRouter();
const [categories, setCategories] = useState<Category[]>([]);
const [loading, setLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false);

const loadCategories = useCallback(async () => {  
  setLoading(true);  
  try {  
    const items = await getCategories();  
    setCategories(items);  
  } catch (error) {  
    console.error('Failed to load categories:', error);  
    Alert.alert('Error', 'Failed to load categories');  
  } finally {  
    setLoading(false);  
    setRefreshing(false);  
  }  
}, []);  

useFocusEffect(  
  useCallback(() => {  
    loadCategories();  
  }, [loadCategories])  
);  

const onRefresh = useCallback(() => {  
  setRefreshing(true);  
  loadCategories();  
}, [loadCategories]);  

const handleAddCategory = () => {  
  router.push('/categories/add');  
};  

const handleEditCategory = (id: string) => {  
  router.push({  
    pathname: '/categories/edit',  
    params: { id }  
  });  
};  

const renderItem = ({ item }: { item: Category }) => (  
  <Card>  
    <View style={styles.itemContainer}>  
      <View style={styles.itemInfo}>  
        <Text style={styles.itemName}>{item.name}</Text>  
      </View>  
      <View style={styles.itemActions}>  
        <TouchableOpacity  
          style={styles.actionButton}  
          onPress={() => handleEditCategory(item.id)}  
        >  
          <Pencil size={18} color="#6366f1" />  
        </TouchableOpacity>  
      </View>  
    </View>  
  </Card>  
);  

return (  
  <SafeAreaView style={styles.container} edges={['top']}>  
    <Header title="Categories" />  

    <FlatList  
      data={categories}  
      renderItem={renderItem}  
      keyExtractor={item => item.id}  
      contentContainerStyle={styles.listContent}  
      refreshControl={  
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />  
      }  
      ListEmptyComponent={  
        <EmptyState  
          message={  
            loading  
              ? "Loading categories..."  
              : "No categories found. Add your first category!"  
          }  
        />  
      }  
    />  

    <TouchableOpacity style={styles.fab} onPress={handleAddCategory}>  
      <Text style={styles.fabText}>Add Category</Text>  
    </TouchableOpacity>  
  </SafeAreaView>  
);  

}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8fafc',
},
listContent: {
padding: 16,
},
itemContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
itemInfo: {
flex: 1,
},
itemName: {
fontFamily: 'Inter-SemiBold',
fontSize: 16,
color: '#1f2937',
},
itemActions: {
flexDirection: 'row',
},
actionButton: {
padding: 8,
marginLeft: 8,
},
fab: {
position: 'absolute',
bottom: 24,
right: 24,
backgroundColor: '#6366f1',
borderRadius: 28,
paddingVertical: 12,
paddingHorizontal: 20,
flexDirection: 'row',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
fabText: {
color: '#ffffff',
fontFamily: 'Inter-Medium',
fontSize: 16,
},
});

so please improve the layout and when I click on search icons then make sure that it visible input field in that way that it didn't break the UX laws. and also reduce the spacing and make it more attractive layout