diff --git a/.php_cs b/.php_cs
index 0a31335..43e3bf0 100644
--- a/.php_cs
+++ b/.php_cs
@@ -1,4 +1,5 @@
 <?php
+ini_set('memory_limit','1024M');
 $finder = PhpCsFixer\Finder::create()
     ->notPath('bootstrap/cache')
     ->notPath('storage')
diff --git a/app/Blade/Directives/Icon.php b/app/Blade/Directives/Icon.php
index c37f370..3a65aae 100644
--- a/app/Blade/Directives/Icon.php
+++ b/app/Blade/Directives/Icon.php
@@ -1,4 +1,4 @@
-<?php 
+<?php
 
 namespace App\Blade\Directives;
 
@@ -6,11 +6,12 @@
 
 class Icon
 {
-	public static function register()
-	{
-		Blade::directive('icon', function ($icon) {
-			$icon = str_replace('\'', '"', $icon);
-			return "<i class={$icon}></i>";
+    public static function register()
+    {
+        Blade::directive('icon', function ($icon) {
+            $icon = str_replace('\'', '"', $icon);
+
+            return "<i class={$icon}></i>";
         });
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/app/Http/Controllers/Api/Datatable/Manage/UserController.php b/app/Http/Controllers/Api/Datatable/Manage/UserController.php
index dde416f..abf7ff9 100644
--- a/app/Http/Controllers/Api/Datatable/Manage/UserController.php
+++ b/app/Http/Controllers/Api/Datatable/Manage/UserController.php
@@ -4,12 +4,16 @@
 
 use App\Http\Controllers\Controller;
 use App\Models\User;
+use App\Transformers\Datatable\UserTransformer;
 use Illuminate\Http\Request;
 
 class UserController extends Controller
 {
     public function __invoke(Request $request)
     {
-        return app('datatables')->eloquent(User::datatable())->toJson();
+        return app('datatables')
+        	->eloquent(User::datatable())
+        	->setTransformer(new UserTransformer())
+        	->toJson();
     }
 }
diff --git a/app/Http/Controllers/LanguageController.php b/app/Http/Controllers/LanguageController.php
index 8d0702f..5994887 100644
--- a/app/Http/Controllers/LanguageController.php
+++ b/app/Http/Controllers/LanguageController.php
@@ -9,7 +9,7 @@ class LanguageController extends Controller
     public function __invoke(Request $request, $language)
     {
         app()->setLocale($language);
-        
+
         swal()->success(
             __('Language'),
             __('Current application language has been set to ' . __(strtoupper($language)) . '.')
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index 91f2897..0985205 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -43,11 +43,6 @@ class Kernel extends HttpKernel
             'throttle:60,1',
             'bindings',
         ],
-
-        'datatable' => [
-            'throttle:60,1',
-            'bindings',
-        ],
     ];
 
     /**
@@ -69,6 +64,6 @@ class Kernel extends HttpKernel
         'minify'      => \App\Http\Middleware\MinifyHtml::class,
         'jwt.auth'    => \Tymon\JWTAuth\Middleware\GetUserFromToken::class,
         'jwt.refresh' => \Tymon\JWTAuth\Middleware\RefreshToken::class,
-        'theme' => \CleaniqueCoders\Themer\Http\Middleware\ThemeLoader::class,
+        'theme'       => \CleaniqueCoders\Themer\Http\Middleware\ThemeLoader::class,
     ];
 }
diff --git a/app/Macros/Http/Response.php b/app/Macros/Http/Response.php
index 5901e9d..790f94d 100644
--- a/app/Macros/Http/Response.php
+++ b/app/Macros/Http/Response.php
@@ -8,7 +8,7 @@ class Response
 {
     public static function registerMacros()
     {
-        HttpResponse::macro('api', function ($data, $message = null, $status = true, $code = 200) {
+        HttpResponse::macro('api', function ($data = null, $message = null, $status = true, $code = 200) {
             return response()->json([
                 'data'    => $data,
                 'message' => $message,
diff --git a/app/Observers/ReferenceObserver.php b/app/Observers/ReferenceObserver.php
index b818ce4..aaabf41 100644
--- a/app/Observers/ReferenceObserver.php
+++ b/app/Observers/ReferenceObserver.php
@@ -21,14 +21,14 @@ class ReferenceObserver
      */
     public function creating(Model $model)
     {
-        if (Schema::hasColumn($model->getTable(), 'reference') && is_null($model->reference)) {
-            $count = $model::count();
+        $count = method_exists($model, 'getCounter') ? $model->getCounter() : ($model::count() ?? 0);
 
-            $reference = isset($model->reference_prefix) ?
-            generate_reference($model->reference_prefix, $count) :
-            generate_reference(config('document.prefix'), $count);
+        $column = method_exists($model, 'getReferenceColumn') ? $model->getReferenceColumn() : 'reference';
 
-            $model->reference = $reference;
+        $prefix = method_exists($model, 'referencePrefix') ? $model->referencePrefix() : config('document.prefix');
+
+        if (Schema::hasColumn($model->getTable(), $column) && is_null($model->$column)) {
+            $model->$column = generate_reference($prefix, $count);
         }
     }
 }
diff --git a/app/Providers/BladeServiceProvider.php b/app/Providers/BladeServiceProvider.php
index 2b0c524..858a1ca 100644
--- a/app/Providers/BladeServiceProvider.php
+++ b/app/Providers/BladeServiceProvider.php
@@ -3,26 +3,28 @@
 namespace App\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\Blade;
 
+/**
+ * @todo To create custom Blade Directives using Blade::component
+ */
 class BladeServiceProvider extends ServiceProvider
 {
     /**
      * Bootstrap services.
-     *
-     * @return void
      */
     public function boot()
     {
         \App\Blade\Directives\Icon::register();
+
+        // @todo to figure out, how to pass data to the custom component
+        Blade::component('components.cards.figure', 'figure');
     }
 
     /**
      * Register services.
-     *
-     * @return void
      */
     public function register()
     {
-        //
     }
 }
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
index 28d0133..dc912d7 100644
--- a/app/Providers/RouteServiceProvider.php
+++ b/app/Providers/RouteServiceProvider.php
@@ -68,7 +68,7 @@ protected function mapApiRoutes()
     protected function mapDatatableRoutes()
     {
         Route::prefix('api/datatable')
-             ->middleware('datatable')
+             ->middleware('api')
              ->as('api.datatable.')
              ->namespace($this->namespace . '\Api\Datatable')
              ->group(base_path('routes/datatable.php'));
diff --git a/app/Providers/ThemeServiceProvider.php b/app/Providers/ThemeServiceProvider.php
index 342ce5d..5aa49b8 100644
--- a/app/Providers/ThemeServiceProvider.php
+++ b/app/Providers/ThemeServiceProvider.php
@@ -2,10 +2,9 @@
 
 namespace App\Providers;
 
-use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
-use Illuminate\View\Compilers\Concerns\CompilesLayouts;
 use Illuminate\Support\Str;
+use Illuminate\View\Compilers\Concerns\CompilesLayouts;
 
 class ThemeServiceProvider extends ServiceProvider
 {
@@ -13,8 +12,6 @@ class ThemeServiceProvider extends ServiceProvider
 
     /**
      * Bootstrap services.
-     *
-     * @return void
      */
     public function boot()
     {
@@ -23,18 +20,16 @@ public function boot()
 
     /**
      * Register services.
-     *
-     * @return void
      */
     public function register()
     {
-        //
     }
 
     /**
      * Strip the parentheses from the given expression.
      *
-     * @param  string  $expression
+     * @param string $expression
+     *
      * @return string
      */
     public function stripParentheses($expression)
diff --git a/app/Services/Hashids.php b/app/Services/Hashids.php
index e83a5e6..e9da8a0 100644
--- a/app/Services/Hashids.php
+++ b/app/Services/Hashids.php
@@ -16,7 +16,7 @@ class Hashids
      */
     protected $hashids;
 
-    public function __construct($salt, $length, $alphabet)
+    public function __construct(string $salt, int $length, string $alphabet)
     {
         $this->hashids = new HashidsProvider($salt, $length, $alphabet);
     }
@@ -24,10 +24,15 @@ public function __construct($salt, $length, $alphabet)
     /**
      * Create an instance of Hashids.
      *
-     * @return App\Services\Hashids
+     * @return static
      */
-    public static function make($salt, $length, $alphabet)
+    public static function make(?string $salt, ?int $length, ?string $alphabet)
     {
+        $salt     = is_null($salt) ? config('hashids.salt') : config('hashids.salt') . $salt;
+        $length   = $length   ?? config('hashids.length');
+        $alphabet = $alphabet ?? config('hashids.alphabet');
+        $salt     = \Illuminate\Support\Facades\Hash::make($salt);
+
         return new self($salt, $length, $alphabet);
     }
 
@@ -50,11 +55,11 @@ public function encode(int $value): string
      *
      * @return int|null
      */
-    public function decode(string $value): int
+    public function decode(string $value): ?int
     {
         $value = $this->hashids->decode($value);
 
-        if (is_array($value)) {
+        if (is_array($value) && sizeof($value) > 0) {
             return $value[0];
         } else {
             return null;
diff --git a/app/Support/helpers.php b/app/Support/helpers.php
index 89adb63..fda332c 100644
--- a/app/Support/helpers.php
+++ b/app/Support/helpers.php
@@ -70,13 +70,8 @@ function generate_reference($prefix = 'DOCUMENT REFERENCE', $count = false)
  * Hashids Helper
  */
 if (! function_exists('hashids')) {
-    function hashids($salt = null, $length = null, $alphabet = null)
+    function hashids(?string $salt = null, ?int $length = null, ?string $alphabet = null): \App\Services\Hashids
     {
-        $salt     = is_null($salt) ? config('hashids.salt') : config('hashids.salt') . $salt;
-        $length   = is_null($length) ? config('hashids.length') : $length;
-        $alphabet = is_null($alphabet) ? config('hashids.alphabet') : $alphabet;
-        $salt     = \Illuminate\Support\Facades\Hash::make($salt);
-
         return \App\Services\Hashids::make($salt, $length, $alphabet);
     }
 }
diff --git a/app/Transformers/Datatable/UserTransformer.php b/app/Transformers/Datatable/UserTransformer.php
new file mode 100644
index 0000000..f422d1d
--- /dev/null
+++ b/app/Transformers/Datatable/UserTransformer.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Transformers\Datatable;
+
+use App\Models\User;
+use League\Fractal\TransformerAbstract;
+
+class UserTransformer extends TransformerAbstract
+{
+    /**
+     * @param \App\Models\User $user
+     *
+     * @return array
+     */
+    public function transform(User $user)
+    {
+        return [
+            'hashslug' => $user->hashslug,
+            'name'     => $user->name,
+            'email'    => $user->email,
+        ];
+    }
+}
diff --git a/config/theme.php b/config/theme.php
index 13f6986..15e330b 100644
--- a/config/theme.php
+++ b/config/theme.php
@@ -1,16 +1,17 @@
-<?php 
+<?php
+
 
 return [
-	/**
-	 * Set default theme. Default is Tabler.
-	 */
-	'default' => env('THEME_DEFAULT', 'tabler'),
+    /*
+     * Set default theme. Default is Tabler.
+     */
+    'default' => env('THEME_DEFAULT', 'tabler'),
 
-	/**
-	 * Available Themes in the application
-	 * This can be use for switchable theme feature.
-	 */
-	'themes' => [
-		'tabler'
-	]
-];
\ No newline at end of file
+    /*
+     * Available Themes in the application
+     * This can be use for switchable theme feature.
+     */
+    'themes' => [
+        'tabler',
+    ],
+];
diff --git a/phpunit.dusk.xml b/phpunit.dusk.xml
index b0ee354..bbf9d2c 100644
--- a/phpunit.dusk.xml
+++ b/phpunit.dusk.xml
@@ -26,6 +26,5 @@
         <env name="SESSION_DRIVER" value="array"/>
         <env name="QUEUE_DRIVER" value="sync"/>
         <env name="DB_CONNECTION" value="sqlite"/>
-        <env name="DB_DATABASE" value=":memory:"/>
     </php>
 </phpunit>
diff --git a/phpunit.xml b/phpunit.xml
index dd9d17d..e92be2d 100644
--- a/phpunit.xml
+++ b/phpunit.xml
@@ -25,10 +25,10 @@
     </filter>
     <php>
         <env name="APP_ENV" value="testing"/>
+        <env name="APP_KEY" value="base64:aO0cMJ57rU7MmkR3iYsRQOPNU+hN5gUTrWajrgvlW5I="/>
         <env name="CACHE_DRIVER" value="array"/>
         <env name="SESSION_DRIVER" value="array"/>
         <env name="QUEUE_DRIVER" value="sync"/>
         <env name="DB_CONNECTION" value="sqlite"/>
-        <env name="DB_DATABASE" value=":memory:"/>
     </php>
 </phpunit>
diff --git a/resources/lang/ms/passwords.php b/resources/lang/ms/passwords.php
index 6501460..d421f7e 100644
--- a/resources/lang/ms/passwords.php
+++ b/resources/lang/ms/passwords.php
@@ -11,10 +11,10 @@
     | has failed, such as for an invalid token or invalid new password.
     |
     */
-   
+
     'password' => 'Katalaluan hendaklah sekurang-kurangnya enam aksara dan mesti sama dengan katalaluan pengesahan.',
     'reset'    => 'Katalaluan telah ditetapkan semula.',
     'sent'     => 'Kami telah menghantar emel untuk tetapan katalaluan.',
     'token'    => 'Token tetapan semula katalaluan tidak sah.',
-    'user'     => "Kami tidak menjumpai pengguna dengan emel yang diberikan.",
+    'user'     => 'Kami tidak menjumpai pengguna dengan emel yang diberikan.',
 ];
diff --git a/resources/views/components/datatable.blade.php b/resources/views/components/datatable.blade.php
index 7f16992..79bf900 100644
--- a/resources/views/components/datatable.blade.php
+++ b/resources/views/components/datatable.blade.php
@@ -18,6 +18,10 @@
 				deferRender: false,
 				ajax: {
 					url:'{!! route($route_name, $param ?? null) !!}',
+					beforeSend: function (request) {
+				        request.setRequestHeader("Accept", '{{ config('api.header.accept') }}');
+				        request.setRequestHeader("X-CSRF-TOKEN", '{{ csrf_token() }}');
+				    },
 					{{ $datatable_data or ''}}
 				},
 				columns: @json($columns),
diff --git a/resources/views/components/forms/assets/datetimepicker.blade.php b/resources/views/components/forms/assets/datetimepicker.blade.php
new file mode 100644
index 0000000..c59aeb7
--- /dev/null
+++ b/resources/views/components/forms/assets/datetimepicker.blade.php
@@ -0,0 +1,8 @@
+@push('scripts')
+	<script src="{{ asset('js/moment.js') }}"></script>
+	<script src="{{ asset('js/datetimepicker.js') }}"></script>
+@endpush
+
+@push('styles')
+	<link rel="stylesheet" href="{{ asset('css/datetimepicker.css') }}">
+@endpush
\ No newline at end of file
diff --git a/resources/views/components/forms/assets/dropzone.blade.php b/resources/views/components/forms/assets/dropzone.blade.php
new file mode 100644
index 0000000..f1a9ce4
--- /dev/null
+++ b/resources/views/components/forms/assets/dropzone.blade.php
@@ -0,0 +1,7 @@
+@push('sctyles')
+	<link rel="stylesheet" href="{{ asset('css/dropzone.css') }}">
+@endpush
+
+@push('scripts')
+	<script type="text/javascript" src="{{ asset('js/dropzone.js') }}"></script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/components/forms/assets/select2.blade.php b/resources/views/components/forms/assets/select2.blade.php
new file mode 100644
index 0000000..f04368c
--- /dev/null
+++ b/resources/views/components/forms/assets/select2.blade.php
@@ -0,0 +1,7 @@
+@push('styles')
+	<link rel="stylesheet" href="{{ asset('css/select2.css') }}">
+@endpush
+
+@push('scripts')
+	<script type="text/javascript" src="{{ asset('js/select2.js') }}"></script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/components/forms/assets/textarea.blade.php b/resources/views/components/forms/assets/textarea.blade.php
new file mode 100644
index 0000000..954e069
--- /dev/null
+++ b/resources/views/components/forms/assets/textarea.blade.php
@@ -0,0 +1,10 @@
+@push('styles')
+	<style>
+		.ck-editor__editable {
+	    	min-height: 480px;
+		}
+	</style>
+@endpush
+@push('scripts')
+	<script src="{{ asset('js/ckeditor/ckeditor.js') }}"></script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/components/forms/checkbox.blade.php b/resources/views/components/forms/checkbox.blade.php
new file mode 100644
index 0000000..05aa21d
--- /dev/null
+++ b/resources/views/components/forms/checkbox.blade.php
@@ -0,0 +1,22 @@
+<label class="custom-control custom-checkbox">
+	<input type="checkbox" class="custom-control-input {{ $class or '' }}" 
+		@isset($id)
+            id="{{ $id }}" 
+        @else
+            id="{{ snake_case($label) }}" 
+        @endisset
+
+        @isset($name)
+            name="{{ $name }}" 
+        @else
+            name="{{ snake_case($label) }}" 
+        @endisset
+
+		value="{{ $value or 1 }}"
+
+		@isset($data) 
+			@foreach($data as $key => $value) data-{{ $key }}="{{ $value }}" @endforeach
+		@endisset
+		{{ isset($checked) ? 'checked' : '' }}>
+	<span class="custom-control-label">{{ __($label) }}</span>
+</label>
\ No newline at end of file
diff --git a/resources/views/components/forms/datetimepicker.blade.php b/resources/views/components/forms/datetimepicker.blade.php
new file mode 100644
index 0000000..dc409b3
--- /dev/null
+++ b/resources/views/components/forms/datetimepicker.blade.php
@@ -0,0 +1,45 @@
+@push('scripts')
+	<script>
+		jQuery(document).ready(function($) {
+            $('#datetimepicker-{{ $id }}').datetimepicker(@isset($config) @json($config) @endisset);
+		});
+	</script>
+@endpush
+
+<div class="form-group row">
+    <label for="{{ snake_case($label) }}" 
+        class="{{ $label_class or 'col col-form-label' }}">
+        {{ __($label) }}
+    </label>
+    <div class="input-group date {{ $input_container_class or 'col' }}" id="datetimepicker-{{ $id }}" data-target-input="nearest">
+        <input type="text" 
+            @isset($readonly)
+            readonly="true" 
+            @endisset
+            class=" datetimepicker-input form-control{{ $errors->has(snake_case($label)) ? ' is-invalid' : '' }} {{ $input_classes or '' }}"
+            data-target="#datetimepicker-{{ $id }}"
+            @isset($required) required @endisset 
+            @isset($name)
+                name="{{ $name }}" 
+            @else
+                name="{{ snake_case($label) }}" 
+            @endisset
+            @isset($id)
+                id="{{ $id }}" 
+            @else
+                id="{{ snake_case($label) }}" 
+            @endisset
+            @isset($value)
+                value="{{ $value }}"
+            @endisset
+            autofocus/>
+        <div class="input-group-append" data-target="#datetimepicker-{{ $id }}" data-toggle="datetimepicker">
+            <div class="input-group-text"><i class="fe fe-calendar"></i></div>
+        </div>
+    </div>
+    @if ($errors->has(snake_case($label)))
+        <span class="invalid-feedback">
+            <strong>{{ $errors->first(snake_case($label)) }}</strong>
+        </span>
+    @endif
+</div>
\ No newline at end of file
diff --git a/resources/views/components/forms/file.blade.php b/resources/views/components/forms/file.blade.php
new file mode 100644
index 0000000..5269735
--- /dev/null
+++ b/resources/views/components/forms/file.blade.php
@@ -0,0 +1,46 @@
+<div class="form-group row">
+    <label for="{{ snake_case($label) }}" 
+        class="{{ $label_class or 'col col-form-label' }}">
+        {{ __($label) }}
+    </label>
+
+    <div class="{{ $input_container_class or 'col-md-12' }}">
+        <input 
+            @isset($readonly)
+            readonly="true" 
+            @endisset
+            type="{{ $type or 'file' }}" 
+            placeholder="@isset($placeholder) {{ __($placeholder) }} @else {{ __($label) }} @endisset" 
+            class="form-control{{ $errors->has(snake_case($label)) ? ' is-invalid' : '' }} {{ $input_classes or '' }}" 
+            
+            @isset($id)
+                id="{{ $id }}" 
+            @else
+                id="{{ snake_case($label) }}" 
+            @endisset
+
+            @isset($name)
+                name="{{ $name }}" 
+            @else
+                name="{{ snake_case($label) }}" 
+            @endisset
+
+            value="{{ old(snake_case($label)) }}" 
+            
+            @isset($accept)
+                accept="{{ $accept }}"
+            @endisset
+            
+            @isset($required) required @endisset autofocus>
+
+            @isset($multiple)
+                <div class="btn btn-danger btn-sm float-right" onclick="$(this).parent().parent().remove()">{{ __('Batal') }}</div>
+            @endisset
+
+        @if ($errors->has(snake_case($label)))
+            <span class="invalid-feedback">
+                <strong>{{ $errors->first(snake_case($label)) }}</strong>
+            </span>
+        @endif
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/forms/files.blade.php b/resources/views/components/forms/files.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/components/forms/hidden-form.blade.php b/resources/views/components/forms/hidden-form.blade.php
new file mode 100644
index 0000000..36cbade
--- /dev/null
+++ b/resources/views/components/forms/hidden-form.blade.php
@@ -0,0 +1,7 @@
+<form id="{{ $id or 'id-hidden-form'}}" 
+	action="{{ $action }}" 
+	method="{{ $method or 'POST' }}" 
+	style="display: none;">
+    @csrf
+    {{ $inputs or '' }}
+</form>
\ No newline at end of file
diff --git a/resources/views/components/forms/input.blade.php b/resources/views/components/forms/input.blade.php
index 2aaff00..015ce51 100644
--- a/resources/views/components/forms/input.blade.php
+++ b/resources/views/components/forms/input.blade.php
@@ -1,32 +1,52 @@
 <div class="form-group row">
-    <label for="{{ snake_case($input_label) }}" 
-        class="{{ $input_label_class or 'col col-form-label' }}">
-        {{ __($input_label) }}
+    <label for="{{ snake_case($label) }}" 
+        class="{{ $label_class or 'col col-form-label' }}">
+        {{ __($label) }}
     </label>
 
     <div class="{{ $input_container_class or 'col' }}">
         <input 
+            @isset($readonly)
+            readonly="true" 
+            @endisset
             type="{{ $type or 'text' }}" 
-            class="form-control{{ $errors->has(snake_case($input_label)) ? ' is-invalid' : '' }}" 
+            placeholder="@isset($placeholder) {{ __($placeholder) }} @else {{ __($label) }} @endisset" 
+            class="form-control{{ $errors->has(snake_case($label)) ? ' is-invalid' : '' }} {{ $input_classes or '' }}" 
             
             @isset($id)
                 id="{{ $id }}" 
             @else
-                id="{{ snake_case($input_label) }}" 
+                id="{{ snake_case($label) }}" 
             @endisset
 
             @isset($name)
                 name="{{ $name }}" 
             @else
-                name="{{ snake_case($input_label) }}" 
+                name="{{ snake_case($label) }}" 
+            @endisset
+            
+            @isset($onkeyup)
+                onkeyup="{{$onkeyup}}"
+            @endisset
+            
+            @isset($step)
+                step="{{$step}}"
             @endisset
 
-            value="{{ old(snake_case($input_label)) }}" 
+            @isset($value)
+                value="{{$value}}"
+            @endisset
+
+            @isset($readonly)
+                readonly="{{$readonly}}"
+            @endisset
+            
+            value="{{ old(snake_case($label)) }}" 
             @isset($required) required @endisset autofocus>
 
-        @if ($errors->has(snake_case($input_label)))
+        @if ($errors->has(snake_case($label)))
             <span class="invalid-feedback">
-                <strong>{{ $errors->first(snake_case($input_label)) }}</strong>
+                <strong>{{ $errors->first(snake_case($label)) }}</strong>
             </span>
         @endif
     </div>
diff --git a/resources/views/components/forms/radio.blade.php b/resources/views/components/forms/radio.blade.php
new file mode 100644
index 0000000..88d1c53
--- /dev/null
+++ b/resources/views/components/forms/radio.blade.php
@@ -0,0 +1,9 @@
+<label class="custom-control custom-radio">
+	<input type="radio" class="custom-control-input" 
+		name="{{ $name }}" value="{{ $value }}" 
+		{{ isset($checked) ? 'checked' : '' }} 
+		@isset($name)
+            onclick="{{ $onclick }}" 
+        @endisset>
+	<span class="custom-control-label">{{ __($label) }}</span>
+</label>
\ No newline at end of file
diff --git a/resources/views/components/forms/select-multiple.blade.php b/resources/views/components/forms/select-multiple.blade.php
index d522739..e60c543 100644
--- a/resources/views/components/forms/select-multiple.blade.php
+++ b/resources/views/components/forms/select-multiple.blade.php
@@ -1,24 +1,24 @@
 <div class="form-group row">
-    <label for="{{ snake_case($input_label) }}" 
-        class="{{ $input_label_class or 'col col-form-label' }}">
-        {{ __($input_label) }}
+    <label for="{{ snake_case($label) }}" 
+        class="{{ $label_class or 'col col-form-label' }}">
+        {{ __($label) }}
     </label>
     <div class="{{ $input_container_class or 'col' }}">
         {{
             html()->select()
-                ->class('select2 w-100 form-control ' . ($errors->has(snake_case($input_label)) ? ' is-invalid' : ''))
-                ->name((isset($name) ? $name : snake_case($input_label)) . '[]')
-                ->id((isset($id) ? $id : snake_case($input_label)) . '[]')
+                ->class('select2 w-100 form-control ' . ($errors->has(snake_case($label)) ? ' is-invalid' : ''))
+                ->name((isset($name) ? $name : snake_case($label)) . '[]')
+                ->id((isset($id) ? $id : snake_case($label)))
                 ->options($options)
-                ->value(old(snake_case($input_label)))
+                ->value(old(snake_case($label)))
                 ->attribute('autofocus', true)
-                ->attribute('multiple', true)
+                ->attribute('multiple', 'multiple')
                 ->attribute('style', 'width:100%')
         }}
 
-        @if ($errors->has(snake_case($input_label)))
+        @if ($errors->has(snake_case($label)))
             <span class="invalid-feedback">
-                <strong>{{ $errors->first(snake_case($input_label)) }}</strong>
+                <strong>{{ $errors->first(snake_case($label)) }}</strong>
             </span>
         @endif
     </div>
diff --git a/resources/views/components/forms/select.blade.php b/resources/views/components/forms/select.blade.php
index 2e0f602..ac7bd65 100644
--- a/resources/views/components/forms/select.blade.php
+++ b/resources/views/components/forms/select.blade.php
@@ -1,23 +1,25 @@
 <div class="form-group row">
-    <label for="{{ snake_case($input_label) }}" 
-        class="{{ $input_label_class or 'col col-form-label' }}">
-        {{ __($input_label) }}
+    <label for="{{ snake_case($label) }}" 
+        class="{{ $label_class or 'col col-form-label' }}">
+        {{ __($label) }}
     </label>
 
     <div class="{{ $input_container_class or 'col' }}">
         {{
             html()->select()
-                ->class('select2 form-control ' . ($errors->has(snake_case($input_label)) ? ' is-invalid' : ''))
-                ->name((isset($name) ? $name : snake_case($input_label)))
-                ->id((isset($id) ? $id : snake_case($input_label)))
+                ->class("select2 form-control w-100 ".( $input_classes ?? '' ) . ($errors->has(snake_case($label)) ? ' is-invalid' : ''))
+                ->name((isset($name) ? $name : snake_case($label)))
+                ->id((isset($id) ? $id : snake_case($label)))
                 ->options($options)
-                ->value(old(snake_case($input_label)))
+                ->value(old(snake_case($label)))
                 ->attribute('autofocus', true)
+                ->attribute('style', 'width:100%;')
+                ->placeholder((isset($placeholder) ? $placeholder : ''))
         }}
 
-        @if ($errors->has(snake_case($input_label)))
+        @if ($errors->has(snake_case($label)))
             <span class="invalid-feedback">
-                <strong>{{ $errors->first(snake_case($input_label)) }}</strong>
+                <strong>{{ $errors->first(snake_case($label)) }}</strong>
             </span>
         @endif
     </div>
diff --git a/resources/views/components/forms/submit.blade.php b/resources/views/components/forms/submit.blade.php
new file mode 100644
index 0000000..10c9c1a
--- /dev/null
+++ b/resources/views/components/forms/submit.blade.php
@@ -0,0 +1,8 @@
+<div class="btn-group float-right">
+	{{ html()->a(route($route), __('Batal'))->class('btn btn-outline-default') }}
+
+    <button class="btn btn-primary">
+        @icon('fe fe-save')
+        {{ __('Kemaskini') }}
+    </button>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/forms/switch.blade.php b/resources/views/components/forms/switch.blade.php
new file mode 100644
index 0000000..d7ef0c8
--- /dev/null
+++ b/resources/views/components/forms/switch.blade.php
@@ -0,0 +1,6 @@
+<label class="custom-switch">
+        @isset($label_front)<span class="custom-switch-description">{{ $label_front }}&nbsp;</span>@endif
+	<input type="checkbox" class="custom-switch-input" id="{{ $id }}" name="{{ $name }}" {{ $checked ? 'checked' : '' }}>
+	<span class="custom-switch-indicator"></span>
+	<span class="custom-switch-description">{{ $label }}</span>
+</label>
diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
new file mode 100644
index 0000000..0ecf5a0
--- /dev/null
+++ b/resources/views/components/forms/textarea.blade.php
@@ -0,0 +1,34 @@
+<div class="form-group row">
+    <label for="{{ snake_case($label) }}" 
+        class="{{ $label_class or 'col col-form-label' }}">
+        {{ __($label) }}
+    </label>
+
+    <div class="{{ $input_container_class or 'col' }}">
+        <textarea 
+            @isset($style) style="{{ $style }}" @endisset
+            placeholder="@isset($placeholder) {{ __($placeholder) }} @else {{ __($label) }} @endisset" 
+            class="form-control{{ $errors->has(snake_case($label)) ? ' is-invalid' : '' }}" 
+            
+            @isset($id)
+                id="{{ $id }}" 
+            @else
+                id="{{ snake_case($label) }}" 
+            @endisset
+
+            @isset($name)
+                name="{{ $name }}" 
+            @else
+                name="{{ snake_case($label) }}" 
+            @endisset
+
+            value="{{ old(snake_case($label)) }}" 
+            @isset($required) required @endisset autofocus></textarea>
+
+        @if ($errors->has(snake_case($label)))
+            <span class="invalid-feedback">
+                <strong>{{ $errors->first(snake_case($label)) }}</strong>
+            </span>
+        @endif
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/auth.blade.php b/resources/views/layouts/auth.blade.php
index 12cd501..8e3d7d1 100644
--- a/resources/views/layouts/auth.blade.php
+++ b/resources/views/layouts/auth.blade.php
@@ -6,13 +6,6 @@
 	<div class="container">
 	  <div class="row">
 		<div class="col col-login mx-auto">
-		  <div class="text-center mb-6">
-			<p class="h-6">
-				@include('components.logo', ['height' => '64px'])
-			</p>
-			<br>
-			<small>{{ config('app.name') }}</small>
-		  </div>
 		  {{ $auth_content or '' }}
 		</div>
 	  </div>
diff --git a/resources/views/manage/users/partials/forms/create.blade.php b/resources/views/manage/users/partials/forms/create.blade.php
index 7068f36..5638a32 100644
--- a/resources/views/manage/users/partials/forms/create.blade.php
+++ b/resources/views/manage/users/partials/forms/create.blade.php
@@ -5,23 +5,23 @@
 ])
 
 @include('components.forms.input', [
-	'input_label' => 'Name',
+	'label' => 'Name',
 ])
 @include('components.forms.input', [
-	'input_label' => 'E-mail',
+	'label' => 'E-mail',
 	'name' => 'email',
 	'type' => 'email'
 ])
 @include('components.forms.input', [
-	'input_label' => 'Password',
+	'label' => 'Password',
 	'type' => 'password'
 ])
 @include('components.forms.input', [
-	'input_label' => 'Password Confirmation',
+	'label' => 'Password Confirmation',
 	'type' => 'password'
 ])
 @include('components.forms.select-multiple', [
-	'input_label' => 'Role',
+	'label' => 'Role',
 	'name' => 'roles',
 	'options' => roles()->where('guard_name', 'web')->pluck('name', 'id'),
 ])
\ No newline at end of file
diff --git a/routes/api.php b/routes/api.php
index f38b460..43fcf0f 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -11,33 +11,7 @@
 |
  */
 
-Route::group([
-    'namespace' => 'Auth',
-    'prefix'    => 'auth',
-    'as'        => 'auth.',
-], function () {
-    Route::post('login', 'LoginController')->name('login');
-    Route::post('logout', 'LogoutController')->name('logout');
-    Route::post('register', 'RegisterController')->name('register');
-    Route::post('forgot/password', 'ForgotPasswordController')->name('forgot.password');
-});
-
-Route::group([
-    'namespace'  => 'User',
-    'prefix'     => 'user',
-    'as'         => 'user.',
-    'middleware' => ['jwt.auth'],
-], function () {
-    Route::get('profile', 'ProfileController@show')->name('profile.show');
-});
-
-/*
- * @todo protect routes, allow for self-consume API
- */
-Route::group([
-    'namespace' => 'Manage',
-    'prefix'    => 'manage',
-    'as'        => 'manage.',
-], function () {
-    Route::resource('users', 'UserController')->except('create', 'edit');
-});
+collect(glob(base_path('/routes/api/*.php')))
+    ->each(function ($path) {
+        require $path;
+    });
diff --git a/routes/api/auth.php b/routes/api/auth.php
new file mode 100644
index 0000000..0542636
--- /dev/null
+++ b/routes/api/auth.php
@@ -0,0 +1,12 @@
+<?php
+
+Route::group([
+    'namespace' => 'Auth',
+    'prefix'    => 'auth',
+    'as'        => 'auth.',
+], function () {
+    Route::post('login', 'LoginController')->name('login');
+    Route::post('logout', 'LogoutController')->name('logout');
+    Route::post('register', 'RegisterController')->name('register');
+    Route::post('forgot/password', 'ForgotPasswordController')->name('forgot.password');
+});
diff --git a/routes/api/manage.php b/routes/api/manage.php
new file mode 100644
index 0000000..7bc11b6
--- /dev/null
+++ b/routes/api/manage.php
@@ -0,0 +1,13 @@
+<?php
+
+
+/*
+ * @todo protect routes, allow for self-consume API
+ */
+Route::group([
+    'namespace' => 'Manage',
+    'prefix'    => 'manage',
+    'as'        => 'manage.',
+], function () {
+    Route::resource('users', 'UserController')->except('create', 'edit');
+});
diff --git a/routes/api/user.php b/routes/api/user.php
new file mode 100644
index 0000000..2033a6e
--- /dev/null
+++ b/routes/api/user.php
@@ -0,0 +1,11 @@
+<?php
+
+
+Route::group([
+    'namespace'  => 'User',
+    'prefix'     => 'user',
+    'as'         => 'user.',
+    'middleware' => ['jwt.auth'],
+], function () {
+    Route::get('profile', 'ProfileController@show')->name('profile.show');
+});
diff --git a/routes/breadcrumbs.php b/routes/breadcrumbs.php
index 77b0144..e301cc1 100644
--- a/routes/breadcrumbs.php
+++ b/routes/breadcrumbs.php
@@ -5,44 +5,7 @@
     $breadcrumbs->push(__('Home'), route('home'));
 });
 
-// Home > Manage Users
-Breadcrumbs::register('manage.users.index', function ($breadcrumbs) {
-    $breadcrumbs->parent('home');
-    $breadcrumbs->push(__('Manage Users'), route('manage.users.index'));
-});
-
-// Home > Manage Users > User Details
-Breadcrumbs::register('manage.users.show', function ($breadcrumbs, $id) {
-    $breadcrumbs->parent('manage.users.index');
-    $breadcrumbs->push(__('User Details'), route('manage.users.show', $id));
-});
-
-// Home > Manage Users > Edit User
-Breadcrumbs::register('manage.users.edit', function ($breadcrumbs, $id) {
-    $breadcrumbs->parent('manage.users.index');
-    $breadcrumbs->push(__('Edit User'), route('manage.users.edit', $id));
-});
-
-// Home > Profile
-Breadcrumbs::register('user.show', function ($breadcrumbs) {
-    $breadcrumbs->parent('home');
-    $breadcrumbs->push(__('Profile'), route('user.show'));
-});
-
-// Home > Profile > Avatar
-Breadcrumbs::register('user.avatar.show', function ($breadcrumbs) {
-    $breadcrumbs->parent('user.show');
-    $breadcrumbs->push(__('Avatar'), route('user.avatar.show'));
-});
-
-// Home > Profile > Security
-Breadcrumbs::register('user.password.show', function ($breadcrumbs) {
-    $breadcrumbs->parent('user.show');
-    $breadcrumbs->push(__('Security'), route('user.password.show'));
-});
-
-// Home > Profile > Logs
-Breadcrumbs::register('user.logs', function ($breadcrumbs) {
-    $breadcrumbs->parent('user.show');
-    $breadcrumbs->push(__('Logs'), route('user.logs'));
-});
+collect(glob(base_path('/routes/breadcrumbs/*.php')))
+    ->each(function ($path) {
+        require $path;
+    });
diff --git a/routes/breadcrumbs/profile.php b/routes/breadcrumbs/profile.php
new file mode 100644
index 0000000..a002ef8
--- /dev/null
+++ b/routes/breadcrumbs/profile.php
@@ -0,0 +1,26 @@
+<?php
+
+
+// Home > Profile
+Breadcrumbs::register('user.show', function ($breadcrumbs) {
+    $breadcrumbs->parent('home');
+    $breadcrumbs->push(__('Profile'), route('user.show'));
+});
+
+// Home > Profile > Avatar
+Breadcrumbs::register('user.avatar.show', function ($breadcrumbs) {
+    $breadcrumbs->parent('user.show');
+    $breadcrumbs->push(__('Avatar'), route('user.avatar.show'));
+});
+
+// Home > Profile > Security
+Breadcrumbs::register('user.password.show', function ($breadcrumbs) {
+    $breadcrumbs->parent('user.show');
+    $breadcrumbs->push(__('Security'), route('user.password.show'));
+});
+
+// Home > Profile > Logs
+Breadcrumbs::register('user.logs', function ($breadcrumbs) {
+    $breadcrumbs->parent('user.show');
+    $breadcrumbs->push(__('Logs'), route('user.logs'));
+});
diff --git a/routes/breadcrumbs/user.php b/routes/breadcrumbs/user.php
new file mode 100644
index 0000000..4a9f5af
--- /dev/null
+++ b/routes/breadcrumbs/user.php
@@ -0,0 +1,20 @@
+<?php
+
+
+// Home > Manage Users
+Breadcrumbs::register('manage.users.index', function ($breadcrumbs) {
+    $breadcrumbs->parent('home');
+    $breadcrumbs->push(__('Manage Users'), route('manage.users.index'));
+});
+
+// Home > Manage Users > User Details
+Breadcrumbs::register('manage.users.show', function ($breadcrumbs, $id) {
+    $breadcrumbs->parent('manage.users.index');
+    $breadcrumbs->push(__('User Details'), route('manage.users.show', $id));
+});
+
+// Home > Manage Users > Edit User
+Breadcrumbs::register('manage.users.edit', function ($breadcrumbs, $id) {
+    $breadcrumbs->parent('manage.users.index');
+    $breadcrumbs->push(__('Edit User'), route('manage.users.edit', $id));
+});
diff --git a/routes/web.php b/routes/web.php
index 27d80dc..9fe915b 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -12,30 +12,10 @@
  */
 
 Route::get('/', 'WelcomeController')->name('welcome');
-
-Auth::routes();
 Route::get('/home', 'HomeController@index')->name('home');
-
-Route::group([
-    'namespace' => 'User',
-    'prefix'    => 'user',
-    'as'        => 'user.',
-], function () {
-    Route::get('/', 'UserController@show')->name('show');
-    Route::put('/', 'UserController@update')->name('update');
-    Route::get('/password', 'PasswordController@show')->name('password.show');
-    Route::put('/password', 'PasswordController@update')->name('password.update');
-    Route::get('/logs', 'LogController')->name('logs');
-    Route::get('/avatar', 'AvatarController@show')->name('avatar.show');
-    Route::post('/avatar', 'AvatarController@store')->name('avatar.store');
-});
-
 Route::get('/language/{language}', 'LanguageController')->name('language');
 
-Route::group([
-    'namespace' => 'Manage',
-    'prefix'    => 'manage',
-    'as'        => 'manage.',
-], function () {
-    Route::resource('users', 'UserController')->except('store', 'update', 'destroy');
-});
+collect(glob(base_path('/routes/web/*.php')))
+    ->each(function ($path) {
+        require $path;
+    });
diff --git a/routes/web/auth.php b/routes/web/auth.php
new file mode 100644
index 0000000..fb11ac2
--- /dev/null
+++ b/routes/web/auth.php
@@ -0,0 +1,4 @@
+<?php
+
+
+Auth::routes();
diff --git a/routes/web/manage.php b/routes/web/manage.php
new file mode 100644
index 0000000..a3e2c0f
--- /dev/null
+++ b/routes/web/manage.php
@@ -0,0 +1,10 @@
+<?php
+
+
+Route::group([
+    'namespace' => 'Manage',
+    'prefix'    => 'manage',
+    'as'        => 'manage.',
+], function () {
+    Route::resource('users', 'UserController')->except('store', 'update', 'destroy');
+});
diff --git a/routes/web/user.php b/routes/web/user.php
new file mode 100644
index 0000000..97672ff
--- /dev/null
+++ b/routes/web/user.php
@@ -0,0 +1,16 @@
+<?php
+
+
+Route::group([
+    'namespace' => 'User',
+    'prefix'    => 'user',
+    'as'        => 'user.',
+], function () {
+    Route::get('/', 'UserController@show')->name('show');
+    Route::put('/', 'UserController@update')->name('update');
+    Route::get('/password', 'PasswordController@show')->name('password.show');
+    Route::put('/password', 'PasswordController@update')->name('password.update');
+    Route::get('/logs', 'LogController')->name('logs');
+    Route::get('/avatar', 'AvatarController@show')->name('avatar.show');
+    Route::post('/avatar', 'AvatarController@store')->name('avatar.store');
+});