diff --git a/app/Http/Controllers/SupplierController.php b/app/Http/Controllers/SupplierController.php
index 718483f..27f1cd7 100644
--- a/app/Http/Controllers/SupplierController.php
+++ b/app/Http/Controllers/SupplierController.php
@@ -4,10 +4,11 @@ namespace App\Http\Controllers;
 
 use Carbon\Carbon;
 use Illuminate\Http\Request;
+use Illuminate\Support\Arr;
 
 use App\Http\Requests\{SupplierAddEdit,SupplierProductAddEdit};
-use App\Models\{Cost,Supplier,SupplierDetail};
 use App\Jobs\ImportCosts;
+use App\Models\{Cost,Supplier,SupplierDetail};
 
 class SupplierController extends Controller
 {
@@ -20,9 +21,7 @@ class SupplierController extends Controller
 	 */
 	public function addedit(SupplierAddEdit $request,Supplier $o)
 	{
-		$this->middleware(['auth','wholesaler']);
-
-		foreach ($request->except(['_token','supplier_details','api_key','api_secret','submit']) as $key => $item)
+		foreach (Arr::except($request->validated(),['supplier_details','api_key','api_secret','submit']) as $key => $item)
 			$o->{$key} = $item;
 
 		$o->active = (bool)$request->active;
@@ -51,19 +50,6 @@ class SupplierController extends Controller
 			->with('success','Supplier Saved');
 	}
 
-	/**
-	 * Site up site wide suppliers, or a site's supplier details
-	 *
-	 * @note This method is protected by the routes
-	 * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
-	 */
-	public function admin_home()
-	{
-		$this->middleware(['auth','wholesaler']);
-
-		return view('theme.backend.adminlte.supplier.home');
-	}
-
 	/**
 	 * Show the suppliers invoice
 	 *
@@ -99,19 +85,9 @@ class SupplierController extends Controller
 			$filename,
 		)->onQueue('low');
 
-		return redirect()->back()->with('success','File uploaded');
-	}
-
-	/**
-	 * New Product from a supplier
-	 *
-	 * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
-	 */
-	public function product_add()
-	{
-		return view('theme.backend.adminlte.supplier.product.addedit')
-			->with('o',new Supplier)
-			->with('oo',NULL);
+		return redirect()
+			->back()
+			->with('success','File uploaded');
 	}
 
 	public function product_addedit(SupplierProductAddEdit $request,Supplier $o,int $id,string $type)
@@ -127,7 +103,7 @@ class SupplierController extends Controller
 				$oo = Supplier\Broadband::findOrNew($id);
 
 				// @todo these are broadband requirements - get them from the broadband class.
-				foreach ($request->only([
+				foreach (Arr::only($request->validated(),[
 					'supplier_detail_id',
 					'product_id'.
 					'product_desc',
@@ -151,8 +127,8 @@ class SupplierController extends Controller
 					$oo->$key = $value;
 
 				// Our boolean values
-				foreach ($request->only(['active','extra_shaped','extra_charged']) as $key => $value)
-					$oo->$key = ($value == 'on' ? 1 : 0);
+				foreach (Arr::only($request->validated(),['active','extra_shaped','extra_charged']) as $key => $value)
+					$oo->{$key} = ($value == 'on' ? 1 : 0);
 
 				break;
 
@@ -162,28 +138,11 @@ class SupplierController extends Controller
 
 		$oo->save();
 
-		return redirect()->back()
+		return redirect()
+			->back()
 			->with('success','Saved');
 	}
 
-	/**
-	 * Edit a supplier product
-	 *
-	 * @param Supplier $o
-	 * @param int $id
-	 * @param string $type
-	 * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
-	 */
-	public function product_view(Supplier $o,int $id,string $type)
-	{
-		$oo = $o->detail->find($type,$id);
-		$oo->load(['products.product.services.product.type']);
-
-		return view('theme.backend.adminlte.supplier.product.addedit')
-			->with('o',$o)
-			->with('oo',$oo);
-	}
-
 	/**
 	 * Return the form for a specific product type
 	 *
@@ -200,24 +159,10 @@ class SupplierController extends Controller
 			$request->session()->flashInput($request->old);
 
 		if ($o)
-			$o->load(['products.product.services']);
+			$o->load(['products.products.services']);
 
 		return view('theme.backend.adminlte.supplier.product.widget.'.$type)
 			->with('o',$id ? $o : NULL)
 			->withErrors($request->errors);
 	}
-
-	/**
-	 * View a supplier.
-	 *
-	 * @param Supplier|null $o
-	 * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
-	 */
-	public function view(?Supplier $o)
-	{
-		$this->middleware(['auth','wholesaler']);
-
-		return view('theme.backend.adminlte.supplier.details')
-			->with('o',$o);
-	}
 }
\ No newline at end of file
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 0d8005f..40a4cbf 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -7,6 +7,8 @@ use Illuminate\Support\Facades\Route;
 use Illuminate\Support\ServiceProvider;
 use Intuit\Traits\IntuitSocialite;
 
+use App\Models\{Checkout,Payment,Product,Service,Supplier};
+
 class AppServiceProvider extends ServiceProvider
 {
 	use IntuitSocialite;
@@ -33,9 +35,10 @@ class AppServiceProvider extends ServiceProvider
 
 		$this->bootIntuitSocialite();
 
-		Route::model('co',\App\Models\Checkout::class);
-		Route::model('po',\App\Models\Payment::class);
-		Route::model('pdo',\App\Models\Product::class);
-		Route::model('so',\App\Models\Service::class);
+		Route::model('co',Checkout::class);
+		Route::model('po',Payment::class);
+		Route::model('pdo',Product::class);
+		Route::model('so',Service::class);
+		Route::model('spo',Supplier::class);
     }
 }
\ No newline at end of file
diff --git a/resources/views/theme/backend/adminlte/supplier/details.blade.php b/resources/views/theme/backend/adminlte/supplier/details.blade.php
index 461ba85..986668c 100644
--- a/resources/views/theme/backend/adminlte/supplier/details.blade.php
+++ b/resources/views/theme/backend/adminlte/supplier/details.blade.php
@@ -1,14 +1,14 @@
 @extends('adminlte::layouts.app')
 
 @section('htmlheader_title')
-	{{ $o->name ?: 'New Supplier' }}
+	{{ $spo->name ?: 'New Supplier' }}
 @endsection
 @section('page_title')
-	{{ $o->name ?: 'New Supplier' }}
+	{{ $spo->name ?: 'New Supplier' }}
 @endsection
 
 @section('contentheader_title')
-	{{ $o->name ?: 'New Supplier' }}
+	{{ $spo->name ?: 'New Supplier' }}
 @endsection
 @section('contentheader_description')
 @endsection
@@ -20,7 +20,7 @@
 				<div class="card-header bg-dark d-flex p-0">
 					<ul class="nav nav-pills w-100 p-2">
 						<li class="nav-item"><a class="nav-link active" href="#details" data-toggle="tab">Detail</a></li>
-						@if($o->exists)
+						@if($spo->exists)
 							<li class="nav-item"><a class="nav-link" href="#products" data-toggle="tab">Products</a></li>
 							<li class="nav-item"><a class="nav-link" href="#offerings" data-toggle="tab">Offerings</a></li>
 							<li class="nav-item"><a class="nav-link" href="#connections" data-toggle="tab">Connections</a></li>
@@ -35,7 +35,7 @@
 							@include('theme.backend.adminlte.supplier.widget.detail')
 						</div>
 
-						@if($o->exists)
+						@if($spo->exists)
 							<div class="tab-pane fade" id="products" role="tabpanel">
 								@include('theme.backend.adminlte.supplier.widget.products')
 							</div>
diff --git a/resources/views/theme/backend/adminlte/supplier/home.blade.php b/resources/views/theme/backend/adminlte/supplier/home.blade.php
index 633c181..7b879c9 100644
--- a/resources/views/theme/backend/adminlte/supplier/home.blade.php
+++ b/resources/views/theme/backend/adminlte/supplier/home.blade.php
@@ -1,3 +1,5 @@
+@use(App\Models\Supplier)
+
 @extends('adminlte::layouts.app')
 
 @section('htmlheader_title')
@@ -27,16 +29,7 @@
 
 						<div class="row">
 							<div class="col-12 col-sm-9 col-md-6 col-xl-5">
-								@include('adminlte::widget.form_select',[
-									'label'=>'Supplier',
-									'icon'=>'fas fa-handshake',
-									'id'=>'supplier_id',
-									'old'=>'supplier_id',
-									'name'=>'supplier_id',
-									'groupby'=>'active',
-									'options'=>\App\Models\Supplier::orderBy('active','DESC')->orderBy('name')->get()->transform(function($item) { return ['id'=>$item->id,'value'=>$item->name,'active'=>$item->active]; }),
-									'value'=>'',
-								])
+								<x-leenooks::form.select name="supplier_id" icon="fa-handshake" label="Supplier" choose="true" groupby="active" :options="$x=Supplier::orderBy('active','DESC')->orderBy(DB::Raw('UPPER(name)'))->get()->map(fn($item)=>['id'=>$item->id,'active'=>$item->active,'value'=>$item->name])"/>
 							</div>
 						</div>
 					</form>
@@ -47,9 +40,6 @@
 @endsection
 
 @section('page-scripts')
-	@css(select2)
-	@js(select2,autofocus)
-
 	<script type="text/javascript">
 		$(document).ready(function() {
 			$('#supplier_id')
diff --git a/resources/views/theme/backend/adminlte/supplier/product/addedit.blade.php b/resources/views/theme/backend/adminlte/supplier/product/addedit.blade.php
index e9017df..9ebea33 100644
--- a/resources/views/theme/backend/adminlte/supplier/product/addedit.blade.php
+++ b/resources/views/theme/backend/adminlte/supplier/product/addedit.blade.php
@@ -1,16 +1,24 @@
-<!-- $o = Supplier::class -->
-<!-- $oo = Supplier/{type}::class -->
+<!-- $spo=Supplier::class -->
+<!-- $oo=Supplier/{type}::class -->
+@use(App\Models\Supplier)
+@php
+if(isset($spo)) {
+	$oo = $spo->detail?->find(request()->route()->parameter('type'),request()->route()->parameter('id'));
+	$oo?->load(['products.products.services']);
+}
+@endphp
+
 @extends('adminlte::layouts.app')
 
 @section('htmlheader_title')
-	Supplier - @if ($oo && $oo->exists)Edit @else New @endif Product
+	Supplier Product - @if (isset($oo) && $oo->exists)Edit @else New @endif
 @endsection
 @section('page_title')
-	@if ($oo && $oo->exists)Edit @else New @endif Product
+	@if (isset($oo) && $oo->exists){{ $oo->name }} @else New @endif Product
 @endsection
 
 @section('contentheader_title')
-	Supplier - @if ($oo && $oo->exists)Edit @else New @endif Product
+	Supplier Product - @if (isset($oo) && $oo->exists){{ $oo->name }} @else New @endif
 @endsection
 @section('contentheader_description')
 @endsection
@@ -19,70 +27,39 @@
 	<div class="row">
 		<div class="col-8">
 			<div class="card card-dark">
-				<div class="card-header">
+				<div class="card-header p-2">
 					<h1 class="card-title">Supplier Product</h1>
+					<!-- @todo Should this be a x-leenooks::success component -->
 					@if(session()->has('success'))
 						<span class="ml-3 pt-0 pb-0 pr-1 pl-1 btn btn-outline-success"><small>{{ session()->get('success') }}</small></span>
 					@endif
 				</div>
 
 				<div class="card-body">
-					<form class="g-0 needs-validation" method="POST" enctype="multipart/form-data" role="form">
+					<form method="POST">
 						@csrf
-						<input type="hidden" name="id" value="{{ $oo?->id }}">
+
+						<input type="hidden" name="id" value="{{ $oo?->id ?? '' }}">
 
 						<div class="row">
 							<div class="col-4">
 								<!-- Supplier -->
-								<div class="form-group has-validation">
-									<label for="supplier_detail_id">Supplier</label>
-									<select class="form-control form-control-border @error('supplier_detail_id') is-invalid @enderror" id="supplier_detail_id" name="supplier_detail_id">
-										<option value=""></option>
-										@foreach(\App\Models\Supplier::active()->orderBy('name')->get() as $so)
-											<option value="{{ $so->id }}" {{ old('supplier_detail_id',$o->id) == $so->detail->id ? 'selected' : ''}}>{{ $so->name }}</option>
-										@endforeach
-									</select>
-									<span class="invalid-feedback" role="alert">
-										@error('supplier_detail_id')
-											{{ $message }}
-										@else
-											Date is required.
-										@enderror
-									</span>
-									<span class="input-helper">Suppliers Name</span>
-								</div>
+								<x-leenooks::form.select name="supplier_detail_id" icon="fa-handshake" label="Supplier" :choose="true" :value="$spo->id ?? ''" :options="Supplier::active()->orderBy(DB::raw('UPPER(name)'))->get()->map(fn($item,$key)=>['id'=>$item->id,'value'=>$item->name])"/>
 							</div>
 
 							<div class="col-4">
 								<!-- Offering Type -->
-								<div class="form-group has-validation">
-									<label for="offering_type">Type</label>
-									<select class="form-control form-control-border @error('offering_type') is-invalid @enderror" id="offering_type" name="offering_type">
-										<option value=""></option>
-										@foreach(\App\Models\Supplier::offeringTypes()->sortBy(function($item) { return $item->category_name; }) as $to)
-											<option value="{{ $to->category }}" {{ old('offering_type',$oo?->category) == $to->category ? 'selected' : ''}}>{{ $to->category_name }}</option>
-										@endforeach
-									</select>
-									<span class="invalid-feedback" role="alert">
-										@error('offering_type')
-											{{ $message }}
-										@else
-											Offering Type is Required
-										@enderror
-									</span>
-									<span class="input-helper">Offering Type</span>
-								</div>
+								<x-leenooks::form.select name="offering_type" icon="fa-cogs" label="Type" helper="Offering Type" :choose="true" :value="$oo?->category ?? ''" :options="Supplier::offeringTypes()->sortBy(fn($item)=>$item->category_name)->map(fn($item)=>['id'=>$item->category,'value'=>$item->category_name])"/>
 							</div>
 						</div>
 
 						<div id="type"></div>
 
 						<div class="row">
-							<div class="col-12">
-								<a href="{{ url('/home') }}" class="btn btn-danger">Cancel</a>
-								@can('wholesaler')
-									<button type="submit" name="submit" class="btn btn-success mr-0 float-right">@if ($oo && $oo->exists)Save @else Add @endif</button>
-								@endcan
+							<!-- Buttons -->
+							<div class="col">
+								<x-leenooks::button.cancel/>
+								<x-leenooks::button.submit class="float-right">@if(isset($spo) && $spo?->exists)Update @else Add @endif</x-leenooks::button.submit>
 							</div>
 						</div>
 					</form>
@@ -90,16 +67,16 @@
 			</div>
 		</div>
 
-		@if($oo && $oo->exists)
+		@if(isset($oo) && $oo->exists)
 			<div class="col-4">
 				<div class="row">
 					<div class="col-12">
 						<div class="card card-info">
-							<div class="card-header">
+							<div class="card-header p-2">
 								<h1 class="card-title">Offering Products</h1>
 							</div>
 
-							<div class="card-body">
+							<div class="card-body p-2">
 								<table class="table table-sm">
 									<thead>
 									<tr>
@@ -112,12 +89,14 @@
 
 									<tbody>
 									@foreach ($oo->products as $pto)
-										<tr>
-											<td>{{ $pto->id }}</td>
-											<td>{{ $pto->product->name }}</td>
-											<td class="text-right">{{ $pto->product->services->where('active',true)->count() }}</td>
-											<td class="text-right">{{ $pto->product->services->count() }}</td>
-										</tr>
+										@foreach ($pto->products as $po)
+											<tr>
+												<td>{{ $po->id }}</td>
+												<td>{{ $po->name }}</td>
+												<td class="text-right">{{ $po->services->where('active',true)->count() }}</td>
+												<td class="text-right">{{ $po->services->count() }}</td>
+											</tr>
+										@endforeach
 									@endforeach
 									</tbody>
 								</table>
@@ -129,12 +108,12 @@
 				<div class="row">
 					<div class="col-12">
 						<div class="card card-info">
-							<div class="card-header">
+							<div class="card-header p-2">
 								<h1 class="card-title">Services Using this Supplier Product</h1>
 							</div>
 
-							<div class="card-body">
-								<table class="table table-sm" id="services">
+							<div class="card-body p-2">
+								<table class="table table-hover table-sm" id="services">
 									<thead>
 									<tr>
 										<th>ID</th>
@@ -146,13 +125,15 @@
 
 									<tbody>
 									@foreach ($oo->products as $pto)
-										@foreach ($pto->product->services as $so)
-											<tr>
-												<td><a href="{{ url('u/service',[$so->id]) }}">{{ $so->lid }}</a></td>
-												<td>{{ $so->product->type->id }}</td>
-												<td>{{ $so->name }}</td>
-												<td>{{ $so->active ? 'Active' : 'Not Active' }}</td>
-											</tr>
+										@foreach ($pto->products as $po)
+											@foreach ($po->services as $so)
+												<tr>
+													<td><a href="{{ url('u/service',[$so->id]) }}">{{ $so->lid }}</a></td>
+													<td>{{ $po->name }}</td>
+													<td>{{ $so->name }}</td>
+													<td>{{ $so->active ? 'Active' : 'Not Active' }}</td>
+												</tr>
+											@endforeach
 										@endforeach
 									@endforeach
 									</tbody>
@@ -166,10 +147,9 @@
 	</div>
 @endsection
 
-@section('page-scripts')
-	@css(datatables,bootstrap4|rowgroup)
-	@js(datatables,bootstrap4|responsive|rowgroup)
+@pa(datatables,rowgroup|conditionalpaging)
 
+@section('page-scripts')
 	<script type="text/javascript">
 		$(document).ready(function() {
 			function load_type(type,id) {
@@ -181,7 +161,7 @@
 					url: '{{ url('a/supplier/product/view') }}/'+type+(id ? '/'+id : ''),
 					timeout: 2000,
 					error: function(x) {
-						spinner.toggleClass('d-none').toggleClass('fa-spin');
+						//spinner.toggleClass('d-none').toggleClass('fa-spin');
 						alert('Failed to submit');
 					},
 					success: function(data) {
@@ -190,7 +170,7 @@
 				});
 			}
 
-			@if ($oo && $oo->exists)
+			@if (isset($oo) && $oo->exists)
 				$('#offering_type').attr('style','pointer-events: none;');
 				load_type('{{$oo->category}}',{{$oo->id}})
 			@endif
@@ -203,17 +183,18 @@
 			});
 
 			$('#services').DataTable({
+				conditionalPaging: true,
 				order: [[3,'asc'],[1,'asc'],[2,'asc']],
 				rowGroup: {
-					dataSrc: 3,
+					dataSrc: 1,
 				},
 				columnDefs: [
 					{
-						targets: [3],
+						targets: [1],
 						visible: false,
 					}
 				],
 			});
 		});
 	</script>
-@endsection
\ No newline at end of file
+@append
\ No newline at end of file
diff --git a/resources/views/theme/backend/adminlte/supplier/product/widget/broadband.blade.php b/resources/views/theme/backend/adminlte/supplier/product/widget/broadband.blade.php
index 9db24e4..cbf1e77 100644
--- a/resources/views/theme/backend/adminlte/supplier/product/widget/broadband.blade.php
+++ b/resources/views/theme/backend/adminlte/supplier/product/widget/broadband.blade.php
@@ -1,308 +1,148 @@
 <!-- $o = Supplier{type}::class -->
 <div class="row">
 	<!-- Supplier Name -->
-	<div class="col-3">
-		<div class="form-group has-validation">
-			<label for="product_id">Product ID</label>
-			<input type="text" class="form-control form-control-border @error('product_id') is-invalid @enderror" id="product_id" name="product_id" placeholder="Product ID" value="{{ old('product_id',$o?->product_id) }}" required>
-			<span class="invalid-feedback" role="alert">
-				@error('product_id')
-					{{ $message }}
-				@else
-					Supplier's Product ID
-				@enderror
-			</span>
-			<span class="input-helper">Supplier's Product ID</span>
-		</div>
+	<div class="col-4">
+		<x-leenooks::form.text name="product_id" label="Product ID" icon="fa-tag" helper="Supplier's Product ID" :value="$o?->product_id"/>
 	</div>
 
 	<!-- Suppliers Description -->
-	<div class="offset-1 col-8">
-		<div class="form-group has-validation">
-			<label for="product_desc">Product Description</label>
-			<input type="text" class="form-control form-control-border @error('product_desc') is-invalid @enderror" id="product_desc" name="product_desc" placeholder="Product Description" value="{{ old('product_desc',$o?->product_desc) }}" required>
-			<span class="invalid-feedback" role="alert">
-				@error('product_desc')
-					{{ $message }}
-				@else
-					Product Description is required
-				@enderror
-			</span>
-			<span class="input-helper">Supplier's Product Description as it appears on Invoices</span>
-		</div>
+	<div class="col-8">
+		<x-leenooks::form.text name="product_desc" label="Product Description" icon="fa-file-alt" helper="Supplier's Product Description as it appears on Invoices" :value="$o?->product_desc"/>
 	</div>
 </div>
 
 <div class="row">
 	<!-- Supplier Active -->
 	<div class="col-1">
-		<div class="form-group">
-			<div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
-				<input type="checkbox" class="custom-control-input" id="active" name="active" {{ old('active',$o?->active) ? 'checked' : '' }}>
-				<label class="custom-control-label" for="active">Active</label>
+		<x-leenooks::form.toggle name="active" label="Active" :value="$o?->active"/>
+	</div>
+
+	<div class="offset-1 col-10">
+		<div class="row">
+			<!-- Base Cost -->
+			<div class="col-12 col-sm-2">
+				<x-leenooks::form.text class="text-right" name="base_cost" label="Base" helper="Monthly Cost (ex)" :value="$o?->base_cost"/>
+			</div>
+
+			<!-- Setup Cost -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="setup_cost" label="Setup" helper="Setup Cost (ex)" :value="$o?->setup_cost"/>
+			</div>
+
+			<!-- Contract Term -->
+			<div class="col-2">
+				<x-leenooks::form.number class="text-right" name="contract_term" label="Contract Term" helper="Term (mths)" :value="$o?->contract_term"/>
+			</div>
+
+			<!-- Speed -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="speed" label="Speed" :value="$o?->speed"/>
+			</div>
+
+			<!-- Technology -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="technology" label="Technology" :value="$o?->technology"/>
 			</div>
 		</div>
-	</div>
 
-	<!-- Base Cost -->
-	<div class="offset-1 col-2">
-		<div class="form-group has-validation">
-			<label for="base_cost">Base (ex)</label>
-			<input type="number" class="form-control form-control-border @error('base_cost') is-invalid @enderror" id="base_cost" name="base_cost" placeholder="Cost" value="{{ old('base_cost',$o?->base_cost) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('base_cost')
-					{{ $message }}
-				@enderror
-			</span>
-			<span class="input-helper">Monthly Cost</span>
-		</div>
-	</div>
+		<div class="row">
+			<div class="col-2">
+				<x-leenooks::form.time class="text-right" name="offpeak_start" label="OffPeak Start" :value="($o && $o->offpeak_start) ? $o->offpeak_start->format('H:i') : ''"/>
+			</div>
 
-	<!-- Setup Cost -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="setup_cost">Setup (ex)</label>
-			<input type="number" class="form-control form-control-border @error('setup_cost') is-invalid @enderror" id="setup_cost" name="setup_cost" placeholder="Setup" value="{{ old('setup_cost',$o?->setup_cost) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('setup_cost')
-					{{ $message }}
-				@enderror
-			</span>
-			<span class="input-helper">Setup Cost</span>
-		</div>
-	</div>
-
-	<!-- Contract Term -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="contract_term">Contract Term</label>
-			<input type="number" class="form-control form-control-border @error('contract_term') is-invalid @enderror" id="contract_term" name="contract_term" placeholder="Term" value="{{ old('contract_term',$o?->contract_term) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('contract_term')
-					{{ $message }}
-				@enderror
-			</span>
-			<span class="input-helper">Term (mths)</span>
-		</div>
-	</div>
-
-	<!-- Speed -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="speed">Speed</label>
-			<input type="text" class="form-control form-control-border @error('speed') is-invalid @enderror" id="speed" name="speed" placeholder="Speed" value="{{ old('speed',$o?->speed) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('speed')
-					{{ $message }}
-				@enderror
-			</span>
-			<span class="input-helper">Speed</span>
-		</div>
-	</div>
-
-	<!-- Technology -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="technology">Technology</label>
-			<input type="text" class="form-control form-control-border @error('technology') is-invalid @enderror" id="technology" name="technology" placeholder="Speed" value="{{ old('technology',$o?->technology) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('technology')
-					{{ $message }}
-				@enderror
-			</span>
-			<span class="input-helper">Technology</span>
-		</div>
-	</div>
-</div>
-
-<div class="row">
-	<!-- @todo Add javascript so these toggles cannot both be on -->
-	<!-- Extra Charged -->
-	<div class="col-1">
-		<div class="form-group">
-			<div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
-				<input type="checkbox" class="custom-control-input" id="extra_charged" name="extra_charged" {{ old('extra_charged',$o?->extra_charged) ? 'checked' : '' }}>
-				<label class="custom-control-label" for="extra_charged">Extra Charge</label>
+			<div class="col-2">
+				<x-leenooks::form.time class="text-right" name="offpeak_end" label="OffPeak End" :value="($o && $o->offpeak_end) ? $o->offpeak_end->format('H:i') : ''"/>
 			</div>
 		</div>
 	</div>
-
-	<div class="offset-1 col-3">
-		<div class="form-group has-validation">
-			<label for="offpeak_start">OffPeak Start</label>
-			<input type="time" class="form-control form-control-border @error('offpeak_start') is-invalid @enderror" id="offpeak_start" name="offpeak_start" value="{{ old('offpeak_start',($o && $o->offpeak_start) ? $o->offpeak_start->format('H:i') : '') }}">
-			<span class="invalid-feedback" role="alert">
-				@error('offpeak_start')
-					{{ $message }}
-				@enderror
-			</span>
-			<span class="input-helper">Offpeak Start</span>
-		</div>
-	</div>
-
-	<div class="col-3">
-		<div class="form-group has-validation">
-			<label for="offpeak_end">OffPeak End</label>
-			<input type="time" class="form-control form-control-border @error('offpeak_end') is-invalid @enderror" id="offpeak_end" name="offpeak_end" value="{{ old('offpeak_end',($o && $o->offpeak_end) ? $o->offpeak_end->format('H:i') : '') }}">
-			<span class="invalid-feedback" role="alert">
-				@error('offpeak_end')
-					{{ $message }}
-				@enderror
-			</span>
-			<span class="input-helper">Offpeak Ends</span>
-		</div>
-	</div>
-</div>
-
-<div class="row mt-3">
-	<!-- Extra Shaped -->
-	<div class="col-1">
-		<div class="form-group">
-			<div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
-				<input type="checkbox" class="custom-control-input" id="extra_shaped" name="extra_shaped" {{ old('extra_shaped',$o?->extra_shaped) ? 'checked' : '' }}>
-				<label class="custom-control-label" for="extra_shaped">Extra Shaped</label>
-			</div>
-		</div>
-	</div>
-
-	<div class="offset-1 col-8">
-		<h3 class="text-md">Included Traffic in MB</h3>
-	</div>
-</div>
-
-<div class="row">
-	<!-- Base Down Peak -->
-	<div class="offset-2 col-2">
-		<div class="form-group has-validation">
-			<label for="base_down_peak">Down Peak</label>
-			<input type="number" class="form-control form-control-border @error('base_down_peak') is-invalid @enderror" id="base_down_peak" name="base_down_peak" value="{{ old('base_down_peak',$o?->base_down_peak) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('base_down_peak')
-					{{ $message }}
-				@enderror
-			</span>
-		</div>
-	</div>
-
-	<!-- Base Down Peak -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="base_up_peak">Up Peak</label>
-			<input type="number" class="form-control form-control-border @error('base_up_peak') is-invalid @enderror" id="base_up_peak" name="base_up_peak" value="{{ old('base_up_peak',$o?->base_up_peak) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('base_up_peak')
-					{{ $message }}
-				@enderror
-			</span>
-		</div>
-	</div>
-
-	<!-- Base Down Offpeak -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="base_down_offpeak">Down Offpeak</label>
-			<input type="number" class="form-control form-control-border @error('base_down_offpeak') is-invalid @enderror" id="base_down_offpeak" name="base_down_offpeak" value="{{ old('base_down_offpeak',$o?->base_down_offpeak) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('base_down_offpeak')
-				{{ $message }}
-				@enderror
-			</span>
-		</div>
-	</div>
-
-	<!-- Base Down Offpeak -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="base_up_offpeak">Up Offpeak</label>
-			<input type="number" class="form-control form-control-border @error('base_up_offpeak') is-invalid @enderror" id="base_up_offpeak" name="base_up_offpeak" value="{{ old('base_up_offpeak',$o?->base_up_offpeak) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('base_up_offpeak')
-				{{ $message }}
-				@enderror
-			</span>
-		</div>
-	</div>
-
-	<!-- Metric Divider -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="metric">Metric Divider</label>
-			<input type="number" class="form-control form-control-border @error('metric') is-invalid @enderror" id="metric" name="metric" placeholder="1000" value="{{ old('metric',$o?->metric) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('metric')
-					{{ $message }}
-				@enderror
-			</span>
-			<span class="input-helper">Metric</span>
-		</div>
-	</div>
-</div>
-
-<div class="row mt-3">
-	<div class="offset-2 col-8">
-		<p class="text-small">Values determine the included traffic. A value of <strong>0</strong> means no traffic is included and charged at the Extra Traffic rates. An empty value means the traffic is not counted in this category.</p>
-		<p class="text-small">Any values charged at extra rates, the rate determines the value charged, and if the value is empty it will roll up to the <strong>Peak</strong> category or <strong>Down Peak</strong> if the Peak category is null.</p>
-	</div>
 </div>
 
 <hr>
 
-<div class="row mt-3">
-	<div class="offset-2 col-8">
-		<h3 class="text-md">Extra Traffic in $/mb</h3>
+<div class="row">
+	<div class="col-1">
+		<x-leenooks::form.toggle name="extra_shaped" label="Extra Shaped" :value="$o?->extra_shaped"/>
+	</div>
+
+	<div class="offset-1 col-10">
+		<div class="row">
+			<div class="col">
+				<h3 class="text-md">Included Traffic in MB</h3>
+			</div>
+		</div>
+
+		<div class="row">
+			<!-- Base Down Peak -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="base_down_peak" label="Down Peak" helper="Download Peak (mb)" :value="$o?->base_down_peak"/>
+			</div>
+
+			<!-- Base Up Peak -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="base_up_peak" label="Up Peak" helper="Upload Peak (mb)" :value="$o?->base_up_peak"/>
+			</div>
+
+			<!-- Base Down Offpeak -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="base_down_offpeak" label="Down OffPeak" helper="Download OffPeak (mb)" :value="$o?->base_down_offpeak"/>
+			</div>
+
+			<!-- Base Up Offpeak -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="base_up_offpeak" label="Up OffPeak" helper="Upload OffPeak (mb)" :value="$o?->base_up_offpeak"/>
+			</div>
+
+			<!-- Metric Divider -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="metric" label="Divider" helper="Traffic Divider to get MB" :value="$o?->metric"/>
+			</div>
+		</div>
+
+		<div class="row mt-3">
+			<div class="col">
+				<p class="text-small">Values determine the included traffic. A value of <strong>0</strong> means no traffic is included and charged at the Extra Traffic rates. An empty value means the traffic is not counted in this category.</p>
+				<p class="text-small">Any values charged at extra rates, the rate determines the value charged, and if the value is empty it will roll up to the <strong>Peak</strong> category or <strong>Down Peak</strong> if the Peak category is null.</p>
+			</div>
+		</div>
 	</div>
 </div>
 
+<hr>
+
 <div class="row">
-	<!-- Extra Down Peak -->
-	<div class="offset-2 col-2">
-		<div class="form-group has-validation">
-			<label for="extra_down_peak">Down Peak</label>
-			<input type="number" class="form-control form-control-border @error('extra_down_peak') is-invalid @enderror" id="extra_down_peak" name="extra_down_peak" value="{{ old('extra_down_peak',$o?->extra_down_peak) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('extra_down_peak')
-					{{ $message }}
-				@enderror
-			</span>
-		</div>
+	<!-- @todo Add javascript so these toggles cannot both be on -->
+	<!-- Extra Charged -->
+	<div class="col-1">
+		<x-leenooks::form.toggle name="extra_charged" label="Extra Charged" :value="$o?->extra_charged"/>
 	</div>
 
-	<!-- Extra Down Peak -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="extra_up_peak">Up Peak</label>
-			<input type="number" class="form-control form-control-border @error('extra_up_peak') is-invalid @enderror" id="extra_up_peak" name="extra_up_peak" value="{{ old('extra_up_peak',$o?->extra_up_peak) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('extra_up_peak')
-					{{ $message }}
-				@enderror
-			</span>
+	<div class="offset-1 col-10">
+		<div class="row">
+			<div class="col-8">
+				<h3 class="text-md">Extra Traffic in $/mb</h3>
+			</div>
 		</div>
-	</div>
 
-	<!-- Extra Down Offpeak -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="extra_down_offpeak">Down Offpeak</label>
-			<input type="number" class="form-control form-control-border @error('extra_down_offpeak') is-invalid @enderror" id="extra_down_offpeak" name="extra_down_offpeak" value="{{ old('extra_down_offpeak',$o?->extra_down_offpeak) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('extra_down_offpeak')
-					{{ $message }}
-				@enderror
-			</span>
-		</div>
-	</div>
+		<div class="row">
+			<!-- Extra Down Peak -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="extra_down_peak" label="Extra Down Peak" helper="Extra Download Peak ($/mb)" :value="$o?->extra_down_peak"/>
+			</div>
 
-	<!-- Extra Down Offpeak -->
-	<div class="col-2">
-		<div class="form-group has-validation">
-			<label for="extra_up_offpeak">Up Offpeak</label>
-			<input type="number" class="form-control form-control-border @error('extra_up_offpeak') is-invalid @enderror" id="extra_up_offpeak" name="extra_up_offpeak" value="{{ old('extra_up_offpeak',$o?->extra_up_offpeak) }}">
-			<span class="invalid-feedback" role="alert">
-				@error('extra_up_offpeak')
-					{{ $message }}
-				@enderror
-			</span>
+			<!-- Extra Up Peak -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="extra_up_peak" label="Up Peak" helper="Extra Upload Peak ($/mb)" :value="$o?->extra_up_peak"/>
+			</div>
+
+			<!-- Extra Down Offpeak -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="extra_down_offpeak" label="Down OffPeak" helper="Extra Download OffPeak ($/mb)" :value="$o?->extra_down_offpeak"/>
+			</div>
+
+			<!-- Extra Up Offpeak -->
+			<div class="col-2">
+				<x-leenooks::form.text class="text-right" name="extra_up_offpeak" label="Up OffPeak" helper="Extra Upload OffPeak ($/mb)" :value="$o?->extra_up_offpeak"/>
+			</div>
 		</div>
 	</div>
 </div>
\ No newline at end of file
diff --git a/resources/views/theme/backend/adminlte/supplier/widget/connections.blade.php b/resources/views/theme/backend/adminlte/supplier/widget/connections.blade.php
index 9055813..ce7096c 100644
--- a/resources/views/theme/backend/adminlte/supplier/widget/connections.blade.php
+++ b/resources/views/theme/backend/adminlte/supplier/widget/connections.blade.php
@@ -1,4 +1,7 @@
-<!-- $o = Supplier::class -->
+<!-- $spo=Supplier::class -->
+@use(App\Models\Supplier)
+@use(Carbon\Carbon)
+
 <div class="row">
 	<div class="col-9">
 		<table class="table table-sm">
@@ -14,14 +17,14 @@
 			</thead>
 
 			<tbody>
-			@foreach (\App\Models\Supplier::offeringTypes($o) as $key => $offering)
+			@foreach (Supplier::offeringTypes($spo) as $key => $offering)
 				<tr>
 					<th>{{ $offering->type }}</th>
-					@if(Arr::get($o->detail->connections,$key))
-						<td>{{ Arr::get($o->detail->connections,$key.'.user') }}</td>
-						<td>{{ Arr::get($o->detail->connections,$key.'.pass') }}</td>
-						<td>{{ Arr::get($o->detail->connections,$key.'.url') }}</td>
-						<td>{{ \Carbon\Carbon::createFromFormat('Y-m-d',Arr::get($o->detail->connections,$key.'.last'))->format('Y-m-d') }}</td>
+					@if(Arr::get($spo->detail->connections,$key))
+						<td>{{ Arr::get($spo->detail->connections,$key.'.user') }}</td>
+						<td>{{ Arr::get($spo->detail->connections,$key.'.pass') }}</td>
+						<td>{{ Arr::get($spo->detail->connections,$key.'.url') }}</td>
+						<td>{{ Carbon::createFromFormat('Y-m-d',Arr::get($spo->detail->connections,$key.'.last'))->format('Y-m-d') }}</td>
 						<td class="text-right">{{ number_format($offering->items->count()) }}</td>
 					@else
 						<td colspan="5">&nbsp;</td>
diff --git a/resources/views/theme/backend/adminlte/supplier/widget/detail.blade.php b/resources/views/theme/backend/adminlte/supplier/widget/detail.blade.php
index 956b4ca..19c1deb 100644
--- a/resources/views/theme/backend/adminlte/supplier/widget/detail.blade.php
+++ b/resources/views/theme/backend/adminlte/supplier/widget/detail.blade.php
@@ -1,10 +1,10 @@
-<!-- $o = Supplier::class -->
+<!-- $pdo=Supplier::class -->
 <div class="row">
 	<div class="col-12">
-		<h3>Supplier Details @include('adminlte::widget.success_button')</h3>
+		<h3>Supplier Details <x-leenooks::button.success class="float-right"/></h3>
 		<hr>
 
-		<form class="g-0 needs-validation" method="POST" enctype="multipart/form-data" role="form">
+		<form method="POST">
 			@csrf
 
 			<div class="row">
@@ -12,23 +12,12 @@
 					<div class="row">
 						<!-- Supplier Active -->
 						<div class="col-12 col-sm-3">
-							<div class="form-group left">
-								<div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
-									<input type="checkbox" class="custom-control-input" id="active" name="active" {{ old('active',$o->active) ? 'checked' : '' }}>
-									<label class="custom-control-label" for="active">Active</label>
-								</div>
-							</div>
+							<x-leenooks::form.toggle name="active" label="Active" :value="$spo->active"/>
 						</div>
 
 						<!-- Supplier Name -->
 						<div class="col-12 col-sm-9">
-							@include('adminlte::widget.form_text',[
-								'label'=>'Supplier Name',
-								'id'=>'name',
-								'old'=>'name',
-								'name'=>'name',
-								'value'=>$o->name ?? '',
-							])
+							<x-leenooks::form.text name="name" icon="fa-tag" label="Supplier Name" :value="$spo->name ?? ''"/>
 						</div>
 					</div>
 
@@ -37,8 +26,8 @@
 						<div class="col-12">
 							<div class="form-group">
 								<label for="address1">Address Lines</label>
-								<input type="text" style="border-bottom-left-radius:0;border-bottom-right-radius:0;" class="form-control @error('address1') is-invalid @enderror" id="address1" name="address1" value="{{ old('address1',$o->address1) }}">
-								<input type="text" style="border-top-left-radius:0;border-top-right-radius:0;" class="form-control" id="address2" name="address2" value="{{ old('address2',$o->address2) }}">
+								<input type="text" style="border-bottom-left-radius:0;border-bottom-right-radius:0;" class="form-control @error('address1') is-invalid @enderror" id="address1" name="address1" value="{{ old('address1',$spo->address1) }}">
+								<input type="text" style="border-top-left-radius:0;border-top-right-radius:0;border-top:0;" class="form-control" id="address2" name="address2" value="{{ old('address2',$spo->address2) }}">
 								<span class="invalid-feedback" role="alert">
 									@error('address1')
 										{{ $message }}
@@ -53,37 +42,19 @@
 					<div class="row">
 						<!-- City -->
 						<div class="col-12">
-							@include('adminlte::widget.form_text',[
-								'label'=>'City',
-								'id'=>'city',
-								'old'=>'city',
-								'name'=>'city',
-								'value'=>$o->city ?? '',
-							])
+							<x-leenooks::form.text name="city" label="City" :value="$spo->city ?? ''"/>
 						</div>
 					</div>
 
 					<div class="row">
 						<!-- State -->
 						<div class="col-12 col-sm-9">
-							@include('adminlte::widget.form_text',[
-								'label'=>'State',
-								'id'=>'state',
-								'old'=>'state',
-								'name'=>'state',
-								'value'=>$o->state ?? '',
-							])
+							<x-leenooks::form.text name="state" label="State" :value="$spo->state ?? ''"/>
 						</div>
 
 						<!-- Postal Code -->
 						<div class="col-12 col-sm-3">
-							@include('adminlte::widget.form_text',[
-								'label'=>'Post Code',
-								'id'=>'postcode',
-								'old'=>'postcode',
-								'name'=>'postcode',
-								'value'=>$o->postcode ?? '',
-							])
+							<x-leenooks::form.text name="postcode" label="Post Code" :value="$spo->postcode ?? ''"/>
 						</div>
 					</div>
 				</div>
@@ -92,69 +63,41 @@
 					<div class="row">
 						<!-- Accounts Email -->
 						<div class="col-12">
-							@include('adminlte::widget.form_text',[
-								'label'=>'Accounts Email',
-								'id'=>'supplier_details.accounts',
-								'old'=>'supplier_details.accounts',
-								'name'=>'supplier_details[accounts]',
-								'value'=>($o->detail ? $o->detail->accounts : ''),
-							])
+							<x-leenooks::form.email name="supplier_details[accounts]" label="Accounts Email" old="supplier_details.accounts" :value="$spo?->detail->accounts ?? ''"/>
 						</div>
 					</div>
 
 					<div class="row">
 						<!-- Support Email -->
 						<div class="col-12">
-							@include('adminlte::widget.form_text',[
-								'label'=>'Support Email',
-								'id'=>'supplier_details.support',
-								'old'=>'supplier_details.support',
-								'name'=>'supplier_details[support]',
-								'value'=>($o->detail ? $o->detail->support : ''),
-							])
+							<x-leenooks::form.email name="supplier_details[support]" label="Support Email" old="supplier_details.support" :value="$spo?->detail->support ?? ''"/>
 						</div>
 					</div>
 
 					<div class="row">
 						<!-- Payment Details -->
 						<div class="col-12">
-							@include('adminlte::widget.form_text',[
-								'label'=>'Payment Details',
-								'id'=>'supplier_details.payments',
-								'old'=>'supplier_details.payments',
-								'name'=>'supplier_details[payments]',
-								'value'=>($o->detail ? $o->detail->support : ''),
-							])
+							<x-leenooks::form.email name="supplier_details[payments]" label="Payment Details" old="supplier_details.payments" :value="$spo?->detail->payments ?? ''"/>
 						</div>
 					</div>
 
-					@if($o->api_class())
+					@if($spo->api_class())
 						<hr>
-						<p class="h6"><i class="fa-fw fas fa-sitemap"></i> <strong>{{ $o->api_class() }}</strong></p>
+						<p class="h6">
+							<i class="fa-fw fas fa-sitemap"></i> <strong>{{ $spo->api_class() }}</strong>
+						</p>
 
 						<div class="row">
 							<!-- API Details -->
 							<div class="col-12">
-								@include('adminlte::widget.form_text',[
-									'label'=>'API Key',
-									'id'=>'api_key',
-									'old'=>'api_key',
-									'name'=>'api_key',
-									'value'=>($o->detail ? Arr::get($o->detail->connections,'api_key') : ''),
-								])
+								<x-leenooks::form.text name="api_key" label="API Key" :value="($spo->detail ? Arr::get($spo->detail->connections,'api_key') : '')"/>
 							</div>
 						</div>
 
 						<div class="row">
 							<!-- API Details -->
 							<div class="col-12">
-								@include('adminlte::widget.form_text',[
-									'label'=>'API Secret',
-									'id'=>'api_secret',
-									'old'=>'api_secret',
-									'name'=>'api_secret',
-									'value'=>($o->detail ? Arr::get($o->detail->connections,'api_secret') : ''),
-								])
+								<x-leenooks::form.text name="api_secret" label="API Secret" :value="($spo->detail ? Arr::get($spo->detail->connections,'api_secret') : '')"/>
 							</div>
 						</div>
 					@endif
@@ -164,25 +107,15 @@
 			<div class="row">
 				<!-- Notes -->
 				<div class="col-12">
-					<div class="form-group has-validation">
-						<label for="notes">Notes</label>
-						<textarea class="form-control @error('supplier_details.notes') is-invalid @enderror" id="notes" name="supplier_details[notes]" placeholder="Notes...">{{ old('supplier_details.notes',($o->detail ? $o->detail->notes : '')) }}</textarea>
-						<span class="invalid-feedback" role="alert">
-							@error('supplier_details.notes')
-								{{ $message }}
-							@enderror
-						</span>
-					</div>
+					<x-leenooks::form.textarea name="supplier_details[notes]" label="Notes" :value="($spo->detail ? $spo->detail->notes : '')"/>
 				</div>
 			</div>
 
 			<div class="row">
 				<!-- Buttons -->
-				<div class="col-12">
-					<a href="{{ url('/home') }}" class="btn btn-danger">Cancel</a>
-					@can('wholesaler')
-						<button type="submit" name="submit" class="btn btn-success mr-0 float-right">@if ($o->exists)Save @else Add @endif</button>
-					@endcan
+				<div class="col">
+					<x-leenooks::button.cancel/>
+					<x-leenooks::button.submit class="float-right">@if($spo?->exists)Update @else Add @endif</x-leenooks::button.submit>
 				</div>
 			</div>
 		</form>
diff --git a/resources/views/theme/backend/adminlte/supplier/widget/offerings.blade.php b/resources/views/theme/backend/adminlte/supplier/widget/offerings.blade.php
index c51306d..b9d9089 100644
--- a/resources/views/theme/backend/adminlte/supplier/widget/offerings.blade.php
+++ b/resources/views/theme/backend/adminlte/supplier/widget/offerings.blade.php
@@ -1,8 +1,10 @@
-<!-- $o = Supplier::class -->
+<!-- $spo=Supplier::class -->
+@use(App\Models\Supplier)
+
 <div class="row">
 	<div class="col-5 col-sm-2">
 		<div class="nav flex-column nav-tabs h-100"  role="tablist" aria-orientation="vertical">
-			@foreach(\App\Models\Supplier::offeringTypes($o) as $key => $offering)
+			@foreach(Supplier::offeringTypes($spo) as $key => $offering)
 				<a class="nav-link @if($loop->first)active @endif" id="offering-{{ $key }}-tab"  data-toggle="pill" href="#offering-{{ $key }}-profile" role="tab" aria-controls="offering-{{ $key }}-tab" aria-selected="true">{{ $offering->type }}</a>
 			@endforeach
 		</div>
@@ -10,7 +12,7 @@
 
 	<div class="col-7 col-sm-10">
 		<div class="tab-content">
-			@foreach(\App\Models\Supplier::offeringTypes($o) as $key => $offering)
+			@foreach(Supplier::offeringTypes($spo) as $key => $offering)
 				<div class="tab-pane text-left fade show @if($loop->first)active @endif" id="offering-{{ $key }}-profile" role="tabpanel" aria-labelledby="offering-{{ $key }}-tab">
 					<table class="table table-sm table-bordered w-100" id="offering-{{ $key }}-table">
 						<thead>
@@ -66,13 +68,12 @@
 	</div>
 </div>
 
-@section('page-scripts')
-	@css(datatables,bootstrap4)
-	@js(datatables,bootstrap4)
+@pa(datatables)
 
+@section('page-scripts')
 	<script type="text/javascript">
 		$(document).ready(function() {
-			@foreach(\App\Models\Supplier::offeringTypes($o) as $key => $offering)
+			@foreach(Supplier::offeringTypes($spo) as $key => $offering)
 				$('#offering-{{ $key }}-table').DataTable();
 
 				$('#offering-{{ $key }}-table tbody').on('click','tr', function () {
diff --git a/resources/views/theme/backend/adminlte/supplier/widget/products.blade.php b/resources/views/theme/backend/adminlte/supplier/widget/products.blade.php
index 82c7a8a..e37d530 100644
--- a/resources/views/theme/backend/adminlte/supplier/widget/products.blade.php
+++ b/resources/views/theme/backend/adminlte/supplier/widget/products.blade.php
@@ -1,8 +1,10 @@
-<!-- $o = Supplier::class -->
+<!-- $spo=Supplier::class -->
+@use(App\Models\Supplier)
+
 <div class="row">
 	<div class="col-5 col-sm-2">
 		<div class="nav flex-column nav-tabs h-100"  role="tablist" aria-orientation="vertical">
-			@foreach(\App\Models\Supplier::offeringTypes($o) as $key => $offering)
+			@foreach(Supplier::offeringTypes($spo) as $key => $offering)
 				<a class="nav-link @if($loop->first)active @endif" id="products-{{ $key }}-tab"  data-toggle="pill" href="#products-{{ $key }}-profile" role="tab" aria-controls="products-{{ $key }}-tab" aria-selected="true">{{ $offering->type }}</a>
 			@endforeach
 		</div>
@@ -10,7 +12,7 @@
 
 	<div class="col-7 col-sm-10">
 		<div class="tab-content">
-			@foreach(\App\Models\Supplier::offeringTypes($o) as $key => $offering)
+			@foreach(Supplier::offeringTypes($spo) as $key => $offering)
 				<div class="tab-pane text-left fade show @if($loop->first)active @endif" id="products-{{ $key }}-profile" role="tabpanel" aria-labelledby="products-{{ $key }}-tab">
 					<table class="table table-sm table-bordered w-100" id="products-{{ $key }}-table">
 						<thead>
@@ -34,10 +36,10 @@
 						</thead>
 
 						<tbody>
-						@foreach($xx=$offering->items->with(['products.products.services','products.products.type.supplied','products.products.translate'])->get() as $oo)
+						@foreach($xx=$offering->items->with(['products.products.services','products.products.type.supplied.supplier_detail','products.products.translate'])->get() as $oo)
 							@foreach($oo->products->pluck('products')->flatten()->filter() as $po)
 								<tr>
-									<td><a href="{{ url('a/supplier/product/addedit',[$po->supplier->id,$po->supplied->id,$po->supplied->category]) }}">{{ $po->lid }}</a></td>
+									<td><a href="{{ url('a/supplier/product',[$po->supplier->id,$po->supplied->id,$po->supplied->category]) }}">{{ $po->lid }}</a></td>
 									<td>{{ $po->pid }}</td>
 									<td>{{ $po->name }}</td>
 									<td class="text-right">{{ $po->active ? 'YES' : 'NO' }}</td>
@@ -69,13 +71,12 @@
 	</div>
 </div>
 
-@section('page-scripts')
-	@css(datatables,bootstrap4)
-	@js(datatables,bootstrap4)
+@pa(datatables)
 
+@section('page-scripts')
 	<script type="text/javascript">
 		$(document).ready(function() {
-			@foreach(\App\Models\Supplier::offeringTypes($o) as $key => $offering)
+			@foreach(Supplier::offeringTypes($spo) as $key => $offering)
 			$('#products-{{ $key }}-table').DataTable();
 
 			$('#products-{{ $key }}-table tbody').on('click','tr', function () {
diff --git a/resources/views/vendor/adminlte/layouts/partials/sidebarmenu.blade.php b/resources/views/vendor/adminlte/layouts/partials/sidebarmenu.blade.php
index 0f427a0..fb11301 100644
--- a/resources/views/vendor/adminlte/layouts/partials/sidebarmenu.blade.php
+++ b/resources/views/vendor/adminlte/layouts/partials/sidebarmenu.blade.php
@@ -90,7 +90,7 @@
 			</li>
 
 			<li class="nav-item">
-				<a href="{{ url('a/supplier/product/add') }}" @class(['nav-link','active'=>preg_match('#^a/supplier/product/(add|edit)#',$path)])>
+				<a href="{{ url('a/supplier/product/new') }}" @class(['nav-link','active'=>preg_match('#^a/supplier/product/(add|edit)#',$path)])>
 					<i class="nav-icon fas fa-barcode"></i> <p>New Product</p>
 				</a>
 			</li>
diff --git a/routes/web.php b/routes/web.php
index 2bd8cd9..4f01521 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -99,21 +99,21 @@ Route::group(['middleware'=>['auth','role:wholesaler'],'prefix'=>'a'],function()
 	Route::get('supplied_products',[ProductController::class,'api_supplied_products']);
 
 	// Supplier Setup
-	Route::get('supplier',[SupplierController::class,'admin_home']);
+	Route::view('supplier','theme.backend.adminlte.supplier.home');
 	Route::get('supplier/cost/new/{o}',[SupplierController::class,'cost_add']);
 	Route::post('supplier/cost/new/{o}',[SupplierController::class,'cost_submit']);
 	Route::get('supplier/cost/{o}',[SupplierController::class,'cost'])
 		->where('o','[0-9]+');
-	Route::get('supplier/details/{o?}',[SupplierController::class,'view'])
-		->where('o','[0-9]+');
+	Route::view('supplier/details/{spo}','theme.backend.adminlte.supplier.details')
+		->where('spo','[0-9]+');
 	Route::post('supplier/details/{o?}',[SupplierController::class,'addedit'])
 		->where('o','[0-9]+');
-	Route::get('supplier/product/add',[SupplierController::class,'product_add']);
-	Route::get('supplier/product/addedit/{o}/{oo}/{type}',[SupplierController::class,'product_view'])
-		->where('o','[0-9]+')
-		->where('oo','[0-9]+')
+	Route::view('supplier/product/new','theme.backend.adminlte.supplier.product.addedit');
+	Route::view('supplier/product/{spo}/{id}/{type}','theme.backend.adminlte.supplier.product.addedit')
+		->where('spo','[0-9]+')
+		->where('id','[0-9]+')
 		->whereIn('type',Supplier::offeringTypeKeys()->toArray());
-	Route::post('supplier/product/addedit/{o}/{oo}/{type}',[SupplierController::class,'product_addedit'])
+	Route::post('supplier/product/{o}/{oo}/{type}',[SupplierController::class,'product_addedit'])
 		->where('o','[0-9]+')
 		->where('oo','[0-9]+')
 		->whereIn('type',Supplier::offeringTypeKeys()->toArray());