diff --git a/src/pages/master/brandDevice/component/CustomSparepartCard.jsx b/src/pages/master/brandDevice/component/CustomSparepartCard.jsx
index f3c10b5..5327cee 100644
--- a/src/pages/master/brandDevice/component/CustomSparepartCard.jsx
+++ b/src/pages/master/brandDevice/component/CustomSparepartCard.jsx
@@ -20,7 +20,6 @@ const CustomSparepartCard = ({
 }) => {
     const [previewModalVisible, setPreviewModalVisible] = useState(false);
 
-    // Construct image source with proper fallback
     const getImageSrc = () => {
         if (sparepart.sparepart_foto) {
             if (sparepart.sparepart_foto.startsWith('http')) {
@@ -56,7 +55,6 @@ const CustomSparepartCard = ({
     const getCardActions = () => {
         const actions = [];
 
-        // Preview button
         if (showPreview) {
             actions.push(
                 <Button
@@ -73,7 +71,6 @@ const CustomSparepartCard = ({
             );
         }
 
-        // Delete button without confirmation
         if (showDelete && !isReadOnly) {
             actions.push(
                 <Button
@@ -93,7 +90,6 @@ const CustomSparepartCard = ({
         return actions;
     };
 
-    // Get card styling based on size
     const getCardStyle = () => {
         const baseStyle = {
             borderRadius: '12px',
@@ -132,11 +128,13 @@ const CustomSparepartCard = ({
             <Card
                 hoverable={!!onCardClick && !isReadOnly}
                 style={getCardStyle()}
-                bodyStyle={{
-                    padding: 0,
-                    height: 'calc(100% - 48px)',
-                    display: 'flex',
-                    flexDirection: 'column'
+                styles={{
+                    body: {
+                        padding: 0,
+                        height: 'calc(100% - 48px)',
+                        display: 'flex',
+                        flexDirection: 'column'
+                    }
                 }}
                 actions={getCardActions()}
                 onClick={handleCardClick}
@@ -244,55 +242,65 @@ const CustomSparepartCard = ({
                                 {sparepart.sparepart_name || sparepart.name || 'Unnamed'}
                             </Title>
 
-                            {size !== 'small' && (
-                                <>
-                                    <Text
-                                        type="secondary"
+                            {/* Stock and Quantity Information */}
+                            <div style={{ marginBottom: size === 'small' ? '6px' : '8px' }}>
+                                {/* Stock Status Tag */}
+                                <div style={{ marginBottom: '4px' }}>
+                                    <Tag
+                                        color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
                                         style={{
-                                            fontSize: '12px',
-                                            display: 'block',
-                                            marginBottom: '6px',
-                                            overflow: 'hidden',
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap'
+                                            fontSize: size === 'small' ? '9px' : '10px',
+                                            padding: '0 4px',
+                                            margin: 0,
+                                            height: 'auto'
                                         }}
                                     >
-                                        Stock: {sparepart.sparepart_stock || sparepart.sparepart_stok || '0'} {sparepart.sparepart_unit || 'pcs'}
+                                        {sparepart.sparepart_stok || 'Not Available'}
+                                    </Tag>
+                                </div>
+
+                                {/* Quantity */}
+                                <div style={{ display: 'flex', alignItems: 'center' }}>
+                                    <Text
+                                        style={{
+                                            fontSize: size === 'small' ? '10px' : '11px',
+                                            fontWeight: 500,
+                                            color: '#262626',
+                                            marginRight: '4px'
+                                        }}
+                                    >
+                                        qty:
                                     </Text>
+                                    <Text
+                                        style={{
+                                            fontSize: size === 'small' ? '10px' : '11px',
+                                            color: sparepart.sparepart_qty > 0 ? '#52c41a' : '#ff4d4f',
+                                            fontWeight: 600
+                                        }}
+                                    >
+                                        {sparepart.sparepart_qty || 0}
+                                        {sparepart.sparepart_unit ? ` ${sparepart.sparepart_unit}` : ''}
+                                    </Text>
+                                </div>
+                            </div>
 
-                                    <div style={{ marginBottom: '6px' }}>
-                                        <Text
-                                            code
-                                            style={{
-                                                fontSize: '11px',
-                                                backgroundColor: '#f5f5f5',
-                                                padding: '2px 6px',
-                                                borderRadius: '3px'
-                                            }}
-                                        >
-                                            {sparepart.sparepart_code || 'No code'}
-                                        </Text>
-                                    </div>
-                                </>
-                            )}
-
-                            {size === 'small' && (
+                            <div style={{ marginBottom: size === 'small' ? '4px' : '6px' }}>
                                 <Text
                                     code
                                     style={{
-                                        fontSize: '10px',
+                                        fontSize: size === 'small' ? '10px' : '11px',
                                         backgroundColor: '#f5f5f5',
-                                        display: 'block',
-                                        marginBottom: '4px'
+                                        padding: '2px 6px',
+                                        borderRadius: '3px'
                                     }}
                                 >
                                     {sparepart.sparepart_code || 'No code'}
                                 </Text>
-                            )}
+                            </div>
 
                             {(sparepart.sparepart_merk || sparepart.sparepart_model) && (
                                 <div style={{
-                                    fontSize: size === 'small' ? '10px' : '11px',
+                                    fontSize: size === 'small' ? '9px' : '10px',
                                     color: '#666',
                                     lineHeight: '1.4',
                                     marginBottom: '4px'
@@ -332,23 +340,24 @@ const CustomSparepartCard = ({
                         Close
                     </Button>
                 ]}
-                width={700}
+                width={800}
                 centered
-                bodyStyle={{ padding: '24px' }}
+                styles={{ body: { padding: '24px' } }}
             >
                 <Row gutter={[24, 24]}>
-                    <Col span={8}>
+                    <Col span={10}>
                         <div style={{ textAlign: 'center' }}>
                             <div
                                 style={{
                                     backgroundColor: '#f0f0f0',
-                                    width: '200px',
-                                    height: '200px',
+                                    width: '220px',
+                                    height: '220px',
                                     margin: '0 auto 16px',
                                     position: 'relative',
-                                    borderRadius: '8px',
+                                    borderRadius: '12px',
                                     overflow: 'hidden',
                                     border: '1px solid #E0E0E0',
+                                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
                                 }}
                             >
                                 <img
@@ -360,116 +369,138 @@ const CustomSparepartCard = ({
                                         objectFit: 'cover'
                                     }}
                                     onError={(e) => {
-                                        e.target.src = 'https://via.placeholder.com/200x200/d9d9d9/666666?text=No+Image';
+                                        e.target.src = 'https://via.placeholder.com/220x220/d9d9d9/666666?text=No+Image';
                                     }}
                                 />
                             </div>
 
+                            {/* Item Type Tag */}
                             {sparepart.sparepart_item_type && (
-                                <Tag color="blue" style={{ marginTop: '12px' }}>
-                                    {sparepart.sparepart_item_type}
-                                </Tag>
-                            )}
-                        </div>
-                    </Col>
-
-                    <Col span={16}>
-                        <div>
-                            <Title level={3} style={{ marginBottom: '16px' }}>
-                                {sparepart.sparepart_name || 'Unnamed'}
-                            </Title>
-
-                            <Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
-                                <Col span={12}>
-                                    <div style={{ marginBottom: '8px' }}>
-                                        <Text strong style={{ fontSize: '16px', color: '#262626' }}>
-                                            Code:
-                                        </Text>
-                                        <Text style={{ fontSize: '16px', marginLeft: '8px' }}>
-                                            {sparepart.sparepart_code || 'N/A'}
-                                        </Text>
-                                    </div>
-                                </Col>
-                                <Col span={12}>
-                                    <div style={{ marginBottom: '8px' }}>
-                                        <Text strong style={{ fontSize: '16px', color: '#262626' }}>
-                                            Status:
-                                        </Text>
-                                        <Tag
-                                            color={sparepart.is_active ? 'green' : 'red'}
-                                            style={{ marginLeft: '8px', fontSize: '14px' }}
-                                        >
-                                            {sparepart.is_active ? 'Active' : 'Inactive'}
-                                        </Tag>
-                                    </div>
-                                </Col>
-                            </Row>
-
-                            {sparepart.sparepart_description && (
-                                <div style={{ marginBottom: '16px' }}>
-                                    <Text strong style={{ fontSize: '16px', color: '#262626' }}>
-                                        Description:
-                                    </Text>
-                                    <Text style={{ fontSize: '16px', marginLeft: '8px' }}>
-                                        {sparepart.sparepart_description}
-                                    </Text>
+                                <div style={{ marginBottom: '12px' }}>
+                                    <Tag color="blue" style={{ fontSize: '14px', padding: '4px 12px' }}>
+                                        {sparepart.sparepart_item_type}
+                                    </Tag>
                                 </div>
                             )}
 
-                            <div style={{ marginBottom: '16px' }}>
-                                <Text strong style={{ fontSize: '16px', color: '#262626' }}>
-                                    Stock:
-                                </Text>
-                                <Text style={{ fontSize: '16px', marginLeft: '8px' }}>
-                                    {sparepart.sparepart_stock || sparepart.sparepart_stok || '0'}
-                                    {sparepart.sparepart_unit ? ` ${sparepart.sparepart_unit}` : ' units'}
-                                </Text>
+                            {/* Stock Status and Quantity */}
+                            <div style={{
+                                textAlign: 'left',
+                                background: '#f8f9fa',
+                                padding: '12px',
+                                borderRadius: '8px',
+                                marginTop: '25px'
+                            }}>
+                                <div style={{ marginBottom: '8px' }}>
+                                    <Text strong style={{ fontSize: '14px', color: '#262626' }}>Stock Status:</Text>
+                                    <Tag
+                                        color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
+                                        style={{ marginLeft: '8px', fontSize: '12px' }}
+                                    >
+                                        {sparepart.sparepart_stok || 'Not Available'}
+                                    </Tag>
+                                </div>
+                                <div>
+                                    <Text strong style={{ fontSize: '14px', color: '#262626' }}>Quantity:</Text>
+                                    <Text style={{ fontSize: '14px', marginLeft: '8px', fontWeight: 600 }}>
+                                        {sparepart.sparepart_qty || 0} {sparepart.sparepart_unit || ''}
+                                    </Text>
+                                </div>
+                            </div>
+                        </div>
+                    </Col>
+
+                    <Col span={14}>
+                        <div>
+                            {/* Sparepart Name */}
+                            <Title level={3} style={{ marginBottom: '20px', color: '#262626' }}>
+                                {sparepart.sparepart_name || 'Unnamed'}
+                            </Title>
+
+                            {/* Basic Information */}
+                            <div style={{ marginBottom: '24px' }}>
+                                <Row gutter={[16, 12]}>
+                                    <Col span={24}>
+                                        <div style={{
+                                            padding: '12px',
+                                            backgroundColor: '#fafafa',
+                                            borderRadius: '8px',
+                                            border: '1px solid #f0f0f0'
+                                        }}>
+                                            <Row gutter={16}>
+                                                <Col span={8}>
+                                                    <div>
+                                                        <Text type="secondary" style={{ fontSize: '12px' }}>Code</Text>
+                                                        <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
+                                                            {sparepart.sparepart_code || 'N/A'}
+                                                        </div>
+                                                    </div>
+                                                </Col>
+                                                <Col span={8}>
+                                                    <div>
+                                                        <Text type="secondary" style={{ fontSize: '12px' }}>Brand</Text>
+                                                        <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
+                                                            {sparepart.sparepart_merk || '-'}
+                                                        </div>
+                                                    </div>
+                                                </Col>
+                                                <Col span={8}>
+                                                    <div>
+                                                        <Text type="secondary" style={{ fontSize: '12px' }}>Unit</Text>
+                                                        <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
+                                                            {sparepart.sparepart_unit || '-'}
+                                                        </div>
+                                                    </div>
+                                                </Col>
+                                            </Row>
+                                        </div>
+                                    </Col>
+
+                                    {sparepart.sparepart_model && (
+                                        <Col span={24}>
+                                            <div>
+                                                <Text type="secondary" style={{ fontSize: '12px' }}>Model</Text>
+                                                <div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
+                                                    {sparepart.sparepart_model}
+                                                </div>
+                                            </div>
+                                        </Col>
+                                    )}
+
+                                    {sparepart.sparepart_description && (
+                                        <Col span={24}>
+                                            <div>
+                                                <Text type="secondary" style={{ fontSize: '12px' }}>Description</Text>
+                                                <div style={{ fontSize: '15px', marginTop: '2px', lineHeight: '1.5' }}>
+                                                    {sparepart.sparepart_description}
+                                                </div>
+                                            </div>
+                                        </Col>
+                                    )}
+                                </Row>
                             </div>
 
-                            <Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
-                                {sparepart.sparepart_merk && (
-                                    <Col span={8}>
-                                        <div>
-                                            <Text strong style={{ fontSize: '14px', color: '#262626' }}>
-                                                Brand:
-                                            </Text>
-                                            <Text style={{ fontSize: '14px', marginLeft: '8px' }}>
-                                                {sparepart.sparepart_merk}
-                                            </Text>
-                                        </div>
-                                    </Col>
-                                )}
-                                {sparepart.sparepart_model && (
-                                    <Col span={8}>
-                                        <div>
-                                            <Text strong style={{ fontSize: '14px', color: '#262626' }}>
-                                                Model:
-                                            </Text>
-                                            <Text style={{ fontSize: '14px', marginLeft: '8px' }}>
-                                                {sparepart.sparepart_model}
-                                            </Text>
-                                        </div>
-                                    </Col>
-                                )}
-                                {sparepart.sparepart_unit && (
-                                    <Col span={8}>
-                                        <div>
-                                            <Text strong style={{ fontSize: '14px', color: '#262626' }}>
-                                                Unit:
-                                            </Text>
-                                            <Text style={{ fontSize: '14px', marginLeft: '8px' }}>
-                                                {sparepart.sparepart_unit}
-                                            </Text>
-                                        </div>
-                                    </Col>
-                                )}
-                            </Row>
-
-                            {sparepart.updated_at && (
-                                <div style={{ marginTop: '24px', paddingTop: '16px', borderTop: '1px solid #f0f0f0' }}>
-                                    <Text type="secondary" style={{ fontSize: '14px' }}>
-                                        Last updated: {dayjs(sparepart.updated_at).format('DD MMMM YYYY, HH:mm')}
-                                    </Text>
+                            {/* Timeline Information */}
+                            {sparepart.created_at && (
+                                <div>
+                                    <Row gutter={16}>
+                                        <Col span={12}>
+                                            <div>
+                                                <Text type="secondary" style={{ fontSize: '12px' }}>Created</Text>
+                                                <div style={{ fontSize: '13px', marginTop: '2px' }}>
+                                                    {dayjs(sparepart.created_at).format('DD MMM YYYY, HH:mm')}
+                                                </div>
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div>
+                                                <Text type="secondary" style={{ fontSize: '12px' }}>Last Updated</Text>
+                                                <div style={{ fontSize: '13px', marginTop: '2px' }}>
+                                                    {dayjs(sparepart.updated_at).format('DD MMM YYYY, HH:mm')}
+                                                </div>
+                                            </div>
+                                        </Col>
+                                    </Row>
                                 </div>
                             )}
                         </div>
diff --git a/src/pages/master/brandDevice/component/SparepartCardSelect.jsx b/src/pages/master/brandDevice/component/SparepartCardSelect.jsx
deleted file mode 100644
index d95f84d..0000000
--- a/src/pages/master/brandDevice/component/SparepartCardSelect.jsx
+++ /dev/null
@@ -1,249 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Card, Row, Col, Typography, Tag, Space, Spin, Button, Empty, message } from 'antd';
-import { SearchOutlined } from '@ant-design/icons';
-import { getAllSparepart } from '../../../../api/sparepart';
-import { addSparepartToBrand, removeSparepartFromBrand } from '../../../../api/master-brand';
-import CustomSparepartCard from './CustomSparepartCard';
-
-const { Text, Title } = Typography;
-
-const SparepartCardSelect = ({
-    selectedSparepartIds = [],
-    onSparepartChange,
-    isLoading: externalLoading = false,
-    isReadOnly = false,
-    brandId = null
-}) => {
-    const [spareparts, setSpareparts] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const [searchTerm, setSearchTerm] = useState('');
-
-    useEffect(() => {
-        loadSpareparts();
-    }, []);
-
-    const loadSpareparts = async () => {
-        setLoading(true);
-        try {
-            const params = new URLSearchParams();
-            params.set('limit', '1000'); // Get all spareparts
-
-            const response = await getAllSparepart(params);
-            if (response && (response.statusCode === 200 || response.data)) {
-                const sparepartData = response.data?.data || response.data || [];
-                setSpareparts(sparepartData);
-            } else {
-                // For demo purposes, use mock data if API fails
-                setSpareparts([
-                    { 
-                        sparepart_id: 1, 
-                        sparepart_name: 'Compressor Oil Filter', 
-                        sparepart_description: 'Oil filter for compressor',
-                        sparepart_foto: null,
-                        sparepart_code: 'SP-001',
-                        sparepart_merk: 'Brand A',
-                        sparepart_model: 'Model X'
-                    },
-                    { 
-                        sparepart_id: 2, 
-                        sparepart_name: 'Air Intake Filter', 
-                        sparepart_description: 'Air intake filter',
-                        sparepart_foto: null,
-                        sparepart_code: 'SP-002',
-                        sparepart_merk: 'Brand B',
-                        sparepart_model: 'Model Y'
-                    },
-                    { 
-                        sparepart_id: 3, 
-                        sparepart_name: 'Cooling Fan Motor', 
-                        sparepart_description: 'Motor for cooling fan',
-                        sparepart_foto: null,
-                        sparepart_code: 'SP-003',
-                        sparepart_merk: 'Brand C',
-                        sparepart_model: 'Model Z'
-                    },
-                ]);
-            }
-        } catch (error) {
-            // Default mock data
-            setSpareparts([
-                { 
-                    sparepart_id: 1, 
-                    sparepart_name: 'Compressor Oil Filter', 
-                    sparepart_description: 'Oil filter for compressor',
-                    sparepart_foto: null,
-                    sparepart_code: 'SP-001',
-                    sparepart_merk: 'Brand A',
-                    sparepart_model: 'Model X'
-                },
-                { 
-                    sparepart_id: 2, 
-                    sparepart_name: 'Air Intake Filter', 
-                    sparepart_description: 'Air intake filter',
-                    sparepart_foto: null,
-                    sparepart_code: 'SP-002',
-                    sparepart_merk: 'Brand B',
-                    sparepart_model: 'Model Y'
-                },
-                { 
-                    sparepart_id: 3, 
-                    sparepart_name: 'Cooling Fan Motor', 
-                    sparepart_description: 'Motor for cooling fan',
-                    sparepart_foto: null,
-                    sparepart_code: 'SP-003',
-                    sparepart_merk: 'Brand C',
-                    sparepart_model: 'Model Z'
-                },
-            ]);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const filteredSpareparts = spareparts.filter(sp => 
-        sp.sparepart_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        sp.sparepart_code.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        sp.sparepart_merk?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        sp.sparepart_model?.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-
-    const handleSparepartToggle = async (sparepartId) => {
-        if (isReadOnly) return;
-
-        const isCurrentlySelected = selectedSparepartIds.includes(sparepartId);
-
-        // If brandId is provided, save immediately to database
-        if (brandId) {
-            try {
-                setLoading(true);
-
-                if (isCurrentlySelected) {
-                    // Remove from database
-                    await removeSparepartFromBrand(brandId, sparepartId);
-                    message.success('Sparepart removed from brand successfully');
-                } else {
-                    // Add to database
-                    await addSparepartToBrand(brandId, sparepartId);
-                    message.success('Sparepart added to brand successfully');
-                }
-
-                // Update local state
-                const newSelectedIds = isCurrentlySelected
-                    ? selectedSparepartIds.filter(id => id !== sparepartId)
-                    : [...selectedSparepartIds, sparepartId];
-
-                onSparepartChange(newSelectedIds);
-            } catch (error) {
-                message.error(error.message || 'Failed to update sparepart');
-            } finally {
-                setLoading(false);
-            }
-        } else {
-            // If no brandId (add mode), just update local state
-            const newSelectedIds = isCurrentlySelected
-                ? selectedSparepartIds.filter(id => id !== sparepartId)
-                : [...selectedSparepartIds, sparepartId];
-
-            onSparepartChange(newSelectedIds);
-        }
-    };
-
-    const isSelected = (sparepartId) => selectedSparepartIds.includes(sparepartId);
-
-    const combinedLoading = loading || externalLoading;
-
-    return (
-        <div>
-            <div style={{ marginBottom: 16 }}>
-                <Space style={{ width: '100%', justifyContent: 'space-between' }}>
-                    <Title level={5} style={{ margin: 0 }}>
-                        Select Spareparts
-                    </Title>
-                    <div style={{ position: 'relative', width: '200px' }}>
-                        <input
-                            type="text"
-                            placeholder="Search spareparts..."
-                            value={searchTerm}
-                            onChange={(e) => setSearchTerm(e.target.value)}
-                            style={{
-                                padding: '8px 30px 8px 12px',
-                                border: '1px solid #d9d9d9',
-                                borderRadius: '6px',
-                                width: '100%'
-                            }}
-                        />
-                        <SearchOutlined 
-                            style={{ 
-                                position: 'absolute', 
-                                right: '10px', 
-                                top: '50%', 
-                                transform: 'translateY(-50%)',
-                                color: '#bfbfbf' 
-                            }} 
-                        />
-                    </div>
-                </Space>
-            </div>
-
-            {combinedLoading ? (
-                <div style={{ textAlign: 'center', padding: '40px' }}>
-                    <Spin size="large" />
-                </div>
-            ) : filteredSpareparts.length === 0 ? (
-                <Empty 
-                    description="No spareparts found" 
-                    image={Empty.PRESENTED_IMAGE_SIMPLE}
-                />
-            ) : (
-                <Row gutter={[16, 16]}>
-                    {filteredSpareparts.map(sparepart => (
-                        <Col xs={24} sm={12} md={12} lg={12} key={sparepart.sparepart_id}>
-                            <CustomSparepartCard
-                                sparepart={sparepart}
-                                isSelected={isSelected(sparepart.sparepart_id)}
-                                isReadOnly={isReadOnly}
-                                showPreview={true}
-                                showDelete={true}
-                                onCardClick={() => handleSparepartToggle(sparepart.sparepart_id)}
-                                onDelete={() => {
-                                    // When delete button is clicked, remove from selection
-                                    const newSelectedIds = selectedSparepartIds.filter(id => id !== sparepart.sparepart_id);
-                                    onSparepartChange(newSelectedIds);
-
-                                    // Also remove from database if brandId exists
-                                    if (brandId) {
-                                        removeSparepartFromBrand(brandId, sparepart.sparepart_id)
-                                            .then(() => message.success('Sparepart removed successfully'))
-                                            .catch(error => message.error(error.message || 'Failed to remove sparepart'));
-                                    }
-                                }}
-                            />
-                        </Col>
-                    ))}
-                </Row>
-            )}
-            
-            {selectedSparepartIds.length > 0 && (
-                <div style={{ marginTop: 16 }}>
-                    <Text strong>Selected Spareparts: </Text>
-                    <Space wrap>
-                        {selectedSparepartIds.map(id => {
-                            const sparepart = spareparts.find(sp => sp.sparepart_id === id);
-                            return sparepart ? (
-                                <Tag key={id} color="green">
-                                    {sparepart.sparepart_name} (ID: {id})
-                                </Tag>
-                            ) : (
-                                <Tag key={id} color="green">
-                                    Sparepart ID: {id}
-                                </Tag>
-                            );
-                        })}
-                    </Space>
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default SparepartCardSelect;
\ No newline at end of file
diff --git a/src/pages/master/brandDevice/component/SparepartForm.jsx b/src/pages/master/brandDevice/component/SparepartForm.jsx
deleted file mode 100644
index dea4344..0000000
--- a/src/pages/master/brandDevice/component/SparepartForm.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Card, Divider, Typography } from 'antd';
-import SparepartCardSelect from './SparepartCardSelect';
-
-const { Text } = Typography;
-
-const SparepartForm = ({
-    sparepartForm,
-    selectedSparepartIds,
-    onSparepartChange,
-    isReadOnly = false
-}) => {
-    return (
-        <div style={{ minHeight: '400px' }}>
-            <Card title="Spareparts" style={{ minHeight: '100%' }}>
-                <SparepartCardSelect
-                    selectedSparepartIds={selectedSparepartIds}
-                    onSparepartChange={onSparepartChange}
-                    isReadOnly={isReadOnly}
-                />
-            </Card>
-        </div>
-    );
-};
-
-export default SparepartForm;
\ No newline at end of file
diff --git a/src/pages/master/brandDevice/component/SingleSparepartSelect.jsx b/src/pages/master/brandDevice/component/SparepartSelect.jsx
similarity index 58%
rename from src/pages/master/brandDevice/component/SingleSparepartSelect.jsx
rename to src/pages/master/brandDevice/component/SparepartSelect.jsx
index 5bb6971..81c3e78 100644
--- a/src/pages/master/brandDevice/component/SingleSparepartSelect.jsx
+++ b/src/pages/master/brandDevice/component/SparepartSelect.jsx
@@ -7,7 +7,7 @@ import CustomSparepartCard from './CustomSparepartCard';
 const { Text, Title } = Typography;
 const { Option } = Select;
 
-const SingleSparepartSelect = ({
+const SparepartSelect = ({
     selectedSparepartIds = [],
     onSparepartChange,
     isReadOnly = false
@@ -32,45 +32,25 @@ const SingleSparepartSelect = ({
         }
     }, [selectedSparepartIds, spareparts]);
 
-    const fetchSpareparts = async () => {
+    const fetchSpareparts = async (searchQuery = '') => {
         setLoading(true);
         try {
             const params = new URLSearchParams();
             params.set('limit', '1000');
 
+            if (searchQuery && searchQuery.trim() !== '') {
+                params.set('criteria', searchQuery.trim());
+            }
+
             const response = await getAllSparepart(params);
             if (response && (response.statusCode === 200 || response.data)) {
                 const sparepartData = response.data?.data || response.data || [];
                 setSpareparts(sparepartData);
             } else {
-                setSpareparts([
-                    {
-                        sparepart_id: 1,
-                        sparepart_name: 'Compressor Oil Filter',
-                        sparepart_description: 'Oil filter for compressor',
-                        sparepart_foto: null,
-                        sparepart_code: 'SP-001',
-                        sparepart_merk: 'Brand A',
-                        sparepart_model: 'Model X',
-                        is_active: true,
-                        stock_quantity: 50
-                    }
-                ]);
+                setSpareparts([]);
             }
         } catch (error) {
-            setSpareparts([
-                {
-                    sparepart_id: 1,
-                    sparepart_name: 'Compressor Oil Filter',
-                    sparepart_description: 'Oil filter for compressor',
-                    sparepart_foto: null,
-                    sparepart_code: 'SP-001',
-                    sparepart_merk: 'Brand A',
-                    sparepart_model: 'Model X',
-                    is_active: true,
-                    stock_quantity: 50
-                }
-            ]);
+            setSpareparts([]);
         } finally {
             setLoading(false);
         }
@@ -93,6 +73,17 @@ const SingleSparepartSelect = ({
         setDropdownOpen(false);
     };
 
+    const handleSearch = (value) => {
+        fetchSpareparts(value);
+    };
+
+    const onDropdownOpenChange = (open) => {
+        setDropdownOpen(open);
+        if (open) {
+            fetchSpareparts();
+        }
+    };
+
     const handleRemoveSparepart = (sparepartId) => {
         const newSelectedSpareparts = selectedSpareparts.filter(sp => sp.sparepart_id !== sparepartId);
         setSelectedSpareparts(newSelectedSpareparts);
@@ -111,7 +102,7 @@ const SingleSparepartSelect = ({
                     isSelected={isSelected}
                     isReadOnly={isReadOnly}
                     showPreview={true}
-                    showDelete={isAlreadySelected && !isReadOnly}  // Show delete only for already selected items
+                    showDelete={isAlreadySelected && !isReadOnly}
                     onCardClick={!isAlreadySelected && !isReadOnly ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
                     onDelete={() => handleRemoveSparepart(sparepart.sparepart_id)}
                     style={{
@@ -124,26 +115,34 @@ const SingleSparepartSelect = ({
 
     return (
         <>
-            <div>
-                {!isReadOnly && (
-                    <div style={{ marginBottom: 16 }}>
-                        <Select
-                            placeholder="Search and select sparepart..."
-                            style={{ width: '100%' }}
-                            loading={loading}
-                            onSelect={handleSparepartSelect}
-                            value={null}
-                            showSearch
-                            filterOption={(input, option) =>
-                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                            }
-                            open={dropdownOpen}
-                            onDropdownVisibleChange={setDropdownOpen}
-                            suffixIcon={<PlusOutlined />}
-                        >
-                            {spareparts
-                                .filter(sparepart => !selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id))
-                                .map((sparepart) => (
+            {/* Fixed Search Section */}
+            {!isReadOnly && (
+                <div style={{
+                    marginBottom: 16,
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 10,
+                    backgroundColor: 'white',
+                    padding: '8px 0',
+                    borderBottom: '1px solid #f0f0f0'
+                }}>
+                    <Select
+                        placeholder="search and select sparepart"
+                        style={{ width: '100%' }}
+                        loading={loading}
+                        onSelect={handleSparepartSelect}
+                        value={null}
+                        showSearch
+                        onSearch={handleSearch}
+                        filterOption={false}
+                        open={dropdownOpen}
+                        onOpenChange={onDropdownOpenChange}
+                        suffixIcon={<PlusOutlined />}
+                    >
+                        {spareparts
+                            .filter(sparepart => !selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id))
+                            .slice(0, 5)
+                            .map((sparepart) => (
                                 <Option key={sparepart.sparepart_id} value={sparepart.sparepart_id}>
                                     <div>
                                         <Text strong>{sparepart.sparepart_name || sparepart.name || 'Unnamed'}</Text>
@@ -153,31 +152,31 @@ const SingleSparepartSelect = ({
                                     </div>
                                 </Option>
                             ))}
-                        </Select>
-                    </div>
-                )}
-
-                <div>
-                    {selectedSpareparts.length > 0 ? (
-                        <div>
-                            <Title level={5} style={{ marginBottom: 16 }}>
-                                Selected Spareparts ({selectedSpareparts.length})
-                            </Title>
-                            <Row gutter={[16, 16]}>
-                                {selectedSpareparts.map(sparepart => renderSparepartCard(sparepart, true))}
-                            </Row>
-                        </div>
-                    ) : (
-                        <Empty
-                            image={Empty.PRESENTED_IMAGE_SIMPLE}
-                            description="No spareparts selected"
-                            style={{ margin: '20px 0' }}
-                        />
-                    )}
+                    </Select>
                 </div>
+            )}
+
+            {/* Scrollable Selected Items Section */}
+            <div>
+                {selectedSpareparts.length > 0 ? (
+                    <div>
+                        <Title level={5} style={{ marginBottom: 16 }}>
+                            Selected Spareparts ({selectedSpareparts.length})
+                        </Title>
+                        <Row gutter={[16, 16]}>
+                            {selectedSpareparts.map(sparepart => renderSparepartCard(sparepart, true))}
+                        </Row>
+                    </div>
+                ) : (
+                    <Empty
+                        image={Empty.PRESENTED_IMAGE_SIMPLE}
+                        description="No spareparts selected"
+                        style={{ margin: '20px 0' }}
+                    />
+                )}
             </div>
         </>
     );
 };
 
-export default SingleSparepartSelect;
\ No newline at end of file
+export default SparepartSelect;
\ No newline at end of file