diff --git a/resources/js/Pages/Expense/DetailModal.jsx b/resources/js/Pages/Expense/DetailModal.jsx
new file mode 100644
index 0000000..9c5e4ae
--- /dev/null
+++ b/resources/js/Pages/Expense/DetailModal.jsx
@@ -0,0 +1,123 @@
+import React, { useEffect } from "react";
+import Modal from "@/Components/Modal";
+import { useForm, usePage } from "@inertiajs/inertia-react";
+import { formatDate, formatIDR } from "@/Utils";
+
+export default function FormModal(props) {
+    const { auth: { user } } = usePage().props
+
+    const { modalState } = props
+    const { data, setData } = useForm({
+        id: null,
+        name: "",
+        description: "",
+        job_number: "",
+        date_expense: new Date(),
+        amount: "",
+        isIncome: 0,
+        is_paid: 0,
+        status: ""
+    })
+
+    const handleClose = () => {
+        modalState.toggle()
+    }
+
+    useEffect(() => {
+        const expense = modalState.data
+        if (expense !== null) {
+            setData({
+                id: expense?.id,
+                name: expense?.name,
+                description: expense?.description,
+                job_number: expense?.job_number,
+                date_expense: expense?.date_expense,
+                amount: expense?.amount,
+                isIncome: expense?.isIncome,
+                is_paid: expense?.is_paid,
+                status: expense?.status,
+            })
+            return 
+        }
+    }, [modalState])
+
+    return (
+        <Modal
+            isOpen={modalState.isOpen}
+            toggle={handleClose}
+            title={'Detail'}
+        >
+
+            {data.isIncome === 0 && (
+                <>
+                    <div className="form-control mb-2">
+                        <label>Nama</label>
+                        <input
+                            className="input input-bordered"
+                            name="name"
+                            value={data.name}
+                            readOnly={true}
+                        />
+                    </div>
+                    <div className="form-control mb-2">
+                        <label>Job Number</label>
+                        <input
+                            className="input input-bordered"
+                            name="job_number"
+                            value={data.job_number}
+                            readOnly={true}
+                        />
+                    </div>
+                </>
+            )}
+
+            <div className="form-control mb-2">
+                <label>Deskripsi</label>
+                <textarea
+                    className="textarea textarea-bordered"
+                    name="description"
+                    value={data.description}
+                    readOnly={true}
+                    rows={5}
+                />
+            </div>
+            <div className="form-control mb-2">
+                <label>Tanggal</label>
+                <input
+                    className="input input-bordered"
+                    value={formatDate(data.date_expense).format('DD-MM-yyyy')}
+                    readOnly={true}
+                />
+            </div>
+            <div className="form-control mb-2">
+                <label>Amount</label>
+                <input
+                    type="text"
+                    className="input input-bordered"
+                    name="amount"
+                    value={formatIDR(data.amount)}
+                    readOnly={true}
+                />
+            </div>
+
+            <div className="form-control mb-2">
+                <label>Tanggal</label>
+                <input
+                    className="input input-bordered"
+                    value={data.status}
+                    readOnly={true}
+                />
+            </div>
+
+            <div className="w-full flex justify-end space-x-1 items-center mt-2">
+                <button
+                    className="btn btn-secondary"
+                    onClick={handleClose}
+                    type="secondary"
+                >
+                    Close
+                </button>
+            </div>
+        </Modal>
+    )
+}
\ No newline at end of file
diff --git a/resources/js/Pages/Expense/Index.jsx b/resources/js/Pages/Expense/Index.jsx
index a93ff08..35087b0 100644
--- a/resources/js/Pages/Expense/Index.jsx
+++ b/resources/js/Pages/Expense/Index.jsx
@@ -12,6 +12,7 @@ import Pagination from '@/Components/Pagination';
 import Print from './Print';
 import ModalConfirm from '@/Components/ModalConfirm';
 import FormModal from './FormModal';
+import DetailModal from './DetailModal';
 import { DatePickerRangeInput } from '@/Components/DatePickerInput';
 import { useModalState } from '@/Hook';
 import { formatDate, formatIDR } from '@/Utils';
@@ -64,12 +65,11 @@ export default function Dashboard(props) {
         formModal.toggle()
     }
 
-    // TODO:
-    // add -> operator hanya expense, kasir expense/income
-    // edit -> menyesuaikan
-    // detail
-    // export
-    // 
+    const detailModal = useModalState()
+    const handleDetail = (expense) => {
+        detailModal.setData(expense)
+        detailModal.toggle()
+    }
 
     const handleCheckItem = (e) => {
         setItems(items.map(item => {
@@ -288,7 +288,7 @@ export default function Dashboard(props) {
                                                 ) : (
                                                     <>
                                                         <button
-                                                            onClick={() => {}}
+                                                            onClick={() => handleDetail(expense)}
                                                             className="btn btn-xs"
                                                         >
                                                             Detail
@@ -363,6 +363,9 @@ export default function Dashboard(props) {
             <FormModal
                 modalState={formModal}
             />
+            <DetailModal
+                modalState={detailModal}
+            />
         </AuthenticatedLayout>
     );
 }