diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index ab3ac4a..d010a02 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -2,6 +2,7 @@
 
 namespace App\Providers;
 
+use Illuminate\Foundation\AliasLoader;
 use Illuminate\Http\Request;
 use Illuminate\Notifications\ChannelManager;
 use Illuminate\Support\Facades\Auth;
@@ -13,6 +14,7 @@ use Illuminate\Support\ServiceProvider;
 
 use App\Events\Echomail as EchomailEvent;
 use App\Events\Matrix\Message;
+use App\Helpers\PageAssets;
 use App\Listeners\EchomailListener;
 use App\Listeners\Matrix\MessageListener;
 use App\Notifications\Channels\{EchomailChannel,MatrixChannel,NetmailChannel};
@@ -79,5 +81,9 @@ class AppServiceProvider extends ServiceProvider
 			EchomailEvent::class,
 			EchomailListener::class,
 		);
+
+		// Custom Aliases
+		$loader = AliasLoader::getInstance();
+		$loader->alias('PageAssets',PageAssets::class);
 	}
 }
diff --git a/app/Providers/CustomBladeServiceProvider.php b/app/Providers/CustomBladeServiceProvider.php
index 00e7dbe..15973a8 100644
--- a/app/Providers/CustomBladeServiceProvider.php
+++ b/app/Providers/CustomBladeServiceProvider.php
@@ -5,6 +5,7 @@ namespace App\Providers;
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 
+// @deprecated - now using pa()
 class CustomBladeServiceProvider extends ServiceProvider
 {
     /**
diff --git a/resources/views/components/form/base.blade.php b/resources/views/components/form/base.blade.php
new file mode 100644
index 0000000..b2cf197
--- /dev/null
+++ b/resources/views/components/form/base.blade.php
@@ -0,0 +1,27 @@
+<div class="form-group">
+	@if(isset($label))
+		<label {{ $attributes->only(['class']) }} for="{{ $id ?? $name }}">{{ $label }}</label>
+	@endisset
+	<div class="input-group has-validation">
+		@if(isset($icon) || isset($prepend))
+			{{-- // messes with the icon box, we have rounded corners on the right side
+			<div class="input-group-prepend">
+			--}}
+				<span class="input-group-text">@isset($icon)<i class="bi {{ $icon }}"></i>@endisset @isset($prepend){!! $prepend !!}@endisset</span>
+			{{--
+			</div>
+			--}}
+		@endif
+		{{ $slot }}
+		<span class="invalid-feedback">
+			@error((! empty($old)) ? $old : $name)
+				{{ $message }}
+			@elseif(isset($feedback))
+				{{ $feedback }}
+			@enderror
+		</span>
+	</div>
+	@isset($helper)
+		<span class="input-helper">{{ $helper }}</span>
+	@endif
+</div>
\ No newline at end of file
diff --git a/resources/views/components/form/select.blade.php b/resources/views/components/form/select.blade.php
new file mode 100644
index 0000000..560282b
--- /dev/null
+++ b/resources/views/components/form/select.blade.php
@@ -0,0 +1,62 @@
+<x-form.base {{ $attributes }}>
+	<input type="hidden" id="{{ $name }}_disabled" name="{{ $name }}" value="" disabled>
+	<select style="width: 80%;" class="form-select @error((! empty($old)) ? $old : $name) is-invalid @enderror" id="{{ $id ?? $name }}" name="{{ $name }}" @required(isset($required)) @disabled(isset($disabled))>
+		@if(empty($value) || isset($addnew) || isset($choose))
+			<option value=""></option>
+			@isset($addnew)
+				<option value="new">{{ $addnew ?: 'Add New' }}</option>
+			@endisset
+		@endif
+
+		@isset($options)
+			@empty($groupby)
+				@foreach($options as $option)
+					@continue(! Arr::get($option,'value'))
+					<option value="{{ Arr::get($option,'id') }}" @selected(Arr::get($option,'id') == old($old ?? $name,$value ?? ''))>{{ Arr::get($option,'value') }}</option>
+				@endforeach
+
+			@else
+				@foreach($options->groupBy($groupby) as $group)
+					<optgroup label="{{ $groupby == 'active' ? (Arr::get($group->first(),$groupby) ? 'Active' : 'Not Active') : Arr::get($group->first(),$groupby) }}">
+						@foreach($group as $option)
+							@continue(! Arr::get($option,'value'))
+							<option value="{{ Arr::get($option,'id') }}" @selected(Arr::get($option,'id') == old($old ?? $name,$value ?? ''))>{{ Arr::get($option,'value') }}</option>
+						@endforeach
+					</optgroup>
+				@endforeach
+			@endempty
+		@endisset
+	</select>
+</x-form.base>
+
+@pa(select2)
+
+@section('page-scripts')
+	<script type="text/javascript">
+		// Select doesnt support read only so we'll use disable and a new field
+		function {{$id ?? $name}}_readonly(on) {
+			if (on) {
+				$('#{{ $name }}').prop('disabled',true);
+				$('#{{ $name }}_disabled').prop('disabled',false).val($('#{{ $name }}').val());
+
+			} else {
+				$('#{{ $name }}').prop('disabled',false);
+				$('#{{ $name }}_disabled').prop('disabled',true);
+			}
+		}
+
+		$(document).ready(function() {
+			$('#{{ $id ?? $name }}').select2({
+				dropdownAutoWidth: true,
+				width: 'style',
+				@isset($addvalues)
+				tags: true,
+				@isset($placeholder)
+					placeholder: '{{ $placeholder ?? '' }}',
+				@endisset
+				allowClear: true,
+				@endisset
+			});
+		});
+	</script>
+@append
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 5ab5ceb..2aaec36 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -20,8 +20,6 @@
 		{{-- Scripts --}}
 		@section('scripts')
 			@include('layouts.partials.scripts')
-
-			@yield('page-scripts')
 		@show
 	</body>
 </html>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/htmlheader.blade.php b/resources/views/layouts/partials/htmlheader.blade.php
index e5af3bb..f410820 100644
--- a/resources/views/layouts/partials/htmlheader.blade.php
+++ b/resources/views/layouts/partials/htmlheader.blade.php
@@ -15,6 +15,10 @@
 
 	<link type="text/css" rel="stylesheet" href="{{ url('oldschool/css/main.css') }}" media="screen">
 
+	<!-- Page Asset Styles -->
+	{!! PageAssets::css() !!}
+
+	<!-- Page Styles -->
 	@yield('page-css')
 
 	@if(file_exists('css/fixes.css'))
@@ -22,5 +26,6 @@
 		<link rel="stylesheet" href="{{ asset('css/fixes.css') }}">
 	@endif
 
+	<!-- Favicon -->
 	<link type="image/png" rel="icon" href="{{ asset('favicon.ico') }}">
 </head>
diff --git a/resources/views/layouts/partials/scripts.blade.php b/resources/views/layouts/partials/scripts.blade.php
index 65e5186..af633a9 100644
--- a/resources/views/layouts/partials/scripts.blade.php
+++ b/resources/views/layouts/partials/scripts.blade.php
@@ -36,4 +36,10 @@
 				}, false)
 			});
 	})()
-</script>
\ No newline at end of file
+</script>
+
+<!-- Page Script Assets -->
+{!! PageAssets::js() !!}
+
+<!-- Page Scripts -->
+@yield('page-scripts')
\ No newline at end of file
diff --git a/resources/views/user/system/register.blade.php b/resources/views/user/system/register.blade.php
index b8906d4..1989d2b 100644
--- a/resources/views/user/system/register.blade.php
+++ b/resources/views/user/system/register.blade.php
@@ -21,27 +21,13 @@ use App\Models\System;
 						<div class="row">
 							<!-- Name -->
 							<div class="col-4">
-								<label for="system" class="form-label">BBS Name</label>
-								<div class="input-group has-validation">
-									<span class="input-group-text"><i class="bi bi-laptop-fill"></i></span>
-									<select style="width: 80%;" class="form-select @error('system_id') is-invalid @enderror" id="system" name="id" required>
-										<option value="">&nbsp;</option>
-										@foreach (System::select(['systems.id','systems.name'])
-											->active()
-											->where('id','<>',$setup->system_id)
-											->whereRaw('id NOT IN (SELECT system_id FROM "system_user")')
-											->cursor() as $oo)
-											<option value="{{ $oo->id }}" @if(old('id')===$oo->id)selected @endif>{{ $oo->name }}</option>
-										@endforeach
-									</select>
-									<span class="invalid-feedback" role="alert">
-										@error('system_id')
-											{{ $message }}
-										@else
-											BBS Name is required.
-										@enderror
-									</span>
-								</div>
+								@php($options = System::select(['systems.id','systems.name'])
+									->active()
+									->where('id','<>',$setup->system_id)
+									->whereRaw('id NOT IN (SELECT system_id FROM "system_user")')
+									->cursor())
+
+								<x-form.select id="system" name="id" icon="bi-laptop-fill" label="BBS Name" class="form-label" placeholder="See if your BBS exists, otherwise add it" feedback="BBS Name is required" helper="Enter your BBS name and press NEXT" :addvalues="true" :options="$options->map(fn($item,$key)=>['id'=>$item->id,'value'=>$item->name])" />
 							</div>
 						</div>
 
@@ -74,21 +60,7 @@ use App\Models\System;
 	</div>
 @endsection
 
-@section('page-css')
-	@css('select2')
-@append
 @section('page-scripts')
-	@js('select2')
-
-	<script type='text/javascript'>
-		$(document).ready(function() {
-			$('#system').select2({
-				placeholder: 'See if your BBS exists',
-				tags: true,
-			});
-		});
-	</script>
-
 	<script type='text/javascript'>
 		var system_id;
 		var noauth = new bootstrap.Modal(document.getElementById('no-auth'), {});