diff --git a/src/components/Global/TableList.jsx b/src/components/Global/TableList.jsx
index a44ed8c..5a47021 100644
--- a/src/components/Global/TableList.jsx
+++ b/src/components/Global/TableList.jsx
@@ -20,6 +20,7 @@ const TableList = memo(function TableList({
     fieldColor,
     firstLoad = true,
     columnDynamic = false,
+    cardComponent, // New prop for custom card component
 }) {
     const [gridLoading, setGridLoading] = useState(false);
 
@@ -142,6 +143,9 @@ const TableList = memo(function TableList({
 
     const isMobile = !screens.md; // kalau kurang dari md (768px) dianggap mobile
 
+    // Use the custom card component if provided, otherwise default to CardList
+    const CardViewComponent = cardComponent || CardList;
+
     return (
         <div>
             <Segmented
@@ -153,7 +157,7 @@ const TableList = memo(function TableList({
                 onChange={setViewMode}
             />
             {(isMobile && mobile) || viewMode === 'card' ? (
-                <CardList
+                <CardViewComponent
                     cardColor={cardColor}
                     fieldColor={fieldColor}
                     data={data}
@@ -200,3 +204,4 @@ const TableList = memo(function TableList({
 });
 
 export default TableList;
+
diff --git a/src/pages/master/sparepart/component/ListSparepart.jsx b/src/pages/master/sparepart/component/ListSparepart.jsx
index dc7d410..676c5a8 100644
--- a/src/pages/master/sparepart/component/ListSparepart.jsx
+++ b/src/pages/master/sparepart/component/ListSparepart.jsx
@@ -13,6 +13,7 @@ import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/
 import { useNavigate } from 'react-router-dom';
 import { deleteSparepart, getAllSparepart } from '../../../../api/sparepart';
 import TableList from '../../../../components/Global/TableList';
+import SparepartCardList from './SparepartCardList'; // Import the new custom card component
 
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
@@ -265,6 +266,7 @@ const ListSparepart = memo(function ListSparepart(props) {
                             queryParams={formDataFilter}
                             columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
                             triger={trigerFilter}
+                            cardComponent={SparepartCardList} // Pass the custom component here
                         />
                     </Col>
                 </Row>
diff --git a/src/pages/master/sparepart/component/SparepartCardList.jsx b/src/pages/master/sparepart/component/SparepartCardList.jsx
new file mode 100644
index 0000000..550a760
--- /dev/null
+++ b/src/pages/master/sparepart/component/SparepartCardList.jsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { Card, Button, Row, Col, Typography, Divider, Tag } from 'antd';
+import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const { Text, Title } = Typography;
+
+const SparepartCardList = ({
+    data,
+    header,
+    showPreviewModal, // Keep prop in case it's needed elsewhere, but icon is removed
+    showEditModal,
+    showDeleteDialog,
+    fieldColor,
+    cardColor
+}) => {
+    return (
+        <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
+            {data.map((item) => (
+                <Col xs={24} sm={12} md={8} lg={6} key={item.sparepart_id || item.key}>
+                    <Card
+                        style={{
+                            borderRadius: '8px',
+                            overflow: 'hidden',
+                            border: `1px solid ${fieldColor ? item[fieldColor] : cardColor || '#E0E0E0'}`,
+                        }}
+                        bodyStyle={{ padding: 0 }}
+                    >
+                        <Row>
+                            <Col span={8}>
+                                <div
+                                    style={{
+                                        position: 'relative',
+                                        backgroundColor: '#f0f0f0',
+                                        width: '100%',
+                                        height: '100%',
+                                    }}
+                                >
+                                    {item.sparepart_item_type && (
+                                        <Tag 
+                                            color="blue"
+                                            style={{ 
+                                                position: 'absolute', 
+                                                top: '8px', 
+                                                left: '8px',
+                                                zIndex: 1,
+                                            }}
+                                        >
+                                            {item.sparepart_item_type}
+                                        </Tag>
+                                    )}
+                                    <div style={{ paddingTop: '30px', height: '100%', boxSizing: 'border-box' }}>
+                                        <img 
+                                            src={item.image_url || "https://via.placeholder.com/150"} 
+                                            alt={item[header]} 
+                                            style={{ 
+                                                width: '100%', 
+                                                height: '100%', 
+                                                objectFit: 'cover'
+                                            }} 
+                                        />
+                                    </div>
+                                </div>
+                            </Col>
+                            <Col span={16}>
+                                <div style={{ padding: '16px', position: 'relative', height: '100%' }}>
+                                    <div 
+                                        style={{ 
+                                            position: 'absolute', 
+                                            top: 8, 
+                                            right: 8, 
+                                            display: 'flex', 
+                                            gap: '8px' 
+                                        }}
+                                    >
+                                        {showEditModal && (
+                                            <Button
+                                                icon={<EditOutlined />}
+                                                key="edit"
+                                                onClick={() => showEditModal(item)}
+                                                size="small"
+                                            />
+                                        )}
+                                        {showDeleteDialog && (
+                                            <Button
+                                                icon={<DeleteOutlined />}
+                                                key="delete"
+                                                onClick={() => showDeleteDialog(item)}
+                                                size="small"
+                                                danger
+                                            />
+                                        )}
+                                    </div>
+                                    <Title level={5} style={{ margin: 0, marginBottom: '8px', paddingRight: '60px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                        {item[header]}
+                                    </Title>
+                                    <Text type="secondary">
+                                        Available: {item.sparepart_stok || '0'}
+                                    </Text>
+                                    <Divider style={{ margin: '8px 0' }} />
+                                    <Button
+                                        type="primary"
+                                        size="small"
+                                        style={{ marginBottom: '8px' }}
+                                        onClick={() => showEditModal(item)}
+                                    >
+                                        Update Stock
+                                    </Button>
+                                    <br />
+                                    <Text type="secondary" style={{ fontSize: '12px' }}>
+                                        Last updated: {item.updated_at || 'N/A'}
+                                    </Text>
+                                </div>
+                            </Col>
+                        </Row>
+                    </Card>
+                </Col>
+            ))}
+        </Row>
+    );
+};
+
+export default SparepartCardList;
\ No newline at end of file