diff --git a/Modules/Sale/Database/Migrations/2021_08_07_192203_create_sale_payments_table.php b/Modules/Sale/Database/Migrations/2021_08_07_192203_create_sale_payments_table.php
new file mode 100644
index 00000000..6323eef7
--- /dev/null
+++ b/Modules/Sale/Database/Migrations/2021_08_07_192203_create_sale_payments_table.php
@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateSalePaymentsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('sale_payments', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('sale_id');
+            $table->integer('amount');
+            $table->date('date');
+            $table->string('reference');
+            $table->string('payment_method');
+            $table->text('note')->nullable();
+            $table->foreign('sale_id')->references('id')->on('sale_payments')->cascadeOnDelete();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('sale_payments');
+    }
+}
diff --git a/Modules/Sale/Entities/Sale.php b/Modules/Sale/Entities/Sale.php
index b07f364b..35f1cd04 100644
--- a/Modules/Sale/Entities/Sale.php
+++ b/Modules/Sale/Entities/Sale.php
@@ -15,6 +15,10 @@ class Sale extends Model
         return $this->hasMany(SaleDetails::class, 'sale_id', 'id');
     }
 
+    public function salePayments() {
+        return $this->hasMany(SalePayment::class, 'sale_id', 'id');
+    }
+
     public function getReferenceAttribute($value) {
         return strtoupper($value) . '_' . str_pad($this->attributes['id'], 6, '0', STR_PAD_LEFT);
     }
diff --git a/Modules/Sale/Entities/SalePayment.php b/Modules/Sale/Entities/SalePayment.php
new file mode 100644
index 00000000..6f11956b
--- /dev/null
+++ b/Modules/Sale/Entities/SalePayment.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Modules\Sale\Entities;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Support\Carbon;
+
+class SalePayment extends Model
+{
+
+    use HasFactory;
+
+    protected $guarded = [];
+
+    public function sale() {
+        return $this->belongsTo(Sale::class, 'sale_id', 'id');
+    }
+
+    public function setAmountAttribute($value) {
+        $this->attributes['amount'] = $value * 100;
+    }
+
+    public function getAmountAttribute($value) {
+        return $value / 100;
+    }
+
+    public function getDateAttribute($value) {
+        return Carbon::parse($value)->format('d M, Y');
+    }
+
+    public function scopeBySale($query) {
+        return $query->where('sale_id', request()->route('sale_id'));
+    }
+}
diff --git a/Modules/Sale/Http/Controllers/SaleController.php b/Modules/Sale/Http/Controllers/SaleController.php
index bf469992..03f97235 100644
--- a/Modules/Sale/Http/Controllers/SaleController.php
+++ b/Modules/Sale/Http/Controllers/SaleController.php
@@ -13,6 +13,7 @@ use Modules\People\Entities\Customer;
 use Modules\Product\Entities\Product;
 use Modules\Sale\Entities\Sale;
 use Modules\Sale\Entities\SaleDetails;
+use Modules\Sale\Entities\SalePayment;
 use Modules\Sale\Http\Requests\StoreSaleRequest;
 use Modules\Sale\Http\Requests\UpdateSaleRequest;
 
@@ -89,6 +90,14 @@ class SaleController extends Controller
             }
 
             Cart::instance('sale')->destroy();
+
+            SalePayment::create([
+                'date' => $request->date,
+                'reference' => 'INV/'.$sale->reference,
+                'amount' => $sale->paid_amount,
+                'sale_id' => $sale->id,
+                'payment_method' => $request->payment_method
+            ]);
         });
 
         toast('Sale Created!', 'success');
diff --git a/Modules/Sale/Http/Controllers/SalePaymentsController.php b/Modules/Sale/Http/Controllers/SalePaymentsController.php
new file mode 100644
index 00000000..bce4dc27
--- /dev/null
+++ b/Modules/Sale/Http/Controllers/SalePaymentsController.php
@@ -0,0 +1,146 @@
+<?php
+
+namespace Modules\Sale\Http\Controllers;
+
+use App\DataTables\SalePaymentsDataTable;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Gate;
+use Modules\Sale\Entities\Sale;
+use Modules\Sale\Entities\SalePayment;
+
+class SalePaymentsController extends Controller
+{
+
+    public function index($sale_id, SalePaymentsDataTable $dataTable) {
+        abort_if(Gate::denies('access_sale_payments'), 403);
+
+        $sale = Sale::findOrFail($sale_id);
+
+        return $dataTable->render('sale::payments.index', compact('sale'));
+    }
+
+
+    public function create($sale_id) {
+        abort_if(Gate::denies('access_sale_payments'), 403);
+
+        $sale = Sale::findOrFail($sale_id);
+
+        return view('sale::payments.create', compact('sale'));
+    }
+
+
+    public function store(Request $request) {
+        abort_if(Gate::denies('access_sale_payments'), 403);
+
+        $request->validate([
+            'date' => 'required|date',
+            'reference' => 'required|string|max:255',
+            'amount' => 'required|numeric',
+            'note' => 'nullable|string|max:1000',
+            'sale_id' => 'required',
+            'payment_method' => 'required|string|max:255'
+        ]);
+
+        DB::transaction(function () use ($request) {
+            SalePayment::create([
+                'date' => $request->date,
+                'reference' => $request->reference,
+                'amount' => $request->amount,
+                'note' => $request->note,
+                'sale_id' => $request->sale_id,
+                'payment_method' => $request->payment_method
+            ]);
+
+            $sale = Sale::findOrFail($request->sale_id);
+
+            $due_amount = $sale->due_amount - $request->amount;
+            if ($due_amount == $sale->total_amount) {
+                $payment_status = 'Unpaid';
+            } elseif ($due_amount > 0) {
+                $payment_status = 'Partial';
+            } else {
+                $payment_status = 'Paid';
+            }
+
+            $sale->update([
+                'paid_amount' => ($sale->paid_amount + $request->amount) * 100,
+                'due_amount' => $due_amount * 100,
+                'payment_status' => $payment_status
+            ]);
+        });
+
+        toast('Sale Payment Created!', 'success');
+
+        return redirect()->route('sales.index');
+    }
+
+
+    public function edit($sale_id, SalePayment $salePayment) {
+        abort_if(Gate::denies('access_sale_payments'), 403);
+
+        $sale = Sale::findOrFail($sale_id);
+
+        return view('sale::payments.edit', compact('salePayment', 'sale'));
+    }
+
+
+    public function update(Request $request, SalePayment $salePayment) {
+        abort_if(Gate::denies('access_sale_payments'), 403);
+
+        $request->validate([
+            'date' => 'required|date',
+            'reference' => 'required|string|max:255',
+            'amount' => 'required|numeric',
+            'note' => 'nullable|string|max:1000',
+            'sale_id' => 'required',
+            'payment_method' => 'required|string|max:255'
+        ]);
+
+        DB::transaction(function () use ($request, $salePayment) {
+            $sale = $salePayment->sale;
+
+            $due_amount = ($sale->due_amount + $salePayment->amount) - $request->amount;
+
+            if ($due_amount == $sale->total_amount) {
+                $payment_status = 'Unpaid';
+            } elseif ($due_amount > 0) {
+                $payment_status = 'Partial';
+            } else {
+                $payment_status = 'Paid';
+            }
+
+            $sale->update([
+                'paid_amount' => (($sale->paid_amount - $salePayment->amount) + $request->amount) * 100,
+                'due_amount' => $due_amount * 100,
+                'payment_status' => $payment_status
+            ]);
+
+            $salePayment->update([
+                'date' => $request->date,
+                'reference' => $request->reference,
+                'amount' => $request->amount,
+                'note' => $request->note,
+                'sale_id' => $request->sale_id,
+                'payment_method' => $request->payment_method
+            ]);
+        });
+
+        toast('Sale Payment Updated!', 'info');
+
+        return redirect()->route('sales.index');
+    }
+
+
+    public function destroy(SalePayment $salePayment) {
+        abort_if(Gate::denies('access_sale_payments'), 403);
+
+        $salePayment->delete();
+
+        toast('Sale Payment Deleted!', 'warning');
+
+        return redirect()->route('sales.index');
+    }
+}
diff --git a/Modules/Sale/Resources/views/edit.blade.php b/Modules/Sale/Resources/views/edit.blade.php
index 931b8ed0..f8373f28 100644
--- a/Modules/Sale/Resources/views/edit.blade.php
+++ b/Modules/Sale/Resources/views/edit.blade.php
@@ -30,7 +30,7 @@
                                 <div class="col-lg-4">
                                     <div class="form-group">
                                         <label for="reference">Reference <span class="text-danger">*</span></label>
-                                        <input type="text" class="form-control" name="reference" required value="{{ $sale->reference }}" readonly   >
+                                        <input type="text" class="form-control" name="reference" required value="SL" readonly>
                                     </div>
                                 </div>
                                 <div class="col-lg-4">
@@ -72,27 +72,14 @@
                                     <div class="from-group">
                                         <div class="form-group">
                                             <label for="payment_method">Payment Method <span class="text-danger">*</span></label>
-                                            <select class="form-control" name="payment_method" id="payment_method" required>
-                                                <option {{ $sale->payment_method == 'Cash' ? 'selected' : '' }} value="Cash">Cash</option>
-                                                <option {{ $sale->payment_method == 'Credit Card' ? 'selected' : '' }} value="Credit Card">Credit Card</option>
-                                                <option {{ $sale->payment_method == 'Bank Transfer' ? 'selected' : '' }} value="Bank Transfer">Bank Transfer</option>
-                                                <option {{ $sale->payment_method == 'Cheque' ? 'selected' : '' }} value="Cheque">Cheque</option>
-                                                <option {{ $sale->payment_method == 'Other' ? 'selected' : '' }} value="Other">Other</option>
-                                            </select>
+                                            <input type="text" class="form-control" name="payment_method" required value="{{ $sale->payment_method }}" readonly>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="col-lg-4">
                                     <div class="form-group">
                                         <label for="paid_amount">Amount Received <span class="text-danger">*</span></label>
-                                        <div class="input-group">
-                                            <input id="paid_amount" type="text" class="form-control" name="paid_amount" required value="{{ $sale->paid_amount }}">
-                                            <div class="input-group-append">
-                                                <button id="getTotalAmount" class="btn btn-primary" type="button">
-                                                    <i class="bi bi-check-square"></i>
-                                                </button>
-                                            </div>
-                                        </div>
+                                        <input id="paid_amount" type="text" class="form-control" name="paid_amount" required value="{{ $sale->paid_amount }}" readonly>
                                     </div>
                                 </div>
                             </div>
@@ -128,10 +115,6 @@
 
             $('#paid_amount').maskMoney('mask');
 
-            $('#getTotalAmount').click(function () {
-                $('#paid_amount').maskMoney('mask', {{ \Gloudemans\Shoppingcart\Facades\Cart::instance('sale')->total() }});
-            });
-
             $('#sale-form').submit(function () {
                 var paid_amount = $('#paid_amount').maskMoney('unmasked')[0];
                 $('#paid_amount').val(paid_amount);
diff --git a/Modules/Sale/Resources/views/partials/actions.blade.php b/Modules/Sale/Resources/views/partials/actions.blade.php
index f45d03f9..71650fc8 100644
--- a/Modules/Sale/Resources/views/partials/actions.blade.php
+++ b/Modules/Sale/Resources/views/partials/actions.blade.php
@@ -1,8 +1,20 @@
 <div class="btn-group dropleft">
-    <button type="button" class="btn btn-outline-primary dropdown rounded" data-toggle="dropdown" aria-expanded="false">
-        <i class="bi bi-wrench"></i>
+    <button type="button" class="btn btn-ghost-primary dropdown rounded" data-toggle="dropdown" aria-expanded="false">
+        <i class="bi bi-three-dots-vertical"></i>
     </button>
     <div class="dropdown-menu">
+        @can('access_sale_payments')
+            <a href="{{ route('sale-payments.index', $data->id) }}" class="dropdown-item">
+                <i class="bi bi-cash-coin mr-2 text-warning" style="line-height: 1;"></i> Show Payments
+            </a>
+        @endcan
+        @can('access_sale_payments')
+            @if($data->due_amount > 0)
+            <a href="{{ route('sale-payments.create', $data->id) }}" class="dropdown-item">
+                <i class="bi bi-plus-circle-dotted mr-2 text-success" style="line-height: 1;"></i> Add Payment
+            </a>
+            @endif
+        @endcan
         @can('edit_sales')
             <a href="{{ route('sales.edit', $data->id) }}" class="dropdown-item">
                 <i class="bi bi-pencil mr-2 text-primary" style="line-height: 1;"></i> Edit
diff --git a/Modules/Sale/Resources/views/partials/payment-status.blade.php b/Modules/Sale/Resources/views/partials/payment-status.blade.php
index c3c938be..7ac6bf4c 100644
--- a/Modules/Sale/Resources/views/partials/payment-status.blade.php
+++ b/Modules/Sale/Resources/views/partials/payment-status.blade.php
@@ -1,5 +1,5 @@
 @if ($data->payment_status == 'Partial')
-    <span class="badge badge-info">
+    <span class="badge badge-warning">
         {{ $data->payment_status }}
     </span>
 @elseif ($data->payment_status == 'Paid')
diff --git a/Modules/Sale/Resources/views/payments/create.blade.php b/Modules/Sale/Resources/views/payments/create.blade.php
new file mode 100644
index 00000000..656e0fbc
--- /dev/null
+++ b/Modules/Sale/Resources/views/payments/create.blade.php
@@ -0,0 +1,114 @@
+@extends('layouts.app')
+
+@section('title', 'Create Payment')
+
+@section('breadcrumb')
+    <ol class="breadcrumb border-0 m-0">
+        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
+        <li class="breadcrumb-item"><a href="{{ route('sales.index') }}">Sales</a></li>
+        <li class="breadcrumb-item"><a href="{{ route('sales.show', $sale) }}">{{ $sale->reference }}</a></li>
+        <li class="breadcrumb-item active">Add Payment</li>
+    </ol>
+@endsection
+
+@section('content')
+    <div class="container-fluid">
+        <form id="payment-form" action="{{ route('sale-payments.store') }}" method="POST">
+            @csrf
+            <div class="row">
+                <div class="col-lg-12">
+                    @include('utils.alerts')
+                    <div class="form-group">
+                        <button class="btn btn-primary">Create Payment <i class="bi bi-check"></i></button>
+                    </div>
+                </div>
+                <div class="col-lg-12">
+                    <div class="card">
+                        <div class="card-body">
+                            <div class="form-row">
+                                <div class="col-lg-6">
+                                    <div class="form-group">
+                                        <label for="reference">Reference <span class="text-danger">*</span></label>
+                                        <input type="text" class="form-control" name="reference" required readonly value="INV/{{ $sale->reference }}">
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <div class="form-group">
+                                        <label for="date">Date <span class="text-danger">*</span></label>
+                                        <input type="date" class="form-control" name="date" required value="{{ now()->format('Y-m-d') }}">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-row">
+                                <div class="col-lg-4">
+                                    <div class="form-group">
+                                        <label for="due_amount">Due Amount <span class="text-danger">*</span></label>
+                                        <input type="text" class="form-control" name="due_amount" required value="{{ format_currency($sale->due_amount) }}" readonly>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <div class="form-group">
+                                        <label for="amount">Amount <span class="text-danger">*</span></label>
+                                        <div class="input-group">
+                                            <input id="amount" type="text" class="form-control" name="amount" required value="{{ old('amount') }}">
+                                            <div class="input-group-append">
+                                                <button id="getTotalAmount" class="btn btn-primary" type="button">
+                                                    <i class="bi bi-check-square"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <div class="from-group">
+                                        <div class="form-group">
+                                            <label for="payment_method">Payment Method <span class="text-danger">*</span></label>
+                                            <select class="form-control" name="payment_method" id="payment_method" required>
+                                                <option value="Cash">Cash</option>
+                                                <option value="Credit Card">Credit Card</option>
+                                                <option value="Bank Transfer">Bank Transfer</option>
+                                                <option value="Cheque">Cheque</option>
+                                                <option value="Other">Other</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label for="note">Note</label>
+                                <textarea class="form-control" rows="4" name="note">{{ old('note') }}</textarea>
+                            </div>
+
+                            <input type="hidden" value="{{ $sale->id }}" name="sale_id">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+@endsection
+
+@push('page_scripts')
+    <script src="{{ asset('js/jquery-mask-money.js') }}"></script>
+    <script>
+        $(document).ready(function () {
+            $('#amount').maskMoney({
+                prefix:'{{ settings()->currency->symbol }}',
+                thousands:'{{ settings()->currency->thousand_separator }}',
+                decimal:'{{ settings()->currency->decimal_separator }}',
+            });
+
+            $('#getTotalAmount').click(function () {
+                $('#amount').maskMoney('mask', {{ $sale->due_amount }});
+            });
+
+            $('#payment-form').submit(function () {
+                var amount = $('#amount').maskMoney('unmasked')[0];
+                $('#amount').val(amount);
+            });
+        });
+    </script>
+@endpush
+
diff --git a/Modules/Sale/Resources/views/payments/edit.blade.php b/Modules/Sale/Resources/views/payments/edit.blade.php
new file mode 100644
index 00000000..11730989
--- /dev/null
+++ b/Modules/Sale/Resources/views/payments/edit.blade.php
@@ -0,0 +1,117 @@
+@extends('layouts.app')
+
+@section('title', 'Edit Payment')
+
+@section('breadcrumb')
+    <ol class="breadcrumb border-0 m-0">
+        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
+        <li class="breadcrumb-item"><a href="{{ route('sales.index') }}">Sales</a></li>
+        <li class="breadcrumb-item"><a href="{{ route('sales.show', $sale) }}">{{ $sale->reference }}</a></li>
+        <li class="breadcrumb-item active">Edit Payment</li>
+    </ol>
+@endsection
+
+@section('content')
+    <div class="container-fluid">
+        <form id="payment-form" action="{{ route('sale-payments.update', $salePayment) }}" method="POST">
+            @csrf
+            @method('patch')
+            <div class="row">
+                <div class="col-lg-12">
+                    @include('utils.alerts')
+                    <div class="form-group">
+                        <button class="btn btn-primary">Update Payment <i class="bi bi-check"></i></button>
+                    </div>
+                </div>
+                <div class="col-lg-12">
+                    <div class="card">
+                        <div class="card-body">
+                            <div class="form-row">
+                                <div class="col-lg-6">
+                                    <div class="form-group">
+                                        <label for="reference">Reference <span class="text-danger">*</span></label>
+                                        <input type="text" class="form-control" name="reference" required readonly value="{{ $salePayment->reference }}">
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <div class="form-group">
+                                        <label for="date">Date <span class="text-danger">*</span></label>
+                                        <input type="date" class="form-control" name="date" required value="{{ $salePayment->getAttributes()['date'] }}">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-row">
+                                <div class="col-lg-4">
+                                    <div class="form-group">
+                                        <label for="due_amount">Due Amount <span class="text-danger">*</span></label>
+                                        <input type="text" class="form-control" name="due_amount" required value="{{ format_currency($sale->due_amount) }}" readonly>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <div class="form-group">
+                                        <label for="amount">Amount <span class="text-danger">*</span></label>
+                                        <div class="input-group">
+                                            <input id="amount" type="text" class="form-control" name="amount" required value="{{ old('amount') ?? $salePayment->amount }}">
+                                            <div class="input-group-append">
+                                                <button id="getTotalAmount" class="btn btn-primary" type="button">
+                                                    <i class="bi bi-check-square"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <div class="from-group">
+                                        <div class="form-group">
+                                            <label for="payment_method">Payment Method <span class="text-danger">*</span></label>
+                                            <select class="form-control" name="payment_method" id="payment_method" required>
+                                                <option {{ $salePayment->payment_method == 'Cash' ? 'selected' : '' }} value="Cash">Cash</option>
+                                                <option {{ $salePayment->payment_method == 'Credit Card' ? 'selected' : '' }} value="Credit Card">Credit Card</option>
+                                                <option {{ $salePayment->payment_method == 'Bank Transfer' ? 'selected' : '' }} value="Bank Transfer">Bank Transfer</option>
+                                                <option {{ $salePayment->payment_method == 'Cheque' ? 'selected' : '' }} value="Cheque">Cheque</option>
+                                                <option {{ $salePayment->payment_method == 'Other' ? 'selected' : '' }} value="Other">Other</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label for="note">Note</label>
+                                <textarea class="form-control" rows="4" name="note">{{ old('note') ?? $salePayment->note }}</textarea>
+                            </div>
+
+                            <input type="hidden" value="{{ $sale->id }}" name="sale_id">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+@endsection
+
+@push('page_scripts')
+    <script src="{{ asset('js/jquery-mask-money.js') }}"></script>
+    <script>
+        $(document).ready(function () {
+            $('#amount').maskMoney({
+                prefix:'{{ settings()->currency->symbol }}',
+                thousands:'{{ settings()->currency->thousand_separator }}',
+                decimal:'{{ settings()->currency->decimal_separator }}',
+            });
+
+            $('#amount').maskMoney('mask');
+
+            $('#getTotalAmount').click(function () {
+                $('#amount').maskMoney('mask', {{ $sale->due_amount }});
+            });
+
+            $('#payment-form').submit(function () {
+                var amount = $('#amount').maskMoney('unmasked')[0];
+                $('#amount').val(amount);
+            });
+        });
+    </script>
+@endpush
+
diff --git a/Modules/Sale/Resources/views/payments/index.blade.php b/Modules/Sale/Resources/views/payments/index.blade.php
new file mode 100644
index 00000000..edc7e055
--- /dev/null
+++ b/Modules/Sale/Resources/views/payments/index.blade.php
@@ -0,0 +1,37 @@
+@extends('layouts.app')
+
+@section('title', 'Payments')
+
+@section('third_party_stylesheets')
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
+@endsection
+
+@section('breadcrumb')
+    <ol class="breadcrumb border-0 m-0">
+        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
+        <li class="breadcrumb-item"><a href="{{ route('sales.index') }}">Sales</a></li>
+        <li class="breadcrumb-item"><a href="{{ route('sales.show', $sale) }}">{{ $sale->reference }}</a></li>
+        <li class="breadcrumb-item active">Payments</li>
+    </ol>
+@endsection
+
+@section('content')
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-12">
+                @include('utils.alerts')
+                <div class="card">
+                    <div class="card-body">
+                        <div class="table-responsive">
+                            {!! $dataTable->table() !!}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('page_scripts')
+    {!! $dataTable->scripts() !!}
+@endpush
diff --git a/Modules/Sale/Resources/views/payments/partials/actions.blade.php b/Modules/Sale/Resources/views/payments/partials/actions.blade.php
new file mode 100644
index 00000000..f35db917
--- /dev/null
+++ b/Modules/Sale/Resources/views/payments/partials/actions.blade.php
@@ -0,0 +1,19 @@
+@can('access_sale_payments')
+    <a href="{{ route('sale-payments.edit', [$data->sale->id, $data->id]) }}" class="btn btn-info btn-sm">
+        <i class="bi bi-pencil"></i>
+    </a>
+@endcan
+@can('access_sale_payments')
+    <button id="delete" class="btn btn-danger btn-sm" onclick="
+        event.preventDefault();
+        if (confirm('Are you sure? It will delete the data permanently!')) {
+        document.getElementById('destroy{{ $data->id }}').submit()
+        }
+        ">
+        <i class="bi bi-trash"></i>
+        <form id="destroy{{ $data->id }}" class="d-none" action="{{ route('sale-payments.destroy', $data->id) }}" method="POST">
+            @csrf
+            @method('delete')
+        </form>
+    </button>
+@endcan
diff --git a/Modules/Sale/Resources/views/print.blade.php b/Modules/Sale/Resources/views/print.blade.php
index 0e4bc463..705ea86f 100644
--- a/Modules/Sale/Resources/views/print.blade.php
+++ b/Modules/Sale/Resources/views/print.blade.php
@@ -39,7 +39,7 @@
 
                         <div class="col-xs-4 mb-3 mb-md-0">
                             <h4 class="mb-2" style="border-bottom: 1px solid #dddddd;padding-bottom: 10px;">Invoice Info:</h4>
-                            <div>Invoice: <strong>#90-98792</strong></div>
+                            <div>Invoice: <strong>INV/{{ $sale->reference }}</strong></div>
                             <div>Date: {{ \Carbon\Carbon::parse($sale->date)->format('d M, Y') }}</div>
                             <div>
                                 Status: <strong>{{ $sale->status }}</strong>
diff --git a/Modules/Sale/Resources/views/show.blade.php b/Modules/Sale/Resources/views/show.blade.php
index a17bcf0c..7feb63f4 100644
--- a/Modules/Sale/Resources/views/show.blade.php
+++ b/Modules/Sale/Resources/views/show.blade.php
@@ -46,7 +46,7 @@
 
                             <div class="col-sm-4 mb-3 mb-md-0">
                                 <h5 class="mb-2 border-bottom pb-2">Invoice Info:</h5>
-                                <div>Invoice: <strong>#90-98792</strong></div>
+                                <div>Invoice: <strong>INV/{{ $sale->reference }}</strong></div>
                                 <div>Date: {{ \Carbon\Carbon::parse($sale->date)->format('d M, Y') }}</div>
                                 <div>
                                     Status: <strong>{{ $sale->status }}</strong>
diff --git a/Modules/Sale/Routes/web.php b/Modules/Sale/Routes/web.php
index 2ef7a016..a89c9014 100644
--- a/Modules/Sale/Routes/web.php
+++ b/Modules/Sale/Routes/web.php
@@ -13,6 +13,7 @@
 
 Route::group(['middleware' => 'auth'], function () {
 
+    //Generate PDF
     Route::get('/sales/pdf/{id}', function ($id) {
         $sale = \Modules\Sale\Entities\Sale::findOrFail($id);
         $customer = \Modules\People\Entities\Customer::findOrFail($sale->customer_id);
@@ -25,6 +26,14 @@ Route::group(['middleware' => 'auth'], function () {
         return $pdf->stream('sale-'. $sale->reference .'.pdf');
     })->name('sales.pdf');
 
+    //Sales
     Route::resource('sales', 'SaleController');
 
+    //Payments
+    Route::get('/sale-payments/{sale_id}', 'SalePaymentsController@index')->name('sale-payments.index');
+    Route::get('/sale-payments/{sale_id}/create', 'SalePaymentsController@create')->name('sale-payments.create');
+    Route::post('/sale-payments/store', 'SalePaymentsController@store')->name('sale-payments.store');
+    Route::get('/sale-payments/{sale_id}/edit/{salePayment}', 'SalePaymentsController@edit')->name('sale-payments.edit');
+    Route::patch('/sale-payments/update/{salePayment}', 'SalePaymentsController@update')->name('sale-payments.update');
+    Route::delete('/sale-payments/destroy/{salePayment}', 'SalePaymentsController@destroy')->name('sale-payments.destroy');
 });
diff --git a/app/DataTables/SalePaymentsDataTable.php b/app/DataTables/SalePaymentsDataTable.php
new file mode 100644
index 00000000..2fba4367
--- /dev/null
+++ b/app/DataTables/SalePaymentsDataTable.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace App\DataTables;
+
+use Modules\Sale\Entities\SalePayment;
+use Yajra\DataTables\Html\Button;
+use Yajra\DataTables\Html\Column;
+use Yajra\DataTables\Html\Editor\Editor;
+use Yajra\DataTables\Html\Editor\Fields;
+use Yajra\DataTables\Services\DataTable;
+
+class SalePaymentsDataTable extends DataTable
+{
+
+    public function dataTable($query) {
+        return datatables()
+            ->eloquent($query)
+            ->addColumn('amount', function ($data) {
+                return format_currency($data->amount);
+            })
+            ->addColumn('action', function ($data) {
+                return view('sale::payments.partials.actions', compact('data'));
+            });
+    }
+
+    public function query(SalePayment $model) {
+        return $model->newQuery()->bySale()->with('sale');
+    }
+
+    public function html() {
+        return $this->builder()
+            ->setTableId('sale-payments-table')
+            ->columns($this->getColumns())
+            ->minifiedAjax()
+            ->dom("<'row'<'col-md-3'l><'col-md-5 mb-2'B><'col-md-4'f>> .
+                                'tr' .
+                                <'row'<'col-md-5'i><'col-md-7 mt-2'p>>")
+            ->orderBy(5)
+            ->buttons(
+                Button::make('excel')
+                    ->text('<i class="bi bi-file-earmark-excel-fill"></i> Excel'),
+                Button::make('print')
+                    ->text('<i class="bi bi-printer-fill"></i> Print'),
+                Button::make('reset')
+                    ->text('<i class="bi bi-x-circle"></i> Reset'),
+                Button::make('reload')
+                    ->text('<i class="bi bi-arrow-repeat"></i> Reload')
+            );
+    }
+
+    /**
+     * Get columns.
+     *
+     * @return array
+     */
+    protected function getColumns() {
+        return [
+            Column::make('date')
+                ->className('align-middle text-center'),
+
+            Column::make('reference')
+                ->className('align-middle text-center'),
+
+            Column::computed('amount')
+                ->className('align-middle text-center'),
+
+            Column::make('payment_method')
+                ->className('align-middle text-center'),
+
+            Column::computed('action')
+                ->exportable(false)
+                ->printable(false)
+                ->className('align-middle text-center'),
+
+            Column::make('created_at')
+                ->visible(false),
+        ];
+    }
+
+    protected function filename() {
+        return 'SalePayments_' . date('YmdHis');
+    }
+}
diff --git a/resources/views/layouts/menu.blade.php b/resources/views/layouts/menu.blade.php
index 23932372..4e0614d9 100644
--- a/resources/views/layouts/menu.blade.php
+++ b/resources/views/layouts/menu.blade.php
@@ -63,7 +63,7 @@
 @endcan
 
 @can('access_sales')
-    <li class="c-sidebar-nav-item c-sidebar-nav-dropdown {{ request()->routeIs('sales*') ? 'c-show' : '' }}">
+    <li class="c-sidebar-nav-item c-sidebar-nav-dropdown {{ request()->routeIs('sales*') || request()->routeIs('sale-payments*') ? 'c-show' : '' }}">
         <a class="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle" href="#">
             <i class="c-sidebar-nav-icon bi bi-receipt" style="line-height: 1;"></i> Sales
         </a>