diff --git a/.eslintrc.js b/.eslintrc.js
index 9f18230..47199bc 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,7 +11,8 @@ module.exports = {
     ],
     rules: {
         "vue/multi-word-component-names": "off",
-        indent: ["error", 4],
+        indent: ["off", 4, { ignoredNodes: ["ConditionalExpression"] }],
+        "@typescript-eslint/no-inferrable-types": "off",
     },
     plugins: ["jsdoc", "@typescript-eslint"],
     parser: "vue-eslint-parser",
diff --git a/.github/workflows/laravel.yml b/.github/workflows/laravel.yml
index f566358..8b710ea 100644
--- a/.github/workflows/laravel.yml
+++ b/.github/workflows/laravel.yml
@@ -58,5 +58,6 @@ jobs:
                       php artisan migrate --force
                       npm install
                       npm run build
+                      npm run prepare
                       php artisan optimize
                       php artisan up
diff --git a/.gitignore b/.gitignore
index ba18049..37360a5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -237,4 +237,11 @@ dist/
 ### This Project ###
 /public/uploads
 /public/build
-*.key
\ No newline at end of file
+/public/tinymce
+*.key
+
+### Synk ###
+.dccache
+
+### TempCodeRunner ###
+tempCodeRunnerFile.*
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 37c63e9..3128a3c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,8 @@
     "editor.formatOnType": true,
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": true,
+        "source.organizeImports": true
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "[vue]": {
diff --git a/app/Filters/FilterAbstract.php b/app/Filters/FilterAbstract.php
index ee93886..13d9e62 100644
--- a/app/Filters/FilterAbstract.php
+++ b/app/Filters/FilterAbstract.php
@@ -165,9 +165,10 @@ abstract class FilterAbstract
      *
      * @param array     $attributes Attributes currently visible.
      * @param User|null $user       Current logged in user or null.
+     * @param object    $modelData  Model data if a single object is requested.
      * @return mixed
      */
-    protected function seeAttributes(array $attributes, mixed $user)
+    protected function seeAttributes(array $attributes, mixed $user, ?object $modelData = null)
     {
         return $attributes;
     }
@@ -224,7 +225,7 @@ abstract class FilterAbstract
         }
 
         /* Run attribute modifiers*/
-        $modifiedAttribs = $this->seeAttributes($attributes, $this->request->user());
+        $modifiedAttribs = $this->seeAttributes($attributes, $this->request->user(), $model);
         if (is_array($modifiedAttribs) === true) {
             $attributes = $modifiedAttribs;
         }
diff --git a/app/Filters/UserFilter.php b/app/Filters/UserFilter.php
index 1aa5849..398969d 100644
--- a/app/Filters/UserFilter.php
+++ b/app/Filters/UserFilter.php
@@ -19,11 +19,12 @@ class UserFilter extends FilterAbstract
      *
      * @param array     $attributes Attributes currently visible.
      * @param User|null $user       Current logged in user or null.
+     * @param object    $userData   User model if single object is requested.
      * @return mixed
      */
-    protected function seeAttributes(array $attributes, mixed $user)
+    protected function seeAttributes(array $attributes, mixed $user, ?object $userData = null)
     {
-        if ($user?->hasPermission('admin/users') !== true) {
+        if ($user?->hasPermission('admin/users') !== true && ($user === null || $userData === null || $user?->id !== $userData?->id)) {
             return ['id', 'username'];
         }
     }
diff --git a/app/Http/Controllers/Api/AttachmentController.php b/app/Http/Controllers/Api/AttachmentController.php
new file mode 100644
index 0000000..36a5acc
--- /dev/null
+++ b/app/Http/Controllers/Api/AttachmentController.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Models\Attachment;
+use Illuminate\Http\Request;
+
+class AttachmentController extends ApiController
+{
+    /**
+     * ApplicationController constructor.
+     */
+    public function __construct()
+    {
+        $this->middleware('auth:sanctum')
+        ->except(['store', 'destroyByEmail']);
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  \App\Models\Attachment  $attachment
+     * @return \Illuminate\Http\Response
+     */
+    public function show(Attachment $attachment)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  \App\Models\Attachment  $attachment
+     * @return \Illuminate\Http\Response
+     */
+    public function edit(Attachment $attachment)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \App\Models\Attachment  $attachment
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, Attachment  $attachment)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \App\Models\Attachment  $attachment
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(Attachment  $attachment)
+    {
+        //
+    }
+}
diff --git a/app/Http/Controllers/Api/MediaController.php b/app/Http/Controllers/Api/MediaController.php
index f223bc7..9fdf11fa 100644
--- a/app/Http/Controllers/Api/MediaController.php
+++ b/app/Http/Controllers/Api/MediaController.php
@@ -59,7 +59,7 @@ class MediaController extends ApiController
     {
         $file = $request->file('file');
         if ($file === null) {
-            return $this->respondError(['file' => 'An error occurred uploading the file to the server.']);
+            return $this->respondWithErrors(['file' => 'The browser did not upload the file correctly to the server.']);
         }
 
         if ($file->isValid() !== true) {
@@ -68,9 +68,9 @@ class MediaController extends ApiController
                 case UPLOAD_ERR_FORM_SIZE:
                     return $this->respondTooLarge();
                 case UPLOAD_ERR_PARTIAL:
-                    return $this->respondError(['file' => 'The file upload was interrupted.']);
+                    return $this->respondWithErrors(['file' => 'The file upload was interrupted.']);
                 default:
-                    return $this->respondError(['file' => 'An error occurred uploading the file to the server.']);
+                    return $this->respondWithErrors(['file' => 'An error occurred uploading the file to the server.']);
             }
         }
 
@@ -82,7 +82,7 @@ class MediaController extends ApiController
         $mime = $file->getMimeType();
         $fileInfo = Media::store($file, empty($request->input('permission')));
         if ($fileInfo === null) {
-            return $this->respondError(
+            return $this->respondWithErrors(
                 ['file' => 'The file could not be stored on the server'],
                 HttpResponseCodes::HTTP_INTERNAL_SERVER_ERROR
             );
@@ -121,7 +121,7 @@ class MediaController extends ApiController
             $oldPath = $medium->path();
             $fileInfo = Media::store($file, empty($request->input('permission')));
             if ($fileInfo === null) {
-                return $this->respondError(
+                return $this->respondWithErrors(
                     ['file' => 'The file could not be stored on the server'],
                     HttpResponseCodes::HTTP_INTERNAL_SERVER_ERROR
                 );
@@ -218,6 +218,7 @@ class MediaController extends ApiController
             $headerExpires = $updated_at->addMonth()->toRfc2822String();
         }//end if
 
+        // deepcode ignore InsecureHash: Browsers expect Etag to be a md5 hash
         $headerEtag = md5($updated_at->format('U'));
         $headerLastModified = $updated_at->toRfc2822String();
 
diff --git a/app/Http/Controllers/Api/UserController.php b/app/Http/Controllers/Api/UserController.php
index e92130d..3e1382b 100644
--- a/app/Http/Controllers/Api/UserController.php
+++ b/app/Http/Controllers/Api/UserController.php
@@ -240,7 +240,7 @@ class UserController extends ApiController
         }
 
         return $this->respondError([
-            'code' => 'The code was not found or has expired'
+            'code' => 'The code was not found or has expired.'
         ]);
     }
 
@@ -278,7 +278,7 @@ class UserController extends ApiController
         }//end if
 
         return $this->respondWithErrors([
-            'code' => 'The code was not found or has expired'
+            'code' => 'The code was not found or has expired.'
         ]);
     }
 
diff --git a/app/Models/Attachment.php b/app/Models/Attachment.php
new file mode 100644
index 0000000..b1bc6f2
--- /dev/null
+++ b/app/Models/Attachment.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Attachment extends Model
+{
+    use HasFactory;
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+    protected $fillable = [
+        'media_id',
+    ];
+
+
+    /**
+     * Get attachments attachable
+     */
+    public function attachable()
+    {
+        return $this->morphTo();
+    }}
diff --git a/app/Models/Event.php b/app/Models/Event.php
index 1e87ebe..eac9a9b 100644
--- a/app/Models/Event.php
+++ b/app/Models/Event.php
@@ -29,4 +29,12 @@ class Event extends Model
         'hero',
         'content'
     ];
+
+    /**
+     * Get all of the post's attachments.
+     */
+    public function attachments()
+    {
+        return $this->morphMany('App\Attachment', 'attachable');
+    }
 }
diff --git a/app/Models/Post.php b/app/Models/Post.php
index 9584def..2fb5b69 100644
--- a/app/Models/Post.php
+++ b/app/Models/Post.php
@@ -27,7 +27,7 @@ class Post extends Model
 
 
     /**
-     * Get the file user
+     * Get the post user
      *
      * @return BelongsTo
      */
@@ -35,4 +35,12 @@ class Post extends Model
     {
         return $this->belongsTo(User::class);
     }
+
+    /**
+     * Get all of the post's attachments.
+     */
+    public function attachments()
+    {
+        return $this->morphMany('App\Attachment', 'attachable');
+    }
 }
diff --git a/app/Services/AnimatedGifService.php b/app/Services/AnimatedGifService.php
new file mode 100644
index 0000000..e446e15
--- /dev/null
+++ b/app/Services/AnimatedGifService.php
@@ -0,0 +1,698 @@
+<?php
+
+namespace App\Services;
+
+class AnimatedGifService
+{
+    /**
+     * Check if a GIF file at a path is animated or not
+     *
+     * @param string  $filenameOrBlob GIF file path or data blob if dataSize > 0.
+     * @param integer $dataSize       GIF blob size.
+     * @return boolean GIF file/blob is animated.
+     */
+    public static function isAnimatedGif(string $filenameOrBlob, int $dataSize = 0)
+    {
+        $regex = '#\x00\x21\xF9\x04.{4}\x00(\x2C|\x21)#s';
+        $count = 0;
+
+        if ($dataSize > 0) {
+            if (($fh = @fopen($filenameOrBlob, 'rb')) === false) {
+                return false;
+            }
+
+            $chunk = false;
+            while (feof($fh) === false && $count < 2) {
+                $chunk = ($chunk !== '' ? substr($chunk, -20) : "") . fread($fh, (1024 * 100)); //read 100kb at a time
+                $count += preg_match_all($regex, $chunk, $matches);
+            }
+
+            fclose($fh);
+        } else {
+            $count = preg_match_all($regex, $filenameOrBlob, $matches);
+        }
+
+        return $count > 1;
+    }
+
+    /**
+     * Extract frames of a GIF
+     *
+     * @param string  $filenameOrBlob GIF filename path
+     * @param integer $dataSize       GIF blob size.
+     * @param boolean $originalFrames Get original frames (with transparent background)
+     *
+     * @return array
+     */
+    public function extract(string $filenameOrBlob, int $dataSize = 0, $originalFrames = false)
+    {
+        if (self::isAnimatedGif($filenameOrBlob) === false) {
+            return [];
+        }
+
+        $this->reset();
+        $this->parseFramesInfo($filename);
+        $prevImg = null;
+
+        for ($i = 0; $i < count($this->frameSources); $i++) {
+            $this->frames[$i] = [];
+            $this->frameDurations[$i] = $this->frames[$i]['duration'] = $this->frameSources[$i]['delay_time'];
+
+            $img = imagecreatefromstring($this->fileHeader["gifheader"] . $this->frameSources[$i]["graphicsextension"] . $this->frameSources[$i]["imagedata"] . chr(0x3b));
+
+            if (!$originalFrames) {
+                if ($i > 0) {
+                    $prevImg = $this->frames[($i - 1)]['image'];
+                } else {
+                    $prevImg = $img;
+                }
+
+                $sprite = imagecreate($this->gifMaxWidth, $this->gifMaxHeight);
+                imagesavealpha($sprite, true);
+
+                $transparent = imagecolortransparent($prevImg);
+
+                if ($transparent > -1 && imagecolorstotal($prevImg) > $transparent) {
+                    $actualTrans = imagecolorsforindex($prevImg, $transparent);
+                    imagecolortransparent($sprite, imagecolorallocate($sprite, $actualTrans['red'], $actualTrans['green'], $actualTrans['blue']));
+                }
+
+                if ((int) $this->frameSources[$i]['disposal_method'] == 1 && $i > 0) {
+                    imagecopy($sprite, $prevImg, 0, 0, 0, 0, $this->gifMaxWidth, $this->gifMaxHeight);
+                }
+
+                imagecopyresampled($sprite, $img, $this->frameSources[$i]["offset_left"], $this->frameSources[$i]["offset_top"], 0, 0, $this->gifMaxWidth, $this->gifMaxHeight, $this->gifMaxWidth, $this->gifMaxHeight);
+                $img = $sprite;
+            }//end if
+
+            $this->frameImages[$i] = $this->frames[$i]['image'] = $img;
+        }//end for
+
+        return $this->frames;
+    }
+}
+
+class GifFrameExtractor
+{
+    // Properties
+    // ===================================================================================
+
+    /**
+     * @var resource
+     */
+    private $gif;
+
+    /**
+     * @var array
+     */
+    private $frames;
+
+    /**
+     * @var array
+     */
+    private $frameDurations;
+
+    /**
+     * @var array
+     */
+    private $frameImages;
+
+    /**
+     * @var array
+     */
+    private $framePositions;
+
+    /**
+     * @var array
+     */
+    private $frameDimensions;
+
+    /**
+     * @var integer
+     *
+     * (old: $this->index)
+     */
+    private $frameNumber;
+
+    /**
+     * @var array
+     *
+     * (old: $this->imagedata)
+     */
+    private $frameSources;
+
+    /**
+     * @var array
+     *
+     * (old: $this->fileHeader)
+     */
+    private $fileHeader;
+
+    /**
+     * @var integer The reader pointer in the file source
+     *
+     * (old: $this->pointer)
+     */
+    private $pointer;
+
+    /**
+     * @var integer
+     */
+    private $gifMaxWidth;
+
+    /**
+     * @var integer
+     */
+    private $gifMaxHeight;
+
+    /**
+     * @var integer
+     */
+    private $totalDuration;
+
+    /**
+     * @var integer
+     */
+    private $handle;
+
+    /**
+     * @var array
+     *
+     * (old: globaldata)
+     */
+    private $globaldata;
+
+    /**
+     * @var array
+     *
+     * (old: orgvars)
+     */
+    private $orgvars;
+
+    // Methods
+    // ===================================================================================
+
+
+    /**
+     * Parse the frame informations contained in the GIF file
+     *
+     * @param string $filename GIF filename path
+     */
+    private function parseFramesInfo($filename)
+    {
+        $this->openFile($filename);
+        $this->parseGifHeader();
+        $this->parseGraphicsExtension(0);
+        $this->getApplicationData();
+        $this->getApplicationData();
+        $this->getFrameString(0);
+        $this->parseGraphicsExtension(1);
+        $this->getCommentData();
+        $this->getApplicationData();
+        $this->getFrameString(1);
+
+        while (!$this->checkByte(0x3b) && !$this->checkEOF()) {
+            $this->getCommentData(1);
+            $this->parseGraphicsExtension(2);
+            $this->getFrameString(2);
+            $this->getApplicationData();
+        }
+    }
+
+    /**
+     * Parse the gif header (old: get_gif_header)
+     */
+    private function parseGifHeader()
+    {
+        $this->pointerForward(10);
+
+        if ($this->readBits(($mybyte = $this->readByteInt()), 0, 1) == 1) {
+            $this->pointerForward(2);
+            $this->pointerForward(pow(2, ($this->readBits($mybyte, 5, 3) + 1)) * 3);
+        } else {
+            $this->pointerForward(2);
+        }
+
+        $this->fileHeader["gifheader"] = $this->dataPart(0, $this->pointer);
+
+        // Decoding
+        $this->orgvars["gifheader"] = $this->fileHeader["gifheader"];
+        $this->orgvars["background_color"] = $this->orgvars["gifheader"][11];
+    }
+
+    /**
+     * Parse the application data of the frames (old: get_application_data)
+     */
+    private function getApplicationData()
+    {
+        $startdata = $this->readByte(2);
+
+        if ($startdata == chr(0x21) . chr(0xff)) {
+            $start = ($this->pointer - 2);
+            $this->pointerForward($this->readByteInt());
+            $this->readDataStream($this->readByteInt());
+            $this->fileHeader["applicationdata"] = $this->dataPart($start, ($this->pointer - $start));
+        } else {
+            $this->pointerRewind(2);
+        }
+    }
+
+    /**
+     * Parse the comment data of the frames (old: get_comment_data)
+     */
+    private function getCommentData()
+    {
+        $startdata = $this->readByte(2);
+
+        if ($startdata == chr(0x21) . chr(0xfe)) {
+            $start = ($this->pointer - 2);
+            $this->readDataStream($this->readByteInt());
+            $this->fileHeader["commentdata"] = $this->dataPart($start, ($this->pointer - $start));
+        } else {
+            $this->pointerRewind(2);
+        }
+    }
+
+    /**
+     * Parse the graphic extension of the frames (old: get_graphics_extension)
+     *
+     * @param integer $type
+     */
+    private function parseGraphicsExtension($type)
+    {
+        $startdata = $this->readByte(2);
+
+        if ($startdata == chr(0x21) . chr(0xf9)) {
+            $start = ($this->pointer - 2);
+            $this->pointerForward($this->readByteInt());
+            $this->pointerForward(1);
+
+            if ($type == 2) {
+                $this->frameSources[$this->frameNumber]["graphicsextension"] = $this->dataPart($start, ($this->pointer - $start));
+            } elseif ($type == 1) {
+                $this->orgvars["hasgx_type_1"] = 1;
+                $this->globaldata["graphicsextension"] = $this->dataPart($start, ($this->pointer - $start));
+            } elseif ($type == 0) {
+                $this->orgvars["hasgx_type_0"] = 1;
+                $this->globaldata["graphicsextension_0"] = $this->dataPart($start, ($this->pointer - $start));
+            }
+        } else {
+            $this->pointerRewind(2);
+        }//end if
+    }
+
+    /**
+     * Get the full frame string block (old: get_image_block)
+     *
+     * @param integer $type
+     */
+    private function getFrameString($type)
+    {
+        if ($this->checkByte(0x2c)) {
+            $start = $this->pointer;
+            $this->pointerForward(9);
+
+            if ($this->readBits(($mybyte = $this->readByteInt()), 0, 1) == 1) {
+                $this->pointerForward(pow(2, ($this->readBits($mybyte, 5, 3) + 1)) * 3);
+            }
+
+            $this->pointerForward(1);
+            $this->readDataStream($this->readByteInt());
+            $this->frameSources[$this->frameNumber]["imagedata"] = $this->dataPart($start, ($this->pointer - $start));
+
+            if ($type == 0) {
+                $this->orgvars["hasgx_type_0"] = 0;
+
+                if (isset($this->globaldata["graphicsextension_0"])) {
+                    $this->frameSources[$this->frameNumber]["graphicsextension"] = $this->globaldata["graphicsextension_0"];
+                } else {
+                    $this->frameSources[$this->frameNumber]["graphicsextension"] = null;
+                }
+
+                unset($this->globaldata["graphicsextension_0"]);
+            } elseif ($type == 1) {
+                if (isset($this->orgvars["hasgx_type_1"]) && $this->orgvars["hasgx_type_1"] == 1) {
+                    $this->orgvars["hasgx_type_1"] = 0;
+                    $this->frameSources[$this->frameNumber]["graphicsextension"] = $this->globaldata["graphicsextension"];
+                    unset($this->globaldata["graphicsextension"]);
+                } else {
+                    $this->orgvars["hasgx_type_0"] = 0;
+                    $this->frameSources[$this->frameNumber]["graphicsextension"] = $this->globaldata["graphicsextension_0"];
+                    unset($this->globaldata["graphicsextension_0"]);
+                }
+            }//end if
+
+            $this->parseFrameData();
+            $this->frameNumber++;
+        }//end if
+    }
+
+    /**
+     * Parse frame data string into an array (old: parse_image_data)
+     */
+    private function parseFrameData()
+    {
+        $this->frameSources[$this->frameNumber]["disposal_method"] = $this->getImageDataBit("ext", 3, 3, 3);
+        $this->frameSources[$this->frameNumber]["user_input_flag"] = $this->getImageDataBit("ext", 3, 6, 1);
+        $this->frameSources[$this->frameNumber]["transparent_color_flag"] = $this->getImageDataBit("ext", 3, 7, 1);
+        $this->frameSources[$this->frameNumber]["delay_time"] = $this->dualByteVal($this->getImageDataByte("ext", 4, 2));
+        $this->totalDuration += (int) $this->frameSources[$this->frameNumber]["delay_time"];
+        $this->frameSources[$this->frameNumber]["transparent_color_index"] = ord($this->getImageDataByte("ext", 6, 1));
+        $this->frameSources[$this->frameNumber]["offset_left"] = $this->dualByteVal($this->getImageDataByte("dat", 1, 2));
+        $this->frameSources[$this->frameNumber]["offset_top"] = $this->dualByteVal($this->getImageDataByte("dat", 3, 2));
+        $this->frameSources[$this->frameNumber]["width"] = $this->dualByteVal($this->getImageDataByte("dat", 5, 2));
+        $this->frameSources[$this->frameNumber]["height"] = $this->dualByteVal($this->getImageDataByte("dat", 7, 2));
+        $this->frameSources[$this->frameNumber]["local_color_table_flag"] = $this->getImageDataBit("dat", 9, 0, 1);
+        $this->frameSources[$this->frameNumber]["interlace_flag"] = $this->getImageDataBit("dat", 9, 1, 1);
+        $this->frameSources[$this->frameNumber]["sort_flag"] = $this->getImageDataBit("dat", 9, 2, 1);
+        $this->frameSources[$this->frameNumber]["color_table_size"] = (pow(2, ($this->getImageDataBit("dat", 9, 5, 3) + 1)) * 3);
+        $this->frameSources[$this->frameNumber]["color_table"] = substr($this->frameSources[$this->frameNumber]["imagedata"], 10, $this->frameSources[$this->frameNumber]["color_table_size"]);
+        $this->frameSources[$this->frameNumber]["lzw_code_size"] = ord($this->getImageDataByte("dat", 10, 1));
+
+        $this->framePositions[$this->frameNumber] = [
+            'x' => $this->frameSources[$this->frameNumber]["offset_left"],
+            'y' => $this->frameSources[$this->frameNumber]["offset_top"],
+        ];
+
+        $this->frameDimensions[$this->frameNumber] = [
+            'width' => $this->frameSources[$this->frameNumber]["width"],
+            'height' => $this->frameSources[$this->frameNumber]["height"],
+        ];
+
+        // Decoding
+        $this->orgvars[$this->frameNumber]["transparent_color_flag"] = $this->frameSources[$this->frameNumber]["transparent_color_flag"];
+        $this->orgvars[$this->frameNumber]["transparent_color_index"] = $this->frameSources[$this->frameNumber]["transparent_color_index"];
+        $this->orgvars[$this->frameNumber]["delay_time"] = $this->frameSources[$this->frameNumber]["delay_time"];
+        $this->orgvars[$this->frameNumber]["disposal_method"] = $this->frameSources[$this->frameNumber]["disposal_method"];
+        $this->orgvars[$this->frameNumber]["offset_left"] = $this->frameSources[$this->frameNumber]["offset_left"];
+        $this->orgvars[$this->frameNumber]["offset_top"] = $this->frameSources[$this->frameNumber]["offset_top"];
+
+        // Updating the max width
+        if ($this->gifMaxWidth < $this->frameSources[$this->frameNumber]["width"]) {
+            $this->gifMaxWidth = $this->frameSources[$this->frameNumber]["width"];
+        }
+
+        // Updating the max height
+        if ($this->gifMaxHeight < $this->frameSources[$this->frameNumber]["height"]) {
+            $this->gifMaxHeight = $this->frameSources[$this->frameNumber]["height"];
+        }
+    }
+
+    /**
+     * Get the image data byte (old: get_imagedata_byte)
+     *
+     * @param string  $type
+     * @param integer $start
+     * @param integer $length
+     *
+     * @return string
+     */
+    private function getImageDataByte($type, $start, $length)
+    {
+        if ($type == "ext") {
+            return substr($this->frameSources[$this->frameNumber]["graphicsextension"], $start, $length);
+        }
+
+        // "dat"
+        return substr($this->frameSources[$this->frameNumber]["imagedata"], $start, $length);
+    }
+
+    /**
+     * Get the image data bit (old: get_imagedata_bit)
+     *
+     * @param string  $type
+     * @param integer $byteIndex
+     * @param integer $bitStart
+     * @param integer $bitLength
+     *
+     * @return number
+     */
+    private function getImageDataBit($type, $byteIndex, $bitStart, $bitLength)
+    {
+        if ($type == "ext") {
+            return $this->readBits(ord(substr($this->frameSources[$this->frameNumber]["graphicsextension"], $byteIndex, 1)), $bitStart, $bitLength);
+        }
+
+        // "dat"
+        return $this->readBits(ord(substr($this->frameSources[$this->frameNumber]["imagedata"], $byteIndex, 1)), $bitStart, $bitLength);
+    }
+
+    /**
+     * Return the value of 2 ASCII chars (old: dualbyteval)
+     *
+     * @param string $s
+     *
+     * @return integer
+     */
+    private function dualByteVal($s)
+    {
+        $i = (ord($s[1]) * 256 + ord($s[0]));
+
+        return $i;
+    }
+
+    /**
+     * Read the data stream (old: read_data_stream)
+     *
+     * @param integer $firstLength
+     */
+    private function readDataStream($firstLength)
+    {
+        $this->pointerForward($firstLength);
+        $length = $this->readByteInt();
+
+        if ($length != 0) {
+            while ($length != 0) {
+                $this->pointerForward($length);
+                $length = $this->readByteInt();
+            }
+        }
+    }
+
+    /**
+     * Open the gif file (old: loadfile)
+     *
+     * @param string $filename
+     */
+    private function openFile($filename)
+    {
+        $this->handle = fopen($filename, "rb");
+        $this->pointer = 0;
+
+        $imageSize = getimagesize($filename);
+        $this->gifWidth = $imageSize[0];
+        $this->gifHeight = $imageSize[1];
+    }
+
+    /**
+     * Close the read gif file (old: closefile)
+     */
+    private function closeFile()
+    {
+        fclose($this->handle);
+        $this->handle = 0;
+    }
+
+    /**
+     * Read the file from the beginning to $byteCount in binary (old: readbyte)
+     *
+     * @param integer $byteCount
+     *
+     * @return string
+     */
+    private function readByte($byteCount)
+    {
+        $data = fread($this->handle, $byteCount);
+        $this->pointer += $byteCount;
+
+        return $data;
+    }
+
+    /**
+     * Read a byte and return ASCII value (old: readbyte_int)
+     *
+     * @return integer
+     */
+    private function readByteInt()
+    {
+        $data = fread($this->handle, 1);
+        $this->pointer++;
+
+        return ord($data);
+    }
+
+    /**
+     * Convert a $byte to decimal (old: readbits)
+     *
+     * @param string  $byte
+     * @param integer $start
+     * @param integer $length
+     *
+     * @return number
+     */
+    private function readBits($byte, $start, $length)
+    {
+        $bin = str_pad(decbin($byte), 8, "0", STR_PAD_LEFT);
+        $data = substr($bin, $start, $length);
+
+        return bindec($data);
+    }
+
+    /**
+     * Rewind the file pointer reader (old: p_rewind)
+     *
+     * @param integer $length
+     */
+    private function pointerRewind($length)
+    {
+        $this->pointer -= $length;
+        fseek($this->handle, $this->pointer);
+    }
+
+    /**
+     * Forward the file pointer reader (old: p_forward)
+     *
+     * @param integer $length
+     */
+    private function pointerForward($length)
+    {
+        $this->pointer += $length;
+        fseek($this->handle, $this->pointer);
+    }
+
+    /**
+     * Get a section of the data from $start to $start + $length (old: datapart)
+     *
+     * @param integer $start
+     * @param integer $length
+     *
+     * @return string
+     */
+    private function dataPart($start, $length)
+    {
+        fseek($this->handle, $start);
+        $data = fread($this->handle, $length);
+        fseek($this->handle, $this->pointer);
+
+        return $data;
+    }
+
+    /**
+     * Check if a character if a byte (old: checkbyte)
+     *
+     * @param integer $byte
+     *
+     * @return boolean
+     */
+    private function checkByte($byte)
+    {
+        if (fgetc($this->handle) == chr($byte)) {
+            fseek($this->handle, $this->pointer);
+            return true;
+        }
+
+        fseek($this->handle, $this->pointer);
+
+        return false;
+    }
+
+    /**
+     * Check the end of the file (old: checkEOF)
+     *
+     * @return boolean
+     */
+    private function checkEOF()
+    {
+        if (fgetc($this->handle) === false) {
+            return true;
+        }
+
+        fseek($this->handle, $this->pointer);
+
+        return false;
+    }
+
+    /**
+     * Reset and clear this current object
+     */
+    private function reset()
+    {
+        $this->gif = null;
+        $this->totalDuration = $this->gifMaxHeight = $this->gifMaxWidth = $this->handle = $this->pointer = $this->frameNumber = 0;
+        $this->frameDimensions = $this->framePositions = $this->frameImages = $this->frameDurations = $this->globaldata = $this->orgvars = $this->frames = $this->fileHeader = $this->frameSources = [];
+    }
+
+    // Getter / Setter
+    // ===================================================================================
+
+
+    /**
+     * Get the total of all added frame duration
+     *
+     * @return integer
+     */
+    public function getTotalDuration()
+    {
+        return $this->totalDuration;
+    }
+
+    /**
+     * Get the number of extracted frames
+     *
+     * @return integer
+     */
+    public function getFrameNumber()
+    {
+        return $this->frameNumber;
+    }
+
+    /**
+     * Get the extracted frames (images and durations)
+     *
+     * @return array
+     */
+    public function getFrames()
+    {
+        return $this->frames;
+    }
+
+    /**
+     * Get the extracted frame positions
+     *
+     * @return array
+     */
+    public function getFramePositions()
+    {
+        return $this->framePositions;
+    }
+
+    /**
+     * Get the extracted frame dimensions
+     *
+     * @return array
+     */
+    public function getFrameDimensions()
+    {
+        return $this->frameDimensions;
+    }
+
+    /**
+     * Get the extracted frame images
+     *
+     * @return array
+     */
+    public function getFrameImages()
+    {
+        return $this->frameImages;
+    }
+
+    /**
+     * Get the extracted frame durations
+     *
+     * @return array
+     */
+    public function getFrameDurations()
+    {
+        return $this->frameDurations;
+    }
+}
diff --git a/app/Services/ImageService.php b/app/Services/ImageService.php
deleted file mode 100644
index be65efd..0000000
--- a/app/Services/ImageService.php
+++ /dev/null
@@ -1,9 +0,0 @@
-<?php
-
-namespace App\Services;
-
-use ImageIntervention;
-
-class ImageService
-{
-}
diff --git a/database/migrations/2023_02_24_023054_create_attachments_table.php b/database/migrations/2023_02_24_023054_create_attachments_table.php
new file mode 100644
index 0000000..2b86154
--- /dev/null
+++ b/database/migrations/2023_02_24_023054_create_attachments_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('attachments', function (Blueprint $table) {
+            $table->id();
+            $table->uuid('media_id');
+            $table->uuidMorphs('attachable');
+            $table->timestamps();
+
+            $table->foreign('media_id')->references('id')->on('media')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('media_attachments');
+    }
+};
diff --git a/import-meta.ts b/import-meta.ts
new file mode 100644
index 0000000..e7708dd
--- /dev/null
+++ b/import-meta.ts
@@ -0,0 +1,6 @@
+export interface ImportMetaExtras extends ImportMeta {
+    env: {
+        APP_URL: string;
+        [key: string]: string;
+    };
+}
diff --git a/package-lock.json b/package-lock.json
index 8906a72..388a0e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,25 +1,20 @@
 {
-    "name": "Website",
+    "name": "website",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "dependencies": {
-                "@fortawesome/fontawesome-svg-core": "^6.2.1",
-                "@fortawesome/free-brands-svg-icons": "^6.2.1",
-                "@fortawesome/free-regular-svg-icons": "^6.2.1",
-                "@fortawesome/free-solid-svg-icons": "^6.2.1",
-                "@fortawesome/vue-fontawesome": "^3.0.2",
+                "@tinymce/tinymce-vue": "^4.0.7",
                 "@vitejs/plugin-vue": "^4.0.0",
                 "@vuepic/vue-datepicker": "^3.6.4",
-                "date-fns": "^2.29.3",
+                "dompurify": "^3.0.0",
                 "dotenv": "^16.0.3",
-                "element-plus": "^2.2.27",
                 "normalize.css": "^8.0.1",
                 "pinia": "^2.0.28",
                 "pinia-plugin-persistedstate": "^3.0.1",
                 "sass": "^1.57.1",
-                "trix": "^2.0.4",
+                "tinymce": "^6.3.1",
                 "vue": "^3.2.36",
                 "vue-dompurify-html": "^3.1.2",
                 "vue-final-modal": "^3.4.11",
@@ -32,7 +27,6 @@
             "devDependencies": {
                 "@typescript-eslint/eslint-plugin": "^5.48.1",
                 "@typescript-eslint/parser": "^5.48.1",
-                "axios": "^1.1.2",
                 "eslint": "^8.31.0",
                 "eslint-config-prettier": "^8.6.0",
                 "eslint-plugin-jsdoc": "^39.6.4",
@@ -41,14 +35,17 @@
                 "lodash": "^4.17.19",
                 "postcss": "^8.1.14",
                 "prettier": "2.8.2",
-                "typescript": "^4.9.4",
-                "vite": "^4.0.0"
+                "rollup-plugin-analyzer": "^4.0.0",
+                "ts-node": "^10.9.1",
+                "typescript": "^4.9.5",
+                "vite": "^4.0.0",
+                "vitest": "^0.28.5"
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.20.15",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz",
-            "integrity": "sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==",
+            "version": "7.21.2",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz",
+            "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==",
             "bin": {
                 "parser": "bin/babel-parser.js"
             },
@@ -56,20 +53,16 @@
                 "node": ">=6.0.0"
             }
         },
-        "node_modules/@ctrl/tinycolor": {
-            "version": "3.5.0",
-            "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
-            "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg==",
+        "node_modules/@cspotcode/source-map-support": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+            "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+            "dev": true,
+            "dependencies": {
+                "@jridgewell/trace-mapping": "0.3.9"
+            },
             "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/@element-plus/icons-vue": {
-            "version": "2.0.10",
-            "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
-            "integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==",
-            "peerDependencies": {
-                "vue": "^3.2.0"
+                "node": ">=12"
             }
         },
         "node_modules/@es-joy/jsdoccomment": {
@@ -439,85 +432,6 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
-        "node_modules/@floating-ui/core": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.1.1.tgz",
-            "integrity": "sha512-PL7g3dhA4dHgZfujkuD8Q+tfJJynEtnNQSPzmucCnxMvkxf4cLBJw/ZYqZUn4HCh33U3WHrAfv2R2tbi9UCSmw=="
-        },
-        "node_modules/@floating-ui/dom": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz",
-            "integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==",
-            "dependencies": {
-                "@floating-ui/core": "^1.1.0"
-            }
-        },
-        "node_modules/@fortawesome/fontawesome-common-types": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
-            "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==",
-            "hasInstallScript": true,
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@fortawesome/fontawesome-svg-core": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
-            "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
-            "hasInstallScript": true,
-            "dependencies": {
-                "@fortawesome/fontawesome-common-types": "6.2.1"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@fortawesome/free-brands-svg-icons": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.1.tgz",
-            "integrity": "sha512-L8l4MfdHPmZlJ72PvzdfwOwbwcCAL0vx48tJRnI6u1PJXh+j2f3yDoKyQgO3qjEsgD5Fr2tQV/cPP8F/k6aUig==",
-            "hasInstallScript": true,
-            "dependencies": {
-                "@fortawesome/fontawesome-common-types": "6.2.1"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@fortawesome/free-regular-svg-icons": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz",
-            "integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==",
-            "hasInstallScript": true,
-            "dependencies": {
-                "@fortawesome/fontawesome-common-types": "6.2.1"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@fortawesome/free-solid-svg-icons": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
-            "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
-            "hasInstallScript": true,
-            "dependencies": {
-                "@fortawesome/fontawesome-common-types": "6.2.1"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@fortawesome/vue-fontawesome": {
-            "version": "3.0.3",
-            "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
-            "integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==",
-            "peerDependencies": {
-                "@fortawesome/fontawesome-svg-core": "~1 || ~6",
-                "vue": ">= 3.0.0 < 4"
-            }
-        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.8",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -569,7 +483,6 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
             "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-            "peer": true,
             "engines": {
                 "node": ">=6.0.0"
             }
@@ -596,17 +509,15 @@
         "node_modules/@jridgewell/sourcemap-codec": {
             "version": "1.4.14",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-            "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-            "peer": true
+            "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
         },
         "node_modules/@jridgewell/trace-mapping": {
-            "version": "0.3.17",
-            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
-            "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
-            "peer": true,
+            "version": "0.3.9",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+            "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
             "dependencies": {
-                "@jridgewell/resolve-uri": "3.1.0",
-                "@jridgewell/sourcemap-codec": "1.4.14"
+                "@jridgewell/resolve-uri": "^3.0.3",
+                "@jridgewell/sourcemap-codec": "^1.4.10"
             }
         },
         "node_modules/@nodelib/fs.scandir": {
@@ -644,20 +555,65 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/@popperjs/core": {
-            "name": "@sxzz/popperjs-es",
-            "version": "2.11.7",
-            "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-            "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/popperjs"
+        "node_modules/@tinymce/tinymce-vue": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/@tinymce/tinymce-vue/-/tinymce-vue-4.0.7.tgz",
+            "integrity": "sha512-1esB8wGWrjPCY+rK8vy3QB1cxwXo7HLJWuNrcyPl6LOVR+QJjub0OiV/C+TUEsLN6OpCtRv+QnIqMC5vXz783Q==",
+            "dependencies": {
+                "tinymce": "^5.5.0"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
+        "node_modules/@tinymce/tinymce-vue/node_modules/tinymce": {
+            "version": "5.10.7",
+            "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.7.tgz",
+            "integrity": "sha512-9UUjaO0R7FxcFo0oxnd1lMs7H+D0Eh+dDVo5hKbVe1a+VB0nit97vOqlinj+YwgoBDt6/DSCUoWqAYlLI8BLYA=="
+        },
+        "node_modules/@tsconfig/node10": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+            "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+            "dev": true
+        },
+        "node_modules/@tsconfig/node12": {
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+            "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+            "dev": true
+        },
+        "node_modules/@tsconfig/node14": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+            "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+            "dev": true
+        },
+        "node_modules/@tsconfig/node16": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz",
+            "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
+            "dev": true
+        },
+        "node_modules/@types/chai": {
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.4.tgz",
+            "integrity": "sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==",
+            "dev": true
+        },
+        "node_modules/@types/chai-subset": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.3.tgz",
+            "integrity": "sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==",
+            "dev": true,
+            "dependencies": {
+                "@types/chai": "*"
             }
         },
         "node_modules/@types/eslint": {
-            "version": "8.21.0",
-            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.0.tgz",
-            "integrity": "sha512-35EhHNOXgxnUgh4XCJsGhE7zdlDhYDN/aMG6UbkByCFFNgQ7b3U+uVoqBpicFydR8JEfgdjCF7SJ7MiJfzuiTA==",
+            "version": "8.21.1",
+            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz",
+            "integrity": "sha512-rc9K8ZpVjNcLs8Fp0dkozd5Pt2Apk1glO4Vgz8ix1u6yFByxfqo5Yavpy65o+93TAe24jr7v+eSBtFLvOQtCRQ==",
             "peer": true,
             "dependencies": {
                 "@types/estree": "*",
@@ -685,24 +641,10 @@
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
             "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
         },
-        "node_modules/@types/lodash": {
-            "version": "4.14.191",
-            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
-            "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
-        },
-        "node_modules/@types/lodash-es": {
-            "version": "4.17.6",
-            "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
-            "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
-            "dependencies": {
-                "@types/lodash": "*"
-            }
-        },
         "node_modules/@types/node": {
-            "version": "18.11.18",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-            "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
-            "peer": true
+            "version": "18.14.1",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.1.tgz",
+            "integrity": "sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ=="
         },
         "node_modules/@types/semver": {
             "version": "7.3.13",
@@ -710,20 +652,15 @@
             "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
             "dev": true
         },
-        "node_modules/@types/web-bluetooth": {
-            "version": "0.0.16",
-            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-            "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
-        },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "5.50.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.50.0.tgz",
-            "integrity": "sha512-vwksQWSFZiUhgq3Kv7o1Jcj0DUNylwnIlGvKvLLYsq8pAWha6/WCnXUeaSoNNha/K7QSf2+jvmkxggC1u3pIwQ==",
+            "version": "5.53.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.53.0.tgz",
+            "integrity": "sha512-alFpFWNucPLdUOySmXCJpzr6HKC3bu7XooShWM+3w/EL6J2HIoB2PFxpLnq4JauWVk6DiVeNKzQlFEaE+X9sGw==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.50.0",
-                "@typescript-eslint/type-utils": "5.50.0",
-                "@typescript-eslint/utils": "5.50.0",
+                "@typescript-eslint/scope-manager": "5.53.0",
+                "@typescript-eslint/type-utils": "5.53.0",
+                "@typescript-eslint/utils": "5.53.0",
                 "debug": "^4.3.4",
                 "grapheme-splitter": "^1.0.4",
                 "ignore": "^5.2.0",
@@ -750,14 +687,14 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "5.50.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.50.0.tgz",
-            "integrity": "sha512-KCcSyNaogUDftK2G9RXfQyOCt51uB5yqC6pkUYqhYh8Kgt+DwR5M0EwEAxGPy/+DH6hnmKeGsNhiZRQxjH71uQ==",
+            "version": "5.53.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.53.0.tgz",
+            "integrity": "sha512-MKBw9i0DLYlmdOb3Oq/526+al20AJZpANdT6Ct9ffxcV8nKCHz63t/S0IhlTFNsBIHJv+GY5SFJ0XfqVeydQrQ==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.50.0",
-                "@typescript-eslint/types": "5.50.0",
-                "@typescript-eslint/typescript-estree": "5.50.0",
+                "@typescript-eslint/scope-manager": "5.53.0",
+                "@typescript-eslint/types": "5.53.0",
+                "@typescript-eslint/typescript-estree": "5.53.0",
                 "debug": "^4.3.4"
             },
             "engines": {
@@ -777,13 +714,13 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "5.50.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.50.0.tgz",
-            "integrity": "sha512-rt03kaX+iZrhssaT974BCmoUikYtZI24Vp/kwTSy841XhiYShlqoshRFDvN1FKKvU2S3gK+kcBW1EA7kNUrogg==",
+            "version": "5.53.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.53.0.tgz",
+            "integrity": "sha512-Opy3dqNsp/9kBBeCPhkCNR7fmdSQqA+47r21hr9a14Bx0xnkElEQmhoHga+VoaoQ6uDHjDKmQPIYcUcKJifS7w==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.50.0",
-                "@typescript-eslint/visitor-keys": "5.50.0"
+                "@typescript-eslint/types": "5.53.0",
+                "@typescript-eslint/visitor-keys": "5.53.0"
             },
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -794,13 +731,13 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "5.50.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.50.0.tgz",
-            "integrity": "sha512-dcnXfZ6OGrNCO7E5UY/i0ktHb7Yx1fV6fnQGGrlnfDhilcs6n19eIRcvLBqx6OQkrPaFlDPk3OJ0WlzQfrV0bQ==",
+            "version": "5.53.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.53.0.tgz",
+            "integrity": "sha512-HO2hh0fmtqNLzTAme/KnND5uFNwbsdYhCZghK2SoxGp3Ifn2emv+hi0PBUjzzSh0dstUIFqOj3bp0AwQlK4OWw==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/typescript-estree": "5.50.0",
-                "@typescript-eslint/utils": "5.50.0",
+                "@typescript-eslint/typescript-estree": "5.53.0",
+                "@typescript-eslint/utils": "5.53.0",
                 "debug": "^4.3.4",
                 "tsutils": "^3.21.0"
             },
@@ -821,9 +758,9 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "5.50.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.50.0.tgz",
-            "integrity": "sha512-atruOuJpir4OtyNdKahiHZobPKFvZnBnfDiyEaBf6d9vy9visE7gDjlmhl+y29uxZ2ZDgvXijcungGFjGGex7w==",
+            "version": "5.53.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.53.0.tgz",
+            "integrity": "sha512-5kcDL9ZUIP756K6+QOAfPkigJmCPHcLN7Zjdz76lQWWDdzfOhZDTj1irs6gPBKiXx5/6O3L0+AvupAut3z7D2A==",
             "dev": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -834,13 +771,13 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "5.50.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.50.0.tgz",
-            "integrity": "sha512-Gq4zapso+OtIZlv8YNAStFtT6d05zyVCK7Fx3h5inlLBx2hWuc/0465C2mg/EQDDU2LKe52+/jN4f0g9bd+kow==",
+            "version": "5.53.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.53.0.tgz",
+            "integrity": "sha512-eKmipH7QyScpHSkhbptBBYh9v8FxtngLquq292YTEQ1pxVs39yFBlLC1xeIZcPPz1RWGqb7YgERJRGkjw8ZV7w==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.50.0",
-                "@typescript-eslint/visitor-keys": "5.50.0",
+                "@typescript-eslint/types": "5.53.0",
+                "@typescript-eslint/visitor-keys": "5.53.0",
                 "debug": "^4.3.4",
                 "globby": "^11.1.0",
                 "is-glob": "^4.0.3",
@@ -861,16 +798,16 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "5.50.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.50.0.tgz",
-            "integrity": "sha512-v/AnUFImmh8G4PH0NDkf6wA8hujNNcrwtecqW4vtQ1UOSNBaZl49zP1SHoZ/06e+UiwzHpgb5zP5+hwlYYWYAw==",
+            "version": "5.53.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.53.0.tgz",
+            "integrity": "sha512-VUOOtPv27UNWLxFwQK/8+7kvxVC+hPHNsJjzlJyotlaHjLSIgOCKj9I0DBUjwOOA64qjBwx5afAPjksqOxMO0g==",
             "dev": true,
             "dependencies": {
                 "@types/json-schema": "^7.0.9",
                 "@types/semver": "^7.3.12",
-                "@typescript-eslint/scope-manager": "5.50.0",
-                "@typescript-eslint/types": "5.50.0",
-                "@typescript-eslint/typescript-estree": "5.50.0",
+                "@typescript-eslint/scope-manager": "5.53.0",
+                "@typescript-eslint/types": "5.53.0",
+                "@typescript-eslint/typescript-estree": "5.53.0",
                 "eslint-scope": "^5.1.1",
                 "eslint-utils": "^3.0.0",
                 "semver": "^7.3.7"
@@ -887,12 +824,12 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "5.50.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.50.0.tgz",
-            "integrity": "sha512-cdMeD9HGu6EXIeGOh2yVW6oGf9wq8asBgZx7nsR/D36gTfQ0odE5kcRYe5M81vjEFAcPeugXrHg78Imu55F6gg==",
+            "version": "5.53.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.53.0.tgz",
+            "integrity": "sha512-JqNLnX3leaHFZEN0gCh81sIvgrp/2GOACZNgO4+Tkf64u51kTpAyWFOY8XHx8XuXr3N2C9zgPPHtcpMg6z1g0w==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.50.0",
+                "@typescript-eslint/types": "5.53.0",
                 "eslint-visitor-keys": "^3.3.0"
             },
             "engines": {
@@ -915,6 +852,86 @@
                 "vue": "^3.2.25"
             }
         },
+        "node_modules/@vitest/expect": {
+            "version": "0.28.5",
+            "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.28.5.tgz",
+            "integrity": "sha512-gqTZwoUTwepwGIatnw4UKpQfnoyV0Z9Czn9+Lo2/jLIt4/AXLTn+oVZxlQ7Ng8bzcNkR+3DqLJ08kNr8jRmdNQ==",
+            "dev": true,
+            "dependencies": {
+                "@vitest/spy": "0.28.5",
+                "@vitest/utils": "0.28.5",
+                "chai": "^4.3.7"
+            }
+        },
+        "node_modules/@vitest/runner": {
+            "version": "0.28.5",
+            "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.28.5.tgz",
+            "integrity": "sha512-NKkHtLB+FGjpp5KmneQjTcPLWPTDfB7ie+MmF1PnUBf/tGe2OjGxWyB62ySYZ25EYp9krR5Bw0YPLS/VWh1QiA==",
+            "dev": true,
+            "dependencies": {
+                "@vitest/utils": "0.28.5",
+                "p-limit": "^4.0.0",
+                "pathe": "^1.1.0"
+            }
+        },
+        "node_modules/@vitest/runner/node_modules/p-limit": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+            "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+            "dev": true,
+            "dependencies": {
+                "yocto-queue": "^1.0.0"
+            },
+            "engines": {
+                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/@vitest/runner/node_modules/yocto-queue": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
+            "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
+            "dev": true,
+            "engines": {
+                "node": ">=12.20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/@vitest/spy": {
+            "version": "0.28.5",
+            "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.28.5.tgz",
+            "integrity": "sha512-7if6rsHQr9zbmvxN7h+gGh2L9eIIErgf8nSKYDlg07HHimCxp4H6I/X/DPXktVPPLQfiZ1Cw2cbDIx9fSqDjGw==",
+            "dev": true,
+            "dependencies": {
+                "tinyspy": "^1.0.2"
+            }
+        },
+        "node_modules/@vitest/utils": {
+            "version": "0.28.5",
+            "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.28.5.tgz",
+            "integrity": "sha512-UyZdYwdULlOa4LTUSwZ+Paz7nBHGTT72jKwdFSV4IjHF1xsokp+CabMdhjvVhYwkLfO88ylJT46YMilnkSARZA==",
+            "dev": true,
+            "dependencies": {
+                "cli-truncate": "^3.1.0",
+                "diff": "^5.1.0",
+                "loupe": "^2.3.6",
+                "picocolors": "^1.0.0",
+                "pretty-format": "^27.5.1"
+            }
+        },
+        "node_modules/@vitest/utils/node_modules/diff": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+            "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.3.1"
+            }
+        },
         "node_modules/@vue/compiler-core": {
             "version": "3.2.47",
             "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
@@ -1023,9 +1040,9 @@
             "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
         },
         "node_modules/@vuepic/vue-datepicker": {
-            "version": "3.6.7",
-            "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-3.6.7.tgz",
-            "integrity": "sha512-+THZAo+9KlPZGEE9MiCSkGVf8RW3rFFCrq060Kv7GCfWfSrxFSQIUhsTYc3P8hjtOkuaj31S5SdjmBa0tqH8Pg==",
+            "version": "3.6.8",
+            "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-3.6.8.tgz",
+            "integrity": "sha512-9c6gfy2SYHunyH36m12NzLy+6fccTFf58zG/VAVo5inVedVisz3M0grw7fw77uMP1531MtIibmeq9C5SNUXxkw==",
             "dependencies": {
                 "date-fns": "^2.29.3",
                 "date-fns-tz": "^1.3.7"
@@ -1037,39 +1054,6 @@
                 "vue": ">=3.2.0"
             }
         },
-        "node_modules/@vueuse/core": {
-            "version": "9.12.0",
-            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.12.0.tgz",
-            "integrity": "sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==",
-            "dependencies": {
-                "@types/web-bluetooth": "^0.0.16",
-                "@vueuse/metadata": "9.12.0",
-                "@vueuse/shared": "9.12.0",
-                "vue-demi": "*"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/antfu"
-            }
-        },
-        "node_modules/@vueuse/metadata": {
-            "version": "9.12.0",
-            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.12.0.tgz",
-            "integrity": "sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==",
-            "funding": {
-                "url": "https://github.com/sponsors/antfu"
-            }
-        },
-        "node_modules/@vueuse/shared": {
-            "version": "9.12.0",
-            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.12.0.tgz",
-            "integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==",
-            "dependencies": {
-                "vue-demi": "*"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/antfu"
-            }
-        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.11.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -1257,6 +1241,15 @@
                 "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
             }
         },
+        "node_modules/acorn-walk": {
+            "version": "8.2.0",
+            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+            "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
         "node_modules/ajv": {
             "version": "6.12.6",
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1316,6 +1309,12 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/arg": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+            "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+            "dev": true
+        },
         "node_modules/argparse": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1331,26 +1330,13 @@
                 "node": ">=8"
             }
         },
-        "node_modules/async-validator": {
-            "version": "4.2.5",
-            "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
-            "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
-        },
-        "node_modules/asynckit": {
-            "version": "0.4.0",
-            "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-            "dev": true
-        },
-        "node_modules/axios": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.1.tgz",
-            "integrity": "sha512-78pWJsQTceInlyaeBQeYZ/QgZeWS8hGeKiIJiDKQe3hEyBb7sEMq0K4gjx+Va6WHTYO4zI/RRl8qGRzn0YMadA==",
+        "node_modules/assertion-error": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+            "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
             "dev": true,
-            "dependencies": {
-                "follow-redirects": "^1.15.0",
-                "form-data": "^4.0.0",
-                "proxy-from-env": "^1.1.0"
+            "engines": {
+                "node": "*"
             }
         },
         "node_modules/balanced-match": {
@@ -1433,8 +1419,16 @@
         "node_modules/buffer-from": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-            "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-            "peer": true
+            "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+        },
+        "node_modules/cac": {
+            "version": "6.7.14",
+            "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+            "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
         },
         "node_modules/callsites": {
             "version": "3.1.0",
@@ -1446,9 +1440,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001450",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz",
-            "integrity": "sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew==",
+            "version": "1.0.30001457",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001457.tgz",
+            "integrity": "sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -1461,6 +1455,24 @@
             ],
             "peer": true
         },
+        "node_modules/chai": {
+            "version": "4.3.7",
+            "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
+            "integrity": "sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==",
+            "dev": true,
+            "dependencies": {
+                "assertion-error": "^1.1.0",
+                "check-error": "^1.0.2",
+                "deep-eql": "^4.1.2",
+                "get-func-name": "^2.0.0",
+                "loupe": "^2.3.1",
+                "pathval": "^1.1.1",
+                "type-detect": "^4.0.5"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/chalk": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1476,6 +1488,15 @@
                 "url": "https://github.com/chalk/chalk?sponsor=1"
             }
         },
+        "node_modules/check-error": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
+            "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
+            "dev": true,
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/chokidar": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1522,6 +1543,22 @@
                 "node": ">=6.0"
             }
         },
+        "node_modules/cli-truncate": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-3.1.0.tgz",
+            "integrity": "sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==",
+            "dev": true,
+            "dependencies": {
+                "slice-ansi": "^5.0.0",
+                "string-width": "^5.0.0"
+            },
+            "engines": {
+                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1538,18 +1575,6 @@
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
-        "node_modules/combined-stream": {
-            "version": "1.0.8",
-            "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-            "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-            "dev": true,
-            "dependencies": {
-                "delayed-stream": "~1.0.0"
-            },
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
         "node_modules/commander": {
             "version": "2.20.3",
             "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -1571,6 +1596,12 @@
             "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
             "dev": true
         },
+        "node_modules/create-require": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+            "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+            "dev": true
+        },
         "node_modules/cross-spawn": {
             "version": "7.0.3",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1622,11 +1653,6 @@
                 "date-fns": ">=2.0.0"
             }
         },
-        "node_modules/dayjs": {
-            "version": "1.11.7",
-            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
-            "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
-        },
         "node_modules/debug": {
             "version": "4.3.4",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1644,19 +1670,31 @@
                 }
             }
         },
+        "node_modules/deep-eql": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
+            "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
+            "dev": true,
+            "dependencies": {
+                "type-detect": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/deep-is": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
             "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
             "dev": true
         },
-        "node_modules/delayed-stream": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+        "node_modules/diff": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+            "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
             "dev": true,
             "engines": {
-                "node": ">=0.4.0"
+                "node": ">=0.3.1"
             }
         },
         "node_modules/dir-glob": {
@@ -1684,9 +1722,9 @@
             }
         },
         "node_modules/dompurify": {
-            "version": "2.4.3",
-            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.3.tgz",
-            "integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ=="
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.0.tgz",
+            "integrity": "sha512-0g/yr2IJn4nTbxwL785YxS7/AvvgGFJw6LLWP+BzWzB1+BYOqPUT9Hy0rXrZh5HLdHnxH72aDdzvC9SdTjsuaA=="
         },
         "node_modules/dotenv": {
             "version": "16.0.3",
@@ -1696,36 +1734,23 @@
                 "node": ">=12"
             }
         },
+        "node_modules/eastasianwidth": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+            "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+            "dev": true
+        },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.285",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.285.tgz",
-            "integrity": "sha512-47o4PPgxfU1KMNejz+Dgaodf7YTcg48uOfV1oM6cs3adrl2+7R+dHkt3Jpxqo0LRCbGJEzTKMUt0RdvByb/leg==",
+            "version": "1.4.310",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.310.tgz",
+            "integrity": "sha512-/xlATgfwkm5uDDwLw5nt/MNEf7c1oazLURMZLy39vOioGYyYzLWIDT8fZMJak6qTiAJ7udFTy7JG7ziyjNutiA==",
             "peer": true
         },
-        "node_modules/element-plus": {
-            "version": "2.2.29",
-            "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.29.tgz",
-            "integrity": "sha512-g4dcrURrKkR5uUX8n5RVnnqGnimoki9HfqS4yHHG6XwCHBkZGozdq4x+478BzeWUe31h++BO+7dakSx4VnM8RQ==",
-            "dependencies": {
-                "@ctrl/tinycolor": "^3.4.1",
-                "@element-plus/icons-vue": "^2.0.6",
-                "@floating-ui/dom": "^1.0.1",
-                "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
-                "@types/lodash": "^4.14.182",
-                "@types/lodash-es": "^4.17.6",
-                "@vueuse/core": "^9.1.0",
-                "async-validator": "^4.2.5",
-                "dayjs": "^1.11.3",
-                "escape-html": "^1.0.3",
-                "lodash": "^4.17.21",
-                "lodash-es": "^4.17.21",
-                "lodash-unified": "^1.0.2",
-                "memoize-one": "^6.0.0",
-                "normalize-wheel-es": "^1.2.0"
-            },
-            "peerDependencies": {
-                "vue": "^3.2.0"
-            }
+        "node_modules/emoji-regex": {
+            "version": "9.2.2",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+            "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+            "dev": true
         },
         "node_modules/emojis-list": {
             "version": "3.0.0",
@@ -1799,11 +1824,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/escape-html": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-            "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-        },
         "node_modules/escape-string-regexp": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1817,9 +1837,9 @@
             }
         },
         "node_modules/eslint": {
-            "version": "8.33.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
-            "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
+            "version": "8.34.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+            "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
             "dev": true,
             "dependencies": {
                 "@eslint/eslintrc": "^1.4.1",
@@ -1885,9 +1905,9 @@
             }
         },
         "node_modules/eslint-plugin-jsdoc": {
-            "version": "39.7.5",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-39.7.5.tgz",
-            "integrity": "sha512-6L90P0AnZcE4ra7nocolp9vTjgVr2wEZ7jPnEA/X30XAoQPk+wvnaq61n164Tf7Fg4QPpJtRSCPpApOsfWDdNA==",
+            "version": "39.9.1",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-39.9.1.tgz",
+            "integrity": "sha512-Rq2QY6BZP2meNIs48aZ3GlIlJgBqFCmR55+UBvaDkA3ZNQ0SvQXOs2QKkubakEijV8UbIVbVZKsOVN8G3MuqZw==",
             "dev": true,
             "dependencies": {
                 "@es-joy/jsdoccomment": "~0.36.1",
@@ -2014,9 +2034,9 @@
             }
         },
         "node_modules/esquery": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
-            "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.2.tgz",
+            "integrity": "sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==",
             "dev": true,
             "dependencies": {
                 "estraverse": "^5.1.0"
@@ -2195,40 +2215,6 @@
             "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
             "dev": true
         },
-        "node_modules/follow-redirects": {
-            "version": "1.15.2",
-            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-            "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-            "dev": true,
-            "funding": [
-                {
-                    "type": "individual",
-                    "url": "https://github.com/sponsors/RubenVerborgh"
-                }
-            ],
-            "engines": {
-                "node": ">=4.0"
-            },
-            "peerDependenciesMeta": {
-                "debug": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/form-data": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-            "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-            "dev": true,
-            "dependencies": {
-                "asynckit": "^0.4.0",
-                "combined-stream": "^1.0.8",
-                "mime-types": "^2.1.12"
-            },
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2253,6 +2239,15 @@
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
             "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
         },
+        "node_modules/get-func-name": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
+            "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
+            "dev": true,
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/glob": {
             "version": "7.2.3",
             "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2372,9 +2367,9 @@
             }
         },
         "node_modules/immutable": {
-            "version": "4.2.3",
-            "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.3.tgz",
-            "integrity": "sha512-IHpmvaOIX4VLJwPOuQr1NpeBr2ZG6vpIj3blsLVxXRWJscLioaJRStqC+NcBsLeCDsnGlPpXd5/WZmnE7MbsKA=="
+            "version": "4.2.4",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
+            "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w=="
         },
         "node_modules/import-fresh": {
             "version": "3.3.0",
@@ -2447,6 +2442,18 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/is-fullwidth-code-point": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+            "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/is-glob": {
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -2569,10 +2576,16 @@
                 "node": ">=6"
             }
         },
+        "node_modules/jsonc-parser": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+            "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+            "dev": true
+        },
         "node_modules/laravel-vite-plugin": {
-            "version": "0.7.3",
-            "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-0.7.3.tgz",
-            "integrity": "sha512-N6hH/JFA98oW1I0OZ2Gx1HF3/QzkBpUIkxqfKqxENQNLWLFx4+CWB7cxP+i4sGXp9LQUlLbH5Lq/eZoXtLAq8w==",
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-0.7.4.tgz",
+            "integrity": "sha512-NlIuXbeuI+4NZzRpWNpGHRVTwuFWessvD7QoD+o2MlyAi7qyUS4J8r4/yTlu1dl9lxcR7iKoYUmHQqZDcrw2KA==",
             "dev": true,
             "dependencies": {
                 "picocolors": "^1.0.0",
@@ -2620,6 +2633,18 @@
                 "node": ">=8.9.0"
             }
         },
+        "node_modules/local-pkg": {
+            "version": "0.4.3",
+            "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+            "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+            "dev": true,
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
         "node_modules/locate-path": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2638,22 +2663,8 @@
         "node_modules/lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-        },
-        "node_modules/lodash-es": {
-            "version": "4.17.21",
-            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-        },
-        "node_modules/lodash-unified": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-            "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
-            "peerDependencies": {
-                "@types/lodash-es": "*",
-                "lodash": "*",
-                "lodash-es": "*"
-            }
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "dev": true
         },
         "node_modules/lodash.merge": {
             "version": "4.6.2",
@@ -2661,6 +2672,15 @@
             "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
             "dev": true
         },
+        "node_modules/loupe": {
+            "version": "2.3.6",
+            "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
+            "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==",
+            "dev": true,
+            "dependencies": {
+                "get-func-name": "^2.0.0"
+            }
+        },
         "node_modules/lru-cache": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -2681,10 +2701,11 @@
                 "sourcemap-codec": "^1.4.8"
             }
         },
-        "node_modules/memoize-one": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
-            "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+        "node_modules/make-error": {
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+            "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+            "dev": true
         },
         "node_modules/merge-stream": {
             "version": "2.0.0",
@@ -2718,6 +2739,7 @@
             "version": "1.52.0",
             "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
             "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+            "peer": true,
             "engines": {
                 "node": ">= 0.6"
             }
@@ -2726,6 +2748,7 @@
             "version": "2.1.35",
             "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
             "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+            "peer": true,
             "dependencies": {
                 "mime-db": "1.52.0"
             },
@@ -2745,6 +2768,18 @@
                 "node": "*"
             }
         },
+        "node_modules/mlly": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.1.1.tgz",
+            "integrity": "sha512-Jnlh4W/aI4GySPo6+DyTN17Q75KKbLTyFK8BrGhjNP4rxuUjbRWhE6gHg3bs33URWAF44FRm7gdQA348i3XxRw==",
+            "dev": true,
+            "dependencies": {
+                "acorn": "^8.8.2",
+                "pathe": "^1.1.0",
+                "pkg-types": "^1.0.1",
+                "ufo": "^1.1.0"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -2781,9 +2816,9 @@
             "peer": true
         },
         "node_modules/node-releases": {
-            "version": "2.0.9",
-            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.9.tgz",
-            "integrity": "sha512-2xfmOrRkGogbTK9R6Leda0DGiXeY3p2NJpy4+gNCffdUvV6mdEJnaDEic1i3Ec2djAo8jWYoJMR5PB0MSMpxUA==",
+            "version": "2.0.10",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
+            "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
             "peer": true
         },
         "node_modules/normalize-path": {
@@ -2794,11 +2829,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/normalize-wheel-es": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
-            "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
-        },
         "node_modules/normalize.css": {
             "version": "8.0.1",
             "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
@@ -2925,6 +2955,21 @@
                 "node": ">=8"
             }
         },
+        "node_modules/pathe": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz",
+            "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==",
+            "dev": true
+        },
+        "node_modules/pathval": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+            "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+            "dev": true,
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/picocolors": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2942,11 +2987,11 @@
             }
         },
         "node_modules/pinia": {
-            "version": "2.0.30",
-            "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.30.tgz",
-            "integrity": "sha512-q6DUmxWwe/mQgg+55QQjykpKC+aGeGdaJV3niminl19V08dE+LRTvSEuqi6/NLSGCKHI49KGL6tMNEOssFiMyA==",
+            "version": "2.0.32",
+            "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.32.tgz",
+            "integrity": "sha512-8Tw4OrpCSJ028UUyp0gYPP/wyjigLoEceuO/x1G+FlHVf73337e5vLm4uDmrRIoBG1hvaed/eSHnrCFjOc4nkA==",
             "dependencies": {
-                "@vue/devtools-api": "^6.4.5",
+                "@vue/devtools-api": "^6.5.0",
                 "vue-demi": "*"
             },
             "funding": {
@@ -2967,13 +3012,24 @@
             }
         },
         "node_modules/pinia-plugin-persistedstate": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.0.2.tgz",
-            "integrity": "sha512-84vPyUhPA/8Pr+1mT1ioNb2d8z4tvdgYRqMQf8xyauOVBKjo0ZcRBwPQBV7ZAJG43Kwar43nXG2jU+ZMvAFFRQ==",
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.1.0.tgz",
+            "integrity": "sha512-8UN+vYMEPBdgNLwceY08mi5olI0wkYaEb8b6hD6xW7SnBRuPydWHlEhZvUWgNb/ibuf4PvufpvtS+dmhYjJQOw==",
             "peerDependencies": {
                 "pinia": "^2.0.0"
             }
         },
+        "node_modules/pkg-types": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.2.tgz",
+            "integrity": "sha512-hM58GKXOcj8WTqUXnsQyJYXdeAPbythQgEF3nTcEo+nkD49chjQ9IKm/QJy9xf6JakXptz86h7ecP2024rrLaQ==",
+            "dev": true,
+            "dependencies": {
+                "jsonc-parser": "^3.2.0",
+                "mlly": "^1.1.1",
+                "pathe": "^1.1.0"
+            }
+        },
         "node_modules/postcss": {
             "version": "8.4.21",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
@@ -3034,11 +3090,31 @@
                 "url": "https://github.com/prettier/prettier?sponsor=1"
             }
         },
-        "node_modules/proxy-from-env": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-            "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-            "dev": true
+        "node_modules/pretty-format": {
+            "version": "27.5.1",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+            "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+            "dev": true,
+            "dependencies": {
+                "ansi-regex": "^5.0.1",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^17.0.1"
+            },
+            "engines": {
+                "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+            }
+        },
+        "node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
         },
         "node_modules/punycode": {
             "version": "2.3.0",
@@ -3077,6 +3153,12 @@
                 "safe-buffer": "^5.1.0"
             }
         },
+        "node_modules/react-is": {
+            "version": "17.0.2",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+            "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+            "dev": true
+        },
         "node_modules/readdirp": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3156,9 +3238,9 @@
             }
         },
         "node_modules/rollup": {
-            "version": "3.12.1",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz",
-            "integrity": "sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==",
+            "version": "3.17.2",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.17.2.tgz",
+            "integrity": "sha512-qMNZdlQPCkWodrAZ3qnJtvCAl4vpQ8q77uEujVCCbC/6CLB7Lcmvjq7HyiOSnf4fxTT9XgsE36oLHJBH49xjqA==",
             "bin": {
                 "rollup": "dist/bin/rollup"
             },
@@ -3170,6 +3252,15 @@
                 "fsevents": "~2.3.2"
             }
         },
+        "node_modules/rollup-plugin-analyzer": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/rollup-plugin-analyzer/-/rollup-plugin-analyzer-4.0.0.tgz",
+            "integrity": "sha512-LL9GEt3bkXp6Wa19SNR5MWcvHNMvuTFYg+eYBZN2OIFhSWN+pEJUQXEKu5BsOeABob3x9PDaLKW7w5iOJnsESQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
         "node_modules/run-parallel": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -3214,9 +3305,9 @@
             "peer": true
         },
         "node_modules/sass": {
-            "version": "1.58.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz",
-            "integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==",
+            "version": "1.58.3",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
+            "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
                 "immutable": "^4.0.0",
@@ -3292,6 +3383,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/siginfo": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+            "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+            "dev": true
+        },
         "node_modules/slash": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -3301,6 +3398,34 @@
                 "node": ">=8"
             }
         },
+        "node_modules/slice-ansi": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+            "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+            "dev": true,
+            "dependencies": {
+                "ansi-styles": "^6.0.0",
+                "is-fullwidth-code-point": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+            }
+        },
+        "node_modules/slice-ansi/node_modules/ansi-styles": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+            "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+            "dev": true,
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
         "node_modules/source-map": {
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3321,7 +3446,6 @@
             "version": "0.5.21",
             "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
             "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-            "peer": true,
             "dependencies": {
                 "buffer-from": "^1.0.0",
                 "source-map": "^0.6.0"
@@ -3355,6 +3479,62 @@
             "integrity": "sha512-rr+VVSXtRhO4OHbXUiAF7xW3Bo9DuuF6C5jH+q/x15j2jniycgKbxU09Hr0WqlSLUs4i4ltHGXqTe7VHclYWyA==",
             "dev": true
         },
+        "node_modules/stackback": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+            "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+            "dev": true
+        },
+        "node_modules/std-env": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.2.tgz",
+            "integrity": "sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA==",
+            "dev": true
+        },
+        "node_modules/string-width": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+            "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+            "dev": true,
+            "dependencies": {
+                "eastasianwidth": "^0.2.0",
+                "emoji-regex": "^9.2.2",
+                "strip-ansi": "^7.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/string-width/node_modules/ansi-regex": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+            "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+            "dev": true,
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+            }
+        },
+        "node_modules/string-width/node_modules/strip-ansi": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+            "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+            "dev": true,
+            "dependencies": {
+                "ansi-regex": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+            }
+        },
         "node_modules/strip-ansi": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -3379,6 +3559,18 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/strip-literal": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.1.tgz",
+            "integrity": "sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==",
+            "dev": true,
+            "dependencies": {
+                "acorn": "^8.8.2"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
         "node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3411,9 +3603,9 @@
             }
         },
         "node_modules/terser": {
-            "version": "5.16.2",
-            "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.2.tgz",
-            "integrity": "sha512-JKuM+KvvWVqT7muHVyrwv7FVRPnmHDwF6XwoIxdbF5Witi0vu99RYpxDexpJndXt3jbZZmmWr2/mQa6HvSNdSg==",
+            "version": "5.16.5",
+            "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.5.tgz",
+            "integrity": "sha512-qcwfg4+RZa3YvlFh0qjifnzBHjKGNbtDo9yivMqMFDy9Q6FSaQWSB/j1xKhsoUFJIqDOM3TsN6D5xbrMrFcHbg==",
             "peer": true,
             "dependencies": {
                 "@jridgewell/source-map": "^0.3.2",
@@ -3462,12 +3654,51 @@
                 }
             }
         },
+        "node_modules/terser-webpack-plugin/node_modules/@jridgewell/trace-mapping": {
+            "version": "0.3.17",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+            "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+            "peer": true,
+            "dependencies": {
+                "@jridgewell/resolve-uri": "3.1.0",
+                "@jridgewell/sourcemap-codec": "1.4.14"
+            }
+        },
         "node_modules/text-table": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
             "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
             "dev": true
         },
+        "node_modules/tinybench": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.3.1.tgz",
+            "integrity": "sha512-hGYWYBMPr7p4g5IarQE7XhlyWveh1EKhy4wUBS1LrHXCKYgvz+4/jCqgmJqZxxldesn05vccrtME2RLLZNW7iA==",
+            "dev": true
+        },
+        "node_modules/tinymce": {
+            "version": "6.3.2",
+            "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.3.2.tgz",
+            "integrity": "sha512-nOVHk4FhHKQj48hi7fEptS1Se6CNzPtfIcDzTO70KoTcSiQIFzhhZjS5bPotSzFnQ4dIQJ4QPOd7sqNs6fXUrA=="
+        },
+        "node_modules/tinypool": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.3.1.tgz",
+            "integrity": "sha512-zLA1ZXlstbU2rlpA4CIeVaqvWq41MTWqLY3FfsAXgC8+f7Pk7zroaJQxDgxn1xNudKW6Kmj4808rPFShUlIRmQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/tinyspy": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-1.1.1.tgz",
+            "integrity": "sha512-UVq5AXt/gQlti7oxoIg5oi/9r0WpF7DGEVwXgqWSMmyN16+e3tl5lIvTaOpJ3TAtu5xFzWccFRM4R5NaWHF+4g==",
+            "dev": true,
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/to-regex-range": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3479,10 +3710,48 @@
                 "node": ">=8.0"
             }
         },
-        "node_modules/trix": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/trix/-/trix-2.0.4.tgz",
-            "integrity": "sha512-WOMKqwCVti0i3RVaDrMnrEZWs6XMpFoCfUvFCZNd15KndAy6MsYQscizxEpFiCLUlo+rXMkueK0ldRDo5xpVJA=="
+        "node_modules/ts-node": {
+            "version": "10.9.1",
+            "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+            "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+            "dev": true,
+            "dependencies": {
+                "@cspotcode/source-map-support": "^0.8.0",
+                "@tsconfig/node10": "^1.0.7",
+                "@tsconfig/node12": "^1.0.7",
+                "@tsconfig/node14": "^1.0.0",
+                "@tsconfig/node16": "^1.0.2",
+                "acorn": "^8.4.1",
+                "acorn-walk": "^8.1.1",
+                "arg": "^4.1.0",
+                "create-require": "^1.1.0",
+                "diff": "^4.0.1",
+                "make-error": "^1.1.1",
+                "v8-compile-cache-lib": "^3.0.1",
+                "yn": "3.1.1"
+            },
+            "bin": {
+                "ts-node": "dist/bin.js",
+                "ts-node-cwd": "dist/bin-cwd.js",
+                "ts-node-esm": "dist/bin-esm.js",
+                "ts-node-script": "dist/bin-script.js",
+                "ts-node-transpile-only": "dist/bin-transpile.js",
+                "ts-script": "dist/bin-script-deprecated.js"
+            },
+            "peerDependencies": {
+                "@swc/core": ">=1.2.50",
+                "@swc/wasm": ">=1.2.50",
+                "@types/node": "*",
+                "typescript": ">=2.7"
+            },
+            "peerDependenciesMeta": {
+                "@swc/core": {
+                    "optional": true
+                },
+                "@swc/wasm": {
+                    "optional": true
+                }
+            }
         },
         "node_modules/tslib": {
             "version": "1.14.1",
@@ -3517,6 +3786,15 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/type-detect": {
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+            "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+            "dev": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/type-fest": {
             "version": "0.20.2",
             "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -3542,6 +3820,12 @@
                 "node": ">=4.2.0"
             }
         },
+        "node_modules/ufo": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.0.tgz",
+            "integrity": "sha512-LQc2s/ZDMaCN3QLpa+uzHUOQ7SdV0qgv3VBXOolQGXTaaZpIur6PwUclF5nN2hNkiTRcUugXd1zFOW3FLJ135Q==",
+            "dev": true
+        },
         "node_modules/update-browserslist-db": {
             "version": "1.0.10",
             "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
@@ -3582,10 +3866,16 @@
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
             "dev": true
         },
+        "node_modules/v8-compile-cache-lib": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+            "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+            "dev": true
+        },
         "node_modules/vite": {
-            "version": "4.1.1",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.1.tgz",
-            "integrity": "sha512-LM9WWea8vsxhr782r9ntg+bhSFS06FJgCvvB0+8hf8UWtvaiDagKYWXndjfX6kGl74keHJUcpzrQliDXZlF5yg==",
+            "version": "4.1.4",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz",
+            "integrity": "sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==",
             "dependencies": {
                 "esbuild": "^0.16.14",
                 "postcss": "^8.4.21",
@@ -3630,6 +3920,31 @@
                 }
             }
         },
+        "node_modules/vite-node": {
+            "version": "0.28.5",
+            "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.28.5.tgz",
+            "integrity": "sha512-LmXb9saMGlrMZbXTvOveJKwMTBTNUH66c8rJnQ0ZPNX+myPEol64+szRzXtV5ORb0Hb/91yq+/D3oERoyAt6LA==",
+            "dev": true,
+            "dependencies": {
+                "cac": "^6.7.14",
+                "debug": "^4.3.4",
+                "mlly": "^1.1.0",
+                "pathe": "^1.1.0",
+                "picocolors": "^1.0.0",
+                "source-map": "^0.6.1",
+                "source-map-support": "^0.5.21",
+                "vite": "^3.0.0 || ^4.0.0"
+            },
+            "bin": {
+                "vite-node": "vite-node.mjs"
+            },
+            "engines": {
+                "node": ">=v14.16.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
         "node_modules/vite-plugin-full-reload": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/vite-plugin-full-reload/-/vite-plugin-full-reload-1.0.5.tgz",
@@ -3643,6 +3958,71 @@
                 "vite": "^2 || ^3 || ^4"
             }
         },
+        "node_modules/vitest": {
+            "version": "0.28.5",
+            "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.28.5.tgz",
+            "integrity": "sha512-pyCQ+wcAOX7mKMcBNkzDwEHRGqQvHUl0XnoHR+3Pb1hytAHISgSxv9h0gUiSiYtISXUU3rMrKiKzFYDrI6ZIHA==",
+            "dev": true,
+            "dependencies": {
+                "@types/chai": "^4.3.4",
+                "@types/chai-subset": "^1.3.3",
+                "@types/node": "*",
+                "@vitest/expect": "0.28.5",
+                "@vitest/runner": "0.28.5",
+                "@vitest/spy": "0.28.5",
+                "@vitest/utils": "0.28.5",
+                "acorn": "^8.8.1",
+                "acorn-walk": "^8.2.0",
+                "cac": "^6.7.14",
+                "chai": "^4.3.7",
+                "debug": "^4.3.4",
+                "local-pkg": "^0.4.2",
+                "pathe": "^1.1.0",
+                "picocolors": "^1.0.0",
+                "source-map": "^0.6.1",
+                "std-env": "^3.3.1",
+                "strip-literal": "^1.0.0",
+                "tinybench": "^2.3.1",
+                "tinypool": "^0.3.1",
+                "tinyspy": "^1.0.2",
+                "vite": "^3.0.0 || ^4.0.0",
+                "vite-node": "0.28.5",
+                "why-is-node-running": "^2.2.2"
+            },
+            "bin": {
+                "vitest": "vitest.mjs"
+            },
+            "engines": {
+                "node": ">=v14.16.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@edge-runtime/vm": "*",
+                "@vitest/browser": "*",
+                "@vitest/ui": "*",
+                "happy-dom": "*",
+                "jsdom": "*"
+            },
+            "peerDependenciesMeta": {
+                "@edge-runtime/vm": {
+                    "optional": true
+                },
+                "@vitest/browser": {
+                    "optional": true
+                },
+                "@vitest/ui": {
+                    "optional": true
+                },
+                "happy-dom": {
+                    "optional": true
+                },
+                "jsdom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/vue": {
             "version": "3.2.47",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
@@ -3692,6 +4072,11 @@
                 "vue": "^2.7.0 || ^3.0.0"
             }
         },
+        "node_modules/vue-dompurify-html/node_modules/dompurify": {
+            "version": "2.4.4",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.4.tgz",
+            "integrity": "sha512-1e2SpqHiRx4DPvmRuXU5J0di3iQACwJM+mFGE2HAkkK7Tbnfk9WcghcAmyWc9CRrjyRRUpmuhPUH6LphQQR3EQ=="
+        },
         "node_modules/vue-eslint-parser": {
             "version": "9.1.0",
             "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz",
@@ -3790,9 +4175,9 @@
             }
         },
         "node_modules/vue3-easy-data-table": {
-            "version": "1.5.30",
-            "resolved": "https://registry.npmjs.org/vue3-easy-data-table/-/vue3-easy-data-table-1.5.30.tgz",
-            "integrity": "sha512-/jHmruqEeFKs2StlfPhjJRsTN7temql6HijTtS9G35remez5fWHmyIbUa+vPeDsD1HhenGj5EKMlfKktU11dYw==",
+            "version": "1.5.34",
+            "resolved": "https://registry.npmjs.org/vue3-easy-data-table/-/vue3-easy-data-table-1.5.34.tgz",
+            "integrity": "sha512-hLe0Jp+xyhB5uprkzWxTiq6K0+nZhcxwADLC48YK1Rf3wxNA5UuZsgs6uXNmOQ2xGQyAjymp5v7NrzEBcGNqTg==",
             "dependencies": {
                 "vue": "^3.2.45"
             }
@@ -3889,6 +4274,22 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/why-is-node-running": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
+            "integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==",
+            "dev": true,
+            "dependencies": {
+                "siginfo": "^2.0.0",
+                "stackback": "0.0.2"
+            },
+            "bin": {
+                "why-is-node-running": "cli.js"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/word-wrap": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -3919,6 +4320,15 @@
             "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
             "dev": true
         },
+        "node_modules/yn": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+            "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+            "dev": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/yocto-queue": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 19ba6f6..c647b57 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,13 @@
         "dev": "vite",
         "build": "vite build",
         "lint": "eslint \"**/*.{js,jsx,.vue}\" --ignore-path .gitignore",
-        "format": "prettier .  --write"
+        "format": "prettier .  --write",
+        "test": "vitest",
+        "prepare": "mkdir -p public/tinymce/skins && cp -r node_modules/tinymce/skins public/tinymce && mkdir -p public/tinymce/plugins/emoticons/js && cp node_modules/tinymce/plugins/emoticons/js/emojis.min.js public/tinymce/plugins/emoticons/js/"
     },
     "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^5.48.1",
         "@typescript-eslint/parser": "^5.48.1",
-        "axios": "^1.1.2",
         "eslint": "^8.31.0",
         "eslint-config-prettier": "^8.6.0",
         "eslint-plugin-jsdoc": "^39.6.4",
@@ -18,25 +19,23 @@
         "lodash": "^4.17.19",
         "postcss": "^8.1.14",
         "prettier": "2.8.2",
-        "typescript": "^4.9.4",
-        "vite": "^4.0.0"
+        "rollup-plugin-analyzer": "^4.0.0",
+        "ts-node": "^10.9.1",
+        "typescript": "^4.9.5",
+        "vite": "^4.0.0",
+        "vitest": "^0.28.5"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.2.1",
-        "@fortawesome/free-brands-svg-icons": "^6.2.1",
-        "@fortawesome/free-regular-svg-icons": "^6.2.1",
-        "@fortawesome/free-solid-svg-icons": "^6.2.1",
-        "@fortawesome/vue-fontawesome": "^3.0.2",
+        "@tinymce/tinymce-vue": "^4.0.7",
         "@vitejs/plugin-vue": "^4.0.0",
         "@vuepic/vue-datepicker": "^3.6.4",
-        "date-fns": "^2.29.3",
+        "dompurify": "^3.0.0",
         "dotenv": "^16.0.3",
-        "element-plus": "^2.2.27",
         "normalize.css": "^8.0.1",
         "pinia": "^2.0.28",
         "pinia-plugin-persistedstate": "^3.0.1",
         "sass": "^1.57.1",
-        "trix": "^2.0.4",
+        "tinymce": "^6.3.1",
         "vue": "^3.2.36",
         "vue-dompurify-html": "^3.1.2",
         "vue-final-modal": "^3.4.11",
diff --git a/public/.htaccess b/public/.htaccess
index 2522f5c..083e7d0 100644
--- a/public/.htaccess
+++ b/public/.htaccess
@@ -3,6 +3,14 @@
         Options -MultiViews -Indexes
     </IfModule>
 
+    <IfModule mod_headers.c>
+        <FilesMatch "^(uploads|img)/.+">
+            <If "%{QUERY_STRING} =~ /(^|&)download=1($|&)/">
+                Header set Content-Disposition "attachment"
+            </If>
+        </FilesMatch>
+    </IfModule>
+
     RewriteEngine On
 
     # Add www subdomain if missing
@@ -18,6 +26,11 @@
     RewriteCond %{REQUEST_URI} (.+)/$
     RewriteRule ^ %1 [L,R=301]
 
+    # Pass to media handler if the media request has query
+    RewriteCond %{REQUEST_FILENAME} -f
+    RewriteCond %{QUERY_STRING} .
+    RewriteRule ^uploads/(.+)\.(jpe?g|png)$ media.php?url=uploads/$1.$2 [NC,QSA,L]
+
     # Send Requests To Front Controller...
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteCond %{REQUEST_FILENAME} !-f
diff --git a/public/img/background.jpg b/public/img/background.jpg
new file mode 100644
index 0000000..e243968
Binary files /dev/null and b/public/img/background.jpg differ
diff --git a/public/img/dashboard-bg.jpg b/public/img/dashboard-bg.jpg
new file mode 100644
index 0000000..858bbb8
Binary files /dev/null and b/public/img/dashboard-bg.jpg differ
diff --git a/public/img/fileicons/.htaccess b/public/img/fileicons/.htaccess
new file mode 100644
index 0000000..05d0416
--- /dev/null
+++ b/public/img/fileicons/.htaccess
@@ -0,0 +1,3 @@
+RewriteEngine on
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule \.png$ unknown.png [L]
\ No newline at end of file
diff --git a/public/img/fileicons/doc.png b/public/img/fileicons/doc.png
new file mode 100644
index 0000000..d302d9c
Binary files /dev/null and b/public/img/fileicons/doc.png differ
diff --git a/public/img/fileicons/docx.png b/public/img/fileicons/docx.png
new file mode 100644
index 0000000..7ed6d75
Binary files /dev/null and b/public/img/fileicons/docx.png differ
diff --git a/public/img/fileicons/file-icons.png b/public/img/fileicons/file-icons.png
new file mode 100644
index 0000000..efbcbbc
Binary files /dev/null and b/public/img/fileicons/file-icons.png differ
diff --git a/public/img/fileicons/jpeg.png b/public/img/fileicons/jpeg.png
new file mode 100644
index 0000000..16f1580
Binary files /dev/null and b/public/img/fileicons/jpeg.png differ
diff --git a/public/img/fileicons/jpg.png b/public/img/fileicons/jpg.png
new file mode 100644
index 0000000..0ed77b3
Binary files /dev/null and b/public/img/fileicons/jpg.png differ
diff --git a/public/img/fileicons/pdf.png b/public/img/fileicons/pdf.png
new file mode 100644
index 0000000..250c2e1
Binary files /dev/null and b/public/img/fileicons/pdf.png differ
diff --git a/public/img/fileicons/png.png b/public/img/fileicons/png.png
new file mode 100644
index 0000000..3370a9d
Binary files /dev/null and b/public/img/fileicons/png.png differ
diff --git a/public/img/fileicons/svg.png b/public/img/fileicons/svg.png
new file mode 100644
index 0000000..da2d5ae
Binary files /dev/null and b/public/img/fileicons/svg.png differ
diff --git a/public/img/fileicons/unknown.png b/public/img/fileicons/unknown.png
new file mode 100644
index 0000000..f5feb75
Binary files /dev/null and b/public/img/fileicons/unknown.png differ
diff --git a/public/img/fileicons/xls.png b/public/img/fileicons/xls.png
new file mode 100644
index 0000000..2951d01
Binary files /dev/null and b/public/img/fileicons/xls.png differ
diff --git a/public/img/fileicons/xml.png b/public/img/fileicons/xml.png
new file mode 100644
index 0000000..3201fd6
Binary files /dev/null and b/public/img/fileicons/xml.png differ
diff --git a/public/img/fileicons/zip.png b/public/img/fileicons/zip.png
new file mode 100644
index 0000000..5ef0e3a
Binary files /dev/null and b/public/img/fileicons/zip.png differ
diff --git a/public/media.php b/public/media.php
new file mode 100644
index 0000000..6a5cbc0
--- /dev/null
+++ b/public/media.php
@@ -0,0 +1,60 @@
+<?php
+// file deepcode ignore PT: Input is sanitized using realpath which is ignored by Snyk
+// file deepcode ignore Ssrf: Input is sanitized using realpath which is ignored by Snyk
+
+$filepath = "";
+if (isset($_GET['url'])) {
+    $filepath = realpath($_GET['url']);
+}
+
+if ($filepath !== false && strlen($filepath) > 0 && strpos($filepath, 'uploads/') === 0 && is_file($filepath)) {
+    $image = imagecreatefromstring(file_get_contents($filepath));
+
+    $newWidth = (isset($_GET['w']) ? intval($_GET['w']) : -1);
+    $newHeight = (isset($_GET['h']) ? intval($_GET['h']) : -1);
+
+    if($newWidth != -1 || $newHeight != -1) {
+        $width = imagesx($image);
+        $height = imagesy($image);
+
+        $aspectRatio = $width / $height;
+
+        if($newWidth == -1) {
+            $newWidth = intval($newHeight * $aspectRatio);
+        }
+
+        if($newHeight == -1) {
+            $newHeight = intval($newWidth / $aspectRatio);
+        }
+
+        $newImage = imagecreatetruecolor($newWidth, $newHeight);
+        imagecopyresampled($newImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
+
+        // Output the resized image to the browser
+        $mime_type = mime_content_type($_GET['url']);
+        header('Content-Type: ' . $mime_type);
+        switch($mime_type) {
+            case "image/jpeg":
+                imagejpeg($newImage);
+                break;
+            case "image/gif":
+                imagegif($newImage);
+                break;
+            case "image/png":
+                imagepng($newImage);
+                break;
+        }
+        imagedestroy($newImage);
+    } else {
+        // Output the original image to the browser
+        header('Content-Type:  '. mime_content_type($filepath));
+        readfile($filepath);
+    }
+
+    // Clean up the image resources
+    imagedestroy($image);
+} else {
+    // Return a 404 error
+    header($_SERVER["SERVER_PROTOCOL"] . " 404 Not Found");
+    exit;
+}
diff --git a/resources/css/app.scss b/resources/css/app.scss
index 6aebd87..6098d19 100644
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -1,7 +1,8 @@
 @import "variables.scss";
 @import "utils.scss";
 @import "data-table.scss";
-@import "datepicker.scss";
+@import "tinymce.scss";
+@import "prism.css";
 
 * {
     box-sizing: border-box;
@@ -20,6 +21,11 @@ body {
     min-height: 100vh;
 }
 
+// Who knows why ion-icon randomally sets this to hidden.....
+ion-icon {
+    visibility: visible;
+}
+
 #app {
     display: flex;
     flex-direction: column;
@@ -43,50 +49,31 @@ h1 {
     font-weight: 800;
 }
 
-label {
-    display: block;
-    margin-bottom: map-get($spacer, 1);
-
-    &.required:after {
-        content: " *";
-        color: $danger-color;
-    }
-
-    &.inline {
-        display: inline-block;
-        margin-right: map-get($spacer, 3);
-
-        &:after {
-            content: ":";
-        }
-    }
-}
-
 p {
     line-height: 1.5rem;
     margin-top: 0;
 }
 
-input,
-select,
-textarea {
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    border: 1px solid $border-color;
-    border-radius: 12px;
-    padding: map-get($spacer, 2) map-get($spacer, 3);
-    color: $font-color;
-    margin-bottom: map-get($spacer, 4);
+// input,
+// select,
+// textarea {
+//     box-sizing: border-box;
+//     display: block;
+//     width: 100%;
+//     border: 1px solid $border-color;
+//     border-radius: 12px;
+//     padding: map-get($spacer, 2) map-get($spacer, 3);
+//     color: $font-color;
+//     margin-bottom: map-get($spacer, 4);
 
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-}
+//     -webkit-appearance: none;
+//     -moz-appearance: none;
+//     appearance: none;
+// }
 
-textarea {
-    resize: none;
-}
+// textarea {
+//     resize: none;
+// }
 
 select {
     padding-right: 2.5rem;
@@ -137,11 +124,6 @@ select {
     }
 }
 
-svg,
-button {
-    @extend .prevent-select;
-}
-
 code {
     display: block;
     font-size: 0.8rem;
@@ -178,182 +160,13 @@ code {
     }
 }
 
-/* Loader */
-.loader-cover {
-    position: fixed;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    backdrop-filter: blur(14px);
-    -webkit-backdrop-filter: blur(4px);
-    background-color: rgba(255, 255, 255, 0.5);
-
-    .loader {
-        display: flex;
-        flex-direction: column;
-        padding: map-get($spacer, 5) calc(map-get($spacer, 5) * 2);
-
-        border: 1px solid transparent;
-        border-radius: 24px;
-
-        svg {
-            font-size: calc(map-get($spacer, 5) * 1.5);
-        }
-
-        span {
-            font-size: map-get($spacer, 4);
-            padding-top: map-get($spacer, 3);
-        }
-    }
-}
-
-/* Button */
-button.button,
-a.button,
-label.button {
-    padding: map-get($spacer, 2) map-get($spacer, 4);
-    color: white;
-    font-weight: 800;
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 24px;
-    transition: background-color 0.1s, color 0.1s;
-    cursor: pointer;
-    background-color: $secondary-color;
-    border-color: $secondary-color;
-    min-width: 7rem;
-    text-align: center;
-
-    &:disabled {
-        cursor: not-allowed;
-        background-color: $secondary-color !important;
-        border-color: $secondary-color !important;
-        opacity: 0.5;
-    }
-
-    &:hover:not(:disabled) {
-        text-decoration: none;
-        color: $secondary-color;
-    }
-
-    &.primary {
-        background-color: $primary-color;
-        border-color: $primary-color;
-
-        &:hover:not(:disabled) {
-            color: $primary-color;
-        }
-    }
-
-    &.secondary {
-        background-color: $secondary-color;
-        border-color: $secondary-color;
-
-        &:hover:not(:disabled) {
-            color: $secondary-color;
-        }
-    }
-
-    &.danger {
-        background-color: $danger-color;
-        border-color: $danger-color;
-
-        &:hover:not(:disabled) {
-            color: $danger-color;
-        }
-    }
-
-    &.outline {
-        background-color: transparent;
-        border-color: $outline-color;
-        color: $outline-color;
-
-        &:hover:not(:disabled) {
-            background-color: $outline-color;
-            border-color: $outline-color;
-            color: $outline-hover-color;
-        }
-    }
-
-    &:hover:not(:disabled) {
-        background-color: #fff;
-    }
-
-    svg {
-        padding-left: 0.5rem;
-        vertical-align: middle !important;
-    }
-}
-
-.button + .button {
-    margin: 0 map-get($spacer, 2);
-
-    &:first-child {
-        margin-left: 0;
-    }
-
-    &:last-child {
-        margin-right: 0;
-    }
-}
-
-/* Form Group */
-.form-group {
-    margin-bottom: map-get($spacer, 3);
-    padding: 0 4px;
-    flex: 1;
-
-    input,
-    textarea {
-        margin-bottom: map-get($spacer, 1);
-    }
-
-    .form-group-info {
-        font-size: 85%;
-        margin-bottom: map-get($spacer, 1);
-    }
-
-    .form-group-error {
-        // display: none;
-        font-size: 85%;
-        margin-bottom: map-get($spacer, 1);
-        color: $danger-color;
-    }
-
-    .form-group-help {
-        font-size: 85%;
-        margin-bottom: map-get($spacer, 1);
-        color: $secondary-color;
-
-        svg {
-            vertical-align: middle !important;
-        }
-    }
-
-    &.has-error {
-        input,
-        textarea,
-        .input-file-group,
-        .input-media-group .input-media-display {
-            border: 2px solid $danger-color;
-        }
-
-        .form-group-error {
-            display: block;
-        }
-    }
-}
-
 /* Page Errors */
 .page-error {
     display: flex;
     flex-direction: row;
     flex: 1;
     margin-top: map-get($spacer, 5);
+    min-height: 50vh;
 
     .image {
         flex: 1;
diff --git a/resources/css/prism.css b/resources/css/prism.css
new file mode 100644
index 0000000..0051c7e
--- /dev/null
+++ b/resources/css/prism.css
@@ -0,0 +1,3 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&languages=markup+clike+javascript+bash+c+javadoclike+js-extras+json+json5+log+markup-templating+objectivec+perl+php+phpdoc+php-extras+python+regex+sql+swift+typoscript+yaml */
+code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
diff --git a/resources/css/tinymce.scss b/resources/css/tinymce.scss
new file mode 100644
index 0000000..9e06f4e
--- /dev/null
+++ b/resources/css/tinymce.scss
@@ -0,0 +1,3 @@
+// @import "../../public/skins/ui/oxide/skin.min.css";
+// @import "../../public/skins/ui/oxide/content.min.css";
+// @import "../../public/skins/content/default/content.min.css";
diff --git a/resources/css/utils.scss b/resources/css/utils.scss
index 7fd4104..395110d 100644
--- a/resources/css/utils.scss
+++ b/resources/css/utils.scss
@@ -125,33 +125,33 @@
 /* Margin */
 @each $index, $size in $spacer {
     .m-#{$index} {
-        margin: #{$size};
+        margin: #{$size} !important;
     }
 
     .mt-#{$index} {
-        margin-top: #{$size};
+        margin-top: #{$size} !important;
     }
 
     .mb-#{$index} {
-        margin-bottom: #{$size};
+        margin-bottom: #{$size} !important;
     }
 
     .ml-#{$index} {
-        margin-left: #{$size};
+        margin-left: #{$size} !important;
     }
 
     .mr-#{$index} {
-        margin-right: #{$size};
+        margin-right: #{$size} !important;
     }
 
     .mx-#{$index} {
-        margin-left: #{$size};
-        margin-right: #{$size};
+        margin-left: #{$size} !important;
+        margin-right: #{$size} !important;
     }
 
     .my-#{$index} {
-        margin-top: #{$size};
-        margin-bottom: #{$size};
+        margin-top: #{$size} !important;
+        margin-bottom: #{$size} !important;
     }
 }
 
@@ -193,6 +193,7 @@
 /* Utility */
 .prevent-select {
     -webkit-user-select: none;
+    -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
diff --git a/resources/css/variables.scss b/resources/css/variables.scss
index c28d529..a3624e3 100644
--- a/resources/css/variables.scss
+++ b/resources/css/variables.scss
@@ -27,6 +27,12 @@ $success-color: #198754;
 $success-color-dark: #12653e;
 $success-color-darker: #0c4329;
 
+$warning-color-lighter: #fff8e2;
+$warning-color-light: #fff6d9;
+$warning-color: #fff3cd;
+$warning-color-dark: #ffd75a;
+$warning-color-darker: #ffc203;
+
 $border-color: #dddddd;
 $secondary-background-color: #efefef;
 
diff --git a/resources/js/axios.js b/resources/js/axios.js
deleted file mode 100644
index 795f0fb..0000000
--- a/resources/js/axios.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import axios from "axios";
-import { useUserStore } from "./store/UserStore";
-import { useRouter } from "vue-router";
-
-axios.defaults.baseURL = import.meta.env.APP_URL_API;
-axios.defaults.withCredentials = true;
-axios.defaults.headers.common["Accept"] = "application/json";
-
-axios.interceptors.request.use((request) => {
-    const userStore = useUserStore();
-    if (userStore.id) {
-        request.headers["Authorization"] = `Bearer ${userStore.token}`;
-    }
-
-    return request;
-});
-
-axios.interceptors.response.use(
-    (response) => {
-        return response;
-    },
-    (error) => {
-        if (error.config.redirect !== false && error.response.status === 401) {
-            const userStore = useUserStore();
-            const router = useRouter();
-            userStore.clearUser();
-
-            const url = new URL(error.request.responseURL);
-            router.push({ name: "login", query: { redirect: url.pathname } });
-        }
-
-        // if(error.config.redirect === true) {
-        //     if(error.response.status === 403) {
-        //         router.push({ name: 'error-forbidden' })
-        //     } else if(error.response.status === 404) {
-        //         router.push({ name: 'error-notfound' })
-        //     } else if(error.response.status >= 500) {
-        //         router.push({name: 'error-internal'})
-        //     }
-        // }
-
-        return Promise.reject(error);
-    }
-);
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 366c49d..e69de29 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -1,34 +0,0 @@
-import _ from 'lodash';
-window._ = _;
-
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-
-import axios from 'axios';
-window.axios = axios;
-
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-/**
- * Echo exposes an expressive API for subscribing to channels and listening
- * for events that are broadcast by Laravel. Echo and event broadcasting
- * allows your team to easily build robust real-time web applications.
- */
-
-// import Echo from 'laravel-echo';
-
-// import Pusher from 'pusher-js';
-// window.Pusher = Pusher;
-
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: import.meta.env.VITE_PUSHER_APP_KEY,
-//     wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
-//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
-//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
-//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
-//     enabledTransports: ['ws', 'wss'],
-// });
diff --git a/resources/js/components/DFileLink.vue b/resources/js/components/DFileLink.vue
deleted file mode 100644
index 79f1ae2..0000000
--- a/resources/js/components/DFileLink.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-    <a :href="computedHref" :target="props.target" rel="noopener"
-        ><slot></slot
-    ></a>
-</template>
-
-<script setup lang="ts">
-// import axios from 'axios'
-import { computed } from "vue";
-import { useUserStore } from "../store/UserStore";
-
-const props = defineProps({
-    href: {
-        type: String,
-        required: true,
-    },
-    target: {
-        type: String,
-        default: "",
-    },
-});
-
-const userStore = useUserStore();
-
-const computedHref = computed(() => {
-    const url = new URL(props.href);
-    if (url.pathname.startsWith("/api/") && userStore.token) {
-        return props.href + "?token=" + encodeURIComponent(userStore.token);
-    }
-
-    return props.href;
-});
-
-// const handleClick = async (event) => {
-//     const url = new URL(props.href)
-//     if(url.pathname.startsWith('/api/')) {
-//         console.log('api')
-//         event.preventDefault()
-
-//         axios.get(props.href, {responseType: 'blob'})
-//             .then(response => {
-//                 const blob = new Blob([response.data], { type: response.data.type })
-//                 const href = URL.createObjectURL(blob)
-//                 const link = document.createElement('a')
-//                 link.setAttribute('href', href)
-//                 link.setAttribute('target', props.target)
-//                 document.body.appendChild(link)
-//                 link.click()
-//                 document.body.removeChild(link)
-//                 URL.revokeObjectURL(href)
-//             }).catch(e => {
-//                 console.log(e)
-//             })
-//     }
-
-//     console.log('finish')
-// }
-</script>
diff --git a/resources/js/components/SMAttachments.vue b/resources/js/components/SMAttachments.vue
new file mode 100644
index 0000000..05b12dc
--- /dev/null
+++ b/resources/js/components/SMAttachments.vue
@@ -0,0 +1,68 @@
+<template>
+    <SMContainer class="sm-attachments">
+        <h3 v-if="props.attachments && props.attachments.length > 0">
+            Attachments
+        </h3>
+        <div
+            v-for="file of props.attachments"
+            :key="file.id"
+            class="sm-attachment-row">
+            <div class="sm-attachment-file-icon">
+                <img
+                    :src="getFileIconImagePath(file.title || file.name)"
+                    height="48"
+                    width="48" />
+            </div>
+            <a :href="file.url" class="sm-attachment-file-name">{{
+                file.title || file.name
+            }}</a>
+            <div class="sm-attachment-file-size">
+                ({{ bytesReadable(file.size) }})
+            </div>
+        </div>
+    </SMContainer>
+</template>
+
+<script setup lang="ts">
+import { bytesReadable } from "../helpers/types";
+import { getFileIconImagePath } from "../helpers/utils";
+import SMContainer from "./SMContainer.vue";
+
+const props = defineProps({
+    attachments: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+
+<style lang="scss">
+.sm-attachments {
+    h3 {
+        margin-top: map-get($spacer, 3);
+    }
+
+    .sm-attachment-row {
+        border-bottom: 1px solid $secondary-background-color;
+        display: flex;
+        align-items: center;
+        padding: 0.5rem 0;
+
+        &:last-child {
+            border-bottom: 0;
+        }
+
+        .sm-attachment-file-icon {
+            display: flex;
+            width: 64px;
+            justify-content: center;
+        }
+
+        .sm-attachment-file-size {
+            font-size: 75%;
+            padding-left: 0.75rem;
+            color: $secondary-color-dark;
+        }
+    }
+}
+</style>
diff --git a/resources/js/components/SMBreadcrumbs.vue b/resources/js/components/SMBreadcrumbs.vue
index 40d2fe6..4d6edf7 100644
--- a/resources/js/components/SMBreadcrumbs.vue
+++ b/resources/js/components/SMBreadcrumbs.vue
@@ -1,51 +1,56 @@
 <template>
     <SMContainer
-        v-if="showBreadcrumbs"
         :class="[
             'flex-0',
-            'breadcrumbs-outer',
-            { closed: breadcrumbs.length == 0 },
+            'sm-breadcrumbs-container',
+            { closed: computedRouteCrumbs.length == 0 },
         ]">
-        <ul class="breadcrumbs">
+        <ul class="sm-breadcrumbs">
             <li><router-link :to="{ name: 'home' }">Home</router-link></li>
-            <li v-for="(val, idx) of breadcrumbs" :key="val.name">
+            <li
+                v-for="(routeItem, index) of computedRouteCrumbs"
+                :key="routeItem.name">
                 <router-link
-                    v-if="idx != breadcrumbs.length - 1"
-                    :to="{ name: val.name }"
-                    >{{ val.meta?.title || val.name }}</router-link
-                ><span v-else>{{ val.meta?.title || val.name }}</span>
+                    v-if="index != computedRouteCrumbs.length - 1"
+                    :to="{ name: routeItem.name }"
+                    >{{ routeItem.meta?.title || routeItem.name }}</router-link
+                ><span v-else>{{
+                    routeItem.meta?.title || routeItem.name
+                }}</span>
             </li>
         </ul>
     </SMContainer>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { useRoute } from "vue-router";
+import { computed, ComputedRef } from "vue";
+import { RouteRecordRaw, useRoute } from "vue-router";
 import { routes } from "../router";
 import { useApplicationStore } from "../store/ApplicationStore";
 
 const applicationStore = useApplicationStore();
-const showBreadcrumbs = ref(true);
 
-const breadcrumbs = computed(() => {
+/**
+ * Return a list of routes from the current page back to the root
+ */
+const computedRouteCrumbs: ComputedRef<RouteRecordRaw[]> = computed(() => {
     const currentPageName = useRoute().name;
 
     if (currentPageName == "home") {
         return [];
     }
 
-    const findMatch = (list) => {
-        let found = null;
-        let index = null;
-        let child = null;
+    const findMatch = (list: RouteRecordRaw[]): RouteRecordRaw[] | null => {
+        let found: RouteRecordRaw[] | null = null;
+        let index: RouteRecordRaw | null = null;
+        let child: RouteRecordRaw[] | null = null;
 
-        list.every((entry) => {
+        list.every((entry: RouteRecordRaw) => {
             if (index == null && "path" in entry && entry.path == "") {
                 index = entry;
             }
 
-            if (child == null && "children" in entry) {
+            if (child == null && entry.children) {
                 child = findMatch(entry.children);
             }
 
@@ -76,10 +81,10 @@ const breadcrumbs = computed(() => {
     let itemList = findMatch(routes);
     if (itemList) {
         if (applicationStore.dynamicTitle.length > 0) {
-            let meta = [];
+            let meta = {};
 
-            if ("meta" in itemList) {
-                meta = itemList[itemList.length - 1];
+            if ("meta" in itemList[itemList.length - 1]) {
+                meta = itemList[itemList.length - 1]["meta"];
             }
 
             meta["title"] = applicationStore.dynamicTitle;
@@ -93,13 +98,13 @@ const breadcrumbs = computed(() => {
 </script>
 
 <style lang="scss">
-.breadcrumbs-outer.closed .breadcrumbs {
+.sm-breadcrumbs-container.closed .sm-breadcrumbs {
     opacity: 0;
     transition: opacity 0s;
     transition-delay: 0s;
 }
 
-.breadcrumbs {
+.sm-breadcrumbs {
     height: 3.25rem;
     display: flex;
     max-width: 1200px;
diff --git a/resources/js/components/SMButton.vue b/resources/js/components/SMButton.vue
index 0e3428e..2372722 100644
--- a/resources/js/components/SMButton.vue
+++ b/resources/js/components/SMButton.vue
@@ -1,47 +1,76 @@
 <template>
-    <a
-        v-if="href.length > 0 || typeof to == 'string'"
-        :href="href"
-        :disabled="disabled"
-        :class="[
-            'button',
-            'prevent-select',
-            classType,
-            { 'button-block': block },
-        ]"
-        :type="buttonType">
-        {{ label }}
-        <font-awesome-icon v-if="icon" :icon="icon" />
-    </a>
     <button
-        v-else-if="to == null"
+        v-if="isEmpty(to)"
         :disabled="disabled"
         :class="[
-            'button',
-            'prevent-select',
+            'sm-button',
             classType,
-            { 'button-block': block },
+            { 'sm-button-small': small },
+            { 'sm-button-block': block },
+            { 'sm-dropdown-button': dropdown },
+        ]"
+        :type="buttonType"
+        @click="handleClick">
+        <ion-icon
+            v-if="icon && dropdown == null && iconLocation == 'before'"
+            :icon="icon"
+            class="sm-button-icon-before" />
+        <span>{{ label }}</span>
+        <ion-icon
+            v-if="icon && dropdown == null && iconLocation == 'after'"
+            :icon="icon"
+            class="sm-button-icon-after" />
+        <ion-icon
+            v-if="dropdown != null"
+            name="caret-down-outline"
+            class="sm-button-icon-dropdown"
+            @click.stop="handleClickToggleDropdown" />
+        <ul
+            v-if="dropdown != null"
+            ref="dropdownMenu"
+            @mouseleave="handleMouseLeave">
+            <li
+                v-for="(dropdownLabel, dropdownItem) in dropdown"
+                :key="dropdownItem"
+                @click.stop="handleClickItem(dropdownItem)">
+                {{ dropdownLabel }}
+            </li>
+        </ul>
+    </button>
+    <a
+        v-else-if="!isEmpty(to) && typeof to == 'string'"
+        :href="to"
+        :disabled="disabled"
+        :class="[
+            'sm-button',
+            classType,
+            { 'sm-button-small': small },
+            { 'sm-button-block': block },
         ]"
         :type="buttonType">
         {{ label }}
-        <font-awesome-icon v-if="icon" :icon="icon" />
-    </button>
+        <ion-icon v-if="icon" :icon="icon" />
+    </a>
     <router-link
-        v-else
+        v-else-if="!isEmpty(to) && typeof to == 'object'"
         :to="to"
         :disabled="disabled"
         :class="[
-            'button',
-            'prevent-select',
+            'sm-button',
             classType,
-            { 'button-block': block },
+            { 'sm-button-small': small },
+            { 'sm-button-block': block },
         ]">
+        <ion-icon v-if="icon && iconLocation == 'before'" :icon="icon" />
         {{ label }}
-        <font-awesome-icon v-if="icon" :icon="icon" />
+        <ion-icon v-if="icon && iconLocation == 'after'" :icon="icon" />
     </router-link>
 </template>
 
 <script setup lang="ts">
+import { Ref, ref } from "vue";
+import { isEmpty } from "../helpers/utils";
+
 const props = defineProps({
     label: { type: String, default: "Button", required: false },
     type: { type: String, default: "primary", required: false },
@@ -50,17 +79,20 @@ const props = defineProps({
         default: "",
         required: false,
     },
+    iconLocation: {
+        type: String,
+        default: "after",
+        required: false,
+        validator: (value: string) => {
+            return ["before", "after"].includes(value);
+        },
+    },
     to: {
         type: [String, Object],
         default: null,
         required: false,
         validator: (prop) => typeof prop === "object" || prop === null,
     },
-    href: {
-        type: String,
-        default: "",
-        required: false,
-    },
     disabled: {
         type: Boolean,
         default: false,
@@ -71,17 +103,255 @@ const props = defineProps({
         default: false,
         required: false,
     },
+    small: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    dropdown: {
+        type: Object,
+        default: null,
+        required: false,
+        validator: (prop) => typeof prop === "object" || prop === null,
+    },
 });
 
-const buttonType = props.type == "submit" ? "submit" : "button";
+const buttonType: "submit" | "button" =
+    props.type == "submit" ? "submit" : "button";
 const classType = props.type == "submit" ? "primary" : props.type;
+const dropdownMenu: Ref<HTMLElement | null> = ref(null);
+
+const emits = defineEmits(["click"]);
+const handleClick = () => {
+    emits("click", "");
+};
+
+const handleClickToggleDropdown = () => {
+    if (dropdownMenu.value) {
+        dropdownMenu.value.style.display = "block";
+    }
+};
+
+const handleMouseLeave = () => {
+    if (dropdownMenu.value) {
+        dropdownMenu.value.style.display = "none";
+    }
+};
+
+const handleClickItem = (item: string) => {
+    emits("click", item);
+};
 </script>
 
 <style lang="scss">
-.button {
-    &.button-block {
+a.sm-button,
+.sm-button {
+    cursor: pointer;
+    position: relative;
+    padding: map-get($spacer, 2) map-get($spacer, 4);
+    color: white;
+    font-weight: 800;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 24px;
+    transition: background-color 0.1s, color 0.1s;
+    background-color: $secondary-color;
+    border-color: $secondary-color;
+    min-width: 7rem;
+    text-align: center;
+    display: inline-block;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    &.sm-button-block {
         display: block;
         width: 100%;
     }
+
+    &.sm-button-small {
+        font-size: 85%;
+        font-weight: normal;
+        padding: map-get($spacer, 1) map-get($spacer, 3);
+    }
+
+    &.sm-dropdown-button {
+        padding: 0;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        font-weight: normal;
+        background: #fff !important;
+        color: $primary-color !important;
+        border-radius: 12px;
+        border-width: 1px;
+        font-size: 0.8rem;
+        min-width: auto;
+
+        span {
+            flex: 1;
+            border-right: 1px solid $primary-color-lighter;
+            padding-top: calc(#{map-get($spacer, 1)} / 1.5);
+            padding-bottom: calc(#{map-get($spacer, 1)} / 1.5);
+            padding-left: map-get($spacer, 3);
+            padding-right: map-get($spacer, 3);
+        }
+
+        .sm-button-icon-dropdown {
+            height: 1rem;
+            width: 1rem;
+            padding: 0 0.3rem 0 0.2rem;
+        }
+
+        &:hover {
+            background-color: $primary-color !important;
+            color: #fff !important;
+
+            span {
+                border-right: 1px solid $primary-color-light;
+            }
+        }
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        background-color: $secondary-color !important;
+        border-color: $secondary-color !important;
+        opacity: 0.5;
+    }
+
+    &:hover:not(:disabled) {
+        text-decoration: none;
+        color: $secondary-color;
+    }
+
+    &.primary {
+        background-color: $primary-color;
+        border-color: $primary-color;
+
+        &:hover:not(:disabled) {
+            color: $primary-color;
+        }
+    }
+
+    &.primary-outline {
+        background-color: transparent;
+        border-color: $primary-color;
+        color: $primary-color;
+
+        &:hover:not(:disabled) {
+            color: $primary-color;
+        }
+    }
+
+    &.secondary {
+        background-color: $secondary-color;
+        border-color: $secondary-color;
+
+        &:hover:not(:disabled) {
+            color: $secondary-color;
+        }
+    }
+
+    &.secondary-outline {
+        background-color: transparent;
+        border-color: $secondary-color;
+        color: $secondary-color;
+
+        &:hover:not(:disabled) {
+            color: $secondary-color;
+        }
+    }
+
+    &.danger {
+        background-color: $danger-color;
+        border-color: $danger-color;
+
+        &:hover:not(:disabled) {
+            color: $danger-color;
+        }
+    }
+
+    &.danger-outline {
+        background-color: transparent;
+        border-color: $danger-color;
+        color: $danger-color;
+
+        &:hover:not(:disabled) {
+            color: $danger-color;
+        }
+    }
+
+    &.outline {
+        background-color: transparent;
+        border-color: $outline-color;
+        color: $outline-color;
+
+        &:hover:not(:disabled) {
+            background-color: $outline-color;
+            border-color: $outline-color;
+            color: $outline-hover-color;
+        }
+    }
+
+    &:hover:not(:disabled) {
+        background-color: #fff;
+    }
+
+    ion-icon {
+        height: 1.2rem;
+        width: 1.2rem;
+        vertical-align: middle;
+        cursor: pointer;
+    }
+
+    ul {
+        position: absolute;
+        display: none;
+        z-index: 100;
+        top: 20%;
+        right: 0;
+        min-width: 100%;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        background-color: #f8f8f8;
+        border: 1px solid $border-color;
+        border-radius: 8px;
+        color: $primary-color;
+        box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
+    }
+
+    li {
+        padding: map-get($spacer, 1);
+        font-size: 100%;
+        cursor: pointer;
+        transition: background-color 0.1s ease-in-out;
+
+        &:first-child {
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+        }
+
+        &:last-child {
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+        }
+    }
+
+    li:hover {
+        background-color: $primary-color;
+        color: #f8f8f8;
+    }
+
+    .sm-button-icon-before {
+        margin-right: map-get($spacer, 1);
+    }
+
+    .sm-button-icon-after {
+        margin-left: map-get($spacer, 1);
+    }
 }
 </style>
diff --git a/resources/js/components/SMCaptchaNotice.vue b/resources/js/components/SMCaptchaNotice.vue
index c60152d..8707c5e 100644
--- a/resources/js/components/SMCaptchaNotice.vue
+++ b/resources/js/components/SMCaptchaNotice.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="captcha-notice">
+    <div class="sm-captcha-notice">
         This site is protected by reCAPTCHA and the Google
         <a href="https://policies.google.com/privacy">Privacy Policy</a> and
         <a href="https://policies.google.com/terms">Terms of Service</a> apply.
@@ -7,7 +7,7 @@
 </template>
 
 <style lang="scss">
-.captcha-notice {
+.sm-captcha-notice {
     color: $secondary-color;
     font-size: 65%;
     line-height: 1.2rem;
diff --git a/resources/js/components/SMCarousel.vue b/resources/js/components/SMCarousel.vue
index c92f270..461699c 100644
--- a/resources/js/components/SMCarousel.vue
+++ b/resources/js/components/SMCarousel.vue
@@ -1,64 +1,83 @@
 <template>
     <div
-        class="carousel"
+        class="sm-carousel"
         @mouseover="handleMouseOver"
         @mouseleave="handleMouseLeave">
-        <div ref="slides" class="carousel-slides">
+        <div ref="slides" class="sm-carousel-slides">
             <slot></slot>
         </div>
-        <div class="carousel-slide-prev" @click="handleSlidePrev">
-            <font-awesome-icon icon="fa-solid fa-chevron-left" />
+        <div class="sm-carousel-slide-prev" @click="handleClickSlidePrev">
+            <ion-icon name="chevron-back-outline" />
         </div>
-        <div class="carousel-slide-next" @click="handleSlideNext">
-            <font-awesome-icon icon="fa-solid fa-chevron-right" />
+        <div class="sm-carousel-slide-next" @click="handleClickSlideNext">
+            <ion-icon name="chevron-forward-outline" />
         </div>
-        <div class="carousel-slide-indicators">
+        <div class="sm-carousel-slide-indicators">
             <div
                 v-for="(indicator, index) in slideElements"
                 :key="index"
-                class="carousel-slide-indicator-dot">
-                <font-awesome-icon
-                    v-if="currentSlide != index"
-                    icon="fa-regular fa-circle"
-                    @click="handleIndicator(index)" />
-                <font-awesome-icon v-else icon="fa-solid fa-circle" />
-            </div>
+                :class="[
+                    'sm-carousel-slide-indicator-item',
+                    { highlighted: currentSlide == index },
+                ]"
+                @click="handleClickIndicator(index)"></div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, Ref, ref } from "vue";
 
-const slides = ref(null);
-let slideElements = ref([]);
+/**
+ * Reference to slides element.
+ */
+const slides: Ref<HTMLElement | null> = ref(null);
+
+/**
+ * The list of slide elements.
+ */
+let slideElements: Ref<NodeList | null> = ref(null);
+
+/**
+ * Index of the current slide.
+ */
 let currentSlide = ref(0);
+
+/**
+ * The maximum number of slides.
+ */
 let maxSlide = ref(0);
-let intervalRef = null;
-const mutationObserver = ref(null);
 
-onMounted(() => {
-    connectMutationObserver();
-    handleUpdate();
-    startAutoSlide();
-});
+/**
+ * The window interval reference to slide the carousel.
+ */
+let intervalRef: number | null = null;
 
-onUnmounted(() => {
-    stopAutoSlide();
-    disconnectMutationObserver();
-});
+/**
+ * The active mutation observer.
+ */
+const mutationObserver: Ref<MutationObserver | null> = ref(null);
 
+/**
+ * Handle the user moving the mouse over the carousel.
+ */
 const handleMouseOver = () => {
     stopAutoSlide();
 };
 
+/**
+ * Handle the user moving the mouse leaving the carousel.
+ */
 const handleMouseLeave = () => {
     startAutoSlide();
 };
 
-const handleSlidePrev = () => {
+/**
+ * Handle the user clicking the previous slider indicator.
+ */
+const handleClickSlidePrev = () => {
     if (currentSlide.value == 0) {
-        currentSlide.value = maxSlide;
+        currentSlide.value = maxSlide.value;
     } else {
         currentSlide.value--;
     }
@@ -66,7 +85,10 @@ const handleSlidePrev = () => {
     updateSlidePositions();
 };
 
-const handleSlideNext = () => {
+/**
+ * Handle the user clicking the next slider indicator.
+ */
+const handleClickSlideNext = () => {
     if (currentSlide.value == maxSlide.value) {
         currentSlide.value = 0;
     } else {
@@ -76,34 +98,56 @@ const handleSlideNext = () => {
     updateSlidePositions();
 };
 
-const handleIndicator = (index) => {
+/**
+ * Handle the user clicking a slider indicator.
+ *
+ * @param {number} index The slide to move to.
+ */
+const handleClickIndicator = (index: number) => {
     currentSlide.value = index;
     updateSlidePositions();
 };
 
-const handleUpdate = () => {
-    slideElements.value = slides.value.querySelectorAll(".carousel-slide");
-    maxSlide.value = slideElements.value.length - 1;
+/**
+ * Handle slides added/removed from the carousel and update the data/indicators.
+ */
+const handleCarouselUpdate = () => {
+    if (slides.value != null) {
+        slideElements.value =
+            slides.value.querySelectorAll(".sm-carousel-slide");
+        maxSlide.value = slideElements.value.length - 1;
+    }
 
     updateSlidePositions();
 };
 
+/**
+ * Update the style transform of each slide.
+ */
 const updateSlidePositions = () => {
-    slideElements.value.forEach((slide, index) => {
-        slide.style.transform = `translateX(${
-            100 * (index - currentSlide.value)
-        }%)`;
-    });
+    if (slideElements.value != null) {
+        slideElements.value.forEach((slide, index) => {
+            (slide as HTMLElement).style.transform = `translateX(${
+                100 * (index - currentSlide.value)
+            }%)`;
+        });
+    }
 };
 
+/**
+ * Start the carousel slider.
+ */
 const startAutoSlide = () => {
     if (intervalRef == null) {
         intervalRef = window.setInterval(() => {
-            handleSlideNext();
+            handleClickSlideNext();
         }, 7000);
     }
 };
 
+/**
+ * Stop the carousel slider.
+ */
 const stopAutoSlide = () => {
     if (intervalRef != null) {
         window.clearInterval(intervalRef);
@@ -111,39 +155,60 @@ const stopAutoSlide = () => {
     }
 };
 
+/**
+ * Connect the mutation observer to the slider.
+ */
 const connectMutationObserver = () => {
-    mutationObserver.value = new MutationObserver(handleUpdate);
+    if (slides.value != null) {
+        mutationObserver.value = new MutationObserver(handleCarouselUpdate);
 
-    mutationObserver.value.observe(slides.value, {
-        attributes: false,
-        childList: true,
-        characterData: true,
-        subtree: true,
-    });
+        mutationObserver.value.observe(slides.value, {
+            attributes: false,
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    }
 };
 
+/**
+ * Disconnect the mutation observer from the slider.
+ */
 const disconnectMutationObserver = () => {
-    mutationObserver.value.disconnect();
+    if (mutationObserver.value) {
+        mutationObserver.value.disconnect();
+    }
 };
+
+onMounted(() => {
+    connectMutationObserver();
+    handleCarouselUpdate();
+    startAutoSlide();
+});
+
+onUnmounted(() => {
+    stopAutoSlide();
+    disconnectMutationObserver();
+});
 </script>
 
 <style lang="scss">
-.carousel {
+.sm-carousel {
     position: relative;
     height: 28rem;
     background: #eee;
     overflow: hidden;
 
     &:hover {
-        .carousel-slide-prev,
-        .carousel-slide-next,
-        .carousel-slide-indicators {
+        .sm-carousel-slide-prev,
+        .sm-carousel-slide-next,
+        .sm-carousel-slide-indicators {
             opacity: 1;
         }
     }
 
-    .carousel-slide-prev,
-    .carousel-slide-next {
+    .sm-carousel-slide-prev,
+    .sm-carousel-slide-next {
         position: absolute;
         top: 50%;
         font-size: 300%;
@@ -155,7 +220,7 @@ const disconnectMutationObserver = () => {
         transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
         opacity: 0.75;
 
-        svg {
+        ion-icon {
             filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 1));
         }
 
@@ -165,15 +230,17 @@ const disconnectMutationObserver = () => {
         }
     }
 
-    .carousel-slide-prev {
+    .sm-carousel-slide-prev {
         left: 1rem;
+        filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 1));
     }
 
-    .carousel-slide-next {
+    .sm-carousel-slide-next {
         right: 1rem;
+        filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 1));
     }
 
-    .carousel-slide-indicators {
+    .sm-carousel-slide-indicators {
         position: absolute;
         display: flex;
         justify-content: center;
@@ -184,20 +251,28 @@ const disconnectMutationObserver = () => {
         opacity: 0.75;
         transition: opacity 0.2s ease-in-out;
 
-        svg {
+        .sm-carousel-slide-indicator-item {
+            height: 12px;
+            width: 12px;
+            border: 1px solid white;
+            border-radius: 50%;
             cursor: pointer;
             font-size: 80%;
-            padding: 0 0.25rem;
+            margin: 0 calc(#{map-get($spacer, 1)} / 3);
             color: #fff;
             filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 1));
+
+            &.highlighted {
+                background-color: white;
+            }
         }
     }
 }
 
 @media only screen and (max-width: 400px) {
-    .carousel {
-        .carousel-slide-prev,
-        .carousel-slide-next {
+    .sm-carousel {
+        .sm-carousel-slide-prev,
+        .sm-carousel-slide-next {
             font-size: 150%;
         }
     }
diff --git a/resources/js/components/SMCarouselSlide.vue b/resources/js/components/SMCarouselSlide.vue
index 95521d6..f017e13 100644
--- a/resources/js/components/SMCarouselSlide.vue
+++ b/resources/js/components/SMCarouselSlide.vue
@@ -1,17 +1,21 @@
 <template>
     <div
-        class="carousel-slide"
+        class="sm-carousel-slide"
         :style="{ backgroundImage: `url('${imageUrl}')` }">
-        <div v-if="imageUrl == null" class="carousel-slide-loading">
-            <font-awesome-icon icon="fa-solid fa-spinner" pulse />
+        <div v-if="imageUrl.length == 0" class="sm-carousel-slide-loading">
+            <SMLoadingIcon />
         </div>
-        <div v-else class="carousel-slide-body">
-            <div class="carousel-slide-content">
-                <div class="carousel-slide-content-inner">
+        <div v-else class="sm-carousel-slide-body">
+            <div class="sm-carousel-slide-content">
+                <div class="sm-carousel-slide-content-inner">
                     <h3>{{ title }}</h3>
                     <p v-if="content">{{ content }}</p>
-                    <div class="carousel-slide-body-buttons">
-                        <SMButton v-if="url" :to="url" :label="cta" />
+                    <div class="sm-carousel-slide-body-buttons">
+                        <SMButton
+                            v-if="url"
+                            :to="url"
+                            :label="cta"
+                            type="secondary-outline" />
                     </div>
                 </div>
             </div>
@@ -20,9 +24,12 @@
 </template>
 
 <script setup lang="ts">
-import axios from "axios";
 import { ref } from "vue";
+import { api } from "../helpers/api";
+import { MediaResponse } from "../helpers/api.types";
+import { imageLoad } from "../helpers/image";
 import SMButton from "./SMButton.vue";
+import SMLoadingIcon from "./SMLoadingIcon.vue";
 
 const props = defineProps({
     title: {
@@ -52,24 +59,34 @@ const props = defineProps({
     },
 });
 
-let imageUrl = ref(null);
+let imageUrl = ref("");
 
-const handleLoad = async () => {
-    try {
-        let result = await axios.get(`media/${props.image}`);
-        if (result.data.medium) {
-            imageUrl.value = result.data.medium.url;
-        }
-    } catch (error) {
-        imageUrl.value = "";
-    }
+/**
+ * Load the slider data.
+ */
+const handleLoad = () => {
+    imageUrl.value = "";
+
+    api.get({ url: "/media/{medium}", params: { medium: props.image } })
+        .then((result) => {
+            const data = result.data as MediaResponse;
+
+            if (data && data.medium) {
+                imageLoad(data.medium.url, (url) => {
+                    imageUrl.value = url;
+                });
+            }
+        })
+        .catch(() => {
+            /* empty */
+        });
 };
 
 handleLoad();
 </script>
 
 <style lang="scss">
-.carousel-slide {
+.sm-carousel-slide {
     position: absolute;
     transition: all 0.5s;
     width: 100%;
@@ -79,19 +96,14 @@ handleLoad();
     background-size: cover;
     overflow: hidden;
 
-    .carousel-slide-loading {
+    .sm-carousel-slide-loading {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100%;
-
-        svg {
-            color: rgba(0, 0, 0, 0.1);
-            font-size: 300%;
-        }
     }
 
-    .carousel-slide-body {
+    .sm-carousel-slide-body {
         display: flex;
         align-items: center;
         height: 100%;
@@ -99,7 +111,7 @@ handleLoad();
         margin: 0 auto;
         padding: 1rem;
 
-        .carousel-slide-content {
+        .sm-carousel-slide-content {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -130,17 +142,15 @@ handleLoad();
             text-align: left;
         }
 
-        .carousel-slide-body-buttons {
+        .sm-carousel-slide-body-buttons {
             margin-top: 2rem;
             text-align: right;
             max-width: 600px;
         }
 
-        .button {
-            display: inline-block;
-            box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
-            background: transparent;
+        .secondary-outline {
             border-color: #fff;
+            color: #fff;
 
             &:hover {
                 color: #333;
diff --git a/resources/js/components/SMColumn.vue b/resources/js/components/SMColumn.vue
index e5623ff..6fc50ab 100644
--- a/resources/js/components/SMColumn.vue
+++ b/resources/js/components/SMColumn.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        :class="['column', { 'flex-fill': fill && width == '' }]"
+        :class="['sm-column', { 'flex-fill': fill && width == '' }]"
         :style="styles">
         <slot></slot>
     </div>
@@ -28,13 +28,13 @@ if (props.width != "") {
 </script>
 
 <style lang="scss">
-.column {
+.sm-column {
     display: flex;
     margin: map-get($spacer, 2);
     flex-direction: column;
 }
 
-.row .row .column {
+.sm-row .sm-row .sm-column {
     &:first-of-type {
         margin-left: 0;
     }
@@ -44,13 +44,13 @@ if (props.width != "") {
     }
 }
 
-.dialog .column {
+.sm-dialog .sm-column {
     margin-top: 0;
     margin-bottom: 0;
 }
 
 @media screen and (max-width: 768px) {
-    .column {
+    .sm-column {
         flex-basis: auto !important;
         width: 100%;
 
@@ -60,7 +60,7 @@ if (props.width != "") {
 }
 
 @media screen and (max-width: 640px) {
-    .column {
+    .sm-column {
         flex-direction: column;
     }
 }
diff --git a/resources/js/components/SMContainer.vue b/resources/js/components/SMContainer.vue
index b4c8899..0bc6e70 100644
--- a/resources/js/components/SMContainer.vue
+++ b/resources/js/components/SMContainer.vue
@@ -1,50 +1,16 @@
 <template>
-    <div :class="['container', { full: isFull }]">
-        <SMLoader :loading="loading">
-            <d-error-forbidden
-                v-if="pageError == 403 || !hasPermission()"></d-error-forbidden>
-            <d-error-internal
-                v-if="pageError >= 500 && hasPermission()"></d-error-internal>
-            <d-error-not-found v-if="pageError == 404 && hasPermission()"
-                >XX</d-error-not-found
-            >
-            <slot
-                v-if="
-                    pageError < 300 && hasPermission() && slots.default
-                "></slot>
-            <div
-                v-if="pageError < 300 && hasPermission() && slots.inner"
-                class="container-inner">
-                <slot name="inner"></slot>
-            </div>
-        </SMLoader>
+    <div :class="['sm-container', { full: full }]">
+        <slot v-if="slots.default"></slot>
+        <div v-if="slots.inner" class="sm-container-inner">
+            <slot name="inner"></slot>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import SMLoader from "./SMLoader.vue";
-import DErrorForbidden from "./errors/Forbidden.vue";
-import DErrorInternal from "./errors/Internal.vue";
-import DErrorNotFound from "./errors/NotFound.vue";
-import { useUserStore } from "../store/UserStore";
-import { computed, useSlots } from "vue";
+import { useSlots } from "vue";
 
-const props = defineProps({
-    pageError: {
-        type: Number,
-        default: 200,
-        required: false,
-    },
-    permission: {
-        type: String,
-        default: "",
-        required: false,
-    },
-    loading: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
+defineProps({
     full: {
         type: Boolean,
         default: false,
@@ -52,22 +18,10 @@ const props = defineProps({
     },
 });
 const slots = useSlots();
-const userStore = useUserStore();
-
-const hasPermission = () => {
-    return (
-        props.permission.length == 0 ||
-        userStore.permissions.includes(props.permission)
-    );
-};
-
-const isFull = computed(() => {
-    return props.pageError == 200 ? props.full : false;
-});
 </script>
 
 <style lang="scss">
-.container {
+.sm-container {
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -76,13 +30,16 @@ const isFull = computed(() => {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
 
     &.full {
         padding-left: 0;
         padding-right: 0;
         max-width: 100%;
 
-        .container-inner {
+        .sm-container-inner {
             padding-left: 1rem;
             padding-right: 1rem;
             width: 100%;
diff --git a/resources/js/components/SMDatePicker.vue b/resources/js/components/SMDatePicker.vue
index 44ced68..a148f88 100644
--- a/resources/js/components/SMDatePicker.vue
+++ b/resources/js/components/SMDatePicker.vue
@@ -20,7 +20,7 @@
             <slot></slot>
         </div>
         <div v-if="help" class="form-group-help">
-            <font-awesome-icon v-if="helpIcon" :icon="helpIcon" />
+            <!-- <font-awesome-icon v-if="helpIcon" :icon="helpIcon" /> -->
             {{ help }}
         </div>
     </div>
diff --git a/resources/js/components/SMDialog.vue b/resources/js/components/SMDialog.vue
index b0df89a..1e76b6e 100644
--- a/resources/js/components/SMDialog.vue
+++ b/resources/js/components/SMDialog.vue
@@ -1,14 +1,15 @@
 <template>
     <div
         :class="[
-            'dialog',
-            { 'dialog-narrow': narrow },
-            { 'dialog-full': full },
+            'sm-dialog',
+            { 'sm-dialog-narrow': narrow },
+            { 'sm-dialog-full': full },
+            { 'sm-dialog-noshadow': noShadow },
         ]">
         <transition name="fade">
-            <div v-if="loading" class="dialog-loading-cover">
-                <div class="dialog-loading">
-                    <font-awesome-icon icon="fa-solid fa-spinner" pulse />
+            <div v-if="loading" class="sm-dialog-loading-cover">
+                <div class="sm-dialog-loading">
+                    <SMLoadingIcon />
                     <span>{{ loadingMessage }}</span>
                 </div>
             </div>
@@ -18,6 +19,8 @@
 </template>
 
 <script setup lang="ts">
+import SMLoadingIcon from "./SMLoadingIcon.vue";
+
 defineProps({
     loading: {
         type: Boolean,
@@ -35,14 +38,17 @@ defineProps({
         type: Boolean,
         default: false,
     },
+    noShadow: {
+        type: Boolean,
+        default: false,
+    },
 });
 </script>
 
 <style lang="scss">
-.dialog {
+.sm-dialog {
     flex-direction: column;
     margin: 0 auto;
-    flex: 1;
     background-color: #eee;
     padding: map-get($spacer, 5) map-get($spacer, 5)
         calc(map-get($spacer, 5) / 1.5) map-get($spacer, 5);
@@ -50,21 +56,30 @@ defineProps({
     border-radius: 24px;
     overflow: hidden;
     min-width: map-get($spacer, 5) * 12;
+    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
+
+    &.sm-dialog-noshadow {
+        box-shadow: none !important;
+    }
 
     & > h1 {
         margin-top: 0;
     }
 
-    &.dialog-narrow {
+    & > p {
+        font-size: 90%;
+    }
+
+    &.sm-dialog-narrow {
         min-width: auto;
         max-width: map-get($spacer, 5) * 10;
     }
 
-    &.dialog-full {
+    &.sm-dialog-full {
         width: 100%;
     }
 
-    .dialog-loading-cover {
+    .sm-dialog-loading-cover {
         position: fixed;
         display: flex;
         justify-content: center;
@@ -76,16 +91,18 @@ defineProps({
         backdrop-filter: blur(14px);
         -webkit-backdrop-filter: blur(4px);
         background-color: rgba(255, 255, 255, 0.5);
+        z-index: 19000;
 
-        .dialog-loading {
+        .sm-dialog-loading {
             display: flex;
             flex-direction: column;
             padding: map-get($spacer, 5) calc(map-get($spacer, 5) * 2);
+            align-items: center;
 
             border: 1px solid transparent;
             border-radius: 24px;
 
-            svg {
+            ion-icon {
                 font-size: calc(map-get($spacer, 5) * 1.5);
             }
 
@@ -98,12 +115,12 @@ defineProps({
 }
 
 @media only screen and (max-width: 640px) {
-    .dialog {
-        padding: map-get($spacer, 1) map-get($spacer, 3) map-get($spacer, 3)
-            map-get($spacer, 3);
+    .sm-dialog {
+        padding: map-get($spacer, 5) map-get($spacer, 4) map-get($spacer, 4)
+            map-get($spacer, 4);
         min-width: auto;
 
-        .button {
+        .sm-button {
             display: block;
             width: 100%;
             text-align: center;
diff --git a/resources/js/components/SMEditor.vue b/resources/js/components/SMEditor.vue
index adaeaae..f9278bc 100644
--- a/resources/js/components/SMEditor.vue
+++ b/resources/js/components/SMEditor.vue
@@ -1,731 +1,534 @@
 <template>
-    <div class="editor">
-        <label v-if="label" :class="{ required: required }">{{ label }}</label>
-        <trix-editor
-            ref="trix"
-            :contenteditable="!disabledEditor"
-            :class="['trix-content']"
-            :placeholder="placeholder"
-            :input="computedId"
-            @trix-change="handleContentChange"
-            @trix-file-accept="emitFileAccept"
-            @trix-attachment-add="emitAttachmentAdd"
-            @trix-attachment-remove="emitAttachmentRemove"
-            @trix-selection-change="emitSelectionChange"
-            @trix-initialize="handleInitialize"
-            @trix-before-initialize="emitBeforeInitialize"
-            @trix-focus="processTrixFocus"
-            @trix-blur="processTrixBlur" />
-        <input
-            :id="computedId"
-            type="hidden"
-            :name="inputName"
-            :value="editorContent" />
+    <div class="sm-editor">
+        <Editor
+            ref="tinyeditor"
+            v-model="editorContent"
+            model-events="change blur focus"
+            output-format="html"
+            :init="init"
+            :disabled="props.disabled"
+            @blur="handleBlur"
+            @focus="handleFocus"
+            @change="handleChange" />
     </div>
 </template>
 
 <script setup lang="ts">
-import Trix from "trix";
-import { ref, watch, computed, onUnmounted } from "vue";
-import { arrayIncludesMatchBasic } from "../helpers/common";
+import Editor from "@tinymce/tinymce-vue";
+import "tinymce/themes/silver";
+import "tinymce/tinymce";
 
-import DialogMedia from "./dialogs/SMDialogMedia.vue";
-import { openDialog } from "vue3-promise-dialog";
+import "tinymce/icons/default";
+import "tinymce/models/dom";
+
+import "tinymce/plugins/advlist";
+import "tinymce/plugins/anchor";
+import "tinymce/plugins/autolink";
+import "tinymce/plugins/autosave";
+import "tinymce/plugins/charmap";
+import "tinymce/plugins/code";
+import "tinymce/plugins/codesample";
+import "tinymce/plugins/directionality";
+import "tinymce/plugins/emoticons";
+import "tinymce/plugins/fullscreen";
+import "tinymce/plugins/help";
+import "tinymce/plugins/image";
+import "tinymce/plugins/importcss";
+import "tinymce/plugins/insertdatetime";
+import "tinymce/plugins/link";
+import "tinymce/plugins/lists";
+import "tinymce/plugins/media";
+import "tinymce/plugins/nonbreaking";
+import "tinymce/plugins/pagebreak";
+import "tinymce/plugins/preview";
+import "tinymce/plugins/searchreplace";
+import "tinymce/plugins/table";
+import "tinymce/plugins/template";
+import "tinymce/plugins/visualblocks";
+import "tinymce/plugins/visualchars";
+import "tinymce/plugins/wordcount";
+
+import { computed, ref, watch } from "vue";
+import { api } from "../helpers/api";
+import { MediaCollection, MediaResponse } from "../helpers/api.types";
 import { routes } from "../router";
 
+interface PageList {
+    title: string;
+    value: string;
+}
+
 const props = defineProps({
-    disabledEditor: {
+    modelValue: {
+        type: String,
+        required: true,
+    },
+    disabled: {
         type: Boolean,
         required: false,
         default: false,
     },
-    srcContent: {
-        type: String,
-        required: false,
-        default: "",
-    },
-    inputId: {
-        type: String,
-        required: false,
-        default: "",
-    },
-    inputName: {
-        type: String,
-        required: false,
-        default: "content",
-    },
-    placeholder: {
-        type: String,
-        required: false,
-        default: "",
-    },
-    label: {
-        type: String,
-        default: "",
-        required: false,
-    },
-    required: {
-        type: Boolean,
-        required: false,
-    },
-    mimeTypes: {
-        type: Array,
-        default() {
-            return [];
-        },
-        required: false,
-    },
-    removeButtons: {
-        type: Array,
-        required: false,
-        default() {
-            return [];
-        },
-    },
 });
 
-const trix = ref(null);
-const editorContent = ref(props.srcContent);
-const isActive = ref(null);
-const isInitalized = ref(false);
-const initalizeQueue = ref([]);
+const useDarkMode = false; // window.matchMedia("(prefers-color-scheme: dark)").matches;
+const tinyeditor = ref(null);
 
-const emits = defineEmits([
-    "input",
-    "update",
-    "update:srcContent",
-    "trix-file-accept",
-    "trix-attachment-add",
-    "trix-attachment-remove",
-    "trix-selection-change",
-    "trix-initialize",
-    "trix-before-initialize",
-    "trix-focus",
-    "trix-blur",
-]);
-
-const handleContentChange = (event) => {
-    editorContent.value = event.srcElement
-        ? event.srcElement.value
-        : event.target.value;
-    emits("input", editorContent.value);
+const init = {
+    promotion: false,
+    emoticons_database_url: "/tinymce/plugins/emoticons/js/emojis.min.js",
+    template_cdate_format: "[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]",
+    template_mdate_format: "[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]",
+    relative_urls: false,
+    skin_url: useDarkMode
+        ? "/tinymce/skins/ui/oxide-dark"
+        : "/tinymce/skins/ui/oxide",
+    content_css: useDarkMode
+        ? "/tinymce/skins/content/default/dark.min.css"
+        : "/tinymce/skins/content/default/content.min.css",
+    height: 600,
+    plugins: [
+        "link",
+        "autolink",
+        "lists",
+        "advlist",
+        "image",
+        "table",
+        "charmap",
+        "searchreplace",
+        "visualblocks",
+        "code",
+        "anchor",
+        "insertdatetime",
+        "media",
+        "help",
+        "codesample",
+        "nonbreaking",
+        "importcss",
+        "directionality",
+        "visualchars",
+        "emoticons",
+        "autosave",
+        "searchreplace",
+    ],
+    toolbar:
+        "h1 h2 h3 blockquote | bold italic underline strikethrough | numlist bullist | image media link anchor codesample | alignleft aligncenter alignright alignjustify | forecolor backcolor removeformat | outdent indent | charmap emoticons | undo redo",
+    branding: false,
+    menubar: false,
+    toolbar_mode: "sliding",
+    autosave_ask_before_unload: true,
+    autosave_interval: "30s",
+    autosave_prefix: "{path}{query}-{id}-",
+    autosave_restore_when_empty: false,
+    autosave_retention: "2m",
+    image_advtab: true,
+    codesample_global_prismjs: true,
+    codesample_languages: [
+        { text: "Bash", value: "bash" },
+        { text: "C", value: "c" },
+        { text: "C++", value: "cpp" },
+        { text: "C#", value: "csharp" },
+        { text: "CSS", value: "css" },
+        { text: "HTML/XML", value: "markup" },
+        { text: "Java", value: "java" },
+        { text: "JavaScript", value: "javascript" },
+        { text: "Objective-C", value: "objectivec" },
+        { text: "Perl", value: "perl" },
+        { text: "PHP", value: "php" },
+        { text: "Python", value: "python" },
+        { text: "Regex", value: "regex" },
+        { text: "Ruby", value: "ruby" },
+        { text: "SQL", value: "sql" },
+        { text: "Swift", value: "swift" },
+        { text: "YAML", value: "yml" },
+    ],
+    link_title: false,
+    link_list: (success) => {
+        const links = fetchLinkList();
+        success(links);
+    },
+    file_picker_callback: function (callback, value, meta) {
+        imageBrowser(callback, value, meta);
+    },
 };
 
-const handleInitialize = () => {
-    isInitalized.value = true;
+const editorContent = ref(props.modelValue);
 
-    if (props.removeButtons) {
-        props.removeButtons.forEach((b) => {
-            trix.value.toolbarElement
-                .querySelectorAll(`[data-trix-attribute="${b}"]`)
-                .forEach((e) => e.remove());
-            trix.value.toolbarElement
-                .querySelectorAll(`[data-trix-action="${b}"]`)
-                .forEach((e) => e.remove());
-        });
-    }
+const emits = defineEmits(["input", "update:modelValue", "blur", "focus"]);
 
-    // if(!props.allowMedia) {
-    //     trix.value.toolbarElement.querySelectorAll('[data-trix-action="attachFiles"]').forEach(e => e.remove())
-    // }
-
-    initalizeQueue.value.forEach((item) => item());
-
-    decorateDisabledEditor(props.disabledEditor);
-    emits("trix-initialize");
-};
-
-const handleInitialContentChange = (newContent, oldContent) => {
+/* Updating value */
+const handleInitialContentChange = (newContent) => {
     newContent = newContent === undefined ? "" : newContent;
-
-    if (trix.value && trix.value.innerHTML !== newContent) {
-        editorContent.value = newContent;
-    }
-
-    if (!isActive.value) {
-        reloadEditorContent(editorContent.value);
-    }
+    editorContent.value = newContent;
 };
 
-const emitEditorState = (value) => {
-    emits("update", editorContent.value);
-    emits("update:srcContent", editorContent.value);
-};
-
-const emitFileAccept = (event) => {
-    if (props.mimeTypes) {
-        if (!arrayIncludesMatchBasic(props.mimeTypes, event.file.type)) {
-            window.alert("That file type is not supported");
-            event.preventDefault();
-            return;
-        }
-    }
-
-    emits("trix-file-accept", event);
-};
-
-const emitAttachmentAdd = (event) => {
-    emits("trix-attachment-add", event);
-};
-
-const emitAttachmentRemove = (event) => {
-    emits("trix-attachment-remove", event);
-};
-
-const emitSelectionChange = (event) => {
-    emits("trix-selection-change", trix.value.editor, event);
-};
-
-const emitBeforeInitialize = async (event) => {
-    whenInitalized(() => {
-        emits("trix-before-initialize", trix.value.editor, event);
-    });
-};
-
-const processTrixFocus = (event) => {
-    isActive.value = true;
-    emits("trix-focus", trix.value.editor, event);
-};
-
-const processTrixBlur = (event) => {
-    isActive.value = false;
-    emits("trix-blur", trix.value.editor, event);
-};
-const whenInitalized = (func) => {
-    if (isInitalized.value) {
-        func();
-    } else {
-        initalizeQueue.value.push(func);
-    }
-};
-
-const reloadEditorContent = async (newContent) => {
-    whenInitalized(() => {
-        trix.value.editor.loadHTML(newContent);
-        trix.value.editor.setSelectedRange(getContentEndPosition());
-
-        // console.log(Trix.config);
-        // console.log(trix.value.toolbarElement);
-    });
-};
-
-const decorateDisabledEditor = async (editorState) => {
-    whenInitalized(() => {
-        if (editorState) {
-            trix.value.toolbarElement.style["pointer-events"] = "none";
-            trix.value.contentEditable = false;
-            trix.value.style["background"] = "#e9ecef";
-        } else {
-            trix.value.toolbarElement.style["pointer-events"] = "unset";
-            trix.value.style["pointer-events"] = "unset";
-            trix.value.style["background"] = "#ffffff";
-        }
-    });
-};
-
-const getContentEndPosition = () => {
-    return trix.value.editor.getDocument().toString().length - 1;
-};
-
-const randomId = () => {
-    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-        var r = (Math.random() * 16) | 0;
-        var v = c === "x" ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
-};
-
-const generatedId = computed(() => {
-    return randomId();
-});
-
-const computedId = computed(() => {
-    return props.inputId || generatedId.value;
-});
-
 const initialContent = computed(() => {
-    return props.srcContent;
+    return props.modelValue;
 });
 
-const isDisabled = computed(() => {
-    return props.disabledEditor;
-});
-
-watch(editorContent, emitEditorState);
 watch(initialContent, handleInitialContentChange);
-watch(isDisabled, decorateDisabledEditor);
 
-/** Extra Toolbar Buttons */
+const handleBlur = (event) => {
+    emits("blur", event);
+};
 
-const addToolbarButton = async (name, options, func) => {
-    if (props.removeButtons && props.removeButtons.includes(name)) {
-        return;
-    }
+const handleFocus = (event) => {
+    emits("focus", event);
+};
 
-    whenInitalized(() => {
-        options.type = options.type || "attribute";
-        options.icon = options.icon || "?";
-        options.group = options.group || "text";
-        options.position = options.position || "beforeend";
-        options.id = options.id || randomId();
-        options.attribute = options.attribute || name;
+const handleChange = (event, editor) => {
+    emits("update:modelValue", editor.getContent());
+};
 
-        if (
-            options.trixAttribute &&
-            options.trixAttribute.type &&
-            options.trixAttribute.data &&
-            Trix.config[options.trixAttribute.type + "Attributes"]
-        ) {
-            Trix.config[options.trixAttribute.type + "Attributes"][name] =
-                options.trixAttribute.data;
-        }
+const fetchLinkList = () => {
+    const buildPageList = (
+        pageList,
+        routeEntries,
+        prefix_url = "",
+        prefix_title = ""
+    ) => {
+        routeEntries.forEach((entry) => {
+            if (
+                "path" in entry &&
+                entry.path.includes(":") == false &&
+                "meta" in entry &&
+                "title" in entry.meta &&
+                ("hideInEditor" in entry.meta == false ||
+                    entry.meta.hideInEditor == false) &&
+                ("middleware" in entry.meta == false ||
+                    ("showInEditor" in entry.meta == true &&
+                        entry.meta.showInEditor == true))
+            ) {
+                const sep = entry.path.substring(0, 1) == "/" ? "" : "/";
+                pageList[prefix_url + sep + entry.path] =
+                    prefix_title.length > 0
+                        ? `${prefix_title} ${sep} ${entry.meta.title}`
+                        : entry.meta.title.toLowerCase() == "home"
+                        ? entry.meta.title
+                        : `Home / ${entry.meta.title}`;
+            }
 
-        if (options.html) {
-            options.html = options.html.replace(/%id%/gi, options.id);
-            if (func) {
-                options.html = options.html.replace(
-                    /%func\((.*?)\)%/gi,
-                    `Trix.$extensions.${name}(event, '${name}', '${options.id}', $1)`
+            if ("children" in entry) {
+                buildPageList(
+                    pageList,
+                    entry.children,
+                    prefix_url + entry.path,
+                    prefix_title + (entry.meta?.title || "")
                 );
             }
-        }
+        });
+    };
 
-        if (func) {
-            if (Trix.$extensions === undefined) Trix.$extensions = {};
-            Trix.$extensions[name] = func;
-        }
+    let pageRoutes: { [key: string]: string } = {};
+    buildPageList(pageRoutes, routes);
 
-        trix.value.toolbarElement
-            .querySelector(
-                `.trix-button-group.trix-button-group--${options.group}-tools`
-            )
-            .insertAdjacentHTML(
-                options.position,
-                `${
-                    options.divWrap
-                        ? '<div style="position:relative" class="trix-button trix-button--icon">'
-                        : ""
-                }<button type="button" ${
-                    options.divWrap
-                        ? ""
-                        : 'class="trix-button trix-button--icon"'
-                } data-trix-${options.type}="${
-                    options.type == "attribute" ? name : name
-                }" ${
-                    func
-                        ? `onClick="Trix.$extensions.${name}(event, '${name}', '${options.id}', 'click')"`
-                        : ""
-                } ${options.title ? `title="${options.title}"` : ""}>${
-                    options.icon
-                }</button>${options.html ? `${options.html}` : ""}${
-                    options.divWrap ? "</div>" : ""
-                }`
-            );
-
-        if (options.type == "attribute" && options.dialog) {
-            trix.value.toolbarElement
-                .querySelector(`.trix-dialogs`)
-                .insertAdjacentHTML(
-                    "beforeend",
-                    `<div class="trix-dialog trix-dialog--${name}" data-trix-dialog="${name}" data-trix-dialog-attribute="${options.attribute}">${options.dialog}</div>`
-                );
-        }
-    });
-};
-
-/* Foreground and Background Colors - Based on https://github.com/basecamp/trix/issues/985 */
-const foregroundColor = {
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3H344c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm0-96c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM288 96c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32z"/></svg>',
-    group: "text",
-    position: "beforeend",
-    title: "Text colour",
-    html: '<input type="color" style="position:absolute;top:0;left:0;height:100%;width:100%;opacity:0" id="%ID%-picker" onchange="%func(\'colorChanged\')%" />',
-    divWrap: true,
-    trixAttribute: {
-        type: "text",
-        data: {
-            styleProperty: "color",
-            inheritable: true,
-        },
-    },
-};
-
-const backgroundColor = {
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M41.4 9.4C53.9-3.1 74.1-3.1 86.6 9.4L168 90.7l53.1-53.1c28.1-28.1 73.7-28.1 101.8 0L474.3 189.1c28.1 28.1 28.1 73.7 0 101.8L283.9 481.4c-37.5 37.5-98.3 37.5-135.8 0L30.6 363.9c-37.5-37.5-37.5-98.3 0-135.8L122.7 136 41.4 54.6c-12.5-12.5-12.5-32.8 0-45.3zm176 221.3L168 181.3 75.9 273.4c-4.2 4.2-7 9.3-8.4 14.6H386.7l42.3-42.3c3.1-3.1 3.1-8.2 0-11.3L277.7 82.9c-3.1-3.1-8.2-3.1-11.3 0L213.3 136l49.4 49.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0zM512 512c-35.3 0-64-28.7-64-64c0-25.2 32.6-79.6 51.2-108.7c6-9.4 19.5-9.4 25.5 0C543.4 368.4 576 422.8 576 448c0 35.3-28.7 64-64 64z"/></svg>',
-    group: "text",
-    position: "beforeend",
-    title: "Background colour",
-    html: '<input type="color" style="position:absolute;top:0;left:0;height:100%;width:100%;opacity:0" id="%ID%-picker" onchange="%func(\'colorChanged\')%" />',
-    divWrap: true,
-    trixAttribute: {
-        type: "text",
-        data: {
-            styleProperty: "backgroundColor",
-            inheritable: true,
-        },
-    },
-};
-
-const fgBgColorFunc = (event, name, id, data) => {
-    var picker = document.getElementById(id + "-picker");
-
-    if (data == "colorChanged") {
-        trix.value.editor.activateAttribute(name, picker.value);
+    const pageList: PageList[] = [];
+    for (const [key, value] of Object.entries(pageRoutes)) {
+        pageList.push({ title: value, value: key });
     }
-};
 
-addToolbarButton("foreground", foregroundColor, fgBgColorFunc);
-addToolbarButton("background", backgroundColor, fgBgColorFunc);
+    pageList.sort((a, b) => {
+        const titleA = a.title.toLowerCase();
+        const titleB = b.title.toLowerCase();
 
-/* Text align center button - No function needed for this button */
-addToolbarButton("textAlignCenter", {
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M352 64c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32zm96 128c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 448c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM352 320c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32z"/></svg>',
-    group: "block",
-    position: "beforeend",
-    title: "Align text center",
-    trixAttribute: {
-        type: "block",
-        data: {
-            tagName: "centered",
-        },
-    },
-});
-
-/* Remove all formatting button */
-addToolbarButton(
-    "removeFormatting",
-    {
-        type: "action",
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7H288h9.4H512c17.7 0 32-14.3 32-32s-14.3-32-32-32H387.9L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416H288l-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z"/></svg>',
-        group: "text",
-        position: "beforeend",
-        title: "Remove formatting",
-    },
-    (event, name, id, data) => {
-        // let removeAttrs = ['bold', 'italic', 'strike', 'href', 'foreground', 'background', 'bullet']
-        // removeAttrs.forEach(attr => trix.value.editor.deactivateAttribute(attr))
-
-        Object.keys(Trix.config.textAttributes)
-            .concat(Object.keys(Trix.config.blockAttributes))
-            .forEach((attr) => trix.value.editor.deactivateAttribute(attr));
-    }
-);
-
-/** Media Selector */
-addToolbarButton(
-    "media",
-    {
-        type: "action",
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0H576c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64zM476 106.7C471.5 100 464 96 456 96s-15.5 4-20 10.7l-56 84L362.7 169c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h80 48H552c8.9 0 17-4.9 21.2-12.7s3.7-17.3-1.2-24.6l-96-144zM336 96c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zM64 128h96V384v32c0 17.7 14.3 32 32 32H320c17.7 0 32-14.3 32-32V384H512v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192c0-35.3 28.7-64 64-64zm8 64c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V208c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V312c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H72zm336 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H424c-8.8 0-16 7.2-16 16z"/></svg>',
-        group: "file",
-        title: "Insert Media",
-    },
-    async (event, name, id, data) => {
-        let result = await openDialog(DialogMedia);
-
-        if (result.url) {
-            trix.value.editor.insertHTML(`<img src="${result.url}" />`);
-        }
-    }
-);
-
-/* Update Link Button */
-let hrefDialogObserver = null;
-let hrefDialogObserverTarget = null;
-
-onUnmounted(() => {
-    if (hrefDialogObserver != null && hrefDialogObserverTarget != null) {
-        hrefDialogObserver.unobserve(hrefDialogObserverTarget);
-
-        hrefDialogObserver = null;
-        hrefDialogObserverTarget = null;
-    }
-});
-
-const buildPageList = (
-    pageList,
-    routeEntries,
-    prefix_url = "",
-    prefix_title = ""
-) => {
-    routeEntries.forEach((entry) => {
-        if ("path" in entry && "meta" in entry && "title" in entry.meta) {
-            const sep = entry.path.substring(0, 1) == "/" ? "" : "/";
-            pageList[prefix_url + sep + entry.path] =
-                prefix_title + sep + entry.meta.title;
+        if (titleA < titleB) {
+            return -1;
         }
 
-        if ("children" in entry) {
-            buildPageList(
-                pageList,
-                entry.children,
-                prefix_url + entry.path,
-                prefix_title + (entry.meta?.title || "")
-            );
+        if (titleA > titleB) {
+            return 1;
         }
-    });
-};
 
-/**
- *
- * @param obj
- */
-function sortProperties(obj) {
-    // convert object into array
-    var sortable = [];
-    for (var key in obj)
-        if (obj.hasOwnProperty(key)) sortable.push([key, obj[key]]); // each item is an array in format [key, value]
-
-    // sort items by value
-    sortable.sort(function (a, b) {
-        var x = a[1].toLowerCase(),
-            y = b[1].toLowerCase();
-        return x < y ? -1 : x > y ? 1 : 0;
+        return 0;
     });
 
-    obj = {};
-    sortable.forEach((item) => {
-        obj[item[0]] = item[1];
-    });
+    return pageList;
+};
 
-    return obj; // array in format [ [ key1, val1 ], [ key2, val2 ], ... ]
-}
+const imageBrowser = (callback, value, meta) => {
+    var galleryPage = 1;
+    var galleryMax = 1;
 
-whenInitalized(() => {
-    const hrefDialog = trix.value.toolbarElement.querySelector(
-        ".trix-dialogs .trix-dialog.trix-dialog--link"
-    );
+    // Open a dialog to select a file
+    const input = document.createElement("input");
+    input.setAttribute("type", "file");
+    input.setAttribute("accept", "image/*");
+    input.onchange = function () {
+        if (input.files) {
+            let formData = new FormData();
+            formData.append("file", input.files[0]);
 
-    const hrefInput = hrefDialog.querySelector(".trix-input--dialog");
+            api.post({
+                url: "/media",
+                body: formData,
+            })
+                .then((result) => {
+                    input.value = "";
+                    const data = result.data as MediaResponse;
 
-    const handleHref = (event, name, id, data) => {
-        if (id == "select") {
-            document.getElementById("href-hidden").value =
-                import.meta.env.APP_URL + event.target.value;
-            document.getElementById("href-input").value = "";
-        } else if (id == "input") {
-            document.getElementById("href-hidden").value = event.target.value;
-            document.getElementById("href-select").value = "";
-        } else {
-            /* empty */
+                    if (data.medium) {
+                        callback(data.medium.url);
+                        dialog.close();
+                    } else {
+                        alert("The server responded with an unknown error");
+                    }
+                })
+                .catch((error) => {
+                    input.value = "";
+                    alert(
+                        error.data.message ||
+                            "An unexpected error occurred uploading the file to the server."
+                    );
+                });
         }
     };
 
-    hrefDialogObserverTarget = hrefDialog;
-    if (hrefDialogObserver == null && hrefDialogObserverTarget != null) {
-        hrefDialogObserver = new IntersectionObserver((entries, observer) => {
-            entries.forEach((entry) => {
-                if (entry.intersectionRatio === 1) {
-                    const hidden = document.getElementById("href-hidden");
-                    if (hidden != null) {
-                        if (hidden.value.startsWith(import.meta.env.APP_URL)) {
-                            document.getElementById("href-select").value =
-                                hidden.value.substring(
-                                    import.meta.env.APP_URL.length
-                                );
-                            document.getElementById("href-input").value = "";
-                        } else {
-                            document.getElementById("href-select").value = "";
-                            document.getElementById("href-input").value =
-                                hidden.value;
-                        }
-                    }
+    // create the header element
+    const header = document.createElement("div");
+    header.id = "tinymce-gallery-header";
+
+    // create the gallery element
+    const gallery = document.createElement("div");
+    gallery.id = "tinymce-gallery";
+
+    const updateGallery = () => {
+        api.get({
+            url: "/media",
+            params: {
+                limit: 12,
+                page: galleryPage,
+                mime: "image/",
+            },
+        })
+            .then((result) => {
+                const data = result.data as MediaCollection;
+                galleryMax = Math.ceil(data.total / 12);
+
+                const infoElement = document.querySelector(
+                    "#tinymce-gallery-header .info"
+                );
+                if (infoElement != null) {
+                    infoElement.innerHTML = `${galleryPage} / ${galleryMax}`;
                 }
+
+                const galleryContainer =
+                    document.getElementById("tinymce-gallery");
+                if (galleryContainer != null) {
+                    // delete existing items
+                    const divElements =
+                        galleryContainer.querySelectorAll("div");
+                    divElements.forEach((div) => {
+                        div.remove();
+                    });
+
+                    // add new items
+                    data.media.forEach((medium) => {
+                        const img = document.createElement("div");
+                        img.classList.add("gallery-image");
+                        img.style.backgroundImage = `url('${medium.url}?w=200')`;
+                        img.style.cursor = "pointer";
+                        img.onclick = function () {
+                            console.log("click");
+                            callback(medium.url);
+                            dialog.close();
+                        };
+
+                        galleryContainer.appendChild(img);
+                    });
+                }
+            })
+            .catch(() => {
+                /* empty */
             });
-        }).observe(hrefDialogObserverTarget);
+    };
+
+    // Add the container and file input to the dialog
+    const dialog = tinymce.activeEditor.windowManager.open({
+        title: "Insert image",
+        size: "large",
+        body: {
+            type: "panel",
+            items: [
+                {
+                    type: "htmlpanel",
+                    html: header.outerHTML,
+                },
+                {
+                    type: "htmlpanel",
+                    html: gallery.outerHTML,
+                },
+            ],
+        },
+        buttons: [
+            {
+                type: "custom",
+                text: "Upload",
+                name: "upload",
+            },
+            {
+                type: "cancel",
+                text: "Cancel",
+            },
+        ],
+        onAction: function (_dialogApi, details) {
+            if (details.name === "upload") {
+                input.click();
+            }
+        },
+    });
+
+    // create the child elements
+    const heading = document.createElement("div");
+    heading.className = "heading";
+    heading.textContent = "Select an image or upload a new one";
+
+    const pagination = document.createElement("div");
+    pagination.className = "pagination";
+
+    const prevButton = document.createElement("button");
+    prevButton.className = "prev";
+    prevButton.addEventListener("click", () => {
+        console.log("prev");
+        if (galleryPage > 1) {
+            galleryPage--;
+            updateGallery();
+        }
+    });
+
+    const infoDiv = document.createElement("div");
+    infoDiv.className = "info";
+    infoDiv.textContent = `${galleryPage} / ${galleryMax}`;
+
+    const nextButton = document.createElement("button");
+    nextButton.className = "next";
+    nextButton.addEventListener("click", () => {
+        console.log("next");
+        if (galleryPage < galleryMax) {
+            galleryPage++;
+            updateGallery();
+        }
+        // handle click on the next button
+    });
+
+    // add the child elements to the parent element
+    pagination.appendChild(prevButton);
+    pagination.appendChild(infoDiv);
+    pagination.appendChild(nextButton);
+
+    const renderedHeader = document.getElementById("tinymce-gallery-header");
+    if (renderedHeader) {
+        renderedHeader.appendChild(heading);
+        renderedHeader.appendChild(pagination);
     }
 
-    if (Trix.$extensions === undefined) Trix.$extensions = {};
-    Trix.$extensions["href"] = handleHref;
-
-    let pageRoutes = {};
-    buildPageList(pageRoutes, routes);
-
-    pageRoutes = sortProperties(pageRoutes);
-
-    hrefInput.removeAttribute("required");
-    hrefInput.setAttribute("id", "href-hidden");
-    hrefInput.setAttribute(
-        "oninput",
-        "Trix.$extensions.href(event, 'href', 'href', 'change')"
-    );
-    hrefInput.insertAdjacentHTML(
-        "afterend",
-        `<div class="form-group"><label>URL:</label><input id="href-input" type="url" onchange="Trix.$extensions.href(event, 'href', 'input', 'change') data-trix-input"/></div>
-        <div class="form-group"><label>Page:</label><select id="href-select" onchange="Trix.$extensions.href(event, 'href', 'select', 'change')">
-            <option value=""></option>
-            ${Object.keys(pageRoutes)
-                .map(function (key) {
-                    return (
-                        "<option value='" +
-                        key +
-                        "'>" +
-                        pageRoutes[key] +
-                        "</option>"
-                    );
-                })
-                .join("")}
-        </select></div>`
-    );
-});
+    updateGallery();
+};
 </script>
 
 <style lang="scss">
-/* For the added button above */
-centered {
-    display: block;
-    text-align: center;
-}
-
-/* Extra Trix Styles to support the above code*/
-.trix-button-group {
-    .trix-button {
-        text-align: -webkit-center;
-        text-align: -moz-center;
-
-        svg {
-            height: 20px;
-            width: 20px;
-            opacity: 0.6;
-            display: block;
-        }
-
-        /* For buttons inside divWrap option */
-        button {
-            display: block;
-            border: none;
-            background: transparent;
-            height: 100%;
-            width: 100%;
-        }
-    }
-}
-
-@media only screen and (max-width: 768px) {
-    trix-toolbar .trix-button--icon {
-        height: 1.6rem;
-    }
-
-    .trix-button-group .trix-button svg {
-        height: 14px;
-        width: 14px;
-    }
-}
-
-/* My own theme */
 .editor {
     width: 100%;
     margin-bottom: 1rem;
+}
 
-    trix-editor {
-        border-radius: 12px;
-        border-color: $border-color;
-        min-height: 20rem;
-        padding: map-get($spacer, 3) map-get($spacer, 2);
-        background-color: #fff;
+#tinymce-gallery-header {
+    display: flex;
 
-        a span {
-            color: $primary-color !important;
-        }
+    div.heading {
+        flex: 1;
+    }
 
-        pre {
-            word-wrap: break-word;
-            white-space: pre-wrap;
+    div.pagination {
+        display: flex;
+        text-align: right;
+        justify-content: center;
+
+        div.info {
+            display: inline-block;
         }
     }
 
-    trix-toolbar .trix-dialog__link-fields {
-        flex-direction: column;
+    button {
+        height: 24px;
+        width: 24px;
+        position: relative;
+        margin: 0 8px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        background-color: #f0f0f0;
 
-        #href-hidden {
-            // display: none;
+        &:before {
+            content: "";
+            position: absolute;
+            height: 8px;
+            width: 8px;
         }
 
-        .form-group {
-            display: flex;
-            align-items: center;
-            width: 100%;
-
-            input,
-            select,
-            label {
-                margin: 0;
-            }
-
-            label {
-                width: 3rem;
-            }
-        }
-
-        .trix-button-group {
-            width: 100%;
-            flex-direction: row-reverse;
-            border: 0;
-            gap: 0.5rem;
-
-            .trix-button {
-                border-radius: 12px;
-                color: white;
-                font-weight: 800;
-                border-width: 2px;
-                border-style: solid;
-                transition: background-color 0.1s, color 0.1s;
-                cursor: pointer;
-                background-color: $secondary-color;
-                border-color: $secondary-color;
-
-                &:hover:not(:disabled) {
-                    text-decoration: none;
-                    color: $secondary-color;
-                    background-color: #fff;
-                }
-
-                &:first-of-type {
-                    background-color: $primary-color;
-                    border-color: $primary-color;
-
-                    &:hover:not(:disabled) {
-                        color: $primary-color;
-                    }
-                }
-            }
+        &:hover {
+            background-color: #e3e3e3;
         }
     }
 
-    .trix-button-row {
-        flex-wrap: wrap;
-        gap: 0 0.5rem;
-        justify-content: flex-start;
+    button.prev {
+        &:before {
+            content: "";
+            border-left: 2px solid #222f3e;
+            border-bottom: 2px solid #222f3e;
+            top: 7px;
+            left: 9px;
+            transform: rotate(45deg);
+        }
     }
 
-    .trix-button-group {
-        border-radius: 10px;
-        border-color: $border-color;
-        background-color: #fff;
-        margin-left: 0 !important;
-
-        .trix-button {
-            border-bottom: 0;
-            border-color: $border-color;
-
-            &::before {
-                background-size: 50%;
-            }
-
-            &:first-child {
-                border-top-left-radius: 10px;
-                border-bottom-left-radius: 10px;
-            }
-
-            &:last-child {
-                border-top-right-radius: 10px;
-                border-bottom-right-radius: 10px;
-            }
-
-            &:hover:not(:disabled) {
-                background-color: rgba(0, 0, 0, 0.1);
-            }
+    button.next {
+        &:before {
+            content: "";
+            border-right: 2px solid #222f3e;
+            border-bottom: 2px solid #222f3e;
+            top: 7px;
+            right: 9px;
+            transform: rotate(-45deg);
         }
     }
 }
+
+#tinymce-gallery {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 12px;
+    border: 1px solid #eee;
+    justify-content: center;
+    gap: 1rem;
+    overflow-y: auto;
+    padding: 0.5rem;
+    max-height: 468px;
+
+    .gallery-image {
+        width: 18vw;
+        height: 14vh;
+        min-height: 113px;
+        min-width: 200px;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+        border: 3px solid #fff;
+        padding: 2px;
+        background-clip: content-box;
+
+        &:hover {
+            border: 3px solid #0060ce;
+        }
+    }
+}
+
+@media only screen and (max-height: 600px) {
+    #tinymce-gallery {
+        max-height: 428px;
+    }
+}
+
+@media only screen and (max-height: 570px) {
+    #tinymce-gallery {
+        height: 60vh;
+    }
+}
 </style>
diff --git a/resources/js/components/SMFileLink.vue b/resources/js/components/SMFileLink.vue
new file mode 100644
index 0000000..b450d6b
--- /dev/null
+++ b/resources/js/components/SMFileLink.vue
@@ -0,0 +1,42 @@
+<template>
+    <a :href="computedUrl" :target="props.target" rel="noopener"
+        ><slot></slot
+    ></a>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useUserStore } from "../store/UserStore";
+
+const props = defineProps({
+    href: {
+        type: String,
+        required: true,
+    },
+    target: {
+        type: String,
+        default: "_self",
+    },
+});
+
+const userStore = useUserStore();
+
+/**
+ * Return the URL with a token param attached if the user is logged in and its a api media download request.
+ */
+const computedUrl = computed(() => {
+    const url = new URL(props.href);
+    const path = url.pathname;
+    const mediumRegex = /^\/media\/[a-zA-Z0-9]+\/download$/;
+
+    if (mediumRegex.test(path) && userStore.token) {
+        if (url.search) {
+            return `${props.href}&token=${encodeURIComponent(userStore.token)}`;
+        } else {
+            return `${props.href}?token=${encodeURIComponent(userStore.token)}`;
+        }
+    }
+
+    return props.href;
+});
+</script>
diff --git a/resources/js/components/SMFooter.vue b/resources/js/components/SMFooter.vue
index 1111c2e..a153c43 100644
--- a/resources/js/components/SMFooter.vue
+++ b/resources/js/components/SMFooter.vue
@@ -1,37 +1,37 @@
 <template>
-    <SMContainer :full="true" class="footer">
-        <SMRow class="social">
+    <SMContainer :full="true" class="sm-footer">
+        <SMRow class="sm-social">
             <SMColumn class="align-items-center">
                 <ul>
                     <li>
                         <a href="https://facebook.com/stemmechanics"
-                            ><font-awesome-icon icon="fa-brands fa-facebook"
-                        /></a>
+                            ><ion-icon name="logo-facebook"></ion-icon
+                        ></a>
                     </li>
                     <li>
                         <a href="https://mastodon.au/@stemmechanics"
-                            ><font-awesome-icon icon="fa-brands fa-mastodon"
-                        /></a>
+                            ><ion-icon name="logo-mastodon"></ion-icon
+                        ></a>
                     </li>
                     <li>
                         <a href="https://www.youtube.com/@stemmechanics"
-                            ><font-awesome-icon icon="fa-brands fa-youtube"
-                        /></a>
+                            ><ion-icon name="logo-youtube"></ion-icon
+                        ></a>
                     </li>
                     <li>
                         <a href="https://twitter.com/stemmechanics"
-                            ><font-awesome-icon icon="fa-brands fa-twitter"
-                        /></a>
+                            ><ion-icon name="logo-twitter"></ion-icon
+                        ></a>
                     </li>
                     <li>
                         <a href="https://github.com/stemmechanics"
-                            ><font-awesome-icon icon="fa-brands fa-github"
-                        /></a>
+                            ><ion-icon name="logo-github"></ion-icon
+                        ></a>
                     </li>
                     <li>
                         <a href="https://discord.gg/yNzk4x7mpD"
-                            ><font-awesome-icon icon="fa-brands fa-discord"
-                        /></a>
+                            ><ion-icon name="logo-discord"></ion-icon
+                        ></a>
                     </li>
                 </ul>
             </SMColumn>
@@ -40,9 +40,9 @@
             <SMColumn
                 width="350px"
                 class="align-items-center justify-content-center align-items-center">
-                <router-link to="/" class="brand"></router-link>
+                <router-link to="/" class="sm-brand"></router-link>
             </SMColumn>
-            <SMColumn class="footer-acknowledgement">
+            <SMColumn class="sm-footer-text">
                 <p>
                     STEMMechanics Australia acknowledges the Traditional Owners
                     of Country throughout Australia and the continuing
@@ -50,6 +50,17 @@
                     respect to Aboriginal and Torres Strait Islander cultures;
                     and to Elders both past, present and emerging.
                 </p>
+                <p class="small">
+                    This site is protected by reCAPTCHA and the Google
+                    <a href="https://policies.google.com/privacy"
+                        >Privacy Policy</a
+                    >
+                    and
+                    <a href="https://policies.google.com/terms"
+                        >Terms of Service</a
+                    >
+                    apply.
+                </p>
             </SMColumn>
         </SMRow>
         <SMRow>
@@ -58,7 +69,7 @@
                 class="justify-content-center align-items-center copyright"
                 >Made with ❤️ - Copyright &copy; 2023</SMColumn
             >
-            <SMColumn class="justify-content-center footer-links">
+            <SMColumn class="justify-content-center sm-footer-links">
                 <ul>
                     <li>
                         <router-link :to="{ name: 'contact' }"
@@ -85,15 +96,14 @@
 </template>
 
 <style lang="scss" scoped>
-.footer {
+.sm-footer {
     flex: 0;
     align-items: center;
-    margin-top: calc(map-get($spacer, 5) * 2);
     font-size: 80%;
     background-color: #f8f8f8;
     padding: 0 0 map-get($spacer, 5) 0;
 
-    .social {
+    .sm-social {
         font-size: 200%;
         max-width: 100%;
         border-top: 1px solid #ddd;
@@ -108,7 +118,7 @@
         }
     }
 
-    .brand {
+    .sm-brand {
         display: inline-block;
         background-image: url("/img/logo.png");
         background-position: left top;
@@ -143,26 +153,30 @@
         }
     }
 
-    .footer-acknowledgement {
+    .sm-footer-text {
         p {
             padding: 0;
             margin: 0 0 0.5rem 0;
         }
+
+        p:last-of-type {
+            margin-bottom: 0;
+        }
     }
 }
 
 @media only screen and (max-width: 768px) {
-    .footer {
+    .sm-footer {
         .row:first-of-type {
             padding-bottom: 0;
         }
 
-        .footer-acknowledgement {
+        .sm-footer-text {
             align-items: center;
             text-align: center;
         }
 
-        .footer-links {
+        .sm-footer-links {
             align-items: center;
             justify-content: center;
         }
@@ -170,11 +184,11 @@
 }
 
 @media only screen and (max-width: 640px) {
-    .footer {
-        .footer-acknowledgement {
+    .sm-footer {
+        .sm-footer-text {
             padding: 0 1rem;
         }
-        .footer-links ul {
+        .sm-footer-links ul {
             flex-direction: column;
 
             li {
@@ -186,7 +200,7 @@
 }
 
 @media only screen and (max-width: 400px) {
-    .footer ul li {
+    .sm-footer ul li {
         margin-left: 0.5rem;
         margin-right: 0.5rem;
     }
diff --git a/resources/js/components/SMForm.vue b/resources/js/components/SMForm.vue
new file mode 100644
index 0000000..88c9bbc
--- /dev/null
+++ b/resources/js/components/SMForm.vue
@@ -0,0 +1,37 @@
+<template>
+    <form @submit.prevent="handleSubmit">
+        <SMLoader :loading="props.modelValue._loading"></SMLoader>
+        <SMMessage
+            v-if="props.modelValue._message.length > 0"
+            :message="props.modelValue._message"
+            :type="props.modelValue._messageType"
+            :icon="props.modelValue._messageIcon" />
+
+        <slot></slot>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { provide } from "vue";
+import SMLoader from "../components/SMLoader.vue";
+import SMMessage from "./SMMessage.vue";
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        required: true,
+    },
+});
+const emits = defineEmits(["submit"]);
+
+/**
+ * Handle the user submitting the form.
+ */
+const handleSubmit = async function () {
+    if (await props.modelValue.validate()) {
+        emits("submit");
+    }
+};
+
+provide("form", props.modelValue);
+</script>
diff --git a/resources/js/components/SMFormFooter.vue b/resources/js/components/SMFormFooter.vue
index 060a21f..537e4c7 100644
--- a/resources/js/components/SMFormFooter.vue
+++ b/resources/js/components/SMFormFooter.vue
@@ -1,26 +1,25 @@
 <template>
-    <div class="form-footer">
-        <div class="form-footer-column form-footer-column-left">
+    <div class="sm-form-footer">
+        <div class="sm-form-footer-column sm-form-footer-column-left">
             <slot name="left"></slot>
         </div>
-        <div class="form-footer-column form-footer-column-right">
+        <div class="sm-form-footer-column sm-form-footer-column-right">
             <slot name="right"></slot>
         </div>
     </div>
 </template>
 
 <style lang="scss">
-.form-footer {
+.sm-form-footer {
     display: flex;
     flex: 1;
-    // margin-bottom: map-get($spacer, 3);
 
-    .form-footer-column {
+    .sm-form-footer-column {
         display: flex;
         align-items: center;
 
-        &.form-footer-column-left,
-        &.form-footer-column-right {
+        &.sm-form-footer-column-left,
+        &.sm-form-footer-column-right {
             a,
             button {
                 margin-left: map-get($spacer, 1);
@@ -36,7 +35,7 @@
             }
         }
 
-        &.form-footer-column-right {
+        &.sm-form-footer-column-right {
             flex: 1;
             justify-content: flex-end;
         }
@@ -44,12 +43,12 @@
 }
 
 @media screen and (max-width: 768px) {
-    .form-footer {
+    .sm-form-footer {
         flex-direction: column-reverse;
 
-        .form-footer-column {
-            &.form-footer-column-left,
-            &.form-footer-column-right {
+        .sm-form-footer-column {
+            &.sm-form-footer-column-left,
+            &.sm-form-footer-column-right {
                 display: flex;
                 flex-direction: column-reverse;
                 justify-content: center;
@@ -66,11 +65,11 @@
                 }
             }
 
-            &.form-footer-column-left {
+            &.sm-form-footer-column-left {
                 margin-bottom: -#{calc(map-get($spacer, 1) / 2)};
             }
 
-            &.form-footer-column-right {
+            &.sm-form-footer-column-right {
                 margin-top: -#{calc(map-get($spacer, 1) / 2)};
             }
         }
diff --git a/resources/js/components/SMHTML.vue b/resources/js/components/SMHTML.vue
index 2f38737..001b94c 100644
--- a/resources/js/components/SMHTML.vue
+++ b/resources/js/components/SMHTML.vue
@@ -1,9 +1,11 @@
 <template>
-    <component :is="parsedContent"></component>
+    <component :is="computedContent"></component>
 </template>
 
 <script setup lang="ts">
+import DOMPurify from "dompurify";
 import { computed } from "vue";
+import { ImportMetaExtras } from "../../../import-meta";
 
 const props = defineProps({
     html: {
@@ -13,14 +15,21 @@ const props = defineProps({
     },
 });
 
-const parsedContent = computed(() => {
+/**
+ * Return the html as a component, relative links as router-link and sanitized.
+ */
+const computedContent = computed(() => {
     let html = "";
 
     const regex = new RegExp(
-        `<a ([^>]*?)href="${import.meta.env.APP_URL}(.*?>.*?)</a>`,
+        `<a ([^>]*?)href="${
+            (import.meta as ImportMetaExtras).env.APP_URL
+        }(.*?>.*?)</a>`,
         "ig"
     );
-    html = props.html.replaceAll(regex, '<router-link $1to="$2</router-link>');
+
+    html = props.html.replace(regex, '<router-link $1to="$2</router-link>');
+    html = DOMPurify.sanitize(html);
 
     return {
         template: `<div class="content">${html}</div>`,
diff --git a/resources/js/components/SMHeading.vue b/resources/js/components/SMHeading.vue
index ab7c18c..cce4c04 100644
--- a/resources/js/components/SMHeading.vue
+++ b/resources/js/components/SMHeading.vue
@@ -1,16 +1,13 @@
 <template>
-    <div class="heading">
-        <router-link
-            v-if="back != ''"
-            :to="{ name: back }"
-            class="heading-back">
-            <font-awesome-icon icon="fa-solid fa-arrow-left" />{{ backLabel }}
+    <div class="sm-heading">
+        <router-link v-if="back != ''" :to="{ name: back }" class="sm-back">
+            <ion-icon name="arrow-back-outline" />{{ backLabel }}
         </router-link>
-        <router-link v-if="close != ''" :to="{ name: close }" class="close">
-            <font-awesome-icon icon="fa-solid fa-close" />
+        <router-link v-if="close != ''" :to="{ name: close }" class="sm-close">
+            <ion-icon name="close-outline" />
         </router-link>
-        <span v-if="closeBack" class="close" @click="handleBack">
-            <font-awesome-icon icon="fa-solid fa-close" />
+        <span v-if="closeBack" class="sm-close" @click="handleBack">
+            <ion-icon name="close-outline" />
         </span>
         <h1>{{ heading }}</h1>
     </div>
@@ -50,20 +47,16 @@ const handleBack = () => {
 </script>
 
 <style lang="scss">
-.heading {
+.sm-heading {
     position: relative;
 
-    .heading-back {
+    .sm-back {
         position: absolute;
         padding-top: 2rem;
         font-size: 80%;
-
-        svg {
-            margin-right: 0.5rem;
-        }
     }
 
-    .close {
+    .sm-close {
         right: -10px;
         top: -10px;
         position: absolute;
@@ -76,10 +69,8 @@ const handleBack = () => {
     }
 }
 
-// @media screen and (max-width: 768px) {
-
 @media only screen and (max-width: 640px) {
-    .heading .close {
+    .sm-heading .sm-close {
         right: 0;
         top: -20px;
     }
diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue
index cf7357d..a0c405b 100644
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -1,104 +1,119 @@
 <template>
-    <div :class="['form-group', { 'has-error': error }]">
-        <label v-if="label" :class="{ required: required, inline: inline }">{{
-            label
-        }}</label>
+    <div
+        :class="[
+            'sm-input-group',
+            {
+                'sm-input-active': inputActive,
+                'sm-feedback-invalid': feedbackInvalid,
+                'sm-input-small': small,
+            },
+            computedClassType,
+        ]">
+        <label v-if="label">{{ label }}</label>
+        <ion-icon
+            class="sm-invalid-icon"
+            name="alert-circle-outline"></ion-icon>
         <input
             v-if="
                 type == 'text' ||
+                type == 'email' ||
                 type == 'password' ||
                 type == 'email' ||
-                type == 'url'
+                type == 'url' ||
+                type == 'daterange' ||
+                type == 'datetime'
             "
             :type="type"
-            :value="modelValue"
-            :placeholder="placeholder"
-            @input="input"
+            :value="value"
+            @input="handleInput"
+            @focus="handleFocus"
             @blur="handleBlur"
-            @keydown="handleBlur" />
+            @keydown="handleKeydown" />
         <textarea
-            v-if="type == 'textarea'"
+            v-else-if="type == 'textarea'"
             rows="5"
-            :value="modelValue"
-            :placeholder="placeholder"
-            @input="input"
+            :value="value"
+            @input="handleInput"
+            @focus="handleFocus"
             @blur="handleBlur"
-            @keydown="handleBlur"></textarea>
-        <div v-if="type == 'file'" class="input-file-group">
+            @keydown="handleKeydown"></textarea>
+        <div v-else-if="type == 'file'" class="input-file-group">
             <input
                 id="file"
                 type="file"
                 class="file"
                 :accept="props.accept"
                 @change="handleChange" />
-            <label class="button" for="file">Select file</label>
+            <label class="sm-button" for="file">Select file</label>
             <div class="file-name">
                 {{ modelValue?.name ? modelValue.name : modelValue }}
             </div>
         </div>
-        <a v-if="type == 'link'" :href="href" target="_blank">{{
-            props.modelValue
-        }}</a>
-        <span v-if="type == 'static'">{{ props.modelValue }}</span>
-        <div v-if="type == 'media'" class="input-media-group">
-            <div class="input-media-display">
+        <select
+            v-else-if="type == 'select'"
+            :value="value"
+            @input="handleInput"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @keydown="handleKeydown">
+            <option
+                v-for="(optionValue, key) in options"
+                :key="key"
+                :value="key"
+                :selected="key == value">
+                {{ optionValue }}
+            </option>
+        </select>
+        <div v-else-if="type == 'media'" class="sm-input-media">
+            <div class="sm-input-media-item">
                 <img v-if="mediaUrl.length > 0" :src="mediaUrl" />
-                <font-awesome-icon v-else icon="fa-regular fa-image" />
+                <ion-icon v-else name="image-outline" />
             </div>
-            <div v-if="type == 'media'" class="form-group-error">
-                {{ error }}
-            </div>
-            <a class="button" @click.prevent="handleMediaSelect">Select file</a>
+            <a
+                class="sm-button sm-button-small"
+                @click.prevent="handleMediaSelect"
+                >Select file</a
+            >
         </div>
-        <div v-if="type != 'media'" class="form-group-error">{{ error }}</div>
-        <div v-if="slots.default" class="form-group-info">
-            <slot></slot>
-        </div>
-        <div v-if="help" class="form-group-help">
-            <font-awesome-icon v-if="helpIcon" :icon="helpIcon" />
-            {{ help }}
+        <div v-if="slots.default || feedbackInvalid" class="sm-input-help">
+            <span v-if="feedbackInvalid" class="sm-input-invalid">{{
+                feedbackInvalid
+            }}</span>
+            <span v-if="slots.default" class="sm-input-info">
+                <slot></slot>
+            </span>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots, ref, watch } from "vue";
-import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
+import { computed, inject, ref, useSlots, watch } from "vue";
 import { openDialog } from "vue3-promise-dialog";
-import axios from "axios";
+import { toTitleCase } from "../helpers/string";
+import { isEmpty } from "../helpers/utils";
+import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
 
 const props = defineProps({
     modelValue: {
         type: String,
         default: "",
+        required: false,
     },
     label: {
         type: String,
         default: "",
         required: false,
     },
-    placeholder: {
-        type: String,
-        default: "",
-        required: false,
-    },
-    required: {
-        type: Boolean,
-        default: false,
-    },
     type: {
         type: String,
         default: "text",
     },
-    error: {
-        type: String,
-        default: "",
+    small: {
+        type: Boolean,
+        default: false,
+        required: false,
     },
-    help: {
-        type: String,
-        default: "",
-    },
-    helpIcon: {
+    feedbackInvalid: {
         type: String,
         default: "",
     },
@@ -106,100 +121,312 @@ const props = defineProps({
         type: String,
         default: "",
     },
-    href: {
-        type: String,
+    options: {
+        type: Object,
+        default() {
+            return {};
+        },
+    },
+    control: {
+        type: [String, Object],
         default: "",
     },
+    form: {
+        type: Object,
+        default: () => {
+            return {};
+        },
+        required: false,
+    },
 });
 
-const emits = defineEmits(["update:modelValue", "blur"]);
+const emits = defineEmits(["update:modelValue", "focus", "blur", "keydown"]);
 const slots = useSlots();
 const mediaUrl = ref("");
 
+const objForm = inject("form", props.form);
+const objControl =
+    typeof props.control == "object"
+        ? props.control
+        : !isEmpty(objForm) &&
+          typeof props.control == "string" &&
+          props.control != ""
+        ? objForm.controls[props.control]
+        : null;
+
+const label = ref(props.label);
+const feedbackInvalid = ref(props.feedbackInvalid);
+const value = ref(props.modelValue);
+const inputActive = ref(value.value.length > 0 || props.type == "select");
+
+/**
+ * Return the classname based on type
+ */
+const computedClassType = computed(() => {
+    return `sm-input-${props.type}`;
+});
+
+watch(
+    () => props.label,
+    (newValue) => {
+        label.value = newValue;
+    }
+);
+
+if (objControl) {
+    if (value.value.length > 0) {
+        objControl.value = value.value;
+    } else {
+        value.value = objControl.value;
+    }
+
+    if (label.value.length == 0) {
+        label.value = toTitleCase(props.control);
+    }
+
+    inputActive.value = value.value.length > 0;
+
+    watch(
+        () => objControl.validation.result.valid,
+        (newValue) => {
+            feedbackInvalid.value = newValue
+                ? ""
+                : objControl.validation.result.invalidMessages[0];
+        },
+        { deep: true }
+    );
+
+    watch(
+        () => objControl.value,
+        (newValue) => {
+            value.value = newValue;
+        },
+        { deep: true }
+    );
+}
+
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        value.value = newValue;
+    }
+);
+
+watch(
+    () => props.feedbackInvalid,
+    (newValue) => {
+        feedbackInvalid.value = newValue;
+    }
+);
+
+watch(
+    () => value.value,
+    (newValue) => {
+        inputActive.value = newValue.length > 0;
+    }
+);
+
 const handleChange = (event) => {
     emits("update:modelValue", event.target.files[0]);
+};
+
+const handleInput = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    value.value = target.value;
+    emits("update:modelValue", target.value);
+
+    if (objControl) {
+        objControl.value = target.value;
+        feedbackInvalid.value = "";
+    }
+};
+
+const handleFocus = (event: Event) => {
+    inputActive.value = true;
+
+    if (event instanceof KeyboardEvent) {
+        if (event.key === undefined || event.key === "Tab") {
+            emits("blur", event);
+        }
+    }
+
+    emits("focus", event);
+};
+
+const handleBlur = async (event: Event) => {
+    if (objControl) {
+        await objControl.validate();
+        objControl.isValid();
+    }
+
+    const target = event.target as HTMLInputElement;
+
+    if (target.value.length == 0) {
+        inputActive.value = false;
+    }
+
     emits("blur", event);
 };
 
-const input = (event) => {
-    emits("update:modelValue", event.target.value);
-};
-
-const handleBlur = (event) => {
-    if (event.keyCode == undefined || event.keyCode == 9) {
-        emits("blur", event);
-    }
+const handleKeydown = (event: Event) => {
+    emits("keydown", event);
 };
 
 const handleMediaSelect = async (event) => {
     let result = await openDialog(SMDialogMedia);
-
-    console.log(result);
     if (result) {
         mediaUrl.value = result.url;
         emits("update:modelValue", result.id);
     }
 };
-
-const inline = computed(() => {
-    return ["static", "link"].includes(props.type);
-});
-
-const handleLoad = async () => {
-    if (props.type == "media" && props.modelValue.length > 0) {
-        try {
-            let result = await axios.get(`media/${props.modelValue}`);
-            mediaUrl.value = result.data.medium.url;
-        } catch (error) {
-            /* empty */
-        }
-    }
-};
-
-watch(
-    () => props.modelValue,
-    () => {
-        handleLoad();
-    }
-);
 </script>
 
 <style lang="scss">
-.input-media-group {
+.sm-input-group {
+    position: relative;
     display: flex;
-    margin: 0 auto;
-    max-width: 26rem;
     flex-direction: column;
-    align-items: center;
+    margin-bottom: map-get($spacer, 4);
+    flex: 1;
+    width: 100%;
 
-    .input-media-display {
-        display: flex;
-        margin-bottom: 1rem;
+    &.sm-input-small {
+        font-size: 80%;
+
+        &.sm-input-active {
+            label {
+                transform: translate(6px, -3px) scale(0.7);
+            }
+
+            input {
+                padding: calc(#{map-get($spacer, 1)} * 1.5) map-get($spacer, 2)
+                    calc(#{map-get($spacer, 1)} / 2) map-get($spacer, 2);
+            }
+        }
+
+        input,
+        label {
+            padding: map-get($spacer, 1) map-get($spacer, 2);
+        }
+    }
+
+    &.sm-input-active {
+        label {
+            transform: translate(8px, -3px) scale(0.7);
+            color: $secondary-color-dark;
+        }
+
+        input {
+            padding: calc(#{map-get($spacer, 2)} * 1.5) map-get($spacer, 3)
+                calc(#{map-get($spacer, 2)} / 2) map-get($spacer, 3);
+        }
+
+        textarea {
+            padding: calc(#{map-get($spacer, 2)} * 2) map-get($spacer, 3)
+                calc(#{map-get($spacer, 2)} / 2) map-get($spacer, 3);
+        }
+
+        select {
+            padding: calc(#{map-get($spacer, 2)} * 2) map-get($spacer, 3)
+                calc(#{map-get($spacer, 2)} / 2) map-get($spacer, 3);
+        }
+    }
+
+    &.sm-feedback-invalid {
+        input,
+        select,
+        textarea {
+            border: 2px solid $danger-color;
+        }
+
+        .sm-invalid-icon {
+            display: block;
+        }
+    }
+
+    label {
+        position: absolute;
+        display: block;
+        padding: map-get($spacer, 2) map-get($spacer, 3);
+        line-height: 1.5;
+        transform-origin: top left;
+        transform: translate(0, 1px) scale(1);
+        transition: all 0.1s ease-in-out;
+        color: $secondary-color-dark;
+        pointer-events: none;
+    }
+
+    .sm-invalid-icon {
+        position: absolute;
+        display: none;
+        right: 0;
+        top: 2px;
+        padding: map-get($spacer, 2) map-get($spacer, 3);
+        color: $danger-color;
+        font-size: 120%;
+    }
+
+    input,
+    select,
+    textarea {
+        box-sizing: border-box;
+        display: block;
+        width: 100%;
         border: 1px solid $border-color;
-        background-color: #fff;
+        border-radius: 12px;
+        padding: map-get($spacer, 2) map-get($spacer, 3);
+        color: $font-color;
+        margin-bottom: map-get($spacer, 1);
 
-        img {
-            max-width: 100%;
-            max-height: 100%;
-        }
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+    }
 
-        svg {
-            padding: 4rem;
+    textarea {
+        resize: none;
+    }
+
+    &.sm-input-media {
+        label {
+            position: relative;
+            transform: none;
         }
     }
 
-    .button {
-        max-width: 13rem;
+    .sm-input-media {
+        text-align: center;
+
+        .sm-input-media-item {
+            display: block;
+            margin-bottom: 0.5rem;
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+            ion-icon {
+                padding: 4rem;
+                font-size: 3rem;
+                border: 1px solid $border-color;
+                background-color: #fff;
+            }
+        }
+
+        .button {
+            display: inline-block;
+        }
     }
-}
 
-.input-media-group + .form-group-error {
-    text-align: center;
-}
+    .sm-input-help {
+        font-size: 75%;
+        margin: 0 map-get($spacer, 1);
 
-@media screen and (max-width: 768px) {
-    .input-media-group {
-        max-width: 13rem;
+        .sm-input-invalid {
+            color: $danger-color;
+            padding-right: map-get($spacer, 1);
+        }
     }
 }
 </style>
diff --git a/resources/js/components/SMInputAttachments.vue b/resources/js/components/SMInputAttachments.vue
new file mode 100644
index 0000000..8bf68c7
--- /dev/null
+++ b/resources/js/components/SMInputAttachments.vue
@@ -0,0 +1,198 @@
+<template>
+    <div class="sm-input-group sm-input-attachments">
+        <label>Attachments</label>
+        <ul>
+            <li v-if="mediaItems.length == 0" class="attachments-none">
+                <ion-icon name="sad-outline"></ion-icon>
+                <p>No attachments</p>
+            </li>
+            <li v-for="media of mediaItems" :key="media.id">
+                <div class="attachment-media-icon">
+                    <img
+                        :src="getFilePreview(media.url)"
+                        height="48"
+                        width="48" />
+                </div>
+                <div class="attachment-media-name">
+                    {{ media.title || media.name }}
+                </div>
+                <div class="attachment-media-size">
+                    ({{ bytesReadable(media.size) }})
+                </div>
+                <div class="attachment-media-remove">
+                    <ion-icon
+                        name="close-outline"
+                        title="Remove attachment"
+                        @click="handleClickRemove(media.id)" />
+                </div>
+            </li>
+        </ul>
+        <a class="button" @click.prevent="handleClickAdd">Add media</a>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, watch } from "vue";
+import { openDialog } from "vue3-promise-dialog";
+import { api } from "../helpers/api";
+import { Media, MediaResponse } from "../helpers/api.types";
+import { bytesReadable } from "../helpers/types";
+import { getFilePreview } from "../helpers/utils";
+import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
+
+const props = defineProps({
+    modelValue: {
+        type: Array<string>,
+        default: () => [],
+        required: true,
+    },
+    accept: {
+        type: String,
+        default: "",
+    },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+const value: Ref<string[]> = ref(props.modelValue);
+const mediaItems: Ref<Media[]> = ref([]);
+
+/**
+ * Handle the user adding a new media item.
+ */
+const handleClickAdd = async () => {
+    openDialog(SMDialogMedia, { mime: "", accepts: "" }).then((result) => {
+        const media = result as Media;
+
+        mediaItems.value.push(media);
+        value.value.push(media.id);
+
+        emits("update:modelValue", value);
+    });
+};
+
+/**
+ * Handle removing a media item from the attachment array.
+ *
+ * @param {string} media_id The media id to remove.
+ */
+const handleClickRemove = (media_id: string) => {
+    const index = value.value.indexOf(media_id);
+    if (index !== -1) {
+        value.value.splice(index, 1);
+    }
+
+    const mediaIndex = mediaItems.value.findIndex(
+        (media) => media.id === media_id
+    );
+    if (mediaIndex !== -1) {
+        mediaItems.value.splice(mediaIndex, 1);
+    }
+
+    emits("update:modelValue", value);
+};
+
+/**
+ * Load the attachment list
+ */
+const handleLoad = () => {
+    mediaItems.value = [];
+
+    value.value.forEach((item) => {
+        api.get({
+            url: `/media/${item}`,
+        })
+            .then((result) => {
+                if (result.data) {
+                    const data = result.data as MediaResponse;
+
+                    mediaItems.value.push(data.medium);
+                }
+            })
+            .catch(() => {
+                /* empty */
+            });
+    });
+};
+
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        value.value = newValue;
+    }
+);
+
+handleLoad();
+</script>
+
+<style lang="scss">
+.sm-input-group.sm-input-attachments {
+    display: block;
+
+    label {
+        position: relative;
+        display: block;
+        padding: map-get($spacer, 2) map-get($spacer, 3) map-get($spacer, 0)
+            map-get($spacer, 3);
+        line-height: 1.5;
+        color: $secondary-color-dark;
+    }
+
+    a.button {
+        display: inline-block;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        border: 1px solid $border-color;
+
+        li {
+            background-color: #fff;
+            display: flex;
+            align-items: center;
+            padding: map-get($spacer, 2);
+
+            &.attachments-none {
+                justify-content: center;
+
+                ion-icon {
+                    font-size: 1.5rem;
+                }
+
+                p {
+                    margin: 0;
+                    padding-left: 0.5rem;
+                }
+            }
+
+            .attachment-media-icon {
+                display: flex;
+                width: 64px;
+                justify-content: center;
+            }
+
+            .attachment-media-name {
+                flex: 1;
+            }
+
+            .attachment-media-size {
+                font-size: 75%;
+                padding-left: 0.75rem;
+                color: $secondary-color-dark;
+            }
+
+            .attachment-media-remove {
+                font-size: 1.5rem;
+                padding-top: 0.2rem;
+                margin-left: 1rem;
+                color: $font-color;
+                cursor: pointer;
+
+                &:hover {
+                    color: $danger-color;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/resources/js/components/SMLoader.vue b/resources/js/components/SMLoader.vue
index 8b8528e..1201f4f 100644
--- a/resources/js/components/SMLoader.vue
+++ b/resources/js/components/SMLoader.vue
@@ -1,10 +1,8 @@
 <template>
     <template v-if="loading">
         <transition name="fade">
-            <div v-if="loading" class="loader-cover">
-                <div class="loader">
-                    <font-awesome-icon icon="fa-solid fa-spinner" pulse />
-                </div>
+            <div v-if="loading" class="sm-loader">
+                <SMLoadingIcon />
             </div>
         </transition>
     </template>
@@ -12,10 +10,30 @@
 </template>
 
 <script setup lang="ts">
+import SMLoadingIcon from "./SMLoadingIcon.vue";
+
 defineProps({
     loading: {
         type: Boolean,
         default: false,
+        required: true,
     },
 });
 </script>
+
+<style lang="scss">
+.sm-loader {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(4px);
+    background-color: rgba(255, 255, 255, 0.5);
+    z-index: 10000;
+}
+</style>
diff --git a/resources/js/components/SMLoadingIcon.vue b/resources/js/components/SMLoadingIcon.vue
new file mode 100644
index 0000000..2b6449b
--- /dev/null
+++ b/resources/js/components/SMLoadingIcon.vue
@@ -0,0 +1,68 @@
+<template>
+    <div class="sm-loading-icon-balls">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</template>
+
+<style lang="scss">
+.sm-loading-icon-balls {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+
+    div {
+        position: absolute;
+        top: 33px;
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        background: #000;
+        animation-timing-function: cubic-bezier(0, 1, 1, 0);
+        box-shadow: 0 0 1px rgba(0, 0, 0, 1);
+    }
+    div:nth-child(1) {
+        left: 8px;
+        animation: sm-loading-icon1 0.6s infinite;
+    }
+    div:nth-child(2) {
+        left: 8px;
+        animation: sm-loading-icon2 0.6s infinite;
+    }
+    div:nth-child(3) {
+        left: 32px;
+        animation: sm-loading-icon2 0.6s infinite;
+    }
+    div:nth-child(4) {
+        left: 56px;
+        animation: sm-loading-icon3 0.6s infinite;
+    }
+    @keyframes sm-loading-icon1 {
+        0% {
+            transform: scale(0);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+    @keyframes sm-loading-icon3 {
+        0% {
+            transform: scale(1);
+        }
+        100% {
+            transform: scale(0);
+        }
+    }
+    @keyframes sm-loading-icon2 {
+        0% {
+            transform: translate(0, 0);
+        }
+        100% {
+            transform: translate(24px, 0);
+        }
+    }
+}
+</style>
diff --git a/resources/js/components/SMMessage.vue b/resources/js/components/SMMessage.vue
index 769c91a..7978d3a 100644
--- a/resources/js/components/SMMessage.vue
+++ b/resources/js/components/SMMessage.vue
@@ -1,6 +1,9 @@
 <template>
-    <div :class="['message', type]">
-        <font-awesome-icon v-if="icon" :icon="icon" />{{ message }}
+    <div class="sm-message-container">
+        <div :class="['sm-message', type]">
+            <ion-icon v-if="icon" :name="icon"></ion-icon>
+            <p>{{ message }}</p>
+        </div>
     </div>
 </template>
 
@@ -22,36 +25,52 @@ defineProps({
 </script>
 
 <style lang="scss">
-.message {
-    padding: map-get($spacer, 2) map-get($spacer, 3);
-    margin-bottom: map-get($spacer, 4);
-    text-align: center;
-    font-size: 90%;
-    word-break: break-word;
+.sm-message-container {
+    justify-content: center;
+    align-self: center;
 
-    svg {
-        padding-right: map-get($spacer, 1);
-    }
+    .sm-message {
+        display: flex;
+        padding: map-get($spacer, 2) map-get($spacer, 3);
+        margin-bottom: map-get($spacer, 4);
+        text-align: center;
+        font-size: 90%;
+        word-break: break-word;
 
-    &.primary {
-        background-color: $primary-color-lighter;
-        color: $primary-color-darker;
-        border: 1px solid $primary-color-lighter;
-        border-radius: 12px;
-    }
+        &.primary {
+            background-color: $primary-color-lighter;
+            color: $primary-color-darker;
+            border: 1px solid $primary-color-lighter;
+            border-radius: 12px;
+        }
 
-    &.success {
-        background-color: $success-color-lighter;
-        color: $success-color-darker;
-        border: 1px solid $success-color-lighter;
-        border-radius: 12px;
-    }
+        &.success {
+            background-color: $success-color-lighter;
+            color: $success-color-darker;
+            border: 1px solid $success-color-lighter;
+            border-radius: 12px;
+        }
 
-    &.error {
-        background-color: $danger-color-lighter;
-        color: $danger-color-darker;
-        border: 1px solid $danger-color-lighter;
-        border-radius: 12px;
+        &.error {
+            background-color: $danger-color-lighter;
+            color: $danger-color-darker;
+            border: 1px solid $danger-color-lighter;
+            border-radius: 12px;
+        }
+
+        ion-icon {
+            height: 1.3em;
+            width: 1.3em;
+            margin-right: map-get($spacer, 1);
+        }
+
+        p {
+            margin-bottom: 0;
+            justify-content: center;
+            align-self: center;
+            white-space: pre-wrap;
+            flex: 1;
+        }
     }
 }
 </style>
diff --git a/resources/js/components/SMModal.vue b/resources/js/components/SMModal.vue
index 672421b..19ccbf8 100644
--- a/resources/js/components/SMModal.vue
+++ b/resources/js/components/SMModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="modal">
+    <div class="sm-modal">
         <slot></slot>
     </div>
 </template>
diff --git a/resources/js/components/SMNavbar.vue b/resources/js/components/SMNavbar.vue
index 628f32a..c17ded1 100644
--- a/resources/js/components/SMNavbar.vue
+++ b/resources/js/components/SMNavbar.vue
@@ -1,12 +1,14 @@
 <template>
     <SMContainer
         :full="true"
-        :class="['navbar', { showDropdown: showToggle }]"
-        @click="handleHideMenu">
+        :class="['sm-navbar', { 'sm-show-dropdown': showToggle }]"
+        @click="handleClickHideMenu">
         <template #inner>
-            <div class="navbar-container">
-                <router-link :to="{ name: 'home' }" class="brand"></router-link>
-                <ul class="navmenu flex-fill">
+            <div class="sm-navbar-container">
+                <router-link
+                    :to="{ name: 'home' }"
+                    class="sm-brand"></router-link>
+                <ul class="sm-navmenu flex-fill">
                     <template v-for="item in menuItems">
                         <li
                             v-if="
@@ -21,25 +23,25 @@
                     </template>
                 </ul>
                 <SMButton
-                    :to="{ name: 'workshop-list' }"
-                    class="navbar-cta"
+                    :to="{ name: 'event-list' }"
+                    class="sm-navbar-cta"
                     label="Find a workshop"
-                    icon="fa-solid fa-arrow-right" />
-                <div class="menuButton" @click.stop="handleToggleMenu">
+                    icon="arrow-forward-outline" />
+                <div
+                    class="sm-navbar-toggle-menu"
+                    @click.stop="handleClickToggleMenu">
                     <span>Menu</span
-                    ><font-awesome-icon
-                        icon="fa-solid fa-bars"
-                        class="menuButtonIcon" />
+                    ><ion-icon name="reorder-three-outline"></ion-icon>
                 </div>
             </div>
         </template>
-        <div class="navbar-dropdown-cover"></div>
-        <ul class="navbar-dropdown">
+        <div class="sm-navbar-dropdown-cover"></div>
+        <ul class="sm-navbar-dropdown">
             <li class="ml-auto">
-                <div class="menuClose" @click.stop="handleToggleMenu">
-                    <font-awesome-icon
-                        icon="fa-solid fa-xmark"
-                        class="menuCloseIcon" />
+                <div
+                    class="sm-navbar-close-menu"
+                    @click.stop="handleClickToggleMenu">
+                    <ion-icon name="close-outline"></ion-icon>
                 </div>
             </li>
             <template v-for="item in menuItems">
@@ -47,7 +49,7 @@
                     v-if="item.show == undefined || item.show()"
                     :key="item.name">
                     <router-link :to="item.to"
-                        ><font-awesome-icon :icon="item.icon" />{{
+                        ><ion-icon :name="item.icon" />{{
                             item.label
                         }}</router-link
                     >
@@ -68,66 +70,72 @@ const menuItems = [
     {
         name: "news",
         label: "News",
-        to: "/news",
-        icon: "fa-regular fa-newspaper",
+        to: { name: "post-list" },
+        icon: "newspaper-outline",
     },
     {
         name: "workshops",
         label: "Workshops",
-        to: "/workshops",
-        icon: "fa-solid fa-pen-ruler",
+        to: { name: "event-list" },
+        icon: "library-outline",
+    },
+    {
+        name: "courses",
+        label: "Courses",
+        to: "/courses",
+        icon: "briefcase-outline",
     },
-    // {
-    //     name: "courses",
-    //     label: "Courses",
-    //     to: "/courses",
-    //     icon: "fa-solid fa-graduation-cap",
-    // },
     {
         name: "contact",
-        label: "Contact us",
-        to: "/contact",
-        icon: "fa-regular fa-envelope",
+        label: "Contact",
+        to: { name: "contact" },
+        icon: "mail-outline",
     },
     {
         name: "register",
         label: "Register",
-        to: "/register",
-        icon: "fa-solid fa-pen-to-square",
+        to: { name: "register" },
+        icon: "person-add-outline",
         show: () => !userStore.id,
         inNav: false,
     },
     {
         name: "login",
         label: "Log in",
-        to: "/login",
-        icon: "fa-solid fa-right-to-bracket",
+        to: { name: "login" },
+        icon: "log-in-outline",
         show: () => !userStore.id,
         inNav: false,
     },
     {
         name: "dashboard",
         label: "Dashboard",
-        to: "/dashboard",
-        icon: "fa-regular fa-circle-user",
+        to: { name: "dashboard" },
+        icon: "grid-outline",
         show: () => userStore.id,
         inNav: false,
     },
     {
         name: "logout",
         label: "Log out",
-        to: "/logout",
-        icon: "fa-solid fa-right-from-bracket",
+        to: { name: "logout" },
+        icon: "log-out-outline",
         show: () => userStore.id,
         inNav: false,
     },
 ];
 
-const handleToggleMenu = () => {
+/**
+ * Hanfle the user clicking an element to toggle the dropdown menu.
+ */
+const handleClickToggleMenu = () => {
     showToggle.value = !showToggle.value;
 };
 
-const handleHideMenu = () => {
+/**
+ * Handle the user clicking an element to hide the dropdown menu.
+ */
+const handleClickHideMenu = () => {
     if (showToggle.value) {
         showToggle.value = false;
     }
@@ -135,7 +143,7 @@ const handleHideMenu = () => {
 </script>
 
 <style lang="scss">
-.navbar {
+.sm-navbar {
     height: 4.5rem;
     align-items: center;
     justify-content: center;
@@ -143,21 +151,22 @@ const handleHideMenu = () => {
     position: relative;
     flex: 0 0 auto !important;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
 
-    &.showDropdown {
-        .navbar-dropdown-cover {
+    &.sm-show-dropdown {
+        .sm-navbar-dropdown-cover {
             visibility: visible;
             opacity: 1;
             transition: visibility 0.3s linear, opacity 0.3s linear;
         }
 
-        .navbar-dropdown {
+        .sm-navbar-dropdown {
             margin-top: 0;
             transition: margin 0.5s ease-in-out;
         }
     }
 
-    .navbar-dropdown-cover {
+    .sm-navbar-dropdown-cover {
         position: fixed;
         visibility: hidden;
         z-index: 2000;
@@ -170,7 +179,7 @@ const handleHideMenu = () => {
         overflow: hidden;
     }
 
-    .navbar-dropdown {
+    .sm-navbar-dropdown {
         position: fixed;
         z-index: 2001;
         top: 0;
@@ -195,22 +204,21 @@ const handleHideMenu = () => {
                 display: inline-block;
                 width: map-get($spacer, 5) * 3;
 
-                svg {
+                ion-icon {
                     padding-right: map-get($spacer, 1);
+                    font-size: map-get($spacer, 4);
+                    vertical-align: middle;
                 }
             }
         }
     }
 
-    .navmenu,
-    .navbar-dropdown {
+    .sm-navmenu,
+    .sm-navbar-dropdown {
         padding-top: map-get($spacer, 4);
 
         li {
-            // display: flex;
-            // width: 100%;
             margin: 0 0.75rem;
-            // justify-content: center;
 
             a {
                 color: rgba(0, 0, 0, 0.8);
@@ -224,32 +232,33 @@ const handleHideMenu = () => {
             }
         }
 
-        .menuClose svg {
+        .sm-navbar-close-menu ion-icon {
             cursor: pointer;
             font-size: map-get($spacer, 4);
             padding-left: map-get($spacer, 1);
+
+            &:hover {
+                color: $danger-color;
+            }
         }
     }
 
-    .navbar-container {
+    .sm-navbar-container {
         display: flex;
         flex: 1;
         align-items: center;
 
-        .brand {
+        .sm-brand {
             display: inline-block;
             background-image: url("/img/logo.png");
             background-position: left top;
             background-repeat: no-repeat;
             background-size: contain;
-            // width: 16.5rem;
-            // height: 3rem;
             width: 13.5rem;
             height: 2rem;
-            // margin-bottom: 1rem;
         }
 
-        .navmenu {
+        .sm-navmenu {
             flex: 1;
             display: flex;
             justify-content: end;
@@ -257,9 +266,8 @@ const handleHideMenu = () => {
             padding: 0 1rem;
         }
 
-        .menuButton {
+        .sm-navbar-toggle-menu {
             cursor: pointer;
-            // display: none;
             align-items: center;
             font-size: 0.9rem;
             margin-left: 2rem;
@@ -269,37 +277,33 @@ const handleHideMenu = () => {
                 display: none;
             }
 
-            .menuButtonIcon {
+            ion-icon {
                 margin-left: 0.5rem;
-                font-size: 1.4rem;
+                font-size: map-get($spacer, 4);
             }
         }
     }
 
-    .navbar-cta {
+    .sm-navbar-cta {
         font-size: 0.9rem;
         padding: 0.6rem 1.1rem;
     }
 }
 
 @media only screen and (max-width: 1200px) {
-    .navbar .navbar-container {
-        .navmenu li {
+    .sm-navbar .navbar-container {
+        .sm-navmenu li {
             display: none;
         }
 
-        .menuButton {
+        .sm-navbar-toggle-menu {
             display: flex;
-
-            span {
-                // display: block;
-            }
         }
     }
 }
 
 @media only screen and (max-width: 992px) {
-    .navbar {
+    .sm-navbar {
         height: 4.5rem;
 
         .navbar-dropdown-cover {
@@ -307,13 +311,13 @@ const handleHideMenu = () => {
         }
 
         .navbar-container {
-            .brand {
+            .sm-brand {
                 width: 13.5rem;
                 height: 2rem;
                 margin-bottom: 0;
             }
 
-            .navbar-cta {
+            .sm-navbar-cta {
                 font-size: 0.9rem;
                 padding: 0.5rem 0.75rem;
             }
@@ -322,30 +326,30 @@ const handleHideMenu = () => {
 }
 
 @media only screen and (max-width: 640px) {
-    .navbar {
+    .sm-navbar {
         height: 4.5rem;
 
-        .navbar-dropdown-cover {
+        .sm-navbar-dropdown-cover {
             margin-top: 4.5rem;
         }
 
-        .navbar-container {
-            .brand {
+        .sm-navbar-container {
+            .sm-brand {
                 background-image: url("/img/logo-small.png");
                 width: 3rem;
                 height: 3rem;
             }
 
-            .navbar-cta {
+            .sm-navbar-cta {
                 font-size: 0.9rem;
                 padding: 0.5rem 0.75rem;
 
-                svg {
+                ion-icon {
                     display: none;
                 }
             }
 
-            .menuButton {
+            .sm-menuButton {
                 margin-left: 1rem;
 
                 span {
diff --git a/resources/js/components/SMPage.vue b/resources/js/components/SMPage.vue
new file mode 100644
index 0000000..84f6e25
--- /dev/null
+++ b/resources/js/components/SMPage.vue
@@ -0,0 +1,103 @@
+<template>
+    <div
+        :class="['sm-page-outer', { 'sm-no-breadcrumbs': noBreadcrumbs }]"
+        :style="styleObject">
+        <SMBreadcrumbs v-if="!noBreadcrumbs" />
+        <SMLoader :loading="loading">
+            <SMErrorForbidden
+                v-if="pageError == 403 || !hasPermission()"></SMErrorForbidden>
+            <SMErrorInternal
+                v-if="pageError >= 500 && hasPermission()"></SMErrorInternal>
+            <SMErrorNotFound
+                v-if="pageError == 404 && hasPermission()"></SMErrorNotFound>
+            <div v-if="pageError < 300 && hasPermission()" class="sm-page">
+                <slot></slot>
+                <SMContainer v-if="slots.container"
+                    ><slot name="container"></slot
+                ></SMContainer>
+            </div>
+        </SMLoader>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from "vue";
+import SMBreadcrumbs from "../components/SMBreadcrumbs.vue";
+import { useUserStore } from "../store/UserStore";
+import SMErrorForbidden from "./errors/Forbidden.vue";
+import SMErrorInternal from "./errors/Internal.vue";
+import SMErrorNotFound from "./errors/NotFound.vue";
+import SMContainer from "./SMContainer.vue";
+import SMLoader from "./SMLoader.vue";
+
+const props = defineProps({
+    pageError: {
+        type: Number,
+        default: 200,
+        required: false,
+    },
+    permission: {
+        type: String,
+        default: "",
+        required: false,
+    },
+    loading: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    background: {
+        type: String,
+        default: "",
+        required: false,
+    },
+    noBreadcrumbs: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+});
+
+const slots = useSlots();
+const userStore = useUserStore();
+let styleObject = {};
+
+if (props.background != "") {
+    styleObject["backgroundImage"] = `url('${props.background}')`;
+}
+
+/**
+ * Return if the current user has the props.permission to view this page.
+ *
+ * @returns {boolean} If the user has the permission.
+ */
+const hasPermission = (): boolean => {
+    return (
+        props.permission.length == 0 ||
+        userStore.permissions.includes(props.permission)
+    );
+};
+</script>
+
+<style lang="scss">
+.sm-page-outer {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    padding-bottom: calc(map-get($spacer, 5) * 2);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    &.sm-no-breadcrumbs {
+        margin-bottom: 0;
+    }
+
+    .sm-page {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+    }
+}
+</style>
diff --git a/resources/js/components/SMPageError.vue b/resources/js/components/SMPageError.vue
deleted file mode 100644
index 7a0fcb1..0000000
--- a/resources/js/components/SMPageError.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template v-if="error >= 300 || slots.default">
-    <d-error-forbidden v-if="error == 403"></d-error-forbidden>
-    <d-error-internal v-if="error >= 500"></d-error-internal>
-    <d-error-not-found v-if="error == 404"></d-error-not-found>
-    <template v-if="slots.default">
-        <slot></slot>
-    </template>
-</template>
-
-<script setup lang="ts">
-import { useSlots } from "vue";
-import DErrorForbidden from "./errors/Forbidden.vue";
-import DErrorInternal from "./errors/Internal.vue";
-import DErrorNotFound from "./errors/NotFound.vue";
-
-defineProps({
-    error: {
-        type: Number,
-        required: true,
-        default: 200,
-    },
-});
-
-const slots = useSlots();
-</script>
diff --git a/resources/js/components/SMPagination.vue b/resources/js/components/SMPagination.vue
new file mode 100644
index 0000000..6e71734
--- /dev/null
+++ b/resources/js/components/SMPagination.vue
@@ -0,0 +1,135 @@
+<template>
+    <div class="sm-pagination">
+        <ion-icon
+            name="chevron-back-outline"
+            :class="[{ disabled: computedDisablePrevButton }]"
+            @click="handleClickPrev" />
+        <span class="sm-pagination-info">{{ computedPaginationInfo }}</span>
+        <ion-icon
+            name="chevron-forward-outline"
+            :class="[{ disabled: computedDisableNextButton }]"
+            @click="handleClickNext" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+    modelValue: {
+        type: Number,
+        required: true,
+    },
+    total: {
+        type: Number,
+        required: true,
+    },
+    perPage: {
+        type: Number,
+        required: true,
+    },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+/**
+ * Returns the pagination info
+ */
+const computedPaginationInfo = computed(() => {
+    if (props.total == 0) {
+        return "0 - 0 of 0";
+    }
+
+    const start = (props.modelValue - 1) * props.perPage + 1;
+    const end = Math.min(start + props.perPage - 1, props.total);
+
+    return `${start} - ${end} of ${props.total}`;
+});
+
+/**
+ * Return the total number of pages.
+ */
+const computedTotalPages = computed(() => {
+    return Math.ceil(props.total / props.perPage);
+});
+
+/**
+ * Return if the previous button should be disabled.
+ */
+const computedDisablePrevButton = computed(() => {
+    return props.modelValue <= 1;
+});
+
+/**
+ * Return if the next button should be disabled.
+ */
+const computedDisableNextButton = computed(() => {
+    return props.modelValue >= computedTotalPages.value;
+});
+
+/**
+ * Handle click on previous button
+ *
+ * @param {MouseEvent} $event The mouse event.
+ */
+const handleClickPrev = ($event: MouseEvent): void => {
+    if (
+        $event.target &&
+        ($event.target as HTMLElement).classList.contains("disabled") ==
+            false &&
+        props.modelValue > 1
+    ) {
+        emits("update:modelValue", props.modelValue - 1);
+    }
+};
+
+/**
+ * Handle click on next button
+ *
+ * @param {MouseEvent} $event The mouse event.
+ */
+const handleClickNext = ($event: MouseEvent): void => {
+    if (
+        $event.target &&
+        ($event.target as HTMLElement).classList.contains("disabled") ==
+            false &&
+        props.modelValue < computedTotalPages.value
+    ) {
+        emits("update:modelValue", props.modelValue + 1);
+    }
+};
+</script>
+
+<style lang="scss">
+.sm-pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    ion-icon {
+        border: 1px solid $secondary-color;
+        border-radius: 4px;
+        padding: 0.25rem;
+
+        cursor: pointer;
+        transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
+        color: $font-color;
+
+        &.disabled {
+            cursor: not-allowed;
+            color: $secondary-color;
+        }
+
+        &:not(.disabled) {
+            &:hover {
+                background-color: $secondary-color;
+                color: #eee;
+            }
+        }
+    }
+
+    .sm-pagination-info {
+        margin: 0 map-get($spacer, 3);
+    }
+}
+</style>
diff --git a/resources/js/components/SMPanel.vue b/resources/js/components/SMPanel.vue
index 722894d..50ad15c 100644
--- a/resources/js/components/SMPanel.vue
+++ b/resources/js/components/SMPanel.vue
@@ -1,53 +1,59 @@
 <template>
-    <router-link :to="to" class="panel">
-        <div
-            class="panel-image"
-            :style="{ backgroundImage: `url('${imageUrl}')` }">
-            <div v-if="dateInImage" class="panel-image-date">
-                <div class="panel-image-date-day">
-                    {{ format(new Date(date), "dd") }}
+    <router-link :to="to" class="sm-panel">
+        <div v-if="image" class="sm-panel-image" :style="styleObject">
+            <div v-if="dateInImage && date" class="sm-panel-image-date">
+                <div class="sm-panel-image-date-day">
+                    {{ new SMDate(date, { format: "yMd" }).format("dd") }}
                 </div>
-                <div class="panel-image-date-month">
-                    {{ format(new Date(date), "MMM") }}
+                <div class="sm-panel-image-date-month">
+                    {{ new SMDate(date, { format: "yMd" }).format("MMM") }}
                 </div>
             </div>
-            <font-awesome-icon
-                v-if="hideImageLoader == false"
-                class="panel-image-loader"
-                icon="fa-regular fa-image" />
+            <ion-icon
+                v-if="imageUrl.length == 0"
+                class="sm-panel-image-loader"
+                name="image-outline" />
         </div>
-        <div class="panel-body">
-            <h3 class="panel-title">{{ title }}</h3>
-            <div v-if="showDate" class="panel-date">
-                <font-awesome-icon
+        <div class="sm-panel-body">
+            <h3 class="sm-panel-title">{{ title }}</h3>
+            <div v-if="showDate && date" class="sm-panel-date">
+                <ion-icon
                     v-if="showTime == false && endDate.length == 0"
-                    icon="fa-regular fa-calendar" /><font-awesome-icon
-                    v-else
-                    icon="fa-regular fa-clock" />
-                <p>{{ panelDate }}</p>
+                    name="calendar-outline" />
+                <ion-icon v-else name="time-outline" />
+                <p>{{ computedDate }}</p>
             </div>
-            <div v-if="location" class="panel-location">
-                <font-awesome-icon icon="fa-solid fa-location-dot" />
+            <div v-if="location" class="sm-panel-location">
+                <ion-icon name="location-outline" />
                 <p>{{ location }}</p>
             </div>
-            <div v-if="content" class="panel-content">{{ panelContent }}</div>
-            <div v-if="button.length > 0" class="panel-button">
-                <SMButton :to="to" :type="buttonType" :label="button" />
+            <div v-if="content" class="sm-panel-content">
+                {{ computedContent }}
+            </div>
+            <div v-if="button.length > 0" class="sm-panel-button">
+                <SMButton
+                    :to="to"
+                    :type="buttonType"
+                    :block="true"
+                    :label="button" />
+            </div>
+            <div
+                v-if="banner"
+                :class="['sm-panel-banner', `sm-panel-banner-${bannerType}`]">
+                {{ banner }}
             </div>
         </div>
     </router-link>
 </template>
 
 <script setup lang="ts">
-import axios from "axios";
-import { onMounted, computed, ref } from "vue";
-import {
-    excerpt,
-    isUUID,
-    replaceHtmlEntites,
-    stripHtmlTags,
-} from "../helpers/common";
-import { format } from "date-fns";
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { api } from "../helpers/api";
+import { MediaResponse } from "../helpers/api.types";
+import { SMDate } from "../helpers/datetime";
+import { imageLoad } from "../helpers/image";
+import { excerpt, replaceHtmlEntites, stripHtmlTags } from "../helpers/string";
+import { isUUID } from "../helpers/uuid";
 import SMButton from "./SMButton.vue";
 
 const props = defineProps({
@@ -59,7 +65,12 @@ const props = defineProps({
     image: {
         type: String,
         default: "",
-        required: true,
+        required: false,
+    },
+    icon: {
+        type: String,
+        default: "",
+        required: false,
     },
     to: {
         type: Object,
@@ -76,7 +87,7 @@ const props = defineProps({
     date: {
         type: String,
         default: "",
-        required: true,
+        required: false,
     },
     endDate: {
         type: String,
@@ -113,68 +124,103 @@ const props = defineProps({
         default: "primary",
         required: false,
     },
+    banner: {
+        type: String,
+        default: "",
+        required: false,
+    },
+    bannerType: {
+        type: String,
+        default: "primary",
+        required: false,
+    },
 });
 
-let imageUrl = ref(props.image);
-const panelDate = computed(() => {
+let styleObject = reactive({});
+let imageUrl = ref("");
+
+/**
+ * Return a human readable date based on props.date and props.endDate.
+ */
+const computedDate = computed(() => {
     let str = "";
 
-    if (
-        (props.endDate.length > 0 &&
-            props.date.substring(0, props.date.indexOf(" ")) !=
-                props.endDate.substring(0, props.endDate.indexOf(" "))) ||
-        props.showTime == false
-    ) {
-        str = format(new Date(props.date), "dd/MM/yyyy");
-        if (props.endDate.length > 0) {
-            str = str + " - " + format(new Date(props.endDate), "dd/MM/yyyy");
+    if (props.date.length > 0) {
+        if (
+            (props.endDate.length > 0 &&
+                props.date.substring(0, props.date.indexOf(" ")) !=
+                    props.endDate.substring(0, props.endDate.indexOf(" "))) ||
+            props.showTime == false
+        ) {
+            str = new SMDate(props.date, { format: "yMd" }).format(
+                "dd/MM/yyyy"
+            );
+            if (props.endDate.length > 0) {
+                str =
+                    str +
+                    " - " +
+                    new SMDate(props.endDate, { format: "yMd" }).format(
+                        "dd/MM/yyyy"
+                    );
+            }
+        } else {
+            str = new SMDate(props.endDate, { format: "yMd" }).format(
+                "dd/MM/yyyy @ h:mm aa"
+            );
         }
-    } else {
-        str = format(new Date(props.date), "dd/MM/yyyy @ h:mm aa");
     }
 
     return str;
 });
 
-const panelContent = computed(() => {
+/**
+ * Return the content string cleaned from HTML.
+ */
+const computedContent = computed(() => {
     return excerpt(replaceHtmlEntites(stripHtmlTags(props.content)), 200);
 });
 
-const hideImageLoader = computed(() => {
-    return (
-        imageUrl.value &&
-        imageUrl.value.length > 0 &&
-        isUUID(imageUrl.value) == false
-    );
-});
-
 onMounted(async () => {
-    if (imageUrl.value && imageUrl.value.length > 0 && isUUID(imageUrl.value)) {
-        try {
-            let result = await axios.get(`media/${props.image}`);
+    if (props.image && props.image.length > 0 && isUUID(props.image)) {
+        api.get({ url: "/media/{medium}", params: { medium: props.image } })
+            .then((result) => {
+                const data = result.data as MediaResponse;
 
-            if (result.data.medium) {
-                imageUrl.value = result.data.medium.url;
-            }
-        } catch (error) {
-            /* empty */
-        }
+                if (data && data.medium) {
+                    imageLoad(data.medium.url, (url) => {
+                        imageUrl.value = url;
+                    });
+                }
+            })
+            .catch(() => {
+                /* empty */
+            });
     }
 });
+
+watch(
+    () => imageUrl.value,
+    (value) => {
+        styleObject["backgroundImage"] = `url('${value}')`;
+    }
+);
 </script>
 
 <style lang="scss">
-.panel {
+.sm-panel {
     display: flex;
     flex-direction: column;
     border: 1px solid $border-color;
     border-radius: 12px;
+    overflow: hidden;
     box-shadow: 0 0 28px rgba(0, 0, 0, 0.05);
     max-width: 21rem;
     width: 100%;
     color: $font-color !important;
     margin-bottom: map-get($spacer, 5);
     transition: box-shadow 0.2s ease-in-out;
+    position: relative;
+    overflow: hidden;
 
     &:hover {
         color: $font-color;
@@ -182,7 +228,7 @@ onMounted(async () => {
         box-shadow: 0 0 14px rgba(0, 0, 0, 0.25);
     }
 
-    .panel-image {
+    .sm-panel-image {
         position: relative;
         display: flex;
         justify-content: center;
@@ -195,12 +241,12 @@ onMounted(async () => {
         border-top-right-radius: 12px;
         background-color: #eee;
 
-        .panel-image-loader {
+        .sm-panel-image-loader {
             font-size: 5rem;
             color: $secondary-color;
         }
 
-        .panel-image-date {
+        .sm-panel-image-date {
             background-color: #fff;
             padding: 0.75rem 1rem;
             text-align: center;
@@ -211,38 +257,39 @@ onMounted(async () => {
             box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
             text-align: center;
 
-            .panel-image-date-day {
+            .sm-panel-image-date-day {
                 font-weight: bold;
                 font-size: 130%;
             }
 
-            .panel-image-date-month {
+            .sm-panel-image-date-month {
                 text-transform: uppercase;
                 font-size: 80%;
             }
         }
     }
 
-    .panel-body {
+    .sm-panel-body {
         display: flex;
         flex-direction: column;
         flex: 1;
         padding: 0 map-get($spacer, 3) map-get($spacer, 3) map-get($spacer, 3);
+        background-color: #fff;
     }
 
-    .panel-title {
+    .sm-panel-title {
         margin-bottom: 1rem;
     }
 
-    .panel-date,
-    .panel-location {
+    .sm-panel-date,
+    .sm-panel-location {
         display: flex;
         flex-direction: row;
         align-items: top;
         font-size: 80%;
         margin-bottom: 0.4rem;
 
-        svg {
+        ion-icon {
             flex: 0 1 1rem;
             margin-right: map-get($spacer, 1);
             padding-top: 0.1rem;
@@ -257,16 +304,50 @@ onMounted(async () => {
         }
     }
 
-    .panel-content {
+    .sm-panel-content {
         margin-top: 1rem;
         line-height: 130%;
         flex: 1;
     }
 
-    .panel-button {
-        .button {
-            display: block;
-            margin-top: 1.5rem;
+    .sm-panel-button {
+        margin-top: map-get($spacer, 4);
+    }
+
+    .sm-panel-banner {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 65px;
+        right: -10px;
+        height: 20px;
+        width: 120px;
+        font-size: 70%;
+        text-transform: uppercase;
+        font-weight: 800;
+        color: #fff;
+        background-color: $primary-color;
+        transform-origin: 100%;
+        transform: rotateZ(45deg);
+
+        &.sm-panel-banner-success {
+            background-color: $success-color;
+        }
+
+        &.sm-panel-banner-danger {
+            background-color: $danger-color;
+            font-size: 60%;
+        }
+
+        &.sm-panel-banner-warning {
+            background-color: $warning-color-darker;
+            color: $font-color;
+            font-size: 60%;
+        }
+
+        &.sm-panel-banner-expired {
+            background-color: purple;
         }
     }
 }
diff --git a/resources/js/components/SMPanelList.vue b/resources/js/components/SMPanelList.vue
index 08b027e..9851782 100644
--- a/resources/js/components/SMPanelList.vue
+++ b/resources/js/components/SMPanelList.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="panel-list">
-        <div v-if="loading" class="panel-list-loading">
-            <font-awesome-icon icon="fa-solid fa-spinner" pulse />
+    <div class="sm-panel-list">
+        <div v-if="loading" class="sm-panel-list-loading">
+            <SMLoadingIcon />
         </div>
-        <div v-else-if="notFound" class="panel-list-not-found">
-            <font-awesome-icon icon="fa-regular fa-face-frown-open" />
+        <div v-else-if="notFound" class="sm-panel-list-not-found">
+            <ion-icon name="alert-circle-outline" />
             <p>{{ notFoundText }}</p>
         </div>
         <slot></slot>
@@ -12,6 +12,8 @@
 </template>
 
 <script setup lang="ts">
+import SMLoadingIcon from "./SMLoadingIcon.vue";
+
 defineProps({
     loading: {
         type: Boolean,
@@ -32,7 +34,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-.panel-list {
+.sm-panel-list {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -41,23 +43,20 @@ defineProps({
     width: 100%;
     margin: 0 auto;
 
-    .panel-list-loading {
+    .sm-panel-list-loading {
         display: flex;
         flex: 1;
         justify-content: center;
-
-        svg {
-            font-size: 500%;
-        }
     }
 
-    .panel-list-not-found {
+    .sm-panel-list-not-found {
         display: flex;
         flex-direction: column;
         flex: 1;
         justify-content: center;
+        align-items: center;
 
-        svg {
+        ion-icon {
             font-size: 300%;
         }
 
diff --git a/resources/js/components/SMProgress.vue b/resources/js/components/SMProgress.vue
new file mode 100644
index 0000000..19a9115
--- /dev/null
+++ b/resources/js/components/SMProgress.vue
@@ -0,0 +1,86 @@
+<template>
+    <div>
+        <div
+            class="sm-progress-container"
+            :style="{ opacity: `${progressStore.opacity || 0}` }">
+            <div
+                class="sm-progress"
+                :style="{
+                    width: `${(progressStore.status || 0) * 100}%`,
+                }"></div>
+        </div>
+        <div class="sm-spinner">
+            <div
+                class="sm-spinner-icon"
+                :style="{ opacity: `${progressStore.spinner || 0}` }"></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useProgressStore } from "../store/ProgressStore";
+
+const progressStore = useProgressStore();
+</script>
+
+<style lang="scss">
+.sm-progress-container {
+    position: fixed;
+    background-color: $border-color;
+    height: 2px;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 2000;
+    transition: opacity 0.2s ease-in-out;
+
+    .sm-progress {
+        background-color: $primary-color-dark;
+        width: 0%;
+        height: 100%;
+        transition: width 0.2s ease-in-out;
+        box-shadow: 0 0 10px $primary-color-dark, 0 0 4px $primary-color-dark;
+        opacity: 1;
+    }
+}
+
+.sm-spinner {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    opacity: 0.5;
+
+    .sm-spinner-icon {
+        width: 18px;
+        height: 18px;
+        box-sizing: border-box;
+
+        border: solid 2px transparent;
+        border-top-color: #29d;
+        border-left-color: #29d;
+        border-radius: 50%;
+
+        transition: opacity 0.2s ease-in-out;
+
+        -webkit-animation: sm-progress-spinner 500ms linear infinite;
+        animation: sm-progress-spinner 500ms linear infinite;
+    }
+}
+
+@-webkit-keyframes sm-progress-spinner {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+@keyframes sm-progress-spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
diff --git a/resources/js/components/SMRow.vue b/resources/js/components/SMRow.vue
index adebc08..5074fc8 100644
--- a/resources/js/components/SMRow.vue
+++ b/resources/js/components/SMRow.vue
@@ -1,6 +1,10 @@
 <template>
     <div
-        :class="['row', { 'row-break-lg': breakLarge }, { 'flex-fill': fill }]">
+        :class="[
+            'sm-row',
+            { 'row-break-lg': breakLarge },
+            { 'flex-fill': fill },
+        ]">
         <slot></slot>
     </div>
 </template>
@@ -21,7 +25,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-.row {
+.sm-row {
     display: flex;
     flex-direction: row;
     margin: 0 auto;
@@ -31,13 +35,13 @@ defineProps({
 }
 
 @media screen and (max-width: 992px) {
-    .row.row-break-lg {
+    .sm-row.row-break-lg {
         flex-direction: column;
     }
 }
 
 @media screen and (max-width: 768px) {
-    .row {
+    .sm-row {
         flex-direction: column;
     }
 }
diff --git a/resources/js/components/SMSelect.vue b/resources/js/components/SMSelect.vue
deleted file mode 100644
index b6fcf3c..0000000
--- a/resources/js/components/SMSelect.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-    <div :class="['form-group', { 'has-error': error }]">
-        <label v-if="label" :class="{ required: required }">{{ label }}</label>
-        <select
-            :value="modelValue"
-            @input="input"
-            @blur="handleBlur"
-            @keydown="handleBlur">
-            <option
-                v-for="(value, key) in options"
-                :key="key"
-                :value="key"
-                :selected="modelValue == value">
-                {{ value }}
-            </option>
-        </select>
-        <div class="form-group-error">{{ error }}</div>
-        <div v-if="slots.default" class="form-group-info">
-            <slot></slot>
-        </div>
-        <div v-if="help" class="form-group-help">
-            <font-awesome-icon v-if="helpIcon" :icon="helpIcon" />
-            {{ help }}
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { useSlots, onMounted, computed, watch } from "vue";
-
-const props = defineProps({
-    modelValue: {
-        type: String,
-        default: "",
-    },
-    options: {
-        type: Object,
-        default() {
-            return {};
-        },
-    },
-    label: {
-        type: String,
-        default: "",
-    },
-    required: {
-        type: Boolean,
-        default: false,
-    },
-    type: {
-        type: String,
-        default: "text",
-    },
-    error: {
-        type: String,
-        default: "",
-    },
-    help: {
-        type: String,
-        default: "",
-    },
-    helpIcon: {
-        type: String,
-        default: "",
-    },
-});
-
-const emits = defineEmits(["update:modelValue", "blur"]);
-const slots = useSlots();
-
-const input = (event) => {
-    emits("update:modelValue", event.target.value);
-};
-
-const handleBlur = (event) => {
-    if (event.keyCode == undefined || event.keyCode == 9) {
-        emits("blur", event);
-    }
-};
-
-const initialOptions = computed(() => {
-    return props.options;
-});
-
-watch(initialOptions, () => {
-    if (
-        props.modelValue.length > 0 &&
-        props.modelValue in Object.keys(props.options) == true
-    ) {
-        emits("update:modelValue", props.modelValue);
-    } else if (Object.keys(props.options).length > 0) {
-        emits("update:modelValue", Object.keys(props.options)[0]);
-    }
-});
-</script>
diff --git a/resources/js/components/SMTab.vue b/resources/js/components/SMTab.vue
index 477ee12..251dfc9 100644
--- a/resources/js/components/SMTab.vue
+++ b/resources/js/components/SMTab.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-show="label == selectedLabel" class="tab-content">
+    <div v-show="label == selectedLabel" class="sm-tab-content">
         <slot></slot>
     </div>
 </template>
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { inject } from "vue";
 
-const props = defineProps({
+defineProps({
     label: {
         type: String,
         required: true,
@@ -18,7 +18,7 @@ const selectedLabel = inject("selectedLabel");
 </script>
 
 <style lang="scss">
-.tab-content {
+.sm-tab-content {
     padding: map-get($spacer, 3);
     background-color: #fff;
     border: 1px solid $border-color;
diff --git a/resources/js/components/SMTabGroup.vue b/resources/js/components/SMTabGroup.vue
index b4d2556..e0111ed 100644
--- a/resources/js/components/SMTabGroup.vue
+++ b/resources/js/components/SMTabGroup.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="tab-group">
-        <ul class="tab-header">
+    <div class="sm-tab-group">
+        <ul class="sm-tab-header">
             <li
                 v-for="label in tabLabels"
                 :key="label"
-                :class="['tab-item', { selected: selectedLabel == label }]"
+                :class="['sm-tab-item', { selected: selectedLabel == label }]"
                 @click="selectedLabel = label">
                 {{ label }}
             </li>
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useSlots, provide } from "vue";
+import { provide, ref, useSlots } from "vue";
 
 const slots = useSlots();
 const tabLabels = ref(slots.default().map((tab) => tab.props.label));
@@ -24,17 +24,17 @@ provide("selectedLabel", selectedLabel);
 </script>
 
 <style lang="scss">
-.tab-group {
+.sm-tab-group {
     margin-bottom: map-get($spacer, 4);
 
-    .tab-header {
+    .sm-tab-header {
         // border-bottom: 1px solid $border-color;
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
 
-    .tab-item {
+    .sm-tab-item {
         display: inline-block;
         padding: map-get($spacer, 2) map-get($spacer, 3);
         border: 1px solid transparent;
diff --git a/resources/js/components/SMToast.vue b/resources/js/components/SMToast.vue
new file mode 100644
index 0000000..4d49ddb
--- /dev/null
+++ b/resources/js/components/SMToast.vue
@@ -0,0 +1,134 @@
+<template>
+    <div ref="toast" :class="['sm-toast', type]" :style="styles">
+        <div class="sm-toast-inner">
+            <h3 v-if="title && title.length > 0">
+                {{ title }}
+            </h3>
+            <p>{{ content }}</p>
+            <ion-icon name="close-outline" @click="handleClickClose" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useToastStore } from "../store/ToastStore";
+
+const props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    title: {
+        type: String,
+        default: "",
+        required: false,
+    },
+    type: {
+        type: String,
+        default: "primary",
+        required: false,
+    },
+    content: {
+        type: String,
+        required: true,
+    },
+});
+
+const toastStore = useToastStore();
+const toast = ref(null);
+let height = 40;
+let hideTimeoutID: number | null = null;
+
+const styles = ref({
+    opacity: 0,
+    marginTop: "40px",
+});
+
+const handleClickClose = () => {
+    if (hideTimeoutID != null) {
+        window.clearTimeout(hideTimeoutID);
+        hideTimeoutID = null;
+    }
+    removeToast();
+};
+
+const removeToast = () => {
+    styles.value.opacity = 0;
+    styles.value.marginTop = `-${height}px`;
+    window.setTimeout(() => {
+        toastStore.clearToast(props.id);
+    }, 500);
+};
+
+onMounted(() => {
+    window.setTimeout(() => {
+        styles.value.opacity = 1;
+        styles.value.marginTop = 0;
+
+        if (toast.value != null) {
+            const styles = window.getComputedStyle(toast.value);
+            const marginBottom = parseFloat(styles.marginBottom);
+            height = toast.value.offsetHeight + parseFloat(marginBottom) || 0;
+        }
+
+        hideTimeoutID = window.setTimeout(() => {
+            hideTimeoutID = null;
+            removeToast();
+        }, 8000);
+    }, 200);
+});
+</script>
+
+<style lang="scss">
+.sm-toast {
+    position: relative;
+    font-size: 70%;
+    background-color: #fff;
+    padding: map-get($spacer, 2) map-get($spacer, 2) map-get($spacer, 2)
+        map-get($spacer, 2);
+    border-radius: 12px;
+    border: 1px solid $border-color;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+    margin-bottom: 1rem;
+    transition: opacity 0.2s ease-in, margin 0.2s ease-in;
+
+    .sm-toast-inner {
+        border-left: 6px solid $primary-color;
+        padding: map-get($spacer, 1) map-get($spacer, 4) map-get($spacer, 1)
+            map-get($spacer, 2);
+        max-width: 250px;
+    }
+
+    h3 {
+        margin-top: 0;
+    }
+
+    p {
+        margin-bottom: 0;
+        line-height: 1rem;
+    }
+
+    ion-icon {
+        font-size: 1.25rem;
+        position: absolute;
+        top: 15px;
+        right: 15px;
+        color: $font-color;
+        cursor: pointer;
+        transition: color 0.2s ease-in-out;
+
+        &:hover {
+            color: $danger-color;
+        }
+    }
+
+    &.success .sm-toast-inner {
+        border-left-color: $success-color;
+    }
+
+    &.danger .sm-toast-inner {
+        border-left-color: $danger-color;
+    }
+}
+</style>
diff --git a/resources/js/components/SMToastList.vue b/resources/js/components/SMToastList.vue
new file mode 100644
index 0000000..4d85b80
--- /dev/null
+++ b/resources/js/components/SMToastList.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="sm-toast-container">
+        <SMToast
+            v-for="toast of toastStore.toasts"
+            :id="toast.id"
+            :key="toast.id"
+            :type="toast.type"
+            :title="toast.title"
+            :content="toast.content" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useToastStore } from "../store/ToastStore";
+import SMToast from "./SMToast.vue";
+
+const toastStore = useToastStore();
+</script>
+
+<style lang="scss">
+.sm-toast-container {
+    position: fixed;
+    height: 2px;
+    top: 3.5rem;
+    right: 0.75rem;
+    height: 100%;
+    z-index: 3000;
+    padding: 10px;
+    overflow: hidden;
+}
+</style>
diff --git a/resources/js/components/SMToolbar.vue b/resources/js/components/SMToolbar.vue
index 0aa51b5..1171288 100644
--- a/resources/js/components/SMToolbar.vue
+++ b/resources/js/components/SMToolbar.vue
@@ -1,84 +1,68 @@
 <template>
-    <div class="toolbar">
-        <div class="toolbar-column toolbar-column-left">
+    <div class="sm-toolbar">
+        <div v-if="slots.left" class="sm-toolbar-column sm-toolbar-column-left">
             <slot name="left"></slot>
         </div>
-        <div class="toolbar-column toolbar-column-right">
+        <div v-if="slots.default" class="sm-toolbar-column">
+            <slot></slot>
+        </div>
+        <div
+            v-if="slots.right"
+            class="sm-toolbar-column sm-toolbar-column-right">
             <slot name="right"></slot>
         </div>
     </div>
 </template>
 
+<script setup lang="ts">
+import { useSlots } from "vue";
+
+const slots = useSlots();
+</script>
+
 <style lang="scss">
-.toolbar {
+.sm-toolbar {
     display: flex;
     justify-content: space-between;
     margin-bottom: map-get($spacer, 2);
 
-    .toolbar-column {
+    .sm-toolbar-column {
         display: flex;
+        flex: 1;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
 
-        &.toolbar-column-left {
+        &.sm-toolbar-column-left {
             justify-content: flex-start;
         }
 
-        input {
-            margin-bottom: 0;
+        & > * {
+            margin: 0 map-get($spacer, 1);
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
         }
 
-        // &.form-footer-column-left, &.form-footer-column-right {
-        //             a, button {
-        //                 margin-left: map-get($spacer, 1);
-        //                 margin-right: map-get($spacer, 1);
-
-        //                 &:first-of-type {
-        //                     margin-left: 0;
-        //                 }
-
-        //                 &:last-of-type {
-        //                     margin-right: 0;
-        //                 }
-        //             }
-        //         }
-
-        &.toolbar-column-right {
+        &.sm-toolbar-column-right {
             justify-content: flex-end;
         }
-        //     }
-        // }
+    }
+}
 
-        // @media screen and (max-width: 768px) {
-        //     .form-footer {
-        //         flex-direction: column-reverse;
+@media screen and (max-width: 768px) {
+    .sm-toolbar {
+        .sm-toolbar-column {
+            flex-direction: column;
 
-        //         .form-footer-column {
-        //             &.form-footer-column-left, &.form-footer-column-right {
-        //                 display: flex;
-        //                 flex-direction: column-reverse;
-        //                 justify-content: center;
-
-        //                 & > * {
-        //                     display: block;
-        //                     width: 100%;
-        //                     text-align: center;
-
-        //                     margin-top: map-get($spacer, 1);
-        //                     margin-bottom: map-get($spacer, 1);
-        //                     margin-left: 0 !important;
-        //                     margin-right: 0  !important;
-        //                 }
-        //             }
-
-        //             &.form-footer-column-left {
-        //                 margin-bottom: -#{map-get($spacer, 1) / 2};
-        //             }
-
-        //             &.form-footer-column-right {
-        //                 margin-top: -#{map-get($spacer, 1) / 2};
-        //             }
-        //         }
+            & > * {
+                margin: 0;
+            }
+        }
     }
 }
 </style>
diff --git a/resources/js/components/dialogs/SMDialogChangePassword.vue b/resources/js/components/dialogs/SMDialogChangePassword.vue
index d7d9982..8b63412 100644
--- a/resources/js/components/dialogs/SMDialogChangePassword.vue
+++ b/resources/js/components/dialogs/SMDialogChangePassword.vue
@@ -1,118 +1,115 @@
 <template>
     <SMModal>
-        <SMDialog :loading="formLoading">
+        <SMDialog :loading="dialogLoading">
             <h1>Change Password</h1>
-            <SMMessage
-                v-if="isSuccessful"
-                type="success"
-                message="Your password has been changed successfully" />
-            <SMInput
-                v-if="!isSuccessful"
-                v-model="formData.password.value"
-                type="password"
-                label="New Password"
-                required
-                :error="formData.password.error"
-                @blur="fieldValidate(formData.password)" />
-            <SMFormFooter>
-                <template v-if="!isSuccessful" #left>
-                    <SMButton
-                        type="secondary"
-                        label="Cancel"
-                        @click="handleCancel()" />
-                </template>
-                <template #right>
-                    <SMButton
-                        type="primary"
-                        :label="btnConfirm"
-                        @click="handleConfirm()" />
-                </template>
-            </SMFormFooter>
+            <p class="text-center">Enter your new password below</p>
+            <SMForm :model-value="form" @submit="handleSubmit">
+                <SMInput
+                    control="password"
+                    type="password"
+                    label="New Password" />
+                <SMFormFooter>
+                    <template #left>
+                        <SMButton
+                            type="secondary"
+                            label="Cancel"
+                            @click="handleClickCancel" />
+                    </template>
+                    <template #right>
+                        <SMButton type="submit" label="Update" />
+                    </template>
+                </SMFormFooter>
+            </SMForm>
         </SMDialog>
     </SMModal>
 </template>
 
 <script setup lang="ts">
-import axios from "axios";
-import { useUserStore } from "../../store/UserStore";
-import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, reactive, ref } from "vue";
 import { closeDialog } from "vue3-promise-dialog";
-import SMModal from "../SMModal.vue";
-import SMDialog from "../SMDialog.vue";
-import SMMessage from "../SMMessage.vue";
+import { api } from "../../helpers/api";
+import { Form, FormControl, FormObject } from "../../helpers/form";
+import { And, Password, Required } from "../../helpers/validate";
+import { useApplicationStore } from "../../store/ApplicationStore";
+import { useToastStore } from "../../store/ToastStore";
+import { useUserStore } from "../../store/UserStore";
 import SMButton from "../SMButton.vue";
+import SMDialog from "../SMDialog.vue";
+import SMForm from "../SMForm.vue";
 import SMFormFooter from "../SMFormFooter.vue";
 import SMInput from "../SMInput.vue";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-} from "../../helpers/validation";
+import SMModal from "../SMModal.vue";
 
-const formData = reactive({
-    password: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A password is needed",
-            min: 8,
-            min_message: "Your password needs to be at least %d characters",
-            password: "special",
-        },
-    },
-});
+const form: FormObject = reactive(
+    Form({
+        password: FormControl("", And([Required(), Password()])),
+    })
+);
 
+const applicationStore = useApplicationStore();
 const userStore = useUserStore();
-const formLoading = ref(false);
-const isSuccessful = ref(false);
+const dialogLoading = ref(false);
 
-const btnConfirm = computed(() => {
-    return isSuccessful.value ? "Close" : "Update";
-});
-
-const handleCancel = () => {
+/**
+ * User clicks cancel button to close dialog
+ */
+const handleClickCancel = () => {
     closeDialog(false);
 };
 
-const handleConfirm = async () => {
-    if (isSuccessful.value == true) {
-        closeDialog(true);
-    } else {
-        if (isValidated(formData)) {
-            try {
-                formLoading.value = true;
-                await axios.put(`users/${userStore.id}`, {
-                    password: formData.password.value,
-                });
+/**
+ * User clicks form submit button
+ */
+const handleSubmit = async () => {
+    dialogLoading.value = true;
 
-                isSuccessful.value = true;
-            } catch (err) {
-                formData.password.error =
-                    err.response?.data?.message ||
-                    "An unexpected error occurred";
-            }
-        }
-    }
+    api.put({
+        url: "/users/{id}",
+        params: {
+            id: userStore.id,
+        },
+        body: {
+            password: form.controls.password.value,
+        },
+    })
+        .then(() => {
+            const toastStore = useToastStore();
 
-    formLoading.value = false;
+            toastStore.addToast({
+                title: "Password Reset",
+                content: "Your password has been reset",
+                type: "success",
+            });
+            closeDialog(false);
+        })
+        .catch((error) => {
+            form.apiErrors(error);
+        })
+        .finally(() => {
+            dialogLoading.value = false;
+        });
 };
 
-const eventKeyUp = (event: KeyboardEvent) => {
+/**
+ * Handle a keyboard event in this component.
+ *
+ * @param {KeyboardEvent} event The keyboard event.
+ * @returns {boolean} If the event was handled.
+ */
+const eventKeyUp = (event: KeyboardEvent): boolean => {
     if (event.key === "Escape") {
-        handleCancel();
-    } else if (event.key === "Enter") {
-        handleConfirm();
+        handleClickCancel();
+        return true;
     }
+
+    return false;
 };
 
 onMounted(() => {
-    document.addEventListener("keyup", eventKeyUp);
+    applicationStore.addKeyUpListener(eventKeyUp);
 });
 
 onUnmounted(() => {
-    document.removeEventListener("keyup", eventKeyUp);
+    applicationStore.removeKeyUpListener(eventKeyUp);
 });
-
-useValidation(formData);
 </script>
diff --git a/resources/js/components/dialogs/SMDialogConfirm.vue b/resources/js/components/dialogs/SMDialogConfirm.vue
index 7cac47a..c81e243 100644
--- a/resources/js/components/dialogs/SMDialogConfirm.vue
+++ b/resources/js/components/dialogs/SMDialogConfirm.vue
@@ -1,32 +1,35 @@
 <template>
-    <div class="modal">
-        <div class="dialog dialog-narrow">
+    <SMModal>
+        <SMDialog>
             <h1>{{ props.title }}</h1>
-            <p v-html="sanitizedHtml"></p>
+            <p v-html="computedSanitizedText"></p>
             <SMFormFooter>
                 <template #left>
                     <SMButton
                         :type="props.cancel.type"
                         :label="props.cancel.label"
-                        @click.stop="handleCancel()" />
+                        @click="handleClickCancel()" />
                 </template>
                 <template #right>
                     <SMButton
                         :type="props.confirm.type"
                         :label="props.confirm.label"
-                        @click.stop="handleConfirm()" />
+                        @click="handleClickConfirm()" />
                 </template>
             </SMFormFooter>
-        </div>
-    </div>
+        </SMDialog>
+    </SMModal>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from "vue";
+import DOMPurify from "dompurify";
+import { computed, onMounted, onUnmounted } from "vue";
 import { closeDialog } from "vue3-promise-dialog";
+import { useApplicationStore } from "../../store/ApplicationStore";
 import SMButton from "../SMButton.vue";
+import SMDialog from "../SMDialog.vue";
 import SMFormFooter from "../SMFormFooter.vue";
-// import sanitizeHtml from "sanitize-html";
+import SMModal from "../SMModal.vue";
 
 const props = defineProps({
     title: {
@@ -57,30 +60,52 @@ const props = defineProps({
     },
 });
 
-const handleCancel = () => {
+const applicationStore = useApplicationStore();
+
+/**
+ * Handle the user clicking the cancel button.
+ */
+const handleClickCancel = () => {
     closeDialog(false);
 };
 
-const handleConfirm = () => {
+/**
+ * Handle the user clicking the confirm button.
+ */
+const handleClickConfirm = () => {
     closeDialog(true);
 };
 
-const eventKeyUp = (event: KeyboardEvent) => {
+/**
+ * Sanitize the text property from XSS attacks.
+ */
+const computedSanitizedText = computed(() => {
+    return DOMPurify.sanitize(props.text);
+});
+
+/**
+ * Handle a keyboard event in this component.
+ *
+ * @param {KeyboardEvent} event The keyboard event.
+ * @returns {boolean} If the event was handled.
+ */
+const eventKeyUp = (event: KeyboardEvent): boolean => {
     if (event.key === "Escape") {
-        handleCancel();
+        handleClickCancel();
+        return true;
     } else if (event.key === "Enter") {
-        handleConfirm();
+        handleClickConfirm();
+        return true;
     }
+
+    return false;
 };
 
 onMounted(() => {
-    document.addEventListener("keyup", eventKeyUp);
+    applicationStore.addKeyUpListener(eventKeyUp);
 });
 
 onUnmounted(() => {
-    document.removeEventListener("keyup", eventKeyUp);
+    applicationStore.removeKeyUpListener(eventKeyUp);
 });
-
-// const sanitizedHtml = sanitizeHtml(props.text);
-const sanitizedHtml = props.text;
 </script>
diff --git a/resources/js/components/dialogs/SMDialogMedia.vue b/resources/js/components/dialogs/SMDialogMedia.vue
index 74fdaf9..0c1532a 100644
--- a/resources/js/components/dialogs/SMDialogMedia.vue
+++ b/resources/js/components/dialogs/SMDialogMedia.vue
@@ -1,46 +1,71 @@
 <template>
     <SMModal>
         <SMDialog
-            :loading="formLoading"
+            :loading="dialogLoading"
             full
-            :loading_message="formLoadingMessage">
+            :loading-message="dialogLoadingMessage"
+            class="sm-dialog-media">
             <h1>Insert Media</h1>
             <SMMessage
-                v-if="formMessage.message"
-                :icon="formMessage.icon"
-                :type="formMessage.type"
-                :message="formMessage.message" />
-            <div v-if="mediaItems.length > 0" class="media-browser">
-                <ul class="media-browser-list">
-                    <li
-                        v-for="item in mediaItems"
-                        :key="item.id"
-                        :class="[{ selected: item == selected }]"
-                        @click="handleSelection(item)"
-                        @dblclick="handlePickSelection(item)">
-                        <img :src="item.url" :title="item.title" />
-                    </li>
-                </ul>
-                <div class="media-browser-page-info">
-                    <span class="media-browser-page-number"
-                        >Page {{ page }} of {{ totalPages }}</span
-                    >
-                    <span class="media-browser-page-changer">
-                        <font-awesome-icon
-                            :class="[
-                                'changer-button',
-                                { disabled: prevDisabled },
-                            ]"
-                            icon="fa-solid fa-angle-left"
-                            @click="handlePrev" />
-                        <font-awesome-icon
-                            :class="[
-                                'changer-button',
-                                { disabled: nextDisabled },
-                            ]"
-                            icon="fa-solid fa-angle-right"
-                            @click="handleNext" />
-                    </span>
+                v-if="formMessage"
+                icon="alert-circle-outline"
+                type="error"
+                :message="formMessage"
+                class="d-flex" />
+            <div class="media-browser" :class="mediaBrowserClasses">
+                <div class="media-browser-content">
+                    <SMLoadingIcon v-if="mediaLoading" />
+                    <div
+                        v-if="!mediaLoading && mediaItems.length == 0"
+                        class="media-none">
+                        <ion-icon name="sad-outline"></ion-icon>
+                        <p>No media found</p>
+                    </div>
+                    <ul v-if="!mediaLoading && mediaItems.length > 0">
+                        <li
+                            v-for="item in mediaItems"
+                            :key="item.id"
+                            :class="[{ selected: item.id == selected }]"
+                            @click="handleClickItem(item.id)"
+                            @dblclick="handleDblClickItem(item.id)">
+                            <div
+                                :style="{
+                                    backgroundImage: `url('${getFilePreview(
+                                        item.url
+                                    )}')`,
+                                }"
+                                class="media-image"></div>
+                            <span class="media-title">{{ item.title }}</span>
+                            <span class="media-size">{{
+                                bytesReadable(item.size)
+                            }}</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="media-browser-toolbar">
+                    <div class="layout-buttons">
+                        <ion-icon
+                            name="grid-outline"
+                            class="layout-button-grid"
+                            @click="handleClickGridLayout"></ion-icon>
+                        <ion-icon
+                            name="list-outline"
+                            class="layout-button-list"
+                            @click="handleClickListLayout"></ion-icon>
+                    </div>
+                    <div class="pagination-buttons">
+                        <ion-icon
+                            name="chevron-back-outline"
+                            :class="[{ disabled: computedDisablePrevButton }]"
+                            @click="handleClickPrev" />
+                        <span class="pagination-info">{{
+                            computedPaginationInfo
+                        }}</span>
+                        <ion-icon
+                            name="chevron-forward-outline"
+                            :class="[{ disabled: computedDisableNextButton }]"
+                            @click="handleClickNext" />
+                    </div>
                 </div>
             </div>
             <SMFormFooter>
@@ -48,198 +73,407 @@
                     <SMButton
                         type="button"
                         label="Cancel"
-                        @click="handleCancel" />
+                        @click="handleClickCancel" />
                 </template>
                 <template #right>
                     <SMButton
+                        v-if="props.allowUpload"
                         type="button"
                         label="Upload"
-                        @click="handleAskUpload" />
+                        @click="handleClickUpload" />
                     <SMButton
                         type="primary"
                         label="Insert"
                         :disabled="selected.length == 0"
-                        @click="handleConfirm" />
+                        @click="handleClickInsert" />
                 </template>
             </SMFormFooter>
             <input
+                v-if="props.allowUpload"
                 id="file"
-                ref="uploader"
+                ref="refUploadInput"
                 type="file"
                 style="display: none"
-                @change="handleUpload" />
+                :accept="computedAccepts"
+                @change="handleChangeUpload" />
         </SMDialog>
     </SMModal>
 </template>
 
 <script setup lang="ts">
-import axios from "axios";
-import { computed, watch, ref, reactive, onMounted, onUnmounted } from "vue";
+import { computed, onMounted, onUnmounted, ref, Ref, watch } from "vue";
 import { closeDialog } from "vue3-promise-dialog";
+import { api } from "../../helpers/api";
+import { Media, MediaCollection, MediaResponse } from "../../helpers/api.types";
+import { bytesReadable } from "../../helpers/types";
+import { getFilePreview } from "../../helpers/utils";
+import { useApplicationStore } from "../../store/ApplicationStore";
 import SMButton from "../SMButton.vue";
-import SMFormFooter from "../SMFormFooter.vue";
 import SMDialog from "../SMDialog.vue";
+import SMFormFooter from "../SMFormFooter.vue";
+import SMLoadingIcon from "../SMLoadingIcon.vue";
 import SMMessage from "../SMMessage.vue";
 import SMModal from "../SMModal.vue";
-import { toParamString } from "../../helpers/common";
 
-const uploader = ref(null);
-const formLoading = ref(false);
-const formLoadingMessage = ref("");
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
+const props = defineProps({
+    mime: {
+        type: String,
+        default: "image/",
+        required: false,
+    },
+    accepts: {
+        type: String,
+        default: "image/*",
+        required: false,
+    },
+    allowUpload: {
+        type: Boolean,
+        default: true,
+        required: false,
+    },
 });
 
+/**
+ * Reference to the File Upload Input element.
+ */
+const refUploadInput = ref<HTMLInputElement | null>(null);
+
+/**
+ * Is the dialog loading/busy
+ */
+const dialogLoading = ref(false);
+
+/**
+ * The dialog loading message to display
+ */
+const dialogLoadingMessage = ref("");
+
+/**
+ * The form user message to display
+ */
+const formMessage = ref("");
+
+/**
+ * Is the media loading/busy
+ */
+const mediaLoading = ref(true);
+
+/**
+ * Classes to apply to the media browser
+ */
+const mediaBrowserClasses = ref(["media-browser-grid"]);
+
+/**
+ * Current page.
+ */
 const page = ref(1);
+
+/**
+ * Total media items expressed by API.
+ */
 const totalItems = ref(0);
-const mediaItems = ref([]);
+
+/**
+ * List of current media items.
+ */
+const mediaItems: Ref<Media[]> = ref([]);
+
+/**
+ * Selected media item id.
+ */
 const selected = ref("");
+
+/**
+ * How many media items are we showing per page.
+ */
 const perPage = ref(12);
 
-const handleCancel = () => {
+const applicationStore = useApplicationStore();
+
+/**
+ * Returns the pagination info
+ */
+const computedPaginationInfo = computed(() => {
+    if (totalItems.value == 0) {
+        return "0 - 0 of 0";
+    }
+
+    const start = (page.value - 1) * perPage.value + 1;
+    const end = start + perPage.value - 1;
+
+    return `${start} - ${end} of ${totalItems.value}`;
+});
+
+/**
+ * Returns the file types accepted.
+ */
+const computedAccepts = computed(() => {
+    if (props.accepts.length > 0) {
+        return props.accepts;
+    }
+
+    if (props.mime.endsWith("/")) {
+        return `${props.mime}*`;
+    }
+
+    return props.mime;
+});
+
+/**
+ * Return the total number of pages.
+ */
+const computedTotalPages = computed(() => {
+    return Math.ceil(totalItems.value / perPage.value);
+});
+
+/**
+ * Return if the previous button should be disabled.
+ */
+const computedDisablePrevButton = computed(() => {
+    return page.value <= 1;
+});
+
+/**
+ * Return if the next button should be disabled.
+ */
+const computedDisableNextButton = computed(() => {
+    return page.value >= computedTotalPages.value;
+});
+
+/**
+ * Get the media item by id.
+ *
+ * @param {string} item_id The media item id.
+ * @returns {Media | null} The media object or null.
+ */
+const getMediaItem = (item_id: string): Media | null => {
+    let found: Media | null = null;
+
+    mediaItems.value.every((item) => {
+        if (item.id == item_id) {
+            found = item;
+            return false;
+        }
+
+        return true;
+    });
+
+    return found;
+};
+
+/**
+ * Handle user clicking the cancel/close button.
+ */
+const handleClickCancel = () => {
     closeDialog(false);
 };
 
-const handleConfirm = () => {
+/**
+ * Handle user clicking the insert button.
+ */
+const handleClickInsert = () => {
     if (selected.value !== "") {
-        closeDialog(selected.value);
-    } else {
-        closeDialog(false);
-    }
-};
-
-const handleSelection = (item) => {
-    selected.value = item;
-};
-
-const handlePickSelection = (item) => {
-    closeDialog(item);
-};
-
-const handleLoad = async () => {
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
-    selected.value = "";
-
-    try {
-        let params = {
-            page: 0,
-            limit: 0,
-            // fields: "",
-        };
-        params.page = page.value;
-        params.limit = perPage.value;
-        // params.fields = "url";
-
-        let res = await axios.get(`media${toParamString(params)}`);
-
-        totalItems.value = res.data.total;
-        mediaItems.value = res.data.media;
-    } catch (error) {
-        if (error.response.status == 404) {
-            formMessage.type = "primary";
-            formMessage.icon = "fa-regular fa-folder-open";
-            formMessage.message = "No media items found";
-        } else {
-            formMessage.message =
-                error.response?.data?.message || "An unexpected error occurred";
+        const mediaItem = getMediaItem(selected.value);
+        if (mediaItem != null) {
+            closeDialog(mediaItem);
+            return;
         }
     }
+
+    closeDialog(false);
 };
 
-const handleAskUpload = () => {
-    uploader.value.click();
+/**
+ * Handle user clicking a media item (selecting).
+ *
+ * @param {string} item_id The media id.
+ */
+const handleClickItem = (item_id: string): void => {
+    selected.value = item_id;
 };
 
-const handleUpload = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
-
-    try {
-        let submitFormData = new FormData();
-        if (uploader.value.files[0] instanceof File) {
-            submitFormData.append("file", uploader.value.files[0]);
-
-            let res = await axios.post("media", submitFormData, {
-                headers: {
-                    "Content-Type": "multipart/form-data",
-                },
-                onUploadProgress: (progressEvent) =>
-                    (formLoadingMessage.value = `Uploading Files ${Math.floor(
-                        (progressEvent.loaded / progressEvent.total) * 100
-                    )}%`),
-            });
-
-            if (res.data.medium) {
-                closeDialog(res.data.medium);
-            } else {
-                formMessage.message =
-                    "An unexpected response was received from the server";
-            }
-        } else {
-            formMessage.message = "No file was selected to upload";
-        }
-    } catch (err) {
-        console.log(err);
-        formMessage.message =
-            err.response?.data?.message || "An unexpected error occurred";
+/**
+ * Handle user double clicking a media item.
+ *
+ * @param item_id The media id.
+ */
+const handleDblClickItem = (item_id: string): void => {
+    const mediaItem = getMediaItem(item_id);
+    if (mediaItem != null) {
+        closeDialog(mediaItem);
+        return;
     }
 
-    formLoading.value = false;
+    closeDialog(false);
 };
 
-const handlePrev = ($event) => {
+/**
+ * Handle Grid layout request click
+ */
+const handleClickGridLayout = () => {
+    mediaBrowserClasses.value = ["media-browser-grid"];
+};
+
+/**
+ * Handle List layout request click
+ */
+const handleClickListLayout = () => {
+    mediaBrowserClasses.value = ["media-browser-list"];
+};
+
+/**
+ * Handle click on previous button
+ *
+ * @param {MouseEvent} $event The mouse event.
+ */
+const handleClickPrev = ($event: MouseEvent): void => {
     if (
-        $event.target.classList.contains("disabled") == false &&
+        $event.target &&
+        ($event.target as HTMLElement).classList.contains("disabled") ==
+            false &&
         page.value > 1
     ) {
         page.value--;
     }
 };
 
-const handleNext = ($event) => {
+/**
+ * Handle click on next button
+ *
+ * @param {MouseEvent} $event The mouse event.
+ */
+const handleClickNext = ($event: MouseEvent): void => {
     if (
-        $event.target.classList.contains("disabled") == false &&
-        page.value < totalPages.value
+        $event.target &&
+        ($event.target as HTMLElement).classList.contains("disabled") ==
+            false &&
+        page.value < computedTotalPages.value
     ) {
         page.value++;
     }
 };
 
-const eventKeyUp = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-        handleCancel();
-    } else if (event.key === "Enter") {
-        handleConfirm();
+/**
+ * When the user clicks the upload button
+ */
+const handleClickUpload = () => {
+    if (refUploadInput.value != null) {
+        refUploadInput.value.click();
     }
 };
 
+/**
+ * Upload the file to the server.
+ */
+const handleChangeUpload = async () => {
+    formMessage.value = "";
+
+    if (refUploadInput.value != null && refUploadInput.value.files != null) {
+        const firstFile: File | undefined = refUploadInput.value.files[0];
+        if (firstFile != null) {
+            let submitFormData = new FormData();
+            submitFormData.append("file", firstFile);
+
+            dialogLoading.value = true;
+            dialogLoadingMessage.value = "Uploading file...";
+
+            api.post({
+                url: "/media",
+                body: submitFormData,
+                headers: {
+                    "Content-Type": "multipart/form-data",
+                },
+                progress: (progressData) =>
+                    (dialogLoadingMessage.value = `Uploading Files ${Math.floor(
+                        (progressData.loaded / progressData.total) * 100
+                    )}%`),
+            })
+                .then((result) => {
+                    if (result.data) {
+                        const data = result.data as MediaResponse;
+
+                        closeDialog(data.medium);
+                    } else {
+                        formMessage.value =
+                            "An unexpected response was received from the server";
+                    }
+                })
+                .catch((error) => {
+                    formMessage.value =
+                        error.response?.data?.message ||
+                        "An unexpected error occurred";
+                })
+                .finally(() => {
+                    dialogLoading.value = false;
+                });
+        } else {
+            formMessage.value = "No file was selected to upload";
+        }
+    } else {
+        formMessage.value = "No file was selected to upload";
+    }
+};
+
+/**
+ * Load the data of the dialog
+ */
+const handleLoad = async () => {
+    mediaLoading.value = true;
+
+    api.get({
+        url: "/media",
+        params: {
+            page: page.value,
+            limit: perPage.value,
+        },
+    })
+        .then((result) => {
+            if (result.data) {
+                const data = result.data as MediaCollection;
+
+                totalItems.value = data.total;
+                mediaItems.value = data.media;
+            }
+        })
+        .catch((error) => {
+            formMessage.value =
+                error?.data?.message || "An unexpected error occurred";
+        })
+        .finally(() => {
+            mediaLoading.value = false;
+        });
+};
+
+/**
+ * Handle a keyboard event in this component.
+ *
+ * @param {KeyboardEvent} event The keyboard event.
+ * @returns {boolean} If the event was handled.
+ */
+const eventKeyUp = (event: KeyboardEvent): boolean => {
+    if (event.key === "Escape") {
+        handleClickCancel();
+        return true;
+    } else if (event.key === "Enter") {
+        if (selected.value.length > 0) {
+            handleClickInsert();
+        }
+
+        return true;
+    }
+
+    return false;
+};
+
 onMounted(() => {
-    document.addEventListener("keyup", eventKeyUp);
+    applicationStore.addKeyUpListener(eventKeyUp);
 });
 
 onUnmounted(() => {
-    document.removeEventListener("keyup", eventKeyUp);
+    applicationStore.removeKeyUpListener(eventKeyUp);
 });
 
-const totalPages = computed(() => {
-    return Math.ceil(totalItems.value / perPage.value);
-});
-
-const prevDisabled = computed(() => {
-    return page.value <= 1;
-});
-
-const nextDisabled = computed(() => {
-    return page.value >= totalPages.value;
-});
-
-watch(page, (value) => {
+watch(page, () => {
     handleLoad();
 });
 
@@ -247,60 +481,196 @@ handleLoad();
 </script>
 
 <style lang="scss">
-.media-browser-list {
-    border: 1px solid $border-color;
-    background-color: #fff;
-    overflow: auto;
-    max-height: 40vh;
-    display: flex;
-    list-style-type: none;
-    margin: 0 0 1rem 0;
-    padding: map-get($spacer, 3);
-    justify-content: center;
-    gap: 0.3rem;
-    flex-wrap: wrap;
-
-    li {
+.sm-dialog-media {
+    .media-browser {
         display: flex;
-        height: 7.5rem;
-        width: 13rem;
-        border: 3px solid transparent;
-        padding: 1px;
+        flex-direction: column;
 
-        &.selected {
-            border-color: $primary-color-darker;
+        .media-browser-content {
+            display: flex;
+            height: 40vh;
+            border: 1px solid $border-color;
+            background-color: #fff;
+            justify-content: center;
+            align-items: center;
+            margin: 0 0 1rem 0;
+
+            .media-none {
+                font-size: 1.5rem;
+                text-align: center;
+
+                ion-icon {
+                    font-size: 3rem;
+                    margin-bottom: 0.5rem;
+                }
+            }
+
+            ul {
+                display: block;
+                list-style-type: none;
+                overflow: auto;
+                max-height: 40vh;
+                height: 100%;
+                width: 100%;
+                gap: 1rem;
+                justify-content: center;
+                padding: map-get($spacer, 3);
+
+                li {
+                    display: flex;
+                    align-items: center;
+                    border: 3px solid transparent;
+                    box-sizing: content-box;
+                    padding: 2px;
+
+                    &.selected,
+                    &:hover {
+                        border-color: $primary-color-dark;
+                    }
+
+                    .media-image {
+                        background-size: contain;
+                        background-position: center;
+                        background-repeat: no-repeat;
+                    }
+                }
+            }
         }
 
-        img {
-            width: 100%;
-            height: 100%;
-        }
-    }
-}
+        .media-browser-toolbar {
+            display: flex;
+            margin-bottom: map-get($spacer, 3);
 
-.media-browser-page-info {
-    margin-bottom: 1rem;
-    display: flex;
-    justify-content: flex-end;
+            .layout-buttons,
+            .pagination-buttons {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
 
-    .media-browser-page-changer {
-        margin-left: 1rem;
-    }
+            .layout-buttons {
+                ion-icon {
+                    &:first-of-type {
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+                    &:last-of-type {
+                        border-top-left-radius: 0;
+                        border-bottom-left-radius: 0;
+                        border-left: 0;
+                    }
+                }
+            }
 
-    .changer-button {
-        cursor: pointer;
-        transition: color 0.1s ease-in;
-        color: $font-color;
-        margin: 0 0.25rem;
+            .pagination-buttons {
+                justify-content: right;
+            }
 
-        &.disabled {
-            cursor: not-allowed;
-            color: $secondary-color;
+            ion-icon {
+                border: 1px solid $secondary-color;
+                border-radius: 4px;
+                padding: 0.25rem;
+
+                cursor: pointer;
+                transition: color 0.1s ease-in-out,
+                    background-color 0.1s ease-in-out;
+                color: $font-color;
+
+                &.disabled {
+                    cursor: not-allowed;
+                    color: $secondary-color;
+                }
+
+                &:not(.disabled) {
+                    &:hover {
+                        background-color: $secondary-color;
+                        color: #eee;
+                    }
+                }
+            }
+
+            .pagination-info {
+                margin: 0 map-get($spacer, 3);
+            }
         }
 
-        &:not(.disabled) {
-            &:hover {
-                color: $primary-color;
+        &.media-browser-list {
+            ul {
+                flex-direction: column;
+                flex-wrap: nowrap;
+            }
+
+            li {
+                height: auto;
+                width: auto;
+            }
+
+            .media-image {
+                width: 64px;
+                height: 64px;
+                margin-right: map-get($spacer, 1);
+            }
+
+            .media-title {
+                flex: 1;
+                text-align: left;
+            }
+
+            .media-size {
+                font-size: 75%;
+            }
+
+            .media-browser-toolbar {
+                .layout-button-grid {
+                    color: $font-color;
+                }
+
+                .layout-button-list {
+                    color: $primary-color;
+                }
+            }
+        }
+
+        &.media-browser-grid {
+            ul {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
+
+            li {
+                flex-direction: column;
+                height: 194px;
+                width: 220px;
+
+                .media-image {
+                    min-height: 132px;
+                    min-width: 220px;
+                }
+
+                .media-title {
+                    text-align: center;
+                    padding: map-get($spacer, 1) 4px;
+                    width: 13rem;
+                    display: block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                .media-size {
+                    font-size: 75%;
+                }
+            }
+
+            .media-browser-toolbar {
+                .layout-button-grid {
+                    color: $primary-color;
+                }
+
+                .layout-button-list {
+                    color: $font-color;
+                }
             }
         }
     }
diff --git a/resources/js/components/errors/Forbidden.vue b/resources/js/components/errors/Forbidden.vue
index 59e91ee..7265c6d 100644
--- a/resources/js/components/errors/Forbidden.vue
+++ b/resources/js/components/errors/Forbidden.vue
@@ -1,15 +1,19 @@
 <template>
-    <div class="page-error forbidden">
-        <div class="image"></div>
-        <div class="content">
-            <h1>The cat says no!</h1>
-            <p>You do not have the needed access to see this page</p>
+    <SMPage no-breadcrumbs>
+        <div class="page-error forbidden">
+            <div class="image"></div>
+            <div class="content">
+                <h1>The cat says no!</h1>
+                <p>You do not have the needed access to see this page</p>
+            </div>
         </div>
-    </div>
+    </SMPage>
 </template>
 
+<script setup lang="ts"></script>
+
 <style lang="scss">
 .page-error.forbidden .image {
-    background-image: url('/img/403.jpg');
+    background-image: url("/img/403.jpg");
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/components/errors/Internal.vue b/resources/js/components/errors/Internal.vue
index cec7dd0..f1a40d6 100644
--- a/resources/js/components/errors/Internal.vue
+++ b/resources/js/components/errors/Internal.vue
@@ -1,15 +1,22 @@
 <template>
-    <div class="page-error internal">
-        <div class="image"></div>
-        <div class="content">
-            <h1>The cat has broken something</h1>
-            <p>We are working to fix that what was broken. Please try again later.</p>
+    <SMPage no-breadcrumbs>
+        <div class="page-error internal">
+            <div class="image"></div>
+            <div class="content">
+                <h1>The cat has broken something</h1>
+                <p>
+                    We are working to fix that what was broken. Please try again
+                    later.
+                </p>
+            </div>
         </div>
-    </div>
+    </SMPage>
 </template>
 
+<script setup lang="ts"></script>
+
 <style lang="scss">
 .page-error.internal .image {
-    background-image: url('/img/500.jpg');
+    background-image: url("/img/500.jpg");
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/components/errors/NotFound.vue b/resources/js/components/errors/NotFound.vue
index 499ad20..666b3c6 100644
--- a/resources/js/components/errors/NotFound.vue
+++ b/resources/js/components/errors/NotFound.vue
@@ -1,15 +1,19 @@
 <template>
-    <div class="page-error not-found">
-        <div class="image"></div>
-        <div class="content">
-            <h1>Opps</h1>
-            <p>The page you asked for was not found</p>
+    <SMPage no-breadcrumbs>
+        <div class="page-error not-found">
+            <div class="image"></div>
+            <div class="content">
+                <h1>Opps</h1>
+                <p>The page you asked for was not found</p>
+            </div>
         </div>
-    </div>
+    </SMPage>
 </template>
 
+<script setup lang="ts"></script>
+
 <style lang="scss">
 .page-error.not-found .image {
-    background-image: url('/img/404.jpg');
+    background-image: url("/img/404.jpg");
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/helpers/api.ts b/resources/js/helpers/api.ts
new file mode 100644
index 0000000..cb8db07
--- /dev/null
+++ b/resources/js/helpers/api.ts
@@ -0,0 +1,191 @@
+import { useProgressStore } from "../store/ProgressStore";
+import { useUserStore } from "../store/UserStore";
+interface ApiProgressData {
+    loaded: number;
+    total: number;
+}
+
+type ApiProgressCallback = (progress: ApiProgressData) => void;
+
+interface ApiOptions {
+    url: string;
+    params?: object;
+    method?: string;
+    headers?: HeadersInit;
+    body?: string | object;
+    signal?: AbortSignal | null;
+    progress?: ApiProgressCallback;
+}
+
+export interface ApiResponse {
+    status: number;
+    message: string;
+    data: unknown;
+    json?: Record<string, unknown>;
+}
+
+const apiDefaultHeaders = {
+    Accept: "application/json",
+    "Content-Type": "application/json;charset=UTF-8",
+};
+
+export const api = {
+    timeout: 8000,
+    baseUrl: "https://www.stemmechanics.com.au/api",
+
+    send: function (options: ApiOptions) {
+        return new Promise((resolve, reject) => {
+            let url = this.baseUrl + options.url;
+
+            if (options.params) {
+                let params = "";
+
+                for (const [key, value] of Object.entries(options.params)) {
+                    const placeholder = `{${key}}`;
+                    if (url.includes(placeholder)) {
+                        url = url.replace(placeholder, value);
+                    } else {
+                        params += `&${key}=${value}`;
+                    }
+                }
+
+                url = url.replace(/{(.*?)}/g, "$1");
+                if (params.length > 0) {
+                    url += (url.includes("?") ? "" : "?") + params.substring(1);
+                }
+            }
+
+            options.headers = {
+                ...apiDefaultHeaders,
+                ...(options.headers || {}),
+            };
+
+            const userStore = useUserStore();
+            if (userStore.id) {
+                options.headers["Authorization"] = `Bearer ${userStore.token}`;
+            }
+
+            if (options.body && typeof options.body === "object") {
+                if (options.body instanceof FormData) {
+                    if (
+                        Object.prototype.hasOwnProperty.call(
+                            options.headers,
+                            "Content-Type"
+                        )
+                    ) {
+                        // remove the "Content-Type" key from the headers object
+                        delete options.headers["Content-Type"];
+                    }
+                } else {
+                    options.body = JSON.stringify(options.body);
+                }
+            }
+
+            const fetchOptions: RequestInit = {
+                method: options.method || "GET",
+                headers: options.headers,
+                signal: options.signal || null,
+            };
+
+            if (typeof options.body == "string" && options.body.length > 0) {
+                fetchOptions.body = options.body;
+            }
+
+            const progressStore = useProgressStore();
+            progressStore.start();
+
+            fetch(url, fetchOptions)
+                .then(async (response) => {
+                    let data: string | object = "";
+                    if (response.headers.get("content-type") == null) {
+                        try {
+                            data = response.json ? await response.json() : {};
+                        } catch (error) {
+                            data = response.text ? await response.text() : "";
+                        }
+                    } else {
+                        data = response.json ? await response.json() : {};
+                    }
+
+                    const result = {
+                        status: response.status,
+                        statusText: response.statusText,
+                        url: response.url,
+                        headers: response.headers,
+                        data: data,
+                    };
+
+                    if (response.status >= 300) {
+                        reject(result);
+                    }
+
+                    resolve(result);
+                })
+                .catch((error) => {
+                    // Handle any errors thrown during the fetch process
+                    const { response, ...rest } = error;
+                    reject({
+                        ...rest,
+                        response: response && response.json(),
+                    });
+                })
+                .finally(() => {
+                    progressStore.finish();
+                });
+        });
+    },
+
+    get: async function (options: ApiOptions | string): Promise<ApiResponse> {
+        let apiOptions = {} as ApiOptions;
+
+        if (typeof options == "string") {
+            apiOptions.url = options;
+        } else {
+            apiOptions = options;
+        }
+
+        apiOptions.method = "GET";
+        return await this.send(apiOptions);
+    },
+
+    post: async function (options: ApiOptions | string): Promise<ApiResponse> {
+        let apiOptions = {} as ApiOptions;
+
+        if (typeof options == "string") {
+            apiOptions.url = options;
+        } else {
+            apiOptions = options;
+        }
+
+        apiOptions.method = "POST";
+        return await this.send(options);
+    },
+
+    put: async function (options: ApiOptions | string): Promise<ApiResponse> {
+        let apiOptions = {} as ApiOptions;
+
+        if (typeof options == "string") {
+            apiOptions.url = options;
+        } else {
+            apiOptions = options;
+        }
+
+        apiOptions.method = "PUT";
+        return await this.send(options);
+    },
+
+    delete: async function (
+        options: ApiOptions | string
+    ): Promise<ApiResponse> {
+        let apiOptions = {} as ApiOptions;
+
+        if (typeof options == "string") {
+            apiOptions.url = options;
+        } else {
+            apiOptions = options;
+        }
+
+        apiOptions.method = "DELETE";
+        return await this.send(options);
+    },
+};
diff --git a/resources/js/helpers/api.types.ts b/resources/js/helpers/api.types.ts
new file mode 100644
index 0000000..7375fed
--- /dev/null
+++ b/resources/js/helpers/api.types.ts
@@ -0,0 +1,82 @@
+export interface Event {
+    id: string;
+    title: string;
+    hero: string;
+    content: string;
+    start_at: string;
+    end_at: string;
+    location: string;
+    address: string;
+    status: string;
+    registration_type: string;
+    registration_data: string;
+}
+
+export interface EventResponse {
+    event: Event;
+}
+
+export interface EventCollection {
+    events: Event[];
+    total: number;
+}
+
+export interface Media {
+    id: string;
+    user_id: string;
+    title: string;
+    name: string;
+    mime: string;
+    permission: Array<string>;
+    size: number;
+    url: string;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface MediaResponse {
+    medium: Media;
+}
+
+export interface MediaCollection {
+    media: Array<Media>;
+    total: number;
+}
+
+export interface Post {
+    id: string;
+    title: string;
+    slug: string;
+    user_id: string;
+    content: string;
+    publish_at: string;
+    hero: string;
+    attachments: Array<Media>;
+}
+
+export interface PostResponse {
+    post: Post;
+}
+
+export interface PostCollection {
+    posts: Array<Post>;
+    total: number;
+}
+
+export interface User {
+    id: string;
+    username: string;
+}
+
+export interface UserResponse {
+    user: User;
+}
+
+export interface UserCollection {
+    users: Array<User>;
+}
+
+export interface LoginResponse {
+    user: User;
+    token: string;
+}
diff --git a/resources/js/helpers/array.ts b/resources/js/helpers/array.ts
new file mode 100644
index 0000000..10d1667
--- /dev/null
+++ b/resources/js/helpers/array.ts
@@ -0,0 +1,24 @@
+/**
+ * Test if array has a match using basic search (* means anything)
+ *
+ * @param {Array<string>} arr The array to search.
+ * @param {string} str The string to find.
+ * @returns {boolean} if the array has the string.
+ */
+export const arrayHasBasicMatch = (
+    arr: Array<string>,
+    str: string
+): boolean => {
+    let matches = false;
+
+    arr.every((elem) => {
+        elem = elem.replace(/[|\\{}()[\]^$+?.]/g, "\\$&");
+        const regex = new RegExp("^" + elem.replace("*", ".*?") + "$", "i");
+        if (str.match(regex)) {
+            matches = true;
+        }
+        return !matches;
+    });
+
+    return matches;
+};
diff --git a/resources/js/helpers/common.js b/resources/js/helpers/common.js
deleted file mode 100644
index b19d82b..0000000
--- a/resources/js/helpers/common.js
+++ /dev/null
@@ -1,439 +0,0 @@
-import { format } from "date-fns";
-
-const transitionEndEventName = () => {
-    var i,
-        undefined,
-        el = document.createElement("div"),
-        transitions = {
-            transition: "transitionend",
-            OTransition: "otransitionend",
-            MozTransition: "transitionend",
-            WebkitTransition: "webkitTransitionEnd",
-        };
-
-    for (i in transitions) {
-        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
-            return transitions[i];
-        }
-    }
-
-    return null;
-};
-
-const waitForElementRender = (elem) => {
-    return new Promise((resolve) => {
-        if (document.contains(elem.value)) {
-            return resolve(elem.value);
-        }
-
-        const MutationObserver =
-            window.MutationObserver ||
-            window.WebKitMutationObserver ||
-            window.MozMutationObserver;
-        const observer = new MutationObserver((mutations) => {
-            if (document.contains(elem.value)) {
-                resolve(elem.value);
-                observer.disconnect();
-            }
-        });
-
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
-    });
-};
-
-const transitionEnter = (elem, transition) => {
-    waitForElementRender(elem).then((e) => {
-        window.setTimeout(() => {
-            e.classList.replace(
-                transition + "-enter-from",
-                transition + "-enter-active"
-            );
-            const transitionName = transitionEndEventName();
-            e.addEventListener(
-                transitionName,
-                () => {
-                    e.classList.replace(
-                        transition + "-enter-active",
-                        transition + "-enter-to"
-                    );
-                },
-                false
-            );
-        }, 1);
-    });
-};
-
-const transitionLeave = (elem, transition, callback = null) => {
-    elem.value.classList.remove(transition + "-enter-to");
-    elem.value.classList.add(transition + "-leave-from");
-    window.setTimeout(() => {
-        elem.value.classList.replace(
-            transition + "-leave-from",
-            transition + "-leave-active"
-        );
-        const transitionName = transitionEndEventName();
-        elem.value.addEventListener(
-            transitionName,
-            () => {
-                elem.value.classList.replace(
-                    transition + "-leave-active",
-                    transition + "-leave-to"
-                );
-                if (callback) {
-                    callback();
-                }
-            },
-            false
-        );
-    }, 1);
-};
-
-export const monthString = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-];
-
-export const fullMonthString = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-];
-
-/**
- *
- * @param target
- */
-export function isBool(target) {
-    return typeof target === "boolean";
-}
-
-/**
- *
- * @param target
- */
-export function isNumber(target) {
-    return typeof target === "number";
-}
-
-/**
- *
- * @param target
- */
-export function isObject(target) {
-    return typeof target === "object" && target !== null;
-}
-
-/**
- *
- * @param target
- */
-export function isString(target) {
-    return typeof target === "string" && target !== null;
-}
-
-/**
- *
- * @param target
- * @param def
- */
-export function parseErrorType(
-    target,
-    def = "An unknown error occurred. Please try again later."
-) {
-    if (target.response?.message) {
-        return target.response.message;
-    } else if (target instanceof Error) {
-        target.message;
-    } else if (isString(err)) {
-        return target;
-    }
-
-    return def;
-}
-
-export const relativeDate = (d) => {
-    if (isString(d)) {
-        d = new Date(d);
-    }
-
-    // const d = new Date(0);
-    // // d.setUTCSeconds(parseInt(epoch));
-    // d.setUTCSeconds(epoch);
-
-    const now = new Date();
-    const dif = Math.round((now.getTime() - d.getTime()) / 1000);
-
-    if (dif < 60) {
-        // let v = dif;
-        // return v + " sec" + (v != 1 ? "s" : "") + " ago";
-        return "Just now";
-    } else if (dif < 3600) {
-        const v = Math.round(dif / 60);
-        return v + " min" + (v != 1 ? "s" : "") + " ago";
-    } else if (dif < 86400) {
-        const v = Math.round(dif / 3600);
-        return v + " hour" + (v != 1 ? "s" : "") + " ago";
-    } else if (dif < 604800) {
-        const v = Math.round(dif / 86400);
-        return v + " day" + (v != 1 ? "s" : "") + " ago";
-    } else if (dif < 2419200) {
-        const v = Math.round(dif / 604800);
-        return v + " week" + (v != 1 ? "s" : "") + " ago";
-    }
-
-    return (
-        monthString[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear()
-    );
-};
-
-export const buildUrlQuery = (url, query) => {
-    let s = "";
-
-    if (Object.keys(query).length > 0) {
-        s = "?";
-    }
-
-    s += Object.keys(query)
-        .map((key) => key + "=" + query[key])
-        .join("&");
-
-    return url + s;
-};
-
-export const toParamString = (obj, q = true) => {
-    let s = "";
-
-    if (q && Object.keys(obj).length > 0) {
-        s = "?";
-    }
-
-    s += Object.keys(obj)
-        .map((key) => key + "=" + obj[key])
-        .join("&");
-    return s;
-};
-
-export const getLocale = () => {
-    return (
-        navigator.userLanguage ||
-        (navigator.languages &&
-            navigator.languages.length &&
-            navigator.languages[0]) ||
-        navigator.language ||
-        navigator.browserLanguage ||
-        navigator.systemLanguage ||
-        "en"
-    );
-};
-
-export const debounce = (fn, delay) => {
-    var timeoutID = null;
-    return function () {
-        clearTimeout(timeoutID);
-        var args = arguments;
-        var that = this;
-        timeoutID = setTimeout(function () {
-            fn.apply(that, args);
-        }, delay);
-    };
-};
-
-export const bytesReadable = (bytes) => {
-    if (isNaN(bytes)) {
-        return "0 Bytes";
-    }
-
-    if (Math.abs(bytes) < 1024) {
-        return bytes + " Bytes";
-    }
-
-    const units = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-    let u = -1;
-    const r = 10 ** 1;
-
-    do {
-        bytes /= 1000;
-        ++u;
-    } while (
-        Math.round(Math.abs(bytes) * r) / r >= 1000 &&
-        u < units.length - 1
-    );
-
-    return bytes.toFixed(1) + " " + units[u];
-};
-
-export const arrayIncludesMatchBasic = (arr, str) => {
-    let matches = false;
-
-    arr.every((elem) => {
-        elem = elem.replace(/[|\\{}()[\]^$+?.]/g, "\\$&");
-        let regex = new RegExp("^" + elem.replace("*", ".*?") + "$", "i");
-        if (str.match(regex)) {
-            matches = true;
-        }
-        return !matches;
-    });
-
-    return matches;
-};
-
-export const excerpt = (txt, maxLen = 150, strip = true) => {
-    if (strip) {
-        txt = stripHtmlTags(replaceHtmlEntites(txt));
-    }
-
-    let txtPieces = txt.split(" ");
-    let excerptPieces = [];
-    let curLen = 0;
-
-    txtPieces.every((itm) => {
-        if (curLen + itm.length >= maxLen) {
-            return false;
-        }
-
-        excerptPieces.push(itm);
-        curLen += itm.length + 1;
-        return true;
-    });
-
-    return excerptPieces.join(" ") + (curLen < txt.length ? "..." : "");
-};
-
-export const stripHtmlTags = (txt) => {
-    txt = txt.replace(/<(p|br)([ /]*?>|[ /]+.*?>)/g, " ");
-    return txt.replace(/<[a-zA-Z/][^>]+(>|$)/g, "");
-};
-
-export const replaceHtmlEntites = (txt) => {
-    var translate_re = /&(nbsp|amp|quot|lt|gt);/g;
-    var translate = {
-        nbsp: " ",
-        amp: "&",
-        quot: '"',
-        lt: "<",
-        gt: ">",
-    };
-
-    return txt.replace(translate_re, function (match, entity) {
-        return translate[entity];
-    });
-};
-
-export const isUUID = (uuid) => {
-    return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
-        uuid
-    );
-};
-
-export const timestampUtcToLocal = (utc) => {
-    try {
-        let iso = new Date(
-            utc.replace(
-                /([0-9]{4}-[0-9]{2}-[0-9]{2}),? ([0-9]{2}:[0-9]{2}:[0-9]{2})/,
-                "$1T$2.000Z"
-            )
-        );
-        return format(iso, "yyyy/MM/dd HH:mm:ss");
-    } catch (error) {
-        /* empty */
-    }
-
-    return "";
-};
-
-export const timestampLocalToUtc = (local) => {
-    try {
-        let d = new Date(local);
-        return d
-            .toISOString()
-            .replace(
-                /([0-9]{4}-[0-9]{2}-[0-9]{2})T([0-9]{2}:[0-9]{2}:[0-9]{2}).*/,
-                "$1 $2"
-            );
-    } catch (error) {
-        /* empty */
-    }
-
-    return "";
-};
-
-export const timestampNowLocal = () => {
-    let d = new Date();
-    return (
-        d.getFullYear() +
-        "-" +
-        ("0" + (d.getMonth() + 1)).slice(-2) +
-        "-"("0" + d.getDate()).slice(-2) +
-        " " +
-        ("0" + d.getHours()).slice(-2) +
-        ":" +
-        ("0" + d.getMinutes()).slice(-2) +
-        ":" +
-        ("0" + d.getSeconds()).slice(-2)
-    );
-};
-
-export const timestampNowUtc = () => {
-    try {
-        let d = new Date();
-        return d
-            .toISOString()
-            .replace(
-                /([0-9]{4}-[0-9]{2}-[0-9]{2})T([0-9]{2}:[0-9]{2}:[0-9]{2}).*/,
-                "$1 $2"
-            );
-    } catch (error) {
-        /* empty */
-    }
-
-    return "";
-};
-
-export const timestampBeforeNow = (timestamp) => {
-    try {
-        return new Date(timestamp) < new Date();
-    } catch (error) {
-        /* empty */
-    }
-
-    return false;
-};
-
-export const timestampAfterNow = (timestamp) => {
-    try {
-        return new Date(timestamp) > new Date();
-    } catch (error) {
-        /* empty */
-    }
-
-    return false;
-};
-
-export {
-    transitionEndEventName,
-    waitForElementRender,
-    transitionEnter,
-    transitionLeave,
-};
diff --git a/resources/js/helpers/datetime.ts b/resources/js/helpers/datetime.ts
new file mode 100644
index 0000000..97b2d81
--- /dev/null
+++ b/resources/js/helpers/datetime.ts
@@ -0,0 +1,487 @@
+import { transformWithEsbuild } from "vite";
+
+export class SMDate {
+    date: Date | null = null;
+    dayString: string[] = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+    fullDayString: string[] = [
+        "Sunday",
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+    ];
+
+    monthString: string[] = [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+    ];
+
+    fullMonthString: string[] = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+    ];
+
+    constructor(
+        dateOrString: string | Date = "",
+        options: { format?: string; utc?: boolean } = {}
+    ) {
+        this.date = null;
+
+        if (typeof dateOrString === "string") {
+            if (dateOrString.length > 0) {
+                this.parse(dateOrString, options);
+            }
+        } else if (
+            dateOrString instanceof Date &&
+            !Number.isNaN(dateOrString.getTime())
+        ) {
+            this.date = dateOrString;
+        }
+    }
+
+    /**
+     * Parse a string date into a Date object
+     *
+     * @param {string} dateString The date string.
+     * @param {object} options (optional) Options object.
+     * @param {string} options.format (optional) The format of the date string.
+     * @param {boolean} options.utc (optional) The date string is UTC.
+     * @returns {SMDate} SMDate object.
+     */
+    public parse(
+        dateString: string,
+        options: { format?: string; utc?: boolean } = {}
+    ): SMDate {
+        const now = new Date();
+
+        if (dateString.toLowerCase() == "now") {
+            this.date = now;
+            return this;
+        }
+
+        // Parse the date format to determine the order of the date components
+        const order = (options.format || "dmy").toLowerCase().split("");
+        options.utc = options.utc || false;
+
+        // Split the date string into an array of components based on the length of each date component
+        const components = dateString.split(/[ /-]/);
+        let time = "";
+
+        for (let i = 0; i < components.length; i++) {
+            if (components[i].includes(":")) {
+                time = components[i];
+                components.splice(i, 1);
+                if (
+                    i < components.length &&
+                    /^(am?|a\.m\.|pm?|p\.m\.)$/i.test(components[i])
+                ) {
+                    time += " " + components[i].toUpperCase();
+                    components.splice(i, 1);
+                }
+                break;
+            }
+        }
+
+        if (components.every((v) => !isNaN(parseInt(v))) == false) {
+            return this;
+        }
+
+        if (components.length > 3) {
+            return this;
+        }
+
+        // Map the date components to the expected order based on the format
+        const [day, month, year] =
+            order[0] === "d"
+                ? [components[0], components[1], components[2]]
+                : order[0] === "m"
+                ? [components[1], components[0], components[2]]
+                : [components[2], components[1], components[0]];
+
+        let parsedDay: number = 0,
+            parsedMonth: number = 0,
+            parsedYear: number = 0;
+
+        if (year.length == 3 || year.length >= 5) {
+            return this;
+        }
+
+        if (day && day.length != 0 && month && month.length != 0) {
+            // Parse the day, month, and year components
+            parsedDay = parseInt(day.padStart(2, "0"), 10);
+            parsedMonth = this.getMonthAsNumber(month);
+            parsedYear = year
+                ? parseInt(year.padStart(4, "20"), 10)
+                : now.getFullYear();
+        } else {
+            parsedDay = now.getDate();
+            parsedMonth = now.getMonth() + 1;
+            parsedYear = now.getFullYear();
+        }
+
+        let parsedHours: number = 0,
+            parsedMinutes: number = 0,
+            parsedSeconds: number = 0;
+        if (time) {
+            const regEx = new RegExp(
+                /^(\d+)(?::(\d+))?(?::(\d+))? ?(am?|a\.m\.|pm?|p\.m\.)?$/,
+                "i"
+            );
+            if (regEx.test(time)) {
+                const match = time.match(regEx);
+                if (match) {
+                    parsedHours = parseInt(match[1]);
+                    parsedMinutes = match[2] ? parseInt(match[2]) : 0;
+                    parsedSeconds = match[3] ? parseInt(match[3]) : 0;
+                    if (match[4] && /pm/i.test(match[4])) {
+                        parsedHours += 12;
+                    }
+                    if (
+                        match[4] &&
+                        /am/i.test(match[4]) &&
+                        parsedHours === 12
+                    ) {
+                        parsedHours = 0;
+                    }
+                } else {
+                    return this;
+                }
+            } else {
+                return this;
+            }
+        }
+
+        // Create a date object with the parsed components
+        let date: Date | null = null;
+        if (options.utc) {
+            date = new Date(
+                Date.UTC(
+                    parsedYear,
+                    parsedMonth - 1,
+                    parsedDay,
+                    parsedHours,
+                    parsedMinutes,
+                    parsedSeconds
+                )
+            );
+        } else {
+            date = new Date(
+                parsedYear,
+                parsedMonth - 1,
+                parsedDay,
+                parsedHours,
+                parsedMinutes,
+                parsedSeconds
+            );
+        }
+
+        // Test created date object
+        let checkYear: number,
+            checkMonth: number,
+            checkDay: number,
+            checkHours: number,
+            checkMinutes: number,
+            checkSeconds: number;
+        if (options.utc) {
+            const isoDate = date.toISOString();
+            checkYear = parseInt(isoDate.substring(0, 4), 10);
+            checkMonth = parseInt(isoDate.substring(5, 7), 10);
+            checkDay = new Date(isoDate).getUTCDate();
+            checkHours = parseInt(isoDate.substring(11, 13), 10);
+            checkMinutes = parseInt(isoDate.substring(14, 16), 10);
+            checkSeconds = parseInt(isoDate.substring(17, 18), 10);
+        } else {
+            checkYear = date.getFullYear();
+            checkMonth = date.getMonth() + 1;
+            checkDay = date.getDate();
+            checkHours = date.getHours();
+            checkMinutes = date.getMinutes();
+            checkSeconds = date.getSeconds();
+        }
+
+        if (
+            Number.isNaN(date.getTime()) == false &&
+            checkYear == parsedYear &&
+            checkMonth == parsedMonth &&
+            checkDay == parsedDay &&
+            checkHours == parsedHours &&
+            checkMinutes == parsedMinutes &&
+            checkSeconds == parsedSeconds
+        ) {
+            this.date = date;
+        } else {
+            this.date = null;
+        }
+
+        return this;
+    }
+
+    /**
+     * Format the date to a string.
+     *
+     * @param {string} format The format to return.
+     * @param {object} options (optional) Function options.
+     * @param {boolean} options.utc (optional) Format the date to be as UTC instead of local.
+     * @returns {string} The formatted date.
+     */
+    public format(format: string, options: { utc?: boolean } = {}): string {
+        if (this.date == null) {
+            return "";
+        }
+
+        let result = format;
+
+        let year: string,
+            month: string,
+            date: string,
+            day: number,
+            hour: string,
+            min: string,
+            sec: string;
+        if (options.utc) {
+            const isoDate = this.date.toISOString();
+            year = isoDate.substring(0, 4);
+            month = isoDate.substring(5, 7);
+            date = isoDate.substring(8, 10);
+            day = new Date(isoDate).getUTCDay();
+            hour = isoDate.substring(11, 13);
+            min = isoDate.substring(14, 16);
+            sec = isoDate.substring(17, 18);
+        } else {
+            year = this.date.getFullYear().toString();
+            month = (this.date.getMonth() + 1).toString();
+            date = this.date.getDate().toString();
+            day = this.date.getDay();
+            hour = this.date.getHours().toString();
+            min = this.date.getMinutes().toString();
+            sec = this.date.getSeconds().toString();
+        }
+
+        const apm = parseInt(hour, 10) >= 12 ? "pm" : "am";
+        /* eslint-disable indent */
+        const apmhours = (
+            parseInt(hour, 10) > 12
+                ? parseInt(hour, 10) - 12
+                : parseInt(hour, 10) == 0
+                ? 12
+                : parseInt(hour, 10)
+        ).toString();
+        /* eslint-enable indent */
+
+        // year
+        result = result.replace(/\byy\b/g, year.slice(-2));
+        result = result.replace(/\byyyy\b/g, year);
+
+        // month
+        result = result.replace(/\bM\b/g, month);
+        result = result.replace(/\bMM\b/g, (0 + month).slice(-2));
+        result = result.replace(
+            /\bMMM\b/g,
+            this.monthString[parseInt(month) - 1]
+        );
+        result = result.replace(
+            /\bMMMM\b/g,
+            this.fullMonthString[parseInt(month) - 1]
+        );
+
+        // day
+        result = result.replace(/\bd\b/g, date);
+        result = result.replace(/\bdd\b/g, (0 + date).slice(-2));
+        result = result.replace(/\bEEE\b/g, this.dayString[day]);
+        result = result.replace(/\bEEEE\b/g, this.fullDayString[day]);
+
+        // hour
+        result = result.replace(/\bH\b/g, hour);
+        result = result.replace(/\bHH\b/g, (0 + hour).slice(-2));
+        result = result.replace(/\bh\b/g, apmhours);
+        result = result.replace(/\bhh\b/g, (0 + apmhours).slice(-2));
+
+        // min
+        result = result.replace(/\bm\b/g, min);
+        result = result.replace(/\bmm\b/g, (0 + min).slice(-2));
+
+        // sec
+        result = result.replace(/\bs\b/g, sec);
+        result = result.replace(/\bss\b/g, (0 + sec).slice(-2));
+
+        // am/pm
+        result = result.replace(/\baa\b/g, apm);
+
+        return result;
+    }
+
+    /**
+     * Return a relative date string from now.
+     *
+     * @returns {string} A relative date string.
+     */
+    public relative(): string {
+        if (this.date === null) {
+            return "";
+        }
+
+        const now = new Date();
+        const dif = Math.round((now.getTime() - this.date.getTime()) / 1000);
+
+        if (dif < 60) {
+            // let v = dif;
+            // return v + " sec" + (v != 1 ? "s" : "") + " ago";
+            return "Just now";
+        } else if (dif < 3600) {
+            const v = Math.round(dif / 60);
+            return v + " min" + (v != 1 ? "s" : "") + " ago";
+        } else if (dif < 86400) {
+            const v = Math.round(dif / 3600);
+            return v + " hour" + (v != 1 ? "s" : "") + " ago";
+        } else if (dif < 604800) {
+            const v = Math.round(dif / 86400);
+            return v + " day" + (v != 1 ? "s" : "") + " ago";
+        } else if (dif < 2419200) {
+            const v = Math.round(dif / 604800);
+            return v + " week" + (v != 1 ? "s" : "") + " ago";
+        }
+
+        return (
+            this.monthString[this.date.getMonth()] +
+            " " +
+            this.date.getDate() +
+            ", " +
+            this.date.getFullYear()
+        );
+    }
+
+    /**
+     * If the date is before the passed date.
+     *
+     * @param {Date|SMDate} d (optional) The date to check. If none, use now
+     * @returns {boolean} If the date is before the passed date.
+     */
+    public isBefore(d: Date | SMDate = new SMDate("now")): boolean {
+        const otherDate = d instanceof SMDate ? d.date : d;
+        if (otherDate == null) {
+            return false;
+        }
+
+        if (this.date == null) {
+            return true;
+        }
+
+        return otherDate > this.date;
+    }
+
+    /**
+     * If the date is after the passed date.
+     *
+     * @param {Date|SMDate} d (optional) The date to check. If none, use now
+     * @returns {boolean} If the date is after the passed date.
+     */
+    public isAfter(d: Date | SMDate = new SMDate("now")): boolean {
+        const otherDate = d instanceof SMDate ? d.date : d;
+        if (otherDate == null) {
+            return false;
+        }
+
+        if (this.date == null) {
+            return true;
+        }
+
+        return otherDate < this.date;
+    }
+
+    /**
+     * Return a month number from a string or a month number or month name
+     *
+     * @param {string} monthString The month string as number or name
+     * @returns {number} The month number
+     */
+    private getMonthAsNumber(monthString: string): number {
+        const months = this.fullMonthString.map((month) => month.toLowerCase());
+
+        const shortMonths = months.map((month) => month.slice(0, 3));
+        const monthIndex = months.indexOf(monthString.toLowerCase());
+        if (monthIndex !== -1) {
+            return monthIndex + 1;
+        }
+        const shortMonthIndex = shortMonths.indexOf(monthString.toLowerCase());
+        if (shortMonthIndex !== -1) {
+            return shortMonthIndex + 1;
+        }
+        const monthNumber = parseInt(monthString, 10);
+        if (!isNaN(monthNumber) && monthNumber >= 1 && monthNumber <= 12) {
+            return monthNumber;
+        }
+
+        return 0;
+    }
+
+    /**
+     * Test if the current date is valid.
+     *
+     * @returns {boolean} If the current date is valid.
+     */
+    public isValid(): boolean {
+        return this.date !== null;
+    }
+
+    /**
+     * Return a string with only the first occurrence of characters
+     *
+     * @param {string} str The string to modify.
+     * @param {string} characters The characters to use to test.
+     * @returns {string} A string that only contains the first occurrence of the characters.
+     */
+    private onlyFirstOccurrence(
+        str: string,
+        characters: string = "dMy"
+    ): string {
+        let findCharacters = characters.split("");
+        const replaceRegex = new RegExp("[^" + characters + "]", "g");
+        let result = "";
+
+        str = str.replace(replaceRegex, "");
+        if (str.length > 0) {
+            str.split("").forEach((strChar) => {
+                if (
+                    findCharacters.length > 0 &&
+                    findCharacters.includes(strChar)
+                ) {
+                    result += strChar;
+
+                    const index = findCharacters.findIndex(
+                        (findChar) => findChar === strChar
+                    );
+                    if (index !== -1) {
+                        findCharacters = findCharacters
+                            .slice(0, index)
+                            .concat(findCharacters.slice(index + 1));
+                    }
+                }
+            });
+        }
+
+        return result;
+    }
+}
diff --git a/resources/js/helpers/debounce.ts b/resources/js/helpers/debounce.ts
new file mode 100644
index 0000000..3200e6e
--- /dev/null
+++ b/resources/js/helpers/debounce.ts
@@ -0,0 +1,27 @@
+type DebounceCallback = (...args: unknown[]) => void;
+type DebounceResult = (...args: unknown[]) => void;
+
+/**
+ * Call a function after a delay once.
+ *
+ * @param {Function} fn The function to call.
+ * @param {number} delay The delay before calling function.
+ * @returns {void}
+ */
+export const debounce = (
+    fn: DebounceCallback,
+    delay: number
+): DebounceResult => {
+    let timeoutID: NodeJS.Timeout | null = null;
+    return (...args) => {
+        if (timeoutID != null) {
+            clearTimeout(timeoutID);
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const that = this;
+        timeoutID = setTimeout(function () {
+            fn.apply(that, args);
+        }, delay);
+    };
+};
diff --git a/resources/js/helpers/fontawesome.ts b/resources/js/helpers/fontawesome.ts
deleted file mode 100644
index 933d6c7..0000000
--- a/resources/js/helpers/fontawesome.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { fas } from '@fortawesome/free-solid-svg-icons'
-import { fab } from '@fortawesome/free-brands-svg-icons';
-import { far } from '@fortawesome/free-regular-svg-icons';
-
-library.add(far, fas, fab);
-
-export default FontAwesomeIcon;
\ No newline at end of file
diff --git a/resources/js/helpers/form.ts b/resources/js/helpers/form.ts
new file mode 100644
index 0000000..cf0d961
--- /dev/null
+++ b/resources/js/helpers/form.ts
@@ -0,0 +1,196 @@
+import { ApiResponse } from "./api";
+import {
+    createValidationResult,
+    defaultValidationResult,
+    ValidationObject,
+    ValidationResult,
+} from "./validate";
+
+type FormObjectValidateFunction = (item: string | null) => Promise<boolean>;
+type FormObjectLoadingFunction = (state: boolean) => void;
+type FormObjectMessageFunction = (
+    message?: string,
+    type?: string,
+    icon?: string
+) => void;
+type FormObjectErrorFunction = (message: string) => void;
+type FormObjectApiErrorsFunction = (apiErrors: ApiResponse) => void;
+
+export interface FormObject {
+    validate: FormObjectValidateFunction;
+    loading: FormObjectLoadingFunction;
+    message: FormObjectMessageFunction;
+    error: FormObjectErrorFunction;
+    apiErrors: FormObjectApiErrorsFunction;
+    _loading: boolean;
+    _message: string;
+    _messageType: string;
+    _messageIcon: string;
+    controls: { [key: string]: FormControlObject };
+}
+
+const defaultFormObject: FormObject = {
+    validate: async function (item = null) {
+        const keys = item ? [item] : Object.keys(this.controls);
+        let valid = true;
+
+        await Promise.all(
+            keys.map(async (key) => {
+                if (
+                    typeof this.controls[key] == "object" &&
+                    Object.keys(this.controls[key]).includes("validation")
+                ) {
+                    const validationResult = await this.controls[
+                        key
+                    ].validation.validator.validate(this.controls[key].value);
+                    this.controls[key].validation.result = validationResult;
+
+                    if (!validationResult.valid) {
+                        valid = false;
+                    }
+                }
+            })
+        );
+
+        return valid;
+    },
+    loading: function (state = true) {
+        this._loading = state;
+    },
+    message: function (message = "", type = "", icon = "") {
+        this._message = message;
+
+        if (type.length > 0) {
+            this._messageType = type;
+        }
+        if (icon.length > 0) {
+            this._messageIcon = icon;
+        }
+    },
+    error: function (message = "") {
+        if (message == "") {
+            this.message("");
+        } else {
+            this.message(message, "error", "alert-circle-outline");
+        }
+    },
+    apiErrors: function (apiResponse: ApiResponse) {
+        let foundKeys = false;
+
+        if (
+            apiResponse.data &&
+            typeof apiResponse.data === "object" &&
+            apiResponse.data.errors
+        ) {
+            const errors = apiResponse.data.errors as Record<string, string>;
+            Object.keys(errors).forEach((key) => {
+                if (
+                    typeof this.controls[key] === "object" &&
+                    Object.keys(this.controls[key]).includes("validation")
+                ) {
+                    foundKeys = true;
+                    this.controls[key].validation.result =
+                        createValidationResult(false, errors[key]);
+                }
+            });
+        }
+
+        if (foundKeys == false) {
+            this.error(
+                apiResponse?.json?.message ||
+                    "An unknown server error occurred.\nPlease try again later."
+            );
+        }
+    },
+    controls: {},
+
+    _loading: false,
+    _message: "",
+    _messageType: "primary",
+    _messageIcon: "",
+};
+
+/**
+ * Create a new Form object.
+ *
+ * @param {Record<string, FormControlObject>} controls The controls included in the form.
+ * @returns {FormObject} Returns a form object.
+ */
+export const Form = (
+    controls: Record<string, FormControlObject>
+): FormObject => {
+    const form = defaultFormObject;
+    form.controls = controls;
+
+    return form;
+};
+
+interface FormControlValidation {
+    validator: ValidationObject;
+    result: ValidationResult;
+}
+
+const defaultFormControlValidation: FormControlValidation = {
+    validator: {
+        validate: async (): Promise<ValidationResult> => {
+            return defaultValidationResult;
+        },
+    },
+    result: defaultValidationResult,
+};
+
+type FormControlClearValidations = () => void;
+type FormControlSetValidation = (
+    valid: boolean,
+    message?: string | Array<string>
+) => ValidationResult;
+type FormControlIsValid = () => boolean;
+
+export interface FormControlObject {
+    value: string;
+    validate: () => Promise<ValidationResult>;
+    validation: FormControlValidation;
+    clearValidations: FormControlClearValidations;
+    setValidationResult: FormControlSetValidation;
+    isValid: FormControlIsValid;
+}
+
+/**
+ * Create a new form control object.
+ *
+ * @param {string} value The control name.
+ * @param {ValidationObject | null} validator The control validation rules.
+ * @returns {FormControlObject} The form control object.
+ */
+export const FormControl = (
+    value: string = "",
+    validator: ValidationObject | null = null
+): FormControlObject => {
+    return {
+        value: value,
+        validation:
+            validator == null
+                ? defaultFormControlValidation
+                : {
+                      validator: validator,
+                      result: defaultValidationResult,
+                  },
+        clearValidations: function () {
+            this.validation.result = defaultValidationResult;
+        },
+        setValidationResult: createValidationResult,
+        validate: async function () {
+            if (this.validation.validator) {
+                this.validation.result =
+                    await this.validation.validator.validate(this.value);
+
+                return this.validation.result;
+            }
+
+            return defaultValidationResult;
+        },
+        isValid: function () {
+            return this.validation.result.valid;
+        },
+    };
+};
diff --git a/resources/js/helpers/image.ts b/resources/js/helpers/image.ts
new file mode 100644
index 0000000..17d500a
--- /dev/null
+++ b/resources/js/helpers/image.ts
@@ -0,0 +1,14 @@
+type ImageLoadCallback = (url: string) => void;
+
+export const imageLoad = (
+    url: string,
+    callback: ImageLoadCallback,
+    postfix = "h=50"
+) => {
+    callback(`${url}?${postfix}`);
+    const tmp = new Image();
+    tmp.onload = function () {
+        callback(url);
+    };
+    tmp.src = url;
+};
diff --git a/resources/js/helpers/object.ts b/resources/js/helpers/object.ts
new file mode 100644
index 0000000..efa73a2
--- /dev/null
+++ b/resources/js/helpers/object.ts
@@ -0,0 +1,29 @@
+/**
+ * Sort a objects properties alphabetically
+ *
+ * @param {Record<string, unknown>} obj The object to sort
+ * @returns {Record<string, unknown>} The object sorted
+ */
+export const sortProperties = (
+    obj: Record<string, unknown>
+): Record<string, unknown> => {
+    // convert object into array
+    const sortable: [string, unknown][] = [];
+    for (const key in obj)
+        if (Object.prototype.hasOwnProperty.call(obj, key))
+            sortable.push([key, obj[key]]); // each item is an array in format [key, value]
+
+    // sort items by value
+    sortable.sort(function (a, b) {
+        const x = String(a[1]).toLowerCase(),
+            y = String(b[1]).toLowerCase();
+        return x < y ? -1 : x > y ? 1 : 0;
+    });
+
+    const sortedObj: Record<string, unknown> = {};
+    sortable.forEach((item) => {
+        sortedObj[item[0]] = item[1];
+    });
+
+    return sortedObj; // array in format [ [ key1, val1 ], [ key2, val2 ], ... ]
+};
diff --git a/resources/js/helpers/string.ts b/resources/js/helpers/string.ts
new file mode 100644
index 0000000..f1421c0
--- /dev/null
+++ b/resources/js/helpers/string.ts
@@ -0,0 +1,81 @@
+/**
+ * Transforms a string to title case.
+ *
+ * @param {string} str The string to transform.
+ * @returns {string} A string transformed to title case.
+ */
+export const toTitleCase = (str: string): string => {
+    return str.replace(/\w\S*/g, function (txt) {
+        return (
+            txt.charAt(0).toUpperCase() +
+            txt.substring(1).replace(/_/g, " ").toLowerCase()
+        );
+    });
+};
+
+/**
+ * Convert a string to a excerpt.
+ *
+ * @param {string} txt The text to convert.
+ * @param {number} maxLen (optional) The maximum length of the excerpt.
+ * @param {boolean} strip (optional) Strip HTML tags from the text.
+ * @param stripHtml
+ * @returns {string} The excerpt.
+ */
+export const excerpt = (
+    txt: string,
+    maxLen: number = 150,
+    stripHtml: boolean = true
+): string => {
+    if (stripHtml) {
+        txt = stripHtmlTags(replaceHtmlEntites(txt));
+    }
+
+    const txtPieces = txt.split(" ");
+    const excerptPieces: string[] = [];
+    let curLen = 0;
+
+    txtPieces.every((itm) => {
+        if (curLen + itm.length >= maxLen) {
+            return false;
+        }
+
+        excerptPieces.push(itm);
+        curLen += itm.length + 1;
+        return true;
+    });
+
+    return excerptPieces.join(" ") + (curLen < txt.length ? "..." : "");
+};
+
+/**
+ * String HTML tags from text.
+ *
+ * @param {string} txt The text to strip tags.
+ * @returns {string} The stripped text.
+ */
+export const stripHtmlTags = (txt: string): string => {
+    txt = txt.replace(/<(p|br)([ /]*?>|[ /]+.*?>)/g, " ");
+    return txt.replace(/<[a-zA-Z/][^>]+(>|$)/g, "");
+};
+
+/**
+ * Replace HTML entities with real characters.
+ *
+ * @param {string} txt The text to transform.
+ * @returns {string} Transformed text
+ */
+export const replaceHtmlEntites = (txt: string): string => {
+    const translate_re = /&(nbsp|amp|quot|lt|gt);/g;
+    const translate = {
+        nbsp: " ",
+        amp: "&",
+        quot: '"',
+        lt: "<",
+        gt: ">",
+    };
+
+    return txt.replace(translate_re, function (match, entity) {
+        return translate[entity];
+    });
+};
diff --git a/resources/js/helpers/transition.ts b/resources/js/helpers/transition.ts
new file mode 100644
index 0000000..15094bf
--- /dev/null
+++ b/resources/js/helpers/transition.ts
@@ -0,0 +1,127 @@
+import { Ref } from "vue";
+
+/**
+ * Return the browser transiton end name.
+ *
+ * @returns {string} The browser transition end name.
+ */
+const transitionEndEventName = (): string => {
+    const el = document.createElement("div"),
+        transitions: Record<string, string> = {
+            transition: "transitionend",
+            OTransition: "otransitionend",
+            MozTransition: "transitionend",
+            WebkitTransition: "webkitTransitionEnd",
+        };
+
+    for (const i in transitions) {
+        if (
+            Object.prototype.hasOwnProperty.call(transitions, i) &&
+            el.style[i] !== undefined
+        ) {
+            return transitions[i];
+        }
+    }
+
+    return "";
+};
+
+/**
+ * Wait for the element to render as Promise
+ *
+ * @param elem The
+ * @returns
+ */
+const waitForElementRender = (elem: Ref): Promise<HTMLElement> => {
+    return new Promise((resolve) => {
+        if (document.contains(elem.value)) {
+            return resolve(elem.value as HTMLElement);
+        }
+
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const MutationObserver =
+            window.MutationObserver ||
+            (window as any).WebKitMutationObserver ||
+            (window as any).MozMutationObserver;
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+        const observer = new MutationObserver(() => {
+            if (document.contains(elem.value)) {
+                resolve(elem.value);
+                observer.disconnect();
+            }
+        });
+
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    });
+};
+
+/**
+ * Run the enter transition on a element.
+ *
+ * @param {Ref} elem The element to run the enter transition.
+ * @param {string} transition The transition name.
+ * @returns {void}
+ */
+export const transitionEnter = (elem: Ref, transition: string): void => {
+    waitForElementRender(elem).then((e: HTMLElement) => {
+        window.setTimeout(() => {
+            e.classList.replace(
+                transition + "-enter-from",
+                transition + "-enter-active"
+            );
+            const transitionName = transitionEndEventName();
+            e.addEventListener(
+                transitionName,
+                () => {
+                    e.classList.replace(
+                        transition + "-enter-active",
+                        transition + "-enter-to"
+                    );
+                },
+                false
+            );
+        }, 1);
+    });
+};
+
+/**
+ * Run the exit transition on a element then call a callback.
+ *
+ * @param {Ref} elem The element to run the enter transition.
+ * @param {string} transition The transition name.
+ * @param {TransitionLeaveCallback|null} callback The callback to run after the transition finishes.
+ * @returns {void}
+ */
+type TransitionLeaveCallback = () => void;
+
+export const transitionLeave = (
+    elem: Ref,
+    transition: string,
+    callback: TransitionLeaveCallback | null = null
+): void => {
+    elem.value.classList.remove(transition + "-enter-to");
+    elem.value.classList.add(transition + "-leave-from");
+    window.setTimeout(() => {
+        elem.value.classList.replace(
+            transition + "-leave-from",
+            transition + "-leave-active"
+        );
+        const transitionName = transitionEndEventName();
+        elem.value.addEventListener(
+            transitionName,
+            () => {
+                elem.value.classList.replace(
+                    transition + "-leave-active",
+                    transition + "-leave-to"
+                );
+                if (callback) {
+                    callback();
+                }
+            },
+            false
+        );
+    }, 1);
+};
diff --git a/resources/js/helpers/types.ts b/resources/js/helpers/types.ts
new file mode 100644
index 0000000..562129f
--- /dev/null
+++ b/resources/js/helpers/types.ts
@@ -0,0 +1,69 @@
+/**
+ * Test if target is a boolean
+ *
+ * @param {unknown} target The varible to test
+ * @returns {boolean} If the varible is a boolean type
+ */
+export function isBool(target: unknown): boolean {
+    return typeof target === "boolean";
+}
+
+/**
+ * Test if target is a number
+ *
+ * @param {unknown} target The varible to test
+ * @returns {boolean} If the varible is a number type
+ */
+export function isNumber(target: unknown): boolean {
+    return typeof target === "number";
+}
+
+/**
+ * Test if target is an object
+ *
+ * @param {unknown} target The varible to test
+ * @returns {boolean} If the varible is a object type
+ */
+export function isObject(target: unknown): boolean {
+    return typeof target === "object" && target !== null;
+}
+
+/**
+ * Test if target is a string
+ *
+ * @param {unknown} target The varible to test
+ * @returns {boolean} If the varible is a string type
+ */
+export function isString(target: unknown): boolean {
+    return typeof target === "string" && target !== null;
+}
+
+/**
+ * Convert bytes to a human readable string.
+ *
+ * @param {number} bytes The bytes to convert.
+ * @returns {string} The bytes in human readable string.
+ */
+export const bytesReadable = (bytes: number): string => {
+    if (Number.isNaN(bytes)) {
+        return "0 Bytes";
+    }
+
+    if (Math.abs(bytes) < 1024) {
+        return bytes + " Bytes";
+    }
+
+    const units = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    let u = -1;
+    const r = 10 ** 1;
+
+    do {
+        bytes /= 1000;
+        ++u;
+    } while (
+        Math.round(Math.abs(bytes) * r) / r >= 1000 &&
+        u < units.length - 1
+    );
+
+    return bytes.toFixed(1) + " " + units[u];
+};
diff --git a/resources/js/helpers/utils.ts b/resources/js/helpers/utils.ts
new file mode 100644
index 0000000..0d44845
--- /dev/null
+++ b/resources/js/helpers/utils.ts
@@ -0,0 +1,64 @@
+/**
+ * Tests if an object or string is empty.
+ *
+ * @param {object|string} objOrString The object or string.
+ * @returns {boolean} If the object or string is empty.
+ */
+export const isEmpty = (objOrString: unknown): boolean => {
+    if (objOrString == null) {
+        return true;
+    } else if (typeof objOrString === "string") {
+        return objOrString.length == 0;
+    } else if (
+        typeof objOrString == "object" &&
+        Object.keys(objOrString).length === 0
+    ) {
+        return true;
+    }
+
+    return false;
+};
+
+/**
+ * Returns a url to a file type icon based on file name.
+ *
+ * @param {string} fileName The filename with extension.
+ * @returns {string} The url to the file type icon.
+ */
+export const getFileIconImagePath = (fileName: string): string => {
+    const ext = fileName.split(".").pop();
+    return `/img/fileicons/${ext}.png`;
+};
+
+/**
+ * Returns a url to a file preview icon based on file url.
+ *
+ * @param {string} url The url of the file.
+ * @returns {string} The url to the file preview icon.
+ */
+export const getFilePreview = (url: string): string => {
+    const ext = url.split(".").pop();
+    if (ext) {
+        if (/(gif|jpe?g|png)/i.test(ext)) {
+            return `${url}?w=200`;
+        }
+
+        return `/img/fileicons/${ext}.png`;
+    }
+
+    return "/img/fileicons/unknown.png";
+};
+
+/**
+ * Clamps a number between 2 numbers.
+ *
+ * @param {number} n The number to clamp.
+ * @param {number} min The minimum allowable number.
+ * @param {number} max The maximum allowable number.
+ * @returns {number} The clamped number.
+ */
+export const clamp = (n: number, min: number, max: number): number => {
+    if (n < min) return min;
+    if (n > max) return max;
+    return n;
+};
diff --git a/resources/js/helpers/uuid.ts b/resources/js/helpers/uuid.ts
new file mode 100644
index 0000000..6bc794a
--- /dev/null
+++ b/resources/js/helpers/uuid.ts
@@ -0,0 +1,24 @@
+/**
+ * Test if target is a UUID
+ *
+ * @param {string} uuid The variable to test
+ * @returns {boolean} If the varible is a UUID
+ */
+export const isUUID = (uuid: string): boolean => {
+    return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
+        uuid
+    );
+};
+
+/**
+ * Generates a random UUID.
+ *
+ * @returns {string} A random UUID.
+ */
+export const randomUUID = (): string => {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16) | 0;
+        const v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+};
diff --git a/resources/js/helpers/validate.ts b/resources/js/helpers/validate.ts
new file mode 100644
index 0000000..ca3c177
--- /dev/null
+++ b/resources/js/helpers/validate.ts
@@ -0,0 +1,844 @@
+import { bytesReadable } from "../helpers/types";
+import { SMDate } from "./datetime";
+
+export interface ValidationObject {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+export interface ValidationResult {
+    valid: boolean;
+    invalidMessages: Array<string>;
+}
+
+export const defaultValidationResult: ValidationResult = {
+    valid: true,
+    invalidMessages: [],
+};
+
+export const createValidationResult = (
+    valid: boolean,
+    message: string | Array<string> = ""
+) => {
+    if (typeof message == "string") {
+        message = [message];
+    }
+
+    return {
+        valid: valid,
+        invalidMessages: message,
+    };
+};
+
+/**
+ * Validation Min
+ */
+const VALIDATION_MIN_TYPE = ["String", "Number"];
+type ValidationMinType = (typeof VALIDATION_MIN_TYPE)[number];
+
+interface ValidationMinOptions {
+    min: number;
+    type?: ValidationMinType;
+    invalidMessage?: string | ((options: ValidationMinOptions) => string);
+}
+
+interface ValidationMinObject extends ValidationMinOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationMinOptions: ValidationMinOptions = {
+    min: 1,
+    type: "String",
+    invalidMessage: (options: ValidationMinOptions) => {
+        return options.type == "String"
+            ? `Required to be at least ${options.min} characters.`
+            : `Required to be at least ${options.min}.`;
+    },
+};
+
+export function Min(
+    minOrOptions: number | ValidationMinOptions,
+    options?: ValidationMinOptions
+);
+export function Min(options: ValidationMinOptions): ValidationMinObject;
+
+/**
+ * Validate field length or number is at minimum or higher/larger
+ *
+ * @param minOrOptions minimum number or options data
+ * @param options options data
+ * @returns ValidationMinObject
+ */
+export function Min(
+    minOrOptions: number | ValidationMinOptions,
+    options?: ValidationMinOptions
+): ValidationMinObject {
+    if (typeof minOrOptions === "number") {
+        options = { ...defaultValidationMinOptions, ...(options || {}) };
+        options.min = minOrOptions;
+    } else {
+        options = { ...defaultValidationMinOptions, ...(minOrOptions || {}) };
+    }
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            return Promise.resolve({
+                valid:
+                    this.type == "String"
+                        ? value.toString().length >= this.min
+                        : parseInt(value) >= this.min,
+                invalidMessages: [
+                    typeof this.invalidMessage === "string"
+                        ? this.invalidMessage
+                        : this.invalidMessage(this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * Validation Max
+ */
+const VALIDATION_MAX_TYPE = ["String", "Number"];
+type ValidationMaxType = (typeof VALIDATION_MAX_TYPE)[number];
+
+interface ValidationMaxOptions {
+    max: number;
+    type?: ValidationMaxType;
+    invalidMessage?: string | ((options: ValidationMaxOptions) => string);
+}
+
+interface ValidationMaxObject extends ValidationMaxOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationMaxOptions: ValidationMaxOptions = {
+    max: 1,
+    type: "String",
+    invalidMessage: (options: ValidationMaxOptions) => {
+        return options.type == "String"
+            ? `Required to be less than ${options.max + 1} characters.`
+            : `Required to be less than ${options.max + 1}.`;
+    },
+};
+
+export function Max(
+    maxOrOptions: number | ValidationMaxOptions,
+    options?: ValidationMaxOptions
+): ValidationMaxObject;
+export function Max(options: ValidationMaxOptions): ValidationMaxObject;
+
+/**
+ * Validate field length or number is at maximum or smaller
+ *
+ * @param maxOrOptions maximum number or options data
+ * @param options options data
+ * @returns ValidationMaxObject
+ */
+export function Max(
+    maxOrOptions: number | ValidationMaxOptions,
+    options?: ValidationMaxOptions
+): ValidationMaxObject {
+    if (typeof maxOrOptions === "number") {
+        options = { ...defaultValidationMaxOptions, ...(options || {}) };
+        options.max = maxOrOptions;
+    } else {
+        options = { ...defaultValidationMaxOptions, ...(maxOrOptions || {}) };
+    }
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            return Promise.resolve({
+                valid:
+                    this.type == "String"
+                        ? value.toString().length <= this.max
+                        : parseInt(value) <= this.max,
+                invalidMessages: [
+                    typeof this.invalidMessage === "string"
+                        ? this.invalidMessage
+                        : this.invalidMessage(this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * PASSWORD
+ */
+interface ValidationPasswordOptions {
+    invalidMessage?: string | ((options: ValidationPasswordOptions) => string);
+}
+
+interface ValidationPasswordObject extends ValidationPasswordOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationPasswordOptions: ValidationPasswordOptions = {
+    invalidMessage:
+        "Your password needs to have at least a letter, a number and a special character.",
+};
+
+/**
+ * Validate field is in a valid password format
+ *
+ * @param options options data
+ * @returns ValidationPasswordObject
+ */
+export function Password(
+    options?: ValidationPasswordOptions
+): ValidationPasswordObject {
+    options = { ...defaultValidationPasswordOptions, ...(options || {}) };
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            return Promise.resolve({
+                valid: /(?=.*[A-Za-z])(?=.*\d)(?=.*[.@$!%*#?&])[A-Za-z\d.@$!%*#?&]{1,}$/.test(
+                    value
+                ),
+                invalidMessages: [
+                    typeof this.invalidMessage === "string"
+                        ? this.invalidMessage
+                        : this.invalidMessage(this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * EMAIL
+ */
+interface ValidationEmailOptions {
+    invalidMessage?: string | ((options: ValidationEmailOptions) => string);
+}
+
+interface ValidationEmailObject extends ValidationEmailOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationEmailOptions: ValidationEmailOptions = {
+    invalidMessage: "Your email is not in a supported format.",
+};
+
+/**
+ * Validate field is in a valid Email format
+ *
+ * @param options options data
+ * @returns ValidationEmailObject
+ */
+export function Email(options?: ValidationEmailOptions): ValidationEmailObject {
+    options = { ...defaultValidationEmailOptions, ...(options || {}) };
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            return Promise.resolve({
+                valid:
+                    value.length == 0 ||
+                    /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value),
+                invalidMessages: [
+                    typeof this.invalidMessage === "string"
+                        ? this.invalidMessage
+                        : this.invalidMessage(this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * PHONE
+ */
+interface ValidationPhoneOptions {
+    invalidMessage?: string | ((options: ValidationPhoneOptions) => string);
+}
+
+interface ValidationPhoneObject extends ValidationPhoneOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationPhoneOptions: ValidationPhoneOptions = {
+    invalidMessage: "Your Phone number is not in a supported format.",
+};
+
+/**
+ * Validate field is in a valid Phone format
+ *
+ * @param options options data
+ * @returns ValidationPhoneObject
+ */
+export function Phone(options?: ValidationPhoneOptions): ValidationPhoneObject {
+    options = { ...defaultValidationPhoneOptions, ...(options || {}) };
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            return Promise.resolve({
+                valid:
+                    value.length == 0 ||
+                    /^(\+|00)?[0-9][0-9 \-().]{7,32}$/.test(value),
+                invalidMessages: [
+                    typeof this.invalidMessage === "string"
+                        ? this.invalidMessage
+                        : this.invalidMessage(this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * NUMBER
+ */
+interface ValidationNumberOptions {
+    invalidMessage?: string | ((options: ValidationNumberOptions) => string);
+}
+
+interface ValidationNumberObject extends ValidationNumberOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationNumberOptions: ValidationNumberOptions = {
+    invalidMessage: "Must be a number.",
+};
+
+/**
+ * Validate field is in a valid Whole number format
+ *
+ * @param options options data
+ * @returns ValidationNumberObject
+ */
+export function Number(
+    options?: ValidationNumberOptions
+): ValidationNumberObject {
+    options = { ...defaultValidationNumberOptions, ...(options || {}) };
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            return Promise.resolve({
+                valid: value.length == 0 || /^0?\d+$/.test(value),
+                invalidMessages: [
+                    typeof this.invalidMessage === "string"
+                        ? this.invalidMessage
+                        : this.invalidMessage(this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * DATE
+ */
+interface ValidationDateOptions {
+    before?: string | ((value: string) => string);
+    after?: string | ((value: string) => string);
+    invalidMessage?: string | ((options: ValidationDateOptions) => string);
+    invalidBeforeMessage?:
+        | string
+        | ((options: ValidationDateOptions) => string);
+    invalidAfterMessage?: string | ((options: ValidationDateOptions) => string);
+}
+
+interface ValidationDateObject extends ValidationDateOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationDateOptions: ValidationDateOptions = {
+    before: "",
+    after: "",
+    invalidMessage: "Must be a valid date.",
+    invalidBeforeMessage: (options: ValidationDateOptions) => {
+        return `Must be a date before ${options.before}.`;
+    },
+    invalidAfterMessage: (options: ValidationDateOptions) => {
+        return `Must be a date after ${options.after}.`;
+    },
+};
+
+/**
+ * Validate field is in a valid Date format
+ *
+ * @param options options data
+ * @returns ValidationDateObject
+ */
+export function Date(options?: ValidationDateOptions): ValidationDateObject {
+    options = { ...defaultValidationDateOptions, ...(options || {}) };
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            let valid = true;
+            let invalidMessageType = "invalidMessage";
+
+            const parsedDate = new SMDate(value);
+
+            if (parsedDate.isValid() == true) {
+                const beforeDate = new SMDate(
+                    typeof (options["before"] = options?.before || "") ===
+                    "function"
+                        ? options.before(value)
+                        : options.before
+                );
+                const afterDate = new SMDate(
+                    typeof (options["after"] = options?.after || "") ===
+                    "function"
+                        ? options.after(value)
+                        : options.after
+                );
+                if (
+                    beforeDate.isValid() == true &&
+                    parsedDate.isBefore(beforeDate) == false
+                ) {
+                    valid = false;
+                    invalidMessageType = "invalidBeforeMessage";
+                }
+                if (
+                    afterDate.isValid() == true &&
+                    parsedDate.isAfter(afterDate) == false
+                ) {
+                    valid = false;
+                    invalidMessageType = "invalidAfterMessage";
+                }
+            } else {
+                valid = false;
+            }
+
+            return Promise.resolve({
+                valid: valid,
+                invalidMessages: [
+                    typeof this[invalidMessageType] === "string"
+                        ? this[invalidMessageType]
+                        : this[invalidMessageType](this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * TIME
+ */
+interface ValidationTimeOptions {
+    before?: string | ((value: string) => string);
+    after?: string | ((value: string) => string);
+    invalidMessage?: string | ((options: ValidationTimeOptions) => string);
+    invalidBeforeMessage?:
+        | string
+        | ((options: ValidationTimeOptions) => string);
+    invalidAfterMessage?: string | ((options: ValidationTimeOptions) => string);
+}
+
+interface ValidationTimeObject extends ValidationTimeOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationTimeOptions: ValidationTimeOptions = {
+    before: "",
+    after: "",
+    invalidMessage: "Must be a valid time.",
+    invalidBeforeMessage: (options: ValidationTimeOptions) => {
+        return `Must be a time before ${options.before}.`;
+    },
+    invalidAfterMessage: (options: ValidationTimeOptions) => {
+        return `Must be a time after ${options.after}.`;
+    },
+};
+
+/**
+ * Validate field is in a valid Time format
+ *
+ * @param options options data
+ * @returns ValidationTimeObject
+ */
+export function Time(options?: ValidationTimeOptions): ValidationTimeObject {
+    options = { ...defaultValidationTimeOptions, ...(options || {}) };
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            let valid = true;
+            let invalidMessageType = "invalidMessage";
+
+            const parsedTime = new SMDate(value);
+            if (parsedTime.isValid() == true) {
+                const beforeTime = new SMDate(
+                    typeof (options["before"] = options?.before || "") ===
+                    "function"
+                        ? options.before(value)
+                        : options.before
+                );
+                const afterTime = new SMDate(
+                    typeof (options["after"] = options?.after || "") ===
+                    "function"
+                        ? options.after(value)
+                        : options.after
+                );
+
+                if (
+                    beforeTime.isValid() == true &&
+                    parsedTime.isBefore(beforeTime) == false
+                ) {
+                    valid = false;
+                    invalidMessageType = "invalidBeforeMessage";
+                }
+                if (
+                    afterTime.isValid() == true &&
+                    parsedTime.isAfter(afterTime) == false
+                ) {
+                    valid = false;
+                    invalidMessageType = "invalidAfterMessage";
+                }
+            } else {
+                valid = false;
+            }
+
+            return Promise.resolve({
+                valid: valid,
+                invalidMessages: [
+                    typeof this[invalidMessageType] === "string"
+                        ? this[invalidMessageType]
+                        : this[invalidMessageType](this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * DATETIME
+ */
+interface ValidationDateTimeOptions {
+    before?: string | ((value: string) => string);
+    after?: string | ((value: string) => string);
+    invalidMessage?: string | ((options: ValidationDateTimeOptions) => string);
+    invalidBeforeMessage?:
+        | string
+        | ((options: ValidationDateTimeOptions) => string);
+    invalidAfterMessage?:
+        | string
+        | ((options: ValidationDateTimeOptions) => string);
+}
+
+interface ValidationDateTimeObject extends ValidationDateTimeOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationDateTimeOptions: ValidationDateTimeOptions = {
+    before: "",
+    after: "",
+    invalidMessage: "Must be a valid date and time.",
+    invalidBeforeMessage: (options: ValidationDateTimeOptions) => {
+        return `Must be a date/time before ${options.before}.`;
+    },
+    invalidAfterMessage: (options: ValidationDateTimeOptions) => {
+        return `Must be a date/time after ${options.after}.`;
+    },
+};
+
+/**
+ * Validate field is in a valid Date format
+ *
+ * @param options options data
+ * @returns ValidationDateObject
+ */
+export function DateTime(
+    options?: ValidationDateTimeOptions
+): ValidationDateTimeObject {
+    options = { ...defaultValidationDateTimeOptions, ...(options || {}) };
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            let valid = true;
+            let invalidMessageType = "invalidMessage";
+
+            const parsedDate = new SMDate(value);
+
+            if (parsedDate.isValid() == true) {
+                const beforeDate = new SMDate(
+                    typeof (options["before"] = options?.before || "") ===
+                    "function"
+                        ? options.before(value)
+                        : options.before
+                );
+                const afterDate = new SMDate(
+                    typeof (options["after"] = options?.after || "") ===
+                    "function"
+                        ? options.after(value)
+                        : options.after
+                );
+                if (
+                    beforeDate.isValid() == true &&
+                    parsedDate.isBefore(beforeDate) == false
+                ) {
+                    valid = false;
+                    invalidMessageType = "invalidBeforeMessage";
+                }
+                if (
+                    afterDate.isValid() == true &&
+                    parsedDate.isAfter(afterDate) == false
+                ) {
+                    valid = false;
+                    invalidMessageType = "invalidAfterMessage";
+                }
+            } else {
+                valid = false;
+            }
+
+            return Promise.resolve({
+                valid: valid,
+                invalidMessages: [
+                    typeof this[invalidMessageType] === "string"
+                        ? this[invalidMessageType]
+                        : this[invalidMessageType](this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * CUSTOM
+ */
+type ValidationCustomCallback = (value: string) => Promise<boolean | string>;
+
+interface ValidationCustomOptions {
+    callback: ValidationCustomCallback;
+    invalidMessage?: string | ((options: ValidationCustomOptions) => string);
+}
+
+interface ValidationCustomObject extends ValidationCustomOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationCustomOptions: ValidationCustomOptions = {
+    callback: async () => {
+        return true;
+    },
+    invalidMessage: "This field is invalid.",
+};
+
+export function Custom(
+    callbackOrOptions: ValidationCustomCallback | ValidationCustomOptions,
+    options?: ValidationCustomOptions
+);
+export function Custom(
+    options: ValidationCustomOptions
+): ValidationCustomObject;
+
+/**
+ * Validate field is in a valid Custom format
+ *
+ * @param callbackOrOptions
+ * @param options options data
+ * @returns ValidationCustomObject
+ */
+export function Custom(
+    callbackOrOptions: ValidationCustomCallback | ValidationCustomOptions,
+    options?: ValidationCustomOptions
+): ValidationCustomObject {
+    if (typeof callbackOrOptions === "function") {
+        options = { ...defaultValidationCustomOptions, ...(options || {}) };
+        options.callback = callbackOrOptions;
+    } else {
+        options = {
+            ...defaultValidationCustomOptions,
+            ...(callbackOrOptions || {}),
+        };
+    }
+
+    return {
+        ...options,
+        validate: async function (value: string): Promise<ValidationResult> {
+            const validateResult = {
+                valid: true,
+                invalidMessages: [
+                    typeof this.invalidMessage === "string"
+                        ? this.invalidMessage
+                        : this.invalidMessage(this),
+                ],
+            };
+
+            const callbackResult =
+                typeof this.callback === "function"
+                    ? await this.callback(value)
+                    : true;
+
+            if (typeof callbackResult === "string") {
+                if (callbackResult.length > 0) {
+                    validateResult.valid = false;
+                    validateResult.invalidMessages = [callbackResult];
+                }
+            } else if (callbackResult !== true) {
+                validateResult.valid = false;
+            }
+
+            return validateResult;
+        },
+    };
+}
+
+/**
+ * And
+ *
+ * @param list
+ */
+export const And = (list: Array<ValidationObject>) => {
+    return {
+        list: list,
+        validate: async function (value: string) {
+            const validationResult: ValidationResult = {
+                valid: true,
+                invalidMessages: [],
+            };
+
+            await Promise.all(
+                this.list.map(async (item: ValidationObject) => {
+                    const validationItemResult = await item.validate(value);
+                    if (validationItemResult.valid == false) {
+                        validationResult.valid = false;
+                        validationResult.invalidMessages =
+                            validationResult.invalidMessages.concat(
+                                validationItemResult.invalidMessages
+                            );
+                    }
+                })
+            );
+
+            return validationResult;
+        },
+    };
+};
+
+/**
+ * Required
+ */
+interface ValidationRequiredOptions {
+    invalidMessage?: string | ((options: ValidationRequiredOptions) => string);
+}
+
+interface ValidationRequiredObject extends ValidationRequiredOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationRequiredOptions: ValidationRequiredOptions = {
+    invalidMessage: "This field is required.",
+};
+
+/**
+ * Validate field contains value
+ *
+ * @param options options data
+ * @returns ValidationRequiredObject
+ */
+export function Required(
+    options?: ValidationRequiredOptions
+): ValidationRequiredObject {
+    options = { ...defaultValidationRequiredOptions, ...(options || {}) };
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            return Promise.resolve({
+                valid: value.length > 0,
+                invalidMessages: [
+                    typeof this.invalidMessage === "string"
+                        ? this.invalidMessage
+                        : this.invalidMessage(this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * Url
+ */
+interface ValidationUrlOptions {
+    invalidMessage?: string | ((options: ValidationUrlOptions) => string);
+}
+
+interface ValidationUrlObject extends ValidationUrlOptions {
+    validate: (value: string) => Promise<ValidationResult>;
+}
+
+const defaultValidationUrlOptions: ValidationUrlOptions = {
+    invalidMessage: "Not a supported Url format.",
+};
+
+/**
+ * Validate field is in a valid Email format
+ *
+ * @param options options data
+ * @returns ValidationEmailObject
+ */
+export function Url(options?: ValidationUrlOptions): ValidationUrlObject {
+    options = { ...defaultValidationUrlOptions, ...(options || {}) };
+
+    return {
+        ...options,
+        validate: function (value: string): Promise<ValidationResult> {
+            return Promise.resolve({
+                valid: /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*(:\d+)?([/?#][^\s]*)?$/.test(
+                    value
+                ),
+                invalidMessages: [
+                    typeof this.invalidMessage === "string"
+                        ? this.invalidMessage
+                        : this.invalidMessage(this),
+                ],
+            });
+        },
+    };
+}
+
+/**
+ * FileSize
+ */
+interface ValidationFileSizeOptions {
+    size: number;
+    invalidMessage?: string | ((options: ValidationFileSizeOptions) => string);
+}
+
+interface ValidationFileSizeObject extends ValidationFileSizeOptions {
+    validate: (value: File) => Promise<ValidationResult>;
+}
+
+const defaultValidationFileSizeOptions: ValidationFileSizeOptions = {
+    size: 1024 * 1024 * 1024, // 1 Mb
+    invalidMessage: (options) => {
+        return `The file size must be less than ${bytesReadable(options.size)}`;
+    },
+};
+
+/**
+ * Validate field is in a valid Email format
+ *
+ * @param options options data
+ * @returns ValidationEmailObject
+ */
+export function FileSize(
+    options?: ValidationFileSizeOptions
+): ValidationFileSizeObject {
+    options = { ...defaultValidationFileSizeOptions, ...(options || {}) };
+
+    return {
+        ...options,
+        validate: function (value: File): Promise<ValidationResult> {
+            return Promise.resolve({
+                valid: value.size < options.size,
+                invalidMessages: [
+                    typeof this.invalidMessage === "string"
+                        ? this.invalidMessage
+                        : this.invalidMessage(this),
+                ],
+            });
+        },
+    };
+}
diff --git a/resources/js/helpers/validation.js b/resources/js/helpers/validation.js
deleted file mode 100644
index 377bfc9..0000000
--- a/resources/js/helpers/validation.js
+++ /dev/null
@@ -1,360 +0,0 @@
-import { watch } from "vue";
-
-let oldFormData = {};
-
-const bytesReadable = (bytes) => {
-    if (Math.abs(bytes) < 1024) {
-        return bytes + "B";
-    }
-
-    const units = ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-    let u = -1;
-    const r = 10 ** 1;
-
-    do {
-        bytes /= 1024;
-        ++u;
-    } while (
-        Math.round(Math.abs(bytes) * r) / r >= 1024 &&
-        u < units.length - 1
-    );
-
-    return bytes.toFixed(1) + "" + units[u];
-};
-
-const validateMessage = (ruleData, rule, defMessage) => {
-    let msg =
-        ruleData[rule + "_message"] !== undefined
-            ? ruleData[rule + "_message"]
-            : defMessage;
-    return msg
-        .replaceAll("%d", ruleData[rule])
-        .replaceAll("%b", bytesReadable(ruleData[rule]));
-};
-
-const validateSingle = (fieldData) => {
-    let error = "";
-
-    if (
-        fieldData.rules &&
-        (fieldData.enabled == undefined || fieldData.enabled == true)
-    ) {
-        // Fill in the type declaration
-        if (Object.keys(fieldData.rules).includes("type")) {
-            if (typeof fieldData.rules.type === "string") {
-                fieldData.rules[fieldData.rules.type] = true;
-            } else if (
-                typeof fieldData.rules.type === "object" &&
-                "type" in fieldData.rules.type
-            ) {
-                fieldData.rules[fieldData.rules.type.type] = true;
-            }
-        }
-
-        if (
-            error.length == 0 &&
-            Object.keys(fieldData.rules).includes("required") &&
-            (fieldData.rules.required == true ||
-                (typeof fieldData.rules.required == "function" &&
-                    fieldData.rules.required() == true)) &&
-            (fieldData.value == null || fieldData.value.length == 0)
-        ) {
-            error = validateMessage(
-                fieldData.rules,
-                "required",
-                "This item is required"
-            );
-        }
-
-        if (
-            error.length == 0 &&
-            Object.keys(fieldData.rules).includes("min") &&
-            (fieldData.value == null ||
-                fieldData.value.length < fieldData.rules.min)
-        ) {
-            error = validateMessage(
-                fieldData.rules,
-                "min",
-                "This item is required to be at least %d characters"
-            );
-        }
-
-        if (
-            error.length == 0 &&
-            Object.keys(fieldData.rules).includes("max") &&
-            fieldData.value != null &&
-            fieldData.value.length > fieldData.rules.max
-        ) {
-            error = validateMessage(
-                fieldData.rules,
-                "max",
-                "This item is required to be at no longer than %d characters"
-            );
-        }
-
-        if (
-            error.length == 0 &&
-            Object.keys(fieldData.rules).includes("email") &&
-            /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(
-                fieldData.value
-            ) == false
-        ) {
-            error = validateMessage(
-                fieldData.rules,
-                "email",
-                "This item is required to be a valid email address"
-            );
-        }
-
-        if (error.length == 0 && Object.keys(fieldData.rules).includes("url")) {
-            try {
-                new URL(fieldData.value);
-            } catch (e) {
-                error = validateMessage(
-                    fieldData.rules,
-                    "url",
-                    "This item is required to be a valid URL"
-                );
-            }
-        }
-
-        if (
-            error.length == 0 &&
-            Object.keys(fieldData.rules).includes("password")
-        ) {
-            if (
-                (fieldData.rules.password == true ||
-                    fieldData.rules.password == "basic") &&
-                /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{1,}$/.test(
-                    fieldData.value
-                ) == false
-            ) {
-                error = validateMessage(
-                    fieldData.rules,
-                    "password",
-                    "Your password needs to have at least 1 letter and 1 number"
-                );
-            } else if (
-                fieldData.rules.password == "special" &&
-                /(?=.*[A-Za-z])(?=.*\d)(?=.*[.@$!%*#?&])[A-Za-z\d.@$!%*#?&]{1,}$/.test(
-                    fieldData.value
-                ) == false
-            ) {
-                error = validateMessage(
-                    fieldData.rules,
-                    "password",
-                    "Your password needs to have at least a letter, a number and a special character"
-                );
-            } else if (
-                fieldData.rules.password == "uppercase_special" &&
-                /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{1,}$/.test(
-                    fieldData.value
-                ) == false
-            ) {
-                error = validateMessage(
-                    fieldData.rules,
-                    "password",
-                    "Your password needs to have at least a lowercase and uppercase letter, 1 number and 1 special character"
-                );
-            }
-        }
-
-        if (
-            error.length == 0 &&
-            Object.keys(fieldData.rules).includes("phone") &&
-            fieldData.value != null &&
-            fieldData.value.length > 0 &&
-            /^(\+|00)?[0-9][0-9 \-\(\)\.]{7,32}$/.test(fieldData.value) == false
-        ) {
-            error = validateMessage(
-                fieldData.rules,
-                "phone",
-                "This item is required to be a valid phone number"
-            );
-        }
-
-        if (
-            error.length == 0 &&
-            Object.keys(fieldData.rules).includes("datetime") &&
-            fieldData.value != null &&
-            fieldData.value.length > 0
-        ) {
-            try {
-                new Date(fieldData.value);
-            } catch (e) {
-                error = validateMessage(
-                    fieldData.rules,
-                    "datetime",
-                    "A valid date/time is required"
-                );
-            }
-        }
-
-        if (
-            error.length == 0 &&
-            Object.keys(fieldData.rules).includes("afterdate") &&
-            fieldData.value != null &&
-            fieldData.value.length > 0
-        ) {
-            let failed = false;
-
-            try {
-                let after = fieldData.rules.afterdate;
-                if (typeof after == "function") {
-                    after = after();
-                }
-
-                if (
-                    after.length > 0 &&
-                    new Date(fieldData.value) <= new Date(after)
-                ) {
-                    failed = true;
-                }
-            } catch (e) {
-                failed = true;
-            }
-
-            if (failed) {
-                error = validateMessage(
-                    fieldData.rules,
-                    "afterdate",
-                    "Date is required to be after the beginning date."
-                );
-            }
-        }
-
-        if (
-            error.length == 0 &&
-            Object.keys(fieldData.rules).includes("fileSize") &&
-            fieldData.value != null &&
-            fieldData.value.size > fieldData.rules.fileSize
-        ) {
-            error = validateMessage(
-                fieldData.rules,
-                "fileSize",
-                "The file size larger than the allowed size"
-            );
-        }
-
-        if (
-            error.length == 0 &&
-            Object.keys(fieldData.rules).includes("custom")
-        ) {
-            error = fieldData.rules.custom(fieldData.value);
-        }
-
-        fieldData.error = error;
-    }
-};
-
-const validateRules = (
-    formData,
-    force = false,
-    pageRef = null,
-    showMessages = false
-) => {
-    Object.keys(oldFormData).forEach((key) => {
-        if (
-            key in formData &&
-            (oldFormData[key].value != parseValue(formData[key].value) ||
-                force == true) &&
-            formData[key].rules !== undefined &&
-            (pageRef == null || formData[key].page == pageRef.value)
-        ) {
-            oldFormData[key].value = parseValue(formData[key].value);
-            if (showMessages == true) {
-                validateSingle(formData[key]);
-            } else {
-                formData[key].error = "";
-            }
-        }
-    });
-};
-
-const parseValue = (val) => {
-    if (val instanceof File) {
-        return JSON.stringify({
-            name: val.name,
-            size: val.size,
-            lastModified: val.lastModified,
-            lastModifiedDate: val.lastModifiedDate,
-            type: val.type,
-        });
-    }
-
-    return val;
-};
-
-export const useValidation = (
-    formData,
-    pageRef = null,
-    showMessages = false
-) => {
-    watch(formData, (newFormData) => {
-        if (newFormData) {
-            validateRules(newFormData, false, pageRef, showMessages);
-        }
-    });
-};
-
-export const isValidated = (formData, pageRef = null) => {
-    let result = true;
-
-    oldFormData = JSON.parse(JSON.stringify(formData));
-    validateRules(formData, true, pageRef, true);
-
-    Object.keys(formData).forEach((key) => {
-        if (
-            formData[key].error !== undefined &&
-            formData[key].error.length > 0 &&
-            (pageRef == null || pageRef.value == formData[key].page)
-        ) {
-            result = false;
-        }
-    });
-
-    return result;
-};
-
-export const fieldValidate = (fieldData) => {
-    validateSingle(fieldData);
-};
-
-export const restParseErrors = (formData, formErrorRef, response) => {
-    let foundKeys = false;
-
-    if (response.response?.data?.errors) {
-        Object.keys(response.response.data.errors).forEach((key) => {
-            if (formData[key] !== undefined) {
-                foundKeys = true;
-                if (Array.isArray(response.response.data.errors[key])) {
-                    formData[key].error = response.response.data.errors[key][0];
-                } else {
-                    formData[key].error = response.response.data.errors[key];
-                }
-            }
-        });
-    }
-
-    if (foundKeys == false) {
-        const msg = response.response?.data?.message
-            ? response.response?.data?.message
-            : "An unknown server error occurred. Please try again later";
-        if (Array.isArray(formErrorRef)) {
-            formErrorRef[0][formErrorRef[1]] = msg;
-        } else if (formErrorRef.value !== undefined) {
-            formErrorRef.value = msg;
-        }
-    }
-};
-
-export const clearFormData = (formData) => {
-    Object.keys(formData).forEach((key) => {
-        if ("value" in formData[key]) {
-            formData[key]["value"] = "";
-        }
-        if ("error" in formData[key]) {
-            formData[key]["error"] = "";
-        }
-    });
-};
diff --git a/resources/js/lib/prism.js b/resources/js/lib/prism.js
new file mode 100644
index 0000000..1608998
--- /dev/null
+++ b/resources/js/lib/prism.js
@@ -0,0 +1,25 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&languages=markup+clike+javascript+bash+c+javadoclike+js-extras+json+json5+log+markup-templating+objectivec+perl+php+phpdoc+php-extras+python+regex+sql+swift+typoscript+yaml */
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+Prism.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
+Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
+Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
+!function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",a={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},n={bash:a,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?:\.\w+)*(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},parameter:{pattern:/(^|\s)-{1,2}(?:\w+:[+-]?)?\w+(?:\.\w+)*(?=[=\s]|$)/,alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:n},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:a}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:n},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:n.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:n.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cargo|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|java|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|sysctl|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},a.inside=e.languages.bash;for(var s=["comment","function-name","for-or-select","assign-left","parameter","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=n.variable[1].inside,i=0;i<s.length;i++)o[s[i]]=e.languages.bash[s[i]];e.languages.sh=e.languages.bash,e.languages.shell=e.languages.bash}(Prism);
+Prism.languages.c=Prism.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),Prism.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),Prism.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},Prism.languages.c.string],char:Prism.languages.c.char,comment:Prism.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:Prism.languages.c}}}}),Prism.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete Prism.languages.c.boolean;
+!function(e){function n(e,n){return"___"+e.toUpperCase()+n+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(t,a,r,o){if(t.language===a){var c=t.tokenStack=[];t.code=t.code.replace(r,(function(e){if("function"==typeof o&&!o(e))return e;for(var r,i=c.length;-1!==t.code.indexOf(r=n(a,i));)++i;return c[i]=e,r})),t.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(t,a){if(t.language===a&&t.tokenStack){t.grammar=e.languages[a];var r=0,o=Object.keys(t.tokenStack);!function c(i){for(var u=0;u<i.length&&!(r>=o.length);u++){var g=i[u];if("string"==typeof g||g.content&&"string"==typeof g.content){var l=o[r],s=t.tokenStack[l],f="string"==typeof g?g:g.content,p=n(a,l),k=f.indexOf(p);if(k>-1){++r;var m=f.substring(0,k),d=new e.Token(a,e.tokenize(s,t.grammar),"language-"+a,s),h=f.substring(k+p.length),v=[];m&&v.push.apply(v,c([m])),v.push(d),h&&v.push.apply(v,c([h])),"string"==typeof g?i.splice.apply(i,[u,1].concat(v)):g.content=v}}else g.content&&c(g.content)}return i}(t.tokens)}}}})}(Prism);
+!function(e){var a=/\/\*[\s\S]*?\*\/|\/\/.*|#(?!\[).*/,t=[{pattern:/\b(?:false|true)\b/i,alias:"boolean"},{pattern:/(::\s*)\b[a-z_]\w*\b(?!\s*\()/i,greedy:!0,lookbehind:!0},{pattern:/(\b(?:case|const)\s+)\b[a-z_]\w*(?=\s*[;=])/i,greedy:!0,lookbehind:!0},/\b(?:null)\b/i,/\b[A-Z_][A-Z0-9_]*\b(?!\s*\()/],i=/\b0b[01]+(?:_[01]+)*\b|\b0o[0-7]+(?:_[0-7]+)*\b|\b0x[\da-f]+(?:_[\da-f]+)*\b|(?:\b\d+(?:_\d+)*\.?(?:\d+(?:_\d+)*)?|\B\.\d+)(?:e[+-]?\d+)?/i,n=/<?=>|\?\?=?|\.{3}|\??->|[!=]=?=?|::|\*\*=?|--|\+\+|&&|\|\||<<|>>|[?~]|[/^|%*&<>.+-]=?/,s=/[{}\[\](),:;]/;e.languages.php={delimiter:{pattern:/\?>$|^<\?(?:php(?=\s)|=)?/i,alias:"important"},comment:a,variable:/\$+(?:\w+\b|(?=\{))/,package:{pattern:/(namespace\s+|use\s+(?:function\s+)?)(?:\\?\b[a-z_]\w*)+\b(?!\\)/i,lookbehind:!0,inside:{punctuation:/\\/}},"class-name-definition":{pattern:/(\b(?:class|enum|interface|trait)\s+)\b[a-z_]\w*(?!\\)\b/i,lookbehind:!0,alias:"class-name"},"function-definition":{pattern:/(\bfunction\s+)[a-z_]\w*(?=\s*\()/i,lookbehind:!0,alias:"function"},keyword:[{pattern:/(\(\s*)\b(?:array|bool|boolean|float|int|integer|object|string)\b(?=\s*\))/i,alias:"type-casting",greedy:!0,lookbehind:!0},{pattern:/([(,?]\s*)\b(?:array(?!\s*\()|bool|callable|(?:false|null)(?=\s*\|)|float|int|iterable|mixed|object|self|static|string)\b(?=\s*\$)/i,alias:"type-hint",greedy:!0,lookbehind:!0},{pattern:/(\)\s*:\s*(?:\?\s*)?)\b(?:array(?!\s*\()|bool|callable|(?:false|null)(?=\s*\|)|float|int|iterable|mixed|never|object|self|static|string|void)\b/i,alias:"return-type",greedy:!0,lookbehind:!0},{pattern:/\b(?:array(?!\s*\()|bool|float|int|iterable|mixed|object|string|void)\b/i,alias:"type-declaration",greedy:!0},{pattern:/(\|\s*)(?:false|null)\b|\b(?:false|null)(?=\s*\|)/i,alias:"type-declaration",greedy:!0,lookbehind:!0},{pattern:/\b(?:parent|self|static)(?=\s*::)/i,alias:"static-context",greedy:!0},{pattern:/(\byield\s+)from\b/i,lookbehind:!0},/\bclass\b/i,{pattern:/((?:^|[^\s>:]|(?:^|[^-])>|(?:^|[^:]):)\s*)\b(?:abstract|and|array|as|break|callable|case|catch|clone|const|continue|declare|default|die|do|echo|else|elseif|empty|enddeclare|endfor|endforeach|endif|endswitch|endwhile|enum|eval|exit|extends|final|finally|fn|for|foreach|function|global|goto|if|implements|include|include_once|instanceof|insteadof|interface|isset|list|match|namespace|never|new|or|parent|print|private|protected|public|readonly|require|require_once|return|self|static|switch|throw|trait|try|unset|use|var|while|xor|yield|__halt_compiler)\b/i,lookbehind:!0}],"argument-name":{pattern:/([(,]\s*)\b[a-z_]\w*(?=\s*:(?!:))/i,lookbehind:!0},"class-name":[{pattern:/(\b(?:extends|implements|instanceof|new(?!\s+self|\s+static))\s+|\bcatch\s*\()\b[a-z_]\w*(?!\\)\b/i,greedy:!0,lookbehind:!0},{pattern:/(\|\s*)\b[a-z_]\w*(?!\\)\b/i,greedy:!0,lookbehind:!0},{pattern:/\b[a-z_]\w*(?!\\)\b(?=\s*\|)/i,greedy:!0},{pattern:/(\|\s*)(?:\\?\b[a-z_]\w*)+\b/i,alias:"class-name-fully-qualified",greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}},{pattern:/(?:\\?\b[a-z_]\w*)+\b(?=\s*\|)/i,alias:"class-name-fully-qualified",greedy:!0,inside:{punctuation:/\\/}},{pattern:/(\b(?:extends|implements|instanceof|new(?!\s+self\b|\s+static\b))\s+|\bcatch\s*\()(?:\\?\b[a-z_]\w*)+\b(?!\\)/i,alias:"class-name-fully-qualified",greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}},{pattern:/\b[a-z_]\w*(?=\s*\$)/i,alias:"type-declaration",greedy:!0},{pattern:/(?:\\?\b[a-z_]\w*)+(?=\s*\$)/i,alias:["class-name-fully-qualified","type-declaration"],greedy:!0,inside:{punctuation:/\\/}},{pattern:/\b[a-z_]\w*(?=\s*::)/i,alias:"static-context",greedy:!0},{pattern:/(?:\\?\b[a-z_]\w*)+(?=\s*::)/i,alias:["class-name-fully-qualified","static-context"],greedy:!0,inside:{punctuation:/\\/}},{pattern:/([(,?]\s*)[a-z_]\w*(?=\s*\$)/i,alias:"type-hint",greedy:!0,lookbehind:!0},{pattern:/([(,?]\s*)(?:\\?\b[a-z_]\w*)+(?=\s*\$)/i,alias:["class-name-fully-qualified","type-hint"],greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}},{pattern:/(\)\s*:\s*(?:\?\s*)?)\b[a-z_]\w*(?!\\)\b/i,alias:"return-type",greedy:!0,lookbehind:!0},{pattern:/(\)\s*:\s*(?:\?\s*)?)(?:\\?\b[a-z_]\w*)+\b(?!\\)/i,alias:["class-name-fully-qualified","return-type"],greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}}],constant:t,function:{pattern:/(^|[^\\\w])\\?[a-z_](?:[\w\\]*\w)?(?=\s*\()/i,lookbehind:!0,inside:{punctuation:/\\/}},property:{pattern:/(->\s*)\w+/,lookbehind:!0},number:i,operator:n,punctuation:s};var l={pattern:/\{\$(?:\{(?:\{[^{}]+\}|[^{}]+)\}|[^{}])+\}|(^|[^\\{])\$+(?:\w+(?:\[[^\r\n\[\]]+\]|->\w+)?)/,lookbehind:!0,inside:e.languages.php},r=[{pattern:/<<<'([^']+)'[\r\n](?:.*[\r\n])*?\1;/,alias:"nowdoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<<'[^']+'|[a-z_]\w*;$/i,alias:"symbol",inside:{punctuation:/^<<<'?|[';]$/}}}},{pattern:/<<<(?:"([^"]+)"[\r\n](?:.*[\r\n])*?\1;|([a-z_]\w*)[\r\n](?:.*[\r\n])*?\2;)/i,alias:"heredoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<<(?:"[^"]+"|[a-z_]\w*)|[a-z_]\w*;$/i,alias:"symbol",inside:{punctuation:/^<<<"?|[";]$/}},interpolation:l}},{pattern:/`(?:\\[\s\S]|[^\\`])*`/,alias:"backtick-quoted-string",greedy:!0},{pattern:/'(?:\\[\s\S]|[^\\'])*'/,alias:"single-quoted-string",greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,alias:"double-quoted-string",greedy:!0,inside:{interpolation:l}}];e.languages.insertBefore("php","variable",{string:r,attribute:{pattern:/#\[(?:[^"'\/#]|\/(?![*/])|\/\/.*$|#(?!\[).*$|\/\*(?:[^*]|\*(?!\/))*\*\/|"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*')+\](?=\s*[a-z$#])/im,greedy:!0,inside:{"attribute-content":{pattern:/^(#\[)[\s\S]+(?=\]$)/,lookbehind:!0,inside:{comment:a,string:r,"attribute-class-name":[{pattern:/([^:]|^)\b[a-z_]\w*(?!\\)\b/i,alias:"class-name",greedy:!0,lookbehind:!0},{pattern:/([^:]|^)(?:\\?\b[a-z_]\w*)+/i,alias:["class-name","class-name-fully-qualified"],greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}}],constant:t,number:i,operator:n,punctuation:s}},delimiter:{pattern:/^#\[|\]$/,alias:"punctuation"}}}}),e.hooks.add("before-tokenize",(function(a){/<\?/.test(a.code)&&e.languages["markup-templating"].buildPlaceholders(a,"php",/<\?(?:[^"'/#]|\/(?![*/])|("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|(?:\/\/|#(?!\[))(?:[^?\n\r]|\?(?!>))*(?=$|\?>|[\r\n])|#\[|\/\*(?:[^*]|\*(?!\/))*(?:\*\/|$))*?(?:\?>|$)/g)})),e.hooks.add("after-tokenize",(function(a){e.languages["markup-templating"].tokenizePlaceholders(a,"php")}))}(Prism);
+!function(a){var e=a.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(e,"addSupport",{value:function(e,n){"string"==typeof e&&(e=[e]),e.forEach((function(e){!function(e,n){var t="doc-comment",r=a.languages[e];if(r){var o=r[t];if(o||(o=(r=a.languages.insertBefore(e,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[t]),o instanceof RegExp&&(o=r[t]={pattern:o}),Array.isArray(o))for(var i=0,s=o.length;i<s;i++)o[i]instanceof RegExp&&(o[i]={pattern:o[i]}),n(o[i]);else n(o)}}(e,(function(a){a.inside||(a.inside={}),a.inside.rest=n}))}))}}),e.addSupport(["java","javascript","php"],e)}(Prism);
+!function(a){function e(a,e){return RegExp(a.replace(/<ID>/g,(function(){return"(?!\\s)[_$a-zA-Z\\xA0-\\uFFFF](?:(?!\\s)[$\\w\\xA0-\\uFFFF])*"})),e)}a.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+a.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),a.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+a.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),a.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),a.languages.insertBefore("javascript","keyword",{imports:{pattern:e("(\\bimport\\b\\s*)(?:<ID>(?:\\s*,\\s*(?:\\*\\s*as\\s+<ID>|\\{[^{}]*\\}))?|\\*\\s*as\\s+<ID>|\\{[^{}]*\\})(?=\\s*\\bfrom\\b)"),lookbehind:!0,inside:a.languages.javascript},exports:{pattern:e("(\\bexport\\b\\s*)(?:\\*(?:\\s*as\\s+<ID>)?(?=\\s*\\bfrom\\b)|\\{[^{}]*\\})"),lookbehind:!0,inside:a.languages.javascript}}),a.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),a.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),a.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:e("(\\.\\s*)#?<ID>"),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var t=["function","function-variable","method","method-variable","property-access"],r=0;r<t.length;r++){var n=t[r],s=a.languages.javascript[n];"RegExp"===a.util.type(s)&&(s=a.languages.javascript[n]={pattern:s});var o=s.inside||{};s.inside=o,o["maybe-class-name"]=/^[A-Z][\s\S]*/}}(Prism);
+Prism.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},Prism.languages.webmanifest=Prism.languages.json;
+!function(n){var e=/("|')(?:\\(?:\r\n?|\n|.)|(?!\1)[^\\\r\n])*\1/;n.languages.json5=n.languages.extend("json",{property:[{pattern:RegExp(e.source+"(?=\\s*:)"),greedy:!0},{pattern:/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/,alias:"unquoted"}],string:{pattern:e,greedy:!0},number:/[+-]?\b(?:NaN|Infinity|0x[a-fA-F\d]+)\b|[+-]?(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[eE][+-]?\d+\b)?/})}(Prism);
+Prism.languages.log={string:{pattern:/"(?:[^"\\\r\n]|\\.)*"|'(?![st] | \w)(?:[^'\\\r\n]|\\.)*'/,greedy:!0},exception:{pattern:/(^|[^\w.])[a-z][\w.]*(?:Error|Exception):.*(?:(?:\r\n?|\n)[ \t]*(?:at[ \t].+|\.{3}.*|Caused by:.*))+(?:(?:\r\n?|\n)[ \t]*\.\.\. .*)?/,lookbehind:!0,greedy:!0,alias:["javastacktrace","language-javastacktrace"],inside:Prism.languages.javastacktrace||{keyword:/\bat\b/,function:/[a-z_][\w$]*(?=\()/,punctuation:/[.:()]/}},level:[{pattern:/\b(?:ALERT|CRIT|CRITICAL|EMERG|EMERGENCY|ERR|ERROR|FAILURE|FATAL|SEVERE)\b/,alias:["error","important"]},{pattern:/\b(?:WARN|WARNING|WRN)\b/,alias:["warning","important"]},{pattern:/\b(?:DISPLAY|INF|INFO|NOTICE|STATUS)\b/,alias:["info","keyword"]},{pattern:/\b(?:DBG|DEBUG|FINE)\b/,alias:["debug","keyword"]},{pattern:/\b(?:FINER|FINEST|TRACE|TRC|VERBOSE|VRB)\b/,alias:["trace","comment"]}],property:{pattern:/((?:^|[\]|])[ \t]*)[a-z_](?:[\w-]|\b\/\b)*(?:[. ]\(?\w(?:[\w-]|\b\/\b)*\)?)*:(?=\s)/im,lookbehind:!0},separator:{pattern:/(^|[^-+])-{3,}|={3,}|\*{3,}|- - /m,lookbehind:!0,alias:"comment"},url:/\b(?:file|ftp|https?):\/\/[^\s|,;'"]*[^\s|,;'">.]/,email:{pattern:/(^|\s)[-\w+.]+@[a-z][a-z0-9-]*(?:\.[a-z][a-z0-9-]*)+(?=\s)/,lookbehind:!0,alias:"url"},"ip-address":{pattern:/\b(?:\d{1,3}(?:\.\d{1,3}){3})\b/,alias:"constant"},"mac-address":{pattern:/\b[a-f0-9]{2}(?::[a-f0-9]{2}){5}\b/i,alias:"constant"},domain:{pattern:/(^|\s)[a-z][a-z0-9-]*(?:\.[a-z][a-z0-9-]*)*\.[a-z][a-z0-9-]+(?=\s)/,lookbehind:!0,alias:"constant"},uuid:{pattern:/\b[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\b/i,alias:"constant"},hash:{pattern:/\b(?:[a-f0-9]{32}){1,2}\b/i,alias:"constant"},"file-path":{pattern:/\b[a-z]:[\\/][^\s|,;:(){}\[\]"']+|(^|[\s:\[\](>|])\.{0,2}\/\w[^\s|,;:(){}\[\]"']*/i,lookbehind:!0,greedy:!0,alias:"string"},date:{pattern:RegExp("\\b\\d{4}[-/]\\d{2}[-/]\\d{2}(?:T(?=\\d{1,2}:)|(?=\\s\\d{1,2}:))|\\b\\d{1,4}[-/ ](?:\\d{1,2}|Apr|Aug|Dec|Feb|Jan|Jul|Jun|Mar|May|Nov|Oct|Sep)[-/ ]\\d{2,4}T?\\b|\\b(?:(?:Fri|Mon|Sat|Sun|Thu|Tue|Wed)(?:\\s{1,2}(?:Apr|Aug|Dec|Feb|Jan|Jul|Jun|Mar|May|Nov|Oct|Sep))?|Apr|Aug|Dec|Feb|Jan|Jul|Jun|Mar|May|Nov|Oct|Sep)\\s{1,2}\\d{1,2}\\b","i"),alias:"number"},time:{pattern:/\b\d{1,2}:\d{1,2}:\d{1,2}(?:[.,:]\d+)?(?:\s?[+-]\d{2}:?\d{2}|Z)?\b/,alias:"number"},boolean:/\b(?:false|null|true)\b/i,number:{pattern:/(^|[^.\w])(?:0x[a-f0-9]+|0o[0-7]+|0b[01]+|v?\d[\da-f]*(?:\.\d+)*(?:e[+-]?\d+)?[a-z]{0,3}\b)\b(?!\.\w)/i,lookbehind:!0},operator:/[;:?<=>~/@!$%&+\-|^(){}*#]/,punctuation:/[\[\].,]/};
+Prism.languages.objectivec=Prism.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<<?=?|>>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete Prism.languages.objectivec["class-name"],Prism.languages.objc=Prism.languages.objectivec;
+!function(e){var n="(?:\\((?:[^()\\\\]|\\\\[^])*\\)|\\{(?:[^{}\\\\]|\\\\[^])*\\}|\\[(?:[^[\\]\\\\]|\\\\[^])*\\]|<(?:[^<>\\\\]|\\\\[^])*>)";e.languages.perl={comment:[{pattern:/(^\s*)=\w[\s\S]*?=cut.*/m,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\$])#.*/,lookbehind:!0,greedy:!0}],string:[{pattern:RegExp("\\b(?:q|qq|qw|qx)(?![a-zA-Z0-9])\\s*(?:"+["([^a-zA-Z0-9\\s{(\\[<])(?:(?!\\1)[^\\\\]|\\\\[^])*\\1","([a-zA-Z0-9])(?:(?!\\2)[^\\\\]|\\\\[^])*\\2",n].join("|")+")"),greedy:!0},{pattern:/("|`)(?:(?!\1)[^\\]|\\[\s\S])*\1/,greedy:!0},{pattern:/'(?:[^'\\\r\n]|\\.)*'/,greedy:!0}],regex:[{pattern:RegExp("\\b(?:m|qr)(?![a-zA-Z0-9])\\s*(?:"+["([^a-zA-Z0-9\\s{(\\[<])(?:(?!\\1)[^\\\\]|\\\\[^])*\\1","([a-zA-Z0-9])(?:(?!\\2)[^\\\\]|\\\\[^])*\\2",n].join("|")+")[msixpodualngc]*"),greedy:!0},{pattern:RegExp("(^|[^-])\\b(?:s|tr|y)(?![a-zA-Z0-9])\\s*(?:"+["([^a-zA-Z0-9\\s{(\\[<])(?:(?!\\2)[^\\\\]|\\\\[^])*\\2(?:(?!\\2)[^\\\\]|\\\\[^])*\\2","([a-zA-Z0-9])(?:(?!\\3)[^\\\\]|\\\\[^])*\\3(?:(?!\\3)[^\\\\]|\\\\[^])*\\3",n+"\\s*"+n].join("|")+")[msixpodualngcer]*"),lookbehind:!0,greedy:!0},{pattern:/\/(?:[^\/\\\r\n]|\\.)*\/[msixpodualngc]*(?=\s*(?:$|[\r\n,.;})&|\-+*~<>!?^]|(?:and|cmp|eq|ge|gt|le|lt|ne|not|or|x|xor)\b))/,greedy:!0}],variable:[/[&*$@%]\{\^[A-Z]+\}/,/[&*$@%]\^[A-Z_]/,/[&*$@%]#?(?=\{)/,/[&*$@%]#?(?:(?:::)*'?(?!\d)[\w$]+(?![\w$]))+(?:::)*/,/[&*$@%]\d+/,/(?!%=)[$@%][!"#$%&'()*+,\-.\/:;<=>?@[\\\]^_`{|}~]/],filehandle:{pattern:/<(?![<=])\S*?>|\b_\b/,alias:"symbol"},"v-string":{pattern:/v\d+(?:\.\d+)*|\d+(?:\.\d+){2,}/,alias:"string"},function:{pattern:/(\bsub[ \t]+)\w+/,lookbehind:!0},keyword:/\b(?:any|break|continue|default|delete|die|do|else|elsif|eval|for|foreach|given|goto|if|last|local|my|next|our|package|print|redo|require|return|say|state|sub|switch|undef|unless|until|use|when|while)\b/,number:/\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)\b/,operator:/-[rwxoRWXOezsfdlpSbctugkTBMAC]\b|\+[+=]?|-[-=>]?|\*\*?=?|\/\/?=?|=[=~>]?|~[~=]?|\|\|?=?|&&?=?|<(?:=>?|<=?)?|>>?=?|![~=]?|[%^]=?|\.(?:=|\.\.?)?|[\\?]|\bx(?:=|\b)|\b(?:and|cmp|eq|ge|gt|le|lt|ne|not|or|xor)\b/,punctuation:/[{}[\];(),:]/}}(Prism);
+!function(a){var e="(?:\\b[a-zA-Z]\\w*|[|\\\\[\\]])+";a.languages.phpdoc=a.languages.extend("javadoclike",{parameter:{pattern:RegExp("(@(?:global|param|property(?:-read|-write)?|var)\\s+(?:"+e+"\\s+)?)\\$\\w+"),lookbehind:!0}}),a.languages.insertBefore("phpdoc","keyword",{"class-name":[{pattern:RegExp("(@(?:global|package|param|property(?:-read|-write)?|return|subpackage|throws|var)\\s+)"+e),lookbehind:!0,inside:{keyword:/\b(?:array|bool|boolean|callback|double|false|float|int|integer|mixed|null|object|resource|self|string|true|void)\b/,punctuation:/[|\\[\]()]/}}]}),a.languages.javadoclike.addSupport("php",a.languages.phpdoc)}(Prism);
+Prism.languages.insertBefore("php","variable",{this:{pattern:/\$this\b/,alias:"keyword"},global:/\$(?:GLOBALS|HTTP_RAW_POST_DATA|_(?:COOKIE|ENV|FILES|GET|POST|REQUEST|SERVER|SESSION)|argc|argv|http_response_header|php_errormsg)\b/,scope:{pattern:/\b[\w\\]+::/,inside:{keyword:/\b(?:parent|self|static)\b/,punctuation:/::|\\/}}});
+Prism.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},Prism.languages.python["string-interpolation"].inside.interpolation.inside.rest=Prism.languages.python,Prism.languages.py=Prism.languages.python;
+!function(a){var e={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},n=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/,t="(?:[^\\\\-]|"+n.source+")",s=RegExp(t+"-"+t),i={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"};a.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:s,inside:{escape:n,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":e,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:n}},"special-escape":e,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":i}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:n,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|<?[=!]|[idmnsuxU]+(?:-[idmnsuxU]+)?:?))?/,alias:"punctuation",inside:{"group-name":i}},{pattern:/\)/,alias:"punctuation"}],quantifier:{pattern:/(?:[+*?]|\{\d+(?:,\d*)?\})[?+]?/,alias:"number"},alternation:{pattern:/\|/,alias:"keyword"}}}(Prism);
+Prism.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},variable:[{pattern:/@(["'`])(?:\\[\s\S]|(?!\1)[^\\])+\1/,greedy:!0},/@[\w.$]+/],string:{pattern:/(^|[^@\\])("|')(?:\\[\s\S]|(?!\2)[^\\]|\2\2)*\2/,greedy:!0,lookbehind:!0},identifier:{pattern:/(^|[^@\\])`(?:\\[\s\S]|[^`\\]|``)*`/,greedy:!0,lookbehind:!0,inside:{punctuation:/^`|`$/}},function:/\b(?:AVG|COUNT|FIRST|FORMAT|LAST|LCASE|LEN|MAX|MID|MIN|MOD|NOW|ROUND|SUM|UCASE)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR(?:ACTER|SET)?|CHECK(?:POINT)?|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMNS?|COMMENT|COMMIT(?:TED)?|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS(?:TABLE)?|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|CYCLE|DATA(?:BASES?)?|DATE(?:TIME)?|DAY|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITERS?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE|ELSE(?:IF)?|ENABLE|ENCLOSED|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPED?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|HOUR|IDENTITY(?:COL|_INSERT)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTERVAL|INTO|INVOKER|ISOLATION|ITERATE|JOIN|KEYS?|KILL|LANGUAGE|LAST|LEAVE|LEFT|LEVEL|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|LOOP|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MINUTE|MODE|MODIFIES|MODIFY|MONTH|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL|NATURAL|NCHAR|NEXT|NO|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREPARE|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READS?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEAT(?:ABLE)?|REPLACE|REPLICATION|REQUIRE|RESIGNAL|RESTORE|RESTRICT|RETURN(?:ING|S)?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SECOND|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|SQL|START(?:ING)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED|TEXT(?:SIZE)?|THEN|TIME(?:STAMP)?|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNLOCK|UNPIVOT|UNSIGNED|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?|YEAR)\b/i,boolean:/\b(?:FALSE|NULL|TRUE)\b/i,number:/\b0x[\da-f]+\b|\b\d+(?:\.\d*)?|\B\.\d+\b/i,operator:/[-+*\/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/};
+Prism.languages.swift={comment:{pattern:/(^|[^\\:])(?:\/\/.*|\/\*(?:[^/*]|\/(?!\*)|\*(?!\/)|\/\*(?:[^*]|\*(?!\/))*\*\/)*\*\/)/,lookbehind:!0,greedy:!0},"string-literal":[{pattern:RegExp('(^|[^"#])(?:"(?:\\\\(?:\\((?:[^()]|\\([^()]*\\))*\\)|\r\n|[^(])|[^\\\\\r\n"])*"|"""(?:\\\\(?:\\((?:[^()]|\\([^()]*\\))*\\)|[^(])|[^\\\\"]|"(?!""))*""")(?!["#])'),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\\($/,alias:"punctuation"},punctuation:/\\(?=[\r\n])/,string:/[\s\S]+/}},{pattern:RegExp('(^|[^"#])(#+)(?:"(?:\\\\(?:#+\\((?:[^()]|\\([^()]*\\))*\\)|\r\n|[^#])|[^\\\\\r\n])*?"|"""(?:\\\\(?:#+\\((?:[^()]|\\([^()]*\\))*\\)|[^#])|[^\\\\])*?""")\\2'),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\#+\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\#+\($/,alias:"punctuation"},string:/[\s\S]+/}}],directive:{pattern:RegExp("#(?:(?:elseif|if)\\b(?:[ \t]*(?:![ \t]*)?(?:\\b\\w+\\b(?:[ \t]*\\((?:[^()]|\\([^()]*\\))*\\))?|\\((?:[^()]|\\([^()]*\\))*\\))(?:[ \t]*(?:&&|\\|\\|))?)+|(?:else|endif)\\b)"),alias:"property",inside:{"directive-name":/^#\w+/,boolean:/\b(?:false|true)\b/,number:/\b\d+(?:\.\d+)*\b/,operator:/!|&&|\|\||[<>]=?/,punctuation:/[(),]/}},literal:{pattern:/#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,alias:"constant"},"other-directive":{pattern:/#\w+\b/,alias:"property"},attribute:{pattern:/@\w+/,alias:"atrule"},"function-definition":{pattern:/(\bfunc\s+)\w+/,lookbehind:!0,alias:"function"},label:{pattern:/\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,lookbehind:!0,alias:"important"},keyword:/\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,boolean:/\b(?:false|true)\b/,nil:{pattern:/\bnil\b/,alias:"constant"},"short-argument":/\$\d+\b/,omit:{pattern:/\b_\b/,alias:"keyword"},number:/\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,"class-name":/\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,function:/\b[a-z_]\w*(?=\s*\()/i,constant:/\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,operator:/[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,punctuation:/[{}[\]();,.:\\]/},Prism.languages.swift["string-literal"].forEach((function(e){e.inside.interpolation.inside=Prism.languages.swift}));
+!function(E){var n=/\b(?:ACT|ACTIFSUB|CARRAY|CASE|CLEARGIF|COA|COA_INT|CONSTANTS|CONTENT|CUR|EDITPANEL|EFFECT|EXT|FILE|FLUIDTEMPLATE|FORM|FRAME|FRAMESET|GIFBUILDER|GMENU|GMENU_FOLDOUT|GMENU_LAYERS|GP|HMENU|HRULER|HTML|IENV|IFSUB|IMAGE|IMGMENU|IMGMENUITEM|IMGTEXT|IMG_RESOURCE|INCLUDE_TYPOSCRIPT|JSMENU|JSMENUITEM|LLL|LOAD_REGISTER|NO|PAGE|RECORDS|RESTORE_REGISTER|TEMPLATE|TEXT|TMENU|TMENUITEM|TMENU_LAYERS|USER|USER_INT|_GIFBUILDER|global|globalString|globalVar)\b/;E.languages.typoscript={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:= \t]|(?:^|[^= \t])[ \t]+)\/\/.*/,lookbehind:!0,greedy:!0},{pattern:/(^|[^"'])#.*/,lookbehind:!0,greedy:!0}],function:[{pattern:/<INCLUDE_TYPOSCRIPT:\s*source\s*=\s*(?:"[^"\r\n]*"|'[^'\r\n]*')\s*>/,inside:{string:{pattern:/"[^"\r\n]*"|'[^'\r\n]*'/,inside:{keyword:n}},keyword:{pattern:/INCLUDE_TYPOSCRIPT/}}},{pattern:/@import\s*(?:"[^"\r\n]*"|'[^'\r\n]*')/,inside:{string:/"[^"\r\n]*"|'[^'\r\n]*'/}}],string:{pattern:/^([^=]*=[< ]?)(?:(?!\]\n).)*/,lookbehind:!0,inside:{function:/\{\$.*\}/,keyword:n,number:/^\d+$/,punctuation:/[,|:]/}},keyword:n,number:{pattern:/\b\d+\s*[.{=]/,inside:{operator:/[.{=]/}},tag:{pattern:/\.?[-\w\\]+\.?/,inside:{punctuation:/\./}},punctuation:/[{}[\];(),.:|]/,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/},E.languages.tsconfig=E.languages.typoscript}(Prism);
+!function(e){var n=/[*&][^\s[\]{},]+/,r=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,t="(?:"+r.source+"(?:[ \t]+"+n.source+")?|"+n.source+"(?:[ \t]+"+r.source+")?)",a="(?:[^\\s\\x00-\\x08\\x0e-\\x1f!\"#%&'*,\\-:>?@[\\]`{|}\\x7f-\\x84\\x86-\\x9f\\ud800-\\udfff\\ufffe\\uffff]|[?:-]<PLAIN>)(?:[ \t]*(?:(?![#:])<PLAIN>|:<PLAIN>))*".replace(/<PLAIN>/g,(function(){return"[^\\s\\x00-\\x08\\x0e-\\x1f,[\\]{}\\x7f-\\x84\\x86-\\x9f\\ud800-\\udfff\\ufffe\\uffff]"})),d="\"(?:[^\"\\\\\r\n]|\\\\.)*\"|'(?:[^'\\\\\r\n]|\\\\.)*'";function o(e,n){n=(n||"").replace(/m/g,"")+"m";var r="([:\\-,[{]\\s*(?:\\s<<prop>>[ \t]+)?)(?:<<value>>)(?=[ \t]*(?:$|,|\\]|\\}|(?:[\r\n]\\s*)?#))".replace(/<<prop>>/g,(function(){return t})).replace(/<<value>>/g,(function(){return e}));return RegExp(r,n)}e.languages.yaml={scalar:{pattern:RegExp("([\\-:]\\s*(?:\\s<<prop>>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\\S[^\r\n]*(?:\\2[^\r\n]+)*)".replace(/<<prop>>/g,(function(){return t}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp("((?:^|[:\\-,[{\r\n?])[ \t]*(?:<<prop>>[ \t]+)?)<<key>>(?=\\s*:\\s)".replace(/<<prop>>/g,(function(){return t})).replace(/<<key>>/g,(function(){return"(?:"+a+"|"+d+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:o("\\d{4}-\\d\\d?-\\d\\d?(?:[tT]|[ \t]+)\\d\\d?:\\d{2}:\\d{2}(?:\\.\\d*)?(?:[ \t]*(?:Z|[-+]\\d\\d?(?::\\d{2})?))?|\\d{4}-\\d{2}-\\d{2}|\\d\\d?:\\d{2}(?::\\d{2}(?:\\.\\d*)?)?"),lookbehind:!0,alias:"number"},boolean:{pattern:o("false|true","i"),lookbehind:!0,alias:"important"},null:{pattern:o("null|~","i"),lookbehind:!0,alias:"important"},string:{pattern:o(d),lookbehind:!0,greedy:!0},number:{pattern:o("[+-]?(?:0x[\\da-f]+|0o[0-7]+|(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?|\\.inf|\\.nan)","i"),lookbehind:!0},tag:r,important:n,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(Prism);
diff --git a/resources/js/main.js b/resources/js/main.js
index 4e18705..2e48314 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -1,25 +1,23 @@
-import "./bootstrap";
-import { createApp } from "vue";
+import Router from "@/router";
+import "normalize.css";
 import { createPinia } from "pinia";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
-import Router from "@/router";
-import "./axios.js";
-import "normalize.css";
-import "../css/app.scss";
-import App from "./views/App.vue";
-import FontAwesomeIcon from "@/helpers/fontawesome";
-import SMContainer from "./components/SMContainer.vue";
-import SMRow from "./components/SMRow.vue";
-import SMColumn from "./components/SMColumn.vue";
-import { PromiseDialog } from "vue3-promise-dialog";
+import { createApp } from "vue";
 import { VueReCaptcha } from "vue-recaptcha-v3";
-import "trix/dist/trix.css";
+import { PromiseDialog } from "vue3-promise-dialog";
+import "../css/app.scss";
+import "./bootstrap";
+import SMColumn from "./components/SMColumn.vue";
+import SMContainer from "./components/SMContainer.vue";
+import SMPage from "./components/SMPage.vue";
+import SMRow from "./components/SMRow.vue";
+import "./lib/prism";
+import App from "./views/App.vue";
 
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 
 createApp(App)
-    .component("FontAwesomeIcon", FontAwesomeIcon)
     .use(pinia)
     .use(Router)
     .use(PromiseDialog)
@@ -32,4 +30,5 @@ createApp(App)
     .component("SMContainer", SMContainer)
     .component("SMRow", SMRow)
     .component("SMColumn", SMColumn)
+    .component("SMPage", SMPage)
     .mount("#app");
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index 4353299..8ce11fe 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -1,7 +1,8 @@
-import axios from "axios";
-import { createWebHistory, createRouter } from "vue-router";
 import { useUserStore } from "@/store/UserStore";
+import { createRouter, createWebHistory } from "vue-router";
+import { api } from "../helpers/api";
 import { useApplicationStore } from "../store/ApplicationStore";
+import { useProgressStore } from "../store/ProgressStore";
 
 export const routes = [
     {
@@ -36,14 +37,6 @@ export const routes = [
         },
         component: () => import("@/views/ResetPassword.vue"),
     },
-    {
-        path: "/about",
-        name: "about",
-        meta: {
-            title: "About",
-        },
-        component: () => import("@/views/About.vue"),
-    },
     {
         path: "/privacy",
         name: "privacy",
@@ -89,16 +82,16 @@ export const routes = [
         children: [
             {
                 path: "",
-                name: "workshop-list",
+                name: "event-list",
                 meta: {
                     title: "Workshops",
                 },
-                component: () => import("@/views/WorkshopList.vue"),
+                component: () => import("@/views/EventList.vue"),
             },
             {
                 path: ":id",
-                name: "workshop-view",
-                component: () => import("@/views/WorkshopView.vue"),
+                name: "event-view",
+                component: () => import("@/views/EventView.vue"),
             },
         ],
     },
@@ -123,7 +116,7 @@ export const routes = [
         path: "/contact",
         name: "contact",
         meta: {
-            title: "Contact Us",
+            title: "Contact",
         },
         component: () => import("@/views/Contact.vue"),
     },
@@ -140,16 +133,16 @@ export const routes = [
         children: [
             {
                 path: "",
-                name: "news",
+                name: "post-list",
                 meta: {
                     title: "News",
                 },
-                component: () => import("@/views/NewsList.vue"),
+                component: () => import("@/views/PostList.vue"),
             },
             {
                 path: ":slug",
                 name: "post-view",
-                component: () => import("@/views/NewsView.vue"),
+                component: () => import("@/views/PostView.vue"),
             },
         ],
     },
@@ -170,7 +163,7 @@ export const routes = [
                 children: [
                     {
                         path: "",
-                        name: "post-list",
+                        name: "dashboard-post-list",
                         meta: {
                             title: "Posts",
                             middleware: "authenticated",
@@ -180,7 +173,7 @@ export const routes = [
                     },
                     {
                         path: "create",
-                        name: "post-create",
+                        name: "dashboard-post-create",
                         meta: {
                             title: "Create Post",
                             middleware: "authenticated",
@@ -190,7 +183,7 @@ export const routes = [
                     },
                     {
                         path: ":id",
-                        name: "post-edit",
+                        name: "dashboard-post-edit",
                         meta: {
                             title: "Edit Post",
                             middleware: "authenticated",
@@ -205,7 +198,7 @@ export const routes = [
                 children: [
                     {
                         path: "",
-                        name: "event-list",
+                        name: "dashboard-event-list",
                         meta: {
                             title: "Events",
                             middleware: "authenticated",
@@ -215,7 +208,7 @@ export const routes = [
                     },
                     {
                         path: "create",
-                        name: "event-create",
+                        name: "dashboard-event-create",
                         meta: {
                             title: "Create Event",
                             middleware: "authenticated",
@@ -225,7 +218,7 @@ export const routes = [
                     },
                     {
                         path: ":id",
-                        name: "event-edit",
+                        name: "dashboard-event-edit",
                         meta: {
                             title: "Event Post",
                             middleware: "authenticated",
@@ -237,7 +230,7 @@ export const routes = [
             },
             {
                 path: "details",
-                name: "account-details",
+                name: "dashboard-account-details",
                 meta: {
                     title: "Account Details",
                     middleware: "authenticated",
@@ -249,7 +242,7 @@ export const routes = [
                 children: [
                     {
                         path: "",
-                        name: "user-list",
+                        name: "dashboard-user-list",
                         meta: {
                             title: "Users",
                             middleware: "authenticated",
@@ -259,7 +252,7 @@ export const routes = [
                     },
                     {
                         path: ":id",
-                        name: "user-edit",
+                        name: "dashboard-user-edit",
                         meta: {
                             title: "Edit User",
                             middleware: "authenticated",
@@ -274,7 +267,7 @@ export const routes = [
                 children: [
                     {
                         path: "",
-                        name: "media",
+                        name: "dashboard-media",
                         meta: {
                             title: "Media",
                             middleware: "authenticated",
@@ -284,7 +277,7 @@ export const routes = [
                     },
                     {
                         path: "upload",
-                        name: "media-upload",
+                        name: "dashboard-media-upload",
                         meta: {
                             title: "Upload Media",
                             middleware: "authenticated",
@@ -294,7 +287,7 @@ export const routes = [
                     },
                     {
                         path: "edit/:id",
-                        name: "media-edit",
+                        name: "dashboard-media-edit",
                         meta: {
                             title: "Edit Media",
                             middleware: "authenticated",
@@ -306,7 +299,7 @@ export const routes = [
             },
             {
                 path: "discord-bot-logs",
-                name: "discord-bot-logs",
+                name: "dashboard-discord-bot-logs",
                 meta: {
                     title: "Discord Bot Logs",
                     middleware: "authenticated",
@@ -336,6 +329,7 @@ export const routes = [
         name: "error-internal",
         meta: {
             title: "Server error",
+            hideInEditor: true,
         },
         component: () => import("@/components/errors/Internal.vue"),
     },
@@ -344,6 +338,7 @@ export const routes = [
         name: "forbidden",
         meta: {
             title: "Forbidden",
+            hideInEditor: true,
         },
         component: () => import("@/components/errors/Forbidden.vue"),
     },
@@ -352,6 +347,7 @@ export const routes = [
         name: "not-found",
         meta: {
             title: "Page not found",
+            hideInEditor: true,
         },
         component: () => import("@/components/errors/NotFound.vue"),
     },
@@ -369,15 +365,11 @@ const router = createRouter({
 // export let activeRoutes = [];
 
 router.beforeEach(async (to, from, next) => {
-    // BC Start
-    // activeRoutes = [];
-    // to.matched.forEach((record) => {
-    //     console.log(record.routeName);
-    //     activeRoutes.push(record);
-    // });
-
     const userStore = useUserStore();
     const applicationStore = useApplicationStore();
+    const progressStore = useProgressStore();
+
+    progressStore.start();
 
     applicationStore.clearDynamicTitle();
 
@@ -386,10 +378,10 @@ router.beforeEach(async (to, from, next) => {
         let redirect = false;
 
         try {
-            let res = await axios.get("me");
-            userStore.setUserDetails(res.data.user);
+            let res = await api.get("/me");
+            userStore.setUserDetails(res.json.user);
         } catch (err) {
-            if (err.response.status == 401) {
+            if (err.status == 401) {
                 userStore.clearUser();
                 redirect = true;
             }
@@ -450,15 +442,17 @@ router.beforeEach(async (to, from, next) => {
             .forEach((tag) => document.head.appendChild(tag));
     }
 
-    // Middleware
-    // if (to.meta.middleware == 'guest' && userStore.id) {
-    //     next({ name: 'home'})
-    // } else
     if (to.meta.middleware == "authenticated" && !userStore.id) {
+        progressStore.finish();
         next({ name: "login", query: { redirect: to.fullPath } });
     } else {
         next();
     }
 });
 
+router.afterEach((to, from) => {
+    const progressStore = useProgressStore();
+    progressStore.finish();
+});
+
 export default router;
diff --git a/resources/js/store/ApplicationStore.ts b/resources/js/store/ApplicationStore.ts
index de27ca8..2875179 100644
--- a/resources/js/store/ApplicationStore.ts
+++ b/resources/js/store/ApplicationStore.ts
@@ -1,15 +1,19 @@
 import { defineStore } from "pinia";
 
+type ApplicationStoreEventKeyUpCallback = (event: KeyboardEvent) => boolean;
+
 export interface ApplicationStore {
     dynamicTitle: string;
-    racers: boolean;
+    eventKeyUpStack: ApplicationStoreEventKeyUpCallback[];
+    _addedListener: boolean;
 }
 
 export const useApplicationStore = defineStore({
     id: "application",
     state: (): ApplicationStore => ({
         dynamicTitle: "",
-        racers: false,
+        eventKeyUpStack: [],
+        _addedListener: false,
     }),
 
     actions: {
@@ -21,5 +25,30 @@ export const useApplicationStore = defineStore({
         clearDynamicTitle() {
             this.$state.dynamicTitle = "";
         },
+
+        addKeyUpListener(callback: ApplicationStoreEventKeyUpCallback) {
+            this.eventKeyUpStack.push(callback);
+
+            if (!this._addedListener) {
+                document.addEventListener("keyup", (event: KeyboardEvent) => {
+                    this.eventKeyUpStack.every(
+                        (item: ApplicationStoreEventKeyUpCallback) => {
+                            const result = item(event);
+                            if (result) {
+                                return false;
+                            }
+
+                            return true;
+                        }
+                    );
+                });
+            }
+        },
+
+        removeKeyUpListener(callback: ApplicationStoreEventKeyUpCallback) {
+            this.eventKeyUpStack = this.eventKeyUpStack.filter(
+                (item: ApplicationStoreEventKeyUpCallback) => item !== callback
+            );
+        },
     },
 });
diff --git a/resources/js/store/ProgressStore.ts b/resources/js/store/ProgressStore.ts
new file mode 100644
index 0000000..d03cb97
--- /dev/null
+++ b/resources/js/store/ProgressStore.ts
@@ -0,0 +1,124 @@
+import { defineStore } from "pinia";
+import { clamp } from "../helpers/utils";
+
+export interface ProgressStore {
+    spinner: number;
+    status: number;
+    opacity: number;
+    queue: number;
+    timeoutID: number | null;
+}
+
+export const useProgressStore = defineStore({
+    id: "progress",
+    state: (): ProgressStore => ({
+        spinner: 0,
+        status: 0,
+        opacity: 0,
+        queue: 0,
+        timeoutID: null,
+    }),
+
+    actions: {
+        start() {
+            if (this.queue == 0 && this.opacity == 0) {
+                this.set(0);
+
+                const work = () => {
+                    window.setTimeout(() => {
+                        if (this.status < 1) {
+                            this._trickle();
+                            work();
+                        }
+                    }, 200);
+                };
+
+                work();
+
+                if (this.opacity == 0) {
+                    if (this.timeoutID != null) {
+                        window.clearTimeout(this.timeoutID);
+                    }
+
+                    this.timeoutID = window.setTimeout(() => {
+                        this._show();
+                        this.timeoutID = null;
+                    }, 2000);
+                }
+
+                if (this.spinner == 0) {
+                    this.spinner = 1;
+                }
+            }
+
+            ++this.queue;
+        },
+
+        set(number: number) {
+            const n = clamp(number, 0.08, 1);
+            this.status = n;
+        },
+
+        finish() {
+            if (this.queue > 0) {
+                --this.queue;
+            }
+        },
+
+        _trickle() {
+            const n = this.status;
+
+            if (this.queue == 0) {
+                if (this.opacity == 0 && this.timeoutID != null) {
+                    this._hide();
+                    window.clearTimeout(this.timeoutID);
+                    this.timeoutID = null;
+                } else if (this.timeoutID == null) {
+                    this.timeoutID = window.setTimeout(() => {
+                        this.set(1);
+                        this.timeoutID = null;
+
+                        this.timeoutID = window.setTimeout(() => {
+                            this._hide();
+                            this.timeoutID = null;
+
+                            window.setTimeout(() => {
+                                this.status = 0;
+                            }, 150);
+                        }, 500);
+                    }, 500);
+                }
+            }
+
+            if (n > 0 && n < 1) {
+                let amount = 0;
+
+                if (n >= 0 && n < 0.2) {
+                    amount = 0.1;
+                } else if (n >= 0.2 && n < 0.5) {
+                    amount = 0.04;
+                } else if (n >= 0.5 && n < 0.8) {
+                    amount = 0.02;
+                } else if (n >= 0.8 && n < 0.99) {
+                    amount = 0.005;
+                } else {
+                    amount = 0;
+                }
+
+                this.set(clamp(n + amount, 0, 0.994));
+            }
+        },
+
+        _show() {
+            this.opacity = 1;
+        },
+
+        _hide() {
+            this.opacity = 0;
+
+            if (this.spinner == 1) {
+                this.spinner = 0;
+            }
+        },
+    },
+});
diff --git a/resources/js/store/ToastStore.ts b/resources/js/store/ToastStore.ts
new file mode 100644
index 0000000..fe247b7
--- /dev/null
+++ b/resources/js/store/ToastStore.ts
@@ -0,0 +1,54 @@
+import { defineStore } from "pinia";
+
+export interface ToastOptions {
+    id?: number;
+    title?: string;
+    content: string;
+    type?: string;
+}
+
+export interface ToastItem {
+    id: number;
+    title: string;
+    content: string;
+    type: string;
+}
+
+export interface ToastStore {
+    toasts: ToastItem[];
+}
+
+export const defaultToastItem: ToastItem = {
+    id: 0,
+    title: "",
+    content: "",
+    type: "primary",
+};
+
+export const useToastStore = defineStore({
+    id: "toasts",
+    state: (): ToastStore => ({
+        toasts: [],
+    }),
+
+    actions: {
+        addToast(toast: ToastOptions) {
+            if (!toast.id || toast.id == 0) {
+                toast.id =
+                    Math.floor(Math.random() * Number.MAX_SAFE_INTEGER) + 1;
+            }
+
+            toast.title = toast.title || defaultToastItem.title;
+            toast.type = toast.type || defaultToastItem.type;
+
+            this.toasts.push(toast);
+            console.log(this.toasts[0].title);
+        },
+
+        clearToast(id: number) {
+            this.toasts = this.toasts.filter(
+                (item: ToastItem) => item.id !== id
+            );
+        },
+    },
+});
diff --git a/resources/js/store/UserStore.d.ts b/resources/js/store/UserStore.d.ts
deleted file mode 100644
index 2187cfe..0000000
--- a/resources/js/store/UserStore.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import "pinia";
-import { UserDetails } from "./UserStore";
-
-declare module "pinia" {
-    export interface PiniaCustomProperties {
-        setUserDetails(user: UserDetails): void;
-
-        id: string;
-        token: string;
-        username: string;
-        firstName: string;
-        lastName: string;
-        email: string;
-        phone: string;
-        permissions: string[];
-    }
-}
diff --git a/resources/js/store/UserStore.ts b/resources/js/store/UserStore.ts
index 2e65586..fac0d00 100644
--- a/resources/js/store/UserStore.ts
+++ b/resources/js/store/UserStore.ts
@@ -1,5 +1,4 @@
-import axios from "axios";
-import { defineStore } from "pinia";
+import { defineStore, DefineStoreOptions } from "pinia";
 
 export interface UserDetails {
     id: string;
@@ -11,7 +10,7 @@ export interface UserDetails {
     permissions: string[];
 }
 
-export interface UserStore {
+export interface UserState {
     id: string;
     token: string;
     username: string;
@@ -24,7 +23,7 @@ export interface UserStore {
 
 export const useUserStore = defineStore({
     id: "user",
-    state: (): UserStore => ({
+    state: (): UserState => ({
         id: "",
         token: "",
         username: "",
@@ -50,19 +49,6 @@ export const useUserStore = defineStore({
             this.$state.token = token;
         },
 
-        async fetchUser() {
-            const res = await axios.get("users/" + this.$state.id);
-
-            this.$state.id = res.data.user.id;
-            this.$state.token = res.data.token;
-            this.$state.username = res.data.user.username;
-            this.$state.firstName = res.data.user.first_name;
-            this.$state.lastName = res.data.user.last_name;
-            this.$state.email = res.data.user.email;
-            this.$state.phone = res.data.user.phone;
-            this.$state.permissions = res.data.user.permissions || [];
-        },
-
         clearUser() {
             this.$state.id = null;
             this.$state.token = null;
@@ -76,4 +62,4 @@ export const useUserStore = defineStore({
     },
 
     persist: true,
-});
+} as DefineStoreOptions<string, unknown, unknown, unknown> & { persist?: boolean });
diff --git a/resources/js/tests/datetime.test.ts b/resources/js/tests/datetime.test.ts
new file mode 100644
index 0000000..a130bf1
--- /dev/null
+++ b/resources/js/tests/datetime.test.ts
@@ -0,0 +1,33 @@
+import { expect, describe, it } from "vitest";
+import { format } from "../helpers/datetime";
+
+describe("format()", () => {
+    it("should return an empty string when the first argument is not a Date object", () => {
+        const result = format("not a date", "yyyy-MM-dd");
+        expect(result).toEqual("");
+    });
+
+    it("should format the date correctly", () => {
+        const date = new Date("2022-02-19T12:34:56");
+        const result = format(date, "yyyy-MM-dd HH:mm:ss");
+        expect(result).toEqual("2022-02-19 12:34:56");
+    });
+
+    it("should handle single-digit month and day", () => {
+        const date = new Date("2022-01-01T00:00:00");
+        const result = format(date, "yy-M-d");
+        expect(result).toEqual("22-1-1");
+    });
+
+    it("should handle day of week and month name abbreviations", () => {
+        const date = new Date("2022-03-22T00:00:00");
+        const result = format(date, "EEE, MMM dd, yyyy");
+        expect(result).toEqual("Tue, Mar 22, 2022");
+    });
+
+    it("should handle 12-hour clock with am/pm", () => {
+        const date = new Date("2022-01-01T12:34:56");
+        const result = format(date, "hh:mm:ss aa");
+        expect(result).toEqual("12:34:56 pm");
+    });
+});
diff --git a/resources/js/tests/string.test.ts b/resources/js/tests/string.test.ts
new file mode 100644
index 0000000..ab19265
--- /dev/null
+++ b/resources/js/tests/string.test.ts
@@ -0,0 +1,14 @@
+import { expect, describe, it } from "vitest";
+import { toTitleCase } from "../helpers/string";
+
+describe("toTitleCase()", () => {
+    it("should return a converted title case string", () => {
+        const result = toTitleCase("titlecase");
+        expect(result).toEqual("Titlecase");
+    });
+
+    it("should return a converted title case string and spaces", () => {
+        const result = toTitleCase("titlecase_and_more");
+        expect(result).toEqual("Titlecase and more");
+    });
+});
diff --git a/resources/js/tests/validate.test.ts b/resources/js/tests/validate.test.ts
new file mode 100644
index 0000000..f397342
--- /dev/null
+++ b/resources/js/tests/validate.test.ts
@@ -0,0 +1,28 @@
+import { expect, describe, it } from "vitest";
+import { Email } from "../helpers/validate";
+
+describe("Email()", () => {
+    it("should return valid=false when an invalid email address is passed to the validate function", () => {
+        const v = Email();
+        const result = v.validate("invalid email");
+        expect(result.valid).toBe(false);
+    });
+
+    it("should return valid=false when an invalid email address is passed to the validate function", () => {
+        const v = Email();
+        const result = v.validate("fake@outlook");
+        expect(result.valid).toBe(false);
+    });
+
+    it("should return valid=true when an valid email address is passed to the validate function", () => {
+        const v = Email();
+        const result = v.validate("fake@outlook.com");
+        expect(result.valid).toBe(true);
+    });
+
+    it("should return valid=true when an valid email address is passed to the validate function", () => {
+        const v = Email();
+        const result = v.validate("fake@outlook.com.au");
+        expect(result.valid).toBe(true);
+    });
+});
diff --git a/resources/js/views/About.vue b/resources/js/views/About.vue
deleted file mode 100644
index e705c7e..0000000
--- a/resources/js/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <div>
-        <div>About</div>
-    </div>
-</template>
diff --git a/resources/js/views/App.vue b/resources/js/views/App.vue
index 63b5410..417c116 100644
--- a/resources/js/views/App.vue
+++ b/resources/js/views/App.vue
@@ -1,6 +1,5 @@
 <template>
     <SMNavbar />
-    <SMBreadcrumbs />
     <main>
         <router-view v-slot="{ Component }">
             <transition name="fade" mode="out-in">
@@ -9,13 +8,16 @@
         </router-view>
     </main>
     <SMFooter />
+    <SMProgress />
+    <SMToastList />
     <DialogWrapper :transition-attrs="{ name: 'fade' }" />
 </template>
 
 <script setup lang="ts">
 import SMNavbar from "../components/SMNavbar.vue";
-import SMBreadcrumbs from "../components/SMBreadcrumbs.vue";
 import SMFooter from "../components/SMFooter.vue";
+import SMProgress from "../components/SMProgress.vue";
+import SMToastList from "../components/SMToastList.vue";
 import { DialogWrapper } from "vue3-promise-dialog";
 </script>
 
diff --git a/resources/js/views/Contact.vue b/resources/js/views/Contact.vue
index 4cd9471..132faaf 100644
--- a/resources/js/views/Contact.vue
+++ b/resources/js/views/Contact.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMContainer class="page-contact">
+    <SMPage class="page-contact">
         <SMRow break-large>
             <SMColumn>
                 <h1 class="text-left">Contact Us</h1>
@@ -42,142 +42,88 @@
             </SMColumn>
             <SMColumn>
                 <div>
-                    <SMDialog narrow :loading="formLoading">
-                        <template v-if="!formDone">
-                            <SMMessage
-                                v-if="formMessage.message"
-                                :type="formMessage.type"
-                                :message="formMessage.message"
-                                :icon="formMessage.icon" />
-                            <form @submit.prevent="submit">
+                    <SMDialog narrow>
+                        <template v-if="!formSubmitted">
+                            <SMForm v-model="form" @submit="handleSubmit">
+                                <SMInput control="name" />
+                                <SMInput control="email" type="email" />
                                 <SMInput
-                                    v-model="formData.name.value"
-                                    name="name"
-                                    label="Name"
-                                    required
-                                    :error="formData.name.error"
-                                    @blur="fieldValidate(formData.name)" />
-                                <SMInput
-                                    v-model="formData.email.value"
-                                    name="email"
-                                    label="Email"
-                                    required
-                                    :error="formData.email.error"
-                                    @blur="fieldValidate(formData.email)" />
-                                <SMInput
-                                    v-model="formData.content.value"
-                                    name="content"
-                                    type="textarea"
+                                    control="content"
                                     label="Message"
-                                    required
-                                    :error="formData.content.error"
-                                    @blur="fieldValidate(formData.content)" />
-                                <SMCaptchaNotice />
+                                    type="textarea" />
                                 <SMButton
                                     type="submit"
                                     block
-                                    label="Send Message"
-                                    icon="fa-regular fa-paper-plane" />
-                            </form>
+                                    label="Send Message" />
+                            </SMForm>
                         </template>
                         <template v-else>
                             <h1>Message Sent!</h1>
                             <p class="text-center">
-                                Your message as been sent to us. We will respond
+                                Your message as been sent.<br />We will respond
                                 as soon as we can.
                             </p>
-                            <SMButton block to="/" label="Home" />
+                            <SMButton
+                                block
+                                :to="{ name: 'home' }"
+                                label="Home" />
                         </template>
                     </SMDialog>
                 </div>
             </SMColumn>
         </SMRow>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import SMInput from "../components/SMInput.vue";
+import { reactive, ref } from "vue";
+import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
 import SMDialog from "../components/SMDialog.vue";
-import SMMessage from "../components/SMMessage.vue";
-import axios from "axios";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../helpers/validation";
-import { useReCaptcha } from "vue-recaptcha-v3";
-import SMCaptchaNotice from "../components/SMCaptchaNotice.vue";
+import SMForm from "../components/SMForm.vue";
+import SMInput from "../components/SMInput.vue";
+import { api } from "../helpers/api";
+import { Form, FormControl } from "../helpers/form";
+import { And, Email, Min, Required } from "../helpers/validate";
 
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-const formLoading = ref(false);
-const formDone = ref(false);
-const formMessage = reactive({
-    message: "",
-    type: "error",
-    icon: "",
-});
-const formData = reactive({
-    name: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A name is needed",
-            min: 4,
-            min_message: "A name needs to be is at least 4 characters",
-        },
-    },
-    email: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A email address is needed",
-            email: true,
-            email_message: "That email address does not look right",
-        },
-    },
-    content: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A message is required",
-            min: 8,
-            min_message: "The message needs to be at least %d characters",
-        },
-    },
-});
+const form = reactive(
+    Form({
+        name: FormControl("", And([Required()])),
+        email: FormControl("", And([Required(), Email()])),
+        content: FormControl("", And([Required(), Min(8)])),
+    })
+);
+const formSubmitted = ref(false);
 
-useValidation(formData);
-
-const submit = async () => {
-    formLoading.value = true;
+const handleSubmit = async () => {
+    form.loading(true);
 
     try {
-        if (isValidated(formData)) {
-            await recaptchaLoaded();
-            const captcha = await executeRecaptcha("submit");
+        await recaptchaLoaded();
+        const captcha = await executeRecaptcha("submit");
 
-            await axios.post("contact", {
-                name: formData.name.value,
-                email: formData.email.value,
+        await api.post({
+            url: "/contact",
+            body: {
+                name: form.controls.name.value,
+                email: form.controls.email.value,
                 captcha_token: captcha,
-                content: formData.content.value,
-            });
+                content: form.controls.content.value,
+            },
+        });
 
-            formDone.value = true;
-        }
-    } catch (err) {
-        formLoading.value = false;
-        formMessage.type = "error";
-        formMessage.icon = "fa-solid fa-circle-exclamation";
-        restParseErrors(formData, [formMessage, "message"], err);
+        formSubmitted.value = true;
+    } catch (error) {
+        form.error("A captcha error occurred. Try reloading the page.");
+    } finally {
+        form.loading(false);
     }
-
-    formLoading.value = false;
 };
 </script>
+
+<style lang="scss">
+.page-contact {
+    background-color: #f8f8f8;
+}
+</style>
diff --git a/resources/js/views/Dialog.vue b/resources/js/views/Dialog.vue
deleted file mode 100644
index ed335d2..0000000
--- a/resources/js/views/Dialog.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <div ref="root" :class="classes">
-        <div class="mdialog">
-            <button @click="confimer">Close</button>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onBeforeMount } from "vue";
-import { transitionEnter, transitionLeave } from "../helpers/common";
-
-const root = ref(null);
-const classes = ref(["mdialog-mask", "fade-enter-from"]);
-
-const props = defineProps({ title: "" });
-let data = {
-    title: props.title,
-};
-
-const emit = defineEmits(["confirm", "cancel"]);
-
-const confimer = () => {
-    transitionLeave(root, "fade", () => {
-        emit("confirm", {});
-    });
-};
-
-transitionEnter(root, "fade");
-</script>
-
-<style lang="scss">
-.mdialog-mask {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 2000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.mdialog {
-    padding: 1rem 2rem;
-    background-color: white;
-}
-</style>
diff --git a/resources/js/views/DialogDelete.vue b/resources/js/views/DialogDelete.vue
deleted file mode 100644
index 9d4c228..0000000
--- a/resources/js/views/DialogDelete.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <SMDialog>
-        <SMButton type="primary" label="Confirm" @click="onClick" />
-    </SMDialog>
-</template>
-
-<script setup lang="ts">
-import SMDialog from "./Dialog.vue";
-import SMButton from "../components/SMButton.vue";
-
-const emit = defineEmits(["confirm", "cancel"]);
-
-const onClick = () => {
-    console.log("click");
-    emit("confirm");
-};
-</script>
-
-<style lang="scss"></style>
diff --git a/resources/js/views/EmailVerify.vue b/resources/js/views/EmailVerify.vue
index 19209f5..66edda9 100644
--- a/resources/js/views/EmailVerify.vue
+++ b/resources/js/views/EmailVerify.vue
@@ -1,26 +1,14 @@
 <template>
-    <SMContainer>
+    <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog narrow :loading="formLoading">
+            <SMDialog class="mt-5" narrow>
                 <template v-if="!formDone">
                     <h1>Email Verify</h1>
-                    <SMMessage
-                        v-if="formMessage.message"
-                        :type="formMessage.type"
-                        :message="formMessage.message"
-                        :icon="formMessage.icon" />
-                    <form @submit.prevent="submit">
-                        <SMInput
-                            v-model="formData.code.value"
-                            name="code"
-                            label="Code"
-                            required
-                            :error="formData.code.error"
-                            @blur="fieldValidate(formData.code)" />
-                        <SMCaptchaNotice />
+                    <SMForm v-model="form" @submit="handleSubmit">
+                        <SMInput control="code" />
                         <SMFormFooter>
                             <template #left>
-                                <div>
+                                <div class="small">
                                     <router-link to="/resend-verify-email"
                                         >Resend Code</router-link
                                     >
@@ -30,10 +18,10 @@
                                 <SMButton
                                     type="submit"
                                     label="Verify Code"
-                                    icon="fa-solid fa-arrow-right" />
+                                    icon="arrow-forward-outline" />
                             </template>
                         </SMFormFooter>
-                    </form>
+                    </SMForm>
                 </template>
                 <template v-else>
                     <h1>Email Verified!</h1>
@@ -48,79 +36,64 @@
                 </template>
             </SMDialog>
         </SMRow>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import SMInput from "../components/SMInput.vue";
-import SMButton from "../components/SMButton.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
-import SMDialog from "../components/SMDialog.vue";
-import SMMessage from "../components/SMMessage.vue";
-import axios from "axios";
-import { useRoute } from "vue-router";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../helpers/validation";
-import SMCaptchaNotice from "../components/SMCaptchaNotice.vue";
+import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
+import { useRoute } from "vue-router";
+import SMButton from "../components/SMButton.vue";
+import SMDialog from "../components/SMDialog.vue";
+import SMForm from "../components/SMForm.vue";
+import SMFormFooter from "../components/SMFormFooter.vue";
+import SMInput from "../components/SMInput.vue";
+import { api } from "../helpers/api";
+import { Form, FormControl } from "../helpers/form";
+import { And, Max, Min, Required } from "../helpers/validate";
 
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-const formLoading = ref(false);
 const formDone = ref(false);
-const formMessage = reactive({
-    message: "",
-    type: "error",
-    icon: "",
-});
-const formData = reactive({
-    code: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "The code is needed",
-            min: 6,
-            min_message: "The code should be 6 characters",
-            max: 6,
-            max_message: "The code should be 6 characters",
-        },
-    },
-});
+const form = reactive(
+    Form({
+        code: FormControl("", And([Required(), Min(6), Max(6)])),
+    })
+);
 
-useValidation(formData);
-
-const submit = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+const handleSubmit = async () => {
+    form.loading(true);
 
     try {
-        if (isValidated(formData)) {
-            await recaptchaLoaded();
-            const captcha = await executeRecaptcha("submit");
+        await recaptchaLoaded();
+        const captcha = await executeRecaptcha("submit");
 
-            await axios.post("users/verifyEmail", {
-                code: formData.code.value,
+        await api.post({
+            url: "/users/verifyEmail",
+            body: {
+                code: form.controls.code.value,
                 captcha_token: captcha,
-            });
+            },
+        });
 
-            formDone.value = true;
-        }
-    } catch (err) {
-        restParseErrors(formData, [formMessage, "message"], err);
+        formDone.value = true;
+    } catch (error) {
+        form.apiErrors(error);
+    } finally {
+        form.loading(false);
     }
-
-    formLoading.value = false;
 };
 
 if (useRoute().query.code !== undefined) {
-    formData.code.value = useRoute().query.code;
-    submit();
+    const code = useRoute().query.code;
+
+    if (Array.isArray(code)) {
+        if (code.length > 0) {
+            form.controls.code.value = code[0];
+        }
+    } else {
+        form.controls.code.value = code;
+    }
+
+    handleSubmit();
 }
 </script>
diff --git a/resources/js/views/EventList.vue b/resources/js/views/EventList.vue
new file mode 100644
index 0000000..02ef807
--- /dev/null
+++ b/resources/js/views/EventList.vue
@@ -0,0 +1,263 @@
+<template>
+    <SMPage class="sm-workshop-list">
+        <template #container>
+            <h1>Workshops</h1>
+            <SMToolbar>
+                <SMInput
+                    v-model="filterKeywords"
+                    label="Keywords"
+                    @change="handleFilter" />
+                <SMInput
+                    v-model="filterLocation"
+                    label="Location"
+                    @change="handleFilter" />
+                <SMInput
+                    v-model="filterDateRange"
+                    type="daterange"
+                    label="Date Range"
+                    :feedback-invalid="dateRangeError"
+                    @change="handleFilter" />
+            </SMToolbar>
+            <SMMessage
+                v-if="formMessage"
+                icon="alert-circle-outline"
+                type="error"
+                :message="formMessage"
+                class="mt-5" />
+            <SMPanelList
+                :loading="loading"
+                :not-found="events.length == 0"
+                not-found-text="No workshops found">
+                <SMPanel
+                    v-for="item in events"
+                    :key="item.event.id"
+                    :to="{ name: 'event-view', params: { id: item.event.id } }"
+                    :title="item.event.title"
+                    :image="item.event.hero"
+                    :show-time="true"
+                    :date="item.event.start_at"
+                    :end-date="item.event.end_at"
+                    :date-in-image="true"
+                    :location="
+                        item.event.location == 'online'
+                            ? 'Online Event'
+                            : item.event.address
+                    "
+                    :banner="item.banner"
+                    :banner-type="item.bannerType"></SMPanel>
+            </SMPanelList>
+            <SMPagination
+                v-model="postsPage"
+                :total="postsTotal"
+                :per-page="postsPerPage" />
+        </template>
+    </SMPage>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import SMInput from "../components/SMInput.vue";
+import SMMessage from "../components/SMMessage.vue";
+import SMPagination from "../components/SMPagination.vue";
+import SMPanel from "../components/SMPanel.vue";
+import SMPanelList from "../components/SMPanelList.vue";
+import SMToolbar from "../components/SMToolbar.vue";
+import { api } from "../helpers/api";
+import { Event, EventCollection } from "../helpers/api.types";
+import { SMDate } from "../helpers/datetime";
+
+interface EventData {
+    event: Event;
+    banner: string;
+    bannerType: string;
+}
+
+const loading = ref(true);
+let events: EventData[] = reactive([]);
+const dateRangeError = ref("");
+
+const formMessage = ref("");
+
+const filterKeywords = ref("");
+const filterLocation = ref("");
+const filterDateRange = ref("");
+
+const postsPerPage = 9;
+let postsPage = ref(1);
+let postsTotal = ref(0);
+
+/**
+ * Load page data.
+ */
+const handleLoad = async () => {
+    let query = {};
+
+    if (filterKeywords.value && filterKeywords.value.length > 0) {
+        query["q"] = filterKeywords.value;
+    }
+    if (filterLocation.value && filterLocation.value.length > 0) {
+        query["qlocation"] = filterLocation.value;
+    }
+    if (filterDateRange.value && filterDateRange.value.length > 0) {
+        let error = false;
+        const filterDates = filterDateRange.value
+            .split(/ *- */)
+            .map((dateString) => {
+                const date = new SMDate(dateString).format("yyyy/MM/dd");
+
+                if (date.length == 0) {
+                    error = true;
+                }
+
+                return date;
+            });
+
+        if (!error) {
+            if (filterDates.length == 1) {
+                query["start_at"] = `>=${filterDates[0]}`;
+            } else if (filterDates.length >= 2) {
+                query["start_at"] = `${filterDates[0]}<>${filterDates[1]}`;
+            }
+
+            dateRangeError.value = "";
+        } else {
+            dateRangeError.value = "Invalid date range";
+            return;
+        }
+    } else {
+        dateRangeError.value = "";
+    }
+
+    loading.value = true;
+    formMessage.value = "";
+    events = [];
+
+    if (Object.keys(query).length == 0) {
+        const now = new Date();
+        const startingDate = new Date(now.setDate(now.getDate() - 14));
+
+        query["end_at"] =
+            ">" +
+            new SMDate(startingDate).format("yyyy/MM/dd HH:mm:ss", {
+                utc: true,
+            });
+    }
+
+    query["limit"] = postsPerPage;
+    query["page"] = postsPage.value;
+
+    api.get({
+        url: "/events",
+        params: query,
+    })
+        .then((result) => {
+            const data = result.data as EventCollection;
+
+            postsTotal.value = data.total;
+
+            if (data && data.events) {
+                events = [];
+
+                data.events.forEach((item) => {
+                    let banner = "";
+                    let bannerType = "";
+
+                    const parsedStartAt = new SMDate(item.start_at, {
+                        format: "yyyy-MM-dd HH:mm:ss",
+                        utc: true,
+                    });
+
+                    const parsedEndAt = new SMDate(item.end_at, {
+                        format: "yyyy-MM-dd HH:mm:ss",
+                        utc: true,
+                    });
+
+                    item.start_at = parsedStartAt.format("yyyy-MM-dd HH:mm:ss");
+                    item.end_at = parsedEndAt.format("yyyy-MM-dd HH:mm:ss");
+
+                    if (
+                        parsedEndAt.isBefore(new SMDate("now")) ||
+                        item.status == "closed"
+                    ) {
+                        banner = "closed";
+                        bannerType = "expired";
+                    } else if (item.status == "open") {
+                        banner = "open";
+                        bannerType = "success";
+                    } else if (item.status == "cancelled") {
+                        banner = "cancelled";
+                        bannerType = "danger";
+                    } else if (item.status == "soon") {
+                        banner = "Open Soon";
+                        bannerType = "warning";
+                    }
+
+                    events.push({
+                        event: item,
+                        banner: banner,
+                        bannerType: bannerType,
+                    });
+                });
+            }
+        })
+        .catch((error) => {
+            if (error.status != 404) {
+                formMessage.value =
+                    error.response?.data?.message ||
+                    "Could not load any events from the server.";
+            }
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
+const handleFilter = async () => {
+    handleLoad();
+};
+
+watch(
+    () => postsPage.value,
+    () => {
+        handleLoad();
+    }
+);
+
+handleLoad();
+</script>
+
+<style lang="scss">
+.workshop-list {
+    background-color: #f8f8f8;
+
+    .toolbar {
+        display: flex;
+        flex-direction: row;
+        flex: 1;
+
+        & > * {
+            padding-left: map-get($spacer, 1);
+            padding-right: map-get($spacer, 1);
+
+            &:first-child {
+                padding-left: 0;
+            }
+
+            &:last-child {
+                padding-right: 0;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .sm-workshop-list .toolbar {
+        flex-direction: column;
+
+        & > * {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+}
+</style>
diff --git a/resources/js/views/EventView.vue b/resources/js/views/EventView.vue
index c4f6a5a..b3162d3 100644
--- a/resources/js/views/EventView.vue
+++ b/resources/js/views/EventView.vue
@@ -1,52 +1,363 @@
 <template>
-    <SMContainer class="dashboard mx-auto workshops">
-        <h1>Workshops</h1>
-        <SMMessage
-            v-if="formMessage.message"
-            :icon="formMessage.icon"
-            :type="formMessage.type"
-            :message="formMessage.message"
-            class="mt-5" />
-        <SMPanelList>
-            <SMPanel
-                v-for="event in events.value"
-                :key="event.id"
-                :to="{ name: 'event', params: { slug: event.id } }"
-                :title="event.title"
-                :date="event.start_at"></SMPanel>
-        </SMPanelList>
-    </SMContainer>
+    <SMPage
+        :full="true"
+        :loading="imageUrl.length == 0"
+        class="sm-workshop-view"
+        :error="pageError">
+        <div
+            class="sm-workshop-image"
+            :style="{ backgroundImage: `url('${imageUrl}')` }"></div>
+        <SMContainer>
+            <SMMessage
+                v-if="formMessage"
+                icon="alert-circle-outline"
+                type="error"
+                :message="formMessage"
+                class="mt-5" />
+            <SMContainer class="sm-workshop-page">
+                <div class="sm-workshop-body">
+                    <h2 class="sm-workshop-title">{{ event.title }}</h2>
+                    <SMHTML :html="event.content" class="sm-workshop-content" />
+                </div>
+                <div class="sm-workshop-info">
+                    <div
+                        v-if="
+                            event.status == 'closed' ||
+                            (event.status == 'open' &&
+                                new SMDate(event.end_at, {
+                                    format: 'ymd',
+                                }).isBefore())
+                        "
+                        class="sm-workshop-registration sm-workshop-registration-closed">
+                        Registration for this event has closed.
+                    </div>
+                    <div
+                        v-if="event.status == 'soon'"
+                        class="sm-workshop-registration sm-workshop-registration-soon">
+                        Registration for this event will open soon.
+                    </div>
+                    <div
+                        v-if="event.status == 'cancelled'"
+                        class="sm-workshop-registration sm-workshop-registration-cancelled">
+                        This event has been cancelled.
+                    </div>
+                    <div
+                        v-if="
+                            event.status == 'open' &&
+                            new SMDate(event.end_at, {
+                                format: 'ymd',
+                            }).isAfter() &&
+                            event.registration_type == 'none'
+                        "
+                        class="sm-workshop-registration sm-workshop-registration-none">
+                        Registration not required for this event.<br />Arrive
+                        early to avoid disappointment as seating maybe limited.
+                    </div>
+                    <div
+                        v-if="
+                            event.status == 'open' &&
+                            new SMDate(event.end_at, {
+                                format: 'ymd',
+                            }).isAfter() &&
+                            event.registration_type != 'none'
+                        "
+                        class="sm-workshop-registration sm-workshop-registration-url">
+                        <SMButton
+                            :href="registerUrl"
+                            :block="true"
+                            label="Register for Event"></SMButton>
+                    </div>
+                    <div class="sm-workshop-date">
+                        <h4><ion-icon name="calendar-outline" />Date / Time</h4>
+                        <p
+                            v-for="(line, index) in workshopDate"
+                            :key="index"
+                            class="workshop-date-string">
+                            {{ line }}
+                        </p>
+                    </div>
+                    <div class="sm-workshop-location">
+                        <h4><ion-icon name="location-outline" />Location</h4>
+                        <p>
+                            {{
+                                event.location == "online"
+                                    ? "Online event"
+                                    : event.address
+                            }}
+                        </p>
+                    </div>
+                </div>
+            </SMContainer>
+        </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
+import { computed, Ref, ref } from "vue";
+import { useRoute } from "vue-router";
+import SMButton from "../components/SMButton.vue";
+import SMHTML from "../components/SMHTML.vue";
 import SMMessage from "../components/SMMessage.vue";
-import SMPanelList from "../components/SMPanelList.vue";
-import SMPanel from "../components/SMPanel.vue";
-import { reactive } from "vue";
-import axios from "axios";
+import { api } from "../helpers/api";
+import { Event, EventResponse, MediaResponse } from "../helpers/api.types";
+import { SMDate } from "../helpers/datetime";
+import { imageLoad } from "../helpers/image";
+import { useApplicationStore } from "../store/ApplicationStore";
 
-const events = reactive([]);
+const applicationStore = useApplicationStore();
 
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
+/**
+ * Event data
+ */
+const event: Ref<Event | null> = ref(null);
+
+const imageUrl = ref("");
+
+const route = useRoute();
+
+/**
+ * Page message.
+ */
+const formMessage = ref("");
+
+/**
+ * Page error.
+ */
+let pageError = 200;
+
+const workshopDate = computed(() => {
+    let str: string[] = [];
+
+    if (Object.keys(event.value).length > 0) {
+        if (
+            event.value.end_at.length > 0 &&
+            event.value.start_at.substring(
+                0,
+                event.value.start_at.indexOf(" ")
+            ) !=
+                event.value.end_at.substring(0, event.value.end_at.indexOf(" "))
+        ) {
+            str = [
+                new SMDate(event.value.start_at, { format: "ymd" }).format(
+                    "dd/MM/yyyy"
+                ),
+            ];
+            if (event.value.end_at.length > 0) {
+                str[0] =
+                    str[0] +
+                    " - " +
+                    new SMDate(event.value.end_at, { format: "ymd" }).format(
+                        "dd/MM/yyyy"
+                    );
+            }
+        } else {
+            str = [
+                new SMDate(event.value.start_at, { format: "ymd" }).format(
+                    "EEEE dd MMM yyyy"
+                ),
+                new SMDate(event.value.start_at, { format: "ymd" }).format(
+                    "h:mm aa"
+                ) +
+                    " - " +
+                    new SMDate(event.value.end_at, { format: "ymd" }).format(
+                        "h:mm aa"
+                    ),
+            ];
+        }
+    }
+
+    return str;
 });
 
+const registerUrl = computed(() => {
+    let href = "";
+
+    if (event.value?.registration_type == "link") {
+        return event.value?.registration_data;
+    } else if (event.value?.registration_type == "email") {
+        return "mailto:" + event.value?.registration_data;
+    }
+
+    return href;
+});
+
+/**
+ * Load the page data.
+ */
 const handleLoad = async () => {
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+    formMessage.value = "";
 
     try {
-        let result = await axios.get("events?limit=10");
-        events.value = result.data.events;
+        let result = await api.get({
+            url: "/events/{event}",
+            params: {
+                event: route.params.id,
+            },
+        });
+
+        const eventData = result.data as EventResponse;
+
+        if (eventData && eventData.event) {
+            event.value = eventData.event;
+            event.value.start_at = new SMDate(event.value.start_at, {
+                format: "ymd",
+                utc: true,
+            }).format("yyyy/MM/dd HH:mm:ss");
+            event.value.end_at = new SMDate(event.value.end_at, {
+                format: "ymd",
+                utc: true,
+            }).format("yyyy/MM/dd HH:mm:ss");
+
+            applicationStore.setDynamicTitle(event.value.title);
+            handleLoadImage();
+        } else {
+            pageError = 404;
+        }
     } catch (error) {
-        formMessage.message =
-            error.response?.data?.message ||
-            "Could not load any events from the server.";
+        formMessage.value =
+            error.data?.message ||
+            "Could not load event information from the server.";
     }
 };
 
+/**
+ * Load the hero image.
+ */
+const handleLoadImage = async () => {
+    api.get({
+        url: "/media/{medium}",
+        params: {
+            medium: event.value.hero,
+        },
+    })
+        .then((result) => {
+            const data = result.data as MediaResponse;
+
+            if (data && data.medium) {
+                imageLoad(data.medium.url, (url) => {
+                    imageUrl.value = url;
+                });
+            }
+        })
+        .catch(() => {
+            /* empty */
+        });
+};
+
 handleLoad();
 </script>
+
+<style lang="scss">
+.sm-workshop-view {
+    .sm-workshop-image {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: map-get($spacer, 5) * 4;
+        height: 20vw;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-color: #eee;
+        transition: background-image 0.2s;
+
+        .sm-workshop-image-loader {
+            font-size: 5rem;
+            color: $secondary-color;
+        }
+    }
+
+    .sm-workshop-page {
+        display: flex;
+        flex-direction: row;
+
+        .sm-workshop-body,
+        .sm-workshop-info {
+            line-height: 1.5rem;
+        }
+
+        .sm-workshop-body {
+            flex: 1;
+            text-align: left;
+        }
+
+        .sm-workshop-info {
+            width: 18rem;
+            margin-left: 2rem;
+
+            h4 {
+                margin-bottom: 0.25rem;
+                display: flex;
+                align-items: center;
+                height: 1rem;
+
+                ion-icon {
+                    display: inline-block;
+                    width: 1rem;
+                    margin-right: 0.5rem;
+                }
+            }
+
+            p {
+                margin: 0;
+                padding-left: 1.5rem;
+                font-size: 90%;
+            }
+
+            .sm-workshop-registration {
+                margin-top: 1.5rem;
+                line-height: 1.25rem;
+            }
+
+            .sm-workshop-registration-none,
+            .sm-workshop-registration-soon {
+                border: 1px solid #ffeeba;
+                background-color: #fff3cd;
+                color: #856404;
+                text-align: center;
+                font-size: 80%;
+                padding: 0.5rem;
+            }
+
+            .sm-workshop-registration-closed,
+            .sm-workshop-registration-cancelled {
+                border: 1px solid #f5c2c7;
+                background-color: #f8d7da;
+                color: #842029;
+                text-align: center;
+                font-size: 80%;
+                padding: 0.5rem;
+            }
+
+            .sm-workshop-date,
+            .sm-workshop-location {
+                padding: 0 1rem;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .sm-workshop-view .sm-workshop-page {
+        flex-direction: column;
+
+        .sm-workshop-body {
+            text-align: center;
+        }
+
+        .sm-workshop-info {
+            width: 100%;
+            margin-left: 0;
+
+            h4 {
+                justify-content: center;
+            }
+
+            p {
+                padding-left: 0;
+                text-align: center;
+            }
+        }
+    }
+}
+</style>
diff --git a/resources/js/views/ForgotPassword.vue b/resources/js/views/ForgotPassword.vue
index b567cc1..fd121f8 100644
--- a/resources/js/views/ForgotPassword.vue
+++ b/resources/js/views/ForgotPassword.vue
@@ -1,26 +1,14 @@
 <template>
-    <SMContainer>
+    <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog narrow :loading="formLoading">
+            <SMDialog class="mt-5">
                 <template v-if="!formDone">
                     <h1>Forgot Password</h1>
-                    <SMMessage
-                        v-if="formMessage.message"
-                        :type="formMessage.type"
-                        :message="formMessage.message"
-                        :icon="formMessage.icon" />
-                    <form @submit.prevent="submit">
-                        <SMInput
-                            v-model="formData.username.value"
-                            name="username"
-                            label="Username"
-                            required
-                            :error="formData.username.error"
-                            @blur="fieldValidate(formData.username)" />
-                        <SMCaptchaNotice />
+                    <SMForm v-model="form" @submit="handleSubmit">
+                        <SMInput control="username" />
                         <SMFormFooter>
                             <template #left>
-                                <div>
+                                <div class="small">
                                     <span class="pr-1">Remember?</span
                                     ><router-link :to="{ name: 'login' }"
                                         >Log in</router-link
@@ -31,10 +19,10 @@
                                 <SMButton
                                     type="submit"
                                     label="Send"
-                                    icon="fa-solid fa-arrow-right" />
+                                    icon="arrow-forward-outline" />
                             </template>
                         </SMFormFooter>
-                    </form>
+                    </SMForm>
                 </template>
                 <template v-else>
                     <h1>Email Sent!</h1>
@@ -51,78 +39,52 @@
                 </template>
             </SMDialog>
         </SMRow>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import SMInput from "../components/SMInput.vue";
-import SMButton from "../components/SMButton.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
-import SMDialog from "../components/SMDialog.vue";
-import SMMessage from "../components/SMMessage.vue";
-import axios from "axios";
-import { useRoute } from "vue-router";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../helpers/validation";
-import SMCaptchaNotice from "../components/SMCaptchaNotice.vue";
+import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
+import SMButton from "../components/SMButton.vue";
+import SMDialog from "../components/SMDialog.vue";
+import SMFormFooter from "../components/SMFormFooter.vue";
+import SMInput from "../components/SMInput.vue";
+import { api } from "../helpers/api";
+import { Form, FormControl } from "../helpers/form";
+import { And, Min, Required } from "../helpers/validate";
 
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-const formLoading = ref(false);
 const formDone = ref(false);
-const formMessage = reactive({
-    message: "",
-    type: "error",
-    icon: "",
-});
-const formData = reactive({
-    username: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "Your username is needed",
-            min: 4,
-            min_message: "Your username is at least %d characters",
-        },
-    },
-});
+const form = reactive(
+    Form({
+        username: FormControl("", And([Required(), Min(4)])),
+    })
+);
 
-useValidation(formData);
-
-const submit = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+const handleSubmit = async () => {
+    form.loading(true);
 
     try {
-        if (isValidated(formData)) {
-            await recaptchaLoaded();
-            const captcha = await executeRecaptcha("submit");
+        await recaptchaLoaded();
+        const captcha = await executeRecaptcha("submit");
 
-            let res = await axios.post("users/forgotPassword", {
-                username: formData.username.value,
+        await api.post({
+            url: "/users/forgotPassword",
+            body: {
+                username: form.controls.username.value,
                 captcha_token: captcha,
-            });
+            },
+        });
 
-            formDone.value = true;
-        }
-    } catch (err) {
-        if (err.response.status == 422) {
+        formDone.value = true;
+    } catch (error) {
+        if (error.status == 422) {
             formDone.value = true;
         } else {
-            restParseErrors(formData, [formMessage, "message"], err);
+            form.apiErrors(error);
         }
+    } finally {
+        form.loading(false);
     }
-
-    formLoading.value = false;
 };
 </script>
-
-<style lang="scss"></style>
diff --git a/resources/js/views/ForgotUsername.vue b/resources/js/views/ForgotUsername.vue
index f39b6b8..97f691b 100644
--- a/resources/js/views/ForgotUsername.vue
+++ b/resources/js/views/ForgotUsername.vue
@@ -1,26 +1,14 @@
 <template>
-    <SMContainer>
+    <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog narrow :loading="formLoading">
+            <SMDialog class="mt-5">
                 <template v-if="!formDone">
                     <h1>Forgot Username</h1>
-                    <SMMessage
-                        v-if="formMessage.message"
-                        :type="formMessage.type"
-                        :message="formMessage.message"
-                        :icon="formMessage.icon" />
-                    <form @submit.prevent="submit">
-                        <SMInput
-                            v-model:error="formData.email.error"
-                            v-model="formData.email.value"
-                            name="email"
-                            label="Email"
-                            required
-                            @blur="fieldValidate(formData.email)" />
-                        <SMCaptchaNotice />
+                    <SMForm v-model="form" @submit="handleSubmit">
+                        <SMInput control="email" />
                         <SMFormFooter>
                             <template #left>
-                                <div>
+                                <div class="small">
                                     <span class="pr-1">Remember?</span
                                     ><router-link :to="{ name: 'login' }"
                                         >Log in</router-link
@@ -31,10 +19,10 @@
                                 <SMButton
                                     type="submit"
                                     label="Send"
-                                    icon="fa-solid fa-arrow-right" />
+                                    icon="arrow-forward-outline" />
                             </template>
                         </SMFormFooter>
-                    </form>
+                    </SMForm>
                 </template>
                 <template v-else>
                     <h1>Email Sent!</h1>
@@ -50,72 +38,49 @@
                 </template>
             </SMDialog>
         </SMRow>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import SMInput from "../components/SMInput.vue";
-import SMButton from "../components/SMButton.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
-import SMDialog from "../components/SMDialog.vue";
-import SMMessage from "../components/SMMessage.vue";
-import axios from "axios";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../helpers/validation";
-import SMCaptchaNotice from "../components/SMCaptchaNotice.vue";
+import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
+import SMButton from "../components/SMButton.vue";
+import SMDialog from "../components/SMDialog.vue";
+import SMForm from "../components/SMForm.vue";
+import SMFormFooter from "../components/SMFormFooter.vue";
+import SMInput from "../components/SMInput.vue";
+import { api } from "../helpers/api";
+import { Form, FormControl } from "../helpers/form";
+import { And, Email, Required } from "../helpers/validate";
 
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-const formLoading = ref(false);
 const formDone = ref(false);
-const formMessage = reactive({
-    message: "",
-    type: "error",
-    icon: "",
-});
-const formData = reactive({
-    email: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "An email address is required",
-            email: true,
-        },
-    },
-});
+const form = reactive(
+    Form({
+        email: FormControl("", And([Required(), Email()])),
+    })
+);
 
-useValidation(formData);
-
-const submit = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+const handleSubmit = async () => {
+    form.loading(true);
 
     try {
-        if (isValidated(formData)) {
-            await recaptchaLoaded();
-            const captcha = await executeRecaptcha("submit");
+        await recaptchaLoaded();
+        const captcha = await executeRecaptcha("submit");
 
-            let res = await axios.post("users/forgotUsername", {
-                email: formData.email.value,
+        await api.post({
+            url: "/users/forgotUsername",
+            body: {
+                email: form.controls.email.value,
                 captcha_token: captcha,
-            });
+            },
+        });
 
-            formDone.value = true;
-        }
-    } catch (err) {
-        restParseErrors(formData, [formMessage, "message"], err);
+        formDone.value = true;
+    } catch (error) {
+        form.apiErrors(error);
     }
 
-    formLoading.value = false;
+    form.loading(false);
 };
 </script>
-
-<style lang="scss"></style>
diff --git a/resources/js/views/Home.vue b/resources/js/views/Home.vue
index b5a79d4..4c91714 100644
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMContainer full class="home">
+    <SMPage full class="home">
         <SMCarousel>
             <SMCarouselSlide
                 v-for="(slide, index) in slides"
@@ -41,7 +41,7 @@
                         skills that they can use throughout their lives.
                     </p>
                     <SMButton
-                        :to="{ name: 'workshop-list' }"
+                        :to="{ name: 'event-list' }"
                         label="Explore Workshops" />
                 </SMColumn>
                 <SMColumn
@@ -110,68 +110,42 @@
                 Sign up for our mailing list to receive expert tips and tricks,
                 as well as updates on upcoming workshops.
             </p>
-            <SMDialog :loading="formLoading" class="p-0">
-                <form @submit.prevent="handleSubscribe">
+            <SMDialog class="p-0" no-shadow>
+                <SMForm v-model="form" @submit="handleSubscribe">
                     <div class="form-row">
-                        <SMMessage
-                            v-if="formMessage.message"
-                            :type="formMessage.type"
-                            :message="formMessage.message"
-                            :icon="formMessage.icon" />
-                        <SMInput
-                            v-model="subscribeFormData.email.value"
-                            placeholder="Email address"
-                            :error="subscribeFormData.email.error"
-                            @blur="fieldValidate(subscribeFormData.email)" />
-                        <SMCaptchaNotice />
+                        <SMInput control="email" />
                         <SMButton type="submit" label="Subscribe" />
                     </div>
-                </form>
+                </SMForm>
             </SMDialog>
         </SMContainer>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import axios from "axios";
 import { reactive, ref } from "vue";
-import { buildUrlQuery, excerpt, timestampNowUtc } from "../helpers/common";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-    clearFormData,
-} from "../helpers/validation";
-import SMInput from "../components/SMInput.vue";
+import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
 import SMCarousel from "../components/SMCarousel.vue";
 import SMCarouselSlide from "../components/SMCarouselSlide.vue";
-import SMMessage from "../components/SMMessage.vue";
-import SMCaptchaNotice from "../components/SMCaptchaNotice.vue";
 import SMDialog from "../components/SMDialog.vue";
-import { useReCaptcha } from "vue-recaptcha-v3";
+import SMForm from "../components/SMForm.vue";
+import SMInput from "../components/SMInput.vue";
+
+import { api } from "../helpers/api";
+import { EventCollection, PostCollection } from "../helpers/api.types";
+import { SMDate } from "../helpers/datetime";
+import { Form, FormControl } from "../helpers/form";
+import { excerpt } from "../helpers/string";
+import { And, Email, Required } from "../helpers/validate";
 
 const slides = ref([]);
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-const subscribeFormData = reactive({
-    email: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "An email address is needed.",
-            email: true,
-            email_message: "That does not appear to be an email address.",
-        },
-    },
-});
-const formMessage = reactive({
-    message: "",
-    type: "error",
-    icon: "",
-});
-const formLoading = ref(false);
+const form = reactive(
+    Form({
+        email: FormControl("", And([Required(), Email()])),
+    })
+);
 
 const handleLoad = async () => {
     slides.value = [];
@@ -179,9 +153,17 @@ const handleLoad = async () => {
     let events = [];
 
     try {
-        let result = await axios.get(buildUrlQuery("posts", { limit: 3 }));
-        if (result.data.posts) {
-            result.data.posts.forEach((post) => {
+        const result = await api.get({
+            url: "/posts",
+            params: {
+                limit: 3,
+            },
+        });
+
+        const data = result.data as PostCollection;
+
+        if (data && data.posts) {
+            data.posts.forEach((post) => {
                 posts.push({
                     title: post.title,
                     content: excerpt(post.content, 200),
@@ -191,29 +173,37 @@ const handleLoad = async () => {
                 });
             });
         }
-    } catch (error) {
+    } catch {
         /* empty */
     }
 
     try {
-        let query = {
-            limit: 3,
-            end_at: ">" + timestampNowUtc(),
-        };
+        const result = await api.get({
+            url: "/events",
+            params: {
+                limit: 3,
+                end_at:
+                    ">" +
+                    new SMDate("now").format("yyyy-MM-dd HH:mm:ss", {
+                        utc: true,
+                    }),
+            },
+        });
 
-        let result = await axios.get(buildUrlQuery("events", query));
-        if (result.data.events) {
-            result.data.events.forEach((event) => {
+        const data = result.data as EventCollection;
+
+        if (data && data.events) {
+            data.events.forEach((event) => {
                 events.push({
                     title: event.title,
                     content: excerpt(event.content, 200),
                     image: event.hero,
-                    url: { name: "workshop-view", params: { id: event.id } },
+                    url: { name: "event-view", params: { id: event.id } },
                     cta: "View Workshop",
                 });
             });
         }
-    } catch (error) {
+    } catch {
         /* empty */
     }
 
@@ -221,6 +211,7 @@ const handleLoad = async () => {
         if (i <= posts.length) {
             slides.value.push(posts[i - 1]);
         }
+
         if (i <= events.length) {
             slides.value.push(events[i - 1]);
         }
@@ -228,34 +219,30 @@ const handleLoad = async () => {
 };
 
 const handleSubscribe = async () => {
-    formLoading.value = true;
-    formMessage.icon = "";
-    formMessage.type = "error";
-    formMessage.message = "";
+    form.loading(true);
+    form.message();
 
     try {
-        if (isValidated(subscribeFormData)) {
-            await recaptchaLoaded();
-            const captcha = await executeRecaptcha("submit");
+        await recaptchaLoaded();
+        const captcha = await executeRecaptcha("submit");
 
-            await axios.post("subscriptions", {
-                email: subscribeFormData.email.value,
+        await api.post({
+            url: "/subscriptions",
+            body: {
+                email: form.controls.email.value,
                 captcha_token: captcha,
-            });
+            },
+        });
 
-            clearFormData(subscribeFormData);
-
-            formMessage.type = "success";
-            formMessage.message = "Your email address has been subscribed.";
-        }
+        form.controls.email.value = "";
+        form.message("Your email address has been subscribed.", "success");
     } catch (err) {
-        restParseErrors(subscribeFormData, [formMessage, "message"], err);
+        form.apiErrors(err);
     }
 
-    formLoading.value = false;
+    form.loading(false);
 };
 
-useValidation(subscribeFormData);
 handleLoad();
 </script>
 
diff --git a/resources/js/views/Legal.vue b/resources/js/views/Legal.vue
deleted file mode 100644
index 4732c4e..0000000
--- a/resources/js/views/Legal.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-    <div>
-        <div>Home</div>
-    </div>
-</template>
-
-<script setup lang="ts"></script>
diff --git a/resources/js/views/Login.vue b/resources/js/views/Login.vue
index e4f3e3d..ccc7979 100644
--- a/resources/js/views/Login.vue
+++ b/resources/js/views/Login.vue
@@ -1,157 +1,100 @@
 <template>
-    <SMContainer>
-        <SMRow>
-            <SMColumn>
-                <SMDialog narrow>
-                    <h1>Log in</h1>
-                    <SMMessage
-                        v-if="formMessage.message"
-                        :type="formMessage.type"
-                        :message="formMessage.message"
-                        :icon="formMessage.icon" />
-                    <form @submit.prevent="submit">
-                        <SMInput
-                            v-model:error="formData.username.error"
-                            v-model="formData.username.value"
-                            name="username"
-                            label="Username"
-                            required
-                            @blur="fieldValidate(formData.username)">
-                            <router-link to="/forgot-username"
-                                >Forgot username?</router-link
-                            >
-                        </SMInput>
-                        <SMInput
-                            v-model="formData.password.value"
-                            name="password"
-                            type="password"
-                            label="Password"
-                            required
-                            :error="formData.password.error"
-                            @blur="fieldValidate(formData.password)">
-                            <router-link to="/forgot-password"
-                                >Forgot password?</router-link
-                            >
-                        </SMInput>
-                        <SMCaptchaNotice />
-                        <SMFormFooter>
-                            <template #left>
-                                <div>
-                                    <span class="pr-1">Need an account?</span
-                                    ><router-link to="/register"
-                                        >Register</router-link
-                                    >
-                                </div>
-                            </template>
-                            <template #right>
-                                <SMButton
-                                    type="submit"
-                                    label="Log in"
-                                    icon="fa-solid fa-arrow-right" />
-                            </template>
-                        </SMFormFooter>
-                    </form>
-                </SMDialog>
-            </SMColumn>
-        </SMRow>
-    </SMContainer>
+    <SMPage no-breadcrumbs background="/img/background.jpg">
+        <SMDialog class="mt-5">
+            <h1>Log in</h1>
+            <SMForm v-model="form" @submit="handleSubmit">
+                <SMInput control="username">
+                    <router-link to="/forgot-username"
+                        >Forgot username?</router-link
+                    >
+                </SMInput>
+                <SMInput control="password" type="password">
+                    <router-link to="/forgot-password"
+                        >Forgot password?</router-link
+                    >
+                </SMInput>
+                <SMFormFooter>
+                    <template #left>
+                        <div class="small">
+                            <span class="pr-1">Need an account?</span
+                            ><router-link to="/register">Register</router-link>
+                        </div>
+                    </template>
+                    <template #right>
+                        <SMButton
+                            type="submit"
+                            label="Log in"
+                            icon="arrow-forward-outline" />
+                    </template>
+                </SMFormFooter>
+            </SMForm>
+        </SMDialog>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import SMInput from "../components/SMInput.vue";
-import SMButton from "../components/SMButton.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
-import SMDialog from "../components/SMDialog.vue";
-import SMMessage from "../components/SMMessage.vue";
-import axios from "axios";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../helpers/validation";
-import { useUserStore } from "../store/UserStore";
+import { reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import SMCaptchaNotice from "../components/SMCaptchaNotice.vue";
+import SMButton from "../components/SMButton.vue";
+import SMDialog from "../components/SMDialog.vue";
+import SMForm from "../components/SMForm.vue";
+import SMFormFooter from "../components/SMFormFooter.vue";
+import SMInput from "../components/SMInput.vue";
+import { api } from "../helpers/api";
+import { LoginResponse } from "../helpers/api.types";
+import { Form, FormControl } from "../helpers/form";
+import { And, Min, Required } from "../helpers/validate";
+import { useUserStore } from "../store/UserStore";
 
 const router = useRouter();
 const userStore = useUserStore();
-const formLoading = ref(false);
-const formMessage = reactive({
-    message: "",
-    type: "error",
-    icon: "",
-});
-const formData = reactive({
-    username: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "Your username is needed",
-            min: 4,
-            min_message: "Your username is at least 6 characters",
-        },
-    },
-    password: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A password is required",
-            min: 8,
-            min_message: "Your password needs to be at least %d characters",
-            password: "special",
-            password_message:
-                "Your password needs to have at least a letter, a number and a special character",
-        },
-    },
-});
+const form = reactive(
+    Form({
+        username: FormControl("", And([Required(), Min(4)])),
+        password: FormControl("", Required()),
+    })
+);
 
-useValidation(formData);
+const redirectQuery = useRoute().query.redirect;
 
-const redirect = useRoute().query.redirect;
-
-const submit = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+/**
+ * Handle the user submitting the login form.
+ */
+const handleSubmit = async () => {
+    form.message();
+    form.loading(true);
 
     try {
-        if (isValidated(formData)) {
-            let res = await axios.post("login", {
-                username: formData.username.value,
-                password: formData.password.value,
-            });
+        let result = await api.post({
+            url: "/login",
+            body: {
+                username: form.controls.username.value,
+                password: form.controls.password.value,
+            },
+        });
 
-            if (res.data.token !== undefined) {
-                userStore.setUserDetails(res.data.user);
-                userStore.setUserToken(res.data.token);
-                if (redirect !== undefined) {
-                    if (redirect.startsWith("api/")) {
-                        window.location.href =
-                            redirect +
-                            "?token=" +
-                            encodeURIComponent(res.data.token);
-                    } else {
-                        router.push({ path: redirect });
-                    }
-                } else {
-                    router.push({ name: "dashboard" });
-                }
-            } else {
-                formMessage.message =
-                    "An unexpected error occurred on the server. Please try again later";
-            }
+        const login = result.data as LoginResponse;
+
+        userStore.setUserDetails(login.user);
+        userStore.setUserToken(login.token);
+        if (redirectQuery !== undefined) {
+            const redirect = Array.isArray(redirectQuery)
+                ? redirectQuery[0]
+                : redirectQuery;
+
+            router.push({ path: redirect });
+        } else {
+            router.push({ name: "dashboard" });
         }
     } catch (err) {
-        restParseErrors(formData, [formMessage, "message"], err);
+        form.controls.password.value = "";
+        form.apiErrors(err);
+    } finally {
+        form.loading(false);
     }
-
-    formLoading.value = false;
 };
-</script>
 
-<style lang="scss"></style>
+if (userStore.token) {
+    userStore.clearUser();
+}
+</script>
diff --git a/resources/js/views/Logout.vue b/resources/js/views/Logout.vue
index c08f076..41d38fa 100644
--- a/resources/js/views/Logout.vue
+++ b/resources/js/views/Logout.vue
@@ -1,55 +1,35 @@
 <template>
-    <SMContainer>
-        <SMRow>
-            <SMDialog narrow>
-                <h1>Logged out</h1>
-                <SMRow>
-                    <SMColumn class="justify-content-center">
-                        <p class="mt-0 text-center">
-                            You have now been logged out
-                        </p>
-                    </SMColumn>
-                </SMRow>
-                <SMRow>
-                    <SMColumn class="justify-content-center">
-                        <SMButton :to="{ name: 'home' }" label="Home" />
-                    </SMColumn>
-                </SMRow>
-            </SMDialog>
-        </SMRow>
-    </SMContainer>
+    <SMPage no-breadcrumbs background="/img/background.jpg">
+        <SMLoader :loading="true" />
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import SMButton from "@/components/SMButton.vue";
-import SMDialog from "../components/SMDialog.vue";
-import SMMessage from "../components/SMMessage.vue";
-import axios from "axios";
-import { useUserStore } from "../store/UserStore";
 import { useRouter } from "vue-router";
+import SMLoader from "../components/SMLoader.vue";
+import { api } from "../helpers/api";
+import { useToastStore } from "../store/ToastStore";
+import { useUserStore } from "../store/UserStore";
 
 const router = useRouter();
 const userStore = useUserStore();
-const formLoading = ref(false);
-const formMessage = reactive({
-    type: "info",
-    message: "Logging you out...",
-    icon: "",
-});
-
-formLoading.value = true;
+const toastStore = useToastStore();
 
+/**
+ * Logout the current user and redirect to home page.
+ */
 const logout = async () => {
-    formLoading.value = true;
-    try {
-        await axios.post("logout");
-    } catch (err) {
-        console.log(err);
-    }
-
-    userStore.clearUser();
-    formLoading.value = false;
+    api.post({
+        url: "/logout",
+    }).finally(() => {
+        userStore.clearUser();
+        toastStore.addToast({
+            title: "Logged Out",
+            content: "You have been logged out.",
+            type: "success",
+        });
+        router.push({ name: "home" });
+    });
 };
 
 logout();
diff --git a/resources/js/views/Minecraft.vue b/resources/js/views/Minecraft.vue
index 5080f2f..b5bcdf4 100644
--- a/resources/js/views/Minecraft.vue
+++ b/resources/js/views/Minecraft.vue
@@ -1,42 +1,45 @@
 <template>
-    <SMContainer class="rules">
-        <h1>Connecting to our Minecraft Server</h1>
-        <ol>
-            <li>
-                Open up your Minecraft on your computer (Java) or tablet
-                (Bedrock) and make sure you are using version 1.19.3
-            </li>
-            <li>Click Multiplayer</li>
-            <li>Click Add Server</li>
-            <li>Enter Server Name STEMMechanics</li>
-            <li>Enter Server Address mc.stemmech.com.au</li>
-            <li>
-                We have a custom resourcepack which you can enable before
-                joining
-            </li>
-            <li>Click Done</li>
-            <li>Join the Server!</li>
-        </ol>
-        <h2>Goodbye Drustcraft</h2>
-        <p>
-            STEMMechanics launched the Drustcraft server three years ago and
-            since then, players have had countless enjoyable experiences. Cities
-            were built, bosses defeated, and most importantly, a tight-knit
-            community formed.
-        </p>
-        <p>
-            Maintaining the server design became overwhelming and took away the
-            fun of playing Minecraft. Hence, in January, the decision was made
-            to shut down Drustcraft and offer a more straightforward Minecraft
-            server, retaining the beloved elements of Drustcraft like
-            mini-games, bosses, and survival. Join us on the new STEMMechanics
-            Minecraft server, where the Drustcraft community awaits.
-        </p>
-    </SMContainer>
+    <SMPage class="sm-minecraft">
+        <template #container>
+            <h1>Connecting to our Minecraft Server</h1>
+            <ol>
+                <li>
+                    Open up your Minecraft on your computer (Java) or tablet
+                    (Bedrock) and make sure you are using version 1.19.3
+                </li>
+                <li>Click Multiplayer</li>
+                <li>Click Add Server</li>
+                <li>Enter Server Name STEMMechanics</li>
+                <li>Enter Server Address mc.stemmech.com.au</li>
+                <li>
+                    We have a custom resourcepack which you can enable before
+                    joining
+                </li>
+                <li>Click Done</li>
+                <li>Join the Server!</li>
+            </ol>
+            <h2>Goodbye Drustcraft</h2>
+            <p>
+                STEMMechanics launched the Drustcraft server three years ago and
+                since then, players have had countless enjoyable experiences.
+                Cities were built, bosses defeated, and most importantly, a
+                tight-knit community formed.
+            </p>
+            <p>
+                Maintaining the server design became overwhelming and took away
+                the fun of playing Minecraft. Hence, in January, the decision
+                was made to shut down Drustcraft and offer a more
+                straightforward Minecraft server, retaining the beloved elements
+                of Drustcraft like mini-games, bosses, and survival. Join us on
+                the new STEMMechanics Minecraft server, where the Drustcraft
+                community awaits.
+            </p>
+        </template>
+    </SMPage>
 </template>
 
 <style lang="scss">
-.rules {
+.sm-minecraft {
     h2 {
         margin-bottom: 0.5rem;
     }
diff --git a/resources/js/views/NewsList.vue b/resources/js/views/NewsList.vue
deleted file mode 100644
index c49f109..0000000
--- a/resources/js/views/NewsList.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-    <SMContainer class="news-list">
-        <SMMessage
-            v-if="formMessage.message"
-            :icon="formMessage.icon"
-            :type="formMessage.type"
-            :message="formMessage.message"
-            class="mt-5" />
-        <SMPanelList
-            :loading="loading"
-            :not-found="posts.value?.length == 0"
-            not-found-text="No news found">
-            <SMPanel
-                v-for="post in posts.value"
-                :key="post.id"
-                :image="post.hero"
-                :to="{ name: 'post-view', params: { slug: post.slug } }"
-                :title="post.title"
-                :date="post.publish_at"
-                :content="post.content"
-                :show-date="false"
-                button="Read More"
-                button-type="outline" />
-        </SMPanelList>
-    </SMContainer>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from "vue";
-import axios from "axios";
-import SMMessage from "../components/SMMessage.vue";
-import SMPanelList from "../components/SMPanelList.vue";
-import SMPanel from "../components/SMPanel.vue";
-import { timestampUtcToLocal } from "../helpers/common";
-
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-
-const loading = ref(true);
-const posts = reactive([]);
-
-const handleLoad = async () => {
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
-
-    try {
-        let result = await axios.get("posts?limit=5");
-        posts.value = result.data.posts;
-
-        posts.value.forEach((post) => {
-            post.publish_at = timestampUtcToLocal(post.publish_at);
-        });
-    } catch (error) {
-        formMessage.message =
-            error.response?.data?.message ||
-            "The server is currently not available";
-    }
-
-    loading.value = false;
-};
-
-handleLoad();
-</script>
-
-<style lang="scss"></style>
diff --git a/resources/js/views/NewsView.vue b/resources/js/views/NewsView.vue
deleted file mode 100644
index 490d1c5..0000000
--- a/resources/js/views/NewsView.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-    <SMContainer :loading="pageLoading" full class="page-post-view">
-        <SMPageError :error="error">
-            <div
-                class="heading-image"
-                :style="{
-                    backgroundImage: `url('${post.hero_url}')`,
-                }"></div>
-            <SMContainer>
-                <div class="heading-info">
-                    <h1>{{ post.title }}</h1>
-                    <div class="date-author">
-                        <font-awesome-icon icon="fa-solid fa-calendar" />
-                        {{ formattedPublishAt(post.publish_at) }}, by
-                        {{ post.user_username }}
-                    </div>
-                </div>
-                <component :is="formattedContent" ref="content"></component>
-            </SMContainer>
-        </SMPageError>
-    </SMContainer>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import axios from "axios";
-import { useRoute } from "vue-router";
-import SMPageError from "../components/SMPageError.vue";
-import { fullMonthString, timestampUtcToLocal } from "../helpers/common";
-import { useApplicationStore } from "../store/ApplicationStore";
-
-const applicationStore = useApplicationStore();
-const route = useRoute();
-let post = ref({});
-let content = ref(null);
-let error = ref(0);
-let pageLoading = ref(true);
-
-const loadData = async () => {
-    if (route.params.slug) {
-        try {
-            let res = await axios.get(
-                `posts?slug==${route.params.slug}&limit=1`
-            );
-            if (!res.data.posts) {
-                error.value = 500;
-            } else {
-                if (res.data.total == 0) {
-                    error.value = 404;
-                } else {
-                    post.value = res.data.posts[0];
-
-                    post.value.publish_at = timestampUtcToLocal(
-                        post.value.publish_at
-                    );
-
-                    applicationStore.setDynamicTitle(post.value.title);
-
-                    try {
-                        let result = await axios.get(
-                            `media/${post.value.hero}`
-                        );
-                        post.value.hero_url = result.data.medium.url;
-                    } catch (error) {
-                        /* empty */
-                    }
-
-                    try {
-                        let result = await axios.get(
-                            `users/${post.value.user_id}`
-                        );
-                        post.value.user_username = result.data.user.username;
-                    } catch (error) {
-                        /* empty */
-                    }
-                }
-            }
-        } catch (err) {
-            error.value = 500;
-        }
-    }
-
-    pageLoading.value = false;
-};
-
-const formattedPublishAt = (dateStr) => {
-    const date = new Date(Date.parse(dateStr));
-    return (
-        fullMonthString[date.getMonth()] +
-        " " +
-        date.getDate() +
-        ", " +
-        date.getFullYear()
-    );
-};
-
-const formattedContent = computed(() => {
-    let html = post.value.content;
-    if (html) {
-        const regex = new RegExp(
-            `<a ([^>]*?)href="${import.meta.env.APP_URL}(.*?>.*?)</a>`,
-            "ig"
-        );
-        html = html.replaceAll(regex, '<router-link $1to="$2</router-link>');
-    }
-
-    return {
-        template: `<div class="content">${html}</div>`,
-    };
-});
-
-loadData();
-</script>
-
-<style lang="scss">
-.page-post-view {
-    .heading-image {
-        background-color: #eee;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        height: 15rem;
-    }
-
-    .heading-info {
-        padding: 0 map-get($spacer, 3);
-
-        h1 {
-            text-align: left;
-            margin-bottom: 0.5rem;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            word-wrap: break-word;
-        }
-
-        .date-author {
-            font-size: 80%;
-
-            svg {
-                margin-right: 0.5rem;
-            }
-        }
-    }
-
-    .content {
-        margin-top: map-get($spacer, 4);
-        line-height: 1.5rem;
-        padding: 0 map-get($spacer, 3);
-
-        a span {
-            color: $primary-color !important;
-        }
-    }
-}
-
-@media only screen and (max-width: 768px) {
-    .page-post-view .heading-image {
-        height: 10rem;
-    }
-}
-</style>
diff --git a/resources/js/views/PostList.vue b/resources/js/views/PostList.vue
new file mode 100644
index 0000000..5dd6f23
--- /dev/null
+++ b/resources/js/views/PostList.vue
@@ -0,0 +1,97 @@
+<template>
+    <SMPage class="sm-post-list" :loading="pageLoading">
+        <template #container>
+            <SMMessage
+                v-if="message"
+                icon="alert-circle-outline"
+                type="error"
+                :message="message"
+                class="mt-5" />
+            <SMPanelList
+                :not-found="!pageLoading && posts.length == 0"
+                not-found-text="No news found">
+                <SMPanel
+                    v-for="post in posts"
+                    :key="post.id"
+                    :image="post.hero"
+                    :to="{ name: 'post-view', params: { slug: post.slug } }"
+                    :title="post.title"
+                    :date="post.publish_at"
+                    :content="post.content"
+                    :show-date="false"
+                    button="Read More"
+                    button-type="outline" />
+            </SMPanelList>
+            <SMPagination
+                v-model="postsPage"
+                :total="postsTotal"
+                :per-page="postsPerPage" />
+        </template>
+    </SMPage>
+</template>
+
+<script setup lang="ts">
+import { Ref, ref, watch } from "vue";
+import SMMessage from "../components/SMMessage.vue";
+import SMPagination from "../components/SMPagination.vue";
+import SMPanel from "../components/SMPanel.vue";
+import SMPanelList from "../components/SMPanelList.vue";
+import { api } from "../helpers/api";
+import { Post, PostCollection } from "../helpers/api.types";
+import { SMDate } from "../helpers/datetime";
+
+const message = ref("");
+const pageLoading = ref(true);
+const posts: Ref<Post[]> = ref([]);
+
+const postsPerPage = 9;
+let postsPage = ref(1);
+let postsTotal = ref(0);
+
+/**
+ * Load the page data.
+ */
+const handleLoad = () => {
+    message.value = "";
+    pageLoading.value = true;
+
+    api.get({
+        url: "/posts",
+        params: {
+            limit: postsPerPage,
+            page: postsPage.value,
+        },
+    })
+        .then((result) => {
+            const data = result.data as PostCollection;
+
+            posts.value = data.posts;
+            postsTotal.value = data.total;
+            posts.value.forEach((post) => {
+                post.publish_at = new SMDate(post.publish_at, {
+                    format: "ymd",
+                    utc: true,
+                }).format("yyyy/MM/dd HH:mm:ss");
+            });
+        })
+        .catch((error) => {
+            if (error.status != 404) {
+                message.value =
+                    error.data?.message ||
+                    "The server is currently not available";
+            }
+        })
+        .finally(() => {
+            pageLoading.value = false;
+        });
+};
+
+watch(
+    () => postsPage.value,
+    () => {
+        handleLoad();
+    }
+);
+
+handleLoad();
+</script>
diff --git a/resources/js/views/PostView.vue b/resources/js/views/PostView.vue
new file mode 100644
index 0000000..9e7d02a
--- /dev/null
+++ b/resources/js/views/PostView.vue
@@ -0,0 +1,180 @@
+<template>
+    <SMPage
+        :loading="pageLoading"
+        full
+        class="sm-page-post-view"
+        :page-error="pageError">
+        <div class="sm-heading-image" :style="styleObject"></div>
+        <SMContainer>
+            <div class="sm-heading-info">
+                <h1>{{ post.title }}</h1>
+                <div class="sm-date-author">
+                    <ion-icon name="calendar-outline" />
+                    {{ formattedPublishAt(post.publish_at) }}, by
+                    {{ postUser.username }}
+                </div>
+            </div>
+            <SMHTML :html="post.content" />
+            <SMAttachments :attachments="post.attachments || []" />
+        </SMContainer>
+    </SMPage>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref } from "vue";
+import { useRoute } from "vue-router";
+import SMAttachments from "../components/SMAttachments.vue";
+import SMHTML from "../components/SMHTML.vue";
+import { api } from "../helpers/api";
+import {
+    MediaResponse,
+    Post,
+    PostCollection,
+    User,
+    UserResponse,
+} from "../helpers/api.types";
+import { SMDate } from "../helpers/datetime";
+import { useApplicationStore } from "../store/ApplicationStore";
+
+const applicationStore = useApplicationStore();
+
+/**
+ * The post data.
+ */
+let post: Ref<Post> = ref(null);
+
+/**
+ * The current page error.
+ */
+let pageError = ref(200);
+
+/**
+ * Is the page loading.
+ */
+let pageLoading = ref(false);
+
+/**
+ * Post styles.
+ */
+let styleObject = {};
+
+/**
+ * Post user.
+ */
+let postUser: User | null = null;
+
+const loadData = () => {
+    let slug = useRoute().params.slug || "";
+
+    if (slug.length > 0) {
+        pageLoading.value = true;
+
+        api.get({
+            url: "/posts/",
+            params: {
+                slug: `=${slug}`,
+                limit: 1,
+            },
+        }).then((result) => {
+            const data = result.data as PostCollection;
+
+            if (data && data.posts && data.total && data.total > 0) {
+                post.value = data.posts[0];
+
+                post.value.publish_at = new SMDate(post.value.publish_at, {
+                    format: "ymd",
+                    utc: true,
+                }).format("yyyy/MM/dd HH:mm:ss");
+
+                applicationStore.setDynamicTitle(post.value.title);
+
+                // Get hero image
+                api.get({
+                    url: "/media/{medium}",
+                    params: {
+                        medium: post.value.hero,
+                    },
+                })
+                    .then((mediumResult) => {
+                        const mediumData = mediumResult.data as MediaResponse;
+
+                        if (mediumData && mediumData.medium) {
+                            styleObject[
+                                "backgroundImage"
+                            ] = `url('${mediumData.medium.url}')`;
+                        }
+                    })
+                    .catch(() => {
+                        /* empty */
+                    });
+
+                // Get user data
+                api.get({
+                    url: "/users/{id}",
+                    params: {
+                        id: post.value.user_id,
+                    },
+                })
+                    .then((userResult) => {
+                        const userData = userResult.data as UserResponse;
+
+                        if (userData && userData.user) {
+                            postUser = userData.user;
+                        }
+                    })
+                    .catch(() => {
+                        /* empty */
+                    });
+            } else {
+                pageError.value = 404;
+            }
+        });
+    } else {
+        pageError.value = 404;
+    }
+};
+
+const formattedPublishAt = (dateStr) => {
+    return new SMDate(dateStr, { format: "yMd" }).format("MMMM d, yyyy");
+};
+
+loadData();
+</script>
+
+<style lang="scss">
+.sm-page-post-view {
+    .sm-heading-image {
+        background-color: #eee;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 15rem;
+    }
+
+    .sm-heading-info {
+        padding: 0 map-get($spacer, 3);
+
+        h1 {
+            text-align: left;
+            margin-bottom: 0.5rem;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            word-wrap: break-word;
+        }
+
+        .date-author {
+            font-size: 80%;
+
+            svg {
+                margin-right: 0.5rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .sm-page-post-view .sm-heading-image {
+        height: 10rem;
+    }
+}
+</style>
diff --git a/resources/js/views/Privacy.vue b/resources/js/views/Privacy.vue
index ba90a20..52af68d 100644
--- a/resources/js/views/Privacy.vue
+++ b/resources/js/views/Privacy.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMContainer class="privacy">
+    <SMContainer class="sm-privacy">
         <h1>Privacy Policy</h1>
         <h3>We take our customers' privacy & security seriously.</h3>
         <p>
@@ -322,7 +322,7 @@
 </template>
 
 <style lang="scss">
-.privacy {
+.sm-privacy {
     h4 {
         margin-bottom: 0.5rem;
     }
diff --git a/resources/js/views/Register.vue b/resources/js/views/Register.vue
index efb8586..1093039 100644
--- a/resources/js/views/Register.vue
+++ b/resources/js/views/Register.vue
@@ -1,79 +1,41 @@
 <template>
-    <SMContainer>
-        <SMRow>
-            <SMDialog :narrow="formDone" :loading="formLoading">
+    <SMPage no-breadcrumbs background="/img/background.jpg">
+        <template #container>
+            <SMDialog full class="mt-5" :narrow="formDone">
                 <template v-if="!formDone">
                     <h1>Register</h1>
-                    <SMMessage
-                        v-if="formMessage.message"
-                        :type="formMessage.type"
-                        :message="formMessage.message"
-                        :icon="formMessage.icon" />
-                    <form @submit.prevent="submit">
+                    <SMForm v-model="form" @submit="handleSubmit">
                         <SMRow>
                             <SMColumn>
-                                <SMInput
-                                    v-model="formData.username.value"
-                                    label="Username"
-                                    required
-                                    :error="formData.username.error"
-                                    @blur="
-                                        fieldValidate(formData.username)
-                                    "></SMInput>
+                                <SMInput control="username" />
                             </SMColumn>
                             <SMColumn>
                                 <SMInput
-                                    v-model="formData.password.value"
-                                    type="password"
-                                    label="Password"
-                                    required
-                                    :error="formData.password.error"
-                                    @blur="
-                                        fieldValidate(formData.password)
-                                    "></SMInput>
+                                    control="password"
+                                    type="password"></SMInput>
                             </SMColumn>
                         </SMRow>
                         <SMRow>
                             <SMColumn>
-                                <SMInput
-                                    v-model="formData.first_name.value"
-                                    label="First Name"
-                                    required
-                                    :error="formData.first_name.error"
-                                    @blur="
-                                        fieldValidate(formData.first_name)
-                                    " />
+                                <SMInput control="first_name" />
                             </SMColumn>
                             <SMColumn>
-                                <SMInput
-                                    v-model="formData.last_name.value"
-                                    label="Last Name"
-                                    required
-                                    :error="formData.last_name.error"
-                                    @blur="fieldValidate(formData.last_name)" />
+                                <SMInput control="last_name" />
                             </SMColumn>
                         </SMRow>
                         <SMRow>
                             <SMColumn>
-                                <SMInput
-                                    v-model="formData.email.value"
-                                    label="Email"
-                                    required
-                                    :error="formData.email.error"
-                                    @blur="fieldValidate(formData.email)" />
+                                <SMInput control="email" />
                             </SMColumn>
                             <SMColumn>
-                                <SMInput
-                                    v-model="formData.phone.value"
-                                    label="Phone Number"
-                                    :error="formData.phone.error"
-                                    @blur="fieldValidate(formData.phone)" />
+                                <SMInput control="phone">
+                                    This field is optional.
+                                </SMInput>
                             </SMColumn>
                         </SMRow>
-                        <SMCaptchaNotice />
                         <SMFormFooter>
                             <template #left>
-                                <div>
+                                <div class="small">
                                     <span class="pr-1"
                                         >Already have an account?</span
                                     ><router-link to="/login"
@@ -85,10 +47,10 @@
                                 <SMButton
                                     type="submit"
                                     label="Register"
-                                    icon="fa-solid fa-arrow-right" />
+                                    icon="arrow-forward-outline" />
                             </template>
                         </SMFormFooter>
-                    </form>
+                    </SMForm>
                 </template>
                 <template v-else>
                     <h1>Email Sent!</h1>
@@ -103,170 +65,100 @@
                     </SMRow>
                 </template>
             </SMDialog>
-        </SMRow>
-    </SMContainer>
+        </template>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import SMInput from "../components/SMInput.vue";
-import SMButton from "../components/SMButton.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
-import SMDialog from "../components/SMDialog.vue";
-import SMMessage from "../components/SMMessage.vue";
-import axios from "axios";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../helpers/validation";
-import { debounce } from "../helpers/common";
-import SMCaptchaNotice from "../components/SMCaptchaNotice.vue";
+import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
+import SMButton from "../components/SMButton.vue";
+import SMDialog from "../components/SMDialog.vue";
+import SMForm from "../components/SMForm.vue";
+import SMFormFooter from "../components/SMFormFooter.vue";
+import SMInput from "../components/SMInput.vue";
+import { api } from "../helpers/api";
+import { Form, FormControl } from "../helpers/form";
+import {
+    And,
+    Custom,
+    Email,
+    Min,
+    Password,
+    Phone,
+    Required,
+} from "../helpers/validate";
 
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-const lastUsernameCheck = ref("");
-const formLoading = ref(false);
-const formDone = ref(false);
-const formMessage = reactive({
-    message: "",
-    type: "error",
-    icon: "",
-});
-const formData = reactive({
-    first_name: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A first name is needed",
-            min: 2,
-            min_message: "Your first name should be at least 2 letters long",
-        },
-    },
-    last_name: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A last name is needed",
-            min: 2,
-            min_message: "Your last name should be at least 2 letters long",
-        },
-    },
-    email: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A email address is needed",
-            email: true,
-            email_message: "Your email address is not correct",
-        },
-    },
-    phone: {
-        value: "",
-        error: "",
-        rules: {
-            phone: true,
-            phone_message: "Your phone number does not look correct",
-        },
-    },
-    username: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A username is needed",
-            min: 4,
-            min_message: "Your username needs to be at least %d characters",
-            custom: () => {
-                checkUsername();
-            },
-        },
-    },
-    password: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A password is needed",
-            min: 8,
-            min_message: "Your password needs to be at least %d characters",
-            password: "special",
-            password_message:
-                "Your password needs to have at least a letter, a number and a special character",
-        },
-    },
-});
-
-useValidation(formData);
-
-const submit = async () => {
-    formLoading.value = true;
-
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+let abortController: AbortController | null = null;
 
+const checkUsername = async (value: string): Promise<boolean | string> => {
     try {
-        if (isValidated(formData)) {
-            await recaptchaLoaded();
-            const captcha = await executeRecaptcha("submit");
+        if (lastUsernameCheck.value != value) {
+            lastUsernameCheck.value = value;
 
-            let res = await axios.post("register", {
-                first_name: formData.first_name.value,
-                last_name: formData.last_name.value,
-                email: formData.email.value,
-                phone: formData.phone.value,
-                username: formData.username.value,
-                password: formData.password.value,
-                captcha_token: captcha,
+            if (abortController != null) {
+                abortController.abort();
+                abortController = null;
+            }
+
+            abortController = new AbortController();
+
+            await api.get({
+                url: "/users",
+                params: {
+                    username: `=${value}`,
+                },
+                signal: abortController.signal,
             });
 
-            formDone.value = true;
+            return "The username has already been taken.";
         }
-    } catch (err) {
-        restParseErrors(formData, [formMessage, "message"], err);
-    }
 
-    formLoading.value = false;
-};
-
-const checkUsername = async () => {
-    try {
-        if (
-            formData.username.value.length >= 4 &&
-            lastUsernameCheck.value != formData.username.value
-        ) {
-            lastUsernameCheck.value = formData.username.value;
-            await axios.get(`users?username=${formData.username.value}`);
-            formData.username.error = "The username has already been taken.";
-        }
+        return true;
     } catch (error) {
-        if (error.response.status == 404) {
-            formData.username.error = "";
-        } else {
-            formMessage.type = "error";
-            formMessage.icon = "fa-solid fa-circle-exclamation";
-            formMessage.message =
-                error.response.message ||
-                "An unexpected server error occurred.";
-        }
+        return true;
     }
 };
 
-const debouncedFilter = debounce(checkUsername, 1000);
-let oldUsernameValue = "";
-watch(
-    formData,
-    (value) => {
-        if (value.username.value !== oldUsernameValue) {
-            oldUsernameValue = value.username.value;
-            debouncedFilter();
-        }
-    },
-    { deep: true }
+const formDone = ref(false);
+const lastUsernameCheck = ref("");
+const form = reactive(
+    Form({
+        first_name: FormControl("", Required()),
+        last_name: FormControl("", Required()),
+        email: FormControl("", And([Required(), Email()])),
+        phone: FormControl("", Phone()),
+        username: FormControl("", And([Min(4), Custom(checkUsername)])),
+        password: FormControl("", And([Required(), Password()])),
+    })
 );
+
+const handleSubmit = async () => {
+    form.loading(true);
+
+    try {
+        await recaptchaLoaded();
+        const captcha = await executeRecaptcha("submit");
+
+        await api.post({
+            url: "/register",
+            body: {
+                first_name: form.controls.first_name.value,
+                last_name: form.controls.last_name.value,
+                email: form.controls.email.value,
+                phone: form.controls.phone.value,
+                username: form.controls.username.value,
+                password: form.controls.password.value,
+                captcha_token: captcha,
+            },
+        });
+
+        formDone.value = true;
+    } catch (error) {
+        form.apiErrors(error);
+    } finally {
+        form.loading(false);
+    }
+};
 </script>
diff --git a/resources/js/views/ResendEmailVerify.vue b/resources/js/views/ResendEmailVerify.vue
index f7d7c2f..1be8fce 100644
--- a/resources/js/views/ResendEmailVerify.vue
+++ b/resources/js/views/ResendEmailVerify.vue
@@ -1,26 +1,14 @@
 <template>
-    <SMContainer>
+    <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog narrow :loading="formLoading">
+            <SMDialog narrow>
                 <template v-if="!formDone">
                     <h1>Resend Verify Email</h1>
-                    <SMMessage
-                        v-if="formMessage.message"
-                        :type="formMessage.type"
-                        :message="formMessage.message"
-                        :icon="formMessage.icon" />
-                    <form @submit.prevent="submit">
-                        <SMInput
-                            v-model="formData.username.value"
-                            name="username"
-                            label="Username"
-                            required
-                            :error="formData.username.error"
-                            @blur="fieldValidate(formData.username)" />
-                        <SMCaptchaNotice />
+                    <SMForm v-model="form" @submit="handleSubmit">
+                        <SMInput control="username" />
                         <SMFormFooter>
                             <template #left>
-                                <div>
+                                <div class="small">
                                     <span class="pr-1">Stuck?</span
                                     ><router-link to="/contact"
                                         >Contact Us</router-link
@@ -31,10 +19,10 @@
                                 <SMButton
                                     type="submit"
                                     label="Send"
-                                    icon="fa-solid fa-arrow-right" />
+                                    icon="arrow-forward-outline" />
                             </template>
                         </SMFormFooter>
-                    </form>
+                    </SMForm>
                 </template>
                 <template v-else>
                     <h1>Email Sent!</h1>
@@ -51,78 +39,53 @@
                 </template>
             </SMDialog>
         </SMRow>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import SMInput from "../components/SMInput.vue";
-import SMButton from "../components/SMButton.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
-import SMDialog from "../components/SMDialog.vue";
-import SMMessage from "../components/SMMessage.vue";
-import axios from "axios";
-import { useRoute } from "vue-router";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../helpers/validation";
-import SMCaptchaNotice from "../components/SMCaptchaNotice.vue";
+import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
+import SMButton from "../components/SMButton.vue";
+import SMDialog from "../components/SMDialog.vue";
+import SMForm from "../components/SMForm.vue";
+import SMFormFooter from "../components/SMFormFooter.vue";
+import SMInput from "../components/SMInput.vue";
+import { api } from "../helpers/api";
+import { Form, FormControl } from "../helpers/form";
+import { Required } from "../helpers/validate";
 
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-const formLoading = ref(false);
 const formDone = ref(false);
-const formMessage = reactive({
-    message: "",
-    type: "error",
-    icon: "",
-});
-const formData = reactive({
-    username: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "Your username is needed",
-            min: 4,
-            min_message: "Your username is at least %d characters",
-        },
-    },
-});
+const form = reactive(
+    Form({
+        username: FormControl("", Required()),
+    })
+);
 
-useValidation(formData);
-
-const submit = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+const handleSubmit = async () => {
+    form.loading(true);
 
     try {
-        if (isValidated(formData)) {
-            await recaptchaLoaded();
-            const captcha = await executeRecaptcha("submit");
+        await recaptchaLoaded();
+        const captcha = await executeRecaptcha("submit");
 
-            let res = await axios.post("users/resendVerifyEmailCode", {
-                username: formData.username.value,
+        await api.post({
+            url: "/users/resendVerifyEmailCode",
+            body: {
+                username: form.controls.username.value,
                 captcha_token: captcha,
-            });
+            },
+        });
 
-            formDone.value = true;
-        }
-    } catch (err) {
-        if (err.response.status == 422) {
+        formDone.value = true;
+    } catch (error) {
+        if (error.status == 422) {
             formDone.value = true;
         } else {
-            restParseErrors(formData, [formMessage, "message"], err);
+            form.apiErrors(error);
         }
+    } finally {
+        form.loading(false);
     }
-
-    formLoading.value = false;
 };
 </script>
-
-<style lang="scss"></style>
diff --git a/resources/js/views/ResetPassword.vue b/resources/js/views/ResetPassword.vue
index dc19330..0b9d7cd 100644
--- a/resources/js/views/ResetPassword.vue
+++ b/resources/js/views/ResetPassword.vue
@@ -1,34 +1,15 @@
 <template>
-    <SMContainer>
+    <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog narrow :loading="formLoading">
+            <SMDialog narrow>
                 <template v-if="!formDone">
                     <h1>Reset Password</h1>
-                    <SMMessage
-                        v-if="formMessage.message"
-                        :type="formMessage.type"
-                        :message="formMessage.message"
-                        :icon="formMessage.icon" />
-                    <form @submit.prevent="submit">
-                        <SMInput
-                            v-model="formData.code.value"
-                            name="code"
-                            label="Reset Code"
-                            required
-                            :error="formData.code.error"
-                            @blur="fieldValidate(formData.code)" />
-                        <SMInput
-                            v-model="formData.password.value"
-                            type="password"
-                            name="password"
-                            label="New Password"
-                            required
-                            :error="formData.password.error"
-                            @blur="fieldValidate(formData.password)" />
-                        <SMCaptchaNotice />
+                    <SMForm v-model="form" @submit="handleSubmit">
+                        <SMInput control="code" />
+                        <SMInput control="password" type="password" />
                         <SMFormFooter>
                             <template #left>
-                                <div>
+                                <div class="small">
                                     <router-link
                                         :to="{ name: 'forgot-password' }"
                                         >Resend Code</router-link
@@ -39,10 +20,10 @@
                                 <SMButton
                                     type="submit"
                                     label="Reset Password"
-                                    icon="fa-solid fa-arrow-right" />
+                                    icon="arrow-forward-outline" />
                             </template>
                         </SMFormFooter>
-                    </form>
+                    </SMForm>
                 </template>
                 <template v-else>
                     <h1>Password Reset!</h1>
@@ -57,94 +38,61 @@
                 </template>
             </SMDialog>
         </SMRow>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import SMInput from "../components/SMInput.vue";
-import SMButton from "../components/SMButton.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
-import SMDialog from "../components/SMDialog.vue";
-import SMMessage from "../components/SMMessage.vue";
-import axios from "axios";
-import { useRoute } from "vue-router";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../helpers/validation";
-import SMCaptchaNotice from "../components/SMCaptchaNotice.vue";
+import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
+import { useRoute } from "vue-router";
+import SMButton from "../components/SMButton.vue";
+import SMDialog from "../components/SMDialog.vue";
+import SMForm from "../components/SMForm.vue";
+import SMFormFooter from "../components/SMFormFooter.vue";
+import SMInput from "../components/SMInput.vue";
+import { api } from "../helpers/api";
+import { Form, FormControl } from "../helpers/form";
+import { And, Max, Min, Password, Required } from "../helpers/validate";
 
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-const formLoading = ref(false);
 const formDone = ref(false);
-const formMessage = reactive({
-    message: "",
-    type: "error",
-    icon: "",
-});
-const formData = reactive({
-    code: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "The code is needed",
-            min: 6,
-            min_message: "The code should be 6 characters",
-            max: 6,
-            max_message: "The code should be 6 characters",
-        },
-    },
-    password: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A new password is required",
-            min: 8,
-            min_message: "Your password needs to be at least %d characters",
-            password: "special",
-            password_message:
-                "Your password needs to have at least a letter, a number and a special character",
-        },
-    },
-});
-
-useValidation(formData);
+const form = reactive(
+    Form({
+        code: FormControl("", And([Required(), Min(6), Max(6)])),
+        password: FormControl("", And([Required(), Password()])),
+    })
+);
 
 if (useRoute().query.code !== undefined) {
-    formData.code.value = useRoute().query.code;
-}
-
-const submit = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
-
-    try {
-        if (isValidated(formData)) {
-            await recaptchaLoaded();
-            const captcha = await executeRecaptcha("submit");
-
-            let res = await axios.post("users/resetPassword", {
-                code: formData.code.value,
-                password: formData.password.value,
-                captcha_token: captcha,
-            });
-
-            formDone.value = true;
-        }
-    } catch (err) {
-        restParseErrors(formData, [formMessage, "message"], err);
+    let queryCode = useRoute().query.code;
+    if (Array.isArray(queryCode)) {
+        queryCode = queryCode[0];
     }
 
-    formLoading.value = false;
+    form.controls.code.value = queryCode;
+}
+
+const handleSubmit = async () => {
+    form.loading(true);
+
+    try {
+        await recaptchaLoaded();
+        const captcha = await executeRecaptcha("submit");
+
+        await api.post({
+            url: "/users/resetPassword",
+            body: {
+                code: form.controls.code.value,
+                password: form.controls.password.value,
+                captcha_token: captcha,
+            },
+        });
+
+        formDone.value = true;
+    } catch (error) {
+        form.apiErrors(error);
+    } finally {
+        form.loading(false);
+    }
 };
 </script>
-
-<style lang="scss"></style>
diff --git a/resources/js/views/Rules.vue b/resources/js/views/Rules.vue
index b8a90f6..6cfb74e 100644
--- a/resources/js/views/Rules.vue
+++ b/resources/js/views/Rules.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMContainer class="rules">
+    <SMPage class="sm-rules">
         <h1>Rules</h1>
         <p>
             Oh gosh, no body likes rules but to ensure that we have a fun,
@@ -72,11 +72,13 @@
                 grief other players builds outside of the Survival game-mode.
             </li>
         </ul>
-    </SMContainer>
+    </SMPage>
 </template>
 
+<script setup lang="ts"></script>
+
 <style lang="scss">
-.rules {
+.sm-rules {
     h2 {
         margin-bottom: 0.5rem;
     }
diff --git a/resources/js/views/Terms.vue b/resources/js/views/Terms.vue
index bce047c..0dc2a63 100644
--- a/resources/js/views/Terms.vue
+++ b/resources/js/views/Terms.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMContainer class="terms">
+    <SMPage class="sm-terms">
         <h1>Terms and Conditions</h1>
         <p>
             Please read these terms carefully. By accessing or using our website
@@ -560,5 +560,5 @@
             be responsible for warranty and after sales service but this is
             allowed under the Law.
         </p>
-    </SMContainer>
+    </SMPage>
 </template>
diff --git a/resources/js/views/Unsubscribe.vue b/resources/js/views/Unsubscribe.vue
index 9ec189f..5e5ed66 100644
--- a/resources/js/views/Unsubscribe.vue
+++ b/resources/js/views/Unsubscribe.vue
@@ -1,33 +1,21 @@
 <template>
-    <SMContainer>
+    <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog narrow :loading="formLoading">
+            <SMDialog narrow>
                 <template v-if="!formDone">
                     <h1>Unsubscribe</h1>
                     <p>
                         If you would like to unsubscribe from our mailing list,
                         you have come to the right page!
                     </p>
-                    <SMMessage
-                        v-if="formMessage.message"
-                        :type="formMessage.type"
-                        :message="formMessage.message"
-                        :icon="formMessage.icon" />
-                    <form @submit.prevent="submit">
-                        <SMInput
-                            v-model="formData.email.value"
-                            name="email"
-                            label="Email"
-                            required
-                            :error="formData.email.error"
-                            @blur="fieldValidate(formData.email)" />
-                        <SMCaptchaNotice />
+                    <SMForm v-model="form" @submit="handleSubmit">
+                        <SMInput control="email" />
                         <SMFormFooter>
                             <template #right>
                                 <SMButton type="submit" label="Unsubscribe" />
                             </template>
                         </SMFormFooter>
-                    </form>
+                    </SMForm>
                 </template>
                 <template v-else>
                     <h1>Unsubscribed</h1>
@@ -42,79 +30,61 @@
                 </template>
             </SMDialog>
         </SMRow>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import SMInput from "../components/SMInput.vue";
-import SMButton from "../components/SMButton.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
-import SMDialog from "../components/SMDialog.vue";
-import SMMessage from "../components/SMMessage.vue";
-import axios from "axios";
-import { useRoute } from "vue-router";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../helpers/validation";
-import SMCaptchaNotice from "../components/SMCaptchaNotice.vue";
+import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
+import { useRoute } from "vue-router";
+import SMButton from "../components/SMButton.vue";
+import SMDialog from "../components/SMDialog.vue";
+import SMForm from "../components/SMForm.vue";
+import SMFormFooter from "../components/SMFormFooter.vue";
+import SMInput from "../components/SMInput.vue";
+
+import { api } from "../helpers/api";
+import { Form, FormControl } from "../helpers/form";
+import { And, Email, Required } from "../helpers/validate";
 
 const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-const formLoading = ref(false);
 const formDone = ref(false);
-const formMessage = reactive({
-    message: "",
-    type: "error",
-    icon: "",
-});
-const formData = reactive({
-    email: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "An email address is required.",
-            email: true,
-            email_message: "That does not look like an email address.",
-        },
-    },
-});
+const form = reactive(
+    Form({
+        email: FormControl("", And([Required(), Email()])),
+    })
+);
 
-useValidation(formData);
-
-const submit = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+const handleSubmit = async () => {
+    form.loading(true);
 
     try {
-        if (isValidated(formData)) {
-            await recaptchaLoaded();
-            const captcha = await executeRecaptcha("submit");
+        await recaptchaLoaded();
+        const captcha = await executeRecaptcha("submit");
 
-            await axios.delete("subscriptions", {
-                data: {
-                    email: formData.email.value,
-                    captcha_token: captcha,
-                },
-            });
+        await api.delete({
+            url: "/subscriptions",
+            body: {
+                email: form.controls.email.value,
+                captcha_token: captcha,
+            },
+        });
 
-            formDone.value = true;
-        }
-    } catch (err) {
-        restParseErrors(formData, [formMessage, "message"], err);
+        formDone.value = true;
+    } catch (error) {
+        form.apiErrors(error);
+    } finally {
+        form.loading(false);
     }
-
-    formLoading.value = false;
 };
 
 if (useRoute().query.email !== undefined) {
-    formData.email.value = useRoute().query.email;
-    submit();
+    let queryEmail = useRoute().query.email;
+    if (Array.isArray(queryEmail)) {
+        queryEmail = queryEmail[0];
+    }
+
+    form.controls.email.value = queryEmail;
+    handleSubmit();
 }
 </script>
diff --git a/resources/js/views/WorkshopList.vue b/resources/js/views/WorkshopList.vue
deleted file mode 100644
index da5f10e..0000000
--- a/resources/js/views/WorkshopList.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-    <SMContainer class="mx-auto workshop-list">
-        <h1>Workshops</h1>
-        <div class="toolbar">
-            <SMInput
-                v-model="filterKeywords"
-                placeholder="Keywords"
-                @change="handleFilter"></SMInput>
-            <SMInput
-                v-model="filterLocation"
-                placeholder="Location"
-                @change="handleFilter"></SMInput>
-            <SMDatePicker
-                v-model="filterDateRange"
-                :range="true"
-                placeholder="Date Range"
-                @update:model-value="handleFilter"></SMDatePicker>
-        </div>
-        <SMMessage
-            v-if="formMessage.message"
-            :icon="formMessage.icon"
-            :type="formMessage.type"
-            :message="formMessage.message"
-            class="mt-5" />
-        <SMPanelList
-            :loading="loading"
-            :not-found="events.value?.length == 0"
-            not-found-text="No workshops found">
-            <SMPanel
-                v-for="event in events.value"
-                :key="event.id"
-                :to="{ name: 'workshop-view', params: { id: event.id } }"
-                :title="event.title"
-                :image="event.hero"
-                :show-time="true"
-                :date="event.start_at"
-                :end-date="event.end_at"
-                :date-in-image="true"
-                :location="
-                    event.location == 'online' ? 'Online Event' : event.address
-                "></SMPanel>
-        </SMPanelList>
-    </SMContainer>
-</template>
-
-<script setup lang="ts">
-import SMDatePicker from "../components/SMDatePicker.vue";
-import SMInput from "../components/SMInput.vue";
-import SMMessage from "../components/SMMessage.vue";
-import SMPanelList from "../components/SMPanelList.vue";
-import SMPanel from "../components/SMPanel.vue";
-import { reactive, ref } from "vue";
-import axios from "axios";
-import {
-    buildUrlQuery,
-    timestampLocalToUtc,
-    timestampNowUtc,
-    timestampUtcToLocal,
-} from "../helpers/common";
-import { format, parse, parseISO } from "date-fns";
-
-const loading = ref(true);
-const events = reactive([]);
-
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-
-const filterKeywords = ref("");
-const filterLocation = ref("");
-const filterDateRange = ref("");
-
-const handleLoad = async () => {
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
-
-    events.value = [];
-
-    try {
-        let query = {};
-        query["limit"] = 10;
-
-        if (filterKeywords.value && filterKeywords.value.length > 0) {
-            query["q"] = filterKeywords.value;
-        }
-        if (filterLocation.value && filterLocation.value.length > 0) {
-            query["qlocation"] = filterLocation.value;
-        }
-        if (filterDateRange.value && Array.isArray(filterDateRange.value)) {
-            query["start_at"] =
-                timestampLocalToUtc(filterDateRange.value[0]) +
-                "<>" +
-                timestampLocalToUtc(filterDateRange.value[1]);
-        }
-
-        if (
-            Object.keys(query).length == 1 &&
-            Object.keys(query)[0] == "limit"
-        ) {
-            query["end_at"] = ">" + timestampNowUtc();
-        }
-
-        const url = buildUrlQuery("events", query);
-        let result = await axios.get(url);
-
-        if (result.data.events) {
-            events.value = result.data.events;
-
-            events.value.forEach((item) => {
-                item.start_at = timestampUtcToLocal(item.start_at);
-                item.end_at = timestampUtcToLocal(item.end_at);
-            });
-        }
-    } catch (error) {
-        if (error.response.status != 404) {
-            formMessage.message =
-                error.response?.data?.message ||
-                "Could not load any events from the server.";
-        }
-    }
-
-    loading.value = false;
-};
-
-const handleFilter = async () => {
-    loading.value = true;
-    handleLoad();
-};
-
-handleLoad();
-</script>
-
-<style lang="scss">
-.workshop-list .toolbar {
-    display: flex;
-    flex-direction: row;
-}
-
-@media screen and (max-width: 768px) {
-    .workshop-list .toolbar {
-        flex-direction: column;
-    }
-}
-</style>
diff --git a/resources/js/views/WorkshopView.vue b/resources/js/views/WorkshopView.vue
deleted file mode 100644
index b14cc8b..0000000
--- a/resources/js/views/WorkshopView.vue
+++ /dev/null
@@ -1,309 +0,0 @@
-<template>
-    <SMContainer :full="true" class="workshop-view">
-        <div
-            class="workshop-image"
-            :style="{ backgroundImage: `url('${imageUrl}')` }">
-            <font-awesome-icon
-                v-if="imageUrl.length == 0"
-                class="workshop-image-loader"
-                icon="fa-regular fa-image" />
-        </div>
-        <template #inner>
-            <SMMessage
-                v-if="formMessage.message"
-                :icon="formMessage.icon"
-                :type="formMessage.type"
-                :message="formMessage.message"
-                class="mt-5" />
-            <SMContainer class="workshop-page">
-                <div class="workshop-body">
-                    <h2 class="workshop-title">{{ event.title }}</h2>
-                    <SMHTML :html="event.content" class="workshop-content" />
-                </div>
-                <div class="workshop-info">
-                    <div
-                        v-if="
-                            event.status == 'closed' ||
-                            (event.status == 'open' &&
-                                timestampBeforeNow(event.end_at))
-                        "
-                        class="workshop-registration workshop-registration-closed">
-                        Registration for this event has closed
-                    </div>
-                    <div
-                        v-if="event.status == 'cancelled'"
-                        class="workshop-registration workshop-registration-cancelled">
-                        This event has been cancelled
-                    </div>
-                    <div
-                        v-if="
-                            event.status == 'open' &&
-                            timestampAfterNow(event.end_at) &&
-                            event.registration_type == 'none'
-                        "
-                        class="workshop-registration workshop-registration-none">
-                        Registration not required for this event.<br />Arrive
-                        early to avoid disappointment as seating maybe limited.
-                    </div>
-                    <div
-                        v-if="
-                            event.status == 'open' &&
-                            timestampAfterNow(event.end_at) &&
-                            event.registration_type != 'none'
-                        "
-                        class="workshop-registration workshop-registration-url">
-                        <SMButton
-                            :href="registerUrl"
-                            label="Register for Event"></SMButton>
-                    </div>
-                    <div class="workshop-date">
-                        <h4>
-                            <font-awesome-icon
-                                icon="fa-regular fa-calendar" />Date / Time
-                        </h4>
-                        <p
-                            v-for="(line, index) in workshopDate"
-                            :key="index"
-                            class="workshop-date-string">
-                            {{ line }}
-                        </p>
-                    </div>
-                    <div class="workshop-location">
-                        <h4>
-                            <font-awesome-icon
-                                icon="fa-solid fa-location-dot" />Location
-                        </h4>
-                        <p>
-                            {{
-                                event.location == "online"
-                                    ? "Online event"
-                                    : event.address
-                            }}
-                        </p>
-                    </div>
-                </div>
-            </SMContainer>
-        </template>
-    </SMContainer>
-</template>
-
-<script setup lang="ts">
-import axios from "axios";
-import { computed, ref, reactive } from "vue";
-import { useRoute } from "vue-router";
-import { useApplicationStore } from "../store/ApplicationStore";
-import { format } from "date-fns";
-import SMButton from "../components/SMButton.vue";
-import SMHTML from "../components/SMHTML.vue";
-import SMMessage from "../components/SMMessage.vue";
-import {
-    timestampUtcToLocal,
-    timestampBeforeNow,
-    timestampAfterNow,
-} from "../helpers/common";
-
-const applicationStore = useApplicationStore();
-const event = ref({});
-const imageUrl = ref("");
-const route = useRoute();
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-
-const workshopDate = computed(() => {
-    let str = [];
-
-    if (Object.keys(event.value).length > 0) {
-        if (
-            event.value.end_at.length > 0 &&
-            event.value.start_at.substring(
-                0,
-                event.value.start_at.indexOf(" ")
-            ) !=
-                event.value.end_at.substring(0, event.value.end_at.indexOf(" "))
-        ) {
-            str = [format(new Date(event.value.start_at), "dd/MM/yyyy")];
-            if (event.value.end_at.length > 0) {
-                str[0] =
-                    str[0] +
-                    " - " +
-                    format(new Date(event.value.end_at), "dd/MM/yyyy");
-            }
-        } else {
-            str = [
-                format(new Date(event.value.start_at), "EEEE dd MMM yyyy"),
-                format(new Date(event.value.start_at), "h:mm aa") +
-                    " - " +
-                    format(new Date(event.value.end_at), "h:mm aa"),
-            ];
-        }
-    }
-
-    return str;
-});
-
-const registerUrl = computed(() => {
-    let href = "";
-
-    if (event.value?.registration_type == "link") {
-        return event.value?.registration_data;
-    } else if (event.value?.registration_type == "email") {
-        return "mailto:" + event.value?.registration_data;
-    }
-
-    return href;
-});
-
-const handleLoad = async () => {
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
-
-    try {
-        const result = await axios.get(`events/${route.params.id}`);
-        event.value = result.data.event;
-
-        event.value.start_at = timestampUtcToLocal(event.value.start_at);
-        event.value.end_at = timestampUtcToLocal(event.value.end_at);
-
-        applicationStore.setDynamicTitle(event.value.title);
-        handleLoadImage();
-    } catch (error) {
-        formMessage.message =
-            error.response?.data?.message ||
-            "Could not load event information from the server.";
-    }
-};
-
-const handleLoadImage = async () => {
-    try {
-        const result = await axios.get(`media/${event.value.hero}`);
-        if (result.data.medium) {
-            imageUrl.value = result.data.medium.url;
-        }
-    } catch (error) {
-        /* empty */
-    }
-};
-
-handleLoad();
-</script>
-
-<style lang="scss">
-.workshop-view {
-    .workshop-image {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: map-get($spacer, 5) * 4;
-        height: 20vw;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-color: #eee;
-
-        .workshop-image-loader {
-            font-size: 5rem;
-            color: $secondary-color;
-        }
-    }
-
-    .workshop-page {
-        display: flex;
-        flex-direction: row;
-
-        .workshop-body,
-        .workshop-info {
-            line-height: 1.5rem;
-        }
-
-        .workshop-body {
-            flex: 1;
-            text-align: left;
-        }
-
-        .workshop-info {
-            width: 18rem;
-            margin-left: 2rem;
-
-            h4 {
-                margin-bottom: 0.25rem;
-                display: flex;
-                align-items: center;
-                height: 1rem;
-
-                svg {
-                    display: inline-block;
-                    width: 1rem;
-                    margin-right: 0.5rem;
-                }
-            }
-
-            p {
-                margin: 0;
-                padding-left: 1.5rem;
-                font-size: 90%;
-            }
-
-            .workshop-registration {
-                margin-top: 1.5rem;
-                line-height: 1.25rem;
-
-                .button {
-                    display: block;
-                }
-            }
-
-            .workshop-registration-none {
-                border: 1px solid #ffeeba;
-                background-color: #fff3cd;
-                color: #856404;
-                text-align: center;
-                font-size: 80%;
-                padding: 0.5rem;
-            }
-
-            .workshop-registration-closed,
-            .workshop-registration-cancelled {
-                border: 1px solid #f5c2c7;
-                background-color: #f8d7da;
-                color: #842029;
-                text-align: center;
-                font-size: 80%;
-                padding: 0.5rem;
-            }
-
-            .workshop-date,
-            .workshop-location {
-                padding: 0 1rem;
-            }
-        }
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .workshop-view .workshop-page {
-        flex-direction: column;
-
-        .workshop-body {
-            text-align: center;
-        }
-
-        .workshop-info {
-            width: 100%;
-            margin-left: 0;
-
-            h4 {
-                justify-content: center;
-            }
-
-            p {
-                padding-left: 0;
-                text-align: center;
-            }
-        }
-    }
-}
-</style>
diff --git a/resources/js/views/dashboard/CreatePost.vue b/resources/js/views/dashboard/CreatePost.vue
index 5e2ddc9..a90d60d 100644
--- a/resources/js/views/dashboard/CreatePost.vue
+++ b/resources/js/views/dashboard/CreatePost.vue
@@ -1,118 +1,72 @@
 <template>
-    <SMContainer>
-        <SMMessage
-            v-if="formMessage.message"
-            :type="formMessage.type"
-            :message="formMessage.message"
-            :icon="formMessage.icon" />
-        <form @submit.prevent="submit">
+    <SMPage>
+        <SMForm v-model="form" @submit="handleSubmit">
             <SMRow>
-                <SMInput
-                    v-model="formData.title.value"
-                    label="Title"
-                    required
-                    :error="formData.title.error"
-                    @blur="fieldValidate(formData.title)" />
+                <SMInput control="title" />
             </SMRow>
             <SMRow>
                 <SMEditor
                     id="content"
-                    v-model="formData.content.value"
+                    v-model="form.content.value"
                     @file-accept="fileAccept"
                     @attachment-add="attachmentAdd" />
             </SMRow>
             <SMRow>
                 <SMButton type="submit" label="Save" />
             </SMRow>
-        </form>
-    </SMContainer>
+        </SMForm>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import DEditor from "../../components/SMEditor.vue";
-import SMInput from "../../components/SMInput.vue";
-import SMButton from "../../components/SMButton.vue";
-import SMDialog from "../../components/SMDialog.vue";
-import SMMessage from "../../components/SMMessage.vue";
-import axios from "axios";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../../helpers/validation";
-import { useUserStore } from "@/store/UserStore";
+import { reactive } from "vue";
 import { useRoute } from "vue-router";
-import { createTemplateLiteral } from "@vue/compiler-core";
+import SMButton from "../../components/SMButton.vue";
+import SMForm from "../../components/SMForm.vue";
+import SMInput from "../../components/SMInput.vue";
+
+import { api } from "../../helpers/api";
+import { Form, FormControl } from "../../helpers/form";
+import { And, Min, Required } from "../../helpers/validate";
 
 const route = useRoute();
-const userStore = useUserStore();
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-const formData = reactive({
-    title: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A first name is needed",
-            min: 2,
-            min_message: "Your first name should be at least 2 letters long",
-        },
-    },
-    content: {
-        value: "<div>Hello <strong>People</strong> persons!</div>",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A last name is needed",
-            min: 2,
-            min_message: "Your last name should be at least 2 letters long",
-        },
-    },
-});
+const form = reactive(
+    Form({
+        title: FormControl("", And([Required(), Min(2)])),
+        content: FormControl("", Required()),
+    })
+);
 
-useValidation(formData);
+// const getPostById = async () => {
+//     try {
+//         if (isValidated(formData)) {
+//             let res = await axios.get("posts/" + route.params.id);
 
-const getPostById = async () => {
+//             formData.title.value = res.data.title;
+//             formData.content.value = res.data.content;
+//         }
+//     } catch (err) {
+//         console.log(err);
+//         formMessage.icon = "";
+//         formMessage.type = "error";
+//         formMessage.message = "";
+//         restParseErrors(formData, [formMessage, "message"], err);
+//     }
+// };
+
+const handleSubmit = async () => {
     try {
-        if (isValidated(formData)) {
-            let res = await axios.get("posts/" + route.params.id);
+        await api.post({
+            url: "/posts",
+            body: {
+                title: form.title.value,
+                content: form.content.value,
+            },
+        });
 
-            formData.title.value = res.data.title;
-            formData.content.value = res.data.content;
-        }
-    } catch (err) {
-        console.log(err);
-        formMessage.icon = "";
-        formMessage.type = "error";
-        formMessage.message = "";
-        restParseErrors(formData, [formMessage, "message"], err);
-    }
-};
-
-const submit = async () => {
-    try {
-        if (isValidated(formData)) {
-            let res = await axios.post("posts", {
-                title: formData.title.value,
-                content: formData.content.value,
-            });
-
-            console.log(ref);
-            formMessage.type = "success";
-            formMessage.message = "Your details have been updated";
-        }
-    } catch (err) {
-        console.log(err);
-        formMessage.icon = "";
-        formMessage.type = "error";
-        formMessage.message = "";
-        restParseErrors(formData, [formMessage, "message"], err);
+        form.message("The post has been saved", "success");
+    } catch (error) {
+        form.apiError(error);
     }
 };
 
@@ -162,21 +116,3 @@ const attachmentAdd = async (event) => {
     }
 };
 </script>
-
-<style lang="scss">
-// .dialog {
-//     flex-direction: column;
-//     margin: 0 auto;
-//     max-width: 600px;
-// }
-
-// .buttonFooter {
-//     flex-direction: row;
-// }
-
-// @media screen and (max-width: 768px) {
-//     .buttonFooter {
-//         flex-direction: column-reverse;
-//     }
-// }
-</style>
diff --git a/resources/js/views/dashboard/Dashboard.vue b/resources/js/views/dashboard/Dashboard.vue
index 5862d22..fb3c430 100644
--- a/resources/js/views/dashboard/Dashboard.vue
+++ b/resources/js/views/dashboard/Dashboard.vue
@@ -1,55 +1,57 @@
 <template>
-    <SMContainer class="dashboard mx-auto">
-        <h1>Dashboard</h1>
-        <div class="boxes">
-            <router-link to="/dashboard/details" class="box">
-                <font-awesome-icon icon="fa-solid fa-user-pen" />
-                <h2>My Details</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('admin/posts')"
-                to="/dashboard/posts"
-                class="box">
-                <font-awesome-icon icon="fa-regular fa-newspaper" />
-                <h2>Posts</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('admin/users')"
-                :to="{ name: 'user-list' }"
-                class="box">
-                <font-awesome-icon icon="fa-solid fa-users" />
-                <h2>Users</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('admin/events')"
-                to="/dashboard/events"
-                class="box">
-                <font-awesome-icon icon="fa-regular fa-calendar" />
-                <h2>Events</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('admin/courses')"
-                to="/dashboard/courses"
-                class="box">
-                <font-awesome-icon icon="fa-solid fa-graduation-cap" />
-                <h2>{{ courseBoxTitle }}</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('admin/media')"
-                to="/dashboard/media"
-                class="box">
-                <font-awesome-icon icon="fa-solid fa-photo-film" />
-                <h2>Media</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('logs/discord')"
-                :to="{ name: 'discord-bot-logs' }"
-                class="box">
-                <font-awesome-icon icon="fa-brands fa-discord" />
-                <h2>Discord Bot Logs</h2>
-            </router-link>
-        </div>
-    </SMContainer>
+    <SMPage class="sm-dashboard">
+        <template #container>
+            <h1>Dashboard</h1>
+            <div class="boxes">
+                <router-link to="/dashboard/details" class="box">
+                    <ion-icon name="location-outline" />
+                    <h2>My Details</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('admin/posts')"
+                    :to="{ name: 'dashboard-post-list' }"
+                    class="box">
+                    <ion-icon name="newspaper-outline" />
+                    <h2>Posts</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('admin/users')"
+                    :to="{ name: 'dashboard-user-list' }"
+                    class="box">
+                    <ion-icon name="people-outline" />
+                    <h2>Users</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('admin/events')"
+                    :to="{ name: 'dashboard-event-list' }"
+                    class="box">
+                    <ion-icon name="calendar-outline" />
+                    <h2>Events</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('admin/courses')"
+                    :to="{ name: 'dashboard-course-list' }"
+                    class="box">
+                    <ion-icon name="school-outline" />
+                    <h2>{{ courseBoxTitle }}</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('admin/media')"
+                    :to="{ name: 'dashboard-media-list' }"
+                    class="box">
+                    <ion-icon name="film-outline" />
+                    <h2>Media</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('logs/discord')"
+                    :to="{ name: 'dashboard-discord-bot-logs' }"
+                    class="box">
+                    <ion-icon name="logo-discord" />
+                    <h2>Discord Bot Logs</h2>
+                </router-link>
+            </div>
+        </template>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
@@ -68,44 +70,48 @@ const courseBoxTitle = computed(() => {
 </script>
 
 <style lang="scss">
-.dashboard {
-    max-width: 1000px;
-}
+.sm-dashboard {
+    background-color: $secondary-background-color;
 
-.boxes {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: -#{map-get($spacer, 3)};
-
-    .box {
+    .boxes {
         display: flex;
-        flex-basis: map-get($spacer, 5) * 4.5;
-        flex-direction: column;
-        background-color: #eee;
-        border: 3px solid #eee;
-        border-radius: 12px;
-        padding: map-get($spacer, 5) map-get($spacer, 4);
-        margin: map-get($spacer, 3);
-        font-size: map-get($spacer, 3);
-        color: $font-color;
-        transition: background-color 0.3s, border 0.3s;
-        text-align: center;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: -#{map-get($spacer, 3)};
 
-        h2 {
-            margin-top: map-get($spacer, 2);
-            margin-bottom: 0;
-        }
+        .box {
+            display: flex;
+            flex-basis: map-get($spacer, 5) * 4.5;
+            flex-direction: column;
+            border-radius: 12px;
+            border: 2px solid $primary-color-dark;
+            background-color: #f8f8f8;
+            padding: map-get($spacer, 5) map-get($spacer, 4);
+            margin: map-get($spacer, 3);
+            font-size: map-get($spacer, 3);
+            color: $primary-color-dark !important;
+            margin-bottom: map-get($spacer, 5);
+            transition: all 0.2s ease-in-out;
+            align-items: center;
+            text-align: center;
 
-        svg {
-            font-size: map-get($spacer, 5);
-        }
+            h2 {
+                margin-top: map-get($spacer, 2);
+                margin-bottom: 0;
+            }
 
-        &:hover {
-            border: 3px solid $font-color;
-            text-decoration: none;
-            background-color: #fff;
-            color: $font-color;
+            ion-icon {
+                font-size: map-get($spacer, 5);
+            }
+
+            &:hover {
+                text-decoration: none;
+                background-color: $primary-color-lighter;
+                border-color: $primary-color-darker;
+                color: $primary-color-darker !important;
+                box-shadow: 0 0 14px rgba(0, 0, 0, 0.25);
+                transform: scale(1.01);
+            }
         }
     }
 }
diff --git a/resources/js/views/dashboard/DiscordBotLogs.vue b/resources/js/views/dashboard/DiscordBotLogs.vue
index 4abb8c2..f1194bd 100644
--- a/resources/js/views/dashboard/DiscordBotLogs.vue
+++ b/resources/js/views/dashboard/DiscordBotLogs.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMContainer :loading="formLoading" permission="logs/discord">
+    <SMPage :loading="formLoading" permission="logs/discord">
         <h1>Discord Bot Logs</h1>
         <SMMessage
             v-if="message.message"
@@ -22,16 +22,16 @@
             v-if="!message.message"
             label="Reload Logs"
             @click="loadData" />
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { reactive, ref } from "vue";
 import SMButton from "../../components/SMButton.vue";
-import SMTabGroup from "../../components/SMTabGroup.vue";
-import SMTab from "../../components/SMTab.vue";
 import SMMessage from "../../components/SMMessage.vue";
-import axios from "axios";
+import SMTab from "../../components/SMTab.vue";
+import SMTabGroup from "../../components/SMTabGroup.vue";
+import { api } from "../../helpers/api";
 
 let formLoading = ref(false);
 let logOutputContent = ref("");
@@ -49,7 +49,7 @@ const loadData = async () => {
 
     try {
         formLoading.value = true;
-        let res = await axios.get(`logs/discord`);
+        let res = await api.get(`logs/discord`);
 
         logOutputContent.value = res.data.log.output;
         if (logOutputContent.value.length === 0) {
diff --git a/resources/js/views/dashboard/EventEdit.vue b/resources/js/views/dashboard/EventEdit.vue
index c24aa2e..5b051b4 100644
--- a/resources/js/views/dashboard/EventEdit.vue
+++ b/resources/js/views/dashboard/EventEdit.vue
@@ -1,84 +1,51 @@
 <template>
-    <SMContainer :page-error="pageError" permission="admin/events">
+    <SMPage :page-error="pageError" permission="admin/events">
         <SMRow>
             <SMDialog :loading="formLoading">
                 <h1>{{ page_title }}</h1>
-                <SMMessage
-                    v-if="formMessage.message"
-                    :icon="formMessage.icon"
-                    :type="formMessage.type"
-                    :message="formMessage.message" />
-                <form @submit.prevent="submit">
+                <SMForm :model-value="form" @submit="handleSubmit">
                     <SMRow>
-                        <SMColumn
-                            ><SMInput
-                                v-model="formData.title.value"
-                                label="Title"
-                                required
-                                :error="formData.title.error"
-                                @blur="fieldValidate(formData.title)"
-                        /></SMColumn>
+                        <SMColumn><SMInput control="title" /></SMColumn>
                     </SMRow>
                     <SMRow>
                         <SMColumn>
-                            <SMSelect
-                                v-model="formData.location.value"
-                                label="Location"
+                            <SMInput
+                                control="location"
                                 :options="{
                                     online: 'Online',
                                     physical: 'Physical',
-                                }"
-                                @change="fieldValidate(formData.address)" />
+                                }" />
                         </SMColumn>
                         <SMColumn
                             ><SMInput
-                                v-if="formData.location.value !== 'online'"
-                                v-model="formData.address.value"
-                                :label="address_data?.title"
-                                type="text"
-                                :required="address_data?.required"
-                                :error="formData.address.error"
-                                @blur="fieldValidate(formData.address)"
+                                v-if="form.location.value !== 'online'"
+                                control="address"
                         /></SMColumn>
                     </SMRow>
                     <SMRow>
                         <SMColumn>
                             <SMDatepicker
-                                v-model="formData.start_at.value"
-                                label="Start Date/Time"
-                                :error="formData.start_at.error"
-                                required
-                                @blur="
-                                    fieldValidate(formData.start_at)
-                                "></SMDatepicker>
+                                control="start_at"
+                                label="Start Date/Time"></SMDatepicker>
                         </SMColumn>
                         <SMColumn>
                             <SMDatepicker
-                                v-model="formData.end_at.value"
-                                label="End Date/Time"
-                                :error="formData.end_at.error"
-                                required
-                                @blur="
-                                    fieldValidate(formData.end_at)
-                                "></SMDatepicker>
+                                control="end_at"
+                                label="End Date/Time"></SMDatepicker>
                         </SMColumn>
                     </SMRow>
                     <SMRow>
                         <SMColumn>
                             <SMDatepicker
-                                v-model="formData.publish_at.value"
-                                label="Publish Date/Time"
-                                :error="formData.publish_at.error"
-                                @blur="
-                                    fieldValidate(formData.publish_at)
-                                "></SMDatepicker>
+                                control="publish_at"
+                                label="Publish Date/Time"></SMDatepicker>
                         </SMColumn>
                         <SMColumn>
-                            <SMSelect
-                                v-model="formData.status.value"
-                                label="Status"
+                            <SMInput
+                                control="status"
                                 :options="{
                                     draft: 'Draft',
+                                    soon: 'Opening Soon',
                                     open: 'Open',
                                     closed: 'Closed',
                                     cancelled: 'Cancelled',
@@ -87,45 +54,35 @@
                     </SMRow>
                     <SMRow>
                         <SMColumn>
-                            <SMSelect
-                                v-model="formData.registration_type.value"
+                            <SMInput
+                                control="registration_type"
                                 label="Registration"
                                 :options="{
                                     none: 'None',
                                     email: 'Email',
                                     link: 'Link',
-                                }"
-                                @change="
-                                    fieldValidate(formData.registration_data)
-                                " />
+                                }" />
                         </SMColumn>
                         <SMColumn>
                             <SMInput
                                 v-if="registration_data?.visible"
-                                v-model="formData.registration_data.value"
+                                control="registration_data"
                                 :label="registration_data?.title"
-                                :type="registration_data?.type"
-                                required
-                                :error="formData.registration_data.error"
-                                @blur="
-                                    fieldValidate(formData.registration_data)
-                                " />
+                                :type="registration_data?.type" />
                         </SMColumn>
                     </SMRow>
                     <SMRow>
                         <SMColumn>
                             <SMInput
-                                v-model="formData.hero.value"
+                                control="hero"
                                 type="media"
-                                label="Hero image"
-                                :error="formData.hero.error"
-                                required />
+                                label="Hero image" />
                         </SMColumn>
                     </SMRow>
                     <SMRow>
                         <SMColumn>
                             <SMEditor
-                                v-model:srcContent="formData.content.value"
+                                v-model:srcContent="form.content.value"
                                 :mime-types="[
                                     'image/png',
                                     'image/jpeg',
@@ -141,53 +98,49 @@
                             </template>
                         </SMFormFooter>
                     </SMRow>
-                </form>
+                </SMForm>
             </SMDialog>
         </SMRow>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from "vue";
-import SMInput from "../../components/SMInput.vue";
-import SMButton from "../../components/SMButton.vue";
-import SMDialog from "../../components/SMDialog.vue";
-import SMSelect from "../../components/SMSelect.vue";
-import SMDatepicker from "../../components/SMDatePicker.vue";
-import SMEditor from "../../components/SMEditor.vue";
-import SMMessage from "../../components/SMMessage.vue";
-import SMFormFooter from "../../components/SMFormFooter.vue";
-import axios from "axios";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../../helpers/validation";
+import { computed, reactive, ref } from "vue";
 import { useRoute } from "vue-router";
-import { timestampLocalToUtc, timestampUtcToLocal } from "../../helpers/common";
-import { parseISO } from "date-fns";
+import SMButton from "../../components/SMButton.vue";
+import SMDatepicker from "../../components/SMDatePicker.vue";
+import SMDialog from "../../components/SMDialog.vue";
+import SMEditor from "../../components/SMEditor.vue";
+import SMFormFooter from "../../components/SMFormFooter.vue";
+import SMInput from "../../components/SMInput.vue";
+import { api } from "../../helpers/api";
+import { SMDate } from "../../helpers/datetime";
+import { FormControl } from "../../helpers/form";
+import {
+    And,
+    Custom,
+    DateTime,
+    Email,
+    Min,
+    Required,
+    Url,
+} from "../../helpers/validate";
+
+import SMForm from "../../components/SMForm.vue";
 
 const route = useRoute();
-const formLoading = ref(false);
 const page_title = route.params.id ? "Edit Event" : "Create New Event";
 const pageError = ref(200);
 
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-
 const address_data = computed(() => {
     let data = {
         title: "",
         required: false,
     };
 
-    if (formData?.location.value === "online") {
+    if (form?.location.value === "online") {
         data.required = false;
-    } else if (formData?.location.value === "physical") {
+    } else if (form?.location.value === "physical") {
         data.title = "Address";
         data.required = true;
     }
@@ -202,11 +155,11 @@ const registration_data = computed(() => {
         type: "text",
     };
 
-    if (formData?.registration_type.value === "email") {
+    if (form?.registration_type.value === "email") {
         data.visible = true;
         data.title = "Registration email";
         data.type = "email";
-    } else if (formData?.registration_type.value === "link") {
+    } else if (form?.registration_type.value === "link") {
         data.visible = true;
         data.title = "Registration URL";
         data.type = "url";
@@ -215,170 +168,145 @@ const registration_data = computed(() => {
     return data;
 });
 
-const formData = reactive({
-    title: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "An event title is required",
-            min: 6,
-            min_message: "Your event title should be at least 6 letters long",
-        },
-    },
-    location: {
-        value: "online",
-        error: "",
-    },
-    address: {
-        value: "",
-        error: "",
-        rules: {
-            required: () => {
-                return address_data?.value.required;
-            },
-            required_message: "An address is required",
-        },
-    },
-    start_at: {
-        value: null,
-        error: "",
-        rules: {
-            required: true,
-            datetime: true,
-        },
-    },
-    end_at: {
-        value: null,
-        error: "",
-        rules: {
-            required: true,
-            datetime: true,
-            afterdate: () => {
-                return formData.start_at.value;
-            },
-            afterdate_message:
-                "The ending date/time must be after the starting date/time.",
-        },
-    },
-    publish_at: {
-        value: null,
-        error: "",
-    },
-    status: {
-        value: "",
-        error: "",
-    },
-    registration_type: {
-        value: "none",
-        error: "",
-    },
-    registration_data: {
-        value: "",
-        error: "",
-        rules: {
-            type:
-                // eslint-disable-next-line
-                registration_data,
-            email_message: "A valid email address is required",
-            url_message: "A valid URL is required",
-        },
-    },
-    hero: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-        },
-    },
-    content: {
-        value: "",
-        error: "",
-    },
-});
+const form = reactive(
+    Form({
+        title: FormControl("", And([Required(), Min(6)])),
+        location: FormControl("online"),
+        address: FormControl(
+            "",
+            Custom((value) => {
+                return address_data?.value.required && value.length == 0
+                    ? "A venue address is required"
+                    : false;
+            })
+        ),
+        start_at: FormControl("", And([Required(), DateTime()])),
+        end_at: FormControl(
+            "",
+            And([
+                Required(),
+                DateTime({
+                    after: (v) => {
+                        return form.start_at.value;
+                    },
+                    invalidAfterMessage:
+                        "The ending date/time must be after the starting date/time.",
+                }),
+            ])
+        ),
+        publish_at: FormControl("", DateTime()),
+        status: FormControl(),
+        registration_type: FormControl("none"),
+        registration_data: FormControl(
+            "",
+            Custom((v) => {
+                let validationResult = {
+                    valid: true,
+                    invalidMessages: [""],
+                };
 
-useValidation(formData);
+                if (registration_data.value.type == "email") {
+                    validationResult = Email().validate(v);
+                } else if (registration_data.value.type == "url") {
+                    validationResult = Url().validate(v);
+                }
+
+                if (!validationResult.valid) {
+                    return validationResult.invalidMessages[0];
+                }
+
+                return true;
+            })
+        ),
+        hero: FormControl("", Required()),
+        content: FormControl(),
+    })
+);
 
 const loadData = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+    form.loading(true);
 
     if (route.params.id) {
         try {
-            let res = await axios.get("events/" + route.params.id);
+            let res = await api.get("/events/" + route.params.id);
             if (!res.data.event) {
                 throw new Error("The server is currently not available");
             }
 
-            formData.title.value = res.data.event.title;
-            formData.location.value = res.data.event.location;
-            formData.address.value = res.data.event.address
+            form.title.value = res.data.event.title;
+            form.location.value = res.data.event.location;
+            form.address.value = res.data.event.address
                 ? res.data.event.address
                 : "";
-            formData.start_at.value = timestampUtcToLocal(
-                res.data.event.start_at
-            );
-            formData.end_at.value = timestampUtcToLocal(res.data.event.end_at);
-            formData.status.value = res.data.event.status;
-            formData.publish_at.value = timestampUtcToLocal(
-                res.data.event.publish_at
-            );
-            formData.registration_type.value = res.data.event.registration_type;
-            formData.registration_data.value = res.data.event.registration_data;
-            formData.content.value = res.data.event.content
+            form.start_at.value = new SMDate(res.data.event.start_at, {
+                format: "ymd",
+                utc: true,
+            }).format("yyyy/MM/dd HH:mm:ss");
+            form.end_at.value = new SMDate(res.data.event.end_at, {
+                format: "ymd",
+                utc: true,
+            }).format("yyyy/MM/dd HH:mm:ss");
+            form.status.value = res.data.event.status;
+            form.publish_at.value = new SMDate(res.data.event.publish_at, {
+                format: "ymd",
+                utc: true,
+            }).format("yyyy/MM/dd HH:mm:ss");
+            form.registration_type.value = res.data.event.registration_type;
+            form.registration_data.value = res.data.event.registration_data;
+            form.content.value = res.data.event.content
                 ? res.data.event.content
                 : "";
-            formData.hero.value = res.data.event.hero;
+            form.hero.value = res.data.event.hero;
         } catch (err) {
             pageError.value = err.response.status;
         }
     }
 
-    formLoading.value = false;
+    form.loading(false);
 };
 
-const submit = async () => {
-    console.log(formData.end_at.value);
-
+const handleSubmit = async () => {
     try {
-        if (isValidated(formData)) {
-            let data = {
-                title: formData.title.value,
-                location: formData.location.value,
-                address: formData.address.value,
-                start_at: timestampLocalToUtc(formData.start_at.value),
-                end_at: timestampLocalToUtc(formData.end_at.value),
-                status: formData.status.value,
-                publish_at:
-                    formData.publish_at.value == ""
-                        ? ""
-                        : timestampLocalToUtc(formData.publish_at.value),
-                registration_type: formData.registration_type.value,
-                registration_data: formData.registration_data.value,
-                content: formData.content.value,
-                hero: formData.hero.value,
-            };
+        let data = {
+            title: form.title.value,
+            location: form.location.value,
+            address: form.address.value,
+            start_at: new SMDate(form.start_at.value, { format: "dmy" }).format(
+                "yyyy/MM/dd HH:mm:ss",
+                { utc: true }
+            ),
+            end_at: new SMDate(form.end_at.value, { format: "dmy" }).format(
+                "yyyy/MM/dd HH:mm:ss",
+                { utc: true }
+            ),
+            status: form.status.value,
+            publish_at:
+                form.publish_at.value == ""
+                    ? ""
+                    : new SMDate(form.publish_at.value, {
+                          format: "dmy",
+                      }).format("yyyy/MM/dd HH:mm:ss", { utc: true }),
+            registration_type: form.registration_type.value,
+            registration_data: form.registration_data.value,
+            content: form.content.value,
+            hero: form.hero.value,
+        };
 
-            let res = {};
-            if (route.params.id) {
-                res = await axios.put(`events/${route.params.id}`, data);
-            } else {
-                console.log(data);
-                res = await axios.post(`events`, data);
-            }
-
-            console.log(res);
-            formMessage.type = "success";
-            formMessage.message = "Your details have been updated";
+        if (route.params.id) {
+            await api.put({
+                url: `/events/${route.params.id}`,
+                body: data,
+            });
+        } else {
+            await api.post({
+                url: "events",
+                body: data,
+            });
         }
-    } catch (err) {
-        console.log(err);
-        formMessage.icon = "";
-        formMessage.type = "error";
-        formMessage.message = "";
-        restParseErrors(formData, [formMessage, "message"], err);
+
+        form.message("Your details have been updated", "success");
+    } catch (error) {
+        form.apiError(error);
     }
 
     window.scrollTo({
diff --git a/resources/js/views/dashboard/EventList.vue b/resources/js/views/dashboard/EventList.vue
index 0b3768c..d3293c2 100644
--- a/resources/js/views/dashboard/EventList.vue
+++ b/resources/js/views/dashboard/EventList.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMContainer permission="admin/events">
+    <SMPage permission="admin/events">
         <SMHeading heading="Events" />
         <SMMessage
             v-if="formMessage.message"
@@ -26,46 +26,38 @@
             :items="items"
             :search-value="search">
             <template #loading>
-                <font-awesome-icon icon="fa-solid fa-spinner" pulse />
+                <SMLoadingIcon />
             </template>
             <template #item-title="item">
                 <router-link
-                    :to="{ name: 'event-edit', params: { id: item.id } }"
+                    :to="{
+                        name: 'dashboard-event-edit',
+                        params: { id: item.id },
+                    }"
                     >{{ item.title }}</router-link
                 >
             </template>
             <template #item-actions="item">
-                <div class="action-wrapper">
-                    <font-awesome-icon
-                        icon="fa-solid fa-pen-to-square"
-                        @click="handleEdit(item)" />
-                    <font-awesome-icon
-                        icon="fa-regular fa-trash-can"
-                        @click="handleDelete(item)" />
-                </div>
+                <div class="action-wrapper"></div>
             </template>
         </EasyDataTable>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, reactive } from "vue";
-import EasyDataTable from "vue3-easy-data-table";
-import axios from "axios";
-import {
-    relativeDate,
-    timestampUtcToLocal,
-    toParamString,
-} from "../../helpers/common";
+import { reactive, ref, watch } from "vue";
 import { useRouter } from "vue-router";
-import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
+import EasyDataTable from "vue3-easy-data-table";
 import { openDialog } from "vue3-promise-dialog";
-import SMToolbar from "../../components/SMToolbar.vue";
+import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
 import SMButton from "../../components/SMButton.vue";
-import { debounce } from "../../helpers/common";
 import SMHeading from "../../components/SMHeading.vue";
+import SMLoadingIcon from "../../components/SMLoadingIcon.vue";
 import SMMessage from "../../components/SMMessage.vue";
-import { restParseErrors } from "../../helpers/validation";
+import SMToolbar from "../../components/SMToolbar.vue";
+import { api } from "../../helpers/api";
+import { SMDate } from "../../helpers/datetime";
+import { debounce } from "../../helpers/debounce";
 
 const router = useRouter();
 const search = ref("");
@@ -119,8 +111,9 @@ const loadFromServer = async () => {
             params["title"] = search.value;
         }
 
-        let res = await axios.get(`events${toParamString(params)}`, {
-            redirect: false,
+        let res = await api.get({
+            url: "/events",
+            params: params,
         });
 
         if (!res.data.events) {
@@ -131,13 +124,22 @@ const loadFromServer = async () => {
 
         items.value.forEach((row) => {
             if (row.start_at !== "undefined") {
-                row.start_at = relativeDate(timestampUtcToLocal(row.start_at));
+                row.start_at = new SMDate(row.start_at, {
+                    format: "ymd",
+                    utc: true,
+                }).relative();
             }
             if (row.created_at !== "undefined") {
-                row.created_at = relativeDate(row.created_at);
+                row.created_at = new SMDate(row.creative_at, {
+                    format: "ymd",
+                    utc: true,
+                }).relative();
             }
             if (row.updated_at !== "undefined") {
-                row.updated_at = relativeDate(row.updated_at);
+                row.updated_at = new SMDate(row.updated_at, {
+                    format: "ymd",
+                    utc: true,
+                }).relative();
             }
         });
 
@@ -165,15 +167,15 @@ watch(search, () => {
 });
 
 const handleClickRow = (item) => {
-    router.push({ name: "event-edit", params: { id: item.id } });
+    router.push({ name: "dashboard-event-edit", params: { id: item.id } });
 };
 
 const handleCreate = () => {
-    router.push({ name: "event-create" });
+    router.push({ name: "dashboard-event-create" });
 };
 
 const handleEdit = (item) => {
-    router.push({ name: "event-edit", params: { id: item.id } });
+    router.push({ name: "dashboard-event-edit", params: { id: item.id } });
 };
 
 const handleDelete = async (item) => {
@@ -192,7 +194,7 @@ const handleDelete = async (item) => {
 
     if (result == true) {
         try {
-            await axios.delete(`events${item.id}`);
+            await api.delete(`events${item.id}`);
             loadFromServer();
 
             formMessage.message = "Post deleted successfully";
diff --git a/resources/js/views/dashboard/MediaEdit.vue b/resources/js/views/dashboard/MediaEdit.vue
index daf98a7..43dd2e4 100644
--- a/resources/js/views/dashboard/MediaEdit.vue
+++ b/resources/js/views/dashboard/MediaEdit.vue
@@ -1,31 +1,21 @@
 <template>
-    <SMContainer :page-error="pageError" permission="admin/media">
+    <SMPage :page-error="pageError" permission="admin/media">
         <SMRow>
-            <SMDialog
-                :loading="formLoading"
-                :loading_message="formLoadingMessage">
+            <SMDialog>
                 <h1>{{ page_title }}</h1>
-                <SMMessage
-                    v-if="formMessage.message"
-                    :icon="formMessage.icon"
-                    :type="formMessage.type"
-                    :message="formMessage.message" />
-                <form @submit.prevent="handleSubmit">
+                <SMForm
+                    :model-value="form"
+                    :loading_message="formLoadingMessage"
+                    @submit="handleSubmit">
                     <SMRow>
                         <SMColumn>
-                            <SMInput
-                                v-model="formData.file.value"
-                                type="file"
-                                label="File"
-                                required
-                                :error="formData.file.error"
-                                @blur="fieldValidate(formData.file)" />
+                            <SMInput control="file" type="file" />
                         </SMColumn>
                     </SMRow>
                     <SMRow>
                         <SMColumn>
                             <SMInput
-                                v-model="formData.url.value"
+                                contorl="url"
                                 type="link"
                                 label="URL"
                                 :href="formData.url.value" />
@@ -65,144 +55,104 @@
                             <SMButton type="submit" label="Save" />
                         </SMColumn>
                     </SMRow>
-                </form>
+                </SMForm>
             </SMDialog>
         </SMRow>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from "vue";
-import SMInput from "../../components/SMInput.vue";
+import { computed, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import SMButton from "../../components/SMButton.vue";
 import SMDialog from "../../components/SMDialog.vue";
-import SMMessage from "../../components/SMMessage.vue";
-import axios from "axios";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../../helpers/validation";
-import { useRoute } from "vue-router";
-import { bytesReadable } from "../../helpers/common";
-import { useRouter } from "vue-router";
+import SMForm from "../../components/SMForm.vue";
+import SMInput from "../../components/SMInput.vue";
+
+import { api } from "../../helpers/api";
+import { Form, FormControl } from "../../helpers/form";
+import { bytesReadable } from "../../helpers/types";
+import { And, FileSize, Required } from "../../helpers/validate";
 
 const router = useRouter();
 const pageError = ref(200);
-const formLoading = ref(false);
 const formLoadingMessage = ref("");
 
 const route = useRoute();
 const page_title = route.params.id ? "Edit Media" : "Upload Media";
 
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-const formData = reactive({
-    file: {
-        value: null,
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A file is required",
-            fileSize: 5242880,
-            fileSize_message: "The file is larger than %b",
-        },
-    },
-    url: {
-        value: "",
-        error: "",
-    },
-    mime: {
-        value: "",
-        error: "",
-    },
-    size: {
-        value: "",
-        error: "",
-    },
-    permission: {
-        value: "",
-        error: "",
-    },
+const form = reactive(
+    Form({
+        file: FormControl("", And([Required(), FileSize(5242880)])),
+        permission: FormControl(),
+    })
+);
+
+const fileData = reactive({
+    url: "",
+    mime: "",
+    size: 0,
 });
 
 const handleLoad = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
-
     if (route.params.id) {
         try {
-            let res = await axios.get(`media/${route.params.id}`);
+            let res = await api.get(`media/${route.params.id}`);
 
-            console.log(res.data.media);
-
-            formData.file.value = res.data.media.name;
-            formData.permission.value = res.data.media.permission;
-            formData.url.value = res.data.media.url;
-            formData.mime.value = res.data.media.mime;
-            formData.size.value = res.data.media.size;
+            form.file.value = res.data.media.name;
+            form.permission.value = res.data.media.permission;
+            fileData.url = res.data.media.url;
+            fileData.mime = res.data.media.mime;
+            fileData.size = res.data.media.size;
         } catch (err) {
-            console.log(err);
-            restParseErrors(formData, [formMessage, "message"], err);
+            form.apiErrors(err);
         }
     }
 
-    formLoading.value = false;
+    form.loading(false);
 };
 
 const handleSubmit = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
-
     try {
-        if (isValidated(formData)) {
-            let res = null;
-            // let data = {
-            //     title: formData.title.value,
-            //     slug: formData.slug.value,
-            //     user_id: formData.user_id.value,
-            //     content: formData.content.value
-            // }
+        let res = null;
+        // let data = {
+        //     title: formData.title.value,
+        //     slug: formData.slug.value,
+        //     user_id: formData.user_id.value,
+        //     content: formData.content.value
+        // }
 
-            // if(route.params.id) {
-            //     res = await axios.put(`posts/${route.params.id}`, data);
-            // } else {
-            //     res = await axios.post(`posts`, data);
-            // }
+        // if(route.params.id) {
+        //     res = await axios.put(`posts/${route.params.id}`, data);
+        // } else {
+        //     res = await axios.post(`posts`, data);
+        // }
 
-            let submitFormData = new FormData();
-            if (formData.file.value instanceof File) {
-                submitFormData.append("file", formData.file.value);
-            }
-
-            submitFormData.append("permission", formData.permission.value);
-
-            await axios.post("media", submitFormData, {
-                headers: {
-                    "Content-Type": "multipart/form-data",
-                },
-                onUploadProgress: (progressEvent) =>
-                    (formLoadingMessage.value = `Uploading Files ${Math.floor(
-                        (progressEvent.loaded / progressEvent.total) * 100
-                    )}%`),
-            });
-
-            formMessage.type = "success";
-            formMessage.message = "Your details have been updated";
+        let submitFormData = new FormData();
+        if (form.file.value instanceof File) {
+            submitFormData.append("file", form.file.value);
         }
+
+        submitFormData.append("permission", form.permission.value);
+
+        await api.post({
+            url: "/media",
+            body: submitFormData,
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+            progress: (progressEvent) =>
+                (formLoadingMessage.value = `Uploading Files ${Math.floor(
+                    (progressEvent.loaded / progressEvent.total) * 100
+                )}%`),
+        });
+
+        form.message("Your details have been updated", "success");
     } catch (err) {
-        restParseErrors(formData, [formMessage, "message"], err);
+        form.apiErrors(err);
     }
 
-    formLoading.value = false;
+    form.loading(false);
 };
 
 const handleDelete = async () => {
@@ -221,7 +171,7 @@ const handleDelete = async () => {
 
     if (result) {
         try {
-            await axios.delete(`media/${item.id}`);
+            await api.delete(`media/${item.id}`);
             router.push({ name: "media" });
         } catch (err) {
             alert(
@@ -233,9 +183,8 @@ const handleDelete = async () => {
 };
 
 const computedFileSize = computed(() => {
-    return bytesReadable(formData.size.value);
+    return bytesReadable(fileData.size);
 });
 
-useValidation(formData);
 handleLoad();
 </script>
diff --git a/resources/js/views/dashboard/MediaList.vue b/resources/js/views/dashboard/MediaList.vue
index cae7f9c..8be7661 100644
--- a/resources/js/views/dashboard/MediaList.vue
+++ b/resources/js/views/dashboard/MediaList.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMContainer permission="admin/media">
+    <SMPage permission="admin/media">
         <h1>Media</h1>
 
         <SMMessage
@@ -29,41 +29,37 @@
             :items="items"
             :search-value="search">
             <template #loading>
-                <font-awesome-icon icon="fa-solid fa-spinner" pulse />
+                <SMLoadingIcon />
             </template>
             <template #item-size="item">
                 {{ bytesReadable(item.size) }}
             </template>
             <template #item-actions="item">
                 <div class="action-wrapper">
-                    <font-awesome-icon
-                        icon="fa-solid fa-pen-to-square"
-                        @click.stop="handleEdit(item)" />
-                    <font-awesome-icon
-                        icon="fa-regular fa-trash-can"
-                        @click.stop="handleDelete(item)" />
-                    <d-file-link :href="item.url" target="_blank" @click.stop=""
-                        ><font-awesome-icon icon="fa-solid fa-download"
-                    /></d-file-link>
+                    <SMFileLink :href="item.url" target="_blank" @click.stop=""
+                        ><font-awesome-icon icon="cloud-download-outline"
+                    /></SMFileLink>
                 </div>
             </template>
         </EasyDataTable>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import EasyDataTable from "vue3-easy-data-table";
-import axios from "axios";
-import { relativeDate, toParamString } from "../../helpers/common";
+import { reactive, ref, watch } from "vue";
 import { useRouter } from "vue-router";
-import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
+import EasyDataTable from "vue3-easy-data-table";
 import { openDialog } from "vue3-promise-dialog";
-import SMToolbar from "../../components/SMToolbar.vue";
+import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
 import SMButton from "../../components/SMButton.vue";
-import { debounce, parseErrorType, bytesReadable } from "../../helpers/common";
+import SMFileLink from "../../components/SMFileLink.vue";
+import SMLoadingIcon from "../../components/SMLoadingIcon.vue";
 import SMMessage from "../../components/SMMessage.vue";
-import DFileLink from "../../components/DFileLink.vue";
+import SMToolbar from "../../components/SMToolbar.vue";
+import { api } from "../../helpers/api";
+import { SMDate } from "../../helpers/datetime";
+import { debounce } from "../../helpers/debounce";
+import { bytesReadable } from "../../helpers/types";
 import { useUserStore } from "../../store/UserStore";
 
 const router = useRouter();
@@ -99,7 +95,7 @@ const serverOptions = ref({
 const loadFromServer = async () => {
     formLoading.value = true;
     formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
+    formMessage.icon = "alert-circle-outline";
     formMessage.message = "";
 
     try {
@@ -121,8 +117,9 @@ const loadFromServer = async () => {
             params["title"] = search.value;
         }
 
-        let res = await axios.get(`media${toParamString(params)}`, {
-            redirect: false,
+        let res = await api.get({
+            url: "/media",
+            params: params,
         });
         if (!res.data.media) {
             throw new Error("The server is currently not available");
@@ -132,7 +129,7 @@ const loadFromServer = async () => {
 
         items.value.forEach(async (row) => {
             if (Object.keys(users).includes(row.user_id) === false) {
-                await axios.get(`users/${row.user_id}`).then((res) => {
+                await api.get(`users/${row.user_id}`).then((res) => {
                     users[row.user_id] = res.data.user.username;
                 });
             }
@@ -144,16 +141,22 @@ const loadFromServer = async () => {
             }
 
             if (row.created_at !== "undefined") {
-                row.created_at = relativeDate(row.created_at);
+                row.created_at = new SMDate(row.created_at, {
+                    format: "ymd",
+                    utc: true,
+                }).relative();
             }
             if (row.updated_at !== "undefined") {
-                row.updated_at = relativeDate(row.updated_at);
+                row.updated_at = new SMDate(row.updated_at, {
+                    format: "ymd",
+                    utc: true,
+                }).relative();
             }
         });
 
         serverItemsLength.value = res.data.total;
     } catch (err) {
-        formMessage.message = parseErrorType(err);
+        // formMessage.message = parseErrorTyp(err);
     }
 
     formLoading.value = false;
@@ -175,11 +178,11 @@ watch(search, (value) => {
 });
 
 const handleClickRow = (item) => {
-    router.push({ name: "media-edit", params: { id: item.id } });
+    router.push({ name: "dashboard-media-edit", params: { id: item.id } });
 };
 
 const handleEdit = (item) => {
-    router.push({ name: "media-edit", params: { id: item.id } });
+    router.push({ name: "dashboard-media-edit", params: { id: item.id } });
 };
 
 const handleDelete = async (item) => {
@@ -198,7 +201,7 @@ const handleDelete = async (item) => {
 
     if (result) {
         try {
-            await axios.delete(`media/${item.id}`);
+            await api.delete(`media/${item.id}`);
             loadFromServer();
         } catch (err) {
             alert(
diff --git a/resources/js/views/dashboard/PostEdit.vue b/resources/js/views/dashboard/PostEdit.vue
index 1477eae..2312949 100644
--- a/resources/js/views/dashboard/PostEdit.vue
+++ b/resources/js/views/dashboard/PostEdit.vue
@@ -1,176 +1,112 @@
 <template>
-    <SMContainer :page-error="pageError" permission="admin/posts">
-        <SMRow>
-            <SMDialog :loading="formLoading">
-                <h1>{{ page_title }}</h1>
-                <SMMessage
-                    v-if="formMessage.message"
-                    :icon="formMessage.icon"
-                    :type="formMessage.type"
-                    :message="formMessage.message" />
-                <form @submit.prevent="submit">
-                    <SMRow>
-                        <SMColumn
-                            ><SMInput
-                                v-model="formData.title.value"
-                                label="Title"
-                                required
-                                :error="formData.title.error"
-                                @blur="
-                                    fieldValidate(formData.title);
-                                    updateSlug();
-                                "
-                        /></SMColumn>
-                    </SMRow>
-                    <SMRow>
-                        <SMColumn
-                            ><SMInput
-                                v-model="formData.slug.value"
-                                label="Slug"
-                                required
-                                :error="formData.slug.error"
-                                @blur="fieldValidate(formData.slug)"
-                        /></SMColumn>
-                        <SMColumn>
-                            <SMDatepicker
-                                v-model="formData.publish_at.value"
-                                label="Publish Date"
-                                :error="formData.publish_at.error"
-                                @blur="
-                                    fieldValidate(formData.publish_at)
-                                "></SMDatepicker>
-                        </SMColumn>
-                    </SMRow>
-                    <SMRow>
-                        <SMColumn>
-                            <SMInput
-                                v-model="formData.hero.value"
-                                type="media"
-                                label="Hero image"
-                                required />
-                        </SMColumn>
-                    </SMRow>
-                    <SMRow>
-                        <SMColumn>
-                            <SMSelect
-                                v-model="formData.user_id.value"
-                                label="Created By"
-                                required
-                                :options="formData.user_id.options"></SMSelect>
-                        </SMColumn>
-                    </SMRow>
-                    <SMRow>
-                        <SMColumn>
-                            <SMEditor
-                                v-model:srcContent="formData.content.value"
-                                :mime-types="[
-                                    'image/png',
-                                    'image/jpeg',
-                                    'image/gif',
-                                ]"
-                                @trix-attachment-add="attachmentAdd" />
-                        </SMColumn>
-                    </SMRow>
-                    <SMRow>
-                        <SMFormFooter>
-                            <template #right>
-                                <SMButton type="submit" label="Save" />
-                            </template>
-                        </SMFormFooter>
-                    </SMRow>
-                </form>
-            </SMDialog>
-        </SMRow>
-    </SMContainer>
+    <SMPage
+        class="sm-page-post-edit"
+        :page-error="pageError"
+        permission="admin/posts">
+        <template #container>
+            <h1>{{ page_title }}</h1>
+            <SMForm :model-value="form" @submit="handleSubmit">
+                <SMRow>
+                    <SMColumn
+                        ><SMInput control="title" @blur="updateSlug()"
+                    /></SMColumn>
+                </SMRow>
+                <SMRow>
+                    <SMColumn><SMInput control="slug" /></SMColumn>
+                    <SMColumn>
+                        <SMInput
+                            type="datetime"
+                            control="publish_at"
+                            label="Publish Date" />
+                    </SMColumn>
+                </SMRow>
+                <SMRow>
+                    <SMColumn>
+                        <SMInput
+                            control="hero"
+                            type="media"
+                            label="Hero image"
+                            required />
+                    </SMColumn>
+                </SMRow>
+                <SMRow>
+                    <SMColumn>
+                        <SMInput
+                            control="user_id"
+                            label="Created By"
+                            type="select"
+                            :options="authors" />
+                    </SMColumn>
+                </SMRow>
+                <SMRow>
+                    <SMColumn>
+                        <SMEditor
+                            v-model:model-value="form.controls.content.value" />
+                    </SMColumn>
+                </SMRow>
+                <SMRow>
+                    <SMColumn>
+                        <SMInputAttachments :model-value="attachments" />
+                    </SMColumn>
+                </SMRow>
+                <SMRow>
+                    <SMFormFooter>
+                        <template #right>
+                            <SMButton type="submit" label="Save" />
+                        </template>
+                    </SMFormFooter>
+                </SMRow>
+            </SMForm>
+        </template>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import SMInput from "../../components/SMInput.vue";
-import SMButton from "../../components/SMButton.vue";
-import SMDialog from "../../components/SMDialog.vue";
-import SMSelect from "../../components/SMSelect.vue";
-import SMDatepicker from "../../components/SMDatePicker.vue";
-import SMEditor from "../../components/SMEditor.vue";
-import SMMessage from "../../components/SMMessage.vue";
-import axios from "axios";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../../helpers/validation";
+import { reactive, ref } from "vue";
 import { useRoute } from "vue-router";
-import { useUserStore } from "../../store/UserStore";
+import SMButton from "../../components/SMButton.vue";
+import SMEditor from "../../components/SMEditor.vue";
+import SMForm from "../../components/SMForm.vue";
 import SMFormFooter from "../../components/SMFormFooter.vue";
-import { timestampLocalToUtc, timestampUtcToLocal } from "../../helpers/common";
+import SMInput from "../../components/SMInput.vue";
+import SMInputAttachments from "../../components/SMInputAttachments.vue";
+
+import { api } from "../../helpers/api";
+import { PostResponse, UserCollection } from "../../helpers/api.types";
+import { SMDate } from "../../helpers/datetime";
+import { Form, FormControl } from "../../helpers/form";
+import { And, DateTime, Min, Required } from "../../helpers/validate";
+import { useUserStore } from "../../store/UserStore";
 
 const route = useRoute();
-const formLoading = ref(false);
 const userStore = useUserStore();
 const page_title = route.params.id ? "Edit Post" : "Create New Post";
 const pageError = ref(200);
+const authors = ref({});
+const attachments = ref(["4687166e-7f9e-4394-abdf-2d254c8bb087"]);
 
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-const formData = reactive({
-    title: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A post title is required",
-            min: 8,
-            min_message: "Your post title should be at least 8 letters long",
-        },
-    },
-    slug: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A slug is required",
-            min: 6,
-            min_message: "The slug least 6 letters long",
-        },
-    },
-    publish_at: {
-        value: null,
-        error: "",
-        rules: {
-            datetime: true,
-        },
-    },
-    hero: {
-        value: "",
-        error: "",
-    },
-    user_id: {
-        options: {},
-        value: userStore.id,
-        error: "",
-    },
-    content: {
-        value: "",
-        error: "",
-    },
-});
-
-useValidation(formData);
+const form = reactive(
+    Form({
+        title: FormControl("", And([Required(), Min(8)])),
+        slug: FormControl("", And([Required(), Min(6)])),
+        publish_at: FormControl("", DateTime()),
+        hero: FormControl(),
+        user_id: FormControl(userStore.id),
+        content: FormControl(),
+    })
+);
 
 const updateSlug = async () => {
-    if (formData.slug.value == "" && formData.title.value != "") {
+    if (form.controls.slug.value == "" && form.controls.title.value != "") {
         let idx = 0;
-        let pre_slug = formData.title.value
+        let pre_slug = form.controls.title.value
             .toLowerCase()
             .replace(/[^a-z0-9]/gim, "-")
             .replace(/-+/g, "-")
             .replace(/^-*(.+?)-*$/, "$1");
 
-        while (1) {
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
             let slug = pre_slug;
 
             try {
@@ -178,12 +114,17 @@ const updateSlug = async () => {
                     slug += "-" + idx;
                 }
 
-                await axios.get(`posts?slug=${slug}`);
+                await api.get({
+                    url: "/posts",
+                    params: {
+                        slug: slug,
+                    },
+                });
                 idx++;
             } catch (error) {
-                if (error.response.status == 404) {
-                    if (formData.slug.value == "") {
-                        formData.slug.value = slug;
+                if (error.status == 404) {
+                    if (form.controls.slug.value == "") {
+                        form.controls.slug.value = slug;
                     }
                 }
 
@@ -194,62 +135,64 @@ const updateSlug = async () => {
 };
 
 const loadData = async () => {
-    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
+    form.loading(true);
 
     if (route.params.id) {
-        try {
-            let res = await axios.get("posts/" + route.params.id);
-            if (!res.data.post) {
-                throw new Error("The server is currently not available");
-            }
+        api.get("/posts/" + route.params.id)
+            .then((result) => {
+                const data = result.data as PostResponse;
 
-            formData.title.value = res.data.post.title;
-            formData.slug.value = res.data.post.slug;
-            formData.user_id.value = res.data.post.user_id;
-            formData.content.value = res.data.post.content;
-            formData.publish_at.value = res.data.post.publish_at
-                ? timestampUtcToLocal(res.data.post.publish_at)
-                : "";
-            formData.content.value = res.data.post.content;
-            formData.hero.value = res.data.post.hero;
-        } catch (err) {
-            pageError.value = err.response.status;
-        }
+                form.controls.title.value = data.post.title;
+                form.controls.slug.value = data.post.slug;
+                form.controls.user_id.value = data.post.user_id;
+                form.controls.content.value = data.post.content;
+                form.controls.publish_at.value = data.post.publish_at
+                    ? new SMDate(data.post.publish_at, {
+                          format: "yMd",
+                          utc: true,
+                      }).format("dd/MM/yyyy HH:mm")
+                    : "";
+                form.controls.content.value = data.post.content;
+                form.controls.hero.value = data.post.hero;
+            })
+            .catch((error) => {
+                pageError.value =
+                    error.data.message || "An unknown error occurred";
+            });
     }
 
-    formLoading.value = false;
+    form.loading(false);
 };
 
-const submit = async () => {
+const handleSubmit = async () => {
     try {
-        if (isValidated(formData)) {
-            let data = {
-                title: formData.title.value,
-                slug: formData.slug.value,
-                publish_at: timestampLocalToUtc(formData.publish_at.value),
-                user_id: formData.user_id.value,
-                content: formData.content.value,
-                hero: formData.hero.value,
-            };
+        let data = {
+            title: form.controls.title.value,
+            slug: form.controls.slug.value,
+            publish_at: new SMDate(form.controls.publish_at.value).format(
+                "yyyy/MM/dd HH:mm:ss",
+                { utc: true }
+            ),
+            user_id: form.controls.user_id.value,
+            content: form.controls.content.value,
+            hero: form.controls.hero.value,
+        };
 
-            if (route.params.id) {
-                await axios.put(`posts/${route.params.id}`, data);
-            } else {
-                await axios.post(`posts`, data);
-            }
-
-            formMessage.type = "success";
-            formMessage.message = "Your details have been updated";
+        if (route.params.id) {
+            await api.put({
+                url: `/posts/${route.params.id}`,
+                body: data,
+            });
+        } else {
+            await api.post({
+                url: "/posts",
+                body: data,
+            });
         }
+
+        form.message("Your details have been updated", "success");
     } catch (err) {
-        console.log(err);
-        formMessage.icon = "";
-        formMessage.type = "error";
-        formMessage.message = "";
-        restParseErrors(formData, [formMessage, "message"], err);
+        form.apiError(err);
     }
 
     window.scrollTo({
@@ -276,11 +219,13 @@ const attachmentAdd = async (event) => {
         fileFormData.append("file", event.attachment.file);
 
         try {
-            let res = await axios.post("media", fileFormData, {
+            let res = await api.post({
+                url: "/media",
+                body: fileFormData,
                 headers: {
                     "Content-Type": "multipart/form-data",
                 },
-                onUploadProgress: (progressEvent) =>
+                progress: (progressEvent) =>
                     event.attachment.setUploadProgress(
                         (progressEvent.loaded * progressEvent.total) / 100
                     ),
@@ -301,29 +246,35 @@ const attachmentAdd = async (event) => {
 };
 
 const loadOptionsAuthors = async () => {
-    try {
-        let res = await axios.get(
-            "users?fields=id,username,first_name,last_name&limit=100",
-            { redirect: false }
-        );
+    api.get({
+        url: "/users",
+        params: {
+            fields: "id,username,first_name,last_name",
+            limit: 100,
+        },
+    })
+        .then((result) => {
+            const data = result.data as UserCollection;
 
-        if (!res.data.users) {
-            throw new Error("The server is currently not available");
-        }
+            if (data && data.users) {
+                authors.value = {};
 
-        formData.user_id.options = {};
-
-        res.data.users.forEach((item) => {
-            formData.user_id.options[item.id] = `${item.username}`;
+                data.users.forEach((item) => {
+                    authors.value[item.id] = `${item.username}`;
+                });
+            }
+        })
+        .catch((error) => {
+            form.apiError(error);
         });
-    } catch (err) {
-        formMessage.icon = "";
-        formMessage.type = "error";
-        formMessage.message = "";
-        restParseErrors(formData, [formMessage, "message"], err);
-    }
 };
 
 loadOptionsAuthors();
 loadData();
 </script>
+
+<style lang="scss">
+.sm-page-post-edit {
+    background-color: #f8f8f8;
+}
+</style>
diff --git a/resources/js/views/dashboard/PostList.vue b/resources/js/views/dashboard/PostList.vue
index 2113723..e5edd29 100644
--- a/resources/js/views/dashboard/PostList.vue
+++ b/resources/js/views/dashboard/PostList.vue
@@ -1,67 +1,78 @@
 <template>
-    <SMContainer permission="admin/posts">
-        <SMHeading heading="Posts" />
-        <SMMessage
-            v-if="formMessage.message"
-            :icon="formMessage.icon"
-            :type="formMessage.type"
-            :message="formMessage.message" />
-        <SMToolbar>
-            <template #left>
-                <SMButton
-                    type="primary"
-                    label="Create Post"
-                    @click="handleCreate" />
-            </template>
-            <template #right>
-                <input v-model="search" placeholder="Search" />
-            </template>
-        </SMToolbar>
+    <SMPage permission="admin/posts" class="sm-page-post-list">
+        <template #container>
+            <SMHeading heading="Posts" />
+            <SMMessage
+                v-if="formMessage.message"
+                :icon="formMessage.icon"
+                :type="formMessage.type"
+                :message="formMessage.message" />
+            <SMToolbar>
+                <template #left>
+                    <SMButton
+                        type="primary"
+                        label="Create Post"
+                        :small="true"
+                        @click="handleCreate" />
+                </template>
+                <template #right>
+                    <SMInput
+                        v-model="search"
+                        label="Search"
+                        :small="true"
+                        style="max-width: 250px" />
+                </template>
+            </SMToolbar>
 
-        <EasyDataTable
-            v-model:server-options="serverOptions"
-            :server-items-length="serverItemsLength"
-            :loading="formLoading"
-            :headers="headers"
-            :items="items"
-            :search-value="search">
-            <template #loading>
-                <font-awesome-icon icon="fa-solid fa-spinner" pulse />
-            </template>
-            <template #item-title="item">
-                <router-link
-                    :to="{ name: 'post-edit', params: { id: item.id } }"
-                    >{{ item.title }}</router-link
-                >
-            </template>
-            <template #item-actions="item">
-                <div class="action-wrapper">
-                    <font-awesome-icon
-                        icon="fa-solid fa-pen-to-square"
-                        @click="handleEdit(item)" />
-                    <font-awesome-icon
-                        icon="fa-regular fa-trash-can"
-                        @click="handleDelete(item)" />
-                </div>
-            </template>
-        </EasyDataTable>
-    </SMContainer>
+            <EasyDataTable
+                v-model:server-options="serverOptions"
+                :server-items-length="serverItemsLength"
+                :loading="formLoading"
+                :headers="headers"
+                :items="items"
+                :search-value="search">
+                <template #loading>
+                    <SMLoadingIcon />
+                </template>
+                <template #item-title="item">
+                    <router-link
+                        :to="{
+                            name: 'dashboard-post-edit',
+                            params: { id: item.id },
+                        }"
+                        >{{ item.title }}</router-link
+                    >
+                </template>
+                <template #item-actions="item">
+                    <div class="action-wrapper">
+                        <SMButton
+                            label="Edit"
+                            :dropdown="{
+                                delete: 'Delete',
+                            }"
+                            @click="handleClick(item, $event)"></SMButton>
+                    </div>
+                </template>
+            </EasyDataTable>
+        </template>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, reactive } from "vue";
-import EasyDataTable from "vue3-easy-data-table";
-import axios from "axios";
-import { relativeDate, toParamString } from "../../helpers/common";
+import { reactive, ref, watch } from "vue";
 import { useRouter } from "vue-router";
-import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
+import EasyDataTable from "vue3-easy-data-table";
 import { openDialog } from "vue3-promise-dialog";
-
-import SMToolbar from "../../components/SMToolbar.vue";
+import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
 import SMButton from "../../components/SMButton.vue";
-import { debounce } from "../../helpers/common";
 import SMHeading from "../../components/SMHeading.vue";
+import SMInput from "../../components/SMInput.vue";
+import SMLoadingIcon from "../../components/SMLoadingIcon.vue";
 import SMMessage from "../../components/SMMessage.vue";
+import SMToolbar from "../../components/SMToolbar.vue";
+import { api } from "../../helpers/api";
+import { SMDate } from "../../helpers/datetime";
+import { debounce } from "../../helpers/debounce";
 
 const router = useRouter();
 const search = ref("");
@@ -90,6 +101,14 @@ const serverOptions = ref({
     sortType: null,
 });
 
+const handleClick = (item, extra: string): void => {
+    if (extra.length == 0) {
+        handleEdit(item);
+    } else if (extra.toLowerCase() == "delete") {
+        handleDelete(item);
+    }
+};
+
 const loadFromServer = async () => {
     formLoading.value = true;
 
@@ -112,8 +131,9 @@ const loadFromServer = async () => {
             params["title"] = search.value;
         }
 
-        let res = await axios.get(`posts${toParamString(params)}`, {
-            redirect: false,
+        let res = await api.get({
+            url: "/posts",
+            params: params,
         });
         if (!res.data.posts) {
             throw new Error("The server is currently not available");
@@ -123,19 +143,22 @@ const loadFromServer = async () => {
 
         items.value.forEach((row) => {
             if (row.created_at !== "undefined") {
-                row.created_at = relativeDate(
-                    timestampUtcToLocal(row.created_at)
-                );
+                row.created_at = new SMDate(row.created_at, {
+                    format: "yMd",
+                    utc: true,
+                }).relative();
             }
             if (row.updated_at !== "undefined") {
-                row.updated_at = relativeDate(
-                    timestampUtcToLocal(row.updated_at)
-                );
+                row.updated_at = new SMDate(row.updated_at, {
+                    format: "yMd",
+                    utc: true,
+                }).relative();
             }
             if (row.publish_at !== "undefined") {
-                row.publish_at = relativeDate(
-                    timestampUtcToLocal(row.publish_at)
-                );
+                row.publish_at = new SMDate(row.publish_at, {
+                    format: "yMd",
+                    utc: true,
+                }).relative();
             }
         });
 
@@ -167,15 +190,15 @@ watch(search, () => {
 });
 
 const handleClickRow = (item) => {
-    router.push({ name: "post-edit", params: { id: item.id } });
+    router.push({ name: "dashboard-post-edit", params: { id: item.id } });
 };
 
 const handleCreate = () => {
-    router.push({ name: "post-create" });
+    router.push({ name: "dashboard-post-create" });
 };
 
 const handleEdit = (item) => {
-    router.push({ name: "post-edit", params: { id: item.id } });
+    router.push({ name: "dashboard-post-edit", params: { id: item.id } });
 };
 
 const handleDelete = async (item) => {
@@ -194,7 +217,7 @@ const handleDelete = async (item) => {
 
     if (result == true) {
         try {
-            await axios.delete(`posts${item.id}`);
+            await api.delete(`posts${item.id}`);
             loadFromServer();
 
             formMessage.message = "Post deleted successfully";
@@ -206,4 +229,8 @@ const handleDelete = async (item) => {
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.sm-page-post-list {
+    background-color: #f8f8f8;
+}
+</style>
diff --git a/resources/js/views/dashboard/UserEdit.vue b/resources/js/views/dashboard/UserEdit.vue
index 52c56f8..e303d77 100644
--- a/resources/js/views/dashboard/UserEdit.vue
+++ b/resources/js/views/dashboard/UserEdit.vue
@@ -1,191 +1,106 @@
 <template>
-    <SMContainer>
-        <SMRow>
-            <SMDialog :loading="formLoading">
-                <SMHeading :heading="pageHeading" />
-                <SMMessage
-                    v-if="formMessage.message"
-                    :icon="formMessage.icon"
-                    :type="formMessage.type"
-                    :message="formMessage.message" />
-                <form @submit.prevent="submit">
-                    <SMRow>
-                        <SMColumn
-                            ><SMInput
-                                v-model="formData.first_name.value"
-                                label="First Name"
-                                required
-                                :error="formData.first_name.error"
-                                @blur="fieldValidate(formData.first_name)"
-                        /></SMColumn>
-                        <SMColumn
-                            ><SMInput
-                                v-model="formData.last_name.value"
-                                label="Last Name"
-                                required
-                                :error="formData.last_name.error"
-                                @blur="fieldValidate(formData.last_name)"
-                        /></SMColumn>
-                    </SMRow>
-                    <SMRow>
-                        <SMColumn
-                            ><SMInput
-                                v-model="formData.email.value"
-                                label="Email"
-                                required
-                                :error="formData.email.error"
-                                @blur="fieldValidate(formData.email)"
-                        /></SMColumn>
-                        <SMColumn
-                            ><SMInput
-                                v-model="formData.phone.value"
-                                label="Phone"
-                                :error="formData.phone.error"
-                                @blur="fieldValidate(formData.phone)"
-                        /></SMColumn>
-                    </SMRow>
-                    <SMRow>
+    <SMPage class="sm-page-user-edit">
+        <template #container>
+            <SMHeading :heading="pageHeading" />
+            <SMForm :model-value="form" @submit="handleSubmit">
+                <SMRow>
+                    <SMColumn><SMInput control="first_name" /></SMColumn>
+                    <SMColumn><SMInput control="last_name" /></SMColumn>
+                </SMRow>
+                <SMRow>
+                    <SMColumn><SMInput control="email" /></SMColumn>
+                    <SMColumn><SMInput control="phone" /></SMColumn>
+                </SMRow>
+                <SMRow>
+                    <SMColumn>
                         <SMFormFooter>
                             <template #right>
                                 <SMButton
                                     type="secondary"
                                     label="Change Password"
-                                    @click.prevent="handleChangePassword" />
+                                    @click="handleChangePassword" />
                                 <SMButton type="submit" label="Update" />
                             </template>
                         </SMFormFooter>
-                    </SMRow>
-                </form>
-            </SMDialog>
-        </SMRow>
-    </SMContainer>
+                    </SMColumn>
+                </SMRow>
+            </SMForm>
+        </template>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from "vue";
-import SMInput from "../../components/SMInput.vue";
-import SMButton from "../../components/SMButton.vue";
-import SMDialog from "../../components/SMDialog.vue";
-import SMMessage from "../../components/SMMessage.vue";
-import SMHeading from "../../components/SMHeading.vue";
-import SMFormFooter from "../../components/SMFormFooter.vue";
-import axios from "axios";
-import {
-    useValidation,
-    isValidated,
-    fieldValidate,
-    restParseErrors,
-} from "../../helpers/validation";
-import { useUserStore } from "../../store/UserStore";
+import { computed, reactive } from "vue";
 import { useRoute } from "vue-router";
 import { openDialog } from "vue3-promise-dialog";
 import SMDialogChangePassword from "../../components/dialogs/SMDialogChangePassword.vue";
+import SMButton from "../../components/SMButton.vue";
+import SMForm from "../../components/SMForm.vue";
+import SMFormFooter from "../../components/SMFormFooter.vue";
+import SMHeading from "../../components/SMHeading.vue";
+import SMInput from "../../components/SMInput.vue";
+
+import { api } from "../../helpers/api";
+import { Form, FormControl } from "../../helpers/form";
+import { And, Email, Phone, Required } from "../../helpers/validate";
+import { useUserStore } from "../../store/UserStore";
 
-let formLoading = ref(false);
 const route = useRoute();
 const userStore = useUserStore();
 
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-const formData = reactive({
-    first_name: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A first name is needed",
-            min: 2,
-            min_message: "Your first name should be at least 2 letters long",
-        },
-    },
-    last_name: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A last name is needed",
-            min: 2,
-            min_message: "Your last name should be at least 2 letters long",
-        },
-    },
-    email: {
-        value: "",
-        error: "",
-        rules: {
-            required: true,
-            required_message: "A email address is needed",
-            email: true,
-            email_message: "Your email address is not correct",
-        },
-    },
-    phone: {
-        value: "",
-        error: "",
-        rules: {
-            phone: true,
-            phone_message: "Your phone number does not look correct",
-        },
-    },
-});
-
-useValidation(formData);
+const form = reactive(
+    Form({
+        first_name: FormControl("", And([Required()])),
+        last_name: FormControl("", And([Required()])),
+        email: FormControl("", And([Required(), Email()])),
+        phone: FormControl("", Phone()),
+    })
+);
 
 const loadData = async () => {
     if (route.params.id) {
         try {
-            formLoading.value = true;
-            let res = await axios.get(`users/${route.params.id}`);
+            form.loading(true);
+            let res = await api.get(`users/${route.params.id}`);
 
-            formData.first_name.value = res.data.user.first_name;
-            formData.last_name.value = res.data.user.last_name;
-            formData.phone.value = res.data.user.phone;
-            formData.email.value = res.data.user.email;
-            console.log(res);
+            form.first_name.value = res.data.user.first_name;
+            form.last_name.value = res.data.user.last_name;
+            form.phone.value = res.data.user.phone;
+            form.email.value = res.data.user.email;
         } catch (err) {
-            formMessage.icon = "";
-            formMessage.type = "error";
-            formMessage.message = "";
-            restParseErrors(formData, [formMessage, "message"], err);
+            form.apiErrors(err);
         }
     } else {
-        formData.first_name.value = userStore.firstName;
-        formData.last_name.value = userStore.lastName;
-        formData.phone.value = userStore.phone;
-        formData.email.value = userStore.email;
+        form.first_name.value = userStore.firstName;
+        form.last_name.value = userStore.lastName;
+        form.phone.value = userStore.phone;
+        form.email.value = userStore.email;
     }
 
-    formLoading.value = false;
+    form.loading(false);
 };
 
-const submit = async () => {
-    formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
-    formMessage.message = "";
-
+const handleSubmit = async () => {
     try {
-        if (isValidated(formData)) {
-            formLoading.value = true;
-            let res = await axios.put(`users/${userStore.id}`, {
-                first_name: formData.first_name.value,
-                last_name: formData.last_name.value,
-                email: formData.email.value,
-                phone: formData.phone.value,
-            });
+        form.loading(true);
+        let res = await api.put({
+            url: `users/${userStore.id}`,
+            body: {
+                first_name: form.first_name.value,
+                last_name: form.last_name.value,
+                email: form.email.value,
+                phone: form.phone.value,
+            },
+        });
 
-            userStore.setUserDetails(res.data.user);
+        userStore.setUserDetails(res.data.user);
 
-            formMessage.type = "success";
-            formMessage.icon = "";
-            formMessage.message = "Your details have been updated";
-        }
+        form.message("Your details have been updated", "success");
     } catch (err) {
-        restParseErrors(formData, [formMessage, "message"], err);
+        form.apiErrors(err);
     }
 
-    formLoading.value = false;
+    form.loading(false);
 };
 
 const handleChangePassword = () => {
@@ -200,3 +115,9 @@ const pageHeading = computed(() => {
 
 loadData();
 </script>
+
+<style lang="scss">
+.sm-page-user-edit {
+    background-color: #f8f8f8;
+}
+</style>
diff --git a/resources/js/views/dashboard/UserList.vue b/resources/js/views/dashboard/UserList.vue
index 615fef7..6eaa779 100644
--- a/resources/js/views/dashboard/UserList.vue
+++ b/resources/js/views/dashboard/UserList.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMContainer permission="admin/users">
+    <SMPage permission="admin/users">
         <SMHeading heading="Users" />
         <SMMessage
             v-if="formMessage.message"
@@ -16,32 +16,26 @@
             :header-item-class-name="headerItemClassNameFunction"
             :body-item-class-name="bodyItemClassNameFunction">
             <template #loading>
-                <font-awesome-icon icon="fa-solid fa-spinner" pulse />
+                <SMLoadingIcon />
             </template>
             <template #item-actions="item">
-                <div class="action-wrapper">
-                    <font-awesome-icon
-                        icon="fa-solid fa-pen-to-square"
-                        @click="handleEdit(item)" />
-                    <font-awesome-icon
-                        icon="fa-regular fa-trash-can"
-                        @click="handleDelete(item)" />
-                </div>
+                <div class="action-wrapper"></div>
             </template>
         </EasyDataTable>
-    </SMContainer>
+    </SMPage>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import EasyDataTable from "vue3-easy-data-table";
-import axios from "axios";
-import { relativeDate, toParamString } from "../../helpers/common";
+import { reactive, ref, watch } from "vue";
 import { useRouter } from "vue-router";
-import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
+import EasyDataTable from "vue3-easy-data-table";
 import { openDialog } from "vue3-promise-dialog";
+import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
 import SMHeading from "../../components/SMHeading.vue";
+import SMLoadingIcon from "../../components/SMLoadingIcon.vue";
 import SMMessage from "../../components/SMMessage.vue";
+import { api } from "../../helpers/api";
+import { SMDate } from "../../helpers/datetime";
 
 const router = useRouter();
 const searchValue = ref("");
@@ -76,7 +70,7 @@ const serverOptions = ref({
 const loadFromServer = async () => {
     formLoading.value = true;
     formMessage.type = "error";
-    formMessage.icon = "fa-solid fa-circle-exclamation";
+    formMessage.icon = "alert-circle-outline";
     formMessage.message = "";
 
     try {
@@ -94,12 +88,18 @@ const loadFromServer = async () => {
         params["page"] = serverOptions.value.page;
         params["limit"] = serverOptions.value.rowsPerPage;
 
-        let res = await axios.get(`users${toParamString(params)}`);
+        let res = await api.get({
+            url: "/users",
+            params: params,
+        });
         items.value = res.data.users;
 
         items.value.forEach((row) => {
             if (row.created_at !== "undefined") {
-                row.created_at = relativeDate(row.created_at);
+                row.created_at = new SMDate(row.created_at, {
+                    format: "yMd",
+                    utc: true,
+                }).relative();
             }
         });
 
@@ -134,7 +134,7 @@ const bodyItemClassNameFunction = (column) => {
 };
 
 const handleEdit = (user) => {
-    router.push({ name: "user-edit", params: { id: user.id } });
+    router.push({ name: "dashboard-user-edit", params: { id: user.id } });
 };
 
 const handleDelete = async (user) => {
@@ -153,7 +153,7 @@ const handleDelete = async (user) => {
 
     if (result == true) {
         try {
-            await axios.delete(`users${user.id}`);
+            await api.delete(`users${user.id}`);
             loadFromServer();
 
             formMessage.message = "User deleted successfully";
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 90bdc30..9ea4bda 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -8,5 +8,7 @@
 <body>
 	<div id="app"></div>
 	@vite('resources/js/main.js')
+	<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+	<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 </body>
 </html>
diff --git a/resources/views/emails/user/forgot_username.blade.php b/resources/views/emails/user/forgot_username.blade.php
index 9a4534d..5506651 100644
--- a/resources/views/emails/user/forgot_username.blade.php
+++ b/resources/views/emails/user/forgot_username.blade.php
@@ -68,7 +68,7 @@
                 </td>
             </tr>
             <tr>
-                <td>
+                <td style="padding-bottom: 2rem;">
                     @if (count($usernames) == 1)
                     Guess what, your username is <strong>{{ $usernames[0] }}</strong>.
                     @else
@@ -76,8 +76,8 @@
                 </td>
             </tr>
             <tr>
-                <td>
-                    <ul style="padding-top: 2rem; padding-bottom: 2rem;">
+                <td style="padding-bottom: 2rem;">
+                    <ul>
                         @foreach($usernames as $username)
                         <li>{{ $username }}</li>
                         @endforeach
diff --git a/routes/api.php b/routes/api.php
index 75be01a..528c656 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -22,7 +22,7 @@ use App\Http\Controllers\Api\UserController;
 |
 */
 
-Route::post('/login', [AuthController::class, 'login']);
+Route::post('/login', [AuthController::class, 'login'])->name('login');
 Route::post('/register', [UserController::class, 'register']);
 
 Route::apiResource('users', UserController::class);
@@ -36,8 +36,14 @@ Route::apiResource('media', MediaController::class);
 Route::get('media/{medium}/download', [MediaController::class, 'download']);
 
 Route::apiResource('posts', PostController::class);
+Route::get('posts/{post}/attachments', [PostController::class, 'getAttachments']);
+Route::post('posts/{post}/attachments', [PostController::class, 'storeAttachment']);
+Route::delete('posts/{post}/attachments/{attachment}', [PostController::class, 'deleteAttachment']);
 
 Route::apiResource('events', EventController::class);
+Route::get('events/{event}/attachments', [PostController::class, 'getAttachments']);
+Route::post('events/{event}/attachments', [PostController::class, 'storeAttachment']);
+Route::delete('events/{event}/attachments/{attachment}', [PostController::class, 'deleteAttachment']);
 
 Route::apiResource('subscriptions', SubscriptionController::class);
 Route::delete('subscriptions', [SubscriptionController::class, 'destroyByEmail']);
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..b48fd4e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "esnext",
+        // "strict": true,
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "include": ["resources/**/*"],
+    "exclude": ["node_modules", "dist"]
+}
diff --git a/vite.config.js b/vite.config.js
index 482afdc..8422be7 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,13 +1,15 @@
-import { defineConfig } from "vite";
-import laravel from "laravel-vite-plugin";
 import vue from "@vitejs/plugin-vue";
+import laravel from "laravel-vite-plugin";
+import analyzer from "rollup-plugin-analyzer";
+import { defineConfig } from "vite";
 
 export default defineConfig({
     plugins: [
         vue({
             template: {
                 compilerOptions: {
-                    isCustomElement: (tag) => ["trix-editor"].includes(tag),
+                    isCustomElement: (tag) =>
+                        ["trix-editor", "ion-icon"].includes(tag),
                 },
                 transformAssetUrls: {
                     base: null,
@@ -19,6 +21,7 @@ export default defineConfig({
             input: ["resources/css/app.scss", "resources/js/main.js"],
             refresh: true,
         }),
+        analyzer({ summaryOnly: true }),
     ],
     css: {
         preprocessorOptions: {