diff --git a/app/Http/Controllers/Kasir/Menu.php b/app/Http/Controllers/Kasir/Menu.php
new file mode 100644
index 0000000..182d3ab
--- /dev/null
+++ b/app/Http/Controllers/Kasir/Menu.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Http\Controllers\Kasir;
+
+use App\Http\Controllers\Controller;
+use App\Models\Pesanan;
+use App\Models\Produk;
+use Illuminate\Http\Request;
+
+class Menu extends Controller
+{
+    public function index()
+    {
+        return view('pages.menu.index');
+    }
+
+    public function getDataMenu()
+    {
+        $data = Produk::with(['kategori_produk'])->get();
+        $nomor = 1;
+
+        return $datatables = datatables()
+            ->of($data)
+            ->addColumn('nomor', function ($data) use (&$nomor) {
+                return $nomor++;
+            })
+            ->addColumn('kategori_produk', function ($data) {
+                return $data->kategori_produk->nama_kategori_produk;
+            })
+            ->addColumn('ubah', function ($data) {
+                return '<div class="btn-group">
+                            <a href="javascript:void(0)" onclick="print(\'' . $data->id . '\')"><span class="btn btn-xs btn-success"><i class="fas fa-print"></i></span></a>
+                        </div>';
+            })
+            ->rawColumns(['nomor', 'kode_produk', 'ubah'])
+            ->make(true);
+    }
+}
diff --git a/resources/views/pages/menu/index.blade.php b/resources/views/pages/menu/index.blade.php
new file mode 100644
index 0000000..522032d
--- /dev/null
+++ b/resources/views/pages/menu/index.blade.php
@@ -0,0 +1,148 @@
+@extends('layouts.base')
+
+@section('content-header')
+<div class="col-12">
+    <div class="container" style="display: contents">
+        <div class="row mb-2">
+            <div class="col-sm-6">
+                <h1 class="m-0"> Kasir <small>kasir 3.0</small></h1>
+            </div>
+            <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-right">
+                    <li class="breadcrumb-item"><a href="#">Home</a></li>
+                    <li class="breadcrumb-item"><a href="#">Kasir</a></li>
+                    <li class="breadcrumb-item active">History</li>
+                </ol>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@section('content')
+<div class="col-12 mt-2">
+    <div class="container" style="display: contents">
+        <div class="card">
+            <div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div>
+            <div class="card-header mt-0 pt-0">
+                <div class="d-flex">
+                    <h3>Daftar Menu</h3>
+                    <!-- Button trigger modal -->
+                    <div class="ml-auto">
+                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-default">
+                            Tambah Menu
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="card-body">
+                {{-- <h5 class="card-title">Form List Data</h5> --}}
+                <div class="table-responsive mt-3">
+                    <table id="tabelku" class="table table-hover display" style="width: 100%">
+                        <thead>
+                            <tr>
+                                <th class="text-center">No</th>
+                                <th>Kode Produk</th>
+                                <th>Nama Produk</th>
+                                <th>Harga Produk</th>
+                                <th>Kategori Produk</th>
+                                <th class="text-center"><i class="fas fa-cog"></i></th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Modal Tambah Menu -->
+<div class="modal fade" id="modal-default">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Default Modal</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <div class="form-group">
+                        <label for="recipient-name" class="col-form-label">Recipient:</label>
+                        <input type="text" class="form-control" id="recipient-name">
+                    </div>
+                    <div class="form-group">
+                        <label for="message-text" class="col-form-label">Message:</label>
+                        <textarea class="form-control" id="message-text"></textarea>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer justify-content-between">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
+
+@push('styles')
+<!-- Toastr -->
+<style>
+    @media only screen and (max-width : 991px) {
+        /* Styles */
+    }
+
+    @media only screen and (max-width : 768px) {
+        /* Styles */
+    }
+
+    @media only screen and (max-width : 414px) {
+        /* Styles */
+    }
+</style>
+<link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
+<link rel="stylesheet" href="{{asset('assets/datatables/datatables.min.css')}}">
+@endpush
+
+@push('scripts')
+<script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
+<script>
+    $(document).ready(function() {
+        $('#tabelku').DataTable({
+            processing: true,
+            serverSide: true,
+            ajax: "{{ route('menu.getDataMenu') }}",
+            columns: [{
+                    data: 'nomor',
+                    name: 'nomor',
+                    orderable: false,
+                    className: 'text-center'
+                },
+                {
+                    data: 'kode_produk',
+                    name: 'kode_produk'
+                },
+                {
+                    data: 'nama_produk',
+                    name: 'nama_produk'
+                },
+                {
+                    data: 'harga_produk',
+                    name: 'harga_produk'
+                },
+                {
+                    data: 'kategori_produk',
+                    name: 'kategori_produk'
+                },
+                {
+                    data: 'ubah',
+                    name: 'ubah',
+                    className: 'text-center'
+                },
+            ]
+        })
+    })
+</script>
+@endpush
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 386c75c..e83389a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\Kasir\History;
+use App\Http\Controllers\Kasir\Menu;
 use App\Http\Controllers\Kasir\Transaksi;
 use Illuminate\Support\Facades\Route;
 
@@ -29,4 +30,9 @@ Route::group(['prefix' => 'history'], function () {
     Route::get('/', [History::class, 'index'])->name('history.index');
     Route::get('/getDataHistory', [History::class, 'getDataHistory'])->name('history.getDataHistory');
     Route::get('/print/{id}', [History::class, 'print'])->name('history.print');
-});
\ No newline at end of file
+});
+
+Route::group(['prefix' => 'menu'], function () {
+    Route::get('/', [Menu::class, 'index'])->name('menu.index');
+    Route::get('/getDataMenu', [Menu::class, 'getDataMenu'])->name('menu.getDataMenu');
+});