diff --git a/app/Http/Controllers/PaymentsController.php b/app/Http/Controllers/PaymentsController.php
new file mode 100644
index 0000000..cd2cea9
--- /dev/null
+++ b/app/Http/Controllers/PaymentsController.php
@@ -0,0 +1,103 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Invoice;
+use Inertia\Inertia;
+use App\Payment;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Request;
+use Illuminate\Support\Facades\Redirect;
+
+class PaymentsController extends Controller
+{
+    public function index()
+    {
+        return Inertia::render('Payments/Index', [
+            'filters' => Request::all('search', 'trashed'),
+            'payments' => Payment::orderBy('id', 'desc')
+                ->filter(Request::only('search', 'trashed'))
+                ->paginate()
+                ->transform(function ($payment) {
+                    return [
+                        'id' => $payment->id,
+                        'description' => $payment->description,
+                        'amount' => $payment->amount,
+                        'invoice_id' => $payment->invoice_id,
+                        'invoice_date' => $payment->invoice->created_at->format('d F Y'),
+                        'created_at' => $payment->created_at->format('d F Y'),
+                        'deleted_at' => $payment->deleted_at,
+                    ];
+                }),
+                // ->only('id', 'room_id', 'renter_id', 'start_at', 'end_at', 'deleted_at')
+        ]);
+    }
+
+    public function create()
+    {
+        return Inertia::render('Payments/Create', [
+            'invoices' => Invoice::all(),
+        ]);
+    }
+
+    public function store()
+    {
+        Payment::create(
+            Request::validate([
+                'description' => ['required'],
+                'amount' => ['required', 'numeric'],
+                'invoice_id' => ['required', 'exists:invoices,id'],
+            ])
+        );
+
+        return Redirect::route('payments.index')->with('success', 'Data Pembayaran berhasil ditambahkan.');
+    }
+
+    public function edit(Payment $payment)
+    {
+        return Inertia::render('Payments/Edit', [
+            'payment' => [
+                'id' => $payment->id,
+                'description' => $payment->description,
+                'amount' => $payment->amount,
+                'invoice_id' => $payment->invoice_id,
+                'invoice' => $payment->invoice,
+                'created_at' => $payment->created_at->format('Y-m-d'),
+                'deleted_at' => $payment->deleted_at
+            ],
+            'invoices' => Invoice::all()->transform(function ($invoice) {
+                return [
+                    'id' => $invoice->id,
+                    'created_at' => $invoice->created_at->format('d F Y'),
+                ];
+            }),
+        ]);
+    }
+
+    public function update(Payment $payment)
+    {
+        $payment->update(
+            Request::validate([
+                'description' => ['required'],
+                'amount' => ['required', 'numeric'],
+                'invoice_id' => ['required', 'exists:invoices,id'],
+            ])
+        );
+
+        return Redirect::back()->with('success', 'Data Pembayaran berhasil diperbarui.');
+    }
+
+    public function destroy(Payment $payment)
+    {
+        $payment->delete();
+
+        return Redirect::back()->with('success', 'Data Pembayaran berhasil dihapus.');
+    }
+
+    public function restore(Payment $payment)
+    {
+        $payment->restore();
+
+        return Redirect::back()->with('success', 'Data Pembayaran berhasil dipulihkan.');
+    }
+}
diff --git a/app/Payment.php b/app/Payment.php
new file mode 100644
index 0000000..4b3a4dc
--- /dev/null
+++ b/app/Payment.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Payment extends Model
+{
+    use SoftDeletes;
+    
+    public function invoice()
+    {
+        return $this->belongsTo(Invoice::class);
+    }
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['search'] ?? null, function ($query, $search) {
+            $query->where('invoice_id', 'like', "%$search$");
+            $query->orWhere('description', 'like', "%$search$");
+            $query->orWhere('amount', 'like', "%$search$");
+        })->when($filters['trashed'] ?? null, function ($query, $trashed) {
+            if ($trashed === 'with') {
+                $query->withTrashed();
+            } elseif ($trashed === 'only') {
+                $query->onlyTrashed();
+            }
+        });
+    }
+}
diff --git a/database/migrations/2020_05_05_113952_create_payments_table.php b/database/migrations/2020_05_05_113952_create_payments_table.php
index c9b8553..39a6014 100644
--- a/database/migrations/2020_05_05_113952_create_payments_table.php
+++ b/database/migrations/2020_05_05_113952_create_payments_table.php
@@ -18,6 +18,7 @@ public function up()
             $table->foreignId('invoice_id')->constrained()->onDelete('cascade');
             $table->text('description');
             $table->integer('amount');
+            $table->softDeletes();
             $table->timestamps();
         });
     }
diff --git a/resources/js/Pages/Payments/Create.jsx b/resources/js/Pages/Payments/Create.jsx
new file mode 100644
index 0000000..704a9de
--- /dev/null
+++ b/resources/js/Pages/Payments/Create.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import Helmet from 'react-helmet';
+import { Inertia } from '@inertiajs/inertia';
+import { InertiaLink, usePage } from '@inertiajs/inertia-react';
+import Layout from '@/Shared/Layout';
+import LoadingButton from '@/Shared/LoadingButton';
+import TextInput from '@/Shared/TextInput';
+import SelectInput from '@/Shared/SelectInput';
+
+export default () => {
+  const { errors, invoices } = usePage();
+  const [sending, setSending] = useState(false);
+
+  const [values, setValues] = useState({
+    description: '',
+    amount: '',
+    invoice_id: ''
+  });
+
+  function handleChange(e) {
+    const key = e.target.name;
+    const value = e.target.value;
+    setValues(values => ({
+      ...values,
+      [key]: value
+    }));
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setSending(true);
+    Inertia.post(route('payments.store'), values).then(() => {
+      setSending(false);
+    });
+  }
+
+  return (
+    <Layout>
+      <Helmet title="Create Payment" />
+      <div>
+        <h1 className="mb-8 text-3xl font-bold">
+          <InertiaLink
+            href={route('payments.index')}
+            className="text-indigo-600 hover:text-indigo-700"
+          >
+            Pembayaran
+          </InertiaLink>
+          <span className="font-medium text-indigo-600"> /</span> Buat
+        </h1>
+        <div className="max-w-3xl overflow-hidden bg-white rounded shadow">
+          <form onSubmit={handleSubmit}>
+            <div className="flex flex-wrap p-8 -mb-8 -mr-6">
+              <TextInput
+                className="w-full pb-8 pr-6 lg:w-1/2"
+                label="Keterangan"
+                name="description"
+                errors={errors.description}
+                value={values.description}
+                onChange={handleChange}
+              />
+              <TextInput
+                className="w-full pb-8 pr-6 lg:w-1/2"
+                label="Jumlah"
+                name="amount"
+                type="number"
+                errors={errors.amount}
+                value={values.amount}
+                onChange={handleChange}
+              />
+              <SelectInput
+                className="w-full pb-8 pr-6 lg:w-1/2"
+                label="Penagihan"
+                name="invoice_id"
+                errors={errors.invoice_id}
+                value={values.invoice_id}
+                onChange={handleChange}
+              >
+                <option value="" disabled>Pilih Penagihan</option>
+                  {
+                    invoices.map((invoice) => (
+                      <option key={invoice.id} value={invoice.id}>{invoice.id} - {invoice.created_at}</option>
+                    ))
+                  }
+              </SelectInput>
+            </div>
+            <div className="flex items-center justify-end px-8 py-4 bg-gray-100 border-t border-gray-200">
+              <LoadingButton
+                loading={sending}
+                type="submit"
+                className="btn-indigo"
+              >
+                Tambah Pembayaran
+              </LoadingButton>
+            </div>
+          </form>
+        </div>
+      </div>
+    </Layout>
+  );
+};
diff --git a/resources/js/Pages/Payments/Edit.jsx b/resources/js/Pages/Payments/Edit.jsx
new file mode 100644
index 0000000..f67d854
--- /dev/null
+++ b/resources/js/Pages/Payments/Edit.jsx
@@ -0,0 +1,205 @@
+import React, { useState } from 'react';
+import Helmet from 'react-helmet';
+import { Inertia } from '@inertiajs/inertia';
+import { InertiaLink, usePage } from '@inertiajs/inertia-react';
+import Layout from '@/Shared/Layout';
+import DeleteButton from '@/Shared/DeleteButton';
+import LoadingButton from '@/Shared/LoadingButton';
+import TextInput from '@/Shared/TextInput';
+import SelectInput from '@/Shared/SelectInput';
+import TrashedMessage from '@/Shared/TrashedMessage';
+import Icon from '@/Shared/Icon';
+
+export default () => {
+  const { errors, payment, invoices } = usePage();
+  const [sending, setSending] = useState(false);
+
+  const [values, setValues] = useState({
+    description: payment.description || '',
+    amount: payment.amount || '',
+    invoice_id: payment.invoice_id || ''
+  });
+
+  function handleChange(e) {
+    const key = e.target.name;
+    const value = e.target.value;
+    setValues(values => ({
+      ...values,
+      [key]: value
+    }));
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setSending(true);
+    Inertia.put(
+      route('payments.update', payment.id),
+      values
+    ).then(() => setSending(false));
+  }
+
+  function destroy() {
+    if (confirm('Apa anda yakin ingin menghapus data pembayaran ini?')) {
+      Inertia.delete(route('payments.destroy', payment.id));
+    }
+  }
+
+  function restore() {
+    if (confirm('Apa anda yakin ingin memulihkan data pembayaran ini?')) {
+      Inertia.put(route('payments.restore', payment.id));
+    }
+  }
+
+  return (
+    <Layout>
+      <Helmet title={`Pembayaran Penagihan #${payment.id}`} />
+      <div>
+        <h1 className="mb-8 text-3xl font-bold">
+          <InertiaLink
+            href={route('payments.index')}
+            className="text-indigo-600 hover:text-indigo-700"
+          >
+            Pembayaran
+          </InertiaLink>
+          <span className="mx-2 font-medium text-indigo-600">/</span>
+          {`Penagihan #${payment.invoice_id}`}
+        </h1>
+        {payment.deleted_at && (
+          <TrashedMessage onRestore={restore}>
+            Data pembayaran ini telah dihapus.
+          </TrashedMessage>
+        )}
+        <div className="max-w-3xl overflow-hidden bg-white rounded shadow">
+          <form onSubmit={handleSubmit}>
+            <div className="flex flex-wrap p-8 -mb-8 -mr-6">
+            <TextInput
+                className="w-full pb-8 pr-6 lg:w-1/2"
+                label="Keterangan"
+                name="description"
+                errors={errors.description}
+                value={values.description}
+                onChange={handleChange}
+              />
+              <TextInput
+                className="w-full pb-8 pr-6 lg:w-1/2"
+                label="Jumlah"
+                name="amount"
+                type="number"
+                errors={errors.amount}
+                value={values.amount}
+                onChange={handleChange}
+              />
+              <SelectInput
+                className="w-full pb-8 pr-6 lg:w-1/2"
+                label="Penagihan"
+                name="invoice_id"
+                errors={errors.invoice_id}
+                value={values.invoice_id}
+                onChange={handleChange}
+              >
+              <option value="" disabled>Pilih Penagihan</option>
+                  {
+                    invoices.map((invoice) => (
+                      <option key={invoice.id} value={invoice.id}>{invoice.id} - {invoice.created_at}</option>
+                    ))
+                  }
+              </SelectInput>
+            </div>
+            <div className="flex items-center px-8 py-4 bg-gray-100 border-t border-gray-200">
+              {!payment.deleted_at && (
+                <DeleteButton onDelete={destroy}>
+                  Hapus Pembayaran
+                </DeleteButton>
+              )}
+              <LoadingButton
+                loading={sending}
+                type="submit"
+                className="ml-auto btn-indigo"
+              >
+                Perbarui Pembayaran
+              </LoadingButton>
+            </div>
+          </form>
+        </div>
+        {/* <h2 className="mt-12 text-2xl font-bold">Contacts</h2>
+        <div className="mt-6 overflow-x-auto bg-white rounded shadow">
+          <table className="w-full whitespace-no-wrap">
+            <thead>
+              <tr className="font-bold text-left">
+                <th className="px-6 pt-5 pb-4">Name</th>
+                <th className="px-6 pt-5 pb-4">City</th>
+                <th className="px-6 pt-5 pb-4" colSpan="2">
+                  Phone
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {payment.contacts.map(
+                ({ id, name, phone, city, deleted_at }) => {
+                  return (
+                    <tr
+                      key={id}
+                      className="hover:bg-gray-100 focus-within:bg-gray-100"
+                    >
+                      <td className="border-t">
+                        <InertiaLink
+                          href={route('contacts.edit', id)}
+                          className="flex items-center px-6 py-4 focus:text-indigo"
+                        >
+                          {name}
+                          {deleted_at && (
+                            <Icon
+                              name="trash"
+                              className="flex-shrink-0 w-3 h-3 ml-2 text-gray-400 fill-current"
+                            />
+                          )}
+                        </InertiaLink>
+                      </td>
+                      <td className="border-t">
+                        <InertiaLink
+                          tabIndex="-1"
+                          href={route('contacts.edit', id)}
+                          className="flex items-center px-6 py-4 focus:text-indigo"
+                        >
+                          {city}
+                        </InertiaLink>
+                      </td>
+                      <td className="border-t">
+                        <InertiaLink
+                          tabIndex="-1"
+                          href={route('contacts.edit', id)}
+                          className="flex items-center px-6 py-4 focus:text-indigo"
+                        >
+                          {phone}
+                        </InertiaLink>
+                      </td>
+                      <td className="w-px border-t">
+                        <InertiaLink
+                          tabIndex="-1"
+                          href={route('contacts.edit', id)}
+                          className="flex items-center px-4"
+                        >
+                          <Icon
+                            name="cheveron-right"
+                            className="block w-6 h-6 text-gray-400 fill-current"
+                          />
+                        </InertiaLink>
+                      </td>
+                    </tr>
+                  );
+                }
+              )}
+              {payment.contacts.length === 0 && (
+                <tr>
+                  <td className="px-6 py-4 border-t" colSpan="4">
+                    No contacts found.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div> */}
+      </div>
+    </Layout>
+  );
+};
diff --git a/resources/js/Pages/Payments/Index.jsx b/resources/js/Pages/Payments/Index.jsx
new file mode 100644
index 0000000..fb44803
--- /dev/null
+++ b/resources/js/Pages/Payments/Index.jsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import { InertiaLink, usePage } from '@inertiajs/inertia-react';
+import Layout from '@/Shared/Layout';
+import Icon from '@/Shared/Icon';
+import SearchFilter from '@/Shared/SearchFilter';
+import Pagination from '@/Shared/Pagination';
+
+const Payments = () => {
+  const { payments } = usePage();
+  const { links, data } = payments;
+  return (
+    <div>
+      <Helmet title="Payments" />
+      <div>
+        <h1 className="mb-8 text-3xl font-bold">Pembayaran</h1>
+        <div className="flex items-center justify-between mb-6">
+          <SearchFilter />
+          <InertiaLink
+            className="btn-indigo"
+            href={route('payments.create')}
+          >
+            <span>Tambah</span>
+            <span className="hidden md:inline"> Pembayaran</span>
+          </InertiaLink>
+        </div>
+        <div className="overflow-x-auto bg-white rounded shadow">
+          <table className="w-full whitespace-no-wrap">
+            <thead>
+              <tr className="font-bold text-left">
+                <th className="px-6 pt-5 pb-4">ID Invoice</th>
+                <th className="px-6 pt-5 pb-4">Keterangan</th>
+                <th className="px-6 pt-5 pb-4">Jumlah</th>
+                <th className="px-6 pt-5 pb-4">Tanggal penagihan</th>
+                <th className="px-6 pt-5 pb-4" colSpan="2">
+                  Tanggal pembayaran
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.map(({ id, description, amount, invoice_id, invoice_date, created_at, deleted_at }) => {
+                return (
+                  <tr
+                    key={id}
+                    className="hover:bg-gray-100 focus-within:bg-gray-100"
+                  >
+                    <td className="border-t">
+                      <InertiaLink
+                        href={route('payments.edit', id)}
+                        className="flex items-center px-6 py-4 focus:text-indigo-700"
+                      >
+                        {invoice_id}
+                        {deleted_at && (
+                          <Icon
+                            name="trash"
+                            className="flex-shrink-0 w-3 h-3 ml-2 text-gray-400 fill-current"
+                          />
+                        )}
+                      </InertiaLink>
+                    </td>
+                    <td className="border-t">
+                      <InertiaLink
+                        tabIndex="-1"
+                        href={route('payments.edit', id)}
+                        className="flex items-center px-6 py-4 focus:text-indigo"
+                      >
+                        {description}
+                      </InertiaLink>
+                    </td>
+                    <td className="border-t">
+                      <InertiaLink
+                        tabIndex="-1"
+                        href={route('payments.edit', id)}
+                        className="flex items-center px-6 py-4 focus:text-indigo"
+                      >
+                        {amount}
+                      </InertiaLink>
+                    </td>
+                    <td className="border-t">
+                      <InertiaLink
+                        tabIndex="-1"
+                        href={route('payments.edit', id)}
+                        className="flex items-center px-6 py-4 focus:text-indigo"
+                      >
+                        {invoice_date}
+                      </InertiaLink>
+                    </td>
+                    <td className="border-t">
+                      <InertiaLink
+                        tabIndex="-1"
+                        href={route('payments.edit', id)}
+                        className="flex items-center px-6 py-4 focus:text-indigo"
+                      >
+                        {created_at}
+                      </InertiaLink>
+                    </td>
+                    <td className="w-px border-t">
+                      <InertiaLink
+                        tabIndex="-1"
+                        href={route('payments.edit', id)}
+                        className="flex items-center px-4"
+                      >
+                        <Icon
+                          name="cheveron-right"
+                          className="block w-6 h-6 text-gray-400 fill-current"
+                        />
+                      </InertiaLink>
+                    </td>
+                  </tr>
+                );
+              })}
+              {data.length === 0 && (
+                <tr>
+                  <td className="px-6 py-4 border-t" colSpan="4">
+                    No payments found.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+        <Pagination links={links} />
+      </div>
+    </div>
+  );
+};
+
+// Persisten layout
+// Docs: https://inertiajs.com/pages#persistent-layouts
+Payments.layout = page => <Layout children={page} />;
+
+export default Payments;
diff --git a/resources/js/Shared/MainMenu.jsx b/resources/js/Shared/MainMenu.jsx
index b2110e5..fd7fe51 100644
--- a/resources/js/Shared/MainMenu.jsx
+++ b/resources/js/Shared/MainMenu.jsx
@@ -10,7 +10,7 @@ export default ({ className }) => {
       <MainMenuItem text="Penginapan" link="lodgings.index" icon="office" />
       <MainMenuItem text="Tagihan" link="bills.index" icon="office" />
       <MainMenuItem text="Penagihan" link="invoices.index" icon="office" />
-      
+      <MainMenuItem text="Pembayaran" link="payments.index" icon="office" />
     </div>
   );
 };
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index f6d9b60..48e4097 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -83,6 +83,17 @@
         Route::delete('{lodging}', 'LodgingsController@destroy')->name('destroy');
         Route::put('{lodging}/restore', 'LodgingsController@restore')->name('restore');
     });
+        
+    // Payments
+    Route::prefix('payments')->name('payments.')->group(function () {
+        Route::get('/', 'PaymentsController@index')->name('index')->middleware('remember');
+        Route::get('create', 'PaymentsController@create')->name('create');
+        Route::post('/', 'PaymentsController@store')->name('store');
+        Route::get('{payment}/edit', 'PaymentsController@edit')->name('edit');
+        Route::put('{payment}', 'PaymentsController@update')->name('update');
+        Route::delete('{payment}', 'PaymentsController@destroy')->name('destroy');
+        Route::put('{payment}/restore', 'PaymentsController@restore')->name('restore');
+    });
 });