diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index ab8d9bd..d6f3d01 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -4,6 +4,7 @@
 
 @section('content')
 <style>
+/* Your existing CSS remains exactly the same */
 body, .container-fluid { background: #f4f7fc; }
 .dash-top-titlebox {
   margin-bottom: 2px; background: transparent;
@@ -131,6 +132,234 @@ body, .container-fluid { background: #f4f7fc; }
   .create-order-btn{margin-top:8px;}
   .table th, .table td{font-size:13.5px;}
 }
+
+/* --- CREATE ORDER MODAL STYLES --- */
+.create-order-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.create-order-modal.show {
+  display: flex;
+}
+
+.create-order-modal .modal-card {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+  width: 95%;
+  max-width: 900px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.create-order-modal .modal-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 20px 25px;
+  border-radius: 16px 16px 0 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.create-order-modal .modal-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.create-order-modal .close-btn {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  font-size: 1.5rem;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.create-order-modal .close-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.create-order-modal .modal-body {
+  padding: 25px;
+  background: #f8fafc;
+}
+
+/* Form styles inside modal */
+.create-order-modal .form-label {
+  font-weight: 600;
+  color: #1d3159;
+  font-size: 15px;
+  margin-bottom: 5px;
+}
+
+.create-order-modal .form-control,
+.create-order-modal .form-select {
+  border-radius: 8px;
+  background: #fff;
+  border: 1.2px solid #c7dbfa;
+  font-size: 15px;
+  font-weight: 500;
+  padding: 8px 12px;
+}
+
+.create-order-modal .form-control:focus,
+.create-order-modal .form-select:focus {
+  border-color: #2469d6;
+  box-shadow: 0 0 0 3px rgba(36, 105, 214, 0.1);
+}
+
+.create-order-modal .btn-info {
+  background: #24a0eb;
+  border: none;
+  padding: 10px 20px;
+  font-weight: 600;
+  border-radius: 8px;
+}
+
+.create-order-modal .btn-info:hover {
+  background: #1d8fd8;
+}
+
+.create-order-modal .btn-success {
+  background: #28a745;
+  border: none;
+  padding: 12px 30px;
+  font-weight: 600;
+  border-radius: 8px;
+}
+
+.create-order-modal .btn-success:hover {
+  background: #218838;
+}
+
+.create-order-modal .btn-warning {
+  background: #ffc107;
+  border: none;
+  color: #000;
+  font-weight: 600;
+}
+
+.create-order-modal .btn-warning:hover {
+  background: #e0a800;
+}
+
+.create-order-modal .btn-danger {
+  background: #dc3545;
+  border: none;
+}
+
+.create-order-modal .btn-danger:hover {
+  background: #c82333;
+}
+
+/* Table styles inside modal */
+.create-order-modal .table-wrapper {
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+}
+
+.create-order-modal .table {
+  margin-bottom: 0;
+  background: #fff;
+}
+
+.create-order-modal .table th {
+  background: #f8f9fa;
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+@media (max-width: 768px) {
+  .create-order-modal .modal-card {
+    width: 98%;
+    margin: 10px;
+  }
+  
+  .create-order-modal .modal-body {
+    padding: 15px;
+  }
+  
+  .create-order-modal .modal-header {
+    padding: 15px 20px;
+  }
+}
+/* --- END MODAL STYLES --- */
+
+/* ✅ Horizontal scroll container */
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
+  padding: 8px;
+}
+
+/* ✅ Stylish scrollbar */
+.table-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: linear-gradient(90deg, #a7b8ff, #6c8eff);
+  border-radius: 10px;
+}
+.table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(90deg, #5a78ff, #3f63e0);
+}
+.table-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.table {
+  min-width: 1200px;
+  border-radius: 10px;
+}
+
+/* Success message styling */
+.alert-success {
+  border-radius: 8px;
+  border-left: 4px solid #28a745;
+  margin-bottom: 15px;
+}
+
+/* Clear form button */
+.clear-form-btn {
+  background: #6c757d;
+  border: none;
+  padding: 8px 16px;
+  font-weight: 600;
+  border-radius: 6px;
+  color: white;
+  margin-right: 10px;
+}
+
+.clear-form-btn:hover {
+  background: #5a6268;
+}
+
 </style>
 
 <div class="container-fluid py-3">
@@ -161,211 +390,19 @@ body, .container-fluid { background: #f4f7fc; }
   <div class="order-mgmt-box">
     <div class="order-mgmt-bar">
       <span class="order-mgmt-title"><i class="bi bi-table"></i> Order Management</span>
-      <button class="create-order-btn" data-bs-toggle="collapse" data-bs-target="#createOrderForm">
+      <button class="create-order-btn" id="openCreateOrderModal">
         <i class="bi bi-plus-circle"></i> Create Order
       </button>
     </div>
 
     <div class="order-mgmt-main">
-      <!-- CREATE ORDER FORM -->
-      <div id="createOrderForm" class="collapse mb-3">
-        <div class="card">
-
-          <div class="card-header bg-light"><strong>New Order Form</strong></div>
-          <div class="card-body">
-
-            {{-- FORM START --}}
-            <form action="{{ route('admin.orders.temp.add') }}" method="POST">
-              @csrf
-
-              <div class="row g-3">
-
-                {{-- MARK NO --}}
-                <div class="col-md-4">
-                    <label class="form-label">Mark No</label>
-
-                    @if(session('temp_order_items'))
-                        {{-- Mark No locked, cannot be changed --}}
-                        <input type="text" class="form-control" value="{{ session('mark_no') }}" disabled>
-
-                        {{-- Hidden field to submit mark_no --}}
-                        <input type="hidden" name="mark_no" value="{{ session('mark_no') }}">
-
-                    @else
-                        {{-- Normal selectable dropdown --}}
-                        <select class="form-select" id="markNoSelect" name="mark_no" required>
-                            <option value="">Select Mark No</option>
-                            @foreach($markList as $mark)
-                                <option value="{{ $mark->mark_no }}"
-                                    data-origin="{{ $mark->origin }}"
-                                    data-destination="{{ $mark->destination }}"
-                                    @if(session('mark_no') == $mark->mark_no) selected @endif>
-                                    {{ $mark->mark_no }} - {{ $mark->customer_name }}
-                                </option>
-                            @endforeach
-                        </select>
-                    @endif
-                </div>
-
-
-                {{-- ORIGIN --}}
-                <div class="col-md-4">
-                  <label class="form-label">Origin</label>
-                  <input type="text" class="form-control" 
-                         id="originField"
-                         name="origin"
-                         readonly required
-                         value="{{ session('origin') }}">
-                </div>
-
-                {{-- DESTINATION --}}
-                <div class="col-md-4">
-                  <label class="form-label">Destination</label>
-                  <input type="text" class="form-control" 
-                         id="destinationField"
-                         name="destination"
-                         readonly required
-                         value="{{ session('destination') }}">
-                </div>
-
-              </div>
-
-              <hr class="my-3">
-
-              {{-- ITEM INPUTS --}}
-              <h6 class="text-primary">Add Item</h6>
-
-              <div class="row g-3">
-                <div class="col-md-4">
-                  <label class="form-label">Description</label>
-                  <input type="text" class="form-control" name="description" required>
-                </div>
-
-                <div class="col-md-2"><label>CTN</label><input type="number" name="ctn" class="form-control"></div>
-                <div class="col-md-2"><label>QTY</label><input type="number" name="qty" class="form-control"></div>
-                <div class="col-md-2"><label>TTL/QTY</label><input type="number" name="ttl_qty" class="form-control"></div>
-
-                <div class="col-md-2"><label>Unit</label><input type="text" name="unit" class="form-control"></div>
-
-                <div class="col-md-2"><label>Price</label><input type="number" step="0.01" name="price" class="form-control"></div>
-                <div class="col-md-2"><label>TTL Amount</label><input type="number" step="0.01" name="ttl_amount" class="form-control"></div>
-
-                <div class="col-md-2"><label>CBM</label><input type="number" step="0.001" name="cbm" class="form-control"></div>
-                <div class="col-md-2"><label>TTL CBM</label><input type="number" step="0.001" name="ttl_cbm" class="form-control"></div>
-
-                <div class="col-md-2"><label>KG</label><input type="number" step="0.001" name="kg" class="form-control"></div>
-                <div class="col-md-2"><label>TTL KG</label><input type="number" step="0.001" name="ttl_kg" class="form-control"></div>
-
-                <div class="col-md-3"><label>Shop No</label><input type="text" name="shop_no" class="form-control"></div>
-
-                <div class="col-md-12 text-end mt-3">
-                  <button class="btn btn-info">
-                    <i class="bi bi-plus-circle"></i> Add Item
-                  </button>
-                </div>
-              </div>
-
-            </form>
-            {{-- FORM END --}}
-
-            {{-- RESET ORDER BUTTON --}}
-            @if(session('temp_order_items'))
-            <div class="text-start mt-2">
-              <form action="{{ route('admin.orders.temp.reset') }}" method="POST">
-                @csrf
-                <button class="btn btn-sm btn-warning">
-                  <i class="bi bi-arrow-repeat"></i> Reset Order
-                </button>
-              </form>
-            </div>
-            @endif
-
-            {{-- TEMPORARY ITEMS TABLE --}}
-            @if(session('temp_order_items') && count(session('temp_order_items')) > 0)
-
-              <hr class="my-4">
-
-              <h5 class="text-success">Temporary Items</h5>
-
-              <table class="table table-bordered text-center align-middle">
-                <thead class="table-light">
-                  <tr>
-                      <th>#</th>
-                      <th>Description</th>
-                      <th>CTN</th>
-                      <th>QTY</th>
-                      <th>TTL/QTY</th>
-                      <th>Unit</th>
-                      <th>Price</th>
-                      <th>TTL Amount</th>
-                      <th>CBM</th>
-                      <th>TTL CBM</th>
-                      <th>KG</th>
-                      <th>TTL KG</th>
-                      <th>Shop No</th>
-                      <th>Remove</th>
-                  </tr>
-                </thead>
-
-                <tbody>
-                  @foreach(session('temp_order_items') as $index => $item)
-                    <tr>
-                      <td>{{ $index + 1 }}</td>
-                      <td>{{ $item['description'] }}</td>
-                      <td>{{ $item['ctn'] }}</td>
-                      <td>{{ $item['qty'] }}</td>
-                      <td>{{ $item['ttl_qty'] }}</td>
-                      <td>{{ $item['unit'] }}</td>
-                      <td>{{ $item['price'] }}</td>
-                      <td>{{ $item['ttl_amount'] }}</td>
-                      <td>{{ $item['cbm'] }}</td>
-                      <td>{{ $item['ttl_cbm'] }}</td>
-                      <td>{{ $item['kg'] }}</td>
-                      <td>{{ $item['ttl_kg'] }}</td>
-                      <td>{{ $item['shop_no'] }}</td>
-
-                      <td>
-                        <form action="{{ route('admin.orders.temp.delete') }}" method="POST">
-                          @csrf
-                          <input type="hidden" name="index" value="{{ $index }}">
-                          <button class="btn btn-sm btn-danger">
-                            <i class="bi bi-trash"></i>
-                          </button>
-                        </form>
-                      </td>
-                    </tr>
-                  @endforeach
-                </tbody>
-              </table>
-
-              <div class="text-end mt-3">
-                <form action="{{ route('admin.orders.finish') }}" method="POST">
-                  @csrf
-                  <input type="hidden" name="mark_no" value="{{ session('mark_no') }}">
-                  <input type="hidden" name="origin" value="{{ session('origin') }}">
-                  <input type="hidden" name="destination" value="{{ session('destination') }}">
-
-                  <button class="btn btn-success btn-lg">
-                    <i class="bi bi-check-circle"></i> Finish & Save Order
-                  </button>
-                </form>
-              </div>
-
-            @endif
-
-          </div>
-        </div>
-      </div>
-
       <!-- RECENT ORDERS TABLE -->
       <div class="card shadow-sm">
         <div class="card-header bg-light">
           <strong>Recent Orders</strong>
         </div>
-
         <div class="card-body table-responsive">
           <table class="table table-striped table-bordered align-middle text-center">
-
             <thead class="table-light">
               <tr>
                 <th>#</th>
@@ -386,86 +423,306 @@ body, .container-fluid { background: #f4f7fc; }
                 <th>Action</th>
               </tr>
             </thead>
-
             <tbody>
               @forelse($orders as $order)
               <tr>
                 <td>{{ $order->id }}</td>
-
                 <td>
                   <a href="{{ route('admin.orders.show', $order->id) }}" class="fw-semibold text-primary">
                     {{ $order->order_id }}
                   </a>
                 </td>
-
                 <td>{{ $order->mark_no }}</td>
                 <td>{{ $order->origin }}</td>
                 <td>{{ $order->destination }}</td>
-
                 <td>{{ $order->ctn }}</td>
                 <td>{{ $order->qty }}</td>
                 <td>{{ $order->ttl_qty }}</td>
                 <td>₹{{ number_format($order->ttl_amount, 2) }}</td>
-
                 <td>{{ $order->cbm }}</td>
                 <td>{{ $order->ttl_cbm }}</td>
                 <td>{{ $order->kg }}</td>
                 <td>{{ $order->ttl_kg }}</td>
-
                 <td>
                   <span class="badge bg-info text-dark">{{ ucfirst($order->status) }}</span>
                 </td>
-
                 <td>{{ $order->created_at->format('d-m-Y') }}</td>
-
                 <td>
                   <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-outline-primary">
                     <i class="bi bi-eye"></i> View
                   </a>
                 </td>
               </tr>
-
               @empty
               <tr>
                 <td colspan="16" class="text-muted">No orders found</td>
               </tr>
               @endforelse
             </tbody>
-
           </table>
         </div>
-
       </div>
-
     </div>
   </div>
 </div>
 
-{{-- JS: LOCK MARK NO + LOAD ORIGIN/DESTINATION --}}
+<!-- CREATE ORDER MODAL -->
+<div class="create-order-modal" id="createOrderModal">
+  <div class="modal-card">
+    <div class="modal-header">
+      <h5 class="modal-title">Create New Order</h5>
+      <button class="close-btn" id="closeCreateOrderModal">&times;</button>
+    </div>
+    <div class="modal-body">
+      @if(session('success'))
+        <div class="alert alert-success alert-dismissible fade show" role="alert">
+          {{ session('success') }}
+          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+      @endif
+
+      <!-- CREATE ORDER FORM -->
+      <form action="{{ route('admin.orders.temp.add') }}" method="POST" id="createOrderForm">
+        @csrf
+        <div class="row g-3">
+          {{-- MARK NO --}}
+          <div class="col-md-4">
+              <label class="form-label">Mark No</label>
+              @if(session('temp_order_items'))
+                  <input type="text" class="form-control" value="{{ session('mark_no') }}" disabled>
+                  <input type="hidden" name="mark_no" value="{{ session('mark_no') }}">
+              @else
+                  <select class="form-select" id="markNoSelect" name="mark_no" required>
+                      <option value="">Select Mark No</option>
+                      @foreach($markList as $mark)
+                          <option value="{{ $mark->mark_no }}"
+                              data-origin="{{ $mark->origin }}"
+                              data-destination="{{ $mark->destination }}"
+                              @if(session('mark_no') == $mark->mark_no) selected @endif>
+                              {{ $mark->mark_no }} - {{ $mark->customer_name }}
+                          </option>
+                      @endforeach
+                  </select>
+              @endif
+          </div>
+
+          {{-- ORIGIN --}}
+          <div class="col-md-4">
+            <label class="form-label">Origin</label>
+            <input type="text" class="form-control" 
+                   id="originField"
+                   name="origin"
+                   readonly required
+                   value="{{ session('origin') }}">
+          </div>
+
+          {{-- DESTINATION --}}
+          <div class="col-md-4">
+            <label class="form-label">Destination</label>
+            <input type="text" class="form-control" 
+                   id="destinationField"
+                   name="destination"
+                   readonly required
+                   value="{{ session('destination') }}">
+          </div>
+        </div>
+
+        <hr class="my-3">
+
+        {{-- ITEM INPUTS --}}
+        <h6 class="text-primary">Add Item</h6>
+        <div class="row g-3">
+          <div class="col-md-4">
+            <label class="form-label">Description</label>
+            <input type="text" class="form-control" name="description" id="itemDescription" required placeholder="Enter item description">
+          </div>
+          <div class="col-md-2"><label class="form-label">CTN</label><input type="number" name="ctn" id="itemCtn" class="form-control" placeholder="CTN"></div>
+          <div class="col-md-2"><label class="form-label">QTY</label><input type="number" name="qty" id="itemQty" class="form-control" placeholder="QTY"></div>
+          <div class="col-md-2"><label class="form-label">TTL/QTY</label><input type="number" name="ttl_qty" id="itemTtlQty" class="form-control" placeholder="TTL/QTY"></div>
+          <div class="col-md-2"><label class="form-label">Unit</label><input type="text" name="unit" id="itemUnit" class="form-control" placeholder="Unit"></div>
+          <div class="col-md-2"><label class="form-label">Price</label><input type="number" step="0.01" name="price" id="itemPrice" class="form-control" placeholder="Price"></div>
+          <div class="col-md-2"><label class="form-label">TTL Amount</label><input type="number" step="0.01" name="ttl_amount" id="itemTtlAmount" class="form-control" placeholder="TTL Amount"></div>
+          <div class="col-md-2"><label class="form-label">CBM</label><input type="number" step="0.001" name="cbm" id="itemCbm" class="form-control" placeholder="CBM"></div>
+          <div class="col-md-2"><label class="form-label">TTL CBM</label><input type="number" step="0.001" name="ttl_cbm" id="itemTtlCbm" class="form-control" placeholder="TTL CBM"></div>
+          <div class="col-md-2"><label class="form-label">KG</label><input type="number" step="0.001" name="kg" id="itemKg" class="form-control" placeholder="KG"></div>
+          <div class="col-md-2"><label class="form-label">TTL KG</label><input type="number" step="0.001" name="ttl_kg" id="itemTtlKg" class="form-control" placeholder="TTL KG"></div>
+          <div class="col-md-3"><label class="form-label">Shop No</label><input type="text" name="shop_no" id="itemShopNo" class="form-control" placeholder="Shop No"></div>
+          <div class="col-md-12 text-end mt-3">
+            <button type="button" class="btn btn-secondary clear-form-btn" id="clearForm">
+              <i class="bi bi-arrow-clockwise"></i> Clear Form
+            </button>
+            <button type="submit" class="btn btn-info" id="addItemBtn">
+              <i class="bi bi-plus-circle"></i> Add Item
+            </button>
+          </div>
+        </div>
+      </form>
+
+      {{-- RESET ORDER BUTTON --}}
+      @if(session('temp_order_items'))
+      <div class="text-start mt-2">
+        <form action="{{ route('admin.orders.temp.reset') }}" method="POST">
+          @csrf
+          <button type="submit" class="btn btn-warning btn-sm">
+            <i class="bi bi-arrow-repeat"></i> Reset Order
+          </button>
+        </form>
+      </div>
+      @endif
+
+      {{-- TEMPORARY ITEMS TABLE --}}
+      @if(session('temp_order_items') && count(session('temp_order_items')) > 0)
+        <hr class="my-4">
+        <h5 class="text-success">Temporary Items ({{ count(session('temp_order_items')) }} items)</h5>
+        <div class="table-wrapper">
+          <table class="table table-bordered text-center align-middle">
+            <thead class="table-light">
+              <tr>
+                  <th>#</th>
+                  <th>Description</th>
+                  <th>CTN</th>
+                  <th>QTY</th>
+                  <th>TTL/QTY</th>
+                  <th>Unit</th>
+                  <th>Price</th>
+                  <th>TTL Amount</th>
+                  <th>CBM</th>
+                  <th>TTL CBM</th>
+                  <th>KG</th>
+                  <th>TTL KG</th>
+                  <th>Shop No</th>
+                  <th>Remove</th>
+              </tr>
+            </thead>
+            <tbody>
+              @foreach(session('temp_order_items') as $index => $item)
+                <tr>
+                  <td>{{ $index + 1 }}</td>
+                  <td>{{ $item['description'] }}</td>
+                  <td>{{ $item['ctn'] }}</td>
+                  <td>{{ $item['qty'] }}</td>
+                  <td>{{ $item['ttl_qty'] }}</td>
+                  <td>{{ $item['unit'] }}</td>
+                  <td>{{ $item['price'] }}</td>
+                  <td>{{ $item['ttl_amount'] }}</td>
+                  <td>{{ $item['cbm'] }}</td>
+                  <td>{{ $item['ttl_cbm'] }}</td>
+                  <td>{{ $item['kg'] }}</td>
+                  <td>{{ $item['ttl_kg'] }}</td>
+                  <td>{{ $item['shop_no'] }}</td>
+                  <td>
+                    <form action="{{ route('admin.orders.temp.delete') }}" method="POST">
+                      @csrf
+                      <input type="hidden" name="index" value="{{ $index }}">
+                      <button type="submit" class="btn btn-danger btn-sm">
+                        <i class="bi bi-trash"></i>
+                      </button>
+                    </form>
+                  </td>
+                </tr>
+              @endforeach
+            </tbody>
+          </table>
+        </div>
+        <div class="text-end mt-3">
+          <form action="{{ route('admin.orders.finish') }}" method="POST">
+            @csrf
+            <input type="hidden" name="mark_no" value="{{ session('mark_no') }}">
+            <input type="hidden" name="origin" value="{{ session('origin') }}">
+            <input type="hidden" name="destination" value="{{ session('destination') }}">
+            <button type="submit" class="btn btn-success btn-lg">
+              <i class="bi bi-check-circle"></i> Finish & Save Order
+            </button>
+          </form>
+        </div>
+      @endif
+    </div>
+  </div>
+</div>
+
 <script>
-document.getElementById('markNoSelect').addEventListener('change', function () {
+document.addEventListener('DOMContentLoaded', function() {
+    const modal = document.getElementById('createOrderModal');
+    const openBtn = document.getElementById('openCreateOrderModal');
+    const closeBtn = document.getElementById('closeCreateOrderModal');
+    const clearFormBtn = document.getElementById('clearForm');
 
-    const locked = {{ session('temp_order_items') ? 'true' : 'false' }};
+    // Reset temp data function
+    const resetTempData = () => {
+        fetch('{{ route("admin.orders.temp.reset") }}', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+            }
+        });
+    };
 
-    if (locked) {
-        alert("You must finish the current order before changing Mark No.");
-        this.value = "{{ session('mark_no') }}";
-        return;
+    // Modal functions
+    const openModal = () => {
+        modal.classList.add('show');
+        document.body.style.overflow = 'hidden';
+        document.querySelector('.alert-success')?.remove();
+        clearForm();
+    };
+
+    const closeModal = () => {
+        modal.classList.remove('show');
+        document.body.style.overflow = '';
+        @if(session('temp_order_items') && count(session('temp_order_items')) > 0)
+        setTimeout(() => {
+            resetTempData();
+            window.location.reload();
+        }, 100);
+        @endif
+    };
+
+    // Clear form function
+    const clearForm = () => {
+        ['itemDescription','itemCtn','itemQty','itemTtlQty','itemUnit','itemPrice','itemTtlAmount','itemCbm','itemTtlCbm','itemKg','itemTtlKg','itemShopNo']
+            .forEach(id => document.getElementById(id).value = '');
+        document.getElementById('itemDescription').focus();
+    };
+
+    // Event listeners
+    openBtn.addEventListener('click', openModal);
+    closeBtn.addEventListener('click', closeModal);
+    clearFormBtn.addEventListener('click', clearForm);
+
+    modal.addEventListener('click', (e) => e.target === modal && closeModal());
+    document.addEventListener('keydown', (e) => e.key === 'Escape' && modal.classList.contains('show') && closeModal());
+
+    // Mark No functionality
+    const markNoSelect = document.getElementById('markNoSelect');
+    if (markNoSelect) {
+        markNoSelect.addEventListener('change', function() {
+            const locked = {{ session('temp_order_items') ? 'true' : 'false' }};
+            if (locked) {
+                alert("You must finish the current order before changing Mark No.");
+                this.value = "{{ session('mark_no') }}";
+                return;
+            }
+            const option = this.options[this.selectedIndex];
+            document.getElementById('originField').value = option.dataset.origin || '';
+            document.getElementById('destinationField').value = option.dataset.destination || '';
+        });
     }
 
-    const option = this.options[this.selectedIndex];
-    document.getElementById('originField').value = option.dataset.origin || '';
-    document.getElementById('destinationField').value = option.dataset.destination || '';
+    // Auto open modal if temp items exist
+    @if(session('temp_order_items') && count(session('temp_order_items')) > 0)
+        modal.classList.add('show');
+        document.body.style.overflow = 'hidden';
+        clearForm();
+    @endif
+
+    // Reset confirmation
+    document.querySelectorAll('form[action="{{ route("admin.orders.temp.reset") }}"]')
+        .forEach(form => form.addEventListener('submit', e => {
+            if (!confirm('Are you sure you want to reset the current order? All temporary items will be lost.')) {
+                e.preventDefault();
+            }
+        }));
 });
 </script>
 
-{{-- AUTO OPEN FORM AFTER REDIRECT --}}
-<script>
-document.addEventListener("DOMContentLoaded", function () {
-    if (window.location.hash === "#createOrderForm") {
-        new bootstrap.Collapse(document.getElementById('createOrderForm'), { toggle: true });
-    }
-});
-</script>
-
-@endsection
+@endsection
\ No newline at end of file
diff --git a/resources/views/admin/orders_show.blade.php b/resources/views/admin/orders_show.blade.php
index 08806dd..e9c1d8e 100644
--- a/resources/views/admin/orders_show.blade.php
+++ b/resources/views/admin/orders_show.blade.php
@@ -10,7 +10,7 @@
     <div class="card-body">
       <div class="d-flex justify-content-between align-items-start">
         <div>
-          <h4 class="fw-bold mb-0">Order Details</h4>
+          <h4 class="fw-bold mb-0">Order Details</Details></h4>
           <small class="text-muted">Detailed view of this shipment order</small>
         </div>
         <a href="{{ route('admin.dashboard') }}" class="btn-close"></a>
@@ -147,3 +147,4 @@
 
 </div>
 @endsection
+
diff --git a/resources/views/invoice-create.blade.php b/resources/views/invoice-create.blade.php
deleted file mode 100644
index 473a0f4..0000000
diff --git a/routes/web.php b/routes/web.php
index d435cc6..bd699a1 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -38,6 +38,7 @@ Route::prefix('admin')->middleware('auth:admin')->group(function () {
     Route::get('/staff', fn() => view('admin.staff'))->name('admin.staff');
     Route::get('/account', fn() => view('admin.account'))->name('admin.account');
     Route::get('/profile', fn() => view('admin.profile'))->name('admin.profile');
+    Route::get('/admin/orders/{id}/details', [OrderController::class, 'getOrderDetails'])->name('admin.orders.details');