diff --git a/_ide_helper_models.php b/_ide_helper_models.php
index ff87fca..86555aa 100644
--- a/_ide_helper_models.php
+++ b/_ide_helper_models.php
@@ -10,6 +10,75 @@
  */
 
 
+namespace App\Models{
+/**
+ * App\Models\Division
+ *
+ * @property int $id
+ * @property string|null $name
+ * @property string|null $full_name
+ * @property string|null $color
+ * @property string|null $tagline
+ * @property string|null $motto
+ * @property string|null $description
+ * @property string|null $full_description
+ * @property string|null $content
+ * @property string|null $photo
+ * @property string|null $logo
+ * @property \Illuminate\Support\Carbon|null $created_at
+ * @property \Illuminate\Support\Carbon|null $updated_at
+ * @property \Illuminate\Support\Carbon|null $deleted_at
+ * @property-read \Illuminate\Database\Eloquent\Collection<int, \App\Models\Position> $positions
+ * @property-read int|null $positions_count
+ * @method static \Illuminate\Database\Eloquent\Builder|Division newModelQuery()
+ * @method static \Illuminate\Database\Eloquent\Builder|Division newQuery()
+ * @method static \Illuminate\Database\Eloquent\Builder|Division onlyTrashed()
+ * @method static \Illuminate\Database\Eloquent\Builder|Division query()
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereColor($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereContent($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereCreatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereDeletedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereDescription($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereFullDescription($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereFullName($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereLogo($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereMotto($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereName($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division wherePhoto($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereTagline($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division whereUpdatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Division withTrashed()
+ * @method static \Illuminate\Database\Eloquent\Builder|Division withoutTrashed()
+ */
+	class Division extends \Eloquent {}
+}
+
+namespace App\Models{
+/**
+ * App\Models\Position
+ *
+ * @property int $id
+ * @property string|null $name
+ * @property int|null $division_id
+ * @property \Illuminate\Support\Carbon|null $created_at
+ * @property \Illuminate\Support\Carbon|null $updated_at
+ * @property-read \App\Models\Division|null $division
+ * @method static \Illuminate\Database\Eloquent\Builder|Position newModelQuery()
+ * @method static \Illuminate\Database\Eloquent\Builder|Position newQuery()
+ * @method static \Illuminate\Database\Eloquent\Builder|Position onlyTrashed()
+ * @method static \Illuminate\Database\Eloquent\Builder|Position query()
+ * @method static \Illuminate\Database\Eloquent\Builder|Position whereCreatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Position whereDivisionId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Position whereId($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Position whereName($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Position whereUpdatedAt($value)
+ * @method static \Illuminate\Database\Eloquent\Builder|Position withTrashed()
+ * @method static \Illuminate\Database\Eloquent\Builder|Position withoutTrashed()
+ */
+	class Position extends \Eloquent {}
+}
+
 namespace App\Models{
 /**
  * App\Models\User
diff --git a/app/Http/Controllers/DivisionController.php b/app/Http/Controllers/DivisionController.php
new file mode 100644
index 0000000..1523ff7
--- /dev/null
+++ b/app/Http/Controllers/DivisionController.php
@@ -0,0 +1,154 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Division;
+use App\Models\Position;
+use Auth;
+use Illuminate\Http\Request;
+
+class DivisionController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        $data['divisions'] = Division::latest()->get();
+
+        return view('divisions.index', $data);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        return view('divisions.create');
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        $data = $request->except(['token', 'method', 'logo', 'photo', 'position_name']);
+
+        // Image Logo
+            $destination_logo = 'attachment/division/logo';
+            $file = $request->file('logo');
+
+            if($file){
+                $name = time()."_".uniqid().".".$file->getClientOriginalExtension();
+                $move = $file->move($destination_logo, $name);
+                if($move){
+                    $data['logo'] = $destination_logo.'/'.$name;
+                }
+            }
+        // Image Logo
+
+        // Image Photo
+            $destination_photo = 'attachment/division/photo';
+            $file = $request->file('photo');
+
+            if($file){
+                $name = time()."_".uniqid().".".$file->getClientOriginalExtension();
+                $move = $file->move($destination_photo, $name);
+                if($move){
+                    $data['photo'] = $destination_photo.'/'.$name;
+                }
+            }
+        // Image Photo
+
+        $division = Division::create($data);
+
+        foreach ($request->get("position_name") as $key_position_name => $position_name) {
+             Position::create(
+                [
+                    "name" => $position_name,
+                    "division_id" => $division->id,
+                ]
+            );
+        }
+
+        return redirect('divisi-jabatan')->with('success', 'Divisi dan Jabatan berhasil disimpan!' );
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show($id)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit($id)
+    {
+        $data['division'] = Division::find($id);
+
+        return view('divisions.edit', $data);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, $id)
+    {
+        $data = $request->except(['token', 'method', 'logo', 'photo', 'position_name']);
+
+        // Image Logo
+            $destination_logo = 'attachment/division/logo';
+            $file = $request->file('logo');
+
+            if($file){
+                $name = time()."_".uniqid().".".$file->getClientOriginalExtension();
+                $move = $file->move($destination_logo, $name);
+                if($move){
+                    $data['logo'] = $destination_logo.'/'.$name;
+                }
+            }
+        // Image Logo
+
+        // Image Photo
+            $destination_photo = 'attachment/division/photo';
+            $file = $request->file('photo');
+
+            if($file){
+                $name = time()."_".uniqid().".".$file->getClientOriginalExtension();
+                $move = $file->move($destination_photo, $name);
+                if($move){
+                    $data['photo'] = $destination_photo.'/'.$name;
+                }
+            }
+        // Image Photo
+
+        $division = Division::find($id)->update($data);
+
+        $positions = Position::where("division_id", $id)->delete();
+
+        foreach ($request->get("position_name") as $key_position_name => $position_name) {
+            Position::create(
+               [
+                   "name" => $position_name,
+                   "division_id" => $id,
+               ]
+           );
+       }
+
+       return redirect('divisi-jabatan')->with('success', 'Divisi dan Jabatan berhasil di update!');
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy($id)
+    {
+        $positions = Position::where("division_id", $id)->delete();
+        $division = Division::find($id)->delete();
+
+        return redirect()->back()->with('success', 'Divisi berhasil di hapus!');
+    }
+}
diff --git a/app/Models/Division.php b/app/Models/Division.php
new file mode 100644
index 0000000..79d25ae
--- /dev/null
+++ b/app/Models/Division.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Division extends Model
+{
+    use HasFactory, SoftDeletes;
+
+    protected $guarded = [
+        'id', 'created_at'
+    ];
+
+    public function positions()
+    {
+        return $this->hasMany(Position::class, 'division_id', 'id');
+    }
+}
diff --git a/app/Models/Position.php b/app/Models/Position.php
new file mode 100644
index 0000000..17e2653
--- /dev/null
+++ b/app/Models/Position.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class Position extends Model
+{
+    use HasFactory, SoftDeletes;
+
+    protected $guarded = [
+        'id', 'created_at'
+    ];
+
+    public function division()
+    {
+        return $this->belongsTo(Division::class, 'division_id', 'id');
+    }
+}
diff --git a/database/migrations/2023_09_21_141026_create_divisions_table.php b/database/migrations/2023_09_21_141026_create_divisions_table.php
new file mode 100644
index 0000000..e273cf9
--- /dev/null
+++ b/database/migrations/2023_09_21_141026_create_divisions_table.php
@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('divisions', function (Blueprint $table) {
+            $table->id();
+            $table->string('name')->nullable();
+            $table->string('full_name')->nullable();
+            $table->string('color')->nullable();
+            $table->string('tagline')->nullable();
+            $table->string('motto')->nullable();
+            $table->text('description')->nullable();
+            $table->text('full_description')->nullable();
+            $table->text('content')->nullable();
+            $table->string('photo')->nullable();
+            $table->string('logo')->nullable();
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('divisions');
+    }
+};
diff --git a/database/migrations/2023_09_22_070237_create_positions_table.php b/database/migrations/2023_09_22_070237_create_positions_table.php
new file mode 100644
index 0000000..355dc6a
--- /dev/null
+++ b/database/migrations/2023_09_22_070237_create_positions_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('positions', function (Blueprint $table) {
+            $table->id();
+            $table->string('name')->nullable();
+            $table->unsignedBigInteger('division_id')->nullable();
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('positions');
+    }
+};
diff --git a/public/assets/extensions/coloris/coloris.css b/public/assets/extensions/coloris/coloris.css
new file mode 100644
index 0000000..795691c
--- /dev/null
+++ b/public/assets/extensions/coloris/coloris.css
@@ -0,0 +1,577 @@
+.clr-picker {
+  display: none;
+  flex-wrap: wrap;
+  position: absolute;
+  width: 200px;
+  z-index: 1000;
+  border-radius: 10px;
+  background-color: #fff;
+  justify-content: flex-end;
+  direction: ltr;
+  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.clr-picker.clr-open,
+.clr-picker[data-inline="true"] {
+  display: flex;
+}
+
+.clr-picker[data-inline="true"] {
+  position: relative;
+}
+
+.clr-gradient {
+  position: relative;
+  width: 100%;
+  height: 100px;
+  margin-bottom: 15px;
+  border-radius: 3px 3px 0 0;
+  background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);
+  cursor: pointer;
+}
+
+.clr-marker {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  margin: -6px 0 0 -6px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  background-color: currentColor;
+  cursor: pointer;
+}
+
+.clr-picker input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 16px;
+}
+
+.clr-picker input[type="range"]::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+  -webkit-appearance: none;
+}
+
+.clr-picker input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: 16px;
+  border: 0;
+}
+
+.clr-picker input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: 0;
+}
+
+.clr-hue {
+  background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
+}
+
+.clr-hue,
+.clr-alpha {
+  position: relative;
+  width: calc(100% - 40px);
+  height: 8px;
+  margin: 5px 20px;
+  border-radius: 4px;
+}
+
+.clr-alpha span {
+  display: block;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);
+}
+
+.clr-hue input,
+.clr-alpha input {
+  position: absolute;
+  width: calc(100% + 32px);
+  height: 16px;
+  left: -16px;
+  top: -4px;
+  margin: 0;
+  background-color: transparent;
+  opacity: 0;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.clr-hue div,
+.clr-alpha div {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 0;
+  top: 50%;
+  margin-left: -8px;
+  transform: translateY(-50%);
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background-color: currentColor;
+  box-shadow: 0 0 1px #888;
+  pointer-events: none;
+}
+
+.clr-alpha div:before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+.clr-format {
+  display: none;
+  order: 1;
+  width: calc(100% - 40px);
+  margin: 0 20px 20px;
+}
+
+.clr-segmented {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #ddd;
+  border-radius: 15px;
+  box-sizing: border-box;
+  color: #999;
+  font-size: 12px;
+}
+
+.clr-segmented input,
+.clr-segmented legend {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.clr-segmented label {
+  flex-grow: 1;
+  margin: 0;
+  padding: 4px 0;
+  font-size: inherit;
+  font-weight: normal;
+  line-height: initial;
+  text-align: center;
+  cursor: pointer;
+}
+
+.clr-segmented label:first-of-type {
+  border-radius: 10px 0 0 10px;
+}
+
+.clr-segmented label:last-of-type {
+  border-radius: 0 10px 10px 0;
+}
+
+.clr-segmented input:checked + label {
+  color: #fff;
+  background-color: #666;
+}
+
+.clr-swatches {
+  order: 2;
+  width: calc(100% - 32px);
+  margin: 0 16px;
+}
+
+.clr-swatches div {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 12px;
+  justify-content: center;
+}
+
+.clr-swatches button {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin: 0 4px 6px 4px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: inherit;
+  text-indent: -1000px;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.clr-swatches button:after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: inherit;
+  background-color: currentColor;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+}
+
+input.clr-color {
+  order: 1;
+  width: calc(100% - 80px);
+  height: 32px;
+  margin: 15px 20px 20px auto;
+  padding: 0 10px;
+  border: 1px solid #ddd;
+  border-radius: 16px;
+  color: #444;
+  background-color: #fff;
+  font-family: sans-serif;
+  font-size: 14px;
+  text-align: center;
+  box-shadow: none;
+}
+
+input.clr-color:focus {
+  outline: none;
+  border: 1px solid #1e90ff;
+}
+
+.clr-close,
+.clr-clear {
+  display: none;
+  order: 2;
+  height: 24px;
+  margin: 0 20px 20px;
+  padding: 0 20px;
+  border: 0;
+  border-radius: 12px;
+  color: #fff;
+  background-color: #666;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.clr-close {
+  display: block;
+  margin: 0 20px 20px auto;
+}
+
+.clr-preview {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  margin: 15px 0 20px 20px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.clr-preview:before,
+.clr-preview:after {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  border: 1px solid #fff;
+  border-radius: 50%;
+}
+
+.clr-preview:after {
+  border: 0;
+  background-color: currentColor;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+}
+
+.clr-preview button {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  outline-offset: -2px;
+  background-color: transparent;
+  text-indent: -9999px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.clr-marker,
+.clr-hue div,
+.clr-alpha div,
+.clr-color {
+  box-sizing: border-box;
+}
+
+.clr-field {
+  display: inline-block;
+  position: relative;
+  color: transparent;
+}
+
+.clr-field input {
+  margin: 0;
+  direction: ltr;
+}
+
+.clr-field.clr-rtl input {
+  text-align: right;
+}
+
+.clr-field button {
+  position: absolute;
+  width: 30px;
+  height: 100%;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  text-indent: -1000px;
+  white-space: nowrap;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.clr-field.clr-rtl button {
+  right: auto;
+  left: 0;
+}
+
+.clr-field button:after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: inherit;
+  background-color: currentColor;
+  box-shadow: inset 0 0 1px rgba(0,0,0,.5);
+}
+
+.clr-alpha,
+.clr-alpha div,
+.clr-swatches button,
+.clr-preview:before,
+.clr-field button {
+  background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
+  background-position: 0 0, 4px 4px;
+  background-size: 8px 8px;
+}
+
+.clr-marker:focus {
+  outline: none;
+}
+
+.clr-keyboard-nav .clr-marker:focus,
+.clr-keyboard-nav .clr-hue input:focus + div,
+.clr-keyboard-nav .clr-alpha input:focus + div,
+.clr-keyboard-nav .clr-segmented input:focus + label {
+  outline: none;
+  box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;
+}
+
+.clr-picker[data-alpha="false"] .clr-alpha {
+  display: none;
+}
+
+.clr-picker[data-minimal="true"] {
+  padding-top: 16px;
+}
+
+.clr-picker[data-minimal="true"] .clr-gradient,
+.clr-picker[data-minimal="true"] .clr-hue,
+.clr-picker[data-minimal="true"] .clr-alpha,
+.clr-picker[data-minimal="true"] .clr-color,
+.clr-picker[data-minimal="true"] .clr-preview {
+  display: none;
+}
+
+/** Dark theme **/
+
+.clr-dark {
+  background-color: #444;
+}
+
+.clr-dark .clr-segmented {
+  border-color: #777;
+}
+
+.clr-dark .clr-swatches button:after {
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
+}
+
+.clr-dark input.clr-color {
+  color: #fff;
+  border-color: #777;
+  background-color: #555;
+}
+
+.clr-dark input.clr-color:focus {
+  border-color: #1e90ff;
+}
+
+.clr-dark .clr-preview:after {
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
+}
+
+.clr-dark .clr-alpha,
+.clr-dark .clr-alpha div,
+.clr-dark .clr-swatches button,
+.clr-dark .clr-preview:before {
+  background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);
+}
+
+/** Polaroid theme **/
+
+.clr-picker.clr-polaroid {
+  border-radius: 6px;
+  box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);
+}
+
+.clr-picker.clr-polaroid:before {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  left: 20px;
+  top: -10px;
+  border: solid transparent;
+  border-width: 0 8px 10px 8px;
+  border-bottom-color: currentColor;
+  box-sizing: border-box;
+  color: #fff;
+  filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));
+  pointer-events: none;
+}
+
+.clr-picker.clr-polaroid.clr-dark:before {
+  color: #444;
+}
+
+.clr-picker.clr-polaroid.clr-left:before {
+  left: auto;
+  right: 20px;
+}
+
+.clr-picker.clr-polaroid.clr-top:before {
+  top: auto;
+  bottom: -10px;
+  transform: rotateZ(180deg);
+}
+
+.clr-polaroid .clr-gradient {
+  width: calc(100% - 20px);
+  height: 120px;
+  margin: 10px;
+  border-radius: 3px;
+}
+
+.clr-polaroid .clr-hue,
+.clr-polaroid .clr-alpha {
+  width: calc(100% - 30px);
+  height: 10px;
+  margin: 6px 15px;
+  border-radius: 5px;
+}
+
+.clr-polaroid .clr-hue div,
+.clr-polaroid .clr-alpha div {
+  box-shadow: 0 0 5px rgba(0,0,0,.2);
+}
+
+.clr-polaroid .clr-format {
+  width: calc(100% - 20px);
+  margin: 0 10px 15px;
+}
+
+.clr-polaroid .clr-swatches {
+  width: calc(100% - 12px);
+  margin: 0 6px;
+}
+.clr-polaroid .clr-swatches div {
+  padding-bottom: 10px;
+}
+
+.clr-polaroid .clr-swatches button {
+  width: 22px;
+  height: 22px;
+}
+
+.clr-polaroid input.clr-color {
+  width: calc(100% - 60px);
+  margin: 10px 10px 15px auto;
+}
+
+.clr-polaroid .clr-clear {
+  margin: 0 10px 15px 10px;
+}
+
+.clr-polaroid .clr-close {
+  margin: 0 10px 15px auto;
+}
+
+.clr-polaroid .clr-preview {
+  margin: 10px 0 15px 10px;
+}
+
+/** Large theme **/
+
+.clr-picker.clr-large {
+  width: 275px;
+}
+
+.clr-large .clr-gradient {
+  height: 150px;
+}
+
+.clr-large .clr-swatches button {
+  width: 22px;
+  height: 22px;
+}
+
+/** Pill (horizontal) theme **/
+
+.clr-picker.clr-pill {
+  width: 380px;
+  padding-left: 180px;
+  box-sizing: border-box;
+}
+
+.clr-pill .clr-gradient {
+  position: absolute;
+  width: 180px;
+  height: 100%;
+  left: 0;
+  top: 0;
+  margin-bottom: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+.clr-pill .clr-hue {
+  margin-top: 20px;
+}
\ No newline at end of file
diff --git a/public/assets/extensions/coloris/coloris.js b/public/assets/extensions/coloris/coloris.js
new file mode 100644
index 0000000..49d67ee
--- /dev/null
+++ b/public/assets/extensions/coloris/coloris.js
@@ -0,0 +1,1212 @@
+ /*!
+ * Copyright (c) 2021 Momo Bassit.
+ * Licensed under the MIT License (MIT)
+ * https://github.com/mdbassit/Coloris
+ */
+
+(function (window, document, Math, undefined) {
+  var ctx = document.createElement('canvas').getContext('2d');
+  var currentColor = { r: 0, g: 0, b: 0, h: 0, s: 0, v: 0, a: 1 };
+  var container,picker,colorArea,colorMarker,colorPreview,colorValue,clearButton,closeButton,
+  hueSlider,hueMarker,alphaSlider,alphaMarker,currentEl,currentFormat,oldColor,keyboardNav,
+  colorAreaDims = {};
+
+  // Default settings
+  var settings = {
+    el: '[data-coloris]',
+    parent: 'body',
+    theme: 'default',
+    themeMode: 'light',
+    rtl: false,
+    wrap: true,
+    margin: 2,
+    format: 'hex',
+    formatToggle: false,
+    swatches: [],
+    swatchesOnly: false,
+    alpha: true,
+    forceAlpha: false,
+    focusInput: true,
+    selectInput: false,
+    inline: false,
+    defaultColor: '#000000',
+    clearButton: false,
+    clearLabel: 'Clear',
+    closeButton: false,
+    closeLabel: 'Close',
+    onChange: function onChange() {return undefined;},
+    a11y: {
+      open: 'Open color picker',
+      close: 'Close color picker',
+      clear: 'Clear the selected color',
+      marker: 'Saturation: {s}. Brightness: {v}.',
+      hueSlider: 'Hue slider',
+      alphaSlider: 'Opacity slider',
+      input: 'Color value field',
+      format: 'Color format',
+      swatch: 'Color swatch',
+      instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.' } };
+
+
+
+  // Virtual instances cache
+  var instances = {};
+  var currentInstanceId = '';
+  var defaultInstance = {};
+  var hasInstance = false;
+
+  /**
+   * Configure the color picker.
+   * @param {object} options Configuration options.
+   */
+  function configure(options) {
+    if (typeof options !== 'object') {
+      return;
+    }
+
+    for (var key in options) {
+      switch (key) {
+        case 'el':
+          bindFields(options.el);
+          if (options.wrap !== false) {
+            wrapFields(options.el);
+          }
+          break;
+        case 'parent':
+          container = document.querySelector(options.parent);
+          if (container) {
+            container.appendChild(picker);
+            settings.parent = options.parent;
+
+            // document.body is special
+            if (container === document.body) {
+              container = undefined;
+            }
+          }
+          break;
+        case 'themeMode':
+          settings.themeMode = options.themeMode;
+          if (options.themeMode === 'auto' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            settings.themeMode = 'dark';
+          }
+        // The lack of a break statement is intentional
+        case 'theme':
+          if (options.theme) {
+            settings.theme = options.theme;
+          }
+
+          // Set the theme and color scheme
+          picker.className = "clr-picker clr-" + settings.theme + " clr-" + settings.themeMode;
+
+          // Update the color picker's position if inline mode is in use
+          if (settings.inline) {
+            updatePickerPosition();
+          }
+          break;
+        case 'rtl':
+          settings.rtl = !!options.rtl;
+          document.querySelectorAll('.clr-field').forEach(function (field) {return field.classList.toggle('clr-rtl', settings.rtl);});
+          break;
+        case 'margin':
+          options.margin *= 1;
+          settings.margin = !isNaN(options.margin) ? options.margin : settings.margin;
+          break;
+        case 'wrap':
+          if (options.el && options.wrap) {
+            wrapFields(options.el);
+          }
+          break;
+        case 'formatToggle':
+          settings.formatToggle = !!options.formatToggle;
+          getEl('clr-format').style.display = settings.formatToggle ? 'block' : 'none';
+          if (settings.formatToggle) {
+            settings.format = 'auto';
+          }
+          break;
+        case 'swatches':
+          if (Array.isArray(options.swatches)) {(function () {
+              var swatches = [];
+
+              options.swatches.forEach(function (swatch, i) {
+                swatches.push("<button type=\"button\" id=\"clr-swatch-" + i + "\" aria-labelledby=\"clr-swatch-label clr-swatch-" + i + "\" style=\"color: " + swatch + ";\">" + swatch + "</button>");
+              });
+
+              getEl('clr-swatches').innerHTML = swatches.length ? "<div>" + swatches.join('') + "</div>" : '';
+              settings.swatches = options.swatches.slice();})();
+          }
+          break;
+        case 'swatchesOnly':
+          settings.swatchesOnly = !!options.swatchesOnly;
+          picker.setAttribute('data-minimal', settings.swatchesOnly);
+          break;
+        case 'alpha':
+          settings.alpha = !!options.alpha;
+          picker.setAttribute('data-alpha', settings.alpha);
+          break;
+        case 'inline':
+          settings.inline = !!options.inline;
+          picker.setAttribute('data-inline', settings.inline);
+
+          if (settings.inline) {
+            var defaultColor = options.defaultColor || settings.defaultColor;
+
+            currentFormat = getColorFormatFromStr(defaultColor);
+            updatePickerPosition();
+            setColorFromStr(defaultColor);
+          }
+          break;
+        case 'clearButton':
+          // Backward compatibility
+          if (typeof options.clearButton === 'object') {
+            if (options.clearButton.label) {
+              settings.clearLabel = options.clearButton.label;
+              clearButton.innerHTML = settings.clearLabel;
+            }
+
+            options.clearButton = options.clearButton.show;
+          }
+
+          settings.clearButton = !!options.clearButton;
+          clearButton.style.display = settings.clearButton ? 'block' : 'none';
+          break;
+        case 'clearLabel':
+          settings.clearLabel = options.clearLabel;
+          clearButton.innerHTML = settings.clearLabel;
+          break;
+        case 'closeButton':
+          settings.closeButton = !!options.closeButton;
+
+          if (settings.closeButton) {
+            picker.insertBefore(closeButton, colorPreview);
+          } else {
+            colorPreview.appendChild(closeButton);
+          }
+
+          break;
+        case 'closeLabel':
+          settings.closeLabel = options.closeLabel;
+          closeButton.innerHTML = settings.closeLabel;
+          break;
+        case 'a11y':
+          var labels = options.a11y;
+          var update = false;
+
+          if (typeof labels === 'object') {
+            for (var label in labels) {
+              if (labels[label] && settings.a11y[label]) {
+                settings.a11y[label] = labels[label];
+                update = true;
+              }
+            }
+          }
+
+          if (update) {
+            var openLabel = getEl('clr-open-label');
+            var swatchLabel = getEl('clr-swatch-label');
+
+            openLabel.innerHTML = settings.a11y.open;
+            swatchLabel.innerHTML = settings.a11y.swatch;
+            closeButton.setAttribute('aria-label', settings.a11y.close);
+            clearButton.setAttribute('aria-label', settings.a11y.clear);
+            hueSlider.setAttribute('aria-label', settings.a11y.hueSlider);
+            alphaSlider.setAttribute('aria-label', settings.a11y.alphaSlider);
+            colorValue.setAttribute('aria-label', settings.a11y.input);
+            colorArea.setAttribute('aria-label', settings.a11y.instruction);
+          }
+          break;
+        default:
+          settings[key] = options[key];}
+
+    }
+  }
+
+  /**
+   * Add or update a virtual instance.
+   * @param {String} selector The CSS selector of the elements to which the instance is attached.
+   * @param {Object} options Per-instance options to apply.
+   */
+  function setVirtualInstance(selector, options) {
+    if (typeof selector === 'string' && typeof options === 'object') {
+      instances[selector] = options;
+      hasInstance = true;
+    }
+  }
+
+  /**
+   * Remove a virtual instance.
+   * @param {String} selector The CSS selector of the elements to which the instance is attached.
+   */
+  function removeVirtualInstance(selector) {
+    delete instances[selector];
+
+    if (Object.keys(instances).length === 0) {
+      hasInstance = false;
+
+      if (selector === currentInstanceId) {
+        resetVirtualInstance();
+      }
+    }
+  }
+
+  /**
+   * Attach a virtual instance to an element if it matches a selector.
+   * @param {Object} element Target element that will receive a virtual instance if applicable.
+   */
+  function attachVirtualInstance(element) {
+    if (hasInstance) {
+      // These options can only be set globally, not per instance
+      var unsupportedOptions = ['el', 'wrap', 'rtl', 'inline', 'defaultColor', 'a11y'];var _loop = function _loop(
+
+      selector) {
+        var options = instances[selector];
+
+        // If the element matches an instance's CSS selector
+        if (element.matches(selector)) {
+          currentInstanceId = selector;
+          defaultInstance = {};
+
+          // Delete unsupported options
+          unsupportedOptions.forEach(function (option) {return delete options[option];});
+
+          // Back up the default options so we can restore them later
+          for (var option in options) {
+            defaultInstance[option] = Array.isArray(settings[option]) ? settings[option].slice() : settings[option];
+          }
+
+          // Set the instance's options
+          configure(options);
+          return "break";
+        }};for (var selector in instances) {var _ret = _loop(selector);if (_ret === "break") break;
+      }
+    }
+  }
+
+  /**
+   * Revert any per-instance options that were previously applied.
+   */
+  function resetVirtualInstance() {
+    if (Object.keys(defaultInstance).length > 0) {
+      configure(defaultInstance);
+      currentInstanceId = '';
+      defaultInstance = {};
+    }
+  }
+
+  /**
+   * Bind the color picker to input fields that match the selector.
+   * @param {string} selector One or more selectors pointing to input fields.
+   */
+  function bindFields(selector) {
+    // Show the color picker on click on the input fields that match the selector
+    addListener(document, 'click', selector, function (event) {
+      // Skip if inline mode is in use
+      if (settings.inline) {
+        return;
+      }
+
+      // Apply any per-instance options first
+      attachVirtualInstance(event.target);
+
+      currentEl = event.target;
+      oldColor = currentEl.value;
+      currentFormat = getColorFormatFromStr(oldColor);
+      picker.classList.add('clr-open');
+
+      updatePickerPosition();
+      setColorFromStr(oldColor);
+
+      if (settings.focusInput || settings.selectInput) {
+        colorValue.focus({ preventScroll: true });
+        colorValue.setSelectionRange(currentEl.selectionStart, currentEl.selectionEnd);
+      }
+
+      if (settings.selectInput) {
+        colorValue.select();
+      }
+
+      // Always focus the first element when using keyboard navigation
+      if (keyboardNav || settings.swatchesOnly) {
+        getFocusableElements().shift().focus();
+      }
+
+      // Trigger an "open" event
+      currentEl.dispatchEvent(new Event('open', { bubbles: true }));
+    });
+
+    // Update the color preview of the input fields that match the selector
+    addListener(document, 'input', selector, function (event) {
+      var parent = event.target.parentNode;
+
+      // Only update the preview if the field has been previously wrapped
+      if (parent.classList.contains('clr-field')) {
+        parent.style.color = event.target.value;
+      }
+    });
+  }
+
+  /**
+   * Update the color picker's position and the color gradient's offset
+   */
+  function updatePickerPosition() {
+    var parent = container;
+    var scrollY = window.scrollY;
+    var pickerWidth = picker.offsetWidth;
+    var pickerHeight = picker.offsetHeight;
+    var reposition = { left: false, top: false };
+    var parentStyle, parentMarginTop, parentBorderTop;
+    var offset = { x: 0, y: 0 };
+
+    if (parent) {
+      parentStyle = window.getComputedStyle(parent);
+      parentMarginTop = parseFloat(parentStyle.marginTop);
+      parentBorderTop = parseFloat(parentStyle.borderTopWidth);
+
+      offset = parent.getBoundingClientRect();
+      offset.y += parentBorderTop + scrollY;
+    }
+
+    if (!settings.inline) {
+      var coords = currentEl.getBoundingClientRect();
+      var left = coords.x;
+      var top = scrollY + coords.y + coords.height + settings.margin;
+
+      // If the color picker is inside a custom container
+      // set the position relative to it
+      if (parent) {
+        left -= offset.x;
+        top -= offset.y;
+
+        if (left + pickerWidth > parent.clientWidth) {
+          left += coords.width - pickerWidth;
+          reposition.left = true;
+        }
+
+        if (top + pickerHeight > parent.clientHeight - parentMarginTop) {
+          if (pickerHeight + settings.margin <= coords.top - (offset.y - scrollY)) {
+            top -= coords.height + pickerHeight + settings.margin * 2;
+            reposition.top = true;
+          }
+        }
+
+        top += parent.scrollTop;
+
+        // Otherwise set the position relative to the whole document
+      } else {
+        if (left + pickerWidth > document.documentElement.clientWidth) {
+          left += coords.width - pickerWidth;
+          reposition.left = true;
+        }
+
+        if (top + pickerHeight - scrollY > document.documentElement.clientHeight) {
+          if (pickerHeight + settings.margin <= coords.top) {
+            top = scrollY + coords.y - pickerHeight - settings.margin;
+            reposition.top = true;
+          }
+        }
+      }
+
+      picker.classList.toggle('clr-left', reposition.left);
+      picker.classList.toggle('clr-top', reposition.top);
+      picker.style.left = left + "px";
+      picker.style.top = top + "px";
+      offset.x += picker.offsetLeft;
+      offset.y += picker.offsetTop;
+    }
+
+    colorAreaDims = {
+      width: colorArea.offsetWidth,
+      height: colorArea.offsetHeight,
+      x: colorArea.offsetLeft + offset.x,
+      y: colorArea.offsetTop + offset.y };
+
+  }
+
+  /**
+   * Wrap the linked input fields in a div that adds a color preview.
+   * @param {string} selector One or more selectors pointing to input fields.
+   */
+  function wrapFields(selector) {
+    document.querySelectorAll(selector).forEach(function (field) {
+      var parentNode = field.parentNode;
+
+      if (!parentNode.classList.contains('clr-field')) {
+        var wrapper = document.createElement('div');
+        var classes = 'clr-field';
+
+        if (settings.rtl || field.classList.contains('clr-rtl')) {
+          classes += ' clr-rtl';
+        }
+
+        wrapper.innerHTML = "<button type=\"button\" aria-labelledby=\"clr-open-label\"></button>";
+        parentNode.insertBefore(wrapper, field);
+        wrapper.setAttribute('class', classes);
+        wrapper.style.color = field.value;
+        wrapper.appendChild(field);
+      }
+    });
+  }
+
+  /**
+   * Close the color picker.
+   * @param {boolean} [revert] If true, revert the color to the original value.
+   */
+  function closePicker(revert) {
+    if (currentEl && !settings.inline) {
+      var prevEl = currentEl;
+
+      // Revert the color to the original value if needed
+      if (revert) {
+        // This will prevent the "change" event on the colorValue input to execute its handler
+        currentEl = undefined;
+
+        if (oldColor !== prevEl.value) {
+          prevEl.value = oldColor;
+
+          // Trigger an "input" event to force update the thumbnail next to the input field
+          prevEl.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+      }
+
+      // Trigger a "change" event if needed
+      setTimeout(function () {// Add this to the end of the event loop
+        if (oldColor !== prevEl.value) {
+          prevEl.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+      });
+
+      // Hide the picker dialog
+      picker.classList.remove('clr-open');
+
+      // Reset any previously set per-instance options
+      if (hasInstance) {
+        resetVirtualInstance();
+      }
+
+      // Trigger a "close" event
+      prevEl.dispatchEvent(new Event('close', { bubbles: true }));
+
+      if (settings.focusInput) {
+        prevEl.focus({ preventScroll: true });
+      }
+
+      // This essentially marks the picker as closed
+      currentEl = undefined;
+    }
+  }
+
+  /**
+   * Set the active color from a string.
+   * @param {string} str String representing a color.
+   */
+  function setColorFromStr(str) {
+    var rgba = strToRGBA(str);
+    var hsva = RGBAtoHSVA(rgba);
+
+    updateMarkerA11yLabel(hsva.s, hsva.v);
+    updateColor(rgba, hsva);
+
+    // Update the UI
+    hueSlider.value = hsva.h;
+    picker.style.color = "hsl(" + hsva.h + ", 100%, 50%)";
+    hueMarker.style.left = hsva.h / 360 * 100 + "%";
+
+    colorMarker.style.left = colorAreaDims.width * hsva.s / 100 + "px";
+    colorMarker.style.top = colorAreaDims.height - colorAreaDims.height * hsva.v / 100 + "px";
+
+    alphaSlider.value = hsva.a * 100;
+    alphaMarker.style.left = hsva.a * 100 + "%";
+  }
+
+  /**
+   * Guess the color format from a string.
+   * @param {string} str String representing a color.
+   * @return {string} The color format.
+   */
+  function getColorFormatFromStr(str) {
+    var format = str.substring(0, 3).toLowerCase();
+
+    if (format === 'rgb' || format === 'hsl') {
+      return format;
+    }
+
+    return 'hex';
+  }
+
+  /**
+   * Copy the active color to the linked input field.
+   * @param {number} [color] Color value to override the active color.
+   */
+  function pickColor(color) {
+    color = color !== undefined ? color : colorValue.value;
+
+    if (currentEl) {
+      currentEl.value = color;
+      currentEl.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+
+    if (settings.onChange) {
+      settings.onChange.call(window, color, currentEl);
+    }
+
+    document.dispatchEvent(new CustomEvent('coloris:pick', { detail: { color: color, currentEl: currentEl } }));
+  }
+
+  /**
+   * Set the active color based on a specific point in the color gradient.
+   * @param {number} x Left position.
+   * @param {number} y Top position.
+   */
+  function setColorAtPosition(x, y) {
+    var hsva = {
+      h: hueSlider.value * 1,
+      s: x / colorAreaDims.width * 100,
+      v: 100 - y / colorAreaDims.height * 100,
+      a: alphaSlider.value / 100 };
+
+    var rgba = HSVAtoRGBA(hsva);
+
+    updateMarkerA11yLabel(hsva.s, hsva.v);
+    updateColor(rgba, hsva);
+    pickColor();
+  }
+
+  /**
+   * Update the color marker's accessibility label.
+   * @param {number} saturation
+   * @param {number} value
+   */
+  function updateMarkerA11yLabel(saturation, value) {
+    var label = settings.a11y.marker;
+
+    saturation = saturation.toFixed(1) * 1;
+    value = value.toFixed(1) * 1;
+    label = label.replace('{s}', saturation);
+    label = label.replace('{v}', value);
+    colorMarker.setAttribute('aria-label', label);
+  }
+
+  //
+  /**
+   * Get the pageX and pageY positions of the pointer.
+   * @param {object} event The MouseEvent or TouchEvent object.
+   * @return {object} The pageX and pageY positions.
+   */
+  function getPointerPosition(event) {
+    return {
+      pageX: event.changedTouches ? event.changedTouches[0].pageX : event.pageX,
+      pageY: event.changedTouches ? event.changedTouches[0].pageY : event.pageY };
+
+  }
+
+  /**
+   * Move the color marker when dragged.
+   * @param {object} event The MouseEvent object.
+   */
+  function moveMarker(event) {
+    var pointer = getPointerPosition(event);
+    var x = pointer.pageX - colorAreaDims.x;
+    var y = pointer.pageY - colorAreaDims.y;
+
+    if (container) {
+      y += container.scrollTop;
+    }
+
+    setMarkerPosition(x, y);
+
+    // Prevent scrolling while dragging the marker
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  /**
+   * Move the color marker when the arrow keys are pressed.
+   * @param {number} offsetX The horizontal amount to move.
+   * @param {number} offsetY The vertical amount to move.
+   */
+  function moveMarkerOnKeydown(offsetX, offsetY) {
+    var x = colorMarker.style.left.replace('px', '') * 1 + offsetX;
+    var y = colorMarker.style.top.replace('px', '') * 1 + offsetY;
+
+    setMarkerPosition(x, y);
+  }
+
+  /**
+   * Set the color marker's position.
+   * @param {number} x Left position.
+   * @param {number} y Top position.
+   */
+  function setMarkerPosition(x, y) {
+    // Make sure the marker doesn't go out of bounds
+    x = x < 0 ? 0 : x > colorAreaDims.width ? colorAreaDims.width : x;
+    y = y < 0 ? 0 : y > colorAreaDims.height ? colorAreaDims.height : y;
+
+    // Set the position
+    colorMarker.style.left = x + "px";
+    colorMarker.style.top = y + "px";
+
+    // Update the color
+    setColorAtPosition(x, y);
+
+    // Make sure the marker is focused
+    colorMarker.focus();
+  }
+
+  /**
+   * Update the color picker's input field and preview thumb.
+   * @param {Object} rgba Red, green, blue and alpha values.
+   * @param {Object} [hsva] Hue, saturation, value and alpha values.
+   */
+  function updateColor(rgba, hsva) {if (rgba === void 0) {rgba = {};}if (hsva === void 0) {hsva = {};}
+    var format = settings.format;
+
+    for (var key in rgba) {
+      currentColor[key] = rgba[key];
+    }
+
+    for (var _key in hsva) {
+      currentColor[_key] = hsva[_key];
+    }
+
+    var hex = RGBAToHex(currentColor);
+    var opaqueHex = hex.substring(0, 7);
+
+    colorMarker.style.color = opaqueHex;
+    alphaMarker.parentNode.style.color = opaqueHex;
+    alphaMarker.style.color = hex;
+    colorPreview.style.color = hex;
+
+    // Force repaint the color and alpha gradients as a workaround for a Google Chrome bug
+    colorArea.style.display = 'none';
+    colorArea.offsetHeight;
+    colorArea.style.display = '';
+    alphaMarker.nextElementSibling.style.display = 'none';
+    alphaMarker.nextElementSibling.offsetHeight;
+    alphaMarker.nextElementSibling.style.display = '';
+
+    if (format === 'mixed') {
+      format = currentColor.a === 1 ? 'hex' : 'rgb';
+    } else if (format === 'auto') {
+      format = currentFormat;
+    }
+
+    switch (format) {
+      case 'hex':
+        colorValue.value = hex;
+        break;
+      case 'rgb':
+        colorValue.value = RGBAToStr(currentColor);
+        break;
+      case 'hsl':
+        colorValue.value = HSLAToStr(HSVAtoHSLA(currentColor));
+        break;}
+
+
+    // Select the current format in the format switcher
+    document.querySelector(".clr-format [value=\"" + format + "\"]").checked = true;
+  }
+
+  /**
+   * Set the hue when its slider is moved.
+   */
+  function setHue() {
+    var hue = hueSlider.value * 1;
+    var x = colorMarker.style.left.replace('px', '') * 1;
+    var y = colorMarker.style.top.replace('px', '') * 1;
+
+    picker.style.color = "hsl(" + hue + ", 100%, 50%)";
+    hueMarker.style.left = hue / 360 * 100 + "%";
+
+    setColorAtPosition(x, y);
+  }
+
+  /**
+   * Set the alpha when its slider is moved.
+   */
+  function setAlpha() {
+    var alpha = alphaSlider.value / 100;
+
+    alphaMarker.style.left = alpha * 100 + "%";
+    updateColor({ a: alpha });
+    pickColor();
+  }
+
+  /**
+   * Convert HSVA to RGBA.
+   * @param {object} hsva Hue, saturation, value and alpha values.
+   * @return {object} Red, green, blue and alpha values.
+   */
+  function HSVAtoRGBA(hsva) {
+    var saturation = hsva.s / 100;
+    var value = hsva.v / 100;
+    var chroma = saturation * value;
+    var hueBy60 = hsva.h / 60;
+    var x = chroma * (1 - Math.abs(hueBy60 % 2 - 1));
+    var m = value - chroma;
+
+    chroma = chroma + m;
+    x = x + m;
+
+    var index = Math.floor(hueBy60) % 6;
+    var red = [chroma, x, m, m, x, chroma][index];
+    var green = [x, chroma, chroma, x, m, m][index];
+    var blue = [m, m, x, chroma, chroma, x][index];
+
+    return {
+      r: Math.round(red * 255),
+      g: Math.round(green * 255),
+      b: Math.round(blue * 255),
+      a: hsva.a };
+
+  }
+
+  /**
+   * Convert HSVA to HSLA.
+   * @param {object} hsva Hue, saturation, value and alpha values.
+   * @return {object} Hue, saturation, lightness and alpha values.
+   */
+  function HSVAtoHSLA(hsva) {
+    var value = hsva.v / 100;
+    var lightness = value * (1 - hsva.s / 100 / 2);
+    var saturation;
+
+    if (lightness > 0 && lightness < 1) {
+      saturation = Math.round((value - lightness) / Math.min(lightness, 1 - lightness) * 100);
+    }
+
+    return {
+      h: hsva.h,
+      s: saturation || 0,
+      l: Math.round(lightness * 100),
+      a: hsva.a };
+
+  }
+
+  /**
+   * Convert RGBA to HSVA.
+   * @param {object} rgba Red, green, blue and alpha values.
+   * @return {object} Hue, saturation, value and alpha values.
+   */
+  function RGBAtoHSVA(rgba) {
+    var red = rgba.r / 255;
+    var green = rgba.g / 255;
+    var blue = rgba.b / 255;
+    var xmax = Math.max(red, green, blue);
+    var xmin = Math.min(red, green, blue);
+    var chroma = xmax - xmin;
+    var value = xmax;
+    var hue = 0;
+    var saturation = 0;
+
+    if (chroma) {
+      if (xmax === red) {hue = (green - blue) / chroma;}
+      if (xmax === green) {hue = 2 + (blue - red) / chroma;}
+      if (xmax === blue) {hue = 4 + (red - green) / chroma;}
+      if (xmax) {saturation = chroma / xmax;}
+    }
+
+    hue = Math.floor(hue * 60);
+
+    return {
+      h: hue < 0 ? hue + 360 : hue,
+      s: Math.round(saturation * 100),
+      v: Math.round(value * 100),
+      a: rgba.a };
+
+  }
+
+  /**
+   * Parse a string to RGBA.
+   * @param {string} str String representing a color.
+   * @return {object} Red, green, blue and alpha values.
+   */
+  function strToRGBA(str) {
+    var regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
+    var match, rgba;
+
+    // Default to black for invalid color strings
+    ctx.fillStyle = '#000';
+
+    // Use canvas to convert the string to a valid color string
+    ctx.fillStyle = str;
+    match = regex.exec(ctx.fillStyle);
+
+    if (match) {
+      rgba = {
+        r: match[3] * 1,
+        g: match[4] * 1,
+        b: match[5] * 1,
+        a: match[6] * 1 };
+
+
+      // Workaround to mitigate a Chromium bug where the alpha value is rounded incorrectly
+      rgba.a = +rgba.a.toFixed(2);
+
+    } else {
+      match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map(function (h) {return parseInt(h, 16);});
+      rgba = {
+        r: match[0],
+        g: match[1],
+        b: match[2],
+        a: 1 };
+
+    }
+
+    return rgba;
+  }
+
+  /**
+   * Convert RGBA to Hex.
+   * @param {object} rgba Red, green, blue and alpha values.
+   * @return {string} Hex color string.
+   */
+  function RGBAToHex(rgba) {
+    var R = rgba.r.toString(16);
+    var G = rgba.g.toString(16);
+    var B = rgba.b.toString(16);
+    var A = '';
+
+    if (rgba.r < 16) {
+      R = '0' + R;
+    }
+
+    if (rgba.g < 16) {
+      G = '0' + G;
+    }
+
+    if (rgba.b < 16) {
+      B = '0' + B;
+    }
+
+    if (settings.alpha && (rgba.a < 1 || settings.forceAlpha)) {
+      var alpha = rgba.a * 255 | 0;
+      A = alpha.toString(16);
+
+      if (alpha < 16) {
+        A = '0' + A;
+      }
+    }
+
+    return '#' + R + G + B + A;
+  }
+
+  /**
+   * Convert RGBA values to a CSS rgb/rgba string.
+   * @param {object} rgba Red, green, blue and alpha values.
+   * @return {string} CSS color string.
+   */
+  function RGBAToStr(rgba) {
+    if (!settings.alpha || rgba.a === 1 && !settings.forceAlpha) {
+      return "rgb(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ")";
+    } else {
+      return "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
+    }
+  }
+
+  /**
+   * Convert HSLA values to a CSS hsl/hsla string.
+   * @param {object} hsla Hue, saturation, lightness and alpha values.
+   * @return {string} CSS color string.
+   */
+  function HSLAToStr(hsla) {
+    if (!settings.alpha || hsla.a === 1 && !settings.forceAlpha) {
+      return "hsl(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%)";
+    } else {
+      return "hsla(" + hsla.h + ", " + hsla.s + "%, " + hsla.l + "%, " + hsla.a + ")";
+    }
+  }
+
+  /**
+   * Init the color picker.
+   */
+  function init() {
+    // Render the UI
+    container = undefined;
+    picker = document.createElement('div');
+    picker.setAttribute('id', 'clr-picker');
+    picker.className = 'clr-picker';
+    picker.innerHTML =
+    "<input id=\"clr-color-value\" name=\"clr-color-value\" class=\"clr-color\" type=\"text\" value=\"\" spellcheck=\"false\" aria-label=\"" + settings.a11y.input + "\">" + ("<div id=\"clr-color-area\" class=\"clr-gradient\" role=\"application\" aria-label=\"" +
+    settings.a11y.instruction + "\">") +
+    '<div id="clr-color-marker" class="clr-marker" tabindex="0"></div>' +
+    '</div>' +
+    '<div class="clr-hue">' + ("<input id=\"clr-hue-slider\" name=\"clr-hue-slider\" type=\"range\" min=\"0\" max=\"360\" step=\"1\" aria-label=\"" +
+    settings.a11y.hueSlider + "\">") +
+    '<div id="clr-hue-marker"></div>' +
+    '</div>' +
+    '<div class="clr-alpha">' + ("<input id=\"clr-alpha-slider\" name=\"clr-alpha-slider\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" aria-label=\"" +
+    settings.a11y.alphaSlider + "\">") +
+    '<div id="clr-alpha-marker"></div>' +
+    '<span></span>' +
+    '</div>' +
+    '<div id="clr-format" class="clr-format">' +
+    '<fieldset class="clr-segmented">' + ("<legend>" +
+    settings.a11y.format + "</legend>") +
+    '<input id="clr-f1" type="radio" name="clr-format" value="hex">' +
+    '<label for="clr-f1">Hex</label>' +
+    '<input id="clr-f2" type="radio" name="clr-format" value="rgb">' +
+    '<label for="clr-f2">RGB</label>' +
+    '<input id="clr-f3" type="radio" name="clr-format" value="hsl">' +
+    '<label for="clr-f3">HSL</label>' +
+    '<span></span>' +
+    '</fieldset>' +
+    '</div>' +
+    '<div id="clr-swatches" class="clr-swatches"></div>' + ("<button type=\"button\" id=\"clr-clear\" class=\"clr-clear\" aria-label=\"" +
+    settings.a11y.clear + "\">" + settings.clearLabel + "</button>") +
+    '<div id="clr-color-preview" class="clr-preview">' + ("<button type=\"button\" id=\"clr-close\" class=\"clr-close\" aria-label=\"" +
+    settings.a11y.close + "\">" + settings.closeLabel + "</button>") +
+    '</div>' + ("<span id=\"clr-open-label\" hidden>" +
+    settings.a11y.open + "</span>") + ("<span id=\"clr-swatch-label\" hidden>" +
+    settings.a11y.swatch + "</span>");
+
+    // Append the color picker to the DOM
+    document.body.appendChild(picker);
+
+    // Reference the UI elements
+    colorArea = getEl('clr-color-area');
+    colorMarker = getEl('clr-color-marker');
+    clearButton = getEl('clr-clear');
+    closeButton = getEl('clr-close');
+    colorPreview = getEl('clr-color-preview');
+    colorValue = getEl('clr-color-value');
+    hueSlider = getEl('clr-hue-slider');
+    hueMarker = getEl('clr-hue-marker');
+    alphaSlider = getEl('clr-alpha-slider');
+    alphaMarker = getEl('clr-alpha-marker');
+
+    // Bind the picker to the default selector
+    bindFields(settings.el);
+    wrapFields(settings.el);
+
+    addListener(picker, 'mousedown', function (event) {
+      picker.classList.remove('clr-keyboard-nav');
+      event.stopPropagation();
+    });
+
+    addListener(colorArea, 'mousedown', function (event) {
+      addListener(document, 'mousemove', moveMarker);
+    });
+
+    addListener(colorArea, 'touchstart', function (event) {
+      document.addEventListener('touchmove', moveMarker, { passive: false });
+    });
+
+    addListener(colorMarker, 'mousedown', function (event) {
+      addListener(document, 'mousemove', moveMarker);
+    });
+
+    addListener(colorMarker, 'touchstart', function (event) {
+      document.addEventListener('touchmove', moveMarker, { passive: false });
+    });
+
+    addListener(colorValue, 'change', function (event) {
+      var value = colorValue.value;
+
+      if (currentEl || settings.inline) {
+        var color = value === '' ? value : setColorFromStr(value);
+        pickColor(color);
+      }
+    });
+
+    addListener(clearButton, 'click', function (event) {
+      pickColor('');
+      closePicker();
+    });
+
+    addListener(closeButton, 'click', function (event) {
+      pickColor();
+      closePicker();
+    });
+
+    addListener(getEl('clr-format'), 'click', '.clr-format input', function (event) {
+      currentFormat = event.target.value;
+      updateColor();
+      pickColor();
+    });
+
+    addListener(picker, 'click', '.clr-swatches button', function (event) {
+      setColorFromStr(event.target.textContent);
+      pickColor();
+
+      if (settings.swatchesOnly) {
+        closePicker();
+      }
+    });
+
+    addListener(document, 'mouseup', function (event) {
+      document.removeEventListener('mousemove', moveMarker);
+    });
+
+    addListener(document, 'touchend', function (event) {
+      document.removeEventListener('touchmove', moveMarker);
+    });
+
+    addListener(document, 'mousedown', function (event) {
+      keyboardNav = false;
+      picker.classList.remove('clr-keyboard-nav');
+      closePicker();
+    });
+
+    addListener(document, 'keydown', function (event) {
+      var key = event.key;
+      var target = event.target;
+      var shiftKey = event.shiftKey;
+      var navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
+      if (key === 'Escape') {
+        closePicker(true);
+
+        // Display focus rings when using the keyboard
+      } else if (navKeys.includes(key)) {
+        keyboardNav = true;
+        picker.classList.add('clr-keyboard-nav');
+      }
+
+      // Trap the focus within the color picker while it's open
+      if (key === 'Tab' && target.matches('.clr-picker *')) {
+        var focusables = getFocusableElements();
+        var firstFocusable = focusables.shift();
+        var lastFocusable = focusables.pop();
+
+        if (shiftKey && target === firstFocusable) {
+          lastFocusable.focus();
+          event.preventDefault();
+        } else if (!shiftKey && target === lastFocusable) {
+          firstFocusable.focus();
+          event.preventDefault();
+        }
+      }
+    });
+
+    addListener(document, 'click', '.clr-field button', function (event) {
+      // Reset any previously set per-instance options
+      if (hasInstance) {
+        resetVirtualInstance();
+      }
+
+      // Open the color picker
+      event.target.nextElementSibling.dispatchEvent(new Event('click', { bubbles: true }));
+    });
+
+    addListener(colorMarker, 'keydown', function (event) {
+      var movements = {
+        ArrowUp: [0, -1],
+        ArrowDown: [0, 1],
+        ArrowLeft: [-1, 0],
+        ArrowRight: [1, 0] };
+
+
+      if (Object.keys(movements).includes(event.key)) {
+        moveMarkerOnKeydown.apply(void 0, movements[event.key]);
+        event.preventDefault();
+      }
+    });
+
+    addListener(colorArea, 'click', moveMarker);
+    addListener(hueSlider, 'input', setHue);
+    addListener(alphaSlider, 'input', setAlpha);
+  }
+
+  /**
+   * Return a list of focusable elements within the color picker.
+   * @return {array} The list of focusable DOM elemnts.
+   */
+  function getFocusableElements() {
+    var controls = Array.from(picker.querySelectorAll('input, button'));
+    var focusables = controls.filter(function (node) {return !!node.offsetWidth;});
+
+    return focusables;
+  }
+
+  /**
+   * Shortcut for getElementById to optimize the minified JS.
+   * @param {string} id The element id.
+   * @return {object} The DOM element with the provided id.
+   */
+  function getEl(id) {
+    return document.getElementById(id);
+  }
+
+  /**
+   * Shortcut for addEventListener to optimize the minified JS.
+   * @param {object} context The context to which the listener is attached.
+   * @param {string} type Event type.
+   * @param {(string|function)} selector Event target if delegation is used, event handler if not.
+   * @param {function} [fn] Event handler if delegation is used.
+   */
+  function addListener(context, type, selector, fn) {
+    var matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
+
+    // Delegate event to the target of the selector
+    if (typeof selector === 'string') {
+      context.addEventListener(type, function (event) {
+        if (matches.call(event.target, selector)) {
+          fn.call(event.target, event);
+        }
+      });
+
+      // If the selector is not a string then it's a function
+      // in which case we need a regular event listener
+    } else {
+      fn = selector;
+      context.addEventListener(type, fn);
+    }
+  }
+
+  /**
+   * Call a function only when the DOM is ready.
+   * @param {function} fn The function to call.
+   * @param {array} [args] Arguments to pass to the function.
+   */
+  function DOMReady(fn, args) {
+    args = args !== undefined ? args : [];
+
+    if (document.readyState !== 'loading') {
+      fn.apply(void 0, args);
+    } else {
+      document.addEventListener('DOMContentLoaded', function () {
+        fn.apply(void 0, args);
+      });
+    }
+  }
+
+  // Polyfill for Nodelist.forEach
+  if (NodeList !== undefined && NodeList.prototype && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+  }
+
+  // Expose the color picker to the global scope
+  window.Coloris = function () {
+    var methods = {
+      set: configure,
+      wrap: wrapFields,
+      close: closePicker,
+      setInstance: setVirtualInstance,
+      removeInstance: removeVirtualInstance,
+      updatePosition: updatePickerPosition };
+
+
+    function Coloris(options) {
+      DOMReady(function () {
+        if (options) {
+          if (typeof options === 'string') {
+            bindFields(options);
+          } else {
+            configure(options);
+          }
+        }
+      });
+    }var _loop2 = function _loop2(
+
+    key) {
+      Coloris[key] = function () {for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {args[_key2] = arguments[_key2];}
+        DOMReady(methods[key], args);
+      };};for (var key in methods) {_loop2(key);
+    }
+
+    return Coloris;
+  }();
+
+  // Init the color picker when the DOM is ready
+  DOMReady(init);
+
+})(window, document, Math);
\ No newline at end of file
diff --git a/public/assets/extensions/coloris/coloris.min.css b/public/assets/extensions/coloris/coloris.min.css
new file mode 100644
index 0000000..1a070ca
--- /dev/null
+++ b/public/assets/extensions/coloris/coloris.min.css
@@ -0,0 +1 @@
+.clr-picker{display:none;flex-wrap:wrap;position:absolute;width:200px;z-index:1000;border-radius:10px;background-color:#fff;justify-content:flex-end;direction:ltr;box-shadow:0 0 5px rgba(0,0,0,.05),0 5px 20px rgba(0,0,0,.1);-moz-user-select:none;-webkit-user-select:none;user-select:none}.clr-picker.clr-open,.clr-picker[data-inline=true]{display:flex}.clr-picker[data-inline=true]{position:relative}.clr-gradient{position:relative;width:100%;height:100px;margin-bottom:15px;border-radius:3px 3px 0 0;background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);cursor:pointer}.clr-marker{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid #fff;border-radius:50%;background-color:currentColor;cursor:pointer}.clr-picker input[type=range]::-webkit-slider-runnable-track{width:100%;height:16px}.clr-picker input[type=range]::-webkit-slider-thumb{width:16px;height:16px;-webkit-appearance:none}.clr-picker input[type=range]::-moz-range-track{width:100%;height:16px;border:0}.clr-picker input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0}.clr-hue{background-image:linear-gradient(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.clr-alpha,.clr-hue{position:relative;width:calc(100% - 40px);height:8px;margin:5px 20px;border-radius:4px}.clr-alpha span{display:block;height:100%;width:100%;border-radius:inherit;background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor)}.clr-alpha input,.clr-hue input{position:absolute;width:calc(100% + 32px);height:16px;left:-16px;top:-4px;margin:0;background-color:transparent;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}.clr-alpha div,.clr-hue div{position:absolute;width:16px;height:16px;left:0;top:50%;margin-left:-8px;transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background-color:currentColor;box-shadow:0 0 1px #888;pointer-events:none}.clr-alpha div:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border-radius:50%;background-color:currentColor}.clr-format{display:none;order:1;width:calc(100% - 40px);margin:0 20px 20px}.clr-segmented{display:flex;position:relative;width:100%;margin:0;padding:0;border:1px solid #ddd;border-radius:15px;box-sizing:border-box;color:#999;font-size:12px}.clr-segmented input,.clr-segmented legend{position:absolute;width:100%;height:100%;margin:0;padding:0;border:0;left:0;top:0;opacity:0;pointer-events:none}.clr-segmented label{flex-grow:1;margin:0;padding:4px 0;font-size:inherit;font-weight:400;line-height:initial;text-align:center;cursor:pointer}.clr-segmented label:first-of-type{border-radius:10px 0 0 10px}.clr-segmented label:last-of-type{border-radius:0 10px 10px 0}.clr-segmented input:checked+label{color:#fff;background-color:#666}.clr-swatches{order:2;width:calc(100% - 32px);margin:0 16px}.clr-swatches div{display:flex;flex-wrap:wrap;padding-bottom:12px;justify-content:center}.clr-swatches button{position:relative;width:20px;height:20px;margin:0 4px 6px 4px;padding:0;border:0;border-radius:50%;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;cursor:pointer}.clr-swatches button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}input.clr-color{order:1;width:calc(100% - 80px);height:32px;margin:15px 20px 20px auto;padding:0 10px;border:1px solid #ddd;border-radius:16px;color:#444;background-color:#fff;font-family:sans-serif;font-size:14px;text-align:center;box-shadow:none}input.clr-color:focus{outline:0;border:1px solid #1e90ff}.clr-clear,.clr-close{display:none;order:2;height:24px;margin:0 20px 20px;padding:0 20px;border:0;border-radius:12px;color:#fff;background-color:#666;font-family:inherit;font-size:12px;font-weight:400;cursor:pointer}.clr-close{display:block;margin:0 20px 20px auto}.clr-preview{position:relative;width:32px;height:32px;margin:15px 0 20px 20px;border-radius:50%;overflow:hidden}.clr-preview:after,.clr-preview:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border:1px solid #fff;border-radius:50%}.clr-preview:after{border:0;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.clr-preview button{position:absolute;width:100%;height:100%;z-index:1;margin:0;padding:0;border:0;border-radius:50%;outline-offset:-2px;background-color:transparent;text-indent:-9999px;cursor:pointer;overflow:hidden}.clr-alpha div,.clr-color,.clr-hue div,.clr-marker{box-sizing:border-box}.clr-field{display:inline-block;position:relative;color:transparent}.clr-field input{margin:0;direction:ltr}.clr-field.clr-rtl input{text-align:right}.clr-field button{position:absolute;width:30px;height:100%;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0;border:0;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;pointer-events:none}.clr-field.clr-rtl button{right:auto;left:0}.clr-field button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 1px rgba(0,0,0,.5)}.clr-alpha,.clr-alpha div,.clr-field button,.clr-preview:before,.clr-swatches button{background-image:repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);background-position:0 0,4px 4px;background-size:8px 8px}.clr-marker:focus{outline:0}.clr-keyboard-nav .clr-alpha input:focus+div,.clr-keyboard-nav .clr-hue input:focus+div,.clr-keyboard-nav .clr-marker:focus,.clr-keyboard-nav .clr-segmented input:focus+label{outline:0;box-shadow:0 0 0 2px #1e90ff,0 0 2px 2px #fff}.clr-picker[data-alpha=false] .clr-alpha{display:none}.clr-picker[data-minimal=true]{padding-top:16px}.clr-picker[data-minimal=true] .clr-alpha,.clr-picker[data-minimal=true] .clr-color,.clr-picker[data-minimal=true] .clr-gradient,.clr-picker[data-minimal=true] .clr-hue,.clr-picker[data-minimal=true] .clr-preview{display:none}.clr-dark{background-color:#444}.clr-dark .clr-segmented{border-color:#777}.clr-dark .clr-swatches button:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.clr-dark input.clr-color{color:#fff;border-color:#777;background-color:#555}.clr-dark input.clr-color:focus{border-color:#1e90ff}.clr-dark .clr-preview:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.clr-dark .clr-alpha,.clr-dark .clr-alpha div,.clr-dark .clr-preview:before,.clr-dark .clr-swatches button{background-image:repeating-linear-gradient(45deg,#666 25%,transparent 25%,transparent 75%,#888 75%,#888),repeating-linear-gradient(45deg,#888 25%,#444 25%,#444 75%,#888 75%,#888)}.clr-picker.clr-polaroid{border-radius:6px;box-shadow:0 0 5px rgba(0,0,0,.1),0 5px 30px rgba(0,0,0,.2)}.clr-picker.clr-polaroid:before{content:'';display:block;position:absolute;width:16px;height:10px;left:20px;top:-10px;border:solid transparent;border-width:0 8px 10px 8px;border-bottom-color:currentColor;box-sizing:border-box;color:#fff;filter:drop-shadow(0 -4px 3px rgba(0,0,0,.1));pointer-events:none}.clr-picker.clr-polaroid.clr-dark:before{color:#444}.clr-picker.clr-polaroid.clr-left:before{left:auto;right:20px}.clr-picker.clr-polaroid.clr-top:before{top:auto;bottom:-10px;transform:rotateZ(180deg)}.clr-polaroid .clr-gradient{width:calc(100% - 20px);height:120px;margin:10px;border-radius:3px}.clr-polaroid .clr-alpha,.clr-polaroid .clr-hue{width:calc(100% - 30px);height:10px;margin:6px 15px;border-radius:5px}.clr-polaroid .clr-alpha div,.clr-polaroid .clr-hue div{box-shadow:0 0 5px rgba(0,0,0,.2)}.clr-polaroid .clr-format{width:calc(100% - 20px);margin:0 10px 15px}.clr-polaroid .clr-swatches{width:calc(100% - 12px);margin:0 6px}.clr-polaroid .clr-swatches div{padding-bottom:10px}.clr-polaroid .clr-swatches button{width:22px;height:22px}.clr-polaroid input.clr-color{width:calc(100% - 60px);margin:10px 10px 15px auto}.clr-polaroid .clr-clear{margin:0 10px 15px 10px}.clr-polaroid .clr-close{margin:0 10px 15px auto}.clr-polaroid .clr-preview{margin:10px 0 15px 10px}.clr-picker.clr-large{width:275px}.clr-large .clr-gradient{height:150px}.clr-large .clr-swatches button{width:22px;height:22px}.clr-picker.clr-pill{width:380px;padding-left:180px;box-sizing:border-box}.clr-pill .clr-gradient{position:absolute;width:180px;height:100%;left:0;top:0;margin-bottom:0;border-radius:3px 0 0 3px}.clr-pill .clr-hue{margin-top:20px}
\ No newline at end of file
diff --git a/public/assets/extensions/coloris/coloris.min.js b/public/assets/extensions/coloris/coloris.min.js
new file mode 100644
index 0000000..89cae29
--- /dev/null
+++ b/public/assets/extensions/coloris/coloris.min.js
@@ -0,0 +1,6 @@
+/*!
+ * Copyright (c) 2021 Momo Bassit.
+ * Licensed under the MIT License (MIT)
+ * https://github.com/mdbassit/Coloris
+ */
+!function(u,d,s,c){var p,f,h,i,b,v,y,g,m,l,w,k,L,E,a,n,r=d.createElement("canvas").getContext("2d"),x={r:0,g:0,b:0,h:0,s:0,v:0,a:1},A={},S={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){return c},a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},o={},C="",T={},B=!1;function M(e){if("object"==typeof e)for(var t in e)switch(t){case"el":N(e.el),!1!==e.wrap&&j(e.el);break;case"parent":(p=d.querySelector(e.parent))&&(p.appendChild(f),S.parent=e.parent,p===d.body&&(p=c));break;case"themeMode":S.themeMode=e.themeMode,"auto"===e.themeMode&&u.matchMedia&&u.matchMedia("(prefers-color-scheme: dark)").matches&&(S.themeMode="dark");case"theme":e.theme&&(S.theme=e.theme),f.className="clr-picker clr-"+S.theme+" clr-"+S.themeMode,S.inline&&I();break;case"rtl":S.rtl=!!e.rtl,d.querySelectorAll(".clr-field").forEach(function(e){return e.classList.toggle("clr-rtl",S.rtl)});break;case"margin":e.margin*=1,S.margin=(isNaN(e.margin)?S:e).margin;break;case"wrap":e.el&&e.wrap&&j(e.el);break;case"formatToggle":S.formatToggle=!!e.formatToggle,z("clr-format").style.display=S.formatToggle?"block":"none",S.formatToggle&&(S.format="auto");break;case"swatches":Array.isArray(e.swatches)&&function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button type="button" id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),z("clr-swatches").innerHTML=a.length?"<div>"+a.join("")+"</div>":"",S.swatches=e.swatches.slice()}();break;case"swatchesOnly":S.swatchesOnly=!!e.swatchesOnly,f.setAttribute("data-minimal",S.swatchesOnly);break;case"alpha":S.alpha=!!e.alpha,f.setAttribute("data-alpha",S.alpha);break;case"inline":S.inline=!!e.inline,f.setAttribute("data-inline",S.inline),S.inline&&(l=e.defaultColor||S.defaultColor,E=q(l),I(),W(l));break;case"clearButton":"object"==typeof e.clearButton&&(e.clearButton.label&&(S.clearLabel=e.clearButton.label,y.innerHTML=S.clearLabel),e.clearButton=e.clearButton.show),S.clearButton=!!e.clearButton,y.style.display=S.clearButton?"block":"none";break;case"clearLabel":S.clearLabel=e.clearLabel,y.innerHTML=S.clearLabel;break;case"closeButton":S.closeButton=!!e.closeButton,S.closeButton?f.insertBefore(g,b):b.appendChild(g);break;case"closeLabel":S.closeLabel=e.closeLabel,g.innerHTML=S.closeLabel;break;case"a11y":var a,l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&S.a11y[o]&&(S.a11y[o]=r[o],n=!0);n&&(a=z("clr-open-label"),l=z("clr-swatch-label"),a.innerHTML=S.a11y.open,l.innerHTML=S.a11y.swatch,g.setAttribute("aria-label",S.a11y.close),y.setAttribute("aria-label",S.a11y.clear),m.setAttribute("aria-label",S.a11y.hueSlider),w.setAttribute("aria-label",S.a11y.alphaSlider),v.setAttribute("aria-label",S.a11y.input),h.setAttribute("aria-label",S.a11y.instruction));break;default:S[t]=e[t]}}function H(e,t){"string"==typeof e&&"object"==typeof t&&(o[e]=t,B=!0)}function O(e){delete o[e],0===Object.keys(o).length&&(B=!1,e===C&&D())}function t(l){if(B){var e,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(e in o)if("break"===function(e){var t=o[e];if(l.matches(e)){for(var a in C=e,T={},r.forEach(function(e){return delete t[e]}),t)T[a]=Array.isArray(S[a])?S[a].slice():S[a];return M(t),"break"}}(e))break}}function D(){0<Object.keys(T).length&&(M(T),C="",T={})}function N(e){J(d,"click",e,function(e){S.inline||(t(e.target),L=e.target,a=L.value,E=q(a),f.classList.add("clr-open"),I(),W(a),(S.focusInput||S.selectInput)&&(v.focus({preventScroll:!0}),v.setSelectionRange(L.selectionStart,L.selectionEnd)),S.selectInput&&v.select(),(n||S.swatchesOnly)&&$().shift().focus(),L.dispatchEvent(new Event("open",{bubbles:!0})))}),J(d,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function I(){var e,t,a,l,r=p,n=u.scrollY,o=f.offsetWidth,c=f.offsetHeight,i={left:!1,top:!1},s={x:0,y:0};r&&(a=u.getComputedStyle(r),e=parseFloat(a.marginTop),l=parseFloat(a.borderTopWidth),(s=r.getBoundingClientRect()).y+=l+n),S.inline||(a=(t=L.getBoundingClientRect()).x,l=n+t.y+t.height+S.margin,r?(a-=s.x,l-=s.y,a+o>r.clientWidth&&(a+=t.width-o,i.left=!0),l+c>r.clientHeight-e&&c+S.margin<=t.top-(s.y-n)&&(l-=t.height+c+2*S.margin,i.top=!0),l+=r.scrollTop):(a+o>d.documentElement.clientWidth&&(a+=t.width-o,i.left=!0),l+c-n>d.documentElement.clientHeight&&c+S.margin<=t.top&&(l=n+t.y-c-S.margin,i.top=!0)),f.classList.toggle("clr-left",i.left),f.classList.toggle("clr-top",i.top),f.style.left=a+"px",f.style.top=l+"px",s.x+=f.offsetLeft,s.y+=f.offsetTop),A={width:h.offsetWidth,height:h.offsetHeight,x:h.offsetLeft+s.x,y:h.offsetTop+s.y}}function j(e){d.querySelectorAll(e).forEach(function(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=d.createElement("div"),a="clr-field",(S.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='<button type="button" aria-labelledby="clr-open-label"></button>',l.insertBefore(t,e),t.setAttribute("class",a),t.style.color=e.value,t.appendChild(e))})}function R(e){var t;L&&!S.inline&&(t=L,e&&(L=c,a!==t.value&&(t.value=a,t.dispatchEvent(new Event("input",{bubbles:!0})))),setTimeout(function(){a!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),f.classList.remove("clr-open"),B&&D(),t.dispatchEvent(new Event("close",{bubbles:!0})),S.focusInput&&t.focus({preventScroll:!0}),L=c)}function W(e){var t=function(e){var t;r.fillStyle="#000",r.fillStyle=e,(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(r.fillStyle))?(t={r:+e[3],g:+e[4],b:+e[5],a:+e[6]}).a=+t.a.toFixed(2):(e=r.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),t={r:e[0],g:e[1],b:e[2],a:1});return t}(e),e=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=s.max(t,a,l),n=s.min(t,a,l),o=r-n,c=r,i=0,n=0;o&&(r===t&&(i=(a-l)/o),r===a&&(i=2+(l-t)/o),r===l&&(i=4+(t-a)/o),r&&(n=o/r));return{h:(i=s.floor(60*i))<0?i+360:i,s:s.round(100*n),v:s.round(100*c),a:e.a}}(t);P(e.s,e.v),G(t,e),m.value=e.h,f.style.color="hsl("+e.h+", 100%, 50%)",l.style.left=e.h/360*100+"%",i.style.left=A.width*e.s/100+"px",i.style.top=A.height-A.height*e.v/100+"px",w.value=100*e.a,k.style.left=100*e.a+"%"}function q(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function F(e){e=e!==c?e:v.value,L&&(L.value=e,L.dispatchEvent(new Event("input",{bubbles:!0}))),S.onChange&&S.onChange.call(u,e,L),d.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:L}}))}function Y(e,t){e={h:+m.value,s:e/A.width*100,v:100-t/A.height*100,a:w.value/100},t=function(e){var t=e.s/100,a=e.v/100,l=t*a,r=e.h/60,n=l*(1-s.abs(r%2-1)),o=a-l;l+=o,n+=o;t=s.floor(r)%6,a=[l,n,o,o,n,l][t],r=[n,l,l,n,o,o][t],t=[o,o,n,l,l,n][t];return{r:s.round(255*a),g:s.round(255*r),b:s.round(255*t),a:e.a}}(e);P(e.s,e.v),G(t,e),F()}function P(e,t){var a=S.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),i.setAttribute("aria-label",a)}function U(e){var t={pageX:((a=e).changedTouches?a.changedTouches[0]:a).pageX,pageY:(a.changedTouches?a.changedTouches[0]:a).pageY},a=t.pageX-A.x,t=t.pageY-A.y;p&&(t+=p.scrollTop),X(a,t),e.preventDefault(),e.stopPropagation()}function X(e,t){e=e<0?0:e>A.width?A.width:e,t=t<0?0:t>A.height?A.height:t,i.style.left=e+"px",i.style.top=t+"px",Y(e,t),i.focus()}function G(e,t){void 0===t&&(t={});var a,l,r=S.format;for(a in e=void 0===e?{}:e)x[a]=e[a];for(l in t)x[l]=t[l];var n,o=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);S.alpha&&(e.a<1||S.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(x),c=o.substring(0,7);switch(i.style.color=c,k.parentNode.style.color=c,k.style.color=o,b.style.color=o,h.style.display="none",h.offsetHeight,h.style.display="",k.nextElementSibling.style.display="none",k.nextElementSibling.offsetHeight,k.nextElementSibling.style.display="","mixed"===r?r=1===x.a?"hex":"rgb":"auto"===r&&(r=E),r){case"hex":v.value=o;break;case"rgb":v.value=(n=x,!S.alpha||1===n.a&&!S.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":v.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=s.round((a-l)/s.min(l,1-l)*100));return{h:e.h,s:t||0,l:s.round(100*l),a:e.a}}(x),!S.alpha||1===n.a&&!S.forceAlpha?"hsl("+n.h+", "+n.s+"%, "+n.l+"%)":"hsla("+n.h+", "+n.s+"%, "+n.l+"%, "+n.a+")")}d.querySelector('.clr-format [value="'+r+'"]').checked=!0}function e(){var e=+m.value,t=+i.style.left.replace("px",""),a=+i.style.top.replace("px","");f.style.color="hsl("+e+", 100%, 50%)",l.style.left=e/360*100+"%",Y(t,a)}function K(){var e=w.value/100;k.style.left=100*e+"%",G({a:e}),F()}function $(){return Array.from(f.querySelectorAll("input, button")).filter(function(e){return!!e.offsetWidth})}function z(e){return d.getElementById(e)}function J(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function Q(e,t){t=t!==c?t:[],"loading"!==d.readyState?e.apply(void 0,t):d.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}NodeList!==c&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),u.Coloris=function(){var r={set:M,wrap:j,close:R,setInstance:H,removeInstance:O,updatePosition:I};function e(e){Q(function(){e&&("string"==typeof e?N:M)(e)})}for(var t in r)!function(l){e[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];Q(r[l],t)}}(t);return e}(),Q(function(){p=c,(f=d.createElement("div")).setAttribute("id","clr-picker"),f.className="clr-picker",f.innerHTML='<input id="clr-color-value" name="clr-color-value" class="clr-color" type="text" value="" spellcheck="false" aria-label="'+S.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+S.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" name="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+S.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" name="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+S.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-format" class="clr-format"><fieldset class="clr-segmented"><legend>'+S.a11y.format+'</legend><input id="clr-f1" type="radio" name="clr-format" value="hex"><label for="clr-f1">Hex</label><input id="clr-f2" type="radio" name="clr-format" value="rgb"><label for="clr-f2">RGB</label><input id="clr-f3" type="radio" name="clr-format" value="hsl"><label for="clr-f3">HSL</label><span></span></fieldset></div><div id="clr-swatches" class="clr-swatches"></div><button type="button" id="clr-clear" class="clr-clear" aria-label="'+S.a11y.clear+'">'+S.clearLabel+'</button><div id="clr-color-preview" class="clr-preview"><button type="button" id="clr-close" class="clr-close" aria-label="'+S.a11y.close+'">'+S.closeLabel+'</button></div><span id="clr-open-label" hidden>'+S.a11y.open+'</span><span id="clr-swatch-label" hidden>'+S.a11y.swatch+"</span>",d.body.appendChild(f),h=z("clr-color-area"),i=z("clr-color-marker"),y=z("clr-clear"),g=z("clr-close"),b=z("clr-color-preview"),v=z("clr-color-value"),m=z("clr-hue-slider"),l=z("clr-hue-marker"),w=z("clr-alpha-slider"),k=z("clr-alpha-marker"),N(S.el),j(S.el),J(f,"mousedown",function(e){f.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),J(h,"mousedown",function(e){J(d,"mousemove",U)}),J(h,"touchstart",function(e){d.addEventListener("touchmove",U,{passive:!1})}),J(i,"mousedown",function(e){J(d,"mousemove",U)}),J(i,"touchstart",function(e){d.addEventListener("touchmove",U,{passive:!1})}),J(v,"change",function(e){var t=v.value;(L||S.inline)&&F(""===t?t:W(t))}),J(y,"click",function(e){F(""),R()}),J(g,"click",function(e){F(),R()}),J(z("clr-format"),"click",".clr-format input",function(e){E=e.target.value,G(),F()}),J(f,"click",".clr-swatches button",function(e){W(e.target.textContent),F(),S.swatchesOnly&&R()}),J(d,"mouseup",function(e){d.removeEventListener("mousemove",U)}),J(d,"touchend",function(e){d.removeEventListener("touchmove",U)}),J(d,"mousedown",function(e){n=!1,f.classList.remove("clr-keyboard-nav"),R()}),J(d,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?R(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(n=!0,f.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(a=(t=$()).shift(),t=t.pop(),r&&l===a?(t.focus(),e.preventDefault()):r||l!==t||(a.focus(),e.preventDefault()))}),J(d,"click",".clr-field button",function(e){B&&D(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),J(i,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){X(+i.style.left.replace("px","")+e,+i.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),J(h,"click",U),J(m,"input",e),J(w,"input",K)})}(window,document,Math);
\ No newline at end of file
diff --git a/resources/views/divisions/create.blade.php b/resources/views/divisions/create.blade.php
new file mode 100644
index 0000000..62bb3e4
--- /dev/null
+++ b/resources/views/divisions/create.blade.php
@@ -0,0 +1,304 @@
+@extends('layout')
+
+@section('title', "Tambah Divisi")
+
+@section('css')
+    <link rel="stylesheet" href="{{asset('assets/extensions/filepond/filepond.css')}}">
+    <link rel="stylesheet" href="{{asset('assets/extensions/filepond-plugin-image-preview/filepond-plugin-image-preview.css')}}">
+    <link rel="stylesheet" href="{{asset('assets/extensions/toastify-js/src/toastify.css"')}}">
+    <link rel="stylesheet" href="{{asset('assets/css/pages/filepond.css')}}">
+    <link rel="stylesheet" href="{{asset('assets/extensions/coloris/coloris.min.css')}}"/>
+
+    <style>
+        .image-preview-filepond{
+            margin-bottom: 0px;
+        }
+
+        .filepond--drop-label{
+            background-color: #f1f0ef;
+        }
+    </style>
+@endsection
+
+@section('content')
+    <div class="page-title mb-4">
+        <div class="row">
+            <div class="col-12 col-md-6 order-md-1 order-last">
+                <h3>Tambah Divisi & Jabatan</h3>
+                <p class="text-subtitle text-muted"></p>
+            </div>
+            <div class="col-12 col-md-6 order-md-2 order-first">
+                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
+                    <ol class="breadcrumb">
+                        <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">Dashboard</a></li>
+                        <li class="breadcrumb-item"><a href="{{ url('divsi-jabatan') }}">Divisi & Jabatan</a></li>
+                        <li class="breadcrumb-item active" aria-current="page">Tambah Divisi</li>
+                    </ol>
+                </nav>
+            </div>
+        </div>
+    </div>
+
+    @if ($errors->any())
+        <div class="card-body pt-0">
+            @foreach ($errors->all() as $error)
+                <div class="alert alert-danger alert-dismissible show fade">
+                    <i class="bi bi-file-excel"></i> {{ $error }}
+
+                    <button type="button" class="btn-close btn-close-session" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+            @endforeach
+        </div>
+    @endif
+
+    <div class="card">
+        <div class="card-content">
+            <div class="card-body">
+                <form method="POST" action="{{ url('divisi-jabatan') }}" id="form_create_divisi_jabatan" enctype="multipart/form-data">
+                    @method('POST')
+                    @csrf
+
+                    <div class="form-body row">
+                        <div class="manage-website py-4 col-md-9  border-end">
+                            <div class="header mb-4">
+                                <h4 class="card-title">Profil Divisi</h4>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-4">
+                                        <label for="name" class="form-label">Nama Divisi<span class="text-danger">*</span></label>
+                                        <input type="text" id="name" class="form-control  @error('name') is-invalid @enderror" name="name" placeholder="Nama Divisi" value="{{ old('name') }}">
+                                    </div>
+
+                                    <div class="form-group col-md-8">
+                                        <label for="full_name" class="form-label">Nama Lengkap Divisi<span class="text-danger">*</span></label>
+                                        <input type="text" id="full_name" class="form-control  @error('full_name') is-invalid @enderror" name="full_name" placeholder="Nama Lengkap Divisi" value="{{ old('full_name') }}">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-5">
+                                        <label for="tagline" class="form-label">Jargon<span class="text-danger">*</span></label>
+                                        <input type="text" id="tagline" class="form-control  @error('tagline') is-invalid @enderror" name="tagline" placeholder="Jargon" value="{{ old('tagline') }}">
+                                    </div>
+
+                                    <div class="form-group col-md-7">
+                                        <label for="motto" class="form-label">Semboyan<span class="text-danger">*</span></label>
+                                        <input type="text" id="motto" class="form-control  @error('motto') is-invalid @enderror" name="motto" placeholder="Semboyan" value="{{ old('motto') }}">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-4">
+                                        <label for="logo" class="form-label">Logo Divisi<span class="text-danger">*</span></label>
+                                        <input type="file" class="image-preview-filepond2" name="logo" id="logo">
+                                    </div>
+
+                                    <div class="form-group col-md-4">
+                                        <label for="photo" class="form-label">Foto Divisi<span class="text-danger">*</span></label>
+                                        <input type="file" class="image-preview-filepond" name="photo" id="photo">
+                                    </div>
+
+                                    <div class="form-group col-md-4">
+                                        <label for="color" class="form-label">Color<span class="text-danger">*</span></label>
+                                        <input type="text" id="color" class="form-control  @error('color') is-invalid @enderror" name="color" placeholder="Color" value="{{ old('color') }}" data-coloris>
+                                    </div>
+                                </div>
+
+                                <div class="row">
+                                    <div class="form-group col-md-4">
+                                        <label for="logo" class="form-label">Logo Divisi Saat Ini</label>
+
+                                        <div>
+                                            <img src="{{asset( 'assets/images/faces/1.jpg' )}}" alt="Logo Saat Ini" width="200px">
+                                        </div>
+                                    </div>
+
+                                    <div class="form-group col-md-4">
+                                        <label for="foto" class="form-label">Foto Divisi Saat ini</label>
+
+                                        <div>
+                                            <img src="{{asset( 'assets/images/faces/1.jpg' )}}" alt="Foto Saat Ini" width="200px">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="map-iframe py-4 col-md-3">
+                            <div class="header mb-4">
+                                <h4 class="card-title">Ragam Jabatan</h4>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-12">
+                                        <label for="position_name" class="form-label">Nama Jabatan<span class="text-danger">*</span></label>
+                                        <table style="width: 100%" id="position_table" cellpadding="5">
+                                            <tbody data-position_total="1">
+                                                <tr data-order_position="1">
+                                                    <td style="width: 80%">
+                                                        <input type="text" id="position_name" class="form-control  @error('position_name') is-invalid @enderror" name="position_name[1]" placeholder="Nama Jabatan" value="{{ old('position_name') }}">
+                                                    </td>
+
+                                                    <td>
+                                                        <button type="button" class="btn icon btn-success tooltip-class form-control" data-bs-placement="bottom" title="Tambah" onclick="addRowPosition()">
+                                                            <i class="bi bi-plus-lg"></i>
+                                                        </button>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    {{-- <div class="form-group col-md-1">
+                                        <label for="name" class="form-label"></label>
+                                        <a href="{{ url('divisi/create') }}" class="btn icon btn-success tooltip-class form-control" data-bs-placement="bottom" title="Tambah">
+                                            <i class="bi bi-plus-circle"></i>
+                                        </a>
+                                    </div> --}}
+                                </div>
+                            </div>
+                        </div>
+
+                        <hr>
+
+                        <div class="description-of-organizatation py-4">
+                            <div class="header mb-4">
+                                <h4 class="card-title">Detail Divisi</h4>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-4">
+                                        <label for="description" class="form-label">Deskripsi <span class="text-danger">*</span></label>
+                                        <textarea class="form-control @error('description') is-invalid @enderror" id="description" rows="6" name="description" placeholder="Deskripsi">{{ old('description')}}</textarea>
+                                    </div>
+
+                                    <div class="form-group col-md-8">
+                                        <label for="full_description" class="form-label">Deskripsi Lengkap <span class="text-danger">*</span></label>
+                                        <textarea class="form-control @error('full_description') is-invalid @enderror" id="full_description" rows="6" name="full_description" placeholder="Deskripsi Lengkap">{{ old('full_description')}}</textarea>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-12">
+                                        <label for="content" class="form-label">Konten <span class="text-danger">*</span></label>
+                                        <textarea class="form-control @error('content') is-invalid @enderror" id="content" rows="4" name="content" placeholder="Konten">{{ old('content')}}</textarea>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-sm-12 d-flex justify-content-end mt-4">
+                            <button type="button" class="btn btn-primary me-1 mb-1" id="submit_create_divisi_jabatan" onclick='preventDoubleClick("form_create_divisi_jabatan", "submit_create_divisi_jabatan")'>Submit</button>
+
+                            <a href="{{ url('divisi-jabatan') }}" class="btn btn-light-secondary mx-1 mb-1">Back</a>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('js')
+    <script src="{{ asset('assets/extensions/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-image-crop/filepond-plugin-image-crop.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-image-filter/filepond-plugin-image-filter.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-image-resize/filepond-plugin-image-resize.min.js')}}"></script>
+
+    <script src="{{asset('assets/extensions/filepond/filepond.js')}}"></script>
+    <script src="{{asset('assets/extensions/toastify-js/src/toastify.js')}}"></script>
+    <script src="{{asset('assets/js/pages/filepond.js')}}"></script>
+    <script src="{{asset('assets/extensions/coloris/coloris.min.js')}}"></script>
+
+    <script>
+         $(document).ready(function () {
+            $(".filepond--drop-label").addClass("form-control")
+
+            @if($errors->has('logo'))
+                $(".filepond--drop-label").addClass("is-invalid")
+            @endif
+		});
+
+        // Filepond: Image Preview
+        FilePond.create(document.querySelector(".image-preview-filepond2"), {
+            credits: null,
+            allowImagePreview: true,
+            allowImageFilter: false,
+            allowImageExifOrientation: false,
+            allowImageCrop: false,
+            acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+            fileValidateTypeDetectType: (source, type) =>
+            new Promise((resolve, reject) => {
+                // Do custom type detection here and return with promise
+                resolve(type)
+            }),
+            storeAsFile: true,
+        })
+
+        // Function for prevent double click
+        function preventDoubleClick(id_form, id_button){
+            $('#'+id_button).attr('disabled', true)
+            $('#'+id_form).submit()
+        }
+
+        // Add Row Position
+        function addRowPosition() {
+            let positionTotal = $("#position_table tbody").attr("data-position_total")
+                positionTotal++
+
+
+            let html_row_position = `
+                                        <tr data-order_position="${positionTotal}">
+                                            <td style="width: 80%">
+                                                <input type="text" id="position_name" class="form-control  @error('position_name') is-invalid @enderror" name="position_name[${positionTotal}]" placeholder="Nama Jabatan">
+                                            </td>
+
+                                            <td>
+                                                <button type="button" class="btn icon btn-danger tooltip-class form-control" data-bs-placement="bottom" title="Hapus" onclick="removeRowPosition(this)">
+                                                    <i class="bi bi-dash-lg"></i>
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    `
+
+            $("#position_table tbody").append(html_row_position)
+            $("#position_table tbody").attr("data-position_total", positionTotal)
+        }
+
+        // remove Row Position
+        function removeRowPosition(button) {
+            let positionTotal = $("#position_table tbody").attr("data-position_total")
+                positionTotal--
+
+            let order = $(button).closest("tr").attr("data-order_position")
+            let orderPosition = null;
+
+            $(`#position_table tbody tr[data-order_position="${order}"]`).remove();
+
+            $(`#position_table tbody tr[data-order_position]`).each(function() {
+                orderPosition = $(this).attr("data-order_position")
+
+                if (orderPosition > order) {
+                    decrementOrderPosition = orderPosition - 1
+                    $(this).attr("data-order_position", decrementOrderPosition)
+                    $(this).find("input").attr("name", `position_name[${decrementOrderPosition}]`)
+                }
+            });
+
+            $("#position_table tbody").attr("data-position_total", positionTotal)
+        }
+
+    </script>
+@endsection
diff --git a/resources/views/divisions/edit.blade.php b/resources/views/divisions/edit.blade.php
new file mode 100644
index 0000000..1b9c59d
--- /dev/null
+++ b/resources/views/divisions/edit.blade.php
@@ -0,0 +1,312 @@
+@extends('layout')
+
+@section('title', "Edit | User")
+
+@section('css')
+    <link rel="stylesheet" href="{{asset('assets/extensions/filepond/filepond.css')}}">
+    <link rel="stylesheet" href="{{asset('assets/extensions/filepond-plugin-image-preview/filepond-plugin-image-preview.css')}}">
+    <link rel="stylesheet" href="{{asset('assets/extensions/toastify-js/src/toastify.css"')}}">
+    <link rel="stylesheet" href="{{asset('assets/css/pages/filepond.css')}}">
+    <link rel="stylesheet" href="{{asset('assets/extensions/coloris/coloris.min.css')}}"/>
+
+    <style>
+        .image-preview-filepond{
+            margin-bottom: 0px;
+        }
+
+        .filepond--drop-label{
+            background-color: #f1f0ef;
+        }
+    </style>
+@endsection
+
+@section('content')
+    <div class="page-title mb-4">
+        <div class="row">
+            <div class="col-12 col-md-6 order-md-1 order-last">
+                <h3>Edit Divisi & Jabatan</h3>
+                <p class="text-subtitle text-muted"></p>
+            </div>
+            <div class="col-12 col-md-6 order-md-2 order-first">
+                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
+                    <ol class="breadcrumb">
+                        <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">Dashboard</a></li>
+                        <li class="breadcrumb-item"><a href="{{ url('divsi-jabatan') }}">Divisi & Jabatan</a></li>
+                        <li class="breadcrumb-item active" aria-current="page">Tambah Divisi</li>
+                    </ol>
+                </nav>
+            </div>
+        </div>
+    </div>
+
+    @if ($errors->any())
+        <div class="card-body pt-0">
+            @foreach ($errors->all() as $error)
+                <div class="alert alert-danger alert-dismissible show fade">
+                    <i class="bi bi-file-excel"></i> {{ $error }}
+
+                    <button type="button" class="btn-close btn-close-session" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+            @endforeach
+        </div>
+    @endif
+
+    <div class="card">
+        <div class="card-content">
+            <div class="card-body">
+                <form method="POST" action="{{ url('divisi-jabatan/'.$division->id) }}" id="form_update_divisi_jabatan" enctype="multipart/form-data">
+                    @method('PATCH')
+                    @csrf
+
+                    <div class="form-body row">
+                        <div class="manage-website py-4 col-md-9  border-end">
+                            <div class="header mb-4">
+                                <h4 class="card-title">Profil Divisi</h4>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-4">
+                                        <label for="name" class="form-label">Nama Divisi<span class="text-danger">*</span></label>
+                                        <input type="text" id="name" class="form-control  @error('name') is-invalid @enderror" name="name" placeholder="Nama Divisi" value="{{ old('name') ? old('name') : $division->name }}">
+                                    </div>
+
+                                    <div class="form-group col-md-8">
+                                        <label for="full_name" class="form-label">Nama Lengkap Divisi<span class="text-danger">*</span></label>
+                                        <input type="text" id="full_name" class="form-control  @error('full_name') is-invalid @enderror" name="full_name" placeholder="Nama Lengkap Divisi" value="{{ old('full_name') ? old('full_name') : $division->full_name }}">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-5">
+                                        <label for="tagline" class="form-label">Jargon<span class="text-danger">*</span></label>
+                                        <input type="text" id="tagline" class="form-control  @error('tagline') is-invalid @enderror" name="tagline" placeholder="Jargon" value="{{ old('tagline') ? old('tagline') : $division->tagline }}">
+                                    </div>
+
+                                    <div class="form-group col-md-7">
+                                        <label for="motto" class="form-label">Semboyan<span class="text-danger">*</span></label>
+                                        <input type="text" id="motto" class="form-control  @error('motto') is-invalid @enderror" name="motto" placeholder="Semboyan" value="{{ old('motto') ? old('motto') : $division->motto }}">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-4">
+                                        <label for="logo" class="form-label">Logo Divisi<span class="text-danger">*</span></label>
+                                        <input type="file" class="image-preview-filepond2" name="logo" id="logo">
+                                    </div>
+
+                                    <div class="form-group col-md-4">
+                                        <label for="photo" class="form-label">Foto Divisi<span class="text-danger">*</span></label>
+                                        <input type="file" class="image-preview-filepond" name="photo" id="photo">
+                                    </div>
+
+                                    <div class="form-group col-md-4">
+                                        <label for="color" class="form-label">Color<span class="text-danger">*</span></label>
+                                        <input type="text" id="color" class="form-control  @error('color') is-invalid @enderror" name="color" placeholder="Color" value="{{ old('color') ? old('color') : $division->color }}" data-coloris>
+                                    </div>
+                                </div>
+
+                                <div class="row">
+                                    <div class="form-group col-md-4">
+                                        <label for="logo" class="form-label">Logo Divisi Saat Ini</label>
+
+                                        <div>
+                                            <img src="{{asset( $division->logo ?? 'assets/images/faces/1.jpg' )}}" alt="Logo Saat Ini" width="200px">
+                                        </div>
+                                    </div>
+
+                                    <div class="form-group col-md-4">
+                                        <label for="foto" class="form-label">Foto Divisi Saat ini</label>
+
+                                        <div>
+                                            <img src="{{asset( $division->photo ?? 'assets/images/faces/1.jpg' )}}" alt="Foto Saat Ini" width="200px">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="map-iframe py-4 col-md-3">
+                            <div class="header mb-4">
+                                <h4 class="card-title">Ragam Jabatan</h4>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-12">
+                                        <label for="position_name" class="form-label">Nama Jabatan<span class="text-danger">*</span></label>
+                                        <table style="width: 100%" id="position_table" cellpadding="5">
+                                            <tbody data-position_total="{{count(@$division->positions)}}">
+                                                @foreach (@$division->positions as $key_position => $position)
+                                                    <tr data-order_position="{{$key_position + 1}}">
+                                                        <td style="width: 80%">
+                                                            <input type="text" id="position_name" class="form-control  @error('position_name') is-invalid @enderror" name="position_name[{{$key_position + 1}}]" placeholder="Nama Jabatan" value="{{ old('position_name') ? old('position_name') : $position->name  }}">
+                                                        </td>
+
+                                                        <td>
+                                                            @if ($key_position + 1 == 1)
+                                                                <button type="button" class="btn icon btn-success tooltip-class form-control" data-bs-placement="bottom" title="Tambah" onclick="addRowPosition()">
+                                                                    <i class="bi bi-plus-lg"></i>
+                                                                </button>
+                                                            @else
+                                                                <button type="button" class="btn icon btn-danger tooltip-class form-control" data-bs-placement="bottom" title="Hapus" onclick="removeRowPosition(this)">
+                                                                    <i class="bi bi-dash-lg"></i>
+                                                                </button>
+                                                            @endif
+                                                        </td>
+                                                    </tr>
+                                                @endforeach
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    {{-- <div class="form-group col-md-1">
+                                        <label for="name" class="form-label"></label>
+                                        <a href="{{ url('divisi/update') }}" class="btn icon btn-success tooltip-class form-control" data-bs-placement="bottom" title="Tambah">
+                                            <i class="bi bi-plus-circle"></i>
+                                        </a>
+                                    </div> --}}
+                                </div>
+                            </div>
+                        </div>
+
+                        <hr>
+
+                        <div class="description-of-organizatation py-4">
+                            <div class="header mb-4">
+                                <h4 class="card-title">Detail Divisi</h4>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-4">
+                                        <label for="description" class="form-label">Deskripsi <span class="text-danger">*</span></label>
+                                        <textarea class="form-control @error('description') is-invalid @enderror" id="description" rows="6" name="description" placeholder="Deskripsi">{{ old('description') ? old('description') : $division->description }}</textarea>
+                                    </div>
+
+                                    <div class="form-group col-md-8">
+                                        <label for="full_description" class="form-label">Deskripsi Lengkap <span class="text-danger">*</span></label>
+                                        <textarea class="form-control @error('full_description') is-invalid @enderror" id="full_description" rows="6" name="full_description" placeholder="Deskripsi Lengkap">{{ old('full_description') ? old('full_description') : $division->full_description }}</textarea>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-md-12">
+                                <div class="row">
+                                    <div class="form-group col-md-12">
+                                        <label for="content" class="form-label">Konten <span class="text-danger">*</span></label>
+                                        <textarea class="form-control @error('content') is-invalid @enderror" id="content" rows="4" name="content" placeholder="Konten">{{ old('content') ? old('content') : $division->content }}</textarea>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="col-sm-12 d-flex justify-content-end mt-4">
+                            <button type="button" class="btn btn-primary me-1 mb-1" id="submit_update_divisi_jabatan" onclick='preventDoubleClick("form_update_divisi_jabatan", "submit_update_divisi_jabatan")'>Submit</button>
+
+                            <a href="{{ url('divisi-jabatan') }}" class="btn btn-light-secondary mx-1 mb-1">Back</a>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('js')
+    <script src="{{ asset('assets/extensions/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-image-crop/filepond-plugin-image-crop.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-image-filter/filepond-plugin-image-filter.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js')}}"></script>
+    <script src="{{ asset('assets/extensions/filepond-plugin-image-resize/filepond-plugin-image-resize.min.js')}}"></script>
+
+    <script src="{{asset('assets/extensions/filepond/filepond.js')}}"></script>
+    <script src="{{asset('assets/extensions/toastify-js/src/toastify.js')}}"></script>
+    <script src="{{asset('assets/js/pages/filepond.js')}}"></script>
+    <script src="{{asset('assets/extensions/coloris/coloris.min.js')}}"></script>
+
+    <script>
+         $(document).ready(function () {
+            $(".filepond--drop-label").addClass("form-control")
+
+            @if($errors->has('logo'))
+                $(".filepond--drop-label").addClass("is-invalid")
+            @endif
+		});
+
+        // Filepond: Image Preview
+        FilePond.create(document.querySelector(".image-preview-filepond2"), {
+            credits: null,
+            allowImagePreview: true,
+            allowImageFilter: false,
+            allowImageExifOrientation: false,
+            allowImageCrop: false,
+            acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+            fileValidateTypeDetectType: (source, type) =>
+            new Promise((resolve, reject) => {
+                // Do custom type detection here and return with promise
+                resolve(type)
+            }),
+            storeAsFile: true,
+        })
+
+        // Function for prevent double click
+        function preventDoubleClick(id_form, id_button){
+            $('#'+id_button).attr('disabled', true)
+            $('#'+id_form).submit()
+        }
+
+        // Add Row Position
+        function addRowPosition() {
+            let positionTotal = $("#position_table tbody").attr("data-position_total")
+                positionTotal++
+
+
+            let html_row_position = `
+                                        <tr data-order_position="${positionTotal}">
+                                            <td style="width: 80%">
+                                                <input type="text" id="position_name" class="form-control  @error('position_name') is-invalid @enderror" name="position_name[${positionTotal}]" placeholder="Nama Jabatan">
+                                            </td>
+
+                                            <td>
+                                                <button type="button" class="btn icon btn-danger tooltip-class form-control" data-bs-placement="bottom" title="Hapus" onclick="removeRowPosition(this)">
+                                                    <i class="bi bi-dash-lg"></i>
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    `
+
+            $("#position_table tbody").append(html_row_position)
+            $("#position_table tbody").attr("data-position_total", positionTotal)
+        }
+
+        // remove Row Position
+        function removeRowPosition(button) {
+            let positionTotal = $("#position_table tbody").attr("data-position_total")
+                positionTotal--
+
+            let order = $(button).closest("tr").attr("data-order_position")
+            let orderPosition = null;
+
+            $(`#position_table tbody tr[data-order_position="${order}"]`).remove();
+
+            $(`#position_table tbody tr[data-order_position]`).each(function() {
+                orderPosition = $(this).attr("data-order_position")
+
+                if (orderPosition > order) {
+                    decrementOrderPosition = orderPosition - 1
+                    $(this).attr("data-order_position", decrementOrderPosition)
+                    $(this).find("input").attr("name", `position_name[${decrementOrderPosition}]`)
+                }
+            });
+
+            $("#position_table tbody").attr("data-position_total", positionTotal)
+        }
+
+    </script>
+@endsection
diff --git a/resources/views/divisions/index.blade.php b/resources/views/divisions/index.blade.php
new file mode 100644
index 0000000..23fda59
--- /dev/null
+++ b/resources/views/divisions/index.blade.php
@@ -0,0 +1,138 @@
+@extends('layout')
+
+@section('title', 'Data Divisi')
+
+@section('content')
+    <div class="page-title mb-4">
+        <div class="row">
+            <div class="col-12 col-md-6 order-md-1 order-last">
+                <h3>Data Divisi</h3>
+                <p class="text-subtitle text-muted"></p>
+            </div>
+            <div class="col-12 col-md-6 order-md-2 order-first">
+                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
+                    <ol class="breadcrumb">
+                        <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">Dashboard</a></li>
+                        <li class="breadcrumb-item active" aria-current="page">Divisi</li>
+                    </ol>
+                </nav>
+            </div>
+        </div>
+    </div>
+
+    <section class="section">
+        @if (session('success'))
+            <div class="alert alert-success alert-dismissible show fade">
+                <i class="bi bi-check-circle"></i> {{session('success')}}
+                <button type="button" class="btn-close btn-close-session text-white" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        @endif
+
+        <div class="card">
+            <div class="card-header">
+                <div class="float-start">
+                    <a href="{{ url('divisi-jabatan/create') }}" class="btn icon btn-success tooltip-class" data-bs-placement="bottom" title="Tambah">
+                        <i class="bi bi-plus-circle"></i>
+                    </a>
+                </div>
+            </div>
+
+            <div class="card-body">
+                <table class="table" id="table_division_position">
+                    <thead>
+                        <tr>
+                            <th>No</th>
+                            <th>Logo</th>
+                            <th>Nama</th>
+                            <th>Ragam Jabatan</th>
+                            <th>Action</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        @foreach ($divisions as $key_division => $division)
+                            <tr>
+                                <td>{{ $loop->iteration }}</td>
+                                <td>
+                                    <img src="{{ asset($division->logo) }}" alt="" width="100px">
+                                </td>
+                                <td class="fw-bold">{{ $division->name }}</td>
+                                <td style="width: 50%">{{ implode(', ', @$division->positions->pluck('name')->toArray()) }}</td>
+                                <td>
+                                    <div class="buttons">
+                                        <a href="{{ url('divisi-jabatan/'.$division->id.'/edit') }}" class="btn icon btn-primary tooltip-class" data-bs-placement="left" title="Edit">
+                                            <i class="bi bi-pencil"></i>
+                                        </a>
+
+                                        <button type="button" class="btn icon btn-danger tooltip-class" data-bs-placement="right" title="Hapus" data-bs-toggle="modal" data-bs-target="#modal_remove" onclick="modalRemove('{{ url('divisi-jabatan/'.$division->id) }}')">
+                                            <i class="bi bi-trash-fill"></i>
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+
+    {{-- Modal Remove--}}
+        <div class="modal fade text-left" id="modal_remove" role="dialog" aria-labelledby="myModalLabel120" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+                <div class="modal-content">
+                    <div class="modal-header bg-danger">
+                        <h5 class="modal-title white" id="myModalLabel120">Confirmation</h5>
+
+                        <button type="button" class="close" data-bs-dismiss="modal"aria-label="Close">
+                            <i data-feather="x"></i>
+                        </button>
+                    </div>
+
+                    <div class="modal-body">
+                        Are you sure want to remove this data?
+                    </div>
+
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal">
+                            <i class="bx bx-x d-block d-sm-none"></i>
+                            <span class="d-none d-sm-block">No</span>
+                        </button>
+
+                        <form action="" method="post" id="form_delete_division_position">
+                            @method("DELETE")
+                            @csrf
+
+                            <button type="submit" class="btn btn-danger ml-1" data-bs-dismiss="modal">
+                                <i class="bx bx-check d-block d-sm-none"></i>
+                                <span class="d-none d-sm-block">Yes</span>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {{-- Modal Remove --}}
+@endsection
+
+@section('js')
+    <script>
+        $(document).ready(function () {
+            // Init Datatable
+            $("#table_division_position").DataTable();
+		});
+
+        // Init Tooltip
+        document.addEventListener('DOMContentLoaded', function () {
+            var tooltipTriggerList = [].slice.call(document.querySelectorAll('.tooltip-class'))
+            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new bootstrap.Tooltip(tooltipTriggerEl)
+            })
+        }, false);
+
+        // Modal Remove
+        function modalRemove(url) {
+            $('#form_delete_division_position').attr("action", url)
+        }
+    </script>
+@endsection
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index 16e64a4..8621e59 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -85,6 +85,7 @@
 
     <script src="{{asset('assets/extensions/jquery/jquery.min.js')}}"></script>
     <script src="https://cdn.datatables.net/v/bs5/dt-1.12.1/datatables.min.js"></script>
+    {{-- <script src="{{asset('assets\extensions\datatables.net-bs5\js\dataTables.bootstrap5.min.js')}}"></script> --}}
     <script src="{{asset('assets/js/pages/datatables.js')}}"></script>
 
     <script>
@@ -107,3 +108,4 @@ function preventDoubleClick(id_form, id_button){
 </body>
 
 </html>
+
diff --git a/resources/views/sidebar.blade.php b/resources/views/sidebar.blade.php
index d97c9ba..8f043cc 100644
--- a/resources/views/sidebar.blade.php
+++ b/resources/views/sidebar.blade.php
@@ -21,6 +21,13 @@
     </a>
 </li>
 
+<li class="sidebar-item {{ request()->is('divisi*') ? 'active' : '' }}">
+    <a href="{{ url('divisi-jabatan') }}" class='sidebar-link'>
+        <i class="bi bi-postcard-fill"></i>
+        <span>Divisi & Jabatan</span>
+    </a>
+</li>
+
 {{-- Logout --}}
     <hr>
 
diff --git a/routes/web.php b/routes/web.php
index dcb82d2..aee4282 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\DivisionController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\UserController;
 use App\Http\Controllers\WebsiteProfileController;
@@ -42,6 +43,9 @@
             return view('website_profiles.index');
         })->name('website-profile.index');
         Route::post('/website-profile', [WebsiteProfileController::class, 'store'])->name('website-profile.store');
+
+    // Divisions
+        Route::resource('/divisi-jabatan', DivisionController::class);
 });
 
 require __DIR__.'/auth.php';